html {
    scroll-behavior: smooth;
}

:root {
    --primary-blue: #0056A4;
    --secondary-blue: #004482;
    --light-blue: #e3f2fd;
    --white: #ffffff;
    --gray-text: #666666;
    --dark-text: #333333;
    --accent-red: #d32f2f;
}

body {
    font-family: 'Inter', 'Roboto', sans-serif;
    color: var(--dark-text);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Header & Nav */
header {
    background: var(--white);
    border-bottom: 2px solid var(--primary-blue);
    padding: 10px 0;
}

.top-bar {
    background: var(--primary-blue);
    color: var(--white);
    font-size: 0.85rem;
    padding: 5px 0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
}

.nav-links a {
    text-decoration: none;
    color: var(--dark-text);
    font-weight: 600;
    margin-right: 20px;
    text-transform: uppercase;
}

.hotline {
    color: var(--accent-red);
    font-weight: bold;
    font-size: 1.2rem;
}

/* Hero Section */
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('https://via.placeholder.com/1920x600?text=Clinic+Hero+Banner') no-repeat center center/cover;
    height: 500px;
    display: flex;
    align-items: center;
    color: var(--white);
    padding: 0 50px;
}

.hero-content {
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-blue);
    padding: 30px;
    border-radius: 10px;
    max-width: 500px;
}

/* Service Grid */
.section-title {
    text-align: center;
    color: var(--primary-blue);
    margin: 40px 0;
    text-transform: uppercase;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.service-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.service-card-body {
    padding: 20px;
}

/* Testimonials */
.testimonials {
    background: var(--light-blue);
    padding: 60px 0;
    margin-top: 60px;
}

.testimonial-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-style: italic;
}

/* Footer */
footer {
    background: var(--primary-blue);
    color: var(--white);
    padding: 50px 20px;
    margin-top: 60px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
}
 / *   C o n s u l t a t i o n   F o r m   S t y l i n g   * / 
 . c o n s u l t a t i o n - f o r m   i n p u t : f o c u s ,   
 . c o n s u l t a t i o n - f o r m   s e l e c t : f o c u s ,   
 . c o n s u l t a t i o n - f o r m   t e x t a r e a : f o c u s   { 
         b o r d e r - c o l o r :   v a r ( - - p r i m a r y - b l u e )   ! i m p o r t a n t ; 
         b o x - s h a d o w :   0   0   0   3 p x   r g b a ( 0 ,   8 6 ,   1 6 4 ,   0 . 1 ) ; 
 } 
 
 . c o n s u l t a t i o n - f o r m   b u t t o n : h o v e r   { 
         b a c k g r o u n d :   v a r ( - - s e c o n d a r y - b l u e )   ! i m p o r t a n t ; 
         t r a n s f o r m :   t r a n s l a t e Y ( - 2 p x ) ; 
         b o x - s h a d o w :   0   5 p x   1 5 p x   r g b a ( 0 ,   8 6 ,   1 6 4 ,   0 . 3 ) ; 
 }  
 