/* About page hero background image: keep on mobile/tablet, hide on desktop */
@media (min-width: 992px) {
    .about-hero-bg {
        background-image: none !important;
    }
}

/* Homepage hero: shrink height and font size on tablet/mobile so the
   background image isn't forced to crop/zoom and text isn't oversized */
@media (max-width: 991.98px) {
    .hero-wrap:not(.hero-wrap-2) {
        height: 650px !important;
    }
    .hero-wrap:not(.hero-wrap-2) .slider-text {
        height: 650px !important;
    }
    .hero-wrap:not(.hero-wrap-2) .slider-text h1 {
        font-size: 42px !important;
    }
}

@media (max-width: 575.98px) {
    .hero-wrap:not(.hero-wrap-2) {
        height: 520px !important;
        background-position: center center !important;
    }
    .hero-wrap:not(.hero-wrap-2) .slider-text {
        height: 520px !important;
    }
    .hero-wrap:not(.hero-wrap-2) .slider-text h1 {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }
    .hero-wrap:not(.hero-wrap-2) .slider-text p {
        font-size: 15px !important;
    }
}

/* Decorative lines flanking the "12-Week" heading: hide on mobile */
@media (max-width: 575.98px) {
    .hero-lines {
        display: none !important;
    }
}

/* Site title in navbar: shrink on mobile */
@media (max-width: 575.98px) {
    .navbar-brand {
        font-size: 10px !important;
    }
}

/* Sub-page hero (hero-wrap-2, e.g. about.html): shrink heading on mobile.
   The banner itself is a fixed 400px tall, so 60px text wraps into an
   oversized block on small screens. */
@media (max-width: 767.98px) {
    .hero-wrap.hero-wrap-2 .slider-text h1 {
        font-size: 32px !important;
    }
}

@media (max-width: 575.98px) {
    .hero-wrap.hero-wrap-2 .slider-text h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    .hero-wrap.hero-wrap-2 .slider-text .breadcrumbs {
        font-size: 12px !important;
    }
}

/* "Happy Clients" style white heading: the white variant is more specific
   than the base mobile rule, so it was overriding it and staying at 40px
   on mobile. Restore the shrink. */
@media (max-width: 767.98px) {
    .heading-section.heading-section-white h2 {
        font-size: 28px !important;
    }
}

/* Core Values: large photo card with bold title, icon + description underneath */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 16px;
}
.value-card {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    aspect-ratio: 1 / 1.05;
    padding: 28px 20px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.value-card h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.value-desc {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 22px;
    padding: 0 6px;
    text-align: left;
}
.value-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e3eff8;
    color: #2f7fb5;
}
.value-icon svg {
    width: 26px;
    height: 26px;
}
.value-desc p {
    margin: 0;
    color: #2f4858;
    font-size: 17px;
    line-height: 1.6;
}
@media (max-width: 991.98px) {
    .values-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        gap: 36px;
    }
}

/* Feature/photo cards (Brave/Hope/Guidance, and the about-page 1/2/3 cards):
   shrink on mobile so the section isn't excessively tall */
@media (max-width: 575.98px) {
    .feature-card {
        min-height: 320px !important;
    }
    .feature-card-spacer {
        height: 170px !important;
    }
}

/* Top contact bar (Telegram/email + social icons): the two columns stack
   left-aligned with no spacing on mobile, which looks messy. Center them
   and add breathing room between the stacked rows. */
