/* Responsive Header Height Adjustments */
@media screen and (max-width: 991.98px) {
  html:root {
    --dynamic-header-height: 110px; /* Tablet: 65px navbar + 45px toolbar */
    --header-toolbar-combined-height: 95px; /* Reduced for tablet */
  }
}

@media screen and (max-width: 767.98px) {
  html:root {
    --dynamic-header-height: 55px; /* Mobile: much reduced height */
    --header-toolbar-combined-height: 45px; /* Much further reduced for mobile */
  }
}

/*=====================================
  RESPONSIVE DESIGN SYSTEM
  Mobile-First Approach - TrustedBuild
  Created: 2025-01-01
  Purpose: Organized and maintainable responsive styles
=====================================*/

/*=====================================
  CSS CUSTOM PROPERTIES FOR BREAKPOINTS
=====================================*/
:root {
  /* Standard Bootstrap-like Breakpoints */
  --breakpoint-xs: 0px; /* Extra Small: 0-576px */
  --breakpoint-sm: 577px; /* Small: 577px-767px */
  --breakpoint-md: 768px; /* Medium: 768px-991px */
  --breakpoint-lg: 992px; /* Large: 992px-1199px */
  --breakpoint-xl: 1200px; /* Extra Large: 1200px-1399px */
  --breakpoint-xxl: 1400px; /* Extra Extra Large: 1400px+ */

  /* Special Breakpoints for Edge Cases */
  --breakpoint-xs-max: 486px; /* Very Small Mobile - unified breakpoint */
  --breakpoint-tiny: 391px; /* Tiny Mobile */

  /* Tiny Screen Toolbar Custom Properties */
  --toolbar-tiny-btn-font-size: 10px;
  --toolbar-tiny-btn-padding: 5px 8px;
  --toolbar-tiny-btn-border-radius: 35px;
  --toolbar-tiny-btn-letter-spacing: 0.01em;

  /* Enhanced button sizing for primary actions */
  --toolbar-primary-btn-font-size: 13px;
  --toolbar-primary-btn-padding: 8px 14px;
  --toolbar-primary-btn-min-width: 80px;
  --toolbar-primary-btn-max-width: 110px;
  --toolbar-primary-btn-font-weight: 600;

  /* Emergency text styling */
  --toolbar-emergency-font-size: 9px;
  --toolbar-emergency-padding: 4px 8px;
  --toolbar-emergency-border-radius: 15px;
  --toolbar-emergency-icon-size: 9px;
  --toolbar-emergency-star-size: 8px;

  /* Hero Section Responsive Padding - Mobile-First */
  --hero-padding-xs: 30px; /* Extra Small Mobile (≤575.98px) */
  --hero-padding-sm: 40px; /* Small Tablets (576px-767.98px) */
  --hero-padding-md: 45px; /* Tablets (768px-991.98px) */
  --hero-padding-lg: 20px; /* Desktop (992px-1199.98px) */
  --hero-padding-xl: 24px; /* Large Desktop (1200px-1399.98px) */
  --hero-padding-xxl: 28px; /* Ultra-Wide (≥1400px) */

  /* Emergency Container Responsive Padding */
  --emergency-padding-xs: 4px; /* Extra Small Mobile */
  --emergency-padding-sm: 8px; /* Small Tablets */
  --emergency-padding-md: 16px; /* Tablets */
  --emergency-padding-lg: 20px; /* Desktop */
  --emergency-padding-xl: 24px; /* Large Desktop */
  --emergency-padding-xxl: 28px; /* Ultra-Wide */

  /* Postcode Form Responsive Padding */
  --form-padding-xs: 40px 16px; /* Extra Small Mobile - Increased top/bottom padding */
  --form-padding-sm: 12px 8px; /* Small Tablets */
  --form-padding-md: 28px 24px; /* Tablets */
  --form-padding-lg: 30px 28px; /* Desktop */
  --form-padding-xl: 32px 30px; /* Large Desktop */
  --form-padding-xxl: 36px 32px; /* Ultra-Wide */

  /* Postcode Input Responsive Padding */
  --input-padding-xs: 0.4rem 0.3rem; /* Extra Small Mobile */
  --input-padding-sm: 0.5rem 0.4rem; /* Small Tablets */
  --input-padding-md: 0.75rem; /* Tablets */
  --input-padding-lg: 0.75rem; /* Desktop */
  --input-padding-xl: 0.75rem; /* Large Desktop */
  --input-padding-xxl: 0.75rem; /* Ultra-Wide */

  /* Responsive Width Percentages */
  --width-mobile: 96%; /* Mobile devices */
  --width-tablet: 95%; /* Small tablets */
  --width-desktop: auto; /* Desktop and larger */

  /* Sticky Call Button Variables */
  --sticky-btn-bottom-desktop: 15px;
  --sticky-btn-bottom-mobile: 15px;
  --sticky-btn-font-size-desktop: 20px;
  --sticky-btn-font-size-mobile: 16px;
}

/*=====================================
  MOBILE-FIRST RESPONSIVE STYLES
  Base styles are mobile-first, then enhanced for larger screens
=====================================*/

