/* =========================================================
   TimySports — Responsive Stylesheet
   Breakpoints: xl(1200+), lg(992-1199), md(768-991), sm(<768), xs(<480)
   ========================================================= */

/* ─── Extra Large (1200px+) ─────────────────────────────── */
@media all and (max-width: 1199px) and (min-width: 992px) {
    .header .primary-header-inner .header-menu-wrap ul li a {
        font-size: 13px;
    }
}

/* ─── Desktop nav visible, mobile toggle hidden ─────────── */
@media all and (min-width: 992px) {
    .header .primary-header-inner .header-right-wrap {
        display: none !important;
    }
}

/* ─── Large → Tablet (below 992px) ─────────────────────── */
@media all and (max-width: 992px) {
    .header .primary-header-inner .header-right-wrap {
        display: block !important;
    }

    .slider-item .slider-content-wrap .hero-content-wrap {
        margin-bottom: 0;
    }

    /* About sections stack properly */
    .about-section-6 .about-img-6,
    .about-section-7 .about-img-6 {
        margin-bottom: 32px;
    }

    /* Reduce section padding on tablet */
    .pt-80  { padding-top:    60px; }
    .pb-80  { padding-bottom: 60px; }
    .pt-120 { padding-top:    80px; }
    .pb-120 { padding-bottom: 80px; }

    /* Results grid — 2 columns on tablet */
    .blog-section .row .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Equipment grid — 2 columns on tablet */
    .service-section-9 .col-lg-4,
    .service-section-9 .col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Vision/Mission section image */
    .about-img-wrap-5 {
        margin-top: 40px;
    }

    /* Page header padding — handled by design.css responsive block */

    /* Section heading title */
    .section-heading .section-title {
        font-size: clamp(1.5rem, 3.5vw, 2.25rem) !important;
    }

    /* Body text slightly smaller on tablet */
    p { font-size: 15px; }
}

/* ─── Tablet (768px – 991px) ────────────────────────────── */
@media all and (max-width: 992px) and (min-width: 768px) {
    /* Hero — fluid sizing handles desktop/tablet, just constrain sub-title */
    .hero-content .sub-title {
        font-size: clamp(18px, 3vw, 26px);
    }

    /* Footer 2-column on tablet */
    .footer-wrap .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Contact form full-width fields on tablet */
    .blog-contact-form .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* About tab title — tablet */
    .about-tab .tab-content .title {
        font-size: 1.15rem;
        line-height: 1.68;
    }

    /* Card title on tablet */
    .post-card-2 .post-content .title {
        font-size: 1rem;
    }
}

