body {
    overflow-x: hidden !important;
}

html {
    scroll-behavior: smooth !important;
}
/* ======================================================
   SERVICE CARD STYLES (srv-awc)
   Author: Alternative Wellness Center Web Project
   Purpose: Define consistent design and interaction for
            all service cards displayed on the Services page.
   ====================================================== */

/* -------------------------------
   Card Container
   ------------------------------- */
.srv-awc-card {
    /* White background for a clean, modern look */
    background: #fff;
    /* Subtle border to separate the card from the background */
    border: 1px solid #e7ecec;
    /* Rounded corners using the site-wide radius variable */
    border-radius: var(--awc-radius);
    /* Soft shadow for depth and elevation */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    /* Ensures internal content does not overflow rounded corners */
    overflow: hidden;
    /* Smooth hover animation */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    /* Slight lift and stronger shadow when hovering */
    .srv-awc-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    }

/* -------------------------------
   Image Wrapper and Image
   ------------------------------- */
.srv-awc-img-wrap {
    /* Positions overlay absolutely within this wrapper */
    position: relative;
    /* Keeps overlay effects inside card bounds */
    overflow: hidden;
}

.srv-awc-img {
    /* Full width of parent */
    width: 100%;
    /* Fixed height for uniform display across all cards */
    height: 150px;
    /* Crops image proportionally without distortion */
    object-fit: cover;
    /* Keeps image centered when cropped */
    object-position: center;
    /* Smooth zoom effect on hover */
    transition: transform 0.4s ease;
}

/* Slight zoom on hover for depth and visual interest */
.srv-awc-card:hover .srv-awc-img {
    transform: scale(1.05);
}

/* -------------------------------
   Overlay Effect
   ------------------------------- */
.srv-awc-overlay {
    /* Positioned over the image */
    position: absolute;
    top: 0;
    left: 0;
    /* Matches image dimensions */
    width: 100%;
    height: 100%;
    /* Semi-transparent black overlay for contrast */
    background: rgba(0, 0, 0, 0.35);
    /* Hidden by default */
    opacity: 0;
    /* Smooth fade transition */
    transition: opacity 0.3s ease;
    /* Match card corner radius for visual consistency */
    border-top-left-radius: var(--awc-radius);
    border-top-right-radius: var(--awc-radius);
    /* Flexbox to center “Learn More” text both vertically and horizontally */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Overlay text styling */
.srv-awc-overlay-text {
    color: #fff; /* White text for contrast */
    font-size: 0.95rem; /* Slightly smaller than normal text */
    font-weight: 500; /* Medium weight for readability */
    letter-spacing: 0.5px; /* Adds a bit of breathing room */
    text-transform: uppercase; /* Optional: gives it a call-to-action feel */
}

/* Reveal overlay when hovering over card */
.srv-awc-card:hover .srv-awc-overlay {
    opacity: 1;
}

/* -------------------------------
   Text Elements
   ------------------------------- */
.srv-awc-title {
    font-size: 1rem; /* Clean, readable size */
    font-weight: 600; /* Slightly bold for hierarchy */
    color: #111; /* Strong contrast for titles */
}

/* srv-awc: multi-line fade without clamp */
.srv-awc-text {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.45;
    /* set how many lines you want to show */
    --lines: 4;
    /* compute the visual height of those lines */
    max-height: calc(var(--lines) * 1.45em);
    overflow: hidden;
    display: block;
    /* smooth fade near the bottom of the last line */
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
    mask-image: linear-gradient(180deg, #000 70%, transparent);
    /* keep words intact; avoid hyphenation/ligature surprises */
    overflow-wrap: break-word;
    word-break: normal;
    font-feature-settings: "liga" 0, "clig" 0;
}

/* -------------------------------
   “More…” Link
   ------------------------------- */
.srv-awc-more {
    display: inline-block; /* Makes hover effects reliable */
    font-size: 0.9rem; /* Matches paragraph text size */
    color: var(--awc-brand); /* Uses site’s brand color */
    font-weight: 500; /* Emphasize as a subtle CTA */
    transition: color 0.2s ease; /* Smooth hover color transition */
    text-decoration: none; /* Remove underline */
}

/* Darken color slightly on hover for feedback */
.srv-awc-card:hover .srv-awc-more {
    color: #155e5a;
}

/* CTA Card variant */
.srv-awc-card.cta {
    background: var(--awc-brand);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease;
}

    .srv-awc-card.cta:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
        background: #155e5a; /* slightly darker shade of brand color */
    }

    /* Adjust text for white contrast */
    .srv-awc-card.cta .srv-awc-title,
    .srv-awc-card.cta .srv-awc-text,
    .srv-awc-card.cta .srv-awc-more {
        color: #fff;
    }

    /* Remove fade effect inside CTA cards */
    .srv-awc-card.cta .srv-awc-text {
        -webkit-mask-image: none;
        mask-image: none;
        max-height: none;
        overflow: visible;
    }

.srv-hero {
    position: relative;
    color: #fff;
    padding-top: 5rem;
    padding-bottom: 2rem;
    text-align: center;
}

    .srv-hero h1,
    .srv-hero h2,
    .srv-hero p {
        color: #fff;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

#section-kinesiology_2025-12-12 {
    background: linear-gradient(rgba(21, 94, 90, 0.75), rgba(21, 94, 90, 0.75)), url('../../img/services/services-kinesiology2.jpg') center/cover no-repeat;
}

#section-life-coaching {
    background: linear-gradient(rgba(21, 94, 90, 0.75), rgba(21, 94, 90, 0.75)), url('../../img/services/srv-coaching-sunrise.jpg') center/cover no-repeat;
}


