@import "tailwindcss";

/* @theme {
  --color-primary: #123456;
  --font-display: "Satoshi", sans-serif;
  --breakpoint-3xl: 120rem;
} */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-white text-neutral-900 font-sans;
  }

  h1 {
    @apply text-5xl md:text-4xl lg:text-5xl font-bold text-neutral-900;
  }

  h2 {
    @apply text-4xl md:text-3xl lg:text-4xl font-bold text-neutral-900;
  }

  h3 {
    @apply text-xl md:text-lg lg:text-xl font-semibold text-neutral-900;
  }

  p {
    @apply text-base md:text-sm lg:text-base text-neutral-700;
  }

  a {
    @apply transition-colors duration-200;
  }

  button {
    @apply transition-all duration-200;
  }
}

@layer components {
  .btn-primary {
    @apply px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 active:scale-95 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200;
  }

  .btn-secondary {
    @apply px-6 py-3 bg-neutral-100 text-neutral-900 font-semibold rounded-lg hover:bg-neutral-200 active:scale-95 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 transition-all duration-200;
  }

  .section-padding {
    @apply px-4 md:px-8 lg:px-16 py-16 md:py-20 lg:py-24;
  }

  .container-max {
    @apply max-w-7xl mx-auto;
  }

  .card {
    @apply bg-white rounded-lg border border-neutral-200 p-6 md:p-8 shadow-sm hover:shadow-md transition-shadow duration-300;
  }

  .animate-in {
    @apply opacity-100 translate-y-0;
  }

  .will-animate {
    will-change: transform, opacity;
  }

  .transform-gpu {
    @apply will-change-transform;
  }

  [data-scroll-close-image] {
    @apply bg-transparent;
  }

  [data-scroll-close-image] img {
    @apply bg-transparent;
  }
}


*,:before,:after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

*,:before,:after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

:before,:after {
    --tw-content: ""
}

html,:host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: Inter,Segoe UI,sans-serif;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    line-height: inherit
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,h2,h3,h4,h5,h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

b,strong {
    font-weight: bolder
}

code,kbd,samp,pre {
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button,input,optgroup,select,textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

button,select {
    text-transform: none
}

button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button,::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre {
    margin: 0
}

fieldset {
    margin: 0;
    padding: 0
}

legend {
    padding: 0
}

ol,ul,menu {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

input::-moz-placeholder,textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af
}

input::placeholder,textarea::placeholder {
    opacity: 1;
    color: #9ca3af
}

button,[role=button] {
    cursor: pointer
}

:disabled {
    cursor: default
}

img,svg,video,canvas,audio,iframe,embed,object {
    display: block;
    vertical-align: middle
}

img,video {
    max-width: 100%;
    height: auto
}

[hidden]:where(:not([hidden=until-found])) {
    display: none
}

html {
    scroll-behavior: smooth
}

body {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    font-family: Inter,Segoe UI,sans-serif;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1))
}

h1 {
    font-size: 48px;
    line-height: 1.2;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1))
}

@media (min-width: 768px) {
    h1 {
        font-size:36px;
        line-height: 1.3
    }
}

@media (min-width: 1024px) {
    h1 {
        font-size:48px;
        line-height: 1.2
    }
}

h2 {
    font-size: 36px;
    line-height: 1.3;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1))
}

@media (min-width: 768px) {
    h2 {
        font-size:32px;
        line-height: 1.4
    }
}

@media (min-width: 1024px) {
    h2 {
        font-size:36px;
        line-height: 1.3
    }
}

h3 {
    font-size: 20px;
    line-height: 1.6;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1))
}

@media (min-width: 768px) {
    h3 {
        font-size:18px;
        line-height: 1.6
    }
}

@media (min-width: 1024px) {
    h3 {
        font-size:20px;
        line-height: 1.6
    }
}

p {
    font-size: 16px;
    line-height: 1.6;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1))
}

@media (min-width: 768px) {
    p {
        font-size:14px;
        line-height: 1.5
    }
}

@media (min-width: 1024px) {
    p {
        font-size:16px;
        line-height: 1.6
    }
}

a {
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s
}

button {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s
}

