/* ============================================================
   KMMF 12 Section Landing Page
   Bootstrap 3.3.7 Compatible | Image-Free
   ============================================================ */

:root{
  --navy:#06366d;
  --navy-dark:#032957;
  --blue:#1e63c6;
  --green:#0d9447;
  --green-dark:#08763a;
  --gold:#f7b500;
  --red:#ef2d31;
  --purple:#6c26c8;
  --orange:#f47a18;
  --text:#17243a;
  --muted:#667085;
  --line:#e8edf3;
  --soft:#f7f9fc;
}

body{
  font-family:'Noto Sans Bengali','Inter',sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.7;
}
a{text-decoration:none!important}
.section-space{padding:65px 0}
.soft-bg{background:var(--soft)}

.topbar{
  background:linear-gradient(90deg,var(--navy-dark),#07477e);
  color:#fff;
  min-height:32px;
  line-height:32px;
  font-size:12px;
}
.topbar span{margin-right:18px}
.topbar i{margin-right:6px}

.main-nav{
  margin:0;
  min-height:82px;
  border:0;
  border-radius:0;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.brand{
  height:82px!important;
  padding:12px 0!important;
  display:flex!important;
  align-items:center;
}
.brand-icon{
  width:48px;height:48px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--green),var(--blue));
  color:#fff;font-size:23px;margin-right:10px;
}
.brand-text{display:flex;flex-direction:column;line-height:1;color:var(--navy);font-family:'Inter',sans-serif}
.brand-text b{font-size:13px}
.brand-text strong{font-size:16px;font-weight:800}
.brand-text small{font-size:8px;margin-top:5px;color:#607a9b}
.nav-links>li>a{
  padding:31px 9px!important;
  font-size:12px;
  font-weight:600;
  color:#222!important;
}
.nav-links>li.active>a,.nav-links>li>a:hover{color:var(--green)!important;background:transparent!important}
.apply-btn>a{
  margin:20px 0 20px 8px;
  padding:10px 16px!important;
  background:linear-gradient(135deg,var(--green),var(--green-dark))!important;
  color:#fff!important;
  border-radius:9px;
}

/* 1 Hero */
.hero{
  min-height:430px;
  position:relative;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(120deg,#04336a,#0a4e87 52%,#0b8d52);
}
.hero-pattern:before,
.hero-pattern:after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
}
.hero-pattern:before{
  width:420px;height:420px;right:7%;top:-80px;
  box-shadow:0 0 0 48px rgba(255,255,255,.03),0 0 0 96px rgba(255,255,255,.02);
}
.hero-pattern:after{
  width:260px;height:260px;right:25%;bottom:-130px;
  background:rgba(255,255,255,.035);
}
.hero-content{padding:76px 0 70px;position:relative;z-index:2}
.eyebrow{color:#bfe8d2;font-size:13px;font-weight:800}
.hero h1{font-size:54px;line-height:1.08;font-weight:900;margin:10px 0 18px}
.hero h1 span{color:var(--gold)}
.hero p{font-size:15px;max-width:600px;color:#f5f8fb;line-height:1.9}
.hero-actions{margin-top:25px}
.btn-gold{
  background:linear-gradient(135deg,#ffc635,var(--gold));
  color:#092b55;border:0;border-radius:9px;font-weight:800;
}
.btn-outline{
  color:#fff;background:transparent;border:1px solid rgba(255,255,255,.8);
  border-radius:9px;font-weight:700;
}
.hero-actions .btn{padding:12px 20px;margin-right:10px}

/* 2 Stats */
.stats-section{margin-top:-38px;position:relative;z-index:5}
.stats-box{
  background:#fff;border-radius:14px;box-shadow:0 12px 32px rgba(6,45,88,.12);
  padding:15px;
}
.stat{text-align:center;border-right:1px solid var(--line);padding:8px}
.stat:last-child{border-right:0}
.stat i{display:block;font-size:28px;color:var(--green);margin-bottom:7px}
.stat strong{display:block;font:700 20px/1 'Inter',sans-serif;color:var(--navy)}
.stat span{font-size:11px;color:#667085}

/* generic */
.section-title{margin-bottom:28px}
.section-title span{color:var(--green);font-weight:800;font-size:13px}
.section-title h2{color:var(--navy);font-size:31px;font-weight:900;margin:4px 0 4px}
.section-title p{font-size:13px;color:var(--muted)}

/* 3 About */
.about-row{display:flex;align-items:center;flex-wrap:wrap}
.about-visual{
  min-height:340px;border-radius:18px;
  background:linear-gradient(145deg,#eaf5ff,#e8f7ef);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
}
.about-circle{position:absolute;border-radius:50%}
.circle-one{width:230px;height:230px;background:rgba(13,148,71,.10);left:-70px;bottom:-60px}
.circle-two{width:180px;height:180px;background:rgba(30,99,198,.09);right:-40px;top:-40px}
.about-icon{
  width:88px;height:88px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--green),var(--blue));
  color:#fff;font-size:38px;position:relative;z-index:2;
}
.about-visual h3{font-size:25px;color:var(--navy);font-weight:900;position:relative;z-index:2}
.about-visual p{font-family:'Inter',sans-serif;color:#5f7895;position:relative;z-index:2}
.btn-green{background:var(--green);color:#fff;border:0;border-radius:8px;font-weight:700}

/* 4 Services */
.service-grid>[class*="col-"]{margin-bottom:18px}
.service-card{
  min-height:180px;padding:24px;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:13px;
  box-shadow:0 7px 18px rgba(6,45,88,.06);
}
.service-icon{
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 13px;color:#fff;font-size:24px;
}
.service-card h3{font-size:16px;color:var(--navy);font-weight:800}
.service-card p{font-size:12px;color:#687384}
.green{background:linear-gradient(135deg,#18ad56,#0b7a3d)}
.blue{background:linear-gradient(135deg,#347be9,#1857bb)}
.red{background:linear-gradient(135deg,#ff4d4f,#d61e22)}
.purple{background:linear-gradient(135deg,#8437e5,#5715a4)}
.orange{background:linear-gradient(135deg,#ff9d2e,#ee6a00)}

/* 5 Process */
.process-bg{
  background:linear-gradient(135deg,#07376f,#032957);
  color:#fff;
}
.light-title h2{color:#fff}
.light-title span{color:#a8e1c1}
.process-row>[class*="col-"]{margin-bottom:15px}
.process-card{
  min-height:225px;text-align:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:26px 22px;position:relative;
}
.step-no{position:absolute;left:17px;top:17px;font:700 11px 'Inter';opacity:.7}
.process-card>i{
  width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;background:linear-gradient(135deg,#18ad56,#1e63c6);font-size:27px;
}
.process-card h3{font-size:16px;font-weight:800}
.process-card p{font-size:12px;color:#d9e6f4}

/* 6 Programs */
.program-grid>[class*="col-"]{margin-bottom:15px}
.program-card{
  min-height:185px;padding:24px;
  border-radius:13px;background:#fff;border:1px solid var(--line);
  box-shadow:0 7px 18px rgba(6,45,88,.06);
}
.program-card i{font-size:30px;color:var(--green);margin-bottom:12px}
.program-card h3{font-size:16px;color:var(--navy);font-weight:800}
.program-card p{font-size:12px;color:#667085}

/* 7 Commitment */
.commitment-section{background:linear-gradient(120deg,#f2f8ff,#f2fbf6)}
.commitment-intro span{color:var(--green);font-weight:800}
.commitment-intro h2{font-size:34px;line-height:1.3;color:var(--navy);font-weight:900}
.commitment-intro p{font-size:13px;color:#667085}
.commitment-list>div{margin-bottom:14px}
.commitment-list>div>div{
  padding:17px;border-radius:10px;background:#fff;border:1px solid #e2eaf2;
  font-size:13px;font-weight:700;color:#27405e;
}
.commitment-list i{color:var(--green);margin-right:8px}

/* 8 Stories */
.story-grid>[class*="col-"]{margin-bottom:15px}
.story-card{
  min-height:240px;padding:24px;background:#fff;border-radius:13px;
  border:1px solid var(--line);box-shadow:0 7px 18px rgba(6,45,88,.06);
}
.story-icon{
  width:54px;height:54px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:#edf5ff;color:var(--blue);font-size:23px;margin-bottom:13px;
}
.story-card h3{font-size:17px;color:var(--navy);font-weight:800}
.story-card p{font-size:12px;color:#667085}
.story-card a{font-size:11px;color:var(--blue);font-weight:800}

/* 9 Testimonials */
.testimonial-grid>[class*="col-"]{margin-bottom:15px}
.testimonial-card{
  min-height:210px;padding:24px;border-radius:13px;
  background:#fff;border:1px solid var(--line);box-shadow:0 7px 18px rgba(6,45,88,.06);
}
.testimonial-card i{font-size:31px;color:var(--green)}
.testimonial-card p{font-size:13px;color:#667085;line-height:1.8}
.testimonial-card strong{display:block;color:var(--navy)}
.testimonial-card small{color:#8b95a1}

/* 10 CTA */
.cta-section{padding:25px 0 65px}
.cta-box{
  padding:35px;border-radius:16px;
  background:linear-gradient(135deg,#0b8d4a,#075c82);
  color:#fff;
}
.cta-box span{font-size:12px;font-weight:700;color:#ccebd9}
.cta-box h2{font-size:30px;font-weight:900;margin:4px 0 5px}
.cta-box p{font-size:13px;color:#eaf4f6}
.cta-action{padding-top:15px}
.btn-outline-dark{border:1px solid rgba(255,255,255,.75);color:#fff;background:transparent;border-radius:9px}
.cta-action .btn{margin-left:7px;font-size:12px}

/* 11 FAQ */
.faq{max-width:850px;margin:0 auto}
.faq .panel{border:1px solid #e1e8ef;box-shadow:none;border-radius:9px!important;overflow:hidden;margin-bottom:10px}
.faq .panel-heading{background:#fff;padding:16px 18px}
.faq .panel-title a{display:block;font-size:14px;font-weight:700;color:var(--navy)}
.faq .panel-body{font-size:12px;color:#667085;background:#fbfcfd}

/* 12 Contact */
.contact-row{display:flex;flex-wrap:wrap;align-items:flex-start}
.contact-list{padding:0;list-style:none}
.contact-list li{display:flex;align-items:center;gap:12px;margin-bottom:14px;color:#506175}
.contact-list i{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#edf7f1;color:var(--green)
}
.contact-form{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;
  box-shadow:0 8px 22px rgba(6,45,88,.06)
}
.contact-form .form-control{border-radius:8px;box-shadow:none;border-color:#dfe6ed}

/* Footer */
.footer{background:linear-gradient(135deg,#052f60,#03264f);color:#fff}
.footer-main{padding:42px 15px}
.footer h3{font-family:'Inter',sans-serif;font-size:18px;font-weight:800}
.footer h4{font-size:14px;font-weight:800;margin-bottom:14px}
.footer p,.footer li,.footer li a{font-size:11.5px;color:#c5d1df}
.footer ul{padding:0;list-style:none}
.footer li{margin-bottom:7px}
.footer-social a{
  display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;
  background:rgba(255,255,255,.12);border-radius:50%;color:#fff;margin-right:6px
}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:13px 0;color:#acbdd0;font-size:10.5px}

/* Responsive */
@media(max-width:1199px){
  .nav-links>li>a{padding-left:6px!important;padding-right:6px!important;font-size:11px}
}
@media(max-width:991px){
  .about-row,.contact-row{display:block}
  .about-visual{margin-bottom:28px}
  .cta-action{text-align:left!important}
}
@media(max-width:767px){
  .brand{padding-left:15px!important}
  .navbar-toggle{margin-top:18px}
  .nav-links>li>a{padding:10px 15px!important}
  .apply-btn>a{margin:5px 15px 15px}
  .hero{min-height:470px}
  .hero-content{padding-top:60px}
  .hero h1{font-size:39px}
  .hero p{font-size:13px}
  .hero-actions .btn{display:block;width:100%;margin:0 0 10px}
  .stats-section{margin-top:-25px}
  .stat{border-right:0;border-bottom:1px solid var(--line);margin-bottom:5px}
  .section-space{padding:48px 0}
  .section-title h2{font-size:27px}
  .commitment-intro h2{font-size:29px}
  .cta-action .btn{display:block;width:100%;margin:8px 0 0}
  .footer-bottom{text-align:center}
  .footer-bottom .text-right{text-align:center!important;margin-top:5px}
}