/* Magnific defaults: hide duplicate close, lock page */
.mfp-demo-popup .mfp-close {
   display: none !important;
}

.mfp-demo-popup.mfp-bg {
   background: rgba(22, 21, 25, 0.75);
   opacity: 1 !important;
   z-index: 100000 !important;
}

.mfp-demo-popup.mfp-wrap {
   overflow-y: auto !important;
   -webkit-overflow-scrolling: touch;
   z-index: 100001 !important;
}

.mfp-demo-popup .mfp-container {
   padding: 24px 12px;
}

.mfp-demo-popup .mfp-content {
   max-width: 900px;
   margin: 0 auto;
   vertical-align: middle;
}

body.demo-modal-open,
html.demo-modal-open {
   overflow: hidden !important;
   overscroll-behavior: none;
}

#header-sticky.header-sticky {
   animation: none !important;
   margin-top: 0 !important;
}

.pricing-intro-image {
   display: block;
   width: 100%;
   max-width: 220px;
   height: auto;
   margin-bottom: -15px;
}

/* Mobile pricing carousel */
.tp-pricing-mobile {
   margin-top: 8px;
   padding-bottom: 2px;
   overflow: hidden;
}

@media (min-width: 992px) {
   .tp-pricing-mobile {
      display: none;
   }
}

.tp-pricing-mobile-card {
   background: #fff;
   border: 1px solid #eff1f7;
   border-radius: 24px;
   overflow: hidden;
   height: 100%;
}

.tp-pricing-mobile-card.is-featured {
   background: #f6f7fa;
   border-color: transparent;
}

.tp-pricing-mobile-head {
   text-align: center;
   padding: 24px 18px 22px;
}

.tp-pricing-mobile-name {
   display: block;
   margin-bottom: 9px;
   font-weight: 500;
   font-size: 18px;
   line-height: 1.35;
   letter-spacing: 0.1em;
   color: #000;
}

.tp-pricing-mobile-price {
   margin: 0 0 9px;
   padding: 0;
   font-weight: 600;
   font-size: 40px;
   line-height: 1.15;
   color: #000;
}

.tp-pricing-mobile-desc {
   margin: 0 0 16px;
   font-size: 14px;
   line-height: 1.55;
   color: inherit;
}

.tp-pricing-mobile-cta {
   display: inline-block;
   position: relative;
   z-index: 1;
   height: 40px;
   line-height: 40px;
   padding: 0 28px;
   border-radius: 20px;
   font-weight: 600;
   font-size: 15px;
   color: #fff;
   background: #000;
   transition: 0.3s;
}

.tp-pricing-mobile-cta:hover {
   background: var(--color-green);
   color: #000;
}

.tp-pricing-mobile-cta.is-featured-cta {
   color: #000;
   background: var(--color-green);
}

.tp-pricing-mobile-features {
   background: #fff;
   list-style: none;
   margin: 0;
   padding: 2px 0 4px;
}

.tp-pricing-mobile-features li {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   min-height: 0;
   padding: 10px 18px;
   border-top: 1px solid #eff1f7;
}

.tp-pricing-mobile-icon {
   flex: 0 0 auto;
   margin-top: 2px;
   line-height: 0;
}

.tp-pricing-mobile-icon > span {
   flex-shrink: 0;
}

.tp-pricing-mobile-feature-label {
   flex: 1 1 auto;
   font-weight: 600;
   font-size: 15px;
   line-height: 1.4;
   color: #000;
}

.tp-pricing-mobile-card.is-featured .tp-pricing-mobile-features {
   background: #f7f9fc;
}

.tp-pricing-mobile-pagination {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
   margin-top: 18px;
}

.tp-pricing-mobile-pagination .swiper-pagination-bullet {
   width: 8px;
   height: 8px;
   margin: 0 !important;
   background: #d1d1d4;
   opacity: 1;
   border-radius: 50%;
   transition: width 0.25s ease, background-color 0.25s ease, border-radius 0.25s ease;
}

.tp-pricing-mobile-pagination .swiper-pagination-bullet-active {
   width: 22px;
   border-radius: 999px;
   background: #111;
}

html.demo-modal-open.lenis,
html.demo-modal-open.lenis-smooth {
   height: auto !important;
}

#demo-modal.mfp-hide {
   display: none !important;
}

.demo-modal {
   position: relative;
   background: #fff;
   border-radius: 20px;
   padding: 0;
   box-shadow: 0 24px 80px rgba(22, 21, 25, 0.2);
   overflow-x: hidden;
}

.demo-modal__layout {
   display: flex;
   flex-wrap: wrap;
   min-height: 500px;
}

