/* General styles */
* {
  font-family: "Inter", sans-serif !important;
}

.logo {
  display: inline-block;
}

/* MENU */
.menu {
  display: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  float: right;
  margin-top: 9px;
}

.menu li {
  position: relative;
}

.menu li a {
  text-decoration: none;
  padding: 10px 20px;
  display: block;
  color: inherit;
}

.menu li:not(.active) a:hover {
  border-bottom: 2px solid #004d99;
  color: #004d99 !important;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}

.menu li a:hover {
  color: black;
}

/* Submenu */
.submenu {
  display: none;
  list-style-type: none;
  padding: 0;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #bfd1ff;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  z-index: 100;
}

.submenu li a {
  padding: 10px;
  color: black;
  display: block;
  border-bottom: 1px solid #000000;
}

.submenu li a:hover {
  background-color: white;
  color: #3c5bab;
}

/* Hamburger Menu */
.hamburger {
  display: none;
  position: absolute;
  right: 20px;
  top: 15px;
  cursor: pointer;
  z-index: 1000;
}

.hamburger div {
  width: 30px;
  height: 4px;
  background-color: black;
  margin: 5px 0;
}

/* Mobile Menu */
@media (max-width: 768px) {
  .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: #bfd1ff;
    border-radius: 8px;
    float: initial;
  }

  .menu li {
    text-align: center;
  }

  .menu li a {
    padding: 15px 20px;
    text-align: center;
    border-radius: 5px;
    margin: 0;
  }

  .menu li a:hover {
    text-align: center;
    background: #ffffff;
    color: black;
  }

  .hamburger {
    display: block;
  }

  .submenu {
    position: static;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    border-top: 1px solid #3F51B5;
  }
}

/* Product grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 20px;
}

/* Individual product item */
.product-item {
  border: 1px solid #ddd;
  grid-template-columns: repeat(5, 1fr);
  padding: 0px;
  /* This is for the whole item except the image */
  background: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  padding-top: 0;
  /* Remove top padding */
}

/* Product image container */
.product-image-container {
  position: relative;
  display: block;
  width: 100%;
}

/* Product image */
.product-image {
  width: 100%;
  /* Full width to touch both left and right */
  height: auto;
  display: block;
  cursor: pointer;
  transition: opacity 0.3s ease;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-top: 0;
  /* Ensures no margin at the top */
}

/* Hover buttons */
.change-image-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  padding: 10px;
  cursor: pointer;
  font-size: 24px;
  transition: opacity 0.3s ease;
}

.left-btn {
  left: 10px;
}

.right-btn {
  right: 10px;
}

.product-image-container:hover .change-image-btn {
  display: block;
}

/* Modal container */
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  z-index: 9999;
  width: 100%;
  height: 100%;
}

/* Modal content */
.modal-content {
  position: relative;
  padding: 20px;
  border-radius: 8px;
  /* width: 50%; */
  /* max-width: 600px; */
  z-index: 10000;
  padding: 20px;
  border-radius: 8px;
  /* width: 90%; */
  /* max-width: 600px; */
  z-index: 10000;
  /* top: 10%; */
  width: 80%;
  max-width: 800px;
  max-height: 450px;
  max-height: 80%;
}

.modal-image {
  width: 100%;
  max-height: 50%;
  position: relative;
  display: block;
}

.modal-button:hover {
  color: black;
  /* Light color on hover */
}

.prev {
  margin-top: 50%;
  left: -20px !important;
  position: absolute;
  top: 0;
  background-color: transparent;
  border: none;
  color: white;
  font-size: 20px;
}

.next {
  margin-top: 50%;
  right: -20px !important;
  position: absolute;
  top: 0;
  background-color: transparent;
  border: none;
  color: white;
  font-size: 20px;
}

/* Close Button */
.close {
  color: white;
  /* Close button color */
  font-size: 30px;
  /* Close button size */
  position: absolute;
  top: 10px;
  right: 20px;
  /* Positioning */
  cursor: pointer;
}

