body {
      background-color: #11394e;
      color: white;
      font-family: 'Segoe UI', sans-serif;
    }
    .start-box {
      max-width: 500px;
      margin: auto;
    }

    .logo {
      position: absolute;
      top: 20px;
      right: 30px;
      width: 160px;
    }

    .device-img {
      width: 100%;
      border-radius: 1rem;
    }

    .start-btn {
      background-color: #276ef1;
      border: none;
      padding: 0.6rem 2rem;
      font-size: 1.2rem;
      border-radius: 0.5rem;
      color: white;
      margin-top: 1rem;
    }

    .start-btn:hover {
      background-color: #1a5ed1;
    }

    @media (max-width: 768px) {
      .logo {
        width: 120px;
        top: 10px;
        right: 20px;
      }

      .start-btn {
        width: 100%;
      }
    }
    .option-card {
      background-color: transparent;
      border: 1px solid #ccc;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .option-card:hover {
      background-color: #1d4d65;
    }
    .option-card.active {
      background-color: white;
      color: #11394e;
      font-weight: 600;
    }
    
    .ok-btn:hover {
      background-color: #0039cb;
    }
    .text-end {
    text-align: right !important;
}

    .razorpay-logo {
      width: 150px;
      position: absolute;
      top: 20px;
      right: 30px;
    }
    .question-box {
      max-width: 800px;
      margin: auto;
      padding-top: 120px;
      text-align: left;
    }

    .option {
      background-color: transparent;
      border: 1px solid #a0b6c8;
      border-radius: 8px;
      padding: 12px 16px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      cursor: pointer;
      color: white;
      transition: background-color 0.2s;
    }

 .option.selected, .option-card.active {
  background-color:#1d4d65;
  border-color: #007bff;
}

    .option:hover, .option.selected {
      background-color: #1d4d65;
    }

    .option input {
      display: none;
    }

    .option span.letter {
      font-weight: bold;
      border: 1px solid #a0b6c8;
      border-radius: 4px;
      padding: 4px 12px;
      margin-right: 15px;
      min-width: 30px;
      text-align: center;
    }

   

    .nav-arrows {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: flex;
      gap: 2px;
    }

    .nav-arrows button {
      background-color: #2f6bfc;
      border: none;
      color: white;
      padding: 6px 10px;
      font-size: 1rem;
      border-radius: 4px;
    }

    @media (max-width: 768px) {
      .razorpay-logo {
        width: 110px;
        top: 10px;
        right: 15px;
      }

      .btn-ok {
        width: 100%;
      }
    }

     .option-card {
      background-color: transparent;
      border: 1px solid #ccc;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .option-card:hover {
      background-color: #0e2e42;
    }
    .option-card.active {
      background-color: white;
      color: #11394e;
      font-weight: 600;
    }
    .ok-btn {
  background-color: #2f6bfc;
    border: none;
    color: white;
    font-weight: bold;
    padding: 10px 24px;
    font-size: 1.2rem;
    border-radius: 6px;
    }
    .ok-btn:hover {
      background-color: #0039cb;
    }

     .form-control,
    .form-select {
      background-color: transparent;
      border: none;
      border-bottom: 1px solid #ccc;
      border-radius: 0;
      color: white;
    }
    .form-control::placeholder {
      color: #bbb;
    }
    .form-control:focus {
      border-bottom: 2px solid white;
      box-shadow: none;
    }
    .ok-btn {
      background-color: #2962ff;
      color: white;
      font-weight: bold;
    }
    .ok-btn:hover {
      background-color: #0039cb;
    }

.form-select {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    color: white;
}
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.w-100 {
    width: 100% !important;
}
#red{    background-color: transparent;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    color: white;
  }
  .mb-3 {
    margin-bottom: 2rem !important;
}
.fs-5 {
    font-size: 1.25rem !important;
}
.intrusted{font-size: 25px;
    margin-top: 10px;
    margin-bottom: 0px;}

    .text-light{    font-size: 20px;
    margin-bottom: 6px;
    margin-top: 15px;}