/* Full-screen background video styling */

body{
  background-color: rgb(31, 29, 29);
}
.background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1; /* Ensures the video stays behind the content */
  }
  
  /* Shopping page content styling */
  .shopping-page-content {
    position: relative;
    z-index: 1; /* Content stays above the video */
    color: white;
    padding: 50px;
    backdrop-filter: blur(5px); /* Optional: Adds a blur behind the content for better readability */
  }
  
  header h1 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 30px;
    font-family: 'Permanent Marker', sans-serif;
    color: #ff9900;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7)  ;
  }

  h2 {
    font-family: 'permanent marker';
    font-size: 1.2rem;
    color: #ff9900;
  }
  
  /* Product section styling */
  .products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out; /* Smoother scaling effect */
  }
  
  .product {
    background-color: rgba(0, 0, 0, 0.7); /* Transparent black box */
    padding: 20px;
    border-radius: 10px;
    width: 300px;
    text-align: center;
  }
  
  .product img {
    width: 100%;
    border-radius: 10px;
  }
  
  .buy-btn {
    background-color: #ff9900;
    color: black;
    font-style: italic;
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .buy-btn:hover {
    background-color: #ff6600;
  }
  .product:hover {
    transform: scale(1.1); /* Slightly increases size on hover */
    transition:ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7); 
    transition: transform 0.5s ease-in-out, box-shadow 0.3s ease-in-out; 
  }
  @media (max-width: 700px) {
    header h1 {
      font-size: 1.9rem; /* Smaller font size for small screens */
      margin-bottom: 20px;
    }
  
    h2 {
      font-size: 1rem; /* Adjusted font size */
    }
  
    .products {
      margin-top: 70px;
      flex-direction: column; /* Stack the product cards vertically */
      align-items: center;
    }
  
    .product {
      width: 90%; /* Make product cards full-width on small screens */
      max-width: 100%; /* Ensure the width doesn't exceed the viewport */
      padding: 15px;
      margin-bottom: 20px;
    }
  
    .buy-btn {
      width: 100%; /* Make buy button take full width */
      padding: 10px 0; /* Adjust padding for smaller screens */
    }
    
    .shopping-page-content {
      padding: 20px; /* Reduce padding for smaller devices */
    }
  
    .background-video {
      object-fit: cover; /* Ensure video still covers the background */
    }
  }