progress,
sub,
sup {
    vertical-align: initial
}

blockquote,
body,
dd,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
menu,
ol,
p,
pre,
ul {
    margin: 0
}

.max-w-\[100\%\],
.max-w-full,
img,
video {
    max-width: 100%
}

.from-\[\#02DE82\]\/10,
.from-\[\#02DF82\],
.from-white {
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

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

.ease-in-out,
.transition,
.transition-all,
.transition-colors,
.transition-transform {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.brightness-0,
.brightness-\[200\%\],
.group:hover .group-hover\:invert,
.invert,
.invert-0 {
    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)
}

.overflow-x-hidden,
body,
html {
    overflow-x: hidden
}

@font-face {
    font-family: Parafina-black;
    src: url("../fonts/parafina/ParafinaTrial-Black.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Poppins-bold;
    src: url("../fonts/poppins/Poppins-Bold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Poppins-semibold;
    src: url("../fonts/poppins/Poppins-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Poppins-medium;
    src: url("../fonts/poppins/Poppins-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Poppins-regular;
    src: url("../fonts/poppins/Poppins-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Poppins-light;
    src: url("../fonts/poppins/Poppins-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Poppins-Thin;
    src: url("../fonts/poppins/Poppins-Thin.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap
}

.parafina-bold {
    font-family: Parafina-black;
    font-weight: 800;
    font-style: normal
}

.poppins-bold {
    font-family: Poppins-bold;
    font-weight: 800;
    font-style: normal
}

.poppins-medium,
.poppins-semibold {
    font-weight: 500;
    font-style: normal
}

.poppins-medium {
    font-family: Poppins-medium
}

.poppins-semibold {
    font-family: Poppins-semibold
}

.poppins-regular {
    font-family: Poppins-regular;
    font-weight: 400;
    font-style: normal
}

.poppins-light {
    font-family: Poppins-light;
    font-weight: 300;
    font-style: normal
}

.poppins-thin {
    font-family: Poppins-Thin;
    font-weight: 200;
    font-style: normal
}

.mobile-mockup-carousel.owl-item h2 {
    display: none
}

.block,
.group:hover .group-hover\:block,
.mobile-mockup-carousel.owl-item.center h2,
.no-js .owl-carousel,
.owl-carousel .owl-item img,
.owl-carousel.owl-loaded,
.sticky-nav .top-sticky {
    display: block
}

.carousel-2 {
    display: flex;
    align-items: stretch
}

.carousel-2 .item {
    flex: 1;
    height: 100%
}

.text-stroke {
    -webkit-text-stroke: 0.5px #555555;
    color: transparent
}

.owl-carousel.owl-stage {
    display: flex;
    align-items: center
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #D4A634;
    border: 2px solid #1A1A1A
}

.testimonial.owl-stage {
    display: flex;
    justify-content: center
}

.testimonial.owl-stage.item {
    display: flex;
    flex: 1 0 auto
}

*,
::backdrop,
:after,
:before {
    --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: #3b82f680;
    --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:
}

.hover\:shadow-lg:hover,
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)
}

/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/
*,
:after,
:before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb
}

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

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

body {
    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,
pre,
samp {
    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
}

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: initial;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

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

.hover\:shadow-lg:hover,
.shadow-lg,
.shadow-md {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

::-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
}

dialog,
fieldset,
legend {
    padding: 0
}

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

textarea {
    resize: vertical
}

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

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

.cursor-pointer,
.hover\:cursor-pointer:hover,
[role=button],
button {
    cursor: pointer
}

:disabled {
    cursor: default
}

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

img,
video {
    height: auto
}

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

.visible {
    visibility: visible
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.sticky {
    position: sticky
}

.bottom-0 {
    bottom: 0
}

.bottom-20 {
    bottom: 5rem
}

.bottom-5 {
    bottom: 1.25rem
}

.bottom-\[-2px\] {
    bottom: -2px
}

.left-0 {
    left: 0
}

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

.left-10 {
    left: 2.5rem
}

.left-5 {
    left: 1.25rem
}

.left-\[-50px\] {
    left: -50px
}

.left-\[20px\] {
    left: 20px
}

.left-\[40\%\] {
    left: 40%
}

.right-0 {
    right: 0
}

.right-10 {
    right: 2.5rem
}

.right-4 {
    right: 1rem
}

.right-5 {
    right: 1.25rem
}

.right-\[-10px\] {
    right: -10px
}

.right-\[-35px\] {
    right: -35px
}

.right-\[20\%\] {
    right: 20%
}

.right-\[50px\] {
    right: 50px
}

.top-0 {
    top: 0
}

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

.top-10 {
    top: 2.5rem
}

.top-4 {
    top: 1rem
}

.top-5 {
    top: 1.25rem
}

.top-\[-100px\] {
    top: -100px
}

.top-\[-10px\] {
    top: -10px
}

.top-\[-120px\] {
    top: -120px
}

.top-\[-150px\] {
    top: -150px
}

.top-\[-35px\] {
    top: -35px
}

.top-\[-50px\] {
    top: -50px
}

.top-\[-60px\] {
    top: -60px
}

.top-\[-85px\] {
    top: -85px
}

.top-\[16px\] {
    top: 16px
}

.top-\[30px\] {
    top: 30px
}

.top-\[50px\] {
    top: 50px
}

.top-\[75px\] {
    top: 75px
}

.top-\[8px\] {
    top: 8px
}

.z-10 {
    z-index: 10
}

.z-40 {
    z-index: 40
}

.z-50 {
    z-index: 50
}

.z-\[-1\] {
    z-index: -1
}

.owl-carousel .owl-animated-in,
.z-\[0\] {
    z-index: 0
}

.owl-carousel .owl-animated-out,
.z-\[1\] {
    z-index: 1
}

.z-\[20\] {
    z-index: 20
}

.z-\[2\] {
    z-index: 2
}

.z-\[60\] {
    z-index: 60
}

.z-\[999999\] {
    z-index: 999999
}

.z-\[9\] {
    z-index: 9
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.order-3 {
    order: 3
}

.order-4 {
    order: 4
}

.order-5 {
    order: 5
}

.order-6 {
    order: 6
}

.col-span-1 {
    grid-column: span 1/span 1
}

.col-span-10 {
    grid-column: span 10/span 10
}

.col-span-12 {
    grid-column: span 12/span 12
}

.col-span-2 {
    grid-column: span 2/span 2
}

.col-span-4 {
    grid-column: span 4/span 4
}

.col-span-5 {
    grid-column: span 5/span 5
}

.col-span-6 {
    grid-column: span 6/span 6
}

.col-span-8 {
    grid-column: span 8/span 8
}

.m-\[-13px\] {
    margin: -13px
}

.mx-2 {
    margin-left: .5rem;
    margin-right: .5rem
}

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

.my-2 {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.my-3 {
    margin-top: .75rem;
    margin-bottom: .75rem
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem
}

.my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem
}

.my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem
}

.my-\[32px\] {
    margin-top: 32px;
    margin-bottom: 32px
}

.\!mt-0 {
    margin-top: 0 !important
}

.mb-10 {
    margin-bottom: 2.5rem
}

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

.mb-3 {
    margin-bottom: .75rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-5 {
    margin-bottom: 1.25rem
}

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

.mb-\[32px\] {
    margin-bottom: 32px
}

.me-1 {
    margin-inline-end: .25rem
}

.ml-3 {
    margin-left: .75rem
}

.ml-4 {
    margin-left: 1rem
}

.ml-auto {
    margin-left: auto
}

.mr-3 {
    margin-right: .75rem
}

.ms-4 {
    margin-inline-start: 1rem
}

.mt-0 {
    margin-top: 0
}

.mt-1 {
    margin-top: .25rem
}

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

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

.mt-4 {
    margin-top: 1rem
}

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

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

.mt-\[25px\] {
    margin-top: 25px
}

.mt-\[50px\] {
    margin-top: 50px
}

.mt-\[5px\] {
    margin-top: 5px
}

.inline-block {
    display: inline-block
}

.inline {
    display: inline
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.grid {
    display: grid
}

.hidden,
.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-video-playing .owl-video-play-icon,
.owl-carousel .owl-video-playing .owl-video-tn,
.top-sticky {
    display: none
}

.h-12 {
    height: 3rem
}

.h-14 {
    height: 3.5rem
}

.h-4 {
    height: 1rem
}

.h-5 {
    height: 1.25rem
}

.h-6 {
    height: 1.5rem
}

.h-8 {
    height: 2rem
}

.h-\[1\.5px\] {
    height: 1.5px
}

.h-\[125px\] {
    height: 125px
}

.h-\[15px\] {
    height: 15px
}

.h-\[1px\] {
    height: 1px
}

.h-\[200px\] {
    height: 200px
}

.h-\[250px\] {
    height: 250px
}

.h-\[2px\] {
    height: 2px
}

.h-\[3px\] {
    height: 3px
}

.h-\[40px\] {
    height: 40px
}

.h-\[50px\] {
    height: 50px
}

.h-\[70px\] {
    height: 70px
}

.h-auto {
    height: auto
}

.h-full {
    height: 100%
}

.h-screen {
    height: 100vh
}

.max-h-\[280px\] {
    max-height: 280px
}

.max-h-\[30px\] {
    max-height: 30px
}

.max-h-\[392px\] {
    max-height: 392px
}

.max-h-\[450px\] {
    max-height: 450px
}

.min-h-\[200px\] {
    min-height: 200px
}

.min-h-\[280px\] {
    min-height: 280px
}

.min-h-\[320px\] {
    min-height: 320px
}

.min-h-\[400px\] {
    min-height: 400px
}

.min-h-\[450px\] {
    min-height: 450px
}

.min-h-screen {
    min-height: 100vh
}

.\!w-auto {
    width: auto !important
}

.w-10 {
    width: 2.5rem
}

.w-10\/12 {
    width: 83.333333%
}

.w-11\/12 {
    width: 91.666667%
}

.w-12 {
    width: 3rem
}

.w-14 {
    width: 3.5rem
}

.w-3 {
    width: .75rem
}

.w-32 {
    width: 8rem
}

.w-4 {
    width: 1rem
}

.w-5 {
    width: 1.25rem
}

.w-6 {
    width: 1.5rem
}

.w-6\/12 {
    width: 50%
}

.w-8 {
    width: 2rem
}

.w-8\/12 {
    width: 66.666667%
}

.w-\[12px\] {
    width: 12px
}

.w-\[160px\] {
    width: 160px
}

.w-\[20px\] {
    width: 20px
}

.w-\[30px\] {
    width: 30px
}

.w-\[50px\] {
    width: 50px
}

.w-\[60px\] {
    width: 60px
}

.w-\[70\%\] {
    width: 70%
}

.w-\[70px\] {
    width: 70px
}

.w-\[80px\] {
    width: 80px
}

.w-auto {
    width: auto
}

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

.w-full {
    width: 100%
}

.min-w-\[200px\] {
    min-width: 200px
}

.max-w-\[1000px\] {
    max-width: 1000px
}

.max-w-\[100px\] {
    max-width: 100px
}

.max-w-\[1050px\] {
    max-width: 1050px
}

.max-w-\[1080px\] {
    max-width: 1080px
}

.max-w-\[1240px\] {
    max-width: 1240px
}

.max-w-\[1280px\] {
    max-width: 1280px
}

.max-w-\[1400px\] {
    max-width: 1400px
}

.max-w-\[150px\] {
    max-width: 150px
}

.max-w-\[175px\] {
    max-width: 175px
}

.max-w-\[20\%\] {
    max-width: 20%
}

.max-w-\[200px\] {
    max-width: 200px
}

.max-w-\[220px\] {
    max-width: 220px
}

.max-w-\[275px\] {
    max-width: 275px
}

.max-w-\[300px\] {
    max-width: 300px
}

.max-w-\[30px\] {
    max-width: 30px
}

.max-w-\[320px\] {
    max-width: 320px
}

.max-w-\[350px\] {
    max-width: 350px
}

.max-w-\[365px\] {
    max-width: 365px
}

.max-w-\[380px\] {
    max-width: 380px
}

.max-w-\[400px\] {
    max-width: 400px
}

.max-w-\[40px\] {
    max-width: 40px
}

.max-w-\[50\%\] {
    max-width: 50%
}

.max-w-\[500px\] {
    max-width: 500px
}

.max-w-\[550px\] {
    max-width: 550px
}

.max-w-\[600px\] {
    max-width: 600px
}

.max-w-\[60px\] {
    max-width: 60px
}

.max-w-\[650px\] {
    max-width: 650px
}

.max-w-\[700px\] {
    max-width: 700px
}

.max-w-\[750px\] {
    max-width: 750px
}

.max-w-\[800px\] {
    max-width: 800px
}

.max-w-\[80px\] {
    max-width: 80px
}

.max-w-\[850px\] {
    max-width: 850px
}

.max-w-\[950px\] {
    max-width: 950px
}

.grow {
    flex-grow: 1
}

.origin-bottom {
    transform-origin: bottom
}

.origin-center {
    transform-origin: center
}

.origin-left {
    transform-origin: left
}

.-translate-x-1\/2,
.-translate-y-1\/2,
.group:hover .group-hover\:rotate-180,
.group:hover .group-hover\:scale-125,
.group:hover .group-hover\:scale-x-100,
.hover\:scale-105:hover,
.hover\:scale-110:hover,
.hover\:scale-\[1\.05\]:hover,
.hover\:translate-y-\[-20px\]:hover,
.rotate-\[-10deg\],
.rotate-\[0deg\],
.rotate-\[10deg\],
.rotate-\[90deg\],
.scale-95,
.scale-x-0,
.transform,
.translate-x-\[-50\%\],
.translate-y-full {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-x-1\/2,
.translate-x-\[-50\%\] {
    --tw-translate-x: -50%
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%
}

.translate-y-full {
    --tw-translate-y: 100%
}

.rotate-\[-10deg\] {
    --tw-rotate: -10deg
}

.rotate-\[0deg\] {
    --tw-rotate: 0deg
}

.rotate-\[10deg\] {
    --tw-rotate: 10deg
}

.rotate-\[90deg\] {
    --tw-rotate: 90deg
}

.scale-95 {
    --tw-scale-x: .95;
    --tw-scale-y: .95
}

.scale-x-0 {
    --tw-scale-x: 0
}

@keyframes bounce {

    0%,
    to {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(.8, 0, 1, 1)
    }

    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, .2, 1)
    }
}

.animate-bounce {
    animation: 1s infinite bounce
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

.animate-pulse {
    animation: 2s cubic-bezier(.4, 0, .6, 1) infinite pulse
}

.list-inside {
    list-style-position: inside
}

.list-outside {
    list-style-position: outside
}

.list-disc {
    list-style-type: disc
}

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

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

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

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

.grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr))
}

.flex-row {
    flex-direction: row
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.place-items-center {
    place-items: center
}

.items-start {
    align-items: flex-start
}

.items-end {
    align-items: flex-end
}

.items-center {
    align-items: center
}

.justify-start {
    justify-content: flex-start
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

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

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

.gap-2 {
    gap: .5rem
}

.gap-3 {
    gap: .75rem
}

.gap-4 {
    gap: 1rem
}

.gap-5 {
    gap: 1.25rem
}

.gap-6 {
    gap: 1.5rem
}

.gap-x-12 {
    -moz-column-gap: 3rem;
    column-gap: 3rem
}

.gap-x-2 {
    -moz-column-gap: .5rem;
    column-gap: .5rem
}

.gap-x-3 {
    -moz-column-gap: .75rem;
    column-gap: .75rem
}

.gap-x-4 {
    -moz-column-gap: 1rem;
    column-gap: 1rem
}

.gap-x-5 {
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem
}

.gap-y-10 {
    row-gap: 2.5rem
}

.gap-y-3 {
    row-gap: .75rem
}

.gap-y-8 {
    row-gap: 2rem
}

.-space-x-4>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(-1rem*var(--tw-space-x-reverse));
    margin-left: calc(-1rem*(1 - var(--tw-space-x-reverse)))
}

.space-x-8>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem*var(--tw-space-x-reverse));
    margin-left: calc(2rem*(1 - var(--tw-space-x-reverse)))
}

.space-y-2>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.5rem*var(--tw-space-y-reverse))
}

.space-y-4>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem*var(--tw-space-y-reverse))
}

.border-\[\#e2e2e2\]\/30,
.divide-\[\#e2e2e2\]\/30>:not([hidden])~:not([hidden]) {
    border-color: #e2e2e24d
}

.divide-\[\#fff\]>:not([hidden])~:not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(255 255 255/var(--tw-divide-opacity, 1))
}

.overflow-hidden {
    overflow: hidden
}

.overflow-y-auto {
    overflow-y: auto
}

.overflow-y-scroll {
    overflow-y: scroll
}

.whitespace-nowrap {
    white-space: nowrap
}

.text-balance {
    text-wrap: balance
}

.break-all {
    word-break: break-all
}

.rounded-\[10px\] {
    border-radius: 10px
}

.rounded-\[15px\] {
    border-radius: 15px
}

.aria-selected\:rounded-\[20px\][aria-selected=true],
.hover\:rounded-\[20px\]:hover,
.rounded-\[20px\] {
    border-radius: 20px
}

.rounded-\[25px\] {
    border-radius: 25px
}

.rounded-\[30px\] {
    border-radius: 30px
}

.rounded-\[3px\] {
    border-radius: 3px
}

.rounded-\[40px\] {
    border-radius: 40px
}

.rounded-\[5px\] {
    border-radius: 5px
}

.rounded-\[8px\] {
    border-radius: 8px
}

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

.rounded-b-\[20px\] {
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px
}

.rounded-t-\[20px\],
.rounded-tr-\[20px\] {
    border-top-right-radius: 20px
}

.rounded-t-\[20px\],
.rounded-tl-\[20px\] {
    border-top-left-radius: 20px
}

.border,
.border-\[1px\],
.hover\:border:hover {
    border-width: 1px
}

.border-2 {
    border-width: 2px
}

.border-4 {
    border-width: 4px
}

.border-\[0\.001em\] {
    border-width: .001em
}

.border-x {
    border-left-width: 1px;
    border-right-width: 1px
}

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

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

.border-b-0 {
    border-bottom-width: 0
}

.border-e {
    border-inline-end-width: 1px
}

.border-none {
    border-style: none
}

.border-\[\#000000\],
.border-\[\#000\] {
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0/var(--tw-border-opacity, 1))
}

.border-\[\#0B2F27\] {
    --tw-border-opacity: 1;
    border-color: rgb(11 47 39/var(--tw-border-opacity, 1))
}

.border-\[\#181F21\] {
    --tw-border-opacity: 1;
    border-color: rgb(24 31 33/var(--tw-border-opacity, 1))
}

.border-\[\#181F21\]\/20 {
    border-color: #181f2133
}

.border-\[\#4A4A4A\] {
    --tw-border-opacity: 1;
    border-color: rgb(74 74 74/var(--tw-border-opacity, 1))
}

.border-\[\#666666\] {
    --tw-border-opacity: 1;
    border-color: rgb(102 102 102/var(--tw-border-opacity, 1))
}

.border-\[\#9FE870\] {
    --tw-border-opacity: 1;
    border-color: rgb(159 232 112/var(--tw-border-opacity, 1))
}

.border-\[\#C6C6C6\] {
    --tw-border-opacity: 1;
    border-color: rgb(198 198 198/var(--tw-border-opacity, 1))
}

.border-\[\#e2e2e2\] {
    --tw-border-opacity: 1;
    border-color: rgb(226 226 226/var(--tw-border-opacity, 1))
}

.border-\[\#edefeb\] {
    --tw-border-opacity: 1;
    border-color: rgb(237 239 235/var(--tw-border-opacity, 1))
}

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

.bg-\[\#000000\]\/60 {
    background-color: #0009
}

.bg-\[\#000\],
.hover\:bg-\[\#000000\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0/var(--tw-bg-opacity, 1))
}

.bg-\[\#000\]\/30 {
    background-color: #0000004d
}

.aria-selected\:bg-\[\#02403D\][aria-selected=true],
.bg-\[\#02403D\],
.bg-\[rgb\(2\2c 64\2c 61\)\],
.hover\:bg-\[\#02403D\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(2 64 61/var(--tw-bg-opacity, 1))
}

.bg-\[\#02403D\]\/90 {
    background-color: #02403de6
}

.bg-\[\#02DF82\] {
    --tw-bg-opacity: 1;
    background-color: rgb(2 223 130/var(--tw-bg-opacity, 1))
}

.bg-\[\#0B2F27\] {
    --tw-bg-opacity: 1;
    background-color: rgb(11 47 39/var(--tw-bg-opacity, 1))
}

.bg-\[\#2CC295\] {
    --tw-bg-opacity: 1;
    background-color: rgb(44 194 149/var(--tw-bg-opacity, 1))
}

.bg-\[\#9FE870\] {
    --tw-bg-opacity: 1;
    background-color: rgb(159 232 112/var(--tw-bg-opacity, 1))
}

.bg-\[\#BDBDBD\] {
    --tw-bg-opacity: 1;
    background-color: rgb(189 189 189/var(--tw-bg-opacity, 1))
}

.bg-\[\#EFEFEF\] {
    --tw-bg-opacity: 1;
    background-color: rgb(239 239 239/var(--tw-bg-opacity, 1))
}

.bg-\[\#FFFFFF\],
.bg-\[\#fff\],
.bg-\[\#ffffff\],
.bg-white,
.hover\:bg-\[\#fff\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}

.bg-\[\#dce0d9\] {
    --tw-bg-opacity: 1;
    background-color: rgb(220 224 217/var(--tw-bg-opacity, 1))
}

.bg-\[\#dcfaed\],
.bg-\[rgb\(220\2c 250\2c 237\)\] {
    --tw-bg-opacity: 1;
    background-color: rgb(220 250 237/var(--tw-bg-opacity, 1))
}

.bg-\[\#edefeb\] {
    --tw-bg-opacity: 1;
    background-color: rgb(237 239 235/var(--tw-bg-opacity, 1))
}

.bg-\[\#f8f8f8\] {
    --tw-bg-opacity: 1;
    background-color: rgb(248 248 248/var(--tw-bg-opacity, 1))
}

.bg-\[\#fff\]\/70 {
    background-color: #ffffffb3
}

.bg-\[rgb\(1\2c 50\2c 50\2c 0\.97\)\] {
    background-color: #013232f7
}

.bg-\[rgba\(2\2c 223\2c 130\2c 0\.48\)\] {
    background-color: #02df827a
}

.bg-transparent {
    background-color: initial
}

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

.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops))
}

.from-\[\#02DE82\]\/10 {
    --tw-gradient-from: #02de821a var(--tw-gradient-from-position);
    --tw-gradient-to: #02de8200 var(--tw-gradient-to-position)
}

.from-\[\#02DF82\] {
    --tw-gradient-from: #02df82 var(--tw-gradient-from-position);
    --tw-gradient-to: #02df8200 var(--tw-gradient-to-position)
}

.from-white {
    --tw-gradient-from: #fff var(--tw-gradient-from-position);
    --tw-gradient-to: #fff0 var(--tw-gradient-to-position)
}

.to-\[\#02DE82\]\/10 {
    --tw-gradient-to: #02de821a var(--tw-gradient-to-position)
}

.to-\[\#02DF82\] {
    --tw-gradient-to: #02df82 var(--tw-gradient-to-position)
}

.bg-cover {
    background-size: cover
}

.bg-center {
    background-position: 50%
}

.bg-no-repeat {
    background-repeat: no-repeat
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.p-1 {
    padding: .25rem
}

.p-1\.5 {
    padding: .375rem
}

.p-10 {
    padding: 2.5rem
}

.p-2 {
    padding: .5rem
}

.p-4 {
    padding: 1rem
}

.p-6 {
    padding: 1.5rem
}

.p-\[20px\] {
    padding: 20px
}

.px-1 {
    padding-left: .25rem;
    padding-right: .25rem
}

.px-2 {
    padding-left: .5rem;
    padding-right: .5rem
}

.px-3 {
    padding-left: .75rem;
    padding-right: .75rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

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

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem
}

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

.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem
}

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

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

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

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

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

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

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

.py-\[12px\] {
    padding-top: 12px;
    padding-bottom: 12px
}

.py-\[20px\] {
    padding-top: 20px;
    padding-bottom: 20px
}

.py-\[32px\] {
    padding-top: 32px;
    padding-bottom: 32px
}

.py-\[40px\] {
    padding-top: 40px;
    padding-bottom: 40px
}

.pb-2 {
    padding-bottom: .5rem
}

.pb-3 {
    padding-bottom: .75rem
}

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

.pb-6 {
    padding-bottom: 1.5rem
}

.pb-\[32px\] {
    padding-bottom: 32px
}

.pe-1 {
    padding-inline-end: .25rem
}

.pe-3 {
    padding-inline-end: .75rem
}

.pe-8 {
    padding-inline-end: 2rem
}

.pl-4 {
    padding-left: 1rem
}

.pr-2 {
    padding-right: .5rem
}

.ps-1 {
    padding-inline-start: .25rem
}

.ps-2 {
    padding-inline-start: .5rem
}

.ps-4 {
    padding-inline-start: 1rem
}

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

.pt-3 {
    padding-top: .75rem
}

.pt-4 {
    padding-top: 1rem
}

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

.pt-\[32px\] {
    padding-top: 32px
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-start {
    text-align: start
}

.text-\[10px\] {
    font-size: 10px
}

.text-\[12px\] {
    font-size: 12px
}

.text-\[13px\] {
    font-size: 13px
}

.text-\[14px\] {
    font-size: 14px
}

.text-\[15px\] {
    font-size: 15px
}

.text-\[16px\] {
    font-size: 16px
}

.text-\[18px\] {
    font-size: 18px
}

.text-\[20px\] {
    font-size: 20px
}

.text-\[24px\] {
    font-size: 24px
}

.text-\[25px\] {
    font-size: 25px
}

.text-\[26px\] {
    font-size: 26px
}

.text-\[30px\] {
    font-size: 30px
}

.text-\[32px\] {
    font-size: 32px
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.font-\[500\] {
    font-weight: 500
}

.font-bold {
    font-weight: 700
}

.uppercase {
    text-transform: uppercase
}

.capitalize {
    text-transform: capitalize
}

.italic {
    font-style: italic
}

.leading-\[1\.1\] {
    line-height: 1.1
}

.leading-\[1\.2\] {
    line-height: 1.2
}

.leading-\[1\.3\] {
    line-height: 1.3
}

.leading-\[1\.6\] {
    line-height: 1.6
}

.leading-\[1\],
.leading-none {
    line-height: 1
}

.leading-\[20px\] {
    line-height: 20px
}

.leading-\[30px\] {
    line-height: 30px
}

.leading-\[50px\] {
    line-height: 50px
}

.tracking-\[1\.2px\] {
    letter-spacing: 1.2px
}

.tracking-\[1px\] {
    letter-spacing: 1px
}

.tracking-\[2px\] {
    letter-spacing: 2px
}

.text-\[\#000000\],
.text-\[\#000\],
.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0/var(--tw-text-opacity, 1))
}

.text-\[\#02403D\] {
    --tw-text-opacity: 1;
    color: rgb(2 64 61/var(--tw-text-opacity, 1))
}

.text-\[\#02DF82\] {
    --tw-text-opacity: 1;
    color: rgb(2 223 130/var(--tw-text-opacity, 1))
}

.text-\[\#06402B\] {
    --tw-text-opacity: 1;
    color: rgb(6 64 43/var(--tw-text-opacity, 1))
}

.text-\[\#181F21\] {
    --tw-text-opacity: 1;
    color: rgb(24 31 33/var(--tw-text-opacity, 1))
}

.text-\[\#2DC697\] {
    --tw-text-opacity: 1;
    color: rgb(45 198 151/var(--tw-text-opacity, 1))
}

.text-\[\#4A4A4A\] {
    --tw-text-opacity: 1;
    color: rgb(74 74 74/var(--tw-text-opacity, 1))
}

.text-\[\#5A5A5A\] {
    --tw-text-opacity: 1;
    color: rgb(90 90 90/var(--tw-text-opacity, 1))
}

.text-\[\#666666\] {
    --tw-text-opacity: 1;
    color: rgb(102 102 102/var(--tw-text-opacity, 1))
}

.text-\[\#7C7C7C\] {
    --tw-text-opacity: 1;
    color: rgb(124 124 124/var(--tw-text-opacity, 1))
}

.text-\[\#7F8384\] {
    --tw-text-opacity: 1;
    color: rgb(127 131 132/var(--tw-text-opacity, 1))
}

.text-\[\#939393\] {
    --tw-text-opacity: 1;
    color: rgb(147 147 147/var(--tw-text-opacity, 1))
}

.text-\[\#ADADAD\] {
    --tw-text-opacity: 1;
    color: rgb(173 173 173/var(--tw-text-opacity, 1))
}

.text-\[\#AEAEAE\] {
    --tw-text-opacity: 1;
    color: rgb(174 174 174/var(--tw-text-opacity, 1))
}

.text-\[\#C4C4C4\] {
    --tw-text-opacity: 1;
    color: rgb(196 196 196/var(--tw-text-opacity, 1))
}

.text-\[\#DBDBDB\] {
    --tw-text-opacity: 1;
    color: rgb(219 219 219/var(--tw-text-opacity, 1))
}

.aria-selected\:text-white[aria-selected=true],
.group:hover .group-hover\:text-\[\#fff\],
.hover\:text-white:hover,
.text-\[\#FFFFFF\],
.text-\[\#fff\],
.text-\[\#ffffff\],
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.underline {
    text-decoration-line: underline
}

.opacity-0,
.owl-carousel.owl-hidden {
    opacity: 0
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)
}

.brightness-0 {
    --tw-brightness: brightness(0)
}

.brightness-\[200\%\] {
    --tw-brightness: brightness(200%)
}

.invert {
    --tw-invert: invert(100%)
}

.invert-0 {
    --tw-invert: invert(0)
}

.backdrop-blur-lg {
    --tw-backdrop-blur: blur(16px)
}

.backdrop-blur-lg,
.backdrop-blur-sm {
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px)
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter
}

.transition-all {
    transition-property: all
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke
}

.transition-transform {
    transition-property: transform
}

.duration-100 {
    transition-duration: .1s
}

.duration-150 {
    transition-duration: .15s
}

.duration-200 {
    transition-duration: .2s
}

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

.duration-500 {
    transition-duration: .5s
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, .2, 1)
}

.content-\[\'\+\'\] {
    --tw-content: "+";
    content: var(--tw-content)
}

.marker\:text-\[20px\] ::marker {
    font-size: 20px
}

.marker\:text-\[\#02DF82\] ::marker {
    color: #02df82
}

.marker\:text-\[20px\]::marker {
    font-size: 20px
}

.marker\:text-\[\#02DF82\]::marker {
    color: #02df82
}

.placeholder\:text-\[12px\]::-moz-placeholder {
    font-size: 12px
}

.placeholder\:text-\[12px\]::placeholder {
    font-size: 12px
}

.placeholder\:text-\[\#181F21\]::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(24 31 33/var(--tw-text-opacity, 1))
}

.placeholder\:text-\[\#181F21\]::placeholder {
    --tw-text-opacity: 1;
    color: rgb(24 31 33/var(--tw-text-opacity, 1))
}

.hover\:translate-y-\[-20px\]:hover {
    --tw-translate-y: -20px
}

.hover\:scale-105:hover,
.hover\:scale-\[1\.05\]:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05
}

.hover\:scale-110:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1
}

.hover\:border-\[\#06402B\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(6 64 43/var(--tw-border-opacity, 1))
}

.hover\:border-\[\#404040\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(64 64 64/var(--tw-border-opacity, 1))
}

.focus\:outline-none:focus {
    outline: #0000 solid 2px;
    outline-offset: 2px
}

.group:hover .group-hover\:rotate-180 {
    --tw-rotate: 180deg
}

.group:hover .group-hover\:scale-125 {
    --tw-scale-x: 1.25;
    --tw-scale-y: 1.25
}

.group:hover .group-hover\:scale-x-100 {
    --tw-scale-x: 1
}

.group:hover .group-hover\:to-\[\#1E90FF\] {
    --tw-gradient-to: #1e90ff var(--tw-gradient-to-position)
}

.group:hover .group-hover\:invert {
    --tw-invert: invert(100%)
}

@media (min-width:640px) {
    .sm\:absolute {
        position: absolute
    }

    .sm\:top-\[14px\] {
        top: 14px
    }

    .sm\:top-\[7px\] {
        top: 7px
    }

    .sm\:order-1 {
        order: 1
    }

    .sm\:order-3 {
        order: 3
    }

    .sm\:order-4 {
        order: 4
    }

    .sm\:col-span-12 {
        grid-column: span 12/span 12
    }

    .sm\:col-span-4 {
        grid-column: span 4/span 4
    }

    .sm\:col-span-5 {
        grid-column: span 5/span 5
    }

    .sm\:col-span-6 {
        grid-column: span 6/span 6
    }

    .sm\:col-span-7 {
        grid-column: span 7/span 7
    }

    .sm\:col-span-8 {
        grid-column: span 8/span 8
    }

    .sm\:col-start-4 {
        grid-column-start: 4
    }

    .sm\:block {
        display: block
    }

    .sm\:flex {
        display: flex
    }

    .sm\:hidden {
        display: none
    }

    .sm\:h-14 {
        height: 3.5rem
    }

    .sm\:h-\[20px\] {
        height: 20px
    }

    .sm\:max-h-\[130px\] {
        max-height: 130px
    }

    .sm\:max-h-\[140px\] {
        max-height: 140px
    }

    .sm\:max-h-full {
        max-height: 100%
    }

    .sm\:min-h-\[130px\] {
        min-height: 130px
    }

    .sm\:min-h-\[140px\] {
        min-height: 140px
    }

    .sm\:min-h-\[350px\] {
        min-height: 350px
    }

    .sm\:min-h-\[400px\] {
        min-height: 400px
    }

    .sm\:w-12 {
        width: 3rem
    }

    .sm\:w-14 {
        width: 3.5rem
    }

    .sm\:w-\[30px\] {
        width: 30px
    }

    .sm\:w-auto {
        width: auto
    }

    .sm\:max-w-\[600px\] {
        max-width: 600px
    }

    .sm\:rotate-\[0deg\] {
        --tw-rotate: 0deg
    }

    .sm\:rotate-\[0deg\],
    .sm\:rotate-\[90deg\] {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .sm\:rotate-\[90deg\] {
        --tw-rotate: 90deg
    }

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

    .sm\:grid-rows-1 {
        grid-template-rows: repeat(1, minmax(0, 1fr))
    }

    .sm\:justify-end {
        justify-content: flex-end
    }

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

    .sm\:gap-6 {
        gap: 1.5rem
    }

    .sm\:overflow-visible {
        overflow: visible
    }

    .sm\:p-\[60px\] {
        padding: 60px
    }

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

    .sm\:py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem
    }

    .sm\:py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem
    }

    .sm\:py-\[32px\] {
        padding-top: 32px;
        padding-bottom: 32px
    }

    .sm\:pb-6 {
        padding-bottom: 1.5rem
    }

    .sm\:pr-8 {
        padding-right: 2rem
    }

    .sm\:text-start {
        text-align: start
    }

    .sm\:text-\[14px\] {
        font-size: 14px
    }

    .sm\:text-\[16px\] {
        font-size: 16px
    }

    .sm\:text-\[20px\] {
        font-size: 20px
    }

    .sm\:text-\[22px\] {
        font-size: 22px
    }

    .sm\:text-\[24px\] {
        font-size: 24px
    }

    .sm\:text-\[28px\] {
        font-size: 28px
    }

    .sm\:text-\[30px\] {
        font-size: 30px
    }

    .sm\:text-\[36px\] {
        font-size: 36px
    }

    .sm\:text-\[42px\] {
        font-size: 42px
    }
}

@media (min-width:768px) {
    .md\:inset-0 {
        inset: 0
    }

    .md\:right-8 {
        right: 2rem
    }

    .md\:right-\[10px\] {
        right: 10px
    }

    .md\:top-8 {
        top: 2rem
    }

    .md\:top-\[10px\] {
        top: 10px
    }

    .md\:col-span-3 {
        grid-column: span 3/span 3
    }

    .md\:col-span-4 {
        grid-column: span 4/span 4
    }

    .md\:col-span-5 {
        grid-column: span 5/span 5
    }

    .md\:col-span-6 {
        grid-column: span 6/span 6
    }

    .md\:col-span-7 {
        grid-column: span 7/span 7
    }

    .md\:col-span-8 {
        grid-column: span 8/span 8
    }

    .md\:mx-0 {
        margin-left: 0;
        margin-right: 0
    }

    .md\:my-6 {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem
    }

    .md\:mb-0 {
        margin-bottom: 0
    }

    .md\:mb-3 {
        margin-bottom: .75rem
    }

    .md\:mb-4 {
        margin-bottom: 1rem
    }

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

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

    .md\:mb-\[90px\] {
        margin-bottom: 90px
    }

    .md\:mt-14 {
        margin-top: 3.5rem
    }

    .md\:mt-5 {
        margin-top: 1.25rem
    }

    .md\:mt-6 {
        margin-top: 1.5rem
    }

    .md\:mt-\[25px\] {
        margin-top: 25px
    }

    .md\:mt-\[50px\] {
        margin-top: 50px
    }

    .md\:mt-\[90px\] {
        margin-top: 90px
    }

    .md\:block {
        display: block
    }

    .md\:hidden {
        display: none
    }

    .md\:h-12 {
        height: 3rem
    }

    .md\:max-h-\[46px\] {
        max-height: 46px
    }

    .md\:min-h-\[200px\] {
        min-height: 200px
    }

    @media (min-width:768px) {
        .md\:md\:w-10\/12 {
            width: 83.333333%
        }
    }

    .md\:w-10\/12 {
        width: 83.333333%
    }

    .md\:w-11\/12 {
        width: 91.666667%
    }

    .md\:w-12 {
        width: 3rem
    }

    .md\:w-5 {
        width: 1.25rem
    }

    .md\:w-6\/12 {
        width: 50%
    }

    .md\:w-8\/12 {
        width: 66.666667%
    }

    .md\:w-\[180px\] {
        width: 180px
    }

    .md\:w-auto {
        width: auto
    }

    .md\:max-w-\[460px\] {
        max-width: 460px
    }

    .md\:max-w-\[500px\] {
        max-width: 500px
    }

    .md\:max-w-\[65\%\] {
        max-width: 65%
    }

    .md\:max-w-\[75\%\] {
        max-width: 75%
    }

    .md\:max-w-\[80\%\] {
        max-width: 80%
    }

    .md\:flex-row {
        flex-direction: row
    }

    .md\:items-center {
        align-items: center
    }

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

    .md\:gap-10 {
        gap: 2.5rem
    }

    .md\:gap-x-10 {
        -moz-column-gap: 2.5rem;
        column-gap: 2.5rem
    }

    .md\:gap-x-8 {
        -moz-column-gap: 2rem;
        column-gap: 2rem
    }

    .md\:space-x-8>:not([hidden])~:not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(2rem*var(--tw-space-x-reverse));
        margin-left: calc(2rem*(1 - var(--tw-space-x-reverse)))
    }

    .md\:rounded-\[40px\] {
        border-radius: 40px
    }

    .md\:p-6 {
        padding: 1.5rem
    }

    .md\:p-\[35px\] {
        padding: 35px
    }

    .md\:py-0 {
        padding-top: 0;
        padding-bottom: 0
    }

    .md\:py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem
    }

    .md\:py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem
    }

    .md\:py-\[50px\] {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .md\:pb-10 {
        padding-bottom: 2.5rem
    }

    .md\:pr-12 {
        padding-right: 3rem
    }

    .md\:ps-5 {
        padding-inline-start: 1.25rem
    }

    .md\:pt-8 {
        padding-top: 2rem
    }

    .md\:text-\[13px\] {
        font-size: 13px
    }

    .md\:text-\[14px\] {
        font-size: 14px
    }

    .md\:text-\[16px\] {
        font-size: 16px
    }

    .md\:text-\[18px\] {
        font-size: 18px
    }

    .md\:text-\[20px\] {
        font-size: 20px
    }

    .md\:text-\[22px\] {
        font-size: 22px
    }

    .md\:text-\[24px\] {
        font-size: 24px
    }

    .md\:text-\[25px\] {
        font-size: 25px
    }

    .md\:text-\[26px\] {
        font-size: 26px
    }

    .md\:text-\[28px\] {
        font-size: 28px
    }

    .md\:text-\[30px\] {
        font-size: 30px
    }

    .md\:text-\[36px\] {
        font-size: 36px
    }

    .md\:text-\[40px\] {
        font-size: 40px
    }

    .md\:text-\[44px\] {
        font-size: 44px
    }

    .md\:text-\[56px\] {
        font-size: 56px
    }
}

@media (min-width:1024px) {
    .lg\:right-16 {
        right: 4rem
    }

    .lg\:top-0 {
        top: 0
    }

    .lg\:col-span-12 {
        grid-column: span 12/span 12
    }

    .lg\:col-span-2 {
        grid-column: span 2/span 2
    }

    .lg\:col-span-3 {
        grid-column: span 3/span 3
    }

    .lg\:col-span-4 {
        grid-column: span 4/span 4
    }

    .lg\:col-span-6 {
        grid-column: span 6/span 6
    }

    .lg\:mx-0 {
        margin-left: 0;
        margin-right: 0
    }

    .lg\:my-6 {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem
    }

    .lg\:mb-10 {
        margin-bottom: 2.5rem
    }

    .lg\:mb-16 {
        margin-bottom: 4rem
    }

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

    .lg\:mt-16 {
        margin-top: 4rem
    }

    .lg\:mt-4 {
        margin-top: 1rem
    }

    .lg\:mt-6 {
        margin-top: 1.5rem
    }

    .lg\:mt-8 {
        margin-top: 2rem
    }

    .lg\:mt-\[20px\] {
        margin-top: 20px
    }

    .lg\:mt-\[40px\] {
        margin-top: 40px
    }

    .lg\:mt-\[50px\] {
        margin-top: 50px
    }

    .lg\:mt-\[60px\] {
        margin-top: 60px
    }

    .lg\:mt-\[80px\] {
        margin-top: 80px
    }

    .lg\:block {
        display: block
    }

    .lg\:hidden {
        display: none
    }

    .lg\:h-14 {
        height: 3.5rem
    }

    .lg\:h-\[350px\] {
        height: 350px
    }

    .lg\:h-full {
        height: 100%
    }

    .lg\:min-h-\[450px\] {
        min-height: 450px
    }

    .lg\:min-h-\[470px\] {
        min-height: 470px
    }

    .lg\:w-14 {
        width: 3.5rem
    }

    .lg\:w-9\/12 {
        width: 75%
    }

    .lg\:w-auto {
        width: auto
    }

    .lg\:max-w-\[280px\] {
        max-width: 280px
    }

    .lg\:max-w-\[40px\] {
        max-width: 40px
    }

    .lg\:max-w-\[440px\] {
        max-width: 440px
    }

    .lg\:max-w-\[450px\] {
        max-width: 450px
    }

    .lg\:max-w-\[500px\] {
        max-width: 500px
    }

    .lg\:gap-12 {
        gap: 3rem
    }

    .lg\:gap-2 {
        gap: .5rem
    }

    .lg\:gap-6 {
        gap: 1.5rem
    }

    .lg\:gap-8 {
        gap: 2rem
    }

    .lg\:gap-y-12 {
        row-gap: 3rem
    }

    .lg\:divide-x-\[0\.5px\]>:not([hidden])~:not([hidden]) {
        --tw-divide-x-reverse: 0;
        border-right-width: calc(.5px*var(--tw-divide-x-reverse));
        border-left-width: calc(.5px*(1 - var(--tw-divide-x-reverse)))
    }

    .lg\:divide-x-\[1px\]>:not([hidden])~:not([hidden]) {
        --tw-divide-x-reverse: 0;
        border-right-width: calc(1px*var(--tw-divide-x-reverse));
        border-left-width: calc(1px*(1 - var(--tw-divide-x-reverse)))
    }

    .lg\:p-0 {
        padding: 0
    }

    .lg\:p-6 {
        padding: 1.5rem
    }

    .lg\:p-8 {
        padding: 2rem
    }

    .lg\:px-0 {
        padding-left: 0;
        padding-right: 0
    }

    .lg\:px-10 {
        padding-left: 2.5rem;
        padding-right: 2.5rem
    }

    .lg\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }

    .lg\:py-10 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem
    }

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

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

    .lg\:py-\[0px\] {
        padding-top: 0;
        padding-bottom: 0
    }

    .lg\:py-\[40px\] {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .lg\:py-\[50px\] {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .lg\:py-\[60px\] {
        padding-top: 60px;
        padding-bottom: 60px
    }

    .lg\:pb-\[120px\] {
        padding-bottom: 120px
    }

    .lg\:pb-\[40px\] {
        padding-bottom: 40px
    }

    .lg\:pb-\[70px\] {
        padding-bottom: 70px
    }

    .lg\:pb-\[90px\] {
        padding-bottom: 90px
    }

    .lg\:ps-7 {
        padding-inline-start: 1.75rem
    }

    .lg\:pt-10 {
        padding-top: 2.5rem
    }

    .lg\:pt-24 {
        padding-top: 6rem
    }

    .lg\:pt-\[40px\] {
        padding-top: 40px
    }

    .lg\:pt-\[70px\] {
        padding-top: 70px
    }

    .lg\:pt-\[90px\] {
        padding-top: 90px
    }

    .lg\:text-\[12px\] {
        font-size: 12px
    }

    .lg\:text-\[14px\] {
        font-size: 14px
    }

    .lg\:text-\[16px\] {
        font-size: 16px
    }

    .lg\:text-\[20px\] {
        font-size: 20px
    }

    .lg\:text-\[25px\] {
        font-size: 25px
    }

    .lg\:text-\[27px\] {
        font-size: 27px
    }

    .lg\:text-\[30px\] {
        font-size: 30px
    }

    .lg\:text-\[36px\] {
        font-size: 36px
    }

    .lg\:text-\[40px\] {
        font-size: 40px
    }

    .lg\:text-\[42px\] {
        font-size: 42px
    }

    .lg\:text-\[45px\] {
        font-size: 45px
    }

    .lg\:text-\[50px\] {
        font-size: 50px
    }

    .lg\:text-\[55px\] {
        font-size: 55px
    }

    .lg\:text-\[60px\] {
        font-size: 60px
    }

    .lg\:text-\[64px\] {
        font-size: 64px
    }

    .lg\:placeholder\:text-\[12px\]::-moz-placeholder {
        font-size: 12px
    }

    .lg\:placeholder\:text-\[12px\]::placeholder {
        font-size: 12px
    }

    .lg\:placeholder\:text-\[14px\]::-moz-placeholder {
        font-size: 14px
    }

    .lg\:placeholder\:text-\[14px\]::placeholder {
        font-size: 14px
    }

    .lg\:hover\:mt-\[-20px\]:hover {
        margin-top: -20px
    }
}

@media (min-width:1280px) {
    .xl\:top-\[50px\] {
        top: 50px
    }

    .xl\:col-span-5 {
        grid-column: span 5/span 5
    }

    .xl\:col-span-7 {
        grid-column: span 7/span 7
    }

    .xl\:mt-24 {
        margin-top: 6rem
    }

    .xl\:h-16 {
        height: 4rem
    }

    .xl\:w-16 {
        width: 4rem
    }

    .xl\:max-w-\[100px\] {
        max-width: 100px
    }

    .xl\:max-w-\[60px\] {
        max-width: 60px
    }

    .xl\:max-w-\[80px\] {
        max-width: 80px
    }

    .xl\:gap-6 {
        gap: 1.5rem
    }

    .xl\:px-0 {
        padding-left: 0;
        padding-right: 0
    }

    .xl\:pr-3 {
        padding-right: .75rem
    }

    .xl\:text-\[80px\] {
        font-size: 80px
    }
}

@media (min-width:1536px) {
    .\32xl\:px-0 {
        padding-left: 0;
        padding-right: 0
    }

    .\32xl\:text-\[22px\] {
        font-size: 22px
    }
}

.owl-carousel,
.owl-carousel .owl-item {
    -webkit-tap-highlight-color: transparent;
    position: relative
}

.owl-carousel {
    display: none;
    width: 100%;
    z-index: 1
}

.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    touch-action: manipulation;
    -moz-backface-visibility: hidden
}

.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0)
}

.owl-carousel .owl-item,
.owl-carousel .owl-wrapper {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0)
}

.owl-carousel .owl-item {
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-touch-callout: none
}

.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
    background: 0 0;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit
}

.owl-carousel.owl-loading {
    opacity: 0;
    display: block
}

.owl-carousel.owl-refresh .owl-item {
    visibility: hidden
}

.owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel.owl-grab {
    cursor: move;
    cursor: grab
}

.owl-carousel.owl-rtl {
    direction: rtl
}

.owl-carousel.owl-rtl .owl-item {
    float: right
}

.owl-carousel .animated {
    animation-duration: 1s;
    animation-fill-mode: both
}

.owl-carousel .fadeOut {
    animation-name: fadeOut
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.owl-height {
    transition: height .5s ease-in-out
}

.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    transition: opacity .4s
}

.owl-carousel .owl-item .owl-lazy:not([src]),
.owl-carousel .owl-item .owl-lazy[src^=""] {
    max-height: 0
}

.owl-carousel .owl-item img.owl-lazy {
    transform-style: preserve-3d
}

.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000
}

.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: url(owl.video.play.webp) no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    transition: transform .1s
}

