body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  background-color: #fff;
  color: #333;
  padding-top: 60px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.logo {
  height: 50px;
  width: 90px;
}

.factory-image {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.factory-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.overlay-content {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  color: white;
}

.top-content {
  font-size: 45px;
  margin-right: 500px;
  line-height: 1.2;
  color: #000;
  font-weight: normal;

}

.top-content .highlight {
  color: #ae0e30;
}

.highlight2 {
  font-size: 40px;
  font-weight: normal;
}

.highlight4 {
  color: #ae0e30;
  font-weight: normal;

}

.highlight3 {
  font-size: 40px;
  color: #ae0e30;
  font-weight: normal;

}

.features {
  display: flex;
  margin-top: 40px;
  width: 100%;
  justify-content: flex-end;
  padding-right: 40px;
}

.feature {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  color: white;
  max-width: 600px;
  justify-content: space-between;
  width: 100%;
  margin-left: 0;
  padding-right: 0;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 calc(25% - (15px * 3 / 4));
  max-width: 140px;
  min-width: 60px;
  padding: 5px;
  box-sizing: border-box;
}

.feature p {
  font-size: 18px;
  color: #f0f0f0;
  margin-bottom: 5px;
  text-align: center;
}

.feature img {
  width: 75px;
  height: 75px;
  margin-top: 10px;
}

.bottom-head {
  text-align: center;
  font-size: 30px;
  margin-top: 60px;
}

.bottom-content {
  text-align: center;
  font-size: 20px;
  color: rgb(182, 178, 178);
}

.video-div,
.video,
.video::before,
.popup-content,
.video-popup,
.button-container3,
.button-container2,
#popup-arrow,
#popup-arrow2 {
  display: none;
}

.video-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #4c4c4c;
  overflow: hidden;
}

.video-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}

.product-video {
  height: 92vh;
  object-fit: contain;
}

/* .pagination-buttons {
  position: absolute;
  right: 50%;
  bottom: 20px;
  transform: translateY(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;
}

.page-dot {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
  pointer-events: none;
}

.page-dot.active {
  background-color: white;
} */

.arrow-container {
  position: absolute;
  width: 100%;
  top: 50%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
}

.back-arrow,
.next-arrow {
  width: 50px;
  height: auto;
  cursor: pointer;
  pointer-events: auto;
}

.back-arrow {
  position: absolute;
  left: 10px;
}

.next-arrow {
  position: absolute;
  right: 10px;
}

.button-container {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 10px;
  z-index: 10;
}

.button-container button {
  padding: 0px 35px;
  background-color: transparent;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 25px;
  border-radius: 0;
  border-right: 1px solid white;
}

.button-container button:hover {
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease, color 0.3s ease;
}

.video-button.active {
  text-decoration: underline;
}

.video-button:last-child {
  border-right: none;
}




.products-intro h2 {
  margin: 0;
  font-size: 2.8rem;
  color: #333;
}

.products-intro {
  display: flex;
  justify-content: space-around;
  /* Horizontally center */
  align-items: center;
  /* Vertically center (optional) */
  gap: 10px;
  box-sizing: border-box;

}



.client-tile {
  flex: 1 1 300px;
  /* Grow, shrink, and base width */
  padding: 20px;
  /* Reduced for responsiveness */
  box-sizing: border-box;
  max-width: 650px;
  margin: 10px;
  /* Adds space between cards if needed */
  border-radius: 5px;
}


.client-desc {
  font-size: 18px;
  margin-top: 10px;
}

.text-content,
.client-text-content {
  flex: 1 1 300px;
  /* Same flexible style */
  max-width: 500px;
  box-sizing: border-box;
  text-align: left;
}


.product-desc {
  font-size: 18px;
  margin-top: 10px;
}

.text-content h2 {
  font-size: 38px;
  color: black;
  margin-bottom: 20px;
}

.text-content h2 .highlight {
  color: #c12c3f;
}

.text-content h3 {
  font-size: 18px;
  color: #555;
  line-height: 1.6;
}



