html,
body {
    font-family: "DM Sans", sans-serif;
    color: #161616;
    margin: 0;
    padding: 0;
}

/* Navbar */
.navbar {
    padding: 38px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #fff;
}

.nav-link {
    font-weight: 500;
    color: #374151 !important;
}

.nav-link.active,
.nav-link:hover {
    color: #7209B7 !important;
    font-size: 16px;
    font-weight: 500;

}

/* Hero with background image */
.hero {
    position: relative;
    overflow: hidden;
    margin-top: 80px;
    min-height: 90vh;
    display: flex;
    align-items: center;
    background: url('http://localhost/moontriam/images/explore/hero.png') center/cover no-repeat;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background:linear-gradient(to right, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.4) 100%); */
    z-index: 0;
}

.hero .container {
    position: relative;
    z-index: 1;
    padding-top: 56px;
    padding-bottom: 56px;
    color: #111827;
}

@media (min-width:992px) {
    .hero .container {
        padding-top: 72px;
        padding-bottom: 72px;
    }
}

/* Hero Heading Styling (Figma based) */
.display-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 3rem;
    line-height:4rem;
    letter-spacing: 0%;
    color: #111827;
    padding-bottom: 3rem;
}

.display-title .accent {
    color: #7209B7;
}

.lead-copy {
    color: #000000;
    max-width: 60ch;
    font-size: 1rem;
    line-height: 150%;
}

.kicker {
    font-weight: 400;
    color: #7209B7;
    font-size: 1rem;
}

@media (max-width:768px) {
    .display-title {
        font-size: 32px;
    }
}




