/* =============================================
   NathoAsto — MASTER RESPONSIVE STYLESHEET
   Covers: 1400px → 1200px → 991px → 768px → 480px → 360px
   ============================================= */

/* ══════════════════════════════════════════════
   GLOBAL OVERRIDES — All pages
══════════════════════════════════════════════ */

/* Prevent any horizontal scroll globally */
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Container stays padded safely */
.container-na {
  padding-left: clamp(1rem, 5vw, 3rem);
  padding-right: clamp(1rem, 5vw, 3rem);
  width: 100%;
}

/* Ensure Bootstrap rows don't bleed */
.row { --bs-gutter-x: 1.5rem; }

/* Images always responsive */
img, svg, canvas, video {
  max-width: 100%;
}

/* ══════════════════════════════════════════════
   ≤ 1200px  — Large tablets / Small laptops
══════════════════════════════════════════════ */
@media (max-width: 1200px) {

  /* Nav */
  .navbar-links { gap: clamp(0.5rem, 1.5vw, 1.2rem); }
  .nav-link-na  { font-size: 0.85rem; }
  .nav-cta      { padding: 8px 18px; font-size: 0.8rem; }

  /* Sections */
  .section-na  { padding: 5rem 0; }
  .section-sm  { padding: 3rem 0; }

  /* Home — Bento Grid */
  .bento-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .bento-large  { grid-column: 1 / 7; grid-row: 1; }
  .bento-medium { grid-column: 1 / 4; grid-row: 2; }
  .bento-medium:nth-child(3) { grid-column: 4 / 7; grid-row: 2; }
  .bento-wide   { grid-column: 1 / 5; grid-row: 3; }
  .bento-small  { grid-column: 5 / 7; grid-row: 3; }
  .bento-micro  { grid-column: 1 / 7; grid-row: 4; }

  /* Stats */
  .stats-wrapper { grid-template-columns: repeat(3, 1fr); }
  .stat-item:nth-child(4)::after,
  .stat-item:nth-child(5)::after { display: none; }

  /* Process */
  .process-timeline { grid-template-columns: repeat(2, 1fr); }

  /* About — mockup stat row */
  .mockup-stat-row { gap: 0.5rem; }

  /* Industries grid */
  .industries-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .luxury-card { grid-column: 1 / 3; }
  .jewellery-card { grid-column: 1; }
  .health-card  { grid-column: 2; }
  .tech-card    { grid-column: 1 / 3; }
  .corporate-card { grid-column: 1; }
  .ecom-card    { grid-column: 2; }

  /* Services sidebar */
  .services-sidebar { position: relative; top: 0; }
}

