/* ================= RESET ================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* ================= SERVICES & FAQ HEADERS ================= */
#services h2,
#faq h2 {
    text-align: center;   /* center text */
    width: 100%;          /* make sure it takes full width */
    margin: 0 auto 40px;  /* center horizontally and add spacing below */
    font-size: 32px;
}

/* Optional: center the content under the header */
#services .service-cards,
#faq .faq-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* center the cards / faq items */
    gap: 30px;
}

/* ================= GENERAL SECTION SPACING ================= */
section, footer {
  padding-top: 100px;   /* space above each section */
  padding-bottom: 100px; /* space below each section */
}

@media(max-width: 768px){
  section, footer {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  color: #111;
  background: #f8f8f8;
  padding-top: 100px; /* for fixed navbar */
  scroll-behavior: smooth;
}

/* ================= SCROLL PROGRESS ================= */
#scroll-progress {
  position: fixed;
  right: 0;
  top: 0;
  width: 8px;
  height: 0;
  background: #d4af37;
  z-index: 9999;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(212,175,55,0.6), 0 0 15px rgba(212,175,55,0.3);
  transition: height 0.1s ease-out;
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(212,175,55,0.6), 0 0 15px rgba(212,175,55,0.3); }
  50% { box-shadow: 0 0 15px rgba(212,175,55,0.8), 0 0 25px rgba(212,175,55,0.4); }
}
#scroll-progress { animation: glowPulse 2s infinite; }

/* ================= MOBILE HAMBURGER FIX ================= */
@media (max-width: 768px) {

  /* SHOW truck icon */
  .truck-menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2000;
  }
.truck-menu.active {
  transform: rotate(90deg) scale(1.05);
}

  /* HIDE normal nav links in navbar row */
  #nav-menu {
    position: fixed;
    top: 80px;
    right: -100%;
    width: 100%;
    height: calc(100vh - 80px);
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: right 0.35s ease;
  }

  #nav-menu ul {
    flex-direction: column;
    gap: 30px;
  }

  #nav-menu.active {
    right: 0;
  }
}

/* ================= NAVBAR ================= */
#navbar {
  width: 100%;
  height: 100px;
  background: #fff;
  color: #111;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-container {
  width: 90%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo img { height: 60px; transition: height 0.3s ease; }
#navbar nav ul {
  list-style: none;
  display: flex;
  gap: 25px;
}
#navbar nav ul li a {
  text-decoration: none;
  color: #111;
  font-weight: 600;
  transition: color 0.3s;
}
#navbar nav ul li a:hover { color: #d4af37; }
.btn-nav {
  background: #d4af37;
  color: #111;
  padding: 10px 25px;
  border-radius: 5px;
  font-weight: 600;
}
.btn-nav:hover { background: #b9952f; }

/* Shrink on scroll */
#navbar.shrink {
  height: 70px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
#navbar.shrink .logo img { height: 45px; }

/* ================= HERO ================= */
.hero-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
}
.hero-left, .hero-right { flex: 1; min-width: 0; }
.hero-logo-box { background: rgba(0,0,0,0.05); padding: 20px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.hero-logo-box img { max-width: 100%; height: auto; display: block; }
.hero-content h1 { font-size: clamp(28px, 4vw, 48px); color: #111; margin-bottom: 15px; }
.hero-content p { font-size: clamp(16px, 2.5vw, 20px); color: #333; margin-bottom: 25px; }
.btn-hero {
  background: #d4af37;
  color: #111;
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
  animation: pulse 2s infinite;
}
.btn-hero:hover { background: #b9952f; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(212,175,55,0.7); }
  70% { box-shadow: 0 0 20px 10px rgba(212,175,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}

/* ================= ABOUT ================= */
.about-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}
.about-text, .about-image { flex: 1; min-width: 0; }
.about-text h2 { font-size: 32px; margin-bottom: 20px; }
.about-text p { font-size: 16px; color: #333; margin-bottom: 15px; }
.about-image img { max-width: 100%; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); }

/* ================= SERVICES ================= */
.service-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}
.card {
  background: #f3f3f3;
  padding: 25px;
  border-radius: 10px;
  text-align: center;
  flex: 1 1 220px;
  max-width: 250px;
  transition: transform 0.3s;
}
.card:hover { transform: translateY(-10px); }
.card .icon { font-size: 40px; margin-bottom: 15px; color: #d4af37; }
.card h3 { margin-bottom: 10px; font-size: 20px; }

/* ================= FAQ ================= */
.faq-item { max-width: 800px; margin: 0 auto 10px; border-bottom: 1px solid #ccc; }
.faq-question { width: 100%; background: none; border: none; padding: 15px; font-size: 18px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; font-size: 16px; color: #333; padding: 0 15px; }
.faq-item.active .faq-answer { max-height: 500px; }
.faq-toggle { transition: transform 0.3s; }
.faq-item.active .faq-toggle { transform: rotate(180deg); }

/* ================= CONTACT ================= */
.contact-box {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 20px;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.stylish-heading { font-size: 32px; margin-bottom: 30px; color: #111; }
.contact-details p { font-size: 16px; color: #333; margin-bottom: 12px; }
.contact-btn {
  display: inline-block;
  margin-top: 20px;
  background: #d4af37;
  color: #111;
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.contact-btn:hover { background: #b9952f; }

/* ================= FOOTER ================= */
footer { background: #111; color: #fff; text-align: center; padding: 50px 20px; }

/* ================= MOBILE RESPONSIVE ================= */
@media(max-width: 768px){
  .hero-container, .about-container { flex-direction: column; text-align: center; gap: 20px; }
  .service-cards { flex-direction: column; align-items: center; }
  #navbar { height: 80px; }
  #navbar.shrink { height: 60px; }
  #navbar .logo img { height: 50px; }
  #navbar.shrink .logo img { height: 35px; }

  /* Mobile nav */
  #nav-menu {
    position: fixed;
    top: 80px;
    right: -100%;
    width: 100%;
    height: calc(100vh - 80px);
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    transition: right 0.35s ease;
  }
  #nav-menu.active { right: 0; }

  .truck-menu { display: block; cursor: pointer; z-index: 1100; }
}