/* Mobile Video Visibility Fix - Force video to be visible on mobile */

@media screen and (max-width: 768px) {
  /* Ensure video background is visible */
  .video-background {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
  }

  /* Ensure video element is visible */
  .video-background video,
  .video-hero video {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    /* Remove any transforms that might hide it */
    transform: none !important;
    /* Ensure no filters are hiding it */
    filter: none !important;
  }

  /* Remove any overlay that might be blocking */
  .video-overlay {
    background: rgba(0, 0, 0, 0.3) !important; /* Semi-transparent only */
    pointer-events: none !important;
  }

  /* Ensure hero section shows video */
  .hero {
    background: transparent !important;
  }

  /* Remove any blur or effects */
  .video-background::before,
  .video-background::after {
    display: none !important;
  }
}

/* Also for touch devices */
@media (hover: none) and (pointer: coarse) {
  .video-background video {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}