/* ─── Mobile (below 768px) ──────────────────────────────── */
@media all and (max-width: 767px) {
    /* ── Hero / Slider ──────────────────────────────────── */
    .hero-content .sub-title {
        font-size: 15px;
        letter-spacing: 0.01em;
    }
    .hero-content .title {
        font-size: clamp(30px, 9vw, 42px);
        letter-spacing: -0.015em;
        line-height: 1.08;
    }

    /* ── Section headings ───────────────────────────────── */
    .section-heading .sub-heading {
        font-size: 10px !important;
        letter-spacing: 2px;
        margin-bottom: 10px;
    }
    .section-heading .section-title {
        font-size: clamp(1.375rem, 6vw, 1.75rem) !important;
        line-height: 1.25;
        letter-spacing: -0.01em;
    }

    /* ── About section ──────────────────────────────────── */
    .about-content-6 .section-heading,
    .about-content-6 p {
        text-align: center;
    }
    .about-content-6 p,
    .about-section-6 p,
    .about-section-7 p {
        font-size: 14px;
        line-height: 1.8;
    }

    /* ── About tab ──────────────────────────────────────── */
    .about-tab .tab-content .title {
        font-size: 1.0625rem;
        line-height: 1.65;
    }
    .about-tab .nav-tabs .nav-link {
        font-size: 11px;
        padding: 8px 14px;
        letter-spacing: 0.06em;
    }

    /* ── Paragraph text ─────────────────────────────────── */
    p { font-size: 14px; line-height: 1.8; }
    .solution_desc { font-size: 13px; }

    /* ── Results grid — 1 column on mobile ──────────────── */
    .blog-section .row .col-lg-4,
    .blog-section .row .col-lg-3,
    .blog-section .row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }

    /* ── Equipment grid (homepage) — 1 column on mobile ────────────── */
    .service-section-9 .col-lg-4,
    .service-section-9 .col-lg-3,
    .service-section-9 .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ── Solutions home carousel — touch: always show desc/link ── */
    .sol-card__title { font-size: 0.9375rem; }
    .sol-section-cta { margin-top: 16px; }
    .sol-card__desc {
        max-height: 72px;
        opacity: 1;
        transform: translateY(0);
    }
    .sol-card__link {
        opacity: 1;
        transform: translateY(0);
    }
    /* Solutions head: arrows centred below heading on mobile */
    .sol-carousel-nav {
        position: static !important;
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }
    /* Solutions carousel: reduce bottom padding for pagination */
    .solutions-home-carousel { padding-bottom: 32px; }

    /* ── Inspiration / Quotes — fix phantom padding on mobile ── */
    .ts-qcard { content-visibility: visible; contain-intrinsic-size: none; }
    .ts-quotes-section { overflow: visible; }
    .ts-quotes-swiper-wrap { padding-bottom: 36px; }
    .ts-quotes-pagination { margin-top: 16px; }

    /* ── Solutions/Events/Equipments listing — 1 column ─── */
    .grid-post-wrap-2 {
        grid-template-columns: 1fr !important;
    }

    /* ── Horizontal card — stack on mobile ──────────────── */
    .post-card-2.inner-blog-2 {
        flex-direction: column;
    }
    .post-card-2.inner-blog-2 .post-thumb {
        width: 100% !important;
        height: 220px;
    }
    .post-card-2.inner-blog-2 .post-content .title {
        font-size: 1rem;
    }
    .post-card-2.inner-blog-2 .post-content p {
        font-size: 13px;
    }

    /* ── Card titles ────────────────────────────────────── */
    .post-card-2 .post-content .title {
        font-size: 0.9375rem;
        line-height: 1.4;
    }
    .post-card-2 .post-content p {
        font-size: 13px;
        line-height: 1.75;
    }
    .post-card .post-content .title {
        font-size: 0.9375rem;
    }
    .post-card .post-content p {
        font-size: 13px;
    }

    /* ── Equipment card ─────────────────────────────────── */
    .equipments_section .service-item-5 .service-content {
        padding: 20px;
    }
    .equipments_section .service-item-5 .service-content > p {
        font-size: 13px;
    }

    /* ── Page header ────────────────────────────────────── */
    /* page-header padding handled by design.css */
    .page-header .page-header-content .title {
        font-size: clamp(1.375rem, 7vw, 1.875rem);
        letter-spacing: -0.01em;
    }
    .page-header .page-header-content .sub-title {
        font-size: 12px;
    }

    /* ── Section padding ────────────────────────────────── */
    .pt-80  { padding-top:    48px; }
    .pb-80  { padding-bottom: 48px; }
    .pt-120 { padding-top:    60px; }
    .pb-120 { padding-bottom: 60px; }
    .pt-40  { padding-top:    28px; }

    /* ── Footer — single column ─────────────────────────── */
    .footer-wrap .col-lg-4,
    .footer-wrap .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 28px;
    }
    .footer-4 .footer-wrap {
        padding: 48px 0 24px;
    }
    .footer-widget .footer-list li a {
        font-size: 13px;
    }
    .footer-4 .logo-widget p,
    .footer-widget .address-list li {
        font-size: 13px;
    }
    .footer-widget .widget-header .widget-title {
        font-size: 0.875rem;
    }
    .copyright-content p {
        font-size: 11px;
    }

    /* ── Contact form ───────────────────────────────────── */
    .contact-section .col-lg-5,
    .contact-section .col-lg-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .contact-list .list-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .contact-list .list-item .icon-box .info p,
    .contact-list .list-item .icon-box .info a {
        font-size: 14px;
    }

    /* ── Map iframe ─────────────────────────────────────── */
    .map-wrapper iframe {
        height: 320px;
    }

    /* ── Testimonial text ───────────────────────────────── */
    .testi-wrapper-14 > p {
        font-size: 14px;
    }

    /* ── Result iframe ──────────────────────────────────── */
    .result-iframe-wrapper iframe {
        height: 420px;
    }

    /* ── Testimonials container ─────────────────────────── */
    .testi-wrapper-14 {
        padding: 24px 20px;
    }

    /* ── Sponsors carousel ──────────────────────────────── */
    .sponsor-carousel-3 .swiper-slide {
        padding: 0 10px;
    }

    /* ── Vision/Mission tabs ────────────────────────────── */
    .about-tab .nav-tabs {
        flex-wrap: wrap;
        gap: 6px;
    }
    .about-tab .nav-tabs .nav-link {
        font-size: 10px;
        letter-spacing: 0.07em;
        padding: 7px 13px;
    }
    .about-tab .tab-content .title {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* ── Button size ────────────────────────────────────── */
    .rr-primary-btn {
        font-size: 13px !important;
        padding: 16px 22px !important;
    }
}

