/*
Sayyed Jamal Ghasemi — Full-Stack Developer  
📧 info@jamalghasemi.com  
🔗 LinkedIn: https://www.linkedin.com/in/jamal1364/  
📸 Instagram: https://www.instagram.com/jamal13647850  
💬 Telegram: https://t.me/jamal13647850  
🌐 https://jamalghasemi.com  
Date: 2025-09-12
*/

/*
File: style.css
Purpose: Global styles for the Revita landing page - Persian physiotherapy and fitness center
Description: Responsive design with Tailwind-inspired breakpoints and RTL support
*/

/* ==========================================================================
   FONT IMPORTS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap');
@import url('https://cdn.fontcdn.ir/Font/Persian/Yekan_Bakh/Yekan_Bakh.css');

/* ==========================================================================
   BASE STYLES & LAYOUT
   ========================================================================== */

/* Base page styling for layout and typography
   Note: Use block flow to avoid two-column layout with footer.
   The main container is centered via margin auto, not body flex. */
body {
    margin: 0;
    font-family: 'Vazirmatn', sans-serif;
    background: #F5E8DA;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container {
    width: 100%;
    max-width: 1280px;
    background: #F5E8DA;
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ==========================================================================
   HEADER & NAVIGATION STYLES
   ========================================================================== */

/* Header responsive styling for md breakpoint and below (768px) */
.header-container {
    width: 100%;
    height: 150px;
    z-index: 100;
}

/* Logo positioning */
.logo {
    position: absolute;
    width: 181.86px;
    height: 52px;
    left: 1049.07px;
    top: 72px;
}

/* Navigation menu items container */
.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    position: absolute;
    top: 104px;
    left: 50%;
    transform: translateX(-50%);
}

/* Individual navigation item styling */
.nav-item {
    color: #002855;
    font-size: 20px;
    font-family: Vazirmatn;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}

.nav-item.active {
    font-weight: 700;
}

/* Search icon positioning */
.search-icon {
    position: absolute;
    width: 27px;
    height: 27px;
    left: 50px;
    top: 97px;
}

