section {
  &.landing-services {
    margin-top: $sizeLarge;
    position: relative;
    border: none;
    //margin-bottom: 200px;
    background-color: $themePrimary;
    padding-bottom: $sizeLarge*2;
    overflow: hidden;

    .heading-graphic {
      color: $themeBlack;
    }

    .content {
      padding-top: $sizeLarge*3;
    }

    h2 {
      position: relative;
      bottom: unset;
      color: $themeWhite;
      text-align: center;
      @include media-breakpoint-down(md) {
        text-align: center;
      }
    }

    .intro {
      p {
        padding-top: $sizeMedium;
        text-align: center;
        color: $themeWhite;
        width: 80%;
        // margin-left: auto;
        margin: auto auto $sizeLarge auto;
        @include media-breakpoint-down(md) {
          text-align: center;
          width: 100%;
          text-align: center;
          padding-right: 10px;
          padding-left: 10px;
        }
      }
    }

    &:before {
      bottom: 0;
      right: 10px;
      height: calc(100% + 80px);
      width: 60px;
      background-color: $themeSecondary;
      opacity: 1;
    }

    &:after {
      bottom: 100%;
      right: 10px;
      height: 80px;
      width: 60px;
      background-color: $themeSecondary;
    }
  }
}

.landing-service-outer {
  width: 90%;
  margin: auto;

  .service-boxes {
    list-style: none;
    margin: $sizeLarge 0 0 0;
    padding: 0;

    h5 {
      color: $themeSecondary;
      font-size: 1.3em;
      text-transform: uppercase;
      text-align: center;
      padding: 0;
      margin: 0;
      @include media-breakpoint-up(sm) {
        font-size: 1.6em;
      }
      @include media-breakpoint-up(xxl) {
        font-size: 1.8em;
      }
    }

    justify-content: space-between;

    .service-box-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      @include media-breakpoint-up(sm) {
        align-items: center;
      }
    }

    &:hover {
      .service-box {
        &.active {
          &:after {
            opacity: 0;
          }

          .service-circle {
            background-color: $themeWhite;

            h5 {
              color: $themePrimary;
            }
          }

          article {
            opacity: 0;
          }

          button {
            opacity: 0;
          }
        }
      }
    }

    .service-box {
      width: 100%;
      padding-top: $sizeMedium;
      padding-bottom: $sizeMedium;
      position: relative;
      z-index: 1;
      transition: background ease-in .6s;
      cursor: pointer;
      @include media-breakpoint-down(sm) {
        padding-left: 0;
        padding-right: 0;
      }
      @include media-breakpoint-up(sm) {
        padding-bottom: 50px;
        &:hover, &.active {
          &:after {
            opacity: 1;
          }
          &:hover{
            &:after{
              opacity: 1;
            }
            .service-circle {
              background-color: $themePrimary;

              h5 {
                color: $themeWhite;
              }
            }
            article {
              transform: translateY(30px);
              opacity: 1;
            }
          }

          .service-circle {
            background-color: $themePrimary;

            h5 {
              color: $themeWhite;
            }
          }

          article {
            transform: translateY(30px);
            opacity: 1;
          }

          button {
            transform: translateY(70px);
            opacity: 1;
          }
        }
        &:hover {
          article {
            transition: transform ease-in .3s, opacity ease-in .3s .1s;
          }

          button {
            transition: transform ease-in .3s .1s, opacity ease-in .3s .2s;
          }
        }
      }

      @media (min-width: 1921px) {
        padding-bottom: 100px;
      }

      &:after {
        content: '';
        width: 600px;
        height: 600px;
        background-color: $themeWhite;
        border-radius: 50%;
        position: absolute;
        opacity: 0;
        left: -15%;
        top: -10%;
        transition: opacity ease-in .4s;
        @media (min-width: 1921px) {
          height: 900px;
          width: 900px;
        }
      }
    }

    .service-circle {
      padding: 0;
      flex-basis: 100px;
      margin: 0;
      flex-grow: 0;
      flex-shrink: 0;
      width: 100px;
      height: 100px;
      background-color: $themeWhite;
      border: 4px solid $themePrimary;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;

      @include media-breakpoint-up(sm) {
        width: 150px;
        height: 150px;
        flex-basis: 150px;
      }
      @include media-breakpoint-up(lg) {
        width: 120px;
        height: 120px;
        flex-basis: 120px;
      }
      @include media-breakpoint-up(xxl) {
        width: 140px;
        height: 140px;
        flex-basis: 140px;
      }
    }

    article {
      width: 100%;
      padding: $sizeLarge + $sizeMedium $sizeSmall $sizeMedium $sizeSmall;
      text-align: justify;
      background-color: $themeWhite;
      margin-top: -$sizeLarge - $sizeSmall;
      border-radius: 10px;
      @include media-breakpoint-up(sm) {
        margin-top: 0;
        background-color: transparent;
        width: 130%;
        opacity: 0;
        transition: transform ease-in .6s, opacity ease-in .6s .1s;
        z-index: 1;
        padding: $sizeSmall;
      }
      @media (min-width: 1921px) {
        width: 110%;
      }
    }

    button {
      opacity: 0;
      transition: transform ease-in .6s, .1s, opacity ease-in .6s .2s;
      z-index: 1;
    }

    p {
      padding: 0 $sizeMedium;
      @include media-breakpoint-down(md) {
        padding: 0;
      }
    }
  }

  .service-item-content {
    min-height: 150px;
    padding: $sizeMedium;
    text-align: center;

    * {
      color: $themeWhite !important;
    }
  }
}