/* -------------------- Navigation bar -------------------- */
/* Hamburger button */
.menu-toggle {
	display: none;
	font-size: 32px;
	cursor: pointer;
	color: rgb(0, 102, 102);
}

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

	nav {
		flex-wrap: wrap;
	}

	.menu-toggle {
		display: block;
	}

	.nav-links {
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		display: none;
		/* hidden by default */
		background-color: white;
		padding: 10px 0;
	}

	.nav-links a,
	.dropbtn {
		width: 100%;
		padding: 14px 20px;
		font-size: 16px;
		display: block;
		text-decoration: none;
		color: #333;
		transition: background-color 0.3s ease;
	}

	.nav-links a:hover,
	.dropbtn:hover {
		background-color: #f0f0f0;
	}


	/* Dropdown */
	.dropdown {
		width: 100%;
	}

	/* Make dropdown button clickable with arrow indicator */
	.dropbtn {
		position: relative;
		cursor: pointer;
	}

	/* Rotate arrow when open */
	.dropdown.open .dropbtn::after {
		content: ' ▴';
	}

	.dropdown:not(.open) .dropbtn::after {
		content: ' ▾';
	}


	.dropdown-content {
		position: static;
		box-shadow: none;
		border-radius: 0;
		min-width: 100%;
		display: none !important;
		/* Force hide by default */
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	/* Indent submenu items */
	.dropdown-content a {
		padding: 12px 20px 12px 40px;
		/* Indent left by 40px */
		font-size: 15px;
		margin-left: 20px;
	}

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

	/* Show dropdown when parent has .open */
	.dropdown.open .dropdown-content {
		display: block !important;
		/* Force show when open */
	}

	/* Show nav when toggled */
	.nav-links.active {
		display: flex;
	}
}

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


