.phone-contact,
.footer-phone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.phone-contact {
  align-items: center;
}

.phone-contact small,
.footer-phone small {
  color: #ffffff7d;
  font-size: 10px;
  line-height: 1.4;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
}

.social-links a {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 1px solid #ffffff2b;
  border-radius: 50%;
  color: #fff;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}

.social-links a:hover {
  border-color: #315ce7;
  background: #315ce7;
  transform: translateY(-2px);
}

.social-links svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-links a:first-child svg {
  fill: currentColor;
  stroke: none;
}

.social-links .social-dot {
  fill: currentColor;
  stroke: none;
}

.area-card .section-intro h2 {
  max-width: 620px;
}

.local-map {
  background:
    linear-gradient(#18191d0a 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, #18191d0a 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(circle at center, #315ce71c, transparent 56%);
  isolation: isolate;
}

.reach-ring {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  border: 1px solid #315ce72c;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.reach-ring-one {
  width: 190px;
  height: 190px;
}

.reach-ring-two {
  width: 320px;
  height: 320px;
}

.reach-ring-three {
  width: 470px;
  height: 470px;
}

.reach-center {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  width: 172px;
  height: 172px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #315ce7;
  color: #fff;
  text-align: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 18px #315ce71c, 0 20px 45px #315ce72b;
}

.reach-center small {
  margin-bottom: 7px;
  color: #ffffffa8;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reach-center strong {
  font-size: 21px;
}

.reach-center span {
  max-width: 120px;
  margin-top: 5px;
  color: #ffffffc7;
  font-size: 10px;
  line-height: 1.25;
}

.reach-label {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #18191d14;
  background: #fffffff2;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 650;
  box-shadow: 0 12px 30px #191c2612;
}

.reach-label i {
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #315ce7;
  box-shadow: 0 0 0 3px #315ce72e;
}

.reach-label-visits {
  top: 14%;
  left: 8%;
}

.reach-label-support {
  top: 42%;
  right: 4%;
}

.reach-label-remote {
  bottom: 12%;
  left: 13%;
}

@media (width <= 680px) {
  .contact-actions {
    gap: 18px;
  }

  .phone-contact {
    width: 100%;
  }

  .reach-ring-one {
    width: 150px;
    height: 150px;
  }

  .reach-ring-two {
    width: 250px;
    height: 250px;
  }

  .reach-ring-three {
    width: 350px;
    height: 350px;
  }

  .reach-center {
    width: 142px;
    height: 142px;
  }

  .reach-label {
    padding: 9px 10px;
    font-size: 10px;
  }

  .reach-label-visits {
    top: 8%;
    left: 3%;
  }

  .reach-label-support {
    top: 46%;
    right: 1%;
  }

  .reach-label-remote {
    bottom: 8%;
    left: 4%;
  }
}