@import url('https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.form-wrapper * {font-family: "Poppins", Sans-serif;}
.form-wrapper {display: flex; flex-direction: column; justify-content: center; min-height: 500px;}
.form-wrapper .form-title h2 {font-size: 30px; font-weight: 700; line-height: 36px;}
.form-wrapper .field label {font-size: 16px; padding: 10px 0 0px 0; font-weight: 500; color: #ffffff;}
.form-wrapper .field label sup {color: #ffffff;}
.form-wrapper .field input {border: unset; border-bottom: 1px solid #ffffff; border-radius: 4px; color:#ffffff; font-size: 15px; padding: 4px 12px 8px 12px; width: 100%; background: transparent !important;}
.form-wrapper .field textarea {resize: none; height: 38px;border: unset; border-bottom: 1px solid #ffffff; border-radius: 4px; color:#ffffff; font-size: 15px; padding: 4px 12px 8px 12px; width: 100%; background: transparent !important;}
.form-wrapper .field select {border: unset; background: unset; color: #ffffff; padding:4px 12px 8px 12px; border-bottom: 1px solid #ffffff; border-radius: 4px; font-size: 15px; width: 100%;}
.form-wrapper .field select option {background: #ffffff; color: #000;}
.form-wrapper .field input:focus {outline: none;}
.form-wrapper .field textarea:focus {outline: none;}
.form-wrapper .fields-container {display: flex; flex-wrap: wrap; gap: 0 20px; align-items: end;}
.form-wrapper .field .radio-row label {padding: 10px 10px;}
.form-wrapper .field {padding: 10px 10px; display: flex; flex-direction: column; flex-basis: 32%;}
.form-wrapper .field6 input {width: auto;}
.form-wrapper .field18 input {width: auto;}
.other-option {display: none; margin: 20px 0 0 0;}
.other-option::placeholder {color: #fff;}
.other-input-active {border-bottom: unset !important;}


/* .form-wrapper .fields-container .field9 {flex-basis: 48%;}
.form-wrapper .fields-container .field10 {flex-basis: 48%;}
.form-wrapper .fields-container .field11 {flex-basis: 48%;}
.form-wrapper .fields-container .field12 {flex-basis: 48%;} */

.form-wrapper .paymentbtn {margin: 20px 0 0 0;  border: unset;    background-image: none;  background-size: auto;  color: #fff; padding: 10px 38px;  border-radius: 30px;  font-size: 16px;  font-weight: 500;  transition: all 0.3s;  background-image: linear-gradient(130deg, rgb(223, 0, 15) 26%, rgb(176, 3, 33) 71%);
  background-size: 100%;  min-width: 130px;}
.form-wrapper .paymentbtn:hover {transform: translateY(-4px);}
.form-wrapper .paymentbtn:focus {outline: unset;}
.form-wrapper .note {flex-basis: 100%; padding: 0 10px;} 
.form-wrapper p {font-size: 14px; font-weight: 500; color: #ffffff;}
.form-wrapper .successful-msg {display: none; color:#ffffff;}
.form-wrapper .successful-msg p {color: #ffffff;}
.success-msg a {border-radius: 40px;  padding: 10px 22px;  font-size: 16px;  color: #fff;  background-image: linear-gradient(130deg, rgb(0, 149, 31) 26%, rgb(2, 89, 15) 71%); margin: 26px 0 0 0; display: inline-block;}
.success-msg h4 {font-size: 54px; color: #fff; font-weight: 600; margin: 24px 0;}
.success-msg h6 {font-size: 18px; color: #fff; font-weight: 600; margin: 14px 0; text-transform: unset; line-height: 24px;} 
/* .success-msg p {font-size: 18px; color: #fff; font-weight: 600; margin: 14px 0;} */

.form-wrapper .show-msg {display: block !important;}
.form-title.title-1 h2 {margin: 0 0 10px 0; color: #ffffff;}
.redirect-alert {display: none;}
.whatsapp-community {display:none;color: #3dc24e; text-decoration: underline !important; font-size: 22px;}  
.form-wrapper .step-1 .form-navigation {justify-content: end;}
 .form-step .next-btn {margin: 20px 0 0 0;  border: unset;  background: #df000f;  color: #fff;  padding: 10px 38px;  border-radius: 30px;  font-size: 16px;  font-weight: 500; transition: all 0.3s; background-image: linear-gradient(130deg, rgb(223, 0, 15) 26%, rgb(176, 3, 33) 71%); background-size: 100%;  min-width: 130px;}
.form-step .next-btn:hover {background-size: 200%; box-shadow: 2px 2px 18px 10px #df000f3d;}
.form-step .prev-btn {margin: 20px 0 0 0;  border: unset;  background: #df000f;  color: #fff;  padding: 10px 38px;  border-radius: 30px;  font-size: 16px;  font-weight: 500; transition: all 0.3s; background-image: linear-gradient(130deg, rgb(223, 0, 15) 26%, rgb(176, 3, 33) 71%); background-size: 100%; min-width: 130px;}
.form-step .prev-btn:hover {background-size: 200%; box-shadow: 2px 2px 18px 10px #df000f3d;}
.form-navigation {display: flex; gap: 0 10px; justify-content: space-between;}
.form-navigation.payment-step {justify-content: space-between;}
#academyForm .form-heading h2{margin: 16px 0; font-size: 32px;
  font-weight: 700; color: rgb(255, 255, 255);} 
.form-step { display: none;}
.form-step.active { display: block;}
.form-progress {  width: 100%;  height: 6px;  background: #eee; border-radius: 3px;  margin-top: 30px;  overflow: hidden;}

.form-progress-bar {width: 0%; height: 100%; background: #e80606;  transition: width 0.4s ease;  border-radius: 20px;}
#scholarship-form .form-heading h2 {margin: 16px 0;  font-size: 32px;  font-weight: 700;  color: rgb(255, 255, 255);}
textarea::placeholder { color: #ffffffb5; }
#scholarship-form .form-msg {margin: 20px 0 0 0;}
.hidden-bar {display: none !important;}

.payment-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #afafaf;
    padding: 20px;
    border-radius: 8px;
    z-index: 1000;
    text-align: center;
}
.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #1497fb; /* Match your theme color */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
 @media only screen and (max-width: 1440px) {
  .form-wrapper .field4 {flex-basis: 48%;}
  .form-wrapper .field5 {flex-basis: 48%;}

 }

  @media only screen and (max-width: 768px) {
    .form-wrapper .fields-container {gap: 0 12px;}
    .form-wrapper .field {padding: 12px 6px;}
    .form-wrapper .field label {font-size: 16px;}
    .form-wrapper .field input {padding: 6px;}
    .form-wrapper .field select {padding: 6px;}
    .form-wrapper .field select option[disabled][selected][hidden] { font-size: 10px !important;}
    .form-wrapper .paymentbtn {padding: 10px 32px; font-size: 18px;}

}

  @media only screen and (max-width: 580px) {

    .form-wrapper .field input {font-size: 14px;}
    .form-wrapper .field select {font-size: 14px;}
    .form-wrapper .note p {font-size:13px;}
    .form-wrapper .paymentbtn {padding: 11px 30px; font-size: 16px;}
    #academyForm .form-heading h2 {line-height: 40px; font-size: 26px; line-height: 34px}
    .form-wrapper .field label {padding: 4px 0 2px 0; display: inline-flex;}
    .form-wrapper .field .radio-row label {padding: 0 10px 0 0;}
     .form-wrapper .field .radio-row {margin: 10px 0 0 0;}
  .success-msg h4 {font-size: 40px;}
  .success-msg p {font-size:15px; line-height: 19px;}
  .form-wrapper .field label sup {position: relative;  top: 11px;  left: 4px;}
}


/* Scholarship Form */
.form-wrap2 {display: flex; flex-direction: column; justify-content: center; min-height: 500px;}
.form-wrap2 * {font-family: "Poppins", Sans-serif;}
#scholarship-form .field label {font-size: 16px; padding: 10px 0 10px 0; font-weight: 500; color: #ffffff}
.form-wrap2 .field label {font-size: 16px; padding: 10px 0 10px 0; font-weight: 500; color: #ffffff}
.form-wrap2 .field label sup {color: #e80606;}
.form-wrap2 .field input {border: unset; border-bottom: 1px solid #ffffff; border-radius: 4px; color: #ffffff; font-size: 16px; padding: 4px 12px 8px 12px; width: 100%; background: transparent;}
.form-wrap2 .field label {width: 100%;}
.form-wrap2 .field textarea {resize: none; border: unset; border-bottom: 1px solid #ffffff; border-radius: 4px; color: #ffffff; font-size: 15px; padding: 4px 12px 8px 12px; width: 100%; background: transparent; height: 38px;}
.form-wrap2 .field textarea:focus {outline: none;}
.form-wrap2 .field select {border: unset; background: unset; color: #ffffff; padding:4px 12px 8px 12px; border-bottom: 1px solid #ffffff; border-radius: 4px; font-size: 16px; width: 100%;}
.form-wrap2 .field input:focus {outline: none;}
.form-wrap2 .fields-container {display: flex; flex-wrap: wrap; gap: 0 20px; align-items: end;}
.form-wrap2 .field {padding: 20px 10px; display: flex; flex-direction: column; flex-basis: 48%;}
.form-wrap2 .radio-row {display: flex; flex-direction: column;}
.form-wrap2 .radio-row input {width: auto;}
#scholarship-submit {margin: 20px 0 0 0; border: unset; background: #df000f;   background-image: none;   background-size: auto; color: #fff; padding: 10px 38px; border-radius: 30px; font-size: 16px; font-weight: 500; transition: all 0.3s; background-image: linear-gradient(130deg, rgb(223, 0, 15) 26%, rgb(176, 3, 33) 71%);  background-size: 100%; min-width: 130px;}
#scholarship-submit:hover {background-size: 200%; box-shadow: 2px 2px 18px 10px #df000f3d;}
.form-errors ul li {font-size: 16px; color: #df000f;}
.form-wrap2 .error-msg p {font-size: 16px; color: #df000f;}
.form-wrap2 .form-msg p {color: #ffffff; font-size: 16px;}
.form-error p {color: #ffffff; font-size: 16px;}
 .success-msg p {font-size: 30px; font-weight: 500; color: #ffffff; line-height: 38px;}
 .form-msg p {font-size: 30px; font-weight: 500; color: #ffffff}
 #scholarship-form .sub-text {color: #fff; font-size: 16px; font-weight: 500;}
 #scholarship-form .step-1 .form-navigation {justify-content: end;}
 #scholarship-form .field .radio-row > label {display: flex; align-items: baseline; gap: 0 6px;}

   @media only screen and (max-width: 580px) {
    .form-wrap2 .field {padding: 10px 0px;}
    #scholarship-form .field .radio-row label {font-size: 16px;}
    #scholarship-form .field .radio-row label span {font-size: 16px;}
    #scholarship-form .field .radio-row > label > input {position: relative; top: 3px;}
    .form-wrap2 .success-msg p {font-size: 22px; line-height: 32px;}
   }