:root {
     --bg-color: #ffffff;
     --glass-bg: rgba(248, 250, 252, 0.65);
     --glass-border: rgba(37, 35, 109, 0.12);
     --glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
     --primary: #25236D;
     --text-main: #1B1B1B;
     --text-dim: #1B1B1B;
     --text-light: #1B1B1B;
     --card-bg: #ffffff;
     --card-dark: #25236D;
     --accent-glow: 0 0 18px rgba(37, 35, 109, 0.18);
     --gold-glow: 0 0 18px rgba(216, 161, 10, 0.25);
     --gradient-main: #25236D;
     --gradient-gold: linear-gradient(135deg, #D8A10A 0%, #F4C542 100%);
     --font-heading: 'Poppins', sans-serif;
     --font-body: 'Inter', sans-serif;
 }

 [data-theme="bw"] {
     --bg-color: #000000;
     --glass-bg: rgba(40, 40, 40, 0.4);
     --glass-border: rgba(255, 255, 255, 0.3);
     --primary: #ffffff;
     --secondary: #888888;
     --text-main: #ffffff;
     --text-dim: #cccccc;
     --card-bg: rgba(20, 20, 20, 0.8);
     --accent-glow: 0 0 15px rgba(255, 255, 255, 0.4);
     --gradient-main: linear-gradient(135deg, #ffffff 0%, #666666 100%);
 }

 [data-theme="neon"] {
     --bg-color: #050510;
     --glass-bg: rgba(20, 30, 60, 0.4);
     --glass-border: rgba(0, 243, 255, 0.3);
     --primary: #00f3ff;
     --secondary: #2e7aff;
     --text-main: #ffffff;
     --text-dim: #a0b0d0;
     --card-bg: rgba(10, 20, 40, 0.6);
     --accent-glow: 0 0 20px rgba(0, 243, 255, 0.5);
     --gradient-main: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
 }

 [data-theme="purple"] {
     --bg-color: #0a000f;
     --glass-bg: rgba(40, 0, 60, 0.4);
     --glass-border: rgba(200, 0, 255, 0.4);
     --primary: #d500f9;
     --secondary: #651fff;
     --text-main: #ffffff;
     --text-dim: #d1c4e9;
     --card-bg: rgba(30, 0, 40, 0.6);
     --accent-glow: 0 0 25px rgba(213, 0, 249, 0.6);
     --gradient-main: linear-gradient(135deg, #aa00ff 0%, #ea80fc 100%);
 }

 [data-theme="aqua"] {
     --bg-color: #001a1a;
     --glass-bg: rgba(0, 60, 60, 0.4);
     --glass-border: rgba(0, 255, 200, 0.4);
     --primary: #00ffcc;
     --secondary: #ffffff;
     --text-main: #ffffff;
     --text-dim: #b2dfdb;
     --card-bg: rgba(0, 40, 40, 0.6);
     --accent-glow: 0 0 20px rgba(0, 255, 204, 0.5);
     --gradient-main: linear-gradient(135deg, #1de9b6 0%, #00bfa5 100%);
 }

 [data-theme="steel"] {
     --bg-color: #1a1c20;
     --glass-bg: rgba(100, 110, 120, 0.2);
     --glass-border: rgba(173, 216, 230, 0.3);
     --primary: #add8e6;
     --secondary: #708090;
     --text-main: #f0f8ff;
     --text-dim: #b0c4de;
     --card-bg: rgba(40, 44, 52, 0.6);
     --accent-glow: 0 0 15px rgba(173, 216, 230, 0.4);
     --gradient-main: linear-gradient(135deg, #78909c 0%, #eceff1 100%);
 }

 body {
     background-color: var(--bg-color);
     color: var(--text-main);
     font-family: var(--font-body);
     overflow-x: hidden;
     transition: background-color 0.5s ease, color 0.5s ease;
 }

 #canvas-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     overflow: hidden;
     opacity: 0.8;
     position: fixed;


 }


 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: var(--font-heading);
     text-transform: uppercase;
     letter-spacing: 2px;
 }

 ::-webkit-scrollbar {
     width: 8px;
 }

 ::-webkit-scrollbar-track {
     background: var(--bg-color);
 }

 ::-webkit-scrollbar-thumb {
     background: var(--primary);
     border-radius: 4px;
 }

 .glass-panel {
     background: var(--glass-bg);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     border: 1px solid var(--glass-border);
     box-shadow: var(--glass-shadow);
 }

 /* Nav links ke liye naya premium hover effect */
 .nav-link {
     position: relative;
     color: var(--text-main);
     font-weight: 600;
     transition: color 0.3s ease;
     padding-bottom: 4px;
     /* Underline ke liye space */
 }

 .nav-link::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: 0;
     left: 50%;
     background-color: var(--primary);
     /* Blue underline */
     transition: all 0.3s ease;
     transform: translateX(-50%);
     border-radius: 2px;
 }

 .nav-link:hover::after,
 .nav-link.active-link::after {
     width: 100%;
 }

 .nav-link:hover,
 .nav-link.active-link {
     color: var(--primary);
 }


 .neon-text {
     text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary);
 }

 .neon-border {
     box-shadow: 0 0 15px var(--primary), inset 0 0 15px var(--primary);
 }

 .gradient-text {
     background: var(--gradient-main);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: var(--gradient-main);
 }

 @keyframes float {
     0% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-20px);
     }

     100% {
         transform: translateY(0px);
     }
 }

 @keyframes rotate-3d {
     0% {
         transform: rotateY(0deg);
     }

     100% {
         transform: rotateY(360deg);
     }
 }

 @keyframes pulse-glow {
     0% {
         box-shadow: 0 0 10px var(--primary);
     }

     50% {
         box-shadow: 0 0 30px var(--primary), 0 0 10px var(--secondary);
     }

     100% {
         box-shadow: 0 0 10px var(--primary);
     }
 }

 .animate-float {
     animation: float 6s ease-in-out infinite;
 }

 .animate-pulse-glow {
     animation: pulse-glow 3s infinite;
 }

 @keyframes section-reveal {
     from {
         opacity: 0;
         transform: translate3d(0, 42px, 0) scale(0.98);
     }

     to {
         opacity: 1;
         transform: translate3d(0, 0, 0) scale(1);
     }
 }

 @keyframes section-reveal-left {
     from {
         opacity: 0;
         transform: translate3d(-48px, 24px, 0) scale(0.98);
     }

     to {
         opacity: 1;
         transform: translate3d(0, 0, 0) scale(1);
     }
 }

 @keyframes section-reveal-right {
     from {
         opacity: 0;
         transform: translate3d(48px, 24px, 0) scale(0.98);
     }

     to {
         opacity: 1;
         transform: translate3d(0, 0, 0) scale(1);
     }
 }

 @keyframes media-float-soft {

     0%,
     100% {
         transform: translate3d(0, 0, 0);
     }

     50% {
         transform: translate3d(0, -8px, 0);
     }
 }

 @keyframes orbital-drift {

     0%,
     100% {
         transform: translate3d(0, 0, 0) scale(1);
     }

     50% {
         transform: translate3d(18px, -24px, 0) scale(1.08);
     }
 }

 body::before,
 body::after {
     content: '';
     position: fixed;
     width: 26rem;
     height: 26rem;
     border-radius: 9999px;
     pointer-events: none;
     z-index: -2;
     filter: blur(90px);
     opacity: 0.18;
     mix-blend-mode: screen;
     animation: orbital-drift 14s ease-in-out infinite;
 }

 body::before {
     top: 8%;
     left: -8rem;
     background: radial-gradient(circle, rgba(37, 35, 109, 0.28) 0%, rgba(37, 35, 109, 0) 72%);
 }

 body::after {
     right: -8rem;
     bottom: 12%;
     background: radial-gradient(circle, rgba(216, 161, 10, 0.24) 0%, rgba(216, 161, 10, 0) 72%);
     animation-delay: -7s;
 }

 .sd-reveal {
     opacity: 0;
     transform: translate3d(0, 42px, 0) scale(0.98);
     will-change: transform, opacity;
     transition: opacity 0.2s ease;
 }

 .sd-reveal.sd-reveal-left {
     transform: translate3d(-48px, 24px, 0) scale(0.98);
 }

 .sd-reveal.sd-reveal-right {
     transform: translate3d(48px, 24px, 0) scale(0.98);
 }

 .sd-reveal.is-visible {
     opacity: 1;
     transform: translate3d(0, 0, 0) scale(1);
     animation: section-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
     animation-delay: var(--sd-delay, 0ms);
 }

 .sd-reveal.sd-reveal-left.is-visible {
     animation-name: section-reveal-left;
 }

 .sd-reveal.sd-reveal-right.is-visible {
     animation-name: section-reveal-right;
 }

 .sd-hover-card,
 .sd-hover-button,
 .sd-hover-media {
     transform-style: preserve-3d;
     backface-visibility: hidden;
 }

 .sd-hover-card {
     transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease, background-color 0.45s ease;
 }

 .sd-hover-card:hover {
     transform: translate3d(0, -12px, 0);
     box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
 }

 .sd-hover-card::before {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: inherit;
     pointer-events: none;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 38%, transparent 62%, rgba(255, 255, 255, 0.08));
     opacity: 0;
     transition: opacity 0.45s ease;
 }

 .sd-hover-card:hover::before {
     opacity: 1;
 }

 .sd-hover-media {
     transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
 }

 .sd-hover-card:hover .sd-hover-media {
     transform: scale(1.06);
     filter: saturate(1.08) contrast(1.02);
 }

 .sd-float-soft {
     animation: media-float-soft 6.5s ease-in-out infinite;
 }

 .sd-hover-button {
     transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
 }

 .sd-hover-button:hover {
     transform: translate3d(0, -4px, 0) scale(1.01);
     box-shadow: 0 16px 35px rgba(15, 23, 42, 0.18);
     filter: saturate(1.08);
 }

 @media (prefers-reduced-motion: reduce) {

     *,
     *::before,
     *::after {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }

     .sd-reveal,
     .sd-reveal.is-visible {
         opacity: 1;
         transform: none;
         animation: none;
     }
 }

 .card-3d-container {
     perspective: 1000px;
 }

 .card-3d {
     transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s;
     transform-style: preserve-3d;
 }

 .card-3d:hover {
     transform: rotateX(10deg) rotateY(10deg) translateZ(20px);
     box-shadow: var(--accent-glow);
     border-color: var(--primary);
 }

 .card-content {
     transform: translateZ(30px);
 }

 #canvas-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     overflow: hidden;
     opacity: 0.8;
     position: fixed;
 }

 .theme-panel {
     position: fixed;
     right: 20px;
     top: 50%;
     transform: translateY(-50%);
     z-index: 100;
     display: flex;
     flex-direction: column;
     gap: 10px;
     padding: 10px;
     border-radius: 20px;
 }

 .theme-btn {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     border: 2px solid white;
     cursor: pointer;
     transition: transform 0.3s;
 }

 .theme-btn:hover {
     transform: scale(1.2);
 }

 #loader {
     position: fixed;
     inset: 0;
     background: #000;
     z-index: 9999;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: opacity 0.5s ease;
 }

 .whatsapp-float {
     position: fixed;
     bottom: 45px;
     right: 25px;
     width: 60px;
     height: 60px;
     background: #25D366;
     color: white;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 32px;
     z-index: 99999;
     transition: 0.3s ease;
 }

 .whatsapp-float:hover {
     transform: scale(1.1);
     background: #1ebe5d;
 }

 :root {
     --ticker-bg: #3F51B5;
     --ticker-glow: var(--primary);
     /* Aapki site ka primary color */
 }

 .jordar-ticker-wrap {
     position: relative;
     top: 94px;
     display: flex;
     align-items: center;
     height: 44px;
     background: var(--ticker-bg);
     border-bottom: 2px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
     overflow: hidden;
     z-index: 50;
 }

 /* Background Tech Pattern */
 .jordar-ticker-wrap::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
     background-size: 10px 10px;
     opacity: 0.3;
     pointer-events: none;
 }

 /* 🏷️ The Stylish Label (Left Side) */
 .jordar-badge {
     position: relative;
     background: #f9b404;
     /* Primary to Green Gradient */
     color: #000;
     height: 100%;
     padding: 0 40px 0 20px;
     display: flex;
     align-items: center;
     font-weight: 900;
     font-size: 13px;
     text-transform: uppercase;
     letter-spacing: 1px;
     z-index: 10;
     clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
     /* Futuristic Cut */
     box-shadow: 5px 0 15px rgba(0, 255, 0, 0.4);
 }

 /* Blinking Icon inside Label */
 .jordar-badge i {
     margin-right: 8px;
     font-size: 16px;
     animation: bell-shake 2s infinite;
 }

 /* 📜 Scrolling Text Area */
 .jordar-content {
     flex: 1;
     position: relative;
     overflow: hidden;
     height: 100%;
     display: flex;
     align-items: center;
     mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent);
     /* Fade effect edges */
     -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent);
 }

 .jordar-move {
     display: inline-block;
     white-space: nowrap;
     padding-left: 100%;
     /* Start from outside */
     animation: smooth-scroll 40s linear infinite;
 }

 .jordar-move span {
     display: inline-block;
     color: #e2e8f0;
     font-size: 16px;
     font-weight: 500;
     margin-right: 50px;
     /* Gap between news */
     vertical-align: middle;
 }

 /* Highlighted Words */
 .highlight-neon {
     color: var(--primary);
     font-weight: bold;
     text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
 }

 .tag-new {
     background: #ef4444;
     color: white;
     padding: 2px 6px;
     border-radius: 4px;
     font-size: 10px;
     font-weight: bold;
     margin-right: 5px;
     vertical-align: text-top;
     box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
 }

 /* ✋ Pause on Hover */
 .jordar-content:hover .jordar-move {
     animation-play-state: paused;
     cursor: default;
 }

 /* ===== GLASSMORPHISM DROPDOWN ===== */
 .dropdown-menu {
     visibility: hidden;
     opacity: 0;
     transform: translateY(10px) scale(0.97);
     pointer-events: none;
     position: absolute;
     top: calc(100% + 10px);
     left: 0;
     min-width: 280px;
     border-radius: 20px;
     padding: 12px;
     z-index: 200;
     /* background: rgba(255, 255, 255, 0.25); */
     /* backdrop-filter: blur(30px) saturate(180%); */
     backdrop-filter: blur(30px) saturate(180%);
     -webkit-backdrop-filter: blur(30px) saturate(180%);
     border: 1px solid rgba(255, 255, 255, 0.55);
     box-shadow: 0 20px 60px rgba(37, 35, 109, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
     transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
 }

 .dropdown-menu.open {
     visibility: visible;
     opacity: 1;
     transform: translateY(0) scale(1);
     pointer-events: auto;
     animation: ddPopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
 }

 .dropdown-menu.login-dd {
     left: auto;
     right: 0;
     min-width: 150px;
 }

 @keyframes ddPopIn {
     from {
         opacity: 0;
         transform: translateY(-8px) scale(0.97);
     }

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

 .dd-header {
     font-size: 11px;
     font-weight: 900;
     letter-spacing: 1.5px;
     color: black;
     padding: 0px 0px 2px;
     text-transform: uppercase;
     opacity: 0.9;
 }

 .mega-menu-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 12px;
     border-radius: 12px;
     border: 1px solid transparent;
     text-decoration: none;
     transition: all 0.2s ease;
     margin-bottom: 2px;
 }

 .mega-menu-item:hover {
     background: rgba(255, 255, 255, 0.55);
     border-color: rgba(37, 35, 109, 0.1);
     transform: translateX(4px);
 }

 .mega-icon-box {
     width: 40px;
     height: 40px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     flex-shrink: 0;
     border: 1px solid rgba(255, 255, 255, 0.6);
     transition: all 0.3s ease;
 }

 .mega-menu-item:hover .mega-icon-box {
     transform: scale(1.1) rotate(5deg);
 }

 .mega-text {
     display: flex;
     flex-direction: column;
     gap: 2px;
 }

 .mega-title {
     font-size: 13px;
     font-weight: 700;
     color: #1B1B1B;
 }

 .mega-subtitle {
     font-size: 11px;
     color: #666;
     font-weight: 500;
 }

 .mega-menu-item:hover .mega-title {
     color: #25236D;
 }

 /* Login 2x2 grid */
 .login-grid-d {
     display: grid;
     /* grid-template-columns: 1fr 1fr; */
     gap: 8px;
     padding: 4px;
 }

 .login-card-d {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 5px;
     padding: 4px 2px;
     border-radius: 14px;
     border: 1px solid black;
     background: var(--bg-color);
     text-decoration: none;
     transition: all 0.2s;
 }

 .login-card-d:hover {
     background: rgba(255, 255, 255, 0.65);
     transform: translateY(-2px);
 }

 .login-card-d .lcd-icon {
     width: 40px;
     height: 40px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid rgba(255, 255, 255, 0.6);
 }

 .login-card-d .lcd-name {
     font-size: 11px;
     font-weight: 900;
     color: #1B1B1B;
     text-align: center;
 }

 /* ===== MOBILE MENU ===== */
 #mobile-menu {
     position: fixed;
     top: 0;
     right: 0;
     width: 85%;
     max-width: 340px;
     height: 100vh;
     z-index: 999;
     /* background: rgba(233, 243, 215, 0.97); */
     backdrop-filter: blur(30px) saturate(180%);
     -webkit-backdrop-filter: blur(30px) saturate(180%);
     border-left: 1px solid rgba(255, 255, 255, 0.5);
     box-shadow: -20px 0 60px rgba(37, 35, 109, 0.15);
     transform: translateX(100%);
     transition: transform 0.35s cubic-bezier(0.34, 1.1, 0.64, 1);
     overflow-y: auto;
     padding: 80px 16px 30px;
 }

 #mobile-menu.open {
     transform: translateX(0);
 }

 #mob-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.3);
     z-index: 998;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s;
 }

 #mob-overlay.open {
     opacity: 1;
     pointer-events: auto;
 }

 .ham-btn {
     width: 40px;
     height: 40px;
     border-radius: 10px;
     border: 1.5px solid rgba(37, 35, 109, 0.2);
     background: rgba(255, 255, 255, 0.4);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 5px;
     cursor: pointer;
     transition: all 0.3s;
 }

 .ham-btn.open {
     background: #25236D;
     border-color: #25236D;
 }

 .ham-line {
     width: 18px;
     height: 2px;
     background: #25236D;
     border-radius: 2px;
     transition: all 0.3s;
 }

 .ham-btn.open .ham-line {
     background: #fff;
 }

 .ham-btn.open .ham-line:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
 }

 .ham-btn.open .ham-line:nth-child(2) {
     opacity: 0;
 }

 .ham-btn.open .ham-line:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
 }

 .mob-section-label {
     font-size: 9px;
     font-weight: 900;
     letter-spacing: 2px;
     color: #25236D;
     opacity: 0.5;
     text-transform: uppercase;
     padding: 10px 4px 6px;
 }

 .mob-nav-link {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 11px 14px;
     border-radius: 14px;
     border: #000 solid 2px;
     text-decoration: none;
     transition: all 0.2s;
     cursor: pointer;
     margin-bottom: 4px;
 }

 .mob-nav-link:hover,
 .mob-nav-link.mob-active {
     background: rgba(255, 255, 255, 0.6);
     border-color: rgba(37, 35, 109, 0.1);
 }

 .mob-nav-left {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .mob-nav-icon {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     border: 1px solid rgba(255, 255, 255, 0.6);
 }

 .mob-nav-text {
     font-size: 13px;
     font-weight: 700;
     color: #1B1B1B;
     letter-spacing: 0.3px;
 }

 .mob-nav-arrow {
     font-size: 12px;
     color: #25236D;
     opacity: 0.4;
     transition: transform 0.25s, opacity 0.25s;
 }

 .mob-nav-link.expanded .mob-nav-arrow {
     transform: rotate(90deg);
     opacity: 1;
 }

 .mob-sub {
     display: none;
     margin: 0 0 6px 46px;
     padding: 8px;
     background: rgba(255, 255, 255, 0.4);
     border-radius: 12px;
     border: #000 solid 2px;
     gap: 10px;
     /* ye main gap hai */
 }

 .mob-sub.open {
     display: block;
     animation: mobSubIn 0.2s ease forwards;
 }

 @keyframes mobSubIn {
     from {
         opacity: 0;
         transform: translateY(-6px);
     }

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

 .mob-sub-item {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 10px;
     border-radius: 8px;
     border: #000 solid 2px;
     text-decoration: none;
     transition: background 0.2s;
     margin-bottom: 5px;
 }

 .mob-sub-item:hover {
     background: rgba(37, 35, 109, 0.06);
 }

 .mob-sub-text {
     font-size: 12px;
     font-weight: 600;
     color: #333;
 }

 .mob-divider {
     height: 1px;
     background: rgba(37, 35, 109, 0.07);
     margin: 10px 0;
 }

 .login-grid-m {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 8px;
     padding: 4px 0;
 }

 .login-card-m {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 5px;
     padding: 12px 8px;
     border-radius: 14px;
     border: 1px solid rgba(255, 255, 255, 0.55);
     background: rgba(255, 255, 255, 0.35);
     text-decoration: none;
     transition: all 0.2s;
 }

 .login-card-m:hover {
     background: rgba(255, 255, 255, 0.65);
     transform: translateY(-2px);
 }

 .login-card-m .lcm-name {
     font-size: 11px;
     font-weight: 800;
     color: #1B1B1B;
     text-align: center;
 }

 /* Mobile Tweaks */
 @media (max-width: 768px) {
     .jordar-badge {
         padding: 0 25px 0 10px;
         font-size: 11px;
         min-width: 110px;
     }

     .jordar-move span {
         font-size: 12px;
     }
 }

 /* Side Sticky Button Styles */
 .side-pan-btn {
     position: fixed;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     background: var(--primary);
     /* Yellow color */
     color: #000;
     padding: 20px 10px;
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
     box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3);
     writing-mode: vertical-rl;
     /* Text ko vertical karega */
     text-orientation: mixed;
     font-family: var(--font-heading);
     font-weight: 900;
     letter-spacing: 2px;
     z-index: 1000;
     /* Sabse upar */
     cursor: pointer;
     text-decoration: none;
     transition: all 0.3s ease;
     border: 2px solid white;
     border-right: none;
 }

 .side-pan-btn:hover {
     transform: translateY(-50%) translateX(-5px);
     /* Thoda bahar niklega */
     box-shadow: -4px 0 25px var(--primary);
     background: #fff;
     color: var(--primary);
     border-color: var(--primary);
 }

 .side-pan-btn i {
     transform: rotate(90deg);
     /* Icon ko seedha karne ke liye */
     margin-bottom: 10px;
     font-size: 18px;
 }

 .dd-wrap {
     position: relative;
 }

 /* HOVER OPEN */
 /* .dd-wrap:hover .dropdown-menu {
            visibility: visible;
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        } */

 .mega-menu-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 12px;
     border-radius: 12px;

     /* 🔥 TERA REQUIRED BG */
     background: #ffffff;

     /* 🔥 BORDER */
     border: 2px solid var(--primary);

     text-decoration: none;
     transition: all 0.25s ease;
     margin-bottom: 6px;
 }

 .mega-menu-item:hover {
     background: #aaaec5;
     /* thoda dark version */
     transform: translateX(6px) scale(1.02);

     /* glow */
     box-shadow: 0 5px 20px rgba(37, 35, 109, 0.2);
 }

 /* ===== CUSTOM GLOWING CURSOR ===== */
 .custom-cursor {
     position: fixed;
     top: 0;
     left: 0;
     width: 20px;
     height: 20px;
     border: 2px solid var(--primary);
     border-radius: 50%;
     pointer-events: none;
     /* Clicks block na kare */
     transform: translate(-50%, -50%);
     transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
     z-index: 999999;
     /* Sabse upar rahe */
     mix-blend-mode: difference;
     /* Ekdum pro hacker look */
 }

 .custom-cursor.hovered {
     width: 60px;
     height: 60px;
     background-color: rgba(255, 255, 255, 0.8);
     border-color: transparent;
 }

 /* ===== MAGNETIC BUTTONS ===== */
 .magnetic-btn {
     display: inline-flex;
     transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background 0.4s, box-shadow 0.3s;
     will-change: transform;
 }

 /* ===== SPOTLIGHT CARD EFFECT ===== */
 .spotlight-card {
     position: relative;
     overflow: hidden;
 }

 .spotlight-card::before {
     content: "";
     position: absolute;
     top: var(--y, 0);
     left: var(--x, 0);
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, rgba(0, 243, 255, 0.15) 0%, transparent 70%);
     transform: translate(-50%, -50%);
     opacity: 0;
     transition: opacity 0.3s ease;
     pointer-events: none;
     z-index: 0;
     /* Taaki text ke peeche rahe */
 }

 .spotlight-card:hover::before {
     opacity: 1;
 }

 /* Card ke andar ka content upar laane ke liye */
 .spotlight-card>* {
     position: relative;
     z-index: 1;
 }

 /* ===== SCROLL PROGRESS BAR ===== */
 .scroll-progress-bar {
     position: fixed;
     top: 0;
     left: 0;
     height: 3px;
     background: var(--primary);
     box-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary);
     z-index: 9999999;
     width: 0%;
     /* Default zero rahega */
 }

 /* ===== ABOUT SECTION MINI CARDS ===== */
 .about-mini-card {
     position: relative;
     /* Bouncy transition for hover */
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     overflow: hidden;
     z-index: 1;
     opacity: 0;
     /* Shuru mein invisible rahenge animation ke liye */
     transform: translateY(30px) scale(0.9);
 }

 /* Hover karne par lifting aur glow effect */
 .about-mini-card:hover {
     transform: translateY(-8px) scale(1.05);
     border-color: transparent !important;
     background: rgba(37, 35, 109, 0.05);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 0 15px var(--primary), inset 0 0 10px rgba(37, 35, 109, 0.2);
 }

 /* Icon hover effect */
 .about-mini-card i {
     transition: transform 0.4s ease, filter 0.4s ease;
     display: inline-block;
 }

 .about-mini-card:hover i {
     transform: scale(1.4) translateY(-3px);
     filter: drop-shadow(0 0 8px var(--primary));
 }

 /* Scroll karne par jo wave aayegi uski animation */
 .about-mini-card.show-wave {
     animation: waveDrop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 }

 @keyframes waveDrop {
     to {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }

 /* Desktop me hide */
 .mobile-toggle-btn {
     display: none;
 }

 /* Sirf mobile/tablet me show */
 @media (max-width: 768px) {
     .mobile-toggle-btn {
         display: flex;
         align-items: center;
         justify-content: center;
     }
 }


 /* index.php css start          */

 #hero-title,
 #hero-highlight,
 #hero-subtitle,
 #balance-label,
 #balance-value,
 #txn-label,
 #txn-value {
     transition: opacity 0.3s ease;
 }

 .opacity-0 {
     opacity: 0;
 }

 @media (max-width: 768px) {
     #home .container {
         grid-template-columns: 1fr !important;
     }
 }

 @media (max-width: 768px) {
     #home {
         align-items: flex-start;
         padding-top: 10rem;
     }
 }


 @media (max-width: 768px) {
     .hero-media {
         display: none !important;
     }
 }

 /* Tabs Container Styling */
 .tabs-header {
     display: flex;
     /* overflow-x: auto; */
     gap: 15px;
     padding-bottom: 10px;
     scrollbar-width: none;
     /* Firefox */
     -ms-overflow-style: none;
     /* IE */
     justify-content: center;
     flex-wrap: wrap;
 }

 .tabs-header::-webkit-scrollbar {
     display: none;
     /* Chrome/Safari */
 }

 /* Individual Tab Button */
 .tab-btn {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: #0e0303;
     padding: 12px 25px;
     border-radius: 50px;
     font-weight: 600;
     font-size: 14px;
     cursor: pointer;
     transition: all 0.3s ease;
     white-space: nowrap;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 /* Active Tab Style */
 .tab-btn.active {
     background: var(--primary);
     color: #000;
     box-shadow: 0 0 15px var(--primary);
     border-color: var(--primary);
     transform: scale(1.05);
 }

 .tab-btn:hover:not(.active) {
     background: rgba(255, 255, 255, 0.1);
     color: #fff;
 }

 /* Content Area Animation */
 .tab-content {
     display: none;
     animation: fadeUp 0.6s ease forwards;
 }

 .tab-content.active {
     display: grid;
 }

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

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

 /* Service Card in Grid */
 .svc-card-modern {

     border: 1px solid rgba(255, 255, 255, 0.08);
     padding: 25px;
     border-radius: 16px;
     cursor: pointer;
     border-color: black;
     text-align: center;
     transition: all 0.4s ease;
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(10px);
 }

 .svc-card-modern:hover {
     transform: translateY(-5px);
     border-color: var(--primary);
     background: rgba(15, 23, 42, 0.9);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
 }

 .svc-card-modern i {
     font-size: 28px;
     width: 64px;
     height: 64px;
     line-height: 64px;
     border-radius: 18px;
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.15);
     color: var(--primary);
     margin-bottom: 18px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: all 0.4s ease;
 }


 .svc-card-modern:hover i {
     background: var(--primary);
     color: #000;
     box-shadow: 0 0 25px var(--primary);
 }


 /* Icon BG Glow */
 .svc-card-modern::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, var(--primary) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.4s ease;
     z-index: -1;
 }

 .svc-card-modern:hover::after {
     opacity: 0.1;
 }

 /* 🔥 FIX: Hover pe heading white */
 .svc-card-modern:hover h3 {
     color: #fff;
     text-shadow: 0 0 10px var(--primary);
 }

 .svc-card-modern:hover p {
     color: #e5e7eb;
 }

 .svc-card-modern p {
     color: #374151;
     /* slate-700 – readable on light glass */
     font-weight: 500;
 }

 .svc-card-modern p.text-xs {
     opacity: 2.75;
     margin-top: 10px;
 }

 .svc-card-modern {
     cursor: pointer;
 }

 /* ===== CINEMATIC HERO SLIDER ===== */
 .curtain-l,
 .curtain-r {
     position: absolute;
     top: 0;
     width: 50%;
     height: 100%;
     z-index: 20;
     background: #060810;
     transition: transform 0.75s cubic-bezier(0.86, 0, 0.07, 1)
 }

 .curtain-l {
     left: 0;
     transform: translateX(-100%)
 }

 .curtain-r {
     right: 0;
     transform: translateX(100%)
 }

 .curtain-l.closed {
     transform: translateX(0)
 }

 .curtain-r.closed {
     transform: translateX(0)
 }

 .curtain-l.open {
     transform: translateX(-100%)
 }

 .curtain-r.open {
     transform: translateX(100%)
 }

 .curt-logo {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 21;
     display: flex;
     align-items: center;
     gap: 10px;
     opacity: 0;
     transition: opacity 0.3s;
     pointer-events: none
 }

 .curt-logo.show {
     opacity: 1
 }

 .curt-logo-text {
     font-size: 20px;
     font-weight: 800;
     color: #f59e0b;
     letter-spacing: 0.1em
 }

 .curt-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #f59e0b
 }

 .hero-slide-label {
     position: absolute;
     top: 24px;
     left: 48px;
     z-index: 30;
     font-size: 9px;
     font-weight: 700;
     letter-spacing: 0.2em;
     color: rgba(255, 255, 255, 0.3);
     text-transform: uppercase;
     pointer-events: none
 }

 /* .hero-header-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        align-items: flex-start;
        margin-bottom: 24px;
    } */

 .hero-left-content {
     display: flex;
     flex-direction: column;
     gap: 0;
 }

 .hero-right-content {
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
 }

 .hero-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 14px
 }

 .hero-eyebrow-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #f59e0b;
     transition: background 0.4s
 }

 .hero-eyebrow span {
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.18em;
     color: #25236D;
     text-transform: uppercase
 }

 .hero-line1,
 .hero-line2 {
     font-size: clamp(52px, 8vw, 95px);
     line-height: .92;
     font-weight: 900;
     letter-spacing: -4px;
     font-family: 'Poppins', sans-serif;
 }

 /* First Big Text */
 .hero-line2 {
     color: #25236D;
 }

 /* Highlight Text */
 .hero-line1 {
     color: #f9b506;
     margin-bottom: 3% !important;
 }

 /* Small Subtitle */
 .hero-line3 {
     font-size: clamp(20px, 2vw, 30px);
     font-weight: 700;
     color: #000;
     letter-spacing: 1px;
     margin-top: 12px;
 }

 /* Paragraph Text */
 .hero-tagline {
     font-size: 17px;
     line-height: 1.8;
     color: #000;
     max-width: 560px;
     margin-top: 24px;
     font-weight: 500;
 }

 /* Small Top Label */
 .hero-eyebrow span {
     color: #000;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 3px;
 }

 .hero-cta-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: #25236D;
     color: #fff;
     font-size: 18px;
     font-weight: 800;
     padding: 14px 32px;
     border-radius: 4px;
     border: none;
     cursor: pointer;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     transition: transform 0.2s, background 0.4s
 }

 .hero-cta-btn:hover {
     transform: scale(1.04)
 }

 .hero-divider {
     position: absolute;
     left: 52%;
     top: 15%;
     bottom: 15%;
     width: 1px;
     background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.08) 70%, transparent);
     z-index: 5
 }

 .hero-right-panel {
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     width: 46%;
     z-index: 5;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 28px 36px 28px 20px
 }

 .hero-grid-label {
     font-size: 20px;
     font-weight: 900;
     letter-spacing: 0.15em;
     color: #25236D;
     text-transform: uppercase;
     margin-bottom: 10px
 }

 .hero-svc-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 14px
 }

 .hero-svc-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 5px;
     padding: 16px 6px;
     border-radius: 10px;

     border: 2px solid black;
     cursor: pointer;
     transition: all 0.25s
 }

 .hero-svc-item:hover {
     border-color: rgba(245, 158, 11, 0.45);
     background: rgba(245, 158, 11, 0.07);
     transform: translateY(-2px)
 }

 .hero-svc-item i {
     font-size: 32px;
     color: #25236D;
     transition: color 0.3s
 }

 .hero-svc-item {
     padding: 20px 10px;
 }

 .hero-svc-item span {
     font-size: 14px;
     font-weight: 800;
     color: #333;
     letter-spacing: 0.05em;
     text-align: center;
     text-transform: uppercase
 }

 .hero-counter {
     position: absolute;
     bottom: 22px;
     left: 48px;
     z-index: 10;
     display: flex;
     align-items: center;
     gap: 10px
 }

 .hero-cnum {
     font-size: 13px;
     font-weight: 700;
     color: black;
     letter-spacing: 0.1em
 }

 .hero-ctotal {
     font-size: 11px;
     color: rgba(0, 0, 0, 0.3)
 }

 .hero-pdots {
     display: flex;
     gap: 6px;
     align-items: center
 }

 .hero-pdot {
     height: 3px;
     border-radius: 2px;
     background: rgba(255, 255, 255, 0.2);
     transition: all 0.4s;
     cursor: pointer
 }

 .hero-pdot.act {
     background: #25236D;
     width: 28px
 }

 .hero-pdot:not(.act) {
     width: 8px
 }

 .hero-nav-btns {
     position: absolute;
     bottom: 16px;
     right: 40px;
     z-index: 10;
     display: flex;
     gap: 8px
 }

 .hero-nav-btn {
     width: 52px;
     height: 25px;
     border-radius: 80%;
     border: 2px solid black;
     background: rgba(255, 255, 255, 0.04);
     color: #25236D;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.2s;
     font-size: 14px
 }

 .hero-nav-btn:hover {
     border-color: #25236D;
     background: rgba(37, 35, 109, 0.12)
 }

 .htx {
     transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
         transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
 }

 #heroLine1.in {
     transition-delay: 0.2s;
 }

 #heroLine2.in {
     transition-delay: 0.5s;
 }

 #heroLine3.in {
     transition-delay: 0.8s;
 }

 #heroTagline.in {
     transition-delay: 1.1s;
 }

 #heroCtaBtn.in {
     transition-delay: 1.4s;
 }

 .hero-svc-item {
     opacity: 0;
     transform: translateY(10px);
     animation: none;
 }

 .hero-svc-item.show {
     animation: svcIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 }

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

 @media(max-width:768px) {

     .hero-divider,
     .hero-right-panel {
         display: none !important
     }

     .hero-header-grid {
         grid-template-columns: 1fr !important;
         gap: 15px !important;
     }

     .hero-slide-label {
         left: 20px
     }

     .hero-counter {
         left: 20px
     }

     .hero-nav-btns {
         right: 16px
     }

     #hero-content-area {
         max-width: 100% !important;
         padding: 0 24px !important
     }

     .hero-line1,
     .hero-line2 {
         font-size: 35px !important;
         letter-spacing: revert !important;
     }

     .hero-line3 {
         font-size: 18px !important
     }
 }

 @media (max-width: 768px) {
     #hero-content-area {
         max-width: 100% !important;
         padding: 0 20px !important;
     }

     .hero-line1,
     .hero-line2 {
         font-size: 28px !important;
     }

     .hero-line3 {
         font-size: 18px !important;
     }

     .hero-tagline {
         font-size: 14px !important;
         max-width: 100% !important;
     }
 }

 @media (max-width: 768px) {
     #home {
         padding-bottom: 80px !important;
     }
 }

 @media (max-width: 768px) {
     .hero-counter {
         left: 16px !important;
         bottom: 16px !important;
     }

     .hero-nav-btns {
         right: 12px !important;
         bottom: 12px !important;
     }
 }

 @media (max-width: 768px) {
     #heroBg {
         background: url("../image/mobile-bg.jpg") center/cover no-repeat !important;
     }
 }


 .service-marquee {
     display: inline-block;
     min-width: 100%;
     animation: marqueeScroll 30s linear infinite;
 }

 .service-marquee span {
     display: inline-block;
     padding: 7px 11px;
     margin-right: 6px;

     border: 2px solid black;
     border-radius: 999px;

     background: rgba(255, 255, 255, 0.4);
     backdrop-filter: blur(8px);

     transition: all 0.3s ease;
 }

 .service-marquee span:hover {
     transform: translateY(-4px);
     border-color: var(--primary);
     color: var(--primary);
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
 }

 @keyframes marqueeScroll {
     from {
         transform: translateX(0%);
     }

     to {
         transform: translateX(-50%);
     }
 }



 /* ECOSYSTEM STYLES */


 .sd-eco-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(249, 181, 6, .12);
     border: 1px solid rgba(249, 181, 6, .3);
     border-radius: 30px;
     padding: 6px 18px;
     font-size: 11px;
     font-weight: 800;
     letter-spacing: .15em;
     color: #b8860b;
     text-transform: uppercase;
     margin-bottom: 4px;
 }

 .sd-eco-blink-dot {
     display: inline-block;
     width: 7px;
     height: 7px;
     background: #f9b506;
     border-radius: 50%;
     animation: sdBlink 1.8s ease-in-out infinite;
 }

 @keyframes sdBlink {

     0%,
     100% {
         opacity: 1;
         transform: scale(1)
     }

     50% {
         opacity: .3;
         transform: scale(.6)
     }
 }

 /* ── Stats ── */
 .sd-eco-stats {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
     margin-bottom: 48px;
 }

 .sd-stat-box {
     background: #fff;
     border: 2px solid #ededf5;
     border-radius: 18px;
     padding: 22px 20px;
     text-align: center;
     transition: all .3s;
     cursor: default;
 }

 .sd-stat-box:hover {
     border-color: #25236D;
     transform: translateY(-4px);
     box-shadow: 0 12px 32px rgba(37, 35, 109, .12);
 }

 .sd-stat-num {
     font-size: 34px;
     font-weight: 900;
     color: #25236D;
     line-height: 1;
     font-family: 'Poppins', sans-serif;
 }

 .sd-stat-num sup {
     font-size: 18px;
     color: #f9b506;
     vertical-align: super;
 }

 .sd-stat-lbl {
     font-size: 11px;
     color: #888;
     font-weight: 700;
     margin-top: 8px;
     text-transform: uppercase;
     letter-spacing: .08em;
 }

 /* ── Grid Layout ── */
 .sd-eco-grid {
     display: grid;
     grid-template-columns: 1fr 200px 1fr;
     align-items: center;
     gap: 0;
 }

 .sd-eco-col {
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .sd-eco-left {
     align-items: flex-end;
 }

 .sd-eco-right {
     align-items: flex-start;
 }

 /* ── Service Cards ── */
 .sd-svc-card {
     background: #fff;
     border: 2px solid #ededf5;
     border-radius: 18px;
     padding: 20px 22px;
     width: 100%;
     max-width: 360px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     transition: border-color .3s, box-shadow .3s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
 }

 .sd-svc-card::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 4px;
     background: #25236D;
     border-radius: 18px 0 0 18px;
     transform: scaleY(0);
     transform-origin: bottom;
     transition: transform .3s;
 }

 .sd-svc-card:hover,
 .sd-svc-card.sd-active {
     border-color: #25236D;
     box-shadow: 0 14px 40px rgba(37, 35, 109, .14);
     transform: translateY(-5px) scale(1.01);
 }

 .sd-svc-card:hover::before,
 .sd-svc-card.sd-active::before {
     transform: scaleY(1);
 }

 .sd-svc-arrow {
     position: absolute;
     top: 18px;
     right: 16px;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background: #f4f3fc;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 10px;
     color: #25236D;
     transition: all .3s;
 }

 .sd-svc-card:hover .sd-svc-arrow,
 .sd-svc-card.sd-active .sd-svc-arrow {
     background: #25236D;
     color: #fff;
     transform: rotate(45deg) scale(1.1);
 }

 .sd-svc-header {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 14px;
 }

 .sd-svc-icon {
     width: 48px;
     height: 48px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     flex-shrink: 0;
     transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
 }

 .sd-svc-card:hover .sd-svc-icon {
     transform: rotate(-10deg) scale(1.12);
 }

 .sd-svc-name {
     font-size: 14px;
     font-weight: 800;
     color: #1a1a2e;
     letter-spacing: .02em;
 }

 .sd-svc-cat {
     font-size: 11px;
     color: #999;
     font-weight: 600;
     margin-top: 2px;
 }

 .sd-svc-pills {
     display: flex;
     flex-wrap: wrap;
     gap: 5px;
 }

 .sd-svc-pills span {
     font-size: 10px;
     font-weight: 700;
     padding: 3px 10px;
     border-radius: 20px;
     background: #f4f3fc;
     color: #4a4890;
     border: 1px solid #e4e2f5;
     transition: all .2s;
 }

 .sd-svc-card:hover .sd-svc-pills span,
 .sd-svc-card.sd-active .sd-svc-pills span {
     background: rgba(37, 35, 109, .08);
     border-color: rgba(37, 35, 109, .2);
     color: #25236D;
 }

 /* ── Vertical connectors ── */
 .sd-vconn {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 22px;
     padding: 0 28px;
 }

 .sd-vconn-line {
     width: 2px;
     height: 100%;
     background: linear-gradient(to bottom, rgba(37, 35, 109, .25), rgba(37, 35, 109, .04));
     border-radius: 2px;
     position: relative;
     overflow: hidden;
 }

 .sd-vconn-dot {
     position: absolute;
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #25236D;
     left: -2.5px;
     animation: sdVflow 2.2s ease-in-out infinite;
     opacity: 0;
 }

 @keyframes sdVflow {
     0% {
         top: -10px;
         opacity: 0;
         transform: scale(.5);
     }

     15% {
         opacity: 1;
         transform: scale(1);
     }

     85% {
         opacity: 1;
     }

     100% {
         top: 110%;
         opacity: 0;
         transform: scale(.5);
     }
 }

 /* ── Center Hub ── */
 .sd-hub-wrap {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     position: relative;
     min-height: 420px;
 }

 .sd-hub-ring {
     position: absolute;
     border-radius: 50%;
     border: 1.5px dashed rgba(37, 35, 109, .18);
 }

 .sd-ring1 {
     width: 174px;
     height: 174px;
     animation: sdOrbit 16s linear infinite;
 }

 .sd-ring2 {
     width: 132px;
     height: 132px;
     animation: sdOrbit 10s linear infinite reverse;
     border-style: dotted;
 }

 @keyframes sdOrbit {
     to {
         transform: rotate(360deg);
     }
 }

 .sd-hub-core {
     width: 100px;
     height: 100px;
     border-radius: 26px;
     background: linear-gradient(135deg, #25236D 0%, #3C3AA3 100%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 4px;
     color: #fff;
     z-index: 4;
     position: relative;
     animation: sdHubBeat 3.5s ease-in-out infinite;
 }

 @keyframes sdHubBeat {

     0%,
     100% {
         box-shadow: 0 0 0 10px rgba(37, 35, 109, .08), 0 0 0 22px rgba(37, 35, 109, .04), 0 18px 52px rgba(37, 35, 109, .35);
     }

     50% {
         box-shadow: 0 0 0 16px rgba(37, 35, 109, .05), 0 0 0 32px rgba(37, 35, 109, .02), 0 18px 64px rgba(37, 35, 109, .52);
     }
 }

 .sd-hub-core>i {
     font-size: 32px;
 }

 .sd-hub-lbl {
     font-size: 8px;
     font-weight: 900;
     letter-spacing: .15em;
     line-height: 1.3;
     text-align: center;
     font-family: 'Poppins', sans-serif;
 }

 .sd-hub-badge {
     margin-top: 18px;
     background: #fff;
     border: 2px solid #f9b506;
     border-radius: 30px;
     padding: 6px 16px;
     font-size: 10px;
     font-weight: 800;
     color: #25236D;
     letter-spacing: .05em;
     z-index: 4;
     position: relative;
     box-shadow: 0 4px 16px rgba(249, 181, 6, .25);
 }

 .sd-hub-badge i {
     color: #f9b506;
     margin-right: 4px;
 }

 /* Horizontal beams */
 .sd-hub-beams {
     position: absolute;
     inset: 0;
     pointer-events: none;
     z-index: 1;
 }

 .sd-beam {
     position: absolute;
     height: 2px;
     top: 50%;
     transform: translateY(-50%);
 }

 .sd-beam-left {
     right: 50%;
     left: 0;
     background: linear-gradient(to left, rgba(37, 35, 109, .22), transparent);
 }

 .sd-beam-right {
     left: 50%;
     right: 0;
     background: linear-gradient(to right, rgba(37, 35, 109, .22), transparent);
 }

 .sd-beam-dot {
     position: absolute;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: #f9b506;
     top: -4px;
     animation: sdHflowL 2.4s ease-in-out infinite;
     opacity: 0;
 }

 .sd-beam-dot-rt {
     animation-name: sdHflowR;
 }

 @keyframes sdHflowL {
     0% {
         right: 0;
         opacity: 0
     }

     15% {
         opacity: .9
     }

     85% {
         opacity: .9
     }

     100% {
         right: 100%;
         opacity: 0
     }
 }

 @keyframes sdHflowR {
     0% {
         left: 0;
         opacity: 0
     }

     15% {
         opacity: .9
     }

     85% {
         opacity: .9
     }

     100% {
         left: 100%;
         opacity: 0
     }
 }

 /* ── Bottom 3 cards ── */
 .sd-eco-bottom {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     margin-top: 48px;
 }

 .sd-bot-card {
     background: #fff;
     border: 2px solid #ededf5;
     border-radius: 20px;
     padding: 28px 24px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     transition: border-color .3s, box-shadow .3s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
 }

 .sd-bot-topbar {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(to right, #25236D, #f9b506);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .4s;
 }

 .sd-bot-card:hover .sd-bot-topbar,
 .sd-bot-card.sd-active .sd-bot-topbar {
     transform: scaleX(1);
 }

 .sd-bot-featured .sd-bot-topbar {
     transform: scaleX(1);
 }

 .sd-bot-card:hover,
 .sd-bot-card.sd-active {
     border-color: #25236D;
     transform: translateY(-6px);
     box-shadow: 0 20px 52px rgba(37, 35, 109, .14);
 }

 .sd-bot-featured {
     border-color: #25236D;
     box-shadow: 0 8px 32px rgba(37, 35, 109, .1);
 }

 .sd-bot-badge {
     position: absolute;
     top: 14px;
     right: 14px;
     background: #f9b506;
     color: #1a1a2e;
     font-size: 9px;
     font-weight: 900;
     letter-spacing: .1em;
     padding: 3px 10px;
     border-radius: 20px;
     text-transform: uppercase;
 }

 .sd-bot-icon {
     width: 54px;
     height: 54px;
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     margin-bottom: 16px;
     transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
 }

 .sd-bot-card:hover .sd-bot-icon {
     transform: scale(1.1) rotate(-8deg);
 }

 .sd-bot-title {
     font-size: 15px;
     font-weight: 800;
     color: #1a1a2e;
     margin-bottom: 14px;
 }

 .sd-bot-list {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }

 .sd-bot-list>div {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 12px;
     color: #555;
     font-weight: 500;
 }

 .sd-bot-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #25236D;
     flex-shrink: 0;
     display: inline-block;
 }

 .sd-dot-gold {
     background: #f9b506;
 }

 /* ── Detail Drawer ── */
 .sd-eco-drawer {
     margin-top: 32px;
     background: #25236D;
     border-radius: 22px;
     overflow: hidden;
     display: none;
     position: relative;
     animation: sdDrawerIn .35s cubic-bezier(.4, 0, .2, 1);
 }

 .sd-eco-drawer::before {
     content: '';
     position: absolute;
     top: -80px;
     right: -80px;
     width: 280px;
     height: 280px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .04);
     pointer-events: none;
 }

 .sd-eco-drawer.sd-open {
     display: block;
 }

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

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

 .sd-drawer-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 28px 36px 20px;
 }

 .sd-drawer-left {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .sd-drawer-icon {
     width: 54px;
     height: 54px;
     border-radius: 14px;
     background: rgba(255, 255, 255, .12);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     color: #fff;
     flex-shrink: 0;
 }

 .sd-drawer-title {
     font-size: 20px;
     font-weight: 900;
     color: #fff;
 }

 .sd-drawer-sub {
     font-size: 13px;
     color: rgba(255, 255, 255, .55);
     margin-top: 3px;
 }

 .sd-drawer-close {
     background: rgba(255, 255, 255, .1);
     border: none;
     color: #fff;
     width: 38px;
     height: 38px;
     border-radius: 50%;
     cursor: pointer;
     font-size: 17px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background .2s;
     flex-shrink: 0;
 }

 .sd-drawer-close:hover {
     background: rgba(255, 255, 255, .22);
 }

 .sd-drawer-divider {
     height: 1px;
     background: rgba(255, 255, 255, .1);
     margin: 0 36px;
 }

 .sd-drawer-items {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
     gap: 10px;
     padding: 20px 36px 28px;
 }

 .sd-drawer-item {
     background: rgba(255, 255, 255, .07);
     border: 1px solid rgba(255, 255, 255, .1);
     border-radius: 10px;
     padding: 10px 14px;
     font-size: 12px;
     font-weight: 700;
     color: #fff;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: background .2s;
 }

 .sd-drawer-item:hover {
     background: rgba(255, 255, 255, .13);
 }

 .sd-drawer-item i {
     color: #f9b506;
     font-size: 10px;
 }

 /* ── Responsive ── */
 @media (max-width: 960px) {
     .sd-eco-stats {
         grid-template-columns: repeat(2, 1fr);
     }

     .sd-eco-grid {
         grid-template-columns: 1fr;
         gap: 16px;
     }

     .sd-hub-wrap {
         min-height: auto;
         flex-direction: row;
         justify-content: center;
         gap: 20px;
         order: -1;
     }

     .sd-hub-ring,
     .sd-hub-beams {
         display: none;
     }

     .sd-hub-badge {
         margin-top: 0;
     }

     .sd-eco-left,
     .sd-eco-right {
         align-items: stretch;
     }

     .sd-svc-card {
         max-width: 100%;
     }

     .sd-vconn {
         display: none;
     }

     .sd-eco-bottom {
         grid-template-columns: 1fr;
         gap: 12px;
     }

     .sd-drawer-items {
         grid-template-columns: 1fr 1fr;
     }

     .sd-drawer-head {
         padding: 20px 20px 14px;
     }

     .sd-drawer-items {
         padding: 14px 20px 20px;
     }

     .sd-drawer-divider {
         margin: 0 20px;
     }
 }

 @media (max-width: 480px) {
     .sd-eco-stats {
         grid-template-columns: repeat(2, 1fr);
         gap: 10px;
     }

     .sd-drawer-items {
         grid-template-columns: 1fr;
     }

     .sd-hub-core {
         width: 80px;
         height: 80px;
     }

     .sd-hub-core>i {
         font-size: 26px;
     }
 }

 @media (max-width:768px) {

     #home {
         min-height: 740px !important;
         padding-top: 90px !important;
         align-items: flex-start !important;
     }

     #hero-content-area {
         max-width: 100% !important;
         width: 100% !important;
         padding: 0 18px !important;
         margin-top: 67px !important;
     }

     .hero-header-grid {
         display: block !important;
     }

     .hero-left-content {
         width: 100%;
     }

     .hero-eyebrow {
         margin-bottom: 10px;
     }

     .hero-line1,
     .hero-line2,
     .hero-line3 {
         display: block;
         width: 100%;
         letter-spacing: 3px !important;
         line-height: 1 !important;
         margin: 0 0 8px 0 !important;
         word-break: break-word;
     }

     .hero-line1 {
         font-size: 30px !important;
     }

     .hero-line2 {
         font-size: 32px !important;
     }

     .hero-line3 {
         font-size: 22px !important;
     }

     .hero-tagline {
         font-size: 14px !important;
         line-height: 1.6 !important;
         margin-top: 14px !important;
         max-width: 100% !important;
     }

     .hero-cta-btn {
         margin-top: 18px !important;
         font-size: 15px !important;
         padding: 14px 22px !important;
     }

 }

 @media (max-width:768px) {

     .hero-line1,
     .hero-line2,
     .hero-line3 {
         white-space: normal !important;
     }

 }

 @media (max-width:768px) {
     .footer-links {
         flex-direction: column;
         align-items: center;
         gap: 12px;
     }
 }

 .hero-overlay {
     position: absolute;
     inset: 0;
     z-index: 1;

     background: rgba(255, 255, 255, .72);

     backdrop-filter:
         brightness(.88) saturate(.9);

     pointer-events: none;

     transition: all .4s ease;
 }

 /* =========================
   DARK MODE
========================= */
 /* ================================
   FULL PREMIUM DARK MODE
================================ */

 body.dark-mode {
     background: #050505 !important;
     color: #fff !important;
 }

 /* ===== NAVBAR ===== */

 body.dark-mode nav,
 body.dark-mode #navbar {
     background: rgba(0, 0, 0, .92) !important;
     backdrop-filter: blur(18px);
     border-bottom: 1px solid rgba(255, 255, 255, .06);
 }

 /* nav links */
 body.dark-mode .nav-link {
     color: #fff !important;
 }

 body.dark-mode .nav-link:hover,
 body.dark-mode .nav-link.active-link {
     color: #00e5ff !important;
 }

 /* ===== HERO IMAGE ===== */

 body.dark-mode #heroBg {
     filter: brightness(.58) contrast(1.08);
 }

 /* black cinematic overlay */
 body.dark-mode .hero-overlay {
     position: absolute;
     inset: 0;
     z-index: 1;

     background:
         linear-gradient(90deg,
             rgba(0, 0, 0, .90) 0%,
             rgba(0, 0, 0, .72) 35%,
             rgba(0, 0, 0, .45) 60%,
             rgba(0, 0, 0, .82) 100%);

     pointer-events: none;
 }

 /* content visible */
 body.dark-mode #hero-content-area,
 body.dark-mode .hero-right-panel {
     position: relative;
     z-index: 2;
 }

 /* ===== HERO TEXT ===== */

 body.dark-mode .hero-line1 {
     color: #ffffff !important;
 }

 body.dark-mode .hero-line2 {
     color: #00e5ff !important;
     text-shadow: 0 0 25px rgba(0, 229, 255, .22);
 }

 body.dark-mode .hero-line3,
 body.dark-mode .hero-tagline,
 body.dark-mode .hero-eyebrow span {
     color: #d7d7d7 !important;
 }

 /* ===== BUTTON ===== */

 body.dark-mode .hero-cta-btn {
     background: linear-gradient(135deg, #00c6ff, #0072ff);
     color: #fff;
     border: none;

     box-shadow:
         0 0 20px rgba(0, 229, 255, .22);
 }

 /* ===== SERVICE GRID ===== */

 body.dark-mode .hero-grid-label {
     color: #00e5ff !important;
 }

 body.dark-mode .hero-svc-item {
     background: rgba(12, 12, 12, .58);
     border: 1px solid rgba(255, 255, 255, .08);

     backdrop-filter: blur(12px);
 }

 body.dark-mode .hero-svc-item span {
     color: #fff !important;
 }

 body.dark-mode .hero-svc-item i {
     color: #00e5ff !important;
 }

 body.dark-mode .hero-svc-item:hover {
     border-color: rgba(0, 229, 255, .45);

     box-shadow:
         0 0 25px rgba(0, 229, 255, .12);

     transform: translateY(-4px);
 }

 /* ===== DROPDOWN ===== */

 body.dark-mode .dropdown-menu {
     background: rgba(8, 8, 8, .92) !important;

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

     backdrop-filter: blur(22px);

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

 /* dropdown heading */
 body.dark-mode .dd-header {
     color: #00e5ff !important;
 }

 /* dropdown items */
 body.dark-mode .mega-menu-item {
     background: rgba(255, 255, 255, .03) !important;

     border: 1px solid rgba(255, 255, 255, .06) !important;
 }

 body.dark-mode .mega-menu-item:hover {
     background: rgba(0, 229, 255, .08) !important;

     border-color: rgba(0, 229, 255, .25) !important;

     transform: translateX(6px);
 }

 /* dropdown text */
 body.dark-mode .mega-title {
     color: #fff !important;
 }

 body.dark-mode .mega-subtitle {
     color: rgba(255, 255, 255, .5) !important;
 }

 /* ===== LOGIN BUTTON ===== */

 body.dark-mode .login-btn,
 body.dark-mode .login-card-d {
     background: rgba(15, 15, 15, .92) !important;

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

     color: #fff !important;
 }

 /* ===== MOBILE MENU ===== */

 body.dark-mode #mobile-menu {
     background: rgba(0, 0, 0, .96) !important;
 }

 body.dark-mode .mob-nav-link,
 body.dark-mode .mob-sub,
 body.dark-mode .mob-sub-item {
     background: rgba(255, 255, 255, .03);

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

 body.dark-mode .mob-nav-text,
 body.dark-mode .mob-sub-text {
     color: #fff !important;
 }

 /* ===== CARDS ===== */

 body.dark-mode .sd-svc-card,
 body.dark-mode .sd-bot-card,
 body.dark-mode .about-mini-card,
 body.dark-mode .glass-panel {
     background: rgba(12, 12, 12, .88) !important;

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

     color: #fff !important;

     backdrop-filter: blur(18px);
 }

 body.dark-mode .sd-svc-name,
 body.dark-mode .sd-bot-title {
     color: #fff !important;
 }

 /* ===== FOOTER ===== */

 body.dark-mode footer {
     background: #030303 !important;
     border-top: 1px solid rgba(255, 255, 255, .06);
 }

 /* ===== THEME BUTTON ===== */

 body.dark-mode #themeToggle {
     background: #0f0f0f;
     color: #fff;

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

     box-shadow:
         0 0 20px rgba(0, 229, 255, .18);
 }

 /* =========================
   DARK MODE TEXT FIX
========================= */

 body.dark-mode h1,
 body.dark-mode h2,
 body.dark-mode h3,
 body.dark-mode h4,
 body.dark-mode h5,
 body.dark-mode h6,
 body.dark-mode p,
 body.dark-mode span,
 body.dark-mode li,
 body.dark-mode a {
     color: #ffffff !important;
 }

 /* dim text */
 body.dark-mode .text-gray-600,
 body.dark-mode .text-gray-700,
 body.dark-mode .text-slate-600,
 body.dark-mode .text-slate-700 {
     color: rgba(255, 255, 255, .72) !important;
 }

 /* headings */
 body.dark-mode .gradient-text,
 body.dark-mode .section-title,
 body.dark-mode .hero-line2 {
     color: #00e5ff !important;
     text-shadow: 0 0 20px rgba(0, 229, 255, .18);
 }

 /* yellow small heading */
 body.dark-mode .sd-eco-eyebrow,
 body.dark-mode .section-eyebrow {
     color: #f9b506 !important;
 }

 /* service cards */
 body.dark-mode .sd-svc-name,
 body.dark-mode .sd-bot-title,
 body.dark-mode .svc-title {
     color: #fff !important;
 }

 /* paragraph */
 body.dark-mode .hero-tagline,
 body.dark-mode .section-desc,
 body.dark-mode .sd-svc-cat,
 body.dark-mode .sd-bot-list div {
     color: rgba(255, 255, 255, .72) !important;
 }

 body.dark-mode .sd-svc-card,
 body.dark-mode .sd-bot-card,
 body.dark-mode .about-mini-card,
 body.dark-mode .glass-panel {
     background: rgba(12, 12, 12, .88) !important;
     border: 1px solid rgba(255, 255, 255, .06);
     color: #fff !important;
     backdrop-filter: blur(18px);
 }

 /* =================================
   FINAL DARK MODE FIX
================================= */

 /* GLOBAL TEXT */
 body.dark-mode,
 body.dark-mode p,
 body.dark-mode span,
 body.dark-mode li,
 body.dark-mode a,
 body.dark-mode h1,
 body.dark-mode h2,
 body.dark-mode h3,
 body.dark-mode h4,
 body.dark-mode h5,
 body.dark-mode h6 {
     color: #ffffff !important;
 }

 /* PARAGRAPH */
 body.dark-mode p {
     color: rgba(255, 255, 255, .78) !important;
 }

 /* SECTION TITLES */
 body.dark-mode .section-title,
 body.dark-mode .gradient-text {
     color: #ffffff !important;
 }

 /* SMALL LABELS */
 body.dark-mode .section-eyebrow,
 body.dark-mode .sd-eco-eyebrow {
     color: #f9b506 !important;
 }

 /* FAQ */
 body.dark-mode .faq-item,
 body.dark-mode .accordion-item {
     background: rgba(15, 15, 15, .92) !important;

     border: 1px solid rgba(255, 255, 255, .08) !important;
 }

 body.dark-mode .faq-question,
 body.dark-mode .accordion-title {
     color: #fff !important;
 }

 /* MODAL / POPUP */
 body.dark-mode .modal-content,
 body.dark-mode .popup-box,
 body.dark-mode .service-popup {
     background: #111 !important;

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

     color: #fff !important;
 }

 /* popup text */
 body.dark-mode .modal-content p,
 body.dark-mode .popup-box p {
     color: rgba(255, 255, 255, .72) !important;
 }

 /* popup badges */
 body.dark-mode .feature-badge,
 body.dark-mode .popup-tag {
     background: rgba(255, 255, 255, .06) !important;

     color: #fff !important;

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

 /* ecosystem cards */
 body.dark-mode .sd-svc-card,
 body.dark-mode .sd-bot-card {
     background: rgba(10, 10, 10, .95) !important;

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

     box-shadow: none;
 }

 /* ecosystem text */
 body.dark-mode .sd-svc-name,
 body.dark-mode .sd-bot-title {
     color: #fff !important;
 }

 body.dark-mode .sd-svc-cat,
 body.dark-mode .sd-bot-list div {
     color: rgba(255, 255, 255, .65) !important;
 }

 /* pills */
 body.dark-mode .sd-svc-pills span {
     background: rgba(255, 255, 255, .06) !important;

     color: #fff !important;

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

 /* marquee bottom */
 body.dark-mode .service-marquee span {
     background: rgba(255, 255, 255, .05);

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

     color: #fff !important;
 }

 /* ALL BLACK SECTIONS */
 body.dark-mode section {
     background: #050505 !important;
 }

 /* remove faded opacity */
 body.dark-mode * {
     opacity: 1;
 }

 /* buttons */
 body.dark-mode button,
 body.dark-mode .hero-cta-btn {
     color: #fff !important;
 }

 /* icon visibility */
 body.dark-mode i {
     opacity: 1 !important;
 }

 /* =========================================
   TERMS PAGE DARK MODE
========================================= */

 body.dark-mode {
     background: #050505 !important;
 }

 /* MAIN PANEL */
 body.dark-mode .glass-panel {
     background:
         linear-gradient(145deg,
             rgba(15, 15, 15, .92),
             rgba(8, 8, 8, .96)) !important;

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

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

     backdrop-filter: blur(18px);
 }

 /* ALL TEXT */
 body.dark-mode .glass-panel *,
 body.dark-mode .glass-panel p,
 body.dark-mode .glass-panel span,
 body.dark-mode .glass-panel li {
     color: #e7e7e7 !important;
 }

 /* HEADINGS */
 body.dark-mode .glass-panel h1,
 body.dark-mode .glass-panel h2 {
     color: #ffffff !important;
 }

 /* YELLOW / PRIMARY */
 body.dark-mode .border-\[var\(--primary\)\] {
     border-color: #00e5ff !important;
 }

 /* EMPHASIS BLOCK */
 body.dark-mode .border-l-4 {
     background: rgba(0, 229, 255, .06) !important;

     border-left: 4px solid #00e5ff !important;

     color: #fff !important;
 }

 /* LANGUAGE SWITCHER */
 body.dark-mode .fixed .bg-white\/90 {
     background: rgba(15, 15, 15, .92) !important;

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

     backdrop-filter: blur(14px);
 }

 body.dark-mode .fixed button {
     color: #fff !important;
 }

 body.dark-mode .fixed p {
     color: rgba(255, 255, 255, .65) !important;
 }

 /* CONTACT BOX */
 body.dark-mode .bg-\[rgba\(0\,0\,0\,0\.05\)\] {
     background: rgba(255, 255, 255, .03) !important;

     border: 1px solid rgba(255, 255, 255, .08) !important;
 }

 /* LINKS */
 body.dark-mode a {
     color: #00e5ff !important;
 }

 /* STRONG */
 body.dark-mode strong {
     color: #fff !important;
 }

 /* LIST */
 body.dark-mode ul li {
     color: #dcdcdc !important;
 }

 /* SECTION DIVIDER */
 body.dark-mode .border-gray-400 {
     border-color: rgba(255, 255, 255, .08) !important;
 }

 /* TEXT-BLACK OVERRIDE */
 body.dark-mode .text-black {
     color: #fff !important;
 }

 /* LIGHT BACKGROUND FIX */
 body.dark-mode .bg-white,
 body.dark-mode .bg-white\/60,
 body.dark-mode .bg-white\/30 {
     background: rgba(255, 255, 255, .03) !important;
 }

 /* =========================================
   HANGING BULB THEME TOGGLE (RIGHT SIDE)
========================================= */

 /* Container for the hanging animation */
 .hanging-bulb-container {
     position: fixed;
     top: -5px;
     /* Screen ke ekdum upar se start hoga */
     right: 1%;
     /* Login button ke theek niche alignment ke liye */
     z-index: 99999;
     display: flex;
     flex-direction: column;
     align-items: center;
     transform-origin: top center;
     /* Animation upar se swing karegi */
     animation: bulbSwing 3.5s ease-in-out infinite alternate;
 }

 /* Hover karne par swing ruk jayega taaki click karna aasan ho */
 .hanging-bulb-container:hover {
     animation-play-state: paused;
 }

 /* The rope/string */
 .bulb-wire {
     width: 2px;
     height: 100px;
     /* Rassi ki lambaai */
     background: #1B1B1B;
     box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
     transition: background 0.5s ease;
 }

 /* The bulb holder (metal part) */
 .bulb-base {
     width: 16px;
     height: 12px;
     background: #555;
     border-radius: 3px 3px 0 0;
     margin-top: -1px;
     z-index: 2;
     transition: background 0.5s ease;
 }

 /* The bulb itself (The button) */
 .theme-bulb-btn {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     background: rgba(248, 250, 252, 0.9);
     border: 2px solid var(--primary);
     color: var(--primary);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     cursor: pointer;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), inset 0 -5px 15px rgba(0, 0, 0, 0.05);
     backdrop-filter: blur(5px);
     transition: all 0.4s ease;
     margin-top: -2px;
     z-index: 3;
 }

 /* Click karne par halka sa niche khichega */
 .theme-bulb-btn:active {
     transform: translateY(4px);
 }

 /* =========================================
   DARK MODE STYLES (Bulb ON ho jayega)
========================================= */
 body.dark-mode .bulb-wire {
     background: rgba(255, 255, 255, 0.3);
 }

 body.dark-mode .bulb-base {
     background: #888;
 }

 body.dark-mode .theme-bulb-btn {
     background: #00e5ff;
     /* Neon cyan light */
     border-color: #ffffff;
     color: #000000;
     /* Huge Neon Glow Effect */
     box-shadow:
         0 0 20px #00e5ff,
         0 0 40px #00e5ff,
         0 0 60px #00e5ff,
         inset 0 0 15px rgba(255, 255, 255, 0.8);
 }

 /* Hover on glowing bulb */
 body.dark-mode .theme-bulb-btn:hover {
     box-shadow:
         0 0 25px #00e5ff,
         0 0 50px #00e5ff,
         0 0 80px #00e5ff,
         inset 0 0 20px rgba(255, 255, 255, 1);
 }

 /* Animation for the swinging pendulum motion */
 @keyframes bulbSwing {
     0% {
         transform: rotate(10deg);
     }

     100% {
         transform: rotate(-10deg);
     }
 }

 /* Mobile ke liye rassi choti aur side me set karni hogi */
 @media (max-width: 768px) {
     .hanging-bulb-container {
         right: 35px;
     }

     .bulb-wire {
        
         height: 100px;
     }
     
 }

 /* =========================================
   DARK MODE LOGO SWAP
========================================= */
 /* Default: Dark logo hidden in light mode */
 .logo-dark {
     display: none;
 }

 /* Dark Mode: Light logo hide, Dark logo show */
 body.dark-mode .logo-light {
     display: none;
 }

 body.dark-mode .logo-dark {
     display: block;
 }

 /* =========================================
   PORTAL ICONS DARK MODE FIX
========================================= */

 /* 1. Background circles ko dark mode ke hisaab se thoda dark karna */
 body.dark-mode .portal-card div[class*="bg-"] {
     background: rgba(30, 30, 30, 0.8) !important;
     border-color: rgba(255, 255, 255, 0.1) !important;
 }

 /* 2. Har ek icon ke original colors ko wapas laana (White override hatana) */
 body.dark-mode .portal-card .text-blue-500,
 body.dark-mode .portal-card .text-blue-500 i {
     color: #3b82f6 !important;
 }

 body.dark-mode .portal-card .text-green-500,
 body.dark-mode .portal-card .text-green-500 i {
     color: #22c55e !important;
 }

 body.dark-mode .portal-card .text-purple-500,
 body.dark-mode .portal-card .text-purple-500 i {
     color: #a855f7 !important;
 }

 body.dark-mode .portal-card .text-orange-500,
 body.dark-mode .portal-card .text-orange-500 i {
     color: #f97316 !important;
 }

 body.dark-mode .portal-card .text-indigo-500,
 body.dark-mode .portal-card .text-indigo-500 i {
     color: #6366f1 !important;
 }

 body.dark-mode .portal-card .text-pink-500,
 body.dark-mode .portal-card .text-pink-500 i {
     color: #ec4899 !important;
 }

 body.dark-mode .portal-card .text-teal-500,
 body.dark-mode .portal-card .text-teal-500 i {
     color: #14b8a6 !important;
 }

 body.dark-mode .portal-card .text-cyan-500,
 body.dark-mode .portal-card .text-cyan-500 i {
     color: #06b6d4 !important;
 }

 body.dark-mode .portal-card .text-rose-500,
 body.dark-mode .portal-card .text-rose-500 i {
     color: #f43f5e !important;
 }

 body.dark-mode .portal-card .text-amber-500,
 body.dark-mode .portal-card .text-amber-500 i {
     color: #f59e0b !important;
 }

 body.dark-mode .portal-card .text-red-500,
 body.dark-mode .portal-card .text-red-500 i {
     color: #ef4444 !important;
 }

 body.dark-mode .portal-card .text-emerald-500,
 body.dark-mode .portal-card .text-emerald-500 i {
     color: #10b981 !important;
 }

 /* 3. Hover Effect: Hover karne par background glow karega aur icon white ho jayega */
 body.dark-mode .portal-card:hover div[class*="text-"] {
     background: currentColor !important;
     box-shadow: 0 0 20px currentColor;
 }

 body.dark-mode .portal-card:hover div[class*="text-"] i {
     color: #ffffff !important;
 }

 /* =========================================
   DARK MODE UI FIXES (FAQs, Tabs, Cards)
========================================= */

 /* 1. FAQ Section Fixes */
 body.dark-mode .faq-wrap {
     background: rgba(15, 15, 15, 0.95) !important;
     border: 1px solid rgba(255, 255, 255, 0.1) !important;
 }

 body.dark-mode .faq-trigger {
     background: transparent !important;
     /* Removes the white background */
     color: #ffffff !important;
 }

 body.dark-mode .faq-trigger:hover {
     background: rgba(255, 255, 255, 0.05) !important;
 }

 body.dark-mode .faq-body {
     background: rgba(10, 10, 10, 0.95) !important;
     color: rgba(255, 255, 255, 0.75) !important;
     border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
 }

 /* 2. Services Page Tabs Fix (Retailer, Distributor, White Label) */
 body.dark-mode .bg-white,
 body.dark-mode .bg-gray-50,
 body.dark-mode .bg-gray-100 {
     background-color: rgba(25, 25, 25, 0.9) !important;
     color: #ffffff !important;
     border-color: rgba(255, 255, 255, 0.1) !important;
 }

 /* Fix for Active/Highlighted Tabs */
 body.dark-mode .active,
 body.dark-mode .tab-active,
 body.dark-mode button[style*="background: white"],
 body.dark-mode div[style*="background: white"] {
     background: rgba(0, 229, 255, 0.1) !important;
     /* Neon cyan tint */
     border-color: #00e5ff !important;
     color: #00e5ff !important;
     box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.1);
 }

 /* 3. Text Visibility Fixes (About Page & Others) */
 body.dark-mode .text-gray-900,
 body.dark-mode .text-gray-800,
 body.dark-mode .text-black {
     color: #ffffff !important;
 }

 /* Subtitles and smaller text */
 body.dark-mode .text-gray-600,
 body.dark-mode .text-gray-500 {
     color: rgba(255, 255, 255, 0.65) !important;
 }

 /* Impact Cards Fix */
 body.dark-mode .border-black {
     border-color: rgba(255, 255, 255, 0.15) !important;
 }

 /* =========================================
   EXPERTISE POPUP MODAL DARK MODE FIX
========================================= */

/* 1. Modal Box Background */
body.dark-mode #modalBox {
    background: rgba(20, 20, 20, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8) !important;
}

