:root {
    --brand: #0f766e;
    --accent: #0ea5a4;
    --muted: #6b7280;
    --indigo-900: #312e81;
}

html,
body {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* =========================================
   Component: Service Cards (Existing + Enhanced)
   ========================================= */
.service-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid transparent;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: rgba(15, 118, 110, 0.3);
    /* Subtle teal border reveal */
}

/* =========================================
   Component: Navigation Links
   ========================================= */
/* Target desktop nav links */
nav.hidden.md\:flex a {
    position: relative;
    transition: color 0.3s ease;
}

/* Animated Underline Effect */
nav.hidden.md\:flex a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    background-color: var(--brand);
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
}

nav.hidden.md\:flex a:hover::after {
    width: 80%;
}

/* =========================================
   Component: Buttons & Interactive Elements
   ========================================= */
/* General rule for all button-like links/buttons in main content */
a[class*="bg-"],
button[class*="bg-"] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Hover Lift & Glow */
a[class*="bg-"]:hover,
button[class*="bg-"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(14, 165, 164, 0.3);
    /* Teal tinted shadow */
    filter: brightness(1.1);
}

/* Active Press effect */
a[class*="bg-"]:active,
button[class*="bg-"]:active {
    transform: translateY(0);
}

/* Specific styling for the primary "Book Appointment" button to stand out */
nav a[href="#contact"].bg-teal-600 {
    box-shadow: 0 4px 6px -1px rgba(13, 148, 136, 0.4);
}

nav a[href="#contact"].bg-teal-600:hover {
    box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.5);
}

/* =========================================
   Text & Headings
   ========================================= */
h1,
h2,
h3 {
    transition: color 0.3s ease;
}

h1:hover,
h2:hover,
h3:hover {
    color: var(--brand);
    /* Shift to brand color on hover */
    cursor: default;
}

/* Hero Heading Special Touch */
.hero-heading span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.hero-heading:hover span {
    transform: rotate(10deg) scale(1.2);
}

/* =========================================
   Utilities / Accessibility
   ========================================= */
/* focus-visible style for accessibility */
:focus-visible {
    outline: 3px solid rgba(14, 165, 164, .18);
    outline-offset: 3px;
}

/* small-screen heading tuning */
@media (max-width:420px) {
    .hero-heading {
        font-size: 1.5rem;
        line-height: 1.15;
    }
}

/* Highlight target section (linked from footer) */
.group:target {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: rgba(15, 118, 110, 0.5);
    /* Stronger teal border */
}

/* =========================================
   Animations
   ========================================= */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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