/* ─── Mobile Side Menu ───────────────────────────────────── */
@media only screen and (max-width: 992px) {
    .mobile-side-menu {
        padding: 28px 24px !important;
        width: 300px !important;
    }
    .mobile-side-menu .side-menu-head .mobile-side-menu-close {
        right: 24px !important;
        top: 28px !important;
    }
    .mean-bar .mean-nav.mean-nav > ul li:not(:last-of-type) {
        margin-bottom: 14px !important;
        padding-bottom: 14px !important;
    }
    .mobile-side-menu .side-menu-wrap {
        margin-bottom: 24px !important;
    }
}

@media only screen and (max-width: 767px) {
    .mobile-side-menu {
        padding: 20px 16px !important;
        width: 280px !important;
        max-width: 85vw !important;
    }
    .mobile-side-menu .side-menu-head .mobile-side-menu-close {
        right: 16px !important;
        top: 20px !important;
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }
    .mobile-side-menu .side-menu-head a img {
        max-width: 100px !important;
    }
    .mean-bar .mean-nav.mean-nav > ul li:not(:last-of-type) {
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }
    .mean-bar .mean-nav.mean-nav > ul li a {
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: 0.01em !important;
    }
    .mean-bar .mean-nav.mean-nav > ul li ul {
        padding-left: 16px !important;
        margin-top: 10px !important;
    }
    .mean-bar .mean-nav.mean-nav > ul li ul li:not(:last-of-type) {
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
    }
    .mean-bar .mean-nav.mean-nav > ul li ul li a {
        font-size: 13px !important;
    }
    .mean-bar .mean-nav {
        padding-top: 12px !important;
    }
}

/* ─── Extra Small (below 480px) ─────────────────────────── */
@media all and (max-width: 479px) {
    /* ── Hero ──────────────────────────────────────────── */
    .hero-content .title {
        font-size: clamp(26px, 8.5vw, 34px);
        letter-spacing: -0.01em;
    }
    .hero-content .sub-title {
        font-size: 13px;
    }

    /* ── Section heading ────────────────────────────────── */
    .section-heading .section-title {
        font-size: 1.25rem !important;
        line-height: 1.3;
    }

    /* ── Page header ────────────────────────────────────── */
    .page-header .page-header-content .title {
        font-size: 1.25rem;
    }
    .page-header .page-header-content .sub-title {
        font-size: 11px;
    }

    /* ── Body text ──────────────────────────────────────── */
    p { font-size: 13px; }
    .solution_desc { font-size: 12.5px; }

    /* ── Contact form ───────────────────────────────────── */
    .contact-section .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ── Result iframe ──────────────────────────────────── */
    .result-iframe-wrapper iframe {
        height: 320px;
    }

    /* ── Map ────────────────────────────────────────────── */
    .map-wrapper iframe {
        height: 260px;
    }

    /* ── Footer ─────────────────────────────────────────── */
    .copyright-content p {
        font-size: 10px;
    }
    .footer-widget .footer-list li a,
    .footer-4 .logo-widget p,
    .footer-widget .address-list li {
        font-size: 12px;
    }

    /* ── Button ─────────────────────────────────────────── */
    .rr-primary-btn {
        font-size: 12px !important;
        padding: 14px 18px !important;
    }

    /* ── Card ───────────────────────────────────────────── */
    .post-card-2 .post-content .title {
        font-size: 0.875rem;
    }
    .equipments_section .service-item-5 .service-content > p {
        font-size: 12.5px;
    }
}

