*,
        ::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 / 0.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 / 0.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:
        }

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

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

        :host,
        html {
            line-height: 1.5;
            -webkit-text-size-adjust: 100%;
            -moz-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 {
            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,
        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;
            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,
        dd,
        dl,
        figure,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        hr,
        p,
        pre {
            margin: 0
        }

        fieldset {
            margin: 0;
            padding: 0
        }

        legend {
            padding: 0
        }

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

        dialog {
            padding: 0
        }

        textarea {
            resize: vertical
        }

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

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

        :disabled {
            cursor: default
        }

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

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

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

        .pointer-events-none {
            pointer-events: none
        }

        .fixed {
            position: fixed
        }

        .absolute {
            position: absolute
        }

        .relative {
            position: relative
        }

        .inset-0 {
            inset: 0px
        }

        .top-0 {
            top: 0px
        }

        .-bottom-12 {
            bottom: -3rem
        }

        .-left-20 {
            left: -5rem
        }

        .-left-6 {
            left: -1.5rem
        }

        .-right-20 {
            right: -5rem
        }

        .-right-3 {
            right: -0.75rem
        }

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

        .-top-3 {
            top: -0.75rem
        }

        .-top-6 {
            top: -1.5rem
        }

        .bottom-20 {
            bottom: 5rem
        }

        .bottom-6 {
            bottom: 1.5rem
        }

        .left-0 {
            left: 0px
        }

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

        .left-10 {
            left: 2.5rem
        }

        .left-6 {
            left: 1.5rem
        }

        .left-\[12\.5\%\] {
            left: 12.5%
        }

        .right-10 {
            right: 2.5rem
        }

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

        .top-12 {
            top: 3rem
        }

        .top-20 {
            top: 5rem
        }

        .z-10 {
            z-index: 10
        }

        .z-20 {
            z-index: 20
        }

        .-z-0 {
            z-index: 0
        }

        .mx-4 {
            margin-left: 1rem;
            margin-right: 1rem
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        .ml-2 {
            margin-left: 0.5rem
        }

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

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

        .block {
            display: block
        }

        .inline-block {
            display: inline-block
        }

        .flex {
            display: flex
        }

        .inline-flex {
            display: inline-flex
        }

        .grid {
            display: grid
        }

        .hidden {
            display: none
        }

        .aspect-\[4\/3\] {
            aspect-ratio: 4/3
        }

        .h-8 {
            height: 2rem
        }

        .h-1 {
            height: 0.25rem
        }

        .h-10 {
            height: 2.5rem
        }

        .h-12 {
            height: 3rem
        }

        .h-3 {
            height: 0.75rem
        }

        .h-48 {
            height: 12rem
        }

        .h-6 {
            height: 1.5rem
        }

        .h-72 {
            height: 18rem
        }

        .h-80 {
            height: 20rem
        }

        .h-96 {
            height: 24rem
        }

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

        .h-full {
            height: 100%
        }

        .h-14 {
            height: 3.5rem
        }

        .h-5 {
            height: 1.25rem
        }

        .w-8 {
            width: 2rem
        }

        .w-full {
            width: 100%
        }

        .w-10 {
            width: 2.5rem
        }

        .w-12 {
            width: 3rem
        }

        .w-16 {
            width: 4rem
        }

        .w-24 {
            width: 6rem
        }

        .w-3 {
            width: 0.75rem
        }

        .w-48 {
            width: 12rem
        }

        .w-6 {
            width: 1.5rem
        }

        .w-72 {
            width: 18rem
        }

        .w-80 {
            width: 20rem
        }

        .w-96 {
            width: 24rem
        }

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

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

        .w-14 {
            width: 3.5rem
        }

        .w-5 {
            width: 1.25rem
        }

        .max-w-7xl {
            max-width: 80rem
        }

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

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

        .max-w-4xl {
            max-width: 56rem
        }

        .max-w-5xl {
            max-width: 64rem
        }

        .flex-1 {
            flex: 1 1 0%
        }

        .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)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        .-translate-y-1\/2 {
            --tw-translate-y: -50%;
            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))
        }

        .-rotate-6 {
            --tw-rotate: -6deg;
            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))
        }

        .rotate-3 {
            --tw-rotate: 3deg;
            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))
        }

        .transform {
            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))
        }

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

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

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

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

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

        .flex-col {
            flex-direction: column
        }

        .flex-wrap {
            flex-wrap: wrap
        }

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

        .items-center {
            align-items: center
        }

        .justify-center {
            justify-content: center
        }

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

        .gap-2 {
            gap: 0.5rem
        }

        .gap-4 {
            gap: 1rem
        }

        .gap-10 {
            gap: 2.5rem
        }

        .gap-16 {
            gap: 4rem
        }

        .gap-3 {
            gap: 0.75rem
        }

        .gap-6 {
            gap: 1.5rem
        }

        .gap-8 {
            gap: 2rem
        }

        .gap-1 {
            gap: 0.25rem
        }

        .gap-12 {
            gap: 3rem
        }

        .gap-5 {
            gap: 1.25rem
        }

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

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

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

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

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

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

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

        .overflow-hidden {
            overflow: hidden
        }

        .whitespace-nowrap {
            white-space: nowrap
        }

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

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

        .rounded-3xl {
            border-radius: 1.5rem
        }

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

        .rounded-md {
            border-radius: 0.375rem
        }

        .rounded-xl {
            border-radius: 0.75rem
        }

        .border {
            border-width: 1px
        }

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

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

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

        .border-\[\#e8dfd3\] {
            --tw-border-opacity: 1;
            border-color: rgb(232 223 211 / var(--tw-border-opacity, 1))
        }

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

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

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

        .bg-amber-400 {
            --tw-bg-opacity: 1;
            background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1))
        }

        .bg-white\/70 {
            background-color: rgb(255 255 255 / 0.7)
        }

        .bg-gray-50 {
            --tw-bg-opacity: 1;
            background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
        }

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

        .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))
        }

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

        .from-\[\#a5a094\] {
            --tw-gradient-from: #a5a094 var(--tw-gradient-from-position);
            --tw-gradient-to: rgb(165 160 148 / 0) var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
        }

        .from-\[\#a5a094\]\/10 {
            --tw-gradient-from: rgb(165 160 148 / 0.1) var(--tw-gradient-from-position);
            --tw-gradient-to: rgb(165 160 148 / 0) var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
        }

        .from-amber-100 {
            --tw-gradient-from: #fef3c7 var(--tw-gradient-from-position);
            --tw-gradient-to: rgb(254 243 199 / 0) var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
        }

        .from-amber-100\/30 {
            --tw-gradient-from: rgb(254 243 199 / 0.3) var(--tw-gradient-from-position);
            --tw-gradient-to: rgb(254 243 199 / 0) var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
        }

        .from-amber-400 {
            --tw-gradient-from: #fbbf24 var(--tw-gradient-from-position);
            --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
        }

        .from-amber-50\/40 {
            --tw-gradient-from: rgb(255 251 235 / 0.4) var(--tw-gradient-from-position);
            --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
        }

        .from-amber-500 {
            --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
            --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
        }

        .from-black\/50 {
            --tw-gradient-from: rgb(0 0 0 / 0.5) var(--tw-gradient-from-position);
            --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
        }

        .from-orange-100\/25 {
            --tw-gradient-from: rgb(255 237 213 / 0.25) var(--tw-gradient-from-position);
            --tw-gradient-to: rgb(255 237 213 / 0) var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
        }

        .from-transparent {
            --tw-gradient-from: transparent var(--tw-gradient-from-position);
            --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
        }

        .via-\[\#a5a094\] {
            --tw-gradient-to: rgb(165 160 148 / 0) var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-from), #a5a094 var(--tw-gradient-via-position), var(--tw-gradient-to)
        }

        .via-amber-400 {
            --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-from), #fbbf24 var(--tw-gradient-via-position), var(--tw-gradient-to)
        }

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

        .to-\[\#8a857b\] {
            --tw-gradient-to: #8a857b var(--tw-gradient-to-position)
        }

        .to-orange-100 {
            --tw-gradient-to: #ffedd5 var(--tw-gradient-to-position)
        }

        .to-orange-500 {
            --tw-gradient-to: #f97316 var(--tw-gradient-to-position)
        }

        .to-orange-600 {
            --tw-gradient-to: #ea580c var(--tw-gradient-to-position)
        }

        .to-transparent {
            --tw-gradient-to: transparent var(--tw-gradient-to-position)
        }

        .to-\[\#938d82\] {
            --tw-gradient-to: #938d82 var(--tw-gradient-to-position)
        }

        .object-cover {
            object-fit: cover
        }

        .p-10 {
            padding: 2.5rem
        }

        .p-4 {
            padding: 1rem
        }

        .p-8 {
            padding: 2rem
        }

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

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

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

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

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

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

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

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

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

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

        .py-28 {
            padding-top: 7rem;
            padding-bottom: 7rem
        }

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

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

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

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

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

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

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

        .text-left {
            text-align: left
        }

        .text-center {
            text-align: center
        }

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

        .text-lg {
            font-size: 1.125rem;
            line-height: 1.75rem
        }

        .text-xl {
            font-size: 1.25rem;
            line-height: 1.75rem
        }

        .text-xs {
            font-size: 0.75rem;
            line-height: 1rem
        }

        .text-2xl {
            font-size: 1.5rem;
            line-height: 2rem
        }

        .text-3xl {
            font-size: 1.875rem;
            line-height: 2.25rem
        }

        .text-4xl {
            font-size: 2.25rem;
            line-height: 2.5rem
        }

        .text-5xl {
            font-size: 3rem;
            line-height: 1
        }

        .text-base {
            font-size: 1rem;
            line-height: 1.5rem
        }

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

        .font-bold {
            font-weight: 700
        }

        .font-semibold {
            font-weight: 600
        }

        .font-medium {
            font-weight: 500
        }

        .uppercase {
            text-transform: uppercase
        }

        .italic {
            font-style: italic
        }

        .leading-relaxed {
            line-height: 1.625
        }

        .tracking-wider {
            letter-spacing: 0.05em
        }

        .text-\[\#2a2420\] {
            --tw-text-opacity: 1;
            color: rgb(42 36 32 / var(--tw-text-opacity, 1))
        }

        .text-\[\#9a8a78\] {
            --tw-text-opacity: 1;
            color: rgb(154 138 120 / var(--tw-text-opacity, 1))
        }

        .text-\[\#d4a574\] {
            --tw-text-opacity: 1;
            color: rgb(212 165 116 / var(--tw-text-opacity, 1))
        }

        .text-amber-600 {
            --tw-text-opacity: 1;
            color: rgb(217 119 6 / var(--tw-text-opacity, 1))
        }

        .text-amber-700 {
            --tw-text-opacity: 1;
            color: rgb(180 83 9 / var(--tw-text-opacity, 1))
        }

        .text-amber-800 {
            --tw-text-opacity: 1;
            color: rgb(146 64 14 / var(--tw-text-opacity, 1))
        }

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

        .text-\[\#a5a094\] {
            --tw-text-opacity: 1;
            color: rgb(165 160 148 / var(--tw-text-opacity, 1))
        }

        .text-gray-500 {
            --tw-text-opacity: 1;
            color: rgb(107 114 128 / var(--tw-text-opacity, 1))
        }

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

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

        .text-gray-800 {
            --tw-text-opacity: 1;
            color: rgb(31 41 55 / var(--tw-text-opacity, 1))
        }

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

        .text-white\/95 {
            color: rgb(255 255 255 / 0.95)
        }

        .opacity-80 {
            opacity: 0.8
        }

        .opacity-90 {
            opacity: 0.9
        }

        .shadow-xl {
            --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
            --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
        }

        .shadow-2xl {
            --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
            --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
        }

        .shadow-lg {
            --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
        }

        .shadow-sm {
            --tw-shadow: 0 1px 2px 0 rgb(0 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)
        }

        .blur-3xl {
            --tw-blur: blur(64px);
            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)
        }

        .backdrop-blur-sm {
            --tw-backdrop-blur: blur(4px);
            -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)
        }

        .transition-all {
            transition-property: all;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms
        }

        .transition-transform {
            transition-property: transform;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms
        }

        .transition-colors {
            transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms
        }

        .transition-opacity {
            transition-property: opacity;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms
        }

        .duration-300 {
            transition-duration: 300ms
        }

        .duration-500 {
            transition-duration: 500ms
        }

        .duration-700 {
            transition-duration: 700ms
        }

        .hover\:-translate-y-1:hover {
            --tw-translate-y: -0.25rem;
            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))
        }

        .hover\:translate-x-2:hover {
            --tw-translate-x: 0.5rem;
            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))
        }

        .hover\:rotate-0:hover {
            --tw-rotate: 0deg;
            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))
        }

        .hover\:scale-\[1\.02\]:hover {
            --tw-scale-x: 1.02;
            --tw-scale-y: 1.02;
            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))
        }

        .hover\:bg-gray-50:hover {
            --tw-bg-opacity: 1;
            background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
        }

        .hover\:opacity-70:hover {
            opacity: 0.7
        }

        .hover\:shadow-2xl:hover {
            --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
            --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
        }

        .hover\:shadow-md:hover {
            --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 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)
        }

        .group:hover .group-hover\:scale-110 {
            --tw-scale-x: 1.1;
            --tw-scale-y: 1.1;
            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))
        }

        @media (min-width: 768px) {
            .md\:mx-auto {
                margin-left: auto;
                margin-right: auto
            }

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

            .md\:block {
                display: block
            }

            .md\:flex {
                display: flex
            }

            .md\:hidden {
                display: none
            }

            .md\:h-10 {
                height: 2.5rem
            }

            .md\:w-10 {
                width: 2.5rem
            }

            .md\:w-72 {
                width: 18rem
            }

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

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

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

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

            .md\:gap-4 {
                gap: 1rem
            }

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

            .md\:px-12 {
                padding-left: 3rem;
                padding-right: 3rem
            }

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

            .md\:py-2 {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem
            }

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

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

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

            .md\:text-left {
                text-align: left
            }

            .md\:text-3xl {
                font-size: 1.875rem;
                line-height: 2.25rem
            }

            .md\:text-sm {
                font-size: 0.875rem;
                line-height: 1.25rem
            }

            .md\:text-2xl {
                font-size: 1.5rem;
                line-height: 2rem
            }

            .md\:text-4xl {
                font-size: 2.25rem;
                line-height: 2.5rem
            }

            .md\:text-5xl {
                font-size: 3rem;
                line-height: 1
            }

            .md\:text-6xl {
                font-size: 3.75rem;
                line-height: 1
            }

            .md\:text-7xl {
                font-size: 4.5rem;
                line-height: 1
            }

            .md\:tracking-widest {
                letter-spacing: 0.1em
            }
        }

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

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

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

        /* Global & Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Lato', sans-serif;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        .display-font {
            font-family: 'Tenor Sans', sans-serif;
            font-weight: 400;
            /* Tenor Sans is usually 400 */
        }

        :root {
            /* Enhanced Elegant Color Palette */
            --primary-bg: #fdfbf7;
            /* Soft warm white */
            --text-main: #1a1614;
            /* Rich charcoal */
            --text-secondary: #5a5248;
            /* Warm taupe gray */

            /* Brand Colors - Elevated & Luxurious */
            --brand-primary: #b8956d;
            /* Rich warm gold */
            --brand-secondary: #2c2520;
            /* Deep espresso */
            --brand-gold: #d4a574;
            /* Luminous gold accent */
            --brand-copper: #c17a4a;
            /* Warm copper tone */

            /* Semantic Theme Tokens */
            --brand-color: var(--brand-primary);
            --accent-color: var(--brand-gold);

            /* Accent Colors - Rich & Sophisticated */
            --accent-ember: #d88c4f;
            /* Warm amber */
            --accent-ink: #0f0d0b;
            /* Deep ink */
            --accent-slate: #3d3530;
            /* Rich slate */
            --accent-burgundy: #8b4f47;
            /* Elegant burgundy */

            /* Neutral Accents */
            --accent-light: #faf7f2;
            /* Creamy white */
            --border-color: #e8dfd3;
            /* Soft warm border */
            --surface-white: #ffffff;
            /* Pure white */
            --surface-cream: #f9f6f1;

            /* Warm cream */
            html {
                overflow-x: hidden;
                width: 100%;
                scroll-behavior: smooth;
            }

            body {
                background-color: var(--primary-bg);
                /* Ensure background matches */
                color: var(--text-main);
                overflow-x: hidden;
                width: 100%;
                min-width: 100vw;
                /* Force full viewport width */
                margin: 0;
                padding: 0;
                line-height: 1.6;
                position: relative;
            }

            * {
                max-width: 100%;
            }

            /* Universal overflow prevention */
            img,
            video,
            iframe,
            embed,
            object {
                max-width: 100%;
                height: auto;
            }

            input,
            select,
            textarea,
            button {
                max-width: 100%;
                box-sizing: border-box;
            }

            .container,
            .hero-section,
            section {
                max-width: 100%;
                overflow-x: hidden;
            }

            /* Navbar */
            .navbar {
                background-color: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(10px);
                border-bottom: 1px solid var(--border-color);
                transition: all 0.3s ease;
                z-index: 1000;
            }

            .nav-link {
                font-family: 'Lato', sans-serif;
                font-weight: 400;
                text-transform: uppercase;
                font-size: 0.85rem;
                letter-spacing: 0.1em;
                color: var(--text-main);
                position: relative;
                transition: opacity 0.3s;
            }

            .nav-link:hover {
                opacity: 0.7;
            }

            /* Hero Section */
            .hero-section {
                position: relative;
                min-height: 100vh;
                height: auto;
                width: 100%;
                overflow: hidden;
                display: block;
                /* Strict block model */
                text-align: center;
                padding-top: 100px;
                /* Explicit clearance - reduced to move form closer to navbar */
                padding-bottom: 40px;
            }

            .hero-bg {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: url('../images/gallery-1.png');
                background-size: cover;
                background-position: center;
                transform: scale(1);
                /* animation: kenBurns 15s ease-in-out infinite; - Disabled for video background */
                z-index: -1;
            }


            /* Video Background Support */
            .hero-bg video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center 25% !important;
                position: absolute;
                top: 0;
                left: 0;
            }


            .hero-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.55);
                z-index: 0;
            }

            .hero-content {
                position: relative;
                z-index: 2;
            }

            /* Hero Text Shadows for Readability */
            .hero-section h1,
            .hero-section p,
            .hero-section .hero-badge,
            .hero-section .hero-urgency,
            .hero-section .hero-countdown {
                text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
            }

            .hero-badge {
                text-shadow: none !important;
            }

            .hero-entrance .hero-badge,
            .hero-entrance .hero-subtitle,
            .hero-entrance .hero-urgency,
            .hero-entrance .hero-countdown,
            .hero-entrance .hero-trust {
                animation: heroFadeUp 0.8s ease forwards;
                opacity: 0;
                transform: translateY(18px);
            }

            .hero-entrance .hero-badge {
                animation-delay: 0.2s;
            }

            .hero-entrance .hero-subtitle {
                animation-delay: 0.9s;
            }

            .hero-entrance .hero-urgency {
                animation-delay: 1.1s;
            }

            .hero-entrance .hero-countdown {
                animation-delay: 1.25s;
            }

            .hero-entrance .hero-cta-group {
                animation-delay: 1.45s;
            }

            .hero-entrance .hero-trust {
                animation-delay: 1.65s;
            }

            .hero-cta-group {
                display: flex;
                flex-wrap: wrap;
                gap: 1rem;
                justify-content: center;
            }

            .hero-entrance .hero-cta-group {
                animation: heroFadeUp 0.8s ease forwards, ctaFloat 6s ease-in-out infinite;
                animation-delay: 1.45s, 2.3s;
                opacity: 0;
                transform: translateY(18px);
            }

            .hero-title span {
                display: inline-block;
                opacity: 0;
                transform: translateY(18px);
                animation: heroWordIn 0.7s ease forwards;
                animation-delay: calc(var(--delay) + 0.35s);
            }

            .hero-entrance .hero-title span {
                opacity: 0;
            }

            @keyframes kenBurns {
                0% {
                    transform: scale(1) translate3d(0, 0, 0);
                }

                50% {
                    transform: scale(1.25) translate3d(-5%, -4%, 0);
                }

                100% {
                    transform: scale(1.1) translate3d(5%, 4%, 0);
                }
            }

            @keyframes heroFadeUp {
                from {
                    opacity: 0;
                    transform: translateY(18px);
                }

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

            @keyframes heroWordIn {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }

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

            @keyframes ctaFloat {

                0%,
                100% {
                    transform: translateY(0);
                }

                50% {
                    transform: translateY(-6px);
                }
            }

            /* Ambient Background Orbs */
            .ambient-layer {
                position: fixed;
                inset: 0;
                pointer-events: none;
                z-index: 0;
                overflow: hidden;
                mix-blend-mode: screen;
            }

            .ambient-orb {
                position: absolute;
                width: 280px;
                height: 280px;
                border-radius: 50%;
                filter: blur(60px);
                opacity: 0.25;
                background: radial-gradient(circle, rgba(165, 160, 148, 0.7), transparent 70%);
                animation: orbDrift 18s ease-in-out infinite;
            }

            .ambient-orb.orb-2 {
                width: 360px;
                height: 360px;
                left: 65%;
                top: 20%;
                animation-delay: -6s;
            }

            .ambient-orb.orb-3 {
                width: 240px;
                height: 240px;
                left: 15%;
                top: 70%;
                animation-delay: -10s;
            }

            @keyframes orbDrift {

                0%,
                100% {
                    transform: translate3d(0, 0, 0) scale(1);
                }

                50% {
                    transform: translate3d(30px, -40px, 0) scale(1.08);
                }
            }

            /* ===== HIGH-CONVERTING HERO SECTION STYLES ===== */

            /* Split Container Layout */
            .hero-split-container {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 2rem;
                align-items: center;
                height: auto;
                margin-left: auto;
                margin-right: auto;
                padding: 0;
                max-width: 1300px;
                width: 90%;
                /* Strict width constraint */
                box-sizing: border-box;
            }

            /* LEFT COLUMN - Content */
            .hero-left-content {
                color: white;
                text-align: left;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                animation: slideInLeft 0.8s ease-out;
                padding-left: 0;
                margin-left: 0;
            }

            @keyframes slideInLeft {
                from {
                    opacity: 0;
                    transform: translateX(-30px);
                }

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

            .hero-eyebrow {
                margin-bottom: 1.5rem;
                margin-top: 0;
            }

            .hero-headline {
                font-size: 2.8rem;
                /* Reduced from 3.5rem */
                font-weight: 900;
                line-height: 1.1;
                margin-bottom: 1rem;
                /* Compact margin */
                text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
            }

            .hero-headline .highlight-text {
                color: #fbbf24;
                text-shadow: 0 0 30px rgba(251, 191, 36, 0.5);
            }

            .hero-headline .subheading {
                display: block;
                font-size: 1rem;
                /* Reduced from 1.5rem */
                font-weight: 600;
                margin-top: 0.5rem;
                opacity: 0.9;
            }

            /* Value Props */
            .value-props {
                display: flex;
                flex-direction: column;
                gap: 1rem;
                margin: 2rem 0 2rem 0;
                padding: 0 !important;
                margin-left: 0 !important;
                list-style: none;
            }

            .value-prop-item {
                display: flex;
                align-items: flex-start;
                /* Changed from center to handle multi-line text */
                gap: 12px;
                font-size: 1rem;
                line-height: 1.4;
                margin: 0 !important;
                padding: 0 !important;
                text-align: left;
            }

            .value-prop-item .icon {
                flex-shrink: 0;
                width: 24px;
                height: 24px;
                margin-top: 2px;
                /* Align with text top */
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fbbf24;
                stroke: currentColor;
                fill: none;
                filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
            }

            .value-prop-item span {
                display: flex;
                align-items: center;
                line-height: 1.4;
            }

            .value-prop-item strong {
                color: #fbbf24;
            }

            /* Social Proof */
            .social-proof-section {
                display: flex;
                align-items: center;
                gap: 2rem;
                margin: 2rem 0;
                flex-wrap: wrap;
            }

            .rating-badge {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                background: rgba(255, 255, 255, 0.15);
                backdrop-filter: blur(10px);
                padding: 0.75rem 1.5rem;
                border-radius: 50px;
                border: 1px solid rgba(255, 255, 255, 0.2);
            }

            .rating-badge .stars {
                font-size: 1.2rem;
            }

            .rating-badge .rating-text {
                color: white;
                font-size: 0.95rem;
            }

            .customer-count {
                color: white;
                font-size: 1rem;
                padding: 0.75rem 1.5rem;
                background: rgba(34, 197, 94, 0.2);
                border-radius: 50px;
                border: 1px solid rgba(34, 197, 94, 0.3);
            }

            /* Trust Indicators */
            .trust-indicators-compact {
                display: flex;
                gap: 1rem;
                /* Compact gap */
                flex-wrap: wrap;
                margin: 1rem 0;
            }

            .trust-item {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                color: white;
                font-size: 0.9rem;
                opacity: 0.9;
            }

            .trust-item svg {
                color: #fbbf24;
            }

            /* Secondary CTA */
            .secondary-cta-row {
                margin-top: 2rem;
            }

            .btn-secondary-hero {
                display: inline-flex;
                align-items: center;
                gap: 0.75rem;
                padding: 0.875rem 2rem;
                background: rgba(255, 255, 255, 0.1);
                border: 2px solid rgba(255, 255, 255, 0.3);
                border-radius: 50px;
                color: white;
                font-weight: 600;
                text-decoration: none;
                transition: all 0.3s ease;
            }

            .btn-secondary-hero:hover {
                background: rgba(255, 255, 255, 0.2);
                border-color: rgba(255, 255, 255, 0.5);
                transform: translateY(-2px);
            }

            /* RIGHT COLUMN - Form */
            .hero-right-form {
                animation: slideInRight 0.8s ease-out 0.2s backwards;
                max-width: 100%;
                width: 100%;
                box-sizing: border-box;
            }

            @keyframes slideInRight {
                from {
                    opacity: 0;
                    transform: translateX(30px);
                }

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

            .hero-form-card {
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: blur(20px);
                padding: 1.5rem 1.75rem;
                /* Reduced padding */
                border-radius: 24px;
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.8);
                border: 2px solid rgba(212, 165, 116, 0.3);
                max-width: 100%;
                width: 100%;
                box-sizing: border-box;
            }

            .form-header {
                text-align: center;
                margin-bottom: 2rem;
            }

            .form-title {
                font-size: 1.5rem;
                /* Reduced from 2rem */
                font-weight: 800;
                color: var(--text-main);
                margin-bottom: 0.25rem;
            }

            .form-subtitle {
                color: var(--text-secondary);
                font-size: 1rem;
                margin-bottom: 1rem;
            }

            .urgency-badge {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                background: linear-gradient(135deg, #ef4444, #dc2626);
                color: white;
                padding: 0.5rem 1rem;
                border-radius: 50px;
                font-size: 0.85rem;
                font-weight: 700;
                animation: pulse 2s ease-in-out infinite;
            }

            /* Lead Form */
            .lead-form {
                display: flex;
                flex-direction: column;
                gap: 1.25rem;
            }

            .form-field-group {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
            }

            .form-field-group label {
                font-weight: 600;
                color: var(--text-main);
                font-size: 0.9rem;
            }

            .form-field-group input,
            .form-field-group select {
                width: 100%;
                max-width: 100%;
                padding: 0.875rem 1rem;
                border: 2px solid var(--border-color);
                border-radius: 12px;
                font-size: 1rem;
                transition: all 0.3s ease;
                background: white;
                color: var(--text-main);
                box-sizing: border-box;
            }

            .form-field-group input:focus,
            .form-field-group select:focus {
                outline: none;
                border-color: var(--brand-gold);
                box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.15);
            }

            .form-field-group input::placeholder {
                color: #9ca3af;
            }

            /* Primary CTA Button */
            .cta-primary-large {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.75rem;
                width: 100%;
                padding: 1.25rem 2rem;
                background: linear-gradient(135deg, var(--brand-gold), var(--brand-copper));
                color: white;
                border: none;
                border-radius: 12px;
                font-size: 1.125rem;
                font-weight: 800;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
                box-shadow: 0 10px 30px rgba(212, 165, 116, 0.4);
            }

            .cta-primary-large:hover {
                background: linear-gradient(135deg, var(--brand-copper), var(--brand-gold));
                box-shadow: 0 15px 40px rgba(212, 165, 116, 0.5);
                transform: translateY(-3px);
            }

            .cta-primary-large:active {
                transform: translateY(-1px);
            }

            /* Privacy Text */
            .privacy-text {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                font-size: 0.8rem;
                color: var(--text-secondary);
                margin-top: 0.5rem;
            }

            .privacy-text svg {
                color: #10b981;
            }

            /* Incentive Badge */
            .incentive-badge {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.75rem;
                margin-top: 1.5rem;
                padding: 1rem;
                background: linear-gradient(135deg, rgba(212, 165, 116, 0.1), rgba(212, 165, 116, 0.05));
                border-radius: 12px;
                border: 1px solid rgba(212, 165, 116, 0.2);
                color: var(--text-main);
                font-size: 0.95rem;
            }

            .incentive-badge svg {
                color: var(--brand-gold);
            }

            /* Offers Bottom Banner */
            .hero-offers-bottom {
                position: relative;
                /* Changed from absolute */
                margin-top: 2rem;
                /* Added spacing */
                left: 0;
                width: 100%;
                z-index: 10;
                padding: 1.5rem 0;
                background: rgba(0, 0, 0, 0.3);
                backdrop-filter: blur(10px);
                border-top: 1px solid rgba(255, 255, 255, 0.1);
            }

            .offers-compact-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 1.5rem;
                max-width: 100%;
            }

            .offer-compact-item {
                display: flex;
                align-items: center;
                gap: 1rem;
                padding: 1rem 1.5rem;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 12px;
                border: 1px solid rgba(255, 255, 255, 0.2);
                color: white;
                font-size: 0.95rem;
                max-width: 100%;
                box-sizing: border-box;
            }

            .offer-compact-item .offer-icon {
                font-size: 1.5rem;
            }

            /* RESPONSIVE - Desktop */
            @media (min-width: 1400px) {
                .hero-split-container {
                    gap: 3rem;
                    padding: 2rem 3rem;
                }
            }


            /* =========================================
               MOBILE SPECIFIC LAYOUT (MAX-WIDTH: 1024px)
               ========================================= */
            @media (max-width: 1024px) {

                html,
                body {
                    width: 100vw;
                    /* Force viewport width */
                    max-width: 100vw;
                    margin: 0;
                    padding: 0;
                    overflow-x: hidden;
                    background-color: var(--primary-bg);
                    /* Cover gaps */
                }

                .navbar {
                    width: 100vw;
                    /* Force viewport width */
                    max-width: 100vw;
                    left: 0;
                    right: 0;
                    padding-left: 1.5rem;
                    /* Ensure manual padding */
                    padding-right: 1.5rem;
                }

                .hero-section {
                    padding-top: 140px;
                    padding-bottom: 3rem;
                    height: auto;
                    min-height: auto;
                    width: 100%;
                    max-width: 100vw;
                    overflow: hidden;
                    position: relative;
                }

                .hero-bg,
                .hero-overlay {
                    width: 100%;
                    height: 100%;
                    min-height: 100%;
                    left: 0;
                    top: 0;
                    right: 0;
                    position: absolute;
                }


                .hero-split-container {
                    /* Remove grid/flex constraints that might force width */
                    display: block;
                    width: 100%;
                    max-width: 500px;
                    /* Reduce max-width for better centering */
                    margin-left: auto !important;
                    margin-right: auto !important;
                    padding: 0 20px;
                    /* Add safe padding */
                    box-sizing: border-box;
                }

                .hero-left-content {
                    text-align: center;
                    align-items: center;
                    padding: 0;
                }

                .hero-headline {
                    font-size: 2.5rem;
                    text-align: center;
                }

                .hero-headline .subheading {
                    font-size: 1.25rem;
                }

                .value-props {
                    align-items: center;
                }

                .social-proof-section {
                    justify-content: center;
                    flex-direction: column;
                    gap: 1rem;
                }

                .trust-indicators-compact {
                    justify-content: center;
                }

                .secondary-cta-row {
                    display: flex;
                    justify-content: center;
                }

                .hero-right-form {
                    width: 100%;
                    margin-top: 1rem;
                }

                .offers-compact-grid {
                    grid-template-columns: 1fr;
                }
            }

            @media (max-width: 768px) {
                .hero-section {
                    padding-top: 130px;
                }

                .hero-split-container {
                    padding: 0 1rem;
                }

                .hero-headline {
                    font-size: 2rem;
                }

                .hero-headline .subheading {
                    font-size: 1.1rem;
                    margin-top: 0.75rem;
                }

                .value-prop-item {
                    font-size: 1rem;
                }

                .hero-form-card {
                    padding: 1.25rem 1rem;
                    border-radius: 16px;
                }

                .form-header {
                    margin-bottom: 1.25rem;
                }

                .form-title {
                    font-size: 1.25rem;
                    margin-bottom: 0.25rem;
                }

                .form-subtitle {
                    font-size: 0.875rem;
                    margin-bottom: 0.75rem;
                }

                .urgency-badge {
                    padding: 0.375rem 0.75rem;
                    font-size: 0.75rem;
                    gap: 0.375rem;
                }

                .lead-form {
                    gap: 1rem;
                }

                .form-field-group {
                    gap: 0.375rem;
                }

                .form-field-group label {
                    font-size: 0.8rem;
                }

                .form-field-group input,
                .form-field-group select {
                    padding: 0.65rem 0.75rem;
                    font-size: 16px;
                    border-radius: 8px;
                }

                .cta-primary-large {
                    padding: 0.875rem 1.5rem;
                    font-size: 0.9rem;
                    border-radius: 8px;
                }

                .privacy-text {
                    font-size: 0.7rem;
                    margin-top: 0.375rem;
                }

                .incentive-badge {
                    margin-top: 1rem;
                    padding: 0.75rem;
                    font-size: 0.8rem;
                    gap: 0.5rem;
                }
            }


            /* Glass Form */
            .hero-form-container {
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: blur(20px);
                padding: 3rem;
                border-radius: 24px;
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.5);
                border: 2px solid rgba(212, 165, 116, 0.2);
                max-width: 650px;
                width: 100%;
                transform-style: preserve-3d;
                transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            }

            .hero-form-container:hover {
                box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.6);
                transform: translateY(-4px);
            }

            .form-input {
                width: 100%;
                padding: 1rem 1.25rem;
                margin-bottom: 0;
                border: 2px solid var(--border-color);
                background: var(--surface-white);
                color: var(--text-main);
                font-size: 1rem;
                outline: none;
                transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
                border-radius: 12px;
                font-weight: 500;
            }

            .form-input:focus {
                border-color: var(--brand-gold);
                box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.1);
                transform: translateY(-1px);
            }

            .form-input::placeholder {
                color: #9ca3af;
                font-weight: 400;
            }

            .btn-submit {
                width: 100%;
                padding: 1.25rem;
                background: linear-gradient(135deg, var(--brand-gold), var(--brand-copper));
                color: #fff;
                border: none;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                font-size: 1rem;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
                border-radius: 12px;
                box-shadow: 0 8px 24px rgba(212, 165, 116, 0.4);
                transform-style: preserve-3d;
            }

            .btn-submit:hover {
                background: linear-gradient(135deg, var(--brand-copper), var(--brand-gold));
                box-shadow: 0 12px 32px rgba(212, 165, 116, 0.5);
                transform: translateY(-2px);
            }

            /* Utilities */
            .section-title {
                font-size: 3rem;
                text-align: center;
                margin-bottom: 3rem;
                letter-spacing: -0.03em;
                font-weight: 700;
                background: linear-gradient(135deg, var(--text-main), var(--brand-primary));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            /* Mobile */


            /* Premium Warranty & Satisfaction Badges */
            .warranty-badge,
            .satisfaction-badge {
                display: inline-flex;
                align-items: center;
                gap: 1rem;
                padding: 1.25rem 2.25rem;
                border-radius: 60px;
                font-size: 0.85rem;
                font-weight: 800;
                letter-spacing: 0.08em;
                color: white;
                box-shadow:
                    0 12px 35px rgba(0, 0, 0, 0.3),
                    0 0 45px rgba(212, 165, 116, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
                transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
                animation: float3D 4s ease-in-out infinite;
                transform-style: preserve-3d;
                position: relative;
                border: 2px solid rgba(255, 255, 255, 0.25);
            }

            .warranty-badge {
                background: linear-gradient(135deg, var(--brand-secondary), var(--brand-gold), var(--brand-copper));
                background-size: 200% 200%;
                animation: float3D 4s ease-in-out infinite, shimmer 3s ease-in-out infinite;
            }

            .satisfaction-badge {
                background: linear-gradient(135deg, var(--brand-primary), var(--brand-copper), var(--brand-gold));
                background-size: 200% 200%;
                animation: float3D 4s ease-in-out infinite 0.5s, shimmer 3s ease-in-out infinite 0.5s;
                animation-delay: 0.5s;
            }

            .warranty-badge:hover,
            .satisfaction-badge:hover {
                transform: translateY(-8px) scale(1.08) rotateX(5deg);
                box-shadow:
                    0 20px 50px rgba(0, 0, 0, 0.4),
                    0 0 60px rgba(201, 164, 106, 0.5),
                    inset 0 1px 0 rgba(255, 255, 255, 0.5);
            }

            /* ===== 3D ANIMATIONS & EFFECTS ===== */

            /* 3D Floating Animation */
            @keyframes float3D {

                0%,
                100% {
                    transform: translateY(0) rotateX(0deg) rotateY(0deg);
                }

                25% {
                    transform: translateY(-15px) rotateX(2deg) rotateY(3deg);
                }

                50% {
                    transform: translateY(-8px) rotateX(-1deg) rotateY(-2deg);
                }

                75% {
                    transform: translateY(-20px) rotateX(1deg) rotateY(2deg);
                }
            }

            @keyframes floatSlow {

                0%,
                100% {
                    transform: translateY(0) translateZ(0);
                }

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

            @keyframes pulse3D {

                0%,
                100% {
                    transform: scale(1);
                    box-shadow: 0 20px 60px rgba(105, 95, 83, 0.2);
                }

                50% {
                    transform: scale(1.02);
                    box-shadow: 0 30px 80px rgba(105, 95, 83, 0.3);
                }
            }

            @keyframes shimmer {
                0% {
                    background-position: -200% 0;
                }

                100% {
                    background-position: 200% 0;
                }
            }

            @keyframes rotateGlow {
                0% {
                    filter: hue-rotate(0deg);
                }

                100% {
                    filter: hue-rotate(360deg);
                }
            }

            /* 3D Product Card */
            .product-card-3d {
                perspective: 1000px;
                transform-style: preserve-3d;
                will-change: transform;
            }

            .product-card-3d[data-tilt] {
                transition: transform 0.3s ease;
                cursor: pointer;
            }

            .product-card-3d-inner {
                position: relative;
                background: linear-gradient(145deg, #ffffff 0%, #f9f7f3 45%, #f0ebe2 100%);
                border-radius: 24px;
                padding: 2.5rem;
                transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
                transform-style: preserve-3d;
                box-shadow:
                    0 18px 40px rgba(105, 95, 83, 0.18),
                    0 6px 16px rgba(0, 0, 0, 0.08),
                    inset 0 1px 0 rgba(255, 255, 255, 0.9);
                border: 1px solid rgba(255, 255, 255, 0.9);
                overflow: hidden;
            }

            .product-card-3d-inner::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 45%;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent);
                opacity: 0.7;
                pointer-events: none;
            }

            .product-card-3d-inner::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
                transition: left 0.5s;
            }

            .product-card-3d:hover .product-card-3d-inner::before {
                left: 100%;
            }

            .product-card-3d:hover .product-card-3d-inner {
                transform: translateY(-12px) scale(1.02);
                box-shadow:
                    0 40px 80px rgba(105, 95, 83, 0.3),
                    0 18px 32px rgba(0, 0, 0, 0.12);
            }

            .product-image-container {
                position: relative;
                border-radius: 18px;
                overflow: hidden;
                margin-bottom: 1.5rem;
                transform: translateZ(30px);
                background: #ffffff;
                padding: 12px;
                border: 6px solid rgba(255, 255, 255, 0.95);
                box-shadow:
                    0 24px 55px rgba(20, 20, 20, 0.25),
                    0 8px 18px rgba(0, 0, 0, 0.15),
                    inset 0 2px 6px rgba(0, 0, 0, 0.12);
            }

            .product-image-container img {
                transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
                border-radius: 12px;
                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
            }

            .product-card-3d:hover .product-image-container {
                transform: translateZ(40px) perspective(1000px) rotateX(4deg);
            }

            .product-card-3d:hover .product-image-container img {
                transform: scale(1.08);
            }

            /* Floating Badge */
            .floating-badge {
                animation: float3D 6s ease-in-out infinite;
                transform-style: preserve-3d;
                box-shadow:
                    0 10px 24px rgba(165, 160, 148, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.5);
            }

            .floating-badge::after {
                content: '';
                position: absolute;
                inset: -6px;
                border-radius: 999px;
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 60%);
                opacity: 0.6;
                pointer-events: none;
            }

            /* Glassmorphism Card */
            .glass-card {
                background: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                border: 1px solid rgba(255, 255, 255, 0.5);
                border-radius: 24px;
                box-shadow:
                    0 8px 32px rgba(105, 95, 83, 0.1),
                    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
            }

            /* Why Choose Section Cards - Premium 3D Design */
            .why-choose-section {
                background: #ffffff;
                position: relative;
                overflow: hidden;
            }

            .why-choose-section::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 100%;
                background: radial-gradient(ellipse at top center, rgba(165, 160, 148, 0.08) 0%, transparent 70%);
                pointer-events: none;
            }

            .value-card {
                position: relative;
                padding: 2.5rem 2rem;
                background: #ffffff;
                border-radius: 24px;
                transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
                border: 1px solid rgba(165, 160, 148, 0.2);
                overflow: hidden;
                transform-style: preserve-3d;
                perspective: 1000px;
                box-shadow: 0 4px 20px rgba(165, 160, 148, 0.08);
            }

            .value-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: linear-gradient(90deg, #a5a094, #c4bfb4, #a5a094);
                transform: scaleX(0);
                transform-origin: left;
                transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            }

            .value-card:hover {
                transform: translateY(-12px) rotateX(2deg) rotateY(-1deg);
                box-shadow:
                    0 25px 50px rgba(165, 160, 148, 0.2),
                    0 10px 20px rgba(0, 0, 0, 0.05);
                border-color: rgba(165, 160, 148, 0.3);
            }

            .value-card:hover::before {
                transform: scaleX(1);
            }

            .value-icon {
                width: 80px;
                height: 80px;
                background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-copper) 45%, var(--brand-primary) 100%);
                border-radius: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 1.75rem;
                transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
                box-shadow:
                    0 14px 32px rgba(212, 165, 116, 0.5),
                    inset 0 2px 6px rgba(255, 255, 255, 0.4),
                    inset 0 -4px 10px rgba(0, 0, 0, 0.15);
                position: relative;
            }

            .value-icon::after {
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 18px;
                background: linear-gradient(160deg, rgba(255, 255, 255, 0.35) 0%, transparent 50%);
                pointer-events: none;
            }

            .value-card:hover .value-icon {
                transform: scale(1.12) translateY(-6px) rotate(5deg);
                box-shadow:
                    0 18px 40px rgba(212, 165, 116, 0.6),
                    inset 0 2px 8px rgba(255, 255, 255, 0.4),
                    inset 0 -6px 12px rgba(0, 0, 0, 0.2);
            }

            .value-icon svg {
                color: #ffffff;
                filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
            }

            .value-card h3 {
                color: var(--text-main);
                font-size: 1.35rem;
                font-weight: 700;
                margin-bottom: 0.75rem;
                transition: color 0.3s ease;
                letter-spacing: -0.01em;
            }

            .value-card:hover h3 {
                color: var(--brand-primary);
            }

            .value-card p {
                color: #6b6560;
                line-height: 1.7;
                font-size: 0.95rem;
            }

            /* Parallax Section */
            .parallax-section {
                position: relative;
                overflow: hidden;
            }

            .parallax-layer {
                position: absolute;
                width: 100%;
                height: 100%;
                pointer-events: none;
            }

            .parallax-layer-1 {
                transform: translateZ(-10px) scale(2);
            }

            .parallax-layer-2 {
                transform: translateZ(-5px) scale(1.5);
            }

            /* 3D Particles Background */
            .particles-bg {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
                pointer-events: none;
                z-index: 1;
            }

            .particle {
                position: absolute;
                width: 6px;
                height: 6px;
                background: rgba(105, 95, 83, 0.1);
                border-radius: 50%;
                animation: floatSlow 8s ease-in-out infinite;
            }

            .particle:nth-child(odd) {
                animation-delay: -4s;
                animation-duration: 10s;
            }

            .particle:nth-child(even) {
                animation-delay: -2s;
                animation-duration: 12s;
            }

            /* Scroll Reveal Enhanced with 3D Effects */
            .reveal {
                opacity: 0;
                transform: translateY(50px) translateZ(-30px) rotateX(8deg);
                transition: all 0.9s cubic-bezier(0.23, 1, 0.32, 1);
                transform-style: preserve-3d;
            }

            .reveal.active {
                opacity: 1;
                transform: translateY(0) translateZ(0) rotateX(0deg);
            }

            /* Staggered reveal delays for grid items */
            .reveal:nth-child(1) {
                transition-delay: 0s;
            }

            .reveal:nth-child(2) {
                transition-delay: 0.1s;
            }

            .reveal:nth-child(3) {
                transition-delay: 0.2s;
            }

            .reveal:nth-child(4) {
                transition-delay: 0.3s;
            }

            .reveal:nth-child(5) {
                transition-delay: 0.4s;
            }

            .reveal:nth-child(6) {
                transition-delay: 0.5s;
            }

            .reveal:nth-child(7) {
                transition-delay: 0.6s;
            }

            .reveal:nth-child(8) {
                transition-delay: 0.7s;
            }

            /* 3D Tilt Cards Enhanced */
            .tilt-card {
                transform-style: preserve-3d;
                transition: transform 0.5s ease, box-shadow 0.5s ease;
                border: 2px dashed rgba(165, 160, 148, 0.45);
                background: linear-gradient(160deg, #ffffff 0%, #f7f4ee 100%);
                box-shadow:
                    0 16px 40px rgba(105, 95, 83, 0.18),
                    inset 0 2px 6px rgba(255, 255, 255, 0.6);
                position: relative;
                overflow: hidden;
            }

            .tilt-card::before {
                content: '';
                position: absolute;
                inset: 12px;
                border-radius: 20px;
                border: 1px solid rgba(165, 160, 148, 0.2);
                pointer-events: none;
            }

            .tilt-card-inner {
                transform: translateZ(20px);
                transform-style: preserve-3d;
            }

            .icon-circle {
                width: 90px;
                height: 90px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto 1.5rem;
                transform: translateZ(40px);
                transition: all 0.4s ease;
                background: linear-gradient(140deg, #f5d8a1 0%, #d79a4f 55%, #b7772f 100%);
                box-shadow:
                    0 14px 30px rgba(210, 154, 74, 0.45),
                    inset 0 2px 6px rgba(255, 255, 255, 0.4),
                    inset 0 -6px 12px rgba(0, 0, 0, 0.18);
                position: relative;
            }

            .icon-circle::after {
                content: '';
                position: absolute;
                inset: 8px;
                border-radius: 50%;
                background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.65), transparent 60%);
                pointer-events: none;
            }

            .tilt-card:hover .icon-circle {
                transform: translateZ(60px) scale(1.1);
            }

            /* Footer Enhancement */
            .footer-enhanced {
                background: linear-gradient(180deg, var(--accent-light) 0%, #fffcf5 100%);
                border-top: 1px solid var(--border-color);
            }

            .footer-column h4 {
                position: relative;
                padding-bottom: 0.75rem;
                margin-bottom: 1.25rem;
            }

            .footer-column h4::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 40px;
                height: 2px;
                background: var(--brand-color);
            }

            .social-icon {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                background: white;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--text-main);
                transition: all 0.3s ease;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            }

            .social-icon:hover {
                background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary), var(--brand-gold));
                color: white;
                transform: translateY(-4px) scale(1.1);
                box-shadow: 0 10px 25px rgba(201, 164, 106, 0.35);
            }

            /* Button Styles with 3D Magnetic Effect */
            .btn-primary {
                background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
                color: white;
                padding: 1rem 2.5rem;
                border-radius: 50px;
                font-weight: 600;
                transition: all 0.3s ease;
                border: none;
                cursor: pointer;
                font-size: 1rem;
                letter-spacing: 0.05em;
                text-transform: uppercase;
                box-shadow: 0 10px 30px rgba(105, 95, 83, 0.2);
                position: relative;
                overflow: hidden;
                transform-style: preserve-3d;
                will-change: transform;
            }

            /* Magnetic Button Glow Effect */
            .magnetic-btn {
                transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            }

            .magnetic-btn::after {
                content: '';
                position: absolute;
                inset: -2px;
                border-radius: 50px;
                background: linear-gradient(135deg, rgba(201, 164, 106, 0.6), rgba(165, 160, 148, 0.6));
                opacity: 0;
                filter: blur(12px);
                transition: opacity 0.3s ease;
                z-index: -1;
            }

            .magnetic-btn:hover::after {
                opacity: 1;
                animation: glowPulse 2s ease-in-out infinite;
            }

            @keyframes glowPulse {

                0%,
                100% {
                    filter: blur(12px);
                    opacity: 0.6;
                }

                50% {
                    filter: blur(16px);
                    opacity: 0.9;
                }
            }

            .btn-primary::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
                transition: left 0.6s ease;
            }

            .btn-secondary {
                background: rgba(255, 255, 255, 0.15);
                color: #ffffff;
                border: 1px solid rgba(255, 255, 255, 0.5);
                padding: 1rem 2.5rem;
                border-radius: 999px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                backdrop-filter: blur(12px);
                transition: all 0.3s ease;
                box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
                position: relative;
                overflow: hidden;
                transform-style: preserve-3d;
                will-change: transform;
            }

            .btn-secondary::after {
                content: '';
                position: absolute;
                inset: -2px;
                border-radius: 999px;
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
                opacity: 0;
                filter: blur(10px);
                transition: opacity 0.3s ease;
                z-index: -1;
            }

            .btn-secondary:hover::after {
                opacity: 1;
            }

            .btn-secondary:hover {
                background: rgba(255, 255, 255, 0.25);
                box-shadow: 0 18px 35px rgba(0, 0, 0, 0.25);
            }

            .btn-gold {
                background: linear-gradient(135deg, var(--brand-gold), var(--brand-copper));
                color: #ffffff;
                border: none;
                box-shadow: 0 16px 32px rgba(212, 165, 116, 0.4);
                font-weight: 700;
            }

            .btn-gold:hover {
                background: linear-gradient(135deg, var(--brand-copper), var(--brand-primary));
                box-shadow: 0 20px 40px rgba(212, 165, 116, 0.5);
            }

            .btn-primary:hover::before {
                left: 100%;
            }

            .btn-primary:hover {
                transform: translateY(-3px) scale(1.02);
                box-shadow: 0 12px 35px rgba(201, 164, 106, 0.45);
                background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-gold) 55%, var(--brand-secondary) 100%);
            }

            /* Contact Input */
            .contact-input {
                width: 100%;
                padding: 1rem 1.25rem;
                border: 1px solid var(--border-color);
                border-radius: 12px;
                background: #fff;
                font-size: 1rem;
                transition: all 0.3s ease;
            }

            .contact-input:focus {
                outline: none;
                border-color: var(--brand-gold);
                box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.2);
            }

            /* Custom Bullet */
            .custom-bullet {
                width: 12px;
                height: 12px;
                background: var(--brand-color);
                border-radius: 50%;
                margin-right: 1rem;
                flex-shrink: 0;
            }

            /* About Card */
            .about-card {
                padding: 3rem;
                border-radius: 24px;
                box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
                border: 1px solid var(--border-color);
            }

        }

        @media (max-width: 480px) {
            .gallery-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Why Choose Section - Responsive */
        @media (max-width: 1024px) {
            .why-choose-section {
                padding-top: 5rem;
                padding-bottom: 5rem;
            }

            .why-choose-section h2 {
                font-size: 2.5rem;
            }
        }

        @media (max-width: 768px) {
            .why-choose-section {
                padding-top: 4rem;
                padding-bottom: 4rem;
            }

            .why-choose-section h2 {
                font-size: 2rem;
            }

            .value-card {
                padding: 2rem 1.5rem;
            }

            .value-icon {
                width: 64px;
                height: 64px;
            }

            .value-icon svg {
                width: 28px;
                height: 28px;
            }
        }

        @media (max-width: 480px) {
            .value-card h3 {
                font-size: 1.125rem;
            }

            .value-card p {
                font-size: 0.9rem;
            }
        }

        /* Divider */
        .divider {
            height: 1px;
            background: var(--border-color);
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Service Area Tags */
        .service-tag {
            display: inline-block;
            padding: 0.5rem 1rem;
            background: white;
            border-radius: 20px;
            font-size: 0.9rem;
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .service-tag:hover {
            background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
            color: white;
            border-color: var(--brand-primary);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(168, 147, 120, 0.25);
        }

        /* How It Works - 3D Orbs */
        .process-step {
            transform-style: preserve-3d;
        }

        .process-orb {
            width: 96px;
            height: 96px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle at 30% 30%, #fff3de 0%, #f0d4a1 35%, #c9a46a 65%, #a97430 100%);
            box-shadow:
                0 20px 40px rgba(0, 0, 0, 0.25),
                0 0 35px rgba(201, 164, 106, 0.45),
                inset 0 10px 20px rgba(255, 255, 255, 0.6),
                inset 0 -12px 18px rgba(0, 0, 0, 0.2);
            animation: orbFloat 6s ease-in-out infinite;
        }

        .process-orb svg {
            color: #ffffff;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
        }

        .process-wire {
            height: 10px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(201, 164, 106, 0.15), rgba(201, 164, 106, 0.95), rgba(201, 164, 106, 0.15));
            box-shadow:
                0 0 28px rgba(201, 164, 106, 0.7),
                inset 0 0 14px rgba(255, 255, 255, 0.6);
        }

        .process-chip {
            background: linear-gradient(135deg, #c9a46a, #a97430);
            box-shadow:
                0 10px 22px rgba(201, 164, 106, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.45);
        }

        @keyframes orbFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        /* FAQ Glass Cards */
        .faq-section {
            position: relative;
            overflow: hidden;
        }

        .faq-decor {
            position: absolute;
            top: -40px;
            right: -60px;
            width: 360px;
            height: 360px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85), rgba(201, 164, 106, 0.25) 55%, rgba(165, 160, 148, 0.5));
            box-shadow:
                0 45px 100px rgba(165, 160, 148, 0.35),
                inset 0 14px 24px rgba(255, 255, 255, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.8);
            font-size: 10rem;
            font-weight: 700;
            pointer-events: none;
            transform: rotate(-10deg);
            z-index: 0;
        }

        .faq-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            align-items: start;
        }

        .faq-item {
            break-inside: avoid;
            margin-bottom: 1.5rem;
            background: rgba(255, 255, 255, 0.72);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(201, 164, 106, 0.25);
            border-radius: 20px;
            box-shadow:
                0 18px 40px rgba(165, 160, 148, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .faq-item:hover {
            transform: translateY(-4px);
            box-shadow:
                0 20px 45px rgba(165, 160, 148, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
        }

        .faq-item.open {
            transform: translateY(-10px) scale(1.02);
            box-shadow:
                0 32px 70px rgba(165, 160, 148, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .faq-item.open .faq-icon {
            transform: rotate(180deg);
        }

        .faq-answer {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, opacity 0.3s ease;
            display: block;
            padding-bottom: 0;
        }

        .faq-item.open .faq-answer {
            max-height: 260px;
            opacity: 1;
            padding-bottom: 1.5rem;
        }

        .faq-icon {
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
        }

        /* Inquiry Form Section */
        .inquiry-section {
            position: relative;
            background: linear-gradient(180deg, #fffaf1 0%, #f7f1e6 100%);
            overflow: hidden;
        }

        .inquiry-section::before {
            content: '';
            position: absolute;
            top: -20%;
            left: -10%;
            width: 420px;
            height: 420px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(201, 164, 106, 0.25), transparent 70%);
            filter: blur(10px);
            opacity: 0.7;
        }

        .inquiry-section::after {
            content: '';
            position: absolute;
            bottom: -25%;
            right: -10%;
            width: 520px;
            height: 520px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(165, 160, 148, 0.3), transparent 70%);
            filter: blur(8px);
            opacity: 0.6;
        }

        .inquiry-card {
            padding: 3rem;
            position: relative;
            z-index: 2;
            border: 1px solid rgba(201, 164, 106, 0.25);
            box-shadow: 0 24px 60px rgba(105, 95, 83, 0.2);
            transform-style: preserve-3d;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .inquiry-card:hover {
            box-shadow: 0 32px 80px rgba(105, 95, 83, 0.3);
        }

        .inquiry-form label {
            color: var(--text-main);
            font-weight: 600;
            font-size: 0.95rem;
        }

        .inquiry-textarea {
            min-height: 140px;
            resize: vertical;
        }

        .inquiry-btn {
            font-size: 1.1rem;
            padding: 1.1rem 2.5rem;
            border-radius: 999px;
            box-shadow:
                0 18px 35px rgba(201, 164, 106, 0.3),
                0 8px 18px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .inquiry-btn:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow:
                0 26px 50px rgba(201, 164, 106, 0.4),
                0 12px 24px rgba(0, 0, 0, 0.15);
        }

        /* Forum Section - Glassmorphism Style */
        .forum-section {
            position: relative;
            background: linear-gradient(180deg, #fdfbf7 0%, #f9f6f1 100%);
            overflow: hidden;
        }

        .forum-section::before {
            content: '';
            position: absolute;
            top: -15%;
            right: -8%;
            width: 450px;
            height: 450px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(165, 160, 148, 0.2), transparent 70%);
            filter: blur(60px);
            opacity: 0.8;
        }

        .forum-section::after {
            content: '';
            position: absolute;
            bottom: -20%;
            left: -8%;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(165, 160, 148, 0.25), transparent 70%);
            filter: blur(50px);
            opacity: 0.7;
        }

        .forum-glass-card {
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);
            border: 2px solid rgba(255, 255, 255, 0.6);
            border-radius: 32px;
            padding: 3.5rem;
            box-shadow:
                0 30px 70px rgba(165, 160, 148, 0.25),
                inset 0 2px 8px rgba(255, 255, 255, 0.8);
            position: relative;
            z-index: 2;
            transform-style: preserve-3d;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .forum-glass-card:hover {
            box-shadow:
                0 40px 90px rgba(165, 160, 148, 0.35),
                inset 0 2px 10px rgba(255, 255, 255, 0.9);
        }

        .forum-input {
            width: 100%;
            padding: 1.1rem 1.5rem;
            border: 2px solid rgba(165, 160, 148, 0.3);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            color: var(--text-main);
            font-size: 1rem;
            outline: none;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            border-radius: 14px;
            font-weight: 500;
        }

        .forum-input:focus {
            border-color: #a5a094;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0 0 0 4px rgba(165, 160, 148, 0.15);
            transform: translateY(-2px);
        }

        .forum-input::placeholder {
            color: #9ca3af;
            font-weight: 400;
        }

        .forum-textarea {
            min-height: 150px;
            resize: vertical;
        }

        .forum-btn {
            width: 100%;
            padding: 1.3rem 3rem;
            background: linear-gradient(135deg, #a5a094, #8d8679);
            color: #ffffff;
            border: none;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-size: 1.05rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            border-radius: 999px;
            box-shadow:
                0 16px 40px rgba(165, 160, 148, 0.4),
                inset 0 2px 6px rgba(255, 255, 255, 0.3);
            transform-style: preserve-3d;
            position: relative;
            overflow: hidden;
        }

        .forum-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.6s ease;
        }

        .forum-btn:hover::before {
            left: 100%;
        }

        .forum-btn:hover {
            background: linear-gradient(135deg, #8d8679, #a5a094);
            box-shadow:
                0 22px 50px rgba(165, 160, 148, 0.5),
                inset 0 2px 8px rgba(255, 255, 255, 0.4);
            transform: translateY(-4px) scale(1.02);
        }

        .forum-label {
            color: var(--text-main);
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: 0.5rem;
            display: block;
        }

        @media (max-width: 1100px) {
            .faq-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 900px) {
            .faq-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .process-orb {
                width: 80px;
                height: 80px;
            }

            .faq-decor {
                width: 220px;
                height: 220px;
                font-size: 6rem;
                right: -70px;
                top: -20px;
                opacity: 0.4;
            }

            .inquiry-card {
                padding: 2rem;
            }

            .forum-glass-card {
                padding: 2rem;
                border-radius: 24px;
            }

            .forum-btn {
                padding: 1.1rem 2rem;
                font-size: 0.95rem;
            }
        }

        /* ===== GLOBAL 3D ANIMATIONS & FLOATING PARTICLES ===== */

        /* Global Particles Container - Fixed across entire page */
        .global-particles {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 2;
            overflow: hidden;
        }

        /* Section-Specific Particles Container */
        .section-particles {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            overflow: hidden;
        }

        /* Floating Spheres - More visible on white backgrounds */
        .floating-sphere {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%,
                    rgba(220, 190, 155, 0.95),
                    rgba(190, 160, 120, 0.7) 50%,
                    rgba(170, 140, 100, 0.5) 100%);
            box-shadow:
                inset -4px -4px 12px rgba(0, 0, 0, 0.15),
                inset 2px 2px 8px rgba(255, 255, 255, 0.6),
                0 8px 32px rgba(150, 120, 80, 0.3),
                0 4px 16px rgba(180, 150, 110, 0.25);
            animation: floatSphere 20s ease-in-out infinite;
            opacity: 0.75;
        }

        .floating-sphere::after {
            content: '';
            position: absolute;
            top: 12%;
            left: 18%;
            width: 30%;
            height: 20%;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            filter: blur(2px);
        }

        .sphere-1 {
            width: 60px;
            height: 60px;
            top: 15%;
            left: 5%;
            animation-delay: 0s;
            animation-duration: 18s;
        }

        .sphere-2 {
            width: 40px;
            height: 40px;
            top: 45%;
            right: 8%;
            animation-delay: -4s;
            animation-duration: 22s;
        }

        .sphere-3 {
            width: 80px;
            height: 80px;
            bottom: 25%;
            left: 12%;
            animation-delay: -8s;
            animation-duration: 25s;
        }

        .sphere-4 {
            width: 35px;
            height: 35px;
            top: 70%;
            right: 15%;
            animation-delay: -12s;
            animation-duration: 20s;
        }

        .sphere-5 {
            width: 50px;
            height: 50px;
            top: 30%;
            left: 85%;
            animation-delay: -6s;
            animation-duration: 23s;
        }

        .sphere-6 {
            width: 45px;
            height: 45px;
            bottom: 40%;
            right: 5%;
            animation-delay: -10s;
            animation-duration: 19s;
        }

        @keyframes floatSphere {

            0%,
            100% {
                transform: translate(0, 0) rotate(0deg) scale(1);
            }

            25% {
                transform: translate(30px, -40px) rotate(90deg) scale(1.1);
            }

            50% {
                transform: translate(-20px, -80px) rotate(180deg) scale(0.95);
            }

            75% {
                transform: translate(40px, -30px) rotate(270deg) scale(1.05);
            }
        }

        /* 3D Rotating Cubes - More visible */
        .floating-cube {
            position: absolute;
            width: 30px;
            height: 30px;
            transform-style: preserve-3d;
            animation: rotateCube 15s linear infinite;
            opacity: 0.7;
        }

        .cube-face {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg,
                    rgba(200, 170, 130, 0.8) 0%,
                    rgba(180, 150, 110, 0.6) 100%);
            border: 1px solid rgba(170, 140, 100, 0.6);
            backdrop-filter: blur(4px);
            box-shadow: 0 2px 8px rgba(150, 120, 80, 0.2);
        }

        .cube-face.front {
            transform: translateZ(15px);
        }

        .cube-face.back {
            transform: rotateY(180deg) translateZ(15px);
        }

        .cube-face.right {
            transform: rotateY(90deg) translateZ(15px);
        }

        .cube-face.left {
            transform: rotateY(-90deg) translateZ(15px);
        }

        .cube-face.top {
            transform: rotateX(90deg) translateZ(15px);
        }

        .cube-face.bottom {
            transform: rotateX(-90deg) translateZ(15px);
        }

        .cube-1 {
            top: 20%;
            left: 10%;
            animation-delay: 0s;
            animation-duration: 12s;
        }

        .cube-2 {
            top: 60%;
            right: 12%;
            animation-delay: -4s;
            animation-duration: 18s;
        }

        .cube-3 {
            bottom: 30%;
            left: 8%;
            animation-delay: -8s;
            animation-duration: 15s;
        }

        .cube-4 {
            top: 40%;
            right: 6%;
            animation-delay: -2s;
            animation-duration: 20s;
        }

        @keyframes rotateCube {
            0% {
                transform: rotateX(0deg) rotateY(0deg) translateY(0);
            }

            25% {
                transform: rotateX(90deg) rotateY(90deg) translateY(-30px);
            }

            50% {
                transform: rotateX(180deg) rotateY(180deg) translateY(-60px);
            }

            75% {
                transform: rotateX(270deg) rotateY(270deg) translateY(-30px);
            }

            100% {
                transform: rotateX(360deg) rotateY(360deg) translateY(0);
            }
        }

        /* Floating Rings - More visible */
        .floating-ring {
            position: absolute;
            border-radius: 50%;
            border: 3px solid rgba(190, 160, 120, 0.6);
            animation: floatRing 25s ease-in-out infinite;
            opacity: 0.6;
            box-shadow: 0 4px 16px rgba(170, 140, 100, 0.2);
        }

        .ring-1 {
            width: 100px;
            height: 100px;
            top: 25%;
            left: 3%;
            animation-delay: 0s;
        }

        .ring-2 {
            width: 70px;
            height: 70px;
            top: 55%;
            right: 4%;
            animation-delay: -5s;
        }

        .ring-3 {
            width: 120px;
            height: 120px;
            bottom: 15%;
            left: 6%;
            animation-delay: -10s;
        }

        .ring-4 {
            width: 80px;
            height: 80px;
            top: 75%;
            right: 10%;
            animation-delay: -15s;
        }

        @keyframes floatRing {

            0%,
            100% {
                transform: translate(0, 0) rotate(0deg) scale(1);
                opacity: 0.3;
            }

            33% {
                transform: translate(20px, -50px) rotate(120deg) scale(1.1);
                opacity: 0.5;
            }

            66% {
                transform: translate(-30px, -30px) rotate(240deg) scale(0.9);
                opacity: 0.4;
            }
        }

        /* Glowing Dots - More visible */
        .glow-dot {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: radial-gradient(circle,
                    rgba(220, 170, 110, 0.95) 0%,
                    rgba(200, 150, 90, 0.7) 50%,
                    rgba(180, 130, 70, 0.3) 70%);
            animation: glowPulse 4s ease-in-out infinite;
            box-shadow: 0 0 25px rgba(210, 160, 100, 0.6), 0 0 12px rgba(200, 150, 90, 0.5);
        }

        .dot-1 {
            top: 12%;
            left: 15%;
            animation-delay: 0s;
        }

        .dot-2 {
            top: 35%;
            right: 18%;
            animation-delay: -1s;
        }

        .dot-3 {
            bottom: 45%;
            left: 20%;
            animation-delay: -2s;
        }

        .dot-4 {
            top: 65%;
            right: 22%;
            animation-delay: -3s;
        }

        .dot-5 {
            bottom: 20%;
            left: 25%;
            animation-delay: -0.5s;
        }

        .dot-6 {
            top: 80%;
            right: 8%;
            animation-delay: -1.5s;
        }

        .dot-7 {
            top: 50%;
            left: 4%;
            animation-delay: -2.5s;
        }

        .dot-8 {
            bottom: 35%;
            right: 3%;
            animation-delay: -3.5s;
        }

        @keyframes glowPulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 0.4;
                box-shadow: 0 0 15px rgba(200, 170, 130, 0.3);
            }

            50% {
                transform: scale(1.5);
                opacity: 0.8;
                box-shadow: 0 0 30px rgba(200, 170, 130, 0.6);
            }
        }

        /* 3D Floating Diamonds - More visible */
        .floating-diamond {
            position: absolute;
            width: 22px;
            height: 22px;
            background: linear-gradient(135deg,
                    rgba(220, 190, 150, 0.9) 0%,
                    rgba(200, 170, 130, 0.75) 50%,
                    rgba(180, 150, 110, 0.6) 100%);
            transform: rotate(45deg);
            animation: floatDiamond 18s ease-in-out infinite;
            box-shadow:
                inset 1px 1px 3px rgba(255, 255, 255, 0.6),
                3px 5px 15px rgba(160, 130, 90, 0.35);
            opacity: 0.75;
        }

        .diamond-1 {
            top: 18%;
            right: 20%;
            animation-delay: 0s;
        }

        .diamond-2 {
            top: 48%;
            left: 6%;
            animation-delay: -4s;
        }

        .diamond-3 {
            bottom: 28%;
            right: 18%;
            animation-delay: -8s;
        }

        .diamond-4 {
            top: 72%;
            left: 15%;
            animation-delay: -12s;
        }

        .diamond-5 {
            bottom: 55%;
            right: 6%;
            animation-delay: -2s;
        }

        @keyframes floatDiamond {

            0%,
            100% {
                transform: rotate(45deg) translate(0, 0) scale(1);
            }

            25% {
                transform: rotate(135deg) translate(15px, -25px) scale(1.15);
            }

            50% {
                transform: rotate(225deg) translate(-10px, -50px) scale(0.9);
            }

            75% {
                transform: rotate(315deg) translate(20px, -25px) scale(1.1);
            }
        }

        /* Floating Lines */
        .floating-line {
            position: absolute;
            width: 60px;
            height: 2px;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(210, 190, 165, 0.5),
                    transparent);
            animation: floatLine 12s ease-in-out infinite;
            opacity: 0.5;
        }

        .line-1 {
            top: 22%;
            left: 8%;
            transform: rotate(30deg);
            animation-delay: 0s;
        }

        .line-2 {
            top: 58%;
            right: 10%;
            transform: rotate(-45deg);
            animation-delay: -3s;
        }

        .line-3 {
            bottom: 32%;
            left: 5%;
            transform: rotate(60deg);
            animation-delay: -6s;
        }

        .line-4 {
            top: 78%;
            right: 15%;
            transform: rotate(-20deg);
            animation-delay: -9s;
        }

        @keyframes floatLine {

            0%,
            100% {
                transform: translateY(0) rotate(var(--rotation, 30deg));
                opacity: 0.3;
            }

            50% {
                transform: translateY(-40px) rotate(calc(var(--rotation, 30deg) + 30deg));
                opacity: 0.6;
            }
        }

        /* 3D Torus Ring */
        .floating-torus {
            position: absolute;
            width: 50px;
            height: 50px;
            border: 6px solid rgba(225, 210, 190, 0.4);
            border-radius: 50%;
            animation: rotateTorus 20s linear infinite;
            opacity: 0.4;
            transform-style: preserve-3d;
        }

        .torus-1 {
            top: 30%;
            left: 2%;
            animation-delay: 0s;
        }

        .torus-2 {
            bottom: 40%;
            right: 2%;
            animation-delay: -5s;
        }

        @keyframes rotateTorus {
            0% {
                transform: rotateX(0deg) rotateY(0deg) translateY(0);
            }

            50% {
                transform: rotateX(180deg) rotateY(90deg) translateY(-50px);
            }

            100% {
                transform: rotateX(360deg) rotateY(180deg) translateY(0);
            }
        }

        /* Hexagon Shapes */
        .floating-hexagon {
            position: absolute;
            width: 40px;
            height: 23px;
            background: linear-gradient(135deg,
                    rgba(240, 230, 215, 0.5) 0%,
                    rgba(220, 205, 185, 0.3) 100%);
            animation: floatHex 22s ease-in-out infinite;
            opacity: 0.4;
        }

        .floating-hexagon::before,
        .floating-hexagon::after {
            content: '';
            position: absolute;
            width: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

        .floating-hexagon::before {
            bottom: 100%;
            border-bottom: 11px solid rgba(235, 220, 200, 0.5);
        }

        .floating-hexagon::after {
            top: 100%;
            border-top: 11px solid rgba(235, 220, 200, 0.5);
        }

        .hex-1 {
            top: 15%;
            right: 6%;
            animation-delay: 0s;
        }

        .hex-2 {
            bottom: 25%;
            left: 4%;
            animation-delay: -7s;
        }

        .hex-3 {
            top: 55%;
            right: 3%;
            animation-delay: -14s;
        }

        @keyframes floatHex {

            0%,
            100% {
                transform: translate(0, 0) rotate(0deg);
            }

            33% {
                transform: translate(25px, -40px) rotate(60deg);
            }

            66% {
                transform: translate(-15px, -70px) rotate(120deg);
            }
        }

        /* ===== CATEGORY CAROUSEL PREMIUM STYLES ===== */
        .category-carousel-section {
            overflow: hidden !important;
        }

        /* Background Decorations */
        .category-bg-decoration {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .floating-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            opacity: 0.35;
        }

        .orb-1 {
            width: 450px;
            height: 450px;
            background: radial-gradient(circle, rgba(240, 230, 218, 0.6) 0%, transparent 65%);
            top: -12%;
            left: -8%;
            animation: floatOrb1 24s ease-in-out infinite;
        }

        .orb-2 {
            width: 380px;
            height: 380px;
            background: radial-gradient(circle, rgba(235, 225, 212, 0.5) 0%, transparent 65%);
            bottom: -8%;
            right: -4%;
            animation: floatOrb2 28s ease-in-out infinite;
        }

        .orb-3 {
            width: 280px;
            height: 280px;
            background: radial-gradient(circle, rgba(245, 238, 228, 0.55) 0%, transparent 65%);
            top: 45%;
            left: 8%;
            animation: floatOrb3 20s ease-in-out infinite;
        }

        .orb-4 {
            width: 320px;
            height: 320px;
            background: radial-gradient(circle, rgba(250, 245, 238, 0.5) 0%, transparent 65%);
            top: 22%;
            right: 12%;
            animation: floatOrb4 26s ease-in-out infinite;
        }

        @keyframes floatOrb1 {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
            }

            33% {
                transform: translate(60px, 40px) scale(1.1);
            }

            66% {
                transform: translate(-40px, 60px) scale(0.95);
            }
        }

        @keyframes floatOrb2 {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
            }

            33% {
                transform: translate(-50px, -30px) scale(1.1);
            }

            66% {
                transform: translate(30px, -50px) scale(0.9);
            }
        }

        @keyframes floatOrb3 {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
            }

            50% {
                transform: translate(40px, 40px) scale(1.1);
            }
        }

        @keyframes floatOrb4 {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
            }

            50% {
                transform: translate(-40px, 40px) scale(1.1);
            }
        }

        .sparkle {
            position: absolute;
            color: #d4a574;
            opacity: 0;
            animation: sparkleTwinkle 6s ease-in-out infinite;
            font-size: 14px;
        }

        .sparkle-1 {
            top: 15%;
            left: 20%;
            animation-delay: 0s;
        }

        .sparkle-2 {
            top: 25%;
            right: 15%;
            animation-delay: 1s;
        }

        .sparkle-3 {
            bottom: 30%;
            left: 10%;
            animation-delay: 2s;
        }

        .sparkle-4 {
            top: 40%;
            right: 25%;
            animation-delay: 3s;
        }

        .sparkle-5 {
            bottom: 15%;
            right: 35%;
            animation-delay: 1.5s;
        }

        .sparkle-6 {
            top: 10%;
            left: 40%;
            animation-delay: 4s;
        }

        @keyframes sparkleTwinkle {

            0%,
            100% {
                opacity: 0;
                transform: scale(0.5) rotate(0deg);
            }

            50% {
                opacity: 0.6;
                transform: scale(1.2) rotate(45deg);
            }
        }

        .category-mesh-overlay {
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(circle at 10% 10%, rgba(184, 149, 109, 0.03) 1px, transparent 1px),
                radial-gradient(circle at 90% 90%, rgba(184, 149, 109, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            opacity: 0.5;
        }

        /* Typography */
        .category-title-wrapper {
            margin-bottom: 60px;
            position: relative;
        }

        .category-subtitle {
            display: block;
            text-transform: uppercase;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.2em;
            color: #9a8a78;
            margin-bottom: 16px;
        }

        .category-main-title {
            font-size: 56px;
            font-weight: 800;
            background: linear-gradient(135deg, #2a2420 0%, #4a3e36 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 24px;
            letter-spacing: -0.02em;
        }

        .category-title-decoration {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
        }

        .title-line {
            width: 60px;
            height: 1px;
            background: linear-gradient(90deg, transparent, #d4a574, transparent);
        }

        .title-diamond {
            color: #d4a574;
            font-size: 14px;
        }

        /* 3D Carousel Core */
        .carousel-perspective-container {
            /* Styles inline for reliability */
        }

        .carousel-center-glow {
            position: absolute;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 245, 230, 0.4) 40%, transparent 70%);
            border-radius: 50%;
            filter: blur(60px);
            z-index: 0;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: pulseGlow 8s ease-in-out infinite;
        }

        @keyframes pulseGlow {

            0%,
            100% {
                opacity: 0.6;
                transform: translate(-50%, -50%) scale(1);
            }

            50% {
                opacity: 0.9;
                transform: translate(-50%, -50%) scale(1.1);
            }
        }

        .carousel-3d-wrapper {
            /* Styles inline */
        }

        .carousel-card {
            /* Styles inline */
            border-radius: 32px;
            /* box-shadow: 0 20px 50px rgba(0,0,0,0.15); */
        }

        /* Card Inner & Interactions */
        .premium-card-inner {
            width: 100%;
            height: 100%;
            position: relative;
            background: #fff;
            border-radius: 32px;
            overflow: hidden;
            box-shadow:
                0 25px 50px -12px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.5) inset;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            backface-visibility: hidden;
        }

        /* Glare Effect */
        .card-glare {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 55%;
            background: linear-gradient(180deg,
                    rgba(255, 255, 255, 0.35) 0%,
                    rgba(255, 255, 255, 0.15) 30%,
                    transparent 100%);
            border-radius: 32px 32px 0 0;
            pointer-events: none;
            opacity: 0.6;
            transition: opacity 0.4s ease;
        }

        .premium-card-inner:hover .card-glare {
            opacity: 0.85;
        }

        /* Card Reflection - Subtle */
        .card-reflection {
            position: absolute;
            inset: 0;
            background: linear-gradient(145deg,
                    rgba(255, 255, 255, 0.1) 0%,
                    transparent 35%,
                    transparent 65%,
                    rgba(240, 225, 205, 0.05) 100%);
            border-radius: 32px;
            pointer-events: none;
        }

        /* Animated Border - Minimal & Elegant */
        .card-animated-border {
            position: absolute;
            inset: -2px;
            border-radius: 34px;
            background: linear-gradient(135deg,
                    rgba(255, 255, 255, 0.3) 0%,
                    rgba(240, 225, 205, 0.25) 25%,
                    rgba(255, 250, 240, 0.35) 50%,
                    rgba(235, 220, 200, 0.25) 75%,
                    rgba(255, 255, 255, 0.3) 100%);
            background-size: 300% 300%;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.5s ease;
            animation: borderGlow 4s ease-in-out infinite;
        }

        .premium-card-inner:hover .card-animated-border {
            opacity: 0.8;
        }

        @keyframes borderGlow {

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

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

        /* Card Content - Refined Spacing */
        .card-content-wrapper {
            position: absolute;
            inset: 0;
            padding: 24px;
            display: flex;
            flex-direction: column;
            z-index: 2;
        }

        .card-image-frame {
            flex: 1;
            border-radius: 22px;
            overflow: hidden;
            margin-bottom: 20px;
            position: relative;
            background: rgba(255, 255, 255, 0.5);
            box-shadow:
                0 6px 20px rgba(160, 140, 120, 0.08),
                0 12px 40px rgba(140, 120, 100, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .card-product-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .premium-card-inner:hover .card-product-image {
            transform: scale(1.08);
        }

        .image-shine-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(145deg,
                    rgba(255, 255, 255, 0.25) 0%,
                    transparent 45%,
                    transparent 100%);
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .premium-card-inner:hover .image-shine-overlay {
            opacity: 1;
        }

        .card-info-section {
            text-align: center;
            padding: 8px 0 4px;
        }

        .card-product-title {
            font-size: 24px;
            font-weight: 600;
            color: #2a2420;
            margin-bottom: 4px;
            letter-spacing: -0.02em;
        }

        .card-product-tagline {
            font-size: 14px;
            color: #9a8a78;
            font-weight: 500;
            letter-spacing: 0.03em;
        }

        .card-hover-cta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 10px;
            color: #b8956d;
            font-weight: 600;
            font-size: 14px;
            letter-spacing: 0.02em;
            opacity: 0;
            transform: translateY(8px);
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .premium-card-inner:hover .card-hover-cta {
            opacity: 1;
            transform: translateY(0);
        }

        .card-hover-cta svg {
            width: 16px;
            height: 16px;
            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .premium-card-inner:hover .card-hover-cta svg {
            transform: translateX(4px);
        }

        /* Navigation Buttons - Refined Aesthetic */
        .carousel-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 100;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: transparent;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .nav-prev {
            left: 50px;
        }

        .nav-next {
            right: 50px;
        }

        .nav-btn-bg {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: linear-gradient(155deg,
                    rgba(255, 255, 255, 0.95) 0%,
                    rgba(252, 248, 242, 0.9) 50%,
                    rgba(248, 240, 230, 0.85) 100%);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            box-shadow:
                0 4px 16px rgba(180, 160, 140, 0.15),
                0 8px 32px rgba(160, 140, 120, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .nav-btn-icon {
            position: relative;
            z-index: 2;
            color: #9a8570;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.4s ease;
        }

        .nav-btn-icon svg {
            width: 22px;
            height: 22px;
            stroke-width: 2;
        }

        .nav-btn-ripple {
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 1px solid rgba(200, 180, 160, 0.25);
            opacity: 0;
            transition: all 0.5s;
        }

        .carousel-nav-btn:hover {
            transform: translateY(-50%) scale(1.08);
        }

        .carousel-nav-btn:hover .nav-btn-bg {
            background: linear-gradient(155deg,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 252, 248, 0.98) 50%,
                    rgba(252, 245, 235, 0.95) 100%);
            box-shadow:
                0 6px 20px rgba(180, 160, 140, 0.2),
                0 12px 40px rgba(160, 140, 120, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 1);
            border-color: rgba(255, 255, 255, 0.8);
        }

        .carousel-nav-btn:hover .nav-btn-icon {
            color: #b8956d;
        }

        .carousel-nav-btn:hover .nav-btn-ripple {
            opacity: 1;
            animation: rippleSoft 1.5s ease-out infinite;
        }

        @keyframes rippleSoft {
            0% {
                transform: scale(1);
                opacity: 0.5;
            }

            100% {
                transform: scale(1.5);
                opacity: 0;
            }
        }

        .carousel-nav-btn:active {
            transform: translateY(-50%) scale(0.96);
        }

        /* Progress Dots - Minimalist Aesthetic */
        .carousel-progress-dots {
            position: absolute;
            bottom: -55px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            padding: 12px 20px;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 30px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 4px 16px rgba(180, 160, 140, 0.1);
        }

        .progress-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(180, 160, 140, 0.3);
            border: none;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .progress-dot.active {
            background: linear-gradient(135deg, #c9a87c 0%, #b8956d 100%);
            box-shadow: 0 0 10px rgba(200, 170, 130, 0.4);
            transform: scale(1.3);
        }

        .progress-dot:hover:not(.active) {
            background: rgba(180, 160, 140, 0.5);
            transform: scale(1.15);
        }

        /* Hint Text */
        .carousel-hint-text {
            margin-top: 80px;
            color: #9a8a7a;
            font-size: 22px;
            font-style: italic;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .hint-icon {
            font-size: 28px;
            animation: rotateHint 3s linear infinite;
        }

        @keyframes rotateHint {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .carousel-nav-btn {
                width: 55px;
                height: 55px;
            }

            .nav-prev {
                left: 15px;
            }

            .nav-next {
                right: 15px;
            }

            .category-main-title {
                font-size: 36px;
            }

            .carousel-3d-wrapper {
                width: 280px !important;
                height: 360px !important;
            }

            .carousel-card {
                width: 280px !important;
                height: 360px !important;
            }

            .carousel-perspective-container {
                height: 500px !important;
            }
        }

        /* About Section Premium Styles */
        .about-stat-card {
            position: relative;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 252, 248, 0.9) 100%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.8);
            border-radius: 24px;
            padding: 2rem 1.5rem;
            text-align: center;
            box-shadow:
                0 4px 20px rgba(180, 150, 120, 0.08),
                0 8px 40px rgba(160, 130, 100, 0.06);
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            overflow: hidden;
        }

        .about-stat-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow:
                0 12px 40px rgba(180, 150, 120, 0.15),
                0 20px 60px rgba(160, 130, 100, 0.1);
        }

        .about-stat-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 1rem;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .about-stat-card:hover .about-stat-icon {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 12px 32px rgba(245, 158, 11, 0.45);
        }

        .about-stat-number {
            font-size: 2.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, #2a2420 0%, #5a4a3a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.5rem;
        }

        .about-stat-label {
            font-size: 0.9rem;
            font-weight: 600;
            color: #8a7a6a;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .about-stat-glow {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 4px;
            background: linear-gradient(90deg, transparent, #f59e0b, transparent);
            border-radius: 2px;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .about-stat-card:hover .about-stat-glow {
            opacity: 1;
        }

        .about-image-main {
            position: relative;
        }

        .about-image-main::before {
            content: '';
            position: absolute;
            inset: -4px;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #f59e0b 100%);
            border-radius: 28px;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .about-image-main:hover::before {
            opacity: 0.6;
        }

        @keyframes float-gentle {

            0%,
            100% {
                transform: translateY(0) rotate(3deg);
            }

            50% {
                transform: translateY(-10px) rotate(-3deg);
            }
        }

        /* 3D Grid Layout */
        @media (min-width: 768px) {
            .gallery-grid {
                grid-template-columns: repeat(3, 1fr) !important;
            }
        }

        /* 3D Item Styles */
        .gallery-item-3d {
            position: relative;
            height: 300px;
            /* Consistent height */
            border-radius: 16px;
            cursor: pointer;
            transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .gallery-3d-inner {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            border-radius: 16px;
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .gallery-item-3d:hover .gallery-3d-inner {
            transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
            box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.3);
        }

        .gallery-3d-front {
            width: 100%;
            height: 100%;
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            backface-visibility: hidden;
        }

        .gallery-3d-front img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }

        .gallery-item-3d:hover .gallery-3d-front img {
            transform: scale(1.15);
        }

        /* Overlay 3D Effects */
        .gallery-overlay-3d {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
            opacity: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 24px;
            transition: all 0.4s ease;
            transform: translateZ(20px);
            /* Depth effect */
        }

        .gallery-item-3d:hover .gallery-overlay-3d {
            opacity: 1;
        }

        .gallery-plus-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0) rotate(-180deg);
            font-size: 40px;
            color: #fff;
            font-weight: 300;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .gallery-item-3d:hover .gallery-plus-icon {
            transform: translate(-50%, -50%) scale(1) rotate(0deg);
            opacity: 0.8;
        }

        .gallery-text-content {
            transform: translateY(20px);
            transition: transform 0.4s ease 0.1s, opacity 0.4s ease 0.1s;
            opacity: 0;
        }

        .gallery-item-3d:hover .gallery-text-content {
            transform: translateY(0);
            opacity: 1;
        }

        .gallery-title-3d {
            color: #fff;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 4px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .gallery-desc-3d {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            font-weight: 500;
        }

        /* Scroll Animation Classes */
        .reveal-3d {
            opacity: 0;
            transform: translateY(50px) scale(0.95);
            transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .reveal-3d.active {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        @keyframes scroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .partner-logo {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .partner-logo:hover {
            transform: translateY(-8px) scale(1.05);
            box-shadow: 0 12px 35px rgba(255, 255, 255, 0.25) !important;
        }

        /* Mobile responsive logos */
        @media (max-width: 768px) {
            .partner-logo {
                min-width: 110px !important;
                height: 70px !important;
                padding: 12px 18px !important;
            }

            .partner-logo span {
                font-size: 16px !important;
            }

            .partner-logo span span {
                font-size: 16px !important;
            }
        }

        .logo-track:hover {
            animation-play-state: paused;
        }

        @keyframes logoFloat {

            0%,
            100% {
                transform: translateY(0) scale(1);
            }

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

        @keyframes logoPulse {

            0%,
            100% {
                opacity: 0.4;
                transform: scale(1);
            }

            50% {
                opacity: 0.7;
                transform: scale(1.1);
            }
        }

        @keyframes logoCircle1 {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
            }

            33% {
                transform: translate(50px, -50px) scale(1.1);
            }

            66% {
                transform: translate(-30px, 40px) scale(0.9);
            }
        }

        @keyframes logoCircle2 {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
            }

            33% {
                transform: translate(-60px, 60px) scale(1.15);
            }

            66% {
                transform: translate(40px, -50px) scale(0.95);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes floatShape1 {

            0%,
            100% {
                transform: translate(0, 0) rotate(0deg) scale(1);
            }

            25% {
                transform: translate(150px, 120px) rotate(90deg) scale(1.15);
            }

            50% {
                transform: translate(80px, 250px) rotate(180deg) scale(0.95);
            }

            75% {
                transform: translate(-100px, 180px) rotate(270deg) scale(1.1);
            }
        }

        @keyframes floatShape2 {

            0%,
            100% {
                transform: translate(0, 0) rotate(0deg) scale(1);
            }

            33% {
                transform: translate(-120px, 100px) rotate(120deg) scale(1.12);
            }

            66% {
                transform: translate(-80px, -140px) rotate(240deg) scale(0.92);
            }
        }

        @keyframes floatShape3 {

            0%,
            100% {
                transform: translate(0, 0) scale(1) rotate(0deg);
            }

            25% {
                transform: translate(-90px, -110px) scale(1.18) rotate(45deg);
            }

            50% {
                transform: translate(140px, -80px) scale(0.88) rotate(90deg);
            }

            75% {
                transform: translate(70px, 90px) scale(1.08) rotate(135deg);
            }
        }

        @keyframes floatShape4 {

            0%,
            100% {
                transform: translate(0, 0) rotate(0deg);
            }

            30% {
                transform: translate(110px, -130px) rotate(108deg);
            }

            60% {
                transform: translate(-80px, -90px) rotate(216deg);
            }
        }

        @keyframes floatShape5 {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
            }

            20% {
                transform: translate(-130px, 140px) scale(1.15);
            }

            40% {
                transform: translate(-70px, -100px) scale(0.9);
            }

            60% {
                transform: translate(120px, -120px) scale(1.12);
            }

            80% {
                transform: translate(90px, 110px) scale(0.95);
            }
        }

        @keyframes floatShape6 {

            0%,
            100% {
                transform: translate(0, 0) rotate(0deg) scale(1);
            }

            35% {
                transform: translate(-150px, 100px) rotate(126deg) scale(1.1);
            }

            70% {
                transform: translate(80px, -130px) rotate(252deg) scale(0.93);
            }
        }


        /* =========================================
   DESKTOP FIXES & OVERRIDES
   ========================================= */

        /* Navigation Z-Index */
        .navbar {
            z-index: 1000 !important;
            background: #ffffff !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .navbar .logo-img,
        .navbar .custom-logo img {
            height: 80px !important;
            width: auto !important;
            max-height: 80px !important;
        }

        /* Fix Hero Spacing on Desktop */
        @media (min-width: 1025px) {
            .hero-section {
                padding-top: 140px;
                min-height: 100vh;
                display: flex;
                align-items: center;
            }

            .hero-split-container {
                padding-top: 13rem;
            }
        }