.destaque{
    width: 100%;
    height: min-content;
    padding: 5vw;
    color: var(--Texto_branco);
    display: flex;
    flex-direction: column;
    order: -1;
    gap: 10px;
    
    .dest{
        padding: 5px 5%;
        display: flex;
        gap: 15px;
        align-items: center;
        background-color: #2a4b7a;
        backdrop-filter: blur(20px);
        border-radius: 10px;

        img{
            height: 40px;
            aspect-ratio: 1/1;
            animation: pulsar 2s ease-in-out infinite;
        }
        


        div{
            flex-direction: column;
            align-items: start;
            gap: 5px;
            margin: 20px 0;

            h3{
                font-size: 1.2rem;
            }
            p{
                font-size: 1rem;
            }
        }
    }
}

@media (min-width: 1024px) {
    .destaque{
        padding: 0;
        flex-direction: row;
        justify-content: end;

        position: absolute;
        bottom: -20%;
        z-index: 7;

        .dest{
            width: 25%;
            padding: 15px;    
            background-color: rgba(42, 75, 122, 0.76);
            flex-direction: column;
            align-items: start;
            gap: 0;
        }
    }
}

#motivos .limite{
    position: relative;
    height: 65vh;

    .motivos{
        width: 80vw;

        .item{
            width: 80%;
            height: 50vh;
            background-color: var(--BG_contrast);
            padding: 2vh;
            margin-right: -3vw;
            border-radius: 15px;
            box-shadow: 10px 10px 15px #3f424241;
            transition: all .5s ease;
            transition-delay: .1s;

            position: absolute;
            opacity: 0;

            h3{
                width: 90%;
                font-size: 1.5rem;
                color: var(--Azul_principal);
                
                margin: 1vh 0;
            }

            p{
                font-size: 1.2rem;
                color: var(--Texto_preto);
                
            }
            .numero{
                font-size: 3rem;
                font-weight: bolder;
                position: absolute;
                color: var(--Numero_motivo);
                right: 2vh;
                top: 2vh;
            }
        }

        .item:nth-child(1){
            opacity: 0;
            right: 17vh;
            top: 2vh;
            z-index: 4;
        }
        .item:nth-child(2){
            opacity: 1;
            right: 5vh;
            top: 12vh;
            z-index: 3;
        }
        .item:nth-child(3){
            opacity: 1;
            right: 3vh;
            top: 14vh;
            z-index: 2;
        }
        .item:nth-child(4){
            opacity: 1;
            right: 1vh;
            top: 16vh;
            z-index: 1;
        }
        .item:nth-child(5){
            opacity: 0;
            right: -1vh;
            top: 18vh;
            z-index: 0;
        }
    }
    
    .btn{


        button{
            padding: 5px 10px;
            background-color: var(--Azul_principal);
            border: none;
            border-radius: 7px;
            transform: rotate(90deg);

            position: absolute;
            right: 88%;
            top: 20vh;
            z-index: 5;

            &:nth-child(2){
                background-color: var(--Laranja_principal);
                margin-left: 10px;
                top: calc(21vh + 70px);
            }
        }
        
        i{
            font-size: 30px;
            color: var(--Texto_branco);
        }
    }
}

#beneficios{
    h1{
        color: var(--Azul_principal);
        text-align: center;
    }

    .cards{
        margin: 3vh 0;
        padding-bottom: 5vh;
        display: grid;
        gap: 20px;
        
        .card{
            width: 100%;
            height: min-content;
            padding: 2vh 0;
            background-color: var(--BG_contrast);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1vh;
            color: var(--Texto_preto);
            border-radius: 15px;
            box-shadow: 10px 10px 15px #3f424241, -10px 10px 15px #3f424241;

            img{
                width: 70px;
            }
            h3{
                text-align: center;
                color: var(--Azul_principal);
                font-size: 1.5rem;
            }
            p{
                width: 90%;
                text-align: center;
                font-size: 1.1rem;
            }

            &:nth-child(1),
            &:nth-child(3),
            &:nth-child(5){
                background-color: var(--Azul_principal);
                color: var(--Texto_branco);
                h3{color: var(--Laranja_principal);}
            }
        }
        
    }
}

