.footer {
    width: 100%;
    min-height: 60px; /* Changed height to min-height */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* Distribute items to ends */
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    padding: 0 40px; /* Increased padding to move content inward from edges */
    box-sizing: border-box; /* Ensure padding is included in width */
    position: relative;
    color: white; /* Set text color to white */
    flex-wrap: wrap; /* Allow content to wrap on smaller screens */
}

.footer-social-icons {
    display: flex;
    gap: 20px;
    order: 2; /* Place social icons second on wider screens */
    flex-shrink: 0; /* Ensure icons do not shrink */
}

.footer-social-icons a {
    color: white; /* Set icon color to white */
    font-size: 1.4rem; /* Slightly larger font size */
    transition: text-shadow 0.3s ease, color 0.3s ease, transform 0.3s ease; /* Add transform to transition */
}

.footer-social-icons a:hover {
    text-shadow: 0 0 8px #fff, 0 0 18px #fff, 0 0 25px #fff; /* Enhanced glow effect on hover */
    transform: scale(1.1); /* Slightly larger on hover */
}

.copyright {
    margin: 0;
    order: 1; /* Place copyright first on wider screens */
    flex-shrink: 1; /* Allow text to shrink */
    min-width: 0; /* Allow text to shrink below content size */
    color: white; /* Ensure copyright text is white */
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis for hidden text */
}

.copyright-link {
    color: white; /* Ensure link color is white */
    text-decoration: none; /* Remove underline */
    transition: text-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition for hover effects */
}

.copyright-link:hover {
    text-shadow: 0 0 8px #fff, 0 0 18px #fff, 0 0 25px #fff; /* Glow effect */
    transform: scale(1.05); /* Slight size increase on hover */
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    color: #333;
    text-decoration: none;
}

.footer-logo {
    width: 100px;
    height: auto;
    vertical-align: middle;
    transition: filter 0.3s ease;
    position: relative;
    top: -2px;
}

.copyright-link:hover .footer-logo {
    filter: drop-shadow(0 0 3px #fff);
}

.copyright {
    margin: 0;
    text-align: center; /* Added to center text */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .footer {
        flex-direction: column;
        height: auto;
        padding: 15px; /* Adjusted padding */
        justify-content: center; /* Center items when stacked */
    }

    .footer-social-icons {
        margin-top: 10px;
        margin-left: 0; /* Reset margin for mobile */
        margin-right: 0; /* Reset margin for mobile */
        justify-content: center; /* Center icons when stacked */
        width: 100%; /* Ensure icons take full width when wrapped */
        order: 0; /* Reset order for mobile */
    }

    .footer-social-icons a {
        font-size: 1.2rem; /* Adjusted font size for tablets */
    }

    .copyright {
        margin-right: 0; /* Reset margin for mobile */
        margin-left: 0; /* Reset margin for mobile */
        margin-top: 10px;
        font-size: 0.8rem; /* Adjusted font size for footer text */
        white-space: normal; /* Allow text to wrap */
        overflow: visible; /* Allow content to be visible */
        text-overflow: clip; /* Remove ellipsis */
        width: 100%; /* Ensure copyright takes full width when wrapped */
        text-align: center; /* Center copyright text when wrapped */
        order: 0; /* Reset order for mobile */
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 0 10px; /* Smaller fixed padding for very small screens */
        height: auto; /* Allow height to adjust if content wraps */
        justify-content: center; /* Center items when wrapped */
        text-align: center; /* Center text when wrapped */
    }

    .copyright {
        width: 100%; /* Ensure copyright takes full width when wrapped */
        text-align: center; /* Center copyright text when wrapped */
        margin-right: 0; /* Ensure no extra margin */
        margin-left: 0; /* Ensure no extra margin */
        white-space: normal; /* Allow text to wrap */
        overflow: visible; /* Allow content to be visible */
        text-overflow: clip; /* Remove ellipsis */
        order: 0; /* Reset order for mobile */
    }

    .footer-social-icons {
        width: 100%; /* Ensure icons take full width when wrapped */
        justify-content: center; /* Center icons when wrapped */
        margin-top: 10px; /* Add some space between copyright and icons when wrapped */
        order: 0; /* Reset order for mobile */
    }

    .footer-social-icons a {
        font-size: 1rem; /* Adjusted font size for mobile */
    }
}