@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Playfair+Display:wght@700;900&display=swap');

/* style.css - Comprehensive Responsive Design System with CSS Variables */

/* ========================
   Design Token Definitions
   ======================== */
:root {
    /* New Color Palette - Vastu & Rishikesh Inspired Redesign */
    --color-primary-main: #5a4a3a;
    /* Deep Earth Brown */
    --color-secondary-main: #3c6e71;
    /* Sacred River Teal */
    --color-accent-main: #d4a373;
    /* Sunlit Clay */
    --color-background-main: #f5efe3;
    /* Warm Sand Beige */
    --color-text-body: #42382f;
    /* Darker Earth Brown for body text */
    --color-text-on-dark: #fdfaf5;
    /* Warm off-white for text on dark BGs */
    --color-text-on-light: var(--color-text-body);
    /* Default text on light BGs */
    --color-border-subtle: #e0d8cc;
    /* Softer border from Warm Sand Beige */

    /* Retaining some original specific colors if they are still needed or for gradual transition */
    --color-surface: #FFFFFF;
    /* Review: Consider changing to a tint of --color-background-main e.g. #fbf6ef */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-semi-transparent-dark: rgba(0, 0, 0, 0.6);
    /* Keeping old variables for now, for elements not yet refactored */
    --color-primary: #4A90E2;
    /* Old - for compatibility during transition */
    --color-primary-hover: #357ABD;
    /* Old - for compatibility */
    --color-accent-gold: #B8860B;
    /* Old - for compatibility */
    --color-accent-gold-light: #D4AF37;
    /* Old - for compatibility */
    --color-earthy-brown: #8B4513;
    /* Old - for compatibility */
    --color-heading: #2C3E50;
    /* Old - for compatibility */
    --color-text: #333333;
    /* Old - for compatibility */
    --color-border: rgba(0, 0, 0, 0.1);
    /* Old - for compatibility */


    /* Typography - Updated Font Families */
    --font-family-heading: 'Garamond', 'Cormorant Garamond', 'EB Garamond', serif;
    /* Prioritized list */
    --font-family-body: 'Lato', 'Open Sans', sans-serif;
    /* Prioritized list */
    --font-size-base: 16px;
    /* Base font size for better readability */
    --font-size-small: 0.875rem;
    /* 14px */
    --font-size-medium: 1rem;
    /* 16px */
    --font-size-large: 1.25rem;
    /* 20px */
    --font-size-xl: 1.75rem;
    /* 28px */
    --font-size-xxl: 2.5rem;
    /* 40px */
    --font-size-xxxl: 3.5rem;
    /* 56px */

    --line-height-base: 1.6;
    --line-height-heading: 1.3;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 900;


    /* Spacing System (adjust as needed, adding more steps) */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-100: 100px;

    /* Border Radius */
    --radius-small: 4px;
    --radius-soft: 6px;
    /* Adjusted for new design */
    --radius-medium: 12px;
    --radius-large: 16px;
    --radius-circle: 50%;

    /* Shadows - Soft and Modern */
    --shadow-gentle: 0 3px 6px rgba(90, 74, 58, 0.1);
    /* New shadow with brown tint */
    --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.07);
    --shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-strong: 0 8px 25px rgba(0, 0, 0, 0.12);
    /* --shadow-glow-gold: 0 0 15px 3px var(--color-accent-gold-light); Old, replace with new accent if needed */
    --shadow-glow-accent: 0 0 15px 3px var(--color-accent-main);


    /* Transitions */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

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

html {
    font-size: var(--font-size-base);
    font-family: var(--font-family-body);
    /* Will be Lato from :root */
    line-height: var(--line-height-base);
    color: var(--color-text-body);
    /* New: #42382f */
    background-color: var(--color-background-main);
    /* New: #f5efe3 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    /* Smooth scrolling for anchor links */
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-heading);
    /* Will be Garamond from :root */
    color: var(--color-primary-main);
    /* New: #5a4a3a */
    margin-bottom: var(--space-24);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-bold);
}

h1 {
    font-size: var(--font-size-xxxl);
}

h2 {
    font-size: var(--font-size-xxl);
}

