/* Sticky Footer Styling */
.sticky-footer {
    position: sticky;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 3px 0;
    text-align: center;
    z-index: 1000;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

/* Base style for all icons */
.social-icon {
    display: inline-block;
    padding: 10px;
    transition: transform 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.05);
}

/* Styles for PNG icons */
.social-icon img {
    height: 28px;
    width: auto;
    vertical-align: middle;
    transition: filter 0.3s ease;
    filter: drop-shadow(0 0 4px var(--color-primary));
}

.social-icon:hover img {
    filter: drop-shadow(0 0 8px var(--color-hover));
}

/* Styles for the INLINED SVG icon */
.social-icon svg {
    height: 28px;
    width: 28px;
    vertical-align: middle;
    fill: var(--color-primary); /* Set the default color directly on the SVG's fill */
    transition: fill 0.3s ease;
}

.social-icon:hover svg {
    fill: var(--color-hover); /* Change the fill color on hover */
}