
        /* Custom UI Styles */
        body {
            font-family: 'Segoe UI', 'Arial', sans-serif;
            background-color: #fff;
            color: #222;
        }
        .carousel-item h1
        {
font-size: 35px;
        }
        .top-bar {
            background: linear-gradient(90deg, #dc3545 60%, #ff764a 100%);
            font-size: 0.95rem;
            letter-spacing: 0.03em;
        }
        .custom-navbar {
            background: #fff;
            box-shadow: 0 2px 12px rgba(220,53,69,0.07);
            border-bottom: 1.5px solid #f8d7da;
            
  position: relative;
  z-index: 1;
}

        
.custom-navbar::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -20px; /* letakkan tepat di bawah navbar */
  left: 0;
  width: 100%;
  height: 60px; /* tinggi gelombang */
  background: url("https://www.agencontainer.co.id/jasa-web/catering/assets/images/1.svg") no-repeat bottom;
  background-size: cover;
  z-index: 0;
}

        .navbar-brand {
            font-weight: 700;
            color: #dc3545 !important;
            font-size: 1.8rem;
        }
        .navbar-nav .nav-link {
            font-weight: 500;
            font-size: 1rem;
            color: #333 !important;
            transition: color 0.2s;
            letter-spacing: 0.04em;
            margin: 0 0.5rem;
        }
        .navbar-nav .nav-link.active,
        .navbar-nav .nav-link:hover {
            color: #dc3545 !important;
        }
        .btn-danger {
            background: linear-gradient(90deg, #dc3545 70%, #ff764a 100%);
            border: none;
            font-weight: 600;
            box-shadow: 0 6px 18px rgba(220,53,69,0.07);
        }
        .btn-filter {
            background: #fff;
            color: #dc3545;
            border: 1px solid #dc3545;
            border-radius: 50px;
            font-weight: 500;
            margin: 0 6px;
            transition: background 0.2s, color 0.2s;
        }
        .btn-filter.active, .btn-filter:focus, .btn-filter:hover {
            background: #dc3545;
            color: #fff;
        }
        /* Hero section */
        #hero {
            background: linear-gradient(90deg, whitesmoke 100%);
        }
        .food-vector {
            max-width: 500px;
            border-radius: 2rem;
            margin-bottom: 1rem;
        }
       


  /* About section */

.about-section 
{
background: #fff;
}
.about-vector 
{
position: absolute;
max-width: 320px;
right: -80px;
bottom: 100;
}

.main-img {
  border-radius: 1.5rem;
  box-shadow: 0 6px 32px rgba(0,0,0,0.1);
  z-index: 2; /* gambar utama */
}
.vector-img 
{
  position: absolute;
  bottom: -170px;  /* atur posisi */
  left: 800px;   /* atur posisi */
  max-width: 250px;
  opacity: 0.7;
  z-index: 1; /* di belakang main */
}

@media (max-width: 767px) {
  .vector-img {
    bottom: -100px;   /* turunkan sedikit */
    left: 90%;      /* rata tengah */
    transform: translateX(-50%); /* biar pas di tengah */
    max-width: 200px; /* kecilin supaya pas */
  }
}
.about-img-wrapper {
  position: relative; /* ✅ parent untuk vector */
  display: inline-block;
} 
.about-img-wrapper img 
{
border-radius: 2rem;
max-height: 400px;
}


.event-section {
  position: relative;   /* ✅ penting */
  background: #f8f9fa;
  min-height: 400px;    /* supaya ada tinggi */
  overflow: hidden;     /* biar dekor nggak keluar */
}

.event-decor {
  position: absolute;
  right: 0;      /* pojok kanan */
  bottom: 0;     /* pojok bawah */
  width: 250px;  /* atur sesuai gambar */
  opacity: 0.6;  /* transparan dekor */
  z-index: 1;    /* tampil di depan background */
  pointer-events: none;
}

.bg-service
{
  background: url(https://www.agencontainer.co.id/jasa-web/catering/assets/images/bg.jpg);
  background-attachment: fixed; /* ini yg bikin diam */
}

        .service-card {
            background: #fff;
            border-left: 6px solid #dc3545;
        }
        /* Product card */
        .product-card {
            background: #fff;
            border-radius: 2rem;
            box-shadow: 0 6px 24px #f8d7da;
            min-height: 140px;
            transition: box-shadow 0.2s;

        }
        .product-card:hover {
            box-shadow: 0 10px 36px #dc3545a1;
        }
        .product-card img {
           
            box-shadow: 0 8px 18px #e7c3a3;
            border: 8px solid #fff;
        }
        .cart-btn .btn {
            background: #dc3545;
            color: #fff;
            font-size: 1.4rem;
            border-radius: 50%;
            box-shadow: 0 2px 12px #dc3545a1;
        }
        /* Gallery */
        .tab-content img {
            border-radius: 1.5rem;
            box-shadow: 0 2px 16px #f8d7da;
            transition: transform 0.15s;
        }
        .tab-content img:hover {
            transform: scale(1.05);
        }
        /* Testimonials */
        .testimonial-card {
            border-left: 6px solid #dc3545;
            transition: box-shadow 0.2s;
        }
        .testimonial-card:hover {
            box-shadow: 0 8px 32px #dc3545a1;
        }
        .testimonial-card img {
            width: 60px;
            height: 60px;
            border: 3px solid #dc3545;
        }
        .stars {
            font-size: 1.2rem;
        }
        /* Responsive Tweaks */
        @media (max-width: 767px) {
            .navbar-brand { font-size: 1.2rem; }
            .product-card { 
             
              min-height: 350px; 
            }
            
        }
   