body {
margin: 0;
font-family: Arial, sans-serif;
line-height: 1.6;
}

/* HEADER */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
background: #111;
color: #fff;
}

.logo {
font-size: 20px;
font-weight: bold;
}

nav a {
color: #fff;
margin-left: 20px;
text-decoration: none;
}

/* HERO */
.hero {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('../images/hero.jpg') center/cover no-repeat;
    color: #4A4A4A;
    text-align: center;
    height: 90vh;          /* controlled height  revising from 60 to 75 for the  main text too high */
    padding: 40px 20px;    /* reduced padding */

  /*   display: flex;    12:20 - 3 hours later i am so mad at chatgpt  */
   /*   flex-direction: column;   12:20 - 3 hours later i am so mad at chatgpt  */
	  /*   justify-content: center;    12:20 - 3 hours later i am so mad at chatgpt  */
	
  /* justify-content: center; */
	/*   justify-content: flex-start;   back out! 🔥remove this */
  /*  padding-top: 120px;         --remove it:  controls vertical position */
	
	
}







.hero h1 {
font-size: 42px;
margin-bottom: 10px;
}

.hero p {
font-size: 18px;
}

/* BUTTON */
button {
	 align-self: center;   /* 🔥 THIS fixes it */
	 margin-top: 40px;   /* 👈 moves it back up a tad w 49px */
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  background: #c9a44c;
  color: #000;
  cursor: pointer;

  display: inline-block;   /* 🔥 FIX */
}

/* SECTIONS */
.section {
    padding: 80px 20px;
    max-width: 900px;
    margin: auto;
    text-align: left;
}

.video iframe {
width: 100%;
height: 480px;
}

.services {
display: flex;
flex-direction: column;
gap: 20px;
}

.events, .testimonials {
text-align: left;
}

/* CTA */
.cta {
background: #111;
color: #fff;
padding: 60px 20px;
text-align: center;
}

/* FOOTER */
footer {
text-align: center;
padding: 20px;
background: #f4f4f4;
}