/* ==============================================================
   pg-l3page.css
   Self-contained styles for the static L3 partial
   (resources/views/frontend/pg-l3page.blade.php).

   ⚠ This file is the ONLY stylesheet pg-l3page uses.
     Edit anything here freely — the original l3-template.css is
     NOT loaded for this partial, so nothing you do here will
     impact the real /l3-template page or any other page.
   ============================================================== */

/* ===== Layout overrides (first category on /training) ===== */

/* Sidebar (col-md-3) and outer .container keep Bootstrap defaults.
   Only the right column (col-md-9) extends toward the viewport
   right edge so the L3 sections get proper horizontal space. */
section.training-page.first-cat-active > .container,
section.training-page.first-cat-active > .container > .row {
    overflow: visible !important;
}

/* nowrap ONLY on the outermost sidebar+content row, not on inner L3 rows */
section.training-page.first-cat-active > .container > .row {
    flex-wrap: nowrap !important;
}

@media (min-width: 992px) {
    section.training-page.first-cat-active .col-sm-6.col-md-9 {
        flex: 0 0 calc((100vw + 960px) / 2 - 240px - 60px) !important;
        max-width: calc((100vw + 960px) / 2 - 240px - 60px) !important;
        width: calc((100vw + 960px) / 2 - 240px - 60px) !important;
    }
}
@media (min-width: 1200px) {
    section.training-page.first-cat-active .col-sm-6.col-md-9 {
        flex: 0 0 calc((100vw + 1140px) / 2 - 285px - 80px) !important;
        max-width: calc((100vw + 1140px) / 2 - 285px - 80px) !important;
        width: calc((100vw + 1140px) / 2 - 285px - 80px) !important;
    }
}
@media (min-width: 1400px) {
    section.training-page.first-cat-active .col-sm-6.col-md-9 {
        flex: 0 0 calc((100vw + 1320px) / 2 - 330px - 100px) !important;
        max-width: calc((100vw + 1320px) / 2 - 330px - 100px) !important;
        width: calc((100vw + 1320px) / 2 - 330px - 100px) !important;
    }
}

/* Inner section .containers fill the wider column */
section.training-page.first-cat-active .col-sm-6.col-md-9 .container {
    max-width: 100% !important;
    width: 100% !important;
}

/* ===== pg-l3 BANNER — fit inside col-md-9 nicely ===== */
.pg-l3-banner {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
    position: relative;
}

/* ===== Overview section intro paragraphs (top of section) ===== */
#sec-overview .overview-intro-para {
    margin: 0 0 12px 0;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}
#sec-overview .overview-intro-para:last-of-type {
    margin-bottom: 18px;
}

/* ===== Overview section bullet list (kept for the 7-item list inside .overview-box) ===== */
#sec-overview .overview-intro-list {
    list-style: disc outside !important;
    padding-left: 22px !important;
    margin: 0 0 18px 0 !important;
}
#sec-overview .overview-intro-list li {
    list-style: disc outside !important;
    display: list-item !important;
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

