/* Page heading band */
.page-heading {
  background: linear-gradient(90deg, var(--green-deep), var(--green-primary));
  padding-block: 48px;
  color: var(--white);
}
.page-heading .eyebrow {
  color: var(--green-light);
}
.page-heading h1 {
  color: var(--white);
  font-size: 2.4rem;
  margin-top: 6px;
}

/* Image left / content right */
.intro__image-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.intro__image-wrap img {
  width: 100%;
  height: 300px;              /* har image ki height, apni pasand se adjust kar lena */
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 20px 36px rgba(11, 42, 82, 0.18);
  display: block;
}

.intro__text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.intro__text h3 {
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 1.2rem;
}

.intro__text p {
  margin-bottom: 0;
}

/* Single-column checklist variant for this page */
.checklist--single {
  display: block;
  margin-top: 12px;
}
.checklist--single li {
  align-items: flex-start;
  margin-bottom: 14px;
}
.checklist--single li span {
  color: var(--gray-text);
  font-weight: 400;
}
.checklist--single li strong {
  color: var(--green-dark);
}

@media (max-width: 760px) {
  .page-heading h1 { font-size: 1.8rem; }
}

/* ==========================================================================
   Additional Responsive Rules (Dyeing Page)
   ========================================================================== */

/* Tablet: 1024px and below */
@media (max-width: 1024px) {
  .page-heading { padding-block: 40px; }
  .page-heading h1 { font-size: 2.1rem; }
  .intro__text h2 { font-size: 1.7rem; }
  .intro__image-wrap img { height: 260px; }
}

/* Tablet portrait / large mobile: 760px and below */
@media (max-width: 760px) {
  .intro__image-wrap { gap: 14px; }
  .intro__image-wrap img { height: 220px; }
}

/* Small mobile: 480px and below */
@media (max-width: 480px) {
  .page-heading { padding-block: 32px; }
  .page-heading h1 { font-size: 1.5rem; }

  .intro__text h2 { font-size: 1.35rem; }
  .intro__text h3 { font-size: 1.05rem; }
  .intro__text { gap: 16px; }

  .intro__image-wrap img { height: 180px; }

  .checklist--single li { margin-bottom: 10px; }
  .checklist--single li span { font-size: 0.9rem; }
}