/*
 * Intelligence Lab / AI Academy — brand accent override (default-new)
 * Loaded last from includes_top.php.
 *
 * Scope: recolour template accents (purple #754FFE / #7B60FF, orange #f95c16,
 * blue CTAs) to brand teal. Does NOT force a site-wide dark background —
 * the theme’s own light/dark scheme remains.
 *
 * Fonts: Plus Jakarta Sans + DM Sans are linked in includes_top.php.
 */

/* ==========================================================================
   1. Brand tokens
   ========================================================================== */
:root {
  --il-teal: #26C7BB;
  --il-teal-hover: #1FA89E;
  --il-teal-text: #0E7C74;       /* teal text on light bg (AA) */
  --il-teal-text-hover: #0B6B64;
  --il-navy: #050913;            /* footer / text on teal fills */
  --il-light: #FDFDFD;           /* text on navy only */
  --il-muted: #A9A7B0;           /* muted on navy only */

  --il-focus-light: #0E7C74;
  --il-focus-dark: #26C7BB;
  --il-input-focus-shadow: 0 0 0 0.25rem rgba(38, 199, 187, 0.25);

  /* Remap theme accent tokens (do NOT remap --bg-white* to dark) */
  --color-4: var(--il-teal);
  --color-12: rgba(38, 199, 187, 0.23);
  --color-15: rgba(38, 199, 187, 0.34);
  --bs-primary: #26C7BB;
  --bs-primary-rgb: 38, 199, 187;
  --bs-link-color: #0E7C74;
  --bs-link-hover-color: #0B6B64;
}

/* Home layout scopes redefine --color-4; keep brand accent there too */
.home_1st,
.home_2nd,
.home_3rd,
.home_4th,
.home_5th,
.dark-theme {
  --color-4: var(--il-teal);
  --color-12: rgba(38, 199, 187, 0.23);
  --color-15: rgba(38, 199, 187, 0.34);
}

/* ==========================================================================
   2. Typography (keep icon fonts untouched)
   ========================================================================== */
body {
  font-family: "DM Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.title-typo2,
.title-typo4,
.ft2-title,
.course-heading-info,
.courses-details-1st-text,
.etopCourseHead,
.sing-up-right h1,
.sing-up-right h2,
.sing-up-right h3,
.cart-heading-text,
.dev-section-title > .title,
.dev-categories-section-title > .title,
.software-development-details > .title,
.programming-ebook-details .title,
.lms4-cCard-title,
.lms3-bCard-title,
.lms2-cCard-title,
.navbar-brand {
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

/* Icon fonts (.fa, [class^="fa-"], etc.) intentionally untouched */

/* ==========================================================================
   3. Focus / selection
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--il-focus-light);
  outline-offset: 2px;
}

.lms2-footer-section :focus-visible,
body.dark :focus-visible {
  outline-color: var(--il-focus-dark);
}

::selection {
  background-color: rgba(38, 199, 187, 0.35);
  color: var(--il-navy);
}

/* ==========================================================================
   4. Global Bootstrap / theme accent utilities
   ========================================================================== */
.btn-primary,
.bg-primary,
.badge.bg-primary {
  background-color: var(--il-teal) !important;
  border-color: var(--il-teal) !important;
  color: var(--il-navy) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--il-teal-hover) !important;
  border-color: var(--il-teal-hover) !important;
  color: var(--il-navy) !important;
}

.btn-outline-primary {
  border-color: var(--il-teal) !important;
  color: var(--il-teal-text) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--il-teal) !important;
  border-color: var(--il-teal) !important;
  color: var(--il-navy) !important;
}

.text-primary {
  color: var(--il-teal-text) !important;
}

body.dark .text-primary {
  color: var(--il-teal) !important;
}

.border-primary {
  border-color: var(--il-teal) !important;
}

.progress-bar {
  background-color: var(--il-teal) !important;
}

.form-check-input:checked {
  background-color: var(--il-teal) !important;
  border-color: var(--il-teal) !important;
}

.form-check-input:focus {
  border-color: var(--il-teal);
  box-shadow: var(--il-input-focus-shadow);
}