/* =========================================================
   NEW SECTIONS — Homepage & About Page Responsiveness
   Breakpoints: lg(≤992), md(≤768), sm(≤576), xs(≤479)
   ========================================================= */

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

    /* ── Homepage: Solutions carousel head ─────────────── */
    .ts-solutions-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* ── Homepage: Equipment cards — 2 col ─────────────── */
    .ts-equipment-section .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* ── Homepage: Quotes section ───────────────────────── */
    .ts-quotes-section { overflow: visible; }

    /* ── About: Stats row ───────────────────────────────── */
    .ts-about-stats {
        gap: 20px;
        padding: 20px 0;
        margin: 20px 0;
    }

    /* ── About: Service cards — 2 col ──────────────────── */
    .ts-about-services-section .col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* ── About: Partner/Swimming/Microplus sections ─────── */
    .ts-about-partner-section .row,
    .ts-about-swimming-section .row,
    .ts-about-microplus-section .row {
        flex-direction: column;
    }
    .ts-about-partner-section .col-lg-6,
    .ts-about-swimming-section .col-lg-6,
    .ts-about-microplus-section .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
        order: unset !important;
    }

    /* ── About: Swim features — 2 col ──────────────────── */
    .ts-swim-feature {
        padding: 14px;
    }

    /* ── About: CTA box ─────────────────────────────────── */
    .ts-about-cta-box {
        padding: 36px 28px;
    }
    .ts-about-cta-box .col-lg-4 {
        text-align: left !important;
    }
    .ts-about-cta-box .justify-content-lg-end {
        justify-content: flex-start !important;
    }

    /* ── Services showcase carousel ─────────────────────── */
    .ts-svc-slide { height: 360px; }
    .ts-svc-carousel-head { margin-bottom: 32px; }

    /* ── Section carousels (alge/swim/micro) ────────────── */
    .ts-about-swiper .swiper-slide img {
        aspect-ratio: 16 / 9;
    }
}

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

    /* ── Homepage: Equipment cards — 1 col ─────────────── */
    .ts-equipment-section .col-lg-4,
    .ts-equipment-section .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .ts-equipment-card .card-thumb { height: 200px; }
    .ts-equipment-card .card-body  { padding: 18px; }

    /* ── Homepage: Solutions carousel ──────────────────── */
    .ts-solutions-head { gap: 10px; }
    .sol-card__title   { font-size: 0.9rem; }

    /* ── About: Stats row — 2 per row ───────────────────── */
    .ts-about-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        padding: 16px 0;
        margin: 16px 0;
    }
    .ts-stat-item .stat-number { font-size: 1.5rem; }
    .ts-stat-item .stat-label  { font-size: 11px; }

    /* ── About: Service cards — 1 col ──────────────────── */
    .ts-about-services-section .col-lg-3,
    .ts-about-services-section .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .ts-service-card { padding: 22px 18px; }
    .ts-service-icon { width: 48px; height: 48px; font-size: 20px; margin-bottom: 16px; }
    .ts-service-title { font-size: 0.9375rem; }
    .ts-service-desc  { font-size: 13.5px; }

    /* ── About: Swim features — 1 col ──────────────────── */
    .ts-swim-feature { padding: 14px 12px; gap: 12px; }
    .ts-swim-feature > i { font-size: 20px; }
    .ts-swim-feature h5 { font-size: 0.875rem; margin-bottom: 4px; }
    .ts-swim-feature p  { font-size: 12.5px; }

    /* ── About: Partner badge ───────────────────────────── */
    .ts-about-partner-badge {
        font-size: 11.5px;
        padding: 8px 14px;
        bottom: 14px;
        left: 14px;
    }

    /* ── About: Checklist ───────────────────────────────── */
    .ts-about-list li { font-size: 13.5px; }

    /* ── About: CTA box ─────────────────────────────────── */
    .ts-about-cta-box { padding: 28px 20px; }
    .ts-about-cta-title { font-size: 1.2rem; }
    .ts-about-cta-desc  { font-size: 13.5px; }
    .ts-about-cta-box .d-flex { flex-direction: column; gap: 10px !important; }
    .ts-about-cta-box .rr-primary-btn,
    .ts-about-cta-box .rr-outline-btn { width: 100%; justify-content: center; }

    /* ── Services showcase carousel ─────────────────────── */
    .ts-services-carousel-section { padding: 48px 0 40px; }
    .ts-svc-carousel-head { margin-bottom: 24px; }
    .ts-svc-slide { height: 280px; }
    .ts-svc-slide__overlay { padding: 16px 14px; }
    .ts-svc-slide__title { font-size: 0.9375rem; margin-bottom: 6px; }
    .ts-svc-slide__tag { font-size: 10px; padding: 4px 10px; margin-bottom: 8px; }
    .ts-svc-prev { right: 52px; }

    /* ── Section carousels (alge/swim/micro) ────────────── */
    .ts-about-swiper { border-radius: 10px; }
    .ts-about-swiper .swiper-slide img { aspect-ratio: 4 / 3; }
}

