/* Стилизация выделения текста */
::selection {
  background: #e5e5e5;
  color: #373737;
}

/* Общие стили для сброса */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Основные стили тела */
body {
  max-width: 580px;
  margin: 24px auto;
  font-family: 'Inter', sans-serif;
  background-color: #ffffff;
  color: #373737;
  overflow-x: hidden; /* Предотвращение горизонтального скроллинга */
}

/* Медиа-запросы */
@media (max-width: 600px) {
  body {
    max-width: 100%;
    padding: 0 16px;
  }

  h1 {
    font-size: 48px;
  }
  .hero-text-line-1,
  .hero-text-line-2,
  .hero-text-line-3 {
    gap: 12px;
    min-height: 60px;
  }
  .hero-image-1-container,
  .hero-image-3-container {
    width: 70px;
    height: 50px;
    border-radius: 16px;
  }
  .outline {
    width: 66px;
    height: 46px;
    border-radius: 14px;
    left: 2px;
    top: 2px;
  }
  .hero-image-1 {
    width: 72px;
    height: 102px;
  }
  .hero-image-2-container {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }
  .hero-image-2 {
    width: 40px;
    height: 40px;
  }
  .hero-image-2-mouse {
    width: 20px;
    height: 20px;
  }
}

/* Лоадер */
.card {
  background-color: #ffffff;
  border-radius: 1.25rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 580px;
  height: 100%;
  max-height: 100vh;
}

.loader {
  color: #000000;
  background: linear-gradient(to right, #2d60ec, #3ccfda);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 30px;
  animation: animate8345 9s linear infinite;
  font-weight: normal;
}

.content {
  opacity: 0;
  transition: opacity 0.5s ease;
}

@keyframes animate8345 {
  0%,
  100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(360deg);
  }
}

/* Кнопки */
.btn {
  font-size: 15px;
  height: 48px;
  padding: 15px 20px;
  border-radius: 50px;
  border: 1px solid #ececec;
  background-color: #f6f6f6;
  color: #323232;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.06),
    0 6px 6px 0 rgba(0, 0, 0, 0.05),
    0 13px 8px 0 rgba(0, 0, 0, 0.03),
    0 23px 9px 0 rgba(0, 0, 0, 0.01),
    0 36px 10px 0 rgba(0, 0, 0, 0);
}

.btn:hover {
  background-color: #faf7f7;
  color: #323232;
  transform: translateY(-2px);
  box-shadow:
    0 3px 3px 0 rgba(0, 0, 0, 0.06),
    0 8px 6px 0 rgba(0, 0, 0, 0.05),
    0 15px 8px 0 rgba(0, 0, 0, 0.03),
    0 25px 9px 0 rgba(0, 0, 0, 0.01),
    0 38px 10px 0 rgba(0, 0, 0, 0);
}

.grey {
  color: #eeeeee;
  font-size: 15px;
  font-weight: normal;
  height: 51px;
  padding: 16px 22px;
  border: 1px solid #6d6d6d;
  background: radial-gradient(50% 50% at 50% 50%, #535353 0%, #6e6e6e 100%);
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.06),
    0 6px 6px 0 rgba(0, 0, 0, 0.05),
    0 13px 8px 0 rgba(0, 0, 0, 0.03),
    0 23px 9px 0 rgba(0, 0, 0, 0.01),
    0 36px 10px 0 rgba(0, 0, 0, 0),
    inset 0 0 6px 3px rgba(255, 255, 255, 0.28),
    inset 0 0.2px 0.2px 1px rgba(255, 255, 255, 0.17);
}

.grey:hover {
  transform: translateY(-2px);
  color: #ffffff;
  box-shadow:
    0 3px 3px 0 rgba(0, 0, 0, 0.06),
    0 8px 6px 0 rgba(0, 0, 0, 0.05),
    0 15px 8px 0 rgba(0, 0, 0, 0.03),
    0 25px 9px 0 rgba(0, 0, 0, 0.01),
    0 38px 10px 0 rgba(0, 0, 0, 0),
    inset 0 0 6px 3px rgba(255, 255, 255, 0.35),
    inset 0 0.2px 0.2px 1px rgba(255, 255, 255, 0.25);
}

.white {
  font-size: 15px;
  font-weight: normal;
  height: 51px;
  padding: 16px 22px;
  margin-left: 16px;
  border: 1px solid #ececec;
  background-color: #ffffff;
}

/* Типографика */
h1 {
  font-family: 'Instrument Serif', serif;
  font-size: 64px;
  font-weight: normal;
  color: #373737;
  line-height: 1;
}

h2 {
  font-size: 18px;
  font-weight: normal;
  color: #5c5c5c;
  line-height: 1;
}

h3 {
  font-size: 16px;
  font-weight: normal;
  color: #5c5c5c;
  line-height: 1;
}

p {
  font-size: 14px;
  color: #7a7a7a;
}

span {
  color: #adadad;
}

/* Секция 1: Хедер */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.container-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.radar {
  position: relative;
  width: 14px;
  height: 14px;
}

.outer-circle,
.inner-circle {
  position: absolute;
  border-radius: 50%;
}

.outer-circle {
  width: 14px;
  height: 14px;
  background-color: rgb(196, 239, 195);
  animation: radarPulse 2s infinite ease-in-out;
}

.inner-circle {
  width: 8px;
  height: 8px;
  top: 3px;
  left: 3px;
  background-color: #0bda07;
}

@keyframes radarPulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}

.status-badge p {
  font-size: 14px;
  font-weight: lighter;
}

/* Секция 2: Герой */
.container-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 80px;
}