.page-link:hover,
.page-item.active .page-link,
.pagenation .active {
  background-color: var(--il-teal) !important;
  border-color: var(--il-teal) !important;
  color: var(--il-navy) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--il-teal) !important;
  color: var(--il-navy) !important;
}

/* Theme button classes that use purple / accent fills */
.signUp-btn,
.sign-in-box .sign-up-btn,
.ctBtn,
.list-btn.active,
.btn-primary-2,
.btn-primary-3,
.purchase-btn,
.popover-btns .purchase-btn,
.green_purchase {
  background-color: var(--il-teal) !important;
  border-color: var(--il-teal) !important;
  color: var(--il-navy) !important;
}

.signUp-btn:hover,
.ctBtn:hover,
.purchase-btn:hover,
.btn-primary-2:hover,
.btn-primary-3:hover {
  background-color: var(--il-teal-hover) !important;
  border-color: var(--il-teal-hover) !important;
  color: var(--il-navy) !important;
}

.logIn-btn:hover {
  color: var(--il-teal-text) !important;
  border-color: var(--il-teal) !important;
}

/* new-style.css accent buttons (when present) */
.btn-five {
  background: var(--il-teal) !important;
  color: var(--il-navy) !important;
}

.btn-six {
  background: var(--il-teal-hover) !important;
  color: var(--il-navy) !important;
  box-shadow: 0 10px 18px rgba(38, 199, 187, 0.25) !important;
}

/* ==========================================================================
   5. Header (light scheme accents only)
   ========================================================================== */
.menubar,
section.menubar,
.navbar.navbar-expand-lg.navbar-light {
  border-bottom: 1px solid rgba(5, 9, 19, 0.08);
}

.menubar .logo img,
.navbar-brand.logo img {
  /* Preserve template logo sizing; do not filter */
  height: 32px;
  width: auto;
}

.main-nav-wrap .nav-item .nav-link:hover,
.navbar-nav .nav-link:hover,
.main-nav-wrap .nav-item .nav-link.active,
.menubar .nav-link:hover,
.menubar .nav-link.active,
.menubar li .header-dropdown:hover,
.right-menubar a:hover,
.path-pos:hover,
.user-dropdown-menu-item:hover {
  color: var(--il-teal-text) !important;
}

.sub-header a:hover,
.sub-header .icon a:hover,
.sub-header .icon-left i {
  color: var(--il-teal) !important;
}

.menu_pro_tgl_bg ul li:hover a,
.menu_pro_tgl_bg ul li:hover i,
.menu_pro_tgl_bg ul li:hover,
.navbarHover li a:hover,
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--il-teal-text) !important;
}

.menu_pro_tgl_bg ul li:hover:after {
  background-color: var(--il-teal) !important;
}

/* Mobile / offcanvas */
.offcanvas-body a:hover,
.btn-toggle-list a:hover,
.btn-toggle-nav a:hover,
.menubar .offcanvas-items .navbar-nav .nav-link:hover {
  color: var(--il-teal-text) !important;
}

.offcanves-btn .signUp-btn {
  background-color: var(--il-teal) !important;
  color: var(--il-navy) !important;
  min-height: 44px;
}

.offcanves-btn .logIn-btn {
  min-height: 44px;
}

.btn-bar,
.m-cross-icon,
.m-search-icon,
.btn-toggle {
  min-height: 44px;
  min-width: 44px;
}

/* ==========================================================================
   6. Footer (navy surface — muted / light / teal accents)
   ========================================================================== */
.lms2-footer-section,
footer.lms2-footer-section {
  background-color: var(--il-navy) !important;
  color: var(--il-muted);
}

