/* GENERATED by `php artisan l3:css` from: l3-page-base.css, l3-template.css, l3-overview-tabs.css, testimonial-cards.css, l3-page-extra.css.
   Do not edit — change the sources and rebuild. */

/* ===== l3-page-base.css ===== */
/* First in the L3 bundle on purpose: picks mobile OR desktop markup before
   anything else paints, so both versions never flash together on load. */
.mobile-view { display: none !important; }
@media only screen and (max-width: 991px) {
    .mobile-view  { display: block !important; }
    .desktop-view { display: none  !important; }
}

/* ===== l3-template.css ===== */
/* ============================================
   L3 TEMPLATE PAGE - Inline Styles
   Extracted from l3-template.blade.php
   ============================================ */

/* --- 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 ========== */

/* Large Desktop (1400px and above) */
@media (min-width: 1400px) {
    .testimonials_arrow {
        margin-left: 500px !important;
        margin-right: 500px !important;
    }
}

/* Standard Desktop (1200px to 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .testimonials_arrow {
        margin-left: 480px !important;
        margin-right: 480px !important;
    }
}

/* Small Desktop/Laptop (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .testimonials_arrow {
        margin-left: 450px !important;
        margin-right: 450px !important;
    }
}

/* Tablet (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .testimonials_arrow {
        margin-left: 200px !important;
        margin-right: 200px !important;
    }
}

/* ========== BREAKPOINTS FOR INDUSTRY ARROWS ========== */

/* Large Desktop (1400px and above) */
@media (min-width: 1400px) {
    .industry_arrow {
        margin-left: 500px !important;
        margin-right: 500px !important;
    }
}

/* Standard Desktop (1200px to 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .industry_arrow {
        margin-left: 480px !important;
        margin-right: 480px !important;
    }
}

/* Small Desktop/Laptop (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .industry_arrow {
        margin-left: 450px !important;
        margin-right: 450px !important;
    }
}

/* Tablet (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .industry_arrow {
        margin-left: 200px !important;
        margin-right: 200px !important;
    }
}

/* Carousel FOUC guard now lives globally in slider-fouc.css (targets
   the .glider element so every page's gliders are covered). */

/* --- 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;
    }
}

/* --- Body overflow --- */
body {
    overflow-x: hidden;
}

/* --- 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 */
@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%;
    }
}

/* ============================================================
   MOBILE — Overview section cards redesign (scoped to
   .overview-swiper so no other .wwyl-box usage is affected).
   Font colours are left untouched — only layout/spacing.
   ============================================================ */
@media (max-width: 767px) {
    /* Section intro paragraph size */
    .cn-title p {
        font-size: 16px !important;
    }

    /* Accordion panel content — keep paragraphs and bullet lists the
       same 18px so the text size is consistent on mobile. */
    .acc__panel p,
    .acc__panel li,
    .acc__panel ul li,
    .acc__panel ol li,
    .acc__panel .red-title p,
    .acc__panel .red-title li {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    /* Let the card size to its content — drop the fixed 500px and force
       every swiper layer to shrink-to-content so the card can never be
       stretched to a tall empty box (works even if autoHeight doesn't). */
    .overview-swiper.mySwiper {
        height: auto !important;
        padding: 10px 8px 4px !important;
    }
    .overview-swiper .swiper-wrapper {
        height: auto !important;
        align-items: flex-start !important;
    }
    .overview-swiper .swiper-slide {
        height: auto !important;
    }
    .overview-swiper .wwyl-box {
        height: auto !important;
    }

    /* The card — modern look, NO font-colour changes */
    .overview-swiper .wwyl-box {
        position: relative;
        background: #ffffff !important;
        border: 1px solid #eef2f7 !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 30px rgba(21, 65, 110, 0.12) !important;
        padding: 24px 22px 22px !important;
        margin: 22px 8px 6px !important;   /* top space lets the badge overhang */
    }

    /* Number badge — centred at the top, inside the card.
       It used to hang half outside the top edge, which read as detached from
       the card and risked being clipped by the carousel's overflow. */
    /* Number badge — centred on the top edge of the card, overhanging it. */
    .overview-swiper .wwyl-box-circle {
        top: -23px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 46px !important;
        height: 46px !important;
        border-radius: 50% !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.20) !important;
        /* The digit is centred with flex rather than line-height: the mobile
           type rules force line-height:1 on the span, which would drop it onto
           the baseline of the circle's line box instead of its middle. */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        text-align: center !important;
    }
    .overview-swiper .wwyl-box-circle span {
        font-size: 18px !important;
    }

    /* Body text — spacing only, colour left as-is */
    .overview-swiper .wwyl-box p {
        font-size: 16px !important;
        line-height: 1.7 !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
    }
    .overview-swiper .wwyl-box p:last-of-type { margin-bottom: 4px !important; }

    /* Read More — keep its default colour, just tidy it up */
    .overview-swiper .read-more-btn {
        display: inline-block;
        margin-top: 4px;
        padding: 0 !important;
        font-weight: 600;
        font-size: 13.5px;
        text-decoration: none !important;
    }

    /* Pagination dots — sit cleanly below the card */
    .overview-swiper .swiper-pagination {
        position: relative !important;
        bottom: auto !important;
        margin-top: 14px;
    }
}