/*=====================================
  EXTRA SMALL (0px - 575.98px)
  Base mobile styles
  Note: Bootstrap 5 standard breakpoint (xs)
  Uses 575.98px to prevent 1px gap with sm breakpoint (576px)
=====================================*/
@media screen and (max-width: 575.98px) {
  /* Typography adjustments for very small screens */
  body {
    font-size: 0.9rem;
  }

  /* Reduce gap between Hero and Process section on mobile */
  .process-section {
    padding-top: var(--section-gap-mobile) !important;
  }

  /* Map section adjustments for very small screens */
  .london-map-subtitle {
    font-size: 0.9rem;
  }

  .london-map-container {
    min-height: 380px;
  }

  #map-canvas {
    height: 380px;
  }

  /* Responsive layout for smaller screens */
  .london-map-layout .london-map-container {
    min-height: 380px;
  }

  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.3rem;
  }

  /* Hero section adjustments */
  .hero-section-text {
    text-align: center;
    padding: 1rem;
  }

  .hero-section-text .custom-form {
    width: 100%;
    max-width: 100%;
  }

  .hero-section-text .custom-form .form-control,
  .hero-section-text .custom-form .custom-select {
    font-size: 1rem;
    padding: 0.75rem;
  }

  .hero-section-text .custom-form .get-quote-btn {
    width: 100%;
    min-height: 52px;
    font-size: 1rem;
  }

  /*=====================================
    TOOLBAR RESPONSIVE BEHAVIOR
    Call Now button is hidden in d-none d-lg-flex (hidden < 992px)
    Emergency item replaces logo when Call Now is hidden
  =====================================*/

  /* Toolbar adjustments for mobile */
  .toolbar-btn {
    min-width: 80px;
    font-size: 0.85rem;
    padding: 5px 10px;
  }

  /* Emergency text adjustments for mobile */
  .toolbar-section #toolbar-quote-text {
    font-size: 0.8rem;
    padding: 4px 8px;
  }

  /* Add separator when emergency replaces logo group */
  #toolbar-quote-text {
    margin-left: auto;
    padding-left: 12px;
    border-left: 1px solid var(--bs-secondary);
  }

  #toolbar-quote-text .bi {
    font-size: 12px;
  }

  /* When Call Now button is hidden (< 992px), emergency takes logo group position */
  .toolbar-content {
    justify-content: space-between;
    gap: 12px;
  }

  /* Emergency text takes position where logo group should be */
  #toolbar-quote-text {
    order: 2; /* Right side where logo group would be */
    margin-left: auto;
  }

  .toolbar-btn:not(#toolbar-call-btn) {
    order: 1;
  }

  /* Logo containers are hidden by Bootstrap d-none classes in these sizes:
     - toolbar-full-text: d-xxl-flex (only visible ≥ 1400px)
     - toolbar-compact-text: d-lg-flex d-xxl-none (visible 992px - 1399px)
     Both are hidden < 992px, so emergency takes their place */

  /* Services grid for mobile */
  .service-card {
    margin-bottom: 1.5rem;
  }

  /* Process section mobile adjustments */
  .process-step {
    text-align: center;
    margin-bottom: 1.5rem;
  }

  /* Process blocks mobile spacing */
  .process-block {
    margin-bottom: 1.5rem;
  }

  /* Process section mobile horizontal spacing */
  .process-section .full-width-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Services section mobile horizontal spacing */
  .services-section .full-width-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Footer section mobile horizontal spacing */
  .site-footer .full-width-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Footer adjustments */
  .footer-section {
    text-align: center;
  }

  .footer-section .social-links {
    justify-content: center;
    margin-top: 1rem;
  }
}

/*=====================================
  SMALL (576px - 767.98px)
  Small tablets and large phones
=====================================*/
@media screen and (min-width: 576px) and (max-width: 767.98px) {
  /* Enhanced typography for small screens */
  body {
    font-size: 0.95rem;
  }

  h1 {
    font-size: 2rem;
  }

  /* Hero section enhancements */
  .hero-section-text .custom-form {
    max-width: 500px;
    margin: 0 auto;
  }

  /* Map section adjustments for small tablets and large phones */
  .london-map-container {
    min-height: 390px;
  }

  #map-canvas {
    height: 390px;
  }

  .map-info-panel {
    padding: 16px;
  }

  /*=====================================
    TOOLBAR - SMALL SCREENS (576px - 767px)
    Call Now button still hidden, emergency maintains position
  =====================================*/

  /* Toolbar adjustments for small tablets */
  .toolbar-btn {
    min-width: 85px;
    font-size: 0.9rem;
    padding: 6px 12px;
  }

  /* Emergency text slight size increase */
  .toolbar-section #toolbar-quote-text {
    font-size: 0.85rem;
    padding: 6px 14px; /* Increased left padding for separator */
  }

  /* Add separator when emergency replaces logo group */
  #toolbar-quote-text {
    margin-left: auto;
    padding-left: 16px;
    border-left: 1px solid var(--bs-secondary);
  }

  /* Emergency maintains position where logo group would be */
  .toolbar-content {
    justify-content: space-between;
    align-items: center;
  }

  #toolbar-quote-text {
    order: 2; /* Right side where logo group would be */
    margin-left: auto;
  }

  .toolbar-btn:not(#toolbar-call-btn) {
    order: 1;
  }

  /* Logo group containers are still hidden in this size range */

  /* Responsive layout for smaller screens */
  .london-map-layout {
    flex-direction: column;
    gap: 20px;
  }

  .london-map-layout .london-map-container {
    min-height: 390px;
  }

  .london-map-layout .map-info-panel {
    flex: 1;
    margin-top: 16px;
  }

  /* Services grid - 2 columns on small tablets */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* Process steps - 2x2 grid */
  .process-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/*=====================================
  MEDIUM (768px - 991.98px)
  Tablets
=====================================*/
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  /* Base typography for tablets */
  body {
    font-size: 1rem;
  }

  /* Reduce gap between Hero and Process section on tablets */
  .process-section {
    padding-top: var(--section-gap-tablet) !important;
  }

  h1 {
    font-size: 2.2rem;
  }

  h2 {
    font-size: 1.8rem;
  }

  /*=====================================
    TOOLBAR - TABLET (768px - 991px)
    Call Now button STILL HIDDEN, emergency replaces logo
    This is the largest breakpoint where Call Now is hidden
  =====================================*/

  /* Toolbar adjustments for tablets */
  .toolbar-btn {
    min-width: 90px;
    font-size: 0.95rem;
    padding: 7px 14px;
  }

  /* Emergency text approaches desktop size */
  .toolbar-section #toolbar-quote-text {
    font-size: 0.9rem;
    padding: 8px 16px; /* Increased left padding for separator */
  }

  /* Add separator when emergency replaces logo group */
  #toolbar-quote-text {
    margin-left: auto;
    padding-left: 20px;
    border-left: 1px solid var(--bs-secondary);
  }

  /* Key: Emergency takes logo group's position on the right */
  .toolbar-content {
    justify-content: space-between;
    align-items: center;
  }

  #toolbar-quote-text {
    order: 2; /* Right side where logo group should be */
    margin-left: auto;
  }

  .toolbar-btn:not(#toolbar-call-btn) {
    order: 1;
  }

  /* Both logo containers (full-text and compact-text) are still hidden in this range */

  /* Hero section tablet layout */
  .hero-section-text {
    max-width: 600px;
    margin: 0 auto;
  }

  /* Map section adjustments for tablets */
  .london-map-layout {
    flex-direction: column;
    gap: 20px;
  }

  .london-map-layout .london-map-container {
    min-height: 420px;
  }

  .london-map-layout .map-info-panel {
    flex: 1;
    margin-top: 16px;
  }

  /* Services grid - 3 columns */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  /* Process steps - 4 columns */
  .process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  /* Process section tablet horizontal spacing */
  .process-section .full-width-content {
    padding-left: 30px;
    padding-right: 30px;
  }

  /* Services section tablet horizontal spacing */
  .services-section .full-width-content {
    padding-left: 30px;
    padding-right: 30px;
  }

  /* Footer section tablet horizontal spacing */
  .site-footer .full-width-content {
    padding-left: 30px;
    padding-right: 30px;
  }

  /* Toolbar spacing */
  .toolbar-content {
    gap: 1.5rem;
  }
}

