/*
Theme Name: North Tarrant Surgical Theme
Theme URI: https://northtarrantsurgical.com
Author: North Tarrant Surgical & Aesthetics
Description: Custom theme for North Tarrant Surgical & Aesthetics - Minimally invasive surgery and aesthetic treatments in Fort Worth, TX.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nts-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, medical, healthcare
*/

/* Tailwind handles utility classes via CDN. Add custom overrides below. */
.site-main {
    height: 100vh;
}

/* Header scroll state */
.header--scrolled {
    background-color: rgba(23, 23, 23, 0.95) !important;
    background-color: #ffffff !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ---- Default: transparent over hero ---- */
#site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: background-color 0.3s, box-shadow 0.3s;
    background: transparent;
    backdrop-filter: blur(4px);
}

#site-header .nav-link,
#site-header .phone-text,
#site-header .menu-toggle-btn {
    color: #fff;
    transition: color 0.3s;
}

#site-header .phone-link {
    border-color: rgba(255, 255, 255, 0.3);
}

#site-header .menu-toggle-btn {
    border-color: rgba(255, 255, 255, 0.3);
}

#site-header .dropdown-arrow {
    color: #fff;
}

/* ---- Scrolled: solid white ---- */
#site-header.header--scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
}

#site-header.header--scrolled svg {
    stroke: #171717 !important;
    /* neutral-900 */
}

#site-header.header--scrolled a,
#site-header.header--scrolled,
#site-header.header--scrolled .nav-link,
#site-header.header--scrolled .phone-link svg,
#site-header.header--scrolled .phone-link span,
#site-header.header--scrolled .menu-toggle-btn {
    color: #171717 !important;
    /* neutral-900 */
}

#site-header.header--scrolled .mobile-sub-toggle {
    color: #171717 !important;
    /* neutral-900 */
}

#site-header.header--scrolled .phone-link {
    border-color: #d4d4d4 !important;
    /* neutral-300 */
}

#site-header.header--scrolled .menu-toggle-btn {
    color: #171717 !important;
    border-color: #d4d4d4 !important;
}

#site-header.header--scrolled .dropdown-arrow {
    color: #171717 !important;
}


@media (max-width: 1280px) {

    /* #site-header svg {
        stroke: #171717 !important;
       
    } */

    #mobile-menu {
        background-color: #fff !important;
    }

    #site-header a,
    /* #site-header, */
    #site-header .nav-link,
    #site-header .phone-link svg,
    #site-header .phone-link span,
    #site-header .menu-toggle-btn {
        color: #171717 !important;
        /* neutral-900 */
    }

    #site-header .mobile-sub-toggle {
        color: #171717 !important;
        /* neutral-900 */
    }

    #site-header .phone-link {
        border-color: #d4d4d4 !important;
        /* neutral-300 */
    }

    #site-header .menu-toggle-btn {
        color: #171717 !important;
        border-color: #d4d4d4 !important;
    }

    #site-header .dropdown-arrow {
        color: #171717 !important;
    }

}

:root {
    /* Primary Brand Colors - Elegant Gold/Tan */
    --primary-50: #fdfcf9;
    --primary-100: #f9f6ed;
    --primary-200: #f3ecd9;
    --primary-300: #e8ddc0;
    --primary-400: #d9c89e;
    --primary-500: #c9b382;
    --primary-600: #b89d6b;
    --primary-700: #9a8258;
    --primary-800: #7d6a4b;
    --primary-900: #665740;
    --primary-950: #382f23;

    /* Neutral Colors - Light Theme */
    --neutral-50: #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;
    --neutral-950: #0a0a0a;

    /* Semantic Colors */
    --success: var(--primary-600);
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;

    /* Background & Text - Light Theme */
    --background: #ffffff;
    --foreground: #1a1a1a;
    --muted: var(--neutral-100);
    --muted-foreground: var(--neutral-600);

    /* Interactive Elements */
    --accent: var(--primary-500);
    --accent-foreground: #1a1a1a;
    --border: var(--neutral-200);
    --input: var(--neutral-100);
    --ring: var(--primary-500);

    /* Medical Trust Colors */
    --trust-blue: #1e40af;
    --trust-navy: #1e293b;
}

