/* =========================
   CONTACT PAGE (Modern 2026 UI)
========================= */

.reveal{ opacity:0; transform:translateY(18px); transition:.7s cubic-bezier(.2,.9,.2,1); }
.reveal.is-in{ opacity:1; transform:translateY(0); }

.c-hero{
  position:relative;
  padding: 84px 0 40px;
  overflow:hidden;
}
.c-hero__bg{
  position:absolute; inset:-1px;
  background:
    radial-gradient(980px 560px at 10% 0%, rgba(3,81,148,.16), transparent 60%),
    radial-gradient(980px 560px at 92% 10%, rgba(231,61,84,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
  pointer-events:none;
}
.c-hero__inner{ position:relative; z-index:1; }

.c-hero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  margin-bottom: 14px;
}
.c-pill{
  display:inline-flex; align-items:center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(2,6,23,.12);
  box-shadow: var(--shadow2);
  font-weight: 950;
  color: var(--ink);
}
.c-hero__mini{
  display:inline-flex; align-items:center; gap:10px;
  color:#334155;
  font-weight:700;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 999px;
  padding: 10px 12px;
  box-shadow: var(--shadow2);
}
.c-dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 0 0 6px rgba(231,61,84,.12);
}

.c-hero__title{
  margin: 0 0 12px;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height:1.02;
  letter-spacing:-.9px;
  color: var(--ink);
}
.c-grad{
  background: linear-gradient(90deg, var(--c1), var(--c2));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.c-hero__sub{
  margin:0 0 18px;
  max-width: 76ch;
  color:#0f172a;
  font-weight:650;
  line-height:1.8;
  opacity:.92;
}
.c-hero__actions{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}

/* metrics row */
.c-metrics{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.c-metric{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(2,6,23,.12);
  border-radius: calc(var(--r) + 6px);
  box-shadow: var(--shadow2);
  padding: 14px;
}
.c-metric__k{
  color:#64748B;
  font-weight:800;
  font-size:.9rem;
}
.c-metric__v{
  margin-top: 6px;
  color: var(--ink);
  font-weight: 950;
  letter-spacing:-.2px;
}

/* sections */
.c-section{ padding: 64px 0; }
.c-section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  border-top: 1px solid rgba(2,6,23,.06);
  border-bottom: 1px solid rgba(2,6,23,.06);
}
.c-head{ max-width: 78ch; margin-bottom: 18px; }
.c-title{
  margin:0 0 10px;
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--ink);
  letter-spacing:-.4px;
}
.c-lead{
  margin:0;
  color:#334155;
  font-weight:650;
  line-height:1.75;
}

/* options row - modern */
.c-options{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.c-opt{
  position:relative;
  padding: 16px;
  border-radius: calc(var(--r) + 8px);
  background: #fff;
  border: 1px solid rgba(2,6,23,.12);
  box-shadow: var(--shadow2);
  display:grid;
  grid-template-columns: 44px 1fr auto;
  grid-template-rows: auto auto;
  gap: 8px 12px;
  align-items:center;
  transition: .28s ease;
  overflow:hidden;
}
.c-opt::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 220px at 12% 0%, rgba(231,61,84,.14), transparent 60%),
    radial-gradient(520px 220px at 88% 10%, rgba(3,81,148,.12), transparent 58%);
  opacity:.0;
  transition:.28s ease;
  pointer-events:none;
}
.c-opt > *{ position:relative; z-index:1; }

.c-opt__icon{
  width:44px; height:44px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.10);
  font-size: 20px;
  grid-row: 1 / span 2;
}
.c-opt__label{
  font-weight: 950;
  color: var(--ink);
  letter-spacing:-.2px;
}
.c-opt__value{
  grid-column: 2 / 3;
  color:#334155;
  font-weight: 650;
  line-height:1.5;
}
.c-opt__go{
  grid-column: 3 / 4;
  grid-row: 1 / span 2;
  font-weight: 1000;
  opacity:.7;
}
.c-opt:hover{
  transform: translateY(-7px);
  box-shadow: 0 28px 60px rgba(2,6,23,.14);
  border-color: rgba(231,61,84,.28);
}
.c-opt:hover::before{ opacity:.9; }

/* layout */
.c-layout{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items:start;
}

/* form card */
.c-card{
  background:#fff;
  border:1px solid rgba(2,6,23,.12);
  border-radius: calc(var(--r) + 10px);
  box-shadow: 0 26px 60px rgba(2,6,23,.10);
  padding: 22px;
}
.c-card__top{ margin-bottom: 14px; }

.c-form{ margin-top: 8px; }
.c-grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.c-field__label{
  display:block;
  margin-bottom: 8px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing:.1px;
}
.c-input{
  width:100%;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(2,6,23,.14);
  background: #fff;
  color:#0f172a;
  font-weight: 650;
  outline:none;
  transition: .18s ease;
}
.c-input:focus{
  border-color: rgba(231,61,84,.50);
  box-shadow: 0 0 0 7px rgba(231,61,84,.10);
}
.c-textarea{ resize: vertical; min-height: 140px; }

