:root{
  --brand:#ec4899;
  --brand2:#8b5cf6;
}

body{ background:#f8fafc; }
.brand-badge{
  width:34px;height:34px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.18);
}

.navbar.bg-primary{
  background:
    radial-gradient(circle at 0% 0%, rgba(236,72,153,.18), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(59,130,246,.18), transparent 55%),
    linear-gradient(90deg, rgba(15,23,42,.94), rgba(15,23,42,.96)) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(15,23,42,.65);
  border-bottom: 1px solid rgba(148,163,184,.38);
}
.navbar .nav-link{
  font-weight:500;
  padding-inline: 1rem;
  color: rgba(248,250,252,.88) !important;
  letter-spacing: .02em;
}
.navbar .nav-link.active{
  position:relative;
  color: #ffffff !important;
}
.navbar .nav-link.active::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:-6px;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
}
.navbar .nav-link:hover{
  color:#ffffff !important;
}
.hero{
  position:relative;
  color:#fff;
  min-height: 80vh;
  display:flex;
  align-items:center;
}
.hero-carousel{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item{
  height:100%;
}
.hero-carousel .carousel-item img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(15,23,42,.45), rgba(15,23,42,.85));
  z-index:1;
}
.hero .container{
  position:relative;
  z-index:2;
}

/* Top Categories section: animated background + reveal */
.section-event2.topcat-section{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(249,250,251,.6)),
    url('../uploads/events/event2.jpg') center/cover no-repeat;
}
.topcat-bg-pattern{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(236,72,153,.12), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(139,92,246,.12), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(59,130,246,.08), transparent 60%);
  background-size: 200% 200%;
  animation: topcatBgMove 15s ease-in-out infinite;
  pointer-events:none;
}
@keyframes topcatBgMove{
  0%, 100%{ background-position: 0% 0%; opacity:1; }
  33%{ background-position: 100% 50%; opacity:.9; }
  66%{ background-position: 50% 100%; opacity:1; }
}
.topcat-section .container{ z-index:1; }
.topcat-reveal{
  opacity:0;
  transform: translateY(28px) scale(0.98);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(0.06s * (var(--topcat-order, 0)));
}
.topcat-reveal.revealed{
  opacity:1;
  transform: translateY(0) scale(1);
}
.topcat-title{
  background: linear-gradient(90deg, #0f172a, #4b5563);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.topcat-subtitle{
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.03em;
  text-transform:uppercase;
  background: linear-gradient(90deg, #0f172a, #4b5563);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.topcat-card{
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  border-radius: 1.5rem !important;
  border: 1px solid rgba(148,163,184,.2) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.topcat-card:hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 48px rgba(236,72,153,.15);
  border-color: rgba(236,72,153,.4) !important;
  background: linear-gradient(145deg, #fff, rgba(254,242,248,.6));
}
.topcat-card .topcat-card-img{
  overflow:hidden;
}
.topcat-card .topcat-card-img img{
  transition: transform .4s ease;
}
.topcat-card:hover .topcat-card-img img{
  transform: scale(1.08);
}
.card-hover{
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,250,252,.9));
  border-radius: 1.5rem !important;
  border: 1px solid rgba(148,163,184,.25) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
}
.card-hover:hover{
  transform: translateY(-6px);
  box-shadow:0 18px 40px rgba(15,23,42,.18);
  border-color: rgba(236,72,153,.35) !important;
  background: linear-gradient(145deg, rgba(255,255,255,1), rgba(248,250,252,.98));
}

/* Why choose us cards (over video) */
.why-card{
  position:relative;
  overflow:hidden;
  background: radial-gradient(circle at top left, rgba(236,72,153,.32), transparent 60%),
              rgba(15,23,42,.9) !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(148,163,184,.6) !important;
  box-shadow: 0 18px 40px rgba(15,23,42,.5);
  color:#fff;
  padding: 1.25rem 1.5rem !important;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.why-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background: conic-gradient(from 180deg, rgba(236,72,153,.0), rgba(236,72,153,.6), rgba(59,130,246,.6), rgba(56,189,248,.0));
  opacity:0;
  transform:scale(1.04);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.why-card:hover{
  border-color: rgba(248,250,252,.95) !important;
  box-shadow: 0 24px 60px rgba(15,23,42,.75);
  transform: translateY(-4px);
}
.why-card:hover::before{
  opacity:1;
  transform:scale(1);
}
.why-card-icon{
  width:42px;
  height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
}

/* Our Events cards extra animation */
.event-card{
  position:relative;
  overflow:hidden;
}
.event-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at top, rgba(236,72,153,.18), transparent 60%);
  opacity:0;
  transform: translateY(20px);
  transition: opacity .25s ease, transform .25s ease;
}
.event-card:hover::before{
  opacity:1;
  transform: translateY(0);
}