/* 2. Main Title & Description Text */
body.dark-mode #modalTitle {
    color: #ffffff !important;
}

body.dark-mode #modalDesc {
    color: rgba(255, 255, 255, 0.75) !important;
}


/* 3. Features List Items (Grid Boxes) */
body.dark-mode #modalFeatures > div {
    background: rgba(255, 255, 255, 0.05) !important; /* Dark grey instead of bright white */
}

/* 4. Features List Text */
body.dark-mode #modalFeatures > div span {
    color: #e5e7eb !important; /* Light grey/white text */
}

/* 5. Close Button (X) */
body.dark-mode #modalBox button {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

body.dark-mode #modalBox button:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* =========================================
   API PAGE / DMT POPUP FEATURE BOXES FIX
========================================= */

/* Modal ke andar wale sabhi white/grey boxes ko dark grey glass effect dena */
body.dark-mode div[class*="fixed inset-0"] .bg-white,
body.dark-mode div[class*="fixed inset-0"] .bg-gray-50,
body.dark-mode div[style*="position: fixed"] .bg-white,
body.dark-mode div[style*="position:fixed"] .bg-white {
    background-color: rgba(30, 30, 30, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5) !important;
}

/* Un boxes ke andar ka text ekdum saaf aur bright white karna */
body.dark-mode div[class*="fixed inset-0"] .bg-white *,
body.dark-mode div[class*="fixed inset-0"] .bg-gray-50 *,
body.dark-mode div[style*="position: fixed"] .bg-white * {
    color: #e5e7eb !important;
}

