:root {
    /* Color Palette - Premium Corporate Dark */
    --bg-root: #0b0b0b;
    --bg-surface: #141414;
    --bg-surface-hover: #1f1f1f;

    --primary: #C5A059;
    /* Muted Gold */
    --primary-hover: #D4AF37;
    --accent: #2C3E50;
    /* Deep Blue-Grey */

    --text-main: #FFFFFF;
    --text-secondary: #A0A0A0;
    --text-tertiary: #666666;

    --border-light: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(197, 160, 89, 0.4);

    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Mulish', sans-serif;

    /* Spacing */
    --gap-sm: 1rem;
    --gap-md: 2rem;
    --gap-lg: 4rem;
    --gap-xl: 8rem;

    /* Dimensions */
    --container: 1280px;
    --radius: 2px;
    /* Sharper, more professional corners */

    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Base Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--bg-root);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* Typography Utilities */
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--text-main);
    line-height: 1.2;
}

.text-gold {
    color: var(--primary);
}

.italic-serif {
    font-style: italic;
    font-weight: 400;
}

.section-tag {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary);
    margin-bottom: 1rem;
    font-weight: 600;
}

.section-title {
    font-size: 3.5rem;
    margin-bottom: 2rem;
}

.lead-text {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-weight: 300;
}

p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

img {
    max-width: 100%;
    display: block;
}

/* Layout Utilities */
.container {
    width: 90%;
    max-width: var(--container);
    margin: 0 auto;
}

.bg-surface {
    background-color: var(--bg-surface);
}

.center {
    text-align: center;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
    border-radius: var(--radius);
}

.btn-primary {
    background-color: var(--primary);
    color: #000;
}

.btn-primary:hover {
    background-color: #fff;
    color: #000;
}

.btn-outline {
    border-color: #fff;
    color: #fff;
    background: transparent;
}

.btn-outline:hover {
    background: #fff;
    color: #000;
}

.btn-lg {
    padding: 18px 40px;
    font-size: 1rem;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px 0;
    z-index: 1000;
    background: rgba(11, 11, 11, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-light);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 60px;
    width: auto;
}

.footer-logo {
    height: 50px;
    width: auto;
    margin-bottom: 1.5rem;
    display: block;
}

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

.nav-links {
    display: flex;
    gap: 2.5rem;
}

.nav-links a {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.nav-links a:hover {
    color: var(--primary);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

.mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg-root);
    border-bottom: 1px solid var(--border-light);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transform: translateY(-150%);
    transition: var(--transition);
    z-index: 999;
}

.mobile-menu.active {
    transform: translateY(0);
}

/* Hero Slider */
.hero {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.slider-container,
.slide {
    height: 100%;
    width: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    z-index: 1;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

.slide-content {
    max-width: 800px;
    position: relative;
    z-index: 3;
    padding-top: 5vh;
}

.eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
    border-left: 2px solid var(--primary);
    padding-left: 1rem;
}

.slide-content h1 {
    font-size: 4.5rem;
    margin-bottom: 2rem;
}

.hero-desc {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin-bottom: 3rem;
}

.btn-group {
    display: flex;
    gap: 1.5rem;
}

.slider-controls {
    position: absolute;
    bottom: 3rem;
    right: 5%;
    z-index: 10;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.slider-controls button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: var(--transition);
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-controls button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.slider-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 8px;
    /* Smaller, more refined */
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}

.dot.active {
    background: var(--primary);
}

/* Sections General */
section {
    padding: var(--gap-xl) 0;
}

/* Intro / About */
.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.signature-block {
    margin-top: 3rem;
    border-top: 1px solid var(--border-light);
    padding-top: 2rem;
}

.stat-row {
    display: flex;
    gap: 3rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-num {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--primary);
}

.stat-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.intro-image {
    position: relative;
}

.intro-image img {
    border-radius: var(--radius);
    filter: brightness(0.9);
}

.floating-badge {
    position: absolute;
    bottom: -30px;
    left: -30px;
    background: var(--bg-surface);
    padding: 2rem;
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.floating-badge i {
    font-size: 2.5rem;
    color: var(--primary);
}

.floating-badge span {
    font-weight: 600;
    line-height: 1.2;
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* Detailed Services - Cards */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 2rem;
}

.service-card-lg {
    background: var(--bg-root);
    border: 1px solid var(--border-light);
    height: 100%;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.service-card-lg:hover {
    border-color: var(--border-hover);
    transform: translateY(-5px);
}

.card-image {
    height: 240px;
    width: 100%;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--border-light);
}

.card-content {
    padding: 2.5rem;
    flex-grow: 1;
}

.icon-lg {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    display: block;
}

.card-content h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.service-list {
    margin-top: 2rem;
    list-style: none;
}

.service-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.service-list li i {
    color: var(--primary);
    font-size: 1.1rem;
}

/* Process Steps */
.process-section {
    border-bottom: 1px solid var(--border-light);
}

.split-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-bottom: 5rem;
    align-items: end;
}

.header-desc {
    font-size: 1.1rem;
    padding-bottom: 0.5rem;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    counter-reset: steps;
}

.step-card {
    position: relative;
    padding-top: 2rem;
}

.step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--border-light);
}

