/* Contact page — WebsitesForChildren.com */

body.contact-page {
  background: #f6faf8;
}

body.contact-page .site-footer {
  position: relative;
  z-index: 2;
  margin-top: 0;
}

.ct-page {
  --ct-navy: #0a1931;
  --ct-teal: #14b8a6;
  --ct-teal-dark: #0d9488;
  --ct-muted: #64748b;
  position: relative;
  isolation: isolate;
  overflow: visible;
}

/* Illustration — full image visible, scaled down, anchored to footer top-right */
.ct-bg-art {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  line-height: 0;
}

.ct-bg-art img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(520px, 46vw);
}

.ct-hero,
.ct-main,
.ct-features {
  position: relative;
  z-index: 1;
}

.ct-page .container {
  width: min(1180px, 92%);
}

/* Hero */
.ct-hero {
  position: relative;
  padding: 2.5rem 0 1.5rem;
  overflow: hidden;
}

.ct-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.ct-deco-plane {
  top: 1.5rem;
  left: 4%;
  width: 56px;
  height: 56px;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314b8a6' stroke-width='1.8'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E");
  opacity: 0.85;
}

.ct-deco-rocket {
  top: 2rem;
  right: 6%;
  width: 64px;
  height: 64px;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='1.6'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.05-2.91a2.18 2.18 0 00-2.91-.05z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 012-3.95A12.88 12.88 0 0122 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 01-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
}

.ct-hero-inner {
  position: relative;
  z-index: 1;
}

.ct-title {
  margin: 0 0 0.35rem;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 800;
  color: var(--ct-navy);
  letter-spacing: -0.03em;
}

.ct-sub {
  margin: 0 0 0.85rem;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 800;
  color: var(--ct-teal-dark);
}

.ct-intro {
  margin: 0;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ct-muted);
}

/* Main layout */
.ct-main {
  padding: 0.5rem 0 2.5rem;
}

.ct-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 1.75rem;
  align-items: start;
}

/* Form card */
.ct-form-card {
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 22px;
  padding: 1.65rem 1.55rem 1.45rem;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);
}

.ct-form-row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ct-field {
  display: block;
  margin-bottom: 1rem;
}

.ct-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: #334155;
}

.ct-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.85rem;
  padding: 0 0.85rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ct-input-wrap:focus-within {
  border-color: #99f6e4;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
  background: #fff;
}

.ct-input-wrap--area {
  align-items: flex-start;
  min-height: auto;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.ct-input-wrap--select {
  position: relative;
}

/* Custom subject dropdown */
.ct-subject-select {
  position: relative;
  z-index: 20;
}

.ct-subject-select.is-open {
  z-index: 30;
}

.ct-subject-control {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.85rem;
  padding: 0 0.85rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.ct-subject-select.is-open .ct-subject-control,
.ct-subject-control:focus-within {
  border-color: #99f6e4;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
  background: #fff;
}

.ct-subject-toggle {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  padding: 0.55rem 0;
}

.ct-subject-value.is-placeholder {
  color: #94a3b8;
  font-weight: 500;
}

.ct-subject-chevron {
  width: 0.55rem;
  height: 0.55rem;
  flex-shrink: 0;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.ct-subject-select.is-open .ct-subject-chevron {
  transform: rotate(225deg) translateY(1px);
  border-color: var(--ct-teal-dark);
}

.ct-subject-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
  max-height: 14rem;
  overflow: auto;
}

.ct-subject-menu[hidden] {
  display: none !important;
}

.ct-subject-option {
  display: block;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: #334155;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.ct-subject-option:hover,
.ct-subject-option:focus-visible {
  background: #f0fdfa;
  color: var(--ct-teal-dark);
  outline: none;
}

.ct-subject-option.is-selected {
  background: #ccfbf1;
  color: #0f766e;
}

.ct-input-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: center/contain no-repeat;
  opacity: 0.55;
}

.ct-ico-user {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.5-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
}

.ct-ico-mail {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}

.ct-ico-chat {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z'/%3E%3C/svg%3E");
}

.ct-ico-pen {
  margin-top: 0.15rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
}

.ct-input-wrap input,
.ct-input-wrap textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  color: #0f172a;
}

.ct-input-wrap textarea {
  min-height: 8.5rem;
  resize: vertical;
  line-height: 1.55;
}

.ct-input-wrap input::placeholder,
.ct-input-wrap textarea::placeholder {
  color: #94a3b8;
}

.ct-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 0.35rem;
}

