/*LOADER MEDIA START*/
@keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(360deg);
    }
    75% {
      transform: rotate(750deg);
    }
    100% {
      transform: rotate(1800deg);
    }
  }
  
  @keyframes shake {
    65%, 80%, 88%, 96% {
      transform: rotate(0.5deg);
    }
    50%, 75%, 84%, 92% {
      transform: rotate(-0.5deg);
    }
    0%, 50%, 100% {
      transform: rotate(0);
    }
  }
  /*LOADER MEDIA END*/


  /* LOGO STYLING START */
.logo {
  flex: 0 0 auto; /* Keeps the logo fixed on the left */
}

.logo img {
  height: 150px; /* Default size for larger screens */
  vertical-align: middle;
}

@media (max-width: 768px) {
  .logo img {
    height: 100px; /* Smaller logo for medium-sized screens */
  }
}

@media (max-width: 480px) {
  .logo img {
    height: 80px; /* Even smaller logo for phones */
  }
}
/* LOGO STYLING END */

/* Basic Styling */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* NAVIGATION BAR START */
nav {
  background-color: #333;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1000;
}

.nav-menu {
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-menu li {
  margin: 0 15px;
}

.nav-menu a {
  text-decoration: none;
  color: white;
  font-size: 1.2rem;
  padding: 5px 10px;
}

.nav-menu a:hover {
  background-color: #555;
  border-radius: 4px;
}

/* PRODUCTS DROPDOWN STYLING START */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #444;
  min-width: 200px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #555;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* MOBILE-FRIENDLY STYLING */
@media (max-width: 768px) {
  nav {
    flex-direction: column; /* Stack the logo and nav menu vertically */
    padding: 0.5rem;
  }

  .nav-menu {
    flex-direction: column; /* Stack nav items vertically */
    position: static; /* Remove absolute positioning */
    transform: none; /* Reset transform for centered layout */
    width: 100%; /* Make the menu take the full width */
    padding: 0;
  }

  .nav-menu li {
    margin: 10px 0; /* Add vertical spacing between items */
  }

  .nav-menu a {
    font-size: 1rem; /* Reduce font size for smaller screens */
    padding: 10px 15px;
  }
}

@media (max-width: 480px) {
  nav {
    padding: 0.5rem;
  }

  .nav-menu a {
    font-size: 0.9rem; /* Even smaller font size for phones */
    padding: 8px 12px;
  }
}
/* NAVIGATION BAR END */



/* FOOTER AND SOCIAL MEDIA BUTTONS STYLING START */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Content Wrapper */
.content {
  flex: 1; /* Pushes the footer to the bottom */
}

/* Footer Styling */
.footer {
  background-color: #f8f9fa; /* Light footer background */
  padding: 20px 0;
  text-align: center;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optional top shadow for separation */
  width: 100%;
}

.footer-social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  background-color: #f8f9fa; /* Light footer background color */
}

.footer-social-icons .icon-content {
  margin: 0 15px; /* Adjust spacing between icons */
  position: relative;
}

.footer-social-icons .icon-content .tooltip {
  position: absolute;
  bottom: 70px; /* Adjust position for the footer */
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.75); /* Dark background for tooltips */
  transition: all 0.3s ease;
}

.footer-social-icons .icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  bottom: 90px;
}

.footer-social-icons .icon-content a {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #4d4d4d;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
  transition: all 0.3s ease-in-out;
}

.footer-social-icons .icon-content a:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}

.footer-social-icons .icon-content a svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
}

.footer-social-icons .icon-content a:hover {
  color: white;
}

.footer-social-icons .icon-content a .filled {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  transition: all 0.3s ease-in-out;
}

.footer-social-icons .icon-content a:hover .filled {
  height: 100%;
}

/* Specific Social Media Colors */
.footer-social-icons .icon-content a[data-social="linkedin"] .filled,
.footer-social-icons .icon-content a[data-social="linkedin"] ~ .tooltip {
  background-color: #0274b3;
}

