/* ============================================================
   RainDrop - shared "Contact / Get in touch" section
   ============================================================
   This component used to be pasted into a <style> block on every page that
   carries the contact section (25 of them, in two different formattings).
   It lives here so the cards only have to be restyled once.

   Load it AFTER css/rd-theme.css, at the point where the old inline <style>
   sat, so the cascade is unchanged: rd-theme.css deliberately overrides some
   of these rules with !important (see its "rd-contact" block).
   ============================================================ */

.rd-contact-section {
  background: linear-gradient(160deg, #1a1f3a 0%, #0e1228 100%);
  padding: 64px 20px;
  border-top: 1px solid rgba(1, 205, 255, 0.15);
}
.rd-contact-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.rd-contact-heading {
  text-align: center;
  color: #f2f8fd;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: 0.3px;
  font-family: inherit;
}
.rd-contact-subheading {
  text-align: center;
  color: rgba(242, 248, 253, 0.55);
  font-size: 0.95rem;
  margin: 0 0 44px;
  font-family: inherit;
}
.rd-contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.rd-contact-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(1, 205, 255, 0.18);
  border-radius: 14px;
  padding: 32px 24px 28px;
  flex: 1 1 190px;
  max-width: 230px;
  text-align: center;
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
  text-decoration: none;
}
.rd-contact-card:hover {
  border-color: rgba(1, 205, 255, 0.55);
  background: rgba(1, 205, 255, 0.06);
  transform: translateY(-5px);
}
.rd-contact-icon-wrap {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #01cdff 0%, #0123fe 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rd-contact-icon-wrap svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rd-contact-icon-wrap svg.filled {
  fill: #fff;
  stroke: none;
}
.rd-contact-card-title {
  color: #f2f8fd;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 4px;
  font-family: inherit;
}
.rd-contact-card-sub {
  color: rgba(242, 248, 253, 0.5);
  font-size: 0.75rem;
  margin: 0 0 10px;
  font-family: inherit;
}
.rd-contact-card-email {
  color: #01cdff;
  font-size: 0.82rem;
  text-decoration: none;
  word-break: break-word;
  font-family: inherit;
}
.rd-contact-card-email:hover {
  color: #fff;
  text-decoration: underline;
}
.rd-contact-card-link {
  color: #01cdff;
  font-size: 0.85rem;
  text-decoration: none;
  font-weight: 600;
  font-family: inherit;
}
.rd-contact-card-link:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 680px) {
  .rd-contact-grid { gap: 14px; }
  .rd-contact-card { max-width: 100%; flex-basis: 100%; }
}