/* ! tailwindcss v3.4.5 | 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: Rubik, 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] {
    display: none
}

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

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 2rem;
    padding-left: 2rem
}

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

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

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.inset-0 {
    inset: 0px
}

.bottom-0 {
    bottom: 0px
}

.bottom-20 {
    bottom: 5rem
}

.bottom-6 {
    bottom: 1.5rem
}

.bottom-8 {
    bottom: 2rem
}

.left-0 {
    left: 0px
}

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

.left-2 {
    left: 0.5rem
}

.left-20 {
    left: 5rem
}

.left-3 {
    left: 0.75rem
}

.left-4 {
    left: 1rem
}

.left-8 {
    left: 2rem
}

.right-0 {
    right: 0px
}

.right-1 {
    right: 0.25rem
}

.right-2 {
    right: 0.5rem
}

.right-20 {
    right: 5rem
}

.right-3 {
    right: 0.75rem
}

.right-4 {
    right: 1rem
}

.right-6 {
    right: 1.5rem
}

.top-0 {
    top: 0px
}

.top-1 {
    top: 0.25rem
}

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

.top-20 {
    top: 5rem
}

.top-3 {
    top: 0.75rem
}

.top-4 {
    top: 1rem
}

.top-40 {
    top: 10rem
}

.top-6 {
    top: 1.5rem
}

.z-10 {
    z-index: 10
}

.z-50 {
    z-index: 50
}

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

.mb-0\.5 {
    margin-bottom: 0.125rem
}

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

.mb-1\.5 {
    margin-bottom: 0.375rem
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

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

.h-1 {
    height: 0.25rem
}

.h-1\.5 {
    height: 0.375rem
}

.h-10 {
    height: 2.5rem
}

.h-12 {
    height: 3rem
}

.h-14 {
    height: 3.5rem
}

.h-16 {
    height: 4rem
}

.h-2 {
    height: 0.5rem
}

.h-20 {
    height: 5rem
}

.h-24 {
    height: 6rem
}

.h-3 {
    height: 0.75rem
}

.h-32 {
    height: 8rem
}

.h-4 {
    height: 1rem
}

.h-40 {
    height: 10rem
}

.h-48 {
    height: 12rem
}

.h-5 {
    height: 1.25rem
}

.h-6 {
    height: 1.5rem
}

.h-64 {
    height: 16rem
}

.h-72 {
    height: 18rem
}

.h-96 {
    height: 24rem
}

.h-full {
    height: 100%
}

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

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

.w-0 {
    width: 0px
}

.w-10 {
    width: 2.5rem
}

.w-12 {
    width: 3rem
}

.w-14 {
    width: 3.5rem
}

.w-16 {
    width: 4rem
}

.w-2 {
    width: 0.5rem
}

.w-20 {
    width: 5rem
}

.w-24 {
    width: 6rem
}

.w-3 {
    width: 0.75rem
}

.w-32 {
    width: 8rem
}

.w-4 {
    width: 1rem
}

.w-40 {
    width: 10rem
}

.w-5 {
    width: 1.25rem
}

.w-6 {
    width: 1.5rem
}

.w-64 {
    width: 16rem
}

.w-8 {
    width: 2rem
}

.w-96 {
    width: 24rem
}

.w-auto {
    width: auto
}

.w-full {
    width: 100%
}

.min-w-0 {
    min-width: 0px
}

.min-w-full {
    min-width: 100%
}

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

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

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

.max-w-6xl {
    max-width: 72rem
}

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

.max-w-full {
    max-width: 100%
}

.max-w-md {
    max-width: 28rem
}

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

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

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

.scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    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))
}

.scale-75 {
    --tw-scale-x: .75;
    --tw-scale-y: .75;
    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
}

.cursor-not-allowed {
    cursor: not-allowed
}

.cursor-pointer {
    cursor: pointer
}

.resize-none {
    resize: none
}

.appearance-none {
    -webkit-appearance: none;
    appearance: none
}

.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-1 {
    gap: 0.25rem
}

.gap-12 {
    gap: 3rem
}

.gap-2 {
    gap: 0.5rem
}

.gap-3 {
    gap: 0.75rem
}

.gap-4 {
    gap: 1rem
}

.gap-6 {
    gap: 1.5rem
}

.gap-8 {
    gap: 2rem
}

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

.overflow-hidden {
    overflow: hidden
}

.overflow-x-auto {
    overflow-x: auto
}

.whitespace-nowrap {
    white-space: nowrap
}

.break-words {
    overflow-wrap: break-word
}

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

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

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

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

.rounded-lg {
    border-radius: var(--radius)
}

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

.border {
    border-width: 1px
}

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

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

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

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

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

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

.border-\[\#6B5B95\]\/20 {
    border-color: rgb(107 91 149 / 0.2)
}

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

.border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity))
}

.border-gray-400 {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity))
}

.border-purple-200 {
    --tw-border-opacity: 1;
    border-color: rgb(233 213 255 / var(--tw-border-opacity))
}

.border-transparent {
    border-color: transparent
}

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

.border-white\/10 {
    border-color: rgb(255 255 255 / 0.1)
}

.border-white\/30 {
    border-color: rgb(255 255 255 / 0.3)
}

.border-white\/50 {
    border-color: rgb(255 255 255 / 0.5)
}

.border-\[\#6B5B95\] {
    --tw-border-opacity: 1;
    border-color: rgb(107 91 149 / var(--tw-border-opacity))
}

.bg-\[\#5A4A7F\] {
    --tw-bg-opacity: 1;
    background-color: rgb(90 74 127 / var(--tw-bg-opacity))
}

.bg-\[\#6B5B95\] {
    --tw-bg-opacity: 1;
    background-color: rgb(107 91 149 / var(--tw-bg-opacity))
}

.bg-\[\#8B7BAF\] {
    --tw-bg-opacity: 1;
    background-color: rgb(139 123 175 / var(--tw-bg-opacity))
}

.bg-\[\#FFD700\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 215 0 / var(--tw-bg-opacity))
}

.bg-blue-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(191 219 254 / var(--tw-bg-opacity))
}

.bg-blue-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(96 165 250 / var(--tw-bg-opacity))
}

.bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity))
}

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

.bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity))
}

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

.bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity))
}

.bg-indigo-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(165 180 252 / var(--tw-bg-opacity))
}

.bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity))
}

.bg-pink-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 168 212 / var(--tw-bg-opacity))
}

.bg-purple-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(233 213 255 / var(--tw-bg-opacity))
}

.bg-purple-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(216 180 254 / var(--tw-bg-opacity))
}

.bg-purple-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(192 132 252 / var(--tw-bg-opacity))
}

.bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity))
}

.bg-transparent {
    background-color: transparent
}

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

.bg-white\/10 {
    background-color: rgb(255 255 255 / 0.1)
}

.bg-white\/20 {
    background-color: rgb(255 255 255 / 0.2)
}

.bg-white\/90 {
    background-color: rgb(255 255 255 / 0.9)
}

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

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

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

.from-\[\#6B5B95\] {
    --tw-gradient-from: #6B5B95 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(107 91 149 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-\[\#6B5B95\]\/10 {
    --tw-gradient-from: rgb(107 91 149 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(107 91 149 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-\[\#6B5B95\]\/30 {
    --tw-gradient-from: rgb(107 91 149 / 0.3) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(107 91 149 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-\[\#8B7BAF\] {
    --tw-gradient-from: #8B7BAF var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(139 123 175 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-black\/40 {
    --tw-gradient-from: rgb(0 0 0 / 0.4) 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-black\/60 {
    --tw-gradient-from: rgb(0 0 0 / 0.6) 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-blue-500 {
    --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-gray-50 {
    --tw-gradient-from: #f9fafb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-gray-900 {
    --tw-gradient-from: #111827 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-green-500 {
    --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-indigo-50 {
    --tw-gradient-from: #eef2ff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-indigo-500 {
    --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-orange-500 {
    --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-purple-50 {
    --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-purple-500 {
    --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

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

.from-yellow-500 {
    --tw-gradient-from: #eab308 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.via-\[\#5A4A7F\] {
    --tw-gradient-to: rgb(90 74 127 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #5A4A7F var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.via-\[\#8B7BAF\] {
    --tw-gradient-to: rgb(139 123 175 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #8B7BAF var(--tw-gradient-via-position), var(--tw-gradient-to)
}

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

.via-gray-50 {
    --tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #f9fafb var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.via-gray-800 {
    --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.via-purple-50 {
    --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #faf5ff var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.via-purple-500 {
    --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #a855f7 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)
}

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

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

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

.to-\[\#8B7BAF\]\/10 {
    --tw-gradient-to: rgb(139 123 175 / 0.1) var(--tw-gradient-to-position)
}

.to-\[\#8B7BAF\]\/30 {
    --tw-gradient-to: rgb(139 123 175 / 0.3) var(--tw-gradient-to-position)
}

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

.to-cyan-500 {
    --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position)
}

.to-emerald-500 {
    --tw-gradient-to: #10b981 var(--tw-gradient-to-position)
}

.to-gray-50 {
    --tw-gradient-to: #f9fafb var(--tw-gradient-to-position)
}

.to-gray-900 {
    --tw-gradient-to: #111827 var(--tw-gradient-to-position)
}

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

.to-pink-50 {
    --tw-gradient-to: #fdf2f8 var(--tw-gradient-to-position)
}

.to-pink-500 {
    --tw-gradient-to: #ec4899 var(--tw-gradient-to-position)
}

.to-purple-50 {
    --tw-gradient-to: #faf5ff var(--tw-gradient-to-position)
}

.to-purple-500 {
    --tw-gradient-to: #a855f7 var(--tw-gradient-to-position)
}

.to-red-500 {
    --tw-gradient-to: #ef4444 var(--tw-gradient-to-position)
}

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

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

.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text
}

.object-contain {
    object-fit: contain
}

.object-cover {
    object-fit: cover
}

.p-10 {
    padding: 2.5rem
}

.p-2 {
    padding: 0.5rem
}

.p-4 {
    padding: 1rem
}

.p-6 {
    padding: 1.5rem
}

.p-8 {
    padding: 2rem
}

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

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

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

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

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

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

.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.pl-3 {
    padding-left: 0.75rem
}

.pr-10 {
    padding-right: 2.5rem
}

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

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

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

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

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

.text-center {
    text-align: center
}

.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-\[10px\] {
    font-size: 10px
}

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

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

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

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

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

.font-black {
    font-weight: 900
}

.font-bold {
    font-weight: 700
}

.font-semibold {
    font-weight: 600
}

.uppercase {
    text-transform: uppercase
}

.leading-relaxed {
    line-height: 1.625
}

.leading-tight {
    line-height: 1.25
}

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

.text-\[\#6B5B95\] {
    --tw-text-opacity: 1;
    color: rgb(107 91 149 / var(--tw-text-opacity))
}

.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity))
}

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

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

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

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

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

.text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity))
}

.text-transparent {
    color: transparent
}

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

.text-white\/50 {
    color: rgb(255 255 255 / 0.5)
}

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

.text-white\/90 {
    color: rgb(255 255 255 / 0.9)
}

.text-yellow-500 {
    --tw-text-opacity: 1;
    color: rgb(234 179 8 / var(--tw-text-opacity))
}

.text-purple-300 {
    --tw-text-opacity: 1;
    color: rgb(216 180 254 / var(--tw-text-opacity))
}

.underline {
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline
}

.opacity-0 {
    opacity: 0
}

.opacity-10 {
    opacity: 0.1
}

.opacity-20 {
    opacity: 0.2
}

.opacity-5 {
    opacity: 0.05
}

.opacity-50 {
    opacity: 0.5
}

.opacity-60 {
    opacity: 0.6
}

.opacity-90 {
    opacity: 0.9
}

.mix-blend-multiply {
    mix-blend-mode: multiply
}

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

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

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

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

.invert {
    --tw-invert: invert(100%);
    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)
}

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

.backdrop-blur-md {
    --tw-backdrop-blur: blur(12px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

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

.backdrop-blur-xl {
    --tw-backdrop-blur: blur(24px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

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

.transition-transform {
    transition-property: transform;
    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
}

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

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

@keyframes enter {
    from {
        opacity: var(--tw-enter-opacity, 1);
        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))
    }
}

@keyframes exit {
    to {
        opacity: var(--tw-exit-opacity, 1);
        transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))
    }
}

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

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

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

.ease-in-out {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

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

.hover\:-translate-y-2:hover {
    --tw-translate-y: -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\:-translate-y-4:hover {
    --tw-translate-y: -1rem;
    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\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.hover\:scale-110:hover {
    --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))
}

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

.hover\:border-\[\#6B5B95\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(107 91 149 / var(--tw-border-opacity))
}

.hover\:border-\[\#6B5B95\]\/20:hover {
    border-color: rgb(107 91 149 / 0.2)
}

.hover\:bg-\[\#6B5B95\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(107 91 149 / var(--tw-bg-opacity))
}

.hover\:bg-\[\#6B5B95\]\/10:hover {
    background-color: rgb(107 91 149 / 0.1)
}

.hover\:bg-gray-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity))
}

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

.hover\:bg-white\/20:hover {
    background-color: rgb(255 255 255 / 0.2)
}

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

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

.hover\:from-\[\#6B5B95\]:hover {
    --tw-gradient-from: #6B5B95 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(107 91 149 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

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

.hover\:text-\[\#6B5B95\]:hover {
    --tw-text-opacity: 1;
    color: rgb(107 91 149 / var(--tw-text-opacity))
}

.hover\:text-\[\#8B7BAF\]:hover {
    --tw-text-opacity: 1;
    color: rgb(139 123 175 / var(--tw-text-opacity))
}

.hover\:text-\[\#FFD700\]:hover {
    --tw-text-opacity: 1;
    color: rgb(255 215 0 / var(--tw-text-opacity))
}

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

.hover\:text-purple-200:hover {
    --tw-text-opacity: 1;
    color: rgb(233 213 255 / var(--tw-text-opacity))
}

.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-lg:hover {
    --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)
}

.hover\:shadow-xl:hover {
    --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)
}

.hover\:shadow-\[\#6B5B95\]\/30:hover {
    --tw-shadow-color: rgb(107 91 149 / 0.3);
    --tw-shadow: var(--tw-shadow-colored)
}

.hover\:shadow-\[\#6B5B95\]\/50:hover {
    --tw-shadow-color: rgb(107 91 149 / 0.5);
    --tw-shadow: var(--tw-shadow-colored)
}

.hover\:shadow-purple-500\/50:hover {
    --tw-shadow-color: rgb(168 85 247 / 0.5);
    --tw-shadow: var(--tw-shadow-colored)
}

.focus\:border-\[\#6B5B95\]:focus {
    --tw-border-opacity: 1;
    border-color: rgb(107 91 149 / var(--tw-border-opacity))
}

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

.focus\:ring-4:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus\:ring-\[\#6B5B95\]\/20:focus {
    --tw-ring-color: rgb(107 91 149 / 0.2)
}

.group:focus-within .group-focus-within\:text-\[\#8B7BAF\] {
    --tw-text-opacity: 1;
    color: rgb(139 123 175 / var(--tw-text-opacity))
}

.group:hover .group-hover\:w-full {
    width: 100%
}

.group\/btn:hover .group-hover\/btn\:translate-x-2 {
    --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))
}

.group:hover .group-hover\:-translate-y-1 {
    --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))
}

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

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

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

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

.group:hover .group-hover\: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))
}

.group:hover .group-hover\:rotate-90 {
    --tw-rotate: 90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

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

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

.group:hover .group-hover\:border-\[\#6B5B95\] {
    --tw-border-opacity: 1;
    border-color: rgb(107 91 149 / var(--tw-border-opacity))
}

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

.group:hover .group-hover\:from-\[\#6B5B95\] {
    --tw-gradient-from: #6B5B95 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(107 91 149 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

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

.group:hover .group-hover\:bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text
}

.group:hover .group-hover\:text-\[\#6B5B95\] {
    --tw-text-opacity: 1;
    color: rgb(107 91 149 / var(--tw-text-opacity))
}

.group:hover .group-hover\:text-transparent {
    color: transparent
}

.group:hover .group-hover\:opacity-10 {
    opacity: 0.1
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1
}

.group:hover .group-hover\:opacity-20 {
    opacity: 0.2
}

@media (min-width: 640px) {
    .sm\:left-4 {
        left: 1rem
    }

    .sm\:right-4 {
        right: 1rem
    }

    .sm\:top-4 {
        top: 1rem
    }

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

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

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

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

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

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

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

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

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

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

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

    .sm\:mt-10 {
        margin-top: 2.5rem
    }

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

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

    .sm\:flex {
        display: flex
    }

    .sm\:hidden {
        display: none
    }

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

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

    .sm\:h-2 {
        height: 0.5rem
    }

    .sm\:h-20 {
        height: 5rem
    }

    .sm\:h-28 {
        height: 7rem
    }

    .sm\:h-3 {
        height: 0.75rem
    }

    .sm\:h-32 {
        height: 8rem
    }

    .sm\:h-4 {
        height: 1rem
    }

    .sm\:h-5 {
        height: 1.25rem
    }

    .sm\:h-52 {
        height: 13rem
    }

    .sm\:h-6 {
        height: 1.5rem
    }

    .sm\:h-7 {
        height: 1.75rem
    }

    .sm\:h-72 {
        height: 18rem
    }

    .sm\:h-80 {
        height: 20rem
    }

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

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

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

    .sm\:w-20 {
        width: 5rem
    }

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

    .sm\:w-32 {
        width: 8rem
    }

    .sm\:w-4 {
        width: 1rem
    }

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

    .sm\:w-6 {
        width: 1.5rem
    }

    .sm\:w-7 {
        width: 1.75rem
    }

    .sm\:w-80 {
        width: 20rem
    }

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

    .sm\:scale-100 {
        --tw-scale-x: 1;
        --tw-scale-y: 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))
    }

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

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

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

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

    .sm\:gap-2 {
        gap: 0.5rem
    }

    .sm\:gap-3 {
        gap: 0.75rem
    }

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

    .sm\:gap-5 {
        gap: 1.25rem
    }

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

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

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

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

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

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

    .sm\:p-5 {
        padding: 1.25rem
    }

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

    .sm\:p-7 {
        padding: 1.75rem
    }

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

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

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

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

    .sm\:px-7 {
        padding-left: 1.75rem;
        padding-right: 1.75rem
    }

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

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

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

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

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

    .sm\:py-3\.5 {
        padding-top: 0.875rem;
        padding-bottom: 0.875rem
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 768px) {
    .md\:left-4 {
        left: 1rem
    }

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

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

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

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

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

    .md\:inline {
        display: inline
    }

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

    .md\:h-32 {
        height: 8rem
    }

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

    .md\:h-56 {
        height: 14rem
    }

    .md\:h-8 {
        height: 2rem
    }

    .md\:h-80 {
        height: 20rem
    }

    .md\:h-96 {
        height: 24rem
    }

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

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

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

    .md\:w-8 {
        width: 2rem
    }

    .md\:w-96 {
        width: 24rem
    }

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

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

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

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

    .md\:p-10 {
        padding: 2.5rem
    }

    .md\:p-16 {
        padding: 4rem
    }

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

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

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

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

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

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

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

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

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

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

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

    .md\:pr-14 {
        padding-right: 3.5rem
    }

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

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

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

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

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

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

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

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

@media (min-width: 1024px) {
    .lg\:col-span-1 {
        grid-column: span 1 / span 1
    }

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

    .lg\:flex {
        display: flex
    }

    .lg\:hidden {
        display: none
    }

    .lg\:h-36 {
        height: 9rem
    }

    .lg\:h-96 {
        height: 24rem
    }

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

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

    .lg\:p-12 {
        padding: 3rem
    }

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

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

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

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

@media (min-width: 1280px) {
    .xl\:text-8xl {
        font-size: 6rem;
        line-height: 1
    }
}

@tailwind base;
@tailwind components;
@tailwind utilities;
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #6B5B95;
    --primary-dark: #5A4A7F;
    --primary-light: #8B7BAF;
    --accent: #E91E63;
    --accent-light: #F48FB1;
    --success: #00C853;
}

/* Font family rules removed - using centralized typography system from typography.css */

