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

:root {
    --bg-dark: #050505;
    --bg-card: #0f0f0f;
    --text-main: #e0e0e0;
    --text-muted: #888888;
    --accent-gold: #d4af37;
    --border-color: rgba(255, 255, 255, 0.08);
    --glass-bg: rgba(15, 15, 15, 0.7);
    --nav-height: 80px;
    --transition-fast: 0.3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none !important; font-family: 'Inter', sans-serif; }
html { scroll-behavior: smooth; }
body { background-color: var(--bg-dark); color: var(--text-main); line-height: 1.6; overflow-x: hidden; }

/* Custom Cursor */
.magic-cursor {
    position: fixed; width: 15px; height: 15px; background: var(--accent-gold); border-radius: 50%;
    pointer-events: none; z-index: 100000; transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background 0.2s; mix-blend-mode: difference;
}
.magic-cursor.hover { width: 40px; height: 40px; background: rgba(212, 175, 55, 0.2); border: 1px solid var(--accent-gold); }
@media (pointer: coarse) { * { cursor: auto !important; } .magic-cursor { display: none; } }

/* Preloader */
#preloader {
    position: fixed; inset: 0; background-color: var(--bg-dark); display: flex;
    justify-content: center; align-items: center; z-index: 999999; transition: opacity 0.5s ease;
}
.loader-circle { width: 50px; height: 50px; border: 3px solid rgba(212, 175, 55, 0.2); border-top-color: var(--accent-gold); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.preloader-hidden { opacity: 0; pointer-events: none; }

/* Utilities & Typography */
/* h1, h2, h3, h4 { color: #fff; font-weight: 600; margin-bottom: 15px; line-height: 1.2; } */
.text-gold { color: var(--accent-gold); }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
.page-wrapper { padding-top: calc(var(--nav-height) + 40px); min-height: 100vh; }
.reveal { opacity: 0; transform: translateY(40px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Navbar */
header {
    position: fixed; width: 100%; top: 0; height: var(--nav-height); background: var(--glass-bg);
    backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); z-index: 1000; display: flex; align-items: center;
    margin-bottom: 30px;
}
.nav-container { width: 100%; display: flex; justify-content: space-between; align-items: center;  }
.logo-container { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-weight: 700; }
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a { color: var(--text-main); text-decoration: none; transition: var(--transition-fast); }
.nav-links a:hover { color: var(--accent-gold);   }
 .nav-links a.active { color: var(--accent-gold);   }

/* Hamburger Menu */
.hamburger { display: none; flex-direction: column; gap: 6px; background: none; border: none; z-index: 1001; }
.hamburger span { display: block; width: 30px; height: 2px; background: var(--text-main); transition: 0.3s; }
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
    position: fixed; top: 0; left: 100%; width: 100%; height: 100vh; background: var(--bg-dark);
    display: flex; flex-direction: column; justify-content: center; align-items: center; transition: left 0.5s ease; z-index: 999;
}
.mobile-menu.active { left: 0; }
.mobile-menu .nav-links { flex-direction: column; text-align: center; gap: 40px; }
.mobile-menu .nav-links a { font-size: 1.5rem; }

/* Buttons & Floating Actions */
.btn { display: inline-block; padding: 12px 28px; border-radius: 6px; text-decoration: none; transition: var(--transition-fast); font-weight: 500; border: 1px solid transparent;}
.btn-primary { background: var(--accent-gold); color: #000; }
.btn-primary:hover { background: transparent; color: var(--accent-gold); border-color: var(--accent-gold);  }
.btn-outline { background: transparent; color: var(--text-main); border-color: var(--border-color); }
.btn-outline:hover { border-color: var(--accent-gold); color: var(--accent-gold); }

.floating-actions { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 998; }
.fab {
    width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; text-decoration: none; box-shadow: 0 4px 15px rgba(0,0,0,0.5); transition: 0.3s; background: var(--glass-bg); border: 1px solid var(--border-color);
}
.fab:hover { transform: scale(1.1); border-color: var(--accent-gold); color: var(--accent-gold); }
.fab-whatsapp { background-color: #25D366; border: none; }
.fab-call { background-color: #007bff; border: none; }
.fab-top { opacity: 0; transform: scale(0); display: none; }

/* Grids & Cards */
.section { padding: 80px 0; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; }
.glass-card { background: var(--glass-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 30px; backdrop-filter: blur(10px); transition: 0.3s; }
.glass-card:hover { transform: translateY(-5px); border-color: rgba(212, 175, 55, 0.4); }

/* Typewriter */
.type-cursor { border-right: 3px solid var(--accent-gold); animation: blink 0.8s infinite; }
@keyframes blink { 50% { border-color: transparent; } }

/* Legal Policy Pages (Merged from your inline styles) */
.policy-container { max-width: 850px; margin: 40px auto; line-height: 1.6; text-align: justify; margin-top: 130px; }
.policy-header { text-align: center; margin-bottom: 30px; }
.policy-meta { font-size: 0.85rem; color: #888; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; margin-bottom: 30px; text-align: center; }
.policy-section { margin-bottom: 30px; }
.policy-section h3 { color: var(--accent-gold); text-transform: uppercase; font-size: 1.1rem; margin-bottom: 15px; }
.policy-section ul { margin-left: 20px; margin-bottom: 15px; }
.policy-section li { margin-bottom: 8px; }
.signature-section { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.sig-box { border-top: 1px solid var(--text-muted); padding-top: 15px; margin-top: 20px; }
table { width: 100%; border-collapse: collapse; margin-top: 15px; margin-bottom: 25px; }
th, td { border: 1px solid var(--border-color); padding: 12px; text-align: left; }
th { background: rgba(255, 255, 255, 0.03); color: var(--accent-gold); }

/* Footer (Dots fixed!) */
footer { background: var(--bg-card); border-top: 1px solid var(--border-color); padding: 50px 0 20px; margin-top: 80px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-bottom: 40px; }
.footer-links ul { list-style: none !important; padding-left: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: var(--text-muted); text-decoration: none; transition: var(--transition-fast); }
.footer-links a:hover { color: var(--accent-gold); }
.footer-bottom { text-align: center; border-top: 1px solid var(--border-color); padding-top: 20px; color: var(--text-muted); font-size: 0.9rem; }

/* Responsive Media Queries */
@media screen and (max-width: 992px) {
    .desktop-nav { display: none; }
    .hamburger { display: flex; }
}
@media screen and (max-width: 768px) {
    .grid-2 { grid-template-columns: 1fr; }
    .signature-section { grid-template-columns: 1fr; gap: 30px; }
}
@media screen and (max-width: 480px) {
    .floating-actions { bottom: 20px; right: 20px; }
    .fab { width: 45px; height: 45px; }
}


.nav-actions { 
    display: flex; 
    align-items: center; 
    gap: 15px; /* Adds perfect spacing between toggle and hamburger */
}

/* Premium Button Styling */
.icon-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Circular button looks high-end */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-fast);
}
.icon-btn:hover { 
    border-color: var(--accent-gold); 
    color: var(--accent-gold); 
    transform: rotate(15deg); /* Slight premium animation on hover */
   
}

.hamburger { 
    display: none; /* Desktop par hide karega */
    flex-direction: column; 
    gap: 6px; 
    background: none; 
    border: none; 
    z-index: 1001; 
}

.hero { 
    /* var(--nav-height) navbar ki height hai, +80px usko aur neeche push karega */
    padding-top: calc(var(--nav-height) + 80px); 
    padding-bottom: 4rem;
    padding-left: 5%;
    padding-right: 5%;
    max-width: 1500px; 
    margin: 0 auto; 
    
}


.hero-title { 
    font-size: clamp(3.5rem, 6vw, 6rem); /* Increased size */
    font-weight: 700; 
    line-height: 1.1; 
    margin-bottom: 1.5rem; 
}
.hero-desc { 
    color: var(--text-muted); 
    font-size: 1.3rem; /* Increased size */
    max-width: 650px; 
    margin-bottom: 2.5rem; 
    line-height: 1.8; 
}



/* Light Theme Colors */
:root[data-theme="light"] {
    --bg-dark: #f8f9fa;
    --bg-card: #ffffff;
    --text-main: #1a1a1a;
    --text-muted: #555555;
    --border-color: rgba(0, 0, 0, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.85);
}

/* Terminal Style Preloader */
#preloader {
    position: fixed; inset: 0; background: var(--bg-dark);
    display: flex; justify-content: center; align-items: center;
    z-index: 999999; transition: opacity 0.5s ease;
}
.loader-content { 
    text-align: center; 
    font-family: 'Courier New', monospace; /* Terminal feel ke liye */
}
.logo-loader { 
    font-size: 2rem; 
    font-weight: 700; 
    margin-bottom: 10px; 
    letter-spacing: 5px; 
    color: var(--text-main); 
}
#status-text { 
    font-size: 0.9rem; 
    margin-bottom: 20px; 
    color: var(--accent-gold); 
}
.progress-bar { 
    width: 200px; 
    height: 2px; 
    background: #222; 
    margin: 0 auto; 
    overflow: hidden; 
}
.progress { 
    width: 0%; 
    height: 100%; 
    background: var(--accent-gold); 
    transition: width 0.3s ease; 
}
.preloader-hidden { opacity: 0; pointer-events: none; }

body { 
    background-color: var(--bg-dark); 
    color: var(--text-main); 
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

/* 
/* Dark Mode Default (Tumhara pehle se hai) */
/* :root {
    --bg-dark: #050505;
    --bg-card: #0f0f0f;
    --text-main: #e0e0e0;
    --text-muted: #888888;
    --accent-gold: #d4af37;
    --border-color: rgba(255, 255, 255, 0.08);
} */

/* LIGHT MODE FIX (Isse copy karke :root ke niche paste karo) */
/* [data-theme="light"] {
    --bg-dark: #f8f9fa;
    --bg-card: #ffffff;
    --text-main: #1a1a1a;
    --text-muted: #555555;
    --accent-gold: #b8860b; /* Darker Gold for visibility */
    /* --border-color: rgba(0, 0, 0, 0.15); }*/






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

/* --- COLOR VARIABLES --- */
:root {
    --bg-dark: #050505;
    --bg-card: #0f0f0f;
    --text-main: #f3eded;
    --text-muted: #888888;
    --accent-gold: #d4af37;
    --border-color: rgba(255, 255, 255, 0.08);
    --glass-bg: rgba(15, 15, 15, 0.7);
    --nav-height: 80px;
    --transition-fast: 0.3s ease;
}

/* [data-theme="light"] {
    --bg-dark: #f8f9fa;
    --bg-card: #ffffff;
    --text-main: #f1e8e8;
    --text-muted: #555555;
    --accent-gold: #b8860b;
    --border-color: rgba(0, 0, 0, 0.15);
    --glass-bg: rgba(255, 255, 255, 0.85);
} */
/* --- LIGHT MODE VARIABLE FIX --- */
[data-theme="light"] {
    --bg-dark: #f8f9fa;
    --bg-card: #ffffff;
    --text-main: #1a1a1a; /* Isse text ab dark charcoal ho jayega */
    --text-muted: #555555;
    --accent-gold: #b8860b; /* Light bg par gold acche se dikhega */
    --border-color: rgba(0, 0, 0, 0.15);
    --glass-bg: rgba(255, 255, 255, 0.85);
}

/* --- BASE STYLES --- */
* { margin: 0; padding: 0; box-sizing: border-box; cursor: none !important; font-family: 'Inter', sans-serif; }
html { scroll-behavior: smooth; }
body { background-color: var(--bg-dark);  min-height: 100vh; color: var(--text-main); line-height: 1.6; overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; }

/* --- SECTIONS SPACING FIX --- */
.section { padding: 95px 0; }
.section-subtitle { margin-bottom: 30px; }

/* --- CLIENT TRUST CARD FIX --- */
.testimonial-card { 
    display: flex; flex-direction: column; justify-content: space-between; height: 100%; 
}
.client-name { 
    margin-top: 25px; /* Naam ko niche shift karne ke liye */
    display: block; 
}

/* --- PREVIOUS STYLES (AS IT IS) --- */
/* (Cursor, Preloader, Header, Hamburger, etc. remain the same) */
/* ... (Yahan apna baaki purana CSS code paste kar lena) ... */

/* --- Toggles and Responsive --- */
.nav-actions { display: flex; align-items: center; gap: 15px; }
.icon-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-main); width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: var(--transition-fast); }
.icon-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }

.hero { padding-top: calc(var(--nav-height) + 80px); padding-bottom: 4rem; padding-left: 5%; padding-right: 5%; max-width: 1500px; margin: 0 auto; }
.hero-title { font-size: clamp(3.5rem, 6vw, 6rem); font-weight: 700; line-height: 1.1; margin-bottom: 1.5rem; }
.hero-desc { color: var(--text-muted); font-size: 1.3rem; max-width: 650px; margin-bottom: 2.5rem; line-height: 1.8; }
h1, h2, h3, h4, h5 { color: var(--text-main); font-weight: 600; margin-bottom: 15px; line-height: 1.2; }
/* Utilities & Typography (Fix headings using dynamic variables) */
h1, h2, h3, h4, h5 { 
    color: var(--text-main); /* `#fff` ki jagah variable use kiya taaki light mode par dark ho sake */
    font-weight: 600; 
    margin-bottom: 15px; 
    line-height: 1.2; 
}

/* Logo Fix */
.logo-container { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    text-decoration: none; 
    color: var(--text-main); /* `#fff` ki jagah variable kiya */
    font-weight: 700; 
}

/* FAB Icon Dynamic Color */
.fab {
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: var(--text-main); /* Icons ka color white se dynamic variable kiya */
    text-decoration: none; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); 
    transition: 0.3s; 
    background: var(--glass-bg); 
    border: 1px solid var(--border-color);
}



