body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: start;
  background: #eaeaea;
}

.frame {
  width: 393px;
  height: 780px;
  background: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0,0,0,.2);
  z-index: 0;
}

/* Первый див — фон */
.block1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;   /* по ширине родителя */
  height: 170px; /* можешь регулировать высоту */
  background-image: url("img/bg-1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


/* Фото пользователя */
.user-photo {
  position: absolute;
  top: 94px;
  left: 123px;
  width: 148px;
  height: 148px;
  border: 3px solid #d3aa58; /*цвет жёлтый d3aa58*/
  border-radius: 50%;
  object-fit: cover;
  z-index: 10; /* выше блока фона */
}


/* Блок 2 уже есть */
.block2 {
  width: 393px;
  height: 252px;
  position: absolute;
  top: 343px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 1;
  align-items: center; /* центрируем все дочерние элементы по горизонтали */
  padding: 0; /* убираем паддинг */
}


/* Кнопка "Сохранить в контакты" */
.button-contact {
  width: 360px;
  height: 40px;
  background: linear-gradient(90deg, #d3aa58, #e6c878, #d3aa58);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0px 4px 5.1px -2px rgba(76,76,76,0.08);
  cursor: pointer;
  box-sizing: border-box;
  padding: 0;
  min-height: 40px;
  line-height: normal;

  background-size: 200% auto;
  animation: shine 3s linear infinite;
}

.button-contact:hover {
  box-shadow: 0px 6px 12px -2px rgba(76,76,76,0.2);
}

.button-text {
  font-family: 'Montserrat', "Geometria", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-align: center;
}

.button-icon {
  width: 20px;
  height: 20px;
}

/* Перелив градиента */
@keyframes shine {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}


/* Блок с текстом под фото */
.user-info {
  position: absolute;
  top: 258px; /* 94px фото + 148px высота фото + 16px отступ */
  left: 99px;
  width: 196px;
  height: 69px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center; /* чтобы текст был по центру */
  opacity: 1;
}

/* Заголовок ФИО */
.user-name {
  width: 196px;
  height: 48px;
  font-family: 'Montserrat', "Geometria", sans-serif;
  font-weight: 600; /* SemiBold */
  font-size: 20px;
  line-height: 100%;
  text-align: center;
  line-height: 100%;
  letter-spacing: 0%;
  color: #333; /* чтобы текст был виден на тёмном фоне */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Подзаголовок должность */
.user-position {
  width: 196px;
  height: 17px;
  font-family: 'Montserrat', "Geometria", sans-serif;
  font-weight: 500; /* Medium */
  font-size: 14px;
  line-height: 100%;
  text-align: center;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Контейнер для мессенджеров */
.messengers {
  width: 360px;
  height: 108px;
  display: flex;
  justify-content: space-between; /* чтобы блоки в ряд с нужным отступом */
  gap: 20px; /* отступ между блоками */
  margin-top: 8px; /* отступ от кнопки выше */
}


.messenger:hover {
  box-shadow: 0px 6px 12px -2px rgba(76,76,76,0.2);
}

/* Общие стили для блока мессенджера */
/* Общие стили для блока мессенджера */
.messenger {
  width: 170px;
  height: 108px;
  background: rgba(255,255,255,0.73); /* #FFFFFFBA */
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0.5px solid #d3aa58; /*#d3aa58*/
  border-radius: 16px;
  box-shadow: 0px 4px 5.1px -2px rgba(76,76,76,0.08);
  box-sizing: border-box;
  opacity: 1;
}

/* Иконка мессенджера */
.messenger-icon {
  width: 32px;   /* обновлённая ширина */
  height: 32px;  /* обновлённая высота */
}

/* Текст мессенджера */
.messenger-text {
  width: 147px;
  height: 34px;
  font-family: 'Montserrat', "Geometria", sans-serif;
  font-weight: 500; /* Medium */
  font-size: 14px;
  line-height: 100%;
  text-align: center;
  letter-spacing: 0  color: #2A271B; /* новый цвет */
}

.contact-blocks {
  display: flex;
  flex-direction: column;
  gap: 8px; /* расстояние между блоками */
  margin-top: 8px; /* отступ от предыдущего блока */
  align-items: center; /* центрируем оба блока по горизонтали */
}


.contact-item {
  width: 360px;
  height: 40px;
  background: rgba(255,255,255,0.73);
  border-radius: 16px;
  padding: 8px 16px;
  display: flex;
  align-items: center;      /* вертикальное центрирование */
  justify-content: center;  /* горизонтальное центрирование текста и иконки */
  gap: 10px;                /* расстояние между иконкой и текстом */
  border: 0.5px solid #d3aa58; /*d3aa58*/
  box-shadow: 0px 4px 5.1px -2px rgba(76,76,76,0.08);
  box-sizing: border-box;
  font-family: 'Montserrat', "Geometria", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  color: #2A271B;
}


.contact-item:hover {
  box-shadow: 0px 6px 12px -2px rgba(76,76,76,0.2);
}

/* Иконка слева */
.contact-icon {
  width: 20px; /* можешь поменять на нужный размер */
  height: 20px;
}

.block3 {
  width: 393px;
  height: 252px;
  position: absolute;
  top: 600px; /* регулируй по макету */
  left: 0;

  display: flex;
  flex-direction: column;
  align-items: center; /* чтобы текст был по центру */
  justify-content: flex-start;
  gap: 8px;

  padding-top: 32px; /* отступ сверху */
  box-sizing: border-box;
  opacity: 1;
}


.block3-title {
  width: 292px;
  height: 40px;
  font-family: 'Montserrat', "Geometria", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  text-transform: uppercase;
  color: #333;
}

.company-item {
  width: 360px;
  height: 40px;
  background: rgba(255,255,255,0.73);
  border-radius: 16px;
  padding: 8px 16px;
  display: flex;
  align-items: center;       /* вертикальное центрирование */
  justify-content: center;   /* горизонтальное центрирование текста и иконки */
  gap: 12px;                 /* расстояние между иконкой и текстом */
  border: 0.5px solid #d3aa58; /*d3aa58*/
  box-shadow: 0px 4px 5.1px -2px rgba(76,76,76,0.08);
  box-sizing: border-box;
  font-family: 'Montserrat', "Geometria", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  color: #2A271B;
  cursor: pointer;
}

.company-item:hover {
  box-shadow: 0px 6px 12px -2px rgba(76,76,76,0.2);
}
a {
  color: inherit;           /* берёт цвет от родителя */
  text-decoration: none;    /* убирает подчёркивание */
}

a:hover {
  text-decoration: none;    /* чтобы не появлялось подчёркивание при наведении */
  color: inherit;           /* цвет не меняется при ховере */
}