html
  @include phone
    font-size: 80% !important
  @include desktop-125
    font-size: 85% !important
  @include tablet
    font-size: 85% !important
  @include desktop
    font-size: 75% !important
    h2
      font-size: 2.5rem !important
p
  @include phone
    line-height: 1.4 !important
h1,h2,h3,h4
  @include desktop
    line-height: 1.4 !important
body
  font-family: 'Manrope', sans-serif !important
.accounting_common_container
  width: 100%
  margin: 0 auto
.custom_container_fluid
  width: 77%
  margin: 0 auto
  padding-left: 16px
  padding-right: 16px
  max-width: 100%
  @include custom_desktop
    width: 85% !important
  @include tablet-ls
    width: 100% !important
  @include tablet
    width: 100% !important
  @include desktop-125
    width: 80% !important
  @include desktop
    width: 90% !important
  @include phone
    padding-left: 0
    padding-right: 0
    width: 100% !important
  @media (min-width: 1920px)
    max-width: 1391px
  @media (min-width: 2560px)
    max-width: 1791px
  @media (min-width: 3200px)
    max-width: 2291px
  p, h1, h2, h3
    font-family: 'Manrope', sans-serif !important
    margin-top: 0


@keyframes floating
  0%
    transform: translateY(0px)
  50%
    transform: translateY(-15px)
  100%
    transform: translateY(0px)


@keyframes lineScan
  0%
    left: -150px
  100%
    left: 100%