.container {
    width: 100%
}

@media (min-width: 640px) {
    .container {
        max-width:640px
    }
}

@media (min-width: 768px) {
    .container {
        max-width:768px
    }
}

@media (min-width: 1024px) {
    .container {
        max-width:1024px
    }
}

@media (min-width: 1280px) {
    .container {
        max-width:1280px
    }
}

@media (min-width: 1536px) {
    .container {
        max-width:1536px
    }
}

.btn-primary {
    border-radius: .5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(224 164 16 / var(--tw-bg-opacity, 1));
    padding: .75rem 1.5rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s
}

.btn-primary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(200 144 13 / var(--tw-bg-opacity, 1))
}

.btn-primary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(247 185 20 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px
}

.btn-primary:active {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.btn-secondary {
    border-radius: .5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    padding: .75rem 1.5rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s
}

.btn-secondary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
}

.btn-secondary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px
}

.btn-secondary:active {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.section-padding {
    padding: 4rem 1rem
}

@media (min-width: 768px) {
    .section-padding {
        padding:5rem 2rem
    }
}

@media (min-width: 1024px) {
    .section-padding {
        padding:6rem 4rem
    }
}

.container-max {
    margin-left: auto;
    margin-right: auto;
    max-width: 80rem
}

.card {
    border-radius: .5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .3s
}

.card:hover {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}

@media (min-width: 768px) {
    .card {
        padding:2rem
    }
}

.animate-in {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 1
}

.will-animate {
    will-change: transform,opacity
}

[data-scroll-close-image],[data-scroll-close-image] img {
    background-color: transparent
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.left-0 {
    left: 0
}

.left-1\/2 {
    left: 50%
}

.right-0 {
    right: 0
}

.top-0 {
    top: 0
}

.top-full {
    top: 100%
}

.z-10 {
    z-index: 10
}

.z-50 {
    z-index: 50
}

.m-4 {
    margin: 1rem
}

.m-6 {
    margin: 1.5rem
}

.m-8 {
    margin: 2rem
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.mb-6 {
    margin-bottom: 1.5rem
}

.mb-8 {
    margin-bottom: 2rem
}

.mt-12 {
    margin-top: 3rem
}

.mt-2 {
    margin-top: .5rem
}

.block {
    display: block
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.h-0\.5 {
    height: .125rem
}

.h-12 {
    height: 3rem
}

.h-8 {
    height: 2rem
}

.h-auto {
    height: auto
}

.w-5 {
    width: 1.25rem
}

.w-8 {
    width: 2rem
}

.w-auto {
    width: auto
}

.w-fit {
    width: -moz-fit-content;
    width: fit-content
}

.w-full {
    width: 100%
}

.max-w-2xl {
    max-width: 42rem
}

.max-w-3xl {
    max-width: 48rem
}

.flex-shrink-0 {
    flex-shrink: 0
}

.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.transform {
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.animate-fade-in {
    animation: fadeIn .5s ease-in-out forwards
}

.animate-scale-up {
    animation: scaleUp .6s cubic-bezier(.4,0,.2,1) forwards
}

.animate-slide-up {
    animation: slideUp .6s cubic-bezier(.4,0,.2,1) forwards
}

.grid-cols-1 {
    grid-template-columns: repeat(1,minmax(0,1fr))
}

.flex-col {
    flex-direction: column
}

.items-center {
    align-items: center
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap-1\.5 {
    gap: .375rem
}

.gap-2 {
    gap: .5rem
}

.gap-3 {
    gap: .75rem
}

.gap-4 {
    gap: 1rem
}

.gap-6 {
    gap: 1.5rem
}

.gap-8 {
    gap: 2rem
}

.overflow-hidden {
    overflow: hidden
}

.rounded-2xl {
    border-radius: 1rem
}

.rounded-full {
    border-radius: 9999px
}

.rounded-lg {
    border-radius: .5rem
}

.border-b {
    border-bottom-width: 1px
}

.border-t {
    border-top-width: 1px
}

.border-neutral-100 {
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1))
}

.bg-neutral-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
}

.bg-neutral-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1))
}

.bg-neutral-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1))
}

