*{
  
  margin:0;
    
  padding: 0;
    
  box-sizing: border-box;
  
  font-family: montserrat;
  }
  html,body{
    
  width: 100%;
    
  height: 100%;
  background-color: white;
  }
  
  #main0{
      display: flex;
      height: 100%;
      width: 100%;
  
      
  }
  
  
  #main1{
      height: 100%;
      width: 65%;
      background-color: #E8751A;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
  
  }
  
  #main1 h1{
      text-align: center;
      font-size: 6vw;
      font-weight: 800;
      margin-bottom: 2vh;
  }
  #main1 h6{
      text-align: center;
      font-size: 1.5vw;
      font-weight: 600;
      
  }
  
  #main2{
      height: 100%;
      width: 35%;
      
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
  }
  
  
  #main2 button{
      color: white;
      background-color: #E8751A;
      border-radius: 5vw;
      font-size: 3vw;
      font-weight: 700;
      border-color: white;
      padding: 3% 10%;
      border-style: solid;
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
      
      
  }
  
  #main2 button:hover {
      background-color: white;
      color: #E8751A;
  
    }
  
  
  .containerlocation{
      position: relative;
      width: 100%;
      height: 90%;
      background-color: white;
  }  
  
  .containerlocation header{
      width: 100%;
      height: 10%;
      background-color: #E8751A;
  }
  
  .containerlocation header h1{
      display: flex;
      color: white;
      padding: 2vh;
      
  
  }
  .containerlocation #heading{
      /* color: #E8751A; */
      display: flex;
      justify-content: center;
      font-size: 2.5vw;
      padding: 1vw;
  }
  
  .dropdown-container{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  #choosing-location{
      padding: 2vw;
      margin: 2vw;
      
  }
  
  #choosing-stores{
      padding: 2vw;
      margin: 2vw;
      
  }
  #selectedstoresdiv{
      padding: 2vw;
      margin: 2vw;
      
  }
  
  #startshoppingbutton{
      color: white;
      background-color: #E8751A;
      border-radius: 5vw;
      font-size: 1.5vw;
      font-weight: 700;
      border-color: white;
      padding: 1.5vh 2vw;
      border-style: solid;
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  
  }
  
  #startshoppingbutton:hover {
      background-color: white;
      color: #E8751A;
  
    }
  
  
    .homebody {
        
        
        display: flex;
        flex-direction: column;
        align-items: center;
        
        min-height: 100vh;
        background-color: #ffffff;
        width: 100%;
      }
  
    
    
  .homeheader {
      
       
      width: 100%;
      height: 10%; /* 70% of the total width */
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #E8751A; /* Translucent orange */
      padding: 10px 20px;
      
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      z-index: 1000; /* Ensure it's above other elements */
      color: #fff;
  }
  
  .homeheader .logo {
      display: flex;
      align-items: center;
      font-size: 1.5rem;
      font-weight: bold;
  }
  
  .homeheader .location {
      margin-left: 10px;
      font-size: 0.9rem;
      color: #fff;
  }
  
  .homeheader .search-bar {
      flex: 1;
      display: flex;
      justify-content: center;
      margin: 0 20px;
  }
  
  .homeheader .search-bar input[type="text"] {
      width: 60%;
      padding: 8px;
      border-radius: 5px;
      border: none;
      font-size: 1rem;
  }
  
  .homeheader .search-bar button {
      padding: 8px 15px;
      background: #ffdf00;
      color: #333;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s ease;
  }
  
  .homeheader .search-bar button:hover {
      background: #ffeaa7;
  }
  
  .homeheader .cart {
      display: flex;
      align-items: center;
      font-size: 1rem;
      cursor: pointer;
  }
  
  .homeheader .cart button {
      padding: 8px 15px;
      background: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      transition: background 0.3s ease;
  }
  
  .homeheader .cart button:hover {
      background: #0056b3;
  }
  
  
    
    
    .product-list {
      margin-top: 100px; /* Space to avoid overlap with header */
      display: block;
      padding: 20px;
      width: 100%;
      max-width: 800px; /* Limit width for better layout */
    }
    
    .product-card {
      display: flex;
      align-items: center;
      gap: 15px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;
      width: 100%;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      position: relative; /* For positioning the button */
    }
    
    .product-card img {
      width: 150px;
      height: auto;
      border-radius: 5px;
    }
    
    .product-card h3 {
      font-size: 1.2rem;
      color: #ffdf00;
      transition: transform 0.2s ease; /* For zoom effect */
    }
    
    .product-card h3:hover {
      transform: scale(1.1); /* Zoom title on hover */
    }
    
    .product-card p {
      font-size: 0.9rem;
      color: #fff;
    }
    
    .product-card .price {
      font-weight: bold;
      font-size: 1rem;
      color: #ff0000;
    }
    
    .product-card .add-to-cart {
      position: absolute; /* Fix button placement */
      bottom: 10px; /* Bottom right corner */
      right: 10px;
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      font-size: 1rem;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: transform 0.2s ease, background-color 0.2s ease;
      text-decoration: none;
      text-align: center;
    }
    
    .product-card .add-to-cart:hover {
      transform: scale(1.1);
      background-color: #0056b3;
    }