.step-card:hover::before {
    background: var(--primary);
    transition: width 0.3s ease;
}

.step-index {
    font-size: 3rem;
    font-family: var(--font-heading);
    color: rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
}

.step-card:hover .step-index {
    color: var(--primary);
}

/* Features Grid */
.features-grid-classic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1px;
    /* Grid lines effect */
    background: var(--border-light);
    border: 1px solid var(--border-light);
}

.feature-box {
    background: var(--bg-surface);
    padding: 3rem 2rem;
    text-align: center;
    transition: var(--transition);
}

.feature-box:hover {
    background: var(--bg-surface-hover);
}

.feature-box i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.feature-box h4 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

/* Resources Downloads */
.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.dl-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--bg-surface);
    padding: 1.5rem;
    border: 1px solid var(--border-light);
    transition: var(--transition);
}

.dl-card:hover {
    border-color: var(--primary);
    background: var(--bg-surface-hover);
}

.dl-icon {
    font-size: 2rem;
    color: var(--text-tertiary);
}

.dl-card:hover .dl-icon {
    color: #fff;
}

.dl-content {
    flex-grow: 1;
}

.dl-content h5 {
    font-size: 1rem;
    font-family: var(--font-body);
    font-weight: 700;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.dl-content .meta {
    font-size: 0.75rem;
    text-transform: uppercase;
    margin: 0;
}

.dl-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: var(--primary);
}

.dl-card:hover .dl-btn {
    background: var(--primary);
    color: #000;
}

/* Testimonials Scroller */
.reviews-scroller {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding-bottom: 2rem;
    scrollbar-width: none;
}

.review-card {
    min-width: 400px;
    background: var(--bg-root);
    border: 1px solid var(--border-light);
    padding: 3rem;
}

.stars {
    color: var(--primary);
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
}

.review-text {
    font-style: italic;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: #fff;
}

.reviewer strong {
    display: block;
    color: var(--text-main);
    font-size: 0.95rem;
}

.reviewer span {
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

/* Final CTA */
.final-cta {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1513694203232-719a280e022f?q=80&w=2000');
    background-size: cover;
    background-attachment: fixed;
    text-align: center;
    padding: 120px 0;
}

/* Footer */
.main-footer {
    border-top: 1px solid var(--border-light);
    padding-top: 5rem;
    background: #050505;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.brand-col h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.tagline {
    margin-bottom: 2rem;
    color: var(--primary);
    font-size: 0.9rem;
}

.footer-contacts a {
    display: block;
    margin-bottom: 0.5rem;
}

.footer-col h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer-col ul li {
    list-style: none;
    margin-bottom: 0.8rem;
}

.footer-col ul li a:hover {
    padding-left: 5px;
    color: var(--primary);
}

.sm-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sm-form input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-light);
    padding: 12px;
    color: #fff;
    font-family: inherit;
}

