body{

    background:#f5f5f5;

    font-family:Arial, sans-serif;
}

/* NAVBAR */

.navbar{

    box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

/* HERO */

.hero{

    background-image:linear-gradient(
        rgba(0,0,0,0.6),
        rgba(0,0,0,0.6)
    ),
    url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1600&q=80') !important;

    background-size:cover;
    background-position:center;
    height:400px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:white;

}

.hero h1{

    font-size:55px;

    font-weight:bold;
}

.hero p{

    font-size:20px;
}

/* IKLAN PRODUK */

.promo-ad-box{

    background:linear-gradient(135deg, #f8d7da, #ffffff);

    border:1px solid #f1aeb5;

    border-radius:18px;

    padding:30px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    box-shadow:0 8px 20px rgba(0,0,0,0.12);

    margin-top:30px;

    margin-bottom:30px;
}

.promo-ad-text{

    flex:1;
}

.promo-label{

    background:#dc3545;

    color:white;

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

    font-weight:bold;

    display:inline-block;

    margin-bottom:10px;
}

.promo-ad-text h2{

    margin-top:10px;

    font-weight:bold;

    color:#212529;
}

.promo-ad-text p{

    color:#555;

    font-size:16px;

    margin-top:10px;
}

.promo-ad-text h4{

    color:#dc3545;

    font-weight:bold;

    margin-bottom:20px;
}

.promo-ad-image img{

    width:260px;

    height:220px;

    object-fit:cover;

    border-radius:15px;

    box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

/* PRODUCT CARD */

.product-card{

    border:none;

    border-radius:15px;

    overflow:hidden;

    transition:0.3s;

    box-shadow:0 2px 10px rgba(0,0,0,0.1);

    background:white;
}

.product-card:hover{

    transform:translateY(-8px);

    box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.product-card img{

    height:300px;

    object-fit:cover;
}

.card-body{

    padding:20px;
}

.card-title{

    font-weight:bold;
}

.card-text{

    font-size:18px;

    color:#dc3545;

    font-weight:bold;
}

/* BUTTON */

.btn-dark{

    border-radius:10px;

    transition:0.3s;
}

.btn-dark:hover{

    transform:scale(1.03);
}

/* FOOTER */

.footer{

    margin-top:60px;

    background:#111;

    color:white;

    text-align:center;

    padding:20px;
}

/* WHATSAPP BUTTON */

.wa-button{

    position:fixed;

    bottom:20px;

    right:20px;

    background:#25D366;

    color:white;

    width:65px;

    height:65px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:38px;

    text-decoration:none;

    box-shadow:0 4px 10px rgba(0,0,0,0.3);

    z-index:999;
}

/* MOBILE */

@media(max-width:768px){

    .hero{

        height:300px;
    }

    .hero h1{

        font-size:35px;
    }

    .hero p{

        font-size:16px;
    }

    .product-card img{

        height:220px;
    }

    .promo-ad-box{

        flex-direction:column;

        text-align:center;

        padding:25px;
    }

    .promo-ad-image img{

        width:100%;

        height:250px;
    }
}