/* ===================================================================
   AJontec brand layer
   -------------------------------------------------------------------
   Works across all three home themes. Every rule targets the shared
   base classes (.card, .category-area, .service-area, .section-title,
   .hero-banner ...) rather than the _v1/_v2/_v3 variants, so switching
   theme keeps the same identity.

   Colours are read from the logo file, not picked by eye:
       #1E3A8A   the blue in "Tec" and the chart mark
       #101117   the black in "Ajon"

   Presentation only. No markup, class or template change anywhere.
   Remove the one <link> line and the stock theme returns exactly.
   =================================================================== */

:root {
  --aj-brand:      #1E3A8A;
  --aj-brand-press:#152A63;
  --aj-brand-tint: #EFF2FA;
  --aj-brand-line: #C6D0EA;
  --aj-ink:        #101117;
  --aj-body:       #474D5D;
  --aj-muted:      #79808F;
  --aj-rule:       #E3E7EF;
  --aj-paper:      #FFFFFF;
}

/* ===================================================================
   1 · TYPE
   The stock theme sets everything at similar weights, which reads
   flat. Display sizes get tight negative tracking, small labels get
   wide tracking. That contrast is what makes a page look typeset
   rather than defaulted.
   =================================================================== */

body {
  color: var(--aj-body);
  font-size: 15.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.title, .card_title {
  color: var(--aj-ink);
  font-weight: 660;
  letter-spacing: -.022em;
  line-height: 1.2;
}

.hero-banner .title,
.banner-content .title,
.banner-content h1 {
  font-size: clamp(1.95rem, 4.4vw, 2.95rem) !important;
  letter-spacing: -.032em;
  line-height: 1.14;
}

.banner-content .text,
.banner-content p {
  font-size: clamp(.98rem, 1.4vw, 1.06rem);
  color: var(--aj-muted);
  line-height: 1.6;
}

.section-title .title { font-size: clamp(1.45rem, 2.8vw, 2rem) !important; }
.section-title .text  { color: var(--aj-muted); }

/* a short brand rule above every section title - the one repeated
   device on the page, so it has to be quiet */
.section-title::before {
  content: "";
  display: block;
  width: 32px; height: 3px;
  border-radius: 2px;
  background: var(--aj-brand);
  margin-bottom: 14px;
}
.section-title.title-center::before { margin-left: auto; margin-right: auto; }

/* ===================================================================
   2 · SURFACES
   Hairline rules instead of drop shadows. A shadow reads as a SaaS
   dashboard; a rule reads as a document, which is the register these
   professionals actually work in.
   =================================================================== */

.card {
  background: var(--aj-paper);
  border: 1px solid var(--aj-rule) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.card:hover {
  border-color: var(--aj-brand-line) !important;
  box-shadow: 0 2px 14px rgba(30,58,138,.08) !important;
}

.card_content, .card_details { border: 0 !important; }

.bg-primary-light { background: var(--aj-brand-tint) !important; }

/* ===================================================================
   3 · CATEGORY TILES
   The stock theme leads with a large coloured icon block. Reduced to
   a small mark so the category name leads - people scan for the name
   of the service, not for a picture.
   =================================================================== */

.category-area .card_icon {
  width: 46px !important; height: 46px !important;
  min-width: 46px;
  display: flex !important; align-items: center; justify-content: center;
  background: var(--aj-brand-tint) !important;
  border: 1px solid var(--aj-brand-line);
  border-radius: 9px !important;
  padding: 9px;
  margin-bottom: 15px !important;
}
.category-area .card_icon img,
.category-area .card_icon i,
.category-area .card_icon svg { max-width: 100%; max-height: 100%; height: auto; }

.category-area .card_title { font-size: 1.02rem !important; }

/* ===================================================================
   4 · BUTTONS AND LINKS
   =================================================================== */

.btn-primary,
.btn.btn-primary {
  background: var(--aj-brand) !important;
  border-color: var(--aj-brand) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 7px !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn.btn-primary:hover {
  background: var(--aj-brand-press) !important;
  border-color: var(--aj-brand-press) !important;
}

.btn-outline-primary, .btn-secondary {
  border: 1px solid var(--aj-brand) !important;
  color: var(--aj-brand) !important;
  background: transparent !important;
  border-radius: 7px !important;
  font-weight: 600;
}
.btn-outline-primary:hover, .btn-secondary:hover {
  background: var(--aj-brand) !important; color: #fff !important;
}

.btn-lg { padding: 12px 26px !important; font-size: .95rem !important; }

.btn-text, .btn-text.icon-end { color: var(--aj-brand) !important; font-weight: 600; }
.btn-text:hover { color: var(--aj-ink) !important; }

a { color: var(--aj-brand); }
a:hover { color: var(--aj-brand-press); }

/* ===================================================================
   5 · HERO
   =================================================================== */

.hero-banner { border-bottom: 1px solid var(--aj-rule); }

.banner-form .form-wrapper {
  background: var(--aj-paper);
  border: 1px solid var(--aj-rule);
  border-radius: 11px !important;
  padding: 6px;
  box-shadow: 0 2px 18px rgba(16,17,23,.06) !important;
}
.banner-form .form-control {
  border: 0 !important;
  height: 46px;
  font-size: .96rem;
  box-shadow: none !important;
}
.banner-form .form-control:focus { box-shadow: none !important; }

.banner-tags { font-size: .86rem; color: var(--aj-muted); }
.banner-tags a { color: var(--aj-body); border-bottom: 1px solid var(--aj-rule); }
.banner-tags a:hover { color: var(--aj-brand); border-color: var(--aj-brand); }

/* ===================================================================
   6 · SERVICE CARDS
   Price and rating are what people compare, so they carry the weight.
   =================================================================== */

.service-area .card_price, .card_price, .price {
  color: var(--aj-ink) !important;
  font-weight: 680;
}
.ratings-total, .card_meta { color: var(--aj-muted); font-size: .84rem; }

.service-area .card_thumb img,
.card_thumb img { border-radius: 8px 8px 0 0; }

/* ===================================================================
   7 · PARTNERS  ·  supporting, not shouting
   =================================================================== */

.sponsor-area img {
  filter: grayscale(100%);
  opacity: .45;
  transition: opacity .2s ease, filter .2s ease;
}
.sponsor-area img:hover { filter: none; opacity: 1; }

/* ===================================================================
   8 · TESTIMONIALS
   =================================================================== */

.testimonial-area .slider-item,
.testimonial-area .card {
  border: 1px solid var(--aj-rule) !important;
  border-radius: 9px !important;
  background: var(--aj-paper) !important;
}
.testimonial-area .quote .text { color: var(--aj-body); }

/* ===================================================================
   9 · NEWSLETTER  ·  the one full-brand block on the page
   =================================================================== */

.newsletter-area .newsletter-wrapper {
  background: var(--aj-brand) !important;
  border-radius: 13px !important;
}
.newsletter-area .title,
.newsletter-area h2, .newsletter-area h3 { color: #fff !important; }
.newsletter-area .text { color: rgba(255,255,255,.75) !important; }
.newsletter-area .btn-primary {
  background: #fff !important; border-color: #fff !important;
  color: var(--aj-brand) !important;
}

/* ===================================================================
   10 · HEADER AND FOOTER
   =================================================================== */

.header-menu > ul > li > a { color: var(--aj-ink); font-weight: 550; }
.header-menu > ul > li > a:hover { color: var(--aj-brand); }

footer, .footer-area { background: var(--aj-ink) !important; }
footer a, .footer-area a { color: rgba(255,255,255,.72); }
footer a:hover, .footer-area a:hover { color: #fff; }
footer .title, .footer-area .title,
footer h4, .footer-area h4 { color: #fff !important; }

/* ===================================================================
   11 · RHYTHM
   The stock theme pads every section 100px top and bottom regardless
   of screen size. Scaled to the viewport so a phone is not mostly
   empty space.
   =================================================================== */

.pt-100  { padding-top:    clamp(46px, 6.5vw, 96px) !important; }
.pb-100  { padding-bottom: clamp(46px, 6.5vw, 96px) !important; }
.ptb-100 { padding: clamp(46px, 6.5vw, 96px) 0 !important; }
.pb-75   { padding-bottom: clamp(32px, 5vw, 72px) !important; }
.pb-70   { padding-bottom: clamp(30px, 5vw, 68px) !important; }
.pb-60   { padding-bottom: clamp(26px, 4vw, 58px) !important; }
.mb-50   { margin-bottom:  clamp(24px, 3.4vw, 46px) !important; }
.mb-40   { margin-bottom:  clamp(20px, 3vw, 38px) !important; }
.mb-30   { margin-bottom:  clamp(16px, 2.4vw, 30px) !important; }
.mb-25   { margin-bottom:  clamp(14px, 2vw, 25px) !important; }

/* ===================================================================
   12 · MOBILE
   The stock theme is responsive, but three things break on a phone:
   the hero search sits side by side, section padding stays at desktop
   size, and hover states stick after a tap.
   =================================================================== */

@media (max-width: 991.98px) {
  .hero-banner { padding-top: 52px; padding-bottom: 46px; }
  .banner-content .text { max-width: 100%; }
}

@media (max-width: 767.98px) {
  body { font-size: 15px; }

  .hero-banner { padding-top: 38px; padding-bottom: 34px; }
  .hero-banner .title, .banner-content .title,
  .banner-content h1 { font-size: clamp(1.68rem, 7.4vw, 2.15rem) !important; }

  /* side by side search is unusable at this width */
  .banner-form .input-inline { display: block !important; }
  .banner-form .form-control { width: 100%; margin-bottom: 9px; }
  .banner-form .btn          { width: 100%; }

  .section-title .title { font-size: clamp(1.3rem, 5.6vw, 1.62rem) !important; }
  .section-title::before { width: 26px; margin-bottom: 11px; }

  .category-area .card_icon {
    width: 40px !important; height: 40px !important;
    min-width: 40px; margin-bottom: 12px !important;
  }

  /* hover lift sticks after a tap on touch screens */
  .card:hover { box-shadow: none !important; }

  .btn-lg { padding: 11px 20px !important; font-size: .92rem !important; }

  /* nothing may push the page sideways */
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  img { max-width: 100%; height: auto; }
}

@media (max-width: 575.98px) {
  .hero-banner .title, .banner-content .title,
  .banner-content h1 { font-size: 1.58rem !important; }
  .banner-tags { line-height: 2; }
  .newsletter-area .newsletter-wrapper { padding: 24px 18px !important; }
}

/* ===================================================================
   13 · QUALITY FLOOR
   =================================================================== */

a:focus-visible, button:focus-visible, .form-control:focus-visible {
  outline: 2px solid var(--aj-brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==== AJONTEC-PARTICULARS-START =====================================
   Statutory particulars band + accreditation chips + company page.

   Sab kuch aj- prefix par hai, isliye theme ki CSS se takraata nahi.
   Rang rgba(255,255,255,...) mein hain, absolute nahi — footer ka
   background badlo to ye apne aap adjust ho jaata hai.
   ================================================================== */

:root {
  --aj-navy: #1E3A8A;
  --aj-ink: #101117;
  --aj-hair: rgba(255, 255, 255, .13);
  --aj-mute: rgba(255, 255, 255, .58);
  --aj-strong: rgba(255, 255, 255, .92);
}

.aj-particulars {
  padding: 34px 0 30px;
  border-top: 1px solid var(--aj-hair);
  font-size: 13px;
  line-height: 1.6;
}

/* ---- accreditation chips ---------------------------------------- */

.aj-particulars__creds {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.aj-cred {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--aj-hair);
  border-radius: 6px;
  background: rgba(255, 255, 255, .03);
  min-width: 0;
}

.aj-cred__name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--aj-strong);
}

.aj-cred__ref {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--aj-mute);
  word-break: break-all;
}

.aj-cred__body {
  font-size: 10.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .4);
  max-width: 30ch;
}

/* ---- particulars grid ------------------------------------------- */

.aj-particulars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px 26px;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--aj-hair);
}

.aj-particulars__item {
  min-width: 0;
}

.aj-particulars__label {
  display: block;
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}

.aj-particulars__value {
  display: block;
  margin: 0;
  font-size: 13px;
  color: var(--aj-strong);
  word-break: break-word;
}

.aj-particulars__value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--aj-hair);
}