#section-biofeedback {
    background: linear-gradient( rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60) ), url('../../img/services/srv-biofeedback.jpg') center/cover no-repeat;
}

#section-biomarker {
    background: linear-gradient( rgba(90, 34, 139, 0.65), rgba(90, 34, 139, 0.45) ), url('../../img/services/srv-biomarker.jpg') center/cover no-repeat;
}

#section-biomat {
    background: linear-gradient( rgba(200, 95, 60, 0.55), rgba(200, 95, 60, 0.40) ), url('../../img/services/services-biomat.png') center/cover no-repeat;
}

#section-bodysweep {
    /* Solid fallback color */
    background-color: #3b9e9a; /* calming teal */
    /* Teal overlay + background image */
    background: linear-gradient( rgba(59, 158, 154, 0.65), rgba(59, 158, 154, 0.45) ), url('../../img/services/services-bodysweep.jpg') center/cover no-repeat;
    color: #fff;
}


#section-ozone {
    background: linear-gradient( rgba(66, 135, 245, 0.55), rgba(66, 135, 245, 0.25) ), url('../../img/services/services-ozone.png') center/cover no-repeat;
}

#section-aromatherapy {
    background: linear-gradient( rgba(108, 150, 116, 0.55), /* sage green */
    rgba(108, 150, 116, 0.45) ), url('../../img/services/srv-aromatherapy.jpg') center/cover no-repeat;
}

#section-laser {
    background: linear-gradient( rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.45) ), url('../../img/services/srv-laser.jpg') center/cover no-repeat;
}

#section-utest {
    background: linear-gradient( rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.45) ), url('../../img/services/srv-utest.jpg') center/cover no-repeat;
}


#section-methylation {
    background: linear-gradient( rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.45) ), url('../../img/services/srv-methylation.jpg') center/cover no-repeat;
}

#section-biome {
    background: linear-gradient( rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.45) ), url('../../img/services/services-biome.png') center/cover no-repeat;
}

#section-booking {
    background: linear-gradient( rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.45) ), url('../../img/services/booking-hero.jpg') center/cover no-repeat;
}

#section-painmanagement {
    background: linear-gradient( rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60) ), url('../../img/services/srv-painmanagement.jpg') center/cover no-repeat;
}

/* Benefit cards – coaching */
.srv-benefits-card {
    border: none;
    border-radius: 1.5rem;
    padding: 1.75rem 1.75rem 1.5rem;
    background: linear-gradient(135deg, #f7fbff 0%, #ffffff 55%, #f4f9ff 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

    .srv-benefits-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.09);
    }

    /* Strong, visible icons for coaching benefits */
    .srv-benefits-card .card-icon {
        width: 52px;
        height: 52px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        /* Make them *very* visible */
        background: #2058a3; /* solid coaching blue */
        color: #ffffff; /* SVG uses currentColor */
    }


    /* Make sure titles/text look tidy */
    .srv-benefits-card .card-title {
        font-weight: 600;
        margin-bottom: 0.45rem;
    }

    .srv-benefits-card .card-text {
        font-size: 0.96rem;
        line-height: 1.6;
    }

