:root {
  --pz-bg: #f6f8fb;
  --pz-ink: #101827;
  --pz-muted: #617083;
  --pz-line: #dbe4ef;
  --pz-blue: #165dff;
  --pz-teal: #02b8a6;
  --pz-green: #19a974;
  --pz-yellow: #ffd166;
  --pz-pink: #ff4d8d;
  --pz-orange: #ff8a3d;
  --pz-purple: #7c3aed;
  --pz-panel: #ffffff;
  --pz-shadow: 0 24px 70px rgba(22, 37, 62, 0.12);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 4% 8%, rgba(255, 77, 141, 0.16), transparent 26rem),
    radial-gradient(circle at 24% 2%, rgba(255, 209, 102, 0.2), transparent 22rem),
    radial-gradient(circle at 86% 8%, rgba(22, 93, 255, 0.18), transparent 30rem),
    radial-gradient(circle at 90% 54%, rgba(2, 184, 166, 0.16), transparent 30rem),
    var(--pz-bg) !important;
  color: var(--pz-ink);
  font-family: Inter, "DM Sans", "Segoe UI", Arial, sans-serif;
}

body,
p,
li {
  letter-spacing: 0;
}

.mouseCursor,
.banner-shape-wrap {
  display: none !important;
}

.wow,
.fadeInUp,
.fadeInLeft,
.fadeInRight {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

.container,
.custom-container {
  max-width: 1180px;
}

.menu-area {
  position: sticky;
  top: 0;
  z-index: 99;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(242, 251, 255, 0.9)) !important;
  border-bottom: 1px solid rgba(219, 228, 239, 0.88);
  box-shadow: 0 16px 45px rgba(16, 24, 39, 0.06);
  backdrop-filter: blur(18px);
}

.menu-area:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #4285f4, #34a853, #fbbc05, #ea4335, #7c3aed);
}

.menu-nav {
  min-height: 78px;
}

.logo img,
.nav-logo img,
.footer-widget .logo img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

.menu-nav .logo a {
  display: inline-flex;
  align-items: center;
  min-width: 156px;
}

.menu-nav .logo a img {
  display: none !important;
}

.menu-nav .logo a:after {
  content: "Payment Zone";
  background: linear-gradient(90deg, #165dff, #02b8a6, #ff8a3d);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: 0;
}

.navigation > li > a {
  color: #233247 !important;
  font-size: 14px;
  font-weight: 700;
  padding: 30px 14px;
}

.navigation > li > a:hover,
.navigation > li > a.active {
  color: var(--pz-blue) !important;
}

.sub-menu {
  border: 1px solid var(--pz-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--pz-shadow) !important;
  padding: 10px !important;
}

.sub-menu li a {
  border-radius: 6px;
  color: #243047 !important;
  font-weight: 600;
}

.sub-menu li a:hover {
  background: #eef6ff;
  color: var(--pz-blue) !important;
}

.btn,
button.btn,
.header-btn .btn {
  min-height: 46px;
  border: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, var(--pz-blue), var(--pz-teal), var(--pz-green)) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(22, 93, 255, 0.22);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  padding: 16px 24px !important;
}

.btn:hover,
button.btn:hover,
.header-btn .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(22, 93, 255, 0.28);
}

.banner-area {
  padding: 146px 0 86px;
  background:
    radial-gradient(circle at 28% 28%, rgba(255, 77, 141, 0.18), transparent 23rem),
    radial-gradient(circle at 74% 24%, rgba(255, 209, 102, 0.2), transparent 22rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(234, 248, 245, 0.9)),
    linear-gradient(180deg, #ffffff, #f6f8fb) !important;
  position: relative;
  overflow: hidden;
}

.banner-area:before {
  content: "";
  position: absolute;
  inset: auto -6% -34% 42%;
  height: 520px;
  background: linear-gradient(135deg, rgba(22, 93, 255, 0.18), rgba(2, 184, 166, 0.22), rgba(255, 209, 102, 0.16));
  border-radius: 999px 0 0 999px;
  transform: rotate(-8deg);
}

.banner-img {
  position: relative;
  padding: 28px;
  background: #fff;
  border: 1px solid rgba(219, 228, 239, 0.9);
  border-radius: 8px;
  box-shadow: var(--pz-shadow);
}

.banner-img:before,
.services-item:before,
.service-card:before,
.work-step:before,
.benefit-card:before,
.pricing-card:before,
.consultation-form-wrap:before,
.about-inner:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, #4285f4, #34a853, #fbbc05, #ea4335, #7c3aed);
}

