* {
    margin: 0;
    padding: 0;
    font-family: 'Netflix Sans', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'Ubuntu', 'sans-serif';
}

html{
    scroll-behavior: smooth;
}

body{
    scroll-behavior: smooth;
}

.upper-maincontainer {
    background: url("images/background.jpg");
    background-size: cover;
    background-position: center;
}

.inner-container {
    background: linear-gradient(rgba(0, 0, 0, 0.697), rgba(116, 33, 33, 0.5), rgba(39, 36, 36, 0.878), rgba(0, 0, 0, 0.87), black);
}

.main-container {
    backdrop-filter: blur(90px);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 15px 45px;
}

.upper-nevigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    z-index: 2000;
    top: 20px;
    border: 2px solid transparent;
}

.netflix{
    display: flex;
    align-items: center;
}

.netflix img {
    width: 172px;
}

.netflix .small-logo{
    width: 25px;
    display: none;
}

.lan-sign {
    display: flex;
    width: 240px;
    justify-content: space-between;
    align-items: center;
}

.language {
    display: flex;
}

.language select {
    position: inherit;
    z-index: 2000;
    appearance: none;
    padding: 0px 30px;
    height: 35px;
    background-color: rgb(31, 30, 30);
    outline: none;
    border: 1px solid white;
    border-radius: 20px;
    color: rgb(255, 255, 255);
}

.language option{
    align-items: center;
    background-color: white;
    color: black;
}

.language .language-logo .imglanguage {
    position: absolute;
    z-index: 20001;
    top: 32%;
    left: 84%;
}

.language .down-arrow .imagedown {
    position: absolute;
    z-index: 2000;
    right: 10%;
    top: 32%;
}

