
*{
    margin: 0;
    padding: 0; 
}
body{
    background-color: black;
}
.main{
    background-image: url("assets/images/bg.jpg");
    background-position: center center;
    background-size: max(2000px,90vw);
    background-repeat: no-repeat;
    height: 70vh;
    position: relative;
}
.main .box{
    height: 70vh;
    width: 100%;
    opacity: 0.74;
    background-color: black;
    position: absolute;
    top: 0;
}
nav{
    display: flex;
    max-width: 60vw;
    margin: auto;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}
nav img{
    position: relative;
    z-index: 10;
}

nav button{
    position: relative;
    z-index: 10;
}
.hero{
    height: calc(100% - 70px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white ;
    position: relative;
    font-family:sans-serif;
    gap: 20px;
    padding:0px 30px;
}
.hero> :first-child{
    font-weight:bolder;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 35px;
}
.hero> :nth-child(2){
    font-size:24px ;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    font-weight: 700;
}
.hero> :nth-child(3){
    font-weight: 600;
    text-align: center;
    font-size: 15px;
}
.seperation{
    height: 5px;
    background-color: rgb(64, 64, 64);
}
.btn{
    padding: 3px 8px;
    font-weight: bold;
    border-color: white;
}
.stbtn{
    background-color: rgba(253, 253, 253, 0.055);
    color: rgba(255, 255, 255, 0.564);
    border:2px solid rgba(46, 45, 45, 0.682);
    padding: 5px 10px;
    border-radius: 15px;
    cursor: pointer;
    font-family: sans-serif;
}
.red-sm{
    background-color: rgba(244, 244, 244, 0.055);
    color: rgba(255, 255, 255, 0.564);
    border:2px solid rgba(46, 45, 45, 0.682);
    padding: 5px 10px;
    border-radius: 15px;
    font-family: sans-serif;
    cursor: pointer;
}
.btn-red{
    background-color:rgba(244, 244, 244, 0.055);
    color: rgba(236, 227, 227, 0.693);
    border-style: none;
    padding: 3px 15px;
    font-size: 13px;
    border-radius: 5px;
    border:2px solid rgba(46, 45, 45, 0.682);
    font-family: sans-serif;
    cursor: pointer;
}
input{
    font-size: 15px;
    border-radius: 5px;
    padding: 3px 20px;
    background-color: rgba(26, 23, 23, 0.2);
    border-color: rgba(26, 23, 23, 0.3);
    color: white;
}
.first{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 70vw;
    margin: auto;
    color: white;
}
.secImg{
    position: relative;
}
.secImg img{
    width: 456px;
    position: relative;
    z-index: 10;
    margin-top: 15px;
}
.secImg video{
    position:absolute;
    top: 60px;
    right: 63px;
    height: 237px;
    width: 333px;
}
section.first > div{
    display: flex;
    flex-direction: column;
}
section.first > div :nth-child(1){
    font-size: 48px;
    font-weight: bolder;
    gap: 23px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
section.first > div :nth-child(2){
    font-size: 24px;
    font-family:Arial, Helvetica, sans-serif;
}

.Faq h2{
    text-align: center;
    font-size: 48px;
    font-family: Arial, Helvetica, sans-serif;
}
.Faq{
    background: black;
    color: white;
    padding: 34px;
}
.Faqbox{
    display: flex;
    justify-content: space-between;
    background-color: rgba(128, 128, 128, 0.318);
    font-size: 20px;
    padding: 13px;
    margin: 20px auto;
    max-width: 50vw;
    cursor: pointer;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.Faqbox:hover{
    background-color: rgba(119, 119, 119, 0.54);
}
footer{
    color: white;
    max-width: 60vw;
    margin: auto;
    padding: 14px;
}
footer a{
    color: white;
    font-size:14px ;
}
footer .questions{
    padding:34px 0 ;
}
.footer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    color: white;
}
.footer-item{
    display: flex;
    flex-direction:column;
    gap: 23px;
}
@media  screen and (max-width:900px){
    .first{
        flex-wrap: wrap;
    }
    section.first > div :nth-child(1){
    font-size: 28px;
    font-weight: bolder;
    padding: 8px 0;
    gap: 23px;
    }
    section.first > div :nth-child(2){
    font-size:20px;
    }
    .footer{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    }
    
}

