@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

*{
    font-family: "Josefin Sans", sans-serif;
}
body {
  background: #ffffff;
}

#cartCount {
  font-size: 0.8rem;
}

  /*Navigation Bar*/

    .navbar {
    background-color: #d2ef98 !important;
    }

    .navbar-brand {
      font-weight: bold;
    }
    .service-icon {
      font-size: 2rem;
      color: black;
    }
    .carousel-item img {
      height: 300px;
      object-fit: cover;
    }

    /*Cart Item*/

    :root { --accent:#25d366; --muted:#6b6b6b; --bg:#f8f8f8; }
  body { font-family:Arial, sans-serif; margin:0; padding:12px; background:var(--bg); }
  header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
  .back { color:#1976d2; cursor:pointer; text-decoration:underline; }
  .cart-list { max-width:900px; margin:0 auto; background:#fff; padding:12px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
  .item { display:flex; gap:12px; align-items:center; border-bottom:1px solid #eee; padding:8px 0; }
  .item img { width:64px; height:64px; object-fit:cover; border-radius:6px; }
  .item .meta { flex:1; }
  .qty { font-weight:700; margin-left:8px; }
  .item .price { font-weight:700; color:#2e7d32; }
  .total { text-align:right; margin-top:10px; font-size:18px; font-weight:800; }
  form { max-width:900px; margin:12px auto; display:flex; flex-direction:column; gap:8px; }
  input, textarea { padding:10px; border-radius:6px; border:1px solid #ddd; width:100%; box-sizing:border-box; }
  button { background:var(--accent); color:#fff; border:none; padding:12px; border-radius:8px; font-weight:700; cursor:pointer; }
  .empty { text-align:center; padding:30px; color:var(--muted); }

    :root { --accent: #d2ef98; --bg: #f8f8f8; }
  body { font-family: Arial, Helvetica, sans-serif; margin: 0; background: var(--bg); }
  nav {
    display:flex; align-items:center; gap:12px;
    justify-content:space-between; padding:10px;
    background: var(--accent);
    flex-wrap:wrap;
  }
  .logo { font-weight:700; font-size:20px; }
  .search-container { flex:1; max-width:520px; display:flex; justify-content:center; }
  #searchInput { width:100%; max-width:420px; padding:8px 10px; border-radius:6px; border:none; }
  .cart-icon { position:relative; cursor:pointer; margin-left:12px; }
  .cart-icon img { width:34px; height:34px; display:block; }
  .cart-count {
    position:absolute; top:-6px; right:-8px; background:#d32f2f; color:#fff;
    font-size:12px; padding:3px 6px; border-radius:50%;
  }

  .products {
    max-width:1100px; margin:14px auto; padding:10px;
    display:grid; gap:14px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .product {
    background:#fff; border-radius:8px; padding:10px; border:1px solid #e6e6e6;
    display:flex; flex-direction:column; justify-content:space-between;
    box-shadow:0 1px 4px rgba(0,0,0,0.03);
  }
  .product img { width:100%; height:150px; object-fit:cover; border-radius:6px; }
  .product h3 { margin:10px 0 6px; font-size:16px; }
  .product .price { color: #2e7d32; font-weight:700; margin-bottom:8px; }
  .quantity-controls { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px; }
  .quantity-controls button {
    border: none; background:var(--accent); padding:6px 10px; border-radius:6px; font-size:16px; cursor:pointer;
  }
  .quantity-controls .qty { min-width:28px; text-align:center; display:inline-block; font-weight:600; }

  .add-to-cart {
    background: #1976d2; color:#fff; border:none; padding:9px; border-radius:6px; cursor:pointer; font-weight:700;
  }

  @media(max-width:600px){
    .search-container { order:3; width:100%; margin-top:8px; }
    nav { gap:8px; }
    .products { padding:8px; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }
  }

  /* small toast */
  .toast {
    position: fixed; right: 14px; bottom: 14px; background: #323232; color: #fff;
    padding:10px 14px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.25);
    display:none; z-index:9999;
  }

  /* Hero Section */
    .hero {
      position: relative;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-align: center;
    }

    /* Background Video */
    .hero video {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: 0;
      transform: translate(-50%, -50%);
      object-fit: cover;
    }

    /* Dark overlay */
    .hero::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 700px;
      padding: 20px;
    }

    .hero h1 {
      font-size: 3rem;
      font-weight: bold;
    }

    .hero p {
      font-size: 1.2rem;
      margin: 20px 0;
    }

    @media (max-width: 768px) {
      .hero h1 {
        font-size: 2rem;
      }
      .hero p {
        font-size: 1rem;
      }
    }