@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

.manrope-body {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100px;
  font-style: normal;
}


body {
     font-family: 'Manrope', sans-serif;
     color: #191919;
     font-size: 16px;

}

.btn-primary{
    background: #2EBAB7 !important;

}
.text-dark{
  color: #191919 !important;
}
.text-secondary{
  color: #807D75 !important;
}
.bg-light{
  background:  #F5F5F7 !important;
}
.fs-1{font-size:                43px !important;}
.fs-2{font-size:                32px !important;}
.fs-3{font-size:                26px !important;}
.fs-4{font-size:                20px !important;}
.fs-5{font-size:                18px !important;}
.fs-6{font-size:                16px !important;}
.fs-7{font-size:             0.875rem !important;}
.fs-8{font-size:                 8px !important;}
.form-label{font-size:16px;
    font-style:Medium;
    font-weight:500;
    color: #191919 !important;
}
.login-form{
  width: 85% !important;
}
.sign-up-form {
  width: 85% !important;
  
}

.sign-up-img{
  height: 1000px !important;
}

.form-check-input{
  align-items: start !important;
}


 /* Choose-Plan */
    /* Modified Bootstrap utility classes for gradient text */
    .text-gradient-right {
      background: linear-gradient(90deg,  #923EAC 0%, #2EBAB7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* Modified Bootstrap utilities for card with gradient border & background shadow */
    .card-monthly {
      border-radius: 2rem;
      border: none;
     box-shadow:-40px -45px 71px 0px rgb(218, 158, 236) !important;
      overflow: visible;
      backdrop-filter: blur(164px) !important;
      
    }

    .bg-gradient{
      background: linear-gradient(180deg, #681183 0%, #2EBAB7 100%) !important;

    }


    .card-yearly {
      border-radius: 2rem;
      border: none;
      box-shadow:80px -50px 71px 0px rgb(144, 207, 206) !important;
      overflow: visible;
      backdrop-filter: blur(164px) !important;
    }

    .card-quarterly {
      border-radius: 2rem;
      border: none;
      background: white;
      padding: 1.5rem;
     box-shadow: 10px 10px 90px -18px rgba(46, 186, 183, 0.45) !important;  
      position: relative;
    }

    /* Top purple "Best Value to Price" label */
    

    /* Circle radio container with circle shape */
    .custom-radio {
      border: 2.5px solid #3aa2ac;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.3s;
    }

    .custom-radio input[type="radio"] {
      opacity: 0;
      position: absolute;
    }

    .custom-radio .inner-circle {
      width: 13px;
      height: 13px;
      background-color: transparent;
      border-radius: 50%;
      transition: background-color 0.3s;
    }

    .custom-radio input[type="radio"]:checked ~ .inner-circle {
      background-color: #3aa2ac;
    }
    .custom-shadow {
    box-shadow:
        0px 20px 40px rgba(175, 70, 255, 0.25),
        0px 40px 80px rgba(160, 60, 240, 0.20),
        0px 60px 120px rgba(140, 50, 220, 0.15);
}

    /* Buy now button on quarterly card */
    .btn-buy-now {
      position: absolute;
      bottom: -1.5rem;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 2rem;
      border: none;
      font-weight: 600;
      box-shadow: 0 0 20px #3aa2ac88;
    }

    /* Features highlight background */
    .feature-item {
      background: #f3f3f3;
      padding: 0.75rem 1rem;
      margin-top: 0.5rem;
      border-radius: 0.25rem;
      font-size: 0.875rem;
      color: #5a5959;
    }

    

    /* App store badges container */
    .app-badges img {
      height: 30px;
    }

   
  /*  divder */
.divider {
      position: relative;
      width: 100%;
      height: 1px;
      background-color: #ddd;
      opacity: 0.6;
      margin: 25px auto 25px;
    }

    .divider::before,
    .divider::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 8px;
      height: 8px;
      background-color: #ddd;
      transform: translateY(-50%) rotate(45deg);
    }

    .divider::before {
      left: 0;
    }

    .divider::after {
      right: 0;
    }

    /* check-icon */
    .check-icon {
      background: linear-gradient(220.53deg, #B2F763 0%, #26AB3F 76.95%) !important;
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    .bg-gradient-1{
      background: rgba(146, 62, 172, 1) !important;

    }
/* choose-plan-2 */
.active-plan-btn{
  position: relative;
  display: inline-block;
  background: #ffffff;
  border: 0;
  cursor: pointer;
  overflow: visible; 
}

.active-plan-btn::before{
  content: "";
  position: absolute;
  inset: 0;                
  border-radius: inherit;
  z-index: 0;
  background: linear-gradient(180deg, #681183 0%, #2EBAB7 100%);
}

.active-plan-btn::after{
  content: "";
  position: absolute;
  inset: 1px;              
  border-radius: calc(50px - 2px);
  background: #ffffff;
  z-index: 1;
}

.active-plan-text{
  position: relative;
  z-index: 2;
  font-weight: 600;
  background: linear-gradient(90deg, #681183 0%, #2EBAB7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; 
}


/* tell-input-box*/
  .iti {
    width: 100%;
  }
  .iti__flag-container {
    background:#F5F5F7; 
    border-radius: 50rem 0 0 50rem; 
    padding: 10 12px;
  }
  .iti__selected-flag {
    background-color: transparent !important;
  }
  #phone {
    border: 0;
    border-radius: 50rem !important;
    background: #F5F5F7;
    padding: 0.9rem 1rem 0.9rem 4rem; 
    color: #212529;
  }
  .iti__country-list {
    border-radius: 1rem;
    width: 20rem;
  }

  /* media Query */

   @media (max-width: 900px) {
      .card-quarterly {
        margin: 2rem auto 4rem;
      }

      .btn-buy-now {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        width: 100%;
        margin-top: 1rem;
        box-shadow: none;
      }
    }
    @media(max-width:960px){
      .card-yearly {
      border-radius: 2rem;
      border: none;
      box-shadow:0px 1px 71px 12px rgb(144, 207, 206) !important;
      overflow: visible;
      backdrop-filter: blur(164px) !important;
    }
    .card-monthly {
      border-radius: 2rem;
      border: none;
     box-shadow:0px -1px 71px 18px rgb(218, 158, 236) !important;
      overflow: visible;
      backdrop-filter: blur(164px) !important;
      margin: 2rem;
    }
    }
    @media(max-width:1251px){
      .card-yearly {
      border-radius: 2rem;
      border: none;
      box-shadow:0px 1px 71px 12px rgb(144, 207, 206) !important;
      overflow: visible;
      backdrop-filter: blur(164px) !important;
      margin-top: 1rem;
    }
  }

      
.loader { position: fixed; background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; z-index: 999999999; }
.loader_over_modal { position: fixed; background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; z-index: 999999999; }
.spinner { transform: translate(-50%, -50%); top: 50%; left: 50%; position: absolute; }
.spinner-grow { width: 4rem; height: 4rem; }
 

.bg-light-gradient{
  background: linear-gradient(168.53deg, rgba(234, 255, 254, 0.5) 0%, rgba(201, 217, 241, 0.5) 97.46%) !important;
}
.btn-light{
  background: #E7E7E7 !important;
}