/* ══════════════════════════════════════════════
   ≤ 991px  — Tablets portrait / Phablets
══════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* NAV — hide desktop, show hamburger */
  .navbar-links { display: none !important; }
  .nav-toggle   { display: flex !important; }

  /* Reduce nav height */
  :root { --nav-height: 70px; }

  /* Section spacing reduce */
  .section-na  { padding: 4rem 0; }
  .section-sm  { padding: 2.5rem 0; }

  /* Typography scale down */
  h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
  h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
  h3 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }

  /* ─ HOME: Hero ─ */
  .hero-content { text-align: center; padding-top: 2rem; padding-bottom: 2rem; }
  .hero-headline { font-size: clamp(2rem, 5vw, 3.5rem) !important; }
  .hero-sub { font-size: 1rem; max-width: 100%; }
  .hero-ctas { justify-content: center; }
  .hero-proof { justify-content: center; }
  .hero-3d-wrapper { width: 280px; height: 280px; margin: 0 auto; }
  .hero-ring-outer { width: 260px; height: 260px; }
  .hero-ring-inner { width: 180px; height: 180px; }
  .float-card-1, .float-card-2,
  .float-card-3, .float-card-4 { display: none; }

  /* ─ HOME: Trust bar ─ */
  .trust-marquee-wrapper { padding: 1.5rem 0; }

  /* ─ HOME: Bento ─ */
  .bento-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .bento-large { grid-column: 1 / 3; }
  .bento-medium { grid-column: auto; }
  .bento-medium:nth-child(3) { grid-column: auto; }
  .bento-wide  { grid-column: 1 / 3; }
  .bento-small { grid-column: 1 / 3; }
  .bento-micro { grid-column: 1 / 3; }
  .bento-wide-content { flex-direction: column; }
  .bento-card { padding: 1.5rem; }

  /* ─ HOME: Stats ─ */
  .stats-wrapper { grid-template-columns: repeat(2, 1fr); gap: 1px; }
  .stat-item::after { display: none; }
  .stat-item:nth-child(1)::after,
  .stat-item:nth-child(2)::after { display: none; }
  .stat-number { font-size: clamp(2.5rem, 6vw, 3.5rem); }

  /* ─ HOME: Process ─ */
  .process-timeline { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .process-connector { display: none; }

  /* ─ HOME: Industries (preview strip) ─ */
  .industries-strip { grid-template-columns: repeat(2, 1fr); }

  /* ─ HOME: Testimonials ─ */
  .testimonials-track { gap: 1.5rem; }
  .testimonial-card { min-width: 280px; }

  /* ─ HOME: CTA Banner ─ */
  .cta-banner-inner { padding: 2.5rem; text-align: center; }
  .cta-banner-inner .text-lg-end { text-align: center !important; margin-top: 1rem; }

  /* ─ ABOUT: story visual ─ */
  .story-visual { margin-top: 2rem; }
  .mockup-floating-badge { right: 0; bottom: -30px; }

  /* ─ ABOUT: presence cards ─ */
  .presence-card { padding: 1.75rem; }

  /* ─ SERVICES: Sidebar layout ─ */
  .sticky-sidebar { position: relative; top: 0; margin-bottom: 2rem; }
  .sidebar-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .sidebar-link {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    padding: 0.6rem 0.75rem;
    font-size: 0.75rem;
    min-width: 100px;
  }
  .sidebar-link-icon { width: 28px; height: 28px; font-size: 0.8rem; }
  .sidebar-link::before { display: none; }

  /* ─ INDUSTRIES: grid ─ */
  .industries-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .luxury-card { grid-column: 1 / 3; min-height: 380px; }
  .tech-card   { grid-column: 1 / 3; min-height: 360px; }
  .jewellery-card, .health-card, .corporate-card, .ecom-card { grid-column: auto; }
  .industry-card { min-height: 340px; }
  .industry-hover-arrow { display: none; }

  /* ─ CONTACT: columns ─ */
  .contact-headline { font-size: clamp(2rem, 5vw, 3rem); }
  .form-glass-card { padding: 2rem; }

  /* Footer */
  .footer-top-banner { padding: 2.5rem 0; }
  .footer-banner-headline { font-size: clamp(1.5rem, 4vw, 2.5rem); }

  /* Page hero inner pages */
  .page-hero { min-height: 35vh; padding: calc(var(--nav-height) + 2.5rem) 0 3rem; }
  .page-hero h1 { font-size: clamp(1.75rem, 5vw, 3rem); }
}