body {
    direction: rtl;
    color: #111;
    background: #fff;
    line-height: 1.6;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary) 0%, var(--accent) 100%);
    border-radius: 6px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, var(--primary-dark) 0%, var(--accent) 100%);
    }
/* Enhanced Animations */
@keyframes blob {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

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

    66% {
        transform: translate(-20px, 20px) scale(0.8);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(-50%);
    }

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

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

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

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

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

@keyframes bounce-slow {
    0%, 100% {
        transform: translateY(0);
    }

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

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(107, 91, 149, 0.4);
    }

    50% {
        box-shadow: 0 0 40px rgba(107, 91, 149, 0.8);
    }
}

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

    100% {
        background-position: 1000px 0;
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out;
}

.animate-fadeInRight {
    animation: fadeInRight 0.6s ease-out;
}

.animate-fadeIn {
    animation: fadeIn 0.4s ease-out;
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient 3s ease infinite;
}

.animate-bounce-slow {
    animation: bounce-slow 3s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

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

    100% {
        transform: translateX(calc(-100% / 3));
    }
}

@keyframes scroll-ltr {
    0% {
        transform: translateX(calc(-100% / 3));
    }

    100% {
        transform: translateX(0);
    }
}

.animate-scroll-rtl {
    animation: scroll-rtl 40s linear infinite;
}

.animate-scroll-rtl-fast {
    animation: scroll-rtl 15s linear infinite;
}

.animate-scroll-rtl-faster {
    animation: scroll-rtl 12s linear infinite;
}
/* Partners Scroll Animation - حركة infinite scroll سريعة جداً */
@keyframes partners-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-100% / 6));
    }
}

