*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,sans-serif}
body{color:#1f2d3d;background:#fff}
.container{width:85%;margin:auto}

/* Top Bar */
.top-bar {
    background-color: #0d3b66; 
    color: #ffffff;
    padding: 12px 0; /* Padding thoda badha diya vertical space ke liye */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Font size ko 14px se badha kar 15.5px ya 16px kar diya hai */
    font-size: 16px; 
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.top-bar .contact-info {
    display: flex;
    gap: 30px; /* Gap thoda badha diya taaki crowded na lage */
}

.top-bar .contact-info a {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icons ka size bhi text ke saath match karne ke liye */
.top-bar i {
    font-size: 18px; 
}

.fa-phone-alt {
    color: #d81b60; 
}

.top-bar .tagline {
    font-weight: 400;
    letter-spacing: 0.3px;
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .top-bar {
        font-size: 14px; /* Mobile par thoda chhota hi sahi rahega */
    }
}
/* Navbar */
.navbar{
  background:#fff;
  border-bottom:1px solid #eee;
}
.nav-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 0;
}
nav a{
  margin:0 15px;
  text-decoration:none;
  color:#1b2b3a;
  font-weight:500;
}
/* Buttons */
.btn-primary{
  background:#f7b500;
  color:#000;
  padding:10px 18px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
}
.btn-secondary{
  border:1px solid #fff;
  color:#fff;
  padding:10px 18px;
  border-radius:6px;
  text-decoration:none;
}


.btn-yellow{background:#f6b300;padding:10px 18px;border-radius:6px;font-weight:600;display:inline-block}
.btn-outline{border:1px solid #ccc;padding:10px 18px;border-radius:6px;display:inline-block;margin-top:10px}

.hero{background:linear-gradient(135deg,#0b3558,#174d76);color:#fff;padding:90px 0}
.hero h1{font-size:42px;margin:15px 0}
.hero p{max-width:700px}

.label{font-size:12px;font-weight:700;letter-spacing:1px;color:#f6b300}

.products{padding:80px 0}
.product{display:grid;grid-template-columns:2fr 1fr;gap:40px;padding:50px 0;border-bottom:1px solid #eee}
.product h2{margin-bottom:5px}
.sub{color:#f6b300;font-size:13px;font-weight:600}

.product ul{margin:15px 0 20px 20px}
.product ul li{margin-bottom:6px}

.tags span{
  display:inline-block;
  background:#f1f5f9;
  padding:6px 12px;
  border-radius:20px;
  font-size:13px;
  margin:5px 5px 0 0;
}

.right{
  background:#f7fafc;
  padding:30px;
  border-radius:10px;
}

.right h3{margin-bottom:15px}
.right small{display:block;margin-top:10px;font-size:12px;color:#555}

.cta{
  background:linear-gradient(135deg,#0b3558,#174d76);
  color:#fff;
  text-align:center;
  padding:80px 20px;
}

.footer {
    background: #032642;
    color: #fff;
    padding: 50px 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.footer a {
    color: #fff;
    text-decoration: none;
    display: block;
    margin: 5px 0;
}

.footer-bottom {
    text-align: center;
    margin-top: 30px;
    font-size: 14px;
}

/* =========================
   HIDE TOP BAR (Tablet & Mobile)
========================= */
@media (max-width: 1024px) {
  .top-bar {
    display: none;
  }
}


/* ===============================
   GLOBAL FIX
================================ */
@media (max-width: 1024px) {
  body {
    overflow-x: hidden;
  }

  .container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 1rem;
  }
}

/* ===============================
   NAVBAR RESPONSIVE (VERTICAL)
================================ */
@media (max-width: 1024px) {
  .navbar .nav-flex {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .navbar img,
  .navbar h3 {
    margin-left: 3rem !important;
  }

  .navbar nav {
    margin-left: 3rem !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
  }

  .navbar .btn-primary {
    margin-right: -3rem !important;
  }
}

/* ===============================
   HERO SECTION
================================ */
@media (max-width: 1024px) {
  .hero .container {
    margin-left: 0 !important;
    text-align: center;
  }

  .hero h1 {
    font-size: 2.2rem !important;
  }

  .hero p {
    font-size: 1rem !important;
  }
}

/* ===============================
   PRODUCT BLOCK RESPONSIVE
================================ */
@media (max-width: 1024px) {
  .product {
    margin-left: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .product .left {
    width: 100%;
    text-align: center;
  }

  .product img {
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
  }

  .product > div {
    margin-left: 0 !important;
  }

  .product .right {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    text-align: center;
  }
}

/* ===============================
   TAGS CENTER
================================ */
@media (max-width: 1024px) {
  .tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }
}

/* ===============================
   CTA RESPONSIVE
================================ */
@media (max-width: 768px) {
  .cta {
    text-align: center;
    padding: 2rem 1rem;
  }

  .cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
}

/* ===============================
   FOOTER RESPONSIVE
================================ */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-grid div {
    margin-left: 0 !important;
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}