@include responsive_320
  .bl-clients
    background: $red-color
    margin-top: 0
    padding-top: 25px
    padding-bottom: 25px
    .block-title
      padding: 0 15px
      position: unset
      background: unset
      color: white
      &+div
        position: unset
        top: unset
    .map
      min-height: auto
  .owl-theme .owl-dots .owl-dot.active span
@include responsive_375
  .bl-clients
    background: $red-color
    margin-top: 0
    padding-top: 25px
    padding-bottom: 25px
    .block-title
      padding: 0 15px
      position: unset
      background: unset
      color: white
      &+div
        position: unset
        top: unset
    .map
      min-height: auto
  .owl-theme .owl-dots .owl-dot.active span
@include responsive_425
  .bl-clients
    background: $red-color
    margin-top: 0
    padding-top: 25px
    padding-bottom: 25px
    .block-title
      padding: 0 15px
      position: unset
      background: unset
      color: white
      &+div
        position: unset
        top: unset
    .map
      min-height: auto
  .owl-theme .owl-dots .owl-dot.active span
@include responsive_768
  .bl-clients
    background: $red-color
    margin-top: 0
    padding-top: 25px
    padding-bottom: 25px
    .heading-h2
      color: white
    .block-title
      padding: 0 15px
      position: unset
      background: unset
      color: white
      padding-left: 39px
      &+div
        position: unset
        top: unset
    .map
      min-height: auto
  .owl-theme .owl-dots .owl-dot.active span

$location-heights992: 145px, 137px, 130px, 263px, 173px, 138px, 130px, 86px, 90px
@include responsive_992
  .bl-clients
    .map
      min-height: calc(100vh + 150px)
      background-color: $red-color
      .map-box
        >div
          >div
            .location
              @each $height in $location-heights992
                $i: index($location-heights992, $height)
                &:nth-child(#{$i})
                  height: $height
    .block-title
      top: -33px
      width: 30%
      height: 300px
      &+div
        top: 150px

$location-heights1024: 145px, 137px, 130px, 263px, 173px, 138px, 130px, 86px, 90px
@include responsive_1024
  .bl-clients
    .map
      min-height: calc(100vh + 150px)
      background-color: $red-color
      .map-box
        >div
          >div
            .location
              @each $height in $location-heights1024
                $i: index($location-heights1024, $height)
                &:nth-child(#{$i})
                  height: $height
    .block-title
      top: -30px
      width: 35%
      height: 300px
      &+div
        top: 150px
    .map
      .map-box
        margin-top: 300px

$location-heights1200: 145px, 137px, 135px, 269px, 163px, 122px, 130px, 70px, 90px
@include responsive_1200
  .bl-clients
    .map
      min-height: calc(100vh + 150px)
      background-color: $red-color
      .map-box
        >div
          >div
            .location
              @each $height in $location-heights1200
                $i: index($location-heights1200, $height)
                &:nth-child(#{$i})
                  height: $height
    .block-title
      top: -25px
      width: 36%
      height: 300px
      &+div
        top: 150px

$location-heights1400: 145px, 137px, 155px, 280px, 163px, 122px, 130px, 70px, 90px
@include responsive_1400
  .bl-clients
    margin-top: -210px
    .map
      padding-top: 500px
    .block-title
      top: 35px
      width: 37%
      height: 300px
      &+div
        top: 177px

@include responsive_tablet
  .bl-clients
    .map
      padding-top: 0
      .wrap-carousel
        margin-top: 0
        margin-left: 0
        margin-right: 0
    .owl-carousel-client
      height: 100px
@include responsive_mobile
  .bl-clients
    .heading-h2
      color: white
        margin-top: 0
  .owl-carousel .owl-item img
    width: auto