/* Custom CSS overrides for WavePvP */

/* 1. Force the main hero title "wavepvp" to be WHITE */
.hero h1,
.hero .content h1,
.hero-title-group h1,
[data-component-id="hero"] h1 {
  color: #ffffff !important;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(83, 254, 255, 0.6) !important;
  font-weight: 800 !important;
}

/* 2. Background color set to #203535 for page sections */
body,
:root {
  --cl-background-primary: #203535 !important;
  --bs-body-bg: #203535 !important;
  --bs-gray-bg: #1a2b2b !important;
}

.bg-gray,
.component:not(.hero),
main {
  background-color: #203535 !important;
}

/* 3. Style cards to look crisp on #203535 background */
.product-card,
.testimonial__card,
.bento-card,
.faq-item {
  background: #09090b !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* 4. Navbar styling */
.navbar-absolute-wrapper {
  background: rgba(9, 9, 11, 0.85) !important;
  backdrop-filter: blur(12px);
}