.bg-primary-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 247 224 / var(--tw-bg-opacity, 1))
}

.bg-primary-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(224 164 16 / var(--tw-bg-opacity, 1))
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right,var(--tw-gradient-stops))
}

.from-primary-50 {
    --tw-gradient-from: #FFFBF0 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 251 240 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.via-white {
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.to-neutral-50 {
    --tw-gradient-to: #FAFAFA var(--tw-gradient-to-position)
}

.p-2 {
    padding: .5rem
}

.p-4 {
    padding: 1rem
}

.p-6 {
    padding: 1.5rem
}

.p-8 {
    padding: 2rem
}

.px-24 {
    padding-left: 6rem;
    padding-right: 6rem
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.py-3 {
    padding-top: .75rem;
    padding-bottom: .75rem
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.pb-16 {
    padding-bottom: 4rem
}

.pt-0 {
    padding-top: 0
}

.pt-2 {
    padding-top: .5rem
}

.pt-32 {
    padding-top: 8rem
}

.text-center {
    text-align: center
}

.text-\[2em\] {
    font-size: 2em
}

.text-base {
    font-size: 16px;
    line-height: 1.6
}

.text-lg {
    font-size: 18px;
    line-height: 1.6
}

.text-sm {
    font-size: 14px;
    line-height: 1.5
}

.font-bold {
    font-weight: 700
}

.font-medium {
    font-weight: 500
}

.font-semibold {
    font-weight: 600
}

.tracking-tight {
    letter-spacing: -.025em
}

.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}

.text-neutral-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1))
}

.text-neutral-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1))
}

.text-neutral-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1))
}

.text-primary-600 {
    --tw-text-opacity: 1;
    color: rgb(224 164 16 / var(--tw-text-opacity, 1))
}

.text-primary-800 {
    --tw-text-opacity: 1;
    color: rgb(176 124 10 / var(--tw-text-opacity, 1))
}

.text-primary-900 {
    --tw-text-opacity: 1;
    color: rgb(152 104 7 / var(--tw-text-opacity, 1))
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s
}

.transition-colors {
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s
}

.duration-300 {
    transition-duration: .3s
}

.hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.hover\:bg-neutral-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
}

.hover\:bg-primary-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(200 144 13 / var(--tw-bg-opacity, 1))
}

.hover\:text-neutral-900:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1))
}