.partners-scroll {
    animation: partners-scroll 6s linear infinite;
    will-change: transform;
}

    .partners-scroll:hover {
        animation-play-state: paused;
    }
    
    /* Feature tiles section - Desktop view - increase icon size */
    /* Ensure parent feature tile container allows overflow for 3D effect */
    div[data-uid="2GKaOBWvcAfgLtmk"] {
        overflow: visible !important; /* Allow icon to extend outside the tile for 3D effect */
    }
    
    /* Increase icon section container size for Why Aqar360 feature tiles ONLY.
       Scoped to section[data-uid="GBy9ZNTc41uUt8eL"] — service cards share the
       same data-uid wrapper and must NOT receive these stretch overrides. */
    section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="BPyhFWIhGqND9hee"],
    section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] > div[data-uid="BPyhFWIhGqND9hee"],
    section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="BPyhFWIhGqND9hee"][style*="min-width"],
    section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="BPyhFWIhGqND9hee"][style*="max-width"] {
        flex: 0.8 !important;
        min-width: 144px !important;
        max-width: 160px !important;
        width: auto !important;
        height: 100% !important;
        padding-left: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        align-self: stretch !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* RTL: Why Aqar360 section only */
    [dir="rtl"] section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="BPyhFWIhGqND9hee"],
    [dir="rtl"] section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] > div[data-uid="BPyhFWIhGqND9hee"],
    [dir="rtl"] section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="BPyhFWIhGqND9hee"][style*="min-width"],
    [dir="rtl"] section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="BPyhFWIhGqND9hee"][style*="max-width"] {
        padding-right: 0 !important;
        margin-right: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important;
    }
    
    /* Increase icon container size for feature tiles (shield, lightning, headphones, etc.) - Desktop */
    div[data-uid="Bf89AZnMxZBYaZEq"] {
        width: 8.4rem !important; /* 134.4px - reduced by 20% from 10.5rem (168px) for better animation */
        height: 8.4rem !important; /* 134.4px - reduced by 20% from 10.5rem (168px) for better animation */
        min-width: 8.4rem !important; /* Match width */
        min-height: 8.4rem !important; /* Match height */
        margin-left: 0 !important; /* Remove any left margin */
        margin-right: 0 !important; /* Remove any right margin */
        overflow: visible !important; /* Allow icon to extend outside container for 3D effect */
        position: relative !important; /* Enable positioning for 3D effect */
        z-index: 1 !important; /* Ensure icon appears above background */
    }
    
    /* For RTL: ensure icon container aligns to right */
    [dir="rtl"] div[data-uid="Bf89AZnMxZBYaZEq"] {
        margin-right: 0 !important; /* Remove any right margin for RTL */
        margin-left: 0 !important; /* Remove any left margin for RTL */
    }
    
    /* Increase SVG icon size inside the feature tile icons - Desktop */
    div[data-uid="Bf89AZnMxZBYaZEq"] svg {
        width: 3.6rem !important; /* 57.6px - reduced by 20% from 4.5rem (72px) for better animation */
        height: 3.6rem !important; /* 57.6px - reduced by 20% from 4.5rem (72px) for better animation */
        overflow: visible !important; /* Allow icon corners to extend outside for 3D effect */
        position: relative !important; /* Enable positioning for 3D effect */
    }
    
    /* Reduce padding in text section to remove white space - apply to all feature tiles */
    div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="Wsd2StElkyqZVDeQ"],
    div[data-uid="2GKaOBWvcAfgLtmk"] > div[data-uid="Wsd2StElkyqZVDeQ"] {
        padding: 1rem !important; /* Reduced from p-8 (2rem) to 1rem */
        flex: 1.2 !important; /* Reduced from 1.4 to balance with increased icon section */
        gap: 0 !important; /* Remove gap between text elements */
    }
    
    /* Remove white space between description text and "Fully Activated" text - apply to all */
    div[data-uid="Wsd2StElkyqZVDeQ"] p[data-uid="cDgnoLUba7g6Sfio"],
    div[data-uid="2GKaOBWvcAfgLtmk"] p[data-uid="cDgnoLUba7g6Sfio"] {
        margin-bottom: 0.5rem !important; /* Reduced from mb-6 (1.5rem) to 0.5rem to remove white space */
    }
    
    /* Ensure "Fully Activated" section has minimal top margin - apply to all */
    div[data-uid="cRhS1dqvoyiV8R6p"],
    div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="cRhS1dqvoyiV8R6p"] {
        margin-top: 0 !important; /* Remove top margin */
    }
}
/* سرعات مختلفة حسب الجهاز - 10x أسرع */
@media (max-width: 640px) {
    .partners-scroll {
        animation: partners-scroll 3s linear infinite;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .partners-scroll {
        animation: partners-scroll 4s linear infinite;
    }
}

@media (min-width: 1025px) {
    .partners-scroll {
        animation: partners-scroll 6s linear infinite;
    }
}

.animate-scroll-ltr {
    animation: scroll-ltr 40s linear infinite;
}

    .animate-scroll-rtl:hover,
    .animate-scroll-rtl-fast:hover,
    .animate-scroll-ltr:hover {
        animation-play-state: paused;
    }

.animate-shimmer {
    animation: shimmer 2s infinite;
    background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100% );
    background-size: 1000px 100%;
}
/* Smooth transitions */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
/* Button hover effects */
button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    button:active {
        transform: scale(0.95);
    }
/* Gradient text */
.gradient-text {
    background: linear-gradient(90deg, #FFFFFF 0%, #8B7BAF 25%, #6B5B95 50%, #8B7BAF 75%, #FFFFFF 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient 4s ease infinite;
}
/* Card hover effects */
.card-hover {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .card-hover:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
/* Glass effect */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Neon glow */
.neon-glow {
    box-shadow: 0 0 10px rgba(107, 91, 149, 0.5), 0 0 20px rgba(107, 91, 149, 0.3), 0 0 30px rgba(107, 91, 149, 0.2);
}
/* Selection */
::selection {
    background: var(--accent);
    color: white;
}

::-moz-selection {
    background: var(--accent);
    color: white;
}
/* Custom scrollbar for containers */
.custom-scroll::-webkit-scrollbar {
    height: 8px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
    border-radius: 10px;
}
/* Hide scrollbar for horizontal scroll on mobile */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
/* Line clamp utilities */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Hover lift effect */
.hover-lift {
    transition: all 0.3s ease;
}

    .hover-lift:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }
/* Gradient border */
.gradient-border {
    position: relative;
    background: white;
}

    .gradient-border::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 2px;
        background: linear-gradient(135deg, var(--primary), var(--accent), var(--primary-light));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }




@tailwind components;
@tailwind utilities;

@font-face {
    /* This font could not be included automatically because of legal reasons. Please add it manually or switch to another font */
    font-family: 'AlinmaDisplay';
    font-weight: normal;
    font-style: normal;
}

@font-face {
    /* This font could not be included automatically because of legal reasons. Please add it manually or switch to another font */
    font-family: 'AlinmaDisplay';
    font-weight: bold;
    font-style: normal;
}

@font-face {
    /* This font could not be included automatically because of legal reasons. Please add it manually or switch to another font */
    font-family: 'sarfont';
    font-weight: bold;
    font-style: normal;
}

@font-face {
    /* This font could not be included automatically because of legal reasons. Please add it manually or switch to another font */
    font-family: 'swiper-icons';
    font-weight: 400;
    font-style: normal;
}

@tailwind base;

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 222.2 47.4% 11.2%;
        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 222.2 47.4% 11.2%;
        --border: 214.3 31.8% 91.4%;
        --input: 214.3 31.8% 91.4%;
        --card: transparent;
        --card-foreground: 222.2 47.4% 11.2%;
        --primary: 222.2 47.4% 11.2%;
        --primary-foreground: 210 40% 98%;
        --secondary: 210 40% 96.1%;
        --secondary-foreground: 222.2 47.4% 11.2%;
        --accent: 210 40% 96.1%;
        --accent-foreground: 222.2 47.4% 11.2%;
        --destructive: 0 100% 50%;
        --destructive-foreground: 210 40% 98%;
        --ring: 215 20.2% 65.1%;
        --radius: 0.5rem;
    }

    .dark {
        --background: 224 71% 4%;
        --foreground: 213 31% 91%;
        --muted: 223 47% 11%;
        --muted-foreground: 215.4 16.3% 56.9%;
        --accent: 216 34% 17%;
        --accent-foreground: 210 40% 98%;
        --popover: 224 71% 4%;
        --popover-foreground: 215 20.2% 65.1%;
        --border: 216 34% 17%;
        --input: 216 34% 17%;
        --card: transparent;
        --card-foreground: 213 31% 91%;
        --primary: 210 40% 98%;
        --primary-foreground: 222.2 47.4% 1.2%;
        --secondary: 222.2 47.4% 11.2%;
        --secondary-foreground: 210 40% 98%;
        --destructive: 0 63% 31%;
        --destructive-foreground: 210 40% 98%;
        --ring: 216 34% 17%;
        --radius: 0.5rem;
    }
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
        font-feature-settings: "rlig" 1, "calt" 1;
    }
}

html.no-transitions *,
html.no-transitions *::before,
html.no-transitions *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-delay: -0.01ms !important;
    scroll-behavior: auto !important;
    display: none !important;
}

 .selected {
    outline: 2px solid #9c7dff !important;
    background-color: rgba(156, 125, 255, 0.5) !important;
}

.hovered-pre-selected {
    outline: 2px solid #9c7dff !important;
    background-color: rgba(213, 205, 249, 0.5) !important;
}

.inline-selected {
    outline: 2px dashed #9c7dff !important;
    background-color: transparent !important;
}

.inline-hovered-pre-selected {
    outline: 2px solid #9c7dff;
    background-color: rgba(213, 205, 249, 0.3);
}

.inline-locked {
    outline: 2px solid #9c7dff !important;
    background-color: rgba(213, 205, 249, 0.3) !important;
    position: relative;
}

    .inline-locked::before {
        content: 'Text linked to DB or code. Ask AI to edit.' !important;
        position: absolute !important;
        bottom: 100% !important;
        left: -2px !important;
        margin-bottom: 2px !important;
        background-color: #242424 !important;
        color: white !important;
        padding: 2px 6px !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        border-radius: 2px !important;
        pointer-events: none !important;
        z-index: 10000 !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
        font-family: system-ui, -apple-system, sans-serif !important;
    }


[dir="ltr"] .servicesTilesImgIcns {
    left: 25px !important;
    right: auto !important;
}

[dir="rtl"] .servicesTilesImgIcns {
    right: 25px !important;
    left: auto !important;
}

