body {
      background: radial-gradient(circle at top, #2d0b52 0%, #090014 45%, #030008 100%);
      overflow-x: hidden;
      font-family: 'Segoe UI', sans-serif;
    }

    html { scroll-behavior: smooth;}

    /* PCでは改行しない */

    .sp-br{

      display:none;

    }

    /* スマホだけ改行 */

    @media(max-width:768px){

      .sp-br{

        display:block;

      }

    }



    .px-6 {
      padding-top: 1.5em;
    }

    .neon-text {
      text-shadow:
        0 0 5px #ff4fd8,
        0 0 10px #ff4fd8,
        0 0 20px #ff4fd8;
    }

    .neon-box {
      border: 2px solid rgba(255, 0, 200, 0.5);
      box-shadow:
        0 0 10px rgba(255, 0, 200, 0.5),
        0 0 25px rgba(162, 0, 255, 0.4);
      backdrop-filter: blur(12px);
    }

    .glow-btn {
      background: linear-gradient(90deg, #ff4fd8, #8b5cf6);
      box-shadow:
        0 0 10px #ff4fd8,
        0 0 20px #8b5cf6;
      transition: 0.3s;
    }

    .glow-btn:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow:
        0 0 20px #ff4fd8,
        0 0 40px #8b5cf6;
    }

    .floating {
      animation: floating 4s ease-in-out infinite;
    }

    @keyframes floating {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-12px); }
      100% { transform: translateY(0px); }
    }

    .fade-up {
      opacity: 0;
      transform: translateY(30px);
      transition: all 1s ease;
    }

    .fade-up.show {
      opacity: 1;
      transform: translateY(0);
    }

    .game-card:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow:
        0 0 20px rgba(255, 0, 200, 0.6),
        0 0 40px rgba(162, 0, 255, 0.5);
    }

    .particles {
      position: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: -1;
      top: 0;
      left: 0;
    }

    .particle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: #ff4fd8;
      border-radius: 50%;
      animation: move 15s linear infinite;
      opacity: 0.7;
    }

    @keyframes move {
      from {
        transform: translateY(100vh);
      }
      to {
        transform: translateY(-100vh);
      }
    }

    .status-sec h5 {
      font-size: 1.5em;
      margin: 1.2em 0 0.6em;
      font-weight: bold;
    }

    .rule-sec {
      margin-bottom: 3em;
    }
    .rule-sec h5 {
      font-size: 1.5em;
      margin: 1.2em 0 0.6em;
      font-weight: bold;
    }
    .rule-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,0,200,0.3);
      border-radius: 24px;
      overflow: hidden;
      backdrop-filter: blur(12px);
      box-shadow: 0 0 20px rgba(255,0,200,0.2);
      padding: 20px;
    }
    .attention{
      color: #ffe300;
      font-size: 1.5em;
      font-weight: bold;
    }
    .ban{
      color: #f00;
      font-size: 1.5em;
      font-weight: bold;
    }
    .rule-card ul {
      list-style: none;
      padding: 0;
    }
    .rule-card li {
      padding: 10px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }




    .games-sec {
      margin-bottom: 4em;
    }

/* ========================= */
/* Server Status */
/* ========================= */

.status-section{

  padding:100px 40px;

}

.section-title{

  text-align:center;

  font-size:56px;

  margin-bottom:60px;

  color:white;

  text-shadow:
    0 0 10px #ff00c8,
    0 0 20px #ff00c8,
    0 0 40px #ff00c8;

}

/* ========================= */
/* Grid */
/* ========================= */

.grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(400px,1fr));

  gap:40px;

}

/* ========================= */
/* Card */
/* ========================= */

.status-card{

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,0,200,0.3);

  border-radius:32px;

  padding:35px;

  backdrop-filter:blur(12px);

  box-shadow:
    0 0 20px rgba(255,0,200,0.2);

  transition:0.3s;

}

/* ========================= */
/* Top */
/* ========================= */

.status-top{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:30px;

}

.status-top h3{

  font-size: 1.5em;
  margin: 0;
  font-weight: bold;

}

/* ========================= */
/* Rows */
/* ========================= */

