@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}



body{
	background: #f8f8f8;
	font-family: 'Open Sans', sans-serif;
}

.copyright{
	background: #fff;
	text-align: center;

	
}

.copyright p{
	background: #fff;
	text-align: center;
	padding: 20px 20px;
	font-weight: 700;
	
	
}


.logo{
	background: #fff;
	text-align: center;
	padding: 20px 0px;
	box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.39);
	-webkit-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.39);
	-moz-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.39);
}

.logo img{
	width: 250px;
}

.main-con{
	padding: 50px 0px;
	
}

.home{

}

.home .home-img img{
	width: 500px;
}

.form-content{

}

.heading h3{
  color: #c0392b;
  font-weight: bold;
  font-size: 50px;

}

.heading h2{
	color: #c0392b;
	font-weight: bold;
	font-size: 90px;
	line-height: 60px;
}

.heading h2 span{
	color: #333;
	font-weight: bold;
	font-size: 70px;
	font-weight: 700;
}


button {
  background-color: #c0392b;
  color: white;
  border: none;
  padding: 12px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #a93226;
}

a{
  background-color: #c0392b !important;
  color: white !important;
  border: none;
  padding: 12px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
}

.padding-extra{
  padding: 50px 0px;
}



.otp-container {
     
      text-align: center;
    }

    .otp-container h2 {
      color: #c0392b;
      font-weight: 700;
      font-size: 1.8rem;
    }

    .otp-container p {
      font-size: 0.95rem;
      color: #555;
      margin-bottom: 20px;
    }

    .otp-input {
      width: 45px;
      height: 45px;
      text-align: center;
      font-size: 20px;
      border-radius: 5px;
      border: 1px solid #ccc;
      margin: 0 3px;
    }

    .btn-continue {
      background-color: #c0392b;
      color: #fff;
      font-weight: 600;
      width: 100%;
      border: none;
      margin: 20px 0;
    }

    .btn-continue:hover {
      background-color: #a93226;
    }

    .keypad .btn {
      width: 80px;
      height: 70px;
      font-size: 24px;
      font-weight: 600;
      margin: 6px;
      border-radius: 10px;
    }

    .keypad {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 280px;
      margin: auto;
    }

    .btn-light{
      border: 1px solid #000;
    }



    .aadhaar-container {
    
      text-align: center;
    }

    .aadhaar-logo {
      width: 120px;
      margin-bottom: 15px;
    }

    h3 {
      color: #c0392b;
      font-weight: 700;
      margin-bottom: 20px;
    }

     .aadhaar-box {
    width: 32px;
    height: 30px;
    text-align: center;
    font-size: 20px;
    border: 2px solid #ccc;
    border-radius: 6px;
    outline: none;
    transition: border 0.2s;
  }
  .aadhaar-box:focus {
    border-color: #007bff;
  }

    .aadhaar-input input {
      width: 30px;
      height: 30px;
      margin: 3px;
      text-align: center;
      font-size: 18px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .qr-box {
      text-align: center;
      border: 2px dashed #ccc;
      padding: 30px 10px;
      border-radius: 10px;
      background-color: #f9f9f9;
      cursor: pointer;
      height: 100%;
    }
    .qr-box img {
      width: 80px;
      margin-bottom: 10px;
    }
    .qr-box div {
      font-weight: bold;
      font-size: 16px;
    }
    input[type="file"] {
      display: none;
    }


    .custom-radio-group,
    .custom-checkbox-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .custom-radio,
    .custom-checkbox {
      border: 2px solid #ccc;
      border-radius: 6px;
      padding: 10px 15px;
      cursor: pointer;
      transition: 0.3s;
      font-size: 16px;
      text-align: left;
      position: relative;
      padding-left: 40px;
      user-select: none;
    }

    /* Hide input */
    .custom-radio input,
    .custom-checkbox input {
      display: none;
    }

    /* Shared tick box styles */
    .custom-radio::before,
    .custom-checkbox::before {
      content: "";
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      border-radius: 4px;
      border: 2px solid #ccc;
      background-color: #fff;
    }

    .custom-radio.checked,
    .custom-checkbox.checked {
      border-color: #c0392b;
      background-color: #fff3f3;
    }

    .custom-radio.checked::before,
    .custom-checkbox.checked::before {
      border-color: #c0392b;
      background-color: #c0392b;
    }

    .custom-radio.checked::after,
    .custom-checkbox.checked::after {
      content: "✔";
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: white;
      font-size: 14px;
      font-weight: bold;
    }


 



    .progress-boxes {
      display: flex;
      justify-content: center;
      margin: 0px auto;
      width: 100%;
    }

    .step-box {
      width: 48px;
      height: 18px;
      background-color: #e0e0e0;
      border-radius: 4px;
      margin: 0 4px;
      transition: background-color 0.3s ease;
    }

    .step-box.active {
      background-color: #c0392b;
    }

    .btn-secondary-back {
      background-color: #6c757d !important;
    }

    .btn-secondary-blue {
      background-color: #007bff !important;
    }

    .aware{
      background-color: #c0392b !important;
      color: white !important;
      border: none;
      padding: 12px;
      font-size: 16px;
      font-weight: bold;
      border-radius: 5px;
      cursor:none;
    }

    .fb-icon {
        height: 50px;
        width: 50px;
        border: 5px solid #fff;
        padding: 5px;
        border-radius: 8px;
        background: #b12322;
    }

    .fb-link-div {
      width: -moz-fit-content;
      width: fit-content;
      line-height: 45px;
      /* padding: 0px 10px 0px 0px; */
      border-radius: 9px;
      background: #b12322;
      padding-left: 0px;
  }

  .custom-radio-2{
      border: 2px solid #ccc;
      border-radius: 6px;
      padding: 10px 15px;
      cursor: pointer;
      transition: 0.3s;
      font-size: 16px;
      text-align: left;
      position: relative;
      padding-left: 40px;
      user-select: none;
    }

    .custom-radio-2{
      border: 2px solid #ccc;
      border-radius: 6px;
      padding: 10px 15px;
      cursor: pointer;
      transition: 0.3s;
      font-size: 16px;
      text-align: left;
      position: relative;
      padding-left: 40px;
      user-select: none;
    }

    .custom-radio-2 input[type='radio']:after {
        width: 20px;
        height: 20px;
        border-radius: 0px;
        /* top: -2px;*/
        left: -1px; 
        position: relative;
        background-color: #fff;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

    .custom-radio-2 input[type='radio']:checked:after {
        width: 20px;
        height: 20px;
        border-radius: 0px;
        top: -5px;
        left: -5px; 
        position: relative;
        background-color: #c0392b;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid #c0392b;
        content: "✔";
        color: white;
        padding-bottom: 25px;
        padding-right: 16px;
        padding-left: 2px;

    }

    .custom-radio-2:has(input[type="radio"]:checked) {
        border: 2px solid #c0392b;
        background-color: #fff3f3;
    }

    .w-100{
      width: 100%;
    }