/* -------------------- Banner Section -------------------- */
@media (max-width: 1024px) {

	.banner-container {
		min-height: 95vh;
		margin: clamp(12px, 3vw, 15px);
		border-radius: 12px;
		background-image: url("../images/HeaderImage_Mobile.png");
		background-position: 50% 2%;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.banner-text {
		top: 6%;
		left: 6%;
		/* max-width: min(550px, 85%); */
	}

	.banner-text h1 {
		font-size: clamp(2rem, 4vw, 2.5rem);
		text-align: justify;
		width: 85%;
	}

	.banner-text h3 {
		font-size: clamp(1.3rem, 2.5vw, 1.5rem);
		width: 85%;
		text-align: justify;
		line-height: 1.3;
	}

	.banner-desc {
		font-size: clamp(1rem, 1.8vw, 1.1rem);
		width: 85%;
		text-align: justify;
	}

	.btn-banner {
		padding: clamp(12px, 1.5vw, 14px) clamp(22px, 2.5vw, 26px);
		font-size: clamp(1rem, 1.8vw, 1.1rem);
	}
}

@media (max-width: 768px) {

	.banner-text {
		top: 8%;
		/* push down slightly */
		left: 6%;
		/* smaller left padding */
		/* width: 90%; */
		/* fit tablet width */
		width: 90%;
	}

	.banner-text h1 {
		font-size: clamp(1.8rem, 4.5vw, 2.5rem);
		width: 90%;
		text-align: justify;
	}

	.banner-text h3 {
		font-size: clamp(1.2rem, 2.8vw, 1.4rem);
		/* width: clamp(90%, 15vw, 85%); */
		width: 90%;
		text-align: justify;
	}

	.banner-desc {
		font-size: clamp(0.95rem, 2vw, 1.05rem);
		/* smaller paragraph */
		line-height: 1.6;
		width: 90%;
		text-align: justify;
	}

	.btn-banner {
		width: auto;
		/* min-width: 140px;
		max-width: 160px; */
		font-size: clamp(1rem, 2vw, 1.1rem);
		padding: clamp(10px, 1.5vw, 12px) clamp(18px, 2vw, 22px);
	}
}

@media (max-width: 480px) {

	.banner-container {
		height: 85vh;
		margin: clamp(12px, 3vw, 15px);
		border-radius: 12px;
		/* background-image: url("../images/HeaderImage_Mobile.png"); */
		background-position: 50% 28%;
		background-repeat: no-repeat;
		background-size: 285%;
		/* background-size: cover */
	}

	.banner-text {
		position: static;
		/* position: static; */
		/* Remove any positioning */
		padding-top: 8%;
		/* Use padding instead of top */
		padding-left: 5%;
		padding-right: 5%;
		width: 96%;
	}

	.banner-text h1 {
		font-size: clamp(1.4rem, 5vw, 1.6rem);
		text-align: justify;
		width: 96%;
	}

	.banner-text h3 {
		font-size: clamp(0.95rem, 3.5vw, 1.05rem);
		width: 96%;
		text-align: justify;
	}

	.banner-desc {
		width: 96%;
		font-size: clamp(0.85rem, 2.5vw, 0.90rem);
		line-height: 1.5;
	}

	.btn-banner {
		position: absolute !important;
		/* Force absolute positioning */
		bottom: clamp(25px, 5vh, 30px) !important;
		/* 20px from the bottom of banner-container */
		left: 50% !important;
		transform: translateX(-50%) !important;
		font-size: clamp(1rem, 3vw, 1.1rem);
		padding: clamp(10px, 2vw, 12px) clamp(20px, 4vw, 25px);
		text-align: center;
		white-space: nowrap;
		/* prevents button text from wrapping */
	}
}

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


/* -------------------- About Us Section -------------------- */
@media (max-width: 1024px) {

	/* ===== About Us ===== */
	.about-content h1,
	.history-page h1,
	.company-values h2,
	.core-title,
	.customers-section h1,
	.brands-section h1,
	.services-section.oem-odm h1 {
		font-size: 2.2rem;
	}

	.about-text h3 {
		font-size: 1.4rem;
	}

	.about-text h4 {
		font-size: 1.3rem;
	}

	.about-text p {
		font-size: 1.1rem;
	}

	.about-bottom {
		font-size: 1.4rem;
	}

	.box h3 {
		font-size: 1.4rem;
	}

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

	/* .vm-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
	} */

	/*.vm-box p,
	.vm-box-2 p,
	.core-list {
		font-size: 1.1rem;
	}*/

	/* ===== Brands, Customers ===== */
	.customers-window,
	.brands-window {
		width: 100%;
	}

	.customer-item,
	.brand-item {
		min-width: 180px;
		margin: 0 10px;
	}

	.nav-arrow {
		font-size: 40px;
	}
}


@media (max-width: 768px) {

	/* ===== About Us ===== */
	.about-grid {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.about-content h1 {
		font-size: 2rem;
	}

	.about-text {
		padding: 25px;
	}

	/* Box 2 (first image) - order: 1 */
	.about-box.about-image:nth-child(2) {
		order: 1;
	}

	/* Box 1 (KSSB text) - order: 2 */
	.about-box.about-text:nth-child(1) {
		order: 2;
	}

	/* Box 3 (second image) - order: 3 */
	.about-box.about-image:nth-child(3) {
		order: 3;
	}

	/* Box 4 (KSMSB text) - order: 4 */
	.about-box.about-text:nth-child(4) {
		order: 4;
	}

	/* ===== Timeline ===== */
	.history-page {
		padding: 30px 10px;
	}

	.history-page h1 {
		font-size: 2rem;
		margin-bottom: 50px;
	}

	.box h3 {
		font-size: 1.5rem;
	}

	.box p {
		font-size: 1.05rem;
	}

	/* ===== Vision mission ===== */
	.company-values h2 {
		font-size: 2rem;
		margin-bottom: 30px;
	}

	.vm-row {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.vm-row-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* First 4 boxes each take 1 column (2x2 grid) */
	.vm-box-2:nth-child(-n+4) {
		grid-column: span 1 !important;
	}

	/* Last box (5th) spans both columns */
	.vm-box-2:nth-child(5) {
		grid-column: span 2 !important;
	}

	.vm-icon {
		margin-bottom: 15px;
	}

	.vm-box,
	.vm-box-2 {
		padding: 25px 20px;
	}

	.vm-box h3,
	.vm-box-2 h3 {
		font-size: 1.5rem;
	}

	.vm-box p,
	.vm-box-2 p,
	.core-list li {
		font-size: 1.05rem;
	}

	.core-list {
		list-style-position: inside;
		/* bullets move with text */
		padding: 0;
		/* remove default left padding */
		margin: 0 auto;
		/* center the ul itself */
		text-align: center;
		/* center text + bullets */
	}



	/* ===== Customers ===== */
	.customers-section h1,
	.brands-section h1 {
		font-size: 2rem;
	}

	/* Switch to horizontal scroll */
	.customers-slider,
	.brands-slider {
		gap: 0;
		flex-direction: column;
	}

	.customers-window,
	.brands-window {
		overflow-x: auto;
		overflow-y: hidden;
		width: 100%;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		scrollbar-width: none;
		/* Hide scrollbar Firefox */
		-ms-overflow-style: none;
		/* Hide scrollbar IE/Edge */
	}

	/* Hide scrollbar for Chrome, Safari and Opera */
	.customers-window::-webkit-scrollbar,
	.brands-window::-webkit-scrollbar {
		display: none;
	}

	.customers-track,
	.brands-track {
		transition: none;
		/* Remove transform transition for scroll */
	}

	.customer-item,
	.brands-item {
		min-width: 160px;
		padding: 20px;
		flex-shrink: 0;
	}

	.nav-arrow {
		display: none;
		/* Hide arrows on tablet/mobile */
	}

	.customers-section p {
		font-size: 1.05rem;
	}
}

@media (max-width: 480px) {


	.history-page,
	.brands-section,
	.customers-section {
		padding: 30px 10px;
	}

	h1 {
		font-size: 1.6rem !important;
	}

	.about-grid {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.about-content h1 {
		font-size: 1.6rem;
		margin-bottom: 25px;
	}

	.about-text {
		padding: 20px;
	}

	.about-text h3 {
		font-size: 1.2rem;
	}

	.about-text h4 {
		font-size: 1rem;
	}

	.about-text p {
		font-size: 0.9rem;
		line-height: 1.5;
	}

	.about-bottom {
		font-size: 1.2rem;
	}

	.timeline {
		display: flex;
		flex-direction: column;
		gap: 25px;
		position: relative;
		padding-left: 35px;
		max-width: 100%;
	}

	/* Remove the continuous vertical line */
	.timeline::before {
		display: none;
	}

	.box {
		background: transparent;
		border: none;
		box-shadow: none;
		padding: 0;
		margin-bottom: 0;
		border-radius: 0;
		position: relative;
	}

	/* Individual vertical line for each box */
	.box::before {
		content: '';
		position: absolute;
		left: -23px;
		top: 0;
		bottom: 0;
		width: 2px;
		background: rgb(0, 102, 102);
	}


	/* Year styling */
	.box h3 {
		font-size: 1.3rem;
		font-weight: bold;
		color: rgb(0, 102, 102);
		text-align: left;
		margin-bottom: 8px;
		line-height: 1.1;
	}

	/* Description styling */
	.box p {
		font-size: 0.90rem;
		line-height: 1.5;
		color: #333;
		text-align: left;
		padding-left: 5px;
		padding-bottom: 5px;
	}

	.box:nth-child(1),
	.box:nth-child(4) {
		border-left: none;
	}

	/* Reorder boxes chronologically */
	.box:nth-child(1) {
		order: 1;
	}

	/* 1989 */
	.box:nth-child(4) {
		order: 2;
	}

	/* 1996 */
	.box:nth-child(2) {
		order: 3;
	}

	/* 1997 */
	.box:nth-child(5) {
		order: 4;
	}

	/* 1999 */
	.box:nth-child(3) {
		order: 5;
	}

	/* 2025 */

	/* Vision mission */
	.company-values h2 {
		font-size: 1.6rem;
	}

	.company-values p {
		margin-bottom: 30px;
		font-size: 0.90rem;
		text-align: center;
	}

	.vm-row-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.vm-box-2:nth-child(-n+4) {
		grid-column: span 1 !important;
	}

	.vm-box-2:nth-child(5) {
		grid-column: span 2 !important;
	}

	.vm-icon {
		width: 80px;
		height: 80px;
	}

	.vm-box,
	.vm-box-2 {
		padding: 22px 18px;
		border-radius: 12px;
	}

	.vm-box h3,
	.vm-box-2 h3 {
		font-size: 1.1rem;
	}

	.vm-box p,
	.vm-box-2 p,
	.core-list li {
		font-size: 0.90rem;
		line-height: 1.5;
		text-align: center;
	}



	.customers-section p {
		font-size: 0.90rem;
	}

	.customers-section,
	.brands-section {
		padding: 30px 10px;
	}

	.customers-section h1,
	.brands-section h1 {
		font-size: 1.6rem;
	}

	.customer-item,
	.brand-item {
		min-width: 140px;
		padding: 15px;
	}

	.customer-item img,
	.brand-item img {
		max-height: 60px;
	}

	.nav-arrow {
		display: none;
		/* swipe-only on small screens */
	}
}

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


/* -------------------- Contact Us Section -------------------- */
@media (max-width: 1024px) {

	.contact-section {
		padding: 30px 10px;
	}

	.contact-section h1 {
		font-size: 2.2rem;
		text-align: center;
	}

	.contact-container {
		gap: 30px;
	}

	.map-box {
		min-width: 100%;
		height: 350px;
	}

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

	.contact-info {
		min-width: 100%;
		align-items: center;
	}

	.info-item {
		justify-content: center;
	}
}

@media (max-width: 768px) {

	.contact-section h1 {
		font-size: 2rem;
		margin-bottom: 30px;
		text-align: center;
	}

	.map-box {
		height: 300px;
		border-radius: 8px;
	}

	.contact-info {
		gap: 20px;
		font-size: 1.05rem;
	}

	.info-item {
		align-items: center;
	}

	.info-item p {
		font-size: 1.05rem;
		line-height: 1.6;
		text-align: left;
	}

	.contact-form input,
	.contact-form textarea {
		font-size: 1.05rem;
	}

	.contact-form button {
		font-size: 1.1rem;
	}
}

@media (max-width: 480px) {

	.contact-section {
		padding: 30px 10px;
	}

	.contact-info h1 {
		font-size: 1.6rem;
		text-align: center;
		width: 100%;
	}

	.contact-info {
		align-items: flex-start;
		gap: 10px;
	}

	.info-item {
		flex-wrap: nowrap;
		gap: 6px;
		/* 👈 left align row content */
	}

	.vertical-line {
		height: 30px;
	}

	.info-item p {
		text-align: left;
		overflow-wrap: anywhere;
		/* allow email to break if needed */
		word-break: break-word;
		min-width: 0;
		/* IMPORTANT for flex items */
	}

	.info-item img {
		width: 28px;
		height: 28px;
		flex-shrink: 0;
	}


	.map-box {
		height: 260px;
	}

	.info-item p {
		font-size: 0.85rem;
	}


	.contact-form input,
	.contact-form textarea {
		font-size: 0.90rem;
	}

	.contact-form button {
		font-size: 1.1rem;

	}
}

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


/* -------------------- Footer Section -------------------- */
@media (max-width: 1024px) {

	#footer {
		padding: 35px 20px;
		font-size: 1.1rem;
	}

	.footer-content {
		gap: 50px;
	}

	.member,
	.footer-attribution {
		font-size: 1.1rem;
	}
}

@media (max-width: 768px) {

	.footer-content {
		flex-direction: column;
		gap: 30px;
	}

	.member {
		font-size: 1.05rem;
		line-height: 1.5;
	}

	#footer p,
	.footer-social,
	.footer-attribution {
		font-size: 1.05rem;
	}

}

@media (max-width: 480px) {

	#footer {
		padding: 30px 15px;
	}

	.member,
	.social-link span,
	#footer p,
	.footer-attribution {
		font-size: 0.90rem;
	}

	.footer-inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 15px;
	}

	/* Company logo at top, centered - takes full width */
	.footer-company {
		flex-basis: 100%;
		order: -1;
		display: flex;
		justify-content: center;
		margin-bottom: 10px;
	}

	.footer-company .footer-logo {
		max-width: 160px;
		height: auto;
	}

	/* Empty content - hide it */
	.footer-content {
		display: none;
	}

	/* Other 3 items in a row - each takes 1/3 of width */
	.footer-left {
		order: 2;
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 6px;
	}

	.footer-certs {
		order: 2;
		/* same row as .footer-left */
		flex: 2;
		/* takes up 2/3 of remaining space */
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
		gap: 0;
	}

	.footer-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 6px;
	}

	/* Shrink logos to fit 3-column row */
	.footer-left .footer-logo,
	.footer-right .footer-logo {
		height: 50px;
		width: auto;
		margin: 0 auto;
	}

	.member {
		font-size: 0.7rem;
		text-align: center;
	}

	#footer p {
		text-align: center;
		margin-top: 15px;
		width: 100%;
	}

}

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


