/* About Page Hero Section */
.about-hero-section {
    padding: 10px; /* Remove default padding as content will handle it */
    overflow: hidden; /* Ensure no overflow issues from images */
    background-color: #f8f9fa; /* Light background for the section */
}

.about-hero-image {
    height: 500px; /* Fixed height for the image container */
    overflow: hidden; /* Hide overflowing parts of the image */
}

    .about-hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Cover the container while maintaining aspect ratio */
        display: block; /* Remove extra space below image */
    }

.about-hero-content {
    padding: 3rem; /* Add padding around the text content */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content if there's extra space */
    height: 100%; /* Ensure content takes full height of its column */
}

.about-hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #800000; /* Maroon color for the title */
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.75rem;
}

    .about-hero-title::after {
        content: '';
        display: block;
        width: 100px;
        height: 5px;
        background-color: #BF2600; /* Red underline for the title */
        margin-top: 10px;
    }

.about-hero-summary {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1rem;
}

/* Responsive Adjustments */
@media (max-width: 991.98px) { /* For tablets and smaller */
    .about-hero-section .row {
        flex-direction: column; /* Stack image and text vertically */
    }

    .about-hero-image {
        height: 350px; /* Adjust height for smaller screens */
    }

    .about-hero-content {
        padding: 2rem;
        text-align: center; /* Center text on smaller screens */
    }

    .about-hero-title {
        font-size: 2.2rem;
    }

        .about-hero-title::after {
            margin: 10px auto 0 auto; /* Center underline on smaller screens */
        }
}

@media (max-width: 767.98px) { /* For mobile phones */
    .about-hero-image {
        height: 250px;
    }

    .about-hero-content {
        padding: 1.5rem;
    }

    .about-hero-title {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }

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