/* CONTACT PAGE CSS */
.contact-hero { 
  background: linear-gradient(160deg, var(--dark-olive) 0%, var(--olive-medium) 50%, var(--primary) 100%); 
}

.contact-page-section { 
  padding: 100px 0; 
}
.contact-wrapper { 
  display: grid; 
  grid-template-columns: 1fr 1.5fr; 
  gap: 64px; 
}
.contact-info-panel { 
  background: var(--bg-light); 
  border-radius: var(--radius); 
  padding: 48px; 
}
.contact-info-panel h3 { 
  font-family: var(--font-heading); 
  font-size: 1.8rem; 
  margin-bottom: 32px; 
  color: var(--text); 
}
.contact-info-item { 
  display: flex; 
  align-items: flex-start; 
  gap: 20px; 
  margin-bottom: 32px; 
}
.contact-info-item:last-child { 
  margin-bottom: 0; 
}
.contact-icon { 
  width: 56px; 
  height: 56px; 
  background: var(--gradient-primary); 
  border-radius: 16px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: #fff; 
  font-size: 1.3rem; 
  flex-shrink: 0; 
  box-shadow: 0 8px 24px rgba(4, 69, 73, 0.25); 
}
.contact-text strong { 
  display: block; 
  font-size: 1.1rem; 
  color: var(--text); 
  margin-bottom: 6px; 
}
.contact-text p, .contact-text a { 
  font-size: 0.95rem; 
  color: var(--text-muted); 
  line-height: 1.6; 
  display: block; 
  transition: var(--transition); 
}
.contact-text a:hover { 
  color: var(--primary); 
}

.contact-form-panel { 
  background: #fff; 
  border-radius: var(--radius); 
  padding: 56px; 
  box-shadow: var(--shadow); 
}
.contact-form-panel h3 { 
  font-family: var(--font-heading); 
  font-size: 2rem; 
  margin-bottom: 12px; 
  color: var(--text); 
}
.contact-form-panel > p { 
  color: var(--text-muted); 
  margin-bottom: 32px; 
  font-size: 0.95rem; 
}
.form-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 24px; 
  margin-bottom: 24px; 
}
.form-group { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
}
.form-group.full { 
  grid-column: span 2; 
}
.form-group label { 
  font-size: 0.85rem; 
  font-weight: 600; 
  color: var(--text); 
}
.form-group input, 
.form-group textarea, 
.form-group select { 
  padding: 16px 20px; 
  border: 1.5px solid rgba(4, 69, 73, 0.12); 
  border-radius: var(--radius-sm); 
  font-family: var(--font-body); 
  font-size: 0.95rem; 
  color: var(--text); 
  transition: var(--transition); 
  outline: none; 
  background: #fff; 
}
.form-group input:focus, 
.form-group textarea:focus, 
.form-group select:focus { 
  border-color: var(--primary); 
  box-shadow: 0 0 0 4px rgba(4, 69, 73, 0.08); 
}
.form-group textarea { 
  resize: vertical; 
  min-height: 140px; 
}
.btn-submit { 
  width: 100%; 
  padding: 16px; 
  font-size: 1.05rem; 
  margin-top: 12px; 
  justify-content: center; 
}

.map-section { 
  height: 450px; 
  background: #eee; 
  border-radius: var(--radius); 
  overflow: hidden; 
  margin-top: 80px; 
  box-shadow: var(--shadow); 
}
.map-section iframe { 
  width: 100%; 
  height: 100%; 
  border: none; 
}

@media (max-width: 1024px) {
  .contact-wrapper { grid-template-columns: 1fr; gap: 40px; }
  .contact-info-panel { padding: 40px 32px; }
  .contact-form-panel { padding: 40px 32px; }
}

@media (max-width: 768px) {
  .contact-page-section { padding: 60px 0; }
  .contact-wrapper { gap: 24px; }
  .contact-info-panel { padding: 28px 20px; border-radius: var(--radius-sm); }
  .contact-form-panel { padding: 28px 20px; border-radius: var(--radius-sm); }
  .contact-form-panel h3 { font-size: 1.4rem; }
  .contact-form-panel > p { margin-bottom: 20px; }
  .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .form-group.full { grid-column: span 1; }
  .map-section { height: 300px; margin-top: 40px; }
  
  .page-hero-content { padding: 40px 16px; }
  .page-hero-title { font-size: 2rem; }
  .page-hero-desc { font-size: 0.95rem; padding: 0 8px; }
  .contact-form-panel { padding: 24px 16px !important; }
  .form-grid { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
  .form-group { margin-bottom: 4px; }
  .form-group.full { grid-column: span 1; }
  .map-section { height: 250px; margin-top: 32px; border-radius: 12px; }
  .contact-info-panel h3 { font-size: 1.4rem; margin-bottom: 24px; }
  .contact-info-item { margin-bottom: 20px; }
  .contact-text p { font-size: 0.9rem; }
  .contact-text a { font-size: 0.9rem; word-break: break-all; }
}

@media (max-width: 400px) {
  .contact-info-panel { padding: 16px 12px !important; }
  .contact-icon { width: 36px; height: 36px; font-size: 0.85rem; border-radius: 12px; }
  .contact-info-item { gap: 10px; }
  .contact-text strong { font-size: 0.9rem; }
  .contact-text p, .contact-text a { font-size: 0.85rem; }
  .map-section { height: 200px; }
}