/* =========================
   Custom UI – Contact Icons
   ========================= */

/* Global link polish */
a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ---------- TOP CONTACT BAR / STRIP (generic) ---------- */
.ksd-topbar-contact,
.topbar-contact,
.header-top-contact,
.contact-top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(21,34,135,.10), rgba(0,0,0,0));
  border: 1px solid rgba(21,34,135,.12);
}

.ksd-topbar-contact span,
.topbar-contact span,
.header-top-contact span,
.contact-top span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  font-weight: 600;
  line-height: 1;
}

.ksd-topbar-contact a,
.topbar-contact a,
.header-top-contact a,
.contact-top a {
  color: inherit;
  font-weight: 700;
}

/* Icon style (works with Font Awesome OR Bootstrap Icons if present) */
.ksd-topbar-contact i,
.topbar-contact i,
.header-top-contact i,
.contact-top i {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(21,34,135,.12);
  border: 1px solid rgba(21,34,135,.18);
  font-size: 14px;
}

/* ---------- CONTACT DETAILS BLOCKS (phone/email/address lists) ---------- */
.contact-details,
.ksd-contact-details,
.footer-contact,
.contact-info {
  display: grid;
  gap: 12px;
}

.contact-details a,
.ksd-contact-details a,
.footer-contact a,
.contact-info a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  color: #111;
  font-weight: 700;
}

.contact-details a:hover,
.ksd-contact-details a:hover,
.footer-contact a:hover,
.contact-info a:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

/* Optional: show small label if you use data-label attr */
.contact-details a[data-label]::before,
.ksd-contact-details a[data-label]::before,
.footer-contact a[data-label]::before,
.contact-info a[data-label]::before {
  content: attr(data-label);
  font-size: 12px;
  font-weight: 800;
  opacity: .7;
  margin-right: 6px;
}

/* ---------- Mobile friendly ---------- */
@media (max-width: 768px) {
  .ksd-topbar-contact,
  .topbar-contact,
  .header-top-contact,
  .contact-top {
    justify-content: center;
    padding: 10px;
  }
}
/* =========================
   JD Contact Card – FIX ICON BARS
   ========================= */

.jd-contact-card .jd-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin: 10px 0;
}

.jd-contact-card .jd-ico{
  flex: 0 0 38px;
  width:38px;
  height:38px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(21,34,135,.12);
  border: 1px solid rgba(21,34,135,.20);
  line-height:1;
}

.jd-contact-card .jd-ico i{
  /* IMPORTANT: prevent tall black bars */
  width:auto !important;
  height:auto !important;
  background: none !important;
  border: 0 !important;
  display:inline-block !important;
  line-height: 1 !important;
  font-size: 16px;
  color: #152287;
}

.jd-contact-card .jd-text{
  flex:1;
  font-weight: 600;
  color:#111;
}

.jd-contact-card .jd-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:6px;
}

.jd-contact-card .jd-chip{
  display:inline-f
/* ===============================
   JD Fasteners – Contact Info Fix
   =============================== */

.jd-contact-card{
  background:#fff;
  padding:28px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 18px 45px rgba(0,0,0,.06);
}

.jd-contact-card h2{
  font-size:24px;
  font-weight:800;
  margin-bottom:6px;
}

.jd-contact-card .sub{
  color:#666;
  margin-bottom:20px;
}

/* RESET ICON PROBLEM */
.jd-contact-card i{
  width:auto !important;
  height:auto !important;
  background:none !important;
  border:none !important;
  display:inline-block !important;
  line-height:1 !important;
}

/* CONTACT LIST */
.jd-contact-list{
  list-style:none;
  padding:0;
  margin:0;
}

.jd-contact-list li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:16px;
}

/* ICON CIRCLE */
.jd-contact-list li i{
  flex:0 0 38px;
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex !important;
  align-items:center;
  justify-content:center;
  font-size:16px;
  color:#152287;
  background:rgba(21,34,135,.12);
  border:1px solid rgba(21,34,135,.25);
}

/* TEXT */
.jd-contact-list li span{
  font-weight:600;
  color:#111;
}

/* LINKS */
.jd-contact-list a{
  display:inline-block;
  padding:6px 12px;
  margin:4px 6px 0 0;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  font-weight:700;
  color:#111;
}

.jd-contact-list a:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(0,0,0,.10);
}

/* MOBILE */
@media(max-width:768px){
  .jd-contact-card{ padding:22px; }
  .jd-contact-list li{ gap:12px; }
}