@import 'variables';
.view-list-category {
  .block-title {
    margin-bottom: 60px;
    text-align: center;
    h2 {
      font-style: normal;
      font-weight: bold;
      font-size: 31px;
      line-height: 48px;
      letter-spacing: 0.03em;
      text-transform: capitalize;
      color: #555555;
      font-family: "Nunito", sans-serif;
    }
    p {
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 0.02em;
      color: #B0B0B0;
      font-family: "Nunito", sans-serif;
    }
  }
  .wrapper-category-item {
    border: 1px solid #e2e6ec;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 24px;
    background-color: @text-color-p6;
    height: 300px;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    position: relative;
    overflow: hidden;
    &:hover {
      .layer-blur {
        background-color: rgba(0, 0, 0, 0.5);
      }
    }
    .div-link{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: #666666;
      opacity: 0.3;
      z-index: 5;
    }
    .img-block {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      overflow: hidden;
      div {
        width: 100%;
        height: 100%;
        padding-bottom: calc(100% * 298/378);
        position: absolute;
        img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          object-position: center;
          object-fit: cover;
        }
      }
    }
    h3 {
      font-size: @font-size-large;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 6;
      a{
        color: @text-color-4;
        text-transform: uppercase;
      }
    }
    .layer-content {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      z-index: 6;
      .training{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        bottom: 30px;
        left: 0;
        .list-service {
          margin: 0;
          margin-left: 20px;
          li {
            display: inline;
            padding: 0;
            margin-left: 0;
            float: left;
            &+li {
              margin-left: -14px;
            }
            .service-image {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              border: 2px solid #ffffff;
              transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
              &:hover{
                transform: scale(1.2);
              }
            }
          }
        }
        p{
          background-color: @text-color-p7;
          padding: 5px 15px;
          color: @text-color-4;
          position: relative;
          border-radius: 25px 0px 0px 25px;
        }

      }
    }
  }
}