.plum_accounting_hero
  background-size: 100% 100%
  background-repeat: no-repeat
  padding-top: 8rem
  margin-top: -6rem
  margin-bottom: 10rem
  position: relative
  @include desktop
    padding-top: 8rem !important
  @include phone
    padding-top: 13rem !important
    margin-bottom: 4rem !important
  @include tablet
    padding-top: 12rem !important
  .line_container
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    pointer-events: none
    @include tablet
      display: none !important
    @include phone
      display: none !important
    @media only screen and (min-width: 821px) and (max-width: 1180px)
      display: none !important
    .scan_line
      position: absolute
      height: 3px
      width: 120px
      background: transparent linear-gradient(261deg, #B062FF 0%, #58318000 100%) 0% 0% no-repeat padding-box
      animation: lineScan linear infinite
    .l1
      bottom: 15%
      animation-duration: 8s
    .l2
      bottom: 30%
      animation-duration: 12s
      animation-delay: 1s
    .l3
      bottom: 50%
      animation-duration: 10s
      animation-delay: 2s
  .hero_main_section
    display: flex
    justify-content: center
    align-items: center
    margin-bottom: 3rem
    @include phone
      margin-bottom: 2rem !important
      padding: 0 12px !important
  .input_wrapper
    display: flex
    align-items: center
    background: rgba(255, 255, 255, 0.05)
    border: 1px solid rgba(255, 255, 255, 0.1)
    border-radius: 8px
    padding: 8px
    width: 100%
    max-width: 500px
    input
      flex: 1
      background: transparent
      border: none
      outline: none
      color: #fff
      padding: 10px 15px
      font-size: 16px
      &::placeholder
        color: rgba(255, 255, 255, 0.5)
    button
      background: #10d45d
      color: #fff
      border: none
      padding: 12px 25px
      border-radius: 6px
      font-weight: 600
      cursor: pointer
      transition: background 0.3s ease
      white-space: nowrap
      &:hover
        background: #0eb850
  .hero_main_image
    width: 80%
    height: 100%
    margin: 0 auto
    position: relative
    img
      width: 100%
      height: 100%
    @include phone
      width: 100% !important
      padding: 0 12px
    @include tablet
      width: 100% !important
      padding: 0 12px
    .left_one
      width: 110px
      height: 110px
      position: absolute
      bottom: 5rem
      left: -12rem
      z-index: 99
      animation: floating 10s ease-in-out infinite
      @media only screen and (min-width: 821px) and (max-width: 1180px)
        display: none !important
      @include desktop
        width: 90px
        height: 90px
      img
        width: 100%
        height: 100%
    .right_one
      width: 110px
      height: 110px
      position: absolute
      top: 5rem
      right: -12rem
      animation: floating 10s ease-in-out infinite
      animation-delay: 1s
      @media only screen and (min-width: 821px) and (max-width: 1180px)
        display: none !important
      @include desktop
        width: 90px
        height: 90px
      img
        width: 100%
        height: 100%
    img
      width: 100%
      margin-bottom: -5rem
      position: relative
      z-index: 1
  .hero_heading
    width: 50%
    margin: 0 auto
    margin-bottom: 2.5rem
    @include phone
      width: 100%
    @include tablet
      width: 100%
    h1
      font-size: 2.75rem
      font-weight: 700
      color: #1F1D1E
      margin-top: 0
      margin-bottom: 2rem
      text-align: center
    p
      font-size: 1.2rem
      font-weight: normal
      margin: 0 !important
      color: #5A5962
      text-align: center
      @include phone
        padding: 0 15px
      @include tablet
        padding: 0 15px
.company_nationwide_main
  margin: 6rem 0
  @include phone
    margin: 2rem 0 2rem 0 !important
    .row
      flex-direction: column-reverse
  @include tablet
    margin: 8rem 0 2rem 0 !important
    .row
      flex-direction: column-reverse
  .company_nationwide_description
    height: 100%
    width: 100%
    padding-left: 3rem
    @include desktop-125
      padding-left: 2rem !important
    @include phone
      padding-left: 0 !important
    @include tablet
      padding-left: 0 !important
    .col-lg-12
      height: 100%
      .row
        height: 100%
        align-items: center
        @include tablet
          flex-direction: row !important
        .col-lg-6
          @include tablet
            width: 49% !important
          @include phone
            padding: 0 !important
          @include tablet
            padding: 0 !important
          &:nth-child(1),
          &:nth-child(2)
            border-bottom: 1px solid #70707060
            padding-bottom: 5rem
            @include phone
              padding-bottom: 0 !important
              border: 0 !important
            @include tablet
              padding-bottom: 0 !important
              border: 0 !important
    .company_nationwide_description_common
      display: flex
      align-items: center
      justify-content: space-between
      width: 100%
      @include phone
        margin-bottom: 1.2rem
      @include tablet
        margin-bottom: 1.2rem
      .description_only
        width: calc( 100% - 110px )
        @include phone
          width: calc( 100% - 75px) !important
        @include tablet
          width: calc( 100% - 100px) !important
        h3
          font-size: 2.75rem
          font-weight: 600
          color: #030014
          margin: 0 !important
          @include phone
            font-size: 1.8rem !important
        p
          font-size: 1.2rem
          font-weight: normal
          color: #030014
          margin: 0 !important
      .icon_only
        width: 80px
        height: 80px
        border-radius: 50%
        overflow: hidden
        @include phone
          width: 60px
          height: 60px
        img
          width: 100%
          height: 100%
  .company_nationwide_image
    width: 100%
    border-radius: 19px
    overflow: hidden
    position: relative
    overflow: hidden
    height: 100%
    object-fit: cover
    @include tablet
      margin-top: 2rem
    @include phone
      margin-top: 2rem
    h2
      background: #0FC75D60
      border-radius: 0px 0px 19px 19px
      opacity: 0.83
      backdrop-filter: blur(15px)
      -webkit-backdrop-filter: blur(15px)
      font-size: 1.5rem
      font-weight: 500
      color: #fff
      margin: 0 !important
      position: absolute
      bottom: 0
      left: 0
      padding: 1rem 0 1rem 1rem
      width: 100%
      @include desktop
        font-size: 1.5rem !important
        border-radius: 0px 0px 15px 15px !important
        // bottom: 3px !important
      @include desktop-125
        border-radius: 0 0 17px 17px !important
        // bottom: 3px !important
      @media only screen and (min-width: 821px) and (max-width: 1180px)
        border-radius: 0px 0px 13px 13px !important
        font-size: 1.5rem !important
        // bottom: 4px !important
      @include phone
        border-radius: 0px 0px 12px 12px !important
        // bottom: 3px !important
      @include tablet_android
        border-radius: 0px 0px 17px 17px !important
        // bottom: 4px !important
    img
      width: 100%
      height: 100%
      object-fit: cover
      display: block
      @include phone
        transform: scale(1.02)
.home_client_section
  margin-top: 2rem
  h2
    font-size: 1.2rem
    font-wegiht: 600
    color: #5A5962
    margin-bottom: 2rem
    margin-top: 0 !important
    text-align: center
    position: relative
    &::before
      content: ''
      position: absolute
      top: 12px
      left: 13rem
      display: block
      width: 12%
      height: 2px
      background: transparent linear-gradient(90deg, #fff 0%, gray 100%) 0% 0% no-repeat padding-box
      @include desktop
        left: 13rem !important
        top: 9px !important
      @include tablet
        display: none !important
      @include tablet-ls
        display: none !important
      @include phone
        display: none !important
    &::after
      content: ''
      position: absolute
      top: 12px
      right: 13rem
      display: block
      width: 12%
      height: 2px
      background: transparent linear-gradient(90deg, #fff 0%, gray 100%) 0% 0% no-repeat padding-box
      transform: rotate(180deg)
      @include desktop
        right: 13rem !important
        top: 9px !important
      @include tablet
        display: none !important
      @include tablet-ls
        display: none !important
      @include phone
        display: none !important
    @include phone
      font-size: 1.5rem !important
  @include tablet
    .row
      flex-direction: row !important
    .col-sm-2
      width: 32% !important
  @include phone
    .row
      flex-direction: row !important
    .col-sm-2
      width: 49% !important
  .row
    align-items: center
  .home_client_common
    width: 100%
    text-align: center
    padding: 2rem
    transition: .4s ease-in-out
    height: 100%
    &:hover
      transform: scale(1.1)
    img
      width: 80%
      height: 100%
.accounting-suite
  margin: 7rem 0 10rem 0
  @include phone
    margin: 1rem 0 2rem 0 !important
  .tab-title
    font-size: 1.5rem
    font-weight: normal
    margin: 0 !important
    color: #2E2A30
  h2
    font-size: 2.75rem
    font-weight: 700
    color: #030014
    margin-top: 0 !important
    margin-bottom: 1.5rem
    @include desktop
      width: 70%
  .custom-tab-list
    .nav-link
      background: none
      border: none
      border-bottom: 1px dashed #ccc
      border-radius: 0
      padding: 1.2rem 0
      text-align: left
      color: #333
      font-weight: 500
      font-size: 1.1rem
      transition: all 0.3s ease-in-out
      position: relative
      cursor: pointer
      .active-square
        display: inline-block
        width: 12px
        height: 12px
        background-color: #552B8B
        opacity: 0
        transition: opacity 0.3s ease
        margin-right: 1rem !important
      .active-arrow
        opacity: 0
        transform: translateX(-10px)
        transition: all 0.3s ease
        display: none
      &.active
        position: relative
        .tab-title
          font-weight: 600 !important
          color: #552B8B !important
        &::before
          content: ''
          height: 4px
          border-radius: 6px
          background-color: #6f42c1
          display: block
          width: 40%
          position: absolute
          left: 0
          bottom: -2px
        .active-square
          opacity: 1
        .active-arrow
          opacity: 1
          transform: translateX(0)
          width: 23px
          height: 23px
          display: inline-flex
          img
            width: 100%
            height: 100%
  .tab-content
    display: flex
    align-items: center
    justify-content: center
    background-color: #FCF7FF
    overflow: hidden
    height: 100%
    border-radius: 19px
    padding: 2rem
    .image-container
      height: 100%
      align-content: center
      background-color: #FCF7FF
      border-radius: 19px
      wdith: 100%
      img
        width: 100%
  .tab-pane.fade
    transition: opacity 0.4s linear
  .tab-pane
    display: none
    opacity: 0
    transition: opacity 0.3s ease-in-out
    &.active
      display: block
    &.show
      opacity: 1



.restaurant-slider-section
  padding-bottom: 80px !important
  background-size: 100% 100%
  background-repeat: no-repeat
  margin-top: 8rem
  @include phone
    margin-top: 0 !important
  @include desktop
    margin-top: 8rem !important
  @include desktop-125
    margin-top: 10rem !important
  @include tablet
    .container
      width: 100% !important
      margin: 0 0 !important
      padding: 0 12px !important
  @include phone
    padding-bottom: 40px !important
    padding-left: 12px !important
    padding-right: 12px !important
    .justify-content-between
      position: relative
      .slider-nav
        position: absolute
        left: 35%
        bottom: -1rem
  h2
    font-size: 2.75rem
    font-weight: 700
    color: #080A0C
    margin: 0
    text-align: center
    width: 55%
    text-align: left
    @include tablet
      width: 95% !important
    @include phone
      width: 100% !important
      font-size: 1.8rem
      text-align: center
      margin-bottom: 5rem
    @include desktop
      width: 40% !important
  #prevBtn
    display: flex
    align-items: center
    justify-content: center
    img
      width: 100%
      position: relative
      left: -1px
      filter: invert(1)
  #nextBtn
    display: flex
    align-items: center
    justify-content: center
    img
      width: 100%
      filter: invert(1)
  .slider-viewport
    overflow: visible
    position: relative

  .slider-track
    display: flex
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)
    gap: 24px
    will-change: transform

  .slider-card-item
    flex: 0 0 calc(45% - 12px)
    min-width: 320px

    @media (max-width: 991px)
      flex: 0 0 calc(70% - 24px)
    @media (max-width: 576px)
      flex: 0 0 calc(85% - 24px)

  .feature-card
    background: transparent linear-gradient(182deg, #FFFFFF 0%, #E4C4F8 100%) 0% 0% no-repeat padding-box
    border: 1px solid #E5E5E5
    border-radius: 20px
    opacity: 1
    display: flex
    flex-direction: column
    justify-content: space-between
    padding: 2rem 0rem 0rem 2rem !important
    @include phone
      border-radius: 10px !important
    .slider_description
      width: 90%
      h3
        font-size: 1.6rem !important
        color: #92288E
        font-weight: 500
        margin-top: 0 !important
        margin-bottom: 1rem !important
      p
        font-size: 1.1rem !important
        font-weight: 400
        margin: 0 !important
        color: #5A5962
    .card-img-wrapper
      width: 100%
      height: 100%
      align-content: flex-end
      margin-top: 1.5rem
      object-fit: cover
      img
        width: 100%
        height: 100%
        margin-bottom: -5px
  .nav-btn
    background: #ffffff
    border: 1px solid #92288E
    color: #ffffff
    width: 50px
    height: 50px
    border-radius: 50%
    display: flex
    align-items: center
    justify-content: center
    transition: 0.3s
    cursor: pointer !important
    img
      width: 100% !important
      height: 100% !important
.slider-card-item
  flex: 0 0 calc(45% - 12px)
  min-width: 320px

  @media (max-width: 991px)
    flex: 0 0 calc(75% - 24px)


.testimonial-marquee-section
  background-color: #3b1464
  overflow: hidden
  padding: 80px 0
  @include tablet
    .containet
      max-width: 100% !important
  .text_center
    width: 50%
    margin: 0 auto 4rem auto
    text-align: center
    @include phone
      width: 90%
    h2
      font-size: 2.125rem
      color: #ffffff
      font-weight: 700
      margin-top: 0 !important
    p
      font-size: 1.2rem
      color: #fff
      font-weight: normal
      margin: 0 !important
  .marquee-grid
    display: grid
    grid-template-columns: repeat(3, 1fr)
    gap: 10px
    height: 750px
    position: relative
    overflow: hidden
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent)
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent)
    @include phone
      grid-template-columns: 100%
      grid-template-rows: repeat(3, 1fr)
      height: auto
      mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent)
      -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent)
  .marquee-col
    height: 100%
    overflow: hidden
    @include phone
      width: 100%
      height: auto
    &.up .marquee-inner
      animation: scroll-up 60s linear infinite
      +phone
        animation: scroll-left 60s linear infinite
    &.down .marquee-inner
      animation: scroll-down 60s linear infinite
      +phone
        animation: scroll-right 60s linear infinite
  .marquee-inner
    display: flex
    flex-direction: column
    will-change: transform
    @include phone
      flex-direction: row
      width: max-content
  .testimonial-card
    background: #220540
    border-radius: 20px
    padding: 24px
    min-height: 250px
    display: flex
    flex-direction: column
    flex-shrink: 0
    width: 100%
    margin-bottom: 10px
    @include phone
      width: 300px
      margin-bottom: 0
      margin-right: 10px
    .main_card_data
      margin-bottom: 1.5rem
      h5
        font-size: 1.5rem
        font-weight: 600
        color: #ffffff
        margin-top: 0 !important
        margin-bottom: 1.2rem
      p
        font-size: 1.1rem
        font-weight: normal
        margin: 0 !important
        color: #ffffff
    .user-meta
      display: flex
      align-items: center
      justify-content: space-between
      width: 100%
      .user_description
        width: calc( 100% - 65px )
        h3
          font-size: 1.1rem
          font-weight: 600
          color: #ffffff
          margin: 0 !important
        p
          font-size: 1rem
          font-weight: normal
          margin: 0 !important
          color: #ffffff
      .user_image
        width: 50px
        height: 50px
        img
          width: 100%
    .stars
      color: #ffffff
      font-size: 2rem
      margin-bottom: 1.2rem
    .card-desc
      color: #ccc
      font-size: 0.85rem
      line-height: 1.5

