/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
}

.container {
    width: 1000px; /* Set a fixed width */
    margin: 0 auto;
    padding: 7px 0;
}

/* Responsive Design for screens with a max-width of 600px */
@media (max-width: 600px) {
    .container {
        width: 70%; /* Ensure it takes the full width on small screens */
        padding: 10px; /* Adjust padding for mobile */
    }
}

/* Header */
/* General Header Styling */
header {
    background-color: #000;
    padding: 0px 20px; /* Reduce vertical padding to make the header smaller */
}

/* Header content container with flexbox */
.header-content {
    display: flex;
    justify-content: space-between; /* Pushes logo and menu to opposite ends */
    align-items: center;
    width: 100%;
}

/* Logo and Title Styles */
.logo-title {
    display: flex;
    align-items: center;
}

header .clinic-logo {
    width: 85px; /* Adjust logo size */
    height: 60px;
    margin-right: 10px;
    
}

header h1 {
    font-size: 20px;
    color: #fff; /* Set the title color */
    margin: 0;
}

/* Navigation Menu Styles */
.nav-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* Align items horizontally */
    align-items: center;
    margin-left: auto; /* Pushes menu items to the right */
}

/* Individual Menu Item Styles */
.nav-menu li {
    margin-left: 20px; /* Add spacing between menu items */
}

/* Menu Link Styles */
.nav-menu li a {
    color: #fff; /* White text color */
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    padding: 10px; /* Adds clickable area */
}

/* Hover Effect for Links */
.nav-menu li a:hover {
    text-decoration: underline; /* Underline effect on hover */
}

@media (max-width: 600px) {
    /* Header Styles */
    header {
        padding: 10px 10px; /* Reduce padding to make the background smaller */
    }

    .header-content {
        flex-direction: column; /* Stack logo and title vertically on small screens */
        align-items: center; /* Center-align items horizontally */
        text-align: center; /* Center title text */
    }

    .logo-title {
        margin-bottom: 0; /* Remove margin below logo-title */
    }

    header .clinic-logo {
        width: 50px; /* Resize logo for smaller screens */
        height: 40px;
        margin-bottom: 10px; /* Space between logo and title */
    }

    header h1 {
        font-size: 18px; /* Adjust title font size for small screens */
    }

    /* Remove Navigation Menu for Mobile Devices */
    .nav-menu {
        display: none; /* Hide the navigation menu */
    }
}



/* Hero Section */
.hero {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                url('image.webp') no-repeat center center/cover;
    color: #fff;
    padding: 0;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

/* Container Styling */
.hero .container {
    max-width: 800px;
    padding: 20px;
}

/* Headline */
.hero h2 {
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
}

.hero h2 span {
    color: #fff; /* Highlighted brand color */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/* Subtext */
.hero p {
    font-size: 1.25rem;
    margin: 20px 0;
    color: #e0e0e0;
}

/* Button Group */
.hero .btn-group {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    justify-content: center;
}

.hero .btn {
    display: inline-block;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s ease;
}

/* Primary Button */
.hero .btn.primary {
    background-color: #5c67f2;
    color: #333;
}

.hero .btn.primary:hover {
    background-color: #5c67f2;
    color: #000;
}

/* Secondary Button */
.hero .btn.secondary {
    background-color: #fff;
    color: #333;
    border: 2px solid #5c67f2;
}

.hero .btn.secondary:hover {
    background-color: #5c67f2;
    color: #fff;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero {
        height: auto;
        padding: 60px 20px;
    }

    .hero h2 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero .btn {
        display: none; 
    }
}

/* Mobile Specific Styles (max-width: 600px) */
/* Mobile Specific Styles (max-width: 600px) */
@media (max-width: 600px) {
    .hero {
        height: auto;
        padding: 40px 15px; /* Reduced padding */
    }

    .hero h2 {
        font-size: 2rem; /* Smaller font size for heading */
    }

    .hero p {
        font-size: 0.9rem; /* Smaller font size for subtext */
    }

    .hero .btn {
        padding: 10px 20px;
        font-size: 0.85rem; /* Slightly smaller button text */
    }

    .hero .btn-group {
        flex-direction: row; /* Align buttons next to each other */
        justify-content: center; /* Center the buttons horizontally */
        flex-wrap: wrap; /* Allow wrapping if buttons don't fit in one line */
        gap: 10px; /* Add space between buttons */
    }
}


/* SERVICES SECTION */
.services-home {
    padding: 20px 10px;
    background-color: #f4f4f4;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the grid in the container */
}

.services-home h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: #333;
}