/* Our Events page: background pattern + reveal + card styling */
.our-events-section{
  position:relative;
  overflow:hidden;
  background: linear-gradient(160deg, #f8fafc 0%, #f1f5f9 25%, #fce7f3 50%, #ede9fe 75%, #f0f9ff 100%);
  background-size: 400% 400%;
  animation: ourEventsBgMove 20s ease-in-out infinite;
}
@keyframes ourEventsBgMove{
  0%, 100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
.our-events-bg-pattern{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 10% 20%, rgba(236,72,153,.1), transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(139,92,246,.1), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(59,130,246,.06), transparent 55%);
  background-size: 250% 250%;
  animation: ourEventsPatternMove 18s ease-in-out infinite;
  pointer-events:none;
}
@keyframes ourEventsPatternMove{
  0%, 100%{ background-position: 0% 0%; }
  50%{ background-position: 100% 100%; }
}
.our-events-section .container{ z-index:1; }
.our-events-reveal{
  opacity:0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(0.07s * (var(--our-events-order, 0)));
}
.our-events-reveal.revealed{
  opacity:1;
  transform: translateY(0);
}
.our-events-title{
  background: linear-gradient(90deg, #0f172a, #4b5563);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.our-events-subtitle{ color: #475569; }
.our-events-card{
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(254,242,248,.4));
  border: 1px solid rgba(236,72,153,.12);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.our-events-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(236,72,153,.18);
  border-color: rgba(236,72,153,.3);
}
.our-events-card .our-events-card-img{ overflow: hidden; }
.our-events-card .our-events-card-img img{ transition: transform .4s ease; }
.our-events-card:hover .our-events-card-img img{ transform: scale(1.06); }

/* Contact page: background + reveal + cards */
.contact-section{
  position:relative;
  overflow:hidden;
  background: linear-gradient(145deg, #f0f9ff 0%, #f8fafc 30%, #fce7f3 60%, #ede9fe 100%);
  background-size: 300% 300%;
  animation: contactBgMove 16s ease-in-out infinite;
}
@keyframes contactBgMove{
  0%, 100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
.contact-bg-pattern{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 20%, rgba(236,72,153,.08), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(139,92,246,.08), transparent 40%);
  background-size: 200% 200%;
  animation: contactPatternMove 14s ease-in-out infinite;
  pointer-events:none;
}
@keyframes contactPatternMove{
  0%, 100%{ background-position: 0% 0%; }
  50%{ background-position: 100% 100%; }
}
.contact-section .container{ z-index:1; }
.contact-reveal{
  opacity:0;
  transform: translateY(22px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(0.08s * (var(--contact-order, 0)));
}
.contact-reveal.revealed{
  opacity:1;
  transform: translateY(0);
}
.contact-title{
  background: linear-gradient(90deg, #0f172a, #4b5563);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.contact-card{
  transition: transform .3s ease, box-shadow .3s ease;
}
.contact-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(15,23,42,.12);
}

/* Gallery page: background + reveal + grid */
.gallery-section{
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, #faf5ff 0%, #f8fafc 35%, #eff6ff 70%, #fce7f3 100%);
  background-size: 350% 350%;
  animation: galleryBgMove 18s ease-in-out infinite;
}
@keyframes galleryBgMove{
  0%, 100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
.gallery-bg-pattern{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 70% 30%, rgba(139,92,246,.08), transparent 45%),
    radial-gradient(circle at 30% 70%, rgba(236,72,153,.08), transparent 45%);
  background-size: 220% 220%;
  animation: galleryPatternMove 15s ease-in-out infinite;
  pointer-events:none;
}
@keyframes galleryPatternMove{
  0%, 100%{ background-position: 0% 0%; }
  50%{ background-position: 100% 100%; }
}
.gallery-section .container{ z-index:1; }
.gallery-reveal{
  opacity:0;
  transform: translateY(20px);
  transition: opacity .45s ease, transform .45s ease;
  transition-delay: calc(0.05s * (var(--gallery-order, 0)));
}
.gallery-reveal.revealed{
  opacity:1;
  transform: translateY(0);
}
.gallery-title{
  background: linear-gradient(90deg, #0f172a, #4b5563);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gallery-subtitle{ color: #475569; }
.gallery-item .gallery-img-wrap{ display: block; }
.gallery-grid .gallery-img-wrap img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:14px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.gallery-grid .gallery-item:hover .gallery-img-wrap img{
  transform: scale(1.05);
  box-shadow: 0 12px 28px rgba(15,23,42,.15);
}
.gallery-video-card{
  transition: transform .3s ease, box-shadow .3s ease;
}
.gallery-video-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(139,92,246,.15);
}

/* Event detail page: background + reveal + cards */
.event-detail-section{
  position:relative;
  overflow:hidden;
  background: linear-gradient(165deg, #fef3f8 0%, #f8fafc 25%, #f0f9ff 50%, #ede9fe 75%, #fce7f3 100%);
  background-size: 400% 400%;
  animation: eventDetailBgMove 22s ease-in-out infinite;
}
@keyframes eventDetailBgMove{
  0%, 100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
.event-detail-bg-pattern{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 25%, rgba(236,72,153,.1), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(139,92,246,.1), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(59,130,246,.06), transparent 55%);
  background-size: 250% 250%;
  animation: eventDetailPatternMove 20s ease-in-out infinite;
  pointer-events:none;
}
@keyframes eventDetailPatternMove{
  0%, 100%{ background-position: 0% 0%; }
  50%{ background-position: 100% 100%; }
}
.event-detail-section .container{ z-index:1; }
.event-detail-reveal{
  opacity:0;
  transform: translateY(22px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(0.07s * (var(--event-detail-order, 0)));
}
.event-detail-reveal.revealed{
  opacity:1;
  transform: translateY(0);
}
.event-detail-title{
  background: linear-gradient(90deg, #0f172a, #6b21a8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.event-detail-desc{ color: #475569 !important; }
.event-detail-card{
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(254,242,248,.5));
  border: 1px solid rgba(236,72,153,.15);
  transition: transform .3s ease, box-shadow .3s ease;
}
.event-detail-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(236,72,153,.15);
}
.event-detail-gallery .event-detail-gallery-item img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:14px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.event-detail-gallery .event-detail-gallery-item:hover img{
  transform: scale(1.04);
  box-shadow: 0 12px 28px rgba(15,23,42,.12);
}
.event-detail-video-card{
  transition: transform .3s ease, box-shadow .3s ease;
}
.event-detail-video-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(139,92,246,.12);
}

/* Categories page (Top Categories list) */
.categories-page-section{
  position:relative;
  overflow:hidden;
  background: linear-gradient(150deg, #eff6ff 0%, #f8fafc 30%, #fce7f3 60%, #f5f3ff 100%);
  background-size: 350% 350%;
  animation: categoriesPageBgMove 19s ease-in-out infinite;
}
@keyframes categoriesPageBgMove{
  0%, 100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
.categories-page-bg-pattern{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 25% 75%, rgba(236,72,153,.1), transparent 45%),
    radial-gradient(circle at 75% 25%, rgba(139,92,246,.1), transparent 45%);
  background-size: 220% 220%;
  animation: categoriesPagePatternMove 17s ease-in-out infinite;
  pointer-events:none;
}
@keyframes categoriesPagePatternMove{
  0%, 100%{ background-position: 0% 0%; }
  50%{ background-position: 100% 100%; }
}
.categories-page-section .container{ z-index:1; }
.categories-reveal{
  opacity:0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(0.06s * (var(--categories-order, 0)));
}
.categories-reveal.revealed{
  opacity:1;
  transform: translateY(0);
}
.categories-page-title{
  background: linear-gradient(90deg, #0f172a, #6b21a8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.categories-page-subtitle{ color: #475569; }
.categories-page-card{
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(254,242,248,.35));
  border: 1px solid rgba(236,72,153,.1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.categories-page-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(236,72,153,.14);
}
.categories-page-card .categories-page-card-img{ overflow:hidden; }
.categories-page-card .categories-page-card-img img{ transition: transform .4s ease; }
.categories-page-card:hover .categories-page-card-img img{ transform: scale(1.06); }

/* Category page (single category + events list) */
.category-page-section{
  position:relative;
  overflow:hidden;
  background: linear-gradient(160deg, #f5f3ff 0%, #faf5ff 30%, #f8fafc 60%, #eff6ff 100%);
  background-size: 380% 380%;
  animation: categoryPageBgMove 21s ease-in-out infinite;
}
@keyframes categoryPageBgMove{
  0%, 100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
.category-page-bg-pattern{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 20%, rgba(139,92,246,.09), transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(236,72,153,.09), transparent 45%);
  background-size: 240% 240%;
  animation: categoryPagePatternMove 18s ease-in-out infinite;
  pointer-events:none;
}
@keyframes categoryPagePatternMove{
  0%, 100%{ background-position: 0% 0%; }
  50%{ background-position: 100% 100%; }
}
.category-page-section .container{ z-index:1; }
.category-reveal{
  opacity:0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(0.07s * (var(--category-order, 0)));
}
.category-reveal.revealed{
  opacity:1;
  transform: translateY(0);
}
.category-page-title{
  background: linear-gradient(90deg, #0f172a, #4b5563);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.category-sidebar-card{
  background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,250,252,.9));
  border: 1px solid rgba(148,163,184,.15);
  transition: transform .3s ease, box-shadow .3s ease;
}
.category-sidebar-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(15,23,42,.1);
}
.category-sidebar-card .category-sidebar-img{ overflow:hidden; }
.category-sidebar-card .category-sidebar-img img{ transition: transform .4s ease; }
.category-sidebar-card:hover .category-sidebar-img img{ transform: scale(1.05); }
.category-event-card{
  transition: transform .3s ease, box-shadow .3s ease;
}
.category-event-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(139,92,246,.12);
}

.gallery-grid img{ width:100%; height:220px; object-fit:cover; border-radius:14px; }

.why-video-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(236,72,153,.18), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(59,130,246,.2), transparent 60%),
    linear-gradient(135deg, #020617, #111827 40%, #020617 80%),
    url('../uploads/events/why.jpeg') center/cover no-repeat;
  background-size: 180% 180%;
  animation: whyGradientMove 18s ease-in-out infinite;
}
.why-video-wrapper{
  display:none;
}
.why-video-section .container{
  position:relative;
  z-index:1;
}

@keyframes whyGradientMove{
  0%{ background-position: 0% 0%; }
  50%{ background-position: 100% 100%; }
  100%{ background-position: 0% 0%; }
}

/* Home page: Explore all pages section */
.home-pages-section{
  position:relative;
  overflow:hidden;
  background: linear-gradient(170deg, #f8fafc 0%, #fce7f3 35%, #ede9fe 70%, #eff6ff 100%);
  background-size: 320% 320%;
  animation: homePagesBgMove 18s ease-in-out infinite;
}
@keyframes homePagesBgMove{
  0%, 100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
.home-pages-bg-pattern{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 70%, rgba(236,72,153,.08), transparent 45%),
    radial-gradient(circle at 70% 30%, rgba(139,92,246,.08), transparent 45%);
  background-size: 200% 200%;
  animation: homePagesPatternMove 14s ease-in-out infinite;
  pointer-events:none;
}
@keyframes homePagesPatternMove{
  0%, 100%{ background-position: 0% 0%; }
  50%{ background-position: 100% 100%; }
}
.home-pages-section .container{ z-index:1; }
.home-pages-reveal{
  opacity:0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(0.06s * (var(--home-pages-order, 0)));
}
.home-pages-reveal.revealed{
  opacity:1;
  transform: translateY(0);
}
.home-pages-title{
  background: linear-gradient(90deg, #0f172a, #6b21a8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-page-card{
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,252,.9));
  border: 1px solid rgba(148,163,184,.15);
  transition: transform .3s ease, box-shadow .3s ease;
}
.home-page-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(236,72,153,.15);
}
.home-page-icon{
  transition: transform .25s ease;
}
.home-page-card:hover .home-page-icon{
  transform: scale(1.1);
}

.floating-btn{
  position:fixed; bottom:22px; width:54px; height:54px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none; z-index:9999;
  box-shadow:0 14px 25px rgba(0,0,0,.18);
  transition: transform .15s, opacity .15s;
}
.floating-btn:hover{ transform: scale(1.05); opacity:.95; }
.floating-back{ left:22px; background:#0b5ed7; }
.floating-whatsapp{ right:22px; background:#25d366; font-size:1.2rem; }

/* Celebration balloons */
.balloon{
  position:fixed;
  bottom:-80px;
  width:28px;
  height:36px;
  border-radius:50% 50% 50% 50%;
  z-index:9998;
  opacity:.9;
  animation: balloonUp 3.2s ease-out forwards;
}
.balloon::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-18px;
  width:2px;
  height:18px;
  transform:translateX(-50%);
  background:rgba(15,23,42,.45);
}

@keyframes balloonUp{
  0%{ transform:translateY(0) scale(1); }
  60%{ transform:translateY(-60vh) scale(1.05); }
  100%{ transform:translateY(-100vh) scale(.9); opacity:0; }
}

.celebration-light{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 0%, rgba(236,72,153,.35), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(59,130,246,.35), transparent 55%);
  mix-blend-mode: screen;
  opacity:0;
  animation: lightPulse .8s ease-out forwards;
  z-index: 9997;
}

@keyframes lightPulse{
  0%{ opacity:0; }
  30%{ opacity:1; }
  100%{ opacity:0; }
}

/* About Us page: background image + animations */
.about-page-section{
  position:relative;
  min-height:60vh;
  background:
    url('../uploads/events/about-bg.jpg') center/cover no-repeat;
  background-attachment: fixed;
}
.about-page-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(15,23,42,.75), rgba(88,28,135,.6));
  animation: aboutOverlayPulse 12s ease-in-out infinite;
}
@keyframes aboutOverlayPulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:.85; }
}
.about-page-section .about-content{ z-index:1; }
.about-card{
  background: rgba(15,23,42,.85);
  border: 1px solid rgba(248,250,252,.2);
  backdrop-filter: blur(10px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.about-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.about-reveal{
  opacity:0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(0.08s * (var(--reveal-order, 0)));
}
.about-reveal.revealed{
  opacity:1;
  transform: translateY(0);
}

/* About: image slides in from left, content from right */
.about-reveal-from-left{
  transform: translateX(-48px);
}
.about-reveal-from-left.revealed{
  transform: translateX(0);
}
.about-reveal-from-right{
  transform: translateX(48px);
}
.about-reveal-from-right.revealed{
  transform: translateX(0);
}

/* About left-side image: proportional height so it balances with content */
.about-side-image{
  width:100%;
  height:280px;
  object-fit:cover;
}
@media (min-width: 992px){
  .about-side-image{
    height:320px;
  }
}
@media (max-width: 767.98px){
  .about-side-image{
    height:220px;
  }
}