/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Utility
# Cards
# Common
# Form
# Navigations
# Animations
# Mobile Nav
# Search Popup
# Page Header
# Google Map
# Client Carousel
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Common
--------------------------------------------------------------*/


/*== Default Css ======*/
@import url(https://db.onlinewebfonts.com/c/d05c19ccecf7003d248c60ffd6b5e8f7?family=Binance+PLEX); 

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

@font-face {
    font-family: 'Confine Bold';
    src: url('../fonts/Confine-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Mosafin ExtraBold';
    src: url('../fonts/mosafin-extrabold.otf') format('opentype');
    font-weight: 800; /* Adjust this as needed */
    font-style: normal;
}
@font-face {
    font-family: 'ZasliaWol82'; /* You can choose any name you like */
    src: url('../fonts/zaslia-wol82.otf') format('opentype'); /* Path to the font file */
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BarichDemoBold'; /* Name for the font-family */
    src: url('../fonts/BarichDEMO-Bold-BF6690d3e7af8a0.ttf') format('truetype'); /* Path to the font file */
    font-weight: bold; /* Assuming this font is a bold variant */
    font-style: normal;
}

@font-face {
    font-family: 'HarelynDemoRegular'; /* Name for the font-family */
    src: url('../fonts/HarelynDemoRegular-BF669490336cfdf.ttf') format('truetype'); /* Path to the font file */
    font-weight: normal; /* Adjust based on font characteristics */
    font-style: normal; /* Adjust based on font characteristics */
}
@font-face {
    font-family: 'Margaret'; /* The name you'll use to refer to the font */
    src: url('../fonts/margaret.otf') format('opentype'); /* Path to the font file */
    font-weight: normal; /* Adjust if the font is bold or another weight */
    font-style: normal; /* Adjust if the font is italic or another style */
}

@font-face {
    font-family: 'Saviera'; /* Name for the font-family */
    src: url('../fonts/saviera.otf') format('opentype'); /* Path to the font file */
    font-weight: normal; /* Adjust if the font is bold or another weight */
    font-style: normal; /* Adjust if the font is italic or another style */
}





/* Default light mode styles */
:root {
    --primary-bg:#ffffff;
    --secondary-bg:#e2e2e2;
    --primary-color:#121212;
    --secondary-color:#282828;

    --font: 'Binance PLEX', sans-serif;
    --font-2: 'DM Sans', sans-serif;
    --font-bold: 'Confine Bold', sans-serif;

    --btn-filled-bg: #121212;
    --btn-filled-color: #e2e2e2;

    --success-color:rgb(57, 125, 28);
    --failure-color:rgb(125, 57, 28);

    --white-color:#ffffff;
    --white-bg:#ffffff;
    --black-color:#121212;
    --black-bg:#121212;
    --white-text:black;

    --header-bg:#fbf9fc;

    --opposite-bg: #121212;
    --opposite-color:#c6c6c6;

    --trans-bg:rgba(0,0,0,0.4);
    --trans2-bg:rgba(0,0,0,0.9);

    --filled-icon:#121212;

    --filled-active: #121212;
    --filled-in-active: #b3b3b3;
    --nav-icon: rgba(255,255,255,0.5);
    modal-bg:rgba(0, 0, 0, 0.9);

}


@media (prefers-color-scheme: dark) {
    :root {
        --primary-bg:#121212;
        --secondary-bg:#282828;
        --primary-color:#c6c6c6;
        --secondary-color:#747474;

        --font: 'Binance PLEX', sans-serif;
        --font-2: 'DM Sans', sans-serif;
        --font-bold: 'Confine Bold', sans-serif;

        --btn-filled-bg: #e2e2e2;
        --btn-filled-color: #121212;

        --success-color:rgb(57, 125, 28);
        --failure-color:rgb(125, 57, 28);

        --white-color:#ffffff;
        --white-bg:#ffffff;
        --black-color:#121212;
        --black-bg:#c6c6c6;
        --white-text:white;

        --header-bg:#bca2cf;

        --opposite-bg: #e2e2e2;
        --opposite-color:#121212;

        --trans-bg:rgba(0,0,0,0.1);
        --trans2-bg:rgba(0,0,0,1);

        --neutral-white:#eee;
        --filled-btn:#433d8b;
        
        --neutral-white-bg:pink;

        --filled-icon:#c3c3c3;

        
        --filled-active: #c3c3c3;
        --filled-in-active: #6f6f6f;

        --nav-icon: rgba(255,255,255,0.5);

        modal-bg:rgba(255,255, 255, 0.9);
    }
}

body {
    padding: 0px;
    margin: 0px;
    font-family: var(--font);
    font-style: normal;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed */
    box-sizing: border-box;
}