/* --- Mobile Menu Styles --- */

/* Update the global container style for proper centering and spacing */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
/* The main slide-out menu container */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -300px; /* Hidden by default */
  width: 300px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  transition: right 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
  padding-top: 20px;
}

.mobile-menu.open {
  right: 0; /* Show the menu */
}

/* Close button icon */
.close-btn {
  font-size: 24px;
  cursor: pointer;
  padding: 10px 20px;
  text-align: right;
  color: #007bff; /* Matching the brand color */
}

/* Navigation menu list */
.mobile-nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Top-level menu items */
.mobile-nav-menu > li {
  margin-bottom: 8px;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Style for the main menu links (Home, Products, etc.) */
.mobile-nav-menu > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  color: #1e293b;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  min-height: 56px;
  border-radius: 12px;
}

.mobile-nav-menu > li > a:hover {
  background-color: #f5f5f5;
}

.mobile-nav-menu > li > a:hover,
.mobile-nav-menu > li > a:active {
  background: linear-gradient(
    135deg,
    var(--primary-blue-light) 0%,
    var(--primary-orange-light) 100%
  );
  transform: translateX(4px);
}

.mobile-nav-menu i {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.mobile-nav-menu .fa-plus {
  transform: rotate(0deg);
}

.mobile-nav-menu .fa-plus.active {
  transform: rotate(45deg);
}

/* Submenu container */
.mobile-nav-menu .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

/* Enhanced Submenu */
.submenu {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: #f8fafc;
  margin: 0;
  padding: 0;
}

.submenu.active {
  max-height: 600px;
  padding: 8px 0;
}

.submenu li {
  margin: 0;
}

.submenu a {
  display: block;
  padding: 12px 24px 12px 40px;
  color: #475569;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.submenu a:hover,
.submenu a:active {
  background: linear-gradient(
    135deg,
    var(--primary-blue-light) 0%,
    var(--primary-orange-light) 100%
  );
  border-left-color: #ff6600;
  transform: translateX(4px);
}

/* Submenu items list */
.mobile-nav-menu .submenu li {
  border-bottom: 1px solid #eee; /* Light separator for submenu items */
}

/* Submenu item links */
.mobile-nav-menu .submenu li a {
  padding: 12px 30px; /* Increased left padding for indentation */
  display: block;
  color: #555; /* Slightly lighter color for sub-items */
  text-decoration: none;
  font-size: 15px; /* Slightly larger font size */
  font-weight: 500;
}

.mobile-nav-menu .submenu li a:hover {
  background-color: #f0f0f0;
}

/* Footer section inside the mobile menu */
.mobile-menu .footer {
  padding: 20px;
  text-align: center;
  border-top: 1px solid #eee;
}

/* Request for Demo button */
.mobile-menu .cta-button {
  background-color: #fff; /* White background */
  color: #007bff; /* Blue text color */
  border: 1px solid #007bff; /* Blue border */
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  max-width: 200px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.mobile-menu .cta-button:hover {
  background-color: #007bff;
  color: #fff;
}

/* Social media links inside the mobile menu */
.mobile-menu .social-links-mob {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  justify-content: center;
}

.mobile-menu .social-links-mob a {
  color: #007bff; /* Blue icon color */
  font-size: 20px;
  text-decoration: none;
  transition: color 0.3s;
}

.mobile-menu .social-links-mob a:hover {
  color: #0056b3; /* A darker shade of blue on hover */
}

/* Grid icon for opening the menu */
.grid-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  z-index: 1001;
  font-size: 24px;
  color: #007bff; /* Make the icon blue */
}

/* Hides the grid icon on larger screens */
@media (min-width: 932px) {
  .grid-icon {
    display: none;
  }
}

@media (max-width: 932px) {
  /* Hide the 'Request for Demo' button in the main header on mobile */
  .header-cta {
    display: none;
  }
}

@media (max-width: 932px) {
  /* Reset the header container's margin for mobile */
  .main-header .container {
    margin-left: auto;
  }

  /* Center all content containers and give them some padding */
  .container {
    padding: 0 20px;
  }

  /* Reset the footer's padding for a clean mobile layout */
  .footer-section {
    padding-left: 20px;
  }
}

@media (max-width: 768px) {
  /* Adjust footer link padding for a cleaner mobile layout */
  .footer-links {
    padding-left: 0;
    list-style-position: inside; /* Keeps the list bullets inside if they exist */
  }

  /* You may also want to adjust the padding of the footer sections themselves */
  .footer-section {
    padding: 0 20px;
  }
}
/* General fix for horizontal scrolling */
html,
body {
  overflow-x: hidden;
}

/* Mobile Menu Header */
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ddd;
}

.mobile-menu-header .logo-img {
  height: 45px; /* You can adjust this value */
  width: 235px;
  object-fit: cover;
}

/* Close button inside the new header */
.close-btn {
  font-size: 24px;
  cursor: pointer;
  color: #007bff;
  padding: 0;
}

.product-section {
  margin-bottom: 80px;
  padding: 0px 0;
  border-bottom: 1px solid #e5e7eb;
}

@media (max-width: 768px) {
  /* Style for the main product sections to stack content vertically */
  .product-section .product-content {
    flex-direction: column;
    align-items: center; /* Center the image and text content */
    text-align: center; /* Center the text for a better mobile experience */
  }

  /* Reset the 'reverse' order on mobile so all images are at the top */
  .product-section .product-content.reverse {
    flex-direction: column;
  }

  /* Style for the product image container */
  .product-image {
    margin-bottom: 20px; /* Add some space below the image */
    width: 100%; /* Ensure the image container takes the full width */
  }

  /* Ensure all images inside the product-image container are responsive */
  .product-image img {
    max-width: 180%; /* The image will not exceed the width of its container */
    height: auto; /* Maintain the aspect ratio */
    display: block; /* Remove any extra space below the image */
    width: 1200% !important; /* Override any inline widths to ensure it fits */
    max-height: 235px;
  }

  /* Style for the product information container */
  .product-info {
    width: 100%; /* Make the text content take the full width */
    padding: 0 15px; /* Add horizontal padding for better readability */
  }

  /* Adjust the feature list for mobile view */
  .feature-list {
    text-align: left; /* Keep the bullet points left-aligned for readability */
    list-style-position: inside;
    padding-left: 0;
  }

  /* Center the product title on mobile */
  .product-info h3 {
    text-align: center;
  }

  /* Adjust the product buttons to be full-width and stacked */
  .product-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Add space between the buttons */
    margin-top: 20px;
  }

  .product-buttons .btn {
    width: 100%;
    margin: 0;
  }

  /* Remove any unnecessary side margins that might be causing content to merge */
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (max-width: 768px) {
  /* This breakpoint is a common choice for mobile devices. Adjust if necessary. */

  /* Make sure all images are responsive by default */
  img {
    max-width: 100%; /* Ensures the image won't be wider than its container */
    height: auto; /* Maintains the image's aspect ratio */
  }

  /* Target the specific product image containers */
  .product-section {
    width: 100%; /* Ensure the image container takes the full width */
    overflow: hidden; /* Prevent horizontal overflow if image is too large */
    padding: 60px 0; /* Add some padding for spacing */
    background: #f8fafc; /* Example background color */
  }

  /* Ensure the main content area has proper padding to prevent overflow */
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}