#preloader {
    position: fixed; 
    inset: 0; 
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-dark); /* Taaki agar page load ho toh background seamless dikhe */
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 999999 !important; 
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader-hidden { 
    opacity: 0 !important; 
    visibility: hidden !important;
    pointer-events: none; 
}

/* --- PREMIUM CUSTOM SCROLLBAR --- */

/* 1. Scrollbar ki चौड़ाई (Width) */
::-webkit-scrollbar {
    width: 10px;
}

/* 2. Scrollbar ka Track (Peeche ka background) */
::-webkit-scrollbar-track {
    background: #0b0b0b; /* Pure page ke background se match karega */
}

/* 3. Scrollbar ka Thumb (Jo handle upar-niche hota hai) */
::-webkit-scrollbar-thumb {
    background: #222222; /* Ek subtle dark gray bar */
    border-radius: 20px;
    border: 2px solid #0b0b0b; /* Isse track aur thumb ke beech gap dikhega jo bohot premium lagta hai */
    transition: background 0.3s ease;
}

/* 4. Jab user scrollbar par mouse le jaye (Hover State) */
::-webkit-scrollbar-thumb:hover {
    background: #cca43b; /* Aapke theme ka Gold/Yellow color jo hover pe highlight hoga */
}

/* 1. Pure page aur body ko fix karein */
/* html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Pure screen ki height lega */
   /* display: flex;
    flex-direction: column;
    background-color: #0b0b0b !important; /* Jo bhi aapka primary dark color hai */
    /*color: #ffffff;
    overflow-x: hidden; } *//* Side horizontal scroll ko rokne ke liye */


