/* =========================
   Iconlink
   ========================= */

.iconlink{
  --il-icon: 28px;
  --il-gap: 10px;
  --il-text: 12px;
  --il-underline: 2px;
  --il-pad-b: 3px;

  display: inline-flex;
  align-items: center;
  gap: var(--il-gap);
  text-decoration: none !important;
  color: var(--iconlink-text, #38151c) !important;
}

/* Force Elementor not to recolor on hover/visited */
.iconlink,
.iconlink:hover,
.iconlink:visited,
.iconlink:active,
.iconlink:focus,
.iconlink:focus-visible{
  color: var(--iconlink-text, #38151c) !important;
}

.iconlink .iconlink__text,
.iconlink:hover .iconlink__text{
  color: var(--iconlink-text, #38151c) !important;
}

.iconlink--left{
  justify-content: flex-start !important;
  text-align: left !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  align-self: flex-start !important;
}

.iconlink--center{
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.iconlink--right{
  justify-content: flex-end !important;
  text-align: right !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  align-self: flex-end !important;
}

.iconlink__icon{
  width: var(--il-icon);
  height: var(--il-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.iconlink__svg{
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform 260ms ease;
}

.iconlink__bg{
  fill: var(--iconlink-bg, #fcd8d9);
  transition: fill 260ms ease;
}

.iconlink__mark{
  fill: var(--iconlink-fg, #38151c);
  transition: fill 260ms ease;
}

.iconlink__text{
  font-family: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  font-size: var(--il-text);
  color: inherit !important;
  display: inline-block;
  padding-bottom: var(--il-pad-b);

  border-bottom: var(--il-underline) solid var(--iconlink-underline-force, var(--iconlink-bg, #fcd8d9)) !important;
  transition: border-color 220ms ease;
}

.iconlink:hover .iconlink__svg{ transform: rotate(45deg); }

.iconlink:hover .iconlink__bg{ fill: var(--iconlink-bg-h, #f48a96); }
.iconlink:hover .iconlink__mark{ fill: var(--iconlink-fg-h, #e1af26); }

.iconlink:hover .iconlink__text{
  border-bottom-color: var(--iconlink-underline-force, var(--iconlink-bg-h, #f48a96)) !important;
}

.iconlink:focus-visible{
  outline: 2px solid var(--iconlink-fg-h, #e1af26);
  outline-offset: 5px;
  border-radius: 8px;
}

/* Tablet */
@media (max-width: 1024px){
  .iconlink{
    --il-icon: 30px;
    --il-gap: 8px;
    --il-text: 11px;
    --il-underline: 2px;
    --il-pad-b: 3px;
  }
}

/* Mobile */
@media (max-width: 480px){
  .iconlink{
    --il-icon: 26px;
    --il-gap: 7px;
    --il-text: 10px;
    --il-underline: 2px;
    --il-pad-b: 2px;
  }
}