.status-row{

  display:flex;

  justify-content:space-between;

  margin:18px 0;

  font-size:18px;

  border-bottom:
    1px solid rgba(255,255,255,0.08);

  padding: 0 10px 10px 10px;

}

/* ========================= */
/* ONLINE */
/* ========================= */

.online{

  color:#00ff88;

  font-size:30px;

  font-weight:bold;

  text-shadow:
    0 0 10px #00ff88,
    0 0 20px #00ff88,
    0 0 40px #00ff88;

  animation:pulse 1.5s infinite;

}

.offline{

  color:#ff0055;

  font-size:24px;

  font-weight:bold;

  text-shadow:
    0 0 10px #ff0055;

}

/* ========================= */
/* Progress */
/* ========================= */

.progress{

  margin-top:0px;

  width:100%;

  height:18px;

  background:
    rgba(255,255,255,0.08);

  border-radius:999px;

  overflow:hidden;

}

.progress-bar{

  height:100%;

  width:0%;

  background:
    linear-gradient(
      90deg,
      #ff00c8,
      #8b5cf6
    );

  box-shadow:
    0 0 20px #ff00c8;

  transition:1s;

}

/* ========================= */
/* Animation */
/* ========================= */

@keyframes pulse{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.08);
  }

  100%{
    transform:scale(1);
  }

}





/* ========================= */
/* Header */
/* ========================= */

.header{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:20px 40px;

  z-index:999;

  background:
    rgba(0,0,0,0.4);

  backdrop-filter:blur(12px);

}

/* ========================= */
/* Nav */
/* ========================= */

.nav{

  display:flex;

  gap:30px;

}

.nav a{

  color:white;

  text-decoration:none;

  font-size:18px;

  transition:0.3s;

}

.nav a:hover{

  color:#ff00c8;

  text-shadow:
    0 0 10px #ff00c8;

}

/* ========================= */
/* Hamburger */
/* ========================= */

.hamburger{

  display:none;

  flex-direction:column;

  gap:6px;

  cursor:pointer;

  z-index:1001;

}

.hamburger span{

  width:30px;

  height:3px;

  background:white;

  border-radius:999px;

  transition:0.3s;

  box-shadow:
    0 0 10px #ff00c8;

}

/* ========================= */
/* Mobile */
/* ========================= */

@media(max-width:768px){

  .hamburger{

    display:flex;

  }

  .nav{

    position:fixed;

    top:0;
    right:-100%;

    width:70%;

    height:100vh;

    background:
      rgba(10,0,20,0.95);

    backdrop-filter:blur(20px);

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:40px;

    transition:0.4s;

    box-shadow:
      0 0 40px rgba(255,0,200,0.4);

  }

  .nav.active{

    right:0;

  }

  .nav a{

    font-size:24px;

  }

}





/* ========================= */
/* Hero Buttons */
/* ========================= */

.hero-buttons{

  display:flex;

  align-items:center;

  justify-content:center;

  flex-wrap:wrap;

  gap:20px;

  margin-top:50px;

}

/* ========================= */
/* Base */
/* ========================= */

.hero-social-btn{

  min-width:220px;

  height:68px;

  padding:0 32px;

  border-radius:999px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:14px;

  text-decoration:none;

  font-size:18px;

  font-weight:900;

  color:white;

  position:relative;

  overflow:hidden;

  backdrop-filter:blur(14px);

  border:
    1px solid rgba(255,255,255,0.12);

  transition:0.35s;

}

/* ========================= */
/* Hover */
/* ========================= */

.hero-social-btn:hover{

  transform:
    translateY(-5px)
    scale(1.03);

}

/* ========================= */
/* Icon */
/* ========================= */

.hero-social-btn .icon{

  font-size:26px;

  line-height:1;

}

/* ========================= */
/* X */
/* ========================= */

.x-btn{

  background:
    linear-gradient(
      135deg,
      #111111,
      #2f2f2f
    );

  box-shadow:
    0 0 30px rgba(255,255,255,0.12);

}

.x-btn:hover{

  box-shadow:
    0 0 40px rgba(255,255,255,0.4);

}

/* ========================= */
/* FANBOX */
/* ========================= */

