html {
  scroll-behavior: smooth;
}
body {
  font-family: "Orbitron", sans-serif;
  font-family: "Poppins", sans-serif;
  line-height: 1.7;
  color: #868686;
  font-weight: 300;
  font-size: 1.1rem;
  position: relative;
  margin: 0;
  padding: 0;
}

.headSection {position: relative; background:url('../images/bannerimage.png') no-repeat; background-size: contain; background-position: top right; margin: 0; padding: 5px 0px 0px 0px;}
.headSection:before {background: #E1F2E8; position: absolute; top: 0; left: -100px; width: 75%; height: 100%; content: '';  transform: skew(24deg);}

.headercontainer {position: relative; z-index: 11;}

.logo {width: 100%; text-align: left; position: relative; z-index: 1; margin: 30px 0px;}
.logo img {width: 100%; max-width: 200px; object-fit: contain;}
.logo h2 {font-size: 36px; font-weight: 800; color: #000;}
.logo h2 span {color: #01ACB2;}
.headSection h1 {font-family: "Orbitron", sans-serif; font-size: 42px; font-weight: 500; color: #393E46;}
.headSection h1 span {color: #1A8944;}
.headercontainer ul {margin: 20px 0px; padding: 0;}
.headercontainer ul li {background: url('../images/headerli.png') no-repeat; background-size: contain; background-position: 0 0; padding: 6px 0px 6px 0px; padding-left: 50px; list-style-type: none; font-size: 14px; font-weight: 500; color: #000; display: inline-block; margin-right: 15px;}
.headSection p {font-size: 18px; font-weight: 400; color: #000;}

.form-box {margin:30px 0px 30px 0px;}
.form-box form {}
.form-box .form-group {width: 100%; position: relative; margin-bottom: 3px;}
.form-box label {font-size: 12px; font-weight: 500; color: #1A8944; background-color: #E1F2E8; text-align: left; position: absolute; top: -12px; left: 20px; border-radius: 30px; padding: 3px 15px;}
.form-box .form-group .form-control {font-size: 12px; background: transparent; padding: 10px 15px; height: 55px; border: 1px #1A8944 solid; border-radius: 10px;}

.mt-30 {margin-top: 30px;}
.action-btn {font-size: 16px; color: #FFF; cursor: pointer; z-index: 1; width: auto; font-weight: 600; padding: 8px 40px; border-radius: 10px; border: 0px #000 solid;
  background: #1A8944;}

section {margin: 20px 0px;}

.section-title {width:100%; max-width: 800px; text-align: center; margin: 0px auto;}
.section-title img {margin: 20px 0px;}
.section-title h1 {font-family: "Orbitron", sans-serif; font-size: 24px; font-weight: 500; color: #000;}
.section-title h1 span {color: #1A8944;}

.features {padding: 50px 0px;}
.features h1 span {color: #01ACB2; display: block;}
.features p {font-size: 14px; font-weight: 400; color: #000;}

.bannerBottom {width:100%; max-width: 1160px; margin: 0px auto; display: flex; align-items: center; justify-content: center; border: 1px #ddd solid;}
.bannerBottom img {width:100%; height: 150px; object-fit: contain; padding:15px; border-right: 1px #ddd solid;}
.bannerBottom img:last-child {border-right: 0px #ccc solid;}

.financeFeature .section-title {margin: 10px auto 70px auto;}
.financeFeature {background: #1A8944; padding: 30px 0px;}
.financeFeatureBox {background:#FFF; margin-bottom: 70px; border-radius: 15px; box-shadow: 0px 0px 10px 0px #ccc;}
.financeFeatureBox img {width: 90px; height: 90px; object-fit: contain; background: #005520; padding: 15px; border: 10px #1A8944 solid; border-radius: 50%; margin: -45px 0px 0px 20px;}
.financeFeatureBox h2 {font-size: 18px; font-weight: 600; color: #000; padding: 25px 15px 0px 15px;}
.financeFeatureBox p {font-size: 14px; font-weight: 400; padding: 5px 15px 25px 15px;}

.testimonialsBox h1 {font-size: 24px; padding: 30px 0px;}
.testimonials {text-align: center; min-height: 220px; margin: 20px 0px; padding: 20px 20px; box-shadow: 0px 0px 10px 0px #ccc; border-radius: 10px;}
.testimonials img {width: 30px !important; margin: 20px auto;}
.testimonials p {font-size: 14px; font-weight: 500; color: #000;}
.clientName {font-size: 12px; font-weight: 600; color: #1A8944;}

.headerBoxCon {display: flex; column-gap: 10px;}
.headerBox {text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; padding: 20px 10px; box-shadow: 0px 5px 10px 0px #ccc; border-radius: 10px; min-height: 225px;}

.features h1 {font-family: "Orbitron", sans-serif; font-size: 22px; color: #000;}
.features h1 span {color:#1A8944;}

.headerBox span { color: #1A8944; border: 2px #1A8944 dashed; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: 600; border-radius: 50%; background: #FFF; z-index: 1; margin: 15px 0px;}
.headerBox h3 {width:100%; font-size: 16px; position: relative; font-weight: 600; color: #000; text-transform: uppercase; margin: 10px 0px;}
.headerBox p {font-size: 12px; font-weight: 400;}


.middleBox img {width: 100%; max-width: 500px;}

.faqsection {padding: 50px 0px;}

.faqsection .faq-drawer {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 30px;
  border: 1px #DCDCDC solid;
}

.faqsection .faq-drawer__content-wrapper {
  font-size: 1.25em;
  line-height: 1.4em;
  max-height: 0px;
  overflow: hidden;
  transition: 0.25s ease-in-out;
}

.faqsection .faq-drawer__title {
  /* border-top: #000 1px solid; */
  cursor: pointer;
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  padding: 0;
  position: relative;
  margin-bottom: 0;
  border-radius: 30px;
  transition: all 0.25s ease-out;
}

.faqsection .faq-drawer__title::after {
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: " ";
  display: inline-block;
  float: right;
  height: 10px;
  left: 2px;
  position: relative;
  color: #1A8944;
  right: 20px;
  top: 2px;
  transform: rotate(135deg);
  transition: 0.35s ease-in-out;
  vertical-align: top;
  width: 10px;
}

/* OPTIONAL HOVER STATE */
.faqsection .faq-drawer__title:hover { 
  color: #4E4B52  ;
}

.faqsection .faq-drawer__trigger:checked
  + .faq-drawer__title
  + .faq-drawer__content-wrapper {
  max-height: 350px;
}

.faq-drawer__content p {font-size: 14px; font-weight: 400; line-height: 22px; color: #000; margin: 0;}

.faqsection .faq-drawer__trigger:checked + .faq-drawer__title::after {
  transform: rotate(-45deg);
  transition: 0.25s ease-in-out;
}

.faqsection input[type="checkbox"] {
  display: none;
}

@media (min-width: 1200px) {
 .container {
       max-width: 1600px; 
  }
}

.acknowledgeBox {font-size: 12px; color: #000; font-weight: 500;}
.parsley-errors-list {margin: 0 !important; padding: 0;}
.parsley-custom-error-message, .parsley-required {font-size: 12px !important; font-weight: 500 !important; color: #ff0000 !important; list-style-type:none !important; background: none !important; padding: 0 !important;}

footer { background: #E1F2E8; padding: 20px 0px;}
footer .logo {text-align: center; margin: 0px 0px;}
footer p { color: #000; text-align: center; font-size: 14px; font-weight: 500; margin: 0;}
footer ul {margin: 0; padding: 0; text-align: center;}
footer ul li {list-style-type: none; display: inline-block;}
footer ul li a {font-size: 14px; font-weight: 500; color: #000;}
footer ul li a:hover {color: #000; text-decoration: none;}

.headSection h3 {font-size: 24px; font-weight: 600; color: #000; padding-bottom: 30px;}
.terms-condition {}
.terms-condition h3 {font-size: 18px; font-weight: 600; color: #000;}
.terms-condition h4 {font-size: 16px; font-weight: 500; color: #000;}
.terms-condition strong {font-weight: 600;}
.terms-condition p {font-size: 14px; color: #000;font-weight: 400;}
.terms-condition ul li {font-size: 14px; color: #000; font-weight: 400; list-style-type: disc;}

.owl-dots {display: flex; justify-content: center; column-gap: 10px;}
.owl-dots .owl-dot {background: #D9D9D9; width: 20px; height: 3px;}
.owl-dots .owl-dot.active {background: #1A8944;}

.thankyoucontainer {width: 100%; height: 100vh; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.thankyoucontainer::before { content: ''; position: absolute; top: 100px; left: 0; width: 450px; height: 500px; background: url('../images/before.png') no-repeat; background-size: cover;}
.thankyoucontainer::after { content: ''; position: absolute; top: 100px; right: 0; width: 350px; height: 500px; background: url('../images/after.png') no-repeat; background-size: cover;}
.thankyoucontainer {}
.thankyoubox {width: 100%; max-width: 1024px; text-align: center;}
.thankyoucontainer img {width: 100%; max-width: 600px;}
.thankyoucontainer h1 {font-size: 48px; font-weight: 900; color: #000; margin: 20px 0px;}
.thankyoucontainer h2 {font-size: 20px; font-weight: 500; color: #D821FF; margin: 20px 0px;}
.thankyoucontainer p {font-size: 14px; font-weight: 400; color: #000; margin: 20px 0px;}


@media (max-width: 767px) {
  .headSection {margin: 0;}
  .headSection:before {background: #E1F2E8; position: absolute; top: 0; left: 0px; width: 100%; height: 100%; content: ''; transform: skew(0deg);}
  .headercontainer img {width: 100%; position: static;}
  .headerBoxCon {display: block;}
  .headercontainer .col-md-7 {order:2;}
  .headercontainer .col-md-4 {order:1;}
  .headSection h1 {font-size: 22px;}
  .form-box .form-group {margin-bottom: 15px;}
  .thankyoucontainer {padding: 20px; margin-top: 20px; margin-bottom: 20px;}
  .headercontainer ul li {padding: 0 0px 6px 0px; padding-left: 45px;}
  .thankyoucontainer::before, .thankyoucontainer::after {display: none;}
  .headerBox {margin-bottom: 20px; min-height: auto;}
  .midcontent {padding: 15px;}
  .financeFeature h2 {font-size: 18px;}
  .testimonialsBox h1 {padding: 0 0px;}
  .financeFeature {padding: 30px 0px 0px 0px;}
  .financeFeatureBox {margin-bottom: 50px;}
  .midcontent h2 {font-size: 16px; font-weight: 700;}
  .midcontent p {font-size: 0.85rem;}
  .features {padding: 0px 0px 0px 0px;}
  .logo {margin: 20px 0px 20px 0px;}
  .mt-30 {margin-top: 0px;}
  .faqsection {padding: 20px 0px 10px 0px;}
  .form-box {padding: 0px 25px; margin: 30px 0px;}
  .bannerBottom {flex-wrap: wrap;}
  .bannerBottom img {width: 50%; border-bottom: 1px #ddd solid;}
}