.hero-carousel { position: relative; z-index: 1; }

.floating-cards{
    position: absolute;
    left: 50%;
    bottom: -45%;
    transform: translateX(-50%);
    width: 95%;
    z-index: 10;
}

.floating-cards .card { border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.12); }

.mobile-menu {
    white-space: nowrap; /* [1] */
    overflow-x: auto; /* [2] */
    -webkit-overflow-scrolling: touch; /* [3] */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    scrollbar-width: none; /* For Firefox */
}
/* [5] */
.mobile-menu::-webkit-scrollbar { display: none; }
.overflow-auto::-webkit-scrollbar {
    display: none; /* Hides scrollbar for Chrome/Safari */
}
.overflow-auto {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.square-container {
    width: 100%; /* Or a specific width, e.g., 200px */
    max-width: 100px; /* Optional: limit max size */
}

.square-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1; /* Forces square ratio */
    object-fit: cover;    /* Crops image to fill square without distortion */
    object-position: center; /* Centers the crop */
}

/* The flying clone styling */
.flying-img {
    position: fixed;
    z-index: 9999;
    transition: all 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

/* The shake animation logic */
.shake-icon {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;
    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}