.sm-form button {
    background: var(--primary);
    border: none;
    padding: 12px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.footer-bottom {
    border-top: 1px solid var(--border-light);
    padding: 2rem 0;
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

.social-links {
    display: flex;
    gap: 1rem;
    font-size: 1.2rem;
}

/* Mobile Responsive */
@media (max-width: 992px) {

    .nav-links,
    .nav-btn {
        display: none;
    }

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

    .intro-grid,
    .split-header {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .process-steps {
        grid-template-columns: 1fr 1fr;
    }

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

    .slide-content h1 {
        font-size: 3rem;
    }

    .floating-badge {
        position: relative;
        bottom: 0;
        left: 0;
        margin-top: -2rem;
        display: inline-flex;
    }
}

@media (max-width: 600px) {
    .process-steps {
        grid-template-columns: 1fr;
    }

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

    .review-card {
        min-width: 100%;
    }
}

@import url('style.css');
/* Ensuring content is appended or this file is used as update target, but I will use append logic if I could. Since I have to overwrite or replace, I will read and append. */

/* Vision & Mission Section */
.vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.vision-card {
    background: var(--bg-surface);
    padding: 3rem;
    border: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.vision-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.vision-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
    transform: scaleY(0);
    transition: transform 0.4s ease;
    transform-origin: bottom;
}

.vision-card:hover::before {
    transform: scaleY(1);
}

.vision-icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.vision-card h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.vision-card p {
    color: var(--text-secondary);
    line-height: 1.8;
}

/* Portfolio / Our Works Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.portfolio-item {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--radius);
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-cat {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.portfolio-overlay h4 {
    font-size: 1.25rem;
    color: #fff;
}

/* Responsive adjust for Vision */
@media (max-width: 768px) {
    .vision-grid {
        grid-template-columns: 1fr;
    }
}

@import url('style.css');
/* Ensuring content is appended or this file is used as update target, but I will use append logic if I could. Since I have to overwrite or replace, I will read and append. */

/* Vision & Mission Section */
.vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.vision-card {
    background: var(--bg-surface);
    padding: 3rem;
    border: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.vision-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.vision-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
    transform: scaleY(0);
    transition: transform 0.4s ease;
    transform-origin: bottom;
}

.vision-card:hover::before {
    transform: scaleY(1);
}

.vision-icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.vision-card h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.vision-card p {
    color: var(--text-secondary);
    line-height: 1.8;
}

/* Portfolio / Our Works Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.portfolio-item {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--radius);
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-cat {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.portfolio-overlay h4 {
    font-size: 1.25rem;
    color: #fff;
}

/* Responsive adjust for Vision */
@media (max-width: 768px) {
    .vision-grid {
        grid-template-columns: 1fr;
    }
}

/* FAQ Section Styles */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

.faq-item {
    background: var(--bg-surface);
    padding: 2.5rem;
    border: 1px solid var(--border-light);
    transition: var(--transition);
}

.faq-item:hover {
    border-color: var(--primary);
    background: var(--bg-surface-hover);
}

.faq-item h4 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.faq-item p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}

/* Light Mode Theme Overrides */
body.light-mode {
    --bg-root: #ffffff;
    --bg-surface: #f9f9f9;
    --bg-surface-hover: #eeeeee;

    --text-main: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-tertiary: #666666;

    --border-light: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(197, 160, 89, 0.6);
}

/* Specific component overrides for Light Mode */
body.light-mode .navbar {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-mode .logo {
    color: #1a1a1a;
}

body.light-mode .nav-links a {
    color: rgba(0, 0, 0, 0.7);
}

body.light-mode .nav-links a:hover {
    color: var(--primary);
}

body.light-mode .mobile-menu {
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-mode .mobile-menu-btn {
    color: #1a1a1a;
}

/* Ensure text on image backgrounds stays light */
body.light-mode .hero h1,
body.light-mode .hero p,
body.light-mode .hero .eyebrow,
body.light-mode .final-cta h2,
body.light-mode .final-cta p,
body.light-mode .review-text,
body.light-mode .footer-links h4,
body.light-mode .review-card {
    /* Review card has dark background in design usually, or we need to check if it uses bg-root */
}

/* Fix for footer to keep it dark or adapt */
body.light-mode .main-footer {
    background: #111;
    /* Keep footer dark for contrast style */
    color: #fff;
    --text-main: #ffffff;
    --text-secondary: #a0a0a0;
    --text-tertiary: #666666;
    --border-light: rgba(255, 255, 255, 0.1);
}

body.light-mode .main-footer h3,
body.light-mode .main-footer h4 {
    color: #ffffff;
}

/* Toggle Switch Styles */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-main);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 15px;
    transition: var(--transition);
    font-size: 1.2rem;
}

.theme-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-surface-hover);
}

@media (max-width: 992px) {
    .theme-toggle {
        margin-right: 15px;
        /* Adjust for mobile header layout */
    }
}

/* Preloader Styles */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-root);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
}

#preloader img {
    width: 100px;
    height: auto;
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

body.loaded #preloader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Responsive Header Adjustments */
.navbar {
    padding: 15px 0;
    /* Reduced top/bottom padding */
}

.logo img {
    height: 45px;
    /* Reduced from 60px */
}

