/* footer.css */

/* Ensure all elements are within the browser width */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Footer Container */
.footer-container {
    background-color: #007bff; /* Same color as navigation bar */
    color: white;
    padding: 20px;
    text-align: center;
    width: 100%; /* Ensure it takes full width */
    overflow: hidden;
    box-sizing: border-box; /* Ensure padding is within width */
}

/* Footer Section Titles */
.footer-section-title {
    font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
}

/* Footer Links */
.footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

/* Footer Rows */
.footer-row {
    display: flex;
    flex-wrap: wrap; /* Make the buttons wrap on smaller screens */
    justify-content: center; /* Center align the links */
    margin: 10px 0;
    width: 100%; /* Ensure row stays within container */
}

/* Footer Links as Buttons */
.footer-row a {
    background-color: white;
    color: #007bff;
    padding: 8px 10px; /* Smaller padding for smaller size */
    margin: 5px;
    font-size: 12px; /* Reduced font size */
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 3D Effect */
    min-width: 110px; /* Ensure consistent button width */
    text-align: center;
}

.footer-row a:hover {
    background-color: #0056b3;
    color: white;
    transform: translateY(-2px); /* Hover Effect */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Enhanced 3D Effect */
}

/* Footer Copyright */
.footer-copyright {
    color: white;
    font-size: 12px;
    margin-top: 20px;
}

.footer-copyright a {
    color: #ffcc00;
    text-decoration: none;
}

.footer-copyright a:hover {
    text-decoration: underline;
}

/* Responsive Design for Footer */
@media (max-width: 768px) {
    .footer-row {
        flex-wrap: wrap; /* Wrap on smaller screens */
    }

    .footer-row a {
        margin: 5px 10px;
        padding: 6px 10px;
        font-size: 11px; /* Smaller font size for mobile */
    }
}