@media (max-width:1200px) {
    .menu-logo {
        width: 150px;
    }

    .call-float-box {
        right: -32px;
    }

    .about-title h1 {
        font-size: 33px;
    }

    .about-title p {
        font-size: 16px;
        line-height: 1.6em;
    }

    .empower-title h2 {
        font-size: 17px;
    }

    .service-card {
        margin-bottom: 20px;
    }

    .p-80 {
        padding: 33px 0;
    }

    .content-wrapper h2 {
        font-size: 35px;
        margin-top: 6px;
    }

    .testimonial-title p {
        font-size: 16px;
    }

    .faqs-title h2 {
        font-size: 36px;
        margin-top: 10px;
    }

    .faqs-title {
        padding-left: 17px;
    }

    .stat-number {
        font-size: 34px;
    }

    .footer-info h6 {
        font-size: 20px;
    }

    .bg-color {
        padding: 50px 0;
    }

    .sub-title h1 {
        font-size: 28px;
    }


    .menu-title {
        font-size: 14px;
    }

    .about-info h1 {
        font-size: 29px;
    }

    .about-list-title h2 {
        font-size: 20px;
    }

    .about-list-info {
        font-size: 14px;
        margin-bottom: 0;
    }

    .approach-sub-title h1 {
        font-size: 39px;
    }

    .impact-title h1 {
        font-size: 35px;
    }

    .stat-card {
        padding: 29px;
    }

    .impact-title p {
        font-size: 16px;
    }

    .team-card {
        margin-bottom: 20px;
    }

    .mt-20 {
        margin-top: 7px;
    }

    .contact-title h3 {
        font-size: 22px;
    }

    .education-title h1 {
        font-size: 28px;
    }

    .ribbon-title p {
        font-size: 16px;
    }

    .ribbon-title h1 {
        font-size: 31px;
    }

    .volunteer-card h2 {
        font-size: 20px;
    }

    .volunteer-info {
        display: block;
    }

    .volunteer-images {
        width: 100%;
        margin-bottom: 20px;
    }

    .basics-title h2 {
        font-size: 30px;
        font-weight: 700;
        color: #231f20;
        margin-top: 20px;
    }

    .exchange-title h1 {
        font-size: 27px;
    }
}

