/* ========== Vision Page (hero only) ========== */

.vision-hero{
  /* soft top gradient like the screenshot */
  background: #f9fbff;
  padding: clamp(64px, 10vw, 120px) 1rem 56px;
  text-align: center;
}

/* icon badge */
.vision-badge{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 8px solid rgba(196, 46, 46, 0.18); /* red ring to match site accent */
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
}

.vision-badge i{
  font-size: 80px;
  color: #c42e2e; /* site red */
}

/* heading + lede */
.vision-hero_content h1{
  color: #1e2d64;                /* deep navy */
  font-weight: 800;
  font-size: clamp(2rem, 3.8vw, 4rem);  /* responsive big */
  margin: 10px 0 14px;
  letter-spacing: 0.2px;
}

.vision-hero_content p{
  color: #3f4b63;                /* muted slate */
  font-size: clamp(1.05rem, 1.3vw, 1.45rem);
  line-height: 1.75;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 0.5rem;
}

/* small screens: tighten vertical padding a bit */
@media (max-width: 480px){
  .vision-hero{ padding: 56px 1rem 44px; }
  .vision-badge{ width: 84px; height: 84px; }
  .vision-badge i{ font-size: 36px; }
}


/* ===== Our Mission section ===== */
.vision-mission{
  background:#fff;
  padding: 2.75rem 1rem 4rem;
  text-align:center;
}

.mission-wrap{
  max-width: 700px;
  margin: 0 auto;
}

.vision-mission h2{
  color:#1e2d64;
  font-weight:800;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  margin-bottom: 1.2rem;
}

/* Card base */
.mission-card{
  --rx: 0deg;               /* rotateX (set via JS) */
  --ry: 0deg;               /* rotateY (set via JS) */
  --x: 50%;                 /* cursor x for spotlight */
  --y: 50%;                 /* cursor y for spotlight */

  position: relative;
  margin: 0 auto;
  max-width: 100%;
  background: linear-gradient(90deg, #f3f8ff 0%, #fff4f4 100%);
  border-radius: 28px;
  padding: clamp(18px, 3vw, 42px) clamp(18px, 3vw, 52px);
  border: 1px solid rgba(30,45,100,0.06);
  box-shadow:
    0 20px 40px rgba(17, 24, 39, 0.10),
    0 2px 8px rgba(17, 24, 39, 0.06);

  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: default; /* looks classy; change to pointer if you want */
  overflow: hidden;
}


/* moving “spotlight” that follows the cursor */
.mission-card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(260px circle at var(--x) var(--y),
      rgba(255,255,255,.65), rgba(255,255,255,0) 55%),
    radial-gradient(540px circle at var(--x) var(--y),
      rgba(196,46,46,.08), rgba(196,46,46,0) 70%);
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;
}
.mission-card:hover::before{ opacity:1; }

.mission-card:hover{
  box-shadow:
    0 26px 56px rgba(17,24,39, .14),
    0 6px 16px rgba(17,24,39, .08);
}


/* Quote text */
.mission-text{
  font-style: italic;
  color:#2f3a4a;
  letter-spacing: .2px;
  line-height: 1.8;
  font-size: 18px;
  margin: 0;
}

/* Small screens: slightly reduce radius + padding */
@media (max-width: 520px){
  .mission-card{ border-radius: 22px; }
}



/* ===== What Makes Salam Academy Different ===== */
.diff{
  padding: 4.5rem 1rem;
  background:#f3f3f3;
}

.diff-header{
  text-align:center;
  max-width: 900px;
  margin: 0 auto 2rem;
}
.diff-header h2{
  color:#1e2d64;
  font-weight:800;
  font-size: clamp(1.8rem, 1rem + 3vw, 3.2rem);
  margin-bottom:.6rem;
}
.diff-header p{
  color:#4a5568;
  font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
}

/* Grid */
.diff-grid{
  max-width: 1250px;
  margin: 0 auto;
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 960px){
  .diff-grid{ grid-template-columns: 1fr 1fr; }
}

