header {
  position: fixed;
  width: 100%;
  z-index: 1000;
  background-color: black;
  
}
/* Fix for social icon hover */

.social-icon {
  text-decoration: none !important;
}

.social-icon:hover {
  background-color: white;
  color: black !important;
  text-decoration: none !important;
}

.social-icon:hover i {
  color: black !important;
}


/* Remove all focus indicators */
a:focus,
button:focus,
.nav-item a:focus,
.nav-link:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  text-decoration: none !important;
}

/* Remove Bootstrap's focus styles specifically */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.nav-link:focus {
  box-shadow: none !important;
  outline: 0 !important;
}

/* Override any Bootstrap default focus styles */
*:focus {
  outline: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Custom Cursor - minimal styling that can't be done with Bootstrap */
#cursor-outer {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#cursor-outer {
  background-color: gray;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease,
    border 0.3s ease;
}

body:hover #cursor-outer {
  opacity: 1;
}

/* Main video gallery styles */
body {
  background-color: black;
  color: white;
  font-family: "Poppins", sans-serif !important;
}

/* Tab navigation styles */
#videoTabs {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#videoTabs .nav-link {
  background-color: transparent;
  color: white;
  border: 1px solid white;
}

#videoTabs .nav-link.active {
  background-color: white;
  color: black;
}

/* Video item card styles */
.video-item {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.video-item:hover {
  transform: translateY(-3px);
}

.overlay-element {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.7) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.play-button-container {
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.6));
  transition: transform 0.3s ease;
}

/* Play button styles */
.play-button {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.play-button:hover,
.play-button:active,
.play-button:focus,
.play-button:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

button.btn.play-button::after,
button.btn.play-button::before {
  display: none !important;
}

/* Font styles */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
button,
input,
select,
textarea,
label,
a {
  font-family: "Poppins", sans-serif !important;
}

/* Preserve Font Awesome icons */
.fas,
.fab,
.far,
.fa {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
}

/* Modal fixes to prevent hanging */
.modal-backdrop {
  z-index: 1040 !important;
}

.modal {
  z-index: 1050 !important;
}

/* Custom focus styles - Remove blue outline */
.video-item:focus {
  outline: 2px solid #ffffff !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4) !important;
}

button:focus,
a:focus,
.btn:focus,
.nav-link:focus {
  outline: 2px solid #ffffff !important;
  box-shadow: none !important;
}

*:focus {
  outline-color: #ffffff !important;
}



/* Remove borders and outlines from play buttons */
.play-button-container,
.play-button-container:hover,
.play-button-container:active,
.play-button-container:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: pointer;
}

.play-button-container *,
.play-button-container *:hover,
.play-button-container *:active,
.play-button-container *:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Mobile-specific styles */
@media (max-width: 767px) {
  .video-item {
    position: relative;
  }

  /* Hide overlay by default */
  .video-item .overlay-element {
    opacity: 0 !important;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0.7) 50%,
      rgba(0, 0, 0, 0.3) 100%
    ) !important;
    transition: opacity 0.2s ease !important;
  }

  /* Show overlay when card is active */
  .video-item.card-active .overlay-element {
    opacity: 1 !important;
  }

  /* Make play button more prominent */
  .video-item .play-button-container {
    font-size: 3rem !important;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.9)) !important;
    border: none !important;
    outline: none !important;
  }

  /* Ensure titles are readable */
  .video-item .video-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    max-width: 90% !important;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 1)) !important;
  }

  /* Add visual feedback for active cards */
  .video-item.card-active {
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2) !important;
  }

  /* Make play button appear clickable with subtle animation */
  .video-item.card-active .play-button-container {
    animation: pulse 1.5s infinite ease-in-out;
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
}