/* Elephant Color - Complete Widget Styles (Tailwind-compatible) */

/* ========================================
   1. CSS VARIABLES & BASE
   ======================================== */
:root {
    --ec-accent: #ec4899;
    --ec-dark: #0a0a0a;
    --ec-light: #f5f5f7;
    --ec-zinc-50: #fafafa;
    --ec-zinc-950: #09090b;
}

/* Reset Elementor container margins */
.elementor-section.elementor-section-full_width,
.elementor-section.elementor-section-stretched {
    padding: 0 !important;
    margin: 0 !important;
}

.elementor-column-gap-no .elementor-column {
    padding: 0 !important;
}

.elementor-widget-container {
    padding: 0 !important;
}

/* ========================================
   2. TAILWIND UTILITIES (Essential)
   ======================================== */

/* Display */
.flex {
    display: flex !important;
}

.grid {
    display: grid !important;
}

.block {
    display: block !important;
}

.hidden {
    display: none !important;
}

.inline-block {
    display: inline-block !important;
}

/* Flexbox */
.flex-col {
    flex-direction: column !important;
}

.flex-row {
    flex-direction: row !important;
}

.items-center {
    align-items: center !important;
}

.items-start {
    align-items: flex-start !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

/* Gap */
.gap-2 {
    gap: 0.5rem !important;
}

.gap-4 {
    gap: 1rem !important;
}

.gap-6 {
    gap: 1.5rem !important;
}

.gap-8 {
    gap: 2rem !important;
}

.gap-12 {
    gap: 3rem !important;
}

.gap-16 {
    gap: 4rem !important;
}

.gap-24 {
    gap: 6rem !important;
}

/* Grid */
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

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

/* Position */
.relative {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

.fixed {
    position: fixed !important;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0 !important;
}

.top-0 {
    top: 0 !important;
}

.right-0 {
    right: 0 !important;
}

.bottom-0 {
    bottom: 0 !important;
}

.left-0 {
    left: 0 !important;
}

.z-0 {
    z-index: 0 !important;
}

.z-10 {
    z-index: 10 !important;
}

.z-20 {
    z-index: 20 !important;
}

.z-50 {
    z-index: 50 !important;
}

/* Sizing */
.w-full {
    width: 100% !important;
}

.h-full {
    height: 100% !important;
}

.min-h-\[300px\] {
    min-height: 300px !important;
}

.min-h-\[350px\] {
    min-height: 350px !important;
}

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

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

.min-h-\[500px\] {
    min-height: 500px !important;
}

.min-h-\[600px\] {
    min-height: 600px !important;
}

.h-\[50vh\] {
    height: 50vh !important;
}

.h-\[85vh\] {
    height: 85vh !important;
}

.h-\[450px\] {
    height: 450px !important;
}

.max-h-\[800px\] {
    max-height: 800px !important;
}

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

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

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

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

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

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

/* Spacing */
.p-4 {
    padding: 1rem !important;
}

.p-6 {
    padding: 1.5rem !important;
}

.p-8 {
    padding: 2rem !important;
}

.p-10 {
    padding: 2.5rem !important;
}

.p-12 {
    padding: 3rem !important;
}

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

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

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

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

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

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

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

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

.py-40 {
    padding-top: 10rem;
    padding-bottom: 10rem !important;
}

.pt-8 {
    padding-top: 2rem !important;
}

.pt-12 {
    padding-top: 3rem !important;
}

.pt-24 {
    padding-top: 6rem !important;
}

.pb-12 {
    padding-top: 3rem !important;
}

.pb-32 {
    padding-bottom: 8rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 0.75rem !important;
}

.mb-4 {
    margin-bottom: 1rem !important;
}

.mb-6 {
    margin-bottom: 1.5rem !important;
}

.mb-8 {
    margin-bottom: 2rem !important;
}

.mb-10 {
    margin-bottom: 2.5rem !important;
}

.mb-12 {
    margin-bottom: 3rem !important;
}

.mb-16 {
    margin-bottom: 4rem !important;
}

.mb-20 {
    margin-bottom: 5rem !important;
}

.mb-24 {
    margin-bottom: 6rem !important;
}

.mt-4 {
    margin-top: 1rem !important;
}

.mt-6 {
    margin-top: 1.5rem !important;
}

.mt-8 {
    margin-top: 2rem !important;
}

/* Typography */
.text-xs {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
}

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

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

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

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

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

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

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

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

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

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

.text-\[10rem\] {
    font-size: 10rem !important;
    line-height: 1 !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-bold {
    font-weight: 700 !important;
}

.font-black {
    font-weight: 900 !important;
}

.uppercase {
    text-transform: uppercase !important;
}

.italic {
    font-style: italic !important;
}

.tracking-tight {
    letter-spacing: -0.025em !important;
}

.tracking-tighter {
    letter-spacing: -0.05em !important;
}

.tracking-wide {
    letter-spacing: 0.025em !important;
}

.tracking-widest {
    letter-spacing: 0.1em !important;
}

.tracking-\[0\.2em\] {
    letter-spacing: 0.2em !important;
}

.tracking-\[0\.3em\] {
    letter-spacing: 0.3em !important;
}

.leading-none {
    line-height: 1 !important;
}

.leading-tight {
    line-height: 1.25 !important;
}

.leading-relaxed {
    line-height: 1.625 !important;
}

.leading-\[0\.9\] {
    line-height: 0.9 !important;
}

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

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
}

/* Colors */
.text-white {
    color: white !important;
}

.text-black {
    color: black !important;
}

.text-\[\#ec4899\] {
    color: #ec4899 !important;
}

.text-gray-200 {
    color: #e5e7eb !important;
}

.text-gray-300 {
    color: #d1d5db !important;
}

.text-gray-400 {
    color: #9ca3af !important;
}

.text-gray-500 {
    color: #6b7280 !important;
}

.text-gray-600 {
    color: #4b5563 !important;
}

.text-gray-700 {
    color: #374151 !important;
}

.text-white\/60 {
    color: rgba(255, 255, 255, 0.6) !important;
}

.text-white\/80 {
    color: rgba(255, 255, 255, 0.8) !important;
}

.text-white\/90 {
    color: rgba(255, 255, 255, 0.9) !important;
}

.text-white\/\[0\.05\] {
    color: rgba(255, 255, 255, 0.05) !important;
}

.text-white\/20 {
    color: rgba(255, 255, 255, 0.2) !important;
}

.fill-current {
    fill: currentColor !important;
}

/* Backgrounds */
.bg-black {
    background-color: black !important;
}

.bg-white {
    background-color: white !important;
}

.bg-transparent {
    background-color: transparent !important;
}

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

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

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

.bg-zinc-50 {
    background-color: #fafafa !important;
}

.bg-zinc-950 {
    background-color: #09090b !important;
}

.bg-gray-50 {
    background-color: #f9fafb !important;
}

.bg-gray-100 {
    background-color: #f3f4f6 !important;
}

.bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.bg-white\/70 {
    background-color: rgba(255, 255, 255, 0.7) !important;
}

.bg-white\/90 {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

.bg-black\/40 {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

.bg-black\/50 {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.bg-black\/60 {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

.bg-black\/80 {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.bg-\[\#25D366\] {
    background-color: #25D366 !important;
}

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

/* Gradients */
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops)) !important;
}

.from-black\/80 {
    --tw-gradient-from: rgba(0, 0, 0, 0.8);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important;
}

.from-black\/90 {
    --tw-gradient-from: rgba(0, 0, 0, 0.9);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important;
}

.via-black\/20 {
    --tw-gradient-via: rgba(0, 0, 0, 0.2);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, transparent) !important;
}

.via-black\/40 {
    --tw-gradient-via: rgba(0, 0, 0, 0.4);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, transparent) !important;
}

.to-transparent {
    --tw-gradient-to: transparent !important;
}

/* Borders */
.border {
    border-width: 1px !important;
}

.border-t {
    border-top-width: 1px !important;
}

.border-gray-200 {
    border-color: #e5e7eb !important;
}

.border-gray-700 {
    border-color: #374151 !important;
}

.border-gray-800 {
    border-color: #1f2937 !important;
}

.border-white\/5 {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.border-white\/10 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.border-white\/20 {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.border-transparent {
    border-color: transparent !important;
}

/* Border Radius */
.rounded-lg {
    border-radius: 0.5rem !important;
}

.rounded-xl {
    border-radius: 0.75rem !important;
}

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

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

.rounded-full {
    border-radius: 9999px !important;
}

.rounded-t-\[3rem\] {
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem !important;
}

.rounded-b-\[3rem\] {
    border-bottom-left-radius: 3rem;
    border-bottom-right-radius: 3rem !important;
}

/* Effects */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px) !important;
}

.backdrop-blur-md {
    backdrop-filter: blur(12px) !important;
}

.backdrop-blur-xl {
    backdrop-filter: blur(24px) !important;
}

.opacity-0 {
    opacity: 0 !important;
}

.opacity-40 {
    opacity: 0.4 !important;
}

.opacity-60 {
    opacity: 0.6 !important;
}

.opacity-70 {
    opacity: 0.7 !important;
}

.opacity-80 {
    opacity: 0.8 !important;
}

.opacity-100 {
    opacity: 1 !important;
}

.grayscale {
    filter: grayscale(1) !important;
}

.contrast-125 {
    filter: contrast(1.25) !important;
}

/* Transforms */
.transform {
    transform: var(--tw-transform) !important;
}

.translate-x-full {
    transform: translateX(100%) !important;
}

.translate-x-0 {
    transform: translateX(0) !important;
}

.-translate-x-1\/2 {
    transform: translateX(-50%) !important;
}

.-translate-y-1\/2 {
    transform: translateY(-50%) !important;
}

.-translate-y-2 {
    transform: translateY(-0.5rem) !important;
}

.-translate-y-1 {
    transform: translateY(-0.25rem) !important;
}

.scale-110 {
    transform: scale(1.1) !important;
}

/* Overflow */
.overflow-hidden {
    overflow: hidden !important;
}

.overflow-x-hidden {
    overflow-x: hidden !important;
}

/* Object Fit */
.object-cover {
    object-fit: cover !important;
}

.object-contain {
    object-fit: contain !important;
}

/* Visibility */
.pointer-events-none {
    pointer-events: none !important;
}

.pointer-events-auto {
    pointer-events: auto !important;
}

.select-none {
    user-select: none !important;
}

/* Cursor */
.cursor-pointer {
    cursor: pointer !important;
}

/* Transitions */
.transition {
    transition-property: all !important;
}

.transition-all {
    transition-property: all !important;
}

.transition-colors {
    transition-property: color, background-color, border-color !important;
}

.transition-transform {
    transition-property: transform !important;
}

.transition-opacity {
    transition-property: opacity !important;
}

.duration-300 {
    transition-duration: 300ms !important;
}

.duration-500 {
    transition-duration: 500ms !important;
}

.duration-600 {
    transition-duration: 600ms !important;
}

.duration-700 {
    transition-duration: 700ms !important;
}

.duration-1000 {
    transition-duration: 1000ms !important;
}

.ease-out {
    transition-timing-function: ease-out !important;
}

/* Appearance */
.appearance-none {
    appearance: none !important;
}

/* Animations */
.animate-bounce {
    animation: bounce 1s infinite !important;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-marquee {
    animation: marquee 30s linear infinite !important;
}

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

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

/* Whitespace */
.whitespace-nowrap {
    white-space: nowrap !important;
}

/* ========================================
   3. RESPONSIVE UTILITIES
   ======================================== */
@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

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

    .md\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

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

    .md\:col-span-12 {
        grid-column: span 12 / span 12 !important;
    }

    .md\:flex-row {
        flex-direction: row !important;
    }

    .md\:block {
        display: block !important;
    }

    .md\:w-\[480px\] {
        width: 480px !important;
    }

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

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

    .md\:p-12 {
        padding: 3rem !important;
    }

    .md\:text-xl {
        font-size: 1.25rem !important;
    }

    .md\:text-2xl {
        font-size: 1.5rem !important;
    }

    .md\:text-3xl {
        font-size: 1.875rem !important;
    }

    .md\:text-4xl {
        font-size: 2.25rem !important;
    }

    .md\:text-5xl {
        font-size: 3rem !important;
    }

    .md\:text-6xl {
        font-size: 3.75rem !important;
    }

    .md\:text-7xl {
        font-size: 4.5rem !important;
    }

    .md\:text-8xl {
        font-size: 6rem !important;
    }

    .md\:text-right {
        text-align: right !important;
    }

    .md\:gap-8 {
        gap: 2rem !important;
    }

    .md\:gap-12 {
        gap: 3rem !important;
    }

    .md\:gap-16 {
        gap: 4rem !important;
    }

    .md\:h-16 {
        height: 4rem !important;
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

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

    .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

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

    .lg\:col-span-5 {
        grid-column: span 5 / span 5 !important;
    }

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

    .lg\:col-span-7 {
        grid-column: span 7 / span 7 !important;
    }

    .lg\:flex-row {
        flex-direction: row !important;
    }

    .lg\:w-1\/2 {
        width: 50% !important;
    }

    .lg\:items-center {
        align-items: center !important;
    }

    .lg\:text-5xl {
        font-size: 3rem !important;
    }

    .lg\:text-6xl {
        font-size: 3.75rem !important;
    }

    .lg\:text-7xl {
        font-size: 4.5rem !important;
    }

    .lg\:min-h-\[600px\] {
        min-height: 600px !important;
    }
}

/* ========================================
   4. WIDGET-SPECIFIC STYLES
   ======================================== */

.bento-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.05em !important;
    line-height: 1.1 !important;
    text-transform: none !important;
}

/* Parallax BG (for Bento cards) */
.parallax-bg {
    position: absolute !important;
    top: -15% !important;
    left: -15% !important;
    width: 130% !important;
    height: 130% !important;
    min-width: 130% !important;
    min-height: 130% !important;
    object-fit: cover !important;
    max-width: none !important;
    max-height: none !important;
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), filter 1s ease !important;
    will-change: transform;
    z-index: 0;
}

/* Spotlight effect */
.spotlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(236, 72, 153, 0.15), transparent 40%);
}