/* Grid Layout for Service Items */
.service-list-home {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 3 columns by default */
    gap: 30px;
    justify-items: center;
    margin-top: 20px;
    max-width: 1000px; /* Increased max width for larger grid items */
    width: 100%; /* Ensures grid takes full width within the max-width */
}

.service-item-home {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 10px; /* Increased padding for bigger grid items */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    width: 100%;
    max-width: 400px; /* Increased max-width for larger grid items */
}

.service-item-home:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.service-item-home img {
    width: 100%; /* Ensures images stretch to the full width of their container */
    height: 200px; /* Sets a fixed height for all images */
    object-fit: cover; /* Ensures the image covers the area without stretching */
    border-radius: 8px; /* Keeps the rounded corners */
    margin-bottom: 15px; /* Space between the image and text */
}


.service-item-home h3 {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 10px;
    text-align: justify; /* Justify the text */
    display: flex;
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically, if needed */
    width: 100%; /* Ensures the text container takes up full width */
    white-space: nowrap; /* Prevents wrapping */
}

.service-item-home p {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
    text-align: center;
}

/* Dedicated "View All Services" Button */
.view-all-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #5c67f2;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    text-align: center;
    margin-top: 30px;
    transition: background-color 0.3s, transform 0.3s ease;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.view-all-button:hover {
    background-color: #3b4cce;
    transform: translateY(-5px);
}

.view-all-button:active {
    transform: translateY(0);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .service-list-home {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
    }
}

@media (max-width: 768px) {
    .service-list-home {
        grid-template-columns: 1fr; /* 1 column on small screens */
    }
}

/* Responsive Adjustments for Mobile */
/* Responsive Adjustments for Mobile */
@media (max-width: 600px) {
    /* Services Section */
    .services-home {
        padding: 15px 10px;
        text-align: center;
    }

    .services-home h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    /* Grid Layout for Mobile */
    .service-list-home {
        grid-template-columns: repeat(2, 1fr); /* Two columns */
        gap: 5px; /* Adjust spacing between items */
    }

    /* Service Item Styles for Mobile */
    .service-item-home {
        padding: 5px; /* Reduced padding for smaller cards */
        max-width: 95%; /* Ensure full width for each card */
        border-radius: 10px; /* Slightly smaller corner radius */
    }

    .service-item-home img {
        height: 120px; /* Smaller image height */
        border-radius: 5px; /* Keep smaller border radius */
        margin-bottom: 5px; /* Adjust spacing below the image */
    }

    .service-item-home h3 {
        font-size: 0.9rem; /* Smaller heading text */
        margin-bottom: 5px; /* Less spacing below the heading */
        text-align: center; /* Center-align text */
    }

    .service-item-home p {
        font-size: 0.8rem; /* Smaller paragraph text */
        line-height: 1.3; /* Adjust line height for readability */
        margin-bottom: 8px; /* Reduce spacing below the paragraph */
    }

    /* View All Services Button */
    .view-all-button {
        display: none; 
    }
}




/* Facilities Section */
#facilities-highlight {
    background-color: #f9f9f9;
    padding: 50px 0;
    text-align: center;
}

#facilities-highlight h2 {
    font-size: 2em;
    color: #5c67f2;
    margin-bottom: 10px;
}

#facilities-highlight p {
    margin-bottom: 40px;
    color: #555;
}

