:root {
    --blue: #1C6799;
    --mainbg: #f1f1f1;
    --gray: #e3e3e3;
    --gray2:#455A64;
    --granat: #F34723;
}
.tarif_shape {
    border-radius: 24px 24px 0px 0px;
    background-color:var(--mainbg);
}


.box {
  width: 200px;
  height: 100px;
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: clip-path 0.3s ease;
}

.box:hover {
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 80%);
}


/* Контейнер для ограничения области */
.clip-path-container {
  width: 100%;
  height: 400px; /* Подстройте под ваш дизайн */
  overflow: hidden;
}

/* Стили для изображения */
.clip-path-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); /* Начальное состояние (прямоугольник) */
  transition: clip-path 1.5s ease;
}

/* Анимация при наведении */
.clip-path-container:hover .clip-path-image {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); /* Схлопывание в точку */
}

/* Альтернатива: круговая анимация */
.clip-path-image.circle {
  clip-path: circle(0% at 50% 50%);
}
.clip-path-container:hover .clip-path-image.circle {
  clip-path: circle(75% at 50% 50%);
}