.footer-footer1 {
    border-top: 1px solid #dddddd;
    background-color: #f9f9f9;
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    align-items: center;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    margin-top: 40px; /* push footer down */
    padding-top: 40px; /* space inside footer */
    min-height: 150px; /* or whatever fits your content */
    padding-bottom: 40px; /* extra space inside footer */
}

#footer-placeholder {
    background-color: var(--dark-bg-primary) !important;
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 50px; /* or whatever height fits your footer */
    width: 100%;
}


.footer-max-width {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.footer-content {
    gap: var(--dl-layout-space-fourunits);
    width: 100%;
    display: flex;
    align-self: stretch;
    align-items: flex-start;
    flex-shrink: 0;
    border-radius: var(--dl-layout-radius-radius4);
}

.footer-newsletter {
    gap: 24px;
    width: 500px;
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    flex-direction: column;
}

.footer-image1 {
    height: 2rem;
}

.footer-actions {
    gap: 16px;
    width: 100%;
    display: flex;
    align-self: stretch;
    align-items: flex-start;
    flex-direction: column;
}

.footer-form {
    gap: var(--dl-layout-space-unit);
    width: 100%;
    display: flex;
    align-self: stretch;
    align-items: stretch;
    flex-shrink: 0;
}

.footer-container {
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
}

.footer-form {
    gap: var(--dl-layout-space-unit);
    width: 100%;
    display: flex;
    align-self: stretch;
    align-items: stretch; /* Stretches items vertically. For horizontal, use align-items: center or flex-start/end if needed, or ensure consistent height. */
    flex-shrink: 0;
}

.footer-form > .footer-container { /* Assuming .footer-container holds the input */
    flex-grow: 1; /* Let the input container take up available space */
    /* min-width: 0; */ /* Sometimes needed if content inside resists shrinking */
}

.footer-form > button.thq-button-outline.footer-button {
    flex-shrink: 0; /* Prevent the button from shrinking */
}

.footer-text-input {
    gap: 8px;
    width: 100%;
    height: 32px;
    display: flex;
    font-size: 16px;
    box-sizing: border-box; /* CHANGE THIS */
    text-align: left;
    align-items: center;
    font-family: Roboto;
    font-weight: 400;
    background-color: transparent;
}

.footer-content2 {
    fill: var(--dl-color-theme-neutral-dark);
    color: var(--dl-color-theme-neutral-dark);
    height: auto;
    font-size: 12px;
    align-self: stretch;
    font-style: Regular;
    text-align: left;
    font-family: "Roboto";
    font-weight: 400;
    line-height: 150%;
    font-stretch: normal;
    text-decoration: none;
}

.footer-links {
    gap: var(--dl-layout-space-twounits);
    width: 100%;
    display: flex;
    flex-grow: 1;
    align-items: flex-start;
    justify-content: flex-end;
}

.footer-column1 {
    gap: var(--dl-layout-space-unit);
    width: auto;
    display: flex;
    overflow: hidden;
    flex-grow: 1;
    max-width: 300px;
    align-items: flex-start;
    flex-shrink: 0;
    flex-direction: column;
}

.footer-footer-links1 {
    gap: var(--dl-layout-space-halfunit);
    display: flex;
    align-self: stretch;
    align-items: flex-start;
    flex-direction: column;
}

.footer-column2 {
    gap: var(--dl-layout-space-unit);
    width: auto;
    display: flex;
    overflow: hidden;
    flex-grow: 1;
    max-width: 300px;
    align-items: flex-start;
    flex-shrink: 0;
    flex-direction: column;
}

.footer-footer-links2 {
    gap: var(--dl-layout-space-halfunit);
    display: flex;
    align-self: stretch;
    align-items: flex-start;
    flex-direction: column;
}

.footer-column3 {
    gap: var(--dl-layout-space-unit);
    width: auto;
    display: flex;
    overflow: hidden;
    flex-grow: 1;
    max-width: 300px;
    align-items: flex-start;
    flex-shrink: 0;
    flex-direction: column;
}

.footer-social-links {
    gap: var(--dl-layout-space-halfunit);
    display: flex;
    align-self: stretch;
    align-items: flex-start;
    flex-direction: column;
}

/* Social Media Icon Sizing */
.footer-social-links svg.thq-icon-small {
    width: 24px;  /* Adjust as needed, e.g., 20px, 24px, 30px */
    height: 24px; /* Adjust as needed, should typically match the width */
    fill: currentColor; /* This makes the icon take the color of its parent <a> tag's text */
    /* Any other existing styles for this selector can remain */
}

.footer-link14 {
    gap: 12px;
    display: flex;
    padding: 8px 0;
    align-self: stretch;
    align-items: center;
    flex-shrink: 0;
}

.footer-link15 {
    gap: 12px;
    display: flex;
    padding: 8px 0;
    align-self: stretch;
    align-items: center;
    flex-shrink: 0;
}

.footer-social-links a,
.footer-social-links svg {
    pointer-events: auto;
    cursor: pointer; /* optional, but good UX */
}


.footer-link16 {
    gap: 12px;
    display: flex;
    padding: 8px 0;
    align-self: stretch;
    align-items: center;
    flex-shrink: 0;
}

.footer-link17 {
    gap: 12px;
    display: flex;
    padding: 8px 0;
    align-self: stretch;
    align-items: center;
    flex-shrink: 0;
}

.footer-link18 {
    gap: 12px;
    display: flex;
    padding: 8px 0;
    align-self: stretch;
    align-items: center;
    flex-shrink: 0;
}

.footer-credits {
    gap: var(--dl-layout-space-twounits);
    width: 100%;
    display: flex;
    align-self: stretch;
    margin-top: var(--dl-layout-space-unit);
    align-items: flex-start;
    flex-direction: column;
}

.footer-row {
    gap: 64px;
    display: flex;
    align-self: stretch;
    align-items: flex-start;
    flex-shrink: 0;
    justify-content: space-between;
}

.footer-footer-links3 {
    gap: 24px;
    display: flex;
    align-items: flex-start;
}

@media(max-width: 991px) {
    .footer-newsletter {
        width: 300px;
    }
    .footer-form {
        width: 100%;
        flex-direction: column;
    }
    .footer-container {
        width: 100%;
    }
    .footer-text-input {
        width: 100%;
        padding: var(--dl-layout-space-halfunit);
    }
    .footer-button {
        width: 100%;
        padding-top: var(--dl-layout-space-halfunit);
        padding-left: var(--dl-layout-space-halfunit);
        padding-right: var(--dl-layout-space-halfunit);
        padding-bottom: var(--dl-layout-space-halfunit);
    }
}

@media(max-width: 767px) {
    .footer-content {
        flex-direction: column;
    }
    .footer-newsletter {
        width: 100%;
    }
    .footer-form {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
    }
    .footer-container {
        width: 100%;
    }
    .footer-button {
        width: 208px;
    }
    .footer-links {
        width: 100%;
        align-items: flex-start;
        justify-content: center;
    }
    .footer-column1 {
        align-items: center;
    }
    .footer-column1-title {
        text-align: center;
    }
    .footer-footer-links1 {
        align-self: center;
    }
    .footer-column2 {
        align-items: center;
    }
    .footer-column2-title {
        text-align: center;
    }
    .footer-footer-links2 {
        align-self: center;
    }
    .footer-column3 {
        align-items: center;
    }
    .footer-social-link1-title {
        text-align: center;
    }
    .footer-social-links {
        align-self: center;
    }
    .footer-row {
        flex-direction: column;
    }
}

@media(max-width: 479px) {
    .footer-actions {
        width: 100%;
    }
    .footer-form {
        width: 100%;
        flex-direction: column;
    }
    .footer-container {
        width: 100%;
    }
    .footer-button {
        width: 100%;
    }
    .footer-links {
        flex-direction: column;
    }
    .footer-column1 {
        width: 100%;
        max-width: 100%;
        align-items: center;
        justify-content: center;
    }
    .footer-footer-links1 {
        align-items: center;
        justify-content: center;
    }
    .footer-column2 {
        width: 100%;
        max-width: 100%;
        align-items: center;
        justify-content: center;
    }
    .footer-footer-links2 {
        align-items: center;
        justify-content: center;
    }
    .footer-column3 {
        width: 100%;
        max-width: 100%;
        align-items: center;
        justify-content: center;
    }
    .footer-social-links {
        align-items: center;
        justify-content: center;
    }
    .footer-credits {
        gap: 0;
    }
    .footer-row {
        align-items: center;
        justify-content: center;
    }
    .footer-footer-links3 {
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
}

/* Add these styles to your existing CSS file, preferably footer.css */

/* Footer base styles */
.footer-footer1 {
    background-color: var(--dark-bg-secondary); /* A slightly lighter dark background */
    color: var(--dark-text-primary);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4); /* Subtle shadow at the top */
    padding-top: 40px; /* Adjust padding as needed */
    padding-bottom: 40px;
}

.footer-max-width {
    max-width: 1200px; /* Match your header's max-width for consistency */
    margin: 0 auto;
    padding: 0 20px; /* Add some horizontal padding */
}

/* Newsletter section */
.footer-newsletter span.thq-body-small {
    color: var(--dark-text-secondary); /* Muted text for descriptions */
}

.footer-text-input {
    background-color: var(--dark-input-bg);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-input-border);
}

