#fw-section-custom-html-1f380851-f1d1-45e2-abb1-39567f8af1f3 {

.profile-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 20px;
  max-width: 800px;
  width: 100%;
  margin: 0 auto; /* ✅ This centers on the X-axis */
}

.profile-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.profile-left {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.player-img {
  width: 90px;
  border-radius: 10px;
}

.player-info h2 {
  margin: 0;
  font-size: 22px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

.player-info .info-icon {
  font-size: 16px;
  color: #777;
}

.details {
  display: grid;
  grid-template-columns: auto auto;
  gap: 5px 20px;
  margin-top: 8px;
  font-size: 14px;
  color: #444;
}

.details a {
  color: #2d74ff;
  text-decoration: none;
}

.details a:hover {
  text-decoration: underline;
}

.flag {
  font-size: 18px;
}

.profile-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.follow-btn {
  background-color: #0077ff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  font-weight: bold;
}

.follow-btn:hover {
  background-color: #005ed1;
}

.social-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 20px;
}

.social-links a {
  text-decoration: none;
  color: #333;
}

.social-links a:hover {
  color: #0077ff;
}

.bio {
  margin-top: 15px;
  font-size: 14px;
  color: #555;
  line-height: 1.4;
}

}
#fw-section-custom-html-40e20f82-780a-410b-b48f-68dce485009e {

body {
  font-family: Arial, sans-serif;
  background: #111;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.banner-wrapper h1 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  text-align: center;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  background: #222;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
  justify-content: center;
}

.controls label {
  font-weight: bold;
}

.controls input,
.controls select {
  width: 150px;
  max-width: 100%;
}

.preview-container {
  width: 100%;
  max-width: 900px;
  overflow: hidden;
}

.preview {
  position: relative;
  width: 900px;
  height: 506px; /* 16:9 */
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  transform-origin: top center;
}

@media (max-width: 900px) {
  .preview {
    transform: scale(calc(100vw / 900));
  }
}

.preview img.character {
  position: absolute;
  bottom: 0;
}

.preview .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
}

/* Fixed text sizes (same as PC) */
.welcome {
  font-size: 32px;
  font-weight: 800;
  text-shadow: 2px 2px 4px #000;
}
.username {
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 2px 2px 6px #000;
}
.tagline {
  font-size: 32px;
  font-weight: 700;
  text-shadow: 2px 2px 6px #000;
}

.download-btn {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1rem;
  background: #3b82f6;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: white;
}

.download-btn:hover {
  background: #2563eb;
}

/* Mobile controls */
@media (max-width: 768px) {
  .controls {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }

  .controls input,
  .controls select {
    width: 100%;
  }

  .download-btn {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
  }
}

}

#fw-section-custom-html-2c5452e6-8bc6-4d3d-8ee6-3867483ac296 {
--color-primary: #ec0003;
--color-primary-rgb: 236, 0, 3;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
.custom-header {
      border-bottom: 1px solid #ec0003 !important;
  width: 100%;
  background: #000;
  padding: 30px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  z-index: 999999 !important;
  box-sizing: border-box;
}

/* Left nav */
.nav-left a {
  color: #ec0003;
  text-decoration: none;
  margin-right: 50px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  
}
.nav-left a:last-child {
  margin-right: 0;
}
.nav-left a:hover {
  color: #ffffff;
}

/* Center logo */
.nav-center {
  position: absolute;
  left: 48.5%;
  transform: translateX(-50%);
  transform: translateY(0%);
}

.nav-center {
  position: absolute;
  left: 48.5%;
  z-index: 50; /* ensure it is above, but not blocking */
  pointer-events: none; /* prevents blocking clicks */
}

.header-logo {
  height: 60px;
  width: auto;
}

