/* Reset default margin/padding */
 html {
   scroll-behavior: smooth;
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Arial, Helvetica, sans-serif;
 }


 /* -------------------- Navigation bar -------------------- */
 nav {
   /*position: sticky; */
   /* Makes it stick when scrolling */
   /* top: 0; */
   /* Stick to top */
   position: relative;
   width: 100%;
   background-color: white;
   /* Theme color */
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 20px;
   z-index: 1000;
   border-bottom: 1px solid #b9b8b8;
   /* Stay above other content
   text-transform: uppercase;  */
 }

 /* Logo */
 .logo img {
   height: 70px;
   /* Adjust logo size */
 }

 /* Navigation links */
 .nav-links {
   display: flex;
   gap: 55px;
   align-items: center;
 }

 .nav-links a {
   color: rgb(0, 102, 102);
   text-decoration: none;
   font-weight: bold;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 18px;
   transition: color 0.3s;
 }

 .nav-links a:hover {
   color: rgba(0, 102, 102, 0.6);
 }

 /* Dropdown */
 .dropdown {
   position: relative;
 }

 .dropbtn {
   cursor: pointer;
 }

 /* Dropdown menu */
 .dropdown-content {
   position: absolute;
   z-index: 2000;
   top: 100%;
   left: 0;
   background-color: white;
   min-width: 220px;
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
   display: none;
   border-radius: 6px;
   overflow: hidden;
 }

 /* Dropdown links */
 .dropdown-content a {
   color: rgb(0, 102, 102);
   padding: 12px 16px;
   display: block;
   text-decoration: none;
   font-weight: 500;
   font-size: 16px;
 }

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

 /* Show submenu on hover */
 .dropdown:hover .dropdown-content {
   display: block;
 }

 /* -------------------- Navigation bar -------------------- */


 /* -------------------- Banner Section -------------------- */
 /*section {
   /* adjust based on your navbar height 
  scroll-margin-top: 80px;
 } */


 /* Banner Section */
 .home-banner {
   width: 100%;
 }

 /* Banner container with background image */
 .banner-container {
   position: relative;
   height: 90vh;
   /* Full viewport height */
   margin: clamp(15px, 2vw, 30px);
   /* Responsive margin */
   border-radius: 18px;
   overflow: hidden;
   /* Clip image and overlay inside border-radius */
   background: url("../images/HeaderImage_Desktop.png") no-repeat center center;
   background-size: cover;

 }

 .banner-out-container {
   margin: 0 auto;
   max-width: 1440px;
 }

 /* Text overlay container */
 .banner-text {
   position: absolute;
   top: 6%;
   /* Space from top */
   left: 5%;
   /* Space from left */
   max-width: min(630px, 90%);
   /* Prevents overflow on smaller screens */
   color: rgb(0, 102, 102);
 }

 /* Banner heading */
 .banner-text h1 {
   font-size: clamp(1.8rem, 4vw, 2.5rem);
   /* Scales between 1.8rem and 2.5rem */
   margin-bottom: clamp(8px, 1vw, 12px);
   /* max-width: min(500px, 85%); */
   text-align: justify;
 }

 /* Secondary headings (two lines) */
 .banner-text h3 {
   font-size: clamp(1.2rem, 2.5vw, 1.6rem);
   /* Responsive font size */
   font-weight: 550;
   margin: 4px 0;
   /* max-width: min(500px, 85%); */
   text-align: justify;
 }

 /* Description paragraph */
 .banner-desc {
   /* max-width: min(500px, 85%); */
   /* Changed from fixed width */
   margin-top: clamp(12px, 1.5vw, 16px);
   font-size: clamp(1rem, 1.8vw, 1.1rem);
   /* Responsive font size */
   line-height: 1.5;
   color: black;
   /* Slightly softer than pure white */
   text-align: justify;
 }

 /* CTA button */
 .btn-banner {
   display: inline-block;
   margin-top: clamp(16px, 2vw, 20px);
   padding: clamp(10px, 1.5vw, 12px) clamp(16px, 2.5vw, 20px);
   border-radius: 25px;
   background-color: rgb(0, 102, 102);
   color: #fff;
   font-size: clamp(1.1rem, 2vw, 1.25rem);
   /* Responsive font size */
   text-decoration: none;
   transition: background-color 0.3s;
 }

 .btn-banner:hover {
   background-color: rgb(34, 134, 134);
 }

 /* -------------------- Banner Section -------------------- */


 /* -------------------- About Us Section -------------------- */
 .about-us {
   padding: clamp(40px, 6vw, 60px) clamp(20px, 5vw, 80px);
 }


 /* title */
 .about-content h1 {
   font-size: clamp(2rem, 4vw, 2.5rem);
   margin-bottom: clamp(20px, 3vw, 30px);
   color: rgb(0, 102, 102);
   text-align: center;
 }

 .about-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   max-width: 1440px;
   margin: 0 auto;
   width: 100%;
   /* Ensures it fills available space */
 }

 .about-box {
   background: #ffffff;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   border: 1px solid #ccc;
 }

 .about-box:hover {
   transform: translateY(-6px);
   box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
 }

 .about-text {
   padding: 30px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .about-text h3 {
   color: rgb(0, 102, 102);
   font-size: 1.5rem;
   margin-bottom: 10px;
 }

 .about-text h4 {
   font-size: 1.2rem;
   margin-bottom: 20px;
   font-weight: 600;
 }

 .about-text p {
   font-size: 1rem;
   line-height: 1.4;
   margin-bottom: 15px;
   text-align: justify;
 }

 .about-text p:last-child {
   margin-bottom: 0;
 }

 .about-image {
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }

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

 .about-bottom {
   padding: 20px;
   font-size: 1.5rem;
   text-align: center;
   color: rgb(0, 102, 102);
 }


 /* Timeline Section */
 .history-page {
   padding: clamp(30px, 5vw, 50px) clamp(10px, 2vw, 20px);
 }

 .history-page h1 {
   font-size: 2.5rem;
   margin-bottom: 50px;
   color: rgb(0, 102, 102);
   text-align: center;
 }

 .timeline {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 0;
   /* IMPORTANT - no gap */
   margin: clamp(20px, 3vw, 30px) auto 0 auto;
   /* Centers the timeline */
   /* max-width: 1200px; */
   max-width: 1440px;
   width: 100%;
   /* Ensures it scales properly */
 }

 /* Base box style */
 .box {
   border-right: 1px solid black;
   border-bottom: 1px solid black;
   padding: 40px 25px;
   text-align: left;
   position: relative;
 }

 .box h3 {
   font-size: 1.6rem;
   color: rgb(0, 102, 102);
   margin-bottom: 15px;
 }

 /* TOP ROW (box 1-3) */
 .box:nth-child(-n+3) {
   border-top: none;
   /* remove upper border */
 }

 /* BOTTOM ROW (box 4-5) */
 .box:nth-child(n+4) {
   border-bottom: none;
   /* remove bottom border */
 }

 .box:nth-child(1) {
   grid-column: 1 / 3;
   /* Spans 2 columns */
   border-top: none;
   border-left: 1px solid black;
 }

 .box:nth-child(2) {
   grid-column: 3 / 5;
   /* Spans 2 columns */
   border-top: none;
   border-left: none;
   /* Remove to avoid double border */
 }

 /* Remove right border of box 3 (2025) */
 .box:nth-child(3) {
   grid-column: 5 / 7;
   /* Spans 2 columns */
   border-top: none;
   border-right: none;
   border-left: none;
   /* Remove to avoid double border */
 }

 /* Position bottom row centered */
 .box:nth-child(4) {
   grid-column: 2 / 4;
   /* Centered under boxes 1-2 */
   border-bottom: none;
   border-left: 1px solid black;
 }

 /* Remove right border of box 5 (1999) */
 .box:nth-child(5) {
   grid-column: 4 / 6;
   /* Centered under boxes 2-3 */
   border-bottom: none;
   border-right: none;
   border-left: none;
   /* Remove to avoid double border */
 }

 .box p {
   font-size: 1.1rem;
   line-height: 1.6;
 }

 /* Vision mission section*/
 .company-values,
 .product-categories {
   padding: 50px 10px;
   text-align: justify;
   max-width: 1440px;
   margin: 0 auto;
 }

 .company-values h2,
 .product-categories h2 {
   font-size: 2.5rem;
   color: rgb(0, 102, 102);
   margin-bottom: 40px;
   text-align: center;
 }

 .company-values p {
   margin-bottom: 30px;
   font-size: 1.1rem;
   text-align: center;
   width: 100%
 }

 .vm-row {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   margin-top: 40px;
 }

 .vm-row-2 {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 10px;
   margin-top: 40px;
 }

 /* First 3 boxes → each takes 2 columns (3 × 2 = 6) */
 .vm-box-2:nth-child(-n+3) {
   grid-column: span 2;
 }

 /* Last 2 boxes → each takes 3 columns (2 × 3 = 6) */
 .vm-box-2:nth-child(n+4) {
   grid-column: span 3;
 }


 /* Vision & Mission */

 .vm-icon {
   width: 100px;
   height: 100px;
   display: flex;
   align-items: center;
   /* vertical center */
   justify-content: center;
   /* horizontal center */
   margin: 0 auto 15px;
   /* center the icon box itself */
 }

 .vm-icon img {
   width: 100%;
   height: 100%;
   object-fit: contain;
 }

 .vm-box,
 .vm-box-2 {
   background: #ffffff;
   border-radius: 16px;
   padding: 30px 25px;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   border: 1px solid rgb(0, 102, 102);
 }

 .vm-box:hover,
 .vm-box-2:hover {
   transform: translateY(-6px);
   box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
 }

 .vm-box h3,
 .vm-box-2 h3 {
   margin-bottom: 15px;
   color: rgb(0, 102, 102);
   text-align: center;
   font-size: 1.3rem;
 }

 .vm-box p {
   font-size: 1rem;
   line-height: 1.6;
   text-align: justify;
 }

 .vm-box-2 p {
   font-size: 1rem;
   line-height: 1.6;
   text-align: center;
 }

 .core-list {
   padding-left: 20px;
   margin: 0;
 }

 .core-list li {
   margin-bottom: 8px;
   font-size: 1rem;
 }


 /* Brands & Customers Section */
 .customers-section,
 .brands-section {
   padding: 50px 10px;
   text-align: center;
 }

 .customers-section h1,
 .brands-section h1 {
   color: rgb(0, 102, 102);
   font-size: 2.5rem;
   margin-bottom: 30px;
 }

 .customers-section p,
 .brands-section p {
   margin-bottom: 30px;
   font-size: 1.1rem;
 }

 /* Slider layout */
 .customers-slider,
 .brands-slider {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 30px;
 }

 /* Window */
 .customers-window,
 .brands-window {
   overflow: hidden;
   width: 900px;
   max-width: 100%;
 }

 /* Track */
 .customers-track,
 .brands-track {
   display: flex;
   transition: transform 0.5s ease;
 }

 /* Customer logo */
 .customer-item,
 .brand-item {
   min-width: 200px;
   padding: 30px;
   margin: 0 20px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .customer-item img,
 .brand-item img {
   max-height: 90px;
   max-width: 100%;
   object-fit: contain;
   transition: all 0.3s ease;
 }

 /* Hover effect */
 .customer-item img:hover,
 .brand-item img:hover {
   transform: scale(1.1);
 }

 /* Initial state */
 .stagger {
   opacity: 0;
   transform: translateY(30px);
   transition: all 0.8s ease;
 }

 /* When visible */
 .stagger.show {
   opacity: 1;
   transform: translateY(0);
 }


 /* Arrow buttons */
 .nav-arrow {
   background: none;
   border: none;
   font-size: 50px;
   font-weight: 800;
   cursor: pointer;
   color: rgb(0, 102, 102);
   transition: transform 0.2s ease, opacity 0.2s ease;
 }

 .nav-arrow:hover {
   transform: scale(1.3);
   opacity: 0.7;
 }

 .nav-arrow.prev {
   margin-right: 10px;
   /* move left arrow slightly left */
 }

 .nav-arrow.next {
   margin-left: 10px;
   /* move right arrow slightly right */
 }

 /* -------------------- About Us Section -------------------- */


 /* -------------------- Contact Us Section -------------------- */
 /* Contact Section */
 .contact-section {
   padding: 50px 10px;
 }

 .contact-info h1 {
   font-size: 2.5rem;
   margin-bottom: 10px;
   color: rgb(0, 102, 102);
   font-weight: bold;
 }

 /* Layout container */
 .contact-container {
   max-width: 1440px;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 40px;
   margin-bottom: 65px;
 }

 /* Map box */
 .map-box {
   flex: 1;
   min-width: 350px;
   height: 400px;
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }

 /* Make iframe fill the box */
 .map-box iframe {
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
 }

 /* Contact info section */
 .contact-info {
   flex: 1;
   min-width: 300px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 15px;
 }

 info-item p {
   text-align: left;
 }

 .vertical-line {
   border-left: 1.5px solid black;
   height: 35px;
 }

 /* Individual info rows */
 .info-item {
   display: flex;
   align-items: center;
   /* vertical alignment */
   gap: 12px;
 }

 .info-item img {
   width: 32px;
   height: 32px;
 }


 .info-item p {
   margin: 0;
   font-size: 1.1rem;
   line-height: 1.3;
   color: #333;
 }

 .contact-form-title {
   font-size: 2.5rem;
 }

 .contact-form {
   max-width: 600px;
   margin: auto;
   display: flex;
   flex-direction: column;
   gap: 15px;
 }

 .contact-form input,
 .contact-form textarea {
   padding: 12px;
   border-radius: 8px;
   border: 1px solid #ccc;
   font-size: 1.1rem;
   resize: none;
 }

 .contact-form textarea {
   min-height: 140px;
 }

 .contact-form button {
   background: rgb(0, 102, 102);
   color: #fff;
   padding: 12px;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   font-size: 1.25rem;
   text-transform: uppercase;
 }


 .success-message {
   display: none;
   background-color: #d4edda;
   color: #155724;
   padding: 15px;
   border-radius: 8px;
   margin-top: 20px;
   text-align: center;
   border: 1px solid #c3e6cb;
 }

 .success-message.show {
   display: block;
   animation: slideDown 0.5s ease-out;
 }

 .error-message {
   display: none;
   background-color: #f8d7da;
   color: #721c24;
   padding: 15px;
   border-radius: 8px;
   margin-top: 20px;
   text-align: center;
   border: 1px solid #f5c6cb;
 }

 .error-message.show {
   display: block;
   animation: slideDown 0.5s ease-out;
 }


 @keyframes slideDown {
   from {
     opacity: 0;
     transform: translateY(-10px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .loading {
   display: none;
   text-align: center;
   margin-top: 10px;
   color: rgb(0, 102, 102);
 }

 .loading.show {
   display: block;
 }


 /* -------------------- Contact Us Section -------------------- */


 /* -------------------- Footer Section -------------------- */
 #footer {
   padding: 40px 20px;
   text-align: center;
   border-top: 1px solid #b9b8b8;
 }

 /* New outer layout */
 .footer-inner {
   max-width: 1440px;
   margin: 0 auto 50px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 15px;
 }

 /* Left company logo */
 .footer-company {
   flex: 0 0 auto;
 }

 .footer-content {
   max-width: 900px;
   margin: 0 0 50px auto;
   /* 👈 push to right */
   display: flex;
   justify-content: flex-end;
   /* 👈 align items right */
   align-items: center;
   gap: 30px;
   /* 👈 reduce gap */
   flex-wrap: wrap;
   font-size: 0.95rem;
 }

 /* Groups ISO and Halal side by side on the same row */
 .footer-certs {
   display: flex;
   flex-direction: row;
   /* side by side */
   align-items: center;
   /* vertically centre logos with text */
   gap: 20px;
 }

 .footer-left,
 .footer-right {
   display: flex;
   flex-direction: column;
   /* stack logo above text */
   align-items: center;
   text-align: center;
 }

 .footer-logo {
   height: 70px;
   margin: 10px auto;
 }

 .member {
   margin-top: 10px;
   font-weight: 600;
   font-size: 0.95rem;
 }

 .footer-social {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   margin-bottom: 40px;
 }

 .follow-text {
   margin: 0;
   font-weight: 600;
   font-size: 0.95rem;
 }

 /* ROW container */
 .social-row {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   /* wraps on small screens */
   justify-content: center;
 }

 .social-link {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 14px;
   border-radius: 30px;
   text-decoration: none;
   color: #000;
   background: #ffffff;
   transition: all 0.25s ease;
 }

 .social-link img {
   width: 26px;
   height: 26px;
 }

 .social-link span {
   font-weight: 600;
   font-size: 0.95rem;
 }

 /* Hover effect */
 .social-link:hover {
   background: #000;
   color: #fff;
   transform: translateY(-2px);
 }

 .footer-attribution {
   margin: 15px 0 5px 0;
   text-align: center;
   margin-bottom: 40px;
 }

 .footer-attribution a {
   text-decoration: underline;
 }

 .footer-attribution a:hover {
   color: #000;
 }


 /* -------------------- Footer Section -------------------- */


 /* -------------------- Back to top button -------------------- */
 #backToTop {
   position: fixed;
   bottom: 30px;
   right: 30px;
   padding: 12px 16px;
   font-size: 20px;
   border: none;
   background-color: rgb(0, 102, 102);
   color: white;
   border-radius: 50%;
   cursor: pointer;
   display: none;
   /* hidden by default */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   transition: opacity 0.3s ease;
 }

 #backToTop:hover {
   background-color: #555;
 }

 /* -------------------- Back to top button -------------------- */


 /* -------------------- Services Section -------------------- */
 .services-section {
   padding: 50px 10px;
   text-align: center;
 }

 .services-section h1 {
   color: rgb(0, 102, 102);
   font-size: 2.5rem;
   margin-bottom: 50px;
 }

 /* Equipment Grid */
 .equipment-grid {
   max-width: 1440px;
   margin: 0 auto 60px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 30px;
 }

 /* Equipment Card */
 .equipment-card {
   background-color: #ffffff;
   padding-bottom: 30px;
   border-radius: 14px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
   transition: all 0.35s ease;
   border: 1px solid #c6c4c4;
 }

 .equipment-card img {
   max-width: 100%;
   height: 250px;
   object-fit: cover;
   margin-bottom: 15px;
   border-radius: 15px;
 }

 .equipment-card h3 {
   color: #333;
 }

 .equipment-card h4 {
   font-weight: normal;
 }

 .equipment-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 15px 35px rgba(0, 102, 102, 0.35);
 }

 /* Button */
 .btn-detail {
   margin-top: 15px;
   padding: 10px 20px;
   background-color: rgb(0, 102, 102);
   color: white;
   border: none;
   border-radius: 20px;
   cursor: pointer;
   font-size: 0.95rem;
 }

 .btn-detail:hover {
   opacity: 0.9;
 }

 /* Dishwasher Details */
 .dishwasher-details {
   max-width: 1440px;
   margin: 0 auto;
   display: none;
 }

 .dishwasher-details h2 {
   color: rgb(0, 102, 102);
   margin-bottom: 30px;
 }

 .dishwasher-types {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   /* always 2 per row */
   gap: 40px;
 }

 .dishwasher-card {
   background: white;
   padding: 30px;
   border-radius: 16px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
   transition: transform 0.3s ease;
 }

 .dishwasher-card:hover {
   transform: translateY(-8px);
 }

 .dishwasher-card img {
   width: 100%;
   height: 200px;
   object-fit: contain;
   margin-bottom: 20px;
 }

 .dishwasher-card h3 {
   color: rgb(0, 102, 102);
   margin-bottom: 20px;
   text-align: center;
 }


 .feature-benefit-table {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   gap: 20px;
   margin-top: 20px;
   align-items: start;
 }

 .fb-column h4 {
   font-size: 0.95rem;
   margin-bottom: 10px;
   color: rgb(0, 102, 102);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

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

 .fb-column li {
   font-size: 0.95rem;
   color: #444;
   padding: 6px 0;
   border-bottom: 1px dashed #ddd;
 }

 .fb-divider {
   width: 1px;
   background-color: #ddd;
 }


 /* OEM / ODM Section */
 .services-section.oem-odm {
   padding: 50px 10px;
   background-color: #ffffff;
   text-align: center;
 }

 .services-section.household {
   padding: 50px 10px;
   background-color: #ffffff;
   text-align: center;
 }


 .household-container {
   max-width: 1440px;
   margin: 0 auto;
   display: flex;
   align-items: flex-start;
   /* 🔑 force same top row */
   gap: 30px;
   flex-wrap: wrap;
 }

 .services-section.oem-odm h1 {
   font-size: 2.5rem;
   margin-bottom: 50px;
   color: rgb(0, 102, 102);
 }

 /* Two-column layout */
 .oem-container {
   max-width: 1100px;
   margin: 0 auto;
   /* margin-bottom: 20px; */
   display: flex;
   align-items: center;
   gap: 60px;
   flex-wrap: wrap;
 }

 /* Image */
 .oem-image img {
   width: 100%;
   max-width: 430px;
   height: auto;
   border-radius: 12px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
 }

 /* Text */
 .oem-text {
   flex: 1;
   min-width: 280px;
   font-size: 1.1rem;
   color: #333;
   line-height: 1.6;
   text-align: justify;
 }

 .household-section {
   padding: 50px 0;
   margin: 0 auto;
   max-width: 1440px;
 }

 .household-container2 {

   padding: 0 10px;

   display: flex;
   flex-direction: column;
   margin-bottom: 50px;
 }

 .household-container3 {
   max-width: 100%;
   /* Full width */
   width: 100%;
   margin: 0;
   padding: 0;
 }

 /* First Row: Image Left (2/3), Text Right (1/3) */
 .household-row-1 {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 30px;
   align-items: center;
 }

 .household-image2 {
   width: 100%;
   height: 400px;
   overflow: hidden;
   border-radius: 20px;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
 }

 .household-image2 img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
 }

 .household-image2:hover img {
   transform: scale(1.05);
 }

 .household-title h2 {
   font-size: 2.2rem;
   color: rgb(0, 102, 102);
   font-weight: bold;
   line-height: 1.2;
 }

 /* Second Row: Image with Text Overlay */
 .household-row-2 {
   width: 100%;
 }

 .household-image-text {
   position: relative;
   width: 100%;
   height: 500px;
   overflow: hidden;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
 }

 .household-image-text img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .household-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 50%;
   /* Text on left half */
   height: 100%;
   padding: 50px 40px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: black;
 }

 .household-overlay h3 {
   font-size: 2.2rem;
   margin-bottom: 10px;
   font-weight: bold;
   color: rgb(0, 102, 102);
 }


 .household-overlay p {
   font-size: 1.1rem;
   line-height: 1.6;
   text-align: justify;
 }

 /*** End with new household section ****/

 .household-image img {
   width: 100%;
   max-width: 420px;
   height: auto;
   border-radius: 12px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
   margin-top: 10px;
 }

 .household-text {
   flex: 1;
   min-width: 280px;
   font-size: 1.1rem;
   color: #333;
   line-height: 1.4;
   text-align: justify;
 }

 .household-text h3,
 .packaging-title {
   font-size: 2.2rem;
   margin-left: 10px;
   margin-bottom: 20px;
   padding-left: 15px;
   color: rgb(0, 102, 102);
   text-align: left;
   position: relative;
 }

 .household-text h3::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 4px;
   background-color: rgb(0, 102, 102);
 }

 .household-box {
   background-color: rgb(0, 102, 102);
   width: 700px;
   padding: 10px;
   margin: 10px;
   color: white;
   border-radius: 8px;
 }

 .household-point {
   margin-left: 55px;
   max-width: 620px;
 }

 .packaging-title::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 4px;
   background-color: rgb(0, 102, 102);
 }


 /* -------------------- Services Section -------------------- */


 /* -------------------- Products Section -------------------- */
 .products-section {
   padding: 50px 10px;
   text-align: center;
 }

 .products-section h1 {
   font-size: 2.5rem;
   color: rgb(0, 102, 102);
   margin-bottom: 50px;
 }

 .products-grid {
   max-width: 1440px;
   margin: auto;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
 }

 .product-card {
   padding-bottom: 20px;
   border-radius: 12px;
   background: #ffffff;
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   transition: 0.3s ease;
   border: 1px solid #c6c4c4;
 }

 .product-card img {
   max-width: 100%;
   height: 250px;
   object-fit: cover;
   margin-bottom: 15px;
   border-radius: 15px;
 }

 .product-card h3 {
   font-size: 1.2rem;
   color: #333;
 }

 .product-card:hover {
   transform: translateY(-8px);
 }

 .product-thumb {
   width: 60px;
   height: 60px;
   object-fit: contain;
   border-radius: 8px;
   border: 1px solid #ddd;
   background: #fff;
 }

 .no-image {
   width: 60px;
   height: 60px;
   border-radius: 8px;
   background: #f2f2f2;
   color: #999;
   font-size: 0.95rem;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px dashed #ccc;
   padding: 5px;
   text-align: center;
 }

 /* Overlay */
 .modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.6);
   display: none;
   justify-content: center;
   align-items: flex-start;
   /* top-aligned so header is visible */
   z-index: 999;
   padding-top: 30px;
   padding-bottom: 20px;
   overflow-y: auto;
   /* allows internal scroll if modal exceeds viewport */
   /* margin-top: 80px; */
 }

 /* Modal box */
 .modal-box {
   background: white;
   width: 90%;
   max-width: 900px;
   max-height: 70vh;
   /* 👈 limit height */
   border-radius: 12px;
   animation: scaleIn 0.3s ease;
   display: flex;
   flex-direction: column;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
 }

 /* Header stays fixed */
 .modal-header {
   padding: 20px;
   border-bottom: 1px solid #ddd;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 /* Body scrolls */
 .modal-body {
   padding: 20px;
   overflow-y: auto;
   /* 👈 scroll inside */
   flex: 1;
 }

 /* Close button */
 .modal-close {
   font-size: 28px;
   cursor: pointer;
 }

 /* Table wrapper for mobile scroll */
 .modal-table-wrapper {
   overflow-x: auto;
 }


 /* Reuse your table style */
 .product-table {
   width: 100%;
   border-collapse: collapse;
 }

 .product-table th,
 .product-table td {
   padding: 12px;
   border-bottom: 1px solid #ddd;
   font-size: 0.95rem;
 }

 .product-table th {
   background: #f0f6f6;
 }

 /* Animation */
 @keyframes scaleIn {
   from {
     opacity: 0;
     transform: scale(0.9);
   }

   to {
     opacity: 1;
     transform: scale(1);
   }
 }

 .pack-size {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
 }

 .pack {
   font-size: 0.95rem;
   padding: 4px 8px;
   border-radius: 20px;
   white-space: nowrap;
 }

 .pack.available {
   background-color: #e7f6f3;
   color: rgb(0, 102, 102);
 }

 .pack.unavailable {
   background-color: #f5f5f5;
   color: #999;
 }

 .tick {
   text-align: center;
 }

 .description {
   text-align: justify;
 }


 /* -------------------- Products Section -------------------- */