/* Base styles for the entire document */
body {
    font-family: "Inter", sans-serif; /* Sets the default font to Inter */
    padding-top: 8rem; /* Initial padding to prevent content from being hidden by the fixed header. Adjusted dynamically by JavaScript. */
    overflow-x: hidden; /* Prevents horizontal scrollbar during menu transitions */
    background-color: #f3f4f6; /* Tailwind's bg-gray-100 */
}

/* Header styling and transitions */
header {
    transition: all 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for all properties and transform */
    background-color: #ffffff; /* White background */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Tailwind's shadow-2xl */
    padding: 1rem 1rem; /* py-4 px-4 equivalent */
    border-radius: 0.5rem; /* rounded-lg */
    position: fixed; /* Fixed position at the top */
    top: 0;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for true centering */
    width: 80%; /* w-4/5 */
    z-index: 50; /* High z-index to stay on top */
    display: flex; /* Flex container for layout */
    flex-direction: column; /* Stacks items vertically on small screens */
    align-items: center; /* Centers items horizontally in column layout */
    justify-content: space-between; /* Distributes space between items */
}

/* Responsive adjustments for header */
@media (min-width: 640px) { /* sm breakpoint */
    header {
        padding: 1.5rem 1.5rem; /* sm:py-6 sm:px-6 */
        flex-direction: row; /* Switches to row layout on larger screens */
    }
}
@media (min-width: 768px) { /* md breakpoint */
    header {
        padding: 2rem 2rem; /* md:py-8 md:px-8 */
    }
}

/* Logo styling within the header */
header img {
    height: 3rem; /* h-12 equivalent for small screens */
    transition: height 0.3s ease-in-out; /* Smooth height transition */
    border-radius: 0.375rem; /* rounded-md */
    object-fit: contain; /* Ensures logo is fully visible */
    flex-shrink: 0; /* Prevents logo from shrinking */
    margin-bottom: 1rem; /* mb-4 for vertical spacing on small screens */
}
@media (min-width: 640px) { /* sm breakpoint */
    header img {
        height: 4rem; /* sm:h-16 */
        margin-bottom: 0; /* Removes bottom margin on larger screens */
    }
}
@media (min-width: 768px) { /* md breakpoint */
    header img {
        height: 5rem; /* md:h-20 */
    }
}
@media (min-width: 1024px) { /* lg breakpoint */
    header img {
        height: 6rem; /* lg:h-24 */
    }
}

/* Contact info and navigation container */
header > div:last-child {
    display: none; /* Hidden by default on small screens */
    flex-grow: 1; /* Allows it to take available space */
    flex-direction: column; /* Stacks children vertically */
    align-items: flex-end; /* Aligns items to the right */
}
@media (min-width: 640px) { /* sm breakpoint */
    header > div:last-child {
        display: flex; /* Visible on larger screens */
    }
}

/* Contact info links */
.contact-info-desktop {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem; /* mb-2 */
    color: #4b5563; /* text-gray-600 */
}
.contact-info-desktop a {
    font-size: 0.625rem; /* text-[0.5rem] */
    padding: 0.25rem; /* p-1 */
    border-radius: 0.375rem; /* rounded-md */
    transition: font-size 0.3s ease-in-out; /* Smooth font size transition */
}
.contact-info-desktop span {
    color: #9ca3af; /* text-gray-400 */
}
.contact-info-desktop a:hover {
    color: #2563eb; /* hover:text-blue-600 */
    transition: color 0.3s ease-in-out; /* Smooth color transition */
}
@media (min-width: 640px) { /* sm breakpoint */
    .contact-info-desktop a {
        font-size: 0.75rem; /* sm:text-xs */
    }
}
@media (min-width: 768px) { /* md breakpoint */
    .contact-info-desktop a {
        font-size: 0.875rem; /* md:text-sm */
    }
}
@media (min-width: 1024px) { /* lg breakpoint */
    .contact-info-desktop a {
        font-size: 1rem; /* lg:text-base */
    }
}

