/* ==========================================================================
   Solution Corridor — UI refinement layer (public/frontend pages only)
   Loaded last so it refines style.css + new2026.css without replacing them.
   Scope: typography rhythm, card system, forms, a11y, and mobile fixes.
   ========================================================================== */

:root {
    /* One family for the whole public site. The fallbacks are only there for
       the moment before the webfont lands (font-display: swap). */
    --sc-font: "Roboto", "Helvetica Neue", Arial, "Segoe UI", system-ui, sans-serif;

    /* Brand (kept in sync with new2026.css) */
    --sc-navy: #001b3d;
    --sc-navy-2: #0a2463;
    --sc-blue: #0d6efd;
    --sc-blue-600: #0b5ed7;
    --sc-blue-100: #e8f2ff;

    /* Ink + surfaces */
    --sc-ink: #0f172a;
    --sc-ink-2: #334155;
    --sc-muted: #64748b;
    --sc-line: #e6ebf2;
    --sc-surface: #ffffff;
    --sc-surface-2: #f6f8fc;

    /* Elevation — soft, low-spread */
    --sc-shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
    --sc-shadow-2: 0 4px 12px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .04);
    --sc-shadow-3: 0 12px 28px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .05);

    --sc-r-sm: 8px;
    --sc-r: 14px;
    --sc-r-lg: 20px;

    /* Fluid section rhythm */
    --sc-section-y: clamp(2.75rem, 6vw, 5.5rem);
    --sc-gap: clamp(1rem, 2.2vw, 1.75rem);

    /* Consistent page gutter */
    --sc-gutter: clamp(1rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   1. Base hardening
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* --- One typeface, everywhere ---------------------------------------------
   style.css and new2026.css set "Barlow" on headings and a Segoe UI stack in
   a few places, and several templates repeat font-family in inline <style>
   blocks that load after this file. Those are spread across ~40 selectors in
   a 524KB stylesheet, so !important is the only way to guarantee a single
   face without editing every one of them.

   Icon fonts are excluded: Font Awesome and flaticon map glyphs to private
   code points, so forcing their family would blank every icon on the site. */
html,
body,
body *:not([class*="fa-"]):not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.fad):not([class*="flaticon"]):not(code):not(kbd):not(samp):not(pre) {
    font-family: var(--sc-font) !important;
}

/* Belt and braces: re-assert the icon families in case a broader rule in the
   cascade ever catches them. */
.fa,
.fab,
.fas,
.far,
.fal,
.fad,
[class*="fa-"]::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

.fab,
.fab::before {
    font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands" !important;
}

/* Keep code samples monospaced */
code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--sc-ink-2);
    overflow-x: clip; /* clip (not hidden) keeps position:sticky working */
}

/* Nothing may push the page sideways on a phone. */
img,
svg,
video,
canvas,
iframe,
embed,
object {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* Long URLs / unbroken strings in user-generated copy */
p,
li,
h1, h2, h3, h4, h5, h6,
blockquote,
dd, dt,
figcaption {
    overflow-wrap: break-word;
}

/* Wide content scrolls inside itself instead of widening the page */
.table-responsive,
.sc-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

pre {
    overflow-x: auto;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   2. Fluid typography
   -------------------------------------------------------------------------- */

h1, .h1 { font-size: clamp(1.9rem, 1.15rem + 3.4vw, 3.4rem); line-height: 1.12; }
h2, .h2 { font-size: clamp(1.55rem, 1.05rem + 2.2vw, 2.5rem); line-height: 1.18; }
h3, .h3 { font-size: clamp(1.2rem, .98rem + 1.05vw, 1.6rem);  line-height: 1.25; }
h4, .h4 { font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem);  line-height: 1.3; }

h1, h2, h3, h4, h5, h6 {
    color: var(--sc-ink);
    letter-spacing: -.012em;
    text-wrap: balance; /* progressive enhancement */
}

p {
    line-height: 1.65;
    text-wrap: pretty;
}

/* Keep body copy in a comfortable measure on wide screens */
.sc-measure { max-width: 68ch; }

/* --------------------------------------------------------------------------
   3. Accessibility
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--sc-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Don't show the ring for pointer users who merely clicked */
:where(a, button):focus:not(:focus-visible) {
    outline: none;
}

.sc-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: .75rem 1.25rem;
    background: var(--sc-navy);
    color: #fff;
    border-radius: 0 0 var(--sc-r-sm) 0;
    font-weight: 600;
}