.c-consent{
  display:flex; gap: 10px;
  align-items:flex-start;
  color:#475569;
  font-weight:650;
  margin: 12px 0;
}
.c-consent input{ margin-top: 4px; }

.c-actions{
  display:flex; gap: 10px;
  flex-wrap:wrap;
  margin-top: 10px;
}
.c-hint{
  margin: 12px 0 0;
  color:#64748B;
  font-weight:650;
  line-height:1.6;
}

/* side */
.c-side{ display:grid; gap: 12px; }
.c-sideCard{
  background:#fff;
  border:1px solid rgba(2,6,23,.12);
  border-radius: calc(var(--r) + 10px);
  box-shadow: var(--shadow2);
  padding: 18px;
}
.c-sideCard--accent{
  background:
    radial-gradient(520px 220px at 12% 0%, rgba(32, 199, 107, 0.14), transparent 60%),
    radial-gradient(520px 220px at 88% 10%, rgba(8, 231, 146, 0.14), transparent 58%),
    linear-gradient(135deg, rgb(28, 201, 120), rgba(5, 49, 32, 0.945));
  border-color: rgba(255,255,255,.18);
}
.c-sideTitle{
  margin:0 0 10px;
  color: var(--ink);
  font-weight: 1000;
}
.c-sideTitle--light{ color:#fff; }
.c-sideText{
  margin:0 0 12px;
  color: rgba(255,255,255,.82);
  font-weight:650;
  line-height:1.75;
}

/* steps */
.c-steps{ margin:0; padding-left: 18px; display:grid; gap: 10px; }
.c-steps li{
  color:#334155;
  font-weight: 650;
  line-height:1.6;
}
.c-n{
  display:inline-grid; place-items:center;
  width:24px; height:24px;
  border-radius: 999px;
  background: rgba(3,81,148,.12);
  color: var(--c2);
  font-weight: 1000;
  margin-right: 10px;
}

/* info rows */
.c-info{ display:grid; gap: 12px; }
.c-infoRow{
  display:flex; gap: 10px;
  align-items:flex-start;
}
.c-ico{
  width:46px; height:46px;

}
.c-infoK{ color:#64748B; font-weight:800; font-size:.9rem; }
.c-infoV{ color: var(--ink); font-weight: 900; margin-top: 2px; }

.c-miniRow{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 12px; }
.c-miniChip{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  font-size: .86rem;
}

/* bottom strip */
.c-strip{ padding: 0 0 80px; }
.c-strip__box{
  border-radius: calc(var(--r) + 12px);
  border: 1px solid rgba(2,6,23,.12);
  box-shadow: 0 26px 60px rgba(2,6,23,.12);
  background:
    radial-gradient(700px 260px at 15% 0%, rgba(231,61,84,.16), transparent 60%),
    radial-gradient(700px 260px at 90% 10%, rgba(3,81,148,.16), transparent 58%),
    #fff;
  padding: 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.c-strip__title{
  margin:0 0 6px;
  font-size: clamp(20px, 2.1vw, 28px);
  color: var(--ink);
  letter-spacing:-.3px;
}
.c-strip__sub{
  margin:0;
  color:#334155;
  font-weight:650;
  line-height:1.65;
}
.c-strip__actions{ display:flex; gap: 10px; flex-wrap:wrap; }

/* responsive */
@media (max-width: 980px){
  .c-metrics{ grid-template-columns: 1fr; }
  .c-options{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .c-layout{ grid-template-columns: 1fr; }
  .c-grid2{ grid-template-columns: 1fr; }
  .c-strip__box{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 560px){
  .c-options{ grid-template-columns: 1fr; }
}
.cbanner {
  min-height: 60vh;
  padding: 54px 0 24px;
  position: relative;
  background-image: url("../assets/images/cbanner.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

}

/* =========================================
   Contact Options — Trending UI (2026)
========================================= */

.c-section--trend{
  padding: 62px 0;
}

.c-options--trend{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 14px;
}

/* card */
.c-opt--trend{
  position:relative;
  overflow:hidden;
  border-radius: calc(var(--r) + 14px);
  border: 1px solid rgba(2,6,23,.12);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  padding: 16px;
  display:grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-rows: auto auto;
  gap: 6px 12px;
  align-items:center;
  transition: .28s ease;
  will-change: transform;
}

/* glow layer */
.c-opt--trend::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 220px at 12% 0%, rgba(231,61,84,.18), transparent 60%),
    radial-gradient(520px 220px at 88% 10%, rgba(3,81,148,.16), transparent 58%);
  opacity: 0;
  transition: .28s ease;
  pointer-events:none;
}

/* shine sweep */
.c-opt--trend::after{
  content:"";
  position:absolute;
  top:-35%;
  left:-140%;
  width: 55%;
  height: 170%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  opacity: 0;
  pointer-events:none;
}

.c-opt--trend > *{ position:relative; z-index:1; }

.c-opt--trend:hover{
  transform: translateY(-10px);
  box-shadow: 0 36px 90px rgba(2,6,23,.14);
  border-color: rgba(231,61,84,.26);
}
.c-opt--trend:hover::before{ opacity: 1; }
.c-opt--trend:hover::after{
  opacity: 1;
  animation: cShine .9s ease;
}
@keyframes cShine{
  0%{ left:-140%; }
  100%{ left: 160%; }
}

/* icon tile */
.c-opt--trend .c-opt__icon{
  width:56px;
  height:56px;
  border-radius: 20px;
  display:grid;
  place-items:center;
  font-size: 22px;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: var(--shadow2);
  grid-row: 1 / span 2;
  transition: .28s ease;
}

/* icon pop */
.c-opt--trend:hover .c-opt__icon{
  transform: translateY(-2px) scale(1.06);
  background: linear-gradient(135deg, rgba(231,61,84,.12), rgba(3,81,148,.10));
  border-color: rgba(3,81,148,.22);
}

/* label/value */
.c-opt--trend .c-opt__label{
  font-weight: 1050;
  color: var(--ink);
  letter-spacing:-.2px;
}
.c-opt--trend .c-opt__value{
  grid-column: 2 / 3;
  color:#334155;
  font-weight: 700;
  line-height:1.55;
}

/* arrow */
.c-opt--trend .c-opt__go{
  grid-column: 3 / 4;
  grid-row: 1 / span 2;
  font-weight: 1100;
  opacity:.65;
  transition: .22s ease;
}
.c-opt--trend:hover .c-opt__go{
  opacity: 1;
  transform: translateX(3px);
}

/* responsive */
@media (max-width: 980px){
  .c-options--trend{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .c-options--trend{ grid-template-columns: 1fr; }
}


/* =========================================
   Contact Metrics — Premium UI
========================================= */

.c-metrics{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

/* metric card */
.c-metric{
  position:relative;
  overflow:hidden;
  border-radius: calc(var(--r) + 14px);
  border: 1px solid rgba(2,6,23,.12);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  padding: 14px 16px;
  transition: .28s ease;
  will-change: transform;
}

/* glow */
.c-metric::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 220px at 12% 0%, rgba(231,61,84,.16), transparent 60%),
    radial-gradient(520px 220px at 88% 10%, rgba(3,81,148,.14), transparent 58%);
  opacity: 0;
  transition: .28s ease;
  pointer-events:none;
}

/* shine sweep */
.c-metric::after{
  content:"";
  position:absolute;
  top:-35%;
  left:-140%;
  width: 55%;
  height: 170%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  opacity: 0;
  pointer-events:none;
}

.c-metric > *{ position:relative; z-index:1; }

.c-metric:hover{
  transform: translateY(-8px);
  box-shadow: 0 34px 86px rgba(2,6,23,.14);
  border-color: rgba(231,61,84,.24);
}
.c-metric:hover::before{ opacity: 1; }
.c-metric:hover::after{
  opacity: 1;
  animation: cMetricShine .9s ease;
}
@keyframes cMetricShine{
  0%{ left:-140%; }
  100%{ left: 160%; }
}

/* label */
.c-metric__k{
  display:flex;
  align-items:center;
  gap: 10px;
  color:#64748B;
  font-weight: 900;
  letter-spacing:.2px;
  font-size: .9rem;
  margin-bottom: 8px;
}
.c-metric__k::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 0 0 6px rgba(231,61,84,.10);
}

/* value */
.c-metric__v{
  color: var(--ink);
  font-weight: 1100;
  letter-spacing: -.2px;
  line-height: 1.25;
  font-size: 1.02rem;
}

/* responsive */
@media (max-width: 980px){
  .c-metrics{ grid-template-columns: 1fr; }
  .c-metric{ padding: 14px; }
}

/* =========================================
   Contact Cards — 2 Row Clean Layout
========================================= */

.c-options--row{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  margin-top: 18px;
}

/* CARD */
.c-card{
  text-decoration:none;
  position:relative;
  border-radius: 22px;
  padding: 20px;
  background:#fff;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: var(--shadow2);
  transition: .3s ease;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height: 140px;
}

.c-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 30px 70px rgba(2,6,23,.14);
  border-color: rgba(3,81,148,.25);
}

/* TOP ROW */
.c-card__top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom: 16px;
}

.c-card__icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  transition:.3s ease;
}

.c-card__title{
  font-size:1.1rem;
  font-weight:1000;
  color:var(--ink);
  letter-spacing:-.3px;
}

/* BOTTOM ROW */
.c-card__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.c-card__value{
  font-weight:700;
  color:#334155;
  font-size:.95rem;
  line-height:1.6;
}

/* GREEN ARROW */
.c-card__arrow{
  font-size:28px;
  color:#16A34A; /* premium green */
  transition:.3s ease;
}

.c-card:hover .c-card__arrow{
  transform: translateX(6px);
}

/* ICON HOVER EFFECT */
.c-card:hover .c-card__icon{
  background: linear-gradient(135deg, rgba(231,61,84,.12), rgba(3,81,148,.10));
  transform: scale(1.05);
}

/* RESPONSIVE */
@media (max-width: 980px){
  .c-options--row{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 560px){
  .c-options--row{
    grid-template-columns: 1fr;
  }
}