@include responsive_320
  .bl-service
    margin: 0!important
    padding-top: 25px
    padding-bottom: 0
    background-color: $gray-color
    >.container
      padding-bottom: 25px
    .gray
      .service-row
        .item
          .content
            .image
              .image-svg
                img
            .title
          &.fake-active
            .title:before
          &:hover,&.active
            .title:before
    .service-tabs
      .item
  .mobile-service
    .collapseTitle[aria-expanded="true"]
      .title
        &:before
          transform: rotateZ(90deg) scale(.7)

    .collapseTitle
      display: flex
      padding: 15px
      background-color: white
      position: relative
      cursor: pointer
      .image
        width: 54px
        flex: 0 0 54px
      .title
        &:before
          -webkit-transition: all 0.4s ease
          -moz-transition: all 0.4s ease
          -ms-transition: all 0.4s ease
          -o-transition: all 0.4s ease
          transition: all 0.4s ease
          content: ''
          display: block
          width: 31px
          height: 31px
          background: url("../img/arrow.png") no-repeat 100%
          position: absolute
          right: 20px
          transform: rotateZ(0) scale(.7)
    .card-body
      background-color: $primary-color
  .bl-trend
    background-color: $gray-color
  .service-detail
    .title
      margin-left: 0
      div:first-child
        padding-left: 0
        font-size: 30px
    margin-bottom: 0!important
@include responsive_375
  .bl-service
    margin: 0!important
    padding-top: 25px
    padding-bottom: 0
    background-color: $gray-color
    >.container
      padding-bottom: 25px
    .gray
      .service-row
        .item
          .content
            .image
              .image-svg
                img
            .title
          &.fake-active
            .title:before
          &:hover,&.active
            .title:before
    .service-tabs
      .item
  .mobile-service
    .collapseTitle[aria-expanded="true"]
      .title
        &:before
          transform: rotateZ(90deg) scale(.7)

    .collapseTitle
      display: flex
      padding: 15px
      background-color: white
      position: relative
      cursor: pointer
      font-size: 25px
      line-height: 35px
      .image
        width: 75px
        flex: 0 0 75px
      .title
        &:before
          -webkit-transition: all 0.4s ease
          -moz-transition: all 0.4s ease
          -ms-transition: all 0.4s ease
          -o-transition: all 0.4s ease
          transition: all 0.4s ease
          content: ''
          display: block
          width: 31px
          height: 31px
          background: url("../img/arrow.png") no-repeat 100%
          position: absolute
          right: 20px
          transform: rotateZ(0) scale(.7)
    .card-body
      background-color: $primary-color
  .bl-trend
    background-color: $gray-color
    margin-bottom: 0!important
  .service-detail
    .title
      margin-left: 0
      div:first-child
        padding-left: 0
        font-size: 35px
@include responsive_425
  .bl-service
    margin: 0!important
    padding-top: 25px
    padding-bottom: 0
    background-color: $gray-color
    >.container
      padding-bottom: 25px
    .gray
      .service-row
        .item
          .content
            .image
              .image-svg
                img
            .title
          &.fake-active
            .title:before
          &:hover,&.active
            .title:before
    .service-tabs
      .item
  .mobile-service
    .collapseTitle[aria-expanded="true"]
      .title
        &:before
          transform: rotateZ(90deg) scale(.7)

    .collapseTitle
      display: flex
      padding: 15px
      background-color: white
      position: relative
      cursor: pointer
      font-size: 25px
      line-height: 35px
      .image
        width: 75px
        flex: 0 0 75px
      .title
        &:before
          -webkit-transition: all 0.4s ease
          -moz-transition: all 0.4s ease
          -ms-transition: all 0.4s ease
          -o-transition: all 0.4s ease
          transition: all 0.4s ease
          content: ''
          display: block
          width: 31px
          height: 31px
          background: url("../img/arrow.png") no-repeat 100%
          position: absolute
          right: 20px
          transform: rotateZ(0) scale(.7)
    .card-body
      background-color: $primary-color
  .bl-trend
    background-color: $gray-color
    margin-bottom: 0!important
  .service-detail
    .title
      margin-left: 0
      div:first-child
        padding-left: 0
        font-size: 35px