[dir="ltr"] .flex-direction-rowReverse {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .services-flex-direction-rowReverse {
    flex-direction: row-reverse !important;
}

[dir="ltr"] .services-flex-direction-rowReverse {
    flex-direction: row-reverse !important; /* For LTR: image section (second child) should be on left, so use row and swap order via CSS order property */
}

/* Reduce padding for Contact Us cards on all screen sizes to reduce white space */
div[data-uid="wGK6eLuNEmihKPu7"],
div[data-uid="GTAKtz2T2scOTUX6"] {
    padding: 1rem !important; /* 16px - reduced from p-6 sm:p-8 (24px/32px) */
}

/* For LTR: Move image section to left by using order property */
[dir="ltr"] .services-flex-direction-rowReverse > div[data-uid="Wsd2StElkyqZVDeQ"] {
    order: 2 !important; /* Text section goes to right */
}

[dir="ltr"] .services-flex-direction-rowReverse > div[data-uid="BPyhFWIhGqND9hee"] {
    order: 1 !important; /* Image section goes to left */
}

/* For RTL: Keep default order (text right, image left) */
[dir="rtl"] .services-flex-direction-rowReverse > div[data-uid="Wsd2StElkyqZVDeQ"] {
    order: 1 !important;
}

[dir="rtl"] .services-flex-direction-rowReverse > div[data-uid="BPyhFWIhGqND9hee"] {
    order: 2 !important;
}
[dir="rtl"] .filter-dropdowns-text-padding {
    padding-right: 2.75rem !important;
}

[dir="ltr"] .filter-dropdowns-text-padding {
    padding-left: 2.75rem !important;
}

/* ============================================
   MOBILE RESPONSIVE STYLES FOR SERVICES CARDS
   Daily Bookings and other service cards
   ============================================ */

/* Mobile - Services Cards Layout Fix */
@media (max-width: 768px) {
    /* ============================================
       MOBILE FONT WEIGHT REDUCTIONS - Fix Blurry Text
       ============================================
       Reduce font weights on mobile for better clarity and readability
       ============================================ */
    
    /* Reduce all heavy font weights on mobile */
    * {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        text-rendering: optimizeLegibility !important;
    }
    
    /* Typography system handles all font weights - no overrides needed */
    
    /* ============================================
       SERVICE CARDS ORDER - Mobile View Only
       ============================================
       Reorder services for mobile view:
       1. Buy & Rent Properties (currently 2nd child)
       2. Comprehensive Services (currently 1st child)
       3. Real Estate Marketing (currently 4th child)
       4. Auctions (currently 3rd child)
       5. Partial Ownership (currently 5th child)
       6. Daily Bookings (currently 6th child)
       ============================================ */
    
    /* Services grid container - enable flexbox ordering */
    div[data-uid="9VvCgrK9YA2DUKjw"] {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Reset all children order first */
    div[data-uid="9VvCgrK9YA2DUKjw"] > * {
        order: 0 !important;
    }
    
    /* 1. Buy & Rent Properties - 2nd child (div with house icon) */
    div[data-uid="9VvCgrK9YA2DUKjw"] > div:nth-child(2) {
        order: 1 !important;
    }
    
    /* 2. Comprehensive Services - 1st child (a tag with href to Services/Index) */
    div[data-uid="9VvCgrK9YA2DUKjw"] > a:nth-child(1)[href*="Services"] {
        order: 2 !important;
    }
    
    /* 3. Real Estate Marketing - 4th child (a tag with href to ServiceDetails) */
    div[data-uid="9VvCgrK9YA2DUKjw"] > a:nth-child(4)[href*="ServiceDetails"] {
        order: 3 !important;
    }
    
    /* 4. Auctions - 3rd child (div with gavel icon) */
    div[data-uid="9VvCgrK9YA2DUKjw"] > div:nth-child(3) {
        order: 4 !important;
    }
    
    /* 5. Partial Ownership - 5th child (div with users icon) */
    div[data-uid="9VvCgrK9YA2DUKjw"] > div:nth-child(5) {
        order: 5 !important;
    }
    
    /* 6. Daily Bookings - 6th child (div with calendar icon) */
    div[data-uid="9VvCgrK9YA2DUKjw"] > div:nth-child(6) {
        order: 6 !important;
    }

    .desktop-figate-powered-by {
        display: none;
    }

    .mobile-figate-powered-by {
        display: block;
    }

    /* ============================================
       ALL SECTION HEADINGS - Uniform 30px on mobile
       ============================================
       Using h2[data-uid] selectors (specificity 0,1,1) to beat Tailwind
       text-size classes (specificity 0,1,0) and enforce consistency.
       ============================================ */

    /* 1. Hero: "Discover Your Perfect Property Now" */
    h2[data-uid="MhNd4FnxiUbN7BN0"],
    h2[data-uid="MhNd4FnxiUbN7BN0"] span[data-uid="FQu2IiTVGr5xLQOX"],
    /* 2. "Explore Real Estate Projects" */
    h2[data-uid="huECz891Mu2JJMuW"],
    h2[data-uid="huECz891Mu2JJMuW"] span,
    /* 3. "Why Aqar360" */
    h2[data-uid="eKWoKHDWZI7aFAxz"],
    h2[data-uid="eKWoKHDWZI7aFAxz"] span,
    /* 4. "Success Partners" */
    h2[data-uid="3iFMhfxX3af6uoOG"],
    h2[data-uid="3iFMhfxX3af6uoOG"] span,
    /* 5. "Need Help?" */
    h2[data-uid="ZslsLgio5Ck9eeRn"],
    h2[data-uid="ZslsLgio5Ck9eeRn"] span {
        font-size: 30px !important; /* Uniform 30px across all section headings on mobile */
        font-weight: 700 !important; /* Bold weight on mobile */
        line-height: 1.3 !important;
    }

    /* Reduce margin-bottom on hero heading to reduce gap between title and description */
    h2[data-uid="MhNd4FnxiUbN7BN0"] {
        margin-bottom: 0.75rem !important; /* Reduced from mb-6 (1.5rem) to 0.75rem (12px) */
    }

    /* Typography system handles all font sizes and weights */
    /* Only layout and spacing rules below */
    
    /* ============================================
       HERO BADGE SPACING - Fix overlap with header
       ============================================
       Add space before "Saudi's first integrated real estate platform" badge
       to prevent overlap with hamburger menu and logo on mobile
       ============================================ */
    
    /* Hero section main container - add padding-top to create space from header */
    div[data-uid="5AlAIqcUzj9msPzW"],
    div[data-uid="5AlAIqcUzj9msPzW"].container {
        padding-top: 2rem !important; /* 32px - space from header on mobile */
        margin-top: 0 !important;
    }
    
    /* Hero section inner container - ensure proper spacing */
    div[data-uid="og8AVoFe08ViTDiz"],
    div[data-uid="og8AVoFe08ViTDiz"].max-w-7xl {
        padding-top: 0.5rem !important; /* 8px - additional spacing */
    }
    
    /* Hero section text container - reduce margin-top to reduce gap between badge and title */
    div[data-uid="PN52i7sW64Z1uFVN"],
    div[data-uid="PN52i7sW64Z1uFVN"].text-center {
        margin-top: 0.5rem !important; /* Reduced from 1rem (16px) to 0.5rem (8px) to reduce gap */
        padding-top: 0 !important;
    }
    
    /* Badge container - add margin-top to create space before it */
    div[data-uid="9yL5Jr19Vc3gF16y"],
    div[data-uid="9yL5Jr19Vc3gF16y"].inline-flex {
        margin-top: 4rem !important; /* 48px - enough space to clear the sticky navbar on mobile */
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important; /* Allow badge to use full available width */
        flex-wrap: nowrap !important; /* Keep icons and text on same row */
    }

    div[data-uid="9yL5Jr19Vc3gF16y"].partners-badge {
        margin-top: 1rem !important; /* 48px - extra space before badge on iPhone 12 Pro */
    }

    /* ============================================
       BADGE TEXT & ICONS - Consistent across ALL section badges
       ============================================ */

    /* Badge text - identical font size and weight on ALL badges (hero + section headers) */
    span[data-uid="F0Gr12oWgCbwUsRu"],    /* Hero badge */
    span[data-uid="fXjexe9VgHw4N2CC"] {   /* "Our Distinguished Services" section badge */
        font-size: 12px !important;     /* Uniform 12px across all badges */
        font-weight: 700 !important;    /* Bold - identical on all badges */
        line-height: 1.4 !important;    /* Consistent line-height */
        white-space: normal !important; /* Allow natural wrapping */
        text-align: center !important;
    }

    /* Section badge icon - match hero badge icon size (20px) */
    svg[data-uid="7dGHX3MzgTKnLxEk"] {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }

    /* Badge icons - identical size on both badges (override aqar360-blue-color shrinkage) */
    div[data-uid="9yL5Jr19Vc3gF16y"] svg[data-uid="RCWw7UsUDGmrNNVo"],
    div[data-uid="9yL5Jr19Vc3gF16y"] svg[data-uid="sX3ZztdLFMgfUJ2f"] {
        width: 20px !important;       /* Uniform 20px - same on both badges */
        height: 20px !important;      /* Uniform 20px - same on both badges */
        flex-shrink: 0 !important;    /* Prevent icons from shrinking */
        min-width: 20px !important;   /* Guarantee minimum size */
    }
    
    /* iPhone SE specific spacing (375px width) */
    @media (min-width: 375px) and (max-width: 389px) {
        /* Hero section main container - extra spacing for iPhone SE */
        div[data-uid="5AlAIqcUzj9msPzW"],
        div[data-uid="5AlAIqcUzj9msPzW"].container {
            padding-top: 2.5rem !important; /* 40px - extra space for iPhone SE */
        }
        
        /* Hero section text container - reduced spacing for iPhone SE */
        div[data-uid="PN52i7sW64Z1uFVN"],
        div[data-uid="PN52i7sW64Z1uFVN"].text-center {
            margin-top: 0.75rem !important; /* Reduced from 1.5rem to 0.75rem (12px) to reduce gap */
        }
        
        /* Badge container - extra spacing for iPhone SE */
        div[data-uid="9yL5Jr19Vc3gF16y"],
        div[data-uid="9yL5Jr19Vc3gF16y"].inline-flex {
            margin-top: 3rem !important; /* 56px - extra space before badge on iPhone SE */
        }

        div[data-uid="9yL5Jr19Vc3gF16y"].partners-badge {
            margin-top: 1rem !important; /* 48px - extra space before badge on iPhone SE */
        }
    }
    
    /* iPhone 12 Pro specific spacing (390px width) */
    @media (min-width: 390px) and (max-width: 428px) {
        /* Hero section main container - extra spacing for iPhone 12 Pro */
        div[data-uid="5AlAIqcUzj9msPzW"],
        div[data-uid="5AlAIqcUzj9msPzW"].container {
            padding-top: 2.5rem !important; /* 40px - extra space for iPhone 12 Pro */
        }
        
        /* Badge container - extra spacing for iPhone 12 Pro */
        div[data-uid="9yL5Jr19Vc3gF16y"],
        div[data-uid="9yL5Jr19Vc3gF16y"].inline-flex {
            margin-top: 3rem !important; /* 48px - extra space before badge on iPhone 12 Pro */
        }

        div[data-uid="9yL5Jr19Vc3gF16y"].partners-badge {
            margin-top: 1rem !important; /* 48px - extra space before badge on iPhone 12 Pro */
        }
    }
    
    /* ============================================
       MOBILE LAYOUT & SPACING ONLY
       ============================================
       Note: Font sizes and weights are handled by typography.css
       Only layout, spacing, and visual adjustments here
       ============================================ */
    
    /* Reduce icon container sizes for mobile view - Call Us and Email Us sections */
    div[data-uid="9BpcLLbwIeDsFqlQ"],
    div[data-uid="Ma9aVa6WauFE6C4g"] {
        width: 3rem !important; /* 48px - reduced from 64px (w-16) */
        height: 3rem !important; /* 48px - reduced from 64px (h-16) */
        min-width: 3rem !important;
        min-height: 3rem !important;
    }
    
    /* Reduce SVG icon sizes inside the containers for mobile view */
    div[data-uid="9BpcLLbwIeDsFqlQ"] svg,
    div[data-uid="Ma9aVa6WauFE6C4g"] svg {
        width: 20px !important; /* Reduced from 28px */
        height: 20px !important; /* Reduced from 28px */
    }
    
    /* Keep tiles stacked vertically on mobile, but icon and text in row within each tile */
    div[data-uid="4fQTh4iEMJVHxPE5"] {
        grid-template-columns: 1fr !important; /* Single column - tiles stacked vertically */
        gap: 0.75rem !important; /* Reduced gap for mobile */
    }
    
    /* Within each tile: icon and text in a row (horizontal) on mobile */
    div[data-uid="wGK6eLuNEmihKPu7"],
    div[data-uid="GTAKtz2T2scOTUX6"] {
        gap: 0.75rem !important; /* 12px - gap between icon and text */
        padding: 0.75rem !important; /* 12px - reduced padding for mobile */
        flex-direction: row !important; /* Icon and text side by side within tile */
        align-items: center !important; /* Center align items vertically */
        justify-content: flex-start !important; /* Align content to start */
    }
    
    /* Ensure title is visible and properly styled on mobile */
    p[data-uid="mXrfGy8OUgHG0k6o"],
    p[data-uid="YDZ5V0JNyXZ0rYvb"] {
        margin-bottom: 0.25rem !important; /* Reduced margin for mobile */
        display: block !important; /* Ensure title is visible */
    }
    
    /* Text container alignment for mobile - keep in row with icon */
    div[data-uid="zZakFPv4cYyrZdAF"],
    div[data-uid="KV4qZwaz1ggWcYRc"] {
        text-align: left !important; /* Left align text content for row layout */
        min-width: 0 !important; /* Allow text to shrink */
        flex: 1 !important; /* Take remaining space */
    }
    
    /* Email layout for mobile row layout */
    a[data-uid="3sRzjN9KYb247Ulu"].mobile-text-responsive {
        white-space: nowrap !important; /* Force single line */
        text-align: left !important; /* Left align email */
        display: block !important; /* Block display for better alignment */
        overflow: hidden !important; /* Hide overflow */
        text-overflow: ellipsis !important; /* Show ellipsis if too long */
    }
    
    /* Phone number layout for mobile view */
    a[data-uid="tq1UyMDcPIXo2iKL"] {
        white-space: nowrap !important; /* Force single line */
        text-align: left !important; /* Left align phone number */
        display: block !important; /* Block display for better alignment */
    }
    
    /* Typography system handles all input, textarea, and placeholder font sizes */
    
 
    
    /* Service cards: content-driven height — no fixed min-height */
    .svc-card,
    div[data-uid="OfzeFDGQoLLXFyf5"],
    a[data-uid="OfzeFDGQoLLXFyf5"],
    .grid > a[href*="Service"] {
        height: auto !important;
        min-height: unset !important;
    }

    /* Text Section - class-based selector (beats old data-uid rules) */
    .svc-card .svc-card-body {
        flex: 1 !important;
        padding: 8px 8px 8px 0 !important; /* Compact padding for mobile */
        min-width: 0 !important;
    }
    
    /* ============================================
       TILE LAYOUT - Typography handled by typography.css
       ============================================ */

    /* Image Section - Wider but shorter for mobile */
    /* Use parent + child selector for maximum specificity to override inline styles */
    div[data-uid="OfzeFDGQoLLXFyf5"] > div[data-uid="BPyhFWIhGqND9hee"],
    a[data-uid="OfzeFDGQoLLXFyf5"] > div[data-uid="BPyhFWIhGqND9hee"],
    a[href*="Services"] > div[data-uid="BPyhFWIhGqND9hee"],
    a[href*="ServiceDetails"] > div[data-uid="BPyhFWIhGqND9hee"],
    a[href*="Service"] > div[class*="flex-\\[0\\.6\\]"],
    div[data-uid="BPyhFWIhGqND9hee"] {
        flex: 0.45 !important; /* Increased from 0.35 to 0.45 for wider image section */
        min-width: 140px !important; /* Increased from 100px to 140px - wider */
        max-width: 150px !important; /* Increased from 115px to 150px - wider */
        width: auto !important; /* Allow flex to control width */
        overflow: hidden !important; /* Hide overflow to ensure clean edges */
        padding: 0 !important; /* Remove padding to allow image to fill full height */
        height: 100% !important; /* Make container take full height of tile (which is now shorter) */
        align-items: stretch !important; /* Stretch image container to full height */
        justify-content: stretch !important; /* Stretch content to fill container */
        display: flex !important; /* Ensure flex display */
    }

    /* Image inside the image section - Fill full height and cover the space like desktop */
    /* Use parent + child selector for maximum specificity to override inline styles */
    div[data-uid="OfzeFDGQoLLXFyf5"] > div[data-uid="BPyhFWIhGqND9hee"] > img,
    a[data-uid="OfzeFDGQoLLXFyf5"] > div[data-uid="BPyhFWIhGqND9hee"] > img,
    a[href*="Services"] > div[data-uid="BPyhFWIhGqND9hee"] > img,
    a[href*="ServiceDetails"] > div[data-uid="BPyhFWIhGqND9hee"] > img,
    a[href*="Service"] > div[class*="flex-\\[0\\.6\\]"] > img,
    div[data-uid="BPyhFWIhGqND9hee"] > img,
    div[data-uid="BPyhFWIhGqND9hee"] > img[data-uid="3If6Xd1NySb7iTlM"] {
        width: 100% !important; /* Fill full width of container */
        height: 100% !important; /* Fill full height of container */
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important; /* Cover the entire space, no white space - like desktop */
        object-position: center !important; /* Center the image */
        display: block !important; /* Ensure block display */
        flex-shrink: 0 !important; /* Prevent image from shrinking */
    }

    /* Card element spacing - class-based selectors */
    .svc-card-body h3.svc-card-title,
    .grid .svc-card-body h3.svc-card-title,
    .grid > * .svc-card-body h3.svc-card-title {
        margin-bottom: 4px !important; /* Tight gap between title and description */
    }

    .svc-card-body .svc-card-desc {
        margin-bottom: 4px !important; /* Tight gap between description and Discover More */
    }

    /* Discover More button */
    .svc-card-body .svc-card-action {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        margin-top: 2px !important;
    }
    
    /* Typography system handles all font sizes */

    /* Adjust icon sizes in image section - small for mobile */
    /* Target icons in all service cards - both div and a tags */
    div[data-uid="BPyhFWIhGqND9hee"] .servicesTilesImgIcns,
    a[href*="Services"] div[data-uid="BPyhFWIhGqND9hee"] .servicesTilesImgIcns,
    a[href*="Services"] .servicesTilesImgIcns {
        width: 24px !important;
        height: 24px !important;
    }

    div[data-uid="BPyhFWIhGqND9hee"] .servicesTilesImgIcns svg,
    a[href*="Services"] .servicesTilesImgIcns svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Adjust "Soon" and "Available Now" badges - ensure they're visible and not cut off */
    /* Target badges in all service cards - both div and a tags */
    div[data-uid="mabX7amgQjriVHwB"],
    div[data-uid="BPyhFWIhGqND9hee"] > div[class*="absolute"][class*="bottom"],
    a[href*="Services"] div[class*="absolute"][class*="bottom"][class*="bg-white"] {
        bottom: -10px !important; /* Half outside the image bottom edge */
        padding: 0.4rem 0.6rem !important; /* Reduced padding to match smaller font */
        white-space: nowrap !important; /* Prevent badge text from breaking */
        z-index: 10 !important; /* Ensure badge is visible above other elements */
        position: absolute !important; /* Ensure absolute positioning */
        /* left/transform handled by the more specific rule below — do NOT set here */
    }
    
    /* Typography system handles badge text sizes */
    
    /* Target the dot indicator inside badge */
    div[data-uid="mabX7amgQjriVHwB"] span[data-uid="P3oLOgASZyrTf7cT"],
    a[href*="Services"] div[class*="absolute"][class*="bottom"] span[class*="rounded-full"] {
        width: 0.5rem !important; /* Slightly smaller dot */
        height: 0.5rem !important; /* Slightly smaller dot */
    }

    /* Apply same fixes to other service cards if they have similar structure */
    /* Target cards with flex layout and similar structure - override inline styles */
    /* Include both div and a tags */
    .grid > div[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[1\\.4\\]"],
    .grid > div[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[1\\.4\\"][style],
    .grid > a[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[1\\.4\\]"],
    .grid > a[href*="Services"][class*="flex"] > div[class*="flex-\\[1\\.4\\]"] {
        flex: 3.5 !important; /* Adjusted to 3.5 - still provides good text space while allowing larger image section for badges */
        padding: 1rem !important;
        min-width: 0 !important;
    }

    .grid > div[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[0\\.6\\]"],
    .grid > div[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[0\\.6\\"][style*="min-width"],
    .grid > div[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[0\\.6\\"][style*="max-width"],
    .grid > a[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[0\\.6\\]"],
    .grid > a[href*="Services"][class*="flex"] > div[class*="flex-\\[0\\.6\\]"] {
        flex: 0.4 !important; /* Increased to 0.4 to ensure badges are fully visible */
        min-width: 115px !important; /* Increased to prevent badge cutoff */
        max-width: 130px !important; /* Increased to prevent badge cutoff */
        width: auto !important;
        overflow: visible !important; /* Ensure badges are not clipped */
        padding: 0.5rem !important; /* Increased padding to give badges more space */
    }

    .grid > div[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[0\\.6\\]"] > img,
    .grid > div[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[0\\.6\\]"] > img[style*="width"],
    .grid > div[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[0\\.6\\]"] > img[style*="height"],
    .grid > a[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[0\\.6\\]"] > img,
    .grid > a[href*="Services"][class*="flex"] > div[class*="flex-\\[0\\.6\\]"] > img {
        width: 105px !important; /* Increased to show badges properly */
        height: 95px !important; /* Increased proportionally */
        min-width: 105px !important;
        min-height: 95px !important;
        max-width: 105px !important;
        max-height: 95px !important;
    }
    
    /* Why Aqar360 feature tiles — compact image section on mobile */
    section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="BPyhFWIhGqND9hee"],
    section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] > div[data-uid="BPyhFWIhGqND9hee"],
    section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="BPyhFWIhGqND9hee"][style*="min-width"],
    section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="BPyhFWIhGqND9hee"][style*="max-width"] {
        flex: none !important;
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        height: 90px !important;
        min-height: 90px !important;
        max-height: 90px !important;
        align-self: flex-start !important;
        margin: 12px !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }
    
    /* RTL: Why Aqar360 section only */
    [dir="rtl"] section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="BPyhFWIhGqND9hee"],
    [dir="rtl"] section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] > div[data-uid="BPyhFWIhGqND9hee"],
    [dir="rtl"] section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="BPyhFWIhGqND9hee"][style*="min-width"],
    [dir="rtl"] section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="BPyhFWIhGqND9hee"][style*="max-width"] {
        margin: 12px !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Icon container inside Why Aqar360 tiles — fit within the 90px thumbnail */
    section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="Bf89AZnMxZBYaZEq"] {
        width: 90px !important;
        height: 90px !important;
        min-width: 90px !important;
        min-height: 90px !important;
        margin: 0 !important;
        border-radius: 16px !important;
    }
    
    /* SVG icon inside Why Aqar360 tile thumbnails */
    section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="Bf89AZnMxZBYaZEq"] svg {
        width: 2.5rem !important; /* 40px */
        height: 2.5rem !important; /* 40px */
    }
    
    /* Reduce padding in text section to remove white space - apply to all feature tiles */
    div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="Wsd2StElkyqZVDeQ"],
    div[data-uid="2GKaOBWvcAfgLtmk"] > div[data-uid="Wsd2StElkyqZVDeQ"] {
        padding: 0.25rem !important; /* Reduced from p-8 (2rem) to 1rem */
        flex: 1.2 !important; /* Reduced from 1.4 to balance with increased icon section */
        gap: 0 !important; /* Remove gap between text elements */
    }
    
    /* Description — clamp to 3 lines so all tiles stay the same height regardless of content */
    div[data-uid="Wsd2StElkyqZVDeQ"] p[data-uid="cDgnoLUba7g6Sfio"],
    div[data-uid="2GKaOBWvcAfgLtmk"] p[data-uid="cDgnoLUba7g6Sfio"] {
        margin-bottom: 0.5rem !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Min-height on Why Aqar360 tile card — all tiles match the tallest (3-line description) tile.
       Calculation: 90px image + 12px top margin + 12px bottom margin + ~20px "Fully Activated" row
       + 3 lines of description (~55px at 13px/1.4lh) + title (~20px) + padding ≈ 170px */
    section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] {
        align-items: stretch !important;
    }

    [dir="rtl"] section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] {
        min-height: 122px !important;
    }

    [dir="ltr"] section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] {
        min-height: 145px !important;
    }

    /* Text body inside tile — stretch to card height, content starts at top */
    section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="Wsd2StElkyqZVDeQ"] {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-self: stretch !important;   /* fill full card height */
    }

    /* "Fully Activated" — always pinned to bottom of tile via auto top margin */
    section[data-uid="GBy9ZNTc41uUt8eL"] div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="cRhS1dqvoyiV8R6p"] {
        margin-top: auto !important;
    }

    /* RTL: "Fully Activated" is left-aligned via inline style flex-start + row-reverse.
       No CSS override needed — handled directly in AqaryonHome.cshtml inline styles. */

    /* Ensure "Fully Activated" section has minimal top margin - apply to all */
    div[data-uid="cRhS1dqvoyiV8R6p"],
    div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="cRhS1dqvoyiV8R6p"] {
        margin-top: 0 !important; /* Remove top margin */
    }

    /* ============================================
       SERVICES CARDS - Slim mobile tiles
       ============================================
       Goal: small fixed image thumbnail on the left, compact text on the right,
       NO white space, card height = text content height only.
       ============================================ */

    /* Card wrapper: remove fixed 240px height */
    div[data-uid="9VvCgrK9YA2DUKjw"] > div,
    div[data-uid="9VvCgrK9YA2DUKjw"] > a {
        height: auto !important;
        min-height: unset !important;
        align-items: flex-start !important;
    }

    /* Image section: fixed 100×100 thumbnail — overrides inline style="min-width:220px; max-width:220px" */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="BPyhFWIhGqND9hee"] {
        position: relative !important; /* Badge positions relative to this box */
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
        overflow: visible !important; /* Allow badge to show outside container */
        flex: none !important;
        align-self: flex-start !important;
        margin: 7px !important;
        border-radius: 12px !important;
    }

    /* Image: fill the thumbnail square — overrides inline style="width:200px;height:180px;..." */
    div[data-uid="9VvCgrK9YA2DUKjw"] img[data-uid="3If6Xd1NySb7iTlM"] {
        width: 100px !important;
        height: 100px !important;
        min-width: 100px !important;
        min-height: 100px !important;
        max-width: 100px !important;
        max-height: 100px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        clip-path: inset(0 round 12px) !important; /* Clips 3D PNG render to 100px box */
    }

    /* Card icon: floats OUTSIDE the image boundary, matching desktop appearance.
       On desktop the icon overflows the top-left corner of the image area.
       Negative top/left values push it above & outside the image container
       (works because image container has overflow:visible). */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="G5uruqvGPgplacQ8"],
    div[data-uid="9VvCgrK9YA2DUKjw"] .servicesTilesImgIcns {
        display: flex !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        top: -6px !important;  /* Float above the image top edge */
        margin: 0 !important;
        border-radius: 7px !important;
    }
    /* LTR: float above top-left corner */
    [dir="ltr"] div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="G5uruqvGPgplacQ8"],
    [dir="ltr"] div[data-uid="9VvCgrK9YA2DUKjw"] .servicesTilesImgIcns {
        left: 0px !important;
        right: auto !important;
    }
    /* RTL: float above top-right corner */
    [dir="rtl"] div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="G5uruqvGPgplacQ8"],
    [dir="rtl"] div[data-uid="9VvCgrK9YA2DUKjw"] .servicesTilesImgIcns {
        right: 0px !important;
        left: auto !important;
    }
    /* SVG inside icon: scale down to 12px */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="G5uruqvGPgplacQ8"] svg,
    div[data-uid="9VvCgrK9YA2DUKjw"] .servicesTilesImgIcns svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Badge: centered horizontally, half outside image bottom.
       Uses triple data-uid chain (0,3,3 specificity) to beat the earlier high-specificity rule.
       Background is 80% transparent (rgba white), text remains fully opaque. */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="BPyhFWIhGqND9hee"] div[data-uid="mabX7amgQjriVHwB"] {
        position: absolute !important;
        bottom: -10px !important;           /* Half outside the bottom edge of the image */
        left: 50% !important;               /* Center horizontally within the 100px image box */
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: fit-content !important;
        transform: translateX(-50%) !important; /* Pull back by half own width to truly center */
        padding: 3px 8px !important;
        border-radius: 16px !important;
        white-space: nowrap !important;
        opacity: 1 !important;              /* Element itself fully visible */
        background-color: rgba(255, 255, 255, 0.2) !important; /* White bg 80% transparent */
        backdrop-filter: blur(4px) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        z-index: 10 !important;
    }
    /* Text label inside badge: fully opaque white text */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="BPyhFWIhGqND9hee"] div[data-uid="mabX7amgQjriVHwB"] span[data-uid="aqkIVRcUbRKtcf1p"] {
        opacity: 1 !important;
        color: #1a1a1a !important;          /* Black text on the transparent bg */
    }
    /* Keep the green/orange dot its original colour — do NOT override bg */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="BPyhFWIhGqND9hee"] div[data-uid="mabX7amgQjriVHwB"] span[data-uid="P3oLOgASZyrTf7cT"] {
        opacity: 1 !important;
    }
    /* RTL: centering is direction-neutral — same left:50% + translateX(-50%) applies */
    [dir="rtl"] div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="BPyhFWIhGqND9hee"] div[data-uid="mabX7amgQjriVHwB"] {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
    span[data-uid="aqkIVRcUbRKtcf1p"] {
        font-size: 10px !important;
        gap: 3px !important;
    }
    span[data-uid="aqkIVRcUbRKtcf1p"] span.w-3 {
        width: 6px !important;
        height: 6px !important;
        flex-shrink: 0 !important;
    }

    /* Text section: start content from top — no more vertical centering = no white space */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="Wsd2StElkyqZVDeQ"] {
        padding: 10px 8px 10px 0 !important; /* Reduced right padding to give text more horizontal room */
        justify-content: flex-start !important;
        align-self: flex-start !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Description: compact text */
    div[data-uid="9VvCgrK9YA2DUKjw"] p[data-uid="6CqieJwemX85PNSZ"] {
        font-size: 13px !important;
        margin-bottom: 8px !important;
        line-height: 1.4 !important;
    }

    /* "Discover More" link */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="Rj3iJIgSM9vQzrNq"] {
        font-size: 12px !important;
        gap: 4px !important;
    }
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="Rj3iJIgSM9vQzrNq"] svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* ============================================
       H3 CARD TITLES - Uniform 14px on mobile
       ============================================
       Services cards (9Pkz1JbnDQRrgA6t) AND Why Aqar360 cards (E0gKlVn3MX4UgT4a)
       both use text-2xl (24px). Set both to 14px so even long titles
       like "Comprehensive Services" fit on a single line.
       ============================================ */
    /* Card titles — now handled by .svc-card-title class (see end of file) */
    h3[data-uid="9Pkz1JbnDQRrgA6t"],
    h3[data-uid="E0gKlVn3MX4UgT4a"] {
        font-size: 17px !important;
        font-weight: 700 !important;
        margin-bottom: 0px !important;
        line-height: 1.3 !important;
    }

    /* ============================================
       HERO SECTION - Remove min-h-screen on mobile
       ============================================
       min-h-screen (100vh) forces the hero to fill the entire viewport,
       leaving a large dark empty gap below the filter card on mobile.
       Override to auto so the section height matches its content.
       ============================================ */
    section[data-uid="OExeBVZ98cNHm9n7"] {
        min-height: auto !important;
        padding-bottom: 32px !important; /* Reduce pb-12 (48px) → 32px on mobile */
    }

    /* ============================================
       SECTION SPACING REDUCTION - Mobile (≤768px)
       ============================================
       Sections using fixed py-24 (96px) have no responsive classes.
       Reduce to 40px top/bottom on mobile to remove excessive gaps.
       ============================================ */

    /* All sections - uniform 24px top/bottom padding on mobile */
    section[data-uid="PKD5KtdB37QpdTjr"],
    section[data-uid="GBy9ZNTc41uUt8eL"],
    section[data-uid="GeC7DYOZUjOpfGIc"],
    section[data-uid="WVahRfIGsrzMgHtk"],
    section[data-uid="b9KMFncaLwFLd4hq"],
    section[data-uid="r4lkGed1vo8rzbvw"] {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    /* Inner section header margins - reduce to 20px on mobile */
    div[data-uid="HBWn7XQVHlayspfk"],
    div[data-uid="MH8dBl8C3BxvPrK6"],
    div[data-uid="rFeAFoP22WfXQk88"],
    div[data-uid="0FddRZMl3wgYtxx9"] {
        margin-bottom: 20px !important;
    }

    /* Contact section inner header - reduce mb-16 (64px) to 20px on mobile */
    div[data-uid="LJpCFi8oNlZgADlD"] {
        margin-bottom: 20px !important;
    }

    /* Footer logo, description & social links — LTR: left aligned, RTL: right aligned */
    div[data-uid="5G5MgRIXYfwHqOz7"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* Stretch children to full width */
    }
    /* Logo container — full width so flex-start places logo on the left */
    div[data-uid="3QhUMCXHvQTCOQ3Q"] {
        display: flex !important;
        width: 100% !important;
        text-align: left !important;
    }

    [dir="ltr"] div[data-uid="3QhUMCXHvQTCOQ3Q"] {
        justify-content: flex-end !important;
    }
    [dir="rtl"] div[data-uid="3QhUMCXHvQTCOQ3Q"] {
        justify-content: flex-start !important;
    }

    [dir="ltr"] div[data-uid="Oqs70chlQRlbrmob"] {
        justify-content: flex-end !important;
    }
    [dir="rtl"] div[data-uid="Oqs70chlQRlbrmob"] {
        justify-content: flex-start !important;
    }

    
    /* Footer description text — LTR: left aligned */
    p[data-uid="zbhitQCRvNt83eG9"] {
        text-align: left !important;
        width: 100% !important;
    }
    /* Social icons container — full width so flex-start places icons on the left */
    div[data-uid="Oqs70chlQRlbrmob"] {
        display: flex !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    /* RTL overrides */
    [dir="rtl"] div[data-uid="3QhUMCXHvQTCOQ3Q"] {
        justify-content: flex-start !important;
        text-align: right !important;
    }
    [dir="rtl"] p[data-uid="zbhitQCRvNt83eG9"] {
        text-align: right !important;
    }
    [dir="rtl"] div[data-uid="Oqs70chlQRlbrmob"] {
        justify-content: flex-start !important;
    }

    /* "Send Message Now" — matches "Explore All Properties on Map" exactly on mobile.
       typography.css @media (max-width: 768px) reduces .font-black from 900 → 700,
       so both buttons render at 700 on mobile. We must match that — not override to 900. */
    button[data-uid="BEqZ8sYbKjjas1H4"] {
        font-size: 16px !important;   /* text-base (16px) — same as Explore button */
        font-weight: 700 !important;  /* 700 — matches what typography.css gives Explore button on mobile */
        padding-top: 16px !important; /* py-4 = 16px — same as Explore button on mobile */
        padding-bottom: 16px !important;
        gap: 8px !important;          /* gap-2 = 8px — same as Explore button on mobile */
        white-space: nowrap !important;
        transform: none !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    /* Span text = text-sm (14px), font-weight 700 — same as Explore button span */
    button[data-uid="BEqZ8sYbKjjas1H4"] span[data-uid="40qjPJEolMhyID5p"] {
        font-size: 14px !important;
        font-weight: 700 !important;
    }
    /* Icons = w-6 h-6 (24px) — same as Explore button on mobile */
    button[data-uid="BEqZ8sYbKjjas1H4"] svg {
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
    }

    /* Contact form inputs & textarea — compact size on mobile */
    section[data-uid="GeC7DYOZUjOpfGIc"] input,
    section[data-uid="GeC7DYOZUjOpfGIc"] textarea {
        font-size: 14px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* "920000360" phone number — reduce from text-2xl (24px) to text-lg (18px)
       to match email address size (text-lg on mobile) */
    a[data-uid="tq1UyMDcPIXo2iKL"] {
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    /* "Your Message" textarea — reduce height on mobile */
    section[data-uid="GeC7DYOZUjOpfGIc"] textarea[data-uid="TdiKeNuwuS9ReJVW"] {
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
    }

    /* Placeholder text — same compact size */
    section[data-uid="GeC7DYOZUjOpfGIc"] input::placeholder,
    section[data-uid="GeC7DYOZUjOpfGIc"] textarea::placeholder {
        font-size: 14px !important;
    }

    /* Badge inside Partners header - reduce mb-6 (24px) to 12px on mobile */
    div[data-uid="9yL5Jr19Vc3gF16y"] {
        margin-bottom: 12px !important;
    }

    /* Partners carousel - reduce pagination dots & swipe text margins on mobile */
    div[data-uid="jo78mpQbrsMDN3kV"] {
        margin-top: 12px !important; /* Reduce mt-6 (24px) → 12px */
    }
    div[data-uid="vFMty8clWe5X5V1D"] {
        margin-top: 8px !important; /* Reduce mt-4 (16px) → 8px */
    }
}

/* ============================================
   SECTION SPACING REDUCTION - Desktop (≥769px)
   ============================================
   Reduce py-24 (96px) to 64px on desktop for a tighter, cleaner layout.
   ============================================ */
@media (min-width: 769px) {
    section[data-uid="PKD5KtdB37QpdTjr"],
    section[data-uid="GBy9ZNTc41uUt8eL"],
    section[data-uid="GeC7DYOZUjOpfGIc"],
    section[data-uid="WVahRfIGsrzMgHtk"],
    section[data-uid="b9KMFncaLwFLd4hq"],
    section[data-uid="r4lkGed1vo8rzbvw"] {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    /* Inner section header margins - reduce mb-20 (80px) to 48px on desktop */
    div[data-uid="HBWn7XQVHlayspfk"],
    div[data-uid="MH8dBl8C3BxvPrK6"],
    div[data-uid="rFeAFoP22WfXQk88"] {
        margin-bottom: 48px !important;
    }

    /* Contact section inner header - reduce mb-16 (64px) to 40px on desktop */
    div[data-uid="LJpCFi8oNlZgADlD"] {
        margin-bottom: 40px !important;
    }
}

.aqar360-blue-color {
    color: #685e90 !important;
}

.desktop-figate-powered-by
{
    display:block;
}

.mobile-figate-powered-by {
    display: none;
}

/* Small Mobile - Further adjustments for very small screens */
@media (max-width: 480px) {

    .desktop-figate-powered-by {
        display: none;
    }

    .mobile-figate-powered-by {
        display: block;
    }

    /* Further increase text section */
    div [data-uid="Wsd2StElkyqZVDeQ"] {
        flex: 4.5 !important; /* Balanced for small screens while keeping badges visible */
    }

    /* Further reduce image section but ensure badges are visible */
    div[data-uid="BPyhFWIhGqND9hee"],
    div[data-uid="BPyhFWIhGqND9hee"][style*="min-width"],
    div[data-uid="BPyhFWIhGqND9hee"][style*="max-width"] {
        flex: 0.3 !important; /* Increased to ensure badges are fully visible on small screens */
        min-width: 90px !important; /* Increased to prevent badge cutoff */
        max-width: 105px !important; /* Increased to prevent badge cutoff */
        width: auto !important;
        overflow: visible !important; /* Ensure badges are not clipped */
        padding: 0.25rem !important; /* Add small padding to prevent badge cutoff */
    }

    /* Further reduce image size but keep badges visible */
    div[data-uid="BPyhFWIhGqND9hee"] > img,
    div[data-uid="BPyhFWIhGqND9hee"] > img[style*="width"],
    div[data-uid="BPyhFWIhGqND9hee"] > img[style*="height"],
    div[data-uid="BPyhFWIhGqND9hee"] > img[data-uid="3If6Xd1NySb7iTlM"] {
        width: 80px !important; /* Balanced size for badge visibility */
        height: 72px !important; /* Balanced size for badge visibility */
        min-width: 80px !important;
        min-height: 72px !important;
        max-width: 80px !important;
        max-height: 72px !important;
    }

    /* Further reduce text padding */
    div[data-uid="Wsd2StElkyqZVDeQ"] {
        padding: 0.75rem !important; /* Further reduced */
    }

    /* Typography system handles all font sizes for very small screens */

    /* Apply to other service cards */
    .grid > div[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[1\\.4\\]"] {
        flex: 4.5 !important; /* Balanced for small screens while keeping badges visible */
        padding: 0.75rem !important;
    }

    .grid > div[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[0\\.6\\]"],
    .grid > div[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[0\\.6\\"][style*="min-width"],
    .grid > div[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[0\\.6\\"][style*="max-width"] {
        flex: 0.3 !important; /* Increased to ensure badges are fully visible */
        min-width: 90px !important; /* Increased to prevent badge cutoff */
        max-width: 105px !important; /* Increased to prevent badge cutoff */
        width: auto !important;
        overflow: visible !important; /* Ensure badges are not clipped */
        padding: 0.25rem !important; /* Add small padding to prevent badge cutoff */
    }

    .grid > div[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[0\\.6\\]"] > img,
    .grid > div[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[0\\.6\\]"] > img[style*="width"],
    .grid > div[class*="flex"][class*="h-\\[240px\\]"] > div[class*="flex-\\[0\\.6\\]"] > img[style*="height"] {
        width: 80px !important; /* Balanced size for badge visibility */
        height: 72px !important; /* Balanced size for badge visibility */
        min-width: 80px !important;
        min-height: 72px !important;
        max-width: 80px !important;
        max-height: 72px !important;
    }
}

[dir="ltr"] .project-completion-bar {
    flex-direction: row-reverse;
}

/* ============================================
   SERVICE TILES - Height is content-driven
   ============================================
   Cards use height: auto so they shrink to fit their content.
   Class-based selectors are used for consistency (see .svc-card rules below).
   ============================================ */

/* Ensure description paragraphs are clamped to 3 lines */
div[data-uid="9VvCgrK9YA2DUKjw"] p[data-uid="6CqieJwemX85PNSZ"],
div[data-uid="9VvCgrK9YA2DUKjw"] a p[data-uid="6CqieJwemX85PNSZ"],
div[data-uid="Wsd2StElkyqZVDeQ"] p[data-uid="6CqieJwemX85PNSZ"] {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.625 !important;
    max-height: calc(1.625em * 3) !important;
}

/* Ensure flex container properly distributes space */
div[data-uid="Wsd2StElkyqZVDeQ"] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    flex: 1 1 auto !important;
}

/* Ensure title and button don't grow/shrink */
div[data-uid="Wsd2StElkyqZVDeQ"] h3 {
    flex-shrink: 0 !important;
}

div[data-uid="Wsd2StElkyqZVDeQ"] div[data-uid="Rj3iJIgSM9vQzrNq"] {
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

/* Description paragraph should take available space */
div[data-uid="Wsd2StElkyqZVDeQ"] p[data-uid="6CqieJwemX85PNSZ"] {
    flex: 1 1 auto !important;
    margin-bottom: 1.5rem !important;
}

/* ============================================
   MOBILE SERVICE CARD - Final white space fix
   ============================================
   Placed LAST in file to beat all previous rules by cascade order.
   ============================================ */
@media (max-width: 768px) {
    /* 1. Text section: auto height + content from top */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="Wsd2StElkyqZVDeQ"] {
        height: auto !important;
        justify-content: flex-start !important;
    }

    /* 2. Description: no flex-grow, no large margin-bottom */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="Wsd2StElkyqZVDeQ"] p[data-uid="6CqieJwemX85PNSZ"] {
        flex: none !important;
        margin-bottom: 6px !important;
    }

    /* 3. "Discover More" link: no margin-top:auto */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="Wsd2StElkyqZVDeQ"] div[data-uid="Rj3iJIgSM9vQzrNq"] {
        margin-top: 4px !important;
    }

    /* 4. Card height: content-driven — overrides all min-height rules */
    div[data-uid="9VvCgrK9YA2DUKjw"] > div,
    div[data-uid="9VvCgrK9YA2DUKjw"] > a {
        height: auto !important;
        min-height: unset !important;
    }
}

/* md grid: last row with one card — center it (same width as one column; gap-6 = 1.5rem) */
@media (min-width: 768px) {
    section[data-uid="PKD5KtdB37QpdTjr"] div[data-uid="9VvCgrK9YA2DUKjw"] > *:nth-child(odd):last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: 100%;
        max-width: calc((100% - 1.5rem) / 2);
    }
}

/* ============================================
   SERVICE CARD - DEFINITIVE FINAL OVERRIDES
   ============================================
   Uses chained class selectors (.svc-grid .svc-card ...)
   Specificity (0,0,3,0) beats all prior data-uid rules (0,0,2,2).
   Placed LAST in file — wins by both specificity AND cascade order.
   ============================================ */
@media (max-width: 768px) {

    /* CARD: content-driven height, top-align all children so every image
       starts at the same vertical position regardless of text length */
    .svc-grid .svc-card {
        height: auto !important;
        min-height: unset !important;
        max-height: none !important;
        overflow: visible !important; /* Let badge/icon overflow card's overflow-hidden */
        align-items: flex-start !important; /* All children (image + body) align to top */
    }

    /* LTR service tiles — uniform min-height to match tallest tile (4-line description)
       Calculation: title(22px) + 4×desc-line(73px) + action(18px) + padding(8px) ≈ 121px
       Using 140px to comfortably fit 4 lines with spacing. */
    [dir="ltr"] section[data-uid="PKD5KtdB37QpdTjr"] .svc-grid .svc-card {
        min-height: 130px !important;
    }

    /* IMAGE SECTION: fixed 100×100 thumbnail, don't stretch to card height.
       position:relative = badge positions relative to this 100px box.
       overflow:visible = badge is not clipped. */
    .svc-grid .svc-card .svc-card-image {
        position: relative !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
        flex: none !important;
        align-self: flex-start !important;
        overflow: visible !important; /* Badge must not be clipped */
    }

    /* IMAGE: fill the thumbnail, border-radius clips the image corners instead */
    .svc-grid .svc-card .svc-card-image img {
        width: 100% !important;
        height: 100% !important;
        min-width: unset !important;
        min-height: unset !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        border-radius: 12px !important; /* Rounded corners directly on img */
    }

    /* TEXT SECTION: flex column so "Discover More" can be pinned to bottom */
    .svc-grid .svc-card .svc-card-body {
        display: flex !important;
        flex-direction: column !important;
        align-self: stretch !important; /* Stretch body to full card height */
        justify-content: flex-start !important;
        flex: 1 !important;
        min-width: 0 !important;
        padding: 6px 3px 6px 0 !important; /* Compact padding — overrides p-8 (32px) and 1rem rules */
    }

    /* TITLE: consistent 17px — unified by h3.svc-card-title rule at end of file */
    .svc-grid .svc-card .svc-card-body h3.svc-card-title {
        font-size: 17px !important;
        font-weight: 700 !important;
        margin-bottom: 2px !important;
        line-height: 1.3 !important;
        flex-shrink: 0 !important;
    }

    /* DESCRIPTION: fixed size — do NOT flex-grow, let margin-top:auto on action do the pushing */
    .svc-grid .svc-card .svc-card-body .svc-card-desc {
        flex: none !important;
        flex-shrink: 0 !important;
        margin-bottom: 0px !important;
    }

    /* DISCOVER MORE: always pinned to bottom — auto margin absorbs all leftover space */
    .svc-grid .svc-card .svc-card-body .svc-card-action {
        margin-top: auto !important;
        flex-shrink: 0 !important;
    }
}

/* ============================================
   MOBILE TYPOGRAPHY - Unified class-based system
   ============================================
   Single source of truth for ALL card text sizes on mobile.
   Applies to BOTH service cards AND Why Aqar360 cards
   since both now share the same CSS classes.

   Classes in HTML:
     .svc-card-title  → h3 on service + Why Aqar360 cards
     .svc-card-desc   → p description on service + Why Aqar360 cards
     .svc-card-action → "Discover More" link on service cards
   ============================================ */
@media (max-width: 768px) {

    /* ALL CARD TITLES — 17px, bold, uniform across ALL sections
       ─────────────────────────────────────────────────────────────
       typography.css uses  .grid h3.text-lg / .grid > * h3.text-xl
       which has specificity (0,2,1) and was beating h3.svc-card-title (0,1,1).
       Fix: add .grid context so our selectors also reach (0,2,1).
       newHome.css loads AFTER typography.css → wins by cascade order.
       Three selectors cover every possible parent structure:
         1. h3.svc-card-title          → standalone (not in a grid)
         2. .grid h3.svc-card-title    → direct grid child
         3. .grid > * h3.svc-card-title → nested inside a grid cell
    ─────────────────────────────────────────────────────────────── */
    h3.svc-card-title,
    .grid h3.svc-card-title,
    .grid > * h3.svc-card-title {
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin-bottom: 0px !important;
    }

    /* ALL CARD DESCRIPTIONS — 13px, consistent line height */
    .svc-card-desc {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin-bottom: 0px !important;
    }

    /* ALL CARD ACTION LINKS — 12px */
    .svc-card-action {
        font-size: 12px !important;
        margin-top: 0px !important;
    }
    .svc-card-action svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* ============================================
   SERVICE CARD (DIV TYPE) — IMAGE CONTAINER FIX
   ============================================
   Rule at ~line 3906 targets div[data-uid="2GKaOBWvcAfgLtmk"] image containers
   and forces height:100%, align-self:stretch, min-width:140px — overriding
   the 100px thumbnail for <div>-wrapped service cards (tiles 2, 3, etc.).
   This 3-level data-uid chain has specificity (0,3,3) vs (0,2,2) → wins.
   ============================================ */
@media (max-width: 768px) {
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="2GKaOBWvcAfgLtmk"] div[data-uid="BPyhFWIhGqND9hee"] {
        position: relative !important;
        flex: none !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
        align-self: flex-start !important; /* Stay at top — no stretching */
        overflow: visible !important;
        margin: 12px !important;
        border-radius: 12px !important;
        padding: 0 !important;
    }
}

/* ============================================================
   DESKTOP SERVICE CARDS — Badge & Icon overrides (≥769px)
   Mirrors the mobile treatment: badge centered at bottom with
   80% transparent background, icon moved to the left corner.
   ============================================================ */
@media (min-width: 769px) {

    /* Card text body: balanced padding */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="Wsd2StElkyqZVDeQ"] {
        padding: 0.9rem 1.25rem !important;
    }

    /* Spacing between title, description and button */
    div[data-uid="9VvCgrK9YA2DUKjw"] h3[data-uid="9Pkz1JbnDQRrgA6t"] {
        margin-bottom: 0.35rem !important;
    }
    div[data-uid="9VvCgrK9YA2DUKjw"] p[data-uid="6CqieJwemX85PNSZ"] {
        margin-bottom: 0.5rem !important;
    }

    /* 0. Image container: balanced size — not too big, not too cramped */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="BPyhFWIhGqND9hee"] {
        position: relative !important;
        flex: none !important;
        width: 210px !important;
        min-width: 210px !important;
        max-width: 210px !important;
        height: auto !important;
        min-height: 150px !important;
        max-height: 195px !important;
        align-self: stretch !important;
        overflow: visible !important;   /* badge can peek out below */
        border-radius: 12px !important;
    }
    div[data-uid="HB4ccfmGH67rpFpf"] {
       border-bottom-left-radius: 1.5rem !important;
    }
    
    /* 0a. Image sits naturally inside container (like mobile) with space around it */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="BPyhFWIhGqND9hee"] img {
        width: auto !important;
        height: auto !important;
        max-width: 95% !important;      /* Small white space margin on sides */
        max-height: 90% !important;     /* Small white space margin on top/bottom */
        min-width: unset !important;
        min-height: unset !important;
        object-fit: contain !important; /* Natural proportions, no cropping */
        border-radius: 0 !important;
        clip-path: none !important;
    }

    /* 1. Card: overflow visible so badge can peek out; align-items stretch so image fills height */
    div[data-uid="9VvCgrK9YA2DUKjw"] > div.svc-card,
    div[data-uid="9VvCgrK9YA2DUKjw"] > a.svc-card {
        overflow: visible !important;
        align-items: stretch !important; /* Image container grows with card height */
    }

    /* 2. Badge: centered horizontally, half outside image bottom, transparent bg */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="BPyhFWIhGqND9hee"] div[data-uid="mabX7amgQjriVHwB"] {
        position: absolute !important;
        bottom: -14px !important;                           /* Half outside the image bottom edge */
        left: 50% !important;                               /* Center horizontally */
        right: auto !important;
        transform: translateX(-50%) !important;             /* Pull back by half badge width */
        margin: 0 !important;
        width: fit-content !important;
        white-space: nowrap !important;
        padding: 4px 12px !important;
        border-radius: 20px !important;
        background-color: rgba(255, 255, 255, 0.2) !important; /* 80% transparent white */
        backdrop-filter: blur(4px) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        opacity: 1 !important;
        z-index: 10 !important;
    }

    /* 2a. Badge text: black and fully opaque */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="BPyhFWIhGqND9hee"] div[data-uid="mabX7amgQjriVHwB"] span[data-uid="aqkIVRcUbRKtcf1p"] {
        color: #1a1a1a !important;
        opacity: 1 !important;
    }

    /* 2b. Dot indicator: keep original green/orange colour */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="BPyhFWIhGqND9hee"] div[data-uid="mabX7amgQjriVHwB"] span[data-uid="P3oLOgASZyrTf7cT"] {
        opacity: 1 !important;
    }

    /* 3. Icon: LTR → top-left corner of the image, anchored inside image container */
    [dir="ltr"] div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="G5uruqvGPgplacQ8"],
    [dir="ltr"] div[data-uid="9VvCgrK9YA2DUKjw"] .servicesTilesImgIcns {
        position: absolute !important;
        top: -10px !important;    /* Inside image, near top edge */
        left: 0rem !important;   /* Left corner */
        right: auto !important;
        width: 48px !important;     /* Slightly smaller than desktop default (80px) */
        height: 48px !important;
    }

    /* 3. Icon: RTL → top-right corner of the image */
    [dir="rtl"] div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="G5uruqvGPgplacQ8"],
    [dir="rtl"] div[data-uid="9VvCgrK9YA2DUKjw"] .servicesTilesImgIcns {
        position: absolute !important;
        top: -10px !important;
        right: 0rem !important;
        left: auto !important;
        width: 48px !important;
        height: 48px !important;
    }

    /* 3a. Icon SVG: scale down to fit the smaller icon box */
    div[data-uid="9VvCgrK9YA2DUKjw"] div[data-uid="G5uruqvGPgplacQ8"] svg,
    div[data-uid="9VvCgrK9YA2DUKjw"] .servicesTilesImgIcns svg {
        width: 24px !important;
        height: 24px !important;
    }
}

