.header-section {
    position: relative;
    width: 100%;
    height: 400px; /* Height of the header image area */
    display: flex;
    align-items: center; /* Vertically center the header-content */
    /* Removed justify-content: center; to allow text-align: left to position text */
    overflow: hidden;
}

/* Style for the image directly inside .header-section */
.header-section img {
    position: absolute; /* Position the image absolutely within its parent */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire section without distortion */
    z-index: 0; /* Place the image at the lowest layer */
}

/* Blue gradient overlay for the FULL banner */
.header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Gradient covers the FULL width of the banner */
    height: 100%;
    /* Gradient from a solid blue on the left to a slightly transparent blue on the right */
    background: linear-gradient(to right, rgba(41, 128, 185, 0.7), rgba(52, 152, 219, 0.4)); /* Adjusted gradient for full coverage */
    z-index: 1; /* Place the gradient above the image */
}

/* Styling for the banner text (e.g., "Retina Services") */
.header-content {
    position: relative; /* Essential for z-index to work against absolute/fixed elements */
    z-index: 2; /* Place the text at the highest layer, above gradient and image */
    color: white; /* White text color */
    font-size: 3rem; /* Large font size */
    font-weight: bold; /* Bold text */
    text-align: left; /* Align text to the left */
    padding: 0 5rem; /* Add left padding to move it from the very edge */
    width: 100%; /* Ensure it takes full width to respect padding */
    box-sizing: border-box; /* Include padding in the width calculation */
}


/* General Content Section Styling (for What is Retina, Common Retinal Conditions, Treatment for Retinal Conditions, etc.) */
.content-section {
    background-color: #f3f4f6; /* Same as body background */
    padding: 4rem 2rem; /* Ample padding around content sections */
    display: flex;
    flex-direction: column;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto; /* Center the content wrapper */
    padding: 0 1rem; /* Inner padding for content */
}

.content-wrapper h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #3498db; /* Blue color for heading */
    margin-bottom: 2rem;
    text-align: center;
}

.content-wrapper h3 {
    font-size: 2rem;
    font-weight: bold;
    color: #3498db; /* Blue color for subheading */
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

.content-wrapper h4 {
    font-size: 1.5rem; /* Sub-subheading for detailed points */
    font-weight: bold;
    color: #3498db;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.content-wrapper p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    color: #555;
    text-align: justify; /* Justified text */
}

/* Styling for the "What Is Retina?" section with image and text */
.image-text-section {
    display: flex;
    flex-direction: row; /* Default layout: image on left, text on right */
    gap: 3rem; /* Space between image and text */
    align-items: flex-start; /* Align items to the top */
    background-color: white; /* Changed to white background */
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.image-text-section .image-placeholder {
    flex: 1; /* Allows the image to take up available space */
    min-width: 300px; /* Minimum width for the image placeholder */
    max-width: 40%; /* Maximum width for the image placeholder */
    height: auto; /* Height adjusts with content */
    overflow: hidden; /* Ensure content respects border-radius */
}

/* Style for the image inside the image-placeholder */
.image-text-section .image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures the entire image fits within the box */
    border-radius: 0.5rem; /* Apply border-radius to the image itself */
}

.image-text-section .text-content {
    flex: 2; /* Allows the text to take up more space */
    color: #555;
}

.image-text-section .text-content h3 {
    color: #2c3e50; /* Darker blue for headings */
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

.image-text-section .text-content p {
    margin-bottom: 1rem;
}


/* Styling for the two-column sections (Common Retinal Conditions and Treatment for Retinal Conditions) */
.two-column-section {
    background-color: #f3f4f6; /* Same as body background */
    padding: 2rem;
}

.two-column-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); /* Two columns, responsive */
    gap: 2rem; /* Space between columns */
}

.column-box {
    background: linear-gradient(to right, #e0f7fa, #b2ebf2);  /* White background for each column */
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Subtle shadow */
}

.column-box h3 {
    color: #2c3e50;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.column-box ul {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin-bottom: 1rem;
}

.column-box ul li {
    padding-left: 1.5rem; /* Space for custom bullet */
    margin-bottom: 0.5rem;
    position: relative;
    color: #555;
}

.column-box ul li::before {
    content: '\2022'; /* Unicode character for a bullet */
    color: #3498db; /* Blue bullet */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1.5em;
    position: absolute;
    left: 0;
}

.column-box p {
    color: #555;
}

/* Styling for the horizontal lines within content */
.horizontal-line {
    border: none;
    border-top: 1px solid #3498db; /* Changed to blue line */
    margin: 2rem 0;
}
/* Styling for the new content blocks (white background, shadow, rounded corners) */
.content-block-box {
    background-color: white; /* White background */
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Subtle shadow */
    margin-bottom: 2rem; /* Space between content blocks */
    color: #555;
}

.content-block-box h3 {
    color: #2c3e50;
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.content-block-box ul {
    list-style: disc; /* Default bullet points for lists inside content blocks */
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.content-block-box ul li {
    margin-bottom: 0.5rem;
}


/* Responsive Design for the header section */
@media (max-width: 1024px) {
    .header-content {
        font-size: 2.8rem;
        padding: 0 4rem;
    }
}

@media (max-width: 768px) {
    .header-section {
        height: 300px; /* Adjust height for smaller screens */
    }
    .header-section::before {
        width: 100%; /* Ensure full width gradient on smaller screens too */
        background: linear-gradient(to right, rgba(41, 128, 185, 0.8), rgba(52, 152, 219, 0.3)); /* Adjusted opacity for smaller screens */
    }
    .header-content {
        font-size: 2.5rem; /* Smaller font size for mobile */
        padding: 0 2rem;
    }

    .image-text-section {
        flex-direction: column; /* Stack image and text vertically */
        align-items: center;
        gap: 2rem;
    }

    .image-text-section .image-placeholder {
        max-width: 80%; /* Allow image to be wider on smaller screens */
        min-width: unset; /* Remove min-width restriction */
    }

    .two-column-grid {
        grid-template-columns: 1fr; /* Single column layout for two-column sections */
    }
}

@media (max-width: 480px) {
    .header-section {
        height: 250px; /* Further adjust height for very small screens */
    }
    .header-section::before {
        width: 100%; /* Full width gradient */
        background: linear-gradient(to bottom, rgba(41, 128, 185, 0.8), rgba(52, 152, 219, 0.3)); /* Change to top-to-bottom for better text visibility on very small screens */
    }
    .header-content {
        font-size: 2rem;
        text-align: center; /* Center text if gradient is full width for mobile */
        padding: 0 1rem;
    }

    .content-section, .two-column-section {
        padding: 2rem 1rem; /* Reduce overall section padding */
    }

    .image-text-section .image-placeholder {
        max-width: 100%; /* Full width for image on very small screens */
    }
}