.animar {
  opacity: 0;
  transform: translateY(40px);
  transition: 0.6s ease;
}

.animar.ativo {
  opacity: 1;
  transform: translateY(0);
}

.animar2 {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.6s ease;
}

.animar2.ativo {
  opacity: 1;
  transform: scale(1);
}



.sessao-carrossel{
  background: linear-gradient(135deg, #01014B, #020a2e);
  padding:80px 0;
}

.carrossel{
  width:80%;
  max-width:900px;
  height:400px;

  margin:auto;
     background: linear-gradient(
        90deg,
        #b8b8b8 0%,
        #d9d9d9 35%,
        #f3f3f3 70%,
        #ffffff 100%
    );

  border-radius:20px;
  padding:50px;

  position:relative;
  overflow:hidden;
}

.item{
  display:none;
  text-align:center;
}

.item.ativo{
  display:block;
  animation:fade .5s ease;
}

iframe{
  width:100%;
  height:300px;
  border:0;
  border-radius:15px;
}

.barra{
  width:80%;
  max-width:900px;
  height:6px;
  background:#ddd;
  margin:15px auto;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
}

.progresso{
  height:100%;
  width:0%;
    background: linear-gradient(
        90deg,
        #b18328 0%,
        #d7ad41 30%,
        #ecc44f 60%,
        #f2cb53 100%
    );
  transition: width 0.15s linear;
}

@keyframes fade{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}


/* =========================
   TABLET
========================= */

@media (max-width:900px){

    .hero{
        height:100vh;
        padding:0 30px;
        text-align:center;
    }


    .content h1{
        font-size:55px;
    }


    .content p{
        font-size:18px;
        max-width:600px;
    }


    .btn-outline,
    .btn-primary{
        padding:15px 35px;
    }

}



/* =========================
   CELULAR
========================= */

@media (max-width:600px){

    .hero{
        min-height:100vh;
        height:auto;
        padding:120px 20px 80px;
        box-sizing:border-box;
    }


    .content{
        width:100%;
    }


    .content h1{
        font-size:38px;
        line-height:1.15;
        margin-bottom:20px;
    }


    .content p{
        font-size:16px;
        line-height:1.6;
        margin-bottom:30px;
    }


    .buttons{
        flex-direction:column;
        align-items:center;
        gap:15px;
    }


    .btn-outline,
    .btn-primary{
        width:80%;
        text-align:center;
        padding:15px 20px;
    }

}



/* =========================
   CELULAR PEQUENO
========================= */

@media (max-width:400px){

    .content h1{
        font-size:32px;
    }


    .content p{
        font-size:15px;
    }


    .btn-outline,
    .btn-primary{
        width:90%;
    }

}