/* Font Awesome Icons Custom Styling */

.icons-actions {
    align-items: center;
    gap: 0;
}

.icons-actions a {
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    font-size: 20px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #866d38;
}

.icons-actions a:hover {
    transform: scale(1.1);
    background-color: #e8e8e8;
    border-color: #007bff;
}

/* Social Media Icons */
.icons-actions .fa-facebook {
    color: #3b5998;
}

.icons-actions a:has(.fa-facebook):hover {
    background-color: #3b5998;
}

.icons-actions a:has(.fa-facebook):hover .fa-facebook {
    color: #fff;
}

.icons-actions .fa-instagram {
    color: #e4405f;
}

.icons-actions a:has(.fa-instagram):hover {
    background-color: #e4405f;
}

.icons-actions a:has(.fa-instagram):hover .fa-instagram {
    color: #fff;
}

.icons-actions .fa-linkedin {
    color: #0077b5;
}

.icons-actions a:has(.fa-linkedin):hover {
    background-color: #0077b5;
}

.icons-actions a:has(.fa-linkedin):hover .fa-linkedin {
    color: #fff;
}

.icons-actions .fa-youtube {
    color: #ff0000;
}

.icons-actions a:has(.fa-youtube):hover {
    background-color: #ff0000;
}

.icons-actions a:has(.fa-youtube):hover .fa-youtube {
    color: #fff;
}

/* Additional useful icon styles */
.icons-actions .fa-twitter {
    color: #1da1f2;
}

.icons-actions a:has(.fa-twitter):hover {
    background-color: #1da1f2;
}

.icons-actions a:has(.fa-twitter):hover .fa-twitter {
    color: #fff;
}

.icons-actions .fa-github {
    color: #333;
}

.icons-actions a:has(.fa-github):hover {
    background-color: #333;
}

.icons-actions a:has(.fa-github):hover .fa-github {
    color: #fff;
}

.icons-actions .fa-pinterest {
    color: #e60023;
}

.icons-actions a:has(.fa-pinterest):hover {
    background-color: #e60023;
}

.icons-actions a:has(.fa-pinterest):hover .fa-pinterest {
    color: #fff;
}

/* Icon size utilities */
.icon-small {
    font-size: 16px;
}

.icon-medium {
    font-size: 24px;
}

.icon-large {
    font-size: 32px;
}

.icon-xl {
    font-size: 48px;
}

/* Icon animation classes */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.icon-bounce {
    animation: bounce 0.6s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.icon-pulse {
    animation: pulse 1.5s infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.icon-spin {
    animation: spin 2s linear infinite;
}

/* Icon in button styling */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-icon:hover {
    background: #f8f9fa;
    border-color: #007bff;
}

.btn-icon-primary {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

.btn-icon-primary:hover {
    background: #0056b3;
    border-color: #0056b3;
}