.hero-text-line-1,
.hero-text-line-2,
.hero-text-line-3 {
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 83px;
}

.hero-image-1-container {
  width: 90px;
  height: 70px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 3px 6px 0 rgba(0, 0, 0, 0.06),
    0 11px 11px 0 rgba(0, 0, 0, 0.05),
    0 24px 15px 0 rgba(0, 0, 0, 0.03),
    0 43px 17px 0 rgba(0, 0, 0, 0.01),
    0 68px 19px 0 rgba(0, 0, 0, 0);
}

.outline {
  width: 86px;
  height: 66px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: absolute;
  z-index: 1;
  left: 2px;
  top: 2px;
}

.hero-image-1 {
  width: 92px;
  height: 122px;
  position: absolute;
  z-index: 0;
  transition: transform 0.3s ease-in-out;
}

.hero-image-1-container:hover .hero-image-1 {
  transform: scale(1.2);
}

.points-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.points-wrapper .point {
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #ffffff;
  border-radius: 9999px;
  animation: floating-points-down infinite ease-in-out;
  pointer-events: none;
  top: -10px;
}

@keyframes floating-points-down {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    transform: translateY(55px);
    opacity: 0;
  }
}

.points-wrapper .point:nth-child(1) {
  left: 10%;
  animation-duration: 2.2s;
  animation-delay: 0.1s;
}
.points-wrapper .point:nth-child(2) {
  left: 30%;
  animation-duration: 2.5s;
  animation-delay: 0.3s;
}
.points-wrapper .point:nth-child(3) {
  left: 25%;
  animation-duration: 2.1s;
  animation-delay: 0.2s;
}
.points-wrapper .point:nth-child(4) {
  left: 44%;
  animation-duration: 2.3s;
}
.points-wrapper .point:nth-child(5) {
  left: 50%;
  animation-duration: 1.9s;
}
.points-wrapper .point:nth-child(6) {
  left: 75%;
  animation-duration: 1.7s;
  animation-delay: 0.5s;
}
.points-wrapper .point:nth-child(7) {
  left: 88%;
  animation-duration: 2.4s;
  animation-delay: 0.1s;
}
.points-wrapper .point:nth-child(8) {
  left: 58%;
  animation-duration: 2.2s;
  animation-delay: 0.2s;
}
.points-wrapper .point:nth-child(9) {
  left: 98%;
  animation-duration: 2.6s;
  animation-delay: 0.3s;
}
.points-wrapper .point:nth-child(10) {
  left: 65%;
  animation-duration: 2.1s;
  animation-delay: 0.2s;
}

.main-gradient {
  position: relative;
  background: linear-gradient(
    45deg,
    #5babd6,
    #7e74da,
    #d963df,
    #f06a8f,
    #f0a856
  );
  background-size: 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mixShift 7s ease-in-out infinite;
}

.main-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 30% 70%,
    #5babd6,
    #d963df,
    #f0a856,
    #7e74da,
    #f06a8f
  );
  background-size: 300%;
  mix-blend-mode: screen;
  -webkit-background-clip: text;
  background-clip: text;
  animation: mixShiftReverse 7s ease-in-out infinite;
}

@keyframes mixShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes mixShiftReverse {
  0% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.hero-image-2-container {
  width: 70px;
  height: 70px;
  border: 1px solid #ececec;
  background-color: #fafafa;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 3px 6px 0 rgba(0, 0, 0, 0.06),
    0 11px 11px 0 rgba(0, 0, 0, 0.05),
    0 24px 15px 0 rgba(0, 0, 0, 0.03),
    0 43px 17px 0 rgba(0, 0, 0, 0.01),
    0 68px 19px 0 rgba(0, 0, 0, 0);
}

.hero-image-2 {
  width: 60px;
  height: 60px;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.hero-image-2-mouse {
  position: absolute;
  width: 25px;
  height: 25px;
  z-index: 2;
  transition: all 0.5s ease-in-out;
}

.hero-image-3-container {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  height: 70px;
  width: 90px;
  box-shadow:
    0 3px 6px 0 rgba(0, 0, 0, 0.06),
    0 11px 11px 0 rgba(0, 0, 0, 0.05),
    0 24px 15px 0 rgba(0, 0, 0, 0.03),
    0 43px 17px 0 rgba(0, 0, 0, 0.01),
    0 68px 19px 0 rgba(0, 0, 0, 0);
}

.cloud-overlay,
.cloud-overlay-bottom {
  position: absolute;
  width: 120px;
  height: 60px;
  z-index: 3;
}

.cloud-top-1 {
  top: -5px;
  left: -120px;
  animation: moveLeftToRight 18s infinite linear;
}

.cloud-top-2 {
  top: -5px;
  left: -120px;
  animation: moveLeftToRight 18s infinite linear;
  animation-delay: 9s;
}

.cloud-overlay-bottom.cloud-bottom-1 {
  bottom: -20px;
  right: -120px;
  animation: moveRightToLeft 18s infinite linear;
}

.cloud-overlay-bottom.cloud-bottom-2 {
  bottom: -20px;
  right: -120px;
  animation: moveRightToLeft 18s infinite linear;
  animation-delay: 9s;
}

.radar-hero-3-container {
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: #faf5f0;
  border: 1px solid #e4d7c2;
  border-radius: 50%;
  box-shadow: 0 -1px 4px 0 #f5e7d8 inset;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  z-index: 4;
}

.radar-hero-3-container::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  background-color: #fae8c1;
  border-radius: 50%;
  animation: statusPulse 2.5s infinite ease-in-out;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  opacity: 0;
}

@keyframes statusPulse {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }
  20% {
    width: 14px;
    height: 14px;
    opacity: 0;
  }
  25% {
    width: 15px;
    height: 15px;
    opacity: 0.5;
  }
  80% {
    width: 38px;
    height: 38px;
    opacity: 0.3;
  }
  100% {
    width: 38px;
    height: 38px;
    opacity: 0;
  }
}