/* ============================================================================
   Service Features panel — inline links in the copy are links, not CTAs.

   ceh2.css styles `.brochure-box a` as a solid dark-blue uppercase block: that
   is the Program section's "Download Brochure" button, and .brochure-box was
   built around it. The Service Features tab panel reuses .brochure-box purely
   for body copy and has no CTA of its own, so every <a> an editor puts in that
   copy (ISO/OWASP references and the like) was rendering as a button.

   Scoped to .sec19class (the Service Features section) so the Program section's
   real brochure button is untouched. Two classes + an element beats
   ".brochure-box a" on specificity, so load order does not matter.

   The mobile view of this section renders into .red-title, which was never
   given the button styling — so it needs nothing here.
   ========================================================================= */
.sec19class .brochure-box a,
.sec19class .acc__panel .red-title a {
    display: inline;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    color: #212529;
    text-transform: none;
    text-decoration: underline;
}

.sec19class .brochure-box a:hover,
.sec19class .brochure-box a:focus,
.sec19class .acc__panel .red-title a:hover,
.sec19class .acc__panel .red-title a:focus {
    color: #000;
    text-decoration: underline;
}

/* ============================================================================
   MOBILE — one text size for every L3 section.

   Body copy came out at different sizes from one block to the next: editors
   paste out of Word, which wraps text in <span style="font-size:11.0pt">, and
   ceh2.css sizes many lists at 15px while the prose around them is larger. A
   rule on <p> cannot reach a size sitting on an inner <span>, so paragraphs
   disagreed even inside a single section.

   So the size lives on the section's mobile block and everything in it takes
   that size. `inherit` rather than a fixed number, so text inside a heading
   still follows its heading instead of being flattened.

   NOT touched:
     • section headings — h1–h6 are simply not in the list
     • accordion / tab headings — .acc__title, and .ovt-acc-title is a <button>
     • the page's own controls — Read More, Close, show/hide, Inquire Now
     • counters and the designation line, restored at the bottom
     • the site header and section nav, which never use .mobile-view

   The breakpoint is 991px because that is where .mobile-view takes over from
   .desktop-view.
   ========================================================================= */
