/* --- Variables --- */
:root {
    --primary: #0A7CFF;
    --secondary: #00B894;
    --dark: #2D3436;
    --light-text: #636E72;
    --bg-light: #F9FBFD;
    --danger: #D63031;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* --- General Styles --- */
/* FIX MOBILE OVERFLOW */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    color: var(--dark);
    background-color: var(--bg-light);
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: var(--font-heading);
}

.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }

/* --- Navbar --- */
.navbar {
    padding: 15px 0;
    transition: all 0.3s ease;
}
.nav-link {
    color: var(--dark);
    font-weight: 500;
    margin: 0 10px;
    transition: color 0.3s;
}
.nav-link:hover, .nav-link.active {
    color: var(--primary);
}

/* --- Buttons --- */
.btn {
    border-radius: 50px; 
    padding: 10px 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover {
    background-color: #0063d1;
    transform: translateY(-2px);
}
.btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: white;
}
.btn-secondary:hover {
    background-color: #008f72;
    transform: translateY(-2px);
}

/* --- Hero Section --- */
.hero-section {
    padding-top: 100px;
    padding-bottom: 60px;
    min-height: 90vh;
    background: linear-gradient(135deg, #F9FBFD 0%, #E6F0FF 100%);
    overflow: hidden; /* Prevent animation overflow */
}
.hero-img {
    object-fit: cover;
    max-height: 500px;
    width: 100%;
}

/* --- Services (Glassmorphism) --- */
.service-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
    transition: transform 0.3s ease;
}
.service-card:hover {
    transform: translateY(-10px);
    background: white;
}
.icon-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
}
.bg-blue-light { background-color: rgba(10, 124, 255, 0.1); }
.bg-green-light { background-color: rgba(0, 184, 148, 0.1); }

/* --- Doctors --- */
.doctor-card {
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s;
}
.doctor-card:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}
.doctor-card img {
    height: 250px;
    object-fit: cover;
    object-position: top;
}

/* --- Forms --- */
.form-control, .form-select {
    border-radius: 10px;
}
.form-control:focus, .form-select:focus {
    box-shadow: none;
    border: 1px solid var(--primary);
    background: white;
}

/* --- Modern Map Styling --- */
.map-container {
    transition: transform 0.3s ease;
}
.map-container:hover {
    transform: translateY(-5px);
}

/* --- Contact Modal Styles --- */
.modal-content { overflow: hidden; }

/* Modal Hover Effects */
.hover-bg-success:hover { background-color: #25D366 !important; color: white !important; border-color: #25D366; }
.hover-bg-success:hover .text-muted-dark { color: rgba(255,255,255,0.8) !important; }

.hover-bg-primary:hover { background-color: var(--primary) !important; color: white !important; }
.hover-bg-primary:hover .text-muted-dark { color: rgba(255,255,255,0.8) !important; }

.hover-bg-dark:hover { background-color: var(--dark) !important; color: white !important; }
.hover-bg-dark:hover .text-muted-dark { color: rgba(255,255,255,0.8) !important; }

/* --- Footer --- */
footer a:hover {
    color: var(--primary) !important;
}
footer .text-secondary {
    color: #bfbfbf !important;
}
footer {
    color: #bfbfbf !important;
}

/* Scroll Animations */
.fade-in-up { opacity: 0; transform: translateY(30px); transition: 0.8s ease-out; }
.fade-in-left { opacity: 0; transform: translateX(-30px); transition: 0.8s ease-out; }
.fade-in-right { opacity: 0; transform: translateX(30px); transition: 0.8s ease-out; }
.visible { opacity: 1; transform: translate(0); }