/* Add @font-face rules at the very top.
    IMPORTANT: Replace 'path/to/fonts/' with the actual path to your font files.
    You need to obtain these font files yourself and ensure proper licensing.
    For this professional look, 'Sofia Pro' is used for headings and 'Inter' for body.
*/

/* Avenir Next Fonts (Optional, can be used as a fallback or for specific elements if needed) */
@font-face {
    font-family: 'Avenir Next';
    src: url('./fonts/AvenirNext-Regular.woff2') format('woff2'),
         url('./fonts/AvenirNext-Regular.woff') format('woff');
    font-weight: 400; /* Regular */
    font-style: normal;
    font-display: swap; /* Improves loading performance */
}

@font-face {
    font-family: 'Avenir Next';
    src: url('./fonts/AvenirNext-Medium.woff2') format('woff2'),
         url('./fonts/AvenirNext-Medium.woff') format('woff');
    font-weight: 500; /* Medium */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('./fonts/AvenirNext-DemiBold.woff2') format('woff2'),
         url('./fonts/AvenirNext-DemiBold.woff') format('woff');
    font-weight: 600; /* SemiBold */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('./fonts/AvenirNext-Bold.woff2') format('woff2'),
         url('./fonts/AvenirNext-Bold.woff') format('woff');
    font-weight: 700; /* Bold */
    font-style: normal;
    font-display: swap;
}

/* Sofia Pro Fonts (Used for primary headings - bold, clean, professional) */
@font-face {
    font-family: 'Sofia Pro';
    src: url('./fonts/SofiaPro-Regular.woff2') format('woff2'),
         url('./fonts/SofiaPro-Regular.woff') format('woff');
    font-weight: 400; /* Regular */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Pro';
    src: url('./fonts/SofiaPro-Medium.woff2') format('woff2'),
         url('./fonts/SofiaPro-Medium.woff') format('woff');
    font-weight: 500; /* Medium */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Pro';
    src: url('./fonts/SofiaPro-SemiBold.woff2') format('woff2'),
         url('./fonts/SofiaPro-SemiBold.woff') format('woff');
    font-weight: 600; /* SemiBold */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Pro';
    src: url('./fonts/SofiaPro-Bold.woff2') format('woff2'),
         url('./fonts/SofiaPro-Bold.woff') format('woff');
    font-weight: 700; /* Bold */
    font-style: normal;
    font-display: swap;
}

/* Inter Fonts (Used for body text - clean, highly readable) */
@font-face {
    font-family: 'Inter';
    src: url('./fonts/Inter-Regular.woff2') format('woff2'),
         url('./fonts/Inter-Regular.woff') format('woff');
    font-weight: 400; /* Regular */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./fonts/Inter-Medium.woff2') format('woff2'),
         url('./fonts/Inter-Medium.woff') format('woff');
    font-weight: 500; /* Medium */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./fonts/Inter-SemiBold.woff2') format('woff2'),
         url('./fonts/Inter-SemiBold.woff') format('woff');
    font-weight: 600; /* SemiBold */
    font-style: normal;
    font-display: swap;
}


/* Color Palette (using CSS variables for easier management):
    A professional green palette for health and trust.
*/