/* ===== Service Features -> Training Program (TPS) table =====
   Palette taken from screenshot:
   #1d62a8 — primary navy   (header bars, module name text, meta labels, borders)
   #d0dde9 — sub-header bar (lighter blue-grey)
   #e8eef5 — phase/module cell fill (light lavender-blue)
   #ffffff — bullet cell background
*/
.tps-wrap {
    background: #fff;
    padding: 0;
    border-radius: 4px;
    margin: 8px 20px 16px 20px;   /* breathing room left & right */
}
.tps-title {
    background: #1d62a8;
    color: #fff;
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    padding: 10px 16px;
    border: 1px solid #1d62a8;
}
.tps-intro {
    background: #fff;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #1d62a8;
    border-top: none;
    font-size: 14px !important;
    line-height: 1.55;
    color: #222;
}
.tps-meta {
    width: 100%;
    background: #fff;
    border: 1px solid #1d62a8;
    border-top: none;
    margin: 0;
    border-collapse: collapse;
}
.tps-meta td {
    padding: 4px 8px;
    font-size: 14px !important;
    vertical-align: top;
    border: none;
}
.tps-meta .tps-meta-key {
    width: 170px;
    color: #1d62a8;
    font-weight: 700;
    padding-left: 16px;
    white-space: nowrap;
}
.tps-meta .tps-meta-sep {
    width: 14px;
    color: #1d62a8;
    font-weight: 700;
}
.tps-meta .tps-meta-val {
    color: #222;
}
.tps-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
    background: #fff;
}
.tps-table th,
.tps-table td {
    border: 1px solid #1d62a8;
    padding: 8px 12px;
    font-size: 14px !important;
    vertical-align: middle;
    color: #222;
}
.tps-table-title {
    background: #1d62a8 !important;
    color: #ffffff !important;
    text-align: center;
    font-size: 18px !important;
    font-weight: 700;
    padding: 10px 12px;
    letter-spacing: 0.3px;
}
.tps-table-subhead th {
    background: #d0dde9;
    color: #1d62a8;
    text-align: center;
    font-weight: 700;
    font-size: 14px !important;
}
.tps-phase-cell,
.tps-dur-cell {
    background: #e8eef5;
    text-align: center;
    font-weight: 600;
    color: #1d62a8;
}
.tps-module-cell {
    background: #e8eef5;
    vertical-align: middle;
}
.tps-module-name {
    color: #1d62a8;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
}
.tps-module-meta {
    color: #1d62a8;
    font-weight: 400;
    font-size: 13px;
    margin-top: 4px;
}
.tps-bullets {
    list-style: disc outside !important;
    margin: 0 0 0 18px !important;
    padding: 0 !important;
}
.tps-bullets li {
    list-style: disc outside !important;
    display: list-item !important;
    font-size: 14px !important;
    line-height: 1.5;
    color: #222;
    margin-bottom: 2px;
}

/* ===== Service Features -> Training Delivery Methodology =====
   Palette taken from screenshot:
   #1d62a8 — primary navy   (title bar, bold blue labels, sub-titles)
   #fbe1cb — peach          (section-bar fill)
   #f4c79a — peach border   (section-bar border)
   #1d62a8 — section-bar text (dark navy italic)
*/
.tdm-wrap {
    background: #fff;
    border-radius: 4px;
    margin: 8px 20px 16px 20px;
    border: 1px solid #1d62a8;
    overflow: hidden;
}
.tdm-title {
    background: #1d62a8;
    color: #fff;
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    padding: 12px 16px 8px 16px;
    line-height: 1.3;
}
.tdm-subtitle {
    color: #ffffff;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    margin-top: 4px;
    opacity: 0.95;
}
.tdm-tagline {
    background: #d0dde9;
    color: #1d62a8;
    font-style: italic;
    font-weight: 700;
    text-align: center;
    padding: 8px 12px;
    font-size: 15px;
    border-bottom: 1px solid #1d62a8;
}
.tdm-body {
    padding: 14px 18px 18px 18px;
}
.tdm-body p {
    margin: 0 0 10px 0;
    font-size: 14px !important;
    line-height: 1.55;
    color: #222;
}
.tdm-section-bar {
    background: #fbe1cb;
    border: 1px solid #f4c79a;
    color: #1d62a8;
    font-weight: 700;
    font-style: italic;
    font-size: 15px;
    padding: 8px 14px;
    margin: 18px 0 10px 0;
    border-radius: 2px;
}
.tdm-section-body {
    padding: 0 4px;
}
.tdm-bullets {
    list-style: disc outside !important;
    margin: 0 0 10px 22px !important;
    padding: 0 !important;
}
.tdm-bullets > li {
    list-style: disc outside !important;
    display: list-item !important;
    font-size: 14px !important;
    line-height: 1.55;
    color: #222;
    margin-bottom: 4px;
}
.tdm-sub-bullets {
    list-style: square outside !important;
    margin: 6px 0 6px 22px !important;
    padding: 0 !important;
}
.tdm-sub-bullets > li {
    list-style: square outside !important;
    display: list-item !important;
    font-size: 14px !important;
    line-height: 1.5;
    color: #222;
    margin-bottom: 2px;
}
.tdm-blue {
    color: #1d62a8;
}

