/* Mobile Optimization Styles */

/* Hide "No items found" empty state boxes everywhere */
/* Override webflow.css which sets background-color: #dddddd and padding: 10px */
.w-dyn-empty {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background-color: transparent !important;
  background: none !important;
  border: none !important;
}

/* Specifically hide in footer */
.footer .w-dyn-empty,
.footer-link-wrapper .w-dyn-empty {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Specifically hide in navigation menu */
.nav-menu .w-dyn-empty,
.w-nav-menu .w-dyn-empty,
.nav-menu-list .w-dyn-empty {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Remove blue arrow overlays on all screen sizes */
.cms-hover-overlay,
.cms-hover-pointer,
.cms-hover-overlay-inner {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Enable smooth scrolling on mobile - but NOT for anchor links */
html {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Override smooth scroll for anchor links - make them instant */
a[href^="#"] {
  scroll-behavior: auto !important;
}

a[href*="#about"],
a[href*="#services"],
a[href*="#case-studies"],
a[href*="#contact"],
a[href*="#about-us"] {
  scroll-behavior: auto !important;
}

/* Service Cards - Horizontal Scroll on Mobile */
@media (max-width: 991px) {
  /* Ensure body and html allow horizontal scrolling on home page */
  body:not(:has(#use-case-description)),
  body:not(:has(#use-case-description)) html {
    overflow-x: visible !important;
  }
  
  /* Ensure ALL parent containers allow horizontal scrolling */
  .page-wrapper,
  .main-wrapper,
  .service-section,
  .case-study-section,
  .service-wrap,
  .case-study-list-wrapper,
  .w-container,
  .container {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  
  .service-collection-grid {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 20px;
    padding: 10px 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    min-width: 0 !important;
  }
  
  .service-collection-grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
  
  .service-collection-item {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    min-width: 85% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    flex-shrink: 0 !important;
  }
  
  .service-card-block {
    min-height: auto;
  }
}

/* Case Study Cards - Horizontal Scroll on Mobile */
@media (max-width: 991px) {
  /* Ensure ALL parent containers allow horizontal scrolling */
  .page-wrapper,
  .main-wrapper,
  .case-study-section,
  .case-study-list-wrapper,
  .w-container,
  .container {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  
  .case-study-collection-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 20px;
    padding: 10px 15px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    min-width: 0 !important;
  }
  
  .case-study-collection-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
  
  .case-study-collection-item {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    min-width: 85% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    flex-shrink: 0 !important;
  }
  
  /* Remove blur effect on mobile */
  .case-study-collection-item {
    filter: none !important;
    opacity: 1 !important;
  }
  
  /* Remove blue arrow overlay on mobile */
  .cms-hover-overlay {
    display: none !important;
  }
  
  .case-study-thumbnail-link {
    position: relative;
  }
  
  .case-study-thumbnail-link::after {
    display: none !important;
  }
  
  /* Ensure cards are swipeable */
  .case-study-card-block {
    width: 100%;
    height: 100%;
  }
}

/* Mobile Navigation Improvements - Horizontal Layout */
@media (max-width: 767px) {
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    padding: 4px 0 !important;
    background: rgba(0, 0, 0, 0.3) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: background 0.3s ease, backdrop-filter 0.3s ease !important;
  }
  
  /* Enhanced header blur when menu is open */
  /* Since header contains the nav, use :has() selector */
  .header:has(.w-nav.menu-is-open),
  .header:has(.w-nav[data-nav-menu-open]),
  section.header:has(.w-nav.menu-is-open),
  section.header:has(.w-nav[data-nav-menu-open]) {
    background: rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    backdrop-filter: blur(30px) !important;
  }
  
  .navbar-container {
    padding: 4px 0 !important;
    position: relative;
  }
  
  .navbar-wrapper {
    position: relative;
    padding: 0 15px 0 5px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  /* Add padding to body to account for fixed header - mobile only */
  body {
    padding-top: 43px !important;
  }
  
  /* Add padding between nav bar and hero text */
  .home-one-hero-section {
    padding-top: 80px !important;
  }
  
  .home-one-hero-content-block {
    margin-top: 20px !important;
  }
  
  /* Hide duplicate mobile brand logo */
  .nav-mobile-brand {
    display: none !important;
  }
  
  .navbar-brand {
    max-width: 120px !important;
    z-index: 1001 !important;
    position: relative;
    left: -5px !important;
    top: 3px !important;
    transform: none;
    flex-shrink: 0;
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  
  .navbar-brand img {
    max-width: 120px !important;
    width: 120px !important;
    height: auto !important;
  }
  
  .nav-button-block {
    display: none !important;
  }
  
  .menu-button {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    z-index: 1001 !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0;
    margin-left: auto;
    padding: 4px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
  }
  
  .menu-button:hover,
  .menu-button:focus,
  .menu-button:active,
  .menu-button.w--open {
    background: transparent !important;
    background-color: transparent !important;
  }
  
  .w-nav-button {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
  }
  
  .w-nav-button:hover,
  .w-nav-button:focus,
  .w-nav-button:active,
  .w-nav-button.w--open {
    background: transparent !important;
    background-color: transparent !important;
  }
  
  /* Keep menu button visible when menu is open */
  .w-nav.menu-is-open .menu-button,
  .w-nav[data-nav-menu-open] .menu-button {
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .menu-button .w-icon-nav-menu {
    width: 20px !important;
    height: 20px !important;
  }
  
  /* Mobile nav menu - DROPDOWN BELOW HEADER */
  /* Completely hidden when closed */
  /* Override webflow.css background */
  .w-nav-menu,
  [data-nav-menu-open] {
    background: rgba(0, 0, 0, 0.85) !important;
    background-color: rgba(0, 0, 0, 0.85) !important;
  }
  
  .w-nav-menu {
    position: fixed !important;
    top: 43px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    background: rgba(0, 0, 0, 0.85) !important;
    -webkit-backdrop-filter: blur(100px) saturate(180%) !important;
    backdrop-filter: blur(100px) saturate(180%) !important;
    will-change: backdrop-filter !important;
    isolation: isolate !important;
    z-index: 999 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    overflow: visible !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }
  
  /* When menu is open - show it */
  .w-nav-menu.menu-is-open,
  .w-nav.menu-is-open .w-nav-menu,
  .w-nav[data-nav-menu-open] .w-nav-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.85) !important;
    -webkit-backdrop-filter: blur(100px) saturate(180%) !important;
    backdrop-filter: blur(100px) saturate(180%) !important;
    will-change: backdrop-filter !important;
    isolation: isolate !important;
  }
  
  /* Menu content - dropdown layout */
  .nav-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    text-align: left !important;
    list-style: none !important;
  }
  
  /* Ensure menu wrapper doesn't force full height */
  .w-nav-menu.menu-is-open,
  .w-nav[data-nav-menu-open] .w-nav-menu {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
  
  /* Fix FAQ alignment - ensure it's inline with other items */
  .nav-menu-list .w-dyn-list {
    width: 100% !important;
  }
  
  .nav-menu-list .w-dyn-items {
    width: 100% !important;
  }
  
  .nav-menu-list .w-dyn-item {
    width: 100% !important;
  }
  
  .nav-menu-list .w-dyn-item .nav-menu-link-copy {
    padding: 10px 15px !important;
    text-align: left !important;
    display: block !important;
  }
  
  /* Menu items */
  .nav-menu-list {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
  }
  
  /* Hide empty list items */
  .nav-menu-list:empty {
    display: none !important;
  }
  
  .nav-menu-link-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  .nav-menu-link-copy {
    font-size: 16px !important;
    padding: 12px 20px !important;
    display: block !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-align: left !important;
    width: 100% !important;
    transition: background-color 0.2s ease !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
  }
  
  .nav-menu-link-copy:hover {
    background: rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Dropdown toggle */
  .nav-dropdown-toggle-copy {
    font-size: 16px !important;
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-align: left !important;
    width: 100% !important;
    transition: background-color 0.2s ease !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
  }
  
  .nav-dropdown-toggle-copy:hover {
    background: rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Dropdown list */
  .nav-dropdown-list {
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-shadow: none !important;
  }
  
  /* Show dropdown when open */
  .w-dropdown.w--open .nav-dropdown-list,
  .nav-dropdown.w--open .nav-dropdown-list {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1000 !important;
  }
  
  /* Ensure dropdown list is visible */
  .w-dropdown.w--open .w-dropdown-list,
  .nav-dropdown.w--open .w-dropdown-list {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure dropdown toggle is clickable */
  .nav-dropdown-toggle-copy {
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  
  /* Rotate dropdown icon when open */
  .w-dropdown.w--open .nav-dropdown-icon {
    transform: rotate(180deg) !important;
    transition: transform 0.3s ease !important;
  }
  
  .nav-dropdown-icon {
    transition: transform 0.3s ease !important;
  }
  
  /* Prevent dropdown from closing when clicking inside */
  .nav-dropdown {
    position: relative !important;
  }
  
  /* Dropdown items - left aligned with blue mark */
  .nav-dropdown-link-block {
    padding: 8px 15px 8px 15px !important;
    font-size: 14px !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }
  
  .nav-dropdown-shape {
    flex-shrink: 0 !important;
    width: 4px !important;
    height: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #4A9EFF !important;
    border-radius: 2px !important;
  }
  
  .nav-dropdown-link-text {
    text-align: left !important;
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
  }
  
  /* Make sure all dropdown items are visible */
  .w-nav-menu .w-dyn-items {
    display: block !important;
    visibility: visible !important;
  }
  
  .w-nav-menu .w-dyn-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Keep logo visible when menu is open */
  .w-nav.menu-is-open .navbar-brand,
  .w-nav[data-nav-menu-open] .navbar-brand {
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Backdrop overlay - created dynamically in JS */
  /* No blur on backdrop - only the menu itself has blur */
  .mobile-nav-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    /* Removed backdrop-filter blur - content below menu should not be blurred */
  }
  
  /* On use case pages, ensure backdrop is below navigation menu and doesn't block clicks */
  body:has(#use-case-description) .mobile-nav-backdrop {
    z-index: 9999 !important;
    /* Backdrop should NOT block clicks on navigation menu - let clicks pass through to menu */
    pointer-events: none !important;
    /* Lower opacity so backdrop doesn't dim the menu as much */
    opacity: 0.2 !important;
  }
  
  /* Ensure navigation menu is above backdrop and not dimmed */
  body:has(#use-case-description) .w-nav-menu {
    pointer-events: auto !important;
    z-index: 10004 !important;
    /* Ensure menu is not dimmed by backdrop */
    isolation: isolate !important;
    /* Position is set in the use case page section below */
  }
  
  /* Ensure all navigation menu children can receive clicks and are not dimmed */
  body:has(#use-case-description) .w-nav-menu * {
    pointer-events: auto !important;
  }
  
  /* Ensure navigation menu text is not dimmed */
  body:has(#use-case-description) .w-nav-menu a,
  body:has(#use-case-description) .w-nav-menu .nav-menu-link-copy,
  body:has(#use-case-description) .w-nav-menu .nav-dropdown-toggle-copy,
  body:has(#use-case-description) .w-nav-menu .nav-dropdown-link-text,
  body:has(#use-case-description) .w-nav-menu .nav-dropdown-link-block,
  body:has(#use-case-description) .w-nav-menu * {
    opacity: 1 !important;
    color: #ffffff !important;
    text-shadow: none !important;
  }
  
  /* Ensure logo is not dimmed */
  body:has(#use-case-description) .w-nav-menu .navbar-brand,
  body:has(#use-case-description) .w-nav-menu .navbar-brand img,
  body:has(#use-case-description) .w-nav-menu .brand-logo,
  body:has(#use-case-description) .w-nav-menu img {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
  }
  
  .nav-dropdown-flex {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  .nav-dropdown-column {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .nav-dropdown-link-block {
    padding: 8px 0 8px 0 !important;
    font-size: 14px !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 12px;
  }
  
  .nav-dropdown-shape {
    flex-shrink: 0 !important;
    width: 4px !important;
    height: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .nav-dropdown-link-text {
    text-align: left !important;
    flex: 1;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .nav-list-button {
    margin-top: 10px;
    margin-bottom: 20px !important;
    padding: 0 20px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .nav-list-button .primary-button {
    width: calc(100% - 40px) !important;
    max-width: 100% !important;
  }
  
  /* Remove any extra spacing after Use Cases */
  .nav-menu-list:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Ensure menu wraps tightly around content */
  .nav-menu-wrapper.w-nav-menu .nav-menu {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Reduce navigation spacing and center */
  .nav-menu-list {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  /* Hide empty list items */
  .nav-menu-list:empty,
  .nav-menu-list:has(> :empty) {
    display: none !important;
  }
  
  .nav-menu-link-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  /* Hide mobile brand logo in menu */
  .nav-mobile-brand {
    display: none !important;
  }
  
  /* Ensure Use Cases is the last visible item */
  .nav-menu-list:has(.nav-dropdown-toggle-copy) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Center dropdown icon */
  .nav-dropdown-icon {
    margin-left: 8px;
  }
  
  /* Transform hamburger to X when menu is open */
  .w-nav.menu-is-open .menu-button .w-icon-nav-menu,
  .w-nav[data-nav-menu-open] .menu-button .w-icon-nav-menu {
    opacity: 0;
  }
  
  .w-nav.menu-is-open .menu-button::after,
  .w-nav[data-nav-menu-open] .menu-button::after {
    content: '✕';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: white;
    font-weight: bold;
    line-height: 1;
  }
}

/* Mobile Typography Adjustments */
@media (max-width: 767px) {
  .home-hero-title {
    font-size: 36px !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    word-break: normal !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
  }
  
  .section-title {
    font-size: 32px !important;
    line-height: 1.3 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 0 0 20px 0 !important;
  }
  
  .section-subtitle {
    font-size: 14px !important;
    margin-bottom: 15px !important;
    margin-top: 0 !important;
  }
  
  .service-card-title {
    font-size: 24px !important;
    word-wrap: break-word;
    line-height: 1.3 !important;
  }
  
  .case-study-card-title {
    font-size: 22px !important;
    word-wrap: break-word;
    line-height: 1.3 !important;
  }
  
  .home-hero-except {
    font-size: 18px !important;
    line-height: 1.6 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 20px 0 !important;
    padding: 0 10px !important;
  }
  
  .home-hero-except-copy {
    font-size: 18px !important;
    line-height: 1.6 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 20px 0 !important;
    padding: 0 10px !important;
  }
  
  .service-excerpt {
    font-size: 16px !important;
    line-height: 1.6 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Fix text overflow - prevent unwanted hyphenation */
  p, h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    word-break: normal !important;
  }
  
  /* Apply to all text elements */
  body, div, span, a, li, td, th {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    word-break: normal !important;
  }
  
  /* Larger text for better mobile readability */
  h1 {
    font-size: 36px !important;
  }
  
  h2 {
    font-size: 32px !important;
  }
  
  h3 {
    font-size: 24px !important;
  }
  
  p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

/* Mobile Spacing Adjustments */
@media (max-width: 767px) {
  /* Reduce top spacing on main wrapper */
  .main-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .section-gap-bottom {
    padding: 30px 0 !important;
    margin-bottom: 30px !important;
  }
  
  .section-title-wrapper {
    margin-bottom: 20px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .section-title-block {
    margin-bottom: 20px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .service-wrap {
    margin-top: 20px;
    padding: 0 10px;
  }
  
  .case-study-list-wrapper {
    margin-top: 20px;
    padding: 0 10px;
  }
  
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  .w-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Fix overlapping sections */
  section {
    position: relative;
    z-index: 1;
    margin-bottom: 30px !important;
    padding-top: 0 !important;
  }
  
  .about-us-section {
    padding: 30px 0 !important;
    margin-bottom: 30px !important;
    margin-top: 0 !important;
  }
  
  .service-section {
    padding: 30px 0 !important;
    margin-bottom: 30px !important;
    margin-top: 0 !important;
  }
  
  .case-study-section {
    padding: 30px 0 !important;
    margin-bottom: 30px !important;
    margin-top: 0 !important;
  }
  
  /* Remove excessive padding from sections */
  .w-layout-blockcontainer {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* Mobile Button Improvements */
@media (max-width: 767px) {
  .primary-button,
  .secondary-button {
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    margin: 10px 0;
  }
  
  .link-button-with-icon {
    font-size: 14px;
    margin-top: 15px;
  }
  
  .common-button-wrap {
    margin-top: 30px !important;
    padding: 0 20px;
  }
  
  .home-one-hero-button-wrap {
    margin-top: 30px !important;
    padding: 0 20px;
  }
}

/* Mobile Hero Section - Compressed */
@media (max-width: 767px) {
  .home-one-hero-section {
    padding: 80px 0 30px 0 !important;
    min-height: auto !important;
    margin-top: 0 !important;
  }
  
  .home-one-hero-wrapper {
    flex-direction: column;
    gap: 20px;
    padding: 5px 0;
    margin-top: 0 !important;
  }
  
  .home-one-hero-image-block {
    width: 100%;
    order: 2;
    margin-top: 15px;
  }
  
  .home-one-hero-content-block {
    width: 100%;
    text-align: center;
    order: 1;
    padding: 0 15px;
    margin-top: 0 !important;
  }
  
  .home-one-hero-title-block {
    margin-bottom: 15px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .home-hero-title {
    font-size: 36px !important;
    line-height: 1.2 !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
  }
  
  .home-hero-except {
    font-size: 18px !important;
    line-height: 1.6 !important;
    margin: 15px 0 !important;
    padding: 0 !important;
  }
  
  .hero-fun-fact-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 20px !important;
    padding: 0 15px !important;
    overflow-x: hidden !important;
  }
  
  .hero-funfact-block {
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    min-width: 140px !important;
    flex-shrink: 0 !important;
    padding: 15px 10px !important;
    margin: 0 !important;
  }
  
  .hero-funfact-info {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }
  
  .hero-funfact-block .d {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .hero-funfact-bg {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .home-one-hero-image {
    max-width: 100%;
    height: auto;
  }
  
  /* Remove excessive top spacing */
  .section-title-shape-top-left,
  .section-title-shape-bottom-right {
    display: none;
  }
  
  .about-us-shape-top-left,
  .about-us-shape-bottom-right {
    display: none;
  }
  
  /* Compress hero background shapes */
  .home-hero-bg-shape-wrapper {
    display: none;
  }
}

/* Mobile Footer - Custom Footer */
@media (max-width: 767px) {
  /* Hide existing footer completely on mobile */
  .footer,
  .footer-main-wrapper,
  .footer-upper-block,
  .footer-lower-block,
  .footer-image-block {
    display: none !important;
  }
  
  /* Custom Mobile Footer */
  .custom-mobile-footer {
    display: block !important;
    background: rgba(0, 0, 0, 0.8) !important;
    padding: 15px 15px 12px 15px !important;
    margin-top: 40px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  .custom-footer-content {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 10px !important;
  }
  
  .custom-footer-left,
  .custom-footer-right {
    width: calc(50% - 10px) !important;
    flex: 0 0 calc(50% - 10px) !important;
  }
  
  .custom-footer-heading {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-bottom: 15px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    line-height: 1.0 !important;
  }
  
  .custom-footer-link {
    display: block !important;
    font-size: 12px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.0 !important;
    margin-bottom: -3px !important;
    transition: opacity 0.2s ease !important;
  }
  
  .custom-footer-link:hover {
    opacity: 0.7 !important;
  }
  
  .custom-footer-text {
    font-size: 11px !important;
    color: #ffffff !important;
    line-height: 1.0 !important;
    margin-top: 0 !important;
    margin-bottom: 0px !important;
    padding: 0 !important;
  }
  
  .custom-footer-social {
    display: flex !important;
    gap: 8px !important;
    margin-top: 3px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
  
  .custom-social-icon {
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  
  .custom-social-icon img {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    object-fit: contain !important;
    display: block !important;
  }
  
  /* Make LinkedIn logo larger */
  .custom-social-icon:first-child {
    width: 28px !important;
    height: 28px !important;
  }
  
  .custom-social-icon:first-child img {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }
  
  /* Make Instagram logo even larger - target by href or nth-child */
  .custom-footer-social .custom-social-icon:nth-child(4),
  .custom-footer-social .custom-social-icon:last-child,
  .custom-footer-social .custom-social-icon[href*="instagram"],
  .custom-footer-social a[href*="instagram"] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
  
  .custom-footer-social .custom-social-icon:nth-child(4) img,
  .custom-footer-social .custom-social-icon:last-child img,
  .custom-footer-social .custom-social-icon[href*="instagram"] img,
  .custom-footer-social a[href*="instagram"] img {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
  
  .custom-footer-copyright {
    font-size: 8px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-align: center !important;
    padding-top: 8px !important;
    margin-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

/* Hide custom footer on desktop */
@media (min-width: 768px) {
  .custom-mobile-footer {
    display: none !important;
  }
  
  /* Desktop: Fixed header - transparent by default, becomes opaque on scroll */
  .header,
  section.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease !important;
    padding: 0 !important;
    border-bottom: none !important;
  }
  
  /* Nav becomes darker when scrolled - same blur and transparency */
  .header.scrolled,
  section.header.scrolled {
    background: rgba(0, 0, 0, 0.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Remove black strip under nav on desktop */
  .header .w-layout-blockcontainer,
  .header .container-fluid,
  .navbar-container,
  .navbar-wrapper {
    border-bottom: none !important;
    background: transparent !important;
  }
  
  /* Reduce space between nav and hero section on desktop - start right after nav */
  .home-one-hero-section {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  .home-one-hero-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Make navbar taller with fixed height - reduced top padding to center content */
  .navbar-container,
  .navbar-wrapper,
  .w-layout-blockcontainer.container-fluid,
  .header .w-layout-blockcontainer {
    padding: 0 !important;
    min-height: 100px !important;
    max-height: 100px !important;
    height: 100px !important;
    overflow: visible !important;
  }
  
  .navbar-wrapper {
    padding: 0 15px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  /* Reduce vertical spacing in navbar */
  .navbar-container .w-nav {
    padding: 0 !important;
    height: 100px !important;
    max-height: 100px !important;
  }
  
  /* Make logo 10x bigger */
  .navbar-brand {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    max-height: 100px !important;
  }
  
  .navbar-brand img {
    max-height: 100px !important;
    height: 100px !important;
    width: auto !important;
    object-fit: contain !important;
  }
  
  .navbar-brand {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }
  
  /* Shrink Contact Us button and center nav items */
  .nav-button-block .primary-button,
  .nav-list-button .primary-button {
    padding: 8px 16px !important;
    font-size: 14px !important;
    transform: none !important;
    margin-top: 0 !important;
  }
  
  .nav-button-block .button-text,
  .nav-list-button .button-text {
    font-size: 14px !important;
    padding: 0 !important;
  }
  
  .nav-button-block .primary-button-inner,
  .nav-list-button .primary-button-inner {
    padding: 8px 16px !important;
  }
  
  /* Make the white border very thin - reduce the outline size more */
  .nav-button-block .primary-button-outline,
  .nav-list-button .primary-button-outline {
    padding: 8px 16px !important;
    inset: 5px !important;
    transform: scale(0.85) !important;
  }
  
  /* Add padding to body on desktop to account for fixed header - match nav height exactly */
  body {
    padding-top: 100px !important;
  }
  
  /* Extend hero section background upward to fill the space under transparent nav */
  .home-one-hero-section {
    margin-top: -100px !important;
    padding-top: 100px !important;
  }
  
  /* Ensure mobile padding is maintained on mobile */
  @media (max-width: 767px) {
    body {
      padding-top: 43px !important;
    }
  }
}

/* All Use Cases - Mobile Step Flow Styles */
@media (max-width: 767px) {
  /* Hide bullet lists for all use cases on mobile */
  #use-case-description ul,
  #use-case-description[data-use-case-slug] ul,
  body:has([data-use-case-slug]) #use-case-description ul {
    display: none !important;
  }
  
  /* Style the step flow container */
  .mobile-step-flow {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 10px 0 !important;
    padding: 0 !important;
  }
  
  /* Style each step item */
  .mobile-step-item {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: flex-start !important;
    padding: 6px 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 4px !important;
    border-left: 2px solid rgba(255, 255, 255, 0.3) !important;
  }
  
  /* Style step number */
  .mobile-step-number {
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Style step content */
  .mobile-step-content {
    flex: 1 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Remove space after strong tags */
  .mobile-step-content strong + br {
    display: none !important;
  }
  
  /* Make text immediately follow strong tag */
  .mobile-step-content strong {
    color: #ffffff !important;
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    font-size: 12px !important;
  }
  
  .mobile-step-content br {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    height: 0 !important;
    content: "" !important;
  }
  
  /* Clean divider line to replace hyphen lines */
  .divider-line,
  .mobile-divider-line {
    width: 100% !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    margin: 32px 0 !important;
    border: none !important;
    padding: 0 !important;
  }
}

/* Image Lightbox Styles */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.image-lightbox-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.95) !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.image-lightbox-overlay img {
  max-width: 95% !important;
  max-height: 95vh !important;
  object-fit: contain !important;
  cursor: pointer !important;
}

/* Touch-friendly tap targets */
@media (max-width: 991px) {
  a, button {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .service-icon-block,
  .case-study-thumbnail-link {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Prevent text selection on scroll */
@media (max-width: 991px) {
  .service-collection-grid,
  .case-study-collection-list {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  
  .service-collection-grid:active,
  .case-study-collection-list:active {
    cursor: grabbing;
  }
}

/* Improve card spacing on mobile */
@media (max-width: 991px) {
  .service-card-block {
    padding: 20px;
  }
  
  .case-study-card-block {
    padding: 15px;
  }
}

/* Mobile CTA Section */
@media (max-width: 767px) {
  .cta-wrapper {
    text-align: center;
    padding: 40px 20px;
  }
  
  .cta-title {
    font-size: 32px !important;
  }
  
  .cta-excerpt {
    font-size: 16px !important;
    margin: 20px 0;
  }
}

/* Mobile Use Case Detail Page */
@media (max-width: 767px) {
  /* Ensure navigation works on use case pages - higher z-index than hero */
  body:has(#use-case-description) .header,
  body:has(#use-case-description) section.header {
    z-index: 10000 !important;
    position: fixed !important;
  }
  
  body:has(#use-case-description) .navbar-container,
  body:has(#use-case-description) .w-nav {
    z-index: 10001 !important;
    position: relative !important;
  }
  
  body:has(#use-case-description) .navbar-wrapper {
    z-index: 10002 !important;
    position: relative !important;
  }
  
  body:has(#use-case-description) .w-nav-menu {
    z-index: 10003 !important;
  }
  
  /* Ensure navigation links are white and clickable on use case pages - NOT DIMMED */
  body:has(#use-case-description) .nav-menu-link-copy,
  body:has(#use-case-description) .nav-dropdown-toggle-copy,
  body:has(#use-case-description) .nav-dropdown-link-text,
  body:has(#use-case-description) .nav-dropdown-link-block,
  body:has(#use-case-description) .w-nav-menu a,
  body:has(#use-case-description) .w-nav-menu * {
    color: #ffffff !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1) !important;
    /* CRITICAL: Ensure text is not dimmed */
    filter: none !important;
    -webkit-filter: none !important;
  }
  
  /* Ensure logo is bright and not dimmed */
  body:has(#use-case-description) .w-nav-menu .navbar-brand,
  body:has(#use-case-description) .w-nav-menu .navbar-brand img,
  body:has(#use-case-description) .w-nav-menu .brand-logo {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    brightness: 1 !important;
  }
  
  body:has(#use-case-description) .nav-menu-link-copy:hover,
  body:has(#use-case-description) .nav-menu-link-copy:active,
  body:has(#use-case-description) .nav-dropdown-link-block:hover,
  body:has(#use-case-description) .nav-dropdown-link-block:active {
    color: #ffffff !important;
    opacity: 1 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Ensure navigation menu is properly positioned and above backdrop on use case pages */
  body:has(#use-case-description) .w-nav-menu {
    position: fixed !important;
    top: 43px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 10005 !important;
    pointer-events: auto !important;
    /* Ensure menu is not dimmed by backdrop - create new stacking context */
    isolation: isolate !important;
    /* Ensure menu background is solid and opaque to prevent backdrop from showing through */
    background: rgba(0, 0, 0, 0.95) !important;
    background-color: rgba(0, 0, 0, 0.95) !important;
    /* Ensure backdrop blur doesn't affect menu */
    -webkit-backdrop-filter: blur(100px) saturate(180%) !important;
    backdrop-filter: blur(100px) saturate(180%) !important;
    /* CRITICAL: Ensure menu is clickable */
    touch-action: manipulation !important;
    /* CRITICAL: Ensure menu is not dimmed - full opacity */
    opacity: 1 !important;
  }
  
  body:has(#use-case-description) .w-nav-menu.menu-is-open,
  body:has(#use-case-description) .w-nav[data-nav-menu-open] .w-nav-menu {
    position: fixed !important;
    top: 43px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 10005 !important;
    pointer-events: auto !important;
    /* CRITICAL: Ensure menu is clickable */
    touch-action: manipulation !important;
  }
  
  body:has(#use-case-description) .nav-menu-wrapper {
    position: relative !important;
    pointer-events: auto !important;
  }
  
  body:has(#use-case-description) .nav-menu a,
  body:has(#use-case-description) .nav-menu-link-copy,
  body:has(#use-case-description) .nav-menu-link-wrapper a,
  body:has(#use-case-description) .primary-button,
  body:has(#use-case-description) .nav-dropdown-link-block,
  body:has(#use-case-description) .nav-dropdown-toggle-copy {
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1) !important;
    /* CRITICAL: Ensure links are clickable */
    position: relative !important;
    z-index: 10006 !important;
  }
  
  /* Ensure navigation menu is clickable */
  body:has(#use-case-description) .nav-menu,
  body:has(#use-case-description) .nav-menu-list {
    pointer-events: auto !important;
  }
  
  /* Fix any overlay that might be blocking clicks */
  body:has(#use-case-description) .cms-details-hero-section {
    pointer-events: none !important;
  }
  
  body:has(#use-case-description) .cms-details-hero-section * {
    pointer-events: auto !important;
  }
  
  /* Prevent horizontal scrolling on use case detail pages only */
  /* Only apply when use case description element exists */
  body:has(#use-case-description) {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  body:has(#use-case-description) .page-wrapper,
  body:has(#use-case-description) .main-wrapper {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .cms-details-hero-title {
    font-size: 28px !important;
    padding: 20px;
  }
  
  /* Reduce spacing between hero image and content section */
  .cms-details-hero-section {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .cms-details-hero-image-block {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .case-study-details-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .cms-details-section-gap {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  .case-studies-details-projct-overview {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .case-studies-details-projct-overview img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Style step headers with blue color matching home page on mobile */
  #use-case-description h3 strong em,
  #use-case-description h3 strong,
  #use-case-description h3 em,
  #use-case-description h3:has(strong em),
  #use-case-description h3:has(strong) {
    color: #064dfa !important;
  }
  
  .cms-details-hero-image-block {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1 !important;
  }
  
  .div-block-3 {
    display: block !important;
    z-index: 2 !important;
    background-color: var(--color--transparent) !important;
    background-image: linear-gradient(#0000, #0d0d12 91% 100%, #000) !important;
    background-clip: border-box !important;
    position: absolute !important;
    inset: 0% !important;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0) !important;
    -moz-transform: translate3d(0, 0, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0) !important;
    -ms-transform: translate3d(0, 0, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0) !important;
    transform: translate3d(0, 0, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0) !important;
  }
}

/* Mobile FAQ Page */
@media (max-width: 767px) {
  .faq-item {
    margin-bottom: 15px;
  }
  
  .faq-title {
    font-size: 16px !important;
    padding: 15px;
  }
  
  .faq-summary {
    font-size: 14px !important;
    padding: 15px;
    line-height: 1.6 !important;
  }
}

/* Additional Mobile Fixes for iPhone 14 Pro Max and similar */
@media (max-width: 430px) {
  /* Fix text overflow issues */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Ensure text doesn't get cut off - but don't hyphenate */
  .home-hero-except,
  .home-hero-except-copy,
  p {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    word-wrap: break-word !important;
  }
  
  /* Fix section spacing */
  .about-us-wrapper {
    padding: 20px 0 !important;
  }
  
  .about-us-title-block {
    padding: 0 10px !important;
  }
  
  /* Fix hero section text */
  .home-one-hero-content-block {
    padding: 0 15px !important;
  }
  
  /* Ensure buttons don't overlap */
  .nav-button-block {
    display: none !important;
  }
  
  .nav-list-button .primary-button {
    display: none !important;
  }
  
  /* Fix container padding */
  .w-container,
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Fix service cards - keep them as they are but ensure proper spacing */
  .service-collection-grid {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Fix case study cards spacing */
  .case-study-collection-list {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Fix overlapping elements */
  .section-title-wrapper {
    margin-bottom: 25px !important;
  }
  
  .section-title-block {
    margin-bottom: 25px !important;
  }
  
  /* Fix About section */
  .about-us-section {
    padding: 30px 0 !important;
  }
  
  /* Fix Services section */
  .service-section {
    padding: 30px 0 !important;
  }
  
  /* Fix Case Study section */
  .case-study-section {
    padding: 30px 0 !important;
  }
  
  /* Ensure proper z-index for navigation */
  .header {
    z-index: 1000;
  }
  
  .navbar-container {
    z-index: 1000;
  }
  
  /* Fix menu button positioning */
  .menu-button {
    z-index: 1001;
  }
  
  /* Remove blue arrows on all screen sizes */
  .cms-hover-overlay,
  .cms-hover-pointer,
  .cms-hover-overlay-inner {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Fix for very small screens */
@media (max-width: 375px) {
  .home-hero-title {
    font-size: 28px !important;
  }
  
  .section-title {
    font-size: 24px !important;
  }
  
  .navbar-brand img {
    max-width: 120px;
  }
}