/*=====================================
  LARGE (992px - 1199.98px)
  Small desktops and laptops
  Call Now button is NOW VISIBLE (d-lg-flex)
=====================================*/
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
  /*=====================================
    TOOLBAR - DESKTOP (992px+)
    Call Now button is visible, normal layout restored
  =====================================*/

  /* Desktop layout - Call Now visible, compact logo appears on right */
  .toolbar-content {
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
  }

  /* Emergency returns to normal position at beginning - no separator */
  #toolbar-quote-text {
    order: 1;
    margin-left: 0;
    font-size: 1rem;
    padding: 10px 16px; /* Normal padding */
    border-left: none;
    border-start: none;
  }

  /* Call Now button is now visible */
  #toolbar-call-btn {
    order: 2;
    display: flex !important; /* Override any hidden styles */
  }

  /* Other buttons maintain normal order */
  #toolbar-consultation-btn {
    order: 3;
  }

  #toolbar-whatsapp-btn {
    order: 4;
  }

  /* Compact logo container appears on the right (992px - 1399px) */
  #toolbar-compact-text {
    order: 5;
    margin-left: auto;
    display: flex !important; /* d-lg-flex is active in this range */
  }

  /* Improve spacing in compact logo container for large desktop */
  #toolbar-compact-text .toolbar-compact-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Reduced gap for tighter spacing */
  }

  #toolbar-compact-text .toolbar-stars {
    margin: 0;
    padding: 0;
    line-height: 1; /* Tighten line height */
  }

  #toolbar-compact-text .toolbar-stars .bi-star-fill {
    font-size: 12px; /* Original star size */
  }

  /* Better alignment for compact version */
  #toolbar-compact-text {
    align-items: center;
  }

  /* Ensure logo has original size in desktop */
  #toolbar-compact-text .logo-toolbar-desktop {
    width: var(--logo-toolbar-width) !important;
    height: var(--logo-toolbar-height) !important;
  }

  /* Full logo container is still hidden until 1400px */

  /* Desktop typography */
  h1 {
    font-size: 2.5rem;
  }

  /* Enhanced hero section */
  .hero-section-text {
    max-width: 700px;
  }

  /*=====================================
    NAVIGATION - LAPTOP/Tablet OPTIMIZATION
    Ensure all menu items stay in single row
  =====================================*/

  /* Navigation container - prevent wrapping */
  .navbar-expand-lg .navbar-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
  }

  /* Navigation items - optimized for laptop/tablet screens */
  .navbar-expand-lg .navbar-nav .nav-item {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding: 15px 20px;
    font-size: 0.9rem;
    white-space: nowrap;
    text-align: center;
    min-width: auto;
  }

  /* Dropdown toggle - slightly more compact */
  .navbar-expand-lg .navbar-nav .dropdown-toggle {
    padding: 15px 18px;
  }

  /* Services grid - 4 columns */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  /* Process steps optimisation */
  .process-grid {
    gap: 2rem;
  }

  /* Toolbar desktop enhancements */
  .toolbar-btn {
    min-width: 100px;
  }

  /* Process section desktop horizontal spacing */
  .process-section .full-width-content {
    padding-left: 50px;
    padding-right: 50px;
  }

  /* Services section desktop horizontal spacing */
  .services-section .full-width-content {
    padding-left: 50px;
    padding-right: 50px;
  }

  /* Footer section desktop horizontal spacing */
  .site-footer .full-width-content {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/*=====================================
  EXTRA LARGE (1200px - 1399px)
  Desktops
  Call Now button is VISIBLE
=====================================*/
@media screen and (min-width: 1200px) and (max-width: 1399px) {
  /*=====================================
    TOOLBAR - LARGE DESKTOP (1200px+)
    Call Now visible, emergency in normal position
  =====================================*/

  /* Desktop layout - Call Now visible, compact logo appears on right */
  .toolbar-content {
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
  }

  #toolbar-quote-text {
    order: 1;
    margin-left: 0;
    padding: 10px 16px; /* Normal padding */
    border-left: none;
    border-start: none;
  }

  #toolbar-call-btn {
    order: 2;
    display: flex !important;
  }

  #toolbar-consultation-btn {
    order: 3;
  }

  #toolbar-whatsapp-btn {
    order: 4;
  }

  /* Compact logo container remains on the right in this range (1200px - 1399px) */
  #toolbar-compact-text {
    order: 5;
    margin-left: auto;
    display: flex !important; /* d-lg-flex d-xxl-none is active */
  }

  /* Improve spacing in compact logo container */
  #toolbar-compact-text .toolbar-compact-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Reduced gap for tighter spacing */
  }

  #toolbar-compact-text .toolbar-stars {
    margin: 0;
    padding: 0;
    line-height: 1; /* Tighten line height */
  }

  #toolbar-compact-text .toolbar-stars .bi-star-fill {
    font-size: 12px; /* Original star size */
  }

  /* Better alignment for compact version */
  #toolbar-compact-text {
    align-items: center;
  }

  /* Remove logo size restrictions - keep original size */

  /* Full logo container still hidden until 1400px */

  /* Ensure logo has original size in large desktop */
  #toolbar-compact-text .logo-toolbar-desktop {
    width: var(--logo-toolbar-width) !important;
    height: var(--logo-toolbar-height) !important;
  }

  /* Large desktop typography */
  h1 {
    font-size: 2.8rem;
  }

  /* Full hero section width */
  .hero-section-text {
    max-width: 800px;
  }

  /* Optimised spacing for large screens */
  .container {
    max-width: 1140px;
  }
}

