.contact-banner{
  width:100%;
  height:420px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  padding:20px;
}

/* 🌈 Overlay */
.contact-banner .banner-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    135deg,
    rgba(0, 140, 255, 0.60),
    rgba(0, 200, 255, 0.35),
    rgba(0, 0, 0, 0.60)
  );
}

/* ✨ Desktop content */
.banner-content{
  position:relative;
  z-index:2;
  color:#fff;
  max-width:850px;
  padding:10px;
  animation: fadeUp 1s ease-in-out;
}

.banner-content h1{
  font-size:64px;
  font-weight:800;
  letter-spacing:2px;
  margin-bottom:10px;
  text-shadow:0 10px 25px rgba(0,0,0,0.45);
}

.banner-content p{
  font-size:18px;
  line-height:1.7;
  color:#eaf6ff;
  text-shadow:0 6px 18px rgba(0,0,0,0.35);
}

/* =========================
   📱 MOBILE FIX (PERFECT STABLE)
========================= */
@media (max-width: 768px){

  .contact-banner{
    height:300px;
    position:relative;
    padding:0;
  }

  /* ✔ KEY FIX: remove flex dependency */
  .banner-content{
    position:absolute;
    bottom:25px;
    left:20px;
    right:20px;

    text-align:left;
    max-width:100%;
  }

  .banner-content h1{
    font-size:42px;
    margin:0 0 6px 0;
  }

  .banner-content p{
    font-size:15px;
    line-height:1.5;
    max-width:90%;
  }
}

/* =========================
   📱 SMALL MOBILE
========================= */
@media (max-width: 480px){

  .contact-banner{
    height:260px;
  }

  .banner-content{
    bottom:20px;
    left:16px;
    right:16px;
  }

  .banner-content h1{
    font-size:32px;
  }

  .banner-content p{
    font-size:13px;
  }
}