.signin button {
    width: 122px;
    height: 40px;
    border-radius: 20px;
    border: none;
    outline: none;
    background-color: rgb(255, 255, 255);
    color: rgb(32, 31, 31);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.signin button:hover {
    background-color: rgb(157, 150, 150);
    color: black;
}

.middle-navigation {
    width: 30vw;
    background-color: rgba(13, 13, 13, 0.759);
    padding: 15px 30px;
    margin-left: 32%;
    border-radius: 30px;
    position: sticky;
    top: 80px;
    z-index: 1000;
    border: 2px solid transparent;
}

.navigation ul {
    display: flex;
    gap: 50px;
    align-items: center;
}

.navigation ul li {
    list-style: none;
}

.navigation ul li a {
    text-decoration: none;
    color: rgb(215, 211, 211);
    font-weight: 600;
    transition: 0.4s ease;
}

.navigation ul li a:hover {
    color: white;
}

.firstlist {
    margin-left: 1%;
}

.content-div {
    border: 2px solid transparent;
    width: 44vw;
    height: 45vh;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    text-wrap-style: pretty;
}

.content-div h1 {
    text-align: center;
    color: white;
    font-size: 3.5rem;
    font-weight: 900;
}

.firstheading {
    margin-top: 20%;
}

.content-div h2 {
    font-weight: 600;
    margin-top: 3%;
}

.content-div p {
    font-weight: 600;
    margin-top: 3%;
}

.content-div h2,
p {
    text-align: center;
    color: white;
}

.email-getstart {
    width: 43.6vw;
    margin-left: 26%;
    border: 2px solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#poster-email {
    width: 100%;
    height: 70vh;
    margin-top: 30px;
    border-radius: 30px;
    background: linear-gradient(rgba(18, 17, 17, 0.61), rgba(15, 14, 14, 0.905), rgba(15, 14, 14, 0.925), rgba(104, 101, 101, 0.333));
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.poster-back {
    position: inherit;
    background: url("images/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.email-getstart .Email-textfild input {
    padding: 16px 20px;
    width: 25vw;
    border-radius: 30px;
    border: 1px solid white;
    outline: none;
    font-size: 1.1rem;
    font-weight: 600;
    background-color: rgba(52, 51, 51, 0.759);
    color: white;
}

#emailinput{
    position: absolute;
    top: 68%;
    left: 28%;
    color: white;
    transition: 0.7s ease;
}

.Email-textfild input:focus + label,
.Email-textfild input:not(:placeholder-shown) + label{
    color: black;
}

.getstart-btn button {
    height: 55px;
    width: 15vw;
    border-radius: 30px;
    border: none;
    outline: none;
    font-size: 1.5rem;
    background-color: red;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.getstart-btn img {
    padding-left: 10px;
    color: white;
}

.movies-section {
    overflow: hidden;
}

.movie-cards {
    border: 2px solid transparent;
    padding: 30px;
    position: relative;
}

.movie-cards h1 {
    color: white;
    margin-left: 80px;
}

.movie-c {
    display: flex;
    padding: 15px;
    border: 2px solid transparent;
    overflow-x: auto;
    transition: 0.4s ease;
    margin-left: 80px;
    height: 40vh;
    width: 76vw;
    position: relative;
}

.chhavaa,.wrestlemania1,.court,.pushpa2,.deva,.dragon,.officeronduty,.test,.lambu
,.squiegame{
    position: absolute;
    z-index: 1;
    -webkit-text-stroke: 2px white;
    font-size: 5rem;
}

.movie-c::-webkit-scrollbar{
    display: none;
}

.scrollplushidden{
    display: none;
}

.scrollminushidden{
    display: none;
}

.movie-cards button{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    padding: 40px 10px;
    background-color: rgba(0, 0, 0, 0.675);
    color: white;
    border: none;
    outline: none;
    font-size: 1.5rem;
    font-weight: 100;
    border-radius: 20px;
    z-index: 2000;
    cursor: pointer;
}

#scrollminusx{
    position: absolute;
    top: 35%;
    left: 6%;
}

#scrollplusx{
    position: absolute;
    top: 35%;
    left: 92.5%;
}

.movie1img img {
    width: 160px;
    border-radius: 20px;
    transition: 0.4s ease;
    cursor: pointer;
}

.movie1img img:hover {
    scale: 1.1;
    box-shadow: 0px 0px 10px white;
}

.movie1img {
    border: 2px solid transparent;
    margin-right: 20px;
    width: 165vw;
    height: 60vh;
}

.plansandmore h1 {
    color: white;

}

.plan-sout {
    margin-left: 80px;
}

.plansandmore {
    padding: 0px 30px;
}

.plan-cards {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

.plan-card-container {
    border: 2px solid transparent;
    width: 78vw;
    margin-left: 66px;
}

.card {
    width: 250px;
    height: 250px;
    padding: 15px;
    background: linear-gradient(135deg, #0b0266, #40548b, #170224);
    border-radius: 20px;
    outline: none;
}

.card h1 {
    color: white;
    text-align: left;
}

.card h2 {
    color: white;
    text-align: left;
    font-weight: 600;
}

.card p {
    text-align: left;
    margin-top: 8px;
}

.cardR {
    width: 250px;
    height: 250px;
    padding: 15px;
    border-radius: 20px;
    background-color: rgb(45, 43, 43);
}

.cardR h2 {
    text-align: left;
    color: white;
}

.cardR p {
    text-align: left;
}

.cardR .TV {
    position: sticky;
    top: 60%;
    left: 366px;
}

.cardR .Down {
    position: sticky;
    top: 60%;
    left: 668px;
}

.cardR .Doorbin {
    position: sticky;
    top: 60%;
    left: 969px;
}

.cardR .Imoji {
    position: sticky;
    top: 60%;
    left: 1256px;
}

.rupee {
    margin-top: 5px;
}

.movie1img {
    height: 35vh;
}

.Reason-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    text-wrap-style: pretty;
}

.Morereasons {
    padding: 30px;
    border: 2px solid transparent;

}

.Morereasons h1 {
    color: white;
    margin-left: 80px;
}

.Reason-cards {
    width: 78vw;
    border: 2px solid transparent;
    margin-left: 0%;
}

.Reason-card-container {
    padding: 15px;
    border: 2px solid transparent;
    width: 58vw;
    margin-left: 49px;
}

.Frequentlyask-questions {
    border: 2px solid transparent;
    padding: 7%;
    height: 50vw;
}

.Frequentlyask-questions h1 {
    color: white;
    margin-left: 20px;
    margin-top: -110px;
}

.question-section {
    width: 75vw;
    padding: 15px;
}

.question {
    border: 2px solid transparent;
    display: flex;
    justify-content: space-between;
    padding: 30px;
    border-radius: 20px;
    background-color: rgb(39, 38, 38);
    width: 100%;
    transition: 0.4s ease;
    cursor: pointer;
    margin-top: 10px;
    /*for hover effect background-color: rgb(56, 55, 55);  */
}

.question:hover {
    background-color: rgb(56, 55, 55);
}

.question h3 {
    color: white;
}

.question i {
    color: white;
    font-size: 1.5rem;
    font-weight: 100;
    transition: all 0.1s ease;
}

.rotate{
    transform: rotate(45deg);
}

.footer-section {
    border: 2px solid transparent;
}



.email-gets {
    padding: 5px;
}

.ancor-tag-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    border: 2px solid transparent;
    width: 80vw;
}

.upper {
    border: 2px solid transparent;
    width: 34vw;
    margin-top: 50px;
}

.upper p {
    text-align: center;

}

.upper span {
    text-decoration: underline;
}

.first,
.second,
.third,
.fourth {
    margin-top: 32px;
    width: 295px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.first ul li,
.second ul li,
.third ul li,
.fourth ul li {
    list-style: none;
}

.first ul li a,
.second ul li a,
.third ul li a,
.fourth ul li a {
    color: rgb(255, 255, 255);
    text-align: center;
}

.text {
    width: 29vw;
    margin-top: 40px;
}

.text p {
    text-align: center;
    border: 2px solid transparent;
}

.footer-language {
    border: 2px solid transparent;
    width: 30vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
}

.footer-language button {
    outline: 1px solid white;
    border: none;
    height: 35px;
    width: 120px;
    margin-left: 1%;
    background-color: rgb(31, 30, 30);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}

.footer-language .img1{
    padding-left: 10px;
    padding-right: 10px;
}

.footer-language .img2{
    padding-left: 10px;
    padding-right: 10px;
}

.first ul,
.second ul,
.third ul,
.fourth ul {
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#first-qiediv,
#second-qiediv,
#third-qiediv,
#fourth-qiediv,
#fifth-qiediv,
#sixth-qiediv {
    width: 100%;
    background-color: rgb(39, 38, 38);
    padding: 30px;
    border-radius: 20px;
    margin-top: 10px;
}


#first-qiediv h3,
#second-qiediv h3,
#third-qiediv h3,
#fourth-qiediv h3,
#fifth-qiediv h3,
#sixth-qiediv h3 {
    color: white;
    margin-top: 11px;
}

.first-div,
.second-div,
.third-div,
.fourth-div,
.fifth-div,
.sixth-div {
    display: none;
}

.open {
    display: block;
}

.text{
    border: 2px solid none;
    display: flex;
    justify-content: space-between;
    width: 40vw;
    margin-left: 10%;
}

::-webkit-scrollbar{
    width: 15px;
}

::-webkit-scrollbar-track{
    background-color: black;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb{
    background-color: gray;
    border-radius: 5px;
}

#firstemail input{
    position: relative;
}

#firstemail input:focus{
    border: 2px solid blue;
    font-size: 1rem;
}