@theme inline {
    /* Colors */
    --color-primary-50: var(--primary-50);
    --color-primary-100: var(--primary-100);
    --color-primary-200: var(--primary-200);
    --color-primary-300: var(--primary-300);
    --color-primary-400: var(--primary-400);
    --color-primary-500: var(--primary-500);
    --color-primary-600: var(--primary-600);
    --color-primary-700: var(--primary-700);
    --color-primary-800: var(--primary-800);
    --color-primary-900: var(--primary-900);
    --color-primary-950: var(--primary-950);

    --color-neutral-50: var(--neutral-50);
    --color-neutral-100: var(--neutral-100);
    --color-neutral-200: var(--neutral-200);
    --color-neutral-300: var(--neutral-300);
    --color-neutral-400: var(--neutral-400);
    --color-neutral-500: var(--neutral-500);
    --color-neutral-600: var(--neutral-600);
    --color-neutral-700: var(--neutral-700);
    --color-neutral-800: var(--neutral-800);
    --color-neutral-900: var(--neutral-900);
    --color-neutral-950: var(--neutral-950);

    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-error: var(--error);
    --color-info: var(--info);

    --color-trust-blue: var(--trust-blue);
    --color-trust-navy: var(--trust-navy);

    /* Typography */
    --font-sans: 'Geist', 'Montserrat', system-ui, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, monospace;
    --font-dancing-script: 'Dancing Script', cursive;

    /* Spacing Scale */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Base Styles */
* {
    border-color: var(--border) !important;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--background);
    color: var(--foreground);
    font-family: 'Montserrat', var(--font-sans), system-ui, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', var(--font-sans), system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 5rem) !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
}

h2 {
    font-size: clamp(2rem, 4vw, 3.5rem) !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}

p {
    font-family: 'Montserrat', var(--font-sans), system-ui, sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}

/* Legacy color aliases → mapped to theme primary palette */
.bg-trust-blue { background-color: var(--primary-700) !important; }
.bg-trust-navy { background-color: var(--primary-800) !important; }

/* ==========================================================================
   General Typography Utility Classes  —  Mobile-first responsive
   Apply these to override the base h1-h3/p sizes for consistent look.
   ========================================================================== */

/* --- Page Hero Title (used on main hero banners) --- */
.nts-hero-title {
    font-size: 2rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}

/* --- Section Title (h2 - primary heading of any section) --- */
.nts-section-title {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}

