body {
    overflow-x: hidden;
}
/* Home-specific tweaks only */
.awc-hero h1 {
    color: var(--awc-dark);
}

.awc-hero .lead {
    max-width: 50ch;
}

/* === Home Page: Courses & Health Products sections ======================== */

/* General spacing and alignment adjustments */
#courses,
#health-products {
    scroll-margin-top: 6rem; /* keeps anchored scrolling from hiding titles under header */
}

    #courses .awc-section__head,
    #health-products .awc-section__head {
        margin-bottom: 2.5rem;
    }

    /* Make cards equal height and nicely spaced */
    #courses .awc-card,
    #health-products .awc-card {
        height: 100%;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

        /* Subtle hover lift for interactivity */
        #courses .awc-card:hover,
        #health-products .awc-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 28px rgba(0,0,0,.08);
        }

/* Align section content on smaller screens */
@media (max-width: 768px) {
    #courses .awc-section__head,
    #health-products .awc-section__head {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    #courses .btn-brand,
    #health-products .btn-brand {
        width: 100%;
    }

    #learning-and-products {
        background-color: #f7f9f9 !important;
    }

    #learning-and-products.awc-section .row {
        display: block;
    }

    #learning-and-products .awc-card {
        height: auto;
    }
}

/* Fine-tune paragraph spacing inside the health-products cards */
#health-products .awc-card p {
    margin-bottom: 0;
}

/* Optional subtle background for product section */
#health-products {
    background: var(--awc-light, #f7f9f9);
}

/* === Equal Height Fix: Courses + Health Products side-by-side ============= */

#learning-and-products {
    background-color: #f7f9f9 !important;
}

#learning-and-products .awc-heading {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Make both columns stretch evenly on larger screens */
#learning-and-products.awc-section .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* ensures equal height */
}

/* Each card fills the full column height */
#learning-and-products .awc-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    /* Let the content area grow naturally within the card */
    #learning-and-products .awc-card > img {
        flex-shrink: 0; /* image keeps its size */
    }

    #learning-and-products .awc-card > .p-4 {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

/* === Bulletproof equal-height for #learning-and-products ================== */
/* Mobile/Tablet: keep normal Bootstrap flex/stacking */

/* Desktop: use CSS Grid for two equal columns with equal row height */
/* === Two-up grid for #learning-and-products ============================== */

/* Mobile first: stack naturally */
#learning-and-products .awc-twoup {
    display: grid;
    gap: 1.5rem; /* roughly Bootstrap g-4 */
}

/* Desktop: two equal, roomy columns that stretch to equal height */
@media (min-width: 992px) {
    #learning-and-products .awc-twoup {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

        #learning-and-products .awc-twoup > .awc-card {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

            #learning-and-products .awc-twoup > .awc-card > img {
                width: 100%;
                aspect-ratio: 4 / 3; /* matches 768x576 */
                object-fit: cover;
                flex: 0 0 auto;
                display: block;
            }

            #learning-and-products .awc-twoup > .awc-card > .p-4 {
                flex: 1 1 auto; /* fill remaining height */
                display: flex;
                flex-direction: column;
            }

    /* Give this section a bit more breathing room on widescreens */
    #learning-and-products .container-xxl {
        max-width: 1320px; /* bump to taste (1200–1400px range) */
    }
}

/* === Mission Section (Home) ============================================== */

#mission {
    background: var(--awc-accent-bg, #f3f8f7); /* calm neutral surface */
    text-align: center;
    padding-top: var(--awc-section-y, clamp(48px, 6vw, 96px));
    padding-bottom: var(--awc-section-y, clamp(48px, 6vw, 96px));
}

    /* Eyebrow alignment and spacing */
    #mission .awc-eyebrow {
        display: inline-block;
        margin-bottom: var(--awc-space-2);
    }

    /* Center title and control width */
    #mission .awc-title {
        margin-bottom: var(--awc-space-3);
    }

    /* Lead paragraph: slightly larger and softer color */
    #mission .awc-lead {
        color: var(--awc-muted);
        font-size: 1.1rem;
        line-height: 1.7;
    }

    /* Keep paragraphs narrow for readability */
    #mission p {
        max-width: 68ch;
        margin-left: auto;
        margin-right: auto;
        color: var(--awc-dark);
    }

    /* Button spacing */
    #mission .btn {
        margin-top: var(--awc-space-3);
    }

/* Responsive spacing adjustments */
@media (max-width: 768px) {
    #mission {
        text-align: left;
    }

        #mission .btn {
            width: 100%;
        }
}

/* === Mobile layout fix for Our Process section =========================== */
@media (max-width: 768px) {
    /* Center each step block */
    .awc-process__item {
        text-align: center;
        padding-inline: 1.25rem; /* add breathing room on left/right */
    }

    /* Center the number icon */
    .awc-process__icon {
        margin: 0 auto 1rem auto; /* centers horizontally and keeps spacing below */
    }

    /* Let text paragraphs span full width with padding */
    .awc-process__text {
        max-width: 100%;
        margin-inline: auto;
    }

    /* Ensure titles don’t look cramped */
    .awc-process__title {
        margin-bottom: 0.5rem;
    }
}

/* === Wellness Blog (Home) ================================================ */
#wellness-blog .awc-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

    #wellness-blog .awc-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(0,0,0,.08);
    }

/* Keep thumbs consistent (16:9) and crisp */
.awc-blog-thumb {
    display: block;
    aspect-ratio: 3 / 2; /* 768x512 = 3:2; change to 16/9 if your images are 16:9 */
    object-fit: cover;
}

/* Tighten the header spacing on smaller screens */
@media (max-width: 768px) {
    #wellness-blog .awc-section__head {
        gap: .75rem;
    }

    #wellness-blog .btn {
        width: 100%;
    }
}

/* === About Us (Home) - Bold Blue, optimized for contrast ================ */
#about-awc {
    position: relative;
    text-align: center;
    color: #fff;
    padding: 5rem 0;
    background: linear-gradient( 180deg, #1b6f6a 0%, /* deep teal top */
    #2186a3 100% /* brighter modern blue bottom */
    );
    overflow: hidden;
}

    #about-awc::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient( circle at 70% 25%, rgba(255, 255, 255, 0.1), transparent 70% );
        pointer-events: none;
    }

    /* ensure content sits above gradient */
    #about-awc .container {
        position: relative;
        z-index: 1;
    }

    /* Eyebrow label ("About Us") */
    #about-awc .awc-eyebrow {
        color: rgba(255, 255, 255, 0.9); /* bright white, subtle transparency */
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-bottom: var(--awc-space-2);
    }

    /* Section title */
    #about-awc .awc-title {
        color: #fff;
        font-weight: 700;
        margin-bottom: var(--awc-space-3);
    }

    /* Paragraphs */
    #about-awc p {
        max-width: 68ch;
        margin-left: auto;
        margin-right: auto;
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.75;
    }

    /* Button styling */
    #about-awc .btn {
        margin-top: var(--awc-space-3);
        border-color: #fff;
        color: #fff;
        background: transparent;
        transition: background 0.2s ease, color 0.2s ease;
    }

        #about-awc .btn:hover,
        #about-awc .btn:focus {
            background: #fff;
            color: #1b6f6a; /* brand teal text on hover */
        }

/* Responsive tweaks */
@media (max-width: 768px) {
    #about-awc {
        text-align: left;
        padding: 3rem 0;
    }

        #about-awc .btn {
            width: 100%;
        }
}


.awc-awards img {
    filter: grayscale(10%);
    opacity: 0.9;
    border-radius: 10px;
    border: solid 2px #f4f4f4;
}