.fanbox-btn{

  background:
    linear-gradient(
      135deg,
      #ff00c8,
      #ff4fd8
    );

  box-shadow:
    0 0 30px rgba(255,0,200,0.35);

}

.fanbox-btn:hover{

  box-shadow:
    0 0 50px rgba(255,0,200,0.7);

}

/* ========================= */
/* BOOTH */
/* ========================= */

.booth-btn{

  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #a855f7
    );

  box-shadow:
    0 0 30px rgba(168,85,247,0.35);

}

.booth-btn:hover{

  box-shadow:
    0 0 50px rgba(168,85,247,0.7);

}


.hero-social-btn img{

  width:28px;

  height:28px;

  object-fit:contain;

  flex-shrink:0;

}

.x-icon{

  filter:
    drop-shadow(
      0 0 10px rgba(255,255,255,0.4)
    );

}
.fanbox-icon{

  filter:
    drop-shadow(
      0 0 10px rgba(255,255,255,0.4)
    );

}
@media(min-width:769px){

  .fanbox-icon{

    display:none;

  }

}
.booth-icon{

  filter:
    brightness(0)
    invert(1)
    drop-shadow(
      0 0 10px rgba(255,255,255,0.4)
    );

}


/* ========================= */
/* Mobile */
/* ========================= */

@media(max-width:768px){

  .hero-buttons{

    flex-direction:row;

    justify-content:center;

    gap:18px;

  }

  /* 丸ボタン化 */

  .hero-social-btn{

    width:72px;

    height:72px;

    min-width:auto;

    padding:0;

    border-radius:999px;

  }

  /* テキスト消す */

  .hero-social-btn span:not(.icon){

    display:none;

  }

  /* アイコン中央 */

  .hero-social-btn .icon{

    font-size:30px;

  }

  /* imgアイコン */

  .hero-social-btn img{

    width:34px;

    height:34px;

  }

}



/* ========================= */
/* News */
/* ========================= */

.news-section{

  position:relative;

}

/* ========================= */
/* Top */
/* ========================= */

.news-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-bottom:0;

  padding:18px 24px;

  border-bottom:
    1px solid rgba(255,0,200,0.4);

  border-radius:20px 20px 0 0;

  background:
    rgba(10,0,25,0.85);

  box-shadow:
    0 0 20px rgba(255,0,200,0.2);

}

.news-heading{

  display:flex;

  align-items:center;

  gap:14px;

}

.news-heading h2{

  font-size:38px;

  font-weight:900;

  color:white;

}

.news-icon{

  width:46px;

  height:46px;

  border-radius:12px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:
    linear-gradient(
      135deg,
      #ff00c8,
      #8b5cf6
    );

  box-shadow:
    0 0 20px rgba(255,0,200,0.5);

  font-size:22px;

}

/* ========================= */
/* More Button */
/* ========================= */

.more-news-btn{

  display:flex;

  align-items:center;

  gap:10px;

  padding:12px 20px;

  border-radius:999px;

  text-decoration:none;

  font-weight:bold;

  color:white;

  border:
    1px solid rgba(255,0,200,0.5);

}



/* ========================= */
/* List */
/* ========================= */

.news-list{

  border-top:none;

  border-radius:0 0 20px 20px;

  overflow:hidden;

  background:
    rgba(5,0,15,0.85);

  backdrop-filter:blur(12px);

}

/* ========================= */
/* Item */
/* ========================= */

.news-item{

  display:grid;

  grid-template-columns:
    120px
    80px
    1fr
    40px;

  align-items:center;

  gap:24px;

  padding:24px 28px;

  text-decoration:none;

  color:white;

  border-bottom:
    1px solid rgba(255,255,255,0.08);

  transition:0.3s;

}

.news-item:last-child{

  border-bottom:none;

}

.news-item:hover{

  background:
    rgba(255,0,200,0.08);

}

/* ========================= */
/* Date */
/* ========================= */

.news-date{

  font-size:15px;

  color:rgba(255,255,255,0.7);

}

/* ========================= */
/* Badge */
/* ========================= */

.news-badge{

  width:60px;

  height:28px;

  border-radius:8px;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:13px;

  font-weight:900;

  color:black;

  background:#ffe600;

}

/* ========================= */
/* Content */
/* ========================= */

