*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Montserra", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.4;
  color: #303030;
  background-color: white;
}

h1 {
  font-size: 5rem;
}

hr {
  border-color: rgba(0, 0, 0, 0.04);
}

/* SEÇÃO CABEÇALHO */

/* Estilização do modal */
.modal {
  display: none; /* Ocultar o modal por padrão */
  position: fixed; /* Ficar fixo na tela */
  z-index: 1000; /* Ficar acima de outros elementos */
  left: 0;
  top: 0;
  width: 100%; /* Largura total da tela */
  height: 100%; /* Altura total da tela */
  overflow: auto; /* Rolagem se necessário */
  background-color: rgba(0, 0, 0, 0.4); /* Fundo com opacidade */

  .modal-content {
    background-color: black; /* Fundo preto */
    margin: 15% auto; /* Espaçamento vertical */
    padding: 20px; /* Espaçamento interno */
    border: 1px solid #888; /* Borda */
    width: 80%; /* Largura do modal */
    box-shadow: 0 0 10px #ffb20f, inset 0 0 10px #ffb20f; /* Sombras */
    color: white; /* Texto branco para contraste */
    text-align: center; /* Centraliza o texto */

    .close {
      color: #ffb20f; /* Cor do botão de fechar */
      float: right;
      font-size: 28px;
      font-weight: bold;

      &:hover,
      &:focus {
        color: #ffb20f; /* Cor ao passar o mouse ou focar */
        text-decoration: none;
        cursor: pointer;
      }
    }

    a {
      text-decoration: none;
      color: white;
      position: relative;
      padding: 0.8rem;
      display: block;
      margin-bottom: 1.5rem; /* Aumenta o espaço entre os links */
      text-align: center; /* Centraliza o texto */

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        background: #ffb20f;
        border-radius: 5px;
        transform: scaleX(0);
        transition: all 0.6s ease;
        bottom: 0;
        left: 0;
      }

      &:hover {
        color: #ffb20f;

        &::before {
          transform: scaleX(1);
        }
      }
    }

    ul {
      list-style-type: none; /* Remove as bolinhas da lista */
      padding: 0; /* Remove o padding padrão da lista */
      margin: 0; /* Remove a margem padrão da lista */

      li {
        padding: 0; /* Remove o padding padrão dos itens da lista */
      }
    }

    h2 {
      margin-bottom: 2rem; /* Espaço entre o título e os links */
    }
  }
}

/* Estilização do cabeçalho */
header {
  position: sticky;
  top: 0;
  z-index: 3;
  width: 100vw;

  &.cabecalho {
    display: flex;
    gap: 15rem;
    align-items: center;
    justify-content: center;
    padding: 1.8rem;
    background-color: black;
    font-size: 1.6rem;
    color: white;
    text-align: center;

    .nav {
      .menu {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15rem;
        list-style: none;
        text-align: center;

        .imagem-logo {
          .logo {
            position: relative;

            &::before {
              content: "";
              position: absolute;
              width: 100%;
              height: 0.2rem;
              background: #ffb20f;
              transform: scaleX(0);
              transition: all 0.8s ease;
              bottom: 0;
              left: 0;
            }

            &:hover {
              color: #ffb20f;

              &::before {
                transform: scaleX(1);
              }
            }

            .logo-img {
              max-width: 20rem;
            }
          }
        }

        .link {
          display: flex;
          align-items: center;
          justify-content: center;
          text-decoration: none;
          color: white;
          font-size: 18px;
          padding: 0.5rem;
          position: relative;
          /* margin-bottom: 1.5rem; */
          text-align: center;

          a {
            color: white;
            text-decoration: none;
          }

          &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            background: #ffb20f;
            border-radius: 5px;
            transform: scaleX(0);
            transition: all 0.6s ease;
            bottom: 0;
            left: 0;
          }

          &:hover {
            color: #ffb20f;

            &::before {
              transform: scaleX(1);
            }
          }
        }

        .coluna {
          position: relative;
          margin-bottom: 1.5rem;
          text-align: center;

          .colunas {
            display: none;
            flex-direction: column;
            width: 15rem;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: black;
            border-radius: 1.8rem;
            box-shadow: 0 0.21rem 0.4rem #ffb20f,
              inset 0 0 0.4rem 0.1rem #ffb20f;
            z-index: 10;

            li {
              display: flex;
              justify-content: center;
              align-items: center;
              height: 5rem;
              width: 100%;
              border-bottom: solid 1px rgba(0, 0, 0, 0.1);

              &:last-child {
                border-bottom: none;
              }

              a {
                text-decoration: none;
                color: white;
                font-size: 18px;
                padding: 0.5rem;
                position: relative;
                text-align: center;

                &::before {
                  content: "";
                  position: absolute;
                  width: 100%;
                  height: 2px;
                  background: #ffb20f;
                  border-radius: 5px;
                  transform: scaleX(0);
                  transition: all 0.6s ease;
                  bottom: 0;
                  left: 0;
                }

                &:hover {
                  color: #ffb20f;

                  &::before {
                    transform: scaleX(1);
                  }
                }
              }
            }
          }

          &:hover > ul.colunas {
            display: flex;
          }
        }
      }
    }

    .nav-icones {
      display: flex;
      align-items: center;
      gap: 2rem;
      display: none;

      .nav-icone {
        height: 2.35rem;
        width: auto;

        &.nav-icone-fechar {
          display: none;
        }
      }
    }
  }
}