.interactive-card:hover .spotlight {
    opacity: 1;
}

.interactive-card:hover .parallax-bg {
    filter: grayscale(0) !important;
}

/* Reveal animations */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Testimonial cards */
.testimonial-card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Three.js container */
#three-bg {
    pointer-events: none;
}

/* Liquid title gradient */
.liquid-title {
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
}

/* Group hover states */
.group:hover .group-hover\:grayscale-0 {
    filter: grayscale(0) !important;
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1 !important;
}

.group:hover .group-hover\:opacity-70 {
    opacity: 0.7 !important;
}

.group:hover .group-hover\:bg-transparent {
    background-color: transparent !important;
}

.group:hover .group-hover\:backdrop-blur-none {
    backdrop-filter: none !important;
}

.group:hover .group-hover\:-translate-y-2 {
    transform: translateY(-0.5rem) !important;
}

.group:hover .group-hover\:translate-x-2 {
    transform: translateX(0.5rem) !important;
}

.group:hover .group-hover\:scale-110 {
    transform: scale(1.1) !important;
}

.group:hover .group-hover\:text-white {
    color: white !important;
}

.group:hover .group-hover\:text-white\/80 {
    color: rgba(255, 255, 255, 0.8) !important;
}

.group:hover .group-hover\:text-white\/90 {
    color: rgba(255, 255, 255, 0.9) !important;
}