.facility-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.facility-card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    width: 250px;
    transition: transform 0.3s ease;
}

.facility-card:hover {
    transform: translateY(-5px);
}

.facility-card i {
    font-size: 3em;
    color: #5c67f2;
    margin-bottom: 15px;
}

.facility-card h3 {
    font-size: 1.2em;
    color: #333;
}

.facility-card p {
    font-size: 0.9em;
    color: #666;
}

/* Media Query for Mobile Screens (max-width: 600px) */
/* Media Query for Mobile Screens (max-width: 600px) */
@media (max-width: 600px) {
    /* Facilities Section */
    .facility-home {
        padding: 15px 10px;
        text-align: center;
    }

    .facility-home h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    /* Grid Layout for Mobile */
    .facility-list-home {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Two columns */
        gap: 10px; /* Adjust spacing between items */
        justify-content: center; /* Center the grid */
    }

    /* Facility Item Styles for Mobile */
    .facility-item-home {
        padding: 5px; /* Reduced padding for smaller cards */
        max-width: 95%; /* Ensure full width for each card */
        border-radius: 10px; /* Slightly smaller corner radius */
        background-color: white; /* Make sure the background is white */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
        transition: transform 0.3s ease;
    }

    .facility-item-home:hover {
        transform: translateY(-5px); /* Add hover effect */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }

    .facility-item-home i {
        font-size: 2em; /* Adjusted icon size */
        color: #5c67f2;
        margin-bottom: 10px;
    }

    .facility-item-home h3 {
        font-size: 0.9rem; /* Smaller heading text */
        margin-bottom: 5px; /* Less spacing below the heading */
        text-align: center; /* Center-align text */
    }

    .facility-item-home p {
        font-size: 0.8rem; /* Smaller paragraph text */
        line-height: 1.3; /* Adjust line height for readability */
        margin-bottom: 8px; /* Reduce spacing below the paragraph */
    }

    /* View All Facilities Button */
    .view-all-facilities-button {
        padding: 10px 18px; /* Smaller button padding */
        font-size: 0.9rem; /* Reduced font size */
        margin-top: 15px; /* Adjust spacing above button */
    }
}


/* General Styling for Homepage Meet Our Doctors Section */
.homepage-doctors {
    padding: 3rem 1rem;
    background-color: #f4f4f9;
    text-align: center;
}

.homepage-doctors h2 {
    font-size: 2.2rem;
    color: #0056b3;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.homepage-doctors p {
    color: #666;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 2.5rem;
    line-height: 1.6;
}

/* Doctor Card Container Styling */
.homepage-doctor-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

