/* ================================================================
   OVAL INFOTECH — Responsive v3.0 (MOBILE PERFECT REWRITE)
   ─────────────────────────────────────────────────────────────
   Goals:
   · Zero horizontal scroll — anywhere, any device
   · Zero unwanted vertical scroll in mobile
   · Compact, natural buttons (not oversized)
   · Google mobile font guidelines (min 16px body, 14px labels)
   · Header: slightly taller on mobile
   · Perfect padding: mobile + tablet
   · Touch targets: min 44px (Apple/Google HIG)
   ================================================================ */


/* ════════════════════════════════════════════════════════════════
   LAYER 0 — GLOBAL OVERFLOW KILL (all ≤1024px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  html, body                  { overflow-x:hidden!important; max-width:100vw }
  *, *::before, *::after      { box-sizing:border-box }
  .container                  { max-width:100%!important; overflow-x:hidden }
  img, video, iframe,
  svg, canvas, embed          { max-width:100%; height:auto }
  table                       { max-width:100%; overflow-x:auto; display:block }

  /* Orbs & decorative blobs */
  .orb, .orb-1, .orb-2,
  .hero-slide-bg              { overflow:hidden; max-width:100vw }

  /* Marquee */
  .marquee-section            { overflow:hidden!important; max-width:100vw }
  .client-logos-track,
  .gc-logos-track,
  .gc-logos-inner             { max-width:none }
}


/* ════════════════════════════════════════════════════════════════
   LAYER 1 — TABLET  769px – 1024px
   ════════════════════════════════════════════════════════════════ */
@media (min-width:769px) and (max-width:1024px) {
  :root { --section-pad: 64px 0 }

  .container                  { padding: 0 28px!important }

  /* Header */
  .header                     { margin-bottom:0!important; border-bottom:none }
  .header .container          { padding-top:14px!important; padding-bottom:14px!important }

  /* Hero */
  .hero                       { margin:0!important; padding:0!important }
  .hero-swiper                { height:auto!important; min-height:auto!important; border-radius:0!important }
  .hero-slide                 { min-height:auto!important }
  .hero-slide-content         { grid-template-columns:1fr!important; text-align:center;
                                gap:32px; padding:48px 32px 32px!important }
  .hero h1                    { font-size:2.2rem }
  .hero p                     { font-size:1rem; margin-left:auto; margin-right:auto }
  .hero-buttons, .hero-actions{ justify-content:center; flex-wrap:wrap; gap:12px }
  .hero-float, .hero-float-1,
  .hero-float-2               { display:none!important }
  .hero-card                  { max-width:480px; margin:0 auto }
  .marquee-section            { margin-top:0!important; margin-bottom:0 }

  /* Grids → 2 cols */
  .services-grid,
  .why-grid, .wyg-grid,
  .process-grid,
  .process-grid-6,
  .pricing-grid,
  .feature-cards,
  .related-grid,
  .who-grid,
  .testimonials-grid,
  .ft-steps-grid,
  .svc-features-grid,
  .imgbox-grid                { grid-template-columns: repeat(2,1fr) }

  .footer-grid                { grid-template-columns: repeat(2,1fr) }
  .about-grid,
  .contact-grid               { grid-template-columns: 1fr; gap:32px }
  .one-stop-grid              { grid-template-columns: 1fr; gap:36px }
  .one-stop-features          { grid-template-columns: 1fr 1fr }
  .one-stop-stats             { grid-template-columns: 1fr 1fr }
  .home-ba-grid               { grid-template-columns: 1fr; gap:24px }
  .tab-inner                  { grid-template-columns: 1fr; gap:28px; padding:32px 24px }
  .process-grid::before,
  .process-connector          { display:none }
  .ft-stats-row               { grid-template-columns: repeat(3,1fr); gap:16px }
  .gc-metrics                 { grid-template-columns: repeat(2,1fr) }
  .gal-ba-grid-3,
  .gal-cat-ba-grid,
  .gal-cat-ba-grid-4,
  .gal-pano-grid-2x2,
  .gallery-grid               { grid-template-columns: repeat(2,1fr) }

  /* SPE hero */
  .spe-hero-inner             { grid-template-columns:1fr; text-align:center;
                                gap:32px; padding:80px 0 40px }
  .spe-hero-tagline           { margin:0 auto }
  .spe-hero-actions           { justify-content:center }
  .spe-hero-trust             { justify-content:center }
  .spe-hero-visual            { order:-1 }
  .spe-ba-card                { max-width:400px; margin:0 auto 24px }
  .sp-hero-split              { grid-template-columns:1fr; gap:28px }
  .sp-hero-ba                 { max-width:520px; margin:0 auto }
  .sp-layout                  { grid-template-columns:1fr 260px; gap:28px }
  .service-layout             { grid-template-columns:240px 1fr; gap:24px }

  .mega-dropdown              { min-width:580px; padding:18px }
  .mega-grid                  { grid-template-columns: repeat(2,1fr) }
  .sub-hero .container        { flex-direction:column; text-align:center }
  .sub-hero-text .section-tag { justify-content:center }
  .sub-hero-cta               { justify-content:center }
  .footer-contact-strip       { grid-template-columns: repeat(2,1fr); gap:12px }

  /* Buttons — tablet comfortable */
  .btn                        { padding:11px 22px; font-size:.92rem }
  .btn-lg                     { padding:13px 28px; font-size:.95rem }
  .btn-sm                     { padding:8px 16px; font-size:.84rem }
}


