.features-headline
  text-align: center
  padding: 5rem 0 1rem 0
  h1
    @include phone
      font-size: 41px
    font-size: 48px
  h2
    font-size: 24px
    font-weight: 300

#POS_Terminal
  .hero_banner
    img
      width: 90%
  section
    padding: 0 30px
    text-align: center

  #POS_Terminal_1 .PosT_Itemswrap
    background: #FAFAFA
    border-radius: 2.25rem
    margin-top: 30px
    position: relative
    padding: 30px
    height: 95%
    display: flex
    justify-content: space-between
    align-items: center
    flex-direction: column

    .PosT_ItemImages
      width: 9.375rem
      height: 9.375rem
      background: #FFFFFF
      border-radius: 2.375rem
      align-items: center
      justify-content: center
      display: inline-flex

      img
        max-width: 100%
        height: 100%
        padding: 2.5rem

    .PosT_Items_title
      font-size: 1.875rem
      font-weight: 400
      margin-top: 27px

    .PosT_Items_desc
      margin: 35px 0
      font-weight: 200
      font-size: 1.25rem
      line-height: 1.5

  #POS_Terminal_2
    background: linear-gradient(180deg, #f7f7f7 0%, #f6f6f6 100%)
    border-radius: 2.25rem 0 0 2.25rem
    position: relative
    margin: 3.125rem 1.875rem
    padding: 9.375rem 7rem 5.375rem
    text-align: left
    width: auto
    overflow: hidden
    z-index: 1
    h2
      font-weight: 800
      font-size: 3.125rem
    h3
      font-weight: 500
      font-size: 1.875rem
    picture
      img
        max-width: 100%
        width: 100%

    > .row
      align-items: center
      position: relative
      margin-bottom: 12.5rem

    .btn-link
      padding: 0

    .POST2_Img1
      position: absolute
      right: -70%
      top: 0
      z-index: -1
      display: none

    .POST2_Img2
      position: absolute
      left: -112px
      bottom: 0
      width: 300px
      max-height: 100%
      z-index: -1

    .POST2_Img3
      position: absolute
      right: -71.5%
      bottom: 0
      z-index: -1
      display: none

  #POS_Terminal_3
    text-align: left
    h2
      margin-bottom: 5px
    h4
      margin-bottom: 0
    a
      margin-top: 30px
      padding: 10px 40px
      font-size: 1.2rem
      line-height: unset
      display: inline-flex
      justify-content: center
      align-items: center

    .PT_videoWrap
      background-color: #F8F6F8
      border-radius: 3.375rem
      overflow: hidden
      margin-top: 20px
      backdrop-filter: blur(900px)
      video
        width: 100%
        height: 700px

  #POS_Terminal_5 .POS_Terminal_5BG
    background-color: #FAFAFA
    border-radius: 1.875rem
    padding: 5%

    img
      max-width: 100%

    .POS_Terminal_5_DataWrap
      background-color: #fff
      border-radius: 2.875rem
      padding: 10%
      height: 100%
      display: flex
      flex-direction: column
      justify-content: center

      p
        font-weight: '200'
        font-size: 1.25rem
        margin: 8% 0 20%
        letter-spacing: 1.5px

      .POS_Terminal_5_DataPrice
        font-style: normal
        font-weight: 700
        font-size: 3.75rem
        width: auto
        padding-right: 50px
        line-height: 1.2

      .btn_purple_gradient
        width: 100%
        font-size: 2.3rem
        font-style: normal
        font-weight: 700

      .btn_outline_black
        width: 100%
        font-size: 1.875rem
        margin-top: 25px
#POS_Terminal_2        
  .part-one
    height: 70vh
  .part-two
    height: 70vh
  .part-three
    height: 70vh
#POS_Terminal_animate
  margin-top: 5em

.pos-hero-animate
  width: 400px
  height: 400px
  margin-top: -50px
  @include phone
    width: 100%

#plum
  z-index: 2

.happier_customers_wrap
  .customize_menu
    background-color: #F4F2F0
    position: relative
    margin-bottom: 5rem
    margin-top: 5rem
    max-width: 1920px
    margin-left: auto
    margin-right: auto
    padding: 4rem 0
    .customize_menu_wrap
      .customize_menu1
        margin-top: -8rem
        z-index: 1
        max-width: 95%
        position: relative
      .customize_menu_bg
        position: absolute
        bottom: -8rem
        right: -4rem

    .customize_menu_wrap2
      text-align: right
      .customize_menu2
        margin-bottom: -8rem
        z-index: 1
        max-width: 95%
        position: relative
      .customize_menu_bg2
        position: absolute
        top: -8rem
        left: -4rem
    img
      max-width: 100%
      transition: 0.3s
      &:hover 
        transform: scale(1.05)
  
    @include tablet
      height: auto !important
      .hero-image2
        width: 100%
        img
          width: 100%      
      .hero-image
        width: 100%
        img
          width: 100%
    @include phone
      height: auto !important
      padding: 0 12px
      .hero-image
        width: 100%
        img
          width: 100%
      .hero-image2
        width: 100%
        img
          width: 100% 
  h2
    margin-bottom: 4rem
    span
      font-style: italic
      font-family: "DM Serif Display", serif
      font-weight: normal
    .row
      height: 100%
    .hero-image
      position: absolute
      bottom: 0
    .hero-image2
      position: absolute
      top: 0
  .happier_customers
    @include phone
      padding: 0 12px
      .text-center
        color: #92278F !important
    img
      max-width: 100%
      border-radius: 10px
      @include phone
        width: 100% !important
        max-width: auto !important
    .row
      align-items: stretch
    .col-md-4
      display: flex
      justify-content: center
      align-items: center
      @include phone
        margin-bottom: 2rem
        &:nth-child(3)
          img
            width: 88% !important
    .hc_middle
      background-color: #92278F
      border-radius: 10px
      padding: 15px
      text-align: center
      height: 90%
      color: #fff
      display: flex
      align-items: center
      justify-content: center
      flex-direction: column
      h2
        font-size: 2rem
.features__container 
  .feature
    .main_svg
      width: auto
      svg
        height: 2.6rem
        width: auto
        margin-bottom: -7px
    @include tablet
      flex-direction: column !important 
      .main_svg
        width: 60%
        margin: 0 auto

.pos_banner
  background-size: cover
  background-repeat: no-repeat
  background-position: center
  padding: 7rem 0 5rem
  margin-bottom: 5rem
  min-height: 45vh
  @include tablet
    min-height: 22vh
  @include tablet-ls
    min-height: 22vh
  @include phone
    min-height: 40vh
  p
    width: 70%
    margin: 1.5rem auto 1.5rem 0
    @include phone
      width: 100%
      font-size: 1.6rem
  .hero_container-buttons
    text-align: center
    a
      border-radius: 35px
  .index_hero
    height: auto
    .index_hero_content 
      margin-top: 0
    
.pos_feature_wrap
  background-color: #000
  padding: 5rem 0
  color: #fff
  background-repeat: no-repeat
  background-size: 100%
  background-position: top
  @include phone
    background-image: none !important
  
  p
    @include phone
      font-size: 1.6rem
  .pos_feature_items_wrap
    background-color: rgba(82, 82, 82, 0.2)
    border: 1px solid #252323
    height: 100%
    padding: 1rem
    backdrop-filter: blur(10px)
    -webkit-backdrop-filter: blur(10px)
  h2
    font-weight: 600
    span
      font-style: italic
      font-family: "DM Serif Display", serif
      font-weight: normal
  .pos_feature_content
    margin-top: -4rem
    @incclude phone
      margin-top: unset
    h3
      font-weight: 600
      @include phone
        font-size: 1.7rem
    p
      color: #CCCCCC
      font-weight: 300
      @include phone
        font-size: 1.4rem

.restaurant_needs
  margin: 5rem 0
  .empty_div
    width: 96%
    height: 100%
    display: block
    top: 2px
    left: 9px
    bottom: 0
    background: #92288F
    position: absolute
    z-index: -1
    transform: rotate(-2deg)      
  .restaurant_needs_items
    display: flex
    align-items: center
    justify-content: center
    background: #F4F2F0
    position: relative    
    padding: 1rem 0
    height: 100%
    .plus_icon
      width: 40px
      height: 40px
      display: block
      position: absolute
      top: 38%
      right: -2rem
      z-index: 9
      @include phone
        display: none                           
    img
      height: 60px
      transition: 0.3s
      &:hover 
        transform: scale(1.1)
  .col-md-4
    height: 9rem
    align-content: center
    position: relative
    @include phone 
      margin-bottom: 1.5rem
    &:nth-child(3) 
      .restaurant_needs_items
        &::after
          display: none !important

.plum_happiest_cuswrap 
	padding: 5rem 0
	margin: auto 
	.headline 
		font-size: 32px 
		font-weight: 700 
		margin-bottom: 12px 
		em 
			font-style: italic 
			font-weight: 500 
	.subtext 
		color: #555 
		font-size: 16px 
		line-height: 1.6 
		max-width: 500px 
		margin-bottom: 12px 
	.demo-link 
		color: #92278F 
		font-weight: 600 
		text-decoration: none 
		&:hover 
			text-decoration: underline 
	.image-card 
		position: relative 
		overflow: hidden 
		img 
			width: 100% 
			height: 100% 
			object-fit: cover 
			display: block 
	.rating-badge 
		position: absolute 
		top: 15px 
		left: 15px 
		background: #fff 
		padding: 6px 12px 
		font-weight: 600 
		font-size: 14px 
		display: flex 
		align-items: center 
		gap: 4px 
		box-shadow: 0 2px 6px rgba(0,0,0,0.1) 
		span 
			color: #ffb400 
			font-size: 16px 
	.quote-card 
    background-color: #f8ebff 
    padding: 0 50px 50px 
    height: 100% 
    display: flex 
    flex-direction: column 
    justify-content: flex-start 
    position: relative
	.quote-icon 
    font-size: 40px
    margin-bottom: 20px 
    width: 122px
    height: 145px
    border-radius: 0 0 71px 71px
    background-color: #fff
    display: flex
    align-items: center
    justify-content: center
    img
      width: 70px
      top: 1rem
      position: relative
	.quote-content 
    font-size: 2.5rem 
    color: #1a1a1a 
    margin: 0 0 25px 
    line-height: 1.5
    font-family: "DM Serif Display", serif
    font-weight: normal 
	.author 
		display: flex 
		align-items: center 
		gap: 12px 
		img 
			width: 60px 
			height: 60px 
			border-radius: 50% 
			object-fit: cover 
	.author-info 
		font-size: 14px 
		line-height: 1.3 
		strong 
			display: block 
			font-weight: 700 
.pos_section_six
  background-color: #fff !important
  .order_right_icon
    height: 2.9rem
    margin-bottom: -7px
  .terminal
    border-radius: 10px

.pos_section_three
  background-color: #F7F6F5
  overflow: hidden
  @include tablet
    padding: 3rem 0
  @include tablet-ls
    padding: 3rem 0
  @include phone
    padding: 3rem 0
  .row
    @include phone
      flex-direction: column-reverse
      img
        border-radius: 10px
  img
    max-width: 100%
    height: auto
    object-fit: cover
    margin-bottom: -3px
    @include tablet
      border-radius: 10px
      margin-bottom: unset
    @include tablet-ls
      border-radius: 10px
      margin-bottom: unset
    @include phone
      margin-bottom: unset

  h2
    font-weight: 700
    font-size: 2.6rem
    margin-bottom: 30px
    margin-top: 0
    @include phone
      margin-top: 1.5rem

    span
      font-style: italic
      font-family: "DM Serif Display", serif
      font-weight: normal

  .desc-text
    color: #333
    margin-bottom: 10px
    margin-top: 0
    line-height: 1.6
    @include phone
      font-size: 1.6rem

  .feature-box
    display: flex
    align-items: center
    gap: 15px
    margin-bottom: 0
    @include phone
      margin-bottom: 15px
    img
      height: 2rem
      width: 2rem

  .feature-text
    font-size: 1rem
    @include phone
      font-size: 1.4rem

.pos_section_four
  background-color: #FFFFFF
  .col-md-5
    img
      border-radius: 10px
  .section_subtitle
    max-width: 70%
    margin: 0 auto 2rem
    @include phone
      max-width: 100%

  h2
    font-weight: 700
    margin-bottom: 1rem
    span
      font-style: italic
      font-family: "DM Serif Display", serif
      font-weight: normal
  a
    font-weight: normal
    font-size: 1.2rem
    text-decoration: none
    background: #92278F
    border: 2px solid #92278F
    color: #fff
    border-radius: 35px
    padding: 0.8rem 2rem
    cursor: pointer
    &:hover
      opacity: 0.7
  .desc-text
    color: #333
    line-height: 1.6
    margin: 0 0 1.1rem
    font-weight: 600
    @include tablet
      margin-bottom: 16px
    @include tablet-ls
      margin-bottom: 16px
    @include phone
      font-size: 1.2rem
      font-weight: normal
  .desc-text2
    color: #92278F
    font-size: 1.3rem

  .feature-box
    background-color: #f8f9fa
    padding: 20px
    display: flex
    width: 100%
    gap: 10px
    margin-bottom: 20px
    color: #333
    flex-direction: column
    border-radius: 5px
    @include tablet
      padding: 5px 20px
      margin-bottom: 10px
    @include tablet-ls
      padding: 5px 20px
      margin-bottom: 10px
    .feature-box-item
      display: flex
      justify-content: space-between
      align-items: center
      .feature-text-heading
        width: calc(100% - 50px)
        margin: 0
        font-size: 1.2rem
        font-weight: 600
        @include phone
          font-size: 1.4rem
      img
        max-height: 3rem
        max-width: 3rem
    p
      margin: 0

  .feature-text
    font-size: 1rem
    @include phone
      font-size: 1.4rem

  img
    max-width: 100%
    height: auto
    object-fit: cover


.pos_section_five
  padding: 5rem
  color: #111
  background-size: cover
  backgriund-repeat: no-repeat
  background-position: center 
  text-align: center
  position: relative
  @include phone
    padding: 4rem 1rem

  h2
    font-size: 2.2em
    font-weight: 700
    margin-bottom: 10px
    span
      font-style: italic
      font-family: "DM Serif Display", serif
      font-weight: normal
  p
    @include phone
      font-size: 1.6rem

  p.subtext
    font-size: 1.1em
    color: #333
    max-width: 800px
    margin: 0 auto 40px
    line-height: 1.5em

.pos_section_five_wrap
  position: relative
  display: inline-block
  margin-top: 20px

  .terminal
    width: 800px
    max-width: 90%
    border-radius: 8px
    z-index: 1
    position: relative
    @include tablet
      width: 70%
    @include tablet-ls
      width: 70%

  .info-box
    position: absolute
    background: #111
    border: 5px solid #fbfbf4da
    color: white
    border-radius: 0
    padding: 1rem
    width: 255px
    display: flex
    align-items: center
    flex-direction: column
    justify-content: center
    gap: 10px
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25)
    text-align: left
    z-index: 2
    @include tablet
      width: 180px
      padding: 5px
    @include tablet-ls
      width: 180px
      padding: 5px
    @include phone
      position: relative

    img
      width: 45px
      height: 45px
      border-radius: 6px

    p
      margin: 0
      text-align: center
      font-size: 1.1rem
      @include phone
        font-size: 1.4rem

    &.left
      top: 10%
      left: 79px
      transform: translateX(-100%)
      @include tablet
        left: 120px
      @include tablet-ls
        left: 132px
      @include phone
        transform: unset
        left: 0


    &.right
      top: 0
      right: 162px
      transform: translateX(100%)
      width: 300px
      @include tablet
        right: 191px
        width: 220px
      @include tablet-ls
        right: 180px
        width: 220px
      @include phone
        transform: unset
        right: unset
        width: 300px

    &.bottom
      bottom: 90px
      left: 74%
      transform: translateX(-50%)
      @include custom_desktop
        bottom: 100px
      @include tablet
        bottom: 44px
      @include tablet-ls
        bottom: 44px
        left: 72%
      @include phone
        transform: unset
        left: 0
        bottom: auto