/* Individual Doctor Card Styling */
.homepage-doctor-card {
    background-color: #fff;
    padding: 1.5rem;
    width: 280px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Hover Effect: Light Blue Background */
.homepage-doctor-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Enlarge Image on Hover */
.homepage-doctor-card:hover img {
    transform: scale(1.2); /* Noticeable zoom effect */
}


/* Doctor Photo Styling */
.homepage-doctor-photo {
    width: 150px;          /* Increased width */
    height: 150px;         /* Increased height to match */
    border-radius: 50%;    /* Keeps the image circular */
    object-fit: cover;
    margin-bottom: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Doctor Name and Specialty Styling */
.homepage-doctor-card h3 {
    font-size: 1.4rem;
    color: #333;
    margin: 0.5rem 0;
    font-weight: 600;
}

.homepage-doctor-card p {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 0.5rem;
}

/* Specialty and Description Text */
.homepage-doctor-card p:nth-of-type(1) {
    font-weight: 600;
    color: #0073e6;
}

.homepage-doctor-card p:nth-of-type(2) {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
}

.homepage-doctor-card p:nth-of-type(3) {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4d69e6;
    margin-top: 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .homepage-doctor-cards {
        flex-direction: column;
        align-items: center;
    }

    .homepage-doctor-card {
        width: 100%;
        max-width: 340px;
    }
}

/* Overall Locations Section Styling */
.homepage-locations {
    padding: 4rem 1rem;
    background-color: #f9f9fb;
    text-align: center;
}

.homepage-locations h2 {
    font-size: 2.4rem;
    color: #0056b3;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.homepage-locations p {
    color: #666;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

/* Flex Container for Location Items */
.homepage-locations-row {
    display: flex;
    justify-content: center; /* Center align for larger cards */
    gap: 1rem; /* Minimal gap between cards */
    flex-wrap: nowrap; /* Prevent wrapping */
    margin-top: 3rem;
}

/* Individual Location Card Styling */
.homepage-location {
    width: 49%; /* Increase width to nearly half the container */
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.homepage-location:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    .homepage-locations-row {
        flex-direction: column;
        align-items: center;
    }

    .homepage-location {
        width: 90%;
        max-width: 600px; /* Allow larger max-width on mobile */
    }

    .clinic-image {
        height: 250px; /* Adjust height for smaller screens */
    }
}

/* Further Adjustments for Mobile (max-width: 600px) */
@media (max-width: 768px) {
    .homepage-locations {
        padding: 2rem 1rem; /* Reduce padding for smaller screens */
    }

    .homepage-locations h2 {
        font-size: 2rem; /* Smaller title for mobile */
    }

    .homepage-locations p {
        font-size: 1rem; /* Slightly smaller text */
        margin-bottom: 2rem; /* Adjust bottom margin */
    }

    .homepage-location {
        width: 100%; /* Full width for each card */
        max-width: none; /* Remove max-width to allow full-width cards */
        margin-bottom: 2rem; /* Add space between cards */
    }

    .clinic-image {
        height: 200px; /* Smaller image height on mobile */
    }

    .homepage-location h3 {
        font-size: 1.4rem; /* Smaller title for mobile */
    }

    .homepage-location p {
        font-size: 0.9rem; /* Smaller text for mobile */
    }

    .location-buttons {
        flex-direction: column; /* Stack buttons vertically */
        gap: 1rem; /* Increase gap between buttons */
    }

    .button-icon {
        width: 45px; /* Slightly smaller button */
        height: 45px; /* Adjust height accordingly */
    }
}

/* Clinic Image Styling */
.clinic-image {
    width: 100%;
    height: 350px; /* Maintain large image size */
    object-fit: fill; /* Fill the entire area with the image */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: #f1f1f1;
}

/* Location Title */
.homepage-location h3 {
    font-size: 1.6rem;
    color: #333;
    margin: 1rem 0 0.5rem;
    font-weight: 600;
}

/* Location Address */
.homepage-location p {
    color: #555;
    font-size: 1rem;
    margin: 1rem 0 1.5rem;
}

/* Location Buttons Container */
.location-buttons {
    display: flex;
    gap: 1rem; /* Space between buttons */
    justify-content: center; /* Align buttons in center */
    margin-top: 0rem;
    margin-bottom: 2rem; /* Add more space at the bottom */
}

/* Circular Button Styling */
.button-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* Keep the original button size */
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none; /* Remove underline */
    border: 2px solid #000; /* Border color */
}

.button-icon:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    background-color: #f1f1f1; /* Slightly darker background on hover */
}

/* Larger Icon Size */
.button-icon img {
    width: 80%; /* Increase the icon size to 80% of the button's size */
    height: 80%; /* Adjust height accordingly */
    object-fit: contain; /* Maintain aspect ratio */
}





/* Responsive Design for Smaller Screens (max-width: 600px) */
@media (max-width: 768px) {
    .homepage-locations {
        padding: 1rem 0rem; /* Reduced padding */
    }

    .homepage-locations h2 {
        font-size: 2rem; /* Smaller header */
    }

    .homepage-locations p {
        font-size: 1rem; /* Slightly smaller text */
        margin-bottom: 2rem; /* Adjust bottom margin */
    }

    .homepage-locations-row {
        flex-direction: column;
        align-items: center;
        gap: 2rem; /* Increased space between cards */
    }

    .homepage-location {
        width: 90%; /* Full width of the screen */
        max-width: 100%; /* No maximum width restriction */
        margin-bottom: 2rem; /* Space between cards */
    }

    .clinic-image {
        height: 200px; /* Adjusted height for better mobile fit */
    }

    .homepage-location h3 {
        font-size: 1.4rem; /* Smaller title for better mobile fit */
    }

    .homepage-location p {
        font-size: 0.9rem; /* Reduced text size for mobile */
    }

    .location-buttons {
        flex-direction: row; /* Display buttons in a row */
        gap: 1rem; /* Space between buttons */
    }

    .button-icon {
        width: 40px; /* Reduced size for mobile */
        height: 40px;
    }

    .button-icon img {
        width: 75%; /* Adjusted icon size */
        height: 75%;
    }
}
/**********************************************************************/
/* Panels Section Styling */
/* Styling for the Panels Section */
/* Styling for the Panels Section */
.panels-section {
    text-align: center;
    background-color: #ffffff; /* Adjust as needed */
    padding: 20px;
}

.panels-section h2 {
    font-size: 24px;
    color: #0056b3; /* Match the heading color in your example */
    margin-bottom: 20px;
}

.panels-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 columns */
    grid-template-rows: repeat(5, auto); /* 5 rows */
    gap: 20px; /* Spacing between logos */
    justify-content: center;
    align-items: center;
    max-width: 1200px; /* Adjust as needed for container width */
    margin: 0 auto; /* Center the grid */
}