/* Simple fade-up animation hook */
.awc-reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: awcFadeUp 0.7s ease-out forwards;
}

/* If you want staggered delay, you can manually add inline styles or nth-child rules */
@keyframes awcFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Full-width hero carousel band */
.ws-services-hero-carousel {
    background: #f4f7f9; /* soft, light contrast with white page */
    position: relative;
    overflow: hidden;
}

/* Make each slide feel like a hero */
.ws-services-hero-slide {
    padding: 3rem 0;
}

@media (min-width: 992px) {
    .ws-services-hero-slide {
        min-height: 420px;
        padding: 4rem 0;
    }
}

/* Full-width hero carousel band */
.ws-services-hero-carousel {
    background: #000; /* Pure black */
    color: #fff; /* White text */
    position: relative;
    overflow: hidden;
}

/* Slide section padding */
.ws-services-hero-slide {
    padding: 3rem 0;
}

@media (min-width: 992px) {
    .ws-services-hero-slide {
        min-height: 420px;
        padding: 5rem 0;
    }
}

/* Hero title in white */
.ws-hero-title {
    font-size: clamp(1.9rem, 2.4vw, 2.6rem);
    font-weight: 600;
    color: #ffffff;
}

/* Supporting text — soft white */
.ws-hero-text {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Pill tag */
.ws-pill {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Bullet list styling */
.ws-hero-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

    .ws-hero-list li {
        position: relative;
        padding-left: 1.4rem;
        margin-bottom: 0.35rem;
        font-size: 1rem;
        color: rgba(255,255,255,0.85);
    }

        .ws-hero-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            top: 0;
            color: #0f766e; /* brand accent or choose #34d399 (emerald) for a glow */
        }

/* Hero image styling */
.ws-services-hero-image-wrapper {
    max-width: 560px;
    margin-inline: auto;
    border-radius: 1.75rem;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55); /* deeper shadow against black */
}

    .ws-services-hero-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Carousel indicators on black */
.ws-hero-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background-color: rgba(255,255,255,0.4);
}

    .ws-hero-indicators button.active {
        background-color: #0f766e; /* keep your brand accent */
    }

/* Carousel arrows visible on black */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1) brightness(150%);
}

/* Make brand buttons visible on black in hero carousel */
.ws-services-hero-carousel .btn-brand {
    background-color: #ffffff !important;
    color: #000 !important;
    border-color: #ffffff !important;
}

    /* Remove shadows if needed */
    .ws-services-hero-carousel .btn-brand:hover {
        background-color: #f1f1f1 !important;
        color: #000 !important;
    }



/* In the hero carousel, hide Bootstrap's default icons */
.ws-services-hero-carousel .carousel-control-prev-icon,
.ws-services-hero-carousel .carousel-control-next-icon {
    background-image: none !important;
    width: 0;
    height: 0;
    padding: 0;
}

/* Larger custom white arrow button */
.ws-services-hero-carousel .ws-hero-arrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem; /* larger circle */
    height: 4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 2.4rem; /* bigger arrow */
    font-weight: 400;
    transition: background 0.25s ease, transform 0.25s ease;
}