/* ════════════════════════════════════════════════════════════════
   LAYER 2 — MOBILE  ≤768px
   ════════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  :root {
    --section-pad: 40px 0;
    --sidebar-w: 100%;
  }

  /* ── Base typography (Google guidelines) ── */
  html                        { font-size:16px }
  body                        { overflow-x:hidden!important; overflow-y:auto }

  /* ── Container ── */
  .container                  { padding:0 16px!important; max-width:100vw!important }

  /* ── Sections ── */
  .section                    { padding:40px 0 }
  .section-header             { margin-bottom:24px }
  .section-header h2          { font-size:1.5rem; line-height:1.3; letter-spacing:-.01em }
  .section-header p           { font-size:.9rem; line-height:1.6; padding:0 }

  /* ════ HEADER — slightly taller ════ */
  .top-bar                    { display:none!important }
  .header                     { margin:0!important; padding:0!important;
                                border-bottom:none!important;
                                box-shadow:0 2px 12px rgba(0,0,0,.08)!important }
  .header .container          { padding-top:14px!important;
                                padding-bottom:14px!important;
                                min-height:60px;
                                display:flex; align-items:center }
  .logo                       { font-size:1.25rem }
  .logo-icon                  { width:38px; height:38px; font-size:.85rem;
                                flex-shrink:0 }

  /* ════ MOBILE NAV ════ */
  .nav-toggle                 { display:flex; padding:8px; margin:-8px }
  .nav-menu                   { position:fixed; top:0; right:-100%; width:85%;
                                max-width:320px; height:100vh; height:100dvh;
                                background:var(--white); flex-direction:column;
                                padding:72px 20px 28px;
                                box-shadow:-10px 0 40px rgba(0,0,0,.15);
                                transition:right .35s cubic-bezier(.25,.8,.25,1);
                                align-items:flex-start; overflow-y:auto; z-index:9999 }
  .nav-menu.active            { right:0 }
  .nav-menu > li              { width:100%; border-bottom:1px solid rgba(0,0,0,.05) }
  .nav-menu > li > a          { display:flex; justify-content:space-between;
                                align-items:center; padding:14px 0;
                                font-size:.92rem; min-height:48px }
  .mega-dropdown,
  .gallery-dropdown,
  .nav-dropdown               { position:static!important; opacity:1!important;
                                visibility:visible!important; transform:none!important;
                                box-shadow:none!important; border:none!important;
                                padding:0 0 8px 14px!important; display:none;
                                min-width:100%!important; overflow:visible }
  .dropdown.active .mega-dropdown,
  .dropdown.active .gallery-dropdown,
  .dropdown.active .nav-dropdown { display:block }
  .mega-grid                  { grid-template-columns:1fr!important; gap:4px }
  .mega-sub-list              { display:none }
  .mega-category-title        { font-size:.86rem; padding:10px 0;
                                border-bottom:1px solid var(--cream) }
  .nav-cta                    { width:100%; text-align:center; justify-content:center;
                                margin-top:14px; background:var(--gold)!important;
                                color:#fff!important; border-radius:10px!important;
                                padding:12px 20px!important; font-size:.92rem!important }
  .nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
  .nav-toggle.active span:nth-child(2) { opacity:0 }
  .nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }
  body.menu-open              { overflow:hidden }

  /* ════ HERO ════ */
  .hero                       { margin:0!important; padding:0!important }
  .hero-swiper                { height:auto!important; min-height:auto!important;
                                border-radius:0!important }
  .hero-slide                 { min-height:auto!important; height:auto!important }
  .hero-slide-content         { grid-template-columns:1fr!important; text-align:center;
                                gap:18px; padding:28px 16px 20px!important }
  .hero h1                    { font-size:1.75rem!important; line-height:1.25;
                                letter-spacing:-.02em }
  .hero p                     { font-size:.93rem!important; line-height:1.65;
                                margin:0 auto 18px!important; max-width:100% }
  .hero-badge                 { margin-bottom:10px; padding:4px 12px; font-size:.7rem }
  .hero-buttons, .hero-actions { flex-direction:column; gap:10px; align-items:center }
  .hero-buttons .btn,
  .hero-actions .btn          { width:100%; max-width:320px; justify-content:center }
  .hero-visual                { order:2 }
  .hero-card                  { max-width:100%; margin:0 auto;
                                padding:16px!important; border-radius:14px }
  .hero-stats                 { gap:8px; margin-top:12px }
  .hero-stat                  { padding:10px 8px }
  .hero-stat-num              { font-size:1.4rem }
  .hero-stat-label            { font-size:.7rem }
  .hero-float, .hero-float-1,
  .hero-float-2               { display:none!important }
  .hero .swiper-pagination    { bottom:8px!important }
  .hero .swiper-pagination-bullet { width:7px; height:7px }

  /* ════ MARQUEE ════ */
  .marquee-section            { margin:0!important; padding:10px 0!important }
  .marquee-item               { padding:0 18px; font-size:.72rem; letter-spacing:1.4px }

  /* ════ BUTTONS — compact & natural ════ */
  .btn                        { padding:10px 20px; font-size:.88rem;
                                border-radius:8px; white-space:nowrap }
  .btn-lg                     { padding:12px 24px; font-size:.9rem }
  .btn-sm                     { padding:7px 14px; font-size:.8rem }
  .btn-icon                   { gap:6px }

  /* ════ ALL GRIDS → SINGLE COLUMN ════ */
  .services-grid              { grid-template-columns:1fr!important; gap:14px }
  .why-grid, .wyg-grid        { grid-template-columns:1fr!important; gap:14px }
  .process-grid               { grid-template-columns:1fr!important; gap:14px }
  .process-grid::before,
  .process-connector          { display:none!important }
  .process-grid-6             { grid-template-columns:1fr!important; gap:14px }
  .pricing-grid               { grid-template-columns:1fr!important; gap:16px }
  .imgbox-grid                { grid-template-columns:1fr!important }
  .ft-steps-grid              { grid-template-columns:1fr!important; gap:14px }
  .ft-stats-row               { grid-template-columns:repeat(3,1fr); gap:10px }
  .svc-features-grid          { grid-template-columns:1fr!important; gap:12px }
  .who-grid                   { grid-template-columns:1fr!important; gap:14px }
  .testimonials-grid          { grid-template-columns:1fr!important; gap:14px }
  .about-grid                 { grid-template-columns:1fr!important; gap:24px }
  .about-features             { grid-template-columns:1fr!important; gap:10px }
  .contact-grid               { grid-template-columns:1fr!important; gap:24px }
  .form-row                   { grid-template-columns:1fr!important }
  .feature-cards              { grid-template-columns:1fr!important; gap:14px }
  .related-grid               { grid-template-columns:1fr!important; gap:14px }
  .home-ba-grid               { grid-template-columns:1fr!important; gap:18px }
  .one-stop-grid              { grid-template-columns:1fr!important; gap:24px }
  .one-stop-features          { grid-template-columns:1fr!important; gap:10px }
  .one-stop-stats             { grid-template-columns:1fr 1fr; gap:12px }
  .tab-inner                  { grid-template-columns:1fr!important; gap:20px;
                                padding:20px 16px }
  .gallery-grid               { grid-template-columns:1fr!important; gap:12px }
  .gal-ba-grid-3,
  .gal-cat-ba-grid,
  .gal-cat-ba-grid-4,
  .gal-pano-grid-2x2          { grid-template-columns:1fr!important; gap:14px }
  .sp-layout                  { grid-template-columns:1fr!important; gap:20px }
  .service-layout             { grid-template-columns:1fr!important; gap:0 }
  .sidebar                    { position:static; order:2; margin-top:20px; width:100% }
  .sidebar-inner              { position:static; max-height:none }
  .imgbox-zz-row,
  .imgbox-zz-row.zz-reverse   { grid-template-columns:1fr!important; gap:18px }
  .zigzag-row,
  .zigzag-row.zigzag-reverse  { grid-template-columns:1fr!important; gap:20px }
  .zigzag-reverse             { direction:ltr }
  .zz-checks                  { grid-template-columns:1fr }
  .footer-grid                { grid-template-columns:1fr!important; gap:24px; text-align:center }
  .gc-metrics                 { grid-template-columns:1fr 1fr!important; gap:12px }
  .footer-contact-strip       { grid-template-columns:1fr 1fr; gap:8px; padding:20px 0;
                                margin-bottom:24px }

  /* ════ CARDS — compact padding ════ */
  .service-card               { padding:20px 18px }
  .why-card                   { padding:20px 18px }
  .who-card                   { padding:18px 16px }
  .testimonial-card           { padding:20px 16px; min-height:0; height:100%; }
  .testimonial-text           { font-size:.88rem; line-height:1.6 }
  .process-step-6             { padding:18px 16px }
  .contact-info-card          { padding:20px 16px; order:2 }
  .contact-form-card          { padding:20px 16px }

  /* ════ SPE HERO ════ */
  .spe-hero                   { min-height:auto!important }
  .spe-hero-inner             { grid-template-columns:1fr!important; text-align:center;
                                gap:18px; padding:68px 0 28px!important }
  .spe-hero-text h1           { font-size:1.65rem; line-height:1.25 }
  .spe-hero-tagline           { font-size:.9rem; margin:0 auto }
  .spe-hero-actions           { justify-content:center; flex-direction:column; gap:10px }
  .spe-hero-actions .btn      { width:100%; max-width:300px; justify-content:center }
  .spe-hero-trust             { justify-content:center; gap:8px }
  .spe-hero-trust span        { font-size:.76rem; padding:6px 12px }
  .spe-hero-visual            { order:-1 }
  .spe-ba-card                { max-width:100%; margin:0 auto 14px }
  .spe-stats-row              { flex-wrap:wrap; gap:12px; justify-content:center }
  .spe-stat-divider           { display:none }
  .spe-stat-num               { font-size:1.35rem }
  .spe-stat-label             { font-size:.7rem }

  /* ════ SP HERO ════ */
  .sp-hero                    { padding:42px 0 0 }
  .svc-hero-section           { padding:36px 0 0 }
  .sp-hero-inner              { padding-bottom:16px }
  .sp-hero h1                 { font-size:1.55rem; line-height:1.25 }
  .sp-hero-accent             { font-size:1rem }
  .sp-hero-desc               { font-size:.9rem; line-height:1.65 }
  .sp-hero-split              { grid-template-columns:1fr!important; gap:18px }
  .sp-hero-ba                 { max-width:100%; margin-top:10px }
  .hero-ba-slider             { min-height:200px; border-radius:12px;
                                aspect-ratio:16/10 }
  .sp-hero-ba-cap             { font-size:.76rem }
  .sp-hero-trust              { gap:8px }
  .sp-hero-trust span         { font-size:.76rem }
  .sp-hero-btns,
  .sp-hero-actions            { flex-direction:column; gap:10px }
  .sp-hero-btns .btn,
  .sp-hero-actions .btn       { width:100%; max-width:300px;
                                justify-content:center }
  .sp-hero-badges             { flex-wrap:wrap; gap:6px }
  .sp-hero-badges span        { font-size:.74rem; padding:4px 10px }
  .sp-hero-stats              { padding:10px 0; margin-top:0 }
  .sp-stats-row               { gap:10px; justify-content:center }
  .sp-stat-num                { font-size:1.3rem }
  .sp-stat-label              { font-size:.68rem }

  /* ════ ABOUT ════ */
  .about-image-wrap           { max-width:240px; margin:0 auto }
  .about-content              { text-align:center }
  .one-stop-section           { padding:40px 0 }
  .one-stop-content           { text-align:center }
  .one-stop-stat-num          { font-size:1.7rem }

  /* ════ TABS ════ */
  .tabs-nav                   { gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
                                padding-bottom:4px; scrollbar-width:none }
  .tabs-nav::-webkit-scrollbar{ display:none }
  .tab-btn                    { padding:9px 14px; font-size:.82rem;
                                white-space:nowrap; flex-shrink:0 }
  .tab-visual                 { order:-1 }

  /* ════ GLOBAL CLIENTS ════ */
  .global-clients-section     { padding:44px 0 }
  .gc-header h2               { font-size:1.4rem }
  .gc-metric                  { min-width:0; flex:auto; padding:18px 12px }
  .gc-metric-num              { font-size:1.9rem }
  .gc-metric-label            { font-size:.7rem }
  .gc-countries-grid          { gap:8px }
  .gc-country-pill            { padding:6px 12px; font-size:.76rem }
  .gc-trust-row               { flex-wrap:wrap; gap:10px; justify-content:center }
  .gc-trust-badge             { padding:12px; flex-direction:column;
                                text-align:center; gap:8px }

  /* ════ CTA ════ */
  .cta-section                { padding:44px 0 }
  .cta-content h2             { font-size:1.35rem }
  .cta-content p              { font-size:.9rem; margin-bottom:20px }
  .cta-buttons                { flex-direction:column; gap:10px; align-items:center }
  .cta-buttons .btn           { width:100%; max-width:300px; justify-content:center }

  /* ════ IMAGES & BA SLIDERS ════ */
  img                         { max-width:100%!important; height:auto }
  .ba-before img,
  .ba-after img               { max-width:100% }
  .home-ba-slider             { min-height:220px }
  .ba-before, .ba-after       { min-height:180px }
  .ba-label                   { font-size:.62rem; padding:3px 8px; top:6px }
  .ba-handle i                { width:34px; height:34px }
  .imgbox-zz-img              { width:100%; min-height:200px }

  /* ════ MISC ════ */
  .client-logos-section       { padding:32px 0 }
  .client-logo-item span      { font-size:.84rem }
  .sticky-cta .container      { flex-direction:column; gap:8px; text-align:center }
  .sticky-cta-text            { font-size:.86rem }
  .zigzag-title               { font-size:1.25rem }
  .zigzag-num                 { font-size:2rem }
  .page-hero h1               { font-size:1.4rem }
  .sub-hero .container        { flex-direction:column; text-align:center }
  .sub-hero-text .section-tag { justify-content:center }
  .sub-hero-cta               { justify-content:center }

  /* ════ FOOTER ════ */
  .footer                     { padding-top:0!important; padding-bottom:36px }
  .footer-brand               { text-align:center }
  .footer-social              { justify-content:center }
  .footer h4::after           { left:50%; transform:translateX(-50%) }
  .footer-bottom              { flex-direction:column; gap:8px; text-align:center }
  .fcs-item                   { padding:10px 12px; gap:8px }
  .fcs-icon                   { width:36px; height:36px; font-size:.88rem;
                                border-radius:10px }
  .fcs-value                  { font-size:.8rem }
  .fcs-label                  { font-size:.64rem }
  .footer-trust-row           { gap:8px; padding:18px 0 }
  .ftr-item                   { padding:7px 12px; font-size:.72rem }

  /* ════ FLOATING BUTTONS ════ */
  .wa-float                   { bottom:72px; right:14px;
                                width:50px; height:50px }
  .wa-float i                 { font-size:1.3rem; width:50px }
  .wa-float:hover             { width:50px }
  .wa-float:hover .wa-float-label { max-width:0; opacity:0; padding:0 }
  .wa-float::before           { display:none }
  .back-to-top                { bottom:16px; right:14px;
                                width:40px; height:40px;
                                border-radius:10px; font-size:.88rem }
}


