:root {
            --primary-blue: #355e93;
            --nav-bg: #141414;
            --accent-gold: #254267;
            --dark-bg: #ffffff;
            --sidebar-gray: #ebeff5;
            --text-light: #333333;
            --uswds-gray: #15263b;
        }
        body {
            font-family: 'Lato', 'Oswald', 'Crimson Pro', 'Arial', 'Times New Roman', sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--dark-bg);
            color: var(--text-light);
            line-height: 1.6;
        }

/* LEADERSHIP CSS FOR LARGE HORIZONTAL BOXES */
/* Outer wrapper that controls max width */
.war-leaders-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px; /* keeps spacing on tablet/mobile */
}

/* Background stays full width */
.war-leaders {
  /* background: #0b1a3a url('stars-pattern.png') repeat;*/
  padding: 10px 0;
  color: #fff;
}

/* Leader boxes inside the 1440px wrapper */
.leader-box {
  /*background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);*/
  border-radius: 10px;
  padding: 40px 45px;
  margin-bottom: 40px;

  display: grid;
  grid-template-columns: 1fr 3.5fr;
  gap: 35px;

  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: transform .2s ease, box-shadow .2s ease;
}

.leader-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* Typography (matches war.gov) */
.leader-box h2 {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

.leader-box h3 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

.leader-name {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.leader-desc {
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 25px 0;
  opacity: 0.95;
}

/* Button */
.leader-btn {
  display: inline-block;
  background: #1e4db7;
  padding: 12px 26px;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  transition: background .2s ease;
}

.leader-btn:hover {
  background: #2a6aff;
}

/* Tablet breakpoint */
@media (max-width: 900px) {
  .leader-box {
    grid-template-columns: 1fr;
    padding: 35px;
  }
}

/* Mobile breakpoint */
@media (max-width: 600px) {
  .leader-box {
    padding: 28px;
  }

  .leader-box h2 {
    font-size: 1.6rem;
  }

  .leader-name {
    font-size: 1.15rem;
  }

  .leader-desc {
    font-size: 1rem;
  }
}

.leader-box {
  position: relative; /* required for the vertical line */
}

/* Row container */
.mini-leader-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Individual card */
.mini-leader-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 40px;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: transform .2s ease, box-shadow .2s ease;
  justify-items: center;
  align-items: center;
}

.mini-leader-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* Typography */
.mini-leader-card h2 {
  font-size: 1.9rem;
  margin-bottom: 12px;
  font-weight: 700;
}

.mini-leader-card h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  font-weight: 700;
  justify-content: center;
}

.mini-leader-name {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.mini-leader-desc {
  font-size: 1.05rem;
  line-height: 1.55;
  margin-bottom: 25px;
}

/* Button */
.mini-leader-btn {
  display: inline-block;
  background: #1e4db7;
  padding: 12px 26px;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: background .2s ease;
}

.mini-leader-btn:hover {
  background: #2a6aff;
}

/* Tablet breakpoint */
@media (max-width: 900px) {
  .mini-leader-row {
    grid-template-columns: 1fr;
  }
}

/* Mobile spacing */
@media (max-width: 600px) {
  .mini-leader-card {
    padding: 28px;
  }

  .mini-leader-card h2 {
    font-size: 1.6rem;
  }

  .mini-leader-name {
    font-size: 1.15rem;
  }

  .mini-leader-desc {
    font-size: 1rem;
  }
}