@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap')
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
$bg_color_1: #000917
$bg_color_2: #003D9B
$bg_color_3: #6AB7FF
$text_light: #ffffff
$text_muted: rgba(255, 255, 255, 0.9)
$btn_dark_bg: #000000
$btn_light_bg: #ffffff
$glass_border: rgba(255, 255, 255, 0.1)
$grid_line_color: rgba(255, 255, 255, 0.04)

@mixin phone
  @media only screen and (max-width: 767px)
    @content

@mixin tablet
  @media only screen and (min-width: 768px) and (max-width: 991px)
    @content

@mixin desktop
  @media only screen and (min-width: 1100px) and (max-width: 1500px)
    @content

@keyframes gradientMove
  0%
    background-position: 0% 50%
  50%
    background-position: 100% 50%
  100%
    background-position: 0% 50%

.hero_main_wrapper
  position: relative
  width: 100%
  min-height: 100vh
  background: linear-gradient(135deg, $bg_color_1 0%, $bg_color_2 50%, $bg_color_3 100%)
  background-size: 200% 200%
  animation: gradientMove 12s ease infinite
  overflow: visible
  padding-top: 15rem
  padding-bottom: 0rem
  display: flex
  align-items: center
  margin-top: -100px
  @include desktop
    padding-top: 16rem
    .common_container
      overflow: hidden !important
  &::after
    content: ''
    position: absolute
    bottom: 0
    left: 0
    width: 100%
    height: 350px
    background: linear-gradient(to top, #ffffff 15%, transparent 100%)
    z-index: 15
    pointer-events: none
    @include desktop
      height: 290px
    @include phone
      height: 250px
.hero_grid_animation
  position: absolute
  inset: 0
  width: 100%
  height: 100%
  display: flex
  justify-content: space-evenly
  pointer-events: none
  overflow: hidden
  z-index: 0

  .grid_line
    width: 1px
    height: 100%
    background: rgba(255,255,255,0.04)
    position: relative
    opacity: 0
    transform: scaleY(0)
    transform-origin: top center

    .grid_shine
      position: absolute
      top: -50%
      left: 50%
      width: 2px
      height: 35vh
      transform: translateX(-50%)
      background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.45), transparent)
      animation: gridShine var(--shine-duration) linear infinite


    &:nth-child(1) .grid_shine
      --shine-duration: 14s
      animation-delay: 1.8s

    &:nth-child(2) .grid_shine
      --shine-duration: 18s
      animation-delay: 7.4s

    &:nth-child(3) .grid_shine
      --shine-duration: 12s
      animation-delay: 0.6s

    &:nth-child(4) .grid_shine
      --shine-duration: 16s
      animation-delay: 9.2s

    &:nth-child(5) .grid_shine
      --shine-duration: 13s
      animation-delay: 3.7s

    &:nth-child(6) .grid_shine
      --shine-duration: 19s
      animation-delay: 11.5s

    &:nth-child(7) .grid_shine
      --shine-duration: 15s
      animation-delay: 5.1s

    &:nth-child(8) .grid_shine
      --shine-duration: 17s
      animation-delay: 13.8s

    &:nth-child(9) .grid_shine
      --shine-duration: 14.5s
      animation-delay: 2.4s


@keyframes gridShine
  0%
    top: -50%

  100%
    top: 150%

@keyframes lineShine
  0%
    top: -50%
  100%
    top: 150%

@keyframes lineShine
  0%
    top: -50%
  100%
    top: 150%

.hero_content_area
  text-align: center
  max-width: 1200px
  margin: 0 auto
  display: flex
  flex-direction: column
  align-items: center
  position: relative
  z-index: 5
  @include desktop
    max-width: 1000px

.hero_title
  font-family: "Georgia", "Times New Roman", serif
  font-size: 4.5rem
  font-weight: 500
  color: $text_light
  line-height: 1.15
  letter-spacing: -0.01em
  margin-bottom: 20px

  span
    display: inline-block
    font-weight: 600

  @include desktop
    font-size: 3.8rem

  @include tablet
    font-size: 3rem

  @include phone
    font-size: 2.4rem

.hero_subtitle
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif
  font-size: 1.15rem
  font-weight: 400
  color: $text_muted
  line-height: 1.6
  max-width: 680px
  margin-bottom: 40px

  @include phone
    font-size: 1.05rem
    margin-bottom: 30px

.hero_btn_group
  display: flex
  align-items: center
  justify-content: center
  position: relative
  z-index: 10

  @include phone
    flex-direction: column
    width: 100%
    max-width: 300px
    gap: 10px

.btn_hero
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif
  padding: 16px 42px
  font-size: 0.95rem
  font-weight: 500
  text-decoration: none
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1)
  display: inline-flex
  justify-content: center
  align-items: center
  position: relative

  @include phone
    width: 100%
    clip-path: none !important
    border-radius: 8px

.btn_dark
  background-color: $btn_dark_bg
  color: $text_light
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px)

  &:hover
    background-color: #222222
    transform: translateY(-2px)
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3)

.btn_light
  background-color: $btn_light_bg
  color: $btn_dark_bg
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%)

  &:hover
    background-color: #f0f0f0
    transform: translateY(-2px)
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2)

.hero_media_showcase
  position: relative
  width: 100%
  max-width: 1200px
  margin: 60px auto 0
  perspective: 1800px
  z-index: 5
  @include desktop
    max-width: 1000px

  @include phone
    margin: 50px auto 0