.news-content h3{

  font-size:22px;

  font-weight:800;

  margin-bottom:8px;

}

.news-content p{

  color:rgba(255,255,255,0.6);

  font-size:15px;

}

/* ========================= */
/* Arrow */
/* ========================= */

.news-arrow{

  font-size:34px;

  color:#ff00c8;

  transition:0.3s;

}

.news-item:hover
.news-arrow{

  transform:
    translateX(6px);

}

/* ========================= */
/* Mobile */
/* ========================= */

@media(max-width:768px){

  .news-top{

    flex-direction:column;

    gap:18px;

    align-items:flex-start;

  }

  .news-heading h2{

    font-size:24px;

  }

  .news-item{

    grid-template-columns:
      1fr;

    gap:12px;

    padding:24px;

  }

  .news-arrow{

    display:none;

  }

}




/* ========================= */
/* Events */
/* ========================= */

.events-section{

  position:relative;

  overflow:hidden;

}

/* ========================= */
/* Heading */
/* ========================= */

.events-heading{

  text-align:center;

  margin-bottom:80px;

}

.events-sub{

  display:inline-block;

  margin-bottom:20px;

  padding:10px 22px;

  border-radius:999px;

  background:
    rgba(255,0,200,0.12);

  border:
    1px solid rgba(255,0,200,0.4);

  color:#ff4fd8;

  font-weight:900;

  letter-spacing:2px;

}

.events-desc{

  margin-top:20px;

  color:
    rgba(255,255,255,0.7);

  font-size:18px;

}

/* ========================= */
/* Main Event */
/* ========================= */

.main-event{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:80px;

  padding:70px;

  border-radius:40px;

  overflow:hidden;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,0,200,0.25);

  backdrop-filter:blur(18px);

  box-shadow:
    0 0 40px rgba(255,0,200,0.15);

  margin-bottom:60px;

}

/* ========================= */
/* Glow */
/* ========================= */

.event-glow{

  position:absolute;

  top:-200px;
  right:-200px;

  width:500px;
  height:500px;

  background:
    radial-gradient(
      circle,
      rgba(255,0,200,0.25),
      transparent 70%
    );

  pointer-events:none;

}

/* ========================= */
/* Left */
/* ========================= */

.main-event-content{

  position:relative;

  z-index:2;

  flex:1;

}

.main-event-title{

  font-size:62px;

  line-height:1;

  font-weight:900;

  margin:24px 0;

  color:white;

  text-shadow:
    0 0 20px rgba(255,0,200,0.4);

}

.main-event-text{

  max-width:600px;

  color:
    rgba(255,255,255,0.7);

  line-height:1.9;

  margin-bottom:30px;

}

/* ========================= */
/* Status */
/* ========================= */

.event-status{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:10px 20px;

  border-radius:999px;

  font-size:13px;

  font-weight:900;

  letter-spacing:1px;

}

.live{

  background:
    rgba(255,0,200,0.18);

  color:#ff4fd8;

  border:
    1px solid rgba(255,0,200,0.4);

}

.upcoming{

  background:
    rgba(59,130,246,0.18);

  color:#60a5fa;

}

.ended-status{

  background:
    rgba(255,255,255,0.08);

  color:
    rgba(255,255,255,0.5);

}

/* ========================= */
/* Tags */
/* ========================= */

.event-tags{

  display:flex;

  flex-wrap:wrap;

  gap:14px;

  margin-bottom:36px;

}

.event-tags span{

  padding:10px 18px;

  border-radius:999px;

  background:
    rgba(255,255,255,0.08);

  border:
    1px solid rgba(255,255,255,0.08);

  color:white;

  font-size:14px;

  font-weight:bold;

}

/* ========================= */
/* Countdown */
/* ========================= */

.event-countdown{

  display:flex;

  gap:20px;

  margin-bottom:40px;

}

.count-item{

  width:100px;
  height:100px;

  border-radius:24px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  background:
    rgba(255,255,255,0.06);

  border:
    1px solid rgba(255,255,255,0.08);

}

.count-item strong{

  font-size:38px;

  font-weight:900;

  color:white;

}

.count-item span{

  font-size:12px;

  letter-spacing:2px;

  color:
    rgba(255,255,255,0.5);

}