.ft2-title {
  color: var(--il-light) !important;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.ft2-nav-link,
.ft2-copyright-nav-link,
.ft2-socila-link,
.ft2-short-des,
.ft2-copyright-info,
.ft2-contact-item,
.lms2-footer-content a {
  color: var(--il-muted) !important;
}

.ft2-nav-link:hover,
.ft2-copyright-nav-link:hover,
.ft2-socila-link:hover,
.lms2-footer-content a:hover {
  color: var(--il-teal) !important;
}

.ft2-newsLetter-input {
  border-color: var(--il-teal) !important;
}

.ft2-newsLetter-input:focus {
  border-color: var(--il-teal) !important;
  box-shadow: var(--il-input-focus-shadow) !important;
  outline: none;
}

.ft2-newsLetter-btn:hover path {
  fill: var(--il-teal) !important;
}

.ft2-border-bottom {
  border-color: rgba(253, 253, 253, 0.12) !important;
}

/* ==========================================================================
   7. Home — Development layout
   ========================================================================== */

/* Hero eyebrow + CTAs (replace blue #4867F1) */
.hero8-sm-title-wrap {
  border-color: var(--il-teal) !important;
}

.hero8-sm-title-wrap svg path {
  stroke: var(--il-teal-text);
}

.lms2-btn-blue-rounded,
.lms2-btn-blue-rounded.lms8-hero-btn {
  background: var(--il-teal) !important;
  color: var(--il-navy) !important;
  min-height: 44px;
}

.lms2-btn-blue-rounded:hover,
.lms2-btn-blue-rounded:active {
  background: var(--il-teal-hover) !important;
  color: var(--il-navy) !important;
}

.lms1-btn-outline-blue,
.lms1-btn-outline-blue.lms8-hero-btn {
  border-color: var(--il-teal) !important;
  color: var(--il-teal-text) !important;
  min-height: 44px;
}

.lms1-btn-outline-blue:hover,
.lms1-btn-outline-blue:active {
  background: var(--il-teal) !important;
  border-color: var(--il-teal) !important;
  color: var(--il-navy) !important;
}

/* Section title / list highlights (override inline #f95c16 from assets) */
.software-development-details > .title .highlight,
.dev-section-title > .title .highlight,
.dev-section-title-category > .title .highlight,
.programming-ebook-details .title .highlight,
.dashed-list-items li span {
  color: var(--il-teal-text) !important;
}

.btn-black-arrow1 {
  background: var(--il-navy) !important;
  color: var(--il-light) !important;
  min-height: 44px;
}

.btn-black-arrow1:hover {
  background: #121a2e !important;
  color: var(--il-light) !important;
}

/* Categories hover */
.lms-category-type2:hover .category-type2-title {
  color: var(--il-teal-text) !important;
}

/* Course cards (lms4 on Development home) */
.cCard-new-price {
  color: var(--il-teal-text) !important;
}

.cCard-category1 {
  background: rgba(38, 199, 187, 0.12) !important;
  color: var(--il-teal-text) !important;
}

.cCard-category1:hover {
  background: rgba(38, 199, 187, 0.22) !important;
  color: var(--il-teal-text-hover) !important;
}

.lms4-course-card:hover {
  border-color: rgba(38, 199, 187, 0.45) !important;
  box-shadow: 0 10px 40px rgba(38, 199, 187, 0.12);
}

.lms4-cCard-title:hover {
  color: var(--il-teal-text) !important;
}

/* Review slider pagination (override inline #7B60FF) */
.lms1-reviewSlider .swiper-pagination-bullet-active {
  background: var(--il-teal) !important;
  outline-color: rgba(38, 199, 187, 0.35) !important;
}

.swiper-pagination-bullet {
  background: rgba(38, 199, 187, 0.45);
}

/* Blog card accent */
.lms3-bCard-title:hover,
.lms3-bCard-arrow:hover path {
  color: var(--il-teal-text);
  stroke: var(--il-teal-text);
}

.lms1-link-secondary:hover {
  color: var(--il-teal-text) !important;
}

/* ==========================================================================
   8. Course cards (grid / list pages)
   ========================================================================== */
.courses-card-body .courses-text .courses-price .courses-price-right i,
.courses-price-right i,
.review-icon .fas.fa-star,
.rating i.filled {
  color: var(--il-teal) !important;
}

.courses-price-left span,
.courses-price-left h5,
.courses-price-left p {
  color: var(--il-teal-text) !important;
}

.red-heart,
.courses-icon.red-heart i,
.courses-card-image .red-heart i,
.courses-list-view-card-body .courses-card-image .red-heart i,
.wisth_tgl_div .fas.fa-heart {
  color: var(--il-teal) !important;
}

.courses-icon:hover,
.compare-img:hover,
.wisth_tgl_div:hover .fas.fa-heart {
  color: var(--il-teal-text) !important;
}

.courses-card:hover,
.courses-list-view-card:hover {
  border-color: rgba(38, 199, 187, 0.4);
}

/* Hard-coded purple leftovers on common interactive bits */
.menu_pro_tgl_bg ul li:hover a,
.menu_pro_tgl_bg ul li:hover i {
  color: var(--il-teal-text) !important;
}

/* ==========================================================================
   9. Course detail page
   ========================================================================== */
.course-left-side .nav-tabs .nav-link.active,
#myTab .nav-link.active {
  color: var(--il-teal-text) !important;
  border-bottom-color: var(--il-teal) !important;
}

