:root{
    --u-primary:#0c6e6d;
    --u-dark:#003436;
    --u-soft:#e9f6f5;
    --u-text:#1b2b2b;
    --u-muted:#5b6b6b;
    --u-card:#ffffff;
    --u-border:rgba(0,0,0,.08);
    --u-shadow:0 12px 28px rgba(0,0,0,.08);
    --u-radius:18px;
  }

  .ucdml-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--u-text);}
  .ucdml-container{width:min(1140px,92%);margin:0 auto;}
  .ucdml-section{padding:70px 0;}
  .ucdml-grid{display:grid;gap:22px;}
  .ucdml-btn{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--u-primary);color:#fff;text-decoration:none;
    padding:12px 18px;border-radius:999px;font-weight:600;
    box-shadow:0 10px 18px rgba(12,110,109,.18);
    transition:.25s;
  }
  .ucdml-btn:hover{transform:translateY(-2px);filter:brightness(1.02);}
  .ucdml-btn.outline{
    background:transparent;border:1px solid rgba(255,255,255,.35);
    box-shadow:none;
  }

  .ucdml-kicker{letter-spacing:.14em;text-transform:uppercase;font-weight:700;font-size:12px;color:rgba(255,255,255,.82);}
  .ucdml-kicker.dark{color:var(--u-primary);}
  .ucdml-title{font-size:42px;line-height:1.12;margin:10px 0 12px;font-weight:800;}
  .ucdml-sub{font-size:16px;line-height:1.8;color:rgba(255,255,255,.86);max-width:720px}
  .ucdml-sub.dark{color:var(--u-muted);}

/* =========================
   HERO – WHITE VERSION
========================= */
.dye-hero{
  background:#ffffff;                 /* pure white */
  color:#003436;
  padding:92px 0 78px;
  position:relative;
  overflow:hidden;
  border-bottom:0px solid rgba(0,0,0,.06);
}

/* layout */
.dye-hero .hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:28px;
  align-items:center;
}



.hero-subtext{
  font-size:15.5px;
  line-height:1.7;
  color:#4b5f5f;
  margin-top:12px;

  /* FIX */
  max-width: 100%;

  text-align: justify;
  text-justify: inter-word;
}



/* image card */
.hero-card{
  background:#ffffff;
  border:0px solid rgba(0,0,0,.08);
  border-radius:00px;
  padding:01px;
  box-shadow:0 02px 2px rgba(0,0,0,.12);
}

/* HERO GRID ALIGNMENT FIX */
.dye-hero .hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:32px;
  align-items: center;   /* 🔴 এইটাই মূল fix */
}

/* Image wrapper safe alignment */
.hero-card{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Image reset */
.hero-card img{
  display:block;
  margin:0 auto;
}


/* IMAGE CARD – CLEAN VERSION */
.hero-card{
  background:transparent;      /* card background remove */
  border:none;                 /* card border remove */
  border-radius:0;
  padding:0;                   /* padding remove */
  box-shadow:none;             /* shadow remove */
}

.hero-card img{
  width:100%;
  height:340px;
  object-fit:cover;
  border:none;                 /* image border remove */
  border-radius:0px;          /* soft rounded corner (optional) */
}


/* badges */
.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  background:#eef7f6;
  border:1px solid rgba(12,110,109,.25);
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  color:#003436;
}

/* text refinement */
.dye-hero h1,
.dye-hero h2{
  color:#003436;
}