@media (max-width:991px) {
    .topbar-list {
        flex-wrap: wrap;
        row-gap: 6px;
        gap: 10px;
    }

    .topbar-list a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
    }

    /* background-attachment:fixed (style.css) is unreliable on mobile
       browsers, and the banner's decorative curve is baked into the image
       so it can crop out of view at odd widths. Cover the box reliably and
       put a scrim behind the title/breadcrumb so they stay legible no
       matter what part of the photo ends up behind them.
       min-height is set explicitly (not just aspect-ratio) so there is
       always enough clearance for bottom:100px (style.css) plus the text
       block, all the way down to the narrowest phone widths - this one
       rule set now covers the full range from 991px down to 0. */
    .bg-overlay {
        min-height: 240px;
    }

    .sub-images {
        background-size: cover;
        background-position: center right;
        background-attachment: scroll;
    }

    /* max-width on a shrink-to-fit absolutely-positioned box didn't
       reliably cap it on the real device (still overflowed the viewport).
       Pinning both left and right instead makes the browser compute the
       width directly - deterministic, can't overflow regardless of how
       long the title text is. */
    .sub-title-info {
        background: rgba(20, 17, 18, 0.78);
        padding: 14px 22px;
        border-radius: 10px;
        left: 24px;
        right: 24px;
        max-width: none;
        box-sizing: border-box;
        text-align: left;
        width: 54%;
    }

    .events-list {
        gap: 35px;
    }

    .event-card,
    .event-card-reverse {
        flex-direction: column;
    }

    .event-media {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .event-media img {
        min-height: auto;
        height: 300px;
    }

    .event-body {
        padding: 35px 30px;
    }

    .event-title {
        font-size: 26px;
    }

    .call-float-box {
        right: -22px;
    }

    .about-title {
        margin-top: 50px;
    }

    .service-card {
        margin-bottom: 20px;
    }

    .image-grid-wrapper {
        margin-top: 30px;
    }

    .testimonial-card {
        display: block;
    }

    .testimonial-title {
        margin-top: 20px;
        width: 100%;
    }

    .faqs-title {
        padding-left: 0;
    }

    .faqs-title {
        margin-top: 20%;
    }

    .stat-item {
        margin-bottom: 20px;
    }

    .testimonial-images {
        text-align: center;
    }

    .p-80 {
        padding: 35px 0;
    }

    .main-slider-four-item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: auto;
        padding: 120px 0;
        z-index: 1;
        overflow: hidden;
    }

    .about-info {
        margin-top: 35px;
    }

    .about-info h1 {
        font-size: 34px;
    }

    .mission-card {
        margin-bottom: 20px;
    }

    .board-card {
        margin-bottom: 20px;
    }

    .impact-title {
        margin-top: 15%;
    }

    .contact-sub-title {
        margin: 0 0;
    }

    .contact-box {
        margin-bottom: 20px;
    }

    .contact-icon i {
        margin-top: 0;
    }

    .contact-images img {
        width: 100%;
    }

    .navbar-toggler {
        background-color: #E41F28;
        border: 0;
        height: 40px;
        font-size: 20px;
        color: #ffff;
    }

    .education-images img {
        margin-bottom: 20px;
    }

    .exchange-title {
        margin-top: 20px;
    }

    .exchange-title p {
        font-size: 14px;
        font-weight: 500;
        color: #6A6765;
        line-height: 1.6em;
    }

    .exchange-order {
        order: 3;
    }

    .education-images img {
        margin-bottom: 20px;
        height: 50vh;
        width: 100%;
        object-fit: cover;
    }
}