.aj-particulars__value a:hover,
.aj-particulars__value a:focus-visible {
  border-bottom-color: currentColor;
}

/* registered office lambi hoti hai — apni poori row le leti hai */
.aj-particulars__item--registered_office {
  grid-column: 1 / -1;
}

.aj-particulars__attr {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--aj-hair);
  font-size: 12.5px;
  color: var(--aj-mute);
}

/* ---- company / legal page --------------------------------------- */

.aj-company {
  padding: 56px 0 72px;
}

.aj-company__lede {
  max-width: 62ch;
  margin: 0 0 40px;
  font-size: 16px;
  line-height: 1.7;
  color: #4a5568;
}

.aj-company__section {
  margin-bottom: 44px;
}

.aj-company__h {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aj-navy);
}

.aj-company__rule {
  height: 1px;
  margin: 0 0 20px;
  background: #e3e7ee;
  border: 0;
}

.aj-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.aj-table th,
.aj-table td {
  padding: 13px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #eef1f6;
}

.aj-table th {
  width: 34%;
  font-weight: 500;
  color: #6b7280;
}

.aj-table td {
  color: var(--aj-ink);
}

.aj-table td .aj-ref {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: .02em;
}

.aj-table td .aj-issuer {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: #7b8494;
}

.aj-note {
  margin: 26px 0 0;
  padding: 14px 16px;
  border-left: 2px solid var(--aj-navy);
  background: #f6f8fc;
  font-size: 13px;
  line-height: 1.65;
  color: #4a5568;
}

@media (max-width: 575px) {
  .aj-particulars { padding: 26px 0 22px; }
  .aj-particulars__grid { grid-template-columns: 1fr; gap: 14px; }
  .aj-cred { width: 100%; }
  .aj-cred__body { max-width: none; }
  .aj-table th { width: 42%; }
}

@media (prefers-reduced-motion: reduce) {
  .aj-particulars * { transition: none !important; }
}
/* ==== AJONTEC-PARTICULARS-END ===================================== */

/* ==== AJONTEC-POLISH-START ==========================================
   Do cheezein: typography aur logo/header ka size.

   Theme "Inter + Roboto" par tha. Ye jodi har dusre template mein hai
   — isiliye site copy jaisi lagti hai, chahe rang badal do. Yahan
   Manrope (headings) + IBM Plex Sans (body) hai. Plex ek engineering
   font hai, IT company par jamta hai, aur turant pehchana nahi jaata
   ki "wahi wala template".

   Sab kuch theme ke CSS variables ke through hai, isliye jahan-jahan
   theme font use karta hai wahan apne aap lag jaata hai.
   ================================================================== */

:root {
  --font-heading: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, monospace;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.title, .sec-title, .navbar-brand {
  font-family: var(--font-heading);
  letter-spacing: -0.021em;
  line-height: 1.14;
}

h1, .title { font-weight: 800; }
h2, h3     { font-weight: 700; }
h4, h5, h6 { font-weight: 600; }

/* Hero heading — screenshot mein zaroorat se bada tha. Tight tracking
   se bade size par bhi saaf padha jaata hai. */
.hero-banner .banner-content .title,
.hero-banner .banner-content h1 {
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.1;
}

.hero-banner .banner-content .text {
  font-size: 17px;
  line-height: 1.62;
  max-width: 46ch;
  color: #4a5568;
}

/* ---- logo ---------------------------------------------------------
   Asli dikkat: img par koi height nahi thi, isliye 605px wali file
   apni poori marzi se phail rahi thi. Ab height fix hai, width
   apne aap. */

.header-area .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 34px;
  flex: 0 0 auto;
}

.header-area .navbar-brand img {
  height: 42px;
  width: auto;
  max-height: 42px;
  display: block;
}

.header-area .main-responsive-nav .logo img {
  height: 32px;
  width: auto;
  max-height: 32px;
}

/* footer ka logo bhi utna hi kaabu mein */
.footer-area .logo img,
footer .logo img {
  height: 38px;
  width: auto;
  max-height: 38px;
}

/* ---- header ki oonchai -------------------------------------------
   Logo chhota hone ke baad header mein khaali jagah bach jaati hai.
   Use band karo, warna header adha screen kha jaata hai. */

.header-area .header-bottom {
  padding-top: 12px;
  padding-bottom: 12px;
}

.header-area .navbar {
  padding-top: 0;
  padding-bottom: 0;
}

.header-area .navbar-nav .nav-item .nav-link {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.004em;
  padding-left: 15px;
  padding-right: 15px;
}

/* ---- category strip ----------------------------------------------
   Screenshot mein bahut khula-khula tha aur alag hi font size par. */

.category-menu-area .nav-link,
.category-area .nav-link,
.header-category .nav-link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.004em;
}

/* ---- controls -----------------------------------------------------
   Button ka weight 600 par rakha hai, 700 par nahi. 700 gaadha lagta
   hai aur "template" wali feel deta hai. */

