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

body {
  margin: 0;
  padding: 0;
  max-width: 100vw;
  background-color: #000;
}


.rotate-down {
    transform: translateY(-50%) rotate(90deg);
}

.rotate-up {
    transform: translateY(-50%) rotate(-90deg);
}

/* ========================================
   HEADER DESKTOP
======================================== */

header {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 5vw;
  color: white;
  overflow: hidden;
}

header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  pointer-events: none;
  z-index: 0;
}

.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: 100vw;
  height: auto;
  z-index: 0;
  transform: translate(-50%, -50%); 
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease; 
}

.bg-video.visible{
  opacity: 1;
}

.languages{
  position: absolute;
  color: white;
  background-color: rgba(128, 128, 128, 0.5);
  border-radius: 5px;
  font-family: Helvetica;
  font-size: 1.5vh;
  font-weight: bold;
  z-index: 1;
  width: 2.5vw;
  height: 2.5vh;
  top: 5vh;
  right: 5vw;
}

.proposta{
  position: absolute;
  color: white;
  background-color: rgba(128, 128, 128, 0.5);
  border-radius: 5px;
  font-size: 1.5vh;
  top:5vh;
  right:3vw;
  padding: 0.5vh 0.5vw;
  align-items: center;
}

.proposta a{
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.logo {
  position: absolute;
  top: 5vh;
  left: 5vw;
  width: clamp(100px, 12vw, 180px);
  height: 5vh;
  width: auto;
  z-index: 2;
  }



header .h1-big {
    font-size: 10vh;
    font-family: Helvetica;
    line-height: 0.9;
    margin: 0;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    z-index: 1;
    position: relative;
}

header h1:nth-child(7){
  margin-top: 12vh;
}

header .h1-small {
    position: relative;
    font-family: Helvetica;
    font-size: 2.5vh;
    font-weight: 1;
    letter-spacing: -0.02em;
    line-height: 1.4;
    text-transform: uppercase;
    z-index: 1;
}

header .h1-small.first-small {
    margin-top: 5vh;
}

.mergulhe-mais {
  position: absolute;
  font-family: Helvetica;
  top: 88%;
  left: 22%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  z-index: 1;
}

.mergulhe-mais a {
  color: white;
  font-size: 2vh;
}

.setinha{
    height: 2vh;
    width: 1vw;
    margin-top: 1vh;
    max-width: none;
}

/* header h1:nth-child(4) {
      margin-top: 5vh;
  } */

/* header h1:nth-child(7) {
  margin-top: 5vh;
} */

header h1:not(.logo):first-of-type {
  margin-top: 2vh; 
  font-style: italic;
}

.bar-vertical {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 10;
    transform: translateY(-50%) rotate(var(--rotation, 0deg));
    /* transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
    transform-origin: center right; */
    height:30vh;
}

@keyframes girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.logo-move {
    position: absolute;
    bottom: 2.5vh;       
    left: 50%;
    transform: translateX(-50%);
    height: 8vh;
    z-index: 3;
    animation: girar 8s linear infinite;
}

/* ========================================
   HEADER MOBILE
======================================== */

@media (max-width: 767px){

  header {
      padding-left: 6vw;
      padding-right: 6vw;
      padding-top: 12vh;
      padding-bottom: 10vh;
      justify-content: flex-start;
      gap: 0;
  }

  .logo {
      width: 120px;
      height: auto;
      top: 4vh;
      left: 6vw;
  }

  .bg-video {
    position: absolute;
    top: 50%;
    left: 0%;
    min-width: 200%;
    min-height: 100%;
    width: 100vw;
    height: auto;
    z-index: 0;
    transform: translate(-50%, -50%); 
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease; 
  }

  .languages {
      width: 12vw;
      height: 3.5vh;
      font-size: 3vw;
      top: 4vh;
      right: 6vw;
  }

  .proposta{
    position: absolute;
    color: white;
    background-color: rgba(128, 128, 128, 0.5);
    border-radius: 5px;
    font-size: 1.5vh;
    top: 4.5vh;
    right:20vw;
    padding: 0.5vh 0.5vw;
    align-items: center;
  }

  header .h1-big {
      font-size: clamp(2.8rem, 18vw, 7rem);
      line-height: 0.9;
  }

   header .h1-big:nth-of-type(1) {
      margin-top: 10vh !important;
  }


  header .h1-small {
      font-size: clamp(0.75rem, 4.5vw, 1.8rem);
      line-height: 1.5;
  }

  header h1:nth-child(7){
    margin-top: 18vh;
  }

  .logo-move {
      position: absolute;
      bottom: 9vh;
      left: 45%;
      top: auto;
      transform: translateX(-50%);
      height: 6vh;
  }

  .mergulhe-mais {
      position: absolute;
      bottom: 2vh;
      left: 50%;
      top: auto;
      transform: translateX(-50%);
  }

  .mergulhe-mais a {
      font-size: 3vw;
  }

  .bar-vertical {
      display: none;
  }

  .circular-text-container {
      display: none !important;
  }
}

/* ========================================
   CLIENTES SECTION
======================================== */

.clients-section{
    overflow: hidden;
    background-color: black;
    height: 20vh;
    gap: 20px;
}

.client-scroll {
    display: flex;
    width: max-content;
}

.scroll-content{
  display: flex;
  gap: 10em;
  animation: scroll-left 35s linear infinite;
  width: max-content;
  align-items: center;
  margin-top: 8vh;
  padding-right: 10em;
}

@keyframes scroll-left {
  from{ transform: translateX(0);}
  to {transform: translateX(-100%);}
}

.client-scroll img {
  height: 8vh;
  object-fit: cover;
  flex-shrink: 0;
}

/* ========================================
   CLIENTES SECTION MOBILE
======================================== */

@media (max-width: 767px) {

  .clients-section{
      overflow: hidden;
      background-color: black;
      height: 15vh;
      gap: 20px;
  }

  .client-scroll {
      display: flex;
      width: max-content;
  }

  .scroll-content{
    display: flex;
    gap: 5em;
    animation: scroll-left 45s linear infinite;
    width: max-content;
    align-items: center;
    margin-top: 2.5vh;
    padding-right: 10em;
  }

  @keyframes scroll-left {
    from{ transform: translateX(0);}
    to {transform: translateX(-100%);}
  }

  .client-scroll img {
    height: 10vh;
    object-fit: cover;
    flex-shrink: 0;
  }

}
/* ========================================
   SHALOW SECTION DESKTOP
======================================== */

.shallow-section{
    position: relative;
    min-height: 130vh;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* padding: clamp(60px, 7vh, 120px) 5vw; */
    padding-top: 10vh;
    margin: 0;
    color:white;
    background-color: white;
    font-family: Helvetica;
    text-align: center;
    background-image: url('backgrounds/image-daive-mobile.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    /* opacity: 0; */
    transition: opacity 1.2s ease;
}

.shallow-section.visible{
  opacity: 1;
}

.shallow-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height:100%;
  background: linear-gradient(to bottom, rgb(0, 0, 0) 0%,      /* Preto total no topo */
                                         rgba(0, 0, 0, 0.6) 4%,   /* Ainda bem escuro */
                                         rgba(0, 0, 0, 0.0) 10%,   /* Começa a clarear */
                                          transparent 100%          /* Transparente no final */);
  pointer-events: none;
  z-index: 0;
}

.shallow-section hr {
  border: none;
  border-top: 1px solid white;
  margin-top: 10px;
  width: 45%;
  padding-bottom: 10px;
  z-index: 1;
}

.shallow-section h1,p{
  z-index: 1;
  transform: translateY(4vh);
  transition: opacity 0.8s ease, transform 0.5s ease;
}

.shallow-section h1.visible,
.shallow-section p.visible {
    opacity: 1;
    transform: translateY(0);
}

.shallow-section h1:nth-child(1),
.shallow-section h1:nth-child(2),
.shallow-section h1:nth-child(3) {
    font-size: clamp(2vh, 6vh, 8vh);
    text-align: center;
    line-height: 1.1;
    width: 90%;
}

.shallow-section h1:nth-child(4){
    position: relative;
    font-size: clamp(1vh, 2vh, 4vh);
    text-align: center;
    line-height: 1.1;
    margin-top: 10vh;
    width: 90%;
    bottom: 15vh;

}

.shallow-section h1:nth-child(5),
.shallow-section h1:nth-child(6){
    position: relative;
    font-size: clamp(2vh, 4vh, 6vh);
    text-align: center;
    line-height: 1.1;
    width: 90%;

}

.shallow-section h1:nth-child(9){
    position: relative;
    font-size: clamp(1vh, 3vh, 5vh);
    text-align: center;
    line-height: 1.1;
    margin-top: 13vh;
    width: 90%;
    bottom: 10vh;

}


.shallow-section p{
  font-size: clamp(1vh, 2.3vh, 3vh) !important;
  font-family: Helvetica, sans-serif;
  margin-top: 2vh;
  margin-bottom:6vh;
}

.logo-raso {
  position: absolute;
  bottom: 0;
  width: 98vw;
  transform: translateY(1.5vh);
    }

/* ========================================
   SHALOW SECTION MOBILE
======================================== */

@media (max-width: 767px) {

    .shallow-section {
        padding-top: 6vh;
        padding-left: 6vw;
        padding-right: 6vw;
        min-height: 85vh;
        padding-bottom: 6vh;
        background-image: url('/backgrounds/image-daive-mobile.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .shallow-section h1:nth-child(1),
    .shallow-section h1:nth-child(2),
    .shallow-section h1:nth-child(3) {
        font-size: clamp(2rem, 6vw, 3rem);
    }

    .shallow-section h1:nth-child(4) {
        font-size: clamp(0.85rem, 2.5vw, 1rem);
        margin-top: 3vh;
        bottom: auto;
    }

    .shallow-section h1:nth-child(5),
    .shallow-section h1:nth-child(6) {
        font-size: clamp(1.5rem, 5vw, 2.5rem);
    }

    .shallow-section h1:nth-child(9) {
        font-size: clamp(1.2rem, 5vw, 2rem);
        margin-top: 0vh;
        bottom: auto;
    }

    .shallow-section p {
        font-size: clamp(0.75rem, 3.5vw, 1rem) !important;
        padding: 0 2vw;
    }

    .shallow-section hr {
        width: 80%;
    }

    .logo-raso {
        position: absolute;
        bottom: -1vh;
        padding-bottom: 0;
        left: 50%;
        transform: translateX(-50%) translateY(2%);
        
        width: 100vw; 
        /*height: clamp(150px, 80vh, 100vw);*/
        height: auto; 
        object-fit: contain; 
        object-position: bottom center;
        display: block;
        z-index: 1;
    }
}



/* ========================================
   STRATEGY SECTION DESKTOP
======================================== */

.strategy-section{
    position: relative;
    min-height: 130vh;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    font-family: Helvetica;
    background-color: white;
    font-size: clamp(2vh, 2.5vh, 3vh) !important;
}


.logo-strategy{
  margin-top: 5vh;
  width: 90vw;
}


.mergulho-profundo, .diagnostico, .estrategia, .criacao {
  position: absolute;
  width: fit-content;
  transform: translateY(5vh);
  transition: opacity 0.8s ease, transform 0.5s ease;
}

.mergulho-profundo.visible, .diagnostico.visible, .estrategia.visible, .criacao.visible {
  opacity: 1;
  transform: translateY(0);
}

.mp-p, .d-p, .e-p, .c-p {
  margin-top: 2vh;
}
.mergulho-profundo{
  top: 20%;
  left: 17%;
}

.diagnostico {
  top: 19%;
  right: 15%;
}

.estrategia {
  top: 55%;
  right: 16%;
}

.criacao {
  top: 55%;
  left: 17%;
}

.seta1{
  position:absolute;
  top: 30%;
  height:9vh;
}

.seta2{
  position:absolute;
  bottom: 30%;
  height:9vh;
}

.mergulhe-mais-st {
  position: absolute;
  font-family: Helvetica;
  top: 90%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  z-index: 1;
}


.mergulhe-mais-st a {
  color: black;
  font-size: 2vh;
}

/* ========================================
   STRATEGY SECTION MOBILE
======================================== */

@media (max-width: 767px) {

    .strategy-section {
        padding: 4vh 6vw 8vh;
        align-items: flex-start;
    }

    .mergulho-profundo,
    .diagnostico,
    .estrategia,
    .criacao {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        margin-bottom: 6vh;
        opacity: 1;
        transform: none;
    }

    .mp-h1 h1,
    .d-h1 h1,
    .e-h1 h1,
    .c-h1 h1 {
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 1;
    }

    .mp-p p,
    .d-p p,
    .e-p p,
    .c-p p {
        font-size: clamp(0.8rem, 3.5vw, 1rem);
        line-height: 1.5;
        transform: translateY(1vh);
    }

    .seta1,
    .seta2 {
        display: none;
    }

    .mergulhe-mais-st {
        position: relative;
        top: auto;
        margin-top: 2vh;
        align-self: center;
    }

    .mergulhe-mais-st a{
        font-size: 3vw !important;
    }

    .setinha{
        height: 2vh;
        width: 4vw;
        margin-top: 1vh;
        max-width: none;
    }

    /* .logo-strategy{
      margin-top: 1vh;
      margin-bottom: 5vh;
      width: 85vw;
    } */

    .logo-strategy{
      display: none;
    }
}


/* ========================================
    CASES SECTION DESKTOP
======================================== */


.cases-section{
  position: relative;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  font-family: Helvetica;
  background-color: white;
  overflow-x: hidden;
}

.logo-cases{
  filter: invert(100%);
  width: 90vw;
}

.cases-section hr {
  border: none;
  border-top: 1px solid black;
  margin-top: 10px;
  min-width: 90%;
  padding-bottom: 10px;
}

.cases-section p {
  max-width: 50vw;
}

.cases-header{
  display: flex;
  flex-direction: row;   
  justify-content: flex-start; 
  align-items: center;
  width: 100vw;
}

.cases-header p:first-of-type{
  font-size: clamp(10vh, 15vh, 20vh);
  margin-top: 5vh;
  margin-bottom: 10vh;
  margin-left: 4vw;
  margin-right:17vw;
  align-self: flex-start;
}

.cases-header p:nth-of-type(2){
  font-size: clamp(1.5vh, 2vh, 2.5vh);
  line-height: 1.2;
  margin-top: -5vh;
  text-align: left;
}


.image-strip {
  gap: 20px;
  color:black;
  padding-left: 0vw;
  margin-bottom: 3vh;
  width:90vw;
}

.image-strip img {
  max-height: 100%;
  width: 100%;
  object-fit: cover;
  }

.image-strip video {
  max-height: 60vh;
  width: 100%;
  object-fit: cover;
  }
  
  
  .image-strip b{
    font-weight: bold;
  }
  
  .image-strip p:nth-of-type(3){
    color:black;
  }

  .row-container {
    display: flex;
    justify-content: space-between; 
    align-items: flex-start;       
    width: 87vw;
    margin-top: 2vh;                               
  }

  .small-arrow{
    height:1.5vh;
    width:auto;
  }

  .strip-text-1{
    text-align: left;
    font-size: clamp(1vh, 1.9vh, 2vh);
  }

  .strip-text-1 p:nth-child(2){
    margin-top: 2vh;
    color:gray !important;
  }

 .strip-text-2{
  text-align: right;
  color: black;
  font-size: clamp(1vh, 1.9vh, 2vh);
 }

 .strip-text-2 p:nth-of-type(2){
  color: gray;
  margin-top: 2vh;
  margin-bottom: 7vh;
}

  .seta-svg {
    width: auto !important;       /* Faz a seta acompanhar o tamanho da fonte */
    height: 1.5vh;        /* Mantém a proporção */
    vertical-align: middle; /* Alinha o centro da seta com o centro do texto */
    margin-left: 4px;    /* Espaçamento entre o texto e a seta */
    display: inline-block;
  }
  
 .cases-section footer{
    margin-top: 15vh;
    margin-bottom: 5vh;
    text-align: center;
    font-size: 2vh;
    font-family: Helvetica;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    align-self: center;
    z-index: 1;
  }

 .cases-section footer a{
    color: black;
    font-size: 2vh;
  }


  /* ========================================
    CASES SECTION MOBILE
  ======================================== */

  @media (max-width: 767px) {

    .cases-section {
        padding-bottom: 6vh;
    }

    .cases-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 6vw;
    }

    .cases-header p:first-of-type {
        font-size: 18vw;
        margin: 0vh 0 2vh 0;
    }

    .cases-header p:nth-of-type(2) {
        font-size: 3.5vw;
        margin: 0 0 6vh 0;
    }

    .cases-carousel {
        display: flex;
        flex-direction: row;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 4vw;
        padding: 0 6vw 2vh;
        width: 100vw;
        scrollbar-width: none;
    }

    .cases-carousel::-webkit-scrollbar {
        display: none; 
    }

    .image-strip {
        flex-shrink: 0;
        height: auto;
        width: 90vw;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        gap:0;
    }

    .image-strip img {
        width: 100%;
        min-width: unset;
        max-height: auto;
        object-fit: cover;
    }

    .row-container {
        flex-direction: column;
        gap: 1vh;
        width: 100%;
        margin-top: 1.5vh;
    }

    .strip-text-1{
      text-align: left;
      font-size: 3vw;
    }

    .strip-text-1 p:nth-child(2){
      margin-top: 2vh;
      margin-left:0vw;
      color:gray !important;
    }

    .strip-text-2{
      text-align: left;
      color: black;
      font-size: 3vw;
    }

    .strip-text-2 p:nth-of-type(2){
      color: gray;
      margin-top: 2vh;
      margin-bottom: 7vh;
    }


    .cases-section footer {
        margin-top: 5vh;
    }

    .logo-cases{
      display: none;
    }

    .cases-section footer a{
      color: black;
      font-size: 3vw;
    }
}
  
  /* ========================================
  CREATION SECTION DESKTOP
  ======================================== */
  
  .creation-section {
    position: relative;
    min-height: 75vh;
    max-width: 100vw;
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left:4vw;
    font-family: Helvetica;
    color: white;
    overflow: hidden;
    z-index: 0;
    /* opacity: 0;
    transition: opacity 1.2s ease; */
    background-color: #062738;
  }

  /* .creation-section.visible{
    opacity: 1;
  } */
  
  .creation-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(6, 39, 56, 1), transparent);
    /* background-color: #062738; */
    pointer-events: none;
    z-index: 0;
  }

  .creation-section video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  transform: translate(-50%, -50%); 
  object-fit: cover;
}

  .creation-section p {
  margin:0;
  z-index: 1;
  font-weight: bold;
  }

