/* Navbar: pill-shaped centered header to match previous design (image 2) */
header.navbar {
	position: absolute;
	left: 0;
	right: 0;
	top: 14px;
	display: flex;
	justify-content: center;
	pointer-events: auto;
}

.navbar-inner {
	width: min(1280px, calc(100% - 40px));
	background: #ffffff;
	border-radius: 42px;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 20px;
	box-shadow: 0 12px 30px rgba(84, 89, 105, 0.06);
	border: 1px solid rgba(120, 95, 85, 0.06);
}

.navbar .logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	margin-right: 8px;
}

.navbar .logo img {
	height: 52px;
	width: auto;
	display: block;
}

.navbar-left {
	display: flex;
	align-items: center;
}

.navbar-left nav ul {
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: center;
}

.navbar-left nav ul li a {
	display: inline-block;
	color: #4b5563;
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 28px;
	font-weight: 600;
	transition: all 180ms ease;
}

.navbar-left nav ul li a:hover {
	color: #2b3740;
}

.navbar-left nav ul li a.active {
	background: #f5e7a8; /* pale yellow */
	color: #5b2b1b;
	box-shadow: 0 8px 22px rgba(140, 98, 210, 0.18);
}

.navbar-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

.navbar-search {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #ffffff;
	border-radius: 28px;
	padding: 6px 8px;
	border: 1px solid #efe1d1;
	box-shadow: 0 6px 18px rgba(120, 85, 60, 0.04);
}

.navbar-search-input {
	border: none;
	outline: none;
	padding: 8px 10px;
	font-size: 0.98rem;
	min-width: 180px;
	color: #333;
	background: transparent;
}

.navbar-search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 6px;
	cursor: pointer;
	color: #a33a3a;
}

.navbar-right .icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	color: #a33a3a;
}

/* make header sit above hero content and avoid overlap issues */
.navbar { z-index: 9999; }

/* Scrolled state: slightly reduced spacing */
.navbar.scrolled .navbar-inner {
	padding: 8px 18px;
	box-shadow: 0 8px 20px rgba(44, 47, 50, 0.08);
}

@media (max-width: 920px) {
	.navbar-inner { width: calc(100% - 28px); padding: 10px 12px; border-radius: 36px; }
	.navbar-left nav ul { gap: 12px; }
	.navbar-search-input { min-width: 120px; }
}

@media (max-width: 480px) {
	.navbar { position: relative; top: 0; }
	.navbar-inner { border-radius: 20px; padding: 8px; }
	.navbar .logo img { height: 40px; }
	.navbar-left { display: none; }
}