@media (max-width: 991px) {
    .sample-body .mobile-view {
        font-size: 16px;
        line-height: 1.6;
    }

    .sample-body .mobile-view p,
    .sample-body .mobile-view li,
    .sample-body .mobile-view td,
    .sample-body .mobile-view th,
    .sample-body .mobile-view span,
    .sample-body .mobile-view font,
    .sample-body .mobile-view strong,
    .sample-body .mobile-view b,
    .sample-body .mobile-view em,
    .sample-body .mobile-view a:not(.read-more-btn):not(.btn-show):not(.btn-hide):not(.close-acrodin):not(.price-btn):not(.acc__title):not(.sticky_link):not(.open-enquiry-popup):not(.cn-main-content-enclosed):not(.glider-prev):not(.glider-next) {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* One typeface too. Word paste carries font-family on the same inner spans
       it carries font-size on — Calibri, Times, whatever the author had — so
       one paragraph came out in a different face from the next.

       Icons are <i class="fa …"> and are deliberately left out: giving them a
       text font would turn the glyphs into boxes. */
    .sample-body .mobile-view,
    .sample-body .mobile-view p,
    .sample-body .mobile-view li,
    .sample-body .mobile-view td,
    .sample-body .mobile-view th,
    .sample-body .mobile-view span,
    .sample-body .mobile-view font,
    .sample-body .mobile-view strong,
    .sample-body .mobile-view b,
    .sample-body .mobile-view em,
    .sample-body .mobile-view a:not(.read-more-btn):not(.btn-show):not(.btn-hide):not(.close-acrodin):not(.price-btn):not(.acc__title):not(.sticky_link):not(.open-enquiry-popup):not(.cn-main-content-enclosed):not(.glider-prev):not(.glider-next) {
        font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
    }

    /* Content boxes that carry a size of their own. The rule above makes text
       elements `inherit`, and inherit takes the PARENT's size — so a box left
       at 15px handed 15px to every paragraph inside it, whatever the section
       size said. Pin the boxes too and the whole page lands on one number. */
    .sample-body .mobile-view .third-content,
    .sample-body .mobile-view .acc__panel,
    .sample-body .mobile-view .red-title,
    .sample-body .mobile-view .box-height,
    .sample-body .mobile-view .vert-box,
    .sample-body .mobile-view .wwyl-box,
    .sample-body .mobile-view .brochure-box,
    .sample-body .mobile-view .pro-ul-box,
    .sample-body .mobile-view .price-content,
    .sample-body .mobile-view .cn-content,
    .sample-body .mobile-view .mobile-cont,
    .sample-body .mobile-view .ceh-video-ul,
    .sample-body .mobile-view .ceh-testo-body,
    .ovt-acc .ovt-panel-body {
        font-size: 16px !important;
    }

    /* Give the bullets room now that the text is bigger. */
    .sample-body .mobile-view ul,
    .sample-body .mobile-view ol {
        padding-left: 22px !important;
    }

    .sample-body .mobile-view li {
        margin-bottom: 10px !important;
    }

    /* Counters and the testimonial designation are labels, not copy. */
    .sample-body .mobile-view .ceh-testo-title span {
        font-size: 15px !important;
    }

    .sample-body .mobile-view .wwyl-box-circle span,
    .sample-body .mobile-view .pri-box-number span {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    /* Those counters centre their digit with flex for the same reason — the
       line-height above would otherwise sit it on the baseline. */
    .sample-body .mobile-view .wwyl-box-circle,
    .sample-body .mobile-view .pri-box-number {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ============================================================================
   Testimonials — the Testimonials page card (.tm2-card, styled by
   testimonial-cards.css). The card also carries .ceh-testo-box so the popup
   JS keeps working; neutralise ceh2.css's grey .ceh-testo-box box here.
   ========================================================================= */
/* The section is .light-grey, so the card needs a hard edge to stand off it:
   solid white, a visible border and a deeper shadow than the Testimonials
   page (whose background is white). */
.tm2-card.ceh-testo-box {
    background: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
    border: 1px solid #d9e1ec;
    border-top: 4px solid #1b6fc4;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(20, 66, 110, .18);
    padding: 40px 28px;
    height: auto !important;
    min-height: 0 !important;
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease;
}
.tm2-card.ceh-testo-box:hover {
    box-shadow: 0 14px 34px rgba(20, 66, 110, .26);
    transform: translateY(-3px);
}

/* Equal-height cards, and room for the shadow (the glide track clips it) */
.testi_glider .glide__slide.tm2-slide {
    display: flex;
    height: auto;
    padding: 14px 6px 30px;
}

@media (max-width: 991px) {
    .testimonial-swiper .swiper-slide.tm2-slide {
        height: auto;
        padding: 14px 6px 30px;
    }

    /* The dots were landing on the card. Put them in the flow underneath it. */
    .testimonial-swiper .swiper-pagination {
        position: relative !important;
        bottom: auto !important;
        margin-top: 6px;
        padding-bottom: 4px;
    }
}

@media (max-width: 767px) {
    .tm2-card.ceh-testo-box { padding: 22px 20px; }
}

/* ============================================================================
   Android font boosting.

   Chrome on Android quietly enlarges text in blocks it thinks are too wide for
   the screen, which makes one paragraph render bigger than the next even when
   the CSS says otherwise. It only stops when `text-size-adjust` is pinned.

   cns-plugin.css (the Bootstrap reboot) sets it on <body>, but the boosting
   algorithm keys off the root element, so pin it there as well.

   Worth knowing: this never reproduces in DevTools device mode — desktop
   Chrome does not run the autosizer — so it only ever shows on a real phone.
   ========================================================================= */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ============================================================================
   MOBILE — accordion headings all sized like the Overview's.

   The Overview's new layout gives its headings 14px uppercase text on 14/16
   padding (.ovt-acc-title in l3-overview-tabs.css). These four sections each
   arrived at their own metrics, so a page scrolled through headings that kept
   changing size and height. They now share the Overview's.

   Only the metrics are set — size, weight, spacing, full width. Each section
   keeps its own colours, which come from inline styles on the markup, and the
   chevron ceh2.css already draws on .acc__title::after is left alone.

     .sec19class    Service Features (faq2)
     .faqclass      FAQ's
     .why-codec     Landscape (significance2)
     [data-target^="whycyberwind-"]   CN Value Proposition — that section has no
                                      class of its own to hang this on
   ========================================================================= */
@media (max-width: 991px) {
    .sample-body .sec19class .mobile-view .acc__title,
    .sample-body .faqclass .mobile-view .acc__title,
    .sample-body .why-codec .mobile-view .acc__title,
    .sample-body .mobile-view .acc__title[data-target^="whycyberwind-"] {
        width: 100%;
        box-sizing: border-box;
        padding: 14px 16px;
        font-size: 14px !important;
        font-weight: 600;
        line-height: 1.4;
        text-transform: uppercase;
        text-align: left;
    }

    /* Keep ceh2.css's chevron centred now that the heading is a fixed height. */
    .sample-body .sec19class .mobile-view .acc__title::after,
    .sample-body .faqclass .mobile-view .acc__title::after,
    .sample-body .why-codec .mobile-view .acc__title::after,
    .sample-body .mobile-view .acc__title[data-target^="whycyberwind-"]::after {
        top: 50%;
        margin-top: -7px;
    }
}

/* ===== l3-overview-tabs.css ===== */
/* ============================================================================
   L3 Overview — "tabs" layout for the three blocks (Industry Significance /
   Service Relevance / Benefits to Customers).

   The Overview section renders these blocks one of two ways, chosen per page in
   the L3 Quick editor's "Blocks Layout Style" dropdown. The "cards" layout is
   the original teaser grid and is styled by l3-template.css; only this new
   layout needs its own rules.

     .ovt-tabs   desktop tab strip + fixed-height scrolling panel
                 (inside .desktop-view)
     .ovt-acc    mobile accordion (inside .mobile-view)

   Deliberately matches the Service Features section's look (grey tab band,
   green active tab, lavender 420px scroll panel) without sharing its code:
   those tabs are bound to a single #program_tab19 element, so a second tabbed
   block on the same page cannot reuse them.
   ========================================================================= */

/* Block heading shown above the teaser in the CARDS layout. */
.ov-block-title {
    font-size: 17px;
    font-weight: 700;
    color: #212529;
    margin: 0 0 8px;
}

/* ── Desktop: tab strip ─────────────────────────────────────────────────── */

.ovt-tabs {
    margin-top: 10px;
}

.ovt-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    padding: 18px 16px;
    background: #f3f4f6;
    border-radius: 10px 10px 0 0;
}

.ovt-tab {
    border: 1px solid #dcdcdc;
    background: #fff;
    color: #2b2b2b;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 13px 24px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease,
                box-shadow .16s ease, transform .16s ease;
}

.ovt-tab:hover {
    border-color: #1ba24d;
    color: #1ba24d;
    box-shadow: 0 2px 8px rgba(27, 162, 77, .14);
}

.ovt-tab:focus-visible {
    outline: 2px solid #14426e;
    outline-offset: 2px;
}

.ovt-tab.active {
    background: #1ba24d;
    border-color: #1ba24d;
    color: #fff;
    box-shadow: 0 4px 12px rgba(27, 162, 77, .26);
}

/* The panel area scrolls on its own, so a long write-up never pushes the rest
   of the page down — same behaviour as the Service Features panel. */
.ovt-panels {
    background: #eceff9;
    min-height: 420px;
    max-height: 420px;
    overflow-y: auto;
    margin-top: 12px;
    border-radius: 0 0 10px 10px;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #b9c2dd #eceff9;
}

/* WebKit: a slim scrollbar instead of the default chrome. */
.ovt-panels::-webkit-scrollbar {
    width: 10px;
}

.ovt-panels::-webkit-scrollbar-track {
    background: transparent;
}

.ovt-panels::-webkit-scrollbar-thumb {
    background: #b9c2dd;
    border: 3px solid #eceff9;
    border-radius: 8px;
}

.ovt-panels::-webkit-scrollbar-thumb:hover {
    background: #93a0c4;
}

.ovt-panel {
    display: none;
    padding: 28px 32px;
}

/* Fade the panel in so switching tabs does not snap. */
.ovt-panel.active {
    animation: ovt-fade .18s ease both;
}

@keyframes ovt-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ovt-panel.active { animation: none; }
    .ovt-tab { transition: none; }
}

.ovt-panel.active {
    display: block;
}

.ovt-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #212529;
    margin: 0 0 12px;
}

.ovt-panel-body,
.ovt-panel-body p {
    font-size: 15px;
    line-height: 1.75;
    color: #33415c;
}

/* Bullet lists read as black, not the slate-blue used for prose. */
.ovt-panel-body li {
    font-size: 15px;
    line-height: 1.75;
    color: #212529;
}

/* The marker takes its colour from the item, so this covers the bullet too. */
.ovt-panel-body li::marker {
    color: #212529;
}

.ovt-panel-body p {
    margin: 0 0 14px;
}

/* The page-wide reset flattens list indents, so restore them here. */
.ovt-panel-body ul,
.ovt-panel-body ol {
    padding-left: 22px !important;
    margin: 0 0 14px;
}

.ovt-panel-body li {
    margin-bottom: 8px;
}

.ovt-panel-body > *:first-child {
    margin-top: 0;
}

.ovt-panel-body > *:last-child {
    margin-bottom: 0;
}

/* ── Mobile: the same panels as an accordion ────────────────────────────── */

/* No fixed height here — each panel grows to fit, the closed ones collapse. */
.ovt-acc .ovt-panels,
.ovt-acc.ovt-panels {
    max-height: none;
    min-height: 0;
    overflow: visible;
    background: transparent;
}

.ovt-acc .ovt-panel {
    display: block;
    background: transparent;
    padding: 0;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    animation: none;
}

.ovt-acc .ovt-acc-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: none;
    background: #345995;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    padding: 14px 16px;
    cursor: pointer;
}

