main { 
    position: relative;
    background: rgb(0, 10, 32); 
    transition: 0.5s; 
}

section.barraFixa {
  position: fixed;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding: 29px 20px 28px;
  z-index: 2147483647;
  background: rgba(14, 14, 14, 0.4);
  backdrop-filter: blur(6px);
  transition: 0.5s;

  &.barraFixaAtivo {
    top: 0;
  }

  @media screen and (max-width: 1440px) {
    padding: 20px;
  }

  .container {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    h1 {
      width: 100%;
      max-width: 267px;

      img {
        user-select: none;
      }
    }

    ul {
      width: 100%;
      max-width: 536px;
      display: flex;
      justify-content: space-between;
      gap: 10px;

      li {
        display: block;
        color: #fff;
        font-family: Raleway;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 2.52px;
        text-transform: uppercase;
        cursor: pointer;
        transition: 0.5s;

        &:hover {
          color: rgb(203, 149, 91);
        }
      }
    }

    span.menuMobile{
        display: none;
    }
  }

  &.lightMode {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);

    h1 {
      filter: invert(1);
    }

    ul {
      li {
        color: var(--Black-black-700, #121212);
      }
    }
  }
}


@keyframes animacaoTopo { 
  0% { transform: scale(1); opacity: 0; width: 1029px; }
  40% { transform: scale(1); opacity: 0; width: 1029px; }
  50% { transform: scale(1); opacity: 1; width: 1029px; }
  65% { transform: scale(1); opacity: 1; width: 276px; }
  70% { transform: scale(10); width: 276px; opacity: 1; }
  80% { transform: scale(20); width: 276px; opacity: 1; }
  80% { transform: scale(200); width: 276px; opacity: 1; }
  100% { transform: scale(300); width: 276px; opacity: 1; }
}
/* Section - Topo */ 
section.topo {
  overflow: clip;
  max-width: 1920px;
  max-height: 1080px;
  margin: 0 auto;

  .container {
    position: relative;

    .videoBorder {
      position: relative;
      height: 100vh;
      max-height: 1080px;
      background: #fff;
      transition: 0.5s;

      video {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1920px;
        height: 1080px;
        object-fit: cover;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: 1.5s;
      }

      video.videoFadeIn {
        opacity: 1;
      }

      span {
        position: absolute;
        display: block;
        bottom: 5%;
        transform: translateY(-50%);
        z-index: 11;

        color: #fff;
        font-family: Raleway;
        font-size: 32px;
        font-style: normal;
        font-weight: 400;
        line-height: 32px;

        &.textoEsquerda {
          left: 60px;
        }

        &.textoDireita {
          right: 60px;
        }

        b {
          font-weight: 700;
          font-style: italic;
          color: var(--Yellow-yellow-400, #E1FF85);
        }
      }
    }

    figure {
      position: absolute;
      inset: 50%;
      width: 100%;
      height: 100%;

      transform: translate(-50%, -50%);
      background: rgb(0, 10, 32);
      align-content: center;
      z-index: 71;
      mix-blend-mode: darken;
      transition: 0.5s;

      img {
        user-select: none;
        display: block;
        margin: 0 auto;
        height: 238px;
        object-fit: cover;
        object-position: left center;
        transition: 0.5s;
        animation: animacaoTopo 10s ease forwards;
      }
    }
  }

  &.topoAtivo {
    .container {
      figure {
        
      }
    }
  }
}

/* Section - Pilares */
section.pilares {
  background: rgb(0, 10, 32);
  padding: 100px 20px;
  min-height: calc(100px + 100vh);
  position: relative;

  @media screen and (max-width: 1440px) {
    padding: 100px 20px 40px;
  }

  .container {
    position: sticky;
    top: 15%;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;

    overflow-x: clip;
    transition: 0.5s;

    ul {
      transition: 0.5s;

      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;

        .videoWrap {
          position: relative;
          display: block;
          width: 100%;
          min-width: 110px;
          height: 119px;
          overflow: hidden;
          align-content: center;
          border-radius: 12px;

          video {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover;
            object-position: center;
          }

          video.educacao {
            max-width: 346px;
          }

          video.marketing {
            max-width: 280px;
          }

          video.tecnologia {
            max-width: 194px;
            height: 116px;
          }
        }

        b {
          display: block;
          width: fit-content;
          color: var(--White-white-500, #FCFFF0);
          font-family: Raleway;
          font-style: normal;
          font-weight: 700;
          letter-spacing: -9.5px;
          font-size: clamp(118px, 9.9vw, 190px);
          line-height: clamp(117.599px, 9.9vw, 216.376px);
        }
      }
    }

    h2 {
      width: 100%;
      max-width: 420px;
      margin-right: -420px;

      visibility: hidden;
      opacity: 0;

      color: var(--White-white-50, #FFFFFE);
      font-family: Raleway;
      font-style: normal;
      font-weight: 500;
      font-size: clamp(19px, 1.4vw, 25px);
      line-height: clamp(28px, 2vw, 40px);

      transition: 0.5s;

      b {
        font-weight: 800;
      }
    }

    &.pilaresAtivo {
      h2 {
        visibility: visible;
        opacity: 1;
        margin-right: 0;
      }
    }
  }
}

@keyframes faixas { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-800px); }
}

/* Section - Logo Especialistas */
section.logosEspecialistas {
  overflow: hidden;
  padding: 0 0 20px;

  ul {
    display: flex;
    width: max-content;
    gap: 80px;

    transition: 0.5s;
    animation: faixas 30s linear infinite;

    @media screen and (max-width: 1440px) {
      gap: 40px;
    }

    li {
      width: max-content;

      img {
        user-select: none;
      }
    }
  }
}

