* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; }
body { background: #050505; color: white; scroll-behavior: smooth; }

/* Navigation */
header {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 8%; background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
}
.logo { font-size: 24px; font-weight: bold; position: relative; }
nav a { color: white; text-decoration: none; margin: 0 15px; opacity: 0.7; }
nav a:hover { opacity: 1; }


/* --- HOME SLIDER --- */
#home { height: 100vh; position: relative; }
.main-slider { height: 100%; width: 100%; position: relative; }

.slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    display: flex; align-items: center; padding: 0 8%;
    opacity: 0; transition:  0.8s ease-in-out;
}
.slide.active { opacity: 1; z-index: 1; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }

.slide-content { position: relative; z-index: 2; max-width: 600px; }
.slide-content h1 { font-size: 60px; margin-bottom: 20px; line-height: 1.1; }
.slide-content p { margin-bottom: 30px; opacity: 0.8; line-height: 1.6; }
.btn-watch { background: linear-gradient(90deg, black, ); border: none; padding: 15px 35px; color: rgb(0, 0, 0); font-weight: bold; cursor: pointer; }

.slider-nav { position: absolute; bottom: 50px; right: 8%; z-index: 10; display: flex; gap: 15px; }
.slider-nav button { background: rgba(255,255,255,0.1); border: 1px solid white; color: white; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: 0.3s; }
.slider-nav button:hover { background: white; color: black; }

/* --- TV SHOWS SECTION --- */
#tv-shows {
    height: 100vh; padding: 120px 8% 40px 8%;
    background: linear-gradient(to right, #0d1b1e 20%, transparent), url('bd.jpg') center/cover;
    display: flex; flex-direction: column; justify-content: center;
}
.ott-title { font-size: 50px; font-weight: 300; letter-spacing: 4px; color: white; }
.season { margin: 10px 0; font-size: 18px; }
.stars { color: #ffb400; margin-bottom: 10px; }
.meta { color: #888; margin-bottom: 20px; font-size: 14px; }
.action-row { display: flex; gap: 10px; margin-bottom: 25px; }
.play-btn, .plus-btn { background: #00d2b5; border: none; color: white; padding: 12px 25px; cursor: pointer; }
.summary { max-width: 500px; color: #999; font-size: 14px; line-height: 1.5; margin-bottom: 70px; }
.play-btn{
    
    margin-right: 15px;
}
.horizontal-list { display: flex; gap: 20px; margin-top:10px;  padding: 20px 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none;margin-bottom: 80px; font-weight: bold ;  }
.horizontal-list::-webkit-scrollbar{
    display: none;
}
.item{
    
    
    transition:.3s;
}

.item:hover{
      color:black;
    transform: scale(1.3) translateY(-3px);
    
      box-shadow: 0 0 15px white;
    
  
    
}
     
.item { min-width: 140px; width: 140px; text-align: center;  }
.item img { width: 100%; height:250px; object-fit:fill; border-radius: 20px; display: block; margin-bottom: 80px; }
.item span { font-size: 20px;
     color: #ffffff; } 
.item.active {  border-bottom: 2px solid #00d2b5; }
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 0 8%;
    
    
    /* Smooth fade effect */
    opacity: 0;
    transition: opacity 1s ease-in-out; 
}


/* --- Movies SECTION --- */
#movies {
    height: 100vh; padding: 130px 8% 40px 8%;
    background: linear-gradient(to right, #0d1b1e 20%, transparent), url('jack.jpg') center/cover;
    display: flex; flex-direction:column; justify-content: center;
}
.ott-title { font-size: 50px; font-weight: 300; letter-spacing: 4px; }
.season { margin: 10px 0; font-size: 18px; }
.stars { color: #ffb400; margin-bottom: 10px; }
.meta { color: #888; margin-bottom: 20px; font-size: 14px; }
.action-row { display: flex; gap: 10px; margin-bottom: 25px; }
.play-btn, .plus-btn { background: #00d2b5; border: none; color: white; padding: 12px 25px; cursor: pointer; }
.summary { max-width: 500px; color: #999; font-size: 14px; line-height: 1.5; }
.horizontal-list { display: flex; gap: 50px; margin-top: 70px; padding:20px 0; overflow-x: auto;  scrollbar-width: none; margin-bottom: 80px; }

.item-section{
    margin-top: 90px;

}

     
.item { min-width: 130px; width: 140px; text-align: center;  padding:0;}
.item img { width: 100%; height: 200px; object-fit: cover; border-radius: 4px; display:flex; margin-bottom: 8px; }
.item span { font-size: 12px; color: #777; } 
.item.active { border-bottom: 2px solid #00d2b5; }
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 0 8%;
    
    /* Smooth fade effect */
    opacity: 0;
    transition: opacity 1s ease-in-out; 
}


/* CONTACT */
.contact section{
    margin-top:10px;
}
.contact form{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.contact input,
.contact textarea{
    padding:10px;
    background:#111;
    border:none;
    color:white;
}
.contact button{
    background-color:black;
    width: fit-content;
    align-self: center;
    padding: 10px 25px;
}

.contact button:hover{
    background-color: white;
    color: black;
}
.contact{
    color: white;
    padding:100px 9%;
    min-height:100vh;}

.btn{
    display:inline-block;
    margin-top:20px;
    padding:10px 25px;
    border:2px solid #00d2b5;
    color:white;
    border-radius:30px;
    transition:.3s;
    text-decoration: none;
}

.btn:hover{
    color:black;
    transform: scale(1.3) translateY(-5px);
    background-color:whitesmoke;
      box-shadow: 0 0 25px #00d2b5; }
      
.btn-watch{
    display:inline-block;
    margin-top:20px;
    padding:10px 25px;
    border:2px solid red;
    color:rgb(0, 0, 0);
    border-radius:30px;
    transition:.3s;
    text-decoration: none;
}

.btn-watch:hover{
    color:black;
    transform: scale(1.3) translateY(-5px);
    background-color:whitesmoke;
      box-shadow: 0 0 25px gray; }
      
.play-btn{
    display:inline-block;
    margin-top:20px;
    padding:10px 25px;
    border:2px solid #00d2b5;
    color:white;
    border-radius:30px;
    transition:.3s;
    text-decoration: none;
}

.play-btn:hover{
    color:black;
    transform: scale(1.3) translateY(-5px);
    background-color:whitesmoke;
      box-shadow: 0 0 25px #00d2b5; }
      
.plus-btn{
    display:inline-block;
    margin-top:20px;
    padding:10px 25px;
    border:2px solid #00d2b5;
    color:white;
    border-radius:30px;
    transition:.3s;
    text-decoration: none;
}

.plus-btn:hover{
    color:black;
    transform: scale(1.3) translateY(-5px);
    background-color:whitesmoke;
      box-shadow: 0 0 25px #00d2b5; }