@charset "utf-8";
/* =====================================================================
   Classified Script — Modern UI Overlay
   Generic design layer, loaded LAST. Restyles existing markup only.
   Brand colours are driven by the variables below.
   ===================================================================== */

:root {
  --mu-accent: #55bf39;
  --mu-accent-dark: #43ac27;
  --mu-second: #ffa726;
  --mu-head: #14263d;
  --mu-body: #4a5a6b;
  --mu-muted: #74879f;
  --mu-line: #e6edf5;
  --mu-soft: #f5f8fc;
  --mu-radius: 16px;
  --mu-radius-lg: 22px;
  --mu-shadow-sm: 0 6px 18px -8px rgba(20, 38, 61, .18);
  --mu-shadow: 0 18px 44px -20px rgba(20, 38, 61, .3);
  --mu-grad: linear-gradient(135deg, #55bf39 0%, #43ac27 60%, #ffa726 130%);
  --mu-grad-solid: linear-gradient(135deg, #55bf39 0%, #43ac27 100%);
  --mu-font: "Poppins", "Muli", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mu-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------- 1. Base ---------------- */
body {
  font-family: var(--mu-font) !important;
  color: var(--mu-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .title, .card-title {
  font-family: var(--mu-font) !important;
  color: var(--mu-head);
  letter-spacing: -.02em;
  line-height: 1.22;
}
h2, .title { font-weight: 700; }
p { line-height: 1.7; }
img { max-width: 100%; }

.sec { padding: clamp(3rem, 6vw, 5.25rem) 0; }

h1.center, h2.center, .section-headline .title, h2.title {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
}
.sec > .container > h1.center::after,
.sec > .container > h2.center::after,
.sec > .container > h2.title::after,
.section-headline.center .title::after {
  content: "";
  display: block;
  width: 64px; height: 4px;
  margin: 16px auto 0;
  border-radius: 4px;
  background: var(--mu-grad);
}
.sec > .container > p.center {
  max-width: 780px; margin-left: auto; margin-right: auto;
  color: var(--mu-muted);
}

/* ---------------- 2. Buttons ---------------- */
.btn:not(.btn-floating):not(.btn-flat), .btn-site, .btn-web {
  border-radius: 999px !important;
  font-family: var(--mu-font);
  font-weight: 600 !important;
  letter-spacing: .3px;
  text-transform: none;
  padding: 0 26px;
  height: auto;
  line-height: 2.85;
  transition: transform .25s var(--mu-ease), box-shadow .25s var(--mu-ease);
}
/* legacy borders + broken hover colours */
.btn-site, .btn-site:hover, .btn-site:focus,
.btn-web, .btn-web:hover, .btn-web:focus {
  border: none !important;
  color: #fff !important;
}
.btn-site {
  background: var(--mu-grad-solid) !important;
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--mu-accent) 85%, transparent);
}
.btn-site:hover, .btn-site:focus {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px var(--mu-accent);
}
.btn-web {
  background: linear-gradient(135deg, var(--mu-second) 0%, color-mix(in srgb, var(--mu-second) 70%, #000) 100%) !important;
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--mu-second) 85%, transparent);
}
.btn-web:hover, .btn-web:focus { transform: translateY(-2px); }

/* ---------------- 3. Sticky header ---------------- */
header.top-nav .navbar-fixed nav,
header.top-nav nav {
  position: fixed !important;
  top: 0; left: 0; right: 0; width: 100%;
}
header.top-nav .navbar-fixed { z-index: 997; }
header.top-nav nav,
header.top-nav .nav-wrapper {
  background: #fff !important;
  box-shadow: 0 8px 26px -16px rgba(20, 38, 61, .4);
  border-bottom: 1px solid var(--mu-line);
}
header.top-nav nav::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--mu-grad);
  z-index: 6;
}
header.top-nav ul#nav-mobile > li > a {
  color: var(--mu-head);
  font-weight: 500;
  font-size: .96rem;
  position: relative;
  transition: color .2s var(--mu-ease);
}
header.top-nav ul#nav-mobile > li > a::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 12px; height: 2px;
  border-radius: 2px;
  background: var(--mu-grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--mu-ease);
}
header.top-nav ul#nav-mobile > li > a:hover { color: var(--mu-accent); background: transparent; }
header.top-nav ul#nav-mobile > li > a:hover::after { transform: scaleX(1); }
header.top-nav ul#nav-mobile > li > a.btn-site::after { display: none; }
header.top-nav ul#nav-mobile > li > a.btn-site { color: #fff !important; margin-left: 8px; }

