/* * {
    scroll-behavior: smooth;
} */

html {
    scrollbar-width: thin;
    scrollbar-color: #0f6dbf transparent;
}

.content-box {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 109, 191, 0.6) transparent;
}

#wrapper-canvas canvas {
    max-width: 100%;
}

.container {
    visibility: hidden;
    /* transform: scale(0.9); */
}

.open-popup {
    visibility: visible;
    /* transform: scale(1); */
}

/* Dark & Light mode */
.theme-toggle {
    transition: all 0.3s ease;
}

.dark .sun-icon {
    opacity: 1;
    transform: rotate(0deg);
}

.dark .moon-icon {
    opacity: 0;
    transform: rotate(-90deg);
}

.sun-icon {
    opacity: 0;
    transform: rotate(90deg);
}

.moon-icon {
    opacity: 1;
    transform: rotate(0deg);
}

/* Back to Top */
.totop-btn {
    opacity: 0;
    pointer-events: none;
}

.visible {
    opacity: 1;
    pointer-events: all;
}

.coursor-dot,
.coursor-outline {
    transform: translate(-50%, -50%);
}

/* Thanks Section - Marquee Animation */
.marquee-line {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.marquee-content {
    display: flex;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.marquee-left-to-right .marquee-content {
    animation: marqueeLeftToRight 25s linear infinite;
}

.marquee-right-to-left .marquee-content {
    animation: marqueeRightToLeft 25s linear infinite;
}

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

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

.thanks-star {
    animation: starPulse 2s ease-in-out infinite;
}

@keyframes starPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Pause animation on hover */
.marquee-line:hover .marquee-content {
    animation-play-state: paused;
}

/* Menu Navigation Button & Panel */
.menu-nav-toggler.show-button {
    display: flex;
}

.menu-nav-toggler.menu-open .menu-icon {
    display: none;
}

.menu-nav-toggler.menu-open .close-icon {
    display: block;
}

.menu-nav-toggler.menu-open {
    transform: rotate(180deg);
}

.menu-nav-popup {
    transform: scale(0.2);
    transform-origin: bottom left;
}

.menu-nav-popup.show-menu {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.menu-nav-item {
    position: relative;
    overflow: hidden;
}

.menu-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: #0f6dbf;
    transform: scaleY(0);
    transition: transform 0.2s ease;
}

.menu-nav-item:hover::before {
    transform: scaleY(1);
}

.menu-nav-item.active {
    background: rgba(15, 109, 191, 0.1);
}

.menu-nav-item.active::before {
    transform: scaleY(1);
}