/* =========================================================
   about.css — page-specific styles for about.php
   ========================================================= */

/* ---------------------------------------------------------
   PAGE HERO
   --------------------------------------------------------- */
.page-hero {
  background:
    radial-gradient(circle at 85% 0%, rgba(47,169,140,0.14), transparent 45%),
    var(--bg-deep);
  color: #EAF1F6;
  padding: 72px 0 64px;
}
.page-hero h1 { font-size: clamp(28px, 3.6vw, 42px); max-width: 680px; color: #EAF1F6; }
.page-hero-lead { color: #B9C7D0; max-width: 560px; font-size: 16px; margin: 0; }

/* ---------------------------------------------------------
   ABOUT SECTION
   --------------------------------------------------------- */
.about {
  --primary:      #2F9E8F;
  --primary-dark: #1F6F63;
  --radius:       12px;
  --shadow:       0 4px 18px rgba(47, 158, 143, 0.15);

  background-color: #edf2f7;; 
  color: #1e293b;            /* Dark text color for contrast */
  padding: 80px 0;
}

.about h1 {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 800;
  color: #0f172a;            /* Dark, crisp heading */
  margin-bottom: 30px;
}

.about-container {
  display: flex;
  gap: 40px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto 50px;
  flex-wrap: wrap;
}

.about-content { 
  flex: 1 1 300px; 
  font-size: 1rem; 
  line-height: 1.85; 
}

.about-english {
  color: #334155;            /* Easy-to-read dark slate */
  font-size: 1.25rem;
  text-align: left;
  margin-bottom: 20px;
}

.about-urdu {
  color: #1f6f63;            /* Darker teal tone for high contrast on light bg */
  font-size: 1.25rem;
  direction: rtl;
  text-align: right;
  line-height: 2;
  margin-bottom: 0;
}

.about-image {
  flex: 0 0 280px;
}

.about-image img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  object-fit: cover;
  height: 300px;
}

/* Flap Cards */
.flap-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  perspective: 1000px;
}

.flap-card {
  width: 220px;
  height: 200px;
  cursor: pointer;
}

.flap-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  border-radius: var(--radius);
}

.flap-card:hover .flap-card-inner { 
  transform: rotateY(180deg); 
}

.flap-card-front,
.flap-card-back {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flap-card-front {
  background: var(--primary);
  color: #ffffff;
  box-shadow: var(--shadow);
}

.flap-card-front i {
  font-size: 2.2rem;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.95);
}

.flap-card-front h3 {
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.4;
}

.flap-card-back {
  background: var(--primary-dark);
  color: #ffffff;
  transform: rotateY(180deg);
  box-shadow: var(--shadow);
}

.flap-card-back p {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.88rem;
  line-height: 1.6;
  direction: auto;
}

/* ---------------------------------------------------------
   VALUE GRID ("What we stand for")
   --------------------------------------------------------- */
.section-alt {
  background-color: #edf2f7; /* Slightly distinct light tone for sectioning */
  padding: 80px 0;
  border-top: 1px solid #e2e8f0;
}

.section-head h2 {
  color: #0f172a;
  margin-top: 8px;
}

.value-grid {
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 20px;
  margin-top: 40px;
}

.value-card {
  background:  var(--primary-dark);

      /* Clean white card on light background */
  border: 1px solid #e2e8f0; 
  border-radius: var(--radius, 12px);
  padding: 24px 20px; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.value-card:hover {
  transform: translateY(-3px);
  border-color: #2f9e8f;
  box-shadow: 0 8px 16px rgba(47, 158, 143, 0.12);
}

.value-icon { 
  color: #2F9E8F; 
  font-size: 18px; 
  margin-bottom: 10px; 
}

.value-card h3 { 
  font-size: 16px; 
  margin-bottom: 8px; 
  color: #0f172a; 
}

.value-card p { 
  color: #475569; 
  font-size: 13.5px; 
  margin: 0; 
  line-height: 1.6; 
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .about-container { flex-direction: column; text-align: center; gap: 25px; }
  .about-image { max-width: 320px; width: 100%; }
  .about-image img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .about-english, .about-urdu { text-align: center; }
  .flap-cards { gap: 20px; }
  .flap-card { width: 240px; height: 190px; }
}

@media (max-width: 900px) { 
  .value-grid { grid-template-columns: 1fr 1fr; } 
}

@media (max-width: 540px) { 
  .value-grid { grid-template-columns: 1fr; } 
}

@media (max-width: 576px) {
  .about h1 { font-size: 1.7rem; }
  .about-container { gap: 20px; }
  .about-image { max-width: 250px; }
  .about-english, .about-urdu { font-size: 1.1rem; line-height: 1.8; }
  .flap-cards { flex-direction: column; align-items: center; }
  .flap-card { width: 100%; max-width: 280px; height: 180px; }
}