.course-right-section .button a {
  border-color: var(--il-teal) !important;
  color: var(--il-teal-text) !important;
}

.course-right-section .button a:hover,
.course-right-section .button a.active {
  background-color: var(--il-teal) !important;
  border-color: var(--il-teal) !important;
  color: var(--il-navy) !important;
}

.course-right-section .ammount h1,
.course-right-section .ammount .h3-price,
.cose-p-3-r .course-card .ammount .h3-price {
  color: var(--il-teal-text);
}

.created-by-instructor:hover,
.bread-crumb a:hover,
.nBread a:hover {
  color: var(--il-teal-text) !important;
}

.accordion-button:not(.collapsed) {
  color: var(--il-teal-text) !important;
}

/* Curriculum / info accents that hard-code purple */
.course-decription a,
.tab-content a:not(.btn) {
  color: var(--il-teal-text);
}

.course-decription a:hover,
.tab-content a:not(.btn):hover {
  color: var(--il-teal-text-hover);
}

/* ==========================================================================
   10. Login / sign-up / forgot password
   ========================================================================== */
.sing-up-right .log-in .btn,
.sing-up-right .btn-primary,
.sing-up-right .resend-code .btn {
  background-color: var(--il-teal) !important;
  border-color: var(--il-teal) !important;
  color: var(--il-navy) !important;
  min-height: 44px;
}

.sing-up-right .log-in .btn:hover,
.sing-up-right .btn-primary:hover {
  background-color: var(--il-teal-hover) !important;
  border-color: var(--il-teal-hover) !important;
  color: var(--il-navy) !important;
}

.sing-up-right .form-control:focus,
.sing-up-right .form-select:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--il-teal) !important;
  box-shadow: var(--il-input-focus-shadow) !important;
}

.sing-up-right .another p a,
.forget-pass a,
.sing-up-right a:not(.btn) {
  color: var(--il-teal-text);
}

.sing-up-right .another p a:hover,
.forget-pass a:hover,
.sing-up-right a:not(.btn):hover {
  color: var(--il-teal-text-hover);
}

.sing-up-right h3 span {
  color: var(--il-teal-text) !important;
}

/* ==========================================================================
   11. Misc hard-coded accent overrides (header menus, links)
   ========================================================================== */
a.text-muted:hover {
  color: var(--il-teal-text) !important;
}

/* Common purple hex usages that var(--color-4) does not cover */
.header-dropdown,
.menubar li .header-dropdown {
  color: var(--il-teal-text);
}

/* Cart / wishlist path accents */
.path_pos_wish a:hover,
.menu_pro_wish a:hover,
.menu_pro_cart a:hover {
  color: var(--il-teal-text) !important;
}

/* ==========================================================================
   12. Dark scheme: brighter teal for text accents (no forced backgrounds)
   ========================================================================== */
body.dark .text-primary,
body.dark .main-nav-wrap .nav-item .nav-link:hover,
body.dark .navbar-nav .nav-link:hover,
body.dark .cCard-new-price,
body.dark .courses-price-left span,
body.dark .course-left-side .nav-tabs .nav-link.active {
  color: var(--il-teal) !important;
}

