.header-phone-base {
  /* Базовые стили */
  font-size: 2rem;
  font-weight: 700;
  padding: 1rem 2rem;
  margin: 2.5rem;
  border-radius: 12px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
}
.header-phone {
  /* Базовые стили */
  font-size: 2rem;
  font-weight: 700;
  padding: 1rem 2rem;
  margin: 2.5rem;
  border-radius: 12px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  
  /* Анимация переливания цветов */
  background: linear-gradient(90deg, 
    #ff0000, #ff7300, #fffb00, #48ff00, 
    #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  background-size: 400% 400%;
  
  /* Анимация свечения */
  box-shadow: 0 0 15px rgba(255, 110, 200, 0.8),
             0 0 30px rgba(255, 50, 150, 0.6);
  
  /* Анимация текста */
  color: white;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9),
               0 0 20px rgba(255, 100, 255, 0.7);
  
  /* Плавные переходы */
  transition: all 0.4s ease;
  
  /* Анимации */
  animation: 
    gradient-flow 8s ease infinite,
    pulse-glow 2s ease-in-out infinite alternate;
    
}

.font-size{
  font-size: 36px;
}
/* Анимация градиента */
@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Анимация пульсации свечения */
@keyframes pulse-glow {
  from {
    box-shadow: 0 0 15px rgba(255, 110, 200, 0.8),
                0 0 30px rgba(255, 50, 150, 0.6);
  }
  to {
    box-shadow: 0 0 25px rgba(255, 150, 230, 1),
                0 0 45px rgba(255, 80, 180, 0.8),
                0 0 60px rgba(255, 30, 120, 0.6);
  }
}

/* Эффекты при наведении */
.header-phone:hover {
  transform: scale(1.05);
  animation-play-state: paused;
}


.image-link img {
  display: block;
  width: 100%;
  transition: filter 0.3s ease;
}

.image-link:hover img {
  filter: brightness(0.5); /* Затемняет изображение до 80% яркости */
}

/* Эффекты для мобильных устройств */
@media (max-width: 768px) {
  .header-phone {
    font-size: 2.0rem;
    padding: 0.8rem 1.5rem;
    animation: 
      gradient-flow 10s ease infinite,
      pulse-glow-mobile 1.5s ease-in-out infinite alternate;
  }
  .header-phone-base{
    /*margin-bottom: 0;*/
    margin-top: -55px;
    margin-bottom: 0px;
  }
  
  .font-size{
   font-size: 24px;
  }
  @keyframes pulse-glow-mobile {
    from {
      box-shadow: 0 0 10px rgba(255, 110, 200, 0.8),
                  0 0 20px rgba(255, 50, 150, 0.6);
    }
    to {
      box-shadow: 0 0 20px rgba(255, 150, 230, 1),
                  0 0 35px rgba(255, 80, 180, 0.8);
    }
  }
}