/* Desktop navigation links */
header nav ul {
    display: flex;
    font-weight: 500; /* font-medium */
    justify-content: flex-end; /* justify-end */
}
header nav ul li a {
    color: #374151; /* text-gray-700 */
    padding: 0.25rem; /* p-1 */
    border-radius: 0.375rem; /* rounded-md */
    padding-bottom: 0.25rem; /* pb-1 */
    border-bottom: 2px solid transparent; /* border-b-2 border-transparent */
    transition: all 0.3s ease-in-out; /* Smooth transition */
}
header nav ul li a:hover {
    color: #2563eb; /* hover:text-blue-600 */
    border-color: #2563eb; /* hover:border-blue-600 */
}
/* Responsive font sizes and spacing for nav links */
@media (min-width: 640px) { /* sm breakpoint */
    header nav ul {
        font-size: 0.875rem; /* sm:text-sm */
        gap: 0.5rem; /* sm:space-x-2 */
    }
}
@media (min-width: 768px) { /* md breakpoint */
    header nav ul {
        font-size: 1rem; /* md:text-base */
        gap: 1rem; /* md:space-x-4 */
    }
}
@media (min-width: 1024px) { /* lg breakpoint */
    header nav ul {
        font-size: 1.125rem; /* lg:text-lg */
        gap: 1.5rem; /* lg:space-x-6 */
    }
}

/* Scrolled header state */
header.scrolled {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
header.scrolled img {
    height: 2.5rem !important; /* Adjusted to h-10 equivalent */
}
header.scrolled nav ul li a {
    font-size: 0.9rem;
}
header.scrolled .contact-info-desktop a {
    font-size: 0.75rem;
}

/* Desktop dropdown menu */
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    min-width: 200px;
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    top: 100%;
    left: 0;
}
.dropdown-menu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 0.9rem;
}
.dropdown-menu a:hover {
    background-color: #f1f1f1;
    color: #2563eb;
}
.dropdown:hover .dropdown-menu {
    display: block;
}

/* Mobile menu (hamburger icon and slide-out menu) */
#menu-button {
    display: block; /* Visible by default */
    padding: 0.5rem; /* p-2 */
    border-radius: 0.375rem; /* rounded-md */
    color: #374151; /* text-gray-700 */
}
#menu-button:hover {
    background-color: #e5e7eb; /* hover:bg-gray-200 */
}
#menu-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* focus:ring-2 focus:ring-inset focus:ring-blue-500 */
}
@media (min-width: 640px) { /* sm breakpoint */
    #menu-button {
        display: none; /* Hidden on larger screens */
    }
}

#mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background-color: white;
    z-index: 999;
    transform: translateX(-100%); /* Starts off-screen */
    transition: transform 0.3s ease-in-out; /* Smooth slide transition */
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
body.menu-open #mobile-menu {
    transform: translateX(0); /* Slides in */
}
body.menu-open header,
body.menu-open .image-overlay-container,
body.menu-open section:not(#mobile-menu) { /* Target all main content sections */
    transform: translateX(250px); /* Pushes content to the right */
    transition: transform 0.3s ease-in-out;
}
#close-menu-button {
    position: absolute;
    top: 1rem; /* top-4 */
    right: 1.5rem; /* right-6 */
    padding: 0.5rem; /* p-2 */
    border-radius: 0.375rem; /* rounded-md */
    color: #374151; /* text-gray-700 */
}
#close-menu-button:hover {
    background-color: #e5e7eb; /* hover:bg-gray-200 */
}
#close-menu-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* focus:ring-2 focus:ring-inset focus:ring-blue-500 */
}
#mobile-menu ul {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 */
    font-size: 1.5rem; /* text-2xl */
    font-weight: 500; /* font-medium */
    color: #1f2937; /* text-gray-800 */
}
#mobile-menu ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0; /* py-2 */
}
#mobile-menu ul li a:hover {
    color: #2563eb; /* hover:text-blue-600 */
    transition: color 0.3s ease-in-out;
}
.mobile-submenu {
    display: none; /* Hidden by default */
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
    font-size: 1.25rem; /* text-xl */
    font-weight: 400; /* font-normal */
    color: #4b5563; /* text-gray-600 */
    margin-top: 0.5rem; /* mt-2 */
}
.mobile-submenu.open {
    display: flex; /* Show when open */
}

/* NEW CSS for the image overlay section - REWRITTEN */
.image-overlay-container {
    position: relative; /* Establishes a positioning context for children */
    width: 80%; /* Matches navbar width for consistent layout */
    margin: 1rem auto 0 auto; /* Centers the container horizontally and adds top margin */
    border-radius: 0.5rem; /* Rounded corners */
    overflow: hidden; /* Ensures content and background stay within rounded corners */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Strong shadow */
    
    /* Background image properties */
    background-image: url('../images/operatingroomequipment.jpg');
    background-size: cover; /* Ensures the image covers the entire container */
    background-position: center; /* Centers the background image */
    background-repeat: no-repeat; /* Prevents image repetition */
    
    min-height: 60vh; /* Minimum height for larger viewports (60% of viewport height) */
    /* Crucially, no fixed height here. The content inside will dictate the final height if it exceeds min-height. */
    
    display: flex; /* Flex container to center the overlay content */
    align-items: center; /* Vertically centers the overlay content */
    justify-content: center; /* Horizontally centers the overlay content */
}

