/* ==========================================================
   SHYAMKRISHI DESIGN SYSTEM
   Version: 2.0
========================================================== */

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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

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

:root{

    --primary:#2F855A;
    --primary-dark:#276749;
    --secondary:#84CC16;
    --accent:#22C55E;

    --bg:#F8FAFC;
    --bg-soft:#EEF7F2;

    --dark:#08111F;
    --dark-2:#101C2B;
    --dark-3:#162434;

    --white:#FFFFFF;

    --text:#08111F;
    --text-light:#64748B;

    --border:#E2E8F0;

    --success:#16A34A;
    --danger:#DC2626;
    --warning:#FACC15;

}

/* ===========================
        TYPOGRAPHY
=========================== */

:root{

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

    --font-body:'Inter',sans-serif;

    --fw-light:300;
    --fw-normal:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;
    --fw-black:800;

    --h1:72px;
    --h2:56px;
    --h3:42px;
    --h4:32px;
    --h5:24px;
    --body:18px;
    --small:15px;

}

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

:root{

    --space-xs:8px;
    --space-sm:16px;
    --space-md:24px;
    --space-lg:40px;
    --space-xl:70px;
    --space-2xl:120px;

}

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

:root{

    --radius-xs:8px;
    --radius-sm:14px;
    --radius-md:20px;
    --radius-lg:28px;
    --radius-xl:40px;
    --radius-full:999px;

}

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

:root{

    --shadow-sm:
        0 4px 12px rgba(15,23,42,.05);

    --shadow-md:
        0 12px 35px rgba(15,23,42,.08);

    --shadow-lg:
        0 30px 70px rgba(15,23,42,.12);

    --shadow-xl:
        0 50px 120px rgba(15,23,42,.18);

}

/* ===========================
        GLASS EFFECT
=========================== */

:root{

    --glass-bg:
        rgba(255,255,255,.65);

    --glass-border:
        rgba(255,255,255,.35);

    --glass-blur:22px;

}

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

:root{

    --gradient-primary:
        linear-gradient(
            135deg,
            #2F855A,
            #84CC16
        );

    --gradient-dark:
        linear-gradient(
            135deg,
            #08111F,
            #101C2B
        );

    --gradient-light:
        linear-gradient(
            135deg,
            #FFFFFF,
            #F8FAFC
        );

}

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

:root{

    --transition-fast:.25s ease;

    --transition:.35s ease;

    --transition-slow:.6s ease;

}

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

:root{

    --container:1380px;

}

/* ===========================
            Z INDEX
=========================== */

:root{

    --z-navbar:9999;

    --z-modal:99999;

    --z-loader:999999;

}

/* ===========================
          BREAKPOINTS
=========================== */

:root{

    --desktop:1400px;

    --laptop:1200px;

    --tablet:992px;

    --mobile:768px;

    --small-mobile:576px;

}

/* ===========================
          RESET
=========================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:var(--font-body);

    overflow-x:hidden;

    line-height:1.7;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

button{

    cursor:pointer;

    border:none;

    outline:none;

}

ul{

    list-style:none;

}

.container{

    width:min(var(--container),92%);

    margin:auto;

}