/* ─── Small mobile (≤576px) ─────────────────────────────── */
@media (max-width: 576px) {

    /* ── About: Swim features — 1 col forced ───────────── */
    .ts-about-swimming-section .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ── About: Stats — keep 2 col ─────────────────────── */
    .ts-about-stats { grid-template-columns: 1fr 1fr; }
}

/* ─── Extra small (≤479px) ──────────────────────────────── */
@media (max-width: 479px) {

    /* ── About: Stats — 1 col ───────────────────────────── */
    .ts-about-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ts-stat-item .stat-number { font-size: 1.3rem; }

    /* ── About: Service cards ───────────────────────────── */
    .ts-service-card { padding: 18px 14px; }
    .ts-service-icon { width: 44px; height: 44px; font-size: 18px; }

    /* ── About: CTA box ─────────────────────────────────── */
    .ts-about-cta-box { padding: 22px 16px; border-radius: 14px; }
    .ts-about-cta-title { font-size: 1.1rem; }

    /* ── Services showcase carousel ─────────────────────── */
    .ts-svc-slide { height: 240px; }
    .ts-svc-slide__tag { font-size: 9.5px; padding: 3px 9px; }
    .ts-svc-slide__title { font-size: 0.875rem; }
    .ts-svc-prev { right: 50px; }
    .ts-svc-prev, .ts-svc-next { width: 38px; height: 38px; font-size: 13px; }

    /* ── Homepage: Equipment card body ─────────────────── */
    .ts-equipment-card .card-body { padding: 14px; }
    .ts-equipment-card .card-title { font-size: 0.9rem; }
    .ts-equipment-card .card-desc  { font-size: 12.5px; }

    /* ── Homepage: Solutions carousel ──────────────────── */
    .solutions-home-carousel { padding-bottom: 28px; }
}
/* =========================================================
   END NEW SECTIONS RESPONSIVENESS
   ========================================================= */

/* =========================================================
   WHY CHOOSE US — 6 CARDS RESPONSIVENESS
   ========================================================= */
/* ─ tablet (992px) ─ 3 per row via col-md-4, no override needed */
/* ─ mobile (767px) ─ 2 per row via col-sm-6 col-6, no override needed */
@media (max-width: 767px) {
    .ts-why-card {
        padding: 22px 16px 18px;
    }
    .ts-why-card__icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin-bottom: 14px;
        border-radius: 12px;
    }
    .ts-why-card__title { font-size: 0.875rem; margin-bottom: 8px; }
    .ts-why-card__desc  { font-size: 12px; }
}
@media (max-width: 479px) {
    .ts-why-card {
        padding: 18px 12px 16px;
    }
    .ts-why-card__icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
        margin-bottom: 12px;
        border-radius: 10px;
    }
    .ts-why-card__title { font-size: 0.8125rem; }
    .ts-why-card__desc  { font-size: 11.5px; line-height: 1.6; }
}
/* =========================================================
   END WHY CHOOSE US RESPONSIVENESS
   ========================================================= */


/* =========================================================
   BANNER — Mobile responsive overrides
   Inline styles handle layout; CSS handles sizing only.
   ========================================================= */

/* Title font sizes per breakpoint */
@media only screen and (max-width: 992px) {
    .runok-slider-2 .hero-content .title {
        font-size: clamp(1.8rem, 5vw, 3rem) !important;
    }
}
@media only screen and (max-width: 767px) {
    .runok-slider-2 .hero-content .title {
        font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
        letter-spacing: -0.01em !important;
    }
}
@media only screen and (max-width: 479px) {
    .runok-slider-2 .hero-content .title {
        font-size: clamp(1.3rem, 8vw, 1.8rem) !important;
    }
}
/* =========================================================
   END BANNER HERO-CONTENT OVERRIDES
   ========================================================= */

