.mb-20px {
  margin-bottom: 20px;
}

.ms-20px {
  margin-left: 20px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content-blur {
  filter: blur(5px);
}

.whitespace-nowrap {
  white-space: nowrap !important;
}

.btn-group {
  height: 38px;
  border-radius: 50px;
  overflow: hidden;
}

.vcard-btn-group {
  width: 50px;
  height: 50px;
  color: #fb5253;
  border: 1px solid #fb5253;
  background-color: white;
  border-radius: 50px !important;
}

.sticky-vcard-div {
  position: fixed;
  bottom: 22px;
  left: 0;
  z-index: 9999;
}

.modal {
  z-index: 99999 !important;
  background-color: #00000080;
}
.modal .modal-dialog .modal-content {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 0.475rem;
  outline: 0;
}
.modal .modal-dialog .modal-content .modal-header {
  padding: 22px;
  border-bottom: 1px solid #eff2f5;
}
.modal .modal-dialog .modal-content .modal-body {
  padding: 1.75rem;
}
.modal .modal-dialog .modal-content .modal-body .required:after {
  color: #f62947;
  content: "*";
  font-size: inherit;
  font-weight: 700;
  position: relative;
}
.modal .modal-dialog .modal-content .modal-body .input-box {
  background-color: #f5f8fa;
  border: unset;
  color: #5e6278;
  transition: all 0.2s ease;
  font-size: 1.1rem;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  border-radius: 0.475rem;
}
.modal .modal-dialog .modal-content .modal-body .input-box:focus {
  box-shadow: unset;
  background-color: #eef3f7;
}
.modal .modal-dialog .modal-content .modal-footer {
  padding: 1.875rem;
}
.modal .modal-dialog .modal-content .modal-footer .btn {
  padding: 10px 20px !important;
  border-radius: 0.475rem !important;
}
.modal .modal-dialog .modal-content .modal-footer .submit-btn {
  background-color: #6571ff !important;
  border: unset;
  outline: unset;
  color: #fff;
  padding: 10px 20px !important;
  margin-top: 26px;
}
.modal .modal-dialog .modal-content .modal-footer .submit-btn:hover {
  background-color: #6571ff !important;
}
.modal .modal-dialog .modal-content .modal-footer .submit-btn:focus {
  box-shadow: unset;
}

.main-payment {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-payment .payment-section {
  box-shadow: 2px 0 8px 2px #dfdbdb;
}
@media (max-width: 576px) {
  .main-payment .payment-section .payment-heading {
    width: 100%;
    text-align: center;
  }
}
.main-payment .payment-section .payment-heading .payment-title {
  font-size: 67px;
  font-weight: bold;
  color: #f56758;
}
@media (max-width: 992px) {
  .main-payment .payment-section .payment-heading .payment-title {
    font-size: 55px;
  }
}
@media (max-width: 668px) {
  .main-payment .payment-section .payment-heading .payment-title {
    font-size: 45px;
  }
}
.main-payment .payment-section .payment-heading .payment-text {
  font-size: 30px;
  color: #595957;
  font-weight: 600;
}
@media (max-width: 992px) {
  .main-payment .payment-section .payment-heading .payment-text {
    font-size: 25px;
  }
}
@media (max-width: 668px) {
  .main-payment .payment-section .payment-heading .payment-text {
    font-size: 20px;
  }
}
.main-payment .payment-section .payment-heading .payment-btn {
  background: #f68880;
  color: white;
}

.main-payment-success {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-payment-success .payment-head {
  padding: 50px;
  box-shadow: 2px 0 8px 2px #ededed;
  border-radius: 10px;
  background: #fafcff;
}
@media (max-width: 455px) {
  .main-payment-success .payment-head {
    padding: 20px;
  }
}
.main-payment-success .payment-head .payment-details {
  padding: 30px;
}
@media (max-width: 350px) {
  .main-payment-success .payment-head .payment-details {
    padding: 10px;
  }
}
.main-payment-success .payment-head .payment-details .payment-info {
  text-align: center;
}
.main-payment-success .payment-head .payment-details .payment-info .payment-icon {
  font-size: 50px;
  color: #46ceac;
}
.main-payment-success .payment-head .payment-details .payment-info .payment-title {
  color: #46ceac;
}
@media (max-width: 992px) {
  .main-payment-success .payment-head .payment-details .payment-info .payment-title {
    font-size: 25px;
  }
}
.main-payment-success .payment-head .payment-text {
  color: #a2a8bb;
}
.main-payment-success .payment-head .payment-img {
  padding-left: 100px;
}
@media (max-width: 768px) {
  .main-payment-success .payment-head .payment-img {
    display: none;
    padding-left: 0;
  }
}

.btn-back {
  background-color: #46ceac;
  color: white;
}

.social-link-modal {
  display: flex;
}
@media (max-width: 450px) {
  .social-link-modal {
    display: block !important;
  }
}
.social-link-modal a {
  text-decoration: none !important;
}

input::-moz-placeholder {
  overflow: visible;
}

input::placeholder {
  overflow: visible;
}

.custom-nav-margin {
  margin-top: 121px !important;
}

.vcard-11-back {
  left: 875px !important;
  top: 51px !important;
}

.morecontent span {
  display: none;
  font-weight: 400 !important;
  -webkit-box-orient: vertical;
}

.morelink {
  cursor: pointer;
}

#toast-container > div {
  min-width: 400px !important;
}
@media (max-width: 575px) {
  #toast-container > div {
    min-width: 300px !important;
  }
}

.lightbox {
  display: flex;
  flex-direction: column-reverse;
}

.lb-data .lb-number {
  padding-bottom: 0 !important;
  padding-top: 1rem;
}

#wpNumber::-webkit-inner-spin-button {
  display: none;
}