/* The main overlay content container */
.image-overlay-content {
    color: white; /* Text color */
    background-color: transparent; /* Made background darker (changed from 0.5 to 0.7) */
    width: 100%; /* Ensures it fills the width of its parent (.image-overlay-container) */
    /* Height is explicitly set to auto to allow content to dictate height */
    height: auto; 
    min-height: 100%; /* Ensures it covers the full height of the parent, even if parent is just min-height */
    padding: 2rem; /* Consistent padding inside the overlay */
    border-radius: 0.5rem; /* Matches parent's border-radius */

    /* Default flex properties for mobile (vertical stacking) */
    display: flex;
    flex-direction: column;
    text-align: center; /* Center text for mobile */
    align-items: center; /* Center items horizontally in column layout */
    justify-content: center; /* Center items vertically in column layout */
}

/* Responsive adjustments for the image overlay content for larger screens */
@media (min-width: 768px) { /* md breakpoint and up (common computer, laptop, and tablet viewports) */
    .image-overlay-content {
        flex-direction: row; /* Switches to horizontal alignment */
        text-align: left; /* Aligns text to the left in row layout */
        align-items: stretch; /* Stretches items to fill the height of the container */
        padding: 3rem; /* Increased padding for larger screens */
    }
    /* Text section within the overlay */
    .image-overlay-content > div:first-child {
        width: 60%; /* Takes 60% width of the container */
        padding-right: 1.5rem; /* Adds spacing between text and buttons */
        align-items: flex-start; /* Aligns text content to the start (left) */
        text-align: left; /* Ensures text is left-aligned */
    }
    /* Button section within the overlay */
    .image-overlay-content > div:last-child {
        width: 40%; /* Takes 40% width of the container */
        padding-left: 1.5rem; /* Adds spacing between text and buttons */
        align-items: center; /* Centers buttons horizontally */
    }
}

/* Text content div within the overlay - ensures it grows and centers content */
.image-overlay-content > div:first-child {
    flex-grow: 1; /* Allows the text div to take up available vertical space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically within its own space */
}

/* Responsive font sizes for H1 within the overlay */
.image-overlay-content h1 {
    font-weight: bold;
    margin-bottom: 1rem;
    font-size: 1.25rem; /* Default for very small mobile (e.g., <480px) */
}
@media (min-width: 480px) { /* Small phones */
    .image-overlay-content h1 {
        font-size: 1.5rem;
    }
}
@media (min-width: 640px) { /* sm breakpoint (larger phones, small tablets) */
    .image-overlay-content h1 {
        font-size: 1.75rem;
    }
}
@media (min-width: 768px) { /* md breakpoint (tablets, small laptops) */
    .image-overlay-content h1 {
        font-size: 2rem;
    }
}
@media (min-width: 1024px) { /* lg breakpoint (laptops, desktops) */
    .image-overlay-content h1 {
        font-size: 2.25rem;
    }
}
@media (min-width: 1366px) { /* Specific for 1366x768 and up */
    .image-overlay-content h1 {
        font-size: 2.75rem;
    }
}
@media (min-width: 1600px) { /* Extra large desktops */
    .image-overlay-content h1 {
        font-size: 3rem;
    }
}

/* Responsive font sizes for P within the overlay */
.image-overlay-content p {
    line-height: 1.6;
    font-size: 0.75rem; /* Default for very small mobile */
}
@media (min-width: 480px) {
    .image-overlay-content p {
        font-size: 0.875rem;
    }
}
@media (min-width: 640px) {
    .image-overlay-content p {
        font-size: 1rem;
    }
}
@media (min-width: 768px) {
    .image-overlay-content p {
        font-size: 0.95rem; /* Slightly smaller for better fit in horizontal layout */
    }
}
@media (min-width: 1024px) {
    .image-overlay-content p {
        font-size: 1.1rem;
    }
}
@media (min-width: 1366px) { /* Specific for 1366x768 and up */
    .image-overlay-content p {
        font-size: 1.25rem; /* Larger for 1366px */
    }
}

