/* Universal Box-Sizing for easier layout calculations */
*, *::before, *::after {
    box-sizing: border-box;
}

/* General Body Styles */
html, body {
    margin: 0;
    padding: 0; /* Ensure no default padding on html/body */
    height: 100%; /* Make html take full viewport height */
    width: 100%; /* Explicitly set width to 100% to help with overflow */
}

body {
    font-family: 'Poppins', sans-serif; /* Changed to Poppins font */
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures body takes at least full viewport height */
    position: relative; /* For positioning absolutely/fixed children like header and main content */
    overflow-y: auto; /* Enable vertical scrolling for the entire page content */
    overflow-x: hidden; /* Prevent horizontal scrolling and potential right-side gaps */
}

/* Background Slideshow */
.background-slideshow {
    position: fixed; /* Use fixed to ensure it covers the entire viewport and stays in place during scroll */
    top: 0;
    left: 0;
    width: 100vw; /* Covers full viewport width */
    height: 100vh; /* Covers full viewport height */
    overflow: hidden; /* Keep hidden to manage internal slide transitions without affecting page scroll */
    z-index: -1; /* Send to back */
}

.background-slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Smooth transition for slide changes */
}

.background-slideshow .slide.current {
    opacity: 1;
}

.logo-container {
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
    border-radius: 15px;
    padding: 20px 30px; /* Increased padding */
    display: inline-flex;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px); /* Glass effect */
    z-index: 10; /* Ensure it stays on top */
    margin-bottom: 30px; /* Space below the logo when centered above text */
}

.clinic-logo {
    height: 70px; /* Increased height */
    margin-right: 15px; /* Adjusted margin */
    border-radius: 10px;
    vertical-align: middle; /* Align with text */
}

/* Main Content Area */
.main-content {
    flex-grow: 1; /* Allows main content to take available space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center;
    position: relative; /* For stethoscope overlay positioning */
    z-index: 5;
    width: 100%; /* Ensure it takes full width for centering */
    padding: 20px; /* General internal padding for content */
    padding-bottom: 70px; /* Added padding-bottom to main-content to ensure it doesn't get hidden by the fixed footer */
}

.coming-soon-title {
    font-size: 4em; /* Updated font size */
    color: #333; /* Darker text for readability */
    margin-bottom: 40px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    position: relative; /* To be above the stethoscope */
    z-index: 2;
}

/* Glass effect common style */
.glass-effect {
    background-color: rgba(255, 255, 255, 0.5); /* Transparent white */
    backdrop-filter: blur(10px); /* Blurry background */
    border-radius: 20px; /* Rounded corners */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Light border */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Shadow for depth */
}

/* Center Content for Countdown Timer */
.center-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 40px; /* Space between countdown and the grid below */
    z-index: 2; /* To be above the stethoscope */
    opacity: 0; /* Hidden by default for animation */
    transform: translateY(20px); /* Start slightly below for animation */
    animation: fadeInSlideUp 0.8s ease-out forwards; /* Apply animation */
    animation-delay: 0.3s; /* Delay for staggered animation */
}

.content-grid {
    display: flex; /* Keep flex for general responsiveness */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: center; /* Center items for all screen sizes */
    align-items: center; /* Center items vertically */
    margin-top: 20px; /* Adjust spacing from title */
    position: relative;
    z-index: 2; /* To be above the stethoscope */
    width: 100%; /* Ensure it takes full width for centering */
    max-width: 1240px; /* Increased max-width to accommodate wider contact cards + padding */
    padding: 0 20px; /* Add horizontal padding to the grid to prevent it from touching edges */
}

/* Countdown Timer */
.countdown-container {
    min-width: 500px; /* Updated width as requested */
    padding: 30px 36px; /* Increased padding by 20% (25*1.2 = 30, 30*1.2 = 36) */
    border-radius: 20px;
    position: relative;
    z-index: 2; /* Above stethoscope in case of overlap */
    flex-grow: 0; /* Don't grow beyond content */
    flex-shrink: 1; /* Allow shrinking */
    transform: scale(1.2); /* Increase size by 20% */
}

.countdown-label {
    font-size: 1.8em; /* Updated font size */
    margin-bottom: 15px;
    color: #333;
    font-weight: 600;
}

.countdown-timer {
    display: flex;
    gap: 18px; /* Increased gap by 20% (15*1.2 = 18) */
}

.countdown-item {
    background-color: rgba(0, 0, 0, 0.5); /* Darker background for numbers */
    color: #fff;
    padding: 18px 30px; /* Adjusted padding by 20% (15*1.2=18, 25*1.2=30) */
    border-radius: 10px;
    font-size: 3.36em; /* Increased font size by 20% (2.8*1.2 = 3.36) */
    font-weight: bold;
    min-width: 96px; /* Increased min-width by 20% (80*1.2 = 96) */
    display: flex;
    flex-direction: column; /* Stack value and unit */
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; /* Added shadow */
    position: relative; /* For animation */
    overflow: hidden; /* Hide overflowing parts during animation */
}