@keyframes scroll-up
  0%
    transform: translateY(0)
  100%
    transform: translateY(-50%)

@keyframes scroll-down
  0%
    transform: translateY(-50%)
  100%
    transform: translateY(0)

@keyframes scroll-left
  0%
    transform: translateX(0)
  100%
    transform: translateX(-50%)

@keyframes scroll-right
  0%
    transform: translateX(-50%)
  100%
    transform: translateX(0)
.marquee-inner:hover
  animation-play-state: paused

.cta-section
  padding: 0 0 100px 0
  background: #02010a
  @include tablet
    .container
      max-width: 100% !important
  @include phone
    padding: 0 0 40px 0 !important
    margin-bottom: -4px
  .cta-card
    background: linear-gradient(180deg, #02010a 0%, #0d0533 40%, #2b1a6e 70%, #7a4cff 100%)
    border-radius: 20px
    padding: 14rem 0
    color: white
    text-align: center
    position: relative
    overflow: hidden
    @include tablet
      padding: 7rem 0 !important
    .grid-background
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0
      background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px)
      background-size: 30px 30px
      pointer-events: none
      z-index: 1
    .block-canvas-container
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      pointer-events: none
      z-index: 0
      .game-block
        position: absolute
        width: 30px
        height: 30px
        border: 1px solid rgba(255, 255, 255, 0.2)
        background: rgba(255, 255, 255, 0.08)
        box-shadow: 0 0 10px rgba(122, 76, 255, 0.4)
        opacity: 0.3
        transition: top 0.3s linear, opacity 0.3s ease
        &.clearing
          animation: flash 0.3s ease-in-out infinite
          background: rgba(255, 255, 255, 0.6)
          opacity: 1
          box-shadow: 0 0 20px rgba(255, 255, 255, 0.8)
    @keyframes flash
      0%, 100%
        opacity: 1
      50%
        opacity: 0.5
    .glow-bottom
      position: absolute
      bottom: -20px
      left: 50%
      transform: translateX(-50%)
      width: 80%
      height: 100px
      background: radial-gradient(circle, rgba(122, 76, 255, 0.8) 0%, transparent 70%)
      filter: blur(40px)
      z-index: 1
      animation: pulseGlow 5s ease-in-out infinite
    @keyframes pulseGlow
      0%, 100%
        opacity: 0.5
        transform: translateX(-50%) scale(1)
      50%
        opacity: 0.8
        transform: translateX(-50%) scale(1.1)
    .cta-content
      position: relative
      z-index: 2
      width: 60%
      margin: 0 auto
      text-align: center
      @include phone
        width: 100%
        padding: 0 12px
      h2
        font-size: 2.75rem
        font-weight: 700
        color: white
        margin-bottom: 1.5rem !important
        width: 80%
        margin: 0 auto
        @include phone
          width: 100%
          font-size: 2.2rem !important
      p
        font-size: 1.2rem
        color: rgba(255, 255, 255, 0.75)
        margin: 0
        margin-bottom: 2rem !important
    .btn-cta
      background: white
      color: #111
      padding: 14px 28px
      border-radius: 8px
      font-weight: 600
      border: none
      transition: all 0.3s ease
      display: inline-block
      text-decoration: none
      font-size: 1.2rem !important
      &:hover
        background: #f0f0f0
        transform: translateY(-3px)
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25)

