style.css

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: #000000;

}
.main{
    background-image: url("clearoff.jpg");
    background-position: center center;
    background-size: max(1000px, 100vw);
    background-repeat: no-repeat;
    height: 65vh;
    position: relative;
    top: 0;
    border-bottom: 6px solid #232323;

}
.main .box{
    height: 65vh;
    background-image: linear-gradient(to top, #000000bb 70%, #00000090 0%, #000000bd 40%);
    position: absolute;
    opacity: 1;
    top: 0;
    width: 100%;

}
.nav{
    max-width: 80vw;
    max-height: 10vh;
    margin: auto;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 2vh;
    z-index: 1;

}
nav > span > img{
    width: 120px;
    height: 4vh;

}
.Signin{
    padding: 3px 9px;
    border-radius: 4px;
    background: #e50914;
    border: none;
    width: 60px;
    height: 25px;
    color: white;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: 700;
    border-radius: 0.25rem;
    cursor: pointer;
    position: relative;
    transition-duration: 250ms;
    transition-property: background-color,border-color;
    transition-timing-function: cubic-bezier(0.9, 0, 0.51, 1);
}
.Signin:hover{
    background: #C11119;
    
}
.all-hero{
    width: 60vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    margin: auto;
    transform: translateY(20vh);
    padding: 10px;
    text-align: center;

}

.hero{
    width: 58vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    margin: auto;
    
}

.hero > p:nth-child(1)
{
    color: white;
    font-size: 35px;
    font-family: 'Martel Sans';
    font-weight: 900;


}

.hero > p:nth-child(2)
{
    color: white;
    font-size: 18px;
    font-weight: 400;
    font-family: sans-serif;
    line-height: 50px;
}

.hero > p:nth-child(3)
{
    color: white;
    font-size: 15px;
    font-family: sans-serif;
    font-weight: 100;
    line-height: 40px;
}

.inputs-1{
    width: 50vw;
    height: 8vh;
    display: flex;
    justify-content: center;
    align-items: center;

}
form{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;

}

form > input{
    color: white;

}
form > input:nth-child(1){
    background: #0F0F0F;
    width: 250px;
    height: 35px;
    padding: 2px 10px;
    border: 1px solid #949494;
    border-radius: 4px;
    opacity: .8;
    color: white;

}
form .btn{
    border: 0;
    border-radius: 0.25rem;
    cursor: pointer;
    position: relative;
    transition-duration: 250ms;
    transition-property: background-color,border-color;
    transition-timing-function: cubic-bezier(0.9, 0, 0.51, 1);
    width: 160px;
    font-size: 1.125rem;
    font-weight: 600;
    height: 41px;
    padding: 0.5rem 1rem;
    background-color: #e50914;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

form .btn:hover{
    background-color: #C11119;
}

/*First section*/
.section{
    height: 60vh;
    padding: 15px;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-bottom: 6px solid #232323;

}
.hero2{
    height: 50vh;
    width: 80vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    align-content: center;
    gap: 10px;
}
.hero2-text{
    text-align: left;
    color: #ffffff;
    width: 35vw;
    height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

}
.hero2-text > p:nth-child(1){
    color: white;
    font-size: 40px;
    font-family: 'Martel Sans';
    font-weight: 900;

}

.hero2-text > p:nth-child(2){
    color: white;
    font-size: 17px;
    font-family: 'Martel Sans';
    font-weight: 400;
    line-height: 25px;


}
.hero2 .img{
    width: auto;
    height: auto;
    position: relative;
    z-index: 1;
}
.hero2 .img img{
    width: 375px;
    height: 330px;
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;

    
}
.hero2 .img video{
    width: 320px;
    height: 190px;
    position: absolute;
    top: 60px;
    right: 2px;
    z-index: -1;
}

/*Second section*/

.hero3,.hero4{
    height: 50vh;
    width: 80vw;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-evenly;
    align-content: center;
    gap: 10px;
}
.hero3-text,.hero4-text{
    color: #ffffff;
    width: 50vw;
    height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

}
.hero3-text > p:nth-child(1),.hero4-text > p:nth-child(1){
    color: white;
    font-size: 35px;
    line-height: 50px;
    font-family: 'Martel Sans';
    font-weight: 900;

}

.hero3-text > p:nth-child(2),.hero4-text > p:nth-child(2){
    color: white;
    font-size: 15px;
    font-family: 'Martel Sans';
    font-weight: 400;
    line-height: 25px;


}
.hero3 .img{
    width: 50vw;
    height: 50vh;
    position: relative;
    z-index: 1;
}

.hero4 .img{
    width: 40vw;
    height: 40vh;
    z-index: 1;
}
.hero3 .img img, .hero4 .img img{
    width: 38vw;
    height: 48vh;
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    z-index: 1;
  
}
.img-box{
    width: 260px;
    height: 80px;
    border: solid .005em #333333;
    position: relative;
    background-color: #000000;
    left: 110px;
    top: -110px;
    z-index: 2;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 50px 1fr 40px;
    align-items: center;
    padding: 0 15px 0 10px;
    gap: 10px;

}
.img .img-box img{
    width: 45px; 
    height: 60px;



}
.img .img-box .img-box-text{
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    
}
.img .img-box .img-box-text > span:nth-child(1){
    color: #ffffff;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: 600;
}
.img .img-box .img-box-text > span:nth-child(2){
    color: #0071EB;
    font-family: sans-serif;
    font-size: 12px;

}
.img .img-box .inside-box-gif{
    width: 45px;
    height: 45px;
    background-image: url("https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/download-icon.gif");
    z-index: 5;
    background-size: cover;
}
/*FAQ Section*/
.section-FAQ{
    height: auto;
    padding: 40px 0 0 0;
    border-bottom: 6px solid #232323;
}

.FAQ-text{
    
    width: 50vw;
    height: 8vh;
    color: #ffffff;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;

}

.FAQ-text > span{
    height: 7vh;
    font-family: 'Martel Sans';
    font-weight: 900;
    font-size: 35px;
    margin: auto;
    letter-spacing: -1px;
}
.section-FAQ .Questions{
    width: 85vw;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;

}
.section-FAQ .Questions .Questions-child{
    display: flex;
    align-items: center;
    gap: 1px;
    flex-direction: column;
    font-size: 35px;
    transform: 0.9s;
}
.section-FAQ .Questions .Questions-child .icon{
    transform: rotate(45deg);
}
.section-FAQ .Questions .quss{
    cursor: pointer;
    padding: 15px 15px;
    width: 72vw;
    height: 5vh;
    background-color: #2D2D2D;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition-property: background-color;
    transition-property: display;
    transition-duration: 1s;
}

.section-FAQ .Questions .quss:hover{
    background-color: #414141;
}
.quss-anss{
    color: #ffffff;
    padding: 15px;
    width: 72vw;
    font-size: 18px;
    font-family: 'Martel Sans';
    font-weight: 500;
    background-color: #2D2D2D;
    display: none;
}
.quss-anss.show{
    display: block;
}
.section-FAQ .Questions .qus{
    color: #ffffff;
    font-size: 18px;
    font-family: 'Martel Sans';
    font-weight: 500;
}

.FAQ-last-text{
    width: 50vw;
    height: 7vh;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.FAQ-last-text > span{
    color: white;
    font-size: 15px;
    font-family: 'Martel Sans';
    font-weight: 500;
    letter-spacing: -1px;
}

.inputs-2{
    height: 7vh;
    width: 50vw;
    margin: 10px auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer{
    height: 40vh;
    padding: 20px 150px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.footer .col-1,.col-2,.col-3,.col-4{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 7px;
}
.footer .col-1 a,p ,.col-2 a,.col-3 a,.col-4 a{
    color: #cacaca;
    font-size: 11.5px;
    font-family: 'Martel Sans';
    font-weight: 500;
}

.footer .col-1 form > select{
    background-color: #0F0F0F;
    padding: 2px 10px;
    color: #cacaca;
    border-radius: 3px;
    border: 1px solid #949494;
}