/*==============================================================================
[Master Stylesheet]

Project:        Obsidia - Alternative Health 
Version:        1.0
Primary use:    Main Website Stylesheet
Description:    Obsidia is luxurious, and modern HTML5 Bootstrap Template for wellness centers, therapy practices, and holistic health services, Biozen includes beautifully designed sections for services, testimonials, blogs, and more. With a focus on simplicity and clarity, Its clean design and soft color palette make it ideal for professionals.
==============================================================================*/

/*==================================================
  TABLE OF CONTENTS
==================================================
  1.0 Vendor Import
  2.0 CSS Global Variables
  3.0 Keyframes Animation
  4.0 Base & Reset
  5.0 Section Style
  6.0 Hero Container Style
  7.0 Banner Style
  8.0 Header Style
  9.0 Sidebar Style
  10.0 Footer Style
  11.0 Heading Style
  12.0 Button Style
  13.0 Card Style
  14.0 Color Style
  15.0 Image Style
  16.0 Form Style
  17.0 Banner Home Style
  18.0 Banner Inner Style
  19.0 Banner NotFound Style
  20.0 About Style
  21.0 Why Choose Us Style
  22.0 Service Style
  23.0 Schedule Style
  24.0 Testimonial Style
  25.0 Contact Style
  26.0 Blog Style
  27.0 Animation Style
  28.0 Custom Spacing
==================================================*/

/*==================================================
  COLOR GLOSSARY
==================================================
  This section defines all colors used throughout
  the stylesheet for quick reference and consistency.
  
  PRIMARY COLORS:
  ---------------
  --primary: #312B24
    └─ Usage: Main text color, headings, primary UI elements
    └─ Contrast: Light backgrounds
    └─ Example: Body text, navbar links, card headers
  
  --secondary: #EAF0EA
    └─ Usage: Background color, light surfaces
    └─ Contrast: Dark text elements
    └─ Example: Page background, section backgrounds
  
  --text-color: #747474
    └─ Usage: Secondary text, descriptions, meta information
    └─ Contrast: Light backgrounds
    └─ Example: Paragraph text, captions, helper text
  
  ACCENT COLORS:
  --------------
  --accent-color: #64734F (Sage Green)
    └─ Usage: Primary accent, CTAs, highlights
    └─ Contrast: Works on light and dark backgrounds
    └─ Example: Button hover states, links, icons, stars
  
  --accent-color-2: #FFFFFF (White)
    └─ Usage: Text on dark backgrounds, clean surfaces
    └─ Contrast: Dark backgrounds
    └─ Example: Hero text, card backgrounds, buttons
  
  --accent-color-3: #1A312A (Deep Green)
    └─ Usage: Dark overlays, rich backgrounds
    └─ Contrast: Light text
    └─ Example: Banner overlays, testimonial quotes
  
  --accent-color-4: #D6D1CC (Light Taupe)
    └─ Usage: Subtle backgrounds, borders
    └─ Contrast: Dark text
    └─ Example: Card backgrounds, dividers
  
  --accent-color-5: #000000 (Black)
    └─ Usage: Maximum contrast elements
    └─ Contrast: Light backgrounds only
    └─ Example: Deep shadows, emphasis text
  
  TRANSPARENCY VARIANTS:
  ----------------------
  --accent-color-transparent: #00000000
    └─ Usage: Fully transparent overlays, gradient endpoints
  
  --accent-transparent-2: #00000087
    └─ Usage: Semi-transparent overlays (53% opacity)
    └─ Example: Modal backgrounds, image overlays
  
  COLOR USAGE NOTES:
  ------------------
  • Always use CSS variables for colors (var(--color-name))
  • Maintain WCAG AA contrast ratios (4.5:1 for normal text)
  • Primary color (#312B24) on secondary (#EAF0EA) = 9.8:1 ✓
  • Accent color (#64734F) on secondary (#EAF0EA) = 4.7:1 ✓
  • Test all color combinations for accessibility
  • Use accent colors sparingly for maximum impact
==================================================*/

/*==================================================
  TYPOGRAPHY SYSTEM
==================================================
  Complete type scale and hierarchy for the project.
  All sizes use rem units for scalability.
  
  FONT FAMILIES:
  --------------
  --font-family-heading: "Lora", sans-serif
    └─ Purpose: Display text, headings, emphasis
    └─ Characteristics: Serif, elegant, traditional
    └─ Weights: 400 (Regular)
    └─ Usage: h1-h6, buttons, quotes, blog links
  
  --font-family-text: "Inter Tight", sans-serif
    └─ Purpose: Body text, UI elements
    └─ Characteristics: Sans-serif, modern, readable
    └─ Weights: 400 (Regular)
    └─ Usage: paragraphs, descriptions, meta info
  
  TYPE SCALE:
  -----------
  h1: 5.1rem (81.6px)
    └─ Line Height: 1.2em
    └─ Weight: 400
    └─ Usage: Hero headlines, page titles
    └─ Max Width: 20-25 characters recommended
  
  h2: 3.1rem (49.6px)
    └─ Line Height: 1.2em
    └─ Weight: 400
    └─ Usage: Section headers, testimonial quotes
    └─ Max Width: 30-35 characters recommended
  
  h3: 1.75rem (28px)
    └─ Line Height: 1.2em
    └─ Weight: 400
    └─ Usage: Card titles, subsection headers
    └─ Max Width: 40-45 characters recommended
  
  h4: 1.4rem (22.4px)
    └─ Line Height: 1.2em
    └─ Weight: 400
    └─ Usage: Blog post titles, prominent links
    └─ Max Width: 45-50 characters recommended
  
  h5: 1.125rem (18px)
    └─ Line Height: 1.2em
    └─ Weight: 400
    └─ Usage: Small headers, widget titles
  
  h6: 0.938rem (15px)
    └─ Line Height: 1.2em
    └─ Weight: 400
    └─ Usage: Smallest headers, labels
  
  BODY TEXT:
  ----------
  Base (p): 1rem (16px)
    └─ Line Height: 1.2em
    └─ Weight: 400
    └─ Family: Inter Tight
    └─ Usage: Standard paragraph text
    └─ Max Width: 65-75 characters for optimal readability
  
  UI ELEMENTS:
  ------------
  Buttons/Links: 0.938rem (15px)
    └─ Line Height: 1.2em
    └─ Weight: 400
    └─ Family: Lora
    └─ Usage: All interactive elements
  
  Testimonial Stars: 0.875rem (14px)
    └─ Usage: Star ratings, small icons
  
  TYPOGRAPHY GUIDELINES:
  ----------------------
  • Base font size: 16px (1rem)
  • Scale ratio: ~1.4 (Minor Third to Major Second hybrid)
  • Line heights are compact (1.2em) for tight layouts
  • All headings use font-family-heading (Lora)
  • All body text uses font-family-text (Inter Tight)
  • Maintain vertical rhythm with consistent spacing
  • Recommended line length: 45-75 characters
  • Use font-weight sparingly (only 400 available)
  
  RESPONSIVE CONSIDERATIONS:
  --------------------------
  • h1 may need scaling down on mobile (recommend 3-4rem)
  • h2 may need scaling down on mobile (recommend 2-2.5rem)
  • Maintain consistent line-height across breakpoints
  • Consider fluid typography with clamp() for smoother scaling
  
  ACCESSIBILITY NOTES:
  --------------------
  • Minimum body text size: 16px (1rem) ✓
  • Sufficient contrast ratios maintained
  • Line height adequate for readability
  • Font sizes scale with user preferences (rem units)
==================================================*/

/*==================================================
  ANIMATION SYSTEM
==================================================
  Comprehensive animation framework for consistent
  motion design throughout the project.
  
  CORE PRINCIPLES:
  ----------------
  • Respect user preferences (prefers-reduced-motion)
  • Use GPU-accelerated properties (opacity, transform)
  • Maintain consistent easing and timing
  • Provide meaningful motion that guides attention
  
  DURATION PRESETS:
  -----------------
  --anim-duration-fast: 0.8s
    └─ Usage: Quick UI feedback, hover states
    └─ Examples: Button hover, small transitions
    └─ Perception: Snappy, responsive
  
  --anim-duration-normal: 1.1s
    └─ Usage: Standard content animations
    └─ Examples: Fade-in content, slide transitions
    └─ Perception: Smooth, natural
  
  --anim-duration-slow: 1.6s
    └─ Usage: Large content, hero animations
    └─ Examples: Hero banner entrance, large images
    └─ Perception: Elegant, deliberate
  
  DELAY PRESETS:
  --------------
  --anim-delay-none: 0s
    └─ Usage: Immediate animations
  
  --anim-delay-sm: 0.25s
    └─ Usage: Slight stagger for sequential items
    └─ Examples: List items appearing one after another
  
  --anim-delay-md: 0.45s
    └─ Usage: Noticeable delay for emphasis
    └─ Examples: Hero text appearing after background
  
  KEYFRAME ANIMATIONS:
  --------------------
  @keyframes fade-in
    └─ Effect: Opacity 0 → 1
    └─ Transform: None
    └─ Usage: Simple appearance animations
    └─ Best for: Overlays, modals, tooltips
  
  @keyframes fade-up
    └─ Effect: Opacity 0 → 1 + translateY(80px) → 0
    └─ Transform: Vertical slide from below
    └─ Usage: Content entering from bottom
    └─ Best for: Cards, sections, hero content
  
  @keyframes fade-down
    └─ Effect: Opacity 0 → 1 + translateY(-80px) → 0
    └─ Transform: Vertical slide from above
    └─ Usage: Content entering from top
    └─ Best for: Headers, navigation dropdowns
  
  @keyframes fade-left
    └─ Effect: Opacity 0 → 1 + translateX(120px) → 0
    └─ Transform: Horizontal slide from right
    └─ Usage: Content entering from right side
    └─ Best for: Sidebar content, images
  
  @keyframes fade-right
    └─ Effect: Opacity 0 → 1 + translateX(-120px) → 0
    └─ Transform: Horizontal slide from left
    └─ Usage: Content entering from left side
    └─ Best for: Text blocks, feature lists
  
  EASING FUNCTIONS:
  -----------------
  Default: cubic-bezier(0.25, 0.8, 0.25, 1)
    └─ Type: Custom ease-out
    └─ Characteristics: Smooth deceleration
    └─ Usage: All animation-box elements
    └─ Perception: Natural, organic motion
  
  Testimonial Transition: cubic-bezier(0.4, 0.0, 0.2, 1)
    └─ Type: Material Design ease
    └─ Duration: 0.6s
    └─ Usage: Testimonial carousel slides
    └─ Characteristics: Crisp, professional
  
  ANIMATION CLASSES:
  ------------------
  .animation-box
    └─ Base class for all animated elements
    └─ Initial state: opacity 0
    └─ Properties: animation-fill-mode forwards
    └─ GPU optimization: will-change opacity, transform
  
  Duration Modifiers:
  .anim-fast → uses --anim-duration-fast (0.8s)
  .anim-normal → uses --anim-duration-normal (1.1s)
  .anim-slow → uses --anim-duration-slow (1.6s)
  
  Delay Modifiers:
  .anim-delay-none → uses --anim-delay-none (0s)
  .anim-delay-sm → uses --anim-delay-sm (0.25s)
  .anim-delay-md → uses --anim-delay-md (0.45s)
  
  USAGE EXAMPLES:
  ---------------
  <!-- Fast fade-up with small delay -->
  <div class="animation-box anim-fast anim-delay-sm" data-animation="fade-up">
    Content here
  </div>
  
  <!-- Slow fade-left with no delay -->
  <div class="animation-box anim-slow anim-delay-none" data-animation="fade-left"
    Content here
  </div>
  
  ACCESSIBILITY:
  --------------
  @media (prefers-reduced-motion: reduce)
    └─ Disables all animations for users who prefer reduced motion
    └─ Sets opacity to 1 immediately
    └─ Removes transform effects
    └─ Maintains layout without motion
  
  PERFORMANCE OPTIMIZATION:
  -------------------------
  • Only animate opacity and transform (GPU-accelerated)
  • Use will-change sparingly on .animation-box
  • animation-fill-mode: forwards prevents layout shift
  • Avoid animating layout properties (width, height, margin)
  
  ANIMATION HIERARCHY:
  --------------------
  1. Hero/Banner: anim-slow + fade-up (most important)
  2. Section Content: anim-normal + fade-up (standard)
  3. UI Elements: anim-fast + fade-in (responsive feedback)
  4. Sequential Items: Use increasing anim-delay-sm
  
  STAGGER PATTERNS:
  -----------------
  For lists/grids, apply increasing delays:
  
  Item 1: anim-delay-none (0s)
  Item 2: anim-delay-sm (0.25s)
  Item 3: anim-delay-sm × 2 (0.50s)
  Item 4: anim-delay-sm × 3 (0.75s)
  
  Maximum recommended stagger: 5 items
  Beyond 5, use uniform timing to avoid user fatigue
  
  TRANSITION RECOMMENDATIONS:
  ----------------------------
  Hover States: 0.3s ease
    └─ Example: .blog-link { transition: all 0.3s ease }
  
  Carousel/Slider: 0.6s cubic-bezier(0.4, 0.0, 0.2, 1)
    └─ Example: .testimonial-box transform transitions
  
  TESTING CHECKLIST:
  ------------------
  ☑ Test with prefers-reduced-motion enabled
  ☑ Verify animations don't cause layout shift
  ☑ Check performance on lower-end devices
  ☑ Ensure animations enhance, not distract
  ☑ Validate timing feels natural across all breakpoints
==================================================*/

/*==================================================
  1.0 Vendor Import
==================================================*/

@import url('fonts.css');
@import url('vendor/bootstrap.min.css');
@import url('vendor/fontawesome.css');
@import url('vendor/brands.css');
@import url('vendor/regular.css');
@import url('vendor/solid.css');
@import url('vendor/swiper-bundle.min.css');
@import url('vendor/flatpickr.min.css');

/*==================================================
  2.0 CSS Global Variables
==================================================*/