#second-emailinput:focus{
    border: 2px solid blue;
    font-size: 1rem;
}

.email-getstart{
    margin-top: 15px;
}


@media only screen and (max-width: 1429px){
    .middle-navigation{
        width: 35vw;
    }
    .middle-navigation ul{
        margin-left: 25px;
    }
    #languageimg{
        position: absolute;
        top: 35%;
        left: 82.6%;
    }
    #downimg{
        position: absolute;
        top: 35%;
        left: 88%;
    }
    #second-email-label{
        position: absolute;
        top: 87%;
    }
    .email-getstart{
        margin-top: 69px;
    }
    
}

@media only screen and (max-width: 1296px) {
    .middle-navigation{
        width: 36vw;
        margin-left: 30%;
    }
    .content-div{
        width: 46vw;
    }
    #languageimg{
        position: absolute;
        top: 35%;
        left: 80.7%;
    }
    #downimg{
        position: absolute;
        top: 35%;
        left: 86.5%;
    }
    .plan-cards{
        display: flex;
        flex-wrap: wrap;
    }
    .Reason-cards{
        display: flex;
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 1290px){
    .content-div{
        width: 49vw;
    }
}

@media only screen and (max-width: 1261px) {
    .middle-navigation{
        width: 39vw;
        margin-left: 26%;
    }
    .content-div{
        width: 49vw;
    }
    .text{
        width: 45vw;
    }
    .email-getstart{
        width: 45vw;
    }
}

