/* Footer */
.footer {
    background-color: var(--secondary); /* Dark slate background */
    color: var(--accent); /* Light text color for contrast */
    padding: 40px 20px;
    flex-direction: column;
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    width: 100%;
}

.footer-logo {
    width: 200px; /* You can adjust the size of the logo */
    margin-right: 20px; /* Ensure there's space between the logo and content */
}

.footer-columns {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.footer-column {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-column span {
    font-size: 1rem;
}

.footer .footer-socials {
    display: flex;
    gap: 15px;
}

.footer .footer-socials a {
    color: var(--accent);
    font-size: 1.25rem;
    text-decoration: none;
    display: flex;
    align-items: center; /* Align the icon and text vertically */
    gap: 10px; /* Add spacing between the icon and text */
}

.footer .footer-socials img {
    width: 30px; /* Ensure the size is consistent for all icons */
    height: 30px; /* Ensure the height is consistent for all icons */
    object-fit: contain; /* Prevent any image distortion */
}

.footer .footer-socials a:hover {
    color: var(--primary);
}

.footer p {
    font-size: 0.875rem;
    text-align: center;
    width: 100%;
    margin-top: 20px;
}

/* Responsive Design for Footer */
@media (max-width: 768px) {
    .footer {
        padding: 30px 15px;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .footer-logo {
        margin-right: 0;
    }

    .footer-columns {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .footer .footer-socials {
        gap: 10px;
    }
}