html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, sans-serif; }
.container { display: flex; flex-direction: column; align-items: center; }

.row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.column {
  flex: 1;
  margin: 1vw 0.5vw;
  border: 0.2vw solid blue;
  padding: 0;
  background-color: #fff7f7;
}

/* 🟩 Modern Gradient Header */
.column h2 {
  position: relative;
  color: #fff;
  padding: 1vw;
  font-size: 1.5vw;
  margin: 0;
  text-align: center;
  border-bottom: 0.2vw solid red;
  border-bottom-left-radius: 1vw;
  border-bottom-right-radius: 1vw;
  overflow: hidden;
  box-shadow: 0 0.5vw 1.5vw rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #333, #666); /* Default fallback */
}

/* ✨ Animated floating dots pattern */
.column h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: radial-gradient(circle, rgba(255,255,255,0.2) .2vw, transparent .2vw);
  background-size: 2vw 2vw;
  pointer-events: none;
  animation: moveSquares 25s linear infinite;
  z-index: 0;
}

/* Ensure text stays visible above animation */
.column h2 span {
  position: relative;
  z-index: 1;
}

/* 🌈 Custom gradients per column */
.column-4 h2 { background: linear-gradient(135deg, #0c4e00, #2ecc71); }
.column-6 h2 { background: linear-gradient(135deg, #004b4b, #00baba); }
.column-7 h2 { background: linear-gradient(135deg, #8E2D54, #D96FAF); }
.column-ads h2 {
  background: linear-gradient(135deg, #f6b900, #ffe46b);
  color: #000;
}

/* 🔄 Animation for background movement */
@keyframes moveSquares {
  0% { background-position: 0 0; }
  100% { background-position: 20vw 20vw; }
}

ul {
  list-style: disc;
  padding-left: 1.5vw;
  margin: 1vw;
}

li {
  font-size: 1.2vw;
  padding: 0.5vw 0;
}

/* Optional ads column style */
.column-ads {
  background-color: #fff9e6;
  border: 0.2vw dashed #f6b900;
}