/* Right icons */
.nav-right {
  display: flex;
  align-items: center;
}
.nav-right .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 25px;
  color: #ec0003;
  transition: transform .25s, filter .25s;
}
.nav-right .icon svg {
  height: 20px;
  width: 28px;
  fill: #ec0003;
}
.nav-right .icon:hover {
  transform: scale(1.20) translateY(-4px);
  filter: drop-shadow(0 0 6px #ffffff);
}

/* Mobile */
@media (max-width: 768px) {
  .custom-header {
    flex-direction: column;
    padding: 20px 10px;
  }

  .nav-left {
    order: 1;
    margin-bottom: 10px;
  }

  .nav-center {
    order: 0;
    position: relative;
    transform: none;
    left: 0;
    margin-bottom: 10px;
  }

  .nav-right {
    order: 2;
    justify-content: center;
    margin-top: 10px;
  }

  .nav-left a {
    margin-right: 20px;
  }
}

/* Remove the mobile hamburger menu completely */
.header__mobile-menu,
.header__mobile-menu * {
    display: none !important;
}

/* Also remove its grid area so it stops blocking clicks */
.header--left {
    pointer-events: none !important;
}

/* But allow clicks for everything inside EXCEPT the menu */
.header--left .header__logo-container,
.header--left .header__nav-container,
.header--left .header__icons {
    pointer-events: auto !important;
}


}
#fw-section-rich-text-175870118485758 {
--color-primary: #580001;
--color-primary-rgb: 88, 0, 1;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-image-with-text-6dc85b80-0056-4200-84d8-574944235136 {
--color-primary: #580001;
--color-primary-rgb: 88, 0, 1;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-featured-collection-019b05bf-aabb-4366-b0de-375091d34a86 {
--color-primary: #580001;
--color-primary-rgb: 88, 0, 1;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);

}






#fw-section-rich-text-fc566743-501a-4306-9461-0acee998f0c4 {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #2e2e2e;
--color-background-rgb: 46, 46, 46;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 46;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-custom-html-03200915-197d-493e-a32c-5895803a3d8e {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
.custom-header {
      border-bottom: 1px solid #ec0003 !important;
  width: 100%;
  background: #000;
  padding: 30px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  z-index: 999999 !important;
  box-sizing: border-box;
}

/* Left nav */
.nav-left a {
  color: #ec0003;
  text-decoration: none;
  margin-right: 50px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  
}
.nav-left a:last-child {
  margin-right: 0;
}
.nav-left a:hover {
  color: #ffffff;
}

/* Center logo */
.nav-center {
  position: absolute;
  left: 48.5%;
  transform: translateX(-50%);
  transform: translateY(0%);
}

.nav-center {
  position: absolute;
  left: 48.5%;
  z-index: 50; /* ensure it is above, but not blocking */
  pointer-events: none; /* prevents blocking clicks */
}

.header-logo {
  height: 60px;
  width: auto;
}

/* Right icons */
.nav-right {
  display: flex;
  align-items: center;
}
.nav-right .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 25px;
  color: #ec0003;
  transition: transform .25s, filter .25s;
}
.nav-right .icon svg {
  height: 20px;
  width: 28px;
  fill: #ec0003;
}
.nav-right .icon:hover {
  transform: scale(1.20) translateY(-4px);
  filter: drop-shadow(0 0 6px #ffffff);
}

/* Mobile */
@media (max-width: 768px) {
  .custom-header {
    flex-direction: column;
    padding: 20px 10px;
  }

  .nav-left {
    order: 1;
    margin-bottom: 10px;
  }

  .nav-center {
    order: 0;
    position: relative;
    transform: none;
    left: 0;
    margin-bottom: 10px;
  }

  .nav-right {
    order: 2;
    justify-content: center;
    margin-top: 10px;
  }

  .nav-left a {
    margin-right: 20px;
  }
}

/* Remove the mobile hamburger menu completely */
.header__mobile-menu,
.header__mobile-menu * {
    display: none !important;
}

/* Also remove its grid area so it stops blocking clicks */
.header--left {
    pointer-events: none !important;
}

/* But allow clicks for everything inside EXCEPT the menu */
.header--left .header__logo-container,
.header--left .header__nav-container,
.header--left .header__icons {
    pointer-events: auto !important;
}


}

