/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    line-height: 1.6;
    /* Font family is set in HTML using Tailwind and Google Fonts */
    padding-top: 70px; /* Add padding to body for fixed header */
}

.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* Add default horizontal padding */
    padding-right: 1rem; /* Add default horizontal padding */
}

/* Header Styles */
header {
    background-color: #fff; /* White background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Shadow */
    padding-top: 1rem;
    padding-bottom: 1rem;
    position: fixed; /* Keep header fixed at the top */
    top: 0;
    left: 0;
    right: 0;
    z-index: 50; /* Ensure header is above other content */
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow header items to wrap on smaller screens */
}

header .logo img {
    height: 3rem; /* Adjust logo height */
    border-radius: 0.25rem; /* Rounded corners */
}

header nav ul {
    display: flex;
    list-style: none;
    gap: 1rem; /* Space between navigation links */
}

header nav ul li a {
    text-decoration: none;
    color: #333; /* Dark text color */
    transition: color 0.3s ease;
}

header nav ul li a:hover {
    color: #3b82f6; /* Tailwind blue-600 on hover */
}

/* Hero Section Styles (Now a Carousel with Captions) */
#home {
    position: relative;
    height: 100vh; /* Full viewport height */
    overflow: hidden;
}

.hero-carousel-container {
    width: 100%;
    height: 100%;
}

.hero-carousel-inner {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.hero-carousel-item {
    min-width: 100%; /* Ensure each item takes full width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    background-size: cover; /* Ensure background image covers the item */
    background-position: center; /* Center the background image */
    position: relative; /* Needed to position the caption absolutely within the item */
}

/* Style for the caption overlay within each carousel item */
.hero-caption {
    position: absolute;
    inset: 0; /* Cover the entire carousel item */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    z-index: 10; /* Ensure text is above the background image but below the main overlay */
    padding: 1rem; /* Add some padding */
    /* Add a semi-transparent background to the caption text container */
    background-color: rgba(0, 0, 0, 0.4); /* Black with 40% opacity */
}

.hero-caption .container {
    /* Ensure container styles apply within the caption */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}


#home h1 {
    font-size: 2.5rem; /* Default font size */
    font-weight: 700; /* Bold font weight */
    margin-bottom: 1rem;
}

#home p {
    font-size: 1.125rem; /* Default paragraph font size */
    margin-bottom: 0; /* Remove bottom margin as it's within the caption div */
}


/* Overlay for darkening effect */
#home > .absolute.inset-0.bg-black {
    z-index: 5; /* Ensure the darkening overlay is below the captions */
}


/* Carousel Navigation Buttons (Shared styles with gallery carousel if it were present) */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: white;
    border: none;
    padding: 0.75rem; /* Increased padding for larger touch target */
    cursor: pointer;
    z-index: 30; /* Ensure buttons are above overlay and captions */
    border-radius: 50%; /* Circular buttons */
    transition: background-color 0.3s ease;
    display: flex; /* Use flex to center icon */
    align-items: center;
    justify-content: center;
}

.carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-btn.prev {
    left: 1rem; /* Distance from the left edge */
}

.carousel-btn.next {
    right: 1rem; /* Distance from the right edge */
}

/* Carousel Indicators (Shared styles with gallery carousel if it were present) */
.carousel-indicators {
    position: absolute;
    bottom: 1rem; /* Distance from the bottom */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem; /* Space between indicators */
    z-index: 30; /* Ensure indicators are above overlay and captions */
}

.indicator {
    width: 0.75rem; /* Indicator size */
    height: 0.75rem; /* Indicator size */
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.indicator.active {
    background-color: white;
}


/* Service Brands Section */
#service-brands {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: #e5e7eb; /* Tailwind gray-200 */
    text-align: center;
}

#service-brands h2 {
    font-size: 2.25rem; /* Tailwind text-3xl */
    font-weight: 700; /* Bold */
    margin-bottom: 2rem;
}

#service-brands p {
    font-size: 1.125rem; /* Tailwind text-lg */
    margin-bottom: 3rem;
}

#service-brands .flex-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem; /* Gap between brand items */
}