/* ===== Service Features -> Service Matrices (KSM) table =====
   Palette taken from screenshot — reuses TPS/TDM tokens:
   #fbe1cb — peach title banner       (same as TDM section bars)
   #f4c79a — peach banner border
   #1d62a8 — navy text on banner
   #e8e8e8 — light-grey column-header row
   #e8eef5 — light blue zebra-stripe (matches TPS module cells)
*/
.ksm-wrap {
    background: #fff;
    border-radius: 4px;
    margin: 8px 20px 16px 20px;
}
.ksm-title {
    background: #fbe1cb;
    border: 1px solid #f4c79a;
    color: #1d62a8;
    font-style: italic;
    font-weight: 700;
    font-size: 17px;
    padding: 10px 14px;
    border-radius: 2px;
}
.ksm-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    background: #fff;
}
.ksm-table thead th {
    background: #e8e8e8;
    color: #1a1a1a;
    text-align: center;
    font-weight: 700;
    font-size: 14px !important;
    padding: 10px 8px;
    border: 1px solid #c4c4c4;
    vertical-align: middle;
}
.ksm-table tbody td {
    border: 1px solid #c4c4c4;
    padding: 8px 10px;
    font-size: 14px !important;
    line-height: 1.45;
    color: #222;
    vertical-align: middle;
}
.ksm-table tbody tr:nth-child(odd)  td { background: #ffffff; }
.ksm-table tbody tr:nth-child(even) td { background: #e8eef5; }
.ksm-table .ksm-num {
    text-align: center;
    font-weight: 700;
    color: #1a1a1a;
}
.ksm-table .ksm-metric {
    font-weight: 700;
    color: #1d62a8;
}

/* ===== Service Features -> International Standards (IST) table =====
   Reuses TPS/TDM/KSM tokens. Header bar = navy (matches TPS style);
   title banner = peach (matches KSM); zebra rows = light blue.
*/
.ist-wrap {
    background: #fff;
    border-radius: 4px;
    margin: 8px 20px 16px 20px;
}
.ist-title {
    background: #fbe1cb;
    border: 1px solid #f4c79a;
    color: #1d62a8;
    font-style: italic;
    font-weight: 700;
    font-size: 17px;
    padding: 10px 14px;
    border-radius: 2px;
}
.ist-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    background: #fff;
}
.ist-table thead th {
    background: #1d62a8 !important;
    color: #ffffff !important;
    text-align: center;
    font-weight: 700;
    font-size: 14px !important;
    padding: 10px 8px;
    border: 1px solid #1d62a8;
    vertical-align: middle;
}
.ist-table tbody td {
    border: 1px solid #c4c4c4;
    padding: 9px 12px;
    font-size: 14px !important;
    line-height: 1.45;
    color: #222;
    vertical-align: middle;
}
.ist-table tbody tr:nth-child(odd)  td { background: #ffffff; }
.ist-table tbody tr:nth-child(even) td { background: #e8eef5; }
.ist-table .ist-std {
    font-weight: 700;
    color: #1d62a8;
}

/* ===== Landscape (sec-outcomes) — 5 categories sidebar + content =====
   Same pattern as CN Proposition tab buttons (long labels wrap nicely). */
.lse-tab-btn {
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.3 !important;
    padding: 10px 14px !important;
    min-height: 50px;
    height: auto !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
}
/* Let the content panel shrink to its body height — no min-height,
   no fixed height, no internal scroll. The sidebar (5 buttons) and
   the body now end at whichever is taller, with no extra empty space. */
.lse-content {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
#sec-outcomes .tab3-content {
    height: auto !important;
}
#sec-outcomes .tabcontent2 {
    height: auto !important;
}
/* Category body styling (each of the 5 partials wraps content in .lse-cat-body).
   .red-title from the global template sets color:red on descendants; we override
   here so our landscape body text stays dark. */
.lse-cat-body {
    padding: 4px 4px 8px 4px;
    color: #222 !important;
}
.lse-cat-body * {
    color: #222 !important;
}
.lse-cat-heading {
    background: transparent !important;
    color: #1a1a1a !important;
    font-style: normal;
    font-weight: 700;
    font-size: 15px !important;
    padding: 0;
    margin: 0 0 10px 0;
    border-radius: 0;
    line-height: 1.4;
}
.lse-cat-body p {
    margin: 0 0 10px 0;
    font-size: 15px !important;
    line-height: 1.6;
    color: #222 !important;
}
.lse-cat-body strong {
    font-weight: 700;
    color: #1a1a1a !important;
}
.lse-bullets {
    list-style: disc outside !important;
    margin: 0 0 10px 22px !important;
    padding: 0 !important;
}
.lse-bullets > li {
    list-style: disc outside !important;
    display: list-item !important;
    font-size: 15px !important;
    line-height: 1.55;
    color: #222 !important;
    margin-bottom: 5px;
}

/* ===== CN Proposition tab 1 — Value Propositions (CoPE) ===== */
.cw-cope-wrap {
    background: #fff;
    border: 1px solid #1d62a8;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 0 10px 0;
}
.cw-cope-title {
    background: #1d62a8;
    color: #fff;
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    padding: 12px 16px 8px 16px;
    line-height: 1.3;
}
.cw-cope-subtitle {
    color: #ffffff;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    margin-top: 4px;
    opacity: 0.95;
}
.cw-cope-tagline {
    background: transparent;
    border-bottom: none;
    color: #1d62a8;
    font-style: italic;
    font-weight: 700;
    padding: 8px 0;
    font-size: 15px;
}
.cw-cope-body {
    padding: 14px 18px 18px 18px;
}
.cw-cope-body p {
    margin: 0 0 12px 0;
    font-size: 14px !important;
    line-height: 1.6;
    color: #222;
}
.cw-cope-body .cw-cope-num {
    color: #1d62a8;
    font-weight: 700;
}
.cw-cope-bullets {
    list-style: disc outside !important;
    margin: 0 0 12px 22px !important;
    padding: 0 !important;
}
.cw-cope-bullets > li {
    list-style: disc outside !important;
    display: list-item !important;
    font-size: 14px !important;
    line-height: 1.55;
    color: #222;
    margin-bottom: 4px;
}

/* ===== Blog card 2 (#sec-blogs / .blog-card-1) — keep title + body on a single line ===== */
.blog-card-1 h3,
.blog-card-1 p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Why Codec Networks CoPE (sec-whycodec) ===== */
.whycodec-wrap {
    background: #fff;
    border: 1px solid #1d62a8;
    border-radius: 4px;
    overflow: hidden;
}
.whycodec-title {
    background: #1d62a8;
    color: #fff;
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    padding: 12px 18px;
    line-height: 1.3;
}
.whycodec-body {
    padding: 14px 18px 16px 18px;
}
.whycodec-body p {
    margin: 0 0 10px 0;
    font-size: 15px;
    line-height: 1.6;
    color: #222;
}
.whycodec-body p:last-child {
    margin-bottom: 0;
}
.whycodec-body strong {
    font-weight: 700;
    color: #1a1a1a;
}

/* ===== Spacing between CN Proposition and Testimonials sections ===== */
#sec-cyberwind {
    margin-bottom: 50px;
}

/* ===== CN Proposition tabs 2–9 shared body styling (plain text + bold) ===== */
.cw-rich-body p {
    margin: 0 0 10px 0;
    font-size: 14px !important;
    line-height: 1.6;
    color: #222;
}
.cw-rich-body ul,
.cw-rich-body ol {
    margin: 0 0 12px 22px !important;
    padding: 0 !important;
}
.cw-rich-body ul > li {
    list-style: disc outside !important;
    display: list-item !important;
    font-size: 14px !important;
    line-height: 1.55;
    color: #222;
    margin-bottom: 4px;
}
.cw-rich-body ol > li {
    list-style: decimal outside !important;
    display: list-item !important;
    font-size: 14px !important;
    line-height: 1.55;
    color: #222;
    margin-bottom: 4px;
}
.cw-rich-body ul.cw-square-list > li {
    list-style: square outside !important;
}
.cw-rich-body strong {
    font-weight: 700;
    color: #1a1a1a;
}
/* Tagline / quote / cert-badge helper classes — render as plain paragraphs,
   no peach boxes or blue rails. Keep the bold/italic that's already in markup. */
.cw-rich-body .cw-tagline,
.cw-rich-body .cw-quote,
.cw-rich-body .cw-cert-badges {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 10px 0 !important;
    text-align: left;
    color: #222;
}
.cw-rich-body .cw-cert-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* exactly 2 per row */
    justify-items: center;
    align-items: center;
    row-gap: 24px;
    column-gap: 36px;
    margin: 18px auto 20px auto;
    max-width: 560px;                  /* keeps the grid centered & compact */
}
.cw-rich-body .cw-cert-grid img {
    max-height: 110px;
    max-width: 240px;
    height: auto;
    width: auto;
    object-fit: contain;
}
@media (max-width: 480px) {
    .cw-rich-body .cw-cert-grid {
        grid-template-columns: 1fr;    /* stack 1 per row on very small screens */
    }
}