.sc-skip-link:focus {
    left: 0;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   4. Section rhythm
   -------------------------------------------------------------------------- */

.services-showcase,
.about-section,
.page-section,
.sc-section {
    padding-block: var(--sc-section-y);
}

.services-header,
.sc-section-head {
    max-width: 46rem;
    margin-inline: auto;
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
    text-align: center;
    padding-inline: var(--sc-gutter);
}

.services-subtitle,
.sc-section-head p {
    color: var(--sc-muted);
    font-size: clamp(.98rem, .93rem + .25vw, 1.12rem);
    margin-bottom: 0;
}

/* Public pages lay content out in .container-fluid, which runs to the very
   edge of a wide monitor and made line lengths unreadable. Constrain the
   *content*; section backgrounds still span full-bleed because the colour
   lives on the parent <section>, not on this wrapper. */
.main-wrapper .container-fluid,
.sc-container {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: var(--sc-gutter);
}

/* Opt-out for anything that genuinely needs the full width */
.main-wrapper .container-fluid.sc-bleed {
    max-width: none;
    padding-inline: 0;
}

/* --------------------------------------------------------------------------
   5. Card system
   Replaces the fixed-height cards that clipped their own text on mobile.
   -------------------------------------------------------------------------- */

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sc-gap);
    align-items: stretch;
}

.service-card {
    display: flex;
    flex-direction: column;
    height: auto; /* was a fixed 220px on mobile — text got cut off */
    min-height: 0;
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r);
    box-shadow: var(--sc-shadow-1);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service-card:hover,
.service-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--sc-shadow-3);
    border-color: #d7e3f4;
}

.card-image-wrapper {
    position: relative;
    height: auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--sc-surface-2);
    flex: 0 0 auto;
}

.card-image-wrapper > a,
.service-car-img {
    display: block;
    width: 100%;
    height: 100%;
}

.service-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .35s ease;
}

/* When a picture 404s the markup swaps in the brand logo and tags it
   .img-fallback. Cropping a wordmark to fill a 16:10 box is unreadable, so
   letterbox it instead. !important is needed because several page templates
   set `.service-image { object-fit: cover }` in inline <style> blocks that
   come after this sheet. */
.img-fallback {
    object-fit: contain !important;
    padding: clamp(.6rem, 2.5vw, 1.1rem) !important;
    background: var(--sc-surface-2);
}

.service-card:hover .service-image {
    transform: scale(1.04);
}

/* A letterboxed logo shouldn't zoom on hover — it just reveals the padding. */
.service-card:hover .img-fallback {
    transform: none;
}

.card-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: clamp(.9rem, 2vw, 1.25rem);
    flex: 1 1 auto;
    min-height: 0;
}

.service-name {
    font-size: clamp(1rem, .95rem + .25vw, 1.15rem);
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Reserve both lines so cards in a row stay aligned */
    min-height: calc(2 * 1.3em);
}

.service-name a {
    color: var(--sc-ink);
    text-decoration: none;
}

.service-name a:hover {
    color: var(--sc-blue-600);
}

/* Clamp to a fixed number of lines rather than forcing one nowrap line */
.service-excerpt {
    color: var(--sc-muted);
    font-size: .925rem;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    max-height: none;
}

.read-more,
.service-read-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--sc-blue);
    text-decoration: none;
    padding-block: .35rem; /* grows the tap target without shifting layout */
}

.read-more:hover,
.service-read-more:hover {
    color: var(--sc-blue-600);
}

.read-more svg,
.service-read-more svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.read-more:hover svg,
.service-read-more:hover svg {
    transform: translateX(3px);
}

/* Card titles are the primary target on a phone — let the link fill the
   heading box rather than being a short strip of text. */
.service-name a {
    display: block;
}

/* --- course card meta (duration + fee) ---
   Replaces a float-based row that lived in a <style> block inside the card
   partial, together with a `height: 170px` on the card below 768px that
   squeezed the title and price together. */

.sc-course-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem .75rem;
    margin-top: auto;
    padding-top: .65rem;
    border-top: 1px solid var(--sc-line);
}

.sc-course-meta__duration {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--sc-muted);
    white-space: nowrap;
}

.sc-course-meta__fee {
    font-size: .95rem;
    font-weight: 700;
    color: #ed3237;
    white-space: nowrap;
}

.sc-course-meta__per {
    font-size: .78rem;
    font-weight: 500;
    opacity: .8;
}

