/* ==========================================================================
   Avention Media - Master Responsive & Mobile/Tablet/Mac Optimization Engine
   Covering: 2560px, 1920px, 1600px, 1440px, 1366px, 1280px, 1024px, 768px, 576px, 425px, 375px, 320px
   ========================================================================== */

/* 1. Mac Retina, 4K & Ultra-Wide Displays (1440px+) */
@media (min-width: 1440px) {
  .container {
    max-width: 1360px !important;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1480px !important;
  }

  .hero-title {
    font-size: 3.5rem;
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1680px !important;
  }
}

/* 2. Standard Mac & Laptops (1366px to 1599px) */
@media (max-width: 1599px) and (min-width: 1366px) {
  .container {
    max-width: 1280px;
  }
}

/* 3. Small Laptops & Windows Laptops (1025px to 1365px) */
@media (max-width: 1365px) and (min-width: 1025px) {
  .container {
    max-width: 1240px;
  }
  .brand-logo img {
    height: 44px !important;
  }
  .nav-link {
    font-size: 0.84rem !important;
    padding: 0.4rem 0.55rem !important;
    gap: 0.2rem !important;
    white-space: nowrap !important;
  }
  .nav-menu {
    gap: 0.25rem !important;
  }
  .header-search-wrap > div {
    width: 150px !important;
  }
  .header-search-wrap input {
    font-size: 0.78rem !important;
    padding: 0.38rem 0.65rem 0.38rem 2rem !important;
  }
  .header-cta-btn {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
  }
}

/* 4. Tablets & iPad Air (769px to 1024px) */
@media (max-width: 1024px) {
  .nav-menu {
    display: none !important;
    /* Hide Desktop Nav */
  }


  .mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-cta-btn {
    display: none !important;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }

  .contact-grid,
  .contact-grid-container {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

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

  .dh-grid,
  .dh-features-grid,
  .dh-appending-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Form cards & side-by-side layout on desktop/laptop/tablet */
  .rb-hero-form-card,
  .ib-hero-form-card,
  .tb-hero-form-card,
  .hb-hero-form-card,
  .gb-hero-form-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .rb-hero-inner,
  .ib-hero-inner,
  .tb-hero-inner,
  .hb-hero-inner,
  .gb-hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 380px !important;
    gap: 2.25rem !important;
    align-items: flex-start !important;
  }
}

/* 4. Tablets & Mobile Master Adjustments (up to 991px) */
@media (max-width: 991px) {
  .top-bar {
    display: none !important;
  }

  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08) !important;
    border-bottom: 1px solid #E2E8F0 !important;
  }

  .nav-inner {
    height: 65px !important;
  }

  body {
    padding-top: 65px !important;
  }
}

/* 5. Tablet Portrait & Mini Tablets (577px to 768px) */
@media (max-width: 768px) {
  .top-bar {
    display: none !important;
  }

  .page-hero,
  .hero {
    padding: 3.5rem 0 3rem;
  }

  .hero-title {
    font-size: clamp(2rem, 5vw, 2.5rem);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .cta-banner {
    padding: 2.5rem 1.5rem;
  }

  .dh-hero-inner,
  .rb-hero-inner,
  .ib-hero-inner,
  .tb-hero-inner,
  .hb-hero-inner,
  .gb-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .dh-stats-inner,
  .rb-stats-inner,
  .ib-stats-inner,
  .tb-stats-inner,
  .hb-stats-inner,
  .gb-stats-inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem 1rem !important;
  }

  .dh-grid,
  .dh-features-grid,
  .dh-appending-grid {
    grid-template-columns: 1fr;
  }

  .rb-cta-banner,
  .ib-cta-banner,
  .tb-cta-banner,
  .hb-cta-banner,
  .gb-cta-banner {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 2.25rem 1.5rem !important;
  }
}