.ws-services-hero-carousel .carousel-control-prev:hover .ws-hero-arrow-icon,
.ws-services-hero-carousel .carousel-control-next:hover .ws-hero-arrow-icon {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* Ensure the hero carousel uses a slide animation 
.ws-services-hero-carousel .carousel-inner {
    overflow: hidden; /* required so sliding content doesn't peek out 
}*/
/*
.ws-services-hero-carousel .carousel-item {
    transition: transform 0.7s ease-in-out;  slide duration & easing 
}*/

/* Restore real slide behavior just for the hero carousel */
.ws-services-hero-carousel .carousel-inner {
    position: relative;
    overflow: hidden;
}

.ws-services-hero-carousel .carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    backface-visibility: hidden;
    transition: transform 1s ease-in-out !important;
}

    /* Make sure active/neighbor items are actually shown so the slide can animate */
    .ws-services-hero-carousel .carousel-item.active,
    .ws-services-hero-carousel .carousel-item-next,
    .ws-services-hero-carousel .carousel-item-prev {
        display: block;
    }

.ws-services-hero-carousel {
    overflow-x: hidden !important;
}

    /* Reposition hero arrows to bottom center */
    .ws-services-hero-carousel .carousel-control-prev,
    .ws-services-hero-carousel .carousel-control-next {
        top: auto; /* remove vertical centering */
        bottom: 2.5rem; /* position above indicators */
        width: auto;
        height: auto;
        transform: none;
        display: flex;
        align-items: center;
    }

    /* Move prev left of indicators */
    .ws-services-hero-carousel .carousel-control-prev {
        left: 50%;
        transform: translateX(-120%); /* slide it left from center */
    }

    /* Move next right of indicators */
    .ws-services-hero-carousel .carousel-control-next {
        right: 50%;
        transform: translateX(120%); /* slide it right from center */
    }

    /* Ensure indicators stay centered and not influenced by arrows */
    .ws-services-hero-carousel .ws-hero-indicators {
        position: relative;
        bottom: 0;
        margin-top: 1.5rem;
    }

.ws-img {
    width: 400px !important;
    height: 220px !important; /* or 240px, tweak as needed */
    /*object-position: top;  keep faces / top of image visible */
    border-radius: 30px !important;
}

.carousel-caption {
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
}

    .carousel-caption h5 {
        font-size: 1.5rem;
    }

    .carousel-caption p {
        font-size: 1rem;
    }

.carousel-item {
    transition: transform 1s ease-in-out;
    /*height: 450px !important;*/
}

.carousel-img {
    height: auto !important;
    object-fit: unset !important;
    object-position: unset !important;
}

#newsCarousel .carousel-item {
    height: 400px; /* Adjust as needed for your design */
}

    #newsCarousel .carousel-item img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

.carousel-indicators-custom {
    position: relative;
    z-index: 10;
}

.indicator-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 6px;
    overflow: hidden;
    position: relative;
}

    .indicator-dot::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0%;
        background-color: #0a3356; /* Yellow fill */
        transition: width 0s;
        z-index: 1;
    }

    .indicator-dot.active::before {
        transition: width linear;
        width: 100%;
    }

@media (max-width: 576px) {
    .srv-awc-card {
        /* keep card itself full width; no forced text-align center */
    }

        .srv-awc-card .card-icon {
            margin: 0 auto 0.75rem auto; /* center the icon */
            display: grid;
            place-items: center;
        }

        .srv-awc-card .card-title,
        .srv-awc-card .card-text {
            text-align: left; /* ✅ better readability */
            max-width: 34ch; /* nice line length */
            margin-inline: auto; /* centers the text block as a column */
        }
}

@media (max-width: 576px) {
    .srv-awc-img {
        height: 250px; /* a bit taller for comfort */
        object-fit: cover;
        object-position: top center; /* 👈 keep the top of the image in view */
    }
}

.srv-bodysweep-card {
    border: 0;
    /* subtle lift to distinguish them from plain sections */
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
    padding: 20px;
}

.bodysweep-blue {
    border: solid 1px #c6f3ed;
}

.bodysweep-beige {
    border: solid 1px #f2d4bd;
}

.srv-bodysweep-callout {
    background-color: #edf3ff;
    border: solid 1px #adc5f6;
}

.srv-bodysweep-callout i {
    opacity: 0.8;
    padding: 20px;
}

.srv-bodysweep-testimonial {
    padding: 20px !important;
}

.srv-bodysweep-buffer {
    width: 100%;
    height: 0px;
}

.bs-awc-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

    .bs-awc-list li {
        position: relative;
        padding-left: 2rem;
        margin-bottom: 0.6rem;
        line-height: 1.5;
        color: #1f2933;
    }

        /* Green circle */
        .bs-awc-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.35em;
            width: 1.1rem;
            height: 1.1rem;
            border-radius: 50%;
            background-color: #dcfce7; /* soft wellness green */
            border: 1px solid #86efac;
        }

        /* Checkmark */
        .bs-awc-list li::after {
            content: "✓";
            position: absolute;
            left: 0.28rem;
            top: 0.22em;
            font-size: 0.7rem;
            font-weight: 700;
            color: #166534; /* deep calm green */
            padding-top: 4px;
        }

        /* Optional subtle hover polish */
        .bs-awc-list li:hover::before {
            background-color: #bbf7d0;
            transition: background-color 0.15s ease;
        }