/* ============================================================
   PARTNER CAROUSEL — Reduce desktop tile size
   The card is JS-generated so we override via ID selectors.
   ============================================================ */
@media (min-width: 769px) {
    /* Narrow the overall carousel so the card looks compact */
    div[data-uid="9unYicBCOzgdmvWB"] {
        max-width: 680px !important;
    }

    /* Reduce inner card padding */
    #partnerPortfoliosContainer .bg-white {
        padding: 1.25rem !important;
    }

    /* Reduce partner image height */
    #partnerPortfoliosContainer img.object-cover {
        height: 200px !important;
        max-height: 200px !important;
    }

    /* Reduce stats grid padding */
    #partnerPortfoliosContainer .grid .bg-gradient-to-br {
        padding: 0.75rem !important;
    }

    /* Reduce font sizes inside tile */
    #partnerPortfoliosContainer h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.25rem !important;
    }
    #partnerPortfoliosContainer .grid .text-2xl,
    #partnerPortfoliosContainer .grid .text-3xl {
        font-size: 1.25rem !important;
    }

    /* Reduce spacing between sections in tile */
    #partnerPortfoliosContainer .w-full.max-w-2xl {
        margin-bottom: 0.75rem !important;
    }
    #partnerPortfoliosContainer .grid.grid-cols-2 {
        margin-bottom: 0.75rem !important;
        gap: 0.5rem !important;
    }
}

