/* Wrapper for about section */
.about-wrapper {
    padding-bottom: 200px;
}

/* Row layout */
.about-row {
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

/* Image column */
.about-img-col {
    flex: 0 0 58%;
}

.about-img {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 0;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Text column */
.about-text-col {
    flex: 0 0 38%;
}

/* Heading */
.about-heading h2 {
    font-size: 2em;
    margin-top: 50px;
}

/* Lead paragraph */
.about-lead {
    font-size: 2em;
    margin-bottom: 15px;
    color: #444;
}

/* Description paragraph */
.about-description {
    margin-bottom: 25px;
    font-size: 1.65em;
    color: #444;
}

/* Button */
.about-btn {
    background-color: #C70039;
    border-color: #C70039;
    color: #fff;
    font-size: 1.4em;
    padding: 10px 15px;
    text-decoration: none;
    transition: none;
}

.about-btn:hover,
.about-btn:focus,
.about-btn:active {
    background-color: #C70039;
    border-color: #C70039;
    color: #fff;
    box-shadow: none;
}


/* ------------------------------- */
/* 📱 RESPONSIVE MEDIA QUERIES     */
/* ------------------------------- */

/* Tablet */
@media (max-width: 992px) {
     .about-text-col {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 30px;       /* more padding on tablets */
        text-align: center;    /* optional, makes layout cleaner */
    }

    .about-heading h2 {
        font-size: 1.8em;
    }

    .about-lead {
        font-size: 1.8em;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .about-wrapper {
        padding-bottom: 100px;
    }

    .about-row {
        gap: 20px;
    }

     .about-text-col {
        padding: 0 20px;
        text-align: center;
        word-wrap: break-word;      /* older support */
        overflow-wrap: break-word;  /* modern standard */
        white-space: normal;        /* forces wrapping */
    }

    .about-heading h2 {
        text-align: center;
        font-size: 1.3em;
    }
    

    .about-lead,
    .about-description {
        text-align: center;
        font-size: 1.3em;
    }

     .about-btn {
        display: flex;
        font-size: 0.95em;
        justify-content: center;
    }
}