:root {

        }
        
        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://placehold.co/1600x600') no-repeat center center;
            background-size: cover;
            color: white;
            padding: 120px 0;
            margin-bottom: 40px;
        }
        .product-card {
            transition: all 0.3s ease;
            margin-bottom: 30px;
        }
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .product-img {
            height: 200px;
            object-fit: cover;
        }
        .discount-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #dc3545;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-weight: bold;
        }
        .footer {
            background-color: #f8f9fa;
            padding: 100px 0;
            margin-top: 60px;
        }
        .category-badge {
            margin-right: 5px;
            margin-bottom: 5px;
        }
        .search-box {
            max-width: 500px;
            margin: 0 auto;
        }
        /* Wave styles */
        .wave-top, .wave-bottom {
            position: relative;
        }
        .wave-top:before, .wave-bottom:after {
            pointer-event: none;
            z-index: -1;
            content: "";
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='currentColor' d='M0,128L48,138.7C96,149,192,171,288,170.7C384,171,480,149,576,128C672,107,768,85,864,101.3C960,117,1056,171,1152,186.7C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
            position: absolute;
            left: 0;
            width: 100%;
            height: 100px;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .wave-top:before {
            top: -100px;
        }
        .wave-bottom:after {
            bottom: -100px;
            transform: rotate(180deg);
        }

        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('asset/logo mer brownies.jpg') no-repeat center center;
            background-size: cover;
            color: white;
            padding: 120px 0;
            margin-bottom: 40px;
        }
        .product-card {
            transition: all 0.3s ease;
            margin-bottom: 30px;
        }
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .product-img {
            height: 200px;
            object-fit: cover;
        }
        .discount-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #dc3545;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-weight: bold;
        }
        .footer {
            background-color: #f8f9fa;
            padding: 40px 0;
            margin-top: 60px;
        }
        .category-badge {
            margin-right: 5px;
            margin-bottom: 5px;
        }
        .search-box {
            max-width: 500px;
            margin: 0 auto;
        }
        .warna1{
          background-color: #fff0dc;
        }  
        .warna2{
          background-color: #F0BB78;
        }  
        .warna3{
          background-color: #543A14;
        }  
        .warna4{
          background-color: #131010;
        }