.glass_outer_div
  position: relative
  border-radius: 24px
  padding: 16px
  background: #f5f5f526
  backdrop-filter: blur(3px)
  isolation: isolate
  border: 1px solid rgba(255, 255, 255, 0.12)
  box-sizing: border-box
  transform-style: preserve-3d
  will-change: transform
  backface-visibility: hidden
  &::before
    content: ""
    position: absolute
    inset: 0
    border-radius: inherit
    padding: 1px
    background: linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.6) 50%, transparent 52%)
    background-size: 300% 300%
    animation: shineBorder 8s linear infinite
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)
    -webkit-mask-composite: xor
    mask-composite: exclude
    pointer-events: none
    z-index: 3
  > *
    position: relative
    z-index: 5

  @include phone
    padding: 12px

.hard_white_div
  background: #ffffff
  border-radius: 12px
  overflow: hidden
  width: 100%
  height: 100%
  position: relative
  z-index: 5
  padding: 16px
  video
    width: 100%
    height: 100%
  .main_media_element
    display: block
    width: 100%
    height: auto
    object-fit: cover
  @include phone
    padding: 6px

.main_media_element
  width: 100%
  height: auto
  display: block
  border-radius: 8px

  img
    width: 100%
    height: auto
    display: block
    border-radius: 8px

.float_element
  position: absolute
  z-index: 20

  img
    display: block
    max-width: 100%
    height: auto

.float_left
  bottom: 15%
  left: -8%
  width: 280px
  @include desktop
    width: 240px

  @include tablet
    left: -2%
    width: 220px

  @include phone
    left: 10px
    bottom: 5%
    width: 160px

.float_right
  top: 11%
  right: -17%
  width: 340px
  @include desktop
    width: 300px
    right: -14%
  @include tablet
    right: -2%
    width: 200px

  @include phone
    right: 10px
    top: -10px
    width: 140px

.client_section
  margin-top: 4rem
  margin-bottom: 8rem
  h2
    font-size: 1.375rem !important
    text-align: center
    font-weight: 400
    color: #4A5565
    margin-bottom: 4rem
    span
      font-weight: 500 !important
  .client_wrapper
    display: grid
    grid-template-columns: repeat(7, minmax(0, 1fr))
    width: 100%
    gap: 15px
    @include phone
      grid-template-columns: repeat(2, minmax(0, 1fr))
      gap: 45px
    .client_image
      width: 100%
      height: 100%
      box-sizing: border-box
      &:hover
        img
          transform: scale(1.05)
      img
        width: 100%
        height: 4rem
        object-fit: contain !important
        transition: .4s ease-in-out

// PROGRESS SLIDER STARTS

$brand_blue: #0a58d0
$brand_dark: #0f54d4
$brand_bg: #F6F7FF
$text_dark: #080808
$text_gray: rgba(75, 85, 99, 0.9)

