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

:root {
    --primaryColor: rgb(26, 97, 134);
    --middleColor: #272727;
    --helperColor: rgb(229, 193, 80);
    --lightHelper: rgb(223, 201, 129);
    --hrColor: #47A4BD;
    --transparentColor: rgba(0, 0, 0, 0.822);
    --shadow-color: rgba(0, 0, 0, 0.274);

    /* --------------------------------- */
    --white: #ffff;
    --facebook-color: #1877F2;
    --whatsappColor: #25D366;
    --gray: #f8f8f8;
    --dark-color: #343a40;

    /* -------------------------- */
    --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;
}