.panel-logo img {
    width: 150px; /* Uniform width */
    height: 150px; /* Uniform height */
    object-fit: contain; /* Ensures the image fits inside while keeping aspect ratio */
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease; /* Smooth hover effect */
}

.panel-logo img:hover {
    transform: scale(1.05); /* Slight zoom on hover for interactivity */
}

@media (max-width: 768px) {
    .panels-section {
        padding: 15px; /* Adjust padding for mobile */
    }

    .panels-section h2 {
        font-size: 20px; /* Slightly smaller font size */
        margin-bottom: 15px;
    }

    .panels-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Change to 2 columns for smaller screens */
        grid-template-rows: auto; /* Automatically adjust the rows */
        gap: 15px; /* Reduce gap for smaller screens */
        margin: 0 auto;
    }

    .panel-logo img {
        width: 100px; /* Reduce the size of the logos on mobile */
        height: 100px;
    }
}



/* Facilities Section */
.facilities {
    background-color: #f9f9f9;
    padding: 50px 20px;
    text-align: center;
}

.facilities h2 {
    font-size: 32px;
    color: #5c67f2;
    margin-bottom: 20px;
}

.facilities p {
    font-size: 16px;
    color: #666;
    margin-bottom: 40px;
}

.facility-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 0;
    list-style-type: none;
}

.facility-list li {
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.facility-list li:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.facility-list li i {
    font-size: 30px;
    color: #5c67f2;
    margin-bottom: 15px;
}

.facility-list h3 {
    font-size: 20px;
    color: #333;
    margin: 0 0 10px;
}

.facility-list p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* Hover effect for icons */
.facility-list li:hover i {
    color: #3b4cce;
}





/* Locations Section */
.locations {
    background-color: #fff;
    padding: 50px 0;
    text-align: center;
}

.locations h2 {
    margin-bottom: 40px;
    font-size: 28px;
    color: #5c67f2;
}

.locations ul {
    list-style-type: none;
    padding: 0;
}

.locations ul li {
    font-size: 18px;
    margin: 10px 0;
    color: #333;
}

/* Footer Styling */
footer {
    background-color: #f1f1f1; /* Light background */
    padding: 10px 0; /* Reduced padding */
    text-align: center;
    font-size: 0.9rem; /* Small font size */
    color: #555;
}

footer p {
    margin: 0; /* Remove extra margins */
}


/******************************************************************************************************/
/******************************************************************************************************/

/* Services Section Styling */
.services-section {
    padding: 60px 20px;
    background-color: #f9f9fb;
    text-align: center;
}

.services-section-title {
    font-size: 2.5rem;
    color: #0056b3;
    margin-bottom: 40px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Fixed 4 columns */
    gap: 20px;
    justify-items: center;
}

/* Card Styling */
.services-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.services-card-image {
    width: 100%; /* Ensures images stretch to the full width of their container */
    height: 200px; /* Sets a fixed height for all images */
    object-fit: cover; /* Ensures the image covers the area without stretching */
    border-radius: 8px; /* Keeps the rounded corners */
    margin-bottom: 15px; /* Space between the image and text */
}



.services-card-title {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 10px;
    font-weight: 600;
}

.services-card-description {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr; /* Single column for small screens */
    }

    .services-card {
        padding: 15px;
    }
}