.footer-social-icons .icon-content a[data-social="github"] .filled,
.footer-social-icons .icon-content a[data-social="github"] ~ .tooltip {
  background-color: #24262a;
}

.footer-social-icons .icon-content a[data-social="instagram"] .filled,
.footer-social-icons .icon-content a[data-social="instagram"] ~ .tooltip {
  background: linear-gradient(
    45deg,
    #405de6,
    #5b51db,
    #b33ab4,
    #c135b4,
    #e1306c,
    #fd1f1f
  );
}

.footer-social-icons .icon-content a[data-social="youtube"] .filled,
.footer-social-icons .icon-content a[data-social="youtube"] ~ .tooltip {
  background-color: #ff0000;
}

/* Adjustments for Responsiveness */
@media (max-width: 768px) {
  .footer-social-icons {
    flex-wrap: wrap; /* Allow icons to wrap on smaller screens */
    padding: 15px 0;
  }

  .footer-social-icons .icon-content {
    margin: 10px; /* Adjust spacing for smaller screens */
  }

  .footer {
    padding: 15px 0; /* Adjust footer padding for medium screens */
  }
}

@media (max-width: 480px) {
  .footer-social-icons .icon-content {
    margin: 8px; /* Reduce margin for smaller screens */
  }

  .footer-social-icons .icon-content a {
    width: 40px; /* Smaller buttons for phones */
    height: 40px;
  }

  .footer-social-icons .icon-content a svg {
    width: 24px; /* Smaller icons for phones */
    height: 24px;
  }

  .footer {
    padding: 10px 0; /* Reduce footer padding for phones */
  }

  .footer-social-icons .icon-content .tooltip {
    font-size: 12px; /* Smaller tooltip text for phones */
    bottom: 60px; /* Adjust tooltip position */
  }

  .footer-social-icons .icon-content:hover .tooltip {
    bottom: 75px; /* Adjust tooltip hover position */
  }
}
/* FOOTER AND SOCIAL MEDIA BUTTONS STYLING END */



/* SEARCH BAR STYLING START */
.search-bar {
  display: flex;
  align-items: center;
  gap: 5px;
}

.search-bar input {
  height: 35px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 200px;
}

.search-bar input:focus {
  outline: none;
  border-color: #555;
}

.search-bar button {
  height: 35px;
  background-color: #555;
  color: white;
  border: none;
  padding: 0 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.search-bar button:hover {
  background-color: #777;
}

/* Responsive adjustments for search bar */
@media (max-width: 768px) {
  .search-bar {
    flex-wrap: wrap; /* Allow elements to stack */
    justify-content: center;
  }

  .search-bar input {
    width: 100%; /* Full-width input on smaller screens */
    margin-bottom: 10px;
  }

  .search-bar button {
    width: 100%; /* Full-width button on smaller screens */
  }
}
/* SEARCH BAR STYLING END */

/* ADD TO CART STYLING START */
main {
  padding-bottom: 120px; /* Adjust based on the height of your cart */
}

.cart {
  transform: translateY(100%); /* Hidden below the screen */
  opacity: 0; /* Fully transparent */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 90%;
  max-width: 500px;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.cart.visible {
  transform: translateY(0); /* Slide into view */
  opacity: 1; /* Fully visible */
}

.cart.active {
  transform: translateY(-20px); /* Moves the cart into view */
}

.cart.highlight {
  background-color: #007bff;
  color: white;
  transition: background-color 0.5s ease, color 0.5s ease;
}

.cart h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.cart ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cart li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cart li span {
  font-size: 1rem;
}

#cart-total {
  font-weight: bold;
  margin-top: 10px;
  text-align: center;
}

.cart-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #007bff;
  color: white;
  font-size: 24px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 1001;
  transition: transform 0.3s ease;
}

.cart-icon:hover {
  transform: scale(1.1);
}

