/* Styling for the social-icons container */

/* Styling for the hidden-icons container */

/* Styling for the hidden-icons container */
.hidden-icons {
    display: none; /* Initially hidden */
    flex-direction: row; /* Display hidden icons horizontally */
    gap: 10px; /* Add space between the hidden icons */
    position: absolute;
    top: 174px;
    left: 54px;
    animation: slide-in-horizontal 0.5s ease forwards;
}

/* Mobile screens styling */
@media (max-width: 768px) {
    .hidden-icons {
        display: flex; /* Show hidden icons on mobile */
        top: 160px; /* Adjust the vertical position for mobile */
        left: 20px; /* Adjust the left position to avoid edges on small screens */
        gap: 8px; /* Reduce gap for mobile */
    }
}

@media (max-width: 480px) {
    .hidden-icons {
        top: 126px;
        left: 43px;
        gap: 6px;


    }
}


/* Main toggle button styling */
.toggle-icon {
    cursor: pointer;
    margin-top: 15px;
    transition: transform 0.3s ease;
}
.toggle-icon img{
    width: 80%; 
    height: 120%;
    object-fit: contain;
}

.toggle-icon:hover {
            
}







/* Animation for hidden icons sliding in from the left */
@keyframes slide-in-horizontal {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation for hidden icons sliding out to the left */
@keyframes slide-out-horizontal {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}