[data-tooltip] {
    position: relative;
    letter-spacing: 0.1rem;
}

[data-tooltip]::before,
[data-tooltip]::after {
    --tooltip-color: #000000;
    --arrow-size: .5rem;
    --scale: 0;
    position: absolute;
    left: 50%;
    right: 50%;
    transform: translate(-50%, var(--translate-y)) scale(var(--scale));
    transition: transform 100ms;
    transition-timing-function: linear;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    --scale: 1;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.45, 1.93);
}

[data-tooltip]::before {
    --translate-y: calc(-100% - var(--arrow-size));
    content: attr(data-tooltip);
    background-color: var(--tooltip-color);
    color: #FFF;
    padding: .50em;
    border-radius: 5%;
    width: 1700%;
   
    text-align: center;
    transform-origin: bottom center;
}

[data-tooltip]::after {
    --translate-y: calc(-1 * var(--arrow-size));
    content: '';
  
    border-top-color: var(--tooltip-color);
    transform-origin: top center;
}












/*services*/




.tooltip {
    position: relative; }
    .tooltip:after, .tooltip:before {
      opacity: 0;
      pointer-events: none;
      bottom: 100%;
      left: 50%;
      position: absolute;
      z-index: 10;
      transform: translate(-50%, 10px);
      transform-origin: top;
      border-radius: 5%;
      transition: all 0.18s ease-out 0.18s; }
  
  .tooltip:after {
    background-color: #000000;
    box-shadow: 0 0 3px #ffffff;
    color: #ffffff;
    content: attr(data-tooltip);
    padding: 10px;
    font-size: 12.5px;
    white-space: nowrap;
    border-radius: 5%;
    margin-bottom: 11px; }
  
  .tooltip:before {
    width: 0;
    height: 0;
    content: "";
    border-radius: 5%;
    margin-bottom: 6px; }
  
  .tooltip:hover:before,
  .tooltip:hover:after {
    opacity: 1;
    border-radius: 5%;
    pointer-events: auto;
    transform: translate(-50%, 0); }
  
  [data-tooltip-pos="up"]:before {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #f5f5f5;
    margin-bottom: 6px; }
  
 
  
  [data-tooltip-pos="down"]:before,
  [data-tooltip-pos="down"]:after {
    bottom: auto;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -10px); }
  
  [data-tooltip-pos="down"]:after {
    margin-top: 11px; }
  
  [data-tooltip-pos="down"]:hover:before,
  [data-tooltip-pos="down"]:hover:after {
    transform: translate(-50%, 0); }
  
  [data-tooltip-pos="left"]:before,
  [data-tooltip-pos="left"]:after {
    bottom: auto;
    left: auto;
    right: 100%;
    top: 50%;
    transform: translate(10px, -50%); }
  
  [data-tooltip-pos="left"]:after {
    margin-right: 11px; }
  
  [data-tooltip-pos="left"]:hover:before,
  [data-tooltip-pos="left"]:hover:after {
    transform: translate(0, -50%); }
  
  [data-tooltip-pos="right"]:before,
  [data-tooltip-pos="right"]:after {
    bottom: auto;
    left: 100%;
    top: 50%;
    transform: translate(-10px, -50%); }
  
  [data-tooltip-pos="right"]:after {
    margin-left: 11px; }
  
  [data-tooltip-pos="right"]:hover:before,
  [data-tooltip-pos="right"]:hover:after {
    transform: translate(0, -50%); }
  
  [data-tooltip-length]:after {
    white-space: normal; }
  
  [data-tooltip-length="small"]:after {
    width: 80px; }
  
  [data-tooltip-length="medium"]:after {
    width: 150px; }
  
  [data-tooltip-length="large"]:after {
    width: 260px; }
  
  [data-tooltip-length="fit"]:after {
    width: 100%; }