.cart-icon span {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: red;
  color: white;
  font-size: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Responsive adjustments for cart */
@media (max-width: 768px) {
  .cart {
    width: 100%; /* Full width for medium screens */
    max-width: 400px;
    max-height: 250px;
  }

  .cart h2 {
    font-size: 1.2rem; /* Adjust heading size for smaller screens */
  }

  .cart li {
    flex-direction: column; /* Stack items for better readability */
    align-items: flex-start;
  }

  .cart li span {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .cart {
    max-width: 90%; /* Limit width to 90% of screen on small devices */
    padding: 15px; /* Reduce padding */
  }

  .cart h2 {
    font-size: 1rem; /* Further reduce heading size */
  }

  .cart-icon {
    width: 40px; /* Smaller cart icon */
    height: 40px;
    font-size: 20px;
  }

  .cart-icon span {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
}
/* ADD TO CART STYLING END */


/* CHECKOUT BUTTON, FORM AND CONTAINER STYLING START */
#delivery-form {
  background-color: #f9f9f9; /* Match your website's light background tone */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

#delivery-form h3 {
  font-size: 1.5em;
  margin-bottom: 15px;
  color: #333; /* Match your website's text color */
}

#delivery-form label {
  display: block;
  font-weight: bold;
  margin-top: 10px;
  color: #555;
}

#delivery-form input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  color: #333;
}

#checkout-button {
  display: block;
  width: 90%; /* Make it nearly full width for a modern look */
  margin: 10px auto; /* Center the button with spacing */
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#checkout-button:hover {
  background-color: #0056b3; /* Darker blue on hover */
  transform: scale(1.05); /* Slight zoom effect */
}

#checkout-button:active {
  background-color: #004085; /* Even darker blue when clicked */
  transform: scale(1); /* Reset zoom effect */
}

#checkout-button:disabled {
  background-color: #cccccc; /* Grey color for disabled state */
  cursor: not-allowed;
}

.checkout-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.checkout-container h2 {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 20px;
}

.checkout-container ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.checkout-container ul li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.checkout-container .total {
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.complete-purchase-button {
  display: block;
  width: 90%; /* Full width with slight margin */
  margin: 15px auto; /* Centered with spacing */
  padding: 12px 20px; /* Comfortable padding for size */
  font-size: 1rem; /* Readable font size */
  font-weight: bold; /* Bold text for emphasis */
  color: #fff; /* White text */
  background-color: #28a745; /* Green background for positive action */
  border: none;
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor for interactivity */
  text-align: center;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.complete-purchase-button:hover {
  background-color: #218838; /* Darker green on hover */
  transform: scale(1.05); /* Slight zoom effect */
}

.complete-purchase-button:active {
  background-color: #1e7e34; /* Even darker green on active state */
  transform: scale(1); /* Reset zoom effect */
}

.complete-purchase-button:disabled {
  background-color: #cccccc; /* Grey background for disabled state */
  cursor: not-allowed; /* Disabled cursor */
  color: #666666; /* Grey text for clarity */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #delivery-form {
    padding: 15px; /* Reduce padding for smaller screens */
  }

  #delivery-form h3 {
    font-size: 1.3em; /* Smaller heading for medium screens */
  }

  #delivery-form input {
    font-size: 0.9em; /* Slightly smaller input fields */
  }

  #checkout-button,
  .complete-purchase-button {
    width: 95%; /* Slightly wider on smaller screens */
  }

  .checkout-container {
    padding: 15px; /* Reduce padding for smaller screens */
  }

  .checkout-container h2 {
    font-size: 1.3rem; /* Reduce heading size */
  }

  .checkout-container ul li {
    font-size: 0.85rem; /* Smaller font for item details */
  }

  .checkout-container .total {
    font-size: 1.1rem; /* Slightly smaller total text */
  }
}

