:root {
        --primary-color: #1AB189;
        --secondary-color: #12699B;
      }

      /* Homepage course/mock carousels: the shared header inlines
         `.cours-bx .info-bx { height: 87px }` to equalize cards on the
         listing pages (all-courses etc.), but the homepage card body holds
         category + title + rating + price and gets clipped by it. The ID
         selector out-specifies that rule; applies to every layout. */
      #coursesRow .cours-bx .info-bx,
      #mockRow .cours-bx .info-bx {
        height: auto;
      }
      /* The price sits in its own full-width row on the homepage card;
         the theme's `.courses-info { width: 50% }` makes "Rs. 10000"
         wrap/truncate. */
      #coursesRow .cours-bx .courses-info,
      #mockRow .cours-bx .courses-info {
        width: 100%;
      }

      /* Sticky full header (topbar + navbar together) */
      .header.rs-nav {
        position: sticky !important;
        top: 0 !important;
        z-index: 99999 !important;
      }

      /* Top Bar Styles */
      .top-bar {
        background-color: var(--secondary-color);
        padding: 10px 0;
      }

      .top-bar-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .top-bar-left {
        display: flex;
        gap: 30px;
        align-items: center;
      }

      .top-bar-link {
        color: white;
        text-decoration: none;
        font-size: 14px;
        display: flex;
        align-items: center;
        transition: opacity 0.3s ease;
      }

      .top-bar-link:hover {
        opacity: 0.8;
        color: white;
      }

      .top-bar-link i {
        margin-right: 8px;
      }

      .top-bar-social {
        display: flex;
        gap: 12px;
      }

      .social-icon {
        color: white;
        font-size: 16px;
        width: 36px;
        height: 36px;
        border: 2px solid white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        text-decoration: none;
      }

      .social-icon:hover {
        background-color: white;
        color: var(--secondary-color);
        transform: translateY(-2px);
      }

      /* Responsive Top Bar */
      @media (max-width: 991px) {
        .top-bar-left {
          gap: 15px;
        }

        .top-bar-link {
          font-size: 13px;
        }

        .social-icon {
          width: 32px;
          height: 32px;
          font-size: 14px;
        }
      }

      @media (max-width: 768px) {
        .top-bar {
          padding: 8px 0;
        }

        .top-bar-content {
          flex-direction: column;
          gap: 10px;
        }

        .top-bar-left {
          flex-direction: column;
          gap: 8px;
          text-align: center;
          width: 100%;
        }

        .top-bar-link {
          font-size: 12px;
          justify-content: center;
        }

        .top-bar-social {
          gap: 10px;
        }

        .social-icon {
          width: 30px;
          height: 30px;
          font-size: 13px;
        }
      }

      @media (max-width: 480px) {
        .top-bar-left {
          gap: 6px;
        }

        .top-bar-link {
          font-size: 11px;
        }

        .top-bar-link i {
          margin-right: 5px;
        }

        .social-icon {
          width: 28px;
          height: 28px;
          font-size: 12px;
        }

        .top-bar-social {
          gap: 8px;
        }
      }

      .download-section {
        background: linear-gradient(
          135deg,
          var(--primary-color) 0%,
          #0d8f70 100%
        );
        padding: 60px 40px;
        position: relative;
        overflow: hidden;
        max-width: 1330px;
        min-height: 420px;
        margin: 80px auto;
        border-radius: 20px;
        display: flex;
        align-items: center;
      }

      .download-section::before {
        display: none;
      }

      body[data-layout="1"] .download-section {
        background: url('../images/downloadfor1.png') center / cover no-repeat;
      }

      .download-section .container {
        position: relative;
        z-index: 2;
        width: 100%;
      }

      .download-content {
        color: white;
      }

      .download-content h2 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 20px;
        color: white;
      }

      .download-content p {
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 30px;
        opacity: 0.95;
      }

      .app-buttons {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
      }

      .app-buttons img {
        height: 50px;
        transition: transform 0.3s ease;
        cursor: pointer;
      }

      .app-buttons img:hover {
        transform: translateY(-3px);
      }

      .mockup-container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }

      .mockup-wrapper {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .desktop-mockup {
        width: 100%;
        max-width: 600px;
        height: auto;
        filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
        position: relative;
        z-index: 1;
      }

      .mobile-mockup {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 35%;
        max-width: 200px;
        height: auto;
        filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.4));
        z-index: 2;
      }

      @media (max-width: 768px) {
        .download-content h2 {
          font-size: 2rem;
        }

        .download-content p {
          font-size: 1rem;
        }

        .mockup-container {
          margin-top: 30px;
        }

        .desktop-mockup {
          max-width: 450px;
        }

        .mobile-mockup {
          width: 30%;
          max-width: 150px;
        }
      }

      @media (max-width: 576px) {
        .download-section {
          padding: 40px 0;
        }

        .download-content h2 {
          font-size: 1.75rem;
        }

        .app-buttons {
          justify-content: center;
        }

        .app-buttons img {
          height: 45px;
        }

        .mockup-wrapper {
          flex-direction: column;
          align-items: center;
        }

        .desktop-mockup {
          max-width: 100%;
          width: 90%;
        }

        .mobile-mockup {
          position: relative;
          margin-top: -50px;
          right: -20%;
          transform: none;
          width: 50%;
          max-width: 180px;
        }
      }

      /* FAQ Section Styles */
      .faq-section {
        padding: 80px 0;
        margin-bottom: 0;
        background: linear-gradient(135deg, #f0f6fb 0%, #ffffff 50%, #e4f0f8 100%);
      }

      .faq-header {
        text-align: center;
        margin-bottom: 50px;
      }

      .faq-header h2 {
        font-size: 2.2rem;
        font-weight: 700;
        color: #111;
        margin-bottom: 0;
      }

      /* Contact Card — dark blue */
      .contact-card {
        background: var(--secondary-color);
        border-radius: 16px;
        padding: 40px 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .contact-card h3 {
        color: #fff;
        font-size: 1.6rem;
        font-weight: 700;
        margin-bottom: 10px;
      }

      .contact-card .contact-subtitle {
        color: rgba(255,255,255,0.75);
        font-size: 0.9rem;
        margin-bottom: 28px;
      }

      .contact-item {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
      }

      .contact-item i {
        color: rgba(255,255,255,0.85);
        font-size: 15px;
        width: 18px;
        flex-shrink: 0;
      }

      .contact-item span {
        color: rgba(255,255,255,0.9);
        font-size: 0.9rem;
      }

      .contact-msg-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 28px;
        padding: 12px 24px;
        border: 1.5px solid rgba(255,255,255,0.7);
        border-radius: 8px;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.2s;
      }

      .contact-msg-btn:hover {
        background: rgba(255,255,255,0.15);
        color: #fff;
      }

      /* FAQ Accordion Styles */
      .faq-accordion {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .faq-item {
        background: #fff;
        border-radius: 10px;
        border: 1px solid #e4eaf0;
        overflow: hidden;
        transition: box-shadow 0.2s;
      }

      .faq-item:hover {
        box-shadow: 0 2px 10px rgba(0,0,0,0.07);
      }

      .faq-question {
        padding: 18px 22px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        border: none;
        width: 100%;
        text-align: left;
      }

      .faq-question-text {
        flex: 1;
        font-weight: 500;
        font-size: 0.95rem;
        color: #222;
        transition: color 0.2s;
      }

      .faq-item.active .faq-question-text {
        color: var(--secondary-color);
        font-weight: 600;
      }

      .faq-toggle-icon {
        color: #888;
        font-size: 16px;
        flex-shrink: 0;
        transition: color 0.2s;
      }

      .faq-item.active .faq-toggle-icon {
        color: var(--secondary-color);
      }

      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background-color: #fff;
      }

      .faq-answer-content {
        padding: 0 22px 18px;
        color: #555;
        font-size: 0.9rem;
        line-height: 1.7;
      }

      .faq-item.active .faq-answer {
        max-height: 400px;
      }

      @media (max-width: 991px) {
        .faq-section { padding: 60px 0; }
        .contact-card { margin-bottom: 30px; }
      }

      @media (max-width: 768px) {
        .faq-header h2 { font-size: 1.8rem; }
        .faq-question { padding: 15px 18px; }
        .faq-answer-content { padding: 0 18px 15px; }
        .contact-card { padding: 30px 20px; }
      }

      .basket-full a span {
        font-size: 18px;
        color: rgba(245, 33, 33, 0.568);
      }

      .basket-full a {
        font-size: 17px;
      }

      .profile-wrapper .profile-bar {
        display: flex;
        justify-content: space-between;
      }

      .profile-wrapper .profile-bar ul li a {
        color: #009080;
      }

      .profile-wrapper .profile-bar .left ul,
      .profile-wrapper .profile-bar .right ul li a {
        display: flex;
        align-items: center;
        height: 40px;
      }

      .profile-wrapper .profile-bar .left ul li,
      .profile-wrapper .profile-bar .right img {
        margin: 0 10px;
      }

      .profile-wrapper .profile-bar .right a {
        text-align: right;
      }

      .profile-wrapper .profile-bar .right a span {
        font-size: 15px;
        color: black;
      }

      .profile-wrapper .profile-bar .right ul li {
        position: relative;
      }

      .profile-wrapper .profile-bar .right ul li:after {
        background: transparent !important;
      }

      .profile-wrapper .profile-bar .right ul li .dropdown {
        position: absolute;
        top: 45px;
        right: 0;
        background: rgb(245, 245, 245);
        padding: 7px 10px !important;
        border-radius: 5px;
        display: none;
        z-index: 99999999999999;
        width: auto !important;
        box-shadow:
          rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
          rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
      }

      .profile-wrapper .profile-bar .right ul li .dropdown .fas {
        margin-right: 10px;
      }

      .profile-wrapper .profile-bar .right ul li .dropdown:before {
        content: "";
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        border: 10px solid;
        border-color: transparent transparent rgb(245, 245, 245) transparent;
      }

      .profile-wrapper .profile-bar .right ul li.active .dropdown {
        display: block;
      }

      .social-icons li {
        margin-right: -3px;
      }

      .social-icons li:last-child {
        margin-right: 0;
      }

      /* ══ MOBILE RESPONSIVE ══════════════════════════════════════════ */

      /* Section vertical rhythm — tablet */
      @media (max-width: 991px) {
        .section-area.section-sp2,
        .section-area.section-sp2.popular-courses-bx {
          padding-top: 60px !important;
          padding-bottom: 60px !important;
        }
        .l1-testimonials { padding: 60px 0; }
        .faq-section     { padding: 60px 0; }
        .download-section { margin: 60px auto !important; }
      }

      /* Section vertical rhythm — mobile */
      @media (max-width: 767px) {
        .section-area.section-sp2,
        .section-area.section-sp2.popular-courses-bx {
          padding-top: 48px !important;
          padding-bottom: 48px !important;
        }
        .l1-testimonials { padding: 48px 0 !important; }
        .faq-section     { padding: 48px 0 !important; }
      }

      /* Section vertical rhythm — small mobile */
      @media (max-width: 575px) {
        .section-area.section-sp2,
        .section-area.section-sp2.popular-courses-bx {
          padding-top: 36px !important;
          padding-bottom: 36px !important;
        }
        .l1-testimonials { padding: 36px 0 !important; }
        .faq-section     { padding: 36px 0 !important; }
        .faq-header      { margin-bottom: 20px !important; }
        .download-section { padding: 40px 20px !important; }
      }

      /* Section vertical rhythm — extra small */
      @media (max-width: 480px) {
        .section-area.section-sp2,
        .section-area.section-sp2.popular-courses-bx {
          padding-top: 28px !important;
          padding-bottom: 28px !important;
        }
        .l1-testimonials { padding: 28px 0 !important; }
        .faq-section     { padding: 28px 0 !important; }
        .download-section { padding: 32px 16px !important; }
      }

      /* Feature highlights bar */
      @media (max-width: 767px) {
        .l1-feature-bar {
          height: auto !important;
          flex-wrap: wrap;
        }
        .l1-feature-bar > .col-6 {
          border-right: none !important;
          border-bottom: 1px solid #efefef;
          padding: 16px 18px !important;
          height: auto !important;
        }
        .l1-feature-bar > .col-6:nth-child(odd) {
          border-right: 1px solid #efefef !important;
        }
        .l1-feature-bar > .col-6:nth-last-child(-n+2) {
          border-bottom: none;
        }
      }

      /* Hero image — bring nav buttons inside on small screens */
      @media (max-width: 575px) {
        #l1PrevBtn { left: 8px !important; }
        #l1NextBtn { right: 8px !important; }
        /* feature bar negative overlap — reduce */
        .l1-hero-wrapper > div:last-child {
          margin-top: -20px !important;
          padding: 0 12px;
        }
      }

      /* Explore Courses & Mock Test carousels */
      @media (max-width: 767px) {
        #coursesRow > div,
        #mockRow > div {
          width: calc(85vw) !important;
          min-width: calc(85vw) !important;
          height: auto !important;
        }
        #coursesRow > div .cours-bx,
        #mockRow > div .cours-bx {
          height: auto !important;
        }
      }
      @media (min-width: 768px) and (max-width: 991px) {
        #coursesRow > div,
        #mockRow > div {
          width: calc((100% - 20px) / 2) !important;
          min-width: calc((100% - 20px) / 2) !important;
          height: auto !important;
        }
        #coursesRow > div .cours-bx,
        #mockRow > div .cours-bx {
          height: auto !important;
        }
      }

      /* Download section */
      @media (max-width: 767px) {
        .download-section {
          margin: 40px 16px !important;
          border-radius: 16px !important;
          padding: 40px 24px !important;
          min-height: unset !important;
        }
        .download-content h2 { font-size: 1.8rem; }
      }
      @media (max-width: 480px) {
        .download-section {
          margin: 30px 10px !important;
          padding: 32px 18px !important;
        }
      }

      /* Layout 1 Testimonials */
      @media (max-width: 991px) {
        .l1-testi-heading h2 { font-size: 1.9rem; }
        .l1-testi-card {
          width: 340px !important;
          min-width: 340px !important;
        }
      }
      @media (max-width: 767px) {
        .l1-testi-card {
          width: calc(82vw) !important;
          min-width: calc(82vw) !important;
          height: auto !important;
        }
        .l1-testi-heading h2 { font-size: 1.7rem; }
      }

      /* FAQ */
      @media (max-width: 767px) {
        .faq-header h2 { font-size: 1.7rem; }
        .contact-card  { margin-bottom: 24px; }
        .contact-msg-btn { padding: 12px 16px; }
      }

      /* Footer */
      @media (max-width: 991px) {
        footer .col-lg-3,
        footer .col-lg-2 { margin-bottom: 8px; }
      }
      @media (max-width: 767px) {
        footer { padding: 48px 0 0 !important; }
      }

      /* ════════════════════════════════════════════════════════════════ */

      .testimonial-sec .owl-nav .owl-prev {
        top: -45px;
        left: auto;
        right: 70px;
        position: absolute;
      }

      .testimonial-sec .owl-nav .owl-next {
        top: -45px;
        right: 20px;
        position: absolute;
      }

      /* Layout 1 Testimonials */
      body[data-layout="1"] .testimonials { display: none; }
      body[data-layout="1"] .l1-testimonials { display: block; }

      /* ── Consistent section vertical rhythm ── */
      .section-area.section-sp2,
      .section-area.section-sp2.popular-courses-bx {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
      }

      .l1-testimonials {
        display: none;
        padding: 80px 0;
        background: #f8f9fa;
      }

      .l1-testi-heading h2 {
        font-size: 2.2rem;
        font-weight: 700;
        color: #111;
        line-height: 1.35;
        margin: 0;
      }

      .l1-testi-heading h2 .l1-testi-highlight {
        color: var(--primary-color);
        text-decoration: underline;
        text-underline-offset: 5px;
        text-decoration-thickness: 2px;
      }

      .l1-testi-nav {
        display: flex;
        gap: 10px;
        margin-top: 28px;
      }

      .l1-testi-nav button {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid var(--primary-color);
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 15px;
        color: var(--primary-color);
        transition: background 0.2s, color 0.2s;
      }

      .l1-testi-nav button:hover {
        background: var(--primary-color);
        color: white;
      }

      .l1-testi-cards {
        display: flex;
        gap: 20px;
        overflow-x: hidden;
        scroll-behavior: smooth;
      }

      .l1-testi-card {
        background: white;
        border-radius: 12px;
        padding: 24px;
        width: 400px;
        min-width: 400px;
        height: 354px;
        flex-shrink: 0;
        box-shadow: 0 2px 14px rgba(0,0,0,0.07);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
      }

      .l1-testi-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
      }

      .l1-testi-card-header img {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
      }

      .l1-testi-card-header h5 {
        font-weight: 700;
        font-size: 0.95rem;
        color: #111;
        margin: 0 0 4px;
      }

      .l1-testi-stars {
        color: #f8a401;
        font-size: 14px;
        letter-spacing: 1px;
      }

      .l1-testi-card p {
        font-size: 0.9rem;
        color: #666;
        line-height: 1.65;
        margin: 0;
        font-weight: 600;
      }

      /* ════════════════════════════════════════════════════════════════════
         LAYOUT 2 — Scholars-inspired aesthetic (CSS-only, no HTML changes)
         Colors: #1AB189 primary · #12699B secondary
      ════════════════════════════════════════════════════════════════════ */

      /* L2 design tokens */
      body[data-layout="2"] {
        --l2-brand:   #1AB189;
        --l2-dark:    #12699B;
        --l2-deeper:  #0d5a87;
        --l2-ink:     #191c1d;
        --l2-muted:   #4d5660;
        --l2-line:    #dde8ee;
        --l2-surface: #f0f8f6;
        --l2-tint:    #eef4f8;
        --l2-bar:     #0f1412;
      }

      /* ── TOP BAR ─────────────────────────────────── */
      body[data-layout="2"] .top-bar {
        background: var(--l2-brand) !important;
      }

      /* ── NAVBAR ──────────────────────────────────── */
      body[data-layout="2"] .sticky-header,
      body[data-layout="2"] .menu-bar {
        background: #fff !important;
        border-bottom: 1px solid var(--l2-line) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important;
      }
      body[data-layout="2"] .nav.navbar-nav li > a {
        color: var(--l2-ink) !important;
        font-weight: 500;
      }
      body[data-layout="2"] .nav.navbar-nav li > a:hover {
        color: var(--l2-dark) !important;
      }
      body[data-layout="2"] .first-a {
        border: 1.5px solid var(--l2-dark) !important;
        color: var(--l2-dark) !important;
        background: transparent !important;
        border-radius: 6px !important;
        padding: 7px 18px !important;
        font-weight: 600 !important;
      }
      body[data-layout="2"] .second-a {
        background: var(--l2-dark) !important;
        color: #fff !important;
        border-color: var(--l2-dark) !important;
        border-radius: 6px !important;
        padding: 7px 18px !important;
        font-weight: 600 !important;
      }
      body[data-layout="2"] .second-a:hover {
        background: var(--l2-deeper) !important;
      }

      /* L2 hero content hidden in L1 */
      .l2-hero-content { display: none; }
      /* L2 section links hidden in L1 */
      .l2-sec-link { display: none; }
      .l2-carousel-nav { display: none; }
      .l2-view-all-row { display: none; }

      /* ── HERO ────────────────────────────────────── */
      /*
        Layout 2 hero — full-bleed static image, no carousel, no chevrons.
        Strategy: use the section's own background-image (first-image.png)
        and hide the inner wrapper div entirely. This avoids all inline-style
        and flex-sizing conflicts with the inner max-width:1311px div.
        No Layout 1 selectors touched.
      */
      body[data-layout="2"] .l1-hero-section {
        background-image: url('../images/first-image.png') !important;
        background-size: cover !important;
        background-position: center !important;
        background-color: #0f1412 !important;
        height: 600px !important;
        min-height: 600px !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
      }
      /* Hide the carousel wrapper (img + chevrons) completely */
      body[data-layout="2"] .l1-hero-section > div:first-child {
        display: none !important;
      }
      /* Scholars-style: stronger left-to-right dark overlay */
      body[data-layout="2"] .l1-hero-overlay {
        background: linear-gradient(
          to right,
          rgba(0,0,0,0.68) 0%,
          rgba(0,0,0,0.35) 55%,
          rgba(0,0,0,0.05) 100%
        ) !important;
      }
      /* Scholars hero: left-aligned text, slightly larger */
      body[data-layout="2"] .l1-hero-content {
        padding-left: 0 !important;
      }
      body[data-layout="2"] .l1-hero-title {
        font-size: clamp(2rem, 4vw, 3rem) !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
      }
      body[data-layout="2"] .l1-btn-primary {
        background: var(--l2-brand) !important;
        border-color: var(--l2-brand) !important;
        box-shadow: 0 4px 14px rgba(26,177,137,0.35) !important;
      }
      body[data-layout="2"] .l1-btn-primary:hover {
        background: #15a070 !important;
        border-color: #15a070 !important;
      }

      /* ── HERO OVERLAY + TEXT (scholars style) ───── */
      body[data-layout="2"] .l1-hero-section::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.28) 55%, rgba(0,0,0,0.68) 100%) !important;
        pointer-events: none !important;
      }
      body[data-layout="2"] .l1-hero-section::after {
        content: "" !important;
        position: absolute !important;
        left: 0; right: 0; bottom: 0 !important;
        height: 80% !important;
        z-index: 1 !important;
        pointer-events: none !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%) !important;
        mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%) !important;
      }
      body[data-layout="2"] .l2-hero-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        padding-top: 70px !important;
        text-align: center !important;
        color: #fff !important;
      }
      body[data-layout="2"] .l2-hero-h1 {
        color: #fff !important;
        font-weight: 800 !important;
        font-size: clamp(2.5rem, 5vw, 4rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 18px !important;
      }
      body[data-layout="2"] .l2-hero-sub {
        color: #e6efe7 !important;
        font-size: 20px !important;
        max-width: 560px !important;
        margin: 0 auto 36px !important;
        line-height: 1.6 !important;
        text-align: center !important;
      }
      body[data-layout="2"] .l2-hero-pills {
        display: flex !important;
        gap: 14px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
      }
      body[data-layout="2"] .l2-pill {
        background: #fff !important;
        color: var(--l2-ink) !important;
        border-radius: 10px !important;
        padding: 10px 20px !important;
        display: inline-flex !important;
        gap: 14px !important;
        align-items: center !important;
        min-width: 172px !important;
        border: 1px solid #e4e4e4 !important;
        text-decoration: none !important;
        transition: transform 0.18s ease, box-shadow 0.18s ease !important;
        cursor: pointer !important;
      }
      body[data-layout="2"] .l2-pill:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 10px 24px rgba(0,0,0,0.18) !important;
      }
      body[data-layout="2"] .l2-pill i {
        font-size: 26px !important;
        color: var(--l2-ink) !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
      }
      body[data-layout="2"] .l2-pill span {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
      }
      body[data-layout="2"] .l2-pill small {
        font-size: 10px !important;
        color: #5a5a5a !important;
        letter-spacing: 0.5px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
      }
      body[data-layout="2"] .l2-pill strong {
        font-weight: 700 !important;
        font-size: 16px !important;
        line-height: 1.15 !important;
        color: var(--l2-ink) !important;
      }
      /* Brand (green) pill */
      body[data-layout="2"] .l2-pill-brand {
        background: var(--l2-dark) !important;
        color: #fff !important;
        border-color: var(--l2-dark) !important;
      }
      body[data-layout="2"] .l2-pill-brand:hover {
        background: var(--l2-deeper) !important;
        border-color: var(--l2-deeper) !important;
        box-shadow: 0 10px 24px rgba(18,105,155,0.3) !important;
      }
      body[data-layout="2"] .l2-pill-brand i { color: #fff !important; }
      body[data-layout="2"] .l2-pill-brand small { color: rgba(255,255,255,0.7) !important; }
      body[data-layout="2"] .l2-pill-brand strong { color: #fff !important; }

      /* ── SECTION HEADINGS (scholars style) ──────── */
      body[data-layout="2"] .heading-bx.left {
        position: relative !important;
        text-align: left !important;
        margin-bottom: 32px !important;
      }
      body[data-layout="2"] .heading-bx.left .title-head {
        font-size: 36px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.01em !important;
        margin: 0 0 8px !important;
        color: var(--l2-ink) !important;
        text-align: left !important;
      }
      body[data-layout="2"] .heading-bx.left p {
        color: var(--l2-muted) !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
        max-width: 560px !important;
        text-align: left !important;
        margin: 0 !important;
      }
      /* "All Categories / All Courses / All Tests →" link — scholars sec-link */
      body[data-layout="2"] .l2-sec-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        position: absolute !important;
        right: 0 !important;
        top: 4px !important;
        color: var(--l2-dark) !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: color 0.15s, transform 0.2s !important;
      }
      body[data-layout="2"] .l2-sec-link i {
        font-size: 11px !important;
      }
      body[data-layout="2"] .l2-sec-link:hover {
        color: var(--l2-deeper) !important;
        transform: translateX(4px) !important;
      }

      /* ── CATEGORIES — 4-col grid, no carousel ─── */
      /* Hide the carousel nav buttons */
      body[data-layout="2"] #prevBtn,
      body[data-layout="2"] #nextBtn {
        display: none !important;
      }
      /* Remove the 24px side padding added for the nav buttons */
      body[data-layout="2"] #cardRow {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        overflow: visible !important;
      }
      /* Each card: 4 per row */
      body[data-layout="2"] #cardRow > .col-12 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
      }
      /* Hide only the All pill (child 1); show all 4 category cards */
      body[data-layout="2"] #cardRow > .col-12:nth-child(n+6) {
        display: none !important;
      }

      /* ── COURSE SLIDES — 3 per row ───────────────── */
      body[data-layout="2"] #coursesRow > div,
      body[data-layout="2"] #mockRow > div {
        width: calc((100% - 40px) / 3) !important;
        min-width: calc((100% - 40px) / 3) !important;
        height: auto !important;
        min-height: 0 !important;
      }

      /* ── COURSE CARDS (scholars style) ──────────── */
      /* Card: flush image edge, flex column */
      body[data-layout="2"] #coursesRow .cours-bx,
      body[data-layout="2"] #mockRow .cours-bx {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        overflow: hidden !important;
      }
      /* Cover image: full-bleed, no radius, 230px tall (scholars match) */
      body[data-layout="2"] #coursesRow .action-box,
      body[data-layout="2"] #mockRow .action-box {
        width: 100% !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        background: #eef3ee !important;
      }
      body[data-layout="2"] #coursesRow .action-box img,
      body[data-layout="2"] #mockRow .action-box img {
        height: 230px !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important;
      }
      /* Card body: 20px padding, 14px gap (scholars match) */
      body[data-layout="2"] #coursesRow .courses-info,
      body[data-layout="2"] #mockRow .courses-info {
        padding: 20px 20px 0 !important;
      }
      body[data-layout="2"] #coursesRow .info-bx,
      body[data-layout="2"] #mockRow .info-bx {
        padding: 8px 20px 20px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
      }
      /* Category label */
      body[data-layout="2"] #coursesRow .courses-info p,
      body[data-layout="2"] #mockRow .courses-info p {
        color: var(--l2-brand) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        margin: 0 !important;
      }
      /* Course title */
      body[data-layout="2"] #coursesRow .info-bx > h5,
      body[data-layout="2"] #mockRow .info-bx > h5 {
        font-size: 17px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        color: var(--l2-ink) !important;
        margin: 0 !important;
      }
      /* Stars: yellow fill */
      body[data-layout="2"] #coursesRow .fill-ratings,
      body[data-layout="2"] #mockRow .fill-ratings {
        color: #f4a900 !important;
      }
      body[data-layout="2"] #coursesRow .empty-ratings,
      body[data-layout="2"] #mockRow .empty-ratings {
        color: #ddd !important;
      }
      /* Price row */
      body[data-layout="2"] #coursesRow .info-bx .cours-more-info,
      body[data-layout="2"] #mockRow .info-bx .cours-more-info {
        margin-top: auto !important;
      }
      /* Current price — 22px bold brand-dark (scholars match) */
      body[data-layout="2"] #coursesRow .info-bx h5.text-right,
      body[data-layout="2"] #mockRow .info-bx h5.text-right {
        font-size: 22px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        line-height: 1 !important;
      }
      body[data-layout="2"] #coursesRow .info-bx h5.text-right span,
      body[data-layout="2"] #mockRow .info-bx h5.text-right span {
        color: var(--l2-brand) !important;
      }
      /* Struck-through old price — 15px muted (scholars match) */
      body[data-layout="2"] #coursesRow .info-bx h6.text-right,
      body[data-layout="2"] #mockRow .info-bx h6.text-right {
        font-size: 15px !important;
        font-weight: 400 !important;
        margin: 0 !important;
        line-height: 1 !important;
        align-self: flex-end !important;
      }
      body[data-layout="2"] #coursesRow .info-bx h6.text-right span,
      body[data-layout="2"] #mockRow .info-bx h6.text-right span {
        color: #7e8882 !important;
      }

      /* ── FEATURE / STATS BAR ─────────────────────── */
      /* Transform: white floating card → full-width primary strip */
      body[data-layout="2"] .l1-hero-wrapper > div:last-child {
        max-width: 100% !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
      }
      body[data-layout="2"] .l1-feature-bar {
        background: var(--l2-brand) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        height: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      /* each cell: centered, more padding */
      body[data-layout="2"] .l1-feature-bar > [class*="col-"] {
        padding: 36px 20px !important;
        border-color: rgba(255,255,255,0.2) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
      /* inner row → column */
      body[data-layout="2"] .l1-feature-bar > [class*="col-"] > div {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
      }
      /* icon circle → translucent white */
      body[data-layout="2"] .l1-feature-bar > [class*="col-"] > div > div:first-child {
        background: rgba(255,255,255,0.2) !important;
        width: 58px !important;
        height: 58px !important;
      }
      body[data-layout="2"] .l1-feature-bar > [class*="col-"] > div > div:first-child i {
        color: #fff !important;
        font-size: 22px !important;
      }
      body[data-layout="2"] .l1-feature-bar h6 {
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        margin: 0 !important;
      }
      body[data-layout="2"] .l1-feature-bar p {
        color: rgba(255,255,255,0.78) !important;
        font-size: 12px !important;
        margin: 0 !important;
        line-height: 1.5 !important;
      }

      /* ── UNIFORM SECTION SPACING ────────────────────── */
      /* Kill all content-block stacking margins in L2 */
      body[data-layout="2"] .content-block {
        margin-top: 0 !important;
      }
      /* Every section gets identical breathing room */
      body[data-layout="2"] .section-area.section-sp2 {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
      }
      body[data-layout="2"] .faq-section {
        padding: 60px 0 !important;
      }

      /* ── COURSE CATEGORIES ───────────────────────── */
      /* Tinted background for categories section */
      body[data-layout="2"] .content-block > .content-block > .section-area {
        background: #fff !important;
      }
      /* Scholars-style border cards (not shadow cards) */
      body[data-layout="2"] #cardRow .card {
        border: 1.5px solid var(--l2-line) !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        background: #fff !important;
        transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
        overflow: hidden !important;
      }
      body[data-layout="2"] #cardRow .card:hover {
        border-color: var(--l2-brand) !important;
        box-shadow: 0 4px 20px rgba(26,177,137,0.13) !important;
        transform: translateY(-4px) !important;
      }
      /* Card: flex column so image + text divide the height */
      body[data-layout="2"] #cardRow .card {
        display: flex !important;
        flex-direction: column !important;
        min-height: 260px !important;
      }
      body[data-layout="2"] #cardRow .card-body {
        display: flex !important;
        flex-direction: column !important;
        padding: 20px 0 0 !important;
        flex: 1 !important;
      }
      /* Image: ~60% of card, padded, contained */
      body[data-layout="2"] #cardRow .card-body img {
        flex-shrink: 0 !important;
        height: 156px !important;
        width: auto !important;
        max-width: calc(100% - 40px) !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
      }
      /* Title: fills remaining ~40%, centred */
      body[data-layout="2"] #cardRow .card h5 {
        flex: 1 !important;
        margin: 0 !important;
        padding: 14px 16px 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        color: var(--l2-ink) !important;
        border-top: 1px solid var(--l2-line) !important;
        margin-top: 14px !important;
      }

      /* ── EXPLORE COURSES ─────────────────────────── */
      body[data-layout="2"] .content-block > .section-area {
        background: #fff !important;
      }
      body[data-layout="2"] #coursesRow .cours-bx {
        border: 1px solid #eef2f5 !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        transition: border-color 0.15s ease !important;
        background: #fff !important;
      }
      body[data-layout="2"] #coursesRow .cours-bx:hover {
        border-color: #8dd8c4 !important;
        box-shadow: none !important;
        transform: none !important;
      }
      body[data-layout="2"] #coursesPrevBtn,
      body[data-layout="2"] #coursesNextBtn {
        display: none !important;
      }

      /* ── POPULAR COURSES — primary bg section ─────── */
      body[data-layout="2"] .section-area.section-sp2.popular-courses-bx:has(#coursesRow) {
        background: rgba(26,177,137,0.08) !important;
      }
      body[data-layout="2"] .section-area.section-sp2.popular-courses-bx:has(#coursesRow) .title-head {
        color: var(--l2-brand) !important;
      }

      /* ── MOCK TEST ────────────────────────────────── */
      body[data-layout="2"] .section-area.section-sp2.popular-courses-bx:has(#mockRow) {
        background: var(--l2-tint) !important;
      }
      body[data-layout="2"] .section-area.section-sp2.popular-courses-bx:has(#mockRow) .l2-nav-btn {
        border-color: var(--l2-dark) !important;
        color: var(--l2-dark) !important;
      }
      body[data-layout="2"] .section-area.section-sp2.popular-courses-bx:has(#mockRow) .l2-nav-btn:hover {
        background: var(--l2-dark) !important;
        border-color: var(--l2-dark) !important;
        color: #fff !important;
        box-shadow: 0 8px 18px rgba(18,105,155,0.28) !important;
      }
      body[data-layout="2"] #mockRow .cours-bx {
        border: 1px solid #eef2f5 !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 18px rgba(26,177,137,0.13) !important;
        transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
        background: #fff !important;
      }
      body[data-layout="2"] #mockRow .cours-bx:hover {
        border-color: #8dd8c4 !important;
        box-shadow: 0 8px 28px rgba(26,177,137,0.28) !important;
        transform: none !important;
      }
      body[data-layout="2"] #mockPrevBtn,
      body[data-layout="2"] #mockNextBtn {
        display: none !important;
      }

      /* ── CAROUSEL NAV (heading area) ────────────── */
      body[data-layout="2"] .l2-carousel-nav {
        display: inline-flex !important;
        gap: 10px !important;
        position: absolute !important;
        right: 0 !important;
        top: 2px !important;
        flex-shrink: 0 !important;
      }
      body[data-layout="2"] .l2-nav-btn {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        border: 1.5px solid var(--l2-brand) !important;
        background: #fff !important;
        color: var(--l2-dark) !important;
        font-size: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: 0 1px 4px rgba(26,177,137,0.10) !important;
        transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
        line-height: 1 !important;
      }
      body[data-layout="2"] .l2-nav-btn:hover {
        background: var(--l2-brand) !important;
        border-color: var(--l2-brand) !important;
        color: #fff !important;
        transform: translateY(-2px) scale(1.06) !important;
        box-shadow: 0 8px 18px rgba(26,177,137,0.28) !important;
      }

      /* ── VIEW ALL ROW ────────────────────────────── */
      body[data-layout="2"] .l2-view-all-row {
        display: flex !important;
        align-items: center !important;
        gap: 24px !important;
        margin-top: 36px !important;
      }
      body[data-layout="2"] .l2-var-label {
        color: var(--l2-brand) !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        white-space: nowrap !important;
      }
      body[data-layout="2"] .l2-var-rule {
        flex: 1 !important;
        height: 1.5px !important;
        background: var(--l2-brand) !important;
        display: block !important;
        opacity: 0.35 !important;
      }
      body[data-layout="2"] .l2-var-btn {
        padding: 11px 22px !important;
        border: 1.5px solid var(--l2-brand) !important;
        border-radius: 999px !important;
        color: var(--l2-brand) !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        background: #fff !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.2s, box-shadow 0.2s !important;
      }
      body[data-layout="2"] .l2-var-btn:hover {
        background: var(--l2-brand) !important;
        color: #fff !important;
        border-color: var(--l2-brand) !important;
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 16px rgba(26,177,137,0.22) !important;
      }

      /* ── DOWNLOAD → bright full-width strip ──────── */
      body[data-layout="2"] .download-section {
        display: none !important;
      }
      /* ── OUR BLOGS ───────────────────────────────── */
      body[data-layout="2"] .section-area.section-sp2:not(.popular-courses-bx) {
        display: none !important;
      }
      /* Blog cards: border style */
      body[data-layout="2"] .recent-news-carousel:not(.testimonial-sec) .item > a {
        display: block !important;
        text-decoration: none !important;
      }
      body[data-layout="2"] .recent-news-carousel:not(.testimonial-sec) .item > a > div {
        border: 1.5px solid var(--l2-line) !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        background: #fff !important;
        transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
      }
      body[data-layout="2"] .recent-news-carousel:not(.testimonial-sec) .item > a > div:hover {
        border-color: var(--l2-brand) !important;
        box-shadow: 0 4px 16px rgba(26,177,137,0.12) !important;
        transform: translateY(-3px) !important;
      }
      body[data-layout="2"] .recent-news-carousel:not(.testimonial-sec) .action-box img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 0 !important;
      }
      body[data-layout="2"] .recent-news-carousel:not(.testimonial-sec) .item > a > div > div:not(.action-box) {
        padding: 18px 18px 20px !important;
      }
      body[data-layout="2"] .recent-news-carousel:not(.testimonial-sec) .item h5 {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: var(--l2-ink) !important;
        margin: 0 0 6px !important;
      }
      body[data-layout="2"] .recent-news-carousel:not(.testimonial-sec) .item p.text-muted {
        font-size: 13px !important;
        color: var(--l2-muted) !important;
        line-height: 1.6 !important;
      }
      body[data-layout="2"] .recent-news-carousel:not(.testimonial-sec) .item p[style*="font-weight"] {
        color: var(--l2-dark) !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        margin-top: 10px !important;
      }

      /* ── TESTIMONIALS (show regular, hide L1 custom) */
      body[data-layout="2"] .testimonials    { display: block !important; }
      body[data-layout="2"] .l1-testimonials { display: none  !important; }

      /* Scholars-style review cards */
      body[data-layout="2"] .testimonials .section-area {
        background: #fff !important;
      }
      body[data-layout="2"] .review-card {
        border: 1.5px solid var(--l2-line) !important;
        border-radius: 16px !important;
        box-shadow: none !important;
        padding: 28px !important;
        background: #fff !important;
        position: relative !important;
        transition: border-color 0.2s, box-shadow 0.2s !important;
      }
      body[data-layout="2"] .review-card:hover {
        border-color: var(--l2-brand) !important;
        box-shadow: 0 4px 18px rgba(26,177,137,0.1) !important;
      }
      body[data-layout="2"] .review-card::before {
        content: '\201C';
        position: absolute;
        top: 14px;
        right: 20px;
        font-size: 72px;
        line-height: 1;
        font-family: Georgia, serif;
        color: var(--l2-brand);
        opacity: 0.15;
        font-weight: 900;
        pointer-events: none;
      }
      body[data-layout="2"] .review-header {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        margin-bottom: 14px !important;
      }
      body[data-layout="2"] .review-header img {
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: 2px solid var(--l2-line) !important;
        flex-shrink: 0 !important;
      }
      body[data-layout="2"] .review-header h5 {
        font-weight: 700 !important;
        font-size: 15px !important;
        color: var(--l2-ink) !important;
        margin: 0 0 3px !important;
      }
      body[data-layout="2"] .review-header p {
        font-size: 12px !important;
        color: var(--l2-brand) !important;
        font-weight: 500 !important;
        margin: 0 !important;
      }
      body[data-layout="2"] .review-card > p.text-muted {
        font-size: 14px !important;
        line-height: 1.7 !important;
        color: var(--l2-muted) !important;
        margin-bottom: 16px !important;
      }
      body[data-layout="2"] .star-rating i { color: #f8a401 !important; font-size: 12px !important; }
      body[data-layout="2"] .testimonials .owl-dot.active span { background: var(--l2-brand) !important; }

      /* Centered heading */
      body[data-layout="2"] .testimonials .heading-bx.left {
        text-align: center !important;
      }
      body[data-layout="2"] .testimonials .heading-bx.left .title-head {
        text-align: center !important;
      }
      body[data-layout="2"] .testimonials .heading-bx.left p {
        text-align: center !important;
        max-width: 580px !important;
        margin: 0 auto !important;
      }

      /* Gap between heading and cards */
      body[data-layout="2"] .testimonials .row.mt-5 {
        margin-top: 80px !important;
      }

      /* Circular secondary-color nav buttons */
      body[data-layout="2"] .testimonial-sec .owl-nav .owl-prev,
      body[data-layout="2"] .testimonial-sec .owl-nav .owl-next {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        border: 1.5px solid var(--l2-dark) !important;
        background: #fff !important;
        color: var(--l2-dark) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        padding: 0 !important;
        transition: background 0.2s, color 0.2s, box-shadow 0.2s !important;
      }
      body[data-layout="2"] .testimonial-sec .owl-nav .owl-prev {
        top: -62px !important;
      }
      body[data-layout="2"] .testimonial-sec .owl-nav .owl-next {
        top: -62px !important;
      }
      body[data-layout="2"] .testimonial-sec .owl-nav .owl-prev:hover,
      body[data-layout="2"] .testimonial-sec .owl-nav .owl-next:hover {
        background: var(--l2-dark) !important;
        color: #fff !important;
        box-shadow: 0 6px 16px rgba(18,105,155,0.25) !important;
      }

      /* ── FAQ ─────────────────────────────────────── */
      body[data-layout="2"] .faq-section {
        display: none !important;
      }
      /* FAQ accordion: scholars left-accent style */
      body[data-layout="2"] .faq-section .faq-item {
        background: #fff !important;
        border-radius: 12px !important;
        border: 1.5px solid var(--l2-line) !important;
        border-left: 4px solid transparent !important;
        margin-bottom: 10px !important;
        transition: border-color 0.2s !important;
        overflow: hidden !important;
      }
      body[data-layout="2"] .faq-section .faq-item.active {
        border-left-color: var(--l2-brand) !important;
      }
      body[data-layout="2"] .faq-question {
        font-weight: 600 !important;
        color: var(--l2-ink) !important;
        padding: 16px 20px !important;
      }
      body[data-layout="2"] .faq-section .faq-item.active .faq-question {
        color: var(--l2-brand) !important;
      }
      body[data-layout="2"] .faq-item.active .faq-toggle-icon {
        color: var(--l2-brand) !important;
      }
      body[data-layout="2"] .faq-answer-content {
        padding: 0 20px 16px !important;
        color: var(--l2-muted) !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
      }

      /* ── SCHOLARS EXTRAS (bright + blog + faq-wrap) ── */
      .l2-scholars-extras { display: none; }
      body[data-layout="2"] .l2-scholars-extras { display: block; }

      /* Bright strip */
      body[data-layout="2"] .bright {
        background: var(--l2-dark); color: #fff; padding: 32px 0;
      }
      body[data-layout="2"] .bright h3 {
        color: #fff; font-size: 22px; font-weight: 600; margin: 0;
        display: flex; align-items: center; gap: 14px;
      }
      body[data-layout="2"] .bright h3 i { color: rgba(255,255,255,0.65); font-size: 28px; }
      body[data-layout="2"] .btn-bright {
        background: #fff; color: var(--l2-deeper); border-radius: 8px;
        padding: 12px 22px; font-weight: 600; display: inline-flex;
        align-items: center; gap: 8px; text-decoration: none; transition: background 0.15s;
      }
      body[data-layout="2"] .btn-bright { transition: background 0.15s, transform 0.2s, box-shadow 0.2s; }
      body[data-layout="2"] .btn-bright:hover { background: #e8f0f6; color: var(--l2-deeper); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }

      /* Blog */
      body[data-layout="2"] .blog-wrap { background: #f1f7ef; padding: 80px 0; }
      body[data-layout="2"] .blog-wrap .sec-head {
        display: flex; justify-content: space-between; align-items: flex-end;
        gap: 30px; margin-bottom: 36px;
      }
      body[data-layout="2"] .blog-wrap .sec-head h2 {
        font-size: 36px; font-weight: 700; margin: 0 0 8px; color: var(--l2-ink);
      }
      body[data-layout="2"] .blog-wrap .sec-link {
        color: var(--l2-dark); font-weight: 600; font-size: 15px;
        display: inline-flex; align-items: center; gap: 8px;
        white-space: nowrap; text-decoration: none;
      }
      body[data-layout="2"] .blog-wrap .sec-link { transition: color 0.15s, transform 0.2s; }
      body[data-layout="2"] .blog-wrap .sec-link:hover { color: var(--l2-deeper); transform: translateX(4px); }
      body[data-layout="2"] .blog-row {
        background: #fff; border-radius: 18px; overflow: hidden;
        border: 1px solid var(--l2-line); display: grid;
        grid-template-columns: 1fr 1fr; min-height: 340px; margin-bottom: 32px;
      }
      body[data-layout="2"] .blog-row .img { background: #dee5dc; }
      body[data-layout="2"] .blog-row .img img { width: 100%; height: 100%; object-fit: cover; }
      body[data-layout="2"] .blog-row .body {
        padding: 40px; display: flex; flex-direction: column; justify-content: center;
      }
      body[data-layout="2"] .blog-meta {
        color: var(--l2-muted); font-size: 13px; letter-spacing: 1px;
        text-transform: uppercase; font-weight: 600;
      }
      body[data-layout="2"] .blog-row h3 {
        font-size: 26px; font-weight: 700; line-height: 1.3;
        margin: 14px 0 12px; color: var(--l2-ink);
      }
      body[data-layout="2"] .blog-row p {
        color: var(--l2-muted); font-size: 15px; line-height: 1.65; margin: 0 0 28px;
      }
      body[data-layout="2"] .blog-foot { display: flex; justify-content: space-between; align-items: center; }
      body[data-layout="2"] .read-more {
        color: var(--l2-brand); font-weight: 600; font-size: 14px;
        display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
        transition: color 0.15s, transform 0.2s;
      }
      body[data-layout="2"] .read-more:hover { color: var(--l2-deeper); transform: translateX(4px); }
      body[data-layout="2"] .read-arrow {
        width: 44px; height: 44px; border-radius: 50%; background: var(--l2-brand);
        color: #fff; display: inline-flex; align-items: center; justify-content: center;
        text-decoration: none; transition: background 0.15s;
      }
      body[data-layout="2"] .read-arrow { transition: background 0.15s, transform 0.2s, box-shadow 0.2s; }
      body[data-layout="2"] .read-arrow:hover { background: var(--l2-deeper); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(26,177,137,0.3); }
      @media (max-width: 767px) {
        body[data-layout="2"] .blog-row { grid-template-columns: 1fr; }
        body[data-layout="2"] .blog-row .img { min-height: 220px; }
      }

      /* Scholars FAQ wrap */
      body[data-layout="2"] .faq-wrap {
        background: #eef0ee; padding: 80px 0; position: relative; overflow: hidden;
      }
      body[data-layout="2"] .faq-wrap::before {
        content: ""; position: absolute; right: 60px; bottom: 60px;
        width: 120px; height: 120px; background: #d8e3d8;
        transform: rotate(45deg); z-index: 0; border-radius: 6px;
      }
      body[data-layout="2"] .faq-head {
        text-align: center; max-width: 680px; margin: 0 auto 48px;
        position: relative; z-index: 1;
      }
      body[data-layout="2"] .faq-head h2 { font-size: 34px; font-weight: 800; color: var(--l2-ink); }
      body[data-layout="2"] .faq-head p { color: var(--l2-muted); font-size: 14px; margin-top: 6px; }
      body[data-layout="2"] .faq-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
        align-items: start; position: relative; z-index: 1;
      }
      body[data-layout="2"] .faq-wrap .faq-item {
        position: relative; background: #fff; border-radius: 10px;
        margin-bottom: 18px; overflow: hidden; box-shadow: 0 2px 8px rgba(20,40,20,0.05);
        border: none !important; border-left: none !important;
      }
      body[data-layout="2"] .faq-wrap .faq-item::before {
        content: ""; position: absolute; left: 0; top: 0; bottom: 0;
        width: 0; background: var(--l2-dark); transition: width 0.15s ease;
      }
      body[data-layout="2"] .faq-wrap .faq-item.active::before { width: 6px; }
      body[data-layout="2"] .faq-wrap .faq-item button {
        width: 100%; text-align: left; background: transparent; border: 0;
        padding: 22px 26px; display: flex; justify-content: space-between;
        align-items: center; font-weight: 500; font-size: 14px; color: var(--l2-ink);
        transition: color 0.15s ease, padding-left 0.15s ease;
      }
      body[data-layout="2"] .faq-wrap .faq-item.active button {
        padding-left: 32px; color: var(--l2-dark); font-weight: 600;
      }
      body[data-layout="2"] .faq-wrap .faq-item .chev {
        width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #cfd4cf;
        color: #b8bdb8; display: flex; align-items: center; justify-content: center;
        font-size: 10px; flex-shrink: 0; background: #fff; transition: all 0.15s ease;
      }
      body[data-layout="2"] .faq-wrap .faq-item.active .chev {
        border-color: var(--l2-dark); color: var(--l2-dark);
      }
      body[data-layout="2"] .faq-answer {
        background: var(--l2-dark); color: #fff; padding: 44px;
        border-radius: 18px; min-height: 400px; max-height: none !important; position: relative; overflow: hidden;
        box-shadow: 0 20px 40px -22px rgba(18,105,155,0.4);
      }
      body[data-layout="2"] .faq-answer::after {
        content: ""; position: absolute; top: -70px; right: -70px;
        width: 200px; height: 200px; background: rgba(255,255,255,0.07); border-radius: 50%;
      }
      body[data-layout="2"] .faq-answer .ic {
        width: 44px; height: 44px; border-radius: 9px; background: rgba(255,255,255,0.14);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 18px; color: #fff; position: relative; z-index: 1;
      }
      body[data-layout="2"] .faq-answer h3 {
        color: #fff; font-size: 28px; font-weight: 700; margin: 48px 0 24px;
        line-height: 1.25; position: relative; z-index: 1;
      }
      body[data-layout="2"] .faq-answer p {
        color: #dceadc; font-size: 15px; line-height: 1.75; position: relative; z-index: 1; margin: 0;
      }
      @media (max-width: 767px) {
        body[data-layout="2"] .faq-grid { grid-template-columns: 1fr; }
      }
      /* Contact card: secondary color panel (scholars style) */
      body[data-layout="2"] .contact-card {
        background: var(--l2-dark) !important;
        border-radius: 16px !important;
        padding: 36px 28px !important;
      }
      body[data-layout="2"] .contact-msg-btn {
        background: rgba(255,255,255,0.1) !important;
        border-color: rgba(255,255,255,0.4) !important;
      }
      body[data-layout="2"] .contact-msg-btn:hover {
        background: rgba(255,255,255,0.2) !important;
      }

      /* ── SECTION HEADING ACCENTS ─────────────────── */
      body[data-layout="2"] .title-head {
        color: var(--l2-ink) !important;
        font-weight: 700 !important;
      }
      body[data-layout="2"] .heading-bx.left p {
        color: var(--l2-muted) !important;
      }

      /* ── FOOTER (already matches, minor spacing fix) */
      body[data-layout="2"] footer {
        margin-top: 0 !important;
      }

      /* ════════════════════════════════════════════════
         LAYOUT 2 — MOBILE RESPONSIVE
      ════════════════════════════════════════════════ */

      /* ── Tablet (≤ 991px) ── */
      @media (max-width: 991px) {
        /* Course/mock slides: 2 per row */
        body[data-layout="2"] #coursesRow > div,
        body[data-layout="2"] #mockRow > div {
          width: calc((100% - 20px) / 2) !important;
          min-width: calc((100% - 20px) / 2) !important;
        }
        /* Category cards: 2 per row */
        body[data-layout="2"] #cardRow > .col-12 {
          flex: 0 0 50% !important;
          max-width: 50% !important;
        }
        /* Blog row: stack on tablet */
        body[data-layout="2"] .blog-row {
          grid-template-columns: 1fr !important;
        }
        body[data-layout="2"] .blog-row .img {
          min-height: 240px !important;
        }
        /* FAQ grid: stack on tablet */
        body[data-layout="2"] .faq-grid {
          grid-template-columns: 1fr !important;
        }
      }

      /* ── Mobile (≤ 767px) ── */
      @media (max-width: 767px) {
        /* Hero height */
        body[data-layout="2"] .l1-hero-section {
          height: 480px !important;
          min-height: 480px !important;
        }
        body[data-layout="2"] .l2-hero-h1 {
          font-size: 2rem !important;
          margin-bottom: 12px !important;
        }
        body[data-layout="2"] .l2-hero-sub {
          font-size: 15px !important;
          margin-bottom: 24px !important;
        }
        body[data-layout="2"] .l2-hero-pills {
          flex-direction: column !important;
          align-items: center !important;
          gap: 10px !important;
        }
        /* Hide carousel nav buttons — swipe on mobile */
        body[data-layout="2"] .l2-carousel-nav {
          display: none !important;
        }
        /* Course/mock slides: full-width single card */
        body[data-layout="2"] #coursesRow > div,
        body[data-layout="2"] #mockRow > div {
          width: 85vw !important;
          min-width: 85vw !important;
        }
        /* Hide absolute-positioned sec-link on mobile — no room */
        body[data-layout="2"] .l2-sec-link {
          display: none !important;
        }
        /* View All row: pill button full width */
        body[data-layout="2"] .l2-view-all-row {
          gap: 14px !important;
        }
        /* Testimonials heading buttons already handled by owl */
        body[data-layout="2"] .testimonials .row.mt-5 {
          margin-top: 50px !important;
        }
        body[data-layout="2"] .testimonial-sec .owl-nav .owl-prev,
        body[data-layout="2"] .testimonial-sec .owl-nav .owl-next {
          top: -46px !important;
        }
        /* Section headings: title smaller */
        body[data-layout="2"] .heading-bx.left .title-head {
          font-size: 26px !important;
        }
        /* Bright strip: stack text + button */
        body[data-layout="2"] .bright h3 {
          font-size: 18px !important;
        }
        /* Blog body padding */
        body[data-layout="2"] .blog-row .body {
          padding: 24px !important;
        }
        body[data-layout="2"] .blog-row h3 {
          font-size: 20px !important;
        }
        /* FAQ answer panel: reduce padding */
        body[data-layout="2"] .faq-answer {
          min-height: auto !important;
          max-height: none !important;
          padding: 28px !important;
        }
        body[data-layout="2"] .faq-answer h3 {
          font-size: 20px !important;
          margin: 28px 0 16px !important;
        }
        /* Sec-head: stack on mobile */
        body[data-layout="2"] .blog-wrap .sec-head {
          flex-direction: column !important;
          align-items: flex-start !important;
          gap: 10px !important;
        }
      }

      /* ── Small mobile (≤ 480px) ── */
      @media (max-width: 480px) {
        body[data-layout="2"] .l1-hero-section {
          height: 420px !important;
          min-height: 420px !important;
        }
        body[data-layout="2"] .l2-hero-h1 {
          font-size: 1.7rem !important;
        }
        /* Category cards: 2 per row on small screens */
        body[data-layout="2"] #cardRow > .col-12 {
          flex: 0 0 50% !important;
          max-width: 50% !important;
        }
        /* View All row: hide rule, full-width button */
        body[data-layout="2"] .l2-var-rule {
          display: none !important;
        }
        body[data-layout="2"] .l2-var-btn {
          width: 100% !important;
          justify-content: center !important;
        }
        /* Feature bar: smaller text */
        body[data-layout="2"] .l1-feature-bar .feature-item {
          padding: 10px 8px !important;
        }
      }

      /* ════════════════════════════════════════════════════════
         NAVBAR RESPONSIVE — Login/Register hide on mobile,
         show inside hamburger collapse instead
      ════════════════════════════════════════════════════════ */
      @media (max-width: 991px) {
        /* Hide login/register from topbar-right on mobile */
        .topbar-right .auth-links { display: none !important; }
        /* Show the mobile-only auth row inside hamburger */
        .mobile-nav-auth { display: block !important; }
        /* Keep the topbar-right layout toggle compact */
        .topbar-right {
          margin-left: auto;
        }
      }
      @media (max-width: 575px) {
        /* Compact toggle on very small screens */
        .layout-toggle-btn { padding: 6px 8px !important; }
      }

      /* ════════════════════════════════════════════════════════
         HERO MOBILE — fix image vs background size mismatch
      ════════════════════════════════════════════════════════ */
      @media (max-width: 767px) {
        .l1-hero-section {
          height: 300px !important;
          padding: 0 !important;
          align-items: stretch !important;
        }
        /* Make the carousel image wrapper fill the full section height */
        .l1-hero-section > div:first-child {
          height: 100% !important;
          max-width: 100% !important;
          overflow: hidden !important;
        }
        /* Carousel image: cover the fixed-height container */
        #l1HeroImg {
          width: 100% !important;
          height: 100% !important;
          object-fit: cover !important;
          object-position: center top !important;
        }
        /* Bring chevrons inside the image (not hanging off edges) */
        #l1PrevBtn {
          left: 10px !important;
          width: 34px !important;
          height: 34px !important;
        }
        #l1NextBtn {
          right: 10px !important;
          width: 34px !important;
          height: 34px !important;
        }
        /* Reduce the feature bar overlap on mobile */
        .l1-hero-wrapper > div:last-child {
          margin-top: 0 !important;
        }
        .l1-feature-bar {
          height: auto !important;
        }
      }
      @media (max-width: 480px) {
        .l1-hero-section {
          height: 240px !important;
        }
      }

      /* ════════════════════════════════════════════════════════════════════
         LAYOUT 3 — Orange split-hero design
         Colors: #F97316 orange · #1a1a2e dark ink
      ════════════════════════════════════════════════════════════════════ */

      /* L3 elements hidden by default */
      .l3-hero-wrapper { display: none; }
      .l3-mock-banner  { display: none; }

      /* L3 design tokens */
      body[data-layout="3"] {
        --l3-brand:  #F97316;
        --l3-dark2:  #ea6c0b;
        --l3-ink:    #1a1a2e;
        --l3-muted:  #666;
      }

      /* ── TOP BAR ─────────────────────────────────── */
      body[data-layout="3"] .top-bar {
        display: none !important;
      }

      /* ── NAVBAR ──────────────────────────────────── */
      body[data-layout="3"] .sticky-header,
      body[data-layout="3"] .menu-bar {
        background: #fff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
      }
      body[data-layout="3"] .nav.navbar-nav li > a {
        color: #333 !important;
        font-weight: 500;
      }
      body[data-layout="3"] .nav.navbar-nav li > a:hover,
      body[data-layout="3"] .nav.navbar-nav li > a.active {
        color: var(--l3-brand) !important;
      }
      body[data-layout="3"] .first-a {
        border: 1.5px solid var(--l3-brand) !important;
        color: var(--l3-brand) !important;
        background: transparent !important;
        border-radius: 6px !important;
        padding: 7px 18px !important;
        font-weight: 600 !important;
      }
      body[data-layout="3"] .second-a {
        background: var(--l3-brand) !important;
        color: #fff !important;
        border-color: var(--l3-brand) !important;
        border-radius: 6px !important;
        padding: 7px 18px !important;
        font-weight: 600 !important;
      }
      body[data-layout="3"] .second-a:hover {
        background: var(--l3-dark2) !important;
      }

      /* ── HERO: hide L1 wrapper, show L3 ────────── */
      body[data-layout="3"] .l1-hero-wrapper { display: none  !important; }
      body[data-layout="3"] .l3-hero-wrapper { display: block !important; }

      /* ── L3 HERO SECTION ────────────────────────── */
      .l3-hero-section {
        position: relative;
        background-image: url('../images/first-image.png');
        background-size: cover;
        background-position: center right;
        min-height: 620px;
        display: flex;
        align-items: center;
        overflow: hidden;
      }
      .l3-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(255,255,255,0.92) 0%, rgba(249,249,252,0.65) 40%, rgba(249,249,252,0) 68%);
        z-index: 1;
      }
      .l3-hero-badge {
        font-size: 0.85rem;
        color: #F97316;
        font-weight: 600;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .l3-hero-title {
        font-size: clamp(1.9rem, 4vw, 2.9rem);
        font-weight: 800;
        line-height: 1.15;
        color: #1a1a2e;
        margin-bottom: 18px;
      }
      .l3-orange { color: #F97316; }
      .l3-blue { color: #12699B; }
      .l3-hero-sub {
        font-size: 16px;
        font-weight: 400;
        color: #555;
        line-height: 1.7;
        margin-bottom: 30px;
        max-width: 480px;
      }
      .l3-hero-actions {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 36px;
      }
      .l3-btn-primary {
        background: #F97316;
        color: #fff !important;
        border: none;
        border-radius: 8px;
        padding: 13px 26px;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
        cursor: pointer;
      }
      .l3-btn-primary:hover {
        background: #ea6c0b;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(249,115,22,0.3);
        color: #fff !important;
      }
      .l3-btn-secondary {
        background: transparent !important;
        color: #333 !important;
        border: 1.5px solid #ccc;
        border-radius: 8px;
        padding: 12px 26px;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: border-color 0.2s, color 0.2s, transform 0.2s;
      }
      .l3-btn-secondary:hover {
        background: transparent !important;
        border-color: #F97316;
        color: #F97316 !important;
        transform: translateY(-2px);
      }
      .l3-hero-contact {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
      }
      .l3-contact-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #555;
      }
      .l3-contact-item i { color: #F97316; font-size: 14px; }

      /* Floating category card (right column, over the photo) */
      .l3-floating-card {
        width: 550px;
        max-width: 100%;
        height: 300px;
        background: rgba(255,255,255,0.22);
        border: 1px solid rgba(255,255,255,0.45);
        border-radius: 20px;
        box-shadow: 0 12px 40px rgba(0,0,0,0.15);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        padding: 14px;
        margin-top: 60px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .l3-cat-grid { display: flex; flex-direction: column; gap: 7px; flex: 1; }
      .l3-cat-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
        flex: 1;
      }
      .l3-cat-cell {
        background: #fff;
        border-radius: 8px;
        padding: 9px 10px;
        font-size: 12px;
        font-weight: 500;
        color: #12699B;
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
        overflow: hidden;
        align-self: stretch;
      }
      .l3-cat-dot { color: #F97316; font-size: 16px; line-height: 1; flex-shrink: 0; }
      .l3-cat-row-full {
        background: #fff;
        border-radius: 8px;
        padding: 9px 10px;
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
        overflow: hidden;
        flex: 1;
      }
      .l3-loksewa-title {
        color: #F97316;
        font-weight: 700;
        font-size: 13px;
        flex-shrink: 0;
      }
      .l3-loksewa-desc {
        color: #12699B;
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* ── L3 MOCK BANNER ─────────────────────────── */
      .l3-mock-banner {
        background: rgba(249,115,22,0.9);
        border-radius: 20px;
        max-width: 1330px;
        margin: 60px auto;
        padding: 60px 50px;
        position: relative;
        overflow: hidden;
      }
      .l3-mock-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255,255,255,0.18);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        padding: 5px 14px;
        border-radius: 20px;
        letter-spacing: 0.5px;
        margin-bottom: 20px;
      }
      .l3-mock-title {
        color: #fff;
        font-size: clamp(1.5rem, 3vw, 2.2rem);
        font-weight: 800;
        line-height: 1.25;
        margin-bottom: 14px;
        max-width: 500px;
      }
      .l3-mock-sub {
        color: rgba(255,255,255,0.88);
        font-size: 15px;
        line-height: 1.65;
        margin-bottom: 30px;
        max-width: 460px;
      }
      .l3-mock-actions { display: flex; gap: 14px; flex-wrap: wrap; }
      .l3-btn-white {
        background: #fff;
        color: #F97316 !important;
        border: none;
        border-radius: 8px;
        padding: 12px 26px;
        font-weight: 700;
        font-size: 14px;
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: transform 0.2s, box-shadow 0.2s;
        cursor: pointer;
      }
      .l3-btn-white:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        color: #ea6c0b !important;
      }
      .l3-btn-outline-white {
        background: transparent;
        color: #fff !important;
        border: 2px solid rgba(255,255,255,0.7);
        border-radius: 8px;
        padding: 11px 26px;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: background 0.2s, border-color 0.2s, transform 0.2s;
        cursor: pointer;
      }
      .l3-btn-outline-white:hover {
        background: rgba(255,255,255,0.15);
        border-color: rgba(255,255,255,1);
        transform: translateY(-2px);
        color: #fff !important;
      }

      /* ── L3: SHOW / HIDE ─────────────────────────── */
      body[data-layout="3"] .l3-mock-banner      { display: block !important; }
      body[data-layout="3"] .l2-scholars-extras  { display: none  !important; }
      body[data-layout="3"] .l1-testimonials     { display: none  !important; }
      body[data-layout="3"] .testimonials        { display: block !important; background: rgba(18,105,155,0.08) !important; }
      body[data-layout="3"] .testimonials .section-area { background: rgba(18,105,155,0.08) !important; }
      body[data-layout="3"] .download-section    { display: none  !important; }

      /* ── L3: SECTION ORDER handled via JS reorderForL3() ── */

      /* ── L3: TESTIMONIALS HEADING ────────────────────── */
      .l3-testimonials-head { display: none; }
      body[data-layout="3"] .l3-testimonials-head { display: block; margin-bottom: 28px; }
      body[data-layout="3"] .testimonials .heading-bx { display: none !important; }
      body[data-layout="3"] .testimonials .row.mt-5 { margin-top: 0 !important; }
      body[data-layout="3"] .testimonial-sec .owl-nav { display: none !important; }
      .l3-testimonials-head-inner { position: relative; text-align: center; }
      .l3-testimonials-title {
        font-size: 2rem;
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 10px;
      }
      .l3-testimonials-sub {
        color: #666;
        font-size: 1rem;
        max-width: 580px;
        margin: 0 auto;
      }
      .l3-testimonials-nav {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        gap: 8px;
      }
      .l3-testimonials-nav-btn {
        width: 48px;
        height: 36px;
        border-radius: 6px;
        background: #12699B;
        border: none;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
      }
      .l3-testimonials-nav-btn:hover { background: #0e5280; }
      /* hide mock carousel — replaced by l3-mock-banner */
      body[data-layout="3"] .section-area.section-sp2.popular-courses-bx:has(#mockRow) {
        display: none !important;
      }
      /* show blog section (hidden by L2 rule when L2 is active) */
      body[data-layout="3"] .section-area.section-sp2:not(.popular-courses-bx) {
        display: block !important;
      }

      /* ── L3: SECTION HEADINGS ─────────────────────── */
      body[data-layout="3"] .heading-bx.left .title-head {
        font-size: 28px !important;
        font-weight: 700 !important;
        color: #1a1a2e !important;
      }
      body[data-layout="3"] .heading-bx.left p { color: #666 !important; }

      /* ── L3: CAROUSEL NAV BUTTONS ─────────────────── */
      body[data-layout="3"] #prevBtn,
      body[data-layout="3"] #nextBtn {
        background: #F97316 !important;
      }
      body[data-layout="3"] #coursesPrevBtn,
      body[data-layout="3"] #coursesNextBtn {
        display: none !important;
      }

      /* ── L3: CATEGORY SECTION HEADING ─────────────── */
      body[data-layout="3"] .popular-courses-bx .heading-bx { display: none !important; }
      body[data-layout="3"] #prevBtn,
      body[data-layout="3"] #nextBtn { display: none !important; }
      .l3-cat-head { display: none; }
      body[data-layout="3"] .l3-cat-head { display: block; margin-bottom: 24px; }
      .l3-cat-head-inner {
        position: relative;
        text-align: center;
      }
      .l3-cat-head-title {
        font-size: 2rem;
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 8px;
      }
      .l3-cat-head-sub {
        color: #666;
        font-size: 1rem;
        margin: 0;
      }
      .l3-cat-nav {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        gap: 8px;
      }
      .l3-cat-nav-btn {
        width: 48px;
        height: 36px;
        border-radius: 6px;
        background: #12699B;
        border: none;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
      }
      .l3-cat-nav-btn:hover { background: #0e5280; }

      /* ── L3: CATEGORY CARDS (carousel, 4 visible) ─── */
      body[data-layout="3"] #cardRow {
        flex-wrap: nowrap !important;
        overflow-x: hidden !important;
      }
      body[data-layout="3"] #cardRow > .col-12 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
      }
      body[data-layout="3"] #cardRow .card:hover {
        border-color: #F97316 !important;
        box-shadow: 0 4px 20px rgba(249,115,22,0.15) !important;
        transform: translateY(-4px) !important;
        transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
      }

      /* ── L3: COURSE SECTION ───────────────────────── */
      body[data-layout="3"] .popular-courses-bx:has(#coursesRow) {
        background: #12699B !important;
      }
      body[data-layout="3"] .popular-courses-bx:has(#coursesRow) .heading-bx {
        display: none !important;
      }
      .l3-courses-head { display: none; }
      body[data-layout="3"] .l3-courses-head { display: block; margin-bottom: 28px; }
      .l3-courses-head-inner {
        position: relative;
        text-align: center;
      }
      .l3-courses-title {
        color: #fff;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 10px;
      }
      .l3-courses-sub {
        color: rgba(255,255,255,0.82);
        font-size: 0.95rem;
        max-width: 560px;
        margin: 0 auto;
        line-height: 1.6;
      }
      .l3-courses-viewall {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        white-space: nowrap;
      }
      .l3-courses-viewall:hover { color: rgba(255,255,255,0.75); text-decoration: none; }
      body[data-layout="3"] .popular-courses-bx:has(#coursesRow) .l2-view-all-row {
        display: none !important;
      }