.dropdown-content {
  border-radius: 14px !important;
  box-shadow: var(--mu-shadow) !important;
  border: 1px solid var(--mu-line);
  padding: 6px !important;
  overflow: hidden;
}
.dropdown-content li > a { border-radius: 10px; font-weight: 500; color: var(--mu-head) !important; }
.dropdown-content li > a:hover { background: var(--mu-soft) !important; color: var(--mu-accent) !important; }
.side-nav li > a { font-weight: 500; color: var(--mu-head) !important; }
.side-nav li > a:hover { background: var(--mu-soft) !important; color: var(--mu-accent) !important; }
.side-nav li > a.btn-site { color: #fff !important; }

/* ---------------- 4. Cards ---------------- */
.card {
  border-radius: var(--mu-radius-lg);
  box-shadow: var(--mu-shadow-sm);
  border: 1px solid var(--mu-line);
  transition: transform .3s var(--mu-ease), box-shadow .3s var(--mu-ease);
}
.card:hover { box-shadow: var(--mu-shadow); }

.featuresGrid .card.feature,
.primaryFeatures .card, .primaryFeaturesall .card,
.keyFeatures .card, .business_directory_features .card,
.essentialFeatures .card, .featureForall .card,
.highlightedfeatures .card {
  height: 100%;
  border-radius: var(--mu-radius-lg);
}
.featuresGrid .card.feature:hover,
.primaryFeaturesall .card:hover,
.keyFeatures .card:hover,
.business_directory_features .card:hover,
.essentialFeatures .card:hover,
.featureForall .card:hover,
.highlightedfeatures .card:hover { transform: translateY(-5px); }

/* revenue / partner tiles */
.revenue .card { border-radius: var(--mu-radius-lg); }
.revenue .card:hover { transform: translateY(-5px); }
.partnersSlide img { transition: transform .3s var(--mu-ease); }
.partnersSlide img:hover { transform: translateY(-4px); }

/* deliverables */
.deliverablePart .row, .deliverable .row { display: flex; flex-wrap: wrap; }
.deliverablePart .deliverCard, .deliverable article { display: flex; }
.deliverablePart .deliverCard .card, .deliverable article .card {
  flex: 1; position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--mu-line);
  border-radius: 18px;
  box-shadow: 0 14px 30px -20px rgba(16,35,51,.22);
  margin-bottom: 24px;
  transition: transform .3s var(--mu-ease), box-shadow .3s var(--mu-ease), border-color .3s var(--mu-ease);
}
.deliverablePart .deliverCard .card::before, .deliverable article .card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--mu-grad);
}
.deliverablePart .deliverCard .card:hover, .deliverable article .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 46px -22px rgba(16,35,51,.32);
}
.deliverablePart .deliverCard .card h5, .deliverable article .card h5 {
  font-size: 1.1rem; font-weight: 700; color: var(--mu-head);
}

/* related scripts */
.relatedScripts .card { overflow: hidden; }
.relatedScripts .card .card-image img { transition: transform .4s var(--mu-ease); }
.relatedScripts .card:hover .card-image img { transform: scale(1.04); }
.relatedScripts .card .card-title { font-weight: 700; }

/* ---------------- 5. CTA bands ---------------- */
.ctaSeo .card, .ctaBanner .card, .ctaCustomize .card {
  background: var(--mu-grad-solid) !important;
  border-radius: var(--mu-radius-lg);
  box-shadow: var(--mu-shadow);
  overflow: hidden;
  position: relative;
}
.ctaSeo .card::before, .ctaBanner .card::before, .ctaCustomize .card::before {
  content: ""; position: absolute; width: 220px; height: 220px;
  top: -90px; right: -60px; border-radius: 50%;
  background: rgba(255,255,255,.12); pointer-events: none;
}
.ctaSeo .card h2, .ctaSeo .card p,
.ctaBanner .card h2, .ctaBanner .card p,
.ctaCustomize .card h2, .ctaCustomize .card p { color: #fff; }
.ctaSeo .card .btn-site, .ctaBanner .card .btn-site, .ctaCustomize .card .btn-site {
  background: #fff !important;
  color: var(--mu-accent-dark) !important;
  box-shadow: 0 12px 26px -12px rgba(0,0,0,.4);
}

/* ---------------- 6. FAQ + release note ---------------- */
.faqs .collapsible, .faq .collapsible, .releasenote .collapsible {
  border: none; box-shadow: none;
}
.faqs .collapsible.faq-list, .faq .collapsible.faq-list {
  margin: 0 0 14px; border-radius: var(--mu-radius); overflow: hidden;
}
.faqs .collapsible > li, .faq .collapsible > li, .releasenote .collapsible > li {
  background: #fff;
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-radius);
  margin-bottom: 12px;
  transition: box-shadow .25s var(--mu-ease), border-color .25s var(--mu-ease);
}
.faqs .collapsible.faq-list > li, .faq .collapsible.faq-list > li { margin-bottom: 0; }
.faqs .collapsible > li:hover, .faq .collapsible > li:hover, .releasenote .collapsible > li:hover {
  box-shadow: var(--mu-shadow-sm);
  border-color: color-mix(in srgb, var(--mu-accent) 45%, transparent);
}
.faqs .collapsible-header, .faq .collapsible-header, .releasenote .collapsible-header {
  border: none !important;
  padding: 18px 22px;
  display: flex; align-items: center; gap: 12px;
  background: transparent;
  font-weight: 600;
}
.faqs .collapsible-header h4, .faq .collapsible-header h4 {
  font-size: 1.02rem !important; font-weight: 600; margin: 0;
  color: var(--mu-head) !important; line-height: 1.4;
}
.faqs .collapsible-body, .faq .collapsible-body, .releasenote .collapsible-body {
  border: none !important;
  padding: 0 22px 20px;
}
.faqs .collapsible-body span, .faq .collapsible-body span { color: var(--mu-body); line-height: 1.7; }
.releasenote .collapsible-header span { font-weight: 700; color: var(--mu-head); }
.releasenote .collapsible-header .material-icons { color: var(--mu-accent); }

