* {
      margin: 0;
      padding: 0;
border: transparent;
      box-sizing: border-box;
     

   }
body {
        background-color: #333446;
        font-family: sans-serif;
        
        
}
#trending {

  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px;
}




/* Update this section in your CSS */
.nav-links {
    display: flex;
    gap: 20px;           /* INCREASED: This creates more space between Home and Live */
    margin-left: 10px;   /* Added: This keeps them from touching the very left edge */
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: #ADADAD;
    font-size: 25px;     /* Slightly larger for 2025 modern look */
    display: flex;
    align-items: center;
    gap: 20px;           /* Space between the icon and the word 'Home'/'Live' */
    transition: 0.3s;
}

/* Optional: Make the active icon glow slightly on hover */
.nav-links a:hover {
    color: white;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}





.hide-home {
    display: none !important;
}

























/* Styling for the new YouTube-style buttons */
.video-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.action-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none; /* For the download link */
    transition: 0.3s;
}

.action-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.yt-action-group {
    display: flex;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
}

.yt-action-group .action-btn {
    background: transparent;
    border-radius: 0;
}





































.top-header {
          
          height: 70px;
          width: 100%;

          background-color: #333446;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position:relative;
          padding: 0 25px;

}

.search-center{
    flex: 1;
    display: flex;
    justify-content: center;
}




button {
  background-color: #525252;
}




div {
 
  padding: 0;
  display: inline-block;
  box-sizing: border-box;
        

}

h1 {
  color: grey;
}
.header-right {
                
                
                
                display: flex;
                align-items: center;
                gap: 25px;
               
}

a {
  COLOR: #ADADAD
}

.search-center input {
                width: 420px;
                height: 38px;
                padding : 0 12px;
                color: #ADADAD;
                border: 2px solid transparent;
                outline: none;
                border-radius: 20px;
                background-color: #525252;
}


#box1 {
  margin: 0;
  padding: 0;
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  border: solld ; 
  box-sizing: border-box;
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box1:hover {
  transform: scale(1.06);
  
}
#box2 {
  height: 170px;
  width : 100px;
  box-sizing: border-box;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  border: solld ; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box2:hover {
  transform: scale(1.06);
  
}
#box3 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  border: solld ; 
  border-radius: 15%;
  transition: transform 0.4s ease;
  box-sizing: border-box;

}

#box3:hover {
  transform: scale(1.06);
  
}

#box4 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld ; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box4:hover {
  transform: scale(1.06);
  
}

#box5 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld ; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box5:hover {
  transform: scale(1.06);
  
}


#box6 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld ; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box6:hover {
  transform: scale(1.06);
  
}


#box7 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld ; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box7:hover {
  transform: scale(1.06);
  
}


#box8 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld ; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box8:hover {
  transform: scale(1.06);
  
}

#box9 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld ; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box9:hover {
  transform: scale(1.06);
  
}


#box10 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld ; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box10:hover {
  transform: scale(1.06);
  
}



html {
  scroll-behavior: smooth;
}









#box21 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld ; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box21:hover {
  transform: scale(1.06);
  
}


#box22 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld ; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box22:hover {
  transform: scale(1.06);
}

#box23 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border:solld ; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box23:hover {
  transform: scale(1.06);
}

#box24 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld ; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box24:hover {
  transform: scale(1.06);
}



#box25 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld ; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box25:hover {
  transform: scale(1.06);
}

#box26 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld ; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box26:hover {
  transform: scale(1.06);
}


#box27 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box27:hover {
  transform: scale(1.06);
}


#box28 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box28:hover {
  transform: scale(1.06);
}



#box29 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box29:hover {
  transform: scale(1.06);
}



#box30 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box30:hover {
  transform: scale(1.06);
}





#box31 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box31:hover {
  transform: scale(1.06);
}




#box32 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box32:hover {
  transform: scale(1.06);
}


#box33 {
  height: 170px;
  width : 100px;
  background-image: url(hiii.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  border: solld; 
  border-radius: 15%;
  transition: transform 0.4s ease;

}

#box33:hover {
  transform: scale(1.06);
}
















#serial {
  padding: 12px;
}


 h3 {
  color: grey;
  margin-bottom: 10px;
  font-size: 25px;
}









