/* ============================================================
   STYLE.CSS - My Instant Midwife
   ============================================================
   Table of Contents:
   1.  Reset & Base Styles
   2.  Reusable Buttons
   3.  Header / Navbar
   4.  Hero Section (Homepage)
   5.  Who We Are Section
   6.  Packages / What We Offer
   7.  The Midwife Section
   8.  Where Do We Serve
   9.  Testimonials Slider
   10. Gallery Strip
   11. Questions CTA & Footer
   12. Inner Pages - Hero Banner
   13. About Page (Who We Are)
   14. Courses Page
   15. Testimonials Page
   16. FAQ Page
   17. Contact Page
   18. Thank You Section
   19. Get in Touch Section
   20. Responsive Breakpoints
   ============================================================ */


/* ==========================================================
   1. RESET & BASE STYLES
   ========================================================== */

:root {
    --primary-color: #B6ACA0;
    --primary-hover: #a09486;
    --text-dark: #000000;
    --text-light: #ffffff;
    --bg-dark: #1E1E1E;

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Albert Sans', sans-serif;
    --font-script: 'Rochester', cursive;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #FFFFFF;
    font-family: var(--font-body);
    color: var(--text-dark);
    overflow-x: hidden;
}

/* Main container - centres content with max-width */
.homepage {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background: #FFFFFF;
    padding-top: 154px;
}


/* ==========================================================
   2. REUSABLE BUTTONS
   ========================================================== */

/* Beige CTA button (primary) */
.btn-beige {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--primary-color);
    border-radius: 10px;
    padding: 9px 20px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 36px;
    text-transform: uppercase;
    color: var(--text-dark);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-beige i {
    font-size: 14px;
    transition: transform 0.2s;
}

.btn-beige:hover {
    background: #a09486;
    transform: translateY(-2px);
}

/* Dark CTA button (secondary) */
.btn-dark {
    background: #000000;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 15px;
    padding: 9px 30px;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.2s;
}

.btn-dark:hover {
    background: #2c2c2c;
    transform: translateY(-2px);
}

/* Outline button (used on inner page heroes) */
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #B6ACA0;
    border: 2px solid #B6ACA0;
    border-radius: 10px;
    padding: 9px 30px;
    font-family: 'Albert Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 36px;
    text-transform: uppercase;
    color: #000000;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    margin-top: 30px;
}

.btn-outline i {
    font-size: 14px;
    transition: transform 0.2s;
}

.btn-outline:hover {
    background: transparent;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* Diagonal up-right arrow for buttons */
.diag-icon {
    transform: rotate(-45deg);
    display: inline-block;
}


/* ==========================================================
   3. HEADER / NAVBAR
   Fixed white bar with logo, nav links, and Book Now CTA.
   ========================================================== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 154px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 80px;
    z-index: 1000;
    background: #FFFFFF;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

/* Logo container */
.logo {
    width: 193px;
    height: 154px;
    display: flex;
    align-items: center;
}

.logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Desktop navigation links */
.nav-links {
    display: flex;
    gap: 50px;
    list-style: none;
}

.nav-mobile-cta {
    display: none;
}

.nav-links li a {
    font-family: 'Albert Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 44px;
    text-transform: uppercase;
    color: #000000;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.2s;
}

/* Hover & active state for nav links */
.nav-links li a:hover,
.nav-links li a.active {
    color: #B6ACA0;
}

/* Book Now button in header */
.book-now-btn {
    background: var(--primary-color);
    border-radius: 10px;
    padding: 9px 30px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--text-dark);
    text-decoration: none;
    transition: all 0.3s ease;
}

.book-now-btn:hover {
    background: #a09486;
    transform: translateY(-2px);
}

/* Mobile hamburger button - hidden on desktop */
.mobile-menu-btn {
    display: none;
    background: #B6ACA0;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    font-size: 24px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
    width: 24px;
    height: 2px;
    background: #000000;
    border-radius: 2px;
}

.hamburger-icon {
    position: relative;
    display: block;
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.hamburger-icon::before {
    top: -7px;
}

.hamburger-icon::after {
    top: 7px;
}


/* ==========================================================
   4. HERO SECTION (Homepage)
   Full-bleed background image with text overlay.
   ========================================================== */

.hero {
    position: relative;
    width: 100%;
    height: 980px;
    margin-top: 0;
    overflow: hidden;
}

/* Background image (absolute fill) */
.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}

/* Dark overlay on hero image */
.hero-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
}

/* Hero text content - positioned absolutely */
.hero-content {
    position: absolute;
    left: 120px;
    top: 240px;
    z-index: 2;
}

.hero-welcome {
    font-size: 18px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FFFFFF;
    font-weight: 500;
    margin-bottom: 20px;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 78px;
    line-height: 94px;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    max-width: 729px;
    margin-bottom: 40px;
}

.hero-desc {
    font-size: 21px;
    line-height: 38px;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    max-width: 655px;
    margin-bottom: 30px;
}

/* CTA button below hero text */
.subscription-btn {
    position: absolute;
    left: 120px;
    top: 640px;
    z-index: 2;
}


/* ==========================================================
 /* ==========================================================
   5. WHO WE ARE SECTION
   Dark background, image left + text right.
   ========================================================== */
.who-we-are {
    position: relative;
    background: #1E1E1E;
    padding: 100px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 80px;
}

.who-left {
    margin-left: 0;
    max-width: 500px;
    flex: 0 0 auto;
}