/* Doctors Section */
.doctors-page-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 30px; /* Spacing between cards */
    padding: 9rem;
    justify-items: center;
    background-color: #ffffff; /* Clean white background */
}

/* Doctor Card */
.doctor-card-page {
    background-color: #f9f9f9;
    border-radius: 20px; /* Smooth rounded corners */
    width: 300px; /* Larger card width */
    height: 250px; /* Adjusted card height */
    padding: 0rem; /* Reduced padding */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Enhanced shadow */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Hover Effects */
.doctor-card-page:hover {
    transform: translateY(-10px); /* Lift on hover */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* Deepened shadow */
    background-color: #f0f8ff; /* Light blue background on hover */
}

/* Doctor Image */
.doctor-card-page img {
    width: 150px; /* Larger image */
    height: 150px; /* Matches the width for a perfect circle */
    object-fit: cover; /* Keeps aspect ratio and fills the container */
    object-position: top; /* Focuses on the top of the image */
    border-radius: 50%; /* Circular photo */
    border: 5px solid #ffffff; /* Clean white border */
    margin-bottom: 15px; /* Space between image and name */
    transition: transform 0.3s ease;
}


/* Enlarge Image on Hover */
.doctor-card-page:hover img {
    transform: scale(1.2); /* Noticeable zoom effect */
}

/* Name Hover Effect */
.doctor-card-page:hover h2 {
    color: #007bff; /* Bright blue on hover */
}

/* Doctor Name */
.doctor-card-page h2 {
    font-size: 1.5rem; /* Larger font for names */
    font-weight: 700;
    color: #333;
    margin: 10px 0 0 0; /* Reduced margin for closer spacing */
    text-transform: capitalize;
    transition: color 0.3s ease;
}



/* Custom Positioning for Dr. Navin and Dr. Dhramini */
.doctors-page-container > .doctor-card-page:nth-child(4) {
    grid-column: 2 / span 1; /* Place Dr. Navin in the middle column */
}

.doctors-page-container > .doctor-card-page:nth-child(5) {
    grid-column: 3 / span 1; /* Place Dr. Dhramini in the third column */
}

/* Custom Positioning */
.doctors-page-container > .doctor-card-page:nth-child(4) {
    grid-column: 2; /* Dr. Navin between Dr. Amar and Dr. Bho */
    grid-row: 2;
    transform: translateX(-55%); /* Shift to the left by 50% */
}

.doctors-page-container > .doctor-card-page:nth-child(5) {
    grid-column: 2; /* Dr. Navin between Dr. Amar and Dr. Bho */
    grid-row: 2;
    transform: translateX(55%); /* Shift to the left by 50% */
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .doctors-page-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
        gap: 20px;
    }

    /* Adjust for Dr. Navin and Dr. Dhramini on medium screens */
    .doctors-page-container > .doctor-card-page:nth-child(4),
    .doctors-page-container > .doctor-card-page:nth-child(5) {
        grid-column: auto; /* Reset positioning */
        justify-self: center;
    }
}