.ct-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.45rem;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ct-teal), var(--ct-teal-dark));
  color: #fff;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(20, 184, 166, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}

.ct-submit svg {
  width: 1.05rem;
  height: 1.05rem;
}

.ct-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(20, 184, 166, 0.4);
}

.ct-privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  max-width: 16rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #94a3b8;
}

.ct-privacy-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3'/%3E%3C/svg%3E");
}

/* Side info cards */
.ct-side {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ct-info-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.1rem 1.15rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}

.ct-info-card h2 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ct-navy);
}

.ct-info-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ct-muted);
}

.ct-info-card--blue {
  background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);
}

.ct-info-card--green {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.ct-info-card--yellow {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.ct-info-email {
  display: inline-block;
  margin-bottom: 0.25rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: #0d9488;
  text-decoration: none !important;
}

.ct-info-email:hover {
  text-decoration: underline !important;
}

.ct-info-ico {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: #fff center/22px no-repeat;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.ct-info-ico--mail {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}

.ct-info-ico--smile {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cpath d='M9 9h.01M15 9h.01'/%3E%3C/svg%3E");
}

.ct-info-ico--handshake {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2'%3E%3Cpath d='M11 12h2a2 2 0 012 2v1'/%3E%3Cpath d='M12 2v4M8 6l2 2M16 6l-2 2'/%3E%3Cpath d='M4 14l3 3 2-2 3 3 5-5'/%3E%3C/svg%3E");
}

/* Bottom features */
.ct-features {
  padding: 0 0 3rem;
}

.ct-features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.35rem 1.25rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
}

.ct-feat {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.ct-feat strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ct-navy);
}

.ct-feat p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ct-muted);
}

.ct-feat-ico {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  background: center/20px no-repeat;
}

.ct-feat--green .ct-feat-ico {
  background-color: #ecfdf5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2'%3E%3Cpath d='M12 3l7 4v5c0 5-3.5 8-7 9-3.5-1-7-4-7-9V7l7-4z'/%3E%3C/svg%3E");
}

.ct-feat--blue .ct-feat-ico {
  background-color: #eff6ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c0 2 2.5 3 6 3s6-1 6-3v-5'/%3E%3C/svg%3E");
}

.ct-feat--orange .ct-feat-ico {
  background-color: #fff7ed;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2'%3E%3Cpath d='M12 21s-7-4.5-9.5-9A5.5 5.5 0 0112 6a5.5 5.5 0 019.5 6c-2.5 4.5-9.5 9-9.5 9z'/%3E%3C/svg%3E");
}

.ct-feat--purple .ct-feat-ico {
  background-color: #f5f3ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3 20c0-3 3-5 6-5s6 2 6 5'/%3E%3Cpath d='M14 20c0-2 2-3.5 4-3.5'/%3E%3C/svg%3E");
}

/* Nav active on contact page */
body.contact-page .main-nav a.nav-active,
body.contact-page .mobile-nav-link.nav-active {
  color: var(--ct-teal-dark);
  border-bottom-color: var(--ct-teal);
}

@media (max-width: 960px) {
  .ct-layout {
    grid-template-columns: 1fr;
  }

  .ct-bg-art img {
    max-width: min(420px, 58vw);
    opacity: 0.95;
  }

  .ct-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .ct-form-row--split {
    grid-template-columns: 1fr;
  }

  .ct-form-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .ct-submit {
    justify-content: center;
    width: 100%;
  }

  .ct-privacy {
    max-width: none;
    justify-content: center;
    text-align: center;
  }

  .ct-features-grid {
    grid-template-columns: 1fr;
  }

  .ct-bg-art img {
    max-width: min(280px, 72vw);
    opacity: 0.35;
  }
}

body.rtl .ct-deco-plane {
  left: auto;
  right: 4%;
  transform: scaleX(-1);
}

body.rtl .ct-deco-rocket {
  right: auto;
  left: 6%;
}

body.rtl .ct-bg-art {
  right: auto;
  left: 0;
}