/*
Theme Name: Transformation International
Theme URI: https://transformation.com.pk
Author: Boundless Technologies
Description: Custom theme for Transformation International Wellness Clinic. Pages are hand-built templates (page-{slug}.php); activating the theme creates the pages, front page and permalinks.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: transformation
*/
/* TRANSFORMATION INTERNATIONAL WELLNESS CLINIC */

/* Font Awesome's own CSS declares font-display:block on its icon fonts,
   meaning the browser hides icon glyphs (and, if held up behind these in a
   swap group, adjacent text) for up to 3s waiting on the font instead of
   showing anything -- the opposite of what font-display is for. Same
   font-family/weight/src, just swap instead of block; the last @font-face
   matching that combination wins, and this loads after Font Awesome's own
   stylesheet in the cascade. */
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2) format("woff2");
}
@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2) format("woff2");
}

/* Several templates put a Bootstrap .g-5 row (48px gutter) directly inside
   .container (24px gutter); the row's larger negative margin then bleeds a
   few px past the viewport edge on mobile. Clip at the root instead of
   auditing every template — nothing on this site relies on horizontal
   overflow being visible (scroll containers like .pricing-table-wrapper
   still scroll internally; fixed elements are unaffected).
   html only, not body: overflow-x on body forces overflow-y:auto on body
   too, which turns it into its own scrolling box and breaks position:sticky
   for every descendant (the hero's scroll-scrubbed sequence included) since
   sticky then has nowhere consistent to pin against. */
html {
    overflow-x: hidden;
}


/* hero section */

/* Font and Base Settings */
/* Bootstrap Icons + Fredoka now loaded as <link> tags in header.php instead
   of @import here -- an @import blocks this whole stylesheet on fetching
   and parsing them first, where a <link> the parser can discover up front
   loads in parallel with everything else. */

/* Rounded, friendly display font for all headings — matches the playful clinic branding */
h1, h2, h3, h4, h5 {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    font-weight: 600;
}

.stage {
  height: 520vh;
  padding: 0px !important;
  position: relative;
}
.nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(13 110 253 / 0%);
}
.stage__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 580px;
  overflow: hidden;
  isolation: isolate;
  background: #05070c;
}


.stage__sequence {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: saturate(1.14) contrast(1.03) brightness(1.16);
  transform: scale(var(--sequence-scale, 1.08));
  transform-origin: center;
  will-change: transform, filter;
}

.stage__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 7, 12, 0.46), rgba(5, 7, 12, 0.05) 48%, rgba(5, 7, 12, 0.38)),
    linear-gradient(180deg, rgba(5, 7, 12, 0.2), transparent 42%, rgba(5, 7, 12, 0.32));
  pointer-events: none;
}

.stage__grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: var(--grid-opacity, 0.24);
  background-image:
    linear-gradient(rgba(247, 251, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 251, 255, 0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 45%, black 0, transparent 68%);
  transform: translate3d(0, var(--grid-shift, 0px), 0);
  pointer-events: none;
}

.stage__signal {
  position: absolute;
  z-index: 3;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(transparent, var(--aqua), transparent);
  opacity: var(--signal-opacity, 0.55);
  transform: scaleY(var(--signal-scale, 0.32));
  transform-origin: center;
  pointer-events: none;
}

.stage__signal::before,
.stage__signal::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(72, 245, 217, 0.72);
  border-radius: 50%;
  left: -6px;
  opacity: 0.74;
}

.stage__signal::before {
  top: 22%;
}

.stage__signal::after {
  bottom: 18%;
}

.stage__signal--left {
  left: clamp(18px, 5vw, 72px);
}

.stage__signal--right {
  right: clamp(18px, 5vw, 72px);
  background: linear-gradient(transparent, var(--rose), transparent);
}

.stage__signal--right::before,
.stage__signal--right::after {
  border-color: rgba(255, 111, 145, 0.72);
}

.bio-photo-wrapper1 {
    border-radius: 124px 24px 24px 24px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}
.bio-photo-wrapper1 img {
    width: 100%;
    display: block;
}




.progress-shell {
  position: fixed;
  z-index: 6;
  left: clamp(18px, 4vw, 42px);
  right: clamp(18px, 4vw, 42px);
  bottom: clamp(18px, 4vw, 32px);
  height: 2px;
  overflow: hidden;
  background: rgba(247, 251, 255, 0.18);
  transform: translateZ(0);
}

.progress-shell__bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--aqua), var(--blue), var(--rose));
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}

.motion-cue {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: clamp(34px, 7vw, 64px);
  width: 30px;
  height: 48px;
  border: 1px solid rgba(247, 251, 255, 0.5);
  border-radius: 999px;
  opacity: var(--cue-opacity, 0.82);
  transform: translateX(-50%);
  pointer-events: none;
}

.motion-cue span {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 4px;
  height: 9px;
  border-radius: 999px;
  background: var(--ink);
  transform: translateX(-50%);
  animation: cue-drift 1.45s ease-in-out infinite;
}

@keyframes cue-drift {
  0%,
  100% {
    opacity: 0.3;
    transform: translate3d(-50%, 0, 0);
  }

  50% {
    opacity: 1;
    transform: translate3d(-50%, 14px, 0);
  }
}

/* Mobile: the scroll-scrubbed 287-frame sequence (each frame fetched from
   demo.boundlesstechnologies.net) is replaced by one locally-hosted static
   frame. No scroll-jacking, no external requests, no per-frame canvas
   redraws — matches the "mobile scroll should be static" recommendation.
   script.js mirrors this same 767px check and skips preloadSequence()/the
   scrub loop entirely on mobile, so the canvas is never drawn into either. */
