/* ==========================================================================
   Footer (Grid Layout)
   ========================================================================== */
/* ===== Override Footer Background to Dark Brown ===== */
.site-footer {
  background-color: #422400; /* Dark brown */
  color: #ffffff;            /* White text for contrast */
}

/* Optionally, tweak link colors for readability and branding */
.footer-widget a {
  color: #f1f1f1; /* Slightly lighter than #ddd for better contrast */
}

.footer-widget a:hover,
.footer-widget a:focus {
  color: #FFC107; /* Mustard accent on hover/focus */
}

/* If you want the top border in the footer-bottom to be less visible */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-top {
    padding: 4.375rem 0; /* 70px / 16 = 4.375rem  Reduced padding */
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12-column grid */
    gap: 2rem; /* Space between columns and rows */
}

/* Widget Styles */

.footer-widget {
    /* Common styles for all widgets */
    margin-bottom: 2rem; /* Spacing between widgets */
}

.footer-widget h5 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

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

.footer-widget li {
    margin-bottom: 0.5rem;
}

.footer-widget a {
    color: #ddd;
    text-decoration: none;
    transition: var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-widget a:hover,
.footer-widget a:focus {
    color: var(--accent-blue);
    text-decoration: none;
}
.footer-widget i {
      color: var(--accent-blue);
}
.footer-widget p {
    color: #ddd;
    line-height: 1.6;
}
/* Specific Widget Styles */

.footer-about {
    grid-column: span 6; /* Span 6 columns (half the width) */
}

.footer-logo {
    display: inline-block; /* Allow width/height to be set */
    margin-bottom: 1.5rem;
}
.footer-logo img {
    max-width: 250px; /* Control logo size */
    height: auto;
}

/* Ensure the logo container remains fixed */
.footer-logo {
  position: relative;
  height: 50px;        /* Keep the container's height unchanged */
  overflow: visible;    /* Allow the larger image to overflow */
}

.footer-social ul {
    display: flex;
    gap: 1rem;
}

.footer-social a {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
    text-align: center;
    line-height: 40px;
    transition: var(--transition-base);
}

.footer-social a:hover,
.footer-social a:focus {
    background-color: var(--accent-blue);
}

.footer-services,
.footer-links {
    grid-column: span 3; /* Span 3 columns each */
}

.footer-contact {
    grid-column: span 3; /* Span 3 columns */
}

/* Footer Bottom */

.footer-bottom {
    padding: 1.875rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center; /* Center content */
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 1rem;       /* Space between copyright and payment */
}

.footer-bottom p {
    color: #ddd;
    margin-bottom: 0;
}

.footer-bottom img {
    max-width: 100%;
    height: auto;
}

/* Responsive Adjustments */

@media (max-width: 991.98px) {
    .footer-about {
        grid-column: span 12; /* Full width on medium screens */
    }

    .footer-services,
    .footer-links,
    .footer-contact {
        grid-column: span 6; /* Span half the width */
    }
    .footer-bottom-inner {
        justify-content: center; /* Center content on smaller screens */
    }
}

@media (max-width: 767.98px) {
    .footer-services,
    .footer-links,
    .footer-contact {
        grid-column: span 12; /* Full width on small screens */
    }
}
/* Fixes for Font Awesome issues */
.fas.fa-caret-right\.php::before {
  content: "\f0da"; /* Correct Font Awesome unicode */
  font-family: "Font Awesome 5 Free"; /* Ensure correct font family */
  font-weight: 900;
}