/* ========================= */
/* Event Start Date */
/* ========================= */

.event-start-date{

  display:flex;

  flex-direction:column;

  gap:10px;

  margin-bottom:28px;

}

/* Label */

.event-start-date .label{

  display:inline-flex;

  align-items:center;

  width:max-content;

  padding:8px 16px;

  border-radius:999px;

  background:
    rgba(255,0,200,0.12);

  border:
    1px solid rgba(255,0,200,0.3);

  color:#ff4fd8;

  font-size:12px;

  font-weight:900;

  letter-spacing:2px;

}

/* Date */

.event-start-date strong{

  font-size:32px;

  font-weight:900;

  line-height:1.2;

  color:white;

  text-shadow:
    0 0 20px rgba(255,0,200,0.3);

}

/* ========================= */
/* Visual Buttons */
/* ========================= */

.visual-buttons{

  margin-top:30px;

  justify-content:center;

}

/* ========================= */
/* Mobile */
/* ========================= */

@media(max-width:768px){

  .visual-buttons{

    width:100%;

    flex-direction:column;

  }

}

/* 秒だけ点滅 */
#seconds{

  animation:
    blink 1s infinite;

}

@keyframes blink{

  50%{

    opacity:0.4;

  }

}


/* ========================= */
/* NOW LIVE */
/* ========================= */

.event-live{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:14px;

  width:100%;

  max-width:420px;

  height:100px;

  border-radius:30px;

  font-size:48px;

  font-weight:900;

  line-height:1;

  letter-spacing:4px;

  color:white;

  background:
    linear-gradient(
      90deg,
      #00ff88,
      #00c76f
    );

  border:
    1px solid rgba(0,255,136,0.5);

  box-shadow:
    0 0 40px rgba(0,255,136,0.5);

}

.event-live::before{

  content:'●';

  flex-shrink:0;

  color:#ff3b3b;

  font-size:50px;

  position:relative;

  top:-5px;

  text-shadow:
    0 0 10px #ff3b3b,
    0 0 20px #ff3b3b;

  animation:
    blinkLive 1s infinite,
    liveDotPulse 1.5s infinite;

}
@keyframes liveDotPulse{

  0%{

    transform:scale(1);

  }

  50%{

    transform:scale(1.25);

  }

  100%{

    transform:scale(1);

  }

}


@keyframes blinkLive{

  50%{

    opacity:0.4;

  }

}

/* ========================= */
/* Animation */
/* ========================= */

@keyframes livePulse{

  0%{

    transform:scale(1);

    box-shadow:
      0 0 30px rgba(0,255,136,0.4);

  }

  50%{

    transform:scale(1.03);

    box-shadow:
      0 0 60px rgba(0,255,136,1);

  }

  100%{

    transform:scale(1);

    box-shadow:
      0 0 30px rgba(0,255,136,0.4);

  }

}

/* ========================= */
/* Buttons */
/* ========================= */

.event-buttons{

  display:flex;

  gap:18px;

}

.event-btn{

  padding:16px 30px;

  border-radius:999px;

  text-decoration:none;

  font-weight:900;

  transition:0.3s;

}

.primary{

  background:
    linear-gradient(
      90deg,
      #ff00c8,
      #8b5cf6
    );

  color:white;

  box-shadow:
    0 0 30px rgba(255,0,200,0.4);

}

.primary:hover{

  transform:translateY(-4px);

  box-shadow:
    0 0 50px rgba(255,0,200,0.8);

}

.secondary{

  border:
    1px solid rgba(255,255,255,0.15);

  color:white;

}

.secondary:hover{

  background:
    rgba(255,255,255,0.08);

}

/* ========================= */
/* Right */
/* ========================= */

.main-event-visual{

  position:relative;

  width:420px;

  flex-shrink:0;

}

.main-event-visual img{

  width:100%;

  position:relative;

  z-index:2;

  filter:
    drop-shadow(
      0 0 40px rgba(255,0,200,0.4)
    );

}

.event-circle{

  position:absolute;

  inset:0;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,0,200,0.25),
      transparent 70%
    );

  animation:
    pulse 4s infinite;

}

