/*
 * responsive.css — every @media rule for the clean frontend rebuild,
 * consolidated from what used to be tokens.css + layout.css +
 * public/frontend/css/sections/*.css into a single file per the
 * project's folder-structure spec (just style.css + responsive.css).
 * Base (non-media) rules for the same selectors live in style.css.
 * Section order matches style.css / the Home page's rendering order.
 */

/* ---------- TOKENS ---------- */
@media (max-width: 1366px) {
    body { font-size: var(--text-base-size); line-height: var(--text-base-line); }
}

/* ---------- LAYOUT ---------- */
/* Utility classes (replace Elementor's elementor-hidden-* core classes —
   same real breakpoints, from custom-frontend.min.css). These only exist
   inside media queries. */
@media (min-width: 1025px) and (max-width: 1366px) { .hide-laptop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .hide-tablet { display: none !important; } }
@media (max-width: 767px) { .hide-mobile { display: none !important; } }

@media (max-width: 1366px) { .header-topbar { padding: 10px 0; } }
@media (max-width: 1024px) { .header-topbar-meta { justify-content: center; } }
@media (max-width: 767px) {
    /* Real gap collapses to 0 with 15px vertical padding on mobile — DP's
       real address ("Office No.1 51-b Gulgasht Multan, Punjab 66000") is
       much longer than the source demo's ("New Jersey, 07023, USA"), so
       flex-wrap is added here (not present in the source) purely to keep
       the longer real content from overflowing at this width. */
    .header-topbar { padding: 0 0 10px; }
    .header-topbar-meta { gap: 0; flex-wrap: wrap; row-gap: 10px; padding: 15px 10px; }
}

@media (max-width: 1024px) {
    .dp-svcmenu { flex-wrap: wrap; }
    .dp-svcmenu-promo { flex-basis: 100%; }
}

/* ---------- MOBILE / TABLET HEADER ROW ----------
   The desktop row's 120px side padding squeezed the logo and icons into
   the middle on small screens: logo left, search + menu right here. */
