:root{
  --cyan:#35d0d6;
  --pink:#ff7bb6;
  --white:#ffffff;

  --bg:#f7feff;
  --text:#12303a;
  --muted:rgba(18,48,58,.78);

  --border:rgba(53,208,214,.30);
  --shadow:0 18px 45px rgba(18,48,58,.12);

  --radius:20px;
}

/* HERO TEXT */
.contact-hero{
  background:
    radial-gradient(900px 420px at 15% 15%, rgba(53,208,214,.22), transparent 60%),
    radial-gradient(850px 420px at 85% 25%, rgba(255,123,182,.18), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--white));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 18px;
  max-width: 980px;
  margin: 24px auto 18px;
}

.contact-hero h1{
  color:#0c5c66;
  font-weight: 900;
  letter-spacing:.2px;
  margin-bottom: 10px;
}

.contact-lead{
  color: var(--muted);
  line-height: 1.75;
  max-width: 90ch;
  margin: 0 auto;
}

/* SOCIAL CARD WRAPPER */
.social-card{
  max-width: 980px;
  margin: 14px auto 40px;
  padding: 22px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);

  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 14px;
}

/* SOCIAL BUTTONS */
.socialContainer{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.95);
  border: 1px solid rgba(53,208,214,.25);
  box-shadow: 0 14px 30px rgba(18,48,58,.10);

  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  position: relative;
  overflow: hidden;
}

.socialContainer::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(135deg, rgba(53,208,214,.28), rgba(255,123,182,.22));
  transform: rotate(18deg);
  opacity: .0;
  transition: opacity .12s ease;
}

.socialContainer:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
  box-shadow: 0 18px 42px rgba(18,48,58,.14);
}

.socialContainer:hover::before{
  opacity: 1;
}

.socialSvg{
  width: 30px;
  height: 30px;
  fill: #0c5c66;
  position: relative;
  z-index: 1;
}

.largeIcon{
  width: 34px;
  height: 34px;
}

/* Subtle theme accents per button (optional) */
.containerOne{ border-color: rgba(255,123,182,.40); }
.containerTwo{ border-color: rgba(53,208,214,.40); }
.containerThree{ border-color: rgba(255,123,182,.32); }
.containerFour{ border-color: rgba(53,208,214,.32); }

/* Mobile friendly */
@media (max-width: 480px){
  .socialContainer{
    width: 58px;
    height: 58px;
    border-radius: 16px;
  }
  .socialSvg{ width: 28px; height: 28px; }
}