/* Button styling within the overlay */
.button-area a {
    display: block; /* Makes buttons block-level for vertical stacking */
    width: auto; /* Width determined by content initially */
    text-align: center;
    margin-top: 1rem; /* Spacing between buttons */
    background-color: #2563eb; /* bg-blue-600 */
    color: white;
    font-weight: 600; /* font-semibold */
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-md */
    transition: all 0.3s ease-in-out; /* Smooth transitions for hover effects */
    transform: translateY(0); /* Initial transform state */
    /* Ensure buttons are NOT blue and underlined from the general rule */
    text-decoration: none !important;
    color: white !important;
}
.button-area a:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
    transform: translateY(-0.25rem); /* hover:-translate-y-1 */
    text-decoration: none !important; /* Ensure no underline on hover */
}
.button-area a:first-child {
    margin-top: 0; /* Remove top margin for the first button */
}
.button-area a:nth-child(2) {
    background-color: #374151; /* bg-gray-700 */
}
.button-area a:nth-child(2):hover {
    background-color: #1f2937; /* hover:bg-gray-800 */
}
@media (min-width: 768px) { /* md breakpoint */
    .button-area a {
        width: 80%; /* Adjust button width for horizontal layout */
        max-width: 250px; /* Max width for buttons */
    }
}

/* Styles for images within cards */
.card-image {
    object-fit: contain; /* Ensures the entire image is visible within its container */
    object-position: center; /* Centers the image within the container */
    background-color: #ffffff; /* White background for images */
    min-height: 256px; /* min-h-[256px] */
}

/* Icon section banner */
.icon-section-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    background-image: url('../images/medical-equipment-inspection-banner.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 325px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-2xl */
}

.icon-section {
    width: 60%;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
}

.icon-card {
    padding: 1.5rem;
    text-align: center;
    color: white;
    width: 100%;
    margin-bottom: 1rem;
    display: flex; /* Added to make it a flex container */
    flex-direction: column; /* Added to stack icon and text vertically */
    align-items: center; /* Centers items horizontally within the column */
    /* Removed justify-content for more controlled spacing with margins */
    min-height: 150px; /* Keeping min-height for consistent card sizing */
}
.icon-card img {
    margin-bottom: 0.5rem; /* Small space below the image */
}
.icon-card h3 {
    margin-top: 0.5rem; /* Small space below the image and above the heading */
    margin-bottom: 0.5rem; /* Small space between heading and paragraph */
}
.icon-card p {
    margin-top: 0; /* Remove default margin that might interfere */
    margin-bottom: 0; /* Ensure no extra bottom margin */
}


@media (min-width: 640px) { /* sm breakpoint */
    .icon-card {
        width: calc(50% - 2rem);
        margin-bottom: 1rem;
    }
}

@media (min-width: 1024px) { /* lg breakpoint */
    .icon-card {
        width: calc(33.333% - 2rem);
        margin-bottom: 0;
    }
}

/* Responsive styles for general cards (Preventive Maintenance and Service Area) */
.responsive-card {
    height: auto; /* Allows content to dictate height */
    background-color: #ffffff; /* bg-white */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-2xl */
    overflow: hidden; /* Ensures content stays within rounded corners */
    display: flex;
    flex-direction: column; /* Default to column stacking on small screens */
}
.responsive-card > div:first-child { /* Image container */
    width: 100%;
}
.responsive-card > div:last-child { /* Text content container */
    width: 100%;
    padding: 1.5rem; /* p-6 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.responsive-card img {
    width: 100%;
    height: 250px; /* Fixed height for images when stacked */
    object-fit: cover;
}
.responsive-card h2 {
    font-weight: bold;
    font-size: 1.25rem; /* text-xl */
    margin-bottom: 1rem; /* mb-4 */
    color: #1f2937; /* text-gray-800 */
}
.responsive-card p {
    color: #374151; /* text-gray-700 */
    font-size: 1rem; /* text-base */
    line-height: 1.625; /* leading-relaxed */
    margin-bottom: 1rem; /* mb-4 */
}
.responsive-card p:last-of-type {
    margin-bottom: 0; /* Remove bottom margin from last paragraph */
}

@media (min-width: 640px) { /* sm breakpoint */
    .responsive-card {
        flex-direction: row; /* Switches to row layout */
    }
    .responsive-card > div:first-child { /* Image container */
        width: 40%; /* sm:w-2/5 */
    }
    .responsive-card > div:last-child { /* Text content container */
        width: 60%; /* sm:w-3/5 */
    }
    .responsive-card img {
        height: 100%; /* Image takes full height of its container */
    }
    .responsive-card h2 {
        font-size: 1.5rem; /* sm:text-2xl */
    }
}

/* Styling for ALL links EXCEPT those inside .button-area */
.image-overlay-content p a,
.responsive-card h2 a,
.responsive-card p a {
    color: #3b82f6; /* Tailwind blue-500 */
    text-decoration: underline;
}

.image-overlay-content p a:hover,
.responsive-card h2 a:hover,
.responsive-card p a:hover {
    color: #2563eb; /* Tailwind blue-600 */
}