@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');


body, html {
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
  height: 100%;
  font-family: "Outfit", sans-serif;
  overflow-x: hidden;
}
.header{
  /* display: flex; */
  width: 100%;
  background-color: white;
  padding-bottom: 20px;
  margin-top: -20px;
  position: fixed;
  box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.237);
  z-index: 9;
}
.Logo{
  width: 85px;
  position: absolute;
  /* margin-top: 10px; */
  padding-top: 25px;
  padding-left: 50px;
}
.phone_number{
  height: 20px;
  margin-top: 55px;
  float: right;
  padding: 10px 10px 28px 15px;
  border: none;
  background-color: black;

}
.phone_number:hover{
  background-color: #0259255f;
}
.number_outter{
  padding-right: 60px;
}
.phone_number a{
  text-decoration: none;
  color: white;
  cursor: pointer;  
  font-family: "Outfit", sans-serif;
  font-size: 16px;

}
.nav{
  display: flex;
  gap: 90px;
  /* margin-top: -40px; */
  padding-top: 50px;
  margin-left: 100px;
  justify-content: center;
}

nav li:hover{
  color: #025925;
}

.nav a{
  text-decoration: none;
  list-style: none;
  justify-content: center;
  color: black;
  font-size: large;
  font-size: 18px;
}
.video_background_home{
  width: 100%;
}
.CTA_below_nav {
  position: relative;
  width: 100%;
  height: 100vh; 
  overflow: hidden;
}

.video_container {
  position: relative;
  width: 100%;
  height: 100%; 
}

.video_background_home {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 3, 3, 0.5);
  z-index: 2; 
}

.content {
  position: absolute;
  inline-size: 600px;
  top: 45%;
  left: 5%;
  /* transform: translate(-50%, -50%); */
  text-align: left;
  color: #fff; 
  z-index: 3; 
}

.content p {
  font-size: 1.5rem;
  margin: 10px 0;
}

.content button {
  background-color: #fd6207; 
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 40px;
}

.content button a {
  color: #fff;
  text-decoration: none;
}