.who-left img {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

.who-right {
    margin-right: 0;
    max-width: 600px;
    color: white;
    flex: 0 1 600px;
}

.who-right h2 {
    font-family: 'Playfair Display', serif;
    font-size: 60px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin-bottom: 15px;
}

.who-right h3 {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #D4B88C;
    margin-bottom: 20px;
}

.who-right .midwife-names {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

.who-right p {
    font-size: 20px;
    line-height: 42px;
    opacity: 0.8;
    margin-bottom: 40px;
}

/* ==========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================== */

/* Large Desktop 1920px */
@media (min-width: 1920px) {
    .who-we-are {
        gap: 120px;
        padding: 120px 0;
    }
    
    .who-left {
        max-width: 550px;
    }
    
    .who-right {
        max-width: 650px;
    }
    
    .who-right h2 {
        font-size: 70px;
    }
    
    .who-right h3 {
        font-size: 32px;
    }
    
    .who-right .midwife-names {
        font-size: 24px;
    }
    
    .who-right p {
        font-size: 22px;
        line-height: 44px;
    }
}

/* Desktop 1440px */
@media (max-width: 1440px) {
    .who-we-are {
        gap: 60px;
    }
    
    .who-left {
        max-width: 450px;
    }
    
    .who-right {
        max-width: 550px;
    }
    
    .who-right h2 {
        font-size: 55px;
    }
    
    .who-right p {
        font-size: 19px;
        line-height: 38px;
    }
}

/* Laptop 1366px */
@media (max-width: 1366px) {
    .who-we-are {
        gap: 50px;
        padding: 80px 0;
    }
    
    .who-left {
        max-width: 420px;
    }
    
    .who-right {
        max-width: 520px;
    }
    
    .who-right h2 {
        font-size: 52px;
    }
    
    .who-right h3 {
        font-size: 26px;
    }
    
    .who-right .midwife-names {
        font-size: 21px;
    }
    
    .who-right p {
        font-size: 18px;
        line-height: 36px;
    }
}

/* Laptop Small 1200px */
@media (max-width: 1200px) {
    .who-we-are {
        gap: 40px;
        padding: 70px 40px;
    }
    
    .who-left {
        max-width: 380px;
    }
    
    .who-right {
        max-width: 480px;
    }
    
    .who-right h2 {
        font-size: 48px;
    }
    
    .who-right h3 {
        font-size: 24px;
    }
    
    .who-right .midwife-names {
        font-size: 20px;
    }
    
    .who-right p {
        font-size: 17px;
        line-height: 34px;
        margin-bottom: 35px;
    }
}

/* Tablet Landscape 1024px */
@media (max-width: 1024px) {
    .who-we-are {
        gap: 35px;
        padding: 60px 30px;
    }
    
    .who-left {
        max-width: 350px;
    }
    
    .who-right {
        max-width: 450px;
    }
    
    .who-right h2 {
        font-size: 44px;
    }
    
    .who-right h3 {
        font-size: 22px;
    }
    
    .who-right .midwife-names {
        font-size: 19px;
    }
    
    .who-right p {
        font-size: 16px;
        line-height: 32px;
    }
}

/* Tablet Portrait 992px */
@media (max-width: 992px) {
    .who-we-are {
        flex-direction: column;
        text-align: center;
        padding: 60px 20px;
        gap: 40px;
    }
    
    .who-left {
        margin-left: 0;
        margin-bottom: 0;
        max-width: 450px;
        flex: 0 0 auto;
    }
    
    .who-right {
        margin-right: 0;
        max-width: 90%;
        text-align: center;
    }
    
    .who-right h2 {
        font-size: 48px;
        text-align: center;
    }
    
    .who-right h3 {
        font-size: 28px;
        text-align: center;
    }
    
    .who-right .midwife-names {
        font-size: 22px;
        text-align: center;
    }
    
    .who-right p {
        font-size: 18px;
        line-height: 32px;
        text-align: center;
    }
}

/* Mobile Large 768px */
@media (max-width: 768px) {
    .who-we-are {
        padding: 50px 20px;
        gap: 35px;
    }
    
    .who-left {
        max-width: 400px;
    }
    
    .who-right h2 {
        font-size: 40px;
    }
    
    .who-right h3 {
        font-size: 24px;
    }
    
    .who-right .midwife-names {
        font-size: 20px;
    }
    
    .who-right p {
        font-size: 17px;
        line-height: 30px;
        margin-bottom: 30px;
    }
    
    .btn-beige {
        padding: 12px 28px;
        font-size: 14px;
    }
}

/* Mobile Medium 576px */
@media (max-width: 576px) {
    .who-we-are {
        padding: 40px 15px;
        gap: 30px;
    }
    
    .who-left {
        max-width: 100%;
    }
    
    .who-right h2 {
        font-size: 36px;
        margin-bottom: 12px;
    }
    
    .who-right h3 {
        font-size: 22px;
        margin-bottom: 15px;
    }
    
    .who-right .midwife-names {
        font-size: 18px;
        margin-bottom: 15px;
    }
    
    .who-right p {
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 25px;
    }
}

/* Mobile Small 375px */
@media (max-width: 375px) {
    .who-we-are {
        padding: 35px 12px;
        gap: 25px;
    }
    
    .who-right h2 {
        font-size: 32px;
    }
    
    .who-right h3 {
        font-size: 20px;
    }
    
    .who-right .midwife-names {
        font-size: 17px;
    }
    
    .who-right p {
        font-size: 15px;
        line-height: 26px;
    }
}

/* Mobile Extra Small 320px */
@media (max-width: 320px) {
    .who-we-are {
        padding: 30px 10px;
    }
    
    .who-right h2 {
        font-size: 28px;
    }
    
    .who-right h3 {
        font-size: 18px;
    }
    
    .who-right .midwife-names {
        font-size: 16px;
    }
    
    .who-right p {
        font-size: 14px;
        line-height: 24px;
    }
}

/* About Us Page - Who We Are Section */
.who-we-are-about {
    position: relative;
    background: #1E1E1E;
    padding: 100px 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 80px;
}

.who-left-about {
    margin-left: 0;
    max-width: 400px;
    flex: 0 0 auto;
    position: sticky;
    top: 100px;
}

.who-left-about img {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

.who-right-about {
    margin-right: 0;
    max-width: 700px;
    color: white;
    flex: 0 1 700px;
}

.who-right-about h2 {
    font-family: 'Playfair Display', serif;
    font-size: 60px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin-bottom: 15px;
}

.who-right-about h3 {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #D4B88C;
    margin-bottom: 20px;
}

.who-right-about p {
    font-size: 18px;
    line-height: 32px;
    opacity: 0.85;
    margin-bottom: 25px;
}

.who-right-about p strong {
    font-size: 24px;
    color: #FFFFFF;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 10px;
}

/* Responsive Design */
/* Large Desktop 1920px */
@media (min-width: 1920px) {
    .who-we-are-about {
        justify-content: center;
        gap: 100px;
    }
    
    .who-left-about {
        max-width: 450px;
    }
    
    .who-right-about {
        max-width: 750px;
    }
}

/* Desktop 1440px */
@media (max-width: 1440px) {
    .who-we-are-about {
        gap: 60px;
    }
    
    .who-left-about {
        max-width: 380px;
    }
    
    .who-right-about {
        max-width: 650px;
    }
}

/* Laptop 1366px */
@media (max-width: 1366px) {
    .who-we-are-about {
        gap: 50px;
    }
    
    .who-left-about {
        max-width: 360px;
    }
    
    .who-right-about {
        max-width: 600px;
    }
    
    .who-right-about h2 {
        font-size: 52px;
    }
    
    .who-right-about p {
        font-size: 17px;
        line-height: 30px;
    }
}

/* Laptop Small 1200px */
@media (max-width: 1200px) {
    .who-we-are-about {
        gap: 40px;
        padding: 80px 40px;
    }
    
    .who-left-about {
        max-width: 340px;
    }
    
    .who-right-about {
        max-width: 550px;
    }
    
    .who-right-about h2 {
        font-size: 48px;
    }
    
    .who-right-about p {
        font-size: 16px;
        line-height: 28px;
    }
}

/* Tablet 992px */
@media (max-width: 992px) {
    .who-we-are-about {
        flex-direction: column;
        padding: 60px 20px;
        gap: 40px;
        align-items: center;
        text-align: center;
    }
    
    .who-left-about {
        margin-left: 0;
        max-width: 400px;
        position: relative;
        top: 0;
        text-align: center;
    }
    
    .who-left-about img {
        max-width: 100%;
        margin: 0 auto;
    }
    
    .who-right-about {
        margin-right: 0;
        max-width: 100%;
        text-align: center;
    }
    
    .who-right-about h2 {
        font-size: 44px;
        text-align: center;
    }
    
    .who-right-about h3 {
        font-size: 28px;
        text-align: center;
    }
    
    .who-right-about p strong {
        text-align: center;
        display: block;
    }
}

/* Mobile 768px */
@media (max-width: 768px) {
    .who-we-are-about {
        padding: 50px 15px;
    }
    
    .who-right-about h2 {
        font-size: 36px;
    }
    
    .who-right-about h3 {
        font-size: 24px;
    }
    
    .who-right-about p {
        font-size: 15px;
        line-height: 26px;
    }
    
    .who-right-about p strong {
        font-size: 20px;
    }
}

/* Mobile Small 576px */
@media (max-width: 576px) {
    .who-we-are-about {
        padding: 40px 15px;
        gap: 30px;
    }
    
    .who-left-about {
        max-width: 100%;
    }
    
    .who-right-about h2 {
        font-size: 32px;
    }
    
    .who-right-about h3 {
        font-size: 22px;
    }
    
    .who-right-about p {
        font-size: 14px;
        line-height: 24px;
    }
    
    .who-right-about p strong {
        font-size: 18px;
    }
}

/* ============================================
   PACKAGES SECTION - IMPROVED VERTICAL SPACING
   ============================================ */
.packages {
    /* Background image – larger height via extra padding top+bottom */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    
    /* KEY FIX: increase section height with generous vertical padding 
       This gives breathing space above "WHAT WE OFFER" and below "BEGIN YOUR JOURNEY" button */
    padding: 90px 0 100px;
    
    position: relative;
    isolation: isolate;
}

/* Subtle overlay for better text readability */
.packages::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(253, 249, 244, 0.12);
    pointer-events: none;
    z-index: 1;
}

/* Ensure content sits above overlay */
.packages > * {
    position: relative;
    z-index: 2;
}

/* ============================================
   SECTION SUBHEADING
   ============================================ */
.section-sub {
    font-size: 18px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #B6ACA0;
    margin-bottom: 18px;
    font-weight: 500;
    text-align: center;
}

/* ============================================
   MAIN HEADING
   ============================================ */
.packages h2 {
    font-family: 'Playfair Display', serif;
    font-size: 50px;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    color: #2C2823;
    text-align: center;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.packages h2 .highlight {
    position: relative;
    display: inline-block;
}

.packages h2 .highlight::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    height: 12px;
    background: rgba(182, 172, 160, 0.28);
    z-index: -1;
    border-radius: 4px;
}

/* ============================================
   DESCRIPTION TEXT
   ============================================ */
.packages-desc {
    font-size: 21px;
    line-height: 1.5;
    opacity: 0.85;
    max-width: 1044px;
    margin: 0 auto 56px auto;
    color: #3e3a35;
    font-weight: 400;
    text-align: center;
    padding: 0 24px;
}

/* ============================================
   CARDS CONTAINER
   ============================================ */
.card-container {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    padding: 0 115px;
}

/* ============================================
   INDIVIDUAL PACKAGE CARD
   ============================================ */
.package-card {
    background: #FFFFFF;
    border-radius: 30px;
    width: 360px;
    max-width: 100%;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    border: 1px solid #f0eae3;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.package-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Collapsed state - fixed height with gradient fade */
.package-card:not([data-expanded="true"]) {
    max-height: 520px;
    overflow: hidden;
    position: relative;
}

.package-card:not([data-expanded="true"]) .check-list {
    max-height: 180px;
    overflow: hidden;
    position: relative;
}

/* Gradient overlay for collapsed state */
.package-card:not([data-expanded="true"]) .check-list::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none;
}

/* Expanded state - full height */
.package-card[data-expanded="true"] {
    max-height: 2000px;
    overflow: visible;
}

.package-card[data-expanded="true"] .check-list {
    max-height: none;
    overflow: visible;
}

.package-card[data-expanded="true"] .check-list::after {
    display: none;
}

/* Card image area */
.card-img {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center 30%;
    border-radius: 30px 30px 18px 18px;
    margin-bottom: 18px;
}

/* Card title */
.card-title {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 500;
    margin: 12px 24px 0 24px;
    text-align: left;
    color: #2C2823;
    letter-spacing: -0.3px;
}

/* Feature checklist */
.check-list {
    margin: 20px 24px 16px 24px;
    flex: 1;
    transition: max-height 0.4s ease;
}

.check-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #2e2a26;
    opacity: 0.85;
    text-align: left;
}

.check-item i {
    color: #B6ACA0;
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    min-width: 18px;
}

/* Price display */
.price {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 600;
    margin: 8px 24px 0 24px;
    text-align: left;
    color: #1e2a2f;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.price-period {
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #7d6e5d;
}

.price-note {
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #9b8e7e;
    margin: 4px 24px 0 24px;
    text-align: left;
    line-height: 1.4;
}

/* Expand/Collapse Button */
.expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: #B6ACA0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 20px;
    margin: 8px 24px 0 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #e5ddd3;
    border-radius: 50px;
    width: calc(100% - 48px);
}