@keyframes pulse{

  0%{

    transform:scale(1);

  }

  50%{

    transform:scale(1.08);

  }

  100%{

    transform:scale(1);

  }

}

/* ========================= */
/* Grid */
/* ========================= */

.event-grid{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:24px;

}

.event-card{

  padding:34px;

  border-radius:30px;

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(255,255,255,0.08);

  transition:0.3s;

}

.event-card:hover{

  transform:translateY(-6px);

  border-color:
    rgba(255,0,200,0.4);

}

.event-card h3{

  margin:22px 0 14px;

  font-size:28px;

  font-weight:900;

  color:white;

}

.event-card p{

  color:
    rgba(255,255,255,0.65);

  line-height:1.8;

}

.event-meta{

  margin-top:26px;

  color:#ff4fd8;

  font-weight:bold;

}

.ended{

  opacity:0.6;

}

/* ========================= */
/* Mobile */
/* ========================= */

@media(max-width:968px){

  .main-event{

    flex-direction:column;

    padding:40px;

    gap:40px;

  }

  .main-event-title{

    font-size:42px;

  }

  .main-event-visual{

    width:100%;

    max-width:320px;

  }

  .event-grid{

    grid-template-columns:1fr;

  }

}

@media(max-width:768px){

  .main-event{

    padding:30px;

  }

  .main-event-title{

    font-size:34px;

  }

  .event-countdown{

    gap:12px;

  }

  .count-item{

    width:80px;
    height:80px;

  }

  .count-item strong{

    font-size:28px;

  }

  .event-buttons{

    flex-direction:column;

  }

  .event-btn{

    text-align:center;

  }

}




/* ========================= */
/* Event Banner */
/* ========================= */

.event-banner{

  position:relative;

  overflow:hidden;

  margin:120px auto;

  padding:80px 60px;

  border-radius:40px;

  max-width:1400px;

  background:
    linear-gradient(
      135deg,
      rgba(255,0,200,0.15),
      rgba(139,92,246,0.12)
    );

  border:
    1px solid rgba(255,0,200,0.25);

  backdrop-filter:blur(20px);

  box-shadow:
    0 0 50px rgba(255,0,200,0.15);

}

/* ========================= */
/* Glow */
/* ========================= */

.event-banner::before{

  content:'';

  position:absolute;

  top:-200px;
  right:-200px;

  width:500px;
  height:500px;

  background:
    radial-gradient(
      circle,
      rgba(255,0,200,0.35),
      transparent 70%
    );

  pointer-events:none;

}

.event-banner::after{

  content:'';

  position:absolute;

  bottom:-250px;
  left:-250px;

  width:600px;
  height:600px;

  background:
    radial-gradient(
      circle,
      rgba(139,92,246,0.2),
      transparent 70%
    );

  pointer-events:none;

}

/* ========================= */
/* Content */
/* ========================= */

.event-banner-content{

  position:relative;

  z-index:2;

  max-width:700px;

}

/* ========================= */
/* Label */
/* ========================= */

.event-banner-content span{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:12px 22px;

  border-radius:999px;

  margin-bottom:24px;

  background:
    rgba(255,0,200,0.15);

  border:
    1px solid rgba(255,0,200,0.4);

  color:#ff4fd8;

  font-size:14px;

  font-weight:900;

  letter-spacing:2px;

  box-shadow:
    0 0 20px rgba(255,0,200,0.2);

}

/* ========================= */
/* Title */
/* ========================= */

.event-banner-content h2{

  font-size:72px;

  line-height:1.05;

  font-weight:900;

  color:white;

  margin-bottom:24px;

  text-shadow:
    0 0 30px rgba(255,0,200,0.35);

}

/* ========================= */
/* Text */
/* ========================= */

.event-banner-content p{

  color:
    rgba(255,255,255,0.7);

  font-size:18px;

  line-height:1.9;

  margin-bottom:40px;

}

/* ========================= */
/* Button */
/* ========================= */

.event-banner .glow-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:18px 34px;

  border-radius:999px;

  text-decoration:none;

  font-size:18px;

  font-weight:900;

  color:white;

  background:
    linear-gradient(
      90deg,
      #ff00c8,
      #8b5cf6
    );

  box-shadow:
    0 0 30px rgba(255,0,200,0.35);

  transition:0.35s;

}