/* keep mobile menu/backdrop behavior consistent with responsive.css */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"); .pagination-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 28px 0 8px; } .pagination-bar button { min-width: 40px; height: 40px; padding: 0 12px; border: 1.5px solid #d9d0ce; border-radius: 8px; background: #fff; color: #712219; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s; font-family: inherit; } .pagination-bar button:hover:not(:disabled) { background: #f5eeec; border-color: #712219; box-shadow: 0 2px 8px rgba(113,34,25,0.12); } .pagination-bar button.active { background: linear-gradient(135deg, #712219 0%, #17635b 100%); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(113,34,25,0.25); } .pagination-bar button:disabled { opacity: 0.38; cursor: default; } .pagination-bar .pag-ellipsis { color: #888; font-weight: 700; padding: 0 4px; align-self: flex-end; line-height: 40px; } @media (max-width: 480px) { .pagination-bar button { min-width: 34px; height: 34px; font-size: 0.82rem; padding: 0 8px; } } #backToTopBtn { position: fixed; bottom: 102px; right: 24px; z-index: 9999; width: 52px; height: 52px; border-radius: 50%; background: #fff; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; border: none; outline: none; cursor: pointer; padding: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; box-shadow: 0 4px 18px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transform: translateY(14px) scale(0.85); -webkit-transform: translateY(14px) scale(0.85); transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.25s ease; -webkit-transition: opacity 0.35s ease, -webkit-transform 0.35s ease, box-shadow 0.25s ease; } #backToTopBtn.btt-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); -webkit-transform: translateY(0) scale(1); } #backToTopBtn:hover { box-shadow: 0 8px 28px rgba(113,34,25,0.35); transform: translateY(-3px) scale(1.08); } #backToTopBtn:active { transform: scale(0.93); } #backToTopBtn .btt-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-90deg); border-radius: 50%; } #backToTopBtn .btt-ring-track { fill: none; stroke: #e0e0e0; stroke-width: 3; } #backToTopBtn .btt-ring-fill { fill: none; stroke: url(#bttGrad); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 138; stroke-dashoffset: 138; transition: stroke-dashoffset 0.2s linear; } #backToTopBtn .btt-arrow { position: relative; z-index: 1; color: #712219; display: flex; align-items: center; justify-content: center; pointer-events: none; } @media (max-width: 768px) { #backToTopBtn { bottom: 84px; right: 14px; width: 46px; height: 46px; } #backToTopBtn .btt-ring-fill, #backToTopBtn .btt-ring-track { stroke-width: 2.5; } } #backToTopBtn.btt-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } #backToTopBtn:hover { box-shadow: 0 8px 28px rgba(113, 34, 25, 0.55); transform: translateY(-4px) scale(1.1); } #backToTopBtn:active { transform: scale(0.93); } #backToTopBtn svg { pointer-events: none; } :root { --primary-gradient: linear-gradient(135deg,#712219); --primary-dark: #712219; --primary-light: #712219; --accent-gold: #cfa600; --accent-red: #e74c3c; --white: #ffffff; --off-white: #f8fbfa; --gray-light: #f3f7f6; --gray-medium: #bfd6d2; --gray-dark: #7c7b8a; --text-primary: #222; --text-secondary: #555; --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px; --spacing-lg: 32px; --spacing-xl: 48px; --spacing-2xl: 64px; --spacing-3xl: 80px; --font-primary: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15); --shadow-glow: 0 0 20px rgba(23, 99, 91, 0.3); --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-primary); background: #f8fbfa;\r\n color: var(--text-primary); line-height: 1.6; min-height: 100vh; overflow-x: hidden; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; } .zoom-pill-btn { display: flex; align-items: center; gap: 12px; background: rgba(35, 34, 31, 0.88); color: var(--white); border: none; border-radius: var(--radius-full); padding: 0 32px; height: 48px; font-size: 1.18rem; font-weight: var(--font-weight-semibold); box-shadow: var(--shadow-md); cursor: pointer; transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); letter-spacing: 0.01em; } .zoom-pill-btn:hover { background: rgba(35, 34, 31, 1); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .icon-btn { background: rgba(35, 34, 31, 0.88); border: none; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); cursor: pointer; transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .icon-btn:hover { background: rgba(35, 34, 31, 1); box-shadow: var(--shadow-lg); transform: translateY(-2px) scale(1.05); } .icon-btn svg, .zoom-pill-btn svg { width: 24px; height: 24px; display: block; stroke: var(--white); } .card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); width: 100%; min-width: 0; max-width: 100%; overflow: hidden; position: relative; display: flex; flex-direction: column; transition: transform var(--transition-base), box-shadow var(--transition-base); margin-bottom: 0; will-change: transform; } .card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 135deg, rgba(23, 99, 91, 0.05) 0%, rgba(34, 81, 74, 0.05) 100% ); opacity: 0; transition: opacity var(--transition-base); pointer-events: none; z-index: 1; } .card:hover::before { opacity: 1; } .card-img-wrap { position: relative; width: 100%; height: 220px; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .card-img-wrap img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform var(--transition-slow); will-change: transform; } .card:hover .card-img-wrap img { transform: scale(1.1); } .card-badge.new { position: absolute; top: 16px; left: 16px; background: #17635b; color: #fff; font-size: 1rem; font-weight: 700; padding: 4px 16px; border-radius: 12px; z-index: 2; letter-spacing: 1px; box-shadow: 0 2px 8px #0001; display: flex; align-items: center; justify-content: center; min-width: 60px; min-height: 32px; visibility: visible; } .card-badge.new:empty { display: none !important; visibility: hidden !important; } .card-badge.discount { position: absolute; top: 48px; left: 16px; background: #ffd600; color: #17635b; font-size: 1rem; font-weight: 700; padding: 4px 16px; border-radius: 12px; z-index: 2; letter-spacing: 1px; box-shadow: 0 2px 8px #0001; } .card-icons { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 2; } .card-icon { background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(23, 99, 91, 0.1); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.18s, box-shadow 0.18s; border: 1.5px solid #e0e0e0; } .card-icon:hover { background: #f3f7f6; box-shadow: 0 4px 16px rgba(23, 99, 91, 0.16); } .card-content { padding: 18px 18px 16px 18px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; } .card-content h3 { font-size: 1.1rem; color: #f7b731; font-size: 1rem; margin-bottom: 8px; } .card-badge.discount { top: 48px; left: 16px; background: #17635b; } .stars span { color: #888; font-size: 0.95rem; margin-left: 4px; } .price-row { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 600; } .price { color: #17635b; } .old-price { color: #aaa; text-decoration: line-through; font-size: 1rem; font-weight: 400; } .card-img-title { display: none; } .sidebar-filter { background: #fff; border-radius: 24px; box-shadow: 0 4px 24px #0001; padding: 32px 28px; min-width: 300px; max-width: 340px; display: flex; flex-direction: column; gap: 0; } .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .sidebar-header span { font-size: 2rem; font-weight: 800; color: #22514a; } .sidebar-reset { color: #7c3aed; font-weight: 600; font-size: 1.08rem; text-decoration: none; cursor: pointer; } .sidebar-section { margin-bottom: 24px; } .sidebar-label { font-size: 1.08rem; color: #444; font-weight: 600; margin-bottom: 8px; } .sidebar-range { font-size: 1.08rem; color: #22514a; font-weight: 700; margin-bottom: 8px; } .sidebar-slider { width: 100%; margin-bottom: 10px; accent-color: #7c3aed; } .sidebar-btn-row { display: flex; gap: 12px; margin-bottom: 8px; } .sidebar-apply { background: #7c3aed; color: #fff; border: none; border-radius: 8px; padding: 8px 32px; font-weight: 700; font-size: 1.1rem; cursor: pointer; } .sidebar-reset-btn { background: none; color: #7c3aed; border: none; font-weight: 600; font-size: 1.1rem; cursor: pointer; } .sidebar-divider { border: none; border-top: 1.5px solid #f0f0f0; margin: 18px 0; } .sidebar-checkboxes { display: flex; flex-direction: column; gap: 8px; } .sidebar-checkboxes label { font-size: 1.08rem; color: #444; font-weight: 500; } .sidebar-checkboxes input[type="checkbox"] { margin-right: 8px; accent-color: #7c3aed; } .products-section { flex: 1; } .products-title { font-size: 2.6rem; font-weight: 800; color: #22514a; margin-bottom: 32px; } .card-img-wrap { position: relative; } .card-img-title { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; color: #1a2c2b; font-weight: 700; font-size: 1.13rem; padding: 10px 18px 8px 18px; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; box-shadow: 0 2px 8px #0001; text-align: left; } .card-link a, .card-link a:visited, .card-link a:active, .card-link a:hover, .card-link * a, .card-link * a:visited, .card-link * a:active, .card-link * a:hover { text-decoration: none !important; color: inherit !important; box-shadow: none !important; border-bottom: none !important; outline: none !important; } .card-link a, .card-link a:visited, .card-link a:active, .card-link a:hover { text-decoration: none !important; color: inherit !important; } .card-link * { text-decoration: none !important; } .card-icons { position: absolute; top: 16px; right: 16px; display: flex; gap: 12px; z-index: 2; } .card-icon { background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(23, 99, 91, 0.1); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.18s, box-shadow 0.18s; border: 1.5px solid #e0e0e0; } .card-icon:hover { background: #f3f7f6; box-shadow: 0 4px 16px rgba(23, 99, 91, 0.16); } .card-icon.view svg { display: block; width: 14px; height: 14px; width: 18px !important; height: 18px !important; } .card-icon.wishlist svg { display: block; width: 14px; height: 14px; width: 18px !important; height: 18px !important; } .products-btn { background: transparent; color: #22514a; border: 3px solid transparent; border-radius: 12px; font-weight: 600; font-size: 1.15rem; padding: 6px 32px; box-shadow: none; position: relative; z-index: 2; transition: background 0.18s, color 0.18s, border 0.18s; } .products-btn:focus, .products-btn:hover { background: #f3f7f6; border-color: #17635b; color: #17635b; } .products-active > .products-btn { background: transparent; color: #22514a; border: 3px solid #22514a; box-shadow: none; } .navbar-right .icon { display: inline-flex; align-items: center; justify-content: center; position: relative; margin-left: 18px; font-size: 1.3rem; cursor: pointer; } .navbar-right .icon.heart { position: relative; } .navbar-right .icon.heart .badge { display: none; background: #e74c3c; color: #fff; border-radius: 50%; font-size: 0.8rem; padding: 2px 7px; position: absolute; top: -10px; right: -12px; font-weight: 700; box-shadow: 0 2px 8px rgba(231, 76, 60, 0.15); } .navbar-right .icon.search svg, .navbar-right .icon.heart svg, .navbar-right .icon.menu svg { display: block; } .navbar-right .phone svg { vertical-align: middle; margin-right: 4px; } .navbar-right .phone { color: #e74c3c; font-weight: 600; font-size: 1.08rem; display: flex; align-items: center; margin-right: 12px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Segoe UI", Arial, sans-serif; background: #f8fbfa;\r\n color: #222;\r\n min-height: 100vh;\r\n margin: 0; } html, body { overflow-x: hidden; } .products-main { max-width: 100vw; overflow-x: hidden; margin-left: 0; padding-left: 0; } .card-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 40px; overflow-x: visible !important; } .navbar { position: sticky; top: var(--spacing-md); z-index: var(--z-sticky); padding: 0 var(--spacing-lg); margin: 0 auto; max-width: 1400px; } .navbar-inner { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border-radius: 60px; padding: var(--spacing-xs) var(--spacing-lg); box-shadow: 0 8px 32px rgba(23, 99, 91, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg); transition: all var(--transition-base); position: relative; } .navbar.scrolled .navbar-inner { background: rgba(255, 255, 255, 0.9); box-shadow: 0 12px 48px rgba(23, 99, 91, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08); } .navbar .logo { display: flex; align-items: center; gap: var(--spacing-sm); text-decoration: none; transition: transform var(--transition-fast); white-space: nowrap; z-index: 1001; } .navbar .logo:hover { transform: scale(1.03); } .navbar .logo img { height: 52px; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12)); transition: filter var(--transition-base); } .navbar .logo:hover img { filter: drop-shadow(0 4px 12px rgba(23, 99, 91, 0.3)); } .navbar .logo-text { font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.3rem; font-weight: 700; background: linear-gradient(135deg, var(--primary-dark) 0%, #0d4540 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.5px; } .navbar .navbar-left { flex: 1; display: flex; justify-content: center; } .navbar .navbar-left nav ul { display: flex; gap: var(--spacing-xs); list-style: none; margin: 0; padding: 0; align-items: center; } .navbar .navbar-left nav ul li { position: relative; } .navbar .navbar-left nav ul li a { font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-decoration: none; color: #4a5568; font-size: 1rem; font-weight: 500; padding: 12px 24px; display: inline-flex; align-items: center; gap: 6px; border-radius: 50px; position: relative; transition: all var(--transition-base); white-space: nowrap; min-height: 44px; min-width: 44px; justify-content: center; } .navbar .navbar-left nav ul li a:hover { color: var(--primary-dark); background: rgba(23, 99, 91, 0.08); transform: translateY(-2px); } .navbar .navbar-left nav ul li a.active { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); color: var(--white); font-weight: 600; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35), 0 2px 8px rgba(109, 40, 217, 0.25); } .navbar .navbar-left nav ul li a.active:hover { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); transform: translateY(-3px); box-shadow: 0 6px 24px rgba(139, 92, 246, 0.45), 0 3px 12px rgba(109, 40, 217, 0.35); } .navbar .dropdown-caret { display: inline-block; margin-left: 4px; font-size: 0.75rem; transition: transform var(--transition-fast); } .navbar .dropdown:hover .dropdown-caret { transform: rotate(180deg); } .navbar .dropdown { position: relative; } .navbar .dropdown::after { content: ''; position: absolute; top: 100%; left: -10%; width: 120%; height: 14px; background: transparent; z-index: 999; } .navbar .mega-menu-container { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%) translateY(-6px); opacity: 0; visibility: hidden; transition: all var(--transition-base); z-index: 1000; pointer-events: none; } .navbar .dropdown:hover .mega-menu-container { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: all; } .navbar .dropdown.open .mega-menu-container { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: all; } .navbar .mega-menu { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border-radius: 24px; padding: var(--spacing-lg); box-shadow: 0 20px 60px rgba(23, 99, 91, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.6); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--spacing-lg); min-width: 850px; max-width: 1000px; } .navbar .mega-col { padding: var(--spacing-sm); } .navbar .mega-title { font-family: "Poppins", sans-serif; font-size: 1rem; font-weight: 700; color: var(--primary-dark); margin-bottom: var(--spacing-xs); letter-spacing: 0.3px; } .navbar .category-toggle { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; padding: 8px 0; transition: all 0.3s ease; } .navbar .category-toggle:hover { color: #7c3aed; } .navbar .category-caret { font-size: 0.65rem; transition: transform 0.3s ease; color: #7c3aed; } .navbar .mega-col.category-active .category-caret { transform: rotate(180deg); } .navbar .mega-bar { width: 40px; height: 3px; background: linear-gradient(90deg, #8b5cf6, #6d28d9); border-radius: var(--radius-full); margin-bottom: var(--spacing-sm); display: none; opacity: 0; transition: opacity 0.3s ease; } .navbar .mega-col.category-active .mega-bar { display: block; opacity: 1; } .navbar .mega-menu .submenu { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease; } .navbar .mega-col.category-active .submenu { max-height: 500px; opacity: 1; } .navbar .mega-menu .submenu li { margin-bottom: 8px; } .navbar .mega-menu .submenu li a { font-family: "Poppins", sans-serif; color: #5a6c7d; font-size: 0.9rem; font-weight: 400; text-decoration: none; padding: 8px 12px; display: block; border-radius: 12px; transition: all var(--transition-fast); } .navbar .mega-menu .submenu li a:hover { background: rgba(139, 92, 246, 0.1); color: #6d28d9; transform: translateX(4px); padding-left: 16px; } .navbar #servicesDropdown .mega-menu { min-width: 310px; max-width: 330px; padding: 12px; display: block; } .navbar #servicesDropdown .mega-col { padding: 0; } .navbar #servicesDropdown .mega-title, .navbar #servicesDropdown .mega-bar, .navbar #servicesDropdown .category-caret, .navbar #servicesDropdown .category-toggle { display: none !important; } .navbar #servicesDropdown .submenu { max-height: none; opacity: 1; overflow: visible; } .navbar #servicesDropdown .submenu li { margin-bottom: 4px; } .navbar #servicesDropdown .submenu li a { color: #d86a00; font-size: 0.96rem; font-weight: 500; padding: 7px 10px; } .navbar #servicesDropdown .submenu li a:hover { color: #b55300; background: rgba(216, 106, 0, 0.12); transform: translateX(0); padding-left: 10px; } .navbar #servicesDropdown .services-explore-link { font-weight: 700; } .navbar-right { display: flex; align-items: center; gap: var(--spacing-sm); } .navbar-right .icon { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgba(23, 99, 91, 0.06); cursor: pointer; transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base); } .navbar-right .icon:hover { background: rgba(23, 99, 91, 0.12); transform: translateY(-3px) scale(1.08); box-shadow: 0 8px 20px rgba(23, 99, 91, 0.2); } .navbar-right .icon.heart { position: relative; width: auto; height: auto; min-width: 0; min-height: 0; border-radius: 0; background: transparent; box-shadow: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 4px; } .navbar-right .icon.heart .badge { display: none; background: #b91c1c; color: #fff; border-radius: 999px; font-size: 10px; line-height: 16px; min-width: 16px; height: 16px; padding: 0 4px; position: absolute; top: -5px; right: -7px; font-weight: 700; text-align: center; box-shadow: 0 2px 8px rgba(185, 28, 28, 0.25); border: 1px solid #fff; } .navbar-right .icon.heart .wishlist-text { display: block; font-size: 11px; line-height: 1; font-weight: 600; color: #8a1d1a; } .navbar-right .icon svg { width: 22px; height: 22px; stroke: var(--primary-dark); stroke-width: 2; transition: stroke var(--transition-fast); } .navbar-right .icon:hover svg { stroke: #6d28d9; } .hamburger-icon { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; padding: 10px; background: rgba(23, 99, 91, 0.08); border-radius: 12px; transition: all var(--transition-base); min-width: 44px; min-height: 44px; z-index: 1001; } .hamburger-icon:hover { background: rgba(23, 99, 91, 0.15); transform: scale(1.05); } .hamburger-icon:active { transform: scale(0.95); } .hamburger-icon span { width: 24px; height: 3px; background: var(--primary-dark); border-radius: 2px; transition: all var(--transition-base); display: block; } .hamburger-icon.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); } .hamburger-icon.active span:nth-child(2) { opacity: 0; transform: translateX(20px); } .hamburger-icon.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } @media (max-width: 1200px) { .navbar .mega-menu { min-width: 700px; grid-template-columns: repeat(3, 1fr); } .navbar .logo-text { font-size: 1.1rem; } .navbar .navbar-left nav ul { gap: 4px; } .navbar .navbar-left nav ul li a { font-size: 0.95rem; padding: 10px 18px; } } @media (max-width: 992px) { .navbar { top: var(--spacing-sm); padding: 0 var(--spacing-md); } .navbar-inner { padding: var(--spacing-xs) var(--spacing-md); } .navbar .logo-text { display: none; } .navbar .mega-menu { min-width: 600px; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 769px) { .navbar .dropdown.open .mega-menu .submenu, .navbar .dropdown:hover .mega-menu .submenu { max-height: none; opacity: 1; overflow: visible; } .navbar .category-toggle { cursor: default; pointer-events: none; } .navbar .category-caret { display: none; } .navbar .mega-bar { display: block; opacity: 1; } } .navbar-right .navbar-search { display: flex !important; align-items: center; height: 30px; min-width: 180px; max-width: 210px; border: 1px solid #d5bcbc; border-radius: 999px; background: #fff; overflow: hidden; } .navbar-right .navbar-search-input { width: 100%; border: none; outline: none; background: transparent; padding: 0 10px; font-size: 0.78rem; color: #7a1f1c; } .navbar-right .navbar-search-input::placeholder { color: #9b6160; } .navbar-right .navbar-search-btn { width: 30px; height: 30px; border: none; background: transparent; color: #7a1f1c; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .navbar-right .navbar-search-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; } .navbar-right .navbar-search-mobile { display: none !important; } @media (max-width: 768px) { .navbar-right .navbar-search { display: none !important; } .navbar-right .navbar-search-mobile { display: inline-flex !important; } .navbar { top: var(--spacing-xs); padding: 0 12px; z-index: 3100 !important; } .navbar-inner { padding: 8px 12px; border-radius: 40px; gap: 12px; position: relative; z-index: 3101 !important; } .navbar .logo img { height: 40px; } .navbar .logo-text { display: none; } .hamburger-icon { display: flex !important; z-index: 3102 !important; } body.menu-open::before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 3050 !important; animation: fadeInBackdrop 0.3s ease forwards; } @keyframes fadeInBackdrop { from { opacity: 0; } to { opacity: 1; } } .navbar .navbar-left { display: flex !important; position: fixed; top: 0; right: 0; width: 100%; max-width: 340px; height: 100vh; height: 100dvh; background: #ffffff; flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 75px 16px 20px; transform: translateX(110%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease; z-index: 3100 !important; box-shadow: -10px 0 50px rgba(0, 0, 0, 0.15); overflow: hidden; visibility: visible; pointer-events: none; } .navbar .navbar-left.mobile-menu-open { transform: translateX(0); box-shadow: -15px 0 60px rgba(0, 0, 0, 0.2); pointer-events: auto; overflow: hidden; border-radius: 0; } .mobile-menu-close { display: none; position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; align-items: center; justify-content: center; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 50%; cursor: pointer; z-index: 10; transition: all 0.3s ease; } .mobile-menu-header { display: none; } @media (max-width: 768px) { .mobile-menu-close { display: flex; } .mobile-menu-close:hover { background: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.4); transform: rotate(90deg); } .mobile-menu-close:active { transform: rotate(90deg) scale(0.9); } .mobile-menu-close svg { color: #6d28d9; } .mobile-menu-header { display: block; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid rgba(139, 92, 246, 0.15); } .mobile-menu-header h3 { margin: 0; font-size: 1.4rem; font-weight: 700; color: #1a202c; letter-spacing: -0.5px; } .navbar .dropdown .mega-menu { max-height: 0 !important; opacity: 0 !important; visibility: hidden !important; padding: 0 !important; overflow: hidden !important; display: block !important; } .navbar .dropdown.mobile-dropdown-open .mega-menu { max-height: 800px !important; opacity: 1 !important; visibility: visible !important; padding: 14px 10px !important; overflow-y: auto !important; overflow-x: hidden !important; display: block !important; } .navbar #servicesDropdown.mobile-dropdown-open .mega-menu { max-height: 9999px !important; opacity: 1 !important; visibility: visible !important; padding: 14px 10px !important; overflow: visible !important; display: block !important; } } .navbar .navbar-left nav { display: flex !important; flex-direction: column; width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; padding-right: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(139, 92, 246, 0.3) transparent; } .navbar .navbar-left nav::-webkit-scrollbar { width: 4px; } .navbar .navbar-left nav::-webkit-scrollbar-track { background: transparent; } .navbar .navbar-left nav::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.3); border-radius: 4px; } .navbar .navbar-left nav ul { display: flex !important; flex-direction: column; gap: 6px; padding: 0; margin: 0; width: 100%; list-style: none; box-sizing: border-box; } .navbar .navbar-left nav ul li { display: block !important; width: 100%; opacity: 0; transform: translateX(30px); transition: opacity 0.01s, transform 0.01s; } .navbar .navbar-left nav ul li.dropdown { opacity: 0; transform: translateX(30px); } .navbar .mega-menu-container, .navbar .mega-menu, .navbar .mega-col, .navbar .category-toggle { animation: none !important; } .navbar .mega-menu .submenu li { animation: none !important; } .navbar .navbar-left.mobile-menu-open nav ul li { animation: slideInRight 0.4s ease forwards; } .navbar .navbar-left.mobile-menu-open nav ul li:nth-child(1) { animation-delay: 0.1s; } .navbar .navbar-left.mobile-menu-open nav ul li:nth-child(2) { animation-delay: 0.15s; } .navbar .navbar-left.mobile-menu-open nav ul li:nth-child(3) { animation-delay: 0.2s; } .navbar .navbar-left.mobile-menu-open nav ul li:nth-child(4) { animation-delay: 0.25s; } .navbar .navbar-left.mobile-menu-open nav ul li:nth-child(5) { animation-delay: 0.3s; } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } .navbar .navbar-left nav ul li a { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; font-size: 0.95rem; font-weight: 600; padding: 14px 16px; border-radius: 10px; min-height: 50px; background: transparent; border: 1px solid transparent; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); color: #1a202c; position: relative; text-decoration: none; } .navbar .navbar-left nav ul li a:hover { background: rgba(139, 92, 246, 0.08); border-color: rgba(139, 92, 246, 0.2); color: #7c3aed; transform: translateX(2px); } .navbar .navbar-left nav ul li a.active { background: linear-gradient( 135deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.15) 100% ); border-color: rgba(139, 92, 246, 0.35); color: #7c3aed; font-weight: 700; } .navbar .dropdown { position: relative; } .navbar .dropdown .mega-menu-container { position: relative; width: 100%; margin: 4px 0 0 0; padding: 0; } .navbar .mega-menu { width: 100%; max-width: 100%; display: block; max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease; padding: 0; margin: 0; box-shadow: none; background: #ffffff; border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 8px; opacity: 0; visibility: hidden; box-sizing: border-box; } .navbar .dropdown.mobile-dropdown-open .mega-menu { max-height: 800px; padding: 14px 10px; opacity: 1; visibility: visible; overflow-y: auto; overflow-x: hidden; display: block; } .navbar .mega-col { padding: 10px 8px; margin-bottom: 4px; } .navbar .mega-col:first-child { padding-top: 4px; } .navbar .mega-col:last-child { margin-bottom: 0; padding-bottom: 4px; } .navbar .category-toggle { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 16px; background: rgba(139, 92, 246, 0.1); border-radius: 8px; transition: all 0.2s ease; border: 1px solid rgba(139, 92, 246, 0.15); margin-bottom: 0; min-height: 48px; } .navbar .category-toggle:hover { background: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.3); } .navbar .category-toggle:active { background: rgba(139, 92, 246, 0.2); transform: scale(0.98); } .navbar .category-toggle span:first-child { flex: 1; font-size: 0.88rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #7c3aed; } .navbar .category-caret { font-size: 0.7rem; transition: transform 0.3s ease; color: #7c3aed; margin-left: 10px; flex-shrink: 0; font-weight: bold; } .navbar .mega-col.category-active .category-caret { transform: rotate(180deg); } .navbar .mega-col.category-active .category-toggle { background: rgba(139, 92, 246, 0.18); border-color: rgba(139, 92, 246, 0.4); } .navbar .mega-bar { display: none; } .navbar .mega-menu .submenu { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease, visibility 0.4s; padding-left: 0; } .navbar .mega-col.category-active .submenu { max-height: 600px; opacity: 1; visibility: visible; margin-top: 12px; padding-left: 8px; } .navbar .mega-menu .submenu li { margin-bottom: 4px; } .navbar .mega-menu .submenu li:last-child { margin-bottom: 0; } .navbar .mega-menu .submenu li a { display: block; padding: 11px 14px; font-size: 0.9rem; font-weight: 500; border-radius: 6px; background: transparent; color: #475569; transition: all 0.2s ease; border: 1px solid transparent; text-decoration: none; } .navbar .mega-menu .submenu li a:hover { background: rgba(139, 92, 246, 0.1); color: #7c3aed; border-color: rgba(139, 92, 246, 0.2); transform: translateX(4px); } .navbar .dropdown-caret { font-size: 0.7rem; opacity: 0.7; transition: transform 0.3s ease, opacity 0.3s ease; } .navbar .dropdown.mobile-dropdown-open .dropdown-caret { transform: rotate(180deg); opacity: 1; } .navbar-right { gap: 8px; } .navbar-right .icon { width: 44px; height: 44px; } .navbar-right .icon svg { width: 20px; height: 20px; } } .footer-address { color: #666666; } @media (max-width: 480px) { .navbar-inner { padding: 6px 10px; gap: 8px; } .navbar .logo img { height: 36px; } .navbar .navbar-left { width: 100%; max-width: 90vw; padding: 70px 12px 16px; } .navbar .navbar-left nav ul li a { font-size: 0.9rem; padding: 12px 14px; min-height: 48px; } .navbar .category-toggle { padding: 9px 11px; font-size: 0.78rem; } .navbar .category-toggle span:first-child { font-size: 0.78rem; } .navbar .category-caret { font-size: 0.6rem; } .navbar .mega-menu .submenu li a { font-size: 0.82rem; padding: 7px 10px; } .mobile-menu-header h3 { font-size: 1.3rem; } .navbar-right { gap: 6px; } .navbar-right .icon { width: 40px; height: 40px; } .navbar-right .icon svg { width: 18px; height: 18px; } .navbar-right .icon.heart .badge { display: inline-block; font-size: 0.65rem; padding: 2px 6px; } .hero { min-height: 350px; padding: 40px 16px !important; } .hero h1 { font-size: 1.8rem; line-height: 1.3; } .hero .subtitle { font-size: 0.85rem; } .hero .desc { font-size: 0.9rem; line-height: 1.5; } .hero-buttons { flex-direction: column; gap: 12px; align-items: stretch; } .hero-buttons .btn { width: 100%; text-align: center; } .navbar-right .icon svg { width: 18px; height: 18px; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-md); font-weight: var(--font-weight-semibold); font-size: 1rem; cursor: pointer; transition: all var(--transition-base); border: none; position: relative; overflow: hidden; text-decoration: none; min-height: 44px; min-width: 44px; } .btn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .btn:hover::before { width: 300px; height: 300px; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--primary-gradient); color: var(--white); box-shadow: var(--shadow-md); } .btn-primary:hover { box-shadow: var(--shadow-lg), var(--shadow-glow); transform: translateY(-2px) scale(1.02); } .btn-secondary { background: transparent; color: var(--primary-dark); border: 2px solid var(--primary-dark); } .btn-secondary:hover { background: var(--primary-dark); color: var(--white); transform: translateY(-2px) scale(1.02); } .btn-outline { background: transparent; color: var(--primary-dark); border: 2px solid var(--primary-dark); text-decoration: none; } .btn-outline:hover { background: var(--primary-dark); color: var(--white); transform: translateY(-2px) scale(1.02); } .btn-accent { background: linear-gradient(135deg, var(--accent-gold), #b89500); color: var(--white); box-shadow: var(--shadow-md); } .btn-accent:hover { box-shadow: var(--shadow-lg), 0 0 20px rgba(207, 166, 0, 0.4); transform: translateY(-2px) scale(1.02); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .animate-fadeInUp { animation: fadeInUp 0.6s ease forwards; } .animate-fadeIn { animation: fadeIn 0.6s ease forwards; } .animate-slideInRight { animation: slideInRight 0.6s ease forwards; } .animate-scaleIn { animation: scaleIn 0.6s ease forwards; } .animate-delay-1 { animation-delay: 0.1s; } .animate-delay-2 { animation-delay: 0.2s; } .animate-delay-3 { animation-delay: 0.3s; } .animate-delay-4 { animation-delay: 0.4s; } .animate-delay-5 { animation-delay: 0.5s; } @media (max-width: 768px) { .navbar .navbar-left { display: none; } .navbar .logo { display: none; } .hamburger-icon { display: flex !important; } .navbar-right { right: 16px; top: 10px; gap: 10px; } .navbar { padding: 12px 0; } } @media (max-width: 420px) { .navbar-right { gap: 8px; right: 10px; } .hamburger-icon { left: 10px; } } .hero { position: relative; padding: 100px 60px; background: radial-gradient(circle at 70% 10%, #f8fbfa 60%, #f3f7f6 100%); min-height: 500px; width: 100vw; max-width: 100vw; box-sizing: border-box; overflow: hidden; } .hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 135deg, rgba(23, 99, 91, 0.05) 0%, transparent 100% ); z-index: 1; } .hero > * { position: relative; z-index: 2; } .hero .subtitle { color: var(--primary-dark); font-weight: var(--font-weight-bold); letter-spacing: 3px; font-size: 0.95rem; margin-bottom: var(--spacing-md); text-transform: uppercase; opacity: 0.9; } .hero h1 { font-size: 3.5rem; font-weight: var(--font-weight-black); margin-bottom: var(--spacing-lg); color: var(--text-dark); line-height: 1.1; background: linear-gradient( 135deg, var(--primary-dark) 0%, var(--primary-light) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero .desc { font-size: 1.2rem; color: var(--text-light); margin-bottom: var(--spacing-2xl); max-width: 650px; line-height: 1.7; } .hero-buttons { display: flex; gap: var(--spacing-md); flex-wrap: wrap; } @media (max-width: 1024px) { .hero { padding: 80px 50px; min-height: 450px; } .hero h1 { font-size: 3rem; } } @media (max-width: 768px) { .hero { padding: 60px 30px; min-height: 400px; } .hero h1 { font-size: 2.5rem; } .hero .desc { font-size: 1.1rem; } } @media (max-width: 480px) { .hero { padding: 50px 20px; min-height: 380px; } .hero h1 { font-size: 2rem; } .hero .desc { font-size: 1rem; margin-bottom: var(--spacing-lg); } .hero-buttons { flex-direction: column; gap: var(--spacing-sm); } .hero-buttons .btn { width: 100%; justify-content: center; } } .btn-outline { background: transparent; color: var(--primary-dark); border: 2px solid var(--primary-dark); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-md); font-size: 1rem; font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--transition-base); display: inline-flex; align-items: center; gap: var(--spacing-xs); text-decoration: none; } .btn-outline:hover { background: var(--primary-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .form-group { position: relative; margin-bottom: var(--spacing-lg); } .form-input, .form-textarea, .form-select { width: 100%; padding: var(--spacing-md) var(--spacing-sm); border: 2px solid var(--neutral-light); border-radius: var(--radius-md); font-size: 1rem; font-family: inherit; transition: all var(--transition-base); background: var(--white); color: var(--text-dark); outline: none; } .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--primary-dark); box-shadow: 0 0 0 4px rgba(23, 99, 91, 0.1), var(--shadow-glow); transform: translateY(-2px); } .form-input::placeholder, .form-textarea::placeholder { color: var(--neutral-medium); opacity: 0.7; } .form-label { position: absolute; top: var(--spacing-md); left: var(--spacing-sm); padding: 0 var(--spacing-xs); background: var(--white); color: var(--neutral-medium); font-size: 1rem; transition: all var(--transition-fast); pointer-events: none; } .form-input:focus + .form-label, .form-input:not(:placeholder-shown) + .form-label, .form-textarea:focus + .form-label, .form-textarea:not(:placeholder-shown) + .form-label { top: -10px; left: var(--spacing-sm); font-size: 0.85rem; color: var(--primary-dark); font-weight: var(--font-weight-semibold); } .form-textarea { min-height: 120px; resize: vertical; } .form-error { color: var(--accent-red); font-size: 0.875rem; margin-top: var(--spacing-xs); display: none; } .form-input.error, .form-textarea.error { border-color: var(--accent-red); } .form-input.error + .form-error, .form-textarea.error + .form-error { display: block; } .section { margin: 60px 0 0 0; padding: 0 40px; width: 100vw; max-width: 100vw; box-sizing: border-box; } .section-title { font-size: 2.2rem; font-weight: 700; text-align: center; margin-bottom: 6px; color: #222; } .section-desc { text-align: center; color: #666; margin-bottom: 32px; font-size: 1.1rem; } .card-row { display: flex; gap: 32px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; } .card { background: #fff; border-radius: 18px; box-shadow: 0 2px 12px rgba(23, 99, 91, 0.06); width: 300px; height: 400px; overflow: hidden; position: relative; margin-bottom: 18px; transition: transform 0.15s, box-shadow 0.15s; display: flex; flex-direction: column; } .card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 6px 24px rgba(23, 99, 91, 0.13); } .card img { width: 100%; height: 240px; object-fit: cover; display: block; } .card-content { padding: 18px 16px 16px 16px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; } .card-content h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; color: #222; } .card-content .category { color: #17635b; font-size: 0.95rem; margin-bottom: 6px; } .stars { color: #f7b731; font-size: 1rem; margin-bottom: 8px; } .stars span { color: #888; font-size: 0.95rem; margin-left: 4px; } .price-row { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 600; } .price { color: #17635b; } .old-price { color: #aaa; text-decoration: line-through; font-size: 1rem; font-weight: 400; } .card-badge { position: absolute; top: 14px; left: 14px; background: #17635b; color: #fff; font-size: 0.85rem; font-weight: 600; padding: 4px 12px; border-radius: 12px; z-index: 2; letter-spacing: 1px; } .card-badge.discount { top: 44px; left: 14px; background: #17635b; } .center-btn { display: flex; justify-content: center; margin: 18px 0 0 0; } .btn-secondary { background: #e6b800; color: #fff; border: none; padding: 14px 32px; border-radius: 12px; font-size: 1.1rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(230, 184, 0, 0.08); transition: background 0.2s; } .btn-secondary:hover { background: #cfa600; } .site-footer { background: linear-gradient(180deg, #fff9dc 0%, #f9ecad 100%); color: #7b1412; padding: 42px 0 30px; margin-top: 80px; } .site-footer .footer-container { max-width: 1400px; margin: 0 auto; padding: 0 56px; } .site-footer .footer-highlight-row { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.35fr); gap: 48px; align-items: start; margin-bottom: 42px; } .site-footer .footer-highlights { padding-top: 6px; } .site-footer .footer-value-props { list-style: none; padding: 0; margin: 0; } .site-footer .footer-value-props li { margin-bottom: 8px; color: #8a211b; font-size: 1.05rem; font-style: italic; line-height: 1.45; } .site-footer .footer-newsletter-panel h3, .site-footer .footer-column h3 { margin: 0 0 12px; color: #7b1412; font-size: 1.5rem; font-weight: 700; } .site-footer .footer-newsletter-panel h3 { font-size: 1.75rem; } .site-footer .footer-newsletter-copy { margin: 0 0 18px; color: #7f6154; font-size: 1rem; line-height: 1.6; } .site-footer .footer-newsletter-form { display: flex; flex-direction: column; gap: 10px; } .site-footer .footer-newsletter-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .site-footer .footer-newsletter-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; } .site-footer .footer-newsletter-controls input { min-width: 0; height: 52px; padding: 0 18px; border: 2px solid #8a211b; border-radius: 999px; background: rgba(255, 253, 241, 0.72); color: #7b1412; font-size: 0.98rem; outline: none; } .site-footer .footer-newsletter-controls input::placeholder { color: rgba(123, 20, 18, 0.6); } .site-footer .footer-newsletter-controls input:focus { box-shadow: 0 0 0 4px rgba(123, 20, 18, 0.12); } .site-footer .footer-newsletter-controls button { min-width: 142px; height: 52px; padding: 0 24px; border: none; border-radius: 999px; background: #8a1413; color: #fff7e2; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; } .site-footer .footer-newsletter-controls button:hover { background: #6d0f0f; transform: translateY(-1px); } .site-footer .footer-grid { display: grid; grid-template-columns: minmax(240px, 1.25fr) minmax(150px, 0.9fr) minmax(250px, 1fr) minmax(220px, 0.95fr); gap: 36px; align-items: start; } .site-footer .footer-brand-column { max-width: 280px; } .site-footer .footer-logo { max-width: 220px; width: 100%; height: auto; display: block; margin-bottom: 14px; } .site-footer .footer-tagline { margin: 0; color: #7b1412; font-size: 1rem; line-height: 1.55; font-weight: 500; } .site-footer .footer-links { list-style: none; padding: 0; margin: 0; } .site-footer .footer-links li { margin-bottom: 10px; } .site-footer .footer-links a, .site-footer .footer-contact-item, .site-footer .footer-contact-item a, .site-footer .footer-address { color: #7b1412; text-decoration: none; font-size: 1rem; line-height: 1.6; } .site-footer .footer-links a:hover, .site-footer .footer-contact-item a:hover, .site-footer .footer-legal-bar a:hover { text-decoration: underline; } .site-footer .footer-contact-item { display: flex; align-items: flex-start; margin-bottom: 10px; } .site-footer .footer-social { display: flex; flex-wrap: wrap; gap: 14px; } .site-footer .footer-icon-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.24) !important; box-shadow: inset 0 0 0 1px rgba(138, 33, 27, 0.08); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .site-footer .footer-icon-link:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(138, 33, 27, 0.14), 0 8px 16px rgba(138, 33, 27, 0.12); } .site-footer .footer-icon-link .icon-def, .site-footer .footer-icon-link .icon-hov { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.18s ease; } .site-footer .footer-icon-link .icon-def { opacity: 1; } .site-footer .footer-icon-link .icon-hov { opacity: 0; } .site-footer .footer-icon-link:hover .icon-def { opacity: 0; } .site-footer .footer-icon-link:hover .icon-hov { opacity: 1; } .site-footer .footer-legal-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 6px; margin-top: 42px; padding-top: 22px; color: #7b1412; } .site-footer .footer-legal-bar a, .site-footer .footer-legal-sep, .site-footer .footer-bottom p { color: #7b1412; } .site-footer .footer-legal-bar a { text-decoration: none; font-size: 0.95rem; font-weight: 500; white-space: nowrap; } .site-footer .footer-legal-sep { user-select: none; } .site-footer .footer-bottom { padding-top: 34px; text-align: center; } .site-footer .footer-bottom p { margin: 0; font-size: 0.92rem; font-style: italic; } @media (max-width: 1100px) { .site-footer .footer-highlight-row { grid-template-columns: 1fr; gap: 28px; } .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } } @media (max-width: 700px) { .site-footer { padding: 36px 0 28px; margin-top: 60px; } .site-footer .footer-container { padding: 0 18px; } .site-footer .footer-grid { grid-template-columns: 1fr; gap: 24px; } .site-footer .footer-newsletter-controls { grid-template-columns: 1fr; } .site-footer .footer-newsletter-controls button { width: 100%; } .site-footer .footer-column, .site-footer .footer-highlights, .site-footer .footer-newsletter-panel, .site-footer .footer-brand-column { text-align: center; } .site-footer .footer-logo { margin-left: auto; margin-right: auto; } .site-footer .footer-contact-item, .site-footer .footer-social, .site-footer .footer-legal-bar { justify-content: center; } .site-footer .footer-legal-sep { display: none; } .site-footer .footer-newsletter-panel h3, .site-footer .footer-column h3 { font-size: 1.55rem; } } @media (max-width: 480px) { .site-footer .footer-value-props li, .site-footer .footer-links a, .site-footer .footer-contact-item, .site-footer .footer-contact-item a, .site-footer .footer-address { font-size: 0.95rem; } } @media (max-width: 360px) { .footer-container { padding: 0 10px; } .footer-bottom p { font-size: 0.75rem; } } @media (min-width: 769px) { .navbar .mega-menu-container { width: min(1280px, calc(100vw - 20px)) !important; max-width: calc(100vw - 20px) !important; } .navbar .dropdown.open .mega-menu-container .mega-menu, .navbar .dropdown:hover .mega-menu-container .mega-menu { display: grid !important; } .navbar .mega-menu { width: 100% !important; max-width: none !important; min-width: 0 !important; padding: 16px 18px !important; gap: 0 !important; grid-template-columns: repeat(var(--mega-columns, 5), minmax(0, 1fr)) !important; align-items: start !important; background: #f7f8fa !important; border-radius: 10px !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14) !important; overflow-x: hidden !important; overflow-y: visible !important; white-space: normal !important; } .navbar .mega-col { min-width: 0 !important; max-width: none !important; padding: 0 14px !important; border-right: 1px solid #d6dbe6 !important; margin-right: 0 !important; } .navbar .mega-col:last-child { border-right: none !important; } .navbar .mega-title { font-size: 0.88rem !important; line-height: 1.15 !important; min-height: 2.3em !important; margin-bottom: 3px !important; color: #334155 !important; text-transform: capitalize !important; overflow-wrap: anywhere !important; } .navbar .mega-bar { width: 100% !important; height: 1px !important; margin-bottom: 7px !important; background: #c8d0de !important; border-radius: 0 !important; opacity: 1 !important; } .navbar .mega-menu .submenu, .navbar .dropdown.open .mega-menu .submenu, .navbar .dropdown:hover .mega-menu .submenu { max-height: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; } .navbar .mega-menu .submenu li { margin-bottom: 1px !important; } .navbar .mega-menu .submenu li a { font-size: 0.79rem !important; line-height: 1.18 !important; padding: 3px 2px !important; border-radius: 4px !important; color: #1f2937 !important; text-decoration: none !important; } .navbar .mega-menu .submenu li a:hover { background: #eef2f7 !important; color: #0f172a !important; text-decoration: none !important; transform: none !important; } .navbar .mega-col-services .mega-title { color: #781f1a !important; } } .home-services-sec { padding: 42px 24px 86px !important; background: radial-gradient( circle at top, rgba(255, 255, 255, 0.96) 0%, rgba(255, 247, 232, 0.98) 48%, #f6efe4 100% ) !important; border-top: 1px solid rgba(123, 20, 18, 0.08); } .home-services-sec > div { max-width: 1140px !important; margin: 0 auto !important; } .home-services-title { text-align: center; margin: 0 0 42px !important; color: #7b1412 !important; font-family: Georgia, serif !important; font-size: clamp(2rem, 3vw, 2.75rem) !important; font-weight: 700 !important; line-height: 1.15; } .home-services-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 34px !important; align-items: stretch !important; } .home-service-link { display: block; text-decoration: none !important; } .home-service-card { height: 204px !important; border: 2px solid #983127 !important; border-radius: 28px !important; background: #ffffff !important; position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 14px !important; box-shadow: 0 10px 30px rgba(120, 34, 24, 0.06); transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; } .home-service-card img { width: 56px; height: 56px; object-fit: contain; } .home-service-card:hover { transform: translateY(-4px); background: #fffaf5 !important; box-shadow: 0 16px 36px rgba(120, 34, 24, 0.12); } .home-service-card h3 { margin: 0 !important; color: #7b1412 !important; font-family: Georgia, serif !important; font-weight: 700 !important; line-height: 1.22 !important; text-align: center !important; } .home-service-heading { font-size: clamp(1.35rem, 1.9vw, 1.95rem) !important; } .home-service-pill { position: absolute !important; left: 50% !important; bottom: -20px !important; transform: translateX(-50%); min-width: 190px !important; text-align: center !important; padding: 9px 24px !important; border: 2px solid #983127 !important; border-radius: 999px !important; color: #7b1412 !important; background: #ffffff !important; font-size: 1.03rem !important; font-weight: 600 !important; font-family: Georgia, serif !important; box-shadow: 0 8px 16px rgba(120, 34, 24, 0.08); } .home-services-cta-wrap { display: flex !important; justify-content: center !important; margin-top: 64px !important; } .home-services-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 246px !important; padding: 11px 30px !important; border: 2px solid #7b1412 !important; border-radius: 999px !important; color: #7b1412 !important; text-decoration: none !important; font-size: 1.08rem !important; font-weight: 600 !important; background: #ffffff !important; font-family: Georgia, serif !important; box-shadow: 0 10px 18px rgba(123, 20, 18, 0.08); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .home-services-cta:hover { background: #7b1412 !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 14px 26px rgba(123, 20, 18, 0.18); } .hero-faqs { padding: 82px 24px 88px; background: #efe7ad; border-bottom: 1px solid #e1d7a4; } .hero-faqs .hero-content { max-width: 920px; margin: 0 auto; text-align: center; } .hero-faqs .hero-title { margin: 0; color: #7b1412; font-size: clamp(2.45rem, 3.4vw, 3.25rem); font-weight: 700; line-height: 1.1; font-family: Georgia, serif; } .hero-faqs .hero-subtitle { display: none; } .faq-wrap { max-width: 1260px; margin: 0 auto; padding: 34px 24px 76px; } .faq-board { border: 1px solid #ddd5be; border-radius: 18px; background: #efe7ad; box-shadow: 0 10px 28px rgba(55, 45, 22, 0.08); overflow: hidden; } .faq-search-row { padding: 18px; background: #efe7ad; border-bottom: 1px solid #dfd5aa; } .faq-search { width: 100%; min-height: 52px; padding: 12px 18px; border: 1px solid #d5cab1; border-radius: 14px; background: #fff; color: #454545; font-size: 1.05rem; outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82); } .faq-search:focus { border-color: #9b8a5e; box-shadow: 0 0 0 3px rgba(155, 138, 94, 0.18); } .faq-columns-head { display: grid; grid-template-columns: 1fr 1.12fr 1.08fr; gap: 0; background: #efe7ad; border-bottom: 1px solid #dbd0ab; } .faq-col-head { margin: 0; padding: 16px 18px; color: #3d321e; font-size: 1.02rem; font-weight: 700; border-right: 1px solid #dbd0ab; } .faq-col-head:last-child { border-right: 0; } .faq-columns-body { display: grid; grid-template-columns: 1fr 1.12fr 1.08fr; gap: 0; background: #fff; } .faq-panel { min-height: 420px; padding: 0; border-right: 1px solid #dcdcdc; background: #fff; } .faq-panel:last-child { border-right: 0; } .faq-topic-list, .faq-issue-list { list-style: none; margin: 0; padding: 0; } .faq-topic-list li + li, .faq-issue-list li + li { margin-top: 0; } .faq-topic-btn, .faq-issue-btn { width: 100%; display: block; padding: 14px 14px 13px; border: 0; border-bottom: 1px solid #e6e6e6; background: #fff; color: #3e454f; text-align: left; font-size: 0.98rem; font-weight: 500; line-height: 1.45; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .faq-topic-btn:hover, .faq-issue-btn:hover { background: #f6f6f6; } .faq-topic-btn.active, .faq-issue-btn.active { background: #efe7ad; color: #2f2c21; font-weight: 700; } .faq-topic-meta, .faq-issue-meta { display: block; margin-top: 4px; font-size: 0.78rem; font-weight: 700; color: #6d7e95; opacity: 1; white-space: normal; } .faq-empty { padding: 16px; border: 1px dashed #d9c5b8; border-radius: 14px; color: #7a5c4f; background: #fffaf6; font-size: 0.94rem; } .faq-answer-panel { background: #fff; } .faq-answer-box { height: 100%; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; padding: 16px 18px 18px; } .faq-answer-topic { margin: 0; color: #937448; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .faq-answer-question { margin: 0; color: #7b1412; font-family: "Poppins", sans-serif; font-size: clamp(1.45rem, 1.62vw, 1.95rem); line-height: 1.34; font-weight: 700; } .faq-answer-text { margin: 0; color: #4d5964; font-size: 1.04rem; line-height: 1.66; } .faq-answer-text a, .faq-help a { color: #7b1412; font-weight: 700; } .faq-help { margin-top: 4px; padding: 12px 0 0; border-top: 1px dashed #d8d8d8; color: #5e6a76; font-size: 0.98rem; line-height: 1.6; } .faq-seo-index { margin-top: 30px; padding: 16px; border: 1px solid #d0d0d0; border-radius: 16px; background: #f3f3f3; box-shadow: none; } .faq-seo-title { margin: 0 0 16px; color: #4a261f; font-family: "Poppins", sans-serif; font-size: 2.1rem; font-weight: 700; line-height: 1.2; } .faq-seo-group { padding: 16px 0; } .faq-seo-group + .faq-seo-group { border-top: 1px solid #f0e6dc; } .faq-seo-group h3 { margin: 0 0 12px; color: #5f1f1f; font-size: 1.12rem; font-weight: 700; line-height: 1.3; } .faq-seo-group details { border-top: 0; padding: 0; margin-bottom: 8px; } .faq-seo-group details:first-of-type { border-top: 0; } .faq-seo-group summary { cursor: pointer; color: #29313d; font-weight: 700; font-size: 0.99rem; line-height: 1.45; background: #efe7ad; border: 1px solid #e0d8bf; border-radius: 12px; padding: 10px 12px; } .faq-seo-group p { margin: 6px 0 10px; color: #4f5b67; line-height: 1.72; padding: 0 2px; } @media (max-width: 1024px) { .home-services-grid, .faq-columns-head, .faq-columns-body { grid-template-columns: 1fr !important; } .faq-columns-head { display: grid; } .faq-col-head { border-right: 0; border-bottom: 1px solid #dbd0ab; } .faq-col-head:last-child { border-bottom: 0; } .faq-panel { min-height: 0; border-right: 0; border-bottom: 1px solid #dcdcdc; } .faq-columns-body { gap: 14px; } .faq-answer-panel { grid-column: 1 / -1; border-bottom: 0; } } @media (max-width: 768px) { .home-services-sec { padding: 34px 18px 70px !important; } .home-services-grid { grid-template-columns: 1fr !important; gap: 30px !important; } .home-service-card { height: 190px !important; border-radius: 24px !important; } .home-service-pill { min-width: 170px !important; font-size: 0.95rem !important; } .home-services-cta-wrap { margin-top: 54px !important; } .home-services-cta { min-width: 220px !important; font-size: 1rem !important; } .hero-faqs { padding: 34px 18px 44px; } .faq-wrap { padding: 28px 18px 68px; } .faq-board { border-radius: 14px; } .faq-columns-head, .faq-columns-body { grid-template-columns: 1fr !important; } .faq-columns-body { gap: 0; } .faq-panel { border-radius: 0; } .faq-seo-index { padding: 14px; } } @media (max-width: 480px) { .home-services-title { margin-bottom: 32px !important; } .home-service-card { padding: 0 16px !important; } .faq-topic-btn, .faq-issue-btn { padding: 12px 12px; font-size: 0.94rem; } .faq-answer-question { font-size: 1.3rem; } } @media (min-width: 1024px) { .navbar { max-width: 1460px !important; padding: 0 16px !important; } .navbar .navbar-inner { min-height: 82px !important; padding: 8px 16px !important; gap: 10px !important; border-radius: 48px !important; } .navbar .logo { flex: 0 0 auto !important; min-width: 190px !important; white-space: nowrap !important; } .navbar .logo img { height: 56px !important; width: auto !important; max-width: 220px !important; object-fit: contain !important; aspect-ratio: auto !important; } .navbar .navbar-left { flex: 1 1 auto !important; min-width: 0 !important; } .navbar .navbar-left nav ul { gap: 2px !important; flex-wrap: nowrap !important; } .navbar .navbar-left nav ul li a { font-size: 0.82rem !important; font-weight: 600 !important; padding: 10px 12px !important; min-height: 38px !important; line-height: 1.1 !important; } .navbar .dropdown-caret { font-size: 0.66rem !important; margin-left: 3px !important; } .navbar-right { flex: 0 0 auto !important; gap: 8px !important; } } @media (min-width: 769px) { .navbar .mega-menu-container { width: min(1280px, calc(100vw - 20px)) !important; max-width: calc(100vw - 20px) !important; } .navbar .dropdown.open .mega-menu-container .mega-menu, .navbar .dropdown:hover .mega-menu-container .mega-menu { display: grid !important; } .navbar .mega-menu { width: 100% !important; max-width: none !important; min-width: 0 !important; padding: 16px 18px !important; gap: 0 !important; grid-template-columns: repeat(var(--mega-columns, 5), minmax(0, 1fr)) !important; align-items: start !important; background: #f7f8fa !important; border-radius: 10px !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14) !important; overflow-x: hidden !important; overflow-y: visible !important; white-space: normal !important; } .navbar .mega-col { min-width: 0 !important; max-width: none !important; padding: 0 14px !important; border-right: 1px solid #d6dbe6 !important; margin-right: 0 !important; } .navbar .mega-col:last-child { border-right: none !important; } .navbar .mega-title { font-size: 0.88rem !important; line-height: 1.15 !important; min-height: 2.3em !important; margin-bottom: 3px !important; color: #334155 !important; text-transform: capitalize !important; overflow-wrap: anywhere !important; } .navbar .mega-bar { width: 100% !important; height: 1px !important; margin-bottom: 7px !important; background: #c8d0de !important; border-radius: 0 !important; opacity: 1 !important; } .navbar .mega-menu .submenu, .navbar .dropdown.open .mega-menu .submenu, .navbar .dropdown:hover .mega-menu .submenu { max-height: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; } .navbar .mega-menu .submenu li { margin-bottom: 1px !important; } .navbar .mega-menu .submenu li a { font-size: 0.79rem !important; line-height: 1.18 !important; padding: 3px 2px !important; border-radius: 4px !important; color: #1f2937 !important; text-decoration: none !important; } .navbar .mega-menu .submenu li a:hover { background: #eef2f7 !important; color: #0f172a !important; text-decoration: none !important; transform: none !important; } .navbar .mega-col-services .mega-title { color: #781f1a !important; } .navbar #servicesDropdown { position: relative; } .navbar #servicesDropdown::after { content: ''; position: absolute; top: 100%; left: -10%; width: 120%; height: 14px; background: transparent; z-index: 999; } .navbar #servicesDropdown .mega-menu-container { position: absolute; top: calc(100% + 2px) !important; left: 50% !important; width: 340px !important; max-width: 340px !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateX(-50%) translateY(-6px) !important; transition: all 0.25s ease !important; z-index: 10000 !important; } .navbar #servicesDropdown:hover .mega-menu-container, .navbar #servicesDropdown.open .mega-menu-container { opacity: 1 !important; visibility: visible !important; pointer-events: all !important; transform: translateX(-50%) translateY(0) !important; } .navbar #servicesDropdown:hover .mega-menu, .navbar #servicesDropdown.open .mega-menu { display: block !important; } .navbar #servicesDropdown .mega-menu { display: block !important; width: 340px !important; max-width: 340px !important; min-width: 340px !important; padding: 10px 12px !important; background: #ffffff !important; border: 1px solid #eceef2 !important; border-radius: 8px !important; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14) !important; grid-template-columns: none !important; gap: 0 !important; } .navbar #servicesDropdown .mega-col { border-right: none !important; border-bottom: none !important; padding: 0 !important; min-width: 0 !important; } .navbar #servicesDropdown .mega-col.category-active { padding: 0 !important; } .navbar #servicesDropdown .mega-title, .navbar #servicesDropdown .mega-bar, .navbar #servicesDropdown .category-toggle, .navbar #servicesDropdown .category-caret { display: none !important; } .navbar #servicesDropdown .submenu { list-style: none !important; padding: 0 !important; margin: 0 !important; max-height: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; } .navbar #servicesDropdown .submenu li { margin: 0 !important; padding: 0 !important; } .navbar #servicesDropdown .submenu li a { display: block !important; color: #d56f08 !important; font-size: 0.95rem !important; font-weight: 500 !important; line-height: 1.35 !important; padding: 6px 8px !important; border-radius: 6px !important; transition: all 0.2s ease !important; text-decoration: none !important; } .navbar #servicesDropdown .submenu li a:hover { background: #fff4ea !important; color: #b55300 !important; transform: translateX(2px) !important; } .navbar #servicesDropdown .services-explore-link { font-weight: 700 !important; margin-top: 2px !important; } } @media (max-width: 768px) { .navbar #servicesDropdown::after { display: none !important; } .navbar #productsDropdown .mega-menu-container, .navbar #servicesDropdown .mega-menu-container { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: all !important; z-index: auto !important; } .navbar #productsDropdown .mega-menu, .navbar #servicesDropdown .mega-menu { width: 100% !important; max-width: 100% !important; min-width: 0 !important; grid-template-columns: 1fr !important; grid-auto-flow: row !important; } .navbar #servicesDropdown .services-menu, .navbar #servicesDropdown .mega-menu.services-menu { display: block !important; grid-template-columns: 1fr !important; gap: 0 !important; } .navbar #servicesDropdown .mega-col, .navbar #productsDropdown .mega-col { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } .navbar #servicesDropdown .submenu li a, .navbar #productsDropdown .submenu li a { width: 100% !important; white-space: normal !important; text-align: left !important; } } @media (max-width: 1400px) { .card { width: 23vw; min-width: 240px; max-width: 320px; } .card-row { gap: 18px; } .footer { flex-direction: column; gap: 18px; padding: 40px 20px 30px 20px; } .navbar, .hero, .section { padding-left: 20px; padding-right: 20px; } } @media (min-width: 769px) { .navbar .mega-menu-container { width: min(1280px, calc(100vw - 20px)); max-width: calc(100vw - 20px); } .navbar .dropdown.open .mega-menu-container .mega-menu, .navbar .dropdown:hover .mega-menu-container .mega-menu { display: grid !important; } .navbar .mega-menu { width: 100%; min-width: 0; max-width: none; padding: 16px 18px; gap: 0; grid-template-columns: repeat(var(--mega-columns, 5), minmax(0, 1fr)); align-items: start; background: #f7f8fa; border-radius: 10px; border: 1px solid #e2e8f0; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14); } .navbar .mega-col { min-width: 0; padding: 0 14px; border-right: 1px solid #d6dbe6; } .navbar .mega-col:last-child { border-right: none; } .navbar .mega-title { font-size: 0.88rem; line-height: 1.15; margin-bottom: 3px; min-height: 2.3em; text-transform: capitalize; letter-spacing: 0; color: #334155; } .navbar .mega-bar { width: 100%; height: 1px; margin-bottom: 7px; background: #c8d0de; border-radius: 0; opacity: 1; } .navbar .mega-menu .submenu li { margin-bottom: 1px; } .navbar .mega-menu .submenu li:last-child { margin-bottom: 0; } .navbar .mega-menu .submenu li a { font-size: 0.79rem; line-height: 1.18; padding: 3px 2px; color: #1f2937; border-radius: 4px; } .navbar .mega-menu .submenu li a:hover { transform: none; padding-left: 2px; background: #eef2f7; text-decoration: none; color: #0f172a; } .navbar .mega-col-services .mega-title { color: #781f1a; } } @media (max-width: 900px) { .card-row { flex-direction: column; align-items: center; } .card { width: 90vw; min-width: 200px; max-width: 100%; } .section { margin-top: 30px; } .footer { padding: 30px 8px 20px 8px; } .navbar, .hero, .section { padding-left: 8px; padding-right: 8px; } } .mega-menu-container { width: 100vw; left: 0; right: 0; position: absolute; top: 60px; z-index: 100; display: flex; justify-content: center; align-items: flex-start; background: none; padding-top: 0; box-sizing: border-box; } .mega-menu { display: none; background: #f7f8fa; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14); border-radius: 10px; border: 1px solid #e2e8f0; padding: 22px 24px; gap: 0; justify-content: flex-start; align-items: flex-start; width: min(1260px, calc(100vw - 24px)); min-width: 0; max-width: calc(100vw - 24px); margin: 0 auto; overflow: visible; white-space: normal; box-sizing: border-box; grid-template-columns: repeat(var(--mega-columns, 5), minmax(0, 1fr)); align-items: start; } .dropdown:hover .mega-menu-container .mega-menu, .dropdown:focus-within .mega-menu-container .mega-menu { display: grid; } .mega-col { min-width: 0; max-width: none; display: flex; flex-direction: column; gap: 4px; margin-right: 0; padding: 0 14px; border-right: 1px solid #d6dbe6; } .mega-col:last-child { border-right: none; } .mega-title { font-weight: 700; font-size: 0.88rem; color: #334155; margin-bottom: 2px; line-height: 1.15; min-height: 2.3em; overflow-wrap: anywhere; text-transform: capitalize; } .mega-bar { width: 100%; height: 1px; background: #c8d0de; border-radius: 0; margin-bottom: 7px; opacity: 1; } .submenu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; } .submenu li { margin-bottom: 0; display: block; } .submenu a { color: #1f2937; text-decoration: none; font-size: 0.79rem; font-weight: 500; padding: 3px 2px; transition: color 0.18s; display: block; margin-bottom: 0; line-height: 1.2; border-radius: 4px; } .submenu a:hover { color: #0f172a; text-decoration: none; background: #eef2f7; } @media (min-width: 1920px) { .navbar, .hero, .section { max-width: 1920px; margin-left: auto; margin-right: auto; } .card-row { max-width: 1600px; margin: 0 auto; } } @media (max-width: 1400px) { .navbar { padding: 18px 30px; } .card-row { gap: 24px; } .mega-menu { width: min(1220px, calc(100vw - 24px)); max-width: calc(100vw - 24px); padding: 20px 22px; gap: 10px 12px; } } @media (max-width: 1199px) { .navbar nav ul { gap: 28px; } .navbar nav ul li a { font-size: 1.15rem; } .hero h1 { font-size: 2.5rem; } .card-row { gap: 20px; grid-template-columns: repeat(3, 1fr); } .mega-menu { width: min(760px, calc(100vw - 32px)); max-width: calc(100vw - 32px); padding: 20px 20px; gap: 12px 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } .mega-col { min-width: 0; } .product-detail-card { flex-direction: column; padding: 24px; } .product-detail-left, .product-detail-center, .product-detail-right { width: 100%; max-width: 100%; } } @media (max-width: 991px) { .navbar { padding: 16px 20px; flex-wrap: wrap; } .navbar nav { order: 3; width: 100%; margin-top: 12px; } .navbar nav ul { gap: 20px; flex-wrap: wrap; justify-content: center; } .navbar nav ul li a { font-size: 1.1rem; } .hero { min-height: 350px; padding: 40px 20px; } .hero h1 { font-size: 2.2rem; line-height: 1.2; } .hero .desc { font-size: 1rem; } .hero-buttons { flex-direction: column; gap: 12px; } .btn-primary, .btn-outline { width: 100%; max-width: 300px; } .card-row { grid-template-columns: repeat(2, 1fr); gap: 18px; } .section-title { font-size: 2rem; } .dropdown .mega-menu-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); padding: 60px 20px; overflow-y: auto; } .mega-menu { flex-direction: column; width: 100%; max-width: 600px; margin: 0 auto; } .mega-col { max-width: 100%; width: 100%; } .footer > div { flex-direction: column; gap: 32px; } .sidebar-filter { width: 100%; position: static; margin-bottom: 20px; } .products-main { flex-direction: column; } .card-grid { margin-left: 0; } } @media (max-width: 767px) { body { font-size: 14px; } .navbar { padding: 12px 16px; } .navbar nav ul { gap: 12px; font-size: 0.95rem; } .navbar nav ul li a { font-size: 1rem; padding: 4px 0; } .navbar-right { gap: 12px; } .navbar-right svg { width: 24px; height: 24px; } .hero { min-height: 300px; padding: 30px 16px; } .hero h1 { font-size: 1.8rem; } .hero .subtitle { font-size: 0.9rem; } .hero .desc { font-size: 0.95rem; } .section { padding: 32px 16px; margin-top: 24px; } .section-title { font-size: 1.8rem; margin-bottom: 12px; } .section-desc { font-size: 0.95rem; } .card-row { grid-template-columns: repeat(2, 1fr); gap: 14px; } .card { border-radius: 12px; } .card h3 { font-size: 1rem; } .card .category, .card .price { font-size: 0.9rem; } .card-icons { top: 12px; right: 12px; gap: 8px; } .card-icon { width: 32px; height: 32px; } .card-icon svg { width: 18px; height: 18px; } .product-detail-main { padding: 20px 16px; } .product-detail-card { padding: 20px; gap: 20px; } .gallery-main-wrapper { padding: 20px; } .gallery-main { width: 100% !important; height: 300px !important; } .gallery-arrow { width: 36px; height: 36px; } .product-info { padding: 16px; } .product-title { font-size: 1.5rem; } .product-price { font-size: 1.8rem; } .footer { padding: 24px 16px 20px 16px; } .footer h2 { font-size: 1.8rem; } .footer h3 { font-size: 1.2rem; } .footer p { font-size: 1rem; } } @media (max-width: 575px) { body { font-size: 13px; } .navbar { padding: 10px 12px; } .navbar .logo { font-size: 1.3rem; } .navbar nav { display: none; } .navbar-right { gap: 10px; } .navbar-right span, .navbar-right svg { width: 22px; height: 22px; } .menu-toggle { display: block; } .hero { min-height: 280px; padding: 24px 12px; } .hero h1 { font-size: 1.5rem; line-height: 1.3; } .hero .subtitle { font-size: 0.85rem; } .hero .desc { font-size: 0.9rem; line-height: 1.5; } .hero-buttons { flex-direction: column; gap: 10px; align-items: stretch; } .btn-primary, .btn-outline { width: 100%; padding: 12px 20px; font-size: 0.95rem; } .section { padding: 24px 12px; margin-top: 20px; } .section-title { font-size: 1.5rem; margin-bottom: 10px; } .section-desc { font-size: 0.9rem; margin-bottom: 16px; } .card-row { grid-template-columns: 1fr; gap: 16px; } .card { max-width: 100%; border-radius: 10px; } .card h3 { font-size: 0.95rem; } .card .category { font-size: 0.85rem; } .card .price { font-size: 0.9rem; } .card .stars { font-size: 0.9rem; } .card-icons { top: 10px; right: 10px; gap: 6px; } .card-icon { width: 30px; height: 30px; } .mega-menu { padding: 20px 16px; } .product-detail-card { padding: 16px; gap: 16px; border-radius: 16px; } .gallery-main { width: 100% !important; height: 250px !important; } .gallery-thumbs { gap: 8px; } .gallery-thumb { width: 60px !important; height: 60px !important; } .product-title { font-size: 1.3rem; } .product-price { font-size: 1.5rem; } .product-details { padding: 16px; } .color-option { width: 32px; height: 32px; } .footer { padding: 20px 12px 16px 12px; } .footer h2 { font-size: 1.5rem; } .footer h3 { font-size: 1.1rem; } .footer p { font-size: 0.95rem; } .search-modal, .menu-modal { width: 100%; padding: 20px 16px; } .search-modal-title, .menu-title { font-size: 1.5rem; } .search-input { font-size: 1rem; padding: 10px 14px; } .popular-list li { font-size: 1rem; padding: 10px 14px; } } @media (max-width: 374px) { .navbar .logo { font-size: 1.2rem; } .hero h1 { font-size: 1.3rem; } .section-title { font-size: 1.3rem; } .card h3 { font-size: 0.9rem; } .gallery-main { height: 220px !important; } } @media (max-height: 600px) and (orientation: landscape) { .hero { min-height: 250px; padding: 20px 16px; } .hero h1 { font-size: 1.6rem; } .section { padding: 20px 16px; } } @media print { .navbar, .hero-buttons, .card-icons, .footer, .search-modal, .menu-modal, .mega-menu-container { display: none !important; } body { background: white; } .card { box-shadow: none; border: 1px solid #ddd; } } .about-container { max-width: 100%; padding: 20px; } @media (max-width: 991px) { .about-container { flex-direction: column; } .about-text, .about-img { width: 100%; max-width: 100%; } .about-desc { font-size: 1rem; line-height: 1.6; margin-bottom: 16px; } } @media (max-width: 767px) { .about-container { padding: 16px; } .about-title { font-size: 1.8rem; margin-bottom: 16px; } .about-desc { font-size: 0.95rem; line-height: 1.5; } } @media (max-width: 575px) { .about-container { padding: 12px; } .about-title { font-size: 1.5rem; margin-bottom: 12px; } .about-title-bar { margin-bottom: 16px; } .about-desc { font-size: 0.9rem; margin-bottom: 12px; } } @media (max-width: 1199px) { .card-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 991px) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (max-width: 575px) { .card-grid { grid-template-columns: 1fr; gap: 14px; } } @media (max-width: 991px) { .contact-container { flex-direction: column; } .contact-form, .contact-info { width: 100%; max-width: 100%; } } @media (max-width: 575px) { .contact-form input, .contact-form textarea, .contact-form button { font-size: 0.95rem; padding: 10px 14px; } } @media (max-width: 991px) { .product-detail-main { flex-direction: column; padding: 20px; } .product-detail-left, .product-detail-center, .product-detail-right { width: 100%; flex: none; } .gallery-options-bar { padding: 12px 24px; } .zoom-pill-btn { font-size: 1rem; height: 42px; padding: 0 20px; } .icon-btn { width: 40px; height: 40px; } } @media (max-width: 767px) { .wishlist-grid { grid-template-columns: 1fr; } } @media (max-width: 991px) { .why-us-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .why-us-grid { grid-template-columns: 1fr; } } @media (max-width: 575px) { .search-modal, .menu-modal { width: 100vw; right: 0; padding: 20px 16px 0 16px; animation: slideIn 0.25s; } .search-bar { margin: 20px 0 18px 0; } .search-input { padding: 10px 14px; font-size: 0.95rem; } .menu-list li { font-size: 1.1rem; padding: 14px 0; } } .hide-mobile { display: block; } .show-mobile { display: none; } @media (max-width: 767px) { .hide-mobile { display: none; } .show-mobile { display: block; } } .text-center-mobile { text-align: left; } @media (max-width: 767px) { .text-center-mobile { text-align: center; } } img { max-width: 100%; height: auto; } .navbar-right .icon.heart { width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 4px; position: relative; } .navbar-right .icon.heart:hover { background: transparent !important; box-shadow: none !important; transform: none !important; } .navbar-right .icon.heart svg { width: 17px !important; height: 17px !important; stroke: #8a1d1a !important; } .navbar-right .icon.heart .wishlist-text { display: block; font-size: 11px; line-height: 1; font-weight: 600; color: #8a1d1a; } .navbar-right .icon.heart .badge { display: none; position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; border-radius: 999px; background: #b91c1c; color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; padding: 0 4px; } @media (max-width: 768px) { .navbar-right .icon.heart .wishlist-text { display: none; } } @media (max-width: 767px) { table { display: block; overflow-x: auto; white-space: nowrap; } } iframe { max-width: 100%; } img, video, canvas, svg, picture { max-width: 100%; height: auto; display: block; } html, body { overflow-x: hidden; max-width: 100vw; } @media (max-width: 1200px) { html { font-size: 16px; } } @media (max-width: 768px) { html { font-size: 15px; } } @media (max-width: 480px) { html { font-size: 14px; } } @media (max-width: 768px) { a, button, input[type="submit"], input[type="button"], .btn, .card-icon, .icon { min-width: 44px; min-height: 44px; } .navbar-right .icon { margin: 0 4px; } input, select, textarea { min-height: 44px; font-size: 16px; } } .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px; } @media (max-width: 768px) { .container { padding: 0 16px; } } @media (max-width: 480px) { .container { padding: 0 12px; } } @media (max-width: 1200px) { .card-row { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } } @media (max-width: 768px) { .card-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } } @media (max-width: 480px) { .card-row { grid-template-columns: 1fr; gap: 16px; } .card { max-width: 100%; } } .text-responsive-sm { font-size: clamp(0.875rem, 2vw, 1rem); } .text-responsive-md { font-size: clamp(1rem, 2.5vw, 1.25rem); } .text-responsive-lg { font-size: clamp(1.5rem, 4vw, 2.5rem); } .price, .price-row, .product-price, .product-price-row, .product-price-label, .inquiry-product-price, .wishlist-item-price, [class*="price"], [class*="Price"] { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; } .sidebar-slider, .sidebar-range, .price-filter, [class*="price-filter"] { display: none !important; } .card-content > div:has(.price), .card-content .price-row { display: none !important; } :root { --primary-gradient: linear-gradient(135deg, #17635b 0%, #22514a 100%); --primary-dark: #17635b; --primary-light: #22514a; --accent-gold: #cfa600; --accent-red: #e74c3c; --white: #ffffff; --off-white: #f8fbfa; --gray-light: #f3f7f6; --gray-medium: #bfd6d2; --gray-dark: #7c7b8a; --text-primary: #222; --text-secondary: #555; --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px; --spacing-lg: 32px; --spacing-xl: 48px; --spacing-2xl: 64px; --spacing-3xl: 80px; --font-primary: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15); --shadow-glow: 0 0 20px rgba(23, 99, 91, 0.3); --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-primary); background: #f8fbfa;\r\n color: var(--text-primary); line-height: 1.6; min-height: 100vh; overflow-x: hidden; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; } .zoom-pill-btn { display: flex; align-items: center; gap: 12px; background: rgba(35, 34, 31, 0.88); color: var(--white); border: none; border-radius: var(--radius-full); padding: 0 32px; height: 48px; font-size: 1.18rem; font-weight: var(--font-weight-semibold); box-shadow: var(--shadow-md); cursor: pointer; transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); letter-spacing: 0.01em; } .zoom-pill-btn:hover { background: rgba(35, 34, 31, 1); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .icon-btn { background: rgba(35, 34, 31, 0.88); border: none; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); cursor: pointer; transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .icon-btn:hover { background: rgba(35, 34, 31, 1); box-shadow: var(--shadow-lg); transform: translateY(-2px) scale(1.05); } .icon-btn svg, .zoom-pill-btn svg { width: 24px; height: 24px; display: block; stroke: var(--white); } .card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); width: 100%; min-width: 0; max-width: 100%; overflow: hidden; position: relative; display: flex; flex-direction: column; transition: transform var(--transition-base), box-shadow var(--transition-base); margin-bottom: 0; will-change: transform; } .card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 135deg, rgba(23, 99, 91, 0.05) 0%, rgba(34, 81, 74, 0.05) 100% ); opacity: 0; transition: opacity var(--transition-base); pointer-events: none; z-index: 1; } .card:hover::before { opacity: 1; } .card-img-wrap { position: relative; width: 100%; height: 220px; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .card-img-wrap img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform var(--transition-slow); will-change: transform; } .card:hover .card-img-wrap img { transform: scale(1.1); } .card-badge.new { position: absolute; top: 16px; left: 16px; background: #17635b; color: #fff; font-size: 1rem; font-weight: 700; padding: 4px 16px; border-radius: 12px; z-index: 2; letter-spacing: 1px; box-shadow: 0 2px 8px #0001; display: flex; align-items: center; justify-content: center; min-width: 60px; min-height: 32px; visibility: visible; } .card-badge.new:empty { display: none !important; visibility: hidden !important; } .card-badge.discount { position: absolute; top: 48px; left: 16px; background: #17635b; } .card-icons { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 2; } .card-icon { background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(23, 99, 91, 0.1); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.18s, box-shadow 0.18s; border: 1.5px solid #e0e0e0; } .card-icon:hover { background: #f3f7f6; box-shadow: 0 4px 16px rgba(23, 99, 91, 0.16); } .card-content { padding: 18px 18px 16px 18px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; } .card-content h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; color: #222; margin-top: 0; } .category { color: #17635b; font-size: 0.95rem; margin-bottom: 6px; font-weight: 600; } .stars { color: #f7b731; font-size: 1rem; margin-bottom: 8px; } .stars span { color: #888; font-size: 0.95rem; margin-left: 4px; } .price-row { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 600; } .price { color: #17635b; } .old-price { color: #aaa; text-decoration: line-through; font-size: 1rem; font-weight: 400; } .card-img-title { display: none; } .sidebar-filter { background: #fff; border-radius: 24px; box-shadow: 0 4px 24px #0001; padding: 32px 28px; min-width: 300px; max-width: 340px; display: flex; flex-direction: column; gap: 0; } .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .sidebar-header span { font-size: 2rem; font-weight: 800; color: #22514a; } .sidebar-reset { color: #7c3aed; font-weight: 600; font-size: 1.08rem; text-decoration: none; cursor: pointer; } .sidebar-section { margin-bottom: 24px; } .sidebar-label { font-size: 1.08rem; color: #444; font-weight: 600; margin-bottom: 8px; } .sidebar-range { font-size: 1.08rem; color: #22514a; font-weight: 700; margin-bottom: 8px; } .sidebar-slider { width: 100%; margin-bottom: 10px; accent-color: #7c3aed; } .sidebar-btn-row { display: flex; gap: 12px; margin-bottom: 8px; } .sidebar-apply { background: #7c3aed; color: #fff; border: none; border-radius: 8px; padding: 8px 32px; font-weight: 700; font-size: 1.1rem; cursor: pointer; } .sidebar-reset-btn { background: none; color: #7c3aed; border: none; font-weight: 600; font-size: 1.1rem; cursor: pointer; } .sidebar-divider { border: none; border-top: 1.5px solid #f0f0f0; margin: 18px 0; } .sidebar-checkboxes { display: flex; flex-direction: column; gap: 8px; } .sidebar-checkboxes label { font-size: 1.08rem; color: #444; font-weight: 500; } .sidebar-checkboxes input[type="checkbox"] { margin-right: 8px; accent-color: #7c3aed; } .products-section { flex: 1; } .products-title { font-size: 2.6rem; font-weight: 800; color: #22514a; margin-bottom: 32px; } .card-img-wrap { position: relative; } .card-img-title { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; color: #1a2c2b; font-weight: 700; font-size: 1.13rem; padding: 10px 18px 8px 18px; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; box-shadow: 0 2px 8px #0001; text-align: left; } .card-link a, .card-link a:visited, .card-link a:active, .card-link a:hover, .card-link * a, .card-link * a:visited, .card-link * a:active, .card-link * a:hover { text-decoration: none !important; color: inherit !important; box-shadow: none !important; border-bottom: none !important; outline: none !important; } .card-link a, .card-link a:visited, .card-link a:active, .card-link a:hover { text-decoration: none !important; color: inherit !important; } .card-link * { text-decoration: none !important; } .card-icons { position: absolute; top: 16px; right: 16px; display: flex; gap: 12px; z-index: 2; } .card-icon { background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(23, 99, 91, 0.1); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.18s, box-shadow 0.18s; border: 1.5px solid #e0e0e0; } .card-icon:hover { background: #f3f7f6; box-shadow: 0 4px 16px rgba(23, 99, 91, 0.16); } .card-icon.view svg { display: block; width: 14px; height: 14px; width: 18px !important; height: 18px !important; } .card-icon.wishlist svg { display: block; width: 14px; height: 14px; width: 18px !important; height: 18px !important; } .products-btn { background: transparent; color: #22514a; border: 3px solid transparent; border-radius: 12px; font-weight: 600; font-size: 1.15rem; padding: 6px 32px; box-shadow: none; position: relative; z-index: 2; transition: background 0.18s, color 0.18s, border 0.18s; } .products-btn:focus, .products-btn:hover { background: #f3f7f6; border-color: #17635b; color: #17635b; } .products-active > .products-btn { background: transparent; color: #22514a; border: 3px solid #22514a; box-shadow: none; } .navbar-right .icon { display: inline-flex; align-items: center; justify-content: center; position: relative; margin-left: 18px; font-size: 1.3rem; cursor: pointer; } .navbar-right .icon.heart { position: relative; } .navbar-right .icon.heart .badge { display: none; background: #e74c3c; color: #fff; border-radius: 50%; font-size: 0.8rem; padding: 2px 7px; position: absolute; top: -10px; right: -12px; font-weight: 700; box-shadow: 0 2px 8px rgba(231, 76, 60, 0.15); } .navbar-right .icon.search svg, .navbar-right .icon.heart svg, .navbar-right .icon.menu svg { display: block; } .navbar-right .phone svg { vertical-align: middle; margin-right: 4px; } .navbar-right .phone { color: #e74c3c; font-weight: 600; font-size: 1.08rem; display: flex; align-items: center; margin-right: 12px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Segoe UI", Arial, sans-serif; background: #f8fbfa;\r\n color: #222;\r\n min-height: 100vh;\r\n margin: 0; } html, body { overflow-x: hidden; } .products-main { max-width: 100vw; overflow-x: hidden; margin-left: 0; padding-left: 0; } .card-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 40px; overflow-x: visible !important; } .navbar { position: sticky; top: var(--spacing-md); z-index: var(--z-sticky); padding: 0 var(--spacing-lg); margin: 0 auto; max-width: 1400px; } .navbar-inner { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border-radius: 60px; padding: var(--spacing-xs) var(--spacing-lg); box-shadow: 0 8px 32px rgba(23, 99, 91, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg); transition: all var(--transition-base); position: relative; } .navbar.scrolled .navbar-inner { background: rgba(255, 255, 255, 0.9); box-shadow: 0 12px 48px rgba(23, 99, 91, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08); } .navbar .logo { display: flex; align-items: center; gap: var(--spacing-sm); text-decoration: none; transition: transform var(--transition-fast); white-space: nowrap; z-index: 1001; } .navbar .logo:hover { transform: scale(1.03); } .navbar .logo img { height: 52px; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12)); transition: filter var(--transition-base); } .navbar .logo:hover img { filter: drop-shadow(0 4px 12px rgba(23, 99, 91, 0.3)); } .navbar .logo-text { font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.3rem; font-weight: 700; background: linear-gradient(135deg, var(--primary-dark) 0%, #0d4540 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.5px; } .navbar .navbar-left { flex: 1; display: flex; justify-content: center; } .navbar .navbar-left nav ul { display: flex; gap: var(--spacing-xs); list-style: none; margin: 0; padding: 0; align-items: center; } .navbar .navbar-left nav ul li { position: relative; } .navbar .navbar-left nav ul li a { font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-decoration: none; color: #4a5568; font-size: 1rem; font-weight: 500; padding: 12px 24px; display: inline-flex; align-items: center; gap: 6px; border-radius: 50px; position: relative; transition: all var(--transition-base); white-space: nowrap; min-height: 44px; min-width: 44px; justify-content: center; } .navbar .navbar-left nav ul li a:hover { color: var(--primary-dark); background: rgba(23, 99, 91, 0.08); transform: translateY(-2px); } .navbar .navbar-left nav ul li a.active { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); color: var(--white); font-weight: 600; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35), 0 2px 8px rgba(109, 40, 217, 0.25); } .navbar .navbar-left nav ul li a.active:hover { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); transform: translateY(-3px); box-shadow: 0 6px 24px rgba(139, 92, 246, 0.45), 0 3px 12px rgba(109, 40, 217, 0.35); } .navbar .dropdown-caret { display: inline-block; margin-left: 4px; font-size: 0.75rem; transition: transform var(--transition-fast); } .navbar .dropdown:hover .dropdown-caret { transform: rotate(180deg); } .navbar .dropdown { position: relative; } .navbar .dropdown::after { content: ''; position: absolute; top: 100%; left: -10%; width: 120%; height: 14px; background: transparent; z-index: 999; } .navbar .mega-menu-container { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%) translateY(-6px); opacity: 0; visibility: hidden; transition: all var(--transition-base); z-index: 1000; pointer-events: none; } .navbar .dropdown:hover .mega-menu-container { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: all; } .navbar .dropdown.open .mega-menu-container { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: all; } .navbar .mega-menu { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border-radius: 24px; padding: var(--spacing-lg); box-shadow: 0 20px 60px rgba(23, 99, 91, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.6); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--spacing-lg); min-width: 850px; max-width: 1000px; } .navbar .mega-col { padding: var(--spacing-sm); } .navbar .mega-title { font-weight: 700; font-size: 1.25rem; color: #22514a; margin-bottom: var(--spacing-xs); letter-spacing: 0.3px; } .navbar .category-toggle { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; padding: 8px 0; transition: all 0.3s ease; } .navbar .category-toggle:hover { color: #7c3aed; } .navbar .category-caret { font-size: 0.65rem; transition: transform 0.3s ease; color: #7c3aed; } .navbar .mega-col.category-active .category-caret { transform: rotate(180deg); } .navbar .mega-bar { width: 40px; height: 3px; background: linear-gradient(90deg, #8b5cf6, #6d28d9); border-radius: var(--radius-full); margin-bottom: var(--spacing-sm); display: none; opacity: 0; transition: opacity 0.3s ease; } .navbar .mega-col.category-active .mega-bar { display: block; opacity: 1; } .navbar .mega-menu .submenu { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease; } .navbar .mega-col.category-active .submenu { max-height: 500px; opacity: 1; } .navbar .mega-menu .submenu li { margin-bottom: 8px; } .navbar .mega-menu .submenu li a { font-family: "Poppins", sans-serif; color: #5a6c7d; font-size: 0.9rem; font-weight: 400; text-decoration: none; padding: 8px 12px; display: block; border-radius: 12px; transition: all var(--transition-fast); } .navbar .mega-menu .submenu li a:hover { background: rgba(139, 92, 246, 0.1); color: #6d28d9; transform: translateX(4px); padding-left: 16px; } .navbar-right { display: flex; align-items: center; gap: var(--spacing-sm); } .navbar-right .icon { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgba(23, 99, 91, 0.06); cursor: pointer; transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base); } .navbar-right .icon:hover { background: rgba(23, 99, 91, 0.12); transform: translateY(-3px) scale(1.08); box-shadow: 0 8px 20px rgba(23, 99, 91, 0.2); } .navbar-right .icon.heart { position: relative; } .navbar-right .icon.heart .badge { display: none; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: var(--white); border-radius: var(--radius-full); font-size: 0.7rem; padding: 3px 7px; position: absolute; top: -4px; right: -4px; font-weight: var(--font-weight-bold); box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4); animation: pulse 2s infinite; border: 2px solid white; } .navbar-right .icon svg { width: 22px; height: 22px; stroke: var(--primary-dark); stroke-width: 2; transition: stroke var(--transition-fast); } .navbar-right .icon:hover svg { stroke: #6d28d9; } .hamburger-icon { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; padding: 10px; background: rgba(23, 99, 91, 0.08); border-radius: 12px; transition: all var(--transition-base); min-width: 44px; min-height: 44px; z-index: 1001; } .hamburger-icon:hover { background: rgba(23, 99, 91, 0.15); transform: scale(1.05); } .hamburger-icon:active { transform: scale(0.95); } .hamburger-icon span { width: 24px; height: 3px; background: var(--primary-dark); border-radius: 2px; transition: all var(--transition-base); display: block; } .hamburger-icon.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); } .hamburger-icon.active span:nth-child(2) { opacity: 0; transform: translateX(20px); } .hamburger-icon.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } @media (max-width: 1200px) { .navbar .mega-menu { min-width: 700px; grid-template-columns: repeat(3, 1fr); } .navbar .logo-text { font-size: 1.1rem; } .navbar .navbar-left nav ul { gap: 4px; } .navbar .navbar-left nav ul li a { font-size: 0.95rem; padding: 10px 18px; } } @media (max-width: 992px) { .navbar { top: var(--spacing-sm); padding: 0 var(--spacing-md); } .navbar-inner { padding: var(--spacing-xs) var(--spacing-md); } .navbar .logo-text { display: none; } .navbar .mega-menu { min-width: 600px; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 769px) { .navbar .dropdown.open .mega-menu .submenu, .navbar .dropdown:hover .mega-menu .submenu { max-height: none; opacity: 1; overflow: visible; } .navbar .category-toggle { cursor: default; pointer-events: none; } .navbar .category-caret { display: none; } .navbar .mega-bar { display: block; opacity: 1; } } @media (max-width: 768px) { .navbar { top: var(--spacing-xs); padding: 0 12px; z-index: 3100 !important; } .navbar-inner { padding: 8px 12px; border-radius: 40px; gap: 12px; position: relative; z-index: 3101 !important; } .navbar .logo img { height: 40px; } .navbar .logo-text { display: none; } .hamburger-icon { display: flex !important; z-index: 3102 !important; } body.menu-open::before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 3050 !important; animation: fadeInBackdrop 0.3s ease forwards; } @keyframes fadeInBackdrop { from { opacity: 0; } to { opacity: 1; } } .navbar .navbar-left { display: flex !important; position: fixed; top: 0; right: 0; width: 100%; max-width: 340px; height: 100vh; height: 100dvh; background: #ffffff; flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 75px 16px 20px; transform: translateX(110%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease; z-index: 3100 !important; box-shadow: -10px 0 50px rgba(0, 0, 0, 0.15); overflow: hidden; visibility: visible; pointer-events: none; } .navbar .navbar-left.mobile-menu-open { transform: translateX(0); box-shadow: -15px 0 60px rgba(0, 0, 0, 0.2); pointer-events: auto; overflow: hidden; border-radius: 0; } .mobile-menu-close { display: none; position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; align-items: center; justify-content: center; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 50%; cursor: pointer; z-index: 10; transition: all 0.3s ease; } .mobile-menu-header { display: none; } @media (max-width: 768px) { .mobile-menu-close { display: flex; } .mobile-menu-close:hover { background: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.4); transform: rotate(90deg); } .mobile-menu-close:active { transform: rotate(90deg) scale(0.9); } .mobile-menu-close svg { color: #6d28d9; } .mobile-menu-header { display: block; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid rgba(139, 92, 246, 0.15); } .mobile-menu-header h3 { margin: 0; font-size: 1.4rem; font-weight: 700; color: #1a202c; letter-spacing: -0.5px; } .navbar .dropdown .mega-menu { max-height: 0 !important; opacity: 0 !important; visibility: hidden !important; padding: 0 !important; overflow: hidden !important; display: block !important; } .navbar .dropdown.mobile-dropdown-open .mega-menu { max-height: 800px !important; opacity: 1 !important; visibility: visible !important; padding: 14px 10px !important; overflow-y: auto !important; overflow-x: hidden !important; display: block !important; } } .navbar .navbar-left nav { display: flex !important; flex-direction: column; width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; padding-right: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(139, 92, 246, 0.3) transparent; } .navbar .navbar-left nav::-webkit-scrollbar { width: 4px; } .navbar .navbar-left nav::-webkit-scrollbar-track { background: transparent; } .navbar .navbar-left nav::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.3); border-radius: 4px; } .navbar .navbar-left nav ul { display: flex !important; flex-direction: column; gap: 6px; padding: 0; margin: 0; width: 100%; list-style: none; box-sizing: border-box; } .navbar .navbar-left nav ul li { display: block !important; width: 100%; opacity: 0; transform: translateX(30px); transition: opacity 0.01s, transform 0.01s; } .navbar .navbar-left nav ul li.dropdown { opacity: 0; transform: translateX(30px); } .navbar .mega-menu-container, .navbar .mega-menu, .navbar .mega-col, .navbar .category-toggle { animation: none !important; } .navbar .mega-menu .submenu li { animation: none !important; } .navbar .navbar-left.mobile-menu-open nav ul li { animation: slideInRight 0.4s ease forwards; } .navbar .navbar-left.mobile-menu-open nav ul li:nth-child(1) { animation-delay: 0.1s; } .navbar .navbar-left.mobile-menu-open nav ul li:nth-child(2) { animation-delay: 0.15s; } .navbar .navbar-left.mobile-menu-open nav ul li:nth-child(3) { animation-delay: 0.2s; } .navbar .navbar-left.mobile-menu-open nav ul li:nth-child(4) { animation-delay: 0.25s; } .navbar .navbar-left.mobile-menu-open nav ul li:nth-child(5) { animation-delay: 0.3s; } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } .navbar .navbar-left nav ul li a { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; font-size: 0.95rem; font-weight: 600; padding: 14px 16px; border-radius: 10px; min-height: 50px; background: transparent; border: 1px solid transparent; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); color: #1a202c; position: relative; text-decoration: none; } .navbar .navbar-left nav ul li a:hover { background: rgba(139, 92, 246, 0.08); border-color: rgba(139, 92, 246, 0.2); color: #7c3aed; transform: translateX(2px); } .navbar .navbar-left nav ul li a.active { background: linear-gradient( 135deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.15) 100% ); border-color: rgba(139, 92, 246, 0.35); color: #7c3aed; font-weight: 700; } .navbar .dropdown { position: relative; } .navbar .dropdown .mega-menu-container { position: relative; width: 100%; margin: 4px 0 0 0; padding: 0; } .navbar .mega-menu { width: 100%; max-width: 100%; display: block; max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease; padding: 0; margin: 0; box-shadow: none; background: #ffffff; border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 8px; opacity: 0; visibility: hidden; box-sizing: border-box; } .navbar .dropdown.mobile-dropdown-open .mega-menu { max-height: 800px; padding: 14px 10px; opacity: 1; visibility: visible; overflow-y: auto; overflow-x: hidden; display: block; } .navbar .mega-col { padding: 10px 8px; margin-bottom: 4px; } .navbar .mega-col:first-child { padding-top: 4px; } .navbar .mega-col:last-child { margin-bottom: 0; padding-bottom: 4px; } .navbar .category-toggle { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 16px; background: rgba(139, 92, 246, 0.1); border-radius: 8px; transition: all 0.2s ease; border: 1px solid rgba(139, 92, 246, 0.15); margin-bottom: 0; min-height: 48px; } .navbar .category-toggle:hover { background: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.3); } .navbar .category-toggle:active { background: rgba(139, 92, 246, 0.2); transform: scale(0.98); } .navbar .category-toggle span:first-child { flex: 1; font-size: 0.88rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #7c3aed; } .navbar .category-caret { font-size: 0.7rem; transition: transform 0.3s ease; color: #7c3aed; margin-left: 10px; flex-shrink: 0; font-weight: bold; } .navbar .mega-col.category-active .category-caret { transform: rotate(180deg); } .navbar .mega-col.category-active .category-toggle { background: rgba(139, 92, 246, 0.18); border-color: rgba(139, 92, 246, 0.4); } .navbar .mega-bar { display: none; } .navbar .mega-menu .submenu { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease, visibility 0.4s; padding-left: 0; } .navbar .mega-col.category-active .submenu { max-height: 600px; opacity: 1; visibility: visible; margin-top: 12px; padding-left: 8px; } .navbar .mega-menu .submenu li { margin-bottom: 4px; } .navbar .mega-menu .submenu li:last-child { margin-bottom: 0; } .navbar .mega-menu .submenu li a { display: block; padding: 11px 14px; font-size: 0.9rem; font-weight: 500; border-radius: 6px; background: transparent; color: #475569; transition: all 0.2s ease; border: 1px solid transparent; text-decoration: none; } .navbar .mega-menu .submenu li a:hover { background: rgba(139, 92, 246, 0.1); color: #7c3aed; border-color: rgba(139, 92, 246, 0.2); transform: translateX(4px); } .navbar .dropdown-caret { font-size: 0.7rem; opacity: 0.7; transition: transform 0.3s ease, opacity 0.3s ease; } .navbar .dropdown.mobile-dropdown-open .dropdown-caret { transform: rotate(180deg); opacity: 1; } .navbar-right { gap: 8px; } .navbar-right .icon { width: 44px; height: 44px; } .navbar-right .icon svg { width: 20px; height: 20px; } } @media (max-width: 480px) { .navbar-inner { padding: 6px 10px; gap: 8px; } .navbar .logo img { height: 36px; } .navbar .navbar-left { width: 100%; max-width: 90vw; padding: 70px 12px 16px; } .navbar .navbar-left nav ul li a { font-size: 0.9rem; padding: 12px 14px; min-height: 48px; } .navbar .category-toggle { padding: 9px 11px; font-size: 0.78rem; } .navbar .category-toggle span:first-child { font-size: 0.78rem; } .navbar .category-caret { font-size: 0.6rem; } .navbar .mega-menu .submenu li a { font-size: 0.82rem; padding: 7px 10px; } .mobile-menu-header h3 { font-size: 1.3rem; } .navbar-right { gap: 6px; } .navbar-right .icon { width: 40px; height: 40px; } .navbar-right .icon svg { width: 18px; height: 18px; } .navbar-right .icon.heart .badge { display: none; font-size: 0.65rem; padding: 2px 6px; } .hero { min-height: 350px; padding: 40px 16px !important; } .hero h1 { font-size: 1.8rem; line-height: 1.3; } .hero .subtitle { font-size: 0.85rem; } .hero .desc { font-size: 0.9rem; line-height: 1.5; } .hero-buttons { flex-direction: column; gap: 12px; align-items: stretch; } .hero-buttons .btn { width: 100%; text-align: center; } .navbar-right .icon svg { width: 18px; height: 18px; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-md); font-weight: var(--font-weight-semibold); font-size: 1rem; cursor: pointer; transition: all var(--transition-base); border: none; position: relative; overflow: hidden; text-decoration: none; min-height: 44px; min-width: 44px; } .btn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .btn:hover::before { width: 300px; height: 300px; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--primary-gradient); color: var(--white); box-shadow: var(--shadow-md); } .btn-primary:hover { box-shadow: var(--shadow-lg), var(--shadow-glow); transform: translateY(-2px) scale(1.02); } .btn-secondary { background: transparent; color: var(--primary-dark); border: 2px solid var(--primary-dark); } .btn-secondary:hover { background: var(--primary-dark); color: var(--white); transform: translateY(-2px) scale(1.02); } .btn-outline { background: transparent; color: var(--primary-dark); border: 2px solid var(--primary-dark); text-decoration: none; } .btn-outline:hover { background: var(--primary-dark); color: var(--white); transform: translateY(-2px) scale(1.02); } .btn-accent { background: linear-gradient(135deg, var(--accent-gold), #b89500); color: var(--white); box-shadow: var(--shadow-md); } .btn-accent:hover { box-shadow: var(--shadow-lg), 0 0 20px rgba(207, 166, 0, 0.4); transform: translateY(-2px) scale(1.02); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .animate-fadeInUp { animation: fadeInUp 0.6s ease forwards; } .animate-fadeIn { animation: fadeIn 0.6s ease forwards; } .animate-slideInRight { animation: slideInRight 0.6s ease forwards; } .animate-scaleIn { animation: scaleIn 0.6s ease forwards; } .animate-delay-1 { animation-delay: 0.1s; } .animate-delay-2 { animation-delay: 0.2s; } .animate-delay-3 { animation-delay: 0.3s; } .animate-delay-4 { animation-delay: 0.4s; } .animate-delay-5 { animation-delay: 0.5s; } @media (max-width: 768px) { .navbar .navbar-left { display: none; } .navbar .logo { display: none; } .hamburger-icon { display: flex !important; } .navbar-right { right: 16px; top: 10px; gap: 10px; } .navbar { padding: 12px 0; } } @media (max-width: 420px) { .navbar-right { gap: 8px; right: 10px; } .hamburger-icon { left: 10px; } } .hero { position: relative; padding: 100px 60px; background: radial-gradient(circle at 70% 10%, #f8fbfa 60%, #f3f7f6 100%); min-height: 500px; width: 100vw; max-width: 100vw; box-sizing: border-box; overflow: hidden; } .hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 135deg, rgba(23, 99, 91, 0.05) 0%, transparent 100% ); z-index: 1; } .hero > * { position: relative; z-index: 2; } .hero .subtitle { color: var(--primary-dark); font-weight: var(--font-weight-bold); letter-spacing: 3px; font-size: 0.95rem; margin-bottom: var(--spacing-md); text-transform: uppercase; opacity: 0.9; } .hero h1 { font-size: 3.5rem; font-weight: var(--font-weight-black); margin-bottom: var(--spacing-lg); color: var(--text-dark); line-height: 1.1; background: linear-gradient( 135deg, var(--primary-dark) 0%, var(--primary-light) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero .desc { font-size: 1.2rem; color: var(--text-light); margin-bottom: var(--spacing-2xl); max-width: 650px; line-height: 1.7; } .hero-buttons { display: flex; gap: var(--spacing-md); flex-wrap: wrap; } @media (max-width: 1024px) { .hero { padding: 80px 50px; min-height: 450px; } .hero h1 { font-size: 3rem; } } @media (max-width: 768px) { .hero { padding: 60px 30px; min-height: 400px; } .hero h1 { font-size: 2.5rem; } .hero .desc { font-size: 1.1rem; } } @media (max-width: 480px) { .hero { padding: 50px 20px; min-height: 380px; } .hero h1 { font-size: 2rem; } .hero .desc { font-size: 1rem; margin-bottom: var(--spacing-lg); } .hero-buttons { flex-direction: column; gap: var(--spacing-sm); } .hero-buttons .btn { width: 100%; justify-content: center; } } .btn-outline { background: transparent; color: var(--primary-dark); border: 2px solid var(--primary-dark); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-md); font-size: 1rem; font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--transition-base); display: inline-flex; align-items: center; gap: var(--spacing-xs); text-decoration: none; } .btn-outline:hover { background: var(--primary-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .form-group { position: relative; margin-bottom: var(--spacing-lg); } .form-input, .form-textarea, .form-select { width: 100%; padding: var(--spacing-md) var(--spacing-sm); border: 2px solid var(--neutral-light); border-radius: var(--radius-md); font-size: 1rem; font-family: inherit; transition: all var(--transition-base); background: var(--white); color: var(--text-dark); outline: none; } .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--primary-dark); box-shadow: 0 0 0 4px rgba(23, 99, 91, 0.1), var(--shadow-glow); transform: translateY(-2px); } .form-input::placeholder, .form-textarea::placeholder { color: var(--neutral-medium); opacity: 0.7; } .form-label { position: absolute; top: var(--spacing-md); left: var(--spacing-sm); padding: 0 var(--spacing-xs); background: var(--white); color: var(--neutral-medium); font-size: 1rem; transition: all var(--transition-fast); pointer-events: none; } .form-input:focus + .form-label, .form-input:not(:placeholder-shown) + .form-label, .form-textarea:focus + .form-label, .form-textarea:not(:placeholder-shown) + .form-label { top: -10px; left: var(--spacing-sm); font-size: 0.85rem; color: var(--primary-dark); font-weight: var(--font-weight-semibold); } .form-textarea { min-height: 120px; resize: vertical; } .form-error { color: var(--accent-red); font-size: 0.875rem; margin-top: var(--spacing-xs); display: none; } .form-input.error, .form-textarea.error { border-color: var(--accent-red); } .form-input.error + .form-error, .form-textarea.error + .form-error { display: block; } .section { margin: 60px 0 0 0; padding: 0 40px; width: 100vw; max-width: 100vw; box-sizing: border-box; } .section-title { font-size: 2.2rem; font-weight: 700; text-align: center; margin-bottom: 6px; color: #222; } .section-desc { text-align: center; color: #666; margin-bottom: 32px; font-size: 1.1rem; } .card-row { display: flex; gap: 32px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; } .card { background: #fff; border-radius: 18px; box-shadow: 0 2px 12px rgba(23, 99, 91, 0.06); width: 300px; height: 400px; overflow: hidden; position: relative; margin-bottom: 18px; transition: transform 0.15s, box-shadow 0.15s; display: flex; flex-direction: column; } .card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 6px 24px rgba(23, 99, 91, 0.13); } .card img { width: 100%; height: 240px; object-fit: cover; display: block; } .card-content { padding: 18px 16px 16px 16px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; } .card-content h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; color: #222; } .card-content .category { color: #17635b; font-size: 0.95rem; margin-bottom: 6px; } .stars { color: #f7b731; font-size: 1rem; margin-bottom: 8px; } .stars span { color: #888; font-size: 0.95rem; margin-left: 4px; } .price-row { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 600; } .price { color: #17635b; } .old-price { color: #aaa; text-decoration: line-through; font-size: 1rem; font-weight: 400; } .card-badge { position: absolute; top: 14px; left: 14px; background: #17635b; color: #fff; font-size: 0.85rem; font-weight: 600; padding: 4px 12px; border-radius: 12px; z-index: 2; letter-spacing: 1px; } .card-badge.discount { top: 44px; left: 14px; background: #17635b; } .center-btn { display: flex; justify-content: center; margin: 18px 0 0 0; } .btn-secondary { background: #e6b800; color: #fff; border: none; padding: 14px 32px; border-radius: 12px; font-size: 1.1rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(230, 184, 0, 0.08); transition: background 0.2s; } .btn-secondary:hover { background: #cfa600; } .footer { background: linear-gradient(135deg, #17635b 0%, #22514a 100%); color: #fff; padding: 60px 0 0 0; margin-top: 80px; } .footer-container { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 40px; } .footer-column h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 20px; color: #fff; } .footer-logo { max-width: 120px; height: auto; margin-bottom: 16px; } .footer-tagline { font-size: 1rem; color: #bfd6d2; margin-bottom: 20px; line-height: 1.6; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 12px; } .footer-links a { color: #bfd6d2; text-decoration: none; font-size: 1rem; transition: color 0.3s ease; } .footer-links a:hover { color: #fff; } .footer-contact-item { display: flex; align-items: flex-start; margin-bottom: 16px; color: #bfd6d2; font-size: 0.95rem; line-height: 1.6; } .footer-contact-item a { color: #bfd6d2; text-decoration: none; transition: color 0.3s ease; } .footer-contact-item a:hover { color: #fff; } .footer-social { display: flex; gap: 16px; margin-top: 20px; } .footer-social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; transition: all 0.3s ease; } .footer-social a:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-3px); } .footer-social svg { width: 20px; height: 20px; fill: #fff; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 24px 0; text-align: center; } .footer-bottom p { color: #781f1b; font-size: 0.9rem; margin: 0; } @media (max-width: 968px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } } @media (max-width: 768px) { .footer-container { padding: 0 20px; } } @media (max-width: 576px) { .footer { padding: 40px 0 0 0; margin-top: 60px; } .footer-container { padding: 0 16px; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-column { text-align: center; } .footer-logo { margin-left: auto; margin-right: auto; } .footer-contact-item { justify-content: center; } .footer-social { justify-content: center; } .footer-bottom { padding: 16px 0; text-align: center; } .footer-bottom p { font-size: 0.82rem; line-height: 1.5; word-break: break-word; white-space: normal; } } @media (max-width: 360px) { .footer-container { padding: 0 10px; } .footer-bottom p { font-size: 0.75rem; } } @media (max-width: 1400px) { .card { width: 23vw; min-width: 240px; max-width: 320px; } .card-row { gap: 18px; } .footer { flex-direction: column; gap: 18px; padding: 40px 20px 30px 20px; } .navbar, .hero, .section { padding-left: 20px; padding-right: 20px; } } @media (max-width: 900px) { .card-row { flex-direction: column; align-items: center; } .card { width: 90vw; min-width: 200px; max-width: 100%; } .section { margin-top: 30px; } .footer { padding: 30px 8px 20px 8px; } .navbar, .hero, .section { padding-left: 8px; padding-right: 8px; } } .mega-menu-container { width: 100vw; left: 0; right: 0; position: absolute; top: 60px; z-index: 100; display: flex; justify-content: center; align-items: flex-start; background: none; padding-top: 0; box-sizing: border-box; } .mega-menu { display: none; background: #fff; box-shadow: 0 4px 32px rgba(23, 99, 91, 0.1); border-radius: 18px; padding: 36px 40px 32px 40px; gap: 36px; justify-content: flex-start; align-items: flex-start; width: auto; min-width: 0; max-width: 100vw; margin: 0 auto; overflow-x: auto; white-space: nowrap; box-sizing: border-box; } .dropdown:hover .mega-menu-container .mega-menu, .dropdown:focus-within .mega-menu-container .mega-menu { display: flex; } .mega-col { min-width: 180px; max-width: 220px; display: flex; flex-direction: column; gap: 8px; margin-right: 32px; } .mega-title { font-weight: 700; font-size: 1.25rem; color: #22514a; margin-bottom: 4px; } .mega-bar { width: 80px; height: 4px; background: #17635b; border-radius: 2px; margin-bottom: 10px; opacity: 0.7; } .submenu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .submenu li { margin-bottom: 0; display: block; } .submenu a { color: #22514a; text-decoration: none; font-size: 1.05rem; font-weight: 500; padding: 4px 0; transition: color 0.18s; display: block; margin-bottom: 2px; } .submenu a:hover { color: #17635b; text-decoration: underline; } @media (min-width: 1920px) { .navbar, .hero, .section { max-width: 1920px; margin-left: auto; margin-right: auto; } .card-row { max-width: 1600px; margin: 0 auto; } } @media (max-width: 1400px) { .navbar { padding: 18px 30px; } .card-row { gap: 24px; } .mega-menu { padding: 32px 30px; gap: 28px; } } @media (max-width: 1199px) { .navbar nav ul { gap: 28px; } .navbar nav ul li a { font-size: 1.15rem; } .hero h1 { font-size: 2.5rem; } .card-row { gap: 20px; grid-template-columns: repeat(3, 1fr); } .mega-menu { padding: 28px 24px; gap: 24px; overflow-x: auto; } .mega-col { min-width: 160px; } .product-detail-card { flex-direction: column; padding: 24px; } .product-detail-left, .product-detail-center, .product-detail-right { width: 100%; max-width: 100%; } } @media (max-width: 991px) { .navbar { padding: 16px 20px; flex-wrap: wrap; } .navbar nav { order: 3; width: 100%; margin-top: 12px; } .navbar nav ul { gap: 20px; flex-wrap: wrap; justify-content: center; } .navbar nav ul li a { font-size: 1.1rem; } .hero { min-height: 350px; padding: 40px 20px; } .hero h1 { font-size: 2.2rem; line-height: 1.2; } .hero .desc { font-size: 1rem; } .hero-buttons { flex-direction: column; gap: 12px; } .btn-primary, .btn-outline { width: 100%; max-width: 300px; } .card-row { grid-template-columns: repeat(2, 1fr); gap: 18px; } .section-title { font-size: 2rem; } .dropdown .mega-menu-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); padding: 60px 20px; overflow-y: auto; } .mega-menu { flex-direction: column; width: 100%; max-width: 600px; margin: 0 auto; } .mega-col { max-width: 100%; width: 100%; } .footer > div { flex-direction: column; gap: 32px; } .sidebar-filter { width: 100%; position: static; margin-bottom: 20px; } .products-main { flex-direction: column; } .card-grid { margin-left: 0; } } @media (max-width: 767px) { body { font-size: 14px; } .navbar { padding: 12px 16px; } .navbar nav ul { gap: 12px; font-size: 0.95rem; } .navbar nav ul li a { font-size: 1rem; padding: 4px 0; } .navbar-right { gap: 12px; } .navbar-right svg { width: 24px; height: 24px; } .hero { min-height: 300px; padding: 30px 16px; } .hero h1 { font-size: 1.8rem; } .hero .subtitle { font-size: 0.9rem; } .hero .desc { font-size: 0.95rem; } .section { padding: 32px 16px; margin-top: 24px; } .section-title { font-size: 1.8rem; margin-bottom: 12px; } .section-desc { font-size: 0.95rem; } .card-row { grid-template-columns: repeat(2, 1fr); gap: 14px; } .card { border-radius: 12px; } .card h3 { font-size: 1rem; } .card .category, .card .price { font-size: 0.9rem; } .card-icons { top: 12px; right: 12px; gap: 8px; } .card-icon { width: 32px; height: 32px; } .card-icon svg { width: 18px; height: 18px; } .product-detail-main { padding: 20px 16px; } .product-detail-card { padding: 20px; gap: 20px; } .gallery-main-wrapper { padding: 20px; } .gallery-main { width: 100% !important; height: 300px !important; } .gallery-arrow { width: 36px; height: 36px; } .product-info { padding: 16px; } .product-title { font-size: 1.5rem; } .product-price { font-size: 1.8rem; } .footer { padding: 24px 16px 20px 16px; } .footer h2 { font-size: 1.8rem; } .footer h3 { font-size: 1.2rem; } .footer p { font-size: 1rem; } } @media (max-width: 575px) { body { font-size: 13px; } .navbar { padding: 10px 12px; } .navbar .logo { font-size: 1.3rem; } .navbar nav { display: none; } .navbar-right { gap: 10px; } .navbar-right span, .navbar-right svg { width: 22px; height: 22px; } .menu-toggle { display: block; } .hero { min-height: 280px; padding: 24px 12px; } .hero h1 { font-size: 1.5rem; line-height: 1.3; } .hero .subtitle { font-size: 0.85rem; } .hero .desc { font-size: 0.9rem; line-height: 1.5; } .hero-buttons { flex-direction: column; gap: 10px; align-items: stretch; } .btn-primary, .btn-outline { width: 100%; padding: 12px 20px; font-size: 0.95rem; } .section { padding: 24px 12px; margin-top: 20px; } .section-title { font-size: 1.5rem; margin-bottom: 10px; } .section-desc { font-size: 0.9rem; margin-bottom: 16px; } .card-row { grid-template-columns: 1fr; gap: 16px; } .card { max-width: 100%; border-radius: 10px; } .card h3 { font-size: 0.95rem; } .card .category { font-size: 0.85rem; } .card .price { font-size: 0.9rem; } .card .stars { font-size: 0.9rem; } .card-icons { top: 10px; right: 10px; gap: 6px; } .card-icon { width: 30px; height: 30px; } .mega-menu { padding: 20px 16px; } .product-detail-card { padding: 16px; gap: 16px; border-radius: 16px; } .gallery-main { width: 100% !important; height: 250px !important; } .gallery-thumbs { gap: 8px; } .gallery-thumb { width: 60px !important; height: 60px !important; } .product-title { font-size: 1.3rem; } .product-price { font-size: 1.5rem; } .product-details { padding: 16px; } .color-option { width: 32px; height: 32px; } .footer { padding: 20px 12px 16px 12px; } .footer h2 { font-size: 1.5rem; } .footer h3 { font-size: 1.1rem; } .footer p { font-size: 0.95rem; } .search-modal, .menu-modal { width: 100%; padding: 20px 16px; } .search-modal-title, .menu-title { font-size: 1.5rem; } .search-input { font-size: 1rem; padding: 10px 14px; } .popular-list li { font-size: 1rem; padding: 10px 14px; } } @media (max-width: 374px) { .navbar .logo { font-size: 1.2rem; } .hero h1 { font-size: 1.3rem; } .section-title { font-size: 1.3rem; } .card h3 { font-size: 0.9rem; } .gallery-main { height: 220px !important; } } @media (max-height: 600px) and (orientation: landscape) { .hero { min-height: 250px; padding: 20px 16px; } .hero h1 { font-size: 1.6rem; } .section { padding: 20px 16px; } } @media print { .navbar, .hero-buttons, .card-icons, .footer, .search-modal, .menu-modal, .mega-menu-container { display: none !important; } body { background: white; } .card { box-shadow: none; border: 1px solid #ddd; } } .about-container { max-width: 100%; padding: 20px; } @media (max-width: 991px) { .about-container { flex-direction: column; } .about-text, .about-img { width: 100%; max-width: 100%; } .about-desc { font-size: 1rem; line-height: 1.6; margin-bottom: 16px; } } @media (max-width: 767px) { .about-container { padding: 16px; } .about-title { font-size: 1.8rem; margin-bottom: 16px; } .about-desc { font-size: 0.95rem; line-height: 1.5; } } @media (max-width: 575px) { .about-container { padding: 12px; } .about-title { font-size: 1.5rem; margin-bottom: 12px; } .about-title-bar { margin-bottom: 16px; } .about-desc { font-size: 0.9rem; margin-bottom: 12px; } } @media (max-width: 1199px) { .card-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 991px) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (max-width: 575px) { .card-grid { grid-template-columns: 1fr; gap: 14px; } } @media (max-width: 991px) { .contact-container { flex-direction: column; } .contact-form, .contact-info { width: 100%; max-width: 100%; } } @media (max-width: 575px) { .contact-form input, .contact-form textarea, .contact-form button { font-size: 0.95rem; padding: 10px 14px; } } @media (max-width: 991px) { .product-detail-main { flex-direction: column; padding: 20px; } .product-detail-left, .product-detail-center, .product-detail-right { width: 100%; flex: none; } .gallery-options-bar { padding: 12px 24px; } .zoom-pill-btn { font-size: 1rem; height: 42px; padding: 0 20px; } .icon-btn { width: 40px; height: 40px; } } @media (max-width: 767px) { .wishlist-grid { grid-template-columns: 1fr; } } @media (max-width: 991px) { .why-us-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .why-us-grid { grid-template-columns: 1fr; } } @media (max-width: 575px) { .search-modal, .menu-modal { width: 100vw; right: 0; padding: 20px 16px 0 16px; animation: slideIn 0.25s; } .search-bar { margin: 20px 0 18px 0; } .search-input { padding: 10px 14px; font-size: 0.95rem; } .menu-list li { font-size: 1.1rem; padding: 14px 0; } } .hide-mobile { display: block; } .show-mobile { display: none; } @media (max-width: 767px) { .hide-mobile { display: none; } .show-mobile { display: block; } } .text-center-mobile { text-align: left; } @media (max-width: 767px) { .text-center-mobile { text-align: center; } } img { max-width: 100%; height: auto; } @media (max-width: 767px) { table { display: block; overflow-x: auto; white-space: nowrap; } } iframe { max-width: 100%; } img, video, canvas, svg, picture { max-width: 100%; height: auto; display: block; } html, body { overflow-x: hidden; max-width: 100vw; } @media (max-width: 1200px) { html { font-size: 16px; } } @media (max-width: 768px) { html { font-size: 15px; } } @media (max-width: 480px) { html { font-size: 14px; } } @media (max-width: 768px) { a, button, input[type="submit"], input[type="button"], .btn, .card-icon, .icon { min-width: 44px; min-height: 44px; } .navbar-right .icon { margin: 0 4px; } input, select, textarea { min-height: 44px; font-size: 16px; } } .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px; } @media (max-width: 768px) { .container { padding: 0 16px; } } @media (max-width: 480px) { .container { padding: 0 12px; } } @media (max-width: 1200px) { .card-row { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } } @media (max-width: 768px) { .card-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } } @media (max-width: 480px) { .card-row { grid-template-columns: 1fr; gap: 16px; } .card { max-width: 100%; } } .text-responsive-sm { font-size: clamp(0.875rem, 2vw, 1rem); } .text-responsive-md { font-size: clamp(1rem, 2.5vw, 1.25rem); } .text-responsive-lg { font-size: clamp(1.5rem, 4vw, 2.5rem); } .price, .price-row, .product-price, .product-price-row, .product-price-label, .inquiry-product-price, .wishlist-item-price, [class*="price"], [class*="Price"] { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; } .sidebar-slider, .sidebar-range, .price-filter, [class*="price-filter"] { display: none !important; } .card-content > div:has(.price), .card-content .price-row { display: none !important; } :root { --primary-gradient: linear-gradient(135deg, #17635b 0%, #22514a 100%); --primary-dark: #17635b; --primary-light: #22514a; --accent-gold: #cfa600; --accent-red: #e74c3c; --white: #ffffff; --off-white: #f8fbfa; --gray-light: #f3f7f6; --gray-medium: #bfd6d2; --gray-dark: #7c7b8a; --text-primary: #222; --text-secondary: #555; --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px; --spacing-lg: 32px; --spacing-xl: 48px; --spacing-2xl: 64px; --spacing-3xl: 80px; --font-primary: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15); --shadow-glow: 0 0 20px rgba(23, 99, 91, 0.3); --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-primary); background: #f8fbfa;\r\n color: var(--text-primary); line-height: 1.6; min-height: 100vh; overflow-x: hidden; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; } .zoom-pill-btn { display: flex; align-items: center; gap: 12px; background: rgba(35, 34, 31, 0.88); color: var(--white); border: none; border-radius: var(--radius-full); padding: 0 32px; height: 48px; font-size: 1.18rem; font-weight: var(--font-weight-semibold); box-shadow: var(--shadow-md); cursor: pointer; transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); letter-spacing: 0.01em; } .zoom-pill-btn:hover { background: rgba(35, 34, 31, 1); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .icon-btn { background: rgba(35, 34, 31, 0.88); border: none; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); cursor: pointer; transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .icon-btn:hover { background: rgba(35, 34, 31, 1); box-shadow: var(--shadow-lg); transform: translateY(-2px) scale(1.05); } .icon-btn svg, .zoom-pill-btn svg { width: 24px; height: 24px; display: block; stroke: var(--white); } .card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); width: 100%; min-width: 0; max-width: 100%; overflow: hidden; position: relative; display: flex; flex-direction: column; transition: transform var(--transition-base), box-shadow var(--transition-base); margin-bottom: 0; will-change: transform; } .card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 135deg, rgba(23, 99, 91, 0.05) 0%, rgba(34, 81, 74, 0.05) 100% ); opacity: 0; transition: opacity var(--transition-base); pointer-events: none; z-index: 1; } .card:hover::before { opacity: 1; } .card-img-wrap { position: relative; width: 100%; height: 220px; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .card-img-wrap img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform var(--transition-slow); will-change: transform; } .card:hover .card-img-wrap img { transform: scale(1.1); } .card-badge.new { position: absolute; top: 16px; left: 16px; background: #17635b; color: #fff; font-size: 1rem; font-weight: 700; padding: 4px 16px; border-radius: 12px; z-index: 2; letter-spacing: 1px; box-shadow: 0 2px 8px #0001; display: flex; align-items: center; justify-content: center; min-width: 60px; min-height: 32px; visibility: visible; } .card-badge.new:empty { display: none !important; visibility: hidden !important; } .card-badge.discount { position: absolute; top: 48px; left: 16px; background: #17635b; } .card-icons { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 2; } .card-icon { background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(23, 99, 91, 0.1); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.18s, box-shadow 0.18s; border: 1.5px solid #e0e0e0; } .card-icon:hover { background: #f3f7f6; box-shadow: 0 4px 16px rgba(23, 99, 91, 0.16); } .card-content { padding: 18px 18px 16px 18px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; } .card-content h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; color: #222; margin-top: 0; } .category { color: #17635b; font-size: 0.95rem; margin-bottom: 6px; font-weight: 600; } .stars { color: #f7b731; font-size: 1rem; margin-bottom: 8px; } .stars span { color: #888; font-size: 0.95rem; margin-left: 4px; } .price-row { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 600; } .price { color: #17635b; } .old-price { color: #aaa; text-decoration: line-through; font-size: 1rem; font-weight: 400; } .card-img-title { display: none; } .sidebar-filter { background: #fff; border-radius: 24px; box-shadow: 0 4px 24px #0001; padding: 32px 28px; min-width: 300px; max-width: 340px; display: flex; flex-direction: column; gap: 0; } .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .sidebar-header span { font-size: 2rem; font-weight: 800; color: #22514a; } .sidebar-reset { color: #7c3aed; font-weight: 600; font-size: 1.08rem; text-decoration: none; cursor: pointer; } .sidebar-section { margin-bottom: 24px; } .sidebar-label { font-size: 1.08rem; color: #444; font-weight: 600; margin-bottom: 8px; } .sidebar-range { font-size: 1.08rem; color: #22514a; font-weight: 700; margin-bottom: 8px; } .sidebar-slider { width: 100%; margin-bottom: 10px; accent-color: #7c3aed; } .sidebar-btn-row { display: flex; gap: 12px; margin-bottom: 8px; } .sidebar-apply { background: #7c3aed; color: #fff; border: none; border-radius: 8px; padding: 8px 32px; font-weight: 700; font-size: 1.1rem; cursor: pointer; } .sidebar-reset-btn { background: none; color: #7c3aed; border: none; font-weight: 600; font-size: 1.1rem; cursor: pointer; } .sidebar-divider { border: none; border-top: 1.5px solid #f0f0f0; margin: 18px 0; } .sidebar-checkboxes { display: flex; flex-direction: column; gap: 8px; } .sidebar-checkboxes label { font-size: 1.08rem; color: #444; font-weight: 500; } .sidebar-checkboxes input[type="checkbox"] { margin-right: 8px; accent-color: #7c3aed; } .products-section { flex: 1; } .products-title { font-size: 2.6rem; font-weight: 800; color: #22514a; margin-bottom: 32px; } .card-img-wrap { position: relative; } .card-img-title { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; color: #1a2c2b; font-weight: 700; font-size: 1.13rem; padding: 10px 18px 8px 18px; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; box-shadow: 0 2px 8px #0001; text-align: left; } .card-link a, .card-link a:visited, .card-link a:active, .card-link a:hover, .card-link * a, .card-link * a:visited, .card-link * a:active, .card-link * a:hover { text-decoration: none !important; color: inherit !important; box-shadow: none !important; border-bottom: none !important; outline: none !important; } .card-link a, .card-link a:visited, .card-link a:active, .card-link a:hover { text-decoration: none !important; color: inherit !important; } .card-link * { text-decoration: none !important; } .card-icons { position: absolute; top: 16px; right: 16px; display: flex; gap: 12px; z-index: 2; } .card-icon { background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(23, 99, 91, 0.1); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.18s, box-shadow 0.18s; border: 1.5px solid #e0e0e0; } .card-icon:hover { background: #f3f7f6; box-shadow: 0 4px 16px rgba(23, 99, 91, 0.16); } .card-icon.view svg { display: block; width: 14px; height: 14px; width: 18px !important; height: 18px !important; } .card-icon.wishlist svg { display: block; width: 14px; height: 14px; width: 18px !important; height: 18px !important; } .products-btn { background: transparent; color: #22514a; border: 3px solid transparent; border-radius: 12px; font-weight: 600; font-size: 1.15rem; padding: 6px 32px; box-shadow: none; position: relative; z-index: 2; transition: background 0.18s, color 0.18s, border 0.18s; } .products-btn:focus, .products-btn:hover { background: #f3f7f6; border-color: #17635b; color: #17635b; } .products-active > .products-btn { background: transparent; color: #22514a; border: 3px solid #22514a; box-shadow: none; } .navbar-right .icon { display: inline-flex; align-items: center; justify-content: center; position: relative; margin-left: 18px; font-size: 1.3rem; cursor: pointer; } .navbar-right .icon.heart { position: relative; } .navbar-right .icon.heart .badge { display: none; background: #e74c3c; color: #fff; border-radius: 50%; font-size: 0.8rem; padding: 2px 7px; position: absolute; top: -10px; right: -12px; font-weight: 700; box-shadow: 0 2px 8px rgba(231, 76, 60, 0.15); } .navbar-right .icon.search svg, .navbar-right .icon.heart svg, .navbar-right .icon.menu svg { display: block; } .navbar-right .phone svg { vertical-align: middle; margin-right: 4px; } .navbar-right .phone { color: #e74c3c; font-weight: 600; font-size: 1.08rem; display: flex; align-items: center; margin-right: 12px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Segoe UI", Arial, sans-serif; background: #f8fbfa;\r\n color: #222;\r\n min-height: 100vh;\r\n margin: 0; } html, body { overflow-x: hidden; } .products-main { max-width: 100vw; overflow-x: hidden; margin-left: 0; padding-left: 0; } .card-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 40px; overflow-x: visible !important; } .navbar { position: sticky; top: var(--spacing-md); z-index: var(--z-sticky); padding: 0 var(--spacing-lg); margin: 0 auto; max-width: 1400px; } .navbar-inner { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border-radius: 60px; padding: var(--spacing-xs) var(--spacing-lg); box-shadow: 0 8px 32px rgba(23, 99, 91, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg); transition: all var(--transition-base); position: relative; } .navbar.scrolled .navbar-inner { background: rgba(255, 255, 255, 0.9); box-shadow: 0 12px 48px rgba(23, 99, 91, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08); } .navbar .logo { display: flex; align-items: center; gap: var(--spacing-sm); text-decoration: none; transition: transform var(--transition-fast); white-space: nowrap; z-index: 1001; } .navbar .logo:hover { transform: scale(1.03); } .navbar .logo img { height: 52px; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12)); transition: filter var(--transition-base); } .navbar .logo:hover img { filter: drop-shadow(0 4px 12px rgba(23, 99, 91, 0.3)); } .navbar .logo-text { font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.3rem; font-weight: 700; background: linear-gradient(135deg, var(--primary-dark) 0%, #0d4540 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.5px; } .navbar .navbar-left { flex: 1; display: flex; justify-content: center; } .navbar .navbar-left nav ul { display: flex; gap: var(--spacing-xs); list-style: none; margin: 0; padding: 0; align-items: center; } .navbar .navbar-left nav ul li { position: relative; } .navbar .navbar-left nav ul li a { font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-decoration: none; color: #4a5568; font-size: 1rem; font-weight: 500; padding: 12px 24px; display: inline-flex; align-items: center; gap: 6px; border-radius: 50px; position: relative; transition: all var(--transition-base); white-space: nowrap; min-height: 44px; min-width: 44px; justify-content: center; } .navbar .navbar-left nav ul li a:hover { color: var(--primary-dark); background: rgba(23, 99, 91, 0.08); transform: translateY(-2px); } .navbar .navbar-left nav ul li a.active { background: #f0ebac; color: #5a0e0e; font-weight: 600; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35), 0 2px 8px rgba(109, 40, 217, 0.25); } .navbar .navbar-left nav ul li a.active:hover { background: #f0ebac; transform: translateY(-3px); box-shadow: 0 6px 24px rgba(139, 92, 246, 0.45), 0 3px 12px rgba(109, 40, 217, 0.35); } .navbar .dropdown-caret { display: inline-block; margin-left: 4px; font-size: 0.75rem; transition: transform var(--transition-fast); } .navbar .dropdown:hover .dropdown-caret { transform: rotate(180deg); } .navbar .dropdown { position: relative; } .navbar .dropdown::after { content: ''; position: absolute; top: 100%; left: -10%; width: 120%; height: 14px; background: transparent; z-index: 999; } .navbar .mega-menu-container { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%) translateY(-6px); opacity: 0; visibility: hidden; transition: all var(--transition-base); z-index: 1000; pointer-events: none; } .navbar .dropdown:hover .mega-menu-container { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: all; } .navbar .dropdown.open .mega-menu-container { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: all; } .navbar .mega-menu { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border-radius: 24px; padding: var(--spacing-lg); box-shadow: 0 20px 60px rgba(23, 99, 91, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.6); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--spacing-lg); min-width: 850px; max-width: 1000px; } .navbar .mega-col { padding: var(--spacing-sm); } .navbar .mega-title { font-weight: 700; font-size: 1.25rem; color: #22514a; margin-bottom: var(--spacing-xs); letter-spacing: 0.3px; } .navbar .category-toggle { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; padding: 8px 0; transition: all 0.3s ease; } .navbar .category-toggle:hover { color: #7c3aed; } .navbar .category-caret { font-size: 0.65rem; transition: transform 0.3s ease; color: #7c3aed; } .navbar .mega-col.category-active .category-caret { transform: rotate(180deg); } .navbar .mega-bar { width: 40px; height: 3px; background: linear-gradient(90deg, #8b5cf6, #6d28d9); border-radius: var(--radius-full); margin-bottom: var(--spacing-sm); display: none; opacity: 0; transition: opacity 0.3s ease; } .navbar .mega-col.category-active .mega-bar { display: block; opacity: 1; } .navbar .mega-menu .submenu { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height 0.4s ease, opacity 0.3s ease; } .navbar .mega-col.category-active .submenu { max-height: 500px; opacity: 1; } .navbar .mega-menu .submenu li { margin-bottom: 8px; } .navbar .mega-menu .submenu li a { font-family: "Poppins", sans-serif; color: #5a6c7d; font-size: 0.9rem; font-weight: 400; text-decoration: none; padding: 8px 12px; display: block; border-radius: 12px; transition: all var(--transition-fast); } .navbar .mega-menu .submenu li a:hover { background: rgba(139, 92, 246, 0.1); color: #6d28d9; transform: translateX(4px); padding-left: 16px; } .navbar-right { display: flex; align-items: center; gap: var(--spacing-sm); } .navbar-right .icon { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 44px; height: 44px; cursor: pointer; transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base); } .navbar-right .icon:hover { background: rgba(23, 99, 91, 0.12); transform: translateY(-3px) scale(1.08); box-shadow: 0 8px 20px rgba(23, 99, 91, 0.2); } .navbar-right .icon.heart { position: relative; } .navbar-right .icon.heart .badge { display: none; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: var(--white); border-radius: var(--radius-full); font-size: 0.7rem; padding: 3px 7px; position: absolute; top: -4px; right: -4px; font-weight: var(--font-weight-bold); box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4); animation: pulse 2s infinite; border: 2px solid white; } .navbar-right .icon svg { width: 22px; height: 22px; stroke: var(--primary-dark); stroke-width: 2; transition: stroke var(--transition-fast); } .navbar-right .icon:hover svg { stroke: #6d28d9; } .hamburger-icon { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; padding: 10px; background: rgba(23, 99, 91, 0.08); border-radius: 12px; transition: all var(--transition-base); min-width: 44px; min-height: 44px; z-index: 1001; } .hamburger-icon:hover { background: rgba(23, 99, 91, 0.15); transform: scale(1.05); } .hamburger-icon:active { transform: scale(0.95); } .hamburger-icon span { width: 24px; height: 3px; background: var(--primary-dark); border-radius: 2px; transition: all var(--transition-base); display: block; } .hamburger-icon.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); } .hamburger-icon.active span:nth-child(2) { opacity: 0; transform: translateX(20px); } .hamburger-icon.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } @media (max-width: 1200px) { .navbar .mega-menu { min-width: 700px; grid-template-columns: repeat(3, 1fr); } .navbar .logo-text { font-size: 1.1rem; } .navbar .navbar-left nav ul { gap: 4px; } .navbar .navbar-left nav ul li a { font-size: 0.95rem; padding: 10px 18px; } } @media (max-width: 992px) { .navbar { top: var(--spacing-sm); padding: 0 var(--spacing-md); } .navbar-inner { padding: var(--spacing-xs) var(--spacing-md); } .navbar .logo-text { display: none; } .navbar .mega-menu { min-width: 600px; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 769px) { .navbar .dropdown.open .mega-menu .submenu, .navbar .dropdown:hover .mega-menu .submenu { max-height: none; opacity: 1; overflow: visible; } .navbar .category-toggle { cursor: default; pointer-events: none; } .navbar .category-caret { display: none; } .navbar .mega-bar { display: block; opacity: 1; } } @media (max-width: 768px) { .navbar { top: var(--spacing-xs); padding: 0 12px; z-index: 3100 !important; } .navbar-inner { padding: 8px 12px; border-radius: 40px; gap: 12px; position: relative; z-index: 3101 !important; } .navbar .logo img { height: 40px; } .navbar .logo-text { display: none; } .hamburger-icon { display: flex !important; z-index: 3102 !important; } body.menu-open::before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 3050 !important; animation: fadeInBackdrop 0.3s ease forwards; } @keyframes fadeInBackdrop { from { opacity: 0; } to { opacity: 1; } } .navbar .navbar-left { display: flex !important; position: fixed; top: 0; right: 0; width: 100%; max-width: 340px; height: 100vh; height: 100dvh; background: #ffffff; flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 75px 16px 20px; transform: translateX(110%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease; z-index: 3100 !important; box-shadow: -10px 0 50px rgba(0, 0, 0, 0.15); overflow: hidden; visibility: visible; pointer-events: none; } .navbar .navbar-left.mobile-menu-open { transform: translateX(0); box-shadow: -15px 0 60px rgba(0, 0, 0, 0.2); pointer-events: auto; overflow: hidden; border-radius: 0; } .mobile-menu-close { display: none; position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; align-items: center; justify-content: center; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 50%; cursor: pointer; z-index: 10; transition: all 0.3s ease; } .mobile-menu-header { display: none; } @media (max-width: 768px) { .mobile-menu-close { display: flex; } .mobile-menu-close:hover { background: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.4); transform: rotate(90deg); } .mobile-menu-close:active { transform: rotate(90deg) scale(0.9); } .mobile-menu-close svg { color: #6d28d9; } .mobile-menu-header { display: block; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid rgba(139, 92, 246, 0.15); } .mobile-menu-header h3 { margin: 0; font-size: 1.4rem; font-weight: 700; color: #1a202c; letter-spacing: -0.5px; } .navbar .dropdown .mega-menu { max-height: 0 !important; opacity: 0 !important; visibility: hidden !important; padding: 0 !important; overflow: hidden !important; display: block !important; } .navbar .dropdown.mobile-dropdown-open .mega-menu { max-height: 800px !important; opacity: 1 !important; visibility: visible !important; padding: 14px 10px !important; overflow-y: auto !important; overflow-x: hidden !important; display: block !important; } } .navbar .navbar-left nav { display: flex !important; flex-direction: column; width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; padding-right: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(139, 92, 246, 0.3) transparent; } .navbar .navbar-left nav::-webkit-scrollbar { width: 4px; } .navbar .navbar-left nav::-webkit-scrollbar-track { background: transparent; } .navbar .navbar-left nav::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.3); border-radius: 4px; } .navbar .navbar-left nav ul { display: flex !important; flex-direction: column; gap: 6px; padding: 0; margin: 0; width: 100%; list-style: none; box-sizing: border-box; } .navbar .navbar-left nav ul li { display: block !important; width: 100%; opacity: 0; transform: translateX(30px); transition: opacity 0.01s, transform 0.01s; } .navbar .navbar-left nav ul li.dropdown { opacity: 0; transform: translateX(30px); } .navbar .mega-menu-container, .navbar .mega-menu, .navbar .mega-col, .navbar .category-toggle { animation: none !important; } .navbar .mega-menu .submenu li { animation: none !important; } .navbar .navbar-left.mobile-menu-open nav ul li { animation: slideInRight 0.4s ease forwards; } .navbar .navbar-left.mobile-menu-open nav ul li:nth-child(1) { animation-delay: 0.1s; } .navbar .navbar-left.mobile-menu-open nav ul li:nth-child(2) { animation-delay: 0.15s; } .navbar .navbar-left.mobile-menu-open nav ul li:nth-child(3) { animation-delay: 0.2s; } .navbar .navbar-left.mobile-menu-open nav ul li:nth-child(4) { animation-delay: 0.25s; } .navbar .navbar-left.mobile-menu-open nav ul li:nth-child(5) { animation-delay: 0.3s; } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } .navbar .navbar-left nav ul li a { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; font-size: 0.95rem; font-weight: 600; padding: 14px 16px; border-radius: 10px; min-height: 50px; background: transparent; border: 1px solid transparent; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); color: #1a202c; position: relative; text-decoration: none; } .navbar .navbar-left nav ul li a:hover { background: rgba(139, 92, 246, 0.08); border-color: rgba(139, 92, 246, 0.2); color: #7c3aed; transform: translateX(2px); } .navbar .navbar-left nav ul li a.active { background: linear-gradient( 135deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.15) 100% ); border-color: rgba(139, 92, 246, 0.35); color: #7c3aed; font-weight: 700; } .navbar .dropdown { position: relative; } .navbar .dropdown .mega-menu-container { position: relative; width: 100%; margin: 4px 0 0 0; padding: 0; } .navbar .mega-menu { width: 100%; max-width: 100%; display: block; max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease; padding: 0; margin: 0; box-shadow: none; background: #ffffff; border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 8px; opacity: 0; visibility: hidden; box-sizing: border-box; } .navbar .dropdown.mobile-dropdown-open .mega-menu { max-height: 800px; padding: 14px 10px; opacity: 1; visibility: visible; overflow-y: auto; overflow-x: hidden; display: block; } .navbar .mega-col { padding: 10px 8px; margin-bottom: 4px; } .navbar .mega-col:first-child { padding-top: 4px; } .navbar .mega-col:last-child { margin-bottom: 0; padding-bottom: 4px; } .navbar .category-toggle { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 16px; background: rgba(139, 92, 246, 0.1); border-radius: 8px; transition: all 0.2s ease; border: 1px solid rgba(139, 92, 246, 0.15); margin-bottom: 0; min-height: 48px; } .navbar .category-toggle:hover { background: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.3); } .navbar .category-toggle:active { background: rgba(139, 92, 246, 0.2); transform: scale(0.98); } .navbar .category-toggle span:first-child { flex: 1; font-size: 0.88rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #7c3aed; } .navbar .category-caret { font-size: 0.7rem; transition: transform 0.3s ease; color: #7c3aed; margin-left: 10px; flex-shrink: 0; font-weight: bold; } .navbar .mega-col.category-active .category-caret { transform: rotate(180deg); } .navbar .mega-col.category-active .category-toggle { background: rgba(139, 92, 246, 0.18); border-color: rgba(139, 92, 246, 0.4); } .navbar .mega-bar { display: none; } .navbar .mega-menu .submenu { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease, visibility 0.4s; padding-left: 0; } .navbar .mega-col.category-active .submenu { max-height: 600px; opacity: 1; visibility: visible; margin-top: 12px; padding-left: 8px; } .navbar .mega-menu .submenu li { margin-bottom: 4px; } .navbar .mega-menu .submenu li:last-child { margin-bottom: 0; } .navbar .mega-menu .submenu li a { display: block; padding: 11px 14px; font-size: 0.9rem; font-weight: 500; border-radius: 6px; background: transparent; color: #475569; transition: all 0.2s ease; border: 1px solid transparent; text-decoration: none; } .navbar .mega-menu .submenu li a:hover { background: rgba(139, 92, 246, 0.1); color: #7c3aed; border-color: rgba(139, 92, 246, 0.2); transform: translateX(4px); } .navbar .dropdown-caret { font-size: 0.7rem; opacity: 0.7; transition: transform 0.3s ease, opacity 0.3s ease; } .navbar .dropdown.mobile-dropdown-open .dropdown-caret { transform: rotate(180deg); opacity: 1; } .navbar-right { gap: 8px; } .navbar-right .icon { width: 44px; height: 44px; } .navbar-right .icon svg { width: 20px; height: 20px; } } @media (max-width: 480px) { .navbar-inner { padding: 6px 10px; gap: 8px; } .navbar .logo img { height: 36px; } .navbar .navbar-left { width: 100%; max-width: 90vw; padding: 70px 12px 16px; } .navbar .navbar-left nav ul li a { font-size: 0.9rem; padding: 12px 14px; min-height: 48px; } .navbar .category-toggle { padding: 9px 11px; font-size: 0.78rem; } .navbar .category-toggle span:first-child { font-size: 0.78rem; } .navbar .category-caret { font-size: 0.6rem; } .navbar .mega-menu .submenu li a { font-size: 0.82rem; padding: 7px 10px; } .mobile-menu-header h3 { font-size: 1.3rem; } .navbar-right { gap: 6px; } .navbar-right .icon { width: 40px; height: 40px; } .navbar-right .icon svg { width: 18px; height: 18px; } .navbar-right .icon.heart .badge { display: none; font-size: 0.65rem; padding: 2px 6px; } .hero { min-height: 350px; padding: 40px 16px !important; } .hero h1 { font-size: 1.8rem; line-height: 1.3; } .hero .subtitle { font-size: 0.85rem; } .hero .desc { font-size: 0.9rem; line-height: 1.5; } .hero-buttons { flex-direction: column; gap: 12px; align-items: stretch; } .hero-buttons .btn { width: 100%; text-align: center; } .navbar-right .icon svg { width: 18px; height: 18px; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-md); font-weight: var(--font-weight-semibold); font-size: 1rem; cursor: pointer; transition: all var(--transition-base); border: none; position: relative; overflow: hidden; text-decoration: none; min-height: 44px; min-width: 44px; } .btn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .btn:hover::before { width: 300px; height: 300px; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--primary-gradient); color: var(--white); box-shadow: var(--shadow-md); } .btn-primary:hover { box-shadow: var(--shadow-lg), var(--shadow-glow); transform: translateY(-2px) scale(1.02); } .btn-secondary { background: transparent; color: var(--primary-dark); border: 2px solid var(--primary-dark); } .btn-secondary:hover { background: var(--primary-dark); color: var(--white); transform: translateY(-2px) scale(1.02); } .btn-outline { background: transparent; color: var(--primary-dark); border: 2px solid var(--primary-dark); text-decoration: none; } .btn-outline:hover { background: var(--primary-dark); color: var(--white); transform: translateY(-2px) scale(1.02); } .btn-accent { background: linear-gradient(135deg, var(--accent-gold), #b89500); color: var(--white); box-shadow: var(--shadow-md); } .btn-accent:hover { box-shadow: var(--shadow-lg), 0 0 20px rgba(207, 166, 0, 0.4); transform: translateY(-2px) scale(1.02); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .animate-fadeInUp { animation: fadeInUp 0.6s ease forwards; } .animate-fadeIn { animation: fadeIn 0.6s ease forwards; } .animate-slideInRight { animation: slideInRight 0.6s ease forwards; } .animate-scaleIn { animation: scaleIn 0.6s ease forwards; } .animate-delay-1 { animation-delay: 0.1s; } .animate-delay-2 { animation-delay: 0.2s; } .animate-delay-3 { animation-delay: 0.3s; } .animate-delay-4 { animation-delay: 0.4s; } .animate-delay-5 { animation-delay: 0.5s; } @media (max-width: 768px) { .navbar .navbar-left { display: none; } .navbar .logo { display: none; } .hamburger-icon { display: flex !important; } .navbar-right { right: 16px; top: 10px; gap: 10px; } .navbar { padding: 12px 0; } } @media (max-width: 420px) { .navbar-right { gap: 8px; right: 10px; } .hamburger-icon { left: 10px; } } .hero { position: relative; padding: 100px 60px; background: radial-gradient(circle at 70% 10%, #f8fbfa 60%, #f3f7f6 100%); min-height: 500px; width: 100vw; max-width: 100vw; box-sizing: border-box; overflow: hidden; } .hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 135deg, rgba(23, 99, 91, 0.05) 0%, transparent 100% ); z-index: 1; } .hero > * { position: relative; z-index: 2; } .hero .subtitle { color: var(--primary-dark); font-weight: var(--font-weight-bold); letter-spacing: 3px; font-size: 0.95rem; margin-bottom: var(--spacing-md); text-transform: uppercase; opacity: 0.9; } .hero h1 { font-size: 3.5rem; font-weight: var(--font-weight-black); margin-bottom: var(--spacing-lg); color: var(--text-dark); line-height: 1.1; background: linear-gradient( 135deg, var(--primary-dark) 0%, var(--primary-light) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero .desc { font-size: 1.2rem; color: var(--text-light); margin-bottom: var(--spacing-2xl); max-width: 650px; line-height: 1.7; } .hero-buttons { display: flex; gap: var(--spacing-md); flex-wrap: wrap; } @media (max-width: 1024px) { .hero { padding: 80px 50px; min-height: 450px; } .hero h1 { font-size: 3rem; } } @media (max-width: 768px) { .hero { padding: 60px 30px; min-height: 400px; } .hero h1 { font-size: 2.5rem; } .hero .desc { font-size: 1.1rem; } } @media (max-width: 480px) { .hero { padding: 50px 20px; min-height: 380px; } .hero h1 { font-size: 2rem; } .hero .desc { font-size: 1rem; margin-bottom: var(--spacing-lg); } .hero-buttons { flex-direction: column; gap: var(--spacing-sm); } .hero-buttons .btn { width: 100%; justify-content: center; } } .btn-outline { background: transparent; color: var(--primary-dark); border: 2px solid var(--primary-dark); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-md); font-size: 1rem; font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--transition-base); display: inline-flex; align-items: center; gap: var(--spacing-xs); text-decoration: none; } .btn-outline:hover { background: var(--primary-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .form-group { position: relative; margin-bottom: var(--spacing-lg); } .form-input, .form-textarea, .form-select { width: 100%; padding: var(--spacing-md) var(--spacing-sm); border: 2px solid var(--neutral-light); border-radius: var(--radius-md); font-size: 1rem; font-family: inherit; transition: all var(--transition-base); background: var(--white); color: var(--text-dark); outline: none; } .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--primary-dark); box-shadow: 0 0 0 4px rgba(23, 99, 91, 0.1), var(--shadow-glow); transform: translateY(-2px); } .form-input::placeholder, .form-textarea::placeholder { color: var(--neutral-medium); opacity: 0.7; } .form-label { position: absolute; top: var(--spacing-md); left: var(--spacing-sm); padding: 0 var(--spacing-xs); background: var(--white); color: var(--neutral-medium); font-size: 1rem; transition: all var(--transition-fast); pointer-events: none; } .form-input:focus + .form-label, .form-input:not(:placeholder-shown) + .form-label, .form-textarea:focus + .form-label, .form-textarea:not(:placeholder-shown) + .form-label { top: -10px; left: var(--spacing-sm); font-size: 0.85rem; color: var(--primary-dark); font-weight: var(--font-weight-semibold); } .form-textarea { min-height: 120px; resize: vertical; } .form-error { color: var(--accent-red); font-size: 0.875rem; margin-top: var(--spacing-xs); display: none; } .form-input.error, .form-textarea.error { border-color: var(--accent-red); } .form-input.error + .form-error, .form-textarea.error + .form-error { display: block; } .section { margin: 60px 0 0 0; padding: 0 40px; width: 100vw; max-width: 100vw; box-sizing: border-box; } .section-title { font-size: 2.2rem; font-weight: 700; text-align: center; margin-bottom: 6px; color: #222; } .section-desc { text-align: center; color: #666; margin-bottom: 32px; font-size: 1.1rem; } .card-row { display: flex; gap: 32px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; } .card { background: #fff; border-radius: 18px; box-shadow: 0 2px 12px rgba(23, 99, 91, 0.06); width: 300px; height: 400px; overflow: hidden; position: relative; margin-bottom: 18px; transition: transform 0.15s, box-shadow 0.15s; display: flex; flex-direction: column; } .card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 6px 24px rgba(23, 99, 91, 0.13); } .card img { width: 100%; height: 240px; object-fit: cover; display: block; } .card-content { padding: 18px 16px 16px 16px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; } .card-content h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; color: #222; } .card-content .category { color: #17635b; font-size: 0.95rem; margin-bottom: 6px; } .stars { color: #f7b731; font-size: 1rem; margin-bottom: 8px; } .stars span { color: #888; font-size: 0.95rem; margin-left: 4px; } .price-row { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 600; } .price { color: #17635b; } .old-price { color: #aaa; text-decoration: line-through; font-size: 1rem; font-weight: 400; } .card-badge { position: absolute; top: 14px; left: 14px; background: #17635b; color: #fff; font-size: 0.85rem; font-weight: 600; padding: 4px 12px; border-radius: 12px; z-index: 2; letter-spacing: 1px; } .card-badge.discount { top: 44px; left: 14px; background: #17635b; } .center-btn { display: flex; justify-content: center; margin: 18px 0 0 0; } .btn-secondary { background: #e6b800; color: #fff; border: none; padding: 14px 32px; border-radius: 12px; font-size: 1.1rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(230, 184, 0, 0.08); transition: background 0.2s; } .btn-secondary:hover { background: #cfa600; } .footer { background: #fcf5bd; color: #781f1b; padding: 60px 0 0 0; margin-top: 80px; } .footer-container { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 40px; } .footer-column h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 20px; color: #781f1b; } .footer-logo { max-width: 197px; height: 60px; margin-bottom: 16px; } .footer-tagline { font-size: 1rem; color: #781f1b; margin-bottom: 20px; line-height: 1.6; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 12px; } .footer-links a { color: #781f1b; text-decoration: none; font-size: 1rem; transition: color 0.3s ease; } .footer-links a:hover { color: #fff; } .footer-contact-item { display: flex; align-items: flex-start; margin-bottom: 16px; color: #781f1b; font-size: 0.95rem; line-height: 1.6; } .footer-contact-item a { color: #666666; text-decoration: none; transition: color 0.3s ease; } .footer-contact-item a:hover { color: #781f1b; } .footer-social { display: flex; gap: 16px; margin-top: 20px; } .footer-social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #781f1b; } @media (max-width: 768px) { .footer-container { padding: 0 20px; } } @media (max-width: 576px) { .footer { padding: 40px 0 0 0; margin-top: 60px; } .footer-container { padding: 0 16px; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-column { text-align: center; } .footer-logo { margin-left: auto; margin-right: auto; } .footer-contact-item { justify-content: center; } .footer-social { justify-content: center; } .footer-bottom { padding: 16px 0; text-align: center; } .footer-bottom p { font-size: 0.82rem; line-height: 1.5; word-break: break-word; white-space: normal; } } @media (max-width: 360px) { .footer-container { padding: 0 10px; } .footer-bottom p { font-size: 0.75rem; } } @media (min-width: 769px) { .navbar .mega-menu-container { width: min(1280px, calc(100vw - 20px)) !important; max-width: calc(100vw - 20px) !important; } .navbar .dropdown.open .mega-menu-container .mega-menu, .navbar .dropdown:hover .mega-menu-container .mega-menu { display: grid !important; } .navbar .mega-menu { width: 100% !important; max-width: none !important; min-width: 0 !important; padding: 16px 18px !important; gap: 0 !important; grid-template-columns: repeat(var(--mega-columns, 5), minmax(0, 1fr)) !important; align-items: start !important; background: #f7f8fa !important; border-radius: 10px !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14) !important; overflow-x: hidden !important; overflow-y: visible !important; white-space: normal !important; } .navbar .mega-col { min-width: 0 !important; max-width: none !important; padding: 0 14px !important; border-right: 1px solid #d6dbe6 !important; margin-right: 0 !important; } .navbar .mega-col:last-child { border-right: none !important; } .navbar .mega-title { font-size: 0.88rem !important; line-height: 1.15 !important; min-height: 2.3em !important; margin-bottom: 3px !important; color: #334155 !important; text-transform: capitalize !important; overflow-wrap: anywhere !important; } .navbar .mega-bar { width: 100% !important; height: 1px !important; margin-bottom: 7px !important; background: #c8d0de !important; border-radius: 0 !important; opacity: 1 !important; } .navbar .mega-menu .submenu, .navbar .dropdown.open .mega-menu .submenu, .navbar .dropdown:hover .mega-menu .submenu { max-height: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; } .navbar .mega-menu .submenu li { margin-bottom: 1px !important; } .navbar .mega-menu .submenu li a { font-size: 0.79rem !important; line-height: 1.18 !important; padding: 3px 2px !important; border-radius: 4px !important; color: #1f2937 !important; text-decoration: none !important; } .navbar .mega-menu .submenu li a:hover { background: #eef2f7 !important; color: #0f172a !important; text-decoration: none !important; transform: none !important; } .navbar .mega-col-services .mega-title { color: #781f1a !important; } }