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

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

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

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

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

    

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


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

    

    @font-face {
        font-family: 'Outfit-Heading';
        src:url('fonts/Outfit-Black-Heading.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }


    @font-face{
        font-family: 'Outfit-Black';
        src:url('fonts/Outfit-Black.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;

    }
   

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

    :root {
        --primary-color: #3cc6ec;
        --primary-light-color: #5ae4ff;
        --primary-dark-color: #1ea8ce;

        --secondary-color: #5ae4ff;
        --secondary-light-color: #78ffff;
        --secondary-dark-color: #3cc6e1;

        --accent-color: #fdb534;
        --accent-light-color: #ffd352;
        --accent-dark-color: #df9716;

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

        --accent-color-50: #fdb53460;

        --primary-color-50: #3cc6ec60;
        --primary-color-30: #3cc6ec30;
      

        --body-font: 'Outfit-Regular', sans-serif;
        --body-bold-font: 'Outfit-Bold', sans-serif;

        --h1-font: 'Outfit-Bold', sans-serif;
        --h1-bold-font: 'Outfit-Bold', sans-serif;

        --h2-font: 'Outfit-Bold', sans-serif;
        --h2-bold-font: 'Outfit-Bold', sans-serif;

        --h3-font: 'Outfit-Medium', sans-serif;
        --h3-bold-font: 'Outfit-Bold', sans-serif;

        --h4-font: 'Outfit-Medium', sans-serif;
        --h4-bold-font: 'Outfit-Bold', sans-serif;

        --font-fallback: sans-serif;

        --ui-icon:none;
 
    }

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