.enterprise-slider-section
  background-color: #ffffff
  -webkit-font-smoothing: antialiased
  font-family: 'Inter', sans-serif
  margin-top: 6rem
  .custom_container_fluid
    width: 100% !important
    max-width: none !important
    margin: 0 auto 8rem auto !important
    padding: 16px 0 !important
    box-sizing: border-box
    *
      box-sizing: border-box
    @media (min-width: 640px)
      padding: 32px 0 !important
    @media (min-width: 1024px)
      padding: 64px 0 !important

  .common_container
    width: 96% !important
    max-width: none !important
    margin: 0 auto !important

  .slider_card
    background-color: $brand_bg
    border-radius: 32px
    padding: 24px
    position: relative
    overflow: hidden
    display: flex
    flex-direction: column
    justify-content: space-between
    width: 100%
    box-shadow: 0 24px 60px -15px rgba(10, 88, 208, 0.08)
    border: 1px solid #ffffff
    @include phone
      box-shadow: none !important
    @media (min-width: 640px)
      border-radius: 48px
      padding: 40px
    @media (min-width: 1024px)
      flex-direction: row
      align-items: stretch
      border-radius: 56px
      padding: 80px
      min-height: 720px

  .col_left, .col_center, .col_right
    width: 100%
    position: relative
    z-index: 10
    display: flex
    flex-direction: column
    @media (min-width: 1024px)
      width: 33.3333%
      height: auto

  .col_left
    @media (min-width: 1024px)
      justify-content: space-between

  .col_right
    @media (min-width: 1024px)
      justify-content: space-between
      padding-left: 64px

  .num_container
    position: absolute
    bottom: 16px
    left: 16px
    width: 100%
    height: 120px
    pointer-events: none
    z-index: 0
    perspective: 1200px
    transform-style: preserve-3d
    @media (min-width: 640px)
      height: 180px
    @media (min-width: 1024px)
      bottom: 40px
      left: 40px
      height: 300px

  .active_num
    position: absolute
    bottom: 0
    left: -10px
    font-size: 130px
    line-height: 0.75
    font-weight: 800
    letter-spacing: -0.05em
    user-select: none
    will-change: transform
    backface-visibility: hidden
    -webkit-backface-visibility: hidden
    background: linear-gradient(to bottom, rgba(10, 88, 208, 0.12) 0%, rgba(10, 88, 208, 0.0) 80%)
    -webkit-background-clip: text
    background-clip: text
    color: transparent
    @media (min-width: 640px)
      font-size: 180px
    @media (min-width: 1024px)
      font-size: 280px

  .slide_title_wrapper
    padding-top: 8px
    @media (min-width: 1024px)
      padding-top: 40px

  .slide_title
    font-size: 2rem
    line-height: 1.15
    font-weight: 600
    color: $brand_blue
    letter-spacing: -0.025em
    margin: 0
    @media (min-width: 640px)
      font-size: 2.75rem
    @media (min-width: 1024px)
      font-size: 3.25rem

  .title_mask
    overflow: hidden
    display: block
    padding-bottom: 0.1em

  .title_mask_inner
    display: block
    will-change: transform

  .slide_desc_wrapper
    padding-top: 0
    @media (min-width: 1024px)
      padding-top: 40px

  .slide_desc
    color: $text_gray
    font-size: 0.875rem
    line-height: 1.6
    font-weight: 500
    margin: 0 0 24px 0
    opacity: 0
    will-change: transform
    @media (min-width: 640px)
      font-size: 1rem
    @media (min-width: 1024px)
      font-size: 1.125rem
      line-height: 1.7
      margin-bottom: 40px

  .btn_primary
    background-color: $text_dark
    color: #ffffff
    padding: 14px 24px
    font-size: 0.85rem
    font-weight: 600
    letter-spacing: 0.025em
    text-decoration: none
    border: none
    cursor: pointer
    display: inline-flex
    align-items: center
    gap: 8px
    outline: none
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px)
    transition: background-color 0.3s
    &:hover
      background-color: #1f2937
    @media (min-width: 1024px)
      padding: 16px 28px
      font-size: 0.95rem

    .btn_icon
      font-size: 1.125rem
      line-height: 1
      transition: transform 0.3s

    &:hover .btn_icon
      transform: translateX(6px)

  .col_center
    z-index: 0
    height: 340px
    justify-content: center
    align-items: center
    margin: 24px 0
    perspective: 1400px
    @media (min-width: 640px)
      height: 420px
    @media (min-width: 1024px)
      height: auto
      margin: 0

  .image_stack_container
    position: relative
    width: 100%
    height: 100%
    display: flex
    justify-content: center
    align-items: center
    transform-style: preserve-3d
    will-change: transform

  .glass_wrapper
    width: 440px
    height: 550px
    position: absolute
    top: 50%
    left: 50%
    will-change: transform, filter, opacity
    transform-style: preserve-3d

  .liquid_glass_inner
    width: 100%
    height: 100%
    padding: 8px
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%)
    backdrop-filter: blur(20px)
    -webkit-backdrop-filter: blur(20px)
    /* DEFAULT NO BORDER/SHADOW - Only active gets it via JS */
    box-shadow: 0 30px 60px -10px rgba(10, 88, 208, 0)
    border: 1px solid rgba(255, 255, 255, 0)
    border-radius: 28px
    transform: translateZ(0)
    will-change: border-color, box-shadow
    @media (min-width: 640px)
      padding: 10px
    @media (min-width: 1024px)
      border-radius: 36px

  .glass_img
    width: 100%
    height: 100%
    object-fit: cover
    border-radius: 20px
    @media (min-width: 1024px)
      border-radius: 28px

  .nav_wrapper
    display: flex
    align-items: center
    justify-content: space-between
    gap: 16px
    margin-top: 40px
    width: 100%
    padding-bottom: 8px
    @media (min-width: 640px)
      gap: 40px
    @media (min-width: 1024px)
      justify-content: flex-end
      margin-top: auto
      padding-bottom: 0

  .pagination_dots
    display: flex
    gap: 8px
    align-items: center
    @media (min-width: 640px)
      gap: 10px

  .dot
    height: 6px
    border-radius: 9999px
    border: none
    cursor: pointer
    outline: none
    transition: all 0.5s ease-out
    background-color: #d1d5db
    width: 8px
    @media (min-width: 640px)
      height: 8px
    &:hover:not(.active)
      background-color: #9ca3af

  .dot.active
    background-color: $text_dark
    width: 24px
    @media (min-width: 640px)
      width: 32px

  .nav_group
    display: flex
    background: #ffffff
    border-radius: 12px
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06)
    position: relative
    z-index: 20

  .nav_btn_prev, .nav_btn_next
    width: 48px
    height: 48px
    display: flex
    justify-content: center
    align-items: center
    border: none
    cursor: pointer
    outline: none
    transition: background-color 0.3s, color 0.3s
    @media (min-width: 640px)
      width: 56px
      height: 56px
    @media (min-width: 1024px)
      width: 64px
      height: 64px

  .nav_btn_prev
    background: #ffffff
    color: #9ca3af
    border-right: 1px solid #f3f4f6
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px), 0 14px)
    &:hover
      color: $brand_blue
      background-color: #f9fafb

    .nav_icon
      transition: transform 0.3s
    &:hover .nav_icon
      transform: translateX(-4px)

  .nav_btn_next
    background: $brand_blue
    color: #ffffff
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%)
    &:hover
      background-color: #0848b5

    .nav_icon
      transition: transform 0.3s
    &:hover .nav_icon
      transform: translateX(4px)

  .nav_icon
    width: 20px
    height: 20px
    stroke: currentColor
    stroke-width: 2.5
    fill: none
    @media (min-width: 1024px)
      width: 24px
      height: 24px
// PROGRESS SLIDER ENDS

// COMPREHENSIVE FEATURES STARTS

