/* ==========================================================================
   FIB IT SOLUTIONS - DEDICATED MOBILE & TABLET STYLESHEET
   Desktop Layout (>= 1024px) is 100% LOCKED & UNTOUCHED.
   All rules below apply strictly to Viewports <= 991px, <= 768px, and <= 480px.
   ========================================================================== */

/* Strictly Hide All Mobile Drawer & Toggle Elements on Desktop */
.mobile-menu-toggle,
.mobile-drawer-overlay,
.mobile-drawer {
  display: none !important;
}

/* ==========================================================================
   1. TABLET & MOBILE GLOBAL NAVIGATION (<= 991px)
   ========================================================================== */
@media (max-width: 991px) {

  /* Global Body & Container Safe Guards */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  body.mobile-drawer-open {
    overflow: hidden !important;
  }

  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Top Bar Adjustments */
  .top-bar {
    padding: 8px 0 !important;
  }

  .top-bar .container {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 16px !important;
  }

  .top-bar-social {
    display: none !important; /* Conceal on small tablets/mobile to keep top bar uncluttered */
  }

  .top-bar-right {
    width: 100% !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  .top-bar-item {
    font-size: 12px !important;
  }

  /* Sticky Header Group & Header Wrap */
  .sticky-header-group {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #ffffff !important;
  }

  .header-wrap {
    top: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    padding: 10px 16px !important;
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
  }

  .logo {
    gap: 10px !important;
  }

  .logo img {
    height: 36px !important;
  }

  .brand-line-1 {
    font-size: 15px !important;
  }

  .brand-line-2 {
    font-size: 8.5px !important;
    letter-spacing: 2px !important;
  }

  /* Hide Desktop Nav & CTA Button */
  .main-nav {
    display: none !important;
  }

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

  /* Animated Hamburger Menu Button */
  .mobile-menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 40px !important;
    height: 40px !important;
    padding: 10px 8px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    z-index: 1001 !important;
    transition: all 0.25s ease !important;
  }

  .mobile-menu-toggle:hover,
  .mobile-menu-toggle:active {
    background: #e2e8f0 !important;
  }

  .hamburger-bar {
    display: block !important;
    width: 100% !important;
    height: 2.5px !important;
    background-color: #0f172a !important;
    border-radius: 2px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: center !important;
  }

  /* Hamburger Active Animation (Turns into X) */
  .mobile-menu-toggle.active .hamburger-bar:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg) !important;
  }

  .mobile-menu-toggle.active .hamburger-bar:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }

  .mobile-menu-toggle.active .hamburger-bar:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg) !important;
  }

  /* Off-Canvas Mobile Drawer Overlay */
  .mobile-drawer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease !important;
    z-index: 9998 !important;
  }

  .mobile-drawer-overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Off-Canvas Mobile Drawer Panel */
  .mobile-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(88vw, 380px) !important;
    background: #ffffff !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2) !important;
    transform: translateX(100%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: hidden !important;
  }

  .mobile-drawer.open {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  .mobile-drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #f8fafc !important;
  }

  .mobile-drawer-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
  }

  .mobile-drawer-logo img {
    height: 32px !important;
  }

  .mobile-drawer-close {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .mobile-drawer-close:hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;
  }

  .mobile-drawer-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .mobile-nav-accordion {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .mobile-nav-item {
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  .mobile-nav-header-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 12px !important;
    background: transparent !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    text-align: left !important;
    border-radius: 8px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
  }

  .mobile-nav-header-btn:hover,
  .mobile-nav-item.active .mobile-nav-header-btn {
    background: #f1f5f9 !important;
    color: var(--primary-blue, #0052cc) !important;
  }

  .mobile-chevron {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .mobile-nav-item.active .mobile-chevron {
    transform: rotate(180deg) !important;
  }

  .mobile-nav-submenu {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    margin: 0 4px 6px 4px !important;
  }

  .mobile-nav-item.active .mobile-nav-submenu {
    max-height: 400px !important;
    padding: 8px 0 !important;
  }

  .mobile-nav-submenu a {
    display: block !important;
    padding: 10px 16px 10px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    text-decoration: none !important;
    border-left: 2px solid transparent !important;
    transition: all 0.2s ease !important;
  }

  .mobile-nav-submenu a:hover {
    color: var(--primary-blue, #0052cc) !important;
    border-left-color: var(--primary-blue, #0052cc) !important;
    background: #f1f5f9 !important;
    padding-left: 28px !important;
  }

  .mobile-nav-single-link {
    display: block !important;
    padding: 14px 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
  }

  .mobile-nav-single-link:hover {
    background: #f1f5f9 !important;
    color: var(--primary-blue, #0052cc) !important;
  }

  .mobile-drawer-footer {
    padding: 16px 20px !important;
    border-top: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .mobile-drawer-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 14px !important;
    background: var(--primary-blue, #0052cc) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.25) !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
  }

  .mobile-drawer-cta:active {
    transform: scale(0.98) !important;
  }

  .mobile-quick-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .quick-action-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    text-decoration: none !important;
    background: #f8fafc !important;
    transition: all 0.2s ease !important;
  }

  .quick-action-btn.whatsapp-btn {
    background: #25d366 !important;
    border-color: #25d366 !important;
    color: #ffffff !important;
  }

  /* Microsoft 365 Apps Showcase (<= 991px) */
  #m365-apps [style*="display: flex; gap: 24px; flex-wrap: wrap"] {
    flex-direction: column !important;
    gap: 20px !important;
  }

  #m365-apps [style*="background: #464775"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 36px 28px !important;
  }

  #m365-apps [style*="grid-template-columns: repeat(2, 1fr)"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Footer on Tablets (<= 991px) */
  .footer-grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important;
  }
}

/* ==========================================================================
   2. MOBILE BREAKPOINT OVERRIDES (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {

  /* Universal Typography Fluid Scaling */
  h1, .hero-title, .inner-hero-title {
    font-size: clamp(1.85rem, 6.5vw, 2.5rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
  }

  h2, .section-title {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
    line-height: 1.3 !important;
  }

  h3, .card-title {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }

  p, .hero-subtitle, .lead-text {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  /* Universal Section Padding & Spacing */
  section, .section, [style*="padding: 100px"], [style*="padding: 80px"], [style*="padding: 90px"], [style*="padding: 120px 0"] {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  /* Decorative Background Glows (Prevent Overflow) */
  [style*="radial-gradient"][style*="position:absolute"],
  [style*="radial-gradient"][style*="position: absolute"] {
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Giant Watermark Numbers */
  [style*="font-size: 12rem"],
  [style*="font-size: 14rem"] {
    display: none !important;
  }

  /* Universal Horizontal Process Lines */
  [style*="position: absolute; top: 35px; left: 10%; right: 10%"],
  [style*="position: absolute; top: 35px; left: 5%; right: 5%"],
  [style*="position: absolute; top: 52px; left: 0; right: 0"] {
    display: none !important;
  }

  /* Universal Flex Item Overrides (Prevent min-width overflows) */
  [style*="min-width: 500px"],
  [style*="min-width: 450px"],
  [style*="min-width: 420px"],
  [style*="min-width: 400px"],
  [style*="min-width: 380px"],
  [style*="min-width: 350px"],
  [style*="min-width: 320px"],
  [style*="min-width: 300px"],
  [style*="min-width: 280px"],
  [style*="min-width: 250px"],
  [style*="min-width: 800px"],
  [style*="flex: 1 1 500px"],
  [style*="flex: 1 1 450px"],
  [style*="flex: 1 1 400px"] {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  /* Universal Grid System Overrides (Convert Multi-Col into 1-Col) */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.5fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(450px, 1fr))"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Asymmetric Collage Grids with rows */
  [style*="grid-template-rows"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
    min-height: unset !important;
  }

  [style*="grid-template-rows"] > [style*="grid-column"] {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    height: 220px !important;
  }

  /* Overlapping Image Wrappers in Body Content ONLY (Excluding Hero Sections) */
  div[style*="min-width: 420px"][style*="position: relative"],
  div[style*="flex: 1 1 500px"][style*="position: relative"],
  div[style*="min-height: 500px"][style*="position: relative"],
  div[style*="height: 560px"][style*="position: relative"]:not(section) {
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  div[style*="min-width: 420px"][style*="position: relative"] > [style*="position: absolute"],
  div[style*="flex: 1 1 500px"][style*="position: relative"] > [style*="position: absolute"],
  div[style*="min-height: 500px"][style*="position: relative"] > [style*="position: absolute"],
  div[style*="height: 560px"][style*="position: relative"]:not(section) > [style*="position: absolute"] {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Universal Gap Overrides */
  [style*="gap: 60px"],
  [style*="gap: 50px"],
  [style*="gap: 40px"] {
    gap: 24px !important;
  }

  /* Universal Fixed Heights on Visuals (excluding hero banners) */
  div[style*="height: 600px"],
  div[style*="height: 560px"],
  div[style*="height: 520px"]:not(.page-hero-container):not(section),
  div[style*="height: 500px"],
  div[style*="height: 450px"],
  div[style*="height: 420px"],
  div[style*="height: 400px"],
  figure[style*="height: 520px"],
  figure[style*="height: 450px"] {
    height: auto !important;
    min-height: 240px !important;
    max-height: 380px !important;
  }

  /* ------------------------------------------------------------------------
     A. SUBPAGE CINEMATIC HERO BANNER MOBILE RULES
     ------------------------------------------------------------------------ */
  section[style*="height: 520px"],
  section[style*="height: 600px"],
  section[style*="position: relative; height: 520px"],
  .page-hero-banner {
    min-height: 500px !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    overflow: hidden !important;
    position: relative !important;
    background-color: #0f172a !important;
  }

  section[style*="height: 520px"] > img,
  section[style*="height: 600px"] > img,
  section[style*="position: relative; height: 520px"] > img,
  .page-hero-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 1 !important;
    display: block !important;
    opacity: 0.55 !important;
  }

  section[style*="height: 520px"] > div[style*="linear-gradient"],
  section[style*="height: 600px"] > div[style*="linear-gradient"],
  section[style*="height: 520px"] > div[style*="background:"],
  section[style*="height: 520px"] > div[style*="background :"],
  section[style*="position: relative; height: 520px"] > div:not(.container),
  .page-hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.82) 55%, rgba(15, 23, 42, 0.95) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    display: block !important;
  }

  section[style*="height: 520px"] > .container,
  section[style*="height: 600px"] > .container,
  section[style*="position: relative; height: 520px"] > .container,
  .page-hero-container {
    position: relative !important;
    z-index: 3 !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding-top: 105px !important;
    padding-bottom: 50px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  section[style*="height: 520px"] > .container > div,
  section[style*="height: 600px"] > .container > div,
  section[style*="position: relative; height: 520px"] > .container > div,
  .page-hero-content {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  section[style*="height: 520px"] h1,
  section[style*="height: 600px"] h1,
  .page-hero-content h1 {
    font-size: clamp(1.85rem, 6.5vw, 2.35rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
    color: #ffffff !important;
  }

  section[style*="height: 520px"] p,
  section[style*="height: 600px"] p,
  .page-hero-content p {
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  section[style*="height: 520px"] div[style*="display: flex; gap"],
  section[style*="height: 520px"] div[style*="display:flex; gap"],
  section[style*="height: 520px"] div[style*="display: flex;gap"],
  .page-hero-btn-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  section[style*="height: 520px"] div[style*="display: flex; gap"] a,
  section[style*="height: 520px"] div[style*="display:flex; gap"] a,
  section[style*="height: 520px"] div[style*="display: flex;gap"] a,
  .page-hero-btn-group a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
  }

  /* ------------------------------------------------------------------------
     B. HOMEPAGE SPECIFIC MOBILE RULES
     ------------------------------------------------------------------------ */
  .hero-slider {
    height: auto !important;
    min-height: 520px !important;
    max-height: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .slide {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
  }

  .slide-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 0 !important;
  }

  .slide-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.78) 55%, rgba(15,23,42,0.9) 100%) !important;
    z-index: 1 !important;
  }

  .hero-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 100% !important;
    padding: 105px 20px 50px 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    transform: none !important;
  }

  .hero-title {
    font-size: clamp(1.85rem, 6.5vw, 2.35rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
  }

  .hero-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
  }

  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .btn-hero {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
  }

  /* Intro Section */
  .intro-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .intro-visual {
    height: auto !important;
    min-height: 240px !important;
  }

  /* About 3D Section & Badges - Safe Mobile Positioning */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .about-visual-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .about-visual-wrap img {
    width: 100% !important;
    height: auto !important;
    border-radius: 16px !important;
  }

  .mbadge-review,
  .mbadge-growth,
  .pill-tags {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    margin-top: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  }

  /* Services Grid & Mega Cards */
  .services-grid,
  .capabilities-grid,
  .why-choose-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .service-mega-card {
    padding: 24px !important;
  }

  /* Testimonials Slider */
  .testimonials-grid,
  .testi-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .testi-left {
    width: 100% !important;
    text-align: center !important;
  }

  .testi-right {
    width: 100% !important;
    overflow-x: auto !important;
    display: flex !important;
    gap: 16px !important;
    padding-bottom: 12px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .testi-card {
    width: calc(100vw - 64px) !important;
    min-width: calc(100vw - 64px) !important;
    max-width: 100% !important;
    scroll-snap-align: center !important;
    padding: 20px !important;
    margin-right: 0 !important;
  }

  .testi-nav-bottom {
    display: flex !important;
    justify-content: center !important;
    margin-top: 16px !important;
  }

  /* FAQ Accordion */
  .faq-question-new {
    padding: 16px !important;
    font-size: 15px !important;
  }

  .faq-answer-new {
    padding: 0 16px !important;
    font-size: 14px !important;
  }

  .faq-item-new.active .faq-answer-new {
    padding-bottom: 16px !important;
  }

  /* Marquee Partners */
  .partners-section {
    padding: 30px 0 !important;
  }

  .partner-item img {
    height: 32px !important;
    max-width: 110px !important;
  }

  /* ------------------------------------------------------------------------
     B. INNER PAGES & SERVICE HERO BANNERS
     ------------------------------------------------------------------------ */
  .inner-hero,
  [style*="background: linear-gradient"][style*="padding: 120px"],
  [style*="background: linear-gradient"][style*="padding: 100px"],
  [style*="background: linear-gradient"][style*="padding: 140px"] {
    padding-top: 110px !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
  }

  /* Two-column split rows on inner pages */
  [style*="display: flex"][style*="gap: 60px"],
  [style*="display: flex"][style*="gap: 50px"],
  [style*="display: flex"][style*="gap: 40px"] {
    flex-direction: column !important;
  }

  /* Reverse column ordering on mobile if requested */
  [style*="flex-direction: row-reverse"] {
    flex-direction: column !important;
  }

  /* Comparison Tables & Architecture Diagrams */
  table, .table-wrap, .comparison-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  table th, table td {
    padding: 10px 12px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* SLA & Metric Counter Grids */
  .stats-grid,
  [style*="display: grid"][style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="display: grid"][style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ------------------------------------------------------------------------
     C. RTO & RPO TIMELINE & METRICS VISUAL (disaster-recovery.html)
     ------------------------------------------------------------------------ */
  #rto-rpo {
    padding: 60px 0 !important;
  }

  #rto-rpo [style*="padding: 50px 60px"],
  #rto-rpo [style*="padding: 50px"] {
    padding: 24px 16px !important;
    margin-bottom: 32px !important;
    border-radius: 16px !important;
  }

  #rto-rpo [style*="display: flex; align-items: center; margin-bottom: 16px"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-bottom: 0 !important;
  }

  #rto-rpo [style*="text-align: center; flex-shrink: 0"] {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
    text-align: left !important;
  }

  #rto-rpo [style*="text-align: center; flex-shrink: 0"] > div[style*="width: 48px"] {
    margin: 0 !important;
    flex-shrink: 0 !important;
    width: 42px !important;
    height: 42px !important;
  }

  #rto-rpo [style*="text-align: center; flex-shrink: 0"] > p {
    font-size: 0.95rem !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
  }

  #rto-rpo [style*="flex: 1; position: relative; margin: 0 12px"] {
    width: auto !important;
    margin: 0 0 0 20px !important;
    padding: 8px 12px 8px 24px !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    border-left: 3px dashed #cbd5e1 !important;
  }

  #rto-rpo [style*="flex: 1; position: relative; margin: 0 12px"] > div[style*="height: 4px"] {
    display: none !important;
  }

  #rto-rpo [style*="position: absolute; top: -32px"] {
    position: static !important;
    text-align: left !important;
  }

  #rto-rpo [style*="position: absolute; top: -32px"] span {
    display: inline-block !important;
    font-size: 0.82rem !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
  }

  #rto-rpo [style*="text-align: center; margin-top: 10px"] {
    text-align: left !important;
    margin-top: 2px !important;
  }

  #rto-rpo [style*="text-align: center; margin-top: 10px"] p {
    font-size: 0.85rem !important;
    color: #64748b !important;
    margin: 0 !important;
  }

  #rto-rpo [style*="padding: 40px"] {
    padding: 24px 20px !important;
    border-radius: 14px !important;
  }

  /* ------------------------------------------------------------------------
     D. MULTI-STEP PROCESS HORIZONTAL CONTAINERS (All Subpages)
     ------------------------------------------------------------------------ */
  div[style*="overflow-x: auto"][style*="display: flex"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
  }

  div[style*="overflow-x: auto"][style*="display: flex"] > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  div[style*="overflow-x: auto"][style*="display: flex"] [style*="margin: 0 auto 30px"],
  div[style*="overflow-x: auto"][style*="display: flex"] [style*="margin: 2px auto 32px"] {
    margin: 0 0 16px 0 !important;
  }

  /* ------------------------------------------------------------------------
     E. MICROSOFT 365 APPS SHOWCASE & SUBPAGE GRIDS (microsoft-365.html)
     ------------------------------------------------------------------------ */
  #m365-apps {
    padding: 50px 0 !important;
  }

  #m365-apps [style*="display: flex; gap: 24px; flex-wrap: wrap"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* Left Featured Teams Card */
  #m365-apps [style*="background: #464775"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    padding: 28px 20px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  #m365-apps [style*="background: #464775"] > div[style*="width: 64px"] {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }

  #m365-apps [style*="background: #464775"] > div[style*="width: 64px"] svg {
    width: 24px !important;
    height: 24px !important;
  }

  #m365-apps [style*="background: #464775"] h3 {
    font-size: 1.5rem !important;
    margin-bottom: 8px !important;
    line-height: 1.25 !important;
  }

  #m365-apps [style*="background: #464775"] p {
    font-size: 0.95rem !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
  }

  #m365-apps [style*="background: #464775"] ul {
    gap: 10px !important;
  }

  #m365-apps [style*="background: #464775"] ul li {
    font-size: 0.9rem !important;
    gap: 8px !important;
  }

  /* Right Side App Grid (SharePoint, Exchange, OneDrive, Defender, Power Platform) */
  #m365-apps [style*="grid-template-columns: repeat(2, 1fr)"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  #m365-apps [style*="grid-template-columns: repeat(2, 1fr)"] > div {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px 16px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  #m365-apps [style*="grid-template-columns: repeat(2, 1fr)"] > div > div:first-child {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  #m365-apps [style*="grid-template-columns: repeat(2, 1fr)"] > div > div:first-child svg {
    width: 20px !important;
    height: 20px !important;
  }

  #m365-apps [style*="grid-template-columns: repeat(2, 1fr)"] h4 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }

  #m365-apps [style*="grid-template-columns: repeat(2, 1fr)"] p {
    font-size: 0.86rem !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.45 !important;
  }

  /* Microsoft 365 Plan Comparison Table & "Most Popular" Badge (<= 768px) */
  #m365-plans {
    padding: 60px 0 !important;
  }

  #m365-plans .m365-table-wrap,
  #m365-plans [style*="overflow-x: auto"] {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: 24px !important;
    padding-bottom: 16px !important;
    margin-top: 0 !important;
  }

  #m365-plans table {
    display: table !important;
    width: 100% !important;
    min-width: 680px !important;
  }

  #m365-plans th {
    padding: 16px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  #m365-plans th[style*="background: #0f172a"],
  #m365-plans th:nth-child(3) {
    position: relative !important;
    padding-top: 28px !important;
    padding-bottom: 16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    background: #0f172a !important;
    color: #ffffff !important;
  }

  #m365-plans .m365-popular-badge,
  #m365-plans span[style*="Most Popular"] {
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--primary-blue) !important;
    color: #ffffff !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
    line-height: 1.3 !important;
    z-index: 10 !important;
    display: inline-block !important;
  }

  #m365-plans td {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }

  /* ------------------------------------------------------------------------
     F. FOOTER RESPONSIVE OVERHAUL (<= 768px)
     ------------------------------------------------------------------------ */
  .footer-grid-5 {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .footer-col {
    padding-bottom: 10px !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .footer-col:last-child {
    border-bottom: none !important;
  }

  .footer-heading-new {
    font-size: 16px !important;
    margin-bottom: 14px !important;
    color: #0f172a !important;
  }

  .footer-links-new li {
    margin-bottom: 10px !important;
  }

  .footer-links-new a {
    font-size: 14px !important;
  }

  .footer-social-bar .container {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }

  .footer-bottom-flex {
    flex-direction: column-reverse !important;
    gap: 16px !important;
    text-align: center !important;
    align-items: center !important;
  }

  /* ------------------------------------------------------------------------
     G. SERVER & DATA CENTER PAGE RESPONSIVE OVERHAUL (server-data-center.html)
     ------------------------------------------------------------------------ */
  /* S1. Hero */
  #sdc-hero {
    height: auto !important;
    min-height: 480px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  #sdc-hero img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
  }

  #sdc-hero > div[style*="position: absolute; inset: 0; background"] {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.78) 55%, rgba(15,23,42,0.9) 100%) !important;
    z-index: 1 !important;
  }

  #sdc-hero > .container {
    position: relative !important;
    z-index: 2 !important;
    padding-top: 105px !important;
    padding-bottom: 50px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #sdc-hero h1 {
    font-size: clamp(1.85rem, 6.5vw, 2.35rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
    color: #ffffff !important;
  }

  #sdc-hero p {
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  #sdc-hero div[style*="display: flex; gap: 14px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #sdc-hero div[style*="display: flex; gap: 14px"] a {
    width: 100% !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
  }

  /* S2. Overview */
  #sdc-overview {
    padding: 50px 0 !important;
    overflow: hidden !important;
  }

  #sdc-overview > .container {
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
  }

  #sdc-overview .sdc-overview-text {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
  }

  #sdc-overview .sdc-overview-text h2 {
    font-size: clamp(1.75rem, 5.5vw, 2.2rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
  }

  #sdc-overview .sdc-overview-text p {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    margin-bottom: 16px !important;
  }

  #sdc-overview .sdc-overview-text div[style*="grid-template-columns: 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 20px !important;
  }

  #sdc-overview .sdc-overview-text div[style*="background: #f8fafc; padding: 20px"] {
    padding: 14px 10px !important;
    border-radius: 10px !important;
  }

  #sdc-overview .sdc-overview-text div[style*="font-size: 2rem"] {
    font-size: 1.5rem !important;
  }

  #sdc-overview .sdc-overview-text div[style*="font-size: 0.85rem"] {
    font-size: 0.72rem !important;
    letter-spacing: 0.5px !important;
  }

  #sdc-overview .sdc-overview-images {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
    min-height: 300px !important;
    height: auto !important;
    position: relative !important;
    margin-top: 10px !important;
    display: block !important;
    overflow: visible !important;
  }

  #sdc-overview .sdc-overview-images img:nth-child(1) {
    width: 68% !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    transform: rotate(2deg) !important;
    border: 4px solid #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
    aspect-ratio: 4/3 !important;
  }

  #sdc-overview .sdc-overview-images img:nth-child(2) {
    width: 68% !important;
    position: absolute !important;
    top: 60px !important;
    left: 0 !important;
    transform: rotate(-2deg) !important;
    border: 4px solid #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
    aspect-ratio: 4/3 !important;
  }

  #sdc-overview .sdc-engineer-badge {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    margin-top: 250px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }

  /* S3. Services Bento Mosaic */
  #sdc-services {
    padding: 50px 0 !important;
  }

  #sdc-services h2 {
    font-size: clamp(1.75rem, 5.5vw, 2.2rem) !important;
    margin-bottom: 12px !important;
    line-height: 1.25 !important;
  }

  #sdc-services p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  #sdc-services .sdc-bento-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  #sdc-services .sdc-bento-large {
    grid-row: auto !important;
    min-height: 320px !important;
    padding: 24px 20px !important;
    border-radius: 14px !important;
  }

  #sdc-services .sdc-bento-large h3 {
    font-size: 1.45rem !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
  }

  #sdc-services .sdc-bento-large p {
    font-size: 0.9rem !important;
    margin-bottom: 18px !important;
  }

  #sdc-services .sdc-bento-large ul li {
    font-size: 0.88rem !important;
  }

  #sdc-services .sdc-bento-grid > div:not(.sdc-bento-large):not(.sdc-bento-wide) {
    padding: 20px 18px !important;
    border-radius: 12px !important;
  }

  #sdc-services .sdc-bento-grid h4 {
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
  }

  #sdc-services .sdc-bento-grid p {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
  }

  #sdc-services .sdc-bento-wide {
    grid-column: auto !important;
    padding: 20px 18px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  /* S4. Benefits */
  #sdc-benefits {
    padding: 50px 0 !important;
  }

  #sdc-benefits .sdc-benefits-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
  }

  #sdc-benefits .sdc-benefits-text {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
  }

  #sdc-benefits h2 {
    font-size: clamp(1.75rem, 5.5vw, 2.2rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 24px !important;
  }

  #sdc-benefits .sdc-benefits-image {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
    height: 250px !important;
  }

  #sdc-benefits .sdc-benefits-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  /* S5. Vertical Accordion */
  #sdc-accordion {
    padding: 50px 0 !important;
  }

  #sdc-accordion h2 {
    font-size: clamp(1.75rem, 5.5vw, 2.2rem) !important;
    margin-bottom: 30px !important;
    text-align: center !important;
  }

  #sdc-accordion .sdc-accordion-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  #sdc-accordion .sdc-accordion-image {
    width: 100% !important;
    flex-shrink: 1 !important;
  }

  #sdc-accordion .sdc-accordion-image img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  #sdc-accordion .sdc-accordion-list {
    width: 100% !important;
    gap: 12px !important;
  }

  #sdc-accordion .sdc-accordion-list > div > div:first-child {
    padding: 16px 14px !important;
    gap: 12px !important;
  }

  #sdc-accordion .sdc-accordion-list > div > div:first-child > div {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
  }

  #sdc-accordion .sdc-accordion-list h3 {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
  }

  #sdc-accordion .sdc-accordion-list > div > div:last-child {
    padding: 0 16px 16px 16px !important;
  }

  #sdc-accordion .sdc-accordion-list ul {
    padding-left: 18px !important;
  }

  #sdc-accordion .sdc-accordion-list ul li {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
  }

  /* S6. Process 4-Step Diagonal Steps */
  #sdc-process {
    padding: 50px 0 !important;
  }

  #sdc-process h2 {
    font-size: clamp(1.75rem, 5.5vw, 2.2rem) !important;
    margin-bottom: 30px !important;
  }

  #sdc-process .sdc-process-timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    position: relative !important;
    padding-left: 0 !important;
  }

  #sdc-process .sdc-process-line {
    left: 24px !important;
    top: 24px !important;
    bottom: 24px !important;
  }

  #sdc-process .sdc-process-step {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #sdc-process .sdc-process-step > div:first-child {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 1.2rem !important;
    margin-top: 4px !important;
  }

  #sdc-process .sdc-process-step > div:last-child {
    padding: 18px 16px !important;
    border-radius: 12px !important;
    flex-grow: 1 !important;
    width: auto !important;
  }

  #sdc-process .sdc-process-step h4 {
    font-size: 1.1rem !important;
    margin-bottom: 6px !important;
  }

  #sdc-process .sdc-process-step p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }

  /* S7. Service Models / Tiers */
  #sdc-tiers {
    padding: 50px 0 !important;
  }

  #sdc-tiers h2 {
    font-size: clamp(1.75rem, 5.5vw, 2.2rem) !important;
    margin-bottom: 30px !important;
  }

  #sdc-tiers .sdc-tiers-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  #sdc-tiers .sdc-tiers-grid > div {
    padding: 28px 20px !important;
    border-radius: 16px !important;
  }

  #sdc-tiers .sdc-tier-featured {
    transform: none !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    border-width: 2px !important;
  }

  #sdc-tiers .sdc-tier-featured > span {
    top: -12px !important;
    font-size: 0.7rem !important;
    padding: 4px 14px !important;
  }

  #sdc-tiers .sdc-tier-featured > div:last-of-type {
    padding: 20px 16px !important;
  }

  #sdc-tiers h3 {
    font-size: 1.5rem !important;
    margin-bottom: 10px !important;
  }

  #sdc-tiers p {
    font-size: 0.9rem !important;
    margin-bottom: 18px !important;
  }

  #sdc-tiers ul {
    margin-bottom: 24px !important;
    gap: 12px !important;
  }

  #sdc-tiers ul li span {
    font-size: 0.9rem !important;
  }

  #sdc-tiers a {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* S8. High Availability & Disaster Recovery */
  #sdc-ha {
    padding: 50px 0 !important;
  }

  #sdc-ha .sdc-ha-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
  }

  #sdc-ha .sdc-ha-text {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
  }

  #sdc-ha h2 {
    font-size: clamp(1.75rem, 5.5vw, 2.2rem) !important;
    margin-bottom: 16px !important;
  }

  #sdc-ha p {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
  }

  #sdc-ha .sdc-ha-flow {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
  }

  #sdc-ha .sdc-ha-flow > div:first-child {
    padding: 24px 18px !important;
    max-width: 100% !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  #sdc-ha .sdc-ha-flow > div:first-child > div[style*="border: 1px solid"] {
    padding: 12px 14px !important;
    gap: 12px !important;
  }

  #sdc-ha .sdc-ha-flow > div:first-child svg {
    width: 24px !important;
    height: 24px !important;
  }

  #sdc-ha .sdc-ha-flow > div:first-child > div[style*="border: 1px solid"] div {
    font-size: 0.95rem !important;
  }

  /* S9. Technology Partners */
  #sdc-partners {
    padding: 40px 0 !important;
  }

  #sdc-partners .sdc-partners-list {
    gap: 20px 24px !important;
  }

  #sdc-partners .sdc-partners-list > div {
    font-size: 1.15rem !important;
  }

  /* S10. The FIB IT Advantage */
  #sdc-advantage {
    padding: 50px 0 !important;
  }

  #sdc-advantage h2 {
    font-size: clamp(1.75rem, 5.5vw, 2.2rem) !important;
    margin-bottom: 30px !important;
  }

  #sdc-advantage .sdc-advantage-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  #sdc-advantage .sdc-advantage-grid > div {
    padding: 24px 18px !important;
    border-radius: 12px !important;
  }

  #sdc-advantage .sdc-advantage-grid h4 {
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
  }

  #sdc-advantage .sdc-advantage-grid p {
    font-size: 0.88rem !important;
  }

  /* S11. FAQ */
  #sdc-faq {
    padding: 50px 0 !important;
  }

  #sdc-faq h2 {
    font-size: clamp(1.75rem, 5.5vw, 2.2rem) !important;
    margin-bottom: 30px !important;
  }

  #sdc-faq [style*="padding: 24px; cursor: pointer"] {
    padding: 16px 16px !important;
    font-size: 0.98rem !important;
    line-height: 1.4 !important;
  }

  #sdc-faq [style*="padding: 0 24px 24px"] {
    padding: 0 16px 16px !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
  }

  /* S12. CTA */
  #sdc-cta {
    padding: 60px 0 !important;
  }

  #sdc-cta h2 {
    font-size: clamp(1.85rem, 6vw, 2.3rem) !important;
    margin-bottom: 14px !important;
    line-height: 1.25 !important;
  }

  #sdc-cta p {
    font-size: 0.98rem !important;
    margin-bottom: 28px !important;
    line-height: 1.6 !important;
  }

  #sdc-cta .sdc-cta-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #sdc-cta .sdc-cta-buttons a {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* ------------------------------------------------------------------------
     H. CYBER SECURITY RESPONSIVE OVERHAUL (cyber-security.html)
     ------------------------------------------------------------------------ */
  /* Cyber Defence Hub (Section 4: Why FIB IT Solutions) */
  #cs-hub {
    padding: 30px 0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  #cs-hub h2 {
    font-size: 1.5rem !important;
    margin-bottom: 14px !important;
    line-height: 1.25 !important;
  }

  /* Exact Desktop 3-Column Layout, Scaled Down */
  #cs-hub .cs-hub-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 260px !important;
    gap: 4px !important;
    padding: 10px 0 20px 0 !important; /* Added bottom padding */
    position: relative !important;
    overflow: hidden !important;
  }

  /* Restore SVG Connecting Lines */
  #cs-hub .cs-hub-svg {
    display: block !important;
    position: absolute !important;
    pointer-events: none !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    min-width: 0 !important;
  }

  #cs-hub .cs-hub-svg path {
    stroke-width: 2 !important; /* Slightly thicker lines for visibility */
  }

  /* Left & Right Columns */
  #cs-hub .cs-hub-col {
    width: calc(33.33% - 4px) !important;
    max-width: calc(33.33% - 4px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Remove any pseudo-element vertical connector lines */
  #cs-hub .cs-hub-left::before,
  #cs-hub .cs-hub-right::before,
  #cs-hub .cs-hub-col > div::before,
  #cs-hub .cs-hub-col > div::after,
  #cs-hub .cs-hub-center::before,
  #cs-hub .cs-hub-center::after {
    display: none !important;
  }

  /* Capability Cards - Perfect Fit */
  #cs-hub .cs-hub-col > div {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 4px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important; /* Stack vertically for narrow width */
    align-items: center !important;
    justify-content: center !important; /* Perfectly center the content to remove empty space */
    text-align: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
  }

  /* Icon Container */
  #cs-hub .cs-hub-col > div > div:first-child {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  #cs-hub .cs-hub-col > div > div:first-child svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Text Container */
  #cs-hub .cs-hub-col > div > div:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  #cs-hub .cs-hub-col > div h4 {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.1 !important;
  }

  #cs-hub .cs-hub-col > div p {
    font-size: 0.55rem !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }

  /* Central Cyber Defence Hub */
  #cs-hub .cs-hub-center {
    width: calc(33.33% - 4px) !important;
    max-width: calc(33.33% - 4px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 8px 4px !important;
    border-radius: 12px !important;
    margin: 0 !important;
    order: 0 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 8px 20px rgba(0, 92, 185, 0.08) !important;
    position: relative !important;
    z-index: 5 !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important; /* PERFECT VERTICAL CENTERING TO FIX EMPTY SPACE */
    align-self: stretch !important;
  }

  #cs-hub .cs-hub-center > div:first-child {
    width: 100% !important;
    height: 90px !important; /* Make sure this is tall enough */
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  #cs-hub .cs-hub-center > div:first-child > div {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    bottom: 4px !important;
    left: 4px !important;
    position: absolute !important;
    background: var(--primary-blue) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #cs-hub .cs-hub-center > div:first-child > div svg {
    width: 12px !important;
    height: 12px !important;
  }

  #cs-hub .cs-hub-center h3 {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin-bottom: 4px !important;
    text-align: center !important;
    line-height: 1.1 !important;
  }

  #cs-hub .cs-hub-center p {
    font-size: 0.55rem !important;
    color: #64748b !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }

  /* Tags */
  #cs-hub .cs-hub-tags {
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 20px !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 5 !important;
  }

  #cs-hub .cs-hub-tags span {
    font-size: 0.65rem !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
  }

  /* Delivery Flow Methodology (Section 5) */
  #cs-flow {
    padding: 50px 0 !important;
    background: #f8fafc !important;
  }

  #cs-flow h2 {
    font-size: clamp(1.75rem, 5.5vw, 2.2rem) !important;
    margin-bottom: 14px !important;
    line-height: 1.25 !important;
  }

  #cs-flow .cs-flow-container {
    position: relative !important;
    padding-top: 10px !important;
  }

  #cs-flow .cs-flow-line {
    display: none !important;
  }

  #cs-flow .cs-flow-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    counter-reset: step-counter !important;
  }

  #cs-flow .cs-flow-step {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 18px 18px 18px 16px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Vertical Flow Connector Tube between step cards */
  #cs-flow .cs-flow-step:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    bottom: -20px !important;
    left: 41px !important;
    width: 3px !important;
    height: 20px !important;
    background: linear-gradient(180deg, var(--primary-blue) 0%, #38bdf8 100%) !important;
    z-index: 4 !important;
  }

  /* Flow Junction Pulse Dot on top of step cards */
  #cs-flow .cs-flow-step:not(:first-child)::before {
    content: '' !important;
    position: absolute !important;
    top: -4px !important;
    left: 38px !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: var(--primary-blue) !important;
    border: 2px solid #ffffff !important;
    z-index: 5 !important;
    box-shadow: 0 0 6px rgba(0, 92, 185, 0.5) !important;
  }

  #cs-flow .cs-flow-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 14px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    background: #eff6ff !important;
    border: 2px solid #bfdbfe !important;
    box-shadow: 0 4px 12px rgba(0, 92, 185, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 3 !important;
  }

  #cs-flow .cs-flow-icon svg {
    width: 24px !important;
    height: 24px !important;
    stroke: var(--primary-blue) !important;
  }

  #cs-flow .cs-flow-step > div:last-child {
    flex: 1 !important;
    min-width: 0 !important;
  }

  #cs-flow .cs-flow-step h4 {
    font-size: 1.15rem !important;
    margin-bottom: 6px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  #cs-flow .cs-flow-step h4::before {
    content: "STEP 0" counter(step-counter) " • PHASE" !important;
    counter-increment: step-counter !important;
    color: var(--primary-blue) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
  }

  #cs-flow .cs-flow-step p {
    font-size: 0.88rem !important;
    color: #64748b !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   3. SMALL MOBILE BREAKPOINT (<= 480px)
   ========================================================================== */