h3 {
    font-size: var(--font-size-xl);
}

h4 {
    font-size: var(--font-size-large);
}

p {
    margin-bottom: var(--space-16);
    max-width: 75ch;
}

a {
    color: var(--color-secondary-main);
    /* New: #3c6e71 Sacred River Teal */
    text-decoration: none;
    transition: color var(--duration-normal) var(--ease-out-quad);
}

a:hover {
    color: var(--color-accent-main);
    /* New: #d4a373 Sunlit Clay */
    text-decoration: underline;
}

ul,
ol {
    margin-bottom: var(--space-16);
    padding-left: var(--space-32);
}

li {
    margin-bottom: var(--space-8);
}

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

/* ========================
   Component Styles
   ======================== */
/* Navigation */
.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: var(--color-background-main);
    /* New: Warm Sand Beige #f5efe3 */
    /* Consider removing backdrop-filter if background is opaque, or use a semi-transparent version of background-main */
    /* backdrop-filter: blur(10px); */
    /* -webkit-backdrop-filter: blur(10px); */
    border-bottom: 1px solid var(--color-border-subtle);
    /* New: #e0d8cc */
    box-shadow: var(--shadow-gentle);
    /* New shadow */
    z-index: 1000;
    transition: background-color var(--duration-normal) var(--ease-out-quad), box-shadow var(--duration-normal) var(--ease-out-quad);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-16) var(--space-32);
}

.nav-brand {
    display: flex;
    align-items: center;
}

.nav-brand #nav-logo {
    height: 50px;
    /* Adjust as needed */
    width: auto;
    margin-right: 10px;
    /* Add some space between logo and name/tagline */
}

#nav-name-tagline {
    height: 40px;
    /* Adjust as needed, should be proportional to the logo */
    width: auto;
}

.nav-brand h2 {
    color: var(--color-primary-main);
    /* New: Deep Earth Brown #5a4a3a */
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
}

.nav-links {
    display: flex;
    gap: var(--space-32);
    list-style: none;
}

.nav-link {
    color: var(--color-primary-main);
    /* New: Deep Earth Brown #5a4a3a */
    text-decoration: none;
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-soft);
    /* Uses updated 6px */
    font-weight: var(--font-weight-bold);
    position: relative;
    transition: color var(--duration-normal) var(--ease-out-quad);
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-accent-main);
    /* New: Sunlit Clay #d4a373 */
    transition: width var(--duration-normal) var(--ease-out-quad);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-secondary-main);
    /* New: Sacred River Teal #3c6e71 */
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Mobile Navigation Toggle */
.nav-toggle {
    display: none;
    /* Hidden by default, shown in media query */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-8);
    z-index: 1010;
    /* Above navbar content */
}

.hamburger-icon {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--color-primary-main);
    position: relative;
    transition: transform var(--duration-normal) var(--ease-in-out-sine), background-color var(--duration-normal) var(--ease-in-out-sine);
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-primary-main);
    transition: transform var(--duration-normal) var(--ease-in-out-sine), top var(--duration-normal) var(--ease-in-out-sine), bottom var(--duration-normal) var(--ease-in-out-sine);
}

.hamburger-icon::before {
    top: -8px;
}

.hamburger-icon::after {
    bottom: -8px;
}

/* Active state for hamburger icon (X shape) */
.nav-toggle.active .hamburger-icon {
    background-color: transparent;
    /* Middle bar disappears */
}

.nav-toggle.active .hamburger-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.nav-toggle.active .hamburger-icon::after {
    bottom: 0;
    transform: rotate(-45deg);
}


/* Hero Section - General styles, will be specialized for about page */
/* TODO: Update Hero gradient and text colors to align with new palette */
.hero {
    padding: var(--space-64) 0;
    background: linear-gradient(135deg, var(--color-secondary-main), var(--color-accent-main));
    /* Teal to Clay gradient */
    color: var(--color-text-on-dark);
    /* Warm off-white text */
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-24);
}