@media (max-width: 480px) {
  #delivery-form h3 {
    font-size: 1.2em; /* Further reduce heading size */
  }

  #delivery-form input {
    padding: 8px; /* Smaller padding for input fields */
    font-size: 0.85em; /* Smaller font size */
  }

  #checkout-button,
  .complete-purchase-button {
    padding: 10px 15px; /* Reduce padding */
    font-size: 0.9rem; /* Smaller font size for buttons */
  }

  .checkout-container {
    width: 95%; /* Fit container width to the screen */
    padding: 10px; /* Further reduce padding */
  }

  .checkout-container h2 {
    font-size: 1.2rem; /* Smaller heading size */
  }

  .checkout-container ul li {
    flex-direction: column; /* Stack list items for better readability */
    align-items: flex-start;
  }

  .checkout-container .total {
    font-size: 1rem; /* Reduce total text size */
  }
}
/* CHECKOUT BUTTON, FORM AND CONTAINER STYLING END */



/* LAPTOP PAGE STYLING START */
/* PRODUCTS STYLING START */
#laptops {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
  align-items: center;
}

/* Product Grid */
.product-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

/* Product Card */
.product {
  width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  background-color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

/* Product Image */
.product img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

/* Product Title */
.product h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 10px;
}

/* Product Price */
.product p:first-of-type {
  font-size: 1.25rem;
  color: #007bff;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Product Description */
.product p {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
  margin-bottom: 20px;
}

/* Add to Cart Button */
.product button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.product button:hover {
  background-color: #0056b3;
}

/* Responsive Adjustments for Products */
@media (max-width: 768px) {
  .product {
    width: 90%; /* Full width for smaller screens */
  }

  .product img {
    height: 180px; /* Adjust image height */
  }

  .product h3 {
    font-size: 1.3rem; /* Smaller font for titles */
  }

  .product p:first-of-type {
    font-size: 1.1rem; /* Smaller font for price */
  }

  .product p {
    font-size: 0.85rem; /* Adjust description size */
  }
}

@media (max-width: 480px) {
  .product {
    width: 100%; /* Full width for phones */
    padding: 15px; /* Reduce padding */
  }

  .product img {
    height: 150px; /* Further adjust image height */
  }

  .product h3 {
    font-size: 1.2rem; /* Reduce title size */
  }

  .product p:first-of-type {
    font-size: 1rem; /* Reduce price font size */
  }

  .product p {
    font-size: 0.8rem; /* Reduce description font size */
  }

  .product button {
    padding: 8px 10px; /* Smaller button padding */
    font-size: 0.9rem; /* Adjust font size */
  }
}
/* LAPTOP PAGE STYLING END */

/* CONTACT PAGE STYLING START */
#contact {
  padding: 40px;
  text-align: center;
  background-color: #f9f9f9;
}

.contact-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
}

.contact-container h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  text-align: left;
}

.form-group label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #555;
}

.submit-button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.submit-button:hover {
  background-color: #555;
}

/* Responsive Adjustments for Contact Page */
@media (max-width: 768px) {
  .contact-container {
    padding: 15px; /* Reduce padding */
  }

  .contact-container h2 {
    font-size: 1.3rem; /* Smaller font for heading */
  }

  .form-group input,
  .form-group textarea {
    font-size: 0.9rem; /* Adjust input and textarea font size */
  }

  .submit-button {
    padding: 8px 15px; /* Adjust button padding */
    font-size: 0.9rem; /* Adjust button font size */
  }
}

@media (max-width: 480px) {
  .contact-container {
    width: 90%; /* Fit container to screen width */
    padding: 10px; /* Further reduce padding */
  }

  .contact-container h2 {
    font-size: 1.2rem; /* Reduce heading font size */
  }

  .form-group input,
  .form-group textarea {
    font-size: 0.85rem; /* Reduce input and textarea font size */
    padding: 8px; /* Smaller padding */
  }

  .submit-button {
    padding: 8px 10px; /* Smaller button padding */
    font-size: 0.85rem; /* Smaller font size */
  }
}
/* CONTACT PAGE STYLING END */



/* LANDING PAGES STYLING START */
/* Categories Section */
#categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjust to content */
  gap: 20px; /* Space between grid items */
  justify-content: center; /* Centers the grid itself */
  justify-items: center; /* Centers the content inside each grid cell */
  margin: 0 auto; /* Center the entire grid horizontally */
  width: 100%; /* Make sure it spans the full width */
  max-width: 1200px; /* Prevent it from becoming too wide */
  padding: 20px; /* Adjust padding for spacing */
}

