html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    width: 100%;
    margin: 0;
    padding: 0;
}
/* Base Resets & Global Behavior */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Custom Scrollbar for better UI Experience */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #10B981;
}

/* Fix for animation origins on mobile menu */
.origin-top {
    transform-origin: top;
}

/* Utilities for slow pulse */
@keyframes pulse-slow {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}
.animate-pulse-slow {
    animation: pulse-slow 6s ease-in-out infinite;
}

/* Input Auto-fill overrides for dark/light themes */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #F8FAFC inset !important;
    -webkit-text-fill-color: #0B3C5D !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Optional custom selection color if class misses */
::selection {
    background-color: #10B981;
    color: white;
}

/* Hero Slider CSS */
.hero-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    animation: slideFade 9s infinite;
}

.slide-1 { animation-delay: 0s; }
.slide-2 { animation-delay: 3s; }
.slide-3 { animation-delay: 6s; }

@keyframes slideFade {
    0% { opacity: 0; transform: translateY(30px) scale(0.95); z-index: 20; }
    5%, 28% { opacity: 1; transform: translateY(0) scale(1); z-index: 20; }
    33.33% { opacity: 0; transform: translateY(-30px) scale(0.95); z-index: 20; }
    34%, 100% { opacity: 0; transform: translateY(30px) scale(0.95); z-index: 0; }
}

/* Marquee CSS */
.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 25s linear infinite;
}

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