#testemunho{
    height: max-content;
    padding: 5% 0 10vh 5%;
    position: relative;
    
    .txt{
        .titolo{
            color: var(--Azul_principal);
            justify-content: center;
        }

        p{
            display: none;

        }
    }
    .coments{
        width: max-content;
        display: flex;
        gap: 6vw;
    }

    .comentario{
        width: 90vw;
        margin-top: 2vh;
        padding: 4vh 5vw;
        border: 2px solid var(--Azul_principal);
        color: var(--Texto_preto);
        font-size: 1.1rem;
        text-align: justify;
        box-shadow: 0 0 10px #2a4b7a;
        transition: margin 1s ease;
        

        .info{
            padding-top: 2.5vh;
            margin-top: 2.5vh;
            border-top: 1px solid var(--Azul_principal);
            display: flex;
            gap: 10px;
            img{
                width: 50px;
                border-radius: 100%;
            }
        }

    }

    .btn{
        position: absolute;
        right: 5vw;
        bottom: 15px;
    }
    
    button{
        background-color: var(--Azul_principal);
        padding: 5px 10px;
        border: none;
        border-radius: 10px;

        i{
            font-size: 30px;
            color: var(--BG_contrast);
        }

        &:nth-child(2){
            right: 4vw;
            background-color: var(--Laranja_principal)
        }
    }

    input{
        display: none;
    }

    #radio1:checked ~ .auto_btn{
        background-color: var(--Laranja_principal);
    }

    .label, .auto{
        width: 50%;
        display: flex;
        gap: 10px;

        position: absolute;
        bottom: 5vh;
        .manual_btn, .auto_btn{
            padding: 0;
            height: 14px;
            border-radius: 5px;
            color: aliceblue;
            flex-grow: 1;
            transition: background .3s ease;
            cursor: pointer;

            &:hover{
                background-color: var(--Azul_principal);
            }
        }
        .auto_btn{
            border: 2px solid var(--Azul_principal);
        }
    }
    
    #radio1:checked ~ .auto .auto_btn:nth-child(1){
        background-color: #2a4b7a;
    }
    #radio2:checked ~ .auto .auto_btn:nth-child(2){
        background-color: #2a4b7a;
    }
    #radio3:checked ~ .auto .auto_btn:nth-child(3){
        background-color: #2a4b7a;
    }
    #radio4:checked ~ .auto .auto_btn:nth-child(4){
        background-color: #2a4b7a;
    }


    #radio1:checked ~ .primeiro{
        margin-left: 0%;
        
    }
    #radio2:checked ~ .primeiro{
        margin-left: -25%;
    }
    #radio3:checked ~ .primeiro{
        margin-left: -51%;
    }
    #radio4:checked ~ .primeiro{
        margin-left: -76%;
    }
}

@media (min-width: 1024px){
    
    #motivos{
        height: 550px;
        min-height: 550px;
    }

    #motivos .limite{
        position: relative;

        .titolo{
            font-size: 3rem;
            top: 16vh;
        }
        .motivos{
            .item{
                max-width: 650px;
                height: 300px;
                padding: 5vh;
                display: flex;
                flex-direction: column;
                gap: 2vh;

                h3{
                    font-size: 2rem;
                }
            }
            .item:nth-child(2){top: 18vh;}
            .item:nth-child(3){top: 20vh;}
            .item:nth-child(4){top: 22vh;}
            .item:nth-child(5){top: 24vh;}
        }
        
        h1{
            width: clamp(300px, 40%, 470px);
            position: absolute;
            top: 18vh;
            padding-top: 4vh;
        }
        

        .btn{
            position: absolute;
            bottom: 0%;
            left: 10%;
            button{
                padding: 5px 20px;
                margin-left: 30px;
                cursor: pointer;
                position: initial;
                transform: rotate(0);

                i{font-size: 3rem;}
            }

        }
    }

    #beneficios{

        .cards{
            grid-template-columns: repeat(3, 1fr);
            justify-content: space-between;

            .card{
                height: 100%;
                transition: all .5s ease-in-out;
                
                &:nth-child(1),
                &:nth-child(3),
                &:nth-child(5){
                    background-color: var(--BG_contrast);
                    color: var(--Texto_preto);
                    h3{color: var(--Azul_principal);}
                }
            }

            .card:hover{
                background-color: var(--Azul_principal);
                color: var(--Texto_branco);
                h3{color: var(--Laranja_principal);}
            }
            
        }
    }

    #testemunho{
        height: 80vh;
        display: flex;
        justify-content: space-between;

        .txt{
            height: 100vh;
            width: 40%;

            h1{
                font-size: 3rem;
                margin-bottom: 2rem;
            }

            p{
                display: block;
                font-size: 1.4rem;
                color: var(--Texto_preto);
            }
        }

        .comentario{
            width: 40Vw;
            height: min-content;
            padding: 2vw;

            .info{
                margin-top: 3vw;
            }
        }
        .coments{
            height: 50vh;
            width: max-content;
            overflow-x: hidden;

            position: absolute;
            left: 50%;
        }
        .label, .auto{
            width: 200px;
            margin-left: 1%;
            bottom: 0;

        }
        #radio1:checked ~ .primeiro{
        margin-left: 1%;
        }

        .btn{
            position: absolute;
            right: 10vw;
            bottom: inherit;
            top: 65vh;

            button{
                cursor: pointer;
            }
        }
    }

}