/* ==========================================================
   FOOTER
========================================================== */

.site-footer {

    margin-top: 100px;

    background: #243042;

    color: rgba(255,255,255,.85);

}

.footer {

    padding: 80px 0 24px;

}


/* ==========================================================
   FOOTER LAYOUT
========================================================== */

.footer-grid {

    display: grid;

    grid-template-columns:
        1.6fr
        1fr
        1.1fr
        1fr;

    gap: 64px;

    padding-top: 16px;

    align-items: start;

}

.footer-grid > div {

    min-width: 0;

}

.footer-section h3 {

    margin-bottom: 20px;

    font-size: 20px;

    font-weight: 700;

    color: #ffffff !important;

}


/* ==========================================================
   BRAND
========================================================== */

.footer-brand {

    max-width: 320px;

}

.footer-logo {

    margin-bottom: 20px;

}

.footer-logo img {

    display: block;

    width: 100px;

    height: auto;

}

.footer-description {

    margin-bottom: 24px;

    line-height: 1.7;

    color: rgba(255,255,255,.72);

}


/* ==========================================================
   HEADINGS
========================================================== */

.footer-title,
.footer h3,
.footer h4 {

    margin-bottom: 20px;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.3;

    color: #ffffff;

}


/* ==========================================================
   FOOTER LINKS
========================================================== */

.footer-links {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.footer-links a {

    color: rgba(255,255,255,.72);

    transition: .2s ease;

}

.footer-links a:hover {

    color: #ffffff;

}


/* ==========================================================
   CONTACT
========================================================== */

.footer-contact {

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.footer-contact-item,
.footer-contact li {

    display: flex;

    align-items: center;

    gap: 12px;

}

.footer-contact-item {

    line-height: 1.6;

}


/* ==========================================================
   ICONS
========================================================== */

.footer-contact-item img,
.footer-contact-item svg,
.footer-contact-item i {

    width: 18px !important;

    height: 18px !important;

    min-width: 18px;

    margin-top: 3px;

    object-fit: contain;

    flex-shrink: 0;

}

.footer-icon {

    width: 18px !important;

    height: 18px !important;

    min-width: 18px;

    object-fit: contain;

    flex-shrink: 0;

    filter:
        brightness(0)
        saturate(100%)
        invert(22%)
        sepia(90%)
        saturate(5000%)
        hue-rotate(345deg);

}


/* ==========================================================
   BUSINESS HOURS
========================================================== */

.footer-hours {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.footer-hours div {

    line-height: 1.6;

}


/* ==========================================================
   SOCIAL
========================================================== */

.footer-social {

    display: flex;

    gap: 12px;

    margin-top: 24px;

}

.footer-social a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    background: rgba(255,255,255,.08);

    border-radius: 50%;

    transition: .25s ease;

}

.footer-social a:hover {

    background: var(--color-primary);

    transform: translateY(-2px);

}

.footer-social img,
.footer-social svg {

    width: 18px !important;

    height: 18px !important;

    filter: brightness(0) invert(1);

}


/* ==========================================================
   FOOTER BOTTOM
========================================================== */

.footer-bottom {

    margin-top: 40px;

    padding-top: 24px;

    align-items: center;

    border-top: 1px solid rgba(255,255,255,.08);

}

.footer-bottom-wrapper {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    text-align: center;

}

.footer-copyright {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    font-size: 15px;

    text-align: center;

    color: rgba(255,255,255,.65);

}

.footer-bottom-links {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 16px;

    text-align: center;

}

.footer-bottom-links a {

    font-size: 14px;

    color: rgba(255,255,255,.72);

}

.footer-bottom-links a:hover {

    color: #ffffff;

}