:root{
  --accent-1:#016a71;
  --accent-2:#01555b;
  --ink:#0f172a;
}

.ct-wrap{ width:100%; }
.ct-container{
  max-width:1280px;
  margin: 0 auto;
  padding: 0 16px;
}

.ct-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 12% -10%, color-mix(in srgb, var(--accent-1) 20%, transparent) 0%, transparent 70%),
    radial-gradient(800px 380px at 110% 0%, color-mix(in srgb, var(--accent-2) 16%, transparent) 0%, transparent 65%),
    linear-gradient(180deg,#fff,#f8fafc);
  border:1px solid rgba(2,6,23,.06);
  box-shadow:0 12px 28px rgba(2,6,23,.07), inset 0 1px 0 rgba(255,255,255,.5);
  height: clamp(420px, 48vh, 480px);
  padding: 0 18px;
  text-align: center;
  border-radius: 0;
  width: 100%;
  margin-inline: 0;
  transform: none;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ct-hero-content{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ct-hero-img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:contrast(.92) brightness(1.05);
  opacity:.35;
}
.ct-hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.45) 100%);
}

.ct-title{
  position:relative; z-index:1;
  margin: 0 0 8px;
  text-align:center;
  font-weight:900;
  font-size: clamp(28px, 4.2vw, 56px);
  color:#fff;
  background:none;
  -webkit-background-clip: initial;
  background-clip: initial;
  text-shadow: 0 10px 26px rgba(0,0,0,.35);
}

.ct-sub{
  position:relative; z-index:1;
  text-align:center; margin:6px auto 2px;
  font-size:15px; color: rgba(255,255,255,.92);
  text-shadow: 0 6px 18px rgba(0,0,0,.28);
}

.ct-grid{
  display:grid;
  gap: 22px;
  grid-template-columns: 2.2fr .8fr;
}
@media (max-width: 992px){
  .ct-grid{ grid-template-columns: 1fr; }
}

.ct-form-col{ width:100%; }
.ct-form{
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  border-radius:16px;
  padding:18px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
}
.ct-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  margin-bottom:12px;
}
@media (max-width: 768px){
  .ct-row{ grid-template-columns: 1fr; }
}
.ct-col{ display:flex; flex-direction:column; }
.ct-col-full{ grid-column: 1 / -1; }

.ct-label{
  font-size:13px; color:#334155; margin-bottom:6px; font-weight:700;
}
.ct-input, .ct-textarea{
  width:100%;
  border:1px solid #e5e7eb; border-radius:12px;
  padding:12px 12px; font-size:15px; color:#0f172a;
  background:#fff; outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ct-input:focus, .ct-textarea:focus{
  border-color: color-mix(in srgb, var(--accent-2) 70%, #ffffff);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 25%, transparent);
}
.ct-error{ color:#dc2626; margin-top:6px; font-size:13px; }

.ct-actions{ margin-top:6px; }
.ct-btn{
  display:inline-block;
  padding:12px 22px;
  border-radius:12px;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
  color:#ffffff; font-weight:800; letter-spacing:.3px;
  border:0; cursor:pointer;
  box-shadow:0 10px 20px rgba(0,0,0,.1);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.ct-btn:hover{ transform: translateY(-1px); box-shadow:0 14px 26px rgba(0,0,0,.14); }
.ct-btn:active{ filter:saturate(1.06); }

.g-recaptcha{ transform-origin:left top; }
.ct-form .g-recaptcha{ margin-top:6px; }

/* ====== INFO CARDS ====== */
.ct-info-col{ display:grid; gap:14px; align-content:start; }
.ct-card{
  display:flex; gap:12px; align-items:flex-start;
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
}
.ct-card-icon{
  width:48px; height:48px; min-width:48px;
  display:grid; place-items:center;
  color:#fff;
  background:linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border-radius:12px;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.ct-card-icon i{ font-size:22px; line-height:1; }
.ct-card-body{ flex:1; }
.ct-card-title{ margin:0 0 4px; font-size:15px; font-weight:800; color:#0f172a; }
.ct-card-text{ margin:0; font-size:14px; color:#334155; }
.ct-card-text a{ color:var(--accent-2); text-decoration:none; }
.ct-card-text a:hover{ text-decoration:underline; }


.ct-footer-spacer{ height:28px; }

html[lang="ar"] .ct-label,
html[lang="ar"] .ct-card-title,
html[lang="ar"] .ct-card-text{
  text-align: right !important;
}
html[lang="ar"] .ct-card{
  flex-direction: row-reverse !important;
  text-align: right !important;
}
html[lang="ar"] .ct-card-icon{
  margin-left: 8px !important;
  margin-right: 0 !important;
}


html[lang="ar"] .ct-input,
html[lang="ar"] .ct-textarea{
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"] .ct-form [name="email"]{
  direction: ltr !important;
  text-align: left !important;
}
html[lang="ar"] .ct-row{ direction: rtl !important; }

html[lang="ar"] .text-start{ text-align: right !important; }
html[lang="ar"] .text-end  { text-align: left  !important; }

html, body, .ct-wrap{
  overflow-x: hidden !important;
  max-width: 100% !important;
}

.ct-grid > *,
.ct-form-col,
.ct-form,
.ct-row,
.ct-row > .ct-col{
  min-width: 0;
}

.ct-input, .ct-textarea, .ct-form, .ct-container{
  max-width: 100%;
}

@media (max-width: 576px){
  .ct-container{ padding: 0 12px !important; }
  .ct-form{ padding: 14px !important; }

  .g-recaptcha{ max-width: 100%; overflow: hidden; }
  .g-recaptcha > div{
    transform: scale(.85);
    -webkit-transform: scale(.85);
    transform-origin: left top;
    -webkit-transform-origin: left top;
  }
  [dir="rtl"] .g-recaptcha > div{
    transform-origin: right top;
    -webkit-transform-origin: right top;
  }

.ct-hero{
    height: clamp(240px, 32vh, 320px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .ct-title{
    font-size: clamp(22px, 6vw, 32px) !important;
  }

  .ct-sub{
    font-size: 14px !important;
  }
}