/* ===========================================================
   IJAR — Contact Us page styles  (matches mockup 08.IJAR - Contact US)
   =========================================================== */

.ct-sec{padding:14px 0}
.ct-head{margin-bottom:22px}
.ct-head h2{font-size:23px;font-weight:700;color:var(--navy);margin:0;display:inline-block}
.ct-head h2::after{content:"";display:block;width:48px;height:3px;background:var(--gold);border-radius:2px;margin:9px 0 0}

/* info cards */
.ct-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ct-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:20px 18px;text-align:center;box-shadow:0 2px 10px rgba(0,26,77,.05);transition:.25s}
.ct-card:hover{box-shadow:0 12px 26px rgba(0,26,77,.12);transform:translateY(-4px)}
.ct-card .ic{width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:21px;margin:0 auto 11px}
.ct-card h3{font-size:16px;color:var(--navy);font-weight:700;margin:0 0 7px}
.ct-card p,.ct-card a{font-size:13px;color:var(--text-2);line-height:1.6;margin:0;text-decoration:none;display:block}
.ct-card a:hover{color:var(--royal)}

/* form + map */
.ct-wrap{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}
.ct-form{background:#fff;border:1px solid var(--border);border-radius:8px;padding:26px;box-shadow:0 2px 10px rgba(0,26,77,.05)}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-field{margin-bottom:16px}
.ct-field input,.ct-field textarea{width:100%;border:1px solid var(--border);border-radius:7px;padding:12px 15px;font-family:var(--ff);font-size:14px;color:var(--text);outline:none;background:#fff}
.ct-field input:focus,.ct-field textarea:focus{border-color:var(--royal)}
.ct-field textarea{min-height:118px;resize:vertical;display:block}
.ct-captcha{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:stretch;margin-bottom:16px}
.ct-cap-code{background:#eef1f6;border:1px solid var(--border);border-radius:7px;padding:0 18px;font-weight:700;letter-spacing:7px;color:var(--navy);font-size:17px;font-style:italic;display:flex;align-items:center;justify-content:center}
.ct-cap-refresh{width:44px;border:1px solid var(--border);border-radius:7px;background:#fff;color:var(--navy);cursor:pointer;font-size:14px}
.ct-captcha input{width:100%;height:44px;border:1px solid var(--border);border-radius:7px;padding:0 15px;font-family:var(--ff);font-size:14px;color:var(--text);outline:none;background:#fff;margin:0}
.ct-captcha input:focus{border-color:var(--royal)}
.ct-submit{width:100%;background:var(--navy);color:#fff;border:0;border-radius:7px;padding:10px;font-family:var(--ff);font-size:13.5px;font-weight:600;letter-spacing:.5px;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:.2s}
.ct-submit:hover{background:var(--dark)}

/* map */
.ct-map{background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,26,77,.05);display:flex;flex-direction:column}
.ct-map-h{background:var(--navy);color:#fff;font-size:16px;font-weight:700;padding:14px 18px}
.ct-map iframe{width:100%;flex:1;min-height:430px;border:0;display:block;filter:saturate(.95)}

/* help banner */
.ct-help{background:linear-gradient(135deg,#0a3072 0%,#001a4d 100%);border-radius:8px;padding:26px 34px;display:flex;align-items:center;justify-content:space-between;gap:26px;color:#fff;box-shadow:0 12px 30px rgba(0,26,77,.16)}
.ct-help-l{display:flex;align-items:center;gap:22px}
.ct-help-l>i{font-size:42px;color:#fff;flex-shrink:0}
.ct-help h2{font-size:21px;font-weight:700;color:#fff;margin:0 0 8px;display:inline-block}
.ct-help h2::after{content:"";display:block;width:42px;height:3px;background:var(--gold);border-radius:2px;margin:7px 0 0}
.ct-help p{font-size:13.5px;color:rgba(255,255,255,.82);margin:0;line-height:1.55;max-width:560px}
.ct-help-actions{display:flex;gap:12px;flex-shrink:0}
.ct-help-actions .btn{min-height:0;padding:10px 22px;font-size:13px}

/* stats bar */
.ct-stats{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;background:linear-gradient(135deg,#0a3072 0%,#001a4d 100%);border-radius:8px;padding:28px 18px;box-shadow:0 12px 30px rgba(0,26,77,.16);margin-top:14px}
.ct-stat{display:flex;align-items:center;justify-content:center;gap:16px;color:#fff;position:relative}
.ct-stat:not(:first-child)::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:48px;background:rgba(255,255,255,.18)}
.ct-stat i{font-size:32px;flex-shrink:0}
.ct-stat b{font-size:25px;font-weight:500;display:block;line-height:1.1}
.ct-stat span{font-size:12.5px;color:rgba(255,255,255,.72)}

@media(max-width:960px){
  .ct-cards{grid-template-columns:repeat(2,1fr)}
  .ct-wrap{grid-template-columns:1fr}
  .ct-help{flex-direction:column;align-items:flex-start}
  .ct-stats{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .ct-stat:nth-child(3)::before{display:none}
}
@media(max-width:560px){
  .ct-cards,.ct-stats{grid-template-columns:1fr}
  .ct-row{grid-template-columns:1fr}
  .ct-stat::before{display:none}
}

/* ============================================================
   RESPONSIVE — contact-page.css
   Breakpoints: 768, 480, 360
   ============================================================ */

/* --- 768px -------------------------------------------------- */
@media(max-width:768px){
  /* form: two-col row → single col (guard for 768 before 560 fires) */
  .ct-row{grid-template-columns:1fr}

  /* form inputs full-width and comfortably padded */
  .ct-field input,.ct-field textarea{font-size:14px;padding:11px 14px}

  /* captcha: let code + input + button stack more cleanly
     auto | 1fr | auto keeps working but shrink the code box */
  .ct-cap-code{padding:0 12px;font-size:15px;letter-spacing:5px;min-height:44px}
  .ct-cap-refresh{min-width:44px;min-height:44px}
  .ct-captcha input{height:44px}

  /* map: ensure it fills container without overflow */
  .ct-map iframe{min-height:300px}

  /* help banner: buttons wrap */
  .ct-help-actions{flex-wrap:wrap}
  .ct-help-actions .btn{flex:1 1 auto;text-align:center;justify-content:center}

  /* cards: address/email/link text wraps */
  .ct-card p,.ct-card a{word-break:break-word}

  /* stats */
  .ct-stat b{font-size:21px}
  .ct-stat i{font-size:26px}

  /* help icon size */
  .ct-help-l>i{font-size:32px}
  .ct-help h2{font-size:18px}
}

/* --- 480px -------------------------------------------------- */
@media(max-width:480px){
  .ct-sec{padding:10px 0}

  /* info cards: text scale */
  .ct-card{padding:16px 14px}
  .ct-card h3{font-size:14px}
  .ct-card p,.ct-card a{font-size:12.5px}
  .ct-card .ic{width:48px;height:48px;font-size:18px}

  /* form */
  .ct-form{padding:18px 16px}
  .ct-field{margin-bottom:12px}
  .ct-field input,.ct-field textarea{font-size:13.5px;padding:10px 12px}
  .ct-field textarea{min-height:100px}

  /* captcha row: stack on very small screens */
  .ct-captcha{grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:8px}
  .ct-cap-code{grid-column:1 / -1;border-radius:7px;padding:10px 14px;font-size:14px;letter-spacing:4px;justify-content:center}
  .ct-cap-refresh{grid-column:2;grid-row:2}
  .ct-captcha input{grid-column:1;grid-row:2}

  /* submit button */
  .ct-submit{font-size:13px;padding:11px}

  /* map height */
  .ct-map iframe{min-height:240px}

  /* help banner */
  .ct-help{padding:18px 16px}
  .ct-help-l{flex-direction:column;gap:12px}
  .ct-help-l>i{font-size:28px}
  .ct-help h2{font-size:17px}
  .ct-help p{font-size:13px}
  .ct-help-actions .btn{width:100%;padding:10px 16px;font-size:12.5px}

  /* stats */
  .ct-stat b{font-size:20px}
  .ct-stat i{font-size:24px}
  .ct-stats{padding:20px 12px}
}

/* --- 360px -------------------------------------------------- */
@media(max-width:360px){
  /* cards 1-col already; reduce padding */
  .ct-card{padding:14px 12px}
  .ct-card h3{font-size:13.5px}
  .ct-card p,.ct-card a{font-size:12px}

  /* form */
  .ct-form{padding:14px 12px}
  .ct-field input,.ct-field textarea{font-size:13px;padding:9px 11px}

  /* captcha code smaller */
  .ct-cap-code{font-size:13px;letter-spacing:3px}

  /* help */
  .ct-help{padding:14px 12px}
  .ct-help h2{font-size:16px}

  /* stats */
  .ct-stat{gap:10px}
  .ct-stat b{font-size:18px}
  .ct-stat i{font-size:20px}
  .ct-stats{padding:16px 10px}
  .ct-head h2{font-size:20px}
}