.active\:scale-95:active {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@media (min-width: 640px) {
    .sm\:flex-row {
        flex-direction:row
    }
}

@media (min-width: 768px) {
    .md\:mb-10 {
        margin-bottom:2.5rem
    }

    .md\:mb-8 {
        margin-bottom: 2rem
    }

    .md\:flex {
        display: flex
    }

    .md\:hidden {
        display: none
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .md\:px-44 {
        padding-left: 11rem;
        padding-right: 11rem
    }

    .md\:py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem
    }

    .md\:pb-20 {
        padding-bottom: 5rem
    }

    .md\:pt-40 {
        padding-top: 10rem
    }

    .md\:text-\[6em\] {
        font-size: 6em
    }

    .md\:text-lg {
        font-size: 18px;
        line-height: 1.6
    }

    .md\:text-xl {
        font-size: 20px;
        line-height: 1.6
    }

    .md\:font-black {
        font-weight: 900
    }
}

@media (min-width: 1024px) {
    .lg\:flex {
        display:flex
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .lg\:px-56 {
        padding-left: 14rem;
        padding-right: 14rem
    }

    .lg\:pb-24 {
        padding-bottom: 6rem
    }

    .lg\:pt-48 {
        padding-top: 12rem
    }
}

.animate-fade-in {
    opacity: 0
}

.animate-fade-in.animate-in {
    animation: fadeIn .5s ease-in-out forwards
}

.animate-scale-up {
    opacity: 0;
    transform: scale(.95)
}

.animate-scale-up.animate-in {
    animation: scaleUp .6s cubic-bezier(.4,0,.2,1) forwards
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(40px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes scaleUp {
    0% {
        opacity: 0;
        transform: scale(.95)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.stagger-0 {
    animation-delay: 0ms
}

.stagger-1 {
    animation-delay: .1s
}

.stagger-2 {
    animation-delay: .2s
}

.stagger-3 {
    animation-delay: .3s
}

.stagger-4 {
    animation-delay: .4s
}

.stagger-5 {
    animation-delay: .5s
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease-in-out
}

[data-faq-item].expanded .faq-answer {
    max-height: 500px
}

.faq-icon {
    transition: transform .3s ease-in-out
}

[data-faq-item].expanded .faq-icon {
    transform: rotate(180deg)
}

.transition-smooth {
    transition: all .3s cubic-bezier(.4,0,.2,1)
}

[data-benefits-slider] {
    transition: transform .5s ease-out
}

.hover-lift {
    transition: transform .2s ease-out,box-shadow .2s ease-out
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px #00000026
}

:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: 2px
}

@media (prefers-reduced-motion: reduce) {
    *,*:before,*:after {
        animation-duration: .01ms!important;
        animation-iteration-count: 1!important;
        transition-duration: .01ms!important;
        scroll-behavior: auto!important
    }
}

[data-scroll-close-image],[data-scroll-close-image] img {
    background: transparent!important
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.scrollbar-hide::-webkit-scrollbar {
    display: none
}

.number-digit-2 {
    line-height: 1;
    display: block;
    height: auto
}

.single-counter-wrap {
    display: inline-flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%
}

.summery-counter-wrap {
    display: flex;
    align-items: center;
    gap: .25rem;
    overflow: hidden
}

.single-counter-wrap.animate-in {
    animation: none
}

.single-saving-card-wrap {
    transition: transform .3s ease-out,box-shadow .3s ease-out
}

.single-saving-card-wrap:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px #00000026!important
}

.saving-card-icon-wrap-2 {
    background-color: #d988ff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    display: flex;
    flex-shrink: 0
}

.saving-card-icon-wrap-2._1 {
    background-color: #d988ff
}

.saving-card-icon-wrap-2._2 {
    background-color: #61bdff
}

.saving-card-icon-wrap-2._3 {
    background-color: #efbf04
}

.saving-card-icon {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.helps-container {
    max-width: 745px;
    margin-left: auto;
    margin-right: auto
}

.help-img-wrapper {
    background-color: #f6f7f9;
    border-radius: 16px;
    justify-content: center;
    align-items: flex-end;
    padding-top: 24px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    overflow: hidden
}

.store-logo {
    max-width: 59.6%;
    vertical-align: middle;
    display: inline-block
}

.single-store-logo-wrap.small {
    height: 151px
}

.single-store-logo-wrap.long {
    height: 177px
}

@keyframes float {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-20px)
    }
}

.float-bubble {
    animation: float 2s ease-in-out infinite
}

.float-bubble-slow {
    animation: float 3s ease-in-out infinite
}

.float-bubble-slower {
    animation: float 4s ease-in-out infinite
}

.animate-slide-up {
    opacity: 0;
    transform: translateY(40px)
}

.animate-slide-down {
    opacity: 0;
    transform: translateY(-40px)
}

.animate-slide-left {
    opacity: 0;
    transform: translate(40px)
}

.animate-slide-right {
    opacity: 0;
    transform: translate(-40px)
}

.animate-slide-up.animate-in {
    animation: slideUp .6s cubic-bezier(.4,0,.2,1) forwards
}

.animate-slide-down.animate-in {
    animation: slideDown .6s cubic-bezier(.4,0,.2,1) forwards
}

.animate-slide-left.animate-in {
    animation: slideLeft .6s cubic-bezier(.4,0,.2,1) forwards
}

.animate-slide-right.animate-in {
    animation: slideRight .6s cubic-bezier(.4,0,.2,1) forwards
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-40px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translate(40px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes slideRight {
    0% {
        opacity: 0;
        transform: translate(-40px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

.testimonial-bg-wrapper {
    box-sizing: border-box
}

.testimonial-reviews-flex {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.single-testimonial-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    opacity: 1;
    transform-style: preserve-3d
}

.single-testimonial-wrap.left {
    align-items: flex-start
}

.single-testimonial-wrap.right {
    align-items: flex-end
}

.testimonial-details-wrap {
    width: 100%;
    background-color: #fae6ff;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    margin-bottom: 16px;
    padding: 25px 32px
}

.testimonial-details-wrap._2 {
    background-color: #e3e8ef;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 24px
}

.testimonial-details {
    font-size: 1.125rem;
    line-height: 1.6;
    color: inherit;
    margin: 0
}

.testimonial-author-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%
}

.testimonial-author-wrap.right {
    justify-content: flex-end
}

.testimonial-author-img {
    flex-shrink: 0;
    -o-object-fit: cover;
    object-fit: cover
}

.testimonial-author-info-wrap {
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.testimonial-author-name {
    color: #7b1cfa;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4
}

.testimonial-author-designation {
    font-size: .875rem;
    line-height: 1.4
}

@media (max-width: 768px) {
    .testimonial-bg-wrapper {
        padding:32px 24px;
        max-width: 100%
    }

    .testimonial-details {
        font-size: 1rem
    }

    .single-testimonial-wrap.right {
        align-items: flex-start
    }

    .testimonial-author-wrap.right {
        justify-content: flex-start
    }
}

.section.faq {
    padding-top: 0;
    padding-bottom: 100px;
    position: relative;
    overflow: hidden
}

.faq-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    z-index: 1;
    background-color: #7b1cfb;
    background-image: url(https://cdn.prod.website-files.com/682f553e31a49c15f49f4c12/682f553f31a49c15f49f4cf1_Faq-BG-Border.png);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 24px;
    padding: 104px 15px 120px;
    position: relative
}

.faq-line-left,.faq-line-right {
    position: absolute;
    top: 0;
    width: 300px;
    height: 300px;
    opacity: .1;
    z-index: 0
}

.faq-line-left {
    z-index: -1;
    max-width: 40%;
    position: absolute;
    inset: 90px auto auto 0%
}

.faq-line-right {
    z-index: -1;
    max-width: 38%;
    position: absolute;
    inset: auto 0% 65px auto
}

.faq-container {
    position: relative;
    z-index: 1
}

.section-title-wrapper {
    text-align: center;
    margin-bottom: 10px
}

.section-title-wrap.faq {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px
}

.section-title-2.white._2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 1.2
}

@media (max-width: 768px) {
    .section-title-2.white._2 {
        font-size:1.875rem
    }
}

.faq-flex-wrap-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto
}

.single-faq-wrap-2 {
    background-color: #b07c0a;
    border-radius: 12px;
    overflow: hidden;
    transition: all .3s ease-out
}

.single-faq-wrap-2:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px #a38ffb4d
}

.faq-question-wrap-2 {
    cursor: pointer;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all .3s ease-out
}

.faq-question-wrap-2:hover {
    background-color: #ffffff1a
}

.faq-question-flex-wrap-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px
}

.faq-question-2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    flex: 1;
    text-align: left
}

.faq-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform .3s ease-out
}

.faq-arrow {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    transition: opacity .3s ease-out
}

.single-faq-wrap-2.expanded .faq-icon-wrap {
    transform: rotate(180deg)
}

.faq-ans-wrapper-2 {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease-out;
    background-color: #ffffff0d
}

.single-faq-wrap-2.expanded .faq-ans-wrapper-2 {
    max-height: 500px
}

.faq-ans-wrap-2 {
    padding: 24px;
    border-top: 1px solid rgba(255,255,255,.1)
}

.faq-answer-2 {
    font-size: 1rem;
    line-height: 1.6;
    color: #ffffffe6;
    margin: 0
}

@media (max-width: 768px) {
    .section.faq {
        padding-bottom:60px
    }

    .faq-container {
        padding: 40px 16px
    }

    .section-title-wrapper {
        margin-bottom: 40px
    }

    .faq-question-wrap-2 {
        padding: 16px
    }

    .faq-question-2 {
        font-size: 1rem
    }

    .faq-ans-wrap-2 {
        padding: 16px
    }

    .faq-answer-2 {
        font-size: .9375rem
    }
}

.container-faq {
    max-width: 1267px;
    margin-left: auto;
    margin-right: auto
}

.section.blog {
    padding: 80px 20px;
    background-color: #fff
}

.section-title-wrapper {
    text-align: center;
    margin-bottom: 60px
}

.section-title-wrap.blog {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.2
}

@media (max-width: 768px) {
    .section-title {
        font-size:1.875rem
    }
}

.blog-collection-list-wrapper {
    margin-bottom: 40px
}

.blog-collection {
    width: 100%
}

.blog-grid-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 32px;
    margin-bottom: 40px
}

.blog-grid-wrap.home-page {
    grid-template-columns: repeat(auto-fit,minmax(320px,1fr))
}

@media (max-width: 768px) {
    .blog-grid-wrap {
        grid-template-columns:1fr;
        gap: 24px
    }
}

.single-blog-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    transition: all .3s ease-out;
    background-color: #fff;
    border: 1px solid #e5e7eb
}

.single-blog-wrap:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px #0000001a
}