/* At two-up on a phone the row runs out of width, so stack it. */
@media (max-width: 575.98px) {
    .sc-course-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: .2rem;
    }

    .sc-course-meta__duration {
        font-size: .76rem;
    }

    .sc-course-meta__fee {
        font-size: .88rem;
    }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.hero-btn,
.all-services-btn,
.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding: .7rem 1.5rem;
    border-radius: var(--sc-r-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    background: var(--sc-blue);
    color: #fff;
    box-shadow: var(--sc-shadow-1);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
}

.hero-btn:hover,
.all-services-btn:hover,
.sc-btn:hover {
    background: var(--sc-blue-600);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--sc-shadow-2);
}

.hero-btn:active,
.all-services-btn:active,
.sc-btn:active {
    transform: translateY(0);
}

.sc-btn--ghost {
    background: transparent;
    color: var(--sc-blue);
    border-color: currentColor;
    box-shadow: none;
}

.sc-btn--ghost:hover {
    background: var(--sc-blue-100);
    color: var(--sc-blue-600);
}

/* --------------------------------------------------------------------------
   7. Forms — 16px inputs stop iOS Safari zooming on focus
   -------------------------------------------------------------------------- */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
    font-size: 16px;
    min-height: 46px;
    padding: .65rem .9rem;
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-sm);
    background: #fff;
    color: var(--sc-ink);
    width: 100%;
    max-width: 100%;
    transition: border-color .18s ease, box-shadow .18s ease;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--sc-blue);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .16);
    outline: none;
}

label {
    font-weight: 600;
    color: var(--sc-ink);
    margin-bottom: .35rem;
    display: inline-block;
}

/* Captcha images shouldn't blow out narrow screens */
.captcha-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sc-r-sm);
}

/* iOS Safari zooms the page whenever a focused field is under 16px, which
   throws the layout off and needs a pinch to recover. Several form classes
   in style.css set .95rem, so this has to out-rank them. Scoped to the
   breakpoints where a touch keyboard is in play. */
@media (max-width: 991.98px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   8. Tap targets — WCAG 2.5.8 asks for 24px; 44px is the comfortable target
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
    .footer-link,
    .footer-links a,
    .breadcrumb-item a,
    .nav-link,
    .read-more,
    .service-read-more,
    .pagination .page-link,
    .copyright a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Footer link lists get roomy rows instead of 44px boxes that collide */
    .footer-links li + li {
        margin-top: 2px;
    }
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

/* Root cause of the sitewide 65px horizontal scroll on phones: eight 42px
   circles in a non-wrapping flex row. */
.social-links {
    flex-wrap: wrap;
}

.footer-grid {
    gap: var(--sc-gap);
}

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

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

/* --------------------------------------------------------------------------
   10. Floating action buttons
   -------------------------------------------------------------------------- */

.whatsapp-btn,
.back-to-top,
.whatsapp-float,
.scroll-top,
#scrollTop {
    z-index: 1040;
}

/* The FABs are fixed to the bottom-right and were sitting on top of the
   copyright line. Reserve space for them at the end of the page. */
.footer-bottom {
    padding-bottom: clamp(1rem, 3vw, 1.5rem);
}

@media (max-width: 767.98px) {
    .footer-bottom .bottom-content {
        padding-right: 74px; /* clears the FAB column */
        text-align: left;
    }
}

/* The mobile-only utility row was breaking labels mid-phrase
   ("Help &" / "FAQ"). Wrap whole items instead. */
