/* ============================================================
   “PROJECTS” SECTION – heading + wheel wrapper + buttons
   ========================================================== */

/* section wrapper */
.projects{
    padding-top:10%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-height: 100svh;
    height: auto;
    max-height: 100%;
    overflow-x: clip;
}

/* big section title */
.projects .section-heading{
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
}

#projectWheel {
    transform: translateY(-5rem);
    z-index: 10;
}

@media (max-width: 780px) {
    #projectWheel {
        transform: translateY(-1.2rem);
    }
}

.section-heading{
    z-index: 1;
}

/* -------- navigation buttons ------------------------------ */

.projects__bg {
    position: absolute;
    inset: 0; /* Cover whole section */
    margin: auto;
    width: 50%;  /* Take full width of the section */
    max-width: 50vmin; /* Limit width for large screens */
    height: auto; /* Maintain aspect ratio */
    max-height: 75vmin; /* Limit height for large screens */
    fill: #ffffff; /* Icon color */
    opacity: 0.1;  /* "Fade-out" strength */
    filter: blur(1.5px); /* Soften the edges */
    pointer-events: none; /* Clicks pass through */
    z-index: 1;    
    display: block; /* Behind wheel & text */
}