.owl-carousel .owl-video-play-icon:hover {
    -ms-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3)
}

.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity .4s
}

.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%
}

.animate-spin-now {
    animation-name: spin;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.hide-now,
.mobile-mockup-carousel .owl-item h2 {
    display: block !important
}

@media only screen and (max-width:1023px) {

    .hide-now,
    .sticky-nav {
        display: none !important
    }
}

.scale-animation {
    display: inline-block;
    animation: 8s ease-in-out infinite scalePulse
}

#navbar {
    position: relative;
    transition: .3s ease-in-out
}

.stick {
    opacity: 1 !important;
    top: 0 !important;
    position: relative !important
}

#navbar.sticky-nav {
    position: fixed !important;
    top: 0;
    opacity: 1;
    width: 100%;
    z-index: 99;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1)
}

#navbar nav.bg-sticky {
    background: rgba(10, 10, 10, 0.95) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(212, 166, 52, 0.35);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.75);
    transition: all .3s ease-in-out
}

@keyframes scalePulse {

    0%,
    100% {
        transform: scale(.9)
    }

    50% {
        transform: scale(1)
    }
}

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

.group:hover .element {
    transform: translate(50%, -50%)
}

.marquee-cover {
    z-index: 10;
    opacity: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.checkbox-black {
    accent-color: black
}

@keyframes rotate-gradient {

    0%,
    100% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }
}

