.proof-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 50px 0;
    background: #ffffff;
    gap: 50px;
}

/* Large devices (laptops/desktops, 992px and below) */
@media only screen and (max-width: 992px) {
    .proof-bar {
        justify-content: space-around
    }
}

/* Large devices (mobiles/tablets, 767px and below) */
@media only screen and (max-width: 767px) {
    .proof-bar {
        flex-direction: column;
        gap: 10px;
    }
}

.proof-bar__item {
   width: 280px;
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
}

.proof-bar__item > .proof-bar__title {
   margin: 0;
   text-transform: uppercase;
   text-align: center;
}

.proof-bar__item > .proof-bar__content {
   margin: 0;
   text-transform: uppercase;
   text-align: center;
}

/* Large devices (mobiles/tablets, 767px and below) */
@media only screen and (max-width: 767px) {
    .proof-bar__item {
        margin: 30px 0;
    }
}

.proof-bar__separator {
  display: inline-block;
  width: 1px;
  height: 150px; /* or however tall you want the separator */
  background-color: #999;
  margin: 0 8px;
  vertical-align: middle;
}

.proof-bar__title {
  color: #167dbc; /* A nice standard blue — adjust as needed */
}

@media only screen and (max-width: 767px) {
  .proof-bar__separator {
    width: 60%;
    height: 1px;
    background-color: #999;
    margin: 20px auto;
  }
}

@media only screen and (max-width: 992px) and (min-width: 768px) {
  .proof-bar {
    gap: 40px; /* Reduce spacing between items */
    padding: 40px 20px; /* Optional: reduce top/bottom padding slightly */
  }

  .proof-bar__separator {
    display: none; /* Optional: hide vertical lines if they look odd */
  }
}


.proof-bar__item {
    position: relative;
    overflow: hidden; /* Keeps the effect contained */
    transition: transform 0.3s ease;
    cursor:default;
}

.proof-bar__item:hover {
   /* transform: translateY(-5px); /* Optional: gives a slight lift on hover */
}

.proof-bar__item::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -45%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg);
    opacity: 0;
    pointer-events: none;
}

.proof-bar__item:hover::before {
    animation: shine 0.75s ease-out;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) rotate(25deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%) rotate(25deg);
        opacity: 0;
    }
}