.content button:hover {
  background-color: #e2725b99; 
}
.Head_content{
  font-size: 40px;
  padding-left: 70px;
  padding-bottom: 15px;
  color: #fd6207;
}
.body_content{
  padding-left: 70px;
  inline-size: 700px;
  font-size: 18px;
  color: rgba(128, 128, 128, 0.876);
  margin-top: -30px;
  line-height: 25px;
  text-align: justify;
  text-justify: inter-word;
}
.Why_header{
  /* background-color: #E2725B; */
  /* width: 150px; */
  text-align: left;
  color:#025925;
  font-size: 35px;
  /* inline-size: 500px; */
  
}
.why_header_body{
  padding-left: 70px;
  margin-top: 50px;
}
.Why_cards{
  display: flex;
  padding-left: 70px;
  padding-right: 70px;
  margin-top: 50px;
  gap: 50px;
}
.card_img, .card_img_1, .card_img_2{
  width: 100%;
}
.card_img{
  height: 60%;
  width: 400px;
}
.card_img_1{
  height: 60%;
  width: 400px;
  /* object-fit: contain; */
}
.card_img_2{
  height: 60%;
  width: 400px;
  /* object-fit: contain; */
}
.first_card{
  background-color: #d9d9d989;
  box-shadow: 0px 5px 5px #0259251d;
  border-radius: 10px;
}
.first_card img{
  border-radius: 10px 10px 0px 0px;
}
.first_card_title{
  padding-left: 40px;
  font-size: 20px;
  font-weight:500;
  color: #025925;
}
.first_card_content{
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 20px;
  color: rgba(0, 0, 0, 0.504);
  line-height: 25px;
}
.second_card{
  background-color: #d9d9d989;
  box-shadow: 0px 5px 5px #0259251d;
  border-radius: 10px;
}
.second_card img{
  border-radius: 10px 10px 0px 0px;
}
.second_card_title{
  padding-left: 40px;
  font-size: 20px;
  font-weight:500;
  color: #025925;
}
.second_card_content{
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 20px;
  color: rgba(0, 0, 0, 0.5);
  line-height: 25px;
}
.third_card{
  background-color: #d9d9d989;
  box-shadow: 0px 5px 5px #0259251d;
  border-radius: 10px;
}
.third_card img{
  border-radius: 10px 10px 0px 0px;
}
.third_card_title{
  padding-left: 40px;
  font-size: 20px;
  font-weight:500;
  color: #01732f;
}
.third_card_content{
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 20px;
  color: rgba(0, 0, 0, 0.5);
  line-height: 25px;
}
.feedback_title{
  font-size: 35px;
  padding-left: 60px;
  padding-top: 10px;
  color: #fd6207;
}
.the_feedback_container{
  display: flex;
  gap: 30px;
  padding-left: 60px;
  padding-right: 60px;
  padding-bottom: 50px;
}
.first_user{
  border-right: 1px dashed rgba(0, 0, 0, 0.221);
  padding: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.second_user{
  border-right: 1px dashed rgba(0, 0, 0, 0.228);
  padding-right: 10px;
  padding-left: 30px;
  padding: 20px !important;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.third_user{
  padding-left: 30px;
  padding: 20px !important;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
/* review this */
.feedback_general{
  background-color: #ffdab963;  
  margin-top: 80px;
}
.feedback_content{
  color: rgba(0, 0, 0, 0.595);
  text-align: justify;
  text-justify: inter-word;
  padding-right: 30px;
}
.feedback_name{
  color: #fd6207;
}
.user{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.FAQ_general{
  padding-left: 60px;
  display: flex;
  gap: 50px;
  margin-top: 50px;
}
.FAQ_header{
  font-size: 40px;
  color: #01732f;
}
.FAQ_1{
  font-size: 18px;
  font-weight: 500;
}
.FAQ_content_1{
  inline-size: 700px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.652);
  margin-top: -15px;
  text-align: justify;
  text-justify: inter-word;
}
.overlay_section {
  position: relative;
  width: 100%;
  height: 500px; /* Set the height of the section */
  display: flex;
  justify-content: flex-start; /* Align content to the left */
  overflow: hidden;
}

.footer_picture {
  width: 100%;
  height: 500px; /* Set the image height */
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  margin-top: 50px;
}

.overlay_footer {
  margin-top: 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(38, 38, 38, 0.748); /* Dark overlay with 50% opacity */
  z-index: 2;
}

.content_footer {
  position: relative;
  z-index: 3;
  color: white;
  text-align: left;
  padding-top: 160px; 
  padding-left: 60px;
  max-width: 400px; 
}

.content_footer p {
  margin: 0px 0;
  font-size: 1.5rem;
  inline-size: 600px;
}

.content_footer button {
  margin-top: 30px; 
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #fd6207;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.content_footer button a {
  text-decoration: none;
  color: white;
}
.logo_footer{
  width: 100px;
}
.footer{
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 60px;
  padding-right: 60px;
  background-color: #0080802b;
}
.footer_content{
  inline-size: 300px;
  text-align: justify;
  text-justify: inter-word;
}
.footer_header{
  padding-bottom: 20px;
  font-weight: bold;
}
.footer_header_two{
  font-weight: bold;
  padding-left: 38px;
}
.Footer_header_three{
  font-weight: bold;
  padding-bottom: 20px;
}
.socials_icon a img{
  width: 30px;
}
.socials_icon a{
  text-decoration: none;
}
.socials_icon{
  margin-top: 20px;
  display: flex;
  gap: 20px;
}
.footer_nav{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer_nav li{
  list-style: none;
}
.footer_nav li a{
  text-decoration: none;
  color: black;
}
.footer_nav li a{
  text-decoration: none;
  color: black;
}
.footer_nav li a:hover{
  color: #025925;
}
.contact_info a{
  text-decoration: none;
  color: black;
}
.contact_info a:hover{
  color: #025925;
}
.footer_img{
  width: 240px;
}
.contact_button{
  border: none;
  padding: 10px;
  width: 100%;
  margin-top: 10px;
  border-radius: 5px;
  background-color: #fd6207;
  color: #fff;
}
.Contact_button_link{
  color: #fff;
  text-decoration: none;
  font-size: 15px;
}
.overall_footer_video{
  display: flex;
  flex-direction: column;
}

.FAQ_general {
  /* max-width: 800px; */
  /* margin: auto; */
  font-family: Arial, sans-serif;
  display: flex;
  gap: 300px;
}

.FAQ_header p {
  font-size: 44px;
  font-weight: bold;
  text-align: left;
  padding-top: 60px;
  inline-size: 400px;
}

.FAQ_item {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
  cursor: pointer;
}

.FAQ_1 {
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.FAQ_content {
  display: none;
  font-size: 16px;
  color: #555;
  margin-top: 5px;
  width: 500px;
}

.FAQ_content.show {
  display: block;
}
.FAQ{
  font-size: 16px;
  background-color: #fd6207;
  width: 50px;
  text-align: center;
  padding: 5px;
  border-radius:5px;
  color: white;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.205);
}
.FAQ_container{
  background-color: #55555511;
  padding: 50px;
}
.FAQ_item{
  /* position: absolute; */
}


/* .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f8f8f8;
}
.Logo {
  width: 100px;
}
.number_outter {
  display: none;
} */
/* .nav {
  display: flex;
  list-style: none;
  padding: 0;
}
.nav a {
  text-decoration: none;
  margin: 0 10px;
  color: #333;
} */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  position: absolute;
  top: 45px;
  right: 40px;
}
.hamburger div {
  width: 30px;
  height: 4px;
  background-color: #333;
  margin: 3px 0;
}
.phone_number_mobile{
  display: none;
}
.FAQ_content{
  line-height: 30px;
  color: rgba(0, 0, 0, 0.492);
}

@media (max-width: 768px) {
  .nav {
    display: none;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 40px;
    background-color: #ffffff;
    color: white ;
    position: absolute;
    top: 82px;
    right: 0px;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  .content{
    margin-top: -60px;
  }
  .content button{
    display: flex;
    margin-left: 12%;
  }
  .content p{
    inline-size: 330px;
    font-size: 24px;
    z-index: 999;
    text-align: center;
  }
  .Head_content{
    padding-left: 0px;
    text-align: center;
  }
  .body_content{
    padding-left: 20px;
    inline-size: 350px;
  }
  .why_header_body{
    padding-left: 0px;
  }
  .Why_cards{
    display: flex;
    flex-direction: column;
  }
  .card_img, .card_img_1, .card_img_2{
    width: 100%;
  }
  .the_feedback_container{
    display: flex;
    flex-direction: column;
  }
  .first_user{
    border: none;
  }
  .second_user{
    border: none;
    margin: 0%;
    padding: 0%;
  }
  .third_user{
    padding: 0%;
  }
  .FAQ_header{
    /* margin-left: -30px; */
  }
  .FAQ_header p{
    inline-size: 100px;
    margin-top: -20px;
  }
  .FAQ_general{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .FAQ_container{
   width: 50%;
   margin: auto;
   margin-left: 0px;
   align-items: center !important;
  }
  .FAQ_content{
    inline-size: 150px;
    line-height: 25px;
  }
  .FAQ_item{
    line-height: 30px;
  }
  .Why_header{
    text-align: center;
  }
  .content_footer p{
    inline-size: 330px;
    font-size: 24px;
    text-align: center !important;
    padding-left: 0px !important;
    margin: 0 auto;
    margin-left: -30px;
  }
  .content_footer button{
    margin-left: 12%;
  }
  .footer{
    display: flex;
    flex-direction: column;
    gap: 50px;
  }
  .nav_links{
    margin-left: -35px;
  }
  .footer_img{
    width: 100%;
  }
  /* .phone_number_mobile{
    display:block;
    margin-top: -70px;
    width: 50%;
    text-align: center;
    margin-left: 150px;
    position: absolute;
    padding: 10px;
  } */
  .nav a{
    margin-left: 50px;
    /* color: white; */
  }
  .nav.active {
    display: flex;
  }
  .hamburger {
    display: flex;
  }
  .number_outter{
    display: none;
  }
  .header{
    background-color: white !important;
    height: 80px;
  }
  .Logo{
    width: 70px;
  }
  .get_content{
    align-items: center;
    padding-left: 30px;
    padding-right: 30px;
  }
  .about_morayo{
    display: none;
  }
}

@media (min-width: 800px) {
  .card_img{
    width: 100%;
    object-fit: cover;
  }
  .card_img_1{
    width: 100%;
    object-fit: cover;
  }
  .card_img_2{
    width: 100%;
    object-fit: cover;
  }
}