@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

:root {--primary: #ff3700;}
body {background: #000; font-family: 'poppins', sans-serif;}
header {position: absolute; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 30px 100px; z-index: 10;}
.logo {font-size: 40px; color: #fff; letter-spacing: 1px; font-weight: 800;}
.nav {display: flex;}
.nav li {list-style: none; margin: 0 10px;}
.nav li a {text-decoration: none; color: #fff; letter-spacing: 1px; font-weight: 500; transition: 0.3s; cursor: pointer;}
.nav li:hover a {color: var(--primary);}
.search {position: relative; width: 300px; height: 40px;}
.search input {position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); outline: none; border-radius: 4px; padding: 0 10px 0 45px !important; backdrop-filter: blur(10px);}
.search input::	placeholder {color: #fff;}
.search i {position: absolute; top: 50%; transform: translateY(-50%); left: 10px; padding-right: 10px; border-right: 1px solid #fff; color: #fff;}
.banner {position: relative; width: 100%; min-height: 100vh; padding: 0px 100px; display: flex; justify-content: space-between; align-items: center; background: url(../img/movies/bg-little-mermaid.jpg) no-repeat; background-size: cover; background-position: center; overflow: hidden; transition: 0.5s;}
.banner::before {position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);}


.content {position: relative; max-width: 550px; display: none; visibility: hidden; transform: scale(1); transition: 0.5s;}
.content.active {display: block; visibility: visible; transform: scale(1); transition: 0.5s}
.movie-title {max-width: 250px;}
.banner .content h4 {color: rgba(255, 255, 255, 0.5); font-weight: 400; font-size: 30px;}
.banner .content h4 span {padding: 0px 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);}
.banner .content h4 span:first-child {padding-left: 0px;}
.banner .content h4 span:last-child {border-right: none;}
.banner .content h4 span i {background: var(--primary); color: #fff; padding: 0px 8px; display: inline-block; border-radius: 2px;}
.banner .content p {color: #fff; font-size: 16px; font-weight: 300; line-height: 1.5em; margin: 10px 0px 20px;}
.banner .content .button {position: relative;}
.banner .content .button a {position: relative; display: inline-block; margin-right: 10px; background: var(--primary); color: #fff; padding: 6px 20px; text-decoration: none; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; transition: 0.5s; cursor: pointer;}
.banner .content .button a:nth-child(2) {background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.2);}
.banner .content .button a:hover:nth-child(2) {background: var(--primary); border: 1px solid rgba(255, 255, 255, 0.2);}
.banner .carousel-box {position: relative; min-width: 950px; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.2); box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border-radius: 20px;}
.banner .carousel-box .carousel {position: relative; height: 550px; perspective: 1500px;}
.banner .carousel-box .carousel .carousel-item {width: 250px; cursor: pointer;}
.banner .carousel-box .carousel .carousel-item img {width: 235px; border-radius: 10px; transform: translateX(8px) translateY(-100px); object-fit: cover; object-position: center;}
.play {position: absolute; bottom: 50px; left: 100px; display: inline-flex; justify-content: flex-start; align-items: center; text-decoration: none; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; font-size: 1.2em; cursor: pointer !important; transition: 0.3s;}
.play i {margin-right: 10px; font-size: 40px; cursor: pointer;}
.play i:hover {color: var(--primary)}
.social-icon {position: absolute; bottom: 50px; right: 100px; display: inline-flex; justify-content: center; align-items: center; gap: 25px;}
.social-icon a {color: #fff; text-decoration: none; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; font-size: 25px; transition: 0.3s; cursor: pointer;}
.social-icon a:hover {color: var(--primary)}
.trailer {position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 100; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(20px); visibility: hidden; opacity: 0; transition: 0.5s;}
.trailer:active {visibility: visible; opacity: 1;}
.trailer video {max-width: 900px; outline: none;}
.close {position: absolute; top: 30px; right: 30px; cursor: pointer; filter: invert(1); max-width: 30px;}