/* Core */
body { font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; line-height: 1.6; color: #333; background: #f9f9f9; }
h1, h2, h3 { font-family: 'Montserrat', sans-serif; }

/* Hero */
header {
  background: linear-gradient(rgba(10, 31, 68, 0.85), rgba(10, 31, 68, 0.85)),
              url('images/Murtala2.jpg') no-repeat center center/cover;
  color: #fff; text-align: center; padding: 120px 20px;
}
header h1 { font-size: 2.8rem; margin-bottom: 15px; }
header p { font-size: 1.2rem; max-width: 700px; margin: auto; }

/* Buttons */
.btn {
  display: inline-block; background: #D4AF37; color: #0A1F44;
  padding: 14px 25px; border-radius: 5px; text-decoration: none;
  font-weight: 700; margin-top: 20px; transition: background .3s;
}
.btn:hover { background: #b9962f; }

/* Sections */
section { padding: 50px 20px; max-width: 1100px; margin: auto; }
.alt { background: #f5f7fa; }

/* Story */
.timeline { border-left: 3px solid #D4AF37; padding-left: 20px; margin-top: 20px; }
.timeline h3 { color: #0A1F44; }
.story-image { float: right; margin: 0 0 20px 20px; width: 300px;
  border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,.1); }

/* Benefits */
.benefits { display: flex; flex-wrap: wrap; gap: 20px; }
.benefit-box {
  flex: 1; min-width: 250px; background: #fff; padding: 20px; border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1); border-top: 4px solid #D4AF37;
}

/* Testimonials */
.testimonial { background: #fff; padding: 20px; margin-bottom: 20px;
  border-left: 5px solid #D4AF37; font-style: italic; }

/* Promo / Gift boxes */
.notice {
  background: #0A1F44; color: #fff; border-left: 5px solid #D4AF37;
  padding: 18px 20px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.notice .badge { background: #D4AF37; color: #0A1F44; font-weight: 700; padding: 4px 8px; border-radius: 4px; margin-right: 8px; }
.notice.light { background: #fff; color: #0A1F44; border: 1px solid #E6E6E6; }
.hr { height: 1px; background: linear-gradient(90deg, transparent, #D4AF37, transparent); border: none; margin: 40px 0; }

/* NEW: Flexible learning callout (classy gold) */
.callout {
  background: #fff8e6; /* soft gold tint */
  border: 1px solid #f0e0b8;
  border-left: 6px solid #D4AF37;
  padding: 18px 20px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  margin: 24px 0;
}

/* Footer */
footer { background: #0A1F44; color: #ccc; text-align: center; padding: 20px; font-size: .9rem; }
footer a { color: #D4AF37; text-decoration: none; }

/* Responsive */
@media (max-width: 768px) {
  .story-image { float: none; display: block; margin: 20px auto; width: 90%; }
}