/* --- Footer Container Styles (Desktop/Large Screens - 4 Columns) --- */
footer {
    background-color: #333;
    color: #fff;
    padding-top: 40px;
}

.footer-container {
    /* Use Grid to create a 4-column layout */
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 equal-width columns */
    gap: 30px; /* Space between columns */
    max-width: 1200px;
    margin: 0 auto; /* Center the footer content */
    padding: 0 20px 40px;
}

.footer-col h3 {
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li a {
    color: #ccc;
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
    transition: color 0.3s;
    text-align: center;
}

.footer-col ul li a:hover {
    color: #fff;
}

.footer-col p {
    font-size: 0.9em;
    text-align: center;
}

/* Footer Bottom Bar */
.footer-bottom {
    background-color: #222;
    padding: 15px 20px;
    text-align: center;
    font-size: 0.8em;
    border-top: 1px solid #444;
}


/* --- Media Query for Tablet/Medium Screens (2 Columns) --- */
@media (max-width: 768px) {
    .footer-container {
        /* Change to 2 columns for tablets */
        grid-template-columns: repeat(2, 1fr); 
    }

    /* Add a little space between the two rows of columns */
    .footer-col:nth-child(2n + 1) {
        margin-bottom: 20px; /* Space under the first column in each row */
    }
}


/* --- Media Query for Mobile/Small Screens (1 Column) --- */
@media (max-width: 480px) {
    .footer-container {
        /* Stack into a single column for phones */
        grid-template-columns: 1fr; 
    }

    /* Adjust padding and spacing for mobile */
    .footer-container {
        padding-top: 20px;
    }
    
    .footer-col {
        text-align: center; /* Center content on mobile */
        margin-bottom: 25px;
    }
    
    .footer-col:last-child {
        margin-bottom: 0; /* Remove margin from the last column */
    }
}