/* --- ABOUT SECTIONS --- */
.about-bar {
    background-color: #f9fafb; width: 100%; height: 100px; 
    display: flex; justify-content: center; align-items: center;
    border-bottom: 1px solid #e5e7eb; position: relative; text-align: center;
}
.about-bar::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); height: 3px; width: 40px; 
    background-color: #b91c1c; border-radius: 4px 4px 0 0;
}
.about-title {
    color: #b91c1c; font-size: 1.5rem; font-weight: 700; 
    text-transform: uppercase; letter-spacing: 1.5px;
}

.about-visual-section { padding: 40px 16px; background-color: white; display: flex; justify-content: center; }
.about-image-container {
    max-width: 1000px; width: 100%; border-radius: 12px;
    overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.about-hero-img { width: 100%; height: auto; display: block; transition: transform 0.5s; }
.about-image-container:hover .about-hero-img { transform: scale(1.02); }

.about-info-section { padding: 60px 16px; background-color: white; }
.gray-bg { background-color: #f3f4f6; }

.about-info-section:not(.gray-bg) + .about-info-section:not(.gray-bg),
.about-info-section.gray-bg + .about-info-section.gray-bg {
    padding-top: 0; margin-top: -20px;
}

.info-container { max-width: 1000px; margin: 0 auto; }
.top-accent-line { width: 150px; height: 4px; background-color: #b91c1c; margin-bottom: 24px; }
.info-heading { color: #111827; font-size: 2rem; font-weight: 800; margin-bottom: 32px; }
.info-paragraph { color: #374151; font-size: 1.05rem; line-height: 1.8; max-width: 900px; }



/* --- BREAKPOINTS --- */

/* Medium Devices (md: 768px) */
@media (min-width: 768px) {
    /* ABOUT */
    .about-bar { height: 120px; }
    .about-title { font-size: 2rem; }
    .about-visual-section { padding: 60px 24px; }
    .info-heading { font-size: 2.75rem; }
    .info-paragraph { font-size: 1.15rem; }
}

/* Large Devices (lg: 1024px) */
@media (min-width: 1024px) {
    /* ABOUT */
    .about-bar { height: 140px; }
    .about-title { font-size: 2.5rem; }
    .about-visual-section { padding: 80px 0; }
    .about-info-section { padding: 80px 0; } 
    .info-paragraph { font-size: 1.25rem; }

    .about-info-section:not(.gray-bg) + .about-info-section:not(.gray-bg),
    .about-info-section.gray-bg + .about-info-section.gray-bg {
        margin-top: -40px; 
    }
}