@media only screen and (max-width:1201px) {
    .content-div{
        width: 55vw;
    }
    #languageimg{
        position: absolute;
        top: 35%;
        left: 78.9%;
    }
    #downimg{
        position: absolute;
        top: 35%;
        left: 85.5%;
    }
}

@media only screen and (max-width: 1165px) {
    .middle-navigation{
        width: 45vw;
        margin-left: 22%;
    }
    .Reason-cards{
        display: flex;
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 1161px) {
    #languageimg{
        position: absolute;
        top: 35%;
        left: 78%;
    }
    #downimg{
        position: absolute;
        top: 35%;
        left: 84.5%;
    }
    .text{
        width: 50vw;
    }
}


@media only screen and (max-width: 1094px) {
    #languageimg{
        position: absolute;
        top: 35%;
        left: 77%;
    }
    #downimg{
        position: absolute;
        top: 35%;
        left: 83.5%;
    }
    .text{
        width: 50vw;
    }
    .ancor-tag-section{
        display: flex;
        flex-wrap: wrap;
    }
    .TV{
        margin-left: 180px;
    }
    .Down{
        margin-left: 177px;
    }
}

@media only screen and (max-width: 1079px) {
    .content-div{
        width: 65vw;
    }
    .email-getstart{
        margin-top: 85px;
        width: 47vw;
    }
    .email-getstart button{
        width: 180px;
    }
}

@media only screen and (max-width: 1051px) {
    .text{
        width: 55vw;
    }
    #languageimg{
        position: absolute;
        top: 35%;
        left: 76%;
    }
    #downimg{
        position: absolute;
        top: 35%;
        left: 83%;
    }
}

@media only screen and (max-width: 1009px) {
    #languageimg{
        position: absolute;
        top: 35%;
        left: 75%;
    }
    #downimg{
        position: absolute;
        top: 35%;
        left: 82%;
    }
    .middle-navigation{
        width: 50vw;
        margin-left: 18%;
    }
    .email-getstart{
        width: 50vw;
        margin-left: 22%;
    }
    .movie-cards{
        margin-left: -6%;
    }
    #it-plans{
        margin-left: -6%;
    }
    #reason-tojoin{
        margin-left: -6%;
    }
    #FAQ{
        margin-left: -6%;
    }
}