.category {
  flex: 1 1 calc(33.333% - 40px); /* Three categories per row, accounting for gaps */
  max-width: 250px; /* Prevents the categories from becoming too wide */
  text-align: center;
  margin: 0 auto; /* Center each category item */
}

.category img {
  width: 250px; /* Or your desired width */
  height: 150px; /* Maintain a consistent height */
  object-fit: cover; /* Ensures the image fills the space without distorting */
  border-radius: 5px;
}

.card-content {
  display: flex;
  flex-direction: column; /* Stack content vertically */
  align-items: center; /* Center align text and buttons */
  gap: 0.5rem; /* Add spacing between items */
  margin-top: 1rem; /* Space between image and content */
}

.category h2 {
  margin-top: 10px;
  font-size: 1.2rem;
}

.category a {
  text-decoration: none;
  color: black;
}

.category a:visited {
  color: black; /* Ensures visited links stay the same color */
}

.category a:hover {
  color: gray; /* Optional: Add a hover effect for better UX */
}

.category a:active {
  color: darkgray; /* Optional: Add an active state color */
}

/* Responsive Adjustments for Categories */
@media (max-width: 768px) {
  #categories {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust grid for smaller screens */
    gap: 15px; /* Reduce gap size */
    padding: 15px; /* Adjust padding */
  }

  .category img {
    width: 200px; /* Reduce image size */
    height: 120px; /* Adjust height for smaller images */
  }

  .category h2 {
    font-size: 1rem; /* Smaller font size for titles */
  }
}

@media (max-width: 480px) {
  .category img {
    width: 100%; /* Make images responsive to fit screen width */
    height: auto; /* Adjust height automatically */
  }

  .category h2 {
    font-size: 0.9rem; /* Further reduce font size */
  }

  .card-content {
    gap: 0.3rem; /* Reduce gap between elements */
  }
}
/* LANDING PAGES STYLING END */

/* Make main image clickable */
.clickable {
  cursor: pointer;
}

/* Modal Styling */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8); /* Black background with opacity */
}

.modal-content {
  margin: 5% auto;
  padding: 20px;
  background: white;
  border-radius: 8px;
  max-width: 600px;
  text-align: center;
}

.modal li {
  list-style: none;
}

.modal img {
  width: 100%; /* Ensures the image adjusts to the modal width */
  max-width: 600px; /* Limit the maximum width */
  height: auto; /* Adjust height automatically */
  object-fit: contain; /* Crops the image to fit the width and height */
  margin-bottom: 20px;
}

.thumbnails {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

.thumbnails img {
  width: 60px; /* Fixed width */
  height: 60px; /* Fixed height to ensure uniformity */
  object-fit: cover; /* Ensures the image fills the dimensions without stretching */
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: border-color 0.3s ease;
}

.thumbnails img:hover {
  border-color: #007bff;
}

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

/* Responsive Adjustments for Modal */
@media (max-width: 768px) {
  .modal-content {
    padding: 15px; /* Reduce padding for smaller screens */
    max-width: 90%; /* Make modal width responsive */
  }

  .modal img {
    max-width: 100%; /* Ensure image doesn't overflow modal */
    height: auto; /* Adjust height automatically */
  }
}

@media (max-width: 480px) {
  .thumbnails img {
    width: 50px; /* Smaller thumbnails for phones */
    height: 50px;
  }

  .close {
    font-size: 24px; /* Smaller close button */
  }
}



/* ABOUT PAGE STYLING START */
.about-section {
  padding: 40px 20px;
  background-color: #f5f5f5; /* Light background for contrast */
  font-family: Arial, sans-serif;
  color: #333; /* Neutral text color */
}

.about-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.about-section h1 {
  font-size: 2.5rem;
  color: #0073e6; /* Accent color for title */
  text-align: center;
  margin-bottom: 20px;
}

.about-section h2 {
  font-size: 1.8rem;
  color: #005bb5; /* Slightly darker accent color for headings */
  margin-top: 30px;
}

.about-section p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 15px;
  color: #555; /* Slightly muted text color */
}

