.header-container {
  display: flex;
  justify-content: space-between; /*pushes logo left, text right */
  align-items: center; /*vertically centers everyhting*/
  padding: 10px 20px;
}

.text-group {
  display: flex; /*makes text in banner sit side-by-side*/
  align-items: center;
  gap: 20px;
}

.wayne {
  font-family: 'Georgia';
  font-size: 24px;
  color: #39FF14; /*neon green*/
  margin: 0;
}

.pro {
  font-family: 'Georgia';
  font-size: 20px;
  color: white;
  margin: 0;
}

.banner {
  max-width: 150px;
  height: auto;
}

body {
  background-color: #131314;
  font-family: 'Georgia';
  margin: 0;
}

/* --- Navigation Bar Rules --- */
.navbar {
  background-color: #1f1f1f; /* Slightly lighter than the black background */
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

.navbar ul {
  list-style-type: none;   /* Removes the bullet points */
  margin: 0;
  padding: 15px;           /* Adds space inside the bar */
  display: flex;           /* Makes the list horizontal instead of vertical */
  justify-content: center; /* Centers the links on the page */
  gap: 40px;               /* Space between each link */
}

.navbar a {
  color: white;            /* Text color */
  text-decoration: none;   /* Removes the default blue underline */
  font-family: 'Georgia';
  font-size: 18px;
  font-weight: bold;
  transition: color 0.3s;  /* Makes the color change smooth */
}

/* This runs when you put your mouse OVER the link */
.navbar a:hover {
  color: #39FF14;          /* Turns Neon Green when hovered! */
}

/* --- 1. The Wrapper (Moves Forward Constantly) --- */
.ball-wrapper {
  position: fixed;
  bottom: 0;          /* Default floor */
  left: -100px;       /* Start off-screen */
  z-index: 9999;
  pointer-events: none;
  
  /* Move across screen in 3.5 seconds */
  animation: drive-right 3.5s linear 1 forwards;
}

/* --- 2. The Ball (Bounces & Spins) --- */
.real-ball {
  width: 100px;
  display: block;
  transform-origin: bottom center; /* Squashes from the bottom up */
  
  /* The Bounce Animation */
  animation: bounce-physics 3.5s forwards;
}


/* --- 3. The Bouncing Ball Animations --- */

/* X-Axis: Just move right */
@keyframes drive-right {
  0%   { transform: translateX(0); }
  100% { transform: translateX(120vw); } /* Go past the screen edge */
}

/* Y-Axis: Gravity Simulation */
@keyframes bounce-physics {
  /* --- Bounce 1 (High) --- */
  0% {
    transform: translateY(0) scale(1.1, 0.8) rotate(0deg); /* Squashed at start */
    animation-timing-function: ease-out; /* Decelerate going up */
  }
  15% {
    transform: translateY(-40vh) scale(1, 1) rotate(45deg); /* Peak 1 */
    animation-timing-function: ease-in;  /* Accelerate falling down */
  }
  30% {
    transform: translateY(0) scale(1.1, 0.8) rotate(55deg); /* Impact 1 (Squash 1) */
    animation-timing-function: ease-out;
  }
  
  /* --- Bounce 2 (Medium) --- */
  30% { transform: translateY(0) scale(1, 1) rotate(135deg); } /* Un-squash */
  45% {
    transform: translateY(-20vh) rotate(270deg); /* Peak 2 */
    animation-timing-function: ease-in;
  }
  60% {
    transform: translateY(0) scale(1.05, 0.9) rotate(180deg); /* Squash 2*/
    animation-timing-function: ease-out;
  }
  
  /* --- Bounce 3 (Low) --- */
  75% {
    transform: translateY(-10vh) rotate(225deg); /* Peak 3 */
    animation-timing-function: ease-in;
  }
  90% {
    transform: translateY(0) rotate(270deg); /* Impact 3 */
    animation-timing-function: ease-out;
  }
  
  /* --- Roll Away --- */
  100% {
    transform: translateY(0) rotate(360deg); /* Spin fast while rolling */
  }
}

/* --- 4. Desktop Floor Adjustment --- */
@media (min-width: 601px) {
  .ball-wrapper {
    bottom: 275px; /* Lifts the whole animation up for computers */
  }
}

/* --- Mobile Optimization --- */
/* This rule ONLY applies if the screen is smaller than 600px (like a phone) */
@media (max-width: 600px) {
  
  /* 1. Make the Navbar Stack Vertically */
  .navbar ul {
    flex-direction: column;  /* Stack links top-to-bottom */
    gap: 10px;               /* Less space between items */
    padding: 10px;
  }

  /* 2. Make the Header Stack too */
  .header-container {
    flex-direction: column;  /* Put the Logo ON TOP of the Text Group */
    gap: 20px;
    text-align: center;      /* Center the text since it's now stacked */
  }
  
  /* 3. Center the text group specifically */
  .text-group {
    align-items: center;     /* Center the names */
    width: 100%;             /* Ensure it takes up full width */
  }
  
  /* 4. Allow the text to wrap if needed */
  .wayne {
    font-size: 28px;         /* Make the name slightly smaller to fit */
  }
}

/* =========================================
   UNIFIED IMAGE/VIDEO BORDER STYLE
   (Matches the dark style of the contact form)
   ========================================= */

/* This selects all your different image types at once */
.mySlides img, 
.featured-img, 
.featured-video, 
.video-cover {
    /* The new subtle border */
    border: 1px solid #333;
    
    /* The deep dark shadow for depth */
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    
    /* Keep the rounded corners (looks nice!) */
    border-radius: 15px;
    
    /* Important for keeping borders inside the box */
    box-sizing: border-box; 
}
/* FEATURED ARTICLE */
/* Style for the single featured image */
.featured-img {
  width: 100%;                  /* Forces it to fit the container width */
  height: auto;                 /* Keeps the shape correct (doesn't squish) */
  display: block;               /* Fixes tiny gap issues at the bottom of images */
}

/* --- Slideshow Rules --- */
.slideshow-container {
  max-width: 800px;
  position: relative;
  margin: 20px auto; /* Adds space above/below and centers it */
}

/* Hide images by default */
.mySlides {
  display: none;
}

.slide-title {
  text-align: center;       /* Centers the text */
  color: #39FF14;         /* Neon green color */
  font-family: 'Georgia';   
  font-size: 24px;          
  margin-bottom: 15px;      /* Adds breathing room between title and photo */
  
  /* The "Clean" Design Tricks: */
  text-transform: uppercase; /* Makes it all caps (looks more professional) */
  letter-spacing: 3px;       /* Spreads the letters out slightly */
  font-weight: normal;       /* Keeps it thin and elegant, not chunky */
}

/* The Dots Container */
.dots-container {
  text-align: center;
  margin-top: 10px;
}

/* The Dot Style */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 4px;
  background-color: #717171; /* Grey */
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Active state (Neon Green) */
.active, .dot:hover {
  background-color: #39FF14; 
}

/* Fading Animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/*Thumbnail for video: youth training*/
.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9; /* Ensures the box is video-shaped */
}

.video-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  /* Position it ON TOP of the video */
  position: absolute; 
  top: 0;
  left: 0;
  z-index: 10; /* Higher number = on top */
  cursor: pointer;
}

.featured-video {
  width: 100%;                /* Stretches to fit the container */
  aspect-ratio: 16 / 9;       /* Forces standard video shape (Widescreen) */
}

/* Contact Text to Georgia */
.pricing-contact {
  font-family: Georgia, 'Times New Roman', serif;
}

/* --- Desktop Adjustment --- */
/* This applies ONLY to screens wider than 600px (Computers/Tablets) */
@media (min-width: 601px) {
  .bouncing-ball {
    bottom: 325px;  /* Lifts tennis ball starting point; Change this number to fit your taste. */
  }
}