:root {
    --bs-body-font-family: 'Inter', sans-serif;
    --font-heading: 'Playfair Display', serif;
    
    --color-sage-dark: #0f172a;        /* Deep Navy / Slate Dark */
    --color-sage-main: #2563eb;        /* Vibrant Royal Blue */
    --color-sage-light: #eff6ff;       /* Icy Light Blue */
    --color-cream-bg: #f8fafc;         /* Crisp Soft Slate White */
    --color-cream-card: #f1f5f9;       /* Light Blue-Grey Card */
    --color-terracotta: #f97316;       /* Warm Coral Accent */
    --color-terracotta-hover: #ea580c; /* Darker Coral Hover */
    --color-text-dark: #1e293b;        /* Slate Dark Text */
    --color-text-muted: #64748b;       /* Muted Slate Text */
}

body {
    background-color: var(--color-cream-bg);
    color: var(--color-text-dark);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: var(--font-heading);
    color: var(--color-sage-dark);
}

/* Navigation Styling */
.navbar-spa {
    background-color: rgba(248, 250, 252, 0.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(37, 99, 235, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.navbar-brand-title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-sage-dark);
    font-size: 1.6rem;
    line-height: 1;
}

.nav-link-custom {
    color: var(--color-text-muted) !important;
    font-weight: 500;
    padding: 0.6rem 1.1rem !important;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.nav-link-custom:hover, 
.nav-link-custom.active {
    color: var(--color-sage-dark) !important;
    border-bottom-color: var(--color-sage-main);
    font-weight: 600;
}

/* Custom Buttons */
.btn-sage {
    background-color: var(--color-sage-main);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 0.7rem 1.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-sage:hover {
    background-color: var(--color-sage-dark);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

.btn-terracotta {
    background-color: var(--color-terracotta);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 0.7rem 1.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-terracotta:hover {
    background-color: var(--color-terracotta-hover);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
}

.btn-outline-sage {
    border: 2px solid var(--color-sage-main);
    color: var(--color-sage-dark);
    border-radius: 50px;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    background: transparent;
}

.btn-outline-sage:hover {
    background-color: var(--color-sage-main);
    color: #ffffff;
}

/* Hero Banner */
.hero-section {
    background: linear-gradient(rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.85)), 
                url('https://images.unsplash.com/photo-1540555700478-4be289fbecef?auto=format&fit=crop&q=80&w=1800') center/cover no-repeat;
    color: #ffffff;
    padding: 120px 0 100px 0;
    border-radius: 0 0 2.5rem 2.5rem;
}

.hero-section h1 {
    color: #ffffff;
    font-size: 3.5rem;
    line-height: 1.15;
}

/* Cards & Container Modules */
.card-custom {
    background-color: #ffffff;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 1.25rem;
    transition: all 0.35s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.card-custom:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
}

.icon-box {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: var(--color-sage-light);
    color: var(--color-sage-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.badge-nature {
    background-color: var(--color-sage-light);
    color: var(--color-sage-main);
    font-weight: 600;
    padding: 0.5em 1em;
    border-radius: 50px;
    font-size: 0.8rem;
}

.badge-price {
    background-color: var(--color-sage-dark);
    color: #ffffff;
    font-weight: 700;
    padding: 0.4em 0.9em;
    border-radius: 50px;
    font-size: 0.95rem;
}

/* Tab Switcher Display */
.page-view {
    display: none;
    animation: fadeIn 0.4s ease-in-out forwards;
}

.page-view.active {
    display: block;
}

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

/* Filter Pills for Services */
.nav-pills-sage .nav-link {
    color: var(--color-sage-dark);
    background-color: var(--color-cream-card);
    border-radius: 50px;
    padding: 0.6rem 1.4rem;
    font-weight: 500;
    margin: 0.25rem;
    transition: all 0.3s ease;
}

.nav-pills-sage .nav-link.active {
    background-color: var(--color-sage-main);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

/* FAQ Accordion Styling */
.accordion-item-faq {
    border: 1px solid rgba(37, 99, 235, 0.15) !important;
    border-radius: 1rem !important;
    margin-bottom: 1rem;
    overflow: hidden;
    background-color: #ffffff;
}

.accordion-button-faq {
    background-color: #ffffff;
    color: var(--color-sage-dark);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1.2rem 1.5rem;
}

.accordion-button-faq:not(.collapsed) {
    background-color: var(--color-sage-light);
    color: var(--color-sage-main);
    box-shadow: none;
}

.accordion-button-faq:focus {
    box-shadow: none;
}

/* Footer */
footer {
    background-color: var(--color-sage-dark);
    color: #94a3b8;
    margin-top: auto;
}

footer h5 {
    color: #ffffff;
}

footer a {
    color: #cbd5e1;
    text-decoration: none;
    transition: all 0.2s ease;
}

footer a:hover {
    color: #ffffff;
}

/* Toast Position */
.toast-container {
    z-index: 1090;
}