@include responsive_768
  .bl-service
    margin: 0!important
    padding-top: 25px
    padding-bottom: 0
    background-color: $gray-color
    >.container
      padding-bottom: 25px
    .gray
      .service-row
        .item
          .content
            .image
              .image-svg
                img
            .title
          &.fake-active
            .title:before
          &:hover,&.active
            .title:before
    .service-tabs
      .item
  .mobile-service
    .collapseTitle[aria-expanded="true"]
      .title
        &:before
          transform: rotateZ(90deg) scale(.7)

    .collapseTitle
      display: flex
      padding: 15px
      background-color: white
      position: relative
      cursor: pointer
      font-size: 25px
      line-height: 35px
      .image
        width: 75px
      .title
        &:before
          -webkit-transition: all 0.4s ease
          -moz-transition: all 0.4s ease
          -ms-transition: all 0.4s ease
          -o-transition: all 0.4s ease
          transition: all 0.4s ease
          content: ''
          display: block
          width: 31px
          height: 31px
          background: url("../img/arrow.png") no-repeat 100%
          position: absolute
          right: 20px
          transform: rotateZ(0) scale(.7)
    .card-body
      background-color: $primary-color
  .bl-trend
    background-color: $gray-color
    margin-bottom: 0!important
  .service-detail
    .image-svg
      max-height: 64px
    .title
      margin-left: 0

@include responsive_992
  .bl-service
    .gray
      .service-row
        height: 250px
        .item
          .content
            .title
              padding: 20px
              font-size: 18px
              div:first-child
                font-size: 40px
                font-weight: bold
                padding: 0 5px
          &:hover,&.active
            .title:before
              width: 200px
              height: 190px
              left: -40px
              bottom: -85px
    .service-tabs
      .item
        padding: 100px 0
  .service-detail
    .image-svg
      max-height: 96px
    .title
      font-size: 25px
      margin-left: -26px
      div:first-child
        font-size: 40px
        font-weight: bold
        padding: 0 5px

@include responsive_1024
  .bl-service
    .gray
      .service-row
        height: 250px
        .item
          .content
            .title
              padding: 25px
              font-size: 20px
              div:first-child
                font-size: 40px
                font-weight: bold
                padding: 0 10px
          &:hover,&.active
            .title:before
              width: 200px
              height: 190px
              left: -40px
              bottom: -85px
    .service-tabs
      .item
        padding: 100px 0
  .service-detail
    .image-svg
      max-height: 97px
    .title
      font-size: 25px
      margin-left: -26px
      div:first-child
        font-size: 40px
        font-weight: bold
        padding: 0 5px

@include responsive_1200
  .bl-service
    .gray
      .service-row
        height: 320px
        .item
          .content
            .title
              padding: 25px
              font-size: 24px
              div:first-child
                font-size: 40px
                font-weight: bold
                padding: 0 10px
          &:hover,&.active
            .title:before
              width: 270px
              height: 210px
              left: -51px
              bottom: -85px
    .service-tabs
      .item
        padding: 100px 0
  .service-detail
    .image-svg
      max-height: 121px
    .title
      font-size: 25px
      margin-left: -42px
      div:first-child
        font-size: 40px
        font-weight: bold
        padding: 0 10px

@include responsive_1400
  .bl-service
    .gray
      .service-row
        .item
          .content
            .title
              padding: 25px
              font-size: 24px
              div:first-child
                font-size: 50px
                font-weight: bold
                padding: 0 10px
          &:hover,&.active
            .title:before
              width: 270px
              height: 210px
              left: -76px
              bottom: -85px
    .service-tabs
      .item
        padding: 100px 0

  .service-detail
    .image-svg
      max-height: 121px
    .title
      font-size: 25px
      margin-left: -42px
      div:first-child
        font-size: 50px
        font-weight: bold
        padding: 0 10px

@include responsive_mobile
  .mobile-service
    .collapseTitle
      border-bottom: 1px solid #efefef