@font-face {
  font-family: 'Helvetica';
  src: url('../assets/fonts/Helvetica.woff2') format('woff2'); /* Much faster loading! */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica'; /* EXACT same name */
  src: url('../assets/fonts/Helvetica-Bold.woff2') format('woff2');
  font-weight: 700;           /* 700 means Bold */
  font-style: normal;
  font-display: swap;
}

:root {
  /* Define your global text color variables */
  --text-nav: #ffffff;        /* Used for navigation links */
  --text-main: #2c196b;       /* Used for general paragraphs and body text */
  --text-on-yellow: #000000;     /* Used for accent text */
  --text-heading: #17176e;    /* Used for headers like h1, h2, h3 */
  --text-muted: #666666;      /* Used for secondary text or captions */
  --text-light: #ffffff;      /* Used for dark backgrounds (like your nav-link hover) */
  --sunny-yellow: #F7B000;      /* A bright yellow for accents or highlights */
  --sunny-bright: #eeb422;      /* A bright orange for accents or highlights */
  --sunny-blue: #0A0A54;        /* A bright blue for accents or highlights */
  --hover-blue: #17176e;        /* A slightly darker blue for hover states */
  --button-blue: #29297e;       /* A bright blue for buttons */
  --button-hover-blue: rgb(48, 48, 150);  /* A slightly darker blue for button hover states */
}

/* Base section padding */
.hero-section {
  padding: 60px 20px;
  background-color: #ffffff;
}

/* Parent container splitting left and right sides */
.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center; /* Vertically centers the text box and image */
  justify-content: space-between;
  gap: 40px; /* Creates clean space between the left text and right image */
}

/* LEFT SIDE: The boxed text area (No outline) */
.text-box {
  flex: 1; /* Takes up 50% of the available width */
  border-radius: 8px; /* Smooth rounded corners */
  /* Explicitly ensuring no outline or border is applied */
  border: none;
  outline: none; 
}

.tagline {
  font-family: 'MyCustomFont', sans-serif; /* Your custom font */
  font-size: 3rem;
  line-height: 1.2;
  color: var(--text-heading);
  margin-bottom: 24px; /* Space between tagline and buttons */
}

/* Container for the link buttons below tagline */
.button-group {
  display: flex;
  gap: 15px; /* Creates clean space between buttons without shifting layouts */
}

/* Button Styling */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 5px;
  font-family: 'MyCustomFont', sans-serif;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-primary {
  background-color: var(--sunny-yellow);
  color: var(--text-on-yellow);
}

.btn-primary:hover {
  background-color: var(--sunny-bright);
}

.btn-secondary {
  background-color: var(--sunny-blue);
  color: var(--text-light);
  border: 2px solid var(--button-blue);
}

.btn-secondary:hover {
  background-color: var(--button-hover-blue);
}

/* RIGHT SIDE: The image area */
.image-box {
  flex: 1; /* Takes up the other 50% of the width */
  display: flex;
  justify-content: center;
}

.hero-image {
  width: 100%;
  max-width: 500px; /* Prevents the image from getting too large */
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* Responsive adjustment for tablets and mobile phones */
@media (max-width: 768px) {
  .hero-container {
    flex-direction: column-reverse; /* Stacks image on top of text on mobile screens */
    gap: 30px;
  }
  
  .text-box {
    padding: 24px; /* Smaller padding on smaller devices */
  }
}

/* Navbar Container */
.navbar {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: var(--sunny-blue);
}

/* Logo Image Scaling (Left Side) */
.logo-img {
  height: 60px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Right-Aligned Links Container */
.nav-links {
  margin-left: auto; /* Pushes the entire links block to the far right */
  display: flex;
  gap: 20px;         /* Spacing between individual links */
}

/* Link Styling */
.nav-links a {
  text-decoration: none;
  color: var(--text-nav);
}

.nav-link a{
  border-radius: 5px;
  padding: 12px 16px; 
  margin: 0 5px;
}
.nav-link:hover a {
  background-clip: border-box; 
  background-color: var(--hover-blue);
  padding: 12px 16px; 
  margin: 0 5px;
  border-radius: 5px;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica', sans-serif;
  background-color: var(--sunny-blue);
  color: var(--text-main);
}

.accent-word {
  color: var(--sunny-yellow);
  font-weight: bold;
}
.why-i-am-running-section{
  display: grid;
  justify-content: center;
  align-items: center;
}
.why-i-am-running-container{
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 30px;
}
.why-running-header{
  color: var(--text-light);
  display: grid;
  justify-content: center;
  align-items: center;
}
.why-running-content{
  color: var(--text-light);
  display: grid;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.top-3-priorities ul { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: flex; 
  justify-content: flex-start; /* Forces items to sit tightly next to each other */
  gap: 10px; 
}

/* Target each list item */
.top-3-priorities li {
  display: flex;          /* Aligns icon and text side-by-side */
  align-items: center;    /* Vertically centers icon with the text */
  gap: 0px;               /* Adds space between the icon and the text */
}

/* Optional: Style the icons */
.top-3-priorities svg {
  color: #0076ff;         /* Changes the icon color */
  flex-shrink: 0;         /* Prevents the icon from shrinking */
}

.bio {
  color: var(--text-light);
  display: grid;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.contact-section {
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 30px;
  background-color: #FFFFFF;
}

.contact-container {  
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 30px;
  color: var(--sunny-blue);
}

.platform-container {
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 30px;
  color: var(--sunny-blue);
  background-color: #FFFFFF;
}