.plus-parent
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%

  .plus-wrapper
    position: absolute
    display: flex
    align-items: center
    justify-content: center

  .plus-icon
    width: 100px
    height: 100px
    cursor: pointer
    transition: transform 0.3s ease
    z-index: 3
    &:hover
      transform: scale(1.1)

    svg
      width: 100%
      height: 100%

  .tooltip
    position: absolute
    background: #fff
    color: #333
    padding: 8px 50px 8px 15px
    border-radius: 6px
    font-size: 13px
    box-shadow: 0 2px 8px rgba(0,0,0,0.2)
    opacity: 0
    pointer-events: none
    white-space: nowrap
    z-index: 1
    transition: all 0.3s ease
    transform: scale(0.9)
    transform-origin: center
    width: 0
    border-radius: 35px
    height: 50px
    display: flex
    align-items: center
    justify-content: center
    word-wrap: break-word
    white-space: normal
    line-height: 1
    overflow: hidden
    &::after
      content: ""
      position: absolute
      border: 6px solid transparent

  .plus-wrapper:hover .tooltip
    opacity: 1
    pointer-events: auto
    width: 250px

  .plus_points1
    top: 12%
    left: 7%
    @include tablet
      top: 15%
    @include tablet-ls
      top: 15%
    @include phone
      top: 20%
      left: 7%
    .tooltip
      left: 40px
      top: 45%
      padding: 8px 15px 8px 50px 
      transform: translateY(-50%) translateX(-10px)
      &::after
        left: -6px
        top: 50%
        transform: translateY(-50%)
        border-right-color: #fff

  .plus_points2
    top: 5%
    right: 10%
    @include tablet
      top: -4%
      right: 6%
    @include tablet-ls
      top: -4%
      right: 6%
    @include phone
      top: 0%
    .tooltip
      top: 46px
      right: 19%
      transform: translatey(-50%) translatex(-10px)
      &::after
        bottom: -6px
        right: 50%
        transform: translatey(-50%)
        border-top-color: #fff

  .plus_points3
    bottom: 33%
    right: 20%
    @include tablet
      bottom: 25%
      right: 15%
    @include tablet-ls
      bottom: 25%
      right: 15%
    @include phone
      bottom: 24%
      right: 15%
    .tooltip
      right: 12px
      top: 46%
      transform: translateY(-50%) translateX(-10px)
      &::after
        right: -6px
        top: 50%
        transform: translateY(-50%)
        border-left-color: #fff