.text-1{
  font-size: clamp(8vh, 9vh, 11vh);
  font-weight: light;
  z-index: 1;
  transform: translateY(-30%);
}

.text-2{
  position: absolute;
  font-size: 3vh;
  z-index: 1;
  transform: translateX(70%);
  bottom: 32vh;
  width: 100vw;
}

.logo-move-creation {
  position: absolute;
  top: 10%;
  height: auto;
  width: 90vw;
  z-index: 2;
}


.three-columns-wrapper {
  position: relative;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100vw;
  color: white;
  background-color: #062738;
  font-family: Helvetica;
  align-items: stretch;
  /* transition: opacity 1.2s ease;
  opacity: 0; */
}

/* .three-columns-wrapper.visible{
  opacity: 1;
} */

.column {
  flex: 1;
  padding:0;
  min-height: 100vh;
  position: relative;
}

.services-carousel {
    display: flex;
    flex-direction: row;
    gap: 4vw;
    width: 100vw;
    scrollbar-width: none;
  }

.block{
  display: flex;
  flex-direction: row;
}

.block-1{
  position: relative;
  transition: transform 0.4s ease;
  will-change: transform;
  padding: 4vh 4vw 2vh 4vw;
  overflow-y: visible;
  width: 100%;
  background-color: #062738 !important;
  margin-bottom: 20vh;
}