/*=====================================
  EXTRA EXTRA LARGE (1400px+)
  Large desktops and wide screens
  Call Now button is VISIBLE
=====================================*/
@media screen and (min-width: 1400px) {
  /*=====================================
    TOOLBAR - ULTRA WIDE (1400px+)
    Call Now visible, full desktop layout
  =====================================*/

  /* Ultra-wide desktop layout - Call Now visible, full logo appears on right */
  .toolbar-content {
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
  }

  #toolbar-quote-text {
    order: 1;
    margin-left: 0;
    padding: 10px 16px; /* Normal padding */
    border-left: none;
    border-start: none;
  }

  #toolbar-call-btn {
    order: 2;
    display: flex !important;
  }

  #toolbar-consultation-btn {
    order: 3;
  }

  #toolbar-whatsapp-btn {
    order: 4;
  }

  /* Compact logo is hidden in this range (d-xxl-none) */
  #toolbar-compact-text {
    display: none !important;
  }

  /* Full logo container appears on the right (1400px+) */
  #toolbar-full-text {
    order: 5;
    margin-left: auto;
    display: flex !important; /* d-xxl-flex is active */
  }

  /* Reduce vertical spacing between text and stars in full logo */
  #toolbar-full-text .toolbar-service-text {
    display: flex;
    flex-direction: column;
    gap: 2px; /* Reduce gap between text and stars */
    justify-content: center; /* Center content vertically */
  }

  #toolbar-full-text .toolbar-service-text .text-dark {
    margin-bottom: 0; /* Remove bottom margin */
    line-height: 1.2; /* Tighten line height slightly */
  }

  #toolbar-full-text .toolbar-stars {
    margin-top: 0; /* Remove top margin */
    line-height: 1; /* Tighten line height for stars */
    transform: translateY(-1px); /* Move stars up slightly */
  }

  #toolbar-full-text .toolbar-stars .bi-star-fill {
    font-size: 12px; /* Original star size */
  }

  /* Better alignment between logo and text */
  #toolbar-full-text {
    align-items: center;
  }

  /* Ensure logo has original size in ultra-wide desktop */
  #toolbar-full-text .logo-toolbar-desktop {
    width: var(--logo-toolbar-width) !important;
    height: var(--logo-toolbar-height) !important;
  }

  /* Extra large typography */
  h1 {
    font-size: 3rem;
  }

  /* Full container width for extra large screens */
  .container {
    max-width: 1320px;
  }

  /* Enhanced spacing for wide screens */
  .hero-section-text {
    max-width: 900px;
  }

  /* Position hero scroll link within hero section boundaries to prevent overlap */
  .hero-btn {
    position: absolute !important;
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 10 !important; /* Ensure proper layering */
  }

  /* Ensure hero section has proper positioning context */
  .hero-section {
    position: relative !important;
    overflow: visible !important;
  }

  /* Prevent hero form from extending into scroll button area */
  .hero-form {
    max-height: calc(100% - 80px) !important; /* Account for scroll button */
    margin-bottom: 60px !important; /* Space for scroll button */
  }

  /* Process section large desktop horizontal spacing */
  .process-section .full-width-content {
    padding-left: 60px;
    padding-right: 60px;
  }

  /* Services section large desktop horizontal spacing */
  .services-section .full-width-content {
    padding-left: 60px;
    padding-right: 60px;
  }

  /* Footer section large desktop horizontal spacing */
  .site-footer .full-width-content {
    padding-left: 60px;
    padding-right: 60px;
  }
}

/*=====================================
  MOBILE TO TABLET (577px - 979px)
  Enhanced responsive behavior
=====================================*/
/*
  Custom breakpoint range (577px - 979px)
  Purpose: Bridge gap between small tablets and desktop
  Devices: Large tablets in portrait, small desktops
  Why this range: Optimizes for tablets and small desktops with specific layout adjustments
*/
@media screen and (min-width: 577px) and (max-width: 979px) {
  /* Service cards - compact mode for better space utilization */
  .service-card {
    text-align: center;
  }

  .service-card h3 {
    font-size: 1.1rem;
  }

  /* Map section adjustments */
  .london-map-section {
    padding: 3rem 0;
  }

  /* Form adjustments */
  .custom-form {
    max-width: 100%;
  }

  .custom-form .form-row {
    flex-direction: column;
  }

  .custom-form .form-group {
    margin-bottom: 1rem;
  }
}

/*=====================================
  TABLET TO DESKTOP (980px - 1199.98px)
  Standard mode for most tablets and small desktops
=====================================*/
@media screen and (min-width: 980px) and (max-width: 1199.98px) {
  /* Service cards - balanced layout */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Process steps - horizontal layout */
  .process-step {
    display: flex;
    align-items: flex-start;
    text-align: left;
  }

  .process-step .process-icon {
    margin-right: 1rem;
    margin-bottom: 0;
  }

  /* Map optimizations */
  .london-map-layout {
    gap: 2rem;
  }

  /* Contact form improvements */
  .custom-form .form-row {
    display: flex;
    gap: 1rem;
  }

  .custom-form .form-group {
    flex: 1;
  }
}