@media (max-width: 1024px) {
    .header-row { gap: 16px; padding: 14px 24px; }
    .header-logo { flex: 0 1 auto; min-width: 0; padding-left: 0; }
    .header-logo-link .site-logo-img { max-width: 180px; max-height: 46px; }
    .header-actions { gap: 12px; margin-left: auto; padding-right: 0; }
    .header-actions .rs-offcanvas-area ul { margin: 0; padding: 0; list-style: none; }
    .header-actions .rs-offcanvas-area .nav-link { padding: 0 !important; line-height: 1; }
    .header-actions .rs-offcanvas-area a.nav-expander {
        display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; cursor: pointer;
        background-image: linear-gradient(180deg, var(--color-primary) 0%, var(--color-cta-gradient-end) 100%);
    }
    .header-actions .rs-offcanvas-area .nav-expander i { color: #FFFFFF; font-size: 22px; }
    .header-search-toggle { width: 44px; height: 44px; }
    .header-divider { display: none; }
}
@media (max-width: 767px) {
    .header-row { gap: 12px; padding: 10px 16px; }
    .header-logo-link .site-logo-img { max-width: 150px; max-height: 40px; }
    .header-actions { gap: 10px; }
    .header-search-toggle, .header-actions .rs-offcanvas-area a.nav-expander { width: 40px; height: 40px; }
    .header-search-toggle i, .header-actions .rs-offcanvas-area .nav-expander i { font-size: 19px; }
}

/* ---------- MOBILE / TABLET OFF-CANVAS NAV ----------
   Modelled on developerspoint.net's mobile menu: panel slides in from the
   left over a dimmed page, plain list, pill-shaped arrow toggles for
   dropdowns, active item in the brand blue. Markup: mobile-nav.blade.php.
   `body` prefix + !important are needed to beat the vendor
   `body.nav-expanded nav { right: 0 !important }`. */
@media (max-width: 1024px) {
    body.nav-expanded { overflow: hidden; }
    body .rs-offcanvas-area nav.right_menu_togle {
        left: 0 !important; right: auto !important; width: min(360px, 88vw); max-width: none; padding: 0;
        display: flex; flex-direction: column; background: #F7F8FB; box-shadow: 0 0 40px rgba(10, 22, 94, .18);
        transform: translateX(-105%); transition: transform .35s ease;
    }
    body.nav-expanded .rs-offcanvas-area nav.right_menu_togle { transform: none; }
    body .rs-offcanvas-area .rsoffwrap {
        left: 0; opacity: 0; visibility: hidden; background-color: rgba(5, 12, 50, .55); transition: opacity .3s, visibility .3s;
    }
    body.nav-expanded .rs-offcanvas-area .rsoffwrap { left: 0; opacity: 1; visibility: visible; }

    .right_menu_togle .sidebar-offcanvas-menu-logo {
        display: flex; align-items: center; min-height: 76px; margin: 0 !important; padding: 16px 70px 16px 20px;
        background: #FFFFFF; border-bottom: 1px solid #E9EDF7;
    }
    .right_menu_togle .sidebar-offcanvas-menu-logo .site-logo-img { max-width: 150px; max-height: 42px; height: auto; }
    .right_menu_togle .rsoffwrap-close {
        top: 18px; right: 16px; z-index: 2; display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 8px; line-height: 1;
        background-image: linear-gradient(180deg, var(--color-primary) 0%, var(--color-cta-gradient-end) 100%);
    }
    .right_menu_togle .rsoffwrap-close i { font-size: 22px; }

    .right_menu_togle .nav.navbar { display: block; width: 100%; margin: 0; padding: 14px 16px 8px; }
    .right_menu_togle .navbar-menu, .right_menu_togle .menu-main-menu-container { width: 100%; }

    .dp-mnav, .dp-mnav ul { margin: 0; padding: 0; list-style: none; }
    .dp-mnav-item { border-bottom: 1px solid #E6EAF4; }
    .dp-mnav-item:last-child { border-bottom: 0; }
    .dp-mnav-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .rs-offcanvas-area .right_menu_togle .dp-mnav-link {
        flex: 1; min-width: 0; padding: 14px 4px; color: var(--color-secondary); font-size: 17px; font-weight: 600; line-height: 24px; text-decoration: none;
    }
    .rs-offcanvas-area .right_menu_togle .dp-mnav-item.is-active > .dp-mnav-row > .dp-mnav-link,
    .rs-offcanvas-area .right_menu_togle .dp-mnav-link:hover { color: var(--color-primary); }

    .dp-mnav-toggle, .dp-mnav-toggle:hover, .dp-mnav-toggle:focus {
        display: inline-flex; flex: none; align-items: center; justify-content: center; width: 46px; height: 30px; padding: 0;
        border: 1px solid #C9D1EA; border-radius: 30px; background: #FFFFFF; color: var(--color-secondary); cursor: pointer;
    }
    .dp-mnav-toggle i { font-size: 20px; line-height: 1; transition: transform .25s; }
    .dp-mnav-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
    .is-open > .dp-mnav-row > .dp-mnav-toggle { border-color: var(--color-primary); background: var(--color-primary); color: #FFFFFF; }
    .is-open > .dp-mnav-row > .dp-mnav-toggle i { transform: rotate(180deg); }
    .dp-mnav-toggle--sm, .dp-mnav-toggle--sm:hover, .dp-mnav-toggle--sm:focus { width: 38px; height: 26px; }
    .dp-mnav-toggle--sm i { font-size: 18px; }

    .dp-mnav-panel { padding: 0 0 14px; }
    .dp-mnav-panel[hidden] { display: none; }
    .dp-mnav-promo { margin-bottom: 10px; padding: 14px 16px; border-radius: 12px; background: #E8F6FD; }
    .dp-mnav-promo strong { display: block; margin-bottom: 4px; color: var(--color-secondary); font-size: 16px; line-height: 22px; }
    .dp-mnav-promo p { margin: 0; color: var(--color-text); font-size: 14px; line-height: 21px; }
    .dp-mnav-groups { border-radius: 12px; background: #FFFFFF; border: 1px solid #E6EAF4; }
    .dp-mnav-group + .dp-mnav-group { border-top: 1px solid #EEF1F8; }
    .dp-mnav-row--group { padding: 0 10px 0 12px; }
    .rs-offcanvas-area .right_menu_togle .dp-mnav-group-link {
        display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 11px 0;
        color: var(--color-secondary); font-size: 15px; font-weight: 600; line-height: 21px; text-decoration: none;
    }
    .dp-mnav-group-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #EEF1FF; color: var(--color-primary); }
    .dp-mnav-group-icon svg { width: 17px; height: 17px; }
    .dp-mnav-group.is-open .dp-mnav-group-icon, .dp-mnav-group-link.is-current .dp-mnav-group-icon { background: var(--color-primary); color: #FFFFFF; }
    .dp-mnav-group .dp-mnav-sublist { margin: 0 12px 0 52px; padding: 0 0 10px; }
    .dp-mnav-sublist li + li { border-top: 1px dashed #E6EAF4; }
    .rs-offcanvas-area .right_menu_togle .dp-mnav-sublist a {
        display: block; padding: 9px 4px; color: var(--color-text); font-size: 15px; font-weight: 500; line-height: 21px; text-decoration: none;
    }
    .rs-offcanvas-area .right_menu_togle .dp-mnav-sublist a:hover,
    .rs-offcanvas-area .right_menu_togle .dp-mnav-sublist a.is-current,
    .rs-offcanvas-area .right_menu_togle .dp-mnav-group-link.is-current { color: var(--color-primary); }
    .dp-mnav-item > .dp-mnav-panel > .dp-mnav-sublist { padding: 4px 14px; border: 1px solid #E6EAF4; border-radius: 12px; background: #FFFFFF; }

    body .right_menu_togle .rs-mob-off-content { margin: auto 16px 20px; padding: 18px; border-radius: 12px; background: #FFFFFF; border: 1px solid #E6EAF4; }
    .right_menu_togle .rs-mob-off-content .widget-title { margin: 0 0 10px; font-size: 18px; line-height: 24px; }
    .right_menu_togle .rs-mob-off-content .contact-area { margin: 0; padding: 0; list-style: none; }
    .right_menu_togle .rs-mob-off-content .contact-area li { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font-size: 14px; line-height: 21px; }
    .right_menu_togle .rs-mob-off-content .contact-area i { flex: none; width: 20px; color: var(--color-primary); font-size: 17px; line-height: 21px; text-align: center; }
    body .right_menu_togle .rs-mob-off-content .contact-area li { margin: 0 !important; padding: 5px 0 !important; }
    body .right_menu_togle .rs-mob-off-content .contact-area li > * { margin: 0 !important; padding: 0 !important; }
    body .rs-offcanvas-area .right_menu_togle .rs-mob-off-content .contact-area li i { position: static; top: auto; left: auto; font-size: 18px; }
    .right_menu_togle .rs-mob-off-content .contact-area a { color: var(--color-secondary); word-break: break-word; }
}

@media (max-width: 1024px) {
    .footer-col--brand, .footer-col--company, .footer-col--links, .footer-col--newsletter { width: 50%; padding-left: 20px; }
}
@media (max-width: 600px) {
    .footer-col--brand, .footer-col--company, .footer-col--links, .footer-col--newsletter { width: 100%; padding-left: 0; border-right: none; }
}
@media (max-width: 600px) { .footer-bottom-inner { flex-direction: column; text-align: center; } }

/* ---------- HERO ---------- */
@media (min-width: 1367px) {
    .hero-section { padding: 75px max(20px, calc((100vw - 1310px) / 2)) 70px; }
}
@media (max-width: 1024px) {
    .hero-content, .hero-media { flex: 1 1 100%; justify-content: center; align-items: center; text-align: center; }
    /* Let the hero column shrink to the screen: without min-width:0 its
       min-content width (the partner-logo Slick track, which measures
       itself from its parent) held it at the 620px max, clipping the
       heading and pushing the button + logo strip off-screen. */
    .hero-content, .hero-logo-strip, .hero-actions { min-width: 0; max-width: 100%; }
    .hero-actions { align-items: center; width: 100%; }
    .hero-subtext { width: 100%; }
    .hero-badge { display: none; }
}

/* ---------- MARQUEE ---------- */
/* (no @media rules) */

/* ---------- ABOUT / STATS ---------- */
@media (min-width: 1367px) {
    .about-section { padding-left: max(20px, calc((100vw - 1310px) / 2)); padding-right: max(20px, calc((100vw - 1310px) / 2)); }
}
@media (min-width: 1025px) and (max-width: 1366px) { .about-shape { display: none; } }
@media (max-width: 1024px) {
    .about-section { flex-wrap: wrap; margin-bottom: 60px; }
    .about-media, .about-content { flex: 1 1 100%; max-width: 100%; }
    .about-media-inner { width: 78%; }
    .about-content { margin-top: 30px; }
}
@media (max-width: 640px) { .about-value-col { width: 100%; } }

/* ---------- VIDEO CTA ---------- */
@media (max-width: 768px) {
    .video-cta-card { min-height: 320px; margin-top: 0; }
}

/* ---------- SERVICES BENTO GRID ---------- */
@media (min-width: 1367px) {
    .services-bento-section { padding-left: max(20px, calc((100vw - 1310px) / 2)); padding-right: max(20px, calc((100vw - 1310px) / 2)); }
}
@media (max-width: 1024px) {
    /* Heading on its own full-width row, then the 5 cards in equal-height rows. */
    .services-bento-row { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: 1fr; grid-auto-flow: row; gap: 30px; }
    .services-bento-heading { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .services-bento-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- TEAM SLIDER ---------- */
@media (min-width: 1367px) {
    .team-slider-section { padding-left: max(20px, calc((100vw - 1310px) / 2)); padding-right: max(20px, calc((100vw - 1310px) / 2)); }
}
@media (max-width: 767px) {
    /* Featured photo on its own full-width row above the info panel (the
       desktop 40% column left a ~140px photo with its name card clipped). */
    .team-slider-section .team-photo-col { flex: 0 0 100%; max-width: 100%; }
}

/* ---------- SUCCESS STORY ---------- */
@media (min-width: 1367px) {
    .success-story-section { padding-left: max(20px, calc((100vw - 1310px) / 2)); padding-right: max(20px, calc((100vw - 1310px) / 2)); }
}
@media (max-width: 1024px) {
    .success-story-section { padding-bottom: 60px; }
    .success-story-intro, .success-story-partners, .success-story-stats { max-width: 100%; width: 100%; }
    .success-story-stat-shape { display: none; }
}

/* ---------- TECHNOLOGY LOGOS ---------- */
@media (min-width: 1367px) {
    .tech-logos-section { padding-left: max(20px, calc((100vw - 1310px) / 2)); padding-right: max(20px, calc((100vw - 1310px) / 2)); }
}
@media (max-width: 1024px) { .tech-logos-item { width: 25%; } .tech-logos-card { padding: 40px 24px; margin-top: -60px; } }
@media (max-width: 640px) { .tech-logos-item { width: 50%; } }

/* ---------- WHY CHOOSE US ---------- */
@media (min-width: 1367px) {
    .why-choose-section { padding-left: max(20px, calc((100vw - 1310px) / 2)); padding-right: max(20px, calc((100vw - 1310px) / 2)); }
}
@media (max-width: 1024px) {
    .why-choose-inner { flex-wrap: wrap; }
    /* flex-basis too: the desktop `flex: 0 0 46%` otherwise wins over width. */
    .why-choose-content, .why-choose-steps { flex: 1 1 100%; width: 100%; max-width: 100%; }
    .why-choose-steps { margin-top: 30px; }
}
@media (max-width: 640px) {
    /* Icon, text and illustration stacked so the copy gets the card's full width. */
    .why-choose-steps .rs-addon-services.style7 .services-inner { flex-direction: column; padding: 22px 20px; }
    .why-choose-steps .content_part { width: 100%; min-width: 0; }
    .why-choose-steps .why-pillar-image { align-self: flex-start; }
}

/* ---------- PORTFOLIO ---------- */
@media (min-width: 1367px) {
    .portfolio-section { padding-left: max(5px, calc((100vw - 1310px) / 2)); padding-right: max(5px, calc((100vw - 1310px) / 2)); }
}
@media (max-width: 1366px) { .portfolio-slider-wrap { padding-left: 0; padding-right: 0; } }
@media (max-width: 1366px) { .portfolio-actions .rs-divider { width: 75%; } }
@media (max-width: 1024px) { .portfolio-actions .rs-divider { width: 62%; } }
@media (max-width: 1366px) { .portfolio-section { padding-top: 85px; } }
@media (max-width: 1024px) { .portfolio-section { padding: 60px 10px 60px; } }

/* ---------- TESTIMONIALS + INDUSTRY EXPERTISE ---------- */
@media (min-width: 1367px) {
    .testimonials-industry-section { padding-left: max(10px, calc((100vw - 1310px) / 2)); padding-right: max(10px, calc((100vw - 1310px) / 2)); }
}
@media (max-width: 1024px) { .testimonials-industry-section { padding-top: 0; padding-bottom: 60px; } }
@media (max-width: 640px) { .testimonials-industry-section { padding-bottom: 50px; } }
@media (max-width: 640px) {
    .testimonials-block .rs-testimonial-slider.style2 .testimonial-inner { padding: 22px 20px 20px; row-gap: 16px; }
    .testimonials-block .testimonial-inner .quote_icon svg { width: 34px; }
    .testimonials-block .testimonial-inner .desc { font-size: 15px; line-height: 26px; }
}
@media (max-width: 992px) {
    .industry-content, .industry-cards { width: 100%; margin-left: 0; }
    .industry-content { margin-bottom: 30px; }
}

/* ---------- CTA BANNER ---------- */
@media (min-width: 1367px) {
    .cta-banner-section { padding-left: max(20px, calc((100vw - 1310px) / 2)); padding-right: max(20px, calc((100vw - 1310px) / 2)); }
}
@media (max-width: 1024px) {
    .cta-banner-section { margin-top: -45px; }
    .cta-banner-inner { padding: 60px 40px; }
    .cta-banner-heading, .cta-banner-actions { flex: 1 1 100%; }
    .cta-banner-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .cta-banner-section { margin-top: -30px; }
    .cta-banner-inner { padding: 50px 20px 40px; }
    .cta-banner-actions { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ---------- BLOG ---------- */
@media (min-width: 1367px) {
    .blog-section { padding-left: max(20px, calc((100vw - 1310px) / 2)); padding-right: max(20px, calc((100vw - 1310px) / 2)); }
}
@media (max-width: 1024px) {
    .blog-section { padding: 60px 10px 65px; }
    .blog-slider-wrap .pre-blog-item .blog-inner-wrap { flex-direction: column; }
    /* 4-class depth to out-rank blog-slider.css's own
       `.prelements-blog-slider .blog_style_style2 .pre-blog-item .pre-image-wrap{width:43%}`
       (and the 57% content twin), which otherwise kept the desktop split on mobile. */
    .blog-slider-wrap .blog_style_style2 .pre-blog-item .pre-image-wrap,
    .blog-slider-wrap .blog_style_style2 .pre-blog-item .pre-blog-content { width: 100%; }
    .blog-slider-wrap .blog_style_style2 .pre-blog-item .pre-image-wrap .rs--thum { height: 220px; }
}

/* ---------- CONTACT ---------- */
@media (min-width: 1367px) {
    .contact-section { padding-left: max(20px, calc((100vw - 1310px) / 2)); padding-right: max(20px, calc((100vw - 1310px) / 2)); }
}
@media (max-width: 1024px) {
    .contact-info-col, .contact-form-col { max-width: 100%; }
    .contact-section { padding: 60px 20px 65px; }
    .contact-form-col { padding: 40px 20px 50px; }
}

/* ==================================================================
   ABOUT US PAGE
================================================================== */

/* ---------- Hero ---------- */
@media (max-width: 1366px) { .about-hero-section { padding: 105px 20px 20px; background-position: center right; } }
@media (max-width: 1024px) {
    .about-hero-section { padding: 100px 20px 20px; background-position: center center; }
    .about-hero-title { font-size: 36px; line-height: 46px; }
}
@media (max-width: 640px) {
    .about-hero-title { font-size: 26px; line-height: 36px; }
    .about-hero-shape { display: none; }
}

/* ---------- About Company ---------- */
@media (max-width: 1366px) { .about-company-section { margin-bottom: 305px; } }
@media (max-width: 1024px) {
    .about-company-section { flex-wrap: wrap; margin-bottom: 60px; padding-top: 80px; }
    .about-company-media, .about-company-content { max-width: 100%; flex: 1 1 100%; }
    .about-company-content { margin-top: 30px; }
}
@media (max-width: 480px) { .about-company-value-col { width: 100%; } }

/* ---------- Video CTA + Why Choose Us ---------- */
@media (max-width: 1024px) {
    .about-why-choose-inner { flex-wrap: wrap; }
    .about-why-choose-content, .about-why-choose-cards { max-width: 100%; }
}

/* ---------- Team Slider style9 ---------- */
@media (max-width: 1366px) { .about-team-section { padding: 70px 5px 64px; } }

/* ==================================================================
   BLOG PAGE
================================================================== */

/* ---------- Hero (same breakpoints as About's, real values match) ---------- */
@media (max-width: 1366px) { .blog-hero-section { padding: 105px 20px 20px; background-position: center right; } }
@media (max-width: 1024px) {
    .blog-hero-section { padding: 100px 20px 20px; background-position: center center; }
    .blog-hero-title { font-size: 36px; line-height: 46px; }
}
@media (max-width: 640px) {
    .blog-hero-title { font-size: 26px; line-height: 36px; }
    .blog-hero-shape { display: none; }
}

/* ---------- Listing / single content ---------- */
@media (max-width: 1024px) { #rs-blog.blog-page { padding: 60px 0; } }

/* ==================================================================
   SERVICES FOR AGENCIES
================================================================== */

/* ---------- Hero (same breakpoints as About/Blog's) ---------- */
@media (max-width: 1366px) { .service-hero-section { padding: 105px 20px 20px; background-position: center right; } }
@media (max-width: 1024px) {
    .service-hero-section { padding: 100px 20px 20px; background-position: center center; }
    .service-hero-title { font-size: 34px; line-height: 42px; }
}
@media (max-width: 640px) {
    .service-hero-title { font-size: 26px; line-height: 34px; }
    .service-hero-shape { display: none; }
}

/* ---------- Content grids/blocks ---------- */
@media (max-width: 900px) {
    .agency-card-grid, .agency-card-grid--work, .agency-testimonial-grid { grid-template-columns: 1fr; }
    .agency-block--tinted { margin: 0; border-radius: 0; padding: 40px 20px; }
    .agency-statement { padding: 40px 24px; }
    .agency-statement-text { font-size: 22px; }
}

/* ==================================================================
   CONTACT US PAGE
================================================================== */

/* ---------- Hero (same breakpoints as About/Blog/Service's) ---------- */
@media (max-width: 1366px) { .contact-hero-section { padding: 105px 20px 20px; background-position: center right; } }
@media (max-width: 1024px) {
    .contact-hero-section { padding: 100px 20px 20px; background-position: center center; }
    .contact-hero-title { font-size: 36px; line-height: 46px; }
}
@media (max-width: 640px) {
    .contact-hero-title { font-size: 26px; line-height: 36px; }
    .contact-hero-shape { display: none; }
}

/* ---------- Proposal / details / testimonials ---------- */
@media (max-width: 1024px) {
    .contact-proposal-info, .contact-proposal-form-col { max-width: 100%; flex: 1 1 100%; }
    .contact-details-grid.rs-contact-box { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .contact-proposal-services { grid-template-columns: 1fr; }
    .contact-testimonials-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .contact-proposal-section { padding: 55px 20px; }
    .contact-details-section { padding: 50px 20px; }
    .contact-details-grid.rs-contact-box { grid-template-columns: 1fr; }
    .contact-testimonials-section { padding: 20px 20px 50px; }
}

/* ==================================================================
   CAREERS PAGE
================================================================== */

/* ---------- Hero (same breakpoints as every other page hero) ---------- */
@media (max-width: 1366px) { .careers-hero-section { padding: 105px 20px 20px; background-position: center right; } }
@media (max-width: 1024px) {
    .careers-hero-section { padding: 100px 20px 20px; background-position: center center; }
    .careers-hero-title { font-size: 34px; line-height: 42px; }
}
@media (max-width: 640px) {
    .careers-hero-title { font-size: 26px; line-height: 34px; }
    .careers-hero-shape { display: none; }
}

/* ---------- Application / map ---------- */
@media (max-width: 1024px) {
    .careers-application-info, .careers-form-col { max-width: 100%; flex: 1 1 100%; }
    /* Stacked: no taller form beside it — the image takes its own 16:9 height. */
    .page-side-media { flex: none; min-height: 0; aspect-ratio: 16 / 9; max-width: 640px; }
}
@media (max-width: 640px) {
    .careers-application-section { padding: 55px 20px; }
    .careers-map-section { padding: 50px 20px; }
    .careers-map iframe { height: 300px; }
}

/* ==================================================================
   PORTFOLIO PAGES (/portfolio + /portfolio/{slug})
================================================================== */
@media (max-width: 1024px) {
    .portfolio-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portfolio-detail-inner { flex-direction: column; align-items: stretch; }
    .portfolio-detail-sidebar { flex: 1 1 auto; position: static; }
    .rs-porfolio-details .portfolio-detail-frame { height: 520px; }
}
@media (max-width: 640px) {
    .portfolio-page-section, .portfolio-detail-section { padding: 55px 20px 65px; }
    .portfolio-page-grid, .portfolio-page-grid--related { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .rs-porfolio-details .portfolio-detail-frame { height: 420px; }
    .rs-porfolio-details .portfolio-detail-sidebar .ps-informations { padding: 30px 25px; }
    .rs-porfolio-details .portfolio-detail-related { margin-top: 60px; }
    .rs-porfolio-details .portfolio-detail-related .ps-related-title { font-size: 26px; line-height: 34px; }
}

/* ==================================================================
   SERVICE DETAIL PAGES (/services/{slug})
================================================================== */
@media (min-width: 1367px) {
    /* Pull the highlights card up over the hero's 140px bottom padding. */
    .svc-highlights { margin-top: -70px; }
}
@media (max-width: 1200px) {
    .svc-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-highlights-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-highlight + .svc-highlight { border-left: 0; padding-left: 0; }
}
@media (max-width: 1024px) {
    .svc-band, .svc-testimonials { padding: 60px 20px; }
    .svc-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .svc-split > .svc-heading { position: static; }
    .svc-split > .svc-inline-btn { grid-column: 1; }
    .svc-split--designs > .svc-heading, .svc-split--designs > .svc-card-grid { grid-column: auto; grid-row: auto; }
    .svc-faq .agency-faq-section { max-width: 960px; }
    .svc-faq .agency-faq-accordion { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .svc-faq-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .svc-faq-split .svc-faq-side { position: static; }
    .svc-faq--split .agency-faq-heading { font-size: 28px; line-height: 36px; }
    .svc-cta.cta-banner-inner { padding: 50px 40px; }
    .svc-cta.svc-cta--soft { flex-wrap: wrap; padding: 40px 36px; gap: 24px; }
    .svc-cta--soft .cta-banner-heading { flex: 1 1 calc(100% - 112px); }
    .svc-cta--soft .cta-banner-heading h2 { font-size: 28px; line-height: 36px; }
    .svc-statement-text { font-size: 28px; line-height: 38px; }
}
@media (max-width: 767px) {
    .svc-card-grid, .svc-card-grid--2, .svc-testimonial-grid { grid-template-columns: minmax(0, 1fr); }
    .svc-highlights { margin-top: 30px; }
    .svc-highlights-card { grid-template-columns: minmax(0, 1fr); padding: 26px 24px; gap: 16px; }
}
@media (max-width: 640px) {
    .svc-band, .svc-testimonials { padding: 50px 20px; }
    .svc-heading { margin-bottom: 32px; }
    .svc-heading p { font-size: 16px; line-height: 27px; }
    .svc-card .services-inner { padding: 26px 22px; }
    .svc-cta-section, .svc-help { margin: 50px 0; }
    .svc-cta-section--final { margin: 50px 0; }
    .svc-cta.cta-banner-inner { padding: 40px 24px; }
    .svc-cta.svc-cta--soft { padding: 32px 22px; }
    .svc-cta-soft-icon { width: 60px; height: 60px; font-size: 28px; }
    .svc-cta-soft-icon i { font-size: 28px; }
    .svc-cta--soft .cta-banner-heading { flex: 1 1 100%; }
    .svc-cta--soft .cta-banner-heading h2 { font-size: 24px; line-height: 32px; }
    .svc-help-card { padding: 26px 24px; }
    .svc-help-text { font-size: 19px; line-height: 28px; }
    .svc-testimonial { padding: 28px 22px 24px; }
    .svc-testimonial blockquote { font-size: 16px; line-height: 27px; }
    .svc-stat-number { font-size: 52px; }
    .svc-statement { padding: 60px 20px; }
    .svc-statement-text { font-size: 24px; line-height: 33px; }
}

/* ==================================================================
   LEGAL PAGES (Privacy Policy / Terms & Conditions)
================================================================== */
@media (max-width: 1024px) {
    /* Contents list only earns its space beside the text on desktop. */
    .legal-page-inner--toc { grid-template-columns: minmax(0, 1fr); max-width: 960px; }
    .legal-toc { display: none; }
    .legal-page-section { padding: 60px 20px 70px; }
    .legal-doc { padding: 48px 40px; }
    .legal-doc-title { font-size: 32px; line-height: 42px; }
}
@media (max-width: 640px) {
    .legal-page-section { padding: 45px 16px 55px; }
    .legal-doc { padding: 30px 22px; border-radius: 12px; }
    .legal-doc p { font-size: 16px; line-height: 27px; }
    .legal-doc-title { font-size: 26px; line-height: 34px; margin-bottom: 18px; }
    .legal-doc-heading { font-size: 20px; line-height: 28px; padding-left: 14px; }
    .legal-doc-section { padding-top: 26px; margin-top: 26px; }
}

/* Free Consultation full-width map (Home / About) */
@media (max-width: 1024px) { .contact-map.contact-map--full iframe { height: 380px; } }
@media (max-width: 640px) { .contact-map.contact-map--full iframe { height: 300px; } }
@media (max-width: 640px) { .testimonials-block .rs-testimonial-slider.style2 .testimonial-inner { height: 360px; } }

/* Service page images (see style.css "SERVICE PAGE IMAGES") */
@media (max-width: 1280px) {
    /* Hero image moves under the text/CTA (above the breadcrumb). */
    .service-hero-media { position: relative; z-index: 1; right: auto; top: auto; transform: none; width: 100%; max-width: 640px; margin-top: 10px; order: 1; border-width: 2px; }
    .service-hero-section--media .service-hero-breadcrumb { order: 2; }
    .service-hero-section--media .service-hero-title, .service-hero-section--media .service-hero-subtext { max-width: 780px; }
}
@media (max-width: 1200px) {
    .svc-grid-media { grid-column: span var(--fill-span-2, 2); min-height: 320px; }
    .svc-card-slider-track:not(.slick-initialized) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-heading h2:has(.svc-hl), .svc-compare-title { font-size: 48px; line-height: 56px; }
}
@media (max-width: 1024px) {
    .svc-media-row, .svc-media-row--flip { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .svc-media--below { max-width: 640px; }
    .svc-media-row .svc-media--medium { width: 100%; max-width: 560px; justify-self: start; }
    .svc-media-row--flip > .svc-media { order: 0; }
    .svc-cta-person { flex-basis: 130px; margin-top: -90px; }
}
@media (max-width: 767px) {
    .svc-cta-person, .svc-cta-megaphone { display: none; }
    .svc-designs-track img { width: 220px; height: 132px; }
    .svc-card-slider-track:not(.slick-initialized) { grid-template-columns: minmax(0, 1fr); }
    /* Pros & cons: columns stack; smaller display heading and cards. */
    .svc-compare-grid { grid-template-columns: minmax(0, 1fr); }
    .svc-heading h2:has(.svc-hl), .svc-compare-title { font-size: 32px; line-height: 40px; }
    .svc-band--dark + .svc-band--dark .svc-compare-title { font-size: 26px; line-height: 34px; }
    .svc-compare-col { padding: 20px 14px 14px; gap: 14px; }
    .svc-compare-col-title { font-size: 28px; line-height: 36px; }
    .svc-compare-card { min-height: 0; padding: 20px 18px 20px 22px; gap: 14px; align-items: flex-start; }
    .svc-compare-card[class*="--"] { border-left-width: 8px; }
    .svc-compare-icon { width: 46px; height: 46px; }
    .svc-compare-icon i { font-size: 21px; }
    .svc-compare-body h4 { font-size: 18px; line-height: 26px; }
    .svc-compare-body p { font-size: 15px; line-height: 24px; }
    .svc-compare-subtitle { font-size: 24px; line-height: 32px; }
    .svc-compare--list + .svc-compare--list { padding-top: 0; }
    .svc-compare--list .svc-compare-col { padding: 22px 20px 8px; }
    .svc-compare--list .svc-compare-col-title { font-size: 22px; line-height: 30px; }
    .svc-compare-badge { width: 44px; height: 44px; font-size: 21px; }
    .svc-compare--list .svc-compare-card { padding: 16px 0; gap: 12px; }
    .svc-compare--list .svc-compare-body h4 { font-size: 17px; line-height: 25px; }
    .svc-gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
    .svc-gallery-item { height: 96px; padding: 12px; }
    .svc-grid-media { grid-column: 1 / -1; min-height: 0; aspect-ratio: 16 / 9; }
}
/* Grouped cards + detailed slider cards */
@media (max-width: 1200px) {
    .svc-media-row .svc-heading h2:has(.svc-hl) { font-size: 42px; line-height: 50px; }
}
@media (max-width: 1199px) {
    .svc-group-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .svc-group-head-copy h2 { font-size: 40px; line-height: 50px; }
    .svc-card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-card-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .svc-group-cards-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-checklist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-steps--labelled .svc-step { flex: 0 0 calc((100% - 60px) / 3); }
    .svc-card-slider--group .svc-card-slider-track:not(.slick-initialized),
    .svc-card-slider--detail-3 .svc-card-slider-track:not(.slick-initialized) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-card-slider--logos .svc-card-slider-track:not(.slick-initialized) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .svc-group-head--split { grid-template-columns: minmax(0, 1fr); }
    .svc-group-head--split .svc-group-intro { padding-top: 0; }
    .svc-pricing.rs-pricing-switcher.style-1 .pricing-item { padding: 36px 22px 40px; }
    .svc-pricing.rs-pricing-switcher.style-1 .pricing-item .title-wrapper .title { font-size: 24px; line-height: 32px; }
    .svc-pricing-grid--2 .title-wrapper, .svc-pricing-grid--3 .title-wrapper { min-height: 74px; }
}
@media (max-width: 991px) {
    /* Pricing cards stack (centred) once three no longer fit comfortably. */
    .svc-pricing-grid--2, .svc-pricing-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 460px; margin: 0 auto; }
    .svc-pricing-grid--2 .title-wrapper, .svc-pricing-grid--3 .title-wrapper { min-height: 0; }
    .svc-pricing.rs-pricing-switcher.style-1 .pricing-item .pricing-btn a { white-space: nowrap; }
    .svc-steps--labelled .svc-step { flex: 0 0 calc((100% - 30px) / 2); }
}
@media (max-width: 899px) {
    .svc-card-slider--detail .svc-card-slider-track:not(.slick-initialized) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
    .svc-heading .svc-intro-points { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
}
@media (max-width: 1024px) {
    /* 1-per-view detailed cards stack on tablets too (title, photo, text, points): the
       desktop title | text split left the photo and the point cards too narrow. */
    .svc-card-slider--detail-1 .svc-detail-card { display: block; padding: 36px 34px 38px; }
    .svc-card-slider--detail-1 .svc-detail-card > .svc-detail-media { height: 320px; margin: 0 0 22px; }
    .svc-card-slider--detail-1 .svc-detail-card > h3 { font-size: 26px; line-height: 34px; margin-top: 0; }
    .home-faq-image { width: auto; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; object-fit: contain; }
}
@media (max-width: 767px) {
    .svc-group-head { margin-bottom: 34px; }
    .svc-card-slider--group .svc-card-slider-track:not(.slick-initialized),
    .svc-card-slider--detail-3 .svc-card-slider-track:not(.slick-initialized) { grid-template-columns: minmax(0, 1fr); }
    .svc-pricing.rs-pricing-switcher.style-1 .pricing-item { padding: 34px 22px 36px; }
    .svc-detail-card, .svc-card-slider--group .svc-detail-card { padding: 26px 22px 28px; }
    .svc-detail-card h3, .svc-card-slider--group .svc-detail-card h3 { font-size: 21px; line-height: 29px; }
    .svc-detail-card h4 { font-size: 17px; line-height: 25px; }
    .svc-detail-media { height: 170px; margin-bottom: 18px; }
    .svc-card-slider--logos .svc-card-image { height: 96px; }
    .svc-card-slider--logos .svc-card-image img { max-height: 96px; }
    .svc-card-slider--logos .svc-card .services-inner { padding: 22px 14px; }
    .svc-card-slider--logos .svc-card .services-title .title { font-size: 16px; line-height: 23px; }
    .svc-card-slider--detail-1 .svc-detail-card { display: block; padding: 26px 22px 28px; }
    .svc-card-slider--detail-1 .svc-detail-card > .svc-detail-media { height: 200px; margin: 0 0 18px; }
    .svc-card-slider--detail-1 .svc-detail-card > h3 { font-size: 22px; line-height: 30px; margin-top: 0; }
    .svc-card-slider--detail-1 .svc-checklist { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .svc-card-grid--4, .svc-checklist-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .svc-card-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .svc-chips { gap: 12px; }
    .svc-chip { padding: 8px 18px 8px 8px; font-size: 15px; }
    .svc-chip i { width: 36px; height: 36px; font-size: 19px; }
    .svc-group-head-row--media { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .svc-group-cards-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .svc-group-head-media img { max-width: 240px; }
    .svc-group-head-copy h2 { font-size: 30px; line-height: 38px; }
    .svc-group-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
    .svc-group-index-item { padding: 10px 12px; gap: 10px; }
    .svc-group-index-icon { width: 36px; height: 36px; font-size: 18px; }
    .svc-group-index-text { font-size: 14px; line-height: 18px; }
    .svc-band--grouped:not(.svc-groupset-head) > .svc-inner { padding-top: 44px; }
    .svc-band--grouped:not(.svc-groupset-head):not(.svc-band--grouped-last) { padding-bottom: 44px; }
    .svc-steps--labelled { gap: 18px; }
    .svc-steps--labelled .svc-step { flex: 0 0 100%; }
    .svc-checklist-panel { padding: 24px 18px; }
    .svc-checklist-title { font-size: 22px; line-height: 30px; margin-bottom: 20px; gap: 12px; }
    .svc-checklist-count { width: 40px; height: 40px; font-size: 14px; }
    .svc-check-card { padding: 22px 18px; }
    .svc-check-card h4 { font-size: 17px; line-height: 25px; }
    .svc-checklist-outro { font-size: 15px; line-height: 25px; }
    .svc-checklist li, .svc-group-note, .svc-detail-card > p { font-size: 15px; line-height: 25px; }
    .svc-media-row .svc-heading h2:has(.svc-hl) { font-size: 32px; line-height: 40px; }
}
@media (max-width: 1024px) { .about-value-item { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 640px) { .about-value-item { flex-basis: 100%; } }
@media (max-width: 1024px) { .about-directors-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .about-director-card { flex-direction: column; } .about-director-photo { flex-basis: auto; height: 320px; } .about-directors-section { padding-top: 60px; } }
@media (max-width: 1024px) {
    .services-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services-details-intro { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .services-details-media { max-width: 640px; }
    .home-faq-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .cta-banner-person, .cta-banner-rocket { display: none; }
}
@media (max-width: 640px) {
    .services-details { grid-template-columns: minmax(0, 1fr); }
    .why-pillar-image { width: 70px; height: 70px; }
    .home-client { width: 120px; height: 90px; }
}
@media (max-width: 1024px) { .portfolio-categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .portfolio-categories-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .svc-cta-media { flex-basis: 100%; } }
@media (max-width: 1200px) { .socials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .socials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .socials-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1024px) { .svc-carousel-card { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px; } .svc-carousel-media img { height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 3; } .svc-carousel-body h3 { font-size: 24px; line-height: 32px; } }
/* Socials call to action */
@media (max-width: 1024px) { .socials-cta { padding: 64px 40px; } .socials-cta h2 { font-size: 38px; } .socials-cta-icons { display: none; } }
@media (max-width: 640px) {
    .socials-cta-section { padding: 0 16px 70px; }
    .socials-cta { padding: 48px 20px; border-radius: 22px; }
    .socials-cta h2 { font-size: 30px; }
    .socials-cta-body > p { font-size: 15px; line-height: 25px; }
    .socials-cta-actions { flex-direction: column; align-items: stretch; }
    .socials-cta-btn { justify-content: center; }
}
/* Socials News Feed: platform sections + carousels */
@media (max-width: 767px) {
    .newsfeed-section { padding: 0 16px 70px; }
    .newsfeed-nav-track { border-radius: 16px; }
    .newsfeed-nav-link { padding: 8px 12px; font-size: 14px; }
    .newsfeed-platform { margin-top: 26px; padding: 22px 16px 18px; border-radius: 20px; }
    .newsfeed-platform-head { flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
    .newsfeed-platform-badge { width: 46px; height: 46px; border-radius: 14px; font-size: 24px; }
    .newsfeed-platform-title h3 { font-size: 21px; line-height: 28px; }
    .newsfeed-follow { width: 100%; justify-content: center; }
    .newsfeed-body { padding: 18px; }
}
/* Header search: on phones the panel spans the header row (not the icon) */
@media (max-width: 767px) {
    .header-row:not(.header-sticky-part) { position: relative; }
    .header-search { position: static; }
    .header-search-toggle { width: 40px; height: 40px; }
    .header-search-panel { top: 100%; right: 16px; left: 16px; width: auto; }
    .header-search-panel::before { display: none; }
}
/* Search page */
@media (max-width: 767px) {
    .search-page-section { padding: 50px 16px; }
    .search-page-form input[type=search] { height: 56px; padding: 0 56px 0 48px; font-size: 16px; }
    .search-page-form-icon { left: 18px; }
    .search-page-form button, .search-page-form button:hover, .search-page-form button:focus { top: 6px; right: 6px; height: 44px; padding: 0 14px; font-size: 0; }
    .search-page-form button::before { content: '\f0d1'; font-family: 'remixicon'; font-size: 20px; }
    .search-page-grid.agency-card-grid { grid-template-columns: 1fr; }
}

/* ==================================================================
   CHAT WIDGET — responsive overrides
================================================================== */
@media (max-width: 480px) {
    .dp-chat { bottom: 0; right: 0; left: 0; }
    .dp-chat-bubble { position: fixed; bottom: 16px; right: 16px; }
    .dp-chat-panel {
        position: fixed; bottom: 0; right: 0; left: 0;
        width: 100%; max-height: 100vh; max-height: 100dvh;
        border-radius: 16px 16px 0 0;
    }
    .dp-chat-messages { max-height: calc(100dvh - 220px); }
}
@media (min-width: 481px) and (max-width: 767px) {
    .dp-chat-panel { width: 340px; }
}