/* Agar un boxes mein koi checkmark icon hai, toh use neon cyan glow dena */
body.dark-mode div[class*="fixed inset-0"] .bg-white i,
body.dark-mode div[style*="position: fixed"] .bg-white i {
    color: #00e5ff !important;
}

/* Niche wale hare (Green) "Get Started" button ko safe rakhna */
body.dark-mode div[class*="fixed inset-0"] .bg-green-500,
body.dark-mode div[class*="fixed inset-0"] .bg-green-500 * {
    background-color: #22c55e !important;
    color: #ffffff !important;
    border: none !important;
}

/* =========================================
   ABOUT PAGE - LIVE NOTIFICATION TOAST FIX
========================================= */

/* Toast popup ka background dark glass effect karna */
body.dark-mode .live-toast {
    background: rgba(20, 20, 20, 0.95) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
}

/* Toast ke andar ka title text (safed aur bright) */
body.dark-mode .live-toast .text-black {
    color: #ffffff !important;
    text-shadow: 0 0 5px rgba(255,255,255,0.2) !important;
}

/* Toast ke andar ka message text (halka grey) */
body.dark-mode .live-toast .text-gray-600 {
    color: #cbd5e1 !important; 
}

/* 1. API PAGE - SERVICE MODAL FIX (Overriding Inline JS Styles) */
body.dark-mode #modalBox {
    background: #111111 !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8) !important;
}