.btn, .btn-md, .btn-sm, .btn-lg,
button.btn, .banner-content .btn {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.form-control, .nice-select, input, select, textarea {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: -0.003em;
}

/* ---- data / numbers ----------------------------------------------
   Price, count, reference number — sab tabular ho, warna list mein
   digits hilte hue lagte hain. */

.price, .amount, .count, .counter-item .number,
.aj-ref, .aj-cred__ref {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ---- chhoti chhoti cheezein --------------------------------------- */

.section-title h2, .sec-title h2 {
  letter-spacing: -0.024em;
}

.card, .service-card, .single-service {
  letter-spacing: -0.003em;
}

@media (max-width: 991px) {
  .header-area .header-bottom { padding-top: 8px; padding-bottom: 8px; }
  .hero-banner .banner-content .text { font-size: 16px; }
}
/* ==== AJONTEC-POLISH-END ============================================ */

/* ==== AJONTEC-HOME-START ============================================
   Teen kaam:
     1. Button — dikhna chahiye ki button hai
     2. Home page ka rhythm aur hierarchy
     3. Responsive — fluid, breakpoint par jhatka nahi

   Ye block sabse aakhir mein load hota hai, isliye theme ke rules
   par bhaari padta hai bina !important ke.
   ================================================================== */

/* ---- 1. Bacha hua orange -------------------------------------------
   --color-primary to navy ho gaya tha (DB se aata hai), lekin
   --color-secondary abhi bhi #F4813C tha. Gradient aur ek background
   usi se bante hain — isliye jagah-jagah orange jhaank raha tha. */

:root {
  --color-secondary: #2947A8;
  --gradient-1: linear-gradient(145deg, #1E3A8A 0%, #2947A8 100%);
  --aj-navy-dark: #16296B;
  --aj-navy-soft: #EEF2FB;
}

/* ---- 2. Fluid type -------------------------------------------------
   Theme ke paas 58px -> 44px -> 36px wale breakpoint the. Beech ki
   width par heading ya to bahut badi thi ya bahut chhoti. clamp()
   se har width par theek. */

:root {
  --font-size--h1: clamp(30px, 4.6vw, 54px);
  --font-size--h2: clamp(24px, 3.1vw, 40px);
  --font-size--h3: clamp(20px, 2.2vw, 28px);
  --font-size--h4: clamp(18px, 1.7vw, 22px);
  --font-size--h5: clamp(17px, 1.5vw, 20px);
  --font-size--h6: clamp(16px, 1.3vw, 18px);
}

/* ---- 3. BUTTON -----------------------------------------------------

   Purani dikkat: weight 500, letter-spacing 0.05em, radius 0, aur
   hover par background poora transparent ho jaata tha. Transparent
   hover sabse buri baat thi — lagta tha button gayab ho gaya.

   Ab: bhara hua, gehra, saaf kinara, dabane par dabta hua. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -0.004em;
  text-transform: none;
  border-radius: 8px;
  line-height: 1.2;
  transition: background-color .18s ease, border-color .18s ease,
              transform .12s ease, box-shadow .18s ease;
}

.btn-lg  { padding: 15px 30px; font-size: 16px; min-height: 50px; }
.btn-md  { padding: 11px 22px; font-size: 15px; min-height: 44px; }
.btn-sm  { padding: 8px 16px;  font-size: 14px; min-height: 36px; }

.btn-sm.btn-icon,
.btn-icon { min-height: 0; }

.btn-primary {
  color: #fff;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  box-shadow: 0 1px 2px rgba(16, 17, 23, .08),
              0 8px 20px -8px rgba(var(--color-primary-rgb), .45);
}

/* Hover par gehra, gayab nahi. Yahi asli fix hai. */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary.show,
.btn-primary:first-child:active {
  color: #fff;
  background: var(--aj-navy-dark);
  border-color: var(--aj-navy-dark);
  box-shadow: 0 1px 2px rgba(16, 17, 23, .10),
              0 10px 24px -8px rgba(var(--color-primary-rgb), .55);
}

/* dabaya to dabe — button hone ka ehsaas isi se aata hai */
.btn:active { transform: translateY(1px); }

/* keyboard se aane par saaf dikhe */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .32);
}

.btn-outline {
  color: var(--color-primary);
  background: #fff;
  border: 1.5px solid var(--color-primary);
  font-weight: 650;
}

.btn-outline:hover,
.btn-outline.show,
.btn-outline.btn:first-child:active {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: none !important;
}

.btn-secondary {
  color: var(--color-primary);
  background: #fff;
  border: 1px solid #dfe4ee;
  font-weight: 650;
}

.btn-secondary:hover {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-text {
  font-weight: 600;
  letter-spacing: -0.004em;
}

/* ---- 4. Section rhythm ---------------------------------------------
   pt-100 mobile par 100px hi rehta tha — aadhi screen padding.
   Fluid kar diya. */

.pt-100 { padding-top:    clamp(48px, 6.5vw, 100px) !important; }
.pb-100 { padding-bottom: clamp(48px, 6.5vw, 100px) !important; }
.pt-75  { padding-top:    clamp(36px, 5vw, 75px) !important; }
.pb-75  { padding-bottom: clamp(36px, 5vw, 75px) !important; }
.pb-70  { padding-bottom: clamp(34px, 4.6vw, 70px) !important; }
.pb-60  { padding-bottom: clamp(30px, 4vw, 60px) !important; }

/* ---- 5. Section headings ------------------------------------------- */

.section-title h2,
.sec-title h2,
.section-title .title {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.026em;
  line-height: 1.15;
}

.section-title p,
.sec-title p {
  font-size: 16px;
  line-height: 1.65;
  color: #5a6473;
  max-width: 58ch;
}

/* ---- 6. Cards ------------------------------------------------------
   Theme ke cards alag-alag radius aur border par the. Ek kar diya —
   yahi cheez "bana hua" bनाम "joda hua" ka farq banati hai. */

.service-card, .single-service, .category-card,
.blog-card, .single-blog, .testimonial-card, .single-testimonial {
  border-radius: 12px;
  border: 1px solid #e6eaf2;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease,
              transform .18s ease;
}

.service-card:hover, .single-service:hover, .category-card:hover,
.blog-card:hover, .single-blog:hover {
  border-color: #c9d4ea;
  box-shadow: 0 12px 28px -14px rgba(16, 17, 23, .18);
  transform: translateY(-2px);
}

.bg-primary-light {
  background-color: var(--aj-navy-soft) !important;
}

/* ---- 7. Hero -------------------------------------------------------- */

.hero-banner .banner-content .btn { margin-top: 4px; }

.hero-banner .input-inline,
.hero-banner .subscription-form .input-inline {
  border-radius: 10px;
  border: 1px solid #dfe4ee;
  box-shadow: 0 2px 10px -4px rgba(16, 17, 23, .10);
}

.hero-banner .form-control { min-height: 50px; }

/* partner strip — rangeen logo ki bheed professional nahi lagti */
.sponsor-area img {
  filter: grayscale(1);
  opacity: .55;
  transition: filter .2s ease, opacity .2s ease;
  max-height: 40px;
  width: auto;
}

.sponsor-area img:hover { filter: grayscale(0); opacity: 1; }

/* ---- 8. Responsive -------------------------------------------------
   Sabse aam bug: koi ek element container se chauda ho jaata hai aur
   poora page daayein-baayein hilne lagta hai. Neeche uska ilaaj. */

img, svg, video, table { max-width: 100%; height: auto; }

.container, .container-fluid { overflow-x: clip; }

@media (max-width: 991px) {
  .hero-banner { text-align: left; }
  .hero-banner .banner-content { margin-bottom: 28px; }

  /* category strip mobile par tootne ke bajaye khisakti hai */
  .category-menu-area .nav,
  .header-category .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .category-menu-area .nav::-webkit-scrollbar,
  .header-category .nav::-webkit-scrollbar { display: none; }
}

@media (max-width: 767px) {
  /* ungli ke liye 44px — Apple aur Google dono ka minimum */
  .btn, .nav-link, .btn-text { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .btn-icon, .btn-sm.btn-icon { min-height: 0; }

  .btn-lg { width: 100%; }
  .hero-banner .banner-content .btn-lg { width: auto; }

  .section-title { text-align: left; }
  .section-title p { max-width: none; }

  .container { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 575px) {
  .hero-banner .input-inline { flex-direction: column; gap: 8px; padding: 8px; }
  .hero-banner .input-inline .btn { width: 100%; }
  .sponsor-area img { max-height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .service-card, .single-service, .category-card,
  .blog-card, .single-blog { transition: none; }
  .btn:active { transform: none; }
  .service-card:hover, .single-service:hover,
  .category-card:hover, .blog-card:hover,
  .single-blog:hover { transform: none; }
}
/* ==== AJONTEC-HOME-END ============================================== */

/* ==== AJONTEC-INTERACTION-START =====================================
   Har cheez jo click, hover ya focus hoti hai — usko ek jaisa banana.

   Theme mein har component ka apna hover tha: kahin colour badalta,
   kahin nahi, kahin transparent ho jaata. Isi bikharav se site
   "jodi hui" lagti hai. Yahan ek hi niyam hai:

     hover  -> gehra
     active -> 1px neeche
     focus  -> 3px ring (sirf keyboard par)
     disabled -> halka + not-allowed

   Navy ki poori seedhi neeche hai, taki hover ka rang andaaze se
   na chuna jaye.
   ================================================================== */

:root {
  --aj-50:  #EEF2FB;
  --aj-100: #DCE4F6;
  --aj-200: #B9C8ED;
  --aj-400: #4B67B8;
  --aj-500: #2947A8;
  --aj-600: #1E3A8A;
  --aj-700: #16296B;
  --aj-800: #101E4E;
  --aj-ink: #101117;
  --aj-line: #E4E9F2;
  --aj-line-strong: #C9D4EA;
  --aj-muted: #5A6473;

  --aj-ring: 0 0 0 3px rgba(30, 58, 138, .30);
  --aj-lift: 0 12px 28px -14px rgba(16, 17, 23, .18);
}

::selection { background: var(--aj-200); color: var(--aj-800); }

/* ---- links ---------------------------------------------------------
   Theme mein link kahin underline, kahin nahi. Ab: body text ke andar
   underline (padhne wale ko dikhe ki link hai), navigation mein nahi. */

a { color: var(--color-primary); transition: color .16s ease; }
a:hover { color: var(--aj-700); }

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--aj-ring);
  border-radius: 6px;
}

p a, .content a, .summernote-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.nav-link, .navbar-nav a, .footer-widget a, .breadcumb-link a { text-decoration: none; }

/* ---- navigation ----------------------------------------------------- */

.navbar-nav .nav-item .nav-link {
  position: relative;
  color: #2b3240;
  transition: color .16s ease;
}

.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-item .nav-link.active {
  color: var(--color-primary);
}

/* active page ke neeche patli lakeer — kahan ho, ye dikhna chahiye */
.navbar-nav .nav-item.active > .nav-link::after,
.navbar-nav .nav-item .nav-link.active::after {
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: -2px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

.dropdown-menu {
  border: 1px solid var(--aj-line);
  border-radius: 10px;
  box-shadow: 0 10px 30px -12px rgba(16, 17, 23, .22);
  padding: 6px;
}

.dropdown-item {
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 14.5px;
  transition: background-color .14s ease, color .14s ease;
}

.dropdown-item:hover, .dropdown-item:focus {
  background: var(--aj-50);
  color: var(--aj-700);
}

.dropdown-item.active, .dropdown-item:active {
  background: var(--color-primary);
  color: #fff;
}

/* ---- form controls --------------------------------------------------
   Sabse zyada nazar-andaaz hone wali cheez. Focus state saaf na ho to
   form bharna takleef ho jaata hai. */

.form-control, .form-select, textarea, input[type="text"],
input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"],
.nice-select, .select2-container--default .select2-selection--single {
  border: 1px solid var(--aj-line);
  border-radius: 8px;
  background: #fff;
  color: var(--aj-ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.form-control:hover, .nice-select:hover,
.select2-container--default .select2-selection--single:hover {
  border-color: var(--aj-line-strong);
}

.form-control:focus, .form-select:focus, textarea:focus,
.nice-select.open,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--color-primary);
  box-shadow: var(--aj-ring);
  outline: none;
}

.form-control::placeholder { color: #9aa3b2; }

.form-control:disabled, .form-control[readonly] {
  background: #f5f7fa;
  color: #8b94a3;
  cursor: not-allowed;
}

label, .form-label {
  font-weight: 550;
  font-size: 14px;
  color: #2b3240;
  margin-bottom: 6px;
}

.is-invalid, .form-control.is-invalid {
  border-color: #D64545;
}

.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(214, 69, 69, .22);
}

.invalid-feedback, .text-danger { color: #C13333; }

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--color-primary);
  width: 17px; height: 17px;
  cursor: pointer;
}

/* ---- tabs / pills ---------------------------------------------------- */

.nav-tabs .nav-link, .nav-pills .nav-link {
  border-radius: 8px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--aj-muted);
  border: 1px solid transparent;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.nav-tabs .nav-link:hover, .nav-pills .nav-link:hover {
  background: var(--aj-50);
  color: var(--aj-700);
}

.nav-tabs .nav-link.active, .nav-pills .nav-link.active,
.nav-link.hover-effect.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ---- pagination ------------------------------------------------------ */

.pagination .page-link {
  border: 1px solid var(--aj-line);
  border-radius: 8px;
  margin: 0 3px;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--aj-ink);
  font-weight: 600;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.pagination .page-link:hover {
  background: var(--aj-50);
  border-color: var(--aj-line-strong);
  color: var(--aj-700);
}

.pagination .page-item.active .page-link {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.pagination .page-item.disabled .page-link {
  color: #b0b7c3;
  background: #f7f9fc;
  cursor: not-allowed;
}

/* ---- icon buttons (wishlist waghairah) ------------------------------- */

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--aj-line);
  background: #fff;
  color: var(--aj-muted);
  transition: background-color .16s ease, color .16s ease,
              border-color .16s ease, transform .12s ease;
}

.btn-icon:hover {
  background: var(--aj-50);
  border-color: var(--aj-line-strong);
  color: var(--color-primary);
}

.btn-icon:active { transform: scale(.94); }

.wishlist-link.active, .wishlist-link.added {
  background: #FDECEC;
  border-color: #F3C2C2;
  color: #D64545;
}

/* ---- tables ---------------------------------------------------------- */

.table > :not(caption) > * > * { padding: 13px 14px; }

.table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--aj-muted);
  background: #f7f9fc;
  border-bottom: 1px solid var(--aj-line);
}