.about-section ul {
  list-style-type: none;
  padding-left: 0;
}

.about-section ul li {
  font-size: 1rem;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #ffffff; /* White background for list items */
  border-left: 4px solid #0073e6; /* Accent line for visual flair */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
}

.about-section ul li strong {
  color: #333; /* Bold text color for emphasis */
}

.about-section p,
.about-section ul li {
  text-align: justify; /* Cleaner text alignment */
}

.about-section a {
  color: #0073e6;
  text-decoration: none;
  font-weight: bold;
}

.about-section a:hover {
  text-decoration: underline;
}

/* Responsive Adjustments for About Section */
@media (max-width: 768px) {
  .about-section h1 {
    font-size: 2rem; /* Smaller title font size */
  }

  .about-section h2 {
    font-size: 1.5rem; /* Adjust heading size */
  }

  .about-section p {
    font-size: 0.9rem; /* Slightly smaller paragraph text */
  }

  .about-section ul li {
    font-size: 0.9rem; /* Reduce list item font size */
  }
}

@media (max-width: 480px) {
  .about-section {
    padding: 20px 10px; /* Reduce padding for mobile screens */
  }

  .about-section h1 {
    font-size: 1.8rem; /* Further reduce title font size */
  }

  .about-section h2 {
    font-size: 1.3rem; /* Further reduce heading size */
  }

  .about-section p {
    font-size: 0.85rem; /* Reduce paragraph font size */
  }

  .about-section ul li {
    font-size: 0.85rem; /* Adjust list item size */
    padding: 8px; /* Reduce padding */
  }
}

/* TEAM MEMBER STYLING START */
.team-container {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.team-member {
  text-align: center;
  max-width: 300px; /* Reduce max width for smaller screens */
  flex-shrink: 0; /* Prevent shrinking in the flex container */
}

.team-member img {
  width: 300px; /* Reduce image size */
  height: 300px; /* Match reduced width */
  object-fit: cover; /* Ensure the image fills the container without distortion */
  border-radius: 50%; /* Keep the circular appearance */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.team-member h3 {
  font-size: 1rem; /* Adjust font size */
  margin-top: 10px;
}

.team-member p {
  color: #555;
  font-size: 0.9rem; /* Adjust font size */
}

/* TEAM MEMBER STYLING END */

/* Responsive Adjustments for Team Section */
@media (max-width: 768px) {
  .team-member img {
    width: 250px; /* Smaller images for tablets */
    height: 250px;
  }

  .team-member h3 {
    font-size: 1rem; /* Adjust heading size */
  }

  .team-member p {
    font-size: 0.85rem; /* Adjust paragraph text size */
  }
}

@media (max-width: 480px) {
  .team-member img {
    width: 200px; /* Smaller images for phones */
    height: 200px;
  }

  .team-member h3 {
    font-size: 0.9rem; /* Further adjust heading size */
  }

  .team-member p {
    font-size: 0.8rem; /* Further adjust paragraph text size */
  }
}

/* BREADCRUMBS STYLING START */
#breadcrumbs {
  font-family: Arial, sans-serif;
  font-size: 16px;
  margin: 15px 0;
  padding: 10px;
  background-color: #f9f9f9; /* Light background for visibility */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  display: inline-block;
}

.breadcrumb-item {
  color: black;
  text-decoration: none;
  font-weight: bold; /* Bold text for emphasis */
  padding: 5px 10px;
  border-radius: 5px;
  transition: all 0.3s ease; /* Smooth hover effects */
}

/* Hover effect: background and color change */
.breadcrumb-item:hover {
  background-color: #e0e0e0; /* Light gray background on hover */
  color: #333; /* Darker gray text */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Subtle shadow effect */
}

/* Active breadcrumb (current page) */
.breadcrumb-item.active {
  color: #666; /* Muted gray for current page */
  background-color: #dcdcdc; /* Light background for current page */
  pointer-events: none;
  font-style: italic; /* Optional: italic style to differentiate */
}

/* Breadcrumb separator (e.g., slashes or arrows) */
#breadcrumbs .separator {
  color: #aaa; /* Lighter color for separator */
  margin: 0 5px;
}