body {
  font-family: "Inter", sans-serif !important;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
}

.product-description-container {
  display: flex;
  flex-wrap: wrap;
  /* Allows the content to wrap on smaller screens */
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* Product Images */
.product-images {
  display: flex;
  flex-direction: column;
  flex: 0 0 40%;
  margin-right: 20px;
}

.main-image-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  background-color: #f3f3f3;
}

.main-image {
  max-width: 100%;
  max-height: 500px;
  border-radius: 8px;
}

.image-thumbnails {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  /* Space between thumbnails */
  flex-direction: row;
  /* Horizontal stacking of thumbnails */
  margin-top: 10px;
  /* Space between main image and thumbnails */
  overflow-x: auto;
  /* Allows horizontal scrolling if needed */
}

.thumbnail {
  width: 60px;
  height: 60px;
  margin-right: -10px;
  /* Space between thumbnails */
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.3s;
}

.thumbnail:last-child {
  margin-right: 0;
  /* Remove margin on the last thumbnail */
}

.thumbnail:hover {
  border-color: #f76c6c;
}

/* Product Details */
.product-details {
  flex: 1;
  padding: 20px;
}

.product-title {
  font-size: 22px;
  /* margin-bottom: 10px; */
  margin-top: -3px;
}

.product-price-title {
  font-size: 14px;
  color: #388e3c;
  margin-bottom: -10px;
}

.product-price {
  font-size: 28px;
  margin-bottom: 20px;
}

.category-name {
  font-size: 20px;
  color: #5c87e3;
  margin-bottom: 20px;
}

.product-description {
  font-size: 15px;
  margin-bottom: 20px;
  line-height: 1.6;
}

