* {
    font-family: 'Netflix Sans';
    list-style: none;
}

:root {
    --color-black: #000;
    --color-red: #ff0000;
    --color-placeholder: #b0b8b8;
    --input-bg-color:#12110fbb;
    --input-border-color:#645b5b;
    --color-light-gray:#babbc4;
    --bg-faq:#2d2d2d;
    --bg-faq-hover:#414141;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

.color-placeholder{
    color: var(--color-placeholder);
}

/*##################################################
                    header
####################################################*/

.header {
    padding: 25px;
    background-color: transparent;
    z-index: 2;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #000000cc 0%, #000000c9 8.333%, #000000c1 25.67%, #000000b3 33%, #0000009f 43.33%, #00000085 50.67%, #00000066 59%, #00000047 68.33%, #0000002d 73.67%, #0000001a 81%, #0000000b 90.33%, #00000003 100.67%, #00000000 100.0%);
}

.logo svg {
    width: 150px;
}

.logo svg path {
    fill: var(--color-red);
}


/*##################################################
                    Main
####################################################*/

.banner {
    position: relative;
    background-image: url('../images/home-banner.jpg');
    background-size: cover;
    height: 100vh;
    z-index: 1;
}

.banner::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--color-black);
    opacity: 0.7;
    z-index: 1;
}

.banner-wrapper {
    margin-top: 200px !important;
    position: relative;
    z-index: 10;
}

.title h1 {
    max-width: 700px;
}

/* input part */


.input-part input{
    width: 400px;
    height: 50px;
    color: var(--color-white);
    font-size: 18px;
    border-radius: 5px;
    border: 1px solid var(--input-border-color);
    padding: 10px;
    background-color: var(--input-bg-color) ;
}

.input-part input::placeholder{
    color: var(--color-placeholder);
}

@media (max-width : 440px) {
    .input-part input {
        width: 100%;
    }

}
/*---- parting line ----*/

.parting-line {
    position: relative;
    height: 5px;
}

.parting-line::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin-top: -.25rem;
    border-radius: inherit;
    background: linear-gradient(to right, rgba(33, 13, 22, 1) 16%, rgba(184, 40, 105, 1), rgba(229, 9, 20, 1), rgba(184, 40, 105, 1), rgba(33, 13, 22, 1) 84%);
}

/*##################### trending now ######################*/
.trending-card{
    position: relative;
    cursor: pointer;
    margin: 20px;
     width: 180px;
    height: 250px;
    border-radius: 10px;
    background: linear-gradient(149deg, #192247 0%, #210e17 99.08%);
    transition: all 0.2s linear;
}

.trending-card:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 1px var(--color-white);
}

.trending-card span{
    position: relative;
}

.trending-card span::before{
    content: attr(data-content);
    position: absolute;
    font-weight: 700;
    font-size: 100px;
    top: 118px;
    left: -24px;
    color: var(--color-black);
    text-shadow: 0 0 25px var(--color-black);
    -webkit-text-stroke: 3px rgb(202, 202, 202);
}

/* -- images -- */
.trending-img1{
    background-image: url('../images/saiyaara.webp');
    background-size: 100% 100%;
}

.trending-img2{
    background-image: url('../images/wednesday.webp');
    background-size: 100% 100%;
}

.trending-img3{
    background-image: url('../images/the-ba-of-bollywoods.webp');
    background-size: 100% 100%;
}

.trending-img4{
    background-image: url('../images/the-kapil-sharma-show.webp');
    background-size: 100% 100%;
}

/*##################### reason to join ######################*/

.reason-to-join .join-card{
    padding: 20px;
    height: 300px;
    border-radius: 10px;
    
    background: linear-gradient(149deg, #192247 0%, #210e17 96.86%);
    position: relative;
}

@media (max-width : 576px) {

    .reason-to-join .join-card{
        height: 200px;
    }
    
}

.join-card .join-card-icons{
    position: absolute;
    bottom: 10px;
    right: 8px;
}

.reason-to-join .join-card p{
    color: var(--color-light-gray);
}

/*##################### faq ######################*/

.question{
    background-color: var(--bg-faq);
    font-size: 25px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s linear;
}

.question:hover{
    background-color: var(--bg-faq-hover);
}

/*##################### end get started ######################*/

.end-input-part{
    margin: 20px 0;
}

.end-input-part input{
    width: 560px;
    height: 50px;
    color: var(--color-white);
    font-size: 18px;
    border-radius: 5px;
    border: 1px solid var(--input-border-color);
    padding: 10px;
    background-color: var(--input-bg-color) ;
}

@media (max-width : 615px) {
    .end-input-part input {
        width: 100%;
    }
}

.end-input-part input::placeholder{
    color: var(--color-placeholder);
}

/*##################################################
                    footer
####################################################*/

.footer ins{
    cursor: pointer;
}

.footer li{
    margin-top: 10px;
    text-decoration: underline;
    cursor: pointer;
}