/* About page: replace the overlapping desktop composition on smaller screens. */
@media (max-width: 991px) {
    .about-page .about-banner {
        padding: 110px 0 0;
    }

    .about-page .about-banner .banner_content {
        padding-bottom: 36px;
    }

    .about-page .about-banner .inner {
        position: relative;
        inset: auto;
        margin-top: 0;
    }

    .about-page .about_gap { margin-top: 0; }

    .about-page .about-banner .banner_before,
    .about-page .about-banner .banner_after,
    .about-page .about-banner .left_book,
    .about-page .about-banner .right_book,
    .about-page .about-banner .fly_book,
    .about-page .about-sec2::before,
    .about-page .about-sec2 .sec_right .left,
    .about-page .about-sec2 .sec_right .right,
    .about-page .about-sec3 .sec_before { display: none; }

    .about-page .about-banner .banner_content h1 {
        display: block;
        font-size: clamp(30px, 5vw, 48px) !important;
        line-height: 1.25;
        margin: 0;
    }

    .about-page .about-banner .banner_content .heading {
        display: block;
        transform: none;
    }

    .about-page .about-banner .banner_content h1 > br { display: none; }

    .about-page .about-banner .banner_content .primary_clr {
        display: block;
        position: static;
        transform: none;
        font-size: clamp(46px, 8vw, 70px);
        line-height: 1.2;
        margin: 8px 0 12px;
    }

    .about-page .about-banner .banner_content p {
        max-width: 540px;
        margin-inline: auto;
        font-size: 16px;
        line-height: 1.7;
    }

    .about-page .about-banner .star { width: 40px; margin-bottom: 14px; }
    .about-page .about-banner .love_book { width: 130px; margin-bottom: 20px; }

    .about-page .about-sec2 { background: #fff6e8; }
    .about-page .about-sec2 .container {
        padding: 36px 20px;
        border-radius: 0;
    }

    .about-page .about-sec2 .row > *,
    .about-page .about-sec3 .row > *,
    .about-page .about-sec4:not(.story-sec) .row > * {
        width: 100%;
    }

    .about-page .about-sec2 .sec_right {
        width: min(100%, 300px);
        height: auto;
        aspect-ratio: 1;
        margin: 28px auto 0;
    }

    .about-page .about-sec2 .sec_right .center {
        width: 85%;
        max-width: 260px;
        height: auto;
    }

    .about-page .wrapper h2 .primary_clr {
        position: static;
        display: inline-block;
        transform: none;
        font-size: clamp(38px, 7vw, 54px);
        line-height: 1.2;
        max-width: 100%;
    }

    .about-page .wrapper h2 {
        padding-left: 0;
        line-height: 1.3;
        margin-bottom: 18px;
    }

    .about-page .wrapper h2 .line_break { transform: none; }
    .about-page .wrapper h2 > img { display: none; }

    .about-page .about-sec2 .sec_left p,
    .about-page .about-sec3 .sec_right > p,
    .about-page .about-sec4 .sec_right p,
    .about-page .about-sec5 .box p {
        height: auto;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        font-size: 16px;
        line-height: 1.75;
        margin-top: 0;
    }

    .about-page .about-sec3 { padding: 40px 0; }
    .about-page .about-sec3 #counter {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin: 28px 0;
        align-items: start;
    }

    .about-page .about-sec3 #counter h3 { font-size: clamp(26px, 6vw, 38px); }
    .about-page .about-sec3 #counter .box p { font-size: 13px; line-height: 1.5; }

    .about-page .section5.story-sec .story-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .about-page .section5.story-sec { padding: 36px 0 !important; border-radius: 24px !important; }
    .about-page .section5.story-sec .sec_right { padding: 0; }
    .about-page .section5.story-sec .approach-card { padding: 28px 20px; }
    .about-page .section5.story-sec .approach-list li > div { min-width: 0; }
    .about-page .section5.story-sec .approach-card p { line-height: 1.75; }

    .about-page .about-sec5 .sec_top h2 { max-width: 620px; margin-inline: auto; }
    .about-page .about-sec5 .sec_content { margin-top: 16px; }
    .about-page .about-sec5 .box { padding: 24px; border-radius: 24px; }

    .about-page .about-sec4:not(.story-sec) { background: #003799; }
    .about-page .about-sec4:not(.story-sec)::after { display: none; }
    .about-page .about-sec4:not(.story-sec) .container {
        padding: 32px 20px;
        border-radius: 0;
        background: transparent;
    }
    .about-page .about-sec4:not(.story-sec) .sec_left {
        width: min(100%, 280px);
        height: auto;
        aspect-ratio: 1;
        margin: 0 auto 28px;
    }
    .about-page .about-sec4:not(.story-sec) .sec_left img {
        width: 100%; min-width: 0; height: auto; margin: 0; transform: none;
    }
    .about-page .about-sec4:not(.story-sec) .sec_right { padding: 0; }
    .about-page .combo_btn { gap: 16px; margin-top: 24px; }
    .about-page .combo_btn .btn { margin-right: 50px; margin-bottom: 8px; }
    .about-page .sec_form .sec_right { width: 100%; margin: 28px 0 0; min-height: 0; }
    .about-page .sec_form .row > * { width: 100%; }
    .about-page .sec_form .sec_left .accordion .accordion-item .accordion-button {
        font-size: 18px;
        line-height: 1.4;
        gap: 12px;
    }
    .about-page .sec_form .sec_left .accordion .accordion-item .accordion-body {
        font-size: 15px;
        line-height: 1.7;
    }
    .about-page .sec_form .sec_right form h2 .primary_clr {
        display: block;
        line-height: 1.4;
        margin-bottom: 8px;
    }
    .about-page .section10 .box p { height: auto; }
}

@media (max-width: 575px) {
    .about-page .about-sec5 .sec_content .row { row-gap: 16px; }
    .about-page .about-sec5 .box { margin-top: 0; }
    .about-page .sec_form .sec_right { padding: 28px 20px; }
    .about-page .section12 .sec_top ul { display: grid; grid-template-columns: minmax(0, 1fr); }
    .about-page .section12 .sec_top ul li a { width: 100%; padding: 12px; }
}