:root {
    --primary-green-darkest: #2A6A2A; /* Very dark green for footers, strong emphasis */
    --primary-green-dark: #3B8A3B;   /* Dark green for main branding, headings */
    --primary-green-medium: #5DAA5D;  /* Medium green for buttons, active states */
    --primary-green-light: #8CCB8C;   /* Lighter green for hover effects, softer elements */
    --primary-green-lightest: #E8F5E8;/* Very light green for subtle backgrounds */
    --text-dark: #212529;              /* Dark grey for body text (Bootstrap's default) */
    --text-medium: #495057;            /* Medium grey for secondary text */
    --bg-light: #f8f9fa;               /* Light grey for section backgrounds */
    --white: #ffffff;
    --shadow-light: rgba(0, 0, 0, 0.05); /* Lighter shadow for subtle depth */
    --shadow-medium: rgba(0, 0, 0, 0.1); /* Standard shadow */
    --shadow-strong: rgba(0, 0, 0, 0.18);/* Stronger shadow for hover/active */
    --border-radius-soft: 8px;
    --border-radius-pill: 50px;

    /* Font variables (using Playfair Display for headings in new contact design context) */
    --font-heading: 'Sofia Pro', sans-serif; /* Keep Sofia Pro as main heading font */
    --font-body: 'Inter', sans-serif; /* Keep Inter as main body font */
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

.modal.shake {
  animation: shake 0.4s ease-in-out;
}
/* Fade-slide animation */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated-card {
  animation: fadeSlideIn 0.6s ease forwards;
}

/* Green button styling */
.btn-green-slot {
    background-color: #28a745 !important;
    color: #fff !important;
    border: 1px solid #28a745 !important;
    transition: background-color 0.3s ease;
}

/* Hover effect */
.btn-green-slot:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
    color: #fff !important;
}

/* Active (selected) slot */
.btn-green-slot.active {
    background-color: #1e7e34 !important;
    border-color: #145c2b !important;
    color: #fff !important;
}


body {
    font-family: var(--font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
    font-size: 1rem;
    overflow-x: hidden; /* Prevent horizontal scroll due to animations */
}

/* Custom Outline Green Button with Hover Fill and Pulse */
.btn-outline-green-custom {
    color: var(--primary-green-dark); /* Dark green text for outline */
    border-color: var(--primary-green-medium); /* Medium green border */
    background-color: transparent; /* Transparent background initially */
    padding: 15px 35px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: var(--border-radius-pill);
    transition: all 0.3s ease;
    position: relative; /* Needed for pulse animation */
    overflow: hidden;
    z-index: 1; /* Ensure text is above animation */
}

.btn-outline-green-custom:hover {
    color: var(--white); /* White text on hover */
    background-color: var(--primary-green-dark); /* Fill with dark green on hover */
    border-color: var(--primary-green-dark); /* Dark green border on hover */
    transform: translateY(-3px); /* Lift the button slightly */
    box-shadow: 0 8px 16px rgba(59, 138, 59, 0.4); /* Shadow using primary-green-dark */
}

/* Ensure the icon animates on hover too */
.btn-outline-green-custom i {
    transition: transform 0.3s ease;
}

.btn-outline-green-custom:hover i {
    transform: translateX(5px); /* Move icon slightly to the right on hover */
}

/* Pulse animation for outline button */
@keyframes pulse-outline-green {
    0% {
        box-shadow: 0 0 0 0 rgba(93, 170, 93, 0.4); /* Use primary-green-medium for pulse color */
    }
    70% {
        box-shadow: 0 0 0 15px rgba(93, 170, 93, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(93, 170, 93, 0);
    }
}

#additionalServicesBtn { /* Target button by ID for animation */
    animation: pulse-outline-green 2s infinite; /* Apply the pulse animation */
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading); /* Professional heading font */
    font-weight: 700; /* Ensure headings are bold for impact */
    color: var(--primary-green-dark);
    line-height: 1.2;
}

.text-primary {
    color: var(--primary-green-dark) !important;
}

/* Navbar */
.navbar {
    background-color: var(--white);
    box-shadow: 0 4px 15px var(--shadow-light);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 1rem 0;
}

.navbar-brand {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary-green-dark) !important;
    font-size: 2rem;
    transition: all 0.3s ease;
}

.navbar-brand:hover {
    color: var(--primary-green-medium) !important;
}

.nav-link {
    font-weight: 500;
    color: var(--text-medium) !important;
    transition: color 0.3s ease, transform 0.2s ease;
    padding: 0.5rem 1rem;
}

.nav-link:hover {
    color: var(--primary-green-medium) !important;
    transform: translateY(-2px);
}

