/* Brand Colors */
:root {
    --primary-color: #63bee3;
    --secondary-color: #77e1e3;
    --text-color: #f2f0e3;
    --button-color: #1b1b1b;
}

/* GTAlpina Font Face */
@font-face {
    font-family: 'GTAlpina';
    src: url('../fonts/GTAlpina.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Neue Montreal Font Face */
@font-face {
    font-family: 'Neue Montreal';
    src: url('../fonts/NeueMontrealMedium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Space Mono Regular Font Face */
@font-face {
    font-family: 'Space Mono';
    src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Global Styles */
body {
    font-family: 'Space Mono', 'Neue Montreal', monospace;
    font-size: 18px;
    font-weight: 400;
    overflow-x: hidden;
    color: var(--text-color);
    background-color: #1b1b1b;
    letter-spacing: 0.02em;
    min-width: 380px !important;
}

/* Apply Space Mono to body text with Neue Montreal fallback */
/* Using universal selector with high specificity to override Bootstrap - exclude icons and headings */
html *:not(.bi):not([class*="icon"]):not([class*="Icon"]):not(i):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
html *:not(.bi):not([class*="icon"]):not([class*="Icon"]):not(i):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)::before,
html *:not(.bi):not([class*="icon"]):not([class*="Icon"]):not(i):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)::after {
    font-family: 'Space Mono', 'Neue Montreal', monospace !important;
}

/* Headings use Neue Montreal with medium weight */
h1, h2, h3, h4, h5, h6,
body h1, body h2, body h3, body h4, body h5, body h6,
main h1, main h2, main h3, main h4, main h5, main h6,
.container h1, .container h2, .container h3, .container h4, .container h5, .container h6,
h1.display-4, h1.display-2, h1.display-1, h1.display-3, h1.display-5, h1.display-6,
h2.display-4, h2.display-2, h2.display-1, h2.display-3, h2.display-5, h2.display-6 {
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500 !important;
}

/* Specific overrides for Bootstrap classes - paragraphs use Space Mono */
p,
body p,
main p,
.container p {
    font-family: 'Space Mono', 'Neue Montreal', monospace !important;
    color: var(--text-color) !important;
}

/* Header menu links and buttons use Neue Montreal Medium */
.nav-link, .btn, button {
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500 !important;
    color: var(--text-color) !important;
}

/* Other links use Neue Montreal */
a,
body a,
main a,
.container a,
.navbar-brand {
    font-family: 'Neue Montreal', sans-serif !important;
    color: var(--text-color) !important;
}

.text-muted {
    font-family: 'Space Mono', 'Neue Montreal', monospace !important;
    color: rgba(242, 240, 227, 0.7) !important;
}

/* Display classes and lead text use Neue Montreal */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.lead, .text-white {
    font-family: 'Neue Montreal', sans-serif !important;
    color: var(--text-color) !important;
}

/* Override text colors */
h1, h2, h3, h4, h5, h6, p, .lead {
    color: var(--text-color) !important;
    letter-spacing: 0.03em;
}

/* Ensure headings use Neue Montreal with medium weight */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500 !important;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--secondary-color);
}

/* Body text paragraphs use Space Mono with Neue Montreal fallback */
p {
    font-family: 'Space Mono', 'Neue Montreal', monospace !important;
    font-weight: 400;
}

/* Apply Space Mono to body text elements with Neue Montreal fallback */
.heading, .subheading,
span, div, li, label {
    font-family: 'Space Mono', 'Neue Montreal', monospace;
    color: var(--text-color);
    letter-spacing: 0.02em;
}

/* Form inputs use Space Mono */
input, textarea, select, .form-control {
    font-family: 'Space Mono', 'Neue Montreal', monospace !important;
    color: var(--text-color);
    letter-spacing: 0.02em;
}

main {
    background-color: #1b1b1b;
    color: var(--text-color);
}

/* Book Now and Register pages specific styling */
.book-now-main,
.register-main {
    background-color: #f2f2f2 !important;
    color: #1b1b1b !important;
    min-height: calc(100vh - 200px);
}

/* Terms & Conditions and Privacy Policy pages styling */
.terms-conditions-main,
.privacy-policy-main {
    background-color: #f2f2f2 !important;
    color: #1b1b1b !important;
    min-height: calc(100vh - 200px);
    padding-top: 100px;
}

/* Ensure all text in terms/privacy pages uses dark color */
.terms-conditions-main,
.terms-conditions-main *,
.terms-conditions-main h1,
.terms-conditions-main h2,
.terms-conditions-main h3,
.terms-conditions-main h4,
.terms-conditions-main h5,
.terms-conditions-main h6,
.terms-conditions-main p,
.terms-conditions-main span,
.terms-conditions-main div,
.terms-conditions-main li,
.terms-conditions-main ul,
.privacy-policy-main,
.privacy-policy-main *,
.privacy-policy-main h1,
.privacy-policy-main h2,
.privacy-policy-main h3,
.privacy-policy-main h4,
.privacy-policy-main h5,
.privacy-policy-main h6,
.privacy-policy-main p,
.privacy-policy-main span,
.privacy-policy-main div,
.privacy-policy-main li,
.privacy-policy-main ul {
    color: #1b1b1b !important;
}

/* Link styling for Terms & Conditions and Privacy Policy pages */
.terms-conditions-main a,
.privacy-policy-main a,
.terms-conditions-main main a,
.privacy-policy-main main a {
    color: var(--primary-color) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.terms-conditions-main a:hover,
.privacy-policy-main a:hover,
.terms-conditions-main main a:hover,
.privacy-policy-main main a:hover {
    color: var(--secondary-color) !important;
}

/* Services Page Styling */
.services-main {
    background-color: #f2f2f2 !important;
    color: #1b1b1b !important;
    padding-top: 0;
    min-height: calc(100vh - 200px);
}

/* Ensure all text in services page uses button color */
.services-main,
.services-main *,
.services-main h1,
.services-main h2,
.services-main h3,
.services-main h4,
.services-main h5,
.services-main h6,
.services-main p,
.services-main span,
.services-main div,
.services-main li {
    color: #1b1b1b !important;
}

/* Services Hero Section */
.services-hero-section {
    position: relative;
    width: 100vw;
    max-width: 100%;
    min-height: 85vh;
    overflow: hidden;
    padding: 0;
    margin: 0;
    left: 0;
    right: 0;
}

.services-hero-section .carousel {
    width: 100%;
    height: 100%;
}

.services-hero-section .carousel-inner {
    height: 100%;
    min-height: 85vh;
    overflow: hidden;
}

.services-hero-section .carousel-item {
    height: 100%;
    min-height: 85vh;
    position: relative;
}

.services-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 85vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Transparent background - gradient is provided via inline styles along with image */
    background-color: transparent;
    /* Gradient fallback - will be overridden by inline styles but shows if image fails */
    background-image: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.services-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.services-hero-content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
    width: 100%;
    padding: 140px 0 100px;
}

.services-main .services-hero-section h1.services-hero-title,
.services-main .services-hero-section .services-hero-content h1.services-hero-title,
.services-hero-section .services-hero-content h1.services-hero-title,
.services-main .services-hero-section h1,
.services-main .services-hero-section h1.services-hero-title.mb-4 {
    font-size: 3.5rem !important;
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 2rem !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    text-transform: uppercase !important;
}

.services-main .services-hero-section p.services-hero-subtitle,
.services-main .services-hero-section .services-hero-content p.services-hero-subtitle,
.services-hero-section .services-hero-content p.services-hero-subtitle,
.services-main .services-hero-section .services-hero-subtitle {
    font-size: 1.25rem !important;
    color: #ffffff !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    text-transform: none !important;
}

/* Carousel - Let Bootstrap handle the default slide animation (already right-to-left when going next) */
/* Only ensure proper structure and positioning */
.services-hero-section .carousel-item {
    position: relative;
}

/* Services Section */
.services-section {
    background-color: #f2f2f2 !important;
    padding: 80px 0;
    color: #1b1b1b !important;
}

/* Ensure all text in services section on home page is #1b1b1b */
.services-section *,
.services-section p,
.services-section span,
.services-section div,
.services-section li {
    color: #1b1b1b !important;
}

/* Service Cards */
.service-card {
    background-color: #ffffff !important;
    border-radius: 2px !important;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 2rem;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15) !important;
}

