/* ==========================================================
   Navkirti brand layer — loaded after main.css.
   Colours: Navkirti blue + saffron spark (from the logo).
   ========================================================== */
:root {
  --accent-color: #2147e0;
  --heading-color: #16244a;
  --nav-hover-color: #2147e0;
  --nav-dropdown-hover-color: #2147e0;
  --nk-saffron: #f5a40b;
  --nk-soft: #eef2ff;
}

.light-background { --background-color: #f4f6fd; }
.dark-background  { --background-color: #2147e0; --surface-color: #3a5cf0; }

/* ---------- header logo: mark + name + tagline ---------- */
.header .logo img { max-height: 36px; margin-right: 10px; }
.header .logo .brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.header .logo .sitename { font-size: 26px; letter-spacing: .2px; }
.header .logo .brand-tag {
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-top: 3px;
}
@media (max-width: 575px) {
  .header .logo .sitename { font-size: 22px; }
  .header .logo .brand-tag { font-size: 9.5px; letter-spacing: 1px; }
  .header .btn-getstarted { padding: 7px 14px; font-size: 13px; }
}

/* ---------- hero ---------- */
.hero .company-badge i { color: var(--nk-saffron); }
.hero .hero-content h1 { line-height: 1.15; }
/* Hero heading: always 2 lines (one sentence per line) */
.hero .hero-content h1 .hl-line { display: block; white-space: nowrap; }
.hero .hero-content h1 { font-size: clamp(1.25rem, 5.8vw, 2.6rem); }
@media (min-width: 992px) { .hero .hero-content h1 { font-size: clamp(1.75rem, 2.65vw, 2.3rem); } }
.hero .customers-badge { max-width: 330px; }
.hero .customers-badge .trust-points { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.hero .customers-badge .trust-points span {
  font-size: 13px;
  font-weight: 600;
  color: var(--heading-color);
  white-space: nowrap;
}
.hero .customers-badge .trust-points i { color: var(--accent-color); margin-right: 4px; }
.hero .stat-item h4 { font-size: 17px; }

/* ---------- about ---------- */
.about .contact-info .contact-number a { color: inherit; }
.about .contact-info .contact-email { font-size: 16px; word-break: break-all; }
.about .experience-badge h3 { font-size: 26px; }
.features-2 .phone-mockup img { max-height: 560px; }

/* ---------- products tabs ---------- */
.features .read-more-link { font-weight: 600; margin-top: 8px; display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 575px) {
  .features .nav-tabs { flex-wrap: nowrap; }
  .features .nav-link { padding: 10px 12px; }
  .features .nav-link h4 { font-size: 14px; }
}

/* ---------- modules cards: same height ---------- */
.features-cards .feature-box { height: 100%; }

/* ---------- pricing extras ---------- */
.pricing .pricing-card .price .period { font-size: 14px; }
.pricing .price-strip {
  height: 100%;
  background: var(--surface-color);
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 6px 24px rgba(22, 36, 74, .06);
}
.pricing .price-strip h4 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.pricing .price-strip h4 i { color: var(--accent-color); margin-right: 6px; }
.pricing .price-strip ul { list-style: none; padding: 0; margin: 0; }
.pricing .price-strip li { padding: 6px 0; border-bottom: 1px dashed #e1e6f5; }
.pricing .price-strip li:last-child { border-bottom: 0; }
.pricing .price-strip a { font-weight: 600; }
.pricing .price-note { font-size: 14px; color: color-mix(in srgb, var(--default-color), transparent 35%); }

/* ---------- contact form ---------- */
.contact .contact-form .form-select { padding: 12px 15px; border-radius: 8px; }
.contact .info-item a { color: inherit; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.footer .footer-about .logo img { max-height: 32px; margin-right: 8px; }
.footer .footer-tag { font-size: 14px; color: color-mix(in srgb, var(--default-color), transparent 30%); }
.footer .footer-contact a { color: inherit; }

/* ---------- WhatsApp button ---------- */
.wa-float {
  position: fixed;
  left: 15px;
  bottom: 15px;
  z-index: 99998;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.wa-float:hover { color: #fff; background: #1ebe5a; }

/* ---------- legal pages ---------- */
.legal-page .legal { padding-top: 130px; }
.legal h1 { font-size: 34px; font-weight: 800; margin-bottom: 6px; }
.legal .updated { color: color-mix(in srgb, var(--default-color), transparent 40%); margin-bottom: 28px; }
.legal h2 { font-size: 21px; font-weight: 700; margin-top: 30px; }
.legal p, .legal li { line-height: 1.75; }

/* About: single photo (no small overlay image) */
.about .image-wrapper .main-image { margin-left: 0; width: 100%; }
@media (min-width: 993px) {
  .about .image-wrapper .experience-badge { right: auto; left: -24px; bottom: -28px; padding: 16px 22px; }
}
.about .image-wrapper .experience-badge h3 { font-size: 22px; margin-bottom: 2px; }
.about .image-wrapper .experience-badge p { font-size: 13px; margin: 0; }

/* reCAPTCHA checkbox */
.contact .recaptcha-wrap { display: flex; justify-content: center; margin-bottom: 16px; min-height: 78px; }
@media (max-width: 400px) { .contact .recaptcha-wrap .g-recaptcha { transform: scale(.88); transform-origin: center top; } .contact .recaptcha-wrap { min-height: 70px; } }

/* Pricing */
.pricing .pricing-card { display: flex; flex-direction: column; }
.pricing .pricing-card > .btn { margin-top: auto; width: 100%; }