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

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

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

@font-face {
    font-family: 'Cairo';
    src: url('/assets/fonts/Cairo/static/Cairo-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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

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

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

@font-face {
    font-family: 'Saira';
    src: url('/assets/fonts/Saira/static/Saira-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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




/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    /* =====================================================
       PRIMARY
    ===================================================== */

    --primary: #10B981;
    --primary-dark: #064E3B;
    --primary-light: #A3E635;

    /* =====================================================
       BRAND
    ===================================================== */

    --brand-dark: #052E1B;
    --brand-deep: #064E3B;
    --brand-emerald: #10B981;
    --brand-lime: #A3E635;
    --brand-bright: #D9F99D;

    /* =====================================================
       DARK
    ===================================================== */

    --dark: #021A10;
    --dark-2: #052E1B;
    --dark-3: #064E3B;

    /* =====================================================
       GREEN
    ===================================================== */

    --green: #163832;
    --green-dark: #064E3B;
    --green-deep: #052E1B;
    --green-emerald: #10B981;
    --green-lime: #A3E635;

    /* =====================================================
       ACCENTS
    ===================================================== */

    --accent: #A3E635;
    --accent-light: #D9F99D;
    --accent-green: #10B981;
    --accent-tr: #a2e6353c;

    /* =====================================================
       TEXT
    ===================================================== */

    --text: #0F172A;
    --text-dark: #10221E;
    --muted: #71827E;
    --muted-light: #94A3A0;

    /* =====================================================
       BASIC
    ===================================================== */

    --white: #FFFFFF;
    --black: #000000;

    --light: #F5F7F6;
    --light-2: #F8FAFC;

    --border: #E4EBE8;
    --border-light: #EAF0ED;

    /* =====================================================
       BACKGROUNDS
    ===================================================== */

    --bg: #F5F7F6;
    --bg-light: #F8FAFC;
    --bg-white: #FFFFFF;

    --bg-dark: #021A10;
    --bg-dark-2: #052E1B;
    --bg-dark-3: #064E3B;

    /* =====================================================
       GRADIENTS
    ===================================================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #052E1B 0%,
            #064E3B 45%,
            #10B981 78%,
            #A3E635 100%
        );

    --gradient-green:
        linear-gradient(
            135deg,
            #064E3B 0%,
            #10B981 100%
        );

    --gradient-lime:
        linear-gradient(
            135deg,
            #10B981 0%,
            #A3E635 100%
        );

    --gradient-dark:
        linear-gradient(
            135deg,
            #021A10 0%,
            #052E1B 50%,
            #064E3B 100%
        );

    --gradient-soft:
        linear-gradient(
            135deg,
            #F5F7F6 0%,
            #FFFFFF 100%
        );

    /* =====================================================
       SHADOWS
    ===================================================== */

    --shadow:
        0 25px 70px rgba(6, 23, 20, .10);

    --shadow-lg:
        0 25px 70px rgba(6, 23, 20, .16);

    --shadow-green:
        0 15px 45px rgba(16, 185, 129, .20);

    --shadow-lime:
        0 15px 45px rgba(163, 230, 53, .18);

    --shadow-green-line:
        0 15px 45px rgba(58, 248, 93, 0.18);


    /* =====================================================
       GLOW
    ===================================================== */

    --glow-green:
        0 0 30px rgba(16, 185, 129, .35);

    --glow-lime:
        0 0 30px rgba(163, 230, 53, .40);

    --glow-primary:
        0 0 40px rgba(16, 185, 129, .25);

    /* =====================================================
       RADIUS
    ===================================================== */

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius: 24px;
    --radius-lg: 32px;
    --radius-xl: 40px;

    /* =====================================================
       LAYOUT
    ===================================================== */

    --container: 1240px;

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

    --font-ar: 'Cairo', sans-serif;
    --font-en: 'Saira', sans-serif;

    /* =====================================================
       COMPATIBILITY
    ===================================================== */

    --mf-primary: var(--primary);
    --mf-primary-dark: var(--primary-dark);
    --mf-accent: var(--accent);

    --mf-dark: var(--dark);
    --mf-dark-2: var(--dark-2);
    --mf-dark-3: var(--dark-3);

    --mf-text: var(--text);
    --mf-muted: var(--muted);

    --mf-white: var(--white);
    --mf-light: var(--light);
    --mf-border: var(--border);

    --font-family-ar: var(--font-ar);
    --font-family-en: var(--font-en);
}