@keyframes scaleup {
  from {scale: 0;}
  to {scale: 1;}
}

.apresentacao {
    height: 100svh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-image: url("../img/index-img.jpg");
    background-size: cover;
}

.apresentacao::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.73);
}

h1, h2 {
    font-weight: 200;
}

.apresentacao h1, h2 {
    color: white;
}

.apresentacao-textos {
    animation: scaleup 0.8s ease-in-out;
}

h1 {
    font-size: 3.8rem;
}

h2 {
    font-size: 1.3rem;
}

p {
    font-size: 1.3rem;
}

.hamburger {
    margin-top: -5px;
    border: none;
    background: none;
    cursor: pointer;
    margin-left: 15px; /* Espaço entre o menu desktop e o ícone */
    z-index: 1001; /* Garante que fique acima do menu que vai abrir */
}

.hamburger span,
.hamburger::before,
.hamburger::after {
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background-color: #fff;
    margin: 6px 0;
    transition: transform 0.4s ease-in-out;
}

/* Animação do Hambúrguer para "X" */
.hamburger.active::before {
    transform: translateY(8px) rotate(45deg);
}
.hamburger.active::after {
    transform: translateY(-10.2px) rotate(-45deg);
}

.hamburger.active span {
    opacity: 0; 
}

/* --- Menu do Hambúrguer (Escondido por padrão) --- */
.nav-hamburger-content {
    position: absolute;
    top: 70%; /* Começa logo abaixo do header */
    right: 0;
    width: 250px;
    background-color: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;

    /* Lógica para esconder/mostrar com transição suave */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    color: #053048;
    z-index: 1000;
}

.nav-hamburger-content h2{
    padding-left: 1.5rem;
    color: #053048;
    letter-spacing: -0.5px !important;
}

.hamburguer-links {
    padding-left: 1.5rem;
    color: #053048;
}

.nav-hamburger-content button {
    margin-left: 0.5rem;
    color: #053048;
    background-color: #fff;
    margin-right: 5px;
    padding: 5px;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
}

.nav-hamburger-content.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.apresentacao h1 {
    margin-top: 10px;
}

.apresentacao h2 {
    letter-spacing: 2px;
}

.apresentacao-content {
    height: 70%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.apresentacao-textos {
    display: block;
}

.btn-apresentacao {
    margin-top: 50px;
    background-color: transparent;
    color: white;
    border: solid white 1px;
    padding: 1rem 1.5rem;
    border-radius: 54px;
    cursor: pointer;
    transition: 0.6s;
}

.btn-apresentacao:hover {
    background-color: white;
    color: black;
}

.btn-apresentacao:focus {
    background-color: white;
    color: black;
}

.diferenciais {
    height: 80vh;
}

.diferenciais h1 {
    margin: 0 auto 22px auto;
    width: fit-content;
    color: #053048;
    font-size: 4.9rem;
    text-align: center;
}

.diferenciais h2 {
    margin: 2px auto;
    width: fit-content;
    color: #053048;
    font-size: 1.9rem;
}

.diferenciais-mobile {
    display: none;
}

.checkmark-container {
    margin: 45px auto 0 auto;
    justify-content: center;
}

.checkmark-div {
    width: 180px;
    text-align: center;
}

.checkmark {
    margin: 0 auto 10px auto;
    width: 150px;
}

.color-blue {
    color: #053048;
}

.background-blue {
    height: 85vh;
    background-color: #053048;
    display: flex;
}

.background-blue > img {
    min-width: 40%;
    margin: 10px auto;
}

.quem-somos {
    width: 50%;
    padding-right: 100px;
}

.quem-somos h1 {
    font-size: 4rem;
    color: white;
    margin-top: 3.5rem;
}

.quem-somos p {
    font-size: 1.3rem;
    color: white;
    margin-top: 2rem;
    z-index: 3;
}

.seta-icone {
    width: 25px;
    height: 25px;
    opacity: 0.5;
    align-self: flex-end;
    margin-left: 8px;
    z-index: 3;
}

.saiba-mais-div {
    margin: 0 auto;
}


#big-background {
    height: 600vh;
    position: absolute;
    z-index: -1;
    right: -100px;
    top: -50vh;
}

