/* ==========================================
   UFF BHABHI DESIGN SYSTEM v2.0
   Premium Luxury Theme
   Default : Light Luxury
========================================== */

:root{

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

    --primary:#E0006C;
    --primary-hover:#FF2D8D;

    --secondary:#4169E1;

    
    /* Luxury Gold */
    --gold:#A56A00;
    --gold-light:#C78A1C;
    --gold-dark:#7A4D00;

    /* =========================
       LIGHT THEME
    ========================= */

    --bg:#FFF6FA;

    --bg-secondary:#FFF0F7;

    --card:rgba(255,255,255,.72);

    --card-solid:#FFFFFF;

    --text:#1B1B1B;

    --text-light:#666666;

    --heading:#111111;

    --border:rgba(255,255,255,.45);

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

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

    --glass-blur:18px;

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

    --shadow:
        0 15px 40px rgba(0,0,0,.08);

    --shadow-magenta:
        0 10px 35px rgba(224,0,108,.18);

    --shadow-blue:
        0 10px 35px rgba(65,105,225,.15);

    --shadow-gold:
        0 10px 35px rgba(245,197,66,.25);

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

    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:26px;
    --radius-xl:36px;

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

    --space-xs:4px;
    --space-sm:8px;
    --space-md:16px;
    --space-lg:24px;
    --space-xl:40px;
    --space-xxl:70px;

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

    --transition:.35s ease;
    --body-bg:
        radial-gradient(circle at top,#FF5BA7 0%,#E43D91 40%,#B53D9F 70%,#8A63E8 100%);

    --section-bg:transparent;

}

/* ==========================================
   DARK THEME
========================================== */

[data-theme="dark"]{

    --bg:#0F0F13;

    --bg-secondary:#17171D;
    
    --body-bg:
        radial-gradient(circle at top,
        #61104B 0%,
        #331226 45%,
        #15151B 80%,
        #090909 100%);
    --section-bg:transparent;

    --card:rgba(30,30,30,.75);

    --card-solid:#1B1B1B;

    --text:#FFFFFF;

    --text-light:#BDBDBD;

    --heading:#FFFFFF;

    --border:rgba(255,255,255,.08);

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

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

    --shadow:
        0 15px 45px rgba(0,0,0,.45);

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    color:var(--text);

    overflow-x:hidden;

    transition:.35s;

    background: var(--body-bg);

    background-attachment:fixed;

}

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

h1,h2,h3,h4,h5,h6{

    color:var(--heading);

    font-weight:700;

}

p{

    color:var(--text-light);

    line-height:1.8;

}

/* ==========================================
   LINKS
========================================== */

a{

    text-decoration:none;

    color:inherit;

}

/* ==========================================
   IMAGES
========================================== */

img{

    display:block;

    max-width:100%;

}

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

.container{

    width:100%;

    max-width:1500px;

    margin:auto;

    padding:0 40px;

}

/* ==========================================
   SECTION
========================================== */

section{

    position:relative;

}

.section-title{

    font-size:34px;

    font-weight:700;

    margin-bottom:30px;

}

/* ==========================================
   GLASS CARD
========================================== */

.glass{

    background:var(--glass-bg);

    backdrop-filter:blur(var(--glass-blur));

    -webkit-backdrop-filter:blur(var(--glass-blur));

    border:1px solid var(--glass-border);

    box-shadow:var(--shadow);

}

/* ==========================================
   BUTTONS
========================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border:none;

    cursor:pointer;

    transition:var(--transition);

    border-radius:var(--radius-md);

    padding:14px 30px;

    font-weight:600;

}

.btn-primary{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-hover)
    );

    color:#fff;

    box-shadow:var(--shadow-magenta);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:
    0 15px 35px rgba(224,0,108,.35);

}

.btn-gold{

    background:linear-gradient(
        135deg,
        var(--gold-light),
        var(--gold)
    );

    color:#111;

    box-shadow:var(--shadow-gold);

}

.btn-gold:hover{

    transform:translateY(-4px);

}

/* ==========================================
   CUSTOM SELECTION
========================================== */

::selection{

    background:var(--primary);

    color:#fff;

}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--bg-secondary);

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

        var(--primary),

        var(--secondary)

    );

    border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-hover);

}