.grad_insight {
    background: linear-gradient(90deg, #7209B7 0%, #B5179E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* display: inline-block; */
    font-family: "DM Sans";
font-style: normal;
font-weight: 900;
line-height: normal;
}


/* Slider section */


.py-lg-6{ padding-top:6rem; padding-bottom:6rem; }

.services-section{
  font-family:"DM Sans",sans-serif;
  background: linear-gradient(180deg,#fff0fb 0%, #ffffff 65%, #ffffff 100%);
}
.services-title{

text-align: center;
font-family: "DM Sans";
font-size: 3rem;
font-style: normal;
font-weight: 900;
line-height: normal;
}
.grad{
  background:linear-gradient(90deg,#7209B7 0%, #B5179E 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.services-sub{

   text-align: center;
font-family: "DM Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 149.958%; /* 23.993px */
background: linear-gradient(90deg, #7209B7 0%, #B5179E 100%);
padding-bottom: 5rem;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
    }

/* ➜ Image/Text gap बढ़ा दिया */
.svc-slide-row{ --bs-gutter-x: 1.75rem; --bs-gutter-y: 1.25rem; }
@media (min-width:992px){
  .svc-slide-row{ --bs-gutter-x: 3.5rem; }  /* desktop पर ज्यादा gap */
}

/* Image card */
.svc-figure{
  border-radius:1rem; overflow:hidden;
  box-shadow:0 1rem 2.25rem rgba(17,24,39,.12);
  aspect-ratio:16/10; margin:0;
}
.svc-figure img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Heading + icon */
.svc-icon{
  width:44px; height:44px; 
  border-radius:.75rem;
  display:inline-flex; 
  align-items:center; justify-content:center;
  background:linear-gradient(90deg, rgba(114,9,183,.12) 0%, rgba(181,23,158,.12) 100%);
}
.svc-icon img{ 
    width:29.33px;
     height:29.33px; 
     display:block; }

/* ➜ Heading अब थोड़ा बड़ा + नीचे space */
.svc-h3{
  color: #7209B7;
font-family: "DM Sans";
font-size: 2rem;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.svc-copy{ color:#374151; font-size:.97rem; line-height:1.75; }

/* Dots */
.services-carousel .svc-indicators{
  position: static !important;
  display: flex !important;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.6rem;
  z-index: 5;
}
.services-carousel .svc-indicators [data-bs-target]{
  width:.62rem; height:.62rem; border-radius:50%;
  background:#e5e7eb; opacity:1; border:0;
  transition:background-color .2s ease, transform .15s ease;
}
.services-carousel .svc-indicators .active{
  background:#7209B7;
  transform:scale(1.06);
}

/* Small screens */
@media (max-width:576px){
  .svc-figure{ aspect-ratio:4/3; }
}

/* Connect Section */

/* BG */
.connect-section{
  font-family:"DM Sans",sans-serif;
  background:linear-gradient(180deg,#ffffff 0%, #ffeefd 60%, #ffffff 100%);
}

/* Left image card */
.connect-figure{
  margin:0; border-radius:1.25rem; overflow:hidden;
  box-shadow:0 1rem 2rem rgba(17,24,39,.12);
  aspect-ratio: 3 / 4;               /* portrait जैसा */
}
.connect-figure img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Coma image (top-left of right column = top-right line of left image) */
.connect-coma{
  width:36px; height:auto; display:block; margin:0; /* no top gap */
}

/* Heading */
.connect-title{
color: #000;
font-family: "DM Sans";
font-size: 3rem;
font-style: normal;
font-weight: 500;
line-height: 149.99%; /* 71.995px */
}

/* Gradient link */
.connect-link{
  display:inline-block; 
  text-decoration:none; 
 font-family: "DM Sans";
font-size: 3rem;
font-style: normal;
font-weight: 700;
line-height: 149.99%; /* 71.995px */
background: linear-gradient(90deg, #7209B7 65.38%, #B5179E 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* CTA button */
.connect-btn{
  border-radius:999px;
   padding:.6rem 1.25rem;
   margin-top: 7rem;
   color: #FFF;
font-family: "DM Sans";
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: normal;
  background:linear-gradient(90deg,#7209B7 0%, #B5179E 100%);
  box-shadow:0 .5rem 1.25rem rgba(114,9,183,.20); border:0;
}
.connect-btn:hover{ opacity:.95; color:#fff; }

/* Arrow image pinned at bottom so it lines up with left image bottom */
.connect-arrow{
    height:0.93rem; 
    width:34.68rem;
     display:block; 
}

/* Small devices */
@media (max-width:576px){
  .connect-figure{ aspect-ratio: 4 / 5; }
  .connect-coma{ width:32px; }
  .connect-arrow{ width:48px; }
}


/* base */
.metrics-section{
  font-family:"DM Sans",sans-serif;
  background:linear-gradient(180deg,#fff5fb 0%, #ffffff 65%, #ffffff 100%);
}
.metrics-title{
  font-weight:900; color:#7209B7;
  font-size:clamp(1.6rem, 1.1rem + 2.2vw, 2.25rem); line-height:1.2; margin:0;
}
.metrics-kicker{ margin:0; color:#6b7280; font-size:.9rem; }
.metrics-blurb{
  color:#0f172a; font-weight:700; line-height:1.25; letter-spacing:.2px;
  font-size:clamp(1.25rem, .9rem + 2.1vw, 2rem);
}

/* RIGHT wrapper keeps the block near the right edge on lg+ */
.metrics-right-wrap{ max-width:720px; margin-left:auto; }

/* Big number */
.metrics-hero{
  color:#7209B7; font-weight:800; line-height:.9; margin:0;
  font-size:clamp(4rem, 12vw, 10.5rem);
}
.metrics-hero-sub{ color:#111827; font-size:.82rem; margin-top:.35rem; }

/* Digit-aligned grid: 1 | 6 | 5 | K */
.metrics-grid4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:auto;
  align-items:start;
  text-align:left;
}
.metrics-grid4 .metrics-hero{ grid-column:1 / -1; }
.metrics-grid4 .u16{ grid-column:2 / -1; }          /* subtext under “16” */
.metrics-grid4 .stats-2x2{ grid-column:1 / span 2; }/* stats begin under “1” */

/* Small metrics */
.metric-value{
  color:#7209B7; font-weight:800;
  font-size:clamp(1.25rem, .7rem + 2vw, 2rem); line-height:1; margin-bottom:.35rem;
}
.metric-caption{ color:#111827; opacity:.9; font-size:.82rem; line-height:1.35; }

/* Responsive stacking */
@media (max-width:991.98px){
  .metrics-right-wrap{ max-width:none; margin-left:0; text-align:center; }
  .metrics-grid4{ grid-template-columns:1fr; text-align:center; }
  .metrics-grid4 .u16, .metrics-grid4 .stats-2x2{ grid-column:1 / -1; }
  .stats-2x2 .metric{ text-align:center; }
}




/* Override css connect section */



/* === 1024 x 600 (portrait) fix === */
@media (min-width: 1024px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 600px) and (orientation: portrait){

  /* Ensure the image doesn't shrink too much */
  .connect-figure {
    aspect-ratio: 3 / 4; /* Maintain portrait aspect ratio */
    min-height: 350px;   /* Minimum height to prevent shrinking */
  }

  .connect-figure img {
    object-fit: cover; /* Ensure image fills the container */
    object-position: center;
  }

  /* Text alignment and padding adjustments */
  .connect-coma {
    width: 32px;
    margin-top: 0;
  }

  .connect-title {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.25;
    margin-top: 1.5rem;
  }

  .connect-link {
    font-size: 1.8rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
  }

  .connect-btn {
    font-size: 1rem;
    padding: 0.8rem 1.8rem;
    margin-top: 2rem;
  }

  /* Arrow image */
  .connect-arrow {
    width: 40px;  /* Smaller size for better fit */
    margin-top: 2rem;
  }

  /* Reduce the column gap for a more compact look */
  .connect-section .row {
    --bs-gutter-x: 1.5rem;
  }
}

/* For small tablets (portrait mode) - 600px to 1024px */
@media (max-width: 1024px) and (min-width: 768px) {
  .connect-title {
    font-size: 2.25rem;
  }

  .connect-link {
    font-size: 1.5rem;
  }

  .connect-btn {
    font-size: 1.1rem;
  }

  .connect-arrow {
    width: 48px;
  }

  .connect-figure {
    aspect-ratio: 4 / 5;  /* Taller image for better fit */
  }
}


/* key-metrics */

.key-metrics{
    background: linear-gradient(180deg, rgba(181, 23, 158, 0.08) 0%, #fff 40%);
  }
  .metric-lede{
    font-weight: 600;
    line-height: 1.35;
    font-size: clamp(1.5rem, 2.2vw + 0.2rem, 2.25rem);
    color: #111;
  }
  .metric-figure{
    font-size: clamp(4.5rem, 12vw, 10rem);
    line-height: 1;
    letter-spacing: .02em;
  }
  .stat-value{
    font-family: "Roboto", sans-serif;
font-size: 3.5rem;
font-style: normal;
font-weight: 400;
line-height: normal;
background: linear-gradient(112deg, #7209B7 7.41%, #B5179E 72.01%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  }

.metrics-title{

    font-family: "DM Sans";
font-size: 48px;
font-style: normal;
font-weight: 900;
line-height: normal;
background: linear-gradient(90deg, #7209B7 6.52%, #B5179E 49.12%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}

.metrics-para{

  
 font-family: "Roboto", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
padding-bottom:5rem ;
background: linear-gradient(90deg, #7209B7 0%, #B5179E 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.metric-lede{

    color: #000;
font-family: "DM Sans";
font-size: 3rem;
font-style: normal;
font-weight: 500;
line-height: 150.023%; /* 72.011px */
}

.metric-figure{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;                 /* display ke liye bold */
  font-style: normal;
  font-size: clamp(3rem, 12vw, 10rem); /* min, fluid, max */
  line-height: 1;                   /* unitless -> fluid size ke saath scale */
  letter-spacing: -0.02em;          /* px ki jagah relative tracking */
  background: linear-gradient(90deg, #7209B7 0%, #B5179E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;               /* non-webkit fallback */
  -webkit-text-fill-color: transparent;
  /* optional: digits ko equal width dene ke liye */
  font-variant-numeric: tabular-nums;
}


.small{

   color: #000;
font-family: "DM Sans";
font-size: 15.5px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 154.839% */
letter-spacing: -0.032px;

}



/* ============ AML Consulting styles ============ */
.aml-consult-section{
  font-family:"DM Sans",sans-serif;
  /* हल्का gradient जैसा mock में दिख रहा है */
  background:linear-gradient(180deg,#ffffff 0%, #fff0fb 75%, #ffffff 100%);
}

/* .consult-title{
  font-weight:900;
 line-height: 149.984%;
 padding-bottom: 8.6rem;
  color:#111111;
  font-size: 3rem;
}
.consult-title .accent{
  background: linear-gradient(90deg, #7209B7 0%, #B5179E 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: "DM Sans";
font-size: 48px;
font-style: normal;
font-weight: 900;
line-height: 149.984%;
} */


.consult-title{
  margin: 0 0 1rem 0;           /* small bottom gap only */
  padding: 0;                   /* was 8.6rem – removed */
  font-weight: 900;
  color: #111111;
  line-height: 1.15;            /* tighter, heading-like */
  font-size: clamp(1.75rem, 1.05rem + 2.4vw, 3rem);
  line-height: 131%;
  /* padding-bottom: 5rem; */
}

/* Accent words — gradient text but inherit all typography */
.consult-title .accent{
  background: linear-gradient(90deg, #7209B7 0%, #B5179E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font: inherit;                /* inherits size, weight, line-height */
}


.consult-copy{
color: #000;
font-family: "DM Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 149.984%; /* 23.997px */
}

.brand-link{
  color:#7209B7;
  text-decoration:none;
  font-weight:700;
}
.brand-link:hover{ color:#B5179E; }

/* Right image card */
.consult-figure{
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 1rem 2rem rgba(17,24,39,.14);
  aspect-ratio: 4 / 5;        /* portrait जैसा */
}
.consult-figure img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* छोटे स्क्रीन पर spacing */
/* @media (max-width:576px){
  .consult-title{ font-size:clamp(1.4rem, 1.1rem + 2vw, 1.9rem); }
  .consult-figure{ aspect-ratio: 3 / 4; }
} */

/* Small screens */
@media (max-width: 576px){
  .consult-title{
    font-size: clamp(1.4rem, 1.05rem + 2.2vw, 1.9rem);
  }
  .consult-figure{ aspect-ratio: 3 / 4; }
}

/* (Optional) micro nudge if fonts sit a hair low next to the image */
@media (min-width: 992px){
  .consult-title{ transform: translateY(-1px); }
}





/* ============ Our Approach styles ============ */

:root{
  --gap: 18px;
  --radius: 24px;
  --track-md: 156px;      /* md row height for small tiles */
  --track-xl: 172px;      /* xl row height */
}

/* ====== Mosaic (LEFT) ====== */
.mosaic{
  display:grid;
  grid-template-columns: 1fr;       /* mobile: single column */
  grid-auto-rows: auto;             /* content-driven on mobile */
  gap: var(--gap);
}
.tile{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #f9fafb;
  padding: 16px;
}
.tile.big{ grid-row: span 2; }

.tile-img{ padding:0; background:#fff; }
.tile-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* TR (soft lilac) */
.tile-white{
  background:#F2DEFF; color:#000;
  font-family:"DM Sans", sans-serif;
  font-size:clamp(16px, 1.2vw + 12px, 20px);
  line-height:1.5;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding: 14px 16px;
}

/* BL (black) */
.tile-black{
  background:#000; color:#fff;
  font-family:"DM Sans", sans-serif;
  font-size:clamp(16px, 1.2vw + 12px, 20px);
  line-height:1.5;
  display:flex; align-items:center; justify-content:center; text-align:left;
  padding: 18px;
}

/* BR (gradient blue/purple) */
.tile-blue{
  background: linear-gradient(109deg, #7209B7 42.47%, #B5179E 112.05%);
  color:#fff;
  font-family:"DM Sans", sans-serif;
  font-size:clamp(15px, 1vw + 11px, 17px);
  line-height:1.5;
  padding: 20px 24px;
}

/* md+ : 2 columns with fixed tracks so
   bottom-right blue == bottom half of black (perfect alignment) */
@media (min-width: 768px){
  .mosaic{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: var(--track-md);
    align-items: stretch;
  }
  .mosaic .tile{ height:100%; display:flex; align-items:center; }
}
@media (min-width: 1200px){
  .mosaic{ grid-auto-rows: var(--track-xl); }
}

/* ====== Headline (RIGHT) ====== */
.approach-headline{
  --pad: 0;               /* mobile default */
  padding-left: var(--pad);
}
@media (min-width: 992px){        /* lg+ matches your design */
  .approach-headline{ --pad: 5rem; }
}

.approach-headline h2{
  color:#000;
  font-family:"DM Sans", sans-serif;
  font-weight:500;
  line-height:1.5;
  /* scales ~28px → 48px while keeping desktop look */
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  margin:0;
}
.approach-headline h2 .break{ display:block; }

/* Arrow image exactly under headline, responsive width */
.headline-arrow{
  margin-top: clamp(1rem, 4vw, 3rem);
  padding-left: var(--pad);
}
.headline-arrow img{
  display:block;
  width: min(24.68rem, 100%);   /* keep your original width, cap at container */
  height:auto;
}

/* ====== Small utility tweaks ====== */
.container.py-5.mt-5.pt-5{ padding-top: clamp(2rem, 4vw, 5rem) !important; } /* keep generous top space, scale on mobile */
.col-lg-6 > .approach-headline{ margin-top: .5rem; } /* slight breathing space on small screens */


        /* ============ Deep Dive CTA styles ============ */
.deepdive-section{
  font-family:"DM Sans",sans-serif;
  background:#000;            /* solid black */
  color:#fff;
}

.deep-title{
 color: #FFF;
text-align: center;
font-family: "DM Sans";
font-size: 48px;
font-style: normal;
font-weight: 900;
line-height: normal;
}
.deep-title .accent{
  background:linear-gradient(90deg,#7209B7 0%, #B5179E 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.deep-sub{
color: #FFF;
text-align: center;
font-family: "DM Sans";
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 150.036%; /* 24.006px */
}

/* pill gradient button */
.deep-btn{
  /* display:inline-block; */
  padding:16px 24px;
  border-radius:999px;
  border:0;
  color:#fff;
  text-decoration:none;
  font-size: 1rem;
  font-weight:500;
  background:linear-gradient(90deg,#7209B7 0%, #B5179E 100%);
  /* box-shadow:0 .5rem 1.25rem rgba(114,9,183,.25); */
  /* transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease; */
}
/* .deep-btn:hover{ transform:translateY(-1px); box-shadow:0 .9rem 1.6rem rgba(114,9,183,.35); color:#fff; }
.deep-btn:active{ transform:translateY(0); opacity:.95; } */



/* ============ Stats Strip styles ============ */
.stats-strip{
  font-family:"DM Sans",sans-serif;
  background:#fff;
}

.stat-card{
  position:relative;
  min-height:110px;
  padding-left:2.2rem;              /* space for the vertical bar (md+) */
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
}

/* Vertical black bar (md+) */
.stat-card::before{
  content:"";
  position:absolute;
  left:0; top:50%; transform:translateY(-50%);
  width:6px; height:82px;
  background:#0b0b0b;
  border-radius:4px;
}

/* Numbers + labels */
.accuracy{

    text-align: center;
font-family: "Roboto", sans-serif;
font-size: 64px;
font-style: normal;
font-weight: 700;
line-height: normal;

background: linear-gradient(90deg, #7209B7 24%, #B5179E 81.75%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.accuracy-label{

    color: #000;
text-align: center;
font-family: "DM Sans";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

/* Mobile: bar becomes a small top line centered (cleaner for narrow screens) */
@media (max-width: 575.98px){
  .stat-card{ padding-left:0; padding-top:1.4rem; }
  .stat-card::before{
    left:50%; top:0; transform:translateX(-50%);
    width:42px; height:6px; border-radius:3px;
  }
}



/* Blog Section */

.blogs-section{
  font-family:"DM Sans",sans-serif;
  background: linear-gradient(90deg,#ffffff 0%, #fff0fb 100%);
}

/* left heading + paragraph */
.blogs-kicker{
  font-family: "DM Sans";
font-size: 3rem;
font-style: normal;
font-weight: 900;
line-height: normal;
background: linear-gradient(90deg, #7209B7 33.67%, #750AB6 41.6%, #B5179E 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.blogs-intro{
 color: #000;
font-family: "DM Sans";
font-size: 2.7rem;
font-style: normal;
font-weight: 500;
line-height: 150.023%; /* 72.011px */
}

/* card look (same as earlier) */
.blog-card{
     position:relative;
     border-radius:1rem; 
     overflow:hidden;
  box-shadow:0 1rem 2rem rgba(17,24,39,.12);
   aspect-ratio: 4 / 2.8;
}
.blog-card img{ 
    width:100%; 
    height:100%; 
    object-fit:cover;
     display:block; 
    }

.blog-cap{
  position:absolute; inset:auto 0 0 0; color:#fff;
  padding:1rem 1.2rem 1.2rem;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.65) 100%);
}
.blog-title
{
    color: #FFF;
font-family: "DM Sans";
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 150.023%; 
padding: 3rem;
 }
.readmore{ 
  
font-family: "DM Sans";
font-size: 20px;
font-style: normal;
font-weight: 800;
line-height: 150.023%; /* 30.005px */
color: #fff;
padding: 3rem;
/* display: block; */


    }

/* Read more row (arrow smaller now) */
.rm-row{ display:flex; align-items:center; gap:.6rem; margin-top:.35rem; }
.rm-arrow{ width:16px; height:auto; display:block; }     /* ⬅️ smaller arrow */

.blog-frame{
  /* 320px से 560px के बीच-smart scale; column width का 70% approx */
  max-width: clamp(520px, 84%, 800px);
  margin-left: auto;          /* push to the right like the mock */
}

/* make sure the card itself obeys wrapper width */
.blog-frame .blog-card{ width:100%; }

/* image behavior stays clean */
.blog-card img{ object-position:center; }

/* On small screens the card should take full width */
@media (max-width: 576px){
  .blog-frame{ max-width: 100%; margin-left: 0; }
  .blog-card{ aspect-ratio: 1 / 1; } 
}

/* (Optional) a tad smaller arrow for consistency */
.rm-arrow{ width: 14px; }
@media (max-width:576px){ .rm-arrow{ width: 12px; } }



@media (max-width:576px){ .rm-arrow{ width:14px; } }

.rm-track{ flex:1; height:2px; background:#d1d5db; border-radius:2px; position:relative; }
.rm-track .rm-seg{ position:absolute; left:0; top:0; height:2px; width:90px; background:#7209B7; border-radius:2px; }

/* pager buttons (same look) */
.blogs-pager .blog-nav{
  width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:#eef2f7; position:relative;
}
.blogs-pager .blog-nav.next{ background:linear-gradient(90deg,#7209B7 0%, #B5179E 100%); }
.blogs-pager .blog-nav.prev::before{
  content:""; width:8px; height:8px; border-left:2px solid #6b7280; border-bottom:2px solid #6b7280; transform:rotate(45deg);
}
.blogs-pager .blog-nav.next::before{
  content:""; width:8px; height:8px; border-right:2px solid #fff; border-top:2px solid #fff; transform:rotate(45deg);
}

/* mobile: card ratio tighter and pager centered */
@media (max-width:576px){
  .blog-card{ aspect-ratio:4/3; }
  .blogs-pager{ justify-content:center !important; }
}

/* keep container positioned */
.bds-metrics{
  position: relative;
}

/* M.png exactly ABOVE the metrics block */
.bds-metrics::before{
  content: "";
  position: absolute;
  right: 3%;                 /* horizontal alignment */
  bottom: 100%;              /* exactly above the top edge of .bds-metrics */
  transform: translateY(-.4rem); /* छोटा gap (–ve बढ़ाएँ तो और ऊपर जाएगा) */

  /* --- IMAGE --- */
  background: url("images/services/M.png") no-repeat center / contain;
  /* responsive size (width/height both set; image stays inside, no distortion) */
  width: clamp(140px, 22vw, 360px);
  height: clamp(120px, 20vw, 300px);

  opacity: .12;              /* faint like watermark */
  pointer-events: none;
  z-index: 3;                /* अगर ऊपर से overlap चाहिए */
}

/* ensure metrics text sits below that z-index (optional) */
.bds-item{ position: relative; z-index: 2; }

/* Mobile tweaks (optional) */
@media (max-width: 576px){
  .bds-metrics::before{
    right: 0;                             /* थोड़ा अंदर लाएँ */
    width: clamp(120px, 50vw, 220px);
    height: clamp(100px, 40vw, 180px);
    transform: translateY(-.25rem);
  }
}


/* Metrics */



 :root{
    --primary: #7209B7;
    --accent:  #B5179E;
  }

  /* gradient for Barriers / Success */
  .text-gradient{
    background: linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .heading-bs{
   font-family: "DM Sans";
font-size: 48px;
font-style: normal;
font-weight: 900;
line-height: normal;
  }

  .Identify{

    font-family: "DM Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
background: linear-gradient(90deg, #7209B7 0%, #B5179E 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 5rem;
  }

  /* LEFT image — taller than the M area */
  .photo-tall{
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    background:#fff;
  }
  .photo-tall img{
    width:100%; height:100%;
    object-fit:cover;
    aspect-ratio: 3 / 4;                 /* tall look (taller than M) */
    display:block;
  }

  /* -------- RIGHT metrics over M.png -------- */
  .metrics-stage{
    position: relative;
    /* responsive height for the whole right column */
    min-height: clamp(360px, 48vw, 580px);
    /* control the M position & size with CSS vars */
    --m-left: clamp(8px, 12%, 24%);      /* M ka left offset inside this column */
    --m-height: 62%;                     /* M overall height (smaller than left image) */
    --m-width: clamp(220px, 46%, 420px); /* used to limit text width */

     margin-top: 19rem;
  }

  /* Watermark image */
  .m-watermark{
    position: absolute;
    left: var(--m-left);
    top: 36%;
    transform: translateY(-50%);
    height: var(--m-height);
    width: auto;
    opacity: 6rem;                         /* watermark feel */
    pointer-events: none;
  }

  /* Numbers & labels */
  .metric-group{
    position: absolute;
    left: var(--m-left);                  /* all text starts at M's left edge */
    max-width: var(--m-width);
  }
  .metric-number{

  font-family: "Roboto", sans-serif;
font-size: 57px;
font-style: normal;
font-weight: 400;
line-height: normal;
background: linear-gradient(112deg, #7209B7 7.41%, #B5179E 72.01%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

  }
  /* .metric-number.sm{
    font-size: clamp(1.75rem, 3vw, 2.5rem);  
  }
  .metric-number.lg{
    font-size: clamp(2.25rem, 5.2vw, 3.6rem); 
  } */
  .metric-label{
    font-size: .875rem;
    color: #6b7280;
  }

  /* Exact vertical placement relative to the M */
  .pos-top
  { 
    top: -17%; 
  
    text-align: left; 
}
  .pos-mid
  {
     top: 36%; 
     transform: translateY(-30%); text-align: left;
     }
  .pos-btm{ bottom: 6%; text-align: left; }

  /* Fine tuning on narrow screens */
  @media (max-width: 575.98px){
    .metrics-stage{
      --m-left: 10%;
      --m-height: 78%;
      --m-width: 85%;
      min-height: 420px;
    }
    .pos-top{ top: 8%; }
    .pos-btm{ bottom: 8%; }
  }

  /* On very wide screens, push M a bit right so it matches your mock */
  @media (min-width: 1400px){
    .metrics-stage{ --m-left: 26%; --m-height: 84%; }
  }



  /* Footer Section */

   .footer-section{
    font-family:"DM Sans",sans-serif;
    color:#fff;
    background: linear-gradient(135deg, #7209B7 0%, #B5179E 100%);
  }

  .footer-logo
  { 
    height:35px; 
    width:auto; 
    object-fit:contain;
 }
  .footer-brand{ font-weight:800; letter-spacing:.08em; }

  .footer-tagline
  { 

    color:#fff; 
    font-size:0.90rem;
    /* text-align: center;  */
    line-height: normal;
    font-weight: 300;
}

  .soc{
    width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.35); border-radius:50%;
    transition: background .2s ease, transform .1s ease;
  }
  .soc:hover{ background:rgba(255,255,255,.12); transform: translateY(-1px); }

  .footer-head{
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight:500; 
    margin-bottom:.75rem; 
    letter-spacing:.02em;
    font-size: 1.25rem;
  }

  .footer-links
  { list-style:none; 
    padding:0; margin:0;
 }
  .footer-links li{
   
    margin:.45rem 0;
  
    
 }
  .footer-links a{
     font-family: "Roboto", sans-serif; 
      color: #fff;
     text-decoration:none; 
       font-size: 0.875rem;
           font-weight: 400;
             line-height: normal;
    font-style: normal;

  }
  .footer-links a:hover{ color:#fff; text-decoration:underline; }

  .footer-hr{
    border:0; height:1px; background: rgba(255,255,255,.45);
  }

  .footer-mini{

    color:#fff; 
    text-decoration:none;
    font-size: 0.90rem;
  }
  .footer-mini:hover{ color:#fff; text-decoration:underline; }

  /* Responsive tweaks */
  @media (max-width: 576px){
    .footer-brand{ font-size:1rem; }
    .footer-logo{ height:32px; }
  }
.location{
     font-family: "Roboto", sans-serif; 

color: #FFF;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 18px */
}




/* Dropdown */


:root{ --accent:#7209B7; }

/* Active color for top nav links */
.navbar .nav-link.active{ color: var(--accent) !important; }

/* Dropdown items: active/pressed color */
.dropdown-item.active, .dropdown-item:active{
  background-color: var(--accent) !important;
  color:#fff !important;
}

/* Nice dropdown look */
.dropdown-menu{
  border-radius: 12px;
}

/* Hover to open (desktop only) */
@media (min-width: 992px){
  .navbar .dropdown:hover .dropdown-menu{
    display: block;
    margin-top: 0; /* snap to toggle */
  }
}

/* Optional: subtle hover colors */
.navbar .nav-link:hover{ color: var(--accent); }
.dropdown-item:hover{
  background: rgba(114,9,183,.08);
  color: var(--accent);
}



/* reveal section */

.reveal-up{
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.98);
  transition:
    transform 900ms cubic-bezier(.22,1,.36,1),
    opacity   900ms ease;
  transition-delay: var(--delay, 0ms);
  will-change: transform, opacity;
}
.reveal-up.show{
  opacity: 1;
  transform: none;
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-up{ transition: none; transform: none; opacity:1; }
}