/*=====================================
  LARGE DESKTOP (1200px+)
  Full mode for large screens where everything fits comfortably
=====================================*/
@media screen and (min-width: 1200px) {
  /* Position hero scroll link within hero section boundaries to prevent overlap */
  .hero-btn {
    position: absolute !important;
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 10 !important; /* Ensure proper layering */
  }

  /* Ensure hero section has proper positioning context */
  .hero-section {
    position: relative !important;
    overflow: visible !important;
  }

  /* Prevent hero form from extending into scroll button area */
  .hero-form {
    max-height: calc(100% - 80px) !important; /* Account for scroll button */
    margin-bottom: 60px !important; /* Space for scroll button */
  }

  /* Large screen enhancements */
  .service-card {
    transition: transform 0.3s ease;
  }

  .service-card:hover {
    transform: translateY(-5px);
  }

  /* Process steps enhancements */
  .process-step {
    position: relative;
  }

  .process-step:hover .process-icon {
    transform: scale(1.1);
  }

  /* Map section full width */
  .london-map-container {
    height: 500px;
  }

  /* Form enhancements */
  .custom-form .get-quote-btn {
    transition: all 0.3s ease;
  }

  .custom-form .get-quote-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }
}

/*=====================================
  BOOTSTRAP-FIRST RESPONSIVE TOOLBAR
  Using Bootstrap 5 utilities and breakpoints
=====================================*/

/* Base toolbar styles - smooth transitions for layout changes */
.toolbar-section {
  transition: all 0.3s ease;
}

/* Smooth transitions for order changes */
.toolbar-content > * {
  transition: all 0.3s ease;
}

/* Emergency stars styling - Bootstrap compatible */
.toolbar-emergency-stars .bi-star-fill {
  width: 12px;
  height: 12px;
  font-size: 12px;
  color: #ffc107;
}

/* Mobile adjustments for emergency stars */
@media (max-width: 575.98px) {
  .toolbar-emergency-stars .bi-star-fill {
    width: 10px;
    height: 10px;
    font-size: 10px;
  }

  .toolbar-emergency-stars {
    display: flex;
    gap: 2px;
    align-items: center;
  }
}

/* Emergency Service Container - Simple Fixed Width */
#emergency-service-container {
  width: 450px; /* عرض ثابت بر اساس حالت باز شده */
  min-width: 280px; /* برای صفحات خیلی کوچک */
  max-width: 100%; /* در موبایل از صفحه بزرگتر نشود */
}

/* Responsive sizing */
@media (max-width: 575px) {
  #emergency-service-container {
    width: 320px;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  #emergency-service-container {
    width: 380px;
  }

  /* Fix star positioning on tablet sizes - prevent overlapping */
  .toolbar-stars {
    display: flex;
    gap: 2px;
    align-items: center;
  }

  .toolbar-emergency-stars {
    display: flex;
    gap: 2px;
    align-items: center;
  }
}

@media (min-width: 992px) {
  #emergency-service-container {
    width: 450px;
  }

  /* Fix star positioning on tablet sizes - prevent overlapping */
  .toolbar-stars {
    display: flex;
    gap: 2px;
    align-items: center;
  }
}

/* Padding classes should not override width */
.emergency-container-padding,
.emergency-container-padding-compact {
  /* inherit width from container */
}

/* Other inner elements should have normal width */
#emergency-service-container > div,
#emergency-service-container h5,
#emergency-service-container a,
.emergency-clock-icon {
  min-width: unset !important;
  width: auto !important;
  max-width: none !important;
}

/* Smooth height transitions for emergency container - NO width changes */
#emergency-service-container {
  transition: none !important;
}

/* Force no width transitions */
#emergency-service-container * {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter !important;
  transition-property: padding, margin !important;
}

/* Hero section text container - give it more width */
#hero-section-text {
  min-width: 500px !important;
  width: 100% !important;
}

/* Column override */
.col-lg-8:has(#emergency-service-container),
.col-12:has(#emergency-service-container) {
  min-width: 600px !important;
  width: auto !important;
  max-width: none !important;
}

/* Sticky call button responsive behavior - Using main styles from trustedbuild-template.css */
#sticky-call-btn {
  /* Responsive positioning for mobile - aligned with chat widget */
  bottom: var(--sticky-btn-bottom-mobile, 15px);
  left: 25px;
  right: auto;
  transform: none;
  min-width: 200px;
  width: auto;
  height: 52px;
  padding: 12px 16px;
  border-radius: 5px;
  font-size: var(--sticky-btn-font-size-mobile, 16px);
  font-weight: 700;
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

/* Fade animation classes */
#sticky-call-btn.fade-in {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

#sticky-call-btn.fade-out {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
}

/* Toolbar button sizing */
.toolbar-btn {
  min-width: 100px;
  text-align: center;
}

/* Pure Bootstrap responsive toolbar behavior */
/*
  Bootstrap 5 Breakpoints:
  - xs: <576px (mobile)
  - sm: 576px-767px (large mobile)
  - md: 768px-991px (tablet)
  - lg: 992px-1199px (small desktop)
  - xl: 1200px+ (desktop)
*/

/* Small devices (577px and up) - Large mobile */
@media (min-width: 577px) {
  .toolbar-content {
    justify-content: center;
    max-width: 100%;
  }
}

/* Medium devices (768px and up) - Tablet */
@media (min-width: 768px) {
  .toolbar-content {
    justify-content: center;
    max-width: 100%;
  }
}

/* Large devices (992px and up) - Desktop */
@media (min-width: 992px) {
  .toolbar-content {
    justify-content: flex-start;
    max-width: 100%;
  }
}

/* Extra large devices (1200px and up) - Large desktop */
@media (min-width: 1200px) {
  .toolbar-content {
    justify-content: flex-start;
    max-width: 100%;
  }
}

/* Emergency content structure */
.toolbar-emergency-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/*=====================================
  HERO SECTION RESPONSIVE IMPROVEMENTS
  Using Bootstrap 5 Standard Breakpoints
  Following project responsive design system standards
=====================================*/