.dye-hero p{
  color:#4f5f5f;
  line-height:1.7;
}


  /* CARDS */
  .card{
    background:var(--u-card);
    border:1px solid var(--u-border);
    border-radius:var(--u-radius);
    box-shadow:var(--u-shadow);
    padding:22px;
  }
  .card h3{margin:0 0 8px;font-size:18px}
  .card p{margin:0;color:var(--u-muted);line-height:1.75}
  .icon-pill{
    width:44px;height:44px;border-radius:14px;
    display:grid;place-items:center;
    background:var(--u-soft);
    border:1px solid rgba(12,110,109,.18);
    margin-bottom:12px;
    font-weight:800;color:var(--u-primary);
  }

  /* PROCESS */
  .process{
    background:linear-gradient(180deg, #ffffff, #f7fbfb);
  }
  .steps{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;align-items:stretch}
  .step{
    background:#fff;border:1px solid var(--u-border);
    border-radius:16px;padding:14px;position:relative;
  }
  .step b{display:block;color:var(--u-primary);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
  .step span{display:block;font-weight:800;margin-top:6px}
  .step small{display:block;color:var(--u-muted);margin-top:6px;line-height:1.5}
  .step:after{
    content:"";position:absolute;top:50%;right:-10px;transform:translateY(-50%);
    width:18px;height:2px;background:rgba(0,0,0,.12);
  }
  .step:last-child:after{display:none;}

  /* TWO COL */
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
  .list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
  .list li{
    display:flex;gap:10px;align-items:flex-start;
    color:var(--u-muted);line-height:1.65
  }
  .tick{
    width:20px;height:20px;border-radius:6px;
    background:rgba(12,110,109,.12);
    display:grid;place-items:center;
    color:var(--u-primary);font-weight:900;flex:0 0 20px;margin-top:2px
  }


  /* CERTS */
  .certs{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
  .cert{
    background:#fff;border:1px dashed rgba(0,0,0,.16);
    border-radius:16px;padding:14px;text-align:center
  }
  .cert img{max-height:44px;width:auto;object-fit:contain;display:block;margin:0 auto 8px}
  .cert span{font-size:13px;color:var(--u-muted);font-weight:600}

  /* CTA */
  .cta{
    background:linear-gradient(135deg, #003436, #0c6e6d);
    color:#fff;
  }
  .cta .cta-box{
    border-radius:22px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    padding:26px;
    display:flex;gap:18px;align-items:center;justify-content:space-between;
    flex-wrap:wrap;
  }

  /* RESPONSIVE */
  @media (max-width: 991.98px){
    .dye-hero .hero-grid{grid-template-columns:1fr}
    .ucdml-title{font-size:34px}
    .steps{grid-template-columns:repeat(2,1fr)}
    .step:after{display:none;}
    .two-col{grid-template-columns:1fr}
    .kpi-strip{grid-template-columns:repeat(2,1fr)}
    .certs{grid-template-columns:repeat(3,1fr)}
  }
  @media (max-width: 575.98px){
    .ucdml-section{padding:56px 0}
    .hero-card img{height:240px}
    .kpi-strip{grid-template-columns:1fr}
    .certs{grid-template-columns:repeat(2,1fr)}
  }


/* =========================
   MODERN COLORFUL FEATURE CARDS
   (Override .card + .icon-pill)
========================= */

/* card base */
.card{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%, #fbfeff 100%);
  border:1px solid rgba(12,110,109,.12);
  border-radius:22px;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
  padding:26px 24px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* top gradient strip */
.card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:6px;
  background:linear-gradient(90deg,#14b8a6,#38bdf8,#a78bfa);
}

/* soft blob background */
.card::after{
  content:"";
  position:absolute;
  right:-60px; top:-60px;
  width:180px; height:180px;
  background:radial-gradient(circle at 30% 30%, rgba(56,189,248,.35), rgba(167,139,250,.18), transparent 65%);
  filter:blur(2px);
  pointer-events:none;
}

/* hover */
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(12,110,109,.22);
  box-shadow:0 26px 60px rgba(0,0,0,.12);
}

/* title + text */
.card h3{
  margin:0 0 10px;
  font-size:20px;
  font-weight:800;
  color:#003436;
  letter-spacing:.2px;
}

.card p{
  margin:0;
  color:#516666;
  line-height:1.78;
  font-size:15.2px;
}

/* icon/number pill (01/02/03) */
.icon-pill{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-weight:900;
  letter-spacing:.6px;
  color:#003436;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  margin-bottom:14px;
  background:linear-gradient(135deg, rgba(20,184,166,.25), rgba(56,189,248,.20), rgba(167,139,250,.20));
}

/* give each card slightly different vibe */
.card:nth-child(1)::before{
  background:linear-gradient(90deg,#14b8a6,#22c55e);
}
.card:nth-child(2)::before{
  background:linear-gradient(90deg,#38bdf8,#0ea5e9);
}
.card:nth-child(3)::before{
  background:linear-gradient(90deg,#a78bfa,#f472b6);
}

.card:nth-child(1)::after{
  background:radial-gradient(circle at 30% 30%, rgba(34,197,94,.30), rgba(20,184,166,.18), transparent 65%);
}
.card:nth-child(2)::after{
  background:radial-gradient(circle at 30% 30%, rgba(56,189,248,.35), rgba(14,165,233,.16), transparent 65%);
}
.card:nth-child(3)::after{
  background:radial-gradient(circle at 30% 30%, rgba(244,114,182,.30), rgba(167,139,250,.18), transparent 65%);
}


/* =========================
   MOBILE STACK FIX
========================= */
@media (max-width: 767.98px){

  /* cards container (grid / row যাই হোক) */
  .ucdml-grid,
  .cards,
  .features,
  .process-cards{
    display:grid !important;
    grid-template-columns: 1fr !important; /* ⬇ one by one */
    gap:18px;
  }

  /* individual card */
  .card{
    width:100%;
    margin:0 auto;
  }

  /* text readability improve */
  .card p{
    font-size:14.5px;
    line-height:1.65;
  }

  .card h3{
    font-size:18px;
  }

  .icon-pill{
    width:46px;
    height:46px;
    font-size:15px;
  }
}


/* =========================
   PROCESS FLOW – BOX BORDER
========================= */

.step{
  background:#ffffff;
  border:1.5px solid rgba(12,110,109,.35); /* dark green */
  border-radius:16px;
  padding:16px;
  position:relative;
  transition: all .25s ease;
}

/* hover effect (optional but recommended) */
.step:hover{
  border-color:#0c6e6d;
  box-shadow:0 10px 22px rgba(12,110,109,.15);
  transform:translateY(-2px);
}

/* 4-part unified grid */
.four-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
  align-items:stretch;
}

/* card text */
.card h3{
  margin:6px 0 8px;
  font-size:20px;
  font-weight:800;
}

.card p{
  color:var(--u-muted);
  line-height:1.75;
  margin-bottom:14px;
}

/* Environment card slight highlight */
.eco-card{
  background:linear-gradient(
    180deg,
    rgba(12,110,109,.08),
    rgba(12,110,109,.02)
  );
}

/* Mobile */
@media (max-width: 991.98px){
  .four-grid{
    grid-template-columns:1fr;
  }
}

.hero-image-row{
  margin:32px 0 28px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
  width:100%;
}

.hero-image-card{
  background:#ffffff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  transition:.3s ease;
}

.hero-image-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(0,0,0,.14);
}

.hero-image-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

.hero-image-card figcaption{
  padding:12px 14px;
  font-size:14px;
  font-weight:600;
  color:#003436;
  letter-spacing:.3px;
  background:#f7fbfa;
}

/* Tablet */
@media (max-width:1024px){
  .hero-image-row{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Mobile */
@media (max-width:640px){
  .hero-image-row{
    grid-template-columns:1fr;
  }

  .hero-image-card img{
    height:190px;
  }
}


.ucdml-container--wide{
  max-width: 1200px;   /* ইচ্ছা করলে 1280px */
  width: 92%;
  margin: 0 auto;
}