#fw-section-custom-html-62028a6a-e430-4a3e-9ce4-3e6566f368ad {

.socials-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.5rem;
  margin-top:2rem;
}

.social-card{
  background:#111;
  border-radius:10px;
  padding:1.5rem;
  border:1px solid rgba(255,255,255,0.08);
  transition:all .25s ease;
}

.social-title{
  font-size:1.3rem;
  font-weight:700;
  margin-bottom:.5rem;
}

.social-desc{
  font-size:.9rem;
  opacity:.85;
  margin-bottom:1rem;
}

.social-btn{
  display:inline-block;
  padding:.45rem .9rem;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  background:#eee;
  color:#111;
}
.social-card:hover{
  transform:translateY(-5px);
}

/* Twitch */
.social-card.twitch:hover{
  box-shadow:0 0 18px rgba(145,70,255,0.6);
  border-color:#9146ff;
}

/* YouTube */
.social-card.youtube:hover{
  box-shadow:0 0 18px rgba(255,0,0,0.6);
  border-color:#ff0000;
}

/* Discord */
.social-card.discord:hover{
  box-shadow:0 0 18px rgba(88,101,242,0.6);
  border-color:#5865f2;
}

/* Twitter/X */
.social-card.twitter:hover{
  box-shadow:0 0 18px rgba(255,255,255,0.6);
  border-color:#aaaaaa;
}


/* Bluesky */
.social-card.bluesky:hover{
  box-shadow:0 0 18px rgba(17,133,254,0.6);
  border-color:#1185FE;
}

/* Instagram */
.social-card.instagram:hover{
  box-shadow:0 0 18px rgba(255,0,105,0.6);
  border-color:#FF0069;
}

/* TikTok */
.social-card.tiktok:hover{
  box-shadow:0 0 18px rgba(254,44,85,0.6);
  border-color:#FE2C55;
}

/* Steam */
.social-card.steam:hover{
  box-shadow:0 0 18px rgba(0,173,238,0.6);
  border-color:#00adee;
}

.social-header{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.4rem;
}

.social-icon{
  width:24px;
  height:24px;
}

.social-icon{
  width:24px;
  height:24px;
  filter:brightness(0) invert(1);
}

.social-card:hover .social-icon{
  transform:scale(1.1);
  transition:transform .2s ease;
}
}
#fw-section-hero-44d9a7b1-db7e-464b-b9d0-158f7384bfdf {
--color-primary: #ffd700;
--color-primary-rgb: 255, 215, 0;
--color-background: #000033;
--color-background-rgb: 0, 0, 51;
--color-on-primary: #000033;
--color-on-primary-rgb: 0, 0, 51;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 6;
background-color: var(--color-background);
color: var(--color-on-background);

}



#fw-section-custom-html-c9f122b3-429f-42b9-a7a9-6c7adae06fd6 {

/* ---------------- Timeline Section ---------------- */
.timeline-section {
  max-width: 900px;
  margin: 3em auto;
  padding: 1.5em;
  background: #000033;
  border-radius: 10px;
}

.timeline-section h2 {
  text-align: center;
  color: #ffd700;
  margin-bottom: 1.5em;
}

/* ---------------- Timeline Container ---------------- */
.timeline-container {
  position: relative;
  padding-left: 3.5em;
}

/* Main vertical line */
.timeline-container::before {
  content: "";
  position: absolute;
  left: 1.25em;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #ffd700;
  z-index: 1;
}

/* ---------------- Top Cap ---------------- */
.timeline-cap {
  position: absolute;
  top: 0;
  left: 1.374em;
  width: 14px;
  height: 14px;
  background: #ffd700;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.9);
  transform: translateX(-50%);
  z-index: 3;
}

/* ---------------- Bottom Arrow ---------------- */
.timeline-arrow {
  position: absolute;
  left: 0.91em;
  bottom: -1.0em;
  font-size: 1.5em;
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}

/* ---------------- Year Toggle ---------------- */
details {
  margin-bottom: 1.5em;
}

summary {
  cursor: pointer;
  font-size: 1.1em;
  font-weight: 600;
  color: #ffd700;
  margin-bottom: 0.75em;
}

summary:hover {
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.9);
}

/* ---------------- Timeline Items ---------------- */
.timeline-year-content {
  padding-left: 0.5em;
}

.timeline-item {
  position: relative;
  margin-bottom: 1.5em;
}

/* Dot on vertical line */
.timeline-dot {
  position: absolute;
  top: 0.4em;
  left: -2.6em;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: #ffd700;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(255, 215, 0, 1);
  z-index: 3;
}

/* Horizontal connector */
.timeline-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 2px;
  background: #ffd700;
  transform: translateX(0) translateY(-50%);
}