.comprehensive_features_main
  margin-bottom: 8rem
  @include desktop
    margin-bottom: 16rem
  .comprehensive_features_common
    border-width: 2px
    border-style: dashed
    dashes: 2, 6
    padding: 2rem
    border-radius: 20px
    border-color: #B2BCCF
    @include phone
      padding: 1rem !important
    .comprehensive_features_image
      position: relative
      border-radius: 20px
      width: 100%
      height: 100%
      img
        width: 100%
        height: auto !important
        object-fit: contain !important
      .animated_small_cards
        width: 80%
        margin: 0 auto
        position: absolute
        top: 80%
        left: 50%
        transform: translate(-50%, -50%)
        display: flex
        align-items: center
        justify-content: center
        gap: 1rem
        .first_one
          background: #FFFFFF4D
          box-shadow: 0px 4px 16px 0px #0A0D2E24
          border: 1px solid #ffffff
          h4
            font-size: 1.375rem !important
            font-weight: 700
            color: #0661F6
            margin-top: 0 !important
            margin-bottom: .4rem !important
          p
            font-size: 0.875rem
            color: #0661F6
            font-weight: 400
            margin: 0 !important
        .second_one
          background: #0661F6
          box-shadow: 0px 4px 16px 0px #0A0D2E33
          h4
            font-size: 1.375rem !important
            font-weight: 700
            color: #ffffff
            margin-top: 0 !important
            margin-bottom: .4rem !important
          p
            font-size: 0.875rem
            color: #ffffff
            font-weight: 400
            margin: 0 !important
        .third_one
          background: rgba(245, 247, 250, 0.45)
          backdrop-filter: blur(8px) saturate(90%)
          -webkit-backdrop-filter: blur(14px) saturate(160%)
          border: 1px solid rgba(255, 255, 255, 0.7)
          box-shadow: 0px 8px 24px 0px rgba(10, 13, 46, 0.08), inset 0px 2px 4px 0px rgba(255, 255, 255, 0.6), inset 0px -2px 4px 0px rgba(0, 0, 0, 0.02)
          h4
            font-size: 0.7rem !important
            color: #10B981 !important
            font-weight: 700 !important
            margin-top: 0 !important
            margin-bottom: .4rem !important
            display: flex
            align-items: center
            span
              width: 8px
              height: 8px
              margin-right: 6px
              background-color: #10B981 !important
              border-radius: 50%
              display: inline-flex
          p
            font-size: 1.375rem !important
            font-weight: 700 !important
            color: #0661F6 !important
            margin: 0 !important
        .common_grid
          width: fit-content
          display: flex
          flex-direction: column
          padding: 1.5rem
          border-radius: 12px
    .comprehensive_features_description
      margin-bottom: 3rem
      .features_description
        display: flex
        align-items: center
        justify-content: space-between
        @include phone
          flex-wrap: wrap
          a
            margin-bottom: 2rem !important
        h3
          font-family: "Source Sans 3", sans-serif
          font-size: 3.5rem
          font-weight: 500
          color: #0661F6
          margin-bottom: 1rem
          margin-top: 0 !important
          width: 60%
          @include phone
            width: 100% !important
            line-height: 1.2 !important
        .button_div
          height: 100%
          aling-content: center
          a
            background-color: #000000
            color: #ffffff
            padding: 14px 28px
            font-size: 1rem
            font-weight: 500
            border: none
            clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px)
            display: inline-flex
            align-items: center
            gap: 8px
            cursor: pointer
            align-self: flex-start
            text-decoration: none
            transition: opacity 0.3s ease
            will-change: transform, opacity
            border-radius: 4px
            &:hover
              opacity: 0.85
              color: #ffffff
      p
        font-size: 1.25rem
        color: #4C5673
        font-weight: 400
        margin-top: 0 !important
        margin-bottom: 2rem !important
        @include phone
          margin-bottom: 1rem !important

// COMPREHENSIVE FEATURES ENDS

// ENVELOPE SLIDE STARTS
$bg-color: #f8f9fa
$purple-text: #8b5cf6
$orange-text: #ea580c
$blue-text: #0066ff
$dark-text: #0f172a
$muted-text: #596780

*
  box-sizing: border-box
  margin: 0
  padding: 0

.scroll-container
  height: 450vh
  position: relative

.viewport-lock
  position: sticky
  top: 0
  left: 0
  width: 100vw
  height: 100vh
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  perspective: 1500px

  .section-header
    text-align: center
    max-width: 920px
    padding: 0 20px
    z-index: 1
    margin-top: -60px
    will-change: transform, opacity
    @include desktop
      margin-top: 0
    span
      font-family: 'Source Serif 4', Georgia, serif
      font-size: 2.25rem
      font-weight: 500
      color: $dark-text
      display: block
      margin-bottom: 12px

    h1
      font-family: 'Source Sans 3', sans-serif
      font-size: 3.063rem
      font-weight: 800
      color: $dark-text
      line-height: 1.3
      letter-spacing: -0.5px

.envelope-wrapper
  position: relative
  width: 100vw
  max-width: 750px
  padding-top: 180px
  margin: 7rem auto 0 auto
  z-index: 10
  will-change: transform, opacity
  @include desktop
    max-width: 570px
    padding-top: 9rem
    margin: 8rem auto 16rem auto

.envelope-container
  position: relative
  width: 100%
  aspect-ratio: 1.6

.env-back
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: 1
  img
    width: calc(100% + 2rem)
    height: auto
    object-fit: cover
    position: relative
    z-index: 999
    bottom: 6rem
    left: -1rem
    transform: scale(1.1)

.cards-deck
  position: absolute
  width: 92%
  height: 94%
  bottom: 3%
  left: 4%
  z-index: 3

.card
  position: absolute
  width: 100%
  height: 100%
  top: 0
  left: 0
  background: transparent
  backdrop-filter: blur(20px)
  -webkit-backdrop-filter: blur(20px)
  border-radius: 16px
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1)
  transform-origin: center center
  will-change: transform, opacity
  border: none

  .glass-svg-border
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    pointer-events: none
    z-index: 1

    .outer-rect
      x: 1px
      y: 1px
      width: calc(100% - 2px)
      height: calc(100% - 2px)
      fill: rgba(255, 255, 255, 0.2)
      stroke-width: 2px

    .inner-rect
      x: 12px
      y: 12px
      width: calc(100% - 24px)
      height: calc(100% - 24px)
      fill: #ffffff

  .card-content
    position: relative
    z-index: 2
    display: grid
    grid-template-columns: 1fr 0.5fr
    gap: 30px
    align-items: center
    padding: 35px 45px
    height: 100%
    @include phone
      padding: 2rem 2rem !important
      grid-template-columns: 1fr !important

#card1
  z-index: 5
  h2
    color: $purple-text

#card2
  z-index: 4
  h2
    color: $orange-text

#card3
  z-index: 3
  h2
    color: $blue-text

.card-left
  display: flex
  flex-direction: column
  justify-content: center
  h2
    font-family: 'Source Serif 4', Georgia, serif
    font-size: 1.75rem
    font-weight: 700
    line-height: 1.25
    margin-bottom: 12px
  p
    color: $muted-text
    font-size: 1rem
    line-height: 1.6

