@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Orbitron:wght@400..900&display=swap');
@import url(nav.css);

*{
    font-family: "Exo 2", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

:root{
    --BG_base: #D9DCDF;
    --BG_contrast: #E1E5E8;
    --Azul_principal: #294B78;
    --Laranja_principal: #FF7A0F;
    --Texto_preto: #3F4242;
    --Texto_branco: #E0E0E0;
    --Numero_motivo: #3c5f5080;
}

html,
body{
    background: var(--BG_base);
    width: 100%;
    height: 100vh;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

html{
    height: min-content;
}

section{
    width: 100vw;

    .limite{
        width: 92%;
        max-width: 1400px;
        margin: 0 auto;
    }
}

span{
    color: var(--Laranja_principal);
}

#entrada{
    height: 30vh;
    min-height: 300px;
    margin-bottom: 3vh;
    color: var(--Texto_branco);
    background-image: url(../img/capa2_mobile.png);
    background-position: right top;
    background-size: contain;

    .limite{
        min-height: 100%;
        padding: 10% 0 0 0;
        align-content: center;

        h1{
            font-size: clamp(24px, 1.8rem, 40px);
            font-family: 'Orbitron';
        }
        p{
            font-size: 1.2rem;
        }
    }
    
}

@media (min-width: 480px){
    #entrada{
        height: 40vh;
        .limite{
            h1{
                width: 70%;
                font-size: 3rem;}
            p{
                width: 50%;
                font-size: 1.5rem;}
        }
    }
}

@media (min-width: 1024px) {

    #entrada{
        height: 100vh;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        .limite{
            padding: 75px 0 0;
        }
        p{
            width: 40%;
        }
    }
    
}

#sobre{

    .sob{
        padding: 3vh 0;

        h2{
            font-size: 2rem;
            font-family: "Orbitron", sans-serif;
            color: var(--Azul_principal);
            text-transform: uppercase;
            text-align: center;
            margin-bottom: 1vh;
        }

        p{
            font-size: 1.3rem;
            font-family: "Exo 2" sans-serif;
            text-align: justify;
            color: var(--Texto_preto);
            margin: 2vh 0;
        }
        h3{
            font-size: 1.5rem;
            color: var(--Azul_principal);
            margin-top: 5vh;
        }
    }

}

#MVV{
    background-color: var(--BG_contrast);

    
    .MVV{
        width: 100%;
        background-color: var(--BG_contrast);
        display: flex;
        flex-direction: column;
        align-items: center;

        div{
            width: 90%;
            height: 50vh;
            padding: 2vh 10vw;
            margin: 3vh 0;
            background-color: var(--Azul_principal);
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            text-align: center;

            img{
                width: 100px;
            }

            h3{
                font-size: 1.5rem;
                font-weight: bolder;
                color: var(--Laranja_principal);

            }

            p{
                font-size: clamp(16px, 1.3rem, 19px);
                color: var(--Texto_branco);
            }

        }
    }

}

#valor{
    padding: 3vh 0;

    .limite{
        div{
            background-image: url(../img/bg_valor.png);
            background-size: contain;
            background-attachment: fixed;

        }
    
        h2{
            font-size: 1.5rem;
            font-family: "Orbitron", sans-serif;
            color: var(--Azul_principal);
            text-transform: uppercase;
            text-align: start;
            margin-bottom: 1vh;

            span{
                font-size: 2.2rem;
            }
        }
        
        p{
            font-size: 1.3rem;
            font-family: "Exo 2" sans-serif;
            text-align: justify;
            color: var(--Texto_preto);
        }
    }
}

@media (min-width: 480px){
    
    #sobre .sob{
        display: flex;
        justify-content: space-between;
        gap: 5%;
        div{width: 45%;}
        p{font-size: 1.5rem;}
        h2{
            font-size: 3rem;
            margin: 15vh 0;
        }
        h3{font-size: 2rem;}
    }

    #MVV .MVV{
        div{
            height: max-content;
            padding: 3rem;
            h3{
                font-size: 2rem;
                margin: 1rem 0;
            }
            p{font-size: 1.5rem;}
        }
    }

    #valor .limite{
        display: flex;
        flex-direction: column;
        justify-content: center;

        h2{
            font-size: 2.5rem;

            span{font-size: 3rem;}
        }

        p{font-size: 1.5rem;}
    }
}

@media (min-width: 1024px){
    #MVV .MVV{
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        div{
            width: 30%;
            height: min-content;
            padding: 5vw 2vw 5vw;
        }
    }

    #valor .limite{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5%;

        div{
            background-attachment: scroll;
        }

    }
}




img{
    max-width: 100%;
}





#services{

    .limite{
        padding: 5vh 0;
        display: flex;
        flex-direction: column;
        gap: 3vh;
    }
    
    .card{
        width: 100%;
        min-height: 225px;
        padding: 10%;
        display: flex;
        flex-direction: column;
        gap: 5px;

        background-color: var(--BG_contrast);
        box-shadow: 10px 10px 15px #00000040;
        border-radius: 20px;

        

        img{
            width: 50px;
        }
        h3{
            font-size: 1.5rem;
            color: var(--Azul_principal);
            transition-delay: .3s;
        }

        p{
            font-size: 1.2rem;
            color: var(--Texto_preto);
            transition-delay: .3s;
        }

    }
    .card:nth-child(1),
    .card:nth-child(3){
        background-color: var(--Azul_principal);

        h3{
            color: var(--Laranja_principal);
        }
        p{
            color: var(--Texto_branco);
        }
    }
}

#investimento{
    background-color: var(--BG_contrast);
    padding: 5vh 0;
}
#investimento .limite{
    display: flex;
    flex-direction: column;
    gap: 3vh;

    h2{
        font-size: 1.7rem;
        color: var(--Azul_principal);

    }

    p{
        font-size: 1.2rem;
        color: var(--Texto_preto);
    }

    li{
        margin: 20px 0;
        display: flex;
        align-items: end;
        gap: 10px;
        color: var(--Azul_principal);
        font-weight: 300;

        img{
            width: 30px;
        }
    }

    
}

@media (min-width: 480px){
    #services .limite{
        .card{
            gap: 1rem;

            h3{font-size: 2rem;}
            p{font-size: 1.5rem;}
            img{width: 75px;}
        }
    }

    #investimento .limite{
        h2{
            font-size: 3.2rem;
            margin-bottom: 1rem;
        }
        p{font-size: 1.5rem;}
        h4{
            font-size: 2rem;
        }
        li img{
            width: 50px;
        }
    }
}

@media (min-width: 1024px){
    #services .limite{
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        .card{
            width: 100%;
            min-height: 22vw;
            padding: 3vw 3vw;
            transition: background-color .5s  ease-in-out;
            transition-delay: .1s;
        }
        .card:nth-child(1),
        .card:nth-child(3){
            background-color: var(--BG_contrast);

            h3{
                color: var(--Azul_principal);
            }
            p{
                color: var(--Texto_preto);
            }
        }
        
        .card:hover{
            background-color: #294B78;

            h3{
                color: var(--Laranja_principal)
            }
            p{
                color: var(--Texto_branco)
            }
        }

    }

    #investimento .limite{
        flex-direction: row-reverse;
        padding: 5vw;
        gap: 5%;

        img{
            max-width: 40%;
        }
    }
}