.footer-links-m {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1.25rem;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.footer-links-m li {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   11. Hero
   -------------------------------------------------------------------------- */

/* The hero's stacking context comes from new2026.css
   (.hero-slide z-index 1, its ::after overlay 2, .hero-content 3).
   That is preserved; everything else here is a rework. */

.hero-modern {
    /* was a hard 500px, plus `margin-bottom: -51px !important` to hide the
       strip left by .hero-slide{height:90%} */
    height: auto;
    min-height: clamp(30rem, 76vh, 44rem);
    max-height: none;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    isolation: isolate;
}

.hero-slide {
    /* 90% left a bare band across the bottom of the section */
    height: 100%;
    background-position: center 30%;
    transform: scale(1.02); /* hides edge softness on wide crops */
}

/* Two-layer scrim: a horizontal wash keeps the copy legible over a busy
   photo, and a vertical one anchors the section to the content below. */
.hero-slide::after {
    background:
        linear-gradient(100deg,
            rgba(2, 0, 36, .92) 0%,
            rgba(2, 0, 36, .78) 36%,
            rgba(2, 0, 36, .38) 66%,
            rgba(2, 0, 36, .14) 100%),
        linear-gradient(to top,
            rgba(2, 0, 36, .7) 0%,
            transparent 38%);
}

.hero-modern > .container-fluid {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: var(--sc-gutter);
}

.hero-content {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
    max-width: 46rem;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    font-size: .8rem;
    letter-spacing: .14em;
    padding: .45rem 1rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-left: 3px solid var(--sc-blue);
    border-radius: 999px;
    margin-bottom: 1.35rem;
}

.hero-title {
    font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
    margin-bottom: 1rem;
}

.hero-desc {
    font-size: clamp(1rem, .95rem + .4vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .86);
    max-width: 40rem;
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

/* --- actions --- */

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 50px;
    padding: .8rem 1.75rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid transparent;
    background: var(--sc-blue);
    color: #fff;
    box-shadow: 0 10px 24px rgba(13, 110, 253, .32);
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.hero-btn svg {
    transition: transform .22s ease;
}

.hero-btn:hover {
    background: var(--sc-blue-600);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(13, 110, 253, .42);
}

.hero-btn:hover svg {
    transform: translateX(3px);
}

.hero-btn--ghost {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .38);
    box-shadow: none;
    /* the ghost button has its own entrance, slightly after the primary */
    animation: fadeInUp .6s ease-out 1.05s forwards;
}

.hero-btn--ghost:hover {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .6);
    box-shadow: none;
}

/* --- trust strip --- */

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.25rem, 4vw, 3rem);
    list-style: none;
    margin: 0;
    padding: clamp(1.1rem, 3vw, 1.5rem) 0 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
    opacity: 0;
    animation: fadeIn .8s ease-out 1.2s forwards;
}

.hero-stats li {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.hero-stats strong {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.015em;
}

.hero-stats span {
    margin-top: .2rem;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

/* --- small screens --- */

@media (max-width: 767.98px) {
    .hero-modern {
        min-height: min(84vh, 34rem);
    }

    .hero-slide::after {
        /* a mostly-vertical scrim reads better on a narrow, centred layout */
        background:
            linear-gradient(180deg,
                rgba(2, 0, 36, .82) 0%,
                rgba(2, 0, 36, .72) 45%,
                rgba(2, 0, 36, .9) 100%);
    }

    /* Between the fixed navbar and the quick-contact bar there is only about
       510px of usable height on a 640px handset, so the hero is tightened to
       keep the CTAs and trust strip above the fold. */
    .hero-content {
        text-align: center;
        max-width: none;
        padding: 1.85rem 0 1.6rem;
    }

    .hero-tag {
        margin-bottom: 1rem;
    }

    .hero-desc {
        margin-inline: auto;
        margin-bottom: 1.4rem;
    }

    .hero-actions {
        justify-content: center;
        gap: .6rem;
        margin-bottom: 1.6rem;
    }

    .hero-btn {
        flex: 1 1 10rem;
        min-height: 46px;
        padding-inline: 1.1rem;
        font-size: .95rem;
    }

    .hero-stats {
        padding-top: 1rem;
    }

    .hero-stats {
        justify-content: space-between;
        gap: 1rem;
    }

    .hero-stats li {
        flex: 1 1 0;
        align-items: center;
        text-align: center;
        min-width: 0;
    }

    .hero-stats span {
        font-size: .7rem;
        letter-spacing: .02em;
    }
}

/* --------------------------------------------------------------------------
   11b. Fixed-navbar offset
   Below 992px header.blade.php switches the navbar to position:fixed, but
   nothing reserved space for it, so the top ~29px of every page sat behind
   the bar. --sc-nav-h is measured by the script in header.blade.php; the
   69px fallback covers the no-JS case.
   -------------------------------------------------------------------------- */

html {
    scroll-padding-top: calc(var(--sc-nav-h, 69px) + 12px);
}

@media (max-width: 991.98px) {
    body {
        padding-top: var(--sc-nav-h, 69px);
    }
}

/* --------------------------------------------------------------------------
   12. Page header / breadcrumb
   -------------------------------------------------------------------------- */

.page-header {
    padding-block: clamp(2rem, 5vw, 3.25rem);
}

/* new2026.css adds `margin-top: 40px` below 768px. That was a manual nudge to
   clear the fixed mobile navbar back when nothing reserved space for it; the
   body now carries `padding-top: var(--sc-nav-h)`, so the old hack showed up
   as a 40px white band between the navbar and the breadcrumb on every page.
   It also collapsed through <main>, dragging the whole page down with it. */
@media (max-width: 768px) {
    .page-header {
        margin-top: 0;
    }

    /* Same block pinned page titles to 16px — smaller than body copy. */
    .page-header h1 {
        font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.8rem);
        line-height: 1.2;
    }

    .page-header p {
        font-size: .95rem;
    }
}

.page-header h1,
.page-header h2,
.page-header .page-title {
    color: #fff;
    margin-bottom: .35rem;
}

/* style.css resets headings inside this block back to body size */
.page-header .page-title {
    font-size: clamp(1.6rem, 1.15rem + 2.2vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
}

/* --- Breadcrumbs -----------------------------------------------------------
   One treatment for every page. Some templates still emit a literal "/" as
   its own <li>; those are hidden via :not() below so the CSS divider is the
   only separator and spacing stays even. */

.page-header .breadcrumb,
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1rem .1rem;
    margin: 0 0 .75rem;
    padding: 0;
    background: transparent;
    font-size: .875rem;
    line-height: 1.4;
    list-style: none;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, .72);
    min-width: 0;
}

