/* Instagram Link Visibility */
.mobile-only {
    display: none;
}

.desktop-only {
    display: inline-flex;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }
}

/* Flying Image Animation */
.flying-img {
    position: fixed;
    z-index: 9999;
    width: 100px;
    /* Start size */
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    pointer-events: none;
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0.8;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Scroll to Top Button */
#scroll-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px;
    /* Left side for RTL layout usually, or right if preferred. Let's stick to left to avoid conflict with chat widgets etc if any, or right if standard. RTL usually puts it on left or right? Let's put it on the RIGHT for easy thumb access on mobile, or LEFT? 
    Standard for RTL is often Left. Let's try Left. */
    left: 30px;
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(108, 92, 231, 0.4);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scroll-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(108, 92, 231, 0.6);
}

@media (max-width: 768px) {
    #scroll-to-top {
        bottom: 20px;
        left: 20px;
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
}