body{
  background-color: black;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
}

#navbar{
  border-bottom: 2px solid;
  border-image: linear-gradient(to left, #3FA34D, #D62828) 1;
}

.hero {
  height: 100vh; /* full screen height */
  background: #000000; /* dark background */
  display: flex;
  flex-direction: column; /* stack items vertically */
  justify-content: center; /* center vertically */
  align-items: center; /* center horizontally */
  text-align: center;
  color: #f5f5f5; /* light text */
}

.hero-logo {
  max-width: 300px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #cccccc;
}

.carousel-track a{
  text-decoration: none;
}

.dropdown-menu li #gon:hover, .dropdown-menu li #killua:hover,
.dropdown-menu li #kurapika:hover, .dropdown-menu li #leorio:hover,
.dropdown-menu li #netero:hover, .dropdown-menu li #biscuit:hover,
.dropdown-menu li #kite:hover, .dropdown-menu li #meruem:hover,
.dropdown-menu li #pitou:hover, .dropdown-menu li #pouf:hover,
.dropdown-menu li #youpi:hover, .dropdown-menu li #ging:hover,
.dropdown-menu li #alluka:hover, .dropdown-menu li #nanika:hover
 {
  color: #000000 !important;
}

.dropdown-menu li #gon {
  color: #3FA34D  !important;
}

.dropdown-menu li #killua {
  color: #4B0082  !important;
}

.dropdown-menu li #kurapika {
  color: #B22222  !important;
}

.dropdown-menu li #leorio {
  color: #1E3A8A  !important;
}

.dropdown-menu li #netero {
  color: #FFD700  !important;
}

.dropdown-menu li #biscuit {
   color: #FF69B4  !important;
}

.dropdown-menu li #kite {
  color: #00BFFF  !important;
}

.dropdown-menu li #meruem {
  color: #1B4332  !important;
}

.dropdown-menu li #pitou {
  color: #FF6B81  !important;
}

.dropdown-menu li #pouf {
  color: #9370DB  !important;
}

.dropdown-menu li #youpi {
  color: #FF4500  !important;
}

.dropdown-menu li #hisoka {
  color: #8B0000  !important;
}

.dropdown-menu li #uvogin {
  color: #800000  !important;
}

.dropdown-menu li #ging {
  color: #8B7500  !important;
}

.dropdown-menu li #alluka {
  color: #483D8B  !important;
}

.dropdown-menu li #nanika {
  color: #4B0082  !important;
}

.cta-btn {
  background: #3FA34D; /* HxH green */
  color: #ffffff !important; /* force white text */
  padding: 12px 24px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold; /* makes text stand out more */
  border-radius: 8px;
  transition: 0.3s;
}
.cta-btn:hover {
  background: #D62828; /* HxH red on hover */
  box-shadow: 0 0 15px #3FA34D; /* red glow */
  color: #ffffff !important;
}

#navbar, .container-fluid {
    background-color: black;
}

.carousel-container {
      position: relative;
      max-width: 1000px;
      margin: auto;
      overflow: hidden;
      
    }

    .carousel-track {
      display: flex;
      transition: transform 0.4s ease-in-out;
    }

    .hunter-card {
      min-width: 220px;
      margin: 0 10px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      overflow: hidden;
      text-align: center;
      padding: 10px;
      transition: 0.3s;
    }

    .hunter-card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-radius: 8px;
    }

    .hunter-card h3 {
      font-size: 16px;
      margin: 10px 0 5px;
    }

    .hunter-card p {
      color: #666;
      margin-bottom: 10px;
    }

    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: #333;
      color: #fff;
      border: none;
      padding: 10px 15px;
      cursor: pointer;
      border-radius: 50%;
      z-index: 10;
    }

    .prev {
      left: 5px;
    }
    .next {
      right: 5px;
    }

.spotlight .subtext{
    font-size: 35px;
    font-weight: bold;
    margin-top: 0;
    color: #cccccc;
}

.spotlight h1{
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    color: #FFFFFF;
    margin-top: 15px;
    padding: 10px; 
}

.hunter-card .former{
    text-decoration: line-through red;
    
}

.spotlight {
    padding: 10px;
    padding-bottom: 20px;
    background-color: #000000;
}

.gonview{
  background: #3FA34D; /* example: Gon green */
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
  outline: none;
  border: none;
}

.gonview:hover{
  background: #ffffff; /* red highlight (HxH theme) */
  box-shadow: 0 0 10px #3FA34D, 0 0 20px #ffffff;
  transform: scale(1.05); /* slight zoom */
  color: #3FA34D;
}

#gon-card:hover{
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 0 15px #3FA34D, 0 0 30px #38FF6B; /* aura glow */
}

.killuaview {
  background: #4B0082;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
  outline: none;
  border: none;
}

.killuaview:hover {
  background: #ffffff; 
  box-shadow: 0 0 10px #4B0082, 0 0 20px #00BFFF;
  transform: scale(1.05);
  color: #4B0082;
}

#killua-card:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow:  0 0 15px #5b287e, 0 0 30px #9126de; 
  transition: 0.3s ease;
}

.kurapikaview {
  background: #B22222; 
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
  outline: none;
  border: none;
}

.kurapikaview:hover {
  background: #ffffff;
  box-shadow: 0 0 10px #B22222, 0 0 20px #FFD700; 
  transform: scale(1.05);
  color: #B22222;
}

