:root {
    --grad-primary: linear-gradient(90deg, #2cb5e3 0%, #6ec3e7 100%);
}

html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

[data-aos] {
    overflow-x: hidden;
}

.glass {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dark .glass {
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(12px);
}

::-webkit-scrollbar {
    display: none;
}

.tab-active {
    background: var(--grad-primary);
    color: #fff;
}

.tab .tab-active:hover {
    color: inherit !important;
    cursor: default !important;
    transform: none !important;
    box-shadow: none !important;
}

select option:hover {
    background-color: #2CB5E3;
    color: white;
}

select option:checked {
    background-color: #2CB5E3;
    color: white;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #000000 !important;
    transition: background-color 5000s ease-in-out 0s;
}

.dark input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #111827 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
}

.bg-decor {
    opacity: 0.2;
    background-attachment: fixed;
}

.dark .bg-decor {
    opacity: 0.3;
}

/* gradients only */
.bg-decor-oman,
.bg-decor-center,
.bg-decor-committee {
    background:
        radial-gradient(900px 500px at 50% 50%, #2cb5e3, transparent 60%);
}

/* lazy-loaded images */
.bg-decor-oman.loaded {
    background:
        url('../images/oman.webp') left 100px/35% no-repeat,
        radial-gradient(900px 500px at 80% 30%, #2cb5e3, transparent 60%);
}

.bg-decor-center.loaded {
    background:
        url('../images/center.webp') left 100px/35% no-repeat,
        radial-gradient(900px 500px at 80% 50%, #005193, transparent 60%);
}

.bg-decor-committee {
    background:
        radial-gradient(900px 500px at 10% 20%, #2cb5e3, transparent 60%),
        radial-gradient(900px 500px at 90% 80%, #005193, transparent 60%);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .bg-decor-oman.loaded {
        background:
            url('../images/oman.webp') center 20%/80% no-repeat,
            radial-gradient(400px 300px at 75% 75%, #2cb5e3, transparent 60%);
    }

    .bg-decor-center.loaded {
        background:
            url('../images/center.webp') center 15%/80% no-repeat,
            radial-gradient(400px 300px at 75% 75%, #005193, transparent 60%);
    }

    .bg-decor-committee {
        background:
            radial-gradient(400px 300px at 20% 20%, #2cb5e3, transparent 60%),
            radial-gradient(400px 300px at 80% 80%, #005193, transparent 60%);
    }
}


#mobileMenu {
    position: absolute;
    /* relative to header */
    top: 100%;
    /* right below the navbar */
    left: 0;
    /* for LTR */
    right: auto;
    /* overridden for RTL */
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    z-index: 50;
}

#mobileMenu.rtl {
    left: auto;
    right: 0;
    /* align to right edge in RTL */
    text-align: right;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease, opacity 0.8s ease, padding 0.8s ease;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.accordion-content.open {
    max-height: 1000px;
    /* big enough to fit content */
    opacity: 1;
    padding-top: 0.5rem;
    /* same as your py-2 */
    padding-bottom: 0.5rem;
}

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

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

.animate-scroll {
    width: max-content;
    animation: scroll 30s linear infinite;
}