.demo-modal__info {
   flex: 0 0 40%;
   background: #FA5AFF;
   background-image: linear-gradient(135deg, #161519 0%, #2b2a30 100%);
   padding: 40px;
   display: flex;
   flex-direction: column;
   position: relative;
   overflow: hidden;
}

.demo-modal__info::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: radial-gradient(circle, rgba(250, 90, 255, 0.1) 0%, rgba(250, 90, 255, 0) 70%);
   z-index: 0;
}

.demo-modal__info>* {
   position: relative;
   z-index: 1;
}

.demo-modal__form-area {
   flex: 0 0 60%;
   padding: 40px;
   background: #fff;
}

@media (max-width: 768px) {
   .demo-modal {
      border-radius: 16px;
      max-height: 85vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch !important;
   }

   .demo-modal__layout {
      flex-direction: column;
   }

   .demo-modal__info {
      display: none;
      /* Hide on mobile to prevent form from being pushed out of view */
   }

   .demo-modal__form-area {
      flex: none;
      padding: 32px 24px;
   }

   .demo-modal__close {
      background: #f5f5f5 !important;
      color: #161616 !important;
   }

   .demo-modal__close:hover {
      background: #eee !important;
   }
}

.demo-modal__info-title {
   font-size: 26px;
   font-weight: 600;
   color: #fff;
   margin: 24px 0 12px;
   line-height: 1.3;
}

.demo-modal__info-desc {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.8);
   line-height: 1.6;
   margin-bottom: 40px;
}

/* Offcanvas Menu Polish & Scroll Lock
   Avoid touch-action:none — it blocks panel scrolling on phones.
   position:fixed + top offset keeps page scroll position while open. */
html.offcanvas-open,
body.offcanvas-open {
   overflow: hidden !important;
   overscroll-behavior: none;
}

body.offcanvas-open {
   position: fixed !important;
   width: 100% !important;
   left: 0 !important;
   right: 0 !important;
}

/* Hero Card & Floating Badges Clean Styling */
.hero-card-container {
   position: relative;
   margin-top: 50px;
}

.hero-card-img {
   height: 400px !important;
   width: auto !important;
   max-height: none !important;
   object-fit: contain;
   display: inline-block;
   margin: 0 auto !important;
}

@media (max-width: 1024px) {
   .hero-card-container {
      margin-top: 35px !important;
   }

   .hero-card-img {
      height: 300px !important;
   }
}

@media (max-width: 640px) {
   .hero-card-container {
      margin-top: 25px !important;
   }

   .hero-card-img {
      height: 220px !important;
   }
}

.body-overlay {
   z-index: 9998 !important;
}

.tpoffcanvas {
   z-index: 9999 !important;
   height: 100dvh !important;
   max-height: 100dvh !important;
   overflow-y: auto !important;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
   text-align: left !important;
}

.tpoffcanvas > div {
   width: 100%;
   text-align: left !important;
}

.tpoffcanvas .tp-offcanvas-menu,
.tpoffcanvas .tp-offcanvas-info,
.tpoffcanvas .mb-6.p-5,
.tpoffcanvas .tp-offcanvas-info h4,
.tpoffcanvas .tp-offcanvas-info a,
.tpoffcanvas .tp-offcanvas-info div,
.tpoffcanvas .mb-6.p-5 h3,
.tpoffcanvas .mb-6.p-5 p {
   text-align: left !important;
   align-items: flex-start !important;
}

.tpoffcanvas .tp-offcanvas-menu,
.tpoffcanvas .tp-offcanvas-info,
.tpoffcanvas .mb-6.p-5 {
   width: 100%;
}

.tp-offcanvas-menu nav ul {
   display: flex;
   flex-direction: column;
   align-items: flex-start !important;
   gap: 6px;
   padding: 0 !important;
   margin: 0 !important;
   list-style: none !important;
   width: 100%;
}

.tp-offcanvas-menu nav ul li {
   width: 100%;
   text-align: left !important;
   padding-left: 0 !important;
   margin-left: 0 !important;
}

.tp-offcanvas-menu nav ul li a {
   text-align: left !important;
   display: block !important;
   width: 100%;
   padding-left: 0 !important;
   margin-left: 0 !important;
}

.tpoffcanvas > .pt-4.mt-auto,
.tpoffcanvas > .pt-4.mt-auto a {
   width: 100% !important;
   align-self: stretch !important;
}