/* ════════════════════════════════════════════════════════════════
   LAYER 3 — SMALL MOBILE  ≤480px
   ════════════════════════════════════════════════════════════════ */
@media (max-width:480px) {
  html                        { font-size:15px }
  .container                  { padding:0 14px!important }
  .section                    { padding:34px 0 }
  .section-header             { margin-bottom:20px }
  .section-header h2          { font-size:1.3rem }
  .section-header p           { font-size:.86rem }

  /* Hero */
  .hero-slide-content         { padding:22px 14px 16px!important; gap:16px }
  .hero h1                    { font-size:1.5rem!important; line-height:1.25 }
  .hero p                     { font-size:.9rem!important; margin-bottom:14px!important }
  .hero-badge                 { font-size:.66rem; padding:4px 10px; margin-bottom:8px }
  .hero-card                  { padding:14px!important }
  .hero-stats                 { gap:8px; margin-top:10px }
  .hero-stat                  { padding:9px 8px }
  .hero-stat-num              { font-size:1.3rem }
  .hero-stat-label            { font-size:.64rem }

  /* Buttons */
  .btn                        { padding:10px 18px; font-size:.86rem }
  .btn-lg                     { padding:11px 20px; font-size:.88rem }
  .btn-sm                     { padding:6px 13px; font-size:.78rem }

  /* SPE / SP */
  .spe-hero-text h1           { font-size:1.4rem }
  .spe-hero-inner             { padding:44px 0 18px!important }
  .sp-hero h1                 { font-size:1.3rem }
  .sp-hero-desc               { font-size:.86rem }
  .sp-hero                    { padding:34px 0 0 }
  .zigzag-title               { font-size:1.15rem }
  .cta-content h2             { font-size:1.2rem }
  .page-hero h1               { font-size:1.2rem }
  .about-image-wrap           { max-width:200px }

  /* BA sliders */
  .hero-ba-slider,
  .home-ba-slider             { min-height:180px }
  .ba-slider                  { min-height:160px }
  .sp-ba-card .ba-slider      { min-height:160px }
  .imgbox-zz-img              { min-height:170px }
  .zz-ba, .zz-ba-pano        { min-height:170px }
  .gal-ba .ba-before,
  .gal-ba .ba-after           { min-height:160px }
  .ba-label                   { font-size:.56rem; padding:2px 6px; top:5px;
                                letter-spacing:.8px }
  .ba-handle i                { width:30px; height:30px; font-size:.6rem }

  /* Stats & grid */
  .one-stop-stat-num          { font-size:1.45rem }
  .pricing-tier-price .price-amount { font-size:1.4rem }
  .gc-metric-num              { font-size:1.65rem }
  .gc-countries-grid          { gap:6px }
  .gc-country-pill            { padding:5px 10px; font-size:.72rem }
  .footer-contact-strip       { grid-template-columns:1fr!important; gap:6px }
  .footer-trust-row           { gap:6px }
  .ftr-item                   { padding:6px 10px; font-size:.7rem }
  .nav-menu                   { width:90%; max-width:300px; padding:64px 16px 16px }
  .one-stop-stats             { grid-template-columns:1fr 1fr; gap:10px }

  /* Articles */
  .article-section            { padding:16px; border-radius:12px }
  .article-section h2         { font-size:1.15rem }
  .sp-article h2              { font-size:1.15rem }

  /* Specific grids */
  .client-logos-grid          { grid-template-columns:repeat(2,1fr) }
  .volume-grid                { grid-template-columns:1fr }
  .vid-price-grid             { grid-template-columns:1fr; max-width:300px; margin:0 auto }
  .vid-samples-grid           { grid-template-columns:1fr }
  .incl-grid                  { grid-template-columns:1fr }
  .process-row-v12            { grid-template-columns:1fr }
  .sub-services-grid          { grid-template-columns:1fr }
}