/* Hamburger menu - hidden by default, shown on mobile */
.hamburger-menu {
    display: none;
    position: absolute;
    right: 50px;
    top: 85px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    z-index: 101;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: #002855;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Hamburger animation when active */
.hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile menu overlay */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(245, 232, 218, 0.95);
    z-index: 99;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

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

.mobile-nav-item {
    color: #002855;
    font-size: 24px;
    font-family: Vazirmatn;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    padding: 15px 30px;
}

/* ==========================================================================
   HERO SECTION STYLES
   ========================================================================== */

/* Hero image — responsive design with rounded corners */
.hero-image {
    width: 100%;
    height: auto;
    border-radius: 100px;
    object-fit: contain;
    max-width: 100%;
}

/* ==========================================================================
   ABOUT SECTION STYLES
   ========================================================================== */

/* About section background and positioning elements */
.about-bg-image {
    width: 680px;
    height: 375px;
    left: 551px;
    top: 1159px;
    position: absolute;
    background: linear-gradient(0deg, #FBF8F1 0%, #FBF8F1 100%);
    border-radius: 100px;
}

.about-main-image {
    width: 680px;
    height: 515px;
    left: 551px;
    top: 1019px;
    position: absolute;
    border-radius: 100px;
}

.about-text {
    width: 480px;
    left: 50px;
    top: 1288px;
    position: absolute;
    text-align: justify;
    color: #002855;
    font-size: 20px;
    font-family: Vazirmatn;
    font-weight: 300;
    word-wrap: break-word;
}

.about-title {
    width: 480px;
    left: 50px;
    top: 1218px;
    position: absolute;
    text-align: justify;
    color: #002855;
    font-size: 35px;
    font-family: Vazirmatn;
    font-weight: 900;
    word-wrap: break-word;
}

/* ==========================================================================
   SERVICE SECTIONS (PHYSIOTHERAPY & GYM)
   ========================================================================== */

/* Physiotherapy and Gym shared container styles */
.physiotherapy-Section,
.gym-section {
    position: relative;
    width: min(1180px, calc(100vw - 100px));
    min-height: 300px;
    margin: 0 auto;
    margin-bottom: 2rem;
}

/* Column wrappers inside service sections - absolute positioning for desktop */
.service-col-image-right { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 58%; 
    z-index: 1; 
}

.service-col-image-left { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 58%; 
    z-index: 1; 
}

.service-col-text-left { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 57%; 
    z-index: 2; 
}

.service-col-text-right { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 57%; 
    z-index: 2; 
}

/* Shared image styling with rounded corners */
.service-image { 
    width: 100%; 
    height: auto; 
    object-fit: cover; 
    border-radius: 20px; 
}

/* Service header background pills - removed, styling moved to titles for sm+ breakpoints */

/* Service title styling with background colors for contrast */
.service-title-physiotherapy {
    left: 50%;
    top: 22px;
    position: absolute;
    text-align: center;
    color: #002855;
    font-size: 35px;
    font-family: Vazirmatn;
    font-weight: 900;
    word-wrap: break-word;
    transform: translateX(-50%);
    /* Title background per request: white.
       Note: On < md we set width: 100%; this will render a full-width
       background bar behind the title text. Desktop remains centered over
       the pill header and shows only behind the text area. */
    background-color: #FFFFFF;
}

.service-title-gym {
    right: 50%;
    top: 22px;
    position: absolute;
    text-align: center;
    color: #FBF8F1;
    font-size: 35px;
    font-family: Vazirmatn;
    font-weight: 900;
    word-wrap: break-word;
    transform: translateX(50%);
    /* Title background per request: dark gray.
       Text color already set to #FBF8F1 for contrast. On small screens,
       this becomes a full-width bar due to width: 100% override. */
    background-color: #3F3F3F;
}

/* Service description text positioning and styling */
.service-description-physiotherapy {
    width: 72%;
    left: 0;
    top: 132px;
    position: absolute;
    text-align: justify;
    color: #002855;
    font-size: 20px;
    font-family: Vazirmatn;
    font-weight: 300;
    word-wrap: break-word;
}

.service-description-gym {
    width: 72%;
    right: 0;
    top: 132px;
    position: absolute;
    text-align: justify;
    color: #002855;
    font-size: 20px;
    font-family: Vazirmatn;
    font-weight: 300;
    word-wrap: break-word;
}

/* ==========================================================================
   CAFE SECTION STYLES
   ========================================================================== */

/* Cafe Section — responsive wrapper and SVG container */
.cafe-section-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.cafe-section-svg {
    width: 100%;
    max-width: 1280px;
    height: auto;
}

.cafe-title {
    color: #002855;
    text-align: justify;
    font-family: 'Yekan Bakh', sans-serif;
    font-size: 35px;
    font-weight: 900;
    line-height: normal;
    letter-spacing: -1.75px;
}

.cafe-description {
    color: #002855;
    text-align: justify;
    font-family: 'Yekan Bakh', sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: -0.2px;
}

.cafe-cta {
    width: 351px;
    height: 109px;
    flex-shrink: 0;
    border-radius: 88px;
    background: #002855;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Yekan Bakh', sans-serif;
    font-size: 28px;
    font-weight: 900;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
}

/* ==========================================================================
   SVG ICONS SECTION
   ========================================================================== */

/* SVG Icons Section — right-aligned icon row with responsive behavior */
.svg-icons-section {
    width: 100%;
    max-width: 1280px;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
    /* Reserve vertical space so the row never collapses.
       Height matches ~44x aspect-scaled SVGs (≈68px). */
    min-height: 68px;
    /* Increase distance from adjacent sections.
       Note: .container has gap: 50px; these 50px margins make the
       perceived spacing to neighbors roughly 2x (≈100px). */
    margin-top: 50px;
    margin-bottom: 50px;
}

/* ==========================================================================
   FOOTER SECTION STYLES
   ========================================================================== */

/* Footer separator line - visible on all screen sizes */
.footer-separator {
    width: 100%;
    height: 2px;
    background: #002855;
    opacity: 1;
}

/* Footer (full-width) — implemented to match footer.png reference
   Structure: newsletter | divider | contact | divider | links | divider | icon */
.site-footer { 
    width: 100%; 
    background: #F5E8DA; 
    padding: 28px 0; 
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 32px;
    /* Reverse columns to mirror layout as requested */
    flex-direction: row-reverse;
}

.footer-divider { 
    width: 2px; 
    height: 130px; 
    background: #002855; 
    opacity: 1; 
}

/* Newsletter left column with input fields and buttons */
.col-newsletter { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
    width: 420px; 
}

.input-row { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
}

.footer-input {
    flex: 1;
    padding: 14px 18px;
    border: 2px solid #FF4500;
    border-radius: 30px;
    background: #ffffff;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 14px;
    outline: none;
    direction: rtl;
}

.btn-orange {
    background: #FF4500; 
    color: #ffffff; 
    border: none;
    padding: 12px 20px; 
    border-radius: 28px; 
    font-family: 'Vazirmatn', sans-serif;
    font-size: 14px; 
    font-weight: 800; 
    cursor: pointer; 
    white-space: nowrap;
}

.btn-green {
    background: #A8D5BA; 
    color: #ffffff; 
    border: none;
    padding: 12px 26px; 
    border-radius: 28px; 
    font-family: 'Vazirmatn', sans-serif;
    font-size: 16px; 
    font-weight: 800; 
    cursor: pointer; 
    white-space: nowrap;
}

/* Contact center column with business information */
.col-contact { 
    width: 360px; 
    text-align: center; 
    color: #002855; 
    font-size: 16px; 
    font-weight: 400; 
    line-height: 1.9; 
}

/* Links right-center column with navigation groups */
.col-links { 
    display: flex; 
    gap: 56px; 
    width: 320px; 
}

.links-group-title { 
    color: #002855; 
    font-size: 18px; 
    font-weight: 700; 
    margin-bottom: 14px; 
}

.link-item { 
    color: #002855; 
    font-size: 16px; 
    font-weight: 400; 
    margin-bottom: 10px; 
    cursor: pointer; 
}

/* Icon far-right column with logo/branding */
.col-icon { 
    width: 84px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

/* SM BREAKPOINT (640px to 767px) - Make footer smaller on sm screens
   ========================================================================== */

@media (min-width: 640px) and (max-width: 767px) {
    /* Allow container to grow naturally with content instead of fixed height */
    .container {
        min-height: 1800px;
        height: auto;
    }
    
    .site-footer {
        padding: 20px 0;
    }
    
    /* Stack footer columns vertically and center content */
    .footer-inner {
        flex-direction: column;
        gap: 20px;
        padding: 0 15px;
        text-align: center;
    }
    
    /* Hide vertical dividers on mobile - they don't make sense in stacked layout */
    .footer-divider {
        display: none;
    }
    
    /* Newsletter section adjustments - make full width and stack inputs */
    .col-newsletter {
        width: 100%;
        order: 1;
    }
    
    .input-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-input {
        width: 100%;
        text-align: center;
    }
    
    /* Contact info adjustments - center and add spacing */
    .col-contact {
        order: 2;
        width: 100%;
    }
    
    .col-contact div {
        margin-bottom: 8px;
    }
    
    /* Links section adjustments - stack link groups vertically */
    .col-links {
        order: 3;
        width: 100%;
        flex-direction: column;
        gap: 20px;
    }
    
    .col-links > div {
        text-align: center;
    }
    
    /* Icon adjustments - center and add top margin */
    .col-icon {
        order: 4;
        margin-top: 20px;
    }
    
    .col-icon svg {
        width: 45px;
        height: auto;
    }
    
    /* Service title adjustments for sm screens */
    .service-title-physiotherapy,
    .service-title-gym {
        height: 49px !important;
        top: 4px !important;
    }
    
    /* Service description adjustments for sm screens */
    .service-description-physiotherapy,
    .service-description-gym {
        top: 50px !important;
        font-size: 12px !important;
    }
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Menu button with hover effects and transitions */
.menu-button {
    position: absolute;
    bottom: 30px;
    right: 50px;
    width: 351px;
    height: 109px;
    background: #002855;
    border-radius: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F5E8DA;
    font-size: 35px;
    font-family: Vazirmatn;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.3s ease;
}

.menu-button:hover {
    background: #FF4500;
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */

/* 
LG BREAKPOINT (1024px) - Tablet Landscape
========================================================================== */

/* Large screens (≥ lg 1024px): provide a bit more height
   so icons breathe better on desktop widths.
   This preserves one-row layout and right alignment. */
@media (min-width: 1024px) {
    .svg-icons-section { 
        min-height: 80px; 
    }
    
    /* Service title adjustments for lg screens */
    .service-title-physiotherapy,
    .service-title-gym {
        height: 81px !important;
        top: 4px !important;
    }
    
    /* Service description adjustments for lg screens */
    .service-description-physiotherapy,
    .service-description-gym {
        top: 90px !important;
        font-size: 16px !important;
    }
}

/* 
XL BREAKPOINT (1280px+) - Desktop Layout
========================================================================== */

/* XL layout: Ensure About section reserves height so following sections
   flow correctly even when its children are absolutely positioned.
   This avoids overlap without needing margin hacks on the next section. */
@media (min-width: 1280px) {
    .about-section {
        position: relative; /* anchor for absolutely-positioned children */
        /* Reduced to tighten gap above and below while still containing children */
        min-height: 700px;
    }

    /* Tighten internal offsets so About content starts near the section top
       on wide screens, avoiding large empty space before the content.
       These values preserve prior relative spacing between elements. */
    .about-main-image { 
        top: 0; 
    }
    
    .about-bg-image { 
        top: 140px; 
    }
    
    .about-title { 
        top: 199px; 
    }
    
    .about-text { 
        top: 269px; 
    }
    
    /* Service title adjustments for xl screens */
    .service-title-physiotherapy,
    .service-title-gym {
        top: 23px !important;
    }
    
    /* Service description adjustments for xl screens */
    .service-description-physiotherapy,
    .service-description-gym {
        top: 115px !important;
        font-size: 20px !important;
    }
    
    /* Footer separator adjustments for xl screens */
    .footer-separator {
        margin-top: 120px;
    }
}

/* Responsive styles for lg breakpoint (1024px) and below */
@media (max-width: 1024px) {
    .container {
        max-width: 1024px;
        padding: 0 15px;
        min-height: 3000px;
        height: auto;
    }
    
    /* Move logo to right side on tablet */
    .logo {
        right: 30px;
        left: auto;
        top: 40px;
        width: 180px;
        height: auto;
        min-width: 180px;
    }
    
    /* Hide desktop navigation menu */
    .nav-menu {
        display: none;
    }
    
    /* Show hamburger menu on left */
    .hamburger-menu {
        display: flex;
        left: 30px;
        right: auto;
        top: 50px;
    }
    
    /* Hide search icon on tablet */
    .search-icon {
        display: none;
    }
}

/* Hero image responsive adjustments for tablet */
@media (max-width: 1024px) {
    .hero-image {
        border-radius: 50px;
    }
}

/* Responsive: Hero image < lg (≤1023px)
   Goal: Add top margin for the image under the header to create breathing space. */
@media (max-width: 1023px) {
    .hero-image {
        margin-top: 48px; /* increased to 3x per request */
    }
}

/* 
SM BREAKPOINT AND UP (≥640px) - Apply background pill styling to titles
========================================================================== */

/* Apply background styling directly to titles for sm and up, eliminating need for separate background elements */
@media (min-width: 640px) {
    .service-title-physiotherapy {
        /* Inherit styling from .service-header-bg-light */
        width: 100%;
        height: 33px;
        position: absolute;
        background: #FBF8F1;
        border-radius: 100px;
        /* Keep title-specific properties */
        left: 50%;
        top: 22px;
        text-align: center;
        color: #002855;
        font-size: 35px;
        font-family: Vazirmatn;
        font-weight: 900;
        word-wrap: break-word;
        transform: translateX(-50%);
        /* Center text vertically within the pill */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .service-title-gym {
        /* Inherit styling from .service-header-bg-dark */
        width: 100%;
        height: 33px;
        position: absolute;
        background: #3F3F3F;
        border-radius: 100px;
        /* Keep title-specific properties */
        right: 50%;
        top: 22px;
        text-align: center;
        color: #FBF8F1;
        font-size: 35px;
        font-family: Vazirmatn;
        font-weight: 900;
        word-wrap: break-word;
        transform: translateX(50%);
        /* Center text vertically within the pill */
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* 
MD BREAKPOINT (768px) - Tablet Portrait / Large Mobile
========================================================================== */

/* md breakpoint (768–1023px): make service titles visually shorter
   by reducing font size and nudging top offset slightly. */
@media (min-width: 768px) and (max-width: 1023px) {
    .service-title-physiotherapy,
    .service-title-gym {
        font-size: 28px !important;
        top: 10px !important;
        height: 49px !important;
    }
    
    .service-description-physiotherapy,
    .service-description-gym {
        top: 55px !important;
        font-size: 14px !important;
    }
    
    /* Footer adjustments for md screens - two column layout */
    .site-footer {
        padding: 20px 0;
    }
    
    .footer-inner {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        padding: 0 15px;
        text-align: center;
        justify-content: space-between;
    }
    
    .footer-divider {
        display: none;
    }
    
    .col-newsletter {
        width: 48%;
        order: 1;
    }
    
    .input-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-input {
        width: 100%;
        text-align: center;
    }
    
    .col-contact {
        order: 2;
        width: 48%;
    }
    
    .col-contact div {
        margin-bottom: 8px;
    }
    
    .col-links {
        order: 3;
        width: 48%;
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
    }
    
    .col-links > div {
        text-align: center;
    }
    
    .col-icon {
        order: 4;
        width: 48%;
        margin-top: 20px;
    }
    
    .col-icon svg {
        width: 45px;
        height: auto;
    }
}

/* Responsive styles for md breakpoint (768px) and below */
@media (max-width: 768px) {
    .container {
        max-width: 768px;
        padding: 0 10px;
        min-height: 2500px;
        height: auto;
    }
    
    /* Move logo to right side on mobile */
    .logo {
        right: 20px;
        left: auto;
        top: 40px;
        width: 180px;
        height: auto;
        min-width: 180px;
    }
    
    /* Hide desktop navigation menu */
    .nav-menu {
        display: none;
    }
    
    /* Show hamburger menu on left */
    .hamburger-menu {
        display: flex;
        left: 20px;
        right: auto;
        top: 50px;
    }
    
    /* Hide search icon on mobile */
    .search-icon {
        display: none;
    }
    
    /* Adjust header height for mobile */
    .header-container {
        height: 120px;
    }
}

/* Hero image adjustments for mobile screens */
@media (max-width: 768px) {
    .hero-image {
        border-radius: 30px;
    }
}

/* About Section mobile adjustments */
@media (max-width: 768px) {
    .about-section {
        top: 500px;
    }
    
    .about-title {
        font-size: 24px;
    }
    
    .about-text {
        font-size: 16px;
    }
    
    .about-main-image {
        border-radius: 30px;
    }
}

/* 
MOBILE RESPONSIVE - BELOW MD (≤767px)
========================================================================== */

/* Small screens: ensure SVG icons row remains visible
   by allowing wrapping and adding vertical padding.
   Also loosen overflow to avoid clipping on tight widths.
   This preserves identifiers and only adjusts presentation. */
@media (max-width: 767px) {
    .svg-icons-section {
        /* Single row on small screens; extra icons are clipped */
        justify-content: flex-end;
        flex-wrap: nowrap;    /* do not wrap to multiple lines */
        gap: 8px;             /* tighter spacing for mobile */
        padding: 6px 0;       /* minimal breathing room */
        overflow: hidden;     /* hide overflow instead of wrapping */
    }
    
    .svg-icons-section svg {
        width: 44px;          /* scale down for narrow screens */
        height: auto;
        flex: 0 0 auto;       /* prevent shrinking; allow overflow to be clipped */
    }
}

/* Responsive: Physiotherapy section < sm (<640px)
   Goal: Image full-bleed at top, title centered below, text under title.
   
   Notes:
   - Overrides absolute positioning to allow natural document flow.
   - Removes header pill background for compact stacking on small screens.
   - Keeps typography and colors consistent with desktop styles.
   - Extended from ≤767px to <640px to exclude sm breakpoint.
   - This block only affects .physiotherapy-Section; gym remains unchanged here. */
@media (max-width: 639px) {
    /* Container spans viewport width; height grows with content */
    .physiotherapy-Section {
        width: 100vw !important;
        min-height: auto;
        margin: 0 auto !important;
    }

    /* Place image first in the normal flow */
    .physiotherapy-Section .service-col-image-right {
        position: relative;
        right: auto;
        top: auto;
        width: 100%;
        z-index: 0;
    }

    /* Make the image full-bleed on small screens */
    .physiotherapy-Section .service-image {
        display: block;
        width: 100vw;
        max-width: 100vw;
        height: auto;
        border-radius: 0; /* remove rounding to achieve true edge-to-edge */
    }

    /* Stack text below the image */
    .physiotherapy-Section .service-col-text-left {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        z-index: 1;
        padding: 16px;
        box-sizing: border-box;
        /* Center inline-block title to mimic desktop header pill alignment */
        text-align: center;
    }

    /* Background pill styling removed - now handled by title styling in sm+ breakpoints */

    /* Center the title and let it sit naturally below the image */
    .physiotherapy-Section .service-title-physiotherapy {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        /* Full-width title per request; keep desktop colors and curvature.
           This only applies under md to avoid impacting desktop absolute layout. */
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 6px 18px;
        border-radius: 100px;
        /* Prevent horizontal overflow when width:100% + padding */
        box-sizing: border-box;
        margin: 8px 0;
    }

    /* Body text follows under the title with full width */
    .physiotherapy-Section .service-description-physiotherapy {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        text-align: justify;
    }
}

/* Responsive: Gym section < sm (<640px)
   Goal: Image full-bleed at top, title centered below, text under title.
   
   Notes:
   - Mirrors physiotherapy stacking rules for consistent UX.
   - Extended from ≤767px to <640px to exclude sm breakpoint.
   - Only affects .gym-section, keeping desktop layout intact. */
@media (max-width: 639px) {
    .gym-section {
        width: 100vw !important;
        min-height: auto;
        margin: 0 auto !important;
    }

    .gym-section .service-col-image-left {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        z-index: 0;
    }

    .gym-section .service-image {
        display: block;
        width: 100vw;
        max-width: 100vw;
        height: auto;
        border-radius: 0;
    }

    .gym-section .service-col-text-right {
        position: relative;
        right: auto;
        top: auto;
        width: 100%;
        z-index: 1;
        padding: 16px;
        box-sizing: border-box;
        /* Center inline-block title to mimic desktop header pill alignment */
        text-align: center;
    }

    /* Background pill styling removed - now handled by title styling in sm+ breakpoints */

    .gym-section .service-title-gym {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        /* Full-width title per request; keep desktop colors and curvature.
           This only applies under md to avoid impacting desktop absolute layout. */
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 6px 18px;
        border-radius: 100px;
        /* Prevent horizontal overflow when width:100% + padding */
        box-sizing: border-box;
        margin: 8px 0;
    }

    .gym-section .service-description-gym {
        position: relative;
        right: auto;
        top: auto;
        width: 100%;
        text-align: justify;
    }
}

/* 
ABOUT SECTION RESPONSIVE - BELOW XL (≤1279px)
========================================================================== */

/* These styles only apply for screens smaller than xl (1280px)
   Transform from absolute positioning to flexbox layout */
@media (max-width: 1279px) {
    .about-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 20px;
        background: #F5E8DA;
    }
    
    .about-title {
        position: static !important;
        width: auto !important;
        left: auto !important;
        top: auto !important;
        text-align: center;
        margin-bottom: 20px;
        font-size: 30px;
        order: 1;
    }
    
    .about-text {
        position: static !important;
        width: 100% !important;
        max-width: 600px;
        left: auto !important;
        top: auto !important;
        text-align: justify;
        margin-bottom: 30px;
        font-size: 18px;
        line-height: 1.6;
        order: 2;
    }
    
    .about-main-image {
        position: static !important;
        width: 100% !important;
        max-width: 500px;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        border-radius: 50px;
        order: 3;
    }
    
    .about-bg-image {
        display: none;
    }
}

/* 
SM BREAKPOINT (640px) - Mobile Landscape
========================================================================== */

/* Physiotherapy and Gym Sections - Remove padding/margin below sm (640px) */
@media (max-width: 639px) {
    .physiotherapy-Section,
    .gym-section {
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
    }
}

/* Service titles responsive styles for screens smaller than 640px */
@media (max-width: 639px) {
    /* Background pill classes removed - styling now integrated into titles */
    
    /* Responsive styles for service title texts */
    .service-title-physiotherapy,
    .service-title-gym {
        height: 33px;
        font-size: 23px !important;
        top: -2px !important;
        width: 100% !important;
        /* Center text horizontally and vertically */
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

/* 
FOOTER RESPONSIVE STYLES - MOBILE (≤639px)
========================================================================== */

/* Footer responsive styles for screens smaller than sm (640px)
   Transform from horizontal layout to vertical stacked layout
   This is the new media query section that was recently added */
@media (max-width: 639px) {
    /* Allow container to grow naturally with content instead of fixed height */
    .container {
        min-height: 1800px;
        height: auto;
    }
    
    .site-footer {
        padding: 20px 0;
    }
    
    /* Stack footer columns vertically and center content */
    .footer-inner {
        flex-direction: column;
        gap: 20px;
        padding: 0 15px;
        text-align: center;
    }
    
    /* Hide vertical dividers on mobile - they don't make sense in stacked layout */
    .footer-divider {
        display: none;
    }
    
    /* Newsletter section adjustments - make full width and stack inputs */
    .col-newsletter {
        width: 100%;
        order: 1;
    }
    
    .input-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-input {
        width: 100%;
        text-align: center;
    }
    
    /* Contact info adjustments - center and add spacing */
    .col-contact {
        order: 2;
        width: 100%;
    }
    
    .col-contact div {
        margin-bottom: 8px;
    }
    
    /* Links section adjustments - stack link groups vertically */
    .col-links {
        order: 3;
        width: 100%;
        flex-direction: column;
        gap: 20px;
    }
    
    .col-links > div {
        text-align: center;
    }
    
    /* Icon adjustments - center and add top margin */
    .col-icon {
        order: 4;
        margin-top: 20px;
    }
    
    .col-icon svg {
        width: 45px;
        height: auto;
    }
}

/* 
SMALLEST SCREENS (≤480px) - Mobile Portrait
========================================================================== */

/* Additional responsive adjustments for sm breakpoint (480px) and below */
@media (max-width: 480px) {
    .container {
        max-width: 480px;
        padding: 0 10px;
        min-height: 2000px;
        height: auto;
    }
    
    .logo {
        width: 180px;
        right: 15px;
        left: auto;
        top: 35px;
        min-width: 180px;
    }
    
    .hamburger-menu {
        left: 15px;
        right: auto;
        top: 45px;
        width: 25px;
        height: 25px;
    }
}

/* Hero image final mobile adjustments */
@media (max-width: 480px) {
    .hero-image {
        border-radius: 20px;
    }
}

/* About section final mobile adjustments */
@media (max-width: 480px) {
    .about-section {
        top: 350px;
        padding: 30px 15px;
    }
    
    .about-title {
        font-size: 20px;
    }
    
    .about-text {
        font-size: 14px;
    }
    
    .about-main-image {
        border-radius: 20px;
    }
}