html, body { margin: 0; padding: 0; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }


body,html{
height:100vh;
width:100%;
 font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
color:black;
font-size:1em;
line-height:1.6;
}

a {
color: blue;
}
h2{
font-size: 1.6rem;
font-weight: 700;
}
h3{
font-size: 1.4rem;
font-weight: bold;
}


/*MOBILE FIRST LOAD */
.main-grid {
display: grid;
grid-gap: 20px;
margin: 0em;
grid-template-columns: repeat(auto-fit, minmax(var(--auto-grid-min-size), 1fr));
grid-template-areas:
/* STACKED **/ 
"nav"
"hero"
"img1"
"img2"
"img3"
"img4"
"footer"
;
}

/*MOBILE END */


/*MOBILE END */
/*LARGER SCREENS ONLY*/
@media  only screen and (min-width: 481px){
.main-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap:40px;
grid-template-areas:

"hero                 hero              hero           hero  "
".                       img1             img2        .  "
" .                      img3              img4        .    "

"footer              footer             footer         footer  "

;
}
}
a {
color: rgb(26, 107, 236);
}  
img {
max-width: 100%;
height: auto;
}
.hero{
grid-area: hero;
text-align: center;
background-image:  linear-gradient(  rgba(38, 39, 39, 0.4) 60%, rgba(38, 39, 39, 0.9) 60%, rgba(38, 39, 39, 0.1) 100%),  url(/images/ball-new.jpg) ;
background-repeat: no-repeat;
background-position: center center ;
background-size: cover; 
background-attachment: fixed;
min-height: 400px;
}


.hero h1{
font-size: 4.5vw;
color: white;
text-align: center;
margin-top: 5%;
}
.hero h2{
color: white;
text-align:center;
margin-top: 2%;
}


.img1 {
  grid-area: img1;
  display: flex;
  text-align: center;
  margin: 0 30x;
}
.img2 {
  grid-area: img2;
  display: flex;
  text-align: center;
  margin: 0 30px;
}
.img3 {
  grid-area: img3;
  display: flex;
  text-align: center;
  margin: 0 30px;
}
.img4 {
  grid-area: img4;
  display: flex;
  text-align: center;
  margin: 0 30px;
}



/* Zoom on hover */
.zoom:hover{
transform: scale(1.5); /* zoom in 10% */
transition: transform 0.4s ease; /* smooth animation */
cursor: pointer;
}



/* MAIN BUTTON*/
.btn-center {
  text-align: center;
}
.btn{
background-color:#23913d; 
  color:#fff;
  cursor:pointer;
  display:inline-flex;               /* inline so it centers nicely without forcing width */
  align-items:center;
  justify-content:center;
  border-radius:8px;
  text-decoration:none;
  font-size:1rem;                    /* more readable than 0.8em */
  font-weight:700;
  padding:0.9rem 1.4rem;
  line-height:1;
  border: 1px solid white;
  box-sizing:border-box;
  transition:transform .2s ease, background-color .2s ease, filter .2s ease;
}

/* Optional: make it a centered block with a max width */
.btn--block{
  display:flex;
  width:100%;
  max-width:25rem;                   /* replaces fixed 25em */
  margin:0 auto;
}

/* Hover/focus states */
.btn:hover,
.btn:focus-visible,
.btn.zoom-btn:hover{
  transform:scale(1.05);
  background-color:#e63e3e;         /* change to red on hover */
}

.image{
grid-area: image;
display: grid;
grid-gap: 2em;
grid-template-columns: repeat(4, 1fr);
justify-self: center;
padding: 20px;
margin-top: 60px;
}
/* BOTTOM IMAGES */

/* ENDS */



footer{
grid-area: footer;
margin-top: 40px;
font-size: 0.9em;
text-align: center;
padding: 40px;
background-color: rgb(44, 43, 43);
color: rgb(255, 255, 255);
}

footer a{
  color: orangered;
}






/* NEW NAVIGATION */


/* Base styles */
.navbar {
background-color: #303030;
color: greenyellow;
padding: 10px 20px;
position: fixed;
width: 100%;
z-index: 999;
}

.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: auto;
max-height: 80px;
}

.logo {
max-width: 80px;
}

/* Hamburger styles */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: white;
  margin: 4px 0;
  transition: 0.4s;
}

/* Nav links */
.nav-links {
  display: flex;
  list-style: none;
  gap: 20px;
}

.nav-links a {
color: greenyellow;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 300;
}
.nav-links a:hover{
  color: greenyellow;
  font-weight: bold;
}
/* Mobile styles */
#menu-toggle {
  display: none;
}

@media (max-width: 768px) {
.hamburger {
display: flex;
}

.nav-links {
position: absolute;
top: 60px;
left: 0;
background-color: #303030;
width: 100%;
flex-direction: column;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-in-out;

}

#menu-toggle:checked ~ .nav-links {
max-height: 1000px;
}

.nav-links li {
padding: 15px;
text-align: center;
}
}
  /* NAV END */
  
/* MEDIA QUERIES */
@media (max-width:480px) {
 



}