<style>

@font-face {
  font-family: Nexa-Heavy;
  src: url(fonts/Nexa-Heavy.ttf);
}

@font-face {
  font-family: Nexa-ExtraLight;
  src: url(fonts/Nexa-ExtraLight.otf);
}

@font-face {
  font-family: Tommy-Light;
  src: url(fonts/Tommy-Light.otf);
}

@font-face {
  font-family: Tommy-Bold;
  src: url(fonts/Tommy-Bold.otf);
}

@font-face {
  font-family: Mont-Heavy;
  src: url(fonts/Mont-Heavy.otf);
}


@font-face {
  font-family: BebasNeue-Regular;
  src: url(fonts/BebasNeue-Regular.ttf);
}

@font-face {
  font-family: Malvides;
  src: url(fonts/Malvides.otf);
}


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

/* Base Styles (Mobile First) */
.site-footer {
    background-color: #257328; /* Dark blue background, similar to the screenshot */
    color: #ffffff; /* White text for readability */
    padding: 30px 15px; /* Vertical and horizontal padding */
    font-family: 'Arial', sans-serif; /* A clean, widely available sans-serif font */
    font-size: 16px; /* Base font size */
margin-top: 5em;
}

.footer-content {
    max-width: 1200px; /* Limits the width of the footer content */
    margin: 0 auto; /* Centers the footer content horizontally */
    display: grid; /* Uses CSS Grid for layout management */
    grid-template-columns: 1fr; /* Default: single column for mobile devices */
    gap: 30px; /* Space between grid items (columns) */
    text-align: left; /* Centers text content within columns on mobile */
}

.footer-column {
    box-sizing: border-box; /* Ensures padding doesn't add to the element's total width */
}

/* Column 1: Logo, Company Name, Contact Info & Social Links */
.footer-contact-column {
    max-width: 450px; /* Limits the width for better readability on small screens */
    margin: 0 auto; /* Centers this specific column block */
    display: flex;
    flex-direction: column; /* Stacks elements vertically within this column */
    align-items: center; /* Centers elements horizontally within this column */
}

.contact-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px; /* Space below logo and company name */
}

.footer-logo {
    height: 70px; /* Placeholder logo height */
    width: auto; /* Maintains aspect ratio */
    display: block; /* Removes extra space below the image */
    margin-bottom: 15px; /* Space below the logo */
    margin-left: -10px;
}

.footer-company-name {
    font-size: 1.8em; /* Larger font size for the company name */
    font-weight: bold;
    margin: 0; /* Removes default margin */
}



.footer-address,
.footer-contact-info {
    font-size: 0.95em;
    line-height: 1.5; /* Improves readability of text lines */
    margin-bottom: 12px; /* Space between address lines or info lines */
}

.footer-contact-info {
    margin-bottom: 25px; /* More space before social icons */
}

.footer-social-icons {
    display: flex;
    justify-content: center; /* Centers the social icons horizontally */
    gap: 20px; /* Spacing between social icons */
}