.brand-item {
    background-color: #fff; /* White background */
    padding: 1.5rem; /* Tailwind p-6 */
    border-radius: 0.5rem; /* Tailwind rounded-lg */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Tailwind shadow-md */
    width: 12rem; /* Tailwind w-48 */
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.brand-item:hover {
    transform: translateY(-5px);
}

.brand-item i {
    color: #3b82f6; /* Tailwind blue-600 */
    font-size: 2.5rem; /* Tailwind text-4xl */
    margin-bottom: 1rem;
}

.brand-item h3 {
    font-size: 1.25rem; /* Tailwind text-xl */
    font-weight: 600; /* Semibold */
}

.brand-item p {
    font-size: 0.875rem; /* Tailwind text-sm */
    margin-top: 0.5rem;
    margin-bottom: 0; /* Remove default paragraph margin */
}


/* About Us Section */
#about {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: #f9fafb; /* Tailwind gray-100 */
}

#about .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#about .w-full.md\:w-1\/2 {
    width: 100%; /* Default to full width */
    margin-bottom: 2rem; /* Add bottom margin */
}

#about h2 {
    font-size: 2.25rem; /* Tailwind text-3xl */
    font-weight: 700; /* Bold */
    margin-bottom: 1.5rem;
}

#about p {
     font-size: 1.125rem; /* Tailwind text-lg */
     margin-bottom: 1rem;
}

#about img {
    max-width: 100%; /* Ensure image is responsive */
    height: auto;
    border-radius: 0.5rem; /* Tailwind rounded-lg */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Tailwind shadow-md */
}


/* Services Section */
#services {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: #e5e7eb; /* Tailwind gray-200 */
}

#services h2 {
    font-size: 2.25rem; /* Tailwind text-3xl */
    font-weight: 700; /* Bold */
    text-align: center;
    margin-bottom: 3rem;
}

.service-category {
    margin-bottom: 3rem;
}

.service-category h3 {
    font-size: 1.75rem; /* Tailwind text-2xl */
    font-weight: 600; /* Semibold */
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #3b82f6; /* Tailwind blue-600 */
    padding-bottom: 10px;
}

.service-category h3 i {
    margin-right: 0.75rem; /* Space between icon and text */
    color: #3b82f6; /* Tailwind blue-600 */
}

.service-category p {
     font-size: 1.125rem; /* Tailwind text-lg */
     margin-bottom: 1.5rem;
}

.service-category ul {
    list-style: disc;
    list-style-position: inside;
    font-size: 1.125rem; /* Tailwind text-lg */
    margin-top: 1rem;
}

.service-category ul li {
    margin-bottom: 0.5rem;
}

.service-category .grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 2rem; /* Gap between grid items */
}

.service-category .grid h4 {
    font-size: 1.25rem; /* Tailwind text-xl */
    font-weight: 600; /* Semibold */
    margin-bottom: 0.75rem;
}


/* Why Choose Us Section */
#why-choose-us {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: #f9fafb; /* Tailwind gray-100 */
}

#why-choose-us h2 {
    font-size: 2.25rem; /* Tailwind text-3xl */
    font-weight: 700; /* Bold */
    text-align: center;
    margin-bottom: 3rem;
}

#why-choose-us .grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 2rem; /* Gap between grid items */
}

#why-choose-us .bg-white {
    background-color: #fff; /* White background */
    padding: 1.5rem; /* Tailwind p-6 */
    border-radius: 0.5rem; /* Tailwind rounded-lg */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Tailwind shadow-md */
}

#why-choose-us h3 {
    font-size: 1.25rem; /* Tailwind text-xl */
    font-weight: 600; /* Semibold */
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

#why-choose-us h3 i {
    margin-right: 0.75rem; /* Space between icon and text */
    color: #3b82f6; /* Tailwind blue-600 */
}

#why-choose-us p {
     font-size: 1.125rem; /* Tailwind text-lg */
     margin-bottom: 0; /* Remove default paragraph margin */
}


/* Testimonials Section */
#testimonials {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: #e5e7eb; /* Tailwind gray-200 */
}

#testimonials h2 {
    font-size: 2.25rem; /* Tailwind text-3xl */
    font-weight: 700; /* Bold */
    text-align: center;
    margin-bottom: 3rem;
}

#testimonials p {
    font-size: 1.125rem; /* Tailwind text-lg */
    text-align: center;
    margin-bottom: 2rem;
}

#testimonials .grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 2rem; /* Gap between grid items */
}

.testimonial-item {
    background-color: #fff; /* White background */
    padding: 1.5rem; /* Tailwind p-6 */
    border-radius: 0.5rem; /* Tailwind rounded-lg */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Tailwind shadow-md */
    transition: transform 0.3s ease-in-out;
}

.testimonial-item:hover {
    transform: translateY(-5px);
}

.testimonial-item p:first-of-type {
    font-style: italic;
    margin-bottom: 1rem;
}

