body{
margin:0;
font-family:Arial, sans-serif;
background:#f4f1ea;
color:#333;
}

html , body{
  scroll-behavior: smooth;
  scrollbar-gutter: stable;

}

#livery{
  scroll-margin-top: 90px;
}


header{
background:white;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
position:sticky;
top:0;
z-index: 1000;
}

nav{
max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px;

}

nav a{
margin-left:15px;
text-decoration:none;
color:#444;
font-weight:bold;

}

.hero{
height:100vh;
background:url('assets/trail-herd.jpg') center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
color:white;
text-align:center;
}

.hero-content{
background:rgba(0,0,0,0.5);
padding:40px;
border-radius:10px;
}

.btn{
background:#3c5c42;
color:white;
padding:12px 24px;
border-radius:25px;
text-decoration:none;
display:inline-block;
margin-top:10px;
}


.section{
max-width:1100px;
margin:auto;
padding:60px 20px;
}



.gallery-more{
display:block;
text-align:center;
margin-top:25px;
font-weight:bold;
color:#3c5c42;
text-decoration:none;
font-size:16px;
}

.gallery-more:hover{
text-decoration:underline;
}


.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:30px;
}

.card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

.warning{
background:#fff3e0;
border-left:6px solid #e0902d;
padding:20px;
margin-top:30px;
border-radius:6px;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:15px;
}
/* 1. Hover Interaction for Gallery */
.gallery img {
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  filter: grayscale(20%); /* Optional: subtle artistic look */
}

.gallery img:hover {
  transform: scale(1.05); /* Slight zoom */
  filter: grayscale(0%);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  z-index: 10;
}

/* 2. Fullscreen Overlay */
#gallery-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}


/* 3. The Close Button */
.close-overlay {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 50px;
  font-weight: 200;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.2s;
}

.close-overlay:hover {
  transform: rotate(90deg);
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.gallery img{
width:100%;
height:220px;
object-fit:cover;
border-radius:8px;
}


.contact-showcase{
  max-width:1100px;
  margin:0 auto;
  padding:100px 20px;
  text-align:center;
  min-height: calc(100vh - 330px);
  box-sizing: border-box;
}

.contact-showcase h1{
  font-size:48px;
  margin-bottom:10px;
}

.contact-subtitle{
  color:#777;
  margin-bottom:50px;
}


.contact-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:30px;
}

.contact-item{
  background:white;
  padding:40px 25px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.contact-icon{
  font-size:40px;
  margin-bottom:15px;
}

.contact-item h3{
  letter-spacing:2px;
  margin-bottom:10px;
}

.contact-item a{
color:#3c5c42;
text-decoration:none;
font-weight:bold;
}

.contact-item a:hover{
text-decoration:underline;
}


footer{
background:#1f2b22;
color:white;
text-align:center;
padding: 30px;
margin-top:50px;
}


/*hover for cards*/ 
.card {
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  filter: grayscale(20%); /* Optional: subtle artistic look */
}

.card:hover {
  transform: scale(1.05); /* Slight zoom */
  filter: grayscale(0%);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  z-index: 10;
}