/* Contact us (resources/views/contact/index.blade.php).

   A blue stage with pinboard geometry, and one card split in two: a cream
   introduction with the illustration, and an amber form panel. Logical
   properties throughout, so Urdu mirrors the layout. */

.ct-stage{position:relative;overflow:hidden;background:var(--blue);padding:64px 20px 72px;isolation:isolate}
.ct-shape{position:absolute;z-index:-1;display:block}
.ct-bar{background:#155f9c;border-radius:2px}
.ct-bar-1{inset-block-start:26px;inset-inline-start:-20px;width:180px;height:34px}
.ct-bar-2{inset-block-start:70px;inset-inline-end:40px;width:120px;height:26px;background:#2c8fdb}
.ct-bar-3{inset-block-end:40px;inset-inline-end:14%;width:150px;height:30px}
.ct-tri{inset-block-start:0;inset-inline-start:46%;width:0;height:0;border-inline:48px solid transparent;border-block-end:52px solid var(--navy)}
.ct-half{inset-block-start:38%;inset-inline-start:-60px;width:120px;height:120px;border-radius:50%;background:var(--navy)}
.ct-diamond{inset-block-end:120px;inset-inline-start:40px;width:38px;height:38px;background:var(--navy);transform:rotate(45deg)}
.ct-dots{inset-block-end:18px;inset-inline-start:26px;width:230px;height:120px;background-image:radial-gradient(circle,var(--amber) 5px,transparent 5.5px);background-size:32px 30px}

.ct-card{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(8,34,64,.35)}

.ct-intro{background:#fbf6ee;padding:56px 56px 40px;display:flex;flex-direction:column}
.ct-intro h1{font-size:clamp(34px,4.4vw,60px);line-height:.98;font-weight:900;letter-spacing:-1.5px;text-transform:uppercase;color:var(--navy)}
/* Nastaliq is tall: give Urdu headings room to breathe. */
[lang="ur"] .ct-intro h1,[lang="ur"] .ct-done h2{line-height:1.55;letter-spacing:0;text-transform:none}
.ct-lead{margin-top:16px;font-size:clamp(18px,2vw,26px);color:var(--navy);font-weight:500}
.ct-art{width:100%;max-width:520px;height:auto;margin:28px 0 18px}
.ct-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.ct-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid #eadfcd;font-size:13px;font-weight:600;color:var(--navy)}
.ct-chip:hover{border-color:var(--blue);color:var(--blue)}
.ct-chip-wa svg{width:18px;height:18px;flex:none;fill:#25d366}

.ct-form-side{background:#f5c469;padding:56px 56px 48px;display:flex;align-items:center}
.ct-form{width:100%}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.ct-field{margin-bottom:16px;min-width:0}
.ct-field label{display:block;margin-block:0 7px;margin-inline:14px 0;font-size:14px;font-weight:900;letter-spacing:.3px;text-transform:uppercase;color:var(--navy)}
.ct-field label span{font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:#7a5a1c}
.ct-field input,.ct-field select,.ct-field textarea{width:100%;border:2px solid transparent;background:#fdf8f0;border-radius:999px;padding:12px 18px;font:inherit;font-size:14.5px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
.ct-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-inline-end:40px}
[dir="rtl"] .ct-field select{background-position:22px 50%,16px 50%}
.ct-field textarea{border-radius:18px;min-height:130px;resize:vertical}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#8a95a3}
.ct-field input:focus,.ct-field select:focus,.ct-field textarea:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(12,59,104,.12)}
.ct-err{display:block;margin:6px 0 0;margin-inline-start:14px;font-size:12.5px;font-weight:600;color:#9b1c10}
.ct-field:has(.ct-err) input,.ct-field:has(.ct-err) select,.ct-field:has(.ct-err) textarea{border-color:#c0392b}

.ct-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.ct-send{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:var(--navy);color:#fff;padding:14px 30px;font:inherit;font-size:16px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 20px rgba(12,59,104,.28);transition:transform .15s,background .15s}
.ct-send:hover{background:var(--blue2);transform:translateY(-1px)}
.ct-note{font-size:12.5px;color:#6b4e16;max-width:280px}

.ct-done{width:100%;text-align:center;color:var(--navy)}
.ct-done-mark{width:76px;height:76px;margin:0 auto 18px;border-radius:50%;background:var(--navy);color:#f5c469;display:grid;place-items:center;font-size:38px;font-weight:900}
.ct-done h2{font-size:30px;font-weight:900;text-transform:uppercase;letter-spacing:-.5px}
.ct-done p{margin:12px auto 0;max-width:380px;font-size:15px;line-height:1.6;color:#3e3217}
.ct-done .ct-ref{margin-bottom:22px}

@media (max-width:980px){
  .ct-card{grid-template-columns:1fr}
  .ct-intro,.ct-form-side{padding:40px 32px}
  .ct-art{max-width:420px;align-self:center}
}
@media (max-width:560px){
  .ct-stage{padding:28px 12px 44px}
  .ct-intro,.ct-form-side{padding:30px 20px}
  .ct-row{grid-template-columns:1fr}
  .ct-art{margin:18px 0 12px}
  .ct-dots,.ct-half{display:none}
  .ct-send{width:100%}
}