body{margin:0;font-family:Arial,sans-serif;background:#111;color:#fff;}
nav{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;background:#000;}
nav ul{display:flex;list-style:none;gap:20px;}
nav a{color:white;text-decoration:none;}
.logo{color:#ff6a00;font-weight:bold;font-size:24px;}
.hero{
height:100vh;
background:url('hero-bg.png') center/cover no-repeat;
display:flex;align-items:center;justify-content:center;
}
.overlay{background:rgba(0,0,0,.55);padding:40px;text-align:center;}
h1{font-size:64px;margin:0;}
.btn{background:#ff6a00;color:white;padding:14px 28px;text-decoration:none;border-radius:4px;}
section{padding:60px 40px;}
.gallery-section {
  padding: 70px 40px;
  background: #181818;
  text-align: center;
}

.gallery-section h2 {
  font-size: 40px;
  margin-bottom: 10px;
  color: #ff6a00;
}

.gallery-section p {
  max-width: 700px;
  margin: 0 auto 35px;
  color: #ccc;
  font-size: 18px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}

.gallery-grid img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 14px;
  border: 2px solid #2a2a2a;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.gallery-grid img:hover {
  transform: scale(1.04);
  border-color: #ff6a00;
  box-shadow: 0 12px 32px rgba(255,106,0,0.25);
}