:root {
  --main-color: #0d72ba;
  --secondary-color: #f69220;
  --fade-color: #f7e9da;
}
@font-face {
  font-family: 'Qardilla Monoline';
  src: url('../font/Qardilla-Monoline.otf');
}
@font-face {
  font-family: 'Qardilla Monoline';
  src: url('../font/Qardilla-Monoline.ttf');
}
@font-face {
  font-family: 'Qardilla Script';
  src: url('../font/Qardilla-Script.otf');
}
@font-face {
  font-family: 'Qardilla Script';
  src: url('../font/Qardilla-Script.ttf');
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Qardilla Script';
  font-family: "Roboto", 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: #FFF5DE;
  background: linear-gradient(90deg, #FFF5DE 0%, #FFF6E9 100%);
  padding: 55px 0px 0px 0px;
}
.headercontainer {position: relative; z-index: 11;}

.logo {text-align: left; margin: 0px 0px 20px 0px; margin-left: 165px;}
.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: 'Qardilla Script';font-size: 42px; font-weight: 500;background: var(--main-color); color: transparent; background-clip: text;}
.headSection h2 {font-size: 28px; font-weight: 800; text-transform: uppercase; color: #392100;}
.headSection span {color: #01ACB2;}
.headSection p {font-size: 18px; font-weight: 400; color: #392100;}

.headercontainer img {width: 100%; max-width: 700px;}

.form-box {margin:30px 0px 30px 0px;}
.form-box form {}
.form-box .form-group {width: 100%; position: relative; margin-bottom: 20px;}
.form-box label {font-size: 12px; font-weight: 500; color: #7F04F3; background-color: #F8E8FF; 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: #FFF; padding: 10px 15px; height: 55px; border: 1px #ADADAD solid; border-radius: 10px;}

.mt-30 {margin-top: 30px;}
.action-btn {font-size: 16px; color: #FFF; cursor: pointer; z-index: 1; width: 100%; font-weight: 600; padding: 15px 40px; border-radius: 10px; border: 0px #000 solid; background: var(--main-color);}

.section-title {width:100%; max-width: 800px; text-align: center; margin: 0px auto;}
.section-title img {margin: 20px 0px;}
.section-title h1 {font-family: 'Qardilla Script'; font-size: 42px; font-weight: 500; background: var(--main-color); color: transparent; background-clip: text;}
.section-title h2 {font-size: 30px; font-weight: 800; color: #000;}
.section-title p {font-size: 14px; font-weight: 500;}
.section-title h2 span {color: #01ACB2;}

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

.headerBoxCon {display: flex; justify-content: center; column-gap: 10px;}
.headerBox {text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; padding: 20px 10px;}
.headerBox span {font-family: 'Qardilla Script'; color: var(--main-color); border: 2px var(--main-color) 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::before {content: ''; position: absolute; top: -50px; left: 0; width: 100%; height: 1px; border-bottom: 2px var(--main-color) dashed;}
.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;}


.features .section-title {margin-bottom: 50px;}
.footerbottom { box-shadow: 0px 0px 5px 0px #ccc; border-radius: 10px;}
.footerbottom img {width: 100%;}
.footerbottom h3 {font-size: 18px; font-weight: 600; color: #000; margin: 10px 0px 0px 0px; padding: 10px 15px 10px 15px;}
.footerbottom p {padding: 10px 15px 30px 15px;}



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

.middleBox .row {align-items: center;}

.faqsection {padding: 25px 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: #1ABC9C;
  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; padding: 0;}
.parsley-custom-error-message, .parsley-required {font-size: 12px; font-weight: 500; color: #ff0000; list-style-type:none;}

.otherBox {border-radius: 15px;border-bottom: 2px var(--main-color) solid; min-height: 370px; box-shadow: 0px 0px 10px 0px #ccc;}
.otherBox img {width: 100%;}
.otherBox h2 {font-size: 18px; font-weight: 600; color: #000; padding: 15px 15px 0px 15px;}
.otherBox p {font-size: 14px; font-weight: 400; padding: 0px 15px 15px 15px;}

footer {background: var(--fade-color); padding: 20px 0px;}
footer .logo {margin: 0 auto; text-align: center;}
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: 20px; font-weight: 600; color: #000;}
.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;}

.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;}

.terms-conditions .logo {text-align: center; margin: 0 0px 20px 0px;}

@media (max-width: 767px) {
  .headercontainer img {width: 100%; margin-bottom: 10px;}
  .headSection {padding: 5px 0px 0px 0px;}
  .headerBoxCon {display: block;}
  .headSection h1 {text-align: center;}
  .headSection h2 {text-align: center;}
  .headercontainer .col-md-8 {order:2;}
  .headercontainer .col-md-4 {order:1;}
  .headSection h1 {font-size: 28px;}
  .otherBox {margin-bottom: 20px;}
  .thankyoucontainer {padding: 20px; margin-top: 20px; margin-bottom: 20px;}
  .thankyoucontainer::before, .thankyoucontainer::after {display: none;}
  .headerBox {margin-bottom: 20px;}
  .midcontent {padding: 15px;}
  .midcontent h2 {font-size: 16px; font-weight: 700;}
  .midcontent p {font-size: 0.85rem;}
  .features {padding: 50px 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;}
}