.hover-underline-animation2 {
      position: relative;
    }

    .hover-underline-animation2::after {
      content: '';
      position: absolute;
      width: 100%;
      transform: scaleX(0);
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: #187f1f;
      transition: transform 0.25s ease-out;
    }

    .hover-underline-animation2:hover::after {
      transform: scaleX(1);
    }

    .hover-underline-animation2.left::after {
      transform-origin: bottom right;
    }

    .hover-underline-animation2.left:hover::after {
      transform-origin: bottom left;
    }


    .img-cont {
      position: relative;
    }

    .img-kat {
      opacity: 1;
      display: block;
      width: 100%;
      height: auto;
      transition: .5s ease;
      backface-visibility: hidden;
    }

    .middle {
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 10%;
      width: 100%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
    }

    .img-cont:hover .middle {
      opacity: 1;
    }
    .text {
      background-color: var(--light);
      color: var(--primary);
      font-size: 12px;
      padding: 16px 32px;
    }

    .premium-banner-middle {
      transition: .5s ease;
      opacity: 1;
      position: absolute;
      top: 10%;
      width: 97%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
      border-top: 3px solid black;
      border-bottom: 3px solid black;
    }

    .premium-banner-text {
      background-color: rgba(226, 201, 96, 0.65);
      color: #252427;
      font-size: 24px;
      padding: 8px 32px;
      transition: transform .5s;
    }

    .premium-banner-text:hover {
      background-color: rgba(226, 201, 96, 1);
      text-decoration: underline;
      font-weight: bold;
      transform: scale(1.15);
    }