@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

body {
    background-color: #282828;
    overflow-x: hidden;
}

nav {
    background-color: #2c2e30;
    display: flex;
    align-items: center;
    height: 120px;
    padding: 0 100px;
}

nav .logo {
    cursor: pointer;
}

nav .nav-items {
    display: flex;
    flex: 1;
    padding: 0 0 0 40px;
    margin-left: 330px;
}

nav .nav-items a {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    padding: 5px;
    margin-right: 15px;
}


nav .nav-items a i {
    color: yellow;
    padding: 5px;
}

nav form {
    display: flex;
    height: 40px;
    padding: 2px;
    background: #1e232b;
    min-width: 18% !important;
    border-radius: 30px;
    border: 1px solid rgba(155, 155, 155, 0.2);
}

nav form .search-data {
    width: 100%;
    height: 100%;
    padding: 0 10px;
    color: #fff;
    font-size: 17px;
    border: none;
    font-weight: 500;
    background:None;
}
nav form button
{
  padding:0 15px;
  color:black;
  font-size:17px;
  background: yellow;
  border: none;
  border-top-right-radius: 17px;
  border-bottom-right-radius: 17px;
  cursor: pointer;
}
nav form button{
    background: yellow;
}
.content
{
    margin-top: 30px;
    text-align: center;
    color:#fff;
}
.content h1{
    justify-content: space-between;
    letter-spacing: 5px;
    font-family: "EB Garamond", serif;

}
.content p{
    margin-top: 30px;
}
.movie-items
{
    width:100%;
    height: 10%;
    margin-top: 30px;
    margin-left: 1%;
    padding:20px;
}
.row {
    display: flex;
    flex-wrap: wrap;
}
.column {
    width: 16.66%;
    box-sizing: border-box;
    padding: 5px; /* Optional: adds some space around images */
}
.column img {
    width: 100%;
    height: 70%;
    object-fit: cover; /* This ensures the images cover the entire area */
}
.row::after{
    content:"";
    clear:both;
    display:table;
}
.column h4,p{
    color: #fff;
}
.column:hover {
    transform: scale(1.1); /* Scale the column to 1.1 times its size */
}
/* 2nd page coding*/
.content p img{
    float: left;
    margin-left: 60px;
    border-radius: 10px
    
}
.title
{
    font-size:50px;
    font-weight:bold;
    text-align:left;
    margin-left: 340px;

}
.year
{
    font-size:30px;
    margin-top: 30px;
    text-align:left;
    margin-left: 340px;
}
.genres
{
    font-size:20px;
    text-align:left;
    margin-left: 340px;
}
.cast span{
    font-weight: bold;
    color:#fff;
}
.cast{
    margin-top: 30px;
    font-size: 15px;
    margin-left: 340px;
    color: rgb(82,78,78);
    text-align: left;
}
.director span
{
    font-weight: bold;
    color:#fff;
}
.director{
    margin-top: 30px;
    font-size: 15px;
    margin-left: 340px;
    color: rgb(82,78,78);
    text-align: left;

}
.buttons
{
    margin-top: 5%;
}
.btn
{
 text-decoration: none;
 color: #fff;
 margin-top: 30px;

}
.btn1
{
    border: 2px solid black;
    background-color: black;
    margin-left: 50px;
    padding: 20px 40px 20px 40px;
    font-size: 20px;
}
.btn2
{
    border: 2px solid black;
    background-color: yellow;
    margin-left: 50px;
    padding: 20px 40px 20px 40px;
    font-size: 20px;
    color: black;
}
.video
{
    margin-top: 980px;
    padding: 40px;
    padding-bottom: 0px;
    margin: 40px;
    margin-bottom: 0px;
    border:none;
   
}
.syn
{
    margin-left: 70px;
    margin-top: 40px;
}
.syn span{
    color:rgb(8,205,8);
    font-weight:bold;
    color: yellow;
}
#footer
{
    background-color: #1e232b;
    margin-top: 20px;
    height: 90px;
}
#footer a
{
text-decoration: none;
color: #fff;
margin-top: 10px;
}
.alignleft
{
    float:left;
    padding: 30px;
    margin-left: 40px;
}
.alignright
{
    float:right;
    padding: 30px;
    margin-right: 40px;
}