@media (max-width: 767px) {
  .stage {
    height: auto;
  }

  .stage__sticky {
    position: relative;
    top: auto;
    height: 60vh;
    min-height: 420px;
    background: #05070c url(image/hero-mobile.jpg) no-repeat center center;
    background-size: cover;
  }

  .stage__grid {
    background-size: 48px 48px;
  }

  .stage__sequence,
  .progress-shell,
  .motion-cue {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-cue span {
    animation: none;
  }
}
    
/* Consistent vertical rhythm across all content sections */
section {
    padding-top: 100px;
    padding-bottom: 100px;
}
.gap-10 {
    gap: 30px !important;
}

/* ===== GLOBAL ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(6deg); }
    50% { transform: translateY(-8px) rotate(6deg); }
}

@keyframes ripple-animation {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(30);
        opacity: 0;
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* Scroll Animation Classes */
.scroll-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile scroll should be static and immediate — entrance fades/translates
   on every section + card (service/fact/member/video/testimonial) add scroll
   jank and CLS on small screens with no real UX payoff. Content renders
   fully visible from first paint instead of waiting on the IntersectionObserver. */
@media (max-width: 768px) {
    .scroll-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Image loaded animation */
img[data-src] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img.loaded {
    opacity: 1;
}

.hero-section {
    position: relative;
    width: 100%;
}

/* Dark Overlay for Header Readability */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Fixed positioning lives on this wrapper (not on .navbar itself) so the
   utility bar and the nav row are plain block siblings that stack on top of
   each other naturally — putting both inside .navbar would fight Bootstrap's
   .navbar-expand-lg{flex-wrap:nowrap} rule, which forces everything onto one row. */
.site-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.navbar {
    z-index: 1000;
    transition: background-color 0.3s ease, padding 0.3s ease;
}

.navbar.scrolled {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

/* Logo Sizing */
.site-logo {
    max-height: 55px;
    width: auto;
    object-fit: contain;
    transition: max-height 0.3s ease;
}
.container1 {
    padding: 0 25px;
}
.navbar.scrolled .site-logo {
    max-height: 45px;
}

/* Navigation Links Styling — Inter (loaded site-wide) for a crisp, tight
   UI look; a hair under 1rem with negative tracking so 9 items sit
   comfortably on one row. */
.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.96rem;
    font-weight: 600;
    letter-spacing: -0.011em;
    padding: 0.5rem 1rem !important;
    transition: all 0.3s ease;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--brand-blue) !important;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background-color: var(--brand-blue);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: #ffffff !important;
}

/* Grow the underline on hover, and keep it out while a dropdown is open
   (.show) so the parent item reads as "engaged". */
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link.show::after {
    transform: scaleX(1);
}

/* =========================================
   Dropdown Menu Styling — light floating card (icons + labels on dark text),
   consistent across every nav dropdown (About Us, Psychotherapy, Child Rehab
   mega menu, Counseling, Training).
   ========================================= */
.dropdown-menu {
    background-color: #ffffff;
    border: none;
    border-radius: 16px;
    padding: 10px;
    font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Fixed width so About Us / Psychotherapy / Counseling / Training all
       open at the same size regardless of their content length — the mega
       menu and flyout submenus override this with their own width rules. */
    width: 270px;
    box-shadow: 0 20px 45px rgba(15, 23, 55, 0.18);
    animation: slideDown 0.25s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #2b2f66;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: 9px 10px;
    border-radius: 10px;
    transition: all 0.2s ease;
    /* Override Bootstrap's default nowrap — with a fixed dropdown width,
       longer labels need to wrap instead of overflowing the panel. */
    white-space: normal;
    line-height: 1.35;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #e4f3fb;
    color: #0090a1;
    transform: translateX(3px);
}

/* Submenu parent rows highlight (and stay lit while the cursor is out in
   the flyout) but don't slide — a translate here would widen the hover gap
   to a left-opening flyout enough to drop it. */
.dropdown-submenu-toggle:hover,
.dropdown-submenu-toggle:focus,
.dropdown-submenu:hover > .dropdown-submenu-toggle {
    background-color: #e4f3fb;
    color: #0090a1;
    transform: none;
}

/* Small gradient icon chip in front of a dropdown link's label */
.dropdown-item .item-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand-blue), #23275c);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* The chip lifts and brightens with its row */
.dropdown-item:hover .item-icon,
.dropdown-item:focus .item-icon,
.dropdown-submenu:hover > .dropdown-submenu-toggle .item-icon {
    background: linear-gradient(135deg, #12cfe6, #2f7fd6);
    transform: scale(1.08);
    box-shadow: 0 4px 11px rgba(0, 150, 170, 0.32);
}


/* =========================================
   Nested "submenu" flyout — e.g. Counseling > Career Counseling, or
   Counseling > Out Patient Services, or Training > Clinical. On desktop it
   opens as a side flyout on hover; on mobile (no hover) it's just always
   shown inline under its parent, indented.
   ========================================= */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

/* The icon+label are wrapped in an inner <span> (so justify-content:space-between
   on the toggle only pushes the chevron to the edge, not the icon away from
   its own label) — that inner span needs its own flex+gap or the icon and
   text sit with no space between them at all. */
.dropdown-submenu-toggle > span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.submenu-caret {
    font-size: 0.55rem;
    opacity: 0.45;
    margin-left: 10px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Caret sharpens and nudges toward the flyout it opens */
.dropdown-submenu:hover > .dropdown-submenu-toggle .submenu-caret,
.dropdown-submenu-toggle:hover .submenu-caret,
.dropdown-submenu-toggle:focus .submenu-caret {
    opacity: 0.9;
    transform: translateX(3px);
}

@media (min-width: 1400px) {
    .dropdown-submenu .submenu-panel {
        display: none;
        position: absolute;
        top: -10px;
        left: 100%;
        margin-left: 6px;
        min-width: 230px;
    }

    .dropdown-submenu:hover > .submenu-panel {
        display: block;
    }

    /* Flips to open on the left instead — used by dropdowns positioned near
       the right edge of the navbar, where a right-opening flyout would run
       off the viewport (e.g. Training > Clinical). */
    .submenu-panel-left {
        left: auto;
        right: 100%;
        margin-left: 0;
        margin-right: 6px;
    }
}

@media (max-width: 1399px) {
    .submenu-panel {
        position: static;
        display: block;
        box-shadow: none;
        margin: 2px 0 6px 1.6rem;
        padding-left: 0.5rem;
        border-left: 2px solid #e2e5ef;
    }

    .submenu-caret {
        display: none;
    }
}

/* =========================================
   Main navbar row padding (moved off the .navbar element itself so the
   utility bar can sit above it cleanly)
   ========================================= */
.navbar-main-row {
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: padding 0.3s ease;
}

.navbar.scrolled .navbar-main-row {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.site-header-fixed.scrolled .top-utility-bar {
    display: none;
}

/* =========================================
   Mega Menu (Child Rehab — 24 services grouped into 4 categories + a
   spotlight panel, styled after a reference clinic site's "Services" mega menu)
   ========================================= */
@media (min-width: 1400px) {
    .nav-item.mega-menu-parent {
        position: static;
    }

    .mega-menu-panel {
        top:65px !important;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: min(1180px, calc(100% - clamp(2rem, 8vw, 6rem)));
        padding: 1.75rem;
        max-height: 80vh;
        overflow-y: auto;
        grid-template-columns: repeat(4, 1fr) 260px;
        column-gap: 1.75rem;
    }

    /* Bootstrap's own .dropdown-menu.show sets display:block — this beats it
       (same specificity, declared later) so the open panel is a grid, not a
       single tall column. Un-shown state still falls through to Bootstrap's
       plain .dropdown-menu{display:none}. */
    .mega-menu-panel.show {
        display: grid;
    }
}

.mega-col-label {
    display: block;
    color: #6b7fa8;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.9px;
    font-weight: 700;
    margin: 0 0 8px 2px;
}

.mega-menu-panel .dropdown-item {
    gap: 10px;
    font-size: 13.75px;
    font-weight: 500;
    line-height: 1.35;
    padding: 7px 8px;
}

.mega-menu-panel .dropdown-item i {
    flex: 0 0 14px;
    font-size: 0.75rem;
    color: var(--brand-blue);
    transition: transform 0.2s ease, color 0.2s ease;
}

.mega-menu-panel .dropdown-item:hover i,
.mega-menu-panel .dropdown-item:focus i {
    color: #0090a1;
    transform: scale(1.18);
}

/* Spotlight card — the 5th column, highlighting one real flagship service */
.mega-featured {
    grid-row: 1 / -1;
    background: linear-gradient(160deg, #1a223f 0%, #23275c 100%);
    border-radius: 14px;
    padding: 22px 20px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
}

.mega-featured-badge {
    display: inline-block;
    align-self: flex-start;
    border: 1px solid rgba(241, 199, 72, 0.6);
    color: #f1c748;
    text-transform: uppercase;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    padding: 4px 10px;
    border-radius: 50px;
    margin-bottom: 12px;
}

.mega-featured h4 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.mega-featured p {
    font-size: 0.8rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 16px;
}

.mega-featured .btn-explore {
    margin-top: auto;
    align-self: flex-start;
}

/* =========================================
   Top Utility Bar (hours / address / email / phone / social) — sits above
   the main navbar row, styled after a reference clinic site's header strip.
   ========================================= */
.top-utility-bar {
    background-color: #05070c;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.76rem;
    padding: 8px 0;
    position: relative;
    z-index: 1001;
}

.top-utility-bar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.top-utility-bar .utility-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.utility-hours-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(0, 188, 212, 0.35);
    border-radius: 50px;
    padding: 3px 12px;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.85);
}

.utility-hours-pill i {
    color: var(--brand-blue);
    font-size: 0.7rem;
}

.top-utility-bar .utility-address {
    opacity: 0.75;
    white-space: nowrap;
}

.top-utility-bar .utility-contacts {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.top-utility-bar .utility-contacts a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.top-utility-bar .utility-contacts a:hover {
    color: var(--brand-blue);
}

.top-utility-bar .utility-contacts i {
    color: var(--brand-blue);
    margin-right: 5px;
}

.top-utility-bar .utility-social {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-utility-bar .utility-social a {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    background-color: rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    transition: all 0.25s ease;
}

.top-utility-bar .utility-social a:hover {
    background-color: var(--brand-blue);
    color: #ffffff;
    transform: translateY(-2px);
}

@media (max-width: 1399px) {
    .top-utility-bar {
        display: none;
    }
}

/* Stacked "Call Us" block in the main navbar — circular icon + two-line text */
.call-us-block {
    color: #ffffff;
    transition: opacity 0.2s ease;
}

.call-us-block:hover {
    opacity: 0.85;
}

.call-us-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 188, 212, 0.15);
    border: 1px solid rgba(0, 188, 212, 0.35);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.call-us-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.call-us-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.call-us-number {
    font-size: 0.92rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.2px;
}

/* Below xxl the "CALL US / number" text doesn't fit next to the pill button
   in the collapsed menu's action row — keep just the tappable icon (still a
   tel: link) and let the button have the room. */
@media (max-width: 1399px) {
    .call-us-text {
        display: none;
    }
    /* Styled for the dark desktop header by default (white icon on a faint
       cyan ring) — needs real contrast against the white drawer instead. */
    .call-us-icon {
        width: 36px;
        height: 36px;
        background-color: rgba(30, 73, 111, 0.1);
        border-color: rgba(30, 73, 111, 0.3);
        color: var(--brand-blue);
    }
}

/* Nav "Book an Appointment" CTA — renamed from .btn-appointment, which was
   also (accidentally) reused by the form submit buttons further down this
   file ("Turquoise Submit Button"); same-specificity rules meant whichever
   was declared last in the file silently won site-wide. Split into its own
   class so this nav CTA reliably renders in the brand blue. */
.btn-appointment-nav {
    background-color: var(--brand-blue);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border-radius: 50px;
    border: none;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(30, 73, 111, 0.35);
    position: relative;
    overflow: hidden;
}

.btn-appointment-nav:hover {
    background-color: var(--brand-blue-dark);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(30, 73, 111, 0.45);
}

.btn-appointment-nav:active {
    transform: translateY(0);
}

/* Ripple Effect Span Styling */
.btn-appointment-nav .ripple,
.btn-explore-more .ripple,
.btn-explore-dark .ripple,
.btn-appointment-pill .ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}
.mb-15 {
    padding-bottom: 30px !important;
}

.ripple {
    animation: ripple-animation 0.6s ease-out;
}

/* ===== FORM STYLES ===== */
form input,
form textarea,
form select {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

form input:hover,
form textarea:hover,
form select:hover {
    border-color: var(--brand-blue);
    background-color: #f9f9f9;
}

form input:focus,
form textarea:focus,
form select:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
}

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

form [type="submit"] {
    position: relative;
    overflow: hidden;
}

/* Mobile Nav Drawer — slides in from the left over a white panel instead of
   an inline accordion below the navbar row. Bootstrap's Collapse plugin only
   knows how to animate height, so that's neutralised (fixed height, always
   rendered instead of display:none while closed) and the open/close motion
   is done with our own transform transition. See script.js for the
   click-outside-to-close / Escape / body-scroll-lock wiring. */
@media (max-width: 1399px) {
    .navbar-collapse {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: min(300px, 82vw);
        height: 100vh;
        height: 100dvh;
        margin: 0;
        padding: 1.5rem 1.25rem;
        background-color: #ffffff;
        border-radius: 0 16px 16px 0;
        box-shadow: 10px 0 40px rgba(15, 23, 55, 0.25);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1050;
    }

    .navbar-collapse.show {
        transform: translateX(0);
    }

    .tiwc-nav-drawer-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin: 0 0 0.75rem auto;
        border: none;
        border-radius: 50%;
        background-color: #f1f3f9;
        color: #23275c;
        font-size: 0.95rem;
    }

    .navbar-nav .nav-link::after {
        display: none;
    }

    /* Left-align the whole column — text-align:center (Bootstrap's default
       here) fights with the left-border active/hover indicator below. */
    .navbar-nav {
        align-items: stretch;
    }

    .navbar-nav .nav-item,
    .navbar-nav .dropdown {
        width: 100%;
    }

    .navbar-nav .nav-link {
        padding: 0.7rem 0 !important;
        border-left: 3px solid transparent;
        padding-left: 0.85rem !important;
        transition: all 0.3s ease;
        text-align: left;
        width: 100%;
        color: #23275c !important;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link.show {
        border-left-color: var(--brand-blue);
        padding-left: 1.1rem !important;
        color: var(--brand-blue) !important;
    }

    /* Bootstrap's caret on Counseling/Training — nudge to the row's end and
       flip it when the panel is open, so it reads as an expand/collapse
       control instead of decoration. */
    .navbar-nav .dropdown-toggle::after {
        margin-left: auto;
        transition: transform 0.25s ease;
        opacity: 0.5;
    }

    .navbar-nav .dropdown-toggle.show::after {
        transform: rotate(180deg);
        opacity: 1;
    }

    /* The dropdown panels (Counseling, Training, Child Rehab mega menu) float
       as a card on desktop; on the white drawer they just sit inline with a
       faint tint so nested items still read as a group. */
    .navbar-collapse .dropdown-menu,
    .navbar-collapse .mega-menu-panel {
        position: static;
        width: 100%;
        background-color: #f7f8fc;
        border: none;
        box-shadow: none;
        animation: none;
        margin: 4px 0 8px;
        padding: 8px;
    }

    .navbar-collapse .dropdown-item.active,
    .navbar-collapse .dropdown-item:active {
        background-color: var(--brand-blue) !important;
        color: #ffffff;
    }

    .navbar-collapse .mega-col-label {
        color: #8891ab;
    }

    .navbar-collapse > .d-flex {
        border-top: 1px solid #eef0f6;
        padding-top: 1.1rem;
        margin-top: 0.5rem;
    }

    body.tiwc-nav-open {
        overflow: hidden;
    }
}

/* Dim backdrop behind the open drawer; toggled by script.js adding/removing
   this class on <body> in step with Bootstrap's shown/hidden collapse events.
   Must stay BELOW .site-header-fixed's z-index (1030): that element creates
   its own stacking context, so anything inside it (the drawer, z-index 1050
   included) only ever stacks against a backdrop compared at the *header's*
   1030, not the backdrop's own z-index — a backdrop above 1030 would win
   hit-testing over the drawer despite painting looking fine. */
body.tiwc-nav-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 55, 0.5);
    z-index: 1025;
}

/* The floating DONATE tab (z-index 2000) would otherwise float above the
   open drawer and its backdrop. */
body.tiwc-nav-open #tiwc-donate-float {
    display: none;
}

@media (min-width: 1400px) {
    body.tiwc-nav-open::after {
        content: none;
    }
}
/* hero section end  */

/* section-2 */
/* AUTISM SECTION */


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    background-color: #faf9f6;
    scroll-behavior: smooth;
}

/* =========================================
   1. Autism Header Section
   ========================================= */
.autism-header-section {
    background-color: #faf9f6;
}