.service-card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    overflow: hidden;
    position: relative;
    border-radius: 2px;
}

.service-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    border-radius: 2px;
}

.service-card:hover .service-card-img {
    transform: scale(1.08);
}

.service-image-placeholder-card {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, rgba(99, 190, 227, 0.2) 0%, rgba(119, 225, 227, 0.2) 100%);
    border-radius: 2px;
}

.service-card-body {
    padding: 3rem !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Vertically center service images relative to their text content on desktop */
.service-card .row.g-0 > [class*="col-lg-6"] {
    display: flex;
    align-items: center;
}

.service-card-title {
    font-size: 2.5rem;
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500;
    color: #1b1b1b !important;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

/* Force service card title color on home page */
.services-section .service-card-title,
body .services-section .service-card-title {
    color: #1b1b1b !important;
}

.service-card-description {
    color: #1b1b1b !important;
    line-height: 2;
    font-size: 1.125rem;
    font-weight: 400;
    flex-grow: 1;
}

/* Force service card description color on home page */
.services-section .service-card-description,
.services-section .service-card-description p,
body .services-section .service-card-description,
body .services-section .service-card-description p {
    color: #1b1b1b !important;
}


.service-badge {
    display: inline-block;
}

.badge-text {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 20px;
}

.service-title {
    font-size: 2.75rem;
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500;
    color: #1b1b1b !important;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

.service-description {
    color: #1b1b1b !important;
    line-height: 1.8;
    font-size: 1.125rem;
    font-weight: 400;
}

/* Service Image Wrappers */
.service-image-container {
    width: 100%;
    position: relative;
}

.service-image-frame {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-image-frame:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18);
}

.service-image {
    width: 100%;
    height: 550px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.service-image-frame:hover .service-image {
    transform: scale(1.05);
}

.service-image-placeholder-large {
    width: 100%;
    height: 550px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.service-image-bg-gradient {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(99, 190, 227, 0.3) 0%, rgba(119, 225, 227, 0.3) 100%);
    border: 1px solid rgba(99, 190, 227, 0.2);
}

.service-image-bg-gradient.sunset {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.3) 0%, rgba(255, 200, 0, 0.3) 100%);
    border-color: rgba(255, 140, 0, 0.2);
}

.service-image-bg-gradient.pilates {
    background: linear-gradient(135deg, rgba(99, 190, 227, 0.25) 0%, rgba(119, 225, 227, 0.25) 100%);
}

.service-image-bg-gradient.massage {
    background: linear-gradient(135deg, rgba(150, 150, 150, 0.3) 0%, rgba(200, 200, 200, 0.3) 100%);
}

.service-image-bg-gradient.sauna {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.3) 0%, rgba(160, 82, 45, 0.3) 100%);
}