.left-arrow,
.right-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: auto;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.left-arrow {
  left: -50px;
}

.right-arrow {
  right: -50px;
}

.left-arrow:hover,
.right-arrow:hover {
  transform: scale(1.2) translateY(-50%);
  background-color: lightgray;
}

.left-arrow:active,
.right-arrow:active {
  transform: scale(1.1) translateY(-50%) translateY(2px);
  background-color: gray;
}

.team-image {
  position: relative;
  top: -5px;
}

.team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-text {
  text-align: center;
  position: absolute;
  font-size: 23px;
  line-height: 1.5;
  bottom: 50px;
  width: 100%;
  color: #fff;
  padding: 10px 10px;
  box-sizing: border-box;
}

.history {
  top: -20px;
  position: relative;
}

.history-image-text {
  color: white;
  position: relative;
  top: -80px;
  text-align: center;
  font-size: 30px;
  font-weight: normal;
}

.history img {
  height: auto;
  width: 100%;
}

.services-image img {
  height: 100%;
  width: 100%;
}

.history-head {
  position: absolute;
  margin-top: 60px;
  margin-left: 130px;
    font-size: 2.8rem;
  color: #fff;
  font-weight: normal;
}

.service-desc {
  display: none;
  opacity: 0.5;
  position: absolute;
  margin-top: 170px;
  margin-left: 130px;
  font-size: 20px;
  line-height: 1.5;
  color: #fff;
  width: 30%;
}

.service-desc.visible {
  display: block;
  opacity: 1;
}

.about-section {
  padding: 40px;
  background-color: #ae0e30;
  color: white;
  font-family: Arial, sans-serif;
  align-items: center;
}

.about-content p {
  font-size: 25px;
  line-height: 1.8;
  margin-bottom: 20px;
  margin-left: 10%;
  margin-right: 10%;
}

.help-section {
  top: -20px;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: left;
}

.help-top-content {
  margin-left: 30px;
}

.help-top-desc {
  font-size: 20px;
}

.help-head {
  font-weight: 400;
  font-size: 20px;
  color: #a52735;
  margin-bottom: 20px;
  text-align: left;
}

.help-section p {
  font-size: 16px;
  margin-bottom: 20px;
  text-align: center;
}

.help-options {
  display: flex;
  justify-content: left;
  margin-top: 20px;
}

.help-option {
  display: flex;
  text-align: left;
  width: 30vw;
}

.help-option img {
  width: 70px;
  height: 70px;
}

.help-option1,
.help-option2,
.help-option3 {
  margin-left: 15px;
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}

.help-option1 {
  margin-top: 20px;
}

.help-option p {
  margin-left: 10px;
  font-size: 14px;
  color: #555;
  text-align: left;
}

.social-share {
  padding: 20px;
  text-align: left;
  margin-left: 10px;
}

.social-share p {
  margin-bottom: 10px;
  font-size: 16px;
  margin-left: 15px;
}

.social-icons a img {
  width: 30px;
  margin: 0 10px;
  gap: 10px;
}

.icon-SM {
  width: 30px;
  height: 30px;
}

.footer {
  background-color: #a52735;
  color: white;
  padding: 20px;
  position: relative;
  z-index: 1;
}

.footer-links {
  margin-bottom: 10px;
}