.autism-title-img-wrapper {
    margin: 0 auto;
    animation: fadeInUp 0.6s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.autism-title-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.autism-title-img-wrapper:hover .autism-title-img {
    transform: scale(1.02);
}

/* Subtitle matching Screenshot 2 */
.autism-subtitle {
    color: #222b62;
    font-size: 3.05rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin-top: 20px;
    margin-bottom: 0;
    line-height: 1.3;
}

/* =========================================
   2. Pink Rehab Center Section
   ========================================= */
.rehab-center-section {
    background: url(image/2.jpg) no-repeat left center;
    background-size: cover;
    padding: 200px 15px;
}

/* Mobile: swap the wide desktop banner for a native-resolution portrait
   crop (subject only, no upscaling) instead of letting the browser
   downscale/reposition the 1280x576 desktop image on the fly. */
@media (max-width: 767px) {
    .rehab-center-section {
        background-image: url(image/2-mobile.jpg);
        background-position: center center;
    }
}

/* Scalloped Cloud Wave Borders */
.scallop-border {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 10;
}

.scallop-top {
    top: 0;
}

.scallop-bottom {
    bottom: 0;
}

.scallop-border svg {
    position: relative;
    display: block;
    width: 100%;
    height: 35px;
    transition: height 0.3s ease;
}

/* Image Placeholder Styling */
.rehab-img-wrapper {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    border-radius: 24px 110px 24px 24px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
    animation: fadeInUp 0.6s ease;
}

.rehab-main-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.rehab-img-wrapper:hover .rehab-main-img {
    transform: scale(1.05);
}

/* Text Content Styling */
.rehab-title {
    color: #f3564d; /* Coral / Pinkish Red */
    font-size: 54px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.rehab-desc-highlight {
    color: #333333;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    margin-top: 15px;
}

.rehab-desc-text {
    color: #555555;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    margin-top: 15px;
}

/* =========================================
   3. Dark Jigsaw Cashless Counter Section
   ========================================= */
.cashless-counter-section {
    min-height: 640px;
    align-items: center;
    background: url(image/3.jpg) no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

/* Mobile: same rationale as .rehab-center-section above — a native-resolution
   portrait crop centered on the child instead of the 1280x499 desktop banner. */
@media (max-width: 767px) {
    .cashless-counter-section {
        background-image: url(image/3-mobile.jpg);
    }
}



/* Center Inset Photo (boy engaging with puzzle wall) */
.cashless-img-wrapper {
    max-width: 300px;
    margin: 0 auto;
    border-radius: 24px 90px 24px 24px;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
    animation: scaleIn 0.6s ease;
}

.cashless-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.cashless-img-wrapper:hover .cashless-img {
    transform: scale(1.05);
}

@media (max-width: 991px) {
    .cashless-img-wrapper {
        max-width: 240px;
    }
}

.cashless-heading {
    color: #ffffff;
    font-size: 62px;
    font-weight: 600;
    line-height: 1.15;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
    letter-spacing: -0.3px;
}

.cashless-experts-text {
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    max-width: 450px;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Rounded Pill Appointment Button */
.btn-appointment-pill {
    background-color: #ffffff;
    color: #0b1e38;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 32px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.3px;
}

.btn-appointment-pill:hover {
    background-color: var(--brand-blue);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 188, 212, 0.4);
}

.btn-appointment-pill:active {
    transform: translateY(-1px);
}

/* =========================================
   Responsive Adjustments
   ========================================= */
@media (max-width: 768px) {
    .autism-subtitle {
        font-size: 1.25rem;
    }

    .rehab-title {
        font-size: 1.8rem;
    }

    .cashless-heading {
        font-size: 2rem;
    }

    .scallop-border svg {
        height: 25px;
    }

    /* Full-bleed "cover" mockup slices go illegible on tall, narrow mobile
       sections (either crop the subject out or zoom in behind the text).
       Show the whole slice as a compact top banner instead, backed by a
       solid fallback color so the text below always has flat contrast. */
    .rehab-center-section {
        background-color: #fdf0ed;
        background-size: contain;
        background-position: top center;
        padding: 190px 15px 40px;
    }

    .cashless-counter-section {
        background-color: #1a223f;
        background-size: contain;
        background-position: top center;
        min-height: 0;
        padding: 190px 15px 40px;
    }

    /* The mobile crop of the rehab photo has no safe blank area for text
       (unlike the desktop banner, which has dedicated negative space) — the
       colorful puzzle-ribbon graphic can land anywhere behind the copy, so
       give the text its own solid card instead of relying on the crop. */
    .rehab-center-section .col-lg-7 {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        padding: 24px 20px;
        margin-top: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    }
}
/* end of autism section */


/* Therapies and services */

body {
    font-family: 'Poppins', sans-serif;
}

/* =========================================
   Therapies & Services Section Base
   ========================================= */
.therapies-services-section {
    background-color: #ffffff;
}

/* Headings Styling */
.therapies-subheading {
    color: #4a6fa5;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.therapies-main-heading {
    color: #1e2654;
    font-size: 54px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

/* =========================================
   Cards Layout & Heights
   ========================================= */
.service-card {
    border: none;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Hover Lift Effect */
.service-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.16);
}

/* Height Variations matching screenshot */
.card-short {
    min-height: 420px;
}

.card-tall {
    min-height: 500px;
}

/* Image Container */
.card-img-wrapper {
    height: 60%;
    overflow: hidden;
    background-color: #e0e0e0; /* Placeholder color when image is loading */
    position: relative;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Subtle image scale on hover */
.service-card:hover .card-img-wrapper img {
    transform: scale(1.08);
}

.service-card .card-body {
    height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1.75rem;
}

.service-card .card-title {
    font-size: 26px;
    line-height: 1.2;
    font-weight: 500;
}

.service-card .card-text {
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.95;
    font-weight: 400;
}

.card-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    opacity: 0.95;
    transition: gap 0.2s ease, opacity 0.2s ease;
}

.card-read-more:hover {
    color: #ffffff;
    gap: 10px;
    opacity: 1;
}

/* =========================================
   Theme Colors — harmonized with the brand
   palette (logo blue + coral), replacing the
   generic yellow/cyan Bootstrap-style blocks.
   ========================================= */
.theme-green {
    background-color: #4f9c74;
}

.theme-yellow {
    background-color: #d99a3d;
}

.theme-cyan {
    background-color: var(--brand-blue);
}

.theme-orange {
    background-color: #d1613a;
}

/* =========================================
   Responsive Adjustments
   ========================================= */
@media (max-width: 991px) {
    .card-short,
    .card-tall {
        min-height: auto;
    }
    
    .card-img-wrapper {
        height: 240px;
    }
    
    .therapies-main-heading {
        font-size: 1.8rem;
    }
}
/* section end  */

/* LETS MEETS OUR SPECIALIST */
section.donation-banner-section {
    margin-top: -30px;
}

/* =========================================
   1. Specialists Section
   ========================================= */
.specialists-section {
    background: url(image/5.png) no-repeat center center;
    background-size: 100% 100%;
    padding: 180px 15px;
    overflow: hidden;
}

/* Doctor Image & Badge Box */
.doctor-card-wrapper {
    max-width: 380px;
    animation: fadeInUp 0.6s ease;
}

.doctor-img-box {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.doctor-main-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}



/* Brand-Blue Title Badge Overlay (was red — now matches the logo's brand blue) */
.doctor-title-badge {
    background-color: var(--brand-blue);
    border-radius: 12px;
    margin-top: -60px;
    position: relative;
    z-index: 5;
    display: inline-block;
    width: 100%;
    box-shadow: 0 8px 20px rgba(30, 73, 111, 0.35);
    transition: all 0.3s ease;
}

.doctor-title-badge:hover {
    box-shadow: 0 12px 28px rgba(30, 73, 111, 0.45);
    transform: translateY(-2px);
}

.dr-name {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.dr-designation {
    font-size: 1.15rem;
    font-weight: 600;
    color: #ffffff;
    opacity: 1;
}

/* Specialist Text Styles */
.specialist-main-title {
    color: #262f71;
    font-size: 51px;
    line-height: 1.1;
    font-weight: 600 !important;
    letter-spacing: 0;
    margin-bottom: 1rem;
}

.highlight-text {
    color: #e57373;
}

.specialist-lead-text {
    color: #9b6b6b;
    font-size: 1.05rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1.6;
}

.specialist-body-text {
    color: #2e2629;
    font-size: 1.05rem;
    line-height: 1.7;
    font-weight: 400;
}

.btn-explore-more {
    background-color: #1a223f; /* Dark Navy Blue Theme Color */
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 28px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    border: none;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(26, 34, 63, 0.3);
}

.btn-explore-more:hover {
    background-color: #f0534c;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(240, 83, 76, 0.4);
}

.btn-explore-more:active {
    transform: translateY(-1px);
}

/* Social Icons Hover Effects */
.social-icons-group {
    display: flex;
    gap: 0.75rem;
}

.social-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    border: 2px solid #ee6158;
    background-color: transparent;
}

.btn-whatsapp { border-color: #25d366; color: #25d366; }
.btn-linkedin { border-color: #0077b5; color: #0077b5; }
.btn-youtube { border-color: #ff0000; color: #ff0000; }

/* Icon Hover State */
.social-btn:hover {
    background-color: currentColor;
    color: #ffffff;
    transform: translateY(-4px) scale(1.15);
}

.btn-whatsapp:hover { background-color: #25d366; }
.btn-linkedin:hover { background-color: #0077b5; }
.btn-youtube:hover { background-color: #ff0000; }


/* =========================================
   2. Dark Blue Donation Banner Section
   ========================================= */
.donation-banner-section {    
    position: relative;
    overflow: hidden;
}

section.donation-banner-section.scroll-animate.animate-in {
    padding: 0;
}
/* Scalloped Wave Borders */
.donation-banner-section .scallop-border {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 10;
}

.donation-banner-section .scallop-top { top: 0; }
.donation-banner-section .scallop-bottom { bottom: 0; }

.donation-banner-section .scallop-border svg {
    display: block;
    width: 100%;
    height: 30px;
    transition: height 0.3s ease;
}

/* Left Side Children Wrapper */
.children-banner-wrapper {
    position: relative;
    max-width: 440px;
    animation: fadeInUp 0.6s ease;
}

.children-img {
    width: 100%;
    max-width: 420px;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease;
}

.children-banner-wrapper:hover .children-img {
    transform: scale(1.03);
}

/* Donate Circular Sticker Badge */
.donate-circle-sticker {
    position: absolute;
    top: 10px;
    right: 0px;
    background-color: #11a2b8; /* Cyan badge */
    border: 3px dashed #ffffff;
    border-radius: 50%;
    width: 110px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: rotate(6deg);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(6deg); }
    50% { transform: translateY(-8px) rotate(6deg); }
}

.tiny-text { 
    font-size: 0.55rem;
    letter-spacing: 0.5px;
}

.price-text { 
    font-size: 16px; 
    line-height: 1;
    font-weight: 800;
}

/* Urdu Banner Wrapper */
.urdu-banner-wrapper {
    max-width: 520px;
    margin-left: auto;
    border-radius: 12px;
    overflow: hidden;
    animation: fadeInUp 0.6s ease 0.1s backwards;
}

.urdu-artwork-img {
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

.urdu-banner-wrapper:hover .urdu-artwork-img {
    transform: scale(1.02);
}

/* =========================================
   Responsive Breakpoints
   ========================================= */
@media (max-width: 991px) {
    .specialist-main-title {
        font-size: 1.8rem;
    }
    
    .urdu-banner-wrapper {
        margin-right: auto;
        margin-top: 20px;
    }

    .donate-circle-sticker {
        width: 90px;
        height: 90px;
        right: -10px;
    }

    .wave-border svg {
        height: 45px;
    }
}
/* section end  */

/* FACTS ABOUT OUR CENTER AND CLINIC */


/* =========================================
   Facts Section Layout & Background
   ========================================= */
.facts-clinic-section {
    background-color: #ffffff;
    position: relative;
}

/* Subtitle & Main Title Styling */
.sub-heading-text {
    color: #838e97;
    font-size: 0.7rem;
    letter-spacing: 1px;
    font-weight: 600;
    text-transform: uppercase;
}

.main-heading-text {
    color: #23275c;
    font-size: 54px;
    line-height: 1;
    font-weight: 600 !important;
    letter-spacing: -0.3px;
}

/* Base Fact Cards Setup */
.fact-card {
    padding: 40px !important;
    border-radius: 20px 75px 20px 20px; /* Smooth leaf curve top-right */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    border: none;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
}

/* Layered "peek" shape behind the card, matching the mockup's stacked-sticker look */
.fact-card::before {
    content: "";
    position: absolute;
    inset: -10px -10px 10px 10px;
    background-color: inherit;
    opacity: 0.3;
    border-radius: inherit;
    z-index: -1;
    transition: inset 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.fact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
}

.fact-card:hover::before {
    inset: -12px -12px 12px 12px;
}

/* Card Titles */
.fact-title {
    font-size: 28px;
    line-height: 1.3;
    font-weight: 600 !important;
}

/* Dark Shadow Numbers (1st SS Match) */
.fact-number {
    font-size: 103px;
    line-height: 0.9;
    font-weight: 600;
    letter-spacing: -1px;
    /* Dark contrast overlay effect for numbers */
    color: rgba(20, 30, 50, 0.35); 
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
}

/* Star Rating */
.rating-stars {
    color: #ffffff;
    font-size: 1.1rem;
    display: flex;
    gap: 4px;
    letter-spacing: 1px;
    margin: 25px 0px !important;
}

/* Card Description */
.fact-description {
    font-size: 17px;
    line-height: 1.4;
    opacity: 1;
    font-weight: 400;
}

/* Card Color Palette (Matched 1st SS) */
/* 1. Blue Card */
.card-blue {
    background-color: #3bb2d6;
}

/* 2. Green Card */
.card-green {
    background-color: #5ec88a;
}

/* 3. Orange Card */
.card-orange {
    background-color: #e46335;
}

/* 4. Yellow Card */
.card-yellow {
    background-color: #f1c748;
    color: #ffffff;
}

.card-yellow .fact-number {
    color: #8b6200; /* Darker Gold for Yellow Card Number */
}

/* Right Side Footer Text & Button */
.additional-info-text {
    font-size: 16px;
    line-height: 1.6;
    color: #4c4c4c;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    padding: 25px 25px 0px 25px;
}
.btn-explore-dark{
    margin-left: 25px;
}

.btn-explore-dark {
    background-color: #272d69;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    padding: 10px 28px;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(39, 45, 105, 0.2);
}

.btn-explore-dark:hover {
    background-color: #e46335;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(228, 99, 53, 0.3);
}

.btn-explore-dark:active {
    transform: translateY(-1px);
}

/* =========================================
   Responsive Tweaks
   ========================================= */
@media (max-width: 991px) {
    .main-heading-text {
        font-size: 1.8rem;
    }
    
    .fact-card {
        max-width: 100%;
        border-radius: 18px 60px 18px 18px;
    }

    .fact-card::before {
        inset: -10px -10px 10px 10px;
    }

    .fact-number {
        font-size: 2.6rem;
    }
}
/* end section */

/* VIDEO AND SLIDER SECTION */


/* Gentle alternating tint so consecutive neutral sections read as distinct, not one accidental gap */
.celebrity-video-section {
    background-color: #f6f8fb;
}

/* =========================================
   Left Video Card Setup
   ========================================= */
.video-card {
    border-radius: 24px 100px 24px 24px; /* Top-Right Leaf Curve */
    min-height: 380px;
    background-color: #1a1a1a;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.video-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.video-bg-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease;
}

.video-card:hover .video-bg-img {
    transform: scale(1.05);
}

.video-overlay {
    background: linear-gradient(180deg, rgba(11, 30, 56, 0.72) 0%, rgba(11, 30, 56, 0.6) 45%, rgba(11, 30, 56, 0.92) 100%);
}

.video-overlay-info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.video-title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.btn-play-yellow {
    width: 64px;
    height: 64px;
    background-color: #fabb18; /* Yellow play button */
    color: #000000;
    font-size: 1.4rem;
    padding-left: 4px; /* Centering play icon */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(250, 187, 24, 0.3);
}

.btn-play-yellow:hover {
    transform: scale(1.12);
    background-color: #e5a70d;
    box-shadow: 0 8px 24px rgba(250, 187, 24, 0.4);
}

/* =========================================
   Right Testimonial Card Setup
   ========================================= */
.testimonial-card {
    background-color: #61ca8e; /* Green background */
    border-radius: 100px 24px 24px 24px; /* Top-Left Leaf Curve */
    min-height: 380px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}

.testimonial-heading {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.3px;
}

/* Slider Controls */
.slider-btn {
    font-size: 1.3rem;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 0 8px;
    font-weight: 600;
}

.slider-btn:hover {
    opacity: 1 !important;
    transform: scale(1.2);
}

/* Author Details & Text */
.author-img-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
}

.author-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.author-img-wrapper:hover .author-img {
    transform: scale(1.05);
}

.author-name {
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.tiny-text {
    font-size: 0.75rem;
    line-height: 1.6;
    font-weight: 400;
    opacity: 0.95;
}

.testimonial-text {
    font-weight: 400;
    opacity: 0.95;
    font-size: 17px;
    line-height: 1.6;
}

/* =========================================
   Responsive Fixes
   ========================================= */
@media (max-width: 991px) {
    .video-card, .testimonial-card {
        min-height: 340px;
        border-radius: 24px 70px 24px 24px;
    }

    .testimonial-card {
        border-radius: 70px 24px 24px 24px;
    }

    .video-title, .testimonial-heading {
        font-size: 1.45rem;
    }
}

@media (max-width: 575px) {
    /* Same fix as the rTMS video box: heading + fixed-size play button
       don't both fit on narrow phones, and the button was overflowing
       .video-card's overflow:hidden edge and getting clipped. Stack. */
    .video-overlay-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .btn-play-yellow {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
        flex-shrink: 0;
    }
}
/* end section */

/* ADVISORY BOARD MEMBERS SECTION */

.advisory-board-section {
    background-color: #ffffff;
}

/* Header Titles */
.section-main-title {
    color: #23275c;
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: -0.3px;
    font-weight: 600;
}

.section-desc-text {
    font-size: 16px;
    line-height: 1.6;
    color: #8b8b8b !important;
    font-weight: 400 !important;
    font-family: 'Poppins', sans-serif;
}

/* =========================================
   Member Cards Setup (Exact 1st SS Design)
   ========================================= */
.member-card {
    border-radius: 24px; /* Clean curves for the entire card */
    border: none;
    margin-top: 190px; /* Space for negative margin image overlay */
    padding: 0 20px 30px 20px !important;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.member-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Floating Circular Avatar */
.avatar-wrapper {
    margin-top: -65px; /* Pulls image up half-way outside card */
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.member-avatar {
    width: 180px;
    height: 180px;
    object-fit: cover;
    object-position: center 8%;
    border-radius: 50%;
    background-color: #f4f5f7;
    margin-top: -100px;
    transition: all 0.3s ease;
}

.member-card:hover .member-avatar {
    transform: scale(1.08);
    box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}

/* Text Formatting */
.member-name {
    color: #23275c;
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.member-designation {
    color: #8c959e;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Solid Background Colors (Full Card Fill) */
.card-pink {
    background-color: #fdf0ed;
}

.card-light-green {
    background-color: #edf7ee;
}

.card-light-blue {
    background-color: #ebf5fb;
}

/* Social Icons Setup */
.social-icon {
    font-size: 0.78rem;
    text-decoration: none;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 50%;
}

.social-icon:hover {
    transform: scale(1.25) translateY(-3px);
    opacity: 1 !important;
}

/* Icon Colors */
.icon-orange {
    color: #e36a53;
}

.icon-green {
    color: #62b874;
}

.icon-blue {
    color: #4ba2e3;
}

/* =========================================
   Board Members Slider
   ========================================= */
.board-slider-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    padding: 4px 4px 8px;
    margin: 0 -4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.board-slider-track::-webkit-scrollbar {
    display: none;
}

.board-slide {
    flex: 0 0 85%;
    scroll-snap-align: start;
}

@media (min-width: 576px) {
    .board-slide {
        flex-basis: 48%;
    }
}

@media (min-width: 768px) {
    .board-slide {
        flex-basis: 32%;
    }
}

@media (min-width: 992px) {
    .board-slide {
        flex-basis: 23.5%;
    }
}

.board-slider-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(35, 39, 92, 0.15);
    background-color: #ffffff;
    color: #23275c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.board-slider-btn:hover {
    background-color: #23275c;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Side-mounted slider arrows (left/right of the track, vertically centered) */
.slider-arrow-wrapper {
    padding: 0 54px;
}

.board-slider-btn-left,
.board-slider-btn-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

.board-slider-btn-left {
    left: 0;
}

.board-slider-btn-right {
    right: 0;
}

.board-slider-btn-left:hover,
.board-slider-btn-right:hover {
    transform: translateY(-50%) scale(1.08);
}

@media (max-width: 575px) {
    .slider-arrow-wrapper {
        padding: 0 6px;
    }

    .board-slider-btn-left,
    .board-slider-btn-right {
        width: 36px;
        height: 36px;
    }

    .board-slider-btn-left {
        left: -4px;
    }

    /* Not flush like the left button — the site-wide floating DONATE tab
       (position:fixed, vertically centered, ~28px wide) sits right at the
       viewport edge and overlaps whatever's there whenever a slider like
       this scrolls into the middle of the screen. */
    .board-slider-btn-right {
        right: 24px;
    }
}

/* =========================================
   Responsive Adjustments
   ========================================= */
@media (max-width: 1199px) {
    .member-avatar {
        width: 130px;
        height: 130px;
    }

    .avatar-wrapper {
        margin-top: -55px;
    }

    .section-main-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .member-card {
        margin-top: 50px;
    }
    
    .avatar-wrapper {
        margin-top: -45px;
    }
    
    .member-avatar {
        width: 100px;
        height: 100px;
    }
}
/* end section */

@media (max-width: 991px) {
    .section-main-title {
        font-size: 1.8rem;
    }

    .member-avatar {
        width: 110px;
        height: 110px;
        /* The desktop -100px pull (sized for a 180px avatar) isn't scaled
           down for the shrunk mobile avatar — combined with the wrapper's
           own negative margin it pushes almost the whole photo above the
           board-slider-track's clipping box (overflow-x:auto forces
           overflow-y to clip too), leaving just a sliver visible. */
        margin-top: 0;
    }

    .avatar-wrapper {
        margin-top: -45px;
    }

    .member-card {
        margin-top: 50px;
    }
}
/* section end */


/* REPETITIVE TRANSCRANIAL SECTION */

/* General Font Setup */
body {
    font-family: 'Poppins', sans-serif;
}

:root {
    --rtms-cyan: #46b7d2; /* Exact color match from screenshot */
    --rtms-text-white: #ffffff;
    /* Extracted directly from image/logo.png (dominant ring color) */
    --brand-blue: #1e496f;
    --brand-blue-dark: #163a58;
    /* Lightened tint of brand-blue, for small accents that need to pop
       against dark panels (e.g. icons on the PayFast info card) — the
       full-strength brand-blue is too close in tone to sit legibly there. */
    --brand-blue-light: #6fb3e0;
}

/* Full-bleed gradient CTA banner — the section itself carries the color
   (edge to edge), with soft blurred blobs for depth, instead of a flat
   boxed card sitting on a plain gray section. */
.rtms-section {
    background: linear-gradient(135deg, #3cd3e8 0%, #00acc1 42%, #23275c 100%);
    position: relative;
    overflow: hidden;
    padding: 72px 0;
}

.rtms-section::before,
.rtms-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    pointer-events: none;
}

.rtms-section::before {
    width: 320px;
    height: 320px;
    top: -140px;
    left: -100px;
}

.rtms-section::after {
    width: 260px;
    height: 260px;
    bottom: -120px;
    right: -60px;
    background: rgba(255, 255, 255, 0.07);
}

@media (max-width: 575px) {
    .rtms-section {
        padding: 56px 0;
    }
}

/* Bootstrap's .pt-0 (used to avoid stacking on top of a section that
   already has bottom padding) was zeroing this banner's top padding
   too, making the gradient start abruptly instead of framing the
   content evenly top and bottom. */
.rtms-section.pt-0 {
    padding-top: 72px !important;
}

@media (max-width: 575px) {
    .rtms-section.pt-0 {
        padding-top: 56px !important;
    }
}

/* ================================
   Content Box — sits directly on the section gradient (no separate
   card background), so the banner reads as one bold full-width block.
   ================================ */
.rtms-content-box {
    background: transparent;
    padding: 0;
    color: var(--rtms-text-white);
    position: relative;
    z-index: 2;
}

.rtms-title {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 10px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    text-align: center;
}

.rtms-desc {
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.95;
}

.btn-explore {
    background-color: var(--rtms-text-white);
    color: var(--rtms-cyan);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 32px;
    border-radius: 50px; /* Pill shape */
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

.btn-explore:hover {
    background-color: #f0f0f0;
    color: #389eb7;
}

/* ================================
   Right Video Box Styling
   ================================ */
.rtms-video-box {
    min-height: 400px;
    /* Custom Shape Reverse: Top-Left is big here */
    border-radius: 120px 20px 20px 20px;
    overflow: hidden; /* Ensures image stays inside the curves */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Styling for YouTube iframe when uncommented */
.youtube-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 120px 20px 20px 20px;
    z-index: 10;
}

/* Thumbnail Wrapper Setup */
.video-thumbnail-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark gradient at bottom so white text is readable */
.overlay-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}

.video-info {
    position: absolute;
    bottom: 30px;
    left: 35px;
    right: 35px;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}

.video-title {
    color: var(--rtms-text-white);
    font-size: 36px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.play-btn-circle {
    width: 65px;
    height: 65px;
    background-color: var(--rtms-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.play-btn-circle i {
    color: #23275c; /* Dark blue/black icon color */
    font-size: 1.6rem;
    margin-left: 5px; /* Centers the play triangle visually */
}

.play-btn-circle:hover {
    transform: scale(1.05);
}

/* ================================
   Responsive Adjustments
   ================================ */
@media (max-width: 991px) {
    .rtms-content-box {
        border-radius: 20px 80px 20px 20px;
        padding: 40px 30px;
    }
    .rtms-video-box {
        border-radius: 80px 20px 20px 20px;
        min-height: 350px;
    }
    .rtms-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 575px) {
    .rtms-title {
        font-size: 1.5rem;
    }
    .video-title {
        font-size: 1.1rem;
    }
    .play-btn-circle {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
    }
    .play-btn-circle i {
        font-size: 1.2rem;
    }
    /* The heading + button no longer fit side by side on narrow phones
       (the button was overflowing the box's overflow:hidden edge and
       getting clipped almost entirely) — stack instead of squeezing. */
    .video-info {
        left: 20px;
        right: 20px;
        bottom: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}
/* end section */

/*  AUDIT AND CERTIFIED SECTION*/

/* General Setup */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
}

.audited-section {
    position: relative;
    background-color: #ffffff;
}

/* Main Section Heading */
.section-title {
    color: #1e285a; /* Dark Blue Heading Color */
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: -0.5px;
}

/* =========================================
   Auto Slide Track Setup (Clean Infinite Loop)
   ========================================= */
.cert-slider-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 10px 0;
}

.cert-slider-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: smoothScroll 20s linear infinite;
}

/* Hover par slider stop karne ke liye (Optional) */
.cert-slider-wrapper:hover .cert-slider-track {
    animation-play-state: paused;
}

@keyframes smoothScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 10px));
    }
}

/* Certificate Cards Setup */
.cert-card {
    border: 1px solid #eaeaea; /* Light Clean Grey Border */
    border-radius: 4px;
    padding: 15px 20px;
    height: 110px;
    width: 210px; /* Fixed width for uniform sliding */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cert-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* Logo Image Styling */
.cert-logo {
    max-height: 80px;
    width: auto;
    object-fit: contain;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .section-title {
        font-size: 1.8rem;
    }
    
    .cert-card {
        height: 90px;
        width: 160px;
        padding: 10px;
    }
    
    .cert-logo {
        max-height: 60px;
    }
}
/* end section */

/* OUR THARAPIST SECTION  */


/* General Setup */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
}

.therapists-section {
    background: radial-gradient(ellipse at center 30%, #eef0f3 0%, #ffffff 65%);
}

.therapists-section > .container {
    position: relative;
    z-index: 1;
}

/* Decorative Background Doodles */
.doodle-svg {
    position: absolute;
    stroke: #c7ccd3;
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
}

.doodle-dots {
    fill: #ccd1d8;
    left: 4%;
    bottom: 22%;
}

.doodle-zigzag-top {
    right: 6%;
    top: 12%;
}

.doodle-scribble {
    left: 2%;
    bottom: 6%;
}

.doodle-zigzag-bottom {
    right: 4%;
    bottom: 10%;
}

@media (max-width: 991px) {
    .doodle-svg {
        display: none;
    }
}

/* Section Title */
.section-heading {
    color: #23275c;
    font-size: 54px;
    font-weight: 600;
}

@media (max-width: 991px) {
    .section-heading {
        font-size: 1.8rem;
    }
}

/* The advisory-board/about-us card grid (.row.g-4.gy-5 of these cards) reads
   as pixel-perfect flush against the viewport on mobile, yet still registers
   a small real scrollable overflow there — the big absolutely-positioned
   watermark numbers push the row's scrollable region a few px past its own
   box even though nothing is visibly cut off. Clip at the row so that sliver
   can't be dragged into on touch, without touching the cards' own rendering
   (same approach as the site-wide g-5 gutter fix above). */
.row.g-4.gy-5 {
    overflow-x: hidden;
}

/* Main Outer Wrapper */
.therapist-card-wrapper {
    position: relative;
    padding-top: 25px; /* Creates space for floating watermark number */
    transition: transform 0.3s ease;
}

.therapist-card-wrapper:hover {
    transform: translateY(-5px);
}

/* Background Watermark Number */
.number-watermark {
    position: absolute;
    top: -5px;
    right: 10px;
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    z-index: 1;
    user-select: none;
}

/* Watermark Colors */
.num-blue { color: #bde5f0; }
.num-green { color: #c4eed5; }
.num-orange { color: #fbd3ca; }
.num-yellow { color: #fce8b6; }

/* Doctor Overlapping Image Box (Asymmetric Curved Border) */
.doctor-image-box {
    position: relative;
    z-index: 3;
    border-radius: 30px 90px 30px 30px;
    overflow: hidden;
    margin-bottom: -70px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    width: 80%;
    margin: 0 auto;
}

.doctor-img {
    width: 100%;
    height: 290px;
    object-fit: cover;
    display: block;
}

/* Initials fallback for members with no supplied photo — same box shape
   and height as .doctor-img so the grid stays even either way. */
.doctor-img-fallback {
    width: 100%;
    height: 290px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2a2f66, #23275c);
    color: #ffffff;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 1px;
}

@media (max-width: 991px) {
    .doctor-img-fallback {
        height: 220px;
        font-size: 2.1rem;
    }
}

/* Solid Color Base Card (Lower Half Only) */
.therapist-base-card {
    position: relative;
    z-index: 2;
    border-radius: 25px;
        min-height: 190px;
    padding: 85px 15px 10px 15px; /* Top padding accommodates overlapping image */
}

/* Card Theme Colors */
.card-blue { background-color: #3cb8d0; }
.card-green { background-color: #65b889; }
.card-orange { background-color: #e46039; }
.card-yellow { background-color: #eebe42; }

/* Text Formatting */
.doctor-name {
    color: #ffffff;
    font-size: 1.45rem;
}

.doctor-designation {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
}

/* Social Link Circles */
.social-icon {
    width: 26px;
    height: 26px;
    background-color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #333333;
    font-size: 0.72rem;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.social-icon:hover {
    transform: scale(1.12);
    color: #111111;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .doctor-img {
        height: 220px;
    }
}

@media (max-width: 575px) {
    .therapist-card-wrapper {
        max-width: 280px;
        margin: 0 auto;
    }
}
/* end section */

/* =========================================
   Therapists Slider
   ========================================= */
.therapist-slider-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    padding: 4px 4px 8px;
    margin: 0 -4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.therapist-slider-track::-webkit-scrollbar {
    display: none;
}

.therapist-slide {
    flex: 0 0 85%;
    max-width: 280px;
    scroll-snap-align: start;
}

@media (min-width: 576px) {
    .therapist-slide {
        flex-basis: 48%;
        max-width: none;
    }
}

@media (min-width: 768px) {
    .therapist-slide {
        flex-basis: 32%;
    }
}

@media (min-width: 992px) {
    .therapist-slide {
        flex-basis: 23.5%;
    }
}


/* ACCREDITED BY-SECTION */
/* Custom 5-Column Grid Layout for Desktop */
@media (min-width: 768px) {
    .col-md-2-4 {
        flex: 0 0 auto;
        width: 16.6%;
    }
}

/* Section Main Container */
.accredited-section {
    background: url(image/7.png);
    overflow: hidden;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
/* Decorative Puzzle Piece Doodles (autism-puzzle motif echoed in the background) */
.puzzle-doodle {
    position: absolute;
    color: #f0534c;
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
}

.puzzle-doodle-1 {
    top: -40px;
    left: 20px;
    font-size: 140px;
    transform: rotate(-18deg);
}

.puzzle-doodle-2 {
    top: 35%;
    right: -50px;
    font-size: 170px;
    transform: rotate(12deg);
}

.puzzle-doodle-3 {
    bottom: -50px;
    left: -30px;
    font-size: 160px;
    transform: rotate(25deg);
}

.puzzle-doodle-4 {
    bottom: -30px;
    right: 30px;
    font-size: 120px;
    transform: rotate(-10deg);
}

@media (max-width: 767px) {
    .puzzle-doodle {
        display: none;
    }
}

/* TOP WAVY / ZIG-ZAG BORDER */


/* Section Heading */
.accredited-title {
    color: #1e266d; /* Dark Blue Heading Color */
    font-size: 3.6rem;
    font-weight: 600 !important;
    letter-spacing: -0.5px;
    text-align: center;
}

@media (max-width: 991px) {
    .accredited-title {
        font-size: 2rem;
    }
}

/* White Logo Box Wrapper */
.logo-card {
    background-color: #ffffff;
    border: 1px solid #f2c7ce;
    border-radius: 4px;
    height: 139px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.logo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Logo Image Properties */
.logo-img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
/* end section */


/* FAQ Section Base */
.faq-section {
    background-color: #ffffff;
}

/* Left Title & Text Styling */
.faq-title {
    color: #1e266d; /* Dark Navy Color from SS */
    font-size: 3.5rem;
    line-height: 1.2;
    font-weight: 600 !important;
    letter-spacing: -0.5px;
}

.faq-subtitle {
    font-size: 15px;
    line-height: 1.6;
    color: #71778e !important;
}

/* Keep the heading in view while the accordion list scrolls past it —
   desktop only, since a single-column mobile layout has nothing to pin
   against. */
@media (min-width: 992px) {
    .faq-content-sticky {
        position: sticky;
        top: 110px;
    }
}

/* =========================================================
   Appointment Request — dark clinic-info panel + light booking form,
   sitting just above the FAQ section.
   ========================================================= */
.appointment-request-box {
    background-color: #ffffff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 55, 0.14);
}

.apt-info-panel {
    background: linear-gradient(160deg, #171b38 0%, #23275c 55%, #0f7f96 100%);
    color: #ffffff;
    padding: 48px 40px;
    height: 100%;
}

.apt-info-panel h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.apt-info-panel > p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 28px;
}

.apt-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.apt-info-item:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.apt-info-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue-light);
    font-size: 0.95rem;
}

.apt-info-label {
    font-size: 0.68rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 3px;
}

.apt-info-value {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.4;
}

.apt-info-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

.btn-apt-whatsapp,
.btn-apt-call {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-apt-whatsapp {
    background-color: #25d366;
    color: #0c3d22;
}

.btn-apt-whatsapp:hover {
    background-color: #1fbd5a;
    color: #0c3d22;
}

.btn-apt-call {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.btn-apt-call:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.apt-form-panel {
    padding: 48px 40px;
}

.apt-form-panel h2 {
    color: #23275c;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.apt-form-panel > p {
    color: #5d666e;
    font-size: 0.92rem;
    margin-bottom: 24px;
}

.apt-form-panel label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #23275c;
    margin-bottom: 6px;
    display: block;
}

.apt-form-panel .form-control,
.apt-form-panel .form-select {
    border-radius: 10px;
    border: 1px solid #e2e5ee;
    padding: 10px 14px;
    font-size: 0.9rem;
    color: #23275c;
}

.apt-form-panel .form-control:focus,
.apt-form-panel .form-select:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.15);
}

.apt-form-panel .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 0;
}

.apt-form-panel .form-check-input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: 2px 0 0;
    border: 1px solid #cfd4e2;
    border-radius: 5px;
    cursor: pointer;
}

.apt-form-panel .form-check-input:checked {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.apt-form-panel .form-check-input:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.15);
}

.apt-form-panel .form-check-input:invalid {
    border-color: #e2664f;
}

.apt-form-panel .form-check-label {
    font-size: 0.82rem;
    color: #5d666e;
    cursor: pointer;
    line-height: 1.4;
}

.btn-apt-submit {
    display: block;
    width: 100%;
    background-color: var(--brand-blue);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 13px 20px;
    border-radius: 12px;
    border: none;
    transition: background-color 0.2s ease;
}

.btn-apt-submit:hover {
    background-color: #00a5ba;
}

@media (max-width: 991px) {
    .apt-info-panel,
    .apt-form-panel {
        padding: 36px 28px;
    }
}

/* Custom Accordion Base */
.custom-accordion .accordion-item {
    border: none;
    border-radius: 14px !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Individual Card Colors (Exact Soft Pastels) */
.faq-item-peach { background-color: #fceee9; }
.faq-item-green { background-color: #f0f7ec; }
.faq-item-blue  { background-color: #ebf3fe; }
.faq-item-purple { background-color: #f1edfe; }

/* Accordion Button Customization */
.custom-accordion .accordion-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question {
    color: #1e266d;
    font-size: 0.95rem;
    font-weight: 600;
    margin-right: 15px;
}

/* Custom Plus/Minus Icon Styling */
.custom-accordion .accordion-button::after {
    display: none; /* Hide default Bootstrap arrow */
}

.faq-icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    background-color: #1e266d;
    border-radius: 2px;
    transition: transform 0.3s ease;
}

/* Horizontal bar */
.faq-icon::before {
    top: 6px;
    left: 0;
    width: 14px;
    height: 2px;
}

/* Vertical bar (makes it a PLUS) */
.faq-icon::after {
    top: 0;
    left: 6px;
    width: 2px;
    height: 14px;
}

/* When Expanded: Transform PLUS to MINUS */
.accordion-button:not(.collapsed) .faq-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

/* Accordion Body Text */
.custom-accordion .accordion-body {
    color: #4a5068;
    font-size: 0.9rem;
    padding: 0 24px 20px 24px;
    line-height: 1.6;
}

/* Responsive Font Adjustment */
@media (max-width: 991px) {
    .faq-title {
        font-size: 2rem;
    }
}
/* end section */


/* Left Content Styling */
.appointment-title {
    color: #1e266d; /* Dark Navy Color */
    font-size: 2.4rem;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.appointment-subtitle {
    font-size: 15px;
    color: #8c93a6 !important;
    max-width: 380px;
    line-height: 1.5;
}

/* Call Center Badge */
.call-icon-box {
    width: 45px;
    height: 45px;
    background-color: var(--brand-blue); /* Turquoise Cyan */
    color: #ffffff;
    border-radius: 50%;
    font-size: 1.1rem;
}

.call-label {
    font-size: 0.78rem;
    color: #8c93a6 !important;
}

.call-number {
    color: #1e266d;
    font-size: 1.15rem;
}

/* Common Form Field Styling */
.custom-input {
    background-color: #ffffff;
    border: 1px solid #e2e6f0;
    border-radius: 10px;
    height: 48px;
    padding: 10px 16px;
    font-size: 15px;
    color: #2b3040;
    box-shadow: none !important;
    transition: border-color 0.2s ease;
}

.custom-input:focus {
    border-color: var(--brand-blue);
}

.custom-input::placeholder {
    color: #a0a6b8;
}

/* Custom Dropdown Arrow Styling */
.custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%3c2b3040' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 10px 10px;
    cursor: pointer;
}

/* Native Date Placeholder Text styling */
.custom-date {
    color: #a0a6b8;
}

.custom-date:focus,
.custom-date:valid {
    color: #2b3040;
}

/* Turquoise Submit Button */
.btn-appointment {
    background-color: var(--brand-blue);
    color: #ffffff;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    height: 45px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-appointment:hover {
    background-color: var(--brand-blue-dark);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .appointment-title {
        font-size: 2rem;
    }
}
/* end section */

/* footer section */
/* Footer Base Background */
.tiwc-footer {
    background-color: #1a223f; /* Dark Navy Blue Theme Color */
    color: #ffffff;
    padding-top: 120px;
}

/* Wavy / Cloudy SVG Top Border */
.tiwc-footer .tiwc-footer-wave-shape {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 2;
}

.tiwc-footer .tiwc-footer-wave-shape svg {
    position: relative;
    display: block;
    width: 100%;
    height: 70px;
}

.tiwc-footer .tiwc-footer-content {
    position: relative;
    z-index: 3;
}

/* Logo Sizing */
.tiwc-footer .tiwc-logo-img {
    max-height: 55px;
    width: auto;
}

/* Footer Description & Text Colors */
.tiwc-footer .tiwc-footer-description {
    color: #a0a8be !important;
    font-size: 0.78rem;
    line-height: 1.6;
    max-width: 320px;
}

.tiwc-footer .tiwc-footer-heading {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.tiwc-footer .tiwc-footer-text {
    color: #a0a8be;
    font-size: 0.8rem;
}

.tiwc-footer .tiwc-text-muted {
    color: rgba(255, 255, 255, 0.5);
}

/* Footer Navigation Links */
.tiwc-footer .tiwc-footer-links li {
    margin-bottom: 8px;
}

.tiwc-footer .tiwc-footer-links a {
    color: #a0a8be;
    text-decoration: none;
    font-size: 0.82rem;
    transition: color 0.2s ease;
}

.tiwc-footer .tiwc-footer-links a:hover {
    color: var(--brand-blue);
}

/* Cyan Round Social Icon Buttons */
.tiwc-footer .tiwc-social-btn {
    width: 28px;
    height: 28px;
    background-color: var(--brand-blue);
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.tiwc-footer .tiwc-social-btn:hover {
    color: #ffffff;
    transform: scale(1.1);
}

/* Newsletter Input Field */
.tiwc-footer .tiwc-subscribe-input {
    background-color: transparent !important;
    border: none;
    border-bottom: 1px solid #3d4768;
    border-radius: 0;
    color: #ffffff !important;
    font-size: 0.8rem;
    padding-right: 35px;
    padding-left: 0;
    box-shadow: none !important;
}

.tiwc-footer .tiwc-subscribe-input::placeholder {
    color: #636d8d;
}

.tiwc-footer .tiwc-subscribe-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--brand-blue);
    padding: 0;
    font-size: 15px;
}

.tiwc-footer .tiwc-subscribe-btn:hover {
    color: #2eb0b4;
}

/* Vertical Line Divider for Desktop */
@media (min-width: 992px) {
    .tiwc-footer .tiwc-footer-border-divider {
        border-right: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* Copyright Text */
.tiwc-footer .tiwc-copyright-text {
    color: #727c9a;
    font-size: 0.75rem;
    transition: color 0.3s ease;
}

.tiwc-footer .tiwc-copyright-text a {
    color: #b8c0d9;
    text-decoration: none;
    transition: color 0.2s ease;
}

.tiwc-footer .tiwc-copyright-text a:hover {
    color: #ffffff;
}

/* Enhanced Footer Interactions */
.tiwc-footer .tiwc-footer-links a {
    position: relative;
    padding-bottom: 2px;
}

.tiwc-footer .tiwc-footer-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--brand-blue);
    transition: width 0.3s ease;
}

.tiwc-footer .tiwc-footer-links a:hover::after {
    width: 100%;
}

/* =========================================
   "From Our Centre" — real session photos, full-width strip above the
   copyright line (existing footer layout is otherwise unchanged)
   ========================================= */
.tiwc-footer .tiwc-footer-gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    max-width: 760px;
}

.tiwc-footer .tiwc-gallery-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background-color: #23272f;
}

.tiwc-footer .tiwc-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* the source photos carry a small baked-in rounded white frame —
       scale up a touch so that corner is cropped outside the tile */
    transform: scale(1.06);
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.tiwc-footer .tiwc-gallery-item::after {
    content: "\f061"; /* fa-arrow-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #ffffff;
    background-color: rgba(26, 34, 63, 0.62);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tiwc-footer .tiwc-gallery-item:hover img,
.tiwc-footer .tiwc-gallery-item:focus-visible img {
    transform: scale(1.16);
}

.tiwc-footer .tiwc-gallery-item:hover::after,
.tiwc-footer .tiwc-gallery-item:focus-visible::after {
    opacity: 1;
}

/* Smooth Footer Appearance */
.tiwc-footer-content > * {
    animation: fadeInUp 0.6s ease-out;
}

/* Footer responsive improvements */
@media (max-width: 768px) {
    .tiwc-footer .tiwc-footer-wave-shape svg {
        height: 50px;
    }

    .tiwc-footer .tiwc-footer-heading {
        font-size: 0.9rem;
    }

    .tiwc-footer .tiwc-footer-gallery {
        grid-template-columns: repeat(3, 1fr);
        max-width: 360px;
    }
}

/* =========================================================
   SUB-PAGE SHARED COMPONENTS
   (Appointments, About Us, Dr. Imran Yousuf, Advisory Board)
   ========================================================= */

/* Page hero / title banner */
.page-hero-banner {
    background: linear-gradient(135deg, #1a223f 0%, #23275c 100%);
    /* +35px vs. the single-row nav's 170px, to clear the utility bar above it at >=1400px */
    padding: 205px 0 60px;
    position: relative;
    overflow: hidden;
}

.page-hero-banner::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(0, 188, 212, 0.12);
}

.page-hero-title {
    color: #ffffff;
    font-size: 2.6rem;
    font-weight: 600;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.page-hero-banner .breadcrumb {
    position: relative;
    z-index: 1;
}

.page-hero-banner .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.9rem;
}

.page-hero-banner .breadcrumb-item a:hover {
    color: var(--brand-blue);
}

.page-hero-banner .breadcrumb-item.active {
    color: var(--brand-blue);
    font-size: 0.9rem;
}

.page-hero-banner .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.35);
}

/* Utility bar is hidden below xxl, so the fixed header goes back to single-row height */
@media (max-width: 1399px) {
    .page-hero-banner {
        padding: 170px 0 60px;
    }
}

@media (max-width: 768px) {
    .page-hero-banner {
        padding: 140px 0 45px;
    }
    .page-hero-title {
        font-size: 1.9rem;
    }
}

/* Generic content section spacing for sub-pages */
.subpage-section {
    padding: 80px 0;
}

/* Bootstrap's .pt-0 zeroes top padding completely, which was meant to
   avoid double-gaps between tightly related blocks (e.g. a heading and
   its own intro) but ended up flattening spacing between separate
   content sections stacked down the page. Restore a modest top gap
   instead of none, on both the plain content sections and the CTA
   gradient banners. */
.subpage-section.pt-0 {
    padding-top: 40px !important;
}

@media (max-width: 575px) {
    .subpage-section.pt-0 {
        padding-top: 28px !important;
    }
}

.subpage-section-title {
    color: #23275c;
    font-weight: 600;
    font-size: 2.1rem;
    margin-bottom: 1rem;
}

/* Image + text intro/detail sections: col-lg-5/col-lg-7, col-lg-6/col-lg-6
   and col-lg-4/col-lg-8 pairs are all used across templates, image and text
   in either order. Once the columns stack on mobile, a left-aligned heading
   sits flush against the screen edge right under a full-width image and
   looks broken. Center both columns on mobile (harmless on the image column
   -- img is an inline-replaced element, so centering it is what visually
   centers the picture itself once it's no longer beside the text) and
   restore natural left alignment at desktop widths where the columns sit
   side by side. [class*="col-lg-"] catches every width variant instead of
   listing each one. */
.row.align-items-center.g-5 > [class*="col-lg-"],
.row.align-items-center.g-5 > [class*="col-lg-"] * {
    text-align: center;
}
@media (min-width: 992px) {
    .row.align-items-center.g-5 > [class*="col-lg-"],
    .row.align-items-center.g-5 > [class*="col-lg-"] * {
        text-align: left;
    }
}

/* Same .row.g-5 pattern also causes a real horizontal-scroll bug on mobile:
   .g-5 sets --bs-gutter-x to 3rem on the row, but the .container it sits in
   still uses the default 1.5rem gutter for its own side padding, so the
   row's -1.5rem negative margins bleed 12px past the viewport on each side.
   Below the breakpoint where the columns stack, drop the gutter back down
   to the default so it matches the container's padding again. */
@media (max-width: 991px) {
    .row.align-items-center.g-5 {
        --bs-gutter-x: 1.5rem;
    }
}

.subpage-lead-text {
    color: #5d666e;
    font-size: 1.05rem;
    line-height: 1.75;
}

/* Belief / value pill list used on About Us */
.belief-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.belief-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 4px 0;
    border-bottom: 1px solid #eef0f3;
    color: #444c56;
    line-height: 1.6;
}

.belief-list li:last-child {
    border-bottom: none;
}

.belief-list .belief-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #fdf0ed;
    color: #e46335;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

/* Simple stat card reused across sub-pages */
.mini-stat-card {
    border-radius: 20px;
    padding: 26px 16px;
    text-align: center;
    color: #ffffff;
    height: 100%;
}

.mini-stat-card .mini-stat-number {
    /* Fluid instead of fixed so long values like "100,000+" never clip
       out of the card on narrow (col-6) mobile widths. */
    font-size: clamp(1.3rem, 5.5vw, 2.2rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
    white-space: nowrap;
}

.mini-stat-card .mini-stat-label {
    font-size: 15px;
    opacity: 0.9;
}

/* Pricing table (Appointments page) */
.pricing-table-wrapper {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
}

.pricing-table thead th {
    background-color: #23275c;
    color: #ffffff;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    padding: 14px 18px;
    text-align: left;
    font-size: 0.9rem;
}

.pricing-table thead th:not(:first-child) {
    text-align: center;
}

.pricing-table tbody td {
    padding: 12px 18px;
    font-size: 16px;
    color: #444c56;
    border-bottom: 1px solid #f0f1f4;
}

.pricing-table tbody td:not(:first-child) {
    text-align: center;
    font-weight: 600;
    color: #23275c;
}

.pricing-table tbody tr:nth-child(even) {
    background-color: #fbfbfd;
}

.pricing-table tbody tr:last-child td {
    border-bottom: none;
}

@media (max-width: 767px) {
    .pricing-table-wrapper {
        overflow-x: auto;
    }
    .pricing-table {
        min-width: 560px;
    }
}

/* Advisory board page: category heading */
.advisory-category-title {
    color: #23275c;
    font-weight: 600;
    font-size: 1.5rem;
    padding-bottom: 10px;
    border-bottom: 3px solid #f1c748;
    display: inline-block;
    margin-bottom: 2rem;
}

/* Placeholder avatar for advisory board members without a supplied real photo */
.member-avatar-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    background-color: #ffffff;
    color: #23275c;
    font-weight: 700;
    font-size: 1.4rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border: 3px solid #ffffff;
    position: relative;
    z-index: 2;
}

.advisory-member-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 28px 18px 24px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.advisory-member-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.advisory-member-card .member-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto 16px;
    display: block;
    border: 3px solid #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.advisory-member-card .member-name {
    font-size: 1.05rem;
    margin-top: 0;
}

.advisory-member-card .member-designation {
    font-size: 0.82rem;
    line-height: 1.4;
}

/* Bio page (Dr. Imran Yousuf) */
.bio-photo-wrapper {
    border-radius: 24px 110px 24px 24px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

.bio-photo-wrapper img {
    width: 100%;
    display: block;
}

/* Full-width banner treatment for wide, short source photos (e.g. the
   943x270 rTMS equipment shot) that don't suit the tall portrait
   .bio-photo-wrapper column layout. object-position:top crops any excess
   off the bottom rather than the top, where the subject sits. */
.rtms-banner-image {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

.rtms-banner-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center top;
    display: block;
}

@media (max-width: 575px) {
    .rtms-banner-image img {
        height: 180px;
    }
}

.credential-pill {
    display: inline-block;
    background-color: #ebf5fb;
    color: #23275c;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 50px;
    margin: 0 8px 8px 0;
}

.book-card {
    background-color: #fdf0ed;
    border-radius: 16px;
    padding: 30px;
    height: 100%;
    text-align: center;
}

.book-card i {
    font-size: 1.8rem;
    color: #e46335;
    margin-bottom: 10px;
}

.book-card h6 {
    color: #23275c;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 0;
}

/* "View more" tile inside the Published Books grid — kept visually distinct
   from real book titles (dashed outline, no solid fill) so it doesn't read
   as an actual 4th book. */
.book-card-more {
    background-color: #ffffff;
    border: 2px dashed #e46335;
}

.book-card-more i {
    color: #e46335;
}

.book-card-more h6 {
    color: #e46335;
}

/* Equal-weight panels for the two-column achievements layout, so the plain
   awards list doesn't look lighter/shorter than the colored book grid beside it. */
.achievements-panel {
    background-color: #fbfbfd;
    border-radius: 20px;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

@media (max-width: 575px) {
    .achievements-panel {
        padding: 24px 20px;
    }
}

/* Icon header row — gives each achievements-panel a visual anchor instead
   of a bare heading, matching the icon-circle language used elsewhere
   on the page (fact cards, feature strip). */
.achievements-panel-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.achievements-panel-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #ffffff;
}

.achievements-panel-header h3 {
    margin-bottom: 0;
}

.theme-tint-peach .achievements-panel-icon { background: linear-gradient(135deg, #e46039, #c94a27); }
.theme-tint-green .achievements-panel-icon { background: linear-gradient(135deg, #65b889, #4a9268); }
.theme-tint-blue .achievements-panel-icon { background: linear-gradient(135deg, #3cb8d0, #2a92a8); }
.theme-tint-purple .achievements-panel-icon { background: linear-gradient(135deg, #a680e0, #8459c4); }

/* =========================================================
   About Us page
   ========================================================= */
.quote-block {
    background: linear-gradient(135deg, #1a223f 0%, #23275c 100%);
    border-radius: 20px 90px 20px 20px;
    padding: 40px;
    color: #ffffff;
    position: relative;
}

.quote-block i.fa-quote-left {
    font-size: 1.8rem;
    color: var(--brand-blue);
    opacity: 0.7;
    margin-bottom: 14px;
    display: block;
}

.quote-block p {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 0;
}

.mission-vision-card {
    background-color: #fdf0ed;
    border-radius: 20px;
    padding: 32px;
    height: 100%;
}

.mission-vision-card.theme-blue {
    background-color: #ebf5fb;
}

.mission-vision-card .mv-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e46335;
    color: #ffffff;
    font-size: 1.3rem;
    margin-bottom: 18px;
}

.mission-vision-card.theme-blue .mv-icon {
    background-color: var(--brand-blue);
}

.mission-vision-card h3 {
    color: #23275c;
    font-weight: 600;
    font-size: 1.35rem;
    margin-bottom: 12px;
}

.mission-vision-card p {
    color: #5d666e;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0;
}

/* =========================================================
   Appointments page
   ========================================================= */
.contact-info-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 28px 20px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.contact-info-card .cic-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ebf5fb;
    color: var(--brand-blue);
    font-size: 1.2rem;
    margin: 0 auto 14px;
}

.contact-info-card h6 {
    color: #23275c;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.contact-info-card p {
    color: #5d666e;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.contact-info-card a {
    color: #5d666e;
    text-decoration: none;
}

.contact-info-card a:hover {
    color: var(--brand-blue);
}

.appointment-form-card {
    background-color: #fbfbfd;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

@media (max-width: 575px) {
    .appointment-form-card {
        padding: 28px 20px;
    }
}

/* Richer 2-column beliefs/values grid (About Us) — individual tile cards
   with cycling accent colors, instead of a single plain bordered list. */
.belief-panel {
    background-color: #fbfbfd;
    border-radius: 24px;
    padding: 40px;
}

@media (max-width: 575px) {
    .belief-panel {
        padding: 24px 18px;
    }
}

.belief-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 16px;
}

@media (min-width: 768px) {
    .belief-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.belief-grid li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.belief-grid li:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.09);
}

.belief-grid .belief-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #ffffff;
}

.belief-grid li:nth-child(4n+1) .belief-icon { background-color: #3cb8d0; }
.belief-grid li:nth-child(4n+2) .belief-icon { background-color: #65b889; }
.belief-grid li:nth-child(4n+3) .belief-icon { background-color: #e46039; }
.belief-grid li:nth-child(4n) .belief-icon { background-color: #eebe42; }

.belief-grid li span:last-child {
    color: #444c56;
    line-height: 1.65;
    font-size: 0.92rem;
}

/* Color-tint modifiers for the flat gray panels (.achievements-panel,
   .belief-panel, .contact-info-card) — reusing the same pastel palette as
   the FAQ accordion so long content-panel pages (like rTMS) don't read as
   one monotonous stack of identical gray boxes. Add alongside the base class. */
.theme-tint-peach { background-color: #fceee9; }
.theme-tint-green { background-color: #f0f7ec; }
.theme-tint-blue { background-color: #ebf3fe; }
.theme-tint-purple { background-color: #f1edfe; }

/* =========================================================
   Fact list — editorial icon+text rows for Q&A-style content blocks.
   Replaces solid-pastel-tile card grids (.contact-info-card) in places
   where uneven text lengths made flat color tiles look heavy/uneven;
   here color lives only in the icon, on a clean white panel.
   ========================================================= */
.fact-panel {
    padding: 0;
}

.fact-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px 48px;
}

@media (min-width: 768px) {
    .fact-list.fact-list-2col {
        grid-template-columns: 1fr 1fr;
    }
}

.fact-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

/* Single-item slide variant used inside .content-slider carousels — each
   .fact-item sits alone in its own .carousel-item, so the 4n+ nth-child
   color rotation below is re-scoped to the .carousel-item siblings instead.
   Each slide is its own standalone card (background + shadow) rather than
   sharing one big panel background, so cards read as separate tiles. */
.fact-item-slide {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 36px 28px;
    box-shadow: 0 6px 20px rgba(15, 23, 55, 0.06);
}

@media (max-width: 575px) {
    .fact-item-slide {
        padding: 28px 20px;
    }
}

.fact-item-slide .fact-icon {
    margin: 0 auto;
}

/* Mini slider — a lightweight sliding-window carousel (not Bootstrap's):
   shows 3 cards at once on desktop (2 tablet, 1 mobile) and advances by
   exactly one card per click, unlike a paginated carousel that swaps
   whole groups. Positioning is driven by translateX in the inline script
   at the bottom of the page; this file only styles the track/items. */
.mini-slider-viewport {
    overflow: hidden;
}

.mini-slider-track {
    display: flex;
    gap: 32px;
    transition: transform 0.5s ease;
}

.mini-slider-item {
    flex: 0 0 calc((100% - 64px) / 3);
    min-width: 0;
}

@media (max-width: 991px) {
    .mini-slider-item {
        flex: 0 0 calc((100% - 32px) / 2);
    }
}

@media (max-width: 575px) {
    .mini-slider-item {
        flex: 0 0 100%;
    }
}

.mini-slider-item .fact-item-slide {
    max-width: none;
    height: 100%;
    justify-content: flex-start;
}

.mini-slider-item:nth-child(3n+1) .fact-item-slide { background-color: #fceee9; }
.mini-slider-item:nth-child(3n+2) .fact-item-slide { background-color: #f0f7ec; }
.mini-slider-item:nth-child(3n) .fact-item-slide { background-color: #ebf3fe; }

.mini-slider-item:nth-child(3n+1) .fact-icon { background: linear-gradient(135deg, #3cb8d0, #2a92a8); }
.mini-slider-item:nth-child(3n+2) .fact-icon { background: linear-gradient(135deg, #65b889, #4a9268); }
.mini-slider-item:nth-child(3n) .fact-icon { background: linear-gradient(135deg, #e46039, #c94a27); }

.mini-slider-dots {
    display: flex;
    align-items: center;
}

.mini-slider-dots button {
    box-sizing: content-box;
    width: 9px;
    height: 9px;
    padding: 0;
    margin: 0 5px;
    border: 0;
    border-radius: 50%;
    background-color: #d8dce6;
    opacity: 1;
    transition: background-color 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
}

.mini-slider-dots button.active {
    width: 26px;
    border-radius: 5px;
    background-color: var(--brand-blue);
}

.slider-arrow-btn[disabled] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.fact-item .fact-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #ffffff;
}

.fact-item h6 {
    color: #23275c;
    font-weight: 600;
    font-size: 1.02rem;
    margin-bottom: 6px;
}

.fact-item p {
    color: #5d666e;
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 0;
}

/* Cap card text to ~4 lines; anything longer scrolls inside the card
   instead of stretching it taller than its neighbors. */
.fact-item-slide p {
    max-height: 108px;
    overflow-y: auto;
    padding-right: 4px;
}

.fact-item-slide p::-webkit-scrollbar {
    width: 5px;
}

.fact-item-slide p::-webkit-scrollbar-thumb {
    background-color: rgba(35, 39, 92, 0.18);
    border-radius: 3px;
}

/* =========================================================
   Content slider — Bootstrap carousel wrapper for card/panel groups
   that read better as one-at-a-time slides than a dense static grid.
   Controls are rebuilt below the slide (not overlaid on content) as
   plain circular buttons + dot indicators, since Bootstrap's default
   carousel-control-prev/next are styled for full-bleed image carousels.
   ========================================================= */
.content-slider .carousel-item {
    transition: transform 0.5s ease-in-out;
}

.content-slider .slider-controls-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 36px;
}

.content-slider .slider-arrow-btn {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #e7e9f2;
    color: #23275c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 4px 14px rgba(15, 23, 55, 0.08);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.content-slider .slider-arrow-btn:hover {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #ffffff;
}

.content-slider .carousel-indicators {
    position: static;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.content-slider .carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    width: 9px;
    height: 9px;
    padding: 0;
    margin: 0 5px;
    border: 0;
    border-radius: 50%;
    background-color: #d8dce6;
    opacity: 1;
    text-indent: -9999px;
    transition: background-color 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
}

.content-slider .carousel-indicators [data-bs-target].active {
    width: 26px;
    border-radius: 5px;
    background-color: var(--brand-blue);
}

/* =========================================================
   Slim feature strip — a thin white bar of short icon+label facts,
   sitting directly under a page-hero-banner (reference: a clinic
   service-page pattern with a credentials strip right below the hero).
   ========================================================= */
.feature-strip {
    background-color: #ffffff;
    box-shadow: 0 4px 16px rgba(15, 23, 55, 0.06);
    position: relative;
    z-index: 2;
}

.feature-strip .container {
    padding-top: 22px;
    padding-bottom: 22px;
}

.feature-strip-item {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.feature-strip-item .fsi-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ebf5fb;
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.feature-strip-item span {
    color: #23275c;
    font-weight: 600;
    font-size: 0.9rem;
}

@media (max-width: 767px) {
    .feature-strip-item {
        justify-content: flex-start;
    }
}

/* Category card for grouped list content (e.g. "Conditions Treated") —
   colored icon header band + heading + body text, instead of a plain list row. */
.category-card {
    background-color: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
}

.category-card .cc-header {
    padding: 30px 24px 22px;
    color: #ffffff;
}

.category-card .cc-header i {
    font-size: 1.7rem;
    margin-bottom: 10px;
    display: block;
}

.category-card .cc-header h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
}

.category-card .cc-body {
    padding: 20px 24px 26px;
}

.category-card .cc-body p {
    color: #5d666e;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 0;
}

.category-card.card-blue .cc-header { background: linear-gradient(135deg, #3cb8d0, #23275c); }
.category-card.card-green .cc-header { background: linear-gradient(135deg, #65b889, #23275c); }
.category-card.card-orange .cc-header { background: linear-gradient(135deg, #e46039, #23275c); }


/* ------------------------------------------------------------------
   Forms: spam honeypot + post-submit notice (script.js)
------------------------------------------------------------------ */
.tis-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tis-form [type="submit"][aria-busy="true"] {
    opacity: 0.7;
    cursor: progress;
}

.tis-form-notice {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2100;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(560px, calc(100% - 32px));
    padding: 16px 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(30, 38, 84, 0.22);
    font-size: 0.95rem;
    color: #23275c;
    border-left: 5px solid #1f9d55;
    animation: tis-notice-in 0.35s ease;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.tis-form-notice > i { font-size: 1.3rem; color: #1f9d55; flex: 0 0 auto; }
.tis-form-notice-error { border-left-color: #d94b42; }
.tis-form-notice-error > i { color: #d94b42; }
.tis-form-notice span { flex: 1; line-height: 1.5; }
.tis-form-notice button {
    border: 0;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #7a838b;
    cursor: pointer;
}
.tis-form-notice.is-hiding { opacity: 0; transform: translate(-50%, -12px); }
@keyframes tis-notice-in {
    from { opacity: 0; transform: translate(-50%, -12px); }
    to { opacity: 1; transform: translateX(-50%); }
}
/* ------------------------------------------------------------------
   Long-form article body (drug-addiction, psychotherapy, teacher-training…)
------------------------------------------------------------------ */
.tis-article {
    max-width: 900px;
    color: #3d4550;
    font-size: 1.05rem;
    line-height: 1.8;
}
.tis-article h2 {
    color: #23275c;
    font-weight: 600;
    font-size: 1.75rem;
    margin: 2.2rem 0 0.9rem;
}
.tis-article h3 {
    color: #23275c;
    font-weight: 600;
    font-size: 1.3rem;
    margin: 1.8rem 0 0.7rem;
}
.tis-article > :first-child { margin-top: 0; }
.tis-article p { margin-bottom: 1rem; }
.tis-article a { color: var(--brand-blue); }
.tis-article-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
}
.tis-article-list li {
    position: relative;
    padding-left: 28px;
}
.tis-article-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 0.8rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ebf5fb;
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}
ol.tis-article-list { counter-reset: tis-ol; }
ol.tis-article-list li::before {
    counter-increment: tis-ol;
    content: counter(tis-ol);
    font-family: inherit;
    font-weight: 700;
}
.tis-article-figure {
    margin: 1.8rem 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.tis-article-figure img { width: 100%; height: auto; display: block; }
@media (max-width: 767px) {
    .tis-article-list { grid-template-columns: 1fr; }
    .tis-article h2 { font-size: 1.45rem; }
}
.tis-video-thumb { position: relative; display: block; }
.tis-video-play {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 50px;
    background: #fff;
    color: #23275c;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}
.tis-video-play i { color: #ff0000; font-size: 1.2rem; }
.tis-video-thumb:hover .tis-video-play { transform: scale(1.05); }
/* ------------------------------------------------------------------
   Hub / listing cards (child-rehab, wellness-service), books, contact
------------------------------------------------------------------ */
.tis-service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}
.tis-service-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(30, 73, 111, 0.16); }
.tis-service-card-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #eef3f8; }
.tis-service-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.tis-service-card:hover .tis-service-card-img img { transform: scale(1.05); }
.tis-service-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.tis-service-card h3 { font-size: 1.1rem; font-weight: 600; color: #23275c; margin: 0 0 8px; }
.tis-service-card p { color: #5d666e; font-size: 0.92rem; line-height: 1.6; margin-bottom: 12px; }
.tis-service-card-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-blue);
    font-size: 14px;
    font-weight: 600;
    transition: gap 0.2s ease;
}
.tis-service-card:hover .tis-service-card-more { gap: 10px; }

.tis-book-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.tis-book-cover { aspect-ratio: 4 / 3; overflow: hidden; background: #f3f5f9; }
.tis-book-cover img { width: 100%; height: 100%; object-fit: cover; }
.tis-book-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.tis-book-body h3 { font-size: 1.15rem; font-weight: 600; color: #23275c; margin-bottom: 6px; }
.tis-book-meta { font-size: 0.8rem; font-weight: 600; color: var(--brand-blue); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.tis-book-body p { color: #5d666e; font-size: 0.93rem; line-height: 1.65; }

.tis-contact-card {
    background: #fff;
    border-radius: 20px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
}
.tis-contact-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ebf5fb;
    color: var(--brand-blue);
    font-size: 1.3rem;
    margin-bottom: 14px;
}
.tis-contact-card h3 { font-size: 1.1rem; font-weight: 600; color: #23275c; }
.tis-contact-card p { color: #5d666e; margin: 0; line-height: 1.7; }
.tis-contact-card a { color: #23275c; text-decoration: none; }
.tis-contact-card a:hover { color: var(--brand-blue); }
.tis-map, .tis-magazine { border-radius: 20px; overflow: hidden; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); line-height: 0; }
/* Donate: "Sponsor a cause" cards (donate.php #sponsor) */
.tis-sponsor-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tis-sponsor-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(30, 73, 111, 0.14); }
.tis-sponsor-img { aspect-ratio: 1 / 1; overflow: hidden; background: #f3f5f9; }
.tis-sponsor-img img { width: 100%; height: 100%; object-fit: cover; }
.tis-sponsor-body { display: flex; flex-direction: column; flex: 1; padding: 16px 16px 18px; }
.tis-sponsor-body h3 { font-size: 0.98rem; font-weight: 600; color: #23275c; line-height: 1.35; margin-bottom: 6px; }
.tis-sponsor-price { font-size: 1.15rem; font-weight: 700; color: var(--brand-blue); margin-bottom: 12px; }
.tis-sponsor-body .btn { align-self: flex-start; }
.pf-sponsor-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #ebf5fb;
    color: #23275c;
    font-size: 0.9rem;
}
.pf-sponsor-note[hidden] { display: none; }
.pf-sponsor-note i { color: var(--brand-blue); }
.pf-sponsor-note button { margin-left: auto; border: 0; background: none; font-size: 1.3rem; line-height: 1; color: #7a838b; cursor: pointer; }
/* Audited & Certified logos link to their certificate (opens in a new tab) */
.logo-card-link { cursor: pointer; text-decoration: none; }
.logo-card-link:hover { border-color: var(--brand-blue); }
.logo-card-link:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; }