.countdown-unit {
    font-size: 0.42em; /* Increased font size by 20% (0.35*1.2 = 0.42) */
    font-weight: normal;
    opacity: 0.8;
    margin-top: 6px; /* Increased margin by 20% (5*1.2 = 6) */
}

/* Animation for countdown values */
.countdown-value {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Increased transition duration */
}

.countdown-value.fade-out {
    opacity: 0;
    transform: translateY(-20px);
}

.countdown-value.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Clinic Services Card - New Layout */
.clinic-services-card {
    width: 100%; /* Occupy full width */
    max-width: 1200px; /* Match content-grid max-width */
    padding: 30px;
    border-radius: 20px;
    margin-top: 40px; /* Space from the content above */
    display: flex; /* Use flexbox for image and text layout */
    align-items: center; /* Vertically align items in the center */
    gap: 30px; /* Space between image and text */
    text-align: left; /* Default text alignment for content inside */
    opacity: 0; /* Hidden by default for animation */
    transform: translateY(20px); /* Start slightly below for animation */
    animation: fadeInSlideUp 0.8s ease-out forwards; /* Apply animation */
    animation-delay: 0.6s; /* Delay for staggered animation */
}

.clinic-image-container {
    flex-basis: 20%; /* 20% horizontal space for the image */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px; /* Padding around the image */
}

.clinic-info-image {
    width: 100%; /* Make image fill its container */
    height: auto;
    max-width: 250px; /* Max width to prevent overly large images on large screens */
    border-radius: 15px; /* Slightly rounded corners for the image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.clinic-text-content {
    flex-basis: 80%; /* 80% horizontal space for the text content */
    color: #333;
    text-align: justify; /* Justify alignment */
    padding-right: 10px; /* Add some padding to the right of the text */
}

.clinic-text-content p {
    margin-bottom: 0; /* Remove default margin */
    font-size: 1.6em; /* Increased font size */
    line-height: 1.9; /* Increased line spacing */
}

/* Contact Info Cards */
.contact-info-container {
    display: flex;
    flex-direction: column; /* Stack rows vertically */
    gap: 20px; /* Gap between rows */
    justify-content: center; /* Center rows horizontally */
    align-items: center; /* Center items vertically */
    width: 100%; /* Take full width of its flex container */
    max-width: 1240px; /* Adjusted max-width to allow all 4 wide cards */
    margin-left: auto; /* Center the flex container */
    margin-right: auto; /* Center the flex container */
    margin-top: 40px; /* Add margin to separate from clinic services card */
    opacity: 0; /* Hidden by default for animation */
    transform: translateY(20px); /* Start slightly below for animation */
    animation: fadeInSlideUp 0.8s ease-out forwards; /* Apply animation */
    animation-delay: 0.9s; /* Delay for staggered animation */
    padding-bottom: 70px;
}

.contact-row {
    display: flex;
    flex-wrap: wrap; /* Allow cards to wrap within the row */
    gap: 20px; /* Gap between cards in the row */
    justify-content: center; /* Center cards in the row */
    width: 100%;
}

.address-card-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.contact-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    min-width: 280px; /* Standard width for phone, email, whatsapp */
    max-width: 350px; /* Standard max-width */
    height: auto; /* Allow height to adjust based on content */
    padding: 20px; /* Adjust padding for better look with horizontal layout */
    border-radius: 20px;
    display: flex; /* Changed to flex for horizontal layout */
    flex-direction: row; /* Align icon and text in a row */
    align-items: center; /* Vertically center items */
    justify-content: flex-start; /* Align content to the start */
    text-align: left; /* Align text to the left within the card */
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
}

.contact-card:hover {
    transform: translateY(-5px) scale(1.02); /* Lift and slightly enlarge on hover */
    /* Added white glow effect */
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.7), 0 12px 40px 0 rgba(31, 38, 135, 0.5); /* Enhanced shadow with white glow */
}

.icon-wrapper {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; /* Prevent icon from shrinking */
    margin-right: 15px; /* Gap between icon and text */
}

.contact-icon {
    font-size: 2em;
    color: #333;
}

.contact-card h6,
.contact-card h4 {
    margin: 0; /* Remove default margin from headings */
    font-size: 1.2em; /* Adjust font size if needed for better fit */
    line-height: 1.4; /* Adjust line height for wrapped text */
    word-break: break-word; /* Break long words if necessary */
    flex-grow: 1; /* Allow text to take remaining space */
}

/* Specific style for full-width address card */
.full-width-address-card {
    min-width: 70%; /* Make it full width of its container */
    max-width: 1000px; /* Max width to constrain it on very large screens */
    justify-content: flex-start; /* Align content to the start */
    text-align: left;
}

/* Stethoscope Overlay */
.stethoscope-overlay {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%) rotate(-10deg); /* Adjust to true center and slight rotation */
    width: 100vw; /* Adjust size relative to viewport */
    height: 100vh; /* Adjust size relative to viewport */
    max-width: 1200px; /* Max width for desktop to prevent over-scaling */
    max-height: 900px; /* Max height for desktop */
    background-image: url('https://placehold.co/1200x900/FFFFFF/000000?text=Stethoscope'); /* Placeholder: Replace with your actual stethoscope image */
    background-size: contain; /* Ensure image fits within bounds */
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.2; /* Semi-transparent */
    z-index: 1; /* Below content */
    pointer-events: none; /* Allow clicks to pass through */
}