.service-image-bg-gradient.compression {
    background: linear-gradient(135deg, rgba(99, 190, 227, 0.2) 0%, rgba(119, 225, 227, 0.2) 100%);
}

.service-image-bg-gradient.yoga {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.2) 0%, rgba(255, 200, 0, 0.2) 100%);
}

/* Service Features */
.service-features-list {
    color: #1b1b1b !important;
    margin-top: 0.5rem;
}

/* Force service features list and all children to #1b1b1b */
.services-section .service-features-list,
.services-section .service-features-list *,
body .services-section .service-features-list,
body .services-section .service-features-list * {
    color: #1b1b1b !important;
}

.feature-item {
    padding: 1.5rem 0 1.5rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: padding-left 0.3s ease;
    position: relative;
}

/* Stylish bullet using ::before pseudo-element */
.feature-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2rem;
    width: 12px;
    height: 12px;
    background-color: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(99, 190, 227, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
    padding-left: 1.625rem;
}

.feature-item:hover::before {
    background-color: var(--secondary-color);
    transform: scale(1.2);
    box-shadow: 0 3px 12px rgba(119, 225, 227, 0.5);
}

.feature-item:last-child {
    border-bottom: none;
}

.feature-title {
    color: #1b1b1b !important;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.feature-description {
    color: #1b1b1b !important;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

/* Force feature description color on home page */
.services-section .feature-description,
.services-section .feature-item .feature-description,
.services-section .service-features-list .feature-description,
body .services-section .feature-description,
body .services-section .feature-item .feature-description {
    color: #1b1b1b !important;
}

/* Service Rendered Code */
.service-rendered-code {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.service-rendered-code * {
    max-width: 100%;
}

/* Dockside Wellness Header - Now in a card */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 2rem;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    max-width: 100px;
}

.divider-text {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #1b1b1b !important;
    padding: 0 20px;
}

.dockside-intro {
    color: #1b1b1b !important;
    line-height: 1.8;
    font-size: 1.125rem;
    max-width: 700px;
    margin: 0 auto;
    text-transform: none !important;
}

/* Dockside Wellness h1 styling */
.services-section .service-card-body h1 {
    font-weight: 700 !important;
    color: #1b1b1b !important;
}

/* Text color for Book Now and Register pages */
.book-now-main h1,
.book-now-main h2,
.book-now-main h3,
.book-now-main h4,
.book-now-main h5,
.book-now-main h6,
.book-now-main p,
.book-now-main span,
.book-now-main div,
.book-now-main li,
.book-now-main label,
.register-main h1,
.register-main h2,
.register-main h3,
.register-main h4,
.register-main h5,
.register-main h6,
.register-main p,
.register-main span,
.register-main div,
.register-main li,
.register-main label {
    color: #1b1b1b !important;
}

.book-now-main .display-4,
.register-main .display-4 {
    color: #1b1b1b !important;
}

/* Header Styles */
header.navbar,
header {
    background-color: transparent !important;
    box-shadow: none;
    z-index: 1000;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
    min-height: 90px;
    padding: 0.5rem 0;
    align-items: center !important;
}

/* Header when scrolled */
header.navbar.scrolled,
header.scrolled {
    background-color: #1b1b1b !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Book Now page - header always solid */
body.book-now-page header.navbar,
body.book-now-page header {
    background-color: #1b1b1b !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body.book-now-page .navbar-collapse {
    background-color: #1b1b1b !important;
}

/* Terms & Conditions and Privacy Policy pages - header always solid */
body.terms-conditions-page header.navbar,
body.terms-conditions-page header,
body.privacy-policy-page header.navbar,
body.privacy-policy-page header {
    background-color: #1b1b1b !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body.terms-conditions-page .navbar-collapse,
body.privacy-policy-page .navbar-collapse {
    background-color: #1b1b1b !important;
}

header.navbar > .container,
header > .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1820px !important;
    width: 100% !important;
}

/* Direct override for .container class inside header - highest priority */
header .container.container {
    max-width: 1820px !important;
    width: 100% !important;
}

/* Ensure navbar collapse (mobile menu) has same background */
.navbar-collapse {
    background-color: transparent !important;
}

header.scrolled .navbar-collapse {
    background-color: #1b1b1b !important;
}

.navbar-brand {
    font-size: 1.5rem;
    letter-spacing: 1px;
    color: var(--text-color) !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 0;
}

.navbar-logo {
    height: 80px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    transition: opacity 0.3s ease;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    vertical-align: middle;
}

.navbar-logo:hover {
    opacity: 0.8;
}

.navbar-brand-text {
    font-size: 1.5rem;
    letter-spacing: 1px;
    color: var(--text-color) !important;
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500 !important;
    display: none !important;
    visibility: hidden !important;
}

/* Remove any voyage-text class styling - ensure it uses same font as parent */
/* When inside headings, use Neue Montreal */
h1 .voyage-text,
h2 .voyage-text,
h3 .voyage-text,
h4 .voyage-text,
h5 .voyage-text,
h6 .voyage-text,
h1 span.voyage-text,
h2 span.voyage-text,
h3 span.voyage-text,
h4 span.voyage-text,
h5 span.voyage-text,
h6 span.voyage-text {
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500 !important;
    color: inherit !important;
}

/* When inside body text elements, use Space Mono */
p .voyage-text,
span .voyage-text,
div .voyage-text,
li .voyage-text,
p span.voyage-text,
span span.voyage-text,
div span.voyage-text,
li span.voyage-text {
    font-family: 'Space Mono', 'Neue Montreal', monospace !important;
    font-weight: inherit !important;
    color: inherit !important;
}

/* Default - inherit from parent */
.voyage-text,
span.voyage-text,
.voyage-text[style],
span.voyage-text[style],
.voyage-text * {
    font-family: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

.nav-link {
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
    color: var(--text-color) !important;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-color) !important;
}

/* Navbar Button Styling */
.navbar-nav .btn-primary {
    padding: 8px 20px;
    margin-left: 10px;
    border-radius: 50px;
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500 !important;
    white-space: nowrap;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    transition: all 0.3s ease;
}

.navbar-nav .btn-primary:hover {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(119, 225, 227, 0.4);
}

.navbar-nav .btn-primary.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Hero Section with Video Background */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Prevent black flash - use gradient as background until image/video loads */
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Gradient fallback if image doesn't load - ensure it's visible */
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    /* Ensure background image is visible and properly positioned */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Prevent black flash - ensure background is always visible */
    background-color: var(--primary-color);
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    background-color: transparent !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease-in, visibility 0s linear 0.5s;
}

.video-background video.video-ready {
    opacity: 0.3;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.5s ease-in, visibility 0s;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 2;
    /* Ensure overlay doesn't make it look black before content loads */
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
}

.hero-title {
    color: var(--text-color) !important;
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 1s ease-out;
    line-height: 1.2 !important;
}

.hero-subtitle {
    color: var(--text-color) !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    font-size: 1.25rem;
    animation: fadeInUp 1s ease-out 0.2s both;
    line-height: 1.8 !important;
}

.hero-buttons {
    animation: fadeInUp 1s ease-out 0.4s both;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    text-align: center;
}

/* Hero Button - Book A Class (Primary) */
.btn-hero-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    padding: 12px 30px;
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500 !important;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-hero-primary:hover {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(119, 225, 227, 0.4);
}

/* Hero Button - Book An Appointment (Secondary) */
.btn-hero-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #fff !important;
    padding: 12px 30px;
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500 !important;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-hero-secondary:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(99, 190, 227, 0.4);
}

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

