/* Footer general */
.site-footer {
    background-color:#757575; /* black background */
    color: #DADADA; /* light text for contrast */
    padding: 40px 0;
    font-family: 'Roboto', sans-serif;
}

/* Top bold heading */
.site-footer .footer-top h3 {
    font-weight: 700;
    color: #DADADA;
    margin-bottom: 5px;
}

.site-footer .footer-top p {
    color: #ccc;
    font-size: 0.95rem;
}

/* Section headings */
.site-footer h5 {
    font-weight: 600;
    color: #DADADA;
    margin-bottom: 15px;
}

/* Footer links */
.site-footer .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer .footer-links li {
    margin-bottom: 10px;
    white-space: nowrap;

}

.site-footer .footer-links li a {
    color: #DADADA;
    text-decoration: none;
    transition: color 0.3s;
     white-space: nowrap;
}

.site-footer .footer-links li a:hover {
    color: red; /* hover effect */
}

/* Contact icons */
.site-footer .footer-contact i {
    margin-right: 8px;
    color: #FDD000;
}

/* Social icons */
.site-footer .social-icons a {
    display: inline-block;
    margin-right: 10px;
    color: #DADADA;
    font-size: 1.2rem;
    transition: color 0.3s;
}

.site-footer .social-icons a:hover {
    color: red;
}

/* Footer bottom */
.site-footer .footer-bottom p {
    margin: 10px 0 0 0;
    font-size: 0.9rem;
    color: #ccc;
}

/* Responsive adjustments */
/* Mobile responsive footer */
@media (max-width: 768px) {
    .site-footer {
        text-align: center;  /* center content on small screens */
        padding: 30px 15px;  /* smaller padding */
    }

    .site-footer .footer-top h3,
    .site-footer h5 {
        font-size: 1.2rem;   /* smaller headings */
    }

    .site-footer .footer-top p {
        font-size: 0.9rem;   /* adjust paragraph text */
    }

    .site-footer .footer-links {
        display: flex;
        flex-direction: column; /* stack links vertically */
        align-items: center;
    }

    .site-footer .footer-links li {
        margin-bottom: 8px;
    }

    .site-footer .social-icons {
        justify-content: center;
        margin-top: 15px;
    }

    .site-footer .social-icons a {
        font-size: 1.5rem;  /* slightly bigger for touch */
        margin: 0 8px;
    }

    .site-footer .footer-contact {
        text-align: center;
        margin-top: 15px;
    }

    .site-footer .footer-bottom p {
        font-size: 0.85rem;
    }
}