:root{
  --navy:#244d73;
  --blue:#5e8bb8;
  --pale:#f4f8fb;
  --mist:#e7f0f8;
  --text:#24415b;
  --muted:#607991;
  --white:#ffffff;
  --line:#d6e4ef;
  --shadow:0 24px 70px rgba(36,77,115,.12);
}

/* ============================================================
   DFC WEBSITE — CSS ORGANIZED BY SECTION
   Sections in order:
   0. Global / Base / Navigation
   1. Banner
   2. Facilitation
   3. Services
   4. Approach
   5. About (Founder's Profile)
   6. Testimonials
   7. Join Hands
   8. Contact Us / Connect
   9. Footer
   10. Animations & Scroll
   ============================================================ */


/* ============================================================
   0. GLOBAL / BASE / TYPOGRAPHY / NAVIGATION
   ============================================================ */

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; color: var(--text); background: var(--white); line-height: 1.7 }
a { color: inherit; text-decoration: none }
img { max-width: 100%; display: block }

.container { width: min(1160px, 92%); margin-inline: auto }
.section-pad { padding: 40px 0 }
.soft-bg { background: linear-gradient(180deg, var(--pale), #fff) }

/* Global headings */
h1, h2, h3 { line-height: 1.15; color: var(--navy) }
h1 {
  font-family: "Lato", sans-serif;
  font-size: clamp(42px, 6vw, 76px);
  letter-spacing: -.04em;
  line-height: 1.2;
  font-weight: 700;
  margin-top: -10px !important;
  margin-bottom: 0px;
}
h2 {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 2.3rem;
  line-height: 1.15;
  width: 100% !important;
  text-align: left !important;
  margin-top: -10px;
  margin-bottom: 0px;
}
h3 {
  line-height: 1.15;
  margin: 0;
  color: var(--navy);
  font-family: "Lato", sans-serif;
  font-size: 1.35rem;
}

/* Global buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 24px;
  font-weight: 800;
  border: 1px solid transparent;
  transition: .25s ease;
}
.btn-primary {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 12px 34px rgba(36, 77, 115, .18);
  font-family: 'Helvetica', serif;
  font-weight: 600;
}
.btn-secondary {
  border-color: var(--line);
  color: var(--navy);
  background: #fff;
  font-family: 'Helvetica', serif;
  font-weight: 600;
}
.btn:hover { transform: translateY(-2px) }

/* Section heading (shared across sections) */
.section-heading {
  text-align: center;
  max-width: 100% !important;
  margin: 0 auto 45px;
}
.section-heading p {
  color: var(--muted);
  font-family: 'Helvetica', serif;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 500;
  margin: 8px 0px;
  text-align: left;
}

/* Custom font */
@font-face {
  font-family: 'Helvetica', serif;
  src: url("https://wittytechnicalsolutions.com/sub-domain/dfc/wp-content/themes/dfc/assets/helvetica-255/Helvetica.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

/* Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 86px;
}
.brand img { width: 200px }
.nav {
  display: flex;
  gap: 30px;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.nav a { padding: 10px 0 }
.nav-cta {
  background: var(--navy);
  color: #fff !important;
  padding: 11px 20px !important;
  border-radius: 999px;
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  font-size: 28px;
  color: var(--navy);
}


/* ============================================================
   1. BANNER SECTION
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 10% 20%, #eaf3fb 0, transparent 32%), linear-gradient(135deg, #fff 0%, #f7fbff 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 60px;
  align-items: center;
}

.eyebrow {
  color: var(--muted);
  font-family: 'Helvetica', serif;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 500;
}
.eyebrow1 {
  color: var(--muted);
  font-family: 'Helvetica', serif;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 500;
  text-align: left;
  margin-top: 10px;
}
.eyebrow1_1 {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 2.3rem;
  line-height: 1.15;
  text-align: left;
  margin-top: -15px;
}

.hero-text {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 720px;
  margin: 24px 0 34px;
  font-family: 'Helvetica', serif;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 34px;
  padding: 22px 25px;
  box-shadow: var(--shadow);
  position: relative;
}
.accent-line {
  height: 5px;
  width: 90px;
  background: linear-gradient(90deg, var(--navy), var(--blue));
  border-radius: 999px;
  margin-bottom: 15px;
}
.hero-card p {
  color: var(--muted);
  font-family: 'Helvetica', serif;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 500;
  width: 90%;
}
.mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.mini-grid span {
  background: var(--pale);
  border: 1px solid var(--line);
  padding: 8px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  font-family: "Lato", sans-serif;
  text-align: center;
}

/* New banner layout */
.new-banner-main-div {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  background: radial-gradient(circle at 10% 20%, #eaf3fb 0, transparent 32%), linear-gradient(135deg, #fff 0%, #f7fbff 100%);
  padding-top: 80px;
  padding-bottom: 80px;
}
.new-banner-sub-div {
  width: 90%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}
.first-box { width: 100% }
.first-box-content { width: 100% }

.new-eyebrow {
  color: var(--muted);
  font-family: 'Helvetica', serif;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 500;
  padding-top: 15px;
  padding-bottom: 15px;
  margin: 0;
}
.new-eyebrow-heading {
  font-family: "Lato", sans-serif;
  font-size: 42px;
  letter-spacing: -.02em;
  line-height: 1.2;
  font-weight: 700;
  width: 80%;
  padding-bottom: 15px;
  padding-top: 5px;
}

.second-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 40px;
}
.second-box-content {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: -5px;
}
.box-1 { width: 40% }
.sub-box-1 { width: 100% }
.box-2 { width: 60%; display: flex }
.sub-box-2 { width: 100% }

.hero-text-new {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 720px;
  font-family: 'Helvetica', serif;
  padding: 0;
  margin: 0;
  line-height: 1.4;
  text-align: justify;
}
.hero-text-new-one {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 720px;
  padding-top: 15px !important;
  padding-bottom: 10px !important;
  font-family: 'Helvetica', serif;
  padding: 0;
  margin-top: -5px;
  margin-bottom: 0;
  line-height: 1.4;
  text-align: justify;
}
/* .hero-actions-new { padding-top: 5px } */
.btn-secondary-new {
  border-color: var(--line);
  color: var(--navy);
  background: #fff;
  font-family: 'Helvetica', serif;
  font-weight: 600;
  margin-left: 25px;
}
.btn-primary2 {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 12px 34px rgba(36, 77, 115, .18);
  font-family: 'Helvetica', serif;
  font-weight: 600;
  padding: 10px;
}

.new-h2 {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 3rem;
  line-height: 1.15;
  width: 100% !important;
}
.new-h2-new {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 2.3rem;
  line-height: 1.15;
  width: 100% !important;
}

.hero-card .new-p {
  color: var(--muted);
  font-family: 'Helvetica', serif;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 500;
  width: 100%;
  margin: 10px 0;
  text-align: justify;
}

.ht-connector {
  flex: 1;
  height: 2px;
  background: #1a4c9c;
  margin-top: 32px;
  opacity: 0.4;
  position: relative;
}
.ht-connector::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #1a4c9c;
  opacity: 1;
}

/* Banner — Mobile */
@media (max-width: 480px) {
  .new-banner-main-div { padding-top: 40px; padding-bottom: 40px }
  .first-box-content { padding-top: 20px }
  .new-eyebrow { padding: 0 }
  .new-eyebrow-heading {
    width: 100%;
    font-size: 30px;
    font-weight: 600;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  .second-box { width: 100%; text-align: center; display: block }
  .second-box-content { width: 100%; text-align: center; display: block }
  .box-1 { width: 100% }
  .sub-box-1 { width: 100% }
  .box-2 { width: 100%; margin: 0 }
  .sub-box-2 { width: 100% }
  .hero-text-new { text-align: left; padding: 0 }
  .hero-card .new-p { width: 100%; text-align: left }
  .hero-actions-new { padding-top: 0; padding-bottom: 35px }
  .btn-secondary-new { margin-top: 30px; margin-left: 0px }
  .btn-primary { margin-top: 20px }
  .btn-primary2 { width: 100%; padding: 10px }
  .new-h2 { font-size: 2.5rem }
}


/* ============================================================
   2. FACILITATION SECTION
   ============================================================ */

.facilitation-wrapper { display: flex; flex-direction: column }
.facilitation-wrapper-2 { display: flex; flex-direction: column }

.sub_facilitation_overview {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #244D73;
  flex-direction: column;
  padding-top: 80px;
  margin-top: 40px;
}
.facilitation_heading_div { width: 100% }
.facilitation_content_div { width: 100% }

.facilitation-h2 {
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-size: 2.3rem;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 16px;
  text-align: left;
}
.hero-text-new-facilitation {
  font-size: 1.1rem;
  color: #d7e7f5;
  font-family: 'Helvetica', serif;
  line-height: 1.6;
  margin-bottom: 12px;
  text-align: left;
}

/* Trust strip (stats bar inside Facilitation) */
.trust-strip {
  padding-top: 40px;
  padding-bottom: 40px;
  background: var(--navy);
  color: #fff;
  text-align: center;
  font-family: 'Helvetica', serif;
}
.trust-strip-2 {
  padding-top: 10px;
  padding-bottom: 20px;
  background: var(--navy);
  color: #fff;
  text-align: center;
  font-family: 'Helvetica', serif;
  margin-top: 20px;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 500;
}
.trust-grid div {
  border-left: 1px solid rgba(255, 255, 255, .25);
  padding-left: 22px;
  text-align: left;
}
.trust-grid strong,
.trust-grid span { display: block; font-size: 1.25rem; text-align: center }
.trust-grid span { color: #d7e7f5; font-size: 15px; padding-top: 5px }

/* Facilitation — Mobile */
@media (max-width: 480px) {
  .facilitation-h2 { margin: 0 }
  .sub_facilitation_overview { padding: 25px 0px }
  .trust-grid { gap: 45px }
  .trust-strip{
    padding-top: 20px !important;
  }
  .dfc-sec-pad{
    padding-top: 20px !important;
    padding-bottom: 55px !important;
  }
  .section-pad{
    padding-top: 30px !important;
    padding-bottom: 55px !important;
  }
  .eyebrow1_1{
    line-height: 1 !important;
    padding: 5px 0 !important;
  }
  .eyebrow1{
    margin-top: 5px !important;
  }
  .step p{
    margin-bottom: 5px !important;
  }
  .steps-grid .step{
    padding: 15px 20px 10px 20px !important;
  }
  .trust-strip-2{
    padding: 10px 0px !important;
  }
  .intro-box{
    padding: 15px 20px 10px 20px !important;
  }
  .intro-box p{
    margin-bottom: 5px !important;
  }
  .dfc-sec-head{
    margin: 0px 0px 20px 0px !important;  
  }
  .dfc-sec-desc{
    font-size: 1rem !important;
  }
}


/* ============================================================
   3. SERVICES SECTION
   ============================================================ */

   #services{
  scroll-margin-top: 55px;
}

.service-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 15px;
  margin-top: -30px;
  align-items: stretch;
}
.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 15px 20px;
  box-shadow: 0 14px 42px rgba(36, 77, 115, .07);
  display: flex !important;
  flex-direction: column !important;
}
.service-card p {
  flex: 1 !important;
  margin: 8px 0;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  font-family: 'Helvetica', serif;
  font-weight: 500;
  color: #607991;
}
.icon {
  width: 42px;
  height: 42px;
  border-radius: 18px;
  background: var(--mist);
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}
.icon svg { width: 28px; height: 28px; fill: var(--navy) }

/* Service card Read More button */
.sc-readmore {
  align-self: flex-start;
  background: transparent;
  border: 1.5px solid #1a4c9c;
  color: #1a4c9c;
  border-radius: 50px;
  padding: 7px 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.sc-readmore:hover { background: #1a4c9c; color: #fff }

/* Service modal overlay */
.sc-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(10, 25, 60, 0.5);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  -webkit-overflow-scrolling: touch;
}
.sc-overlay.open { display: flex }
body.sc-modal-open { overflow: hidden }

.sc-modal {
  background: #fff;
  border-radius: 24px;
  padding: 40px 36px;
  max-width: 560px;
  width: 90%;
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 60px rgba(17, 47, 97, 0.15), 0 4px 16px rgba(17, 47, 97, 0.08);
}
.sc-modal-icon {
  width: 52px; height: 52px;
  background: #e8f0fb;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.sc-modal-icon svg { width: 26px; height: 26px; fill: #1a4c9c }
.sc-modal h3 {
  font-size: 1.35rem;
  color: #112f61;
  line-height: 1.15;
  font-family: "Lato", sans-serif;
}
.sc-modal p {
  font-family: 'Helvetica', serif !important;
  font-size: 1.1rem !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: #607991 !important;
  text-align: justify;
  margin-bottom: 12px;
}
.sc-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none; border: none;
  font-size: 20px; color: #8a9ab5;
  cursor: pointer; line-height: 1;
}
.sc-close:hover { color: #112f61 }

/* Services — Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .service-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px }
}

/* Services — Mobile */
@media (max-width: 768px) {
  .service-grid { grid-template-columns: 1fr !important }
  .service-card { border-radius: 18px; padding: 22px 20px }
  .sc-modal { padding: 28px 22px; border-radius: 18px; max-height: 90vh; width: 95% }
  .sc-modal h3 { font-size: 16px }
  .sc-modal p { font-size: 14px }
}


/* ============================================================
   4. APPROACH SECTION
   ============================================================ */

#approach { scroll-margin-top: 65px }

.approach-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: start;
}
.approach-row1 { margin-bottom: 48px }

/* Horizontal timeline */
.horizontal-timeline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  margin-bottom: 48px;
  margin-top: -25px;
}
.ht-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1;
}
.ht-circle {
  width: 65px; height: 65px;
  border-radius: 50%;
  background: #112f61;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #112f61;
}
.ht-circle .timeline-icon { width: 30px; height: 30px; filter: brightness(0) invert(1) }
.ht-label {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #112f61;
  text-align: center;
}

/* Steps grid */
.steps { display: grid; gap: 18px }
.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 4px 18px;
}
.step span { grid-row: 1/3; color: var(--blue); font-weight: 900; font-size: 24px }
.step p { font-family: 'Helvetica', serif; font-size: 1.2rem; line-height: 1.4; font-weight: 500 }

.steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: -35px !important;
}
.steps-grid .step {
  display: block;
  border-radius: 16px;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid rgba(17, 47, 97, 0.12);
}
.steps-grid .step-value {
  grid-column: 1 / -1;
  width: 75%;
  margin: 0 auto;
}

/* Vertical timeline (inside Approach) */
.vertical-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 20px;
}
.vertical-timeline .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0; margin: 0;
  min-height: auto; height: auto;
  background: transparent; border: none;
}
.vertical-timeline .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-bottom: 5px; margin-top: 10px;
}
.vertical-timeline .circle {
  width: 85px; height: 85px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid;
  display: flex; justify-content: center; align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.vertical-timeline .circle img,
.vertical-timeline .timeline-icon { width: 50px; height: 50px; object-fit: contain }
.vertical-timeline svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.vertical-timeline .label {
  margin-top: 8px; margin-bottom: 4px;
  font-size: 14px; font-weight: bold;
  letter-spacing: 0.5px; text-transform: uppercase;
  background: #fff; padding: 0 6px;
}
.vertical-timeline .connector {
  width: 2px; height: 80px; margin-top: 12px;
  background: currentColor;
  position: relative;
}
.vertical-timeline .connector::after {
  content: "";
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid currentColor;
}
.vertical-timeline .step:last-child .connector { display: none }

/* Timeline color variants */
.vertical-timeline .discover { color: #163f86 }
.vertical-timeline .discover .circle { border-color: #163f86 }
.vertical-timeline .discover .dot,
.vertical-timeline .discover .connector { background: #163f86 }

.vertical-timeline .plan { color: #2f72d8 }
.vertical-timeline .plan .circle { border-color: #2f72d8 }
.vertical-timeline .plan .dot,
.vertical-timeline .plan .connector { background: #2f72d8 }

.vertical-timeline .engage { color: #163f86 }
.vertical-timeline .engage .circle { border-color: #163f86 }
.vertical-timeline .engage .dot,
.vertical-timeline .engage .connector { background: #163f86 }

.vertical-timeline .implement { color: #2f72d8 }
.vertical-timeline .implement .circle { border-color: #2f72d8 }
.vertical-timeline .implement .dot,
.vertical-timeline .implement .connector { background: #2f72d8 }

.vertical-timeline .deliver { color: #163f86 }
.vertical-timeline .deliver .circle { border-color: #163f86 }
.vertical-timeline .deliver .dot,
.vertical-timeline .deliver .connector { background: #163f86 }

/* Approach — Tablet/Mobile */
@media (max-width: 768px) {
  .approach-row1 { grid-template-columns: 1fr; gap: 24px }
  .approach-row1 .section-heading { text-align: center; align-items: center; margin: 0 }
  .horizontal-timeline { flex-direction: column !important; align-items: center !important; gap: 0 !important; padding: 16px 0 !important }
  .ht-step { flex-direction: column !important; align-items: center !important; width: auto !important; flex: unset !important; gap: 0 !important; padding: 0 !important }
  .ht-circle { margin: 0 auto !important }
  .ht-label { margin-top: 8px !important; margin-left: 0 !important; text-align: center !important; font-size: 13px !important }
  .ht-connector { width: 2px !important; height: 32px !important; background: #1a4c9c !important; margin: 15px auto !important; flex: unset !important; opacity: 0.4 !important; position: relative !important }
  .ht-connector::after { content: '' !important; position: absolute !important; bottom: -1px !important; left: 50% !important; transform: translateX(-50%) !important; width: 0 !important; height: 0 !important; border-left: 6px solid transparent !important; border-right: 6px solid transparent !important; border-top: 10px solid #1a4c9c !important; opacity: 1 !important }
  .steps-grid { grid-template-columns: 1fr }
  .steps-grid .step-value { width: 100%; grid-column: auto }
  #approach .approach-wrapper { padding-left: 16px; padding-right: 16px }
}

@media (max-width: 600px) {
  .vertical-timeline .circle { width: 54px; height: 54px }
  .vertical-timeline svg { width: 28px; height: 28px }
  .vertical-timeline .label { font-size: 12px }
  .vertical-timeline .connector { height: 36px }
  .vertical-timeline .circle img,
  .vertical-timeline .timeline-icon { width: 30px; height: 30px; object-fit: contain }
  .vertical-timeline { padding-top: 15px }
}

@media (max-width: 480px) {
  .steps { margin-top: -75px }
}


/* ============================================================
   5. ABOUT — FOUNDER'S PROFILE SECTION
   ============================================================ */

#about { scroll-margin-top: 80px }

.about-grid { align-items: center; margin-top: -35px }
.about-copy p { margin-top: 0;  }
.about-copy p,
.step p { font-family: 'Helvetica', serif; font-size: 1.1rem; line-height: 1.4; font-weight: 500; color: #607991; margin-bottom: 0; }

.founder-text {
  font-family: 'Helvetica', serif;
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 500;
  color: #607991;
}
.eyebrow-founder-1 {
  font-family: 'Helvetica', serif;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 500;
  color: #24476d;
  margin-top: 1px;
}
.eyebrow-founder-2 {
  font-family: 'Helvetica', serif;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 500;
  color: #24476d;
  margin: 0;
}
.one-stop-hub {
  color: var(--muted);
  font-family: 'Helvetica', serif;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: bold;
  width: 90%;
  margin: 10px 0;
}

/* Values card */
.values-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 14px 42px rgba(36, 77, 115, .07);
}
.values-card ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 60px }
.values-card li { padding-left: 22px; border-left: 3px solid var(--blue); color: var(--muted); font-family: 'Helvetica', serif; line-height: 1.4; font-weight: 500 }
.values-card span { display: block; color: var(--navy); font-weight: 700; font-family: "Lato", sans-serif; padding-bottom: 5px }

/* Intro grid layout */
.about-intro-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.about-intro-left { display: flex; flex-direction: column; gap: 20px }
.dfc-intro-grid { grid-template-columns: 1fr 1fr; margin-bottom: 40px }

.intro-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 48px }
.intro-box { border-radius: 16px; padding: 24px; background: #fff; border: 1px solid rgba(17, 47, 97, 0.12) }
.intro-box h3 { color: #112f61; margin-bottom: 12px }
.intro-box p { color: #4a5a72; font-family: 'Helvetica', serif; font-size: 1.1rem; line-height: 1.4; font-weight: 500; margin: 0; line-height: 1.75; margin-bottom: 12px }

/* Read More link */
.read-more-link {
  display: inline-block;
  margin-top: 1rem;
  color: #24476d;
  font-family: 'Helvetica', serif;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--muted);
  transition: opacity 0.2s ease;
}
.read-more-link:hover { opacity: 0.6 }

/* Read More button */
.read-more-btn {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border: 1px solid #1a4c9c;
  border-radius: 6px;
  background: transparent;
  color: #1a4c9c;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.read-more-btn:hover { background: #1a4c9c; color: #fff }

/* Founder modal overlay */
.founder-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
}
.founder-modal-overlay.active { display: flex }
.founder-modal-box {
  background: #fff;
  max-width: 950px;
  width: 100%;
  padding: 3rem;
  position: relative;
  border-radius: 24px;
  box-shadow: 0 8px 40px #24476d;
  overflow: hidden;
  margin: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  height: 90vh;
  overflow-y: auto;
}
.founder-modal-box .eyebrow { color: var(--muted); font-family: 'Helvetica', serif; font-size: 1.1rem; line-height: 1.4; font-weight: 500 }
.founder-modal-box h2 { color: var(--muted); font-family: 'Helvetica', serif; font-size: 1.1rem; line-height: 1.4; font-weight: 500; margin-top: 0.5rem; margin-bottom: 1.2rem }
.founder-modal-box p { color: var(--muted); font-family: 'Helvetica', serif; font-size: 1.1rem; line-height: 1.4; font-weight: 500; margin-bottom: 1rem }
.founder-modal-close { position: absolute; top: 1.2rem; right: 1.2rem; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--muted); line-height: 1; padding: 0 }

/* Founder modal v2 (fm-*) */
.fm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.55);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fm-overlay.open { display: flex }
.fm-box {
  background: #fff;
  border-radius: 12px;
  width: 100%; max-width: 1200px; max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.fm-head {
  padding: 22px 28px 16px;
  border-bottom: 1px solid #e0e0e0;
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-shrink: 0;
}
.fm-head h2 { margin: 0; font-size: 22px; font-weight: 600; color: #112f61 }
.fm-head .fm-sub { font-size: 13px; color: #555; margin-top: 3px }
.fm-close {
  background: none; border: 1px solid #ccc; border-radius: 6px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  color: #555; font-size: 20px; line-height: 1;
}
.fm-close:hover { background: #f0f0f0 }
.fm-body { padding: 24px 28px; overflow-y: auto; flex: 1; text-align: justify }
.founder-paras { margin-top: 10px }
.founder-paras p { font-size: 1rem; line-height: 1.3rem !important; text-align: justify }
.founder-paras p:last-child { margin-bottom: 0 }
.fm-body p { margin: 0 0 0.6rem; font-family: 'Helvetica', serif; font-size: 1rem; line-height: 1.4; font-weight: 500; color: #607991 }
.fm-body p:last-child { margin-bottom: 0; text-align: justify }

/* About — Mobile */
@media (max-width: 768px) {
  .about-intro-wrapper { grid-template-columns: 1fr }
  .dfc-intro-grid { grid-template-columns: 1fr }
  .intro-boxes { grid-template-columns: 1fr }
}
@media (max-width: 480px) {
  .about-grid { margin-top: -25px }
  .values-card ul { gap: 30px }
  .founder-modal-overlay { padding: 1rem; align-items: flex-end }
  .founder-modal-box { padding: 1.5rem; max-height: 80vh; width: 100%; overflow-y: auto }
  .founder-modal-close { top: 1rem; right: 1rem; font-size: 1rem }
}
@media (max-width: 600px) {
  .fm-overlay { padding: 0; align-items: flex-end }
  .fm-box { border-radius: 16px 16px 0 0; max-height: 88vh }
  .fm-head { padding: 18px 20px 14px }
  .fm-body { padding: 18px 20px }
}


/* ============================================================
   6. TESTIMONIALS SECTION
   ============================================================ */

#testimonials { scroll-margin-top: 90px }

.testimonial {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 14px 42px rgba(36, 77, 115, .07);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.testimonial p { font-family: 'Helvetica', serif; font-size: 1.1rem; line-height: 1.4; font-weight: 500; color: #607991 }
.testimonial span { display: block; margin-top: 22px; font-weight: 700; color: var(--navy); font-family: 'Helvetica', serif; font-size: 1.1rem; line-height: 1.3; padding: 0px 20px; }

.testimonial-grid {
  display: block !important;
  grid-template-columns: unset !important;
  transition: height 0.5s ease;
  gap: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  background-color: #f9fbfd;
  border-radius: 25px;
  margin-top: -40px;
  margin-bottom: 40px !important;
}
.testimonial-track { display: flex; transition: transform 0.5s ease }
.testimonial-track .testimonial { min-width: 100%; box-sizing: border-box; padding: 10px 20px }

.testimonial-prev,
.testimonial-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: transparent; border: none;
  font-size: 24px; cursor: pointer;
  padding: 8px 12px;
  color: inherit; z-index: 10;
}
.testimonial-prev { left: 0 }
.testimonial-next { right: 0 }

.testimonial-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; padding-bottom: 10px }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; cursor: pointer; transition: background 0.3s }
.dot.active { background: #555 }

/* Testimonials — Mobile */
@media (max-width: 480px) {
  .testimonial-grid { height: auto !important; min-height: auto !important }
  .testimonial { height: auto !important; min-height: auto !important; padding: 15px !important; display: flex; flex-direction: column; justify-content: flex-start !important }
  .testimonial p { margin-top: 0 !important; margin-bottom: 12px !important; padding: 10px; }
  .testimonial span { margin-top: 0 !important; padding: 0 20px 10px 20px; }
  .testimonial-track { align-items: flex-start !important }
  .testimonial-track .testimonial { height: auto !important; min-height: unset !important }
}


/* ============================================================
   7. JOIN HANDS SECTION
   ============================================================ */

.quote-band {
  padding: 40px 0;
  background: linear-gradient(135deg, var(--navy), #3f719f);
  color: #fff;
}
.quote-band blockquote {
  margin: 0 auto;
  max-width: 1100px;
  text-align: center;
  font-family: "Lato", sans-serif;
  font-size: 2.75rem;
  line-height: 1.3;
}

.main-quote { display: flex; justify-content: center; align-items: center }
.quote-new-added {
  width: 90%;
  font-size: 2rem;
  font-family: "Lato", sans-serif;
  line-height: 1.3;
}
.join-hands {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1.15;
  width: 100% !important;
  text-align: center !important;
  margin-top: 0 !important;
}

.cta-section { }
.cta-card {
  background: linear-gradient(135deg, #f7fbff, #eaf3fb);
  border: 1px solid var(--line);
  border-radius: 36px;
  padding: 25px;
  align-items: center;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cta-card p { font-family: 'Helvetica', serif; font-size: 1.1rem; line-height: 1.4; font-weight: 500; color: #607991; text-align: center }

/* Join Hands — Mobile */
@media (max-width: 480px) {
  .join-hands { font-size: 2rem !important }
  .quote-new-added { font-size: 1.25rem !important; }
  .quote-band { padding: 40px }
  .quote-band blockquote { font-size: 2rem }
  .cta-card .btn { margin-top: 18px; display: flex; justify-content: center; align-items: center }
}


/* ============================================================
   8. CONTACT US / CONNECT SECTION
   ============================================================ */

#contact { scroll-margin-top: 90px }

.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px }
.contact-copy p { font-family: 'Helvetica', serif; font-size: 1.1rem; line-height: 1.4; font-weight: 500; color: #607991 }

.contact-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 14px 42px rgba(36, 77, 115, .07);
  margin-top: 28px;
  display: grid;
  gap: 6px;
  font-family: 'Helvetica', serif;
}
.contact-box small { color: var(--blue) }

.contact-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 14px 42px rgba(36, 77, 115, .07);
  display: grid;
  gap: 18px;
}
.contact-form label { font-weight: 800; color: var(--navy) }
input, textarea {
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 15px 16px;
  font: inherit;
  color: var(--text);
  background: #fbfdff;
}
textarea { resize: vertical }

.address_text {
  font-family: 'Helvetica', serif;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 500;
  color: #607991;
}


/* ============================================================
   9. FOOTER
   ============================================================ */

.footer { border-top: 1px solid var(--line); padding: 28px 0; background: #fff }
.footer-wrap { display: flex; justify-content: space-evenly; color: var(--muted); font-size: 14px; align-items: center }
.footer img { width: 190px }
.footer_link { font-style: italic; color: #24476d }

@media (max-width: 480px) {
  .footer { display: flex; justify-content: center; align-items: center }
  .footer img { margin-inline: auto }
  .footer-wrap { text-align: center; gap: 0 }
}


/* ============================================================
   10. ANIMATIONS & SCROLL REVEAL
   ============================================================ */

.reveal { opacity: 0; transform: translateY(22px); transition: .7s ease }
.reveal.visible { opacity: 1; transform: none }
.delay-1 { transition-delay: .12s }
.delay-2 { transition-delay: .22s }

@media (max-width: 480px) {
  .section-pad { margin-top: -25px }
  .section-heading { margin-top: -25px }
  h2 { text-align: left }
  .section-heading p { text-align: left }
}

/* NEW SERVICE SECTION */
.dfc-sec-pad { padding: 60px 0; }
.dfc-container { width: min(1160px, 92%); margin-inline: auto; }

.dfc-sec-head { text-align: center; max-width: 100%; margin: 0 auto 45px; }
.dfc-eyebrow { color: #607991; font-family: 'Helvetica', serif; font-size: 1.1rem; line-height: 1.4; font-weight: 500; margin: 0 0 6px; text-align: left; padding: 10px 0px; }
.dfc-sec-h2 { font-family: "Lato", sans-serif; font-weight: 400; font-size: 2.3rem; line-height: 1.15; color: #244D73; margin: -10px 0 0; text-align: left; }
.dfc-sec-desc { color: #607991; font-family: 'Helvetica', serif; font-size: 1.1rem; line-height: 1.4; font-weight: 500; margin: 8px 0; text-align: left; }

/* Grid */
.dfc-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: -30px;
  align-items: start;
}

/* Card — flex column so button always sits at bottom */
.dfc-svc-card {
  background: #fff;
  border: 1px solid #dce6f0;
  border-radius: 22px;
  padding: 18px 20px 16px;
  box-shadow: 0 6px 24px rgba(36,77,115,.07);
  transition: box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.dfc-svc-card:hover { box-shadow: 0 10px 32px rgba(36,77,115,.13); }

.dfc-svc-card{
    padding: 0px !important;
    height: 100% !important;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: none;
    position: relative;
  }

  .dfc-open .dfc-svc-card-sub{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 500px;
    z-index: 9;
  }
  .dfc-svc-card.dfc-open .dfc-svc-body{
    text-align: justify;
  }

/* Top row: icon + title (no button here anymore) */
.dfc-svc-top {
  /* display: grid; */
  grid-template-columns: 44px 1fr;
  gap: 0 10px;
  align-items: start;
}

.dfc-svc-icon { width: 40px; height: 40px; border-radius: 14px; background: #eaf3fb; display: grid; place-items: center; }
.dfc-svc-icon svg { width: 22px; height: 22px; fill: #244D73; }

.dfc-svc-title { padding: 8px 0px 0px; font-family: "Lato", sans-serif; font-size: 1.05rem; line-height: 1.25; color: #112f61; margin: 2px 0 0; font-weight: 600; }

/* Preview text */
.dfc-svc-preview {
  font-family: 'Helvetica', serif;
  font-size: 0.95rem;
  line-height: 1.4;
  font-weight: 500;
  color: #607991;
  margin: 10px 0 0;
  flex: 1;
}

/* Expanded body */
.dfc-svc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, opacity .3s ease, margin .3s ease;
  opacity: 0;
  margin-top: 0;
}
.dfc-svc-body p { font-family: 'Helvetica', serif; font-size: 1rem; line-height: 1.5; font-weight: 500; color: #607991; margin: 0 0 10px; }
.dfc-svc-body p:last-child { margin-bottom: 0; }

/* Toggle button — sits at bottom, centered */
.dfc-svc-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #1a4c9c;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 8px auto 0 0;
  transition: background .2s;
}
.dfc-svc-toggle:hover { background: #1a4c9c; }
.dfc-svc-toggle:hover .dfc-toggle-arrow { stroke: #fff; }

.dfc-toggle-arrow { width: 16px; height: 16px; stroke: #1a4c9c; transition: transform .3s ease, stroke .2s; display: block; }

/* Open state */
.dfc-svc-card.dfc-open { border-color: #1a4c9c; box-shadow: 0 10px 32px rgba(26,76,156,.15); }
.dfc-svc-card.dfc-open .dfc-toggle-arrow { transform: rotate(180deg); }
.dfc-svc-card.dfc-open .dfc-svc-preview { display: none; }
.dfc-svc-card.dfc-open .dfc-svc-body { max-height: 600px; opacity: 1; margin-top: 12px; }

/* Tablet */
@media (min-width: 769px) and (max-width: 1100px) {
  .dfc-svc-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* Mobile */
@media (max-width: 768px) {
  .dfc-svc-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 0; }
  .dfc-sec-pad { padding: 40px 0; }
  .dfc-svc-card { border-radius: 18px; padding: 16px 18px 14px; }
  .dfc-sec-h2 { font-size: 1.75rem; }
  .sub-box-1{
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .founder-paras{
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .dfc-svc-grid{
    margin-top: 0 !important;
  }
}

 .dfc-svc-card-sub {
  background: #fff;
  border: 1px solid #dce6f0;
  border-radius: 22px;
  padding: 10px 20px;
  box-shadow: 0 6px 24px rgba(36,77,115,.07);
  transition: box-shadow .25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.dfc-svc-card-sub:hover { box-shadow: 0 10px 32px rgba(36,77,115,.13); }
.dfc-svc-card:hover { box-shadow: none; }

/* above 1024px */
@media (min-width: 1024px){
.banner-box, .service-box, .approach-box, .founder-box, .testimonial-box, .connect-box{
  min-height: calc(100vh - 86px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
  #services, #about, #testimonials, #contact{
  scroll-margin-top: 65px;
}
  #approach{
  scroll-margin-top: 60px !important;
}
.hero-text-new{
  padding: 5px 0;
}
.hero-actions-new{
  padding: 10px 0;
}
.about-copy p{
  margin: 2.5px 0;
}

}


@media (max-width:900px){.nav-toggle{display:block}.nav{position:absolute;left:4%;right:4%;top:86px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;display:none;flex-direction:column;box-shadow:var(--shadow)}.nav.open{display:flex}.brand img{width:210px}.hero-grid,.approach-grid,.about-grid,.contact-grid{grid-template-columns:1fr}.trust-grid,.service-grid,.testimonial-grid{grid-template-columns:1fr 1fr}.cta-card{display:block}.cta-card .btn{margin-top:18px}}
@media (max-width:620px){.section-pad{padding:55px 0}.trust-grid,.service-grid,.testimonial-grid,.mini-grid{grid-template-columns:1fr}.hero-card,.cta-card{padding:28px}.step{grid-template-columns:1fr}.footer-wrap{display:grid;gap:16px}.brand img{width:180px}}


/* NEW MEDIA QUERY */
@media (min-height: 900px){
  .new-eyebrow{
    padding: 15px 0px;
  }
  .hero-text-new-one{
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 19px !important;
  }
  .hero-card .new-p{
     font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 19px !important;
  }
  .new-eyebrow-heading{
    padding: 15px 0px;
  }
  .hero-text-new{
    padding: 5px 0;
  }
  .sub-box-1{
    padding: 15px 0px;
  }
  .hero-text-new{
    line-height: 1.5;
    font-size: 1.2rem !important;
  }
  .hero-text-new-one{
    padding: 20px 0;
  }
  .hero-actions-new{
    padding: 10px 0;
  }
  .hero-card{
    padding: 30px;
  }
  .accent-line{
    margin-bottom: 20px;
  }
  .new-h2-new{
    font-size: 2rem !important;
  }
  .hero-card .new-p{
    margin: 10px 0;
  }
  .mini-grid{
    gap: 20px;
    margin-top: 20px;
  }
  .sub-box-2{
    padding: 15px 0;
  }
  .second-box{
    padding-bottom: 0px !important;
  }
  .mini-grid span{
    padding: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }


  .service-box{
    min-height: calc(100vh - 86px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 40px !important;
  }
  .section-heading p{
    margin: 15px 0px !important;
  }
  h2{
    margin: 10px 0px;
  }
  .dfc-eyebrow{
    text-align: left;
    padding: 10px 0px !important;
  }
  .dfc-sec-h2{
    padding-bottom: 5px !important;
  }
  .dfc-sec-desc{
    padding: 5px 0px 0px 0px !important;
  }
  .dfc-svc-grid{
    gap: 30px !important;
    padding-top: 20px;
  }
  .dfc-svc-card{
    padding: 0px !important;
    height: 100% !important;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: none;
    position: relative;
  }
  .dfc-svc-top{
    display: block;
  }
  #services{
    scroll-margin-top: 86px !important;
  }
  .dfc-svc-title{
    padding: 15px 0px 0px;
  }
  .dfc-open .dfc-svc-card-sub{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 500px;
    z-index: 9;
  }


  .approach-box{
    min-height: calc(100vh - 86px);
  }
  .eyebrow1{
    margin: 10px 0px;
  }
  .eyebrow1_1{
    margin: 10px 0px;
  }
  .approach-row1{
    margin: 25px 0px;
  }
  .horizontal-timeline{
    margin: 30px 0px 0px 0px;
  }
  .ht-circle{
    width: 85px;
    height: 85px;
  }
  .ht-circle .timeline-icon{
    width: 40px;
    height: 40px;
  }
  .ht-connector{
    margin-top: 45px;
  }
  .steps-grid{
    margin: 25px 0px 25px 0px !important;
  }
  .steps-grid .step{
    padding: 30px 20px !important;
  }
  .ht-label{
    font-size: 1rem !important
  }
  .steps-grid{
    gap: 30px !important;
  }
  .trust-strip-2{
    margin: 10px 0px 0 !important;
    padding: 30px 0px 30px !important;
  }
  #approach{
    scroll-margin-top: 80px;
  }

  .banner-box{
    min-height: calc(100vh - 86px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .approach-box, .founder-box{
    min-height: calc(100vh - 66px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .about-copy p{
    margin: 15px 0px !important;
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
  }
  .founder-paras{
    margin: 20px 0px !important;
  }
  .about-intro-wrapper{
    display: grid !important;
    grid-template-columns: 1fr, 1fr !important;
    gap: 40px !important;
    align-items: center !important;
  }
  .about-intro-left{
    gap: 40px !important;
  }
  .read-more-btn{
    font-size: 1.1rem !important;
  }

  .testimonial-box{
   min-height: calc(100vh - 86px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .testimonial-grid{
    margin-bottom: 60px;
  }
  .testimonial p{
    padding: 20px !important;
    font-size: 1.2rem !important;
    line-height: 1.4;
  }
  .testimonial span{
    padding: 0 20px 20px 20px !important;
  }

  .connect-box{
    min-height: calc(100vh - 86px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .contact-copy.reveal.visible{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .contact-form{
    padding: 60px !important;
    gap: 25px !important;
  }
  .contact-box{
    font-size: 1.1rem !important;
  }
  .cta-card p{
    font-size: 1.2rem !important;
  }
  .btn-primary2{
    padding: 12px 20px !important;
    font-size: 1.2rem !important;
  }
  .intro-box p{
    font-size: 1.1rem !important
  }
  .hero-card .new-p{
    font-size: 1.2rem !important;
  }
  .btn-primary{
    font-size: 1.2rem !important;
    padding: 12px 20px !important;
  }

  .dfc-svc-card-sub {
  background: #fff;
  border: 1px solid #dce6f0;
  border-radius: 22px;
  padding: 18px 20px 16px;
  box-shadow: 0 6px 24px rgba(36,77,115,.07);
  transition: box-shadow .25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
 .dfc-svc-card.dfc-open .dfc-svc-body{
    text-align: justify;
  }
.dfc-svc-card-sub:hover { box-shadow: 0 10px 32px rgba(36,77,115,.13); }
.dfc-svc-card:hover { box-shadow: none; }
}

/* NEW MEDIA QUERY */
@media (min-height: 600px) and (max-height: 768px){
  .banner-box{
    min-height: calc(100vh - 86px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .new-eyebrow-heading{
    font-size: 35px;
    line-height: 1.1;
  }
  .new-eyebrow{
    padding-bottom: 10px;
  }
  .hero-text-new{
    font-size: 1rem;
    line-height: 1.2;
  }
  .hero-card .new-p{
    margin: 3px 0;
  }
  .hero-card{
    padding: 12px 25px;
  }

  .service-box{
   min-height: calc(100vh - 86px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .dfc-sec-h2{
    font-size: 2rem;
  }
  .dfc-sec-desc{
    font-size: 1rem;
  }
  #services{
    scroll-margin-top: 40px !important;
  }
  .dfc-svc-preview{
    margin: 4px 0;
  }
  .dfc-svc-card-sub{
    padding: 5px 20px;
  }
  .dfc-svc-icon{
    height: 34px;
    width: 34px;
  }
  .dfc-svc-title{
    margin: 0;
  }
  .dfc-svc-grid{
    margin-top: -36px;
  }

   .approach-box{
   min-height: calc(100vh - 86px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #approach{
    scroll-margin-top: 67px;
  }
  .ht-circle{
    height: 58px;
    width: 58px;
  }
  .horizontal-timeline{
    margin-top: -33px;
  }
  .step p{
    margin-top: 5px;
  }
  .quote-new-added{
    font-size: 1.5rem;
  }

  .intro-box p{
    font-size: 1rem;
    line-height: 21px !important;
  }
  .read-more-btn{
    margin-top: 0.25rem;
  }
  .testimonial-grid{
    margin-top: -50px;
  }
  .cta-card{
    gap: 5px;
    padding: 15px;
  }
  .cta-card p{
    line-height: 1.1;
  }
  .cta-section {
    margin-top: -10px;
}
#testimonials { scroll-margin-top: 70px }
#contact { scroll-margin-top: 70px }
input, textarea{
  padding: 7px 16px;
}
.contact-form{
  padding: 25px 30px;
}
.founder-paras p{
  padding-bottom: 4px;
}
h2{
  font-size: 2rem;
}

.dfc-svc-grid{
  gap: 8px;
}
.dfc-svc-toggle{
  height: 23px;
  width: 23px;
}
 .hero-text-new-one{
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 19px !important;
  }

  .hero-card .new-p{
     font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 19px !important;
    margin: 15px 0;
  }
  .hero-text-new{
    padding: 5px 0;
  }
  .hero-actions-new{
    padding-top: 10px;
  }
  .contact-copy p{
    font-size: 1rem !important;
    line-height: 21px !important;
  }
  .address_text{
    font-size: 1rem !important;
    line-height: 21px !important;
  }
  .steps-grid{
    gap: 13px;
  }
  .trust-strip-2{
    margin-top: 10px;
    padding-bottom: 12px;
  }
  .horizontal-timeline{
    margin-top: -35px !important;
  }
}