.footer-links a {
  color: rgb(238, 165, 165);
  margin: 0 10px;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer p {
  font-size: 14px;
}

.footercopy {
  margin-left: 9px;
}


/* Tablet Styles (769px to 1366px - iPad Pro landscape and similar) */
@media (min-width: 769px) and (max-width: 1100px) {
  body {
    padding-top: 60px;
  }

  .factory-image {
    height: 660px;
    object-fit: cover;
    overflow: hidden;
  }

  .top-content {
    font-size: 36px;
    margin: 0 auto 30px auto;
    width: 90%;
    text-align: center;
  }

  .top-content .highlight2,
  .top-content .highlight3 {
    font-size: 32px;
  }

  .features {
    margin-top: 30px;
    /* Adjusted margin-top for tablet */
    justify-content: center;
    /* Center the whole features block on tablets */
    padding-right: 0;
    /* Remove specific right padding */
  }

  .feature {
    gap: 10px;
    /* Reduced gap for tablets */
    max-width: 600px;
    /* Adjusted max-width for tablets to ensure 4 items fit */
    justify-content: space-around;
    /* Distribute items evenly with space around */
    margin-left: auto;
    margin-right: auto;
    /* Center the feature block */
  }

  .feature-item {
    flex: 0 0 calc(25% - (10px * 3 / 4));
    /* Calculate width for 4 items with 10px gap */
    max-width: 120px;
    /* Max width for each item on tablet */
  }

  .feature p {
    font-size: 14px;
    /* Smaller font for tablets */
  }

  .feature img {
    width: 50px;
    /* Smaller image for tablets */
    height: 50px;
  }

  .bottom-head {
    font-size: 28px;
    margin-top: 40px;
    /* Adjusted margin-top for tablet */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .bottom-content {
    font-size: 16px;
    padding: 0 30px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .button-container {
    flex-direction: row;
    width: 70%;
    top: 20px;
    left: 15%;
    gap: 10px;
    padding: 0;
    justify-content: center;
  }

  .button-container button {
    font-size: 18px;
    padding: 12px 20px;
    width: auto;
    border-right: 1px solid white;
    border-bottom: none;
  }

  .video-button:last-child {
    border-right: none;
  }

  .arrow-container {
    width: 90%;
    top: 50%;
  }

  .back-arrow,
  .next-arrow {
    width: 40px;
  }

  .product-video {
    height: 70vh;
  }

  .pagination-buttons {
    bottom: 15px;
  }

  /* Products & Clients Section - Tablet specific adjustments */
  .products-intro {
    flex-direction: column;
    /* Stack vertically for tablets */
    align-items: center;
    justify-content: space-around;
    margin-left: 0;
    height: auto;
    /* Allow height to be determined by content on tablets */
    padding: 40px;
  }

  .text-content {
    width: 90%;
    /* Full width for text content on tablets */
    max-width: none;
    /* No max-width constraint */
    text-align: center;
    margin-bottom: 40px;
    padding-right: 0;
    /* Remove padding-right for full width */
  }

  .product-desc {
    font-size: 18px;
  }

  .product-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }

  .product-buttons a {
    padding: 10px 18px;
    font-size: 16px;
  }

  

  /* Tablet specific product item size */
  .product-item {
    flex: 0 0 calc(50% - (20px / 2));
    /* Two products per row for tablets with gap */
    max-width: calc(50% - (20px / 2));
    /* Ensure max-width doesn't force more than 2 per row */
    margin: 10px;
    /* Add horizontal margin for spacing */
    margin-bottom: 20px;
    /* Space between rows */
  }

  .left-arrow,
  .right-arrow {
    display: none;
    /* Hide arrows on tablet if they cause issues */
  }

  .client-tile {
    flex-direction: column;
    width: 90%;
    margin-left: 0;
    margin-bottom: 30px;
  }

  .client-text-content {
    width: 90%;
    text-align: center;
    margin-bottom: 30px;
    order: 1;
  }

  #client-grid {
    max-width: 90%;
    order: 2;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  /* Services Section */
  .services-image img {
    height: auto;
    max-width: 100%;
    margin: 0 auto;
  }

  .history-head {
    font-size: 32px;
    margin-left: 40px;
    width: 85%;
  }

  .service-desc {
    font-size: 16px;
    margin-top: 100px;
    margin-left: 40px;
    width: 50%;
  }

  /* About Section */
  .about-content p {
    font-size: 20px;
    margin-left: 5%;
    margin-right: 5%;
  }

  /* Team Image Section */
  .team-image {
    top: 0;
    bottom: 0;
  }

  .image-text {
    font-size: 17px;
    bottom: 0px;
    width: 100%;
  }

  /* History Section */
  .history {
    top: 0;
  }

  .history-head {
    margin-left: 40px;
  }

  /* Help Section */
  .help-top-content {
    margin-left: 30px;
  }

  .help-top-desc {
    font-size: 18px;
    margin-bottom: 30px;
  }

  .help-options {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    padding: 0 30px;
    gap: 10px;
  }

  .help-option {
    width: calc(33.33% - 20px);
    /* Three options per row */
    margin: 10px;
    /* Reduced margin */
  }

  .help-option img {
    width: 50px;
    height: 50px;
  }

  .help-option p {
    font-size: 14px;
  }

  .social-share {
    margin-left: 30px;
  }

  .social-share p {
    font-size: 16px;
  }

  .social-icons a img {
    width: 30px;
    margin: 0 8px;
  }

  /* Footer */
  .footer-links {
    justify-content: center;
  }

  .footer-links a {
    margin: 10px;
    font-size: 16px;
  }

  .footercopy {
    font-size: 14px;
  }
}

/* New Media Query for screens larger than 1367px (Desktop) */
@media (min-width: 1367px) {
  .products-intro {
    flex-direction: row;
    /* Ensure row layout for larger screens */
    justify-content: space-around;
    height: 100vh;
    /* Full viewport height on large screens */
    width: 100%;
    /* Full viewport width */
    max-width: none;
    /* Remove any max-width */
  }

  .text-content {
    width: 30%;
    /* Keep this for desktop */
    max-width: 400px;
    /* Maintain max-width for text block */
    text-align: left;
    padding: 30px;
    /* Ensure spacing between text and image */
  }


  /* Desktop specific product item size - overrides default for larger screens */
  .product-item {
    /* Adjusted flex-basis to fit 3 items per row, considering margins */
    flex: 0 0 calc(13.33% - 20px);
    /* Adjust 20px based on desired gap */
    margin: 0 10px;
    /* Add horizontal margin for spacing */
    max-height: 350px;
    /* Ensure images don't get excessively large on ultra-wide screens */
    min-width: 250px;
    /* NEW: Ensures images are a good size even if space is tight */
  }

  .left-arrow,
  .right-arrow {
    display: block;
    /* Ensure arrows are visible on desktop */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: auto;
    cursor: pointer;
    z-index: 10;
  }

  .left-arrow {
    left: -50px;
    /* Adjust as needed to be outside the container */
  }

  .right-arrow {
    right: -50px;
    /* Adjust as needed to be outside the container */
  }
}

/* Mobile Styles (up to 480px wide, including iPhone SE) */
@media (min-width: 480px) and (max-width: 770px) {
  body {
    padding-top: 30px;
  }

  .factory-image {
    height: 430px;
    object-fit: cover;
    overflow: hidden;
  }

  .overlay-content {
    padding: 20px 15px 0;
    justify-content: flex-start;
  }

  .top-content {
    font-size: 16px;
    line-height: 1.2;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 5px;
    width: 100%;
    padding-top: 10px;
  }

  .top-content .highlight2,
  .top-content .highlight3 {
    font-size: 14px;
  }

  .features {
    margin-top: 110px;
    /* Adjusted margin-top for mobile to reduce space */
    justify-content: center;
    /* Center the whole features block on mobile */
    padding: 0;
    /* Removed horizontal padding to maximize available width for .feature */
    padding-right: 0;
  }

  .feature {
    gap: 5px;
    /* Even smaller gap for mobile to fit 4 items tightly */
    max-width: 320px;
    /* Increased max width for mobile items to spread them out more */
    justify-content: space-around;
    /* Distribute items evenly */
    margin-left: auto;
    /* Center the feature block within .features */
    margin-right: auto;
  }

  .feature-item {
    flex: 0 0 calc(25% - (5px * 3 / 4));
    /* Calculate width for 4 items with 5px gap */
    max-width: 70px;
    /* Increased max width for mobile items */
  }


  .feature-item img {
    width: 25px;
    /* Smaller images for mobile */
    height: 25px;
  }

  .feature-item p {
    font-size: 8px;
    /* Smallest readable font size for mobile */
  }

  .bottom-head {
    font-size: 12px;
    margin-top: 100px;
    /* Adjusted margin-top for mobile after features */
    text-align: center;
  }

  .bottom-content {
    font-size: 10px;
    padding: 0 10px;
    line-height: 1.3;
    text-align: center;
  }

  /* Video Section */
  .button-container {
    flex-direction: row;
    width: 95%;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    gap: 5px;
    padding: 0 5px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .button-container button {
    font-size: 12px;
    padding: 6px 10px;
    width: auto;
    flex-grow: 1;
    border-right: 1px solid white;
    border-bottom: none;
    white-space: nowrap;
  }

  .video-button:last-child {
    border-right: none;
  }

  .arrow-container {
    width: 100%;
    top: 50%;
  }

  .back-arrow,
  .next-arrow {
    width: 30px;
  }

  .product-video {
    height: 56vw;
  }

  .pagination-buttons {
    bottom: 5px;
  }

  /* Products Section */
  .products-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 0;
    height: auto;
    padding: 20px;
  }

  .text-content {
    width: 95%;
  }

  .product-desc {
    font-size: 14px;
  }

  .product-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .product-buttons a {
    padding: 8px 12px;
    font-size: 14px;
  }

  .product-item {
    flex: 0 0 100%;
  }

  /* Client Section */
  .client-text-content {
    width: 95%;
    order: 1;
  }

  .client-desc {
    font-size: 20px;
  }

  #client-grid {
    width: 95vw;
    margin-left: 0;
    order: 2;
    grid-template-columns: repeat(1, 1fr);
    /* gap: 20px; */
  }

  .client-tile {
    width: 90vw;
  }

  /* Services Section */
  .history-head {
    margin-left: 15px;
    font-size: 20px;
    width: 80%;
  }

  .service-desc {
    margin-left: 15px;
    font-size: 12px;
    width: 85%;
    margin-top: 40px;
  }

  /* About Section */
  .about-content p {
    font-size: 16px;
    margin-left: 2%;
    margin-right: 2%;
  }

  /* Team Image Section */

  .image-text {
    font-size: 10px;
    bottom: 8px;
    transform: none;

  }

  /* History Section */
  .history-head {
    margin-left: 10px;
    font-size: 15px;
    margin-top: 10px;
  }

  .history-image-text {
    font-size: 20px;
    top: -30px;
  }

  /* Help Section */
  .help-top-content {
    margin-left: 15px;
  }

  .help-top-desc {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .help-options {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 15px;
  }

  .help-option {
    width: 100%;
    margin: 10px 0;
  }

  .help-option img {
    width: 40px;
    height: 40px;
  }

  .help-option p {
    font-size: 12px;
  }

  .social-share {
    margin-left: 15px;
  }

  .social-share p {
    font-size: 14px;
    margin-left: 0;
  }

  .social-icons a img {
    width: 25px;
    margin: 0 5px;
  }

  /* Footer */
  .footer-links {
    text-align: center;
    flex-wrap: wrap;
  }

  .footer-links a {
    margin: 5px;
    font-size: 14px;
  }

  .footercopy {
    text-align: center;
    margin-left: 0;
    font-size: 12px;
  }
}

/* Mobile Styles (350px to 479px wide) */
@media (min-width: 350px) and (max-width: 479px) {
  body {
    padding-top: 30px;
  }

  .factory-image {
    height: 420px;
    object-fit: cover;
    overflow: hidden;
  }

  .overlay-content {
    padding: 20px 10px 0;
    justify-content: flex-start;
  }

  .top-content {
    font-size: 15px;
    line-height: 1.2;
    text-align: left;
    margin-top: 8px;
    margin-bottom: 5px;
    width: 100%;
    padding-top: 8px;
  }

  .top-content .highlight2,
  .top-content .highlight3 {
    font-size: 13px;
  }

  .features {
    margin-top: 100px;
    justify-content: center;
    padding: 0;
    padding-right: 0;
  }

  .feature {
    gap: 4px;
    max-width: 300px;
    justify-content: space-around;
    margin-left: auto;
    margin-right: auto;
  }

  .feature-item {
    flex: 0 0 calc(25% - (4px * 3 / 4));
    max-width: 65px;
  }

  .feature-item img {
    width: 22px;
    height: 22px;
  }

  .feature-item p {
    font-size: 7.5px;
  }

  .bottom-head {
    font-size: 11px;
    margin-top: 90px;
    text-align: center;
  }

  .bottom-content {
    font-size: 9px;
    padding: 0 10px;
    line-height: 1.3;
    text-align: center;
  }

  /* Video Section */
  .button-container {
    flex-direction: row;
    width: 95%;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    gap: 5px;
    padding: 0 5px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .button-container button {
    font-size: 11px;
    padding: 5px 8px;
    width: auto;
    flex-grow: 1;
    border-right: 1px solid white;
    border-bottom: none;
    white-space: nowrap;
  }

  .video-button:last-child {
    border-right: none;
  }

  .arrow-container {
    width: 100%;
    top: 50%;
  }

  .back-arrow,
  .next-arrow {
    width: 28px;
  }

  .product-video {
    height: 56vw;
  }

  .pagination-buttons {
    bottom: 5px;
  }

  /* Products Section */
  .products-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-left: 0;
    height: auto;
    padding: 0px;
  }

  .text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
  }

  .product-desc {
    font-size: 13px;
    text-align: center;
    padding: 5px;
    
  }

  .product-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .product-buttons a {
    padding: 7px 10px;
    font-size: 13px;
  }

  .product-item {
    flex: 0 0 100%;
  }

  /* Client Section */
  .client-text-content {
    width: 100%;
    text-align: center;
  }

  .client-desc {
    font-size: 17px;
    margin-left: 5px;
    
  }

  #client-grid {
    width: 95%;
    margin-left: 0;
    order: 2;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }

  .client-tile {
    width: 90%;
  }

  /* Services Section */
  .history-head {
    margin-left: 10px;
    font-size: 18px;
    width: 80%;
    margin-top: 8px;
  }

  .service-desc {
    margin-left: 10px;
    font-size: 8px;
    width: 65%;
    margin-top: 45px;
  }

  /* About Section */
  .about-content p {
    font-size: 15px;
    margin-left: 2%;
    margin-right: 2%;
  }

  /* Team Image Section */
  .image-text {
    font-size: 6px;
    bottom: 6px;
    transform: none;
  }

  /* History Section */
  .history-image-text {
    font-size: 18px;
    top: -25px;
  }

  /* Help Section */
  .help-top-content {
    margin-left: 10px;
  }

  .help-top-desc {
    font-size: 15px;
    margin-bottom: 20px;
  }

  .help-options {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 10px;
  }

  .help-option {
    width: 100%;
    margin: 10px 0;
  }

  .help-option img {
    width: 38px;
    height: 38px;
  }

  .help-option p {
    font-size: 11px;
  }

  .social-share {
    margin-left: 10px;
  }

  .social-share p {
    font-size: 13px;
    margin-left: 0;
  }

  .social-icons a img {
 
    margin: 0 4px;
  }

  /* Footer */
  .footer-links {
    text-align: center;
    flex-wrap: wrap;
  }

  .footer-links a {
    margin: 5px;
    font-size: 13px;
  }

  .footercopy {
    text-align: center;
    margin-left: 0;
    font-size: 11px;
  }
}