.blog-contents-wrap {
    display: flex;
    flex-direction: column;
    height: 100%
}

.blog-img-wrap {
    display: block;
    width: 100%;
    height: 240px;
    overflow: hidden;
    background-color: #f3f4f6;
    text-decoration: none
}

.blog-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .3s ease-out
}

.single-blog-wrap:hover .blog-img {
    transform: scale(1.05)
}

.blog-details-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px;
    gap: 12px
}

.blog-info-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: .875rem
}

.blog-cat-wrap {
    flex: 1
}

.blog-category {
    display: inline-block;
    padding: 6px 12px;
    background-color: #f3f4f6;
    border-radius: 20px;
    font-size: .8125rem;
    font-weight: 600;
    color: #6b7280;
    margin: 0
}

.blog-date-wrap {
    white-space: nowrap
}

.blog-date {
    font-size: .875rem;
    color: #9ca3af;
    margin: 0
}

.blog-post-title-wrap {
    text-decoration: none;
    display: block
}

.blog-post-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.4;
    transition: color .3s ease-out
}

.single-blog-wrap:hover .blog-post-title {
    color: #7c3aed
}

.blog-post-details {
    font-size: .9375rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
    flex: 1
}

.blog-button-wrapper {
    display: flex;
    justify-content: center
}