.expand-btn:hover {
    background: #f5f0ea;
    color: #8f7f6b;
    border-color: #d4cabe;
}

.expand-icon {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.package-card[data-expanded="true"] .expand-icon {
    transform: rotate(180deg);
}

/* Card booking button */
.card-btn {
    background: #B6ACA0;
    width: calc(100% - 48px);
    margin: 16px 24px 24px 24px;
    border-radius: 40px;
    text-align: center;
    padding: 14px 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.8px;
    color: #1f1c18;
    text-decoration: none;
    display: inline-block;
    transition: 0.2s;
    border: none;
    cursor: pointer;
}

.card-btn:hover {
    background: #a09486;
    transform: translateY(-2px);
    color: #000;
}

.diag-icon {
    margin-left: 8px;
    font-size: 12px;
    transition: transform 0.2s;
}

.card-btn:hover .diag-icon {
    transform: translateX(4px);
}

/* ============================================
   BEGIN YOUR JOURNEY BUTTON
   ============================================ */
.begin-journey {
    text-align: center;
    margin-top: 72px;
}

.btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #2C2823;
    padding: 14px 38px;
    border-radius: 40px;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    text-decoration: none;
    transition: 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-dark:hover {
    background: #1f1c18;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1280px) {
    .card-container {
        padding: 0 40px;
    }
    .packages {
        padding: 80px 0 90px;
    }
}

@media (max-width: 1024px) {
    .packages {
        padding: 75px 0 85px;
    }
    .packages h2 {
        font-size: 42px;
        margin-bottom: 22px;
    }
    
    .packages-desc {
        font-size: 18px;
        line-height: 1.45;
        margin-bottom: 48px;
        padding: 0 20px;
    }
    
    .card-container {
        gap: 28px;
        padding: 0 30px;
    }
    
    .package-card {
        width: 340px;
    }
    
    .card-title {
        font-size: 24px;
    }
    
    .check-item {
        font-size: 13px;
        line-height: 1.45;
        margin-bottom: 18px;
    }
    
    .package-card:not([data-expanded="true"]) {
        max-height: 500px;
    }
    .begin-journey {
        margin-top: 64px;
    }
}

@media (max-width: 768px) {
    .packages {
        padding: 60px 0 70px;
    }
    
    .packages h2 {
        font-size: 34px;
        padding: 0 16px;
        margin-bottom: 20px;
    }
    
    .packages h2 .highlight::after {
        bottom: 4px;
        height: 8px;
    }
    
    .packages-desc {
        font-size: 16px;
        line-height: 1.45;
        margin-bottom: 42px;
        padding: 0 20px;
    }
    
    .card-container {
        padding: 0 20px;
        gap: 24px;
    }
    
    .package-card {
        width: 100%;
        max-width: 380px;
    }
    
    .card-title {
        font-size: 24px;
    }
    
    .price {
        font-size: 28px;
    }
    
    .price-period {
        font-size: 14px;
    }
    
    .check-item {
        font-size: 13px;
        margin-bottom: 16px;
        gap: 10px;
    }
    
    .package-card:not([data-expanded="true"]) {
        max-height: 480px;
    }
    
    .package-card:not([data-expanded="true"]) .check-list {
        max-height: 150px;
    }
    
    .expand-btn {
        font-size: 11px;
        padding: 8px 16px;
    }
    
    .card-btn {
        padding: 12px 0;
        font-size: 12px;
    }
    
    .btn-dark {
        padding: 12px 28px;
        font-size: 13px;
    }
    .begin-journey {
        margin-top: 56px;
    }
}

@media (max-width: 480px) {
    .packages {
        padding: 50px 0 65px;
    }
    
    .section-sub {
        font-size: 14px;
        margin-bottom: 14px;
    }
    
    .packages h2 {
        font-size: 28px;
        margin-bottom: 18px;
    }
    
    .packages-desc {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 36px;
    }
    
    .card-container {
        padding: 0 16px;
    }
    
    .card-title {
        font-size: 22px;
        margin: 10px 20px 0 20px;
    }
    
    .check-list {
        margin: 16px 20px 12px 20px;
    }
    
    .check-item {
        font-size: 12px;
        gap: 10px;
        margin-bottom: 14px;
        line-height: 1.45;
    }
    
    .price {
        font-size: 26px;
        margin: 6px 20px 0 20px;
    }
    
    .price-note {
        margin: 4px 20px 0 20px;
        font-size: 11px;
    }
    
    .package-card:not([data-expanded="true"]) {
        max-height: 460px;
    }
    
    .package-card:not([data-expanded="true"]) .check-list {
        max-height: 130px;
    }
    
    .expand-btn {
        width: calc(100% - 40px);
        margin: 6px 20px 0 20px;
        font-size: 10px;
        padding: 8px 14px;
    }
    
    .card-btn {
        width: calc(100% - 40px);
        margin: 14px 20px 20px 20px;
        padding: 10px 0;
        font-size: 11px;
    }
    
    .begin-journey {
        margin-top: 48px;
    }
    
    .btn-dark {
        padding: 10px 24px;
        font-size: 12px;
    }
}

/* Large desktop screens */
@media (min-width: 1600px) {
    .packages {
        padding: 110px 0 130px;
    }
    .begin-journey {
        margin-top: 84px;
    }
    .packages-desc {
        margin-bottom: 68px;
    }
}
/* ==========================================================
           7. THE MIDWIFE SECTION
           Text left, image right - emphasises availability.
           Custom scroll: hidden but functional (scrollbar hidden)
        ========================================================== */
        .midwife-section {
            display: flex;
            align-items: stretch;      /* both columns full height */
            justify-content: space-between;
            padding: 60px 120px;
            gap: 60px;
            background: #ffffff;
            min-height: 90vh;          /* comfortable height, not extreme */
            max-height: 85vh;          /* prevents too tall section, enables scroll inside text column */
        }

        /* LEFT COLUMN: scrollable content area with HIDDEN scrollbar (but still functional) */
        .midwife-text {
            flex: 1;
            max-width: 55%;
            display: flex;
            flex-direction: column;
            overflow-y: auto;           /* vertical scroll when content overflows — functional scroll */
            padding-right: 12px;
            max-height: 100%;           /* respects parent height */
            scrollbar-width: none;      /* Firefox: hide scrollbar */
            -ms-overflow-style: none;   /* IE/Edge: hide scrollbar */
        }
        
        /* WebKit: hide scrollbar completely but keep scroll ability */
        .midwife-text::-webkit-scrollbar {
            width: 0;
            background: transparent;
            display: none;
        }

        /* If you ever want a minimal visible version on hover (optional), but requirement: hide scrollbar */
        /* We fully hide it — no track, no thumb visible */

        .midwife-text h2 {
            font-family: 'Playfair Display', serif;
            font-size: 56px;
            line-height: 1.2;
            font-weight: 500;
            letter-spacing: -0.01em;
            margin-bottom: 20px;
            color: #1e3a3f;
            flex-shrink: 0;
        }

        /* rich content wrapper — all the long content */
        .rich-content {
            font-size: 17px;
            line-height: 1.65;
            color: #2c3e42;
            margin-bottom: 28px;
            flex: 1;
        }

        .rich-content p {
            margin-bottom: 1.35rem;
            font-size: 17px;
            line-height: 1.65;
            opacity: 0.87;
        }

        .rich-content h3 {
            font-family: 'Playfair Display', serif;
            font-size: 28px;
            font-weight: 500;
            margin: 1.6rem 0 0.8rem 0;
            color: #1e3a3f;
            letter-spacing: -0.2px;
        }

        .rich-content h4 {
            font-size: 20px;
            font-weight: 600;
            margin: 1.2rem 0 0.5rem 0;
            color: #2a5f63;
        }

        .rich-content ul, 
        .rich-content ol {
            margin: 0.5rem 0 1.2rem 1.5rem;
        }

        .rich-content li {
            margin-bottom: 0.45rem;
            line-height: 1.6;
        }

        .rich-content strong {
            color: #1e3a3f;
            font-weight: 600;
        }

        /* CTA button stays at bottom of scrollable column */
        .btn-beige {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            background: #e9e0cf;
            color: #2c3e2b;
            font-weight: 600;
            font-size: 1rem;
            text-decoration: none;
            padding: 14px 36px;
            border-radius: 50px;
            transition: all 0.25s ease;
            border: 1px solid #d6cbbc;
            box-shadow: 0 2px 6px rgba(0,0,0,0.03);
            font-family: 'Inter', sans-serif;
            letter-spacing: 0.3px;
            width: fit-content;
            margin-top: 12px;
            margin-bottom: 8px;
            flex-shrink: 0;
        }

        .btn-beige i {
            font-size: 0.85rem;
            transition: transform 0.2s ease;
        }

        .btn-beige:hover {
            background: #dfd3be;
            border-color: #c4b598;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        }

        .btn-beige:hover i {
            transform: translateX(5px);
        }

        /* RIGHT COLUMN: image fixed in place, no scroll, nicely centered */
        .midwife-img {
            flex: 1;
            max-width: 40%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: sticky;
            top: 20px;          /* subtle sticky effect, stays visible */
            align-self: center;
        }

        .midwife-img img {
            width: 100%;
            max-width: 440px;
            border-radius: 32px;
            object-fit: cover;
            box-shadow: 0 24px 40px -14px rgba(0,0,0,0.18);
            transition: transform 0.3s ease;
            display: block;
        }

        .midwife-img img:hover {
            transform: scale(1.01);
        }

        /* responsive: on tablets, reduce padding and adjust height */
        @media (max-width: 1200px) {
            .midwife-section {
                padding: 50px 70px;
                gap: 45px;
                max-height: 85vh;
            }
            .midwife-text h2 {
                font-size: 48px;
            }
            .rich-content h3 {
                font-size: 26px;
            }
        }

        /* on medium screens, ensure scroll is comfortable, but keep text column scroll behaviour */
        @media (max-width: 992px) {
            .midwife-section {
                flex-direction: column;
                padding: 48px 40px;
                max-height: none;
                min-height: auto;
                gap: 32px;
            }
            .midwife-text {
                max-width: 100%;
                overflow-y: visible;
                max-height: none;
                padding-right: 0;
                scrollbar-width: auto;     /* no hidden requirement needed for stacked, but we keep consistency */
            }
            .midwife-text::-webkit-scrollbar {
                width: 0;
                background: transparent;
            }
            .midwife-img {
                max-width: 380px;
                margin: 0 auto;
                position: relative;
                top: 0;
                order: -1;
            }
            .btn-beige {
                margin-bottom: 20px;
            }
        }

        @media (max-width: 680px) {
            .midwife-section {
                padding: 36px 24px;
            }
            .midwife-text h2 {
                font-size: 38px;
            }
            .rich-content p, .rich-content {
                font-size: 16px;
            }
            .rich-content h3 {
                font-size: 24px;
            }
            .btn-beige {
                padding: 12px 28px;
                font-size: 0.9rem;
            }
        }

        /* small additional touch for ultra-long content: smooth scroll */
        .midwife-text {
            scroll-behavior: smooth;
        }

        /* subtle fade edge effect (optional, not affecting scrollability) */
        .midwife-text {
            scrollbar-width: none;
        }
        
        /* for Firefox to fully hide scrollbar */
        .midwife-text {
            scrollbar-width: none;
        }
/* ==========================================================
       8. WHERE DO WE SERVE
       50/50 split: dark text panel left, map image right.
       Left panel scrolls WITHOUT scrollbar when content exceeds height
    ========================================================== */

    .serve-section {
      position: relative;
      display: flex;
      height: 880px;
      width: 100%;
    }

    .serve-left {
      width: 50%;
      background: #111111;
      color: white;
      padding: 120px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow-y: auto;
      /* Hide scrollbar completely */
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    /* Hide scrollbar for Chrome, Safari, Opera */
    .serve-left::-webkit-scrollbar {
      display: none;
    }

    .serve-right {
      width: 50%;
      background-size: cover;
      background-position: center;
      overflow: hidden;
      position: relative;
    }

    .serve-right img,
    .serve-right iframe {
      width: 100%;
      height: 140%;
      object-fit: cover;
      border: none;
    }

    .serve-left h2 {
      font-family: 'Playfair Display', serif;
      font-size: 40px;
      font-weight: 500;
      margin-bottom: 30px;
      letter-spacing: -0.3px;
    }

    .serve-left p {
      font-size: 17px;
      line-height: 38px;
      opacity: 0.8;
      max-width: 690px;
      margin-bottom: 40px;
    }
      .serve-left p strong{
      font-size: 20px;
      line-height: 52px;
      
     
    }

   

   

    /* Responsive */
    @media (max-width: 1400px) {
      .serve-left {
        padding: 80px 60px;
      }
    }

    @media (max-width: 1100px) {
      .serve-section {
        flex-direction: column;
        height: auto;
      }
      .serve-left, .serve-right {
        width: 100%;
      }
      .serve-left {
        padding: 60px 40px;
        overflow-y: visible;
      }
      .serve-right {
        height: 500px;
        order: -1;
      }
      .serve-right img {
        height: 100%;
        object-fit: cover;
      }
    }

    @media (max-width: 680px) {
      .serve-left {
        padding: 40px 24px;
      }
      .serve-left h2 {
        font-size: 32px;
      }
      .serve-left p {
        line-height: 32px;
        font-size: 15px;
      }
      .btn-beige {
        padding: 12px 28px;
        font-size: 12px;
      }
    }

/* ==========================================================
   9. TESTIMONIALS SLIDER
   Centred quote with client name, location, and dot nav.
   ========================================================== */

.testimonials {
    text-align: center;
    padding: 80px 120px;
    margin-bottom: 70px;
}

.testimonials h2 {
    font-family: 'Playfair Display', serif;
    font-size: 50px;
    margin-bottom: 40px;
}

/* Wrapper for text + arrows */
.testimonial-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

.nav-arrow {
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--text-dark);
    cursor: pointer;
    opacity: 0.5;
    transition: 0.2s;
}

.nav-arrow:hover {
    opacity: 1;
}

.testimonial-text {
    font-size: 24px;
    line-height: 2;
    max-width: 1044px;
    margin: 0 auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* Client signature (Rochester cursive font) */
.client-name {
    font-family: 'Rochester', cursive;
    font-size: 50px;
    margin-top: 40px;
    transition: opacity 0.2s ease;
}

.client-location {
    font-size: 16px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Dot pagination */
.dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
}

.dot {
    width: 8px;
    height: 8px;
    background: #000;
    opacity: 0.1;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s;
}

/* Active dot: ring with inner circle */
.dot.active {
    width: 16px;
    height: 16px;
    background: transparent;
    border: 1px solid #B6ACA0;
    position: relative;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dot.active::after {
    content: '';
    width: 6px;
    height: 6px;
    background: #B6ACA0;
    border-radius: 50%;
}


    /* ==========================================================
   10. GALLERY STRIP
   Auto-scrolling infinite marquee loop.
   ========================================================== */

.gallery {
    padding: 50px 0;
    background: #fff;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.gallery-track {
    display: flex;
    gap: 30px;
    width: max-content;
    align-items: center;
    animation: scroll-gallery 80s linear infinite;
}

.gallery-track:hover {
    animation-play-state: paused;
}

@keyframes scroll-gallery {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 15px));
    }
}

.gallery-item {
    position: relative;
    width: 280px;
    height: 280px;
    flex: 0 0 280px; /* Do not grow, do not shrink, fixed 280px */
    border-radius: 20px;
    overflow: hidden;
    background: #f0f0f0;
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.ig-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: white;
    opacity: 0;
    transition: 0.3s;
}

.gallery-item:hover .ig-overlay {
    opacity: 1;
}

/* ==========================================================
   11. QUESTIONS CTA & FOOTER
   "Have any questions?" strip, footer gallery, main footer.
   ========================================================== */

/* --- "Have any questions?" CTA strip --- */
.questions-cta {
    background: #111111;
    padding: 60px 120px;
}

.questions-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    padding-bottom: 40px;
    border-bottom: 1px solid #292929;
}