.block-1:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -2vw; /* metade do gap (4vw / 2) */
  top: 0;
  width: 1px;
  height: 100%;
  background-color: white;
}

/* .block::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%;
    background: linear-gradient(to bottom, transparent 0%, #062738 30%, #000 50%);
    pointer-events: none; /* Deixa clicar nos textos por baixo */
    /* z-index: 1; */
  /* } */

/* .block-1:hover {
  transform: translateY(-15%);
} */

.services {
  position: relative;
  display: flex;
  margin-top: 30vh;
  padding-top: 10vh;
  padding-bottom: 10vh;
  background-color: #000;
  max-width: 100vw;
  z-index: 2;    
  align-items: center;
}

.services p:nth-of-type(1){
  font-size: 20vh;
  margin-left: 5vw;
  margin-right: 10vw;
}

.services p:nth-of-type(2){
  font-size: 4vh;
  margin-left: 5vw;
  margin-right: 10vw;
}

.services::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height:100%;
  background: linear-gradient(to bottom, rgb(0, 0, 0) 0%,      /* Preto total no topo */
                                         rgba(0, 0, 0, 0.6) 4%,   /* Ainda bem escuro */
                                         rgba(0, 0, 0, 0.0) 10%,   /* Começa a clarear */
                                          transparent 100%          /* Transparente no final */);
  pointer-events: none;
  z-index: 0;
}