/* ============================================================
   AQARYON HOME — Desktop button font consistency
   Normalizes ALL page buttons to font-weight: 700 with crisp
   antialiased rendering. font-black (900) caused blurry text
   on Search, Explore Map, and Contact Submit buttons.
   All major CTA buttons are locked to 18px / 700.
   Smaller utility buttons keep their size but gain 700 + smoothing.
   Desktop only (min-width: 769px) — mobile is untouched.
   ============================================================ */
@media (min-width: 769px) {

    /* ── 1. Rent / Buy toggle buttons ─────────────────────── */
    .buy-rent-toggle-btn {
        font-size: 18px !important;
        font-weight: 700 !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    /* ── 2. Search button ─────────────────────────────────── */
    button[data-uid="4tSzQB7KHbxWPdd1"] {
        font-size: 18px !important;
        font-weight: 700 !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    button[data-uid="4tSzQB7KHbxWPdd1"] span[data-uid="04HfVwVGH1XZ5kOM"] {
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    /* ── 3. Explore All Properties on Map button ──────────── */
    button[data-uid="GnFFESC99K7jzY8v"] {
        font-size: 18px !important;
        font-weight: 700 !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    button[data-uid="GnFFESC99K7jzY8v"] span[data-uid="nSbNETWAXXiuXOHv"] {
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    /* ── 4. Contact Form "Send Message Now" button ────────── */
    button[data-uid="BEqZ8sYbKjjas1H4"] {
        font-size: 18px !important;
        font-weight: 700 !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    button[data-uid="BEqZ8sYbKjjas1H4"] span[data-uid="40qjPJEolMhyID5p"] {
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    /* ── 5. Partner carousel "View Profile" button ────────── */
    /*    Already font-bold (700); add smoothing for consistency */
    .view-profile-btn {
        font-weight: 700 !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    /* ── 6. New-projects carousel card "Details" button ──── */
    /*    Small utility button — keep compact size, fix smoothing */
    #newProjectsCarouselWrapper button {
        font-weight: 700 !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   Partner Carousel — arrows outside the card (desktop only)
   The Tailwind negative-offset classes (-left-16 / -right-16) may
   not be in the purged build, so we enforce positioning via CSS.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    /* Default (LTR): prev arrow sits 56px outside the LEFT card edge,
                      next arrow sits 56px outside the RIGHT card edge */
    #prevPartnerBtn {
        left: -56px !important;
        right: auto !important;
    }

    #nextPartnerBtn {
        right: -56px !important;
        left: auto !important;
    }

    /* RTL override: flip sides */
    [dir="rtl"] #prevPartnerBtn {
        right: -56px !important;
        left: auto !important;
    }

    [dir="rtl"] #nextPartnerBtn {
        left: -56px !important;
        right: auto !important;
    }

    .svc-card-badge {
        top: -10px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   Service Cards — fix border-radius clipping during hover
   ─────────────────────────────────────────────────────────
   Root cause: the card uses transition-all + overflow:hidden.
   The child icon uses backdrop-blur-md (GPU composite layer).
   GPU-composited children can escape a parent's overflow:hidden
   when the parent is ALSO GPU-composited (known Chrome bug).
   Fix: keep the card off the GPU compositing layer (no transform),
   override transition-all to exclude border-radius, and
   directly round the absolute overlay to prevent corner bleed.
   ═══════════════════════════════════════════════════════════ */
.svc-card,
.svc-card:hover,
.svc-card:focus {
    border-radius: 1.8rem !important;
    /* Override Tailwind's transition-all — explicitly list only
       the properties we need to animate. This prevents border-radius
       from being part of the transition (eliminates corner flash). */
    transition-property: box-shadow, border-color, color, background-color, opacity !important;
}

/* The full-card hover gradient overlay (absolute inset-0) must
   also carry the same border-radius so its corners never bleed
   past the card's rounded edges, even during opacity transition. */
.svc-card > div.absolute.inset-0 {
    border-radius: 1.5rem !important;
}

/* Clip the image corners direction-aware so the card's outer
   rounded corners stay intact on hover without clipping the
   absolutely-positioned icon badge.
   Apply overflow:hidden + border-radius to the <img> only
   (not the container), so the badge is never cut off.
   LTR → image is on the LEFT  → round the left corners.
   RTL → image is on the RIGHT → round the right corners. */
[dir="ltr"] .svc-card .svc-card-image {
    overflow: visible !important;
}
[dir="ltr"] .svc-card .svc-card-image img {
    overflow: hidden !important;
    border-top-left-radius: 1.5rem !important;
    border-bottom-left-radius: 1.5rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

[dir="rtl"] .svc-card .svc-card-image {
    overflow: visible !important;
}
[dir="rtl"] .svc-card .svc-card-image img {
    overflow: hidden !important;
    border-top-right-radius: 1.5rem !important;
    border-bottom-right-radius: 1.5rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.w-300 {
    width: 300px;
}