@import 'variables';
.nb-woobooking-front-end {
  .view-list-category {
    .title {
      text-align: center;
      font-weight: @font-weight-bold;
      text-transform: uppercase;
      margin-bottom: 10px;
      color: @text-color-p7;
    }
    .des{
      text-align: center;
      font-size: @font-size-medium;
      color: @text-color-2;
      margin-bottom: 47px;
    }
    .wrapper-category-item {
      border: 1px solid #e2e6ec;
      border-radius: @border-radius-base;
      cursor: pointer;
      margin-bottom: 24px;
      background-color: @text-color-p6;
      height: 300px;
      transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
      position: relative;
      &:hover {
        .layer-blur {
          background-color: rgba(0, 0, 0, 0.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;
          }
        }
      }
      .layer-blur {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        background-color: rgba(5, 4, 57, 0.4);
        transition: all 0.3s cubic-bezier(.25, .8, .25, 1)
      }
      .layer-content {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        h3 {
          font-size: @font-size-large;
          text-align: center;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          a{
            color: @text-color-4;
            text-transform: uppercase;
          }
        }
        .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: 3px 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;
          }

        }
      }
    }
  }
}
