.hg-blog-section {
  position: relative;
  width: 100%;

  /* allow the divider (which overflows by 10%) to be visible */
  overflow: visible;

  /* push the next container down by the same offset you’re using for the divider */
  margin-bottom: var(--section-divider-oval-offset);
}

/* ==========================================================================
   1) Wrapper & reset
   ========================================================================== */
.hg-blog-wrapper {
  position: relative;
  width: 100%;
  overflow: visible;    /* allow the divider to stick out */
}

/* ==========================================================================
   2) Light‐blue oval behind the hero, scaled 110%
   ========================================================================== */
.hg-blog-divider-oval {
  position: absolute;
  top:    0;
  left:   0;
  width:  100%;
  height: 100%;               /* match the hero’s height */
  background: var(--clr-primary-30);
  border-radius: 35%;
  /* scale it taller by 10% from its top edge */
  transform-origin: top center;
  transform:        scaleY(1.05);
  z-index:          0;        /* behind the hero */
}

/* ==========================================================================
   3) Hero container on top
   ========================================================================== */
.hg-blog-container {
  position: relative;
  z-index: 1;                /* sits above the divider */
}

/* ==========================================================================
   4) Gradient hero + SVGs + padding
   ========================================================================== */
.hg-blog-bg {
  background: linear-gradient(
    to right,
    var(--clr-light-greem-100),
    var(--clr-dark-green-100)
  );
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
  border-bottom-left-radius:  40px;
  border-bottom-right-radius: 40px;

  position: relative;
  overflow: hidden;
  padding: 2rem 1.5rem 3rem;
  min-height: 200px;
}

@media (min-width: 1024px) {
  .hg-blog-bg { min-height: 300px; }
}

/* ==========================================================================
   5) SVG Layers
   ========================================================================== */
.hg-blog-bg img.hg-logo-bg,
.hg-blog-bg img.hg-dots-bg,
.hg-blog-bg img.hg-arrow-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0.5;
  pointer-events: none;
}
.hg-logo-bg  { z-index: 0; }
.hg-dots-bg  { z-index: 1; }
.hg-arrow-bg { z-index: 2; }

/* ==========================================================================
   6) Text block
   ========================================================================== */
.hg-blog-text {
  position: relative;
  z-index: 3;                /* above all graphics */
  max-width: 1000px;
  margin: 0 5%;
  color: #fff;
}
.hg-blog-title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.2;
}
.hg-blog-description {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  opacity: 0.9;
}

/* ==========================================================================
   7) Responsive: nudge SVGs right
   ========================================================================== */
@media (min-width: 550px) {
  .hg-blog-bg img.hg-logo-bg,
  .hg-blog-bg img.hg-dots-bg,
  .hg-blog-bg img.hg-arrow-bg {
    left: 10%;
  }
}