/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 14 2026 | 06:49:21 */
/* ================================================================
   CONTACT PAGE — Left Column CSS
   Paste into: WordPress Admin → Custom CSS & JS → Add CSS
   Requires hero CSS variables already added (--ra-orange etc.)
================================================================ */

/* ── Wrapper ── */
.ra-cinfo {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Availability badge ── */
.ra-cinfo__avail {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--ra-grey-border);
  border-radius: 999px;
  padding: 10px 18px;
  width: fit-content;
}

.ra-cinfo__avail-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ra-lime);
  flex-shrink: 0;
}

.ra-cinfo__avail-text {
  font-size: 13px !important;
  color: var(--ra-grey-text) !important;
  line-height: 1 !important;
}

.ra-cinfo__avail-text strong {
  color: #111110 !important;
  font-weight: 700 !important;
}

/* ── Contact card ── */
.ra-cinfo__card {
  background: #ffffff;
  border: 1px solid var(--ra-grey-border);
  border-radius: 14px;
  overflow: hidden;
}

/* ── Each row ── */
.ra-cinfo__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ra-grey-border);
  text-decoration: none !important;
  transition: background 0.2s;
}

.ra-cinfo__row:last-child {
  border-bottom: none;
}

.ra-cinfo__row:hover {
  background: var(--ra-grey);
}

/* ── Icon box ── */
.ra-cinfo__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}

.ra-cinfo__icon--orange   { background: #FEF0E6; }
.ra-cinfo__icon--whatsapp { background: #E6F9EE; }
.ra-cinfo__icon--telegram { background: #E8F4FD; }
.ra-cinfo__icon--linkedin { background: #E6F1FB; }
.ra-cinfo__icon--fiverr   { background: #E6F9EE; }

/* ── Label & value ── */
.ra-cinfo__label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ra-grey-text) !important;
  margin: 0 0 3px !important;
  line-height: 1 !important;
}

.ra-cinfo__val {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111110 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.ra-cinfo__row:hover .ra-cinfo__val {
  color: var(--ra-orange) !important;
}

/* ── Social follow row ── */
.ra-cinfo__socials {
  background: #ffffff;
  border: 1px solid var(--ra-grey-border);
  border-radius: 14px;
  padding: 18px 20px;
}

.ra-cinfo__socials-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ra-grey-text) !important;
  margin: 0 0 12px !important;
}

.ra-cinfo__socials-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ra-cinfo__social {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111110 !important;
  text-decoration: none !important;
  background: var(--ra-grey);
  border: 1px solid var(--ra-grey-border);
  padding: 8px 14px;
  border-radius: 8px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.ra-cinfo__social:hover {
  border-color: var(--ra-orange);
  background: var(--ra-orange-light);
  color: var(--ra-orange-text) !important;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .ra-cinfo__avail {
    width: 100%;
    justify-content: center;
  }
  .ra-cinfo__socials-row {
    gap: 8px;
  }
}