.breadcrumb-item a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    padding: .15rem .1rem;
    border-radius: 4px;
    transition: color .18s ease;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.breadcrumb-item.active,
.breadcrumb-item[aria-current="page"] {
    color: #fff;
    font-weight: 600;
}

/* The current page can be long — let it truncate rather than wrap awkwardly */
.breadcrumb-item.active {
    max-width: min(100%, 34ch);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CSS divider, drawn only between real items */
.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    display: inline-block;
    padding-inline: .55rem;
    color: rgba(255, 255, 255, .38);
    font-weight: 400;
}

/* Older templates insert a standalone "/" list item. Hide the item itself so
   the CSS divider is the only separator. The hidden <li> is still a sibling,
   so the item after it keeps its ::before and the trail reads normally. */
.breadcrumb-item.sc-bc-sep {
    display: none;
}

.breadcrumb-item i {
    font-size: .9em;
    opacity: .9;
}

@media (max-width: 575.98px) {
    .page-header .breadcrumb,
    .breadcrumb {
        font-size: .8rem;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        padding-inline: .4rem;
    }
}

/* Space between the page header and the first block of content, normalised
   across every public page.

   The legacy templates each set their own value — 24px on /courses up to
   130px on /gallery and /terms — because they were sized for the old
   .hero-inner banner, which had no bottom padding of its own. That left the
   gap jumping around as you moved between pages.

   One fluid value now covers all of them, so it scales instead of being a
   fixed pixel figure that is too large on a phone. `.pt-*` utilities are a
   single class (0,1,0); the compound selector here (0,1,1) outranks them
   without needing !important. */
.page-header + section,
.page-header + div {
    padding-top: var(--sc-section-y);
}

/* --------------------------------------------------------------------------
   13. Content pages (privacy, terms, blog detail)
   -------------------------------------------------------------------------- */

.sc-prose,
.blog-content,
.privacy-content,
.terms-content {
    color: var(--sc-ink-2);
    font-size: clamp(1rem, .97rem + .18vw, 1.08rem);
    line-height: 1.75;
}

.sc-prose > * + *,
.blog-content > * + * {
    margin-top: 1.1em;
}

.sc-prose h2,
.blog-content h2,
.sc-prose h3,
.blog-content h3 {
    margin-top: 1.9em;
    margin-bottom: .6em;
}

.sc-prose img,
.blog-content img {
    border-radius: var(--sc-r);
    box-shadow: var(--sc-shadow-2);
}