.fade-in-up
  animation: fadeInUp 1s ease-out forwards
  opacity: 0

@keyframes fadeInUp
  from
    opacity: 0
    transform: translateY(20px)
  to
    opacity: 1
    transform: translateY(0)

@media (max-width: 768px)
  .cta-section
    .cta-card
      padding: 60px 20px
      h2
        font-size: 32px


.index_manage_finance_main
  margin-bottom: 0
  overflow: hidden
  @include tablet
    margin-top: 2rem
  @include phone
    margin-top: 2rem !important
  .custom_container_fluid_1920px
    max-width: 1920px !important
    margin: 0 auto
    padding: 0 !important
    @include tablet
      .col-md-5
        padding: 0 12px !important
    .col-md-5,
    .col-lg-7
      padding: 0 !important
      @include tablet
        width: 100%
      .index_manage_finance_image
        width: 100%
        height: 100%
        overflow: hidden !important
        padding-top: 2rem
        background-color: #ffffff
        video
          display: block
          width: 100%
          height: 100%
          object-fit: cover
          border: 0 !important
          outline: 0 !important
          background-color: #ffffff
          transform: scale(1.02)
          backface-visibility: hidden
          -webkit-backface-visibility: hidden
      @include tablet
        margin-top: -4rem
      @include phone
        margin-top: 1rem
      img
        width: 100%
        margin-bottom: -1rem
        height: auto
    .index_manage_finance_description
      padding-left: 10rem
      height: 100%
      align-content: center
      padding-bottom: 0rem
      @include desktop-125
        padding-left: 14rem
      @include tablet
        padding: 0 12px !important
        margin-top: 2rem
      @include phone
        padding: 0 12px !important
        text-align: center
      a
        background: #92288E 0% 0% no-repeat padding-box
        border-radius: 10px
        border: 1px solid #92288E
        opacity: 1
        font-size: 1.2rem
        font-weight: normal
        color: #fff
        display: inline-flex
        align-items: center
        justify-content: center
        padding: 1.2rem 1.2rem
        transition: .4s ease-in-out
        z-index: 99
        position: relative
        &:hover
          background-color: #fff !important
          color: #92288E !important
      h2
        font-size: 2.75rem
        font-weight: 700
        color: #030014
        margin-top: 0 !important
        margin-bottom: 1.5rem !important
        @include phone
          font-size: 2.2rem !important
          text-align: center
      p
        font-size: 1.2rem
        font-weight: normal
        color: #030014
        margin: 0 !important
        margin-bottom: 2rem !important
        @include phone
          text-align: center
