/* =====================
   RESPONSIVE HP
===================== */

@media(max-width:768px){


/* HEADER */
.nav-flex{
    flex-direction:column;
    gap:15px;
}


nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}


.nav-icons{
    width:100%;
    justify-content:center;
}


/* HERO */
.hero{
    height:auto;
}


.hero-content{
    padding:40px 20px;
    text-align:center;
}


.hero-content h1{
    font-size:32px;
}


.hero-content p{
    font-size:14px;
}


/* FEATURE */
.features-box{

    grid-template-columns:1fr !important;
    gap:20px;

}


/* PRODUK */
.product-grid{

    grid-template-columns:1fr !important;

}


.card img{

    height:250px;
}



/* FOOTER */

.footer-grid{

    grid-template-columns:1fr !important;
    gap:25px;

}



/* DETAIL PRODUK */

.detail-container{

    grid-template-columns:1fr !important;
    padding:15px;

}


.gambar-produk img{

    height:300px;

}


.nama-produk{

    font-size:28px;

}


.harga{

    font-size:25px;

}


/* BUTTON DETAIL */

.action-buttons{

    flex-direction:column;

}


.cart-area{

    width:100%;

}



/* CART / TABEL */

table{

    font-size:12px;

}


th,td{

    padding:8px;

}


img{

    width:60px;
    height:60px;

}



/* PESANAN */

.card{

    padding:15px;

}


.header{

    flex-direction:column;
    align-items:flex-start;
    gap:10px;

}


}