/* ============================================================
   Diamond TechSoft — Contact Page Styles
   File: assets/css/contact.css
   ============================================================ */
.contact-form-wrap { background: var(--blue-card); border: 1px solid var(--border); border-radius: 24px; padding: 48px; }
.contact-form-wrap h2 { font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; color: var(--text-heading); letter-spacing: -.5px; margin-bottom: 8px; }
.contact-form-wrap .form-intro { font-size: .88rem; color: var(--text-muted); margin-bottom: 32px; }

.form-label-custom { font-size: .82rem; font-weight: 500; color: var(--text-muted); margin-bottom: 8px; display: block; text-transform: uppercase; letter-spacing: .5px; }
.form-control-custom {
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text-heading); padding: 12px 16px; font-size: .9rem;
  transition: all .25s; font-family: var(--font-body); width: 100%; outline: none;
}
.form-control-custom:focus { border-color: var(--accent); background: rgba(0,212,255,.04); box-shadow: 0 0 0 3px rgba(0,212,255,.08); }
.form-control-custom::placeholder { color: var(--text-muted); }
.form-select-custom {
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text-heading); padding: 12px 16px; font-size: .9rem;
  font-family: var(--font-body); width: 100%; outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8baa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  cursor: pointer; transition: border-color .25s;
}
.form-select-custom:focus { border-color: var(--accent); outline: none; }
.form-select-custom option { background: var(--blue-mid); color: var(--text-heading); }
textarea.form-control-custom { resize: vertical; min-height: 140px; }
.form-mb { margin-bottom: 20px; }

.btn-submit-full { background: var(--accent); color: var(--blue-dark); font-weight: 700; font-size: 1rem; padding: 15px 40px; border-radius: 12px; border: none; cursor: pointer; transition: all .3s; font-family: var(--font-body); width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-submit-full:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,212,255,.3); }
.form-note { font-size: .75rem; color: var(--text-muted); text-align: center; margin-top: 14px; }
.form-error-msg { display: block; color: #f87171; font-size: .82rem; margin-bottom: 10px; }

.info-card { background: var(--blue-card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; margin-bottom: 16px; transition: all .3s; display: flex; align-items: flex-start; gap: 16px; }
.info-card:hover { border-color: rgba(0,212,255,.3); transform: translateX(4px); }
.info-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.info-label { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: 4px; font-weight: 500; }
.info-value { font-size: .95rem; color: var(--text-heading); }
.info-value a { color: var(--text-heading); text-decoration: none; transition: color .2s; }
.info-value a:hover { color: var(--accent); }
.info-sub { font-size: .8rem; color: var(--text-muted); margin-top: 4px; }

.promise-card { background: var(--blue-card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; margin-top: 16px; }
.promise-card-title { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--text-heading); margin-bottom: 16px; }
.promise-item { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.promise-item:last-child { border-bottom: none; padding-bottom: 0; }
.promise-check { width: 28px; height: 28px; border-radius: 50%; background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.25); display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.promise-text { font-size: .85rem; color: var(--text-muted); line-height: 1.55; }
.promise-text strong { color: var(--text-heading); display: block; font-size: .9rem; margin-bottom: 2px; }

.map-section { padding: 0 0 80px; }
.map-wrap { background: var(--blue-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; height: 340px; display: flex; align-items: center; justify-content: center; position: relative; }
.map-wrap::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 50%,rgba(0,212,255,.06),transparent 70%); }
.map-wrap-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,212,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.03) 1px,transparent 1px); background-size: 40px 40px; pointer-events: none; }
.map-placeholder { text-align: center; position: relative; z-index: 1; }
.map-pin { font-size: 3rem; margin-bottom: 12px; animation: bounce 2s ease infinite; }
.map-title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--text-heading); margin-bottom: 6px; }
.map-sub { font-size: .85rem; color: var(--text-muted); }
.map-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 20px; border: 1px solid var(--border); border-radius: 8px; color: var(--accent); font-size: .82rem; text-decoration: none; transition: all .2s; }
.map-link:hover { background: rgba(0,212,255,.08); }

.faq-section { padding: 60px 0 90px; }
.faq-item { border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: border-color .3s; }
.faq-item.open { border-color: rgba(0,212,255,.3); }
.faq-question { padding: 20px 24px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--blue-card); }
.faq-question:hover { background: rgba(0,212,255,.04); }
.faq-q-text { font-family: var(--font-head); font-size: .95rem; font-weight: 600; color: var(--text-heading); }
.faq-arrow { color: var(--accent); font-size: 1rem; transition: transform .3s; flex-shrink: 0; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-answer { padding: 0 24px; max-height: 0; overflow: hidden; transition: all .4s ease; background: var(--blue-card); }
.faq-item.open .faq-answer { max-height: 300px; padding: 0 24px; }
.faq-answer p { font-size: .88rem; color: var(--text-muted); line-height: 1.7; padding-bottom: 20px; }

.social-follow-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); font-size: .78rem; text-decoration: none; transition: all .2s; }
.social-follow-btn:hover { border-color: var(--accent); color: var(--accent); }


/* ============================================================
   RESPONSIVE — contact.css
   ============================================================ */

/* ── Tablet (≤ 991px) ─────────────────────────────────────── */
@media (max-width: 991px) {
  .contact-form-wrap { padding: 36px 32px; }
  .map-wrap { height: 280px; }
  .faq-section { padding: 48px 0 70px; }
}

/* ── Mobile (≤ 767px) ─────────────────────────────────────── */
@media (max-width: 767px) {
  /* Form wrap */
  .contact-form-wrap { padding: 24px 18px; border-radius: 18px; }
  .contact-form-wrap h2 { font-size: 1.35rem; }

  /* Info cards — tighter */
  .info-card { padding: 20px; gap: 12px; }
  .info-icon { width: 40px; height: 40px; font-size: 1rem; }
  .info-value { font-size: .88rem; }

  /* Promise card */
  .promise-card { padding: 20px; }
  .promise-item { gap: 10px; padding: 10px 0; }

  /* Map */
  .map-wrap { height: 220px; border-radius: 14px; }
  .map-pin { font-size: 2.4rem; }
  .map-title { font-size: 1rem; }
  .map-section { padding: 0 0 56px; }

  /* FAQ */
  .faq-question { padding: 16px 18px; }
  .faq-q-text { font-size: .88rem; }
  .faq-answer { padding: 0 18px; }
  .faq-item.open .faq-answer { padding: 0 18px; }
  .faq-answer p { font-size: .85rem; }
  .faq-section { padding: 40px 0 60px; }
}

/* ── Small Mobile (≤ 480px) ───────────────────────────────── */
@media (max-width: 480px) {
  .contact-form-wrap { padding: 20px 14px; }
  .form-control-custom, .form-select-custom { font-size: .85rem; padding: 10px 14px; }
}