@media (min-width: 768px) {
    .hero .container {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

.hero-content h1 {
    font-size: var(--font-size-xxxl);
    margin-bottom: var(--space-24);
    font-weight: var(--font-weight-extra-bold);
    color: var(--color-text-on-dark);
    /* Ensure contrast on new gradient */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.hero-buttons {
    display: flex;
    gap: var(--space-16);
    margin-top: var(--space-24);
}

/* Services Grid */
.services-grid {
    display: grid;
    gap: var(--space-24);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: var(--space-32);
}

.service-card {
    background: var(--color-surface);
    /* Review: consider a tint of --color-background-main */
    padding: var(--space-32);
    border-radius: var(--radius-medium);
    border: 1px solid var(--color-border-subtle);
    /* New border */
    transition: transform var(--duration-normal) var(--ease-out-quad), box-shadow var(--duration-normal) var(--ease-out-quad);
    box-shadow: var(--shadow-gentle);
    /* New shadow */
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);
    /* Keep or adjust */
}

/* Contact Form */
.contact-form {
    display: grid;
    gap: var(--space-16);
    max-width: 600px;
    margin: 0 auto;
}

.form-control {
    width: 100%;
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--color-border-subtle);
    /* New border */
    border-radius: var(--radius-soft);
    /* Uses updated 6px */
    background: var(--color-surface);
    /* Review: consider a tint of --color-background-main */
    font-family: var(--font-family-body);
    font-size: var(--font-size-medium);
    color: var(--color-text-body);
    transition: border-color var(--duration-normal) var(--ease-out-quad), box-shadow var(--duration-normal) var(--ease-out-quad);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-secondary-main);
    /* Teal focus */
    box-shadow: 0 0 0 3px rgba(var(--color-secondary-main), 0.2);
}

/* ========================
   Utility Classes
   ======================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-32);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-32);
    border-radius: var(--radius-soft);
    /* Updated to use --radius-soft (6px) */
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out-quad);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-medium);
    box-shadow: var(--shadow-gentle);
    user-select: none;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary {
    /* Main CTA */
    background-color: var(--color-secondary-main);
    /* Teal: #3c6e71 */
    color: var(--color-text-on-dark);
    /* Warm off-white: #fdfaf5 */
}

.btn-primary:hover {
    background-color: #2e5a5c;
    /* Darker Teal */
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

/* New Accent Button Style */
.btn-accent {
    background-color: var(--color-accent-main);
    /* Sunlit Clay: #d4a373 */
    color: var(--color-primary-main);
    /* Brown text: #5a4a3a */
}

.btn-accent:hover {
    background-color: #c89361;
    /* Darker Clay */
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

/* Keeping .btn-secondary for now if it's used elsewhere, or it can be removed if .btn-accent replaces its role */
/* If .btn-secondary is to be kept and restyled: */
.btn-secondary {
    background: transparent;
    color: var(--color-secondary-main);
    /* Teal text */
    border: 2px solid var(--color-secondary-main);
    /* Teal border */
}

.btn-secondary:hover {
    background: var(--color-secondary-main);
    /* Teal background */
    color: var(--color-text-on-dark);
    /* Light text */
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}


.text-center {
    text-align: center;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Section Base Styles */
.section {
    padding: var(--space-64) 0;
}

.section-title {
    text-align: center;
    margin-bottom: var(--space-48);
    font-size: var(--font-size-xxl);
    color: var(--color-primary-main);
    /* Updated to new primary */
}

/* ========================
   Responsive Breakpoints
   ======================== */
@media (max-width: 992px) {
    .hero-content h1 {
        font-size: var(--font-size-xxl);
    }

    .section-title {
        font-size: var(--font-size-xl);
    }
}

@media (max-width: 768px) {
    .nav-toggle {
        display: block;
        /* Show hamburger toggle */
    }

    .nav-links {
        /* display: none; */
        /* Original rule, will be overridden by active state */
        position: fixed;
        top: 0;
        left: -100%;
        /* Start off-screen */
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: var(--color-background-main);
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-64) var(--space-32) var(--space-32);
        box-shadow: var(--shadow-medium);
        transition: left var(--duration-normal) var(--ease-in-out-sine);
        z-index: 1005;
        /* Below toggle, above other content */
        overflow-y: auto;
        gap: var(--space-16);
        /* Adjust gap for vertical layout */
    }

    .nav-links.active {
        /* This class would be toggled by JS */
        left: 0;
        /* Slide in */
    }

    .nav-link {
        width: 100%;
        padding: var(--space-12) var(--space-16);
        font-size: var(--font-size-large);
    }

    .nav-link::after {
        /* Adjust underline for vertical mobile nav */
        bottom: 0;
        height: 3px;
        left: var(--space-16);
        transform: translateX(0);
        background-color: var(--color-accent-main);
    }

    .nav-link:hover::after,
    .nav-link.active::after {
        width: calc(100% - (2 * var(--space-16)));
        /* Adjust width considering padding */
    }

    .navbar .container {
        padding: var(--space-12) var(--space-16);
    }

    .nav-brand h2 {
        font-size: var(--font-size-medium);
    }

    h1 {
        font-size: var(--font-size-xxl);
    }

    h2 {
        font-size: var(--font-size-xl);
    }

    h3 {
        font-size: var(--font-size-large);
    }

    .hero-content h1 {
        font-size: var(--font-size-xl);
    }

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

    .container {
        padding: 0 var(--space-16);
    }

    .section {
        padding: var(--space-48) 0;
    }

    .section-title {
        font-size: var(--font-size-large);
        margin-bottom: var(--space-32);
    }
}

/* ========================
   Footer Styles
   ======================== */
.footer {
    background: var(--color-primary-main);
    /* Deep Earth Brown */
    color: var(--color-text-on-dark);
    /* Warm off-white */
    padding: var(--space-48) 0;
    margin-top: auto;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-16);
}

#footer-tagline-img {
    max-height: 80px;
    /* Adjust as needed */
    margin-bottom: var(--space-16);
}