.demo-modal__contact-list {
   margin-top: auto;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.demo-modal__contact-item {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 15px;
   color: #fff;
   font-weight: 500;
}

.demo-modal__contact-item svg {
   color: #FA5AFF;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 20px;
}

.demo-modal__contact-item a {
   transition: color 0.2s ease;
   color: #fff;
}

.demo-modal__contact-item a:hover {
   color: #FA5AFF;
}

.demo-modal__success {
   padding: 40px;
}

.demo-modal__close {
   position: absolute;
   top: 14px;
   right: 14px;
   z-index: 5;
   width: 40px;
   height: 40px;
   border: 0;
   border-radius: 50%;
   background: #161616;
   color: #fff;
   font-size: 24px;
   line-height: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background-color .25s ease, color .25s ease;
}

.demo-modal__close:hover {
   background: #FA5AFF;
   color: #fff;
}

.demo-modal__head {
   margin-bottom: 22px;
   padding-right: 36px;
}

.demo-modal__brand {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 14px;
}

.demo-modal__logo {
   display: block;
   height: 26px;
   width: auto;
   margin: 0;
}

.demo-modal__badge {
   display: inline-flex;
   align-items: center;
   padding: 4px 10px;
   border-radius: 999px;
   background: #FA5AFF;
   color: #fff;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: -0.01em;
   line-height: 1;
   white-space: nowrap;
}

.demo-modal__title {
   margin: 0 0 6px;
   font-size: 26px;
   line-height: 1.2;
   letter-spacing: -0.03em;
   font-weight: 600;
   color: #161616;
}

@media (max-width: 640px) {
   .demo-modal__title {
      font-size: 22px;
   }
}

.demo-modal__desc {
   margin: 0;
   font-size: 14px;
   line-height: 1.5;
   color: #666;
   max-width: 460px;
}

.demo-modal__error {
   margin-bottom: 16px;
   padding: 12px 14px;
   border-radius: 10px;
   background: #fff1f1;
   color: #c0392b;
   font-size: 14px;
   font-weight: 500;
}

.demo-modal__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-bottom: 16px;
}

@media (max-width: 640px) {
   .demo-modal__grid {
      grid-template-columns: 1fr;
   }
}

.demo-field {
   margin-bottom: 16px;
}

.demo-modal__grid .demo-field {
   margin-bottom: 0;
}

.demo-field label {
   display: block;
   margin-bottom: 8px;
   font-size: 13px;
   font-weight: 600;
   color: #333;
}

.demo-field label em {
   font-style: normal;
   font-weight: 400;
   color: #999;
}

.demo-field input,
.demo-field textarea {
   display: block;
   width: 100%;
   box-sizing: border-box;
   border: 1px solid rgba(22, 21, 25, 0.12);
   background: #fafafa;
   border-radius: 12px;
   padding: 0 16px;
   height: 50px;
   font-size: 15px;
   color: #161616;
   outline: none;
   transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.demo-field textarea {
   height: auto;
   min-height: 110px;
   padding: 14px 16px;
   resize: vertical;
   line-height: 1.5;
}

.demo-field input::placeholder,
.demo-field textarea::placeholder {
   color: #9a9a9a;
   font-size: 14px;
}

.demo-field input:focus,
.demo-field textarea:focus {
   background: #fff;
   border-color: #FA5AFF;
   box-shadow: 0 0 0 4px rgba(250, 90, 255, 0.15);
}

.demo-modal__submit.tp-btn {
   display: block;
   width: 100%;
   height: 52px;
   margin-top: 8px;
   padding: 0;
   border: 0;
   border-radius: 12px;
   background-color: #161616;
   line-height: 52px;
   color: #fff;
}

.demo-modal__submit.tp-btn:hover span,
.demo-modal__submit.tp-btn:hover .group-hover\:text-black {
   color: #161616;
}

.demo-modal__submit.tp-btn:hover b {
   width: 1400px;
   height: 1400px;
}

.demo-modal__submit.tp-btn:disabled {
   opacity: 0.65;
   cursor: not-allowed;
}

.demo-modal__submit--sm {
   max-width: 200px;
   margin-left: auto;
   margin-right: auto;
}

.demo-modal__success {
   text-align: center;
   padding: 28px 8px 8px;
}

.demo-modal__success-icon {
   width: 72px;
   height: 72px;
   margin: 0 auto 20px;
   border-radius: 50%;
   background: #FA5AFF;
   display: flex;
   align-items: center;
   justify-content: center;
}

.demo-modal__success h4 {
   margin: 0 0 10px;
   font-size: 26px;
   letter-spacing: -0.03em;
   color: #161616;
}

.demo-modal__success p {
   margin: 0 auto 28px;
   max-width: 420px;
   font-size: 15px;
   line-height: 1.65;
   color: #555;
}