.table tbody tr { transition: background-color .14s ease; }
.table tbody tr:hover { background: var(--aj-50); }
.table td { border-color: #f0f3f8; vertical-align: middle; }

/* ---- badges / status ------------------------------------------------- */

.badge { font-weight: 650; letter-spacing: -.002em; border-radius: 6px; padding: 5px 9px; }
.badge.bg-primary, .badge-primary { background: var(--color-primary) !important; color: #fff; }
.badge.bg-success, .badge-success { background: #E3F4EA !important; color: #1B6B3A !important; }
.badge.bg-warning, .badge-warning { background: #FCF0DA !important; color: #86560A !important; }
.badge.bg-danger,  .badge-danger  { background: #FDECEC !important; color: #B12F2F !important; }
.badge.bg-info,    .badge-info    { background: var(--aj-50) !important; color: var(--aj-700) !important; }

/* ---- alerts ---------------------------------------------------------- */

.alert { border-radius: 10px; border: 1px solid transparent; font-size: 14.5px; }
.alert-success { background: #E3F4EA; border-color: #BEE3CC; color: #1B6B3A; }
.alert-danger  { background: #FDECEC; border-color: #F3C2C2; color: #B12F2F; }
.alert-warning { background: #FCF0DA; border-color: #F0DCAE; color: #86560A; }
.alert-info    { background: var(--aj-50); border-color: var(--aj-100); color: var(--aj-700); }

/* ---- preloader ------------------------------------------------------- */

#preLoader .loader, .request-loader .loader {
  border-top-color: var(--color-primary) !important;
}

/* ---- scrollbar ------------------------------------------------------- */

* { scrollbar-color: #c4ccdb transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: #c4ccdb; border-radius: 8px; border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #a9b3c6; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- disabled -------------------------------------------------------- */

.btn:disabled, .btn.disabled, button:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  a, .btn, .btn-icon, .nav-link, .dropdown-item,
  .form-control, .table tbody tr { transition: none; }
  .btn-icon:active { transform: none; }
}
/* ==== AJONTEC-INTERACTION-END ======================================= */

/* ==== AJONTEC-HEADER-START ==========================================
   Header ka interaction.

   Soch: paanch alag-alag effect lagane ke bajaye EK cheez achhe se.

   Yahan wo cheez hai underline. Hover par baayein se aake bhar jaati
   hai, active page par pehle se bhari rehti hai. Dono ek hi element
   ke do haal hain — isliye hover par lagta hai ki "yahan pahunchne
   wale ho". Ye matlab rakhta hai, sirf sajawat nahi.

   Baaki sab chup — nav mein koi uchhaal, koi zoom, koi shadow nahi.
   ================================================================== */

/* ---- header ka dhaancha ------------------------------------------- */

.header-area .header-bottom {
  border-bottom: 1px solid rgba(16, 17, 23, .07);
  background: #fff;
}

/* scroll par sticky — chipakne par halki chhaya, itni hi ki page
   uske neeche se sarakta hua lage */
.header-area.is-sticky .header-bottom {
  box-shadow: 0 1px 0 rgba(16, 17, 23, .06),
              0 8px 24px -16px rgba(16, 17, 23, .28);
  border-bottom-color: transparent;
}

.header-area.is-sticky .navbar-brand img { height: 38px; max-height: 38px; }

.header-area .navbar-brand img,
.header-area .header-bottom {
  transition: height .2s ease, box-shadow .2s ease,
              padding .2s ease, border-color .2s ease;
}

/* ---- SIGNATURE: nav ka underline ----------------------------------- */

.navbar-nav .nav-item > .nav-link {
  position: relative;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #2b3240;
  font-weight: 550;
  transition: color .16s ease;
}

.navbar-nav .nav-item > .nav-link::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.navbar-nav .nav-item > .nav-link:hover,
.navbar-nav .nav-item > .nav-link.active,
.navbar-nav .nav-item:hover > .nav-link {
  color: var(--color-primary);
}

.navbar-nav .nav-item > .nav-link:hover::after,
.navbar-nav .nav-item > .nav-link.active::after,
.navbar-nav .nav-item:hover > .nav-link::after {
  transform: scaleX(1);
}

/* Pichhle block (interaction.css) mein active wala rule 4 class ka hai
   aur mera 3 ka — isliye wo jeet raha tha aur underline 16px neeche
   khisak jaati thi. Yahan barabar specificity par saaf likh diya. */

.navbar-nav .nav-item.active > .nav-link::after,
.navbar-nav .nav-item > .nav-link.active::after {
  left: 15px;
  right: 15px;
  bottom: 14px;
  transform: scaleX(1);
  transform-origin: left center;
}

/* jaate waqt daayein se sikude — aane aur jaane ka rasta alag ho to
   nazar use follow karti hai */
.navbar-nav .nav-item > .nav-link:not(:hover):not(.active)::after {
  transform-origin: right center;
}

/* ---- "Pages +" ------------------------------------------------------
   Plus text se chipka hua tha. Ab jagah, chhota size, aur menu
   khulte hi 45 degree ghoom kar cross ban jaata hai. */

.navbar-nav .nav-link.toggle i {
  margin-inline-start: 7px;
  font-size: 11px;
  display: inline-block;
  vertical-align: 1px;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.navbar-nav .nav-item:hover > .nav-link.toggle i { transform: rotate(45deg); }

/* ---- submenu -------------------------------------------------------- */

.navbar-nav .menu-dropdown {
  border: 1px solid rgba(16, 17, 23, .08);
  border-radius: 10px;
  box-shadow: 0 12px 32px -14px rgba(16, 17, 23, .26);
  padding: 6px;
  overflow: hidden;
}

.navbar-nav .menu-dropdown .nav-item > .nav-link {
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14.5px;
  font-weight: 500;
  transition: background-color .14s ease, color .14s ease;
}

.navbar-nav .menu-dropdown .nav-item > .nav-link::after { content: none; }

.navbar-nav .menu-dropdown .nav-item > .nav-link:hover {
  background: var(--aj-50, #EEF2FB);
  color: var(--color-primary);
}

/* ---- header ke daayein wale controls -------------------------------- */

.more-option .item { display: flex; align-items: center; }

.more-option .btn-search,
.more-option .language .nice-select {
  border: 1px solid #E4E9F2;
  border-radius: 8px;
  color: #2b3240;
  transition: background-color .16s ease, border-color .16s ease,
              color .16s ease;
}

.more-option .btn-search {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.more-option .btn-search:hover,
.more-option .language .nice-select:hover {
  background: var(--aj-50, #EEF2FB);
  border-color: #C9D4EA;
  color: var(--color-primary);
}

.more-option .btn-search:active { transform: scale(.94); }

/* Seller wala outline button — screenshot mein bahut halka lag raha
   tha, primary ke bagal mein gayab sa. Ab uska apna wazan hai. */

.more-option .btn-outline {
  border: 1.5px solid #C9D4EA;
  color: #1B2333;
  background: #fff;
  font-weight: 650;
}

.more-option .btn-outline:hover,
.more-option .btn-outline.show {
  border-color: var(--color-primary);
  background: var(--aj-50, #EEF2FB);
  color: var(--color-primary);
  box-shadow: none !important;
}

.more-option .dropdown-toggle::after {
  margin-inline-start: 7px;
  transition: transform .18s ease;
}

.more-option .dropdown-toggle.show::after { transform: rotate(180deg); }

/* ---- category strip -------------------------------------------------
   Ye header ka hissa hai, alag patti nahi lagni chahiye. Isliye
   background wahi, upar hairline, aur wahi underline wala idiom. */

.categories-menu {
  background: #fff;
  border-top: 1px solid rgba(16, 17, 23, .06);
  border-bottom: 1px solid rgba(16, 17, 23, .07);
}

.categories-menu .categories > li > a,
.categories-menu .categories a {
  position: relative;
  display: inline-block;
  padding: 14px 4px;
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.004em;
  color: #4a5364;
  transition: color .16s ease;
}

.categories-menu .categories a::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}

.categories-menu .categories a:hover { color: var(--color-primary); }
.categories-menu .categories a:hover::after { transform: scaleX(1); }

.categories-menu .categories a:not(:hover)::after { transform-origin: right center; }

/* left/right teer — pehle nange icon the */
.categories-menu-nav .arrows {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E4E9F2;
  border-radius: 8px;
  background: #fff;
  color: #4a5364;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.categories-menu-nav .arrows:hover {
  background: var(--aj-50, #EEF2FB);
  border-color: #C9D4EA;
  color: var(--color-primary);
}

.categories-menu-nav .arrows:active { transform: scale(.94); }

/* ---- keyboard ------------------------------------------------------- */

.navbar-nav .nav-link:focus-visible,
.categories-menu .categories a:focus-visible,
.more-option .btn-search:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, .30);
  border-radius: 6px;
}

.navbar-nav .nav-link:focus-visible::after,
.categories-menu .categories a:focus-visible::after { transform: scaleX(1); }

/* ---- mobile ---------------------------------------------------------- */

@media (max-width: 991px) {
  .navbar-nav .nav-item > .nav-link { padding-top: 12px; padding-bottom: 12px; }
  .navbar-nav .nav-item > .nav-link::after { content: none; }
  .categories-menu .categories a { padding: 12px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-nav .nav-item > .nav-link::after,
  .categories-menu .categories a::after {
    transition: none;
  }
  .navbar-nav .nav-link.toggle i,
  .more-option .dropdown-toggle::after { transition: none; }
  .more-option .btn-search:active,
  .categories-menu-nav .arrows:active { transform: none; }
}
/* ==== AJONTEC-HEADER-END ============================================ */


/* ==== AJONTEC-CATEGORY-START ========================================
   "Most Popular Categories"

     - ek line mein 6, sab box barabar
     - sab kuchh center mein: icon, naam, button
     - "Show Service" ab asli button hai, text link nahi

   Ye poora block ek saath badalta hai. Installer purana hata kar naya
   lagata hai, isliye do version aapas mein nahi ladte.
   ================================================================== */

/* ---- 1. Ek line mein 6 --------------------------------------------- */

.category-area_v1 .row > .item {
  flex: 0 0 auto;
  width: 16.6666%;              /* 12 / 2 = 6 columns */
  display: flex;
}

.category-area_v1 .row {
  --bs-gutter-x: 18px;
  row-gap: 18px;
}

/* ---- 2. Sab box barabar + sab kuchh center -------------------------
   Card ek vertical stack hai. Naam bachi hui jagah ke beech mein khud
   ko center kar leta hai, isliye ek-line aur do-line dono naam
   santulit dikhte hain. Button hamesha sabse neeche. */

.category-area_v1 .item .card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 0;
  padding: 20px 16px 16px;
}

.category-area_v1 .item .card_details {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

.category-area_v1 .item .card_title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.category-area_v1 .item .card_action {
  margin-top: auto;
  width: 100%;
}

/* ---- 3. Card ka look ------------------------------------------------- */

.category-area_v1 .item .card,
.category-area_v1 .item:nth-child(n) .card {
  background-color: #fff;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease,
              transform .18s ease;
}

.category-area_v1 .item .card:hover {
  border-color: #C9D4EA;
  box-shadow: 0 12px 26px -16px rgba(16, 17, 23, .30);
  transform: translateY(-2px);
}

/* ---- 4. Icon chaukhat -----------------------------------------------
   color-mix ek hi rule mein aathon rang sambhaal leta hai —
   currentColor wahi accent hai jo theme har category ko deta hai. */

.category-area_v1 .item .card_icon {
  --size: 52px;
  width: var(--size);
  height: var(--size);
  margin: 0 auto 14px;
  border-radius: 10px;
  background-color: #F1F4FA;                                   /* purane browser */
  background-color: color-mix(in srgb, currentColor 13%, #fff);
}

.category-area_v1 .item .card_icon img { max-width: 24px; }

.category-area_v1 .item .card_title a {
  color: #101117;
  transition: color .16s ease;
}

/* theme har card ka alag hover rang deta tha — :nth-child(n) sirf
   specificity barabar karne ke liye hai */
.category-area_v1 .item:nth-child(n) .card:hover .card_title,
.category-area_v1 .item:nth-child(n) .card:hover .card_title a {
  color: var(--color-primary) !important;
}

/* ---- 5. BUTTON ------------------------------------------------------
   Pehle ye khaali text link tha — teer ke saath, bina kinare ke.
   Ab poore card ki chaudai ka asli button hai.

   Rest par outline, hover par bhara hua. Card kahin bhi hover karo,
   button bhar jaata hai — isse pata chalta hai ki poora card ek hi
   cheez hai, do alag nahi. */

.category-area_v1 .item .card .btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1.5px solid #DCE3EF;
  border-radius: 8px;
  background: #fff;
  color: #1B2333 !important;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.004em;
  line-height: 1.2;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease;
}

.category-area_v1 .item .card .btn-text i {
  color: inherit !important;
  font-size: 12px;
  transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}

.category-area_v1 .item .card:hover .btn-text,
.category-area_v1 .item .card .btn-text:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff !important;
}

.category-area_v1 .item .card:hover .btn-text i,
.category-area_v1 .item .card .btn-text:hover i {
  color: #fff !important;
  transform: translateX(3px);
}

.category-area_v1 .item .card .btn-text:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, .30);
}

.category-area_v1 .item .card .btn-text:active { transform: translateY(1px); }

/* ---- 6. Responsive ---------------------------------------------------
   6 -> 4 -> 3 -> 2. Ek per row kahin nahi: tiles chhote hain, phone
   par do aaram se aate hain aur aadha scroll bach jaata hai. */

@media (max-width: 1199.98px) {
  .category-area_v1 .row > .item { width: 25%; }        /* 4 */
}

@media (max-width: 991.98px) {
  .category-area_v1 .row > .item { width: 33.3333%; }   /* 3 */
}

@media (max-width: 767.98px) {
  .category-area_v1 .row > .item { width: 50%; }        /* 2 */
  .category-area_v1 .item .card { padding: 16px 12px 12px; }
  .category-area_v1 .item .card_icon { --size: 46px; margin-bottom: 12px; }
  .category-area_v1 .item .card_title { font-size: 14.5px; margin-bottom: 12px; }
}

@media (max-width: 400px) {
  .category-area_v1 .row { --bs-gutter-x: 12px; row-gap: 12px; }
  .category-area_v1 .item .card { padding: 14px 10px 10px; }
  .category-area_v1 .item .card_icon { --size: 42px; margin-bottom: 10px; }
  .category-area_v1 .item .card .btn-text {
    font-size: 12.5px; min-height: 38px; padding: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-area_v1 .item .card,
  .category-area_v1 .item .card .btn-text,
  .category-area_v1 .item .card .btn-text i { transition: none; }
  .category-area_v1 .item .card:hover { transform: none; }
  .category-area_v1 .item .card:hover .btn-text i { transform: none; }
  .category-area_v1 .item .card .btn-text:active { transform: none; }
}
/* ==== AJONTEC-CATEGORY-END ========================================== */



/* ==== AJONTEC-PARTNER-START =========================================
   Partner patti.

   Logo apne ASLI rang mein dikhte hain. Koi grayscale, koi
   brightness, koi opacity, koi shadow — kuch nahi. Jo logo file
   mein hai, wahi screen par.

   Iska ek natija hai: hover par rang badalne wala purana ishaara
   ab nahi ho sakta (rang to pehle se poora hai). Isliye hover ka
   ishaara logo ke PEECHHE se aata hai — ek halki plate ubhar aati
   hai aur logo 2px upar uth jaata hai. Logo khud bilkul waisa ka
   waisa rehta hai.

   Yahi tareeka sahi bhi hai: asli partner ke logo ka rang badalna
   aksar unki brand guideline ke khilaaf hota hai.
   ================================================================== */

/* ---- padding ---------------------------------------------------------
   Logo strip ek patli patti honi chahiye, apna poora section nahi. */

.sponsor-area {
  padding-top: clamp(22px, 2.4vw, 34px) !important;
  padding-bottom: clamp(18px, 2vw, 28px) !important;
  border-top: 1px solid rgba(16, 17, 23, .06);
  border-bottom: 1px solid rgba(16, 17, 23, .06);
}

/* patti ke turant baad wala section bhi utna door na ho */
.sponsor-area + section {
  padding-top: clamp(34px, 4vw, 64px) !important;
}

/* ---- marquee --------------------------------------------------------- */

.sponsor-slider.aj-marquee {
  overflow: hidden;
  position: relative;
}

/* Kinare par koi fade nahi — tumne saaf kaha tha, koi shade nahi.
   Patti seedhi katti hai. Wapas chahiye to is comment ke neeche
   wale block ko khol lena.

   .sponsor-slider.aj-marquee::before,
   .sponsor-slider.aj-marquee::after {
     content: ""; position: absolute; top: 0; bottom: 0;
     width: 32px; z-index: 2; pointer-events: none;
   }
   .sponsor-slider.aj-marquee::before { left: 0;
     background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
   .sponsor-slider.aj-marquee::after { right: 0;
     background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
*/

.sponsor-slider.aj-marquee .swiper-wrapper {
  display: flex;
  width: max-content;
  transform: none;
  transition: none;
  animation-name: aj-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* duration JS set karta hai — slide ki ginti ke hisaab se */
}

@keyframes aj-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* hover par ruk jaye — logo padhne ka mauka mile */
.sponsor-slider.aj-marquee:hover .swiper-wrapper {
  animation-play-state: paused;
}

.sponsor-slider.aj-marquee .swiper-slide {
  flex: 0 0 auto;
  width: var(--aj-slide-w, 20%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

/* ---- logo ------------------------------------------------------------

   Rang par koi filter nahi. opacity 1. Bas.

   Hover ka ishaara peechhe se aata hai: ek halki plate aur 2px ki
   uthaan. Shadow jaan-boojh kar nahi — tumne mana kiya tha, aur
   waise bhi logo patti par shadow bhaari lagta hai.

   Plate poore link par hai, sirf image par nahi — isliye logo ke
   aas-paas ki jagah par cursor le jaao tab bhi hover mehsoos hota
   hai. Chhoti si baat hai, par isi se "click ho sakta hai" wala
   ehsaas aata hai.
*/

.sponsor-area .sponsor-img,
.sponsor-slider .item-single {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.sponsor-slider .item-single > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}

.sponsor-slider .item-single > a:hover {
  background: #F2F6FC;
  transform: translateY(-2px);
}

.sponsor-slider .item-single > a:active { transform: translateY(0); }

/* .sponsor-area img bhi selector mein hai kyunki pichhle HOME block
   mein usi par grayscale + opacity .55 pada hai. Order se to hum
   waise bhi jeetenge, par barabar ka selector likh dena zyada
   bharosemand hai — kal koi block ka kram badal de to bhi na tootey. */
.sponsor-area img,
.sponsor-area .sponsor-img img,
.sponsor-slider img {
  max-height: 34px;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.sponsor-slider .item-single > a:focus-visible {
  outline: none;
  background: #F2F6FC;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, .30);
}

@media (max-width: 767px) {
  .sponsor-area .sponsor-img img,
  .sponsor-slider img { max-height: 25px; }
  .sponsor-slider .item-single > a { padding: 10px 10px; }
}

/* ---- reduced motion ---------------------------------------------------
   Jinhe chalti hui cheezon se pareshani hoti hai unke liye patti ruk
   jaati hai aur seedhi list ban jaati hai. Setting OS se aati hai. */

@media (prefers-reduced-motion: reduce) {
  .sponsor-slider.aj-marquee .swiper-wrapper {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 0;
  }
  .sponsor-slider.aj-marquee .swiper-slide { width: 20%; }
}
/* ==== AJONTEC-PARTNER-END =========================================== */

/* ==== AJONTEC-SERVICE-START =========================================
   "Top Featured Services"

     - seller wali patti hataayi (jo overlap ho rahi thi)
     - wishlist ka dil thumbnail ke kone par
     - ek line mein 5, sab center
   ================================================================== */

/* ---- 1. Seller patti hatao ------------------------------------------

   Screenshot mein username aur naam ek doosre par chadh rahe the.
   Wajah: dono span ek hi div mein bina line-height ke the, aur
   card ki chaudai kam padi to overlap ho gaya.

   Hata rahe hain, mita nahi rahe — display:none hai. Kabhi wapas
   chahiye to is ek line ko hata dena.

   Dhyan rakhna: marketplace par seller ka naam dikhna aam baat hai.
   Agar aage jaakar tum sellers ko aage lana chahoge to ye wapas
   laani padegi (theek line-height ke saath). */

.service-area .service_default .author { display: none; }

/* ---- 2. Wishlist ka dil ---------------------------------------------
   Ab .authors ke andar akela bacha tha. Use thumbnail ke upar-daayein
   kone par bhej diya — product card ka yahi aam tareeka hai, aur
   card mein ek poori line ki jagah bach jaati hai. */

.service-area .service_default { position: relative; }

.service-area .service_default .authors {
  margin: 0 !important;
  min-height: 0;
  padding: 0;
}

.service-area .service_default .wishlist-link {
  position: absolute;
  top: 24px;
  inset-inline-end: 24px;
  z-index: 3;
  width: 34px;
  height: 34px;
  min-height: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(16, 17, 23, .08);
  backdrop-filter: blur(4px);
}

.service-area .service_default .wishlist-link:hover {
  background: #fff;
  border-color: #C9D4EA;
}

/* ---- 3. Ek line mein 5 -----------------------------------------------
   Selector jaan-boojh kar poora likha hai (col-xl-3 col-lg-4 col-sm-6)
   taki is section ke alawa kahin na lage. */

.service-area .row > .col-xl-3.col-lg-4.col-sm-6 {
  flex: 0 0 auto;
  width: 20%;
}

/* Adhoori row beech mein rahe, baayein chipki hui nahi.
   Screenshot mein ek hi card tha aur wo kinare par pada tha.

   Pehle :has() likha tha, phir markup dekha to pata chala ki
   .tab-pane ke andar do row hain — ek .text-center wali (title ke
   liye) aur ek cards wali. Use seedha naam se pakad lena zyada
   bharosemand hai, aur purane browser mein bhi chalta hai. */
.service-area .tab-pane > .row:not(.text-center) {
  justify-content: center;
}

/* ---- 4. Card ka andar ka hissa center ------------------------------- */

.service-area .service_default {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease,
              transform .18s ease;
}

.service-area .service_default:hover {
  border-color: #C9D4EA;
  box-shadow: 0 12px 28px -16px rgba(16, 17, 23, .28);
  transform: translateY(-2px);
}

.service-area .service_default .service_details {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.service-area .service_title {
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.012em;
  text-align: center;
}

.service-area .service_title a { color: #101117; }

.service-area .service_default:hover .service_title a {
  color: var(--color-primary);
}

/* rating beech mein */
.service-area .service_default .ratings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* price row — pehle label baayein, keemat daayein thi.
   Ab dono ek hi line mein beech mein. */
.service-area .service_bottom-info {
  margin-top: auto !important;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  text-align: center;
}

.service-area .service_bottom-info > span:first-child {
  font-size: 13px;
  color: #5A6473;
}

.service-area .service_bottom-info .font-medium {
  font-weight: 700;
  color: #101117;
}

.service-area .service_bottom-info del {
  font-weight: 500;
  color: #98A1B0;
  margin-inline-start: 5px;
}

/* ---- 5. Tab buttons -------------------------------------------------- */

.service-area .nav-link.btn-md {
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #E4E9F2;
  background: #fff;
}

.service-area .nav-link.btn-md:hover {
  border-color: #C9D4EA;
  background: #F2F6FC;
  color: var(--color-primary);
}

.service-area .nav-link.btn-md.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ---- 6. Responsive ----------------------------------------------------
   5 -> 4 -> 3 -> 2 -> 1.

   Category tiles ke ulat, yahan har card mein image, title, rating
   aur price hai. Isliye sabse chhoti screen par ek hi card rakha
   hai — do rakhne par title do-teen line mein toot jaata aur price
   dabne lagti. */

@media (max-width: 1399.98px) {
  .service-area .row > .col-xl-3.col-lg-4.col-sm-6 { width: 25%; }   /* 4 */
}

@media (max-width: 1199.98px) {
  .service-area .row > .col-xl-3.col-lg-4.col-sm-6 { width: 33.3333%; } /* 3 */
}

@media (max-width: 991.98px) {
  .service-area .row > .col-xl-3.col-lg-4.col-sm-6 { width: 50%; }   /* 2 */
}

@media (max-width: 575.98px) {
  .service-area .row > .col-xl-3.col-lg-4.col-sm-6 { width: 100%; }  /* 1 */
  .service-area .service_default .wishlist-link { top: 20px; inset-inline-end: 20px; }
  .service-area .service_title { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .service-area .service_default { transition: none; }
  .service-area .service_default:hover { transform: none; }
}
/* ==== AJONTEC-SERVICE-END =========================================== */



/* ==== AJONTEC-TESTIMONIAL-START =====================================
   "What Our Client Say"

   Card ka naya kram — upar se neeche:

        [ photo ]
         Naam
         Ohda
        ─────────
        Message

   Blade file mein DOM ka kram ulta hai (pehle message, phir photo).
   Use badalne ke liye blade chhedni padti. Yahan flexbox ka `order`
   use kiya hai — dikhne ka kram badal jaata hai, HTML waisa ka waisa
   rehta hai. Screen reader ko bhi asli kram hi milta hai.
   ================================================================== */

/* Section poori chaudai par — theme ne ise aadhe column mein rakha
   tha, jahan 5 card aa hi nahi sakte. */

.testimonial-area .row { flex-direction: column; }

.testimonial-area .row > .col-lg-6 {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}

.testimonial-area .content-title {
  text-align: center;
  margin-bottom: 38px !important;
}

.testimonial-area .content-title .title { letter-spacing: -0.026em; }

/* laptop wali photo — poori chaudai par aadhi screen kha jaati thi
   aur kehti kuch nahi thi. Wapas chahiye to ye line hata dena. */
.testimonial-area .testimonial-image { display: none; }

/* ---- sab card barabar -----------------------------------------------
   Pichhli baar bina !important likha tha aur card phir bhi alag-alag
   oonchai ke rahe. Swiper ki apni CSS slide par height:100% lagati
   hai aur wo beech mein aa jaati thi.

   Yahan teeno cheezein force ki hain — ye woh jagah hai jahan
   !important sahi hai, kyunki hum vendor CSS se lad rahe hain, apni
   se nahi. */

.testimonial-area .swiper,
.testimonial-area .testimonial-slider { height: auto !important; }

.testimonial-area .swiper-wrapper {
  align-items: stretch !important;
  height: auto !important;
}

.testimonial-area .swiper-slide {
  height: auto !important;
  display: flex !important;
  align-self: stretch !important;
}

/* ---- card ------------------------------------------------------------ */

.testimonial-area .slider-item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 20px 24px;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease,
              transform .18s ease;
}

.testimonial-area .slider-item:hover {
  border-color: #C9D4EA;
  box-shadow: 0 12px 28px -16px rgba(16, 17, 23, .28);
  transform: translateY(-2px);
}

/* ---- kram badlo ------------------------------------------------------ */

.testimonial-area .item-bottom { order: 1; }   /* photo + naam pehle */
.testimonial-area .quote       { order: 2; }   /* message baad mein */

.testimonial-area .item-bottom {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 0 18px;
  margin: 0 0 18px;
  border-top: 0;
  border-bottom: 1px solid #EEF1F6;
}

.testimonial-area .client-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.testimonial-area .client-img {
  width: 62px;
  height: 62px;
  margin: 0 0 12px;
  flex: 0 0 auto;
}

.testimonial-area .client-img .lazy-container {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  background: #EEF2FB;
}

.testimonial-area .client-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-area .client-info .content { width: 100%; }

.testimonial-area .client-info .name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #101117;
  margin-bottom: 3px !important;
}

.testimonial-area .client-info .designation {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: #6B7484;
}

/* ---- message --------------------------------------------------------- */

/* Theme ne .quote par "border-bottom: 1px dashed" aur 20px padding
   lagayi hai. Kram badalne se .quote sabse neeche aa gaya, isliye wo
   dashed lakeer card ke pendhe mein latak rahi thi — screenshot mein
   wahi dikh raha tha. Yahan saaf kar diya. */
.testimonial-area .slider-item .quote {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: 0;
  border-bottom: 0;
  border: 0;
}

.testimonial-area .slider-item .quote .text {
  font-size: 14.5px !important;
  line-height: 1.65;
  color: #3A4252;
  margin: 0;
}

/* Bhoot jaise quote ke nishaan text ke peechhe se jhaank rahe the —
   screenshot mein wahi gandagi dikh rahi thi. Hata diye. */
.testimonial-area .item-bottom .icon,
.testimonial-area .slider-item .icon { display: none; }

/* ---- rang -------------------------------------------------------------

   "Colour full" ka matlab bhadkeela nahi. Yahan rang teen jagah aaya
   hai, aur teeno ka ek kaam hai:

     1. Section ka halka navy background — safed card ubhar kar aate
        hain. Pehle safed par safed tha, isliye card sapaat lagte the.
     2. Avatar ke charon taraf navy halka ring — nazar seedha chehre
        par jaati hai.
     3. Message ke upar ek chhota navy quote nishaan — batata hai ki
        ye kisi ki kahi hui baat hai, bina "quote" likhe.

   Isse zyada rang daalne par ye review kam aur poster zyada lagne
   lagta. */

.testimonial-area {
  background: #F4F7FD;
}

.testimonial-area .client-img .lazy-container {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(30, 58, 138, .16);
}

.testimonial-area .slider-item:hover .client-img .lazy-container {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(30, 58, 138, .38);
}

.testimonial-area .client-info .designation {
  color: #4B67B8;
  font-weight: 550;
}

/* quote nishaan — message se theek pehle, beech mein */
.testimonial-area .slider-item .quote::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 40px;
  line-height: 1;
  color: rgba(30, 58, 138, .20);
  pointer-events: none;
}

.testimonial-area .slider-item .quote {
  position: relative;
  padding-top: 22px !important;
}

/* hover par upar patli rangeen lakeer */
.testimonial-area .slider-item {
  position: relative;
  overflow: hidden;
}

.testimonial-area .slider-item::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1E3A8A, #4B67B8);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.testimonial-area .slider-item:hover::after { transform: scaleX(1); }

/* ---- pagination ------------------------------------------------------ */

.testimonial-area .swiper-pagination {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 28px;
}

.testimonial-area .swiper-pagination-bullet {
  width: 7px; height: 7px;
  background: #C6CEDD;
  opacity: 1;
  border-radius: 99px;
  transition: width .2s ease, background-color .2s ease;
}

.testimonial-area .swiper-pagination-bullet-active {
  width: 22px;
  background: var(--color-primary);
}

/* ---- responsive ------------------------------------------------------ */

@media (max-width: 767px) {
  .testimonial-area .slider-item { padding: 22px 16px 20px; }
  .testimonial-area .client-img,
  .testimonial-area .client-img .lazy-container { width: 54px; height: 54px; }
  .testimonial-area .content-title { margin-bottom: 28px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-area .slider-item { transition: none; }
  .testimonial-area .slider-item:hover { transform: none; }
}
/* ==== AJONTEC-TESTIMONIAL-END ======================================= */


/* ==== AJONTEC-SERVICEPAGE-START =====================================
   /services listing page

     - seller wali patti hataayi
     - wishlist ka dil thumbnail ke kone par
     - ek line mein 4, sab box barabar, sab center

   Scope .service-gig-area par hai. Filter lagane par cards AJAX se
   badalte hain (service-section.blade.php), lekin wo bhi isi
   wrapper ke andar aate hain — isliye ek hi scope dono ko dhak leta
   hai.

   Homepage wala block (AJONTEC-SERVICE) alag hai aur .service-area
   par scoped hai. Do alag block isliye rakhe hain ki ek page ka
   badlav doosre ko na chhue.
   ================================================================== */

/* ---- 1. Seller patti ------------------------------------------------
   Wahi cheez jo homepage par thi — username aur naam ek doosre par
   chadh rahe the. display:none hai, mitaya nahi. */

.service-gig-area .service_default .author { display: none; }

/* ---- 2. Wishlist ka dil ---------------------------------------------- */

.service-gig-area .service_default { position: relative; }

.service-gig-area .service_default .authors {
  margin: 0 !important;
  min-height: 0;
  padding: 0;
}

.service-gig-area .service_default .wishlist-link {
  position: absolute;
  top: 24px;
  inset-inline-end: 24px;
  z-index: 3;
  width: 34px;
  height: 34px;
  min-height: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(16, 17, 23, .08);
  backdrop-filter: blur(4px);
}

.service-gig-area .service_default .wishlist-link:hover {
  background: #fff;
  border-color: #C9D4EA;
}

/* ---- 3. Ek line mein 4 ----------------------------------------------- */

.service-gig-area .row.sss > .col-lg-4.col-md-6 {
  flex: 0 0 auto;
  width: 25%;
  display: flex;
}

/* ---- 4. Sab box barabar ----------------------------------------------
   Row ko stretch par rakha hai aur card ko poori column bharne diya.
   Price hamesha sabse neeche — margin-top:auto se. */

.service-gig-area .row.sss {
  align-items: stretch;
}

.service-gig-area .service_default {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: 0 !important;
  border: 1px solid #E4E9F2 !important;
  border-radius: 12px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease,
              transform .18s ease;
}

/* card ke beech ki jagah row se aayegi, card ke margin se nahi —
   warna aakhri row ke neeche extra khaali jagah reh jaati hai */
.service-gig-area .row.sss { row-gap: 24px; }

.service-gig-area .service_default:hover {
  border-color: #C9D4EA !important;
  box-shadow: 0 12px 28px -16px rgba(16, 17, 23, .28);
  transform: translateY(-2px);
}

.service-gig-area .service_default .service_details {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---- 5. Andar ka hissa center ---------------------------------------- */

.service-gig-area .service_title {
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.012em;
  text-align: center;
}

.service-gig-area .service_title a { color: #101117; }

.service-gig-area .service_default:hover .service_title a {
  color: var(--color-primary);
}

.service-gig-area .service_default .ratings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.service-gig-area .service_bottom-info {
  margin-top: auto !important;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  text-align: center;
}

.service-gig-area .service_bottom-info > span:first-child {
  font-size: 13px;
  color: #5A6473;
}

.service-gig-area .service_bottom-info .font-medium {
  font-weight: 700;
  color: #101117;
}

.service-gig-area .service_bottom-info del {
  font-weight: 500;
  color: #98A1B0;
  margin-inline-start: 5px;
}

/* ---- 6. Responsive ----------------------------------------------------
   Sidebar 1200px se neeche chhup jaata hai, isliye wahan cards ko
   poori chaudai mil jaati hai aur 3 aaram se aate hain. */

@media (max-width: 1399.98px) {
  .service-gig-area .row.sss > .col-lg-4.col-md-6 { width: 33.3333%; }  /* 3 */
}

@media (max-width: 991.98px) {
  .service-gig-area .row.sss > .col-lg-4.col-md-6 { width: 50%; }       /* 2 */
}

@media (max-width: 575.98px) {
  .service-gig-area .row.sss > .col-lg-4.col-md-6 { width: 100%; }      /* 1 */
  .service-gig-area .service_default .wishlist-link { top: 20px; inset-inline-end: 20px; }
  .service-gig-area .service_title { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .service-gig-area .service_default { transition: none; }
  .service-gig-area .service_default:hover { transform: none; }
}
/* ==== AJONTEC-SERVICEPAGE-END ======================================= */

/* ==== AJONTEC-SERVICEPAGE2-START ====================================
   Page ka baaki hissa — sidebar, top bar, card ki saans.

   Screenshot mein cards to theek ho gaye the, lekin sabse kamzor
   hissa sidebar tha: dotted lakeerein, chevron, aur har heading ke
   neeche do chhoti dash. Wo teeno purane template ki nishaani hain.
   ================================================================== */

/* ---- sidebar ka har box ----------------------------------------------
   Pehle har widget alag dikhta tha. Ab sab ek jaise card hain —
   wahi border, wahi radius, wahi padding jo services cards par hai.
   Ek page par do alag card language nahi honi chahiye. */

.service-gig-area .widget {
  background: #fff;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  padding: 20px 18px;
  margin-bottom: 18px !important;
}

.service-gig-area .widget-title {
  position: relative;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: #101117;
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid #EEF1F6;
}

/* heading ke neeche wali do dash — theme ka ::before/::after.
   Border-bottom ne unki jagah le li hai. */
.service-gig-area .widget-title::before,
.service-gig-area .widget-title::after { content: none !important; }

/* ---- category list ---------------------------------------------------
   Dotted lakeer hata di. Ab har link ek hover-able patti hai —
   click karne laayak cheez click karne laayak dikhni chahiye. */

.service-gig-area .widget-link li {
  border: 0 !important;
  margin: 0;
}

.service-gig-area .widget-link li > a {
  display: block;
  padding: 8px 10px;
  margin: 1px 0;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  color: #4A5364;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.service-gig-area .widget-link li > a:hover {
  background: #F2F6FC;
  color: var(--color-primary);
}

.service-gig-area .widget-link li > a.active,
.service-gig-area .widget-link li.active > a {
  background: #EEF2FB;
  color: var(--color-primary);
  font-weight: 650;
}

/* chevron chhota aur halka — pehle text se chipka hua kaala tha */
.service-gig-area .widget-link li > a > i,
.service-gig-area .widget-link li > a::before {
  font-size: 10px;
  opacity: .45;
  margin-inline-end: 6px;
}

.service-gig-area .widget-subcategories {
  padding-inline-start: 12px;
  margin-top: 2px;
  border-inline-start: 1px solid #EEF1F6;
}

.service-gig-area .widget-subcategories li > a { font-size: 13.5px; }

/* "Show More +" ek link tha, ab button jaisa */
.service-gig-area .widget .toggle-btn,
.service-gig-area .widget-categories > a:last-child {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 650;
  color: var(--color-primary);
}

/* ---- sidebar ke control ---------------------------------------------- */

.service-gig-area .widget .nice-select,
.service-gig-area .widget select,
.service-gig-area .widget .form-control {
  width: 100%;
  min-height: 42px;
  border: 1px solid #E4E9F2;
  border-radius: 8px;
  font-size: 14px;
}

.service-gig-area .widget .form-check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  margin: 0;
  border-radius: 7px;
  min-height: 36px;
  transition: background-color .15s ease;
}

.service-gig-area .widget .form-check:hover { background: #F7F9FD; }

.service-gig-area .widget .form-check-input {
  margin: 0;
  float: none;
  flex: 0 0 auto;
}

.service-gig-area .widget .form-check-label {
  font-size: 14px;
  font-weight: 500;
  color: #3A4252;
  margin: 0;
  cursor: pointer;
}

/* ---- top bar (search + sort) -----------------------------------------
   Dono ki oonchai alag thi, isliye ek rekha par nahi baithte the. */

.service-gig-area .search-form .form-control,
.service-gig-area .nice-select {
  min-height: 46px;
  border: 1px solid #E4E9F2;
  border-radius: 9px;
  font-size: 14.5px;
}

.service-gig-area .search-form .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, .22);
}

/* ---- card ki saans ----------------------------------------------------
   Padding 15px se 16/18 kiya aur thumbnail ko goal kinare diye.
   Chhota badlav hai, lekin cards ab dabbe kam aur cheezein zyada
   lagte hain. */

.service-gig-area .service_default { padding: 16px 16px 18px !important; }

.service-gig-area .service_img,
.service-gig-area .service_img .lazy-container {
  border-radius: 10px;
  overflow: hidden;
}

.service-gig-area .service_details { margin-top: 16px !important; }

.service-gig-area .service_title { margin-bottom: 12px !important; }

.service-gig-area .service_bottom-info {
  padding-top: 14px !important;
  border-top: 1px solid #EEF1F6;
}

/* strike-through purani keemat halki — nayi keemat par nazar jaani
   chahiye, purani par nahi */
.service-gig-area .service_bottom-info del {
  font-size: 13px;
  opacity: .75;
}

@media (max-width: 991.98px) {
  .service-gig-area .widget { padding: 16px 14px; }
}
/* ==== AJONTEC-SERVICEPAGE2-END ====================================== */

/* ==== AJONTEC-BLOG-START ============================================
   Blog listing + post details

   Ek faisla pehle bata deta hoon:

   Blog ke cards theme mein .col-lg-8 ke andar the — yaani 2/3
   chaudai, aur baaki 1/3 sidebar. Us 2/3 mein 5 card daalne par
   har card ~180px ka reh jaata, jisme na image dikhti na title
   poora aata.

   Isliye main column ko poori chaudai de di hai aur sidebar neeche
   chala gaya hai. 5 card tabhi kaam karte hain jab poori chaudai
   mile.

   Sidebar wapas bagal mein chahiye (aur 3 card per row) to neeche
   "TEEN CARD WAPAS" wala hissa padho.
   ================================================================== */

/* NOTE: yahan pehle `.blog-area { padding }` likha tha — galat tha.
   Homepage ke blog section ki class bhi wahi hai (.blog-area
   .blog-area_v1), to wo rule homepage ko bhi badal deta.

   Padding waise bhi HOME block se fluid ho chuki hai (pt-100 /
   pb-60), isliye yahan zaroorat hi nahi. Hata diya.

   Neeche ke saare selector .blog-post-wrapper ya
   > .container > .row > .col-lg-8 se guzarte hain — ye dono sirf
   listing page par hain, homepage par nahi. */

/* ---- poori chaudai --------------------------------------------------- */

.blog-area > .container > .row > .col-lg-8,
.blog-area > .container > .row > .col-lg-4 {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}

.blog-area > .container > .row > .col-lg-4 { margin-top: 34px; }

/* ---- ek line mein 5 -------------------------------------------------- */

.blog-area .blog-post-wrapper > .row {
  --bs-gutter-x: 20px;
  row-gap: 24px;
  align-items: stretch;
}

.blog-area .blog-post-wrapper > .row > .col-md-6 {
  flex: 0 0 auto;
  width: 20%;
  display: flex;
}

/* ---- card ------------------------------------------------------------
   Theme mein image aur content alag-alag dabbe the — content par
   apna border tha, image par nahi. Ab ek hi card hai. */

.blog-area .blog-post-wrapper article.card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease,
              transform .18s ease;
}

.blog-area .blog-post-wrapper article.card:hover {
  border-color: #C9D4EA;
  box-shadow: 0 12px 28px -16px rgba(16, 17, 23, .28);
  transform: translateY(-2px);
}

.blog-area .blog-post-wrapper .card_img {
  border-radius: 0;
  overflow: hidden;
}

.blog-area .blog-post-wrapper .card_img img {
  width: 100%;
  transition: transform .3s ease;
}

.blog-area .blog-post-wrapper article.card:hover .card_img img {
  transform: scale(1.03);
}

/* content ka apna border hata do — ab card ka border hi kaafi hai */
.blog-area .blog-post-wrapper .card_content {
  border: 0 !important;
  padding: 16px 15px 18px !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.blog-area .blog-post-wrapper .card_title {
  font-size: 14.5px !important;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.012em;
  margin-bottom: 10px !important;
}

.blog-area .blog-post-wrapper .card_title a { color: #101117; }

.blog-area .blog-post-wrapper article.card:hover .card_title a {
  color: var(--color-primary);
}

.blog-area .blog-post-wrapper .card_content p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #5A6473;
}

/* date / category wali patti — image ke upar tairti hui */
.blog-area .blog-post-wrapper .card_list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 12px 15px 0;
}

.blog-area .blog-post-wrapper .card_list li {
  font-size: 11.5px;
  font-weight: 600;
  color: #4B67B8;
  background: #F2F6FC;
  border-radius: 6px;
  padding: 4px 9px;
  line-height: 1.4;
}

.blog-area .blog-post-wrapper .card_list li a { color: inherit; }
.blog-area .blog-post-wrapper .card_list li i { margin-inline-end: 4px; opacity: .7; }

/* "Read More" neeche chipka rahe */
.blog-area .blog-post-wrapper .card_content .btn-text,
.blog-area .blog-post-wrapper .card_content > a:last-child {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  font-weight: 650;
}

/* ---- sidebar (ab neeche) ---------------------------------------------
   Poori chaudai par sidebar ke widget ek line mein aa jaate hain. */

.blog-area .col-lg-4 .widget,
.blog-area .blog-sidebar .widget {
  background: #fff;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  padding: 20px 18px;
}

@media (min-width: 768px) {
  .blog-area .col-lg-4 .blog-sidebar,
  .blog-area .col-lg-4 > div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    align-items: start;
  }
}

/* ==== post details ================================================== */

.blog-details-section {
  padding-top: clamp(34px, 4.6vw, 76px) !important;
  padding-bottom: clamp(30px, 4vw, 60px) !important;
  background: #FAFBFD;
}

.blog-details-section .blog-details-wrapper {
  background: #fff;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  padding: clamp(18px, 2.4vw, 34px);
}

/* Padhne ke liye lambai 68 akshar tak — isse zyada lambi line par
   aankh agli line dhoondhne mein thak jaati hai. Ye typography ka
   sabse purana niyam hai aur blog par sabse zyada kaam ka. */
.blog-details-section .blog-post-item p,
.blog-details-section .blog-post-item li {
  font-size: 16px;
  line-height: 1.78;
  color: #333B49;
  max-width: 68ch;
}

.blog-details-section .blog-post-item h2,
.blog-details-section .blog-post-item h3,
.blog-details-section .blog-post-item h4 {
  letter-spacing: -0.022em;
  margin-top: 1.6em;
  margin-bottom: .5em;
}

.blog-details-section .blog-post-item img {
  border-radius: 12px;
  margin: 8px 0 20px;
}

.blog-details-section .blog-post-item blockquote {
  border-inline-start: 3px solid var(--color-primary);
  background: #F5F8FD;
  border-radius: 0 10px 10px 0;
  padding: 16px 18px;
  margin: 22px 0;
  font-size: 16px;
  line-height: 1.7;
  color: #2B3240;
}

.blog-details-section .blog-share {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #EEF1F6;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.blog-details-section .blog-share a {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E4E9F2;
  border-radius: 8px;
  color: #4A5364;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.blog-details-section .blog-share a:hover {
  background: #F2F6FC;
  border-color: #C9D4EA;
  color: var(--color-primary);
}

/* details page par sidebar bagal mein hi theek hai — wahan sirf ek
   lekh hai, grid nahi */
@media (min-width: 992px) {
  .blog-details-section .col-lg-4 > div {
    position: sticky;
    top: 96px;
  }
}

.blog-details-section .widget {
  background: #fff;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  padding: 20px 18px;
  margin-bottom: 18px;
}

.blog-details-section .widget-title,
.blog-area .widget-title {
  font-size: 14px;
  font-weight: 700;
  color: #101117;
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid #EEF1F6;
}

.blog-details-section .widget-title::before,
.blog-details-section .widget-title::after,
.blog-area .widget-title::before,
.blog-area .widget-title::after { content: none !important; }

/* ---- responsive ------------------------------------------------------ */

@media (max-width: 1399.98px) {
  .blog-area .blog-post-wrapper > .row > .col-md-6 { width: 25%; }   /* 4 */
}

@media (max-width: 1199.98px) {
  .blog-area .blog-post-wrapper > .row > .col-md-6 { width: 33.3333%; } /* 3 */
}

@media (max-width: 767.98px) {
  .blog-area .blog-post-wrapper > .row > .col-md-6 { width: 50%; }   /* 2 */
  .blog-area .blog-post-wrapper .card_content { padding: 14px 12px 16px !important; }
}

@media (max-width: 479.98px) {
  .blog-area .blog-post-wrapper > .row > .col-md-6 { width: 100%; }  /* 1 */
}

@media (prefers-reduced-motion: reduce) {
  .blog-area .blog-post-wrapper article.card,
  .blog-area .blog-post-wrapper .card_img img { transition: none; }
  .blog-area .blog-post-wrapper article.card:hover { transform: none; }
  .blog-area .blog-post-wrapper article.card:hover .card_img img { transform: none; }
}

/* =====================================================================
   TEEN CARD WAPAS (sidebar bagal mein)

   Neeche wali char line se comment hata do:

   .blog-area > .container > .row > .col-lg-8 { width: 66.6666%; }
   .blog-area > .container > .row > .col-lg-4 { width: 33.3333%; margin-top: 0; }
   .blog-area .blog-post-wrapper > .row > .col-md-6 { width: 50%; }
   .blog-area .col-lg-4 > div { display: block; }
   ================================================================== */
/* ==== AJONTEC-BLOG-END ============================================== */



/* ==== AJONTEC-PAGES-START ===========================================
   Pricing + Contact + About  —  SAAVDHAAN VERSION

   Pichhla version is page ko tod raha tha. Do rule khatarnak the:

     .pricing-area .row > [class*="col-"] { display: flex; }
     .pricing-area .card { height: 100%; }

   Pehla rule .row ke HAR column par lag raha tha — un par bhi jinme
   card hai hi nahi (tabs wala col-12). Column flex-container ban
   gaya, uski chaudai gir gayi, aur andar ka sab kuchh nichud gaya.
   Screenshot mein "What's Include d" isi wajah se toot kar likha
   aa raha tha.

   Sabak: kabhi bhi grid ke column par blanket display:flex mat
   lagao. Sirf usi column par lagao jisme wo card hai.

   Ab yahan sirf woh cheezein hain jo dhaanche ko haath nahi
   lagatin — rang, font, kinaara, spacing. Grid theme ka apna
   chalne diya hai.
   ================================================================== */

/* ===================== PRICING ====================================== */

.pricing-area { background: #FAFBFD; }

/* monthly / yearly / lifetime — segmented control.
   display badla hai, lekin sirf .nav-tabs par, column par nahi. */
.pricing-area .tabs-navigation-2 .nav-tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 5px;
  background: #EDF1F8;
  border: 0;
  border-radius: 10px;
}

.pricing-area .tabs-navigation-2 .nav-tabs .nav-item { flex: 0 0 auto; }

.pricing-area .tabs-navigation-2 .nav-link {
  white-space: nowrap;
  border: 0 !important;
  border-radius: 7px;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 650;
  color: #5A6473 !important;
  background: transparent !important;
}

/* BUG THA: theme ka "fancyHover" JS ek navy pill banata hai jo
   chuni hui tab ke UPAR baithti hai. Maine active tab ka background
   safed kar diya, lekin wo navy pill uske upar aa gayi aur label
   dhak gaya — screenshot mein "Monthly" ki jagah khaali navy dabba
   dikh raha tha.

   Us pill se ladne ke bajaye usi ko active indicator maan liya:
   background transparent, label safed, aur text pill ke upar
   (z-index). Ab "Monthly" navy par safed dikhta hai. */

.pricing-area .tabs-navigation-2 .nav-link {
  position: relative;
  z-index: 2;
}

.pricing-area .tabs-navigation-2 .nav-link.active {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none;
}

/* ---- ek line mein 4 --------------------------------------------------

   Pichhli baar maine `[class*="col-"]` likha tha aur wo tabs wale
   col-12 par bhi chipak gaya — poora page nichud gaya.

   Ab poora selector likha hai: .col-md-6.col-lg-4 — ye SIRF plan
   wale column par lagta hai. Tabs ka col-12 isse match hi nahi
   karta. */

.pricing-area .row > .col-md-6.col-lg-4 {
  flex: 0 0 auto;
  width: 25%;
  display: flex;
}

.pricing-area .row > .col-md-6.col-lg-4 > .card {
  width: 100%;
  height: 100%;
  margin-bottom: 0 !important;
}

.pricing-area .row { row-gap: 24px; }

/* ---- plan card — dikhawat ------------------------------------------- */

.pricing-area .card {
  padding: 26px 22px;
  background: #fff;
  border: 1px solid #E4E9F2;
  border-radius: 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.pricing-area .card:hover {
  border-color: #C9D4EA;
  box-shadow: 0 14px 30px -18px rgba(16, 17, 23, .28);
}

/* recommended plan — sirf kinaara. Pichhli baar iska background
   navy kar diya tha aur andar ka text padha hi nahi ja raha tha. */
.pricing-area .card.active {
  border: 2px solid var(--color-primary);
  background: #fff;
  box-shadow: 0 16px 36px -20px rgba(30, 58, 138, .32);
}

.pricing-area .card .icon {
  color: var(--color-primary);
  font-size: 19px;
}

.pricing-area .card .label {
  font-size: 16px;
  font-weight: 700;
  color: #101117;
}

.pricing-area .card .price {
  font-weight: 800;
  letter-spacing: -0.028em;
  color: #101117;
}

.pricing-area .card .period {
  font-size: 13.5px;
  font-weight: 550;
  color: #6B7484;
}

/* BUG THA: maine `.pricing-area .pricing-list li { color: #3A4252 }`
   likha tha — bina ye dekhe ki recommended card ka background navy
   hai. Mera kaala rang theme ke safed rang ko haraa raha tha, aur
   navy par kaala text padha hi nahi ja raha tha.

   Screenshot mein "Services : 15", "Live Chat" waghairah isi wajah
   se gayab lag rahe the.

   Ab kaala rang sirf normal card ke liye hai. Navy card ka apna
   safed rang alag likha hai. */

.pricing-area .card:not(.active) .pricing-list li {
  font-size: 14px;
  line-height: 1.55;
  color: #3A4252;
}

.pricing-area .card:not(.active) .pricing-list li i { color: var(--color-primary); }

/* recommended (navy) card — sab kuchh safed */
.pricing-area .card.active,
.pricing-area .card.active .pricing-list li,
.pricing-area .card.active .label,
.pricing-area .card.active .price,
.pricing-area .card.active .period,
.pricing-area .card.active h5,
.pricing-area .card.active h6 { color: #fff !important; }

.pricing-area .card.active .pricing-list li i { color: #fff !important; }

.pricing-area .card.active .icon {
  background: rgba(255, 255, 255, .14);
  color: #fff !important;
}

.pricing-area .card.active .period { color: rgba(255,255,255,.78) !important; }

/* ===================== CONTACT ======================================
   NOTE: theme mein class ka naam "contact-informatoin" hai —
   spelling galat hai lekin HTML mein wahi hai. Badalne se page
   toot jayega. */

.contact-informatoin .contact-wrapper {
  background: #fff;
  border: 1px solid #E4E9F2;
  border-radius: 12px;
  padding: clamp(18px, 2.4vw, 30px);
}

.contact-informatoin .form-control,
.contact-informatoin textarea {
  min-height: 46px;
  border: 1px solid #E4E9F2;
  border-radius: 9px;
  font-size: 14.5px;
}

.contact-informatoin textarea { min-height: 130px; }

.contact-informatoin .form-control:focus,
.contact-informatoin textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, .22);
}

.contact-informatoin label {
  font-size: 13.5px;
  font-weight: 600;
  color: #2B3240;
}

.contact-informatoin iframe {
  border-radius: 12px;
  border: 1px solid #E4E9F2;
}

/* ===================== ABOUT ======================================== */

.about-area-v1 img { border-radius: 14px; }

.about-area-v1 p {
  font-size: 16px;
  line-height: 1.75;
  color: #3A4252;
}

.about-area-v1 ul li i { color: var(--color-primary); }

/* ===================== RESPONSIVE =================================== */

@media (max-width: 1399.98px) {
  .pricing-area .row > .col-md-6.col-lg-4 { width: 33.3333%; }   /* 3 */
}

@media (max-width: 991.98px) {
  .pricing-area .row > .col-md-6.col-lg-4 { width: 50%; }        /* 2 */
}

@media (max-width: 767.98px) {
  .pricing-area .row > .col-md-6.col-lg-4 { width: 100%; }       /* 1 */
}

@media (max-width: 575.98px) {
  .pricing-area .card { padding: 22px 18px; }
  .pricing-area .tabs-navigation-2 .nav-tabs { flex-wrap: wrap; }
  .pricing-area .tabs-navigation-2 .nav-link { padding: 9px 14px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-area .card { transition: none; }
}
/* ==== AJONTEC-PAGES-END ============================================= */

/* ==== AJONTEC-FOOTER-START ==========================================
   Footer readability fix

   DIKKAT (screenshot):
     Useful Links ke item, email, phone, aur poora CIN/GSTIN wala
     band gayab lag rahe the.

   WAJAH — aur ye meri galti hai:
     Sabse pehle wale block (PARTICULARS) mein maine saare rang
     rgba(255,255,255,...) mein likhe the, ye maan kar ki footer ka
     background gehra navy hai. Branding SQL usko #0B1029 karti hai.

     Lekin abhi footer ka background HALKA hai. Safed text halke
     background par gayab ho jaata hai — bas wahi hua.

   FIX:
     Rang ab currentColor se bante hain, hardcoded safed se nahi.
     currentColor footer ke apne text ka rang hai — background
     gehra ho ya halka, band uske hisaab se dhal jaata hai.

     Iska matlab: aage kabhi admin se footer ka rang badlo, ye
     dobara nahi tootega.
   ================================================================== */

/* ---- band ke rang ab inherit hote hain ------------------------------- */

.aj-particulars {
  color: inherit;
  border-top-color: color-mix(in srgb, currentColor 16%, transparent);
}

.aj-particulars__grid,
.aj-particulars__attr,
.aj-cred {
  border-color: color-mix(in srgb, currentColor 16%, transparent);
}

.aj-cred { background: color-mix(in srgb, currentColor 5%, transparent); }

.aj-cred__name  { color: color-mix(in srgb, currentColor 92%, transparent); }
.aj-cred__ref   { color: color-mix(in srgb, currentColor 66%, transparent); }
.aj-cred__body  { color: color-mix(in srgb, currentColor 48%, transparent); }

.aj-particulars__label { color: color-mix(in srgb, currentColor 52%, transparent); }
.aj-particulars__value { color: color-mix(in srgb, currentColor 94%, transparent); }
.aj-particulars__attr  { color: color-mix(in srgb, currentColor 66%, transparent); }

.aj-particulars__value a {
  color: inherit;
  border-bottom-color: color-mix(in srgb, currentColor 30%, transparent);
}

/* purane browser ke liye — color-mix na chale to bhi padha ja sake */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .aj-cred__name, .aj-particulars__value { color: inherit; }
  .aj-cred__ref, .aj-cred__body,
  .aj-particulars__label, .aj-particulars__attr { opacity: .7; }
}

/* ---- footer ke baaki hisse ------------------------------------------- */

.footer-area .footer-widget h5,
footer .footer-widget h5 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.008em;
  margin-bottom: 16px;
}

/* Useful Links / Contact Us ke item — screenshot mein sabse zyada
   yahi gayab the */
.footer-area .footer-widget ul li a,
footer .footer-widget ul li a {
  color: inherit;
  opacity: .78;
  font-size: 14px;
  line-height: 1.55;
  transition: opacity .16s ease;
}

.footer-area .footer-widget ul li a:hover,
footer .footer-widget ul li a:hover { opacity: 1; }

.footer-area .footer-widget ul li,
footer .footer-widget ul li {
  color: inherit;
  opacity: .78;
  font-size: 14px;
  line-height: 1.55;
  padding: 4px 0;
}

.footer-area .footer-widget p,
footer .footer-widget p {
  color: inherit;
  opacity: .74;
  font-size: 14px;
  line-height: 1.7;
}

/* newsletter box */
.footer-area .subscription-form .input-inline,
footer .subscription-form .input-inline {
  border-radius: 9px;
  overflow: hidden;
}

.footer-area .subscription-form .form-control,
footer .subscription-form .form-control { min-height: 44px; font-size: 14px; }

/* social icons */
.footer-area .social-link a,
footer .social-link a {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: inherit;
  opacity: .8;
  transition: opacity .16s ease, background-color .16s ease;
}

.footer-area .social-link a:hover,
footer .social-link a:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.copy-right-content span { color: inherit; opacity: .72; font-size: 13.5px; }
/* ==== AJONTEC-FOOTER-END ============================================ */