body.dark .btn-primary,
body.dark .signUp-btn,
body.dark .lms2-btn-blue-rounded {
  color: var(--il-navy) !important;
}

/* ==========================================================================
   13. Responsive / tap targets
   ========================================================================== */
@media all and (max-width: 991px) {
  .offcanvas,
  .mobile-view-offcanves {
    max-width: 100%;
  }

  .signUp-btn,
  .logIn-btn,
  .lms2-btn-blue-rounded,
  .lms1-btn-outline-blue,
  .btn-black-arrow1 {
    min-height: 44px;
  }
}

@media all and (max-width: 575px) {
  .lms8-hero-btn,
  .ctBtn,
  .signUp-btn,
  .logIn-btn {
    width: 100%;
    min-height: 44px;
  }

  .ft2-newsLetter-input,
  .ft2-newsLetter-btn {
    max-width: 100%;
  }
}

/* === b3 fixes ===
   Visual bug fixes for Development home + course detail.
   Evidence and contrast ratios: CHANGES-b3.md
   ========================================================================== */

:root {
  /* Large-text highlight on LIGHT backgrounds (#26C7BB on #FFF ≈ 2.2:1 — fails 3:1) */
  --il-teal-highlight-light: #0E8A80; /* #0E8A80 on #FFFFFF ≈ 4.3:1 (AA large + normal) */
}

/* --------------------------------------------------------------------------
   Bug 1 — Heading colours by actual background (page is LIGHT; footer is navy)
   -------------------------------------------------------------------------- */
/* Light surfaces: navy headings (do NOT use #FDFDFD here) */
.software-development-details > .title,
.dev-section-title > .title,
.dev-categories-section-title > .title,
.dev-section-title-category > .title,
.programming-ebook-details .title,
.title-typo4,
.courses-details .courses-details-1st-text h1,
.course-description h3.description-head,
.course-details-card > .container > h1,
.courses.grid-view-body.course-details-card h1,
.course-right-section .course-card .enrol .icon h4,
.course-right-section .course-card .enrol > h5 {
  color: #050913 !important;
}

/* Light-surface secondary / meta (not #A9A7B0 — that fails AA on white) */
.software-development-details > .info,
.dev-section-title > .info,
.courses-details .courses-details-1st-text p,
.course-heading-info .info-tag p,
.subtitle-typo2,
.subtitle-typo1 {
  color: #68768B !important; /* ≈ 4.6:1 on #FFFFFF */
}

.created-by-instructor {
  color: #050913 !important;
}

/* Dark surfaces only: light headings / muted secondary */
.lms2-footer-section .ft2-title,
.lms2-footer-section h1,
.lms2-footer-section h2,
.lms2-footer-section h3,
.lms2-footer-section h4,
.lms2-footer-section h5,
.lms2-footer-section h6 {
  color: #FDFDFD !important; /* ≈ 19.4:1 on #050913 */
}

.lms2-footer-section .ft2-short-des,
.lms2-footer-section .ft2-contact-item,
.lms2-footer-section .ft2-copyright-info {
  color: #A9A7B0 !important; /* ≈ 9.5:1 on #050913 */
}

/* --------------------------------------------------------------------------
   Bug 2 — Highlight words: teal on dark, darker teal on light
   -------------------------------------------------------------------------- */
/* Light bg headings (32px+/bold = large text; still use AA-safe teal) */
.software-development-details > .title .highlight,
.dev-section-title > .title .highlight,
.dev-section-title-category > .title .highlight,
.dev-categories-section-title > .title .highlight,
.programming-ebook-details .title .highlight,
.dashed-list-items li span {
  color: var(--il-teal-highlight-light) !important; /* #0E8A80 ≈ 4.3:1 on white */
}

/* Dark bg (footer) — bright teal OK */
.lms2-footer-section .highlight,
body.dark .title .highlight,
body.dark .software-development-details > .title .highlight,
body.dark .dev-section-title > .title .highlight {
  color: #26C7BB !important; /* ≈ 9.4:1 on #050913 */
}

