*{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}
}

*{
  box-sizing: border-box;
}

body{
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: #243247;
  background: #f6f8fb;
  line-height: 1.8;
}

a{
  text-decoration: none;
  color: inherit;
}

/* ================= HEADER ================= */

.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;
}

.nav-links a{
  color: #fff;
  margin-left: 22px;
  font-weight: 500;
  opacity: .9;
}

.nav-links a:hover{
  opacity: 1;
  color: #ffd24d;
}

/* ================= MAIN CONTENT ================= */

main{
  padding: 40px 6%;
  hyphens: auto;
}

.section-title{
  text-align: center;
  color: #0a3a7a;
  margin: 20px 0 30px 0;
}

/* GLOBAL JUSTIFY – FULL WEBSITE */
main p,
main li{
  text-align: justify;
}

/* ================= SERVICES ================= */

.services{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

.card{
  background: #fff;


/* =====================================================
   FINAL FIX: HEADER + HERO + CONTENT OVERLAP
   ===================================================== */

/* Header hamesha top pe rahe */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Hero / Swiper ko header ke neeche properly rakho */
.hero,
.swiper {
  position: relative;
  z-index: 1;
  margin-top: 0;
}

/* Swiper ki height clear rakho */
.swiper {
  height: 56vh;
  min-height: 360px;
}

/* Swiper ke baad strong spacing force */
.hero {
  margin-bottom: 120px;
}

/* Overlay sirf slide ke andar rahe */
.slide-overlay {
  position: absolute;
  bottom: 50px;
  left: 6%;
  z-index: 2;
}

/* =====================================================
   MAIN CONTENT – HERO SE ALAG RAKHO
   ===================================================== */

main {
  position: relative;
  z-index: 5;
  padding: 80px 6% 60px;
  background: #f6f8fb;
}

/* =====================================================
   GLOBAL TEXT JUSTIFY (FINAL)
   ===================================================== */

main p,
main li {
  text-align: justify;
  line-height: 1.8;
  margin-bottom: 18px;
}

/* =====================================================
   SERVICES CARD TEXT
   ===================================================== */

.card {
  text-align: center;
}

.card p {
  text-align: justify;
}

/* =====================================================
   SECTION TITLE SPACING
   ===================================================== */

.section-title {
  margin: 40px 0 36px;
}

/* =====================================================
   MOBILE SAFETY (OVERLAP AVOID)
   ===================================================== */*



/* ================= HEADER HEIGHT FIX ================= */

.topbar {
  height: 78px;            /* header height fix */
  line-height: normal;
}

/* header ke andar content vertically center */
.topbar .container {
  height: 78px;
  align-items: center;
}


/* =========================================
   FORCE INTRO GREY BOX – HOME PAGE
   ========================================= */

main .intro-box {
  max-width: 1100px;
  margin: 40px auto 30px !important;
  background-color: #7a7a7a !important;
  color: #ffffff !important;
  padding: 28px 32px !important;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

main .intro-box h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 600;
  color: #ffffff !important;
}

main .intro-box p {
  margin: 0;
  font-size: 16px;
  color: #ffffff !important;
  opacity: 0.95;
}




/* ================= CONTACT PAGE LAYOUT ================= */

.contact-page {
  padding: 40px 6%;
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 30px;
}

.contact-info p {
  margin-bottom: 16px;
  line-height: 1.7;
  text-align: justify;
}

.contact-form-box {
  background: #fff;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(6,43,91,.1);
}

.contact-form-box label {
  font-weight: 500;
  margin-top: 14px;
  display: block;
}

.contact-form-box input,
.contact-form-box textarea {
  width: 100%;
  padding: 12px;
  margin-top: 6px;
  border-radius: 10px;
  border: 1px solid #dfe6f1;
}

.contact-form-box button {
  margin-top: 18px;
  background: #0a66c2;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
}

.form-success {
  background: #eafaf1;
  border-left: 5px solid #2ecc71;
  padding: 12px;
  margin-bottom: 16px;
}

.form-error {
  background: #fdecea;
  border-left: 5px solid #e74c3c;
  padding: 12px;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
  }
}



/* ================= THANK YOU PAGE ================= */

.thank-you-page {
  padding: 80px 6%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.thank-you-box {
  background: #ffffff;
  max-width: 650px;
  width: 100%;
  padding: 50px 40px;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 14px 40px rgba(6,43,91,0.15);
}

.thank-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.thank-you-box h1 {
  color: #0a3a7a;
  margin-bottom: 14px;
}

.thank-you-box p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 12px;
}

.thank-you-box .sub-text {
  opacity: 0.85;
}

.thank-actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 500;
  text-decoration: none;
}

.btn-primary {
  background: #0a66c2;
  color: #fff;
}

.btn-primary:hover {
  background: #084c94;
}

.btn-secondary {
  background: #eef3f8;
  color: #0a3a7a;
}

.btn-secondary:hover {
  background: #dde7f1;
}