.questions-text h3 {
    font-family: var(--font-heading);
    font-size: 50px;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 15px;
}

.questions-text p {
    font-family: var(--font-body);
    font-size: 21px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.8);
    max-width: 717px;
}

/* --- Footer Gallery Strip --- */
.footer-gallery {
    display: flex;
    width: 100%;
}

.footer-gallery img {
    flex: 1;
    height: 220px;
    object-fit: cover;
    transition: 0.3s;
}

.footer-gallery img:hover {
    opacity: 0.85;
}

/* --- Main Footer --- */
.contact-footer {
    background: #111111;
    color: white;
    padding: 60px 120px 0px;
    position: relative;
}

/* Footer columns layout */
.footer-columns {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 60px;
    gap: 40px;
}

/* Footer logo + description */
.footer-logo-area {
    max-width: 400px;
}

.footer-logo-area .logo {
    height: auto;
}

.footer-logo-area .logo img {
    filter: brightness(0) invert(1);
}

.footer-logo-area p {
    font-size: 15px;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 20px;
}

/* Quick Links column */
.quick-links h4,
.getintouch h4,
.follow h4 {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 30px;
}

.follow {
    margin-top: 2px;
}

.quick-links ul {
    list-style: none;
}

.quick-links ul li {
    margin-bottom: 15px;
}