@media (max-width:500px) {
    .mySwiper .testimonial-images {
        width: 90px;
        height: 100px;
    }

    .testimonial-avatar {
        font-size: 34px;
    }

    .event-title {
        font-size: 23px;
    }

    .event-media img {
        height: 220px;
    }

    .event-body {
        padding: 30px 22px;
    }

    .event-badge {
        top: 15px;
        left: 15px;
        padding: 6px 16px;
        font-size: 14px;
    }

    .event-empty {
        padding: 50px 20px;
    }

    .event-empty h3 {
        font-size: 23px;
    }

    .call-float-box {
        display: none;
    }

    .topbar-color {
        display: none;
    }

    .bg-color {
        background-color: #f9f9f9;
        padding: 63px 0;
    }

    .about-img {
        border-radius: 20px;
    }

    .about-title {
        margin-top: 50px;
    }

    .about-title h1 {
        font-size: 26px;
    }

    .about-title p {
        font-size: 13px;
        line-height: 1.6em;
    }

    .empower-title {
        margin-bottom: 20px;
    }

    .sub-title h1 {
        font-size: 23px;
    }

    .service-card {
        margin-bottom: 20px;
    }

    .p-80 {
        padding: 28px 0;
    }

    .content-wrapper h2 {
        font-size: 33px;
        margin-top: 4px;
    }

    .wrapper-list h6 {
        font-size: 17px;
        width: 80%;
    }

    .content-wrapper p {
        font-size: 17px;
    }

    .image-grid-wrapper {
        margin-top: 30px;
    }

    .testimonial-card {
        display: block;
    }

    .testimonial-title {
        width: 100%;
        margin-top: 20px;
    }

    .testimonial-card {
        padding: 31px;
    }

    .faq-img-2 {
        position: unset;
    }

    .help-card {
        display: none;
    }

    .faqs-title {
        padding-left: 0;
        margin-top: 20px;
    }

    .faqs-title h2 {
        font-size: 26px;
    }

    .faq-question {
        font-size: 17px;
    }

    .stat-item {
        margin-bottom: 20px;
    }

    .stat-number {
        font-size: 35px;
    }

    .footer-info h6 {
        font-size: 21px;
        margin-bottom: 0px;
        line-height: 1.5em;
    }

    .copy-title p {
        font-size: 15px;
    }

    .sub-title-info h1 {
        font-size: 29px;
    }

    .about-info h1 {
        font-size: 24px;
    }

    .about-info p {
        font-size: 15px;
    }

    .about-list {
        margin-bottom: -3px;
        margin-top: 12px;
    }

    .approach-sub-title h1 {
        font-size: 26px;
    }

    .mission-card {
        margin-bottom: 16px;
        padding: 28px;
    }

    .impact-img-2 {
        display: none;
    }

    .impact-title h1 {
        font-size: 29px;
    }

    .stat-card {
        margin-bottom: 20px;
    }

    .apss-images {
        margin-bottom: 20px;
    }

    .p-80 {
        padding: 30px 0;
        padding-bottom: 0;
    }

    .sub-title h6 {
        font-size: 18px;
    }

    .menu-logo {
        width: 150px;
    }

    .team-title h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .contact-sub-title {
        padding: 0;
    }

    .contact-sub-title h1 {
        font-size: 27px;
        margin-top: 6px;
    }

    .contact-sub-title {
        margin-top: 20px;
    }

    .contact-from {
        margin-top: 7px;
    }

    .sub-title p {
        font-size: 17px;
        line-height: 1.6em;
    }

    .navbar-toggler {
        background-color: #E41F28;
        border: 0;
        height: 40px;
        font-size: 20px;
        color: #ffff;
    }

    .education-title h1 {
        font-size: 22px;
    }

    .education-title p {
        font-size: 15px;
    }

    .education-form {
        padding: 31px;
    }

    .ribbon-title {
        margin-top: 20px;
    }

    .ribbon-title h1 {
        font-size: 26px;
    }

    .navbar-collapse {
        padding-bottom: 21px;
    }

    .basics-title h2 {
        font-size: 24px;
        margin-top: 20px;
    }

    .basics-title h3 {
        font-size: 21px;
    }

    .exchange-title h1 {
        font-size: 20px;
    }

    .needles-images {
        margin-bottom: 20px;
    }

    .content-wrapper h2 {
        font-size: 27px;
        margin-top: 4px;
    }

    .sub-title p {
        font-size: 16px;
        line-height: 1.5em;
    }

    .bg-color {
        background-color: #f9f9f9;
        padding: 28px 0;
    }

    .empower-title h6 {
        font-size: 17px;
    }

    .service-title {
        font-size: 25px;
        margin-bottom: 2px;
    }

    .service-icon {
        margin: 0px auto 15px;
    }

    .outreach-title h6 {
        font-size: 19px;
        margin-bottom: 1px;
    }

    .footer-title p {
        font-size: 14px;
    }

    .footer-list {
        font-size: 16px;
    }

    .footer-info h5 {
        font-size: 16px;
        margin-top: 10px;
    }

    .p-50 {
        padding: 37px 0 !important;
    }

    .sub-title {
        margin-bottom: 20px;
    }

    .footer-title img {
        width: 180px;
    }

    .about-img {
        height: 65vh !important;
        width: 100% !important;
        object-fit: cover;
    }

    /* No overrides here on purpose - .sub-images/.bg-overlay/.sub-title-info
       now use exactly the same rules as the max-width:991px block below,
       so the banner looks and behaves identically at every width under
       992px instead of carrying a separate, drifting mobile-only variant. */

    .board-images {
        /* overflow: hidden; */
        transition: 0.4s ease;
        border-radius: 0 0 1000px 1000px;
        text-align: center;
    }

    .board-images img {
        width: 200px;
        border-radius: 0 0 1000px 1000px;
        transition: 0.4s ease;
        /* max-width: 200px; */
        margin: 0 auto;
    }
}