.faq_feature_wrapper
  padding-top: 2rem
  margin: 5rem 0
  @media (max-width: 768px)
    margin: 0rem !important
    padding-bottom: 0
.faq_feature
  width: 65%
  margin: 0 auto
  @include tablet
    width: 100% !important
  @include phone
    width: 100%
    padding: 0 12px
  h2
    font-size: 2.75rem
    font-weight: 700
    color: #030014
    margin-top: 0 !important
    margin-bottom: 3rem !important
    text-align: center
    @include phone
      font-size: 2.2rem !important
  p
    font-size: 2.2rem
    font-weight: 600
    margin-bottom: 2rem
    color: #14141F
    text-align: center
    @media (max-width: 768px)
      font-size: 1.8rem
      margin-bottom: 1rem
  .faq_dropdown
    margin-bottom: 1rem
    padding: 1.5rem
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
    background: #F8FAFB 0% 0% no-repeat padding-box
    border: 1px solid #E2E7EF
    border-radius: 20px
    opacity: 1
    &.open
      background: #FAF5FE 0% 0% no-repeat padding-box
      border: 1px solid #92288E
      border-radius: 20px
      opacity: 1
      .faq_dropdown_title
        color: #92288E !important
      .arrow
        background: #000000
        &::before
          background: #FAF5FE !important
        &::after
          transform: translate(-50%, -50%) rotate(90deg)
          opacity: 0
      .dropdown-content
        opacity: 1
        margin-top: 1rem
        p
          color: #00000090 !important
  .faq_dropdown_title
    font-weight: 600
    font-size: 1.4rem
    cursor: pointer
    display: flex
    justify-content: space-between
    align-items: center
    user-select: none
    color: #14141F
    transition: color 0.3s ease
  .arrow
    position: relative
    width: 30px
    height: 30px
    background: #92288E
    border-radius: 50%
    display: inline-block
    transition: all 0.3s ease
    flex-shrink: 0
    &::before
      content: ''
      position: absolute
      width: 15px
      height: 3px
      background: #ffffff
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
      transition: all 0.3s ease
    &::after
      content: ''
      position: absolute
      width: 3px
      height: 15px
      background: #ffffff
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
      transition: all 0.3s ease
      opacity: 1
  .dropdown-content
    height: 0
    overflow: hidden
    transition: all 0.4s ease
    opacity: 0
    p
      margin: 0
      font-size: 1.1rem
      line-height: 1.6
      font-weight: 400
      text-align: left
  .img-box
    width: 100%
    height: 100%
    overflow: hidden
    img
      width: 100%
      height: 100%
      object-fit: cover
      transition: transform 0.4s ease
      &:hover
        transform: scale(1.05)