/* --------------------------------------------------------------------------
   Bug 3 — Force Plus Jakarta Sans on headings (override Montserrat/Poppins/etc.)
   Template heading font-family offenders (style.css / inline home assets / custom.css):
   Montserrat: .title-typo4; Poppins: .lms2-cCard-title, blog tags, custom .title-1/2;
   Lexend/Raleway/Manrope: new-style.css title helpers (not used on Dev home body copy).
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.title,
.title-typo1,
.title-typo2,
.title-typo3,
.title-typo4,
.title-1,
.title-2,
.title-3,
.title-4,
.title-5,
.ft2-title,
.course-heading-info,
.courses-details-1st-text h1,
.description-head,
.etopCourseHead,
.dev-section-title > .title,
.dev-categories-section-title > .title,
.dev-section-title-category > .title,
.software-development-details > .title,
.programming-ebook-details .title,
.lms4-cCard-title,
.lms3-bCard-title,
.lms2-cCard-title,
.lms1-cCard-title,
.dashed-list-items li,
.btn-black-arrow1,
.navbar-brand {
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

/* --------------------------------------------------------------------------
   Bug 4 — Hero CTAs: both solid teal, dark text, hover + focus-visible
   Overrides template hover (blue #1843ff / white text) in style.css ~10521+
   -------------------------------------------------------------------------- */
.lms2-btn-blue-rounded.lms8-hero-btn,
.lms1-btn-outline-blue.lms8-hero-btn {
  background: #26C7BB !important;
  border: 1px solid #26C7BB !important;
  color: #050913 !important; /* ≈ 9.4:1 on #26C7BB */
  min-height: 44px;
}

.lms2-btn-blue-rounded.lms8-hero-btn:hover,
.lms2-btn-blue-rounded.lms8-hero-btn:active,
.lms2-btn-blue-rounded.lms8-hero-btn:focus,
.lms1-btn-outline-blue.lms8-hero-btn:hover,
.lms1-btn-outline-blue.lms8-hero-btn:active,
.lms1-btn-outline-blue.lms8-hero-btn:focus {
  background: #1FA89E !important;
  border-color: #1FA89E !important;
  color: #050913 !important;
}