@media only screen and (max-width: 927px) {
    #languageimg{
        position: absolute;
        top: 35%;
        left: 72%;
    }
    #downimg{
        position: absolute;
        top: 35%;
        left: 80.5%;
    }
    .text{
        width: 60vw;
    }
    .upper-content-footer{
        margin-top: 20px;
    }
    .poster-back{
        background-image: url("images/smallbackground.gif");
        background-size: cover;
        background-position: center;
    }
    #poster-email{
        background: none;
    }
}

@media only screen and (max-width: 909px) {
    .content-div{
        width: 70vw;
    }
    .email-getstart{
        width: 52vw;
    }
}

@media only screen and (max-width: 908px) {
    .middle-navigation{
        display: none;
    }
}

@media only screen and (max-width: 891px) {
    #languageimg{
        position: absolute;
        top: 35%;
        left: 70.5%;
    }
    #downimg{
        position: absolute;
        top: 35%;
        left: 78.9%;
    }
    .upper-content-footer{
        margin-top: 40px;
    }
}

@media only screen and (max-width: 858px) {
    .upper-content-footer{
        margin-top: 60px;
    }
    .text{
        width: 70vw;
    }
}

@media only screen and (max-width: 836px) {
    .poster-back{
        padding: 0px;
    }
    .content-div{
        margin-top: -10px;
        width: 80vw;
    }
    .email-getstart{
        width: 55vw;
        margin-left: 17%;
    }
    #languageimg{
        position: absolute;
        top: 35%;
        left: 68.5%;
    }
    #FAQ h1{
        margin-top: -12px;
    }
}

@media only screen and (max-width: 803px) {
    #languageimg{
        position: absolute;
        top: 35%;
        left: 67%;
    }
    #downimg{
        position: absolute;
        top: 35%;
        left: 76.9%;
    }
    .upper-content-footer{
        margin-top: 190px;
    }
    .movie-cards{
        margin-left: -10%;
    }
    #it-plans{
        margin-left: -10%;
    }
    #reason-tojoin{
        margin-left: -10%;
    }
}

@media only screen and (max-width: 757px) {
    .content-div{
        margin-top: -30%;
    }
    .poster-back{
        margin-top: 35%;
    }
    .text{
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    #languageimg{
        position: absolute;
        top: 35%;
        left: 65%;
    }
    #downimg{
        position: absolute;
        top: 35%;
        left: 74.9%;
    }
    .upper-content-footer{
        margin-top: 250px;
    }
    .poster-back{
        height: 90vh;
    }
}

@media only screen and (max-width: 742px) {
    .email-getstart{
        margin-top: 150px;
        width: 60vw;
    }
    #languageimg{
        position: absolute;
        top: 35%;
        left: 61%;
    }
    #downimg{
        position: absolute;
        top: 35%;
        left: 72.9%;
    }
}

@media only screen and (max-width: 700px) {
    .upper{
        width: 50vw;
        margin-left: 20%;
    }
}

@media only screen and (max-width: 697px) {
    .question-section{
        margin-left: -10px;
    }
    .main-question{
        width: auto;
    }
    .upper-content-footer{
        margin-top: 550px;
    }
    #bottm-email{
        margin-top: 20px;
    }
    #FAQ{
        margin: auto;
    }
}

@media only screen and (max-width: 661px) {
    #languageimg{
        position: absolute;
        top: 35%;
        left: 59%;
    }
    #downimg{
        position: absolute;
        top: 35%;
        left: 70.9%;
    }
}

@media only screen and (max-width: 628px) {
    #languageimg{
        position: absolute;
        top: 35%;
        left: 56%;
    }
    #downimg{
        position: absolute;
        top: 35%;
        left: 68.9%;
    }
    .upper-content-footer{
        margin-top: 590px;
    }
    .email-getstart{
        width: 65vw;
        margin-left: 10%;
    }
    .netflix .small-logo{
        display: block;
    }
    .netflix img{
        display: none;
    }
}

/* હજી રિસ્પોંસિવ બનાવવાની બાકિ છે. મિડિયા ક્વેરી નિચે લખવાની છે. */