/* Button Styles */
.btn-primary {
    background-color: var(--button-color) !important;
    border-color: var(--button-color) !important;
    color: var(--text-color) !important;
    padding: 12px 30px;
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500 !important;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(99, 190, 227, 0.4);
}

/* Service Card Book Now Buttons - Override default button styles */
.service-card .service-card-body .btn-primary,
.service-card-body .btn.btn-primary,
.service-card-body a.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    padding: 12px 30px !important;
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500 !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
}

.service-card .service-card-body .btn-primary:hover,
.service-card-body .btn.btn-primary:hover,
.service-card-body a.btn-primary:hover {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(119, 225, 227, 0.4) !important;
}

.btn-outline-light {
    background-color: transparent !important;
    border-color: var(--text-color) !important;
    color: var(--text-color) !important;
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 50px;
    border-width: 2px;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #1b1b1b !important;
    transform: translateY(-2px);
}

/* Footer Styles */
footer {
    margin-top: auto;
}

footer {
    background-color: #1b1b1b !important;
}

footer h5 {
    color: var(--text-color);
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

footer p {
    color: var(--text-color);
}

footer a {
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--primary-color) !important;
}

/* Footer Useful Links Bullets */
.footer-links-list {
    list-style: none;
    padding: 0;
}

.footer-link-item {
    padding-left: 1.5rem;
    position: relative;
    transition: padding-left 0.3s ease;
}