.block-1 p:nth-of-type(1),
.block-1 p:nth-of-type(2) {
  font-size: clamp(3vh, 5vh, 6vh);
}

.block-1 p:nth-of-type(2) {
  margin-bottom: 10vh;
}

.block-1 p:nth-of-type(3) {
  font-size: clamp(2vh, 4vh, 5vh);
  margin: 0;
}

.arrow {
  height: 15vh;
  width: auto;
  max-width: 50px;
  display: block;
  margin-left: auto;
  margin-right: 2vw;
}

  /* ========================================
  CREATION SECTION DESKTOP
  ======================================== */

  @media (max-width: 767px) {

    .creation-section {
        padding-left: 6vw;
        padding-right: 6vw;
        min-height: 70vh;
    }

    .creation-section video {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100vw;
      height: 100vh;
      z-index: 0;
      transform: translate(-50%, -50%); 
      object-fit: cover;
    }
    
    /* .creation-section::after {
      display: none;
    } */

    .text-1 {
        font-size: clamp(3rem, 12vw, 5rem);
        transform: translateY(-5vh);
        margin-bottom: 15vh;
    }

    .text-2 {
        font-size: 4vw;
        right:17vw;
        bottom: 18vh;
        position: absolute;
    }

    .three-columns-wrapper {
        /* Adiciona um gradiente no fundo para suavizar a chegada do preto */
        background: linear-gradient(to bottom, #062738 80%, #062738 100%);
    }

    .services-carousel {
      display: flex;
      flex-direction: row;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 4vw;
      padding: 4vh 6vw 2vh;
      width: 100vw;
      scrollbar-width: none;
    }

    .services-carousel::-webkit-scrollbar {
        display: none;
    }

    .block {
        flex-direction: column;
    }

    .block-1 {
        flex-shrink: 0;
        width: 100vw;
        scroll-snap-align: start;
        padding: 4vh 6vw;
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .block-1 p:nth-of-type(1),
    .block-1 p:nth-of-type(2) {
        font-size: clamp(1.5rem, 7vw, 2.5rem);
    }

    .block-1 p:nth-of-type(2) {
        margin-bottom: 3vh;
    }

    .block-1 p:nth-of-type(3) {
        font-size: clamp(0.8rem, 3.5vw, 1rem);
        line-height: 1.6;
    }

    .block::after {
        display: none;
    }

    .services {
        flex-direction: column;
        align-items: flex-start;
        padding: 6vh 6vw;
        margin-top: 0;
        gap: 2vh;
    }

    .services p:nth-of-type(1) {
        font-size: 18vw;
        margin: 0;
    }

    .services p:nth-of-type(2) {
        font-size: 5vw;
        margin: 0;
    }
}

/* ========================================
   TEAM SECTION DESKTOP
======================================== */

.team-section {
  position: relative;
  height: 135vh;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  padding: 60px 80px;
  font-family: Helvetica;
  background-color: white;
  color: black;
}

.logo-team {
  align-self: center;
  height: auto;
  width: 90vw;
  margin-bottom: 8vh;
}

.left-content {
  position: absolute;
  top: 28vh;
  left: 5vw;
  display: flex;
  flex-direction: column;
  width: 40%;
}

.left-content h2 {
  font-size: clamp(4vh, 7vh, 8vh);
  font-weight: 400;
  line-height: 1.2;
}

.left-content h2 em {
  font-style: italic;
  font-weight: 300;
}

.left-content h2:nth-child(2){
    margin-bottom: 7vh;
}

.left-content h2:nth-child(4){
    margin-bottom: 35vh;
}

.scroll-btn {
  background: none;
  border: 1px solid #000;
  padding: 15px 30px;
  font-size: 1.7vh;
  letter-spacing: 1px;
  cursor: pointer;
  text-align: center;
  align-self: center;
  width: fit-content;
  line-height: 1.6;
  transition: all 0.3s ease;
}

.scroll-btn:hover {
  background: #000;
  color: #fff;
}

.right-content {
  position: absolute;
  top: 25vh;
  right: 5vw;
  width: 45%;
  display: flex;
  flex-direction: column;
}

.top-nav {
  display: flex;
  max-width: 45%;
  gap: 3vw;
  justify-content: flex-end;
  margin-top: 3vh;
  margin-bottom: 5vh;
  margin-left: 21vw;
}

.top-nav a {
  color: #000;
  text-decoration: none;
  font-size: 2vh;
  letter-spacing: 1px;
  transition: opacity 0.3s;
}

.top-nav a:hover {
  opacity: 0.6;
}

.team-card {
  background: #fff;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
}

.photo-placeholder {
  width: 25vw;
  aspect-ratio: 9/11;
  background:'white';
  margin-bottom: 30px;
  margin-left: 0vw;
  align-self: center;
  justify-self: center;
  overflow: hidden;
}

.photo-slider {
    display: flex; 
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform
}

.photo-slider img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 10%;
    flex-shrink: 0;
}

#team-name, #team-role, #team-bio {
    transition: all 0.6s ease-out;
    margin-left: 3vw;
}