#fw-section-image-with-text-5ee71fd6-cdf2-409e-a4e7-df12dd29ea11 {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #365cb3;
--color-background-rgb: 54, 92, 179;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 91;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-image-with-text-c9a1e4de-5146-480e-b3eb-682a88aadd68 {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #365cb3;
--color-background-rgb: 54, 92, 179;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 91;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-image-with-text-14f2f861-1683-492c-9670-427670dcb903 {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #365cb3;
--color-background-rgb: 54, 92, 179;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 91;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-image-with-text-943ba333-56f2-49ad-acf4-94bf0139fe9b {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #365cb3;
--color-background-rgb: 54, 92, 179;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 91;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-image-with-text-82b7f342-fff0-4de8-83b7-82a29dbaee1a {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #365cb3;
--color-background-rgb: 54, 92, 179;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 91;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-rich-text-3bd5af9a-8c2f-4f41-bf83-7fb737c7cc94 {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #2e2e2e;
--color-background-rgb: 46, 46, 46;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 46;
background-color: var(--color-background);
color: var(--color-on-background);

}













#fw-section-rich-text-175914852680407 {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #7b5aab;
--color-background-rgb: 123, 90, 171;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 109;
background-color: var(--color-background);
color: var(--color-on-background);

}


#fw-section-custom-html-c3dc7db9-e867-42c5-9eac-a12cb3e7c333 {

.custom-header {
      border-bottom: 1px solid #ec0003 !important;
  width: 100%;
  background: #000;
  padding: 30px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  z-index: 999999 !important;
  box-sizing: border-box;
}

/* Left nav */
.nav-left a {
  color: #ec0003;
  text-decoration: none;
  margin-right: 50px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  
}
.nav-left a:last-child {
  margin-right: 0;
}
.nav-left a:hover {
  color: #ffffff;
}

/* Center logo */
.nav-center {
  position: absolute;
  left: 48.5%;
  transform: translateX(-50%);
  transform: translateY(0%);
}

.nav-center {
  position: absolute;
  left: 48.5%;
  z-index: 50; /* ensure it is above, but not blocking */
  pointer-events: none; /* prevents blocking clicks */
}

.header-logo {
  height: 60px;
  width: auto;
}

/* Right icons */
.nav-right {
  display: flex;
  align-items: center;
}
.nav-right .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 25px;
  color: #ec0003;
  transition: transform .25s, filter .25s;
}
.nav-right .icon svg {
  height: 20px;
  width: 28px;
  fill: #ec0003;
}
.nav-right .icon:hover {
  transform: scale(1.20) translateY(-4px);
  filter: drop-shadow(0 0 6px #ffffff);
}

/* Mobile */
@media (max-width: 768px) {
  .custom-header {
    flex-direction: column;
    padding: 20px 10px;
  }

  .nav-left {
    order: 1;
    margin-bottom: 10px;
  }

  .nav-center {
    order: 0;
    position: relative;
    transform: none;
    left: 0;
    margin-bottom: 10px;
  }

  .nav-right {
    order: 2;
    justify-content: center;
    margin-top: 10px;
  }

  .nav-left a {
    margin-right: 20px;
  }
}

/* Remove the mobile hamburger menu completely */
.header__mobile-menu,
.header__mobile-menu * {
    display: none !important;
}

/* Also remove its grid area so it stops blocking clicks */
.header--left {
    pointer-events: none !important;
}

/* But allow clicks for everything inside EXCEPT the menu */
.header--left .header__logo-container,
.header--left .header__nav-container,
.header--left .header__icons {
    pointer-events: auto !important;
}


}

#fw-section-custom-html-c305f5d7-5951-4752-a197-3184dd9d40f2 {

/* roster styles (paste in custom CSS box) */
.roster-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px;
}

.roster-button {
  position: relative;
  width: 340px;
  height: 531px;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.roster-button img.bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.logo-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  transition: all 0.4s ease;
  opacity: 0.9;
}

.player-names {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.6em;
  opacity: 0;
  transition: all 0.4s ease;
}

.roster-button:hover .logo-overlay {
  transform: translate(-50%, -130%);
  opacity: 0.8;
}

.roster-button:hover .player-names {
  opacity: 1;
}

.roster-button:hover {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .roster-container {
    flex-direction: column;
    align-items: center;
  }

  .roster-button {
    width: 100%;
    max-width: 400px;
    height: auto;
    aspect-ratio: 2 / 3;
    margin-bottom: 20px;
  }

  .logo-overlay {
    width: 100px;
  }

  .player-names {
    font-size: 14px;
  }

  /* show names on mobile (optional) */
  .player-names {
    opacity: 1;
  }
}

/* Optional: subtle overlay for contrast */
.roster-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.18);
  z-index: 1;
}
.roster-button .logo-overlay,
.roster-button .player-names { z-index: 2; }

}