.srv-awc-flag {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem; /* rounded square */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #76c2b8; /* same green you used before */
    color: #ffffff; /* white icon */
    border: solid 1px #1e6f64;
    /* left-aligned inside the card */
    margin: 0 0 1rem 0; /* only bottom margin now */
    margin-top: 15px;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    font-size: 1.1rem; /* size for the check icon */
    padding-top: 4px;
    padding-right: 2px;
}

    .srv-awc-flag .bi {
        line-height: 1;
    }

.srv-awc-card-benefit {
    border: 1px solid #e5decf;
    border-radius: 0.75rem;
    padding: 1.25rem 1.25rem 1.5rem;
    background-color: #fafcfc; /* light warm cream */
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

    .srv-awc-card-benefit:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
        border-color: #e0cfa8;
    }


.srv-awc-cardt-head-benefi .card-title {
    font-size: 1rem;
    font-weight: 600;
}


.srv-awc-card-benefit .card-text {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
}

/* Kinesiology hero: full-width image with left overlay panel */
#section-kinesiology.srv-hero--image-panel {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: url('../../img/services/services-kinesiology2.jpg') center/cover no-repeat;
    color: #fff;
}

    /* Make sure container content sits above the background */
    #section-kinesiology.srv-hero--image-panel .container {
        position: relative;
        z-index: 1;
    }

/* Left overlay panel (similar concept to awc-hero__panel) */
#section-kinesiology .srv-hero__panel {
    max-width: 540px; /* fixed-ish width, like your blue panel */
    background: rgba(21, 94, 90, 0.9); /* semi-transparent teal/blue */
    color: #ffffff;
    padding: 2.5rem 2.75rem;
    border-radius: 1.5rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

    /* Text styling inside panel */
    #section-kinesiology .srv-hero__panel h1 {
        color: #ffffff;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    }

    #section-kinesiology .srv-hero__panel .lead {
        color: rgba(255, 255, 255, 0.9);
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    }

    /* Button spacing */
    #section-kinesiology .srv-hero__panel .btn-brand {
        margin-top: 0.25rem;
    }

/* Mobile tweaks: let panel breathe */
@media (max-width: 767.98px) {
    #section-kinesiology.srv-hero--image-panel {
        padding-top: 4rem;
        padding-bottom: 4rem;
        text-align: left; /* we keep text-start, so this is just a safety */
    }

    #section-kinesiology .srv-hero__panel {
        padding: 2rem 1.75rem;
        max-width: 100%;
    }
}

/* ============================================
   Service Hero (2-column: text + image)
   Prefix: awc-srvc-
   ============================================ */

.awc-srvc-hero {
    background-color: #f5faf9; /* soft neutral behind panel/image */
    padding: 4rem 0;
}

/* Left panel (text) */
.awc-srvc-hero__panel {
    background-color: rgba(38, 75, 133, 0.94); /* rich blue */
    color: #ffffff;
    padding: 2.5rem 2.75rem;
    border-radius: 1.5rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}

/* Optional little pill/eyebrow */
.awc-srvc-hero__kicker {
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.12);
}