.nav-links {
    gap: 1.5rem;
    /* Reduced from 2.5rem */
}

.nav-links a {
    font-size: 0.75rem;
    /* Reduced from 0.85rem */
    letter-spacing: 0.5px;
}

/* Navbar Button adjustments */
.navbar .btn {
    padding: 10px 20px;
    /* Smaller button padding */
    font-size: 0.8rem;
}

/* New breakpoint for tighter spacing before mobile menu kicks in */
@media (max-width: 1100px) {
    .nav-links {
        gap: 1rem;
    }

    .nav-links a {
        font-size: 0.7rem;
    }
}

/* Ensure Logo and toggles align well on mobile */
@media (max-width: 992px) {
    .navbar .btn.nav-btn {
        display: none;
        /* Hide CTA button on mobile header to save space, relies on mobile menu if present? Actually let's keep it or move it? Usually mobile headers are tight. Let's see... the previous code hides .nav-btn on 992px. */
    }

    .logo img {
        height: 40px;
    }

    .theme-toggle {
        width: 35px;
        height: 35px;
        font-size: 1rem;
        margin-left: auto;
        /* Push to right */
        margin-right: 10px;
    }
}

/* Strict Text Coloring for Image Sections */
body.light-mode .hero h1,
body.light-mode .hero p,
body.light-mode .hero .eyebrow,
body.light-mode .final-cta h2,
body.light-mode .final-cta p {
    color: #ffffff !important;
}

/* Ensure review text is black in light mode */
body.light-mode .review-text {
    color: #1a1a1a !important;
}

/* Ensure review card background in light mode */
body.light-mode .review-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

/* Fix Navbar Links in Light Mode to be distinct */
body.light-mode .nav-links a {
    color: #333333;
    font-weight: 600;
}

body.light-mode .nav-links a:hover {
    color: var(--primary);
}

.text-white {
    color: #ffffff !important;
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
    display: none;
    /* Hidden on desktop by default */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--bg-root);
    border-top: 1px solid var(--border-light);
    z-index: 10000;
    justify-content: space-around;
    padding: 10px 0;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-tertiary);
    font-size: 0.7rem;
    text-decoration: none;
    gap: 5px;
}

.bottom-nav-item i {
    font-size: 1.5rem;
    color: var(--text-main);
    transition: color 0.3s ease;
}

.bottom-nav-item:hover i,
.bottom-nav-item:active i {
    color: var(--primary);
}

/* Specific styling for Light Mode to ensure visibility */
body.light-mode .mobile-bottom-nav {
    background: #ffffff;
    border-top: 1px solid #e0e0e0;
}

body.light-mode .bottom-nav-item i {
    color: #333;
}

body.light-mode .bottom-nav-item span {
    color: #555;
    font-weight: 500;
}

/* Visibility breakpoint */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }

    /* Add padding to body or footer so content isn't hidden behind nav */
    body {
        padding-bottom: 60px;
    }
}

/* Copy Protection */
body {
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard */
}

/* Allow selection on input fields so forms still work */
input,
textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

img {
    pointer-events: none;
    /* Disables right-click/drag on images (simple method) */
}

/* Map Section - Unified & Robust */
.map-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    background: #000;
    background: #000;
    /* Fallback */
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

.map-section iframe {
    display: block;
    width: 100%;
    height: 500px;
    /* Default Desktop Height */
    border: 0;
    /* Premium Dark Mode Filter */
    filter: grayscale(100%) invert(92%) contrast(83%);
    transition: filter 0.5s ease;
}

/* Overlay for styling */
.map-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(197, 160, 89, 0.05);
    /* Gold tint */
    pointer-events: none;
}

/* Light Mode Overrides */
body.light-mode .map-section iframe {
    filter: grayscale(20%) contrast(105%);
}

body.light-mode .map-section::after {
    display: none;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .map-section iframe {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .map-section iframe {
        height: 350px;
    }
}/* Wide Footer Column */
.footer-col.wide-col {
    grid-column: span 2;
    /* Take up 2 columns in the grid */
}

/* Grid List for Specializations */
.grid-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 2rem;
}

.grid-list li {
    margin-bottom: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .footer-col.wide-col {
        grid-column: span 2;
        /* Keep spanning 2 on tablet */
    }
}

@media (max-width: 600px) {
    .footer-col.wide-col {
        grid-column: span 1;
        /* Stack on mobile */
    }

    .grid-list {
        grid-template-columns: 1fr;
        /* 1 column on mobile */
    }
}