body, html {
      height: 100%;
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #000;
      color: white;
    }
    .hero {
      background: url('home.png') no-repeat center center/cover;
      height: 50vh;
      position: relative;
    }
    .overlay {
      background: rgba(0, 0, 0, 0.6);
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
    }
    .hero-text {
      position: absolute;
      bottom: 10px;
      right: 20px;
      font-size: 1rem;
      font-weight: 400;
      color: white;
    }
    .main-content {
      padding: 40px 20px;
      background-color: #000;
    }
    .btn-purple {
      background-color: #5c5cfe;
      border: none;
      padding: 10px;
      font-weight: bold;
      color: white;
    }
    .btn-outline-light {
      border: 1px solid #fff;
      color: white;
      font-weight: bold;
    }

        .option-btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      margin-bottom: 15px;
      border: 1px solid #444;
      border-radius: 8px;
      transition: all 0.3s ease-in-out;
      background-color: #222;
    }
    .option-btn.active {
      background-color: #444;
      transform: translateX(10px);
    }
    .option-circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      margin-right: 15px;
      flex-shrink: 0;
    }
    .next-btn {
      background-color: #fff;
      color: #000;
      border-radius: 30px;
      padding: 10px 20px;
      font-weight: bold;
    }

    .bg-purple{
      background-color: #5c5cfe;
    }
    .clickable{
      cursor: pointer;
    }


    /* progress bar  */

    .center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full screen height */
}

    .circle-wrapper {
      position: relative;
      width: 200px;
      height: 200px;
    }

    .circle-bg,
    .circle-fg {
      fill: none;
      stroke-width: 15;
    }

    .circle-bg {
      stroke: #000;
    }

    .circle-fg {
      stroke: #0b4a8e;
      stroke-linecap: round;
      transition: stroke-dashoffset 1s linear;
      transform: rotate(-90deg);
      transform-origin: center;
    }

    .time-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 5em;
      font-weight: bold;
      color: white;
    }