/* ============================================
   About Page CSS — The Beach House
   ============================================ */

    :root {
        --brown: #4b3128;
        --gold: #c89b52;
        --gold-light: #e8c98a;
        --cream: #faf8f4;
        --cream-2: #f8f2e8;
        --teal: #5e8c82;
        --teal-light: #a8cbc4;
        --terracotta: #d97d56;
        --terracotta-light: #f0ad8c;
        --sage: #8a9b6e;
        --sage-light: #c3d1ab;
        --text-muted: #776a63;
    }

    /* ---------- Floating Decorative Shapes ---------- */
    .leaf-shape {
        position: absolute;
        pointer-events: none;
        z-index: 1;
    }

    .blob-shape {
        position: absolute;
        border-radius: 50%;
        filter: blur(6px);
        opacity: .35;
        pointer-events: none;
        z-index: 0;
    }

    @keyframes drift-a {

        0%,
        100% {
            transform: translate(0, 0) rotate(0deg);
        }

        50% {
            transform: translate(18px, -26px) rotate(10deg);
        }
    }

    @keyframes drift-b {

        0%,
        100% {
            transform: translate(0, 0) rotate(0deg);
        }

        50% {
            transform: translate(-22px, 18px) rotate(-8deg);
        }
    }

    @keyframes bob {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-16px);
        }
    }

    @keyframes kenburns {
        from {
            transform: scale(1);
        }

        to {
            transform: scale(1.12);
        }
    }

    @keyframes spin-slow {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @media (prefers-reduced-motion:reduce) {

        .leaf-shape,
        .blob-shape,
        .seal-ring,
        .page-banner-bg {
            animation: none !important;
        }
    }

    /* ---------- Page Banner ---------- */
    .page-banner {
        min-height: 60vh;
        padding-top: 140px;
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .page-banner-bg {
        position: absolute;
        inset: 0;
        background: url('../img/banner/8.png') center/cover no-repeat;
        animation: kenburns 15s ease-in-out infinite alternate;
        z-index: 0;
    }

    .page-banner-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(175deg, #0a0a0adb 0%, #493d1ad9 50%, #ffc10747 100% 100%)
    }

    .page-banner-content {
        position: relative;
        z-index: 3;
        color: #fff;
        padding-top: 90px;
    }

    .page-subtitle {
        color: var(--gold-light);
        letter-spacing: 4px;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 600;
    }

    .page-banner-content h1 {
        font-size: clamp(2.8rem, 7vw, 4.6rem);
        margin: 15px 0;
        line-height: 1.05;
        color: #f8f4f4;
    }

    .page-banner-content p span {
        color: var(--gold-light);
    }

    .leaf-banner-1 {
        top: 14%;
        right: 9%;
        width: 90px;
        z-index: 2;
        animation: drift-a 9s ease-in-out infinite;
    }

    .leaf-banner-2 {
        bottom: 20%;
        left: 7%;
        width: 60px;
        z-index: 2;
        animation: drift-b 11s ease-in-out infinite;
    }

    .blob-banner-1 {
        top: -60px;
        left: -60px;
        width: 240px;
        height: 240px;
        background: var(--teal);
        z-index: 1;
    }

    .wave-divider {
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 70px;
        z-index: 2;
    }

    .wave-divider path {
        fill: var(--cream);
    }

    /* ---------- About Story ---------- */

    /* ============================================================
   ABOUT SECTION
============================================================ */
    .about-section {
        padding: 20px 0;
        background: var(--cream);
    }

    .section-pad {
        padding: 130px 0;
    }

    .section-eyebrow {
        color: var(--gold);
        font-weight: 1200;
        letter-spacing: 3px;
        text-transform: uppercase;
        font-size: 14px;
    }

    .section-heading {
        font-size: 46px;
        color: var(--brown);
        line-height: 1.1;
        margin: 18px 0 28px;
    }

    .section-body {
        color: var(--text-muted);
        font-size: 17px;
        line-height: 1.8;
    }

    .outline-btn {
        display: inline-block;
        color: var(--gold);
        font-weight: 600;
        text-decoration: none;
    }

    .outline-btn:hover {
        color: var(--brown);
    }

    .about-img-collage {
        height: 600px;
        position: relative;
    }

    .collage-main {
        width: 89%;
        height: 100%;
        object-fit: cover;
        border-radius: 24px;
    }

    .collage-accent {
        position: absolute;
        width: 42%;
        height: 46%;
        right: 0;
        bottom: 0;
        object-fit: cover;
        border-radius: 20px;
        border: 6px solid var(--cream);
    }

    .collage-badge {
        position: absolute;
        top: 35px;
        right: 0;
        background: var(--gold);
        color: #fff;
        padding: 18px;
        border-radius: 18px;
        text-align: center;
    }


    /* ---------- Stats Strip ---------- */
    .stats-strip {

        background: var(--brown);
        padding: 45px 0;
        position: relative;
        overflow: hidden;
    }

    .stat-item {
        position: relative;
    }

    .leaf-stats-1 {
        bottom: -30px;
        left: -20px;
        width: 140px;
        opacity: .12;
        animation: drift-b 14s ease-in-out infinite;
    }

    .stat-item h3 {
        font-size: 64px;
        font-weight: 700;
        font-family: 'Jost', serif;
        line-height: 1;
        margin-bottom: 10px;
        color: #f3d78a;
    }

    .stat-item span {
        color: #f3d78a;
        font-size: 32px;
        font-weight: 700;
    }

    .stat-item p {
        color: #fff;
        letter-spacing: 2px;
        text-transform: uppercase;
        font-size: 13px;
    }

    .stat-item::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 70px;
        background: rgba(255, 255, 255, .15);
    }

    .stat-item:last-child::after {
        display: none;
    }

    .stat-number {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 6px;
        margin-bottom: 12px;
    }

    .stat-number h3 {
        margin: 0;
        line-height: 1;
        font-size: 64px;
        font-weight: 700;
    }

    .stat-number span {
        font-size: 28px;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 8px;
        color: #f3d78a;
    }

    .stat-item:nth-child(1) h3 {
        color: var(--gold-light);
    }

    .stat-item:nth-child(2) h3 {
        color: var(--teal-light);
    }

    .stat-item:nth-child(3) h3 {
        color: var(--terracotta-light);
    }

    .stat-item:nth-child(4) h3 {
        color: var(--sage-light);
    }


    /* ---------- A Day at The Beach House ---------- */
    .day-section {
        position: relative;
        overflow: hidden;
        padding: 80px 0;

        background:
            linear-gradient(rgba(248, 242, 232, 0.43),
                rgba(248, 242, 232, 0.6)),
            url('../img/beach.png');

        background-size: cover;
        /* background-position:center center;
    background-repeat:no-repeat; */
        /* background-attachment:fixed; */
    }

    .blob-day-1 {
        top: -80px;
        right: -80px;
        width: 260px;
        height: 260px;
        background: var(--gold);
        opacity: .18;
    }

    .section-heading {
        margin-bottom: 55px;
    }

    .section-heading h2 {
        font-size: clamp(2.2rem, 4.5vw, 3rem);
        color: var(--brown);
        margin: 50px 0;
    }

    .section-heading p {
        color: var(--text-muted);
        max-width: 640px;
        margin: 0 auto;
        font-size: clamp(1rem, 1.1vw, 1.1rem);
    }

    .day-img-card {
        position: relative;
        height: 350px;
        border-radius: 35px;
        overflow: hidden;
        box-shadow: 0 20px 55px rgba(75, 49, 40, .15);
        transition: .45s ease;
    }

    .day-img-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .6s ease;
    }

    .day-img-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,
                rgba(43, 28, 22, .88),
                rgba(43, 28, 22, .35),
                rgba(43, 28, 22, .05));
    }

    .day-img-card:hover {
        transform: translateY(-10px);
    }

    .day-img-card:hover img {
        transform: scale(1.12);
    }

    .day-img-content {
        position: absolute;
        left: 25px;
        right: 25px;
        bottom: 25px;
        z-index: 2;
        color: #fff;
    }

    .day-img-content span {
        background: #c89b52;
        padding: 7px 16px;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .day-img-content h4 {
        margin: 18px 0 10px;
        font-size: 30px;
        color: #fff;
    }

    .day-img-content p {
        color: #f4e9dc;
        margin-bottom: 0;
        line-height: 1.6;
    }

    @media(max-width:576px) {
        .day-img-card {
            height: 360px;
        }
    }

    .day-time {
        display: inline-block;
        font-weight: 700;
        letter-spacing: 2px;
        font-size: 13px;
        text-transform: uppercase;
        padding: 7px 18px;
        border-radius: 50px;
        margin-bottom: 22px;
    }


    /* ---------- Why Choose Us ---------- */
    .why-section {
        background: #fffaf2;
        padding: 110px 0;
        position: relative;
        overflow: hidden;
    }

    .why-showcase {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 70px;
        align-items: center;
    }

    /* why-circle-gallery: main big image top, 4 circles below in a row */
    .why-circle-gallery {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Big rectangular image spanning full width */
    .circle-big {
        width: 100%;
        height: 480px;
        border-radius: 28px;
        overflow: hidden;
        box-shadow: 0 22px 55px rgba(75, 49, 40, .15);
        flex-shrink: 0;
        transition: .4s ease;
    }

    .circle-big img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: .5s ease;
    }

    .circle-big:hover img {
        transform: scale(1.06);
    }

    /* Row of 4 circles below */
    .why-circles-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    .circle-img {
        aspect-ratio: 1/1;
        border-radius: 50%;
        overflow: hidden;
        border: 3px solid #fff;
        box-shadow: 0 12px 32px rgba(75, 49, 40, .13);
        outline: 2px dashed rgba(200, 155, 82, .4);
        outline-offset: 4px;
        transition: .35s ease;
        cursor: pointer;
    }

    .circle-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: .5s ease;
    }

    .circle-img:hover {
        transform: translateY(-6px) scale(1.05);
        box-shadow: 0 20px 45px rgba(75, 49, 40, .2);
        outline-color: rgba(200, 155, 82, .8);
    }

    .circle-img:hover img {
        transform: scale(1.1);
    }

    @media(max-width:576px) {
        .circle-big {
            height: 220px;
        }

        .why-circles-row {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
    }


    .why-highlight-box {
        position: absolute;
        left: 30px;
        bottom: 0;
        width: 330px;
        background: #fff;
        padding: 34px 30px;
        border-radius: 26px;
        box-shadow: 0 25px 70px rgba(75, 49, 40, .13);
        text-align: center;
    }

    .why-highlight-box i {
        font-size: 44px;
        color: #c89b52;
        margin-bottom: 18px;
    }

    .why-highlight-box h4 {
        color: #4b3128;
        font-size: 30px;
        margin-bottom: 12px;
    }

    .why-highlight-box p {
        color: #776a63;
        line-height: 1.7;
        margin-bottom: 0;
    }

    .why-content-area h2 {
        font-size: 44px;
        color: #4b3128;
        line-height: 1.15;
        margin: 26px 0 30px;
    }

    .why-content-area p {
        color: #776a63;
        line-height: 1.8;
        font-size: 16px;
        margin-bottom: 28px;
    }

    .why-points-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .why-point {
        background: #fff;
        border-radius: 18px;
        padding: 18px 16px;
        display: flex;
        align-items: center;
        gap: 14px;
        box-shadow: 0 15px 40px rgba(75, 49, 40, .07);
        transition: .35s ease;
    }

    .why-point:hover {
        transform: translateY(-6px);
        background: #4b3128;
    }

    .why-point i {
        width: 48px;
        height: 48px;
        background: rgba(200, 155, 82, .16);
        color: #c89b52;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex: 0 0 48px;
    }

    .why-point h5 {
        color: #4b3128;
        font-size: 17px;
        margin: 0;
        font-family: 'Jost', sans-serif;
        font-weight: 700;
    }

    .why-point:hover h5 {
        color: #fff;
    }

    @media(max-width:991px) {
        .why-showcase {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .why-image-area {
            min-height: 560px;
        }

        .why-points-grid {
            grid-template-columns: 2fr;
        }
    }

    @media(max-width:576px) {
        .why-section {
            padding: 70px 0;
        }

        .why-main-img {
            width: 100%;
            height: 360px;
        }

        .why-small-img {
            position: relative;
            width: 100%;
            height: 220px;
            top: auto;
            right: auto;
            margin-top: 18px;
            border: 0;
        }

        .why-image-area {
            min-height: auto;
        }

        .why-floating-tags {
            position: relative;
            top: auto;
            left: auto;
            margin-bottom: 18px;
        }

        .why-highlight-box {
            position: relative;
            left: auto;
            bottom: auto;
            width: 100%;
            margin-top: 18px;
        }

        .why-content-area h2 {
            font-size: 34px;
        }

        .why-points-grid {
            grid-template-columns: 2fr;
        }
    }

    /* ---------- Testimonial Slider ---------- */
    .testimonial-section {
        padding: 100px 0 80px;
        position: relative;
        overflow: hidden;
        background: url('../img/banner/5.png') center/cover no-repeat fixed;
    }

    .testimonial-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(30, 18, 12, .72);
        z-index: 0;
    }

    .testimonial-section>* {
        position: relative;
        z-index: 1;
    }

    .testi-header {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 48px;
    }

    .testi-section-sub {
        color: var(--gold-light);
        font-weight: 700;
        letter-spacing: 4px;
        text-transform: uppercase;
        font-size: 13px;
        display: block;
        margin-bottom: 10px;
    }

    .testi-section-title {
        font-size: clamp(2rem, 4.5vw, 3.2rem);
        color: #fff;
        line-height: 1.08;
        margin: 0;
        font-family: 'Cormorant Garamond', serif;
    }

    .testi-nav {
        display: flex;
        gap: 12px;
        flex-shrink: 0;
    }

    .testi-btn {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, .35);
        background: rgba(255, 255, 255, .12);
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .3s ease;
        backdrop-filter: blur(6px);
    }

    .testi-btn:hover {
        background: var(--terracotta);
        border-color: var(--terracotta);
    }

    .testi-slider-wrap {
        overflow: hidden;
    }

    .testi-track {
        display: flex;
        transition: transform .6s cubic-bezier(.4, 0, .2, 1);
        will-change: transform;
    }

    .testi-slide {
        flex: 0 0 calc(100% / 3);
        padding: 0 12px;
        box-sizing: border-box;
    }

    .testi-card {
        background: rgba(255, 255, 255, .94);
        border-radius: 22px;
        padding: 32px 28px 28px;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: relative;
        transition: .35s ease;
        box-shadow: 0 16px 50px rgba(0, 0, 0, .22);
    }

    .testi-card:hover {
        transform: translateY(-7px);
    }

    .testi-card.active-card {
        background: var(--terracotta);
    }

    .testi-quote-icon {
        position: absolute;
        top: 26px;
        right: 26px;
        font-size: 30px;
        color: rgba(200, 155, 82, .28);
        line-height: 1;
    }

    .active-card .testi-quote-icon {
        color: rgba(255, 255, 255, .25);
    }

    .testi-author-row {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .testi-avatar {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        border: 3px solid rgba(255, 255, 255, .7);
    }

    .testi-name {
        font-size: 17px;
        font-weight: 700;
        margin: 0;
        color: var(--brown);
        font-family: 'Jost', sans-serif;
        line-height: 1.2;
    }

    .active-card .testi-name {
        color: #fff;
    }

    .testi-role {
        font-size: 13px;
        color: var(--text-muted);
        margin: 3px 0 0;
    }

    .active-card .testi-role {
        color: rgba(255, 255, 255, .78);
    }

    .testi-body {
        font-size: 15px;
        color: var(--text-muted);
        line-height: 1.78;
        margin: 0;
        flex: 1;
    }

    .active-card .testi-body {
        color: rgba(255, 255, 255, .92);
    }

    .testi-stars {
        display: flex;
        gap: 4px;
    }

    .testi-stars i {
        color: var(--gold);
        font-size: 16px;
    }

    .active-card .testi-stars i {
        color: #f3d78a;
    }

    /* ======================================================
   COMPREHENSIVE RESPONSIVE — ALL BREAKPOINTS
   ====================================================== */

    /* ── Tablet landscape / small desktop  ≤ 1199px ── */
    @media(max-width:1199px) {
        .section-pad {
            padding: 100px 0;
        }

        .why-section {
            padding: 90px 0;
        }

        .day-section {
            padding: 90px 0;
        }

        .why-showcase {
            gap: 50px;
        }

        .why-content-area h2 {
            font-size: 36px;
        }

        .circle-big {
            height: 400px;
        }

        .about-img-collage {
            height: 520px;
        }

        .stat-number h3 {
            font-size: 52px;
        }

        .testi-slide {
            flex: 0 0 calc(100% / 3);
        }
    }

    /* ── Tablet portrait  ≤ 991px ── */
    @media(max-width:991px) {

        /* Banner */
        .page-banner {
            min-height: 50vh;
            padding-top: 110px;
        }

        .page-banner-content {
            padding-top: 60px;
        }

        .page-banner-content h1 {
            font-size: clamp(2rem, 6vw, 3rem);
        }

        /* About story */
        .about-section.section-pad {
            padding: 70px 0;
        }

        .about-img-collage {
            height: 400px;
        }

        .collage-badge {
            padding: 14px;
            font-size: 13px;
        }

        /* Day section */
        .day-section {
            padding: 70px 0;
            background-attachment: scroll;
        }

        /* Why */
        .why-section {
            padding: 70px 0;
        }

        .why-showcase {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .why-image-area {
            min-height: auto;
        }

        .circle-big {
            height: 340px;
        }

        .why-circles-row {
            grid-template-columns: repeat(4, 1fr);
        }

        .why-points-grid {
            grid-template-columns: 1fr 1fr;
        }

        .why-content-area h2 {
            font-size: 34px;
        }

        /* Stats */
        .stats-strip {
            padding: 40px 0;
        }

        .stat-number h3 {
            font-size: 48px;
        }

        /* Testimonial */
        .testimonial-section {
            padding: 70px 0 60px;
            background-attachment: scroll;
        }

        .testi-slide {
            flex: 0 0 50%;
        }

        .testi-section-title {
            font-size: clamp(1.8rem, 4vw, 2.6rem);
        }

        /* Hide decorative shapes */
        .leaf-shape,
        .blob-shape {
            display: none;
        }

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

    /* ── Large mobile / small tablet  ≤ 767px ── */
    @media(max-width:767px) {

        /* Banner */
        .page-banner {
            min-height: 45vh;
        }

        .page-banner-content h1 {
            font-size: clamp(1.8rem, 6vw, 2.6rem);
        }

        .page-subtitle {
            font-size: 12px;
            letter-spacing: 3px;
        }

        /* About section */
        .section-pad {
            padding: 60px 0;
        }

        .section-heading {
            font-size: 32px;
            margin: 14px 0 20px;
        }

        .section-body {
            font-size: 15px;
        }

        /* Collage — stack accent inside */
        .about-img-collage {
            height: 340px;
        }

        .collage-main {
            width: 100%;
            border-radius: 18px;
        }

        .collage-accent {
            display: none;
        }

        /* hide small accent on mobile */
        .collage-badge {
            top: auto;
            bottom: 16px;
            right: 16px;
            padding: 12px 14px;
            font-size: 12px;
            border-radius: 14px;
        }

        /* Day section */
        .day-section {
            padding: 60px 0;
        }

        .section-heading h2 {
            font-size: clamp(1.6rem, 5vw, 2.2rem);
        }

        .day-img-card {
            height: 300px;
            border-radius: 24px;
        }

        .day-img-content h4 {
            font-size: 22px;
        }

        /* Why */
        .why-section {
            padding: 60px 0;
        }

        .why-content-area h2 {
            font-size: 28px;
        }

        .circle-big {
            height: 260px;
            border-radius: 20px;
        }

        .why-circles-row {
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        .why-points-grid {
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .why-point {
            padding: 14px 12px;
            gap: 10px;
            border-radius: 14px;
        }

        .why-point h5 {
            font-size: 14px;
        }

        .why-point i {
            width: 40px;
            height: 40px;
            font-size: 16px;
            flex: 0 0 40px;
        }

        /* Stats */
        .stat-number h3 {
            font-size: 40px;
        }

        .stat-item p {
            font-size: 11px;
            letter-spacing: 1px;
        }

        /* remove dividers on 2-col layout */
        .stat-item:nth-child(2)::after {
            display: none;
        }

        /* Testimonial */
        .testimonial-section {
            padding: 60px 0 50px;
        }

        .testi-slide {
            flex: 0 0 80%;
        }

        .testi-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }

        .testi-header .testi-nav {
            align-self: flex-start;
        }

        .testi-section-title {
            font-size: clamp(1.6rem, 5vw, 2.2rem);
        }

        .testi-card {
            padding: 26px 22px 22px;
        }

        .testi-body {
            font-size: 14px;
        }

        .testi-name {
            font-size: 15px;
        }
    }

    /* ── Mobile  ≤ 575px ── */
    @media(max-width:575px) {

        /* Banner */
        .page-banner {
            min-height: 40vh;
            padding-top: 90px;
        }

        .page-banner-content {
            padding-top: 40px;
        }

        .page-banner-content h1 {
            font-size: clamp(1.6rem, 7vw, 2.2rem);
        }

        /* About story */
        .section-pad {
            padding: 50px 0;
        }

        .about-img-collage {
            height: 260px;
        }

        .section-heading {
            font-size: 26px;
        }

        .section-body {
            font-size: 14px;
        }

        /* Day */
        .day-section {
            padding: 50px 0;
        }

        .day-img-card {
            height: 280px;
            border-radius: 20px;
        }

        .day-img-content {
            left: 18px;
            right: 18px;
            bottom: 18px;
        }

        .day-img-content h4 {
            font-size: 20px;
            margin: 12px 0 6px;
        }

        .day-img-content p {
            font-size: 13px;
        }

        /* Why */
        .why-section {
            padding: 50px 0;
        }

        .why-content-area h2 {
            font-size: 24px;
        }

        .why-content-area p {
            font-size: 14px;
        }

        .circle-big {
            height: 220px;
            border-radius: 16px;
        }

        .why-circles-row {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .why-points-grid {
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .why-point {
            padding: 12px 10px;
            gap: 8px;
            border-radius: 14px;
        }

        .why-point h5 {
            font-size: 13px;
        }

        .why-point i {
            width: 36px;
            height: 36px;
            font-size: 15px;
            flex: 0 0 36px;
        }

        /* Stats */
        .stats-strip {
            padding: 30px 0;
        }

        .stat-number h3 {
            font-size: 36px;
        }

        .stat-number span {
            font-size: 20px;
        }

        .stat-item p {
            font-size: 10px;
        }

        .stat-item::after {
            display: none;
        }

        /* Testimonial */
        .testimonial-section {
            padding: 50px 0 40px;
        }

        .testi-slide {
            flex: 0 0 90%;
        }

        .testi-btn {
            width: 46px;
            height: 46px;
            font-size: 14px;
        }

        .testi-card {
            padding: 22px 18px 18px;
            gap: 12px;
            border-radius: 18px;
        }

        .testi-avatar {
            width: 46px;
            height: 46px;
        }

        .testi-name {
            font-size: 14px;
        }

        .testi-role {
            font-size: 12px;
        }

        .testi-body {
            font-size: 13.5px;
            line-height: 1.7;
        }

        .testi-stars i {
            font-size: 14px;
        }

        .testi-section-title {
            font-size: clamp(1.5rem, 6vw, 2rem);
        }

        .testi-section-sub {
            font-size: 11px;
            letter-spacing: 3px;
        }

        /* Wave divider */
        .wave-divider {
            height: 45px;
        }
    }

    /* ── Very small phones  ≤ 380px ── */
    @media(max-width:380px) {
        .page-banner-content h1 {
            font-size: 1.55rem;
        }

        .testi-slide {
            flex: 0 0 95%;
        }

        .why-circles-row {
            grid-template-columns: repeat(2, 1fr);
        }

        .why-points-grid {
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .why-point {
            padding: 10px 8px;
            gap: 7px;
        }

        .why-point h5 {
            font-size: 12px;
        }

        .why-point i {
            width: 32px;
            height: 32px;
            font-size: 13px;
            flex: 0 0 32px;
        }

        .stat-number h3 {
            font-size: 30px;
        }

        .testi-card {
            padding: 18px 14px;
        }

        .section-heading {
            font-size: 22px;
        }
    }