@font-face { font-family:'Cairo'; src:url('/assets/fonts/Cairo/static/Cairo-Regular.ttf') format('truetype'); font-weight:400; }
@font-face { font-family:'Cairo'; src:url('/assets/fonts/Cairo/static/Cairo-Medium.ttf') format('truetype'); font-weight:500; }
@font-face { font-family:'Cairo'; src:url('/assets/fonts/Cairo/static/Cairo-SemiBold.ttf') format('truetype'); font-weight:600; }
@font-face { font-family:'Cairo'; src:url('/assets/fonts/Cairo/static/Cairo-Bold.ttf') format('truetype'); font-weight:700; }
@font-face { font-family:'Cairo'; src:url('/assets/fonts/Cairo/static/Cairo-Black.ttf') format('truetype'); font-weight:900; }
@font-face { font-family:'Cairo'; src:url('/assets/fonts/Cairo/static/Cairo-Light.ttf') format('truetype'); font-weight:300; }
@font-face { font-family:'Cairo'; src:url('/assets/fonts/Cairo/static/Cairo-ExtraLight.ttf') format('truetype'); font-weight:200; }

@font-face { font-family:'Saira'; src:url('/assets/fonts/Saira/static/Saira-Regular.ttf') format('truetype'); font-weight:400; }
@font-face { font-family:'Saira'; src:url('/assets/fonts/Saira/static/Saira-Medium.ttf') format('truetype'); font-weight:500; }
@font-face { font-family:'Saira'; src:url('/assets/fonts/Saira/static/Saira-SemiBold.ttf') format('truetype'); font-weight:600; }
@font-face { font-family:'Saira'; src:url('/assets/fonts/Saira/static/Saira-Bold.ttf') format('truetype'); font-weight:700; }
@font-face { font-family:'Saira'; src:url('/assets/fonts/Saira/static/Saira-ExtraBold.ttf') format('truetype'); font-weight:800; }
@font-face { font-family:'Saira'; src:url('/assets/fonts/Saira/static/Saira-Light.ttf') format('truetype'); font-weight:300; }
@font-face { font-family:'Saira'; src:url('/assets/fonts/Saira/static/Saira-ExtraLight.ttf') format('truetype'); font-weight:200; }


/* ======================= :root Variables ======================= */
:root {
    /* Layout */
    --header: 90px;
    --padding: 8rem;
    --sidebar: 17rem;

    /* Colors */
    --c-1: #051f20;  /* rich black */
    --c-2: #0b2b26;  /* dark green  */
    --c-3: #163832;  /* bangladesh green  */
    --c-4: #5eaf73;  /* garibbean green  */
    --c-5: #daf1de;  /* soft white */
    --c-6: #fcfcfc;  /* soft white */

    --c-w: #fff;        /* white */
    --c-b: #000;        /* balck */
    --c-bd: #050a22;    /* balck dark */
    



    --primary-color: #0077b6;
    --logo-color: rgb(3, 3, 135);
    --secondary-color: #6C63FF;
    --accent-color: #028c75;
    --accent-color-hover: #00C9A7;
    --dark-color: #1F1F1F;
    --light-color: #F9F9F9;
    --white-color: #fff;
    --body-color: #f4f6f8;

    /* Fonts */
    --font-family-ar: 'Cairo', sans-serif;
    --font-family-en: 'Saira', sans-serif;

    /* Font Sizes */
    --font-xs: 12px;
    --font-sm: 14px;

    --font-md: clamp(14px, 1vw + 12px, 16px);
    --font-lg: clamp(16px, 1.2vw + 14px, 20px);
    --font-xl: clamp(22px, 2vw + 16px, 28px);
    --font-xxl: clamp(28px, 3vw + 20px, 36px);
    --font-3xl: clamp(34px, 4vw + 22px, 48px);
    --font-4xl: clamp(42px, 5vw + 26px, 64px);


    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 900;
}

@media (max-width: 768px) {
    :root {
        /* Layout */
        --header: 70px;
    }
}

/* ======================= Global Reset ======================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ======================= Lists & Links ======================= */
li {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--c-1);
}

/* ======================= Inputs & Buttons ======================= */
input, button, select, textarea {
    outline: none;
    border: none;
    background: transparent;
    font-family: var(--font-family-ar);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* ======================= Headings & Text ======================= */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
}

p, span, li {
    font-weight: var(--font-weight-normal);
}

/* ======================= Utility Classes ======================= */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.bold { font-weight: var(--font-weight-bold); }
.light { font-weight: var(--font-weight-light); }

/* ======================= Layout ======================= */

.btn {
    padding: 5px 15px;
    border: 1px solid var(--c-6);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}