.primary-button {
    display: inline-block;
    text-decoration: none;
    padding: 12px 25px;
    background-color: #7c3aed;
    color: #fff;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: all .3s ease-out;
    border: 2px solid #7c3aed
}

.primary-button:hover {
    background-color: #6d28d9;
    border-color: #6d28d9;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px #7c3aed4d
}

.primary-button-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.primary-button-flex.purple {
    color: #fff
}

.primary-button-text-wrap {
    display: flex;
    align-items: center
}

@media (max-width: 768px) {
    .section.blog {
        padding:60px 16px
    }

    .section-title-wrapper {
        margin-bottom: 40px
    }

    .blog-details-wrap {
        padding: 16px
    }

    .blog-post-title {
        font-size: 1.125rem
    }
}

.section.cta {
    padding: 120px 0 0;
    background-color: #fff;
    position: relative;
    overflow: hidden
}

.cta-flex-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto
}

@media (max-width: 768px) {
    .cta-flex-wrap {
        grid-template-columns:1fr;
        gap: 40px
    }
}

.split-content {
    display: flex;
    flex-direction: column
}

.cta-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.section-title-wrapper.mb-60 {
    margin-bottom: 40px
}

.section-title-wrap.cta {
    text-align: left
}

.section-title-wrap.cta .section-title {
    color: #111827;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0
}

@media (max-width: 768px) {
    .section-title-wrap.cta .section-title {
        font-size:1.875rem
    }
}

.cta-details {
    font-size: 1.125rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
    max-width: 500px
}

.cta-button-wrapper {
    display: flex;
    gap: 16px;
    flex-wrap: wrap
}

.cta-button-wrapper .primary-button {
    display: inline-flex;
    text-decoration: none;
    transition: all .3s ease-out
}

.cta-button-wrapper .primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px #0000001a
}

