* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        :root {
            --bg-dark-base: #0b0c10;
            --bg-dark-surface: #12141c;
            --border-glass: rgba(255, 255, 255, 0.08);
            --accent-cyan: #00e5ff;
            --accent-gold: #ffc107;
            --accent-purple: #a855f7;
            --accent-green: #00e676;
            /* --premium-shared-bg: linear-gradient(135deg, rgb(83, 28, 94) 0%, #200826 50%, #08090c 100%); */
        }

        body {
            background-color: #0f121d;
        }

        /* Navbar Base */
        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 50px;
            position: relative;
            z-index: 1000;
            background: linear-gradient(135deg, #ffffff 0%, white, white, white, #a855f7, #00e5ff, #200826 50%, #08090c 100%) !important;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-glass);
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6);
            transition: all 0.3s ease;
            linear-gradient(135deg #ffffff 0%, white, white, white, #a855f7, #00e5ff, #200826 50%, #08090c 100%)
        }


        .logo img {
            max-height: 40px;
            display: block;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        /* Navigation Bar Links */
        .nav-btn {
            text-decoration: none;
            color: #ffffff;
            font-weight: 700;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;

            border-radius: 10px;


            padding: 6px 16px;
            min-width: 150px;
            text-align: center;
            background: linear-gradient(135deg, rgb(83, 28, 94) 0%, #3b0a4e 50%, #00e5ff 100%) !important;
        }

        .nav-btn:hover {
            filter: brightness(1.15);
        }

        /* Dropdown Container Styles */
        .dropdown {
            position: relative;
        }

        /* Parent Menu Default State (Exit Phase) */
        .dropdown-menu {
            background-color: transparent;
            padding: 0;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease 0.35s, transform 0.3s ease 0.35s, visibility 0.3s ease 0.35s;
        }

        /* Items Default Exit State */
        .dropdown-item {
            text-decoration: none;
            color: #ffffff;
            font-size: 14.5px;
            font-weight: 700;
            border-radius: 8px;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.25s ease, transform 0.25s ease, filter 0.3s ease;
            padding: 6px 16px 6px 30px;
            min-width: 150px;
            text-align: left;
            background: linear-gradient(135deg, rgb(83, 28, 94) 0%, #3b0a4e 50%, #00e5ff 100%) !important;
        }

        .dropdown-item:hover {
            filter: brightness(1.2);
            transform: translateX(15px) !important;
            color: red !important;

        }

        /* CTA Button */
        .cta-btn {
            text-decoration: none;
            color: #0b1a2e;
            background: linear-gradient(135deg, #2fd8f6, #3bb8ef);
            font-weight: 700;
            font-size: 14px;
            padding: 10px 24px;
            border-radius: 20px;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .cta-btn:hover {
            transform: scale(1.05);
        }

        /* ======================================================
       DESKTOP SPECIFIC ( > 992px )
    ====================================================== */
        @media (min-width: 993px) {

            /* Initial Desktop Reveal Animation */
            .nav-links>* {
                opacity: 0;
                transform: translateY(-20px);
                animation: navReveal 0.6s ease forwards;
            }

            .nav-links>*:nth-child(1) {
                animation-delay: 0.2s;
            }

            .nav-links>*:nth-child(2) {
                animation-delay: 0.4s;
            }

            .nav-links>*:nth-child(3) {
                animation-delay: 0.6s;
            }

            .nav-links>*:nth-child(4) {
                animation-delay: 0.8s;
            }

            .nav-links>*:nth-child(5) {
                animation-delay: 1s;
            }

            @keyframes navReveal {
                from {
                    opacity: 0;
                    transform: translateY(-20px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .hamburger-toggle,
            .mobile-cta {
                display: none;
            }

            .dropdown-menu {
                position: absolute;
                top: 100%;
                left: 0;
                min-width: 240px;
                margin-top: 14px;
                transform: translateY(-10px);
            }

            /* Opening state for Menu Container */
            .dropdown:hover .dropdown-menu {
                visibility: visible;
                opacity: 1;
                transform: translateY(0);
                transition-delay: 0s;
            }

            /* Opening state for Items */
            .dropdown:hover .dropdown-item {
                opacity: 1;
                transform: translateY(0);
            }

            /* Forward Entrance Stagger */
            .dropdown:hover .dropdown-item:nth-child(1) {
                transition-delay: 0.05s;
            }

            .dropdown:hover .dropdown-item:nth-child(2) {
                transition-delay: 0.12s;
            }

            .dropdown:hover .dropdown-item:nth-child(3) {
                transition-delay: 0.19s;
            }

            .dropdown:hover .dropdown-item:nth-child(4) {
                transition-delay: 0.26s;
            }

            .dropdown:hover .dropdown-item:nth-child(5) {
                transition-delay: 0.33s;
            }

            /* Reverse Exit Stagger */
            .dropdown:not(:hover) .dropdown-item:nth-child(5) {
                transition-delay: 0.00s;
            }

            .dropdown:not(:hover) .dropdown-item:nth-child(4) {
                transition-delay: 0.07s;
            }

            .dropdown:not(:hover) .dropdown-item:nth-child(3) {
                transition-delay: 0.14s;
            }

            .dropdown:not(:hover) .dropdown-item:nth-child(2) {
                transition-delay: 0.21s;
            }

            .dropdown:not(:hover) .dropdown-item:nth-child(1) {
                transition-delay: 0.28s;
            }
        }


        /* ======================================================
       HAMBURGER & MOBILE VIEW ( <= 992px )
    ====================================================== */
        /* Hamburger Toggle Button Base with 360 Rotation */
        .hamburger-toggle {
            background-color: #0f1626;
            border: 2px solid #1fa7b8;
            border-radius: 10px;
            padding: 8px;
            cursor: pointer;
            display: none;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            width: 46px;
            height: 46px;
            position: relative;
            z-index: 1001;

            /* 360 Spin Transition for Open and Reverse */
            transform: rotate(0deg);
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, border-color 0.3s ease;
        }

        .hamburger-toggle .bar {
            display: block;
            height: 3.5px;
            border-radius: 4px;
            transition: opacity 0.3s ease;
        }

        .hamburger-toggle .bar-top {
            width: 100%;
            background-color: #1fa7b8;
        }

        .hamburger-toggle .bar-mid {
            width: 70%;
            background-color: #1fa7b8;
        }

        .hamburger-toggle .bar-bot {
            width: 40%;
            background-color: #2ecc71;
        }

        .hamburger-toggle .close-x {
            opacity: 0;
            color: #9d4edd;
            font-size: 22px;
            font-weight: 800;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: opacity 0.3s ease;
        }

        /* Active State: Rotates 360 degrees forward and shows X */
        .hamburger-toggle.active {
            transform: rotate(360deg);
            background: transparent;
            border-color: #9d4edd;
        }

        .hamburger-toggle.active .bar {
            opacity: 0;
        }

        .hamburger-toggle.active .close-x {
            opacity: 1;
        }

        /* Mobile Layout Modifications */
        @media (max-width: 992px) {
            .navbar {
                padding: 15px 20px;
            }

            .desktop-cta {
                display: none;
            }

            .hamburger-toggle {
                display: flex;
            }

            /* Mobile Nav Links Overlay Panel */
            .nav-links {
                position: absolute;
                top: 100%;
                left: 0;
                width: 50%;
                background: #141122;
                flex-direction: column;
                padding: 20px;
                gap: 12px;
                align-items: stretch;
                box-shadow: 0 15px 30px rgba(0, 0, 0, .7);
                display: flex;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-20px);
                pointer-events: none;
                /* Container delays closing until all main items finish reverse animating */
                transition: opacity 0.35s ease 0.35s, transform 0.35s ease 0.35s, visibility 0.35s ease 0.35s;
            }




            .nav-links.active {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
                pointer-events: auto;
                transition-delay: 0s;
            }

            .nav-btn {
                width: 100%;

            }

            /* Top Level Main Nav Links - Default Exit Animation */
            .nav-links>* {
                opacity: 0;
                transform: translateY(-15px);
                transition: opacity 0.3s ease, transform 0.3s ease;
            }

            /* Opening Main Nav Items Stagger (1 -> 5) */
            .nav-links.active>* {
                opacity: 1;
                transform: translateY(0);
            }

            .nav-links.active>*:nth-child(1) {
                transition-delay: 0.05s;
            }

            .nav-links.active>*:nth-child(2) {
                transition-delay: 0.12s;
            }

            .nav-links.active>*:nth-child(3) {
                transition-delay: 0.19s;
            }

            .nav-links.active>*:nth-child(4) {
                transition-delay: 0.26s;
            }

            .nav-links.active>*:nth-child(5) {
                transition-delay: 0.33s;
            }

            /* Closing Main Nav Items Reverse Stagger (5 -> 1) */
            .nav-links:not(.active)>*:nth-child(5) {
                transition-delay: 0.00s;
            }

            .nav-links:not(.active)>*:nth-child(4) {
                transition-delay: 0.07s;
            }

            .nav-links:not(.active)>*:nth-child(3) {
                transition-delay: 0.14s;
            }

            .nav-links:not(.active)>*:nth-child(2) {
                transition-delay: 0.21s;
            }

            .nav-links:not(.active)>*:nth-child(1) {
                transition-delay: 0.28s;
            }

            /* Submenu Accordion Container Exit Delay */
            .dropdown-menu {
                display: flex;
                position: static;
                width: 100%;
                margin-top: 0px;
                max-height: 0;
                overflow: hidden;
                box-shadow: none;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-10px);
                text-align: center;
                transition: max-height 0.3s ease 0.35s, opacity 0.3s ease 0.35s, transform 0.3s ease 0.35s, visibility 0.3s ease 0.35s, margin-top 0.3s ease 0.35s;
            }

            .dropdown.open .dropdown-menu {
                opacity: 1;
                visibility: visible;
                max-height: 350px;
                margin-top: 8px;
                transform: translateY(0);
                transition-delay: 0s;
            }

            .dropdown-item {
                opacity: 0;
                transform: translateX(-12px);
                transition: opacity 0.25s ease, transform 0.25s ease;
                background: linear-gradient(180deg, rgb(41 21 45) 0%, #3b0a4e 50%, #00e5ff 100%) !important;
            }
        }


        .dropdown.open .dropdown-item {
            opacity: 1;
            transform: translateX(0);
        }

        /* Submenu Opening Stagger (1 -> 5) */
        .dropdown.open .dropdown-item:nth-child(1) {
            transition-delay: .05s;
        }

        .dropdown.open .dropdown-item:nth-child(2) {
            transition-delay: .12s;
        }

        .dropdown.open .dropdown-item:nth-child(3) {
            transition-delay: .19s;
        }

        .dropdown.open .dropdown-item:nth-child(4) {
            transition-delay: .26s;
        }

        .dropdown.open .dropdown-item:nth-child(5) {
            transition-delay: .33s;
        }

        /* Submenu Reverse Closing Stagger (5 -> 1) */
        .dropdown:not(.open) .dropdown-item:nth-child(5) {
            transition-delay: .00s;
        }

        .dropdown:not(.open) .dropdown-item:nth-child(4) {
            transition-delay: .07s;
        }

        .dropdown:not(.open) .dropdown-item:nth-child(3) {
            transition-delay: .14s;
        }

        .dropdown:not(.open) .dropdown-item:nth-child(2) {
            transition-delay: .21s;
        }

        .dropdown:not(.open) .dropdown-item:nth-child(1) {
            transition-delay: .28s;
        }



        /* Mobile responsiveness */

        @media screen and (max-width: 991.98px) {


            .navbar {
                background: linear-gradient(114deg,
                        #ffffff 0%,
                        #ffffff 35%,
                        #a855f7 48%,
                        #00e5ff 58%,
                        #200826 70%,
                        #08090c 100%) !important;

            }

            .hamburger-toggle {
                /* Remove borders, outlines, and focus rings */
                /* border: none !important; */
                /* outline: none !important; */
                box-shadow: none !important;

                /* Reduced container dimensions (from 46px to 36px) */
                width: 36px !important;
                height: 36px !important;
                padding: 6px !important;
            }

            /* Target focus/active states to prevent outline on click */
            .hamburger-toggle:focus,
            .hamburger-toggle:active,
            .hamburger-toggle:focus-visible {
                /* border: none !important; */
                /* outline: none !important; */
                box-shadow: none !important;
            }

            /* Reduced sizes for the 3 internal bars/towers */
            .hamburger-toggle span,
            .hamburger-toggle div,
            .hamburger-toggle .bar {
                height: 2px !important;
                /* Thinner bars */
                margin-bottom: 3px !important;
                /* Tightened spacing */
            }

            .hamburger-toggle .close-x {
                top: 0 !important;
            }


            .nav-links {
                /* Screen overlay setup */
                position: fixed;
                top: 70px;
                /* Header ki height yahan daalein taaki header na dhape */
                right: 0;
                /* Menu ko screen ke right side align karne ke liye */

                /* Dimensions as requested */
                width: 70%;
                /* Width ko 60% se 80% ke beech rakhne ke liye 70% optimal hai */
                height: calc(100vh - 70px);
                /* Total screen height (100vh) me se header subtract kiya */

                
                background: linear-gradient(98deg, #ffffff 0%, #ffffff 35%, #b894db 48%, #639297 58%, #5b3166 70%, #08090c 100%) !important;

                /* Aapka theme background */
                box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.5);

                /* Smooth Slide and Fade Transition */
                opacity: 0;
                visibility: hidden;
                transform: translateY(-10px);
                pointer-events: none;
                transition: all 0.3s ease-in-out;

                /* Layout formatting */
                display: flex;
                flex-direction: column;
                padding: 20px;
                overflow-y: auto;
                /* Agar menu options zyada ho toh scroll ho sake */
            }

            .nav-links.active {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
                pointer-events: auto;
                transition-delay: 0s;
            }

            .nav-btn {
                padding: 0 16px !important;
            }

            .dropdown-item {
                background: linear-gradient(188deg, rgb(41 21 45) 0%, #3b0a4e 50%, #00e5ff 100%) !important;
                padding: 0px 16px;


            }

            @media (max-width: 450px) {
                .nav-links {
                    width: 90%;
                }

            }

        }

        @media screen and (max-width: 375.98px) {

            .navbar {
                background: linear-gradient(142deg, #ffffff 0%, #ffffff 54%, #a855f7 61% 59%, #00e5ff 66%, #200826 70%, #08090c 100%) !important;
            }
            
            
        }



        /* header hero */
        @media screen and (max-width: 525px) {

            /* Container: Keeps all 3 items in one horizontal line */
            .announcement-links {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                gap: 6px;
            }

            /* Base button styling */
            .announce-btn,
            .announce-btn:hover,
            .announce-btn:focus,
            .announce-btn:active,
            .announce-btn:visited {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                text-decoration: none !important;
                white-space: nowrap;
                flex: 1 1 0;
                min-width: 0;
                padding: 8px 10px;
                border-radius: 6px;
                border: 1px solid transparent;
                transition: all 0.2s ease;
            }

            .announce-btn i,
            .announce-btn span {
                text-decoration: none !important;
                display: inline-block;
            }

            /* -------------------------------------------------------------
       1. UNIFIED COLOR THEMING (Border, Icon & Text = SAME COLOR)
    ------------------------------------------------------------- */

            /* Button 1 (Cyan Theme): Border, Icon, Text सब 00d2ff */
            .cyan-btn,
            .cyan-btn:hover,
            .cyan-btn:focus {
                border-color: #00d2ff !important;
                background-color: transparent !important;
            }

            .cyan-btn i,
            .cyan-btn span {
                color: #00d2ff !important;
            }

            /* Button 2 (Gold Theme): Border, Icon, Text सब ffc107 */
            .gold-btn,
            .gold-btn:hover,
            .gold-btn:focus {
                border-color: #ffc107 !important;
                background-color: transparent !important;

            }

            .gold-btn i,
            .gold-btn span {
                color: #ffc107 !important;
            }

            /* Button 3 (Purple Theme): Border, Icon, Text सब a855f7 */
            .purple-btn,
            .purple-btn:hover,
            .purple-btn:focus {
                border-color: #a855f7 !important;
                background-color: transparent !important;

            }

            .purple-btn i,
            .purple-btn span {
                color: #a855f7 !important;
            }

            /* -------------------------------------------------------------
       2. RESPONSIVE LAYOUT (0px to 525px)
    ------------------------------------------------------------- */

            /* 376px to 525px: Horizontal layout */
            @media screen and (min-width: 376px) {
                .announce-btn {
                    padding: 6px 4px;
                    font-size: 11px;
                }

                .announce-btn i {
                    font-size: 11px;
                    margin-right: 4px;
                }

                .announce-btn span {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

            /* 0px to 375px: Icon TOP, Text BOTTOM (Colors untouched) */
            @media screen and (max-width: 375px) {
                .announcement-links {
                    gap: 4px;
                }

                .announce-btn {
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    padding: 6px 2px;
                    text-align: center;
                    border-width: 1px;
                    border-style: solid;
                }

                .announce-btn i {
                    font-size: 14px;
                    margin-right: 0;
                    margin-bottom: 3px;
                }

                .announce-btn span {
                    font-size: 9.5px;
                    line-height: 1.1;
                    white-space: normal;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
            }
        }



        /* =============================================================
   NAVBAR BUTTONS HOVER ANIMATION ENGINE
   ============================================================= */

/* 1. Base Setup for Nav Links, Dropdown Items, & CTA Buttons */
.nav-btn,
.dropdown-item,
.cta-btn {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    isolation: isolate !important;
    transition: transform 0.3s ease, filter 0.3s ease, color 0.3s ease !important;
}

/* Pseudo-element that creates the animated background sweep */
.nav-btn::before,
.dropdown-item::before,
.cta-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    border-radius: inherit !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Keep inner text & icons above the expanding background layer */
.nav-btn *,
.dropdown-item *,
.cta-btn * {
    position: relative;
    z-index: 2;
}

/* =============================================================
   2. DIRECTIONAL HOVER ANIMATIONS
   ============================================================= */

/* Main Nav Links (.nav-btn): LEFT to RIGHT */
.nav-btn::before {
    background: linear-gradient(135deg, #00e5ff 0%, #a855f7 100%) !important;
    transform: scaleX(0);
    transform-origin: left center;
}

.nav-btn:hover::before {
    transform: scaleX(1);
}

.nav-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* Submenu Links (.dropdown-item): TOP-RIGHT to BOTTOM-LEFT */
.dropdown-item::before {
    background: linear-gradient(135deg, #a855f7 0%, #3b0a4e 100%) !important;
    transform: scale(0);
    transform-origin: top right;
}

.dropdown-item:hover::before {
    transform: scale(1);
}

.dropdown-item:hover {
    color: #00e5ff !important;
    padding-left: 36px !important; /* Preserves smooth right-shift */
}

/* CTA Buttons (.cta-btn): TOP to BOTTOM */
.cta-btn::before {
    background: linear-gradient(135deg, #a855f7 0%, #00e5ff 100%) !important;
    transform: scaleY(0);
    transform-origin: center top;
}

.cta-btn:hover::before {
    transform: scaleY(1);
}

.cta-btn:hover {
    color: #ffffff !important;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.4);
}



/* 🟢 Submenu Container */
.dropdown-submenu {
  position: relative;
  width: 100%;
}

.dropdown-submenu .submenu-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.submenu-arrow {
  font-size: 0.75rem;
  transition: transform 0.25s ease, color 0.2s ease;
}

/* 🟢 Submenu Positioning: नीचे और 50% Right Shift */
.submenu-items {
  display: none;
  position: absolute;
  top: calc(100% + 6px) !important;   /* बाकी आइटम्स जितना नीचे का गैप */
  left: 50% !important;                /* 50% दाईं तरफ शिफ्ट */
  width: 100% !important;              /* सेम चौड़ाई */
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 9999;
}

/* 🟢 English App Button Styling (Same Height & Width) */
.submenu-items .dropdown-item {
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  transform: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
}

.submenu-items .dropdown-item:hover {
  transform: none !important;
}

/* माउस स्मूथ गैप ब्रिज (ऊपर से नीचे जाने के लिए) */
.dropdown-submenu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 150%;
  height: 10px;
}

/* 🟢 Desktop & Hover Actions */
@media (min-width: 992px) {
  .dropdown-submenu:hover .submenu-items {
    display: block;
  }
  .dropdown-submenu:hover .submenu-arrow {
    transform: rotate(90deg); /* नीचे की तरफ एरो पॉइंट करेगा */
    color: #00e5ff;
  }
}

/* 🟢 Mobile Responsive */
@media (max-width: 991px) {
  .submenu-items {
    position: static !important;
    display: block !important;
    width: auto !important;
    left: 0 !important;
    margin: 6px 0 0 20px !important; /* मोबाइल पर हल्का सा इंडेंट */
  }
  .dropdown-submenu .submenu-arrow {
    transform: rotate(90deg);
  }
}