/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  #mobile-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #171a1f;
    padding: 0 20px;
    display: none;
    justify-content: start;
    align-items: center;
    z-index: 5;
  }
/* Basic styling for the video containers */
    .desktop-video,
    .mobile-video {
        position: absolute; /* or fixed, depending on your layout */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* This is key for covering the area without distortion */
        z-index: -1; /* Puts the video behind other content */
        display: block; /* Default to desktop video */
    }
    /* Hide the mobile video by default */
    .mobile-video {
        display: none;
    }

  .logo {
    max-width: 80px;
  }

  .nav-item {
    border-bottom: 6px solid #ea2227;
  }

  .nav-item:last-child {
    border-bottom: none;
  }

  .nav-link {
    color: #fff !important;
    font-size: 30px;
    padding: 10px;
  }

  #menu-toggler-btn,
  #menu-close-btn {
    color: #fff;
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    font-size: 26px;
    position: relative;
    z-index: 99;
  }

  .section-title {
    font-size: 60px;
  }

  .container {
    padding: 0 20px;
  }

  .swiper-pagination-progressbar {
    width: 6px !important;
  }

  .swiper-button-prev {
    top: 85%;
    left: 20px;
  }

  .swiper-button-next {
    top: 85%;
    left: 70px;
  }

  .collaboration-title {
    width: 100%;
    font-size: 30px;
  }

  .collaboration-text {
    width: 100%;
  }

  .our-story-heading {
    font-size: 24px;
  }

  .parallax-section {
    height: 570px;
  }

  #title {
    font-size: 25px;
  }

  #description {
    transform: translateY(-360px);
  }

  footer {
    padding: 20px 0;
  }
}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}

/* Media query for mobile devices (max-width: 768px is a common breakpoint) */
    @media (max-width: 768px) {
        .desktop-video {
            display: none; /* Hide desktop video on mobile */
        }
        .mobile-video {
            display: block; /* Show mobile video on mobile */
        }
    }