:root{
    /* Color Variable */
    --primary: #312B24;
    --secondary: #EAF0EA;
    --text-color: #747474;
    --accent-color: #64734F;
    --accent-color-2: #FFFFFF;
    --accent-color-3: #1A312A;
    --accent-color-4: #D6D1CC;
    --accent-color-5: #000000;
    --accent-color-transparent: #00000000;
    --accent-transparent-2: #00000087;

    /* Font Style Variable */
    --font-family-heading: "Lora", sans-serif;
    --font-family-text: "Inter Tight", sans-serif;

    /* Animation Duration Preset */
    --anim-duration-fast: 0.8s;
    --anim-duration-normal: 1.1s;
    --anim-duration-slow: 1.6s;

    /* Animation Delay Preset */
    --anim-delay-none: 0s;
    --anim-delay-sm: 0.25s;
    --anim-delay-md: 0.45s;
}

/*==================================================
  3.0 Keyframe Animation
==================================================*/

@media (prefers-reduced-motion: reduce) {
    .animation-box { 
        animation: none !important;
        opacity: 1 !important; 
        transform: none !important; 
    }
}

@keyframes fade-in   { 
    from {opacity:0;} to {opacity:1;} 
}
@keyframes fade-up   { 
    from {opacity:0; transform:translateY(80px);} to {opacity:1; transform:translateY(0);} 
}
@keyframes fade-down { 
    from {opacity:0; transform:translateY(-80px);} to {opacity:1; transform:translateY(0);} 
}
@keyframes fade-left { 
    from {opacity:0; transform:translateX(-120px);} to {opacity:1; transform:translateX(0);} 
}
@keyframes fade-right{ 
    from {opacity:0; transform:translateX(120px);} to {opacity:1; transform:translateX(0);} 
}

/*==================================================
  4.0 Base & Reset
==================================================*/

:root{
    scroll-behavior: auto;
}

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

body{
    font-family: var(--font-family-text);
    background-color: var(--secondary);
    color: var(--primary);
}

h1{
    font-size: 5.1rem;
    font-weight: 400;
    line-height: 1.2em;
}

h2{
    font-size: 3.1rem;
    font-weight: 400;
    line-height: 1.2em;
}

h3{
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.2em;
}

h4{
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.2em;
}

h5{
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.2em;
}

h6{
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.2em;
}

h1,h2,h3,h4,h5,h6{
    font-family: var(--font-family-heading);
    margin: 0px;
}

ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
}

p{
    font-family: var(--font-family-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2em;
    margin: 0px;
}

button, a, .btn{
    font-family: var(--font-family-heading);
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--primary);
    text-decoration: none;
}

/*==================================================
  5.0 Section Style
==================================================*/

.section{
    padding: 6em 1em 6em 1em;
}

.section-pb-small{
    padding: 6em 1em 4em 1em;
}

.section-pb-small-px-large{
    padding: 6em 2em 4em 2em;
}

.section-px-pt-small{
    padding: 1em 1em 3em 1em;
}

.section-pt-large-pb-small{
    padding: 7em 1em 1em 1em;
}

.section-pt-large-pb-large{
    padding: 3em 1em 7em 1em;
}

/*==================================================
  6.0 Hero Container Style
==================================================*/

.hero-container{
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/*==================================================
  7.0 Banner Style
==================================================*/

.banner-home{
    background-image: url('../images/slider.png');
    background-position: 0px -242px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding: 10em 1em 26em 1em;
    z-index: 1;
}

.banner-home::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: linear-gradient(185deg, var(--accent-color-3) 43%, var(--accent-color-transparent) 68%);
    opacity: 0.28;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.banner-inner{
    background-image: url('../images/group-of-millennial-women-having-group-yoga-class-2024-12-02-04-38-41-utc.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 14em 1em 10em 1em;
    position: relative;
    z-index: 1;
}

.banner-about{
    background-image: url('../images/about.png');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 38% auto;
    padding: 7em 1em 6em 1em;
    position: relative;
    z-index: 1;
    margin-top: 90px;
}

.banner-about::before{
    content: '';
    position: absolute;
    background-color: var(--secondary);
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.banner-service{
    background-image: url('../images/treatment.png');
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 10em 1em 15em 1em;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    position: relative;
}

.banner-contact{
    background-image: url('../images/people-outdoor-nature-and-lotus-at-yoga-class-me-2025-04-05-19-09-26-utc.jpg');
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 28em 1em 4em 1em;
    position: relative;
    z-index: 1;
}

.banner-contact::before{
    content: '';
    position: absolute;
    background-color: var(--accent-color-3);
    opacity: 0.41;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* About Page CTA Banner */
.about-cta-banner{
    background-image: url('../images/young-girls-are-sitting-in-the-lotus-position-in-a-2024-09-18-17-44-09.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    padding: 86px 1rem;
}

.about-cta-banner::before{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(18, 35, 54, 0.9) 0%, rgba(22, 44, 62, 0.76) 46%, rgba(24, 54, 66, 0.58) 100%);
    z-index: -1;
}

.about-cta-inner{
    display: grid;
    gap: 20px;
}

.about-cta-layout{
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 26px;
    align-items: stretch;
}

.about-cta-text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    color: #f6f7f8;
    background: rgba(8, 19, 29, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 28px;
    backdrop-filter: blur(2px);
}

.about-cta-sub{
    font-family: var(--font-family-heading);
    font-style: normal;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.86);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.about-cta-sub::before,
.about-cta-sub::after{
    content: '';
    width: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

.about-cta-text h2{
    font-family: var(--font-family-heading);
    font-style: normal;
    color: #ffffff;
    font-size: clamp(2rem, 3.4vw, 3.1rem);
    line-height: 1.15;
    margin: 0;
}

.about-cta-text p{
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.72;
    color: rgba(245, 247, 249, 0.92);
}

.about-cta-impact{
    display: grid;
    gap: 14px;
    align-content: start;
    background: linear-gradient(160deg, rgba(243, 229, 193, 0.94) 0%, rgba(232, 217, 181, 0.88) 100%);
    border: 1px solid rgba(182, 146, 84, 0.48);
    padding: 24px;
}

.about-cta-impact-pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #6f5422;
    color: #fff;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.about-cta-impact-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.about-cta-impact-list li{
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(111, 84, 34, 0.24);
    background: rgba(255, 255, 255, 0.42);
}

.about-cta-impact-list strong{
    color: #4f3a12;
    font-family: var(--font-family-heading);
    font-size: 1.02rem;
    font-weight: 700;
}

.about-cta-impact-list span{
    color: #4d3f27;
    line-height: 1.55;
}

@media (max-width: 767.98px){
    .about-cta-banner{
        padding: 62px 1rem;
    }

    .about-cta-layout{
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .about-cta-inner{
        gap: 14px;
    }

    .about-cta-text,
    .about-cta-impact{
        padding: 18px 16px;
    }

    .about-cta-text h2{
        font-size: clamp(1.7rem, 7vw, 2.2rem);
    }

    .about-cta-text p,
    .about-cta-impact-list span{
        font-size: 0.95rem;
    }
}

.banner-notfound{
    background-image: url('../images/people-outdoor-nature-and-lotus-at-yoga-class-me-2025-04-05-19-09-26-utc.jpg');
    background-position: center left;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 17em 1em 17em 1em;
    position: relative;
    z-index: 1;
}

.banner-notfound::before{
    content: '';
    position: absolute ;
    background-color: transparent;
    background-image: linear-gradient(89deg, var(--accent-color-3) 31%, var(--accent-color-transparent) 100%);
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/*==================================================
  8.0 Header Style
==================================================*/

.header-container{
    display: flex;
    flex-direction: row;
    padding: 1em 1em 1em 1em;

    
    color: var(--primary);
}

.navbar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px 20px;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.nav-link-wrapper{
    display: flex;
    flex-direction: row;
    gap: 20px 20px;
    align-items: center;
    width: 33%;
}

.nav-link{
    font-family: var(--font-family-heading);
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--primary);
    transition: all 0.3s ease;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active{
    color: var(--accent-color);
}


.dropdown-menu {
    background-color: var(--accent-color-2);
    color: var(--primary);
    border-radius: 0;
    border: none;
    padding: 10px 0px 10px 0px;
    overflow: hidden;
    margin-top: 1.125em !important;
    border-radius: 0px;
    min-width: 240px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
    box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
}

.dropdown-item{
    background-color: var(--accent-color-2);
    font-family: var(--font-family-heading);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4em;
    text-transform: capitalize;
    color: var(--primary);
    transition: all 300ms;
    padding: 15px 12px 15px 12px;
}

.dropdown-item:hover,
.dropdown-item.active{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
}

.dropdown-toggle::after {
    display: none !important;
}

.header-logo {
    width: 33%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.header-logo .navbar-brand{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.header-logo img{
    max-width: 100%;
    width: 44%;
    height: auto;
    object-fit: cover;
    object-position: center center;
}

.navbar-cta-container {
    width: 33%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.nav-btn{
    display: none;
    padding: 16px 16px;
    background-color: var(--primary);
    color: var(--accent-color-2);
    box-shadow: none;
    transition: all 300ms ease;
    border: none;
    border-radius: 0px 0px 0px 0px;
    box-shadow: none;
    font-size: 24px;
}

.nav-btn:hover{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
}

/* Homepage hero header variant */
.home-page header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
}

.home-page .header-container{
    position: relative;
    padding: 0.35em 2.5em 1.15em 2.5em;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.57) 68%, rgba(29, 42, 58, 0) 100%) !important;

    color: var(--accent-color-2);
    z-index: 1;
}

.home-page header .hero-container{
    max-width: 100%;
    padding-left: clamp(16px, 2.2vw, 42px);
    padding-right: clamp(16px, 2.2vw, 42px);
}

.home-page .navbar{
    align-items: stretch;
    flex-direction: column;
    gap: 0;
}

.home-page .header-meta-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    border-bottom: 1px solid rgba(216, 221, 228, 0.42);
    font-family: var(--font-family-text);
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-left: 0;
}

.home-page .header-meta-left,
.home-page .header-meta-right{
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.home-page .header-meta-row .meta-sep{
    opacity: 0.55;
}

.home-page .header-meta-row a{
    color: var(--accent-color-2);
    text-decoration: none;
}

.home-page .header-meta-right span:not(.meta-sep){
    white-space: nowrap;
}

.home-page .header-main-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 28px;
    min-height: 84px;
    padding-top: 8px;
}

.home-page .header-sticky-logo{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    position: relative;
}

.home-page .header-sticky-logo::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-50%);
}

.home-page .header-sticky-logo img{
    width: 85px;
    max-width: 85px;
    height: auto;
    object-fit: contain;
}

.home-page .nav-item-logo{
    display: inline-flex;
    align-items: center;
    
}

.home-page .nav-link-wrapper{
    grid-column: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.home-page .navbar-nav{
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
}

.home-page .navbar-nav .nav-item{
    flex: 0 0 auto;
}

.home-page .navbar-nav .nav-item + .nav-item{

    position: relative;
}

.home-page .navbar-nav .nav-item + .nav-item::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-50%);
}

.home-page .nav-link{
    font-family: var(--font-family-text);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--accent-color-2);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.5rem 0;
    white-space: nowrap;
}

.home-page .nav-link:hover,
.home-page .nav-link:focus,
.home-page .nav-link.active{
    color: #d8bf90;
}

.home-page .nav-link .fa-angle-down{
    font-size: 0.68rem;
    margin-left: 6px;
}

.home-page .dropdown-menu{
    background-color: #111111f0;
    margin-top: 1em !important;
}

.home-page .dropdown-item{
    background-color: transparent;
    color: var(--accent-color-2);
}

.home-page .dropdown-item:hover,
.home-page .dropdown-item.active{
    background-color: #917C0B;
    color: var(--accent-color-2);
}

.home-page .header-main-right{
    grid-column: 2;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.home-page .header-main-logo{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.home-page .header-main-logo img{
    width: 86px;
    max-width: 86px;
    height: auto;
    object-fit: contain;
}

.home-page .header-call-box{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-color-2);
    text-decoration: none;
}

.home-page .header-call-box i{
    font-size: 1.25rem;
    opacity: 0.92;
}

.home-page .header-call-text{
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.home-page .header-call-label{
    font-family: var(--font-family-text);
    font-size: 0.9rem;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-page .header-call-number{
    font-family: var(--font-family-text);
    font-size: 1.18rem;
    line-height: 1;
    color: #d8bf90;
    letter-spacing: 0.08em;
}

.home-page .header-quote-btn{
    padding: 13px 34px;
    background-color: #b3a27f;
    color: #ffffff;
    border-radius: 0;
    letter-spacing: 0.08em;
}

.home-page .header-quote-btn:hover{
    background-color: #c0af8b;
    color: #ffffff;
}

.home-page .header-main-right .nav-btn{
    display: none;
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    color: var(--accent-color-2);
    padding: 0;
    font-size: 1.75rem;
    line-height: 1;
}

.home-page .header-main-right .nav-btn:hover{
    color: #d8bf90;
    background: transparent;
}

.home-page header.is-sticky{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 30;
}

.home-page header.is-sticky .header-container{
    padding: 0.6em 2.5em;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.57) 68%, rgba(29, 42, 58, 0) 100%) !important;
    border-top: none;
}

.home-page header.is-sticky .header-meta-row,
.home-page header.is-sticky .header-main-right{
    display: none;
}

.home-page header.is-sticky .nav-link-wrapper{
    grid-column: 1;
    display: flex;
    justify-content: center;
}

.home-page header.is-sticky .navbar-nav{
    justify-content: center;
}

.home-page header.is-sticky .navbar-nav .nav-item:not(.nav-item-logo){
    display: none;
}

.home-page header.is-sticky .header-main-row{
    grid-template-columns: 1fr;
    min-height: 62px;
    padding-top: 0;
}

.home-page header.is-sticky .header-sticky-logo img{
    width: 96px;
    max-width: 96px;
}

.header-phone{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-color-2);
    text-decoration: none;
    font-family: var(--font-family-text);
    font-size: 1.05rem;
    font-weight: 600;
}

.header-phone:hover{
    color: #f2d992;
}

.header-intake-btn{
    padding: 15px 28px;
    background-color: #6f5731;
    color: var(--accent-color-2);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-family: var(--font-family-text);
    font-weight: 600;
}

.header-intake-btn:hover{
    background-color: #8a6a3a;
    color: var(--accent-color-2);
}

.home-page .banner-home{
    min-height: 62vh;
    padding: 0;
    background: none;
}

.home-page .banner-home .hero-container{
    min-height: 62vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-hero-home{
    width: 100%;
    min-height: 62vh;
}

.hero-home-slide{
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6.5em 1em 6.5em 1em;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-home-slide::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.28) 38%, rgba(0, 0, 0, 0.42) 100%);
}