.footer-social-icons a {
    color: #ffffff; /* Icon color */
    font-size: 1.8em; /* Makes icons larger */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

.footer-social-icons a:hover {
    color: #a8dbb9; /* Highlight color on hover, from previous example */
}

/* Column Headings */
.footer-heading {
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase; /* Makes headings all caps */
    margin-bottom: 20px;
    position: relative; /* Needed for positioning the pseudo-element */
    display: inline-block; /* Allows the pseudo-element to be positioned correctly */
font-family: Mont-Heavy;
}

/* Custom underline for headings, matching the screenshot style */
.footer-heading::after {
    content: ''; /* Required for pseudo-elements */
    display: block;
    width: 70%; /* Width of the underline */
    height: 3px; /* Thickness of the underline */
    background-color: #a8dbb9; /* Highlight color */
    position: absolute;
    left: 0; /* Aligns underline to the left */
    bottom: -10px; /* Positions the underline below the text */
}

/* Links within columns */
.footer-link {
    display: block; /* Each link appears on its own line */
    color: #ffffff; /* Link color */
    text-decoration: none; /* Removes underline from links */
    font-size: 1e.3m;
    margin-bottom: 12px; /* Space between links */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
font-family: Tommy-Light;
}

.footer-link:hover {
    color: #a8dbb9; /* Highlight color on hover */
}

/* Areas We Serve - Special layout for nested columns */
.areas-wrapper {
    display: grid;
    grid-template-columns: 1fr; /* Stack city columns on mobile */
    gap: 20px;
    text-align: center; /* Center city links */
}

.areas-column {
    display: flex;
    flex-direction: column; /* Stack links vertically */
    align-items: left; /* Center links horizontally */
text-align: left;
}

/* --- Responsive Adjustments --- */

/* Medium Screens: Tablets and larger devices */
@media (min-width: 769px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr); /* Two columns for wider screens */
        gap: 50px 30px; /* Increased horizontal gap, slightly reduced vertical gap */
    }

    .footer-column {
        text-align: left; /* Align all column text to the left */
    }

    /* Adjust specific column placements and widths using grid */
    .footer-contact-column {
        grid-column: 1 / 2; /* Place in the first column */
        grid-row: 1 / 2; /* Place in the first row */
        max-width: unset; /* Remove max-width constraint from mobile */
        align-items: flex-start; /* Align content to the left */
    }

    .footer-column:nth-of-type(2) { /* Company column */
        grid-column: 2 / 3; /* Second column */
        grid-row: 1 / 2; /* First row */
    }

    .footer-column:nth-of-type(3) { /* Services column */
        grid-column: 1 / 2; /* First column */
        grid-row: 2 / 3; /* Second row */
        margin-top: 20px; /* Adds some space from the row above */
    }

    .footer-column:nth-of-type(4) { /* Areas We Serve column */
        grid-column: 2 / 3; /* Second column */
        grid-row: 2 / 3; /* Second row */
        margin-top: 20px; /* Adds some space from the row above */
    }

    .footer-heading::after {
        left: 0; /* Ensure underline starts from the left edge of the text */
    }

    /* Areas We Serve - Nested grid becomes two columns */
    .areas-wrapper {
        grid-template-columns: repeat(2, 1fr); /* Two columns for the city lists */
        text-align: left; /* Align city links to the left */
    }

    .areas-column {
        align-items: flex-start; /* Align links to the start (left) within each city column */
    }
}

/* Large Screens: Desktops and wider */
@media (min-width: 993px) {
    .footer-content {
        grid-template-columns: repeat(4, 1fr); /* Four equal columns */
        gap: 60px 30px; /* More horizontal spacing for desktop */
    }

    /* Explicitly place each column to ensure correct order on wide screens */
    .footer-contact-column {
        grid-column: 1 / 2;
        grid-row: 1 / 1; /* Ensure it stays in the first row */
        margin-top: 0; /* Reset any margin applied in tablet view */
    }

    .footer-column:nth-of-type(2) { /* Company */
        grid-column: 2 / 3;
        grid-row: 1 / 1;
    }

    .footer-column:nth-of-type(3) { /* Services */
        grid-column: 3 / 4;
        grid-row: 1 / 1;
        margin-top: 0; /* Reset */
    }

    .footer-column:nth-of-type(4) { /* Areas */
        grid-column: 4 / 5;
        grid-row: 1 / 1;
        margin-top: 0; /* Reset */
    }

    /* Areas We Serve remains two columns, consistent with the screenshot */
    .areas-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* --- NEW CSS for Frog Mascot Integration --- */

/* Main container for the footer and the mascot */
.footer-section-container {
    position: relative; /* Establishes positioning context for the frog */
    width: 100%;        /* Ensure it takes full width */
    /* The visual background of the footer is handled by .site-footer */
}

</style>