/* =========================================================
   SHARED FOOTER
   Layout only. Copy, phone, email and links stay.
========================================================= */

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer {
    padding: 64px 0 0;
    background: #111111;
    color: #d7d7d7;
    border-top: 3px solid #00AEEF;
    font-family: "Google Sans Flex", sans-serif;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-grid {
    width: min(1160px, calc(100% - 48px));
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(220px, 1.7fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.85fr) minmax(150px, 1.15fr);
    gap: 36px 28px;
    align-items: start;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-about {
    grid-column: auto;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer h2,
:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer h4 {
    margin: 0 0 16px;
    color: #ffffff;
    font-weight: 800;
    line-height: 1.3;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-about h2 {
    font-size: 18px;
    letter-spacing: 0.02em;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer h4 {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer h2::after,
:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer h4::after,
:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-about h2::after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    margin-top: 12px;
    background: #00AEEF;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-tagline,
:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-about p {
    margin: 0;
    color: #cfcfcf;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    text-align: left;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer li {
    margin: 0 0 8px;
    color: #cfcfcf;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer a {
    color: #d8d8d8;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer a:hover {
    color: #4FC3F7;
    padding-left: 0;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer p {
    margin: 0 0 8px;
    color: #cfcfcf;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-email,
:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-email a,
:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-grid .footer-email,
:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-grid .footer-email > span {
    white-space: normal;
    overflow-wrap: anywhere;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-social {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-social a,
:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-social a:nth-child(1),
:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-social a:nth-child(2),
:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-social a:nth-child(3) {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    box-shadow: none;
    transform: none;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-social a:hover {
    background: #00AEEF;
    color: #ffffff;
    padding-left: 0;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 174, 239, 0.28);
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-social i {
    font-size: 15px;
}

:is(
    body.home-page,
    body.about-page,
    body.services-page,
    body.products-page,
    body.projects-page,
    body.contact-page,
    body
) footer.footer .footer-bottom {
    width: min(1160px, calc(100% - 48px));
    max-width: 1160px;
    margin: 40px auto 0;
    padding: 18px 0 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #9a9a9a;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: center;
}

@media (max-width: 1100px) {

    :is(
        body.home-page,
        body.about-page,
        body.services-page,
        body.products-page,
        body.projects-page,
        body.contact-page,
        body
    ) footer.footer .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 24px;
    }

    :is(
        body.home-page,
        body.about-page,
        body.services-page,
        body.products-page,
        body.projects-page,
        body.contact-page,
        body
    ) footer.footer .footer-about {
        grid-column: 1 / -1;
    }

}

@media (max-width: 640px) {

    :is(
        body.home-page,
        body.about-page,
        body.services-page,
        body.products-page,
        body.projects-page,
        body.contact-page,
        body
    ) footer.footer {
        padding-top: 48px;
    }

    :is(
        body.home-page,
        body.about-page,
        body.services-page,
        body.products-page,
        body.projects-page,
        body.contact-page,
        body
    ) footer.footer .footer-grid,
    :is(
        body.home-page,
        body.about-page,
        body.services-page,
        body.products-page,
        body.projects-page,
        body.contact-page,
        body
    ) footer.footer .footer-bottom {
        width: min(1160px, calc(100% - 32px));
    }

    :is(
        body.home-page,
        body.about-page,
        body.services-page,
        body.products-page,
        body.projects-page,
        body.contact-page,
        body
    ) footer.footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

}