/* ================= styles.css ================= */

body {
  background: #0b0f14;
}

/* HERO WITH GRADIENT + FADE */
.hero {
  height: 420px;
  position: relative;
  background: url('images/hero.jpg') center/cover no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.6),
    rgba(0,0,0,0.4),
    rgba(0,0,0,0.7)
  );
}

/* GLASS EFFECT CONTAINER */
.hero .container {
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.25);
  padding: 20px;
  border-radius: 10px;
}

.hero > * {
  position: relative;
  z-index: 2;
}

/* GLOW EFFECT */
.page-wrapper::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('images/glow.png') center/cover no-repeat;
  opacity: 0.3;
  mix-blend-mode: screen;
  pointer-events: none;
}

.page-wrapper > * {
  position: relative;
  z-index: 2;
}

.custom-nav { background: #4d148c; }

.logo { font-size: 24px; font-weight: bold; }
.fed { color: white; }
.ex { color: #ff6200; }

/* ACTION BOXES */
.action-box {
  background: #fff;
  color: #000;
  padding: 40px 25px;
  width: 240px;
  text-align: center;
  font-weight: 600;
  border: 1px solid #ddd;
}

.action-box .icon {
  font-size: 28px;
  margin-bottom: 10px;
  display: block;
}

.action-box.active {
  background: #4d148c;
  color: #fff;
}

/* TRACK BUTTON */
.input-group { max-width: 420px; margin: auto; }

.input-group input {
  height: 55px;
}

.input-group .btn {
  background: #ff6600;
  color: white;
  height: 55px;
}

.promo { background: #4d148c; }

.footer a {
  display: block;
  text-decoration: none;
  color: #333;
}

.bottom { background: #4d148c; }

/* MOBILE */
@media(max-width:768px){
  .hero .d-flex {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .action-box {
    width: 110px;
    padding: 20px 10px;
    font-size: 10px;
  }

  .action-box .icon {
    font-size: 20px;
  }
}