#fw-section-custom-html-849161f6-5d67-488f-95ad-f08707b113fe {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
.custom-header {
      border-bottom: 1px solid #ec0003 !important;
  width: 100%;
  background: #000;
  padding: 30px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  z-index: 999999 !important;
  box-sizing: border-box;
}

/* Left nav */
.nav-left a {
  color: #ec0003;
  text-decoration: none;
  margin-right: 50px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  
}
.nav-left a:last-child {
  margin-right: 0;
}
.nav-left a:hover {
  color: #ffffff;
}

/* Center logo */
.nav-center {
  position: absolute;
  left: 48.5%;
  transform: translateX(-50%);
  transform: translateY(0%);
}

.nav-center {
  position: absolute;
  left: 48.5%;
  z-index: 50; /* ensure it is above, but not blocking */
  pointer-events: none; /* prevents blocking clicks */
}

.header-logo {
  height: 60px;
  width: auto;
}

/* Right icons */
.nav-right {
  display: flex;
  align-items: center;
}
.nav-right .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 25px;
  color: #ec0003;
  transition: transform .25s, filter .25s;
}
.nav-right .icon svg {
  height: 20px;
  width: 28px;
  fill: #ec0003;
}
.nav-right .icon:hover {
  transform: scale(1.20) translateY(-4px);
  filter: drop-shadow(0 0 6px #ffffff);
}

/* Mobile */
@media (max-width: 768px) {
  .custom-header {
    flex-direction: column;
    padding: 20px 10px;
  }

  .nav-left {
    order: 1;
    margin-bottom: 10px;
  }

  .nav-center {
    order: 0;
    position: relative;
    transform: none;
    left: 0;
    margin-bottom: 10px;
  }

  .nav-right {
    order: 2;
    justify-content: center;
    margin-top: 10px;
  }

  .nav-left a {
    margin-right: 20px;
  }
}

/* Remove the mobile hamburger menu completely */
.header__mobile-menu,
.header__mobile-menu * {
    display: none !important;
}

/* Also remove its grid area so it stops blocking clicks */
.header--left {
    pointer-events: none !important;
}

/* But allow clicks for everything inside EXCEPT the menu */
.header--left .header__logo-container,
.header--left .header__nav-container,
.header--left .header__icons {
    pointer-events: auto !important;
}


}
#fw-section-rich-text-ab859620-ee37-4b7c-85f7-87c86d834902 {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #2e2e2e;
--color-background-rgb: 46, 46, 46;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 46;
background-color: var(--color-background);
color: var(--color-on-background);

}