.footer p {
    margin-bottom: var(--space-8);
    color: var(--color-text-on-dark);
    opacity: 0.9;
}

.footer .tagline {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-large);
    color: var(--color-accent-main);
    /* Sunlit Clay */
    margin-bottom: var(--space-24);
    font-style: italic;
}

/* Animation Classes (Placeholder - will be defined later) */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-slow) var(--ease-out-quad), transform var(--duration-slow) var(--ease-out-quad);
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================
   Blog Page Styles
   ======================== */
.blog-posts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-32);
    margin-top: var(--space-32);
}

.blog-post-card {
    background-color: var(--color-surface);
    /* Review */
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-gentle);
    /* New shadow */
    border: 1px solid var(--color-border-subtle);
    /* New border */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--duration-normal) var(--ease-out-quad), box-shadow var(--duration-normal) var(--ease-out-quad);
}

.blog-post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.blog-post-card-content {
    padding: var(--space-24);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-post-card-title {
    font-size: var(--font-size-xl);
    color: var(--color-primary-main);
    /* Updated */
    margin-bottom: var(--space-12);
}

.blog-post-card-excerpt {
    font-size: var(--font-size-medium);
    color: var(--color-text-body);
    /* Updated */
    line-height: 1.7;
    margin-bottom: var(--space-24);
    flex-grow: 1;
}

.blog-post-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

/* Individual Blog Post Page Styles */
.blog-post {
    background-color: var(--color-surface);
    /* Review */
    padding: var(--space-32);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-gentle);
    /* New shadow */
    border: 1px solid var(--color-border-subtle);
    /* New border */
}

.blog-post-title {
    font-size: var(--font-size-xxxl);
    color: var(--color-primary-main);
    /* Updated */
    margin-bottom: var(--space-8);
}

.blog-post-meta {
    font-size: var(--font-size-small);
    color: var(--color-secondary-main);
    /* Teal for meta */
    margin-bottom: var(--space-32);
    font-style: italic;
}

.blog-post img {
    border-radius: var(--radius-soft);
    /* Uses updated 6px */
    margin-bottom: var(--space-24);
    box-shadow: var(--shadow-subtle);
}

.blog-post h2 {
    font-size: var(--font-size-xl);
    color: var(--color-primary-main);
    /* Updated */
    margin-top: var(--space-32);
    margin-bottom: var(--space-16);
}