.team-card h3 {
  font-size: 4vh;
  font-weight: 400;
  margin: 0 30px 5px;
}

.team-card .role {
  font-style: italic;
  font-size: 3vh;
  margin: 2vh 30px 2vh;
  opacity: 0.8;
}

.team-card .bio {
  font-size: 2.5vh;
  line-height: 1.6;
  margin: 0 30px 30px;
  color: #333;
  z-index: 99;
}

/* ========================================
   TEAM SECTION MOBILE
======================================== */

@media (max-width: 767px) {

    .team-section {
        padding: 4vh 6vw;
        height: 125vh;
    }

    /* .logo-team {
        width: 90vw;
        margin-bottom: 4vh;
    } */

    .logo-team{
      display: none;
    }

    .left-content {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin-bottom: 4vh;
    }

    .left-content h2 {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .left-content h2:nth-child(2) {
        margin-bottom: 3vh;
    }

    .left-content h2:nth-child(4) {
        margin-bottom: 3vh;
    }

    .scroll-btn {
        width: 100%;
        font-size: 3vw;
    }

    .right-content {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
    }

    .top-nav {
        max-width: 100%;
        margin-left: 2.7vw;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 2vw;
        margin-bottom: 3vh;
    }

    .top-nav a {
        font-size: 2.5vw;
    }

    .photo-placeholder {
        width: 60vw;
        margin: 0 auto 3vh;
    }

    #team-name {
        font-size: 6vw;
        margin-left: 0;
    }

    #team-role {
        font-size: 4vw;
        margin-left: 0;
        margin-top: 1vh;
    }

    #team-bio {
        font-size: 3.5vw;
        margin-left: 0;
        margin-top: 0vh;
    }
}