@media (max-width: 480px) {

  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .header-wrap {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 8px 14px !important;
  }

  .logo img {
    height: 30px !important;
  }

  .brand-line-1 {
    font-size: 13.5px !important;
  }

  .brand-line-2 {
    font-size: 7.5px !important;
    letter-spacing: 1.5px !important;
  }

  .mobile-menu-toggle {
    width: 36px !important;
    height: 36px !important;
    padding: 8px 6px !important;
  }

  .hero-title,
  .page-hero-content h1,
  .slide-content h1 {
    font-size: 1.7rem !important;
    line-height: 1.25 !important;
  }

  .page-hero-container {
    padding-top: 95px !important;
    padding-bottom: 36px !important;
  }

  .service-mega-card {
    padding: 18px !important;
  }

  .quick-action-btn {
    font-size: 12px !important;
    padding: 8px !important;
  }

  /* Microsoft 365 Apps Showcase (<= 480px) */
  #m365-apps [style*="background: #464775"] {
    padding: 22px 16px !important;
  }

  #m365-apps [style*="grid-template-columns: repeat(2, 1fr)"] > div {
    padding: 14px 14px !important;
    gap: 12px !important;
  }

  /* Server & Data Center (<= 480px) */
  #sdc-overview .sdc-engineer-badge {
    margin-top: 235px !important;
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  #sdc-services .sdc-bento-large {
    min-height: 280px !important;
    padding: 20px 16px !important;
  }

  #sdc-process .sdc-process-step > div:last-child {
    padding: 14px 12px !important;
  }

  /* Cyber Security Defence Hub (<= 480px) */
  #cs-hub .cs-hub-col > div {
    padding: 6px !important;
    gap: 4px !important;
  }

  #cs-hub .cs-hub-center > div:first-child {
    height: 60px !important;
  }

  /* Cyber Security Delivery Flow (<= 480px) */
  #cs-flow .cs-flow-step {
    padding: 16px 14px !important;
    gap: 12px !important;
  }

  #cs-flow .cs-flow-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
  }

  #cs-flow .cs-flow-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  #cs-flow .cs-flow-step:not(:last-child)::after {
    left: 35px !important;
  }

  #cs-flow .cs-flow-step:not(:first-child)::before {
    left: 32px !important;
  }

  /* ==========================================================================
     IT Infrastructure - Mobile Layout Fixes
     ========================================================================== */
  .infra-img-container {
    min-width: 100% !important;
    height: clamp(450px, 100vw, 750px) !important;
    margin-top: 20px !important;
    margin-bottom: 110px !important;
  }
  
  .infra-img-1 {
    width: 80% !important;
    top: 0 !important;
    left: 0 !important;
  }
  
  .infra-img-2 {
    width: 75% !important;
    bottom: 0 !important;
    right: 0 !important;
  }
  
  .infra-fluke-btn {
    top: auto !important;
    bottom: -90px !important;
    left: 0 !important;
    transform: scale(0.85) !important;
    transform-origin: left center !important;
  }
  
  /* ==========================================================================
     CCTV & ELV - Timeline Mobile Fix
     ========================================================================== */
  .cctv-timeline {
    margin-left: 30px !important;
  }
}