/* ===== CN Proposition tab buttons (9 long titles) =====
   Original buttons assumed short labels (25+ Years etc.); the new titles
   are much longer, so allow wrapping and tighten vertical padding. */
#sec-cyberwind .tab3-tablinks {
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.3 !important;
    padding: 10px 14px !important;
    min-height: 50px;
    height: auto !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
}
#sec-cyberwind .tab3-content {
    min-height: 575px;
    overflow-y: auto;
}
#sec-cyberwind .tab3-tabcontent p {
    margin-bottom: 10px;
}

/* ===== Mobile (Service Features accordion) ===== */
/* Inside the mobile accordion panels, tighten the 20px inset and let wide
   tables scroll horizontally instead of breaking the layout. */
.cp-mob-body .tps-wrap,
.cp-mob-body .tdm-wrap,
.cp-mob-body .ksm-wrap,
.cp-mob-body .ist-wrap {
    margin: 6px 0 12px 0 !important;
}
/* Desktop: no horizontal scrollbar — the tables fit naturally in col-md-9
   Mobile (<=767px) only: enable horizontal scroll for the wide tables. */
.tps-table-scroll,
.ksm-table-scroll,
.ist-table-scroll {
    overflow-x: visible;
}
@media (max-width: 767px) {
    .tps-table-scroll,
    .ksm-table-scroll,
    .ist-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Kill the horizontal scrollbar on the Service Features tab-content shell.
   It has inline overflow-y:auto which lets the browser also reserve a
   horizontal scrollbar whenever any descendant overflows by even 1px.
   We explicitly clip horizontal overflow on desktop. */
#sec-careerpath .tab-content.program-content {
    overflow-x: hidden !important;
}
/* And make sure the panel-inset wrappers can't push wider than their column */
#sec-careerpath .tps-wrap,
#sec-careerpath .tdm-wrap,
#sec-careerpath .ksm-wrap,
#sec-careerpath .ist-wrap {
    max-width: 100%;
    box-sizing: border-box;
}
@media (max-width: 767px) {
    .tps-table,
    .ksm-table,
    .ist-table {
        min-width: 640px;   /* keeps columns readable; container scrolls */
    }
    .tdm-body {
        padding: 12px 10px 14px 10px;
    }
    .tdm-title { font-size: 16px; padding: 10px 12px 6px 12px; }
    .tdm-tagline { font-size: 14px; padding: 6px 10px; }
    .tdm-section-bar { font-size: 14px; padding: 7px 10px; }
}