.primary-button-flex-app {
    background-color: #fff;
    color: #6b7280;
    text-transform: capitalize;
    border-radius: 100px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 18px 24px;
    font-size: 16px;
    font-weight: 700;
    line-height: 100%;
    display: flex;
    position: relative;
    overflow: hidden
}

.primary-button-flex-app.gray-bordered {
    border: 1px solid #e5e7eb;
    padding-top: 14px;
    padding-bottom: 14px
}

.cta-btn-icon {
    width: 20px;
    height: 20px;
    -o-object-fit: contain;
    object-fit: contain
}

.primary-button-text {
    font-size: 1rem;
    font-weight: 600
}

.cta-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.cta-mobile {
    width: 100%;
    max-width: 400px;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain
}

@media (max-width: 768px) {
    .section.cta {
        padding:60px 16px
    }

    .cta-flex-wrap {
        gap: 30px
    }

    .section-title-wrap.cta .section-title {
        font-size: 1.5rem
    }

    .cta-details {
        font-size: 1rem
    }

    .cta-button-wrapper {
        gap: 12px
    }

    .cta-button-wrapper .primary-button {
        padding: 10px 16px;
        font-size: .9375rem
    }

    .cta-btn-icon {
        width: 18px;
        height: 18px
    }
}

.footer-wrapper {
    background-color: #fff
}

.container {
    max-width: 1200px;
    margin: 0 auto
}

.footer-top-wrap {
    background-color: #000;
    border-radius: 24px;
    padding: 120px 0 108px 71px;
    margin-bottom: 40px
}

.footer-top-container {
    width: 100%
}

.footer-top-flex-wrap {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px
}

.section.team-members,.section.career,.section.mission,.section.features,.section.feature-benefits {
    padding-bottom: 0
}

.section {
    padding-top: 120px;
    padding-bottom: 120px
}

@media (max-width: 768px) {
    .section {
        padding-top:30px;
        padding-bottom: 120px
    }

    .footer-top-wrap {
        background-color: #000;
        border-radius: 0;
        padding: 51px 0 86px 24px;
        margin-bottom: 40px
    }

    .footer-top-flex-wrap {
        grid-template-columns: 1fr;
        gap: 40px
    }
}

.footer-details-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.footer-logo-wrap {
    display: inline-block;
    text-decoration: none
}

.footer-logo {
    width: 100%;
    max-width: 234px;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain
}

.footer-logo-wrap .flex {
    display: flex;
    align-items: center;
    gap: 8px
}

.footer-logo-wrap .w-8 {
    width: 32px;
    height: 32px;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.footer-logo-wrap .text-white {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700
}

.footer-details {
    font-size: .9375rem;
    color: #fffc;
    line-height: 1.6;
    margin: 0
}

.footer-links-content-wrap {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.footer-links-flex-wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 40px
}

@media (max-width: 768px) {
    .footer-links-flex-wrapper {
        grid-template-columns:repeat(2,1fr);
        gap: 30px
    }
}

@media (max-width: 480px) {
    .footer-links-flex-wrapper {
        grid-template-columns:1fr
    }
}

.footer-links-single-row {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.footer-links-title {
    font-size: .9375rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-transform: capitalize
}

.footer-links-flex {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.footer-link {
    font-size: .875rem;
    color: #ffffffb3;
    text-decoration: none;
    transition: color .3s ease-out
}

.footer-link:hover {
    color: #fff
}

.footer-social-link-wrapper {
    display: flex;
    flex-direction: row;
    gap: 40px;
    justify-content: flex-start;
    align-items: center;
    overflow: clip;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1)
}

.footer-social-link-text {
    font-size: .9375rem;
    font-weight: 700;
    color: #fff
}

.footer-social-links-flex {
    display: flex;
    gap: 12px;
    align-items: center
}

.single-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #ffffff1a;
    border-radius: 50%;
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    transition: all .3s ease-out
}

.single-social-link:hover {
    background-color: #fff3;
    color: #fff;
    transform: translateY(-2px)
}

.footer-bottom-wrapper {
    padding-top: 2px;
    text-align: center;
    padding-bottom: 20px
}

.footer-copyright-text {
    font-size: .875rem;
    color: #000;
    margin: 0
}

.copyright-link {
    color: #000;
    text-decoration: none;
    transition: color .3s ease-out
}

.copyright-link:hover {
    color: #6d28d9;
    text-decoration: underline
}

@media (max-width: 768px) {
    .footer-wrapper {
        padding:40px 0
    }

    .footer-top-flex-wrap {
        gap: 30px
    }

    .footer-links-flex-wrapper {
        gap: 20px
    }

    .footer-social-link-wrapper {
        padding-top: 16px
    }
}

[data-mobile-menu] {
    display: none!important
}

[data-mobile-menu].active {
    display: block!important
}

@media (min-width: 768px) {
    [data-mobile-menu] {
        display:none!important
    }
}

.benefits-flex-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
    display: flex
}