/* ========================================
   LETS DAIVE DESKTOP
======================================== */

.lets-daive{
  position: relative;
  min-height: 120vh;
  max-width: 100vw;
  color: white;
  background: black;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Helvetica;
  z-index: 0;
}

.lets-daive::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height:100%;
  background: linear-gradient(to bottom, rgb(6, 39, 56, 1) 0%,      /* Preto total no topo */
                                         rgba(6, 39, 56, 0.6) 25%,   /* Ainda bem escuro */
                                         rgba(6, 39, 56, 0.0) 50%,   /* Começa a clarear */
                                          transparent 100%          /* Transparente no final */);
  pointer-events: none;
  z-index: 0;
}

.header-content {
  display: flex;
  width: 90%; 
  justify-content: space-between; 
  align-items: center;
  padding: 10px 0;
}

.lets-header img{
  position: absolute;
  top: 10%;
  height: auto;
  width: 90vw;
  z-index: 2;
  transform: translateX(5%);
}

.lets-daive footer{
  max-width: 100vw;
  position: absolute;
  bottom: 0;
  align-items: center;
}

.lets-daive footer p{
    width: auto; 
    margin: 0 !important;
    padding: 0 20px;
    color: white; 
    left: 50vw;
    top: -30vh;
    align-self: center;
    font-size: clamp(1vh, 2.5vh, 3vh);
}