.nav-link.active {
    color: var(--primary-green-dark) !important;
    font-weight: 600;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(to right, var(--primary-green-medium), var(--primary-green-dark));
    position: relative;
    overflow: hidden;
    color: var(--white);
    padding: 100px 0;
    text-align: center;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1), transparent 70%);
    z-index: 1;
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-section h1 {
    font-size: 4rem;
    margin-bottom: 20px;
    color: var(--white);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

.hero-section p {
    font-size: 1.4rem;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.btn-primary-custom {
    background-color: var(--white);
    color: var(--primary-green-medium);
    border: none;
    padding: 15px 35px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: var(--border-radius-pill);
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px var(--shadow-medium);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.btn-primary-custom:hover {
    background-color: var(--primary-green-lightest); /* Lighter green on hover */
    color: var(--primary-green-dark);
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--shadow-strong);
}

/* Sections */
.section-padding {
    padding: 80px 0;
}

.bg-light {
    background-color: var(--bg-light) !important;
}

/* Cards */
.card {
    border-radius: 20px;
    box-shadow: 0 6px 25px var(--shadow-medium);
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Ensure content respects border-radius */
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px var(--shadow-strong);
}

.card-header {
    /* background-color: var(--primary-green-medium); */
    color: var(--white);
    font-weight: 600;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 18px 25px;
    border-bottom: none; /* Remove default bootstrap border */
}
.card-header.bg-white { /* For the nested card-headers in appointment */
    background-color: var(--white) !important;
    color: var(--text-dark) !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    border-radius: 0; /* No radius for inner headers */
    padding: 12px 20px;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Doctor Images */
.doctor-img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid var(--primary-green-medium);
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Form Elements */
.form-control.rounded-pill, .form-select.rounded-pill {
    border-radius: var(--border-radius-pill) !important;
    padding: 12px 20px;
    border: 1px solid #ced4da;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control.rounded-pill:focus, .form-select.rounded-pill:focus {
    border-color: var(--primary-green-light);
    box-shadow: 0 0 0 0.25rem rgba(93, 170, 93, 0.25);
}

.form-control.rounded-4 { /* For textareas */
    border-radius: 1rem !important;
    padding: 12px 20px;
    border: 1px solid #ced4da;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control.rounded-4:focus {
    border-color: var(--primary-green-light);
    box-shadow: 0 0 0 0.25rem rgba(93, 170, 93, 0.25);
}

/* Slot Buttons */
.slot-button {
    border-radius: var(--border-radius-soft);
    margin: 6px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 120px; /* Ensure consistent width */
}

.slot-button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.slot-button.btn-outline-success {
    border-color: var(--primary-green-light);
    color: var(--primary-green-dark);
}

.slot-button.btn-outline-success:hover {
    background-color: var(--primary-green-light);
    color: var(--white);
}

.slot-button.btn-success {
    background-color: var(--primary-green-dark);
    color: var(--white);
    border-color: var(--primary-green-dark);
}

.slot-button.btn-secondary {
    background-color: #adb5bd; /* Slightly lighter secondary for booked */
    color: white;
    border-color: #adb5bd;
    cursor: not-allowed;
    opacity: 0.8;
}

.slot-button.selected {
    background-color: var(--primary-green-medium);
    color: var(--white);
    border-color: var(--primary-green-medium);
    box-shadow: 0 0 0 0.25rem rgba(93, 170, 93, 0.35);
}

/* Appointment Section Specifics */
.service-fields {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    background-color: var(--white);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.03);
}

/* --- */
/* Contact Section (NEW DESIGN ADAPTED TO GREEN THEME) */
/* --- */
#contact {
    padding: 80px 0; /* Consistent section padding */
    background-color: var(--primary-green-darkest); /* Use darkest green for background */
    color: var(--white); /* Ensure text is white on dark background */
}

#contact h2 {
    color: var(--white) !important; /* Force white for the main section title on the dark background */
}

#contact h3 {
    color: var(--primary-green-light); /* Lighter green for contact headings */
    margin-bottom: 25px;
    font-size: 1.8rem;
    font-family: var(--font-heading); /* Ensure Sofia Pro for headings */
    font-weight: 700;
}

#contact p {
    color: rgba(255, 255, 255, 0.85); /* Slightly transparent white for body text */
    font-size: 1.1rem;
}