/*=====================================
  EXTRA SMALL (0px - 575.98px)
  Standard Bootstrap mobile breakpoint (xs)
=====================================*/
@media screen and (max-width: 575.98px) {
  .hero-section-text {
    padding-top: 0px !important;
    padding-bottom: 1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-top: -265px !important; /* Further reduced spacing from top */
  }

  /* Reduce spacing for hero content elements */
  .hero-section-text .row:first-child {
    margin-top: -20px !important;
  }

  #emergency-service-container {
    margin-bottom: 14px;
    margin-top: -20px !important; /* Further reduced spacing from top */
    min-width: auto;
    max-width: var(--width-mobile);
    width: var(--width-mobile);
    margin-left: auto;
    margin-right: auto;
  }

  .hero-form {
    margin-bottom: 14px;
    min-width: auto;
    max-width: var(--width-mobile);
    width: var(--width-mobile);
    margin-left: auto;
    margin-right: auto;
  }

  /* Emergency container - ultra compact for mobile */
  .emergency-container-padding-compact {
    padding: var(--emergency-padding-xs) !important;
  }

  /* Postcode form - ultra compact for mobile */
  .hero-form {
    padding: var(--form-padding-xs) !important;
    padding-top: 0.75rem !important; /* Reduce top padding */
    padding-bottom: 0.75rem !important; /* Reduce bottom padding */
  }

  /* Postcode input - minimal padding for mobile */
  .postcode-input {
    padding: var(--input-padding-xs) !important;
    font-size: 0.9rem !important;
  }

  /* Emergency phone display - compact for mobile */
  .emergency-phone-display {
    font-size: 0.85rem !important;
    padding: 8px 18px !important;
    margin: 2px 0 !important;
  }

  .emergency-phone-display i {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.8rem !important;
  }

  .emergency-clock-icon {
    font-size: 1.1rem;
  }

  .service-info-box h5 {
    font-size: 0.9rem;
    margin-bottom: 6px;
  }

  .service-info-box p {
    font-size: 0.8rem;
    line-height: 1.2;
  }

  /* Map section for mobile devices */
  .london-map-section .london-map-layout {
    flex-direction: column;
    gap: 15px;
  }

  .london-map-section .london-map-layout .london-map-container {
    min-height: 300px;
  }

  .london-map-section .london-map-layout .map-info-panel {
    flex: 1;
    margin-top: 15px;
    padding: 12px;
  }
}

/*=====================================
  SMALL (576px - 767.98px)
  Standard Bootstrap small breakpoint (sm)
  Mobile landscape and small tablets
=====================================*/
@media screen and (min-width: 576px) and (max-width: 767.98px) {
  .hero-section-text {
    padding: var(--hero-padding-sm);
    margin-top: -30px !important; /* Further reduced spacing from top */
  }

  /* Reduce spacing for hero content elements */
  .hero-section-text .row:first-child {
    margin-top: -15px !important; /* Reduced negative margin to prevent form overlap */
  }

  #emergency-service-container {
    margin-bottom: 16px;
    margin-top: -25px !important; /* Further reduced spacing from top */
    min-width: auto;
    max-width: var(--width-tablet);
    width: var(--width-tablet);
    margin-left: auto;
    margin-right: auto;
  }

  .hero-form {
    padding: var(--form-padding-sm);
    padding-top: 1rem !important; /* Reduce top padding */
    padding-bottom: 1rem !important; /* Reduce bottom padding */
    margin-bottom: 16px;
    min-width: auto;
    max-width: var(--width-tablet);
    width: var(--width-tablet);
    margin-left: auto;
    margin-right: auto;
  }

  /* Emergency container - compact for small tablets */
  .emergency-container-padding-compact {
    padding: var(--emergency-padding-sm) !important;
  }

  /* Postcode input - comfortable padding for small tablets */
  .postcode-input {
    padding: var(--input-padding-sm) !important;
    font-size: 0.95rem !important;
  }

  .service-info-box h5 {
    font-size: 1rem;
  }

  .service-info-box p {
    font-size: 0.85rem;
  }
}

/* Tablet and larger - Apply consistent width constraints */
@media screen and (min-width: 768px) {
  .hero-section-text {
    padding: 18px;
    max-width: 100%;
  }

  #emergency-service-container,
  .hero-form {
    margin-left: auto;
    margin-right: auto;
  }

  .service-info-box h5 {
    font-size: 1.25rem;
  }

  .service-info-box p {
    font-size: 1rem;
  }
}

/* Tablet specific */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  #emergency-service-container {
    margin-bottom: 32px;
    min-width: 650px;
    max-width: 750px;
  }

  .hero-form {
    padding: 28px 24px;
    margin-bottom: 32px;
    min-width: 650px;
    max-width: 750px;
  }
}

/* Desktop specific */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
  .hero-section-text {
    padding: 20px;
  }

  #emergency-service-container {
    margin-bottom: 36px;
    min-width: 700px;
    max-width: 850px;
  }

  .hero-form {
    padding: 30px 28px;
    margin-bottom: 36px;
    min-width: 700px;
    max-width: 850px;
  }

  .service-info-box h5 {
    font-size: 1.3rem;
  }

  .service-info-box p {
    font-size: 1.05rem;
  }
}

/* Large desktop and ultra-wide */
@media screen and (min-width: 1200px) {
  .hero-section-text {
    padding: 24px;
  }

  #emergency-service-container {
    margin-bottom: 40px;
    min-width: 750px;
    max-width: 900px;
  }

  .hero-form {
    padding: 32px 30px;
    margin-bottom: 40px;
    min-width: 750px;
    max-width: 900px;
  }

  .service-info-box h5 {
    font-size: 1.35rem;
  }

  .service-info-box p {
    font-size: 1.1rem;
  }
}

/* Ultra-wide desktop enhancements */
@media screen and (min-width: 1400px) {
  .hero-section-text {
    padding: 28px;
  }

  #emergency-service-container {
    min-width: 800px;
    max-width: 950px;
  }

  .hero-form {
    padding: 36px 32px;
    min-width: 800px;
    max-width: 950px;
  }
}