/* ── L3: COURSE SLIDES (3 per row) ────────────── */
      body[data-layout="3"] #coursesRow > div {
        width: calc((100% - 40px) / 3) !important;
        min-width: calc((100% - 40px) / 3) !important;
        height: auto !important;
      }
      body[data-layout="3"] .l2-sec-link {
        display: inline-flex !important;
        color: #F97316 !important;
      }
      body[data-layout="3"] .l2-view-all-row  { display: flex !important; }
      body[data-layout="3"] .l2-var-label     { color: #F97316 !important; }
      body[data-layout="3"] .l2-var-rule      { background: #F97316 !important; }
      body[data-layout="3"] .l2-var-btn       {
        border-color: #F97316 !important;
        color: #F97316 !important;
      }
      body[data-layout="3"] .l2-var-btn:hover {
        background: #F97316 !important;
        color: #fff !important;
        border-color: #F97316 !important;
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 16px rgba(249,115,22,0.22) !important;
      }

      /* ── L3: TESTIMONIALS ─────────────────────────── */
      body[data-layout="3"] .testimonials .section-area {
        background: #fff9f5 !important;
      }
      body[data-layout="3"] .review-card {
        border: 1px solid #ffe0c4 !important;
        border-radius: 14px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
      }
      body[data-layout="3"] .review-card:hover {
        border-color: #F97316 !important;
        box-shadow: 0 4px 16px rgba(249,115,22,0.12) !important;
      }
      body[data-layout="3"] .star-rating i { color: #F97316 !important; }
      body[data-layout="3"] .testimonials .owl-dot.active span {
        background: #F97316 !important;
      }
      body[data-layout="3"] .testimonial-sec .owl-nav .owl-prev,
      body[data-layout="3"] .testimonial-sec .owl-nav .owl-next {
        border-color: #F97316 !important;
        color: #F97316 !important;
        background: #fff !important;
      }
      body[data-layout="3"] .testimonial-sec .owl-nav .owl-prev:hover,
      body[data-layout="3"] .testimonial-sec .owl-nav .owl-next:hover {
        background: #F97316 !important;
        color: #fff !important;
        box-shadow: 0 6px 16px rgba(249,115,22,0.25) !important;
      }

      /* ── L3: BLOG CARDS ───────────────────────────── */
      body[data-layout="3"] .recent-news-carousel:not(.testimonial-sec) .item > a > div {
        border-radius: 12px !important;
        overflow: hidden !important;
        border: none !important;
        transition: box-shadow 0.2s, transform 0.2s !important;
      }
      body[data-layout="3"] .recent-news-carousel:not(.testimonial-sec) .item p[style*="font-weight"] {
        color: #12699B !important;
        transition: color 0.2s !important;
      }
      body[data-layout="3"] .recent-news-carousel:not(.testimonial-sec) .item > a:hover p[style*="font-weight"] {
        color: #F97316 !important;
      }

      /* ── L3: BLOG HEADING ────────────────────────── */
      .l3-blogs-head { display: none; }
      body[data-layout="3"] .l3-blogs-head { display: block; margin-bottom: 28px; }
      .l3-blogs-head-inner { position: relative; text-align: center; }
      .l3-blogs-title { font-size: 2rem; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; }
      .l3-blogs-sub { color: #666; font-size: 1rem; margin: 0; }
      .l3-blogs-viewall {
        position: absolute; right: 0; top: 50%; transform: translateY(-50%);
        color: #F97316; font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap;
      }
      .l3-blogs-viewall:hover { color: #ea6c0b; text-decoration: none; }
      body[data-layout="3"] .section-area.section-sp2:not(.popular-courses-bx) .heading-bx { display: none !important; }
      body[data-layout="3"] .recent-news-carousel:not(.testimonial-sec) .owl-prev,
      body[data-layout="3"] .recent-news-carousel:not(.testimonial-sec) .owl-next { display: none !important; }

      /* ── L3: FAQ ──────────────────────────────────── */
      body[data-layout="3"] .faq-section { display: none !important; }
      .l3-faq { display: none; padding: 80px 0; background: #12699B; }
      body[data-layout="3"] .l3-faq { display: block; }
      .l3-faq__head { text-align: center; margin-bottom: 48px; }
      .l3-faq__eyebrow {
        display: inline-block;
        background: #F97316; color: #fff;
        font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
        padding: 4px 14px; border-radius: 20px;
        margin-bottom: 16px; text-transform: uppercase;
      }
      .l3-faq__title { font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: #fff; margin: 0; }
      .l3-faq__title span { color: #F97316; }
      .l3-faq__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }
      .l3-faq__card {
        background: #fff; border-radius: 12px;
        padding: 22px 20px;
        display: flex; gap: 14px; align-items: flex-start;
      }
      .l3-faq__card-icon { flex-shrink: 0; font-size: 18px; color: #F97316; margin-top: 2px; }
      .l3-faq__card-q { font-size: 15px; font-weight: 700; color: #1a1a2e; margin: 0 0 8px; }
      .l3-faq__card-a { font-size: 14px; color: #555; line-height: 1.7; margin: 0; }

      /* ── L3 RESPONSIVE ────────────────────────────── */

      /* ── Tablet landscape ≤ 991px ── */
      @media (max-width: 991px) {
        .l3-hero-overlay { background: linear-gradient(to right, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0) 90%); }
        .l3-hero-section { min-height: 500px; }
        .l3-mock-banner  { padding: 50px 36px; }

        /* Courses "View All" — drop out of absolute so it doesn't overlap */
        .l3-courses-head-inner { display: flex; flex-direction: column; align-items: center; }
        .l3-courses-viewall { position: static; transform: none; margin-top: 10px; }
      }

      /* ── Tablet portrait / large mobile ≤ 767px ── */
      @media (max-width: 767px) {
        /* Hero */
        .l3-hero-overlay { background: rgba(255,255,255,0.90) !important; }
        .l3-floating-card { display: none !important; }
        .l3-hero-section { min-height: unset !important; }
        .l3-hero-section .container { padding-top: 70px !important; padding-bottom: 70px !important; }

        /* Mock banner */
        .l3-mock-banner { margin: 40px 15px; border-radius: 16px; padding: 40px 24px; }

        /* Categories: 2 per row */
        body[data-layout="3"] #cardRow > .col-12 { flex: 0 0 50% !important; max-width: 50% !important; }

        /* Courses: wider cards in carousel */
        body[data-layout="3"] #coursesRow > div { width: 85vw !important; min-width: 85vw !important; }

        /* Section headings: hide carousel nav (swipe works), fix "View All" */
        .l3-cat-nav { display: none !important; }
        .l3-cat-head-inner { text-align: center; }

        .l3-testimonials-nav { display: none !important; }
        .l3-testimonials-head-inner { text-align: center; }
        .l3-testimonials-sub { margin: 0 auto; }

        .l3-courses-head-inner { display: flex; flex-direction: column; align-items: center; }
        .l3-courses-viewall { position: static; transform: none; margin-top: 10px; }

        .l3-blogs-head-inner { display: flex; flex-direction: column; align-items: center; }
        .l3-blogs-viewall { position: static; transform: none; margin-top: 10px; }

        /* FAQ: single column */
        .l3-faq__grid { grid-template-columns: 1fr; }
        .l3-faq { padding: 60px 0; }
      }

      /* ── Mobile ≤ 480px ── */
      @media (max-width: 480px) {
        /* Hero */
        .l3-hero-section .container { padding-top: 50px !important; padding-bottom: 50px !important; }
        .l3-hero-title   { font-size: 1.8rem !important; }
        .l3-hero-sub     { font-size: 14px !important; }
        .l3-hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
        .l3-btn-primary, .l3-btn-secondary { justify-content: center; text-align: center; }
        .l3-hero-contact { flex-direction: column; gap: 10px; }

        /* Mock banner */
        .l3-mock-banner  { margin: 30px 10px; padding: 32px 16px; }
        .l3-mock-title   { font-size: 1.4rem !important; }
        .l3-mock-actions { flex-direction: column; gap: 10px; }
        .l3-btn-white, .l3-btn-outline-white { text-align: center; justify-content: center; }

        /* Categories: 1 card visible at a time */
        body[data-layout="3"] #cardRow > .col-12 { flex: 0 0 80% !important; max-width: 80% !important; }

        /* FAQ */
        .l3-faq { padding: 48px 0; }
        .l3-faq__title { font-size: 1.4rem !important; }
      }

      /* ════════════════════════════════════════════════════════════════════
         LAYOUT 4 — Design-system green/blue, Duolingo-style cards
         Colors: #1AB189 (primary) · #12699B (secondary/blue) · white bg
      ════════════════════════════════════════════════════════════════════ */

      .l4-hero-wrapper { display: none; }

      body[data-layout="4"] {
        --l4-green:   #1AB189;
        --l4-green-dk:#138f6e;
        --l4-blue:    #12699B;
        --l4-blue-dk: #0e5280;
        --l4-ink:     #1a1a2e;
        --l4-muted:   #555;
        --l4-surface: #f4f9f8;
        --l4-hero-bg: #c8e9f5;
      }

      /* ── WIDER CONTAINER — 4 × 310px cards + 3 × 22px gaps = 1306px ── */
      body[data-layout="4"] .container {
        max-width: 1380px !important;
      }

      /* ── TOP BAR: hidden ────────────────────────── */
      body[data-layout="4"] .top-bar { display: none !important; }

      /* ── NAVBAR ──────────────────────────────────── */
      body[data-layout="4"] .sticky-header,
      body[data-layout="4"] .menu-bar {
        background: #fff !important;
        border-bottom: 1.5px solid #e8f0ee !important;
        box-shadow: 0 2px 12px rgba(26,177,137,0.08) !important;
      }
      body[data-layout="4"] .nav.navbar-nav li > a { color: var(--l4-ink) !important; font-weight: 500 !important; }
      body[data-layout="4"] .nav.navbar-nav li > a:hover { color: var(--l4-green) !important; }
      body[data-layout="4"] .first-a {
        border: 2px solid var(--l4-green) !important;
        color: var(--l4-green) !important;
        background: transparent !important;
        border-radius: 8px !important;
        padding: 7px 18px !important;
        font-weight: 600 !important;
      }
      body[data-layout="4"] .second-a {
        background: var(--l4-green) !important;
        color: #fff !important;
        border-color: var(--l4-green) !important;
        border-radius: 8px !important;
        padding: 7px 18px !important;
        font-weight: 600 !important;
      }
      body[data-layout="4"] .second-a:hover { background: var(--l4-green-dk) !important; }

      /* ── HERO: hide L1/L3, show L4 ─────────────── */
      body[data-layout="4"] .l1-hero-wrapper { display: none !important; }
      body[data-layout="4"] .l3-hero-wrapper { display: none !important; }
      body[data-layout="4"] .l4-hero-wrapper { display: block !important; }

      /* ── L4 HERO SECTION ────────────────────────── */
      .l4-hero-section {
        background: url('../images/layout4bg.png') center 70% / cover no-repeat;
        min-height: 560px;
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
      }
      /* Left-side gradient overlay for text readability */
      .l4-hero-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(200,233,245,0.92) 0%, rgba(200,233,245,0.75) 40%, rgba(200,233,245,0.1) 68%, transparent 80%);
        pointer-events: none;
        z-index: 0;
      }

      /* Left text column */
      .l4-hero-text {
        position: relative;
        z-index: 2;
        padding: 80px 0 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .l4-hero-title {
        font-size: clamp(2.1rem, 4.2vw, 3.1rem);
        font-weight: 800;
        line-height: 1.15;
        margin: 0 0 18px;
      }
      .l4-title-blue    { color: var(--l4-blue); }
      .l4-title-primary { color: var(--l4-green); }

      .l4-hero-sub {
        font-size: 15px;
        color: var(--l4-muted);
        line-height: 1.75;
        margin-bottom: 32px;
        max-width: 480px;
      }

      /* Buttons — Duolingo 3-D press effect */
      .l4-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }

      .l4-btn-primary {
        background: var(--l4-green);
        color: #fff !important;
        border: none;
        border-radius: 10px;
        border-bottom: 4px solid var(--l4-green-dk);
        padding: 14px 30px;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: transform 0.1s ease, border-bottom-width 0.1s ease;
      }
      .l4-btn-primary:hover { transform: translateY(2px); border-bottom-width: 2px; color: #fff !important; }

      .l4-btn-secondary {
        background: #fff;
        color: var(--l4-green) !important;
        border: 2px solid var(--l4-green);
        border-bottom: 4px solid var(--l4-green-dk);
        border-radius: 10px;
        padding: 12px 30px;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: transform 0.1s ease, border-bottom-width 0.1s ease, background 0.15s;
      }
      .l4-btn-secondary:hover { transform: translateY(2px); border-bottom-width: 2px; color: var(--l4-green) !important; }

      /* Inline stats row */
      .l4-hero-stats { display: flex; gap: 36px; flex-wrap: wrap; }
      .l4-hero-stat-num {
        font-size: 24px;
        font-weight: 800;
        color: var(--l4-green);
        line-height: 1;
        margin-bottom: 4px;
      }
      .l4-hero-stat-label { font-size: 13px; color: var(--l4-muted); font-weight: 500; }

      /* ── L4 CATEGORY PILLS (existing #cardRow) ─── */
      body[data-layout="4"] .popular-courses-bx:has(#cardRow) { display: block !important; }
      /* Hide carousels controls and old headings */
      body[data-layout="4"] .popular-courses-bx:has(#cardRow) .l3-cat-head,
      body[data-layout="4"] .popular-courses-bx:has(#cardRow) #prevBtn,
      body[data-layout="4"] .popular-courses-bx:has(#cardRow) #nextBtn { display: none !important; }
      body[data-layout="4"] .popular-courses-bx:has(#cardRow) .heading-bx {
        display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 20px;
      }
      /* Hide actual heading text + links — replaced by ::before / ::after */
      body[data-layout="4"] .popular-courses-bx:has(#cardRow) .heading-bx .title-head,
      body[data-layout="4"] .popular-courses-bx:has(#cardRow) .heading-bx p,
      body[data-layout="4"] .popular-courses-bx:has(#cardRow) .heading-bx .l2-sec-link { display: none !important; }
      /* Inject "Popular Courses" heading text */
      body[data-layout="4"] .popular-courses-bx:has(#cardRow) .heading-bx::before {
        content: "Popular Courses";
        font-size: clamp(1.6rem, 3vw, 2.2rem);
        font-weight: 600;
        color: var(--l4-blue);
        margin-bottom: 8px;
      }
      /* Inject SVG arc underline — centered then shifted right under "Courses" */
      body[data-layout="4"] .popular-courses-bx:has(#cardRow) .heading-bx::after {
        content: "";
        display: block;
        width: 160px;
        height: 12px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12' fill='none'%3E%3Cpath d='M20 10 C55 2%2C 110 2%2C 152 8' stroke='%231AB189' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
        margin: 0 auto 24px;
        transform: translateX(5rem);
      }
      /* ── MOCK TEST HEADING — same pattern as Popular Courses ── */
      body[data-layout="4"] .popular-courses-bx:has(#mockRow) .heading-bx .title-head,
      body[data-layout="4"] .popular-courses-bx:has(#mockRow) .heading-bx p,
      body[data-layout="4"] .popular-courses-bx:has(#mockRow) .heading-bx .l2-carousel-nav { display: none !important; }
      body[data-layout="4"] .popular-courses-bx:has(#mockRow) .heading-bx {
        text-align: center !important;
      }
      body[data-layout="4"] .popular-courses-bx:has(#mockRow) .heading-bx::before {
        content: "Popular Mock Tests";
        font-size: clamp(1.6rem, 3vw, 2.2rem);
        font-weight: 600;
        color: var(--l4-blue);
        margin-bottom: 8px;
      }
      body[data-layout="4"] .popular-courses-bx:has(#mockRow) .heading-bx::after {
        content: "";
        display: block;
        width: 160px;
        height: 12px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12' fill='none'%3E%3Cpath d='M20 10 C55 2%2C 110 2%2C 152 8' stroke='%231AB189' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
        margin: 0 auto 24px;
        transform: translateX(7.5rem);
      }

      /* Flatten carousel into wrapping pill row */
      body[data-layout="4"] .popular-courses-bx:has(#cardRow) > .container > div:last-child { padding: 0 !important; }
      body[data-layout="4"] #cardRow {
        flex-wrap: wrap !important; overflow-x: visible !important;
        justify-content: center !important; gap: 10px !important;
      }
      body[data-layout="4"] #cardRow > .col-12 {
        width: auto !important; max-width: none !important;
        flex: 0 0 auto !important; padding: 0 !important;
      }
      /* Hide "View All" card */
      body[data-layout="4"] #cardRow > .col-12:last-child { display: none !important; }
      body[data-layout="4"] #cardRow img { display: none !important; }
      /* The "All" pills (courses + mock tests) use a 140px <i> icon instead
         of an <img> — hide it too so they match the text-only pills' height */
      body[data-layout="4"] #cardRow .l4-all-pill i,
      body[data-layout="4"] #mockCardRow .l4-all-pill i { display: none !important; }
      body[data-layout="4"] #cardRow .card {
        border: 1.5px solid #e8e8e8 !important; border-radius: 14px !important;
        box-shadow: 0 3px 0 #d1d1d1 !important; background: #fff !important;
        transition: transform 0.1s, box-shadow 0.1s, background 0.15s, border-color 0.15s !important;
      }
      body[data-layout="4"] #cardRow .card-body { padding: 10px 20px !important; }
      body[data-layout="4"] #cardRow h5 {
        font-size: 14px !important; font-weight: 700 !important;
        color: #555 !important; margin: 0 !important; white-space: nowrap !important;
      }
      body[data-layout="4"] #cardRow a:hover .card {
        background: var(--l4-green) !important; border-color: var(--l4-green-dk) !important;
        box-shadow: 0 3px 0 var(--l4-green-dk) !important; transform: translateY(2px) !important;
      }
      body[data-layout="4"] #cardRow a:hover h5 { color: #fff !important; }

      /* ── L4 POPULAR COURSES (existing #coursesRow) ── */
      body[data-layout="4"] .popular-courses-bx:has(#coursesRow) { display: block !important; }
      /* Heading lives in categories section now — hide it here */
      body[data-layout="4"] .popular-courses-bx:has(#coursesRow) .l3-courses-head,
      body[data-layout="4"] .popular-courses-bx:has(#coursesRow) .heading-bx,
      body[data-layout="4"] .popular-courses-bx:has(#coursesRow) .l2-carousel-nav { display: none !important; }
      /* Grid layout — override inline width/height on each carousel item */
      body[data-layout="4"] .popular-courses-bx:has(#coursesRow) > .container > div:last-child { padding: 0 !important; }
      body[data-layout="4"] #coursesRow {
        flex-wrap: nowrap !important; overflow: hidden !important; gap: 22px !important;
      }
      /* Card wrapper: fixed 310×374 */
      body[data-layout="4"] #coursesRow > div {
        width: 310px !important; min-width: 310px !important;
        height: 374px !important; flex-shrink: 0 !important;
      }
      /* <a> must fill the wrapper so the card reaches full height */
      body[data-layout="4"] #coursesRow > div > a {
        display: block !important; height: 100% !important;
      }
      /* Image: 179px */
      body[data-layout="4"] #coursesRow .action-box img {
        height: 179px !important; width: 100% !important; object-fit: cover !important;
      }
      /* Category label color */
      body[data-layout="4"] #coursesRow .courses-info p span { color: var(--l4-green) !important; }
      /* Info-bx: flex column to control order, relative to anchor the ::after button */
      body[data-layout="4"] #coursesRow .info-bx {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px 14px 14px !important;
        position: relative !important;
      }
      /* "Unwrap" cours-more-info so .review and price div become direct flex children */
      body[data-layout="4"] #coursesRow .info-bx .cours-more-info {
        display: contents !important;
      }
      /* Stars row → order -1 so it appears before the title */
      body[data-layout="4"] #coursesRow .info-bx .review {
        order: -1 !important;
      }
      /* Hide duration clock; keep only stars */
      body[data-layout="4"] #coursesRow .review .text-muted {
        display: none !important;
      }
      /* Title */
      body[data-layout="4"] #coursesRow .info-bx > h5 {
        font-size: 15px !important; font-weight: 700 !important;
        color: var(--l4-ink) !important; line-height: 1.35 !important;
        margin: 6px 0 0 !important; order: 0 !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
      }
      /* Bottom row: price (left) + Enroll Now (right) on the same line */
      body[data-layout="4"] #coursesRow .info-bx .courses-info.px-0 {
        order: 10 !important; margin-top: auto !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
      }
      /* Price stack: current price on top, strikethrough below */
      body[data-layout="4"] #coursesRow .info-bx .courses-info.px-0 .d-flex {
        display: block !important;
        flex: 1 !important;
        min-width: 0 !important;
      }
      body[data-layout="4"] #coursesRow .info-bx h5.text-right {
        font-size: 18px !important; font-weight: 700 !important;
        margin: 0 !important; line-height: 1.3 !important;
        text-align: left !important;
      }
      body[data-layout="4"] #coursesRow .info-bx h5.text-right span { color: var(--l4-ink) !important; }
      body[data-layout="4"] #coursesRow .info-bx h6.text-right {
        font-size: 13px !important; font-weight: 400 !important;
        margin: 0 !important; line-height: 1.3 !important;
        color: #a0aec0 !important; text-align: left !important;
      }
      /* Enroll Now: inline flex item on the right, Duolingo press effect */
      body[data-layout="4"] #coursesRow .info-bx .courses-info.px-0::after {
        content: "Enroll Now";
        flex-shrink: 0 !important;
        padding: 9px 16px !important;
        background: var(--l4-green);
        color: #fff;
        font-weight: 700;
        font-size: 13px;
        border-radius: 8px;
        border-bottom: 3px solid var(--l4-green-dk);
        transition: transform 0.1s ease, border-bottom-width 0.1s ease;
        white-space: nowrap;
      }
      body[data-layout="4"] #coursesRow a:hover .info-bx .courses-info.px-0::after {
        transform: translateY(2px);
        border-bottom-width: 1px;
      }

      /* ── SECTIONS show/hide ─────────────────────── */
      body[data-layout="4"] .l1-testimonials    { display: block !important; }
      body[data-layout="4"] .testimonials       { display: none  !important; }
      body[data-layout="4"] .l2-scholars-extras { display: block !important; }
      body[data-layout="4"] .l2-scholars-extras .bright    { display: none !important; }
      /* Hide the old owl-carousel blog section */
      body[data-layout="4"] .section-area.section-sp2:has(.recent-news-carousel:not(.testimonial-sec)) {
        display: none !important;
      }
      body[data-layout="4"] .l3-mock-banner     { display: none  !important; }
      body[data-layout="4"] .l3-faq            { display: none  !important; }
      body[data-layout="4"] .download-section  { background: url('../images/downloadforlayout4.png') center / cover no-repeat !important; }
      body[data-layout="4"] .download-section .desktop-mockup,
      body[data-layout="4"] .download-section .mobile-mockup { display: none !important; }
      body[data-layout="4"] .download-section .col-lg-6:last-child { display: none !important; }
      body[data-layout="4"] .download-section .l4-right-mockup {
        display: block !important;
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        transform: translateY(30px) !important;
        width: auto !important;
        max-width: 55% !important;
        object-fit: contain !important;
        object-position: right bottom !important;
        pointer-events: none !important;
      }
      .l4-right-mockup { display: none; }
      @media (max-width: 767px) {
        body[data-layout="4"] .download-section .l4-right-mockup { display: none !important; }
      }
      body[data-layout="4"] .download-section .download-content { text-align: center !important; }
      body[data-layout="4"] .download-section .app-buttons { justify-content: center !important; }
      body[data-layout="4"] .faq-section        { display: none  !important; }
      body[data-layout="4"] .section-area.section-sp2:not(.popular-courses-bx) { display: block !important; }

      /* ── CATEGORY CARDS — rounded 3-D style ────── */
      body[data-layout="4"] #prevBtn,
      body[data-layout="4"] #nextBtn { background: var(--l4-green) !important; }
      body[data-layout="4"] #cardRow .card {
        border-radius: 18px !important;
        border: 2px solid #e0eeea !important;
        box-shadow: 0 4px 0 #c8ddd8 !important;
        transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s !important;
        overflow: hidden !important;
        background: #fff !important;
      }
      body[data-layout="4"] #cardRow .card:hover {
        border-color: var(--l4-green) !important;
        box-shadow: 0 4px 0 var(--l4-green-dk) !important;
        transform: translateY(-3px) !important;
      }
      body[data-layout="4"] #cardRow .card h5 { color: var(--l4-ink) !important; font-weight: 700 !important; font-size: 14px !important; }

      /* ── L4 "All" pill — hidden in other layouts ── */
      .l4-all-pill { display: none !important; }
      body[data-layout="4"] .l4-all-pill { display: block !important; }

      /* ── L4 active category pill ── */
      body[data-layout="4"] #cardRow a.l4-pill-active .card {
        background: var(--l4-green) !important;
        border-color: var(--l4-green-dk) !important;
        box-shadow: 0 3px 0 var(--l4-green-dk) !important;
      }
      body[data-layout="4"] #cardRow a.l4-pill-active .card h5 { color: #fff !important; }

      /* ── L4 filtered-out course cards ── */
      body[data-layout="4"] #coursesRow > [data-category].l4-hidden { display: none !important; }

      /* ── COURSE & MOCK CARDS ────────────────────── */
      body[data-layout="4"] #coursesRow .cours-bx,
      body[data-layout="4"] #mockRow .cours-bx {
        border-radius: 18px !important;
        border: 2px solid #e0eeea !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
        overflow: hidden !important;
        background: #fff !important;
        transition: box-shadow 0.2s, border-color 0.2s !important;
      }
      /* Course cards: fixed 374px to match design spec */
      body[data-layout="4"] #coursesRow .cours-bx { height: 374px !important; }
      body[data-layout="4"] #coursesRow .cours-bx:hover,
      body[data-layout="4"] #mockRow .cours-bx:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,0.13) !important;
      }
      body[data-layout="4"] #coursesRow .action-box img,
      body[data-layout="4"] #mockRow .action-box img { border-radius: 0 !important; }
      body[data-layout="4"] #coursesPrevBtn,
      body[data-layout="4"] #coursesNextBtn { display: none !important; }
      body[data-layout="4"] #mockPrevBtn,
      body[data-layout="4"] #mockNextBtn { display: none !important; }

      /* ── MOCK PILL ROW ─────────────────────────── */
      .l4-mock-pills { display: none !important; }
      body[data-layout="4"] .l4-mock-pills { display: block !important; }
      body[data-layout="4"] #mockCardRow {
        flex-wrap: wrap !important; overflow-x: visible !important;
        justify-content: center !important; gap: 10px !important;
      }
      body[data-layout="4"] #mockCardRow > .col-12 {
        width: auto !important; max-width: none !important;
        flex: 0 0 auto !important; padding: 0 !important;
      }
      body[data-layout="4"] #mockCardRow img { display: none !important; }
      body[data-layout="4"] #mockCardRow .card {
        border: 1.5px solid #e8e8e8 !important; border-radius: 14px !important;
        box-shadow: 0 3px 0 #d1d1d1 !important; background: #fff !important;
        transition: transform 0.1s, box-shadow 0.1s, background 0.15s, border-color 0.15s !important;
      }
      body[data-layout="4"] #mockCardRow .card-body { padding: 10px 20px !important; }
      body[data-layout="4"] #mockCardRow h5 { color: var(--l4-ink) !important; font-weight: 700 !important; font-size: 14px !important; }
      body[data-layout="4"] #mockCardRow .card:hover {
        border-color: var(--l4-green) !important;
        box-shadow: 0 4px 0 var(--l4-green-dk) !important;
        transform: translateY(-3px) !important;
      }
      body[data-layout="4"] #mockCardRow a.l4-pill-active .card {
        background: var(--l4-green) !important;
        border-color: var(--l4-green-dk) !important;
        box-shadow: 0 3px 0 var(--l4-green-dk) !important;
      }
      body[data-layout="4"] #mockCardRow a.l4-pill-active .card h5 { color: #fff !important; }
      body[data-layout="4"] #mockRow > [data-category].l4-hidden { display: none !important; }

      /* ── MOCK ROW LAYOUT ─ matches coursesRow ───── */
      body[data-layout="4"] #mockRow {
        flex-wrap: nowrap !important; overflow: hidden !important; gap: 22px !important;
      }
      body[data-layout="4"] #mockRow > div {
        width: 310px !important; min-width: 310px !important;
        height: 374px !important; flex-shrink: 0 !important;
      }
      body[data-layout="4"] #mockRow > div > a {
        display: block !important; height: 100% !important;
      }
      body[data-layout="4"] #mockRow .cours-bx { height: 374px !important; }
      body[data-layout="4"] #mockRow .action-box img {
        height: 179px !important; width: 100% !important; object-fit: cover !important;
      }
      body[data-layout="4"] #mockRow .info-bx {
        display: flex !important; flex-direction: column !important;
        padding: 10px 14px 14px !important; position: relative !important;
      }
      body[data-layout="4"] #mockRow .info-bx .cours-more-info { display: contents !important; }
      body[data-layout="4"] #mockRow .info-bx .review { order: -1 !important; }
      body[data-layout="4"] #mockRow .review .text-muted { display: none !important; }
      body[data-layout="4"] #mockRow .info-bx > h5 {
        font-size: 15px !important; font-weight: 700 !important;
        color: var(--l4-ink) !important; line-height: 1.35 !important;
        margin: 6px 0 0 !important; order: 0 !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
      }
      body[data-layout="4"] #mockRow .info-bx .courses-info.px-0 {
        order: 10 !important; margin-top: auto !important;
        width: 100% !important;
        display: flex !important; align-items: center !important;
        justify-content: space-between !important; gap: 8px !important;
      }
      body[data-layout="4"] #mockRow .info-bx .courses-info.px-0 .d-flex {
        display: block !important; flex: 1 !important; min-width: 0 !important;
      }
      body[data-layout="4"] #mockRow .info-bx h5.text-right {
        font-size: 18px !important; font-weight: 700 !important;
        margin: 0 !important; line-height: 1.3 !important; text-align: left !important;
      }
      body[data-layout="4"] #mockRow .info-bx h5.text-right span { color: var(--l4-ink) !important; }
      body[data-layout="4"] #mockRow .info-bx h6.text-right {
        font-size: 13px !important; font-weight: 400 !important;
        margin: 0 !important; line-height: 1.3 !important;
        color: #a0aec0 !important; text-align: left !important;
      }
      body[data-layout="4"] #mockRow .info-bx .courses-info.px-0::after {
        content: "Enroll Now";
        flex-shrink: 0 !important;
        padding: 9px 16px !important;
        background: var(--l4-green);
        color: #fff;
        font-weight: 700; font-size: 13px;
        border-radius: 8px;
        border-bottom: 3px solid var(--l4-green-dk);
        transition: transform 0.1s ease, border-bottom-width 0.1s ease;
        white-space: nowrap;
      }
      body[data-layout="4"] #mockRow a:hover .info-bx .courses-info.px-0::after {
        transform: translateY(2px); border-bottom-width: 1px;
      }

      /* ── SECTION HEADINGS ──────────────────────── */
      body[data-layout="4"] .heading-bx.left .title-head { font-size: 30px !important; font-weight: 800 !important; color: var(--l4-ink) !important; }
      body[data-layout="4"] .heading-bx.left p { color: var(--l4-muted) !important; }

      /* ── FAQ ────────────────────────────────────── */
      body[data-layout="4"] .faq-section { background: var(--l4-surface) !important; }
      body[data-layout="4"] .faq-item.active .faq-question-text { color: var(--l4-green) !important; }
      body[data-layout="4"] .faq-item.active .faq-toggle-icon { color: var(--l4-green) !important; }
      body[data-layout="4"] .contact-card { background: var(--l4-green) !important; }

      /* ── TESTIMONIALS ───────────────────────────── */
      body[data-layout="4"] .testimonials .section-area { background: var(--l4-surface) !important; }
      body[data-layout="4"] .review-card {
        border-radius: 18px !important;
        border: 2px solid #e0eeea !important;
        box-shadow: 0 4px 0 #c8ddd8 !important;
      }
      body[data-layout="4"] .review-card:hover {
        border-color: var(--l4-green) !important;
        box-shadow: 0 4px 0 var(--l4-green-dk) !important;
      }
      body[data-layout="4"] .star-rating i { color: #f8a401 !important; }

      /* ══════════════════════════════════════════════
         TESTIMONIALS — L1 structure, L4 design system
         ══════════════════════════════════════════════ */
      body[data-layout="4"] .l1-testimonials {
        background: #fff !important;
        padding: 80px 0 !important;
      }
      body[data-layout="4"] .l1-testi-heading h2 {
        font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
        font-weight: 800 !important;
        color: var(--l4-ink) !important;
        line-height: 1.2 !important;
      }
      body[data-layout="4"] .l1-testi-highlight {
        color: var(--l4-green) !important;
        text-decoration: underline !important;
        text-decoration-color: var(--l4-green) !important;
        text-underline-offset: 5px !important;
        text-decoration-thickness: 2px !important;
      }
      body[data-layout="4"] .l1-testi-nav {
        margin-top: 32px !important;
        gap: 12px !important;
      }
      body[data-layout="4"] .l1-testi-nav button {
        width: 48px !important; height: 48px !important;
        border-radius: 50% !important;
        border: 2px solid var(--l4-green) !important;
        color: var(--l4-green) !important;
        background: #fff !important;
        box-shadow: 0 3px 0 var(--l4-green-dk) !important;
        transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s !important;
      }
      body[data-layout="4"] .l1-testi-nav button:hover {
        background: var(--l4-green) !important;
        color: #fff !important;
        border-color: var(--l4-green) !important;
        transform: translateY(2px) !important;
        box-shadow: 0 1px 0 var(--l4-green-dk) !important;
      }
      body[data-layout="4"] .l1-testi-cards {
        gap: 20px !important;
      }
      body[data-layout="4"] .l1-testi-card {
        background: #fff !important;
        border-radius: 14px !important;
        border: 1.5px solid #e0eeea !important;
        box-shadow: 0 2px 12px rgba(26,177,137,0.07) !important;
        transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
      }
      body[data-layout="4"] .l1-testi-card:hover {
        border-color: var(--l4-green) !important;
        box-shadow: 0 6px 20px rgba(26,177,137,0.15) !important;
        transform: translateY(-3px) !important;
      }
      body[data-layout="4"] .l1-testi-card-header h5 {
        color: var(--l4-ink) !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
      }
      body[data-layout="4"] .l1-testi-stars {
        color: #f8a401 !important;
        font-size: 13px !important;
        letter-spacing: 2px !important;
      }
      body[data-layout="4"] .l1-testi-card p {
        color: var(--l4-muted) !important;
        font-size: 0.88rem !important;
        line-height: 1.7 !important;
        font-weight: 400 !important;
      }

      /* ══════════════════════════════════════════════
         BLOG — L4 design system
         ══════════════════════════════════════════════ */
      body[data-layout="4"] .blog-wrap {
        background: var(--l4-surface) !important;
        padding: 80px 0 !important;
      }
      body[data-layout="4"] .blog-wrap .sec-head {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        gap: 24px !important;
        margin-bottom: 40px !important;
      }
      body[data-layout="4"] .blog-wrap .sec-head h2 {
        font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
        font-weight: 800 !important;
        color: var(--l4-ink) !important;
        margin: 0 !important;
        line-height: 1.2 !important;
      }
      body[data-layout="4"] .blog-wrap .sec-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 9px 20px !important;
        background: var(--l4-green) !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        border-bottom: 3px solid var(--l4-green-dk) !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: transform 0.1s ease, border-bottom-width 0.1s ease !important;
        flex-shrink: 0 !important;
      }
      body[data-layout="4"] .blog-wrap .sec-link:hover {
        transform: translateY(2px) !important;
        border-bottom-width: 1px !important;
        color: #fff !important;
      }
      body[data-layout="4"] .blog-row {
        background: #fff !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        border: 1.5px solid #e0eeea !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        min-height: 300px !important;
        margin-bottom: 24px !important;
        transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
      }
      body[data-layout="4"] .blog-row:hover {
        border-color: var(--l4-green) !important;
        box-shadow: 0 6px 24px rgba(26,177,137,0.12) !important;
        transform: translateY(-3px) !important;
      }
      body[data-layout="4"] .blog-row .img { background: #cde8e0 !important; }
      body[data-layout="4"] .blog-row .img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
      }
      body[data-layout="4"] .blog-row .body {
        padding: 36px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
      }
      body[data-layout="4"] .blog-meta {
        display: inline-block !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        color: var(--l4-green) !important;
        background: rgba(26,177,137,0.10) !important;
        padding: 3px 10px !important;
        border-radius: 20px !important;
      }
      body[data-layout="4"] .blog-row h3 {
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        margin: 14px 0 10px !important;
        color: var(--l4-ink) !important;
      }
      body[data-layout="4"] .blog-row p {
        color: var(--l4-muted) !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
        margin: 0 0 24px !important;
      }
      body[data-layout="4"] .blog-foot {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
      }
      body[data-layout="4"] .blog-wrap .read-more {
        color: var(--l4-green) !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        text-decoration: none !important;
        transition: gap 0.2s !important;
      }
      body[data-layout="4"] .blog-wrap .read-more:hover {
        color: var(--l4-green-dk) !important;
        gap: 10px !important;
      }
      body[data-layout="4"] .blog-wrap .read-arrow {
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: var(--l4-green) !important;
        color: #fff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        text-decoration: none !important;
        border-bottom: 3px solid var(--l4-green-dk) !important;
        transition: transform 0.1s ease, border-bottom-width 0.1s ease !important;
      }
      body[data-layout="4"] .blog-wrap .read-arrow:hover {
        transform: translateY(2px) !important;
        border-bottom-width: 1px !important;
      }
      @media (max-width: 991px) {
        body[data-layout="4"] .blog-row .body { padding: 28px !important; }
        body[data-layout="4"] .blog-row h3 { font-size: 19px !important; }
      }
      @media (max-width: 767px) {
        body[data-layout="4"] .blog-row { grid-template-columns: 1fr !important; }
        body[data-layout="4"] .blog-row .img { min-height: 200px !important; }
        body[data-layout="4"] .blog-row .body { padding: 24px !important; }
        body[data-layout="4"] .blog-wrap .sec-head {
          flex-direction: column !important;
          align-items: flex-start !important;
          gap: 14px !important;
        }
      }

      /* ══════════════════════════════════════════════
         FAQ — L4 design system
         ══════════════════════════════════════════════ */
      body[data-layout="4"] .faq-wrap {
        background: #fff !important;
        padding: 80px 0 !important;
        position: relative !important;
        overflow: hidden !important;
      }
      body[data-layout="4"] .faq-wrap::before {
        content: "" !important;
        position: absolute !important;
        right: 80px !important; bottom: 80px !important;
        width: 140px !important; height: 140px !important;
        background: rgba(26,177,137,0.08) !important;
        transform: rotate(45deg) !important;
        z-index: 0 !important; border-radius: 10px !important;
      }
      body[data-layout="4"] .faq-head {
        text-align: center !important;
        max-width: 600px !important;
        margin: 0 auto 48px !important;
        position: relative !important; z-index: 1 !important;
      }
      body[data-layout="4"] .faq-head h2 {
        font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
        font-weight: 800 !important;
        color: var(--l4-ink) !important;
        margin: 0 0 8px !important;
      }
      body[data-layout="4"] .faq-head p {
        color: var(--l4-muted) !important;
        font-size: 15px !important;
        margin: 0 !important;
      }
      body[data-layout="4"] .faq-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 32px !important;
        align-items: start !important;
        position: relative !important; z-index: 1 !important;
      }
      body[data-layout="4"] .faq-wrap .faq-item {
        position: relative !important;
        background: var(--l4-surface) !important;
        border-radius: 14px !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
        border: 1.5px solid #e0eeea !important;
        transition: border-color 0.15s !important;
      }
      body[data-layout="4"] .faq-wrap .faq-item::before {
        content: "" !important; position: absolute !important;
        left: 0 !important; top: 0 !important; bottom: 0 !important;
        width: 0 !important; background: var(--l4-green) !important;
        transition: width 0.15s ease !important; border-radius: 0 !important;
      }
      body[data-layout="4"] .faq-wrap .faq-item.active {
        border-color: var(--l4-green) !important;
        background: #fff !important;
      }
      body[data-layout="4"] .faq-wrap .faq-item.active::before { width: 5px !important; }
      body[data-layout="4"] .faq-wrap .faq-item button {
        width: 100% !important; text-align: left !important;
        background: transparent !important; border: 0 !important;
        padding: 18px 20px !important;
        display: flex !important; justify-content: space-between !important; align-items: center !important;
        font-weight: 600 !important; font-size: 14px !important;
        color: var(--l4-ink) !important;
        transition: color 0.15s ease, padding-left 0.15s ease !important;
        cursor: pointer !important; gap: 12px !important;
      }
      body[data-layout="4"] .faq-wrap .faq-item.active button {
        padding-left: 26px !important;
        color: var(--l4-green) !important;
      }
      body[data-layout="4"] .faq-wrap .faq-item .chev {
        width: 24px !important; height: 24px !important; border-radius: 50% !important;
        border: 1.5px solid #d0d8d5 !important; color: #aaa !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        font-size: 10px !important; flex-shrink: 0 !important;
        background: #fff !important;
        transition: all 0.15s ease !important;
      }
      body[data-layout="4"] .faq-wrap .faq-item.active .chev {
        border-color: var(--l4-green) !important;
        color: var(--l4-green) !important;
        background: rgba(26,177,137,0.08) !important;
      }
      body[data-layout="4"] .faq-wrap .faq-answer {
        background: var(--l4-green) !important;
        color: #fff !important;
        padding: 40px !important;
        border-radius: 14px !important;
        min-height: 360px !important;
        max-height: none !important;
        position: relative !important; overflow: hidden !important;
        box-shadow: 0 12px 40px -10px rgba(26,177,137,0.35) !important;
        border: none !important;
      }
      body[data-layout="4"] .faq-wrap .faq-answer::after {
        content: "" !important; position: absolute !important;
        top: -60px !important; right: -60px !important;
        width: 180px !important; height: 180px !important;
        background: rgba(255,255,255,0.10) !important; border-radius: 50% !important;
      }
      body[data-layout="4"] .faq-wrap .faq-answer::before {
        content: "" !important; position: absolute !important;
        bottom: -40px !important; left: -40px !important;
        width: 130px !important; height: 130px !important;
        background: rgba(255,255,255,0.06) !important; border-radius: 50% !important;
      }
      body[data-layout="4"] .faq-wrap .faq-answer .ic {
        width: 44px !important; height: 44px !important; border-radius: 10px !important;
        background: rgba(255,255,255,0.20) !important;
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
        font-size: 18px !important; color: #fff !important;
        position: relative !important; z-index: 1 !important;
      }
      body[data-layout="4"] .faq-wrap .faq-answer h3 {
        color: #fff !important; font-size: 24px !important; font-weight: 700 !important;
        margin: 36px 0 16px !important; line-height: 1.3 !important;
        position: relative !important; z-index: 1 !important;
      }
      body[data-layout="4"] .faq-wrap .faq-answer p {
        color: rgba(255,255,255,0.90) !important; font-size: 15px !important;
        line-height: 1.75 !important; margin: 0 !important;
        position: relative !important; z-index: 1 !important;
      }
      @media (max-width: 991px) {
        body[data-layout="4"] .faq-grid { grid-template-columns: 1fr !important; }
        body[data-layout="4"] .faq-wrap .faq-answer { min-height: 280px !important; }
        body[data-layout="4"] .faq-wrap { padding: 60px 0 !important; }
      }
      @media (max-width: 767px) {
        body[data-layout="4"] .faq-wrap .faq-answer { min-height: auto !important; max-height: none !important; padding: 28px !important; }
        body[data-layout="4"] .faq-head h2 { font-size: 1.7rem !important; }
      }

      /* ── SECTION BACKGROUNDS ────────────────────── */
      body[data-layout="4"] .section-area.section-sp2.popular-courses-bx:has(#coursesRow) { background: #fff !important; }
      body[data-layout="4"] .section-area.section-sp2.popular-courses-bx:has(#mockRow) {
        background: var(--l4-surface) !important;
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;
      }
      body[data-layout="4"] .section-area.section-sp2.popular-courses-bx:has(#mockRow)::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: url("../images/popularmocktestbg.png") center / cover no-repeat !important;
        opacity: 0.30 !important;
        z-index: -1 !important;
        pointer-events: none !important;
      }

      /* ── SECTION SPACING ───────────────────────── */
      body[data-layout="4"] .section-area.section-sp2.popular-courses-bx:has(#cardRow) {
        padding-bottom: 48px !important;
      }
      body[data-layout="4"] .section-area.section-sp2.popular-courses-bx:has(#coursesRow) {
        padding-top: 48px !important;
      }
      /* Gap between mock pills and mock cards */
      body[data-layout="4"] .l4-mock-pills {
        margin-bottom: 32px !important;
      }

      /* ── L4 CUSTOM NAVBAR ──────────────────────── */
      body[data-layout="4"] .header.rs-nav { display: none !important; }
      .l4-navbar {
        display: none;
        position: sticky;
        top: 0;
        z-index: 99999;
        background: #fff;
        box-shadow: 0 2px 16px rgba(0,0,0,0.09);
      }
      body[data-layout="4"] .l4-navbar { display: block; }

      .l4-nav-inner {
        display: flex;
        align-items: center;
        height: 80px;
        position: relative;
        gap: 0;
      }
      .l4-nav-logo { flex-shrink: 0; text-decoration: none; }
      .l4-nav-logo img { height: 46px; width: auto; display: block; }

      /* Nav links */
      .l4-nav-links {
        display: flex;
        align-items: center;
        list-style: none;
        padding: 0;
        margin: 0 0 0 120px;
        gap: 2px;
      }
      .l4-nav-links > li { position: relative; }
      .l4-nav-links > li > a {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        text-decoration: none !important;
        padding: 8px 16px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        transition: background 0.15s, color 0.15s;
      }
      .l4-nav-links > li > a:hover { background: rgba(26,177,137,0.08); color: var(--l4-green); }

      /* Explore dropdown — hover triggered */
      .l4-explore-wrap:hover .l4-explore-dropdown,
      .l4-explore-wrap:focus-within .l4-explore-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
      .l4-explore-dropdown {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 10px 36px rgba(0,0,0,0.13);
        border: 1px solid #f0f0f0;
        width: 210px;
        overflow: visible;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
        z-index: 100;
        padding: 8px 0;
      }
      /* Left panel rows — each wraps one trigger + its flyout sub-panel */
      .l4-flyout-row { position: relative; }
      .l4-flyout-row:first-child .l4-flyout-item { border-radius: 6px 6px 0 0; }
      .l4-flyout-row:last-child  .l4-flyout-item { border-radius: 0 0 6px 6px; }
      .l4-flyout-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 18px;
        font-size: 14px;
        font-weight: 600;
        color: #333;
        text-decoration: none !important;
        transition: background 0.15s, color 0.15s;
        white-space: nowrap;
        gap: 24px;
      }
      .l4-flyout-item:hover { background: rgba(26,177,137,0.08); color: var(--l4-green) !important; }
      .l4-flyout-item i { font-size: 10px; color: #bbb; flex-shrink: 0; }
      .l4-flyout-item:hover i { color: var(--l4-green); }
      /* Right sub-panel — flush against left panel */
      .l4-flyout-sub {
        display: none;
        position: absolute;
        left: 100%;
        top: -8px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 10px 36px rgba(0,0,0,0.13);
        border: 1px solid #f0f0f0;
        width: 200px;
        padding: 8px 0;
        z-index: 101;
      }
      .l4-flyout-row:hover .l4-flyout-sub { display: block; }
      /* Invisible bridge — fills space between panels so diagonal mouse movement doesn't lose hover */
      .l4-flyout-row:hover::after {
        content: '';
        position: absolute;
        left: 100%;
        top: -20px;
        width: 16px;
        height: calc(100% + 40px);
      }
      .l4-dd-item {
        display: flex;
        align-items: center;
        padding: 10px 18px;
        font-size: 13.5px;
        font-weight: 500;
        color: #333;
        text-decoration: none !important;
        transition: background 0.15s, color 0.15s;
        white-space: nowrap;
      }
      .l4-dd-item:hover { background: rgba(26,177,137,0.07); color: var(--l4-green) !important; }

      /* Search bar — absolutely centered in navbar */
      .l4-search-wrap {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
      }
      .l4-search-wrap input {
        width: 100%;
        border: 1.5px solid #e8e8e8;
        border-radius: 10px;
        padding: 10px 40px 10px 16px;
        font-size: 14px;
        color: #333;
        outline: none;
        background: #f7f7f7;
        transition: border-color 0.2s, background 0.2s;
      }
      .l4-search-wrap input::placeholder { color: #aaa; }
      .l4-search-wrap input:focus { border-color: var(--l4-green); background: #fff; }
      .l4-search-icon {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #aaa;
        font-size: 14px;
        pointer-events: none;
      }

      /* Auth area */
      .l4-nav-auth { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
      .l4-login-link {
        font-size: 15px; font-weight: 600; color: #333 !important;
        text-decoration: none !important; padding: 8px 14px; border-radius: 8px;
        transition: color 0.15s;
      }
      .l4-login-link:hover { color: var(--l4-green) !important; }
      .l4-getstarted-btn {
        background: var(--l4-green);
        color: #fff !important;
        font-size: 14px; font-weight: 700;
        padding: 11px 22px;
        border-radius: 10px;
        border-bottom: 3px solid var(--l4-green-dk);
        text-decoration: none !important;
        display: inline-flex; align-items: center; gap: 8px;
        transition: transform 0.1s, border-bottom-width 0.1s;
        white-space: nowrap;
      }
      .l4-getstarted-btn:hover { transform: translateY(2px); border-bottom-width: 1px; color: #fff !important; }

      /* L4 layout switcher (mirrors the one in other layouts) */
      .l4-layout-switcher { position: relative; }
      .l4-layout-toggle-btn {
        display: flex; align-items: center; gap: 6px;
        padding: 7px 11px; border: 1.5px solid #e0e0e0;
        border-radius: 8px; background: #fff;
        font-size: 13px; font-weight: 600; color: #555;
        cursor: pointer; transition: border-color 0.2s, color 0.2s;
        white-space: nowrap;
      }
      .l4-layout-toggle-btn:hover { border-color: var(--l4-green); color: var(--l4-green); }
      .l4-layout-dd-menu {
        display: none; position: absolute; top: calc(100% + 6px); right: 0;
        background: #fff; border: 1px solid #e8e8e8; border-radius: 10px;
        box-shadow: 0 6px 24px rgba(0,0,0,0.1); min-width: 140px; z-index: 200; overflow: hidden;
      }
      .l4-layout-switcher.open .l4-layout-dd-menu { display: block; }
      .l4-layout-dd-btn {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 14px; font-size: 13px; font-weight: 500; color: #333;
        cursor: pointer; border: none; width: 100%; background: none; text-align: left;
        transition: background 0.15s;
      }
      .l4-layout-dd-btn:hover { background: rgba(26,177,137,0.07); }
      .l4-layout-dd-btn.active { color: var(--l4-green); font-weight: 700; }
      .l4-layout-num {
        width: 22px; height: 22px; border-radius: 6px;
        background: rgba(26,177,137,0.12); color: var(--l4-green);
        font-size: 11px; font-weight: 700;
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      }
      .l4-layout-check { margin-left: auto; color: var(--l4-green); font-size: 11px; display: none; }
      .l4-layout-dd-btn.active .l4-layout-check { display: block; }

      @media (max-width: 991px) {
        .l4-search-wrap { width: 200px; }
        .l4-nav-links { display: none; }
      }
      @media (max-width: 767px) {
        .l4-search-wrap { display: none; }
        .l4-nav-inner { height: 64px; }
        .l4-login-link { display: none; }
      }

      /* ── L4 RESPONSIVE ──────────────────────────── */
      @media (max-width: 991px) {
        .l4-hero-section { min-height: 460px; background-position: right center; }
        .l4-hero-section::before { background: linear-gradient(to right, rgba(200,233,245,0.88) 0%, rgba(200,233,245,0.65) 55%, rgba(200,233,245,0) 80%); }
        .l4-hero-text { padding: 60px 0 40px; }
        /* Testimonials: stack left-col heading above cards on tablet */
        body[data-layout="4"] .l1-testimonials { padding: 60px 0 !important; }
        body[data-layout="4"] .l1-testi-heading h2 { font-size: 1.9rem !important; }
        body[data-layout="4"] .l1-testi-nav { margin-top: 20px !important; }
        /* Pills: allow scroll on tablet */
        body[data-layout="4"] #cardRow,
        body[data-layout="4"] #mockCardRow { overflow-x: auto !important; }
      }
      @media (max-width: 767px) {
        .l4-hero-section { min-height: 420px; background-position: 70% center; }
        .l4-hero-section::before { background: rgba(200,233,245,0.88) !important; }
        .l4-hero-title { font-size: 2rem !important; }
        .l4-hero-sub { max-width: 100%; }
        .l4-hero-actions { flex-direction: column; align-items: stretch; }
        .l4-btn-primary, .l4-btn-secondary { justify-content: center; }
        .l4-hero-stats { gap: 20px; }
        body[data-layout="4"] #coursesRow > div,
        body[data-layout="4"] #mockRow > div { width: 85vw !important; min-width: 85vw !important; }
        /* Testimonials: center nav + compact */
        body[data-layout="4"] .l1-testimonials { padding: 48px 0 !important; }
        body[data-layout="4"] .l1-testi-heading h2 { font-size: 1.7rem !important; }
        body[data-layout="4"] .l1-testi-nav { justify-content: flex-start !important; }
        /* Pills: full-width scroll on mobile */
        body[data-layout="4"] .l4-mock-pills { padding: 0 12px !important; }
      }
      @media (max-width: 480px) {
        .l4-hero-title { font-size: 1.75rem !important; }
        .l4-hero-text { padding: 48px 0 36px; }
        .l4-hero-stat-num { font-size: 20px; }
        body[data-layout="4"] .l1-testi-heading h2 { font-size: 1.55rem !important; }
        body[data-layout="4"] .blog-row h3 { font-size: 18px !important; }
        body[data-layout="4"] .faq-head h2 { font-size: 1.5rem !important; }
      }