.group:hover .group-hover\:text-\[\#ec4899\] {
    color: #ec4899 !important;
}

.group:hover .group-hover\:w-24 {
    width: 6rem !important;
}

.group:hover .group-hover\:shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Hover states */
.hover\:text-white:hover {
    color: white !important;
}

.hover\:text-black:hover {
    color: black !important;
}

.hover\:text-gray-400:hover {
    color: #9ca3af !important;
}

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

.hover\:bg-\[\#ec4899\]:hover {
    background-color: #ec4899 !important;
}

.hover\:bg-\[\#25D366\]:hover {
    background-color: #25D366 !important;
}

.hover\:bg-white:hover {
    background-color: white !important;
}

.hover\:bg-black:hover {
    background-color: black !important;
}

.hover\:bg-gray-100:hover {
    background-color: #f3f4f6 !important;
}

.hover\:border-\[\#ec4899\]:hover {
    border-color: #ec4899 !important;
}

.hover\:border-\[\#25D366\]:hover {
    border-color: #25D366 !important;
}

.hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.hover\:shadow-2xl:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.hover\:-translate-y-1:hover {
    transform: translateY(-0.25rem) !important;
}

.hover\:translate-x-2:hover {
    transform: translateX(0.5rem) !important;
}

.hover\:scale-110:hover {
    transform: scale(1.1) !important;
}