/* 6. Mobile Devices (320px to 576px) */
@media (max-width: 576px) {
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .top-bar-inner {
    flex-direction: column;
    gap: 0.4rem;
    text-align: center;
  }

  .top-contact-info {
    flex-wrap: wrap;
    justify-content: center;
  }

  .form-group-row {
    grid-template-columns: 1fr;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 0.85rem;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .brand-logo img {
    height: 50px !important;
    max-height: 52px !important;
  }

  .dh-stats-inner,
  .rb-stats-inner,
  .ib-stats-inner,
  .tb-stats-inner,
  .hb-stats-inner,
  .gb-stats-inner {
    grid-template-columns: 1fr !important;
  }

  /* Form Card & Content Box Mobile Padding */
  .rb-hero-form-card,
  .ib-hero-form-card,
  .tb-hero-form-card,
  .hb-hero-form-card,
  .gb-hero-form-card,
  .contact-form-col {
    display: block !important;
    width: 100% !important;
    padding: 1.25rem 1rem !important;
    box-sizing: border-box !important;
  }

  .contact-info-col>div {
    padding: 1.25rem 1rem !important;
  }

  /* Grids Stacked 1-Column */
  .contact-grid-container,
  .trusted-partner-grid,
  .solutions-grid,
  .commercial-grid,
  .category-grid,
  .data-hygiene-grid,
  .mega-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Tables Fluid Scroll */
  .rb-table-wrap,
  .ib-table-wrap,
  .tb-table-wrap,
  .hb-table-wrap,
  .gb-table-wrap,
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .hero-title,
  .page-hero h1,
  h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
    word-break: break-word;
  }
}

/* 7. Extra Small Mobile Devices (320px to 375px) */
@media (max-width: 375px) {
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .hero-title {
    font-size: 1.75rem;
  }

  .nav-inner {
    height: 65px;
  }
}

/* ==========================================================================
   Mobile Navigation Drawer & Touch Overlay Engine
   ========================================================================== */
html,
body {
  overflow-x: clip !important;
  width: 100%;
}

.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100000 !important;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.mobile-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 88vw;
  height: 100vh;
  background: #FFFFFF;
  z-index: 100005 !important;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 1.75rem 1.5rem;
  overflow-y: auto;
}

.mobile-drawer.active {
  transform: translateX(0);
}

.mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}

.mobile-drawer-close {
  background: var(--bg-alt);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-dark);
}

.mobile-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-nav-link {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-dark);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  display: block;
  transition: var(--transition);
}

.mobile-nav-link:hover {
  background: var(--bg-alt);
  color: var(--accent);
}

/* Mobile Drawer Accordion & Submenu Engine */
.mobile-nav-item {
  width: 100%;
}

.mobile-dropdown-toggle {
  background: #EEF3FF;
  border: 1px solid #CBD5E1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3466FC;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.3s ease;
}

.mobile-dropdown-toggle:hover {
  background: #3466FC;
  color: #FFFFFF;
}

.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
}