.blog-post ul {
    list-style-type: disc;
    padding-left: var(--space-48);
}


/* ========================
   About Page Hero Section
   ======================== */
.hero-about {
    background: linear-gradient(135deg, var(--color-primary-main), var(--color-accent-main));
    /* Brown to Clay gradient */
    color: var(--color-text-on-dark);
    padding: var(--space-80) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-about::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background-image: radial-gradient(circle, rgba(253, 250, 245, 0.05) 1px, transparent 1px),
        /* Using --color-text-on-dark with low alpha */
        radial-gradient(circle, rgba(253, 250, 245, 0.03) 1px, transparent 1px);
    background-size: 30px 30px, 50px 50px;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0.5;
    z-index: 0;
}

.hero-about-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-32);
}

.hero-logo-container {
    margin-bottom: var(--space-16);
}

.hero-logo {
    max-width: 150px;
    height: auto;
    border-radius: var(--radius-circle);
    box-shadow: 0 0 20px rgba(var(--color-text-on-dark-rgb, 253, 250, 245), 0.3), var(--shadow-medium);
    /* Define --color-text-on-dark-rgb or use static values */
}

.hero-text h1 {
    font-size: var(--font-size-xxxl);
    font-weight: var(--font-weight-extra-bold);
    color: var(--color-text-on-dark);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    /* Keep shadow if desired */
    margin-bottom: var(--space-16);
}

.hero-text .subtitle {
    font-size: var(--font-size-large);
    color: var(--color-text-on-dark);
    opacity: 0.9;
    max-width: 70ch;
    margin: 0 auto;
    line-height: 1.7;
}

@media (min-width: 768px) {
    .hero-about {
        padding: var(--space-100) 0;
        text-align: left;
    }

    .hero-about-content {
        flex-direction: row;
        text-align: left;
    }

    .hero-logo-container {
        margin-bottom: 0;
        margin-right: var(--space-48);
    }

    .hero-logo {
        max-width: 200px;
    }

    .hero-text h1 {
        font-size: 3.8rem;
    }

    .hero-text .subtitle {
        margin: 0;
    }
}


/* ========================
   About Page Content Sections
   ======================== */
.about-details .content-block,
.services-overview .content-block {
    background-color: var(--color-surface);
    /* Review */
    padding: var(--space-32);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-gentle);
    /* New shadow */
    border: 1px solid var(--color-border-subtle);
    /* New border */
    margin-bottom: var(--space-32);
}

.about-details .content-block p,
.services-overview .content-block p {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-base);
    color: var(--color-text-body);
    /* Updated */
}

.about-details .content-block strong {
    color: var(--color-secondary-main);
    /* Teal for emphasis */
}

/* Services Grid for About Page */
.services-grid-about {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-32);
    margin-bottom: var(--space-32);
}

.service-card-about {
    background-color: var(--color-surface);
    /* Review */
    padding: var(--space-32);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-gentle);
    /* New shadow */
    border-left: 5px solid var(--color-accent-main);
    /* Sunlit Clay accent */
    transition: transform var(--duration-normal) var(--ease-out-quad), box-shadow var(--duration-normal) var(--ease-out-quad);
}

.service-card-about:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-medium);
}

.service-card-about h3 {
    font-size: var(--font-size-large);
    color: var(--color-primary-main);
    /* Updated */
    margin-bottom: var(--space-16);
}

.service-card-about p {
    font-size: var(--font-size-medium);
    color: var(--color-text-body);
    /* Updated */
    line-height: 1.7;
}


/* ========================
   Testimonials Section - About Page
   ======================== */
.testimonials-section {
    background-color: var(--color-background-main);
    /* Consistent background */
    position: relative;
}

.testimonials-section .section-title {
    color: var(--color-primary-main);
    /* Updated */
    margin-bottom: var(--space-48);
}

.testimonials-wrapper {
    position: relative;
    padding: 0 var(--space-48);
}

.testimonials-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: var(--space-24);
    padding: var(--space-16) 0;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

.testimonials-container::-webkit-scrollbar {
    display: none;
}

