/* ==========================
     HERO
  ========================== */
.contact-hero {
  background: linear-gradient(135deg, #f3f7f4, #eef4f0);
  padding: 90px 20px;
}

.contact-hero h1 {
  font-size: clamp(2.1rem, 4.5vw, 2.8rem);
  font-weight: 800;
  color: #2f4f3e;
}

.contact-hero p {
  max-width: 620px;
  margin: 14px auto 30px;
  font-size: 1.05rem;
  color: #5b6f63;
}

/* ==========================
     HERO ACTIONS
  ========================== */
.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.action-pill {
  padding: 12px 26px;
  border-radius: 40px;
  font-weight: 600;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

/* Soft Pastel Buttons */
.action-pill.call {
  background: #e6efe9;
  color: #2f4f3e;
  border-color: #d4e3da;
}

.action-pill.whatsapp {
  background: #edf6f0;
  color: #356859;
  border-color: #d6eadf;
}

.action-pill.email {
  background: #f2f2f2;
  color: #374151;
  border-color: #e5e7eb;
}

.action-pill:hover {
  transform: translateY(-2px);
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

/* ==========================
     CONTACT SECTION
  ========================== */
.contact-section {
  padding: 70px 0;
}

/* Card */
.contact-card {
  text-align: center;
  padding: 42px 32px;
  border-radius: 22px;
  transition: all 0.35s ease;
}

/* Icon */
.contact-card i {
  font-size: 2.3rem;
  color: #5b7f6a;
  margin-bottom: 16px;
}

.contact-card h4 {
  font-weight: 700;
  margin-bottom: 10px;
  color: #2f4f3e;
}

.contact-card p {
  font-size: 0.95rem;
  color: #6b7280;
}

.contact-card span {
  font-size: 0.85rem;
  color: #4f7662;
  font-weight: 600;
}

/* Pastel Glass Effect */
.glass {
  background: #ffffff;
  border: 1px solid #e6eee9;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.06);
}

.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.08);
}

/* ==========================
     QUICK CONTACT
  ========================== */
.quick-contact {
  background: linear-gradient(135deg, #f1f6f3, #eaf2ee);
  padding: 80px 20px;
}

.quick-box {
  text-align: center;
}

.quick-box h3 {
  font-weight: 800;
  font-size: 1.9rem;
  color: #2f4f3e;
}

.quick-box p {
  margin: 12px 0 26px;
  color: #5b6f63;
}

/* Soft CTA */
.quick-btn {
  background: #e4efe8;
  color: #2f4f3e;
  padding: 14px 36px;
  border-radius: 40px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  gap: 10px;
  border: 1px solid #d6e6dc;
  transition: all 0.3s ease;
}

.quick-btn:hover {
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

/* ==========================
     FOOTER
  ========================== */
.footer-section {
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: 20px 0;
}

.footer-section p {
  font-size: 0.85rem;
  color: #6b7280;
}

/* ==========================
     FLOATING WHATSAPP
  ========================== */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #e6efe9;
  color: #2f4f3e;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  border: 1px solid #d4e3da;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.whatsapp-float:hover {
  background: #ffffff;
}

/* ==========================
     MOBILE
  ========================== */
@media (max-width: 768px) {
  .contact-hero {
    padding: 70px 15px;
  }

  .contact-card {
    padding: 36px 26px;
  }
}