.quick-links ul li a {
    font-family: var(--font-body);
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: 0.3s;
}

.quick-links a:hover {
    color: #B6ACA0;
}

/* Get in Touch column */
.contact-info {
    margin-top: 20px;
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.contact-row span {
    font-size: 16px;
    opacity: 0.8;
}

.contact-icon {
    background: white;
    width: 50px;
    height: 50px;
    border-radius: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 20px;
    flex-shrink: 0;
}

/* Social icons */
.social-icons {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.social-circle {
    width: 52px;
    height: 52px;
    background: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #000000;
    transition: 0.2s;
    cursor: pointer;
    text-decoration: none;
}

.social-circle:hover {
    background: #242421;
    color: white;
    transform: scale(1.05);
}

/* Copyright bar */
.copyright {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 60px;
    padding-top: 30px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    flex-wrap: wrap;
    gap: 20px;
}

.copyright-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: 0.2s;
}

.copyright-links a:hover {
    color: #B6ACA0;
}


/* ==========================================================
   12. INNER PAGES - HERO BANNER
   Shared hero layout for all sub-pages.
   ========================================================== */

.inner-hero {
    position: relative;
    width: 100%;
    height: 650px;
    margin-top: 0;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    filter: none;
    overflow: hidden;
}

/* Apply grayscale to the background image via pseudo-element */
.inner-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    z-index: 0;
}

/* Dark overlay */
.inner-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.inner-hero-content {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 984px;
    padding: 0 40px;
}

.inner-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 74px;
    font-weight: 500;
    margin-bottom: 25px;
}

.inner-hero p {
    font-size: 20px;
    line-height: 1.9;
    opacity: 0.8;
}

/* Shared inner-page content padding */
.inner-content {
    padding: 100px 120px;
    background: #fff;
}


/* ==========================================================
   13. ABOUT PAGE (Who We Are)
   ========================================================== */

/* Top section: image + text side by side */
.about-top {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}

.about-image img {
    border-radius: 24px;
    width: 100%;
    max-width: 730px;
}

.about-text h2 {
    font-family: 'Playfair Display', serif;
    font-size: 50px;
    margin-bottom: 30px;
}

.about-text p {
    font-size: 21px;
    line-height: 1.9;
    opacity: 0.8;
}

/* Values section intro */
.values-section {
    padding-top: 0;
}

.values-intro {
    margin-bottom: 60px;
}

.values-intro h2 {
    font-family: 'Playfair Display', serif;
    font-size: 50px;
    margin-bottom: 20px;
}

.values-intro p {
    font-size: 21px;
    opacity: 0.8;
    line-height: 1.9;
    max-width: 900px;
}