/* Responsive Adjustments for Breadcrumbs */
@media (max-width: 480px) {
  #breadcrumbs {
    font-size: 14px; /* Adjust font size for mobile */
    padding: 8px; /* Reduce padding for breadcrumbs */
  }

  .breadcrumb-item {
    padding: 4px 8px; /* Reduce padding for items */
  }
}
/* BREADCRUMBS STYLING END */



/* FEATURED PRODUCTS SLIDER STYLING START */
.featured-products {
  margin: 2rem 0;
  text-align: center;
}

.slider {
  position: relative;
  overflow: hidden;
  width: 90%;
  margin: 0 auto;
}

.slider-container {
  display: flex;
  overflow: hidden;
  width: 100%;
}

.slider-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.product-card {
  flex: 0 0 100%; /* Each slide takes 100% of the container */
  max-width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  text-align: center;
}

.product-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

.product-card h3 {
  margin: 0.5rem 0;
}

.product-card p {
  font-weight: bold;
  margin: 0.5rem 0;
}

.product-card .btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.product-card .btn:hover {
  background-color: #0056b3;
}

.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10;
  padding: 1rem;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.prev-btn {
  left: 1rem;
}

.next-btn {
  right: 1rem;
}

.prev-btn:hover,
.next-btn:hover {
  background-color: rgba(0, 0, 0, 0.9);
  transform: translateY(-50%) scale(1.1);
}

/* Responsive Adjustments for Featured Products */
@media (max-width: 768px) {
  .product-card {
    padding: 0.5rem;
  }

  .prev-btn,
  .next-btn {
    font-size: 1.5rem;
    padding: 0.8rem;
  }
}

@media (max-width: 480px) {
  .product-card h3 {
    font-size: 1rem;
  }

  .product-card p {
    font-size: 0.9rem;
  }

  .prev-btn,
  .next-btn {
    font-size: 1.2rem;
    padding: 0.6rem;
  }
}
/* FEATURED PRODUCTS SLIDER STYLING END */

/* SHOP BY CATEGORY SLIDER STYLING START */
.categories {
  margin: 3rem 0;
  padding: 0 2rem;
}

.category-slider {
  margin: 2rem 0;
  position: relative;
  overflow: hidden;
}

.category-slider h3 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.slider-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.slider-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  gap: 1rem;
}

.category-card {
  flex: 0 0 23%; /* 4 cards per row */
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 1rem;
  transition: transform 0.3s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.category-card:hover {
  transform: translateY(-10px);
}

.category-card img {
  width: 100%;
  height: auto;
  max-height: 450px;
  object-fit: contain;
  border-radius: 8px;
}

.category-card h4 {
  margin: 1rem 0;
  font-size: 1.2rem;
}

.category-card .btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 1rem;
}

.category-card .btn:hover {
  background-color: #0056b3;
}

.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10;
  padding: 1rem;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.prev-btn {
  left: 1rem;
}

.next-btn {
  right: 1rem;
}

.prev-btn:hover,
.next-btn:hover {
  background-color: rgba(0, 0, 0, 0.9);
  transform: translateY(-50%) scale(1.1);
}

/* Responsive Adjustments for Shop by Category */
@media (max-width: 768px) {
  .category-card {
    flex: 0 0 45%; /* 2 cards per row for tablets */
  }

  .prev-btn,
  .next-btn {
    font-size: 1.5rem;
    padding: 0.8rem;
  }
}

@media (max-width: 480px) {
  .category-card {
    flex: 0 0 100%; /* Full-width cards for mobile */
    padding: 0.5rem;
  }

  .category-card h4 {
    font-size: 1rem;
  }

  .prev-btn,
  .next-btn {
    font-size: 1.2rem;
    padding: 0.6rem;
  }
}
/* SHOP BY CATEGORY SLIDER STYLING END */