a:hover {
    text-decoration: underline;
    text-decoration-color: transparent;
    /* hide default underline */
    text-underline-offset: 4px;
    /* spacing below text */
    text-decoration: underline;
    scale: 1.05;
    transition: text-decoration-color 300ms ease, scale 200ms ease;
}

:root {
    --maroon: #9b1f28;
    --maroon-dark: #7a1a20;
    --offwhite: #0b0c0d;
    /* used in light mode for text */
}

/* LIGHT / DARK mode defaults handled via .light and .dark on <html> */
html {
    color-scheme: dark light;
}

html.dark, body.dark {
    --bg-1: linear-gradient(180deg, #0b0c0d 0%, #0e0f10 100%);
    --text: #fbfbfc;
    --muted: #cfcfd2;
    --glass: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.04);
    --overlay: rgba(0, 0, 0, 0.6);
}

html.light, body.light {
    --bg-1: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
    --text: #0b0c0d;
    --muted: #6b7280;
    --glass: rgba(10, 10, 10, 0.03);
    --card-border: rgba(0, 0, 0, 0.06);
    --overlay: rgba(255, 255, 255, 0.6);
}

html, body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg-1);
    /* background: #ad2d2c !important; */
    color: var(--text);
    scroll-behavior: smooth;
    transition: background-color 300ms ease, color 300ms ease;
}

.maroon-glow {
    text-shadow: 0 6px 30px rgba(155, 31, 40, 0.14);
}

.gradient-border {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.gradient-border::after {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, rgba(155, 31, 40, 0.12), rgba(0, 0, 0, 0.02), rgba(155, 31, 40, 0.12));
    filter: blur(12px);
    z-index: -1;
    animation: glow 6s linear infinite;
}

@keyframes glow {
    0% {
        transform: translateX(-10%)
    }

    50% {
        transform: translateX(10%)
    }

    100% {
        transform: translateX(-10%)
    }
}

.glass {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border: 1px solid var(--card-border);
}

.shimmer {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    background-size: 200% 100%;
    animation: shimmer 4s linear infinite;
}

.focus-outline:focus {
    outline: 3px solid rgba(155, 31, 40, 0.18);
    outline-offset: 2px;
}


.tilt {
    transition: transform 450ms cubic-bezier(.2, .9, .2, 1), box-shadow 450ms;
    transform-origin: center;
}

.tilt:hover {
    transform: translateY(-6px) rotateX(0.6deg) rotateY(-0.6deg) scale(1.01);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.hero-radial {
    background: radial-gradient(800px 300px at 10% 20%, rgba(155, 31, 40, 0.06), transparent 10%),
        radial-gradient(600px 200px at 90% 80%, rgba(255, 255, 255, 0.02), transparent 12%);
}

.muted {
    color: var(--muted);
}

/* toggle button visuals */
.toggle {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    gap: 4px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.toggle .knob {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    transition: transform 220ms ease;
}

html.dark .toggle {
    background: rgba(255, 255, 255, 0.06);
}

html.light .toggle {
    background: rgba(0, 0, 0, 0.06);
}

html.light .toggle .knob {
    transform: translateX(18px);
    background: white;
}

html.dark .toggle .knob {
    transform: translateX(0);
    background: white;
}

/* Preloader container */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
    /* smooth fade */
}

/* Prevent scroll while loading */
body.loading {
    overflow: hidden;
}

/* New loader animation */
.loader {
    width: 40px;
    aspect-ratio: 1;
    --c: linear-gradient(rgb(173, 45, 44) 0 0);
    --m: radial-gradient(farthest-side, rgb(173, 45, 44) 92%, #0000);
    background:
        var(--m) center /12px 12px,
        var(--c) left 50% top -20px/8px 16px,
        var(--c) left 50% bottom -20px/8px 16px,
        var(--c) top 50% left -20px/16px 8px,
        var(--c) top 50% right -20px/16px 8px;
    background-repeat: no-repeat;
    animation:
        l18-1 1.5s infinite,
        l18-2 1.5s infinite;
}

@keyframes l18-1 {

    30%,
    70% {
        background-position:
            center,
            left 50% top calc(50% - 8px),
            left 50% bottom calc(50% - 8px),
            top 50% left calc(50% - 8px),
            top 50% right calc(50% - 8px)
    }
}

@keyframes l18-2 {
    0%, 40% {
        transform: rotate(0)
    }

    60%, 100% {
        transform: rotate(90deg)
    }
}


.text-glow {
    text-shadow: 0 0 10px rgba(188, 42, 42, 0.7);
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
    #testimonials .glass {
        padding: 1.5rem;
    }

    #testimonials .relative.h-\[500px\] {
        height: 700px;
    }
}

.carousel-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    background-size: cover;
    background-position: center;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-controls {
    bottom: 100px;
}

.carousel-indicator.active {
    background-color: #fff;
    transform: scale(1.2);
}

.carousel-arrow {
    background-color: #AD2D2C;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.carousel-arrow:hover {
    background-color: rgba(139, 0, 0, 0.8);
}

@keyframes pulse-slow {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.1;
    }
}

@keyframes pulse-slower {
    0%, 100% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.05;
    }
}

.animate-pulse-slow {
    animation: pulse-slow 8s ease-in-out infinite;
}

.animate-pulse-slower {
    animation: pulse-slower 12s ease-in-out infinite;
}

.custom-video-controls {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.relative:hover .custom-video-controls {
    opacity: 1;
}

#videoOverlay {
    opacity: 1;
}

#galleryVideo.playing~#videoOverlay {
    opacity: 0;
    pointer-events: none;
}

.text-glow {
    text-shadow: 0 0 10px rgba(188, 42, 42, 0.7);
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
    #testimonials .glass {
        padding: 1.5rem;
    }

    #testimonials .relative.h-\[500px\] {
        height: 700px;
    }
}


@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

@keyframes float-slow {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

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

@keyframes float-delayed {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

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

@keyframes float-delayed-2 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-18px) rotate(-5deg);
    }
}

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

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

.animate-float-delayed {
    animation: float-delayed 10s ease-in-out infinite 2s;
}

.animate-float-delayed-2 {
    animation: float-delayed-2 9s ease-in-out infinite 1s;
}

.glass-effect {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

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

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

@keyframes progress {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out forwards;
}

.animate-progress {
    animation: progress 10s linear forwards;
}