/* Card */
.diff-card{
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: start;

  background: #f8fbff;                 /* soft panel */
  border: 1px solid #e8eef7;
  border-radius: 16px;
  padding: 22px 22px;
  box-shadow: 0 10px 24px rgba(16,24,40,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.diff-card:hover{
  transform: translateY(-3px);
  border-color:#e6d0d0;
  box-shadow: 0 16px 36px rgba(16,24,40,.08);
}

/* Icon bubble */
.diff-icon{
  width: 72px; height: 72px;
  border-radius: 50%;
  display:grid; place-items:center;
  background:#fdeaea;                  /* pale red */
  color:#c42e2e;                       /* brand red */
  font-size: 1.6rem;
}

/* Titles / text */
.diff-card h3{
  color:#1e2d64;
  font-weight:800;
  font-size: clamp(1.1rem, .9rem + .7vw, 1.6rem);
  margin: 4px 0 8px;
}
.diff-card p{
  color:#3f4b63;
  font-size: 1.02rem;
  line-height: 1.7;
}

/* Mobile tweaks */
@media (max-width:560px){
  .diff-card{ grid-template-columns: 64px 1fr; padding: 18px; }
  .diff-icon{ width: 56px; height: 56px; font-size: 1.3rem; }
}


/* ===== Our Guiding Principles ===== */
.principles{
  /* scoped tokens so nothing else is affected */
  --p-bg:#243797;              /* deep blue */
  --p-card:#3345bd;            /* slightly lighter blue */
  --p-heading:#ffffff;
  --p-text:#dbe5ff;
  --p-muted:#c7d2ff;
  --p-peach:#f2a7a0;           /* icon color */
  --p-peach-bg:rgba(242,167,160,.18);
  --p-ring:rgba(255,255,255,.15);

  background:var(--p-bg);
  color:var(--p-text);
  padding: 5rem 1rem 4rem;
}

.principles-wrap{ max-width:1200px; margin:0 auto; }

.principles-head{
  text-align:center; margin: 0 auto 2rem; max-width: 950px;
}
.principles-badge{
  width:72px; height:72px; margin:0 auto 10px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--p-peach-bg);
  color:var(--p-peach); font-size:1.4rem;
}
.principles-head h2{
  color:var(--p-heading);
  font-weight:800;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  margin: .35rem 0 .6rem;
}
.principles-head p{
  color:var(--p-muted);
  font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
}

/* Grid */
.principles-grid{
  display:grid; gap:22px; margin-top: 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){ .principles-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1300px){ .principles-grid{ grid-template-columns: repeat(4, 1fr); } }

/* Card */
.principle-card{
  display:grid; grid-template-columns: 88px 1fr; gap:16px; align-items:start;
  background: var(--p-card);
  border:1px solid var(--p-ring);
  border-radius:18px;
  padding: 26px 24px;
  box-shadow: 0 12px 28px rgba(16,24,40,.20);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.principle-card:hover{
  transform: translateY(-4px);
  border-color: rgba(242,167,160,.35);
  box-shadow: 0 18px 40px rgba(16,24,40,.28);
}

/* Icon bubble */
.p-icon{
  width:72px; height:72px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--p-peach-bg);
  color:var(--p-peach); font-size:1.6rem;
}

/* Text */
.principle-card h3{
  color:var(--p-heading); margin:2px 0 8px;
  font-size: clamp(1.05rem, .95rem + .6vw, 1.5rem);
  font-weight:800;
}
.principle-card p{
  color:var(--p-text);
  font-size: 1.02rem; line-height:1.7;
}

/* Mobile tweaks */
@media (max-width:560px){
  .principle-card{ grid-template-columns: 64px 1fr; padding: 20px; }
  .p-icon{ width:56px; height:56px; font-size:1.3rem; }
}


/* ===== CTA: Be Part of Our Vision ===== */
.vision-join{
  background:#f6f7fb;                   /* very light gray */
  padding: 3.5rem 1rem 4rem;
  text-align:center;
}
.join-wrap{ max-width: 980px; margin: 0 auto; }

.vision-join h2{
  color:#1e2d64;                         /* deep blue */
  font-weight:800;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  margin-bottom:.75rem;
}
.vision-join p{
  color:#49566d;                         /* muted slate */
  font-size: clamp(1rem, .9rem + .6vw, 1.35rem);
  line-height:1.8;
  margin: 0 auto 1.6rem;
  max-width: 900px;
}

.join-actions{
  display:flex; gap: 22px; justify-content:center; flex-wrap:wrap;
  margin-top: .5rem;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; text-decoration:none; border-radius: 999px;
  padding: .95rem 1.6rem; transition: all .18s ease;
}

.btn-primary{
  background:#c6463b; color:#fff; border:1px solid transparent;
  box-shadow: 0 10px 20px rgba(198,70,59,.25);
}
.btn-primary:hover{
  background:#a83a31; transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(198,70,59,.32);
}
.btn-primary i{ font-size:1.05rem; }

.btn-outline{
  background:transparent; color:#2a3f8a;
  border:2px solid #4A5DFF;            /* periwinkle outline */
}
.btn-outline:hover{
  background:#eef1ff; transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(74,93,255,.18);
}

/* keyboard focus */
.btn:focus-visible{
  outline: 3px solid #4A5DFF; outline-offset: 3px;
}

/* tighter on small screens */
@media (max-width:480px){
  .btn{ padding:.9rem 1.3rem; }
}