@media (min-width: 992px)
  .animate-grid
    opacity: 0
    will-change: transform, opacity
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease-out

.plum_accounting_work
  margin-top: 5rem
  margin-bottom: 5rem
  @media only screen and (min-width: 821px) and (max-width: 1180px)
    margin-top: -2rem !important
    margin-bottom: 0 !important
  @include phone
    margin-top: 2rem !important
    margin-bottom: 3rem !important
  .first_card
    position: relative
    &::before
      content: ""
      background-image: url('../pages/top_arrow.png')
      width: 168px
      height: 168px
      background-size: contain
      background-repeat: no-repeat
      position: absolute
      top: -8rem
      right: -7rem
      padding: 1rem
      @include tablet
        width: 138px !important
        height: 138px !important
      @include phone
        display: none
      @include desktop
        width: 128px !important
        height: 128px !important
      @include desktop-125
        top: -9rem !important
        right: -8rem !important
  .second_card
    position: relative
    &::before
      content: ""
      background-image: url('../pages/bottom_arrow.png')
      width: 182px
      height: 182px
      background-size: contain
      background-repeat: no-repeat
      position: absolute
      bottom: -9rem
      right: -7rem
      @include tablet
        width: 162px !important
        height: 162px !important
        bottom: -9.5rem !important
      @include phone
        display: none
      @include desktop
        width: 148px !important
        height: 148px !important
        bottom: -10rem !important
      @include desktop-125
        bottom: -11rem !important
        right: -8rem !important
  .plum_accounting_work_common
    background: #FAF5FE
    border-radius: 20px
    opacity: 1
    padding: 1.5rem
    border: 1px solid #E1E0FD
    @include tablet
      height: 100%
    @include phone
      margin-bottom: .8rem !important
    h3
      background: #92288E
      border-radius: 50%
      width: fit-content
      padding: 10px
      font-size: 1.3rem
      font-weight: 300
      color: #ffffff
      width: 60px
      height: 60px
      display: inline-flex
      align-items: center
      justify-content: center
      margin-top: 0 !important
      @include phone
        font-size: 1.5rem !important
        font-weight: 600 !important
        height: 50px !important
        width: 50px !important
    h4
      font-size: 2.2rem
      font-weight: 500
      color: #000000
      margin-top: 0 !important
      margin-bottom: 1rem
    p
      font-size: 1.1rem
      font-weight: normal
      color: #5A5962
      margin: 0 !important
  .plum_accounting_work_heading
    text-align: center
    margin-bottom: 7rem
    @include phone
      margin-bottom: 3rem
    @media only screen and (min-width: 821px) and (max-width: 1180px)
      margin-bottom: 7rem !important
    p
      font-size: 1.2rem
      font-weight: normal
      margin: 0 !important
      color: #2E2A30
    h2
      font-size: 2.75rem
      font-weight: 700
      color: #030014
      margin-top: 0 !important
      margin-bottom: 1.5rem
      @include phone
        font-size: 2.2rem !important


