:root{
  --red: #E53935;
  --red-dark: #C62828;
  --black: #1C1C1C;
  --white: #FFFFFF;
  --gray: #A6A6A6;
  --font-head: "Oswald", sans-serif;
  --font-body: "Open Sans", sans-serif;
  --max-width: 1100px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font-body);
  line-height:1.5;
  background:var(--white);
  color:var(--black);
}
a{text-decoration:none;color:var(--red)}
img{max-width:100%;display:block}

/* Layout */
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px;}
header,footer{background:var(--white);border-bottom:1px solid #ddd;}
header .inner, footer .inner{
  display:flex;justify-content:space-between;align-items:center;
  max-width:var(--max-width);margin:auto;padding:14px 20px;
}
nav a{margin:0 12px;font-weight:600;color:var(--black);}
nav a:hover{color:var(--red);}
.btn{display:inline-block;padding:10px 18px;border-radius:6px;
  background:var(--red);color:var(--white);font-weight:700;}
.btn:hover{background:var(--red-dark);}
h1,h2,h3,h4{font-family:var(--font-head);}
section{padding:60px 0;}
.section-title{text-align:center;margin-bottom:30px;font-size:28px;}

/* Hero with background image */
.hero {
  position: relative;
  min-height: 70vh;           /* height of hero section */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* scales and crops nicely */
  filter: brightness(60%);    /* darken so white text pops */
}

.hero-text {
  position: relative;         /* sits on top of the image */
  color: var(--white);
  z-index: 1;
  padding: 0 20px;
}

.hero-text h1 {
  font-size: 40px;
  margin-bottom: 12px;
}

.hero-text p {
  font-size: 18px;
  margin-bottom: 20px;
}

/* Coaches */
.coach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.coach-card {
  background: var(--black);   /* black background */
  color: var(--white);        /* default text inside white */
  padding: 20px;
  border-radius: 12px;
  text-align: center;
}

.coach-name {
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 8px;
  color: var(--white);        /* make sure names are white */
}

.coach-bio {
  text-align: left;
  margin: 0 auto;
  padding-left: 20px;
  font-size: 15px;
  color: var(--white);        /* bullet text white */
  list-style-type: disc;
}



/* Red background for Our Mission */
.mission-section {
  background: var(--red-dark);
  color: var(--white);      /* make text white for contrast */
  padding: 60px 0;          /* keep same spacing as other sections */
}

.mission-section h2 {
  color: var(--white);      /* ensure heading is white */
}

.mission-section p {
  max-width: 800px;         /* optional: narrower text block */
  margin: 0 auto;
  font-size: 18px;
}

.mission-section p {
  margin-bottom: 20px; /* space between paragraphs */
  line-height: 1.6;    /* improves readability */
}

.mission-section {
  text-align: center;
}

/* Packages */
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* Make each card a vertical flexbox so the button stays at the bottom */
.package-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* push button down */
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  min-height: 00px;             /* ensure equal height cards */
}

.package-card h3 {
  margin-bottom: 8px;
}

.price {
  color: var(--red);
  font-weight: bold;
  margin: 10px 0;
}

.consult-btn {
  display: inline-block;
  margin-top: 20px;
  background: var(--red);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  align-self: center;            /* center button horizontally */
}

.consult-btn:hover {
  background: var(--red-dark);
}



/* FAQ Section */
.faq-section {
  background: var(--black);   /* black background for whole section */
  color: var(--white);        /* default text white */
  padding: 60px 0;
}

.faq-section .section-title {
  color: var(--white);        /* make the main "FAQs" heading white */
}

.faq-section .faq-item h3 {
  color: var(--red);          /* questions in red */
  margin-bottom: 6px;
}

.faq-section .faq-item p {
  color: var(--white);        /* answers in white */
}


/* Footer */
footer {
  background: var(--white);      /* solid white background */
  color: var(--black);           /* dark text so it shows */
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid #ddd;
}

footer p {
  color: var(--black);           /* force text to black */
  margin: 6px 0;
}

/* Header background is already red */
header {
  background: var(--red-dark);
  border-bottom: none;
}

/* Make navigation links white and bigger */
header nav a {
  color: var(--white);
  font-size: 1.5rem;     /* increase size (default ~1rem) */
  font-weight: 600;      /* keep it bold enough */
  margin: 0 16px;        /* add a little spacing between links */
}

header nav a:hover {
  color: #f1f1f1;        /* slightly lighter white on hover */
}


/* Header Base Styles (for desktop/laptop) */
header {
  background: #c41f1f;          /* your red */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px;
}

header .logo img {
  max-height: 80px;  /* bigger logo on desktop */
  width: auto;
}

.nav-links {
  display: flex;
  gap: 30px;         /* space between links */
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
}

/* Mobile / Tablet */
@media (max-width: 768px) {
  header {
    flex-direction: column;     /* stack vertically */
    text-align: center;
  }

  .logo img {
    max-height: 60px;           /* slightly smaller logo on mobile */
  }

  .nav-links {
    flex-direction: column;     /* stack links */
    gap: 12px;
    margin-top: 10px;
  }

  .nav-links a {
    font-size: 18px;            /* touch-friendly but not oversized */
  }
}