.sc-prose table,
.blog-content table {
    width: 100%;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.sc-prose a,
.blog-content a {
    color: var(--sc-blue-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Article bodies are authored in a WYSIWYG and often pasted straight out of
   Word (p.MsoNormal), which carries text-align:justify. Justification with
   no hyphenation tears rivers of whitespace through a 390px column, so drop
   it on small screens and soften it everywhere else. */
article p,
article li,
.blog-details p,
.blog-details li,
.sc-prose p,
.sc-prose li {
    hyphens: auto;
}

@media (max-width: 767.98px) {
    article p,
    article li,
    .blog-details p,
    .blog-details li,
    .sc-prose p,
    .sc-prose li,
    .service-details p,
    .product-details p {
        text-align: left !important;
        hyphens: none;
    }
}

/* Word paste also brings fixed pixel widths that can push the page wide. */
article [style*="width"],
.blog-details [style*="width"] {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   15. Site search
   -------------------------------------------------------------------------- */

.sc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.sc-nav-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* --- Mobile nav icons ---
   The desktop bar is a horizontal row of short labels and reads fine without
   them; the icons are for the stacked drawer, where they give each row a
   scannable anchor. Hidden above the breakpoint so the desktop bar is
   unchanged. */

.nav-link__icon {
    display: none;
}

@media (max-width: 991.98px) {
    .navbar-nav .nav-link {
        gap: .85rem;
    }

    /* Specificity is deliberate: Font Awesome's own `.fas { display: ... }`
       is a single class, so a stray FA include loaded after this sheet used
       to win the tie and knock the glyph out of its tile. The compound
       selector outranks it. */
    .navbar-nav .nav-item .nav-link .nav-link__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: .85rem;
        line-height: 1;
        text-align: center;
        color: rgba(255, 255, 255, .8);
        background: rgba(255, 255, 255, .1);
        transition: background .2s ease, color .2s ease;
    }

    .navbar-nav .nav-item .nav-link:hover .nav-link__icon,
    .navbar-nav .nav-item .nav-link:focus-visible .nav-link__icon {
        background: rgba(255, 255, 255, .2);
        color: #fff;
    }

    .navbar-nav .nav-item .nav-link.active .nav-link__icon {
        background: var(--sc-blue);
        color: #fff;
    }
}

.sc-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.sc-search-toggle:hover,
.sc-search-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .55);
}

/* On desktop the nav links grow to fill the bar, so ordering puts the
   magnifier at the far right rather than beside the logo. */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        order: 2;
    }

    .sc-nav-actions {
        order: 3;
        margin-left: .75rem;
    }
}

/* .navbar-expand-lg pins the bar to flex-wrap:nowrap on desktop, so the panel
   cannot take a row of its own as a flex item — it gets laid out beside the
   logo instead. Drop it out of flow and hang it under the bar. */
.sc-search-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1060;
    background: rgba(2, 0, 36, .97);
    border-top: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 12px 24px rgba(2, 0, 36, .25);
    padding: .9rem 0 1.1rem;
}

.sc-search-panel.is-open {
    display: block;
}

.sc-search-field {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border-radius: var(--sc-r-sm);
    padding: .35rem .35rem .35rem .75rem;
    box-shadow: var(--sc-shadow-2);
}

.sc-search-field__icon {
    flex: 0 0 auto;
    color: var(--sc-muted);
}

.sc-search-field input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    box-shadow: none;
    min-height: 42px;
    padding: 0;
    background: transparent;
}

.sc-search-field input[type="search"]:focus {
    border: 0;
    box-shadow: none;
}

.sc-search-field .sc-btn {
    flex: 0 0 auto;
    min-height: 42px;
    padding-inline: 1.1rem;
}

/* --- results page --- */

.sc-search-form {
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.sc-search-form .sc-search-field {
    border: 1px solid var(--sc-line);
    box-shadow: var(--sc-shadow-1);
}

.sc-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .85rem;
}

.sc-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    min-height: 38px;
    border-radius: var(--sc-r-pill, 50px);
    border: 1px solid var(--sc-line);
    background: #fff;
    color: var(--sc-ink-2);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.sc-chip:hover {
    border-color: var(--sc-blue);
    color: var(--sc-blue-600);
}

.sc-chip.is-active {
    background: var(--sc-navy-2);
    border-color: var(--sc-navy-2);
    color: #fff;
}

.sc-chip__count {
    font-size: .75rem;
    padding: .05rem .4rem;
    border-radius: 50px;
    background: rgba(15, 23, 42, .1);
}

.sc-chip.is-active .sc-chip__count {
    background: rgba(255, 255, 255, .22);
}

.sc-result-group {
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.sc-result-group__title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--sc-line);
}

.sc-result-group__count {
    font-size: .8rem;
    font-weight: 600;
    color: var(--sc-muted);
    background: var(--sc-surface-2);
    border-radius: 50px;
    padding: .15rem .6rem;
}

/* Type badge on the card image */
.sc-result-kind {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 2;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(10, 36, 99, .92);
    padding: .22rem .55rem;
    border-radius: 50px;
}

.sc-result-meta {
    font-size: .82rem;
    font-weight: 600;
    color: var(--sc-muted);
    margin: 0;
}

.sc-search-empty {
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r);
    padding: clamp(1.25rem, 4vw, 2rem);
    color: var(--sc-ink-2);
}