.buy-now-btn {
  background-color: #f76c6c;
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.buy-now-btn:hover {
  background-color: #d9534f;
}

.other-product-container {
  display: block;
  flex-wrap: wrap;
  /* Allows the content to wrap on smaller screens */
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.navbar {
  padding: 10px;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Light shadow for navbar */
}

nav {
  background-color: #bfd1ff;
  display: block;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 2rem;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

/* Dropdown container */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #bfd1ff;
  padding: 1rem;
  border-radius: 8px;
  top: 100%;
  left: 0;
  list-style: none;
  width: 200px;
  /* Set a fixed width for dropdown */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  margin-top: 25px;
}

.burger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: black;
  margin: 3px;
}

.contact {
  padding: 2rem;
  text-align: center;
  background-color: white;
}

.contact h1 {
  margin-bottom: 2rem;
  color: #004d99;
}

.contact-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.contact-info {
  background-color: #f4f4f4;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  width: 40%;
}

.contact-info h3 {
  margin-bottom: 1rem;
  color: #004d99;
}

.about {
  padding: 2rem;
}

.about h1 {
  margin-bottom: 2rem;
  color: #004d99;
}

.about-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.about-image {
  flex: 1 1 300px;
}

.about-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.about-content p {
  line-height: 1.6;
  margin: 0.5rem 0;
  color: #555;
  /* Darker text color for readability */
}

footer {
  background-color: #f4f4f4;
  padding: 2rem 1rem;
  text-align: center;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.footer-logo img {
  max-width: 150px;
  /* Adjust the size as needed */
}

.footer-contact {
  text-align: right;
}

.footer-contact a {
  color: #333;
  text-decoration: none;
}

@media (max-width: 767px) {
  .logo h1 {
    font-size: 18px;
  }

  .footer-container {
    flex-direction: column;
    text-align: center;
  }

  .footer-contact {
    text-align: center;
    margin-top: 1rem;
  }
}

.active {
  border-bottom: 2px solid #004d99;
  color: #004d99 !important;
}

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* Row */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

/* Column */
.col {
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}

/* Column widths for responsive grid */
.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-md-4 {
  flex: 0 0 33.33%;
  max-width: 33.33%;
}

.col-md-8 {
  flex: 0 0 66.66%;
  max-width: 66.66%;
}

/* Product container styling */
.product-container {
  width: 100%;
  border: 2px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Centered product header styling */
.product-header {
  font-size: 1.5rem;
  color: red;
  text-align: center;
  font-weight: bold;
  padding: 10px;
  margin-bottom: 15px;
}

/* Centering row for header */
.centered-header {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Product links styling */
.product-links a {
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: #0056b3;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: background-color 0.3s;
  margin-bottom: 10px;
}

.product-links a:hover {
  background-color: #e0e0e0;
}

/* Image styling */
.product-image {
  width: 100%;
  height: auto;
  margin: auto;
  display: block;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {

  /* Makes sure each column takes full width on mobile */
  .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Grid container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* Row */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

/* Column */
.col {
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}

/* Standard Column Widths (1-12) */
.col-1 {
  flex: 0 0 8.33%;
  max-width: 8.33%;
}

.col-2 {
  flex: 0 0 16.66%;
  max-width: 16.66%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.33%;
  max-width: 33.33%;
}

.col-5 {
  flex: 0 0 41.66%;
  max-width: 41.66%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.33%;
  max-width: 58.33%;
}

.col-8 {
  flex: 0 0 66.66%;
  max-width: 66.66%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.33%;
  max-width: 83.33%;
}

.col-11 {
  flex: 0 0 91.66%;
  max-width: 91.66%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Medium Screen Column Widths (1-12) */
.col-md-1 {
  flex: 0 0 8.33%;
  max-width: 8.33%;
}

.col-md-2 {
  flex: 0 0 16.66%;
  max-width: 16.66%;
}

.col-md-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-md-4 {
  flex: 0 0 33.33%;
  max-width: 33.33%;
}

.col-md-5 {
  flex: 0 0 41.66%;
  max-width: 41.66%;
}

.col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-md-7 {
  flex: 0 0 58.33%;
  max-width: 58.33%;
}

.col-md-8 {
  flex: 0 0 66.66%;
  max-width: 66.66%;
}

.col-md-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-md-10 {
  flex: 0 0 83.33%;
  max-width: 83.33%;
}

.col-md-11 {
  flex: 0 0 91.66%;
  max-width: 91.66%;
}

.col-md-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {

  /* Makes sure each column takes full width on mobile */
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Media queries for responsiveness */
@media (max-width: 1200px) {
  .container {
    max-width: 960px;
  }
}

@media (max-width: 992px) {
  .container {
    max-width: 720px;
  }
}

@media (max-width: 768px) .container {
  max-width: 540px;
}
}

@media (max-width: 576px) {
  .container {
    max-width: 100%;
    padding: 0;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .product-description-container {
    flex-direction: column;
    align-items: center;
  }

  .product-images {
    margin-right: 0;
  }

  .main-image-container {
    margin-bottom: 20px;
  }

  .image-thumbnails {
    flex-direction: row;
    /* Keep thumbnails horizontal on mobile */
    overflow-x: auto;
    /* Allows horizontal scrolling if needed */
  }

  .modal-content{
    top: 10%;
  }
}

@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    /* 4 products per row */
  }
}

/* For screens larger than 992px, show 3 products per row */
@media (max-width: 992px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    /* 3 products per row */
  }
}

/* For screens larger than 768px, show 2 products per row */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 products per row */
  }
}

/* For mobile screens, show 1 product per row */
@media (max-width: 576px) {
  nav {
    padding: .5em;
  }

  .product-grid {
    grid-template-columns: 1fr;
    /* 1 product per row */
  }

  .product-item {
    margin-bottom: 20px;
  }

  .logo {
    width: 80%;
  }
}

@media (max-width: 768px) {
  .contact-info {
    width: 100%;
    /* Full-width on mobile screens */
  }

  .contact h1 {
    font-size: 1.75rem;
  }

  .contact-info h2 {
    font-size: 1.25rem;
  }

  .contact-info p {
    font-size: 0.9rem;
  }
}