/* CSS Document */

/* Styling for the container holding all home content */
#home-container {
  color: #333333; /* Text color for the container */
  display: -webkit-flex; /* Use flexbox layout for WebKit browsers */
  display: flex; /* Use flexbox layout */
  -webkit-flex-direction: row; /* Arrange items in a row for WebKit browsers */
  flex-direction: row; /* Arrange items in a row */
  -webkit-flex-wrap: wrap; /* Allow items to wrap to the next line for WebKit browsers */
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  margin-right: 6%; /* Margin on the right side of the container */
  margin-left: 6%; /* Margin on the left side of the container */
}
.fade-in {
  animation: fadeIn 0.5s ease-in-out; /* Apply fade-in animation */
}
@keyframes fadeIn {
  from {
    opacity: 0; /* Start with opacity 0 */
  }
  to {
    opacity: 1; /* End with opacity 1 */
  }
}
.no-results-message {
  padding: 10px; /* Padding around the text */
  margin-top: 15px; /* Add some space between the message and other elements */
  width: 100%; /* Full width */
  text-align: center; /* Center-align text */
}
/* Styling for each individual home product */
.home-product {
  display: -webkit-flex; /* Use flexbox layout for WebKit browsers */
  display: flex; /* Use flexbox layout */
  -webkit-flex: 1; /* Allow the item to grow or shrink as needed for WebKit browsers */
  flex: 1; /* Allow the item to grow or shrink as needed */
  -webkit-flex-basis: 30%; /* Basis for flex layout for WebKit browsers */
  flex-basis: 30%; /* Basis for flex layout */
  -webkit-flex-direction: column; /* Arrange items in a column for WebKit browsers */
  flex-direction: column; /* Arrange items in a column */
  margin-left: 8%; /* Margin on the left side of the product */
  margin-right: 8%; /* Margin on the right side of the product */
}
/*Styling for a hidden element*/
.hidden {
  display: none; /* Set the display to none so that it does not show */
}
/* Styling for the name of each product */
.prod-name {
  text-align: center; /* Center-align the text */
  margin-top: 3.4%; /* Margin on the top of the name */
}
/* Styling for the description of each product */
.prod-desc {
  /* Instruct main to fill up the remaining space until there is just enough space left to show the other elements in the view port */
  flex: 1;
}
/* Styling for the paragraphs inside the product description */
.prod-desc p {
  margin-top: unset; /* Reset top margin */
  text-align: justify; /* Justify-align the text */
}
/* Styling for the image container of each product */
.prod-image {
  /* Ensure that the container with the image does not try and push the content upwards with any extra margins */
  margin-top: auto; /* Margin on the top of the image */
  text-align: center; /* Center-align the content */
  width: 100%; /* Full width */
}
/* Styling for the images inside the image container */
.prod-image img {
  height: auto; /* Automatically adjust the height */
  max-width: 100%; /* Limit the width to prevent overflow */
  transition: transform 0.3s ease; /* Apply transition effect on hover */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7); /* Add box shadow */
}
/* Styling for the images on hover (excluding modal images) */
.prod-image img:not(.modal img):hover {
  cursor: pointer; /* Change cursor to pointer on hover */
  transform: scale(1.1); /* Resets the scale */
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); /* Update box shadow on hover */
}
/* Styles for the modal */
.modal {
  display: none; /* Hide the modal by default */
  position: fixed; /* Fixed positioning */
  z-index: 3; /* Set z-index */
  left: 0; /* Align to the left */
  top: 0; /* Align to the top */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scrolling */
  background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent black background */
}
/* Styles for an active modal */
.modal-active {
  display: -webkit-flex; /* Use flexbox layout for WebKit browsers */

  display: flex; /* Use flexbox layout */
  align-items: center; /* Center-align items */
  justify-content: center; /* Center-align items */
}
/* Styling for images inside the modal */
.modal img {
  max-width: 80%; /* Limit the maximum width */
  max-height: 80%; /* Limit the maximum height */
  width: auto; /* Automatically adjust width */
  height: auto; /* Automatically adjust height */
}
/* Styling for the close button */
.close {
  position: absolute; /* Absolute positioning */
  top: 15px; /* Position from the top */
  right: 35px; /* Position from the right */
  font-size: 40px; /* Font size */
  color: #f1f1f1; /* Text color */
  cursor: pointer; /* Change cursor to pointer */
  transition: transform 0.1s ease; /* Applies a smooth transition */
}
.close:hover {
  transform: scale(1.15); /* Scales the button on hover */
}
/* Media query for smaller screens */
@media screen and (max-width:900px) {
  #home-container .home-product {
    flex-basis: 100%; /* Set flex basis to 100% for full width */
  }
  /*Styling for the name of each product*/
  .prod-name {
    margin-top: 2.8%; /* Margin on the top of the name */
  }
}
/* Media query for screens with a maximum width of 720px */
@media screen and (max-width: 720px) {
  /*Styling for the name of each product*/
  .prod-name {
    margin-top: 2.2%; /* Margin on the top of the name */
  }
}
/* Media query for screens with a minimum width of 400px and a maximum width of 600px */
@media screen and (min-width: 400px) and (max-width: 600px) {
  /*Styling for the name of each product*/
  .prod-name {
    margin-top: 1.6%; /* Margin on the top of the name */
  }
}
/* Media query for screens with a maximum width of 400px */
@media screen and (max-width: 400px) {
  /*Styling for the name of each product*/
  .prod-name {
    margin-top: 1%; /* Margin on the top of the name */
  }
}