@media (max-width: 991px) {
  /* ==========================================================================
     AI SOLUTIONS - COMPLETE MOBILE REBUILD
     ========================================================================== */
  /* 1. HERO SECTION */
  .ai-hero-title {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
  }
  section[style*="height: 520px"] > .container > div[style*="max-width: 650px"] {
    max-width: 100% !important;
  }
  .ai-hero-buttons {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .ai-hero-buttons a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* 2. OVERVIEW / FLOATING CARD SECTION */
  .ai-overview-container {
    height: unset !important;
    min-height: max-content !important;
    display: block !important;
  }
  .ai-overview-container img {
    height: auto !important;
    width: 100% !important;
    display: block !important;
    object-fit: contain !important;
  }
  .ai-overview-container > div[style*="absolute; inset: 0"] {
    display: none !important;
  }
  .ai-overview-card {
    display: none !important;
  }

  /* 3 & 4. 4-COLUMN GRIDS */
  .ai-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* 5. SECTION HEADERS */
  .ai-phase-header {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: flex-start !important;
  }
  .ai-phase-header > div {
    max-width: 100% !important;
  }
  .ai-phase-header a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .ai-section-title {
    font-size: clamp(2rem, 6vw, 2.5rem) !important;
  }

  /* 6 & 7. PHASE CONTENT GRIDS */
  .ai-phase-grid-wrap {
    flex-direction: column !important;
  }
  .ai-phase-grid-wrap > div {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 8. TIMELINE HEADER */
  .ai-timeline-header {
    margin-bottom: 40px !important;
  }

  /* 9. OUTCOMES HEADER */
  .ai-outcomes-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
  }

  /* 10. FINAL CTA */
  .ai-final-cta-section h2 {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
  }
  .ai-final-cta-wrap {
    flex-direction: column !important;
    gap: 40px !important;
  }
  .ai-final-cta-buttons {
    flex-direction: column !important;
    width: 100% !important;
  }
  .ai-final-cta-buttons a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* 11. OVERVIEW IMAGE FIX (handled above) */

  /* 12. BUSINESS TRANSFORMATION — fix left padding gap */
  .ai-biztra-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* 13. BUSINESS TRANSFORMATION — collapse 3-col grid to 1 col */
  .ai-biztra-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-bottom: 32px !important;
  }

  /* 14. BUSINESS TRANSFORMATION — CTA strip fix */
  .ai-biztra-cta {
    flex-direction: column !important;
    padding: 36px 24px !important;
    gap: 28px !important;
    border-radius: 16px !important;
  }
  .ai-biztra-cta > div:first-child {
    min-width: 0 !important;
    width: 100% !important;
  }
  .ai-biztra-cta h3 {
    font-size: 1.4rem !important;
  }
  .ai-biztra-cta > div:last-child {
    width: 100% !important;
    align-items: stretch !important;
  }
  .ai-biztra-cta a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    padding: 16px 20px !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
  }
  .ai-biztra-cta p {
    text-align: center !important;
  }

  /* ==========================================================================
     WEB DEVELOPMENT SEO PAGE - Mobile Fixes
     ========================================================================== */
  .wd-roi-row {
    flex-direction: column !important;
    text-align: center !important;
    padding: 30px 0 !important;
  }
  .wd-roi-icon {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  .wd-roi-text {
    padding-left: 0 !important;
  }

  .wd-tech-grid {
    gap: 8px !important;
  }
  .wd-tech-btn {
    height: 32px !important;
    padding: 2px 10px 2px 2px !important;
    gap: 6px !important;
    border-radius: 16px !important;
  }
  .wd-tech-icon {
    width: 28px !important;
    height: 28px !important;
  }
  .wd-tech-btn span {
    font-size: 0.75rem !important;
  }

  /* ==========================================================================
     WEB AND EMAIL HOSTING PAGE - Mobile Fixes
     ========================================================================== */
  /* Section 2: Metrics */
  .weh-metrics-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    justify-content: space-between !important;
    align-items: stretch !important;
  }
  .weh-metric-col {
    flex: 1 1 0% !important;
    width: 33.33% !important;
    min-width: 0 !important;
    max-width: 33.33% !important;
    border-right: 1px solid #e2e8f0 !important;
    border-bottom: none !important;
    padding: 0 2px !important;
    box-sizing: border-box !important;
  }
  .weh-metric-col:last-child {
    border-right: none !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  .weh-metric-num {
    font-size: 1.45rem !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
  }
  .weh-metric-num span {
    font-size: 0.85rem !important;
  }
  .weh-metric-col h4 {
    font-size: 0.78rem !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
  }
  .weh-metric-col p {
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
    padding: 0 !important;
  }

  /* Section 9: Domain Lifecycle */
  .weh-domain-wrap {
    flex-direction: column !important;
    align-items: center !important;
    gap: 30px !important;
  }
  .weh-domain-line {
    display: none !important;
  }
  .weh-domain-step {
    padding: 0 !important;
  }

  /* Section 14: CTA */
  .weh-cta-wrap {
    flex-direction: column !important;
  }
  .weh-cta-btn {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}