/* ====================================
COMPLETE CONSOLIDATED CSS
==================================== */

     /* Root variables - all design tokens in one place */
     :root {
         /* Brand colors */
         --primary: #0b57d0;
         --primary-dark: #0a3f99;
         --secondary: #133f9a;
         --accent: #ff7a00;
         --success: #22c55e;
         --warning: #f59e0b;
         --danger: #ef4444;
         --muted: #5b6b80;
         --bg: #f6f9fb;
         --card: #ffffff;
         --text: #07162e;

         /* Elevation & Effects */
         --shadow-sm: 0 6px 18px rgba(9, 30, 66, .06);
         --shadow: 0 10px 30px rgba(9, 30, 66, .09);
         --shadow-lg: 0 18px 50px rgba(9, 30, 66, .12);
         --glass: rgba(255, 255, 255, 0.95);
         --glass-dark: rgba(7, 22, 46, 0.95);

         /* Borders & Radius */
         --border: rgba(6, 37, 102, .08);
         --radius-sm: 8px;
         --radius: 14px;
         --radius-lg: 18px;

         /* Typography */
         --h1-size: clamp(30px, 4.2vw, 48px);
         --h2-size: clamp(22px, 3.2vw, 32px);
         --h3-size: clamp(1.25rem, 2.5vw, 1.5rem);
         --base-size: clamp(1rem, 1.5vw, 1.125rem);
         --lead-size: 17px;
         --border-light: rgba(255, 255, 255, .08);

         /* Spacing & Timing */
         --section-spacing: 64px;
         --component-spacing: 28px;
         --transition: all .18s cubic-bezier(.2, .9, .3, 1);
         --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

         /* Effects */
         --nm-flat: 6px 6px 16px rgba(9, 30, 66, .04), -6px -6px 16px rgba(255, 255, 255, .9);
     }

     /* Base reset */
     *,
     *::before,
     *::after {
         box-sizing: border-box;
         margin: 0;
         padding: 0;
     }

     /* HTML & Body base */
     html {
         scroll-behavior: smooth;
         scroll-padding-top: 80px;
     }



     /* Images */


     img.loaded {
         opacity: 1;
     }

     /* Scrollbar styling */
     ::-webkit-scrollbar {
         width: 12px;
         height: 12px;
     }

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

     ::-webkit-scrollbar-thumb {
         background: var(--muted);
         border: 3px solid var(--bg);
         border-radius: 100vh;
     }

     ::-webkit-scrollbar-thumb:hover {
         background: var(--primary);
     }

     /* Text selection */
     ::selection {
         background: var(--primary);
         color: var(--card);
     }

     /* Utility classes */
     .visually-hidden {
         clip: rect(0 0 0 0);
         clip-path: inset(50%);
         height: 1px;
         overflow: hidden;
         position: absolute;
         white-space: nowrap;
         width: 1px;
     }

     /* ==========================================
TYPOGRAPHY
========================================== */
     h1,
     h2,
     h3,
     h4 {
         color: var(--text);
         line-height: 1.3;
     }

     h1 {
         font-size: clamp(25px, 5vw, 32px);
         letter-spacing: -0.02em;
     }

     h2 {
         font-size: clamp(24px, 4vw, 32px);
         margin-bottom: 5px;
         color: var(--primary);
     }

     /* ==========================================
LAYOUT & CONTAINERS
========================================== */
     .container {
         max-width: 1280px;
         padding-left: var(--bs-gutter-x, .75rem);
         padding-right: var(--bs-gutter-x, .75rem);
         margin: 0 auto;
         padding-bottom: 50px;
     }

     main {
         margin-top: 2rem;
     }

     @media (max-width: 991.98px) {
         .aside {
             margin-top: 2rem;
         }
     }

     /* ==========================================
BUTTONS
========================================== */
     .read-more-btn {
         padding: 5px 12px;
         border-radius: 5px;
         border: none;
         font-weight: 600;
         font-size: 15px;
         cursor: pointer;
         transition: var(--transition);
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 2px;
         text-decoration: none;
         background: #0b57d01f;
     }


     /* Read More Hidden Content */
     .read-more-hidden {
         display: none;
         opacity: 0;
         max-height: 0;
         overflow: hidden;
         transition: all 0.3s ease;
     }

     .read-more-hidden.expanded {
         display: block;
         opacity: 1;
         max-height: 500px;
     }

     .read-more-btn.hidden {
         display: none;
     }


     .btn {
         padding: 12px 22px;
         border-radius: 5px;
         border: none;
         font-weight: 600;
         font-size: 15px;
         cursor: pointer;
         transition: var(--transition);
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
         text-decoration: none;
         background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
     }

     .btn-primary {
         background: linear-gradient(135deg, var(--primary), var(--primary-dark));
         color: var(--card);
         box-shadow: 0 8px 26px rgba(11, 87, 208, .18);
     }

     .btn-primary:hover {
         transform: translateY(-2px);
         box-shadow: 0 14px 36px rgba(11, 87, 208, .22);
     }

     .btn-outline {
         background: transparent;
         color: #fff !important;
         border: 1.5px solid rgba(255, 255, 255, 0.9)!important;
         padding: 10px 18px;
         border-radius: 5px;
         box-shadow: none;
     }

     .btn-outline:hover,
     .btn-outline:focus {
         background: #ffffff !important;
         color: #000000 !important;
         transform: translateY(-2px);
         box-shadow: none;
         outline: none;
     }

     .btn:hover {
         transform: translateY(-2px);
         box-shadow: var(--shadow);
     }

     /* ==========================================
HERO SECTION
========================================== */
     .hero {
         background-image: linear-gradient(rgba(6, 28, 89, 0.14), rgba(6, 28, 89, 0.23)), url('https://www.icertglobal.com/images/course-page6.webp');
         background-size: cover;
         background-position: center center;
         color: var(--bs-white);
         min-height: 320px;
         margin-top: -76px;
         padding-top: 50px;
         display: flex;
         align-items: center;
         width: 100vw;
         margin-left: calc(50% - 50vw);
         border-radius: 0;
     }

     .hero-content {
         max-width: 1280px;
         width: 100%;
         margin: 50px auto 0 auto;
         padding: 0 24px;
         position: relative;
         z-index: 2;
     }

     .hero-inner {
         display: flex;
         align-items: center;
         gap: 28px;
     }

     .hero-left {
         width: 60%;
     }

     .hero-right {
         width: 40%;
         min-height: 220px;
     }

     .hero h1 {
         color: #fff;
         font-size: 38px;
         margin-bottom: 6px;
         font-weight: 700;
     }

     .hero h2 {
         color: rgba(255, 255, 255, 0.95);
         font-size: clamp(18px, 2.4vw, 22px);
         margin-top: 8px;
         margin-bottom: 2px;
         font-weight: 400;
         opacity: 0.95;
         letter-spacing: -0.01em;
     }

     .hero h3 {
         color: rgba(255, 255, 255, 0.95);
         font-size: clamp(15px, 2vw, 18px);
         margin-bottom: 10px;
         font-weight: 200;
         opacity: 0.95;
         letter-spacing: -0.01em;
     }

     .hero p {
         font-size: var(--lead-size);
         margin: 18px 0 26px;
         color: rgba(255, 255, 255, .95);
         
     }

     .hero-divider {
         height: 1px;
         width: 64px;
         background: rgba(255, 255, 255, 0.18);
         margin: 10px 0 14px 0;
         border-radius: 2px;
     }

     .hero .cta-row {
         display: flex;
         flex-wrap: wrap;
         gap: 12px;
         margin-top: 12px;
     }

     .hero .cta-row .btn {
         width: auto !important;
         display: inline-flex !important;
         flex-shrink: 0;
         flex-grow: 0;
     }

     .hero-note {
         display: flex;
         gap: 12px;
         align-items: center;
         margin-top: 14px;
     }

     .hero-note img {
         width: 48px;
         height: 48px;
         border-radius: 50%;
         object-fit: cover;
         flex: 0 0 48px;
         border: 2px solid rgba(255, 255, 255, 0.12);
     }

     .hero-note .note-title {
         font-size: 14px;
         font-weight: 600;
         color: rgba(255, 255, 255, 0.95);
     }

     .hero-note .note-sub {
         font-size: 13px;
         color: rgba(255, 255, 255, 0.85);
         margin-top: 2px;
     }

     /* ==========================================
FEATURES & CARDS
========================================== */
     .features {
         display: flex;
         flex-wrap: wrap;
         gap: 0.5rem;
     }

     .features li,
     .features>div:not(.cta-row) {
         flex: 0 1 calc(50% - 0.25rem);
         max-width: calc(50% - 0.25rem);
     }


     .feat {
         background: rgba(255, 255, 255, .06);
         padding: 1rem;
         border-radius: 12px;
         display: flex;
         gap: 0.75rem;
         align-items: center;
         flex: 0 1 calc(50% - 0.5rem);
         max-width: calc(50% - 0.5rem);
         transition: all 0.2s;
         border: 1px solid rgba(255, 255, 255, .06);
         backdrop-filter: blur(4px);
     }


     .feat:hover {
         transform: translateY(-2px);
         background: rgba(255, 255, 255, .15);
         border-color: rgba(255, 255, 255, .2);
     }

     .feat .btn {
         min-width: 180px;
         width: auto !important;
         max-width: 100%;
     }

     .feat-simple {
         background: transparent !important;
         padding: 0 !important;
         border: none !important;
         display: flex !important;
         gap: 1rem;
         align-items: flex-start;
     }

     .feat-simple:hover {
         background: transparent !important;
         transform: none !important;
     }


     .feat-icon {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: 36px;
         height: 36px;
         flex: 0 0 36px;
         border-radius: 8px;
         background: rgba(255, 255, 255, 0.06);
     }

     .feat-icon svg {
         width: 22px;
         height: 22px;
         display: block;
     }

     .features-container {
         display: flex;
         flex-direction: column;
         gap: 2rem;
         margin-top: 2rem;
     }

     .features-wrapper {
         display: flex;
         flex-direction: column;
         gap: 1.5rem;
     }

     .cta-row {
         display: flex;
         gap: 1rem;
         width: auto;
         flex-wrap: wrap;
         align-items: center;
     }

     .cta-row .btn {
         width: auto;
         white-space: nowrap;
     }

     @media (min-width: 768px) {
         .feat {
             flex: 1 1 calc(50% - 0.5rem);
             max-width: calc(50% - 0.5rem);
         }

         .cta-row {
             flex-direction: row;
         }

         .cta-row .btn {
             flex: 1;
         }
     }

     /* ==========================================
STICKY ASIDE / ENROLL PANEL
========================================== */
     .aside {
         position: sticky;
         top: 90px;
         background: linear-gradient(180deg, var(--card), #fbfdff);
         padding: 20px;
         border-radius: 14px;
         box-shadow: 0 12px 40px rgba(11, 87, 208, .06);
         border: 1px solid var(--border);
         height: max-content;
     }

     @media (max-width: 991.98px) {
         .course-body .aside {
             position: static;
             top: auto;
         }
     }


     .price-box {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 20px;
     }

     .price {
         font-size: 28px;
         font-weight: 700;
         color: var(--primary);
         display: flex;
         align-items: baseline;
         gap: 4px;
     }

     .price small {
         font-size: 16px;
         color: var(--muted);
         font-weight: 400;
     }

     .discount {
         background: rgba(34, 197, 94, .1);
         color: var(--success);
         padding: 6px 12px;
         border-radius: var(--radius);
         font-weight: 600;
         font-size: 15px;
     }

     .aside-divider {
         height: 1px;
         background: var(--border);
         margin: 20px 0;
     }

     .aside-form {
         display: flex;
         flex-direction: column;
         gap: 12px;
     }

     .aside-form input {
         width: 100%;
         padding: 12px;
         border: 1px solid var(--border);
         border-radius: var(--radius);
         font-size: 15px;
         transition: var(--transition);
     }

     .aside-form input:focus {
         outline: none;
         border-color: var(--primary);
         box-shadow: 0 0 0 3px rgba(65, 105, 215, .1);
     }

     /* Style select dropdown to match inputs */
     .aside-form select {
         width: 100%;
         padding: 12px;
         border: 1px solid var(--border);
         border-radius: var(--radius);
         font-size: 15px;
         transition: var(--transition);
         background: var(--card);
         color: var(--text);
         font-family: "Poppins", -apple-system, system-ui, sans-serif;
         cursor: pointer;
         appearance: none;
         -webkit-appearance: none;
         -moz-appearance: none;
         padding-right: 36px;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230b57d0' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
         background-repeat: no-repeat;
         background-position: right 12px center;
     }

     .aside-form select:focus {
         outline: none;
         border-color: var(--primary);
         box-shadow: 0 0 0 3px rgba(65, 105, 215, .1);
     }

     .aside-form select:disabled {
         background-color: #f5f5f5;
         color: #999 !important;
         cursor: not-allowed;
     }

     .aside-form select option:first-child {
         color: #999;
         font-style: italic;
     }

     /* Remove default arrow on Chrome/Safari */
     .aside-form select::-webkit-scrollbar {
         width: 8px;
     }


     .next-batch {
         font-size: 14px;
         color: var(--muted);
         display: flex;
         align-items: center;
         gap: 8px;
     }

     .next-batch span {
         color: var(--primary);
         font-weight: 600;
     }

     /* ==========================================
PRICING CARDS & TABS
========================================== */
     .pricing-card {
         position: relative;
         overflow: visible;
         padding-top: 8px;
     }

     .pricing-card .discount {
         position: absolute;
         top: 12px;
         right: 12px;
         padding: 6px 12px;
         border-radius: 999px;
         font-size: 12px;
         font-weight: 700;
         color: #fff;
         box-shadow: 0 6px 18px rgba(2, 6, 23, 0.12);
         transform-origin: center;
         transition: transform .18s ease, box-shadow .18s ease;
         z-index: 3;
     }

     .pricing-card .discount--best {
         background: linear-gradient(135deg, #06b6d4, #3b82f6);
     }

     .pricing-card .discount--popular {
         background: linear-gradient(135deg, #f59e0b, #ef4444);
     }

     .pricing-card .discount--limited {
         background: linear-gradient(135deg, #ef4444, #fb923c);
     }

     .pricing-card:hover .discount {
         transform: translateY(-3px) rotate(-4deg);
     }

     .pricing-tabs {
         display: block;
     }

     .pricing-tabs .tab-list {
         display: flex;
         gap: 8px;
         margin-bottom: 14px;
     }

     .pricing-tab-btn {
         flex: 1;
         padding: 8px 10px;
         border-radius: 10px;
         border: 1px solid var(--border);
         background: linear-gradient(180deg, #fff, #fbfdff);
         font-weight: 600;
         font-size: 14px;
         color: var(--muted);
         cursor: pointer;
         transition: var(--transition);
     }

     .pricing-tab-btn[aria-selected="true"],
     .pricing-tab-btn.active {
         background: linear-gradient(90deg, var(--primary), var(--primary-dark));
         color: #fff;
         box-shadow: 0 8px 26px rgba(11, 87, 208, .12);
         border-color: rgba(11, 87, 208, .12);
         transform: translateY(-2px);
     }

     .tab-panels {
         margin-bottom: 14px;
     }

     .pricing-card {
         background: linear-gradient(180deg, #fff, #fbfdff);
         padding: 14px;
         border-radius: 12px;
         border: 1px solid var(--border);
         box-shadow: 0 8px 30px rgba(9, 30, 66, .04);
     }

     .price-value {
         font-size: 22px;
         font-weight: 800;
         color: var(--primary);
     }

     .price-features {
         margin-top: 10px;
         display: flex;
         flex-direction: column;
         gap: 8px;
         font-size: 13px;
         color: var(--muted);
     }

     .price-features li {
         list-style: none;
         padding-left: 0;
         display: flex;
         gap: 8px;
         align-items: flex-start
     }



     /* ==========================================
MODULES & ACCORDION
========================================== */
     .modules {
         margin-top: var(--section-spacing);
     }



     .accordion-container {
         display: flex;
         flex-direction: column;
         gap: 0;
         border: 1px solid var(--border);
         border-radius: 12px;
         overflow: hidden;
     }

     .accordion-item {
         border-bottom: 1px solid var(--border);
         transition: var(--transition);
     }

     .accordion-item:last-child {
         border-bottom: none;
     }

     .accordion-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 18px 24px;
         background: #fff;
         cursor: pointer;
         user-select: none;
         transition: var(--transition);
         gap: 16px;
     }

     .accordion-item:not(.expanded) .accordion-header:hover {
         background: linear-gradient(135deg, rgba(11, 87, 208, 0.08), rgba(19, 63, 154, 0.08));
     }

     .accordion-item.expanded .accordion-header {
         background: linear-gradient(135deg, var(--primary), var(--secondary));
         color: white !important;
         font-weight: 600;
     }

     .module-number {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: auto;
         height: 36px;
         background: rgba(11, 87, 208, 0.15);
         border-radius: 8px;
         font-weight: 700;
         font-size: 14px;
         padding: 0 12px;
         color: var(--primary);
         flex-shrink: 0;
         transition: var(--transition);
     }

     .accordion-item.expanded .module-number {
         background: rgba(255, 255, 255, 0.25);
         color: white;
     }

     .module-title {
         flex: 1;
         font-size: 15px;
         font-weight: 600;
         color: inherit;
     }

     .accordion-item.expanded .module-title {
         color: white !important;
     }

     .accordion-chevron {
         font-size: 20px;
         transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
         display: flex;
         align-items: center;
         color: inherit;
         flex-shrink: 0;
     }

     .accordion-item.expanded .accordion-chevron {
         transform: rotate(180deg);
     }

     .accordion-content {
         max-height: 0;
         overflow: hidden;
         opacity: 0;
         transition: max-height 0.4s ease, opacity 0.3s ease;
         background: var(--bg);
     }

     .accordion-item.expanded .accordion-content {
         max-height: 3000px;
         opacity: 1;
     }

     .lessons-container {
         display: flex;
         flex-direction: column;
         background: #fff;
         gap: 0;
         padding: 8px 12px;
     }

     .lesson-item {
         border: 1px solid var(--border);
         border-radius: 8px;
         margin-bottom: 8px;
         overflow: hidden;
         transition: var(--transition);
     }

     .lesson-item:last-child {
         margin-bottom: 12px;
     }

     .lesson-item:hover {
         border-color: rgba(11, 87, 208, 0.3);
         box-shadow: 0 2px 8px rgba(11, 87, 208, 0.08);
     }

     .lesson-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 14px 16px;
         background: var(--card);
         cursor: pointer;
         user-select: none;
         transition: var(--transition);
         gap: 12px;
     }

     .lesson-item:not(.expanded) .lesson-header:hover {
         background: #f8fafc;
     }

     .lesson-item.expanded .lesson-header {
         background: rgba(11, 87, 208, 0.05);
         border-bottom: 1px solid var(--border);
     }

     .lesson-number {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: auto;
         height: 24px;
         background: rgba(11, 87, 208, 0.1);
         border-radius: 4px;
         padding: 0 8px;
         font-weight: 600;
         font-size: 11px;
         color: var(--primary);
         flex-shrink: 0;
     }

     .lesson-title {
         flex: 1;
         font-size: 14px;
         padding: 0 16px;
         font-weight: 500;
         color: var(--text);
     }

     .lesson-chevron {
         font-size: 16px;
         transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
         display: flex;
         align-items: center;
         color: var(--muted);
         flex-shrink: 0;
     }

     .lesson-item.expanded .lesson-chevron {
         transform: rotate(180deg);
         color: var(--primary);
     }

     .lesson-content {
         max-height: 0;
         overflow: hidden;
         opacity: 0;
         transition: max-height 0.3s ease, opacity 0.2s ease;
     }

     .lesson-item.expanded .lesson-content {
         max-height: 500px;
         opacity: 1;
     }

     .lesson-description {

         padding: 0 16px;
         ;
         color: var(--muted);
         font-size: 13px;
         line-height: 1.6;

     }

     /* ==========================================
COURSE MODULES & CURRICULUM (SIMPLIFIED)
========================================== */

     .lesson-static {
         padding: 16px 0;
         border-bottom: 1px solid var(--border);
         transition: var(--transition);
     }

     .lesson-static:last-child {
         border-bottom: none;
     }

     .lesson-static h5 {
         font-size: 16px;
         font-weight: 600;
         color: var(--primary);
         margin: 0 0 8px 0;
         line-height: 1.4;
     }

     .lesson-static p {
         font-size: 14px;
         color: var(--muted);
         margin: 0;
         line-height: 1.6;
     }

     @media (max-width: 768px) {
         .lesson-static {
             padding: 12px 0;
         }

         .lesson-static h5 {
             font-size: 15px;
             margin-bottom: 6px;
         }

         .lesson-static p {
             font-size: 13px;
         }
     }


     /* ==========================================
STICKY SECTION MENU
========================================== */
     /* Desktop: Centered items */
     .sticky-section-menu {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 16px;
         padding: 0 24px 5px 24px;
         border-radius: 0 0 12px 12px;
         position: sticky;
         top: 0;
         z-index: 999;
         width: 100%;
         background: #eaf3ffff;
         flex-wrap: wrap;
     }

     .sticky-section-menu>* {
         flex: 0 0 auto;
         text-align: center;
     }

     .sticky-section-menu ul {
         list-style: none;
         margin: 0;
         padding: 0;
         display: flex;
         flex-direction: row;
         gap: 0;
     }

     .sticky-section-menu li {
         flex: 0 0 auto;
         padding: 0;
     }

     .sticky-section-menu a {
         display: block;
         padding: 10px 16px;
         color: var(--text);
         text-decoration: none;
         font-weight: 500;
         font-size: 14px;
         border-left: none;
         border-bottom: 2px solid transparent;
         transition: var(--transition);
         white-space: nowrap;
         border-radius: 0;
     }

     .sticky-section-menu a:hover {
         background: transparent;
         color: var(--primary);
         border-left-color: transparent;
         border-bottom: 2px solid var(--primary);
     }

     .sticky-section-menu a.active {
         background: transparent;
         color: var(--primary);
         border-left-color: transparent;
         border-bottom: 2px solid var(--primary);
     }

     @media (max-width: 1250px) {
         .sticky-section-menu {
             display: none;
         }

     }


     /* ==========================================
TOPICS
========================================== */
     .topics {
         display: grid;
         gap: 12px;
         padding-top: 20px;
     }

     .topic {
         display: flex;
         align-items: flex-start;
         gap: 12px;
         padding: 12px;
         border-radius: var(--radius);
         background: rgba(248, 250, 252, .5);
         border: 1px solid var(--border);
         transition: var(--transition);
     }

     .topic:hover {
         background: rgba(65, 105, 215, .05);
         border-color: rgba(65, 105, 215, .2);
     }

     /* ==========================================
FAQ SECTION
========================================== */
     .faq-section {
         
         margin: 48px auto;
         margin-top: var(--section-spacing);
     }

     .faq {
         display: flex;
         flex-direction: column;
         gap: 8px;
     }

     .faq-item {
         background: var(--card);
         border: 1px solid var(--border);
         border-radius: 12px;
         overflow: hidden;
     }

     .faq-q {
         padding: 16px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         cursor: pointer;
         background: #ffffff;
         color: var(--text);
         font-weight: 600;
         font-size: 15px;
         border: none;
         width: 100%;
         text-align: left;
         transition: var(--transition);
     }

     .faq-q:hover {
         background: #f1f5f9;
         color: var(--primary);
     }

     .faq-q span {
         display: flex;
         align-items: center;
         justify-content: center;
         transition: var(--transition);
     }

     .faq-a {
         display: none;
         padding: 16px;
         color: var(--muted);
         line-height: 1.7;
         font-size: 14px;
         border-top: 1px solid var(--border);
     }

     /* ==========================================
TABS
========================================== */
     .tabs-section {
         margin-top: var(--section-spacing);
     }

     .course-support-tab {
         transition: var(--transition);
     }

     .course-support-tab:hover {
         color: var(--primary) !important;
     }

     .course-support-panel {
         animation: fadeIn 0.3s ease-in-out;
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
         }

         to {
             opacity: 1;
         }
     }

     /* ==========================================
CONTACT SIDEBAR
========================================== */
     .sidebar-contact-card {
         background: var(--card);
         padding: 24px;
         border-radius: var(--radius);
         border: 1px solid var(--border);
         margin-bottom: 24px;
         text-align: center;
         box-shadow: var(--shadow-sm);
         transition: var(--transition);
     }



     .contact-label {
         color: var(--muted);
         font-size: 14px;
         font-weight: 600;
         margin-bottom: 12px;
         display: block;
         letter-spacing: 0.5px;
     }

     .contact-phone-link {
         display: block;
         color: var(--primary);
         font-size: 28px;
         font-weight: 800;
         text-decoration: none;

         letter-spacing: -0.5px;
         transition: var(--transition);
         line-height: 1.2;
     }

     .contact-phone-link:hover {
         color: var(--primary-dark);
         transform: scale(1.02);
     }

     .contact-availability {
         font-size: 12px;
         color: var(--muted);
         font-weight: 500;
     }

     /* ==========================================
INSTRUCTORS CAROUSEL SECTION (EQUAL SIZE - SMALLER CARDS)
========================================== */

     .instructors-carousel-wrapper {
         position: relative;
         width: 100%;
         margin-top: 12px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 20px;
     }

     .instructors-scroll-container {
         position: relative;
         width: 100%;
         max-width: 900px;
         /* Wider container: (240 * 3) + (20 * 2) + 180px overflow = 900px */
         margin: 0 auto;
         overflow: hidden;
         background: transparent;
     }

     .instructors-carousel-track {
         display: flex;
         gap: 20px;
         transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
         width: fit-content;
         align-items: stretch;
         /* Ensure all cards stretch to same height */
     }

     /* Disable transitions during manual positioning resets */
     .instructors-carousel-track.no-transition {
         transition: none;
     }

     .instructor-card-item {
         flex: 0 0 240px;
         /* Smaller card width */
         min-width: 240px;
         max-width: 240px;
         display: flex;
         align-items: stretch;
         justify-content: center;
     }

     /* Base instructor card styling - ALL SAME HEIGHT */
     .instructor-card {
         background: var(--card);
         padding: 20px;
         border-radius: 14px;
         border: 1px solid var(--border);
         position: relative;
         overflow: hidden;
         transition: all 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
         box-shadow: var(--shadow-sm);
         width: 100%;
         /* Remove fixed height - let content determine it, then cards will match tallest */
     }



     .instructor-avatar {
         height: 70px;
         width: 70px;
         background: linear-gradient(135deg, var(--primary), var(--secondary));
         display: flex;
         align-items: center;
         justify-content: center;
         color: #fff;
         font-size: 28px;
         font-weight: 700;
         border-radius: 12px;
         margin-bottom: 14px;
         flex-shrink: 0;
         box-shadow: 0 8px 20px rgba(11, 87, 208, 0.2);
     }

     .instructor-name {
         margin: 10px 0 4px;
         font-weight: 700;
         font-size: 15px;
         color: var(--text);
         line-height: 1.3;
     }

     .instructor-title {
         color: var(--primary);
         font-size: 12px;
         font-weight: 600;
         margin-bottom: 10px;
         letter-spacing: 0.5px;
     }

     .instructor-bio {
         color: var(--muted);
         font-size: 13px;
         line-height: 1.5;
         margin: 0;
         flex-grow: 1;
         /* Takes remaining space */
     }

     /* Navigation Buttons Container */
     .instructor-carousel-buttons {
         display: flex;
         gap: 12px;
         align-items: center;
         justify-content: center;
     }

     /* Carousel Navigation Buttons */
     .instructor-carousel-prev,
     .instructor-carousel-next {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background: rgba(11, 87, 208, 0.1);
         border: 1px solid var(--border);
         color: var(--primary);
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: all 0.3s ease;
         opacity: 0.7;
         padding: 0;
         margin: 0;
     }

     .instructor-carousel-prev:hover,
     .instructor-carousel-next:hover {
         opacity: 1;
         background: rgba(11, 87, 208, 0.2);
     }

     .instructor-carousel-prev:disabled,
     .instructor-carousel-next:disabled {
         opacity: 0.3;
         cursor: not-allowed;
     }

     .instructor-carousel-prev::after,
     .instructor-carousel-next::after {
         content: none;
     }

     .instructor-carousel-prev svg,
     .instructor-carousel-next svg {
         width: 20px;
         height: 20px;
     }

     /* Responsive adjustments */
     @media (max-width: 1200px) {
         .instructors-carousel-wrapper {
             gap: 16px;
         }

         .instructors-scroll-container {
             max-width: 800px;
             /* (210 * 3) + (20 * 2) + 140px overflow = 800px */
         }

         .instructor-card-item {
             flex: 0 0 210px;
             min-width: 210px;
             max-width: 210px;
         }

         .instructor-avatar {
             height: 90px;
             width: 90px;
             font-size: 26px;
             margin-bottom: 12px;
         }

         .instructor-name {
             font-size: 14px;
             margin: 8px 0 3px;
         }

         .instructor-title {
             font-size: 11px;
             margin-bottom: 8px;
         }

         .instructor-bio {
             font-size: 12px;
         }
     }

     @media (max-width: 992px) {
         .instructors-carousel-wrapper {
             gap: 14px;
         }

         .instructors-scroll-container {
             max-width: 700px;
             /* (175 * 3) + (18 * 2) + 150px overflow = 700px */
         }

         .instructors-carousel-track {
             gap: 18px;
         }

         .instructor-card-item {
             flex: 0 0 175px;
             min-width: 175px;
             max-width: 175px;
         }

         .instructor-card {
             padding: 16px;
         }

         .instructor-avatar {
             height: 80px;
             width: 80px;
             font-size: 22px;
             margin-bottom: 10px;
         }

         .instructor-name {
             font-size: 13px;
             margin: 6px 0 2px;
         }

         .instructor-title {
             font-size: 11px;
             margin-bottom: 6px;
         }

         .instructor-bio {
             font-size: 11px;
             line-height: 1.4;
         }

         .instructor-carousel-prev,
         .instructor-carousel-next {
             width: 36px;
             height: 36px;
         }
     }

     @media (max-width: 768px) {
         .instructors-carousel-wrapper {
             gap: 12px;
         }

         .instructors-scroll-container {
             max-width: 600px;
             /* (145 * 3) + (16 * 2) + 140px overflow = 600px */
         }

         .instructors-carousel-track {
             gap: 16px;
         }

         .instructor-card-item {
             flex: 0 0 145px;
             min-width: 145px;
             max-width: 145px;
         }

         .instructor-card {
             padding: 14px;
         }

         .instructor-avatar {
             height: 70px;
             width: 70px;
             font-size: 20px;
             margin-bottom: 8px;
         }

         .instructor-name {
             font-size: 12px;
             margin: 4px 0 2px;
         }

         .instructor-title {
             font-size: 10px;
             margin-bottom: 4px;
         }

         .instructor-bio {
             font-size: 10px;
             line-height: 1.3;
         }

         .instructor-carousel-prev,
         .instructor-carousel-next {
             width: 32px;
             height: 32px;
         }
     }

     @media (max-width: 600px) {
         .instructors-carousel-wrapper {
             gap: 10px;
         }

         .instructors-scroll-container {
             max-width: calc(100% - 20px);
             padding: 0 10px;
         }

         .instructor-card-item {
             flex: 0 0 130px;
             min-width: 130px;
             max-width: 130px;
         }

         .instructors-carousel-track {
             gap: 14px;
         }

         .instructor-card {
             padding: 12px;
         }

         .instructor-avatar {
             height: 60px;
             width: 60px;
             font-size: 18px;
             margin-bottom: 6px;
         }

         .instructor-name {
             font-size: 11px;
             margin: 3px 0 1px;
         }

         .instructor-title {
             font-size: 9px;
             margin-bottom: 3px;
         }

         .instructor-bio {
             font-size: 9px;
             line-height: 1.2;
         }
     }




     /* ==========================================
BLOGS & INSIGHTS SECTION
========================================== */
     .blogs-scroller {
         display: flex;
         gap: 20px;
         overflow-x: auto;
         overflow-y: hidden;
         scroll-behavior: smooth;
         padding-bottom: 12px;
         margin-bottom: -12px;
         -webkit-overflow-scrolling: touch;
     }

     .blog-card {
         background: var(--card);
         border: 1px solid var(--border);
         border-radius: 12px;
         overflow: hidden;
         transition: var(--transition);
         flex: 0 0 320px;
         min-width: 320px;
     }

     .blog-card:hover {
         border-color: var(--primary);
         box-shadow: var(--shadow);
         transform: translateY(-4px);
     }

     .blog-image {
         height: 160px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 48px;
         background: linear-gradient(135deg, #667eea, #764ba2);
     }

     .blog-image.gradient-pink {
         background: linear-gradient(135deg, #f093fb, #f5576c);
     }

     .blog-image.gradient-blue {
         background: linear-gradient(135deg, #4facfe, #00f2fe);
     }

     .blog-image.gradient-green {
         background: linear-gradient(135deg, #43e97b, #38f9d7);
     }

     .blog-content {
         padding: 20px;
     }

     .blog-tag {
         display: inline-block;
         padding: 4px 8px;
         border-radius: 4px;
         font-size: 12px;
         font-weight: 600;
         margin-bottom: 12px;
         background: rgba(65, 105, 215, 0.1);
         color: var(--primary);
     }

     .blog-tag.tag-risk {
         background: rgba(245, 87, 108, 0.1);
         color: #f5576c;
     }

     .blog-tag.tag-tools {
         background: rgba(79, 172, 254, 0.1);
         color: #4facfe;
     }

     .blog-tag.tag-career {
         background: rgba(67, 233, 123, 0.1);
         color: #43e97b;
     }

     .blog-title {
         font-weight: 700;
         font-size: 15px;
         color: #0f172a;
         text-decoration: none;
         display: block;
         margin-bottom: 8px;
         transition: var(--transition);
     }

     .blog-title:hover {
         color: var(--primary);
     }

     .blog-description {
         color: var(--muted);
         margin-top: 8px;
         font-size: 14px;
         line-height: 1.6;
     }

     /* ==========================================
CERTIFICATE SECTION
========================================== */
     .certificate-container {
         background: var(--card);
         padding: 32px;
         border-radius: var(--radius);
         border: 1px solid var(--border);
         box-shadow: var(--nm-flat);
         margin-top: 24px;
     }

     .certificate-content {
         display: flex;
         gap: 32px;
         align-items: center;
         flex-wrap: wrap;
     }

     .certificate-image {
         flex: 1;
         min-width: 250px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .certificate-image img {
         max-width: 100%;
         height: auto;
         border-radius: 12px;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
     }

     .certificate-info {
         flex: 1;
         min-width: 300px;
     }

     .certificate-title {
         font-size: 24px;
         font-weight: 700;
         color: #0f172a;
         margin-bottom: 16px;
     }

     .certificate-description {
         color: var(--muted);
         font-size: 15px;
         line-height: 1.8;
         margin-bottom: 16px;
     }

     .certificate-benefits {
         background: #f0f7ff;
         border-left: 4px solid var(--primary);
         padding: 16px;
         border-radius: 8px;
         
     }

     .certificate-benefits-title {
         font-weight: 600;
         color: #0f172a;
         margin-bottom: 8px;
     }

     .certificate-benefits-list {
         list-style: none;
         padding: 0;
         color: var(--muted);
         font-size: 14px;
     }

     .certificate-benefits-item {
         display: flex;
         align-items: center;
         gap: 8px;
         margin-bottom: 8px;
     }

     .certificate-benefits-item:last-child {
         margin-bottom: 0;
     }

     .certificate-benefits-icon {
         flex-shrink: 0;
         width: 18px;
         height: 18px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
     }

     /* ==========================================
BONUS & UTILITIES
========================================== */
     .bonus-box {
         font-size: 14px;
         background: #f0f7ff;
         border: 1px solid #dbeafe;
         border-radius: 6px;
         padding: 8px 12px;
         display: flex;
         align-items: center;
         gap: 8px;
         margin: 12px 0;
     }

     .bonus-star {
         color: #eab308;
     }

     .link-with-arrow {
         display: inline-flex;
         font-size: 12px;
         align-items: center;
         text-align: center;
         gap: 4px;
     }

     @keyframes pulse {
         0% {
             opacity: 1;
         }

         50% {
             opacity: 0.6;
         }

         100% {
             opacity: 1;
         }
     }

     .animate-pulse {
         animation: pulse 2s infinite;
     }

     /* ==========================================
DATE CHIPS & BATCH INFO
========================================== */
     .date-chips {
         display: flex;
         gap: 8px;
         flex-wrap: wrap;
         margin-bottom: 8px;
         align-items: center;
     }

     .date-chip {
         background: #eef2ff;
         color: var(--muted);
         border: 1px solid #dbeafe;
         padding: 4px 8px;
         border-radius: 999px;
         font-size: 10px;
         font-weight: 600;
         display: inline-flex;
         align-items: center;
         gap: 6px;
     }

     .date-title {
         font-size: 12px;
         color: var(--muted);
         font-weight: 700;
         margin-top: 6px;
         display: flex;
         align-items: center;
         gap: 8px;
     }

     .calendar-icon {
         width: 16px;
         height: 16px;
         color: var(--muted);
         display: inline-block;
     }

     .date-hr {
         border: 0;
         border-top: 1px solid #000000;
         margin: 6px 0 8px;
     }

     .batch-info {
         margin: 0 0 10px 0;
     }

     /* ==========================================
NEW SEMANTIC CLASSES FOR CONSOLIDATED STYLES
========================================== */

     /* Skill cards and bordered left containers */
     .skill-item {
         border-left: 4px solid var(--primary);
         padding-left: 20px;
     }

     .skill-item h3 {
         font-weight: 700;
         color: var(--text);
         font-size: 18px;
         margin: 0 0 12px;
     }

     .skill-item p {
         color: var(--muted);
         font-size: 15px;
         margin: 0;
         line-height: 1.6;
     }

     /* Target audience cards */
     .audience-card {
         background: var(--card);
         padding: 16px;
         border-radius: 12px;
         border: 1px solid var(--border);
         display: flex;
         flex-direction: column;
         gap: 8px;
     }

     .audience-card h4 {
         font-weight: 600;
         color: #0f172a;
         margin: 0;
         font-size: 14px;
     }

     /* Roadmap slide styles */
     .roadmap-section {
         margin-top: var(--section-spacing);
     }

     .roadmap-tagline {
         font-size: 14px;
         color: var(--muted);
         margin-bottom: 16px;
     }

     .roadmap-main {
         background: var(--card);
         padding: 32px;
         border-radius: var(--radius);
         border: 1px solid var(--border);
         box-shadow: var(--nm-flat);
         display: flex;
         flex-direction: column;
         gap: 32px;
     }

     .roadmap-image {
         flex: 1;
         width: 100%;
     }

     .roadmap-image img {
         width: 100%;
         border-radius: 12px;
         display: block;
     }

     .roadmap-content {
         flex: 1;
         display: flex;
         flex-direction: column;
         gap: 20px;
     }

     .roadmap-slide {
         transition: var(--transition);
         display: block;
         padding: 0;
     }

     .roadmap-slide.hidden {
         display: none;
     }

     .roadmap-slide-header {
         display: flex;
         gap: 20px;
         align-items: flex-start;
     }

     .step-badge {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background: linear-gradient(135deg, var(--primary), var(--primary-dark));
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-weight: 700;
         font-size: 18px;
         flex-shrink: 0;
     }

     .step-content {
         flex: 1;
     }

     .step-title {
         font-weight: 700;
         color: #0f172a;
         font-size: 22px;
         margin: 0 0 12px;
     }

     .step-description {
         color: var(--muted);
         font-size: 15px;
         margin: 0;
         line-height: 1.6;
     }

     .progress-bar-wrapper {
         height: 8px;
         background: var(--border);
         border-radius: 4px;
         margin-top: 12px;
         overflow: hidden;
     }

     .progress-bar-fill {
         height: 100%;
         background: var(--primary);
         border-radius: 4px;
         transition: width 0.3s ease;
     }

     .roadmap-nav {
         display: flex;
         gap: 12px;
         justify-content: flex-end;
         align-items: center;
         margin-top: 24px;
     }

     .roadmap-counter {
         font-size: 14px;
         color: var(--muted);
         min-width: 60px;
         text-align: center;
     }

     .roadmap-nav-btn {
         background: var(--border);
         border: none;
         width: 40px;
         height: 40px;
         border-radius: 8px;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: var(--transition);
         color: var(--text);
     }

     .roadmap-nav-btn:hover {
         background: var(--primary);
         color: white;
         transform: translateY(-2px);
     }

     .roadmap-nav-btn.next {
         background: var(--primary);
         color: white;
     }

     .roadmap-nav-btn.disabled,
     .roadmap-nav-btn:disabled {
         opacity: 0.4;
         cursor: not-allowed;
         pointer-events: none;
     }


     /* Why Get Certified cards */
     .why-cards-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 24px;
         margin-top: 24px;
     }

     .why-card {
         background: var(--card);
         padding: 28px;
         border-radius: 12px;
         border: 1px solid var(--border);
         position: relative;
         text-align: center;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
         transition: var(--transition);
     }

     .why-card:hover {
         border-color: var(--primary);
         box-shadow: var(--shadow);
         transform: translateY(-4px);
     }

     .why-card-badge {
         position: absolute;
         top: -20px;
         left: 50%;
         transform: translateX(-50%);
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background: var(--primary);
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .why-card-title {
         font-weight: 700;
         color: #0f172a;
         font-size: 18px;
         margin: 15px 0 12px;
     }

     .why-card-description {
         color: var(--muted);
         font-size: 14px;
         line-height: 1.6;
         margin: 0;
     }

     /* Section utilities */
     .section-tagline {
         font-size: 14px;
         color: var(--muted);
         margin-bottom: 24px;
     }

     .section-item-group {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 16px;
         margin-bottom: 20px;
     }

     /* ==========================================
RESPONSIVE DESIGN - MOBILE FIRST
========================================== */

     @media (max-width: 768px) {
         body {
             font-size: 14px;
         }

         .hero {
             padding: 40px 20px;
             padding-top: 100px;
         }

         .hero .container {
             padding: 0;
         }

         .hero .cta-row {
             flex-direction: column;
             gap: 12px;
             width: 100%;
         }

         .hero-inner {
             flex-direction: column;
             gap: 20px;
         }

         .hero-left,
         .hero-right {
             width: 100%;
         }

         .hero-right {
             display: none;
         }

         .feat {
             width: 100%;
             margin-bottom: 12px;
             padding: 16px;
             flex: 1 1 calc(100% - 12px);
             max-width: calc(100% - 12px);
         }

         .features-grid {
             display: flex;
             flex-direction: column;
             gap: 12px;
             margin-top: 24px;
         }

         .hero h1 {
             font-size: calc(var(--h1-size) * 0.9);
             line-height: 1.3;
         }

         .hero-note {
             margin-top: 24px;
             flex-direction: row;
             align-items: center;
         }

         .btn {
             width: 100%;
         }

         .module-title {
             font-size: 14px;
         }

         .module-icon {
             width: 28px;
             height: 28px;
             font-size: 11px;
         }

         .faq-q {
             font-size: 14px;
         }

         .faq-a {
             font-size: 13px;
         }

         .course-support-tab {
             padding: 10px 5px !important;
             font-size: 12px !important;
         }

         .module-head {
             padding: 12px;
         }

         .module-content {
             padding: 12px;
         }

         .pricing-tabs {
             flex-direction: column;
             gap: 8px;
         }

         .pricing-tab-btn {
             width: 100%;
         }

         .certificate-container {
             padding: 20px;
         }

         .certificate-content {
             flex-direction: column;
             gap: 24px;
         }

         .certificate-image,
         .certificate-info {
             min-width: auto;
             flex: 1 1 100%;
         }

         .instructor-card,
         .blog-card {
             flex: 0 0 calc(100vw - 40px);
         }

         .roadmap-main {
             padding: 20px;
         }

         .why-cards-grid {
             grid-template-columns: 1fr;
         }

         .section-item-group {
             grid-template-columns: 1fr;
         }

         .why-card {
             padding: 20px;
         }

         .date-chip {
             font-size: 11px;
             padding: 4px 6px;
         }

         .date-title {
             font-size: 11px;
             gap: 6px;
         }

         .sticky-nav {
             padding: 12px 16px;
         }

         .sticky-nav .btn {
             padding: 8px 16px;
         }
     }

     @media (max-width: 480px) {
         :root {
             --section-spacing: 32px;
         }

         .hero {
             padding: 24px 12px;
             padding-top: 100px;
         }

         .hero-content {
             padding: 0 12px;
         }

         .feat {
             padding: 12px;
         }

         .roadmap-steps,
         .eligibility-grid {
             grid-template-columns: 1fr;
         }

         input,
         select,
         textarea {
             width: 100%;
         }

         .form-row {
             flex-direction: column;
             gap: 12px;
         }

         section:not(.hero) {
             margin-top: var(--section-spacing);
         }

         .section-item-group {
             grid-template-columns: 1fr;
         }

         @media (prefers-reduced-motion: no-preference) {
             :root {
                 scroll-behavior: smooth;
                 scroll-padding-top: 80px;
             }
         }
     }

     /* ==========================================
FEATURES GRID UTILITIES (NEW)
========================================== */

     .feature-item {
         flex: 1 1 calc(50% - 0.25rem);
         min-width: 200px;
         display: flex;
         align-items: flex-start;
         /* Changed from center to flex-start */
         gap: 0.5rem;
         padding-bottom: 10px;
     }

     .feature-item svg {
         width: 24px;
         height: 24px;
         flex-shrink: 0;
         min-width: 24px;
         min-height: 24px;

     }


     .feature-item-content {
         display: flex;
         flex-direction: column;
         gap: 0rem;

     }

     .feature-item-title {
         line-height: 1.2;
         color: white;
         font-size: 14px;
         margin-top: 3px;
     }

     .feature-item-description {
         font-size: 13px;
         opacity: 0.9;
         color: rgba(255, 255, 255, 0.7);
     }

     /* ==========================================
COURSE HIGHLIGHTS GRID (NEW)
========================================== */

     .highlights-grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 20px;
     }

     .highlight-card {
         background: white;
         padding: 22px;
         border-radius: 12px;
         border: 1px solid var(--border);
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         gap: 12px;
         min-height: 140px;
         transition: var(--transition);
     }

     .highlight-card:hover {
         /* border-color: var(--primary); */
         box-shadow: var(--shadow-sm);
     }

     .highlight-icon {
         width: 44px;
         height: 44px;
         background: #eef6ff;
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
     }

     .highlight-icon svg {
         width: 20px;
         height: 20px;
     }

     .highlight-title {
         font-weight: 700;
         color: #0f172a;
         font-size: 15px;
         margin: 0;
         line-height: 1.4;
     }

     .highlight-description {
         color: var(--muted);
         font-size: 13px;
         line-height: 1.5;
         margin: 0;
     }

     /* ==========================================
SECTION TAGLINE (REFINEMENT)
========================================== */

     .section-tagline {
         font-size: 18px;
         color: var(--muted);
         margin-bottom: 16px;
     }

     .section-tagline.with-margin-top {
         margin-top: -8px;
     }

     /* ==========================================
CORPORATE TRAINING SECTION (NEW)
========================================== */

     .corporate-top-section {
         background: var(--card);
         padding: 28px;
         border-radius: 12px 12px 0 0;
         border: 1px solid var(--border);
         display: flex;
         gap: 32px;
         align-items: center;
     }



     .corporate-features-grid {
         flex: 1;
         min-width: 300px;
     }

     /* Left side with bullets - BIGGER */
     .corporate-top-section .corporate-features-cols {
         flex: 2;
         /* Takes up 60% of space */
     }

     .corporate-top-section .corporate-image {
         flex: 0.5;
         /* Takes up 60% of space */
     }

     .corporate-features-cols {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 16px;
     }

     .corporate-feature-point {
         display: flex;
         gap: 12px;
     }

     .corporate-feature-icon {
         width: 20px;
         height: 20px;
         flex-shrink: 0;
         margin-top: 2px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .corporate-feature-content {
         display: flex;
         flex-direction: column;
         gap: 4px;
     }

     .corporate-feature-title {
         font-weight: 600;
         color: #0f172a;
         font-size: 14px;
         margin: 0;
     }

     .corporate-feature-description {
         color: var(--muted);
         font-size: 13px;
         margin: 0;
     }

     .corporate-image {
         flex: 1;
         min-width: 280px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .corporate-image img {
         max-width: 100%;
         height: auto;
         border-radius: 12px;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
         display: block;
     }

     .corporate-bottom-section {
         background: linear-gradient(135deg, var(--primary), var(--primary-dark));
         padding: 24px;
         border-radius: 0 0 12px 12px;
         color: white;
         display: flex;
         gap: 20px;
         align-items: center;
         justify-content: space-between;
         flex-wrap: wrap;
     }

     .corporate-bottom-content h3 {
         font-weight: 700;
         font-size: 16px;
         margin: 0 0 8px;
         color: white;
     }

     .corporate-bottom-content p {
         margin: 0;
         font-size: 14px;
         opacity: 0.95;
     }

     .corporate-bottom-btn {
         background: white!important;
         color: var(--primary);
         font-weight: 600;
         white-space: nowrap;
     }

     .corporate-bottom-btn:hover {
         background: black!important;
         color: #fff;
     }

     .corporate-bottom-content h4 {
         color: #fff;
     }

     /* ==========================================
MOBILE ADJUSTMENTS FOR NEW CLASSES
========================================== */

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

         .corporate-top-section {
             flex-direction: column;
             gap: 24px;
         }

         .corporate-features-grid {
             min-width: auto;
             width: 100%;
         }

         .corporate-image {
             min-width: auto;
             width: 100%;
         }

         .corporate-bottom-section {
             flex-direction: column;
             align-items: flex-start;
         }

         .corporate-bottom-section .btn {
             width: 100%;
         }

         .feature-item {
             flex: 1 1 100%;
             min-width: auto;
         }
     }

     /* ==========================================
CALLBACK FORM CARD (NEW)
========================================== */

     .callback-card {
         background: var(--card);
         padding: 24px;
         border-radius: var(--radius);
         border: 1px solid var(--border);
         margin-bottom: 24px;
         text-align: center;
         display: flex;
         flex-direction: column;
         gap: 4px;
     }

     .callback-title {
         color: #000;
         font-size: 24px;
         font-weight: 600;
         margin: 0;
         line-height: 1.3;
     }

     .callback-description {
         color: var(--muted);
         font-size: 14px;
         margin: 0;
         opacity: 0.9;
     }

     .aside-form {
         display: flex;
         flex-direction: column;
         gap: 12px;
         margin-top: 8px;
     }

     .aside-form input {
         padding: 12px 16px;
         border: 1px solid var(--border);
         border-radius: var(--radius-sm);
         font-family: inherit;
         font-size: 14px;
         color: var(--text);
         background: white;
         transition: var(--transition);
     }

     .aside-form input::placeholder {
         color: var(--muted);
         opacity: 0.6;
     }

     .aside-form input:focus {
         outline: none;
         border-color: var(--primary);
         box-shadow: 0 0 0 3px rgba(11, 87, 208, 0.1);
     }

     .aside-form .btn {
         width: 100%;
         margin-top: 4px;
     }

     @media (max-width: 768px) {
         .callback-card {
             padding: 18px;
         }

         .callback-title {
             font-size: 18px;
         }
     }

     /* ==========================================
PRICING CARD CONTENT (NEW)
========================================== */

     .pricing-card-content {
         margin-top: 12px;
         color: var(--muted);
         line-height: 1.5;
         display: flex;
         flex-direction: column;
         gap: 12px;
     }

     .pricing-card-title {
         font-weight: 700;
         margin-bottom: 6px;
         color: #000;
         font-size: 16px;
         margin: 0;
     }

     .feature-list {
         margin: 2px 0 0 0;
         color: var(--muted);
         padding: 0;
         list-style: none;
         display: flex;
         flex-direction: column;
         gap: 4px;
     }

     .feature-list-item {
         display: flex;
         gap: 6px;
         align-items: center;
         margin-bottom: 5px;
     }

     .feature-list-icon {
         flex: 0 0 18px;
         display: inline-flex;
         align-items: center;
         justify-content: center;

     }

     .feature-list-icon svg {
         width: 12px;
         height: 12px;
     }

     .feature-list-text {
         font-size: 12px;
         color: #000;
         line-height: 1.2;
     }

     /* Update bonus-box styling */
     .bonus-box {
         font-size: 14px;
         background: #f0f7ff;
         border: 1px solid #dbeafe;
         border-radius: 6px;
         padding: 8px 12px;
         display: flex;
         align-items: center;
         gap: 8px;
         margin: 12px 0;
         width: 100%;
     }

     .bonus-box .bonus-star {
         color: #eab308;
         flex-shrink: 0;
         width: 16px;
         height: 16px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
     }

     .bonus-box span {
         font-weight: 600;
         color: var(--primary);
         margin: 0;
     }

     /* Enroll button full width */
     .pricing-card-content .btn {
         width: 100%;
     }

     /* Enroll Button - styled as button */
     .btn-enroll {
         padding: 12px 22px;
         border-radius: 5px;
         border: none;
         font-weight: 600;
         font-size: 15px;
         cursor: pointer;
         transition: var(--transition);
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
         text-decoration: none;
         background: linear-gradient(135deg, var(--primary), var(--primary-dark));
         color: var(--card)!important;
         box-shadow: 0 8px 26px rgba(11, 87, 208, .18);
     }

     .btn-enroll:hover {
         transform: translateY(-2px);
         box-shadow: 0 14px 36px rgba(11, 87, 208, .22);
         color: var(--card);
         text-decoration: none;
     }

     .btn-enroll:focus {
         outline: none;
         color: var(--card);
         text-decoration: none;
     }


     .price-note {

         color: #b91c1c;
         font-weight: 700;
         text-align: center;
         font-size: 13px;
     }

     .price-note.animate-pulse {
         animation: pulse 2s infinite;
     }

     .show-all-classes-wrapper {

         text-align: center;
     }

     .link-like {
         color: var(--primary);
         text-decoration: none;
         font-size: 12px;
         transition: var(--transition);
         display: inline-flex;
         align-items: center;
         gap: 4px;
         font-weight: 600;
     }

     .link-like:hover {
         gap: 8px;
     }

     .link-like svg {
         width: 16px;
         height: 16px;
         stroke-width: 2;
         stroke-linecap: round;
         stroke-linejoin: round;
     }

     @media (max-width: 768px) {
         .pricing-card-content {
             gap: 10px;
         }

         .feature-list {
             margin: 12px 0;
         }

         .bonus-box {
             padding: 6px 10px;
             font-size: 13px;
         }

         .price-note {
             font-size: 12px;
         }
     }

     /* ==========================================
PRICING CARD HEADER (NEW)
========================================== */

     .pricing-header {
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
         gap: 12px;
     }

     .pricing-header-left {
         display: flex;
         flex-direction: column;
         gap: 6px;
         flex: 1;
     }

     .pricing-plan-label {
         font-size: 12px;
         color: var(--muted);
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         margin: 0;
     }

     .pricing-value-wrapper {
         display: flex;
         align-items: baseline;
         gap: 8px;
     }

     .pricing-original-price {
         /* text-decoration: line-through; */
         color: var(--muted);
         font-size: 13px;
         opacity: 0.7;
     }

     .pricing-current-price {
         color: var(--primary);
         font-weight: 800;
         font-size: 25px;
         line-height: 1;
     }

     /* Badge positioning override for header layout */
     .pricing-card .discount {
         position: absolute;
         top: 5px;
         right: 5px;
         padding: 6px 12px;
         border-radius: 999px;
         font-size: 11px;
         font-weight: 700;
         color: #fff;
         box-shadow: 0 4px 12px rgba(2, 6, 23, 0.15);
         z-index: 3;
     }

     .pricing-card .discount--best {
         background: linear-gradient(135deg, #06b6d4, #3b82f6);
     }

     .pricing-card .discount--popular {
         background: linear-gradient(135deg, #f59e0b, #ef4444);
     }

     .pricing-card .discount--limited {
         background: linear-gradient(135deg, #ac0050ff, #d42dc7ff);
     }

     .pricing-card:hover .discount {
         transform: translateY(-3px) rotate(-4deg);
     }

     @media (max-width: 768px) {
         .pricing-header {
             gap: 10px;
         }

         .pricing-current-price {
             font-size: 22px;
         }

         .pricing-plan-label {
             font-size: 11px;
         }
     }

     /* ==========================================
TABS & TAB NAVIGATION
========================================== */
     .tabs-section {
         margin-top: var(--section-spacing);
     }

     .tabs-list {
         display: flex;
         gap: 8px;
         flex-wrap: wrap;
         margin-bottom: 24px;
         border-bottom: 2px solid var(--border);
         padding-bottom: 0;
     }

     .course-support-tab {
         padding: 12px 5px;
         background: none;
         border: none;
         border-bottom: 3px solid transparent;
         color: var(--muted);
         font-weight: 600;
         cursor: pointer;
         transition: var(--transition);
         font-size: 14px;
         position: relative;
         white-space: nowrap;
     }

     .course-support-tab:hover {
         color: var(--primary);
         border-bottom-color: rgba(11, 87, 208, 0.3);
     }

     .course-support-tab.active {
         color: var(--primary);
         border-bottom-color: var(--primary);
     }

     .course-support-panel {
         animation: fadeIn 0.3s ease-in-out;
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
         }

         to {
             opacity: 1;
         }
     }

     @media (max-width: 768px) {
         .tabs-list {
             gap: 4px;
             margin-bottom: 20px;
         }

         .course-support-tab {
             padding: 10px 5px;
             font-size: 12px;
         }
     }

     /* ==========================================
CTA ROW (Call-to-Action Row)
========================================== */
     /* CTA Row - Base styles */
     .cta-row {
         display: flex;
         gap: 16px;
         align-items: center;
         margin-top: 24px;
         flex-wrap: wrap;
     }

     .cta-row .btn {
         width: auto !important;
         padding: 12px 15px;
         white-space: nowrap;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
     }


     /* Tablet: 2-column button layout */
     @media (max-width: 768px) {
         .cta-row {
             gap: 12px;
             margin-top: 20px;
         }

         .cta-row .btn {
             flex: 1 1 calc(50% - 6px);
             min-width: 140px;
         }
     }

     /* Mobile: Stack buttons vertically */
     @media (max-width: 480px) {
         .cta-row .btn {
             flex: 1 1 100%;
         }
     }

     .read-more-hidden {
         display: none;
         margin-top: 12px;
         color: var(--muted);
     }

     /* ==========================================
SCHEDULE & CARD GRIDS
========================================== */
     .schedule-row {
         display: flex;
         gap: 16px;
         flex-wrap: wrap;
         margin-top: var(--component-spacing);
     }

     .sched-card {
         flex: 1;
         min-width: 220px;
         position: relative;
         overflow: hidden;
         border-radius: var(--radius-sm);
         background: var(--card);
         border: 1px solid var(--border);
         transition: var(--transition);
     }

     .sched-card:hover {
         transform: translateY(-4px);
         box-shadow: var(--shadow);
     }

     .sched-card img {
         width: 100%;
         height: auto;
         display: block;
         object-fit: cover;
     }

     /* Responsive adjustments */
     @media (max-width: 992px) {
         .schedule-row {
             gap: 14px;
         }

         .sched-card {
             flex: 1 1 calc(50% - 7px);
             min-width: 180px;
         }
     }

     @media (max-width: 768px) {
         .schedule-row {
             gap: 12px;
         }

         .sched-card {
             flex: 1 1 100%;
             min-width: unset;
         }
     }

     /* ==========================================
SKILLS GRID CONTAINER & LAYOUT
========================================== */
     .skills-card-container {
         background: var(--card);
         padding: 32px;
         border-radius: var(--radius);
         border: 1px solid var(--border);
         box-shadow: var(--nm-flat);
         display: flex;
         flex-direction: column;
         gap: 32px;
         align-items: stretch;
         margin-top: var(--component-spacing);
     }

     .skills-grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 32px;
     }

     /* Responsive breakpoints for skills grid */
     @media (max-width: 1024px) {
         .skills-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 28px;
         }

         .skills-card-container {
             padding: 28px;
             gap: 28px;
         }
     }

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

         .skills-card-container {
             padding: 20px;
             gap: 20px;
         }

         .skill-item {
             padding-left: 16px;
         }
     }

     @media (max-width: 480px) {
         .skills-card-container {
             padding: 16px;
             gap: 16px;
         }

         .skills-grid {
             gap: 16px;
         }

         .skill-item h3 {
             font-size: 16px;
         }

         .skill-item p {
             font-size: 14px;
         }
     }

     /* ==========================================
ROADMAP CAROUSEL COMPONENT
========================================== */

     /* Outer wrapper */
     .roadmap-wrapper {
         position: relative;
         margin-top: 24px;
     }

     /* Carousel container */
     .roadmap-carousel {
         display: grid;
         grid-template-columns: 1fr;
         gap: 20px;
         position: relative;
     }

     /* Main card container */
     .roadmap-container {
         background: var(--card);
         padding: 32px;
         border-radius: var(--radius);
         border: 1px solid var(--border);
         box-shadow: var(--nm-flat);
         display: flex;
         flex-direction: column;
         gap: 32px;
         align-items: stretch;
     }

     /* Image wrapper */
     .roadmap-image {
         flex: 1;
         width: 100%;
     }

     /* Content wrapper */
     .roadmap-content {
         flex: 1;
         display: flex;
         flex-direction: column;
         gap: 20px;
         width: 100%;
     }

     /* Individual slide */
     .roadmap-slide {
         transition: var(--transition);
         padding: 0;
     }

     .roadmap-slide[style*="display: none"] {
         display: none !important;
     }

     /* Step flex container */
     .roadmap-step {
         display: flex;
         gap: 20px;
         align-items: flex-start;
     }

     /* Numbered circle */
     .roadmap-step-number {
         width: 40px;
         height: 40px;
         min-width: 40px;
         min-height: 40px;
         border-radius: 50%;
         background: linear-gradient(135deg, var(--primary), var(--primary-dark));
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-weight: 700;
         font-size: 18px;
         flex-shrink: 0;
         box-shadow: 0 4px 12px rgba(11, 87, 208, .15);
     }

     /* Step header and description wrapper */
     .roadmap-step-content {
         flex: 1;
         display: flex;
         flex-direction: column;
         gap: 12px;
     }

     /* Step title */
     .roadmap-step-content h3 {
         font-weight: 700;
         color: var(--text);
         font-size: clamp(18px, 2.5vw, 22px);
         margin: 0;
         line-height: 1.3;
     }

     /* Step description */
     .roadmap-step-content p {
         color: var(--muted);
         font-size: 15px;
         margin: 0;
         line-height: 1.6;
     }

     /* Progress bar container */
     .roadmap-progress {
         height: 8px;
         background: var(--border);
         border-radius: 4px;
         margin-top: 12px;
         overflow: hidden;
         width: 100%;
     }

     /* Progress bar fill */
     .roadmap-progress-fill {
         height: 100%;
         background: linear-gradient(90deg, var(--primary), var(--primary-dark));
         border-radius: 4px;
         transition: width .6s cubic-bezier(.4, 0, .2, 1);
     }

     /* Navigation section */
     .roadmap-nav {
         display: flex;
         gap: 12px;
         justify-content: flex-end;
         align-items: center;
         margin-top: 24px;
     }

     /* Step counter */
     .roadmap-counter {
         font-size: 14px;
         color: var(--muted);
         min-width: 60px;
         text-align: center;
         font-weight: 500;
     }

     /* Navigation buttons base */
     .roadmap-nav-btn {
         width: 40px;
         height: 40px;
         border-radius: 8px;
         border: none;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: var(--transition);
         flex-shrink: 0;
     }

     .roadmap-nav-btn svg {
         width: 20px;
         height: 20px;
         stroke-width: 2;
     }

     /* Previous button */
     .roadmap-prev {
         background: var(--border);
         color: var(--text);
     }

     .roadmap-prev:hover {
         background: var(--muted);
         color: var(--card);
         transform: translateX(-2px);
     }

     .roadmap-prev:active {
         transform: translateX(-1px);
     }

     /* Next button */
     .roadmap-next {
         background: linear-gradient(135deg, var(--primary), var(--primary-dark));
         color: white;
         box-shadow: 0 4px 12px rgba(11, 87, 208, .2);
     }

     .roadmap-next:hover {
         transform: translateX(2px);
         box-shadow: 0 6px 16px rgba(11, 87, 208, .3);
     }

     .roadmap-next:active {
         transform: translateX(1px);
     }

     /* ==========================================
ROADMAP RESPONSIVE DESIGN
========================================== */

     @media (max-width: 1024px) {
         .roadmap-container {
             padding: 28px;
             gap: 28px;
         }

         .roadmap-step-number {
             width: 36px;
             height: 36px;
             font-size: 16px;
         }

         .roadmap-step-content h3 {
             font-size: 20px;
         }
     }

     @media (max-width: 768px) {
         .roadmap-wrapper {
             margin-top: 20px;
         }

         .roadmap-container {
             padding: 20px;
             gap: 24px;
             flex-direction: column;
         }




         .roadmap-content {
             gap: 16px;
         }

         .roadmap-step {
             gap: 16px;
         }

         .roadmap-step-number {
             width: 36px;
             height: 36px;
             font-size: 16px;
             min-width: 36px;
             min-height: 36px;
         }

         .roadmap-step-content h3 {
             font-size: 18px;
         }

         .roadmap-nav {
             gap: 8px;
             margin-top: 20px;
         }

         .roadmap-counter {
             font-size: 13px;
             min-width: 50px;
         }

         .roadmap-nav-btn {
             width: 36px;
             height: 36px;
         }
     }

     @media (max-width: 480px) {
         .roadmap-container {
             padding: 16px;
             gap: 20px;
         }

         .roadmap-image {
             max-height: none;
             margin-bottom: 16px;
         }

         .roadmap-step {
             gap: 12px;
         }

         .roadmap-step-number {
             width: 32px;
             height: 32px;
             font-size: 14px;
             min-width: 32px;
             min-height: 32px;
         }

         .roadmap-step-content h3 {
             font-size: 16px;
         }

         .roadmap-step-content p {
             font-size: 14px;
         }

         .roadmap-progress {
             height: 6px;
             margin-top: 10px;
         }

         .roadmap-nav {
             gap: 6px;
             margin-top: 16px;
         }

         .roadmap-counter {
             font-size: 12px;
             min-width: 45px;
         }

         .roadmap-nav-btn {
             width: 32px;
             height: 32px;
         }

         .roadmap-nav-btn svg {
             width: 18px;
             height: 18px;
         }
     }

     /* ==========================================
BENEFITS GRID COMPONENT
========================================== */

     /* Benefits grid container */
     .benefits-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 24px;
         margin-top: 50px;
     }

     /* Individual benefit card */
     .benefit-card {
         background: var(--card);
         padding: 28px;
         border-radius: 12px;
         border: 1px solid var(--border);
         position: relative;
         text-align: center;
         box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
         transition: var(--transition);
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     .benefit-card:hover {
         transform: translateY(-4px);
         box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
         border-color: rgba(11, 87, 208, .2);
     }

     /* Checkmark icon badge */
     .benefit-icon {
         position: absolute;
         top: -20px;
         left: 50%;
         transform: translateX(-50%);
         width: 40px;
         height: 40px;
         min-width: 40px;
         min-height: 40px;
         border-radius: 50%;
         background: linear-gradient(135deg, var(--primary), var(--primary-dark));
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 4px 12px rgba(11, 87, 208, .25);
         flex-shrink: 0;
     }

     .benefit-icon svg {
         width: 24px;
         height: 24px;
         color: white;
     }

     /* Card title */
     .benefit-card h3 {
         font-weight: 700;
         color: var(--text);
         font-size: 18px;
         margin: 15px 0 12px;
         line-height: 1.3;
     }

     /* Card description */
     .benefit-card p {
         color: var(--muted);
         font-size: 14px;
         line-height: 1.6;
         margin: 0;
     }

     /* ==========================================
BENEFITS GRID RESPONSIVE DESIGN
========================================== */

     @media (max-width: 1024px) {
         .benefits-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 24px;
         }

         .benefit-card {
             padding: 24px;
         }

         .benefit-card h3 {
             font-size: 17px;
             margin: 12px 0 10px;
         }

         .benefit-card p {
             font-size: 14px;
         }
     }

     @media (max-width: 768px) {
         .benefits-grid {
             grid-template-columns: 1fr;
             gap: 20px;
             margin-top: 20px;
         }

         .benefit-card {
             padding: 24px;
             padding-top: 32px;
         }

         .benefit-icon {
             top: -18px;
             width: 36px;
             height: 36px;
             min-width: 36px;
             min-height: 36px;
         }

         .benefit-icon svg {
             width: 22px;
             height: 22px;
         }

         .benefit-card h3 {
             font-size: 17px;
             margin: 12px 0 10px;
         }

         .benefit-card p {
             font-size: 14px;
             line-height: 1.6;
         }
     }

     @media (max-width: 480px) {
         .benefits-grid {
             grid-template-columns: 1fr;
             gap: 16px;
             margin-top: 16px;
         }

         .benefit-card {
             padding: 20px;
             padding-top: 28px;
         }

         .benefit-icon {
             top: -16px;
             width: 32px;
             height: 32px;
             min-width: 32px;
             min-height: 32px;
         }

         .benefit-icon svg {
             width: 20px;
             height: 20px;
         }

         .benefit-card h3 {
             font-size: 16px;
             margin: 10px 0 8px;
         }

         .benefit-card p {
             font-size: 13px;
             line-height: 1.5;
         }
     }

     /* ==========================================
ELIGIBILITY REQUIREMENTS COMPONENT
========================================== */

     /* Main container */
     .eligibility-container {
         background: var(--card);
         padding: 24px;
         border-radius: 12px;
         border: 1px solid var(--border);
         transition: var(--transition);
     }

     .eligibility-container:hover {
         box-shadow: var(--shadow-sm);
         border-color: rgba(11, 87, 208, .15);
     }

     /* Intro paragraph */
     .eligibility-intro {
         color: var(--text);
         font-size: 15px;
         line-height: 1.8;
         margin: 0 0 20px;
     }

     /* Eligibility criteria box */
     .eligibility-box {
         background: #f0f7ff;
         border-radius: 8px;
         padding: 20px;
         border: 1px solid rgba(11, 87, 208, .08);
     }

     /* Box title */
     .eligibility-title {
         font-weight: 600;
         color: var(--text);
         margin-bottom: 16px;
         font-size: 15px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
     }

     /* List of criteria */
     .eligibility-list {
         display: flex;
         flex-direction: column;
         gap: 12px;
     }

     /* Individual eligibility item */
     .eligibility-item {
         display: flex;
         align-items: flex-start;
         gap: 12px;
     }

     /* SVG icon styling */
     .eligibility-item svg {
         flex-shrink: 0;
         margin-top: 2px;
         transition: var(--transition);
     }

     /* Item text container */
     .eligibility-item p {
         color: var(--muted);
         font-size: 14px;
         margin: 0;
         line-height: 1.6;
     }

     /* Bold text (criterion name) */
     .eligibility-item strong {
         color: var(--text);
         font-weight: 600;
         display: block;
         margin-bottom: 2px;
     }

     /* Hover effect for items */
     .eligibility-item:hover svg {
         transform: scale(1.1) rotate(5deg);
     }

     /* ==========================================
ELIGIBILITY RESPONSIVE DESIGN
========================================== */

     @media (max-width: 1024px) {
         .eligibility-container {
             padding: 20px;
         }

         .eligibility-box {
             padding: 18px;
         }

         .eligibility-intro {
             font-size: 14px;
             margin-bottom: 18px;
         }

         .eligibility-title {
             font-size: 14px;
             margin-bottom: 14px;
         }

         .eligibility-list {
             gap: 10px;
         }

         .eligibility-item {
             gap: 10px;
         }

         .eligibility-item p {
             font-size: 13px;
         }
     }

     @media (max-width: 768px) {
         .eligibility-container {
             padding: 18px;
         }

         .eligibility-box {
             padding: 16px;
             border-radius: 6px;
         }

         .eligibility-intro {
             font-size: 14px;
             line-height: 1.7;
             margin-bottom: 16px;
         }

         .eligibility-title {
             font-size: 13px;
             margin-bottom: 12px;
         }

         .eligibility-list {
             gap: 10px;
         }

         .eligibility-item {
             gap: 10px;
         }

         .eligibility-item svg {
             width: 18px;
             height: 18px;
             margin-top: 3px;
         }

         .eligibility-item p {
             font-size: 13px;
             line-height: 1.5;
         }
     }

     @media (max-width: 480px) {
         .eligibility-container {
             padding: 16px;
             border-radius: 8px;
         }

         .eligibility-box {
             padding: 14px;
             border-radius: 6px;
         }

         .eligibility-intro {
             font-size: 13px;
             line-height: 1.6;
             margin-bottom: 14px;
         }

         .eligibility-title {
             font-size: 12px;
             margin-bottom: 10px;
             letter-spacing: 0.3px;
         }

         .eligibility-list {
             gap: 8px;
         }

         .eligibility-item {
             gap: 8px;
         }

         .eligibility-item svg {
             width: 16px;
             height: 16px;
             margin-top: 4px;
         }

         .eligibility-item p {
             font-size: 12px;
             line-height: 1.5;
         }

         .eligibility-item strong {
             display: inline;
             margin-bottom: 0;
         }
     }

     /* ==========================================
TESTIMONIALS CAROUSEL
========================================== */

     .testimonials-wrapper {
         position: relative;
     }

     .testimonials-carousel {
         display: grid;
         grid-template-columns: 1fr;
         gap: 20px;
         margin-top: 24px;
     }

     .testimonial-slide {
         background: var(--card);
         padding: 24px;
         border-radius: var(--radius);
         border: 1px solid var(--border);
         box-shadow: var(--shadow);
         display: none;
         transition: var(--transition);
     }

     .testimonial-slide[style*="display: block"],
     .testimonial-slide.active {
         display: block;
         animation: fadeIn 0.3s ease-in-out;
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
             transform: translateY(8px);
         }

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

     .testimonial-rating {

         display: flex;
         gap: 3px;
     }

     .star {
         color: #d19600;
         font-size: 1.8em;
     }

     .testimonial-text {
         color: var(--muted);
         font-size: 14px;
         line-height: 1.6;
         margin: 0 0 16px;
         font-style: italic;
     }

     .testimonial-author {
         display: flex;
         align-items: center;
         gap: 12px;
     }

     .author-avatar {
         width: 40px;
         height: 40px;
         min-width: 40px;
         border-radius: 50%;
         background: linear-gradient(135deg, var(--primary), var(--secondary));
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-weight: 700;
         font-size: 14px;
     }

     .author-name {
         margin: 0;
         font-weight: 600;
         color: #0f172a;
         font-size: 14px;
     }

     .author-title {
         margin: 0;
         font-size: 13px;
         color: var(--muted);
     }

     /* Navigation */
     .testimonials-nav {
         display: flex;
         gap: 12px;
         justify-content: flex-end;
         align-items: center;
         margin-top: 24px;
     }

     .testimonial-nav-btn {
         border: none;
         width: 40px;
         height: 40px;
         border-radius: 8px;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: var(--transition);
         color: var(--text);
         background: var(--border);
     }

     .testimonial-prev-btn:hover {
         background: rgba(11, 87, 208, 0.1);
         transform: translateX(-2px);
     }

     .testimonial-next-btn {
         background: var(--primary);
         color: white;
     }

     .testimonial-next-btn:hover {
         background: var(--primary-dark);
         transform: translateX(2px);
         box-shadow: 0 8px 20px rgba(11, 87, 208, 0.2);
     }

     .view-all-btn {
         width: auto;
         padding: 0 16px;
         font-size: 14px;
         font-weight: 500;
         text-decoration: none;
     }

     .testimonial-nav-btn:active {
         transform: scale(0.95);
     }

     /* Responsive */
     @media (max-width: 768px) {
         .testimonials-carousel {
             gap: 16px;
         }

         .testimonial-slide {
             padding: 20px;
         }

         .testimonial-nav-btn {
             width: 36px;
             height: 36px;
         }
     }

     /* Ratings Bar Styles */
     .hero-ratings-bar {
         background-color: white;
         border-radius: 8px;
         padding: 12px 15px;
         color: #000;
         display: inline-block;
         margin-bottom: 20px;
         box-shadow: 0 3px 24px rgb(153 86 86 / 30%);
     }

     .hero-ratings-bar .rating-item {
         margin-left: 1em;
         vertical-align: middle;
     }

     .hero-ratings-bar .rating-item:first-child {
         margin-left: 0;
     }

     .hero-ratings-bar img {
         vertical-align: middle;
     }

     .hero-ratings-img-students {
         margin-bottom: 4px;
         width: 120px;
     }

     .hero-ratings-link-learners {
         color: black;
     }

     .hero-ratings-img-google {
         margin-bottom: 4px;
         width: 25px;
     }

     .hero-ratings-scroll-link {
         text-decoration: none;
         color: inherit;
         cursor: pointer;
     }

     .hero-ratings-img-social {
         width: 24px;
         height: 24px;
     }

     /* ==========================================
BREADCRUMBS
========================================== */

     .breadcrumbs {
         display: flex;
         gap: 2px;
         align-items: center;
         font-size: 12px;
         color: rgba(255, 255, 255, 0.8);
         margin-bottom: 16px;
     }

     .breadcrumbs a {
         color: rgba(255, 255, 255, 0.9);
         text-decoration: none;
         transition: var(--transition);
         padding: 0 5px !important;
         display: inline-flex;
         align-items: center;
     }

     .breadcrumbs a:hover {
         color: white;
         text-decoration: underline;
     }

     .breadcrumbs span {
         color: rgba(255, 255, 255, 0.6);
     }

     .breadcrumbs .current {
         color: white;
         padding: 0 5px;
     }

     /* ==========================================
DYNAMIC FEATURE LIST ITEMS - HERO SECTION
========================================== */
     .features ul {
         display: flex;
         flex-wrap: wrap;
         gap: 0.5rem;
         width: 100%;
         list-style: none;
         padding: 0;
         margin: 0;
     }

     .features li {
         display: flex;
         align-items: flex-start;
         gap: 12px;
         flex: 1 1 calc(50% - 0.5rem);
         padding: 0;
         margin: 0;
         font-size: 14px;
         color: rgba(255, 255, 255, 0.95);
         line-height: 1.5;
         word-wrap: break-word;
         overflow-wrap: break-word;
     }

     /* Green checkmark icon */
     .features li::before {
         content: "✓";
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: 14px;
         height: 14px;
         min-width: 14px;
         flex-shrink: 0;
         background: #16a34a;
         color: #ffffffff;
         border-radius: 50%;
         font-weight: 600;
         font-size: 12px;
         margin-top: 2px;

     }

     /* Responsive: Single column on tablet and mobile */
     @media (max-width: 992px) {
         .features li {
             flex: 1 1 calc(50% - 0.5rem);
         }
     }

     @media (max-width: 768px) {
         .features li {
             flex: 1 1 100%;
         }
     }

     .course-body {
         background: #f5f5f5ff;
     }

     .roadmap-image img {
         width: 100%;
         height: auto;
     }

     /* Hide the mobile version by default */
     .mobile-img {
         display: none !important;
     }

     /* On small screens, hide desktop and show mobile */
     @media screen and (max-width: 768px) {
         .desktop-img {
             display: none !important;
         }

         .mobile-img {
             display: block !important;
         }
     }

     :root {
         --gap: 1rem;
         --card-min: calc((100% - 3 * var(--gap)) / 4)
     }

     * {
         box-sizing: border-box
     }

     body {
         font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
         line-height: 1.4;
         margin: 0;
         background: #f5f7fb;
         color: #0b1220
     }



     .wrap {
         max-width: 1400px;
         margin: 2rem auto;
         padding: 0 1rem
     }

     h1 {
         font-size: 1.4rem;
         margin: 0 0 1rem
     }



     .blog-scroller-shell {
         position: relative;
         overflow: visible
     }

     .blog-scroller {
         display: flex;
         gap: var(--gap);
         overflow-x: hidden;
         padding: 1rem 0 1.5rem;
         scroll-snap-type: x mandatory;
         scroll-behavior: smooth;
         flex-wrap: nowrap;
         width: 100%;
         height: auto
     }

     .blog-scroller::-webkit-scrollbar {
         display: none
     }



     .card {
         background: white;
         border-radius: 12px;
         box-shadow: 0 6px 18px rgba(12, 18, 30, 0.06);
         padding: 1rem;
         flex: 0 0 var(--card-min);
         scroll-snap-align: start;
         display: flex;
         flex-direction: column;
         min-height: 280px
     }



     .card .eyebrow {
         font-size: .75rem;
         color: #607088;
         margin-bottom: .5rem
     }

     .card h3 {
         margin: .25rem 0 .5rem;
         font-size: 1.05rem
     }

     .card h3 a {
         text-decoration: none
     }

     .card p {
         font-size: .9rem;
         color: #344055;
         flex: 1
     }

     .meta {
         display: flex;
         align-items: center;
         gap: .5rem;
         font-size: .8rem;
         color: #6b7280;
         margin-top: .75rem
     }

     .thumb {
         height: 120px;
         border-radius: 8px;
         overflow: hidden;
         margin-bottom: .75rem
     }

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

     .fancybox__content{
        width: 40%!important;
        border-radius: 8px !important;
        background: transparent !important;
        padding: 0!important;

    }
    @media (max-width: 576px) {
                    .fancybox__content {
                        width: 80%!important;
                    }
                }

    .brochure-popup-container .fancybox__content{padding:0!important;}





     /* responsive breakpoints: 3 on large, 3 on wide tablets, 2 on small tablets, 1 on phones */
     :root {
         --card-min: calc((100% - 2 * var(--gap)) / 3)
     }

     @media (max-width:1200px) {
         :root {
             --card-min: calc((100% - 2 * var(--gap)) / 3)
         }
     }

     @media (max-width: 768px) {
         .blog-scroller-shell {
             padding: 0 20px;
         }
     }

     @media (max-width:900px) {
         :root {
             --card-min: calc((100% - var(--gap)) / 2)
         }
     }

     @media (max-width:600px) {
         :root {
             --card-min: 100%
         }
     }



     .sr-only {
         position: absolute;
         width: 1px;
         height: 1px;
         padding: 0;
         margin: -1px;
         overflow: hidden;
         clip: rect(0, 0, 0, 0);
         white-space: nowrap;
         border: 0
     }

     table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin: 24px 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
        font-size: 14px;
        background: #ffffff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    }
    
    /* HEADER */
    thead th {
        position: sticky;
        top: 0;
        background: linear-gradient(135deg, #111827, #1f2937);
        color: #ffffff;
        text-align: left;
        padding: 14px 16px;
        font-weight: 600;
        letter-spacing: 0.4px;
    }
    
    /* BODY */
    tbody td {
        padding: 14px 16px;
        color: #374151;
        border-bottom: 1px solid #eef2f7;
    }
    
    /* ROWS */
    tbody tr {
        background: #ffffff;
        transition: all 0.2s ease;
    }
    
    tbody tr:nth-child(even) {
        background: #f9fafb;
    }
    
    /* HOVER EFFECT */
    tbody tr:hover {
        background: #eef6ff;
        transform: scale(1.002);
        box-shadow: inset 4px 0 0 #3b82f6;
    }
    
    /* FIRST COLUMN EMPHASIS */
    tbody td:first-child {
        font-weight: 600;
        color: #111827;
    }
    
    /* REMOVE LAST BORDER */
    tbody tr:last-child td {
        border-bottom: none;
    }
    
    /* RESPONSIVE */
    @media (max-width: 768px) {
        table {
            display: block;
            overflow-x: auto;
            white-space: nowrap;
        }
    }