.hero-home-slide .hero-container{
    position: relative;
    z-index: 1;
}

.hero-home-pagination{
    position: absolute;
    left: 50% !important;
    bottom: 38px !important;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    justify-content: center;
}

.hero-home-pagination .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.55);
    opacity: 1;
}

.hero-home-pagination .swiper-pagination-bullet-active{
    background-color: #d8bf90;
}

.hero-booking-section{
    position: relative;
    margin-top: -64px;
    padding: 0 1em;
    z-index: 5;
}

.hero-booking-form{
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(180px, 0.8fr);
    gap: 20px 24px;
    align-items: end;
    background-color: #f8f7f6;
    padding: 1.8em 1.5em;
    box-shadow: 0 12px 30px rgba(24, 25, 19, 0.12);
}

.hero-booking-field{
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.hero-booking-field label{
    font-family: var(--font-family-text);
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
}

.hero-booking-field input,
.hero-booking-field select{
    width: 100%;
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid #ddd6ce;
    background-color: transparent;
    color: var(--primary);
    font-family: var(--font-family-heading);
    font-size: clamp(1rem, 1.05vw, 1.5rem);
    line-height: 1.2;
    outline: none;
}

.hero-booking-field input::placeholder{
    color: #92887d;
}

.hero-booking-field input:focus,
.hero-booking-field select:focus{
    border-bottom-color: var(--accent-color);
}

.hero-booking-btn{
    align-self: stretch;
    width: 100%;
    padding: 16px 24px;
    background-color: #5f471f;
    color: var(--accent-color-2);
    text-transform: uppercase;
    font-family: var(--font-family-text);
    font-size: clamp(1rem, 1vw, 1.35rem);
    font-weight: 700;
    white-space: nowrap;
}

.hero-booking-btn:hover{
    background-color: #785a28;
    color: var(--accent-color-2);
}

/*==================================================
  9.0 Sidebar Style
==================================================*/

.sidebar-overlay{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: rgba(11, 14, 18, 0.52);
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 999;
}

.sidebar-overlay.active{
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(86vw, 340px);
    height: 100%;
    background-color: #000000;
    color: var(--accent-color-2);
    box-shadow: none;
    border-right: none;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateX(-103%);
    z-index: 1000;
    overflow-y: auto;
    max-height: 100vh;
    padding: 0px 14px 16px 10px;
}

.sidebar.active{
    transform: translateX(0);
}

body.sidebar-open{
    overflow: hidden;
}

.sidebar-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 14px 10px 14px;
}

.sidebar-logo-wrap{
    display: flex;
    justify-content: center;
    padding: 8px 8px 14px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    margin: 0 12px 12px 12px;
}

.sidebar-logo-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
}

.sidebar-logo-link img{
    width: 156px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.close-btn-sidebar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    background-color: rgba(255, 255, 255, 0.1);
   
    color: var(--accent-color-2);
    font-weight: 600;
    position: relative;
    font-size: 20px;
    cursor: pointer;
    padding: 8px 12px;
    transition: all 300ms;
    border: 1px solid rgba(255, 255, 255, 0.16);
    outline: none;
}

.close-btn-sidebar:hover{
    background-color: rgba(216, 167, 104, 0.24);
    color: #fff;
}

.menu {
    list-style: none;
    padding: 0 8px;
    margin-top: 14px;
    display: grid;
    gap: 6px;
}

.menu li {
    padding: 0;
}

.menu a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    display: block;

    transition: 0.28s ease;
    font-family: var(--font-family-heading);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35em;
    letter-spacing: 0px;
    padding: 12px 14px;
}

.menu a:hover,
.menu a.active,
.menu a.focus {
    color: #fff;
    border-color: rgba(216, 167, 104, 0.52);
    background: linear-gradient(90deg, rgba(216, 167, 104, 0.24), rgba(216, 167, 104, 0.08));
}

.sidebar-dropdown .dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.sidebar-dropdown .dropdown-header > a{
    flex: 1;
}

.sidebar-dropdown-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f4ede4;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px 10px;

    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;

}

.sidebar-dropdown-btn i{
    transition: transform 0.25s ease;
}

.sidebar-dropdown.open .sidebar-dropdown-btn i{
    transform: rotate(180deg);
}

.sidebar-dropdown-btn:hover {
    color: #fff;
    border: 1px solid rgba(216, 167, 104, 0.62);
    background: rgba(216, 167, 104, 0.24);
}

.sidebar-dropdown-menu {
    list-style: none;
    padding-left: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.33s ease-in-out, padding 0.33s ease-in-out;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
}

.sidebar-dropdown-menu.active {
    max-height: 100%;
    padding-top: 8px;
    padding-bottom: 4px;
}

.sidebar-dropdown-menu li{
    padding: 0;
}

.sidebar-dropdown-menu a{
    font-size: 18px;
    margin-left: 10px;
    padding: 10px 12px;
}
.below-dropdown {
    transition: margin-top 0.1s ease-in-out;
    margin-top: 0px;
}

.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: gray;
    border-radius: 5px;
}

/*==================================================
  10.0 Footer Style
==================================================*/

.footer-section{
    padding: 2em 1em 3em 1em;
}

.footer-container{
    display: flex;
    flex-direction: column;
    gap: 80px 80px;
}

.footer-header-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 2em 0em 2em 0em;
    border-width: 1px 0px 1px 0px;
    border-style: solid;
    border-color: var(--accent-color-4);
    flex-wrap: nowrap;
}

.footer-link-wrapper{
    display: flex;
    flex-direction: row;
    gap: 20px 20px;
    flex-wrap: wrap;
}

.footer-link-container{
    display: flex;
    flex-direction: column;
    gap: 25px 25px;
}

.footer-link-container.container-narrow{
    width: 15%;
}

.footer-link-container.container-wide{
    padding: 0px;
    width: 50%;
}

.footer-link{
    font-family: var(--font-family-heading);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--primary);
    transition: all 0.3s ease;
}

.footer-link:hover{
    color: var(--accent-color);
}

.copyright-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 25px 25px;
    width: 100%;
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    padding: 2em 2em 2em 2em;
}

.copyright-text{
    font-family: var(--font-family-heading);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--accent-color-2);
    text-align: center;
}

.footer-legalink-container{
    display: flex;
    flex-direction: row;
    gap: 50px 50px;
    justify-content: flex-end;
    align-items: flex-end;
}

.footer-legalink{
    font-family: var(--font-family-heading);
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--accent-color-2);
}

/* Reference style footer for home page */
.cwv-footer-section{
    padding-top: 3.1em;
    padding-bottom: 0.8em;
    background-color: #ececec;
}

.cwv-footer-wrap{
    border-top: 1px solid #a6adb3;
    border-bottom: 1px solid #a6adb3;
}

.cwv-footer-topnav{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 44px;
    padding: 1.2em 0 1.1em;
    border-bottom: 1px solid #a6adb3;
}

.cwv-footer-topnav a{
    font-family: var(--font-family-text);
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    font-weight: 500;
    text-transform: uppercase;
    color: #1f344a;
}

.cwv-footer-center{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 1.45em 0 1.3em;
}

.cwv-footer-center h2{
    margin-bottom: 2px;
    color: #24384d;
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    letter-spacing: 0.05em;
    font-weight: 500;
}

.cwv-footer-center p{
    color: #1f344a;
    margin: 0;
    font-size: 1.05rem;
}

.cwv-footer-contact{
    color: #1f344a;
    font-size: 1.95rem;
    line-height: 1.3;
    font-family: var(--font-family-text);
}

.cwv-footer-socials{
    display: flex;
    gap: 10px;
    margin-top: 9px;
}

.cwv-footer-socials a{
    width: 48px;
    height: 48px;
    border: 1px solid #93a0aa;
    color: #1f344a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-heading);
    font-size: 1.28rem;
    transition: all 0.25s ease;
}

.cwv-footer-socials a:hover{
    background-color: #1f344a;
    color: #ffffff;
}

.floating-translate-source,
.skiptranslate,
iframe.goog-te-banner-frame,
body > .skiptranslate {
    display: none !important;
}

body{
    top: 0 !important;
}