/* 2x2 values grid */
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.value-item {
    background: #F5F3F0;
    padding: 60px 50px;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.value-item:hover {
    background: #B6ACA0;
}

.value-item:hover h3,
.value-item:hover p {
    color: #FFFFFF;
}

.value-item h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

.value-item p {
    font-size: 18px;
    opacity: 0.8;
    line-height: 1.8;
    transition: color 0.3s ease;
}


/* ==========================================================
   14. COURSES PAGE
   ========================================================== */
.birthing-choices {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 100px 120px;
      gap: 30px;
      background: #000000;
      color: #FFFFFF;
      flex-wrap: wrap;
    }

    .bc-text {
      flex: 1;
      max-width: 590px;
    }

    .bc-text h2 {
      font-family: 'Playfair Display', serif;
      font-size: 55px;
      line-height: 72px;
      font-weight: 500;
      margin-bottom: 30px;
      color: #FFFFFF;
    }

    .bc-text p {
      font-size: 18px;
      line-height: 42px;
      opacity: 0.8;
      margin-bottom: 40px;
    }

    .bc-image {
      flex: 1;
      max-width: 430px;
    }

    .bc-image img {
      width: 100%;
      border-radius: 20px;
      display: block;
      object-fit: cover;
      height: 600px;
    }

    /* custom button style matching the elegant look */
    .btn-download-dark {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: #c6a27a;
      color: #000000;
      padding: 12px 32px;
      border-radius: 40px;
      font-weight: 600;
      font-size: 16px;
      text-decoration: none;
      transition: all 0.25s ease;
      border: none;
      cursor: pointer;
      font-family: inherit;
      letter-spacing: 0.3px;
    }

    .btn-download-dark i {
      font-size: 18px;
      transition: transform 0.2s;
    }

    .btn-download-dark:hover {
      background: #dbb587;
      transform: translateY(-2px);
      box-shadow: 0 8px 18px rgba(0,0,0,0.2);
    }

    .btn-download-dark:hover i {
      transform: translateX(4px);
    }

  /* ========== SECTION 2 (WHITE) - right side text, left side image ========== */
   
    .birthing-choices-white {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 100px 120px;
      gap: 30px;
      background: #ffffff;
      color: #1a1a1a;
      flex-wrap: wrap;
      flex-direction: row; /* default: image left, text right */
    }

    .bc-text-white {
      flex: 1;
      max-width: 590px;
    }

    .bc-text-white h2 {
      font-family: 'Playfair Display', serif;
      font-size: 55px;
      line-height: 72px;
      font-weight: 500;
      margin-bottom: 30px;
      color: #1a1a1a;
    }

    .bc-text-white p {
      font-size: 18px;
      line-height: 42px;
      opacity: 0.85;
      margin-bottom: 40px;
      color: #2c2c2c;
    }

    .bc-image-white {
      flex: 1;
      max-width: 430px;
    }

    .bc-image-white img {
      width: 100%;
      border-radius: 20px;
      display: block;
      box-shadow: 0 8px 20px rgba(0,0,0,0.05);
      height: 600px;
    }

    .btn-download-light {
      background: #e4d5c0;
      color: #1e1e1e;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 12px 32px;
      border-radius: 40px;
      font-weight: 600;
      font-size: 16px;
      border: none;
      cursor: pointer;
      transition: all 0.25s ease;
      font-family: inherit;
    }

    .btn-download-light i {
      font-size: 18px;
      transition: transform 0.2s;
    }

    .btn-download-light:hover {
      background: #d6c4aa;
      transform: translateY(-2px);
    }

    .btn-download-light:hover i {
      transform: translateX(4px);
    }

.payment-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 2000;
}

.payment-modal-overlay.open {
    display: flex;
}

.payment-modal {
    width: min(860px, 100%);
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    position: relative;
    max-height: 95vh;
    overflow: hidden;
}

.payment-modal h2 {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 4px 0;
    color: #111;
}

.payment-subtitle {
    margin: 0 0 14px 0;
    font-family: 'Albert Sans', sans-serif;
    font-size: 15px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.75);
}

.payment-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    color: #111;
}

.payment-close:hover {
    background: rgba(182, 172, 160, 0.15);
}

.payment-form {
    gap: 12px;
    display: flex;
    flex-direction: column;
}

.payment-grid {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 18px;
    align-items: stretch;
}

.payment-left {
    overflow: visible;
    padding-right: 0;
}

.payment-right {
    position: relative;
}

.payment-course-card {
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    position: relative;
}

.payment-course-image-wrap {
    height: 100%;
    position: relative;
}

.payment-course-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
}

.payment-course-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
    color: #fff;
    z-index: 2;
}

.payment-course-title {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 500;
    color: #fff;
}

.payment-course-tagline {
    margin-top: 6px;
    font-family: 'Albert Sans', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
}

.payment-course-price {
    margin-top: 12px;
    font-family: 'Albert Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.payment-course-meta {
    margin-top: 10px;
    font-family: 'Albert Sans', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.payment-modal .form-row {
    display: flex;
    gap: 12px;
}

.payment-modal .form-group label {
    font-size: 16px;
    margin-bottom: 4px;
    display: block;
}

.payment-modal .form-group input,
.stripe-card-field {
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
}

.stripe-card-field {
    min-height: 41px;
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    background: #fff;
}

.payment-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 0;
}

@media (max-width: 900px) {
    .payment-modal {
        width: min(560px, 100%);
        max-height: 90vh;
        overflow-y: auto;
    }
    .payment-grid {
        grid-template-columns: 1fr;
    }
    .payment-left {
        max-height: none;
        overflow: visible;
        padding-right: 0;
        order: 2;
    }
    .payment-right {
        height: 300px;
        order: 1;
    }
    .payment-form {
        gap: 8px;
    }
    .payment-error:empty {
        min-height: 0;
    }
    .payment-actions {
        margin-top: 4px;
    }
}

.payment-error {
    min-height: 18px;
    font-family: 'Albert Sans', sans-serif;
    font-size: 13px;
    color: #b00020;
    margin-bottom: 0;
}

.payment-submit {
    white-space: nowrap;
}

.payment-result-modal {
    max-width: 520px;
}

.payment-result-modal .payment-actions {
    margin-top: 22px;
}

.payment-result-modal .btn-download-dark {
    text-decoration: none;
}
    white-space: nowrap;
}
/* Price styling for both sections */
    .course-price {
        font-size: 2.6rem;
        font-weight: 700;
        margin: 1.2rem 0 1.5rem 0;
        letter-spacing: 1px;
        display: inline-block;
    }
    
    /* Black section price */
    .birthing-choices .course-price {
        color: #D4A574;  /* Warm gold/beige */
        border-left: 4px solid #D4A574;
        padding-left: 1rem;
    }
    
    /* White section price */
    .birthing-choices-white .course-price {
        color: #B8860B;  /* Dark golden */
        border-left: 4px solid #B8860B;
        padding-left: 1rem;
    }
    
    /* ========== SECTION 3 (BLACK again) - left text, right image ========== */
    

    /* responsive adjustments exactly matching the original padding behaviour */
    @media (max-width: 1100px) {
      .birthing-choices, .birthing-choices-white {
        padding: 70px 60px;
      }
      .bc-text h2, .bc-text-white h2 {
        font-size: 44px;
        line-height: 58px;
      }
      .bc-text p, .bc-text-white p {
        font-size: 17px;
        line-height: 34px;
      }
    }

    @media (max-width: 850px) {
      .birthing-choices, .birthing-choices-white {
        padding: 50px 32px;
        flex-direction: column;
        text-align: center;
      }
      .birthing-choices-white {
        flex-direction: column;
      }
      .bc-text, .bc-text-white, .bc-image, .bc-image-white {
        max-width: 100%;
      }
      .bc-image, .bc-image-white {
        margin-bottom: 20px;
      }
      .btn-download-dark, .btn-download-light {
        margin: 0 auto;
      }
      .bc-text p, .bc-text-white p {
        margin-bottom: 30px;
      }
      .bc-image, .bc-image-white {
        order: -1;
      }
      .bc-image img, .bc-image-white img {
        height: auto;
        max-height: 420px;
      }
      .course-price {
        font-size: 2.65rem;
        line-height: 1.1;
        margin: 1rem 0 1.35rem 0;
      }
    }

    @media (min-width: 851px) {
      .birthing-choices .course-price,
      .birthing-choices-white .course-price {
        display: block;
        width: fit-content;
        font-size: 3rem;
        line-height: 1.1;
        margin: 0.9rem 0 1.6rem 0;
      }
    }

/* ==========================================================
   15. TESTIMONIALS PAGE
   ========================================================== */

/* Intro heading */
.testimonials-page {
    background: #000000;
    color: #FFFFFF;
}

.testimonials-page .testi-intro h2,
.testimonials-page .story-name {
    color: #FFFFFF;
}

.testimonials-page .testi-intro p,
.testimonials-page .story-card p {
    color: rgba(255, 255, 255, 0.8);
}

.testimonials-page .testi-intro {
    text-align: center;
    max-width: 1236px;
    margin: 0 auto 80px;
}

.testi-intro h2 {
    font-family: 'Playfair Display', serif;
    font-size: 60px;
    margin-bottom: 30px;
}

.testi-intro p {
    font-size: 21px;
    opacity: 0.8;
}

/* Stories grid: 3 columns */
.stories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

/* Individual story card */
.story-card {
    text-align: center;
    background: rgba(182, 172, 160, 0.12);
    border-radius: 24px;
    padding: 0 0 30px;
    overflow: hidden;
    transition: 0.3s;
}

.story-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.story-card img {
    width: 100%;
    height: 320px;
    border-radius: 18px 18px 0 0;
    object-fit: cover;
    margin-bottom: 25px;
}

.story-name {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    margin-bottom: 15px;
    padding: 0 25px;
}