/*=====================================
  VERY SMALL MOBILE (391px - 486px)
  Maximum compact layout for tiny screens
=====================================*/
@media screen and (max-width: 486px) {
  /*=====================================
    TOOLBAR - TINY SCREENS (≤486px)
    Maximum compactness, Call Now hidden
  =====================================*/

  .toolbar-section .toolbar-content {
    gap: 4px;
    padding: 6px 8px;
    flex-wrap: nowrap; /* Prevent wrapping */
    min-height: auto;
  }

  /* Base toolbar button styling using custom properties */
  .toolbar-section .toolbar-btn {
    font-size: var(--toolbar-tiny-btn-font-size);
    padding: var(--toolbar-tiny-btn-padding);
    min-width: auto;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: var(--toolbar-tiny-btn-border-radius);
    letter-spacing: var(--toolbar-tiny-btn-letter-spacing);
  }

  /* Enhanced primary action buttons (WhatsApp & Book) */
  .toolbar-section .toolbar-btn-primary {
    font-size: var(--toolbar-primary-btn-font-size);
    padding: var(--toolbar-primary-btn-padding);
    min-width: var(--toolbar-primary-btn-min-width);
    max-width: var(--toolbar-primary-btn-max-width);
    flex-shrink: 0;
    font-weight: var(--toolbar-primary-btn-font-weight);
  }

  .toolbar-section .toolbar-btn-primary .bi {
    font-size: 15px;
    margin-right: 5px;
  }

  .toolbar-btn .bi {
    margin-right: 4px;
    font-size: 14px;
  }

  /* Emergency text for tiny screens - ultra compact */
  .toolbar-section #toolbar-quote-text {
    font-size: var(--toolbar-emergency-font-size);
    padding: var(--toolbar-emergency-padding);
    min-width: auto;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: var(--toolbar-emergency-border-radius);
    padding-left: 8px;
    border-left: 1px solid var(--bs-secondary);
  }

  .toolbar-section #toolbar-quote-text .bi {
    margin-right: 1px;
    font-size: var(--toolbar-emergency-icon-size);
  }

  /* Emergency content compact styling */
  .toolbar-section
    #toolbar-quote-text
    .toolbar-emergency-content
    > div:first-child {
    font-size: var(--toolbar-emergency-font-size);
    white-space: nowrap;
    line-height: 1;
  }

  .toolbar-section
    #toolbar-quote-text
    .toolbar-emergency-content
    > div:first-child
    .bi {
    font-size: 10px;
    margin-right: 2px;
  }

  /* Stars compact sizing */
  .toolbar-section #toolbar-quote-text .toolbar-emergency-stars .bi-star-fill {
    font-size: var(--toolbar-emergency-star-size);
    width: var(--toolbar-emergency-star-size);
    height: var(--toolbar-emergency-star-size);
    margin: 0;
  }

  /* Emergency maintains right position where logo group would be */
  .toolbar-content {
    justify-content: space-between;
    overflow: hidden;
  }

  #toolbar-quote-text {
    order: 2; /* Right side where logo group would be */
    margin-left: auto;
  }

  .toolbar-btn:not(#toolbar-call-btn) {
    order: 1;
  }

  /* All logo containers are hidden in this tiny screen range */

  /* Adjust specific buttons for tiny screens */
  .toolbar-section #toolbar-quote-btn {
    font-size: 10px;
    padding: 5px 8px;
    min-width: auto;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 35px;
    letter-spacing: -0.5px;
    line-height: 1.2;
  }

  .toolbar-section #toolbar-quote-btn .bi {
    font-size: 12px;
    margin-right: 3px;
  }

  .toolbar-section #toolbar-call-btn {
    font-size: 10px;
    padding: 5px 8px;
    min-width: auto;
  }

  /* Hide the original call button in toolbar on tiny mobile - sticky call button handles this */
  .toolbar-section #toolbar-call-btn {
    display: none;
  }
}

/*=====================================
  NAVBAR RESPONSIVE SYSTEM
  Header brand and navigation layout
=====================================*/

/*=====================================
  TINY MOBILE (≤350px)
  Maximum compactness, minimal elements
=====================================*/
@media screen and (max-width: 350px) {
  /* Brand container - FORCE single line layout */
  .navbar-brand {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
  }

  /* Override Bootstrap flex behavior for brand items */
  .navbar-brand > * {
    flex-shrink: 0 !important;
  }

  /* Tagline - FORCE stay next to logo */
  .brand-tagline {
    white-space: nowrap !important;
    flex-shrink: 1 !important;
    align-self: flex-end !important;
    display: inline-block !important;
    vertical-align: bottom !important;
    margin-left: 8px !important;
    padding-bottom: 2px !important; /* Small adjustment for better alignment */
  }

  /* Logo - FORCE minimum size */
  .responsive-logo {
    flex-shrink: 0 !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  /* Override Bootstrap display classes */
  .navbar-brand .d-flex {
    display: inline-flex !important;
  }

  /* Force hide desktop tagline in mobile */
  #brand-tagline-fallback {
    display: none !important;
  }

  /* Force bottom alignment in mobile */
  .navbar-brand {
    align-items: flex-end !important;
  }

  #brand-tagline-mobile {
    align-self: flex-end !important;
    vertical-align: bottom !important;
    padding-bottom: 2px !important;
  }
}

/*=====================================
  SMALL MOBILE (≤420px)
  Slightly more space available
=====================================*/
@media screen and (max-width: 420px) {
  /* Brand container - FORCE single line layout */
  .navbar-brand {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
  }

  /* Override Bootstrap flex behavior for brand items */
  .navbar-brand > * {
    flex-shrink: 0 !important;
  }

  /* Tagline - FORCE stay next to logo */
  .brand-tagline {
    white-space: nowrap !important;
    flex-shrink: 1 !important;
    align-self: flex-end !important;
    display: inline-block !important;
    vertical-align: bottom !important;
    margin-left: 8px !important;
    padding-bottom: 2px !important; /* Small adjustment for better alignment */
  }

  /* Logo - FORCE stable size */
  .responsive-logo {
    flex-shrink: 0 !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  /* Override Bootstrap display classes */
  .navbar-brand .d-flex {
    display: inline-flex !important;
  }

  /* Force hide desktop tagline in mobile */
  #brand-tagline-fallback {
    display: none !important;
  }

  /* Force bottom alignment in mobile */
  .navbar-brand {
    align-items: flex-end !important;
  }

  #brand-tagline-mobile {
    align-self: flex-end !important;
    vertical-align: bottom !important;
    padding-bottom: 2px !important;
  }
}

