/* Mascot Container Styling */
.mascot-container {
    position: absolute;
    top: 60%;
    /* Adjusted up to avoid footer clipping */
    left: 75%;
    transform: translateY(-50%);
    width: 350px;
    height: 400px;
    z-index: 20;
    pointer-events: none;
}

#mascot-3d-container {
    width: 100%;
    height: 100%;
}

/* Responsive Adjustments */
@media (max-width: 1400px) {
    .mascot-container {
        left: 75%;
        width: 300px;
        height: 350px;
    }
}

@media (max-width: 1200px) {
    .mascot-container {
        left: 70%;
        width: 280px;
        height: 320px;
    }
}

@media (max-width: 1024px) {
    .mascot-container {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        margin: 20px auto;
        width: 250px;
        height: 300px;
    }
}

@media (max-width: 1200px) {
    #mascot-3d-container {
        display: none !important;
    }
}