.contact-hero{padding:80px 4% 60px;text-align:center;background:var(--surface-color)}.contact-title{font-size:3rem;font-weight:800;margin-bottom:20px;color:var(--text-color)}.contact-subtitle{font-size:1.25rem;color:var(--text-muted);max-width:700px;margin:0 auto;line-height:1.6}.contact-wrapper{max-width:1200px;margin:60px auto 100px;padding:0 4%;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch}.contact-form-container{background:var(--surface-color);padding:40px;border-radius:24px;border:1px solid var(--border-color);box-shadow:0 20px 40px rgba(0,0,0,.05)}.form-header h2{font-size:1.8rem;font-weight:700;margin-bottom:10px}.form-header p{color:var(--text-muted);margin-bottom:30px}.contact-form{display:grid;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-label{font-weight:600;font-size:.95rem;color:var(--text-color)}.form-input,.form-textarea{width:100%;padding:14px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-color);color:var(--text-color);font-family:inherit;font-size:1rem;transition:border-color .2s}.form-input:focus,.form-textarea:focus{outline:0;border-color:var(--primary-color)}.form-textarea{resize:vertical;min-height:120px}.submit-btn{background:var(--text-color);color:var(--bg-color);padding:16px;border-radius:12px;font-weight:700;font-size:1rem;border:none;cursor:pointer;transition:transform .2s,background .2s}.submit-btn:hover{transform:translateY(-2px);opacity:.9}.map-container{border-radius:24px;overflow:hidden;border:1px solid var(--border-color);box-shadow:0 20px 40px rgba(0,0,0,.05);min-height:500px;position:relative;background:#f0f0f0}.map-container iframe{width:100%;height:100%;border:0}.contact-details-section{max-width:1200px;margin:0 auto 100px;padding:0 4%}.details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}.detail-card{background:var(--surface-color);padding:30px;border-radius:20px;border:1px solid var(--border-color);display:flex;align-items:flex-start;gap:20px;transition:transform .3s}.detail-card:hover{transform:translateY(-5px);border-color:var(--primary-color)}.detail-icon{width:50px;height:50px;background:rgba(59,130,246,.1);color:var(--primary-color);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.detail-content h3{font-size:1.2rem;font-weight:700;margin-bottom:8px;color:var(--text-color)}.detail-content p{color:var(--text-muted);font-size:.95rem;line-height:1.5}.detail-content a{color:var(--primary-color);text-decoration:none;font-weight:500;display:inline-block;margin-top:10px}@media (max-width:900px){.contact-wrapper{grid-template-columns:1fr}.map-container{min-height:300px;order:-1;order:0}}

/* ============================================================
   CONTACT.CSS — RESPONSIVE ADDITIONS
   Breakpoints: 900px (extended) | 768px | 480px
   Append-only — no existing rules were modified.
   ============================================================ */

/* ── 900px: extend the existing breakpoint ── */
@media (max-width: 900px) {
  /* Hero */
  .contact-hero { padding: 60px 4% 40px; }
  .contact-title { font-size: 2.2rem; }
  .contact-subtitle { font-size: 1.1rem; max-width: 100%; }

  /* Wrapper: reduce margins and fix hardcoded 1200px */
  .contact-wrapper { margin: 40px auto 60px; width: 100%; }

  /* Details: fix hardcoded 1200px, reduce bottom margin */
  .contact-details-section { margin: 0 auto 60px; width: 100%; }

  /* Details grid: minmax(300px,1fr) still fits 2 cols at ~650-900px */
  .details-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ── 768px: tablet ── */
@media (max-width: 768px) {
  /* Hero */
  .contact-hero { padding: 50px 5% 36px; }
  .contact-title { font-size: 2rem; }
  .contact-subtitle { font-size: 1rem; max-width: 100%; }

  /* Wrapper */
  .contact-wrapper { padding: 0 5%; margin: 30px auto 50px; gap: 24px; width: 100%; max-width: 100%; }

  /* Form container */
  .contact-form-container { padding: 28px; border-radius: 18px; }
  .form-header h2 { font-size: 1.5rem; }
  .form-header p { margin-bottom: 22px; }

  /* Inputs: reinforce full width at tablet (already 100% in base) */
  .form-input, .form-textarea { width: 100%; }

  /* Submit button: full width */
  .submit-btn { width: 100%; }

  /* Map */
  .map-container { min-height: 260px; border-radius: 18px; }

  /* Details */
  .contact-details-section { padding: 0 5%; margin: 0 auto 50px; max-width: 100%; width: 100%; }
  .details-grid { grid-template-columns: 1fr; gap: 16px; }
  .detail-card { padding: 24px; border-radius: 16px; }
}

/* ── 480px: mobile ── */
@media (max-width: 480px) {
  /* Hero */
  .contact-hero { padding: 44px 5% 30px; }
  .contact-title { font-size: 1.75rem; }
  .contact-subtitle { font-size: .95rem; max-width: 100%; }

  /* Wrapper */
  .contact-wrapper { padding: 0 5%; margin: 24px auto 40px; gap: 18px; width: 100%; max-width: 100%; }

  /* Form container */
  .contact-form-container { padding: 22px 18px; border-radius: 14px; }
  .form-header h2 { font-size: 1.3rem; margin-bottom: 8px; }
  .form-header p { font-size: .9rem; margin-bottom: 20px; }
  .contact-form { gap: 16px; }

  /* Inputs and textarea: full width, slightly smaller padding */
  .form-input, .form-textarea { width: 100%; padding: 12px; font-size: .95rem; }
  .form-textarea { min-height: 100px; }

  /* Submit button: full width */
  .submit-btn { width: 100%; padding: 14px; font-size: .95rem; }

  /* Map */
  .map-container { min-height: 200px; border-radius: 12px; }

  /* Details */
  .contact-details-section { padding: 0 5%; margin: 0 auto 40px; max-width: 100%; width: 100%; }
  .details-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Detail card: flex row → column so icon sits above text on mobile */
  .detail-card { padding: 18px; border-radius: 14px; flex-direction: column; gap: 12px; }
  .detail-icon { width: 44px; height: 44px; border-radius: 10px; }
  .detail-content h3 { font-size: 1.1rem; }
  .detail-content p { font-size: .9rem; }
}