/* ===== Page Hero ===== */
.page-hero{
  background:url('images/about-banner.jpg') center/cover no-repeat;
  height:240px; display:flex; align-items:center; justify-content:center;
  color:#fff; text-align:center;
}
.page-hero-inner h1{font-size:40px;font-weight:700;margin:0}

/* ===== Breadcrumb ===== */
.breadcrumb{
  max-width:1100px;margin:20px auto;font-size:14px;color:#556;
  padding:0 16px;
}
.breadcrumb a{color:#0b66d0;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* ===== About Overview Section ===== */

.about-block {
  max-width:1100px;
  margin:48px auto;
  padding:48px 32px;
  background:#f8fafc;
  border-radius:18px;
}

/* Layout */
.about-grid {
  display:grid;
  grid-template-columns:1.3fr 0.9fr;
  gap:36px;
  align-items:flex-start;
}

/* Tag */
.about-tag {
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#c52238;
  margin-bottom:10px;
}

/* Text */
.about-text h2 {
  font-size:32px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:10px;
}

.about-lead {
  font-size:17px;
  line-height:1.8;
  color:#334155;
  margin-bottom:26px;
}

.about-text h3 {
  font-size:20px;
  font-weight:700;
  color:#111827;
  margin:24px 0 10px;
}

.about-text p {
  color:#374151;
  line-height:1.75;
  margin-bottom:14px;
}

/* Right Card */
.about-card {
  background:#ffffff;
  padding:28px;
  border-radius:16px;
  box-shadow:0 14px 30px rgba(0,0,0,0.08);
}

.about-card h4 {
  font-size:18px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:14px;
}

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

.about-card li {
  font-size:15px;
  padding:10px 0;
  color:#374151;
  border-bottom:1px solid #eef2f7;
}

.about-card li:last-child {
  border-bottom:none;
}

/* CTA */
.about-cta {
  margin-top:26px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Responsive */
@media (max-width:900px) {
  .about-grid {
    grid-template-columns:1fr;
  }

  .about-block {
    padding:28px 18px;
  }
}


/* ===== Buttons ===== */
.about-cta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
     border-radius:10px;font-weight:600;text-decoration:none}
.btn-green{background:#c52238;color:#fff}
.btn-green:hover{background:#e02121}
.btn-outline{border:2px solid #1a10a5;color:#3942c5;background:transparent}
.btn-outline:hover{background:#071fa3;color:#fff}

/* ===== Photo ===== */
.about-photo img{
  width:100%;max-width:420px;aspect-ratio:4/5;object-fit:cover;
  border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.12)
}
.about-photo {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}@keyframes glow {
  from { box-shadow: 0 0 10px #007bff; }
  to { box-shadow: 0 0 25px #00bfff; }
}


/* ===== Responsive ===== */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:18px}
  .about-photo img{max-width:100%}
}