/*------------------------------------*\
    
    CSS Custom Properties (aka CSS Variables)
 
    Custom properties are entities defined by CSS authors that contain specific values to be reused throughout a document
    Example usage: brand colors, common margins, drop-shadows, border styles, and more!
    
    Visit the CSS Custom Properties guru card for more info: https://app.getguru.com/card/ceE54p4i/CSS-Custom-Properties-AKA-CSS-Variables 

\*------------------------------------*/


/**
 * Global Variables (Optional - Remove anything that's not being used)
 */

 :root {
    --white : #FFFFFF;
    --navy-blue : #044C84;
    --dark-blue : #152d47;
    --dark-blue-01 : #044d84;
    --dark-blue-02 : #033155;
    --dark-blue-03 : #4e89bf;
    --dark-blue-04 : #06406e;
    --blue : #0188E8;
    --blue-01 : #0188E8;
    --blue-02 : #9FD2FA;
    --black : #000000;
    --black-01 : #58605C;
    --gray : #F7F7F7;
    
    --box-shadow : 0 3px 6px rgb(0 0 0 / 16%);


    /* Fonts Family */

    --font-lato: 'Lato', sans-serif;
    --font-latomedium: 'latomedium', sans-serif;

    --section-margins: 40px; 

    
}

@media (min-width: 768px) {
    :root {
        --section-margins: 45px; 
    }
}

@media (min-width: 1025px) {
    :root {
        --section-margins: 70px; 
    }
}