/* Style for the range slider */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
    transition: background 0.3s ease;
    cursor: pointer;
}

/* Style for the track before the thumb (filled portion) */
input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    background: linear-gradient(90deg, #007bff, #80d0ff);
    border-radius: 5px;
    transition: background 0.3s ease;
}

/* Style for the thumb (slider handle) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background-color: #000000;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

/* Hover and focus effects for the thumb */
input[type="range"]::-webkit-slider-thumb:hover {
    background-color: #0056b3;
    cursor: pointer;
}

input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.2);
}

/* Firefox Styles */
input[type="range"]::-moz-range-track {
    height: 8px;
    background: linear-gradient(90deg, #007bff, #80d0ff);
    border-radius: 5px;
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background-color: #007bff;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

/* Hover and active effects for Firefox thumb */
input[type="range"]::-moz-range-thumb:hover {
    background-color: #0056b3;
}

input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.2);
}

/* Edge Styles */
input[type="range"]::-ms-track {
    width: 100%;
    height: 8px;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type="range"]::-ms-fill-lower {
    background: linear-gradient(90deg, #007bff, #80d0ff);
    border-radius: 5px;
}

input[type="range"]::-ms-fill-upper {
    background: #ddd;
    border-radius: 5px;
}

input[type="range"]::-ms-thumb {
    width: 18px;
    height: 18px;
    background-color: #007bff;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

/* Hover and active effects for Edge thumb */
input[type="range"]::-ms-thumb:hover {
    background-color: #0056b3;
}

input[type="range"]:active::-ms-thumb {
    transform: scale(1.2);
}
.top-nav-tab .nav-link {
    color: black;
    padding: 15px;
}
.active-tab {
    background: #eff1f3;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.plan-type {
    background-color: #EAEFF3;
}
.fs-12 {
font-size: 12px;
}
 .custom-list {
    list-style: none;
    padding-left: 0;
}
.custom-list li {
    position: relative;
    padding-left: 24px; /* add space for icon */
    margin-bottom: 8px;
}
.custom-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 256 256"><g transform="translate(1.4 1.4) scale(2.81 2.81)"><circle cx="45" cy="45" r="45" fill="rgb(40,201,55)"/><path d="M38.478 64.5c-0.01 0-0.02 0-0.029 0-1.3-0.009-2.533-0.579-3.381-1.563L21.59 47.284c-1.622-1.883-1.41-4.725 0.474-6.347 1.884-1.621 4.725-1.409 6.347 0.474l10.112 11.744L61.629 27.02c1.645-1.862 4.489-2.037 6.352-0.391 1.862 1.646 2.037 4.49 0.391 6.352l-26.521 30c-0.845 0.957-2.073 1.51-3.362 1.51z" fill="white"/></g></svg>') no-repeat center;
    background-size: contain;
}
  .bg-f5 {
  background: #F5F6FB;
  }
  table.table td {
    height: 40px;
}
  .img-center {
    text-align: center;
}
.bg-monthly {
    background:#FFEAEA;
}
.bg-quarterly {
    background:#DCEEFF;
}
.bg-yearly {
    background:#DAF8E9;
}
@media only screen and (max-width: 991.99px) {
.nav-link2 {
font-size: 12px;
}
}
  button#nav-monthly-tab[aria-selected="true"],
  button#nav-monthly-tab:hover[aria-selected="false"] {
  background: #cb6161;
  color: white;
  border: 1px solid #cb6161;
}
  button#nav-monthly-tab[aria-selected="false"] {
  color: #cb6161;
  border: 1px solid #cb6161;
}
   button#nav-quarterly-tab[aria-selected="true"],
   button#nav-quarterly-tab:hover[aria-selected="false"] {
  background: #5f99cf;
  color: white;
  border: 1px solid #5f99cf;
}
  button#nav-quarterly-tab[aria-selected="false"] {
  color: #5f99cf;
  border: 1px solid #5f99cf;
}
   button#nav-yearly-tab[aria-selected="true"],
   button#nav-yearly-tab:hover[aria-selected="false"] {
  background: #367455;
  color: white;
  border: 1px solid #367455;
}
  button#nav-yearly-tab[aria-selected="false"] {
  color: #367455;
  border: 1px solid #367455;
}
 .text-cb {
 color: #cb6161;
 }