/* --- Section Subtitle / description below a section title --- */
.nts-section-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* --- Card / Item Title (h3 - inside cards, FAQ questions, grid items) --- */
.nts-card-title {
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

/* --- Small Heading (h4 - sub-items, labels, sidebar headings) --- */
.nts-small-title {
    font-size: 0.925rem !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

/* --- Body Paragraph --- */
.nts-body-text {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
}

/* --- Small / Supporting Text (disclaimers, captions, labels) --- */
.nts-small-text {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

/* --- FAQ-specific overrides --- */
.nts-faq-title {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.nts-faq-question {
    font-size: 0.925rem !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
}

.nts-faq-answer {
    font-size: 0.85rem !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
}

/* ---------- Tablet  (>=640px) ---------- */
@media (min-width: 640px) {
    .nts-hero-title   { font-size: 2.5rem !important; }
    .nts-section-title { font-size: 2rem !important; }
    .nts-section-subtitle { font-size: 0.95rem !important; }
    .nts-card-title   { font-size: 1.125rem !important; }
    .nts-small-title  { font-size: 0.95rem !important; }
    .nts-body-text    { font-size: 0.95rem !important; }
    .nts-small-text   { font-size: 0.825rem !important; }
    .nts-faq-title    { font-size: 2rem !important; }
    .nts-faq-question { font-size: 0.95rem !important; }
    .nts-faq-answer   { font-size: 0.875rem !important; }
}

/* ---------- Desktop (>=768px) ---------- */
@media (min-width: 768px) {
    .nts-hero-title   { font-size: 2.75rem !important; line-height: 1.1 !important; }
    .nts-section-title { font-size: 2.25rem !important; line-height: 1.2 !important; }
    .nts-section-subtitle { font-size: 1rem !important; }
    .nts-card-title   { font-size: 1.175rem !important; }
    .nts-small-title  { font-size: 1rem !important; }
    .nts-body-text    { font-size: 1rem !important; }
    .nts-small-text   { font-size: 0.85rem !important; }
    .nts-faq-title    { font-size: 2.25rem !important; line-height: 1.2 !important; }
    .nts-faq-question { font-size: 1rem !important; }
    .nts-faq-answer   { font-size: 0.9rem !important; }
}

/* ---------- Large Desktop (>=1024px) ---------- */
@media (min-width: 1024px) {
    .nts-hero-title   { font-size: 3.25rem !important; }
    .nts-section-title { font-size: 2.5rem !important; }
    .nts-section-subtitle { font-size: 1.0625rem !important; }
    .nts-card-title   { font-size: 1.25rem !important; }
    .nts-small-title  { font-size: 1.0625rem !important; }
    .nts-body-text    { font-size: 1.0625rem !important; }
    .nts-small-text   { font-size: 0.875rem !important; }
    .nts-faq-title    { font-size: 2.5rem !important; }
    .nts-faq-question { font-size: 1.05rem !important; }
    .nts-faq-answer   { font-size: 0.95rem !important; }
}

/* ---------- XL Desktop (>=1280px) ---------- */
@media (min-width: 1280px) {
    .nts-hero-title   { font-size: 3.5rem !important; }
    .nts-section-title { font-size: 2.75rem !important; }
    .nts-section-subtitle { font-size: 1.125rem !important; }
    .nts-card-title   { font-size: 1.3rem !important; }
    .nts-faq-title    { font-size: 2.75rem !important; }
}

/* ==========================================================================
   General Layout / Spacing Utility Classes  —  Mobile-first responsive
   ========================================================================== */

/* --- Section padding (top + bottom) --- */
.nts-section-padding {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

/* --- Section header block (title + subtitle wrapper → content gap) --- */
.nts-section-header {
    margin-bottom: 1.5rem !important;
}

/* --- Title → subtitle gap --- */
.nts-title-gap {
    margin-bottom: 0.5rem !important;
}

/* --- Subtitle → content gap (when no header wrapper) --- */
.nts-subtitle-gap {
    margin-bottom: 0 !important;
}

/* ---------- Tablet  (>=640px) ---------- */
@media (min-width: 640px) {
    .nts-section-padding {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    .nts-section-header { margin-bottom: 1.75rem !important; }
    .nts-title-gap      { margin-bottom: 0.625rem !important; }
}

/* ---------- Desktop (>=768px) ---------- */
@media (min-width: 768px) {
    .nts-section-padding {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    .nts-section-header { margin-bottom: 2rem !important; }
    .nts-title-gap      { margin-bottom: 0.75rem !important; }
}

/* ---------- Large Desktop (>=1024px) ---------- */
@media (min-width: 1024px) {
    .nts-section-padding {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }
    .nts-section-header { margin-bottom: 2.25rem !important; }
}

/* ---------- XL Desktop (>=1280px) ---------- */
@media (min-width: 1280px) {
    .nts-section-padding {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .nts-section-header { margin-bottom: 2.5rem !important; }
}

/* ==========================================================================
   Button Utility Classes  —  Mobile-first responsive
   Compose: nts-btn  +  style (nts-btn-primary / outline / white)  +  size (lg / md / sm)
   ========================================================================== */

/* --- Base button reset (shared by every button) --- */
.nts-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

/* ── Style variants ─────────────────────────────────────────── */

/* Primary solid (gold/amber) */
.nts-btn-primary {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600)) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(201, 179, 130, 0.25) !important;
}
.nts-btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-400), var(--primary-500)) !important;
    box-shadow: 0 8px 25px rgba(201, 179, 130, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Outline (for dark backgrounds — white border, turns primary on hover) */
.nts-btn-outline {
    background: transparent !important;
    color: #f5f5f5 !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: none !important;
}
.nts-btn-outline:hover {
    border-color: var(--primary-500) !important;
    color: var(--primary-400) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    transform: translateY(-1px) !important;
}

/* White / inverse (for primary or dark backgrounds) */
.nts-btn-white {
    background: #ffffff !important;
    color: var(--primary-700) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
.nts-btn-white:hover {
    background: #f5f5f5 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* Ghost / secondary (glass effect for dark bg) */
.nts-btn-ghost {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
.nts-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: var(--primary-400) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

/* ── Size modifiers ─────────────────────────────────────────── */

/* Large (hero CTAs) */
.nts-btn-lg {
    padding: 0.75rem 1.75rem !important;
    font-size: 0.8125rem !important;
    border-radius: 0.25rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Medium (standard section CTAs) — default */
.nts-btn-md {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.8125rem !important;
    border-radius: 0.5rem !important;
}

/* Small (header, compact buttons, product cards) */
.nts-btn-sm {
    padding: 0.5rem 1.25rem !important;
    font-size: 0.75rem !important;
    border-radius: 0.5rem !important;
}

/* ---------- Tablet  (>=640px) ---------- */
@media (min-width: 640px) {
    .nts-btn-lg {
        padding: 0.875rem 2rem !important;
        font-size: 0.875rem !important;
    }
    .nts-btn-md {
        padding: 0.875rem 1.75rem !important;
        font-size: 0.875rem !important;
    }
    .nts-btn-sm {
        padding: 0.5625rem 1.5rem !important;
        font-size: 0.8125rem !important;
    }
}

/* ---------- Desktop (>=768px) ---------- */
@media (min-width: 768px) {
    .nts-btn-lg {
        padding: 1rem 2.25rem !important;
        font-size: 0.9375rem !important;
    }
    .nts-btn-md {
        padding: 1rem 2rem !important;
        font-size: 0.875rem !important;
    }
    .nts-btn-sm {
        padding: 0.625rem 1.5rem !important;
        font-size: 0.8125rem !important;
    }
}

/* ---------- Large Desktop (>=1024px) ---------- */
@media (min-width: 1024px) {
    .nts-btn-lg {
        padding: 1rem 2.5rem !important;
        font-size: 1rem !important;
    }
    .nts-btn-md {
        padding: 1rem 2rem !important;
        font-size: 0.9375rem !important;
    }
}

/* ---------- XL Desktop (>=1280px) ---------- */
@media (min-width: 1280px) {
    .nts-btn-lg {
        padding: 1rem 2.5rem !important;
    }
}

/* ==========================================================================
   Icon Utility Classes  —  Mobile-first responsive
   Prevents icon squashing in flex containers + responsive sizing
   ========================================================================== */

/* SVGs inside buttons should never shrink */
.nts-btn svg {
    flex-shrink: 0 !important;
}

/* --- Icon wrapper base (shared by all icon circles/squares) --- */
.nts-icon-wrap {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Large icon wrapper (replaces w-16 h-16 / w-8 h-8 svg) */
.nts-icon-lg {
    width: 2.75rem !important;
    height: 2.75rem !important;
}
.nts-icon-lg svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* XL icon wrapper (replaces w-20 h-20 / w-10 h-10 svg) */
.nts-icon-xl {
    width: 3.25rem !important;
    height: 3.25rem !important;
}
.nts-icon-xl svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

/* ---------- Tablet  (>=640px) ---------- */
@media (min-width: 640px) {
    .nts-icon-lg { width: 3.25rem !important; height: 3.25rem !important; }
    .nts-icon-lg svg { width: 1.5rem !important; height: 1.5rem !important; }
    .nts-icon-xl { width: 3.75rem !important; height: 3.75rem !important; }
    .nts-icon-xl svg { width: 1.75rem !important; height: 1.75rem !important; }
}

/* ---------- Desktop (>=768px) ---------- */
@media (min-width: 768px) {
    .nts-icon-lg { width: 3.5rem !important; height: 3.5rem !important; }
    .nts-icon-lg svg { width: 1.75rem !important; height: 1.75rem !important; }
    .nts-icon-xl { width: 4.5rem !important; height: 4.5rem !important; }
    .nts-icon-xl svg { width: 2rem !important; height: 2rem !important; }
}

/* ---------- Large Desktop (>=1024px) ---------- */
@media (min-width: 1024px) {
    .nts-icon-lg { width: 4rem !important; height: 4rem !important; }
    .nts-icon-lg svg { width: 2rem !important; height: 2rem !important; }
    .nts-icon-xl { width: 5rem !important; height: 5rem !important; }
    .nts-icon-xl svg { width: 2.5rem !important; height: 2.5rem !important; }
}

/* Focus Styles for Accessibility */
:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Text Selection Styles for Dark Theme */
::selection {
    background-color: var(--primary-500);
    color: #000000;
}

::-moz-selection {
    background-color: var(--primary-500);
    color: #000000;
}

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--foreground);
    color: var(--background);
    padding: 8px;
    text-decoration: none;
    border-radius: var(--radius-md);
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Cursive Font Class */
.font-cursive {
    font-family: var(--font-dancing-script), cursive !important;
}

/* Medical Content Styling */
.medical-content {
    font-size: 1.1rem;
    line-height: 1.7;
    text-align: left;
    writing-mode: horizontal-tb;
    direction: ltr;
}

.medical-content h1,
.medical-content h2,
.medical-content h3 {
    color: var(--foreground);
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: left;
    writing-mode: horizontal-tb;
    direction: ltr;
}

.medical-content p {
    margin-bottom: 1rem;
    text-align: left;
    writing-mode: horizontal-tb;
    direction: ltr;
}

.medical-content ul,
.medical-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    text-align: left;
    writing-mode: horizontal-tb;
    direction: ltr;
}

.medical-content li {
    margin-bottom: 0.5rem;
    text-align: left;
    writing-mode: horizontal-tb;
    direction: ltr;
}

/* Trust Elements */
.trust-badge {
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    border: 1px solid var(--primary-200);
}

/* CTA Buttons */
.cta-primary {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: #000000;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
    font-weight: 600;
    text-align: center;
}

.cta-primary:hover {
    background: linear-gradient(135deg, var(--primary-400), var(--primary-500));
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(245, 158, 11, 0.4), 0 6px 20px rgba(0, 0, 0, 0.2);
}

.cta-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.cta-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--primary-400);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Phone Link Styling */
.phone-link {
    color: var(--primary-600);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.phone-link:hover {
    color: var(--primary-700);
}

/* Form Styling */
.form-input {
    background: var(--input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    transition: border-color 0.2s ease;
}

.form-input:focus {
    border-color: var(--ring);
    outline: none;
    box-shadow: 0 0 0 3px rgb(245 158 11 / 0.1);
}

.form-error {
    color: var(--error);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Contact Form 7 - Appointment Dark Theme */

/* Reset CF7 default spacing */
.nts-cf7-appointment .wpcf7-form p {
    margin: 0 !important;
    padding: 0 !important;
}

.nts-cf7-appointment .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
}

.nts-cf7-appointment .wpcf7-form br {
    display: none;
}

/* Labels */
.nts-cf7-appointment .wpcf7-form label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #d4d4d4;
    margin-bottom: 0.25rem;
}

/* Section headings inside CF7 */
.nts-cf7-appointment .wpcf7-form h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    margin-top: 0;
}

/* Inputs, selects, textareas */
.nts-cf7-appointment .wpcf7-form input[type="text"],
.nts-cf7-appointment .wpcf7-form input[type="email"],
.nts-cf7-appointment .wpcf7-form input[type="tel"],
.nts-cf7-appointment .wpcf7-form input[type="date"],
.nts-cf7-appointment .wpcf7-form input[type="url"],
.nts-cf7-appointment .wpcf7-form input[type="number"],
.nts-cf7-appointment .wpcf7-form select,
.nts-cf7-appointment .wpcf7-form textarea {
    background: #fff !important;
    border: 1px solid #a3a3a3 !important;
    border-radius: 0 !important;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    width: 100%;
    height: 42px;
    color: #171717;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.nts-cf7-appointment .wpcf7-form select option {
    background: #fff;
    color: #171717;
}

.nts-cf7-appointment .wpcf7-form textarea {
    height: auto !important;
    min-height: 80px;
}

.nts-cf7-appointment .wpcf7-form input::placeholder,
.nts-cf7-appointment .wpcf7-form textarea::placeholder {
    color: #a3a3a3;
}

/* Focus state */
.nts-cf7-appointment .wpcf7-form input:focus,
.nts-cf7-appointment .wpcf7-form select:focus,
.nts-cf7-appointment .wpcf7-form textarea:focus {
    border-color: #c9b382 !important;
    outline: none;
    box-shadow: 0 0 0 3px rgb(201 179 130 / 0.15);
}

/* Submit button — matches nts-btn nts-btn-primary nts-btn-md */
.nts-cf7-appointment .wpcf7-form input[type="submit"] {
    background: linear-gradient(135deg, #c9b382, #b89d6b) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 4px 12px rgba(201, 179, 130, 0.25);
    transition: all 0.2s ease;
    text-align: center !important;
}

.nts-cf7-appointment .wpcf7-form input[type="submit"]:hover {
    background: linear-gradient(135deg, #d9c89e, #c9b382) !important;
    box-shadow: 0 8px 25px rgba(201, 179, 130, 0.4);
    transform: translateY(-1px);
}

/* Validation */
.nts-cf7-appointment .wpcf7-form .wpcf7-not-valid-tip {
    color: #fca5a5;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.nts-cf7-appointment .wpcf7-form .wpcf7-response-output {
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-size: 0.875rem;
    margin-top: 1rem;
}

/* Success */
.nts-cf7-appointment .wpcf7-form.sent .wpcf7-response-output,
.nts-cf7-appointment .wpcf7-form.wpcf7-form-sent .wpcf7-response-output {
    border-color: #22c55e !important;
    color: #bbf7d0;
    background: rgb(34 197 94 / 0.1);
}

/* Validation / acceptance errors */
.nts-cf7-appointment .wpcf7-form.invalid .wpcf7-response-output,
.nts-cf7-appointment .wpcf7-form.unaccepted .wpcf7-response-output {
    border-color: #ef4444 !important;
    color: #fca5a5;
    background: rgb(239 68 68 / 0.1);
}

/* Mail failure */
.nts-cf7-appointment .wpcf7-form.failed .wpcf7-response-output,
.nts-cf7-appointment .wpcf7-form.aborted .wpcf7-response-output {
    border-color: #ef4444 !important;
    color: #fca5a5;
    background: rgb(239 68 68 / 0.1);
}

/* Spam */
.nts-cf7-appointment .wpcf7-form.spam .wpcf7-response-output {
    border-color: #f59e0b !important;
    color: #fde68a;
    background: rgb(245 158 11 / 0.1);
}

/* Legacy CF7 fallback */
.nts-cf7-appointment .wpcf7-form .wpcf7-mail-sent-ok {
    border-color: #22c55e !important;
    color: #bbf7d0;
    background: rgb(34 197 94 / 0.1);
}

.nts-cf7-appointment .wpcf7-form .wpcf7-validation-errors {
    border-color: #ef4444 !important;
    color: #fca5a5;
    background: rgb(239 68 68 / 0.1);
}

/* Privacy notice */
.nts-cf7-appointment .wpcf7-form .privacy-notice {
    background: rgb(38 38 38 / 0.5);
    border: 1px solid rgb(202 138 4 / 0.3) !important;
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-size: 0.75rem;
    color: #fef08a;
}

.nts-cf7-appointment .wpcf7-form .wpcf7-spinner {
    display: none;
}

/* CRITICAL: Force horizontal text layout across entire site */
html {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
}

body {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
}

/* Force all text to be horizontal - nuclear option */
html *,
html *::before,
html *::after {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
    -webkit-writing-mode: horizontal-tb !important;
    -ms-writing-mode: horizontal-tb !important;
}

/* Universal text layout reset - HIGHEST PRIORITY */
*,
*::before,
*::after {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
    text-align: inherit !important;
}

/* All text elements must be horizontal */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
section,
article,
li,
a,
button,
label,
input,
textarea,
blockquote,
cite,
code,
pre {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Tailwind utility classes override */
.text-xs,
.text-sm,
.text-base,
.text-lg,
.text-xl,
.text-2xl,
.text-3xl,
.text-4xl,
.text-5xl,
.text-6xl,
.text-7xl,
.text-8xl,
.text-9xl {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
    white-space: normal !important;
}

/* Layout utilities override */
.block,
.inline,
.inline-block,
.flex,
.grid {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
}

/* Line height utilities */
.leading-none,
.leading-tight,
.leading-snug,
.leading-normal,
.leading-relaxed,
.leading-loose {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
}

/* Font weight utilities */
.font-thin,
.font-extralight,
.font-light,
.font-normal,
.font-medium,
.font-semibold,
.font-bold,
.font-extrabold,
.font-black {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
}

/* Text alignment utilities */
.text-left,
.text-center,
.text-right,
.text-justify {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
}

/* Color utilities */
.text-white,
.text-black,
.text-gray-50,
.text-gray-100,
.text-gray-200,
.text-gray-300,
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-gray-700,
.text-gray-800,
.text-gray-900,
.text-neutral-50,
.text-neutral-100,
.text-neutral-200,
.text-neutral-300,
.text-neutral-400,
.text-neutral-500,
.text-neutral-600,
.text-neutral-700,
.text-neutral-800,
.text-neutral-900,
.text-primary-400,
.text-primary-500,
.text-primary-600,
.text-primary-700 {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
}

/* Specific component fixes */
.hero-text,
.hero-paragraph,
.faq-question,
.faq-answer,
.medical-content {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* EMERGENCY FIX: Override any possible CSS causing vertical text */
[style*="writing-mode"] {
    writing-mode: horizontal-tb !important;
}

/* Container and section fixes */
.container,
.mx-auto,
.max-w-3xl,
.max-w-4xl,
.max-w-6xl {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
}

/* Flexbox and grid fixes */
.flex,
.flex-col,
.flex-row,
.grid,
.space-y-4,
.space-y-6,
.space-y-8 {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
}

/* Padding and margin utilities */
.p-4,
.p-6,
.p-8,
.px-4,
.px-6,
.px-8,
.py-4,
.py-6,
.py-8,
.py-12,
.py-16,
.m-4,
.m-6,
.m-8,
.mx-4,
.mx-6,
.mx-8,
.my-4,
.my-6,
.my-8,
.my-12,
.my-16,
.mb-2,
.mb-4,
.mb-6,
.mb-8,
.mb-12,
.mt-2,
.mt-4,
.mt-6,
.mt-8,
.mt-12 {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
}

/* Responsive Typography */
@media (max-width: 768px) {
    .medical-content {
        font-size: 1rem;
    }

    /* Mobile Hero Background Fixes */
    section[style*="backgroundImage"] {
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: scroll !important;
        min-height: 100vh !important;
    }
}

/* FINAL OVERRIDE - HIGHEST SPECIFICITY */
html body * {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body p,
html body span,
html body div,
html body section,
html body article,
html body li,
html body a,
html body button,
html body label {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
    white-space: normal !important;
}

/* Target FAQ specifically */
html body .faq-question,
html body .faq-answer {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: normal !important;
}

/* Target all text content */
html body [class*="text-"],
html body [class*="leading-"],
html body [class*="font-"] {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
}

/* Preserve text alignment classes */
html body .text-center {
    text-align: center !important;
}

html body .text-left {
    text-align: left !important;
}

html body .text-right {
    text-align: right !important;
}

/* Center specific elements that should be centered */
html body .text-center h1,
html body .text-center h2,
html body .text-center h3,
html body .text-center h4,
html body .text-center h5,
html body .text-center h6,
html body .text-center p {
    text-align: center !important;
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
}

/* Hero section centering */
html body .hero-text,
html body .hero-paragraph {
    text-align: center !important;
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
}

/* Additional centering rules for common patterns */
html body .text-center>*,
html body .text-center h1,
html body .text-center h2,
html body .text-center h3,
html body .text-center h4,
html body .text-center h5,
html body .text-center h6,
html body .text-center p,
html body .text-center span,
html body .text-center div {
    text-align: center !important;
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
}

/* Specific section centering */
html body section .text-center h1,
html body section .text-center h2,
html body section .text-center h3,
html body section .text-center p {
    text-align: center !important;
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
}

/* Container centering */
html body .container .text-center h1,
html body .container .text-center h2,
html body .container .text-center h3,
html body .container .text-center p {
    text-align: center !important;
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
}

/* Animation Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

@keyframes pulseSlow {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* Animation Classes */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-slide-in-left {
    animation: slideInLeft 1s ease-out forwards;
}

.animate-slide-in-right {
    animation: slideInRight 1s ease-out forwards;
}

.animate-pulse-slow {
    animation: pulseSlow 3s ease-in-out infinite;
}

/* Animation Delays */
.animation-delay-200 {
    animation-delay: 0.2s;
}

.animation-delay-300 {
    animation-delay: 0.3s;
}

.animation-delay-400 {
    animation-delay: 0.4s;
}

.animation-delay-500 {
    animation-delay: 0.5s;
}

.animation-delay-600 {
    animation-delay: 0.6s;
}

.animation-delay-700 {
    animation-delay: 0.7s;
}

.animation-delay-800 {
    animation-delay: 0.8s;
}

.animation-delay-900 {
    animation-delay: 0.9s;
}

.animation-delay-1000 {
    animation-delay: 1s;
}

/* Initial state for animated elements */
.animate-fade-in-up,
.animate-slide-in-left,
.animate-slide-in-right {
    opacity: 0;
}

/* Body styling for floating header */
/* TEMPORARY: Modified to support dynamic background color changes */
body {
    padding-top: 0;
    background: var(--background, #ffffff);
    min-height: 100vh;
}

/* Main content wrapper */
#main-content {
    position: relative;
    z-index: 1;
}

/* Floating header spacing utilities */
.floating-header-spacing {
    padding-top: 6rem;
    /* 96px for mobile */
}

@media (min-width: 1024px) {
    .floating-header-spacing {
        padding-top: 7rem;
        /* 112px for desktop */
    }
}

/* For breadcrumb sections specifically */
.breadcrumb-floating-spacing {
    padding-top: 6rem !important;
    /* 96px for mobile */
    padding-bottom: 1rem !important;
}

@media (min-width: 1024px) {
    .breadcrumb-floating-spacing {
        padding-top: 7rem !important;
        /* 112px for desktop */
    }
}

/* Utility to force horizontal flow when needed */
.force-horizontal,
.prevent-vertical-text {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
}

/* Intersection Observer Animation Trigger */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

/* Home hero background animations */
@keyframes kenburns-slow-zoom {
    0% {
        transform: scale(1) translate3d(0, 0, 0);
    }

    50% {
        transform: scale(1.05) translate3d(0.5%, -0.5%, 0);
    }

    100% {
        transform: scale(1.1) translate3d(1%, -1%, 0);
    }
}

@keyframes subtle-pan {
    0% {
        background-position: 50% 50%;
    }

    25% {
        background-position: 55% 45%;
    }

    50% {
        background-position: 50% 40%;
    }

    75% {
        background-position: 45% 55%;
    }

    100% {
        background-position: 50% 50%;
    }
}

.hero-bg-animate {
    animation: kenburns-slow-zoom 30s ease-in-out infinite alternate;
    will-change: transform;
}

.hero-bg-pan {
    animation: subtle-pan 40s ease-in-out infinite;
    will-change: background-position;
}

/* Floating header shine */
@keyframes header-shine-sweep {
    0% {
        transform: translateX(-150%) skewX(-15deg);
        opacity: 0;
    }

    20% {
        opacity: .4;
    }

    50% {
        opacity: .6;
    }

    100% {
        transform: translateX(200%) skewX(-15deg);
        opacity: 0;
    }
}

.header-sheen {
    background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
    filter: blur(0.5px);
    animation: header-shine-sweep 6s ease-in-out infinite;
}

.animate-on-scroll.animate-in {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1023px) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Ensure content is not hidden behind mobile bottom bar */
.mobile-nav-spacer {
    height: 4rem;
    /* 64px - height of mobile nav */
}

/* Fix for vertical text rendering - Force horizontal text */
.force-horizontal-text {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    direction: ltr !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* 3D Rotating Services Carousel on Scroll - ENHANCED */
.services-3d-container {
    perspective: 2000px;
    transform-style: preserve-3d;
    perspective-origin: center center;
}

.services-3d-container>* {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease, box-shadow 0.3s ease;
    will-change: transform, opacity;
    transform-style: preserve-3d;
    backface-visibility: visible;
}

/* Scroll-triggered 3D rotation animation - MUCH MORE VISIBLE */
@keyframes rotate3DIn {
    0% {
        transform: rotateY(-90deg) rotateX(25deg) translateZ(-200px) scale(0.5);
        opacity: 0;
        filter: blur(10px);
    }

    50% {
        transform: rotateY(-45deg) rotateX(10deg) translateZ(-50px) scale(0.8);
        opacity: 0.5;
    }

    100% {
        transform: rotateY(0deg) rotateX(0deg) translateZ(0px) scale(1);
        opacity: 1;
        filter: blur(0px);
    }
}

.services-3d-container.animate-in>* {
    animation: rotate3DIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: center center;
}

.services-3d-container.animate-in>*:nth-child(1) {
    animation-delay: 0s;
}

.services-3d-container.animate-in>*:nth-child(2) {
    animation-delay: 0.15s;
}

.services-3d-container.animate-in>*:nth-child(3) {
    animation-delay: 0.3s;
}

.services-3d-container.animate-in>*:nth-child(4) {
    animation-delay: 0.45s;
}

.services-3d-container.animate-in>*:nth-child(5) {
    animation-delay: 0.6s;
}

.services-3d-container.animate-in>*:nth-child(6) {
    animation-delay: 0.75s;
}

/* ENHANCED 3D rotation on hover - VERY VISIBLE */
.services-3d-container>*:hover {
    transform: rotateY(15deg) rotateX(-5deg) scale(1.08) translateZ(50px);
    z-index: 10;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Alternate direction for odd items for more dynamic effect */
.services-3d-container.animate-in>*:nth-child(odd) {
    animation-name: rotate3DInLeft;
}

@keyframes rotate3DInLeft {
    0% {
        transform: rotateY(90deg) rotateX(-25deg) translateZ(-200px) scale(0.5);
        opacity: 0;
        filter: blur(10px);
    }

    50% {
        transform: rotateY(45deg) rotateX(-10deg) translateZ(-50px) scale(0.8);
        opacity: 0.5;
    }

    100% {
        transform: rotateY(0deg) rotateX(0deg) translateZ(0px) scale(1);
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
}

.animate-delay-100 {
    animation-delay: 0.1s;
    opacity: 0;
}

.animate-delay-200 {
    animation-delay: 0.2s;
    opacity: 0;
}

.animate-delay-300 {
    animation-delay: 0.3s;
    opacity: 0;
}

.animate-delay-400 {
    animation-delay: 0.4s;
    opacity: 0;
}

.animate-delay-500 {
    animation-delay: 0.5s;
    opacity: 0;
}

.animate-delay-600 {
    animation-delay: 0.6s;
    opacity: 0;
}

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

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

.animate-scroll {
    animation: scroll-left 30s linear infinite;
}

.animate-scroll:hover {
    animation-play-state: paused;
}

/* 3D Stacked Services with Hover Roll-back */
.services-stack-container {
    perspective: 2000px;
    position: relative;
}

.service-card-3d {
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    position: relative;
    z-index: 1;
}

.service-card-3d:hover {
    transform: translateZ(80px) scale(1.05);
    z-index: 10;
}

.service-card-3d:nth-child(1) {
    transform: translateZ(0px);
}

.service-card-3d:nth-child(2) {
    transform: translateZ(-20px);
    margin-top: -8px;
}

.service-card-3d:nth-child(3) {
    transform: translateZ(-40px);
    margin-top: -8px;
}

.service-card-3d:nth-child(4) {
    transform: translateZ(-60px);
    margin-top: -8px;
}

.service-card-3d:nth-child(5) {
    transform: translateZ(-80px);
    margin-top: -8px;
}

.service-card-3d:nth-child(6) {
    transform: translateZ(-100px);
    margin-top: -8px;
}

.service-card-3d:hover~.service-card-3d {
    transform: translateZ(-150px) scale(0.95);
}

/* Swiper Testimonials Custom Styles */
.testimonials-swiper {
    overflow: hidden !important;
}

.testimonials-swiper .swiper-wrapper {
    align-items: stretch;
}

html body .testimonials-pagination.swiper-pagination {
    position: static !important;
    width: auto !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .testimonials-pagination .testimonial-bullet {
    display: inline-block !important;
    width: 0.5rem !important;
    height: 0.5rem !important;
    min-width: 0.5rem !important;
    min-height: 0.5rem !important;
    border-radius: 9999px !important;
    background-color: #525252 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
    border-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex-shrink: 0 !important;
    margin: 0 2px !important;
}

html body .testimonials-pagination .testimonial-bullet:hover {
    background-color: #737373 !important;
}

html body .testimonials-pagination .testimonial-bullet-active {
    width: 2rem !important;
    min-width: 2rem !important;
    background-color: #c9b382 !important;
}

/* Team Swiper Custom Styles */
.team-swiper {
    overflow: hidden !important;
}

html body .team-pagination.swiper-pagination {
    position: static !important;
    width: auto !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .team-pagination .team-bullet {
    display: inline-block !important;
    width: 0.75rem !important;
    height: 0.75rem !important;
    min-width: 0.75rem !important;
    min-height: 0.75rem !important;
    border-radius: 9999px !important;
    background-color: #525252 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
    border-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex-shrink: 0 !important;
}

html body .team-pagination .team-bullet:hover {
    background-color: #737373 !important;
}

html body .team-pagination .team-bullet-active {
    background-color: #c9b382 !important;
    transform: scale(1.25) !important;
}

/* Hero Background - Responsive Image Handling */
.hero-background {
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(/images/hero/homepage-hero.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
}

/* Mobile: Ensure full coverage */
@media (max-width: 768px) {
    .hero-background {
        background-size: cover;
        background-position: center center;
        background-attachment: scroll;
    }
}

/* Desktop: Cover for full immersive experience */
@media (min-width: 769px) {
    .hero-background {
        background-size: cover;
        background-position: center center;
        background-attachment: scroll;
    }
}


/* Site Settings */
:root {
    --site-spacing: 40px;
}

@media (max-width: 767px) {
    :root {
        --site-spacing: 16px;
    }
}

.site-container {
    padding-left: var(--site-spacing);
    padding-right: var(--site-spacing);
    margin-left: auto;
    margin-right: auto;
}


/* Header */