/* ════════════════════════════════════════════════════════════════
   LAYER 4 — EXTRA SMALL  ≤375px
   ════════════════════════════════════════════════════════════════ */
@media (max-width:375px) {
  .container                  { padding:0 12px!important }
  .hero-slide-content         { padding:16px 12px 12px!important; gap:13px }
  .hero h1                    { font-size:1.35rem!important }
  .hero p                     { font-size:.86rem!important; margin-bottom:12px!important }
  .hero-badge                 { font-size:.6rem; margin-bottom:8px }
  .spe-hero-text h1           { font-size:1.3rem }
  .sp-hero h1                 { font-size:1.18rem }
  .section-header h2          { font-size:1.15rem }
  .sp-section h2              { font-size:1.15rem }
  .btn                        { padding:10px 14px; font-size:.84rem }
  .btn-lg                     { padding:11px 18px; font-size:.86rem }
  .nav-menu                   { width:92%; max-width:280px; padding:60px 14px 14px }
}


/* ════════════════════════════════════════════════════════════════
   LAYER 5 — MINIMUM  ≤320px
   ════════════════════════════════════════════════════════════════ */
@media (max-width:320px) {
  .container                  { padding:0 10px!important }
  .hero h1                    { font-size:1.2rem!important }
  .hero-slide-content         { padding:12px 10px 10px!important; gap:11px }
  .sp-hero h1                 { font-size:1.05rem }
  .section-header h2          { font-size:1.05rem }
  .btn                        { padding:9px 12px; font-size:.82rem }
  .sp-hero-badges span        { font-size:.64rem; padding:3px 8px }
  .nav-menu                   { width:94%; max-width:270px; padding:58px 12px 12px }
}


