:root {
  --main-color: linear-gradient(180deg, rgba(38, 126, 227, 1) 0%, rgba(14, 67, 155, 1) 100%);
  --secondary-color: #212121;
  --btnColor: linear-gradient(180deg, rgba(71, 225, 103, 1) 0%, rgba(0, 128, 26, 1) 100%);
}
html {
  scroll-behavior: smooth;
}
body {font-family: "Righteous", sans-serif; font-family: "Poppins", sans-serif; line-height: 1.7; color: #868686; font-weight: 300; font-size: 1.1rem; position: relative; margin: 0px; padding: 0;}

.headSection {position: relative; background: url('../images/banner-bg.png') no-repeat; background-size: cover; height: 720px; padding: 55px 0px 0px 0px;}
.headSection .container {position: relative;}
.headercontainer {width:100%; display: flex; justify-content: space-between;}

.logo {text-align: left; margin: 0px 0px 0px 0px;}
.logo img {width: 100%; max-width: 140px; object-fit: contain;}
.headsecContent {text-align: left; margin-top: 70px;}
.headSection h1 {font-family: "Righteous", sans-serif; font-size: 70px; font-weight: 400; color: #FFF;}
.headSection p {font-size: 18px; font-weight: 500; color: #FFF; width: 100%; max-width: 400px; margin: 0px;}
.headSection span {color: #01ACB2;}

.form-box {width: 100%; max-width: 660px; background: #B72EFC; background: linear-gradient(90deg, rgba(183, 46, 252, 1) 0%, rgba(1, 236, 250, 1) 100%); margin:-220px 0px 30px 0px; position: relative;}
.form-box::after {content: ''; position: absolute; left: 0; bottom: -70px; width: 100%; height: 70px; background: url('../images/form-shape.png') no-repeat; background-size: cover;}
.form-box form {}
.formSubBox {padding: 30px;}
.formSubBox h2 {font-family: "Righteous", sans-serif; font-weight: 400; font-size: 70px; text-align: left; color: #FFF; margin-top: 150px; margin-bottom: 30px;}
.formSubBox .form-img {width: 100%; max-width: 299px; height: 170px; background: url('../images/form-img.png') no-repeat; background-size: cover; filter: grayscale(10%) sepia(10%) hue-rotate(180deg); position: absolute; top: 60px; right: 30px;}
.acknowledgeBox {font-size: 12px; color: #FFF; font-weight: 500;}

/* .form-box form .formSubBox {display: flex; align-items: center; column-gap: 20px; border: 1px #000 solid;} */
.form-box .form-group {width: 100%; position: relative; margin-bottom: 10px;}
.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: #000;}

.section-title {width:100%; max-width: 800px; text-align: center; margin: 0px auto;}
.section-title img {margin: 20px 0px;}
.section-title h1 {font-family: "Righteous", sans-serif; font-size: 42px; font-weight: 500; color: #000;}
.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 {background: #B72EFC; background: linear-gradient(90deg, rgba(183, 46, 252, 1) 0%, rgba(1, 236, 250, 1) 100%); padding: 100px 0px 50px 0px;}
.features h1 span {color: #01ACB2; display: block;}
.features p {font-size: 14px; font-weight: 400; color: #FFF;}

.headerBoxCon {display: flex; justify-content: center; column-gap: 10px;}
.headerBox {width: 100%; max-width: 460px; text-align: center; position: relative; display: flex; column-gap: 20px; padding: 20px 10px; border: 1px #D7D7D7 solid; border-radius: 5px; margin-bottom: 20px;}
.headerBox span {font-family: "Righteous", sans-serif;
  -webkit-text-stroke: 1px #FFF;
  color: transparent;
  font-size: 70px;}
.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: #FFF; text-transform: uppercase; margin: 10px 0px;}
.headerBox p {font-size: 12px; font-weight: 400;}

.features .section-title {text-align: left; margin-bottom: 50px;}
.features .section-title h1 { font-size: 42px; color: #FFF; text-align: center;}

.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 {cursor: pointer; display: block; font-size: 18px; font-weight: 500; 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: #ff2528; right: 20px; top: 2px; transform: rotate(135deg); transition: 0.35s ease-in-out; vertical-align: top; width: 10px;}
.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: 16px; 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;}
}

.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 {display: flex; align-items: center; min-height: 370px;}
.otherBox img {width: 100%; max-width: 720px;}
.otherBox h2 {font-size: 24px; font-weight: 600; color: #000; padding: 15px 15px 0px 15px;}
.otherBox p {font-size: 18px; font-weight: 400; padding: 0px 15px 15px 15px;}

.whyContent {min-height: 280px; background:#FFF; position: relative; z-index: 1; padding: 60px 50px 40px 50px; box-shadow: 0px 0px 5px 0px #ccc;}

.whychooseCon {padding: 100px 0px 0px 0px;}

.whychooseCon .row .col-md-12:nth-of-type(1) .otherBox .whyContent {margin-left: -50px;}
.whychooseCon .row .col-md-12:nth-of-type(2) .otherBox .whyContent {margin-right: -50px;}
.whychooseCon .row .col-md-12:nth-of-type(3) .otherBox .whyContent {margin-left: -50px;}
.whychooseCon .row .col-md-12:nth-of-type(4) .otherBox .whyContent {margin-right: -50px;}

footer {background: url('../images/footer-bg.png') no-repeat; background-size: cover; padding: 60px 0px 50px 0px;}
footer .logo {margin: 0 auto; text-align: center;}
footer p { color: #FFF; text-align: center; font-size: 14px; font-weight: 500; margin: 0;}
footer ul {margin: 20px 0px; 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: #FFF;}
footer ul li a:hover {color: #FFF; text-decoration: none;}

footer p span {color: #B72EFC;}

.terms-conditions {height: 300px; margin-bottom: 20px;}
.headSection h3 {font-size: 24px; font-weight: 600; color: #FFF; 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) {
  .logo img {max-width: 90px;}
  .headercontainer img {width: 100%; margin: 10px 0px;}
  .headSection {height: auto; padding: 5px 0px 0px 0px;}
  .headerBoxCon {display: block;}
  .headSection h1 {text-align: center;}
  .headSection h2 {text-align: center;}
  .headercontainer .col-md-6:nth-of-type(1) {order:2;}
  .headercontainer .col-md-6:nth-of-type(2) {order:1;}
  .headSection h1 {font-size: 22px;}
  .headercontainer {margin-top: 0;}
  .formSubBox h2 {font-size: 20px; margin-top: 20px; margin-bottom: 10px;}
  .formSubBox h2 br, .headSection h1 br {display: none;}
  .otherBox {display: block; min-height: auto; margin-bottom: 20px;}
  .section-title h1 {font-size: 26px;}
  .features .section-title h1 {font-size: 26px;}
  .features .section-title {margin-bottom: 10px;}
  .headsecContent {padding: 10px;}
  .formSubBox {padding: 20px 0px;}
  .whychooseCon .row .col-md-12:nth-of-type(1) .otherBox .whyContent, .whychooseCon .row .col-md-12:nth-of-type(2) .otherBox .whyContent, .whychooseCon .row .col-md-12:nth-of-type(3) .otherBox .whyContent, .whychooseCon .row .col-md-12:nth-of-type(4) .otherBox .whyContent {margin-right: 0px; margin-left: 0;}
  .thankyoucontainer {padding: 20px; margin-top: 20px; margin-bottom: 20px;}
  .thankyoucontainer::before, .thankyoucontainer::after {display: none;}
  .headerBox {margin-bottom: 20px;}
  .headSection p {font-size: 12px; text-align: center;}
  .midcontent {padding: 15px;}
  .midcontent h2 {font-size: 16px; font-weight: 700;}
  .midcontent p {font-size: 0.85rem;}
  .features {padding: 20px 0px 0px 0px;}
  .headerBox span {font-size: 40px;}
  .logo {margin: 20px 0px 20px 0px;}
  .mt-30 {margin-top: 0px;}
  .faqsection {padding: 20px 0px 10px 0px;}
  .form-box {padding: 0px 10px; margin: 0px 0px;}
  .whyContent {min-height: auto; padding: 5px;}
  .otherBox h2 {font-size: 20px;}
  .otherBox p {font-size: 14px; margin: 0;}
  .faqsection .faq-drawer__title {font-size: 15px;}
  .faq-drawer__content p {font-size: 12px; line-height: 18px;}
  footer {}
  footer p, footer p span, footer ul li, footer ul li a {color: #FFF;}
  .headercontainer {flex-direction: column;}
  .headsecContent {order: 2;}
  .form-box {order: 1;}
  .formSubBox .form-img {position: static;}
  .whychooseCon {padding: 30px 0px 0px 0px;}
}