.lms2-btn-blue-rounded.lms8-hero-btn:focus-visible,
.lms1-btn-outline-blue.lms8-hero-btn:focus-visible {
  outline: 2px solid #0E7C74 !important;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Bug 5 — Hero banner: hide loop duplicates, one centred slide ≤600px
   Swiper loop (script.js ~800) renders .swiper-slide-duplicate + translate3d;
   fix1 gutter padding on .curvedSlide shifted/cut the image. Hide duplicates,
   kill wrapper transform, centre the real slide (banner natural ~400×250 —
   sharper than 1296px stretch). Overrides style.css .curved-slide-banner
   (397px + object-fit cover) and responsive.css curve/banner width rules.
   -------------------------------------------------------------------------- */
.lms-hero-section8 .swiper.curvedSlide {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  margin-top: 40px;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

@media (max-width: 575.98px) {
  .lms-hero-section8 .swiper.curvedSlide {
    padding-inline: 12px;
  }
}

@media (min-width: 576px) {
  .lms-hero-section8 .swiper.curvedSlide {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .lms-hero-section8 .swiper.curvedSlide {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .lms-hero-section8 .swiper.curvedSlide {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .lms-hero-section8 .swiper.curvedSlide {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .lms-hero-section8 .swiper.curvedSlide {
    max-width: 1320px;
  }
}

.lms-hero-section8 .curvedSlide .swiper-slide-duplicate {
  display: none !important;
}

.lms-hero-section8 .curvedSlide .swiper-wrapper {
  transform: none !important;
  justify-content: center;
}

.lms-hero-section8 .slide-top-curve,
.lms-hero-section8 .slide-bottom-curve {
  display: none !important; /* white curve masks that clipped the banner */
}

.lms-hero-section8 .curvedSlide .swiper-slide {
  width: 100% !important;
  max-width: 600px;
  margin: 0 auto !important;
  height: auto !important;
  box-sizing: border-box;
}

.lms-hero-section8 .curved-slide-banner {
  width: 100% !important;
  max-width: none;
  height: auto !important;
  aspect-ratio: auto;
}

.lms-hero-section8 .curved-slide-banner .banner,
.lms-hero-section8 .curved-slide-banner img.banner {
  width: 100%;
  height: auto !important;
  max-height: none;
  object-fit: contain !important;
  display: block;
  border-radius: 16px;
}

/* No swiper-lazy-preloader / page-loader in curvedSlide markup — nothing to hide.
   (slick-theme ajax-loader.gif 404 is unused on this layout; modal page-loader-2.gif
   is intentional for ajax modals only.) */

/* --------------------------------------------------------------------------
   Bug 6 — “Share this course” card → navy theme
   Markup: .eSocialShare (course.html); base styles style.css ~9750
   -------------------------------------------------------------------------- */
.eSocialShare {
  background-color: #050913 !important;
  box-shadow: none !important;
  border: 1px solid rgba(253, 253, 253, 0.12);
  border-radius: 8px;
  padding: 20px;
}

.eSocialShare p {
  color: #FDFDFD !important; /* ≈ 19.4:1 on navy */
  margin-bottom: 0;
}

.eSocialShare a {
  border-color: rgba(38, 199, 187, 0.45) !important;
  color: #26C7BB !important;
  background: transparent !important;
}

.eSocialShare a:hover,
.eSocialShare a:focus-visible {
  border-color: #26C7BB !important;
  color: #26C7BB !important;
  outline: 2px solid #26C7BB;
  outline-offset: 2px;
}

.eSocialShare a svg path,
.eSocialShare a svg [fill="#000"],
.eSocialShare a svg [fill="#0D0C23"] {
  fill: #26C7BB !important;
}

.eSocialShare a i,
.eSocialShare a .fab {
  color: #26C7BB !important;
}

/* --------------------------------------------------------------------------
   Bug 7 — Empty panel next to Courses menu
   Element: Prompts item’s <ul class="sub-category-menu"> with whitespace only
   (page_.html ~186–187) — :empty does not match; use :not(:has(li)) instead.
   Template gives nested ul min-height: calc(100% + 1px) + white bg → empty box.
   Also collapse header search form so w-100/max-width:400px does not leave a gap.
   -------------------------------------------------------------------------- */
.dropdown-submenu > .sub-category-menu:not(:has(li)) {
  display: none !important;
}

.dropdown-submenu:not(:has(.sub-category-menu li)) .has-sub-category {
  display: none;
}

.menubar .navbar-collapse > form.w-100 {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto;
}

.menubar .header-search,
.menubar .search-container {
  width: auto !important;
}

/* --------------------------------------------------------------------------
   Bug 8 — Body text size / line-height (avoid fixed-height component breakage)
   -------------------------------------------------------------------------- */
body {
  font-size: 16px;
  line-height: 1.6;
}

body p,
body li {
  font-size: 16px;
  line-height: 1.6;
}

/* Keep compact UI chrome from inheriting oversized leading */
.menubar p,
.menubar li,
.sub-header p,
.sub-header li,
.eSocialShare p,
.course-right-section .enrol h4,
.course-right-section .enrol h5,
.lms4-cCard-body p,
.navbar-nav .navbarHover li a {
  line-height: normal;
}

/* --------------------------------------------------------------------------
   Bug 5/4 mobile — keep hero banner full-column & CTAs under 767px (390px OK)
   -------------------------------------------------------------------------- */
@media all and (max-width: 767px) {
  .lms-hero-section8 .swiper.curvedSlide {
    max-width: 100%;
    margin-top: 24px;
  }

  .lms-hero-section8 .curved-slide-banner {
    max-width: 100%;
  }

  .lms-hero-section8 .slide-top-curve,
  .lms-hero-section8 .slide-bottom-curve {
    display: none !important;
  }

  .lms2-btn-blue-rounded.lms8-hero-btn,
  .lms1-btn-outline-blue.lms8-hero-btn {
    background: #26C7BB !important;
    border-color: #26C7BB !important;
    color: #050913 !important;
  }
}

@media all and (max-width: 991px) {
  .lms-hero-section8 .curved-slide-banner {
    width: 100% !important;
  }
}

/* === b8 — blog cards + blog body === */

/* --------------------------------------------------------------------------
   Bug 1 — Blog card thumbnails: full width at OG 1200/630 (no left crop)
   Overrides theme `.lms3-bCard-banner { aspect-ratio: 360/240 }` and
   `.courses-card … .courses-card-image { width/flex: 261.42px; aspect-ratio: 261.42/168 }`.
   Scoped to blog cards only — course grid thumbs untouched.
   -------------------------------------------------------------------------- */

/* Home “Latest Blog” banners */
.lms3-bCard-banner {
  width: 100%;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
}

.lms3-bCard-banner .banner,
.lms3-bCard-banner img.banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* /blog and /blogs grid cards (incl. nested .courses-card-image) */
.blog .courses-card-body.blogCard .courses-card-image,
.blogCard .courses-card-image,
.blogCard .courses-card-image .courses-card-image {
  width: 100% !important;
  max-width: 100%;
  flex: none;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
}

.blog .courses-card-body.blogCard .courses-card-image img,
.blogCard .courses-card-image img,
.blogCard .courses-card-image .courses-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Post page recent/related sidebar thumbs */
.blog-body .right-section .post img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --------------------------------------------------------------------------
   Bug 2 — Blog post body typography & rhythm
   Scoped to `.blog-body .courses-card .top` so header, sidebar, comments,
   and course pages stay untouched. Overrides theme `.blog-body .top h3`
   (32px) and `.blog-body .top p` letter-spacing.
   -------------------------------------------------------------------------- */

.blog-body .courses-card .top {
  max-width: 720px;
}

.blog-body .courses-card .top p,
.blog-body .courses-card .top li {
  font-size: 17px;
  line-height: 1.7;
  color: #050913;
  letter-spacing: normal;
}

/* Optional: keep the duplicate title h3 at the top of .top a touch larger */
.blog-body .courses-card .top > h3:first-of-type {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  color: #050913;
  margin: 0 0 1rem;
}

.blog-body .courses-card .top h2,
.blog-body .courses-card .top h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: #050913;
}

.blog-body .courses-card .top h2 {
  font-size: 1.6rem;
  margin: 2rem 0 0.75rem;
}

.blog-body .courses-card .top h3 {
  font-size: 1.25rem;
  margin: 1.5rem 0 0.5rem;
}

/* Article lists: normal markers (theme ::before bullets look odd in body copy) */
.blog-body .courses-card .top ul,
.blog-body .courses-card .top ol {
  padding-left: 1.5rem;
  margin: 0.75rem 0 1.25rem;
}

.blog-body .courses-card .top ul {
  list-style: disc;
}

.blog-body .courses-card .top ol {
  list-style: decimal;
}

.blog-body .courses-card .top ul li,
.blog-body .courses-card .top ol li {
  margin: 0.4rem 0;
  padding-left: 0.25rem;
}

.blog-body .courses-card .top ul li::before,
.blog-body .courses-card .top ol li::before {
  content: none;
  display: none;
}

.blog-body .courses-card .top a {
  color: #0E7C74;
  text-decoration: none;
}

.blog-body .courses-card .top a:hover {
  text-decoration: underline;
}

.blog-body .courses-card .top blockquote {
  margin: 1.25rem 0;
  padding: 0.85rem 1.1rem;
  border-left: 4px solid #0E7C74;
  background: rgba(14, 124, 116, 0.06);
  color: #050913;
  font-style: italic;
}

.blog-body .courses-card .top img,
.blog-body .courses-card .top .card-img-top {
  max-width: 100%;
  height: auto;
}

@media all and (max-width: 767px) {
  .blog-body .courses-card .top {
    max-width: 100%;
  }

  .blog-body .courses-card .top p,
  .blog-body .courses-card .top li {
    font-size: 16px;
  }

  .blog-body .courses-card .top > h3:first-of-type {
    font-size: 1.5rem;
  }

  .blog-body .courses-card .top h2 {
    font-size: 1.4rem;
  }

  .blog-body .courses-card .top h3 {
    font-size: 1.15rem;
  }
}