.footer-link-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 12px;
    height: 12px;
    background-color: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(99, 190, 227, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.footer-link-item:hover {
    padding-left: 1.625rem;
}

.footer-link-item:hover::before {
    background-color: var(--secondary-color);
    transform: scale(1.2);
    box-shadow: 0 3px 12px rgba(119, 225, 227, 0.5);
}

.social-links a {
    display: inline-block;
    transition: transform 0.3s ease;
}

.social-links a:hover {
    transform: translateY(-3px);
    color: var(--primary-color) !important;
}

/* Newsletter Form */
.newsletter-form .form-control {
    border-radius: 50px 0 0 50px;
    border: 1px solid rgba(242, 240, 227, 0.3);
    background-color: rgba(242, 240, 227, 0.1);
    color: var(--text-color);
    padding: 12px 20px;
}

.newsletter-form .form-control::placeholder {
    color: rgba(242, 240, 227, 0.6);
}

.newsletter-form .form-control:focus {
    border-color: var(--primary-color);
    background-color: rgba(242, 240, 227, 0.15);
    color: var(--text-color);
    box-shadow: 0 0 0 0.2rem rgba(99, 190, 227, 0.25);
}

.newsletter-form .btn {
    border-radius: 0 50px 50px 0;
    padding: 12px 25px;
    background-color: var(--button-color) !important;
    border-color: var(--button-color) !important;
    color: var(--text-color) !important;
}

.newsletter-form .btn:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Payment Icons */
.payment-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.payment-icon {
    height: 30px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.payment-icon:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .navbar-logo {
        height: 65px;
        max-width: 150px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .payment-icons {
        justify-content: flex-start;
        margin-top: 1rem;
    }

    .services-hero-section {
        min-height: 85vh;
    }
    
    .services-hero-section .carousel-item {
        min-height: 85vh;
    }
    
    .services-hero-section .services-hero-slide {
        min-height: 85vh;
    }
    
    .services-hero-section .services-hero-content {
        padding: 100px 0 60px;
    }

    .services-main .services-hero-section h1.services-hero-title,
    .services-main .services-hero-section .services-hero-content h1.services-hero-title,
    .services-hero-section .services-hero-content h1.services-hero-title,
    .services-hero-title {
        font-size: 2.25rem !important;
        color: #ffffff !important;
    }

    .services-main .services-hero-section p.services-hero-subtitle,
    .services-main .services-hero-section .services-hero-content p.services-hero-subtitle,
    .services-hero-section .services-hero-content p.services-hero-subtitle,
    .services-hero-subtitle {
        font-size: 1.125rem !important;
        color: #ffffff !important;
        text-transform: none !important;
    }

    .services-section {
        padding: 40px 0;
    }

    .service-card-body {
        padding: 2rem !important;
    }

    .service-card-title {
        font-size: 1.75rem;
    }

    .service-card-description {
        font-size: 1rem;
    }

    .service-card .row {
        flex-direction: column;
    }

    .service-card-image {
        min-height: 300px;
    }

    .service-image-placeholder-large {
        height: 350px;
    }

    .service-image {
        height: 350px;
    }

}

/* Header Container Max Width for All Screens - Override Bootstrap with maximum specificity */
body header.navbar.navbar-expand-lg.navbar-dark.fixed-top > .container,
body header.navbar > .container,
body header > .container,
header.navbar.navbar-expand-lg.navbar-dark > .container,
header.navbar.navbar-expand-lg > .container,
header.navbar > .container,
header > .container,
header .navbar > .container,
header.navbar .container,
header .container {
    max-width: 1820px !important;
    width: 100% !important;
}

/* Ensure header container max-width applies at all breakpoints, especially xxl - Override Bootstrap's 1320px */
@media (min-width: 1400px) {
    body header.navbar.navbar-expand-lg.navbar-dark.fixed-top > .container,
    body header.navbar > .container,
    body header > .container,
    header.navbar.navbar-expand-lg.navbar-dark > .container,
    header.navbar.navbar-expand-lg > .container,
    header.navbar > .container,
    header > .container,
    header .navbar > .container,
    header.navbar .container,
    header .container {
        max-width: 1820px !important;
        width: 100% !important;
    }
}

/* Services Page Container Max Width for Large Screens */
@media (min-width: 1400px) {
    .services-main .container,
    .services-main .container-lg,
    .services-main .container-md,
    .services-main .container-sm,
    .services-main .container-xl,
    .services-main .container-xxl {
        max-width: 1620px;
    }
}

/* Utility Classes */
.min-vh-100 {
    min-height: 100vh;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
    min-width: 380px !important;
}

/* Mindbody Widget Overrides - Brand Styling */
.mindbody-widget,
.mindbody-widget *,
[class*="mindbody"],
[class*="Mindbody"],
[class*="mbo"],
[id*="mindbody"],
[id*="Mindbody"] {
    font-family: 'Space Mono', 'Neue Montreal', monospace !important;
}

/* Mindbody Headings */
.mindbody-widget h1,
.mindbody-widget h2,
.mindbody-widget h3,
.mindbody-widget h4,
.mindbody-widget h5,
.mindbody-widget h6,
.mindbody-widget .heading,
.mindbody-widget .subheading,
[class*="mindbody"] h1,
[class*="mindbody"] h2,
[class*="mindbody"] h3,
[class*="mindbody"] h4,
[class*="mindbody"] h5,
[class*="mindbody"] h6,
[class*="mbo"] h1,
[class*="mbo"] h2,
[class*="mbo"] h3,
[class*="mbo"] h4,
[class*="mbo"] h5,
[class*="mbo"] h6 {
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500 !important;
}

/* Mindbody Text Elements */
.mindbody-widget p,
.mindbody-widget span,
.mindbody-widget div,
.mindbody-widget li,
.mindbody-widget td,
.mindbody-widget th,
.mindbody-widget label,
.mindbody-widget .text,
[class*="mindbody"] p,
[class*="mindbody"] span,
[class*="mindbody"] div,
[class*="mindbody"] li,
[class*="mbo"] p,
[class*="mbo"] span,
[class*="mbo"] div,
[class*="mbo"] li {
    font-family: 'Space Mono', 'Neue Montreal', monospace !important;
    font-weight: 400 !important;
}

/* Mindbody Buttons */
.mindbody-widget button,
.mindbody-widget .btn,
.mindbody-widget input[type="button"],
.mindbody-widget input[type="submit"],
[class*="mindbody"] button,
[class*="mindbody"] .btn,
[class*="mbo"] button,
[class*="mbo"] .btn {
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 500 !important;
}

/* Mindbody Form Inputs */
.mindbody-widget input,
.mindbody-widget textarea,
.mindbody-widget select,
[class*="mindbody"] input,
[class*="mindbody"] textarea,
[class*="mindbody"] select,
[class*="mbo"] input,
[class*="mbo"] textarea,
[class*="mbo"] select {
    font-family: 'Space Mono', 'Neue Montreal', monospace !important;
}

/* Mindbody Links */
.mindbody-widget a,
[class*="mindbody"] a,
[class*="mbo"] a {
    font-family: 'Neue Montreal', sans-serif !important;
}

/* Apply to iframe content if Mindbody uses iframe */
.mindbody-widget iframe {
    font-family: 'Space Mono', 'Neue Montreal', monospace !important;
}

/* Additional specificity for dynamically loaded content */
body .mindbody-widget,
body [class*="mindbody"],
body [class*="mbo"] {
    font-family: 'Space Mono', 'Neue Montreal', monospace !important;
}

/* Override any inline styles that might be applied */
.mindbody-widget [style*="font-family"],
[class*="mindbody"] [style*="font-family"],
[class*="mbo"] [style*="font-family"] {
    font-family: 'Space Mono', 'Neue Montreal', monospace !important;
}

/* Mindbody Widget Container Styling */
.mindbody-widget {
    width: 100%;
    min-height: 400px;
    margin: 2rem 0;
}

/* Ensure widget content is properly contained */
.mindbody-widget iframe {
    width: 100% !important;
    min-height: 600px;
    border: none;
}

/* Additional brand styling for Mindbody elements */
.mindbody-widget * {
    box-sizing: border-box;
}

/* Final override to ensure hero section text is white - maximum specificity */
.services-main .services-hero-section .services-hero-content .container .row .col-lg-9 h1.services-hero-title,
.services-main .services-hero-section .services-hero-content .container .row .col-lg-9 p.services-hero-subtitle,
.services-hero-section .services-hero-content h1.services-hero-title,
.services-hero-section .services-hero-content p.services-hero-subtitle {
    color: #ffffff !important;
}

.services-main .services-hero-section .services-hero-content .container .row .col-lg-9 p.services-hero-subtitle,
.services-hero-section .services-hero-content p.services-hero-subtitle {
    text-transform: none !important;
}

/* Floating WhatsApp Button - WhatsApp Brand Color */
.whatsapp-float {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 60px !important;
    height: 60px !important;
    background-color: #25D366 !important; /* WhatsApp brand green */
    color: #ffffff !important; /* White icon */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 48px !important;
    z-index: 9999 !important;
    transition: all 0.3s ease;
    text-decoration: none !important;
    animation: pulse 2s infinite;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

.whatsapp-float:hover {
    transform: translateY(-5px) scale(1.15) !important;
    background-color: #20BA5A !important; /* Darker green on hover */
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

.whatsapp-float:active {
    transform: translateY(-3px) scale(1.08);
}

/* Pulse animation for WhatsApp button */
@keyframes pulse {
    0% {
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    }
    50% {
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4), 0 0 0 12px rgba(37, 211, 102, 0.2);
    }
    100% {
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    }
}

/* Responsive adjustments for WhatsApp button */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 55px;
        height: 55px;
        bottom: 20px;
        right: 20px;
        font-size: 42px;
    }
}

/* FINAL OVERRIDE - Header Container Max-Width 1820px - Must be at end of file */
/* This rule uses maximum specificity to override Bootstrap's container max-width */
body header.navbar.navbar-expand-lg.navbar-dark.fixed-top > div.container,
body header.navbar > div.container,
body header > div.container,
header .header-container-custom,
header .container.header-container-custom,
body header .header-container-custom {
    max-width: 1820px !important;
    width: 100% !important;
}

@media (min-width: 1400px) {
    body header.navbar.navbar-expand-lg.navbar-dark.fixed-top > div.container,
    body header.navbar > div.container,
    body header > div.container,
    header .header-container-custom,
    header .container.header-container-custom,
    body header .header-container-custom {
        max-width: 1820px !important;
        width: 100% !important;
    }
}