/* Chevron, drawn in CSS so the accordion needs no icon asset. */
.ovt-acc .ovt-acc-title::after {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}

.ovt-acc .ovt-panel.active .ovt-acc-title::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.ovt-acc .ovt-panel.active .ovt-acc-title {
    background: #1ba24d;
}

.ovt-acc .ovt-panel-body {
    display: none;
    background: #eceff9;
    padding: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .ovt-acc .ovt-acc-title::after { transition: none; }
}

.ovt-acc .ovt-panel.active .ovt-panel-body {
    display: block;
}

/* Editors paste copy with style="text-align:justify", which is fine in the wide
   desktop panel but breaks up badly in a narrow phone column — justification
   stretches a short line's word gaps until the text has visible rivers running
   through it. Left-align it on small screens. `!important` because the
   alignment is an inline style on the pasted markup. */
@media (max-width: 991px) {
    .ovt-acc .ovt-panel-body,
    .ovt-acc .ovt-panel-body p,
    .ovt-acc .ovt-panel-body li,
    .ovt-acc .ovt-panel-body div {
        text-align: left !important;
    }

    /* A long write-up used to run off the bottom of the screen. Cap the panel
       and scroll inside it — the same 380px box the Service Features accordion
       uses (.box-height in ceh2.css), so the two behave identically. */
    .ovt-acc .ovt-panel-body {
        max-height: 380px;
        overflow-y: auto;
    }

    /* Matching the site's other scroll boxes: 7px, light track, navy thumb. */
    .ovt-acc .ovt-panel-body::-webkit-scrollbar {
        width: 7px;
    }

    .ovt-acc .ovt-panel-body::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .ovt-acc .ovt-panel-body::-webkit-scrollbar-thumb {
        background-color: #23527c;
    }

    .ovt-acc .ovt-panel-body {
        scrollbar-width: thin;
        scrollbar-color: #23527c #f1f1f1;
    }
}