.hover\:grayscale-0:hover {
    filter: grayscale(0) !important;
}

.hover\:opacity-100:hover {
    opacity: 1 !important;
}

/* Focus states */
.focus\:outline-none:focus {
    outline: none !important;
}

.focus\:border-\[\#ec4899\]:focus {
    border-color: #ec4899 !important;
}

.focus\:bg-\[\#222\]:focus {
    background-color: #222 !important;
}

/* Hero video sizing */
.hero-video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

/* Noise overlay */
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Section shadow */
.shadow-section {
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.3);
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
    font-family: 'Inter', sans-serif;
}

/* Lucide icons */
[data-lucide] {
    display: inline-block;
}

/* Base font */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Placeholder color */
::placeholder {
    color: #4b5563;
}

/* ========================================
   5. FIXES FOR ELEMENTOR EDITOR
   ======================================== */
.elementor-editor-active .ec-hero-section,
.elementor-editor-active section {
    min-height: 200px;
}

.elementor-editor-active .reveal-up,
.elementor-editor-active .reveal-scale,
.elementor-editor-active .testimonial-card {
    opacity: 1 !important;
    transform: none !important;
}

/* ========================================
   6. MOBILE OPTIMIZATIONS
   ======================================== */
@media (max-width: 767px) {


    /* Fix title overlapping with logo on mobile */
    .ec-hero-section {
        min-height: 100vh !important;
        /* Stable height for mobile */
        z-index: 10 !important;
        isolation: isolate;
        /* Prevents unexpected blending with video background */
    }

    .ec-hero-section .ec-hero-content {
        padding-top: 100px !important;
        /* Spacing for the fixed logo */
    }

    .ec-hero-section h1,
    .ec-hero-section h2,
    .ec-hero-section .hero-title {
        font-size: 2.25rem !important;
        /* text-4xl equivalent */
        line-height: 1.1 !important;
        margin-bottom: 1.5rem !important;
    }

    /* Very Small Mobiles */
    @media (max-width: 480px) {
        #logo-container {
            height: 80px !important;
        }

        #logo-container.scrolled {
            height: 50px !important;
        }

        .ec-hero-section .ec-hero-content {
            padding-top: 80px !important;
        }

        .ec-hero-section h1,
        .ec-hero-section h2,
        .ec-hero-section .hero-title {
            font-size: 1.85rem !important;
            /* Smaller titles for small screens */
        }
    }

    .ec-hero-section p {
        font-size: 1.125rem !important;
        /* text-lg */
        margin-top: 1rem !important;
    }

    /* FAQ Mobile Toggle */
    .faq-item.mobile-hidden {
        display: none !important;
    }

    .faq-show-more-btn {
        width: 100%;
        cursor: pointer;
    }

    /* Form mobile consistency */
    input[type="date"],
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select {
        height: 3.5rem !important;
        /* py-4 equivalent */
        width: 100% !important;
    }

    textarea {
        width: 100% !important;
    }

    /* Ensure date picker is consistent */
    input[type="date"] {
        min-height: 3.5rem !important;
        display: flex !important;
        align-items: center !important;
    }
}