.single-benefit-wrapper {
    z-index: 1;
    background-color: #dbffe7;
    background-image: url(https://cdn.prod.website-files.com/682f553e31a49c15f49f4c12/682f553f31a49c15f49f4cf1_Faq-BG-Border.png);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 24px;
    padding-top: 48px;
    padding-left: 48px;
    padding-right: 48px;
    position: relative;
    overflow: clip;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.single-benefit-wrapper._1 {
    background-color: #e2faff
}

.single-benefit-wrapper._2 {
    background-color: #fff6e4
}

.single-benefit-wrapper._3 {
    background-color: #fae6ff
}

.single-benefit-wrapper.in-features {
    padding-left: 80px;
    padding-right: 80px;
    position: sticky;
    top: 120px
}

.single-benefit-wrapper.in-features._1,.single-benefit-wrapper.in-features._2,.single-benefit-wrapper.in-features._3,.single-benefit-wrapper.in-features._3.pt {
    background-color: #ffe5cc
}

.benefit-grid-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: flex-start
}

.benefit-grid-wrap.in-features._2 {
    margin-left: auto
}

.benefit-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.benefit-grid-wrap.in-features {
    max-width: 1016px;
    display: flex
}

.benefit-content-wrapper.in-features {
    max-width: 416px
}

.benefit-content-wrapper {
    margin-top: 25px;
    margin-bottom: 25px
}

.benefit-title {
    margin-bottom: 2px;
    font-family: Inter Tight,sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 48px;
    color: #111827
}

.benefit-details {
    color: #364152;
    margin-bottom: 32px;
    font-family: Inter Tight,sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px
}

.benefit-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 16px
}

.benefit-image {
    width: 400px;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    display: block
}

.benefit-spiral {
    z-index: -1;
    max-width: 42%;
    position: absolute;
    inset: auto 0 21px auto
}

.benefit-spiral._2 {
    left: 0;
    right: auto
}

img {
    vertical-align: middle;
    max-width: 100%;
    display: inline-block;
    border: 0
}

@media (max-width: 768px) {
    .benefits-flex-wrapper {
        gap:16px;
        padding-left: 10px;
        padding-right: 10px;
        flex-direction: column
    }

    .single-benefit-wrapper {
        display: flex;
        flex-direction: column;
        padding-left: 24px!important;
        padding-right: 24px!important;
        position: relative!important;
        top: auto!important
    }

    .benefit-grid-wrap {
        display: flex;
        flex-direction: column;
        gap: 16px;
        grid-template-columns: 1fr
    }

    .benefit-image-wrapper {
        order: -1;
        width: 100%;
        min-height: 1 00px;
        overflow: hidden;
        -o-object-fit: contain;
        object-fit: contain
    }

    .benefit-image-wrapper img {
        max-width: 250px;
        height: auto;
        min-height: 150px;
        -o-object-fit: cover;
        object-fit: cover
    }

    .benefit-content-wrapper {
        order: 1;
        width: 100%
    }

    .benefit-spiral {
        display: none!important
    }

    .benefit-title {
        font-size: 1.25rem
    }

    .benefit-details {
        font-size: .9375rem
    }
}

[data-nav-link].text-neutral-900 {
    color: #171717;
    font-weight: 600;
    position: relative
}

[data-nav-link].text-neutral-900:after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--primary-500, #f7b914);
    border-radius: 1px
}