/* -------------------- Footer Styles -------------------- */

/* General Footer Styling */
.site-footer {
    /* Gradient background with two colors (soft pink to orange), provides an appealing visual effect */
    background: linear-gradient(135deg, #ff7e5f, #e2fe7b); 
    color: white; /* Text color set to white for contrast with the background */
    padding: 40px 0; /* Vertical padding to create spacing and improve readability */
    text-align: center; /* Ensures that the content is aligned in the center */
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow to give a lifted effect */
    transition: background 0.3s ease-in-out; /* Smooth transition for background on hover */
}

/* Footer Container to Center Content */
.site-footer .container {
    max-width: 1200px; /* Maximum width for the footer, prevents excessive stretching */
    margin: 0 auto; /* Centers the footer container horizontally */
    padding: 0 20px; /* Horizontal padding for spacing */
}

/* Footer Logo Section */
.footer-logo img {
    width: 150px; /* Set the width of the logo */
    margin-bottom: 20px; /* Adds space below the logo */
    transition: transform 0.3s ease-in-out; /* Adds smooth animation for scaling */
}

/* Hover effect for logo */
.footer-logo img:hover {
    transform: scale(1.05); /* Slightly scales the logo on hover for an interactive feel */
}

/* Footer Navigation Links */
.footer-nav ul {
    display: flex; /* Aligns items in a horizontal row */
    justify-content: center; /* Centers the navigation links */
    list-style-type: none; /* Removes default list styling */
    margin: 0; /* Removes default margin */
    padding: 0; /* Removes default padding */
}

.footer-nav ul li {
    margin: 0 15px; /* Space between each menu item */
}

.footer-nav ul li a {
    color: white; /* Sets the default color for links */
    text-decoration: none; /* Removes underline from links */
    font-size: 16px; /* Sets a readable font size */
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for color and transform */
}

/* Hover effect for footer navigation links */
.footer-nav ul li a:hover {
    color: #f39c12; /* Gold color when hovered */
    transform: translateY(-5px); /* Moves the link slightly upwards when hovered for interactivity */
}

/* Social Media Links Section */
.footer-social ul {
    display: flex; /* Aligns items in a horizontal row */
    justify-content: center; /* Centers the social media icons */
    list-style-type: none; /* Removes default list styling */
    margin: 20px 0; /* Adds space above and below the icons */
    padding: 0; /* Removes default padding */
}

.footer-social ul li {
    margin: 0 10px; /* Space between each social media icon */
}

.footer-social ul li a {
    color: white; /* Sets icon color to white */
    font-size: 24px; /* Larger font size for better visibility */
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for color and transform */
}

/* Hover effect for social media icons */
.footer-social ul li a:hover {
    color: #25f312; /* Changes icon color to green on hover */
    transform: scale(1.1); /* Slightly scales up the icon for a fun interactive feel */
}

/* Footer Contact Information */
.footer-contact {
    font-size: 14px; /* Sets a smaller font size for contact information */
    margin: 20px 0; /* Adds space around the contact info section */
}

.footer-contact a {
    color: #1243f3; /* Sets the color of email links to blue */
    text-decoration: none; /* Removes underline */
    transition: color 0.3s ease-in-out, text-decoration 0.3s ease-in-out; /* Smooth transition for color and underline effect */
}

/* Hover effect for email links */
.footer-contact a:hover {
    color: #f1c40f; /* Changes color to yellow on hover */
    text-decoration: underline; /* Adds underline to email links on hover */
}

/* Footer Bottom Section (Copyright) */
.footer-bottom {
    font-size: 14px; /* Sets smaller font size for copyright text */
    color: #bdc3c7; /* Light gray color for copyright text */
    margin-top: 20px; /* Adds space above the bottom text */
}

/* Responsive Design for Footer */

/* For tablets and devices with screen widths below 768px */
@media (max-width: 768px) {
    .footer-nav ul {
        flex-direction: column; /* Stacks the navigation links vertically */
    }

    .footer-social ul {
        flex-direction: column; /* Stacks the social media icons vertically */
    }

    .footer-logo img {
        width: 120px; /* Reduces logo size on smaller screens */
    }
}

/* For mobile devices with screen widths below 480px */
@media (max-width: 480px) {
    .footer-nav ul li {
        margin: 10px 0; /* Increases space between links */
    }

    .footer-contact {
        font-size: 12px; /* Reduces font size for smaller screens */
    }

    .footer-bottom {
        font-size: 12px; /* Reduces font size for copyright text */
    }
}