#wpNumber {
  height: 30px;
}

.wp-number-container {
  position: fixed;
  z-index: 999999;
}

.input {
  background-color: white;
  border: none;
  border-bottom: 1px solid #CCC;
  color: #555;
  box-sizing: border-box;
  font-family: "Arvo";
  font-size: 18px;
  height: 50px;
  padding: 20px;
  position: relative;
  right: 132% !important;
  top: -182px !important;
  width: 160px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  border-radius: 25px;
}
.input:focus {
  outline: none;
}

.input::-webkit-input-placeholder {
  color: #AAA;
}

.input:focus::-webkit-input-placeholder {
  color: #969696;
}

.input:focus + .underline {
  transform: scale(1);
}

.underline {
  display: inline-block;
  height: 2px;
  right: 238px;
  margin-top: -4px;
  position: absolute;
  top: -139px;
  transform: scale(0, 1);
  width: 132px;
}

.share-wp-btn-div {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 5px;
  top: 5px;
}
.share-wp-btn-div .share-wp-btn {
  width: 40px;
  height: 40px;
  font-size: 18px;
}

.vcard-wp-btn {
  background-color: #18b718 !important;
  width: 50px;
  height: 50px;
  font-size: 15px;
  border: none;
}

.vcard11-sticky-btn {
  position: absolute;
  right: 22px;
  width: 40px;
  height: 40px;
  background-color: #18b718;
  top: 50%;
  z-index: 99999;
  font-size: 12px;
}
@media (max-width: 1199px) {
  .vcard11-sticky-btn {
    right: 25px;
  }
}

.vcard11-underline {
  position: absolute;
  background-color: #fd5479;
  display: inline-block;
  height: 2px;
  top: 39px;
  right: -44px;
  transform: scale(0, 1);
  transition: all 0.5s linear;
  width: 132px;
}
@media (min-width: 1199px) {
  .vcard11-underline {
    right: -63px;
  }
}

.vcard11-input:focus + .vcard11-underline {
  transform: scale(1) !important;
}