.card-right
  display: flex
  flex-direction: column
  align-items: center
  text-align: center
  gap: 12px
  .profile-img-wrapper
    width: 127px
    height: 127px
    border-radius: 50%
    object-fit: cover
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15)
    @include phone
      width: 60px !important
      height: 60px !important
    img
      width: 100%
      height: 100%
  .profile-info
    h4
      color: $dark-text
      font-size: 1.25rem
      font-weight: 700
      margin-bottom: 4px
    span
      color: $muted-text
      font-size: 1rem
      line-height: 1.3
      display: block

.env-front-image
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: 4
  pointer-events: none
  img
    width: calc(100% + 2rem)
    height: auto
    object-fit: cover
    position: relative
    z-index: 999
    bottom: 6rem
    left: -1rem
    transform: scale(1.1)

// ===== Mobile/Tablet overrides =====
@include phone
  .viewport-lock
    position: relative
    top: auto
    height: auto
    min-height: 100vh
    justify-content: flex-start
    padding-top: 2rem
    &.is-fixed
      position: fixed
      top: 0
      left: 0
      width: 100vw
      height: 100vh
      min-height: 100vh
      justify-content: center
      padding-top: 0
      z-index: 50
  .scroll-container
    height: 600vh
  .section-header
    margin-top: -40px
    span
      font-size: 1.5rem
      margin-bottom: 8px
    h1
      font-size: 1.8rem
  .envelope-wrapper
    padding-top: 110px
    width: 90% !important
    max-width: 100% !important
    margin: 3rem auto 0 auto !important
  .card-content
    grid-template-columns: 1fr
    padding: 24px
    gap: 15px
    .card-left
      h2
        font-size: 1.4rem
        margin-bottom: 8px
      p
        font-size: 0.95rem
    .card-right
      flex-direction: row
      text-align: left
      justify-content: flex-start
      gap: 16px
      .profile-img-wrapper
        width: 60px !important
        height: 60px !important
        flex-shrink: 0
      .profile-info
        h4
          font-size: 1.15rem
          margin-bottom: 2px
        span
          font-size: 0.9rem

@include tablet
  .viewport-lock
    position: relative
    top: auto
    height: auto
    min-height: 100vh
    justify-content: flex-start
    padding-top: 2rem
    &.is-fixed
      position: fixed
      top: 0
      left: 0
      width: 100vw
      height: 100vh
      min-height: 100vh
      justify-content: center
      padding-top: 0
      z-index: 50
  .scroll-container
    height: 550vh
  .envelope-wrapper
    padding-top: 130px
    width: 85% !important
    max-width: 100% !important
    margin: 4rem auto 0 auto !important
  .section-header
    margin-top: -30px
    span
      font-size: 1.8rem
    h1
      font-size: 2.2rem
  .card-content
    padding: 28px 32px
    .card-left
      h2
        font-size: 1.5rem

@include tablet-ls
  .viewport-lock
    position: relative
    top: auto
    height: auto
    min-height: 100vh
    justify-content: flex-start
    padding-top: 2rem
    &.is-fixed
      position: fixed
      top: 0
      left: 0
      width: 100vw
      height: 100vh
      min-height: 100vh
      justify-content: center
      padding-top: 0
      z-index: 50
  .scroll-container
    height: 500vh
  .envelope-wrapper
    padding-top: 150px
    width: 80% !important
    max-width: 100% !important
    margin: 5rem auto 0 auto !important
  .section-header
    margin-top: -20px
    span
      font-size: 2rem
    h1
      font-size: 2.5rem
  .card-content
    padding: 30px 38px
    .card-left
      h2
        font-size: 1.6rem
// ENVELOPE SLIDER ENDS