/* Make sure text wraps nicely, even with long words */
.awc-srvc-hero__panel h1,
.awc-srvc-hero__panel .lead {
    color: #ffffff;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Buttons row inside panel */
.awc-srvc-hero__actions {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Right column: image wrapper */
.awc-srvc-hero__image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.awc-srvc-hero__image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 1.5rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}

/* --------- Responsive tweaks --------- */

@media (max-width: 991.98px) {
    .awc-srvc-hero {
        padding: 3rem 0;
    }

    .awc-srvc-hero__panel {
        padding: 2rem 2rem;
        margin-bottom: 2rem; /* panel on top, image below */
    }
}

@media (max-width: 575.98px) {
    .awc-srvc-hero__panel {
        padding: 1.75rem 1.5rem;
    }

        .awc-srvc-hero__panel h1 {
            font-size: 1.7rem;
        }

    .awc-srvc-hero__actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

.awc-services-hero {
    width: 100%;
    min-height: 600px;
    /* background-color: rgba(38, 75, 133, 0.94); rich blue */
    padding: 0 !important;
    padding-bottom: 10px;
}

.awc-services-hero-column {
    padding: 0 !important;
    display: flex; /* helps children stretch full height */
}

.awc-services-hero-left-panel,
.awc-services-hero-right-panel {
    width: 100%;
    height: 100%;
    padding: 0 !important;
}

.awc-services-hero-left-panel {
    background-color: rgb(34, 52, 114) !important; /* nice royal blue overlay */
}

.awc-services-hero-right-panel {
    background-color: rgba(255, 255, 255, 0.15); /* fallback overlay tint */
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.awc-services-hero-left-panel {
    width: 100%;
    height: 100%;
    background-color: rgba(21, 94, 90, 0.75);
    padding: 0 !important;
    display: flex;
    align-items: center; /* vertically center the text */
}

.awc-services-hero-content {
    padding: 2rem; /* breathing room for the text 
    padding-bottom: 0px !important;*/
    text-align: left; /* keeps it readable on desktop */
}

/* Kinesiology page */
.awc-services-hero--kinesiology .awc-services-hero-right-panel {
    background-image: url("../../img/services/services-kinesiology2.png");
}

/* Coaching page */
.awc-services-hero--coaching .awc-services-hero-right-panel {
    background-image: url("../../img/services/coaching.png");
}

/* Biofeedback page */
.awc-services-hero--biofeedback .awc-services-hero-right-panel {
    background-image: url("../../img/services/srv-biofeedback1.png");
}

/* BioMarker page */
.awc-services-hero--biomarker .awc-services-hero-right-panel {
    background-image: url("../../img/services/services-biomark2.png");
}

/* Bioat page */
.awc-services-hero--biomat .awc-services-hero-right-panel {
    background-image: url("../../img/services/services-biomat2.png");
}

/* Bodyseep page */
.awc-services-hero--bodysweep .awc-services-hero-right-panel {
    background-image: url("../../img/services/services-bodysweep.jpg");
}

/* Ozone page */
.awc-services-hero--ozone .awc-services-hero-right-panel {
    background-image: url("../../img/services/services-ozone2.png");
}

/* Pain management page */
.awc-services-hero--painmanagement .awc-services-hero-right-panel {
    background-image: url("../../img/services/srv-pain.jpg");
}

/* Laser page */
.awc-services-hero--laser .awc-services-hero-right-panel {
    background-image: url("../../img/services/services-laser2.png");
}

/* Aromatherapy page */
.awc-services-hero--aromatherapy .awc-services-hero-right-panel {
    background-image: url("../../img/services/services-aromatherapy2.png");
}

/* Urine test page */
.awc-services-hero--utest .awc-services-hero-right-panel {
    background-image: url("../../img/services/srv-utestkit2.png");
}

/* Methylation page */
.awc-services-hero--methylation .awc-services-hero-right-panel {
    background-image: url("../../img/services/srv-methylation2.png");
}

/* Biome testing page */
.awc-services-hero--biome .awc-services-hero-right-panel {
    background-image: url("../../img/services/services-biome.png");
}

.awc-services-main--biofeedback {
    max-width: 400px;
}

@media (max-width: 767.98px) {
    .awc-services-hero {
        height: auto; /* let it grow with content */
    }

    .awc-services-hero-left-panel,
    .awc-services-hero-right-panel {
        height: auto; /* no forced full height on stacked layout */
        min-height: 320px; /* optional: keeps image/text areas from feeling too short */
    }

    .awc-services-hero-content {
        padding: 2.25rem 1.75rem;
        text-align: center; /* more natural on mobile */
    }

    .awc-services-hero .display-5 {
        font-size: 1.75rem; /* smaller heading for small screens */
        line-height: 1.2;
    }

    .awc-services-hero .lead {
        font-size: 1rem;
    }

    .awc-services-main--biofeedback {
        max-width: 100%;
    }
}

/* =========================================================
   Pain Management / Conditions Table – Color-Forward
   ========================================================= */

.pm-awc-table-wrap {
    background: linear-gradient(135deg, #eef2ff, #fdf2f8);
    padding: 1.75rem;
    border-radius: 22px;
}

/* Base table */
.pm-awc-table-conditions {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

    /* Base cells */
    .pm-awc-table-conditions td {
        position: relative;
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
        color: #1f2933;
        border-top: 1px solid #eef2f7;
        font-weight: 500;
        overflow: hidden;
    }

    /* Zebra striping */
    .pm-awc-table-conditions tr:nth-child(odd) td {
        background-color: #f9fafc;
    }

    .pm-awc-table-conditions tr:nth-child(even) td {
        background-color: #ffffff;
    }

    /* ---------------------------------------------------------
   High-contrast BLUE overlays per column (no gray/navy)
   --------------------------------------------------------- */
    .pm-awc-table-conditions td::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.44; /* strong contrast */
        pointer-events: none;
    }

    /* Column 1 – Deep cobalt blue (PRIMARY) */
    .pm-awc-table-conditions td:nth-child(1)::before {
        background: linear-gradient( 120deg, rgba(29, 78, 216, 0.85), /* cobalt blue */
        rgba(59, 130, 246, 0.35) );
    }

    /* Column 2 – Royal blue */
    .pm-awc-table-conditions td:nth-child(2)::before {
        background: linear-gradient( 120deg, rgba(37, 99, 235, 0.75), rgba(96, 165, 250, 0.35) );
    }

    /* Column 3 – Sky blue */
    .pm-awc-table-conditions td:nth-child(3)::before {
        background: linear-gradient( 120deg, rgba(59, 130, 246, 0.65), rgba(147, 197, 253, 0.40) );
    }

    /* Column 4 – Ice blue */
    .pm-awc-table-conditions td:nth-child(4)::before {
        background: linear-gradient( 120deg, rgba(96, 165, 250, 0.55), rgba(219, 234, 254, 0.45) );
    }

    /* Column 5 – Very light blue */
    .pm-awc-table-conditions td:nth-child(5)::before {
        background: linear-gradient( 120deg, rgba(147, 197, 253, 0.50), rgba(239, 246, 255, 0.55) );
    }


    .pm-awc-table-conditions td:not(:first-child) {
        color: #0f172a;
    }


    /* ---------------------------------------------------------
   Subtle hover polish (still informational)
   --------------------------------------------------------- */
    .pm-awc-table-conditions tr:hover td {
        background: linear-gradient( 90deg, rgba(37, 99, 235, 0.06), rgba(15, 23, 42, 0.02) );
        transition: background 0.18s ease;
    }

    /* Empty cells */
    .pm-awc-table-conditions td:empty {
        background-color: #f8fafc;
    }

.pm-awc-tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 8px; /* not “pill” */
    background: rgba(15,23,42,0.04); /* subtle label */
    border: 1px solid rgba(15,23,42,0.06);
    color: #0f172a;
    font-weight: 600;
}

/* ---------------------------------------------------------
   Mobile: remove horizontal scrolling + wrap cells nicely
   --------------------------------------------------------- */
@media (max-width: 576px) {

    /* Stop the Bootstrap horizontal scrollbar */
    .pm-awc-table-responsive {
        overflow-x: visible !important;
    }

    /* Turn each row into a wrapped grid */
    .pm-awc-table-conditions tbody tr {
        display: flex;
        flex-wrap: wrap;
    }

    /* Make cells behave like tiles */
    .pm-awc-table-conditions tbody td {
        flex: 1 1 50%; /* 2 per row */
        width: 50%;
        box-sizing: border-box;
        padding: 0.7rem 0.75rem;
        font-size: 0.9rem;
        border-top: 1px solid #eef2f7;
    }

        /* If you want the first item to stand out, make it full-width */
        .pm-awc-table-conditions tbody td:first-child {
            flex: 1 1 100%;
            width: 100%;
        }

    /* Optional: slightly reduce overlay intensity on mobile */
    .pm-awc-table-conditions td::before {
        opacity: 0.36;
    }

    .awc-services-main--biofeedback {
        max-width: 100%;
    }
}