@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
   @font-face {
        font-family: popins-regular;
        src: url(../fonts/poppins/Poppins-Regular.ttf);
    }
     @font-face {
        font-family: popins-semiBold;
        src: url(../fonts/poppins/Poppins-SemiBold.ttf);
    }
    @font-face {
        font-family: popins-medium;
        src: url(../fonts/poppins/Poppins-Medium.ttf);
    }
    body {
      background-color: #c5d5a7;
      background-image: url(bg1.png);
      background-size: cover;
      display: flex;
      align-items: center;0
      justify-content: center;
      height: 95vh;
    }
    .quiz-container {
      max-width: 400px;
      text-align: center;
      padding:0 1rem;
      margin: 0 auto;  
    }
    .time-left {
      background: #f1f1f1;
      display: inline-block;
      padding: 0.5rem 1rem;
      border-radius: 1rem;
      font-family: 'popins-regular';
      font-size: 13px;
    }

    .pro_desc {
    font-size: 20px;
     font-family: 'popins-regular';
}
    .title{
        font-size: 26px;
        /*font-family: 'popins-medium';*/
        font-family: "Playfair Display", serif;
        font-weight: bold;
    }
    .time-left span {
      font-family: 'popins-semiBold';
      font-size: 13px;
    }
    .question{
        padding: 20px;
        font-size: 23px;
        font-family: 'popins-medium';
        background-image: url(../images/bg.png);
        background-size: 100% 120%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .option input[type="radio"] {
      display: none;
    }
    .option label {
      display: block;
      border: 1px solid #ddd;
      border-radius: 2rem;
      padding: 0.69rem 1rem;
      cursor: pointer;
      width: 100%;
    }
    .option input[type="radio"]:checked + label {
      background: pink;
      border-color: pink;
    }
    .btn-next {
      border-radius: 2rem;
      padding: 0.75rem 2rem;
      background-color: #000 !important;
    }
        /* Scoped Onboarding Carousel Styles */
    .onboarding-container {
      max-width: 400px;
      margin: auto;
      padding: 2rem 1rem;
      text-align: center;
    }

    .carousel-item img {
      max-width: 100%;
      height: auto;
    }

    .onboarding-title {
      font-weight: 700;
      margin-top: 2rem;
      margin-bottom: 1rem;
      color: #27412F;
      font-family: "Roboto", sans-serif;
      font-size: 22px;
    }

    .onboarding-text {
      color: #27412F;
      font-family: "Roboto", sans-serif;
      font-size: 15px;
      margin-bottom: 2rem;
    }

    .carousel-indicators {
      padding-top:50px;
    }

     .carousel-indicators [data-bs-target] {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #E4E4E4;
      opacity: 1;
      margin-top: 20px;
    }

    .carousel-indicators .active {
        background-color: #000;
        width: 20px;
        height: 8px;
        border-radius: 20px;

    }

    .btn-onboarding {
      display: block;
      width: 100%;
      background: #F1E139;
      border: none;
      padding: 0.75rem;
      font-weight: 500;
      font-family: "Roboto", sans-serif;
      font-size: 16px;
    }

    .onboarding-link {
      display: block;
      margin-top: 1rem;
      font-size: 0.9rem;
      text-decoration: underline;
      color: #1D1D1D;
      font-family: "Roboto", sans-serif;
      font-size: 13px;
      font-weight: 500;
    }

    .btn-bg-warning{
        background-color: #FFD688;
    }

    .btns-labels{
        font-size: 12px;
        font-family: 'popins-medium';
        background-color: #fff;
    height: 48px;
    border: solid thin #333;
    }

    .user{
        width: 150px;
        height: 150px;
    }

    .rm-bg{
        background-image: unset !important;
    }
    .glass{
        padding: 0.5rem;
    }
    .bravo{
    font-size: 52px;
    font-family: 'popins-medium';
    font-weight: bold;

    }

    .ans-bullet {
    list-style: none; /* default bullet remove */
    padding-left: 0;  /* optional, adjust as needed */
    }

    .ans-bullet li {
    position: relative;
    padding-left: 2em; /* space for icon */
    margin-bottom: 20px;
    }

   .ans-bullet li::before {
  content: "";
  background-image: url('../images/bulleticon.png'); /* ✅ your icon path */
  background-size: 16px 16px; /* adjust size */
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  top: 0.3em; /* adjust vertical alignment */
}

.sub-title{
    margin-bottom: 2rem;
    font-size: 25px;
}