h1 {font-family: arial; text-align:center; font-size: 70px; color:darkgreen; background-color: lime;}
h2 {font-family: arial; text-align:center; font-size: 55px; color:black;}
h3 {font-family: arial; text-align:center; font-size: 40px; color:black;}
h4 {font-family: arial; text-align:left; font-size: 30px; color:black;}
h6 {font-family: arial; text-align:center; font-size: 20px; color:black;}
p {font-family: arial; text-align:left; font-size: 20px; color:black;}

a {text-align: center;}
a {font-family:arial; }
a {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a{
  font-size: 25px;
  display: flex;
  flex-direction: column; 
  justify-content: center; 
  align-items: center;     
  width: 100%;
  font-family: sans-serif; 
}


.split-container {
  display: flex;
  align-items: center; /* Aligns text and image vertically */
  gap: 40px;          /* Adds space between the columns */
  margin: 0 5%;        /* Keeps your slight side margins from earlier */
}


.text-column, 
.image-column {
  flex: 1; 
}

/* Prevents the image from overflowing its column */
.image-column img {
  width: 100%;
  height: auto;
  display: block;
}

.image-column:hover img {
    transform: scale(1.15); /* Zooms the image in by 15% */
}


/* Styling for the new banner container */
.bottom-banner {
    width: 100%;
    margin-top: 40px; /* Adds space below the Buzzshock section */
    overflow: hidden;
}

/* Controls ONLY the banner image, not alien image */
.bottom-banner img {
    width: 100%;
    height: auto; /* Keeps the image from stretching out of proportion */
    display: block;
    border-top: 13px solid rgb(6, 22, 1);
}

/* top banner */
/* Styles the banner container */
.top-banner {
  background-color: #22661f;       /* Dark background */
  padding: 15px 30px;           /* Spacing inside the banner */
  display: flex;                /* Aligns logo and buttons in a row */
  justify-content: space-between;/* Pushes logo left, buttons right */
  align-items: center;          /* Centers items vertically */
  position: sticky;             /* Keeps banner at top when scrolling */
  top: 0;
  z-index: 1000;                /* Ensures it stays above other content */
}

/* Removes extra spacing around the logo container */
.logo {
  display: flex;
  align-items: center;
}

/* Container for the logo */
.logo {
  display: flex;
  align-items: center; /* Centers the image vertically in the banner */
}

/* Forces the logo image to match the button size */
.logo img {
  height: 35px;        /* Matches the visual height of your buttons */
  width: auto;         /* Keeps the logo aspect ratio perfect so it doesn't stretch */
  display: block;      /* Removes awkward blank spaces underneath images */
}
/* Turns the links into lookalike buttons */
.nav-buttons {
  display: flex;       
  flex-direction: row; /* Rows them horizontally */
  align-items: center; /* Aligns them perfectly straight */
}

/* Adjusts the button spacing */
.nav-btn {
  color: rgb(47, 207, 15);
  text-decoration: none;        
  background-color: #119721;    
  padding: 8px 24px;            
  border-radius: 4px;           
  margin: 0 30px;       /* Adds equal 5px gaps to the left and right */
  transition: background 0.3s;  
}
/* Changes the button color when you hover over it */
.nav-btn:hover {
  background-color: #60e33f;    /* Darker blue on hover */
}