.modern-form-container {
     background: rgb(255, 255, 255);
     border: 2px solid #ffc107;
     box-shadow: 0px 4px 48px 0 #7C63FC;
     backdrop-filter: blur(8px);
     border-radius: 20px;
     padding: 30px;
     max-width: 450px;
     width: 100%;
     transition: all 0.3s ease;
     position: relative;
     z-index: 9;
     margin: 0 auto;
     margin-right: 0;
 }

 .modern-form-title {
     text-align: left;
     font-size: 26px;
     margin-bottom: 20px;
     color: rgba(var(--second-color), 1);
     font-weight: 600;
 }

 .form-step-modern {
     display: none;
     animation: fadeIn 0.4s ease;
 }

 .form-step-modern.active {
     display: block;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .form-group-modern {
     margin-bottom: 18px;
 }

 .form-label-modern {
     display: block;
     margin-bottom: 6px;
     font-weight: 600;
     color: #000;
     font-size: 13px;
     text-transform: uppercase;
 }

 .form-label-modern span {
     color: red;
 }

 .form-input-modern,
 .form-select-modern,
 .form-input-modern:hover,
 .form-select-modern:hover,
 .form-input-modern:focus,
 .form-select-modern:focus {
     width: 100%;
     padding: 12px 14px;
     border-radius: 6px;
     border: 1px solid rgba(var(--second-color), 1);
     font-size: 15px;
     background-color: rgba(255, 255, 255, 0.9);
 }

 .form-btn-modern {
     width: 100%;
     padding: 12px;
     background: #007bff;
     color: #fff;
     font-size: 16px;
     border: none;
     border-radius: 10px;
     cursor: pointer;
     transition: background 0.3s;
 }

 .form-btn-modern:hover {
     background: #0056b3;
 }

 .requestcontent-box {
     position: relative;
     z-index: 8;
     padding: 0px 30px;
 }

 .flexgroup {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 4px;
 }

 .flexgroup .form-group-modern {
     width: 49%;
 }


 /* ******************************* request-a-demo  css start *********************************************** */
 .request-section {
     background-color: rgba(var(--main-color), 1);
 }

 .request-section .banner-bg {
     width: 110%;
 }

 .touchfree-form-wrapper {
     max-width: 500px;
     margin: 0px auto;
     background-color: #ffffff;
     border-radius: 10px;
     padding: 30px 25px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
     margin-right: 0;
 }

 .touchfree-form-group {
     width: 49%;
 }

 .touchfree-form-groupsec select {
     position: relative;
     background-color: rgba(var(--black-color), 0.05);
     color: rgba(var(--black-color), 0.6);
     border: 1px solid rgba(var(--white-color), 0.2);
     border-radius: 5px;
     width: 100%;
 }

 .touchfree-form-wrapper h5 {
     font-size: 1.1rem;
     font-weight: 700;
     text-align: left;
     margin-bottom: 25px;
     color: rgba(var(--main-color), 1);
 }

 .touchfree-form-group label {
     font-weight: 500;
     font-size: 0.95rem;
     margin-bottom: 4px;
     text-align: left;
     display: flex;
 }

 .touchfree-form-groupsec label {
     text-align: left;
     display: flex;
 }

 .touchfree-form-wrapper .form-check-label {
     text-align: left;
 }

 .touchfree-form-group input,
 .touchfree-form-group select {
     font-size: 0.9rem;
     padding: 10px;
     width: 100%;
 }

 .touchfree-checkbox {
     font-size: 0.85rem;
 }

 .touchfree-checkbox a {
     color: rgba(var(--main-color), 1);
     text-decoration: none;
     font-weight: 600;
 }

 .touchfree-submit-btn {
     background-color: rgba(var(--main-color), 1);
     color: white;
     font-weight: 600;
     width: 100%;
     border: none;
     padding: 12px;
     margin-top: 15px;
     border-radius: 6px;
     transition: background-color 0.3s;
 }

 .touchfree-submit-btn:hover {
     background-color: rgba(var(--main-color), 0.8);
 }

 .requestcontent-box .commontitle {
     color: rgba(var(--white-color), 1);
     /* font-size: 3rem; */
     font-weight: 600;
     margin-bottom: 1.3rem;
     /* max-width: 550px; */
 }

 .requestcontent-box .common-para p {
     color: rgba(var(--white-color), 1);
 }

 .rquestlist {
     list-style-type: none;
     color: rgba(var(--white-color), 0.9) !important;
     font-size: 18px;
     font-weight: 400;
     text-align: left;
 }

 .common-para ul.rquestlist li {
     color: rgba(var(--white-color), 0.9) !important;
 }

 .common-para ul.rquestlist li::before,
 .common-box>div.common-para ul li::before,
 .aboutPage-txt ul li::before {
     content: "\f00c";
     position: absolute;
     left: 0px;
     top: 0px;
     font-family: var(--font-awesome);
     font-weight: 600;
     display: inline-block;
     width: var(--ehw-cul);
     height: var(--ehw-cul);
     border-radius: 50%;
     color: rgba(var(--second-color), 1);
     --ehw-cul: 5px;
     --ehw-cul: auto;
     margin-top: 5px;
     line-height: 1;
 }

 .clFeatureHeadsection {
     margin: 40px auto 0;
 }

 .clFHInner {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .clFHMedia {
     position: relative;
     width: 480px;
     margin: 0 50px 0 0;
     box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.28);
     background: #FFF;
     padding: 10px;
     border-radius: 6px;
 }

 .clFHMedia iframe {
     width: 100%;
     height: 260px;
     margin: 0;
     padding: 0;
     display: inline-block;
     vertical-align: middle;
 }

 .clFHContent {
     width: calc(100% - 530px);
 }

 .clFeatureHeadsection h2 {
     font-size: 30px;
     font-weight: 700;
     margin: 0 auto;
 }

 .clFeatureHeadsection p {
     font-size: 16px;
     line-height: 2;
     margin: 15px 0 0;
     color: #6b6d77;
 }

 .clFeatureboxMain {
     position: relative;
 }

 .clFeaturebox {
     position: relative;
     padding: 60px 0;
 }

 .clFeatureboxInner {
     position: relative;
     z-index: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 40px 0;
 }

 .clFeatureImg {
     width: 350px;
     text-align: center;
     margin: 0 100px 0 0;
     position: relative;
 }

 .clFeatureContent {
     width: 50%;
 }

 .clFeatureTitle {
     font-size: 30px;
     font-weight: 700;
     line-height: 1.3em;
     margin: 0 0 30px;
     position: relative;
     background: #FFF;
 }

 .clstepLabel {
     position: relative;
     left: 0;
     top: 0;
     font-size: 24px;
     font-weight: 700;
     line-height: 1;
     color: rgba(var(--second-color), 1);
     opacity: 0.8;
     text-transform: uppercase;
     display: block;
     transition: all 0.3s ease;
     margin: 0 0 5px;
 }

 .clstepList {
     margin: 30px 0 0;
     padding: 0 0 0 20px;
     background: #FFF;
     list-style: disc;
 }

 .clstepList li {
     position: relative;
     font-size: 16px;
     line-height: 1.8em;
     margin: 15px 0 0;
     padding: 0;
 }

 .clstepList li:first-of-type {
     margin-top: 0;
 }

 ul.clstepSublist {
     margin: 20px 0;
     padding: 0 0 0 25px;
     list-style: circle;
     list-style-position: outside;
 }

 ul.clstepSublist li {
     margin: 10px 0 0;
     font-size: 15px;
     line-height: 1.4em;
 }

 .clBtnouter {
     margin: 20px 0 0;
 }

 .clBtnouter .btn {
     padding: 15px 20px;
     line-height: 1;
     font-size: 16px;
     font-weight: 600;
 }

 .clBtnouter .btn:after {
     content: "\f061";
     font-family: FontAwesome;
     margin: 0 0 0 10px;
     transform: translateX(0px);
     display: inline-block;
     position: relative;
     display: none;
 }

 .clFeaturebox:nth-of-type(even) .clFeatureboxInner {
     flex-direction: row-reverse;
 }

 .clFeaturebox:nth-of-type(even) .clFeatureImg {
     margin: 0 0 0 100px;
 }

 .clFeaturebox:nth-of-type(even) {}

 .clctaSection {
     position: relative;
     background: #4965f9;
     color: #FFF;
     padding: 40px 0 45px;
     background: #4965f9;
     background: -moz-linear-gradient(-45deg, #4965f9 0%, #4eb1e0 100%);
     background: -webkit-linear-gradient(-45deg, #4965f9 0%, #4eb1e0 100%);
     background: linear-gradient(135deg, #4965f9 0%, #4eb1e0 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4965f9', endColorstr='#4eb1e0', GradientType=1);
     overflow: hidden;
 }

 .clctaSection .patterns span {
     position: absolute;
 }

 .clctaSection .patterns span:nth-child(1) {
     width: 470px;
     height: 290px;
     left: -180px;
     top: -270px;
     -webkit-transform: rotate(75deg);
     transform: rotate(75deg);
     background: -moz-linear-gradient(-360deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.04) 100%);
     background: -webkit-linear-gradient(-360deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.04) 100%);
     background: linear-gradient(-360deg, rgba(0, 0, 0, 0) 3%, rgba(0, 0, 0, 0.04) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=1);
 }

 .clctaSection .patterns span:nth-child(2) {
     width: 240px;
     height: 560px;
     right: 10%;
     top: -380px;
     -webkit-transform: rotate(75deg);
     transform: rotate(75deg);
     background: -moz-linear-gradient(-120deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.04) 100%);
     background: -webkit-linear-gradient(-120deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.04) 100%);
     background: linear-gradient(-120deg, rgba(0, 0, 0, 0) 3%, rgba(0, 0, 0, 0.04) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=1);
 }

 .clctaSection .patterns span:nth-child(3) {
     width: 180px;
     height: 400px;
     right: 50%;
     bottom: -350px;
     -webkit-transform: rotate(41deg);
     transform: rotate(41deg);
     background: -moz-linear-gradient(-27deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.04) 100%);
     background: -webkit-linear-gradient(-27deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.04) 100%);
     background: linear-gradient(-27deg, rgba(0, 0, 0, 0) 3%, rgba(0, 0, 0, 0.04) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=1);
 }

 .clctaInner {
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     z-index: 1;
 }

 .clctaButton {
     width: 200px;
     text-align: right;
     margin: 0 0 0 50px;
 }

 .clctaDiv {
     width: 50%;
     padding: 0 30px;
     text-align: center;
 }

 .clctaSection h2 {
     font-size: 30px;
     font-weight: 400;
     line-height: 1.4;
     margin: 0;
 }

 .clctaSection h2 span {
     display: block;
     font-size: 36px;
     font-weight: 600;
 }

 .clctaInner .btn {
     font-weight: 600;
     padding: 15px 30px;
     line-height: 1;
 }

 .covidSection {
     position: relative;
 }

 .covidInner {
     box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.14);
     background: #FFF;
     margin: 20px auto 80px;
     width: 70%;
     text-align: center;
     padding: 40px;
     border-radius: 10px;
 }

 .covidContent h2 {
     font-size: 26px;
     font-weight: 700;
     margin: 0 0 20px;
 }

 .covidContent p {
     font-size: 16px;
     line-height: 2;
     margin: 0;
 }

 .covidContent h2 span {
     display: block;
     font-size: 20px;
     font-weight: 600;
     color: #bbbcc1;
 }

 .covidContent .btn {
     margin: 20px 0 0;
     padding: 15px 20px;
     line-height: 1;
     font-size: 16px;
     font-weight: 600;
 }

 .clFeatureboxInner:after {
     content: "";
     position: absolute;
     background: url('../images/pathline.svg') no-repeat 0 0;
     background-size: contain;
     width: 723px;
     height: 192px;
     display: block;
     bottom: -38%;
     left: 200px;
     z-index: -1;
     transform: scale(0.7);
     transform-origin: left bottom;
     opacity: 0.6;
 }

 .clFeaturebox:nth-of-type(even) .clFeatureboxInner:after {
     left: 230px;
     bottom: 0;
     transform: scale(0.6, -0.7);
     transform-origin: left bottom;
 }

 .clFeaturebox.clFeaturebox6:nth-of-type(even) .clFeatureboxInner:after {
     display: none;
 }


 .outer-bg-container {
     padding: 16px;
 }

 .bg-container {
     padding: 54px;
     border-radius: 30px;
     padding-top: 500px;
     margin-top: -500px;
 }

 .best-features .bg-01 {
     top: 150px;
     left: 340px;
 }

 .best-features .bg-01 img {
     width: 385px;
 }

 .belowsec {
     z-index: 99;
 }

 .best-features .bg-02 {
     top: 40%;
     left: 380px;
     z-index: 9;
 }

 .best-features .bg-02 img {
     width: 868px;
 }

 .feature-card {
     background: #fff;
     padding: 20px;
     border-radius: 16px;
     color: #000;
     position: relative;
     min-height: 80px;
 }

 @media (max-width: 767.98px) {
     .feature-card.h-100 {
         height: auto !important;
         padding: 15px;
     }
 }

 .feature-card h3 {
     color: rgba(var(--main-color), 1);
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 0 !important;
 }

 .bg-dark-hlx {
     background-color: rgba(var(--main-color), 1);
 }

 /* ******************************* request-a-demo  css END *********************************************** */

 .datepicker-icon-wrapper {
     position: relative;
     display: flex;
     align-items: center;
 }

 .custom-datepicker {
     padding: 0.8rem 2.5rem 0.8rem 1rem;
     /* Right padding to make space for icon */
     width: 100% !important;
     border-radius: 6px !important;
     border: 1px solid rgba(var(--second-color), 1) !important;
     font-size: 15px !important;
     background-color: rgba(255, 255, 255, 0.9) !important;
     transition: border 0.2s ease, box-shadow 0.2s ease;
 }

 .custom-datepicker:focus {
     border-color: rgba(var(--second-color), 1);
     box-shadow: 0 0 0 3px rgba(99, 101, 241, 0);
 }

 .calendar-icon {
     position: absolute;
     right: 12px;
     color: #6b7280;
     /* Gray-500 */
     pointer-events: none;
     /* Icon won’t block input clicks */
     background-color: #fff;
     padding: 5px;
     font-size: 1rem;
 }

 .flatpickr-current-month .flatpickr-monthDropdown-months,
 .flatpickr-months .flatpickr-month {
     background: rgba(var(--second-color), 1);
 }

  @media (max-width: 1366px) {
 .feature-card h3 {
    font-size: 16px;
}
     .bg-container.re-bg-container {
         padding-top: 423px;
     }
  }


 @media (max-width: 992px) {
    .re-request-section .common-para p {
    margin-bottom: 16px;
}
.outer-bg-container p.my-5.text-white.pe-5 {
    margin-bottom: 15px !important;
}
     .modern-form-container {
         max-width: 100%;
     }

     .feature-card h3 {
         font-size: 18px;
     }

     .bg-container {
         padding: 54px;
         border-radius: 30px;
         padding-top: 500px;
         margin-top: -590px;
     }
 }

 @media (max-width: 767px) {
     .bg-container {
         padding: 0px;
         border-radius: 30px;
         padding-top: 500px;
         margin-top: -590px;
         padding-bottom: 20px;
     }

     .requestcontent-box {
         position: relative;
         z-index: 8;
         padding: 0px 0px;
     }
 }

 @media (max-width: 575px) {
    .modern-form-title {
    font-size: 21px;
}
.re-banner {
    padding: 0 0 153px 0;
}
.outer-bg-container p.my-5.text-white.pe-5 {
    margin-top: 13px !important;
    margin-bottom: 15px !important;
}
     .feature-card {
         border-radius: 8px;
         min-height: 40px;
     }

     .feature-card h3 {
         font-size: 14px;
     }

     .flexgroup {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 4px;
         flex-wrap: wrap;


     }

.custom-datepicker{
    padding-right: 10px;
}
     .flexgroup .form-group-modern {
         width: 100%;
     }
 }