.footer{

    width:100%;
    background:#282f49;

    padding:80px 0 35px;

    font-family:Arial, Helvetica, sans-serif;

    color:#171717;

}

.footer-column{
    margin-left:-60px;
}

.footer-container{
    max-width:1218px;
    margin:auto;
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    gap:50px;
}



/* BRAND */
.footer-brand {
    transform: translateY(-30px);
}

.footer-brand img {
    width: 150px;
    height: auto;
    display: block;
    margin-bottom: 40px;
}

.footer-brand h2{

    font-size:28px;

    letter-spacing:-2px;

    margin:0 0 28px;

    font-weight:800;

}



.footer-brand p{

    font-size:16px;

    line-height:1.3;

    color:#d2d2d2;

    margin:0;

}



/* COLUMN */

.footer-column h4{

    font-size:15px;

    letter-spacing:.5px;

    margin:0 0 30px;

    font-weight:700;

    color:#ffffff;

}



.footer-column a{

    display:block;

    text-decoration:none;

    color:#ffffff;

    font-size:18px;

    margin-bottom:22px;

    transition:.3s;

}



.footer-column a:hover{

    opacity:.6;
    color:#4086e1;

}



/* PARTNER */

.partner{
    margin-left:-50px;
}



/* BOTTOM */

.footer-bottom{

    max-width:1218px;

    margin:75px auto 0;

    padding-top:40px;

    border-top:1px solid #ddd;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.footer-bottom p{

    margin:0;

    color:#ffffff;

    font-size:15px;

}



/* ICON */

/* ICON */

.footer-social{

    display:flex;
    gap:38px;

}

.footer-social a{

    width:22px;
    height:22px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.footer-social svg{

    width:100%;
    height:100%;

}

/* Untuk Instagram (outline) */

.footer-social a:not(.icon-fill) svg{

    fill:none;

    stroke:#fff;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

}

/* Untuk WhatsApp & TikTok */

.footer-social a.icon-fill svg{

    fill:#fff;

    stroke:none;

}



/* MOBILE */

@media(max-width:768px){


.footer{

    padding:50px 25px 30px;

}



.footer-container{

    grid-template-columns:1fr;

    gap:40px;

}



.footer-brand h2{

    font-size:38px;

}



.partner{

    padding-left:0;

}



.footer-bottom{

    margin-top:40px;

    flex-direction:column;

    gap:30px;

    align-items:flex-start;

}



.footer-social{

    gap:25px;

}


}

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

/* Laptop */
@media (max-width:1200px){

    .footer{
        padding:70px 30px 35px;
    }

    .footer-container{
        max-width:100%;
        grid-template-columns:1.2fr 1fr 1fr;
        gap:40px;
    }

    .footer-column{
        margin-left:-20px;
    }

}

/* Tablet */
@media (max-width:992px){

    .footer{
        padding:60px 30px;
    }

    .footer-container{

        grid-template-columns:1fr 1fr;

        gap:45px;

    }

    .footer-brand{

        grid-column:1 / -1;

        transform:none;

    }

    .footer-brand img{

        width:130px;

    }

    .footer-column{

        margin-left:0;

    }

    .partner{

        margin-left:0;

    }

}

/* Mobile */
@media (max-width:768px){

    .footer{

        padding:55px 20px 30px;

    }

    .footer-container{

        grid-template-columns:1fr;

        gap:35px;

    }

    .footer-brand{

        transform:none;

        text-align:left;

    }

    .footer-brand img{

        width:120px;

        margin-bottom:16px;

    }

    .footer-brand p{

        font-size:16px;

    }

    .footer-column{

        margin-left:0;

    }

    .footer-column h4{

        margin-bottom:18px;

        font-size:14px;

    }

    .footer-column a{

        font-size:16px;

        margin-bottom:16px;

    }

    .partner{

        margin-left:0;

    }

    .footer-bottom{

        margin-top:35px;

        padding-top:25px;

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }

    .footer-bottom p{

        font-size:14px;

    }

    .footer-social{

        gap:20px;

    }

}

/* Small Mobile */
@media (max-width:480px){

    .footer{

        padding:45px 18px 25px;

    }

    .footer-brand img{

        width:105px;

    }

    .footer-brand p{

        font-size:15px;

    }

    .footer-column a{

        font-size:15px;

    }

}