/* variables */
:root{
  --accent: #f57c00;
  --blue: #00376d;
  --muted: #6b7280;
  --card-bg: #ffffff;
  --page-max: 1200px;
  --radius: 12px;
}

/* Map Hero */
.map-hero {
  position: relative;
  height: 320px;
}

.map-hero iframe {
  width:100%;
  height:100%;
  border:0;
}

.map-title {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 15px 25px;
  border-radius: 12px;
  text-align: center;
}

.map-title h1 { 
  font-size: 2rem;
  color: #ffaa6d;
   margin-bottom:5px; 
  }

.map-title p { 
  color: #ffaa6d;
  font-size:1rem; 
}

/* Info Cards */
.contact-main { 
  max-width:1200px;
   margin:0 auto;
   padding:40px 20px; 
  }

.info-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 50px;
}

.info-box {
  background: #00376d;
  color:#fff;
  text-align:center;
  padding:25px;
  border-radius:12px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.info-box i { 
  font-size:28px; 
  margin-bottom:12px; 
  display:block; 
}

.info-box h3 { 
  margin-bottom:8px;
 }

.info-box p a { 
  color:#ffd700; 
}

.info-box:hover { 
  transform: translateY(-5px); 
  box-shadow:0 10px 20px rgba(0,0,0,0.2); 
}

/* Contact Form */
.contact-content { 
  display:flex; gap:40px; 
  flex-wrap:wrap; justify-content:center;
 }

.contact-details { flex:1 1 500px; 
  display:flex; 
  flex-direction:column; 
  gap:20px; 
}

.contact-form input, .contact-form textarea { 
  width:100%; padding:12px 15px; 
  border-radius:8px; 
  border:1px solid #ccc; 
  margin-bottom:15px; 
}

.contact-form input:focus, .contact-form textarea:focus {
   border-color:#00376d; 
   outline:none; 
   box-shadow:0 0 8px rgba(0,55,109,0.2); 
  }

.contact-form button {
  padding:12px; 
  background:#00376d; 
  color:#fff; 
  border:none; 
  border-radius:8px; 
  font-weight:600; 
  cursor:pointer;
  transition: background 0.3s;
}

.contact-form button:hover { 
  background:#ff7c00; 
}

@media(max-width:992px){ .contact-content { flex-direction:column; } 
}

.contact-main { max-width:1200px; 
  margin:50px auto;
   padding:0 20px;
 }
 
.info-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.info-card {
  background: linear-gradient(145deg, #0056a0, #00376d);
  color: #fff;
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.info-card::before {
  content: '';
  position: absolute;
  width: 120%;
  height: 120%;
  background: rgba(255,255,255,0.05);
  top: -110%;
  left: -10%;
  transform: rotate(45deg);
  transition: all 0.6s ease;
}

.info-card:hover::before {
  top: -10%;
}

.info-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0,0,0,0.3);
}

.info-card .icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  transition: background 0.3s;
}

.info-card:hover .icon {
  background: #ff7c00;
}

.info-card h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.info-card p {
  font-size: 1rem;
}

.info-card a {
  color: #ffd700;
  text-decoration: none;
}

.info-card a:hover {
  text-decoration: underline;
}