html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
/* ✅ AestheticSalon Preloader */
@media (prefers-reduced-motion: reduce) {
    #as-preloader * {
        animation: none !important;
        transition: none !important;
    }
}

:root {
    --as-total: 2600ms;
    --as-letters: 1400ms;
    --as-uline: 900ms;
    --as-logo-delay: 220ms;
    --as-logo-in: 260ms;
    --as-logo-pop: 600ms;
}

/* bloom */
#as-preloader .as-bloom {
    background: radial-gradient(60% 60% at 50% 30%, rgba(217,70,239,.20), transparent 70%), radial-gradient(60% 60% at 48% 70%, rgba(236,72,153,.14), transparent 70%);
    filter: blur(28px);
    animation: as-pulse 2.4s ease-in-out infinite;
}

@keyframes as-pulse {
    0%,100% {
        opacity: .22;
        transform: scale(1);
    }

    50% {
        opacity: .52;
        transform: scale(1.04);
    }
}

/* logo */
#as-logo {
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 10px rgba(217,70,239,.18));
    animation: as-logo-in var(--as-logo-in) ease forwards var(--as-logo-delay), as-logo-pop var(--as-logo-pop) ease-out forwards calc(var(--as-logo-delay) + var(--as-logo-in));
}

@keyframes as-logo-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }

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

@keyframes as-logo-pop {
    0% {
        transform: scale(1);
    }

    60% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
    }
}

/* letters */
#as-preloader .as-letter {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(14px) scale(.98);
    display: inline-block;
    will-change: transform, opacity, filter;
    animation: as-letter-in .45s cubic-bezier(.2,.6,.2,1) forwards;
}

@keyframes as-letter-in {
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

/* underline draw */
#as-underline .line {
    stroke-dasharray: 560;
    stroke-dashoffset: 560;
    animation: as-draw var(--as-uline) ease-out forwards;
    animation-delay: calc(var(--as-letters) / 1000 * 1s);
    filter: drop-shadow(0 0 8px rgba(255,255,255,.25));
}

@keyframes as-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* spark glide */
#as-underline .spark {
    opacity: 0;
    transform: translateX(0) translateY(10px);
    animation: as-spark-move var(--as-uline) cubic-bezier(.2,.7,.2,1) forwards, as-spark-in .2s ease forwards;
    animation-delay: calc(var(--as-letters) / 1000 * 1s), calc(var(--as-letters) / 1000 * 1s);
}

@keyframes as-spark-in {
    to {
        opacity: 1;
    }
}

@keyframes as-spark-move {
    to {
        transform: translateX(540px) translateY(10px);
    }
}
select, option {
    background-color: black !important;
    color: white !important;
}

/* Hide horizontal scrollbar but keep scrolling */
.no-scrollbar {
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
}

    .no-scrollbar::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
#heroSlider .hero-slide.is-active {
    opacity: 1 !important;
}

/* Texture (same vibe as your overlays) */
.sot-gridline {
    background-image: radial-gradient(ellipse at top, rgba(255,255,255,0.07) 0%, transparent 55%), repeating-linear-gradient(90deg, transparent 0, transparent 56px, rgba(255,255,255,0.03) 56px, rgba(255,255,255,0.03) 57px);
    opacity: .12;
}
@keyframes eventSlide {
    0% {
        transform: translateX(110%);
    }

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

/* one pass slide across */
@keyframes slideAcross {
    0% {
        transform: translateX(110%);
        opacity: 0.0;
    }

    8% {
        opacity: 1;
    }

    100% {
        transform: translateX(-110%);
        opacity: 1;
    }
}

@keyframes vsCardIn {
    0% {
        transform: translateZ(0) scale(0.92);
        opacity: 0;
    }

    100% {
        transform: translateZ(0) scale(1.00);
        opacity: 1;
    }
}

@keyframes logoIn {
    0% {
        transform: scale(0.85);
        opacity: 0;
    }

    100% {
        transform: scale(1.00);
        opacity: 1;
    }
}


.runEventAnim {
    animation: slideAcross 5s linear 0s 1;
}

@keyframes twinkleStar {
    0%, 100% {
        opacity: .28;
        transform: scale(.9);
    }

    25% {
        opacity: .75;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.18);
    }

    75% {
        opacity: .62;
        transform: scale(1.02);
    }
}

@keyframes starPulse {
    0%, 100% {
        opacity: .25;
        transform: scale(.85) rotate(0deg);
    }

    50% {
        opacity: .95;
        transform: scale(1.18) rotate(12deg);
    }
}

@keyframes shootAcross1 {
    0% {
        opacity: 0;
        transform: rotate(-18deg) translate3d(0,0,0);
    }

    8% {
        opacity: .95;
    }

    30% {
        opacity: .95;
    }

    45% {
        opacity: 0;
        transform: rotate(-18deg) translate3d(1200px, 260px, 0);
    }

    100% {
        opacity: 0;
        transform: rotate(-18deg) translate3d(1200px, 260px, 0);
    }
}

@keyframes shootAcross2 {
    0% {
        opacity: 0;
        transform: rotate(-24deg) translate3d(0,0,0);
    }

    10% {
        opacity: .9;
    }

    28% {
        opacity: .9;
    }

    42% {
        opacity: 0;
        transform: rotate(-24deg) translate3d(1320px, 320px, 0);
    }

    100% {
        opacity: 0;
        transform: rotate(-24deg) translate3d(1320px, 320px, 0);
    }
}

@keyframes shootAcross3 {
    0% {
        opacity: 0;
        transform: rotate(-12deg) translate3d(0,0,0);
    }

    8% {
        opacity: .85;
    }

    24% {
        opacity: .85;
    }

    38% {
        opacity: 0;
        transform: rotate(-12deg) translate3d(1120px, 180px, 0);
    }

    100% {
        opacity: 0;
        transform: rotate(-12deg) translate3d(1120px, 180px, 0);
    }
}

.sot-shine::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,transparent 0%,rgba(255,255,255,.10) 18%,transparent 36%);
    transform: translateX(-45%);
    opacity: .22;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .login-left,
    .right-side {
        min-height: auto;
        padding: 24px;
    }

    .login-panel {
        max-width: 100%;
    }

    .brand-row {
        margin-bottom: 40px;
    }

    .image-card {
        height: 420px;
        border-radius: 22px;

    }
}

@media (max-width: 575.98px) {
    .login-left {
        padding: 22px 18px;
    }

    .welcome-title {
        font-size: 1.7rem;
    }

    .remember-row {
        align-items: flex-start;
        flex-direction: column;
    }
}