#custom-filtration {
  margin: 40px auto;
  padding: 0px 0px;
  background-color: #eee; /* clean canvas */
  border-radius: 12px; /* reduced, softer corners */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* subtle drop shadow */
  max-width: 1100px; /* keeps section centered and neat */
}

/* Full-width intro block */
#custom-filtration .intro-topblock {
  background-color: #f0f8ff;   /* brand-friendly tint */
  padding: 20px 0;             /* vertical breathing space */
  border-top-left-radius: 12px;   /* round top-left corner */
  border-top-right-radius: 12px;  /* round top-right corner */
}

#custom-filtration .intro-bottomblock {
  background-color: #f0f8ff;   /* brand-friendly tint */
  padding: 20px 0;             /* vertical breathing space */
  border-bottom-left-radius: 12px;   /* round top-left corner */
  border-bottom-right-radius: 12px;  /* round top-right corner */
}

#custom-filtration .intro-text p,
#custom-filtration .closing-text p {
  text-align: justify;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.8;
  font-size: 1.1rem;
}


/* Divider line */
#custom-filtration .section-divider_t {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin: 0 0 40px 0; /* spacing below line */
}

/* Divider line */
#custom-filtration .section-divider_b {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin: 40px 0 0 0; /* spacing below line */
}

/* Full-width topics block */
#custom-filtration .topics-block {
  background-color: #eee;   /* light neutral background */
  padding: 10px 0;
}

.filtration-topics {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.topic {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.topic img {
  width: 40%;
  min-width: 260px;
  height: auto;
  border-radius: 8px;
  flex-shrink: 0;
}

.topic-text h3 {
  margin: 0 0 10px;
  font-size: 1.4rem;
  color: #007c9d; /* cyan accent */
}

/* Alternate layout: even topics have image on the right, text on the left */
#custom-filtration .filtration-topics .topic:nth-child(even) {
  flex-direction: row-reverse;
}

/* Ensure text block stays left-aligned even when reversed */
#custom-filtration .topic .topic-text {
  text-align: left;
}

.topic-text p {
  margin: 0;
  line-height: 1.6;
  text-align: justify;
}

#custom-filtration .topic .topic-text {
  width: 60%;
}

@media (max-width: 768px) {
  .topic {
    flex-direction: column;
    text-align: center;
  }
  .topic img {
    width: 100%;
    max-width: 400px;
  }
}