/* ===== pg-l3 sticky-nav UL overrides =====
   Scoped to pg-l3page's sticky nav (#sticky-control) so edits here
   never affect other pages that use `.services-menu ul`. */
.services-menu ul#sticky-control {
    margin: -5px !important;
    padding: 0px !important;
    display: inline-block !important;
}

/* ===== pg-l3 page: enforce 15px body text across all 9 sections ===== */
/* Applies to every section in the partial (sec-overview, sec-careerpath,
   sec-kit, sec-cyberwind, sec-testimonials, sec-outcomes, sec-blogs,
   sec-faqs, sec-industry). Headings (h1-h6) and the banner are NOT
   touched — they keep their existing sizes. */
section[id^="sec-"] p,
section[id^="sec-"] li,
section[id^="sec-"] span,
section[id^="sec-"] a,
section[id^="sec-"] td,
section[id^="sec-"] th,
section[id^="sec-"] label,
section[id^="sec-"] div:not([class*="icon"]):not([class*="glide"]):not([class*="swiper"]) {
    font-size: 15px !important;
}
#sec-overview .overview-intro-list li:last-child {
    margin-bottom: 0;
}
#sec-overview .overview-intro-list li strong {
    font-weight: 700;
    color: #1a1a1a;
}

/* Overlay scoped to pg-l3 banner ONLY — overrides .cn-bg:before from
   style.css so editing the tint here never affects other .cn-bg usages
   (e.g. the real /l3-template page). Edit the `background` line freely. */