/* ===== testimonial-cards.css ===== */
/* =====================================================================
   Testimonial card + Read More popup — the home page "What Our Clients
   Say" design (index.blade.php #mhome-div10 and
   layouts/mobile-components/m-testimonials.blade.php), reused on the
   Testimonials page. Keep the two in step if either changes.
   ===================================================================== */

/* ---- Card ---- */
/* Room for the card shadow — swiper clips anything outside its box */
.tm2-swiper { padding: 14px 10px 30px !important; }
.tm2-slide { height: auto !important; display: flex !important; }
.tm2-card {
    background: #fff; border-radius: 10px; width: 100%;
    padding: 44px 28px; text-align: left; position: relative;
    box-shadow: 0 18px 46px rgba(20, 30, 80, .16);
    display: flex; flex-direction: row; align-items: center; gap: 24px;
}
.tm2-avatar-wrap { position: relative; width: 132px; margin: 0; flex: none; }
.tm2-avatar {
    width: 132px; height: 132px; border-radius: 50%; object-fit: cover; display: block;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.tm2-badge {
    position: absolute; right: -4px; bottom: 2px; width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #2aa9e0, #1c8fd0); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}
.tm2-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tm2-text {
    color: #6b7280; font-size: 15px; line-height: 1.75; margin: 0 0 10px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Beat the page's global `.wpb_wrapper h3` (uppercase, 24px, bottom border) */
.tm2-card .tm2-name {
    color: #1b6fc4; font-size: 18px; font-weight: 700; margin: 0 0 2px;
    padding: 0; border: 0; text-transform: none; line-height: 1.3;
}
.tm2-role { color: #8a94a6; font-size: 13px; display: block; margin-bottom: 12px; }
.tm2-readmore {
    align-self: flex-start; background: #1b6fc4; color: #fff; border: none; border-radius: 22px;
    padding: 7px 20px; font-size: 13px; font-weight: 600; letter-spacing: .3px; cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.tm2-readmore:hover { background: #15416e; transform: translateY(-2px); }

/* Initials avatar for testimonials without a photo */
.tm-initials {
    display: flex !important; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #15416e, #1c6fb5); color: #fff;
    font-weight: 700; letter-spacing: 1px; line-height: 1; user-select: none;
}
.tm2-avatar.tm-initials { font-size: 42px; }

@media (max-width: 767px) {
    .tm2-card { padding: 22px 20px; gap: 16px; }
    .tm2-avatar-wrap, .tm2-avatar { width: 96px; }
    .tm2-avatar { height: 96px; }
    .tm2-avatar.tm-initials { font-size: 32px; }
    .tm2-text { font-size: 14.5px; -webkit-line-clamp: 4; }
}
@media (max-width: 480px) {
    .tm2-card { flex-direction: column; text-align: center; }
    .tm2-avatar-wrap { margin: 0 auto; }
    .tm2-readmore { align-self: center; }
}

/* ---- Read More popup (cover banner + overlapping round photo) ---- */
.testo-popup-cont-top {
    background:
        linear-gradient(115deg, transparent 60%, rgba(255, 255, 255, .10) 60%, rgba(255, 255, 255, .10) 68%, transparent 68%),
        linear-gradient(115deg, transparent 70%, rgba(255, 255, 255, .07) 70%, rgba(255, 255, 255, .07) 80%, transparent 80%),
        linear-gradient(120deg, #0f3d6e 0%, #1c6fb5 55%, #2aa9e0 100%);
    height: 120px;
    border-radius: 10px;
    position: relative;
    padding: 20px;
}
.testo-popup-cont-top::before {
    content: "";
    position: absolute;
    top: 0; right: 0; left: auto;
    width: 46%; height: 100%;
    background: linear-gradient(120deg, transparent 42%, rgba(255, 255, 255, .10) 42%, rgba(255, 255, 255, .10) 55%, transparent 55%);
    border-radius: 0 10px 10px 0;
    z-index: 1;
}
.testo-popup-cont-top-img {
    position: absolute;
    bottom: -35px; left: 20px;
    z-index: 2;
    width: 96px; height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}
.testo-popup-cont-top-img img {
    width: 100% !important; height: 100% !important;
    border-radius: 0 !important; border: 0 !important;
    object-fit: cover !important;
    object-position: center 18% !important;
    transform: scale(1.28);
    transform-origin: center 30%;
    display: block;
    margin: 0;
}
.testo-popup-cont-top-img .tm-initials { width: 100%; height: 100%; font-size: 32px; }
.testo-popup-cont-bottom {
    margin-top: 55px;
    padding-left: 20px;
    text-align: left;
}
.testo-popup-cont-bottom h3 {
    margin: 0 0 5px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}
.testo-popup-cont-bottom span {
    font-size: 14px;
    color: #666;
    display: block;
}
/* Descriptions come from the DB as plain text — keep their line breaks */
#popup-description { white-space: pre-line; }

/* ===== l3-page-extra.css ===== */
/* L3 page rules that used to sit inline in l3-template.blade.php.
   Bundled into l3-page.css by `php artisan l3:css` — edit here, then rebuild. */

        .price-content ul   {
        padding-left: 20px !important;
    }

    .cn-title p {

        font-size: 15px !important;

    }

td {
    text-align: center !important;
    vertical-align: middle !important;
}

td p {
    margin-top: 20px !important;
}

/* ===== Anti-flash on page load =====
   Tab content panels render without inline display styles, so before
   l3-check.js runs (which clicks #defaultOpen and hides the inactive
   panels), ALL panels are visible — causing a brief stacked-content
   "snap" on first paint. Hide them by default; JS will set inline
   display:block on the active one, which overrides this rule. */
.tab3-tabcontent { display: none; }
.tab3-tabcontent[id^=" "] { display: none; }   /* paranoia for IDs with whitespace */

 /* Apply same style to BOTH tables */
table.MsoTableGrid,
table.Table {
    border-collapse: collapse;
    width: 100%;
}

/* Cell spacing */
table.MsoTableGrid td,
table.MsoTableGrid th,
table.Table td,
table.Table th {
    padding: 8px 10px;
    vertical-align: top;
}

/* Header (supports both th and td inside thead) */
table.MsoTableGrid thead th,
table.MsoTableGrid thead td,
table.Table thead th,
table.Table thead td {
    font-weight: bold;
    text-align: center;
    background-color: #e7e6e6 !important;
    border-top: 1px solid #8eaadb;
    border-bottom: 2px solid #8eaadb;
}

/* First column bold */
table.MsoTableGrid td:first-child,
table.Table td:first-child {
    font-weight: bold;
}

/* First column left border */
table.MsoTableGrid td:first-child,
table.Table td:first-child {
    border-left: 1px solid #8eaadb !important;
}

/* Last column right border */
table.MsoTableGrid td:last-child,
table.Table td:last-child {
    border-right: 1px solid #8eaadb !important;
}

/* Alternating row colors (ONLY tbody) */
table.MsoTableGrid tbody tr:nth-child(odd) td,
table.Table tbody tr:nth-child(odd) td {
    background-color: #d9e2f3;
}

table.MsoTableGrid tbody tr:nth-child(even) td,
table.Table tbody tr:nth-child(even) td {
    background-color: #ffffff;
}

/* Borders */
table.MsoTableGrid td,
table.Table td {
    border-bottom: 1px dashed #8eaadb;
    border-right: 1px dashed #8eaadb;
    border-top: none;
    border-left: none;
}

/* Last row solid border */
table.MsoTableGrid tbody tr:last-child td,
table.Table tbody tr:last-child td {
    border-bottom: 1px solid #8eaadb;
}

/* Override inline styles (Word HTML fix) */
table.MsoTableGrid td[style*="border"],
table.Table td[style*="border"] {
    border-color: #8eaadb !important;
}

/* ===== Banner (hero image / slider / prev-next arrows) ===== */

/* No static background photo on the L3 banner (style.css gives every .cn-bg
   final-level-bg.webp). Uploaded banners cover it; pages without one get a
   plain navy box instead of the stock photo. */
#banner.cn-bg {
    background-image: none;
    background-color: #0b1a33;
}

/* No blue tint over the L3 banner (style.css puts one on every .cn-bg) */
#banner.cn-bg:before {
    background: none;
}

/* Keep the banner the same height whether or not keywords are set */
@media (min-width: 992px) {
    #banner.cn-bg:not(.has-banner-img) {
        min-height: 378px;
    }
}

/* Uploaded banner: shown in full at every screen width, never cropped.
   The image sets the banner's height from its own width (height: auto), so it
   does not depend on the server reading the file's size — on a host where it
   can't, height:100% + cover used to blow the box up to the image's natural
   height on phones and crop the middle of it. Image and keyword text share one
   grid cell; the text sits centred on top. */
#banner.has-banner-img {
    display: grid;
    background-image: none;
    aspect-ratio: auto !important;
}
#banner.has-banner-img > .cn-banner-img,
#banner.has-banner-img > .cn-banner-slider,
#banner.has-banner-img > .container {
    grid-area: 1 / 1;
    min-width: 0;
}
#banner.has-banner-img > .container {
    align-self: center;
}
#banner.has-banner-img .cn-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Several banners: a slider in the same cell, as tall as its images.
   Styled here rather than relying on the page's mixed Swiper CSS versions. */
#banner.has-banner-img > .cn-banner-slider {
    position: relative;
    width: 100%;
    align-self: start;
    overflow: hidden;
}
.cn-banner-slider .swiper-wrapper {
    display: flex;
    align-items: flex-start;
}
.cn-banner-slider .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: auto;
}

