/* ====================== Simple Flying Bats Overlay ====================== */

.total-body {
  position: relative;
}

.flying-bats {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 320px;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

.flying-bats .bat {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 36px;
  transform-origin: center;
  will-change: transform;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
  opacity: 0.9;
}

.flying-bats .bat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath fill='%23080b12' d='M6 39c9-11 21-20 36-22-1-7-1-12 2-17 7 5 13 10 18 16 5-7 11-12 18-16 3 5 3 10 2 17 15 2 27 11 36 22-8-2-17-2-26 1 1 9-2 15-9 18-5-6-12-9-19-9s-14 3-19 9c-7-3-10-9-9-18-9-3-18-3-26-1Z'/%3E%3C/svg%3E") no-repeat center / contain;
  transform-origin: center 65%;
  animation: bat-flap 0.65s ease-in-out infinite alternate;
}

@keyframes bat-flap {
  0%,
  100% {
    transform: scaleY(1) translateY(0);
  }
  50% {
    transform: scaleY(0.82) translateY(2px);
  }
}

/* Featured Screenshots: inset glow like the reference site */
.downld-pg-features .content-box {
  background: rgba(60,29,3,0.663);          /* the dark inner bg */
  box-shadow: 0 0 20px #ffb300 inset;       /* the gold inset glow */
  border: none;                             /* no white or outer borders */
  border-radius: 5px;                       /* same rounding you saw */
  text-align: center;
  padding: 10px;
}

/* Match example site’s glowing titles & descriptions */
.downld-pg-features h7 {
  font-size: 18px;
  font-family: Spectral SC, serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffff00;                            /* var(--color-primary) */
  text-shadow: 0 0 24px rgba(207,214,12,0.75);
  margin-bottom: 20px;
}

.downld-pg-features h6 {
  font-family: Spectral SC, serif;
  font-weight: 400;
  color: #fff;                            /* var(--color-cyan) */
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.5;
}

/* 1) Keep your header full-width (bootstrap’s .container will center it) */
/* no changes needed for .cmn-head or .row */

/* 2) Tweak gutters (optional, for a bit more breathing room) */
.downld-pg-features .col-6 {
  padding-left: 8px;
  padding-right: 8px;
}

/* 3) Shrink the inner box to 90% of its column and center it */
.downld-pg-features .content-box {
  width: 90%;
  max-width: none;   /* remove any old max-width */
  margin: 0 auto;    /* center in the column */
}

/* space under the header so the page bg peeks through */
.downld-pg-features .cmn-head {
  margin-bottom: 1.5rem;    /* adjust this value as needed */
}