/* About Component Styles */
/* Base about section styles are provided by css/style.min.css (.about-section-ten, etc.) */

/* Reduce gap between metrics and doctors section on all screen sizes */
#about.about-section-ten {
    padding-bottom: 20px !important;
}

/* Remove extra padding bottom from the About section layout wrapper */
.about-section-ten .section-bottom {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Add a clean spacing gap between the Terms grid and the About content */
.about-section-ten .about-sec {
    margin-top: 16px !important;
}

/* Force the "About Us - Detailed" photo to fill its container at every
   breakpoint. The trusted-page SVGs declare a small fixed intrinsic size
   (300x239), and .img-fluid (max-width:100%; height:auto) only ever shrinks
   an oversized image — it never stretches a small one up — so on wider
   (desktop) containers the image rendered at its tiny native size, leaving a
   large empty gap and stranding the experience badge in blank space. */
.about-img-ten .about-img-01 img {
    width: 100%;
    height: auto;
}

/* Re-enable the "About Us - Detailed" family photo + experience badge on
   mobile. The base theme (css/style.min.css) sets `.about-img-ten { display:
   none; }` below 575.98px, which removes the image entirely on most phones.
   Also scale the badge down so it doesn't overflow the narrow viewport. */
@media (max-width: 575.98px) {
    .about-img-ten {
        display: block !important;
        max-width: 320px;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 30px !important;
    }

    .about-img-ten .about-exp {
        width: 84px;
        height: 84px;
        font-size: 22px;
        padding: 6px;
        top: -14px;
        right: -14px;
    }

    .about-img-ten .about-exp span {
        font-size: 10px;
    }

    .about-img-ten .card-shape {
        width: 106px;
        height: 106px;
        top: -22px;
        right: -22px;
    }
}