/* RESET AND BASE */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: 'Poppins', sans-serif;

}

body {

  color: #333;

  background: #fff;

  line-height: 1.6;

}

/* HEADER */

.header {

  background: #fcb900;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 15px 25px;

  position: sticky;

  top: 0;

  z-index: 1000;

}

.logo {

  font-size: 1.6rem;

  font-weight: 700;

}

.logo span {

  color: #111;

}

nav ul {

  list-style: none;

  display: flex;

  gap: 20px;

}

nav a {

  text-decoration: none;

  color: #111;

  font-weight: 600;

}

nav a:hover {

  color: #fff;

}

.btn-quote {

  background: #111;

  color: #fff;

  padding: 10px 20px;

  border-radius: 6px;

  text-decoration: none;

  font-weight: 600;

  transition: 0.3s;

}

.btn-quote:hover {

  background: #333;

}

/* HERO SECTION */

.hero {

  position: relative;

  height: 80vh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  overflow: hidden;

}

.hero-bg {

  position: absolute;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.hero-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0,0,0,0.5);

}

.hero-content {

  position: relative;

  color: #fff;

  z-index: 10;

}

.hero h2 {

  font-size: 1.8rem;

}

.hero h1 {

  font-size: 3rem;

  color: #fcb900;

  margin: 15px 0 25px;

}

/* SERVICES */

.services {

  background: #111;

  color: #fff;

  text-align: center;

  padding: 60px 20px;

}

.services h2 {

  color: #fcb900;

  margin-bottom: 30px;

}

.service-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 25px;

}

.service-box {

  background: #222;

  padding: 25px;

  border-radius: 10px;

  width: 280px;

  box-shadow: 0 3px 6px rgba(0,0,0,0.3);

}

/* EQUIPMENT */

.equipment {

  padding: 60px 20px;

  text-align: center;

}

.equipment h2 {

  margin-bottom: 30px;

  color: #111;

}

.equipment-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 25px;

}

.equipment-card {

  background: #fff;

  border-radius: 10px;

  border: 1px solid #ddd;

  width: 280px;

  box-shadow: 0 3px 6px rgba(0,0,0,0.1);

  padding: 15px;

}

.equipment-card img {

  width: 100%;

  border-radius: 10px;

  margin-bottom: 10px;

}

/* TESTIMONIALS */

.testimonials {

  background: #111;

  color: #fff;

  padding: 60px 20px;

  text-align: center;

}

.testimonials h2 {

  color: #fcb900;

  margin-bottom: 30px;

}

.testimonial-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 25px;

}

.testimonial-card {

  background: #222;

  border-radius: 10px;

  padding: 20px;

  width: 280px;

  text-align: left;

  box-shadow: 0 3px 6px rgba(0,0,0,0.2);

}

.testimonial-card h4 {

  color: #fcb900;

  font-size: 0.9rem;

  text-align: right;

  margin-top: 10px;

}

/* QUOTE FORM */

.quote {

  background: #fcb900;

  padding: 60px 20px;

  text-align: center;

}

.quote form {

  max-width: 500px;

  margin: auto;

  display: flex;

  flex-direction: column;

  gap: 15px;

}

.quote input, .quote textarea {

  padding: 12px;

  border-radius: 6px;

  border: none;

  outline: none;

  font-size: 1rem;

}

.quote button {

  background: #111;

  color: #fff;

  padding: 12px;

  border: none;

  border-radius: 6px;

  font-weight: bold;

}

.direct-email {

  margin-top: 15px;

  font-size: 0.95rem;

}

/* FOOTER */

footer {

  background: #111;

  color: #fff;

  text-align: center;

  padding: 20px;

}

/* RESPONSIVE DESIGN */

@media (max-width: 768px) {

  .header {

    flex-direction: column;

  }

  nav ul {

    flex-wrap: wrap;

    justify-content: center;

  }

  .hero h1 {

    font-size: 2rem;

  }

  .service-box, .equipment-card, .testimonial-card {

    width: 90%;

  }

}