.testimonials-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


.testimonial-card {
    flex: 0 0 calc(100% - var(--space-48));
    max-width: 350px;
    min-width: 280px;
    background: var(--color-surface);
    /* Review */
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-medium);
    padding: var(--space-32);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    scroll-snap-align: center;
    transition: transform var(--duration-normal) var(--ease-out-quad), box-shadow var(--duration-normal) var(--ease-out-quad);
    border: 1px solid var(--color-border-subtle);
    /* New border */
}

.testimonial-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: var(--shadow-strong);
}

.testimonial-photo {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    margin-bottom: var(--space-24);
    border: 3px solid var(--color-background-main);
    /* Border matches background */
    box-shadow: 0 0 0 3px var(--color-accent-main), var(--shadow-glow-accent);
    /* Sunlit Clay accent and glow */
}

.testimonial-name {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-8);
    color: var(--color-secondary-main);
    /* Teal for name */
}

.testimonial-feedback {
    font-style: italic;
    color: var(--color-text-body);
    /* Updated */
    font-size: var(--font-size-medium);
    line-height: 1.7;
}

.testimonial-feedback::before,
.testimonial-feedback::after {
    content: '"';
    color: var(--color-accent-main);
    /* Sunlit Clay for quotes */
    font-size: 1.5em;
    line-height: 0;
    position: relative;
    top: 0.2em;
}

.testimonial-feedback::before {
    margin-right: var(--space-4);
}

.testimonial-feedback::after {
    margin-left: var(--space-4);
}


/* Scroll Arrows for Testimonials */
.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-secondary-main);
    /* Teal */
    color: var(--color-text-on-dark);
    /* Light text */
    border: none;
    border-radius: var(--radius-circle);
    width: 48px;
    height: 48px;
    font-size: var(--font-size-xl);
    cursor: pointer;
    opacity: 0.8;
    transition: opacity var(--duration-normal) var(--ease-out-quad), background-color var(--duration-normal) var(--ease-out-quad), transform var(--duration-fast) var(--ease-out-quad);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-gentle);
    /* New shadow */
}

.scroll-arrow:hover {
    opacity: 1;
    background-color: #2e5a5c;
    /* Darker Teal */
    transform: translateY(-50%) scale(1.1);
}

.scroll-arrow.left {
    left: var(--space-12);
}

.scroll-arrow.right {
    right: var(--space-12);
}

@media (min-width: 600px) {
    .testimonial-card {
        flex-basis: calc(50% - var(--space-12) - var(--space-24));
    }
}

@media (min-width: 992px) {
    .testimonial-card {
        flex-basis: calc(33.333% - var(--space-16) - var(--space-24));
    }

    .testimonials-wrapper {
        padding: 0 var(--space-64);
    }

    .scroll-arrow.left {
        left: var(--space-24);
    }

    .scroll-arrow.right {
        right: var(--space-24);
    }
}

/* ========================
   Contact Page Specific Styles
   ======================== */
.contact-page .hero-banner {
    background: linear-gradient(45deg, var(--color-primary-main) 20%, var(--color-secondary-main) 80%);
    /* Brown to Teal */
    padding: var(--space-48) 0;
    text-align: center;
    min-height: 25vh;
    /* Adjusted from original 30vh */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color-text-on-dark);
}

.contact-page #distanceHeader h1,
.contact-page #distanceHeader h2 {
    font-family: var(--font-family-heading);
    color: var(--color-text-on-dark);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    margin: 0.2em 0;
    font-weight: var(--font-weight-bold);
}

.contact-page #distanceHeader h1 {
    font-size: var(--font-size-xxl);
    /* Using global size */
}

.contact-page #distanceHeader h2 {
    font-size: var(--font-size-xl);
    /* Using global size */
}

.contact-page .map-section {
    padding: var(--space-32) 0;
    background-color: var(--color-background-main);
    /* Ensure consistent bg */
}