/*=====================================
  MEDIUM MOBILE (≤575.98px)
  More comfortable space for tagline
=====================================*/
@media screen and (max-width: 575.98px) {
  /* Brand container - FORCE single line layout */
  .navbar-brand {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
  }

  /* Override Bootstrap flex behavior for brand items */
  .navbar-brand > * {
    flex-shrink: 0 !important;
  }

  /* Tagline - FORCE stay next to logo */
  .brand-tagline {
    white-space: nowrap !important;
    flex-shrink: 1 !important;
    align-self: center !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 10px !important;
  }

  /* Logo - FORCE standard mobile size */
  .responsive-logo {
    flex-shrink: 0 !important;
    min-width: var(--logo-width-mobile) !important;
    min-height: var(--logo-height-mobile) !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  /* Override Bootstrap display classes */
  .navbar-brand .d-flex {
    display: inline-flex !important;
  }

  /* Force hide desktop tagline in mobile */
  #brand-tagline-fallback {
    display: none !important;
  }

  /* Force bottom alignment in mobile */
  .navbar-brand {
    align-items: flex-end !important;
  }

  #brand-tagline-mobile {
    align-self: flex-end !important;
    vertical-align: bottom !important;
    padding-bottom: 2px !important;
  }
}

/*=====================================
  TABLET (768px - 991.98px)
  Tablet layout - hamburger menu still active
=====================================*/
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  /* Brand container - maintain single line */
  .navbar-brand {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    align-items: center !important;
  }

  /* Tagline - full width without truncation */
  .brand-tagline {
    white-space: nowrap !important;
    flex-shrink: 1;
    align-self: flex-end !important;
    vertical-align: bottom !important;
    padding-bottom: 2px !important;
  }

  /* Logo - larger tablet size */
  .responsive-logo {
    flex-shrink: 0;
    min-width: var(--logo-width-tablet) !important;
    min-height: var(--logo-height-tablet) !important;
  }
}

/*=====================================
  DESKTOP (≥992px)
  Full desktop navigation active
=====================================*/
@media screen and (min-width: 992px) {
  /* Position hero scroll link within hero section boundaries to prevent overlap */
  .hero-btn {
    position: absolute !important;
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 10 !important; /* Ensure proper layering */
  }

  /* Ensure hero section has proper positioning context */
  .hero-section {
    position: relative !important;
    overflow: visible !important;
  }

  /* Prevent hero form from extending into scroll button area */
  .hero-form {
    max-height: calc(100% - 80px) !important; /* Account for scroll button */
    margin-bottom: 60px !important; /* Space for scroll button */
  }

  /* Brand container - desktop layout */
  .navbar-brand {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    align-items: center !important;
  }

  /* Tagline - align with Title text when logo is hidden */
  .brand-tagline {
    white-space: nowrap !important;
    flex-shrink: 1;
  }

  /* Specific alignment for desktop tagline when logo is hidden */
  #brand-tagline-fallback {
    align-self: center !important;
    vertical-align: middle !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }

  /* Ensure Title spans are centered for proper tagline alignment */
  #header-title {
    align-self: center !important;
    vertical-align: middle !important;
  }

  /* Logo - desktop size */
  .responsive-logo {
    flex-shrink: 0;
    min-width: var(--logo-width-desktop) !important;
    min-height: var(--logo-height-desktop) !important;
  }
}

/*=====================================
  SIMPLE HORIZONTAL SCROLLING PROCESS CARDS
  Mobile horizontal scroll with navigation arrows
=====================================*/

/* Process scroll wrapper - positioning for navigation buttons */
.process-scroll-wrapper {
  position: relative;
  margin: 2rem 0;
}

/* Simple horizontal scroll on mobile */
@media screen and (max-width: 991.98px) {
  #process-cards-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 1rem;
    padding: 0 3rem; /* Space for navigation buttons */
    scroll-behavior: smooth;
    scrollbar-width: none; /* Hide scrollbar */
    -ms-overflow-style: none;
    touch-action: manipulation; /* Optimize touch and allow all scroll directions */
  }

  #process-cards-container::-webkit-scrollbar {
    display: none;
  }

  #process-cards-container > div {
    flex: 0 0 70%; /* 70% width for main card */
    min-width: 280px;
    max-width: 320px;
    width: auto;
  }

  /* Show navigation buttons only on mobile */
  .process-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px; /* WCAG recommended touch target size */
    height: 44px; /* WCAG recommended touch target size */
    border: none;
    border-radius: 50%;
    background: var(--primary-color, #ffd74f);
    color: var(--white-color, #ffffff);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(255, 215, 79, 0.3);
    touch-action: manipulation; /* Prevent zoom delays */
  }

  .process-nav-btn:hover {
    background: var(--secondary-color, #f65129);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 15px rgba(246, 81, 41, 0.4);
  }

  .process-nav-btn:focus {
    outline: 2px solid var(--secondary-color, #f65129);
    outline-offset: 2px;
  }

  .process-nav-btn:active {
    transform: translateY(-50%) scale(0.95);
    background: var(--secondary-dark, #dd4824);
  }

  .process-nav-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  #process-prev-btn {
    left: 0;
  }

  #process-next-btn {
    right: 0;
  }

  /* Hide navigation buttons when at extremes */
  #process-prev-btn.hidden,
  #process-next-btn.hidden {
    opacity: 0;
    pointer-events: none;
  }
}

/* Hide navigation buttons on desktop */
@media screen and (min-width: 992px) {
  .process-nav-btn {
    display: none;
  }

  .process-scroll-wrapper #process-cards-container {
    display: flex;
    overflow-x: visible;
    padding: 0;
  }
}