/* ========================================================= 
   FOOTER 
========================================================= */ 
 
.footer { 
    padding: 75px 0 0; 
 
    background: var(--hijau-tua); 
 
    color: var(--krem); 
} 
 
 
/* ========================================================= 
   MAIN 
========================================================= */ 
 
.footer-main { 
    display: grid; 
 
    grid-template-columns: 
        1.65fr 
        .75fr 
        .75fr 
        1fr; 
 
    gap: 45px; 
 
    padding-bottom: 55px; 
} 
 
 
/* ========================================================= 
   BRAND 
========================================================= */ 
 
.footer-brand { 
    max-width: 430px; 
} 
 
 
.footer-logo { 
    display: inline-flex; 
 
    align-items: center; 
 
    gap: 11px; 
 
    color: var(--krem); 
 
    font-family: 
        "Inter", 
        sans-serif; 
 
    font-size: 16px; 
 
    font-weight: 600; 
 
    text-decoration: none; 
} 
 
 
.footer-logo-mark { 
    display: flex; 
 
    align-items: center; 
    justify-content: center; 
 
    width: 48px; 
    height: 48px; 
 
    flex: 0 0 48px; 
} 
 
 
.footer-logo-mark img { 
    display: block; 
 
    width: 44px; 
    height: 44px; 
 
    object-fit: contain; 
} 
 
 
.footer-brand p { 
    max-width: 405px; 
 
    margin: 19px 0 0; 
 
    font-size: 11px; 
 
    line-height: 1.8; 
 
    color: 
        rgba(247, 244, 236, 0.6); 
} 
 
 
.footer-location { 
    display: block; 
 
    margin-top: 20px; 
 
    font-family: 
        "IBM Plex Mono", 
        monospace; 
 
    font-size: 8px; 
 
    line-height: 1.6; 
 
    text-transform: uppercase; 
 
    letter-spacing: .08em; 
 
    color: 
        rgba(247, 244, 236, 0.38); 
} 
 
 
/* ========================================================= 
   COLUMNS 
========================================================= */ 
 
.footer-column { 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
    gap: 10px; 
} 
 
 
.footer-heading { 
    display: block; 
 
    margin-bottom: 8px; 
 
    font-family: 
        "IBM Plex Mono", 
        monospace; 
 
    font-size: 8px; 
 
    text-transform: uppercase; 
 
    letter-spacing: .1em; 
 
    color: var(--emas); 
} 
 
 
.footer-column > a { 
    color: 
        rgba(247, 244, 236, 0.65); 
 
    font-size: 11px; 
 
    line-height: 1.5; 
 
    text-decoration: none; 
 
    transition: 
        color .2s ease, 
        transform .2s ease; 
} 
 
 
.footer-column > a:hover { 
    color: var(--krem); 
 
    transform: translateX(2px); 
} 
 
 
/* ========================================================= 
   CONTACT 
========================================================= */ 
 
.footer-contact { 
    max-width: 250px; 
} 
 
 
.footer-contact-text { 
    font-size: 11px; 
 
    line-height: 1.65; 
 
    color: 
        rgba(247, 244, 236, 0.63); 
} 
 
 
.footer-contact > a { 
    display: inline-flex; 
 
    align-items: center; 
 
    gap: 7px; 
 
    margin-top: 6px; 
 
    color: var(--krem); 
 
    font-size: 10px; 
 
    font-weight: 600; 
 
    text-decoration: none; 
} 
 
 
.footer-contact > a span { 
    font-size: 14px; 
 
    transition: 
        transform .2s ease; 
} 
 
 
.footer-contact > a:hover { 
    color: var(--emas); 
} 
 
 
.footer-contact > a:hover span { 
    transform: translateX(3px); 
} 
 
 
/* ========================================================= 
   BOTTOM 
========================================================= */ 
 
.footer-bottom { 
    display: grid; 
 
    grid-template-columns: 
        1fr 
        auto 
        1fr; 
 
    align-items: center; 
 
    gap: 20px; 
 
    min-height: 62px; 
 
    border-top: 
        1px solid rgba(247, 244, 236, 0.12); 
 
    color: 
        rgba(247, 244, 236, 0.4); 
 
    font-family: 
        "IBM Plex Mono", 
        monospace; 
 
    font-size: 8px; 
 
    text-transform: uppercase; 
 
    letter-spacing: .05em; 
} 
 
 
.footer-bottom-center { 
    text-align: center; 
} 
 
 
.footer-bottom > a { 
    justify-self: end; 
 
    display: inline-flex; 
 
    align-items: center; 
 
    gap: 7px; 
 
    color: 
        rgba(247, 244, 236, 0.52); 
 
    text-decoration: none; 
 
    transition: 
        color .2s ease; 
} 
 
 
.footer-bottom > a span { 
    font-size: 13px; 
 
    transition: 
        transform .2s ease; 
} 
 
 
.footer-bottom > a:hover { 
    color: var(--emas); 
} 
 
 
.footer-bottom > a:hover span { 
    transform: translateY(-3px); 
} 
 
 
/* ========================================================= 
   TABLET 
========================================================= */ 
 
@media (max-width: 900px) { 
 
    .footer-main { 
        grid-template-columns: 
            1.5fr 
            1fr 
            1fr; 
 
        gap: 35px; 
    } 
 
 
    .footer-brand { 
        grid-column: 1 / -1; 
    } 
 
 
    .footer-contact { 
        grid-column: 1 / -1; 
 
        max-width: 100%; 
    } 
 
} 
 
 
/* ========================================================= 
   MOBILE 
========================================================= */ 
 
@media (max-width: 600px) { 
 
    .footer { 
        padding-top: 55px; 
    } 
 
 
    .footer-main { 
        grid-template-columns: 1fr 1fr; 
 
        gap: 35px 25px; 
 
        padding-bottom: 40px; 
    } 
 
 
    .footer-brand { 
        grid-column: 1 / -1; 
    } 
 
 
    .footer-brand p { 
        font-size: 10px; 
    } 
 
 
    .footer-contact { 
        grid-column: 1 / -1; 
    } 
 
 
    .footer-bottom { 
        display: flex; 
 
        flex-direction: column; 
 
        align-items: flex-start; 
 
        justify-content: center; 
 
        gap: 8px; 
 
        padding: 15px 0; 
    } 
 
 
    .footer-bottom-center { 
        text-align: left; 
    } 
 
 
    .footer-bottom > a { 
        justify-self: auto; 
    } 
 
} 
 
 
/* ========================================================= 
   EXTRA SMALL 
========================================================= */ 
 
@media (max-width: 400px) { 
 
    .footer-main { 
        grid-template-columns: 1fr; 
    } 
 
 
    .footer-brand, 
    .footer-contact { 
        grid-column: auto; 
    } 
 
}