:root {
      --theme-yellow: #ffc107;
      --theme-yellow-soft: #fff7d1;
      --theme-black: #111827;
      --theme-dark: #0f172a;
  }

  body {
      min-height: 100vh;
      background:
          radial-gradient(circle at 12% 10%, rgba(255, 193, 7, .28), transparent 28%),
          radial-gradient(circle at 88% 18%, rgba(255, 235, 153, .42), transparent 24%),
          linear-gradient(135deg, #fffdf6 0%, #f5f6fa 46%, #fff3bf 100%);
      color: var(--theme-black);
      overflow-x: hidden;
  }

  body::before,
  body::after {
      content: "";
      position: fixed;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: rgba(255, 193, 7, .18);
      filter: blur(6px);
      z-index: -1;
      animation: floatGlow 7s ease-in-out infinite alternate;
  }

  .standard-popup {
      border-radius: 16px !important;
  }

  .swal2-title {
      color: #111 !important;
      font-weight: 800 !important;
  }

  .swal2-html-container {
      color: #222 !important;
  }

  .swal2-confirm {
      color: #111 !important;
      font-weight: 700 !important;
  }

  body::before {
      top: 90px;
      left: -120px;
  }

  body::after {
      right: -130px;
      bottom: 90px;
      animation-delay: 1.2s;
  }

  .li-ui {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 0;
      border-bottom: 1px dashed #ececec;
      font-weight: 600;
      color: #212529;
      line-height: 1.5;
  }

  .li-ui:last-child {
      border-bottom: none;
  }

  .li-ui span {
      min-width: 28px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #ffe5e5;
      color: #dc3545;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      flex-shrink: 0;
  }

  .success-ui span {
      background: #e8fff1;
      color: #198754;
  }

  .custom-pill {
      background: #f5f7ff;
      color: #0d6efd;
      padding: 10px 16px;
      border-radius: 50px;
      font-weight: 600;
      border: 1px solid #dbe5ff;
  }

  .icon-box {
      width: 54px;
      height: 54px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
  }

  .seminar-card {
      transition: .3s ease;
  }

  .seminar-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .08) !important;
  }

  @media(max-width:767px) {

      .li-ui {
          padding: 12px 0;
      }

      .custom-pill {
          padding: 8px 14px;
      }

      .icon-box {
          width: 48px;
          height: 48px;
          font-size: 20px;
      }

  }

  .seminar-card {
      transition: .3s ease;
  }

  .seminar-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .08) !important;
  }

  .icon-box {
      width: 55px;
      height: 55px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
  }

  .li-ui {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 0;
      border-bottom: 1px dashed #ececec;
      font-size: 14px;
      font-weight: 600;
      color: #222;
  }

  .li-ui:last-child {
      border-bottom: none;
  }

  .li-ui span {
      min-width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #ffe5e5;
      color: #dc3545;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
  }

  .success-ui span {
      background: #e8fff1;
      color: #198754;
  }

  .custom-pill {
      background: #f5f7ff;
      color: #0d6efd;
      padding: 10px 16px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #dbe5ff;
  }

  @media(max-width:767px) {

      .seminar-card {
          border-radius: 20px !important;
      }

      .icon-box {
          width: 48px;
          height: 48px;
          font-size: 20px;
      }

      .li-ui {
          font-size: 13px;
          padding: 12px 0;
      }

      .custom-pill {
          font-size: 12px;
          padding: 8px 14px;
      }

  }

  @keyframes floatGlow {
      from {
          transform: translateY(0) scale(1);
      }

      to {
          transform: translateY(24px) scale(1.08);
      }
  }

  .container>.row>[class*="col-"] {
      animation: softFadeUp .55s ease both;
  }

  .container>.row>[class*="col-"]:nth-child(2) {
      animation-delay: .08s;
  }

  .container>.row>[class*="col-"]:nth-child(3) {
      animation-delay: .16s;
  }

  @keyframes softFadeUp {
      from {
          opacity: 0;
          transform: translateY(18px);
      }

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

  .hero-card,
  .form-card,
  .details-card {
      border: 1px solid rgba(255, 193, 7, .22);
      border-radius: 24px;
      box-shadow: 0 16px 45px rgba(17, 24, 39, 0.12);
      overflow: hidden;
      transition: transform .25s ease, box-shadow .25s ease;
  }

  .hero-card:hover,
  .form-card:hover,
  .details-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 20px 55px rgba(17, 24, 39, 0.16);
  }

  .details-card {
      background: linear-gradient(135deg, #ffffff, #fff8df);
  }

  #main_form .form-control,
  #main_form .form-select {
      height: 48px;
      font-size: 15px;
      padding: 10px 14px;
  }

  #main_form .form-control-lg {
      height: 48px;
      font-size: 15px;
      padding: 10px 14px;
  }

  @media(max-width: 767px) {

      #main_form .form-control,
      #main_form .form-select,
      #main_form .form-control-lg {
          height: 46px;
          min-height: 46px;
          font-size: 14px;
      }
  }

  .detail-box {
      height: 100%;
      border-radius: 20px;
      padding: 24px;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 0.06);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  }

  .detail-box ul {
      padding-left: 18px;
      margin-bottom: 0;
  }

  .detail-box li {
      margin-bottom: 8px;
      font-weight: 600;
  }

  .info-strip {
      border-radius: 22px;
      background: #111827;
      color: #fff;
      padding: 24px;
  }

  .info-strip .info-title {
      color: #ffc107;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .6px;
      font-weight: 800;
      margin-bottom: 6px;
  }

  .info-strip .info-value {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 0;
  }

  .slot-card {
      height: 100%;
      border-radius: 20px;
      padding: 22px;
      background: linear-gradient(135deg, #fff, #fff8db);
      border: 1px solid rgba(255, 193, 7, .45);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
  }

  .slot-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 92px;
      padding: 8px 12px;
      border-radius: 999px;
      background: #111827;
      color: #ffc107;
      font-weight: 900;
      font-size: 13px;
      margin-bottom: 12px;
  }

  .benefit-pill {
      display: block;
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 14px;
      padding: 12px 14px;
      margin-bottom: 10px;
      font-weight: 700;
  }

  .otp-input {
      height: 58px;
      font-size: 24px;
      font-weight: 800;
  }

  #verifyOtpBtn {
      background: #dc3545;
      border-color: #dc3545;
      color: #fff;
  }

  #verifyOtpBtn.ready {
      background: #198754;
      border-color: #198754;
  }

  .mobile-apply-btn {
      display: none;
  }


  .premium-registered-popup {
      border-radius: 28px !important;
      overflow: hidden !important;
      border: 1px solid rgba(255, 193, 7, .65) !important;
      box-shadow: 0 24px 70px rgba(17, 24, 39, .28) !important;
      background: linear-gradient(135deg, #ffffff 0%, #fff8dc 100%) !important;
  }

  .premium-registered-title {
      color: #111827 !important;
      font-weight: 900 !important;
      letter-spacing: -.5px !important;
      padding-top: 4px !important;
  }

  .premium-registered-confirm {
      border-radius: 999px !important;
      padding: 12px 34px !important;
      background: #ffc107 !important;
      color: #111827 !important;
      font-weight: 900 !important;
      box-shadow: 0 10px 22px rgba(255, 193, 7, .35) !important;
  }

  .already-card {
      text-align: left;
      color: #111827;
  }

  .already-icon-wrap {
      width: 74px;
      height: 74px;
      margin: 0 auto 14px;
      border-radius: 24px;
      background: linear-gradient(135deg, #ffc107, #ffdf6d);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      box-shadow: 0 14px 28px rgba(255, 193, 7, .35);
      animation: popPulse 1.5s ease-in-out infinite;
  }

  @keyframes popPulse {

      0%,
      100% {
          transform: scale(1);
      }

      50% {
          transform: scale(1.06);
      }
  }

  .already-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #111827;
      color: #ffc107;
      border-radius: 999px;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 12px;
  }

  .already-name {
      font-size: 20px;
      font-weight: 900;
      margin-bottom: 8px;
  }

  .already-note {
      background: #fff;
      border: 1px dashed rgba(17, 24, 39, .22);
      border-radius: 18px;
      padding: 14px 16px;
      font-weight: 700;
      margin: 14px 0;
  }

  .already-info-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      background: #fff7d1;
      border: 1px solid rgba(255, 193, 7, .45);
      border-radius: 16px;
      padding: 12px 14px;
      margin-bottom: 10px;
  }

  .already-info-row span:first-child {
      color: #6b7280;
      font-weight: 800;
  }

  .already-info-row span:last-child {
      color: #111827;
      font-weight: 900;
      text-align: right;
  }

  @media(max-width: 767px) {
      body {
          background: #fff7df;
      }

      .container {
          padding-left: 12px;
          padding-right: 12px;
      }

      .row.g-4 {
          --bs-gutter-y: 16px;
      }

      .hero-card,
      .form-card,
      .details-card {
          border-radius: 18px;
      }

      .card-body {
          padding: 18px !important;
      }

      .detail-box {
          padding: 18px;
          border-radius: 16px;
      }


      .batch-header {
          text-align: center;
          max-width: 760px;
          margin: 0 auto;
      }

      .batch-badge {
          display: inline-block;
          background: #ff9800;
          color: #111;
          font-weight: 800;
          padding: 8px 18px;
          border-radius: 50px;
          font-size: 13px;
          margin-bottom: 12px;
      }

      .batch-header h3 {
          font-size: 28px;
          font-weight: 900;
          color: #1f1f1f;
          margin-bottom: 8px;
      }

      .batch-header p {
          font-size: 16px;
          color: #555;
          margin-bottom: 0;
      }

      .batch-feature-card {
          height: 100%;
          background: #fff;
          border-radius: 18px;
          padding: 20px;
          border: 1px solid #f1e1c5;
          box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
          transition: all 0.25s ease;
      }

      .batch-feature-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 14px 30px rgba(255, 152, 0, 0.18);
          border-color: #ffc107;
      }

      .feature-icon {
          width: 48px;
          height: 48px;
          background: #fff3cd;
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          margin-bottom: 14px;
      }

      .batch-feature-card h6 {
          font-size: 16px;
          font-weight: 800;
          color: #222;
          margin-bottom: 8px;
      }

      .batch-feature-card p {
          font-size: 14px;
          color: #666;
          margin-bottom: 0;
          line-height: 1.5;
      }

      .form-control-lg,
      .form-select {
          min-height: 50px;
          font-size: 15px;
      }

      .otp-input {
          height: 54px;
          font-size: 22px;
      }

    .mobile-apply-btn {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;

    background: #ffc107;
    color: #111;
    text-align: center;

    padding: 16px 20px;
    border-radius: 18px 18px 0 0;

    font-size: 18px;
    font-weight: 900;
    text-decoration: none;

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18);

    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: all .25s ease;
}

.mobile-apply-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Bottom content hide fix */
@media (max-width: 768px) {

    body {
        padding-bottom: 75px;
    }

}
@media (max-width: 768px) {

    body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }

}
      .info-strip {
          padding: 18px;
          border-radius: 18px;
      }

      .info-strip .info-value {
          font-size: 16px;
      }
  }

  @media(min-width: 992px) {
      #otpCol {
          display: flex;
          align-items: center;
      }

      #otpCol .form-card {
          width: 100%;
      }
  }