/* ==========================================================
   MAAO OUR ACTIVITIES - CARD BACKGROUND DESIGN
   This file is loaded last so the design is applied reliably.
   Existing content, text, slider and controls are untouched.
   ========================================================== */

.activities-section {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: linear-gradient(180deg, #f6fbf8 0%, #eef7f3 100%) !important;
}

/* Decorative section background */
.activities-section::before {
  content: "" !important;
  position: absolute !important;
  width: 360px !important;
  height: 360px !important;
  left: -220px !important;
  top: -150px !important;
  border-radius: 50% !important;
  background: rgba(102, 181, 143, .10) !important;
  border: 1px solid rgba(62, 145, 108, .12) !important;
  box-shadow: 0 0 0 28px rgba(102,181,143,.025), 0 0 0 58px rgba(102,181,143,.018) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.activities-section::after {
  content: "" !important;
  position: absolute !important;
  width: 310px !important;
  height: 310px !important;
  right: -190px !important;
  bottom: -170px !important;
  border-radius: 50% !important;
  background: rgba(85, 165, 185, .08) !important;
  border: 1px solid rgba(65, 140, 160, .10) !important;
  box-shadow: 0 0 0 26px rgba(85,165,185,.022), 0 0 0 54px rgba(85,165,185,.015) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.activities-section > * { position: relative !important; z-index: 2 !important; }

/* Every card: the upper half is intentionally designed, not plain white. */
.activities-section .activity-card > div {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(28, 82, 67, .10) !important;
  background: #fff !important;
  box-shadow: 0 16px 36px rgba(26, 67, 56, .10) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.activities-section .activity-card:hover > div {
  transform: translateY(-5px) !important;
  box-shadow: 0 22px 42px rgba(26, 67, 56, .15) !important;
}

.activities-section .activity-media {
  height: 225px !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 0 !important;
}

/* Soft abstract circles */
.activities-section .activity-media::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 10% 18%, rgba(255,255,255,.52) 0 42px, transparent 43px),
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.38) 0 28px, transparent 29px),
    radial-gradient(circle at 76% 82%, rgba(255,255,255,.28) 0 46px, transparent 47px) !important;
  pointer-events: none !important;
}

/* Soft wave/decorative shape */
.activities-section .activity-media::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  left: -8% !important;
  bottom: -32px !important;
  width: 116% !important;
  height: 92px !important;
  border-radius: 50% 50% 0 0 / 70% 70% 0 0 !important;
  background: rgba(255,255,255,.22) !important;
  transform: rotate(-2deg) !important;
  box-shadow: 0 -18px 0 rgba(255,255,255,.08) !important;
  pointer-events: none !important;
}

/* Individual card palettes */
.activities-section .activity-media-1 {
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), transparent 50%),
    linear-gradient(135deg, #dff3e5 0%, #c9e8d4 55%, #b8dfc6 100%) !important;
}
.activities-section .activity-media-2 {
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), transparent 50%),
    linear-gradient(135deg, #fff4d9 0%, #f9e8bd 55%, #efd9a2 100%) !important;
}
.activities-section .activity-media-3 {
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), transparent 50%),
    linear-gradient(135deg, #e1f2fb 0%, #cce8f6 55%, #b8dff1 100%) !important;
}
.activities-section .activity-media-4 {
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), transparent 50%),
    linear-gradient(135deg, #f0e7fa 0%, #e1d5f1 55%, #d2c2e7 100%) !important;
}
.activities-section .activity-media-5 {
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), transparent 50%),
    linear-gradient(135deg, #fae9e4 0%, #f3d8d1 55%, #eac8bf 100%) !important;
}
.activities-section .activity-media-6 {
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), transparent 50%),
    linear-gradient(135deg, #e6f3df 0%, #d5eaca 55%, #c5dfba 100%) !important;
}

/* Keep the existing SVG icons, but make them prominent and colorful. */
.activities-section .activity-media .activity-icon {
  position: relative !important;
  z-index: 4 !important;
  width: 98px !important;
  height: 98px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(255,255,255,.98) !important;
  box-shadow: 0 14px 30px rgba(30,70,60,.15) !important;
}

.activities-section .activity-media .activity-icon svg {
  width: 62px !important;
  height: 62px !important;
  display: block !important;
}

/* White lower content panel, as in the requested design */
.activities-section .activity-copy {
  position: relative !important;
  z-index: 5 !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%) !important;
  padding: 22px 22px 25px !important;
}

.activities-section .activity-copy h3 { color: #12354d !important; }
.activities-section .activity-copy p { color: #6b7d86 !important; }

@media (max-width: 700px) {
  .activities-section .activity-media { height: 205px !important; }
  .activities-section .activity-media .activity-icon { width: 88px !important; height: 88px !important; }
  .activities-section .activity-media .activity-icon svg { width: 56px !important; height: 56px !important; }
}