* {
   padding: 0;
   margin: 0;
}

body {
   background-color: black;
}

.main {
   background-image: url("Assets/images/bg.jpg");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: max(1300px, 100vw);
   height: 80vh;
   position: relative;
}

.main .box {
   height: 80vh;
   width: 100%;
   opacity: 0.69;
   background-color: black;
   position: absolute;
   top: 0;
}

nav {
   max-width: 60vw;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: auto;
   height: 65px;
}

@media screen and (max-width: 700px) {
   nav {
      max-width: 95vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: auto;
      height: 65px;
   }
}

nav img {
   width: 120px;
   position: relative;
   z-index: 10;
}

nav button {
   position: relative;
   z-index: 10;

}

.hero {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   color: white;
   position: relative;
   font-family: "Martel Sans", sans-serif;
   font-size: 23px;
   gap: 23px;
   padding: 0 30px;
}

.hero> :first-child {
   font-family: "Poppins", sans-serif;
   font-width: bolder;
   font-size: 48px;
   text-align: center;

}

.hero> :nth-child(2) {
   font-weight: 400;
   font-size: 24px;
   text-align: center;

}

.hero> :nth-child(3) {
   font-weight: 400;
   font-size: 20px;
   text-align: center;

}


@media screen and (max-width: 700px) {
   .hero> :first-child {
      font-family: "Poppins", sans-serif;
      font-width: bolder;
      font-size: 32px;
      text-align: center;

   }

   .hero> :nth-child(2) {
      font-weight: 400;
      font-size: 18px;
      text-align: center;

   }

   .hero> :nth-child(3) {
      font-weight: 400;
      font-size: 18px;
      text-align: center;

   }
}


.separation {
   height: 7px;
   background-color: rgb(46, 45, 45);
}

.btn {
   padding: 3px 8px;
   font-weight: 400;
   color: white;
   background-color: rgba(23, 23, 23, 0.7);
   border: 1px solid white;
   border-radius: 4px;
   cursor: pointer;
}

.btn-red {
   background-color: red;
   color: white;
   padding: 3px 24px;
   font-size: 20px;
   border-radius: 4px;
   font-weight: 400;
}
.btn-red:hover{
   background-color: brown;
}
.btn-red-sm {
   background-color: red;
   color: white;
}
.btn-red-sm:hover{
   background-color: brown;
}
.hero-buttons {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 16px;
}

.main input {
   color: white;
   padding: 7px 102px 8px 14px;
   font-weight: 900;
   font-size: 12px;
   border-radius: 4px;
   background-color: rgba(23, 23, 23, 0.7);
   border: 1px solid rgba(247, 243, 243, 0.5);

}

@media screen and (max-width: 700px) {
   .btn-red {
      background-color: red;
      color: white;
      padding: 3px 24px;
      font-size: 12px;
      border-radius: 4px;
      font-weight: 400;
   }

   .hero-buttons {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
   }

   .main input {
      color: white;
      padding: 7px 80px 8px 14px;
      font-weight: 900;
      font-size: 12px;
      border-radius: 4px;
      background-color: rgba(23, 23, 23, 0.7);
      border: 1px solid rgba(247, 243, 243, 0.5);

   }
}


.first {
   display: flex;
   justify-content: center;
   max-width: 70vw;
   margin: auto;
   color: white;
   align-items: center;
   /* gap: 380px; */
}

@media screen and (max-width: 1000px) {
   .first {
      flex-wrap: wrap;
   }

}

@media screen and (max-width: 600px) {

   .secImg img {
      width: 100%;
      max-width: 400px;

   }

   .secImg video {
      width: 85%;
      left: 7%;
      top: 18%;

   }
}

.secImg {
   position: relative;
}

.secImg img {
   width: 100%;
   max-width: 500px;
   position: relative;
   z-index: 10;

}

.secImg video {
   position: absolute;
   top: 20%;
   left: 13%;
   width: 73%;
   height: 60%;
   right: 0;
   object-fit: cover;

}

section.first>div {
   display: flex;
   flex-direction: column;

}

.text {
   padding: 20px;
}

section.first>div :nth-child(1) {
   font-size: 48px;
   font-weight: bolder;
}

section.first>div :nth-child(2) {
   font-size: 24px;
}

@media(max-width:800px) {
   section.first>div :nth-child(1) {
      font-size: 28px;
   }

   section.first>div :nth-child(2) {
      font-size: 16px;
   }

}

.first.second .secImg video {
   position: absolute;
   top: 8%;
   left: 20%;
   width: 55%;

}

.faqbox img {
   height: 25px;
   margin-left: auto;

}

.faq h2 {
   padding: 20px 0;
   text-align: center;
   font-size: 48px;
}

.faq {
   background-color: black;
   color: white;
}

.faqbox {
   display: flex;
   background-color: rgb(38, 36, 36);
   padding: 25px;
   max-width: 60vw;
   font-size: 24px;
   margin: 34px auto;
   justify-content: space-between;
   cursor: pointer;
   transition: all 1s ease-out;
}
@media(max-width:800px) {
   .faqbox {
      display: flex;
      background-color: rgb(38, 36, 36);
      padding: 8px;
      max-width: 80vw;
      font-size: 24px;
      margin: 34px auto;
      justify-content: space-between;
      cursor: pointer;
      transition: all 1s ease-out;
   }

   .faq h2 {
      padding: 20px 0;
      text-align: center;
      font-size: 32px;
   }
}

.faqbox:hover {
   background-color: rgb(127, 125, 125);
   cursor: pointer;
}

footer {
   color: white;
   max-width: 60vw;
   margin: auto;
   padding: 15px;
}

footer .questions {
   padding: 34px 0;
}

.footer {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   color: white;
   max-width: 60vw;
   margin: auto;
}

@media screen and (max-width: 1000px) {
   .footer {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      color: white;
   }

}

.footer a {
   font-size: 14px;
   color: white;
}

.footer-item {
   display: flex;
   flex-direction: column;
   gap: 14px;
}