.pg-l3-banner.cn-bg:before {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    content: '' !important;
    background: rgb(117 143 171 / 18%) !important;
}
.pg-l3-banner .container {
    padding-left: 25px !important;
    padding-right: 25px !important;
}
.pg-l3-banner .cn-header {
    padding: 110px 0 !important;   /* taller banner now that h2/categories list is gone */
}
.pg-l3-banner .cn-header h1 {
    font-size: 34px;
    line-height: 1.25;
    margin-bottom: 8px;
}
.pg-l3-banner .cn-header p {
    font-size: 16px;
    margin-bottom: 18px;
}
.pg-l3-banner .cn-header h2 {
    font-size: 20px;
    margin-bottom: 6px;
}
.pg-l3-banner .cn-header ul li {
    padding: 0 12px;
    font-size: 14px;
}

@media (max-width: 991px) {
    .pg-l3-banner .cn-header {
        padding: 70px 0 !important;
    }
    .pg-l3-banner .cn-header h1 {
        font-size: 26px;
    }
    .pg-l3-banner .cn-header p {
        font-size: 14px;
    }
}

/* ============================================================
   ALL L3 TEMPLATE PAGE STYLES — pulled in here so this partial
   is self-contained and the original l3-template.css is never
   touched. Edit anything below freely.
   ============================================================ */

/* --- Hover box & sticky breadcrumb --- */
.cn-hover-box:hover .cn-content .height {
    height: 0px;
    display: block;
}

.breadcromb.menu-fixed-cn {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Auto-style first <p> in overview popup (CK Editor data) */
#overview-popup-description > p:first-child {
    background-color: #b7c2e5;
    padding: 5px;
}

/* --- Column cards with FIXED height --- */
.sec-wrap-cod-2 .card-box,
.sec-wrap-cod-2 {
    height: 200px;
    margin-bottom: 0px;
    overflow: hidden;
}

/* --- Testimonials Section Arrow Styles --- */
.testimonials_arrow {
    background-color: #15416e !important;
    color: #ffffff !important;
    margin-top: 150px !important;
}

/* --- Industry Section Arrow Styles --- */
.industry_arrow {
    background-color: #15416e !important;
    color: #ffffff !important;
    margin-top: 240px !important;
}