/* Product Buttons */
.product-buttons {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 15px;
}

.product-buttons a {
  display: block;
  padding: 14px 20px;
  border-radius: 16px;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  /* Increased for better visual balance with other text */
  font-weight: 500;
  color: #FFFFFF;
  transition: 0.1s ease;
  font-family: 'Poppins', sans-serif;
}

.product-buttons a:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Product Button Colors */
.safebox {
  background-color: #AE0E30;
}

.home {
  background-color: #AE0E30;
}

.supermarket {
  background-color: #AE0E30;
}

.darkstores {
  background-color: #AE0E30;
}

.materialhandlingequipment {
  background-color: #AE0E30;
}

/* gemini ============================================ */

/* Carousel Container */
.carousel-container {
  /* display: flex;
  flex-direction: column; */
  position: relative;
  width: 100%;
  max-width: 92rem;
  /* Increased max-width for even bigger cards */
  /* background-color: #fff; */
  /* Equivalent to Tailwind's shadow-xl */
  border-radius: 0.75rem;
  /* Equivalent to Tailwind's rounded-xl */
  overflow: hidden;
}

/* Carousel Slides Container */
.carousel-slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  gap: 20px;
  /* Added spacing between slides */
  padding: 0 10px;
  /* Half of the gap on each side for consistent spacing */
  /* Hide scrollbars but allow scrolling mechanism for carousel */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.carousel-slides::-webkit-scrollbar {
  display: none;
}

