.features-hero
  margin-top: 4rem
  .features-hero-text
    max-width: 50%
    @include phone
      max-width: 100%
  img
    width: 530px
    @include phone
      width: 100%

.company-gradient
  @include phone
    margin-bottom: 5rem
.yellow-gradient
  margin-top: -5rem
  height: 140px
  width: 100%
  background: linear-gradient(180deg, #DCD8C9 0%, rgba(234, 234, 234, 0.00) 100%)
  transform: scaleY(-1)
  @include desktop-ls
    margin-top: -7rem
  @include desktop-max
    margin-top: -9rem
    height: 200px
.yellow-gradient-custom
  margin: -5rem 0 5rem
  height: 200px
  width: 100%
  background: linear-gradient(180deg, #DCD8C9 0%, rgba(234, 234, 234, 0.00) 100%)
  transform: scaleX(1)
  z-index: 0
  @include desktop-ls
    margin: -7rem 0 5rem
  @include desktop-max
    margin: -8rem 0 5rem

.company-logo-bounce-3
  width: 104.88px
  height: 104.88px
  background-color: #D9D9D9
  border-radius: 50%
  filter: drop-shadow(0px 3.2629482746124268px 3.2629482746124268px rgba(0, 0, 0, 0.25))
  position: absolute
  &:first-child
    left: 6.5rem
  &:nth-child(2)
    top: 5rem
  &:nth-child(3)
    right: 6.5rem

.second-company-group
  @include phone
    margin-top: 6rem !important

.blue-curved-bg
  position: relative
  background-repeat: no-repeat
  background-size: cover
  height: 33rem
  margin-top: -5rem
  z-index: 1
  @include desktop-ls
    height: 46rem
    margin-top: -7rem !important
  @include phone
    background-image: none
    background-color: #09757c
    height: 100%
    margin-top: 0
  @include desktop-max
    height: 60rem
    margin-top: -10rem !important
.features-points-easy-hero
  width: 400px
  @include phone
    width: 100%
.features-points-easy
  width: 50%
  color: #fff
  text-align: right
  @include phone
    width: 100% !important
    padding: 2rem 1rem
    text-align: center
  h1
    font-size: 2.5rem
    font-weight: 800
  p
   font-size: 1rem
    
.how-it-works
  h2
    color: #58585B
    font-size: 2.2rem
    font-weight: 800
  p
    color: #454545
    font-size: 1rem
    font-weight: 400
  .number-step
    width: 80px
  .how-it-works-text
    width: 60%
    align-items: flex-start
    display: flex
    @include phone
      width: 100%
  .how-it-works-text-alt
    width: 50%
    align-items: flex-start
    display: flex
    @include phone
      width: 100%

.personalize
  width: 38%
  color: #fff
  text-align: left
  @include phone
    width: 100%
    padding: 2rem
  h1
    font-size: 2.5rem
    font-weight: 800
  p
   font-size: 1rem
  img
    @include phone
      width: 100%

.customizable-hero
  width: 500px
  @include phone
    width: 100%
.customizable-text
  width: 45%
  @include phone
    width: 100%
  h1
    @include phone
      text-align: right !important

.accordion-section
  width: 50%
  @include phone
    width: 100%
.accordion-hero
  width: 500px
  @include phone
    width: 100%
.accordion
  margin-bottom: 1rem
  position: relative
  display: flex
  border-radius: 0px 25px
  border: 1px solid #C4C4C4
  background: #E7E7E7
  cursor: pointer
  padding: 18px
  width: 100%
  outline: none
  transition: 0.4s
  h4
    color: #58585B
    font-weight: 500
    font-size: 15px
    text-align: left

.active-accordion
  background-color: #ccc

.accordion
  &:hover
    background-color: #ccc
  &:after
    content: '\002B'
    font-weight: bold
    float: right
    margin-left: 5px

.active-accordion:after
  content: "\2212"

.accordion-panel
  background: #F0F0F0
  border-radius: 15px
  max-height: 0
  overflow: hidden
  transition: max-height 0.2s ease-out
  background: #F0F0F0
  font-size: 13px
  font-weight: 300
  color: #58585B

.features-brand-app-section
  @include phone
    flex-direction: column
.features-brand-app
  width: 40%
  @include phone
    width: 100%

.seamless-pos-section
  img
    width: 500px
    @include phone
      width: 100%
  .seamless-pos-text
    width: 45%
    @include phone
      width: 100%