/* ══════════════════════════════════════════════
   ≤ 768px  — Mobile landscape / large phones
══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─ Global spacing ─ */
  :root {
    --sp-3xl: 4rem;
    --sp-2xl: 2.5rem;
  }
  .section-na  { padding: 3.5rem 0; }
  .section-sm  { padding: 2rem 0; }
  .section-header { text-align: left; max-width: 100%; }
  .section-header p { font-size: 0.95rem; }

  /* ─ HOME: Hero ─ */
  .hero-section { min-height: auto; padding-top: var(--nav-height); padding-bottom: 2rem; }
  .hero-headline { font-size: clamp(1.85rem, 6vw, 2.75rem) !important; }
  .hero-3d-wrapper { display: none !important; }
  .hero-ctas { flex-direction: column; gap: 0.75rem; }
  .hero-ctas .btn-na { width: 100%; justify-content: center; }
  .hero-badge { font-size: 0.7rem; }

  /* ─ HOME: Bento ─ */
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .bento-large, .bento-medium, .bento-medium:nth-child(3),
  .bento-wide, .bento-small, .bento-micro {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .bento-card { padding: 1.25rem; min-height: 200px; }
  .bento-large { min-height: 260px; }

  /* ─ HOME: Stats ─ */
  .stats-wrapper { grid-template-columns: 1fr 1fr; }
  .stat-item { padding: 1.5rem 1rem; }
  .stat-number { font-size: 2.5rem; }

  /* ─ HOME: Process ─ */
  .process-timeline { grid-template-columns: 1fr; gap: 1rem; }
  .process-step { padding: 1.5rem; }
  .process-step-number { font-size: 3rem; }

  /* ─ HOME: Industries strip ─ */
  .industries-strip { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .industry-strip-card { padding: 1.5rem 1rem; }

  /* ─ HOME: Testimonials ─ */
  .testimonial-card { min-width: 260px; padding: 1.5rem; }
  .testimonials-marquee-wrapper { padding: 1rem 0; }

  /* ─ HOME: CTA Banner ─ */
  .cta-banner-inner { padding: 2rem 1.5rem; text-align: center; }
  .cta-banner-inner h2 { font-size: clamp(1.5rem, 5vw, 2rem); }

  /* ─ HOME: Footer ─ */
  .footer-na { padding: 3rem 0 1.5rem; }
  .footer-logo { margin-bottom: 0.75rem; }
  .footer-description { font-size: 0.875rem; }
  .footer-socials { gap: 0.5rem; }
  .social-btn { width: 36px; height: 36px; font-size: 0.9rem; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-top: 1.5rem;
  }

  /* ─ ABOUT: Hero ─ */
  .about-hero { padding: calc(var(--nav-height) + 2.5rem) 0 3rem; min-height: auto; }
  .about-hero-headline { font-size: clamp(1.75rem, 6vw, 2.5rem) !important; }
  .about-hero-tags { justify-content: flex-start; }

  /* ─ ABOUT: Highlights ─ */
  .highlight-item { padding: 0.85rem 1rem; }
  .highlight-icon { width: 36px; height: 36px; }
  .highlight-item h6 { font-size: 0.875rem; }
  .highlight-item p  { font-size: 0.75rem; }

  /* ─ ABOUT: Story visual / mockup ─ */
  .mockup-stat-row { flex-direction: column; gap: 0.5rem; }
  .mockup-floating-badge { position: relative; right: auto; bottom: auto; margin-top: 1rem; display: inline-flex; }

  /* ─ ABOUT: Accordion ─ */
  .accordion-body-na p { padding-left: 1.5rem; }
  .values-quick-stats { flex-direction: row; gap: 1rem; flex-wrap: wrap; }
  .vqs-num { font-size: 1.75rem; }

  /* ─ ABOUT: Presence cards ─ */
  .presence-card { padding: 1.5rem; }
  .presence-markets { gap: 0.35rem; }

  /* ─ ABOUT: Team cards ─ */
  .team-avatar { width: 56px; height: 56px; font-size: 1.4rem; }

  /* ─ SERVICES: Section header ─ */
  .service-section-header { flex-direction: column; gap: 1rem; }
  .service-section-icon { width: 52px; height: 52px; }
  .services-sidebar { padding: 1rem; }
  .sidebar-nav { gap: 0.4rem; }
  .service-card { padding: 1.5rem; }
  .service-card h5 { font-size: 1rem; }
  .service-metric { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .metric-val { font-size: 1.25rem; }
  .influencer-visual { flex-direction: row; justify-content: center; }
  .inf-circle { width: 64px; height: 64px; font-size: 0.7rem; }

  /* ─ INDUSTRIES: grid ─ */
  .industries-grid { grid-template-columns: 1fr; gap: 1rem; }
  .luxury-card, .jewellery-card, .health-card,
  .tech-card, .corporate-card, .ecom-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .industry-card { min-height: 320px; }
  .industry-content { padding: 1.5rem; }
  .industry-card h2 { font-size: 1.75rem; }
  .industry-card h3 { font-size: 1.5rem; }
  .industry-icon-large { font-size: 2rem; }

  /* ─ PORTFOLIO: Hero ─ */
  .portfolio-headline { font-size: clamp(2rem, 7vw, 3.5rem) !important; }
  .portfolio-filters { gap: 0.5rem; }
  .filter-btn { padding: 8px 14px; font-size: 0.75rem; }

  /* ─ PORTFOLIO: Case studies ─ */
  .cs-item { flex-direction: column; gap: 0.75rem; padding: 2rem 0; }
  .cs-number { min-width: auto; }
  .cs-results { gap: 1rem; }
  .cs-metric { font-size: 1.25rem; }
  .cs-title { font-size: 1.2rem; }
  .cs-arrow { display: none; }
  .cursor-image-follower { display: none !important; }

  /* ─ CONTACT: Layout ─ */
  .contact-section { padding: calc(var(--nav-height) + 2rem) 0 3rem; }
  .contact-headline { font-size: clamp(1.75rem, 6vw, 2.5rem) !important; }
  .form-glass-card { padding: 1.75rem 1.25rem; }
  .form-header h3 { font-size: 1.25rem; }
  .contact-office-card { gap: 0.75rem; }
  .form-footer { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .submit-btn { width: 100%; justify-content: center; }
  .service-chips-select { gap: 0.35rem; }
  .service-chip-btn { padding: 6px 10px; font-size: 0.7rem; }

  /* ─ CONTACT: Footer top banner ─ */
  .footer-top-banner { text-align: center; padding: 2rem 0; }
  .footer-top-banner .text-lg-end { text-align: center !important; margin-top: 1rem; }
  .footer-banner-headline { font-size: clamp(1.35rem, 5vw, 2rem); }
}

/* ══════════════════════════════════════════════
   ≤ 480px  — Mobile portrait standard
══════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Global */
  :root {
    --sp-3xl: 3rem;
    --sp-2xl: 2rem;
    --nav-height: 64px;
  }

  /* Nav */
  .navbar-na { padding: 0 1rem; }
  .navbar-brand { font-size: 1.2rem; gap: 0.5rem; }
  .brand-logo-mark { width: 32px; height: 32px; font-size: 0.95rem; border-radius: 8px; }

  /* Mobile menu links */
  .mobile-nav .nav-link-na { font-size: 1.25rem; }

  /* Sections */
  .section-na { padding: 3rem 0; }
  .section-sm { padding: 1.75rem 0; }

  /* Buttons global */
  .btn-na { padding: 12px 22px; font-size: 0.85rem; }

  /* ─ HOME: Hero ─ */
  .hero-headline { font-size: clamp(1.65rem, 7vw, 2.2rem) !important; }
  .hero-sub { font-size: 0.9rem; }
  .hero-badge { padding: 6px 14px; }
  .hero-proof { flex-wrap: wrap; gap: 0.5rem; justify-content: center; }

  /* ─ HOME: Trust bar ─ */
  .trust-logo { height: 24px; }
  .trust-separator { display: none; }

  /* ─ HOME: Bento ─ */
  .bento-card { padding: 1.25rem; border-radius: 16px; }
  .bento-section-header h2 { font-size: 1.5rem; }

  /* ─ HOME: Stats ─ */
  .stats-wrapper { grid-template-columns: 1fr 1fr; gap: 0; }
  .stat-item { padding: 1.25rem 0.75rem; }
  .stat-number { font-size: 2rem; }
  .stat-label { font-size: 0.7rem; }

  /* ─ HOME: Process ─ */
  .process-step-number { font-size: 2.5rem; opacity: 0.1; }
  .process-step { padding: 1.25rem; }

  /* ─ HOME: Testimonials ─ */
  .testimonial-card { min-width: 240px; padding: 1.25rem; }
  .testimonial-avatar { width: 40px; height: 40px; font-size: 1rem; }

  /* ─ HOME: Industries strip ─ */
  .industries-strip { grid-template-columns: 1fr; gap: 0.75rem; }
  .industry-strip-card { padding: 1.25rem; }

  /* ─ HOME: CTA Banner ─ */
  .cta-banner-inner { padding: 1.5rem 1.25rem; border-radius: 20px; }
  .cta-banner-inner h2 { font-size: clamp(1.35rem, 5vw, 1.75rem); }

  /* ─ HOME: Footer ─ */
  .newsletter-form { gap: 0.5rem; }
  .newsletter-input { padding: 10px 14px; font-size: 0.85rem; }

  /* ─ ABOUT ─ */
  .about-hero-headline { font-size: clamp(1.5rem, 7vw, 2rem) !important; }
  .highlight-item { flex-direction: row; gap: 0.75rem; }
  .presence-card { padding: 1.25rem; border-radius: 20px; }
  .presence-card h3 { font-size: 1.75rem; }
  .presence-city { font-size: 0.8rem; }
  .presence-detail-item { font-size: 0.8rem; }
  .mockup-stat-row { gap: 0.4rem; }
  .mockup-stat-card { padding: 0.75rem; }
  .ms-num { font-size: 1.25rem; }

  /* ─ SERVICES ─ */
  .services-sidebar { padding: 0.75rem; }
  .sidebar-link { padding: 0.5rem 0.6rem; font-size: 0.7rem; min-width: 80px; }
  .sidebar-link-icon { display: none; }
  .sidebar-cta { padding: 0.75rem !important; }
  .service-card { padding: 1.25rem; border-radius: 16px; }
  .service-section-header { margin-bottom: 1.5rem; padding-bottom: 1rem; }
  .service-section-icon { width: 44px; height: 44px; font-size: 1.1rem; border-radius: 12px; }
  .service-section-header h2 { font-size: 1.5rem; }

  /* ─ INDUSTRIES ─ */
  .industry-card { min-height: 300px; border-radius: 20px; }
  .industry-content { padding: 1.25rem; }
  .industry-card h2 { font-size: 1.5rem; }
  .industry-card h3 { font-size: 1.25rem; }
  .industry-card p { font-size: 0.85rem; }
  .industry-services span { font-size: 0.65rem; padding: 2px 8px; }
  .industry-cta { padding: 10px 20px; font-size: 0.8rem; }
  .industry-cta-sm { padding: 8px 16px; font-size: 0.75rem; }

  /* ─ PORTFOLIO ─ */
  .portfolio-hero { padding: calc(var(--nav-height) + 2rem) 0 2.5rem; }
  .portfolio-headline { font-size: clamp(1.75rem, 8vw, 2.5rem) !important; }
  .filter-btn { padding: 7px 12px; font-size: 0.7rem; }
  .cs-item { padding: 1.5rem 0; }
  .cs-title { font-size: 1.1rem; }
  .cs-results { gap: 0.75rem; }
  .cs-result-item span:last-child { font-size: 0.7rem; }

  /* ─ CONTACT ─ */
  .contact-section { padding: calc(var(--nav-height) + 1.5rem) 0 2.5rem; }
  .contact-headline { font-size: clamp(1.5rem, 7vw, 2.2rem) !important; }
  .form-glass-card { padding: 1.25rem 1rem; border-radius: 20px; }
  .form-header { margin-bottom: 1.5rem; }
  .form-header h3 { font-size: 1.1rem; }
  .form-header p { font-size: 0.8rem; }
  .input-group-na { margin-bottom: 1.25rem; }
  .input-label-na { font-size: 0.65rem; }
  .input-na { font-size: 0.9rem; padding: 0.5rem 0; }
  .contact-office-card { padding: 1rem; border-radius: 14px; }
  .contact-office-card .office-flag { font-size: 1.5rem; }
  .office-details h5 { font-size: 0.9rem; }
  .office-contact-link { font-size: 0.8rem; }
  .service-chip-btn { font-size: 0.65rem; padding: 5px 9px; }
  .response-promise { padding: 0.75rem 1rem; gap: 0.75rem; }
  .rp-icon { width: 34px; height: 34px; }

  /* Footer */
  .footer-top-banner { padding: 1.5rem 0; }
  .footer-banner-headline { font-size: 1.25rem; }
  .footer-heading { font-size: 0.75rem; margin-bottom: 0.75rem; }
  .footer-link { font-size: 0.8rem; }
  .footer-copyright { font-size: 0.75rem; }

  /* Pill tags */
  .pill-tag { font-size: 0.65rem; padding: 3px 9px; }

  /* Section label */
  .section-label { font-size: 0.65rem; padding: 5px 12px; }
}

/* ══════════════════════════════════════════════
   ≤ 360px  — Very small phones (Galaxy S, older iPhones)
══════════════════════════════════════════════ */
@media (max-width: 360px) {

  .hero-headline { font-size: 1.6rem !important; }
  .about-hero-headline { font-size: 1.4rem !important; }
  .contact-headline { font-size: 1.4rem !important; }
  .portfolio-headline { font-size: 1.6rem !important; }

  .bento-card { padding: 1rem; }
  .service-card { padding: 1rem; }
  .form-glass-card { padding: 1rem 0.75rem; }

  .stats-wrapper { grid-template-columns: 1fr; }
  .stat-item::after { display: none; }

  .btn-na { padding: 11px 18px; font-size: 0.8rem; }
  .sidebar-link { font-size: 0.65rem; padding: 0.4rem 0.5rem; }

  .cs-results { flex-direction: column; gap: 0.5rem; }
  .portfolio-filters { gap: 0.35rem; }
  .filter-btn { padding: 6px 10px; font-size: 0.65rem; }
}

/* ══════════════════════════════════════════════
   SHARED UTILITIES — Responsive helpers
══════════════════════════════════════════════ */

/* Fix right-column inner padding on mobile for about */
@media (max-width: 768px) {
  .input-group-na[style*="padding-left"] {
    padding-left: 0 !important;
  }
  .col-md-6 + .col-md-6 .input-group-na {
    padding-left: 0 !important;
  }
}

/* Ensure the newsletter form looks good at all sizes */
@media (max-width: 480px) {
  .newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .newsletter-input {
    width: 100%;
    padding: 10px 14px;
  }
}

/* Fix footer columns on very small screens */
@media (max-width: 575px) {
  .footer-na .row > [class*='col-6'] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .footer-na .row > [class*='col-lg-4'],
  .footer-na .row > [class*='col-lg-2'] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Prevent overflow in about page mockup on small screens */
@media (max-width: 600px) {
  .mockup-screen { overflow-x: hidden; }
  .mockup-body { padding: 1rem; }
  .chart-svg { height: 60px; }
}

/* Fix service section on very small screens */
@media (max-width: 480px) {
  .service-section { scroll-margin-top: 80px; }
  .divider-na { margin: 2rem 0 !important; }
}

/* Industries — ensure card text doesn't overflow */
@media (max-width: 480px) {
  .industry-services { margin-bottom: 0.75rem; }
  .presence-flag { margin-bottom: 0.5rem; }
  .presence-detail-item { padding: 0.4rem 0; }
}

/* Presence pin hide on small screens */
@media (max-width: 480px) {
  .presence-pin { display: none; }
}

/* Fix CTA banner inner on tiny screens */
@media (max-width: 400px) {
  .cta-banner-inner { padding: 1.25rem 1rem; }
  .cta-orb-1, .cta-orb-2 { display: none; }
}

/* Portfolio case-study items on very small screens */
@media (max-width: 400px) {
  .cs-challenge { display: none; }
  .cs-meta { flex-wrap: wrap; }
}

/* Prevent horizontal scroll from absolute-positioned decorative orbs */
.contact-bg,
.portfolio-hero-bg,
.about-mesh-bg {
  overflow: hidden;
}