.index_manage_finance_main
  .index_manage_finance_image
    position: relative
    overflow: hidden
    &::after
      content: ''
      position: absolute
      top: 0
      left: -150%
      width: 50%
      height: 100%
      background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%)
      transform: skewX(-25deg)
      pointer-events: none
    &.animate-shine::after
      animation: shine-effect 1.5s ease-in-out forwards
@keyframes shine-effect
  0%
    left: -150%
  100%
    left: 150%

.client_says_slider
  background: #F8FAFB
  padding: 5rem 0
  overflow: hidden
  .accounting_common_container
    @media (max-width: 768px)
      padding: 0 15px
  .client_says_heading
    text-align: center
    margin-bottom: 4rem
    h2
      color: #000000
      font-size: 3rem
      font-weight: 700
      margin-bottom: 1rem
      @media (max-width: 768px)
        font-size: 2.2rem
    p
      color: #5A5962
      font-size: 1.1rem
      max-width: 600px
      margin: 0 auto
  .slider_wrapper
    width: 100%
    cursor: grab
    overflow: visible
  .slider_track
    display: flex
    gap: 2rem
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1)
    will-change: transform
    @media (max-width: 768px)
      gap: 1rem
  .client_card
    min-width: calc(33.33% - 1.35rem)
    background: transparent linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box
    box-shadow: 1px 20px 50px #0000001D
    border-radius: 20px
    opacity: 1
    padding: 2.5rem
    display: flex
    flex-direction: column
    justify-content: space-between
    box-sizing: border-box
    @media (max-width: 1200px)
      min-width: calc(50% - 1rem)
    @media (max-width: 768px)
      min-width: 85%
      padding: 1.5rem !important
    .rating_stars
      margin-bottom: 1.5rem
      display: flex
      gap: 5px
      svg
        width: 20px
        height: 19px
        path
          transition: fill 0.3s ease
    .card_content
      h3
        font-size: 1.4rem
        font-weight: 700
        color: #030014
        margin-bottom: 1rem
      p
        font-size: 1.05rem
        color: #555
        line-height: 1.6
        margin-bottom: 2rem
    .client_footer
      display: flex
      align-items: center
      gap: 1rem
      .client_logo
        width: 50px
        height: 50px
        img
          width: 100%
          height: 100%
          object-fit: contain
      .client_info
        h4
          font-size: 1.1rem
          font-weight: 700
          margin: 0
          color: #030014
        span
          font-size: 0.9rem
          color: #777
  .slider_arrows
    display: flex
    justify-content: center
    gap: 1.5rem
    margin-top: 3rem
    .arrow_btn
      width: 50px
      height: 50px
      border-radius: 50%
      border: 1px solid #92288E
      background: transparent
      color: #92288E
      display: flex
      align-items: center
      justify-content: center
      cursor: pointer
      transition: all 0.3s ease
      &:hover
        background: #92288E
        color: #fff
      &.disabled
        opacity: 0.3
        cursor: not-allowed
        border-color: #000
        color: #000
.home_page_cta
  padding: 5rem 0 0 0
  margin-bottom: -14rem
  @include tablet
    margin-bottom: 0 !important
  @include phone
    padding: 2rem 12px !important
    margin-bottom: 0 !important
    .row
      flex-direction: column-reverse !important
  .accounting_common_container
    background: #030014
    border-radius: 40px
    position: relative
    .col-lg-7
      margin-top: -4rem !important
      @include phone
        margin-top: 0 !important
    @include tablet
      border-radius: 20px !important
    @include phone
      border-radius: 10px !important
    .col-md-5,
    .col-lg-7
      padding: 0
      @include tablet
        width: 100% !important
    .home_page_cta_image
      width: 100%
      overflow: hidden !important
      height: 100%
      @include tablet
        overflow: hidden !important
      @include phone
        margin-top: 2rem !important
        overflow: hidden !important
      img
        aspect-ratio: 2515 / 1554
        width: 100%
        height: 100%
        object-fit: contain !important
        display: block
        border-bottom-left-radius: 39px !important
        @include tablet
          width: calc(100% + 10rem) !important
          border-bottom-left-radius: 0 !important
        @include phone
          margin-bottom: 0px !important
          border-bottom-left-radius: 9px !important
    .home_page_cta_desscription
      height: 100%
      align-content: center
      margin-left: -4rem
      @include tablet
        margin-left: 0 !important
        padding: 2rem !important
      @include phone
        margin-left: 0 !important
        padding: 1rem 12px 0 12px !important
        text-align: left
      h2
        color: #fff
        font-size: 2.75rem
        font-weight: 700
        line-height: 1.2
        margin-bottom: 1rem
      p
        color: #ffffffb3
        font-size: 1.2rem
        line-height: 1.6
        margin-bottom: 1.5rem
        max-width: 500px
        @include tablet_ls
          max-width: 100% !important
          font-size: 1.2rem !important
        @include tablet_android
          max-width: 100% !important
          font-size: 1.2rem !important
        @include tablet
          max-width: 100%
          font-size: 1.2rem !important
      a
        display: inline-block
        background: #fff
        color: #030014
        padding: 1.2rem 2.5rem
        border-radius: 12px
        font-weight: 600
        text-decoration: none
        font-size: 1.1rem
        transition: background 0.3s ease
        &:hover
          background: #f0f0f0

