.starboard_group_hero_revamped
  background: transparent linear-gradient(77deg, #1C0F1F 0%, #3A1745 48%, #92278F 100%) 0% 0% no-repeat padding-box
  padding: 3rem 0 2rem 0
  @include tablet
    padding: 9rem 0 2rem 0 !important
  @include phone
    padding: 6rem 0 0rem 0
  .row
    align-items: center
  .starboard_group_hero_revamped_image
    width: 100%
    img
      width: 100%
  .starboard_group_hero_revamped_description
    padding-right: 1rem
    ul
      list-style: none
      display: flex
      align-items: center
      justify-content: space-between
      width: 100%
      padding-left: 0 !important
      @include phone
        flex-wrap: wrap !important
      li
        width: 24%
        position: relative
        @include phone
          width: 100%
          margin-bottom: 1rem
          padding-bottom: 1rem
          border-bottom: 1px solid #E3E3E3
        &:nth-child(2)
          &::before
            left: -2rem !important
        &:nth-child(3)
          &::before
            left: -1.5rem !important
        &:nth-child(4)
          &::before
            left: -2rem !important
        &:nth-child(1)
          &::before
            display: none !important
        &::before
          content: ''
          width: 1px
          height: 100%
          background: #E3E3E3
          display: block
          position: absolute
          top: 0
          left: 0
          @include phone
            display: none !important
        p
          font-size: 1.2rem
          color: #ffffff
          margin-top: 0
          margin-bottom: .5rem !important
        h3
          font-size: 1.2rem
          color: #FF17A2
          margin: 0
          font-weight: 600
    p
      font-size: 1.2rem
      color: #ffffff
      margin-bottom: 3rem !important
      @include phone
        margin-bottom: 1rem !important
      @include desktop
        margin-bottom: 2rem !important
    h1
      font-size: 2.875rem
      font-weight: 700
      color: #fff
      margin-top: 0 !important
      margin-bottom: 1rem
      @include phone
        font-size: 2.2rem
      @include desktop
        font-size: 2.5rem !important
.key_takeaways_revamped
  margin-top: 5rem
  @include phone
    .col-md-4
      margin-bottom: 1.5rem
  .key_takeaways_revamped_common
    background: #493A6C 0% 0% no-repeat padding-box
    border-radius: 20px
    padding: 3rem 2rem
    height: 100%
    position: relative
    align-content: center
    img
      height: 10rem
      position: absolute
      right: 0
      bottom: 0
    p
      font-size: 1.5rem
      font-weight: 500
      color: #ffffff
      margin: 0 !important
  h2
    font-size: 1.8rem
    font-weight: 600
    color: #14141F
    margin-top: 0 !important
    margin-bottom: 3rem
    text-align: center
    @include desktop
      font-size: 1.5rem
      margin-block: .5rem

.features_and_challenges_main
  @include phone
    padding: 0 12px
  h2
    font-size: 1.1rem
    color: #14141F
    margin-top: 2rem
    margin-bottom: 2rem
    font-weight: 400
    @include phone
      font-size: 1.2rem !important
      line-height: 1.5 !important
  .revamped_bg_only
    background: #F7F6FB 0% 0% no-repeat padding-box !important
    border-radius: 20px
    border: 0 !important
    @include phone
      border-radius: 12px
  .features_and_challenges_common
    background: #FFFFFF 0% 0% no-repeat padding-box
    border: 1px solid #70707060
    border-radius: 20px
    padding: 2rem
    margin-bottom: 2rem
    @include phone
      padding: 1rem
      border-radius: 12px
    &:hover
      h3
        &::before
          width: 40%
          @include phone
            display: none
    .quote_section
      background: #f5f5f5 0% 0% no-repeat padding-box
      border: 1px solid #70707060
      border-radius: 20px
      padding: 1.3rem
      margin-top: 2rem
      display: flex
      @include phone
        padding: 1rem
        border-radius: 12px
      .quote_description
        width: 89%
        @include phone
          width: 100%
      .quote_section_icon
        width: 10%
        text-align: right
        @include phone
          display: none
        img
          width: 50%
      h4
        font-size: 1.2rem
        font-weight: 600
        margin: 0 !important
        color: #9B3698
      p
        font-size: 1.5rem
        color: #14141F
        margin-top: 0
        margin-bottom: 1rem
    h3
      font-size: 1.8rem
      font-weight: 600
      color: #14141F
      margin-top: 0 !important
      margin-bottom: 3rem
      position: relative
      transition: .4s ease-in-out
      width: fit-content
      &::before
        content: ''
        display: block
        height: 4px
        width: 0%
        background: #9B3698
        position: absolute
        left: 0
        bottom: -1rem
        transition: .4s ease-in-out
        @include phone
          width: 50%
    p
      font-size: 1.1rem
      color: #14141F
      margin: 0
      font-weight: 400






// ADD ONS PAGE SASS STARTS



.add_ons_integrations_hero_revamped
  padding: 6rem 0 12rem 0 !important
  @include tablet
    padding: 9rem 0 12rem 0 !important
  .col-lg-12
    width: 60%
    margin: 0 auto
    text-align: center
    @include phone
      width: 100%
    .col-lg-5,
    .col-lg-7
      width: 100% !important
      @include phone
        padding: 0 !important
.addons_fearture_revamped
  .col-lg-12
    margin-top: -10rem
  .col-md-3
    margin-bottom: 1.5rem
    @include tablet
      width: 49% !important
  .addons_fearture_revamped_common
    background: #FFFFFF 0% 0% no-repeat padding-box
    box-shadow: 0px 3px 16px #00000029
    border-radius: 18px
    padding: 1rem
    height: 100%
    display: flex
    flex-direction: column
    justify-content: space-between
    .clover_revamped_icon
      img
        width: 60% !important
    .icon_and_btn
      display: flex
      align-items: center
      @include phone
        margin-top: 1rem !important
      a
        width: 67%
        display: flex
        align-items: center
        justify-content: flex-end
        font-size: 1rem
        font-weight: 600
        color: #92278F
        text-decoration: none
        transition: .4s ease-in-out
        span
          width: 12px
          height: 12px
          display: inline-flex
          margin-left: .5rem
          img
            width: 100%
            height: 100%
      .icon_only
        width: 32%
        height: 100%
        img
          width: 100%
          height: 100%
          object-fit: contain !important
    p
      font-size: 1.2rem
      color: #14141F
      margin-bottom: 3rem !important
      @include phone
        margin-bottom: 1rem !important
      @include desktop
        margin-bottom: 2rem !important
    h2
      font-size: 1.8rem
      font-weight: 600
      color: #14141F
      margin-top: 0 !important
      margin-bottom: 1rem
      @include desktop
        font-size: 1.5rem