.banner-img:after {
  content: "Live UPI rail";
  position: absolute;
  right: 26px;
  bottom: 24px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.banner-img img,
.about-img img {
  width: 100%;
  max-height: 430px;
  object-fit: contain;
}

.banner-content .sub-title,
.section-title .sub-title {
  display: inline-flex;
  align-items: center;
  color: var(--pz-green) !important;
  background: #eafaf3;
  border: 1px solid #c8f0df;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 900;
  text-transform: none;
}

.banner-content .sub-title {
  font-size: 0 !important;
}

.banner-content .sub-title:before {
  content: "Instant Approval in 2 minutes.";
  font-size: 13px;
}

.banner-content .title,
.section-title .title,
.service-hero h1 {
  color: var(--pz-ink) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.banner-content .title {
  max-width: 620px;
  margin: 18px 0 26px;
  font-size: clamp(40px, 5vw, 70px) !important;
  line-height: 1.02 !important;
}

.banner-content .title span,
.section-title .title span {
  background: linear-gradient(115deg, var(--pz-blue), var(--pz-teal)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  display: inline !important;
  width: auto !important;
  margin-left: 0.14em;
}

.services-area,
.about-area,
.consultation-area,
.pt-100,
.works-section,
.benefits-section,
.pricing-area,
.faq-area {
  background: transparent !important;
}

.services-item,
.service-card,
.work-step,
.benefit-card,
.pricing-card,
.consultation-form-wrap,
.about-inner {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(219, 228, 239, 0.95) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 48px rgba(16, 24, 39, 0.08) !important;
  position: relative;
  overflow: hidden;
}

.services-item,
.service-card {
  height: 100%;
  padding: 30px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.services-item:hover,
.service-card:hover,
.work-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(16, 24, 39, 0.13) !important;
}

.services-icon,
.service-icon,
.consultation-list .icon,
.about-content .icon {
  background: linear-gradient(135deg, #e8f7ff, #ecfdf5, #fff7ed) !important;
  border: 1px solid #d9edf7;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.services-icon img,
.service-icon img,
.about-content .icon img {
  max-width: 46px;
  max-height: 46px;
  object-fit: contain;
}

.services-content .title,
.service-card h3,
.work-step h4 {
  color: #132033 !important;
  font-size: 21px !important;
  font-weight: 900 !important;
}

.services-content p,
.about-content p,
.section-title p,
.service-card p,
.work-step p,
.consultation-content p {
  color: var(--pz-muted) !important;
  font-size: 16px;
  line-height: 1.72;
}

.about-inner {
  padding: 54px;
}

.about-content .list-wrap li,
.consultation-list li {
  border: 1px solid var(--pz-line);
  border-radius: 8px;
  padding: 18px;
  background: #fff;
}

.consultation-area {
  padding-top: 90px !important;
  padding-bottom: 100px !important;
}

.consultation-form-wrap {
  padding: 34px !important;
}

.consultation-form-wrap .title {
  color: #132033 !important;
  font-weight: 900;
}

.form-grp input,
.form-grp select,
input,
select,
textarea {
  border: 1px solid var(--pz-line) !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #172033 !important;
  min-height: 50px;
  padding: 13px 16px !important;
  box-shadow: none !important;
}

.form-grp,
.consultation-form-wrap form > div {
  position: relative;
}

.form-grp input:focus,
.form-grp select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--pz-blue) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(22, 93, 255, 0.12) !important;
}

.service-card:after {
  background: linear-gradient(90deg, var(--pz-blue), var(--pz-teal)) !important;
}

.service-features li {
  color: #536274 !important;
}

.service-features li:before {
  background: var(--pz-teal) !important;
}

.works-section {
  padding: 90px 0;
}

.work-step {
  padding: 28px;
  margin-bottom: 24px;
}

.step-number {
  width: 44px;
  height: 44px;
  background: #0f172a !important;
  color: #fff !important;
  border-radius: 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.footer-area {
  background:
    radial-gradient(circle at 8% 0, rgba(22, 93, 255, 0.28), transparent 24rem),
    radial-gradient(circle at 90% 10%, rgba(2, 184, 166, 0.22), transparent 22rem),
    #0f172a !important;
  color: #cbd5e1;
}

.pt-100,
.services-area {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(239, 246, 255, 0.72)) !important;
}

.about-area,
.works-section {
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 209, 102, 0.16), transparent 22rem),
    radial-gradient(circle at 88% 44%, rgba(124, 58, 237, 0.12), transparent 24rem) !important;
}

.consultation-area,
.benefits-section,
.pricing-area,
.faq-area {
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.76), rgba(239, 246, 255, 0.86)) !important;
}

.accordion-item,
.faq-item,
.testimonial-item,
.brand-item,
.project-item,
.blog-post-item {
  border: 1px solid rgba(219, 228, 239, 0.95) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 14px 40px rgba(16, 24, 39, 0.08) !important;
}

.footer-top {
  padding: 76px 0 46px;
}

.footer-widget,
.footer-bottom {
  color: #cbd5e1 !important;
}

.footer-widget .fw-title,
.footer-contact .title a {
  color: #fff !important;
}

.fw-link a,
.footer-about a,
.footer-about span,
.copyright-text p {
  color: #cbd5e1 !important;
}

.fw-link a:hover,
.footer-about a:hover {
  color: #7dd3fc !important;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.scroll-top {
  background: var(--pz-blue) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 36px rgba(22, 93, 255, 0.28);
}

@media (max-width: 991px) {
  .menu-nav {
    min-height: 68px;
  }

  .banner-area {
    padding: 112px 0 64px;
  }

  .banner-content .title {
    font-size: 42px !important;
  }

  .mobile-menu .menu-box {
    background: #ffffff !important;
  }
}

@media (max-width: 575px) {
  .mobile-nav-toggler {
    display: block !important;
    color: #0f172a !important;
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 4;
  }

  .banner-area {
    padding: 56px 0 44px;
  }

  .banner-area .row {
    flex-direction: column-reverse;
  }

  .banner-img {
    margin-top: 26px;
    padding: 14px;
  }

  .banner-img img {
    max-height: 260px;
  }

  .banner-content {
    text-align: left;
  }

  .banner-content .title {
    font-size: 36px !important;
    line-height: 1.08 !important;
    margin-bottom: 18px;
  }

  .about-inner {
    padding: 26px;
  }

  .services-item,
  .service-card,
  .consultation-form-wrap {
    padding: 24px !important;
  }
}