/* 2. Main content area ko stretched rakhein */
/* Agar aapne main section ko <main> ya <div class="wrapper"> mein dala hai */
main, .main-content {
    flex: 1; 
}

/* 3. Footer ko automatically niche push karein */
footer {
    margin-top: auto; /* Yeh footer ko screen ke bottom mein block kar dega */
    /* background-color: #111111; Footer ka background */
    width: 100%;
}

/* --- HAMBURGER & MOBILE MENU FIXES (ADD TO BOTTOM) --- */

/* 1. Hamburger button ki click area aur visibility ko lock karne ke liye */
.hamburger {
    cursor: pointer !important; /* Magic cursor ke sath touch devices par click sahi se lene ke liye */
    padding: 5px;
    outline: none;
    transition: var(--transition-fast);
}

/* 2. Hamburger lines ka responsive color current theme ke hisab se update hota rahega */
.hamburger span {
    background-color: var(--text-main) !important; 
}

/* 3. Jab menu open ho toh peeche ka page scroll na ho */
body.menu-open {
    overflow: hidden;
}

/* 4. Mobile menu ke andar links ko vertical layout dene ke liye */
.mobile-menu .nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- HAMBURGER ABSOLUTE FORCED RESPONSIVE FIX (PASTE AT THE VERY BOTTOM) --- */
@media screen and (max-width: 992px) {
    .hamburger {
        display: flex !important; /* Force displays on mobile and overrides lower-level desktop none */
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        background: none;
        border: none;
        cursor: pointer !important;
        z-index: 1002 !important; /* Header se bhi upar */
        padding: 0;
    }

    .hamburger span {
        display: block !important;
        width: 100% !important;
        height: 2px !important;
        background-color: var(--text-main) !important; /* Current theme text color line automatic le legi */
        transition: 0.3s ease-in-out;
    }
}

