/* ===================================
   RESPONSIVE.CSS
   Berlaku untuk semua halaman
=================================== */

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

@media (max-width:992px){

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

}

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

@media (max-width:768px){

/* ===========================
   NAVBAR
=========================== */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
}

.navbar{
    position:relative;
    height:60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo img{
    width:32px;
    height:32px;
}

.logo h2{
    font-size:18px;
}

.menu-toggle{
    display:block;
    background:none;
    border:none;
    color:#fff;
    font-size:24px;
    cursor:pointer;
}

.nav-menu{

    display:none;

    position:absolute;

    top:60px;

    left:0;

    width:100%;

    background:#386641;

    flex-direction:column;

    gap:0;

    box-shadow:0 10px 20px rgba(0,0,0,.15);

    z-index:999;

}

.nav-menu.active{

    display:flex;

}

.nav-menu li{

    width:100%;

}

.nav-menu a{

    display:block;

    padding:15px 20px;

    font-size:15px;

    color:#fff;

}

.nav-menu a:hover{

    background:#2f5637;

}

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

footer{
    padding:40px 0 15px;
}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    column-gap:18px;   /* jarak kiri-kanan */
    row-gap:8px;       /* sebelumnya 18px, diperkecil */

    align-items:start;

    padding-bottom:20px;

}

.footer-about{

    grid-column:1;
    grid-row:1 / 4;

}

.footer-grid > div:nth-child(2){

    grid-column:2;
    grid-row:1;

}

.footer-grid > div:nth-child(3){

    grid-column:2;
    grid-row:2;

}

.footer-grid > div:nth-child(4){

    grid-column:2;
    grid-row:3;

}

.footer-grid h3{

    font-size:14px;
    margin-bottom:10px;

}

.footer-grid h4{

    font-size:12px;
    margin-bottom:4px;   /* sebelumnya 8px */

}

.footer-grid p{

    font-size:10px;
    line-height:1.6;
    max-width:220px;

}

.footer-grid ul{

    margin:0;
    padding:0;

}

.footer-grid li{

    margin-bottom:2px;   /* sebelumnya 4px */
    line-height:1.4;
    font-size:10px;

}

.footer-grid a{

    font-size:10px;

}

.copyright{

    padding:8px 0;
    font-size:8px;

}
}