@media (max-width: 767.98px) {
    .wrap .row {
        text-align: center;
    }
    .wrap .col-md-6 {
        justify-content: center !important;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .wrap .phone {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        font-size: 13px;
    }
    .wrap .social-media {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .wrap .social-media p {
        justify-content: center;
    }
}

/* Footer: smaller text and icons on mobile */
@media (max-width: 767.98px) {
    .ftco-footer {
        font-size: 12px;
    }
    .ftco-footer .ftco-footer-widget h2 {
        font-size: 13px;
    }
    .ftco-footer-social li a {
        height: 35px;
        width: 35px;
    }
    .block-23 ul li .icon {
        width: 25px;
        font-size: 12px;
    }
}
/* Course / Core Values intro section: the 40px flex gap, the default h2
   margin and the stray <br> stack up into huge vertical gaps on phones. */
@media (max-width: 767.98px) {
    .values-section {
        --section-gap: 16px;
    }
    .values-section h2 {
        margin-bottom: 0;
    }
    .values-section br {
        display: none;
    }
}

/* Brand-blue separator line (e.g. above the Core Values block). */
.section-divider {
    width: min(320px, 70%);
    margin-left: auto;
    margin-right: auto;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(24, 175, 220, 0) 0%, #18afdc 50%, rgba(24, 175, 220, 0) 100%);
}

/* The section spaces its children with a flex gap, so this block cancels the
   gap out with negative margins to land on exactly 20px above / 10px below. */
.values-section {
    --section-gap: 20px;
    gap: var(--section-gap) !important;
}
.core-values-block {
    margin-top: calc(20px - var(--section-gap));
    margin-bottom: calc(10px - var(--section-gap));
}
.core-values-block h2 {
    margin: 0;
}

/* "Does Any of This Sound Familiar?" — the questions read as a checklist the
   parent ticks off in their head, so each one gets a soft card and a check. */
.familiar-list {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.familiar-list li {
    position: relative;
    padding: 14px 18px 14px 54px;
    background: #f1f9fc;
    border-left: 3px solid #18afdc;
    border-radius: 10px;
    color: #2d3b43;
    font-size: clamp(0.95rem, 2.2vw, 1.05rem);
    line-height: 1.55;
}
.familiar-list li::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 15px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #18afdc;
}
.familiar-list li::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 19px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* The closing "no challenges" line is aspirational, not a struggle — set it
   apart from the list in the site's gold. */
.familiar-callout {
    margin: 36px auto 0;
    padding: 0 10px;
    max-width: 720px;
    color: var(--heading-color, #2c6e8f);
    font-size: clamp(1.1rem, 2.6vw, 1.35rem);
    font-style: italic;
    text-align: center;
    line-height: 1.6;
}
.familiar-callout::before {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin: 0 auto 20px;
    background: #4aa8d8;
    border-radius: 2px;
}
.familiar-callout strong {
    font-style: normal;
    background: linear-gradient(transparent 62%, rgba(74, 168, 216, 0.3) 62%);
    padding: 0 2px;
}

/* "You Are Not Alone" reassurance panel, in the site's dark blues. */
.not-alone {
    margin-top: 40px;
    padding: clamp(24px, 5vw, 40px);
    background: linear-gradient(160deg, #0b7190 0%, #044b60 100%);
    border-radius: 14px;
    text-align: center;
}
.not-alone h2 {
    color: #fff;
    margin-bottom: 16px;
}
.not-alone p {
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 14px;
}
.not-alone p:last-child {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .familiar-list li {
        padding: 12px 14px 12px 46px;
    }
    .familiar-list li::before {
        left: 12px;
        top: 13px;
    }
    .familiar-list li::after {
        left: 20px;
        top: 17px;
    }
}

/* ---------------------------------------------------------------------------
   Section headings — one shared style so every section title on the page
   matches. Change --heading-color here to recolor them all.
   --------------------------------------------------------------------------- */
:root {
    --heading-color: #0b7190;
}
.section-heading {
    margin: 0 0 20px;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--heading-color);
    text-align: center;
}
.section-tagline {
    margin: 0 0 8px;
    font-size: clamp(1.2rem, 3.4vw, 1.6rem);
    font-weight: 500;
    line-height: 1.35;
    color: #2d3b43;
    text-align: center;
}
.section-subtitle {
    margin: 0;
    font-size: clamp(1rem, 2.6vw, 1.15rem);
    line-height: 1.6;
    color: #5b6b73;
    text-align: center;
}
.section-heading + .section-subtitle {
    margin-top: -8px;
}

/* In the flex-gap sections the gap does the spacing, not the heading margin. */
.values-section .section-heading {
    margin-bottom: 0;
}

/* Divider between Our Services and the (country-specific) booking card:
   equal space on both sides. The theme's 6em section padding, the card's top
   padding and the last tab button's margin are zeroed so the divider's own
   margins are the whole gap. */
.ftco-section.services-section {
    padding-bottom: 0;
}
/* Doubled class: Bootstrap's .p-4 is also !important and loads later. */
.booking-card.p-4 {
    padding-top: 0 !important;
}
.services-section .tabulation .nav-pills .nav-item:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Our Services — tab buttons + explanation panel
   --------------------------------------------------------------------------- */
.services-section .tabulation .nav-pills .nav-item .nav-link {
    position: relative;
    padding: 18px 50px 18px 22px !important; /* beats Bootstrap's .py-4 */
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    color: #1f3a45;
    background: #fff;
    border: 1px solid #d6e7ee;
    border-radius: 10px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Chevron: points right toward the panel on desktop, down on mobile. */
.services-section .tabulation .nav-pills .nav-item .nav-link::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 50%;
    width: 9px;
    height: 9px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: translateY(-50%) rotate(-45deg);
    opacity: 0.5;
}
.services-section .tabulation .nav-pills .nav-item .nav-link:hover {
    color: #0b7190;
    border-color: #18afdc;
}
.services-section .tabulation .nav-pills .nav-item .nav-link.active {
    color: #fff;
    background: #18afdc;
    border-color: #18afdc;
    box-shadow: 0 8px 18px rgba(24, 175, 220, 0.25);
}
.services-section .tabulation .nav-pills .nav-item .nav-link.active::after {
    opacity: 1;
}

.service-panel {
    height: 100%;
    padding: clamp(22px, 4vw, 36px);
    background: #f6fbfd;
    border: 1px solid #dcecf2;
    border-radius: 14px;
}
.services-section .tabulation .tab-content .service-title {
    margin: 0 0 12px;
    font-size: clamp(1.35rem, 3.5vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--heading-color);
}
/* Quick facts under the title. */
.service-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}
.service-badges li {
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #0b7190;
    background: #dff1f8;
    border-radius: 999px;
}
.service-panel p {
    margin: 0 0 14px;
    font-size: clamp(0.98rem, 2.4vw, 1.05rem);
    line-height: 1.7;
    color: #4a5a62;
}
.service-panel > :last-child {
    margin-bottom: 0;
}
.service-panel .service-list-label {
    margin-top: 20px;
    margin-bottom: 12px;
    font-weight: 600;
    color: #2d3b43;
}
/* Topics covered, as pills. */
.service-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}
.service-topics li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    font-size: 15px;
    font-weight: 500;
    color: #1f3a45;
    background: #fff;
    border: 1px solid #cfe6ee;
    border-radius: 999px;
}
.service-topics li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #18afdc;
}