/* ════════════════════════════════════════════════════════════════
   TOUCH DEVICE MINIMUM TAP TARGETS (Apple + Google HIG = 44px)
   ════════════════════════════════════════════════════════════════ */
@media (hover:none) and (pointer:coarse) {
  .btn                        { min-height:44px }
  .nav-menu > li > a          { min-height:48px; display:flex; align-items:center }
  .sidebar-cat-btn            { min-height:48px }
  .faq-question               { min-height:48px }
  .gal-filter-btn             { min-height:44px }
  .tab-btn                    { min-height:42px }
  .ba-handle                  { width:44px; background:transparent }
  .ba-handle::before          { content:''; position:absolute; left:50%;
                                top:0; bottom:0; width:3px; background:#fff;
                                transform:translateX(-50%) }
  .ba-handle i                { width:40px; height:40px;
                                box-shadow:0 2px 16px rgba(0,0,0,.4) }

  /* Remove hover transforms on touch */
  .service-card:hover,
  .feature-card:hover,
  .why-card:hover,
  .imgbox-card:hover,
  .process-step-6:hover,
  .pricing-tier-card:hover,
  .related-card:hover         { transform:none }
}


/* ════════════════════════════════════════════════════════════════
   iOS INPUT ZOOM FIX (font-size < 16px triggers auto-zoom)
   ════════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  select, textarea            { font-size:16px!important }
}


/* ════════════════════════════════════════════════════════════════
   LANDSCAPE PHONE
   ════════════════════════════════════════════════════════════════ */
@media (max-height:500px) and (orientation:landscape) {
  .hero-swiper,
  .hero-slide                 { height:auto!important; min-height:auto!important;
                                border-radius:0!important }
  .spe-hero                   { min-height:auto!important }
  .sp-hero                    { padding:34px 0 0 }
  .hero-slide-content         { padding:14px 16px!important }
  .spe-hero-inner             { padding:52px 0 20px!important }
}


/* ════════════════════════════════════════════════════════════════
   PRINT
   ════════════════════════════════════════════════════════════════ */
