/* ==================================================
   ABOUT PAGE – PREMIUM BOLD
================================================== */

.about-hero {
  padding: 140px 20px 100px;
  text-align: center;
  background:
    linear-gradient(rgba(15,15,15,.9), rgba(15,15,15,.9)),
    url("../images/hero-bg.png") center/cover no-repeat;
}

.about-hero h1 {
  font-size: 48px;
  color: #C9A24D;
  margin-bottom: 12px;
}

.about-hero p {
  max-width: 720px;
  margin: auto;
  font-size: 18px;
  color: #ddd;
  line-height: 1.7;
}

/* ================= SECTIONS ================= */

.about-section {
  padding: 90px 20px;
  max-width: 1100px;
  margin: auto;
}

.about-section.dark {
  background: #111;
  max-width: 100%;
}

.about-section.dark > * {
  max-width: 1100px;
  margin: auto;
}

.about-section h2 {
  font-size: 34px;
  color: #C9A24D;
  margin-bottom: 20px;
}

.about-section p {
  color: #ccc;
  line-height: 1.8;
  max-width: 900px;
  margin-bottom: 20px;
}

/* ================= LIST ================= */

.about-list {
  list-style: none;
  padding: 0;
}

.about-list li {
  margin-bottom: 12px;
  color: #ccc;
}

/* ================= SERVE GRID ================= */

.serve-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 16px;
}

.serve-box {
  padding: 18px;
  border: 1px solid rgba(201,162,77,.3);
  text-align: center;
  color: #fff;
  font-weight: 500;
}

/* ================= SPLIT ================= */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: 40px;
}

/* ================= FAQ ================= */

.faq p {
  margin-bottom: 20px;
  color: #ccc;
}

/* ================= CTA ================= */

.about-cta {
  padding: 100px 20px;
  text-align: center;
  background:
    linear-gradient(rgba(15,15,15,.9), rgba(15,15,15,.9)),
    url("../images/hero-bg.png") center/cover no-repeat;
}

.about-cta h2 {
  color: #C9A24D;
  margin-bottom: 15px;
}

.about-cta p {
  max-width: 720px;
  margin: 0 auto 25px;
  color: #ddd;
}

.about-cta .btn {
  display: inline-block;
  padding: 14px 30px;
  background: #25D366;
  color: #000;
  font-weight: 600;
  border-radius: 30px;
  text-decoration: none;
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {

  .about-hero {
    padding: 110px 16px 70px;
  }

  .about-hero h1 {
    font-size: 32px;
  }

  .about-section {
    padding: 55px 16px;
  }

  .about-section h2 {
    font-size: 26px;
  }

  .serve-box {
    font-size: 14px;
    padding: 15px;
  }

  .why-grid{
    grid-template-columns: 1fr;

  }
}