.contact-page #vastuMap {
    height: 50vh;
    /* Adjusted from original 60vh */
    width: 90%;
    max-width: 1000px;
    border: 3px solid var(--color-primary-main);
    /* Deep Earth Brown border */
    border-radius: var(--radius-medium);
    /* Consistent radius */
    margin: 0 auto;
    box-shadow: var(--shadow-gentle);
    background-color: var(--color-border-subtle);
    /* Light fallback for map bg */
}

.contact-page .contact-details-section {
    padding: var(--space-48) 0;
    background-color: var(--color-background-main);
}

.contact-page .vastu-details-card {
    background-color: var(--color-surface);
    /* Or a tint of background-main */
    /* background-image: url('assets/mandala-pattern.png'); /* Keep if desired, ensure path is correct */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    /* background-size: contain; */
    padding: var(--space-32);
    max-width: 800px;
    width: 90%;
    border-radius: var(--radius-large);
    /* Consistent radius */
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-medium);
    color: var(--color-text-body);
    margin: 0 auto;
}

.contact-page .vastu-details-card h2 {
    /* This is for "VastuRadiance Energy Hub" */
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    /* Adjusted size */
    color: var(--color-primary-main);
    text-align: center;
    margin-bottom: var(--space-24);
}

.contact-page .contact-grid {
    display: grid;
    gap: var(--space-24);
}

.contact-page .contact-column h3 {
    /* This is for "Address", "Phone", "Email" titles */
    font-family: var(--font-family-heading);
    font-size: var(--font-size-large);
    /* Adjusted size */
    color: var(--color-primary-main);
    margin-bottom: var(--space-12);
}

.contact-page .contact-method {
    font-size: var(--font-size-medium);
    margin-bottom: var(--space-12);
    display: flex;
    align-items: center;
    color: var(--color-text-body);
}

.contact-page .contact-method .icon {
    margin-right: var(--space-12);
    color: var(--color-accent-main);
    /* Sunlit Clay for icons */
    font-size: 1.3em;
}

.contact-page .contact-method a {
    color: var(--color-secondary-main);
    /* Teal for links */
    text-decoration: none;
    border-bottom: 1px dotted var(--color-accent-main);
    /* Subtle clay underline */
    transition: color var(--duration-fast) ease, border-bottom-color var(--duration-fast) ease;
    padding-bottom: 2px;
}

.contact-page .contact-method a:hover {
    color: var(--color-accent-main);
    /* Clay on hover */
    border-bottom-color: var(--color-secondary-main);
    /* Teal underline on hover */
}

.contact-page .mantra-display {
    text-align: center;
    margin-top: var(--space-32);
    font-family: var(--font-family-heading);
    /* Garamond */
    font-style: italic;
    color: var(--color-secondary-main);
    /* Teal */
    font-size: var(--font-size-large);
    height: 1.5em;
    /* Prevent layout shift */
    opacity: 1;
    /* Ensure it's visible by default if JS handles fade */
    transition: opacity 0.5s ease-in-out;
}

/* Leaflet Popup Styles to match theme */
.leaflet-popup-content-wrapper {
    font-family: var(--font-family-body) !important;
    /* Lato */
    color: var(--color-text-body) !important;
    /* Dark Earth Brown */
    background-color: var(--color-background-main) !important;
    /* Warm Sand Beige */
    border-radius: var(--radius-soft) !important;
    box-shadow: var(--shadow-gentle) !important;
}

.leaflet-popup-content {
    margin: var(--space-12) !important;
}

.leaflet-popup-content b {
    font-family: var(--font-family-heading) !important;
    /* Garamond */
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-primary-main) !important;
    /* Deep Earth Brown */
}

.leaflet-popup-close-button {
    color: var(--color-text-body) !important;
}

.leaflet-popup-tip {
    background: var(--color-background-main) !important;
}

/* Responsive adjustments for contact page elements if needed */
@media (max-width: 767px) {
    .contact-page .hero-banner {
        min-height: 20vh;
    }

    .contact-page #distanceHeader h1 {
        font-size: var(--font-size-xl);
    }

    .contact-page #distanceHeader h2 {
        font-size: var(--font-size-large);
    }

    .contact-page #vastuMap {
        height: 40vh;
    }

    .contact-page .vastu-details-card {
        padding: var(--space-24);
    }

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