/* Grid container */
.product .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px 20px; /* Adjust to add spacing between columns */
}


.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

/* Grid columns */
.col {
  padding: 0 15px; /* Adjust to add spacing inside columns */
  box-sizing: border-box;
}

/* Large screens (lg) */
.col-lg-4 {
  flex: 0 0 33.3333%; /* 4 columns in a row for large screens */
  max-width: 33.3333%;
}

/* Medium screens (md) */
.col-md-4 {
  flex: 0 0 33.3333%; /* 4 columns in a row for medium screens */
  max-width: 33.3333%;
}
.col-md-6 {
  flex: 0 0 50%;; /* 4 columns in a row for medium screens */
  max-width: 50%;;
}
.col-md-8 {
  flex: 0 0 66.66666667%;; /* 4 columns in a row for medium screens */
  max-width: 66.66666667%;;
}

/* Small screens (sm) */
.col-sm-12 {
  flex: 0 0 100%; /* Full-width columns for small screens */
  max-width: 100%;
}

/* Media Queries */
@media (max-width: 991.98px) {
  .col-lg-4 {
    flex: 0 0 50%; /* Adjust for medium-large screens */
    max-width: 50%;
  }
}

@media (max-width: 767.98px) {
  .col-md-4 {
    flex: 0 0 100%; /* Adjust for smaller screens */
    max-width: 100%;
  }
  .col-md-6 {
    flex: 0 0 100%;; /* 4 columns in a row for medium screens */
    max-width: 100%;;
  }
}




/* Bootstrap Modal Core Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 1.75rem auto;
  pointer-events: none;
  z-index: 1055;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  transform: translate(0, -50px);
  opacity: 0;
}

.modal.show .modal-dialog {
  transform: none;
  opacity: 1;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}

.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: calc(0.3rem - 1px);
  border-bottom-left-radius: calc(0.3rem - 1px);
}

.modal-footer > * {
  margin: 0.25rem;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

/* Optional Scrollable Modal */
.modal-dialog-scrollable {
  display: flex;
  max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

/* Small Modal */
.modal-sm {
  max-width: 350px;
}

/* Large Modal */
.modal-lg {
  max-width: 800px;
}

/* Extra Large Modal */
.modal-xl {
  max-width: 1140px;
}