@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

html, body {
    background-color: #000 ;
    height: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    
}

a {
    text-decoration: none;
    color: #ffffff;
}

/* General Flexbox Container */
.flex-div {
    display: flex;
}

/* Navigation Styles */
nav {
    height: 9vh; /* Use viewport height for better responsiveness */
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(0, 0, 0);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0; /* Ensure the nav stays at the top */
    left: 0;
    z-index: 1000; /* Ensure the nav stays on top of other elements */
    padding: 0 15px;
    overflow: hidden; /* Prevent any content overflow */
}

/* Menu Icon Styles */
.menu-icon {
    width: 25px;
    position: relative;
    left: 4px;
    cursor: pointer;
}
/* Menu Icon Styles */
.bellring {
    width: 25px;
    position: relative;
    left: 4px;
    cursor: pointer;
}
.nexiloopgoo {
    width: 30px;
    margin-left: 10px ;
    position: relative;
    left: 4px;
    cursor: pointer;
}
/* Main Body */
.container {
    padding-left: 17%;
    padding-right: 2%;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 7vh; /* Ensure content starts below the fixed navbar */
    height: calc(100vh - 7vh); /* Adjust height based on navbar height */
    overflow-y: auto; /* Allow vertical scrolling */
}

/* Additional Styling (Optional) */
.banner img {
    width: 100%;
    border-radius: 8px;
}

.list-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-column-gap: 16px;
    grid-row-gap: 30px;
    margin-top: 15px;
}

/* Video Player Styles */
.play-video {
    flex-basis: 69%;
}

.play-video video {
    width: 100%;
}
.discroverimg{
    width: 20px;
    height: 20px;
}
.discroverimg img{
    width: 100%;
    height: 100%px;
}
/* Hide all scrollbars */
::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

.sidebar {
    -ms-overflow-style: none; /* Internet Explorer and Edge */
    scrollbar-width: none; /* Firefox */
}

.search-container {
    position: relative;
    width: 110%;
}

.search-input {
    position: absolute;
    top: -17px;
    left: -3x;
    width: 0;
    right: -2px;
    height: 35px;
    padding: 0 50px 0 10px;
    border-radius: 20px;
    border: 1px solid #ffffff42;
    background-color: #252525fd;
    color: #fff;
    font-size: 14px;
    transition: width 0.4s ease, padding 0.4s ease, opacity 0.4s ease;
    outline: none;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}

.search-input.active {
    width: 100%;
    padding-left: 10px;
    opacity: 2;
    visibility: visible;
}

.search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    cursor: pointer;
    z-index: 2;
}

.badge {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    vertical-align: middle;
}



/* Hide all scrollbars */
::-webkit-scrollbar {
    display: none; /* Hide the scrollbar in WebKit browsers */
}

body {
    padding-top: 7vh; /* Offset for the top navigation */
}


/* Container for the tabs section */
.tabs-container11234 {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    background-color: #00000000; /* Adjust color as needed */
    margin-top: 3%;
 margin-bottom: 2% ;
 left: 3%;
 scrollbar-width: smooth;
 overflow-x: auto; /* Prevent horizontal scrolling */

}

/* Wrapper to handle the tabs */
.tabs-wrapper11234 {
    display: flex;

    align-items: center;
    background-color: #13131327;
}

/* Tabs container with horizontal scrolling */
.tabs11234 {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    
    white-space: nowrap;
    flex-grow: 1;
}

/* Individual tab buttons */
.tab-button11234 {
    background-color: #20202044; /* Background color for tabs */
    backdrop-filter: blur(10px);
    box-shadow: inset 0px 2px 15px 2px rgba(17, 17, 17, 0.678);
    color: #fff; /* Text color */
    border: none;
    border: 1px solid #ffffff71;

    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    margin: 3px;
    white-space: nowrap;
    transition: background-color 0.3s ease;
    border-radius: 12px; /* Rounded corners for the left side */
}

.tab-button11234.active {
    font-weight: 400;
    border: 1px solid #ffffff71;
   
    box-shadow: inset 0px 2px 5px 2px rgba(95, 95, 95, 0.151); /* Inner shadow effect */

}

/* Removed scroll buttons, so no need for their styles */


.center-container90 {
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
}

/* Basic HR style */
hr {
    border: none;
    height: 2px;
    background-color: #70707000; /* Light grey */
    margin: px 0;
    margin-top: 10px;
    width: 95%;
    align: center;

}