.footer-text-input::placeholder {
    color: var(--dark-input-placeholder);
}

.footer-text-input:focus {
    border-color: var(--dark-accent-green);
    outline: 3px solid rgba(88, 214, 141, 0.4);
    outline-offset: 2px;
}

.footer-button {
    background-color: var(--dark-accent-green); /* Use your accent color for buttons */
    color: var(--dark-bg-primary); /* Dark text on green button */
    border: none; /* Remove outline for solid button */
    padding: 10px 20px; /* Adjust padding as needed */
    border-radius: 8px; /* Match other buttons */
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

.footer-button:hover {
    background-color: var(--dark-accent-green-hover);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.footer-content2.thq-body-small span {
    color: var(--dark-text-muted); /* Even more muted for small, secondary text */
}

/* Links sections */
.footer-column1-title,
.footer-column2-title,
.footer-social-link1-title {
    color: var(--dark-text-primary); /* Section titles should be primary text color */
}

.footer-footer-links1 a,
.footer-footer-links2 a {
    color: var(--dark-text-secondary); /* Default link color */
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-footer-links1 a:hover,
.footer-footer-links2 a:hover {
    color: var(--dark-accent-green); /* Accent color on hover */
    text-decoration: underline; /* Add underline on hover for clarity */
}

/* Social links */
.footer-social-links a {
    color: var(--dark-text-secondary); /* Default social icon/text color */
    text-decoration: none;
    display: flex; /* Align icon and text */
    align-items: center;
    gap: 8px; /* Space between icon and text */
    transition: color 0.2s ease;
}

.footer-social-links a:hover {
    color: var(--dark-accent-green); /* Accent color on hover */
}

.footer-social-links svg.thq-icon-small {
    fill: var(--dark-text-secondary); /* Default icon color */
    transition: fill 0.2s ease;
}

.footer-social-links a:hover svg.thq-icon-small {
    fill: var(--dark-accent-green); /* Accent color for icon on hover */
}

/* Credits section */
.thq-divider-horizontal {
    background-color: var(--dark-border-color); /* Darker border for the divider */
}

.footer-credits span.thq-body-small {
    color: var(--dark-text-muted); /* Muted color for copyright text */
}

/* General typography adjustments if not already handled by body */
.thq-body-large {
    color: var(--dark-text-primary);
}

.thq-body-small {
    color: var(--dark-text-secondary);
}