/* Main Layout */
body {
height: 100vh;
width: 100%;
margin: 0;
font-size: 1em;
font-weight: 300;
font-family: 'Lato',  sans-serif;
color: black;
background-color: #9dae11;
line-height: 2em;
font-weight: 600;
}


.wrapper{
display: grid;
grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
grid-template-areas:
/* STACKED **/ 
"header"
"hero"
"intro"
"seasons"
"details"
"cta"


"footer"

;
}
/*MOBILE END */



/*LARGER SCREENS ONLY*/
@media  only screen and (min-width: 1281px){
.wrapper{
display: grid;
grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
grid-template-areas:
" header     header  header        header "
" hero  hero  hero   hero  "
"  .  intro   intro  . "
" .  seasons  seasons  . "
"  .  details  details  . "
". cta  cta  . "
"footer  footer  footer  footer"

;
}
}

.hero{
grid-area: hero;
background-image:  url(../images/new/front-dam.webp);
background-repeat: no-repeat;
background-position: center center;
background-size:cover; 
min-height: 500px;
padding: 20px;
margin-top:-8px;
margin-bottom: 60px;
text-align: center;
background-attachment: fixed;
}


.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 0.5rem;
  color: white;
}

.hero h2 {
  font-size: 1.2rem;
  color: white;
}


.intro{
 grid-area: intro;
}
.intro p{
 font-size: 1.2em;
 color: black;
}


.seasons{
 grid-area: seasons;
 margin-bottom: 40px;
}

.details{
 grid-area: details;
 margin-top: 40px;
}
.details h3, p{
 color: white;
}
.cta{
 grid-area: cta;
 margin-bottom: 60px;
}
.cta p{
 color: black;
}



header{
grid-area: header;
min-height: 90px;
margin: 0;
}

/*NAVIGATION*/


/* Base styles */
.navbar {
background-color: #303030;
color: white;
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: 100px;
}

/* 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: white;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 300;
}

/* 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;
}
}


/* ENDS */







/* Table Styles */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  margin: 2rem 0;
}

th, td {
  padding: 1rem;
  border: 1px solid #ccc;
  text-align: left;
}

th {
  background-color: #e9f5ee;
  color: #1a3a2c;
}

/* Call to Action */
.cta {
  background-color: #e9f5ee;
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 2rem;
  border-radius: 8px;
}

.cta .btn {
  background-color: #1a3a2c;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  text-decoration: none;
  font-size: 1rem;
  border-radius: 4px;
  display: inline-block;
  margin-top: 1rem;
  transition: background-color 0.3s ease;
}

.cta .btn:hover {
  background-color: #295a43;
}


.btn {
background-color: rgb(76, 79, 75);
color: white;
font-size: clamp(0.8em, 1em, 1em); /* Responsive font size */
font-weight: 300;
padding: 10px 10px   10px ; /* Scales with font size */
text-decoration: none;
cursor: pointer;
border-radius: 8px;
border: none;
display: inline-block;
margin: 10px;
transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
background-color: rgb(96, 99, 95); /* Slightly lighter on hover */
transform: scale(1.03); /* Gentle hover effect */
}




footer {
  grid-area: footer;
  background-color: rgb(76, 79, 75);
  color: white;
  padding: 2em 1em;
  font-family: 'Lato', sans-serif;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: auto;
  gap: 2em;
}

.footer-section {
  flex: 1 1 250px;
  min-width: 200px;
}

.footer-section h4 {
  font-size: 1.1em;
  margin-bottom: 0.5em;
  color: #a6a1a1;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  margin-bottom: 0.4em;
}

.footer-section a {
  color: white;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-section a:hover {
  color: #ccc;
}

.footer-bottom {
  text-align: center;
  margin-top: 2em;
  font-size: 0.9em;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 1em;
}