*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#111;color:#fff}

.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 6%;
  background:#151515;
  border-bottom:1px solid #7c5a21;
  position:relative;
  z-index:100;
}

.logo{font-size:38px;color:#d6aa58;font-weight:bold}
.logo span{color:#e7c97d}
.logo small{display:block;font-size:12px}

nav a{color:#ddd;text-decoration:none;margin:0 12px;transition:color 0.3s}
.btn{
  background:#c99a43;
  color:#111;
  padding:12px 22px;
  border-radius:4px;
  text-decoration:none;
  font-weight:bold;
  display:inline-block;
}

.mobile-btn { display: none; }
.desktop-btn { display: inline-block; }

.menu-toggle { display: none; }
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  cursor: pointer;
}
.hamburger span {
  height: 3px;
  width: 100%;
  background-color: #d6aa58;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:80px 6%;
  background:linear-gradient(135deg,#171717,#0d0d0d);
  gap: 30px;
}
.hero h1{font-size:64px;color:#d4a24b}
.hero h1 span{color:#fff}
.hero p{margin:25px 0;line-height:1.8;color:#ccc;max-width:500px}
.hero img{max-width:100%;height:auto;display:block;margin:auto}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:60px 6%}
.cards div,.about,.about .img,footer div{background:#181818;border:1px solid #6f5321;padding:25px}

.about{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:0 6% 60px}
.about .img{min-height:320px;background:linear-gradient(#2d2d2d,#171717)}

footer{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:40px 6%;border-top:1px solid #6f5321}
h2,h3{color:#d6aa58;margin-bottom:10px}

/* Responsive Media Queries */

@media (max-width: 1024px) {
  .hero h1{font-size:48px}
  .cards{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 768px) {
  .hamburger { display: flex; }
  .desktop-btn { display: none; }
  .mobile-btn { display: inline-block; margin-top: 15px; text-align: center; }

  nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #151515;
    border-bottom: 1px solid #7c5a21;
    padding: 20px 6%;
    flex-direction: column;
    gap: 15px;
  }

  nav a { margin: 0; font-size: 16px; }

  /* Toggle Menu via Checkbox */
  .menu-toggle:checked ~ nav { display: flex; }
  
  /* Hamburger Animation */
  .menu-toggle:checked ~ .hamburger span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
  }
  .menu-toggle:checked ~ .hamburger span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle:checked ~ .hamburger span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
  }

  .hero{
    grid-template-columns:1fr;
    text-align:center;
    padding:50px 6%;
  }
  .hero p{margin:20px auto}
  .hero h1{font-size:38px}

  .about{grid-template-columns:1fr}
  footer{grid-template-columns:1fr}
}

@media (max-width: 480px) {
  .logo{font-size:28px}
  .cards{grid-template-columns:1fr}
  .hero h1{font-size:30px}
}