:root{
  --accent: #eb5013;
  --accent-2: #ff7a3a;
  --muted: #6b7280;
  --bg: #f7fafc;
  --card: #ffffff;
  --radius: 14px;
  --shadow: 0 18px 40px rgba(10,10,10,0.06);
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
}
body { font-family: var(--font); background: var(--bg); color: #0f1724; }

/* page */
.contact-container { max-width:1200px; margin:32px auto; padding: 0 18px 80px; }
.page-title { text-align:center; font-size:32px; margin-bottom:20px; font-weight:700; }
.page-title .accent { color:var(--accent); }

/* grid layout */
.contact-grid { display:grid; grid-template-columns: 1.05fr 0.95fr; gap:22px; align-items:start; }

/* left column */
.left-col .map-card { background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.map-wrap iframe { width:100%; height:340px; border:0; display:block; }
.map-placeholder { height:340px; display:flex; align-items:center; justify-content:center; color:var(--muted); padding:20px; }

/* info card */
.info-card { margin-top:14px; background:linear-gradient(180deg,#fff,#fff); padding:18px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.04); }
.info-card h3 { margin:0 0 8px; color:var(--accent); }
.info-card .muted { color:var(--muted); margin-bottom:10px; }
.contact-lines .line { margin:8px 0; font-weight:600; }
.link { color:var(--accent); text-decoration:none; }
.link:hover { text-decoration:underline; }

/* social cards - large attractive */
.social-cards { display:flex; gap:14px; margin-top:16px; flex-wrap:wrap; }
.social-card {
  display:flex; align-items:center; gap:12px;
  padding:16px; min-width:220px; border-radius:14px; color:#fff; text-decoration:none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: transform .18s ease, box-shadow .18s ease;
}
.social-card .sc-body { text-align:left; }
.social-card .sc-title { font-weight:800; font-size:16px; }
.social-card .sc-sub { font-size:13px; opacity:0.9; }

/* brand colors + subtle gradients */
.social-card.insta { background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af); }
.social-card.whatsapp { background: linear-gradient(45deg,#25D366,#11b45b); }
.social-card.fb { background: linear-gradient(45deg,#1877F2,#0f63d9); }
.social-card.yt { background: linear-gradient(45deg,#FF0000,#cc0000); }

.social-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,0.12); }

/* right column form card */
.form-card { background:var(--card); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
.form-card h3 { margin:0; color:var(--accent); }
.form-card .muted { color:var(--muted); margin:8px 0 16px; }

/* form layout */
.form-card form { display:flex; flex-direction:column; gap:14px; }
.row { display:flex; gap:12px; }
.field { flex:1; display:flex; flex-direction:column; }
.field.full { flex:1 1 100%; }
.field label { font-weight:700; margin-bottom:6px; color:#1f2937; }
.field input, .field textarea {
  padding:12px 14px; border-radius:10px; border:1px solid #e6e6e6; font-size:14px; background:#fff; color:#111827;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 8px 24px rgba(235,80,19,0.06); }
.field textarea { min-height:140px; resize:vertical; }

/* submit button - attractive */
.actions { display:flex; align-items:center; gap:12px; }
.submit-btn {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff; border:none; padding:12px 18px; border-radius:12px; font-weight:800; cursor:pointer;
  box-shadow: 0 12px 36px rgba(235,80,19,0.18); transition: transform .12s ease, box-shadow .12s ease;
}
.submit-btn:hover { transform: translateY(-4px); box-shadow: 0 22px 56px rgba(235,80,19,0.22); }

/* success message */
.success { color: #065f46; background: #ecfdf5; padding:10px 12px; border-radius:8px; font-weight:700; }

/* responsive */
@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; }
  .social-card { min-width:160px; width:48%; }
  .map-wrap iframe { height:260px; }
}
@media (max-width:520px){
  .social-card { width:100%; }
  .row { flex-direction:column; }
}