* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* Top Bar */
.top-bar{
  background:#0e3a5f;
  color:#fff;
  font-size:13px;
}
.top-bar .container{
  display:flex;
  justify-content:space-between;
  padding:8px 0;
}

/* 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;
}

.hero {
    background: linear-gradient(#0f3b5f, #164d73);
    color: #fff;
    padding: 70px 0;
}

.hero h1 {
    font-size: 36px;
    margin: 10px 0;
}

.contact-section {
    padding: 70px 0;
    background: #f6f9fc;
}

.contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.form-box, .info-box {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

textarea {
    height: 120px;
    margin-bottom: 15px;
}

button {
    background: #0f3b5f;
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.info-box iframe {
    width: 100%;
    height: 200px;
    border: none;
    margin-top: 15px;
}
.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 {
    padding: 0 1rem;
  }
}

/* ===============================
   TOP BAR
================================ */
@media (max-width: 768px) {
  .top-bar {
    display: none;
  }
}

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

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

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

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

/* ===============================
   HERO SECTION
================================ */
@media (max-width: 1024px) {
  .hero {
    text-align: center;
  }

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

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

@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.8rem !important;
  }
}

/* ===============================
   CONTACT GRID
================================ */
@media (max-width: 1024px) {
  .contact-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .form-box,
  .info-box {
    width: 100%;
  }
}

/* ===============================
   FORM RESPONSIVE
================================ */
@media (max-width: 768px) {
  .form-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  input,
  textarea {
    width: 100%;
  }
}

/* ===============================
   MAP RESPONSIVE
================================ */
@media (max-width: 768px) {
  iframe {
    width: 100%;
    height: 300px;
  }
}

/* ===============================
   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;
  }
}