// TIMELINE STARTS
.time_section_only
  position: relative
  width: 100%
  min-height: 100vh
  background: #ffffff
  overflow: hidden
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  padding: 2rem 0

  .timeline_heading_wrapper
    width: 100%
    margin: 0 auto
    padding-bottom: 1.5rem !important
    margin-bottom: 0 !important
    text-align: center

    h2
      font-family: 'Source Serif 4', Georgia, serif
      font-size: 2.25rem
      font-weight: 400
      color: #111827
      display: block
      margin-bottom: 12px

    p
      font-family: 'Source Sans 3', sans-serif
      font-size: 3.063rem
      font-weight: 700
      color: #111827
      line-height: 1.3
      letter-spacing: -0.5px
      margin: 0 !important

  .custom_container_fluid
    width: 100%
    padding: 0 20px
    box-sizing: border-box
    display: flex
    align-items: center
    justify-content: center

    .common_container
      width: 100%
      max-width: 1200px !important
      margin: 0 auto

      .common_container_timeline
        position: relative
        width: 100%
        min-height: 700px
        display: flex
        align-items: center
        justify-content: center

        @include desktop
          display: block !important
          min-height: 520px !important
          padding-top: 0px

        @media (max-width: 991px)
          display: block !important
          height: auto !important
          min-height: auto !important
          padding-top: 20px
          padding-bottom: 20px

        .timeline_center_line
          position: absolute
          left: 50%
          top: 15%
          bottom: 15%
          width: 4px
          background-image: linear-gradient(to bottom, #d3d3d3 50%, transparent 50%)
          background-size: 4px 14px
          transform: translateX(-50%)
          -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%)
          mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%)
          z-index: 100

          @include desktop
            top: 0
            bottom: 0
            height: 100%

          @media (max-width: 991px)
            left: 24px !important
            top: 0 !important
            bottom: 0 !important
            transform: translateX(0) !important
            height: 100% !important
            width: 3px !important
            background-image: linear-gradient(to bottom, #d3d3d3 50%, transparent 50%)
            background-size: 3px 12px
            -webkit-mask-image: none !important
            mask-image: none !important
            display: none !important

        .dynamic_tail
          position: absolute
          left: 50%
          top: 50%
          width: 4px
          height: 0px
          background: linear-gradient(to bottom, transparent, #60a5fa 10%, #2563eb 90%, transparent)
          box-shadow: 0 0 15px 4px rgba(59, 130, 246, 0.7), 0 0 30px 8px rgba(96, 165, 250, 0.4)
          transform: translateX(-50%) translateZ(0)
          z-index: 101
          border-radius: 10px
          pointer-events: none
          will-change: height, top

          @include desktop
            top: 50% !important

          @media (max-width: 991px)
            display: none !important

        .dynamic_location_icon
          position: absolute
          left: 50%
          top: 50%
          transform: translate(-50%, -50%)
          z-index: 102
          background: #ffffff
          border-radius: 50%
          display: flex
          align-items: center
          justify-content: center
          box-shadow: 0 0 20px rgba(59, 130, 246, 0.4)

          @include desktop
            top: 50%

          @media (max-width: 991px)
            left: 24px !important
            top: 0 !important
            transform: translate(0, -50%) !important
            width: 38px !important
            height: 38px !important
            box-shadow: 0 0 16px rgba(59, 130, 246, 0.3)
            display: none !important
            svg
              width: 22px !important
              height: 22px !important

        .module_row
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          display: flex
          justify-content: space-between
          align-items: center
          pointer-events: none
          z-index: 10
          will-change: transform

          @include desktop
            height: 100%
            top: 0

          .shape_accent
            position: absolute
            width: 80%
            height: 80%
            z-index: -1
            right: -8%
            bottom: -8%

            img, picture, picture img
              width: 100%
              height: 100%
              object-fit: contain
              object-position: bottom right

          .mockup-float
            right: -12% !important
            left: auto !important
            top: -4% !important

          &.second_module, &.fourth_module
            flex-direction: row-reverse

            .shape_accent
              right: auto !important
              left: -8% !important
              object-position: bottom left !important
              img, picture, picture img
                object-position: bottom left !important

            .mockup-float
              right: -12% !important
              left: auto !important
              top: -10% !important

          @media (max-width: 991px)
            position: relative !important
            flex-direction: column !important
            padding: 0 !important
            padding-left: 6px !important
            width: 100% !important
            gap: 18px !important
            justify-content: flex-start !important
            height: auto !important
            margin-bottom: 48px !important
            transform: none !important
            pointer-events: auto !important

            .mockup-float
              display: none !important

            .shape_accent
              display: none !important

            .image_section_only
              .mockup-base
                .image-container-slot
                  min-height: 160px !important

          &.second_module, &.fourth_module
            @media (max-width: 991px)
              flex-direction: column !important

          .content_col, .image_col, .image_section_only
            pointer-events: auto
            will-change: transform
            backface-visibility: hidden

          .content_col
            width: 45%
            display: flex
            flex-direction: column
            align-items: flex-start
            gap: 15px

            @media (max-width: 991px)
              width: 100% !important
              transform: none !important
              padding-right: 0 !important
              gap: 10px !important

            .mod_title
              font-size: 36px
              font-weight: 800
              color: #111827
              margin: 0
              line-height: 1.2

              @media (max-width: 991px)
                font-size: 22px !important

            .expandable_content
              overflow: hidden
              width: 100%
              display: block

              @media (max-width: 991px)
                height: auto !important
                overflow: visible !important

              .expandable_inner
                padding-top: 5px
                padding-bottom: 10px
                will-change: transform

                @media (max-width: 991px)
                  padding: 0 !important

                .mod_desc
                  font-size: 16px
                  color: #6b7280
                  margin: 0
                  line-height: 1.6
                  padding-bottom: 12px

                  @media (max-width: 991px)
                    font-size: 14px !important

                .feature_list
                  list-style: none
                  padding: 0
                  margin: 0
                  display: flex
                  flex-direction: column
                  gap: 10px

                  li
                    display: flex
                    align-items: center
                    gap: 8px
                    font-size: 15px
                    color: #374151
                    font-weight: 500

                    @media (max-width: 991px)
                      font-size: 13px !important
                      gap: 6px !important

                    .check_icon
                      width: 18px
                      height: 18px
                      display: flex
                      align-items: center
                      justify-content: center
                      flex-shrink: 0

                      svg, img, picture, picture img
                        width: 100%
                        height: 100%
                        object-fit: contain

            .btn-blue
              display: inline-flex
              align-items: center
              justify-content: center
              background: #3b82f6
              color: #fff
              padding: 14px 28px
              border-radius: 8px
              text-decoration: none
              font-weight: 600
              font-size: 15px
              width: fit-content
              margin-top: 8px
              line-height: 1.2
              transition: all 0.3s ease
              clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px)

              &:hover
                background: #2563eb
                transform: translateY(-2px)

              @media (max-width: 991px)
                font-size: 13px !important
                padding: 10px 20px !important
                border-radius: 0px !important
                width: 100% !important
                margin-top: 0 !important

          .center_gap_col
            width: 10%

            @media (max-width: 991px)
              display: none !important

          .image_section_only
            position: relative
            perspective: 1400px
            width: 45%
            padding: 1.5rem

            @media (max-width: 991px)
              width: 100% !important
              padding: 0 !important
              padding-top: 0 !important
              margin-top: 0 !important
              transform: none !important

            .image_col
              position: relative
              z-index: 5
              width: 100%
              transform-style: preserve-3d

              @media (max-width: 991px)
                transform: none !important

              .mockup-base
                width: 100%
                border-radius: 20px
                overflow: hidden
                padding: 1.5rem
                background-color: rgba(244, 245, 247, 0.5)
                backdrop-filter: blur(25px) saturate(180%)
                -webkit-backdrop-filter: blur(25px) saturate(180%)
                border: 1px solid rgba(255, 255, 255, 0.4)
                transform-style: preserve-3d
                will-change: transform
                backface-visibility: hidden

                @media (max-width: 991px)
                  padding: 0.75rem !important
                  border-radius: 14px !important
                  backdrop-filter: none !important
                  -webkit-backdrop-filter: none !important
                  background: #f8f9fa !important
                  border: 1px solid #e5e7eb !important

                .image-container-slot
                  width: 100%
                  height: 100%
                  min-height: 250px
                  overflow: hidden !important
                  border-radius: 12px
                  background: #ffffff

                  @media (max-width: 991px)
                    min-height: 140px !important
                    border-radius: 8px !important

                  video, img, picture, picture img
                    width: 100%
                    height: 100%
                    display: block
                    border-radius: 12px
                    object-fit: cover
                    transform: scale(1.01) !important
                    will-change: transform

                    @media (max-width: 991px)
                      border-radius: 8px !important

              .mockup-float
                position: absolute
                width: 53% !important
                z-index: 15
                transform-style: preserve-3d
                will-change: transform
                backface-visibility: hidden

                @media (max-width: 991px)
                  display: none !important

                .ambient_float_anim
                  width: 100%
                  height: 100%
                  transform-style: preserve-3d
                  will-change: transform

                  .float_image
                    width: 100%
                    height: 100%

                    img
                      width: 100%
                      height: auto
                      object-fit: contain !important

                .animated_content_card_wrapper
                  border-radius: 20px
                  transform-style: preserve-3d
                  isolation: isolate
                  will-change: transform
                  backface-visibility: hidden

                  .animated_content_card_inner
                    width: 100%
                    height: 100%
                    backface-visibility: hidden
                    -webkit-font-smoothing: antialiased

                    ul
                      list-style: none
                      padding: 0
                      margin-bottom: 0 !important
                      display: flex
                      flex-direction: column

                      li
                        display: flex
                        align-items: center
                        font-size: 0.8rem !important
                        font-weight: 500
                        color: #0D0E12
                        margin-bottom: 0.6rem

                        p
                          margin: 0
                          font-size: 0.8rem !important

                          span
                            font-weight: 700
                            color: #10b981

                        &:nth-child(4)
                          margin-bottom: 0 !important

                        .check_icon
                          display: none

                        &:nth-child(1)
                          background: rgba(124, 58, 237, 0.08)
                          font-weight: 700 !important
                          color: #7C3AED
                          padding: .6rem .8rem
                          border-radius: 10px
                          width: fit-content
                          margin-bottom: 0.8rem

                          .check_icon
                            width: 16px
                            height: 16px
                            margin-right: 6px
                            display: inline-flex !important
                            align-items: center
                            justify-content: center

                            img, svg, picture, picture img
                              width: 100%
                              height: 100%
                              object-fit: contain

                        .empty_circle
                          display: none

                        .empty_circle
                          width: 6px
                          height: 6px
                          border-radius: 50%
                          background-color: #E9682F
                          display: inline-block
                          margin-right: 8px
                          flex-shrink: 0

@media (max-width: 480px)
  .time_section_only
    .timeline_heading_wrapper
      padding-bottom: 2rem !important

      h2
        font-size: 1.4rem !important

      p
        font-size: 1.6rem !important

    .custom_container_fluid
      padding: 0 12px !important

    .common_container_timeline
      padding-top: 8px !important
      padding-bottom: 10px !important

    .module_row
      padding-left: 44px !important
      margin-bottom: 36px !important
      gap: 14px !important

      .content_col
        .mod_title
          font-size: 18px !important

        .expandable_content
          .expandable_inner
            .mod_desc
              font-size: 13px !important

            .feature_list li
              font-size: 12px !important

        .btn-blue
          font-size: 12px !important
          padding: 8px 16px !important

      .image_section_only
        .mockup-base
          padding: 0.5rem !important

          .image-container-slot
            min-height: 110px !important

    .timeline_center_line
      left: 18px !important
      width: 2.5px !important

    .dynamic_location_icon
      left: 18px !important
      width: 32px !important
      height: 32px !important

      svg
        width: 18px !important
        height: 18px !important
// CREATE PROFIT SECTION STARTS

.create_profit_section
  width: 100%
  overflow: hidden
  padding: 60px 0
  background-size: cover
  background-position: center
  margin-top: 6rem
  margin-bottom: 7rem
  .marquee_bg
    background-size: 100% 100%
    background-repeat: no-repeat
    background-position: center
    padding: 6rem 0rem 6rem 0rem
    .marquee_heading
      width: 40%
      margin: 0 auto
      text-align: center
      margin-bottom: 4rem
      h2
        font-family: 'Source Serif 4', Georgia, serif
        font-size: 2.25rem
        font-weight: 500
        color: $dark-text
        display: block
        margin-bottom: 12px

      h3
        font-family: 'Source Sans 3', sans-serif
        font-size: 3.063rem
        font-weight: 800
        color: $dark-text
        line-height: 1.3
        letter-spacing: -0.5px
      p
        font-size: 1.25rem
        font-weight: 400
        color: #4C5673
        margin: 0 !important
      a
        background-color: #000000
        color: #ffffff
        padding: 14px 28px
        font-size: 1rem
        font-weight: 500
        border: none
        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px)
        display: inline-flex
        align-items: center
        gap: 8px
        cursor: pointer
        align-self: flex-start
        text-decoration: none
        transition: opacity 0.3s ease
        will-change: transform, opacity
        border-radius: 4px
        margin-top: 3rem
        &:hover
          opacity: 0.85
          color: #ffffff
  .marquee_wrapper
    display: flex
    flex-direction: column
    gap: 24px
    width: 100%

  .marquee_row
    display: flex
    width: 100%
    overflow: hidden
    position: relative
    user-select: none
    white-space: nowrap

  .marquee_track
    display: flex
    gap: 24px
    flex-shrink: 0
    will-change: transform

  .glass_card
    flex-shrink: 0
    width: 180px
    height: 180px
    display: flex
    align-items: center
    justify-content: center
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 100' width='100%25' height='100%25' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='cg' x1='10%25' y1='0%25' x2='30%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.25'/%3E%3Cstop offset='30%25' stop-color='%23fff' stop-opacity='0.03'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.0'/%3E%3C/linearGradient%3E%3CradialGradient id='er' cx='0%25' cy='0%25' r='40%25'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.45'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='ge' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.6'/%3E%3Cstop offset='15%25' stop-color='%23fff' stop-opacity='0.2'/%3E%3Cstop offset='85%25' stop-color='%23000' stop-opacity='0.05'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='180' height='100' rx='12' fill='url(%23cg)'/%3E%3Crect width='180' height='100' rx='12' fill='url(%23er)'/%3E%3Crect x='0.5' y='0.5' width='179' height='99' rx='11.5' fill='none' stroke='url(%23ge)' stroke-width='1.2'/%3E%3C/svg%3E")
    background-size: 100% 100%
    background-repeat: no-repeat
    backdrop-filter: blur(4px) saturate(110%)
    -webkit-backdrop-filter: blur(4px) saturate(110%)
    background: #FFFFFF4D
    border: none
    border-radius: 50%
    padding: 2rem
    text-shadow: 0 1px 2px rgba(0,0,0,0.1)
    img
      max-width: 100%
      max-height: 4rem
      width: 100%
      object-fit: contain !important

    .main_media_element
      max-width: 100%
      max-height: 100%
      object-fit: contain