@media print {
  .header, .top-bar, .footer,
  .sticky-cta, .nav-toggle,
  .preloader, .wa-float,
  .back-to-top                { display:none!important }
  .section                    { padding:16px 0 }
  body                        { font-size:12pt; color:#000 }
}




/* ════════════════════════════════════════════════════════════════
   HERO BUTTON + HEADING FIX v3.2
   ════════════════════════════════════════════════════════════════ */
@media (max-width:768px) {

  /* ── h1 fix: proper wrap, no cut ── */
  .hero h1,
  .spe-hero-text h1,
  .sp-hero h1,
  .page-hero h1                  { white-space:normal!important;
                                    word-break:break-word;
                                    overflow-wrap:break-word;
                                    font-size:1.65rem!important;
                                    line-height:1.25!important }

  /* ── ALL buttons: allow wrap, never cut ── */
  .btn                           { white-space:normal!important;
                                    word-break:break-word;
                                    text-align:center;
                                    line-height:1.3 }

  /* ── Hero buttons: ALWAYS stack vertically, full visible ── */
  .hero-buttons,
  .hero-actions,
  .spe-hero-actions,
  .sp-hero-btns,
  .sp-hero-actions               { display:flex!important;
                                    flex-direction:column!important;
                                    align-items:center!important;
                                    gap:10px!important;
                                    width:100% }

  .hero-buttons .btn,
  .hero-actions .btn,
  .spe-hero-actions .btn,
  .spe-hero-actions .btn-outline-light,
  .sp-hero-btns .btn,
  .sp-hero-actions .btn          { width:100%!important;
                                    max-width:300px!important;
                                    justify-content:center!important;
                                    padding:12px 20px!important;
                                    font-size:.9rem!important;
                                    border-radius:10px!important }

  /* ── btn-outline in hero: make it visible ── */
  .hero-buttons .btn-outline,
  .hero-actions .btn-outline     { border:2px solid rgba(255,255,255,.35)!important;
                                    color:#fff!important;
                                    background:rgba(255,255,255,.05)!important }

  /* ── btn-lg not oversized on mobile ── */
  .btn-lg                        { padding:12px 20px!important;
                                    font-size:.9rem!important }
}

@media (max-width:480px) {
  .hero h1,
  .spe-hero-text h1,
  .sp-hero h1                    { font-size:1.45rem!important;
                                    line-height:1.25!important }
  .hero-buttons .btn,
  .hero-actions .btn,
  .spe-hero-actions .btn,
  .sp-hero-btns .btn             { max-width:280px!important;
                                    padding:11px 18px!important;
                                    font-size:.87rem!important }
}

@media (max-width:375px) {
  .hero h1,
  .spe-hero-text h1,
  .sp-hero h1                    { font-size:1.3rem!important }
  .hero-buttons .btn,
  .hero-actions .btn             { max-width:260px!important;
                                    padding:10px 16px!important;
                                    font-size:.85rem!important }
}










/* ════════════════════════════════════════════════════════════════
   MOBILE NAV — DESIGN 3 FINAL v5.0
   Desktop: ZERO touch · Mobile only (@media max-width:768px)
   ════════════════════════════════════════════════════════════════ */

/* ── Drawer header: hidden on desktop, flex on mobile ── */
.oi-drawer-header { display: none !important }

@media (max-width:768px) {

  /* ── Show drawer header ── */
  .oi-drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    background: linear-gradient(135deg,#0a1628,#0d2035) !important;
    border-bottom: 1px solid rgba(20,184,166,.14) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
  }
  .oi-dh-logo {
    display: flex !important; align-items: center !important;
    gap: 10px !important; text-decoration: none !important;
  }
  .oi-dh-logo img {
    height: 36px !important; width: auto !important;
    display: block !important; flex-shrink: 0 !important;
  }
  .oi-dh-logo .logo-icon {
    width: 36px !important; height: 36px !important; border-radius: 10px !important;
    background: linear-gradient(135deg,#14b8a6,#0f766e) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: .75rem !important; font-weight: 900 !important; color: #fff !important;
    box-shadow: 0 0 14px rgba(20,184,166,.35) !important; flex-shrink: 0 !important;
  }
  .oi-dh-logo span { color: #14b8a6 !important }
  .oi-dh-close {
    width: 36px !important; height: 36px !important; border-radius: 9px !important;
    background: rgba(20,184,166,.1) !important;
    border: 1px solid rgba(20,184,166,.22) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; color: #14b8a6 !important; font-size: .95rem !important;
  }

  /* ── Full screen drawer ── */
  .nav-menu {
    position: fixed !important;
    top: 0 !important; right: -100% !important;
    width: 100% !important; max-width: 100vw !important;
    height: 100vh !important; height: 100dvh !important;
    background: linear-gradient(160deg,#0d1f3c 0%,#091a1a 100%) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: right .35s cubic-bezier(.25,.8,.25,1) !important;
    gap: 0 !important;
    scrollbar-width: none !important;
  }
  .nav-menu::-webkit-scrollbar { display: none !important }
  .nav-menu.active { right: 0 !important }

  /* Overlay */
  body.menu-open::before {
    content: '' !important;
    position: fixed !important; inset: 0 !important;
    background: rgba(5,10,20,.75) !important;
    backdrop-filter: blur(3px) !important;
    z-index: 998 !important;
  }

  /* ── Nav items ── */
  .nav-menu > li {
    width: 100% !important;
    border: none !important;
    padding: 0 12px !important;
    flex-shrink: 0 !important;
  }

  /* ── Top level links ── */
  .nav-menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 14px !important;
    margin: 2px 0 !important;
    border-radius: 10px !important;
    color: rgba(255,255,255,.78) !important;
    font-size: .92rem !important;
    font-weight: 500 !important;
    min-height: 48px !important;
    border: 1px solid transparent !important;
    transition: all .15s !important;
    background: transparent !important;
    white-space: nowrap !important;
    gap: 8px !important;
  }
  .nav-menu > li > a:hover {
    background: rgba(20,184,166,.08) !important;
    color: #fff !important;
  }
  .nav-menu > li.dropdown.active > a {
    background: rgba(20,184,166,.1) !important;
    border-color: rgba(20,184,166,.2) !important;
    color: #14b8a6 !important;
    border-radius: 10px 10px 0 0 !important;
  }
  .nav-menu > li > a .fa-chevron-down {
    font-size: .58rem !important;
    opacity: .4 !important;
    margin-left: auto !important;
    transition: transform .25s,opacity .25s !important;
    flex-shrink: 0 !important;
  }
  .nav-menu > li.dropdown.active > a .fa-chevron-down {
    transform: rotate(180deg) !important;
    opacity: 1 !important; color: #14b8a6 !important;
  }

  /* ── DROPDOWN: simple vertical list, one by one ── */
  .nav-dropdown {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: 1px solid rgba(20,184,166,.12) !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    background: rgba(20,184,166,.04) !important;
    padding: 4px 6px 8px !important;
    display: none !important;
    min-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 4px !important;
    /* SIMPLE SINGLE COLUMN - one by one */
    grid-template-columns: unset !important;
  }
  .dropdown.active .nav-dropdown {
    display: block !important;
  }

  /* ── Each dropdown link: full row, left-aligned ── */
  .nav-dropdown > a {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,.65) !important;
    font-size: .86rem !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: all .15s !important;
    line-height: 1.4 !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    text-align: left !important;
  }
  .nav-dropdown > a:hover, .nav-dropdown > a:active {
    background: rgba(20,184,166,.1) !important;
    color: #14b8a6 !important;
    padding-left: 16px !important;
  }
  .nav-dropdown > a i {
    font-size: .72rem !important;
    color: #14b8a6 !important;
    opacity: .6 !important;
    width: 16px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  /* Thin separator between items */
  .nav-dropdown > a + a {
    border-top: 1px solid rgba(255,255,255,.04) !important;
  }

  /* ── Pricing, Contact plain links ── */
  .nav-menu > li:not(.dropdown) > a {
    color: rgba(255,255,255,.55) !important;
  }

  /* ── CTA button at bottom ── */
  .nav-menu > li:has(> a.nav-cta) {
    margin-top: auto !important;
    padding: 12px !important;
    border-top: 1px solid rgba(20,184,166,.1) !important;
    flex-shrink: 0 !important;
  }
  .nav-menu > li > a.nav-cta {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    background: linear-gradient(135deg,#14b8a6,#0f766e) !important;
    color: #fff !important;
    border-radius: 50px !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 14px 20px !important;
    font-size: .92rem !important;
    box-shadow: 0 4px 18px rgba(20,184,166,.3) !important;
  }

  /* ── Hamburger toggle ── */
  .nav-toggle {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    cursor: pointer !important;
    z-index: 10001 !important;
    background: rgba(20,184,166,.1) !important;
    border: 1px solid rgba(20,184,166,.2) !important;
    border-radius: 8px !important;
    width: 38px !important; height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .nav-toggle span {
    width: 20px !important; height: 2px !important;
    background: #14b8a6 !important;
    border-radius: 4px !important;
    transition: all .3s !important;
    display: block !important;
  }
  .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(4px,4px) !important }
  .nav-toggle.active span:nth-child(2) { opacity: 0 !important }
  .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px) !important }

  /* ── mega-dropdown mobile ── */
  .mega-dropdown, .gallery-dropdown {
    position: static !important; opacity: 1 !important;
    visibility: visible !important; transform: none !important;
    box-shadow: none !important; border: none !important;
    padding: 0 0 8px 14px !important; display: none !important;
    min-width: 100% !important; background: transparent !important;
  }
  .dropdown.active .mega-dropdown,
  .dropdown.active .gallery-dropdown { display: block !important }
  .mega-grid { grid-template-columns: 1fr !important }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE NAV — COMPACT SINGLE LIST v4.4
   Vertical list, tight items, smooth full-menu scroll
   ════════════════════════════════════════════════════════════════ */
@media (max-width:768px) {

  /* Full menu scrolls smoothly if content > screen */
  .nav-menu {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .nav-menu::-webkit-scrollbar { display: none !important }

  /* ── Compact dropdown items: single row, less padding ── */
  .nav-dropdown > a {
    padding: 8px 10px !important;
    font-size: .82rem !important;
    gap: 8px !important;
  }

  /* Remove separator lines — cleaner, saves space */
  .nav-dropdown > a + a {
    border-top: none !important;
  }

  /* ── Compact top-level links ── */
  .nav-menu > li > a {
    padding: 10px 12px !important;
    min-height: 40px !important;
    font-size: .88rem !important;
  }

  /* ── Dropdown panel slightly tighter ── */
  .nav-dropdown {
    padding: 2px 4px 6px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   FIX v4.5 — Double X fix + All buttons curved (mobile/tablet only)
   ════════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {

  /* ── FIX 1: Hide hamburger nav-toggle when drawer is open ── */
  body.menu-open .nav-toggle {
    display: none !important;
  }

  /* ── FIX 2: All .btn buttons — larger + more curved ── */
  .btn,
  .btn-primary,
  .btn-outline,
  .btn-white,
  .btn-teal,
  a.btn,
  button.btn {
    border-radius: 50px !important;
    padding: 13px 28px !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
  }

  /* Hero buttons */
  .hero-buttons .btn {
    padding: 14px 32px !important;
    font-size: .95rem !important;
    border-radius: 50px !important;
    min-width: 180px !important;
  }

  /* CTA section buttons */
  .cta .btn,
  .cta-section .btn,
  [class*="cta"] .btn {
    padding: 15px 36px !important;
    font-size: .95rem !important;
    border-radius: 50px !important;
  }

  /* Service page buttons */
  .service-cta .btn,
  .sp-cta .btn,
  .spe-cta .btn {
    border-radius: 50px !important;
    padding: 13px 30px !important;
  }

  /* Free trial / pricing buttons */
  .pricing-card .btn,
  .plan-card .btn,
  .trial-btn,
  .free-trial-btn {
    border-radius: 50px !important;
    padding: 13px 28px !important;
    width: 100% !important;
  }

  /* Nav CTA button */
  .nav-cta {
    border-radius: 50px !important;
    padding: 10px 22px !important;
  }
}

/* Extra: tablet adjustments */
@media (min-width:769px) and (max-width:1024px) {
  .btn,
  a.btn,
  button.btn {
    padding: 13px 30px !important;
    font-size: .9rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE NESTED SCROLL FIX — FINAL v4.6
   Prevent any section scrolling inside another on mobile/tablet
   ════════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {

  /* ── Sidebar: no nested scroll on mobile ── */
  .sidebar-inner {
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* ── Service cards / imgbox: no inner scroll ── */
  .service-card,
  .imgbox,
  .imgbox-item,
  .card,
  .pricing-card,
  .plan-card,
  .feature-card,
  .stat-card,
  .team-card,
  .blog-card,
  .portfolio-card {
    overflow: hidden !important;
    overflow-y: visible !important;
    max-height: none !important;
  }

  /* ── Swiper/slider containers ── */
  .swiper,
  .swiper-container {
    overflow: hidden !important;
  }
  .swiper-wrapper {
    overflow: visible !important;
  }

  /* ── Section containers: never scroll ── */
  section,
  .section,
  [class*="-section"],
  [class*="section-"],
  .hero,
  .cta,
  [class*="-cta"],
  [class*="cta-"] {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    max-height: none !important;
  }

  /* ── Before/after slider: overflow hidden only ── */
  .ba-slider {
    overflow: hidden !important;
  }

  /* ── Tabs nav: horizontal scroll OK, no vertical ── */
  .tabs-nav {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
  }

  /* ── Pricing table: horizontal scroll OK ── */
  .pricing-table-responsive {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  /* ── Main content area: never overflow ── */
  main,
  .main-content,
  .container,
  .wrapper {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* ── Body: only body itself scrolls ── */
  body:not(.menu-open) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body.menu-open {
    overflow: hidden !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   VIDEO PAGES HERO — MOBILE OVERFLOW FIX v3.1
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Root overflow prevention ── */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* ── All hero containers ── */
  .sp-hero,
  .sp-hero .container,
  .sp-hero-split,
  .sp-hero-text,
  .sp-hero-ba,
  .sp-hero-ba-video,
  .sp-hero-inner {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* ── Container padding ── */
  .sp-hero .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ── h1 no overflow ── */
  .sp-hero h1 {
    white-space: normal !important;
    word-break: break-word !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* ── Description ── */
  .sp-hero-desc {
    white-space: normal !important;
    overflow: visible !important;
    max-width: 100% !important;
    padding-right: 0 !important;
  }

  /* ── Badges wrap properly ── */
  .sp-hero-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* ── Buttons full width, no cut-off ── */
  .sp-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }
  .sp-hero-actions .btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 50px !important;
  }

  /* ── Hero video embed full width ── */
  .video-hero-embed,
  .sp-hero-ba-video .video-embed-wrap,
  .sp-hero-ba-video .vcard {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
}

/* ── Header logo responsive sizes ── */
@media (max-width: 768px) {
  .header-logo-img { height: 38px !important; }
}
@media (max-width: 480px) {
  .header-logo-img { height: 34px !important; }
}


/* ════════════════════════════════════════════════════════════════
   v3.42 FIX — Hero section vertical scroll + empty space (mobile)
   
   ROOT CAUSE: The global rule "section { overflow-x:hidden; overflow-y:visible }"
   causes browsers to FORCE overflow-y to 'auto' when overflow-x is hidden
   (W3C spec: split overflow values force the other axis to auto).
   This creates an unintended vertical scroll container inside the hero section,
   which paints as empty dark space on mobile.
   
   FIX: Override the hero sections to use overflow:hidden (both axes together)
   AND hide the stats card (sp-hero-visual / svc-hero-visual) which is a
   duplicate of the sp-hero-stats bar already shown below the hero.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* ── Fix 1: Remove vertical scroll from hero sections ── */
  /* Setting overflow:hidden (not split x/y) prevents the forced scroll-context */
  .sp-hero,
  .sp-hero-2col,
  .svc-hero-section {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
}

@media (max-width: 768px) {

  /* ── Fix 2: Hide stats card (sp-hero-visual) on mobile ── */
  /* The visual card is a duplicate of the sp-hero-stats bar below */
  .sp-hero-2col .sp-hero-visual,
  .svc-hero-visual {
    display: none !important;
  }

  /* ── Fix 3: Collapse hero grid after hiding visual ── */
  .sp-hero-grid {
    grid-template-columns: 1fr !important;
    padding: 36px 0 8px !important;
    gap: 0 !important;
  }

  /* ── Fix 4: Remove extra top margin on stats bar ── */
  .sp-hero-stats {
    margin-top: 0 !important;
  }
  .svc-hero-content {
    gap: 0 !important;
  }

  /* ── Fix 5: Hero action buttons — stack vertically, equal width ── */
  .sp-hero-actions,
  .sp-hero-btns,
  .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .sp-hero-actions .btn,
  .sp-hero-btns .btn,
  .hero-buttons .btn {
    width: 100% !important;
    max-width: 300px !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 20px !important;
    font-size: .9rem !important;
  }
}

@media (max-width: 480px) {
  .sp-hero-2col .sp-hero-visual,
  .svc-hero-visual {
    display: none !important;
  }
  .sp-hero-grid {
    padding: 28px 0 6px !important;
  }
  .sp-hero-actions .btn,
  .sp-hero-btns .btn,
  .hero-buttons .btn {
    max-width: 260px !important;
    font-size: .88rem !important;
    padding: 11px 18px !important;
  }
}