.site-preloader{
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.site-preloader-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.site-preloader-logo{
    width: clamp(110px, 24vw, 170px);
    height: auto;
    animation: preloaderLogoZoom 1.8s ease-in-out infinite;
    transform-origin: center center;
}

.site-preloader-spinner{
    width: 52px;
    height: 52px;
    border: 3px solid rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: sitePreloaderSpin 0.9s linear infinite;
}

body.preloader-active{
    overflow: hidden;
}

body.preloader-done .site-preloader{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes sitePreloaderSpin{
    to{
        transform: rotate(360deg);
    }
}

@keyframes preloaderLogoZoom{
    0%{
        transform: scale(0.92);
        opacity: 0.82;
    }
    50%{
        transform: scale(1.06);
        opacity: 1;
    }
    100%{
        transform: scale(0.92);
        opacity: 0.82;
    }
}

@media (prefers-reduced-motion: reduce){
    .site-preloader-logo{
        animation: none;
    }

    .site-preloader-spinner{
        animation-duration: 1.8s;
    }
}

.floating-translate{
    position: fixed;
    right: 0;
    top: 28%;
    z-index: 120;
}

.floating-translate select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #917C0B;
    color: #ffffff;
    border: none;
    padding: 10px 34px 10px 12px;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
}

.floating-translate::after{
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}

.floating-social-rail{
    position: fixed;
    right: 0;
    top: 42%;
    z-index: 119;
    display: flex;
    flex-direction: column;
}

.floating-social-link{
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.5rem;
}

.floating-social-link.is-call{ background-color: #5a2dbd; }
.floating-social-link.is-email{ background-color: #e88a12; }
.floating-social-link.is-facebook{ background-color: #1877f2; }
.floating-social-link.is-instagram{ background-color: #c13584; }
.floating-social-link.is-tiktok{ background-color: #111111; }
.floating-social-link.is-linkedin{ background-color: #0a66c2; }
.floating-social-link.is-whatsapp{ background-color: #25d366; }
.floating-social-link.is-top{
    background-color: #1f344a;
    position: fixed;
    right: 55px;
    bottom: 18px;
    z-index: 120;
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.floating-social-link.is-top.is-visible{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.floating-social-link:hover{
    color: #ffffff;
    filter: brightness(1.06);
}

@media (max-width: 767px){
    .floating-translate{
        top: auto;
        right: 10px;
        bottom: 12px;
        z-index: 140;
    }

    .floating-translate select{
        padding: 8px 30px 8px 10px;
        font-size: 0.9rem;
        
    }

    .floating-translate::after{
        right: 10px;
    }

    .floating-social-rail{
        top: auto;
        right: 10px;
        bottom: 58px;
        z-index: 139;
    }

    .floating-social-link{
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }

    .floating-social-link.is-top{
        right: 58px;
        bottom: 14px;
    }
}

.cwv-footer-copy{
    margin-top: 16px !important;
    font-family: var(--font-family-text);
    font-size: 1.08rem;
    color: #7f622f !important;
}

.cwv-footer-awards{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 1.45em 0 1.1em;
    border-top: 1px solid #a6adb3;
}

.cwv-footer-awards h3{
    font-size: clamp(1.8rem, 2.5vw, 2.25rem);
    color: #1f344a;
    margin: 0;
    font-weight: 400;
}

.cwv-award-badges{
    display: flex;
    align-items: center;
    gap: 22px;
}

.cwv-award-badge{
    width: 112px;
    min-height: 86px;
    color: #7b8085;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    line-height: 1.15;
    font-size: 0.66rem;
    font-family: var(--font-family-text);
    text-transform: uppercase;
    opacity: 0.82;
}

.cwv-award-badge i{
    font-size: 2rem;
    color: #6c7278;
}

.cwv-award-badge span{
    font-size: 0.62rem;
    letter-spacing: 0.02em;
}

@media screen and (max-width: 991.98px){
    .cwv-footer-section{
        padding-top: 2.4em;
    }
    .cwv-footer-topnav{
        gap: 12px 22px;
    }
    .cwv-footer-topnav a{
        font-size: 0.98rem;
    }
    .cwv-footer-center h2{
        font-size: clamp(1.95rem, 6vw, 2.85rem);
    }
    .cwv-footer-center p{
        font-size: 1rem;
    }
    .cwv-footer-contact{
        font-size: 1.4rem;
    }
    .cwv-footer-copy{
        font-size: 0.98rem;
    }
    .cwv-footer-awards h3{
        font-size: clamp(1.5rem, 4.5vw, 1.95rem);
    }
    .cwv-footer-awards{
        flex-direction: column;
        align-items: flex-start;
        padding-top: 1.3em;
    }
}

@media screen and (max-width: 767.98px){
    .cwv-footer-topnav{
        justify-content: center;
    }
    .cwv-footer-topnav a{
        font-size: 0.88rem;
    }
    .cwv-footer-socials a{
        width: 40px;
        height: 40px;
        font-size: 1.05rem;
    }
    .cwv-footer-copy{
        font-size: 0.9rem;
        line-height: 1.6;
    }
    .cwv-award-badges{
        width: 100%;
        justify-content: space-around;
    }
    .cwv-award-badge{
        width: 88px;
        min-height: 72px;
        font-size: 0.56rem;
    }
    .cwv-award-badge i{
        font-size: 1.45rem;
    }
}

/*==================================================
  11.0 Heading Style
==================================================*/

.sub-heading{
    font-family: var(--font-family-heading);
    color: var(--primary);
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.2em;
    text-transform: uppercase;
}

/*==================================================
  12.0 Button Style
==================================================*/

.btn{
    display: inline-block;
    padding: 12px 25px 12px 25px;
    border: none;
    border-radius: 0px 0px 0px 0px;
    transition: all 0.3s ease;
}

.btn.btn-accent{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
}

.btn.btn-accent:hover{
    background-color: var(--primary);
    color: var(--accent-color-2);
}

.btn.btn-accent-2{
    background-color: var(--accent-color-2);
    color: var(--primary);
}

.btn.btn-accent-2:hover{
    background-color: var(--primary);
    color: var(--accent-color-2);
}

.btn.btn-accent-hover-outline{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    border: 1px solid var(--accent-color);
}

.btn.btn-accent-hover-outline:hover{
    background-color: var(--accent-color-2);
    border: 1px solid var(--accent-color);
}

.schedule-tab-btn{
    padding: 8px 25px 8px 25px;
    background-color: var(--secondary);
    color: var(--primary);
    border-bottom: 2px solid var(--accent-color);
    text-align: center;
}

.schedule-tab-btn.active{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
}

.testimonial-btn{
    background-color: var(--secondary);
    color: var(--primary);
    border: 1px solid var(--accent-color-4);
    border-radius: 25px 25px 25px 25px;
    margin: 0px 0px 0px 6px;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
    padding: 6px 8px 4px 8px;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.testimonial-btn:hover{
    background-color: var(--accent-color);
    color: var(--secondary);
}

/*==================================================
  13.0 Card Style
==================================================*/

.card{
    border: none;
    border-radius: 0px 0px 0px 0px;
}

.card.card-chooseus{
    background-color: var(--accent-color-2);
    color: var(--primary);
    padding: 30px 30px 30px;
    display: flex;
    flex-direction: row;
    width: auto;
    height: 100%;
    gap: 5px 5px;
}

.card.card-chooseus .chooseus-icon{
    color: var(--primary);
    font-size: 55px;
}

.card.card-chooseus .chooseus-content{
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
    justify-content: flex-end;
}

.card.card-service{
    background-color: var(--accent-color-2);
    color: var(--primary);
    padding: 100px 30px 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 40px 40px;
    height: 100%;
    justify-content: space-between;
}

.card.card-service > .d-flex.flex-column{
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card.card-service .service-icon{
    width: 60px;
    height: 60px;
    padding: 20px;
    background-color: var(--accent-color-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card.card-service .card-service-title{
    color: var(--primary);
    transition: all 0.3s ease;
}

.card.card-service:hover .card-service-title{
    color: var(--accent-color-5);
}

.card.card-service .service-icon svg{
    width: 60px;
    height: 60px;
    fill: var(--accent-color-2);
    flex-shrink: 0;
}

.card.card-service .service-icon i{
    color: var(--accent-color-2);
    font-size: 2.2rem;
}

.card.card-service .service-icon svg path,
.card.card-service .service-icon svg rect,
.card.card-service .service-icon svg circle,
.card.card-service .service-icon svg .cls-1{
    fill: var(--accent-color-2) !important;
    stroke: none !important;
}

.card-recent-post{
    background-color: var(--accent-color-3);
    color: var(--accent-color-2);
    padding: 1.5em 1.5em 1.5em 1.5em;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.newsletter-card{
    background-color: var(--accent-color-2);
    color: var(--primary);
    padding: 1em 1em 1em 1em;
}

.newsletter-card .newsletter-input{
    width: 70%;
}

.newsletter-card .newsletter-btn{
    width: 30%;
}

/*==================================================
  14.0 Color Style
==================================================*/

.primary-accent{
    color: var(--primary);
}

.accent-color{
    color: var(--accent-color);
}

.accent-color-2{
    color: var(--accent-color-2);
}

/*==================================================
  15.0 Image Style
==================================================*/

.image-container{
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.image-container img{
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
}

.chooseus-image{
    width: 30%;
    display: flex;
    align-self: stretch;
}

.chooseus-image img{
    width: 100%;
    height: 100%;
    min-height: 100%;
}

.partner-img{
    max-width: 100%;
    height: auto;
}

.schedule-tab-image{
    width: 51%;
}

.schedule-tab-image img{
    width: 100%;
    height: 15vh;
    object-fit: cover;
    object-position: top center;
}

.gallery-image.gallery-wide-img img,
.gallery-image.gallery-tall-img img{
    width: 100%;
}

.gallery-image.gallery-wide-img img{
    height: 35vh;
}

.gallery-image.gallery-tall-img img{
    height: 78vh;
}

.testimonial-image{
    width: 80px;
    height: 80px;
    max-width: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 50%;
}

.footer-logo img{
    width: 34%;
}

/*==================================================
  16.0 Form Style
==================================================*/

.form{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px 20px;
    width: 100%;
}

.form.hero-booking-form{
    display: grid;
    align-items: end;
}

.form input{
    padding: 14px 12px 14px 12px;
    border: none;
    border-bottom: 1px solid var(--accent-color-4);
    border-radius: 0px;
    color: var(--primary);
    font-family: var(--font-family-heading);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2em;
    transition: all 0.3s ease;
    outline: none;
}

.form input:hover,
.form input:focus{
    outline: none;
    box-shadow: none;
    background-color: transparent;
    border-bottom: solid 1px var(--primary);
}

.success {
    color: var(--accent-color-3);
}
  
.error {
    color: var(--accent-color-3);
}  

.alert {
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    align-items: center;
    padding: 2em;
    border-radius: 6px;
    margin-bottom: 15px;
    background-color: var(--secondary);
    color: var(--primary);
}

.hidden{
    display: none;
}

/*==================================================
  17.0 Banner Home Style
==================================================*/

.banner-home-container{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: min(100%, 860px);
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
}

.banner-home-container > div{
    width: 100%;
    display: flex;
    justify-content: center;
}

.banner-home-title{
    color: var(--accent-color-2);
}

.banner-home-excerpt{
    color: var(--accent-color-2);
    width: min(100%, 760px);
    margin-left: auto;
    margin-right: auto;
}

.banner-home-container .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 180px;
}

/*==================================================
  18.0 Banner Inner Style
==================================================*/

.banner-inner-content{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    justify-content: center;
}

.banner-inner-title{
    color: var(--accent-color-2);
}

.banner-inner-excerpt{
    color: var(--accent-color-2);
    width: 36%;
}


/*==================================================
  19.0 Banner NotFound Style
==================================================*/

.banner-notfound-content{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.banner-notfound-title{
    color: var(--accent-color-2);
}

.banner-notfound-subtitle{
    font-family: var(--font-family-heading);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--accent-color-2);
}

.banner-notfound-excerpt{
    color: var(--accent-color-2);
    width: 36%;
}

/*==================================================
  20.0 About Style
==================================================*/

.about-content-container{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    justify-content: center;
    width: 60%;
    margin-left: auto;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: flex-start;
}

.about-content-container .about-content-title{
    width: 100%;
}

.about-content-container .about-content-excerpt{
    width: 91%;
}

.sub-heading-line{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.sub-heading-line::before,
.sub-heading-line::after {
    content: '';
    flex-grow: 1;
    border-bottom: 1px solid var(--primary);
    opacity: .5;
}

.about-achievement-box{
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
    align-items: flex-start;
    text-align: start;
}

.about-achievement-text,
.about-achievement-suffix{
    font-family: var(--font-family-heading);
    font-size: 3.1rem;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--accent-color);
}

.about-achievement-title{
    font-family: var(--font-family-heading);
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.2em;
}

.philosophy-section{
    background:
        radial-gradient(circle at top right, rgba(100, 115, 79, 0.12), transparent 30%),
        linear-gradient(180deg, #f7f4ef 0%, #eef3ea 100%);
    overflow: hidden;
}

.philosophy-layout{
    align-items: center;
}

.philosophy-content{
    gap: 24px;
}

.philosophy-copy{
    gap: 16px;
    max-width: 760px;
}

.philosophy-copy .sub-heading{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-color);
}

.philosophy-copy h2{
    margin: 0;
    max-width: 680px;
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 1.08;
    color: #173026;
}

.philosophy-copy p{
    margin: 0;
    color: #526258;
    line-height: 1.8;
    font-size: 1.02rem;
}

.philosophy-lead{
    font-family: var(--font-family-heading);
    font-size: 1.34rem;
    line-height: 1.55;
    color: #243b31;
    padding-left: 20px;
    border-left: 3px solid rgba(100, 115, 79, 0.45);
    max-width: 700px;
}

.philosophy-pillars{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.philosophy-pillar{
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(100, 115, 79, 0.18);
    box-shadow: 0 18px 32px rgba(18, 40, 31, 0.08);
    padding: 24px 22px;
    backdrop-filter: blur(6px);
}

.philosophy-pillar-icon{
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #7a8d63 0%, #395948 100%);
    font-size: 1.2rem;
}

.philosophy-pillar h3{
    margin-bottom: 10px;
    color: #173026;
    font-size: 1.45rem;
}

.philosophy-pillar p{
    margin: 0;
    color: #5a695f;
    line-height: 1.7;
}

.philosophy-image-card{
    position: relative;
    overflow: visible;
    border-radius: 28px;
}

.philosophy-image-card img{
    
    box-shadow: 0 24px 48px rgba(14, 31, 24, 0.18);
}

.philosophy-image-badge{
    position: absolute;
    left: -26px;
    bottom: 28px;
    max-width: 260px;
    background: rgba(23, 48, 38, 0.92);
    color: #ffffff;
    padding: 18px 20px;
    border-radius: 18px;
    box-shadow: 0 18px 34px rgba(10, 23, 17, 0.28);
}

.philosophy-image-badge span{
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
    margin-bottom: 8px;
}

.philosophy-image-badge strong{
    display: block;
    font-family: var(--font-family-heading);
    font-size: 1.22rem;
    line-height: 1.4;
    font-weight: 400;
}

.mission-vision-box{
    margin-top: 8px;
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.mission-vision-item{
    background: var(--accent-color-2);
    border: 1px solid rgba(214, 209, 204, 0.95);
    padding: 28px 28px 24px;
    min-height: 100%;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.mission-vision-item h3{
    margin-bottom: 12px;
    color: var(--accent-color-3);
    font-size: 1.7rem;
    line-height: 1.2;
}

.mission-vision-item p{
    margin: 0;
    color: #55645b;
    line-height: 1.75;
    font-size: 1.05rem;
}

.mission-vision-item:hover{
    transform: translateY(-3px);
    border-color: rgba(100, 115, 79, 0.4);
    box-shadow: 0 16px 28px rgba(26, 49, 42, 0.08);
}

.mission-vision-divider{
    display: none;
}

@media (max-width: 767.98px){
    .philosophy-copy h2{
        font-size: 2rem;
    }

    .philosophy-lead{
        font-size: 1.12rem;
        padding-left: 16px;
    }

    .philosophy-pillars{
        grid-template-columns: 1fr;
    }

    .philosophy-pillar{
        padding: 20px 18px;
    }

    .philosophy-image-card{
        margin-top: 10px;
    }

    .philosophy-image-badge{
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
    }

    .mission-vision-box{
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mission-vision-item{
        padding: 22px 20px;
    }

    .mission-vision-item h3{
        font-size: 1.42rem;
    }
}

.core-values-section{
    background: #f1f2e7;
}

.core-values-wrap{
    max-width: 1120px;
}

.core-values-head{
    margin-bottom: 32px;
    text-align: center;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.core-values-head .sub-heading{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #6f8e76;
}

.core-values-head h2{
    margin: 10px 0 14px;
    font-size: clamp(2rem, 3.8vw, 3.6rem);
    line-height: 1.15;
    color: #12281f;
}

.core-values-subtitle{
    color: #536557;
    line-height: 1.7;
    font-size: 1rem;
    margin: 0;
}

.core-values-closing{
    margin-top: 30px;
    text-align: center;
    color: #3d5045;
    line-height: 1.7;
    font-size: 1rem;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    font-style: italic;
    padding: 18px 24px;
    border-top: 1px solid rgba(100, 115, 79, 0.3);
    border-bottom: 1px solid rgba(100, 115, 79, 0.3);
}

.core-values-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.core-value-card{
    border: 1px solid #cdd5c9;
    background: #ffffff;

    padding: 32px 28px;
    flex: 0 0 calc(33.333% - 12px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.core-value-card:hover{
    transform: translateY(-5px);
    border-color: #7aab89;
    box-shadow: 0 16px 30px rgba(20, 41, 31, 0.1);
}

.core-value-icon-wrap{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(8, 26, 24, 0.74);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.core-value-card h3{
    margin: 0;
    color: #173026;
    font-size: clamp(1.35rem, 1.8vw, 1.9rem);
    line-height: 1.25;
}

.core-value-card p{
    margin: 0;
    color: #576258;
    line-height: 1.65;
    font-size: 0.97rem;
}

.why-choose-voyage-box{
    margin-top: 24px;
    background: #f6f7ec;
    border: 1px solid #c6d0c4;
    padding: 30px 28px;
}

.why-choose-voyage-box h3{
    margin-bottom: 12px;
    color: #173026;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    line-height: 1.2;
}

.why-choose-voyage-list{
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.why-choose-voyage-list li{
    position: relative;
    padding-left: 22px;
    color: #30493f;
    line-height: 1.6;
}

.why-choose-voyage-list li::before{
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: #5f9775;
    font-weight: 700;
}

.why-choose-voyage-box p{
    margin: 0;
    color: #42574d;
    line-height: 1.65;
}

@media (max-width: 991px){
    .core-value-card{
        flex: 0 0 calc(50% - 9px);
    }
}

@media (max-width: 575px){
    .core-value-card{
        flex: 0 0 100%;
        padding: 24px 18px;
    }

    .core-value-card h3{
        font-size: 1.7rem;
    }

    .why-choose-voyage-box{
        padding: 24px 18px;
    }
}

/*==================================================
  21.0 Why Choose Us Style
==================================================*/

.chooseus-content-container{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.chooseus-content-title{
    margin: 99px 0px 0px 0px;
    color: var(--primary);
    transition: all 0.3s ease;
}

.chooseus-content-title:hover{
    color: var(--accent-color-5);
}

.chooseus-bullet-list{
    list-style: disc;
    padding-left: 1.2em;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chooseus-bullet-list li{
    font-family: var(--font-family-text);
    font-size: 1rem;
    line-height: 1.4em;
    color: var(--text-color);
}

.home-page .card.card-chooseus{
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: clamp(240px, 24vw, 320px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.24);
    isolation: isolate;
}

.home-page .card.card-chooseus::before{
    content: "";
    position: absolute;
    inset: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform 0.35s ease;
    z-index: -2;
    background-image: var(--chooseus-bg);
}

.home-page .card.card-chooseus::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.88) 100%);
    z-index: -1;
}

.home-page .card.card-chooseus:hover::before{
    transform: scale(1.05);
}

.home-page .chooseus-card-bg-1::before{
    background-image: url('../images/woman-practicing-yoga-outdoors-in-park-2025-03-07-14-12-57-utc.jpg');
}

.home-page .chooseus-card-bg-2::before{
    background-image: url('../images/group-of-millennial-women-having-group-yoga-class-2024-12-02-04-38-41-utc.jpg');
}

.home-page .chooseus-card-bg-3::before{
    background-image: url('../images/beautiful-woman-practices-yoga-in-crabi-thailand-2025-01-16-11-21-45-utc-1024x768.jpg');
}

.home-page .card.card-chooseus.has-custom-chooseus-bg::before{
    display: none;
}

.home-page .card.card-chooseus .chooseus-card-bg-image{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.home-page .card.card-chooseus .chooseus-content{
    gap: 12px;
}

.home-page .chooseus-content-title{
    margin: 0;
    color: #ffffff;
}

.home-page .chooseus-content-title:hover{
    color: #f0e2c0;
}

.home-page .chooseus-bullet-list li{
    color: rgba(255, 255, 255, 0.92);
}

/*==================================================
  22.0 Service Style
==================================================*/

.banner-service-content{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.banner-service-content .banner-service-title{
    color: var(--accent-color-2);
    width: 49%;
}

.banner-service-content .banner-service-description{
    color: var(--accent-color-2);
    width: 44%;
}

.ayurveda-detail-section{
    margin-top: -3.5em;
    background: linear-gradient(180deg, #ffffff 0%, #f8f7f4 100%);
    border: 1px solid #e7e1d9;
    border-radius: 18px;
    box-shadow: 0 14px 35px rgba(36, 32, 25, 0.09);
    padding: 2.3em;
    display: flex;
    flex-direction: column;
    gap: 24px 24px;
}

.ayurveda-intro{
    display: flex;
    flex-direction: column;
    gap: 12px 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5dfd7;
}

.ayurveda-intro h2{
    font-size: clamp(1.85rem, 2.6vw, 2.6rem);
}

.ayurveda-intro p{
    max-width: 980px;
    line-height: 1.5em;
}

.ayurveda-detail-section > h3{
    font-size: 1.45rem;
    color: #4e3f2a;
}

.ayurveda-treatment-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 18px;
}

.ayurveda-treatment-item{
    border: 1px solid #dfd7cd;
    border-radius: 14px;
    padding: 1.15em;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ayurveda-treatment-item:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(44, 34, 20, 0.11);
    border-color: #cbbda9;
}

.ayurveda-treatment-title{
    font-size: 1.2rem;
    line-height: 1.3em;
    color: #2f261d;
}

.ayurveda-treatment-desc{
    color: #5d5549;
    line-height: 1.45em;
}

.ayurveda-treatment-item p{
    line-height: 1.45em;
}

.ayurveda-treatment-item p strong{
    color: #5f471f;
}

.service-card-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px 25px;
    margin-top: -6em;
    padding: 0em;
    align-items: stretch;
}

.home-page .service-card-container .card.card-service{
    position: relative;
    overflow: hidden;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    isolation: isolate;
}

.home-page .service-card-container .card.card-service::before{
    content: "";
    position: absolute;
    inset: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform 0.35s ease;
    z-index: -2;
    background-image: var(--service-card-bg);
}

.home-page .service-card-container .card.card-service.has-custom-bg::before{
    display: none;
}

.home-page .service-card-container .card.card-service .service-card-bg-image{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.home-page .service-card-container .card.card-service::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.5) 52%, rgba(0, 0, 0, 0.9) 100%);
    z-index: -1;
}

.home-page .service-card-container .card.card-service:hover::before{
    transform: scale(1.04);
}

.home-page .service-card-container .card.card-service > *{
    position: relative;
    z-index: 1;
}

.home-page .service-card-container .card.card-service .card-service-title,
.home-page .service-card-container .card.card-service p,
.home-page .service-card-container .card.card-service .service-benefits-text,
.home-page .service-card-container .card.card-service .service-benefits-label{
    color: #ffffff;
}

.home-page .service-card-container .card.card-service:hover .card-service-title{
    color: #f3e8cd;
}

.home-page .service-card-container .card.card-service .service-icon{
    background-color: rgba(12, 40, 35, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.home-page .service-card-container .card.card-service .service-benefits-wrap{
    background-color: rgba(8, 26, 24, 0.74);
    backdrop-filter: blur(1px);
}

.home-page .service-card-container .card.card-service:nth-child(4n+1){
    --service-card-bg: url('../images/woman-practicing-yoga-outdoors-in-park-2025-03-08-04-28-54-utc-1024x683.jpg');
}

.home-page .service-card-container .card.card-service:nth-child(4n+2){
    --service-card-bg: url('../images/people-outdoor-nature-and-lotus-at-yoga-class-me-2025-04-05-19-09-26-utc.jpg');
}

.home-page .service-card-container .card.card-service:nth-child(4n+3){
    --service-card-bg: url('../images/flexible-young-woman-practicing-yoga-in-green-gard-2025-03-25-04-33-10-utc-1024x683.jpg');
}

.home-page .service-card-container .card.card-service:nth-child(4n){
    --service-card-bg: url('../images/group-of-millennial-women-having-group-yoga-class-2024-12-01-20-25-5-1-e1759204456472.jpg');
}

.service-bullet-list{
    list-style: disc;
    margin: 0;
    padding-left: 1.2em;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.service-bullet-list li{
    font-family: var(--font-family-text);
    font-size: 0.98rem;
    line-height: 1.35em;
    color: var(--text-color);
}

.service-benefits-wrap{
    margin-top: auto;
    padding: 12px 12px 10px 12px;
    background-color: var(--accent-color-3);
}

.service-benefits-divider{
    margin: 0 0 10px 0;
    border: none;
    border-top: 1px solid #ffffff;
    opacity: 0.95;
}

.service-benefits-text{
    color: var(--accent-color-2);
    line-height: 1.4em;
}

.service-benefits-label{
    font-weight: 700;
    color: #ffffff;
}

.card.card-service.service-card-extra{
    display: none;
}

.service-see-more-wrap{
    margin-top: 35px;
}

/*==================================================
  23.0 Schedule Style
==================================================*/

.schedule-content-container{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    justify-content: center;
    align-items: center;
}

.schedule-tab-btn-container{
    display: flex;
    flex-direction: row;
    gap: 24px 24px;
}

.schedule-tab-panel-container{
    display: flex;
    flex-direction: row;
    gap: 80px 0px;
    overflow: hidden;
    width: 100%;
}

.schedule-tab-panel{
    display: none;
    flex-direction: column;
    gap: 20px 20px;
    justify-content: center;
    width: 100%;
}

.schedule-tab-panel.active{
    display: flex;
}

.schedule-tab-panel .tab-item{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px 0px;
    border-top: 1px solid var(--accent-color-4);
    padding: 1em 0em 0em 0em;
    align-items: stretch;
    width: 100%;
}

.schedule-tab-panel .tab-item:last-child{
    padding: 1em 0em 1em 0em;
    border-top: 1px solid var(--accent-color-4);
    border-bottom: 1px solid var(--accent-color-4);
}

.tab-mobile-container{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.mobile-schedule-tab-panel .tab-item{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    justify-content: center;
    width: 100%;
}
.mobile-schedule-tab-panel{
    display: none;
    flex-direction: column;
    gap: 20px 20px;
    justify-content: center;
    width: 100%;
}


.mobile-schedule-tab-panel.active{
    display: flex;
}

/*==================================================
  24.0 Testimonial Style
==================================================*/

.testimonial-box-container{
    display: flex;
    flex-direction: row;
    gap: 1em;
    position: relative;
    z-index: 1;
    max-width: 100%;
    overflow: hidden;
}

.testimonial-box{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    min-width: 100%;
    box-sizing: border-box;
    transform: translateX(0);
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    opacity: 1;
}

.testimonial-quote{
    font-family: var(--font-family-heading);
    font-size: 3.1rem;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--accent-color-3);
}

.testimonial-star-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px 5px;
}

.testimonial-star{
    font-size: 0.875rem;
    color: var(--accent-color);
}

.testimonial-button-container{
    position: absolute;
    right: 0;
    bottom: 0;
}

/*==================================================
  25.0 Contact Style
==================================================*/

.contact-section-container{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.about-page .contact-section-container{
    align-items: center;
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
}

.about-page .contact-form{
    justify-content: center;
}

.contact-section-title{
    width: 49%;
    color: var(--accent-color-2);
}

.about-page .contact-section-title{
    width: 100%;
}

.contact-form{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px 20px;
    background-color: var(--accent-color-2);
    color: var(--primary);
    padding: 2em 2em 2em 2em;
    border: none;
    border-radius: 0px;
    width: 100%;
    box-sizing: border-box;
}

.contact-form input,
.contact-form button {
    width: 25%;
    box-sizing: border-box;
}

.banner-contact-assessment{
    padding: 9rem 1rem 4rem;
}

.banner-contact-assessment .contact-section-container{
    gap: 24px;
}

.banner-contact-assessment .contact-section-title{
    width: min(100%, 760px);
}

.homeLeadFormSection{
    width: 100%;
}

.homeLeadFormCard{
    display: block;
    background: #f7f3e9;
    border: 1px solid rgba(221, 214, 196, 0.92);
    box-shadow: 0 24px 70px rgba(26, 46, 39, 0.14);
    overflow: hidden;
}

.homeLeadFormCard__formWrap{
    padding: 32px 34px 40px;
    background: #fcfaf3;
}

.pkInlineSummary{
    display: grid;
    gap: 18px;
    margin-bottom: 26px;
    padding: 18px 18px 16px;
    border: 1px solid #e6decb;
    background: linear-gradient(135deg, #ffffff 0%, #f5f0e3 100%);
    border-radius: 18px;
}

.pkInlineSummary__meta{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pkInlineSummary__eyebrow{
    margin: 0;
    color: #2f6951;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.pkInlineSummary__pulse{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2f9b67;
    box-shadow: 0 0 0 0 rgba(47, 155, 103, 0.5);
    animation: pkPulse 1.6s ease-out infinite;
}

.pkInlineSummary__title{
    margin: 0;
    font-size: clamp(28px, 3.1vw, 42px);
    line-height: 1.08;
    color: #102628;
}

.homeLeadWizardStep{
    display: none;
}

.homeLeadWizardStep.is-active{
    display: block;
}

.homeLeadWizardMeta{
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e6decb;
}

.homeLeadWizardMeta__step{
    display: inline-block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6c766e;
}

.homeLeadWizardMeta__title{
    margin: 0;
    font-size: clamp(34px, 3.2vw, 50px);
    line-height: 1.02;
    color: #102628;
}

.homeLeadForm__grid{
    display: grid;
    gap: 18px;
    margin-bottom: 14px;
}

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

.homeLeadForm label{
    display: block;
}

.homeLeadForm label > span{
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1f4132;
}

.homeLeadForm input,
.homeLeadForm textarea,
.homeLeadForm select{
    width: 100%;

    padding: 12px 16px;
    border: 1px solid #d6d0be;
    background: #fbfaf6;
    color: #284536;
}

.homeLeadForm textarea{
    border-radius: 18px;
}

.homeLeadWizardActions{
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.homeLeadWizardActions--split{
    justify-content: space-between;
    gap: 12px;
}

.homeLeadForm__submit,
.homeLeadForm__ghost{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    min-height: 48px;
    padding: 10px 26px;
    font-weight: 700;
    border: 0;
}

.homeLeadForm__submit{
    background: #2d7358;
    color: #fff;
}

.homeLeadForm__ghost{
    background: #edf2ed;
    color: #234736;
}

.homeLeadOptionCard{
    display: grid;
    gap: 12px;
    margin-bottom: 10px;
    padding: 16px 18px;
    background: rgba(255,255,255,.72);
    border: 1px solid #d3e4d7;
    border-radius: 18px;
}

.homeLeadOptionCard > p{
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1f3f33;
}

.homeLeadWizardStep[data-step="2"] .homeLeadOptionCard,
.homeLeadWizardStep[data-step="3"] .homeLeadOptionCard,
.homeLeadWizardStep[data-step="4"] .homeLeadOptionCard,
.homeLeadWizardStep[data-step="5"] .homeLeadOptionCard,
.homeLeadWizardStep[data-step="6"] .homeLeadOptionCard{
    justify-items: center;
    text-align: center;
}

.homeLeadOptionCard--notice,
.homeLeadOptionCard--confirm{
    background: #eef4ef;
    border-color: #c9d7cb;
}

.homeLeadOptionCard--notice > p,
.homeLeadOptionCard--confirm > p{
    font-size: 15px;
    font-weight: 500;
    color: #506b5d;
}

.pkRealtime{
    margin: 0;


}

.pkRealtime--inline{
    max-width: 100%;
}

.pkRealtime__title{
    margin: 0 0 16px;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #325743;
    font-weight: 800;
}

.pkRealtime__grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.pkRealtime__card{
    padding: 13px 12px 12px;
    text-align: center;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}

.pkRealtime__card--v{background:linear-gradient(180deg,#ecf3ff 0%,#d7e6fb 100%);border:1px solid #bfd2f0}
.pkRealtime__card--p{background:linear-gradient(180deg,#fbefdc 0%,#f2dfc2 100%);border:1px solid #e8cfac}
.pkRealtime__card--k{background:linear-gradient(180deg,#e6f5eb 0%,#d2e9da 100%);border:1px solid #badcbe}

.pkRealtime__label{
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.pkRealtime__card--v .pkRealtime__label,.pkRealtime__card--v .pkRealtime__pct{color:#1d4ed8}
.pkRealtime__card--p .pkRealtime__label,.pkRealtime__card--p .pkRealtime__pct{color:#cc4f00}
.pkRealtime__card--k .pkRealtime__label,.pkRealtime__card--k .pkRealtime__pct{color:#0f7a3d}

.pkRealtime__pct{
    margin: 6px 0 2px;
    font-size: clamp(24px, 2.4vw, 30px);
    line-height: 1;
    font-weight: 800;
}

.pkRealtime__count{
    margin: 0;
    font-size: 12px;
    color: #5b6f64;
}

.pkRealtime__meter{
    margin: 10px 0 0;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.68);
    overflow: hidden;
}

.pkRealtime__meter > span{
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    transition: width .28s ease;
}

.pkRealtime__card--v .pkRealtime__meter > span{background:linear-gradient(90deg,#356be6 0%,#1d4ed8 100%)}
.pkRealtime__card--p .pkRealtime__meter > span{background:linear-gradient(90deg,#e06718 0%,#cc4f00 100%)}
.pkRealtime__card--k .pkRealtime__meter > span{background:linear-gradient(90deg,#159654 0%,#0f7a3d 100%)}

.pkRealtime__card.is-leading{
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 12px 22px rgba(27, 59, 43, .16), inset 0 1px 0 rgba(255,255,255,.65);
}

@keyframes pkPulse{
    70%{
        box-shadow: 0 0 0 8px rgba(47, 155, 103, 0);
    }
    100%{
        box-shadow: 0 0 0 0 rgba(47, 155, 103, 0);
    }
}

.pkDoshaOpts{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.pkDoshaOpt{
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
  
  
    background: #f2f7f3;
    cursor: pointer;
    justify-content: center;
    text-align: center;
    transition: background .18s, border-color .18s, color .18s, box-shadow .18s, transform .18s;
}

.pkDoshaOpt input[type="radio"]{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pkDoshaOpt__text{
    font-size: 14px;
    color: #2f4d41;
    line-height: 1.25;
    font-weight: 600;
    word-break: break-word;
}

.pkDoshaOpt:hover{
    background: rgba(100, 115, 79, 0.1);
    border-color: var(--accent-color);
}

.pkDoshaOpt.is-sel{
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 10px 24px rgba(100, 115, 79, 0.24);
    transform: translateY(-1px);
}

.pkDoshaOpt.is-sel .pkDoshaOpt__text{
    color: var(--accent-color-2);
    font-weight: 700;
}

.pkErrHint{
    display: none;
    margin: 2px 0 0;
    color: #e53e3e;
    font-size: 12px;
}

.pkErrHint.show{
    display: block;
}

/* Contact Us Page Redesign */
.contact-page-main{
    background:
    radial-gradient(circle at 10% 10%, rgba(100, 115, 79, 0.18), transparent 36%),
    radial-gradient(circle at 88% 92%, rgba(26, 49, 42, 0.1), transparent 34%),
        var(--secondary);
}

.contact-us-hero{
    padding: 150px 1rem 72px;
}

.contact-us-hero-inner{
    max-width: 860px;
    margin: 0 auto;
}

.contact-us-hero-inner .sub-heading{
    color: var(--accent-color);
}

.contact-us-hero-inner h1{
    margin: 12px 0;
    font-size: clamp(2.2rem, 4.8vw, 3.7rem);
    line-height: 1.14;
    color: var(--accent-color-3);
}

.contact-us-hero-inner p{
    color: #55645b;
    font-size: 1.05rem;
    line-height: 1.75;
}

.contact-us-info-grid{
    margin-top: 42px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.contact-us-info-card{
    position: relative;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(100, 115, 79, 0.2);
    padding: 30px 24px;
    box-shadow: 0 14px 30px rgba(26, 49, 42, 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.contact-us-info-card:hover{
    transform: translateY(-6px);
    border-color: rgba(100, 115, 79, 0.4);
    box-shadow: 0 18px 36px rgba(26, 49, 42, 0.14);
}

.contact-us-info-icon{
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    background: var(--accent-color-3);
    color: #ffffff;
    font-size: 1.2rem;
}

.contact-us-info-card h3{
    margin-bottom: 8px;
    font-size: 1.32rem;
    color: var(--accent-color-3);
}

.contact-us-info-card p{
    color: #5a695f;
    margin-bottom: 10px;
    line-height: 1.6;
}

.contact-us-info-card a{
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: none;
}

.contact-us-info-card a:hover{
    color: var(--accent-color-3);
}

.contact-us-visit-section{
    padding: 0 1rem 92px;
}

.contact-us-visit-grid{
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
    gap: 24px;
}

.contact-us-office-card,
.contact-us-form-card,
.contact-us-map-card{
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid rgba(100, 115, 79, 0.2);
    box-shadow: 0 14px 28px rgba(26, 49, 42, 0.08);
}

.contact-us-office-card{
    padding: 36px 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(234, 240, 234, 0.9) 100%);
}

.contact-us-office-card h2{
    margin-bottom: 12px;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: var(--accent-color-3);
}

.contact-us-office-card > p{
    color: #55645b;
    line-height: 1.75;
    margin-bottom: 20px;
}

.contact-us-office-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-us-office-list li{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #31473d;
    line-height: 1.6;
}

.contact-us-office-list i{
    color: var(--accent-color);
    margin-top: 5px;
}

.contact-us-office-cta{
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-us-form-map-wrap{
    display: grid;
    grid-template-rows: auto 320px;
    gap: 22px;
}

.contact-us-form-card{
    padding: 30px 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 244, 0.94) 100%);
}

.contact-us-form-card h3{
    margin-bottom: 8px;
    font-size: 1.65rem;
    color: var(--accent-color-3);
}

.contact-us-form-card > p{
    color: #55645b;
    line-height: 1.65;
    margin-bottom: 18px;
}

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

.contact-us-form-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.contact-us-form input,
.contact-us-form textarea{
    width: 100%;
    border: 1px solid rgba(100, 115, 79, 0.28);
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--primary);
    padding: 13px 14px;
    border-radius: 0;
    font-size: 0.96rem;
    line-height: 1.45;
    box-sizing: border-box;
}

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

.contact-us-form input:focus,
.contact-us-form textarea:focus{
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(100, 115, 79, 0.12);
}

.contact-us-form button{
    width: 100%;
}

.contact-us-map-card{
    overflow: hidden;
    border-color: rgba(100, 115, 79, 0.24);
}

.contact-us-map-card iframe{
    width: 100%;
    height: 100%;
    border: 0;
}

.contact-us-map-card--wide{
    min-height: 460px;
}

.contact-us-map-card--wide iframe{
    min-height: 460px;
}

.contact-intake-form-section{
    padding-top: 2rem;
}

.contact-intake-form-head{
    display: grid;
    gap: 14px;
    width: min(100%, 860px);
    margin: 0 auto 34px;
}

.contact-intake-form-shell{
    display: grid;
    grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.25fr);
    background: linear-gradient(160deg, rgba(249, 246, 237, 0.98) 0%, rgba(244, 248, 243, 0.98) 100%);
    border: 1px solid rgba(206, 196, 172, 0.48);
    overflow: hidden;
}

.contact-intake-form-shell__info,
.contact-intake-form-shell__form-wrap{
    padding: 36px;
}

.contact-intake-form-shell__info{
    background: linear-gradient(160deg, #17362f 0%, #0f2924 100%);
    color: rgba(243, 247, 242, 0.92);
}

.contact-intake-form-shell__eyebrow{
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    color: rgba(222, 234, 223, 0.76);
}

.contact-intake-form-shell__title{
    margin: 0;
    color: #f3f6f0;
    font-size: clamp(2rem, 3vw, 3.2rem);
    line-height: 1.08;
}

.contact-intake-form-shell__intro{
    margin: 18px 0 0;
    line-height: 1.7;
}

.contact-intake-form-shell__contact-list{
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.contact-intake-form-shell__contact-list li{
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.contact-intake-form-shell__contact-list svg{
    width: 18px;
    height: 18px;
    fill: #d0b178;
    flex: 0 0 18px;
    margin-top: 2px;
}

.contact-intake-form-shell__contact-list a,
.contact-intake-form-shell__contact-list span{
    color: rgba(243, 247, 242, 0.92);
    line-height: 1.55;
}

.contact-intake-form-shell__social{
    margin-top: 22px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.contact-intake-form-shell__social a{
    width: 36px;
    height: 36px;
    border: 1px solid rgba(224, 228, 216, 0.34);
    color: #edf2ec;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.contact-intake-form-shell__social a:hover{
    background: #d0b178;
    border-color: #d0b178;
    color: #1d1710;
}

.contact-intake-form-shell__form-wrap{
    background: rgba(252, 250, 244, 0.98);
}

.contact-intake-wizard,
.contact-intake-form,
.contact-intake-step{
    display: grid;
    gap: 14px;
}

.contact-intake-step{
    display: none;
}

.contact-intake-step.is-active{
    display: grid;
}

.contact-intake-meta{
    margin-bottom: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e1d9ca;
}

.contact-intake-meta__step{
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #6d705f;
    font-weight: 700;
}

.contact-intake-meta__title{
    margin: 8px 0 0;
    font-size: clamp(1.9rem, 2.7vw, 2.7rem);
    line-height: 1.06;
    color: #292117;
}

.contact-intake-grid{
    display: grid;
    gap: 12px;
}

.contact-intake-grid--2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-intake-grid--3{
    grid-template-columns: 1fr 1fr 0.8fr;
}

.contact-intake-form label{
    display: grid;
    gap: 6px;
}

.contact-intake-form label span{
    font-size: 13px;
    font-weight: 700;
    color: #3d372c;
}

.contact-intake-form input,
.contact-intake-form textarea,
.contact-intake-form select{
    width: 100%;
    border: 1px solid #d8cfbf;
    background: #fffdf8;
    color: #2c271f;
    font-size: 14px;
    padding: 11px 12px;
}

.contact-intake-form input:focus,
.contact-intake-form textarea:focus,
.contact-intake-form select:focus{
    outline: none;
    border-color: #aa8641;
    box-shadow: 0 0 0 2px rgba(170, 134, 65, 0.15);
}

.contact-intake-form textarea{
    min-height: 94px;
    resize: vertical;
}

.contact-intake-question-list,
.contact-intake-conditions{
    display: grid;
    gap: 10px;
}

.contact-intake-question,
.contact-intake-card,
.contact-intake-condition-item{
    border: 1px solid #e3ddd1;
    background: #f6f3eb;
}

.contact-intake-question,
.contact-intake-card{
    padding: 14px 12px;
}

.contact-intake-question{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.contact-intake-question p,
.contact-intake-card p,
.contact-intake-condition-label{
    margin: 0;
    color: #2e281f;
    font-size: 17px;
    font-weight: 600;
}

.contact-intake-choice{
    display: inline-flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
}

.contact-intake-choice label,
.contact-intake-condition-item{
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #3b362d;
}

.contact-intake-choice input[type="radio"],
.contact-intake-condition-item input[type="checkbox"]{
    accent-color: #c59c4c;
    width: 16px;
    height: 16px;
}

.contact-intake-conditions{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
}

.contact-intake-condition-item{
    padding: 10px;
}

.contact-intake-body-intro,
.contact-intake-body-chart__count,
.contact-intake-body-chart__empty,
.contact-intake-body-chart__caption{
    color: #6a6255;
}

.contact-intake-body-chart{
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.contact-intake-body-chart__switch{
    display: inline-flex;
    gap: 8px;
    margin-bottom: 10px;
}

.contact-intake-body-chart__view-btn,
.contact-intake-btn{
    border: 0;
    cursor: pointer;
    transition: 0.2s ease;
}

.contact-intake-body-chart__view-btn{
    border: 1px solid #d1b685;
    background: #fff;
    color: #413327;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 13px;
}

.contact-intake-body-chart__view-btn.is-active{
    background: linear-gradient(180deg, #e3bc72 0%, #d7a856 100%);
    border-color: #d7a856;
    color: #2d2319;
}

.contact-intake-body-map-wrap,
.contact-intake-body-chart__selected-box,
.contact-intake-consent-policy{
    border: 1px solid #e2dacc;
    background: #f7f4ee;
}

.contact-intake-body-map-wrap{
    min-height: 420px;
    position: relative;
    overflow: hidden;
}

.contact-intake-body-map{
    position: absolute;
    inset: 0;
    display: none;
    padding: 8px;
}

.contact-intake-body-map.is-active{
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-intake-body-svg{
    width: 100%;
    max-width: 260px;
    max-height: 390px;
}

.contact-intake-body-outline{
    fill: rgba(248, 246, 243, 0.98);
    stroke: #dacdbf;
    stroke-width: 1.4;
}

.contact-intake-body-part{
    fill: rgba(243, 240, 235, 0.92);
    stroke: #cab9a6;
    stroke-width: 1.5;
    cursor: pointer;
}

.contact-intake-body-part:hover{
    fill: #ecd8c2;
}

.contact-intake-body-part.is-selected{
    fill: #c94337;
    stroke: #8c1f16;
}

.contact-intake-body-chart__right h4,
.contact-intake-consent-card h4{
    margin: 0 0 10px;
    color: #2f2418;
    font-size: 1.75rem;
}

.contact-intake-body-chart__selected-box,
.contact-intake-consent-policy{
    padding: 14px;
}

.contact-intake-body-chart__areas{
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
}

.contact-intake-consent-card{
    border-top: 1px solid #e3dacc;
    padding-top: 14px;
    display: grid;
    gap: 14px;
}

.contact-intake-consent-policy{
    max-height: 230px;
    overflow-y: auto;
}

.contact-intake-consent-policy p{
    margin: 0 0 12px;
    line-height: 1.6;
    color: #69513b;
}

.contact-intake-consent-ack{
    display: inline-flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #34281d;
}

.contact-intake-consent-ack input[type="checkbox"]{
    margin-top: 3px;
    accent-color: #c59c4c;
}

.contact-intake-consent-signature{
    border-top: 1px solid #e3dacc;
    padding-top: 14px;
    display: grid;
    gap: 10px;
}

.contact-intake-consent-signature p{
    margin: 0;
    font-size: 1.8rem;
    color: #312419;
}

.contact-intake-signature-wrap{
    position: relative;
}

#contactIntakeSignaturePad{
    width: 100%;
    height: 120px;
    border: 1px dashed #d7b06e;
    background: #ffffff;
    touch-action: none;
}

.contact-intake-signature-prompt{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b6642;
    font-weight: 600;
    pointer-events: none;
}

.contact-intake-consent-date{
    max-width: 380px;
}

.contact-intake-actions{
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.contact-intake-actions--split{
    justify-content: space-between;
}

.contact-intake-btn{
    min-height: 46px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.contact-intake-btn--ghost{
    border: 1px solid #cbc0aa;
    background: #efe9dd;
    color: #3c3328;
}

.contact-intake-btn--primary{
    background: linear-gradient(100deg, #ad8536 0%, #8b6a27 100%);
    color: #fffdf9;
}

.contact-intake-btn--primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(139, 106, 39, 0.22);
}

@media (max-width: 991px){
    .contact-us-hero{
        padding: 128px 1rem 54px;
    }

    .contact-us-info-grid{
        grid-template-columns: 1fr;
    }

    .contact-us-visit-grid{
        grid-template-columns: 1fr;
    }

    .contact-us-form-map-wrap{
        grid-template-rows: auto 280px;
    }

    .contact-intake-form-shell{
        grid-template-columns: 1fr;
    }

    .contact-intake-form-shell__info,
    .contact-intake-form-shell__form-wrap{
        padding: 30px;
    }

    .contact-intake-grid--3,
    .contact-intake-conditions{
        grid-template-columns: 1fr 1fr;
    }

    .contact-intake-body-chart{
        grid-template-columns: 1fr;
    }

    .contact-intake-question{
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 575px){
    .contact-us-hero,
    .contact-us-visit-section{
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .contact-us-hero{
        padding-top: 110px;
        padding-bottom: 46px;
    }

    .contact-us-info-card,
    .contact-us-office-card,
    .contact-us-form-card{
        padding: 22px 16px;
    }

    .contact-us-form-grid{
        grid-template-columns: 1fr;
    }

    .contact-us-office-cta .btn{
        width: 100%;
    }

    .contact-us-map-card--wide,
    .contact-us-map-card--wide iframe{
        min-height: 320px;
    }

    .contact-intake-form-section{
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .contact-intake-form-shell__info,
    .contact-intake-form-shell__form-wrap{
        padding: 22px 16px;
    }

    .contact-intake-grid--2,
    .contact-intake-grid--3,
    .contact-intake-conditions{
        grid-template-columns: 1fr;
    }

    .contact-intake-choice,
    .contact-intake-actions,
    .contact-intake-actions--split,
    .contact-intake-body-chart__switch{
        flex-direction: column;
        align-items: stretch;
    }

    .contact-intake-body-map-wrap{
        min-height: 360px;
    }

    .contact-intake-btn,
    .contact-intake-body-chart__view-btn{
        width: 100%;
    }
}

/* Treatment Package Details Page */
.package-detail-page{
    background:
        radial-gradient(circle at top left, rgba(100, 115, 79, 0.14), transparent 24%),
        linear-gradient(180deg, #f7f5ef 0%, #edf2e8 100%);
}

.package-detail-main{
    color: var(--primary);
}

.package-detail-hero{
    position: relative;
    padding: 230px 1rem 110px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    z-index: 1;
}

.package-detail-hero::before{
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(12, 19, 15, 0.78) 0%, rgba(12, 19, 15, 0.55) 38%, rgba(12, 19, 15, 0.22) 100%),
        linear-gradient(180deg, rgba(12, 19, 15, 0.22) 0%, rgba(12, 19, 15, 0.62) 100%);
    z-index: -1;
}

.package-detail-hero-wrap{
    display: block;
    position: relative;
    align-items: center;
}

.package-detail-hero-copy{
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: min(980px, 72vw);
}

.package-detail-hero-copy .sub-heading{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.86);
}

.package-detail-hero-copy h1{
    margin: 0;
    font-size: clamp(2.3rem, 4.6vw, 4.8rem);
    line-height: 1.1;
    color: #ffffff;
    max-width: 18ch;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
}

.package-detail-subtitle{
    margin: 0;
    max-width: 700px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.08rem;
    line-height: 1.8;
}

.package-detail-stats{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 980px;
}

.package-detail-stat{
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 18px 20px;
    box-shadow: 0 14px 28px rgba(5, 9, 7, 0.14);
    backdrop-filter: blur(7px);
}

.package-detail-stat span,
.package-sidebar-label,
.package-section-label,
.package-related-copy span{
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.76rem;
    color: var(--accent-color);
    margin-bottom: 8px;
}

.package-detail-stat strong,
.package-sidebar-meta strong{
    color: #ffffff;
    font-family: var(--font-family-heading);
    font-size: 1.1rem;
    line-height: 1.4;
    font-weight: 400;
}

.package-detail-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.package-detail-price-badge{
    display: inline-block;
    width: fit-content;
    min-width: min(100%, 320px);
    background: rgba(26, 49, 42, 0.9);
    color: #ffffff;
    padding: 20px 22px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

.package-detail-price-badge span{
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
}

.package-detail-price-badge strong{
    display: block;
    font-family: var(--font-family-heading);
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 400;
    margin: 6px 0;
}

.package-detail-price-badge p{
    margin: 0;
    color: rgba(255,255,255,0.82);
    line-height: 1.6;
}

.package-detail-content-section{
    margin-top: 40px;
    padding: 0 1rem 90px;
}

.package-detail-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
}

.package-detail-content,
.package-detail-sidebar{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.package-detail-panel,
.package-sidebar-card,
.package-related-card{
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(100, 115, 79, 0.18);
    box-shadow: 0 16px 30px rgba(26, 49, 42, 0.07);
}

.package-detail-panel{
    padding: 32px;
}

.package-summary-table-wrap{
    margin-bottom: 28px;
    overflow: hidden;
    border: 1px solid rgba(100, 115, 79, 0.18);
}

.package-summary-table{
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.package-summary-table th,
.package-summary-table td{
    padding: 16px 18px;
    border-bottom: 1px solid rgba(100, 115, 79, 0.16);
    vertical-align: top;
    text-align: left;
}

.package-summary-table tr:last-child th,
.package-summary-table tr:last-child td{
    border-bottom: none;
}

.package-summary-table th{
    width: 28%;
    background: #eef2e3;
    color: var(--accent-color-3);
    font-family: var(--font-family-text);
    font-size: 1.02rem;
    line-height: 1.45;
    font-weight: 700;
}

.package-summary-table td{
    color: #42574d;
    font-size: 1.02rem;
    line-height: 1.65;
}

.package-section-heading{
    margin-bottom: 18px;
}

.package-section-heading h2{
    margin: 0;
    color: var(--accent-color-3);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.15;
    max-width: 18ch;
}

.package-detail-panel p{
    margin: 0 0 14px;
    color: #55645b;
    line-height: 1.8;
}

.package-detail-panel p:last-child{
    margin-bottom: 0;
}

.package-highlight-panel{
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(240, 245, 238, 0.94) 100%);
}

.package-highlight-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.package-highlight-item{
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(100, 115, 79, 0.14);
}

.package-highlight-item i,
.package-therapy-list i{
    color: var(--accent-color);
    margin-top: 4px;
}

.package-highlight-item span{
    color: #31473d;
    line-height: 1.65;
}

.package-itinerary-list{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.package-itinerary-accordion-item{
    border: 1px solid rgba(100, 115, 79, 0.24);
    background: #ffffff;
}

.package-itinerary-accordion-item > summary{
    list-style: none;
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 40px;
    gap: 16px;
    align-items: center;
    padding: 18px 18px;
    cursor: pointer;
    background: #f2f0e8;
    border-bottom: 1px solid rgba(100, 115, 79, 0.18);
}

.package-itinerary-accordion-item > summary::-webkit-details-marker{
    display: none;
}

.package-itinerary-day{
    font-family: var(--font-family-text);
    color: var(--accent-color-3);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.package-itinerary-accordion-item > summary h3{
    margin: 0;
    color: var(--accent-color);
    font-size: 1.45rem;
    line-height: 1.25;
}

.package-itinerary-toggle{
    width: 40px;
    height: 40px;
    border: 1px solid rgba(100, 115, 79, 0.28);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f6f5ee;
}

.package-itinerary-toggle::before,
.package-itinerary-toggle::after{
    content: '';
    position: absolute;
    background: var(--accent-color);
}

.package-itinerary-toggle::before{
    width: 12px;
    height: 2px;
}

.package-itinerary-toggle::after{
    width: 2px;
    height: 12px;
}

.package-itinerary-accordion-item[open] .package-itinerary-toggle::after{
    display: none;
}

.package-itinerary-body{
    padding: 18px 22px 22px;
}

.package-itinerary-body ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.package-itinerary-body li{
    position: relative;
    padding-left: 22px;
    color: #455a50;
    line-height: 1.65;
}

.package-itinerary-body li::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(100, 115, 79, 0.18);
}

.package-detail-split{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.package-important-grid{
    display: grid;
    grid-template-columns: 1fr;
}

.package-important-panel{
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(245, 247, 239, 0.95) 100%);
}

.package-day-options-panel .package-section-heading{
    margin-bottom: 22px;
}

.package-day-options-list{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.package-day-option-item{
    border: 1px solid rgba(100, 115, 79, 0.22);
    background: #ffffff;
}

.package-day-option-item > summary{
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: #f2f0e8;
    cursor: pointer;
}

.package-day-option-item > summary::-webkit-details-marker{
    display: none;
}

.package-day-option-item > summary > span:first-child{
    font-family: var(--font-family-text);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--accent-color-3);
}

.package-day-option-toggle{
    width: 30px;
    height: 30px;
    border: 1px solid rgba(100, 115, 79, 0.35);
    position: relative;
    background: #f7f6ef;
    flex-shrink: 0;
}

.package-day-option-toggle::before,
.package-day-option-toggle::after{
    content: '';
    position: absolute;
    background: var(--accent-color);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.package-day-option-toggle::before{
    width: 10px;
    height: 2px;
}

.package-day-option-toggle::after{
    width: 2px;
    height: 10px;
}

.package-day-option-item[open] .package-day-option-toggle::after{
    display: none;
}

.package-day-option-body{
    padding: 16px 18px 18px;
    border-top: 1px solid rgba(100, 115, 79, 0.16);
}

.package-day-option-body ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.package-day-option-body li{
    position: relative;
    padding-left: 18px;
    color: #4c5d54;
    line-height: 1.65;
}

.package-day-option-body li::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0.66em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-color);
}

.package-detail-list,
.package-therapy-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.package-detail-list li,
.package-therapy-list li{
    position: relative;
    padding-left: 22px;
    color: #31473d;
    line-height: 1.7;
}

.package-detail-list li::before{
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-color);
    font-weight: 700;
}

.package-detail-list-muted li::before{
    color: rgba(100, 115, 79, 0.7);
}

.package-important-notes{
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.package-important-notes h3{
    margin: 0 0 10px;
    color: #7b2f26;
    font-size: 1.35rem;
    line-height: 1.25;
}

.package-important-notes ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.package-important-notes li{
    position: relative;
    padding-left: 18px;
    color: #4c5d54;
    line-height: 1.65;
}

.package-important-notes li::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8a3f35;
}

.package-outcome-panel{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: center;
}

.package-outcome-image img,
.package-related-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.package-outcome-image{
    min-height: 100%;
}

.package-sidebar-card{
    padding: 28px 24px;
}

.package-detail-sidebar{
    position: sticky;
    top: 118px;
    align-self: start;
}

.package-sidebar-card h3{
    margin: 0 0 10px;
    color: var(--accent-color-3);
    font-size: 1.8rem;
    line-height: 1.2;
}

.package-sidebar-price{
    font-family: var(--font-family-heading);
    color: var(--accent-color);
    font-size: 2rem;
    line-height: 1.15;
    margin-bottom: 10px;
}

.package-sidebar-card p{
    margin: 0 0 18px;
    color: #55645b;
    line-height: 1.7;
}

.package-sidebar-meta{
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
}

.package-sidebar-meta div{
    padding: 14px 16px;
    background: #f3f6f0;
    border: 1px solid rgba(100, 115, 79, 0.12);
}

.package-sidebar-meta span{
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-color);
    margin-bottom: 7px;
}

.package-sidebar-card .btn{
    width: 100%;
    text-align: center;
}

.package-sidebar-card .btn + .btn{
    margin-top: 10px;
}

.package-quick-summary-card{
    background: linear-gradient(180deg, #2d4538 0%, #243a30 100%);
    border-color: rgba(214, 209, 204, 0.22);
}

.package-quick-summary-card .package-sidebar-label{
    color: rgba(234, 240, 234, 0.82);
}

.package-quick-summary-card h3{
    color: #ffffff;
}

.package-quick-summary-card .package-sidebar-price{
    color: #d7e0c7;
}

.package-quick-summary-card p{
    color: rgba(255, 255, 255, 0.86);
}

.package-quick-summary-card .package-sidebar-meta div{
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.package-quick-summary-card .package-sidebar-meta span{
    color: rgba(234, 240, 234, 0.78);
}

.package-quick-summary-card .package-sidebar-meta strong{
    color: #ffffff;
}

.package-quick-summary-card .btn.btn-accent{
    background-color: #ffffff;
    color: var(--accent-color-3);
}

.package-quick-summary-card .btn.btn-accent:hover{
    background-color: #eef2e3;
    color: var(--accent-color-3);
}

.package-quick-summary-card .btn.btn-accent-hover-outline{
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.65);
    color: #ffffff;
}

.package-quick-summary-card .btn.btn-accent-hover-outline:hover{
    background-color: #ffffff;
    color: var(--accent-color-3);
    border-color: #ffffff;
}

.package-therapy-list li{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-left: 0;
}

.package-contact-card h4{
    margin: 0 0 10px;
    color: var(--accent-color-3);
    font-size: 1.6rem;
    line-height: 1.25;
}

.package-contact-card > p{
    margin-bottom: 16px;
}

.package-contact-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.package-contact-list li{
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: flex-start;
    gap: 12px;
}

.package-contact-list i{
    color: var(--accent-color);
    font-size: 1.1rem;
    margin-top: 5px;
}

.package-contact-list a,
.package-contact-list span{
    color: #2f463b;
    font-size: 1.2rem;
    line-height: 1.5;
    text-decoration: none;
    font-weight: 500;
}

.package-contact-list a:hover{
    color: var(--accent-color-3);
}

.package-related-section{
    padding: 0 1rem 100px;
}

.package-related-head{
    text-align: center;
    max-width: 760px;
    margin: 0 auto 28px;
}

.package-related-head .sub-heading{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-color);
}

.package-related-head h2{
    margin: 12px 0 0;
    color: var(--accent-color-3);
}

.package-related-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.package-related-card{
    overflow: hidden;
}

.package-related-image{
    height: 260px;
}

.package-related-copy{
    padding: 24px;
}

.package-related-copy h3{
    margin-bottom: 10px;
    color: var(--accent-color-3);
    font-size: 1.7rem;
    line-height: 1.2;
}

.package-related-copy p{
    margin-bottom: 16px;
    color: #55645b;
    line-height: 1.7;
}

.package-related-copy a{
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
}

.package-related-copy a:hover{
    color: var(--accent-color-3);
}

@media (max-width: 1199.98px){
    .package-detail-layout{
        grid-template-columns: minmax(0, 1fr) 310px;
    }

    .package-outcome-panel{
        grid-template-columns: 1fr;
    }

    .package-outcome-image{
        min-height: 320px;
    }
}

@media (max-width: 991.98px){
    .package-detail-hero{
        padding: 190px 1rem 72px;
    }

    .package-detail-content-section{
        margin-top: 28px;
    }

    .package-detail-layout,
    .package-detail-split,
    .package-related-grid{
        grid-template-columns: 1fr;
    }

    .package-detail-sidebar{
        position: static;
        top: auto;
    }

    .package-detail-stats,
    .package-highlight-grid{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px){
    .package-detail-hero,
    .package-detail-content-section,
    .package-related-section{
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .package-detail-content-section{
        margin-top: 20px;
    }

    .package-detail-hero-copy h1{
        max-width: none;
    }

    .package-detail-subtitle{
        font-size: 1rem;
    }

    .package-detail-panel,
    .package-sidebar-card,
    .package-related-copy{
        padding: 22px 18px;
    }

    .package-day-option-item > summary > span:first-child{
        font-size: 1.1rem;
    }

    .package-contact-card h4{
        font-size: 1.35rem;
    }

    .package-contact-list a,
    .package-contact-list span{
        font-size: 1.02rem;
    }

    .package-summary-table,
    .package-summary-table tbody,
    .package-summary-table tr,
    .package-summary-table th,
    .package-summary-table td{
        display: block;
        width: 100%;
    }

    .package-summary-table th,
    .package-summary-table td{
        padding: 14px 14px;
    }

    .package-summary-table th{
        border-bottom: none;
    }

    .package-summary-table td{
        padding-top: 0;
    }

    .package-itinerary-accordion-item > summary{
        grid-template-columns: 1fr auto;
        gap: 12px;
    }

    .package-itinerary-day{
        grid-column: 1;
        font-size: 1rem;
    }

    .package-itinerary-accordion-item > summary h3{
        grid-column: 1;
        font-size: 1.2rem;
    }

    .package-itinerary-toggle{
        grid-row: 1 / span 2;
        grid-column: 2;
    }

    .package-detail-price-badge{
        padding: 16px 18px;
        min-width: 100%;
    }

    .package-related-image{
        height: 220px;
    }
}

/* Treatment Packages List Page */
.package-list-page{
    background:
        radial-gradient(circle at top right, rgba(100, 115, 79, 0.14), transparent 28%),
        linear-gradient(180deg, #f7f5ef 0%, #edf2e8 100%);
}

.treatment-packages-main{
    color: var(--primary);
}

.package-list-hero{
    position: relative;
    padding: 235px 1rem 110px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

.package-list-hero::before{
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(12, 19, 15, 0.82) 0%, rgba(12, 19, 15, 0.56) 40%, rgba(12, 19, 15, 0.24) 100%),
        linear-gradient(180deg, rgba(12, 19, 15, 0.18) 0%, rgba(12, 19, 15, 0.56) 100%);
    z-index: -1;
}

.package-list-hero-inner{
    max-width: 700px;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

.package-list-hero-inner h1{
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(2.8rem, 5.2vw, 5.2rem);
    line-height: 1.02;
    max-width: 9ch;
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.package-list-hero-inner p{
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.06rem;
    line-height: 1.7;
    max-width: 680px;
}

.package-list-content-section{
    margin-top: 30px;
    padding: 0 1rem 100px;
}

.package-list-toolbar{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.package-category-link{
    text-decoration: none;
    color: var(--accent-color-3);
    border: 1px solid rgba(100, 115, 79, 0.28);
    background: rgba(255, 255, 255, 0.86);
    padding: 10px 16px;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.package-category-link:hover,
.package-category-link.active{
    background: var(--accent-color-3);
    color: #ffffff;
    border-color: var(--accent-color-3);
}

.package-list-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.package-list-card{
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(100, 115, 79, 0.18);
    box-shadow: 0 16px 30px rgba(26, 49, 42, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.package-list-card-image{
    position: relative;
    height: 360px;
}

.package-list-card-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.package-list-duration-badge{
    position: absolute;
    left: 14px;
    bottom: 14px;
    background: rgba(26, 49, 42, 0.9);
    color: #ffffff;
    padding: 8px 12px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.package-list-card-body{
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.package-list-card-body h2{
    margin-bottom: 10px;
    color: var(--accent-color-3);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1.15;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.45em;
}

.package-list-card-body p{
    margin: 0 0 14px;
    color: #55645b;
    line-height: 1.7;
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 6.8em;
}

.package-list-meta{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    margin-top: auto;
}

.package-list-meta span{
    color: #31473d;
    line-height: 1.6;
}

.package-list-meta span i{
    color: var(--accent-color);
    margin-right: 8px;
}

.package-list-meta strong{
    font-family: var(--font-family-heading);
    color: var(--accent-color);
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1.2;
}

.package-list-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.package-empty-state{
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(100, 115, 79, 0.2);
    text-align: center;
    padding: 32px 24px;
}

.package-empty-state h2{
    color: var(--accent-color-3);
    margin-bottom: 8px;
}

.package-empty-state p{
    margin: 0;
    color: #55645b;
}

@media (max-width: 991.98px){
    .package-list-hero{
        padding: 200px 1rem 82px;
    }

    .package-list-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .package-list-content-section{
        margin-top: 22px;
    }
}

@media (max-width: 575px){
    .package-list-hero,
    .package-list-content-section{
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .package-list-hero{
        padding-top: 170px;
        padding-bottom: 64px;
    }

    .package-list-hero-inner h1{
        max-width: none;
        font-size: 2.85rem;
    }

    .package-list-grid{
        grid-template-columns: 1fr;
    }

    .package-list-card-image{
        height: 280px;
    }

    .package-list-card-body{
        padding: 18px 16px 20px;
    }

    .package-list-actions .btn{
        width: 100%;
        text-align: center;
    }
}

/*==================================================
  26.0 Blog Style
==================================================*/

.blog-layout{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.blog-content{
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
}

.blog-meta{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px 5px;
    color: var(--accent-color);
}

.blog-meta p{
    color: var(--accent-color);
    margin: 0px;
}

.blog-meta.recent-post-meta,
.blog-meta.recent-post-meta p{
    font-family: var(--font-family-heading);
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--accent-color-2);
}

.blog-link{
    color: var(--primary);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.2em;
    transition: all 0.3s ease
}

.blog-link:hover{
    color: var(--accent-color);
}


.blog-link.recent-post-link{
    font-size: 1rem;
    color: var(--accent-color-2);
}

/* Equal-size blog cards used on home page */
.blog-cards-equal > .col{
    display: flex;
}

.blog-cards-equal .blog-layout{
    width: 100%;
    height: 100%;
}

.blog-cards-equal .blog-image img{
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.blog-cards-equal .blog-content{
    flex: 1;
}

.blog-cards-equal .blog-link{
    display: block;
    min-height: 2.4em;
}

.blog-cards-equal .blog-content > p{
    min-height: 3.2em;
}

@media screen and (max-width: 991.98px){
    .blog-cards-equal .blog-image img{
        height: 300px;
    }
}

@media screen and (max-width: 767.98px){
    .blog-cards-equal .blog-image img{
        height: 260px;
    }
    .blog-cards-equal .blog-link,
    .blog-cards-equal .blog-content > p{
        min-height: 0;
    }
}

.single-post-container{
    display: flex;
    flex-direction: row;
    gap: 45px 45px;
}

.single-post-content{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.single-post-sidebar{
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

/*==================================================
  27.0 Animation Style
==================================================*/

.animation-box {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: opacity, transform;
}

.anim-fast {
    --anim-duration: var(--anim-duration-fast);
}

.anim-normal {
    --anim-duration: var(--anim-duration-normal);
}

.anim-slow {
    --anim-duration: var(--anim-duration-slow);
}

.anim-delay-none {
    --anim-delay: var(--anim-delay-none);
}

.anim-delay-sm {
    --anim-delay: var(--anim-delay-sm);
}

.anim-delay-md {
    --anim-delay: var(--anim-delay-md);
}

/*==================================================
  28.0 Custom Spacing
==================================================*/

.flex-gap-0 { 
    gap: 0px 0px; 
}
.flex-gap-1 { 
    gap: 10px 10px; 
}
.flex-gap-2 { 
    gap: 20px 20px; 
}
.flex-gap-3 { 
    gap: 30px 30px; 
}
.flex-gap-4 { 
    gap: 40px 40px; 
}
.flex-gap-5 { 
    gap: 50px 50px; 
}
.flex-gap-100{
    gap: 100px 100px;
}
.flex-gap-x-0 { 
    column-gap: 0px; 
}
.flex-gap-x-1 { 
    column-gap: 10px; 
}
.flex-gap-x-2 { 
    column-gap: 20px; 
}
.flex-gap-x-3 { 
    column-gap: 30px; 
}
.flex-gap-x-4 { 
    column-gap: 40px; 
}
.flex-gap-x-5 { 
    column-gap: 50px; 
}
.flex-gap-x-100{
    column-gap: 100px;
}

.flex-gap-y-0 { 
    row-gap: 0px; 
}
.flex-gap-y-1 { 
    row-gap: 10px; 
}
.flex-gap-y-2 { 
    row-gap: 20px; 
}
.flex-gap-y-3 { 
    row-gap: 30px; 
}
.flex-gap-y-4 { 
    row-gap: 40px; 
}
.flex-gap-y-5 { 
    row-gap: 50px; 
}
.flex-gap-y-100{
    row-gap: 100%;
}


/* Grid spacing (row-gap & column-gap) */

.grid-gap-0{
    --bs-gutter-x: 0px;
    --bs-gutter-y: 0px;
}

.grid-gap-1{
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

.grid-gap-2{
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.grid-gap-3{
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
}

.grid-gap-4{
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;
}

.grid-gap-5{
    --bs-gutter-x: 50px;
    --bs-gutter-y: 50px;
}

.grid-gap-100{
    --bs-gutter-x: 100px;
    --bs-gutter-y: 100px;
}

/* Grid spacing (column-gap) */

.grid-gap-x-0 {
    --bs-gutter-x: 0px;
}
.grid-gap-x-1 {
    --bs-gutter-x: 10px;
}
.grid-gap-x-2 {
    --bs-gutter-x: 20px;
}
.grid-gap-x-3 {
    --bs-gutter-x: 30px;
}
.grid-gap-x-4 {
    --bs-gutter-x: 40px;
}
.grid-gap-x-5 {
    --bs-gutter-x: 50px;
}
.grid-gap-x-100{
    --bs-gutter-x: 100px
}

/* Grid spacing (row-gap) */

.grid-gap-y-0 {
    --bs-gutter-y: 0px;
}
.grid-gap-y-1 {
    --bs-gutter-y: 10px;
}
.grid-gap-y-2 {
    --bs-gutter-y: 20px;
}
.grid-gap-y-3 {
    --bs-gutter-y: 30px;
}
.grid-gap-y-4 {
    --bs-gutter-y: 40px;
}
.grid-gap-y-5 {
    --bs-gutter-y: 50px;
}
.grid-gap-y-100{
    --bg-gutter-y: 100px
}

@media (max-width: 767.98px){
    .floating-translate{
        top: 22%;
    }

    .floating-translate select{
        padding: 8px 28px 8px 10px;
        font-size: 0.92rem;
    }

    .floating-social-rail{
        top: 44%;
    }

    .floating-social-link.is-top{
        bottom: 12px;
    }

    .floating-social-link{
        width: 44px;
        height: 44px;
        font-size: 1.35rem;
    }
}