@media (max-width: 768px)
  .create_profit_section
    padding: 40px 0

    .marquee_wrapper
      gap: 16px

    .marquee_track
      gap: 16px

    .glass_card
      width: 140px
      height: 80px
      border-radius: 8px
      padding: 10px

// CREATE PROFIT SECTION ENDS

// FAQ SECTION STARTS

.faq-header
  text-align: center
  margin: 0 auto
  margin-bottom: 4rem !important
  max-width: 800px

.serif-italic
  font-family: 'Playfair Display', serif
  font-style: italic
  font-size: 2.25rem
  font-weight: 500
  color: #0f172a
  margin-bottom: 0.2rem

.main-heading
  font-size: 3.063rem
  font-weight: 700
  color: #0f172a
  margin-bottom: 1rem

.sub-text
  font-size: 1.25rem
  color: #64748b
  line-height: 1.6

.faq-container
  width: 100%
  max-width: 1300px
  display: flex
  flex-direction: column
  gap: 1.2rem
  margin: 0 auto

.faq-item
  display: flex
  gap: 1.2rem
  width: 100%
  align-items: flex-start
  justify-content: space-between

.faq-content
  background-color: #f1f4f9
  border-radius: 12px
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease
  cursor: pointer
  padding: 0 1.8rem
  min-height: 64px
  display: flex
  flex-direction: column
  width: 75%