#POPULAR {
  padding: 10px;
}

#POPULAR h2 {
  color: grey;
  margin-bottom: 10px;
  
}

/* row */
.reels-row {
  display: flex;
  gap: 12px;
}

/* reel box */
.reel-box {
  width: 100px;
  height: 170px;
  border:  solid transparent;
  border-radius: 15%;
  overflow: hidden;
  transition: transform 0.4s ease;
}

/* video */
.reel-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* hover */
.reel-box:hover {
  transform: scale(1.06);
}
























@media (max-width: 768px) {

  /* Header stacks properly */
  .top-header {
    height: auto;
    padding: 10px;
    justify-content: space-between;
  }

  /* Search box responsive */
  .search-center input {
    width: 90%;
    max-width: 300px;
    height: 36px;
  }

  /* Move right menu below or hide */
  .header-right {
    position: static;
    gap: 15px;
    font-size: 14px;
  }

  /* Trending boxes responsive */
  #trending {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .box {
    width: 90px;
    height: 150px;
  }
}





/* Ensure the modal content can handle the height of the registration form */
/* --- Modal Background --- */
.modal-overlay {
    display: none; 
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Dark overlay */
    backdrop-filter: blur(4px);
}

/* --- Modal Box --- */
.modal-content {
    background-color: #333446; /* Matches your body color */
    margin: 10% auto;
    padding: 30px;
    border-radius: 15px;
    width: 90%;
    max-width: 400px;
    position: relative;
    color: #ADADAD;
    border: 1px solid #525252;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- Close Button --- */
.close-btn {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #ADADAD;
}

.close-btn:hover { color: white; }

/* --- Forms --- */
.form-container h2 {
    margin-bottom: 20px;
    text-align: center;
    color: white;
}

.form-container input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    background: #525252;
    border: none;
    border-radius: 8px;
    color: white;
    outline: none;
}

.auth-btn {
    width: 100%;
    padding: 12px;
    background-color: #ff0000;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
    transition: 0.3s;
}

.auth-btn:hover { background-color: #cc0000; }

.form-container p {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
}

.form-container p a {
    color: #ff0000;
    text-decoration: none;
}












/* Genre Dropdown Styling */
.genre-dropdown {
    position: relative;
    display: inline-block;
    margin-right: 20px;
}

.genre-btn {
    background-color: #525252;
    color: #ADADAD;
    padding: 10px 15px;
    border-radius: 20px;
    cursor: pointer;
    border: none;
    font-size: 14px;
}

.genre-content {
    display: none;
    position: absolute;
    background-color: #333446;
    min-width: 250px; /* Wider to show multiple columns if needed */
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.5);
    z-index: 1001;
    border-radius: 10px;
    border: 1px solid #525252;
    padding: 10px;
}

/* Show on Hover */
.genre-dropdown:hover .genre-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns for 50 items */
}

.genre-content a {
    color: #ADADAD;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    font-size: 13px;
}

.genre-content a:hover {
    background-color: #525252;
    color: white;
    border-radius: 5px;
}

/* Custom Scrollbar for the long list */
.genre-content::-webkit-scrollbar {
    width: 6px;
}
.genre-content::-webkit-scrollbar-thumb {
    background: #525252;
    border-radius: 10px;
}


















/* Settings Container */
.settings-dropdown {
    position: relative;
    display: inline-block;
}

.settings-trigger {
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
}

/* The Menu Box */
.settings-menu {
    display: none; /* Hidden by default */
    position: absolute;
    right: 0;
    top: 25px;
    background-color: #333446;
    min-width: 220px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.6);
    z-index: 2000;
    border-radius: 12px;
    border: 1px solid #525252;
    padding: 10px 0;
    overflow: hidden;
}






/* Show on Hover */
.settings-dropdown:hover .settings-menu {
    display: block;
}

/* Menu Items */
.settings-menu a {
    color: #ADADAD;
    padding: 12px 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    transition: 0.2s;
}

.settings-menu a i {
    width: 20px;
    text-align: center;
}

.settings-menu a:hover {
    background-color: #525252;
    color: white;
}

.settings-header {
    padding: 10px 20px;
    font-weight: bold;
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 1px solid #525252;
    margin-bottom: 5px;
}

