/* ===== Hero Contact Form — refined (matches web-development/basic-web.html) ===== */
.form-card {
  padding: 32px 30px;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.08);
}
.form-card h4 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1f2937;
}
.form-card .row.g-2 {
  --bs-gutter-y: 18px;
  --bs-gutter-x: 14px;
}
.form-card .form-control,
.form-card select.form-control {
  height: 48px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 0.92rem;
  padding: 10px 14px;
  color: #1f2937;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-card .form-control:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
  outline: none;
}
.form-card .phone-input-wrapper {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}
.form-card .phone-input-wrapper .country-select {
  width: 74px;
  min-width: 74px;
  height: 48px;
  padding: 10px 4px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 0.85rem;
  text-align: center;
}
.form-card .phone-input-wrapper .country-select:hover {
  border-color: #6366f1;
  background: #fff;
}
.form-card .phone-input-wrapper input {
  min-width: 0;
  flex: 1;
}
.form-card .form-check {
  margin-top: 10px !important;
  margin-bottom: 4px;
}
.form-card .form-check-input {
  margin-top: 0.2rem;
}
.form-card .btn.tg-btn {
  height: 50px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(122,63,163,0.25);
}
.whatsapp-label {
  font-size: 0.85rem;
}
@media (max-width: 575.98px) {
  .form-card .col-6 { flex: 0 0 100%; max-width: 100%; }
}

:root {
  --accent:      #4F8EF7;
  --text-dark:   #1A2340;
  --text-muted:  #6B7A99;
  --head-font:   'Playfair Display', serif;
  --body-font:   'DM Sans', sans-serif;
}

body { font-family: var(--body-font); color: var(--text-dark); }

/* shared */
h2.sec-title {
  font-family: var(--head-font);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: 14px;
}
.sec-divider {
  width: 44px; height: 3px;
  border-radius: 4px;
  background: var(--accent);
  margin-bottom: 18px;
}
.sec-para {
  font-size: 0.97rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 14px;
}

/* pill list */
.pill-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.pill-list li {
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid #E0E8F5;
  border-radius:50px; padding:7px 16px;
  font-size:0.875rem; font-weight:500; color:var(--text-dark);
}
.pill-list li i { color:var(--accent); font-size:0.85rem; }

/* numbered row list */
.num-list { list-style:none; padding:0; margin:0; }
.num-list li {
  display:flex; align-items:center; gap:14px;
  padding:12px 0;
  border-bottom:1px solid #E8EDF5;
  font-size:0.93rem; font-weight:500; color:var(--text-dark);
}
.num-list li:last-child { border-bottom:none; }
.num-badge {
  width:32px; height:32px; border-radius:50%;
  background:#fff; border:1px solid #D4E2FF;
  color:var(--accent); font-size:0.78rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ── Section 1 bg ── */
.sec-1 { background:#EEF4FF; padding:64px 0; }

/* ── Section 2 bg ── */
.sec-2 { background:#fff; padding:64px 0; }
.sec-2 .inner { background:#F5FFF8; border:1px solid #C8EED4; border-radius:18px; padding:36px; }

/* ── Section 3 bg ── */
.sec-3 { background:#EEF4FF; padding:64px 0; }
.sec-3 .card-why {
  background:#fff; border-radius:14px;
  border:1px solid #FFE8A0;
  padding:22px 20px; height:100%;
  display:flex; align-items:center; gap:12px;
  font-size:0.92rem; font-weight:500; color:var(--text-dark);
}
.sec-3 .card-why i { color:#F5A623; font-size:1.2rem; flex-shrink:0; }

/* ── Section 4 bg ── */
.sec-4 { background:#ffffff; padding:64px 0; }
.sec-4 .adv-card {
  background:#fff; border-radius:14px;
  border:1px solid #F8BBD0;
  padding:22px 20px; height:100%;
  display:flex; align-items:center; gap:12px;
  font-size:0.92rem; font-weight:500; color:var(--text-dark);
}
.sec-4 .adv-card i { color:#E91E63; font-size:1.2rem; flex-shrink:0; }

/* ── Section 5 bg ── */
.sec-5 { background:#F3EEFF; padding:64px 0; }
.sec-5 .highlight-box {
  background:#fff; border:1px solid #D8C8FF;
  border-radius:18px; padding:30px 28px;
}
.sec-5 .highlight-box p { font-size:0.97rem; color:var(--text-dark); line-height:1.75; margin:0; }

@media(max-width:767px){
  .sec-1,.sec-2,.sec-3,.sec-4,.sec-5 { padding:44px 0; }
  .sec-2 .inner { padding:24px 18px; }
  .sec-5 .highlight-box { padding:22px 18px; }
}

/* ===== Extracted inline styles ===== */
.hero-lead-text { font-size: 18px; }
.label-strong-sm { font-size: 0.93rem; }
.label-strong { font-size: 0.93rem; color: var(--text-dark); }
.divider-orange { background: #F5A623; }
.divider-pink { background: #E91E63; }
.divider-purple { background: #9C6FE4; }
.portfolio-subtitle { max-width: 600px; }
.modal-title-accent { color: var(--main-color); }
.portfolio-item-title { color: #222; }
.preview-iframe { border: none; }