/* +/- toggle chip (neutralise the legacy text glyph) */
.faqs .faq-list .collapsible-header .faq-toggle-icon,
.faq .faq-list .collapsible-header .faq-toggle-icon {
  position: relative !important;
  right: auto; bottom: auto; transform: none !important;
  font-size: 0 !important;
  order: 99; margin-left: auto;
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--mu-accent) 10%, #fff);
  transition: background .25s var(--mu-ease);
}
.faqs .faq-list .collapsible-header .faq-toggle-icon::before,
.faq .faq-list .collapsible-header .faq-toggle-icon::before { content: "" !important; }
.faqs .faq-list .collapsible-header.active .faq-toggle-icon::before,
.faq .faq-list .collapsible-header.active .faq-toggle-icon::before { content: "" !important; }
.faqs .collapsible-header .faq-toggle-icon::before,
.faqs .collapsible-header .faq-toggle-icon::after,
.faq .collapsible-header .faq-toggle-icon::before,
.faq .collapsible-header .faq-toggle-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: var(--mu-accent);
}
.faqs .collapsible-header .faq-toggle-icon::before,
.faq .collapsible-header .faq-toggle-icon::before { width: 12px; height: 2px; }
.faqs .collapsible-header .faq-toggle-icon::after,
.faq .collapsible-header .faq-toggle-icon::after { width: 2px; height: 12px; transition: transform .25s var(--mu-ease); }
.faqs .collapsible-header.active .faq-toggle-icon,
.faq .collapsible-header.active .faq-toggle-icon { background: var(--mu-accent); }
.faqs .collapsible-header.active .faq-toggle-icon::before,
.faqs .collapsible-header.active .faq-toggle-icon::after,
.faq .collapsible-header.active .faq-toggle-icon::before,
.faq .collapsible-header.active .faq-toggle-icon::after { background: #fff; }
.faqs .collapsible-header.active .faq-toggle-icon::after,
.faq .collapsible-header.active .faq-toggle-icon::after { transform: translate(-50%,-50%) scaleY(0); }

/* ---------------- 7. Contact / demo form shell ---------------- */
.formCard {
  border-radius: 20px !important;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid var(--mu-line) !important;
}
.formCard .formCard-head { background: var(--mu-grad-solid); padding: 22px 26px 18px; }
.formCard .formCard-head h4 { color: #fff; font-size: 1.25rem; font-weight: 700; margin: 0 0 4px; }
.formCard .formCard-head p { color: rgba(255,255,255,.85); font-size: .9rem; margin: 0; line-height: 1.5; }
.formCard > .card-content { padding: 22px 26px 26px; }

.addressBox .addressCard {
  --ac: var(--mu-accent);
  position: relative; overflow: hidden;
  background: #fff !important;
  border: 1px solid var(--mu-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 26px -18px rgba(16,35,51,.25) !important;
  margin-bottom: 16px;
  transition: transform .3s var(--mu-ease), box-shadow .3s var(--mu-ease), border-color .3s var(--mu-ease);
}
.addressBox .addressCard:nth-of-type(2) { --ac: var(--mu-second); }
.addressBox .addressCard:nth-of-type(3) { --ac: var(--mu-accent-dark); }
.addressBox .addressCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 38px -20px rgba(16,35,51,.32) !important;
  border-color: color-mix(in srgb, var(--ac) 45%, transparent) !important;
}
.addressBox .addressCard::before { content: none !important; }
.addressBox .addressCard::after {
  top: 50% !important; transform: translateY(-50%);
  height: 46px !important; width: 5px !important;
  border-radius: 0 6px 6px 0 !important;
  background: linear-gradient(180deg, var(--ac), color-mix(in srgb, var(--ac) 45%, #fff)) !important;
}
.addressBox .addressCard:hover::after { height: 62px !important; top: 50% !important; }
.addressBox .addressCard .card-content {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 20px 20px 24px;
}
.addressBox .addressCard .addressImage {
  flex: 0 0 auto; width: 52px; height: 52px; object-fit: contain;
  padding: 11px; border-radius: 14px;
  background: color-mix(in srgb, var(--ac) 10%, #fff);
}
.addressBox .addressCard h4 { font-size: 1.05rem; font-weight: 700; color: var(--mu-head); margin: 0 0 6px; }
.addressBox .addressCard p, .addressBox .addressCard a {
  font-size: .93rem; line-height: 1.6; color: var(--mu-muted); margin: 0;
}
.addressBox .addressCard a:hover { color: var(--ac); }

/* demo page */
.demo .formCard, #demos .formCard { border-radius: 20px !important; }
.demoimg img { border-radius: 20px; box-shadow: 0 30px 60px -28px rgba(20,38,61,.45); }
.credential .alert { border-radius: 12px; padding: 14px 18px; margin: 0 auto 1rem; max-width: 720px; font-size: .95rem; }
.credential .alert-danger { background: #fdecec; color: #b3261e; border: 1px solid #f5c6c6; }
.credential .alert-success { background: #e8f7ec; color: #1e7a3a; border: 1px solid #bfe6cb; }

/* ---------------- 8. Footer ---------------- */
.footer-top { background: #0e1a2b; }
.footer-top h4, .footer-top h5 { color: #fff; font-weight: 600; }
.footer-top ul.foot-nav > li > a,
.footer-top ul.foot-nav-two > li > a {
  color: #b9c6d6;
  transition: color .2s var(--mu-ease), padding-left .2s var(--mu-ease);
}
.footer-top ul.foot-nav > li > a:hover,
.footer-top ul.foot-nav-two > li > a:hover {
  color: var(--mu-second);
  padding-left: 4px;
}
.footer-bottom { background: #0a1420; }
.footer-bottom a { color: color-mix(in srgb, var(--mu-second) 70%, #fff); }
.whatsapp a { border-radius: 999px; box-shadow: var(--mu-shadow); }
.getQuote a { border-radius: 10px 10px 0 0; font-weight: 600; }

/* ---------------- 9. Responsive ---------------- */
@media only screen and (max-width: 600px) {
  .sec { padding: 2.5rem 0; }
  h1.center, h2.center, h2.title { font-size: 1.5rem; }
  .footer-top { text-align: center; }
  .footer-top ul.foot-nav { columns: 1; }
  .faqs .collapsible-header, .faq .collapsible-header { padding: 15px 16px; }
  .faqs .collapsible-header h4, .faq .collapsible-header h4 { font-size: .95rem !important; }
  .formCard .formCard-head { padding: 18px 20px 15px; }
  .formCard > .card-content { padding: 18px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------- 10. Shared Angular form — brand accent ----------------
   Set on .contactForm (deeper than the bundle's :root) so it wins
   regardless of stylesheet order. */
.contactForm, app-contactus {
  --pf-accent: #55bf39;
  --pf-accent-dark: #43ac27;
}

/* keep Materialize circular icon buttons circular */
.btn-floating, a.btn-floating {
  padding: 0 !important;
  line-height: inherit !important;
  height: 40px; width: 40px;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
}
.btn-floating.btn-large { height: 56px; width: 56px; }
.btn-floating i { line-height: 1 !important; height: auto !important; width: auto !important; font-size: 22px; }

/* bare wrapper cards holding a heading + copy: give them real padding so
   text is not flush against the border (small icon/tech chips excluded) */
.card:has(> h2), .card:has(> h3), .card:has(> h4) {
  padding: 26px 28px;
  box-shadow: 0 14px 30px -20px rgba(16,35,51,.22);
}
.card:has(> h2) > h2:first-child,
.card:has(> h3) > h3:first-child,
.card:has(> h4) > h4:first-child { margin-top: 0; }
/* small tech/logo chips keep their compact look */
.techCard, .card.techCard { padding: 10px 6px !important; box-shadow: none !important; }


/* =====================================================================
   Classified — page-level design pass
   ===================================================================== */

/* ---- Why Choose Us (leftsidebar list) ---- */
.whychooseUs .scrollbardisply {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px;
}
.whychooseUs .scrollbardisply > div:first-child {
  flex: 0 0 auto;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 15px;
  background: color-mix(in srgb, var(--mu-accent) 10%, #fff);
}
.whychooseUs .scrollbardisply > div:first-child img {
  width: 30px !important; height: 30px !important;
  object-fit: contain; margin: 0 !important; display: block;
}
.whychooseUs .scrollbardisply > div:last-child { flex: 1 1 auto; min-width: 0; }
.whychooseUs .scrollbardisply h5 {
  font-size: 1.08rem; font-weight: 700; color: var(--mu-head);
  margin: 2px 0 8px; line-height: 1.35;
}
.whychooseUs .scrollbardisply p {
  font-size: .93rem; line-height: 1.68; color: var(--mu-muted); margin: 0;
}
.whychooseUs .card.leftsidebar {
  border: 1px solid var(--mu-line);
  border-radius: 16px;
  background: #fff;
  margin-bottom: 14px;
  box-shadow: 0 10px 24px -18px rgba(16,35,51,.25);
  transition: transform .3s var(--mu-ease), box-shadow .3s var(--mu-ease), border-color .3s var(--mu-ease);
}
.whychooseUs .card.leftsidebar:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--mu-accent) 40%, transparent);
  box-shadow: 0 20px 34px -20px rgba(16,35,51,.3);
}
.whychooseUs .card.leftsidebar .card-body { padding: 18px 20px; }
.whychooseUs .card.mainSlidebar,
.whychooseUs .card.sidebarSlide { background: transparent; border: none; box-shadow: none; }
/* legacy icon margin that offsets icons inside the new tile */
.whychooseUs .scrollbardisply img { margin: 0 !important; }

/* ---- Highlighted / Powerful Features cards ---- */
.highlightedfeatures .row > article { display: flex; }
.highlightedfeatures .row > article > .card {
  --hc: #55bf39;
  position: relative; overflow: hidden; flex: 1;
  background: #fff;
  border: 1px solid var(--mu-line);
  border-radius: 18px;
  box-shadow: 0 14px 30px -20px rgba(16,35,51,.22);
  margin-bottom: 24px;
  transition: transform .3s var(--mu-ease), box-shadow .3s var(--mu-ease), border-color .3s var(--mu-ease);
}
.highlightedfeatures .row > article:nth-of-type(4n+2) > .card { --hc: #2b6ef0; }
.highlightedfeatures .row > article:nth-of-type(4n+3) > .card { --hc: #f2960b; }
.highlightedfeatures .row > article:nth-of-type(4n) > .card   { --hc: #8b5cf6; }
.highlightedfeatures .row > article > .card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--hc), color-mix(in srgb, var(--hc) 45%, #fff));
}
.highlightedfeatures .row > article > .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 46px -22px rgba(16,35,51,.32);
  border-color: color-mix(in srgb, var(--hc) 45%, transparent);
}
.highlightedfeatures .card .card-body { padding: 26px 22px 24px; }
.highlightedfeatures .card .card-body > img {
  width: 62px !important; height: 62px !important; object-fit: contain;
  padding: 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--hc) 10%, #fff);
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--hc) 70%, transparent);
  margin-bottom: 14px; display: block;
}
.highlightedfeatures .imgflex { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.highlightedfeatures .imgflex h5 {
  font-size: 1.08rem; font-weight: 700; color: var(--mu-head); margin: 0 0 .6rem; line-height: 1.35;
}
.highlightedfeatures .imgflex .btn.flexcircl {
  flex: 0 0 auto;
  width: 38px !important; height: 38px !important;
  line-height: 38px !important; padding: 0 !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--hc) 12%, #fff) !important;
  color: var(--hc) !important; box-shadow: none !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  transition: background .25s var(--mu-ease), color .25s var(--mu-ease), transform .25s var(--mu-ease);
}
.highlightedfeatures .imgflex .btn.flexcircl:hover { background: var(--hc) !important; color: #fff !important; transform: translateY(-2px); }
.highlightedfeatures .card p { font-size: .93rem; line-height: 1.68; color: var(--mu-muted); margin: 0; }

/* ---- Mobile App section ---- */
.mobileApp .card { background: transparent; border: none; box-shadow: none; }
.mobileApp .rowappBtn { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mobileApp .rowappBtn .app { margin: 0 !important; }
.mobileApp .rowappBtn img { border-radius: 10px; transition: transform .25s var(--mu-ease); }
.mobileApp .rowappBtn img:hover { transform: translateY(-3px); }

/* ---- Features page ---- */
.classifiedfeaturesBanner {
  background: radial-gradient(700px 360px at 85% 8%, rgba(85,191,57,.12), transparent 65%),
              linear-gradient(135deg, #f3fbf1 0%, #ecf8e9 55%, #f9fdf8 100%) !important;
}
.classifiedfeaturesBanner h1 { color: var(--mu-head); font-weight: 800; font-size: clamp(1.8rem,3.4vw,2.7rem); }
.classifiedfeaturesBanner p { color: var(--mu-muted); font-size: 1.05rem; }

.essentialFeatures .card,
.featureForall .primaryFeaturesall > article > .card,
.additionalFeatures .card {
  --fc: #55bf39;
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--mu-line);
  border-radius: 18px !important;
  box-shadow: 0 14px 30px -20px rgba(16,35,51,.22);
  transition: transform .3s var(--mu-ease), box-shadow .3s var(--mu-ease), border-color .3s var(--mu-ease);
}
.featureForall .primaryFeaturesall > article:nth-of-type(3n+2) > .card { --fc: #2b6ef0; }
.featureForall .primaryFeaturesall > article:nth-of-type(3n) > .card   { --fc: #f2960b; }
.essentialFeatures .card:hover,
.featureForall .primaryFeaturesall > article > .card:hover,
.additionalFeatures .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 46px -22px rgba(16,35,51,.32);
  border-color: color-mix(in srgb, var(--fc) 45%, transparent);
}
.essentialFeatures .card::before,
.featureForall .primaryFeaturesall > article > .card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--fc), color-mix(in srgb, var(--fc) 45%, #fff)); z-index: 2;
}
.essentialFeatures .card .card-body,
.featureForall .primaryFeaturesall > article > .card .card-body,
.additionalFeatures .card .card-body { padding: 26px 22px 24px !important; }
.essentialFeatures .card .card-body > img.img-responsive,
.featureForall .primaryFeaturesall .card .card-body > img.img-responsive {
  width: 62px !important; height: 62px !important; object-fit: contain;
  padding: 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--fc) 10%, #fff);
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--fc) 70%, transparent);
  margin: 0 auto 14px !important; display: block;
}
.essentialFeatures .card h5, .featureForall .primaryFeaturesall .card h5 {
  font-size: 1.08rem; font-weight: 700; color: var(--mu-head); margin: 0 0 .6rem; line-height: 1.35;
}
.essentialFeatures .card p, .featureForall .primaryFeaturesall .card p, .additionalFeatures .card p {
  font-size: .93rem; line-height: 1.68; color: var(--mu-muted); margin: 0;
}
.featureForall .primaryFeaturesall { display: flex; flex-wrap: wrap; }
.featureForall .primaryFeaturesall > article { display: flex; }
.featureForall .primaryFeaturesall > article > .card { flex: 1; margin-bottom: 24px; }
.featureForall .primaryFeaturesall .card .screenimg {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 38px !important; height: 38px !important;
  line-height: 38px !important; padding: 0 !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--fc) 12%, #fff) !important;
  color: var(--fc) !important; box-shadow: none !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  transition: background .25s var(--mu-ease), color .25s var(--mu-ease), transform .25s var(--mu-ease);
}
.featureForall .primaryFeaturesall .card .screenimg:hover { background: var(--fc) !important; color: #fff !important; transform: translateY(-2px); }
.featureForall .tabs {
  display: flex; justify-content: center; gap: 14px;
  background: transparent; height: auto; margin-bottom: 1.8rem;
}
.featureForall .tabs .tab { height: auto; line-height: normal; text-transform: none; flex: 0 0 auto; }
.featureForall .tabs .tab a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--mu-head); font-weight: 600; font-size: .95rem;
  background: #fff; border: 1.5px solid var(--mu-line);
  border-radius: 999px; padding: 10px 24px;
  transition: all .25s var(--mu-ease);
}
.featureForall .tabs .tab a:hover { background: var(--mu-soft); color: var(--mu-accent); }
.featureForall .tabs .tab a.active {
  background: var(--mu-grad-solid) !important; color: #fff !important;
  border-color: transparent; box-shadow: 0 12px 24px -12px rgba(85,191,57,.9);
}
.featureForall .tabs .indicator { display: none; }
.essentialFeatures .owl-theme .owl-dots .owl-dot span { background: #cfe6c6; }
.essentialFeatures .owl-theme .owl-dots .owl-dot.active span { background: var(--mu-accent); }

/* ---- Screen page: phone mockups for Mobile View / App View ---- */
.mobile-shots { display: flex; flex-wrap: wrap; }
.mobile-shots > .col { display: flex; }
.mobile-shots .card.mob-shot {
  background: transparent; box-shadow: none; border: none;
  flex: 1; display: flex; flex-direction: column;
}
#screenshots .mobile-shots .card-image {
  max-height: none; overflow: visible; border-bottom: none;
  background: linear-gradient(160deg,#f1faee 0%,#eef4fb 100%);
  border-radius: 20px; padding: 24px 26px;
}
#screenshots .mobile-shots .card-image > a {
  display: block; position: relative;
  background: #111826; border-radius: 38px; padding: 12px 10px;
  box-shadow: 0 26px 46px -22px rgba(17,24,38,.55);
  transition: transform .3s var(--mu-ease);
}
#screenshots .mobile-shots .card-image > a:hover { transform: translateY(-6px); }
#screenshots .mobile-shots .card-image > a::before {
  content: ""; position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 44%; height: 18px; background: #111826;
  border-radius: 0 0 12px 12px; z-index: 2;
}
.mobile-shots .card.mob-shot .card-image img.portfolioimg {
  display: block; width: 100%;
  aspect-ratio: 9 / 17; object-fit: cover; object-position: top;
  border-radius: 27px; border: none; background: #fff;
}
#screenshots .mobile-shots .card-image > a::after { display: none; }
.mobile-shots .card.mob-shot .card-content { background: transparent; margin-top: auto; }
.mobile-shots .card.mob-shot .card-content h5 { font-weight: 700; }
#screenshots .mobile-shots .card-image .zoom { z-index: 3; }
/* uniform grid for the non-phone sections */
#screenshots > .row:not(.mobile-shots) { display: flex; flex-wrap: wrap; }
#screenshots > .row:not(.mobile-shots) > .col { display: flex; float: none; }
#screenshots > .row:not(.mobile-shots) .card { flex: 1; display: flex; flex-direction: column; margin: 0 0 24px; }
#screenshots > .row:not(.mobile-shots) .card-image { height: 220px; flex: 0 0 auto; }
#screenshots > .row:not(.mobile-shots) .card-image > a { display: block; height: 100%; }
#screenshots > .row:not(.mobile-shots) .card-image img.portfolioimg {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
}
#screenshots > .row:not(.mobile-shots) .card-content { margin-top: auto; }
@media only screen and (min-width: 993px) { .mobile-shots > .col.l3 { width: 25%; } }

/* =====================================================================
   Classified — "Download Our Mobile App": white card panel
   ===================================================================== */
.mobileApp {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(20,38,61,.07) 1px, transparent 0) 0 0/22px 22px,
    radial-gradient(700px 420px at 80% 25%, rgba(85,191,57,.14), transparent 62%),
    linear-gradient(135deg, #f3faf1 0%, #eff5fa 55%, #f9fdf8 100%) !important;
  padding: clamp(3rem,6vw,5rem) 0 !important;
}
.mobileApp > .container > .row {
  display: flex; flex-wrap: wrap; align-items: center;
  position: relative;
  background: #fff;
  border: 1px solid var(--mu-line);
  border-radius: 26px;
  box-shadow: 0 30px 70px -34px rgba(16,35,51,.34);
  padding: clamp(1.8rem,3.5vw,3rem);
  margin: 0;
}
/* accent edge on the card */
.mobileApp > .container > .row::before {
  content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 5px;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, var(--mu-accent), color-mix(in srgb, var(--mu-accent) 40%, #fff));
}
.mobileApp .card {
  background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 !important;
}

/* copy */
.mobileApp h2 {
  color: var(--mu-head) !important;
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  font-weight: 800; line-height: 1.15;
  margin: 0 0 1.05rem; position: relative; padding-top: 44px;
}
.mobileApp h2::before {
  content: "MOBILE APP";
  position: absolute; top: 0; left: 0;
  font-size: .7rem; font-weight: 700; letter-spacing: 2px;
  color: var(--mu-accent-dark);
  background: color-mix(in srgb, var(--mu-accent) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--mu-accent) 35%, transparent);
  padding: 6px 16px; border-radius: 999px;
}
.mobileApp p { color: var(--mu-body) !important; font-size: .99rem; line-height: 1.75; }
.mobileApp h5 {
  color: var(--mu-head) !important; font-size: 1rem; font-weight: 700;
  margin: 1.4rem 0 .8rem;
}
.mobileApp p.green-text {
  background: color-mix(in srgb, var(--mu-accent) 9%, #fff);
  border-left: 4px solid var(--mu-accent);
  border-radius: 0 12px 12px 0;
  padding: 12px 16px; margin-top: 1.3rem;
}
.mobileApp p.green-text strong { color: var(--mu-accent-dark) !important; }

/* store badges */
.mobileApp .rowappBtn { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0; }
.mobileApp .rowappBtn .app { margin: 0 !important; }
.mobileApp .rowappBtn a {
  display: inline-flex; background: #fff;
  border: 1px solid var(--mu-line); border-radius: 14px;
  padding: 9px 18px;
  box-shadow: 0 10px 22px -14px rgba(16,35,51,.35);
  transition: border-color .25s var(--mu-ease), transform .25s var(--mu-ease), box-shadow .25s var(--mu-ease);
}
.mobileApp .rowappBtn a:hover {
  border-color: color-mix(in srgb, var(--mu-accent) 55%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 18px 30px -14px rgba(16,35,51,.4);
}
.mobileApp .rowappBtn img { height: 36px; width: auto; display: block; }

/* phone breaks out of the card on desktop */
.mobileApp .x-slide-container { position: relative; }
.mobileApp .x-slide-container::before {
  content: ""; position: absolute; inset: 4% 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(85,191,57,.32), transparent 68%);
  filter: blur(42px); z-index: 0; pointer-events: none;
}
.mobileApp .x-slide-track { position: relative; z-index: 1; }
.mobileApp .x-slide-image { filter: drop-shadow(0 34px 46px rgba(16,35,51,.4)); }
@media only screen and (min-width: 993px) {
  .mobileApp .mobileHide { margin-top: -3.2rem; margin-bottom: -3.2rem; }
}

/* slider controls */
.mobileApp .x-nav-arrow {
  background: #fff !important; border: 1px solid var(--mu-line);
  width: 46px; height: 46px; border-radius: 50%;
  box-shadow: 0 14px 28px -14px rgba(16,35,51,.45);
  color: var(--mu-head);
  transition: background .25s var(--mu-ease), color .25s var(--mu-ease), transform .25s var(--mu-ease);
}
.mobileApp .x-nav-arrow:hover {
  background: var(--mu-accent) !important; color: #fff;
  transform: scale(1.06); border-color: transparent;
}
.mobileApp .x-slide-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #c5d6c2;
  transition: background .25s var(--mu-ease), transform .25s var(--mu-ease);
}
.mobileApp .x-slide-dot.active { background: var(--mu-accent); transform: scale(1.35); }
.mobileApp .x-slide-counter, .mobileApp .x-current-index, .mobileApp .x-total-count { color: var(--mu-muted); }

@media only screen and (max-width: 992px) {
  .mobileApp > .container > .row { padding: 1.6rem 1.3rem; border-radius: 20px; }
  .mobileApp > .container > .row::before { top: 18px; bottom: 18px; }
  .mobileApp h2 { padding-top: 42px; }
}

/* fix: the track's z-index (added for the glow) stacked slides above the
   controls, so arrows/dots were unclickable — lift the controls above it */
.mobileApp .x-slide-nav { z-index: 5; }
.mobileApp .x-nav-arrow { position: relative; z-index: 6; pointer-events: auto; }
.mobileApp .x-dot-group { position: absolute; z-index: 6; pointer-events: auto; }
.mobileApp .x-slide-dot { cursor: pointer; pointer-events: auto; }
.mobileApp .x-slide-counter { z-index: 6; }

/* --- mobileApp: mobile/tablet layout ------------------------------------
   the legacy .mobileHide class hid the whole phone slider column below
   993px, so the app section rendered as text with no screenshots at all.
   Show it stacked under the copy instead.                               */
@media only screen and (max-width: 992px) {
  .mobileApp .mobileHide { display: block !important; }
  .mobileApp > .container > .row { display: block; }
  .mobileApp > .container > .row > .col { padding: 0 !important; }

  .mobileApp .x-slide-container { max-width: 300px; margin: 0 auto; }
  .mobileApp .x-slide-image { filter: drop-shadow(0 18px 30px rgba(16,35,51,.28)); }
  .mobileApp .x-slide-container::before { inset: 10% 4%; filter: blur(30px); }

  /* arrows sit clear of the phone rather than on top of it */
  .mobileApp .x-nav-arrow { width: 38px; height: 38px; }
  .mobileApp .x-nav-arrow svg { width: 16px; height: 16px; }
  .mobileApp .x-dot-group { gap: 7px; }
  .mobileApp .x-slide-dot { width: 7px; height: 7px; }

  /* store badges: side by side, never squeezed */
  .mobileApp .rowappBtn { gap: 10px; }
  .mobileApp .rowappBtn img { height: 32px; }
}

@media only screen and (max-width: 600px) {
  .mobileApp > .container > .row { padding: 1.4rem 1.1rem; }
  .mobileApp h2 { font-size: 1.6rem; line-height: 1.3; }
  .mobileApp p { font-size: .94rem; }
  .mobileApp .x-slide-container { max-width: 240px; }
  .mobileApp .x-nav-arrow { width: 34px; height: 34px; }
}

@media only screen and (max-width: 992px) {
  /* counter was floating bottom-left at desktop size — centre it under the dots */
  .mobileApp .x-slide-counter {
    position: static !important;
    display: block;
    text-align: center;
    font-size: .82rem;
    margin: 10px 0 0;
  }
  .mobileApp .x-dot-group { position: static !important; justify-content: center; margin-top: 14px; }
  .mobileApp .x-slide-container { padding-bottom: 0; }
  .mobileApp .x-slide-nav { inset: 0 0 46px 0; }
}

/* divider only where the columns actually stack (below 601px they are
   full-width; at 601-992px Materialize .m6 still floats them side by side) */
@media only screen and (max-width: 600px) {
  .mobileApp .mobileHide {
    margin-top: 2rem;
    padding-top: 1.7rem;
    border-top: 1px solid var(--mu-line);
  }
}