*, *::before, *::after { box-sizing: border-box; } img, picture, video, canvas, svg, iframe { max-width: 100%; } html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .hero { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } #wishlistIframe { width: min(420px, 100vw) !important; max-width: 100vw !important; } #searchIframe { width: min(450px, 100vw) !important; max-width: 100vw !important; } .search-modal { width: min(420px, 100vw) !important; max-width: 100vw !important; right: 0 !important; box-sizing: border-box !important; margin-top: 71px; } .wishlist-modal { width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; padding: 32px 28px !important; margin-top: 53px; } .card-link { display: block; min-width: 0; text-decoration: none; color: inherit; } .card-row { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 32px; justify-content: unset; } .card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; } .card img, .card-img-wrap img { width: 100%; height: 210px; object-fit: cover; } .hero-content { position: relative; z-index: 2; padding: 60px 0 60px 60px; max-width: 900px; } .mobile-menu-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1049; cursor: pointer; transition: opacity 0.3s ease; } .mobile-menu-backdrop.active { display: block; } @media (hover: hover) and (pointer: fine) { .navbar .dropdown:hover .mega-menu-container, .navbar .dropdown.open .mega-menu-container { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; pointer-events: all !important; } .navbar .dropdown:hover .mega-menu .submenu, .navbar .dropdown.open .mega-menu .submenu { max-height: none !important; opacity: 1 !important; overflow: visible !important; display: block !important; } .navbar .dropdown:hover .mega-menu .submenu li, .navbar .dropdown.open .mega-menu .submenu li { display: list-item !important; opacity: 1 !important; visibility: visible !important; } } @media (min-width: 769px) { .navbar .dropdown:hover .mega-menu .submenu, .navbar .dropdown.open .mega-menu .submenu { max-height: none !important; opacity: 1 !important; overflow: visible !important; display: block !important; } .navbar .dropdown:hover .mega-menu .submenu li, .navbar .dropdown.open .mega-menu .submenu li { display: list-item !important; opacity: 1 !important; visibility: visible !important; } } @media (min-width: 1920px) { .card-row { max-width: 1600px; margin-left: auto; margin-right: auto; } } @media (max-width: 1400px) { .card-row { gap: 20px; } } @media (max-width: 1199px) { .card-row { grid-template-columns: repeat(3, 1fr) !important; gap: 18px; } } @media (max-width: 1024px) { .hero-content { padding: 50px 40px; max-width: 100%; } .section { padding-left: 24px !important; padding-right: 24px !important; } .sidebar-filter { min-width: 260px !important; max-width: 280px !important; } .contact-cards-row { padding: 0 24px !important; gap: 14px !important; } } @media (max-width: 768px) { .navbar { padding: 0 12px; } .navbar-inner { padding: 6px 12px; border-radius: 40px; gap: 8px; } .navbar .logo { display: flex !important; align-items: center; order: 1; flex: 1; padding-left: 0; } .navbar .logo img { height: 38px !important; width: auto; } .navbar .navbar-left { order: 2; } .navbar .navbar-right { order: 3; } .navbar .hamburger-icon { order: 4; background-color: #eae8ab; } .hamburger-icon { display: flex !important; position: relative; z-index: 1051; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } .navbar .navbar-left { display: flex !important; position: fixed; top: 0; left: 0; width: clamp(260px, 80vw, 320px); height: 100vh; height: 100dvh; background: rgba(255, 255, 255, 0.99); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; justify-content: flex-start; padding-top: 80px; padding-bottom: 24px; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1050; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); overflow-y: auto; pointer-events: none; visibility: hidden; } .navbar .navbar-left.mobile-menu-open { transform: translateX(0); pointer-events: auto; visibility: visible; } .navbar .navbar-left nav ul { flex-direction: column !important; gap: 4px; padding: 0 16px; width: 100%; } .navbar .navbar-left nav ul li { width: 100%; opacity: 1 !important; transform: none !important; animation: none !important; visibility: visible !important; } .navbar .navbar-left nav ul li a { width: 100%; display: flex; align-items: center; padding: 14px 16px; font-size: 1.05rem; border-radius: 10px; min-height: 48px; transition: background 0.2s; } .navbar .navbar-left nav ul li a:hover, .navbar .navbar-left nav ul li a.active { background: rgba(23, 99, 91, 0.08); color: #17635b; } .navbar .dropdown:not(.mobile-dropdown-open) .mega-menu-container { display: none !important; } .navbar .dropdown.mobile-dropdown-open .mega-menu-container { display: block !important; position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; width: 100%; padding: 0; background: transparent; box-shadow: none; } .navbar .dropdown.mobile-dropdown-open .mega-menu { display: block !important; width: 100%; min-width: 100%; max-width: 100%; max-height: 1000px !important; overflow-y: auto !important; overflow-x: hidden !important; opacity: 1 !important; visibility: visible !important; padding: 12px !important; margin: 4px 0; background: rgba(23, 99, 91, 0.03) !important; border: none !important; box-shadow: none !important; border-radius: 10px; } .navbar .dropdown.mobile-dropdown-open .mega-menu .mega-col { display: block !important; opacity: 1 !important; visibility: visible !important; width: 100%; padding: 0 !important; margin-bottom: 12px; } .navbar .dropdown.mobile-dropdown-open .mega-menu .mega-title { display: block !important; opacity: 1 !important; visibility: visible !important; font-size: 0.85rem; font-weight: 700; color: #17635b; padding: 6px 4px 4px; text-transform: uppercase; letter-spacing: 0.5px; } .navbar .dropdown.mobile-dropdown-open .mega-menu .submenu { display: block !important; max-height: none !important; height: auto !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; padding: 0 !important; margin: 0 !important; } .navbar .dropdown.mobile-dropdown-open .mega-menu .submenu li { display: list-item !important; opacity: 1 !important; visibility: visible !important; margin-bottom: 2px; list-style: none; } .navbar .dropdown.mobile-dropdown-open .mega-menu .submenu li a { display: block !important; opacity: 1 !important; visibility: visible !important; padding: 9px 12px !important; font-size: 0.9rem; color: #444; border-radius: 8px; transition: background 0.2s; } .navbar .dropdown.mobile-dropdown-open .mega-menu .submenu li a:hover { background: rgba(23, 99, 91, 0.08); color: #17635b; } .navbar .mega-col { min-width: 100%; max-width: 100%; margin-bottom: 8px; } .hero-content { padding: 32px 24px !important; max-width: 100% !important; } .section { padding-left: 16px !important; padding-right: 16px !important; } .section-title { font-size: 1.7rem; } .section-desc { font-size: 1rem; margin-bottom: 20px; } .card-row { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; } .card img, .card-img-wrap img { height: 180px; } .review-card { min-width: 260px; max-width: 280px; padding: 16px; } .footer-container { padding-left: 16px !important; padding-right: 16px !important; } .footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px; } .cookie-consent, .cookie-bar { flex-direction: column !important; text-align: center; padding: 16px !important; } .cookie-consent .btn, .cookie-bar .btn { width: 100%; margin-top: 8px; } .search-modal { width: 100% !important; padding: 24px 20px 0 20px !important; margin-top: 0 !important; top: 57px !important; left: 0 !important; right: 0 !important; border-radius: 0 0 20px 20px !important; } .search-modal-title { font-size: 1.6rem !important; } .search-bar { margin: 24px 0 20px 0 !important; } .search-input { font-size: 1rem !important; padding: 10px 14px !important; } .search-btn { font-size: 1.3rem !important; padding: 0 14px !important; } .popular-list li { padding: 10px 14px !important; font-size: 1rem !important; } .suggestion-item { padding: 10px 14px !important; } .wishlist-modal { padding: 24px 20px !important; margin-top: 45px !important; } .wishlist-title { font-size: 1.6rem !important; } .wishlist-item { padding: 12px !important; gap: 12px !important; } .wishlist-item-img { width: 60px !important; height: 60px !important; } .wishlist-item-title { font-size: 0.95rem !important; } .wishlist-item-price { font-size: 1rem !important; } .contact-hero { min-height: auto !important; padding: 32px 16px 28px !important; } .contact-hero-title { font-size: 1.6rem !important; margin-bottom: 20px !important; } .contact-cards-row { flex-direction: column !important; gap: 12px !important; padding: 0 12px !important; max-width: 100% !important; } .ci-card { flex: none !important; width: 100% !important; } .ci-addr-map { flex-direction: column !important; } .ci-addr-map .addr-map { flex: none !important; max-width: 100% !important; width: 100% !important; } .ci-addr-map .addr-map iframe { height: 160px !important; } .contact-form-section { padding: 32px 16px 40px !important; } .contact-form-card { padding: 28px 20px 24px !important; max-width: 100% !important; } .products-main, .products-layout { flex-direction: column !important; gap: 20px !important; } .sidebar-filter { width: 100% !important; max-width: 100% !important; min-width: unset !important; border-radius: 16px; position: static !important; max-height: none !important; top: unset !important; } .products-title { font-size: 1.8rem !important; } .about-container { flex-direction: column !important; padding: 24px 16px !important; gap: 24px !important; } .about-text, .about-img { width: 100% !important; max-width: 100% !important; flex: none !important; } .about-title { font-size: 1.7rem !important; } .why-us-grid { grid-template-columns: repeat(2, 1fr) !important; } .gallery-main, .gallery-main-img { width: 100% !important; height: 300px !important; } .product-title { font-size: 1.5rem; } .similar-products .card-row { grid-template-columns: repeat(2, 1fr) !important; } .product-detail-layout { flex-direction: column !important; } .product-gallery, .product-info { width: 100% !important; max-width: 100% !important; } .wishlist-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; } .inquiry-form-container { padding: 20px 16px !important; } } @media (max-width: 480px) { .navbar-inner { padding: 6px 10px; gap: 2px; } .navbar-right .icon { width: 40px; height: 40px; margin-left: -1px; } .navbar-right .icon svg { width: 20px !important; height: 20px !important; } .card-row { grid-template-columns: 1fr !important; gap: 14px; } .card img, .card-img-wrap img { height: 220px; } .hero-content { padding: 24px 16px !important; max-width: 100% !important; } .hero h1 { font-size: 1.9rem !important; line-height: 1.2 !important; } .hero-buttons { flex-direction: column !important; gap: 12px; } .hero-buttons .btn, .hero-buttons .btn-outline { width: 100% !important; justify-content: center; text-align: center; } .section { padding-left: 12px !important; padding-right: 12px !important; } .section-title { font-size: 1.45rem; } .section-desc { font-size: 0.95rem; } .footer-grid { grid-template-columns: 1fr !important; gap: 28px; } .footer-column { text-align: center; } .footer-logo { margin: 0 auto 12px; } .footer-contact-item { justify-content: center; } .footer-social { justify-content: center; } .review-card { min-width: 220px; max-width: 240px; } [class*="whatsapp"], [class*="float-btn"], .floating-btn { bottom: 16px !important; right: 16px !important; width: 52px !important; height: 52px !important; } .search-modal { width: 100% !important; padding: 20px 16px 0 16px !important; border-radius: 0 0 16px 16px !important; } .search-modal-title { font-size: 1.4rem !important; } .close-btn { font-size: 1.8rem !important; } .search-bar { flex-direction: column !important; gap: 12px !important; margin: 20px 0 16px 0 !important; } .search-input { border-radius: 8px !important; font-size: 16px !important; padding: 10px 12px !important; } .search-btn { border-radius: 8px !important; padding: 12px !important; width: 100% !important; font-size: 1.1rem !important; min-height: 44px !important; } .popular-list li { padding: 10px 14px !important; font-size: 0.95rem !important; } .suggestion-item { padding: 10px 12px !important; gap: 10px !important; } .suggestion-text { font-size: 0.95rem !important; } .suggestion-category { font-size: 0.85rem !important; } .wishlist-modal { padding: 20px 16px !important; } .wishlist-title { font-size: 1.4rem !important; } .wishlist-item { padding: 12px !important; gap: 10px !important; border-radius: 12px !important; } .wishlist-item-img { width: 55px !important; height: 55px !important; } .wishlist-item-title { font-size: 0.9rem !important; } .wishlist-item-category, .wishlist-item-rating { font-size: 0.8rem !important; } .wishlist-item-price { font-size: 0.95rem !important; } .wishlist-empty { padding: 60px 16px !important; } .contact-hero { padding: 24px 12px 20px !important; } .contact-hero-title { font-size: 1.35rem !important; } .ci-card { padding: 18px 14px !important; } .ci-card h4 { font-size: 0.95rem !important; } .ci-card p, .ci-card a { font-size: 0.88rem !important; } .ci-addr-map .addr-map iframe { height: 140px !important; } .contact-form-section { padding: 24px 12px 32px !important; } .contact-form-card { padding: 22px 14px !important; } .cf-group input, .cf-group textarea, .cf-group select { font-size: 16px !important; padding: 10px 12px !important; } .products-title { font-size: 1.5rem !important; } .about-title { font-size: 1.4rem !important; } .about-container { padding: 16px 12px !important; } .why-us-grid { grid-template-columns: 1fr !important; } .gallery-main, .gallery-main-img { height: 240px !important; } .gallery-thumb { width: 60px !important; height: 60px !important; } .product-title { font-size: 1.25rem !important; } .similar-products .card-row { grid-template-columns: 1fr !important; } .wishlist-grid { grid-template-columns: 1fr !important; } .inquiry-form-container { padding: 16px 12px !important; } } @media (max-width: 360px) { .hero h1 { font-size: 1.5rem !important; } .section-title { font-size: 1.25rem; } .navbar-inner { padding: 6px 8px; gap: 0; } .navbar .logo img { height: 32px !important; } .about-title { font-size: 1.25rem !important; } .products-title { font-size: 1.3rem !important; } .contact-hero-title { font-size: 1.15rem !important; } .ci-card { padding: 14px 12px !important; } .footer-grid { grid-template-columns: 1fr !important; } .card-content { padding: 12px 14px 10px !important; } .search-input, .cf-group input, .cf-group textarea { font-size: 16px !important; } } @media (max-width: 1024px) { .home-section { padding-left: 24px !important; padding-right: 24px !important; } .home-inner-card { padding: 28px 20px 24px !important; } } @media (max-width: 768px) { .home-section { padding: 40px 16px 36px !important; } .home-inner-card { padding: 22px 14px 20px !important; } .explore-space-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } #exploreByCatFlex > a { flex: 1 1 calc(50% - 12px) !important; min-width: 0 !important; max-width: none !important; } } @media (max-width: 480px) { .home-section { padding: 28px 10px 24px !important; } .home-inner-card { padding: 18px 10px 16px !important; } .explore-space-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } #exploreByCatFlex > a { flex: 1 1 calc(50% - 6px) !important; } } @media (max-width: 360px) { .home-section { padding: 24px 8px 20px !important; } .explore-space-grid { gap: 8px !important; } } @media (hover: none) and (pointer: coarse) { .card:hover { transform: none; box-shadow: 0 2px 12px rgba(23, 99, 91, 0.06); } .card:active { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(23, 99, 91, 0.12); } .btn:hover { transform: none; } .btn:active { transform: translateY(-1px); } .card-icon { width: 40px !important; height: 40px !important; } .navbar-right .icon, .hamburger-icon { min-height: 44px; min-width: 44px; } .navbar .navbar-left nav ul li a { min-height: 48px; } .navbar .dropdown:hover .mega-menu-container { opacity: 0; visibility: hidden; pointer-events: none; } .navbar .dropdown.open .mega-menu-container { opacity: 1 !important; visibility: visible !important; pointer-events: all !important; } } @media (max-width: 896px) and (orientation: landscape) { .hero { min-height: 260px !important; } .hero-content { padding: 20px 24px !important; } .hero h1 { font-size: 1.6rem !important; } .navbar .navbar-left { padding-top: 60px; } } @supports (padding-bottom: env(safe-area-inset-bottom)) { .navbar { padding-left: max(13px, env(safe-area-inset-left)); padding-right: max(13px, env(safe-area-inset-right)); } body { padding-bottom: env(safe-area-inset-bottom); } [class*="whatsapp"], [class*="float-btn"], .floating-btn { bottom: calc(16px + env(safe-area-inset-bottom)) !important; } } @media print { .navbar, .hamburger-icon, .mobile-menu-backdrop, .cookie-consent, .cookie-bar, [class*="whatsapp"], [class*="float-btn"], .floating-btn, .search-modal, #searchOverlay, #wishlistOverlay, #menuOverlay { display: none !important; } body { background: #fff !important; color: #000 !important; } .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; } .card-row { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; } } :focus-visible { outline: 2px solid #17635b; outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } main, section, article, header, footer, .section, .footer-container, .products-main, .products-layout, .contact-form-section, .about-hero-sec, .about-why-sec, .about-coll-sec { min-width: 0; max-width: 100%; } p, h1, h2, h3, h4, a, li, span { overflow-wrap: anywhere; word-break: break-word; } .footer { margin-top: 40px; } iframe, .map iframe, .addr-map iframe, .contact-map iframe { width: 100%; max-width: 100%; } @media (max-width: 1024px) { [style*="margin-right: -112px"] { margin-right: 0 !important; } [style*="max-width: 46vw"] { max-width: 100% !important; } } @media (max-width: 768px) { [style*="min-width: 300px"], [style*="min-width:300px"], [style*="min-width: 250px"], [style*="min-width:250px"], [style*="min-width: 220px"], [style*="min-width:220px"], [style*="min-width: 200px"], [style*="min-width:200px"], [style*="min-width: 180px"], [style*="min-width:180px"] { min-width: 0 !important; width: 100% !important; max-width: 100% !important; } [style*="width: 500px"], [style*="width:500px"], [style*="width: 450px"], [style*="width:450px"], [style*="width: 420px"], [style*="width:420px"], [style*="width: 400px"], [style*="width:400px"] { width: 100% !important; max-width: 100% !important; } a[style*="flex:0 0 calc(25% - 18px)"] { flex: 1 1 calc(50% - 8px) !important; min-width: 0 !important; max-width: none !important; } .footer { margin-top: 24px !important; } } @media (max-width: 480px) { a[style*="flex:0 0 calc(25% - 18px)"] { flex: 1 1 100% !important; } .footer { margin-top: 18px !important; } } @media (max-width: 900px) { .home-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; } .home-service-card { height: auto !important; min-height: 180px; padding: 16px 12px 56px !important; gap: 10px !important; } .home-service-heading { font-size: 1.45rem !important; line-height: 1.2 !important; text-align: center !important; } .home-service-pill { bottom: 10px !important; left: 50% !important; transform: translateX(-50%); min-width: 0 !important; width: calc(100% - 24px) !important; max-width: 190px; padding: 8px 12px !important; font-size: 0.9rem !important; line-height: 1.2 !important; white-space: nowrap; } .home-floating-cta-wrap { position: static !important; left: auto !important; bottom: auto !important; transform: none !important; margin-top: 14px; display: flex; justify-content: center; } .home-floating-cta { min-width: 0 !important; width: auto !important; max-width: 100% !important; padding: 10px 22px !important; font-size: 0.92rem !important; } .home-explore-space-sec .home-inner-card { padding-bottom: 16px !important; } } @media (max-width: 560px) { .home-services-sec { padding-left: 10px !important; padding-right: 10px !important; } .home-services-title { font-size: 2rem !important; margin-bottom: 24px !important; } .home-services-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .home-service-card { border-radius: 20px !important; min-height: 150px; padding-bottom: 52px !important; } .home-service-heading { font-size: 1.2rem !important; } .home-services-cta-wrap { margin-top: 20px !important; } .home-services-cta, .home-floating-cta { width: 100% !important; max-width: 220px !important; min-width: 0 !important; font-size: 0.9rem !important; padding: 9px 14px !important; } .footer .footer-column h3 { font-size: 1.25rem !important; } .footer .footer-tagline, .footer .footer-links a, .footer .footer-contact-item, .footer .footer-contact-item a, .footer .footer-address, .footer .footer-value-props li, .footer .footer-bottom p, .footer .footer-legal-bar a { font-size: 0.95rem !important; line-height: 1.45 !important; } } @media (max-width: 768px) { .site-footer { margin-top: 20px !important; padding: 28px 0 22px !important; } .site-footer .footer-container { padding: 0 14px !important; } .site-footer .footer-grid { grid-template-columns: 1fr !important; gap: 20px !important; } .site-footer .footer-column, .site-footer .footer-brand-column { text-align: center !important; max-width: 100% !important; margin: 0 auto !important; } .site-footer .footer-logo { width: min(210px, 70vw) !important; max-width: min(210px, 70vw) !important; margin: 0 auto 10px !important; } .site-footer .footer-social, .site-footer .footer-contact-item, .site-footer .footer-legal-bar { justify-content: center !important; } .site-footer .footer-icon-link { width: 46px !important; height: 46px !important; } } @media (max-width: 560px) { .site-footer .footer-column h3, .site-footer .footer-newsletter h4 { font-size: 1.35rem !important; line-height: 1.25 !important; } .site-footer .footer-tagline, .site-footer .footer-links a, .site-footer .footer-contact-item, .site-footer .footer-contact-item a, .site-footer .footer-address, .site-footer .footer-value-props li, .site-footer .footer-bottom p, .site-footer .footer-legal-bar a { font-size: 1rem !important; line-height: 1.5 !important; } .site-footer .footer-newsletter-controls input, .site-footer .footer-newsletter-controls button { height: 46px !important; font-size: 0.95rem !important; } .site-footer .footer-column:last-child { padding-bottom: 68px; } #backToTopBtn, [class*="whatsapp"], [class*="float-btn"], .floating-btn { bottom: 74px !important; } }