@media only screen and (max-width: 1200px) {
  header.cabecalho {
    gap: 10rem;

    .nav {
      .menu {
        gap: 10rem;
      }
    }
  }
}

@media only screen and (max-width: 985px) {
  header.cabecalho {
    gap: 2rem;

    .nav {
      .menu {
        gap: 7rem;
      }
    }
  }
}

@media only screen and (max-width: 910px) {
  header.cabecalho {
    gap: 0;
    justify-content: space-between;
    padding-right: 3.3rem;

    .nav {
      .menu {
        gap: 0;

        .link {
          display: none;
        }
      }
    }

    .nav-icones {
      display: flex;
      align-items: center;
      gap: 2rem;

      .nav-icone {
        height: 2.35rem;
        width: auto;

        &.nav-icone-fechar {
          display: none;
        }
      }
    }
  }
}

@media (max-width: 730px) {
  .modal .modal-content {
    margin: 12rem auto; /* Aumenta a margem superior para mover o conteúdo mais para baixo */
  }
}

/* SEÇÃO HERO */

section {
  &.hero {
    & .container {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10rem;
      padding: 5rem;
      background-color: #ffb20f;
      & .coluna {
        display: flex;
        flex-flow: column;
        gap: 5rem;
        & .titulo {
        }
        & .texto {
          max-width: 50rem;
          text-align: justify;
        }
      }
      & img {
        max-width: 90rem;
      }
    }
  }
}

/* SEÇÃO LEASING */

section {
  &.leasing {
    margin-top: 10rem;
    margin-bottom: 10rem;
    padding-left: 5rem;
    padding-right: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    & .container {
      padding: 5rem;
      width: 120rem;
      height: auto;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      gap: 5rem;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
      border-radius: 5rem;

      & .titulo {
        padding-left: 1rem;
        border-left: solid 0.5rem hsl(41, 100%, 53%);
      }

      & .colunas-texto-final {
        display: flex;
        flex-flow: column;
        gap: 3rem;
        align-items: center;
        justify-content: center;
        & .colunas {
          display: flex;
          flex-flow: column;
          gap: 2rem;

          & .coluna {
            display: flex;
            flex-flow: column;
            gap: 1rem;
          }
        }
        & .texto-final {
        }
      }
    }
  }
}

/* SEÇÂO Banner de Cookies */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Fundo preto semi-transparente */
  color: white;
  text-align: center;
  padding: 15px;
  font-size: 14px;
  z-index: 10000; /* Certifique-se de que o banner esteja acima de outros elementos */
}

.cookie-banner button {
  background-color: #ffb20f; /* Cor de fundo do botão */
  border: none;
  padding: 10px 20px;
  color: black; /* Cor do texto do botão */
  cursor: pointer;
  margin-left: 10px;
  border-radius: 5px; /* Borda arredondada */
}

.cookie-banner a {
  color: #ffb20f;
  text-decoration: underline;
}

/* SEÇÃO RODAPÉ */

