/* ===== HERO ===== */
.about-hero {
background: linear-gradient(rgba(22,45,76,0.78), rgba(22,45,76,0.82)),
              url("/static/img/about-hero.jpg") center/cover no-repeat;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.about-hero h1 {
  color: #fff;
  font-weight: 800;
}
.about-hero h1 span {
  color: #d4af37; /* gold */
}
.about-hero p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
}

/* ===== WHO WE ARE ===== */
.about-intro {
  background: #0f1a2c;
  color: #fff;
}
.about-intro img {
  border-radius: 12px;
  border: 3px solid #d4af37;
}
.about-intro p {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
}

.who-we-are{
  color: #D4AF37 !important;
  text-decoration: none !important;
  font-weight: bold !important;
}

.who-we-are:hover {
  color: white !important;
  text-decoration: underline;
}


/* ===== MISSION ===== */
.mission-section {
  background: linear-gradient(90deg, #162d4c, #0f2438);
  color: #fff;
}
.mission-section p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
}

/* ===== STATS ===== */
.stats-section {
  background: #071322;
  color: #fff;
}
.stat-box {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 25px 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stat-box h2 {
  font-weight: 800;
  color: #d4af37;
  margin-bottom: 6px;
}
.stat-box p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}
.stat-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

/* ===== CTA ===== */
.about-cta {
  background: linear-gradient(90deg, #162d4c, #0f2438);
  color: #fff;
}
.about-cta .btn-order-now {
  background-color: #d4af37;
  color: #162d4c;
  padding: 12px 32px;
  font-weight: 600;
  border-radius: 50px;
  transition: 0.3s ease;
  border: none;
}
.about-cta .btn-order-now:hover {
  background-color: #b08f2f;
  color: #fff;
  transform: translateY(-2px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
  .about-hero h1 {
    font-size: 2.4rem;
  }
}
@media (max-width: 768px) {
  .about-hero {
    height: 60vh;
  }
  .about-hero h1 {
    font-size: 2rem;
  }
  .mission-section p {
    font-size: 1rem;
  }
}