.lets-daive-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  width: 40vw; 
  height: auto; 
  object-fit: cover;
}

.lets-daive p{
  position: absolute;
  align-self: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  font-size: 16vh; 
  height: auto; 
  object-fit: cover;
  white-space: nowrap;
  z-index: 1;
}

.mapa-container {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  bottom: 0%;
  right: 0%;
  width: 100vw;      
  height: 15vh;           
  overflow: hidden;     
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  background: #000;
}

.mapa-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%;
  background: linear-gradient(to right, 
                              rgba(0, 0, 0, 1) 0%,
                              rgba(0, 0, 0, 0.98) 55%,
                              rgba(0, 0, 0, 0.0) 85%,
                              transparent 100%);
  z-index: 4;
  pointer-events: none;
}

.mapa-container a {
  color: white;
  font-size: 2.5vh;
  width: auto;
  margin: 0;
  transform: translateX(15vw) ;
  z-index: 5; /* maior que o ::before */
  position: relative;
  text-decoration: underline;
  display: block;
}

.mapa-container iframe {
  width: 50vw;
  height: 100%;
  border: 0;
  z-index: 0;
  margin-left: auto;
}


/* ========================================
   LETS DAIVE DESKTOP MOBILE
======================================== */

@media (max-width: 767px) {

    .lets-daive {
        min-height: 50vh !important;
        max-width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-image: url('/placeholders/waves.png');
        background-repeat: no-repeat;
        background-size: cover;
    }

     .lets-header {
        position: relative;
        top: auto;
        width: 100%;
        margin-top: 1vh;
    }

    /* .logo-central {
        display: flex;
        justify-content: center;
    } */

    .logo-central{
      display: none;
    }

    .lets-header img {
        position: relative;
        top: auto;
        transform: none;
        width: 90vw;
        margin: 4vh auto 0;
        display: block;
    }

    .lets-daive-image {
        display: none;
    }

    .lets-daive p {
        font-size: 7vw;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        text-align: center;
        white-space: normal;
        padding: 0 6vw;
    }

    .lets-daive footer {
        position: relative;
        bottom: auto;
        margin-top: 4vh;
        text-align: center;
    }

    .lets-daive footer p {
        font-size: 3vw;
        padding: 0;
        left: 0vw
      }

    .mapa-container a {
      transform: translateX(10vw);
      font-size: 4vw;
    }
}

/* ========================================
   LAST SECTION
======================================== */

