/* =========================================================
   SHARED FOOTER
   PT KROMO SAKTI MANDRAGUNA
   ========================================================= */

.site-footer {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #061a0b 0%,
            #0b3b18 55%,
            #0d5b25 100%
        );

    color: #ffffff;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );
}


/* =========================================================
   DECORATIVE BACKGROUND
   ========================================================= */

.site-footer::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -190px;
    top: -260px;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            139,
            207,
            47,
            0.14
        );

    box-shadow:
        0 0 0 65px
        rgba(
            139,
            207,
            47,
            0.025
        ),
        0 0 0 130px
        rgba(
            139,
            207,
            47,
            0.015
        );

    pointer-events: none;
}


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

.site-footer-main {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.45fr
        0.75fr
        0.95fr
        1fr;

    gap: 55px;

    padding:
        72px 0 58px;
}


/* =========================================================
   COMPANY
   ========================================================= */

.site-footer-company {
    max-width: 390px;
}

.site-footer-logo {
    display: inline-flex;

    align-items: center;

    margin-bottom: 18px;
}

.site-footer-logo img {
    display: block;

    width: 58px;

    height: 58px;

    object-fit: contain;
}

.site-footer-company h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        1.15rem;

    line-height:
        1.25;

    letter-spacing:
        -0.015em;
}

.site-footer-tagline {
    margin:
        8px 0 17px;

    color:
        #b8eb82;

    font-size:
        0.73rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}

.site-footer-description {
    max-width: 360px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.67
        );

    font-size:
        0.82rem;

    line-height:
        1.8;
}


/* =========================================================
   COLUMN
   ========================================================= */

.site-footer-column {
    position:
        relative;

    z-index:
        2;
}

.site-footer-eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        9px;

    color:
        #9fdf5f;

    font-size:
        0.63rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}

.site-footer-eyebrow::before {
    content:
        "";

    width:
        24px;

    height:
        2px;

    background:
        #8bcf2f;
}

.site-footer-column h3 {
    margin:
        0 0 17px;

    color:
        #ffffff;

    font-size:
        1.15rem;

    line-height:
        1.25;
}


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

.site-footer-links {
    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}

.site-footer-links a {
    display:
        inline-flex;

    width:
        fit-content;

    color:
        rgba(
            255,
            255,
            255,
            0.69
        );

    font-size:
        0.8rem;

    line-height:
        1.5;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.site-footer-links a:hover {
    color:
        #b8eb82;

    transform:
        translateX(4px);
}


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

.site-footer-contact {
    display:
        flex;

    flex-direction:
        column;
}

.site-footer-contact-item,
.site-footer-address {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-bottom:
        12px;

    color:
        rgba(
            255,
            255,
            255,
            0.70
        );

    font-size:
        0.79rem;

    line-height:
        1.6;
}

.site-footer-contact-item {
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.site-footer-contact-item:hover {
    color:
        #b8eb82;

    transform:
        translateX(3px);
}

.site-footer-contact-icon {
    width:
        21px;

    flex:
        0 0 21px;

    color:
        #8bcf2f;

    font-size:
        0.9rem;

    line-height:
        1.5;
}


/* =========================================================
   ADDRESS
   ========================================================= */

.site-footer-address {
    margin-top:
        4px;

    margin-bottom:
        0;
}


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

.site-footer-bottom {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        20px 0;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );
}

.site-footer-bottom p {
    margin:
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.56
        );

    font-size:
        0.72rem;
}

.site-footer-bottom-links {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        rgba(
            255,
            255,
            255,
            0.45
        );

    font-size:
        0.72rem;
}

.site-footer-bottom-links a {
    color:
        rgba(
            255,
            255,
            255,
            0.60
        );

    transition:
        color 0.2s ease;
}

.site-footer-bottom-links a:hover {
    color:
        #b8eb82;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .site-footer-main {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            40px;
    }

    .site-footer-company {
        max-width:
            none;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .site-footer-main {
        grid-template-columns:
            1fr;

        gap:
            34px;

        padding:
            52px 0 40px;
    }


    .site-footer-company {
        max-width:
            100%;
    }


    .site-footer-logo img {
        width:
            52px;

        height:
            52px;
    }


    .site-footer-company h2 {
        font-size:
            1rem;
    }


    .site-footer-description {
        font-size:
            0.78rem;
    }


    .site-footer-column h3 {
        font-size:
            1rem;
    }


    .site-footer-links {
        gap:
            8px;
    }


    .site-footer-links a,
    .site-footer-contact-item,
    .site-footer-address {
        font-size:
            0.78rem;
    }


    .site-footer-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;

        padding:
            18px 0;
    }


    .site-footer-bottom-links {
        flex-wrap:
            wrap;

        font-size:
            0.68rem;
    }


    .site-footer::before {
        width:
            300px;

        height:
            300px;

        right:
            -180px;

        top:
            -140px;
    }

}