*{box-sizing:border-box}
body{margin:0;font-family:'Poppins',sans-serif;color:#243247;background:#f6f8fb;line-height:1.6}
a{text-decoration:none}

.topbar{position:sticky;top:0;width:100%;background:#062b5b;color:#fff;z-index:1000;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding:12px 6%}
.logo{max-width:200px;height:auto;display:block}
.nav-links a{color:#fff;margin-left:22px;font-weight:500;opacity:.9}
.nav-links a:hover{opacity:1;color:#ffd24d}

.hero{background:#001b3f}
.swiper{width:100%;height:56vh;min-height:360px;max-height:520px}
.swiper-slide{background-size:cover;background-position:center;position:relative}
.slide-overlay{position:absolute;bottom:40px;left:6%;background:rgba(0,0,0,.5);padding:20px 24px;border-radius:12px;color:#fff}
.slide-overlay h1{margin:0 0 6px 0;font-size:2rem}
.slide-overlay p{margin:0;font-size:1.05rem}

main{padding:40px 6%}
.section-title{text-align:center;color:#0a3a7a;margin:10px 0 24px 0}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 12px 30px rgba(6,43,91,.08);text-align:center}
.card i{font-size:36px;color:#0a66c2;margin-bottom:8px}

footer.site{background:#062b5b;color:#fff;text-align:center;padding:26px 10px;margin-top:20px}

@media(max-width:768px){
  .logo{max-width:140px}
  .nav-links a{margin-left:14px}
  .slide-overlay h1{font-size:1.5rem}
  .slide-overlay p{font-size:.95rem}
}

/* =========================================================
   ADDITION: HERO & CONTENT SPACING FIX
   ========================================================= */

/* Hero ke baad content chipakne se bachane ke liye */
.hero {
  margin-bottom: 40px;
}

/* =========================================================
   ADDITION: MAIN CONTENT READABILITY & JUSTIFY
   ========================================================= */

main {
  padding: 60px 6%;      /* thoda aur breathing space */
  hyphens: auto;         /* justify gaps better banata hai */
}

/* Poore website ke paragraphs justify hon */
main p,
main li {
  text-align: justify;
  line-height: 1.8;
}

/* =========================================================
   ADDITION: SERVICES CARD TEXT ALIGNMENT
   ========================================================= */

/* Card ke andar icon + heading center hi rahe */
.card {
  text-align: center;
}

/* Card ke andar sirf paragraph justify ho */
.card p {
  text-align: justify;
}

/* =========================================================
   ADDITION: SECTION TITLE SPACING IMPROVEMENT
   ========================================================= */

.section-title {
  margin: 30px 0 32px 0;
}

/* =========================================================
   ADDITION: MOBILE READABILITY (OPTIONAL BUT RECOMMENDED)
   ========================================================= */

@media (max-width: 600px) {
  main p {
    text-align: left;   /* mobile pe justify avoid (better UX) */
  }
}