body {font-family: 'Poppins', sans-serif;background-color: #f8f9fa;top:0!important}
.btn-primary {background: #0b6380;border-color: #0b6380;}
.btn-primary:hover {background: #74b0bf;}
.btn-outline-primary {border-color: #0b6380;color: #0b6380;}
label.btn-outline-primary:hover {background: #0b6380;border-color: #0b6380;color: #fff;}
.btn-check:checked+.btn {background: #0b6380;border-color: #0b6380;}
.text-primary {color: #0b6380 !important;}
.bg-primary {
    --bs-bg-opacity: 1;
    background-color: #0b6380 !important;
}
.navbar .nav-link{color: #fff!important;}
.is-invalid~.invalid-feedback,
.is-invalid~.invalid-tooltip,
.was-validated :invalid~.invalid-feedback,
.was-validated :invalid~.invalid-tooltip {color: #8b0101;}
.hero {background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 50%, #fce38a 50%, #f9d29d 100%);color: white;padding: 60px 0;position: relative;min-height: 100vh;}
.hero::before {content: "";background-image: url(../images/digital-diya.jpeg);width: 50%;height: 100%;position: absolute;left: 0;background-size: cover;background-repeat: no-repeat;opacity: 0.3;background-position: center;}
.hero:after {content: "";width: 50%;height: 100%;position: absolute;right: 0;}
.hero h1 {font-weight: bold;font-size: 48px;}
.bg-glow {background: rgba(255, 255, 255, 0.3);}
.ztop {z-index: 1;}
.section-title {font-size: 32px;font-weight: 600;margin-bottom: 40px;}
.feature-card {padding: 30px;color: black;text-align: center;}
.featurebg-1 {background: linear-gradient(135deg, #b7dd96, #f7e46d, #89cba5);}
.featurebg-2 {background: linear-gradient(135deg, #fce38a, #f38181, #f9d29d);}
.featurebg-3 {background: linear-gradient(135deg, #d8b5ff, #ffecb3, #eec0c6);}
.featurebg-4 {background: linear-gradient(135deg, #fce38a, #f7e46d, #f9d29d);}
.feature-card img {max-width: 100%;max-height: 100px;}
footer {background: linear-gradient(to right, rgba(173, 108, 165, 1) 0%, rgba(124, 87, 151, 1) 22%, rgba(11, 99, 128, 1) 49%, rgba(11, 99, 128, 1) 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);color: white;padding: 40px 0;}
.footer-links a {color: white;display: block;text-decoration: none;margin-bottom: 8px;}
.social-icons a {color: white;font-size: 24px;}

.bg-calculate {background: url(../images/digital-diya.jpeg);background-size: cover;}
.step {display: none;opacity: 0;transition: opacity 0.4s ease-in-out;}
.step.active {display: block;opacity: 1;}
.progress-bar {background-image: linear-gradient(45deg, #28a745, #5cd65c);}
.calculatorholder {background: rgba(255, 255, 255, 0.8);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);max-width: 600px;}
#suggestions {position: absolute;z-index: 9999;max-height: 200px;overflow-y: auto;width: 100%;}
.suggest-wrapper {position: relative;}
.progress-step {z-index: 1;}
.progress-step span {width: 16%;display: inline-block;position: relative;}
span.step-no {width: 40px;height: 40px;border: 2px solid #a19c9c;border-radius: 100%;color: #a19c9c;text-align: center;font-size: 22px;line-height: 36px;position: initial;transition: opacity 0.4s ease-in-out;}
span.step-no::before {width: 62%;height: 2px;position: absolute;right: 100%;content: "";background: #a19c9c;top: 50%;  transform: translate(27px, -2px);}
.stepnoholder:first-child span.step-no::before {display: none;}
.stepnoholder.active span.step-no {background-color: #0b6380;color: white;font-weight: bold;border-color: #0b6380;}
.stepnoholder.active span.step-no::before {background-color: #0b6380;}
.stepnoholder.visited span.step-no {background-color: #28a745;border-color: #28a745;color: #fff;}
.stepnoholder.visited span.step-no::before {background-color: #28a745;}
.stepnoholder.current-step span.step-no {background-color: #0b6380;color: white;border-color: #0b6380;}
.stepnoholder.current-step span.step-no::before {background-color: #28a745;}
.progress {z-index: 0;}
.optional-label {font-size: 0.85rem;color: #6c757d;font-style: italic;margin-left: 0.25rem;}
.list-style {margin: 0;padding: 0;list-style: none;text-align: left;}
.luckyinfo-image img {max-width: 80px;max-height: 80px;min-width: 80px;min-height: 80px;}
.resultholder {background: rgba(255, 255, 255, 0.8);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);}
.bordergraha {border: 3px solid #0b6380;}
.nav-tabs .nav-link.active {background: #0b6380;color: #fff;border-color: #0b6380;}
.nav-tabs .nav-link {color: #0b6380;}
.border-tab {background: rgb(11 99 128 / 30%);}
.checkmark img {max-width: 24px;}
.accordion-button::after {content: "\f061";font-family: "Font Awesome 6 Free";font-weight: 900;background-image: none !important;transform: rotate(0deg);transition: transform 0.3s ease;margin-left: auto;font-size: 1rem;}
.accordion-button:not(.collapsed)::after {transform: rotate(90deg);}
.accordion-button:not(.collapsed) {color: #FFF;background-color: #0b6380;box-shadow: 0 0 0 !important;}
.accordion-button:focus {box-shadow: 0 0 0;}
.custom-list {list-style: none;padding: 0;margin: 0;}
.custom-list li {display: flex;gap: 12px;
  padding: 1.1rem 1rem;border-bottom: 1px solid #e0f2e9;transition: background 0.3s;}
.custom-list li:last-child {border-bottom: none;}
.custom-list li:hover {background-color: #f9fff6;}
.custom-list .icon {color: #38a169;font-size: 1.1rem;flex-shrink: 0;margin-top: 3px;}
.custom-list .content {flex: 1;}
.custom-list .title {font-weight: 600;font-size: 1rem;margin-bottom: 4px;color: #1a202c;}
.custom-list .desc {font-size: 0.95rem;color: #444;line-height: 1.5;}
.bg-list-box {background: #e1dfc8;padding: 15px;border-radius: 16px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);}
.bg-list-box img {max-height: 80px;}
.custom-list-check li::before {content: "\f058";font-family: 'Font Awesome 5 Free';font-weight: 900;color: #2ecc71;margin-right: 10px;}
.custom-list-cross li::before {content: "\f057";font-family: 'Font Awesome 5 Free';font-weight: 900;color: #e74c3c;margin-right: 10px;}
.custom-list-check,.custom-list-cross {list-style: none;padding-left: 0;}
.about-banner {background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 50%, rgba(11, 99, 128, 1) 50%, rgba(229, 246, 122, 1) 100%);position: relative;}
.foologo {max-width: 150px;}
.captext {text-transform: capitalize;}
#rudrakshaAccordion .accordion-item .accordion-button {background: #0b6380;color: #fff;}
.bannerbg {background-image: url(../images/banner.PNG);background-repeat: no-repeat;background-position: center;background-size: cover;}
.banner-dark {background: rgba(0, 0, 0, 0.3);}

#rudrakshaLoader {
  font-size: 1.4em !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 20px;
  min-height: 60px;
  background: linear-gradient(90deg,
      #777,
      #333,
      #777,
      #333,
      #777);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textShimmer 2s linear infinite;
}

@keyframes textShimmer {
  to {
    background-position: 200% center;
  }
}

#rudrakshaLoader::after {
  /* This color is NOT transparent, so the dots are visible */
  color: #555 !important;

  display: inline-block;
  animation: ellipsis 1.5s infinite;
  content: ".";
  width: 1.5em;
  text-align: left;
}
@keyframes ellipsis {
  0% {
    content: ".";
  }

  33% {
    content: "..";
  }

  66% {
    content: "...";
  }

  86% {
    content: "....";
  }

  100% {
    content: ".";
  }
}

.original-price {
  text-decoration: line-through;
  color: #c20909;
  /* A muted gray color */
  margin-right: 8px;
  font-size: 1.5em;
  font-weight: bold;
}

.sale-price {
  color: #ffffff;
  font-weight: bold;
  border-radius: 100%;
  height: 60px;
  width: 60px;
  display: inline-flex;
  vertical-align: middle;
  background-color: #28a745;
  font-size: 1.5em;
  align-items: center;
  text-align: center;
  justify-content: center;
  border: 2px solid;
}

.justx .original-price {
  text-decoration: line-through;
  color: #c20909;
  margin-right: 8px;
  font-size: .8em;
  font-weight: bold;
}

.justx .sale-price {
  color: #ffffff;
  font-weight: bold;
  border-radius: 100%;
  height: 60px;
  width: 60px;
  display: inline-flex;
  vertical-align: middle;
  background-color: #28a745;
  font-size: .8em;
  align-items: center;
  text-align: center;
  justify-content: center;
  border: 2px solid;
}
.logo{max-width: 200px;}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear, .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear{display: none !important;}


#google_translate_element { display: none; }
  .goog-te-banner-frame.skiptranslate,
  .goog-te-gadget {
    display: none !important;
  }
  /* Hide the top Google Translate banner */
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}
.skiptranslate{display: none !important;}
.languagebutton {
    border: 0;
    outline: 0;
    width: 100%;
    height: 60px;
    color: #232423;
    font-size: 20px;
}
.modal-title{color: #0b6380;}
.notranslate {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.notranslate li {
    padding: 5px;
    width: 50%;
}
  .d-mobile-content{display: contents;}
  .navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-toggler{border: 0;padding:5px}
.navbar-toggler:focus{outline: 0;border: 0;box-shadow: none;}
.d-mobile-content .navbar-brand{padding: 5px 6px;font-size: 16px;margin:0}
.d-mobile-content .navbar-brand.active{background: #1083a9;
    border-radius: 5px;}
    
@media only screen and (max-width: 767px) {
  .progress-step span {width: 15%;}
  span.step-no {width: 30px;height: 30px;font-size: 16px;line-height: 28px;background: #fff;color: #0b6380;}
  span.step-no::before {width: 50%;transform: translate(50%, -2px);}
  footer {background: #000}
  .custom-list li {padding: 10px;}
  .mobile-space-zero {padding: 0;}
  .resultholder {border-radius: 0 !important;}
  .nav-tabs .nav-item {width: 50%;text-align: center;}
  .navbar .nav-link{color: #0b6380 !important;}
  .hero {background: transparent;}
  .hero::before {width: 100%;}
  .hero h1 {font-size: 30px;}
  .about-banner {background: linear-gradient(to right, rgb(11, 99, 128, 1) 0%, 50%, rgba(229, 246, 122, 1) 100%)}
  #dob.flatpickr-input,#birth_time.flatpickr-input {text-align: left !important;}
  .form-floating>label[for="dob"],
  .form-floating>label[for="birth_time"] {text-align: left !important;}
  #dob::placeholder, #birth_time::placeholder { text-align: left !important; }
  input.form-control {text-align: left;}
  

}