:root {
    --color-navy: 1 8 45;
    --color-blue: 37 99 235;
    --color-gold: 217 119 6;
    --color-primary: 30 58 138;
    --color-secondary: 249 115 22;
}

.theme-lavender {
    --color-navy: 46 16 101;
    --color-blue: 139 92 246;
    --color-gold: 236 72 153;
    --color-primary: 88 28 135;
    --color-secondary: 192 38 211;
}

.theme-teal {
    --color-navy: 2 44 34;
    --color-blue: 20 184 166;
    --color-gold: 234 179 8;
    --color-primary: 15 118 110;
    --color-secondary: 16 185 129;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.panel.active {
    flex-grow: 3 !important;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.panel.active .active-brightness {
    filter: brightness(100%);
}

.panel.active .active-content {
    opacity: 1;
    transform: translateY(0);
}

.panel.active .inactive-label {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .panel.active {
        flex-grow: 10 !important;
    }
}

.text-gradient {
    background: linear-gradient(to right, rgb(var(--color-primary)), rgb(var(--color-blue)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hover-card {
    transition: all 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

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

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

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

.hover\:play-state-paused:hover {
    animation-play-state: paused;
}

@keyframes vertical-scroll {
    0% {
        transform: translateY(0);
    }

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

.animate-scroll-vertical {
    animation: vertical-scroll 20s linear infinite;
}

.animate-scroll-vertical:hover {
    animation-play-state: paused;
}

@keyframes bounce-slow {

    0%,
    100% {
        transform: translateY(-5%);
    }

    50% {
        transform: translateY(5%);
    }
}

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

.filter-grayscale {
    filter: grayscale(100%);
}

.mask-gradient {
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

#mobile-menu {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

#mobile-menu.open {
    max-height: 500px;
    opacity: 1;
}

.h-15 {
    height: 68px;
}

@media (min-width: 1536px) {
    .container {
        max-width: 1300px !important;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1500px !important;
    }
}


/* ------ What's new animation start------ */


/* Vertical Scroll Animation */
@keyframes vertical-scroll {
    0% {
        transform: translateY(0);
    }

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

    /* Adjust based on content height */
}

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

/* Pause on Hover */
.group:hover .animate-scroll-vertical {
    animation-play-state: paused;
}

/* ------ What's new animation end------ */