.cabecalho {
  padding-inline: 16px;
  background-color: var(--verde-musgo);
  position: sticky;
  z-index: 9999;
  top: 0;
  left: 0;

  & .nav {
    color: var(--branco);
    max-width: 120rem;
    height: 9rem;
    margin-inline: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

    & a {
      color: inherit;
      border-bottom: 2px solid transparent;
      transition: border-bottom 0.5s;

      &:link,
      &:visited {
        color: inherit;
      }

      &:hover {
        border-bottom: 2px solid var(--branco);
      }
    }

    & .logo {
      font-size: 2.76rem;
    }

    & .hamburger {
      display: none;
      border: none;
      background: none;
      border-top: 3px solid var(--branco);
      cursor: pointer;

      &::after,
      &::before {
        content: " ";
        display: block;
        width: 30px;
        height: 3px;
        background: var(--branco);
        margin-top: 5px;
        position: relative;
        transition: 0.3s;
      }
    }

    & .nav-list {
      display: flex;
      gap: 32px;
      list-style: none;

      & a {
        font-size: 18px;
        padding-block: 16px;
      }
    }
  }
}

.home-hero {
  background-image: url(../assets/jpg/hero-lais.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 41%;
  height: 70rem;

  .container {
    align-items: center;
    justify-content: center;
    & .logo-bege {
      width: 50rem;
    }
  }
}

.sobre-mim {
  & .container {
    display: flex;
    flex-flow: column;
    gap: 10.2rem;
    & .apresentacao {
      display: flex;
      flex-flow: row;

      &.bloco1,
      &.bloco2,
      &.bloco3 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
      }

      &.bloco1 {
        & .img-lais {
          width: 40rem;
          height: 40rem;
          & img {
            border-radius: 50%;
          }
        }
        & .lais-rodriguez {
          display: flex;
          flex-flow: column;
          gap: 1rem;
        }
      }

      &.bloco2 {
        gap: 3rem;
        & .container-titulo-img {
          display: flex;

          & .img-sobremim {
            width: 35rem;
          }
        }

        & .txt-sobremim {
          display: flex;
          flex-flow: column;
          align-items: start;
          justify-content: end;
        }
      }

      &.bloco3 {
        & .sitacoes {
          align-self: center;
          width: 100%;

          & .sitacao1,
          & .sitacao2 {
            max-width: 30rem;
          }
        }

        & .img-sobremim {
          max-width: 35rem;
        }
      }

      & .img-lais img,
      & .img-sobremim img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-top-right-radius: 50rem;
        border-top-left-radius: 50rem;
      }
    }
  }
}

.aulas {
  & .container {
    display: flex;
    flex-flow: column;
    gap: 11.92rem;

    & .sobre-aulas {
      display: flex;
      gap: 5rem;
      & .sobre {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        gap: 2rem;
      }
      & .video-aula {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        gap: 2rem;

        & video {
          max-width: 56rem;
          max-height: 36rem;
        }
      }
    }

    & .investimento {
      display: flex;
      flex-flow: column;
      text-align: center;
      gap: 3.12rem;

      & .cards {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;

        gap: 2rem;

        & .card {
          color: var(--branco);
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          flex: 1;
          width: 30rem;
          height: auto;
          background-color: var(--verde-musgo);
          border-radius: 2rem;
          padding: 2rem 2rem;
          gap: 1rem;
          box-shadow: -1rem 2rem 2rem rgba(0, 0, 0, 0.562);

          &:hover {
            transition: transform 1.5s;
            transform: scale(1.05);
          }

          &:hover .icone.girar {
            transition: transform 1.5s;
            transform: scale(1.05);
            transform: rotate(360deg); /* rotação completa de 360 graus */
          }

          & .benefits {
            display: flex;
            flex-flow: column;
            align-items: start;
            justify-content: center;
            text-align: center;
            gap: 1rem;
          }

          & .caixa-texto {
            & img {
              width: 2rem;
            }
          }

          & img {
            align-self: center;
            width: 10rem;
            height: auto;
          }

          & .botao {
            align-self: stretch;
          }
        }
      }
    }
  }
}

.contatos {
  .container {
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 8rem;

    & .texto {
      margin-top: 4rem;
    }

    & .links-logo {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      justify-content: center;
      gap: 2rem;

      & .contato {
        padding: 2rem;
        display: flex;
        flex-flow: column;
        border-right: 2px solid rgba(0, 0, 0, 0.596);
        gap: 2rem;

        & .caixa-texto a {
          color: inherit;
          text-decoration: underline;
        }
      }
      & .logo-circular img {
        max-width: 20rem;
      }
    }
  }

  footer {
    display: flex;
    flex-flow: column;
    gap: 3rem;
  }
}

.rodape {
  background-color: var(--marrom);

  & .container {
    color: white;
    width: 100%;
    display: flex;
    flex-flow: column;
    & .final {
      margin: 6rem 0;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      width: 100%;
      gap: 2rem;
      & .lais-final {
        max-width: 40rem;
      }

      & .social {
        max-width: 30rem;

        & img {
          width: 5rem;
        }
      }
    }

    & .copyright {
      font-size: 1.33rem;
      padding-top: 2rem;
      border-top: 1px solid black;
      text-align: center;

      & a {
        color: inherit;
        font-weight: 600;
        text-decoration: underline;
      }
    }

    & .whatsapp-fixo {
      & .logo-whatsapp {
        position: fixed;
        right: 3rem;
        bottom: 2rem;

        &:hover {
          transition: transform 0.7s;
          transform: translate(-1rem, -2rem);
        }

        & img {
          width: 8rem;
        }
      }
    }
  }
}