/* Styles for the popup form container */
.cart-icon {
  position: fixed;
  bottom: 20px;
  left: 20px; /* Change 'right' to 'left' */
  background-color: #cc1616;
  color: #ffffff;
  padding: 10px 15px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: none;
}

.cart-icon:hover {
  background-color: #000000 !important  ;
}

.cart-icon img {
  width: 20px;
  height: auto;
  margin-right: 5px;
}

/* Style for the cart icon text */
.cart-icon span {
  font-size: 16px;
}




.popup-form-container {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity (0.5 for 50% opacity) */
    border: 1px solid ;
    color: #ffffff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    max-width: 1000px;
    width: 100%;
    
    
  }


  
  
  
  .popup-form-container.show {
    display: block;
    opacity: 10 !important;

  }
  
  /* Styles for the form fields */
  .form-field {
    margin-bottom: 20px;
  }
  
  .form-field label {
    display: block;
    margin-bottom: 5px;
  }
  
  .form-field input[type="text"],
  .form-field input[type="email"],
  .form-field select {
    width: 100%;
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    font-size: 16px;
  }
  
  .form-field select {
    width: calc(100% + 2px); /* Adjust width for border */
  }
  
  .form-field button {
    background-color: #cc1616;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 8px 60px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    margin-left: 10px !important;
  }
  
  .form-field button:hover {
    background-color: #000000;
  }
  
  /* Styles for the form fields layout */
  .form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-bottom: -20px;
    padding: 0 20px;
  }
  
  .form-column {
    flex-basis: 50%;
    padding: 0 20px;
    margin-bottom: 20px;
  }

  
.close-icon {
      float: right !important;
  }

  .close-icon:hover {
    cursor: pointer;
  }

  .blur {
    filter: blur(5px); /* Adjust the blur radius as needed */
  }