body{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-color: black;
}
.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: black;
    padding: 10px;
    position: relative;
}
.logo-name{
    font-size: 50px;
    font-weight: bold;
    color: rgb(224, 3, 3);
    position: absolute;
    left: 100px;
}
.nav-links{
    list-style: none;
    display: flex;
    max-width: 0;
    position: relative;
    left: -390px;
}
.nav-links li{
    margin-left: 80px;
    color: white;
    font-size: 18px;
}
.nav-links li a{
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    transition: background-color 1s;
}
.nav-links li a:hover {
    background-color: red;
    color: white;
    border-radius: 20px;
}
#netflix{
    width: 1200px;
    height: 500px;
    padding-left: 0px;
    border-radius: 10px;
    border: 2px solid white;
}
.netflix{
    width: 1200px;
    height: 500px;
    padding-left: 80px;
    opacity: 0.4;
}
.text{
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 60px;
    left: 370px;
    bottom: 150px;
    text-shadow: 1px 1px black;
}
.start{
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 20px;
    left: 500px;
    bottom: 150px;
}
.ready{
    color: white;
    font-size: 20px;
    position: relative;
    left: 400px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.email{
    display: flex;
}
#email{
    position: relative;
    left: 460px;
    background-color: rgb(44, 41, 41);
    border-radius: 50px;
    border: 1px solid white;
    color: white;
    width: 300px;
    height: 50px;
    font-size: 13px;
    padding-left: 10px;
}
#join{
    position: relative;
    left: 470px;
    background-color: red;
    border-radius: 50px;
    border: 1px solid black;
    color: white;
    width: 150px;
    height: 50px;
    font-size: 25px;
    padding-left: 10px;
}
.trending{
    color: white;
    font-size: 40px;
    font-weight: bold;
    position: relative;
    left: 100px;
}
.movies{
    display: flex;
    gap: 40px;
}
.movies img{
    width: 200px;
    height: 300px;
    position: relative;
    left: 90px;
}
.movies1{
    display: flex;
    gap: 40px;
}
.movies1 img{
    width: 200px;
    height: 300px;
    position: relative;
    left: 90px;
}
.number{
    display: flex;
    gap: 210px;
}
.number p{
    font-size: 70px;
    color: white;
    font-weight: bold;
    position: relative;
    left: 60px;
    bottom: 700px;
}
.number1{
    display: flex;
    gap: 210px;
}
.number1 p{
    font-size: 70px;
    color: white;
    font-weight: bold;
    position: relative;
    left: 50px;
    bottom: 600px;
}
.reasons{
    color: white;
    font-size: 40px;
    font-weight: bold;
    position: relative;
    bottom: 400px;
    left: 20px;
}
.join1{
    display: flex;
    gap: 10px;
}
.box1{
    width: 300px;
    height: 150px;
    background-color: rgb(44, 43, 43);
    border: 1px solid white;
    border-radius: 20px;
    font-size: 23px;
    padding-left: 10px;
    padding-top: 10px;
}
.box2{
    width: 300px;
    height: 150px;
    background-color: rgb(44, 43, 43);
    border: 1px solid white;
    border-radius: 20px;
    font-size: 23px;
    padding-left: 10px;
    padding-top: 10px;
}
.box3{
    width: 300px;
    height: 150px;
    background-color: rgb(44, 43, 43);
    border: 1px solid white;
    border-radius: 20px;
    font-size: 23px;
    padding-left: 10px;
    padding-top: 10px;
}
.box4{
    width: 300px;
    height: 150px;
    background-color: rgb(44, 43, 43);
    border: 1px solid white;
    border-radius: 20px;
    font-size: 23px;
    padding-left: 10px;
    padding-top: 10px;
}
#handstar{
    position: absolute;
    left: 250px;
    padding-top: 60px;
}
#handshake{
    position: absolute;
    left: 570px;
    padding-top: 70px;
}
#heart{
    position: absolute;
    left: 900px;
    padding-top: 100px;
}
#tv{
    position: absolute;
    left: 1210px;
    padding-top: 70px;
}
.questions{
    color: white;
    font-size: 50px;
    font-weight: bold;
    position: relative;
    left: 150px;
    bottom: 350px;
}
.q1{
    width: 900px;
    height: 60px;
    position: relative;
    left: 80px;
    background-color: rgb(44, 43, 43);
    font-size: 30px;
    padding-left: 10px;
    padding-top: 10px;
    border: 1px solid white;
    border-radius: 10px;
}
.q2{
    width: 900px;
    height: 60px;
    position: relative;
    left: 80px;
    background-color: rgb(44, 43, 43);
    font-size: 30px;
    padding-left: 10px;
    padding-top: 10px;
    border: 1px solid white;
    border-radius: 10px;
}
.q3{
    width: 900px;
    height: 60px;
    position: relative;
    left: 80px;
    background-color: rgb(44, 43, 43);
    font-size: 30px;
    padding-left: 10px;
    padding-top: 10px;
    border: 1px solid white;
    border-radius: 10px;
}
.q4{
    width: 900px;
    height: 60px;
    position: relative;
    left: 80px;
    background-color: rgb(44, 43, 43);
    font-size: 30px;
    padding-left: 10px;
    padding-top: 10px;
    border: 1px solid white;
    border-radius: 10px;
}
.q5{
    width: 900px;
    height: 60px;
    position: relative;
    left: 80px;
    background-color: rgb(44, 43, 43);
    font-size: 30px;
    padding-left: 10px;
    padding-top: 10px;
    border: 1px solid white;
    border-radius: 10px;
}
.q6{
    width: 900px;
    height: 60px;
    position: relative;
    left: 80px;
    background-color: rgb(44, 43, 43);
    font-size: 30px;
    padding-left: 10px;
    padding-top: 10px;
    border: 1px solid white;
    border-radius: 10px;
}
.q1 img{
    position: absolute;
    left: 850px;
    padding-top: 10px;
}
.q2 img{
    position: absolute;
    left: 850px;
    padding-top: 10px;
}
.q3 img{
    position: absolute;
    left: 850px;
    padding-top: 10px;
}
.q4 img{
    position: absolute;
    left: 850px;
    padding-top: 10px;
}
.q5 img{
    position: absolute;
    left: 850px;
    padding-top: 10px;
}
.q6 img{
    position: absolute;
    left: 850px;
    padding-top: 10px;
}
#join2{
    position: relative;
    bottom: 300px;
    left: 580px;
    background-color: red;
    color: white;
    font-size: 20px;
    width: 150px;
    height: 50px;
    border: 1px solid red;
    border-radius: 50px;
}
.a{
    color: white;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    left: 340px;
    bottom: 250px;
}
.ques{
    font-size: 15px;
    color: white;
    position: relative;
    left: -400px;
    bottom: 200px;
}
.call{
    display: flex;
    gap: 50px;
}
.c1{
    color: white;
    font-size: 15px;
    width: 200px;
    height: 200px;
    position: relative;
    left: 200px;
    bottom: 180px;
    text-decoration: underline;
    background-color: black;
}
.b{
    font-size: 15px;
    font-weight: bold;
    color: white;
    position: relative;
    left: -400px;
}
@media screen and (max-width: 700px) {
    /* navbar  */
    .navbar {
        height: auto;
    }
    .logo-name {
        font-size: 20px;
        margin: 10px;
    }
    nav ul {
        display: none; /* Hide navigation links initially */
        flex-direction: column;
        background: rgb(0, 0, 0);
        position: absolute;
        top: 90px;
        width: 100%;
        padding: 0;
    }
    .nav-links li {
        display: block;
        text-align: center;
    }
    #toggle-menu {
        display: block;
    }
    .hamburger { 
        display: none; 
        cursor: pointer; 
        width: 30px; 
        height: 25px; 
        flex-direction: column; 
        justify-content: space-between; 
        align-items: center; 
    } 
    .hamburger span { 
        display: block; 
        width: 100%; 
        height: 4px;
        background-color: #333; 
        transition: all 0.3s; 
    }
    #netflix{
        height: 300px ;
        width: 500px;
        margin-left: -50px;
        align-items: center;
    }
    .text{
        font-size: 20px;
        align-items: center;
        margin-bottom: 150px;
        margin-left: -180px;
    }
    .start{
        font-size: 10px;
        align-items: center;
        margin-bottom: 150px;
        margin-left: -300px;
    }
    .ready{
        font-size: 15px;
        margin-left: -350px;
        bottom: 150px;
    }
    #email{
        font-size: 10px;
        width: 100px;
        height: 50px;
        margin-left: -300px;
        bottom: 150px;
    }
    #join{
        font-size: 10px;
        width: 100px;
        height: 50px;
        bottom: 150px;
    }
    .trending{
        font-size: 20px;
        bottom: 100px;
    }
    .movies{
        display: inline;
    }
    .movies1{
        display: inline;
    }
    .number p{
        font-size: 20px;
        display: inline;
    }
    .number1 p{
        font-size: 20px;
        display: inline;
    }
    .reasons{
        font-size: 20px;
    }
    .join1{
        display: flex;
    }
    .box1{
        width: 200px;
        height: 100px;
        font-size: 15px;
    }
    .box2{
        width: 200px;
        height: 100px;
        font-size: 15px;
    }
    .box3{
        width: 200px;
        height: 100px;
        font-size: 15px;
    }
    .box4{
        width: 200px;
        height: 100px;
        font-size: 15px;
    }
    #handstar{
        width: 30px;
        height: 30px;
        margin-left: -180px;
        bottom: 10px;
    }
    #handshake{
        width: 30px;
        height: 30px;
        margin-left: -380px;
        bottom: 10px;
    }
    #heart{
        width: 30px;
        height: 30px;
        margin-left: -580px;
        bottom: 10px;
    }
    #tv{
        width: 30px;
        height: 30px;
        bottom: 10px;
        margin-left: -770px;
    }
    .questions{
        font-size: 20px;
        left: 10px;
    }
    .q1{
        font-size: 15px;
        width: 250px;
        height: 30px;
        left: 10px;
    }
    .q2{
        font-size: 15px;
        width: 250px;
        height: 30px;
        left: 10px;
    }
    .q3{
        font-size: 15px;
        width: 250px;
        height: 30px;
        left: 10px;
    }
    .q4{
        font-size: 15px;
        width: 250px;
        height: 30px;
        left: 10px;
    }
    .q5{
        font-size: 15px;
        width: 250px;
        height: 30px;
        left: 10px;
    }
    .q6{
        font-size: 15px;
        width: 250px;
        height: 30px;
        left: 10px;
    }
    .q1 img{
        left: 230px;
        bottom: 10px;
        width: 20px;
        height: 20px;
    }
    .q2 img{
        left: 230px;
        bottom: 10px;
        width: 20px;
        height: 20px;
    }
    .q3 img{
        left: 230px;
        bottom: 10px;
        width: 20px;
        height: 20px;
    }
    .q4 img{
        left: 230px;
        bottom: 10px;
        width: 20px;
        height: 20px;
    }
    .q5 img{
        left: 230px;
        bottom: 10px;
        width: 20px;
        height: 20px;
    }
    .q6 img{
        left: 230px;
        bottom: 10px;
        width: 20px;
        height: 20px;
    }
    #join2{
        width: 100px;
        height: 50px;
        font-size: 15px;
        left: 100px;
    }
    .a{
        font-size: 10px;
        left: -40px;
    }
    .ques{
        font-size: 15px;
        left: 5px;
    }
    .call{
        display: block;
    }
}