/* =====================================================
   RESET & BASE
===================================================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Inter',sans-serif;
  background:#f8fafc;
  color:#1f2937;
  line-height:1.6;
}

/* =====================================================
   HEADER (GRID BASED – FINAL FIX)
===================================================== */
header{
  background:#ffffff;
  border-bottom:1px solid #e5e7eb;
  position:relative;
  z-index:1000;
}

.nav{
  max-width:1200px;
  margin:auto;
  padding:14px 20px;

  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
}

/* LOGO */
.logo img{
  height:42px;
}

/* MENU */
.nav ul{
  list-style:none;
  display:flex;
  justify-content:center;
  gap:26px;
}

.nav ul li a{
  text-decoration:none;
  color:#0A2540;
  font-weight:500;
  font-size:15px;
}

.nav ul li a:hover{
  color:#1DA1F2;
}

/* CONTACT INFO */
.top-contact{
  text-align:right;
  font-size:14px;
}

.top-contact i{
  margin-right:6px;
}

/* =====================================================
   HERO SECTION (SAFE)
===================================================== */
.hero{
  background:
    linear-gradient(rgba(10,37,64,0.75),rgba(10,37,64,0.75)),
    url("https://images.unsplash.com/photo-1556742049-9085f8b8e6a8?auto=format&fit=crop&w=1600&q=80");
  background-size:cover;
  background-position:center;
  min-height:60vh;
  display:flex;
  align-items:center;
}

.hero-content{
  max-width:1200px;
  margin:auto;
  padding:0 20px;
  text-align:center;
  color:#ffffff;
}

.hero-content h1{
  font-size:40px;
  margin-bottom:10px;
}

.hero-content p{
  font-size:18px;
  opacity:0.95;
}

/* =====================================================
   COMMON LAYOUT
===================================================== */
section{
  padding:60px 20px;
}

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

.section-title{
  text-align:center;
  margin-bottom:35px;
}

.section-title h2{
  font-size:30px;
  color:#0A2540;
}

/* =====================================================
   INFO / VALUE BOXES
===================================================== */
.info-grid,
.values{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:22px;
}

.info-box,
.value-box{
  background:#ffffff;
  padding:26px;
  border-radius:16px;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,0.05);
}

.info-box i,
.value-box i{
  font-size:26px;
  color:#1DA1F2;
  margin-bottom:10px;
}

/* =====================================================
   CONTACT FORM (FINAL – NO SHIFT)
===================================================== */
.form-box{
  background:#ffffff;
  padding:35px;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,0.06);
  max-width:900px;
  margin:40px auto 0;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.form-grid .full{
  grid-column:1 / -1;
}

input,
textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size:15px;
}

textarea{
  min-height:140px;
  resize:vertical;
}

input:focus,
textarea:focus{
  outline:none;
  border-color:#1DA1F2;
  box-shadow:0 0 0 2px rgba(29,161,242,0.15);
}

button{
  margin-top:25px;
  background:#16A34A;
  color:#ffffff;
  padding:14px 36px;
  border:none;
  border-radius:8px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}

button i{
  margin-right:6px;
}

/* =====================================================
   FOOTER
===================================================== */
footer{
  background:#0A2540;
  color:#cbd5e1;
  padding:50px 20px;
}

.footer-inner{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:28px;
}

footer h4{
  color:#ffffff;
  margin-bottom:10px;
}

footer a{
  color:#cbd5e1;
  text-decoration:none;
  display:block;
  margin-bottom:6px;
}

.footer-bottom{
  text-align:center;
  margin-top:30px;
  border-top:1px solid #1e3a5f;
  padding-top:15px;
  font-size:14px;
}

/* =====================================================
   RESPONSIVE (FINAL & SAFE)
===================================================== */
@media(max-width:900px){

  .nav{
    grid-template-columns:1fr;
    gap:10px;
    text-align:center;
  }

  .nav ul{
    justify-content:center;
  }

  .top-contact{
    text-align:center;
  }

  .hero-content h1{
    font-size:28px;
  }

  .hero-content p{
    font-size:16px;
  }
}

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

@media(max-width:480px){
  .hero-content h1{
    font-size:24px;
  }
}