.contacts__container {
  position: relative;
}

.contacts__title {
  font-size: 24px;
  line-height: 28px;
}

.contacts__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--secondary-color);
  background: rgba(255, 255, 255, 0.80);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  max-width: 420px;
  width: 100%;
  position: absolute;
  top: 40%;
  right: 15%;
  z-index: 1;
}

.contacts__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  padding-left: 40px;
  height: 40px;
}

.contacts__item::before {
  content: "";
  position: absolute;
  top: calc(50% - 15px);
  left: 0;
  background: url(/static/svg/point.svg) no-repeat center;
  background-size: contain;
  width: 30px;
  height: 30px;
}

.contacts__item:nth-child(3):before {
  background: url(/static/svg/time.svg) no-repeat center;
  background-size: contain;
}

.contacts__item:nth-child(4):before {
  background: url(/static/svg/phone.svg) no-repeat center;
  background-size: contain;
}

.contacts__item h2 {
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  min-width: 115px;
}

.contacts__item p {
  font-size: 16px;
  line-height: 18px;
}

.contacts__call {
  padding: 7px 17px;
  border-radius: 21px;
  border: 1px solid rgba(18, 31, 58, 0.20);
  background: var(--secondary-color);
  -webkit-box-shadow: 0px 0px 14px 0px rgba(176, 202, 41, 0.60);
  box-shadow: 0px 0px 14px 0px rgba(176, 202, 41, 0.60);
  -webkit-animation: pulse 1.5s infinite;
  animation: pulse 1.5s infinite;
  cursor: pointer;
}

.contacts__call p {
  position: relative;
  padding-left: 28px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.35px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
}

.contacts__call p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: url(/static/svg/tel.svg) no-repeat center;
  background-size: contain;
}

.map {
  position: relative;
  width: 100%;
  height: 545px;
  border-radius: 6px;
  background: rgba(213, 236, 93, 0.05);
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.05), 0px 7px 7px 0px rgba(0, 0, 0, 0.04), 0px 16px 10px 0px rgba(0, 0, 0, 0.03), 0px 28px 11px 0px rgba(0, 0, 0, 0.01), 0px 44px 12px 0px rgba(0, 0, 0, 0.00);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.05), 0px 7px 7px 0px rgba(0, 0, 0, 0.04), 0px 16px 10px 0px rgba(0, 0, 0, 0.03), 0px 28px 11px 0px rgba(0, 0, 0, 0.01), 0px 44px 12px 0px rgba(0, 0, 0, 0.00);
}

.map iframe {
  border-radius: 6px;
}

/* ------------------- @media ------------------- */

@media screen and (max-width: 767px) {
  .contacts__list {
    max-width: calc(100% - 40px);
    top: initial;
    bottom: 50px;
    right: 20px;
  }
}

@media screen and (max-width: 425px) {
  .contacts__list {
    max-width: 100%;
    right: 0;
    padding: 9px;
  }

  .contacts__title {
    margin-bottom: 10px;
  }

  .contacts__item {
    padding-left: 27px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 4px;
    height: auto;
    margin-bottom: 10px;
  }

  .contacts__item::before {
    top: calc(50% - 11px);
    width: 22px;
    height: 22px;
  }

  .contacts__item h2,
  .contacts__item p {
    font-size: 14px;
    line-height: 16px;
  }

  .main__title {
    font-size: 28px;
    line-height: 32px;
  }
}

@media screen and (max-width: 375px) {
  .main__title {
    font-size: 28px;
    line-height: 32px;
  }
}