/* Prev / next arrows (sit above the banner text, which shares the grid cell) */
.cn-banner-nav {
    position: absolute;
    top: 50%;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    /* Faint by default so the banner copy underneath stays readable */
    background: rgba(15, 30, 60, .25);
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
    opacity: .55;
    transition: background .2s, color .2s, opacity .2s, transform .2s;
}
/* Banner hovered: arrows come forward a little */
#banner:hover .cn-banner-nav {
    opacity: .85;
}
/* Arrow itself hovered: solid and dark */
#banner .cn-banner-nav:hover,
#banner .cn-banner-nav:focus-visible {
    opacity: 1;
    background: #0b1a33;
    color: #fff;
    border-color: #0b1a33;
    transform: scale(1.06);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.cn-banner-nav svg {
    width: 22px;
    height: 22px;
}
.cn-banner-prev { left: 8px; }
.cn-banner-next { right: 8px; }

#banner.has-banner-img .cn-header {
    padding: 40px 0;
}

/* Phones: the banner is a short strip at this width, so smaller arrows and
   less padding around the (usually empty) keyword block. */
@media (max-width: 767px) {
    .cn-banner-nav {
        width: 28px;
        height: 28px;
        margin-top: -14px;
    }
    .cn-banner-nav svg {
        width: 16px;
        height: 16px;
    }
    .cn-banner-prev { left: 4px; }
    .cn-banner-next { right: 4px; }
    #banner.has-banner-img .cn-header {
        padding: 10px 0;
    }
    /* Not made taller here on purpose: a 5:1 desktop banner can only grow on a
       phone by cropping its sides, which cut off banner copy. A taller phone
       banner needs its own mobile image. */
}

/* Up to 768px the normal header is hidden (menu.css) and only the 50px
   .mobile-nav-top bar shows — position: fixed, so it takes no room and sat on
   top of the banner's first 50px. Start the banner below it. (769–991px still
   has the 53px .site-header reserving that space.) */
@media (max-width: 768px) {
    #banner.cn-bg {
        margin-top: 50px;
    }
}