#fw-section-rich-text-38c8e6c6-71f1-4834-b78f-09f53b6872c6 {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #2e2e2e;
--color-background-rgb: 46, 46, 46;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 46;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-rich-text-9986aa6a-5ecb-4f99-bcca-4828a9bca4bb {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #4238ff;
--color-background-rgb: 66, 56, 255;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 82;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-image-with-text-ba11af6f-648f-445b-adb1-366ec07bc16f {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #5585b0;
--color-background-rgb: 85, 133, 176;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 124;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-image-with-text-d45fe9f6-36ce-4119-8a4a-9bf669291fd0 {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #5585b0;
--color-background-rgb: 85, 133, 176;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 124;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-rich-text-16d4c3aa-069f-4b69-ab4f-0c5e685b40fd {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #2e2e2e;
--color-background-rgb: 46, 46, 46;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 46;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-rich-text-f5802177-b461-4ee7-b4b3-619acd01c443 {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #ff4b4b;
--color-background-rgb: 255, 75, 75;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 129;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-image-with-text-8af27ae8-d94f-4c66-9e1f-0c4b3d6a44ba {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #bd6969;
--color-background-rgb: 189, 105, 105;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 130;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-image-with-text-29c356ec-7ea9-4b6c-9666-986b66213c58 {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #bd6969;
--color-background-rgb: 189, 105, 105;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 130;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-rich-text-3906ed05-f913-4e39-b3c1-eba740040881 {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #2e2e2e;
--color-background-rgb: 46, 46, 46;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 46;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-rich-text-1ba2ad78-ba6c-44a3-aa99-60c213ef88ab {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #14ffab;
--color-background-rgb: 20, 255, 171;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 175;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-image-with-text-769a4b8b-edeb-4585-a815-26bfa461b53e {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #5aab7b;
--color-background-rgb: 90, 171, 123;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 141;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-rich-text-efcd3401-afd9-44fa-8dd9-a6fed35c11cc {
--color-primary: #0071a6;
--color-primary-rgb: 0, 113, 166;
--color-background: #2e2e2e;
--color-background-rgb: 46, 46, 46;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 46;
background-color: var(--color-background);
color: var(--color-on-background);

}

#fw-section-custom-html-06121c69-4545-487c-a559-834e19e8992c {
--color-primary: #ec0003;
--color-primary-rgb: 236, 0, 3;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
.custom-header {
      border-bottom: 1px solid #ec0003 !important;
  width: 100%;
  background: #000;
  padding: 30px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  z-index: 999999 !important;
  box-sizing: border-box;
}

/* Left nav */
.nav-left a {
  color: #ec0003;
  text-decoration: none;
  margin-right: 50px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  
}
.nav-left a:last-child {
  margin-right: 0;
}
.nav-left a:hover {
  color: #ffffff;
}

/* Center logo */
.nav-center {
  position: absolute;
  left: 48.5%;
  transform: translateX(-50%);
  transform: translateY(0%);
}

.nav-center {
  position: absolute;
  left: 48.5%;
  z-index: 50; /* ensure it is above, but not blocking */
  pointer-events: none; /* prevents blocking clicks */
}

.header-logo {
  height: 60px;
  width: auto;
}

/* Right icons */
.nav-right {
  display: flex;
  align-items: center;
}
.nav-right .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 25px;
  color: #ec0003;
  transition: transform .25s, filter .25s;
}
.nav-right .icon svg {
  height: 20px;
  width: 28px;
  fill: #ec0003;
}
.nav-right .icon:hover {
  transform: scale(1.20) translateY(-4px);
  filter: drop-shadow(0 0 6px #ffffff);
}

/* Mobile */
@media (max-width: 768px) {
  .custom-header {
    flex-direction: column;
    padding: 20px 10px;
  }

  .nav-left {
    order: 1;
    margin-bottom: 10px;
  }

  .nav-center {
    order: 0;
    position: relative;
    transform: none;
    left: 0;
    margin-bottom: 10px;
  }

  .nav-right {
    order: 2;
    justify-content: center;
    margin-top: 10px;
  }

  .nav-left a {
    margin-right: 20px;
  }
}

/* Remove the mobile hamburger menu completely */
.header__mobile-menu,
.header__mobile-menu * {
    display: none !important;
}

/* Also remove its grid area so it stops blocking clicks */
.header--left {
    pointer-events: none !important;
}

/* But allow clicks for everything inside EXCEPT the menu */
.header--left .header__logo-container,
.header--left .header__nav-container,
.header--left .header__icons {
    pointer-events: auto !important;
}


}

#fw-section-custom-html-d80cd774-7dfd-44be-ad18-f5881951b577 {
--color-primary: #580001;
--color-primary-rgb: 88, 0, 1;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
body {
    margin: 0;
    font-family: sans-serif;
}

.team-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    background-color: black;
    background-image: url('/images/bg-banner-1_cleanup.jpg');
    background-size: cover;
    background-position: center;
    color: white;
}

.team-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.team-title {
    font-family: 'DrukWide', sans-serif;
    font-weight: bold;
    letter-spacing: 0.05em;
    font-size: 1.875rem; /* 3xl */
    color: white;
}

@media(min-width: 640px) {
    .team-title {
        font-size: 2.25rem; /* 4xl */
    }
}

@media(min-width: 768px) {
    .team-title {
        font-size: 3.75rem; /* 6xl */
    }
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 72rem; /* max-w-6xl */
    width: 100%;
    padding: 0 1rem;
    place-items: center;
}

@media(min-width: 640px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Flip Card Styles */
.flip-card {
    width: 320px;
    height: 200px;
    perspective: 1000px;
}

@media(min-width: 640px) {
    .flip-card {
        width: 360px;
        height: 220px;
    }
}

@media(min-width: 768px) {
    .flip-card {
        width: 400px;
        height: 240px;
    }
}

@media(min-width: 1024px) {
    .flip-card {
        width: 440px;
        height: 260px;
    }
}

.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-inner {
    transform: rotateY(180deg);
}

.flip-front,
.flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 15rem;
    overflow: hidden;
}

.flip-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.flip-back {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: red;
    color: white;
    font-family: 'DrukWide', sans-serif;
    font-weight: bold;
    font-size: 1.25rem;
    transform: rotateY(180deg);
    text-align: center;
}

@media(min-width: 640px) {
    .flip-back {
        font-size: 1.5rem;
    }
}

}
#fw-section-custom-html-0fbae8ff-c317-4e5a-8b85-2da76fb3b31a {
--color-primary: #ec0003;
--color-primary-rgb: 236, 0, 3;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
body {
    margin: 0;
    font-family: sans-serif;
}

.merch-container {
    background-color: black;
    color: white;
    padding: 3rem 1rem;
}

@media(min-width: 768px) {
    .merch-container {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

.merch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}

.merch-title {
    font-size: 6rem;
    font-weight: 900;
    color: rgb(250, 31, 1);
    font-family: 'DrukWide', sans-serif;
}

.shop-now {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shop-now span {
    font-size: 1.25rem;
}

.merch-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media(min-width: 640px) {
    .merch-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width: 1024px) {
    .merch-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.merch-item {
    display: block;
    background-color: #f2f4f7;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s;
    text-decoration: none;
    color: black;
}

.merch-item:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
}

.image-container img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: cover;
    transition: opacity 0.3s;
}

.image-container .back {
    opacity: 0;
}

.merch-item:hover .front {
    opacity: 0;
}

.merch-item:hover .back {
    opacity: 1;
}

.merch-info {
    text-align: center;
    padding: 1rem;
}

.item-name {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
}

.item-price {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

}
#fw-section-donations-1758634980 {
--color-primary: #580001;
--color-primary-rgb: 88, 0, 1;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-recent-videos-1758634980 {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-custom-html-7bc8704d-b05d-4af1-950d-6615b38f52b7 {
--color-primary: #580001;
--color-primary-rgb: 88, 0, 1;
--color-background: #b5b5b5;
--color-background-rgb: 181, 181, 181;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 181;
background-color: var(--color-background);
color: var(--color-on-background);
body {
    margin: 0;
    font-family: sans-serif;
    
}

.partners-section {
    background-color: #b5b5b5;
    padding: 1rem 1rem; /* py-16 */
    height: 220px;
}

.partners-header {
    text-align: center;
    margin-bottom: 2.5rem; /* mb-10 */
}

.partners-header h2 {
    font-family: 'DrukWide', sans-serif;
    font-weight: bold;
    font-size: 2.25rem; /* text-4xl */
}

.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem; /* gap-8 */
    max-width: 72rem; /* max-w-6xl */
    margin: 0 auto; /* mx-auto */
    padding: 0 1rem;
}

.partner-logo {
    width: 7rem; /* w-28 */
    height: 7rem; /* h-28 */
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* shadow-md */
}

.partner-logo img {
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
}

/* Responsive Sizes */
@media(min-width: 640px) {
    .partner-logo {
        width: 8rem; /* sm:w-32 */
        height: 8rem; /* sm:h-32 */
    }
}

@media(min-width: 768px) {
    .partner-logo {
        width: 9rem; /* md:w-36 */
        height: 9rem; /* md:h-36 */
    }
}

}

#fw-section-footer {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
/* Hide Fourthwall footer */
footer, 
.footer, 
.fourthwall-footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: black;
}

}
#fw-section-header {

/* ------------------------------------------------------ */
/* 1. REMOVE FOURTHWALL'S HEADER COMPLETELY               */
/* ------------------------------------------------------ */
.page__header,
.page__header *,
.header,
.header *,
.site-header,
.site-header * {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove Fourthwall nav + right icons just in case */
.header__icons,
.header__icons *,
.header__logo-link,
.header__logo-link *,
.header__mobile-menu,
.header__mobile-menu * {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ------------------------------------------------------ */
/* 2. REMOVE GRID LAYER THAT WAS BLOCKING YOUR CUSTOM BAR */
/* ------------------------------------------------------ */
.header__grid,
.header--left,
.header__size--sm {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
}

/* ------------------------------------------------------ */
/* 3. ENSURE YOUR CUSTOM HEADER WORKS AND IS CLICKABLE    */
/* ------------------------------------------------------ */
.custom-header,
.custom-header * {
    pointer-events: auto !important;
}

}