.btn-primary {
  background-image: linear-gradient(to right, #2b2b2bd6 0%, #444444a8 51%, #3d3d3d00 100%);
}
.bg-white {
    --bs-bg-opacity: 1;
    background-color: #141313  !important;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #ffffff;
}
.nav-link {
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: #ffffff;
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.navbar-nav {
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--bs-navbar-color);
    --bs-nav-link-hover-color: #fff9f8;
    --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
 
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
    --bs-offcanvas-zindex: 1045;
    --bs-offcanvas-width: 400px;
    --bs-offcanvas-height: 30vh;
    --bs-offcanvas-padding-x: 1rem;
    --bs-offcanvas-padding-y: 1rem;
    --bs-offcanvas-color: var(--bs-body-color);
    --bs-offcanvas-bg: #141313;
    --bs-offcanvas-border-width: var(--bs-border-width);
    --bs-offcanvas-border-color: var(--bs-border-color-translucent);
    --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-offcanvas-transition: transform 0.3s ease-in-out;
    --bs-offcanvas-title-line-height: 1.5;
}.navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: #fefefe;
    background-color:#fefefe;
    border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
}h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--heading-font);
    font-weight: var(--heading-font-weight);
    color: #f6f6f6;
    line-height: var(--heading-line-height);
    letter-spacing: 0.065rem;
    text-transform: uppercase;
}iconify-icon.process-icon {
    color: #575757;
    font-size: 110px;
}
section#testimonial {
    background-image: linear-gradient(to right, #2b2b2bd6 0%, #444444a8 51%, #3d3d3d00 100%);
}
.testimonial-content {
    background: #141313;
}
.login-container {
  max-width: 450px;
  margin: 0 auto;
  margin-top: 100px;
}

 /* Additional custom styles for the cart modal */

 #cartModal .modal-header {
  background-color: #007bff; /* Bootstrap primary color */
  padding: 1rem 2rem; /* Add some padding for better readability */
}
.bg-primary {
  --bs-bg-opacity: 1;
  background-color: #212121 !important;
}
#cartModal .modal-footer {
  border-top: 2px solid #007bff; /* Adds a top border for distinction */
  padding: 1rem 2rem; /* Add some padding for better readability */
}

.cart-item-template {
  display: none; /* Hide the template initially */
}

.cart-item {
  margin-bottom: 1.5rem; /* Add some margin between cart items */
}

.cart-item .card-body {
  padding: 1.5rem; /* Add some padding to the card body */
}

.cart-item .quantity {
  display: flex;
  align-items: center;
}

.cart-item .quantity-input {
  width: 50px; /* Set a fixed width for the quantity input */
  text-align: center;
}

.cart-item .increment, .cart-item .decrement {
  width: 30px; /* Set a fixed width for the increment and decrement buttons */
}

.cart-item .remove {
  margin-top: 1rem; /* Add some margin to the remove button */
}

/* Responsive styles */

@media (max-width: 768px) {
  #cartModal .modal-dialog {
      max-width: 90%; /* Make the modal wider on smaller screens */
  }
  .cart-item {
      margin-bottom: 1rem; /* Reduce margin between cart items on smaller screens */
  }
  .cart-item .card-body {
      padding: 1rem; /* Reduce padding on smaller screens */
  }
}

@media (max-width: 480px) {
  #cartModal .modal-dialog {
      max-width: 95%; /* Make the modal even wider on very small screens */
  }
  .cart-item {
      margin-bottom: 0.5rem; /* Reduce margin between cart items even further on very small screens */
  }
  .cart-item .card-body {
      padding: 0.5rem; /* Reduce padding even further on very small screens */
  }
}
/* Hide the radio button but keep it accessible */
.form-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Style the label to look clickable */
.form-check-label {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f0f0f0;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

/* Change background color when the label is hovered */
.form-check-label:hover {
  background-color: #d1d1d1;
}

/* Change background when the radio button is selected */
.form-check-input:checked + .form-check-label {
  background-color: #007bff;
  color: white;
}
    .cart-item {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        transition: box-shadow 0.3s ease;
        margin-bottom: 1rem;
    }
    .cart-item:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .cart-item-image {
        height: 120px;
        object-fit: cover;
        width: 100%; /* Ensure image fills the container */
    }
    .cart-item-details {
        padding: 1rem;
    }
    .quantity-control {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .quantity-display {
        width: 40px;
        text-align: center;
        font-weight: bold;
        margin: 0 10px;
    }
    .btn-quantity {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }


    .cart-item {
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      overflow: hidden;
      transition: box-shadow 0.3s ease;
      margin-bottom: 1rem;
  }
  .cart-item:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .cart-item-image {
      height: 120px;
      object-fit: cover;
      width: 100%; /* Ensure image fills the container */
  }
  .cart-item-details {
      padding: 1rem;
  }
  .quantity-control {
      display: flex;
      align-items: center;
      justify-content: flex-start;
  }
  .quantity-display {
      width: 40px;
      text-align: center;
      font-weight: bold;
      margin: 0 10px;
  }
  .btn-quantity {
      padding: 0.25rem 0.5rem;
      font-size: 0.875rem;
  }

  
  .modal-content {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
}

.modal-header {
    background-color: var(--primary-color);
    color: white;
    border-bottom: none;
    padding: 1.5rem;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 600;
}

.cart-icon {
    font-size: 1.8rem;
    margin-right: 0.75rem;
}

.modal-body {
    padding: 2rem;
}

.empty-cart {
    color: var(--light-text-color);
    padding: 3rem 0;
}

.empty-cart i {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.checkout-container {
    background-color: var(--secondary-color);
    border-radius: 1rem;
    padding: 2rem;
    margin-top: 1.5rem;
}

.order-summary {
    background-color: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.form-label {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.form-control {
    border-radius: 0.5rem;
    border: 1px solid #e0e0e0;
    padding: 0.75rem;
}

.form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
    border-color: var(--primary-color);
}

.table {
    margin-bottom: 0;
}

.table th {
    font-weight: 600;
    color: var(--light-text-color);
}

.table td {
    font-weight: 500;
}

#total {
    color: var(--accent-color);
    font-size: 1.2rem;
}

@media (max-width: 767.98px) {
    .modal-body {
        padding: 1.5rem;
    }

    .checkout-container {
        padding: 1.5rem;
    }

    .order-summary {
        margin-top: 1.5rem;
    }
}