.nossos-resultados {
    padding: 5% 15%;
    height: auto;
    background-color: rgb(5, 48, 72);
    color: white;
    width: 100%;
}

.nossos-resultados > div {
    position: relative;
    z-index: 3;
}

#hide-overflow {
    position: absolute;
    height: fit-content;
    width: 100%;
    overflow: hidden;
    z-index: 2;
}

#background-experiencia {
    margin-left: -5%;
    opacity: 0.17;
    width: 115%;
    z-index: 2;
}

.big-20 {
    font-size: 15rem;
    font-weight: 600;
}

.experiencia-h1 {
    align-self: end !important;
    padding-bottom: 75px;
    padding-left: 25px;
}

.linha-branca::before {
    content: '';
    background: white;
    display: block;
    position: relative;
    bottom: -90px;
    width: 100%;
    height: 2px;
}

.blue-triangle {
    border-right: calc(100vw - var(--scrollbar-width)) solid #053048;
    border-bottom: 170px solid transparent;
    border-left: 0 solid transparent;
    position: relative;
    z-index: 1;
}

.white-triangle {
    border-right: 0 solid transparent;
    border-top: 170px solid transparent;
    border-left: calc(100vw - var(--scrollbar-width)) solid white;
    position: relative;
    top: -170px;
    z-index: 2;
}

.feedbacks {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding-bottom: 150px;
    color: #053048;
}

.titulo-feedbacks {
    font-size: 3.5rem;
    text-align: center;
}

.sub-feedbacks {
    font-size: 1.5rem;
    text-align: center;
    width: 50%;
}

.container-feedbacks {
    padding: 80px 80px 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 500px));
    gap: 20px;
}

.card-feedbacks {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #D9D9D9;
    width: minmax(200px, 500px);
    padding: 30px;
    gap: 10px;
    background-image: url("../img/aliada-card-feedbacks.png");
    background-repeat: no-repeat;
    background-size: 160%;
    background-position: 0% -100%;
}

