@font-face {
    font-family: myFirstFont;
    src: url(good\ times\ rg.otf);
}



/* Cube Styles */
@layer utilities {

    .cube {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        perspective: 1000px;
    }

    .cubeContainer {
        width: 150px;
        height: 150px;
        position: relative;
        transform-style: preserve-3d;
        transform: rotateX(-15deg) rotateY(-15deg);
        animation: rotateCube 10s infinite linear;
    }

    .cubeTop,
    .cubeBottom {
        position: absolute;
        width: 150px;
        height: 150px;
        background: linear-gradient(45deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.6));
        border: 2px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    }

    .cubeTop {
        transform: rotateX(90deg) translateZ(75px);
        animation: farTop 6s ease-in-out infinite;
    }

    .cubeBottom {
        transform: rotateX(90deg) translateZ(-75px);
    }

    .cubeContainer>div {
        position: absolute;
        width: 150px;
        height: 150px;
        background: linear-gradient(45deg, rgba(59, 130, 246, 0.6), rgba(37, 99, 235, 0.4));
        border: 2px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
        transform: rotateY(calc(90deg * var(--i))) translateZ(75px);
        animation: far 6s ease-in-out infinite;
    }

    @keyframes rotateCube {
        0% {
            transform: rotateX(-15deg) rotateY(0deg);
        }

        100% {
            transform: rotateX(-15deg) rotateY(360deg);
        }
    }

    @keyframes particle-float {
        0% {
            transform: translateY(0) translateX(0);
            opacity: 0;
        }

        10% {
            opacity: 1;
        }

        90% {
            opacity: 1;
        }

        100% {
            transform: translateY(-100vh) translateX(100px);
            opacity: 0;
        }
    }

    @media (max-width: 800px) {
        .cubeContainer {
            width: 120px;
            height: 120px;
        }

        .cubeTop,
        .cubeBottom,
        .cubeContainer>div {
            width: 120px;
            height: 120px;
        }

        .cubeTop {
            transform: rotateX(90deg) translateZ(60px);
        }

        .cubeBottom {
            transform: rotateX(90deg) translateZ(-60px);
        }

        .cubeContainer>div {
            transform: rotateY(calc(90deg * var(--i))) translateZ(60px);
        }
    }
}

::-webkit-scrollbar {
    position: absolute;
    width: 9px;

}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: #282828 0 0 5px grey;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #3B82F6, #1d4ed8);
    border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #0015ff;
}

/* New class for the step container */
.process-step {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 1.5rem;
    /* 24px */
}

/* The icon/marker column */
.process-marker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The icon circle */
.process-icon {
    width: 3rem;
    /* 48px */
    height: 3rem;
    /* 48px */
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    transition: all 0.3s ease;
}

/* The connecting line */
.process-line {
    position: absolute;
    top: 3rem;
    /* 48px, start below icon */
    left: 50%;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #3b82f6, transparent);
    opacity: 0.5;
    transform: translateX(-50%);
}

/* Hide the line on the very last step */
.process-step:last-child .process-line {
    display: none;
}

/* The content card - setup for animation */
/* .process-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
} */

/* The 'active' state, triggered by the existing JS */
/* .mobile-timeline-step.active .process-content {
    opacity: 1;
    transform: translateY(0);
} */

/* Animate the icon when active */
/* .mobile-timeline-step.active .process-icon {
    animation: glow 2s ease-in-out infinite alternate;
    transform: scale(1.1);
} */

/* === END NEW STYLES === */


/* Fix for content positioning */
.timeline-content>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 320px;
    z-index: 25;
    /* Highest z-index for content cards */
}

/* Ensure content is readable with proper background */
.content-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.dark .content-card {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}