#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2; /* Above background but below hero content */
    pointer-events: auto; /* Ensure the canvas can capture interactions */
  }
  
  .hero-fullscreen .container {
    z-index: 3; /* Content is above particles */
  }

  #particles-js {
    pointer-events: auto; /* Allows click events on the canvas */
  }
/* Style for FontAwesome icons */
.feature-left i {
    color: black; /* Set icon color to black */
    stroke-width: 0.2px; /* Make stroke smaller */
    stroke: #000; /* Set stroke color */
  }
  
  /* Optional: If you want to adjust the size of the icons */
  .feature-left i.size-3x {
    font-size: 1em; /* Adjust the size if needed */
  }
  
  /* If you want the back icons to have smaller strokes too */
  .feature-left .back-icon {
    stroke-width: 1px;
    stroke: #000;
    display: none;
  }


  .mfp-arrow {
    background: none;
    border: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #979797; /* Adjust color as needed */
    font-size: 24px; /* Adjust size as needed */
    cursor: pointer;
    z-index: 1046;
}

.mfp-arrow-left {
    left: 10px; /* Adjust position as needed */
}

.mfp-arrow-right {
    right: 10px; /* Adjust position as needed */
}

.mfp-arrow:focus {
    outline: none; /* Remove focus outline for better appearance */
}

/* Default arrow position */
.mfp-arrow {
    position: absolute;
    top: 50%; /* Default position */
    transform: translateY(-50%);
}

/* Media query for small screens */
@media (max-width: 768px) {
    .mfp-arrow {
        top: 68%; /* Move arrows further down for small screens */
    }
}

/* Default arrow visibility */
.mfp-arrow {
    display: block;
}

/* Additional style for swipe interaction on small screens */
@media (max-width: 768px) {
    .mfp-arrow {
        display: none; /* Hidden via JS when enabling swipe */
    }
}


.video-container {
  position: relative;
  padding-bottom: 56.20%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background-color: #191a1c;
  cursor: pointer;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 768px) {
  .navbar {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
      background: rgba(0, 0, 0, 0.8); /* Optional: Adds a slight background for readability */
      transition: all 0.3s ease-in-out;
  }

  body {
      padding-top: 60px; /* Adjust to prevent content from being hidden under the navbar */
  }
}

.navbar-toggle .icon-bar {
  transition: none !important; /* Prevents animation changes */
}

.navbar-toggle.collapsed .top-bar,
.navbar-toggle.collapsed .middle-bar,
.navbar-toggle.collapsed .bottom-bar {
  transform: none !important; /* Keeps the icon bars in their original position */
}