@keyframes moveLeftToRight {
  0% {
    left: -120px;
  }
  100% {
    left: calc(100% + 120px);
  }
}

@keyframes moveRightToLeft {
  0% {
    right: -120px;
  }
  100% {
    right: calc(100% + 120px);
  }
}

.hero-image-3-container img:not(.cloud-overlay, .cloud-overlay-bottom) {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

/* Ссылки */
.links-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 50px 0;
  width: 100%;
  max-width: 580px;
}

.personal-link {
  color: #5c5c5c;
  text-decoration: none;
  font-size: 15px;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  transition: color 0.3s ease;
  overflow: hidden;
}

.personal-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 28px;
  background-color: #f6f6f6;
  border-radius: 15px;
  z-index: -1;
  transform: translateY(100%);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  opacity: 0;
}

.personal-link:hover::before {
  transform: translateY(0);
  opacity: 1;
}

.personal-link:not(:hover)::before {
  transform: translateY(100%);
  opacity: 0;
}

/* Линия фона */
.bg-line {
  height: 1px;
  width: 100%;
  max-width: 580px;
  background: #e4e4e4;
  margin: 0 auto;
}

/* Секция 3: Обо мне */
.section-about-me {
  margin: 50px 0 120px;
}

.section-about-me h2 {
  margin-bottom: 16px;
}
.section-about-me p {
  margin-bottom: 12px;
}
.section-about-me p:last-child {
  margin-bottom: 32px;
}

/* Секция 4: Проекты */
.content-container-section-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.toggle-switch {
  position: relative;
  width: 255px;
  height: 41px;
}

.toggle-input {
  display: none;
}

.toggle-label {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #eaeaea;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.06),
    0 6px 6px 0 rgba(0, 0, 0, 0.05),
    0 13px 8px 0 rgba(0, 0, 0, 0.03),
    0 23px 9px 0 rgba(0, 0, 0, 0.01),
    0 36px 10px 0 rgba(0, 0, 0, 0);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 5px;
  box-sizing: border-box;
}

.toggle-option {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #797979;
  transition: color 0.3s ease;
  position: relative;
  z-index: 2;
}

.toggle-option:hover {
  color: #373737;
}
.toggle-option.active {
  color: #373737;
  font-weight: 100;
}

.toggle-label::before {
  content: '';
  position: absolute;
  width: 120px;
  height: 33px;
  background-color: #f6f6f6;
  border-radius: 8px;
  z-index: 1;
  transition: all 0.3s ease;
  top: 3px;
}

.toggle-input:not(:checked) ~ .toggle-label::before {
  left: 3px;
  transform: translateX(0);
}

.toggle-input:checked ~ .toggle-label::before {
  left: 50%;
  transform: translateX(3%);
}

.toggle-input:checked ~ .toggle-label .toggle-option[data-value='uiux'] {
  color: #797979;
}
.toggle-input:checked ~ .toggle-label .toggle-option[data-value='dev'] {
  color: #373737;
}

.project-card-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
}

.project-card-container:first-child {
  margin-top: 24px;
}

.project-card-container:hover .project-img {
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.project-card-container:hover .btn-arrow {
  background-color: #373737;
}

.project-card-container:hover .btn-arrow img {
  filter: brightness(0) invert(1);
}

.project-card-photo {
  width: 100%;
  max-width: 580px;
  height: 350px;
  border-radius: 24px;
  border: 1.5px solid #ececec;
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  transition: transform 0.3s ease;
  padding: 0 45px;
}

.project-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 18px;
}

.btn-arrow {
  width: 22px;
  height: 22px;
  background-color: #e6e6e6;
  border-radius: 100px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}

.project-tags-container {
  display: flex;
  gap: 12px;
}

.project-tag {
  font-size: 14px;
  color: #5c5c5c;
  padding: 12px 16px;
  background-color: #f5f5f5;
  border-radius: 12px;
  border: 1.5px solid #ececec;
}

.project-card-container:last-child {
  margin-bottom: 124px;
}

.section-projects {
  position: relative;
  transition: height 0.5s ease;
}

.section-projects + * {
  transition: margin-top 0.3s ease;
}

.btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 580px;
  z-index: 5;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    bottom 0.5s ease;
  bottom: 84px; /* Относительно .projects-wrapper */
}

.projects-wrapper {
  position: relative;
  width: 100%;
  max-width: 580px;
  padding-bottom: 62px; /* Добавляем отступ для кнопки */
}

.bg-gradient-container {
  position: absolute;
  bottom: 94px;
  left: 0;
  width: 100%;
  max-width: 580px;
  height: 443px;
  pointer-events: none;
  z-index: 1;
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 580px;
  height: 443px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 70%);
  z-index: 1;
}

.bg-gradient-container img {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 580px;
  height: 300px;
  z-index: 0;
  animation: float 20s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-5%);
  }
}

.dev-image-container {
  width: 100%;
  max-width: 580px;
  height: 457px;
  opacity: 0; /* Изначальная прозрачность для анимации */
  transition: opacity 0.5s ease; /* Плавное появление */
}

.dev-image-container img {
  display: block;
  margin-top: 24px;
  width: 100%;
  max-width: 580px;
  height: auto;
}