.testimonial-item p:last-of-type {
    font-weight: 600; /* Semibold */
    text-align: right;
    margin-bottom: 0; /* Remove default paragraph margin */
}


/* Meet the Team Section */
#team {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: #f9fafb; /* Tailwind gray-100 */
}

#team h2 {
    font-size: 2.25rem; /* Tailwind text-3xl */
    font-weight: 700; /* Bold */
    text-align: center;
    margin-bottom: 3rem;
}

#team .grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 2rem; /* Gap between grid items */
}


.team-member {
    background-color: #fff; /* White background */
    padding: 1.5rem; /* Tailwind p-6 */
    border-radius: 0.5rem; /* Tailwind rounded-lg */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Tailwind shadow-md */
    text-align: center;
     transition: transform 0.3s ease-in-out;
}

.team-member:hover {
    transform: translateY(-5px);
}

.team-member img {
    width: 9.375rem; /* Tailwind w-48 (approx) */
    height: 9.375rem; /* Tailwind h-48 (approx) */
    border-radius: 9999px; /* Tailwind rounded-full */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    border: 3px solid #3b82f6; /* Tailwind blue-600 */
}

.team-member h3 {
    font-size: 1.25rem; /* Tailwind text-xl */
    font-weight: 600; /* Semibold */
    margin-bottom: 0.5rem;
}

.team-member p {
    color: #3b82f6; /* Tailwind blue-600 */
    margin-bottom: 1rem;
}

.team-member ul {
    list-style: disc;
    list-style-position: inside;
    text-align: left;
    font-size: 0.875rem; /* Tailwind text-sm */
}

.team-member ul li {
    margin-bottom: 0.25rem;
}


/* Contact Us Section */
#contact {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: #fff; /* White background */
}

#contact h2 {
    font-size: 2.25rem; /* Tailwind text-3xl */
    font-weight: 700; /* Bold */
    text-align: center;
    margin-bottom: 3rem;
}

#contact .flex-wrap {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem; /* Counteract inner padding */
    margin-right: -1rem; /* Counteract inner padding */
}

#contact .w-full.md\:w-1\/2 {
     width: 100%; /* Default to full width */
     padding-left: 1rem; /* Add inner padding */
     padding-right: 1rem; /* Add inner padding */
     margin-bottom: 2rem; /* Add bottom margin */
}

.contact-info {
    background-color: #f3f4f6; /* Tailwind gray-100 */
    padding: 1.5rem; /* Tailwind p-6 */
    border-radius: 0.5rem; /* Tailwind rounded-lg */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Tailwind shadow-md */
    height: 100%; /* Ensure it takes full height of the column */
}

.contact-info h3 {
    font-size: 1.25rem; /* Tailwind text-xl */
    font-weight: 600; /* Semibold */
    margin-bottom: 1rem;
}

.contact-info p {
    font-size: 1.125rem; /* Tailwind text-lg */
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start; /* Align icon and text at the top */
}

.contact-info p i {
    margin-right: 0.5rem; /* Space between icon and text */
    color: #3b82f6; /* Tailwind blue-600 */
    margin-top: 0.25rem; /* Adjust icon vertical alignment */
}

.contact-info p a {
    color: #3b82f6; /* Tailwind blue-600 */
    text-decoration: none;
}

.contact-info p a:hover {
    text-decoration: underline;
}

.map-container {
    background-color: #f3f4f6; /* Tailwind gray-100 */
    padding: 0.5rem; /* Tailwind p-2 */
    border-radius: 0.5rem; /* Tailwind rounded-lg */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Tailwind shadow-md */
    height: 100%; /* Ensure it takes full height of the column */
    overflow: hidden; /* Hide any overflow from the iframe */
}

.map-container iframe {
    width: 100%;
    height: 450px; /* Keep a reasonable height */
    border: 0;
    border-radius: 0.25rem; /* Match container border-radius */
}


/* Footer Styles */
footer {
    background-color: #1f2937; /* Tailwind gray-800 */
    color: white;
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
}

footer p {
    font-size: 1rem; /* Default font size */
}


/* Responsive Design - Media Queries */