.last-section{
    position: relative;
    min-height: 100vh;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: baseline;
    font-family: Helvetica;
    background-color: #041CBC;
    color: white;
    overflow: hidden;
    z-index: 11;
}

.last-section a{
  color: #fff !important;
}
.last-section::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 69.5%;
  width: 12%;
  height: 3px;
  background: white;
  transform: rotate(15deg);
  transform-origin: left center;
}

.last-section::after {
  content: '';
  position: absolute;
  top: 62%;
  left: 71%;
  width: 10%;
  height: 3px;
  background: white;
  transform: rotate(15deg);
  transform-origin: left center;
}

.last-section .languages{
  position: absolute;
  color: white;
  background-color: gray;
  font-family: Helvetica;
  font-weight: bold;
  font-size: 2vh;
  opacity: 0.5;
  z-index: 1;
  height:3vh;
  width: 3vw;
  top: 130vh;
  right: 4vw;
  border-radius: 10px;
}

.last-daive{
  height:18vh;
  max-width: 50vw;
  margin-left:0vw;
  margin-top:12vh;
}

.last-logo{
  position: relative;
  height: 8vh;
  margin-left:0vw;
  transform: translateY(2.5vh);
}

.menu-left {
  position: absolute;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  font-size: clamp(2vh, 4vh, 6vh);
  top:14%;
  left:62%;
  letter-spacing: 2px;
}

.menu-right {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: clamp(2vh, 2.5vh, 3vh);
  margin-bottom: 15vh;
  margin-right: 10vw;
  transform: translateY(-10vh);
  gap:2vh;
  cursor: pointer;
}

.menu-right a:hover {
  opacity: 0.7;
}

.social-left {
  position: absolute;
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: flex-start;
  font-size: clamp(2vh, 4vh, 5vh);
  top:55%;
  left:62%;
  letter-spacing: 2px;
}

.social-right {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: clamp(2vh, 2.5vh, 3vh);
  margin-top: 1vh;
  margin-right: 10vw;
  gap:2vh;
  cursor: pointer;
  margin-bottom: 10vh;
}

.social-right a:hover {
  opacity: 0.7;
}

.footer-bar {
  position: relative;
  width: 90vw;
  font-family: Helvetica;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom:0;
  margin-bottom: 10vh;
  margin-left: 5vw;
  font-size: clamp(1vh, 2vh, 3vh);
  margin-top:7vh;
  letter-spacing: 0.5px;
}

.footer-bar p {
  margin: 0;
  font-weight: 300;
}

@media (max-width: 767px) {

  .last-section {
    max-width: 100vw;
    height: auto;
    padding-bottom: 10vh;
  }
 
  .last-section::before {
    display: none;
  }
 
  .last-section::after {
    display: none;
  }
 
  .last-daive {
    height: 10vh;
    max-width: 70vw;
    margin-left: 5vw;
    margin-top: 5vh;
  }
 
  .last-logo {
    height: 4vh;
    margin-left: 5vw;
    transform: translateY(1vh);
    margin-bottom: 5vh;
    animation: girar 8s linear infinite;
  }

  @keyframes girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
 
  .menu-left {
    position: static;
    align-items: flex-end;
    font-size: 3vh;
    margin-left: 5vw;
    margin-top: 3vh;
    letter-spacing: 1px;
  }
 
  .menu-right {
    position: static;
    align-items: flex-end;
    font-size: 2.2vh;
    margin-left: 5vw;
    margin-right: 3vw;
    margin-top: 2vh;
    margin-bottom: 5vh;
    transform: none;
    gap: 1.5vh;
  }
 
  .social-left {
    position: static;
    align-items: flex-end;
    font-size: 3vh;
    margin-left: 5vw;
    margin-top: 3vh;
    letter-spacing: 1px;
  }
 
  .social-right {
    position: static;
    align-items: flex-end;
    font-size: 2.2vh;
    margin-left: 5vw;
    margin-right: 3vw;
    margin-top: 2vh;
    margin-bottom: 5vh;
    gap: 1.5vh;
  }
 
  .last-section .languages {
    width: 12vw;
    height: 4vh;
    font-size: 2.5vw;
    top: 3vh;
    right: 5vw;
  }
 
  .footer-bar {
    position: relative;
    width: 90vw;
    font-family: Helvetica;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1vh;
    padding-bottom: 0;
    margin-bottom: 2.5vh;
    margin-left: 5vw;
    margin-top: 5vh;
    font-size: 1.6vh;
    letter-spacing: 0.5px;
  }

  .footer-bar img{
    margin-right: 4vw;
  }
 
  .footer-bar p {
    white-space: normal;
    font-size: 1.6vh;
  }
}