/* Убираем анимацию наведения с 4-й карточки после цикла */
.project-card-container.gradient {
  pointer-events: none;
}

/* Новые стили для активной/неактивной 4-й карточки и кнопки */
.project-card-container.gradient:hover .project-img,
.project-card-container.hidden:hover .project-img {
  transform: none; /* Отключаем анимацию для 4-й и скрытых */
}

.project-card-container.gradient:hover .btn-arrow,
.project-card-container.hidden:hover .btn-arrow {
  background-color: #e6e6e6; /* Исходный фон */
}

.project-card-container.gradient:hover .btn-arrow img,
.project-card-container.hidden:hover .btn-arrow img {
  filter: none; /* Без инверсии */
}

.project-card-container.active:hover .project-img {
  transform: scale(0.95); /* Включаем анимацию для активной 4-й */
}

.project-card-container.active:hover .btn-arrow {
  background-color: #373737; /* Анимация стрелки */
}

.project-card-container.active:hover .btn-arrow img {
  filter: brightness(0) invert(1); /* Инверсия стрелки */
}

.project-card-container.hidden {
  opacity: 0;
  display: none; /* Скрываем полностью, пока не нажата кнопка */
}

/* Анимации через @keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.project-card-container.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.project-card-container.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

/* Анимация для градиента */
@keyframes fadeInGradient {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Анимация для градиента при исчезновении */
@keyframes fadeOutGradient {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.bg-gradient-container {
  animation: fadeInGradient 0.3s ease forwards;
}

/* Анимации для кнопки */
@keyframes fadeOutButton {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeInButton {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Секция 5: Услуги */
.section-services {
  margin-bottom: 120px;
}

.section-services h2 {
  margin-bottom: 16px;
  margin-top: 120px;
}

.section-services p {
  margin-bottom: 24px;
}

.services-card {
  width: 284px;
  background-color: #f2f2f2;
  border: 1.5px solid #ececec;
  border-radius: 24px;
}

.services-card h3 {
  color: #373737;
  background-color: #fff;
  padding: 16px;
  margin: 10px;
  border-radius: 14px;
}

.services-list-container {
  background-color: #fff;
  height: 208px;
  padding: 16px;
  margin: 10px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
}

.services-list-container p {
  margin-bottom: 16px;
}

.services-list-container p:last-child {
  margin-bottom: 0;
}

.cards-container {
  display: flex;
  justify-content: space-between;
}

/* Секция 6: Опыт */
.section-experience {
  margin-bottom: 120px;
}

.jobs-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.job {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.job:first-child {
  margin-top: 24px;
}

.company-title {
  display: flex;
  gap: 8px;
}

.company-title p {
  color: #373737;
}

/* Секция 7: Отзывы */
.section-testimonials {
  margin-bottom: 120px;
}

.testimonial-card-container {
  width: 284px;
  height: 260px;
  background-color: #f2f2f2;
  border: 1.5px solid #ececec;
  border-radius: 24px;
  padding: 8px;
}

.testimonial-card {
  background-color: #fff;
  height: 100%;
  border-radius: 14px;
  padding: 20px 13px 13px 13px;
}

.testimonial-card p {
  font-size: 13px;
  color: #373737;
}

.client-info-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
}

.client-info-container p {
  color: #7a7a7a;
}

.client-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #7a7a7a;
}

.client-photo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.circle-testimonial {
  width: 5px;
  height: 5px;
  background-color: #7a7a7a;
  border-radius: 50%;
}

.client-job-container {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.content-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 293px;
  padding-right: 12px;
  padding-left: 12px;
  margin-top: 20px;
}

.card-1 {
  transform: rotate(-7deg);
}

.card-2 {
  transform: rotate(7deg);
}

.testimonial-txt {
  height: 128px;
}

.btn-arrow-slider {
  width: 40px;
  height: 40px;
  border: 1px solid #f5f5f5;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease; /* Плавная анимация изменения размера */
}

.btn-arrow-slider:hover {
  transform: scale(1.1); /* Увеличение на 10% при наведении */
}

.btn-arrow-slider:active {
  transform: scale(0.9); /* Уменьшение на 10% при нажатии */
}

.btn-left img {
  transform: rotate(180deg);
}

.slider-page {
  width: 8px;
  height: 8px;
  background-color: #e4e4e4;
  border-radius: 50%;
}

.active-page {
  background-color: #5c5c5c;
}

.slider-pages-container {
  display: flex;
  gap: 6px;
}

.slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 580px;
  margin-top: 12px;
}
/* Анимация для точек (fade-in/out) */
.slider-page {
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.slider-page.active-page {
  background-color: #5c5c5c;
  transform: scale(1.2); /* Увеличение активной точки */
}

/* Анимация для карточек отзывов */
.testimonial-card-container {
  transition: opacity 0.5s ease;
  opacity: 1; /* Изначально видимы */
}

.testimonial-card-container.fade-out {
  opacity: 0;
}

.testimonial-card-container.fade-in {
  opacity: 1;
}

/* Скрываем неактивные карточки */
.testimonial-card-container.hidden {
  display: none;
}

/* Фиксированные углы для всех карточек в паре */
.card-1,
.card-3,
.card-5,
.card-7 {
  transform: rotate(-7deg); /* Левый угол для первой карточки в паре */
}

.card-2,
.card-4,
.card-6,
.card-8 {
  transform: rotate(7deg); /* Правый угол для второй карточки в паре */
}

/* Устанавливаем начальное состояние для всех карточек */
.card-1,
.card-2,
.card-3,
.card-4,
.card-5,
.card-6,
.card-7,
.card-8 {
  opacity: 1;
}

/* Корректировка контейнера для двух карточек */
.content-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 293px;
  padding-right: 12px;
  padding-left: 12px;
  margin-top: 20px;
  position: relative; /* Для управления z-index */
}

.content-container .testimonial-card-container {
  position: relative; /* Для анимации */
  z-index: 1; /* Убеждаемся, что карточки поверх других элементов */
}

/*Section-8-citation*/
.section-citation {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.section-citation p {
  font-family: 'Square Peg', cursive;
  font-size: 32px;
  color: #7a7a7a;
}

.section-citation .author {
  color: #bcbcbc;
  margin-top: 16px;
}

/* Анимация написания текста с clip-path */
.citation {
  opacity: 0; /* Изначально скрыт */
  clip-path: inset(0 100% 0 0); /* Скрываем текст справа */
  animation: none; /* Изначально анимация отключена */
}

.citation.animated {
  opacity: 1; /* Появление текста */
  clip-path: inset(0 0 0 0); /* Показываем весь текст */
  animation: writeEffect 4s ease-out forwards; /* Увеличили до 4 секунд */
}

/* Ключевые кадры для анимации */
@keyframes writeEffect {
  from {
    clip-path: inset(0 100% 0 0); /* Начинаем с правой стороны скрытой */
  }
  to {
    clip-path: inset(0 0 0 0); /* Полностью видимый текст */
  }
}

.stamped {
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*footer*/
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 120px;
  margin-top: 2px;
}

.stamped img {
  width: 100px;
  height: 100px;
}
/*menu-navigation*/
.menu-wrapper {
  width: 610px;
  height: 100px;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999; /* Ниже, чем у меню (1000) */
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(7.5px);
  border-radius: 52px 52px 0 0;
}

.bg-menu-outline {
  width: 580px;
  height: 68px;
  background-color: transparent;
  border-radius: 217px;
  border: 3px solid #373737;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000; /* Выше, чем у .menu-wrapper */
}

.menu-bg {
  width: 577px;
  height: 65px;
  border-radius: 217px;
  border: 1.5px solid #626262;
  background: rgba(55, 55, 55, 0.9);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 21px;
  padding: 18px 15px 18px 24px;
  box-shadow:
    36px 108px 32px 0px rgba(0, 0, 0, 0),
    23px 69px 29px 0px rgba(0, 0, 0, 0.02),
    13px 39px 25px 0px rgba(0, 0, 0, 0.07),
    6px 17px 18px 0px rgba(0, 0, 0, 0.12),
    1px 4px 10px 0px rgba(0, 0, 0, 0.14);
}

.nav-link {
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #c2c2c2;
  position: relative; /* Для позиционирования круга */
  transition: color 0.3s ease; /* Плавный переход цвета */
}

.nav-link:hover {
  color: #fff; /* Белый цвет при наведении */
}

.nav-active {
  color: #fff; /* Белый цвет для активной ссылки */
}

.nav-active::after {
  content: '';
  position: absolute;
  bottom: -8px; /* Под текстом */
  left: 50%;
  transform: translateX(-50%) scale(1); /* Начальный масштаб */
  width: 3px;
  height: 3px;
  background-color: #fff; /* Белый круг */
  border-radius: 50%;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease; /* Плавная анимация */
  opacity: 1; /* Видимый по умолчанию */
}

.nav-link:not(.nav-active)::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) scale(0); /* Скрыт при отсутствии активности */
  width: 3px;
  height: 3px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0; /* Прозрачный */
  transition:
    opacity 0.3s ease,
    transform 0.3s ease; /* Плавная анимация */
}

.nav-dot {
  width: 3px;
  height: 3px;
  background-color: #c2c2c2;
  border-radius: 50%;
}

.navigation-links {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 432px;
}

.decor-line {
  height: 17px;
  width: 1.5px;
  background-color: #626262;
}

.btn-nav {
  width: 85px;
  height: 29px;
  border-radius: 59px;
  background: linear-gradient(180deg, #676767 -5.36%, #5e5e5e 107.14%);
  border: transparent;
  color: #dedede;
}

.cta-gif {
  width: 274px;
  height: 185px;
  background-color: #fff;
  border: 1.5px solid #ececec;
  border-radius: 24px;
  box-shadow:
    0px 79px 22px 0px rgba(0, 0, 0, 0),
    0px 50px 20px 0px rgba(0, 0, 0, 0.01),
    0px 28px 17px 0px rgba(0, 0, 0, 0.03),
    0px 13px 13px 0px rgba(0, 0, 0, 0.04),
    0px 3px 7px 0px rgba(0, 0, 0, 0.05);
  margin-bottom: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}

.cta-gif img {
  width: 262px;
  height: 173px;
  border-radius: 18px;
}

.cta-btn {
  font-size: 32px;
  color: #373737;
  font-weight: 500;
  text-decoration: none;
  width: 595px;
  display: block;
  margin-top: 10px;
  margin-bottom: 32px;
  transition: color 0.3s ease; /* Плавный переход цвета */
}

.cta-btn:hover {
  color: #7c56dd; /* Темно-фиолетовый цвет при наведении */
}

.links-container2 {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
}

.links-container2 a img {
  transition: filter 0.3s ease; /* Плавный переход фильтра */
}

.links-container2 a img:hover {
  filter: brightness(0) saturate(100%) hue-rotate(0deg); /* Пример затемнения до темного */
}

/* Медиа-запросы для мобильной версии (≤ 700px) */
@media (max-width: 700px) {
  * {
    -webkit-tap-highlight-color: transparent;
  }
  body {
    max-width: 358px;
    margin: 16px auto;
    padding: 0;
  }

  .logo img {
    width: 39px;
    height: 44px;
  }

  .status-badge {
    display: none;
  }

  .btn {
    width: 112px;
    height: 45px;
    font-size: 14px;
    padding: 12px 16px;
    border-radius: 50px;
    border: 1px solid #ececec;
    background-color: #f6f6f6;
    color: #323232;
    cursor: pointer;
    box-shadow:
      0 1px 3px 0 rgba(0, 0, 0, 0.06),
      0 6px 6px 0 rgba(0, 0, 0, 0.05),
      0 13px 8px 0 rgba(0, 0, 0, 0.03),
      0 23px 9px 0 rgba(0, 0, 0, 0.01),
      0 36px 10px 0 rgba(0, 0, 0, 0);
    transition: none;
  }

  .btn:hover {
    background-color: #f6f6f6;
    color: #323232;
    transform: none;
    box-shadow:
      0 1px 3px 0 rgba(0, 0, 0, 0.06),
      0 6px 6px 0 rgba(0, 0, 0, 0.05),
      0 13px 8px 0 rgba(0, 0, 0, 0.03),
      0 23px 9px 0 rgba(0, 0, 0, 0.01),
      0 36px 10px 0 rgba(0, 0, 0, 0);
  }

  .grey {
    color: #eeeeee; /* Устанавливаем белый цвет текста по умолчанию */
    width: 112px;
    height: 45px;
    font-size: 14px;
    padding: 12px 16px;
    border: 1px solid #6d6d6d;
    background: radial-gradient(50% 50% at 50% 50%, #535353 0%, #6e6e6e 100%);
    box-shadow:
      0 1px 3px 0 rgba(0, 0, 0, 0.06),
      0 6px 6px 0 rgba(0, 0, 0, 0.05),
      0 13px 8px 0 rgba(0, 0, 0, 0.03),
      0 23px 9px 0 rgba(0, 0, 0, 0.01),
      0 36px 10px 0 rgba(0, 0, 0, 0),
      inset 0 0 6px 3px rgba(255, 255, 255, 0.28),
      inset 0 0.2px 0.2px 1px rgba(255, 255, 255, 0.17);
    transition: none;
  }

  .grey:hover {
    transform: none;
    color: #eeeeee; /* Убеждаемся, что цвет остаётся белым при ховере */
    box-shadow:
      0 1px 3px 0 rgba(0, 0, 0, 0.06),
      0 6px 6px 0 rgba(0, 0, 0, 0.05),
      0 13px 8px 0 rgba(0, 0, 0, 0.03),
      0 23px 9px 0 rgba(0, 0, 0, 0.01),
      0 36px 10px 0 rgba(0, 0, 0, 0),
      inset 0 0 6px 3px rgba(255, 255, 255, 0.28),
      inset 0 0.2px 0.2px 1px rgba(255, 255, 255, 0.17);
  }

  .white {
    width: 112px;
    height: 45px;
    font-size: 14px;
    padding: 12px 16px;
    margin-left: 16px;
    border: 1px solid #ececec;
    background-color: #f6f6f6;
    transition: none;
  }

  .hero-title {
    font-size: 43px;
    line-height: 1.1;
  }

  .hero-text-line-1,
  .hero-text-line-2,
  .hero-text-line-3 {
    gap: 12px;
    align-items: center;
    min-height: 56px;
  }

  .container-hero {
    gap: 12px;
    margin-top: 60px;
  }

  .hero-image-1-container {
    width: 72px;
    height: 56px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow:
      0 3px 6px 0 rgba(0, 0, 0, 0.06),
      0 11px 11px 0 rgba(0, 0, 0, 0.05),
      0 24px 15px 0 rgba(0, 0, 0, 0.03),
      0 43px 17px 0 rgba(0, 0, 0, 0.01),
      0 68px 19px 0 rgba(0, 0, 0, 0);
  }

  .outline {
    width: 68px;
    height: 52px;
    border-radius: 14px;
    left: 2px;
    top: 2px;
  }

  .hero-image-1 {
    width: 72px;
    height: 96px;
    position: absolute;
    z-index: 0;
    transition: transform 0.3s ease-in-out;
  }

  .hero-image-1-container:hover .hero-image-1 {
    transform: scale(1.2);
  }

  .points-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
  }

  .points-wrapper .point {
    width: 2px;
    height: 2px;
    animation: floating-points-down infinite ease-in-out;
  }

  .hero-image-2-container {
    width: 56px;
    height: 56px;
    border: 1px solid #ececec;
    background-color: #fafafa;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-shadow:
      0 3px 6px 0 rgba(0, 0, 0, 0.06),
      0 11px 11px 0 rgba(0, 0, 0, 0.05),
      0 24px 15px 0 rgba(0, 0, 0, 0.03),
      0 43px 17px 0 rgba(0, 0, 0, 0.01),
      0 68px 19px 0 rgba(0, 0, 0, 0);
  }

  .hero-image-2 {
    width: 48px;
    height: 48px;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .hero-image-2-mouse {
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 2;
    transition: all 0.5s ease-in-out;
  }

  .hero-image-3-container {
    width: 72px;
    height: 56px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow:
      0 3px 6px 0 rgba(0, 0, 0, 0.06),
      0 11px 11px 0 rgba(0, 0, 0, 0.05),
      0 24px 15px 0 rgba(0, 0, 0, 0.03),
      0 43px 17px 0 rgba(0, 0, 0, 0.01),
      0 68px 19px 0 rgba(0, 0, 0, 0);
  }

  .cloud-overlay,
  .cloud-overlay-bottom {
    width: 96px;
    height: 48px;
    position: absolute;
    z-index: 3;
  }

  .cloud-top-1 {
    top: -5px;
    left: -96px;
    animation: moveLeftToRight 18s infinite linear;
  }

  .cloud-top-2 {
    top: -5px;
    left: -96px;
    animation: moveLeftToRight 18s infinite linear;
    animation-delay: 9s;
  }

  .cloud-overlay-bottom.cloud-bottom-1 {
    bottom: -20px;
    right: -96px;
    animation: moveRightToLeft 18s infinite linear;
  }

  .cloud-overlay-bottom.cloud-bottom-2 {
    bottom: -20px;
    right: -96px;
    animation: moveRightToLeft 18s infinite linear;
    animation-delay: 9s;
  }

  .radar-hero-3-container {
    width: 12px;
    height: 12px;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
  }

  .hero-image-3-container img:not(.cloud-overlay, .cloud-overlay-bottom) {
    width: 72px;
    height: 56px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .links-container {
    margin-top: 32px; /* Отступ сверху от .hero-section */
    margin-bottom: 32px; /* Отступ снизу до .bg-line */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .personal-link {
    font-size: 13px;
    color: #323232;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .personal-link:hover {
    color: #323232;
    background-color: #ffffff;
  }

  .bg-line {
    margin-bottom: 32px; /* Отступ снизу */
  }

  .letter-a {
    display: none;
  }

  h2 {
    font-size: 16px;
    font-weight: normal;
    color: #5c5c5c;
    line-height: 1;
  }

  .section-about-me h2 {
    margin-bottom: 24px;
  }

  p {
    font-size: 13px;
    color: #7a7a7a;
  }

  .section-about-me p:last-child {
    margin-bottom: 24px;
  }

  #emailButton,
  #resumeButton {
    font-size: 14px;
    height: 45px;
    width: 139px;
  }

  #emailButton {
    width: 109px;
    color: #eeeeee;
    margin-right: -8px;
  }
  .hero-image-2-mouse {
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 2;
    transition: all 0.5s ease-in-out;
    transform-origin: center;
    transform: scale(1);
  }
  .hero-image-2-container {
    border-radius: 18px;
  }

  .bg-menu-outline {
    height: 64px;
    width: 358px;
  }

  .menu-bg {
    height: 61px;
    width: 355px;
  }

  .nav-link {
    font-size: 12px;
  }

  .nav-testimonials-dot,
  .nav-testimonials {
    display: none;
  }
  .navigation-links {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 243px;
  }

  .btn-nav {
    width: 52px;
    height: 29px;
    text-indent: -9999px; /* Скрываем текст */
    background-image: url('/images/contact-nav-icon.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 59px;
    background-color: #636363;
    border: transparent;
    color: #dedede;
  }
  .menu-wrapper {
    bottom: -8px;

    width: 390px;
    border-radius: 32px 32px 0 0;
  }
  * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
  }
  .section-about-me {
    margin-bottom: 100px;
  }

  /*начало*/
  .toggle-option {
    font-size: 12px;
  }
  .toggle-switch {
    width: 231px;
    height: 39px;
  }
  .toggle-label::before {
    content: '';
    position: absolute;
    width: 108px;
    height: 31px;
    background-color: #f6f6f6;
    border-radius: 8px;
    z-index: 1;
    transition: all 0.3s ease;
    top: 3px;
  }
  .project-card-container {
    pointer-events: auto; /* Разрешаем клики, но отключаем ховер */
    margin-bottom: 24px;
  }

  .project-card-container:first-child {
    margin-top: 24px;
  }

  .project-card-container:hover .project-img,
  .project-card-container:hover .btn-arrow,
  .project-card-container:hover .btn-arrow img {
    transform: none; /* Отключаем ховер-эффекты */
    background-color: inherit; /* Сбрасываем изменения фона */
    filter: none; /* Сбрасываем фильтр */
    -webkit-tap-highlight-color: transparent;
  }

  .project-card-photo {
    width: 100%;
    max-width: 358px;
    height: 250px;
    border-radius: 24px;
    border: 1.5px solid #ececec;
    background-color: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
  }

  .project-img {
    max-width: 100%;
    height: auto;
    width: 358px; /* Фиксируем ширину изображения */
    object-fit: cover; /* Адаптация содержимого изображения */
    border-radius: 10px;
    padding: 0 0;
  }

  .project-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 0; /* Маргин сверху 16px, снизу 0 */
  }

  .project-name {
    font-size: 14px;
    font-weight: normal;
    color: #5c5c5c;
    line-height: 1;
  }

  .project-tags-container {
    display: none; /* Скрываем теги на мобильной версии */
  }
  .btn-arrow {
    width: 20px;
    height: 20px;
    background-color: #f2f2f2;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    user-select: none; /* Иногда помогает на Android */
    box-shadow: none;
    outline: none;
    border-radius: 10000px;
  }
  .btn-arrow img {
    width: 18px;
    height: 18px;
  }
  .btn-arrow:focus,
  .btn-arrow:active {
    outline: none;
    box-shadow: none !important;
  }
  .bg-gradient-container {
    width: 100%;
    max-width: 358px;
    height: 274px;
    bottom: 94px;
    left: 0;
    position: absolute;
    pointer-events: none;
    z-index: 1;
  }

  .gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 358px;
    height: 285px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 70%);
    z-index: 1;
  }

  .bg-gradient-container img {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 358px;
    height: 200px; /* Оставляем 200px, если нужно сохранить пропорции, или скорректируйте */
    z-index: 0;
    animation: float 20s ease-in-out infinite;
  }
  .btn-container {
    position: absolute;
    width: 358px; /* Соответствует max-width body на моб. версии */
    left: 50%;
    transform: translateX(-50%);
    bottom: 100px; /* Сохраняем исходное значение */
  }
  .section-services h2 {
    margin-bottom: 24px;
  }

  .section-services p {
    margin-bottom: 24px;
  }

  .services-card {
    width: 176px;
    background-color: #f2f2f2;
    border: 1.5px solid #ececec;
    border-radius: 16px;
  }

  .services-card h3 {
    font-size: 14px;
    color: #373737;
    background-color: #fff;
    padding: 14px;
    margin: 6px;
    border-radius: 10px;
  }

  .services-list-container {
    background-color: #fff;
    height: 173px;
    padding: 14px;
    margin: 6px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
  }

  .services-list-container p {
    margin-bottom: 16px;
    font-size: 12px;
  }

  .services-list-container p:last-child {
    margin-bottom: 0;
  }

  .section-services {
    margin-bottom: 100px;
  }

  .jobs-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .job {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .job p {
    font-size: 14px;
  }

  .company-title {
    display: flex;
    align-items: center;
    margin-top: 3px;
  }

  .company-title p {
    color: #373737;
    font-size: 14px;
  }

  .section-experience {
    margin-bottom: 100px;
  }

  /*отзывы*/
  .testimonial-card-container {
    width: 48%; /* Две карточки на ПК */
    max-width: 358px;
    height: 232px;
    margin: 0 auto 24px;
    transform: rotate(0deg);
    padding: 8px;
    background-color: #f2f2f2;
    border: 1.5px solid #ececec;
    border-radius: 20px;
    opacity: 0; /* Начальная прозрачность для анимации */
    transition:
      opacity 0.5s ease,
      transform 0.5s ease; /* Плавный переход */
    position: absolute; /* Для наложения на ПК */
    top: 0;
    left: 0;
    display: none; /* По умолчанию скрыты */
  }

  .testimonial-card-container.active {
    opacity: 1; /* Активная карточка видна */
    display: block; /* Показываем активную */
    transform: translateY(0); /* Без смещения */
  }

  .testimonial-card {
    background-color: #fff;
    height: 100%;
    border-radius: 16px;
    padding: 16px;
  }

  .testimonial-txt {
    font-size: 14px;
    color: #373737;
    height: auto;
    margin-bottom: 24px;
  }

  .client-info-container {
    gap: 12px;
    margin-top: 16px;
  }

  .client-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #7a7a7a;
  }

  .client-photo img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .circle-testimonial {
    width: 4px;
    height: 4px;
    background-color: #7a7a7a;
    border-radius: 50%;
  }

  .client-job-container {
    gap: 6px;
  }

  .content-container {
    position: relative; /* Для позиционирования на ПК */
    height: 232px;
    padding: 0;
    gap: 24px;
    margin-top: 24px;
    overflow: hidden; /* Скрываем лишние на ПК */
  }

  .slider-container {
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
    position: relative;
    height: 40px;
    padding: 0 70px;
  }

  .btn-arrow-slider {
    width: 40px;
    height: 40px;
    border: 1px solid #f5f5f5;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }

  .btn-arrow-slider img {
    width: 20px;
    height: 20px;
  }

  .slider-pages-container {
    gap: 6px;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
  }

  .slider-page {
    width: 8px;
    height: 8px;
    background-color: #e4e4e4;
    border-radius: 50%;
    transition:
      background-color 0.3s ease,
      transform 0.3s ease;
  }

  .active-page {
    background-color: #5c5c5c;
    transform: scale(1.2);
  }

  @media (max-width: 700px) {
    .testimonial-card-container {
      width: 100%; /* Одна карточка на телефоне */
      max-width: 358px;
      position: static; /* Убираем наложение */
      opacity: 1; /* Без анимации */
      transform: translateY(0); /* Без смещения */
      display: none; /* Управляем через display */
    }

    .testimonial-card-container.active {
      display: block; /* Показываем активную */
      opacity: 1; /* Без анимации */
    }

    .content-container {
      flex-direction: column; /* Вертикальный стек */
      height: auto; /* Адаптивная высота */
      overflow: visible; /* Показываем все */
      position: static; /* Убираем позиционирование */
    }
  }

  .citation {
    text-align: center;
  }
  .section-citation {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .cta-gif {
    width: 240px;
    height: 150px;
    background-color: #fff;
    border: 1.5px solid #ececec;
    border-radius: 24px;
    box-shadow:
      0px 79px 22px 0px rgba(0, 0, 0, 0),
      0px 50px 20px 0px rgba(0, 0, 0, 0.01),
      0px 28px 17px 0px rgba(0, 0, 0, 0.03),
      0px 13px 13px 0px rgba(0, 0, 0, 0.04),
      0px 3px 7px 0px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cta-gif img {
    width: 228px;
    height: 138px;
    border-radius: 18px;
  }

  .cta-container p {
    font-size: 13px;
  }

  .cta-btn {
    font-size: 22px;
    color: #373737;
    font-weight: 200;
    text-decoration: none;
    width: 358px;
    display: block;
    margin-top: 12px;
    margin-bottom: 24px;
    transition: color 0.3s ease; /* Плавный переход цвета */
  }
  .links-container2 a img:hover {
    filter: none;
  }

  .cta-gif {
    margin-top: 80px;
  }
  .section-testimonials {
    margin-bottom: 80px;
  }
}