body {
  margin: 0;
  font-family: Inter, sans-serif;
  transition: 0.3s;

  /* =========================
     LIGHT MODE (DEFAULT)
  ========================= */

  --bg: #f4f5f7;
  --card: #ffffff;
  --surface: #eef1f5;
  --elevated: #e3e8ef;

  --text: #121821;
  --muted: #5a6b7a;

  --border: rgba(18, 24, 33, 0.08);

  /* neutral UI (NO BLUE) */
  --button: #2b2f36;
  --accent: #2b2f36;
  --accent-hover: #1f2329;
  --accent-soft: #e6e8ec;
}

body.light {

  --bg: #0f1318;
  --card: #171d24;
  --surface: #202833;
  --elevated: #283241;

  --text: #f2f4f7;
  --muted: #9aa3ad;

  --border: rgba(255, 255, 255, 0.08);

  /* neutral UI (NO BLUE) */
  --button: #3a3f46;
  --accent: #3a3f46;
  --accent-hover: #4a515a;
  --accent-soft: #2a2f36;
}



body {
  background: var(--bg);
  color: var(--text);
}

/* ================= HERO ================= */
/* =========================
   HERO CONTAINER
========================= */

.hero {
  position: relative;
  height: 85vh;
  overflow: hidden;
}

/* =========================
   BACKGROUND SLIDES (LAYER 0)
========================= */

.hero-slide {
  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;
  transition: opacity 0.8s ease;

  z-index: 0;
}

.hero-slide.active {
  opacity: 1;
}

/* =========================
   GRADIENT OVERLAY (LAYER 1)
========================= */

.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.90) 20%,
    rgba(255, 255, 255, 0.70) 35%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.00) 70%
  );

  z-index: 1;
  pointer-events: none;
}

/* =========================
   CONTENT (LAYER 2 TOP)
========================= */

.hero-content {
  position: relative;
  z-index: 2;

  height: 100vh;
  width: 25%;
  min-width: 320px;

  display: flex;
  flex-direction: column;

  justify-content: flex-start;  /* ⬅️ key change */

  align-items: flex-start;
  text-align: left;

  padding: 4em 2.5em 2.5em; /* extra top spacing */
}

.hero-content {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  color:#000;
}
/* optional polish */
.hero-content h1 {
  margin: 0.5em 0;
  color:#000;
}

.hero-content p {
  max-width: 600px;
  opacity: 0.9;
}
.hero .logo{ min-width:300px;}
.hero h1{
  font-family:"Bebas Neue";
  font-size:72px;
  margin:0;
  line-height:.9em;
  letter-spacing:3px;
  color:#000;
}
.hero h2{
  font-family:"Bebas Neue";
  letter-spacing:3px;
  line-height:.9em;
  color:#000;
}
.hero p{
  opacity:0.8;
  margin-top:10px;
   color:#000;
   border-top:5px solid maroon;
   padding-top:1.5em;
   
}
footer a{ color:#fff;}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 15px 25px;

  /* black → dark grey fade */
  background: linear-gradient(
    90deg,
    #333,
    #1a1d22
  );

  color: #ffffff;
}

/* icon styling */
.info-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  margin-right: 10px;

  color: red; /* maroon */
  flex-shrink: 0;
}

/* force SVG to obey color */
.info-icon svg {
  width: 26px;
  height: 26px;

  stroke: currentColor !important;
  fill: none;
}

/* spacing cleanup */
.topbar div {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* links */
.topbar a {
  color: #ffffff;
  text-decoration: none;
}

.topbar a:hover {
  color: #7a1f2b;
}
.footer-btn{ line-height:4em; border:thin solid #666;}
.footer{ background-color:#333;}