/* ========== BREAKPOINTS FOR TESTIMONIALS ARROWS ========== */
@media (min-width: 1400px) {
    .testimonials_arrow {
        margin-left: 500px !important;
        margin-right: 500px !important;
    }
}
@media (min-width: 1200px) and (max-width: 1399px) {
    .testimonials_arrow {
        margin-left: 480px !important;
        margin-right: 480px !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .testimonials_arrow {
        margin-left: 450px !important;
        margin-right: 450px !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .testimonials_arrow {
        margin-left: 200px !important;
        margin-right: 200px !important;
    }
}

/* ========== BREAKPOINTS FOR INDUSTRY ARROWS ========== */
@media (min-width: 1400px) {
    .industry_arrow {
        margin-left: 500px !important;
        margin-right: 500px !important;
    }
}
@media (min-width: 1200px) and (max-width: 1399px) {
    .industry_arrow {
        margin-left: 480px !important;
        margin-right: 480px !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .industry_arrow {
        margin-left: 450px !important;
        margin-right: 450px !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .industry_arrow {
        margin-left: 200px !important;
        margin-right: 200px !important;
    }
}

/* --- Glide slides --- */
.glide__slides {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    transition-timing-function: ease-in-out !important;
}

/* --- Swiper styles --- */
.mySwiper {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.mySwiper .swiper-slide {
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: transparent;
    transition: transform 0.3s ease;
}

.mySwiper .swiper-slide img {
    width: 100% !important;
    height: 400px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* Pagination - Industry Swiper */
.industry-swiper .swiper-pagination {
    position: relative;
    bottom: 30px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    gap: 8px;
}

/* Pagination - Overview Swiper */
.overview-swiper .swiper-pagination {
    position: relative;
    bottom: 20px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    gap: 8px;
}

/* Pagination - Testimonial Swiper */
.testimonial-swiper .swiper-pagination {
    position: relative;
    bottom: 2px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    gap: 8px;
}

.mySwiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(100, 93, 93, 0.6);
    border-radius: 50%;
    margin: 0 4px !important;
    opacity: 1;
    transition: all 0.3s ease;
}

.mySwiper .swiper-pagination-bullet-active {
    background: #007aff;
    transform: scale(1.3);
}

/* --- CEH Swiper container --- */
.ceh-swiper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.ceh-swiper .swiper-pagination {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.ceh-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ccc;
    opacity: 1;
    border-radius: 50%;
    transition: background 0.3s;
}

.ceh-swiper .swiper-pagination-bullet-active {
    background: #007aff;
}

/* Mobile First Approach for CEH Swiper */
@media (max-width: 767px) {
    .ceh-swiper .swiper-pagination {
        margin-top: -100px;
    }
}
@media (max-width: 767px) and (max-height: 700px) {
    .ceh-swiper .swiper-pagination {
        margin-top: -75px;
    }
}
@media (max-width: 767px) and (max-height: 600px) {
    .ceh-swiper .swiper-pagination {
        margin-top: 400px;
    }
}

/* --- Popup box --- */
.background-popup-box {
    background: #eceff9 !important;
}

/* --- Testimonials cover page --- */
.testo-popup-cont-top {
    background-image: url("../images/profile-cover.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 120px;
    border-radius: 10px;
    position: relative;
    padding: 20px;
}

/* Dark overlay */
.testo-popup-cont-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    z-index: 1;
}

/* Profile image overlap */
.testo-popup-cont-top-img {
    position: absolute;
    bottom: -35px;
    left: 20px;
    z-index: 2;
}

.testo-popup-cont-top-img img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
}

/* Text outside cover */
.testo-popup-cont-bottom {
    margin-top: 45px;
    padding-left: 20px;
}

.testo-popup-cont-bottom h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.testo-popup-cont-bottom span {
    font-size: 14px;
    color: #666;
}

/* --- Industry box borders --- */
.industry-box a,
.industry-box1 a {
    border: #0a0a0a 1px solid !important;
}

.industry-box p:after {
    background-color: rgb(34, 29, 29) !important;
}

/* --- Global testimonial popup transition --- */
#global-testimonial-popup {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#global-testimonial-popup.show {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   ENQUIRY POPUP FORM STYLES
   ============================================ */
.enquiry-popup-box {
    max-width: 500px;
}

.enquiry-popup-inner {
    padding: 20px;
}

.enquiry-popup-title {
    margin-bottom: 15px;
    color: #15416e;
    font-size: 22px;
    text-align: center;
}

.enquiry-popup-course {
    text-align: center;
    color: #555;
    margin-bottom: 15px;
    font-size: 14px;
}

.enquiry-popup-fields {
    padding: 0;
}

.enquiry-popup-fields ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.enquiry-popup-fields ul li {
    margin-bottom: 10px;
}

.enquiry-popup-fields ul li input[type="text"],
.enquiry-popup-fields ul li textarea,
.enquiry-popup-fields ul li select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.enquiry-popup-fields ul li textarea {
    resize: vertical;
}

/* Phone row */
.eq-phone-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.eq-country-select {
    position: relative;
    flex-shrink: 0;
}

.eq-country-select select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    min-width: 200px;
}

.eq-flag-icon {
    width: 24px;
    height: 16px;
    display: none;
}

.eq-phone-input {
    display: flex;
    align-items: center;
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.eq-dial-code {
    padding: 10px;
    background: #f5f5f5;
    font-size: 14px;
    white-space: nowrap;
}

.eq-phone-input input[type="text"] {
    flex: 1;
    padding: 10px;
    border: none !important;
    font-size: 14px;
    outline: none;
    min-width: 0;
}

/* Error messages */
.eq-error {
    display: none;
    color: red;
    font-size: 12px;
    margin-top: 3px;
}

/* Submit button */
.eq-submit-btn {
    width: 100%;
    padding: 12px;
    background: #15416e;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.eq-submit-btn:hover {
    background: #0e2f4f;
}

/* Mobile responsive enquiry popup */
@media (max-width: 767px) {
    .enquiry-popup-box {
        max-width: 95%;
        margin: 10px auto;
    }

    .eq-phone-row {
        flex-direction: column;
        gap: 8px;
    }

    .eq-country-select {
        width: 100%;
    }

    .eq-country-select select {
        width: 100%;
        min-width: unset;
    }

    .eq-phone-input {
        width: 100%;
    }
}

/* ============================================================
   YOUR OWN OVERRIDES — add anything below.
   These already-scoped examples don't leak to other pages.
   ============================================================ */

section.training-page.first-cat-active .space7,
section.training-page.first-cat-active .space7_1 {
    padding: 17px 0 !important;
}

/* Keep arrows in the original centered position from l3-template,
   but add a clear gap between prev & next so they don't overlap on
   the narrower col-md-9 carousel. */
section.training-page.first-cat-active .testimonials_arrow,
section.training-page.first-cat-active .industry_arrow {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

section.training-page.first-cat-active .testi_glider .glide__arrow--left,
section.training-page.first-cat-active .indi_glider .glide__arrow--left {
    left: 50% !important;
    right: auto !important;
    transform: translate(calc(-100% - 12px), -50%) !important;
}
section.training-page.first-cat-active .testi_glider .glide__arrow--right,
section.training-page.first-cat-active .indi_glider .glide__arrow--right {
    left: 50% !important;
    right: auto !important;
    transform: translate(12px, -50%) !important;
}

/* ============================================================
   MOBILE (<=767px) — Training page tweaks (this CSS loads only
   on the training page, so these are page-scoped and safe).
   1) Left/right margin for the whole accordion + gap above banner
   2) Testimonial card redesign
   ============================================================ */
@media (max-width: 767px) {
    /* (3) Left/right breathing room for the whole mobile accordion
           (category headers + their expanded content) — it used to sit
           flush against the screen edges. */
    .training-page-m.mobile-view {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* (1) Gap between the category header and the banner/content that
           opens beneath it. */
    .training-page-m .category-content {
        padding-top: 14px;
        padding-bottom: 8px;
    }
    /* A little more air above the banner specifically. */
    .training-page-m .category-content .pg-l3-banner {
        margin-top: 4px;
    }

    /* (2) Modern testimonial carousel — one full-width card per view with
           side margins, sitting on a soft gradient background. */
    #sec-testimonials .pg-testi-mobile {
        margin: 4px 10px 0;
        padding: 22px 12px 30px;
        border-radius: 18px;
        background: linear-gradient(155deg, #15416e 0%, #2456a6 55%, #3b74d6 100%);
    }
    #sec-testimonials .pg-testi-mobile .testimonial-swiper {
        padding: 4px 4px 6px;
        overflow: hidden;
    }
    #sec-testimonials .pg-testi-mobile .swiper-slide {
        height: auto;
        display: flex;
    }

    /* The card — full width of the slide, clean minimal look:
       avatar at top, quote text, then name + role (italic) below. */
    #sec-testimonials .pg-testi-card {
        position: relative;
        width: 100%;
        background: #ffffff !important;
        border-radius: 14px;
        padding: 26px 24px 24px !important;
        box-shadow: 0 16px 36px rgba(9, 30, 63, 0.30);
        display: flex;
        flex-direction: column;
        text-align: left;
        cursor: pointer;
    }
    #sec-testimonials .pg-testi-avatar {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #15416e, #1d4ed8);
        color: #fff;
        font-size: 22px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }
    #sec-testimonials .pg-testi-text {
        font-size: 15px;
        line-height: 1.65;
        color: #3f4b5b;
        margin: 0 0 18px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    #sec-testimonials .pg-testi-name {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #1f2937;
        line-height: 1.3;
    }
    #sec-testimonials .pg-testi-role {
        display: block;
        font-size: 13px;
        font-style: italic;
        color: #94a3b8;
        margin-top: 2px;
    }
    #sec-testimonials .pg-testi-readmore {
        align-self: flex-start;
        margin-top: 16px;
        display: inline-flex;
        align-items: center;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .2px;
        color: #1d4ed8;
        transition: color .25s ease, gap .2s ease;
    }
    #sec-testimonials .pg-testi-readmore::after {
        content: "\2192";               /* → */
        margin-left: 6px;
        transition: margin-left .2s ease;
    }
    #sec-testimonials .pg-testi-card:hover .pg-testi-readmore { color: #15416e; }
    #sec-testimonials .pg-testi-card:hover .pg-testi-readmore::after { margin-left: 10px; }

    /* Pagination dots — flow neatly BELOW the card on the gradient,
       not pulled up onto the card edge. Override the global
       .testimonial-swiper .swiper-pagination { position:relative; bottom } rule. */
    #sec-testimonials .pg-testi-mobile .swiper-pagination {
        position: relative !important;
        bottom: auto !important;
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #sec-testimonials .pg-testi-mobile .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
        margin: 0 5px !important;
        background: rgba(255, 255, 255, 0.5) !important;
        opacity: 1 !important;
        transition: transform .25s ease, background .25s ease;
    }
    #sec-testimonials .pg-testi-mobile .swiper-pagination-bullet-active {
        background: #ffffff !important;
        transform: scale(1.35);
    }
}