/* HERO */
    .contact-hero {
      background: linear-gradient(135deg, #087fa8, #0ba9c7 58%, #2476d4);
      color: #fff;
      padding: 100px 20px;
      text-align: center;
    }

    .contact-hero h1 {
      font-weight: 700;
    }

    /* CONTACT BOX */
    .contact-box {
      background: #e8f3efb2;
      border-radius: 15px;
      padding: 40px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }

    /* FORM INPUT */
    .form-control {
      border-radius: 10px;
      padding-left: 40px;
    }

    .form-group {
      position: relative;
      margin-bottom: 20px;
    }

    .form-group i {
      position: absolute;
      top: 50%;
      left: 12px;
      transform: translateY(-50%);
      color: #6c757d;
    }

    textarea.form-control {
      padding-top: 12px;
      height: 120px;
    }

    /* BUTTON */
    .btn-custom {
      background: #ff6803;
      color: #fff;
      border-radius: 30px;
      padding: 10px 25px;
      transition: 0.3s;
    }

    .btn-custom:hover {
      background: #163f87;
    }

    /* CONTACT INFO */
    .info-card {
      background: #dbe7f3fd;
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      transition: 0.3s;
    }

    .info-card:hover {
      transform: translateY(-5px);
    }

    .info-card i {
      font-size: 30px;
      color: #1e57b6;
      margin-bottom: 10px;
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .contact-box {
        padding: 25px;
      }

      .contact-hero {
        padding: 70px 20px;
      }
    }

    .map-section {
  margin-top: 50px;
}

.map-container iframe {
  width: 100%;
  height: 450px;
  filter: grayscale(20%);
}

/* MOBILE */
@media (max-width: 768px) {
  .map-container iframe {
    height: 300px;
  }
}