:root {
  --black: #000;
  --white: #fff;
  --off_white: #ededed;
  --grey: rgba(0, 0, 0, 0.7);

  --breadcrumbs: #9dc4e6;
  --banner_title_colour: --white;
  --banner_text_colour: rgba(231, 241, 251, 0.9);
  --blue: #003a70;
  --text_blue: #7da4c7;
  --text_grey: #8aa0b3;
  --turq: #38bdf8;

  --border: rgb(216, 226, 236);
  --placeholder: #9aabba;
  --box_shadow: rgba(3, 42, 82, 0.35) 0px 10px 34px -26px;

  --bg_lblue: #eef4fa;

  --button_bg_blue: #38bdf8;
  --button_color_blue: #00263f;
}

.social-items--title {
  color: #0b1e42;
  font-weight: 400;
  font-size: 14pt;
  margin-bottom: 10px;
  font-family:
    Georgia,
    Times New Roman,
    serif;
}

.copy-link {
  position: relative;
  transition: all 0.7s;
  display: flex;
}

.copy-link-input {
  opacity: 0;
  width: 0;
  pointer-events: none;
  visibility: hidden;
}

.copy-link-button {
  padding: 0;
  cursor: pointer;
}

.copy-link--copied {
  position: absolute;
  bottom: -30px;
  background-color: var(--blue);
  color: var(--white);
  font-size: 0.8rem;
  padding: 2px 10px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 0.7s;
}

.copy-link--copied.active {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transition: all 0.7s;
}

.social-items__content-box {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

.social-items {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid lightgrey;
}

.social-item {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  min-width: 35px;
  height: 35px;
  min-height: 35px;
  border-radius: 50%;
  background: var(--bg_lblue);
  border: 1px solid var(--border);
  color: var(--blue);
  font-weight: 700;
  font-size: 13px;
  transition: background 0.18s;
}

.social-item:hover {
  background: var(--blue) !important;
  color: var(--white);
}