*{box-sizing:border-box;margin:0;padding:0}

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

a {
color: white;
}
img{
width: 100%;
height:auto;
}
.wrapper{
display: grid;
grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
grid-template-areas:
/* STACKED **/ 
"header"
"hero"
"main"
"patterns"

;
}
/*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  "
" .  main  main   .  "
"  .  patterns  patterns  . "

;
}
}



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

.hero {
grid-area: hero;
background-image:   url(../images/flies/valley-rainbow-fly-large.webp);
background-repeat: no-repeat;
background-position: center center;
background-size:cover; 
min-height: 600px;
padding: 20px;
margin-top: 0px;

}
.hero h1{
  font-size: 2vw;
  padding: 10px;
  line-height: 1.7em;
}
.my-text{
   font-size: 1em;
  line-height: 1.6;
  padding: 0 1rem;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
 font-weight: 500;

}


main {
grid-area: main;
padding: 20px;
margin-bottom: 0;
}

.blog-content {
max-width: 800px;
margin: 0 auto;
line-height: 1.7;
color: #333;
}

.blog-content h1,
.blog-content h2,
.blog-content h3 {
font-weight: 600;
margin-top: 2rem;
margin-bottom: 1rem;
color: #2c3e50;
}

.blog-content h1 {
font-size: 2rem;
}

.blog-content h2 {
font-size: 1.6rem;
}

.blog-content h3 {
font-size: 1.3rem;
}

.blog-content p {
margin-bottom: 1.5rem;
}

.blog-content ul {
padding-left: 1.5rem;
margin-bottom: 1.5rem;
}

.blog-content ul li {
margin-bottom: 0.5rem;
list-style: disc;
}

.blog-content a {
color: white;
text-decoration: underline;
}

.blog-content a:hover {
color: rgb(8, 203, 238);

}

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: rgb(76, 79, 75); /* Your button color */
  color: white;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 1.5em;
  cursor: pointer;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.back-to-top:hover {
  transform: scale(1.1);
  background-color: rgb(96, 99, 95); /* Slight hover effect */
}

.patterns{
  grid-area: patterns;
padding: 20px;
margin-bottom: 40px;
}
.patterns ul{
  padding-left: 20px;
}


.faq {
  background-color: #f9f9f9;
  padding: 40px 20px;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.faq h2 {
  font-size: 2em;
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.faq-item {
  margin-bottom: 25px;
}

.faq-question {
  font-size: 1.2em;
  color: #2a2a2a;
  margin-bottom: 10px;
  font-weight: 600;
}

.faq-answer {
  font-size: 1em;
  color: #444;
  line-height: 1.6;
  margin: 0;
}



.btn {
background-color:rgb(76, 79, 75);
color:  white;
font-size: 1em;
font-weight: 300;
padding: 10px 30px ; 
text-decoration: none;
cursor: pointer;
border-radius: 8px;
margin: 10px;
transform: translate(-40%, -40%);
box-shadow: 0 0 5px #444;
transition: all 0.3s ease;


&:hover {
box-shadow: 0 0 30px grey;
padding: 10px 30px;
font-size: 1.1em;
}

}

/* FLY IMAGE BLOCKS */
.fly-block {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 2rem 0;
  padding-bottom: 1.5rem;
}

.fly-text {
  flex: 1 1 60%;
}

.fly-image {
  flex: 1 1 35%;
  max-width: 300px;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}

.fly-image img {
  width: 80%;
  height: auto;
  display: block;
  border-radius: 8px;
  transition: transform 0.4s ease;

}

.fly-image:hover img {
  transform: scale(1.1);
 
}

/* Caption under image */
.fly-image .caption {
  font-size: 0.9rem;
   margin-top: 20px;
  color: #444;
}

/* Optional: Lightbox open in new tab — already using target="_blank" */
.fly-image a {
  text-decoration: none;
  color: inherit;
}
/* Lightbox Modal Style */
.lightbox-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

/* Show modal when anchor is targeted */
.lightbox-modal:target {
  display: flex;
}

/* Image inside lightbox */
.lightbox-modal img {
  max-width: 50%;
  max-height: 80%;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

/* Close link */
.lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 2rem;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

.lightbox-close:hover {
  background: rgba(0, 0, 0, 0.6);
}


/* END */


/*NAVIGATION*/

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

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

.logo {
  color: white;
  font-size: 1rem;
  text-decoration: none;
  font-weight: bold;
}

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

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



/* ===== Base styles already assumed, these extend responsiveness ===== */

/* ===== Mobile First Approach ===== */

/* Small Mobile: Up to 480px */
@media (max-width: 480px) {

  .btn {
background-color:rgb(76, 79, 75);
color:  white;
font-size: 1em;
font-weight: 300;
padding: 10px 10px ; 
text-decoration: none;
cursor: pointer;
border-radius: 8px;
margin: 10px;
transform: translate(-40%, -40%);
box-shadow: 0 0 5px #444;
transition: all 0.3s ease;
justify-self: center;


&:hover {
box-shadow: 0 0 30px grey;
padding: 10px 30px;
font-size: 1.1em;
}

}
.my-text{
  padding: 20px;
}
.my-text p{
  margin-left: 0px;
}


  .fly-block {
    flex-direction: column;
    padding: 1rem 0;
  }
.hero h1{
  font-size: 6vw;
}
  .fly-text, .fly-image {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .fly-text h2 {
    font-size: 1.2rem;
  }

  .fly-text p, .fly-text ul {
    font-size: 1rem;
  }

  .caption {
    font-size: 0.85rem;
  }

  .lightbox-modal img {
    max-width: 95%;
  }

  .nav-links {
    font-size: 0.95rem;
  }
}

/* Medium Devices: Tablets (481px–768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .fly-block {
    flex-direction: column;
    gap: 1.5rem;
  }

  .fly-text, .fly-image {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .fly-text h2 {
    font-size: 1.3rem;
  }

  .fly-text p, .fly-text ul {
    font-size: 1.05rem;
  }

  .lightbox-modal img {
    max-width: 90%;
  }
}

/* Large Tablets to Laptops (769px–1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .fly-block {
    flex-direction: row;
    gap: 2rem;
  }

  .fly-text {
    flex: 1 1 60%;
  }

  .fly-image {
    flex: 1 1 40%;
  }

  .fly-text h2 {
    font-size: 1.4rem;
  }

  .lightbox-modal img {
    max-width: 85%;
  }
}

/* Desktop and up (1025px and above) */
@media (min-width: 1025px) {
  .fly-text h2 {
    font-size: 1.6rem;
  }

  .fly-text p {
    font-size: 1.1rem;
  }

  .caption {
    font-size: 1rem;
  }
}

/* Optional for smaller screens */
@media (max-width: 600px) {
  .tip-text {
    font-size: 1rem;
    padding: 0 1rem;
  }
}