#contact p strong {
    color: var(--white); /* Pure white for strong text */
}

#contact i.fas {
    color: var(--primary-green-light); /* Icons in light green */
    font-size: 1.3rem; /* Adjusted for better visibility */
    margin-right: 8px; /* Space between icon and text */
}

.map-container {
    height: 350px;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px var(--shadow-strong); /* Use strong shadow variable */
    margin-top: 30px; /* Add margin top back for spacing */
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block; /* Important to remove extra space below iframe */
}

#contact .form-control {
    background-color: #4a6f4a; /* Darker green shade for input fields */
    border: 1px solid #6b8a6b; /* Slightly lighter border */
    color: var(--white);
    padding: 12px 18px;
    border-radius: 10px; /* Retain the 10px radius from the new design */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#contact .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7); /* Lighter placeholder text */
}

#contact .form-control:focus {
    background-color: #5a7f5a; /* Slightly lighter green on focus */
    border-color: var(--primary-green-light); /* Focus border in light green */
    box-shadow: 0 0 0 0.25rem rgba(140, 203, 140, 0.25); /* Focus shadow using light green */
}

#contact .form-label {
    color: var(--white); /* White labels on dark background */
    font-weight: 600;
    margin-bottom: 8px;
}

.submit-btn {
    background-color: var(--primary-green-medium); /* Use medium green for submit button */
    border-color: var(--primary-green-medium);
    color: var(--white); /* White text for contrast */
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 50px; /* Retain pill shape */
    transition: all 0.3s ease-in-out;
}

.submit-btn:hover {
    background-color: var(--primary-green-dark); /* Darker green on hover */
    border-color: var(--primary-green-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 138, 59, 0.3); /* Shadow reflecting hover color */
}

.submit-btn i {
    transition: transform 0.3s ease-in-out;
}

.submit-btn:hover i {
    transform: translateX(5px);
}

/* Footer */
.footer {
    background-color: var(--primary-green-darkest);
    color: var(--primary-green-lightest);
    padding: 30px 0;
    font-size: 0.9rem;
    box-shadow: inset 0 10px 20px rgba(0,0,0,0.1);
}

.footer .social-icons a {
    font-size: 1.5rem;
    color: var(--primary-green-light);
    transition: color 0.3s ease, transform 0.2s ease;
}

.footer .social-icons a:hover {
    color: var(--white);
    transform: translateY(-3px) scale(1.1);
}

/* Modals */
.modal-content {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.modal-header {
    background-color: var(--primary-green-medium);
    color: var(--white);
    padding: 20px;
    border-bottom: none;
}

.modal-header .btn-close {
    filter: invert(1); /* Make close button white */
}

.modal-body {
    padding: 30px;
}

.modal-footer {
    padding: 20px 30px;
    border-top: none;
    background-color: var(--bg-light);
}

/* Confirmation Modal Animation */
.animate-check {
    animation: bounceIn 0.8s ease-out;
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .hero-section h1 {
        font-size: 3rem;
    }
    .hero-section p {
        font-size: 1.1rem;
    }
    .section-padding {
        padding: 60px 0;
    }
    .navbar-collapse {
        background-color: var(--white);
        border-radius: 15px;
        margin-top: 10px;
        padding: 15px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .navbar-nav .nav-item {
        margin: 5px 0;
    }
    .card {
        margin-bottom: 25px;
    }
}

@media (max-width: 767.98px) {
    .hero-section {
        padding: 60px 0;
    }
    .hero-section h1 {
        font-size: 2.5rem;
    }
    .hero-section p {
        font-size: 1rem;
    }
    .btn-primary-custom {
        padding: 12px 25px;
        font-size: 1rem;
    }
    h2 {
        font-size: 1.8rem;
    }
    .doctor-img {
        width: 100px;
        height: 100px;
    }
    .slot-button {
        padding: 8px 12px;
        font-size: 0.85rem;
        min-width: unset;
    }
    .modal-body, .modal-footer {
        padding: 20px;
    }
}