.vcard11-send-btn {
  background-image: linear-gradient(123.62deg, #f59c37 0%, #fd5479 100%);
  width: 40px !important;
  height: 40px !important;
  border-radius: 40px;
  color: white !important;
  margin-left: 300px !important;
}

.vcard11-input {
  background-color: white;
  border: none;
  border-bottom: 1px solid #CCC;
  color: #555;
  box-sizing: border-box;
  font-family: "Arvo";
  font-size: 18px;
  height: 50px;
  padding: 20px;
  position: relative;
  left: 70px !important;
  top: 0px !important;
  width: 160px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  border-radius: 25px;
}
@media (min-width: 1199px) {
  .vcard11-input {
    left: 88px !important;
  }
}
.vcard11-input:focus {
  outline: none;
}

.vcard11-container {
  position: absolute;
  top: 50% !important;
  right: 200px !important;
  z-index: 999999;
}
@media (max-width: 1199px) {
  .vcard11-container {
    position: fixed;
    right: 180px !important;
  }
}
.vcard11-container .input {
  top: 0 !important;
}
.vcard11-container .share-wp-btn-div {
  top: 0 !important;
}
.vcard11-container .underline {
  top: 42.5px;
}

.vcard-bars-btn {
  z-index: 9 !important;
  width: 576px;
  display: flex;
  justify-content: flex-end;
}
.vcard-bars-btn .bars-btn {
  width: 60px;
  height: 60px;
  min-width: 60px;
  font-size: 12px;
  position: absolute;
  margin-right: 0.5rem !important;
  box-shadow: -3px 2px 15px #9e9e9ecc;
}

.sub-btn {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 20px;
  position: relative;
  left: 0;
  top: -66px;
}

.nav-tabs .dropdown-menu {
  min-width: 200px !important;
}

.link-text {
  font-size: 16px !important;
  font-weight: 500;
}
@media (max-width: 480px) {
  .link-text {
    font-size: 14px !important;
  }
}

.modal-backdrop.show {
  z-index: -1 !important;
}

.icon-search-container {
  background-color: white;
  display: inline-block;
  border-radius: 50px;
  height: 50px;
  width: 50px;
  overflow: hidden;
  position: relative;
  transition: width 0.2s ease-out;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.icon-search-container.active {
  width: 285px;
  outline: 1px solid green;
}
@media (max-width: 425px) {
  .icon-search-container.active {
    width: 260px;
  }
}
@media (max-width: 374px) {
  .icon-search-container.active {
    width: 220px;
  }
}
@media (max-width: 336px) {
  .icon-search-container.active {
    width: 200px;
  }
}
.icon-search-container.active .wp-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  font-size: 14px;
  position: relative;
  top: 5px;
  left: 5px;
}
.icon-search-container.active .fa-times-circle {
  opacity: 1;
}
.icon-search-container.active .search-input {
  width: 200px;
}
.icon-search-container .fa-search {
  color: #2980b9;
  font-size: 30px;
  position: absolute;
  top: 7px;
  left: 8px;
  cursor: pointer;
}
.icon-search-container .fa-times-circle {
  opacity: 0;
  color: #d9d9d9;
  font-size: 20px;
  position: absolute;
  top: 12px;
  right: 8px;
  transition: opacity 0.2s ease-out;
  cursor: pointer;
}
.icon-search-container .search-input {
  position: absolute;
  cursor: default;
  left: 50px;
  top: 9px;
  width: 0;
  border: none;
  outline: none;
  font-size: 18px;
  line-height: 20px;
  background-color: rgba(255, 255, 255, 0);
  transition: width 0.2s ease-out;
}

.wp-btn {
  position: relative;
  z-index: 9;
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 50%;
  background-color: #18b718;
  display: flex;
  justify-content: center;
  align-items: center;
}

#videobtn {
  background-color: #18b718;
  border: none;
}

.sub-btn-div {
  position: absolute;
  top: -55px;
  width: 100%;
  right: 75px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.stickyIcon {
  margin-top: 30px;
}

.vcard11-icon-container {
  z-index: 9;
  position: absolute;
  right: 15px;
  top: 50%;
}

.vcard11-wp-btn {
  background-image: linear-gradient(123.62deg, #f59c37 0%, #fd5479 100%);
}

.card11-add-btn {
  width: 185px !important;
}

.audio-image {
  max-width: 100%;
  border-radius: 10px;
}

audio {
  width: 100%;
}

.object-fit-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Template 20 products page - product image sizing
   ---------------------------------------------------------------------------
   Scoped to <ion-card>, which appears in exactly one template in this project
   (vcard20), so this selector cannot reach any other page. It lives in this
   shared file because the vcard20 products page loads vcard1.css, vcard19.css
   and this one -- but never vcard20.css.

   The markup is `class="w-80" style="max-height: 208px"`. `w-80` is defined
   nowhere in the project, so width stayed auto, every tile took its image's own
   aspect ratio, and heights came out uneven. Constraining both axes is also
   what lets object-fit actually crop.
   --------------------------------------------------------------------------- */
ion-card .product-profile img {
    height: 208px;
    max-width: 100%;
    /* img is the flex item (.product-profile is d-flex); flex items default to
       min-width:auto and refuse to shrink below their natural width. */
    min-width: 0;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
}


/* ---------------------------------------------------------------------------
   Gallery: hide the carousel navigation dots.

   Slick draws one dot per slide and never wraps or paginates them, so a gallery
   with many images produced a dot row that outgrew its container. Rather than
   lay that row out, the dots are switched off entirely; swipe and autoplay
   still move the gallery.

   This file is loaded by all 67 vcard templates, and after each vcardN.css, so
   this single rule covers every template. `!important` is required because the
   per-template rules are more specific (e.g. `.gallery-section .gallery-slider
   .slick-dots`), and some of them are themselves `!important`; the two-class
   selector here still wins on specificity in that case.

   Scoped to .gallery-slider on purpose -- product, services and review sliders
   keep their dots. To bring the gallery dots back, delete this rule.
   --------------------------------------------------------------------------- */
.gallery-slider .slick-dots {
    display: none !important;
}