.sc-search-empty p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   16. Mobile quick-contact bar
   Phone-first actions pinned to the bottom of the viewport so the contact
   details are always one tap away. Hidden on desktop, where the header and
   footer already carry them.
   -------------------------------------------------------------------------- */

.sc-mobile-bar {
    display: none;
}

@media (max-width: 767.98px) {
    .sc-mobile-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        background: linear-gradient(to right, #020024, #090979);
        border-top: 1px solid rgba(255, 255, 255, .16);
        box-shadow: 0 -2px 12px rgba(15, 23, 42, .22);
        /* Clears the iPhone home indicator */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .sc-mobile-bar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .18rem;
        min-height: 58px;
        padding: .5rem .35rem;
        color: #e8eefc;
        font-size: .75rem;
        font-weight: 600;
        line-height: 1.1;
        text-decoration: none;
        text-align: center;
        border-right: 1px solid rgba(255, 255, 255, .12);
    }

    .sc-mobile-bar a:last-child {
        border-right: 0;
    }

    .sc-mobile-bar a i {
        font-size: 1.05rem;
    }

    .sc-mobile-bar a:active {
        background: rgba(255, 255, 255, .12);
    }

    .sc-mobile-bar__wa,
    .sc-mobile-bar__wa i {
        color: #52e08a;
    }

    /* Reserve room so the bar never covers the end of the page.
       The spacer goes on .footer rather than on body: body carries a
       height/min-height rule from style.css, and with border-box its
       bottom padding is absorbed instead of extending the document.
       Padding (not margin) keeps the strip inside the dark footer. */
    .footer {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    /* The bar already carries WhatsApp and the page top; the two floating
       bubbles would sit on top of it. */
    .whatsapp-btn,
    .whatsapp-float {
        display: none !important;
    }

    .back-to-top,
    .scroll-top,
    #scrollTop {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }

    /* The FAB no longer overlaps the copyright, so drop the reserved gutter */
    .footer-bottom .bottom-content {
        padding-right: 0;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   17. Detail pages (course / service / sub-service / product)
   One layout shared by all four: article beside a sticky sidebar on desktop,
   which stacks into cards under the content on phones and tablets.
   -------------------------------------------------------------------------- */

.sc-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
}

@media (max-width: 991.98px) {
    .sc-detail {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sc-detail__main {
    min-width: 0;
}

/* --- hero image --- */

.sc-detail__media {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 400px;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--sc-r);
    overflow: hidden;
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-line);
}

/* When the real picture is missing we fall back to the wordmark. A 16:9
   band of logo dominates the page, so keep the placeholder short. */
.sc-detail__media:has(.img-fallback) {
    aspect-ratio: 3 / 1;
    max-height: 200px;
}

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

/* A letterboxed wordmark placeholder shouldn't dominate the page */
.sc-detail__media .img-fallback {
    object-fit: contain !important;
    padding: clamp(1.25rem, 5vw, 3rem) !important;
}

.sc-detail__eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sc-blue-600);
    margin-bottom: .5rem;
}

.sc-detail__title {
    font-size: clamp(1.6rem, 1.15rem + 2.1vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 .75rem;
}

.sc-detail__lead {
    font-size: clamp(1rem, .97rem + .2vw, 1.1rem);
    color: var(--sc-muted);
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

/* --- fact boxes (duration, fee, …) --- */

.sc-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
    margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}

.sc-fact {
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-sm);
    padding: .85rem 1rem;
}

.sc-fact__label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sc-muted);
    margin-bottom: .3rem;
}

.sc-fact__value {
    font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem);
    font-weight: 700;
    color: var(--sc-ink);
    line-height: 1.2;
}

.sc-fact--accent {
    background: var(--sc-blue-100);
    border-color: #cfe2ff;
}

.sc-fact--accent .sc-fact__value {
    color: var(--sc-navy-2);
}

/* --- long-form body --- */

.sc-detail__body {
    color: var(--sc-ink-2);
    font-size: clamp(1rem, .97rem + .18vw, 1.06rem);
    line-height: 1.75;
}

/* This body is left-aligned, so auto-hyphenation (inherited from the
   article rule that softens justified blog copy) only adds noise. */
.sc-detail__body p,
.sc-detail__body li {
    hyphens: none;
}

.sc-detail__body > :first-child {
    margin-top: 0;
}

.sc-detail__body h2,
.sc-detail__body h3,
.sc-detail__body h4 {
    margin-top: 2em;
    margin-bottom: .55em;
    line-height: 1.25;
}

.sc-detail__body h2 {
    font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--sc-line);
}

