#video-carousel {
    width: 100%;
    display: flex;
    flex-direction: column; /* changed to column for a better mobile view */
    align-items: center;
    justify-content: center;
    margin: 0px; /* added margin instead of gap for better browser compatibility */
    background-color: rgba(0,0,0,0.9);
    padding: 0px;
}

#video-container {
    position: relative;
    width: 100%; /* Set to full width */
    /*padding-top: 56.25%; /* 16:9 Aspect Ratio */
    margin: 0px; /* Added for padding around the video */
    padding: 0px;
    object-fit: cover;/**/
}

#video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

button {
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 20px; /* added margin-top for spacing between buttons and video */
}
#video-thumbnails {
    display: flex;
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Prevent vertical scrolling */
    white-space: nowrap; /* Prevent thumbnails from wrapping to new lines */
    width: 100%; /* Ensure the container does not exceed the viewport width */
    margin-top: 20px; /* Space between video and thumbnails */
    gap: 10px; /* Space between thumbnails */
    justify-content: flex-start; /* Align thumbnails to start by default */
    padding-bottom: 10px; /* Optional: Add some padding at the bottom for a scrollbar */
}

.video-item {
    flex: 0 0 auto; /* Prevent thumbnails from shrinking */
    display: inline-block; /* Treat each thumbnail + description as a single block */
    text-align: center; /* Center the description text below the thumbnail */
}

.video-thumbnail {
    width: 250px; /* Fixed width for each thumbnail */
    max-width: 250px; /* Ensures the thumbnail is not wider than this value */
    height: auto; /* Maintains the aspect ratio */
    cursor: pointer; /* Shows a pointer cursor on hover */
    transition: transform 0.3s ease; /* Smooth transition for transformations */
    flex: 0 0 auto; /* Do not grow or shrink, base size determined by width/height */
    /* margin-right: 10px; /* Optional: Uncomment to add space between thumbnails */
}

.video-description {
    text-align: center;
    font-size: 0.8rem; /* Adjust font size as needed */
    margin-top: 5px;
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Show ellipsis for overflow text */
    white-space: nowrap; /* Keep the description in a single line */
}

.video-thumbnail:hover {
    transform: scale(1.15); /* Slight zoom on hover */
}
.video-thumbnails-container {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  width: 100%; /* Ensure the container does not exceed the viewport width */
}

#video-thumbnails-container {
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

#video-thumbnails {
  display: flex;
  overflow-x: scroll; /* Only allow horizontal scrolling */
  scroll-behavior: smooth; /* Smooth scrolling when using arrow buttons */
  flex-wrap: nowrap; /* Keep thumbnails in a single row */
  padding-bottom: 10px; /* Space for scrollbar */
  margin: 0; /* Reset margins */
}



/* Reset padding for the container-fluid to ensure it takes full width */
.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* Ensure video-container also takes full width */
#video-container {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Apply the same for the iframe once it's dynamically inserted, just in case */
#video-container iframe {
    width: 100%;
    margin: 0;
    padding: 0;
}


@media (max-width: 600px) {
    .video-thumbnail,
    .video-description {
        width: 30vw; /* Adjusts width for smaller screens */
        max-width: none; /* Override any max-width set outside */
    }
}

/* scrollbar customizations */
/* Target the scrollbar of the video thumbnails container */
#video-thumbnails::-webkit-scrollbar {
    height: 12px; /* Adjust the height of the scrollbar */
}

#video-thumbnails::-webkit-scrollbar-track {
    background: #1C0033; /* Background color of the scrollbar track */
}

#video-thumbnails::-webkit-scrollbar-thumb {
    background-color: #6a1b9a; /* Your desired purple color for the scrollbar thumb */
    border-radius: 6px; /* Optional: Round the corners of the scrollbar thumb */
}

#video-thumbnails::-webkit-scrollbar-thumb:hover {
    background-color: #9c27b0; /* A lighter/darker purple color when hovering over the scrollbar thumb */
}
/* For Firefox */
#video-thumbnails {
    scrollbar-width: thin; /* 'auto', 'thin', 'none' */
    scrollbar-color: #6a1b9a #1C0033; /* Thumb and track color */
}