/* Footer styling */
footer {
    background: #333; /* Dark background color */
    color: #fff; /* White text color */
    text-align: center; /* Center align text */
    padding: 1rem 0; /* Padding on top and bottom */
    /* margin-top: 2rem; */ /* Margin on top (commented out) */
}

/* Main footer class styling */
.footer {
    background: var(--header-background); /* Background color from CSS variable */
    color: var(--header-text-color); /* Text color from CSS variable */
    padding: 2rem 0; /* Padding on top and bottom */
    text-align: center; /* Center align text */
}

/* Container inside footer */
.footer .container {
    display: flex; /* Flexbox layout */
    justify-content: space-between; /* Space between items */
    align-items: center; /* Center align items vertically */
    flex-wrap: wrap; /* Wrap items to next line if needed */
}

/* Contact and social sections inside footer */
.footer .contact, .footer .social {
    flex: 1; /* Flex grow */
    margin: 1rem; /* Margin around items */
}

/* Paragraphs inside contact and links inside social */
.footer .contact p, .footer .social a {
    font-size: 18px; /* Font size */
    color: var(--text-color); /* Text color from CSS variable */
    margin: 0.5rem 0; /* Margin on top and bottom */
}

/* Links inside social section */
.footer .social a {
    font-size: 24px; /* Font size */
    margin: 0 0.5rem; /* Margin on left and right */
    color: var(--text-color); /* Text color from CSS variable */
    text-decoration: none; /* Remove underline */
}

/* Hover effect for social links */
.footer .social a:hover {
    color: var(--primary-color); /* Change color on hover */
}

/* Responsive styling for screens with max width of 800px */
@media only screen and (max-width: 800px) {
    .footer .container {
        flex-direction: column; /* Stack items vertically */
    }
    .footer .contact p {
        font-size: 16px; /* Smaller font size */
    }
}