@keyframes pulse {
  0% {
    transform: translate(-50%,-50%) scale(1);
    filter: brightness(100%);
  }
  100% {
    transform: translate(-50%,-50%) scale(1.1);
    filter: brightness(200%);
  }
}

/* Section - Video Instituconal */
section.videoInstitucional{
    min-height: 100vh;
    transition: 0.5s;
    position: relative;
    z-index: 3;
    .video{
        position: relative; 
        width: 100%; 
        margin: 0px auto; 
        transition: all 0.5s ease; 
        transform-origin: center bottom;
        .videoWrapper{
            position: relative; 
            padding-bottom: 56.25%; 
            height: 0px; 
            transition: 0.5s;
            video{
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
            }
            iframe{
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
            }
        }
    }
}
@keyframes subir { 
  100% { opacity: 1; transform: translateY(0px); }
}

/* Section - Revista */ 
section.revista {
  position: relative;
  z-index: 4;
  padding: 120px 20px;

  @media screen and (max-width: 1440px) {
    padding: 100px 20px;
  }

  .container {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;

    display: flex;
    gap: 40px;

    @media screen and (max-width: 1440px) {
      gap: 20px;
      justify-content: space-between;
    }

    &.animarCards {
        .texto {
            h2 {
                animation: subir 0.6s ease-out forwards;
            }

            figure {
                animation: subir 0.6s ease-out 0.2s forwards;
            }
            }

            ul {
            animation: subir 0.6s ease-out 0.4s forwards;

            li {
                opacity: 1;
                transform: translateY(0);
            }

            li:nth-of-type(1) { transition-delay: 0.6s; }
            li:nth-of-type(2) { transition-delay: 0.8s; }
            li:nth-of-type(3) { transition-delay: 1s; }
            li:nth-of-type(4) { transition-delay: 1.2s; }
        }
    }

    .texto {
      width: 100%;
      max-width: 842px;

      display: flex;
      align-items: flex-end;
      gap: 40px;

      @media screen and (max-width: 1440px) {
        gap: 20px;
        max-width: 462px;
      }

      h2 {
        width: fit-content;
        max-height: 686px;

        color: var(--Yellow-yellow-600, #C5E85E);
        font-family: Raleway;
        font-style: normal;
        font-weight: 700;

        font-size: clamp(90px, 9.9vw, 190px);
        line-height: clamp(90px, 9.9vw, 216px);

        writing-mode: vertical-rl;
        transform: rotate(180deg) !important;

        opacity: 0;
        align-content: end;
        transition: 0.5s;

        @media screen and (max-width: 1440px) {
          width: 100%;
          max-width: 90px;
          font-size: clamp(85px, 5vw, 100px);
          line-height: clamp(95px, 5vw, 110px);
        }
      }

      figure {
        width: 100%;
        max-width: 420px;

        opacity: 0;
        transform: translateY(40px);
        transition: 0.5s;

        img {
          user-select: none;
          border-radius: 30px;
        }

        @media screen and (max-width: 1440px) {
          max-width: 360px;

          img {
            width: 100%;
            min-height: 735px;
            object-fit: cover;
          }
        }
      }
    }

    ul {
      width: 100%;
      max-width: 880px;

      display: flex;
      flex-wrap: wrap;
      gap: 40px;

      opacity: 0;
      transform: translateY(40px);
      transition: 0.5s;

      li {
        flex: 1 1 267px;
        width: 100%;
        position: relative;
        z-index: 1;
        align-content: end;

        padding: 48px;
        border-radius: 30px;

        opacity: 0;
        transform: translateY(-20px);
        transition: 0.5s;

        @media screen and (max-width: 1440px) {
          flex: 1 1 284px;
        }

        &::before {
          content: "";
          position: absolute;
          inset: 0;
          z-index: -1;

          background: var(--Dark-blue-dark-blue-700, #010D27);
          border-radius: 30px;
          transition: 0.5s;
        }

        h3 {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          width: 100%;
          padding: 48px 68px 48px 48px;

          color: var(--White-white-500, #FCFFF0);
          font-family: Raleway;
          font-size: clamp(26px, 2vw, 36px);
          font-style: normal;
          font-weight: 600;
          line-height: clamp(36px, 2vw, 46px);
          text-transform: uppercase;

          transition: 0.5s;
        }

        p {
          color: var(--White-white-600, #E5E8DA);
          font-family: Raleway;
          font-size: clamp(14px, 1vw, 18px);
          font-style: normal;
          font-weight: 400;
          line-height: clamp(24px, 1vw, 28px);

          opacity: 0;
          visibility: hidden;
          transition: 0.5s;
        }

        &:hover {
          &::before {
            background: rgb(252, 255, 240);
          }

          h3 {
            top: 0;
            transform: translate(-50%, 0);
            color: rgb(11, 11, 11);
          }

          p {
            color: rgb(11, 11, 11);
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }
  }

  ul.evento {
    width: 100%;
    max-width: 1800px;
    margin: 80px auto 0;

    display: flex;
    gap: 40px;
    transition: 0.5s;

    @media screen and (max-width: 1440px) {
      gap: 20px;
      margin-top: 60px;
    }

    li {
      flex: 1 1 320px;
      width: 100%;
      position: relative;

      figure {
        width: 100%;

        img {
          width: 100%;
          min-height: 440px;
          object-fit: cover;
          border-radius: 60px;
          user-select: none;

          @media screen and (max-width: 1440px) {
            border-radius: 30px;
          }
        }
      }

      div {
        position: absolute;
        left: 0;
        width: 100%;
        display: flex;

        h3 {
          position: relative;
          height: fit-content;
          margin-top: 96px;

          width: 100%;
          max-width: 225px;
          padding: 33px 15px;

          border-radius: 33px 0 33px 33px;
          background: rgb(217, 255, 103);

          color: var(--Black-black-900, #0B0B0B);
          text-align: center;
          font-family: "Rocky Condensed";
          font-style: italic;
          font-weight: 700;

          font-size: clamp(22px, 3.4vw, 64px);
          line-height: clamp(37px, 3.4vw, 82px);
          letter-spacing: -1.28px;

          &::before,
          &::after {
            content: "";
            position: absolute;
            background-repeat: no-repeat;
            background-size: contain;
          }

          &::before {
            top: -79px;
            right: -1px;
            width: 80px;
            height: 80px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 86 86' fill='none'%3E%3Cpath fill='%23d9ff67' fill-rule='evenodd' d='M85.552 85.552H0c74.382 0 85.552-10.219 85.552-85.552z' clip-rule='evenodd'/%3E%3C/svg%3E");
          }

          &::after {
            top: 44px;
            right: -70px;
            width: 70px;
            height: 72px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76' fill='none'%3E%3Cpath fill='%23d9ff67' fill-rule='evenodd' d='M0 0h75.045C9.798 0 0 8.964 0 75.045z' clip-rule='evenodd'/%3E%3C/svg%3E");
          }
        }

        p {
          width: 100%;
          max-width: 195px;
          min-height: 140px;
          padding: 20px;

          border-radius: 33px 33px 33px 0;

          background: rgb(217, 255, 103);

          color: var(--Black-black-900, #0B0B0B);
          text-align: center;
          font-family: Raleway;
          font-style: normal;
          font-weight: 700;
          font-size: clamp(14px, 1vw, 18px);
          line-height: clamp(20px, 1vw, 28px);

          align-content: center;
          height: fit-content;
        }
      }

      &:nth-of-type(odd) div {
        bottom: 0;
      }

      &:nth-of-type(even) div {
        top: 0;
      }
    }
  }
}

/* Section - Creator Economy */
section.creatorEconomy {
  padding: 140px 20px;

  &.lightMode {
    .container h2 {
      color: var(--Dark-blue-dark-blue-900, #000817);
    }
  }

  .container {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;

    h2 {
      margin-bottom: 3.334%;

      color: rgb(252, 255, 240);
      font-family: Raleway;
      font-style: normal;
      font-weight: 700;

      font-size: clamp(104px, 9.9vw, 190px);
      line-height: 96%;
      text-transform: uppercase;

      transition: 0.5s;

      b {
        color: var(--Yellow-yellow-600, #C5E85E);
        font-weight: 700;
      }

      em {
        display: block;

        color: var(--Dark-blue-dark-blue-200, #8A92A3);
        font-family: Raleway;
        font-style: italic;
        font-weight: 600;

        font-size: clamp(14px, 1vw, 18px);
        line-height: 140%;
        text-transform: uppercase;
      }
    }

    p {
      margin-bottom: 15px;
      padding: 40px 32px;

      border-radius: 24.889px;
      background: var(--Yellow-yellow-600, #C5E85E);

      text-align: center;
      text-transform: uppercase;

      color: var(--Dark-blue-dark-blue-900, #000817);
      font-family: Raleway;
      font-style: normal;
      font-weight: 600;

      font-size: clamp(16px, 1.88vw, 36px);
      line-height: 64%;

      b {
        font-weight: 900;
      }
    }

    > span {
      display: block;
      margin-bottom: 4.278%;

      color: var(--Black-black-900, #0B0B0B);
      font-family: Raleway;
      font-size: clamp(14px, 1vw, 18px);
      font-style: normal;
      font-weight: 600;
      line-height: 23.229px;
      text-transform: uppercase;
    }

    ul {
      display: flex;
      gap: 24px;

      @media screen and (max-width: 1440px) {
        gap: 15px;
      }

      li {
        position: relative;
        width: 100%;
        min-width: 0;

        overflow: hidden;
        border-radius: 16px;
        transition: 0.5s;

        @media screen and (max-width: 1440px) {
          border-radius: 12px;
        }

        figure {
          width: 100%;
          transition: 0.5s;

          img {
            width: 100%;
            min-height: 500px;

            object-fit: cover;
            user-select: none;
            transition: 0.5s;

            @media screen and (max-width: 1440px) {
              min-height: 308px;
              border-radius: 12px;
            }
          }
        }

        div {
          position: absolute;
          left: 0;
          bottom: 0;

          padding: 5.715%;

          opacity: 0;
          visibility: hidden;
          transform: translateY(50px);

          transition: 0.3s;

          h3 {
            width: max-content;
            margin-bottom: 7.242%;

            color: var(--White-white-500, #FCFFF0);
            font-family: Raleway;
            font-size: clamp(24px, 1.88vw, 36px);
            font-style: normal;
            font-weight: 600;
            line-height: 128%;

            text-shadow: rgba(1, 1, 1, 0.5) 0 0 2px;
          }

          a {
            &:link,
            &:visited,
            &:active {
              display: block;
              width: fit-content;

              padding: 8px 16px;
              border-radius: 42px;
              background: #fff;

              color: var(--Black-black-700, #121212);
              font-family: Raleway;
              font-size: clamp(14px, 0.9vw, 16px);
              font-style: normal;
              font-weight: 600;
              line-height: 150%;

              transition: 0.5s;

              &:hover {
                background: rgb(126, 126, 126);
                color: rgb(241, 241, 241);
              }
            }
          }
        }

        &.hoverAtivo {
          min-width: calc(23% + 6px);

          @media screen and (max-width: 1440px) {
            min-width: 19%;
          }

          div {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
          }
        }
      }
    }
  }
}

/* Section - Galeria */
section.galeria {
  padding: 40px 20px;

  @media screen and (max-width: 1440px) {
    padding: 20px 20px 100px;
  }

  &.lightMode {
    .container {
      p {
        color: var(--Dark-blue-dark-blue-900, #000817);
      }
    }
  }

  .container {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;

    h2 {
      color: var(--Yellow-yellow-600, #C5E85E);
      font-family: Raleway;
      font-size: clamp(140px, 9.9vw, 190px);
      font-style: normal;
      font-weight: 700;
      line-height: 114%;
    }

    p {
      margin-bottom: 4.278%;
      transition: 0.5s;

      color: var(--White-white-50, #FFFFFE);
      font-family: Raleway;
      font-size: clamp(26px, 9.9vw, 36px);
      font-style: normal;
      font-weight: 500;
      line-height: 128%;
      text-transform: uppercase;

      b {
        font-weight: 500;
        color: var(--Light-blue-light-blue-500, #5E69C5);
      }
    }

    ul {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(7, 1fr);
      gap: 40px;

      li {
        img,
        video {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 30px;
          user-select: none;
        }
      }

      .galeria1  { grid-area: span 2 / span 2 / span 2 / span 2; }
      .galeria2  { grid-column: 3 / span 2; }
      .galeria3  { grid-column-start: 3; grid-row-start: 2; }
      .galeria4  { grid-column-start: 4; grid-row-start: 2; }

      .galeria5  { grid-row-start: 3; }
      .galeria6  { grid-row-start: 3; }
      .galeria7  { grid-row-start: 3; }
      .galeria8  { grid-row-start: 3; }

      .galeria9  { grid-column: span 2 / span 2; grid-row-start: 4; }
      .galeria10 { grid-column-start: 3; }
      .galeria11 { grid-column-start: 4; grid-row-start: 4; }

      .galeria12 { grid-column: span 2 / span 2; grid-row-start: 5; }
      .galeria13 { grid-column: 3 / span 2; grid-row-start: 5; }

      .galeria14 { grid-column: span 2 / span 2; grid-row-start: 6; }
      .galeria15 { grid-column: 3 / span 2; grid-row-start: 6; }

      .galeria16 { grid-row-start: 7; }
      .galeria17 { grid-column: span 2 / span 2; grid-row-start: 7; }
      .galeria18 { grid-column-start: 4; grid-row-start: 7; }
    }
  }
}

@keyframes animaFaixaAreasDaEmpresa { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-3000px); }
}
@keyframes animaCarrossel1 { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-2000px); }
}
@keyframes animaCarrossel2 { 
  0% { transform: translateX(-2000px); }
  100% { transform: translateX(0px); }
}
/* Section - Trabalhe Conosco */ 
section.trabalheConosco {
  padding: 140px 20px;
  overflow: clip;

  &.lightMode {
    .container {
      .texto {
        p {
          color: var(--White-white-500, #000817);
        }
      }
    }
  }

  .container {
    width: 100%;
    max-width: 1800px;
    margin: 0px auto 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;

    h2 {
      color: var(--Yellow-yellow-600, #C5E85E);
      font-family: Raleway;
      font-size: clamp(118px, 9.9vw, 190px);
      font-style: normal;
      font-weight: 700;
      line-height: 114%;
      width: 100%;
      max-width: clamp(724px, 52vw, 1000px);
    }

    svg {
      display: block;
      width: fit-content;
      min-width: 110px;

      @media screen and (max-width: 1280px) {
        min-width: initial;
      }
    }

    div.texto {
      width: 100%;
      max-width: 413px;

      p {
        color: var(--Dark-blue-dark-blue-900, #FCFFF0);
        font-family: Raleway;
        font-size: clamp(20px, 1.15vw, 22px);
        font-style: normal;
        font-weight: 500;
        line-height: 136%;
        margin-bottom: 40px;
        transition: 0.5s;
      }

      a:active,
      a:link,
      a:visited {
        display: block;
        border-radius: 110.46px;
        border: 1.5px solid var(--Dark-blue-dark-blue-900, #000817);
        padding: 34px 20px;
        transition: 0.5s;
        position: relative;
        overflow: clip;
        z-index: 1;

        &::before {
          position: absolute;
          content: "";
          width: 0px;
          height: 100%;
          left: 0px;
          top: 0px;
          z-index: -1;
          transition: 0.5s;
          background: var(--Orange-orange-500, #FF562F);
          border-radius: 110.46px;
        }

        b {
          display: block;
          color: var(--Dark-blue-dark-blue-900, #000817);
          font-family: Raleway;
          font-size: 24px;
          font-style: normal;
          font-weight: 900;
          line-height: 32px;
          text-transform: uppercase;
          text-align: center;
          transition: 0.5s;
        }

        &:hover::before {
          width: 100%;
        }
      }
    }
  }

  ul.carrossel {
    display: flex;
    gap: 45px;
    width: max-content;
    margin: 0px -20px 48px;

    &.carrosel1 {
      animation: 60s linear 0s infinite normal none running animaCarrossel1;
    }

    &.carrosel2 {
      animation: 60s linear 0s infinite normal none running animaCarrossel2;
    }

    li {
      width: max-content;

      img {
        border-radius: 30px;
        user-select: none;

        @media screen and (max-width: 1440px) {
          border-radius: 20px;
          max-height: 170px;
        }
      }
    }
  }

  div.faixaAreasDaEmpresa {
    margin: 0px -20px;
    width: max-content;

    ul {
      display: flex;
      gap: 40px;
      width: max-content;
      transition: 0.5s;
      animation: 60s linear 0s infinite normal none running animaFaixaAreasDaEmpresa;

      li {
        width: max-content;
        padding: 9px 22px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 60px;
        border: 1px solid var(--Dark-blue-dark-blue-900, #000817);

        svg {
          width: fit-content;
        }

        b {
          display: block;
          color: var(--Dark-blue-dark-blue-900, #000817);
          font-family: Raleway;
          font-size: 24px;
          font-style: normal;
          font-weight: 500;
          line-height: 32px;
        }
      }
    }
  }
}

/* Section - Socios */
section.socios {
  padding: 120px 20px;
  position: relative;

  &.lightMode {
    .container {
      h2 {
        color: var(--Dark-blue-dark-blue-900, #000817);
      }
    }
  }

  .container {
    width: 100%;
    max-width: 1800px;
    margin: 0px auto;
    min-height: calc(3000px + 100vh);

    h2 {
      color: var(--White-white-500, #FCFFF0);
      font-family: Raleway;
      font-size: clamp(80px, 9.9vw, 190px);
      font-style: normal;
      font-weight: 700;
      line-height: 117%;
      margin-bottom: 40px;
    }

    ul {
      display: flex;
      gap: 40px;
      position: sticky;
      top: 120px;

      li {
        display: flex;
        align-items: center;
        gap: 40px;
        width: 100%;

        div.imgComInfo {
          position: relative;
          z-index: 1;
          width: 100%;

          figure {
            width: 100%;
            transition: 0.5s;
            position: relative;
            z-index: 2;

            img {
              width: 100%;
              user-select: none;
              border-radius: 60px;
              background: rgb(36, 43, 59);
              min-height: 578px;
              object-fit: cover;
              max-height: calc(-120px + 100vh);

              @media screen and (max-width: 1440px) {
                border-radius: 30px;
              }
            }
          }

          span {
            position: absolute;
            display: block;
            height: fit-content;
            z-index: 1;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            width: 100%;
            max-width: 700px;
            padding: 40px;

            b {
              display: block;
              color: var(--White-white-50, #FFFFFE);
              font-family: Raleway;
              font-size: clamp(24px, 1.9vw, 36px);
              font-style: normal;
              font-weight: 700;
              line-height: 128%;
              margin-bottom: 5.808%;
            }

            em {
              display: block;
              color: var(--White-white-50, #FFFFFE);
              font-family: Raleway;
              font-size: clamp(13px, 1.9vw, 18px);
              font-style: normal;
              font-weight: 400;
              line-height: 28px;
              letter-spacing: -0.01em;
            }
          }
        }

        div.texto {
          display: none;
          height: fit-content;

          h3 {
            color: var(--White-white-50, #FFFFFE);
            font-family: Raleway;
            font-size: 36px;
            font-style: normal;
            font-weight: 700;
            line-height: 46px;
            margin-bottom: 36px;
          }

          p {
            color: var(--White-white-50, #FFFFFE);
            font-family: Raleway;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 28px;
          }
        }
      }
    }
  }
}


/* Footer */
footer {
  padding: 28px 20px;

  .container {
    width: 100%;
    max-width: 1800px;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    figure {
      width: 100%;
      max-width: 193px;

      @media screen and (max-width: 1386px) {
        max-width: 52px;
      }

      img {
        filter: invert(1);
        width: 100%;
        user-select: none;
        height: 45px;
        object-fit: cover;
        object-position: left center;
      }
    }

    .sociais {
      display: flex;
      width: fit-content;
      gap: 24px;

      svg {
        display: none;
      }

      a {
        display: block;
        background: transparent;
        transition: 0.5s;
        border-radius: 50%;

        svg {
          display: block;
          width: 100%;
        }

        &:hover {
          background: rgb(203, 149, 91);
        }
      }
    }

    h2 {
      color: var(--Dark-blue-dark-blue-900, #000817);
      font-family: Raleway;
      font-size: 18px;
      font-style: normal;
      font-weight: 600;
      line-height: 28px;
      width: fit-content;
      margin-right: auto;

      @media screen and (max-width: 1400px) {
        max-width: 366px;
      }

      a {
        display: inline-block;
        color: var(--Dark-blue-dark-blue-900, #000817);
        font-family: Raleway;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: auto;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
        transition: 0.5s;

        &:hover {
          color: rgb(203, 149, 91);
        }
      }
    }

    .links {
      display: flex;
      gap: 20px;

      a {
        color: var(--Dark-blue-dark-blue-900, #000817);
        font-family: Raleway;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 32px;
        transition: 0.5s;

        &:hover {
          color: rgb(203, 149, 91);
        }
      }
    }

    p {
      color: var(--Dark-blue-dark-blue-900, #000817);
      font-family: Raleway;
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      letter-spacing: 0.36px;
    }
  }
}




/* - - - MOBILE - - -*/ 
@media screen and (max-width: 1000px) {
main{overflow: clip;}

/* Section - Barra Fixa */ 
section.barraFixa {padding: 16px 20px;}
section.barraFixa .container {max-width: 440px; position: relative;}
section.barraFixa .container h1 {max-width: 152px;}
section.barraFixa .container h1 img {}
section.barraFixa .container ul {position: absolute;opacity: 0;visibility: hidden;transition: all 0.5s ease;width: calc(100% + 40px);top: 64px;padding: 0px;flex-direction: column;transform: translateX(-50%);left: 50%; gap: 0px;}
section.barraFixa .container.menuMobileAtivo ul {opacity: 1; visibility: visible;}
section.barraFixa .container ul li {transform: translateY(-20px); text-align: right; font-size: 14px; text-shadow: rgba(1, 1, 1, 0.5) 0px 0px 2px; transition: all 0.5s ease; padding: 10px 20px;background: rgba(14, 14, 14, 0.40);backdrop-filter: blur(6px);}
section.barraFixa.lightMode .container ul li {background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); text-shadow: 0 0 0 #000;}
section.barraFixa .container.menuMobileAtivo ul li{transform: translateY(0px);}
section.barraFixa .container ul li:nth-of-type(1) {transition-delay: 0.7s; order: 3;}
section.barraFixa .container ul li:nth-of-type(2) {transition-delay: 0.5s; order: 2;}
section.barraFixa .container ul li:nth-of-type(3) {transition-delay: 0.3s; order: 1;}
section.barraFixa .container span.menuMobile {display: block; transition: all 0.5s ease;}
section.barraFixa.lightMode .container span.menuMobile svg {filter: invert(1);}

@keyframes animacaoTopo { 
  0% { transform: scale(1); opacity: 0; width: 276px; }
  40% { transform: scale(1); opacity: 1; width: 276px; }
  50% { transform: scale(1); opacity: 1; width: 276px; }
  65% { transform: scale(1); opacity: 1; width: 276px; }
  70% { transform: scale(10); width: 276px; opacity: 1; }
  80% { transform: scale(20); width: 276px; opacity: 1; }
  80% { transform: scale(200); width: 276px; opacity: 1; }
  100% { transform: scale(300); width: 276px; opacity: 1; }
}

/* Section - topo */
section.topo {}
section.topo .container {}
section.topo .container .videoBorder {max-height: 740px; height: calc(100vh - 20px);}
section.topo .container .videoBorder video {width: 100%;height: 750px;}
section.topo .container .videoBorder span {font-size: 18px;line-height: 28px;}
section.topo .container .videoBorder span b {}
section.topo .container .videoBorder span.textoEsquerda {left: 20px;}
section.topo .container .videoBorder span.textoDireita {right: 20px;}
section.topo .container figure {}
section.topo .container figure img {}

/* Section - Pilares */
section.pilares {padding: 60px 20px;background: #060606;min-height: calc(-100px + 100vh);}
section.pilares .container {flex-direction: column;gap: 24px;max-width: 440px;}
section.pilares .container ul {width: 100%;}
section.pilares .container ul li {gap: 5px;}
section.pilares .container ul li .videoWrap {min-width: 35px;height: 35px;border-radius: 2.874px;}
section.pilares .container ul li .videoWrap video {}
section.pilares .container ul li .videoWrap video.educacao {}
section.pilares .container ul li .videoWrap video.marketing {}
section.pilares .container ul li .videoWrap video.tecnologia {height: 144px;}
section.pilares .container ul li b {font-size: 46.059px;font-style: normal;font-weight: 700;line-height: 52.601px; /* 114.202% */letter-spacing: -2.303px;}
section.pilares .container h2 {margin-right: 0px; font-size: 14px;font-style: normal;font-weight: 500;line-height: 20px;}
section.pilares .container h2 b {}
section.pilares .container.pilaresAtivo {}
section.pilares .container.pilaresAtivo h2 {}

/* Section - Logo Especialistas */
section.logosEspecialistas {padding: 4px 20px;}
section.logosEspecialistas ul {gap: 30px;}
section.logosEspecialistas ul li {}
section.logosEspecialistas ul li img {height: 40px;}

/* Section - Video Instituconal */
section.videoInstitucional {background: #060606; min-height: initial;}
section.videoInstitucional:not(.videoAtivo) {}
section.videoInstitucional:not(.videoAtivo) .video::after {width: calc(100% - 325px);max-width: 45px;background-size: contain;background-repeat: no-repeat;height: 100%;background-position: center;}
section.videoInstitucional .video {max-width: 440px;}
section.videoInstitucional .video .videoWrapper {}
section.videoInstitucional .video .videoWrapper video {}

/* Section - Revista */
section.revista {padding: 60px 20px;}
section.revista.fundoMobile {background: #060606;}
section.revista .container {max-width: 440px;flex-direction: column;gap: 16px;}

section.revista .container .texto {}
section.revista .container .texto h2 {writing-mode: initial;transform: rotate(0deg) !important;font-size: 40px;font-style: normal;font-weight: 700;line-height: 40.041px;max-width: initial;}
section.revista .container .texto figure {display: none;}
section.revista .container .texto figure img {}
section.revista .container ul {gap: 16px}
section.revista .container ul li {padding: 24px 16px;border-radius: 12px;}
section.revista .container ul li::before {border-radius: 12px; background: var(--Dark-blue-dark-blue-700, #010D27);}
section.revista .container ul li h3 {position: initial;transform: initial;font-size: 20px;font-style: normal;font-weight: 600;line-height: 24px; /* 120% */text-transform: uppercase;padding: 0px;margin-bottom: 24px;}
section.revista .container ul li p {opacity: 1;visibility: visible;}
section.revista .container ul li:hover::before {background: var(--Dark-blue-dark-blue-700, #010D27);}
section.revista .container ul li:hover h3 {transform: initial; color: var(--White-white-500, #FCFFF0);}
section.revista .container ul li:hover p {color: var(--White-white-600, #E5E8DA);}

section.revista .container.animarCards {}
section.revista .container.animarCards .texto h2 {}
section.revista .container.animarCards .texto figure {}
section.revista .container.animarCards ul {}
section.revista .container.animarCards ul li {}
section.revista .container.animarCards ul li:nth-of-type(1) {}
section.revista .container.animarCards ul li:nth-of-type(2) {}
section.revista .container.animarCards ul li:nth-of-type(3) {}
section.revista .container.animarCards ul li:nth-of-type(4) {}

section.revista ul.evento {flex-wrap: wrap;max-width: 440px;gap: 15px; margin-top: 16px;}
section.revista ul.evento li {flex: 1 1 150px;}
section.revista ul.evento li figure {}
section.revista ul.evento li figure img {min-height: initial;border-radius: 25px;}
section.revista ul.evento li div {}
section.revista ul.evento li div h3 {font-size: 26.624px;font-style: italic;font-weight: 700;line-height: 34.028px; /* 127.811% */letter-spacing: -0.532px;border-radius: 12px 0px 12px 12px;padding: 16px 5px;margin-top: 32px;}
section.revista ul.evento li div h3::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3E%3Cpath fill='%23d9ff67' fill-rule='evenodd' d='M31.128 31.128H0c27.064 0 31.128-3.718 31.128-31.128z' clip-rule='evenodd'/%3E%3C/svg%3E");width: 32px;height: 32px;top: -31px;}
section.revista ul.evento li div h3::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none'%3E%3Cpath fill='%23d9ff67' fill-rule='evenodd' d='M0 0h27.306C3.565 0 0 3.262 0 27.306z' clip-rule='evenodd'/%3E%3C/svg%3E");width: 28px;height: 28px;right: -28px;top: 30px;}
section.revista ul.evento li div p {font-size: 9px;font-style: normal;font-weight: 700;line-height: 10px;min-height: inherit;border-radius: 12px 12px 12px 0px;padding: 16px 3px;min-height: 62px;}
section.revista ul.evento li:nth-of-type(odd) div {}
section.revista ul.evento li:nth-of-type(even) div {}

/* Section - Creator Economy */
section.creatorEconomy {padding: 30px 20px;}
section.creatorEconomy.lightMode {}
section.creatorEconomy.lightMode .container h2 {}
section.creatorEconomy.lightMode .container span {color: var(--Dark-blue-dark-blue-900, #000817);}

section.creatorEconomy .container {max-width: 440px;}
section.creatorEconomy .container h2 {font-size: 44px;font-style: normal;font-weight: 700;line-height: 120%; margin-bottom: 31px;}
section.creatorEconomy .container h2 b {}
section.creatorEconomy .container h2 em {font-size: 12px;}
section.creatorEconomy .container p {font-size: 22px;font-style: normal;font-weight: 600;line-height: 32px; border-radius: 16px; background: #C5E85E; padding: 20px; margin-bottom: 14px; text-align: left;}
section.creatorEconomy .container p b {}
section.creatorEconomy .container > span {font-size: 18px;font-style: normal;font-weight: 600;line-height: 28px;margin-bottom: 34px;color:  rgb(252, 255, 240);transition: all 0.5s ease;max-width: 282px;}
section.creatorEconomy .container ul {overflow-x: scroll;width: calc(100% + 40px);margin: 0px -20px;padding: 0px 20px 10px;}
section.creatorEconomy .container ul li {width: max-content;min-width: 240px;}
section.creatorEconomy .container ul li figure {width: 250px;height: 300px;position: relative;}
section.creatorEconomy .container ul li figure img {width: 421px;height: 500px;object-fit: none;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%) scale(0.7);max-width: max-content;}
section.creatorEconomy .container ul li div {opacity: 1; visibility: visible;transform: translateY(0px);}
section.creatorEconomy .container ul li div h3 {font-size: 20px;font-style: normal;font-weight: 600;line-height: 25px; margin-bottom: 8px;}
section.creatorEconomy .container ul li div a {font-size: 10px;font-style: normal;font-weight: 600;line-height: 12px; padding: 5px 9px;}
section.creatorEconomy .container ul li div a:link {}
section.creatorEconomy .container ul li div a:visited {}
section.creatorEconomy .container ul li div a:active {}
section.creatorEconomy .container ul li div a:hover {}
section.creatorEconomy .container ul li.hoverAtivo {min-width: 240px;}
section.creatorEconomy .container ul li.hoverAtivo div {}

/* Section - Galeria */
section.galeria {padding: 30px 20px;}
section.galeria.lightMode {}
section.galeria.lightMode .container p {}
section.galeria .container {}
section.galeria .container h2 {font-size: 62px;font-style: normal;font-weight: 700;line-height: 68.031px; margin-bottom: 8px;}
section.galeria .container p {font-size: 22px;font-style: normal;font-weight: 500;line-height: 30px; margin-bottom: 24px;}
section.galeria .container p b {}
section.galeria .container ul {gap: 16px;}
section.galeria .container ul li {}
section.galeria .container ul li img {border-radius: 6px;}
section.galeria .container ul li video {border-radius: 6px;}
section.galeria .container ul .galeria1 {}
section.galeria .container ul .galeria2 {}
section.galeria .container ul .galeria3 {}
section.galeria .container ul .galeria4 {}
section.galeria .container ul .galeria5 {}
section.galeria .container ul .galeria6 {}
section.galeria .container ul .galeria7 {}
section.galeria .container ul .galeria8 {}
section.galeria .container ul .galeria9 {}
section.galeria .container ul .galeria10 {}
section.galeria .container ul .galeria11 {}
section.galeria .container ul .galeria12 {}
section.galeria .container ul .galeria13 {}
section.galeria .container ul .galeria14 {}
section.galeria .container ul .galeria15 {}
section.galeria .container ul .galeria16 {}
section.galeria .container ul .galeria17 {}
section.galeria .container ul .galeria18 {}


/* Section - Trabalhe Conosco */
section.trabalheConosco {padding: 30px 20px;}

section.trabalheConosco .container {flex-direction: column; gap: 40px; max-width: 440px;}
section.trabalheConosco .container h2 {font-size: 62px;font-style: normal;font-weight: 700;line-height: 68.031px; }
section.trabalheConosco .container svg {display: none;}
section.trabalheConosco .container div.texto {}
section.trabalheConosco .container div.texto p {font-size: 21px;font-style: normal;font-weight: 500;line-height: 30px;}
section.trabalheConosco .container div.texto a:link,
section.trabalheConosco .container div.texto a:visited,
section.trabalheConosco .container div.texto a:active {padding: 22px;}
section.trabalheConosco .container div.texto a::before {}
section.trabalheConosco .container div.texto a b {font-size: 18px !important;line-height: 32px !important;}
section.trabalheConosco .container div.texto a:hover::before {}

section.trabalheConosco ul.carrossel {}
section.trabalheConosco ul.carrossel.carrosel1 {}
section.trabalheConosco ul.carrossel.carrosel2 {}

section.trabalheConosco ul.carrossel li {}
section.trabalheConosco ul.carrossel li img {}
section.trabalheConosco div.faixaAreasDaEmpresa {}
section.trabalheConosco div.faixaAreasDaEmpresa ul {gap: 25px;}
section.trabalheConosco div.faixaAreasDaEmpresa ul li {transition: all 0.5s ease; border-color: #FCFFF0;}
section.trabalheConosco div.faixaAreasDaEmpresa ul li svg {transition: all 0.5s ease; filter: invert(1);}
section.trabalheConosco div.faixaAreasDaEmpresa ul li b {transition: all 0.5s ease; color: #FCFFF0;}

section.trabalheConosco.lightMode {}
section.trabalheConosco.lightMode .container .texto p {}
section.trabalheConosco.lightMode div.faixaAreasDaEmpresa ul li {border-color: #000817;}
section.trabalheConosco.lightMode div.faixaAreasDaEmpresa ul li svg {filter: invert(0);}
section.trabalheConosco.lightMode div.faixaAreasDaEmpresa ul li b {color: var(--Dark-blue-dark-blue-900, #000817);}

/* Section - Socios */
section.socios {padding: 30px 20px 60px;}
section.socios.lightMode {}
section.socios.lightMode .container h2 {}

section.socios .container {max-width: 440px;min-height: initial;}
section.socios .container h2 {font-size: 40px;font-style: normal;font-weight: 700;line-height: 48px; max-width: 272px; margin-bottom: 20px;}
section.socios .container ul {flex-direction: column; gap: 0px; }
section.socios .container ul li {flex-direction: column;gap: 22px;}
section.socios .container ul li:first-of-type {padding-bottom: 40px; margin-bottom: 40px; border-bottom: solid 1px #FFFFFF30;}
section.socios .container ul li div.imgComInfo {}
section.socios .container ul li div.imgComInfo figure {}
section.socios .container ul li div.imgComInfo figure img {border-radius: 30.656px;min-height: 335px;}
section.socios .container ul li div.imgComInfo span {display: none;}
section.socios .container ul li div.imgComInfo span b {}
section.socios .container ul li div.imgComInfo span em {}
section.socios .container ul li div.texto {display: block;}
section.socios .container ul li div.texto h3 {font-size: 24px;font-style: normal;font-weight: 700;line-height: 46px;margin-bottom: 16px;}
section.socios .container ul li div.texto p {font-size: 14px;font-style: normal;font-weight: 400;line-height: 22px;}



/* Footer */
footer {padding: 40px 20px;}
footer .container {max-width: 440px;flex-direction: column;align-items: center;gap: 13px;}
footer .container figure {display: none;}
footer .container figure img {}
footer .container .sociais {padding: 10px 13px;border-radius: 8px;border: 1px solid #000;gap: 16px;width: 100%;max-width: 366px;}
footer .container .sociais svg {display: block;}
footer .container .sociais a {}
footer .container .sociais a svg {}
footer .container .sociais a:hover {}
footer .container h2 {position: relative;padding: 14px 13px 14px 68px;border-radius: 8px;border: 1px solid #000;font-size: 12px;font-style: normal;font-weight: 700;line-height: 18px;letter-spacing: -0.01em;margin: 0px;width: 100%;}
footer .container h2::before {position: absolute; content: ''; width: 43px; height: 43px; top: 50%; transform: translateY(-50%); left: 13px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='43' fill='none'%3E%3Cpath stroke='%23000817' stroke-linecap='round' stroke-linejoin='round' stroke-width='.964' d='M39.238 12.765 23.532 22.769a3.49 3.49 0 0 1-3.51 0L4.302 12.765m3.494-5.24h27.95a3.494 3.494 0 0 1 3.493 3.493v20.963a3.494 3.494 0 0 1-3.493 3.493H7.795A3.494 3.494 0 0 1 4.3 31.981V11.018a3.494 3.494 0 0 1 3.494-3.494'/%3E%3C/svg%3E");}
footer .container h2 a {display: block;font-size: 12px;font-style: normal;font-weight: 500;line-height: 18px;}
footer .container h2 a:hover {}
footer .container .links {}
footer .container .links a {}
footer .container .links a:hover {}
footer .container p {font-size: 12px;font-style: normal;font-weight: 400;line-height: normal;letter-spacing: 0.24px;}


}