/* ===========================================
   SHAHU'S GARDEN HIGH SCHOOL
   DESIGN VARIABLES
=========================================== */

:root{

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

    --primary-color:#980227;

    --primary-dark:#7c001f;

    --primary-light:#b1032e;

    --secondary-color:#d4af37;

    --secondary-light:#f6df88;

    --accent-color:#1f4d7a;

    /* ===================================
       BACKGROUND COLORS
    =================================== */

    --white:#ffffff;

    --off-white:#fafafa;

    --light-gray:#f4f4f4;

    --border:#e5e5e5;

    --black:#222222;

    --text:#555555;

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

    --primary-gradient:linear-gradient(
        135deg,
        #980227,
        #b1032e
    );

    --gold-gradient:linear-gradient(
        135deg,
        #d4af37,
        #f6df88
    );

    /* ===================================
       FONT FAMILY
    =================================== */

    --font-family:'Poppins',sans-serif;

    /* ===================================
       FONT WEIGHT
    =================================== */

    --light:300;

    --regular:400;

    --medium:500;

    --semi-bold:600;

    --bold:700;

    --extra-bold:800;

    /* ===================================
       FONT SIZE
    =================================== */

    --fs-12:12px;

    --fs-14:14px;

    --fs-16:16px;

    --fs-18:18px;

    --fs-20:20px;

    --fs-24:24px;

    --fs-28:28px;

    --fs-32:32px;

    --fs-40:40px;

    --fs-50:50px;

    --fs-60:60px;

    /* ===================================
       SPACING
    =================================== */

    --space-5:5px;

    --space-10:10px;

    --space-15:15px;

    --space-20:20px;

    --space-30:30px;

    --space-40:40px;

    --space-50:50px;

    --space-60:60px;

    --space-80:80px;

    --space-100:100px;

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

    --radius-small:5px;

    --radius-medium:10px;

    --radius-large:15px;

    --radius-xl:25px;

    --radius-circle:50%;

    /* ===================================
       SHADOW
    =================================== */

    --shadow-small:0 3px 10px rgba(0,0,0,.08);

    --shadow-medium:0 10px 30px rgba(0,0,0,.10);

    --shadow-large:0 20px 50px rgba(0,0,0,.15);

    /* ===================================
       TRANSITION
    =================================== */

    --transition:.4s ease;

    /* ===================================
       CONTAINER
    =================================== */

    --container-width:1320px;

}