hr {
    border: 0;
    border-top: 1px solid #525252;
    margin: 5px 0;
}

































/* Footer Container */
.main-footer {
    background-color: #252636; /* Slightly darker than body for depth */
    padding: 50px 0 20px 0;
    margin-top: 50px;
    border-top: 1px solid #525252;
    width: 100%;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0 20px;
}

.footer-col {
    margin-bottom: 30px;
    min-width: 150px;
}

/* Footer Typography */
.footer-col h4 {
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #ADADAD;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover {
    color: #ff0000; /* Matches your accent red */
}

/* Social Media Icons */
.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    font-size: 20px;
    color: #ADADAD;
    transition: transform 0.3s;
}

.social-links a:hover {
    color: white;
    transform: translateY(-3px);
}

/* Copyright Section */
.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #333446;
    margin-top: 30px;
    color: #777;
    font-size: 12px;
}




































































.player-container {
    display: flex;
    padding: 20px 5%;
    gap: 20px;
    background-color: #1a1b26;
    min-height: 100vh;
}

.player-left { flex: 3; }

.main-video-wrapper video {
    width: 100%;
    border-radius: 12px;
    background: #000;
    aspect-ratio: 16 / 9;
}

.video-info h1 {
    color: white;
    margin: 15px 0;
    font-size: 22px;
}

.video-actions { display: flex; gap: 15px; }
.video-actions button {
    padding: 10px 20px;
    border-radius: 20px;
    background: #3d3e4f;
    color: white;
    cursor: pointer;
    border: none;
}

/* Sidebar Styling */
.player-sidebar { flex: 1; display: flex; flex-direction: column; gap: 15px; }
.player-sidebar h3 { color: #ADADAD; margin-bottom: 10px; }

.side-item {
    display: flex;
    gap: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.side-thumb { width: 120px; height: 70px; background: #000; border-radius: 8px; overflow: hidden; }
.side-thumb video { width: 100%; height: 100%; object-fit: cover; }

.side-text h4 { color: white; font-size: 14px; margin-bottom: 4px; }
.side-text p { color: #ADADAD; font-size: 12px; }

/* Hide home content when playing */
.hide-home { display: none !important; }




/* ================= MOBILE UPGRADE ================= */
@media (max-width: 768px) {

  /* ===== HEADER ===== */
  .top-header {
    flex-wrap: wrap;
    height: auto;
    padding: 10px;
    gap: 10px;
  }

  .nav-links {
    width: 100%;
    justify-content: space-around;
    font-size: 16px;
  }

  .nav-links a {
    font-size: 16px;
    gap: 6px;
  }

  .search-center {
    width: 100%;
  }

  .search-center input {
    width: 100%;
    max-width: 100%;
  }

  .genre-dropdown,
  .header-right {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  /* ===== TRENDING & SHOWS ROWS ===== */
  #trending,
  #serial {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 10px;
  }

  #trending::-webkit-scrollbar,
  #serial::-webkit-scrollbar {
    display: none;
  }

  #trending div,
  #serial div {
    min-width: 120px;
    height: 180px;
    border-radius: 12px;
    flex-shrink: 0;
  }

  /* ===== REELS ===== */
  .reels-row {
    display: flex;
    overflow-x: auto;
    gap: 10px;
  }

  .reels-row::-webkit-scrollbar {
    display: none;
  }

  .reel-box {
    min-width: 150px;
    height: 260px;
    border-radius: 12px;
    flex-shrink: 0;
  }

  /* ===== PLAYER (Full Mobile Mode) ===== */
  .player-container {
    flex-direction: column;
    padding: 10px;
  }

  .player-left,
  .player-sidebar {
    width: 100%;
  }

  .main-video-wrapper video {
    height: auto;
    border-radius: 10px;
  }

  .player-sidebar {
    margin-top: 10px;
  }

  .side-item {
    display: flex;
    gap: 10px;
  }

  .side-thumb {
    width: 100px;
    height: 60px;
  }

  /* ===== ACTION BUTTONS ===== */
  .video-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .action-btn {
    font-size: 12px;
    padding: 8px 12px;
  }

  /* ===== FOOTER ===== */
  .footer-container {
    flex-direction: column;
    text-align: center;
  }

  .social-links {
    justify-content: center;
  }

}