.plum_accounting_hero
  position: relative
  .carousel-indicators
    bottom: -5rem !important
    @include phone
      bottom: -3rem !important
    button
      background-color: #cdcdcd !important
      width: 40px
      height: 5px
      &.active
        background-color: #ed58e7 !important
  .carousel-control-prev
    position: absolute
    top: 50%
    left: -6rem
    transform: translateY(-50%)
    z-index: 10
    background: #FFFFFF 0% 0% no-repeat padding-box
    border: 1px dashed #92288E
    opacity: 1
    width: 50px
    height: 50px
    border-radius: 50%
    transition: .4s ease-in-out
    padding: .7rem
    @include desktop
      width: 40px !important
      height: 40px !important
    @include phone
      width: 35px !important
      height: 35px !important
      top: 33% !important
      left: 79% !important
      display: none !important
    @include tablet
      display: none !important
    &:hover
      background: #92288E
      span
        filter: unset !important
    span
      display: flex
      align-items: center
      justify-content: center
      width: 100%
      height: 100%
      filter: invert(1)
  .carousel-control-next
    position: absolute
    top: 50%
    right: -6rem
    transform: translateY(-50%)
    z-index: 10
    background: #FFFFFF 0% 0% no-repeat padding-box
    border: 1px dashed #92288E
    opacity: 1
    width: 50px
    height: 50px
    border-radius: 50%
    transition: .4s ease-in-out
    padding: .7rem
    @include desktop
      width: 40px !important
      height: 40px !important
    @include phone
      width: 35px !important
      height: 35px !important
      top: 33% !important
      right: 2% !important
      display: none !important
    @include tablet
      display: none !important
    &:hover
      background: #92288E
      span
        filter: unset !important
    span
      display: flex
      align-items: center
      justify-content: center
      width: 100%
      height: 100%
      filter: invert(1)
  .carousel-inner
    .carousel-item
      padding: 2rem 10px 2rem 0
      @include phone
        padding: 2rem 12px !important
      .home_slider_image
        width: 90%
        height: 100%
        position: relative
        border-radius: 22px
        margin: 0 auto
        margin-right: 0
        @include tablet
          width: 99%
          margin: 0 auto
          margin-top: 2rem !important
        @include desktop
          width: 78% !important
          margin: 0 auto
          margin-right: 1rem !important
        @include phone
          width: 100% !important
        &::before
          content: ''
          position: absolute
          top: -4px
          left: -4px
          width: calc( 100% + 8px )
          height: calc( 100% + 8px )
          background: linear-gradient(174deg,rgba(237, 87, 231, 1) 0%, rgba(146, 40, 142, 0) 100%)
          z-index: 1
          border-radius: 27px
        img
          width: 100%
          height: 100%
          border-radius: 22px
          z-index: 9
          display: block
          object-fit: cover
          position: relative
      .home_slider_description
        padding-right: 4rem
        @include phone
          margin-bottom: 2rem !important
          padding-right: 0rem !important
        a
          background: #92288E 0% 0% no-repeat padding-box
          border-radius: 10px
          opacity: 1
          font-size: 1rem
          font-weight: 500
          width: fit-content
          display: inline-flex
          align-items: center
          justify-content: center
          padding: 12px 1.2rem
          transition: .4s ease-in-out
          border: 1px solid #92288E
          color: #fff
          &:hover
            background: #fff !important
            color: #92288E !important
        p
          font-size: 1rem
          color: #5A5962
          margin: 0 !important
          margin-bottom: 1.5rem !important
        h1
          color: #1F1D1E
          font-size: 2.75rem
          font-weight: 700
          line-height: 1.2
          margin-bottom: 1rem
          @include phone
            font-size: 2.2rem !important