#kurapika-card:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 0 15px #B22222, 0 0 30px #FFD700; 
  transition: 0.3s ease;
}

.leorioview {
  background: #1E3A8A; 
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
  outline: none;
  border: none;
}

.leorioview:hover {
  background: #ffffff;
  box-shadow: 0 0 10px #1E3A8A, 0 0 20px #00BFFF; 
  transform: scale(1.05);
  color: #1E3A8A;
}

#leorio-card:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 0 15px #1E3A8A, 0 0 30px #00BFFF; 
  transition: 0.3s ease;
}

.neteroview {
  background: #FFD700; 
  color: #ffffff; 
  font-size: 0.95rem;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
  outline: none;
  border: none;
}

.neteroview:hover {
  background: #ffffff;
  box-shadow: 0 0 12px #FFD700, 0 0 25px #FFFACD; 
  transform: scale(1.05);
  color: #FFD700;
}

#netero-card:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 0 18px #FFD700, 0 0 35px #FFFACD; 
  transition: 0.3s ease;
}

.biscuitview {
  background: #FF69B4; 
  color: #ffffff; 
  font-size: 0.95rem;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
  outline: none;
  border: none;
}

.biscuitview:hover {
  background: #ffffff;
  box-shadow: 0 0 12px #FF69B4, 0 0 25px #FFD700; 
  transform: scale(1.05);
  color: #FF69B4;
}

#biscuit-card:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 0 15px #FF69B4, 0 0 30px #FFD700; 
  transition: 0.3s ease;
}

.kiteview {
  background: #00BFFF; 
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
  outline: none;
  border: none;
}

.kiteview:hover {
  background: #ffffff; 
  color: #00BFFF;
  box-shadow: 0 0 12px #00BFFF, 0 0 20px #FF4444; 
  transform: scale(1.05);
}

#kite-card:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 0 15px #00BFFF, 0 0 30px #FFFFFF; 
  transition: 0.3s ease;
}

.meruemview {
  background: #1B4332; 
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
  outline: none;
  border: none;
}

.meruemview:hover {
  background: #ffffff; 
  color: #1B4332;
  box-shadow: 0 0 12px #00FF87, 0 0 25px #6A0DAD; 
  transform: scale(1.05);
}

#meruem-card:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 0 15px #00FF87, 0 0 30px #1B4332; 
  transition: 0.3s ease;
}

.pitouview {
  background: #FF6B81; 
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
  outline: none;
  border: none;
}

.pitouview:hover {
  background: #ffffff; 
  color: #FF6B81;
  box-shadow: 0 0 12px #8A2BE2, 0 0 25px #FF6B81; 
  transform: scale(1.05);
}

#pitou-card:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 0 15px #8A2BE2, 0 0 30px #FF6B81; 
  transition: 0.3s ease;
}

.poufview {
  background: #9370DB; /* elegant violet */
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
  outline: none;
  border: none;
}

.poufview:hover {
  background: #ffffff; 
  color: #9370DB;
  box-shadow: 0 0 12px #9370DB, 0 0 25px #4B0082; 
  transform: scale(1.05);
}

#pouf-card:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 0 15px #9370DB, 0 0 30px #4B0082; 
  transition: 0.3s ease;
}

.youpiview {
  background: #FF4500; 
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
  outline: none;
  border: none;
}

.youpiview:hover {
  background: #ffffff; 
  color: #FF4500;
  box-shadow: 0 0 12px #FF4500, 0 0 25px #FFD700; 
  transform: scale(1.05);
}

#youpi-card:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 0 15px #FF4500, 0 0 30px #B22222; 
  transition: 0.3s ease;
}

.hisokaview {
  background: #8B0000; /* dark crimson red */
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
  outline: none;
  border: none;
}

.hisokaview:hover {
  background: #ffffff; 
  color: #8B0000; 
  box-shadow: 0 0 12px #FF1493, 0 0 25px #800080; 
  transform: scale(1.05);
}

#hisoka-card:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 0 15px #FF1493, 0 0 30px #8B0000; 
  transition: 0.3s ease;
}

.uvoginview {
  background: #800000; 
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
  outline: none;
  border: none;
}

.uvoginview:hover {
  background: #ffffff; 
  color: #800000;
  box-shadow: 0 0 12px #FF0000, 0 0 25px #333333;
  transform: scale(1.05);
}

#uvogin-card:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 0 15px #FF0000, 0 0 30px #800000;
  transition: 0.3s ease;
}

.site-footer {
  background: #000000;
  color: #f5f5f5;
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 3rem;
  border-top: 2px solid;
  border-image: linear-gradient(to right, #3FA34D, #D62828) 1;
}

.footer-logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: #3FA34D; /* HxH green */
  margin-bottom: 0.5rem;
  letter-spacing: 2px;
}

.footer-tagline {
  font-size: 0.95rem;
  color: #bbb;
  margin-bottom: 1.5rem;
}

.footer-links {
  margin-bottom: 1rem;
}

.footer-links a {
  color: #f5f5f5;
  margin: 0 12px;
  text-decoration: none;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #D62828; /* hover red accent */
  text-shadow: 0 0 10px #3FA34D; /* green glow */
}

.copyright {
  font-size: 0.8rem;
  color: #888;
  margin-top: 1rem;
}