/* -------------------- Back to top button -------------------- */
@media (max-width: 1024px) {

	#backToTop {
		bottom: 25px;
		right: 25px;
		padding: 10px 14px;
		font-size: 18px;
	}

	#backToTop i {
		font-size: 30px !important;
	}
}

@media (max-width: 768px) {

	#backToTop {
		bottom: 20px;
		right: 20px;
		padding: 10px 12px;
		font-size: 16px;
	}

	#backToTop i {
		font-size: 26px !important;
	}
}

@media (max-width: 480px) {

	#backToTop {
		bottom: 15px;
		right: 15px;
		padding: 8px 10px;
	}

	#backToTop i {
		font-size: 22px !important;
	}
}

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


/* -------------------- Services Section -------------------- */
@media (max-width: 1024px) {

	.household-section {
		padding: 30px 0;
	}

	.household-container2 {
		margin-bottom: 40px;
	}

	.household-row-1 {
		gap: 25px;
	}

	.household-image2 {
		height: 350px;
	}

	.household-title h2 {
		font-size: 2.2rem;
		padding-left: 10px;
	}

	.household-image-text {
		height: 450px;
	}

	.household-overlay {
		width: 55%;
		padding: 40px 30px;
	}

	.household-overlay h3 {
		font-size: 2.2rem;
	}

	.household-overlay p {
		font-size: 1.1rem;
	}

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


	.household-container {
		gap: 20px;
		padding: 0 10px;
	}

	.household-text h3,
	.packaging-title {
		font-size: 1.7rem;
		margin-left: 2px;
	}

	.household-box {
		width: 100%;
		max-width: 500px;
		margin: 10px 0;
		font-size: 1.2rem;
	}

	.household-point {
		margin-left: 30px;
		max-width: 450px;
	}

	.household-image img {
		max-width: 380px;
		/* height: 470px; */
	}

	/* Section spacing */
	.services-section {
		padding: 30px 10px;
	}

	.services-section h1 {
		font-size: 2.2rem;
		margin-bottom: 40px;
	}

	/* Equipment grid */
	.equipment-grid {
		gap: 30px;
	}

	.equipment-card {
		padding-bottom: 25px;
	}

	.equipment-card img {
		height: 200px;
	}

	/* Dishwasher details */
	.dishwasher-types {
		grid-template-columns: 1fr;
		/* 1 per row */
	}

	.dishwasher-card {
		padding: 25px;
	}

	.dishwasher-card img {
		height: 180px;
	}

	/* Feature / Benefit table */
	.feature-benefit-table {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.fb-divider {
		display: none;
	}

	.fb-column li {
		font-size: 1rem;
	}

	.fb-column h4 {
		text-align: left;
		font-size: 1rem;
	}

	/* OEM / ODM */
	.oem-container {
		gap: 40px;
	}

	.oem-text {
		font-size: 1.1rem;
		text-align: justify;
	}
}

@media (max-width: 768px) {

	.household-section {
		padding: 35px 0;
	}

	.household-container2 {
		margin-bottom: 35px;
	}

	.household-row-1 {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.household-image2 {
		height: 300px;
	}

	.household-title {
		order: -1;
		text-align: center;
	}

	.household-title h2 {
		font-size: 2rem;
	}

	.household-image-text {
		height: 400px;
	}

	.household-overlay {
		width: 60%;
		padding: 35px 25px;
	}

	.household-overlay h3 {
		font-size: 2rem;
	}

	.household-overlay p {
		font-size: 1rem;
		text-align: justify;
	}

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


	.household-container {
		flex-direction: column;
		gap: 30px;
		text-align: left;
	}

	.household-text {
		width: 100%;
		font-size: 1.05rem;
	}

	.household-text h3 {
		font-size: 2rem;
		margin-left: 5px;
	}

	.packaging-title {
		font-size: 2rem;
		margin-bottom: 15px;
		padding-left: 15px;
		position: relative;
		align-self: flex-start;
		/* optional: align line to left */
	}

	.household-box {
		width: 100%;
		max-width: 100%;
		margin: 10px 0;
		padding: 12px;
		font-size: 1.2rem;
	}

	.household-point {
		margin-left: 30px;
		padding-right: 10px;
		max-width: 610px;
	}

	.household-image {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		/* 🔑 stack heading + image */
		align-items: center;
		/* center content */
		text-align: center;
		/* center text */
		margin-top: 20px;
	}

	.household-image img {
		max-width: 100%;
		width: 100%;
	}

	.services-section.oem-odm h1 {
		font-size: 2rem;
	}

	.services-section h1 {
		font-size: 2rem;
	}

	/* Equipment */
	.equipment-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
	}

	.equipment-card img {
		height: 240px;
	}

	.equipment-card h3 {
		font-size: 1.2rem;
	}

	/* Dishwasher cards */
	.dishwasher-card {
		padding: 20px;
	}

	.dishwasher-card h3 {
		font-size: 1.05rem;
	}

	.dishwasher-card img {
		height: 160px;
	}

	.fb-column li {
		font-size: 1rem;
	}

	/* Buttons */
	.btn-detail {
		width: 100%;
		padding: 12px;
		font-size: 1.05rem;
	}

	/* OEM / ODM */
	.oem-container {
		flex-direction: column;
		text-align: center;
	}

	.oem-text {
		font-size: 1.05rem;
		text-align: justify;
	}
}

@media (max-width: 480px) {

	.product-categories h2 {
		font-size: 1.6rem;
	}

	.household-section {
		padding: 30px 0;
	}

	.household-container2 {
		margin-bottom: 30px;
		padding: 0 15px;
	}

	/* Title centered at top */
	.household-row-1 {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.household-title {
		order: -1;
		/* Move title above image */
		text-align: center;
	}

	.household-title h2 {
		font-size: 1.6rem;
	}

	.household-image2 {
		height: 250px;
		border-radius: 12px;
	}

	/* Full-width image with text overlay on left */
	.household-container3 {
		padding: 0;
	}

	.household-image-text {
		height: 400px;
		border-radius: 0;
		box-shadow: none;
	}

	.household-image-text img {
		object-position: 70% center;
		filter: blur(2px);
		/* Shift image to the right */
		/* Alternative values:
		   object-position: 70% center; - more to the right
		   object-position: 50% center; - centered (default)
		   object-position: 40% center; - less to the right
		*/
	}

	.household-overlay {
		width: 80%;
		/* Slightly right of left edge */
		left: 5%;
		/* Offset from left */
		padding: 15px 10px;
		justify-content: flex-start;
		/* Round right side only */
		top: 10%;
	}

	.household-overlay h3 {
		font-size: 1.6rem;
		margin-bottom: 8px;
	}

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

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

	.btn-banner {
		font-size: 0.90rem;
	}

	.household-container {
		gap: 20px;
		padding: 0 10px;
	}

	.household-text {
		font-size: 0.95rem;
		min-width: 100%;
	}

	.household-text h3,
	.packaging-title {
		font-size: 1.3rem;
		margin-left: 0;
		margin-bottom: 15px;
	}

	.household-box {
		width: 100%;
		padding: 10px 12px;
		margin: 8px 0;
		font-size: 1.05rem;
	}

	.household-point {
		margin-left: 20px;
		padding-right: 5px;
		font-size: 0.9rem;
	}

	.household-point li {
		margin-bottom: 5px;
	}

	.household-image img {
		border-radius: 8px;
	}

	.services-section {
		padding: 30px 10px;
	}

	.services-section h1 {
		font-size: 1.6rem;
	}

	.equipment-card {
		padding-bottom: 18px;
	}

	.equipment-card img {
		height: 140px;
	}

	.equipment-card h3 {
		font-size: 1.05rem;
		padding: 5px;
	}

	.equipment-card h4 {
		padding: 5px;
	}

	.dishwasher-card h3 {
		font-size: 1.05rem;
	}

	.fb-column h4 {
		font-size: 0.90rem;
	}

	.fb-column li {
		font-size: 0.90rem;
	}
}

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


/* -------------------- Products Section -------------------- */
@media (max-width: 1024px) {
	.products-section {
		padding: 30px 10px;
	}

	.products-section h1 {
		font-size: 2.2rem;
		margin-bottom: 40px;
	}

	/* Product grid spacing */
	.products-grid {
		gap: 25px;
	}

	.product-card {
		padding-bottom: 20px;
	}

	.product-card img {
		height: 200px;
	}

	.btn-detail {
		font-size: 1.1rem;
		padding: 8px 16px;
	}

	/* Modal box */
	.modal-box {
		width: 95%;
		max-width: 800px;
		max-height: 75vh;
	}

	.modal-header h2 {
		font-size: 1.5rem;
	}

	.product-table th,
	.product-table td {
		padding: 10px;
		font-size: 1rem;
	}
}

@media (max-width: 768px) {
	.products-section h1 {
		font-size: 2rem;
		margin-bottom: 30px;
	}

	/* Stack product cards vertically */
	.products-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.product-card {
		padding-bottom: 20px;
	}

	.product-card img {
		height: 240px;
	}

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

	.product-thumb,
	.no-image {
		width: 50px;
		height: 50px;
		font-size: 0.90rem;
	}

	.btn-detail {
		width: 40%;
		padding: 10px;
		font-size: 1.1rem;
	}

	/* Modal */
	.modal-box {
		width: 95%;
		max-width: 95%;
		max-height: 80vh;
	}

	.modal-header h2 {
		font-size: 1.2rem;
	}

	.modal-body {
		padding: 15px;
	}

	/* Tables scroll horizontally */
	.modal-table-wrapper {
		overflow-x: auto;
	}

	.product-table th,
	.product-table td {
		font-size: 0.90rem;
		padding: 8px;
	}

	.pack {
		font-size: 0.8rem;
	}
}

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

	.products-section {
		padding: 30px 10px;
	}

	.products-section h1 {
		font-size: 1.6rem;
	}

	.product-card {
		padding-bottom: 15px;
	}

	.product-card img {
		height: 140px;
	}

	.oem-text {
		font-size: 0.90rem;
	}

	.btn-detail {
		font-size: 0.90rem;
		padding: 8px;
		width: 60%;
	}

	.modal-box {
		width: 95%;
		max-height: 85vh;
		padding: 0;
	}

	.modal-header h2 {
		font-size: 1.05rem;
	}

	/* Stack table as cards on mobile */
	.product-table {
		border: none;
	}

	.product-table thead {
		display: none;
	}

	.product-table tbody,
	.product-table tr,
	.product-table td {
		display: block;
		width: 100%;
	}

	.product-table tr {
		margin-bottom: 15px;
		border: 1px solid #ddd;
		border-radius: 8px;
		padding: 15px;
		background: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.product-table td {
		text-align: left;
		padding: 8px 0;
		border: none;
		font-size: 0.90rem;
	}

	.product-table td:before {
		content: attr(data-label);
		font-weight: bold;
		display: block;
		margin-bottom: 5px;
		color: #333;
		font-size: 0.8rem;
		text-transform: uppercase;
	}

	/* Hide the number column on mobile */
	.product-table td:first-child {
		display: none;
	}

	/* Pack size styling for mobile cards */
	.pack-size {
		display: flex;
		flex-direction: column;
		gap: 5px;
		margin-top: 5px;
	}

	.pack {
		font-size: 0.8rem;
		display: inline-block;
	}

	/* Halal certification tick */
	.tick {
		font-size: 1.2rem;
		color: #28a745;
	}

	.no-image {
		font-size: 0.85rem;
	}
}

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