.text-41 {
color: #417db5;
}
.text-35 {
color: #35bb78;
}
                                
  
    .pricing-box {
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 15px;
      text-align: center;
      background: #f9f9f9;
      transition: 0.3s;
    }
                                
                                .suggestionsul {
    display: none;
    max-height: 282px;
    overflow-y: auto;
                                z-index:3;
}
                                
                                <style>
  .option-card {
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;

  }

  .option-card.selected {
    border: 2px solid #0d6efd;
    background-color: #e7f1ff;
  }

  .option-card:hover {
    transform: scale(1.02);
  }

  select#durationSelect {
    display: none;
  }
                                
                                .swiper-container {
  max-height: 100%;
  padding: 20px 0; /* reduce vertical spacing */
}
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; 
    margin-top: 41px !important;
    margin-bottom: 10px !important;

/* make sure it fills the container */
}

.swiper-wrapper {
  align-items: center;
    margin-left: 8px !important;/* this aligns slides vertically */
}
                                
                                .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  margin: 0 !important;
  height: auto; /* or a specific value if needed */
}

.swiper .card {
 width:250px !important; 
  box-sizing: border-box;
}
                                
                                .swiper-button-next,
.swiper-button-prev {
  font-size: 20px; /* adjust size */
  width: 35px;
  height: 35px;
  background-color: #f0f0f0; /* optional background */
  border-radius: 50%;        /* optional rounded buttons */
  color: #007bff;            /* optional color */
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 16px; /* reduce icon arrow size */
}
                                
                                
                                .swiper-button-next{
                                	right:49px !important;
                                }
                                
                                 .swiper-button-prev{
                                	left: auto !important;
    								right: 92px !important;
                                }
                                
                                
                                .swiper-button-next, .swiper-button-prev{
                                
                                	top:7% !important
                                }
                                
                                
                                 #pricingModal .modal-content{
		  background: linear-gradient(135deg, #dc3545 0%, #000000 100%) !important;
	}
    #pricingModal .pricing-section {
  margin: 0 auto;
  border-radius: 16px;

}

#pricingModal .pricing-header {
  text-align: center;
  margin-bottom: 40px;
  color: #f8f9fa;
}

#pricingModal .pricing-header h2 {
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: -0.02em;
}

#pricingModal .card {
  background: #121212;
  border: 1px solid #333;
  border-radius: 12px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.15);
  color: #f8f9fa;
  position: relative;
  z-index: 1;
}

#pricingModal .card:hover {
  box-shadow: 0 10px 30px rgba(220, 53, 69, 0.7);
  border-color: #dc3545;
}

#pricingModal .card-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;

}

#pricingModal .plan-title {
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: #dc3545;
  text-align: center;
  letter-spacing: 0.02em;
}

#pricingModal .price {
  font-weight: 700;
  font-size: 3rem;
  text-align: center;
  margin-bottom: 0.5rem;
  color: #f8f9fa;
}

#pricingModal .period {
  font-weight: 500;
  font-size: 1.1rem;
  color: #bbb;
  text-align: center;
  margin-bottom: 1.8rem;
}

#pricingModal ul.features {
  list-style: none;
  padding-left: 0;
  color: #ddd;
}

#pricingModal ul.features li {
  padding-left: 1.5rem;
  position: relative;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.9rem;
}

#pricingModal ul.features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #dc3545;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  top: 0.15rem;
}

#pricingModal .btn-select {
  background-color: #dc3545;
  text-decoration:none;
  border: none;
  border-radius: 8px;
  padding: 12px 0;
  font-weight: 600;
  font-size: 1.1rem;
  color: #fff;
  width: 100%;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}

#pricingModal .btn-select:hover,
#pricingModal .btn-select:focus {
  background-color: #a52730;
  box-shadow: 0 6px 12px rgba(165, 39, 48, 0.7);
  outline: none;
  color: #fff;
}

#pricingModal .recommended {
  border: 2.5px solid #ff4757;
  box-shadow: 0 0 25px 6px rgba(220, 53, 69, 0.85);
  transform: scale(1.05);
  z-index: 2;
  background: #1c1c1c;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#pricingModal .recommended:hover {
  transform: scale(1.08);
  box-shadow: 0 0 40px 10px rgba(220, 53, 69, 1);
  border-color: #ff6b76;
}

#pricingModal .recommended-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #dc3545;
  color: #fff;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(220, 53, 69, 0.8);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
  z-index: 10;
}