.sc-detail__body h3 {
    font-size: clamp(1.1rem, 1.02rem + .4vw, 1.3rem);
}

.sc-detail__body p {
    margin-bottom: 1.1em;
}

/* style.css resets every list to list-style:none / padding-left:0, which
   turns article bullet lists into loose unindented lines. Restore them
   inside long-form content only. */
.sc-detail__body ul,
.sc-detail__body ol {
    margin: 0 0 1.1em;
    padding-left: 1.5rem;
}

/* style.css sets list-style-type:none on the <li> itself, which beats any
   value inherited from the <ul>, so the marker has to be restored on the
   list item rather than the list. */
.sc-detail__body ul,
.sc-detail__body ul > li {
    list-style: disc outside;
}

.sc-detail__body ol,
.sc-detail__body ol > li {
    list-style: decimal outside;
}

.sc-detail__body ul ul,
.sc-detail__body ul ul > li {
    list-style: circle outside;
}

.sc-detail__body ul ul {
    margin-bottom: .4em;
}

.sc-detail__body li {
    margin-bottom: .4em;
    display: list-item;
}

.sc-detail__body li::marker {
    color: var(--sc-blue);
}

.sc-detail__body img {
    border-radius: var(--sc-r-sm);
    height: auto;
}

.sc-detail__body a {
    color: var(--sc-blue-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sc-detail__body table {
    display: block;
    width: 100%;
    overflow-x: auto;
}

/* --- keyword chips --- */

.sc-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: clamp(1.5rem, 3vw, 2rem);
    padding-top: clamp(1.25rem, 3vw, 1.75rem);
    border-top: 1px solid var(--sc-line);
}

.sc-detail__tags .custom-badge {
    display: inline-block;
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-line);
    color: var(--sc-ink-2);
    border-radius: 50px;
    padding: .3rem .75rem;
    font-size: .8rem;
    font-weight: 600;
}

/* --- sidebar --- */

.sc-side {
    display: grid;
    gap: 1.25rem;
    position: sticky;
    /* clears the sticky/fixed navbar */
    top: calc(var(--sc-nav-h, 69px) + 1rem);
}

@media (max-width: 991.98px) {
    .sc-side {
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        align-items: start;
    }
}

.sc-side-card {
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r);
    box-shadow: var(--sc-shadow-1);
    padding: clamp(1rem, 2.5vw, 1.35rem);
}

.sc-side-card__title {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sc-muted);
    margin: 0 0 .9rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--sc-line);
}

/* --- related items list --- */

.sc-related {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .3rem;
}

.sc-related a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem;
    margin: 0 -.5rem;
    border-radius: var(--sc-r-sm);
    color: var(--sc-ink);
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.sc-related a:hover {
    background: var(--sc-surface-2);
    color: var(--sc-blue-600);
}

.sc-related a.is-current {
    background: var(--sc-blue-100);
    color: var(--sc-navy-2);
}

.sc-related__thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-line);
}

/* Title + date stacked beside the thumbnail */
.sc-related__text {
    display: block;
    min-width: 0;
}

.sc-related__meta {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--sc-muted);
}

.sc-related__thumb.img-fallback {
    object-fit: contain !important;
    padding: 3px !important;
}

/* Plain link list (sub-services) — no thumbnails */
.sc-related--plain a {
    padding-block: .6rem;
    min-height: 44px;
}

/* --- CTA card --- */

.sc-cta-card {
    background: linear-gradient(135deg, #020024, #090979);
    border: 0;
    color: #fff;
}

.sc-cta-card .sc-side-card__title {
    color: rgba(255, 255, 255, .72);
    border-bottom-color: rgba(255, 255, 255, .18);
}

.sc-cta-card p {
    color: rgba(255, 255, 255, .85);
    font-size: .92rem;
    margin-bottom: 1rem;
}

.sc-cta-actions {
    display: grid;
    gap: .5rem;
}

.sc-cta-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding: .6rem 1rem;
    border-radius: var(--sc-r-sm);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: transform .18s ease, filter .18s ease;
}

.sc-cta-actions a:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.sc-cta-actions .is-primary {
    background: var(--sc-blue);
    color: #fff;
}

.sc-cta-actions .is-wa {
    background: #25d366;
    color: #04331a;
}

.sc-cta-actions .is-ghost {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
}

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */

@media print {
    .navbar,
    .footer,
    .whatsapp-float,
    .scroll-top,
    #scrollTop,
    .sc-skip-link {
        display: none !important;
    }

    body {
        color: #000;
    }
}