@media (max-width: 767.98px) {
    .services-section .tabulation .nav-pills .nav-item .nav-link {
        padding: 14px 46px 14px 18px !important;
        font-size: 16px;
    }
    .services-section .tabulation .nav-pills .nav-item .nav-link::after {
        right: 20px;
        transform: translateY(-70%) rotate(45deg);
    }
    .services-section .tabulation .tab-content {
        margin-top: 16px;
    }
    .service-topics li {
        font-size: 14px;
    }
}

/* Top menu links (Home / About Me): bold */
#ftco-nav .navbar-nav .nav-link {
    font-weight: 700 !important;
}

/* "How I Can Support You" label above the service tabs: small caps with a short underline */
.support-label {
    margin: 0 0 24px;
    padding-bottom: 14px;
    position: relative;
    color: #fed556;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
}
.support-label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    background: #fed556;
    border-radius: 2px;
}

/* Header (top contact bar + logo/menu bar): the home page also loads Tailwind,
   which changes the header's width, font and link colour. These rules give the
   About page the same look without loading Tailwind there. */
.wrap,
#ftco-navbar {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    line-height: 1.5;
}
#ftco-navbar .navbar-brand {
    line-height: 1.5;
}
#ftco-navbar .navbar-brand:not(:hover),
#ftco-navbar .nav-link:not(:hover) {
    color: #808080;
}
#ftco-navbar img {
    display: block;
    max-width: 100%;
}
.wrap > .container,
#ftco-navbar > .container {
    width: 100%;
    max-width: none;
}
@media (min-width: 640px) {
    .wrap > .container, #ftco-navbar > .container { max-width: 640px; }
}
@media (min-width: 768px) {
    .wrap > .container, #ftco-navbar > .container { max-width: 768px; }
}
@media (min-width: 1024px) {
    .wrap > .container, #ftco-navbar > .container { max-width: 1024px; }
}
@media (min-width: 1280px) {
    .wrap > .container, #ftco-navbar > .container { max-width: 1280px; }
}
@media (min-width: 1536px) {
    .wrap > .container, #ftco-navbar > .container { max-width: 1536px; }
}

/* ---------------------------------------------------------------------------
   Equal spacing between sections: every divider line gets the same space
   above and below (--section-space). The sections' own inline 5% margins and
   the theme's .ftco-section padding are zeroed so the divider sets the gap.
   --------------------------------------------------------------------------- */
:root {
    --section-space: 56px;
}
@media (max-width: 767.98px) {
    :root {
        --section-space: 32px;
    }
}
.section-divider {
    margin-top: var(--section-space);
    margin-bottom: var(--section-space);
}
/* Inside .values-section the flex gap already adds space on both sides. */
.values-section > .section-divider {
    margin-top: calc(var(--section-space) - var(--section-gap));
    margin-bottom: calc(var(--section-space) - var(--section-gap));
}
.values-section .core-values-block {
    margin-top: 0;
}
.values-section,
.familiar-section-wrap {
    margin-bottom: 0 !important;
}
.familiar-section-wrap {
    margin-top: 0 !important;
}
.ftco-section.services-section {
    padding-top: 0;
}