/* ----------------------------------------------------
   Test Darpan - Flagship Single Page (inline)
   Palette from logo:
   Navy: #0A2F6B
   Orange: #F26522
   Yellow: #FFD23F
   ---------------------------------------------------- */

 :root {
     --navy: #0a2f6b;
     --orange: #f26522;
     --yellow: #ffd23f;
     --bg: #f6f8fb;
     --surface: #fff;
     --muted: #6b7280;
     --glass: rgba(255, 255, 255, 0.65);
     --glass-strong: rgba(255, 255, 255, 0.85);
     --card-shadow: 0 14px 40px rgba(11, 20, 40, 0.08);
     --accent-grad: linear-gradient(90deg, var(--orange), var(--navy));
     --radius-lg: 14px;
     --radius-md: 10px;
     --max-width: 1200px;
     font-synthesis: none;
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html,
 body {
     height: 100%;
     margin: 0;
     background: var(--bg);
     color: #0b1b2b;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     width: 100%;
     max-width: 100%;
 }

 html {
     -webkit-text-size-adjust: 100%;
     /* prevents iOS font auto-scaling */
 }

 body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 section,
 header,
 footer {
     max-width: 100%;
     overflow-x: clip;
 }

 /* Ensure all layout containers fit properly */
 .container,
 .container-fluid,
 .container-xl,
 .row {
     max-width: 100%;
     overflow-x: clip;
 }

 /* premium header css */
 .premium-header-bar {
     background: linear-gradient(135deg, #fe6600 0%, #ff7a3a 100%);
     padding: 4px 0;
     position: relative;
     overflow: hidden;
     box-shadow: 0 2px 20px rgba(254, 102, 0, 0.15);
     margin-top: 80px;
 }

 /* Base styles remain unchanged for desktop/tablet */

 /* Responsive styling for ≤576px */
 @media (max-width: 576px) {
     .premium-header-bar {
         font-size: 13px;
         padding: 6px 0;
     }

     .premium-header-bar .header-content {
         flex-direction: row;
         align-items: center;
         text-align: center;
         gap: 8px;
     }

     .premium-header-bar .header-left,
     .premium-header-bar .header-right {
         flex-direction: column;
         align-items: center;
         gap: 6px;
     }

     .premium-header-bar .offer-text {
         white-space: nowrap;
         word-break: normal;
     }

     .premium-header-bar .offer-text> :first-child {
         display: none;
     }

     .premium-header-bar .pulse-badge i,
     .premium-header-bar .support-block i,
     .premium-header-bar .action-buttons i {
         font-size: 12px;
         margin-right: 4px;
     }

     .premium-header-bar .pulse-badge span,
     .premium-header-bar .offer-text,
     .premium-header-bar .support-text span {
         font-size: 12px;
         line-height: 1.2;
     }

     .premium-header-bar .action-buttons {
         display: flex;
         /* flex-wrap: wrap; */
         justify-content: center;
         gap: 6px;
     }

     .premium-header-bar .support-text,
     .premium-header-bar i {
         display: none;
     }

     .premium-header-bar .btn-glass,
     .premium-header-bar .btn-glass.outline {
         font-size: 12px;
         padding: 4px 8px;
         border-radius: 6px;
     }

     .premium-header-bar .countdown {
         font-size: 11px;
         margin-top: 2px;
     }
 }

 .premium-header-bar::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: radial-gradient(circle at 30% 50%,
             rgba(255, 255, 255, 0.1) 0%,
             transparent 50%);
 }

 .header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: relative;
     z-index: 1;
 }

 .header-left {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .pulse-badge {
     display: flex;
     align-items: center;
     gap: 8px;
     background: rgba(255, 255, 255, 0.15);
     padding: 6px 12px;
     border-radius: 99px;
     font-weight: 600;
     font-size: 14px;
     color: #fff;
     animation: pulse 2s infinite;
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }

     100% {
         transform: scale(1);
     }
 }

 .offer-text {
     color: #fff;
     font-weight: 600;
     font-size: 14px;
 }

 .countdown {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.9);
     /* margin-top: 2px; */
 }

 .header-right {
     display: flex;
     align-items: center;
     gap: 24px;
 }

 .support-block {
     display: flex;
     align-items: center;
     gap: 10px;
     padding-right: 24px;
     border-right: 1px solid rgba(255, 255, 255, 0.2);
 }

 .support-block i {
     font-size: 20px;
     color: #fff;
 }

 .support-text {
     display: flex;
     flex-direction: column;
 }

 .support-text span {
     font-size: 12px;
     color: rgba(255, 255, 255, 0.9);
 }

 .phone-link {
     color: #fff;
     font-weight: 600;
     text-decoration: none;
     font-size: 14px;
     transition: all 0.3s ease;
 }

 .phone-link:hover {
     color: rgba(255, 255, 255, 0.9);
     transform: translateX(3px);
 }

 .action-buttons {
     display: flex;
     gap: 12px;
 }

 .btn-glass {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 6px 12px;
     border-radius: 8px;
     font-size: 14px;
     font-weight: 600;
     color: #fff;
     text-decoration: none;
     transition: all 0.3s ease;
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(5px);
 }

 .btn-glass:hover {
     transform: translateY(-2px);
     background: rgba(255, 255, 255, 0.2);
     color: #fff;
 }

 .btn-glass.outline {
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.3);
 }

 .btn-glass.outline:hover {
     background: rgba(255, 255, 255, 0.1);
 }

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

     /* Left section - center aligned */
     .header-left {
         display: flex;
         align-items: center;
         justify-content: center;
         flex-wrap: wrap;
         /* so text wraps neatly if too long */
         gap: 8px;
         text-align: center;
     }

     .pulse-badge {
         display: flex;
         align-items: center;
         gap: 6px;
         background: rgba(255, 255, 255, 0.15);
         padding: 5px 10px;
         border-radius: 50px;
         font-weight: 600;
         font-size: 13px;
         color: #fff;
         animation: pulse 2s infinite;
         white-space: nowrap;
     }

     .offer-text {
         color: #fff;
         font-size: 13px;
         font-weight: 600;
         display: flex;
         align-items: center;
         gap: 6px;
         white-space: nowrap;
     }

     .countdown {
         font-size: 12px;
         color: rgba(255, 255, 255, 0.9);
         white-space: nowrap;
     }

     /* Expert support center aligned */
     .header-right {
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 10px;
     }

     /* Centered Expert Support */
     .support-block {
         justify-content: center;
         border: none;
         padding: 0;
         margin: 0;
     }

     .support-text span {
         font-size: 12px;
     }

     .phone-link {
         font-size: 13px;
     }

     /* Buttons side by side in center */
     .action-buttons {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 10px;
         width: 100%;
     }

     .btn-glass {
         flex: none;
         padding: 8px 14px;
         font-size: 13px;
         border-radius: 6px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 6px;
         min-width: 120px;
     }

     .btn-glass span {
         white-space: nowrap;
     }

     .btn-glass.outline {
         background: transparent;
     }
 }

 /* Fix hero backdrop overflowing beyond viewport */
 .hero-backdrop,
 .gradient-sphere,
 .mesh-grid,
 .floating-particles,
 canvas#particles {
     overflow: hidden;
     max-width: 100%;
     left: 0;
     right: 0;
     position: absolute;
 }

 /* Fix for quick stat section icons/cards */
 .quick-stat-card {
     max-width: 100%;
     overflow: hidden;
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 .container-xl {
     max-width: var(--max-width);
     padding-left: 20px;
     padding-right: 20px;
     margin: 0 auto;
 }

 /* NAVBAR CSS */
 .navbar {
     padding: 0px 0;
     transition:
         background 0.25s ease,
         box-shadow 0.25s ease,
         transform 0.25s ease;
     backdrop-filter: blur(6px);
 }

 .navbar.scrolled {
     background: rgba(255, 255, 255, 0.7);
     box-shadow: 0 6px 24px rgba(11, 20, 40, 0.06);
 }

 .brand-block {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .logo-sm {
     width: 200px;
     height: auto;
 }

 .brand-title {
     font-weight: 700;
     font-size: 15px;
     color: var(--navy);
 }

 .brand-sub {
     font-size: 11px;
     color: var(--muted);
     margin-top: 2px;
 }

 .navbar {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     padding: 0.1px 0;
     transition: all 0.3s ease;
     border-bottom: 1px solid rgba(10, 47, 107, 0.08);
 }

 .navbar.scrolled {
     padding: 1px 0;
     box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
 }

 .logo-sm {
     height: 68px;
     width: auto;
 }

 .navbar-nav {
     gap: 10px;
 }

 .nav-link {
     color: var(--navy);
     font-weight: 500;
     position: relative;
     padding: 8px 15px;
     transition: all 0.3s ease;
 }

 .nav-link::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 50%;
     width: 0;
     height: 2px;
     background: var(--orange);
     transition: all 0.3s ease;
     transform: translateX(-50%);
 }

 .nav-link:hover::after {
     width: 80%;
 }

 .signup-btn {
     background: linear-gradient(45deg, var(--orange), #ff7a3a);
     border: none;
     padding: 8px 20px;
     border-radius: 8px;
     color: white;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: all 0.3s ease;
 }

 .signup-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(242, 101, 34, 0.15);
 }

 .navbar-toggler {
     border: none;
     padding: 0;
     width: 40px;
     height: 40px;
     border-radius: 8px;
     background: rgba(242, 101, 34, 0.1);
     color: var(--orange);
 }

 @media (max-width: 991px) {
     .navbar-nav {
         padding: 20px 0;
     }

     .nav-link::after {
         display: none;
     }

     .signup-btn {
         margin-top: 10px;
         justify-content: center;
     }
 }

 .hero {
     display: flex;
     align-items: center;
     padding: 40px 0;
     height: 70vh;
     position: relative;
     overflow: hidden;
     color: #fff;
     background:
         radial-gradient(1200px 700px at 10% 10%, rgba(10, 47, 107, 0.2), transparent 60%),
         radial-gradient(1000px 500px at 95% 85%, rgba(242, 101, 34, 0.15), transparent 60%),
         linear-gradient(135deg, #0a2f6b, #2f4da0 40%, #284897);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }

 .hero-inner {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     position: relative;
     z-index: 2;
     padding: 0 20px;
 }

 .hero-backdrop {
     position: absolute;
     inset: 0;
     z-index: 1;
     pointer-events: none;
 }

 .gradient-sphere {
     position: absolute;
     width: 45vw;
     height: 45vw;
     max-width: 600px;
     max-height: 600px;
     background: radial-gradient(circle, rgba(255, 81, 0, 0.15), transparent 70%);
     top: -10%;
     right: -10%;
     border-radius: 50%;
     animation: sphereFloat 20s infinite ease-in-out;
 }

 .floating-particles {
     position: absolute;
     inset: 0;
     background-image: radial-gradient(circle, #fff 1px, transparent 1px);
     background-size: 40px 40px;
     opacity: 0.08;
     animation: particleFloat 25s infinite linear;
 }

 .mesh-grid {
     position: absolute;
     inset: 0;
     background-image:
         linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
     background-size: 50px 50px;
     animation: meshFloat 15s infinite linear;
 }

 .hero-title {
     font-size: clamp(2rem, 4vw, 2.7rem);
     line-height: 1.2;
     font-weight: 800;
     color: #fff;
     letter-spacing: -0.5px;
     margin-bottom: 25px;
 }

 .gradient-text {
     background: linear-gradient(45deg, #ff7c25, #ffbf00);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     display: inline-block;
 }

 /* --- SCROLLABLE CONTAINER (Desktop optimization for 75vh) --- */
 .scrollable-checkbox-container {
     max-height: 35vh;
     /* Fixed percentage height taaki 75vh ke andar hi scroll kare */
     min-height: 258px;
     overflow-y: auto;
     overflow-x: hidden;
     padding-right: 8px;
     scrollbar-width: none;
     -ms-overflow-style: none;
 }

 /* Premium Hidden/Custom Scrollbar Design */
 .scrollable-checkbox-container::-webkit-scrollbar {
     width: 6px;
 }

 .scrollable-checkbox-container::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
 }

 .scrollable-checkbox-container::-webkit-scrollbar-thumb {
     background: rgba(255, 124, 37, 0.4);
     border-radius: 10px;
 }

 .scrollable-checkbox-container::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 124, 37, 0.8);
 }

 @media (min-width: 768px) {
     .sticky-image-sidebar {
         position: sticky;
         top: 5px;
         z-index: 10;
     }
 }

 .custom-premium-check {
     display: flex;
     align-items: center;
     gap: 12px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.08);
     padding: 12px 16px;
     /* Dynamic breathing space */
     margin-bottom: 10px;
     /* Spacing between cards */
     border-radius: 14px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }

 .custom-premium-check:hover {
     background: rgba(255, 255, 255, 0.12);
     border-color: rgba(255, 124, 37, 0.6);
     transform: translateX(6px);
 }

 .check-icon-box {
     color: #ff7c25;
     font-size: 1.25rem;
     display: flex;
     align-items: center;
     flex-shrink: 0;
 }

 .check-text {
     color: #e5e7eb;
     font-size: clamp(0.9rem, 1.5vw, 1rem);
     font-weight: 500;
 }

 /* ==========================================================================
   FEATURE IMAGE CONTAINER (LEFT ROW SIDE)
   ========================================================================== */
 .feature-img-wrapper {
     overflow: hidden;
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, 0.12);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     height: 100%;
 }

 .feature-img-wrapper img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .feature-img-wrapper:hover img {
     transform: scale(1.06);
 }

 .image-overlay-glow {
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at center, rgba(255, 124, 37, 0.15), transparent 75%);
     pointer-events: none;
 }

 .showcase-card {
     background: rgba(10, 47, 107, 0.4);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 24px;
     overflow: hidden;
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
     transition: all 0.4s ease;
     height: 100%;
     /* Parent column height maintain karega */
     display: flex;
     flex-direction: column;
 }

 .showcase-img-container {
     flex: 1;
     min-height: 200px;
     overflow: hidden;
 }

 .showcase-img-container img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: fill;
 }

 .showcase-content {
     padding: 24px 20px;
     background: linear-gradient(180deg, rgba(23, 58, 115, 0.3) 0%, rgba(10, 47, 107, 0.8) 100%);
     border-top: 1px solid rgba(255, 255, 255, 0.08);
 }

 .showcase-title {
     color: #ff8330;
     font-size: clamp(1.2rem, 2vw, 1.45rem);
     font-weight: 700;
     margin-bottom: 8px;
 }

 .showcase-desc {
     color: #d1d5db;
     font-size: 0.95rem;
     line-height: 1.5;
     margin: 0;
 }

 /* ==========================================================================
   ANIMATIONS KEYFRAMES
   ========================================================================== */
 @keyframes sphereFloat {

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

     50% {
         transform: translate(-40px, 30px) scale(1.05);
     }
 }

 @keyframes particleFloat {
     from {
         transform: translateY(0);
     }

     to {
         transform: translateY(-100px);
     }
 }

 @keyframes meshFloat {
     from {
         background-position: 0 0;
     }

     to {
         background-position: 50px 50px;
     }
 }

 /* ==========================================================================
   ULTRA-RESPONSIVE BREAKPOINTS (Fully Fixed)
   ========================================================================== */

 /* Laptop & Desktop Screens */
 @media (min-width: 992px) {
     .feature-img-wrapper img {
         height: 39vh;
         /* Checkbox section ke layout se match karega */
     }
 }

 /* Tablets / iPad (991px and below) */
 @media (max-width: 991px) {
     .hero {
         height: auto;
         /* Tablets/Mobiles me 75vh layout compress karega, isliye 'auto' standard hai */
         padding: 80px 0;
     }

     .hero-title {
         text-align: center;
         margin-bottom: 2rem;
     }

     .scrollable-checkbox-container {
         max-height: 300px;
     }

     .showcase-card {
         max-width: 650px;
         margin: 30px auto 0 auto;
     }

     .showcase-img-container img {
         height: 350px;
     }
 }

 /* Mobile Devices (Below 767px) */
 @media (max-width: 767px) {
     .hero {
         padding: 60px 0;
     }

     .feature-img-wrapper img {
         height: 250px;
     }

     .showcase-img-container img {
         height: 280px;
     }
 }

 @media (max-width: 575px) {
     .hero {
         padding: 40px 0;
     }

     .hero-title {
         text-align: left;
     }

     .custom-premium-check {
         padding: 12px 14px;
         border-radius: 10px;
     }

     .custom-premium-check:hover {
         transform: translateX(3px);
     }

     .showcase-img-container img {
         height: 240px;
     }

     .showcase-content {
         padding: 18px;
     }
 }

 /* ============ mend hero section========== */


 /* Sections */
 .section {
     padding: 72px 0;
     position: relative;
     z-index: 2;
 }

 .section .section-head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 12px;
     margin-bottom: 22px;
 }

 .section h2 {
     font-size: 28px;
     margin: 0;
     font-weight: 800;
     color: var(--navy);
 }

 .section p.lead-muted {
     color: var(--muted);
     margin: 0;
 }

 /* EXAMS grid */
 .exams-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 22px;
     margin-top: 14px;
 }

 .exam-card {
     background: var(--surface);
     border-radius: 12px;
     padding: 18px;
     box-shadow: var(--card-shadow);
     transition:
         transform 0.25s ease,
         box-shadow 0.25s ease;
     border: 1px solid rgba(12, 20, 40, 0.03);
 }

 .exam-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 34px 80px rgba(12, 20, 40, 0.09);
 }

 .exam-icon {
     width: 64px;
     height: 64px;
     border-radius: 10px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-weight: 800;
     margin-bottom: 12px;
 }

 .icon-scc {
     background: linear-gradient(90deg, var(--navy), #254a93);
 }

 .icon-rail {
     background: linear-gradient(90deg, var(--orange), #f59b6f);
 }

 .icon-bank {
     background: linear-gradient(90deg, #ff9e4a, #ffb86b);
 }

 .icon-jee {
     background: linear-gradient(90deg, #203d87, #7b55ff);
 }

 .icon-neet {
     background: linear-gradient(90deg, #ffd23f, #ffb86b);
 }

 /* exam we cover  container */
 #exams {
     --ex-gap: 20px;
     --card-shadow: 0 12px 30px rgba(11, 20, 40, 0.06);
 }

 .ex-carousel {
     position: relative;
 }

 .ex-carousel-viewport {
     overflow: hidden;
     width: 100%;
     border-radius: 14px;
 }

 .ex-carousel-track {
     display: flex;
     align-items: stretch;
     gap: var(--ex-gap);
     transition: transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
     will-change: transform;
 }

 /* individual card */
 .exam-card {
     background: #fff;
     border-radius: 12px;
     /* overflow: hidden; */
     box-shadow: var(--card-shadow);
     min-height: 320px;
     display: flex;
     flex-direction: column;
 }

 .exam-thumb {
     width: 100%;
     height: 164px;
     object-fit: cover;
     display: block;
 }

 .exam-body {
     padding: 15px;
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .exam-body h6 {
     margin: 0 0 8px 0;
     font-weight: 700;
     color: #0a2f6b;
 }

 .exam-body p {
     margin: 0 0 12px 0;
 }

 /* controls & dots */
 .ex-carousel-controls {
     padding: 6px 8px;
 }

 .ex-carousel-dots {
     display: flex;
     gap: 10px;
     align-items: center;
     background-color: #f9a166;
     border: 2px solid #fe6600;
     padding: 6px 12px;
     border-radius: 16px;
 }

 .ex-carousel-dots button {
     width: 15px;
     height: 15px;
     border-radius: 50%;
     border: 2px solid rgb(255, 255, 255);
     background: #ffffff;
     box-shadow: 0 6px 18px rgba(10, 47, 107, 0.05);
     transition: all 0.28s ease;
 }

 .ex-carousel-dots button.active {
     border-color: var(--accent-color, #173a73);
     box-shadow: 0 8px 24px rgba(23, 58, 115, 0.14);
     transform: scale(1.08);
 }

 .ex-prev,
 .ex-next {
     width: 44px;
     height: 44px;
     border-radius: 999px;
     border: 1px solid rgba(10, 47, 107, 0.06);
     background: #fff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 10px 30px rgba(15, 23, 40, 0.06);
     transition:
         transform 0.18s ease,
         box-shadow 0.18s ease;
 }

 .ex-prev:hover,
 .ex-next:hover {
     transform: translateY(-3px);
     box-shadow: 0 18px 40px rgba(15, 23, 40, 0.09);
 }

 /* responsive: cards show count handled by JS, fallback CSS */
 @media (max-width: 767.98px) {
     .exam-thumb {
         height: 220px;
     }

     .exam-card {
         min-height: 260px;
     }

     .ex-carousel-dots {
         justify-content: center;
         width: auto;
     }

     .ex-carousel-controls {
         /* flex-direction: column; */
         gap: 8px;
     }
 }

 /* exam cover material popup */
 .bottom-right-modal .modal-dialog {
     position: fixed;
     right: 20px;
     bottom: -80px;
     margin: 0;
     width: 100%;
     max-width: 600px;
     opacity: 0;
     transform: translateY(80px);
     transition: all 0.55s cubic-bezier(0.19, 1, 0.22, 1);
     z-index: 99999 !important;
     pointer-events: none;
 }

 .bottom-right-modal.show .modal-dialog {
     bottom: 20px;
     opacity: 1;
     transform: translateY(0);
     pointer-events: auto;
 }

 .modal-backdrop.show {
     opacity: 0.4;
 }

 .modal-backdrop {
     display: none !important;
 }

 /* Add optional subtle overlay for clarity */
 body.modal-open::before {
     content: "";
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.15);
     z-index: 99990;
     pointer-events: none;
 }

 /* model content  */
 .bottom-right-modal .modal-content {
     border-radius: 14px;
     overflow: hidden;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
     background-color: #fff;
     z-index: 99999;
 }

 #materialsModal .modal-body {
     max-height: 350px;
     overflow-y: auto;
     scrollbar-width: thin;
 }

 /* Chrome ke liye smooth thin scroll */
 #materialsModal .modal-body::-webkit-scrollbar {
     width: 6px;
 }

 #materialsModal .modal-body::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 10px;
 }

 /* Mobile: full width and stick to bottom */
 @media (max-width: 576px) {
     .hero-title h1 {
         font-family: "Arial Black", sans-serif !important;
         font-weight: 800 !important;
         word-spacing: 5px !important;
     }

     .gradient-sphere {
         width: 400px;
         height: 400px;
         top: -100px;
         right: -150px;
     }

     .hero-backdrop {
         background-color: #2d379b;
     }

     .bottom-right-modal .modal-dialog {
         max-width: 100%;
         width: 90%;
         border-radius: 0;
         transform: translateY(100%);
     }

     #success-stories {
         display: flex;
         flex-direction: column;
         align-items: start;
     }

     .section-head .lead {
         /* font-size: 12px; */
         display: none;
     }

     .bottom-right-modal.show .modal-dialog {
         transform: translateY(0);
     }

     .bottom-right-modal .modal-content {
         border-radius: 16px 16px 0 0;
     }

     #materialsModal .modal-body {
         max-height: 60vh;
         /* Better mobile height */
     }
 }

 /* Prevent modal from hiding behind sticky or z-indexed containers */
 .modal,
 .modal-dialog,
 .modal-content {
     position: relative;
     z-index: 99999 !important;
 }

 /* select to your path to success  */
 .exam-pills-container {
     max-width: 900px;
     margin: 0 auto;
     padding: 0 15px;
 }

 .exam-pills-wrapper {
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
     justify-content: center;
 }

 .exam-pill {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 12px 24px;
     border-radius: 99px;
     border: none;
     background: white;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     color: #6b7280;
     font-weight: 600;
     transition: all 0.3s ease;
 }

 .exam-pill:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(254, 102, 0, 0.15);
     color: #fe6600;
 }

 .exam-pill.active {
     background: linear-gradient(45deg, #fe6600, #ff7a3a);
     color: white;
     box-shadow: 0 8px 20px rgba(254, 102, 0, 0.2);
 }

 .exam-pill i {
     font-size: 1.1rem;
 }



 /*=========== quize test sectioin ========= */

 :root {
     --slate-text: #334155;
     --indigo-pro: #6366f1;
     --indigo-light: #e0e7ff;
     --emerald-pro: #10b981;
     --emerald-surface: #f0fdf4;
     --rose-pro: #ef4444;
     --rose-surface: #fef2f2;
     --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }



 .pro-quiz-text {
     width: 100%;
     padding: 40px 20px;
     background: #ffffff;
     box-sizing: border-box;
 }

 .pro-quiz-wrapper {
     margin: auto;
     width: 100%;
     max-width: 1150px;
 }

 .pro-quiz-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
     flex-wrap: wrap;
     gap: 12px;
 }

 .meta-left {
     display: flex;
     align-items: center;
     gap: 16px;
     flex-wrap: wrap;
 }

 .quiz-badge-prime {
     background: #f1f5f9;
     color: #475569;
     font-size: 1rem;
     font-weight: 700;
     letter-spacing: 0.05em;
     padding: 6px 12px;
     border-radius: 6px;
     border: 1px solid #cbd5e1;

 }

 .instruction-tag {
     font-size: 0.9rem;
     color: var(--indigo-pro);
     background: var(--indigo-light);
     padding: 6px 14px;
     border-radius: 8px;
     font-weight: 500;
     display: none;
 }

 .q-counter {
     font-size: 0.95rem;
     color: #64748b;
 }

 .q-counter strong {
     color: #0f172a;
     font-size: 1.1rem;
 }

 .pro-progress-container {
     width: 100%;
     height: 6px;
     background: #f1f5f9;
     border-radius: 100px;
     margin-bottom: 36px;
     overflow: hidden;
 }

 .pro-progress-bar {
     height: 100%;
     background: var(--indigo-pro);
     border-radius: 100px;
     transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .pro-question-block {
     margin-bottom: 32px;
 }

 .question-title {
     font-size: 1.45rem;
     font-weight: 700;
     color: #0f172a;
     line-height: 1.45;
     margin: 0 0 12px 0;
 }

 /* Keep uploaded Today’s Question media inside the public quiz layout. */
 #quiz-view #question-text img,
 #quiz-view #options-container .node-text img,
 #quiz-view #options-container .daily-question-explanation img {
     display: block;
     max-width: 100% !important;
     max-height: 18rem !important;
     width: auto !important;
     height: auto !important;
     object-fit: contain;
     margin: 0.75rem auto;
     border-radius: 0.5rem;
 }

 #quiz-view #question-text,
 #quiz-view #options-container .node-text,
 #quiz-view #options-container .daily-question-explanation {
     max-width: 100%;
     overflow-wrap: anywhere;
 }

 #quiz-view .daily-question-img-wrapper {
     position: relative;
     display: block;
     width: fit-content;
     max-width: 100%;
     margin: 0.75rem auto;
     overflow: hidden;
     border-radius: 0.5rem;
     cursor: zoom-in;
 }

 #quiz-view .daily-question-img-wrapper img {
     margin: 0 !important;
 }

 #quiz-view .daily-question-img-wrapper .daily-question-view-icon {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     background: rgba(15, 23, 42, 0.48);
     font-size: 1.75rem;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease-in-out;
 }

 #quiz-view .daily-question-img-wrapper:hover .daily-question-view-icon,
 #quiz-view .daily-question-img-wrapper:focus .daily-question-view-icon {
     opacity: 1;
 }

 #todayQuestionPreviewImage {
     max-width: 100%;
     max-height: 88vh;
     width: auto;
     height: auto;
     object-fit: contain;
 }

 /* --- Layout System --- */
 .pro-options-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
     margin-bottom: 40px;
 }

 .pro-option-node {
     position: relative;
     cursor: pointer;
     display: block;
 }

 .pro-option-node input[type="checkbox"],
 .pro-option-node input[type="radio"] {
     position: absolute;
     opacity: 0;
     width: 0;
     height: 0;
 }

 .node-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 18px 24px;
     background: #ffffff;
     border: 1.5px solid #e2e8f0;
     border-radius: 12px;
     transition: all 0.2s ease-in-out;
     min-width: 0;
 }

 .node-prefix {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     background: #f8fafc;
     border: 1px solid #e2e8f0;
     color: #64748b;
     font-weight: 700;
     font-size: 0.9rem;
     border-radius: 6px;
     transition: all 0.2s ease;
     flex-shrink: 0;
 }

 .node-body {
     margin-left: 16px;
     flex-grow: 1;
     min-width: 0;
 }

 .node-text {
     font-size: 1.05rem;
     font-weight: 500;
     color: var(--slate-text);
     line-height: 1.4;
     max-width: 100%;
     overflow: hidden;
 }

 @media (max-width: 767.98px) {

     #quiz-view #question-text img,
     #quiz-view #options-container .node-text img,
     #quiz-view #options-container .daily-question-explanation img {
         max-height: 14rem !important;
     }

     #quiz-view .daily-question-img-wrapper .daily-question-view-icon {
         inset: auto 0.4rem 0.4rem auto;
         width: 2.25rem;
         height: 2.25rem;
         border-radius: 50%;
         opacity: 0.9;
         font-size: 1rem;
     }
 }

 .node-checkbox-ui {
     width: 20px;
     height: 20px;
     border: 2px solid #cbd5e1;
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #ffffff;
     transition: all 0.15s ease;
     flex-shrink: 0;
 }

 .pro-option-node input[type="radio"]~.node-inner .node-checkbox-ui {
     border-radius: 50%;
 }

 .node-checkbox-ui .check-icon {
     color: white;
     display: none;
 }

 /* Hover Engine (Only active during live test) */
 body:not(.review-mode-active) .pro-option-node:hover .node-inner {
     border-color: #94a3b8;
     background: #f8fafc;
 }

 /* Checked Engine Styles (Live Test) */
 body:not(.review-mode-active) .pro-option-node input:checked~.node-inner {
     background: #f0fdf4;
     border-color: var(--emerald-pro);
 }

 body:not(.review-mode-active) .pro-option-node input:checked~.node-inner .node-prefix {
     background: var(--emerald-pro);
     border-color: var(--emerald-pro);
     color: white;
 }

 body:not(.review-mode-active) .pro-option-node input:checked~.node-inner .node-checkbox-ui {
     background: var(--emerald-pro);
     border-color: var(--emerald-pro);
 }

 body:not(.review-mode-active) .pro-option-node input:checked~.node-inner .node-checkbox-ui .check-icon {
     display: block;
 }

 .pro-quiz-textarea {
     width: 100%;
     min-height: 120px;
     padding: 16px 20px;
     border: 1.5px solid #e2e8f0;
     border-radius: 12px;
     font-size: 1.05rem;
     box-sizing: border-box;
     resize: vertical;
     margin-bottom: 40px;
 }

 .pro-quiz-control-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-top: 1px solid #e2e8f0;
     padding-top: 28px;
 }

 .controls-right {
     display: flex;
     gap: 14px;
 }

 .action-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 12px 24px;
     font-size: 0.95rem;
     font-weight: 600;
     border-radius: 8px;
     border: none;
     cursor: pointer;
     transition: all 0.15s ease-in-out;
 }

 .btn-primary-solid {
     background: var(--indigo-pro);
     color: white;
 }

 .btn-primary-solid:hover {
     background: #4f46e5;
 }

 .btn-outline {
     background: transparent;
     color: #475569;
     border: 1px solid #cbd5e1;
 }

 .btn-outline:hover {
     background: #f8fafc;
 }

 .btn-danger-solid {
     background: #fff1f2;
     color: #e11d48;
     border: 1px solid #fecdd3;
 }

 .btn-danger-solid:hover {
     background: #ffe4e6;
 }

 /* --- MODAL ENGINE STYLES --- */
 .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 1000;
 }

 .modal-box {
     background: white;
     width: 100%;
     max-width: 500px;
     border-radius: 12px;
     padding: 24px;
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
 }

 .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 16px;
 }

 .modal-header h3 {
     margin: 0;
     font-size: 1.4rem;
     color: #1e293b;
 }

 .modal-close {
     cursor: pointer;
     font-size: 1.5rem;
     color: #94a3b8;
     background: none;
     border: none;
 }

 .summary-box {
     background: #f8fafc;
     border: 1px solid #e2e8f0;
     border-radius: 8px;
     padding: 16px;
     margin-bottom: 16px;
 }

 .summary-row {
     display: flex;
     justify-content: space-between;
     padding: 8px 0;
 }

 .summary-row .val {
     font-weight: 700;
 }

 .summary-row .val.ans {
     color: #10b981;
 }

 .summary-row .val.not-ans {
     color: #ef4444;
 }

 .warning-box {
     background: #fffbeb;
     border: 1px solid #fde68a;
     color: #b45309;
     padding: 12px;
     border-radius: 6px;
     font-size: 0.9rem;
     margin-bottom: 24px;
 }

 /* --- DASHBOARD STYLES (Top View after submission) --- */
 .dashboard-container {
     display: none;
     max-width: 1150px;
     margin: 30px auto 10px auto;
     padding: 0 20px;
 }

 /* Question archive calendar */
 #question-archive {
     /* The global container rule clips positioned children. This popup must be
        allowed to extend below the archive row. */
     overflow: visible;
     position: relative;
     /* Keep the calendar above the live quiz. Both are body-level stacking
        contexts, and the quiz appears later in the document. */
     z-index: 100;
 }

 .question-calendar-wrap {
     flex: 0 0 auto;
 }

 #question-calendar {
     top: 100%;
     right: 0;
     width: min(320px, calc(100vw - 1.5rem));
     z-index: 50;
 }

 @media (max-width: 575.98px) {
     .question-calendar-wrap {
         width: 100%;
     }

     #calendar-toggle {
         width: 100%;
     }

     #question-calendar {
         right: auto;
         left: 0;
     }
 }

 .grid-dashboard {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     /* Unified inline block look */
     gap: 16px;
     margin-bottom: 10px;
 }

 .card-dash {
     background: white;
     border-radius: 12px;
     padding: 16px;
     text-align: center;
     border: 1px solid #e2e8f0;
 }

 .card-dash .title {
     font-size: 0.95rem;
     font-weight: 600;
     margin-bottom: 4px;
 }

 .card-dash .count {
     font-size: 1.8rem;
     font-weight: 700;
     color: #334155;
 }

 .c-total .title {
     color: #4f46e5;
 }

 .c-attempted .title {
     color: #0284c7;
 }

 .c-correct .title {
     color: #16a34a;
 }

 .c-wrong .title {
     color: #dc2626;
 }

 /* --- REVIEW ENGINE BORDER SYSTEM --- */
 .badge-status {
     display: inline-block;
     padding: 4px 10px;
     border-radius: 4px;
     font-size: 0.85rem;
     font-weight: 600;
     margin-bottom: 12px;
 }

 .status-correct {
     background: #dcfce7;
     color: #15803d;
 }

 .status-wrong {
     background: #fee2e2;
     color: #b91c1c;
 }

 .status-unattempted {
     background: #f1f5f9;
     color: #475569;
 }

 .node-inner.correct-review {
     border-color: var(--emerald-pro) !important;
     background: var(--emerald-surface) !important;
 }

 .node-inner.wrong-review {
     border-color: var(--rose-pro) !important;
     background: var(--rose-surface) !important;
 }

 .review-text-ans {
     background: #f8fafc;
     padding: 14px;
     border-radius: 8px;
     border-left: 4px solid #cbd5e1;
     margin-bottom: 15px;
     font-size: 1rem;
 }

 @media (max-width: 900px) {
     .grid-dashboard {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 768px) {
     .pro-options-grid {
         grid-template-columns: 1fr;
     }

     .pro-quiz-control-bar {
         flex-direction: column-reverse;
         gap: 16px;
         align-items: stretch;
     }

     .action-btn {
         width: 100%;
     }

     .question-title {
         font-size: 1.2rem;
     }
 }

 @media (max-width: 455px) {

     .action-btn {
         width: 100%;
         font-size: .70rem;
         padding: 12px 15px;
     }
 }


 /*=========== quize test sectioin  End========= */


 .quick-stat-card {
     background: white;
     padding: 20px;
     border-radius: 6px;
     display: flex;
     align-items: center;
     gap: 15px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
 }

 .quick-stat-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 12px 30px rgba(254, 102, 0, 0.1);
 }

 .stat-icon {
     width: 50px;
     height: 50px;
     border-radius: 12px;
     background: linear-gradient(45deg,
             rgba(254, 102, 0, 0.1),
             rgba(255, 122, 58, 0.1));
     color: #fe6600;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.4rem;
 }

 .stat-info h3 {
     margin: 0;
     font-size: 1.5rem;
     font-weight: 700;
     color: #0a2f6b;
 }

 .stat-info p {
     margin: 0;
     font-size: 0.875rem;
     color: #6b7280;
 }

 @media (max-width: 768px) {
     .exam-pill {
         padding: 8px 11px;
         font-size: 0.9rem;
     }

     .quick-stat-card {
         padding: 15px;
     }

     .stat-icon {
         width: 40px;
         height: 40px;
         font-size: 1.2rem;
     }

     .stat-info h3 {
         font-size: 1.25rem;
     }
 }

 .exams-mega-dropdown {
     position: fixed;
     top: 52%;
     left: 50%;
     /* max-height: 70vh; */
     transform: translate(-50%, -50%) scale(0.95);
     width: 90%;
     max-width: 1200px;
     background: rgba(255, 255, 255, 0.98);
     backdrop-filter: blur(20px);
     border-radius: 12px;
     box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
     opacity: 0;
     visibility: hidden;
     transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     z-index: 1000 !important;
 }

 .exams-mega-dropdown.active {
     opacity: 1;
     visibility: visible;
     transform: translate(-50%, -50%) scale(1);
 }

 .dropdown-header {
     padding: 15px 26px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.08);
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .dropdown-header h3 {
     font-size: 1.4rem;
     color: #0a2f6b;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .search-box {
     position: relative;
     width: 300px;
     padding: 10px 0;
 }

 .search-box input {
     width: 100%;
     padding: 12px 20px 12px 45px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 99px;
     font-size: 0.95rem;
     transition: all 0.3s ease;
 }

 .search-box i {
     position: absolute;
     left: 18px;
     top: 50%;
     transform: translateY(-50%);
     color: #6b7280;
 }

 .header-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
 }

 .header-row h3 {
     font-size: 1.2rem;
     color: #0a2f6b;
     font-weight: 600;
     margin: 0;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .close-btn {
     background: #f3f4f6;
     border-radius: 50%;
     width: 38px;
     height: 38px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #0a2f6b;
     font-size: 1.2rem;
     border: none;
     transition: 0.3s ease;
 }

 .exam-categories {
     padding: 30px;
     max-height: 50vh;
     overflow-y: auto;
     scrollbar-width: thin;
 }

 .category-section {
     margin-bottom: 35px;
 }

 .category-section h4 {
     color: #0a2f6b;
     margin-bottom: 20px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .exams-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 20px;
 }

 .exam-item {
     background: white;
     padding: 20px;
     border-radius: 16px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
     position: relative;
     border: 1px solid rgba(0, 0, 0, 0.06);
 }

 .exam-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
 }

 .exam-item.premium {
     background: linear-gradient(135deg, #fff, #f8f9ff);
     border: 1px solid rgba(108, 99, 255, 0.2);
 }

 .exam-icon {
     width: 48px;
     height: 48px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.25rem;
     margin-bottom: 15px;
 }

 .exam-item h5 {
     color: #0a2f6b;
     margin: 0 0 5px 0;
     font-weight: 600;
 }

 .exam-item p {
     color: #6b7280;
     font-size: 0.9rem;
     margin: 0;
 }

 .exam-tag {
     position: absolute;
     top: 15px;
     right: 15px;
     padding: 5px 12px;
     border-radius: 99px;
     font-size: 0.75rem;
     font-weight: 600;
 }

 .exam-tag.premium {
     background: linear-gradient(135deg, #6c63ff, #574ae2);
     color: white;
 }

 .exam-tag.hot {
     background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
     color: white;
 }

 .exam-tag.trending {
     background: linear-gradient(135deg, #4ecdc4, #45b7af);
     color: white;
 }

 .exam-tag.new {
     background: linear-gradient(135deg, #ffd93d, #ffc107);
     color: #0a2f6b;
 }

 .dropdown-footer {
     padding: 20px 30px;
     border-top: 1px solid rgba(0, 0, 0, 0.08);
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .view-all-btn {
     background: linear-gradient(135deg, #f26522, #ff7a3a);
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 99px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: all 0.3s ease;
 }

 .view-all-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(242, 101, 34, 0.2);
 }

 .quick-links {
     display: flex;
     gap: 20px;
 }

 .quick-links a {
     color: #6b7280;
     text-decoration: none;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: color 0.3s ease;
 }

 .quick-links a:hover {
     color: #f26522;
 }

 /* Close button style */
 .close-btn {
     background: none;
     border: none;
     color: #0a2f6b;
     font-size: 1.4rem;
     cursor: pointer;
     transition: color 0.3s ease;
 }

 .close-btn:hover {
     color: #f26522;
 }

 @media (max-width: 768px) {
     .exams-mega-dropdown {
         width: 90%;
         height: 78vh;
         display: flex;
         flex-direction: column;
         overflow: hidden;
     }

     .dropdown-header {
         flex-direction: column;
         gap: 10px;
         width: 100%;
     }

     .header-row {
         display: flex;
         align-items: center;
         justify-content: space-between;
         width: 100%;
     }

     .header-row h3 {
         font-size: 1rem;
         display: flex;
         align-items: center;
         gap: 8px;
     }

     /* Search row below heading */
     .mobile-search-row {
         display: flex;
         align-items: center;
         width: 100%;
     }

     .search-box {
         flex: 1;
         width: 100%;
         position: relative;
     }

     .search-box i {
         position: absolute;
         top: 50%;
         left: 10px;
         transform: translateY(-50%);
         color: #666;
     }

     .search-box input {
         width: 100%;
         padding: 8px 12px 8px 30px;
         border-radius: 99px;
         border: 1px solid #ddd;
     }

     .close-btn {
         background: #f3f4f6;
         border-radius: 50%;
         width: 38px;
         height: 38px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: #0a2f6b;
         font-size: 1.2rem;
         border: none;
     }

     .close-btn:hover {
         background: #f26522;
         color: #fff;
     }

     .exams-grid {
         grid-template-columns: 1fr;
     }

     .exam-categories {
         flex: 1;
         overflow-y: auto;
         padding: 20px;
     }

     .dropdown-footer {
         flex-shrink: 0;
         background: white;
         border-top: 1px solid rgba(0, 0, 0, 0.08);
         padding: 12px 15px;
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 12px;
         text-align: center;
     }

     .view-all-btn {
         width: auto;
         font-size: 0.9rem;
         /* padding: 10px 0; */
     }

     .quick-links {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         align-items: center;
         gap: 10px;
         width: 100%;
     }

     .quick-links a {
         font-size: 0.8rem;
         white-space: nowrap;
     }
 }

 /* SYLLABUS */
 .bg-contrast {
     background: linear-gradient(180deg,
             rgba(15, 47, 107, 0.03),
             rgba(242, 101, 34, 0.02));
     padding: 40px;
     border-radius: 12px;
 }

 .accordion .accordion-button {
     border-radius: 10px;
     margin-bottom: 8px;
 }

 .custom-accordion .accordion-button {
     padding: 1.25rem;
     transition: all 0.3s ease;
 }

 .custom-accordion .accordion-button:not(.collapsed) {
     background: linear-gradient(45deg, var(--orange), #ff7a3a);
     color: rgb(255, 255, 255);
 }

 .subject-icon {
     width: 45px;
     height: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.9);
     color: var(--orange);
 }

 .syllabus-list {
     list-style: none;
     padding: 0;
 }

 .syllabus-list li {
     padding: 8px 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }

 .progress-ring {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .progress-ring-circle {
     fill: none;
     stroke: var(--orange);
     stroke-width: 5;
     stroke-linecap: round;
     transform: rotate(-90deg);
     transform-origin: 50% 50%;
     r: 24;
     cx: 30;
     cy: 30;
     stroke-dasharray: 150.8;
     stroke-dashoffset: 42.22;
 }

 .progress-text {
     position: absolute;
     font-weight: bold;
     color: var(--navy);
 }

 /* MATERIALS */
 .material-card {
     display: flex;
     gap: 12px;
     align-items: center;
     padding: 14px;
     border-radius: 10px;
     box-shadow: var(--card-shadow);
     background: var(--surface);
 }

 .material-card-new {
     background: white;
     border-radius: 16px;
     padding: 1.5rem;
     transition: all 0.3s ease;
     border: 1px solid rgba(0, 0, 0, 0.08);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }

 .material-card-new:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
 }

 .materials-loader {
     display: none;
     /* default hidden */
     width: 100%;
     min-height: 200px;

     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;

     text-align: center;
 }

 .material-icon {
     width: 60px;
     height: 60px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     margin-bottom: 1rem;
     background: linear-gradient(45deg, var(--orange), #ff7a3a);
     color: white;
 }

 .material-icon.video {
     background: linear-gradient(45deg, #2563eb, #3b82f6);
 }

 .material-icon.quiz {
     background: linear-gradient(45deg, #059669, #10b981);
 }

 .material-tag {
     display: inline-block;
     padding: 4px 12px;
     border-radius: 999px;
     font-size: 12px;
     font-weight: 600;
     background: rgba(242, 101, 34, 0.1);
     color: var(--orange);
     margin-bottom: 0.5rem;
 }

 .material-meta {
     display: flex;
     gap: 1rem;
     margin: 1rem 0;
     font-size: 13px;
     color: #6b7280;
 }

 .material-actions {
     display: flex;
     gap: 0.5rem;
 }

 .material-btn {
     font-size: 15px;
     padding: 10px 12px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 /* Tablet */
 @media (max-width: 768px) {
     .material-btn {
         font-size: 14px;
     }
 }

 /* Mobile */
 @media (max-width: 576px) {
     .material-btn {
         font-size: 13px;
         padding: 8px 10px;
     }
 }

 /* Small Mobile */
 @media (max-width: 400px) {
     .material-btn {
         font-size: 12px;
         padding: 7px 8px;
     }
 }

 .orange-btn {
     background: #f26522;
     color: white;
 }

 .blue-btn {
     background: #0d6efd;
     color: white;
 }

 .blue-btn:hover {
     background: #0d6efd;
     color: white;
 }

 .green-btn {
     background: #28a745;
     color: white;
 }

 .green-btn:hover {
     background: #28a745;
     color: white;
 }

 .orange-btn {
     background: #f26522;
     color: white;
 }

 .orange-btn:hover {
     background: #f26522;
     color: white;
 }

 /* TEST SERIES cards */
 .test-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 18px;
 }

 .bg-gradient-light {
     background: linear-gradient(180deg,
             rgba(254, 102, 0, 0.03),
             rgba(10, 47, 107, 0.02));
 }

 .test-card-new {
     background: white;
     border-radius: 16px;
     padding: 2rem;
     position: relative;
     transition: all 0.3s ease;
     border: 1px solid rgba(0, 0, 0, 0.08);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }

 .test-card-new:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
 }

 .test-card-badge {
     position: absolute;
     top: 1rem;
     right: 1rem;
     padding: 0.25rem 0.75rem;
     border-radius: 999px;
     background: #f26522;
     color: white;
     font-size: 12px;
     font-weight: 600;
 }

 .second-badge {
     right: calc(1rem + 110px);
 }

 .test-card-icon {
     width: 60px;
     height: 60px;
     border-radius: 12px;
     background: linear-gradient(45deg, var(--orange), #ff7a3a);
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     margin-bottom: 1rem;
 }

 .test-meta {
     display: flex;
     gap: 1rem;
     color: #6b7280;
     font-size: 14px;
     margin-top: 1rem;
 }

 /* WHY US metrics */
 .metrics {
     display: flex;
     gap: 18px;
     align-items: center;
     flex-wrap: wrap;
 }

 .metric {
     background: linear-gradient(180deg,
             rgba(255, 255, 255, 0.98),
             rgba(255, 255, 255, 0.98));
     padding: 14px;
     border-radius: 12px;
     box-shadow: var(--card-shadow);
     min-width: 130px;
     text-align: center;
 }

 .metric .big {
     font-weight: 800;
     font-size: 1.25rem;
     color: var(--navy);
 }

 .feature-list {
     display: flex;
     flex-direction: column;
     gap: 2rem;
     margin: 2rem 0;
 }

 .feature-item {
     display: flex;
     gap: 1rem;
     align-items: flex-start;
 }

 .feature-icon {
     width: 48px;
     height: 48px;
     border-radius: 12px;
     background: linear-gradient(45deg, var(--orange), #ff7a3a);
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
 }

 .stats-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5rem;
 }

 .stat-card {
     background: white;
     padding: 1.5rem;
     border-radius: 16px;
     text-align: center;
     transition: all 0.3s ease;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }

 .stat-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
 }

 .stat-number {
     font-size: 2.5rem;
     font-weight: 700;
     color: #0a2f6b;
     line-height: 1;
 }

 .stat-label {
     color: #6b7280;
     margin: 0.5rem 0;
 }

 .stat-trend {
     font-size: 14px;
     font-weight: 500;
 }

 .stat-trend.positive {
     color: #10b981;
 }

 /* Expert guidance  */
 .guidance-section {
     position: relative;
     background: linear-gradient(180deg,
             rgba(0, 110, 254, 0.055),
             rgba(97, 157, 255, 0));
     padding: 80px 0;
 }

 .expert-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     margin-top: 40px;
 }

 .expert-card {
     background: white;
     border-radius: 20px;
     padding: 30px;
     position: relative;
     transition: all 0.3s ease;
     border: 1px solid rgba(0, 0, 0, 0.08);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }

 .expert-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
 }

 .expert-avatar {
     position: relative;
     width: 100px;
     height: 100px;
     margin-bottom: 20px;
 }

 .expert-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 20px;
 }

 .status-indicator {
     position: absolute;
     bottom: -5px;
     right: -5px;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: #cbd5e1;
     border: 3px solid white;
 }

 .status-indicator.online {
     background: #22c55e;
 }

 .expert-info h4 {
     margin: 0;
     color: #0a2f6b;
     font-size: 1.25rem;
 }

 .expert-title {
     display: inline-block;
     padding: 4px 12px;
     background: rgba(242, 101, 34, 0.1);
     color: #f26522;
     border-radius: 99px;
     font-size: 0.85rem;
     margin: 8px 0;
 }

 .expert-bio {
     color: #6b7280;
     font-size: 0.95rem;
     margin: 10px 0;
 }

 .expert-stats {
     display: flex;
     gap: 20px;
     margin: 15px 0;
 }

 .stat {
     text-align: center;
 }

 .stat .value {
     display: block;
     font-size: 1.25rem;
     font-weight: 700;
     color: #0a2f6b;
 }

 .stat .label {
     font-size: 0.85rem;
     color: #6b7280;
 }

 .book-session-btn {
     width: 100%;
     padding: 12px;
     border: none;
     background: linear-gradient(45deg, #f26522, #ff7a3a);
     color: white;
     border-radius: 12px;
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     transition: all 0.3s ease;
 }

 .book-session-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(242, 101, 34, 0.2);
 }

 .guidance-cta {
     background: white;
     border-radius: 20px;
     padding: 40px;
     margin-top: 60px;
     border: 1px solid #f95604;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
 }

 .cta-content {
     display: flex;
     align-items: center;
     gap: 30px;
 }

 .cta-icon {
     width: 60px;
     height: 60px;
     background: linear-gradient(45deg, #f26522, #ff7a3a);
     border-radius: 16px;
     display: grid;
     place-items: center;
     color: white;
     font-size: 24px;
 }

 .cta-text h3 {
     margin: 0;
     font-size: 1.5rem;
     color: #0a2f6b;
 }

 .cta-text p {
     margin: 5px 0 0;
     color: #6b7280;
 }

 .cta-button {
     padding: 14px 30px;
     border: none;
     background: linear-gradient(45deg, #f26522, #ff7a3a);
     color: white;
     border-radius: 12px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 8px;
     margin-left: auto;
     transition: all 0.3s ease;
 }

 .cta-button:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(242, 101, 34, 0.2);
 }

 @media (max-width: 768px) {
     .expert-grid {
         grid-template-columns: 1fr;
     }

     .cta-content {
         flex-direction: column;
         text-align: center;
     }

     .cta-button {
         margin: 20px auto 0;
     }
 }

 /* TESTIMONIALS */
 .testimonials {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 18px;
 }

 .testimonial-card {
     padding: 18px;
     border-radius: 12px;
     background: linear-gradient(180deg, #fff, #fff);
     box-shadow: var(--card-shadow);
 }

 /* Unique styling for testimonials section */
 .testimonials-section {
     position: relative;
     padding: 120px 0;
     overflow: hidden;
     background: linear-gradient(180deg, #f8faff 0%, #fff 100%);
 }

 /* Floating shapes animation */
 .floating-shapes {
     position: absolute;
     inset: 0;
     pointer-events: none;
 }

 .shape {
     position: absolute;
     border-radius: 50%;
     filter: blur(40px);
     opacity: 0.4;
     animation: float 8s infinite;
 }

 .shape-1 {
     width: 300px;
     height: 300px;
     background: rgba(242, 101, 34, 0.15);
     top: 10%;
     left: -5%;
 }

 .shape-2 {
     width: 200px;
     height: 200px;
     background: rgba(10, 47, 107, 0.12);
     top: 20%;
     right: -5%;
     animation-delay: -2s;
 }

 .shape-3 {
     width: 250px;
     height: 250px;
     background: rgba(255, 210, 63, 0.15);
     bottom: 10%;
     left: 50%;
     animation-delay: -4s;
 }

 @keyframes float {

     0%,
     100% {
         transform: translate(0, 0) rotate(0deg);
     }

     25% {
         transform: translate(10px, 15px) rotate(5deg);
     }

     50% {
         transform: translate(-5px, 10px) rotate(-5deg);
     }

     75% {
         transform: translate(-15px, -10px) rotate(3deg);
     }
 }

 /* Highlight badge */
 .highlight-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 24px;
     background: linear-gradient(135deg,
             rgba(242, 101, 34, 0.1),
             rgba(10, 47, 107, 0.1));
     border-radius: 99px;
     color: #f26522;
     font-weight: 600;
     font-size: 0.9rem;
 }

 /* Glassmorphic cards */
 .glassmorphic {
     background: rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
 }

 /* Testimonial cards */
 .testimonial-carousel {
     margin: 60px auto;
     max-width: 1200px;
     perspective: 1000px;
 }

 .testimonial-track {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     transform-style: preserve-3d;
 }

 .testimonial-card {
     position: relative;
     padding: 30px;
     border-radius: 24px;
     transition: all 0.4s ease;
 }

 .testimonial-card:hover {
     transform: translateY(-10px) scale(1.02);
 }

 .quote-icon {
     position: absolute;
     top: -15px;
     left: 30px;
     width: 40px;
     height: 40px;
     background: linear-gradient(135deg, #f26522, #ff7a3a);
     border-radius: 50%;
     display: grid;
     place-items: center;
     color: white;
 }

 .achievement-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 16px;
     background: linear-gradient(135deg, #0a2f6b, #2f4da0);
     border-radius: 99px;
     color: white;
     font-size: 0.85rem;
     margin-bottom: 15px;
 }

 .author-block {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-top: 20px;
 }

 .author-avatar {
     position: relative;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     overflow: hidden;
 }

 .author-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .status-ring {
     position: absolute;
     inset: -2px;
     border: 2px solid #f26522;
     border-radius: 50%;
     animation: pulse 2s infinite;
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
         opacity: 1;
     }

     50% {
         transform: scale(1.1);
         opacity: 0.5;
     }

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

 /* CTA BANNER */
 .cta-banner {
     background: linear-gradient(90deg,
             rgba(242, 101, 34, 0.08),
             rgba(10, 47, 107, 0.04));
     border-radius: 12px;
     padding: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 12px;
 }

 /* Floating CTA */
 .floating-cta-wrapper {
     position: relative;
     margin-top: 40px;
 }

 .floating-cta {
     padding: 40px;
     border-radius: 22px;
     position: relative;
 }

 .cta-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 30px;
 }

 .glow-text {
     font-size: 2.5rem;
     font-weight: 800;
     background: linear-gradient(135deg, #f26522, #0a2f6b);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 15px;
 }

 .btn-glow {
     padding: 15px 30px;
     border: none;
     border-radius: 99px;
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .btn-glow.primary {
     background: linear-gradient(135deg, #f26522, #ff7a3a);
     color: white;
     box-shadow: 0 5px 15px rgba(242, 101, 34, 0.3);
 }

 .btn-glow.secondary {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(242, 101, 34, 0.2);
     color: #f26522;
 }

 .btn-glow:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(242, 101, 34, 0.4);
 }

 .success-metrics {
     display: flex;
     justify-content: center;
     gap: 40px;
     margin-top: 30px;
     padding-top: 30px;
     border-top: 1px solid rgba(0, 0, 0, 0.1);
 }

 .metric {
     text-align: center;
 }

 .metric .number {
     display: block;
     font-size: 1.8rem;
     font-weight: 800;
     color: #0a2f6b;
 }

 .metric .label {
     font-size: 0.9rem;
     color: #6b7280;
 }

 /* Responsive adjustments */
 @media (max-width: 992px) {
     .testimonial-track {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .cta-content {
         flex-direction: column;
         text-align: center;
     }

     .success-metrics {
         flex-wrap: wrap;
         gap: 20px;
     }
 }

 /* FOOTER */
 footer {
     padding: 48px 0;
     background: linear-gradient(180deg, #071225, #041123);
     color: #cbd5e1;
     max-width: 100%;
     overflow-x: hidden;
 }

 /* Premium Footer Styles */
 .neo-footer {
     background: linear-gradient(165deg, #0a2f6b, #071225);
     padding: 60px 0 40px;
     position: relative;
     overflow: hidden;
     max-width: 100%;
 }

 /* Premium Card */
 .premium-card {
     background: rgba(255, 255, 255, 0.03);
     border-radius: 10px;
     padding: 50px;
     position: relative;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
     overflow: hidden;
 }

 /* Brand Section */
 .brand-showcase {
     text-align: center;
     position: relative;
 }

 .logo-container {
     position: relative;
     display: inline-block;
 }

 .premium-logo {
     width: 180px;
     height: auto;
     position: relative;
     z-index: 2;
 }

 .logo-ring {
     position: absolute;
     inset: -10px;
     border: 2px solid rgba(255, 255, 255, 0.4);
     border-radius: 0%;
     animation: ringPulse 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }

 .logo-ring::before,
 .logo-ring::after {
     content: "";
     position: absolute;
     inset: -5px;
     border: 2px solid rgba(0, 0, 0, 0.2);
     border-radius: inherit;
     animation: inherit;
     animation-delay: -0.8s;
 }

 .logo-ring::after {
     inset: -15px;
     border-color: rgba(255, 255, 255, 0.15);
     animation-delay: -1.6s;
 }

 @keyframes ringPulse {
     0% {
         transform: scale(0.95);
         opacity: 1;
     }

     50% {
         transform: scale(1.2);
         opacity: 0.5;
     }

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

 @keyframes ringPulse {
     0% {
         transform: scale(1);
         opacity: 1;
     }

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

 .brand-tagline {
     color: #fff;
     font-size: 1.5rem;
     margin: 20px 0 10px;
     font-weight: 600;
 }

 .brand-desc {
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 25px;
 }

 /* Social Icons */
 .social-strip {
     display: flex;
     justify-content: center;
     gap: 15px;
 }

 .social-icon {
     width: 40px;
     height: 40px;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.05);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     position: relative;
     overflow: hidden;
     transition: transform 0.3s ease;
     animation: fadeIn 0.5s backwards;
     animation-delay: var(--delay);
 }

 .social-icon:hover {
     transform: translateY(-5px);
 }

 .hover-effect {
     position: absolute;
     inset: 0;
     background: linear-gradient(45deg,
             transparent,
             rgba(255, 255, 255, 0.2),
             transparent);
     transform: translateX(-100%);
     transition: transform 0.6s ease;
 }

 .social-icon:hover .hover-effect {
     transform: translateX(100%);
 }

 /* Links Grid */
 .links-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 30px;
 }

 .link-group h4 {
     color: white;
     margin-bottom: 20px;
     font-weight: 600;
 }

 .premium-links {
     list-style: none;
     padding: 0;
     margin: 0;
     cursor: pointer;
 }

 .premium-links li a {
     display: flex;
     align-items: center;
     justify-content: space-between;
     color: rgba(255, 255, 255, 0.7);
     padding: 8px 15px;
     border-radius: 8px;
     transition: all 0.3s ease;
     text-decoration: none;
 }

 .premium-links li a:hover {
     background: rgba(242, 101, 34, 0.1);
     color: white;
     transform: translateX(5px);
 }

 .premium-links li a i {
     opacity: 0;
     transform: translateX(-10px);
     transition: all 0.3s ease;
 }

 .premium-links li a:hover i {
     opacity: 1;
     transform: translateX(0);
 }

 /* Newsletter Box */
 .newsletter-box {
     background: rgba(255, 255, 255, 0.03);
     padding: 30px;
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .newsletter-box h4 {
     color: white;
     margin-bottom: 10px;
 }

 .newsletter-box p {
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 20px;
 }

 .premium-form .input-group {
     display: flex;
     gap: 10px;
 }

 .premium-form input {
     flex: 1;
     padding: 12px 20px;
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: rgba(255, 255, 255, 0.05);
     color: white;
     transition: all 0.3s ease;
 }

 .premium-form input:focus {
     border-color: #f26522;
     box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.1);
 }

 .premium-form button {
     padding: 12px 25px;
     border-radius: 12px;
     border: none;
     background: linear-gradient(45deg, #f26522, #ff7a3a);
     color: white;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: all 0.3s ease;
 }

 .premium-form button:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(242, 101, 34, 0.2);
 }

 /* Trust Badges */
 .trust-badges {
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
     margin-top: 20px;
 }

 .trust-badges span {
     display: flex;
     align-items: center;
     gap: 5px;
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.9rem;
 }

 /* Footer Bottom */
 .footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     text-align: center;
     margin-top: 50px;
     padding-top: 30px;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 .footer-bottom p {
     color: rgba(255, 255, 255, 0.7);
     margin: auto;
     text-align: center;
 }

 .footer-links {
     display: flex;
     gap: 20px;
 }

 .footer-links a {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .footer-links a:hover {
     color: #f26522;
 }

 /* Responsive Adjustments */
 @media (max-width: 992px) {
     .premium-card {
         padding: 30px;
     }

     .links-grid {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .footer-bottom {
         flex-direction: column;
         text-align: center;

         gap: 15px;
     }
 }

 @media (max-width: 576px) {
     .premium-form .input-group {
         flex-direction: column;
     }

     .trust-badges {
         justify-content: center;
     }
 }

 /* Utilities and responsive tweaks */
 .muted {
     color: var(--muted);
 }

 .small {
     font-size: 0.92rem;
 }

 .pill {
     background: rgba(10, 20, 40, 0.04);
     padding: 6px 10px;
     border-radius: 999px;
     font-weight: 700;
     font-size: 12px;
 }

 /* animations */
 .fade-up {
     opacity: 0;
     transform: translateY(10px);
     transition: all 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
 }

 .fade-up.in {
     opacity: 1;
     transform: translateY(0);
 }

 /* responsive */




 /* accessibility */
 :focus {
     outline: 3px solid rgba(79, 70, 229, 0.12);
     outline-offset: 3px;
 }

 button {
     cursor: pointer;
 }

 /* final polish - floating micro-shine on primary CTA */
 .btn-primary-hero:hover {
     box-shadow:
         0 18px 48px rgba(79, 70, 229, 0.12),
         0 6px 20px rgba(242, 101, 34, 0.08);
     transform: translateY(-3px);
 }

 /* badge styles */
 .badge-pill {
     border-radius: 999px;
     padding: 6px 10px;
     font-weight: 700;
     font-size: 0.82rem;
     background: rgba(255, 255, 255, 0.08);
     color: #fff;
 }

 /* particles canvas sits behind */
 #particles {
     position: fixed;
     inset: 0;
     z-index: 0;
     pointer-events: none;
 }

 body>* {
     position: relative;
     z-index: 2;
 }

 .text-ellipsis {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .series-title,
 .series-description {
     -webkit-line-clamp: 2;
 }

 .exam-span {
     -webkit-line-clamp: 1;
 }

 /* Profile Image */
 .user-img {
     width: 40px;
     height: 40px;
     object-fit: cover;
     border-radius: 50%;
     border: 2px solid #fff;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }

 .nav-item.dropdown .dropdown-toggle::after {
     display: none;
 }

 .dropdown-menu {
     min-width: 200px;
 }

 .series-filter-wrapper,
 .package-filter-wrapper {
     display: flex;
     justify-content: center;
 }

 .series-filter,
 .package-filter {
     display: inline-flex;
     background: #f1f5f9;
     padding: 4px;
     border-radius: 50px;
     gap: 4px;
 }

 #seriesFilter .series-filter-btn,
 #packageFilter .package-filter-btn {
     border: none;
     padding: 6px 18px;
     font-size: 14px;
     font-weight: 500;
     border-radius: 50px;
     background: transparent !important;
     color: #475569 !important;
     cursor: pointer;
     transition: all 0.25s ease;
 }

 #seriesFilter .series-filter-btn:hover,
 #packageFilter .package-filter-btn:hover {
     background: rgba(37, 99, 235, 0.08) !important;
     color: #2563eb !important;
 }

 #seriesFilter .series-filter-btn.active,
 #packageFilter .package-filter-btn.active {
     background: #2563eb !important;
     color: #fff !important;
     box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
 }

 /* ========== Exam cover============ */

 #examCoversection {
     padding: 50px 0;
 }

 /* TOP */
 .exm-top-cover {
     text-align: center;
     margin-bottom: 40px;
 }

 .exm-top-cover .tittal h1 {
     font-size: 2.5rem;
     font-weight: 800;
     color: #0a2f6b;
 }

 .tittal p {
     color: #64748b;
     margin-top: 6px;
 }

 /* SLIDER */
 .slider-container {
     position: relative;
     overflow: hidden;
     padding: 20px 0 10px 0;
 }

 /* TRACK */
 .slider-track {
     display: flex;
     gap: 20px;
     animation: scroll 20s linear infinite;
 }

 /* AUTO ANIMATION */
 @keyframes scroll {
     0% {
         transform: translateX(0);
     }

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

 /* HOVER STOP */
 .slider-container:hover .slider-track {
     animation-play-state: paused;
 }

 /* CARD */
 .exam-card-cover {
     min-width: 200px;
     background: white;
     padding: 5px;
     border-radius: 5px;
     text-align: center;
     transition: 0.3s;
     cursor: pointer;
     border: 1px solid rgb(210, 209, 209);
 }

 .exam-card-cover img {
     width: 80px;
     margin-bottom: 10px;
 }

 .exam-card-cover p {
     font-weight: 600;
     color: #334155;
 }

 /* HOVER EFFECT */
 .exam-card-cover:hover {
     transform: translateY(-10px) scale(1.05);
 }

 /* BUTTONS */
 .slider-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     border: none;
     background: white;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
     cursor: pointer;
     font-size: 20px;
     z-index: 10;
     transition: 0.3s;
 }

 /* LEFT */
 .prev-btn {
     left: 10px;
 }

 /* RIGHT */
 .next-btn {
     right: 10px;
 }

 /* BUTTON HOVER */
 .slider-btn:hover {
     background: #6366f1;
     color: white;
     transform: translateY(-50%) scale(1.1);
 }

 /* RESPONSIVE */
 @media (max-width: 768px) {
     .exam-card-cover {
         min-width: 150px;
     }
 }

 /*===== Exam Notification====== */

 #examNotification .container {
     padding: 70px 0;
     width: 75%;
     margin: auto;
     text-align: center;
 }

 .title {
     font-size: 45px;
     font-weight: 700;
     color: #0a2f6b;
 }

 .subtitle {
     color: #6b7280;
     margin-bottom: 35px;
     font-size: 17px;
 }

 /* Toggle */

 .toggle-area {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 15px;
     margin-bottom: 35px;
     font-weight: 600;
 }

 .toggle-area span {
     font-weight: 600;
     color: #0f0f0f;
     transition: 0.3s;
     font-size: 18px;
 }

 /* Active text */

 .toggle-area span.active-text {
     color: #f97316;
     /* orange */
 }

 /* Toggle */

 .switch {
     position: relative;
     width: 75px;
     height: 35px;
 }

 .switch input {
     display: none;
 }

 .slider {
     position: absolute;
     cursor: pointer;
     background: #f97316;
     border-radius: 30px;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     transition: 0.4s;
 }

 .slider:before {
     content: "";
     position: absolute;
     height: 30px;
     width: 30px;
     background: white;
     border-radius: 50%;
     left: 3px;
     bottom: 3px;
     transition: 0.4s;
 }

 .exam-notifition-input {
     width: 100%;
     margin-bottom: 40px;
 }

 .exam-notifition-input input {
     width: 50%;
     padding: 8px 20px;
     border-radius: 50px;
 }

 .exam-notifition-input span {
     position: relative;
     top: 0;
     right: 40px;
 }

 /* Blur inactive */

 .toggle-area span:not(.active-text) {
     opacity: 0.5;
 }

 input:checked+.slider {
     background: #f26522;
 }

 input:checked+.slider:before {
     transform: translateX(40px);
 }

 .filter-buttons {
     margin-bottom: 40px;
 }

 .exams-filter-btn {
     padding: 7px 20px;
     margin: 6px;
     border: none;
     border-radius: 5px;
     background: #e5e7eb;
     cursor: pointer;
     font-weight: 600;
     transition: 0.3s;
 }

 .exams-filter-btn:hover {
     background: #0a2f6b;
     color: white;
 }

 .exams-filter-btn.active {
     background: #0a2f6b;
     color: white;
 }

 /* Grid Layout */

 .exam-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 25px;
 }

 /* Cards */

 .exam-card-not {
     background: white;
     padding: 28px;
     border-radius: 5px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     text-align: left;
     position: relative;
     transition: all 0.3s ease;
     border: 1px solid #f1f1f1;
 }

 .exam-card-not:hover {
     transform: translateY(-6px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }

 .exam-card-not h2 {
     margin-top: 20px;
     font-size: 17px;
     font-weight: 700;
     color: #1b2b5a;
 }

 .exam-card-not p {
     color: #565c67;
     font-size: 14px;
 }

 .exam-card-not h4 {
     font-size: 13px;
     font-weight: 500;
     background: rgba(242, 101, 34, 0.1);
     color: var(--orange);
     display: inline-block;
     padding: 2px 12px;
     border-radius: 50px;
 }

 /* Buttons */

 .exam-buttons {
     margin-top: 15px;
     display: flex;
     gap: 10px;
 }

 /*
      .alert-btn {
        background: #ff7a3a;
        color: white;
        border: none;
        padding: 8px 30px;
        border-radius: 5px;
        font-size: 13px;
        cursor: pointer;
        transition: 0.3s;
      }

      .alert-btn:hover {
        background: #c64002;
      } 

      .details-btn {
        border: 2px solid #0a2f6b;
        background: white;
        color: #0a2f6b;
        padding: 8px 30px;
        border-radius: 5px;
        font-size: 13px;
        cursor: pointer;
        transition: 0.3s;
      }

      .details-btn:hover {
        background: #0a2f6b;
        color: white;
      } */

 /* Badge */

 #examNotification .badge {
     position: absolute;
     top: 15px;
     right: 15px;
     padding: 5px 12px;
     font-size: 12px;
     border-radius: 2px;
     border-top-left-radius: 5px;
     border-bottom-right-radius: 5px;
     color: white;
     font-weight: 600;
 }

 #examNotification .badge.ongoing {
     background: #2563eb;
 }

 #examNotification .badge.coming {
     background: #f59e0b;
 }

 #examNotification .badge.ending {
     background: red;
 }

 /* ================= RESPONSIVE ================= */

 /* Tablet (1024px) */
 @media (max-width: 1024px) {
     #examNotification .container {
         width: 90%;
         padding: 50px 0;
     }

     .title {
         font-size: 36px;
     }

     .subtitle {
         font-size: 16px;
     }

     .exam-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .exam-card-not {
         padding: 22px;
     }
 }

 /* Mobile (768px) */
 @media (max-width: 768px) {
     #examNotification .container {
         width: 95%;
         padding: 40px 0;
     }

     .title {
         font-size: 28px;
     }

     .subtitle {
         font-size: 15px;
     }

     .toggle-area {
         flex-direction: column;
         gap: 10px;
     }

     .toggle-area span {
         font-size: 16px;
     }

     .switch {
         width: 65px;
         height: 30px;
     }

     .slider:before {
         width: 25px;
         height: 25px;
     }

     input:checked+.slider:before {
         transform: translateX(34px);
     }

     .exam-grid {
         grid-template-columns: 1fr;
     }

     .exam-card-not {
         padding: 20px;
     }

     .exam-card-not h2 {
         font-size: 18px;
     }

     .exam-card-not p {
         font-size: 13px;
     }

     .exam-buttons {
         flex-direction: column;
     }

     /* .alert-btn,
        .details-btn {
          width: 100%;
          text-align: center;
        } */
 }

 @media (max-width: 480px) {
     .title {
         font-size: 24px;
     }

     .subtitle {
         font-size: 14px;
     }

     .exams-filter-btn {
         padding: 6px 14px;
         font-size: 13px;
     }

     .exam-card-not {
         padding: 18px;
     }

     .badge {
         font-size: 10px;
         padding: 4px 8px;
     }
 }

 /*======= exam notofitation popup======= */

 /* POPUP BACKDROP */
 .alert-popup {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 9999;
 }

 /* BOX */
 .alert-box {
     background: #fff;
     padding: 30px 25px;
     width: 90%;
     max-width: 380px;
     border-radius: 12px;
     text-align: center;
     position: relative;
     animation: popupFade 0.3s ease;
 }

 /* ANIMATION */
 @keyframes popupFade {
     from {
         transform: translateY(-20px);
         opacity: 0;
     }

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

 .alert-box h3 {
     margin-bottom: 10px;
 }

 .alert-box p {
     font-size: 14px;
     color: #666;
 }

 /* INPUT */
 .alert-box input {
     width: 100%;
     padding: 10px;
     margin: 15px 0;
     border-radius: 8px;
     border: 1px solid #ccc;
     outline: none;
 }

 /* BUTTON */
 .alert-box button {
     width: 100%;
     padding: 10px;
     border: none;
     background: linear-gradient(135deg, #ff9800, #ff5722);
     color: #fff;
     font-weight: bold;
     border-radius: 8px;
     cursor: pointer;
     transition: 0.3s;
 }

 .alert-box button:hover {
     transform: scale(1.05);
 }

 /* CLOSE */
 .close-popup {
     position: absolute;
     top: 10px;
     right: 12px;
     font-size: 22px;
     cursor: pointer;
 }

 /* MESSAGE */
 .alert-msg {
     margin-top: 10px;
     font-size: 13px;
 }

 .bg-narangi {
     background-color: #F26522;
 }