/* ================================================================
   GLOBAL TYPOGRAPHY SYSTEM - CONSISTENT + LARGER, VISIBLE SIZES
   Aa file jyare use karvi hoy tyare JUNI typography-fix.css ne
   PURI RITE REPLACE (overwrite) karo - juni file no code kadhi
   ne aa naya code paste karo. Same file name / same link tag
   rakhi shako chho, kai badalvani jarur nathi.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Poppins', sans-serif;

  /* --- DESKTOP SIZES (increased for visibility) --- */
  --fs-tagline:    22px;                     /* subheader / eyebrow tag */
  --fs-heading:    clamp(20px, 4vw, 30px);   /* main section header */
  --fs-subheading: 20px;                     /* card-level h3 titles */
  --fs-body:       17px;                   /* paragraph / content */
  --fs-small:      16px;                     /* small card text */

  --lh-heading: 1.4;
  --lh-body:    1.8;

  --clr-heading: #24202e;
  --clr-tagline: #6c757d;
  --clr-body:    #4a4750;
}

body, p, li, span, a, input, select, textarea, button{
  font-family: var(--font-body);
}

/* ---------------- 1. TAGLINE / SUBHEADER ---------------- */
.section-tagline,
.about-tagline,
.clients-tagline,
.services-tagline,
.workflow-tagline,
.projects-tagline,
.contact-tagline,
.blogs-tagline,
.faq-tagline{
  font-family: var(--font-heading) !important;
  font-size: var(--fs-tagline) !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  color: var(--clr-tagline) !important;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

/* ---------------- 2. MAIN SECTION HEADINGS (biggest text) ---------------- */
.section-heading,
.about-heading,
.clients-heading,
.services-heading,
.workflow-heading,
.projects-heading,
.contact-heading,
.blogs-heading,
.faq-heading{
  font-family: var(--font-heading) !important;
  font-size: var(--fs-heading) !important;
  font-weight: 900 !important;
  line-height: var(--lh-heading) !important;
  color: var(--clr-heading) !important;
  letter-spacing: 0.3px;
  text-transform: none;
}

/* Hero title - largest on the whole page */
.hero-title{
  font-family: var(--font-heading) !important;
  font-weight: 900 !important;
  font-size: clamp(32px, 5.5vw, 52px) !important;
  color: #eef1ea !important;
}

.hero-subtitle{
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #eef1ea !important;
}

/* ---------------- 3. CARD-LEVEL SUB-HEADINGS ---------------- */
.feature-card h3,
.info-block h3,
.service-content h3{
  font-family: var(--font-heading) !important;
  font-size: var(--fs-subheading) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--clr-heading) !important;
}

.workflow-step-item h3,
.areas-section .card-footer h3,
.blog-card-title{
  font-family: var(--font-heading) !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--clr-heading) !important;
}
.blog-card-title a{ font-family: inherit; }

/* ---------------- 4. BODY / CONTENT TEXT ---------------- */
.about-description,
.about-subdescription,
.clients-text-side p,
.service-content p,
.faq-subtext,
.accordion-inner-text p{
  font-family: var(--font-body) !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  color: var(--clr-body) !important;
  font-weight: 400 !important;
}

.feature-card p,
.info-block p{
  font-family: var(--font-body) !important;
  font-size: var(--fs-small) !important;
  line-height: 1.65 !important;
  color: var(--clr-body) !important;
  font-weight: 400 !important;
}

/* ================================================================
   RESPONSIVE SCALING — same hierarchy, still clearly readable
   ================================================================ */
@media (min-width: 768px) and (max-width: 1024px){
  :root{
    --fs-tagline:    14px;
    --fs-heading:    clamp(24px, 4vw, 32px);
    --fs-subheading: 18px;
    --fs-body:       14.5px;
    --fs-small:      13.5px;
  }
  .hero-title{ font-size: clamp(26px, 5vw, 34px) !important; }
  .hero-subtitle{ font-size: 15px !important; }
}

@media (max-width: 767px){
  :root{
    --fs-tagline:    13px;
    --fs-heading:    clamp(22px, 6vw, 28px);
    --fs-subheading: 17px;
    --fs-body:       14px;
    --fs-small:      13px;
  }
  .hero-title{ font-size: clamp(24px, 7vw, 30px) !important; }
  .hero-subtitle{ font-size: 14px !important; }
}

@media (max-width: 480px){
  :root{
    --fs-heading:    24px;
    --fs-subheading: 16px;
    --fs-body:       13.5px;
    --fs-small:      12.5px;
  }
  .hero-title{ font-size: 22px !important; }
}