.services__area {
  padding: 0px 0 60px 0;

  &--item {
    position: relative;
    cursor: pointer;
    width: 100%;
    height: 280px;
    overflow: hidden;
    border-radius: 8px;

    img {
      height: 250px;
      width: 100%;
      border-radius: 8px;
      transition: transform ease-in .4s;
    }

    .content {
      position: absolute;
      bottom: 3%;
      left: 0;
      right: 0;
      margin: auto;
      background-color: $c-white;
      border-radius: 8px;
      padding: 16px;
      width: 86%;
      box-shadow: rgba(224, 225, 227, 0.2) 0px 4px 16px;
      h3 {
        font-size: clamp(16px,3vw, 20px);
        font-weight: 600;
        color: $c-second;
        margin-bottom: 0;
        text-align: center;
      }
    }


    &:hover {

      img {
        transform: scale(1.3);
        transition: transform ease-in .4s;
      }

      .content {
        background-color: $c-main;
        h3 {
          color: $c-white;
        }
      }
  
    }

   
  }
}


.formations__area {
  padding: 40px 0;
  &--box {
    background: linear-gradient(
      to top,
      rgba($c-main, .9) 20%,
      rgba($c-second, .99) 45%
    );
    width: 100%;
    height: 260px;
    position: relative;
    display: flex;
    border-radius: 8px;
    overflow: hidden;

    a {
      border-radius: 8px;
    }

    img {
      position: absolute;
      border-radius: 8px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 50%;
      z-index: 1;
      mix-blend-mode: screen;
      transition: transform ease-in .4s;

    }

    .content {
      position: absolute;
      bottom: 6%;
      left: 0;
      right: 0;
      margin: auto;
      h3 {
        font-size: clamp(18px,3vw, 24px);
        font-weight: 700;
        color: $c-white;
        margin-bottom: 0;
        text-align: center;
      }
    }

    &:hover {
      background: linear-gradient(
        to bottom,
        rgba($c-second, 1) ,
        rgba($c-second, 1)
      );
      border-radius: 8px;

      img {
        transform: scale(1.1);
        transition: transform ease-in .4s;
      border-radius: 8px;

      }
    }
  }

  &--item {
    background: $c-main;
    text-decoration: none;
    background: -moz-linear-gradient(
      -45deg,
      rgba($c-main, .1) 0%,
      rgba($c-main, .1) 25%,
      #1e539e 50%,
      #ff3083 75%,
      #7800a8 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
      -45deg,
      rgba($c-main, .1) 0%,
      rgba($c-main, .1) 25%,
      #1e539e 50%,
      #ff3083 75%,
      #7800a8 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      135deg,
      rgba($c-main, .1) 0%,
      rgba($c-main, .1) 25%,
      #1e539e 50%,
      #ff3083 75%,
      #7800a8 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-size: 400% 400%;
    background-repeat: no-repeat;
    display: flex;
    width: 100%;
    height: 260px;
    justify-content: center;
    align-items: center;
    color: #fff;
    position: relative;
    cursor: pointer;
    transition: 0.5s all;
    border-radius: 8px;

    @media (max-width: 991px) {
      margin-bottom: 16px;
    }
    @media (max-width: 591px) {
      margin-bottom: 16px;
    }

    &--img {
      position: absolute;
      border-radius: 8px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 50%;
      z-index: 1;
      opacity: 0.5;
      mix-blend-mode: screen;
    }

    &--content {
      position: relative;
      z-index: 10;
      letter-spacing: 0.05em;
      text-align: center;
      &--title {
        --minFontSize: 16px;
        --maxFontSize: 24px;
        --scaler: 4vw;
        font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
        font-weight: 700;
        line-height: 28px;
        color: $c-white;
        text-transform: uppercase;
      }
    }

    &:hover {
      background-position: 100% 100%;
      &--content {
        &--title {
          text-shadow: 0 0 20px rgba($c-white, 1);
        }
      }
    }
  }
}