/* Jab mobile menu active ho toh backpage scroll lock rahega */
body.menu-open {
    overflow: hidden !important;
}


/* --- PREMIUM DUAL CURSOR CSS --- */

/* Normal cursors ko desktop par completely hide karne ke liye */
@media (pointer: fine) {
    body, a, button, .btn, .fab, .icon-btn, .hamburger {
        cursor: none !important;
    }
}

/* 1. Inner Solid Dot (Jo bilkul mouse ke sath-sath chalega) */
.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-gold);
    border-radius: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 999999;
    opacity: 1;
    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease, opacity 0.3s ease;
}

/* 2. Outer Circle (Jo slow-motion trailing effect dega) */
.cursor-circle {
    width: 36px;
    height: 36px;
    border: 2px solid var(--accent-gold);
    border-radius: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 999998;
    opacity: 1;
    /* Note: Yahan left/top par transition nahi lagana hai, kyunki JS frame updates handles it smoothly! */
    transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

/* 3. HOVER STATES: Jab user kisi link/button par mouse le jaye */
.cursor-dot.hover {
    width: 4px;
    height: 4px;
    background-color: #fff; /* Hover par white ho jayega */
}

.cursor-circle.hover {
    width: 55px;
    height: 55px;
    background-color: rgba(212, 175, 55, 0.15); /* Haldi-gold glow background inside */
    border-color: var(--accent-gold);
}

/* 4. Touch Screens (Mobiles) par ise hide karna hai */
@media (pointer: coarse) {
    .cursor-dot, .cursor-circle {
        display: none !important;
    }
    * {
        cursor: auto !important;
    }
}

/* =======================================================
   INDEPENDENT PRE-FOOTER GIANT SHIMMER TEXT
   ======================================================= */

/* 1. Theme-aware Variables for Light/Dark Mode */
:root {
    --shimmer-bg: #050505;                       /* Aapke dark theme ka background */
    --shimmer-text-base: rgba(255, 255, 255, 0.02); /* Very subtle white-gray text */
    --shimmer-text-shine: rgba(212, 175, 55, 0.12);  /* Gold shine for dark mode */
}

[data-theme="light"] {
    --shimmer-bg: #ffffff;                       /* Light theme background */
    --shimmer-text-base: rgba(0, 0, 0, 0.02);       /* Very subtle black text */
    --shimmer-text-shine: rgba(184, 134, 11, 0.15);  /* Dark gold shine for visibility */
}

/* 2. Independent Wrapper (Jo page flow mein footer ke upar rahega) */
.shashi-shimmer-section {
    width: 100%;
    background-color: var(--shimmer-bg);
    overflow: hidden; /* Taaki bada text page se bahar na nikle (Horizontal scroll block) */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Text ko niche se chipka kar rakhega */
    padding-top: 60px; /* Thoda sa breathing room upar se */
    margin: 0;
    position: relative;
    z-index: 5;
}

/* 3. The Giant Text with Shimmer Sweep Effect */
.shashi-shimmer-text {
    font-size: clamp(6rem, 22vw, 22rem); /* Dynamic resizing: screens ke hisab se automatic scale hoga */
    font-weight: 900;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    line-height: 0.8;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    user-select: none;
    pointer-events: none; /* Cursor click/select ko disturb nahi karega */

    /* Gradient Mask setup */
    background: linear-gradient(
        90deg, 
        var(--shimmer-text-base) 25%, 
        var(--shimmer-text-shine) 50%, 
        var(--shimmer-text-base) 75%
    );
    background-size: 200% auto;
    
    /* Text masking clipping */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Smooth 10-second sweep loop */
    animation: luxuryTextSweep 10s linear infinite;
}

/* 4. Luxury Sweeping Keyframes */
@keyframes luxuryTextSweep {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Mobile Screens Optimization */
@media screen and (max-width: 480px) {
    .shashi-shimmer-section {
        padding-top: 30px;
    }
    .shashi-shimmer-text {
        font-size: clamp(4rem, 18vw, 7rem);
        line-height: 0.9;
    }
}


/* --- CURSOR-TRACKING INTERACTIVE LIGHT EFFECT --- */

/* Jaise hi section par hover ho, automatic animation ko stop karo aur cursor follow light activate karo */
.shashi-shimmer-section:hover .shashi-shimmer-text {
    animation-play-state: paused !important; /* Pehle chal rahi animation ko wahi rok dega */
    
    /* Dynamic radial gradient jo cursor ki position (--mouse-x, --mouse-y) ko follow karega */
    background: radial-gradient(
        circle 180px at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        var(--shimmer-text-shine) 0%, 
        var(--shimmer-text-base) 80%
    ) !important;
    
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    
    /* Smooth transition jab mouse enter/leave kare */
    transition: background 0.1s ease-out; 
}


/* =======================================================
   PREMIUM CONTACT FORM STYLING (WITH DROPDOWN & PHONE)
   ======================================================= */

.contact-section {
    padding: 100px 20px;
    background-color: var(--shimmer-bg, #050505);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
}

.contact-container {
    width: 100%;
    max-width: 650px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 50px 40px;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.contact-header {
    text-align: center;
    margin-bottom: 40px;
}

.contact-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-main, #ffffff);
    margin-bottom: 10px;
}

.contact-title span {
    color: var(--accent-gold, #d4af37);
}

.contact-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Floating Label Form Groups */
.form-group {
    position: relative;
    margin-bottom: 35px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 0;
    font-size: 1rem;
    color: #fff;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    outline: none;
    transition: 0.3s ease;
}

/* Specific Dropdown Style resetting browser default arrow */
.form-group select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* Dark theme style for select options dropdown list */
.form-group select option {
    background-color: #0a0a0a !important; /* Rich Dark Background */
    color: #ffffff !important;
    padding: 15px !important;
}

.form-group textarea {
    resize: none;
}

/* Floating Labels Position */
.form-group label {
    position: absolute;
    top: 12px;
    left: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Active/Focus State for Input Labels */
.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label {
    top: -12px;
    font-size: 0.85rem;
    color: var(--accent-gold, #d4af37);
}

/* Active/Focus State specifically for Select dropdown label */
.form-group select:focus ~ .select-label,
.form-group select:valid ~ .select-label {
    top: -12px;
    font-size: 0.85rem;
    color: var(--accent-gold, #d4af37);
}

/* Custom Dropdown Arrow SVG alignment */
.select-arrow {
    position: absolute;
    right: 5px;
    top: 15px;
    width: 16px;
    height: 16px;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease, color 0.3s ease;
}

.form-group select:focus ~ .select-arrow {
    color: var(--accent-gold, #d4af37);
    transform: rotate(180deg); /* Arrow twists upside down when active */
}

/* Bottom Line Highlight on Focus */
.input-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-gold, #d4af37);
    transition: 0.4s ease;
}

.form-group input:focus ~ .input-line,
.form-group select:focus ~ .input-line,
.form-group textarea:focus ~ .input-line {
    width: 100%;
}

/* Submit button, Icons, Status styles stay clean and pristine */
.submit-btn {
    width: 100%;
    padding: 16px;
    background: transparent;
    border: 2px solid var(--accent-gold, #d4af37);
    color: var(--accent-gold, #d4af37);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease-in-out;
}

.submit-btn .send-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.submit-btn:hover {
    background: var(--accent-gold, #d4af37);
    color: #000 !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.submit-btn:hover .send-icon {
    transform: translate(3px, -3px) rotate(-10deg);
}

.form-status {
    margin-top: 20px;
    font-size: 0.95rem;
    text-align: center;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.form-status.success {
    color: #2ecc71;
    opacity: 1;
}

.form-status.error {
    color: #e74c3c;
    opacity: 1;
}

@media screen and (max-width: 600px) {
    .contact-container {
        padding: 30px 20px;
    }
    .contact-title {
        font-size: 1.8rem;
    }
}

.custom{
font-size: 28px;        /* Apne hisab se size adjust karein */
    /* color: #25D366;         WhatsApp green color */
    transition: transform 0.3s ease;
}

.footer-bottom .social-links a{
    text-decoration: none;
    color: currentColor;
}


/* Tech stack ke words ko alag karne ke liye */
.tech-stack {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px; 
}

/* Button ko upar wale text se door (niche) karne ke liye */
.portfolio-actions {
    margin-top: 25px; 
}

/* Button ke andhar text aur arrow ko center karne ke liye */
.btn-full {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 8px;
}


/* =========================================
   LIGHT MODE CONTACT FORM FIX
   ========================================= */

[data-theme="light"] .contact-container {
    background: rgba(0, 0, 0, 0.02); /* Light transparent background */
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .contact-subtitle {
    color: var(--text-muted);
}

/* Input Fields ke text aur bottom border ko dark karne ke liye */
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
    color: var(--text-main) !important; /* `#fff` se badal kar dark automatic ho jayega */
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); /* Light mode black-ish line */
}

/* Form Labels (Naam, Email, etc.) ka color */
[data-theme="light"] .form-group label {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* Dropdown (Select Option) ki background and text list */
[data-theme="light"] .form-group select option {
    background-color: #ffffff !important; /* Option box ko light theme mein white karega */
    color: #1a1a1a !important;            /* Text black karega */
}

/* Custom Dropdown ka Arrow icon color */
[data-theme="light"] .select-arrow {
    color: rgba(0, 0, 0, 0.5) !important;
}


/* =========================================
   DYNAMIC FLOATING PARTICLES (FULL SCREEN)
   ========================================= */

/* 1. Wrapper jo screen par background banayega */
.bg-particle-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Sabse peeche rahega */
    pointer-events: none;
    overflow: hidden;
}

/* 2. Har ek particle ki basic styling (Glowing Gold Orbs) */
.particle {
    position: absolute;
    bottom: -100px; /* Screen ke niche se start honge */
    background: radial-gradient(circle, rgba(212, 175, 55, 0.4) 0%, transparent 80%);
    border-radius: 50%;
    filter: blur(10px); /* particles ko soft glowing look dene ke liye */
    animation: floatUp 15s infinite linear;
}

/* 3. Sabhi 8 particles ko alag-alag size, position aur speed dena taaki natural lage */
.particle:nth-child(1) { width: 80px; height: 80px; left: 10%; animation-duration: 18s; animation-delay: 0s; }
.particle:nth-child(2) { width: 120px; height: 120px; left: 30%; animation-duration: 22s; animation-delay: 2s; }
.particle:nth-child(3) { width: 60px; height: 60px; left: 50%; animation-duration: 15s; animation-delay: 4s; }
.particle:nth-child(4) { width: 150px; height: 150px; left: 75%; animation-duration: 26s; animation-delay: 1s; }
.particle:nth-child(5) { width: 90px; height: 90px; left: 90%; animation-duration: 20s; animation-delay: 5s; }
.particle:nth-child(6) { width: 70px; height: 70px; left: 20%; animation-duration: 17s; animation-delay: 8s; }
.particle:nth-child(7) { width: 110px; height: 110px; left: 60%; animation-duration: 24s; animation-delay: 3s; }
.particle:nth-child(8) { width: 130px; height: 130px; left: 45%; animation-duration: 21s; animation-delay: 7s; }

/* 4. LIGHT MODE: Light mode mein particles ka color brown-gold shade ho jayega */
[data-theme="light"] .particle {
    background: radial-gradient(circle, rgba(184, 134, 11, 0.15) 0%, transparent 80%);
    filter: blur(8px);
}

/* 5. THE ANIMATION: Niche se upar jaana aur halka left-right dolna (swaying) */
@keyframes floatUp {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.6; /* Beech mein aakar poore visible honge */
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-120vh) translateX(100px) scale(0.8);
        opacity: 0; /* Top par pahunch kar transparent ho jayenge */
    }
}

/* =========================================
   DYNAMIC FLOATING GOLDEN DUST STORM
   ========================================= */

.bg-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Baaki content ke peeche */
    pointer-events: none;
    overflow: hidden;
}

/* Base Star / Dust Particle Styling */
.star {
    position: absolute;
    background: radial-gradient(circle, #d4af37 20%, transparent 80%);
    border-radius: 50%;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.8));
    opacity: 0;
}

/* Light Mode support (Thoda soft aur dark gold shade) */
[data-theme="light"] .star {
    background: radial-gradient(circle, #b8860b 30%, transparent 80%);
    filter: drop-shadow(0 0 8px rgba(184, 134, 11, 0.4));
}

/* Sabhi 10 particles ko different size, starting position, direction aur animation timing dena */
.star-1  { width: 8px;  height: 8px;  top: 15%; left: 10%; animation: orbit-1 25s infinite ease-in-out; }
.star-2  { width: 15px; height: 15px; top: 40%; left: 80%; animation: orbit-2 30s infinite ease-in-out; }
.star-3  { width: 6px;  height: 6px;  top: 70%; left: 25%; animation: orbit-3 20s infinite ease-in-out; }
.star-4  { width: 12px; height: 12px; top: 85%; left: 60%; animation: orbit-4 28s infinite ease-in-out; }
.star-5  { width: 18px; height: 18px; top: 25%; left: 45%; animation: orbit-1 32s infinite ease-in-out; }
.star-6  { width: 5px;  height: 5px;  top: 60%; left: 90%; animation: orbit-2 22s infinite ease-in-out; }
.star-7  { width: 10px; height: 10px; top: 80%; left: 15%; animation: orbit-3 26s infinite ease-in-out; }
.star-8  { width: 14px; height: 14px; top: 10%; left: 75%; animation: orbit-4 34s infinite ease-in-out; }
.star-9  { width: 7px;  height: 7px;  top: 50%; left: 5%;  animation: orbit-1 18s infinite ease-in-out; }
.star-10 { width: 16px; height: 16px; top: 90%; left: 40%; animation: orbit-2 29s infinite ease-in-out; }

/* -----------------------------------------
   REAL DYNAMIC MOTION PATHS (THE MAGIC)
   ----------------------------------------- */

/* Orbit 1: Diagonal wave movement aur pulse */
@keyframes orbit-1 {
    0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
    25%  { opacity: 0.6; }
    50%  { transform: translate(120px, -150px) scale(1.2); opacity: 0.8; }
    75%  { opacity: 0.4; }
    100% { transform: translate(250px, -50px) scale(0.6); opacity: 0; }
}

/* Orbit 2: Circular float aur glow fade */
@keyframes orbit-2 {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    30%  { opacity: 0.7; }
    60%  { transform: translate(-150px, 100px) scale(0.5); opacity: 0.3; }
    80%  { opacity: 0.8; }
    100% { transform: translate(-50px, 220px) scale(1.1); opacity: 0; }
}

/* Orbit 3: Zig-zag upward draft */
@keyframes orbit-3 {
    0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
    20%  { opacity: 0.8; }
    50%  { transform: translate(180px, 80px) scale(1.3); opacity: 0.4; }
    80%  { transform: translate(-100px, 180px) scale(0.7); opacity: 0.7; }
    100% { transform: translate(80px, 300px) scale(0.5); opacity: 0; }
}

/* Orbit 4: Slow cinematic zoom drift */
@keyframes orbit-4 {
    0%   { transform: translate(0, 0) scale(1.4); opacity: 0; }
    40%  { opacity: 0.9; }
    50%  { transform: translate(-200px, -200px) scale(0.6); opacity: 0.5; }
    100% { transform: translate(50px, -100px) scale(1.2); opacity: 0; }
}



/* =========================================
   ANIMATED GRADIENT WAVES BACKGROUND
   ========================================= */

.bg-gradient-waves {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2; /* Sabse peeche */
    pointer-events: none;
    
    /* Pehla layer: Pure dark background */
    background-color: #080808; 
    
    /* Dusra layer: Isme hum alag-alag linear-gradients ko mix karke waves banayenge */
    background-image: 
        radial-gradient(at 10% 20%, rgba(212, 175, 55, 0.15) 0px, transparent 50%),
        radial-gradient(at 90% 10%, rgba(212, 175, 55, 0.1) 0px, transparent 50%),
        radial-gradient(at 50% 80%, rgba(184, 134, 11, 0.12) 0px, transparent 50%),
        radial-gradient(at 80% 90%, rgba(212, 175, 55, 0.08) 0px, transparent 50%);
        
    background-size: 200% 200%; /* Background size bada kiya taaki animation move ho sake */
    animation: waveMovement 20s infinite alternate ease-in-out;
    transition: background-color 0.5s ease;
}

/* Light Mode ke liye soft aur sophisticated adjustments */
[data-theme="light"] .bg-gradient-waves {
    background-color: #f7f9fa;
    background-image: 
        radial-gradient(at 10% 20%, rgba(184, 134, 11, 0.08) 0px, transparent 50%),
        radial-gradient(at 90% 10%, rgba(212, 175, 55, 0.06) 0px, transparent 50%),
        radial-gradient(at 50% 80%, rgba(184, 134, 11, 0.07) 0px, transparent 50%),
        radial-gradient(at 80% 90%, rgba(212, 175, 55, 0.05) 0px, transparent 50%);
}

/* THE MAGIC: Yeh poori screen par in gradient waves ko liquid ki tarah dheere-dheere rotate aur stretch karega */
@keyframes waveMovement {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 100%;
    }
}



/* =========================================
   FAQ GAP & PREMIUM CLICKABLE AREA FIX
   ========================================= */

/* Har ek FAQ box ke beech gap dena aur mouse pointer badalna */
.faq-item {
    margin-bottom: 20px !important; /* Ek box se dusre box ke beech gap */
    cursor: pointer !important;     /* Pure box par mouse laate hi hand icon aayega */
    transition: all 0.3s ease;
}

/* Jab pure box par hover ho toh premium glass effect aae */
.faq-item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(212, 175, 55, 0.3) !important; /* Halka gold border glow */
}

/* Light mode ke liye hover control */
[data-theme="light"] .faq-item:hover {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(184, 134, 11, 0.2) !important;
}

/* Faq ke andar jo question heading/text hai uski pointer-events block karna */
/* (Yeh sabse zaroori hai taaki andar ka text JS click ko distrub na kare) */
.faq-item h3, 
.faq-item .faq-question, 
.faq-item span, 
.faq-item i {
    pointer-events: none; 
}


/* =========================================
   FOOTER SOCIAL ICONS HOVER INTERACTION
   ========================================= */

/* 1. Base styling ko target karna aur smooth transition lagana */
.footer-socials a, 
.footer-links a,
footer i, 
footer svg {
    display: inline-block; /* Scale work karne ke liye display block/inline-block zaroori hai */
    cursor: pointer !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.3s ease, 
                filter 0.3s ease !important;
}

/* 2. Hover karne par Scale Up aur Premium Gold Glow Effect */
.footer-socials a:hover, 
.footer-links a:hover,
footer i:hover, 
footer svg:hover {
    transform: scale(1.22); /* Icon thoda bada hoga smoothly */
    color: #d4af37 !important; /* Premium gold color automatic active hoga */
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6)) !important; /* Halka sa glow */
}

/* 3. Light Mode support */
[data-theme="light"] .footer-socials a:hover,
[data-theme="light"] .footer-links a:hover,
[data-theme="light"] footer i:hover,
[data-theme="light"] footer svg:hover {
    color: #b8860b !important; /* Dark gold for white background */
    filter: drop-shadow(0 0 6px rgba(184, 134, 11, 0.4)) !important;
}

/* mail popup */

.email-popup{

position:fixed;

inset:0;

background:rgba(0,0,0,.65);

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}

.popup-content{

width:90%;

max-width:430px;

padding:30px;

border-radius:18px;

background:#111;

color:white;

text-align:center;

border:1px solid rgba(255,255,255,.1);

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

}

.popup-content h2{

margin-bottom:15px;

}

.popup-content p{

line-height:1.7;

color:#d9d9d9;

}

.popup-buttons{

display:flex;

gap:15px;

margin-top:25px;

justify-content:center;

}

.popup-btn{

padding:12px 22px;

border-radius:8px;

text-decoration:none;

font-weight:600;

color:white;

transition:.3s;

}

.whatsapp-btn{

background:#25D366;

}

.email-btn{

background:#0d6efd;

}

.popup-close{

margin-top:22px;

padding:10px 25px;

border:none;

cursor:pointer;

border-radius:8px;

background:#444;

color:white;

}


/* Honeypot Field */
.honeypot-field {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
}