footer {
  &.rodape {
    background-color: #fafafa;
    /* margin-top: 10rem; */
    padding-top: 7rem;
    padding-bottom: 3rem;
    padding-left: 5rem;
    padding-right: 5rem;
    & .container-colunas {
      margin-bottom: 4.5rem;
      display: flex;
      justify-content: center;
      gap: 15rem;

      & .logo {
        align-self: center;
        & img {
          width: auto;
          height: 7rem;
        }
      }
      & .container {
        display: flex;
        gap: 5rem;
        justify-content: center;

        & .fale-conosco {
          display: flex;
          flex-flow: column;
          gap: 1rem;
          & .titulo {
          }

          & .colunas-rodape {
            display: flex;
            flex-flow: column;
            gap: 1.5rem;

            & .contato-rodape {
              display: flex;
              flex-flow: column;
              gap: 1rem;

              & .subtitulo-contato {
              }

              & .email {
                & a {
                  text-decoration: none;
                  color: #ffb20f;
                }
              }

              & .telefone {
                & a {
                  text-decoration: none;
                  color: #ffb20f;
                }
              }
            }
          }
        }

        & .endereco {
          display: flex;
          flex-flow: column;
          gap: 1rem;
          & .titulo {
          }

          & .endereco-rodape {
            display: flex;
            flex-flow: column;
            gap: 1rem;
          }
        }

        & .protecao-dados {
          display: flex;
          flex-flow: column;
          gap: 1rem;
          & .titulo {
          }

          & .colunas-protecao {
            display: flex;
            flex-flow: column;
            gap: 0.5rem;
            & .privacidade {
              & a {
                text-decoration: none;
                color: #ffb20f;
              }
            }

            & .codigo-conduta {
              & a {
                text-decoration: none;
                color: #ffb20f;
              }
            }
          }
        }

        & .links-uteis {
          display: flex;
          flex-flow: column;
          gap: 1rem;
          & .titulo {
          }

          & .colunas-links {
            display: flex;
            flex-flow: column;
            gap: 0.5rem;
            & .links-vendas {
              & a {
                text-decoration: none;
                color: #ffb20f;
              }
            }

            & .links-servicos {
              & a {
                text-decoration: none;
                color: #ffb20f;
              }
            }

            & .links-sobre {
              & a {
                text-decoration: none;
                color: #ffb20f;
              }
            }

            & .links-contato {
              & a {
                text-decoration: none;
                color: #ffb20f;
              }
            }

            & .links-home {
              & a {
                text-decoration: none;
                color: #ffb20f;
              }
            }
          }
        }
        & .media {
          display: flex;
          flex-flow: column;
          gap: 1rem;
          & .coluna {
            display: flex;
            align-items: center;
            gap: 1rem;
            & img {
              width: 2.5rem;
              border-radius: 10%;
            }
            & a {
              color: #ffb20f;
              text-decoration: none;
            }
          }
        }
      }
    }

    & hr {
      &.linha {
        margin: auto;
        width: 85%;
      }
    }

    & .direitos-autorais {
      margin-top: 3rem;
      text-align: center;
    }
  }
}

/* FIXADO */

.logo-whatsapp {
  position: fixed;
  bottom: 1rem;
  right: 5rem;
  width: 5vw; /* Ajusta o tamanho do logo em relação à largura da viewport */
  z-index: 1000;

  &:hover {
    transform: translate(0.5rem, 0.5rem);
    transition: all 0.6s ease;
  }

  img {
    width: 100%;
  }
}

/* EFEITO SCROLL */

.scrollreveal {
  visibility: hidden;
}

/* Media queries para responsividade */
/* CABECALHO */

/* @media only screen and (max-width: 1200px) {
  header.cabecalho {
    gap: 10rem;
    & .nav {
      & .menu {
        gap: 10rem;
      }
    }
  }
}

@media only screen and (max-width: 985px) {
  header.cabecalho {
    gap: 2rem;

    & .nav {
      & .menu {
        gap: 7rem;
      }
    }
  }
}

@media only screen and (max-width: 840px) {
  header {
    &.cabecalho {
      gap: 0;
      justify-content: space-between;
      padding-right: 3.3rem;

      /* & .nav {
        &.aberto {
          & .menu {
            position: fixed;
            gap: 0;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: block;
            background-color: white;

            & .link {
              display: block;
            }
            & .logo {
            }
          }
        }
      } */

/* & .nav {
        & .menu {
          gap: 0;

          & .link {
            display: none;
          }
          & .logo {
          }
        }
      }
      & .nav-icones {
        display: flex;
        align-items: center;
        gap: 2rem;

        & .nav-icone {
          height: 2.35rem;
          width: auto;

          &.nav-icone-fechar {
            display: none;
          }
        }
      }
    }
  }
} */

/* seção hero */

@media (max-width: 840px) {
  section {
    &.hero {
      & .container {
        display: flex;
        flex-flow: column;
        gap: 5rem;
        & .imagem {
          & img {
            max-width: 30rem;
          }
        }
      }
    }
  }
}

/* RODAPÉ */

@media only screen and (max-width: 1165px) {
  footer {
    &.rodape {
      & .container-colunas {
        & .container {
          display: grid;
          grid-template-columns: repeat(2, 1fr); /* Define duas colunas */
          gap: 5rem;

          & .fale-conosco {
            grid-column: 1;
            grid-row: 1;
          }

          & .protecao-dados {
            grid-column: 1;
            grid-row: 2;
          }

          & .endereco {
            grid-column: 2;
            grid-row: 1;
          }

          & .links-uteis {
            grid-column: 2;
            grid-row: 2;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 880px) {
  footer {
    &.rodape {
      & .container-colunas {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;

        & .container {
          display: flex;
          flex-direction: column;
          gap: 5rem;
          width: 100%;

          & .fale-conosco,
          & .endereco,
          & .protecao-dados,
          & .links-uteis {
            width: 100%;
            display: flex;
            flex-flow: column;
            align-items: center;
            text-align: center;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 1242px) {
  footer {
    &.rodape {
      & .container-colunas {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;

        & .container {
          display: flex;
          flex-direction: column;
          gap: 2rem;
          width: 100%;

          & .fale-conosco,
          & .endereco,
          & .protecao-dados,
          & .links-uteis & .media {
            width: 100%;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 800px) {
  footer {
    .logo-whatsapp {
      img {
        width: 5rem;
      }
    }
  }
}