.event-banner .glow-btn:hover{

  transform:
    translateY(-5px)
    scale(1.03);

  box-shadow:
    0 0 60px rgba(255,0,200,0.8);

}

/* ========================= */
/* Floating Line */
/* ========================= */

.event-banner-line{

  position:absolute;

  top:50%;

  right:-100px;

  width:500px;
  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,0,200,0.7),
      transparent
    );

  transform:rotate(-20deg);

  animation:
    lineMove 6s linear infinite;

  opacity:0.5;

}

@keyframes lineMove{

  0%{

    transform:
      rotate(-20deg)
      translateX(0);

  }

  100%{

    transform:
      rotate(-20deg)
      translateX(-120px);

  }

}

/* ========================= */
/* Mobile */
/* ========================= */

@media(max-width:968px){

  .event-banner{

    padding:60px 40px;

  }

  .event-banner-content h2{

    font-size:52px;

  }

}

@media(max-width:768px){

  .event-banner{

    margin:80px 20px;

    padding:40px 28px;

    border-radius:30px;

  }

  .event-banner-content h2{

    font-size:38px;

    line-height:1.2;

  }

  .event-banner-content p{

    font-size:16px;

  }

  .event-banner .glow-btn{

    width:100%;

  }

}





/* ========================= */
/* Slider */
/* ========================= */

.gallery-slider-section{

  padding:20px 40px 5em;

}
.swiper-wrapper{

  transition-timing-function:
    linear !important;
}

.gallerySwiper{

  width:100%;

  padding:1em 0 60px 0 !important;

}

.swiper-slide{

  overflow:hidden;

  border-radius:32px;

  border:
    1px solid rgba(255,0,200,0.3);

  background:
    rgba(255,255,255,0.05);

  backdrop-filter:blur(12px);

  box-shadow:
    0 0 20px rgba(255,0,200,0.2);
  
  box-shadow: 0 0 10px rgba(255, 0, 200, 0.5), 0 0 25px rgba(162, 0, 255, 0.4);

  transition:0.3s;

  width: 425px !important;

  margin: 0 1em;

  flex-shrink:0;
}


.swiper-slide img{

  width:100%;

  height:360px;

  object-fit:cover;

  display:block;

}

.swiper-slide:hover img{

  transform:scale(1.05);

}

/* ========================= */
/* Navigation */
/* ========================= */

.swiper-button-next,
.swiper-button-prev{

  display: none !important;
  color:#ff00c8;

  text-shadow:
    0 0 10px #ff00c8;

}

.swiper-pagination-bullet{

  background:#ff00c8;

}

/* ========================= */
/* Mobile */
/* ========================= */

@media(max-width:768px){

  .swiper-slide {

    max-width: 200px;
  }

  .swiper-slide img{

    height:300px;
  }

  .gallery-slider-section {
    padding: 80px 0px;
  }

}

/* ========================= */
/* Modal */
/* ========================= */

.gallery-modal{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  background:
    rgba(0,0,0,0.92);

  display:none;

  justify-content:center;

  align-items:center;

  z-index:9999;

}

.gallery-modal img{

  max-width:90%;

  max-height:90%;

  border-radius:24px;

  box-shadow:
    0 0 40px #ff00c8;

}

.close-modal{

  position:absolute;

  top:30px;
  right:40px;

  color:white;

  font-size:48px;

  cursor:pointer;

}




















/* ========================= */
/* Mobile */
/* ========================= */

@media(max-width:768px){

  .section-title{

    font-size:42px;

  }

  .status-card{

    padding:25px;

  }

  .status-top h3{

    font-size:24px;

  }

  .text-5xl {
    font-size: 2rem !important;
  }
  
  .mb-10 {
    font-size: 0.9rem !important;
    line-height: 1.3rem;
  }





  .gallery-grid{

    columns:1 100%;

  }

  .gallery-modal{
    padding: 2em 3em 2em 2em;
  }

  .gallery-modal img {
    max-width: 100%;
    max-height: 90%;
    border-radius: 24px;
    box-shadow: 0 0 40px #ff00c8;
    margin: auto;
  }

  .grid {
    grid-template-columns: auto;
  }







}