.card-img {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.card-img img {
    border-radius: 50%;
    width: 60%;
    background-color: #053048;
    margin-bottom: 30px;
    aspect-ratio: 1;
    object-fit: cover;
}


.card-texto {
    display: flex;
    background-color: #053048;
    padding: 1.5rem 10px;
    color: #FFFFFF;
    border-radius: 5px;
    text-align: center;
    align-items: center;
    min-height: 260px;
    box-shadow: 0 7px 5px rgba(0,0,0,0.3);
}

.card-feedbacks:nth-child(2) .card-texto{
    background-color: #D9D9D9; /* Um azul escuro, como no seu exemplo anterior */
    color: #053048;
    border: 1px solid #053048; /* Branco para a fonte, garantindo contraste */
}
.card-texto p {
    font-size: 1rem;
}

.author-name {
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    color: #053048;
}

.author-title {
    font-size: clamp(0.8rem, 1.3vw, 1.3em);
    color: #053048;
}

.leia-mais {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.leia-mais p {
    color: #053048;
    font-size: 25px;
}

.leia-mais:hover {
    transform: scale(1.01);
    transition: ease-in-out 0.2s;
}


.nossas-solucoes {
    height: 540px;
    position: relative;
}

.background-white {
    background-color: white;
    padding-top: 20px;
    padding-left: 60px;
    height: 350px;
}

.background-white h1 {
    color: #053048;
    margin: 0 auto;
    width: fit-content;
    font-size: 3.5rem;
}

.background-white > p {
    color: #053048;
    margin: 10px auto 0 auto;
    width: fit-content;
}

.carrossel {
    position: relative;
    gap: 45px;
    width: calc(100% + 60px);
    cursor: grab;
    overflow-x: hidden;
    padding-right: 60px;
    left: -60px;
    margin-top: 40px;
}

.card:first-child {
    margin-left: 60px;
}

.card {
    height: 325px !important;
    width: 295px !important;
    background-color: #053048;
    border-radius: 4px;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none;
}

.card:last-child {
    justify-content: end;
    background-color: transparent;
    color: white;
}


.card > img {
    margin: 55px auto 35px auto;
    opacity: 0.5;
    height: 130px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none;
}

.card:last-child img {
    margin-top: 10px;
    height: 30px;
    margin-right: 55px;
}

.card > div {
    border: 1px solid white;
    width: 80%;
    padding: 8px 25px;
    border-radius: 12px;
}

.card:last-child div {
    display: flex;
    border: none;
}

.card > div > p {
    color: white;
    text-align: center;
    font-size: 1.15em;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none;
}

.card:last-child p {
    color: #053048;
    text-align: left;
    margin-left: 55px;
    margin-bottom: 40px;
    font-size: 1.25em;
    font-weight: 500;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none;
}

.card-carrossel:nth-child(even) {
    background-color: #053048F2; /* Um azul escuro, como no seu exemplo anterior */
    color: #ffffff;           /* Branco para a fonte, garantindo contraste */
}


.carrossel-container {
    overflow: hidden; /* Esconde os itens que estão fora do contêiner */
    position: relative;
    max-width: 92%;
    margin: 0 auto;
    
}

.carrossel-wrapper {
    display: flex;
    gap: 40px;
    margin-bottom: 100px;
    justify-content: flex-start;
    align-items: flex-start;
    transition: transform 0.5s ease-in-out;
    padding-top: 50px;
}

.card-carrossel {
    background-color: #D9D9D9;
    height: 500px;
    width: 500px;
    border: 1px solid white; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-carrossel img {
    aspect-ratio: 1;
    width: 95%;
}

.carousel-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.dot {
    height: 12px;
    width: 12px;
    margin: 0 5px;
    border-radius: 50%;
    border: 1px solid #bbb;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #bbb;
}


.parcerias-sucesso {
    margin-top: 20px;
    background-color: #053048;
    padding: 1px;
    position: relative;
}

.parcerias-sucesso > h1 {
    color: #FFFFFF;
    padding: 80px 0px 10px 110px;
    text-align: center;
    font-size: 3.5rem;
}

.blue-banner {
    width: 50%;
    text-align: center;
    margin: 0 auto;
    padding: 10px 80px;
    color: white;
}

.blue-banner-triangle {
    width: 0;
    border-top: 25px solid #053048;
    border-right: 15px solid transparent;
}

.parceiros {
    display: block;
    margin: 40px auto 60px auto;
}

.blue-triangle-parcerias {
    border-right: calc(100vw - var(--scrollbar-width)) solid #053048;
    border-bottom: 170px solid transparent;
    border-left: 0 solid transparent;
    z-index: 1;
}

.solicite-proposta {
    width: 100%;
    padding-bottom: 50px;
    position: relative;
    overflow: hidden;
}

.solicite-proposta > form {
    padding: 60px;
    gap: 10px;
    z-index: 1;
}

.solicite-proposta > form > h1 {
    width: fit-content;
    color: white;
    margin: 0 auto;
}

.solicite-proposta > form input, textarea {
    background-color: #91D7FF80;
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    width: 100%;
    resize: none;
}

.solicite-proposta > form input::placeholder, textarea::placeholder {
    color: #FFFFFFCC;
}

.solicite-proposta > form input[type="submit"] {
    background-color: #FFFFFFCC;
    color: #053048;
    padding: 15px 20px;
    border-radius: 10px;
    width: calc(50% - 5px);
    font-weight: 700;
    font-size: 1.1em;
    align-self: baseline;
    cursor: pointer;
}

.solicite-proposta {
    position: relative;
    overflow: hidden;
    background-image: url("../img/background-celular.png");
    background-size: cover;
}

.solicite-proposta::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.73);
}

@media (min-device-width: 375px) and (max-device-width: 575px) {
    .apresentacao-h1 {
        font-size: 3.8rem;
    }

    .apresentacao-h2 {
        font-size: 1.8rem;
    }

    .apresentacao-content {
        height: 50%;
    }

    .diferenciais h1 {
        font-size: 3.2rem;
    }

    .diferenciais h2 {
        font-size: 1.4rem;
    }

    .checkmark {
        width: 80px;
    }

    .card-carrossel {
        width: 98%;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
    .checkmark {
        width: 80px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) { 
    .logo-aliada {
        height: 8rem;
    }

    .div-menu label {
        top: 9px;
    }

    .apresentacao-h1 {
        font-size: 3rem;
    }

    .apresentacao-h2 {
        font-size: 1.3rem;
    }

    .btn-apresentacao {
        margin-top: 40px;
    }

    .apresentacao-content {
        height: 60%;
    }

    .diferenciais h1 {
        font-size: 3rem;
    }

    .diferenciais h2 {
        font-size: 1.3rem;
    }

    .checkmark {
        width: 100px;
    }

    .quem-somos {
        padding-right: 12px;
    }

    .quem-somos h1 {
        font-size: 3rem;
        color: white;
        margin-top: 2.5rem;
    }

    .quem-somos p {
        font-size: 1.3rem;
    }


    .triangulo-pequeno {
        width: 280px;
        height: 170px;
        border-right: 140px solid transparent;
        border-left: 140px solid transparent;
        border-bottom: 170px solid white;
        position: relative;
    }

    .triangulo-grande {
        width: 380px;
        height: 220px;
        border-right: 190px solid transparent;
        border-left: 190px solid transparent;
        border-bottom: 220px solid white;
        margin-left: -40px;
        position: relative;
        filter: drop-shadow(-2px 0px 5px rgba(0,0,0,.4));
        -webkit-filter: drop-shadow(-2px 0px 5px rgba(0,0,0,.4));
    }

    .triangulo-grande h1 {
        font-size: 3rem;
    }

    .triangulo-pequeno p {
        margin-top: 45px;
    }

    .triangulo-grande p {
        margin-top: 70px;
    }

    .background-white h1 {
        font-size: 3rem;
    }

    .parcerias-sucesso > h1 {
        font-size: 3rem;
    }

    .nossas-solucoes {
        height: 560px;
    }

    .blue-banner {
        width: 80%;
        padding: 10px 50px;
    }

    .solicite-proposta > form {
        padding: 0;
        width: 600px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
    .logo-aliada {
        height: 8rem;
    }

    .apresentacao-h1 {
        font-size: 3rem;
    }

    .apresentacao-h2 {
        font-size: 1.3rem;
    }

    .apresentacao-content {
        height: 60%;
    }

    .btn-apresentacao {
        margin-top: 40px;
    }

    .diferenciais h1 {
        font-size: 3rem;
    }

    .diferenciais h2 {
        font-size: 1.3rem;
    }

    .checkmark {
        width: 120px;
    }

    .quem-somos {
        padding-right: 12px;
    }

    .quem-somos h1 {
        font-size: 3rem;
        color: white;
        margin-top: 2.5rem;
    }

    .quem-somos p {
        font-size: 1.3rem;
    }

    .triangulo-grande h1 {
        font-size: 3rem;
    }

    .triangulo-pequeno p {
        margin-top: 45px;
    }

    .triangulo-grande p {
        margin-top: 80px;
    }

    .background-white h1 {
        font-size: 3rem;
    }

    .parcerias-sucesso > h1 {
        font-size: 3rem;
    }

    .nossas-solucoes {
        height: 560px;
    }

    .blue-banner {
        width: 80%;
        padding: 10px 50px;
    }

    .solicite-proposta > form {
        padding: 0;
        width: 600px;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1399px) { 
    .apresentacao-h1 {
        font-size: 3.5rem;
    }

    .apresentacao-h2 {
        font-size: 1.4rem;
    }

    .apresentacao-content {
        height: 55%;
    }

    .diferenciais h1 {
        font-size: 3.5rem;
    }

    .diferenciais h2 {
        font-size: 1.4rem;
    }

    .quem-somos h1 {
        font-size: 3.5rem;
        color: white;
        margin-top: 3rem;
    }

    .quem-somos p {
        font-size: 1.4rem;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) and (max-width: 1919px) { 
    .apresentacao-h1 {
        font-size: 3.8rem;
    }

    .apresentacao-h2 {
        font-size: 1.7rem;
    }

    .btn-apresentacao {
        font-size: 1.6rem;
        padding: 1.5rem 1.8rem;
    }

    .diferenciais {
        height: 70vh;
    }

    .diferenciais h1 {
        font-size: 3.5rem;
    }

    .diferenciais h2 {
        font-size: 1.5rem;
    }

    .checkmark-div {
        width: 230px;
    }

    .checkmark {
        width: 130px;
    }

    .checkmark-div > p {
        font-size: 1.5rem;
    }

    .background-blue {
        height: 75vh;
    }

    .quem-somos h1 {
        font-size: 3.5rem;
        color: white;
        margin-top: 3rem;
    }

    .quem-somos p {
        font-size: 1.4rem;
    }
}

@media (min-width: 1920px) {
    .apresentacao-h1 {
        font-size: 5.8rem;
    }

    .apresentacao-h2 {
        font-size: 2.3rem;
    }

    .btn-apresentacao {
        font-size: 1.6rem;
        padding: 1.5rem 1.8rem;
    }

    .diferenciais {
        height: 70vh;
    }

    .diferenciais h1 {
        font-size: 5rem;
    }

    .diferenciais h2 {
        font-size: 2rem;
    }

    .checkmark-div {
        width: 230px;
    }

    .checkmark {
        width: 130px;
    }

    .checkmark-div > p {
        font-size: 1.5rem;
    }

    .background-blue {
        height: 75vh;
    }

    .quem-somos p {
        font-size: 1.8rem;
    }
}

@media (orientation: portrait) and (max-width: 767px) {
    .apresentacao-content {
        height: 80%;
    }

    .checkmark-container {
        flex-direction: column !important;
    }

    .diferenciais {
        height: fit-content;
        padding: 55px 10px;
    }

    .diferenciais h2 {
        text-align: center;
    }

    .diferenciais-desktop {
        display: none;
    }

    .diferenciais-mobile {
        display: block;
    }

    .checkmark-div {
        width: 170px;
    }

    .gap-50 {
        gap: 0 !important;
    }

    .background-blue {
        flex-direction: column;
        height: auto;
        padding-bottom: 20px;
    }

    .background-blue > img {
        margin: 5px auto;
        width: 50%;
    }

    .quem-somos {
        width: 100%;
        padding: 0 20px;
    }

    .quem-somos h1 {
        margin-top: 0;
        text-align: center;
    }

    .saiba-mais-div p {
        margin-top: 0;
        height: fit-content;
        align-self: center;
    }

    .saiba-mais-div {
        margin-top: 2rem;
    }

    .big-20 {
        font-size: 9rem;
        font-weight: 600;
    }

    .experiencia-h1 {
        font-size: 2.6rem;
        padding-bottom: 25px;
    }

    .linha-branca::before {
        bottom: -35px;
    }

    .blue-triangle {
        margin-top: -2px;
        border-right: 100vw solid #053048;
        border-bottom: 120px solid transparent;
    }

    .white-triangle {
        display: none;
    }

    .background-img {
        margin-top: -120px;
    }

    .nossas-solucoes {
        height: 500px;
    }

    .background-white {
        padding: 100px 20px 0 20px;
        height: 360px;
    }

    .background-white h1 {
        text-align: center;
    }

    .carrossel {
        gap: 20px;
        width: calc(100% + 40px);
        padding-right: 20px;
        left: -20px;
        margin-top: 30px;
    }

    .card:first-child {
        margin-left: 20px;
    }

    .card {
        height: auto !important;
        width: 200px !important;
        padding-bottom: 15px;
    }

    .card > img {
        margin: 20px auto 35px auto;
        height: 100px;
    }

    .container-feedbacks {
        padding: 30px 20px 0;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));;
        grid-template-rows: repeat(3, minmax(200px, 450px));
    }

    .card-texto {
        min-height: 130px;
    }

    .parcerias-sucesso > h1 {
        padding: 20px 0;
        text-align: center;
    }

    .blue-banner {
        width: 90%;
        padding: 10px 15px;
    }

    .parceiros {
        max-width: 80%;
    }

    .solicite-proposta {
        padding: 0;
    }

    .solicite-proposta > form {
        padding: 30px 20px;
        gap: 10px;
    }
}

@media (orientation: portrait) and (max-width: 400px) {
    .card-carrossel {
        width: 340px;
    }
}