.faq-question-container
  display: flex
  align-items: center
  min-height: 64px

.faq-question
  font-size: 1.5rem
  font-weight: 600
  color: #0D0E12
  transition: color 0.3s ease
  margin: 0

.faq-answer-wrapper
  display: grid
  grid-template-rows: 0fr
  transition: grid-template-rows 0.4s ease

.faq-answer
  overflow: hidden

.faq-answer-inner
  padding-bottom: 1.5rem
  font-size: 1.2rem
  color: #4C5673
  line-height: 1.6

.faq-toggle
  width: 64px
  height: 64px
  flex-shrink: 0
  background-color: #f1f4f9
  border-radius: 12px
  display: flex
  align-items: center
  justify-content: center
  cursor: pointer
  transition: background-color 0.3s ease

.faq-toggle-icon
  position: relative
  width: 18px
  height: 18px

  span
    position: absolute
    background-color: #0d6efd
    transition: all 0.3s ease
    border-radius: 2px

    &:first-child
      top: 8px
      left: 0
      width: 100%
      height: 2px

    &:last-child
      top: 0
      left: 8px
      width: 2px
      height: 100%

.faq-item.faq_active
  .faq-content
    width: calc(100% - 64px - 1.2rem) !important

  .faq-question
    color: #0661F6

  .faq-answer-wrapper
    grid-template-rows: 1fr

  .faq-toggle-icon span
    &:last-child
      transform: rotate(90deg) scale(0)
      opacity: 0

    &:first-child
      background-color: #0f172a

@media (min-width: 769px)
  .faq-item
    &:nth-child(1) .faq-content
      width: 78%

    &:nth-child(2) .faq-content
      width: 85%

    &:nth-child(3) .faq-content
      width: 72%

    &:nth-child(4) .faq-content
      width: 88%

    &:nth-child(5n) .faq-content
      width: 80%

    &:nth-child(5n+1) .faq-content
      width: 74%

    &:nth-child(5n+2) .faq-content
      width: 82%

    &:nth-child(5n+3) .faq-content
      width: 76%

    &:nth-child(5n+4) .faq-content
      width: 86%

    &:not(.faq_active):hover
      .faq-content
        width: calc(100% - 64px - 1.2rem) !important

@media (max-width: 768px)
  .faq-item
    gap: 0.8rem

    .faq-content
      width: calc(100% - 50px - 0.8rem) !important
      padding: 0.5rem 0.5rem
      min-height: 50px

  .faq-question-container
    min-height: 50px

  .faq-toggle
    width: 50px
    height: 50px

  .main-heading
    font-size: 2.2rem

  .faq-question
    font-size: 1rem

  .faq-item.active .faq-content
    width: calc(100% - 50px - 0.8rem) !important

// FAQ SECTIONS ENDS