/* Medium screens and up */
@media (min-width: 768px) {
    #about .w-full.md\:w-1\/2 {
        width: 50%; /* Two columns on medium screens and up */
        margin-bottom: 0; /* Remove bottom margin */
    }

    #about .w-full.md\:w-1\/2:first-child {
        padding-right: 2rem; /* Add space between text and image */
    }

    #about .w-full.md\:w-1\/2:last-child {
        padding-left: 2rem; /* Add space between text and image */
    }

    .service-category .grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid for services */
    }

    #why-choose-us .grid {
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid for why choose us */
    }

    #testimonials .grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid for testimonials */
    }

    #team .grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid for team */
    }

     #contact .w-full.md\:w-1\/2 {
         width: 50%; /* Two columns on medium screens and up */
         margin-bottom: 0; /* Remove bottom margin */
     }
}

/* Large screens and up */
@media (min-width: 1024px) {
    #home h1 {
        font-size: 3.75rem; /* Tailwind text-6xl */
    }

    #home p {
        font-size: 1.25rem; /* Tailwind text-xl */
    }

    #service-brands h2,
    #about h2,
    #services h2,
    #why-choose-us h2,
    #testimonials h2,
    #team h2,
    #contact h2 {
         font-size: 3rem; /* Tailwind text-4xl */
    }

    header nav ul {
        gap: 1.5rem; /* Increased space between nav links */
    }
}

/* Extra Large screens and up */
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}


/* Small screens (less than 768px) specific adjustments */
@media (max-width: 767px) {
    body {
        padding-top: 100px; /* Adjust padding for smaller screens if header stacks */
    }

    header .container {
        flex-direction: column;
        align-items: center;
    }

    header nav ul {
        margin-top: 0.75rem;
        justify-content: center;
        flex-wrap: wrap; /* Allow nav links to wrap */
        gap: 0.75rem; /* Reduced gap for smaller screens */
    }

    #home h1 {
        font-size: 2rem; /* Further reduce font size on very small screens */
    }

    #home p {
        font-size: 1rem; /* Further reduce font size on very small screens */
    }

    .service-category h3 {
        font-size: 1.5rem; /* Adjust service category title size */
    }

    .service-category p,
    .service-category ul,
    #why-choose-us p,
    #testimonials p,
    .contact-info p {
        font-size: 1rem; /* Adjust paragraph font size */
    }

    .team-member img {
        width: 7.5rem; /* Adjust team member image size */
        height: 7.5rem;
    }

    .team-member h3 {
        font-size: 1.1rem; /* Adjust team member name size */
    }

    .team-member ul {
        font-size: 0.8rem; /* Adjust team member list font size */
    }

    .contact-info h3 {
         font-size: 1.1rem; /* Adjust contact info title size */
    }

    .map-container iframe {
        height: 300px; /* Reduce map height on smaller screens */
    }

     .carousel-btn {
        padding: 0.5rem; /* Reduce button padding */
     }
}
/*for tabs added */
/* Style for justified text within sections */
#about p,
#services .service-category p,
#services .service-category ul,
.radiology-tab-content p { /* Added for radiology tab content */
    text-align: justify;
}

/* Styles for active and inactive tabs */
.radiology-tab-button.active {
    border-color: #3B82F6; /* blue-500 */
    color: #3B82F6; /* blue-500 */
    background-color: #EFF6FF; /* blue-50 */
}
.radiology-tab-content {
    display: none; /* Hide inactive tabs */
}
.radiology-tab-content.active {
    display: block; /* Show active tab */
}

/* cardiac care*/
/* Generic styles for tabs */
.tab-button.active { /* Applied to both radiology-tab-button and cardiac-tab-button */
    border-color: #3B82F6; /* blue-500 */
    color: #3B82F6; /* blue-500 */
    background-color: #EFF6FF; /* blue-50 */
}
.tab-content { /* Applied to both radiology-tab-content and cardiac-tab-content */
    display: none;
}
.tab-content.active {
    display: block;
}
#about p,
 #services .service-category > p, /* Direct p child of service-category */
 #services .service-category ul,
 .tab-content p { /* Generic for all tab content paragraphs */
     text-align: justify;
 }  

 .tab-content p,
 .tab-content ul li { /* For text justification within tabs */
     text-align: justify;
 }
 .tab-content ul { /* Indentation for lists within tabs */
    padding-left: 1.25rem;
    list-style-position: outside; /* Ensures bullets are outside the text block */
 }
 .tab-content ul li {
    margin-bottom: 0.5rem;
 }.tab-content p,
 .tab-content ul li { /* For text justification within tabs */
     text-align: justify;
 }
 .tab-content ul { /* Indentation for lists within tabs */
    padding-left: 1.25rem;
    list-style-position: outside; /* Ensures bullets are outside the text block */
 }
 .tab-content ul li {
    margin-bottom: 0.5rem;
 }