/* Reset */
* {margin:0; padding:0; box-sizing:border-box; font-family:Arial, sans-serif;}
body {background:#f9f9f9; color:#333;}

/* Header */
header {
  background:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 50px;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
  position:sticky;
  top:0;
  z-index:100;
}

header .logo {
  display:flex;
  align-items:center;
  font-weight:bold;
  font-size:20px;
}

header .logo img {
  height:50px;
  margin-right:10px;
}

nav ul {
  list-style:none;
  display:flex;
  gap:20px;
}
nav ul li a {
  text-decoration:none;
  color:#333;
  font-weight:500;
}
nav ul li a:hover, nav ul li a.active {color:#008000;}
.quote-btn {
  background:#d35400;
  color:#fff;
  padding:8px 15px;
  border-radius:5px;
  text-decoration:none;
}
.quote-btn:hover {background:#a84300;}

/* Hero Section */
.hero {
  position:relative;
  background:url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c') center/cover no-repeat;
  height:90vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:#fff;
  text-align:center;
  overflow:hidden;
}
.hero::after {
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.5);
  z-index:1;
}
.hero h1, .hero p, .hero .btn {
  position:relative;
  z-index:2;
  text-shadow:2px 2px 6px rgba(0,0,0,0.8);
}
.hero h1 {font-size:50px; font-weight:bold;}
.hero p {margin:15px 0; font-size:20px;}
.hero .btn {
  background:#d35400;
  padding:10px 20px;
  border-radius:5px;
  color:#fff;
  text-decoration:none;
  transition:0.3s;
}
.hero .btn:hover {background:#a84300;}

/* Sections */
section {padding:60px 50px;}
h2 {text-align:center; margin-bottom:30px; color:#008000;}
.about {display:flex; align-items:center; gap:40px;}
.about img {width:50%; border-radius:10px;}
.about-text {width:50%; line-height:1.6;}

/* Cards */
.card-container {display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px;}
.card {
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.card img {width:100%; height:200px; object-fit:cover;}
.card-body {padding:15px;}
.card-body h3 {margin-bottom:8px; color:#333;}
.card-body p {font-size:14px; margin-bottom:10px; color:#555;}
.price {color:#008000; font-size:18px; font-weight:bold;}
.enquire {
  margin-top:10px;
  display:inline-block;
  padding:6px 12px;
  border:1px solid #d35400;
  color:#d35400;
  border-radius:5px;
  text-decoration:none;
}
.enquire:hover {background:#d35400; color:#fff;}

/* Contact */
.contact-box {display:flex; justify-content:space-between; gap:30px;}
.contact-details {line-height:2;}
.contact-form input, .contact-form textarea {
  width:100%;
  padding:10px;
  margin-bottom:15px;
  border:1px solid #ccc;
  border-radius:5px;
}
.contact-form button {
  background:#008000;
  color:#fff;
  padding:10px 20px;
  border:none;
  border-radius:5px;
  cursor:pointer;
}
.contact-form button:hover {background:#006400;}

/* Footer */
footer {background:#111; color:#eee; padding:30px 50px;}
footer .footer-container {display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px;}
footer ul {list-style:none;}
footer ul li {margin-bottom:8px;}
footer ul li a {color:#eee; text-decoration:none;}
footer ul li a:hover {color:#008000;}
footer p {margin-top:20px; text-align:center; font-size:14px;}

/* Responsive */
@media(max-width:992px){
  header {padding:15px 20px;}
  nav ul {gap:15px;}
}

@media(max-width:768px){
  header {flex-direction:column; align-items:flex-start;}
  nav ul {flex-direction:column; gap:10px; margin-top:10px;}
  .about {flex-direction:column;}
  .about img, .about-text {width:100%;}
  section {padding:40px 20px;}
  .hero h1 {font-size:36px;}
  .hero p {font-size:16px;}
}

@media(max-width:480px){
  .hero h1 {font-size:28px;}
  .hero p {font-size:14px;}
  .quote-btn, .hero .btn {padding:6px 12px; font-size:14px;}
  footer {padding:20px;}
}
/* Hide toggle by default */
.menu-toggle {
  display:none;
  font-size:28px;
  cursor:pointer;
}

/* Mobile view */
@media(max-width:768px){
  nav {
    display:none;
    width:100%;
  }
  nav ul {
    flex-direction:column;
    background:#fff;
    padding:15px;
    border-radius:5px;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
  }
  nav ul li {margin:10px 0;}
  .menu-toggle {display:block;}
  nav.active {display:block;}
}
/* Base Styles - keep as is, do not modify */

/* ... all your existing styles above ... */

/* Improved Responsive Styles */

@media (max-width: 1024px) {
  header {
    padding: 15px 20px;
  }
  nav ul {
    gap: 12px;
  }
  section {
    padding: 40px 20px;
  }
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 10px;
    position: relative;
  }
  /* Hamburger shown on mobile */
  .menu-toggle {
    display: block;
  }
  nav {
    display: none;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 999;
    border-radius: 0 0 8px 8px;
  }
  nav.active {
    display: block;
  }
  nav ul {
    flex-direction: column;
    gap: 0;
    padding: 10px 0;
  }
  nav ul li {
    width: 100%;
    margin: 0;
    text-align: left;
  }
  nav ul li a {
    display: block;
    padding: 12px 18px;
    border-bottom: 1px solid #eee;
    color: #333;
  }
  nav ul li:last-child a {
    border-bottom: 0;
  }
  .quote-btn {
    margin-top: 12px;
    width: 90%;
    text-align: center;
    padding: 10px;
    font-size: 16px;
  }
  .about,
  .contact-box,
  .footer-container {
    flex-direction: column;
    gap: 20px;
  }
  .about img,
  .about-text {
    width: 100%;
  }
  .hero h1 {
    font-size: 28px;
  }
  .hero p {
    font-size: 15px;
  }
  .card-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  header {
    padding: 8px 5px;
  }
  .logo img {
    height: 32px;
    margin-right: 5px;
  }
  section {
    padding: 28px 6px;
  }
  .hero h1 {
    font-size: 20px;
  }
  .hero p {
    font-size: 12px;
  }
  .quote-btn,
  .hero .btn {
    padding: 6px 0;
    font-size: 13px;
    width: 100%;
    margin: 6px 0;
  }
  .footer-container {
    padding: 10px 0;
    font-size: 13px;
  }
}

/* Optional: Smooth Navigation Toggle Script (add to script.js)
document.getElementById('menu-toggle').onclick = function() {
  document.getElementById('nav').classList.toggle('active');
}
*/

/* Refined mobile header styles */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 8px;
    height: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  .logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 18px;
    margin-bottom: 8px;
  }
  .logo img {
    height: 32px;
  }
  .menu-toggle {
    position: absolute;
    right: 16px;
    top: 12px;
    font-size: 28px;
    cursor: pointer;
    display: block;
  }
  .quote-btn {
    width: 100%;
    margin: 12px 0 0 0;
    font-size: 15px;
    padding: 10px 0;
    border-radius: 7px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
  }
}

/* This ensures that on mobile, the "Get a Quote" button appears with enough margin and the menu icon is top-right, while the logo/title remains aligned left. */