/* ── ts-banner-title: override main.css .title rules ─────── */
.runok-slider-2 .ts-banner-title,
.runok-slider-2 .slider-item .slider-content-wrap .hero-content-wrap .hero-content .ts-banner-title {
    font-size: clamp(1.2rem, 4vw, 3.5rem) !important;
    font-weight: 700 !important;
    font-style: italic !important;
    line-height: 1.05 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    display: block !important;
    position: static !important;
    margin-bottom: 0 !important;
}
.runok-slider-2 .ts-banner-title::before { display: none !important; content: none !important; }

@media only screen and (max-width: 992px) {
    .runok-slider-2 .ts-banner-title { font-size: clamp(1.8rem, 5vw, 3.2rem) !important; }
}
@media only screen and (max-width: 767px) {
    .runok-slider-2 .ts-banner-title { font-size: clamp(1.5rem, 7vw, 2.4rem) !important; }
}
@media only screen and (max-width: 479px) {
    .runok-slider-2 .ts-banner-title { font-size: clamp(1.3rem, 8vw, 1.9rem) !important; }
}

/* ── Header: always fixed, never relative ────────────────── */
@media only screen and (max-width: 992px) {
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        height: auto !important;
    }
}

/* ── Mobile: body padding for fixed header ───────────────── */
@media only screen and (max-width: 992px) {
    #smooth-content {
        padding-top: 0;
    }
    .slider-section {
        margin-top: 0;
    }
    /* header ~72px on tablet */
    .slider-section {
        margin-top: 72px;
    }
}
@media only screen and (max-width: 767px) {
    /* header ~60px on mobile */
    .slider-section {
        margin-top: 60px;
    }
    /* force slide-img-wrap to fill parent on mobile */
    .slider-section .slide-img-wrap {
        height: 100% !important;
    }
    /* hide banner artifact pagination on mobile (keep ts-banner-pagination) */
    .runok-slider-2 .swiper-pagination:not(.ts-banner-pagination) {
        display: none !important;
    }

    /* mobile: hide banner content except main title & subtitle */
    .runok-slider-2 .hero-brand-label,
    .runok-slider-2 .hero-description {
        display: none !important;
    }

    /* mobile: let title use full container width */
    .runok-slider-2 .hero-content-wrap .hero-content {
        max-width: 90% !important;
        width: 90% !important;
    }
}

/* ── Hide desktop nav on mobile before JS loads ─────────── */
@media only screen and (max-width: 992px) {
    .header .primary-header-inner .header-menu-wrap {
        display: none !important;
    }
}

/* =========================================================
   SPORTS WE SERVE — Responsive
   ========================================================= */
@media (max-width: 767px) {
    .ts-sport-card { padding: 14px 8px 12px; gap: 6px; }
    .ts-sport-icon--emoji { font-size: 24px; }
    .ts-sport-name { font-size: 11px; }
}
@media (max-width: 479px) {
    .ts-sport-card { padding: 12px 6px 10px; }
    .ts-sport-icon--emoji { font-size: 20px; }
    .ts-sport-name { font-size: 10px; }
}

/* =========================================================
   ABOUT — Partner logo cards responsive
   ========================================================= */
@media (max-width: 767px) {
    .ts-partner-logo-card { padding: 16px 10px 14px; }
    .ts-partner-logo-card img { max-width: 80px; }
    .ts-partner-logo-card__name { font-size: 11px; }
}

/* =========================================================
   ABOUT — Badge cards responsive
   ========================================================= */
@media (max-width: 767px) {
    .ts-badge-card { padding: 18px 10px 16px; gap: 8px; }
    .ts-badge-card i { font-size: 22px; }
    .ts-badge-card span { font-size: 12px; }
}

/* =========================================================
   ABOUT — Compact quotes responsive
   ========================================================= */
@media (max-width: 767px) {
    .ts-qcard--compact { padding: 20px 16px 16px; }
    .ts-qcard--compact .ts-qcard__text { font-size: 13px; }
}

/* =========================================================
   HOME — Solutions carousel arrows below responsive
   ========================================================= */
@media (max-width: 767px) {
    .sol-carousel-nav--below { margin-top: 16px; }
}

/* =========================================================
   PARTNERS CARD SWIPER - Responsive
   ========================================================= */