:root{
  --navy: #0a2a4d;
  --accent: #2b89c9;
  --white: #ffffff;
  --muted: #6c7a89;
  --card-bg: #f8fbff;
  --max-width: 1180px;
  --radius: 12px;
}

*{box-sizing:border-box}
body{font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color: #0b2140; background: #ffffff; margin-top:70px;}
a{color:var(--navy)}
.header-placeholder{height:70px}

.navbar-brand{color:var(--navy);font-weight:700}
.hero{min-height:60vh; background-size:cover; background-position:center; position:relative; display:flex}
.hero .overlay{position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,30,64,0.6), rgba(10,30,64,0.35));}
.hero .container{z-index:2; padding:120px 15px; color:var(--white)}

.btn-primary{background:var(--navy); border: none; padding:10px 22px; border-radius:6px; box-shadow: 0 4px 14px rgba(10,30,64,0.08);}
section{padding:60px 0}

h1,h2{font-family: 'Poppins', sans-serif; color:var(--navy)}
h1{color:var(--white)}

.lead{color: #c6cacf}

.card{border-radius:12px}

.step{width:64px;height:64px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#f1f5f9;color:var(--navy);font-weight:700;font-size:1.25rem;margin:0 auto 8px;border:2px solid rgba(10,30,64,0.06)}

.card-img-top{height:220px;object-fit:cover;border-top-left-radius:12px;border-top-right-radius:12px}

.map-thumb{height:40px; width:66px; object-fit:cover; border-radius:6px;}

footer{border-top:1px solid #eef2f6}

@media(min-width:992px){
  .hero .container{padding:160px 15px}
}
.step-circle {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #1e3a8a, #3b82f6);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      font-weight: bold;
      margin: 0 auto 1.5rem;
      box-shadow: 0 8px 25px rgba(30, 58, 138, 0.3);
      transition: transform 0.3s ease;
    }

    .step-circle:hover {
      transform: scale(1.08);
    }

    .step-title {
      font-family: 'Playfair Display', serif;
      font-weight: 700;
      color: #1a1a1a;
    }

    .step-text {
      font-size: 0.95rem;
      line-height: 1.7;
      color: #444;
    }

    .step-text b {
      color: #1e3a8a;
      font-weight: 600;
    }

    .sub-step-row {
      background: #f8f9fa;
      border-radius: 12px;
      padding: 2rem;
      margin-top: 3rem;
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }

    @media (max-width: 768px) {
      .step-circle {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
      }
      .sub-step-row {
        padding: 1.5rem;
      }
    }