.mobile-nav-item.open>.mobile-submenu {
  max-height: 4000px;
  opacity: 1;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.mobile-nav-item.open .mobile-dropdown-toggle {
  transform: rotate(180deg);
  background: #3466FC;
  color: #FFFFFF;
}

/* ==========================================================================
   DATA SOLUTIONS CHILD PAGES - COMPREHENSIVE MOBILE RESPONSIVE ENGINE
   ========================================================================== */

/* 1. Global 10px Mobile Side Padding */
@media (max-width: 768px) {

  .container,
  .container-fluid,
  .gb-hero .container,
  .ib-hero .container,
  .rb-hero .container,
  .tb-hero .container,
  .hb-hero .container,
  .dh-hero .container,
  .gb-section .container,
  .ib-section .container,
  .rb-section .container,
  .tb-section .container,
  .hb-section .container,
  .dh-section .container,
  .trusted-brands-section .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* Section Top/Bottom Spacing on Mobile */
  .gb-section,
  .ib-section,
  .rb-section,
  .tb-section,
  .hb-section,
  .dh-section,
  .mg-section {
    padding: 2.75rem 0 !important;
  }

  /* Hero Section Grid & Stack */
  .gb-hero-inner,
  .ib-hero-inner,
  .rb-hero-inner,
  .tb-hero-inner,
  .hb-hero-inner,
  .dh-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }

  /* Breadcrumbs wrapping & gap on Mobile */
  .breadcrumbs {
    font-size: 0.8rem !important;
    flex-wrap: wrap !important;
    gap: 0.35rem 0.5rem !important;
    margin-bottom: 1.5rem !important;
    word-break: break-word !important;
  }

  /* Hero Titles & Descriptions */
  .gb-hero h1,
  .ib-hero h1,
  .rb-hero h1,
  .tb-hero h1,
  .hb-hero h1,
  .dh-hero h1 {
    font-size: clamp(1.4rem, 6vw, 2.1rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
    word-break: break-word !important;
  }

  .gb-hero-desc,
  .ib-hero-desc,
  .rb-hero-desc,
  .tb-hero-desc,
  .hb-hero-desc,
  .dh-hero-desc {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.25rem !important;
  }

  /* Hero CTA Group */
  .gb-hero-cta-group,
  .ib-hero-cta-group,
  .rb-hero-cta-group,
  .tb-hero-cta-group,
  .hb-hero-cta-group,
  .dh-hero-cta-group {
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  .btn-hero-primary,
  .btn-hero-ghost {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.85rem 1.25rem !important;
    box-sizing: border-box !important;
  }

  /* Hero Form Card */
  .gb-hero-form-card,
  .ib-hero-form-card,
  .rb-hero-form-card,
  .tb-hero-form-card,
  .hb-hero-form-card,
  .dh-hero-form-card {
    padding: 1.25rem 1rem !important;
    border-radius: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .gb-hero-form-card h3,
  .ib-hero-form-card h3,
  .rb-hero-form-card h3,
  .tb-hero-form-card h3,
  .hb-hero-form-card h3,
  .dh-hero-form-card h3 {
    font-size:  1.2rem !important;
  }

  /* Hero Stats Bar Grid on Mobile (2 Columns) */
  .gb-stats-inner,
  .ib-stats-inner,
  .rb-stats-inner,
  .tb-stats-inner,
  .hb-stats-inner,
  .dh-stats-inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem 0.75rem !important;
    padding: 0.5rem 0 !important;
  }

  .gb-stat-val,
  .ib-stat-val,
  .rb-stat-val,
  .tb-stat-val,
  .hb-stat-val,
  .dh-stat-val {
    font-size: 1.45rem !important;
  }

  .gb-stat-label,
  .ib-stat-label,
  .rb-stat-label,
  .tb-stat-label,
  .hb-stat-label,
  .dh-stat-label {
    font-size: 0.72rem !important;
  }

  /* Trusted Brands & Single Line Badges Bar on Mobile */
  .trusted-brands-section {
    padding: 1.75rem 0 !important;
  }

  .trusted-brands-section .container>div:first-child {
    border-radius: 16px !important;
    padding: 0.75rem 1rem !important;
    gap: 0.75rem 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .trusted-brands-section span {
    font-size: 0.78rem !important;
  }

  .brand-logo-card {
    min-width: 130px !important;
    height: 60px !important;
    padding: 0.5rem 1rem !important;
  }

  .brand-logo-img {
    max-height: 32px !important;
    max-width: 100px !important;
  }

  /* 2-Column Content Sections stacked on Mobile */
  .gb-two-col,
  .ib-two-col,
  .rb-two-col,
  .tb-two-col,
  .hb-two-col,
  .dh-two-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.75rem !important;
  }

  /* Cards Grids 1-Column on Mobile */
  .gb-usecase-grid,
  .ib-usecase-grid,
  .rb-usecase-grid,
  .tb-usecase-grid,
  .hb-usecase-grid,
  .dh-usecase-grid,
  .gb-fields-grid,
  .ib-fields-grid,
  .rb-fields-grid,
  .tb-fields-grid,
  .hb-fields-grid,
  .dh-fields-grid,
  .hb-subspec-grid,
  .mg-pill-grid,
  .mg-datapoints-grid,
  .mg-testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  /* Tables Horizontal Scroll Wrappers */
  .mg-table-wrapper,
  .rb-table-wrap,
  .ib-table-wrap,
  .tb-table-wrap,
  .hb-table-wrap,
  .gb-table-wrap {
    overflow-x: auto !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
    display: block !important;
    margin-top: 1rem !important;
  }

  .mg-spec-table,
  .rb-spec-table,
  .ib-spec-table,
  .tb-spec-table,
  .hb-spec-table,
  .gb-spec-table,
  table {
    min-width: 580px !important;
  }
}

/* Extra Small Mobile Devices (<= 480px) */
@media (max-width: 480px) {
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .gb-hero h1,
  .ib-hero h1,
  .rb-hero h1,
  .tb-hero h1,
  .hb-hero h1,
  .dh-hero h1 {
    font-size: 1.35rem !important;
  }

  .gb-stats-inner,
  .ib-stats-inner,
  .rb-stats-inner,
  .tb-stats-inner,
  .hb-stats-inner,
  .dh-stats-inner {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* Hero Form Card White BG & Box Shadow */

.tb-hero-form-card, .hb-hero-form-card, .ib-hero-form-card, .gb-hero-form-card, .rb-hero-form-card, .dh-hero-form-card {
  background: #FFFFFF !important;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12), 0 2px 10px rgba(15, 23, 42, 0.06) !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
}

.tb-hero h1, .hb-hero h1, .ib-hero h1, .gb-hero h1, .rb-hero h1, .dh-hero h1, .hero-title {
  color: #0F172A !important;
}

.tb-hero-desc, .hb-hero-desc, .ib-hero-desc, .gb-hero-desc, .rb-hero-desc, .dh-hero-desc {
  color: #334155 !important;
}



/* Hero Breadcrumbs High Contrast Light Background Styles */
.breadcrumbs,
.tb-hero .breadcrumbs, .hb-hero .breadcrumbs, .ib-hero .breadcrumbs, .gb-hero .breadcrumbs, .rb-hero .breadcrumbs, .dh-hero .breadcrumbs {
  color: #64748B !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  margin-bottom: 2.25rem !important;
}
.breadcrumbs a,
.tb-hero .breadcrumbs a, .hb-hero .breadcrumbs a, .ib-hero .breadcrumbs a, .gb-hero .breadcrumbs a, .rb-hero .breadcrumbs a, .dh-hero .breadcrumbs a {
  color: #3466FC !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.breadcrumbs a:hover,
.tb-hero .breadcrumbs a:hover, .hb-hero .breadcrumbs a:hover, .ib-hero .breadcrumbs a:hover, .gb-hero .breadcrumbs a:hover, .rb-hero .breadcrumbs a:hover, .dh-hero .breadcrumbs a:hover {
  text-decoration: underline !important;
}
.breadcrumbs span,
.tb-hero .breadcrumbs span, .hb-hero .breadcrumbs span, .ib-hero .breadcrumbs span, .gb-hero .breadcrumbs span, .rb-hero .breadcrumbs span, .dh-hero .breadcrumbs span {
  color: #0F172A !important;
  font-weight: 700 !important;
}

/* Hero Form Card Clean Padding & Logo Yellow Submit Button */
.tb-hero-form-card, .hb-hero-form-card, .ib-hero-form-card, .gb-hero-form-card, .rb-hero-form-card, .dh-hero-form-card {
  padding: 2.25rem 2rem !important;
  background: #FFFFFF !important;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12), 0 2px 10px rgba(15, 23, 42, 0.06) !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 18px !important;
}

.btn-form-submit {
  background: #FDDA00 !important;
  color: #0F172A !important;
  border: 2px solid #FDDA00 !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
  border-radius: 8px !important;
  padding: 0.95rem !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 15px rgba(253, 218, 0, 0.35) !important;
}
.btn-form-submit:hover {
  background: #3466FC !important;
  color: #FFFFFF !important;
  border-color: #3466FC !important;
  box-shadow: 0 6px 20px rgba(52, 102, 252, 0.4) !important;
}

/* ==========================================================================
   HERO GRID RESPONSIVE RULES
   Outer: [Left+Center wrapper (1fr)] [Form card (390px)]
   Inner sub-grid: [Text (1fr)] [Image (290px)]
   Proof bar: repeat(4, 1fr) single row
   ========================================================================== */

/* Large Laptop (1100px – 1279px): slightly tighten inner image col */
@media (max-width: 1279px) and (min-width: 1025px) {
  div[style*="grid-template-columns:1fr 390px"] {
    gap: 1.5rem !important;
  }
  div[style*="grid-template-columns:1fr 290px"] {
    grid-template-columns: 1fr 240px !important;
    gap: 1.25rem !important;
  }
}

/* Tablet Landscape (769px – 1024px): outer becomes single col, form below */
@media (max-width: 1024px) {
  div[style*="grid-template-columns:1fr 390px"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  div[style*="grid-template-columns:1fr 290px"] {
    grid-template-columns: 1fr 220px !important;
  }
  /* Proof bar: 2x2 on tablet */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}

/* Mobile (max 768px): fully stacked */
@media (max-width: 768px) {
  div[style*="grid-template-columns:1fr 290px"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.85rem !important;
  }
  /* Image col on mobile: show centered */
  div[style*="grid-template-columns:1fr 290px"] > div:nth-child(2) {
    min-height: 220px !important;
    padding: 1rem !important;
  }
}


/* ==========================================================================
   SCROLL MARGIN — Prevents sticky/fixed header from covering anchor targets
   ========================================================================== */
section[id],
div[id] {
  scroll-margin-top: 90px;
}

/* Desktop hero: ensure enough top padding to clear sticky header */
.tb-hero, .hb-hero, .ib-hero, .gb-hero, .rb-hero, .dh-hero {
  overflow: visible !important;
}

/* Mobile (fixed header 65px + extra buffer) */
@media (max-width: 991px) {
  .tb-hero, .hb-hero, .ib-hero, .gb-hero, .rb-hero, .dh-hero {
    padding-top: 2rem !important;
  }
}

/* ==========================================================================
   AVENTION MEDIA - MASTER UNIVERSAL MOBILE & TABLET RESPONSIVE ENGINE
   ========================================================================== */

/* 1. Large Tablet & Laptop Landscape (<= 1024px) */
@media (max-width: 1024px) {
  /* Hero Outer Grid Collapsing */
  div[style*="grid-template-columns:1fr 370px"],
  div[style*="grid-template-columns: 1fr 370px"],
  div[style*="grid-template-columns:1fr 380px"],
  div[style*="grid-template-columns: 1fr 380px"],
  div[style*="grid-template-columns:1fr 400px"],
  div[style*="grid-template-columns: 1fr 400px"],
  div[style*="grid-template-columns:1fr 420px"],
  div[style*="grid-template-columns: 1fr 420px"],
  div[style*="grid-template-columns:1fr 440px"],
  div[style*="grid-template-columns: 1fr 440px"],
  div[style*="grid-template-columns:minmax(0, 1fr) 340px"],
  div[style*="grid-template-columns: 1fr 390px"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Bento Grid Outer Collapsing (Left stacked content + Right CTA card) */
  div[style*="grid-template-columns: 1fr 320px"],
  div[style*="grid-template-columns:1fr 320px"],
  div[style*="grid-template-columns: 320px 1fr"],
  div[style*="grid-template-columns: 1fr 340px"],
  div[style*="grid-template-columns:1fr 340px"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Custom Build On Demand Banner */
  div[style*="grid-template-columns: 1fr auto"],
  div[style*="grid-template-columns:1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    text-align: center !important;
  }

  div[style*="grid-template-columns: 1fr auto"] a,
  div[style*="grid-template-columns:1fr auto"] a {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* 2. Standard Mobile & Tablet Portrait (<= 768px) */
@media (max-width: 768px) {

  /* Global Container Padding */
  .container,
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* Hero Inner Text + SVG Image Column Stacking */
  div[style*="grid-template-columns:1fr 340px"],
  div[style*="grid-template-columns: 1fr 340px"],
  div[style*="grid-template-columns:1fr 300px"],
  div[style*="grid-template-columns: 1fr 300px"],
  div[style*="grid-template-columns:1fr 320px"],
  div[style*="grid-template-columns: 1fr 320px"],
  div[style*="grid-template-columns: 1.15fr 1fr"],
  div[style*="grid-template-columns:1.15fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Hero SVG Image Column Mobile Scaling & Centering */
  div[style*="grid-template-columns:1fr 340px"] > div:nth-child(2),
  div[style*="grid-template-columns: 1fr 340px"] > div:nth-child(2),
  div[style*="grid-template-columns:1fr 300px"] > div:nth-child(2),
  div[style*="grid-template-columns:1fr 320px"] > div:nth-child(2) {
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  div[style*="grid-template-columns:1fr 340px"] svg,
  div[style*="grid-template-columns: 1fr 340px"] svg,
  div[style*="grid-template-columns:1fr 300px"] svg,
  div[style*="grid-template-columns:1fr 320px"] svg {
    max-width: 270px !important;
    height: auto !important;
  }

  /* ALL BENTO GRID ROWS (Row 1: 1fr 1fr, Row 2: repeat(3, 1fr)) STACKING */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns:repeat(3, 1fr)"],
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(5, 1fr)"],
  div[style*="grid-template-columns:repeat(5, 1fr)"],
  div[style*="grid-template-columns:repeat(5,1fr)"],
  div[style*="grid-template-columns: repeat(auto-fill, minmax("],
  div[style*="grid-template-columns: repeat(auto-fit, minmax("],
  .ds-card-inner-grid,
  .bento-grid,
  .usecases-grid,
  .datafields-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Bento Spanning Wide Cards Reset */
  div[style*="grid-column: span 2"],
  div[style*="grid-column:span 2"],
  div[style*="grid-column: span 3"] {
    grid-column: span 1 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Proof Bar (4 Columns -> 2 Columns) */
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns:repeat(4, 1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem 0.75rem !important;
  }

  /* Hero Form Card Full Width & Clean Mobile Padding */
  .tb-hero-form-card,
  .hb-hero-form-card,
  .ib-hero-form-card,
  .gb-hero-form-card,
  .rb-hero-form-card,
  .dh-hero-form-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem 1.15rem !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
  }

  .tb-hero-form-card h3,
  .hb-hero-form-card h3,
  .ib-hero-form-card h3,
  .gb-hero-form-card h3,
  .rb-hero-form-card h3,
  .dh-hero-form-card h3 {
    font-size: 1.25rem !important;
  }

  /* SAMPLE DATA PREVIEW TABLES - TOUCH SCROLL WRAPPER & PROPER TABLE DISPLAY */
  .table-responsive,
  .tb-table-wrap,
  .hb-table-wrap,
  .ib-table-wrap,
  .gb-table-wrap,
  .rb-table-wrap,
  .mg-table-wrapper,
  div[style*="overflow-x: auto"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px !important;
    margin-bottom: 1.5rem !important;
    border: 1px solid #E2E8F0 !important;
  }

  .tb-table,
  .hb-table,
  .ib-table,
  .gb-table,
  .rb-table,
  .mg-spec-table,
  table {
    display: table !important;
    width: 100% !important;
    min-width: 640px !important;
    border-collapse: collapse !important;
  }

  .tb-table th, .tb-table td,
  .hb-table th, .hb-table td,
  .ib-table th, .ib-table td,
  .gb-table th, .gb-table td,
  .rb-table th, .rb-table td,
  .mg-spec-table th, .mg-spec-table td,
  table th, table td {
    white-space: nowrap !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.85rem !important;
  }

  /* Hero Title Responsive Typography */
  .hero-title,
  h1.hero-title,
  .tb-hero h1,
  .hb-hero h1,
  .ib-hero h1,
  .gb-hero h1,
  .rb-hero h1,
  .dh-hero h1 {
    font-size: clamp(1.6rem, 5.5vw, 2.2rem) !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }
}

/* 3. Small Mobile Devices (<= 480px) */
@media (max-width: 480px) {

  .container,
  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Proof Bar (1 Column on Small Phones) */
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns:repeat(4, 1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  /* Form Card Compact Mobile Padding */
  .tb-hero-form-card,
  .hb-hero-form-card,
  .ib-hero-form-card,
  .gb-hero-form-card,
  .rb-hero-form-card,
  .dh-hero-form-card {
    padding: 1.25rem 0.85rem !important;
  }

  .tb-form-group input,
  .tb-form-group textarea,
  .tb-hero-form-card input,
  .tb-hero-form-card textarea,
  form input,
  form textarea {
    font-size: 0.88rem !important;
    padding: 0.7rem 0.8rem !important;
  }

  .btn-form-submit {
    font-size: 0.88rem !important;
    padding: 0.85rem !important;
  }

  /* Full Width CTA Buttons */
  .btn-mg-primary,
  .btn-mg-outline,
  .btn-hero-primary,
  .btn-hero-ghost {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 0.85rem 1rem !important;
  }
}



/* ==========================================================================
   COMPREHENSIVE DATA FIELDS INCLUDED - MOBILE RESPONSIVE ENGINE
   ========================================================================== */

@media (max-width: 991px) {
  /* 5-Column Data Fields Grid -> 2 Columns on Tablet */
  div[style*="grid-template-columns: repeat(5, 1fr)"],
  div[style*="grid-template-columns:repeat(5, 1fr)"],
  div[style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.15rem !important;
  }
}

@media (max-width: 768px) {
  /* 5-Column Data Fields Grid -> 1 Column on Mobile Phones */
  div[style*="grid-template-columns: repeat(5, 1fr)"],
  div[style*="grid-template-columns:repeat(5, 1fr)"],
  div[style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Individual Data Field Cards */
  div[style*="grid-template-columns: repeat(5, 1fr)"] > div,
  div[style*="grid-template-columns:repeat(5,1fr)"] > div {
    padding: 1.15rem 1rem !important;
    border-radius: 14px !important;
  }

  /* Blue Trust Banner (grid-column: span 4) -> span 1 col on mobile */
  div[style*="grid-column: span 4"],
  div[style*="grid-column:span 4"],
  div[style*="grid-column: span 3"],
  div[style*="grid-column:span 3"],
  div[style*="grid-column: 1 / -1"] {
    grid-column: span 1 !important;
    flex-direction: column !important;
    text-align: center !important;
    padding: 1.5rem 1.15rem !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Inner Flex Container inside Blue Trust Banner */
  div[style*="grid-column: span 4"] > div[style*="display: flex"],
  div[style*="grid-column:span 4"] > div[style*="display: flex"],
  div[style*="grid-column: span 3"] > div[style*="display: flex"] {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
  }

  /* SVG Laptop Image inside Blue Trust Banner */
  div[style*="grid-column: span 4"] img,
  div[style*="grid-column:span 4"] img,
  div[style*="grid-column: span 3"] img {
    width: 100px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
}



/* ==========================================================================
   HOMEPAGE REDESIGN (home-redesign.php) - RESPONSIVE ENGINE
   ========================================================================== */

@media (max-width: 991px) {
  .hr-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .hr-value-grid,
  .hr-faq-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .hr-pillars-grid,
  .hr-ledger {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
  .hr-process-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  .hr-apps-grid,
  .hr-support-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
}

@media (max-width: 768px) {
  .hr-engage-grid,
  .hr-pillars-grid,
  .hr-process-grid,
  .hr-apps-grid,
  .hr-support-grid,
  .hr-ledger {
    grid-template-columns: 1fr !important;
    gap: 1.15rem !important;
  }

  .hr-vc-row {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  .hr-vc-lbl {
    display: inline-block !important;
    width: fit-content !important;
  }

  .hr-hero h1 {
    font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
  }
  .hr-model-card {
    padding: 1.75rem 1.25rem !important;
  }
  .btn-hr-yellow,
  .btn-hr-ghost {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}



/* ==========================================================================
   SASTIK THEME SAAS HOMEPAGE REDESIGN (home-redesign.php) - RESPONSIVE ENGINE
   ========================================================================== */

@media (max-width: 1024px) {
  .sk-hero-cards-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
  }
  .sk-bento-row-1 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
  .sk-bento-row-2 {
    grid-template-columns: 1fr !important;
  }
  .sk-feature-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .sk-faq-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .sk-cta-banner {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    padding: 2.5rem 1.75rem !important;
  }
}

@media (max-width: 768px) {
  .sk-hero-cards-row,
  .sk-bento-row-1,
  .sk-bento-row-2-inner,
  .sk-support-row {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .sk-hero-title {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
  }
  .sk-section-title,
  .sk-faq-left h2,
  .sk-cta-banner h2 {
    font-size: clamp(1.75rem, 5.5vw, 2.2rem) !important;
  }
  .sk-support-pill {
    padding: 1.25rem 1rem !important;
  }
  .btn-aura {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}