/* =========================================================
   contact.css
   Page-specific styles for Contact Us.
   Relies on tokens/utilities already defined in css/style.css
   (:root variables, .site-header, .site-footer, .btn-purple-pill,
   .badge-pill-light, .hero-title, .hero-desc, .hero-features,
   .section-title, .section-desc, .badge-outline-pill, .gov-banner,
   .footer-*, .social-icon, .newsletter-box). Do not redeclare
   those here — only add what this page needs on top.
   ========================================================= */
   /* ================= HERO ================= */
.hero{ padding-top:2rem; padding-bottom:2rem; color:#fff; }

.badge-pill-light{
  display:inline-flex; align-items:center;
  background:rgba(255,255,255,.15);
  color:#fff;
  padding:.4rem 1rem;
  border-radius:50px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
}
.dot-live{ color:#4ADE80; font-size:.5rem; }

.hero-title{
  font-size:3.2rem;
  font-weight:800;
  line-height:1.1;
  color:#fff;
}
.hero-desc{
  font-size:1.05rem;
  color:rgba(255,255,255,.85);
  max-width:520px;
  margin-top:1.2rem;
}
.hero-features{
  font-size:.85rem;
  color:rgba(255,255,255,.85);
  font-weight:500;
}
.hero-features i{ color:#4ADE80; }

.btn-light-pill{
  background:#fff;
  color:var(--primary-dark);
  border-radius:50px;
  padding:.75rem 1.6rem;
  font-weight:600;
  font-size:.92rem;
}
.btn-light-pill:hover{ background:#f4f4f4; color:var(--primary-dark); }


/* ---- Contact hero (shorter variant of the home hero) ---- */
.contact-hero{ padding-top: 1.5rem; padding-bottom: 3rem; }

.contact-hero-title{
  max-width: 780px;
  font-size: 2.6rem;
}

.contact-hero-desc{
  max-width: 700px;
}

/* ---- Shared "info card" shell used by both columns ---- */
.info-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2.2rem;
  box-shadow:0 4px 20px rgba(0,0,0,.04);
}

/* ---- Get in Touch: contact detail list ---- */
.contact-info-list{
  list-style:none;
  margin:1.6rem 0 0;
  padding:0;
}
.contact-info-list li{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  margin-bottom:1.4rem;
}
.contact-info-list li:last-child{ margin-bottom:0; }
.contact-info-list strong{
  display:block;
  color:var(--heading);
  font-size:.92rem;
  margin-bottom:.15rem;
}
.contact-info-list span{
  color:#6B7280;
  font-size:.85rem;
  line-height:1.5;
}
.info-icon{
  width:34px;
  height:34px;
  border-radius:9px;
  background:var(--bg-tint);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:.95rem;
}
.info-divider{
  border-color:var(--border);
  margin:1.6rem 0 1.4rem;
  opacity:1;
}

/* ---- Project form ---- */
.contact-form .form-label{
  font-weight:600;
  font-size:.85rem;
  color:var(--heading);
  margin-bottom:.4rem;
}
.app-input{
  border:1px solid var(--border);
  border-radius:10px;
  padding:.7rem 1rem;
  font-size:.9rem;
  color:var(--heading);
}
.app-input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 .2rem rgba(124,58,237,.15);
}
.app-input::placeholder{ color:#9CA3AF; }

.topic-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:.7rem;
}
.topic-btn{
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  padding:.65rem .8rem;
  border-radius:10px;
  font-size:.82rem;
  font-weight:600;
  text-align:center;
}
.topic-btn.active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.topic-btn:hover:not(.active){ border-color:var(--primary-light); }

.consent-label{
  font-size:.8rem;
  color:#6B7280;
}
.consent-label a{ font-weight:600; }

/* Solid full-width purple submit button (variant of .btn-purple-pill) */
.btn-purple-solid{
  background:var(--primary);
  color:#fff;
  border-radius:50px;
  padding:.9rem 1.4rem;
  font-weight:600;
  font-size:.95rem;
  border:none;
}
.btn-purple-solid:hover{ background:var(--primary-dark); color:#fff; }

/* ---- Why BlerdTech cards ---- */
.why-section{ background:var(--bg-tint); }
.why-card{
  background:#fff;
  border-radius:var(--radius);
  padding:1.8rem;
  text-align:left;
  box-shadow:0 4px 20px rgba(0,0,0,.04);
}
.why-icon{
  width:50px;
  height:50px;
  border-radius:12px;
  background:var(--bg-tint);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  margin-bottom:1.1rem;
}
.why-card h5{ font-size:1rem; margin-bottom:.5rem; }
.why-card p{ font-size:.85rem; color:#6B7280; margin:0; }

/* ---- Quick Answers (FAQ) ---- */
.faq-section{ background:#fff; }
.faq-wrap{ max-width:760px; }
.faq-item{
  background:#F9FAFB;
  border-radius:12px;
  padding:.3rem 1.4rem;
  margin-bottom:1rem;
}
.faq-question{
  width:100%;
  background:none;
  border:none;
  text-align:left;
  padding:1.1rem 0;
  font-weight:700;
  font-size:.95rem;
  color:var(--heading);
  display:flex;
  align-items:center;
}
.faq-answer{
  color:#6B7280;
  font-size:.85rem;
  padding-bottom:1.1rem;
  margin:0 0 0 1.6rem;
}
.btn-link-purple{
  color:var(--primary);
  font-weight:700;
  font-size:.92rem;
}
.btn-link-purple:hover{ color:var(--primary-dark); }



/* ================= HEADER / NAVBAR ================= */
.contact-header{
  background:linear-gradient(160deg, #6D28D9 0%, #7C3AED 35%, #A855F7 65%, #F3E8FF 100%);
  padding:3rem 0;
}

/* ================= HERO ================= */
.hero{ padding-top:2rem; padding-bottom:2rem; color:#fff; }

.badge-pill-light{
  display:inline-flex; align-items:center;
  background:rgba(255,255,255,.15);
  color:#fff;
  padding:.4rem 1rem;
  border-radius:50px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
}
.dot-live{ color:#4ADE80; font-size:.5rem; }

.hero-title{
  font-size:3.2rem;
  font-weight:800;
  line-height:1.1;
  color:#fff;
}
.hero-desc{
  font-size:1.05rem;
  color:rgba(255,255,255,.85);
  max-width:520px;
  margin-top:1.2rem;
}
.hero-features{
  font-size:.85rem;
  color:rgba(255,255,255,.85);
  font-weight:500;
}
.hero-features i{ color:#4ADE80; }

.btn-light-pill{
  background:#fff;
  color:var(--primary-dark);
  border-radius:50px;
  padding:.75rem 1.6rem;
  font-weight:600;
  font-size:.92rem;
}
.btn-light-pill:hover{ background:#f4f4f4; color:var(--primary-dark); }

.btn-outline-pill{
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  border-radius:50px;
  padding:.75rem 1.6rem;
  font-weight:600;
  font-size:.92rem;
}


/* ================= RESPONSIVE ================= */
@media (max-width: 991px){
  .hero-title{ font-size:2.4rem; }
  .section-title{ font-size:1.9rem; }
  .dashboard-card{ margin:0 auto; }
}
@media (max-width: 576px){
  .hero-title{ font-size:2rem; }
  .section-title{ font-size:1.6rem; }
  .compare-table td, .compare-table th{ padding:.7rem .8rem; font-size:.8rem; }
}

/* ---- Responsive ---- */
@media (max-width: 767px){
  .topic-grid{ grid-template-columns:repeat(2, 1fr); }
  .contact-hero-title{ font-size:2rem; }
}
@media (max-width: 480px){
  .topic-grid{ grid-template-columns:1fr 1fr; }
  .info-card{ padding:1.5rem; }
}