@media screen and (max-width: 768px) {
    .doctors-page-container {
        grid-template-columns: 1fr; /* Single column on small screens */
        gap: 10px;
    }
    .doctor-card-page {
        width: 90%; /* Adjust card width for smaller screens */
    }

    .doctors-page-container > .doctor-card-page:nth-child(4),
    .doctors-page-container > .doctor-card-page:nth-child(5) {
        grid-column: auto; /* Reset positioning */
        justify-self: center;
    }
}

/******PANELS PAGE******/
.panel-application {
    padding: 50px 20px;
    text-align: center;
    background-color: #f9f9f9;
}

.panel-application h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #0056b3;
}

.panel-application p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: #333;
}

.panel-form {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

.form-group {
    margin-bottom: 20px;
    color: #000
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    display: inline-block;
    background-color: #0056b3;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #003f7f;
}

.response-message {
    text-align: center;
    padding: 50px 20px;
    color: #0056b3;
    background-color: #f9f9f9;
    border: 1px solid #0056b3;
    border-radius: 10px;
    max-width: 600px;
    margin: 50px auto;
}

.response-message h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.response-message p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.response-message .btn {
    background-color: #0056b3;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

.response-message .btn:hover {
    background-color: #003f7f;
}


/******ABOUT US******/
/* Global Styles */

/* Hero Section */
/* Hero Section */
.hero-about {
    background-image: url('v2.png'); /* Replace with your image file */
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    height: 300px; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* Text color for contrast */
    text-align: center;
    padding: 20px;
    position: relative;
}

.hero-about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adds a semi-transparent overlay */
    z-index: 1;
}

.hero-content-about {
    position:relative;
    z-index: 2; /* Ensures the text appears above the overlay */
}

.hero-content-about h1 {
    font-size: 2.5rem;
    margin: 0;
}

.hero-content-about p {
    font-size: 1.2rem;
    margin-top: 10px;
}




/* Content Section */
.content-about {
    padding: 40px 20px;
    background: #fff;
}

.content-container-about {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    flex-wrap: wrap;
}

.content-left-about,
.content-right-about {
    flex: 1;
    min-width: 300px;
}

.content-left-about iframe {
    border: none;
    border-radius: 8px;
    max-width: 100%;
}

.content-right-about h2 {
    font-size: 2rem;
    color: #0a2a66;
    margin-bottom: 15px;
}

.content-right-about p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}
.about-image {
    width: 100%; /* Adjust width to fit the container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Add rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for depth */
}




/* Responsive Design */
@media (max-width: 768px) {
    .hero-content-about h1 {
        font-size: 2rem;
    }

    .hero-content-about p {
        font-size: 1rem;
    }

    .content-container-about {
        flex-direction: column;
    }
}

footer {
    background-color: #000; /* Dark background for footer */
    color: #fff; /* White text color */
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
}

footer .footer-links {
    margin-top: 10px;
}

footer .footer-links a {
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
}






/* Global Styles for Page Background */
html, body {
    background-color: #ffffff; /* White background */
    margin: 0;
    padding: 0;
    min-height: 100%; /* Ensures the full height is white */
}

/* Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
    header .container {
        flex-direction: column;
        align-items: flex-start;
    }

    nav ul {
        flex-direction: column;
        margin-top: 20px;
    }

    nav ul li {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .hero h2 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .content-about {
        flex-direction: column;
        text-align: center;
    }

    .content-about .content-left-about, .content-about .content-right-about {
        width: 100%;
        margin-bottom: 20px;
    }

    .btn-group {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .btn {
        margin-bottom: 10px;
    }
}

/* Extra Small Devices (max-width: 480px) */
@media (max-width: 480px) {
    .hero h2 {
        font-size: 1.5rem;
    }

    .hero p {
        font-size: 0.9rem;
    }

    .btn {
        padding: 8px 15px;
    }

    .content-about {
        padding: 20px;
    }
}