/* Individual Slide Styling - Default for small screens (1 slide) */
.carousel-slide {
  width: calc(100% - (2 * 10px));
  /* 1 slide, accounting for outer padding */
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
  background-color: #fff;
  /* Ensure slide background is white */
  border-radius: 0.75rem;
  /* Match container border-radius for aesthetic consistency */
  overflow: hidden;
  /* Hide anything outside slide bounds, especially for images */
}


/* Media Queries for responsiveness */

/* Medium screens: 2 slides */
@media (min-width: 640px) {

  /* Equivalent to Tailwind's sm: breakpoint */
  .carousel-container {
    display: flex;
    flex-direction: column;
    max-width: 56rem;
    /* Adjusted for better 2-slide view with bigger cards */
  }

  .carousel-slide {
    width: calc((100% - (1 * 20px)) / 2);
    /* 2 slides, accounting for 1 gap */
  }

}

/* Large screens: 3 slides */
@media (min-width: 1100px) {
  .carousel-container {
  /* display: flex;
  flex-direction: column; */
  position: relative;
  width: 50%;
  max-width: 72rem;
  /* Increased max-width for even bigger cards */
  /* background-color: #fff; */
  /* Equivalent to Tailwind's shadow-xl */
  border-radius: 0.75rem;
  /* Equivalent to Tailwind's rounded-xl */
  overflow: hidden;
}
  
  .carousel-slide {
    width: calc((100% - (2 * 20px)) / 3);
    /* 3 slides, accounting for 2 gaps */
  }
}

