/*===================================================
    // FONTS
    /==================================================*/

    /* Body */
    @font-face {
        font-family: 'Albert Sans Light';
        src:url('fonts/AlbertSans-Light.ttf') format('truetype');
        font-weight: 300;
        font-style: normal;
        font-display: swap;     
    }

    @font-face {
        font-family: 'Albert Sans Bold';
        src:url('fonts/AlbertSans-Bold.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
        font-display: swap;     
    }

    @font-face {
        font-family: 'Albert Sans Medium';
        src:url('fonts/AlbertSans-Medium.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
        font-display: swap;      
    }

    @font-face {
        font-family: 'Albert Sans Regular';
        src:url('fonts/AlbertSans-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;      
    }


    

    /* Heading */
    @font-face {
        font-family: 'Geologica-ExtraBold';
        src:url('fonts/Geologica-ExtraBold.ttf') format('truetype');
        font-weight: 800;
        font-style: normal;
        font-display: swap;
    }


    /* Sub-Heading */
    @font-face {
        font-family: 'Geologica-Bold';
        src:url('fonts/Geologica-Bold.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    

    @font-face {
        font-family: 'Rock Salt';
        src:url('fonts/RockSalt-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }


    
   

    /*===================================================
    // CSS CUSTOM PROPERTIES
    /==================================================*/

    :root {
        --primary-color: #1c56f9;
        --primary-light-color: #39baff;
        --primary-dark-color: #007ede;

        --secondary-color: #39baff;
        --secondary-light-color: #43eaff;
        --secondary-dark-color: #07aed9;

        --accent-color: #1B9CFC;
        --accent-light-color: #ffde66;
        --accent-dark-color: #e1a22a;

        --dark-color: #162b41;
        --dark-light-color: #34495f;
        --dark-dark-color: #000d23;

        --accent-color-50: #31c9cbf0;
      

        --body-font: 'Albert Sans Light', sans-serif;
        --body-bold-font: 'Albert Sans Bold', sans-serif;

        --h1-font: Geologica-ExtraBold, sans-serif;
        --h1-bold-font: Geologica-ExtraBold, sans-serif;

        --h2-font: Geologica-ExtraBold, sans-serif;
        --h2-bold-font: Geologica-ExtraBold, sans-serif;

        --h3-font: Geologica-Bold, sans-serif;
        --h3-bold-font: Geologica-ExtraBold, sans-serif;

        --h4-font: Geologica-Bold, sans-serif;
        --h4-bold-font: Geologica-ExtraBold, sans-serif;

        --font-fallback: sans-serif;

        --ui-icon:none;
 
    }

    .ui-icon{
        background-image: url(../ui-icon.png);
        background-repeat: no-repeat;
        background-size: 100%;
    }