.story-card p {
    font-size: 18px;
    opacity: 0.8;
    margin-bottom: 25px;
    padding: 0 25px;
    line-height: 1.7;
}

.story-btn {
    width: calc(100% - 50px);
    border-radius: 15px;
}

/* View All Stories button */
.view-all-stories {
    text-align: center;
}


/* ==========================================================
   16. FAQ PAGE
   ========================================================== */

.faq-page {
    background: #000000;
    color: #FFFFFF;
}

.faq-page .faq-intro h2,
.faq-page .faq-question {
    color: #FFFFFF;
}

.faq-page .faq-intro p,
.faq-page .faq-answer {
    color: rgba(255, 255, 255, 0.8);
}

.faq-page .faq-item {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.faq-page .faq-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

.faq-page .faq-answer {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.faq-intro {
    text-align: center;
    margin-bottom: 80px;
}

.faq-intro h2 {
    font-family: 'Playfair Display', serif;
    font-size: 60px;
    margin-bottom: 30px;
}

.faq-intro p {
    font-size: 21px;
    opacity: 0.8;
    max-width: 1110px;
    margin: 0 auto;
}

/* Two-column FAQ layout */
.faq-grid {
    display: flex;
    gap: 40px;
}

.faq-column {
    flex: 1;
}

/* Individual FAQ accordion item */
.faq-item {
    background: rgba(217, 217, 217, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    margin-bottom: 20px;
    padding: 25px 30px;
    cursor: pointer;
    transition: 0.3s;
}

.faq-item:hover {
    background: rgba(217, 217, 217, 0.4);
}

.faq-question {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Answer panel - hidden by default, revealed when .open */
.faq-answer {
    display: none;
    margin-top: 20px;
    font-size: 20px;
    opacity: 0.8;
    line-height: 1.9;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 20px;
}

.faq-item.open .faq-answer {
    display: block;
}


/* ==========================================================
   17. CONTACT PAGE - Form
   ========================================================== */

.form-intro {
    margin-bottom: 60px;
}

.form-intro h2 {
    font-family: 'Playfair Display', serif;
    font-size: 50px;
    margin-bottom: 20px;
}

.form-intro p {
    font-size: 21px;
    opacity: 0.8;
}

/* Form layout */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Side-by-side form fields */
.form-row {
    display: flex;
    gap: 30px;
}

.form-row .form-group {
    flex: 1;
}

/* Form labels */
.form-group label {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    margin-bottom: 10px;
    color: #000;
    font-weight: 500;
}

/* Form inputs & textarea */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 20px 25px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-family: 'Albert Sans', sans-serif;
    font-size: 18px;
    outline: none;
    transition: 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #B6ACA0;
}

.form-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: 'Albert Sans', sans-serif;
    font-size: 16px;
    line-height: 1.45;
    color: #111;
}

.form-consent input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: 0 0 auto;
}

.form-status {
    min-height: 22px;
    font-family: 'Albert Sans', sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

.form-status.is-success {
    color: #1d6b3a;
}

.form-status.is-error {
    color: #b00020;
}

/* Submit button */
.submit-btn {
    align-self: flex-start;
    padding: 15px 40px;
    font-size: 18px;
    margin-top: 20px;
}


/* ==========================================================
   18. THANK YOU SECTION (Contact page)
   Logo + warm message with social links.
   ========================================================== */

.thank-you-section {
    background: #1E1E1E;
    padding: 80px 120px;
}

.thankyou-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
}

.thankyou-left {
    flex-shrink: 0;
}

.thankyou-logo {
    width: 250px;
    filter: brightness(0) invert(1);
}

.thankyou-right {
    text-align: left;
}

.thankyou-heading {
    font-family: 'Rochester', cursive;
    font-size: 60px;
    color: #FFFFFF;
    margin-bottom: 10px;
    font-weight: 400;
}

.thankyou-text {
    font-family: 'Rochester', cursive;
    font-size: 32px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 25px;
}


/* ==========================================================
   19. GET IN TOUCH SECTION (About page)
   Clean layout with large image.
   ========================================================== */

.get-in-touch {
    background: #fff;
    padding: 100px 120px;
}

.git-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    align-items: center;
}

.git-info h2 {
    font-family: 'Playfair Display', serif;
    font-size: 60px;
    margin-bottom: 30px;
    font-weight: 500;
}

.git-info p {
    font-size: 18px;
    line-height: 1.9;
    opacity: 0.8;
    margin-bottom: 40px;
}

.btn-git {
    padding: 15px 40px;
}

.git-image-side {
    width: 100%;
}

.git-main-img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    border-radius: 30px;
    filter: grayscale(100%);
}


/* ==========================================================
   20. RESPONSIVE BREAKPOINTS
   ========================================================== */

/* --- Large screens (< 1400px) --- */
@media (max-width: 1400px) {
    .navbar {
        padding: 0 40px;
        height: 120px;
    }

    .logo {
        width: 150px;
        height: 120px;
    }

    .nav-links {
        gap: 30px;
    }

    .homepage {
        padding-top: 120px;
    }

    .hero {
        height: 800px;
    }

    .hero-content {
        left: 40px;
        top: 180px;
    }

    .hero-title {
        font-size: 60px;
        line-height: 72px;
    }

    .subscription-btn {
        left: 40px;
        top: 550px;
    }

    .who-left {
        margin-left: 40px;
        max-width: 450px;
    }

    .who-right {
        margin-right: 40px;
    }

    .card-container {
        padding: 0 40px;
    }

    

    .birthing-choices {
        padding: 80px 40px;
    }

    .serve-left {
        padding: 80px 40px;
    }

    .testimonials {
        padding: 60px 40px;
    }

    .gallery-item {
        width: 250px;
        height: 250px;
    }

    .questions-cta {
        padding: 60px 40px;
    }

    .contact-footer {
        padding-left: 40px;
        padding-right: 40px;
    }

    .inner-content {
        padding: 80px 40px;
    }

    .get-in-touch {
        padding: 80px 40px;
    }

    .thank-you-section {
        padding: 80px 40px;
    }
}