/* Image Styling - Increased height for bigger cards */
.carousel-slide img {
  width: 100%;
  height: 350px;
  /* Further increased height for bigger cards */
  object-fit: cover;
  /* Ensures images cover the area without distortion */
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

/* Overlay Text Container */
.carousel-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Using a darker gradient for better text readability */
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 1.25rem;
  /* Increased padding for better text fit in bigger cards */
  color: #fff;
  text-align: center;
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

.carousel-overlay h2 {
  font-size: 1.5rem;
  /* Larger heading */
  font-weight: 700;
  margin-bottom: 0.5rem;
  /* Adjusted margin */
  line-height: 1.2;
  color: #f0f0f0;
}

.carousel-overlay p {
  font-size: 1rem;
  /* Larger description text */
  opacity: 0.9;
  /* Slightly less transparent for better readability */
}

/* Navigation Buttons */
.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.7);
  color: #4b5563;
  padding: 0.75rem;
  border-radius: 9999px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: none;
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease;
  z-index: 10;
  /* Ensure buttons are above slides */
}

.nav-button:hover {
  background-color: #fff;
}

.nav-button:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.75);
}

#prevBtn {
  left: 1rem;
}

#nextBtn {
  right: 1rem;
}

.nav-button svg {
  height: 1.5rem;
  width: 1.5rem;
}





.contact-divider {
  border: 1px solid rgb(221, 215, 215);
  width: 200px;
  margin-left: 40px;

}