.custom-gradient {
    background-image: linear-gradient(135deg, #1A1508 0%, #2A2210 21%, #1A1A1A 38%, #2A2210 72%, #D4A634 100%);
    background-size: 300% 300%;
    animation: none !important;
}

.spin-animation {
    animation: 4s linear infinite spin;
    transition: transform .5s ease-in-out
}

@keyframes spin {

    0%,
    from {
        transform: rotate(0)
    }

    100%,
    to {
        transform: rotate(360deg)
    }
}

.services-scrollbar::-webkit-scrollbar {
    scroll-margin-left: 20px;
    width: 4px
}

.services-scrollbar::-webkit-scrollbar-thumb {
    background-color: #D4A634;
    border-radius: 4px;
    border: 2px solid #D4A634
}

.services-scrollbar::-webkit-scrollbar-track {
    background-color: #2A2A2A;
    border-radius: 4px
}

/* ========================================================
   Ecom Autotech - Luxury Black & Gold Theme (Facebook Aligned)
   WCAG AA+ Compliant Contrast & Modern Luxury Aesthetic
   ======================================================== */

/* Base Background & Body */

/* 1. Main Background Utilities */
.bg-\[\#0F172A\],
.bg-\[\#0f172a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1)) !important;
}

.hover\:bg-\[\#0F172A\]:hover,
.hover\:bg-\[\#0f172a\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1)) !important;
}

.aria-selected\:bg-\[\#0F172A\][aria-selected=true] {
    --tw-bg-opacity: 1;
    background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1)) !important;
}

.bg-\[\#0F172A\]\/90,
.bg-\[\#0f172a\]\/90 {
    background-color: rgba(10, 10, 10, 0.94) !important;
}

/* ==========================================================================
   1. ALTERNATING SECTION ARCHITECTURE
   ========================================================================== */

/* DARK SECTIONS (Hero, Carousel, Strategies, Partner/Logos, Testimonials, Footer) */
.bg-\[\#0F172A\],
.bg-\[\#0f172a\] {
    background-color: #0A0A0A !important;
}

/* LIGHT SECTIONS (About Us, Mobile Mockups, Services, FBA Growth, FAQ) */
.bg-\[\#FFFFFF\],
.bg-\[\#ffffff\],
.bg-\[\#fff\] {
    background-color: #FFFFFF !important;
    border-top: 1px solid rgba(212, 166, 52, 0.22);
    border-bottom: 1px solid rgba(212, 166, 52, 0.22);
    box-shadow: inset 0 8px 16px -8px rgba(0, 0, 0, 0.04), inset 0 -8px 16px -8px rgba(0, 0, 0, 0.04);
}

.bg-\[\#f8f8f8\] {
    background-color: #F8F8F8 !important;
}

.bg-\[\#1E293B\],
.bg-\[\#1e293b\] {
    background-color: #141414 !important;
}

.border-\[\#1E293B\],
.border-\[\#1e293b\] {
    border-color: #D4A634 !important;
}

/* ==========================================================================
   2. TYPOGRAPHY & CONTRAST (CONTEXTUAL WCAG AA/AAA)
   ========================================================================== */

/* --- DARK SECTION TYPOGRAPHY --- */
.bg-\[\#0F172A\] h1, .bg-\[\#0F172A\] h2, .bg-\[\#0F172A\] h3, .bg-\[\#0F172A\] h4,
.bg-\[\#0F172A\] .text-\[\#0F172A\], .bg-\[\#0F172A\] .text-\[\#fff\], .bg-\[\#0F172A\] .text-\[\#FFFFFF\],
.custom-gradient h1, .custom-gradient h2, .custom-gradient h3, .custom-gradient h4,
.custom-gradient .text-\[\#0F172A\],
footer.bg-\[\#0F172A\] h1, footer.bg-\[\#0F172A\] h2, footer.bg-\[\#0F172A\] h3, footer.bg-\[\#0F172A\] h4 {
    color: #FFFFFF !important;
}

.bg-\[\#0F172A\] p,
.bg-\[\#0F172A\] .text-\[\#5A5A5A\],
.bg-\[\#0F172A\] .text-\[\#939393\],
.bg-\[\#0F172A\] .text-\[\#ADADAD\],
.bg-\[\#0F172A\] .text-\[\#C4C4C4\],
.bg-\[\#0F172A\] .text-\[\#DBDBDB\],
.bg-\[\#0F172A\] .text-\[\#000\],
.bg-\[\#0F172A\] .text-\[\#000000\],
.custom-gradient p,
.custom-gradient .text-\[\#000\],
.custom-gradient .text-\[\#000000\],
.custom-gradient .text-\[\#5A5A5A\],
footer.bg-\[\#0F172A\] p,
footer.bg-\[\#0F172A\] a {
    color: #D1D5DB !important;
}

.bg-\[\#0F172A\] .text-\[\#e47b42\],
.bg-\[\#0F172A\] .text-\[\#FF7A1A\],
.custom-gradient .text-\[\#e47b42\],
footer.bg-\[\#0F172A\] .text-\[\#e47b42\],
footer.bg-\[\#0F172A\] a:hover {
    color: #ECC46A !important;
}

/* --- LIGHT SECTION TYPOGRAPHY --- */
.bg-\[\#FFFFFF\] h1, .bg-\[\#FFFFFF\] h2, .bg-\[\#FFFFFF\] h3, .bg-\[\#FFFFFF\] h4,
.bg-\[\#fff\] h1, .bg-\[\#fff\] h2, .bg-\[\#fff\] h3, .bg-\[\#fff\] h4,
.bg-\[\#FFFFFF\] .text-\[\#0F172A\], .bg-\[\#fff\] .text-\[\#0F172A\],
.bg-\[\#FFFFFF\] .text-\[\#000000\], .bg-\[\#fff\] .text-\[\#000000\],
.bg-\[\#FFFFFF\] .text-\[\#000\], .bg-\[\#fff\] .text-\[\#000\] {
    color: #0A0A0A !important;
}

.bg-\[\#FFFFFF\] p, .bg-\[\#fff\] p,
.bg-\[\#FFFFFF\] .text-\[\#5A5A5A\], .bg-\[\#fff\] .text-\[\#5A5A5A\],
.bg-\[\#FFFFFF\] .text-\[\#939393\], .bg-\[\#fff\] .text-\[\#939393\],
.bg-\[\#FFFFFF\] .text-\[\#4A4A4A\], .bg-\[\#fff\] .text-\[\#4A4A4A\],
.bg-\[\#FFFFFF\] .text-\[\#7F8384\], .bg-\[\#fff\] .text-\[\#7F8384\] {
    color: #374151 !important;
}

.bg-\[\#FFFFFF\] .text-\[\#e47b42\], .bg-\[\#fff\] .text-\[\#e47b42\],
.bg-\[\#FFFFFF\] .text-\[\#FF7A1A\], .bg-\[\#fff\] .text-\[\#FF7A1A\],
.bg-\[\#FFFFFF\] a:not(.group):not([onclick*="openModal"]):not([href^="tel:"]),
.bg-\[\#fff\] a:not(.group):not([onclick*="openModal"]):not([href^="tel:"]) {
    color: #B8861B !important;
}

/* Default Fallbacks */
.text-\[\#e47b42\],
.text-\[\#FF7A1A\],
.text-\[\#ff7a1a\],
.text-\[\#2DC697\],
.text-\[\#02DF82\],
.text-\[\#02df82\] {
    color: #ECC46A;
}

.hover\:text-\[\#e47b42\]:hover {
    color: #F3D27A !important;
}

.marker\:text-\[\#e47b42\] ::marker,
.marker\:text-\[\#e47b42\]::marker {
    color: #D4A634 !important;
}

/* ==========================================================================
   3. PRIMARY CTA BUTTONS (Gold Ribbon Gradient)
   ========================================================================== */
.group.bg-\[\#FFFFFF\],
.group.bg-\[\#ffffff\],
a.group.bg-\[\#FFFFFF\],
a.group.bg-\[\#ffffff\],
a[onclick*="openModal"].bg-\[\#FFFFFF\],
a[onclick*="openModal"].bg-\[\#ffffff\],
button.bg-\[\#FFFFFF\],
button.bg-\[\#ffffff\] {
    background: linear-gradient(135deg, #F3D27A 0%, #D4A634 50%, #B8861B 100%) !important;
    color: #0A0A0A !important;
    font-weight: 700 !important;
    border: 2px solid #D4A634 !important;
    box-shadow: 0 4px 15px rgba(212, 166, 52, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.group.bg-\[\#FFFFFF\]:hover,
.group.bg-\[\#ffffff\]:hover,
a.group.bg-\[\#FFFFFF\]:hover,
a.group.bg-\[\#ffffff\]:hover {
    background: linear-gradient(135deg, #FBE094 0%, #E5B842 50%, #C99525 100%) !important;
    box-shadow: 0 6px 22px rgba(212, 166, 52, 0.45) !important;
    transform: translateY(-1px);
}

.group.bg-\[\#FFFFFF\] svg rect,
.group.bg-\[\#ffffff\] svg rect,
a.group.bg-\[\#FFFFFF\] svg rect,
a.group.bg-\[\#ffffff\] svg rect {
    stroke: #0A0A0A !important;
}

.group.bg-\[\#FFFFFF\] svg path,
.group.bg-\[\#ffffff\] svg path,
a.group.bg-\[\#FFFFFF\] svg path,
a.group.bg-\[\#ffffff\] svg path {
    fill: #0A0A0A !important;
}

/* ==========================================================================
   4. SECONDARY CTA BUTTONS (Phone / Outline)
   ========================================================================== */
a[href^="tel:"].group,
.group.bg-\[\#1E293B\],
.group.bg-\[\#1e293b\] {
    background-color: #0E0E0E !important;
    color: #ECC46A !important;
    font-weight: 600 !important;
    /*border: 2px solid #D4A634 !important;*/
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
    transition: all 0.3s ease !important;
}

a[href^="tel:"].group:hover,
.group.bg-\[\#1E293B\]:hover,
.group.bg-\[\#1e293b\]:hover {
    background-color: rgba(212, 166, 52, 0.15) !important;
    border-color: #F3D27A !important;
    box-shadow: 0 0 15px rgba(212, 166, 52, 0.3) !important;
}

a[href^="tel:"].group svg rect,
.group.bg-\[\#1E293B\] svg rect {
    stroke: #ECC46A !important;
}

a[href^="tel:"].group svg path,
.group.bg-\[\#1E293B\] svg path {
    fill: #ECC46A !important;
}

/* ==========================================================================
   5. NAVIGATION, MEGA DROPDOWN & HEADER STYLING
   ========================================================================== */
#navbar nav.bg-sticky,
#navbar.sticky-nav nav {
    background: rgba(10, 10, 10, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(212, 166, 52, 0.35) !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.75) !important;
    transition: all .3s ease-in-out !important;
}

#navbar nav a:not(.nav-btn-free-audit),
#navbar nav span.change-text,
#navbar nav p.change-text {
    color: #FFFFFF !important;
    transition: color 0.2s ease !important;
}

#navbar nav a:not(.nav-btn-free-audit):hover span.change-text,
#navbar nav a:not(.nav-btn-free-audit):hover {
    color: #ECC46A !important;
}

.chatNow,
.fixed-width-button {
    border-color: #D4A634 !important;
    color: #ECC46A !important;
    background-color: rgba(20, 20, 20, 0.8) !important;
}

/* FREE AUDIT Button Styling */
#navbar .nav-btn-free-audit,
#navbar nav a.nav-btn-free-audit,
.nav-btn-free-audit,
a.nav-btn-free-audit,
a[href*="free-audit"].nav-btn-free-audit,
div.col-span-1 a[href*="free-audit"] {
    background: linear-gradient(135deg, #F3D27A 0%, #D4A634 50%, #B8861B 100%) !important;
    color: #0A0A0A !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    border-radius: 9999px !important;
    border: 1.5px solid #D4A634 !important;
    box-shadow: 0 2px 12px rgba(212, 166, 52, 0.35) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#navbar .nav-btn-free-audit:hover,
#navbar nav a.nav-btn-free-audit:hover,
.nav-btn-free-audit:hover,
a.nav-btn-free-audit:hover,
a[href*="free-audit"].nav-btn-free-audit:hover,
div.col-span-1 a[href*="free-audit"]:hover {
    background: linear-gradient(135deg, #FBE094 0%, #E5B842 50%, #C99525 100%) !important;
    box-shadow: 0 4px 20px rgba(212, 166, 52, 0.6), 0 0 12px rgba(212, 166, 52, 0.35) !important;
    transform: translateY(-2px) scale(1.03) !important;
    color: #0A0A0A !important;
    border-color: #FBE094 !important;
}

.border-y-\[\#000\] {
    border-color: rgba(212, 166, 52, 0.3) !important;
}

/* Services Mega Dropdown */
.cust-bg,
div.cust-bg {
    background: transparent !important;
    display: none !important;
}

.group:hover .cust-bg,
.group:focus-within .cust-bg,
.cust-bg:hover {
    display: block !important;
    animation: fadeInDropdown 0.25s ease-out forwards;
}

@keyframes fadeInDropdown {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.group .cust-bg > div,
.cust-bg > div,
.cust-bg .bg-\[rgb\(15\,23\,42\,0\.97\)\] {
    background: rgba(14, 14, 14, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(212, 166, 52, 0.25) !important;
    border-bottom: 2px solid #D4A634 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(212, 166, 52, 0.1) !important;
}

.our-services .dropdown-menu {
    background: #141414 !important;
    border: 1px solid rgba(212, 166, 52, 0.35) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
}

.our-services .dropdown-menu a {
    color: #FFFFFF !important;
}

.our-services .dropdown-menu a:hover {
    color: #ECC46A !important;
}

.cust-bg p.parafina-bold {
    color: #FFFFFF !important;
    border-bottom: 1px solid rgba(212, 166, 52, 0.25) !important;
    padding-bottom: 10px !important;
}

.cust-bg ul li {
    padding: 6px 0 !important;
    transition: all 0.2s ease !important;
}

.cust-bg ul li::marker {
    color: #D4A634 !important;
}

.cust-bg ul li a {
    color: #D1D5DB !important;
    transition: all 0.2s ease !important;
}

.cust-bg ul li:hover a {
    color: #ECC46A !important;
    padding-left: 6px !important;
}

.cust-bg .cust-bg-orange-light {
    background: transparent !important;
}

.cust-bg video {
    border: 2px solid rgba(212, 166, 52, 0.4) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 166, 52, 0.15) !important;
}

/* ==========================================================================
   6. CUSTOM GRADIENT BANNERS WITH LUXURY TECH GRID PATTERN
   ========================================================================== */
.custom-gradient {
    position: relative !important;
    animation: none !important;
    transform: none !important;
    background-position: 0 0, 0 0, center top, 0 0 !important;
    background-color: #0E0E0E !important;
    background-image: 
        linear-gradient(to right, rgba(212, 166, 52, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(212, 166, 52, 0.08) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 0%, rgba(212, 166, 52, 0.18) 0%, transparent 70%),
        linear-gradient(135deg, #181818 0%, #0A0A0A 100%) !important;
    background-size: 36px 36px, 36px 36px, 100% 100%, 100% 100% !important;
    background-repeat: repeat, repeat, no-repeat, no-repeat !important;
    border: 1px solid rgba(212, 166, 52, 0.35) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), inset 0 0 35px rgba(212, 166, 52, 0.05) !important;
    overflow: visible !important;
}

.custom-gradient::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    animation: none !important;
    transform: none !important;
    background: radial-gradient(circle at 85% 20%, rgba(212, 166, 52, 0.12) 0%, transparent 50%),
                radial-gradient(circle at 15% 85%, rgba(212, 166, 52, 0.08) 0%, transparent 40%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.custom-gradient > * {
    position: relative !important;
    z-index: 2 !important;
}

.animate-spin-now,
img[src*="earth-globe"] {
    position: relative !important;
    top: -95px !important;
    margin-bottom: -40px !important;
    z-index: 10 !important;
}

.custom-gradient a:not(.group) {
    color: #ECC46A !important;
    font-weight: 600 !important;
}

.custom-gradient button,
.custom-gradient button[class*="text-"],
.custom-gradient button.text-\[\#e47b42\],
.custom-gradient button.text-\[\#FF7A1A\],
.custom-gradient button span {
    background: linear-gradient(135deg, #F3D27A 0%, #D4A634 50%, #B8861B 100%) !important;
    color: #0A0A0A !important;
    font-weight: 700 !important;
    border-color: #D4A634 !important;
    box-shadow: 0 4px 15px rgba(212, 166, 52, 0.3) !important;
}

.custom-gradient button:hover,
.custom-gradient button[class*="text-"]:hover {
    background: linear-gradient(135deg, #FBE094 0%, #E5B842 50%, #C99525 100%) !important;
    color: #0A0A0A !important;
    box-shadow: 0 6px 20px rgba(212, 166, 52, 0.5) !important;
}

/* Card Typography inside all sections (FAQ card, Consultation card, etc.) */
.custom-gradient h1,
.custom-gradient h2,
.custom-gradient h3,
.custom-gradient h4,
.custom-gradient .parafina-bold,
.bg-\[\#fff\] .custom-gradient h1,
.bg-\[\#fff\] .custom-gradient h2,
.bg-\[\#fff\] .custom-gradient h3,
.bg-\[\#fff\] .custom-gradient h4,
.bg-\[\#FFFFFF\] .custom-gradient h1,
.bg-\[\#FFFFFF\] .custom-gradient h2,
.bg-\[\#FFFFFF\] .custom-gradient h3,
.bg-\[\#FFFFFF\] .custom-gradient h4 {
    color: #FFFFFF !important;
}

.custom-gradient p,
.bg-\[\#fff\] .custom-gradient p,
.bg-\[\#FFFFFF\] .custom-gradient p {
    color: #D1D5DB !important;
}

.custom-gradient a,
.bg-\[\#fff\] .custom-gradient a,
.bg-\[\#FFFFFF\] .custom-gradient a {
    color: #ECC46A !important;
}

.custom-gradient a:hover,
.bg-\[\#fff\] .custom-gradient a:hover,
.bg-\[\#FFFFFF\] .custom-gradient a:hover {
    color: #F3D27A !important;
}

img[src*="faqs-arrow"] {
    display: none !important;
}

/* ==========================================================================
   7. SERVICE CAROUSEL & FLOATING SERVICE CARDS
   ========================================================================== */
.carousel-2 .item > a > div,
.carousel-2 .bg-\[\#e47b42\],
div.bg-\[\#e47b42\].rounded-\[40px\] {
    background: linear-gradient(145deg, #181818 0%, #111111 100%) !important;
    border: 1px solid rgba(212, 166, 52, 0.3) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.carousel-2 .item > a > div:hover,
div.bg-\[\#e47b42\].rounded-\[40px\]:hover {
    border-color: #D4A634 !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(212, 166, 52, 0.25) !important;
    transform: translateY(-4px) !important;
}

.carousel-2 .item > a > div h3,
div.bg-\[\#e47b42\].rounded-\[40px\] h3 {
    color: #FFFFFF !important;
}

.carousel-2 .item > a > div h3 span,
div.bg-\[\#e47b42\].rounded-\[40px\] h3 span {
    color: #ECC46A !important;
    text-decoration-color: #D4A634 !important;
}

.carousel-2 .item > a > div p,
div.bg-\[\#e47b42\].rounded-\[40px\] p {
    color: #D1D5DB !important;
}

.carousel-2 .item > a > div img[src*="tilt-arrow"],
div.bg-\[\#e47b42\].rounded-\[40px\] img[src*="tilt-arrow"] {
    filter: sepia(1) hue-rotate(5deg) saturate(3) !important;
}

.prev-btn, .next-btn {
    background-color: #181818 !important;
    border-color: rgba(212, 166, 52, 0.4) !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.prev-btn:hover, .next-btn:hover {
    background-color: #D4A634 !important;
    border-color: #F3D27A !important;
}

.prev-btn img, .next-btn img {
    filter: sepia(1) hue-rotate(5deg) saturate(3) !important;
}

.prev-btn:hover img, .next-btn:hover img {
    filter: brightness(0) !important;
}

/* ==========================================================================
   8. FBA FEATURE PILLS (Inside Light FBA Section)
   ========================================================================== */
div[class*="bg-[rgb(2,64,61)]"],
.bg-\[rgb\(2\,64\,61\)\] {
    background-color: #141414 !important;
    border: 1px solid rgba(212, 166, 52, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

div[class*="bg-[rgb(2,64,61)]"] img,
.bg-\[rgb\(2\,64\,61\)\] img {
    filter: sepia(1) hue-rotate(5deg) saturate(3) brightness(1.1) !important;
}

div[class*="bg-[rgb(2,64,61)]"] p,
.bg-\[rgb\(2\,64\,61\)\] p {
    color: #D1D5DB !important;
}

div[class*="bg-[rgb(2,64,61)]"] p span,
.bg-\[rgb\(2\,64\,61\)\] p span {
    color: #ECC46A !important;
}

/* ==========================================================================
   9. FAQ ACCORDION (Inside Light FAQ Section)
   ========================================================================== */
.bg-\[\#fff\] .accordion-button,
.bg-\[\#fff\] .accordion-button span {
    color: #0A0A0A !important;
    transition: color 0.2s ease !important;
}

.bg-\[\#fff\] .accordion-button:hover span {
    color: #B8861B !important;
}

.bg-\[\#fff\] .accordion-content {
    color: #374151 !important;
    line-height: 1.7 !important;
}

.bg-\[\#fff\] .border-\[\#4A4A4A\],
.bg-\[\#fff\] .border-\[\#4a4a4a\] {
    border-color: rgba(212, 166, 52, 0.22) !important;
}

.expand-icon,
.collapse-icon {
    filter: sepia(1) hue-rotate(5deg) saturate(3) brightness(1.1) !important;
}

.bg-\[\#fff\] a[href*="contact-us"].text-\[\#000\] {
    color: #B8861B !important;
    font-weight: 600 !important;
}

img[src*="accordian-arrow"] {
    filter: sepia(1) hue-rotate(5deg) saturate(3) !important;
}

/* ==========================================================================
   10. TESTIMONIALS (High-Contrast White & Gold on Dark Cards)
   ========================================================================== */
.testimonial .bg-\[\#fff\],
.testimonial .bg-\[\#fff\].shadow-md,
.testimonial .bg-\[\#FFFFFF\],
.testimonial .bg-\[\#FFFFFF\].shadow-md,
.testimonial .bg-\[\#141414\],
.testimonial .item > div {
    background-color: #141414 !important;
    border: 1px solid rgba(212, 166, 52, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.3s ease !important;
}

.testimonial .item > div:hover {
    border-color: #D4A634 !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(212, 166, 52, 0.2) !important;
    transform: translateY(-3px) !important;
}

.testimonial h4,
.testimonial .item h4,
.testimonial .item .poppins-bold,
.testimonial .item h4[class*="text-"],
.testimonial [class*="text-"][class*="000"] {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.testimonial p,
.testimonial .item p,
.testimonial .item p[class*="text-"],
.testimonial .item p.text-\[\#000000\],
.testimonial .item p.text-\[\#000\],
.testimonial .item p.text-\[\#D1D5DB\] {
    color: #D1D5DB !important;
    line-height: 1.65 !important;
}

.testimonial .bg-\[\#e47b42\] {
    background: linear-gradient(135deg, #F3D27A 0%, #D4A634 100%) !important;
}

.testimonial .bg-\[\#e47b42\] h2 {
    color: #0A0A0A !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   11. LEAD CAPTURE MODAL (modal-lead.php)
   ========================================================================== */
#popup-global .rounded-\[30px\] {
    background: rgba(20, 20, 20, 0.96) !important;
    border: 1px solid rgba(212, 166, 52, 0.35) !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 35px rgba(212, 166, 52, 0.15) !important;
}

#popup-global h2 {
    color: #FFFFFF !important;
}

#popup-global p {
    color: #D1D5DB !important;
}

#popup-global input[type="text"],
#popup-global input[type="email"],
#popup-global input[type="tel"],
#popup-global textarea {
    background-color: #0E0E0E !important;
    border: 1px solid rgba(212, 166, 52, 0.3) !important;
    color: #FFFFFF !important;
}

#popup-global input::placeholder,
#popup-global textarea::placeholder {
    color: #888888 !important;
}

#popup-global input:focus,
#popup-global textarea:focus {
    border-color: #D4A634 !important;
    box-shadow: 0 0 12px rgba(212, 166, 52, 0.3) !important;
}

#popup-global button[type="submit"] {
    background: linear-gradient(135deg, #F3D27A 0%, #D4A634 50%, #B8861B 100%) !important;
    color: #0A0A0A !important;
    font-weight: 700 !important;
    border-color: #D4A634 !important;
    box-shadow: 0 4px 15px rgba(212, 166, 52, 0.3) !important;
}

#popup-global button[type="submit"] svg rect {
    stroke: #0A0A0A !important;
}

#popup-global button[type="submit"] svg path {
    fill: #0A0A0A !important;
}

#popup-global button.bg-\[\#e47b42\] {
    background-color: #D4A634 !important;
    color: #0A0A0A !important;
}

#popup-global button.bg-\[\#e47b42\] svg {
    color: #0A0A0A !important;
    fill: #0A0A0A !important;
}

#popup-global p.text-\[\#B0B0B0\] {
    color: #CCCCCC !important;
}

/* ==========================================================================
   12. GENERAL DIVIDERS & CONTROLS
   ========================================================================== */
.border-\[\#e2e2e2\],
.border-\[\#e2e2e2\]\/30 {
    border-color: rgba(212, 166, 52, 0.25) !important;
}

.owl-dot.active span {
    background-color: #D4A634 !important;
    box-shadow: 0 0 8px rgba(212, 166, 52, 0.5) !important;
}

.owl-dot span {
    background-color: #444444 !important;
}

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: #0A0A0A;
}

body::-webkit-scrollbar-thumb {
    background: #262626;
    border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #D4A634;
}

@media print {
    body, footer, nav {
        background: #fff !important;
        color: #000 !important;
    }
}

.mobile-mockup-section {
    padding-bottom: 140px !important;
}

/* ==========================================================================
   13. SERVICE PAGES HERO SECTION & CARD CONTRAST
   ========================================================================== */
/* Matching the exact CTA Section luxury gradient & gold grid backdrop */
.service-hero-bg,
div.service-hero-bg,
div.bg-\[\#0F172A\].service-hero-bg,
div.relative > div.absolute.top-0.left-0.bg-\[\#0F172A\].z-\[-1\],
div.relative > div.bg-\[\#0F172A\].z-\[-1\],
.service-hero-section,
body:not(.home-page) .py-\[32px\].lg\:pb-\[70px\].relative > div.bg-\[\#0F172A\] {
    background-color: #0E0E0E !important;
    background-image: 
        linear-gradient(to right, rgba(212, 166, 52, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(212, 166, 52, 0.08) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 20%, rgba(212, 166, 52, 0.22) 0%, transparent 70%),
        radial-gradient(circle at 85% 20%, rgba(212, 166, 52, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 15% 85%, rgba(212, 166, 52, 0.08) 0%, transparent 40%),
        linear-gradient(135deg, #181818 0%, #0A0A0A 100%) !important;
    background-size: 36px 36px, 36px 36px, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
    background-position: 0 0, 0 0, center top, 0 0, 0 0, 0 0 !important;
}

/* Service Hero Cards for Maximum Separation & Visibility */
.py-\[32px\].lg\:pb-\[70px\] .bg-\[\#000\],
.service-hero-bg .bg-\[\#000\],
.service-hero-section .bg-\[\#000\],
div.bg-\[\#000\].rounded-\[20px\] {
    background: linear-gradient(145deg, #0E1218 0%, #080A0E 100%) !important;
    border: 1.5px solid rgba(212, 166, 52, 0.38) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 25px rgba(212, 166, 52, 0.08) !important;
    transition: all 0.3s ease !important;
}

.py-\[32px\].lg\:pb-\[70px\] .bg-\[\#000\]:hover,
.service-hero-bg .bg-\[\#000\]:hover,
div.bg-\[\#000\].rounded-\[20px\]:hover {
    border-color: #D4A634 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 30px rgba(212, 166, 52, 0.22) !important;
    transform: translateY(-3px) !important;
}

.py-\[32px\].lg\:pb-\[70px\] .bg-\[\#e47b42\],
.service-hero-bg .bg-\[\#e47b42\],
div.bg-\[\#e47b42\].rounded-\[20px\] {
    background: linear-gradient(145deg, #141820 0%, #0A0D12 100%) !important;
    border: 1.5px solid rgba(212, 166, 52, 0.38) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 25px rgba(212, 166, 52, 0.08) !important;
    transition: all 0.3s ease !important;
}

.py-\[32px\].lg\:pb-\[70px\] .bg-\[\#e47b42\]:hover,
.service-hero-bg .bg-\[\#e47b42\]:hover,
div.bg-\[\#e47b42\].rounded-\[20px\]:hover {
    border-color: #D4A634 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 30px rgba(212, 166, 52, 0.22) !important;
    transform: translateY(-3px) !important;
}

.py-\[32px\].lg\:pb-\[70px\] .bg-\[\#f8f8f8\],
.service-hero-bg .bg-\[\#f8f8f8\] {
    background: linear-gradient(145deg, #141820 0%, #0A0D12 100%) !important;
    border: 1.5px solid rgba(212, 166, 52, 0.35) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75) !important;
}

.py-\[32px\].lg\:pb-\[70px\] .bg-\[\#f8f8f8\] p.cursor-pointer,
.service-hero-bg .bg-\[\#f8f8f8\] p.cursor-pointer {
    background: linear-gradient(135deg, #F3D27A 0%, #D4A634 50%, #B8861B 100%) !important;
    color: #0A0A0A !important;
    font-weight: 700 !important;
    border: 1px solid #D4A634 !important;
    box-shadow: 0 4px 15px rgba(212, 166, 52, 0.3) !important;
}

/* Ensure mobile phone mockup and images in hero have soft elevation */
.py-\[32px\].lg\:pb-\[70px\] img[src*="mbl-"],
.service-hero-bg img[src*="mbl-"] {
    filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.8)) !important;
}

.service-hero-bg img.rounded-\[40px\],
.service-hero-bg img[src*="store-setup"] {
    border: 1.5px solid rgba(212, 166, 52, 0.38) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 25px rgba(212, 166, 52, 0.1) !important;
}

.cust-filter {
    filter: hue-rotate(253deg);
}

/* ==========================================================================
   14. FOOTER SOCIAL & REVIEW PLATFORM ICONS
   ========================================================================== */
.footer-social-inner-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.footer-social-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(212, 166, 52, 0.35) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.footer-social-item:hover {
    background: var(--color, #D4A634) !important;
    border-color: var(--color, #D4A634) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(212, 166, 52, 0.35) !important;
}

.footer-social-item .ahfb-svg-iconset {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.footer-social-item svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    fill: #FFFFFF !important;
    display: block !important;
    transition: all 0.3s ease !important;
}

.footer-social-item svg path {
    fill: #FFFFFF !important;
}

.footer-social-item svg line {
    stroke: #FFFFFF !important;
    stroke-width: 2 !important;
}