/* --- Tablets (< 1024px) --- */
@media (max-width: 1024px) {
    .navbar {
        height: 100px;
        padding: 0 30px;
    }

    .logo {
        width: 120px;
        height: 100px;
    }

    .nav-links {
        display: none; /* Hide desktop nav on tablets as well if space is tight, or use hamburger */
    }

    .mobile-menu-btn {
        display: flex;
    }

    .book-now-btn {
        display: none;
    }

    .nav-links.mobile-open .nav-mobile-cta {
        display: block;
    }

    .nav-links.mobile-open .nav-mobile-cta .book-now-btn {
        display: flex;
        width: fit-content;
        line-height: normal;
    }

    .homepage {
        padding-top: 100px;
    }

    /* Navbar stacks */
    .navbar {
        flex-wrap: wrap;
        gap: 15px;
        position: fixed;
        background: white;
    }

    .homepage {
        padding-top: 0;
    }

    /* Hero adjustments */
    .hero {
        margin-top: 0;
        height: 700px;
    }

    .hero-content {
        top: 120px;
        left: 30px;
    }

    .hero-title {
        font-size: 42px;
        line-height: 52px;
        max-width: 90%;
    }

    .hero-desc {
        font-size: 18px;
        line-height: 30px;
        max-width: 90%;
    }

    .subscription-btn {
        left: 30px;
        top: 500px;
    }

    /* Stack two-column layouts */
    .who-we-are {
        flex-direction: column;
        text-align: center;
        padding: 60px 20px;
    }

    .who-left {
        margin: 0 auto 40px;
        max-width: 80%;
    }

    .who-right {
        margin: 0 auto;
        text-align: center;
        max-width: 90%;
    }

    .who-right h2 {
        font-size: 40px;
        line-height: 1.2;
    }

   
    .birthing-choices {
        flex-direction: column;
        text-align: center;
        padding: 60px 20px;
    }

    .bc-text {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .bc-text h2 {
        font-size: 36px;
        line-height: 1.2;
    }

    .bc-image {
        max-width: 80%;
        margin: 0 auto;
    }

    /* Packages cards */
    .card-container {
        padding: 0 20px;
        gap: 20px;
    }

    .package-card {
        width: calc(50% - 20px);
    }

    /* Serve section stacks */
    .serve-section {
        flex-direction: column;
        height: auto;
    }

    .serve-left,
    .serve-right {
        width: 100%;
    }

    .serve-left {
        padding: 60px 30px;
    }

    .serve-right {
        height: 420px;
        padding: 0;
    }

    /* Footer adjustments */
    .footer-columns {
        justify-content: center;
        text-align: center;
        gap: 40px;
    }

    .contact-row {
        justify-content: center;
    }

    .social-icons {
        justify-content: center;
    }

    /* Inner pages */
    .inner-hero {
        margin-top: 0;
        height: 400px;
    }

    .inner-hero h1 {
        font-size: 42px;
    }

    .testimonial-wrap {
        gap: 20px;
    }

    .testimonial-text {
        font-size: 18px;
        line-height: 1.6;
    }

    .about-top {
        flex-direction: column;
        gap: 40px;
    }

    .about-image {
        max-width: 80%;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .faq-grid {
        flex-direction: column;
        gap: 20px;
    }

    .form-row {
        flex-direction: column;
        gap: 25px;
    }

    .git-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .git-main-img {
        height: 400px;
    }

    .thankyou-content {
        flex-direction: column;
        text-align: center;
    }

    .thankyou-right {
        text-align: center;
    }

    .questions-content {
        justify-content: center;
        text-align: center;
    }
}

/* --- Mobile (< 768px) --- */
@media (max-width: 768px) {
    .navbar {
        height: 80px;
        padding: 0 20px;
    }

    .logo {
        width: 100px;
        height: 80px;
    }

    .homepage {
        padding-top: 80px;
    }

    .mobile-menu-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    /* Hero Mobile */
    .hero {
        height: 600px;
    }

    .hero-content {
        top: 100px;
        left: 20px;
        text-align: center;
        max-width: calc(100% - 40px);
    }

    .hero-title {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 20px;
    }

    .hero-desc {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 30px;
    }

    .subscription-btn {
        left: 50%;
        top: 455px;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        width: max-content;
        max-width: calc(100% - 40px);
        margin-top: 0;
    }

    /* Who We Are Mobile */
    .who-right h2 {
        font-size: 32px;
    }

    .who-right p {
        font-size: 16px;
        line-height: 1.6;
    }

    .who-we-are {
        padding-bottom: 24px;
        gap: 22px;
    }

    .who-right {
        flex: 0 1 auto;
    }

    .who-right p {
        margin-bottom: 24px;
    }

    /* Packages Mobile */
    .package-card {
        width: 100%;
        max-width: 100%;
    }

    /* Midwife & Choices Mobile */
    .midwife-text h2, .bc-text h2 {
        font-size: 32px;
    }

    .midwife-text p, .bc-text p {
        font-size: 16px;
        line-height: 1.6;
    }

    /* Inner Pages Mobile */
    .inner-hero {
        height: 300px;
    }

    .inner-hero h1 {
        font-size: 32px;
    }

    .inner-hero.mobile-heading-only p {
        display: none;
    }

    .inner-content {
        padding: 40px 20px;
    }

    .stories-grid {
        grid-template-columns: 1fr;
    }

    /* Footer Mobile */
    .questions-cta {
        padding: 40px 20px;
    }

    .questions-text h3 {
        font-size: 28px;
    }

    .questions-text p {
        font-size: 16px;
    }

    .contact-footer {
        padding: 40px 20px;
    }

    .footer-columns {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }

    .footer-logo-area {
        max-width: 100%;
    }

    .footer-logo-area p {
        font-size: 16px;
    }

    .quick-links h4, .getintouch h4, .follow h4 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .quick-links ul li a, .contact-row span {
        font-size: 16px;
    }

    .copyright {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    /* Hide desktop nav, show hamburger */
    .nav-links {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .navbar {
        justify-content: space-between;
    }

    .book-now-btn {
        display: none;
    }

    .nav-links.mobile-open .nav-mobile-cta {
        display: block;
    }

    .nav-links.mobile-open .nav-mobile-cta .book-now-btn {
        display: flex;
        width: fit-content;
        line-height: normal;
    }

    .serve-right {
        height: 320px;
    }
}

/* --- Small mobile (< 480px) --- */
@media (max-width: 480px) {
    .hero-title {
        font-size: 28px;
        line-height: 38px;
    }

    .hero-content {
        top: 120px;
    }

    .inner-hero h1 {
        font-size: 28px;
    }

    .footer-gallery img {
        width: 100%;
    }

    .stories-grid {
        gap: 25px;
    }
}

/* ========================================
   TERMS & CONDITIONS PAGE STYLES
   ======================================== */

/* Main Container */
.terms-page {
    padding: 80px 0;
    background: #fefcf8;
}

.terms-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Last Updated Badge */
.last-updated {
    text-align: right;
    color: #888;
    font-style: italic;
    margin-bottom: 40px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e8ddd0;
    font-family: 'Albert Sans', sans-serif;
}

/* Terms Cards */
.terms-card {
    background: white;
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.terms-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* Headings */
.terms-card h2 {
    color: #2C3E50;
    font-size: 1.8rem;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid #D4A574;
    display: inline-block;
    font-family: 'Playfair Display', serif;
}

.terms-card h3 {
    color: #2C3E50;
    font-size: 1.3rem;
    margin: 20px 0 10px;
    font-family: 'Playfair Display', serif;
}

/* Paragraphs */
.terms-card p {
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 15px;
    font-family: 'Albert Sans', sans-serif;
    font-size: 1rem;
}

/* Lists */
.terms-card ul {
    margin: 15px 0 15px 30px;
    color: #4a5568;
    line-height: 1.8;
    font-family: 'Albert Sans', sans-serif;
}

.terms-card li {
    margin-bottom: 8px;
}

.terms-card li::marker {
    color: #D4A574;
}

/* Warning Box */
.warning-box {
    background: #fff8f0;
    border-left: 4px solid #D4A574;
    padding: 20px;
    margin: 20px 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.warning-box i {
    color: #D4A574;
    font-size: 1.5rem;
}

.warning-box strong {
    color: #2C3E50;
}

/* Emergency Box */
.emergency-box {
    background: #fff0f0;
    border-left: 4px solid #e53e3e;
    padding: 20px;
    margin: 20px 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.emergency-box i {
    color: #e53e3e;
    font-size: 1.5rem;
}

.emergency-box strong {
    color: #c53030;
}

/* Pricing Cards */
.pricing-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.price-item {
    background: #fefcf8;
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #e8ddd0;
}

.price-item:hover {
    background: #fff;
    border-color: #D4A574;
    transform: scale(1.02);
}

.price-item h3 {
    color: #2C3E50;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.price-item .price {
    font-size: 2rem;
    font-weight: 700;
    color: #D4A574;
    margin-bottom: 15px;
}

.price-item .price span {
    font-size: 0.9rem;
    font-weight: normal;
    color: #888;
}

.price-item p:last-child {
    font-size: 0.9rem;
    color: #666;
}

/* Hours Grid */
.hours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.hour-item {
    background: #fefcf8;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #e8ddd0;
}

.hour-item i {
    font-size: 1.8rem;
    color: #D4A574;
}

.hour-item strong {
    color: #2C3E50;
    font-size: 1rem;
    display: block;
}

.hour-item span {
    color: #666;
    font-size: 0.9rem;
    display: block;
    margin-top: 5px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .terms-page {
        padding: 60px 0;
    }
    
    .terms-card {
        padding: 30px;
    }
    
    .terms-card h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .terms-page {
        padding: 40px 0;
    }
    
    .terms-card {
        padding: 25px;
        margin-bottom: 20px;
    }
    
    .terms-card h2 {
        font-size: 1.3rem;
    }
    
    .pricing-card {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .hours-grid {
        grid-template-columns: 1fr;
    }
    
    .last-updated {
        text-align: left;
        margin-bottom: 25px;
    }
    
    .warning-box, .emergency-box {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .terms-card {
        padding: 20px;
    }
    
    .price-item .price {
        font-size: 1.5rem;
    }
    
    .hour-item {
        padding: 15px;
    }
}