@media (max-width: 768px) {
  #hero-video {
    display: none;
  }
  
  #hero-video-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/images/m-bg.png');
    background-size: cover;
    background-position: center;
    z-index: 1;
  }
  
  /* Fix pinned sections for mobile */
  #pinned-sections-wrapper {
    height: auto !important;
  }
  
  #pinned-sections-container {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  .pinned-section {
    position: relative !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 100vh;
    padding: 4rem 0;
  }
  
  #pinned-spacer {
    display: none;
  }
  
  /* Fix service section on mobile */
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  .service-item {
    font-size: 1.25rem !important;
    padding: 1rem !important;
  }
  
  /* Fix logo scrolling on mobile */
  .logo-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .logo-scroll {
    animation: none !important;
    width: max-content;
  }
  
  .logo-scroll > div {
    display: flex;
    gap: 2rem;
  }
  
  /* Fix featured work section */
  .work-slide {
    padding: 1rem 0 !important;
  }
  
  /* Adjust typography for mobile */
  .text-8xl, .text-7xl, .text-6xl {
    font-size: 3rem !important;
  }
  
  .text-5xl, .text-4xl {
    font-size: 2rem !important;
  }
  
  /* Fix stats container */
  #stats-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  /* Fix hero section padding */
  .section-padding {
    padding: 2rem 1rem !important;
  }
  
  /* Fix menu items */
  .menu-item span:last-child {
    font-size: 1.5rem !important;
  }
}

/* Tablet adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
  .pinned-section h1 {
    font-size: 4rem !important;
  }
  
  .service-item {
    font-size: 1.5rem !important;
  }
}

/* Fix for very small screens */
@media (max-width: 380px) {
  .text-4xl, .text-3xl {
    font-size: 1.5rem !important;
  }
  
  .service-item {
    font-size: 1.1rem !important;
    padding: 0.75rem !important;
  }
}

/* Ensure smooth scrolling on mobile */
html {
  scroll-behavior: smooth;
}

/* Prevent horizontal scroll */
body {
  overflow-x: hidden;
}