@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&family=Tajawal:wght@400;700&display=swap');


:root {
    --primaryColor: #212223;
    --middleColor: #39393b;
    --helperColor: #5bc0de;
    --lightHelper: #8bcbdf;
    --transperant-dropdown: #ffffffd7;
    --transparentColor: rgba(0, 0, 0, 0.699);
    --shadow-color: rgba(0, 0, 0, 0.274);
    /* --------------------------------- */
    --white: #ffff;
    --whatsappColor: #25D366;
    --facebook-color: #1877F2;
    --instegram-color: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    --gray: #f8f8f8;
    /* -------------------------- */
    --container-width: 1440px;

    --radius-md: 10px;
    --radius-lg: 16px;
    --border-medium: 2px;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 24px;
    --space-xl: 30px;

    --shadow-right: 4px 0 10px var(--shadow-color);
    --shadow-sm: 0px 4px 6px var(--shadow-color);
    --shadow-md: 0 5px 12px var(--shadow-color);
    --shadow-lg: 0 10px 25px var(--shadow-color);


    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 28px;
    --text-2xl: 38px;
}