/* Major milestone dot */
.timeline-item.major .timeline-dot {
  width: 14px;
  height: 14px;
  box-shadow: 0 0 28px rgba(255, 215, 0, 1);
}

.timeline-item.major:hover .timeline-dot {
  box-shadow: 0 0 48px rgba(255, 215, 0, 1);
}

/* Timeline content */
.timeline-title {
  color: #ffd700;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  margin-left: 2.25em;
}

.timeline-desc {
  font-size: 0.95em;
  opacity: 0.9;
  display: inline-block;
  transition: transform 0.2s ease, text-shadow 0.2s ease;
}

/* Hover glow + jump effect only on description */
.timeline-item:hover .timeline-desc {
  text-shadow: 0 0 24px rgba(255, 215, 0, 1);
  transform: scale(1.05) translateY(-2px);
}

/* ---------------- Year Open / Close Animation ---------------- */
details .timeline-year-content {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

details[open] .timeline-year-content {
  opacity: 1;
  transform: translateY(0);
}

}
#fw-section-rich-text-f2b0837d-8807-4c80-a7c7-88c31f32f7bd {
--font-heading-scale: 2.0;
--font-body-scale: 1.0;
}
#fw-section-custom-html-fccd5df1-33d5-4168-a6d0-e09ae19be247 {

/* ------------------ Gallery Grid ------------------ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 auto;
  max-width: 1200px;
}

/* Fade-in animation for items */
.gallery-item {
  animation: fadeInUp 0.6s ease both;
}

.gallery-item:nth-child(n) {
  animation-delay: calc(var(--i, 0) * 0.05s);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gallery-item img {
  width: 100%;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Gold pulse hover */
.gallery-item img:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 12px rgba(255, 215, 0, 0.7),
    0 0 24px rgba(255, 215, 0, 0.4);
}

/* ------------------ Load More Button ------------------ */
.load-more-button {
  padding: 10px 20px;
  font-size: 1em;
  font-weight: bold;
  border-radius: 6px;
  background: #FFD700;
  color: #000033;
  border: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.load-more-button:hover {
  transform: scale(1.08);
  box-shadow:
    0 0 12px rgba(255, 215, 0, 0.8),
    0 0 30px rgba(255, 215, 0, 0.5);
}

/* ------------------ Lightbox ------------------ */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 51, 0.85);
  backdrop-filter: blur(6px);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 2em;
  z-index: 999;
  animation: fadeIn 0.3s ease;
}

.lightbox:target {
  display: flex;
}

/* Fullscreen image zoom */
.lightbox img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 8px;
  margin-bottom: 1em;
  animation: zoomIn 0.35s ease;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Caption slide-up */
.lightbox p {
  color: #FFD700;
  font-size: 1em;
  max-width: 700px;
  animation: slideUp 0.4s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Close button polish */
.lightbox .close {
  position: absolute;
  top: 1em;
  right: 2em;
  color: #FFD700;
  font-size: 2em;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.lightbox .close:hover {
  transform: scale(1.2);
  opacity: 0.85;
}

/* Fade background */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ------------------ Mobile adjustments ------------------ */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

  .lightbox p {
    font-size: 0.95em;
  }
}

}





#fw-section-hero-20c82c01-a81b-41a1-8940-83f0a98a467b {
--color-primary: #ffd700;
--color-primary-rgb: 255, 215, 0;
--color-background: #000033;
--color-background-rgb: 0, 0, 51;
--color-on-primary: #000033;
--color-on-primary-rgb: 0, 0, 51;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 6;
background-color: var(--color-background);
color: var(--color-on-background);

}

















#fw-section-hero-video-382909be-a9b8-4984-8187-34f71d4c204e {
--color-primary: #ffd700;
--color-primary-rgb: 255, 215, 0;
--color-background: #000033;
--color-background-rgb: 0, 0, 51;
--color-on-primary: #000033;
--color-on-primary-rgb: 0, 0, 51;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 6;
background-color: var(--color-background);
color: var(--color-on-background);

}

#fw-section-hero-d8a8c6df-bd55-4a81-bb19-e2629cebe554 {
--color-primary: #ffd700;
--color-primary-rgb: 255, 215, 0;
--color-background: #000033;
--color-background-rgb: 0, 0, 51;
--color-on-primary: #000033;
--color-on-primary-rgb: 0, 0, 51;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 6;
background-color: var(--color-background);
color: var(--color-on-background);

}


#fw-section-hero-video-a9f040fc-d03a-44a2-ae0d-7447b9c331c6 {
--color-primary: #ffd700;
--color-primary-rgb: 255, 215, 0;
--color-background: #000033;
--color-background-rgb: 0, 0, 51;
--color-on-primary: #000033;
--color-on-primary-rgb: 0, 0, 51;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 6;
background-color: var(--color-background);
color: var(--color-on-background);

}