body.dark-mode #modalTitle {
    color: #ffffff !important;
}

body.dark-mode #modalDesc {
    color: #cbd5e1 !important; /* Light grey text */
}

/* Modal ke andar ki list items (Jo JS se safed generate ho rahi thi) */
body.dark-mode #modalFeatures li {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Close button (X) ka dark look */
body.dark-mode #modalBox > button {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}
body.dark-mode #modalBox > button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* =========================================
   VIBRATION & JITTER FIX (MUST BE AT BOTTOM)
========================================= */

/* 1. Spotlight Effect Fix: Sirf zaroori cheezein animate hongi, --x aur --y nahi */
.spotlight-card, 
.svc-card-modern, 
.portal-card,
.team-card {
    transition-property: background-color, border-color, color, box-shadow, transform !important;
    /* Hardware Acceleration on karein taaki rendering smooth ho */
    transform: translateZ(0) !important; 
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 2. Spotlight background strictly sirf opacity animate karega */
.spotlight-card::before {
    transition: opacity 0.3s ease !important;
}

/* 3. Hit-box Stabilizer: Card hilega toh bhi cursor border se bahar nahi jayega */
.spotlight-card::after, 
.team-card::after {
    content: '';
    position: absolute;
    inset: -30px; /* Card ke chaaron taraf 30px ka invisible area */
    background: transparent;
    z-index: 1; /* Cursor hover isko pakad lega */
}