/* Footer Styles */
.footer {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    text-align: center;
    font-size: 0.9em;
    position: fixed; /* Set to fixed to always stick to the bottom of the viewport */
    bottom: 0;
    left: 0;
    z-index: 10;
    /* padding: 20px 150px; */
}

/* Keyframe for fade-in and slide-up animation */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Responsive Adjustments */
@media (max-width: 1024px) {
    .coming-soon-title {
        font-size: 2.8em;
    }

    .content-grid {
        flex-direction: column;
        gap: 30px;
        padding: 0 15px 25px 0;
        justify-content: center;
        align-items: center;
    }

    .countdown-container,
    .clinic-services-card {
        flex-basis: auto;
        max-width: none;
        width: 100%;
        transform: scale(1);
    }

    .contact-info-container {
        flex-direction: column; /* Stack contact rows on smaller screens */
        max-width: 440px;
    }

    .contact-row {
        flex-direction: column; /* Stack individual cards within the row */
        align-items: center;
    }

    .full-width-address-card {
        min-width: 280px; /* Adjust width for mobile if needed */
        max-width: 90%; /* Allow it to be more fluid on smaller screens */
        justify-content: center; /* Center content horizontally on smaller screens */
        text-align: center;
    }

    .clinic-services-card {
        flex-direction: column; /* Stack image and text vertically on smaller screens */
        text-align: center;
    }

    .clinic-image-container {
        flex-basis: auto;
        padding: 0;
        margin-bottom: 20px; /* Space between image and text when stacked */
    }

    .clinic-text-content {
        flex-basis: auto;
        padding-right: 0;
    }

    .footer {
        padding: 20px 50px; /* Adjust padding for tablets */
    }

    .logo-container {
        padding: 15px 25px; /* Adjusted padding for tablets */
        margin-bottom: 25px;
    }

    .clinic-logo {
        height: 60px; /* Adjusted logo size for tablets */
    }
}

@media (max-width: 768px) {
    .coming-soon-title {
        font-size: 2.2em;
        margin-bottom: 30px;
    }

    .countdown-timer {
        flex-wrap: wrap;
        justify-content: center;
    }

    .countdown-item {
        font-size: 2em;
        padding: 10px 15px;
        min-width: 60px;
        flex: 1 1 auto;
        margin: 5px;
    }

    .contact-info-container {
        max-width: 250px; /* Smaller max-width for contact cards container */
    }

    .contact-card {
        min-width: 250px;
        max-width: 90%; /* Allow it to be more fluid on smaller screens */
        padding: 15px;
    }

    .icon-wrapper {
        width: 50px;
        height: 50px;
        margin-right: 10px;
    }

    .contact-icon {
        font-size: 1.8em;
    }

    .contact-card h6,
    .contact-card h4 {
        font-size: 1.1em;
    }

    .stethoscope-overlay {
        width: 100vw;
        height: 100vh;
        max-width: 700px;
        max-height: 500px;
        opacity: 0.2;
        transform: translate(-50%, -50%) rotate(-5deg);
    }

    .logo-container {
        padding: 10px 20px; /* Adjusted padding for mobile */
        margin-bottom: 20px;
    }

    .clinic-logo {
        height: 50px; /* Adjusted logo size for mobile */
    }

    .footer {
        padding: 20px 20px;
    }

    /* Mobile specific centering for service blocks */
    .services-row {
        justify-content: center; /* Center blocks in mobile view */
    }
}

@media (max-width: 480px) {
    .coming-soon-title {
        font-size: 1.8em;
        margin-bottom: 20px;
        padding-top: 60px;
    }

    .countdown-timer {
        flex-wrap: wrap;
        justify-content: center;
    }

    .countdown-item {
        font-size: 1.6em;
        padding: 8px 10px;
        min-width: 45px;
    }

    .countdown-container,
    .clinic-services-card {
        min-width: 90%;
        padding: 20px;
    }

    .contact-card {
        min-width: 90%;
        padding: 10px;
    }

    .icon-wrapper {
        width: 45px;
        height: 45px;
        margin-right: 10px;
    }
    .contact-icon {
        font-size: 1.6em;
    }

    .contact-card h6,
    .contact-card h4 {
        font-size: 1em;
    }

    .stethoscope-overlay {
        max-width: 500px;
        max-height: 400px;
        opacity: 0.15;
    }

    .logo-container {
        padding: 8px 15px; /* Further adjusted padding for smaller mobile screens */
        margin-bottom: 15px;
    }

    .clinic-logo {
        height: 40px; /* Further adjusted logo size for smaller mobile screens */
    }
}

/* Smallest screens adjustments */
@media (max-width: 375px) {
    .countdown-item {
        font-size: 1.4em;
        padding: 6px 8px;
        min-width: 40px;
    }
    .contact-card {
        padding: 8px;
    }
    .icon-wrapper {
        width: 40px;
        height: 40px;
        margin-right: 8px;
    }
    .contact-icon {
        font-size: 1.4em;
    }
}