section.productsHome
  // @include spaceSection
  // background: linear-gradient(0deg, rgba(157, 157, 157, 1) 0%, rgba(255, 255, 255, 1) 100%)
  padding: 20% 0 80%
  background-position: bottom
  background-repeat: no-repeat
  background-size: cover
  @media (min-width: 768px)
    padding: 10% 0 35%
  @media (min-width: 1024px)
    padding: 8% 0 30%
  @media (min-width: 1280px)
    padding: 6% 0 30%
  @media (min-width: 1600px)
    padding: 5% 0 25%
  .container
    align-items: center
    @media (min-width: 1280px)
      width: 75%
    @media (min-width: 1366px)
      width: 70%
    @media (min-width: 1900px)
      width: 65%
    @media (max-width: 780px)
      width: 100%
    h1, h1 span, p
      color: $white
    h1
      //text-transform: uppercase
      span
        font-weight: 400
        font-size: 24px
    p
      margin: .5rem 0 2rem
      text-align: center
      @media (min-width: 768px)
        width: 80%
        margin: .5rem 0 3rem
      @media (min-width: 1024px)
        width: 80%
      @media (min-width: 1280px)
        width: 80%
        margin: .5rem 0 4rem
      @media (max-width: 780px)
        padding: 0% 7%
    h1, h1 span
      @media (min-width: 1024px)
        font-size: 26px
      @media (min-width: 1440px)
        font-size: 28px
      @media (min-width: 1600px)
        font-size: 30px
  .container .itemList
    width: 100%
    gap: 1.5rem 0
    /*
      display: grid
      grid-template-columns: repeat(4, 1fr)
    /*
      @media (max-width: 1200px)
        grid-template-columns: repeat(3, 1fr)
      @media (max-width: 900px)
        grid-template-columns: repeat(2, 1fr)
      @media (max-width: 768px)
        grid-template-columns: repeat(1, 1fr)
      @media (min-width: 768px)
        flex-direction: row
        justify-content: space-between
        gap: 0 1.5rem
      @media (min-width: 1024px)
        gap: 0 5%
      @media (min-width: 1366px)
        gap: 0 4%
    .div
      padding: 0% 2%
    .item
      background-color: $backColor
      border-radius: 25px
      padding: 1rem
      gap: 0 10%
      align-items: center
      margin-bottom: 10%
      @media (max-width: 900px)
        //margin-bottom: 0%
        //display: block !important
      img
        width: 50%
        max-width: 121px
        border-radius: 20px
        height: 200px
        @media (max-width: 900px)
          max-width: 100%
          width: 100%
        @media(min-width: 768px)
          width: 100%
          max-width: 250px
          @media (min-width: 1366px)
            max-width: 500px
      .div_a
        gap: 1.5rem 0
        span
          font-size: 16px
          // height: 3em
          color: $textColor
          font-weight: 700
          //text-transform: uppercase
      flex-direction: column
      gap: 1rem 0
      img
        width: 100%
      .div_a 
        width: 100%
        flex-direction: row
        align-items: center
        justify-content: space-between
        gap: 0 1rem
        span
          font-size: 15px
      @media (min-width: 1024px)
        padding: 1.2rem
        .div_a span
          font-size: 17px
      @media (min-width: 1280px)
        transition: all .6s ease
        .div_a
          gap: 0 30%
        &:hover
          transform: scale(1.04)
          .div_a span
            color: $yellow
          .div_a svg path
            fill: $yellow
      .div_a span
        font-size: 16px
        height: 70px
        @media (max-width: 780px)
          height: 50px
  h2
    width: 100%
    font-size: 24px
    text-align: center
    padding: 2% 0%
    color: #fff
    font-weight: 400
    margin-top: 15%
    margin-bottom: 10%
    @media (min-width: 980px)
      margin-top: 0%
      margin-bottom: 0%
      width: 50%
      font-size: 22px
  .button_contact
    background-color: $yellow
    align-items: center
    padding: 1rem 1.5rem
    border-radius: 30px
    gap: 0 .5rem
    transition: all .3s
    box-shadow: 0px 13px 27px -5px rgba(50,50,93,0.25) , 0px 8px 16px -8px rgba(0,0,0,0.3) , 0px -6px 16px -6px rgba(0,0,0,0.025) 
    font-weight: 700
    &:hover
      cursor: pointer
    span
      color: $textColor
    @media (min-width: 1280px)
      &:hover
        gap: 0 .8rem
  .slick-dots
    list-style-type: none
    display: flex
    justify-content: center
    align-items: center
    position: relative
    z-index: 1
    margin: -1.5rem 0 0
    padding-top: 4%
    @media (max-width: 700px)
      //padding-top: 10%
    li
      border-radius: 100%
      width: 10px
      height: 10px
      background: $white
      margin-right: 10px
      transition: .3s
      border-radius: 5px
      &:hover
        cursor: pointer
      button
        visibility: hidden
        &:hover
          cursor: pointer
    .slick-active
      width: 25px
      height: 6px
      border-radius: 8px
      background: $white