* {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    box-sizing: border-box;
}

body {
    background-color: black;
    color: white;
    max-width: 1400px;
    margin: 0 auto;
}

.hero {
    width: auto;
    /* background-color: black; */
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    height: 100vh;
    background: linear-gradient(7deg, rgba(0, 0, 0, 0.925) 10.00%, rgba(0, 0, 0, 0.8465) 17.25%, rgba(0, 0, 0, 0.8361) 24.50%, rgba(0, 0, 0, 0.8187) 31.75%, rgba(0, 0, 0, 0.7944) 39.00%, rgba(0, 0, 0, 0.7632) 46.25%, rgba(0, 0, 0, 0.7250) 53.50%, rgba(0, 0, 0, 0.6868) 60.75%, rgba(0, 0, 0, 0.6556) 68.00%, rgba(0, 0, 0, 0.6312) 75.25%, rgba(0, 0, 0, 0.6139) 82.50%, rgba(0, 0, 0, 0.6035) 89.75%, rgba(0, 0, 0, 0.6000) 97.00%), url(/Assets/IMG/Hero_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* margin-top: 20px; */
    padding-left: 148px;
    padding-right: 148px;
    margin-bottom: 120px;
    padding-top: 20px;
}

.lang-signup {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.language {
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid white;
    padding: 6px 20px;
    border-radius: 4px;
    color: white;
}

.btn-signup {
    outline: none;
    border: none;
    background-color: rgb(299, 9, 20);
    color: white;
    padding: 7px 20px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.btn-signup:hover {
    background-color: #ce030d;
}

.select-lang {
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 600;
    background-color: inherit;
    color: white;
}

.select-lang option {
    color: black;
}

.main-logo {
    color: rgb(299, 9, 20);
    fill: currentColor;
    display: block;
    width: 9.25rem;
    height: 2.5rem;
}

.main_cont {
    width: 800px;
    align-self: center;
}

.primary-heading {
    font-size: 3.5rem;
    font-weight: 900;
    color: white;
    text-align: center;
    margin-bottom: 1rem;
}

.secondary-heading {
    font-size: 1.25rem;
    text-align: center;
    font-weight: 600;
    color: white;
    margin-bottom: 2rem;
}

.ternary-heading {
    font-size: 1rem;
    text-align: center;
    color: white;
    font-weight: 500;
    margin-bottom: 16px;
}

.getstarted-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Main-input-field {
    width: 400px;
    font-size: 1rem;
    line-height: 1.5;
    padding: 1.5rem 1rem;
    margin-right: 10px;
    border-radius: 4px;
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.btn-getstarted {
    outline: none;
    border: none;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 1.5rem 4rem;
    background-color: rgb(299, 9, 20);
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

.btn-getstarted:hover {
    background-color: #ce030d;
}


/* Section Trending now */
.trending-now {
    padding-left: 148px;
    padding-right: 148px;
    padding-top: 120px;
    padding-bottom: 60px;
    border-top: 3px solid;
    border-image: linear-gradient(to right, #0f0c29, #302b63, #24243e) 1;
}

.trending-header {
    font-size: 25px;
    font-weight: 500;
}

.trending-cards {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}

.card-img {
    width: 190px;
    border-radius: 6px;
}

.card {
    display: inline-block;
    transition: transform 0.5s ease-in-out;
}

.card:hover {
    transform: scale(1.05);
}

.card1,
.card2,
.card3,
.card4,
.card5 {
    position: relative;
}

.card1::after {
    position: absolute;
    content: "1";
    left: -30px;
    bottom: 0;
    color: black;
    font-size: 100px;
    font-weight: 900;
    -webkit-text-stroke: 2px white;
    display: inline-block;
    filter: drop-shadow(20px 20px 10px rgb(0, 0, 0));
}

.card2::after {
    position: absolute;
    content: "2";
    left: -30px;
    bottom: 0;
    color: black;
    font-size: 100px;
    font-weight: 900;
    -webkit-text-stroke: 2px white;
    display: inline-block;
    filter: drop-shadow(20px 20px 10px rgb(0, 0, 0));
}

.card3::after {
    position: absolute;
    content: "3";
    left: -30px;
    bottom: 0;
    color: black;
    font-size: 100px;
    font-weight: 900;
    -webkit-text-stroke: 2px white;
    display: inline-block;
    filter: drop-shadow(20px 20px 10px rgb(0, 0, 0));
}

.card4::after {
    position: absolute;
    content: "4";
    left: -30px;
    bottom: 0;
    color: black;
    font-size: 100px;
    font-weight: 900;
    -webkit-text-stroke: 2px white;
    display: inline-block;
    filter: drop-shadow(20px 20px 10px rgb(0, 0, 0));
}

.card5::after {
    position: absolute;
    content: "5";
    left: -30px;
    bottom: 0;
    color: black;
    font-size: 100px;
    font-weight: 900;
    -webkit-text-stroke: 2px white;
    display: inline-block;
    filter: drop-shadow(20px 20px 10px rgb(0, 0, 0));
}


/* Section More reasons to join */
.more-reason {
    padding-left: 148px;
    padding-right: 148px;
    padding-top: 40px;
    padding-bottom: 60px;
}

.reason-cards {
    margin-top: 10px;
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    gap: 15px;
}

.r-cards {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 260px;
    height: 270px;
    padding: 20px 10px;
    background: linear-gradient(135deg, rgb(26, 32, 66), rgb(29, 24, 46), rgb(32, 15, 26));
    border-radius: 10px;
}

.r-text-2 {
    font-size: 16px;
    font-weight: 500;
    color: #c7c7c7;
}

.r-svg {
    align-self: self-end;
}

.mb-20 {
    margin-bottom: 20px;
}

/* section FAQ */
.FAQ {
    padding-left: 148px;
    padding-right: 148px;
    padding-top: 40px;
    padding-bottom: 80px;
    display: flex;
    color: white;
    flex-direction: column;
}

.FAQ-container {
    display: inline-flex;
    background-color: rgb(50, 50, 50);
    justify-content: space-between;
    align-items: center;
    padding: 26px 16px;
    font-size: 24px;
    letter-spacing: 0.1;
    cursor: pointer;
    transition: all 0.6s;
}

.FAQ-container:hover {
    background-color: rgb(79, 79, 79);
}

.faq-mb {
    margin-bottom: 5px;
}


/* FOOTER */
footer {
    color: rgba(255,
            255,
            255,
            0.7);
    padding-left: 148px;
    padding-right: 148px;
    padding-top: 120px;
    padding-bottom: 60px;
}

.underline {
    text-decoration: underline;
    cursor: pointer;
}

.footer-ele {
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    text-decoration: underline;
}

.footer-ele li {
    cursor: pointer;
}

.mb-45 {
    margin-bottom: 45px;
}

@media only screen and (max-width: 600px) {
    body {
        width: auto;
    }


    .hero {
        height: auto;
    }

    .nav {
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 120px;
        padding-top: 20px;
    }



    .netflix_icon svg {
        width: 120px;
        height: auto;
    }

    .select-lang {
        appearance: none;
        background: transparent;
        border: none;
        width: 0.5px;
    }

    .select-lang option {
        color: black;
    }

    .language {
        display: flex;
        align-items: center;
        gap: 5px;
        position: relative;
        margin-right: 4px;
        padding: 3px 10px;
        font-size: 8px;
    }

    .language::after {
        content: "▼";
        /* Unicode arrow symbol */
        font-size: 12px;
        color: white;
        position: absolute;
        right: 4px;
        pointer-events: none;
    }

    .btn-signup {
        padding: 7px 20px;
        font-size: 16px;
    }

    .main_cont {
        width: 300px;
        align-self: center;
    }

    .primary-heading {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .secondary-heading {
        font-size: 1rem;
        /* font-weight: 600; */
        margin-bottom: 1rem;
    }

    .getstarted-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 60px;
    }

    .Main-input-field {
        width: 300px;
        font-size: 1rem;
        line-height: 1.5;
        padding: 0.7rem 0.5rem;
        margin-left: 0px;
        margin-right: 0px;
    }

    .btn-getstarted {
        font-size: 1rem;
        font-weight: 500;
        padding: 0.7rem 1rem;
        margin-top: 20px;
        margin-left: 0px;
        margin-right: 0px;
    }

    /*  padding-left: 20px;
     padding-right: 20px;
     margin-bottom: 120px;
     padding-top: 20px; */

    .trending-now {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 60px;
        padding-bottom: 60px;
        border-top: 3px solid;
        border-image: linear-gradient(to right, #0f0c29, #302b63, #24243e) 1;
    }

    .trending-header {
        font-size: 18px;
        font-weight: 500;
    }

    .trending-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-items: center;
        gap: 10px;
        margin-top: 15px;
    }

    .card5 {
        grid-column: span 2;
    }

    .card-img {
        width: 130px;
        border-radius: 6px;
    }

    .card1::after {
        font-size: 80px;
    }

    .card2::after {
        font-size: 80px;
    }

    .card3::after {
        font-size: 80px;
    }

    .card4::after {
        font-size: 80px;
    }

    .card5::after {
        font-size: 80px;
    }

    /*  padding-left: 20px;
         padding-right: 20px;
         margin-bottom: 120px;
         padding-top: 20px;
                 .trending-header {
                     font-size: 18px;
                     font-weight: 500;
                 } */

    .more-reason {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 60px;
    }

    .reason-cards {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
    }

    .r-cards {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: auto;
        height: 270px;
        padding: 20px 10px;
        margin: 0 3px;
        background: linear-gradient(135deg, rgb(26, 32, 66), rgb(29, 24, 46), rgb(32, 15, 26));
        border-radius: 10px;
    }

    /*  padding-left: 20px;
             padding-right: 20px;
             margin-bottom: 120px;
             padding-top: 20px;
                     .trending-header {
                         font-size: 18px;
                         font-weight: 500;
                     } */

    .FAQ {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 40px;
        padding-bottom: 80px;
        display: flex;
        color: white;
        flex-direction: column;
    }

    .FAQ-container {
        display: inline-flex;
        background-color: rgb(50, 50, 50);
        justify-content: space-between;
        align-items: center;
        padding: 26px 16px;
        font-size: 22px;
        letter-spacing: 0.1;
        cursor: pointer;
        transition: all 0.6s;
    }

    .ready-to-watch {
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 60px;
    }

    footer {
        color: rgba(255,
                255,
                255,
                0.7);
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .footer-ele {
        list-style-type: none;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        text-decoration: underline;
    }

    .footer-lang {
        display: inline-flex;
    }
}