:root{

  --black:#0a0a0a;
  --white:#f5f5f5;

  --forge:#e26d00;
  --panther:#d4a017;
  --eagle:#3b6ea8;

  --gray:#181818;

  --max-width:1200px;

}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{

  background:var(--black);
  color:var(--white);

  font-family:'Inter',sans-serif;

  line-height:1.7;

}

img{
  max-width:100%;
  display:block;
}

h1,h2,h3,h4{

  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:1px;

}

a{
  color:inherit;
}

section{
  padding:80px 10%;
}

/* ==========================
   ANNOUNCEMENT BAR
========================== */

.announcement-bar{

  background:var(--forge);

  color:white;

  text-align:center;

  font-weight:600;

  padding:12px;

}

/* ==========================
   HEADER
========================== */

.site-header{

  background:#111;

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:20px 10%;

  position:sticky;
  top:0;
  z-index:500;

}

.logo-group{

  display:flex;
  align-items:center;
  gap:12px;

}

.logo-group img{

  width:60px;
  height:60px;
  object-fit:contain;

}

.logo-group span{

  font-family:'Oswald',sans-serif;
  font-size:1.4rem;
  font-weight:600;

}

.site-header nav{

  display:flex;
  gap:25px;

}

.site-header nav a{

  text-decoration:none;
  transition:.3s;

}

.site-header nav a:hover{

  color:var(--panther);

}

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

.hero{

  min-height:100vh;

  position:relative;

  background:
    linear-gradient(
      rgba(0,0,0,.20),
      rgba(0,0,0,.40)
    ),
    url('../images/gallery13.jpg');

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


  display:flex;
  align-items:center;

}

.hero-content{

  max-width:800px;

}

.hero-logos{

  display:flex;
  gap:20px;

  margin-bottom:30px;

}

.hero-logos img{

  width:90px;
  height:90px;
  object-fit:contain;

}

.hero h1{

  font-size:clamp(3rem,7vw,6rem);

}

.hero h2{

  color:var(--panther);

  margin-bottom:20px;

}

.hero p{

  margin-bottom:10px;

  font-size:1.1rem;

}

.hero-buttons{

  margin-top:30px;

}

/* ==========================
   BUTTONS
========================== */

.btn-primary{

  display:inline-block;

  background:var(--forge);

  color:white;

  padding:14px 26px;

  border-radius:6px;

  text-decoration:none;

  font-weight:600;

}

.btn-primary:hover{

  opacity:.9;

}

.btn-secondary{

  display:inline-block;

  margin-left:12px;

  border:2px solid white;

  color:white;

  padding:14px 26px;

  border-radius:6px;

  text-decoration:none;

}

/* ==========================
   MISSION
========================== */

.mission{

  text-align:center;

  background:
  linear-gradient(
  rgba(0,0,0,.75),
  rgba(0,0,0,.75)
  ),
  url('../images/mission-bg.jpg');

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

}

blockquote{

  max-width:900px;

  margin:auto;

  font-size:1.4rem;

  font-style:italic;

}

/* ==========================
   PRINCIPLES
========================== */

.principles h2{

  text-align:center;
  margin-bottom:40px;

}

.principle-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(250px,1fr));

  gap:24px;

}

.principle-card{

  background:#151515;

  padding:25px;

  border-left:5px solid var(--forge);

  border-radius:8px;

}

/* ==========================
   CREED
========================== */

.creed{

  text-align:center;

  background:#111;

}

.creed h2{

  font-size:clamp(2rem,4vw,3.5rem);

}

/* ==========================
   AO CARDS
========================== */

.aos h2{

  text-align:center;
  margin-bottom:40px;

}

.ao-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(280px,1fr));

  gap:25px;

}

.ao-card{

  padding:30px;

  border-radius:10px;

  background:#141414;

}

.eagle{
  border-top:5px solid var(--eagle);
}

.forge{
  border-top:5px solid var(--forge);
}

.panther{
  border-top:5px solid var(--panther);
}

/* ==========================
   GALLERY
========================== */

.gallery h2{

  text-align:center;
  margin-bottom:40px;

}

.gallery-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(250px,1fr));

  gap:15px;

}

.gallery-grid img{

  height:250px;

  width:100%;

  object-fit:cover;

  border-radius:8px;

}

/* ==========================
   NEW GUY
========================== */

.new-guy{

  text-align:center;

}

.new-guy p{

  margin-bottom:8px;

}

/* ==========================
   CTA
========================== */

.cta-section{

  text-align:center;

  background:#111;

}

/* ==========================
   SCHEDULE PAGE
========================== */

.schedule-hero{

  min-height:40vh;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  background:
  linear-gradient(
  rgba(0,0,0,.75),
  rgba(0,0,0,.75)
  ),
  url('../images/ruck-bg.jpg');

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

}

.schedule-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(320px,1fr));

  gap:25px;

}

.workout-card{

  background:#151515;

  padding:25px;

  border-radius:10px;

}

.ao-logo{

  width:70px;

  margin-bottom:15px;

}

.day-badge{

  display:inline-block;

  background:#222;

  padding:6px 12px;

  border-radius:4px;

  font-size:.8rem;

  margin-bottom:15px;

}

.workout-time{

  font-family:'Oswald',sans-serif;

  font-size:2rem;

  margin-bottom:10px;

}

.map-button{

  display:inline-block;

  margin-top:15px;

  background:#222;

  padding:10px 18px;

  border-radius:6px;

  text-decoration:none;

}

.map-button:hover{

  background:var(--forge);

}

.fellowship{
  border-top:5px solid gray;
}

.coffee{
  border-top:5px solid #6b4f2a;
}

/* ==========================
   CONTACT
========================== */

.contact-hero{

  min-height:50vh;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  background:
  linear-gradient(
  rgba(0,0,0,.7),
  rgba(0,0,0,.8)
  ),
  url('../images/contact-bg.jpg');

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

}

.contact-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(250px,1fr));

  gap:20px;

  margin-top:30px;

}

.contact-method{

  background:#151515;

  padding:25px;

  border-left:5px solid var(--forge);

}

/* ==========================
   FOOTER
========================== */

footer{

  background:#111;

  text-align:center;

  padding:60px 20px;

}

/* ==========================
   MODAL
========================== */

.modal{

  display:none;

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  background:
  rgba(0,0,0,.85);

  justify-content:center;
  align-items:center;

  z-index:9999;

}

.modal-content{

  background:#111;

  width:90%;
  max-width:700px;

  padding:30px;

  border-radius:10px;

  text-align:center;

  position:relative;

}

.modal-close{

  position:absolute;

  top:10px;
  right:15px;

  background:none;
  border:none;

  color:white;

  font-size:24px;

  cursor:pointer;

}

.flyer-image{

  width:100%;

  margin:20px 0;

}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

  .site-header{

    flex-direction:column;

    gap:20px;

  }

  .hero{

    min-height:75vh;

  }

  .hero-logos{

    flex-wrap:wrap;

  }

  .btn-secondary{

    margin-left:0;
    margin-top:10px;

  }

}