{"id":7,"date":"2026-02-20T06:10:11","date_gmt":"2026-02-20T06:10:11","guid":{"rendered":"https:\/\/www.trendzuae.com\/?page_id=7"},"modified":"2026-03-18T07:44:57","modified_gmt":"2026-03-18T07:44:57","slug":"home","status":"publish","type":"page","link":"https:\/\/www.trendzuae.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Trendz Mattress<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* ===== RESET & BASE ===== *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Montserrat', sans-serif;\r\n background-color: #4169e1;\r\n }\r\n\r\n \/* ===== HEADER ===== *\/\r\n .header {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n z-index: 1000;\r\n background-color: #4169e1;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n box-shadow: 0 2px 20px rgba(29, 55, 119, 0.3);\r\n }\r\n\r\n \/* ===== SCROLLED STATE \u2014 same #4169e1 blue ===== *\/\r\n .header.scrolled {\r\n background-color: #4169e1;\r\n box-shadow: 0 4px 30px rgba(29, 55, 119, 0.5);\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n \/* Top Bar *\/\r\n .top-bar {\r\n background-color: #4169e1;\r\n padding: 8px 0;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n transition: all 0.4s ease;\r\n overflow: hidden;\r\n max-height: 50px;\r\n }\r\n\r\n .header.scrolled .top-bar {\r\n max-height: 0;\r\n padding: 0;\r\n border: none;\r\n opacity: 0;\r\n }\r\n\r\n .top-bar-content {\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .top-bar-left {\r\n display: flex;\r\n gap: 25px;\r\n align-items: center;\r\n }\r\n\r\n .top-bar-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: rgba(255, 255, 255, 0.8);\r\n font-size: 12px;\r\n font-weight: 400;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n .top-bar-item svg {\r\n width: 14px;\r\n height: 14px;\r\n fill: rgba(255, 255, 255, 0.6);\r\n }\r\n\r\n .top-bar-right {\r\n display: flex;\r\n gap: 15px;\r\n align-items: center;\r\n }\r\n\r\n \/* ===== SOCIAL ICON \u2014 now an anchor ===== *\/\r\n .social-icon {\r\n width: 28px;\r\n height: 28px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.08);\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n text-decoration: none;\r\n }\r\n\r\n .social-icon:hover {\r\n background: rgba(255, 255, 255, 0.2);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .social-icon svg {\r\n width: 13px;\r\n height: 13px;\r\n fill: rgba(255, 255, 255, 0.7);\r\n }\r\n\r\n \/* Main Header *\/\r\n .header-main {\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n color: #4169e1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n height: 72px;\r\n transition: height 0.4s ease;\r\n }\r\n\r\n .header.scrolled .header-main {\r\n height: 62px;\r\n color: #4169e1;\r\n }\r\n\r\n \/* Logo *\/\r\n .logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n text-decoration: none;\r\n z-index: 1001;\r\n animation: fadeInLeft 0.8s ease forwards;\r\n }\r\n\r\n .logo-img {\r\n height: 42px;\r\n width: 140px;\r\n transition: all 0.4s ease;\r\n filter: brightness(0) invert(1);\r\n object-fit: contain;\r\n }\r\n\r\n .header.scrolled .logo-img {\r\n height: 19px;\r\n }\r\n\r\n \/* Navigation *\/\r\n .nav {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .nav-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 5px;\r\n align-items: center;\r\n }\r\n\r\n .nav-item {\r\n position: relative;\r\n opacity: 0;\r\n animation: fadeInDown 0.6s ease forwards;\r\n }\r\n\r\n .nav-item:nth-child(1) { animation-delay: 0.1s; }\r\n .nav-item:nth-child(2) { animation-delay: 0.2s; }\r\n .nav-item:nth-child(3) { animation-delay: 0.3s; }\r\n .nav-item:nth-child(4) { animation-delay: 0.4s; }\r\n .nav-item:nth-child(5) { animation-delay: 0.5s; }\r\n\r\n .nav-link {\r\n display: block;\r\n padding: 10px 20px;\r\n color: rgba(255, 255, 255, 0.85);\r\n text-decoration: none;\r\n font-size: 13px;\r\n font-weight: 500;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n position: relative;\r\n transition: all 0.3s ease;\r\n border-radius: 4px;\r\n }\r\n\r\n .nav-link::before {\r\n content: '';\r\n position: absolute;\r\n bottom: 5px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, #ffffff, transparent);\r\n transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n border-radius: 2px;\r\n }\r\n\r\n .nav-link:hover { color: #ffffff; }\r\n .nav-link:hover::before { width: 60%; }\r\n .nav-link.active { color: #ffffff; }\r\n .nav-link.active::before { width: 60%; }\r\n\r\n .nav-link::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 4px;\r\n background: rgba(255, 255, 255, 0);\r\n transition: background 0.3s ease;\r\n }\r\n\r\n .nav-link:hover::after {\r\n background: rgba(255, 255, 255, 0.05);\r\n }\r\n\r\n \/* CTA Button *\/\r\n .nav-cta {\r\n margin-left: 15px;\r\n opacity: 0;\r\n animation: fadeInDown 0.6s ease 0.6s forwards;\r\n }\r\n\r\n .cta-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 28px;\r\n background: #ffffff;\r\n color: #1D3777;\r\n text-decoration: none;\r\n font-size: 12px;\r\n font-weight: 700;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n border-radius: 50px;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .cta-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 0;\r\n height: 0;\r\n background: rgba(29, 55, 119, 0.08);\r\n border-radius: 50%;\r\n transform: translate(-50%, -50%);\r\n transition: width 0.6s ease, height 0.6s ease;\r\n }\r\n\r\n .cta-btn:hover::before { width: 300px; height: 300px; }\r\n .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2); }\r\n\r\n .cta-btn svg {\r\n width: 14px;\r\n height: 14px;\r\n fill: #1D3777;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .cta-btn:hover svg { transform: translateX(3px); }\r\n\r\n \/* Hamburger Menu *\/\r\n .hamburger {\r\n display: none;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n width: 45px;\r\n height: 45px;\r\n cursor: pointer;\r\n z-index: 1001;\r\n background: rgba(255, 255, 255, 0.08);\r\n border-radius: 8px;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .hamburger:hover { background: rgba(255, 255, 255, 0.15); }\r\n\r\n .hamburger-line {\r\n width: 22px;\r\n height: 2px;\r\n background-color: #ffffff;\r\n border-radius: 2px;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n }\r\n\r\n .hamburger-line:nth-child(1) { transform: translateY(-4px); }\r\n .hamburger-line:nth-child(2) { width: 16px; }\r\n .hamburger-line:nth-child(3) { transform: translateY(4px); }\r\n\r\n .hamburger.active .hamburger-line:nth-child(1) { transform: translateY(2px) rotate(45deg); }\r\n .hamburger.active .hamburger-line:nth-child(2) { opacity: 0; width: 0; }\r\n .hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-2px) rotate(-45deg); }\r\n\r\n \/* Mobile Overlay *\/\r\n .mobile-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.5);\r\n z-index: 999;\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\r\n backdrop-filter: blur(4px);\r\n }\r\n\r\n .mobile-overlay.active { opacity: 1; }\r\n\r\n \/* Decorative Line *\/\r\n .header-line {\r\n height: 3px;\r\n background: linear-gradient(90deg,\r\n #1D3777 0%,\r\n #2a4fa0 20%,\r\n #ffffff 50%,\r\n #2a4fa0 80%,\r\n #1D3777 100%\r\n );\r\n background-size: 200% 100%;\r\n animation: shimmer 3s ease infinite;\r\n }\r\n\r\n \/* ===== ANIMATIONS ===== *\/\r\n @keyframes fadeInDown {\r\n from { opacity: 0; transform: translateY(-15px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n @keyframes fadeInLeft {\r\n from { opacity: 0; transform: translateX(-20px); }\r\n to { opacity: 1; transform: translateX(0); }\r\n }\r\n\r\n @keyframes shimmer {\r\n 0% { background-position: -200% 0; }\r\n 100% { background-position: 200% 0; }\r\n }\r\n\r\n @keyframes slideInRight {\r\n from { opacity: 0; transform: translateX(30px); }\r\n to { opacity: 1; transform: translateX(0); }\r\n }\r\n\r\n \/* ===== RESPONSIVE - TABLET ===== *\/\r\n @media (max-width: 1024px) {\r\n .header-main { padding: 0 30px; }\r\n .nav-link { padding: 10px 14px; font-size: 12px; }\r\n .cta-btn { padding: 10px 22px; font-size: 11px; }\r\n .top-bar-content { padding: 0 30px; }\r\n .logo-img { height: 20px; }\r\n .header.scrolled .logo-img { height: 17px; }\r\n }\r\n\r\n \/* ===== RESPONSIVE - MOBILE ===== *\/\r\n @media (max-width: 768px) {\r\n .top-bar { display: none; }\r\n\r\n .header-main { padding: 0 20px; height: 65px; }\r\n .header.scrolled .header-main { height: 58px; }\r\n\r\n \/* ===== MOBILE: keep same blue when scrolled ===== *\/\r\n .header.scrolled {\r\n background-color: #4169e1;\r\n }\r\n\r\n .logo-img { height: 18px; }\r\n .header.scrolled .logo-img { height: 16px; }\r\n\r\n .hamburger { display: flex; }\r\n\r\n .nav {\r\n position: fixed;\r\n top: 0;\r\n right: -100%;\r\n width: 320px;\r\n max-width: 85vw;\r\n height: 100vh;\r\n background: linear-gradient(180deg, #4169e1 0%, #3258c9 50%, #2a4fa0 100%);\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n padding: 100px 30px 40px;\r\n transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n z-index: 1000;\r\n box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);\r\n overflow-y: auto;\r\n }\r\n\r\n .nav.active { right: 0; }\r\n\r\n .nav-list { flex-direction: column; gap: 0; width: 100%; }\r\n\r\n .nav-item {\r\n width: 100%;\r\n opacity: 0;\r\n transform: translateX(30px);\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.06);\r\n }\r\n\r\n .nav.active .nav-item { animation: slideInRight 0.5s ease forwards; }\r\n .nav.active .nav-item:nth-child(1) { animation-delay: 0.15s; }\r\n .nav.active .nav-item:nth-child(2) { animation-delay: 0.25s; }\r\n .nav.active .nav-item:nth-child(3) { animation-delay: 0.35s; }\r\n .nav.active .nav-item:nth-child(4) { animation-delay: 0.45s; }\r\n .nav.active .nav-item:nth-child(5) { animation-delay: 0.55s; }\r\n\r\n .nav-link {\r\n padding: 18px 10px;\r\n font-size: 14px;\r\n letter-spacing: 2px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n border-radius: 0;\r\n }\r\n\r\n .nav-link::before { display: none; }\r\n\r\n .nav-link::after {\r\n content: '\u2192';\r\n font-size: 16px;\r\n opacity: 0;\r\n transform: translateX(-10px);\r\n transition: all 0.3s ease;\r\n position: static;\r\n background: none;\r\n }\r\n\r\n .nav-link:hover::after { opacity: 0.5; transform: translateX(0); background: none; }\r\n\r\n .nav-cta {\r\n margin-left: 0;\r\n margin-top: 30px;\r\n width: 100%;\r\n opacity: 0;\r\n transform: translateX(30px);\r\n }\r\n\r\n .nav.active .nav-cta { animation: slideInRight 0.5s ease 0.65s forwards; }\r\n\r\n .cta-btn { justify-content: center; width: 100%; padding: 16px 28px; font-size: 13px; }\r\n\r\n .mobile-nav-footer {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n margin-top: auto;\r\n padding-top: 30px;\r\n border-top: 1px solid rgba(255, 255, 255, 0.06);\r\n width: 100%;\r\n opacity: 0;\r\n }\r\n\r\n .nav.active .mobile-nav-footer { animation: slideInRight 0.5s ease 0.75s forwards; }\r\n\r\n .mobile-contact-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n color: rgba(255, 255, 255, 0.6);\r\n font-size: 12px;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .mobile-contact-item svg {\r\n width: 16px;\r\n height: 16px;\r\n fill: rgba(255, 255, 255, 0.4);\r\n flex-shrink: 0;\r\n }\r\n\r\n .mobile-social { display: flex; gap: 12px; margin-top: 10px; }\r\n .mobile-social .social-icon { width: 38px; height: 38px; }\r\n .mobile-social .social-icon svg { width: 16px; height: 16px; }\r\n\r\n .mobile-overlay { display: block; pointer-events: none; }\r\n .mobile-overlay.active { pointer-events: all; }\r\n .mobile-nav-footer { display: flex; }\r\n }\r\n\r\n @media (min-width: 769px) {\r\n .mobile-nav-footer { display: none !important; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .header-main { padding: 0 15px; height: 60px; }\r\n .header.scrolled .header-main { height: 54px; }\r\n .logo-img { height: 16px; }\r\n .header.scrolled .logo-img { height: 14px; }\r\n .nav { width: 100%; max-width: 100vw; padding: 90px 25px 30px; }\r\n .hamburger { width: 40px; height: 40px; }\r\n .hamburger-line { width: 20px; }\r\n }\r\n\r\n \/* ===== DEMO CONTENT ===== *\/\r\n .demo-content {\r\n margin-top: 130px;\r\n padding: 60px 40px;\r\n max-width: 1300px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .demo-content h1 {\r\n font-family: 'Montserrat', sans-serif;\r\n color: #1D3777;\r\n font-size: 36px;\r\n font-weight: 700;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .demo-content p {\r\n font-family: 'Montserrat', sans-serif;\r\n color: #666;\r\n font-size: 16px;\r\n line-height: 1.8;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .demo-spacer { height: 1500px; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ===== HEADER START ===== -->\r\n <header class=\"header\" id=\"header\">\r\n\r\n <!-- Top Bar -->\r\n <div class=\"top-bar\">\r\n <div class=\"top-bar-content\">\r\n <div class=\"top-bar-left\">\r\n <div class=\"top-bar-item\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\/><\/svg>\r\n <span>+971 504693914, +971 55 7043405<\/span>\r\n <\/div>\r\n <div class=\"top-bar-item\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/><\/svg>\r\n <span>info@trendzuae.com<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"top-bar-right\">\r\n <!-- ===== LINKED SOCIAL ICONS ===== -->\r\n <a href=\"https:\/\/www.facebook.com\/share\/1FYcTnWXq9\/?mibextid=wwXIfr\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"social-icon\" aria-label=\"Facebook\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z\"\/><\/svg>\r\n <\/a>\r\n <a href=\"https:\/\/www.instagram.com\/trendzlifestyleuae?igsh=MTRxM3AwMjJwemZndQ%3D%3D&utm_source=qr\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"social-icon\" aria-label=\"Instagram\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z\"\/><\/svg>\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/971504693914\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"social-icon\" aria-label=\"WhatsApp\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M19.05 4.91A9.816 9.816 0 0 0 12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01zm-7.01 15.24c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.264 8.264 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24 2.2 0 4.27.86 5.82 2.42a8.183 8.183 0 0 1 2.41 5.83c.02 4.54-3.68 8.23-8.22 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.17.25-.64.81-.78.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43s.17-.25.25-.41c.08-.17.04-.31-.02-.43s-.56-1.34-.76-1.84c-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.22.25-.86.85-.86 2.07s.89 2.4 1.01 2.56c.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.14-1.18-.07-.11-.22-.16-.47-.28z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Main Navigation -->\r\n <div class=\"header-main\">\r\n\r\n <!-- Logo -->\r\n <a href=\"#\" class=\"logo\">\r\n <img decoding=\"async\" src=\"https:\/\/www.trendzuae.com\/wp-content\/uploads\/2026\/02\/Untitled-design-2026-02-20T103457.746.png\" alt=\"Trendz Mattress\" class=\"logo-img\"\r\n onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\r\n <div style=\"display:none; align-items:center; gap:10px;\">\r\n <svg width=\"30\" height=\"30\" viewBox=\"0 0 100 100\" fill=\"none\">\r\n <rect x=\"5\" y=\"35\" width=\"90\" height=\"40\" rx=\"8\" fill=\"white\" opacity=\"0.9\"\/>\r\n <rect x=\"10\" y=\"30\" width=\"80\" height=\"12\" rx=\"6\" fill=\"white\" opacity=\"0.6\"\/>\r\n <rect x=\"15\" y=\"65\" width=\"70\" height=\"8\" rx=\"4\" fill=\"white\" opacity=\"0.3\"\/>\r\n <circle cx=\"30\" cy=\"55\" r=\"4\" fill=\"#1D3777\" opacity=\"0.4\"\/>\r\n <circle cx=\"50\" cy=\"55\" r=\"4\" fill=\"#1D3777\" opacity=\"0.4\"\/>\r\n <circle cx=\"70\" cy=\"55\" r=\"4\" fill=\"#1D3777\" opacity=\"0.4\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Navigation -->\r\n <nav class=\"nav\" id=\"nav\">\r\n <ul class=\"nav-list\">\r\n <li class=\"nav-item\">\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/home\/\" class=\"nav-link active\">Home<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/about-us\/\" class=\"nav-link\">About Us<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/products\/\" class=\"nav-link\">Products<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/blog\/\" class=\"nav-link\">Blog<\/a>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/contact-us\/\" class=\"nav-link\">Contact Us<\/a>\r\n <\/li>\r\n <\/ul>\r\n\r\n <div class=\"nav-cta\">\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/contact-us\/\" class=\"cta-btn\">\r\n <span>Get Quote<\/span>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- Mobile Navigation Footer -->\r\n <div class=\"mobile-nav-footer\">\r\n <div class=\"mobile-contact-item\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\" fill=\"rgba(255,255,255,0.4)\"\/><\/svg>\r\n <span>+971 504693914, +971 55 7043405<\/span>\r\n <\/div>\r\n <div class=\"mobile-contact-item\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\" fill=\"rgba(255,255,255,0.4)\"\/><\/svg>\r\n <span>info@trendzuae.com<\/span>\r\n <\/div>\r\n <div class=\"mobile-social\">\r\n <!-- ===== MOBILE LINKED SOCIAL ICONS ===== -->\r\n <a href=\"https:\/\/www.facebook.com\/trendzuae\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"social-icon\" aria-label=\"Facebook\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z\"\/><\/svg>\r\n <\/a>\r\n <a href=\"https:\/\/www.instagram.com\/trendzuae\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"social-icon\" aria-label=\"Instagram\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z\"\/><\/svg>\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/971504693914\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"social-icon\" aria-label=\"WhatsApp\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M19.05 4.91A9.816 9.816 0 0 0 12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- Hamburger Button -->\r\n <div class=\"hamburger\" id=\"hamburger\" aria-label=\"Menu\" role=\"button\" tabindex=\"0\">\r\n <span class=\"hamburger-line\"><\/span>\r\n <span class=\"hamburger-line\"><\/span>\r\n <span class=\"hamburger-line\"><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/header>\r\n\r\n <!-- Mobile Overlay -->\r\n <div class=\"mobile-overlay\" id=\"mobileOverlay\"><\/div>\r\n <!-- ===== HEADER END ===== -->\r\n\r\n <script>\r\n const hamburger = document.getElementById('hamburger');\r\n const nav = document.getElementById('nav');\r\n const overlay = document.getElementById('mobileOverlay');\r\n const navLinks = document.querySelectorAll('.nav-link');\r\n const body = document.body;\r\n\r\n function toggleMenu() {\r\n hamburger.classList.toggle('active');\r\n nav.classList.toggle('active');\r\n overlay.classList.toggle('active');\r\n body.style.overflow = nav.classList.contains('active') ? 'hidden' : '';\r\n }\r\n\r\n function closeMenu() {\r\n hamburger.classList.remove('active');\r\n nav.classList.remove('active');\r\n overlay.classList.remove('active');\r\n body.style.overflow = '';\r\n }\r\n\r\n hamburger.addEventListener('click', toggleMenu);\r\n overlay.addEventListener('click', closeMenu);\r\n\r\n navLinks.forEach(link => {\r\n link.addEventListener('click', () => {\r\n closeMenu();\r\n navLinks.forEach(l => l.classList.remove('active'));\r\n link.classList.add('active');\r\n });\r\n });\r\n\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape') closeMenu();\r\n });\r\n\r\n const header = document.getElementById('header');\r\n let ticking = false;\r\n\r\n function updateHeader() {\r\n header.classList.toggle('scrolled', window.scrollY > 50);\r\n ticking = false;\r\n }\r\n\r\n window.addEventListener('scroll', () => {\r\n if (!ticking) {\r\n window.requestAnimationFrame(updateHeader);\r\n ticking = true;\r\n }\r\n });\r\n\r\n window.addEventListener('resize', () => {\r\n if (window.innerWidth > 768) closeMenu();\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-430a305 e-con-full e-flex e-con e-parent\" data-id=\"430a305\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b29b2f3 elementor-widget elementor-widget-html\" data-id=\"b29b2f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ===== Add this CSS inside your existing <style> tag or in a new <style> block ===== -->\r\n<style>\r\n \/* ============================================\r\n ===== HERO SLIDER SECTION =====\r\n ============================================ *\/\r\n .hero {\r\n position: relative;\r\n width: 100%;\r\n height: 100vh;\r\n min-height: 600px;\r\n max-height: 1000px;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Slider Container *\/\r\n .hero-slider {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n \/* Individual Slide *\/\r\n .hero-slide {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s;\r\n z-index: 1;\r\n }\r\n\r\n .hero-slide.active {\r\n opacity: 1;\r\n visibility: visible;\r\n z-index: 2;\r\n }\r\n\r\n \/* Background Image with Ken Burns *\/\r\n .hero-slide-bg {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n transform: scale(1);\r\n transition: transform 10s ease;\r\n }\r\n\r\n .hero-slide.active .hero-slide-bg {\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* Gradient Overlay *\/\r\n .hero-slide-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(\r\n 110deg,\r\n rgba(29, 55, 119, 0.35) 0%,\r\n rgba(29, 55, 119, 0.15) 25%,\r\n rgba(0, 0, 0, 0.1) 45%,\r\n rgba(29, 55, 119, 0.55) 70%,\r\n rgba(29, 55, 119, 0.88) 100%\r\n );\r\n z-index: 1;\r\n }\r\n\r\n \/* Slide Content Wrapper *\/\r\n .hero-slide-content {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n padding: 0 60px;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n }\r\n\r\n \/* Text Block *\/\r\n .hero-text-block {\r\n max-width: 620px;\r\n text-align: right;\r\n opacity: 0;\r\n transform: translateX(80px);\r\n transition: all 0s;\r\n }\r\n\r\n .hero-slide.active .hero-text-block {\r\n opacity: 1;\r\n transform: translateX(0);\r\n transition: opacity 1s ease 0.3s, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;\r\n }\r\n\r\n \/* Subtitle *\/\r\n .hero-subtitle {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 14px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n letter-spacing: 5px;\r\n text-transform: uppercase;\r\n color: rgba(255, 255, 255, 0.9);\r\n margin-bottom: 22px;\r\n opacity: 0;\r\n transform: translateY(25px);\r\n transition: all 0s;\r\n }\r\n\r\n .hero-slide.active .hero-subtitle {\r\n opacity: 1;\r\n transform: translateY(0);\r\n transition: opacity 0.7s ease 0.5s, transform 0.7s ease 0.5s;\r\n }\r\n\r\n .hero-subtitle-line {\r\n width: 55px;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7));\r\n display: inline-block;\r\n }\r\n\r\n \/* Title *\/\r\n .hero-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 58px;\r\n font-weight: 800;\r\n color: #ffffff;\r\n line-height: 1.08;\r\n margin-bottom: 38px;\r\n text-shadow: 0 4px 40px rgba(0, 0, 0, 0.25);\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition: all 0s;\r\n }\r\n\r\n .hero-slide.active .hero-title {\r\n opacity: 1;\r\n transform: translateY(0);\r\n transition: opacity 0.9s ease 0.65s, transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.65s;\r\n }\r\n\r\n .hero-title span {\r\n color: #a8c0ff;\r\n }\r\n\r\n \/* Buttons *\/\r\n .hero-buttons {\r\n display: flex;\r\n gap: 16px;\r\n justify-content: flex-end;\r\n opacity: 0;\r\n transform: translateY(25px);\r\n transition: all 0s;\r\n }\r\n\r\n .hero-slide.active .hero-buttons {\r\n opacity: 1;\r\n transform: translateY(0);\r\n transition: opacity 0.8s ease 0.85s, transform 0.8s ease 0.85s;\r\n }\r\n\r\n \/* Primary Button *\/\r\n .hero-btn-primary {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 17px 38px;\r\n background: #ffffff;\r\n color: #1D3777;\r\n text-decoration: none;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 13px;\r\n font-weight: 700;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n border-radius: 50px;\r\n border: 2px solid #ffffff;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n }\r\n\r\n .hero-btn-primary::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 0;\r\n height: 0;\r\n background: #1D3777;\r\n border-radius: 50%;\r\n transform: translate(-50%, -50%);\r\n transition: width 0.5s ease, height 0.5s ease;\r\n z-index: 0;\r\n }\r\n\r\n .hero-btn-primary:hover::before {\r\n width: 420px;\r\n height: 420px;\r\n }\r\n\r\n .hero-btn-primary:hover {\r\n color: #ffffff;\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);\r\n border-color: #1D3777;\r\n }\r\n\r\n .hero-btn-primary span,\r\n .hero-btn-primary svg {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .hero-btn-primary svg {\r\n width: 16px;\r\n height: 16px;\r\n fill: #1D3777;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .hero-btn-primary:hover svg {\r\n fill: #ffffff;\r\n transform: translateX(4px);\r\n }\r\n\r\n \/* Secondary Button *\/\r\n .hero-btn-secondary {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 17px 38px;\r\n background: transparent;\r\n color: #ffffff;\r\n text-decoration: none;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 13px;\r\n font-weight: 600;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n border-radius: 50px;\r\n border: 2px solid rgba(255, 255, 255, 0.35);\r\n transition: all 0.4s ease;\r\n cursor: pointer;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-btn-secondary::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 0;\r\n height: 0;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 50%;\r\n transform: translate(-50%, -50%);\r\n transition: width 0.5s ease, height 0.5s ease;\r\n }\r\n\r\n .hero-btn-secondary:hover::before {\r\n width: 400px;\r\n height: 400px;\r\n }\r\n\r\n .hero-btn-secondary:hover {\r\n border-color: rgba(255, 255, 255, 0.9);\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .hero-btn-secondary span,\r\n .hero-btn-secondary svg {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .hero-btn-secondary svg {\r\n width: 16px;\r\n height: 16px;\r\n fill: #ffffff;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .hero-btn-secondary:hover svg {\r\n transform: translateX(4px);\r\n }\r\n\r\n \/* ===== Navigation Arrows ===== *\/\r\n .slider-arrows {\r\n position: absolute;\r\n bottom: 55px;\r\n left: 60px;\r\n display: flex;\r\n gap: 12px;\r\n z-index: 10;\r\n }\r\n\r\n .slider-arrow {\r\n width: 54px;\r\n height: 54px;\r\n border-radius: 50%;\r\n border: 2px solid rgba(255, 255, 255, 0.25);\r\n background: rgba(255, 255, 255, 0.05);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .slider-arrow:hover {\r\n background: #ffffff;\r\n border-color: #ffffff;\r\n transform: scale(1.12);\r\n box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .slider-arrow:active {\r\n transform: scale(0.95);\r\n }\r\n\r\n .slider-arrow svg {\r\n width: 20px;\r\n height: 20px;\r\n fill: rgba(255, 255, 255, 0.85);\r\n transition: fill 0.3s ease;\r\n }\r\n\r\n .slider-arrow:hover svg {\r\n fill: #1D3777;\r\n }\r\n\r\n \/* ===== Slider Dots ===== *\/\r\n .slider-dots {\r\n position: absolute;\r\n bottom: 35px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n gap: 16px;\r\n z-index: 10;\r\n }\r\n\r\n .slider-dot {\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n border: 2px solid rgba(255, 255, 255, 0.45);\r\n background: transparent;\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n position: relative;\r\n }\r\n\r\n .slider-dot::after {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 0;\r\n height: 0;\r\n background: #ffffff;\r\n border-radius: 50%;\r\n transform: translate(-50%, -50%);\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .slider-dot.active {\r\n border-color: #ffffff;\r\n transform: scale(1.25);\r\n box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n .slider-dot.active::after {\r\n width: 6px;\r\n height: 6px;\r\n }\r\n\r\n .slider-dot:hover {\r\n border-color: rgba(255, 255, 255, 0.8);\r\n transform: scale(1.15);\r\n }\r\n\r\n \/* ===== Slide Counter ===== *\/\r\n .slide-counter {\r\n position: absolute;\r\n bottom: 60px;\r\n right: 60px;\r\n z-index: 10;\r\n display: flex;\r\n align-items: baseline;\r\n gap: 4px;\r\n }\r\n\r\n .slide-counter-current {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 44px;\r\n font-weight: 800;\r\n color: #ffffff;\r\n line-height: 1;\r\n text-shadow: 0 3px 20px rgba(0, 0, 0, 0.25);\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .slide-counter-separator {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 20px;\r\n margin: 0 5px;\r\n color: rgba(255, 255, 255, 0.35);\r\n font-weight: 300;\r\n }\r\n\r\n .slide-counter-total {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 18px;\r\n font-weight: 400;\r\n color: rgba(255, 255, 255, 0.35);\r\n }\r\n\r\n \/* ===== Progress Bar ===== *\/\r\n .slider-progress {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 4px;\r\n background: rgba(255, 255, 255, 0.08);\r\n z-index: 10;\r\n }\r\n\r\n .slider-progress-bar {\r\n height: 100%;\r\n background: linear-gradient(90deg, #a8c0ff, #ffffff);\r\n width: 0%;\r\n border-radius: 0 3px 3px 0;\r\n box-shadow: 0 0 15px rgba(168, 192, 255, 0.5);\r\n }\r\n\r\n .slider-progress-bar.animate {\r\n animation: progressFill 6s linear forwards;\r\n }\r\n\r\n @keyframes progressFill {\r\n from { width: 0%; }\r\n to { width: 100%; }\r\n }\r\n\r\n \/* ===== Scroll Down Indicator ===== *\/\r\n .scroll-indicator {\r\n position: absolute;\r\n bottom: 28px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 6px;\r\n z-index: 10;\r\n opacity: 0.5;\r\n transition: opacity 0.3s ease;\r\n cursor: pointer;\r\n }\r\n\r\n .scroll-indicator:hover {\r\n opacity: 1;\r\n }\r\n\r\n .scroll-mouse {\r\n width: 24px;\r\n height: 38px;\r\n border: 2px solid rgba(255, 255, 255, 0.45);\r\n border-radius: 20px;\r\n position: relative;\r\n }\r\n\r\n .scroll-mouse::after {\r\n content: '';\r\n position: absolute;\r\n top: 7px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 3px;\r\n height: 8px;\r\n background: #ffffff;\r\n border-radius: 3px;\r\n animation: scrollBounce 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes scrollBounce {\r\n 0%, 100% { opacity: 1; top: 7px; }\r\n 50% { opacity: 0.2; top: 20px; }\r\n }\r\n\r\n \/* Decorative Floating Elements *\/\r\n .hero-decor {\r\n position: absolute;\r\n z-index: 3;\r\n pointer-events: none;\r\n }\r\n\r\n .hero-decor-circle {\r\n width: 300px;\r\n height: 300px;\r\n border: 1px solid rgba(255, 255, 255, 0.06);\r\n border-radius: 50%;\r\n position: absolute;\r\n top: 15%;\r\n right: -80px;\r\n animation: floatCircle 8s ease-in-out infinite;\r\n }\r\n\r\n .hero-decor-circle-2 {\r\n width: 200px;\r\n height: 200px;\r\n border: 1px solid rgba(255, 255, 255, 0.04);\r\n border-radius: 50%;\r\n position: absolute;\r\n bottom: 20%;\r\n left: 10%;\r\n animation: floatCircle 10s ease-in-out infinite reverse;\r\n }\r\n\r\n @keyframes floatCircle {\r\n 0%, 100% { transform: translateY(0) rotate(0deg); }\r\n 50% { transform: translateY(-20px) rotate(5deg); }\r\n }\r\n\r\n \/* ============================================\r\n ===== HERO RESPONSIVE - TABLET =====\r\n ============================================ *\/\r\n @media (max-width: 1024px) {\r\n .hero {\r\n min-height: 550px;\r\n }\r\n\r\n .hero-slide-content {\r\n padding: 0 40px;\r\n }\r\n\r\n .hero-title {\r\n font-size: 46px;\r\n }\r\n\r\n .hero-text-block {\r\n max-width: 520px;\r\n }\r\n\r\n .hero-btn-primary,\r\n .hero-btn-secondary {\r\n padding: 15px 32px;\r\n font-size: 12px;\r\n }\r\n\r\n .slider-arrows {\r\n left: 40px;\r\n bottom: 45px;\r\n }\r\n\r\n .slider-arrow {\r\n width: 48px;\r\n height: 48px;\r\n }\r\n\r\n .slider-arrow svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n\r\n .slide-counter {\r\n right: 40px;\r\n bottom: 50px;\r\n }\r\n\r\n .slide-counter-current {\r\n font-size: 36px;\r\n }\r\n\r\n .hero-decor-circle {\r\n width: 220px;\r\n height: 220px;\r\n }\r\n\r\n .hero-decor-circle-2 {\r\n width: 150px;\r\n height: 150px;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n ===== HERO RESPONSIVE - MOBILE =====\r\n ============================================ *\/\r\n @media (max-width: 768px) {\r\n .hero {\r\n height: 100vh;\r\n min-height: 520px;\r\n max-height: none;\r\n }\r\n\r\n .hero-slide-overlay {\r\n background: linear-gradient(\r\n 180deg,\r\n rgba(29, 55, 119, 0.2) 0%,\r\n rgba(29, 55, 119, 0.15) 25%,\r\n rgba(0, 0, 0, 0.15) 45%,\r\n rgba(29, 55, 119, 0.65) 70%,\r\n rgba(29, 55, 119, 0.93) 100%\r\n );\r\n }\r\n\r\n .hero-slide-content {\r\n padding: 0 25px;\r\n padding-bottom: 130px;\r\n align-items: flex-end;\r\n justify-content: center;\r\n }\r\n\r\n .hero-text-block {\r\n max-width: 100%;\r\n text-align: center;\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: 10px;\r\n letter-spacing: 3.5px;\r\n justify-content: center;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .hero-subtitle-line {\r\n width: 30px;\r\n }\r\n\r\n .hero-title {\r\n font-size: 30px;\r\n margin-bottom: 28px;\r\n line-height: 1.15;\r\n }\r\n\r\n .hero-buttons {\r\n flex-direction: column;\r\n gap: 12px;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .hero-btn-primary,\r\n .hero-btn-secondary {\r\n padding: 15px 30px;\r\n font-size: 12px;\r\n width: 100%;\r\n max-width: 320px;\r\n justify-content: center;\r\n }\r\n\r\n .slider-arrows {\r\n left: 50%;\r\n transform: translateX(-50%);\r\n bottom: 28px;\r\n gap: 10px;\r\n }\r\n\r\n .slider-arrow {\r\n width: 44px;\r\n height: 44px;\r\n background: rgba(255, 255, 255, 0.08);\r\n }\r\n\r\n .slider-arrow svg {\r\n width: 17px;\r\n height: 17px;\r\n }\r\n\r\n .slider-dots {\r\n bottom: 88px;\r\n gap: 14px;\r\n }\r\n\r\n .slider-dot {\r\n width: 12px;\r\n height: 12px;\r\n }\r\n\r\n .slide-counter {\r\n display: none;\r\n }\r\n\r\n .scroll-indicator {\r\n display: none;\r\n }\r\n\r\n .hero-decor-circle,\r\n .hero-decor-circle-2 {\r\n display: none;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n ===== HERO RESPONSIVE - SMALL MOBILE =====\r\n ============================================ *\/\r\n @media (max-width: 480px) {\r\n .hero {\r\n min-height: 480px;\r\n }\r\n\r\n .hero-slide-content {\r\n padding: 0 18px;\r\n padding-bottom: 115px;\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: 9px;\r\n letter-spacing: 3px;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .hero-title {\r\n font-size: 25px;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .hero-btn-primary,\r\n .hero-btn-secondary {\r\n padding: 13px 26px;\r\n font-size: 11px;\r\n letter-spacing: 1.2px;\r\n }\r\n\r\n .hero-btn-primary svg,\r\n .hero-btn-secondary svg {\r\n width: 14px;\r\n height: 14px;\r\n }\r\n\r\n .slider-arrows {\r\n bottom: 24px;\r\n }\r\n\r\n .slider-arrow {\r\n width: 40px;\r\n height: 40px;\r\n }\r\n\r\n .slider-dots {\r\n bottom: 78px;\r\n gap: 12px;\r\n }\r\n\r\n .slider-dot {\r\n width: 10px;\r\n height: 10px;\r\n }\r\n }\r\n<\/style>\r\n\r\n\r\n<!-- ============================================\r\n ===== HERO SLIDER SECTION HTML =====\r\n ============================================ -->\r\n<section class=\"hero\" id=\"home\">\r\n <div class=\"hero-slider\" id=\"heroSlider\">\r\n\r\n <!-- ===== SLIDE 1 ===== -->\r\n <div class=\"hero-slide active\" data-slide=\"0\">\r\n <div class=\"hero-slide-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1631049307264-da0ec9d70304?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');\"><\/div>\r\n <div class=\"hero-slide-overlay\"><\/div>\r\n <div class=\"hero-slide-content\">\r\n <div class=\"hero-text-block\">\r\n <div class=\"hero-subtitle\">\r\n <span class=\"hero-subtitle-line\"><\/span>\r\n <span>Premium Sleep Solutions<\/span>\r\n <\/div>\r\n <h1 class=\"hero-title\">\r\n Where Better Sleep<br>\r\n <span>Begins<\/span>\r\n <\/h1>\r\n <div class=\"hero-buttons\">\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/products\/\" class=\"hero-btn-primary\">\r\n <span>Explore Collection<\/span>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"\/><\/svg>\r\n <\/a>\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/about-us\/\" class=\"hero-btn-secondary\">\r\n <span>Learn More<\/span>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ===== SLIDE 2 ===== -->\r\n <div class=\"hero-slide\" data-slide=\"1\">\r\n <div class=\"hero-slide-bg\" style=\"background-image: url('https:\/\/www.trendzuae.com\/wp-content\/uploads\/2026\/02\/Spring-mattress-by-Aerocom-mattress.jpg');\"><\/div>\r\n <div class=\"hero-slide-overlay\"><\/div>\r\n <div class=\"hero-slide-content\">\r\n <div class=\"hero-text-block\">\r\n <div class=\"hero-subtitle\">\r\n <span class=\"hero-subtitle-line\"><\/span>\r\n <span>Crafted for Comfort<\/span>\r\n <\/div>\r\n <h1 class=\"hero-title\">\r\n Luxury Mattresses<br>\r\n <span>Built to Last<\/span>\r\n <\/h1>\r\n <div class=\"hero-buttons\">\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/products\/\" class=\"hero-btn-primary\">\r\n <span>Shop Now<\/span>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"\/><\/svg>\r\n <\/a>\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/contact-us\/\" class=\"hero-btn-secondary\">\r\n <span>Contact Us<\/span>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Decorative Circles -->\r\n <div class=\"hero-decor\">\r\n <div class=\"hero-decor-circle\"><\/div>\r\n <div class=\"hero-decor-circle-2\"><\/div>\r\n <\/div>\r\n\r\n <!-- Navigation Arrows -->\r\n <div class=\"slider-arrows\">\r\n <div class=\"slider-arrow\" id=\"prevSlide\" aria-label=\"Previous Slide\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"slider-arrow\" id=\"nextSlide\" aria-label=\"Next Slide\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Dots Pagination -->\r\n <div class=\"slider-dots\" id=\"sliderDots\">\r\n <div class=\"slider-dot active\" data-dot=\"0\"><\/div>\r\n <div class=\"slider-dot\" data-dot=\"1\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"slider-progress\">\r\n <div class=\"slider-progress-bar animate\" id=\"progressBar\"><\/div>\r\n <\/div>\r\n\r\n <!-- Scroll Indicator -->\r\n <div class=\"scroll-indicator\">\r\n <div class=\"scroll-mouse\"><\/div>\r\n <\/div>\r\n<\/section>\r\n<!-- ===== HERO SECTION END ===== -->\r\n\r\n\r\n<!-- ===== Add this JS before closing <\/body> tag ===== -->\r\n<script>\r\n \/\/ ============================================\r\n \/\/ ===== HERO SLIDER FUNCTIONALITY =====\r\n \/\/ ============================================\r\n (function () {\r\n const slides = document.querySelectorAll('.hero-slide');\r\n const dots = document.querySelectorAll('.slider-dot');\r\n const prevBtn = document.getElementById('prevSlide');\r\n const nextBtn = document.getElementById('nextSlide');\r\n const counterCurrent = document.getElementById('slideCounterCurrent');\r\n const progressBar = document.getElementById('progressBar');\r\n const heroSection = document.querySelector('.hero');\r\n\r\n let currentSlide = 0;\r\n const totalSlides = slides.length;\r\n const autoPlayDuration = 6000;\r\n let autoPlayTimer = null;\r\n let isTransitioning = false;\r\n\r\n \/\/ Go to specific slide\r\n function goToSlide(index) {\r\n if (isTransitioning || index === currentSlide) return;\r\n isTransitioning = true;\r\n\r\n \/\/ Remove active\r\n slides[currentSlide].classList.remove('active');\r\n dots[currentSlide].classList.remove('active');\r\n\r\n \/\/ Reset background scale of leaving slide\r\n const leavingBg = slides[currentSlide].querySelector('.hero-slide-bg');\r\n leavingBg.style.transform = 'scale(1)';\r\n\r\n \/\/ Update index\r\n currentSlide = index;\r\n if (currentSlide >= totalSlides) currentSlide = 0;\r\n if (currentSlide < 0) currentSlide = totalSlides - 1;\r\n\r\n \/\/ Activate new slide\r\n slides[currentSlide].classList.add('active');\r\n dots[currentSlide].classList.add('active');\r\n\r\n \/\/ Update counter with animation (if exists)\r\n if (counterCurrent) {\r\n counterCurrent.style.opacity = '0';\r\n counterCurrent.style.transform = 'translateY(-10px)';\r\n setTimeout(() => {\r\n counterCurrent.textContent = String(currentSlide + 1).padStart(2, '0');\r\n counterCurrent.style.opacity = '1';\r\n counterCurrent.style.transform = 'translateY(0)';\r\n }, 200);\r\n }\r\n\r\n \/\/ Reset progress\r\n resetProgress();\r\n\r\n \/\/ Unlock transition\r\n setTimeout(() => {\r\n isTransitioning = false;\r\n }, 1200);\r\n }\r\n\r\n function nextSlideFn() {\r\n goToSlide(currentSlide + 1);\r\n }\r\n\r\n function prevSlideFn() {\r\n goToSlide(currentSlide - 1);\r\n }\r\n\r\n \/\/ Progress bar\r\n function resetProgress() {\r\n progressBar.classList.remove('animate');\r\n void progressBar.offsetWidth;\r\n progressBar.classList.add('animate');\r\n }\r\n\r\n \/\/ Auto play\r\n function startAutoPlay() {\r\n stopAutoPlay();\r\n autoPlayTimer = setInterval(nextSlideFn, autoPlayDuration);\r\n }\r\n\r\n function stopAutoPlay() {\r\n if (autoPlayTimer) {\r\n clearInterval(autoPlayTimer);\r\n autoPlayTimer = null;\r\n }\r\n }\r\n\r\n \/\/ Arrow clicks\r\n nextBtn.addEventListener('click', () => {\r\n nextSlideFn();\r\n startAutoPlay();\r\n });\r\n\r\n prevBtn.addEventListener('click', () => {\r\n prevSlideFn();\r\n startAutoPlay();\r\n });\r\n\r\n \/\/ Dot clicks\r\n dots.forEach(dot => {\r\n dot.addEventListener('click', () => {\r\n const index = parseInt(dot.getAttribute('data-dot'));\r\n goToSlide(index);\r\n startAutoPlay();\r\n });\r\n });\r\n\r\n \/\/ Pause on hover (desktop)\r\n heroSection.addEventListener('mouseenter', stopAutoPlay);\r\n heroSection.addEventListener('mouseleave', startAutoPlay);\r\n\r\n \/\/ Touch swipe (mobile)\r\n let touchStartX = 0;\r\n let touchStartY = 0;\r\n let touchEndX = 0;\r\n const swipeThreshold = 50;\r\n\r\n heroSection.addEventListener('touchstart', (e) => {\r\n touchStartX = e.changedTouches[0].screenX;\r\n touchStartY = e.changedTouches[0].screenY;\r\n stopAutoPlay();\r\n }, { passive: true });\r\n\r\n heroSection.addEventListener('touchend', (e) => {\r\n touchEndX = e.changedTouches[0].screenX;\r\n const diffX = touchStartX - touchEndX;\r\n const diffY = Math.abs(touchStartY - e.changedTouches[0].screenY);\r\n\r\n \/\/ Only horizontal swipe\r\n if (Math.abs(diffX) > swipeThreshold && diffY < 100) {\r\n if (diffX > 0) {\r\n nextSlideFn();\r\n } else {\r\n prevSlideFn();\r\n }\r\n }\r\n startAutoPlay();\r\n }, { passive: true });\r\n\r\n \/\/ Keyboard\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'ArrowRight') { nextSlideFn(); startAutoPlay(); }\r\n if (e.key === 'ArrowLeft') { prevSlideFn(); startAutoPlay(); }\r\n });\r\n\r\n \/\/ Visibility API - pause when tab inactive\r\n document.addEventListener('visibilitychange', () => {\r\n if (document.hidden) {\r\n stopAutoPlay();\r\n } else {\r\n startAutoPlay();\r\n }\r\n });\r\n\r\n \/\/ Initialize\r\n resetProgress();\r\n startAutoPlay();\r\n })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4b5a121 e-con-full e-flex e-con e-parent\" data-id=\"4b5a121\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-68bc37a elementor-widget elementor-widget-html\" data-id=\"68bc37a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n \/* ============================================\r\n ===== PRODUCT CATEGORIES SECTION =====\r\n ============================================ *\/\r\n .categories-section {\r\n position: relative;\r\n padding: 100px 0;\r\n background: #fff;\r\n overflow: hidden;\r\n }\r\n\r\n .categories-container {\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* Section Header *\/\r\n .categories-header {\r\n text-align: center;\r\n margin-bottom: 60px;\r\n }\r\n\r\n .categories-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 24px;\r\n background: rgba(29, 55, 119, 0.05);\r\n border: 1px solid rgba(29, 55, 119, 0.08);\r\n border-radius: 50px;\r\n margin-bottom: 22px;\r\n }\r\n\r\n .categories-badge svg {\r\n width: 16px;\r\n height: 16px;\r\n fill: #1D3777;\r\n }\r\n\r\n .categories-badge span {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: #1D3777;\r\n }\r\n\r\n .categories-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 44px;\r\n font-weight: 800;\r\n color: #1D3777;\r\n line-height: 1.15;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .categories-title span {\r\n position: relative;\r\n display: inline-block;\r\n }\r\n\r\n .categories-title span::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 4px;\r\n left: 0;\r\n width: 100%;\r\n height: 8px;\r\n background: rgba(29, 55, 119, 0.07);\r\n border-radius: 4px;\r\n z-index: -1;\r\n }\r\n\r\n .categories-subtitle {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 16px;\r\n font-weight: 400;\r\n color: #7a8aad;\r\n max-width: 500px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* ===== Grid ===== *\/\r\n .categories-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 28px;\r\n }\r\n\r\n \/* ===== Category Card ===== *\/\r\n .cat-card {\r\n position: relative;\r\n display: block;\r\n text-decoration: none;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n aspect-ratio: 1 \/ 0.75;\r\n cursor: pointer;\r\n box-shadow: 0 10px 40px rgba(29, 55, 119, 0.08);\r\n transition: box-shadow 0.5s ease;\r\n }\r\n\r\n .cat-card:hover {\r\n box-shadow: 0 20px 60px rgba(29, 55, 119, 0.15);\r\n }\r\n\r\n \/* Background Image *\/\r\n .cat-card-bg {\r\n position: absolute;\r\n inset: 0;\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n\r\n .cat-card:hover .cat-card-bg {\r\n transform: scale(1.08);\r\n }\r\n\r\n \/* ===== MINIMAL OVERLAY - Only at Bottom ===== *\/\r\n .cat-card-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n 180deg,\r\n rgba(0, 0, 0, 0) 0%,\r\n rgba(0, 0, 0, 0) 40%,\r\n rgba(0, 0, 0, 0.03) 55%,\r\n rgba(15, 32, 72, 0.35) 75%,\r\n rgba(10, 22, 50, 0.75) 100%\r\n );\r\n transition: all 0.6s ease;\r\n z-index: 1;\r\n }\r\n\r\n .cat-card:hover .cat-card-overlay {\r\n background: linear-gradient(\r\n 180deg,\r\n rgba(0, 0, 0, 0) 0%,\r\n rgba(0, 0, 0, 0) 35%,\r\n rgba(0, 0, 0, 0.05) 55%,\r\n rgba(15, 32, 72, 0.45) 75%,\r\n rgba(10, 22, 50, 0.82) 100%\r\n );\r\n }\r\n\r\n \/* Corner Number *\/\r\n .cat-card-num {\r\n position: absolute;\r\n top: 28px;\r\n left: 28px;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 68px;\r\n font-weight: 900;\r\n color: rgba(255, 255, 255, 0.12);\r\n line-height: 1;\r\n z-index: 2;\r\n transition: all 0.6s ease;\r\n user-select: none;\r\n text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .cat-card:hover .cat-card-num {\r\n color: rgba(255, 255, 255, 0.2);\r\n transform: translateX(6px);\r\n }\r\n\r\n \/* Corner Border Decoration *\/\r\n .cat-card-corner {\r\n position: absolute;\r\n top: 22px;\r\n right: 22px;\r\n width: 55px;\r\n height: 55px;\r\n border-top: 2px solid rgba(255, 255, 255, 0.18);\r\n border-right: 2px solid rgba(255, 255, 255, 0.18);\r\n border-radius: 0 12px 0 0;\r\n z-index: 2;\r\n transition: all 0.5s ease;\r\n }\r\n\r\n .cat-card:hover .cat-card-corner {\r\n width: 75px;\r\n height: 75px;\r\n border-color: rgba(255, 255, 255, 0.35);\r\n }\r\n\r\n \/* ===== Content Area - Bottom ===== *\/\r\n .cat-card-content {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n padding: 40px 36px;\r\n z-index: 2;\r\n display: flex;\r\n align-items: flex-end;\r\n justify-content: space-between;\r\n gap: 20px;\r\n }\r\n\r\n .cat-card-left {\r\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .cat-card:hover .cat-card-left {\r\n transform: translateY(-5px);\r\n }\r\n\r\n \/* Accent Line *\/\r\n .cat-card-accent {\r\n width: 36px;\r\n height: 3px;\r\n background: rgba(255, 255, 255, 0.35);\r\n border-radius: 3px;\r\n margin-bottom: 16px;\r\n transition: all 0.5s ease;\r\n }\r\n\r\n .cat-card:hover .cat-card-accent {\r\n width: 55px;\r\n background: linear-gradient(90deg, #ffffff, #a8c0ff);\r\n box-shadow: 0 0 18px rgba(168, 192, 255, 0.4);\r\n }\r\n\r\n \/* ===== Title ===== *\/\r\n .cat-card-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 28px;\r\n font-weight: 800;\r\n color: #ffffff;\r\n line-height: 1.2;\r\n letter-spacing: 0.5px;\r\n text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n \/* Arrow Button *\/\r\n .cat-card-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 58px;\r\n height: 58px;\r\n min-width: 58px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.15);\r\n border: 2px solid rgba(255, 255, 255, 0.25);\r\n backdrop-filter: blur(8px);\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n cursor: pointer;\r\n }\r\n\r\n .cat-card:hover .cat-card-btn {\r\n background: #ffffff;\r\n border-color: #ffffff;\r\n transform: scale(1.1);\r\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .cat-card-btn svg {\r\n width: 22px;\r\n height: 22px;\r\n fill: rgba(255, 255, 255, 0.9);\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .cat-card:hover .cat-card-btn svg {\r\n fill: #1D3777;\r\n transform: translateX(3px);\r\n }\r\n\r\n \/* ===== View All Products Button ===== *\/\r\n .categories-footer {\r\n text-align: center;\r\n margin-top: 56px;\r\n }\r\n\r\n .categories-view-all {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 14px;\r\n padding: 18px 44px;\r\n background: #4169e1;\r\n color: #ffffff;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n border-radius: 60px;\r\n border: 2px solid #4169e1;\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n box-shadow: 0 8px 30px rgba(29, 55, 119, 0.25);\r\n z-index: 1;\r\n }\r\n\r\n .categories-view-all::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);\r\n transition: left 0.7s ease;\r\n z-index: -1;\r\n }\r\n\r\n .categories-view-all:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .categories-view-all:hover {\r\n background: transparent;\r\n color: #1D3777;\r\n box-shadow: 0 12px 40px rgba(29, 55, 119, 0.2);\r\n transform: translateY(-3px);\r\n }\r\n\r\n .categories-view-all svg {\r\n width: 20px;\r\n height: 20px;\r\n fill: currentColor;\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n .categories-view-all:hover svg {\r\n transform: translateX(5px);\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE - TABLET\r\n ============================================ *\/\r\n @media (max-width: 1024px) {\r\n .categories-section {\r\n padding: 80px 0;\r\n }\r\n\r\n .categories-container {\r\n padding: 0 30px;\r\n }\r\n\r\n .categories-title {\r\n font-size: 36px;\r\n }\r\n\r\n .categories-grid {\r\n gap: 22px;\r\n }\r\n\r\n .cat-card {\r\n border-radius: 20px;\r\n }\r\n\r\n .cat-card-content {\r\n padding: 32px 28px;\r\n }\r\n\r\n .cat-card-title {\r\n font-size: 24px;\r\n }\r\n\r\n .cat-card-num {\r\n font-size: 56px;\r\n top: 22px;\r\n left: 22px;\r\n }\r\n\r\n .cat-card-btn {\r\n width: 52px;\r\n height: 52px;\r\n min-width: 52px;\r\n }\r\n\r\n .cat-card-btn svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n\r\n .cat-card-corner {\r\n width: 45px;\r\n height: 45px;\r\n top: 18px;\r\n right: 18px;\r\n }\r\n\r\n .categories-footer {\r\n margin-top: 44px;\r\n }\r\n\r\n .categories-view-all {\r\n padding: 16px 38px;\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE - MOBILE\r\n ============================================ *\/\r\n @media (max-width: 768px) {\r\n .categories-section {\r\n padding: 60px 0;\r\n }\r\n\r\n .categories-container {\r\n padding: 0 20px;\r\n }\r\n\r\n .categories-header {\r\n margin-bottom: 40px;\r\n }\r\n\r\n .categories-badge {\r\n padding: 8px 18px;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .categories-badge span {\r\n font-size: 10px;\r\n letter-spacing: 2.5px;\r\n }\r\n\r\n .categories-title {\r\n font-size: 30px;\r\n }\r\n\r\n .categories-subtitle {\r\n font-size: 14px;\r\n }\r\n\r\n .categories-grid {\r\n gap: 16px;\r\n }\r\n\r\n .cat-card {\r\n border-radius: 18px;\r\n aspect-ratio: 1 \/ 0.8;\r\n }\r\n\r\n .cat-card-content {\r\n padding: 24px 22px;\r\n }\r\n\r\n .cat-card-title {\r\n font-size: 19px;\r\n }\r\n\r\n .cat-card-accent {\r\n width: 28px;\r\n height: 2.5px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .cat-card-num {\r\n font-size: 44px;\r\n top: 16px;\r\n left: 16px;\r\n }\r\n\r\n .cat-card-btn {\r\n width: 46px;\r\n height: 46px;\r\n min-width: 46px;\r\n }\r\n\r\n .cat-card-btn svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n\r\n .cat-card-corner {\r\n width: 36px;\r\n height: 36px;\r\n top: 14px;\r\n right: 14px;\r\n border-radius: 0 10px 0 0;\r\n }\r\n\r\n .categories-footer {\r\n margin-top: 36px;\r\n }\r\n\r\n .categories-view-all {\r\n padding: 15px 34px;\r\n font-size: 12px;\r\n letter-spacing: 1.2px;\r\n gap: 12px;\r\n }\r\n\r\n .categories-view-all svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE - SMALL MOBILE\r\n ============================================ *\/\r\n @media (max-width: 520px) {\r\n .categories-section {\r\n padding: 50px 0;\r\n }\r\n\r\n .categories-container {\r\n padding: 0 16px;\r\n }\r\n\r\n .categories-title {\r\n font-size: 26px;\r\n }\r\n\r\n .categories-subtitle {\r\n font-size: 13px;\r\n }\r\n\r\n .categories-grid {\r\n grid-template-columns: 1fr;\r\n gap: 16px;\r\n }\r\n\r\n .cat-card {\r\n aspect-ratio: 1 \/ 0.6;\r\n border-radius: 16px;\r\n }\r\n\r\n .cat-card-content {\r\n padding: 26px 24px;\r\n }\r\n\r\n .cat-card-title {\r\n font-size: 23px;\r\n }\r\n\r\n .cat-card-accent {\r\n width: 40px;\r\n background: linear-gradient(90deg, #ffffff, #a8c0ff);\r\n }\r\n\r\n .cat-card-num {\r\n font-size: 52px;\r\n top: 18px;\r\n left: 18px;\r\n }\r\n\r\n .cat-card-btn {\r\n width: 50px;\r\n height: 50px;\r\n min-width: 50px;\r\n }\r\n\r\n .cat-card-btn svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n\r\n .cat-card-corner {\r\n width: 42px;\r\n height: 42px;\r\n top: 16px;\r\n right: 16px;\r\n border-color: rgba(255, 255, 255, 0.25);\r\n }\r\n\r\n .categories-footer {\r\n margin-top: 32px;\r\n }\r\n\r\n .categories-view-all {\r\n padding: 14px 32px;\r\n font-size: 12px;\r\n width: 100%;\r\n justify-content: center;\r\n border-radius: 14px;\r\n }\r\n }\r\n\r\n @media (max-width: 380px) {\r\n .cat-card {\r\n aspect-ratio: 1 \/ 0.65;\r\n }\r\n\r\n .cat-card-title {\r\n font-size: 20px;\r\n }\r\n\r\n .cat-card-content {\r\n padding: 22px 20px;\r\n }\r\n\r\n .cat-card-num {\r\n font-size: 44px;\r\n }\r\n\r\n .cat-card-btn {\r\n width: 44px;\r\n height: 44px;\r\n min-width: 44px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<section class=\"categories-section\" id=\"products\">\r\n <div class=\"categories-container\">\r\n\r\n <!-- Header -->\r\n <div class=\"categories-header\">\r\n <div class=\"categories-badge\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z\"\/><\/svg>\r\n <span>Our Collection<\/span>\r\n <\/div>\r\n <h2 class=\"categories-title\">Product <span>Categories<\/span><\/h2>\r\n <p class=\"categories-subtitle\">\r\n Explore our premium range of sleep, bath & home essentials crafted for ultimate comfort.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- Grid -->\r\n <div class=\"categories-grid\">\r\n\r\n <!-- Card 1 \u2014 Mattress -->\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/products\/\" class=\"cat-card\">\r\n <div class=\"cat-card-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1631049307264-da0ec9d70304?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');\"><\/div>\r\n <div class=\"cat-card-overlay\"><\/div>\r\n \r\n <div class=\"cat-card-corner\"><\/div>\r\n <div class=\"cat-card-content\">\r\n <div class=\"cat-card-left\">\r\n <div class=\"cat-card-accent\"><\/div>\r\n <h3 class=\"cat-card-title\">Mattress<\/h3>\r\n <\/div>\r\n <div class=\"cat-card-btn\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Card 2 \u2014 Bed Linen -->\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/products\/\" class=\"cat-card\">\r\n <div class=\"cat-card-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1522771739844-6a9f6d5f14af?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');\"><\/div>\r\n <div class=\"cat-card-overlay\"><\/div>\r\n \r\n <div class=\"cat-card-corner\"><\/div>\r\n <div class=\"cat-card-content\">\r\n <div class=\"cat-card-left\">\r\n <div class=\"cat-card-accent\"><\/div>\r\n <h3 class=\"cat-card-title\">Bed Linen<\/h3>\r\n <\/div>\r\n <div class=\"cat-card-btn\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Card 3 \u2014 Bedding Accessories -->\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/products\/\" class=\"cat-card\">\r\n <div class=\"cat-card-bg\" style=\"background-image: url('https:\/\/www.trendzuae.com\/wp-content\/uploads\/2026\/02\/bedding-quilts.avif');\"><\/div>\r\n <div class=\"cat-card-overlay\"><\/div>\r\n \r\n <div class=\"cat-card-corner\"><\/div>\r\n <div class=\"cat-card-content\">\r\n <div class=\"cat-card-left\">\r\n <div class=\"cat-card-accent\"><\/div>\r\n <h3 class=\"cat-card-title\">Bedding Accessories<\/h3>\r\n <\/div>\r\n <div class=\"cat-card-btn\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Card 4 \u2014 Bath Essentials -->\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/products\/\" class=\"cat-card\">\r\n <div class=\"cat-card-bg\" style=\"background-image: url('https:\/\/www.trendzuae.com\/wp-content\/uploads\/2026\/02\/The-softest-towels-youll-ever-own-they-dry-quickly-and-look-good-too_.jpg');\"><\/div>\r\n <div class=\"cat-card-overlay\"><\/div>\r\n \r\n <div class=\"cat-card-corner\"><\/div>\r\n <div class=\"cat-card-content\">\r\n <div class=\"cat-card-left\">\r\n <div class=\"cat-card-accent\"><\/div>\r\n <h3 class=\"cat-card-title\">Bath Essentials<\/h3>\r\n <\/div>\r\n <div class=\"cat-card-btn\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Card 5 \u2014 Curtains -->\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/products\/\" class=\"cat-card\">\r\n <div class=\"cat-card-bg\" style=\"background-image: url('https:\/\/www.trendzuae.com\/wp-content\/uploads\/2026\/02\/71lyr8euzWL._AC_SL1300_.jpg');\"><\/div>\r\n <div class=\"cat-card-overlay\"><\/div>\r\n \r\n <div class=\"cat-card-corner\"><\/div>\r\n <div class=\"cat-card-content\">\r\n <div class=\"cat-card-left\">\r\n <div class=\"cat-card-accent\"><\/div>\r\n <h3 class=\"cat-card-title\">Curtains<\/h3>\r\n <\/div>\r\n <div class=\"cat-card-btn\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Card 6 \u2014 Wallpapers -->\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/products\/\" class=\"cat-card\">\r\n <div class=\"cat-card-bg\" style=\"background-image: url('https:\/\/www.trendzuae.com\/wp-content\/uploads\/2026\/02\/81R7enCMWOL._AC_SL1500_.jpg');\"><\/div>\r\n <div class=\"cat-card-overlay\"><\/div>\r\n \r\n <div class=\"cat-card-corner\"><\/div>\r\n <div class=\"cat-card-content\">\r\n <div class=\"cat-card-left\">\r\n <div class=\"cat-card-accent\"><\/div>\r\n <h3 class=\"cat-card-title\">Wallpapers<\/h3>\r\n <\/div>\r\n <div class=\"cat-card-btn\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <!-- View All Products Button -->\r\n <div class=\"categories-footer\">\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/products\/\" class=\"categories-view-all\">\r\n View All Products\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ed96e1c e-con-full e-flex e-con e-parent\" data-id=\"ed96e1c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0330e56 elementor-widget elementor-widget-html\" data-id=\"0330e56\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n \/* ============================================\r\n ===== OUR BRANDS SECTION =====\r\n ============================================ *\/\r\n .brands-section {\r\n position: relative;\r\n padding: 50px 40px;\r\n background: #ffffff;\r\n overflow: hidden;\r\n }\r\n\r\n .brands-container {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Header *\/\r\n .brands-header {\r\n text-align: center;\r\n margin-bottom: 55px;\r\n }\r\n\r\n .brands-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 26px;\r\n background: rgba(29, 55, 119, 0.04);\r\n border: 1px solid rgba(29, 55, 119, 0.07);\r\n border-radius: 50px;\r\n margin-bottom: 22px;\r\n }\r\n\r\n .brands-badge svg {\r\n width: 15px;\r\n height: 15px;\r\n fill: #1D3777;\r\n }\r\n\r\n .brands-badge span {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: #1D3777;\r\n }\r\n\r\n .brands-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 44px;\r\n font-weight: 800;\r\n color: #1D3777;\r\n line-height: 1.15;\r\n }\r\n\r\n .brands-title span {\r\n position: relative;\r\n display: inline-block;\r\n }\r\n\r\n .brands-title span::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 4px;\r\n left: 0;\r\n width: 100%;\r\n height: 8px;\r\n background: rgba(29, 55, 119, 0.06);\r\n border-radius: 4px;\r\n z-index: -1;\r\n }\r\n\r\n \/* ===== Brands Grid ===== *\/\r\n .brands-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 40px;\r\n align-items: center;\r\n }\r\n\r\n \/* ===== Brand Image ===== *\/\r\n .brand-image {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 20px;\r\n }\r\n\r\n .brand-image img {\r\n max-width: 100%;\r\n max-height: 120px;\r\n width: auto;\r\n height: auto;\r\n object-fit: contain;\r\n transition: transform 0.4s ease, opacity 0.4s ease;\r\n opacity: 0.85;\r\n }\r\n\r\n .brand-image:hover img {\r\n transform: scale(1.08);\r\n opacity: 1;\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE - TABLET\r\n ============================================ *\/\r\n @media (max-width: 1024px) {\r\n .brands-section {\r\n padding: 75px 30px;\r\n }\r\n\r\n .brands-header {\r\n margin-bottom: 45px;\r\n }\r\n\r\n .brands-title {\r\n font-size: 36px;\r\n }\r\n\r\n .brands-grid {\r\n gap: 30px;\r\n }\r\n\r\n .brand-image img {\r\n max-height: 100px;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE - MOBILE\r\n ============================================ *\/\r\n @media (max-width: 768px) {\r\n .brands-section {\r\n padding: 60px 20px;\r\n }\r\n\r\n .brands-header {\r\n margin-bottom: 35px;\r\n }\r\n\r\n .brands-badge {\r\n padding: 8px 20px;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .brands-badge span {\r\n font-size: 10px;\r\n letter-spacing: 2.5px;\r\n }\r\n\r\n .brands-title {\r\n font-size: 30px;\r\n }\r\n\r\n .brands-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 25px;\r\n }\r\n\r\n .brand-image {\r\n padding: 15px;\r\n }\r\n\r\n .brand-image img {\r\n max-height: 80px;\r\n }\r\n .brand-image:last-child {\r\n grid-column: 1 \/ -1;\r\n justify-self: center;\r\n}\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE - SMALL MOBILE\r\n ============================================ *\/\r\n @media (max-width: 480px) {\r\n .brands-section {\r\n padding: 50px 16px;\r\n }\r\n\r\n .brands-title {\r\n font-size: 26px;\r\n }\r\n\r\n .brands-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n\r\n .brand-image {\r\n padding: 12px;\r\n }\r\n\r\n .brand-image img {\r\n max-height: 70px;\r\n }\r\n }\r\n<\/style>\r\n\r\n\r\n<!-- ============================================\r\n ===== OUR BRANDS SECTION =====\r\n ============================================ -->\r\n<section class=\"brands-section\" id=\"brands\">\r\n <div class=\"brands-container\">\r\n\r\n <!-- Header -->\r\n <div class=\"brands-header\">\r\n <div class=\"brands-badge\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg>\r\n <span>Our Brands<\/span>\r\n <\/div>\r\n <h2 class=\"brands-title\">Brands We <span>Offer<\/span><\/h2>\r\n <\/div>\r\n\r\n <!-- Brands Grid -->\r\n <div class=\"brands-grid\">\r\n\r\n <!-- Brand 1 -->\r\n <div class=\"brand-image\">\r\n <img decoding=\"async\" src=\"https:\/\/www.trendzuae.com\/wp-content\/uploads\/2026\/02\/dolcevitanewpnglogo-1753188882277-e1772870137953.webp\" alt=\"Dolce Vita\" loading=\"lazy\">\r\n <\/div>\r\n\r\n <!-- Brand 2 -->\r\n <div class=\"brand-image\">\r\n <img decoding=\"async\" src=\"https:\/\/www.trendzuae.com\/wp-content\/uploads\/2026\/02\/sleepsoul-logo-240x76-1.png\" alt=\"SleepLux\" loading=\"lazy\">\r\n <\/div>\r\n\r\n <!-- Brand 3 -->\r\n <div class=\"brand-image\">\r\n <img decoding=\"async\" src=\"https:\/\/www.trendzuae.com\/wp-content\/uploads\/2026\/03\/Better-Sleep-Logo-001_page-0001-1-e1772870087724.jpg\" alt=\"AquaVel\" loading=\"lazy\">\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ce35f81 e-con-full e-flex e-con e-parent\" data-id=\"ce35f81\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fdeb01c elementor-widget elementor-widget-html\" data-id=\"fdeb01c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ===== Add this CSS inside your existing <style> tag ===== -->\r\n<style>\r\n \/* ============================================\r\n ===== FEATURES SECTION =====\r\n ============================================ *\/\r\n .features-section {\r\n position: relative;\r\n padding: 0;\r\n background: #4169e1;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Decorative Background *\/\r\n .features-section::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background:\r\n radial-gradient(circle at 10% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),\r\n radial-gradient(circle at 90% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);\r\n pointer-events: none;\r\n }\r\n\r\n \/* Animated Diagonal Lines *\/\r\n .features-bg-lines {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n pointer-events: none;\r\n }\r\n\r\n .features-bg-lines::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: repeating-linear-gradient(\r\n 45deg,\r\n transparent,\r\n transparent 80px,\r\n rgba(255, 255, 255, 0.008) 80px,\r\n rgba(255, 255, 255, 0.008) 81px\r\n );\r\n animation: featureLineMove 25s linear infinite;\r\n }\r\n\r\n @keyframes featureLineMove {\r\n 0% { transform: translate(0, 0); }\r\n 100% { transform: translate(80px, 80px); }\r\n }\r\n\r\n .features-container {\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* Features Grid *\/\r\n .features-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 0;\r\n }\r\n\r\n \/* Individual Feature Box *\/\r\n .feature-box {\r\n padding: 55px 35px;\r\n text-align: center;\r\n position: relative;\r\n cursor: default;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n \/* Vertical Dividers *\/\r\n .feature-box::after {\r\n content: '';\r\n position: absolute;\r\n top: 25%;\r\n right: 0;\r\n width: 1px;\r\n height: 50%;\r\n background: linear-gradient(\r\n to bottom,\r\n transparent,\r\n rgba(255, 255, 255, 0.1),\r\n transparent\r\n );\r\n }\r\n\r\n .feature-box:last-child::after {\r\n display: none;\r\n }\r\n\r\n \/* Hover Glow Background *\/\r\n .feature-box::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(\r\n 180deg,\r\n rgba(255, 255, 255, 0.04) 0%,\r\n rgba(255, 255, 255, 0) 100%\r\n );\r\n opacity: 0;\r\n transition: opacity 0.5s ease;\r\n }\r\n\r\n .feature-box:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .feature-box:hover {\r\n transform: translateY(-5px);\r\n }\r\n\r\n \/* Icon Container *\/\r\n .feature-icon-wrap {\r\n position: relative;\r\n width: 80px;\r\n height: 80px;\r\n margin: 0 auto 28px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n \/* Outer Ring *\/\r\n .feature-icon-ring {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n border: 1.5px solid rgba(255, 255, 255, 0.1);\r\n transition: all 0.5s ease;\r\n }\r\n\r\n .feature-box:hover .feature-icon-ring {\r\n border-color: rgba(255, 255, 255, 0.25);\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* Inner Circle *\/\r\n .feature-icon-circle {\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.06);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .feature-box:hover .feature-icon-circle {\r\n background: #ffffff;\r\n border-color: #ffffff;\r\n transform: scale(1.08);\r\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .feature-icon-circle svg {\r\n width: 28px;\r\n height: 28px;\r\n fill: rgba(255, 255, 255, 0.85);\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .feature-box:hover .feature-icon-circle svg {\r\n fill: #1D3777;\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* Pulse Animation on Hover *\/\r\n .feature-icon-pulse {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 50%;\r\n border: 1px solid rgba(255, 255, 255, 0);\r\n transform: translate(-50%, -50%);\r\n pointer-events: none;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .feature-box:hover .feature-icon-pulse {\r\n animation: featurePulse 1.5s ease-out infinite;\r\n }\r\n\r\n @keyframes featurePulse {\r\n 0% {\r\n width: 64px;\r\n height: 64px;\r\n border-color: rgba(255, 255, 255, 0.3);\r\n opacity: 1;\r\n }\r\n 100% {\r\n width: 110px;\r\n height: 110px;\r\n border-color: rgba(255, 255, 255, 0);\r\n opacity: 0;\r\n }\r\n }\r\n\r\n \/* Feature Title *\/\r\n .feature-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 15px;\r\n font-weight: 700;\r\n color: #ffffff;\r\n letter-spacing: 0.8px;\r\n margin-bottom: 12px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .feature-box:hover .feature-title {\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* Feature Description *\/\r\n .feature-desc {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 13px;\r\n font-weight: 400;\r\n color: rgba(255, 255, 255, 0.5);\r\n line-height: 1.7;\r\n max-width: 220px;\r\n margin: 0 auto;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .feature-box:hover .feature-desc {\r\n color: rgba(255, 255, 255, 0.7);\r\n }\r\n\r\n \/* Bottom Accent Line per Box *\/\r\n .feature-accent {\r\n width: 30px;\r\n height: 3px;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 3px;\r\n margin: 20px auto 0;\r\n transition: all 0.5s ease;\r\n }\r\n\r\n .feature-box:hover .feature-accent {\r\n width: 50px;\r\n background: linear-gradient(90deg, #a8c0ff, #ffffff);\r\n box-shadow: 0 0 12px rgba(168, 192, 255, 0.4);\r\n }\r\n\r\n \/* ============================================\r\n ===== FEATURES RESPONSIVE - TABLET =====\r\n ============================================ *\/\r\n @media (max-width: 1024px) {\r\n .features-container {\r\n padding: 0 30px;\r\n }\r\n\r\n .feature-box {\r\n padding: 45px 25px;\r\n }\r\n\r\n .feature-icon-wrap {\r\n width: 72px;\r\n height: 72px;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .feature-icon-circle {\r\n width: 58px;\r\n height: 58px;\r\n }\r\n\r\n .feature-icon-circle svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n\r\n .feature-title {\r\n font-size: 14px;\r\n }\r\n\r\n .feature-desc {\r\n font-size: 12px;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n ===== FEATURES RESPONSIVE - MOBILE =====\r\n ============================================ *\/\r\n @media (max-width: 768px) {\r\n .features-container {\r\n padding: 0 20px;\r\n }\r\n\r\n .features-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .feature-box {\r\n padding: 40px 22px;\r\n }\r\n\r\n \/* Adjust dividers for 2-column *\/\r\n .feature-box:nth-child(2)::after {\r\n display: none;\r\n }\r\n\r\n .feature-box:nth-child(4)::after {\r\n display: none;\r\n }\r\n\r\n \/* Horizontal divider between rows *\/\r\n .feature-box:nth-child(1),\r\n .feature-box:nth-child(2) {\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.06);\r\n }\r\n\r\n .feature-icon-wrap {\r\n width: 68px;\r\n height: 68px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .feature-icon-circle {\r\n width: 54px;\r\n height: 54px;\r\n }\r\n\r\n .feature-icon-circle svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n\r\n .feature-title {\r\n font-size: 14px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .feature-desc {\r\n font-size: 12px;\r\n max-width: 200px;\r\n }\r\n\r\n .feature-accent {\r\n margin-top: 16px;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n ===== FEATURES RESPONSIVE - SMALL MOBILE =====\r\n ============================================ *\/\r\n @media (max-width: 480px) {\r\n .features-container {\r\n padding: 0;\r\n }\r\n\r\n .features-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .feature-box {\r\n padding: 35px 30px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n text-align: left;\r\n gap: 22px;\r\n }\r\n\r\n \/* All vertical dividers off *\/\r\n .feature-box::after {\r\n display: none;\r\n }\r\n\r\n \/* Horizontal dividers between all items *\/\r\n .feature-box {\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.06);\r\n }\r\n\r\n .feature-box:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .feature-box:nth-child(1),\r\n .feature-box:nth-child(2) {\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.06);\r\n }\r\n\r\n \/* Hover effect horizontal *\/\r\n .feature-box:hover {\r\n transform: translateX(8px) translateY(0);\r\n background: rgba(255, 255, 255, 0.02);\r\n }\r\n\r\n .feature-box::before {\r\n display: none;\r\n }\r\n\r\n .feature-icon-wrap {\r\n width: 60px;\r\n height: 60px;\r\n min-width: 60px;\r\n margin: 0;\r\n }\r\n\r\n .feature-icon-ring {\r\n display: none;\r\n }\r\n\r\n .feature-icon-circle {\r\n width: 56px;\r\n height: 56px;\r\n }\r\n\r\n .feature-icon-circle svg {\r\n width: 22px;\r\n height: 22px;\r\n }\r\n\r\n .feature-text {\r\n flex: 1;\r\n }\r\n\r\n .feature-title {\r\n font-size: 14px;\r\n margin-bottom: 6px;\r\n }\r\n\r\n .feature-desc {\r\n font-size: 12px;\r\n max-width: 100%;\r\n margin: 0;\r\n line-height: 1.6;\r\n }\r\n\r\n .feature-accent {\r\n display: none;\r\n }\r\n\r\n .feature-icon-pulse {\r\n display: none;\r\n }\r\n }\r\n<\/style>\r\n\r\n\r\n<!-- ============================================\r\n ===== FEATURES SECTION HTML =====\r\n ============================================ -->\r\n<section class=\"features-section\">\r\n <div class=\"features-bg-lines\"><\/div>\r\n <div class=\"features-container\">\r\n <div class=\"features-grid\">\r\n\r\n <!-- Feature 1 - Fast Delivery -->\r\n <div class=\"feature-box\">\r\n <div class=\"feature-icon-wrap\">\r\n <div class=\"feature-icon-ring\"><\/div>\r\n <div class=\"feature-icon-pulse\"><\/div>\r\n <div class=\"feature-icon-circle\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M18 18.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5 1.5.67 1.5 1.5 1.5zm1.5-9H17V12h4.46L19.5 9.5zM6 18.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5 1.5.67 1.5 1.5 1.5zM20 8l3 4v5h-2c0 1.66-1.34 3-3 3s-3-1.34-3-3H9c0 1.66-1.34 3-3 3s-3-1.34-3-3H1V6c0-1.11.89-2 2-2h14v4h3zM3 6v9h.76c.55-.61 1.35-1 2.24-1s1.69.39 2.24 1H15V6H3z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"feature-text\">\r\n <h3 class=\"feature-title\">Fast Delivery<\/h3>\r\n <p class=\"feature-desc\">Free and fast doorstep delivery across all locations within 48 hours.<\/p>\r\n <div class=\"feature-accent\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Feature 2 - Best Price Guarantee -->\r\n <div class=\"feature-box\">\r\n <div class=\"feature-icon-wrap\">\r\n <div class=\"feature-icon-ring\"><\/div>\r\n <div class=\"feature-icon-pulse\"><\/div>\r\n <div class=\"feature-icon-circle\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.31-8.86c-1.77-.45-2.34-.94-2.34-1.67 0-.84.79-1.43 2.1-1.43 1.38 0 1.9.66 1.94 1.64h1.71c-.05-1.34-.87-2.57-2.49-2.97V5H11.5v1.69c-1.51.32-2.72 1.3-2.72 2.81 0 1.79 1.49 2.69 3.66 3.21 1.95.46 2.34 1.15 2.34 1.87 0 .53-.39 1.39-2.1 1.39-1.6 0-2.23-.72-2.32-1.64H8.65c.1 1.7 1.36 2.66 2.85 2.97V19h1.73v-1.67c1.52-.29 2.72-1.16 2.73-2.77-.01-2.2-1.9-2.96-3.65-3.42z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"feature-text\">\r\n <h3 class=\"feature-title\">Best Price Guarantee<\/h3>\r\n <p class=\"feature-desc\">Premium quality at unbeatable prices with our best price match promise.<\/p>\r\n <div class=\"feature-accent\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Feature 3 - Supreme Comfort -->\r\n <div class=\"feature-box\">\r\n <div class=\"feature-icon-wrap\">\r\n <div class=\"feature-icon-ring\"><\/div>\r\n <div class=\"feature-icon-pulse\"><\/div>\r\n <div class=\"feature-icon-circle\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M7 13c1.66 0 3-1.34 3-3S8.66 7 7 7s-3 1.34-3 3 1.34 3 3 3zm12-6h-8v7H3V5H1v15h2v-3h18v3h2v-9c0-2.21-1.79-4-4-4z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"feature-text\">\r\n <h3 class=\"feature-title\">Supreme Comfort<\/h3>\r\n <p class=\"feature-desc\">Engineered with advanced sleep technology for cloud-like comfort every night.<\/p>\r\n <div class=\"feature-accent\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Feature 4 - Warranty Assured -->\r\n <div class=\"feature-box\">\r\n <div class=\"feature-icon-wrap\">\r\n <div class=\"feature-icon-ring\"><\/div>\r\n <div class=\"feature-icon-pulse\"><\/div>\r\n <div class=\"feature-icon-circle\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"feature-text\">\r\n <h3 class=\"feature-title\">Warranty Assured<\/h3>\r\n <p class=\"feature-desc\">Up to 10-year manufacturer warranty on every mattress for total peace of mind.<\/p>\r\n <div class=\"feature-accent\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n<!-- ===== FEATURES SECTION END ===== -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-034b019 e-con-full e-flex e-con e-parent\" data-id=\"034b019\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ffd31da elementor-widget elementor-widget-html\" data-id=\"ffd31da\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n \/* ============================================\r\n ===== WHY CHOOSE US SECTION =====\r\n ============================================ *\/\r\n .why-section {\r\n position: relative;\r\n padding: 30px 40px;\r\n background: #ffff;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Subtle Decorative Elements *\/\r\n .why-decor {\r\n position: absolute;\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .why-decor-dots {\r\n top: 60px;\r\n right: 50px;\r\n width: 120px;\r\n height: 120px;\r\n background-image: radial-gradient(circle, rgba(29,55,119,0.06) 1.5px, transparent 1.5px);\r\n background-size: 18px 18px;\r\n }\r\n\r\n .why-decor-dots-2 {\r\n bottom: 80px;\r\n left: 40px;\r\n width: 100px;\r\n height: 100px;\r\n background-image: radial-gradient(circle, rgba(29,55,119,0.04) 1.5px, transparent 1.5px);\r\n background-size: 18px 18px;\r\n }\r\n\r\n .why-decor-line {\r\n top: 50%;\r\n right: 0;\r\n transform: translateY(-50%);\r\n width: 200px;\r\n height: 1px;\r\n background: linear-gradient(90deg, rgba(29,55,119,0.06), transparent);\r\n }\r\n\r\n .why-decor-line-2 {\r\n top: 50%;\r\n left: 0;\r\n transform: translateY(-50%);\r\n width: 200px;\r\n height: 1px;\r\n background: linear-gradient(270deg, rgba(29,55,119,0.06), transparent);\r\n }\r\n\r\n \/* ===== BOXED CONTAINER ===== *\/\r\n .why-container {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n padding: 60px 60px;\r\n background: #fafbfe;\r\n border: 1px solid rgba(29,55,119,0.06);\r\n border-radius: 28px;\r\n position: relative;\r\n z-index: 1;\r\n box-shadow: 0 10px 50px rgba(29,55,119,0.04);\r\n }\r\n\r\n \/* ===== Section Header ===== *\/\r\n .why-header {\r\n text-align: center;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .why-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 26px;\r\n background: rgba(29,55,119,0.04);\r\n border: 1px solid rgba(29,55,119,0.07);\r\n border-radius: 50px;\r\n margin-bottom: 0;\r\n }\r\n\r\n .why-badge svg {\r\n width: 15px;\r\n height: 15px;\r\n fill: #1D3777;\r\n }\r\n\r\n .why-badge span {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: #1D3777;\r\n }\r\n\r\n \/* ===== Main Layout ===== *\/\r\n .why-layout {\r\n display: grid;\r\n grid-template-columns: 1fr 1.15fr;\r\n gap: 55px;\r\n align-items: center;\r\n }\r\n\r\n \/* ===== Left \u2014 Image Block ===== *\/\r\n .why-image-block {\r\n position: relative;\r\n }\r\n\r\n .why-image-main {\r\n width: 100%;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n box-shadow: 0 15px 45px rgba(29,55,119,0.1);\r\n position: relative;\r\n }\r\n\r\n .why-image-main img {\r\n width: 100%;\r\n height: 460px;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.8s ease;\r\n }\r\n\r\n .why-image-main:hover img {\r\n transform: scale(1.04);\r\n }\r\n\r\n \/* Floating Experience Badge *\/\r\n .why-exp-badge {\r\n position: absolute;\r\n bottom: -20px;\r\n right: -20px;\r\n width: 125px;\r\n height: 125px;\r\n border-radius: 22px;\r\n background: #1D3777;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 12px 35px rgba(29,55,119,0.3);\r\n z-index: 2;\r\n transition: transform 0.4s ease;\r\n border: 4px solid #fafbfe;\r\n }\r\n\r\n .why-exp-badge:hover {\r\n transform: translateY(-5px) rotate(-3deg);\r\n }\r\n\r\n .why-exp-number {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 38px;\r\n font-weight: 900;\r\n color: #ffffff;\r\n line-height: 1;\r\n }\r\n\r\n .why-exp-number sup {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #a8c0ff;\r\n }\r\n\r\n .why-exp-text {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 9px;\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.6);\r\n margin-top: 5px;\r\n }\r\n\r\n \/* Corner Frame *\/\r\n .why-image-frame {\r\n position: absolute;\r\n top: -14px;\r\n left: -14px;\r\n width: 100px;\r\n height: 100px;\r\n border-top: 3px solid rgba(29,55,119,0.08);\r\n border-left: 3px solid rgba(29,55,119,0.08);\r\n border-radius: 20px 0 0 0;\r\n z-index: 0;\r\n }\r\n\r\n \/* ===== Right \u2014 Content Block ===== *\/\r\n .why-content {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .why-content-tag {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: #1D3777;\r\n opacity: 0.5;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .why-content-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 28px;\r\n font-weight: 800;\r\n color: #1D3777;\r\n line-height: 1.2;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .why-content-desc {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 14px;\r\n font-weight: 400;\r\n color: #8a95b1;\r\n line-height: 1.8;\r\n margin-bottom: 32px;\r\n }\r\n\r\n \/* ===== Feature Items ===== *\/\r\n .why-features {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n }\r\n\r\n .why-feature {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 18px;\r\n padding: 20px 0;\r\n border-bottom: 1px solid rgba(29,55,119,0.05);\r\n transition: all 0.4s ease;\r\n cursor: default;\r\n }\r\n\r\n .why-feature:first-child {\r\n padding-top: 0;\r\n }\r\n\r\n .why-feature:last-child {\r\n border-bottom: none;\r\n padding-bottom: 0;\r\n }\r\n\r\n .why-feature:hover {\r\n transform: translateX(6px);\r\n }\r\n\r\n \/* Feature Icon *\/\r\n .why-feature-icon {\r\n width: 50px;\r\n height: 50px;\r\n min-width: 50px;\r\n border-radius: 14px;\r\n background: #ffffff;\r\n border: 1px solid rgba(29,55,119,0.06);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n box-shadow: 0 2px 10px rgba(29,55,119,0.04);\r\n }\r\n\r\n .why-feature:hover .why-feature-icon {\r\n background: #1D3777;\r\n border-color: #1D3777;\r\n transform: scale(1.08) rotate(-3deg);\r\n box-shadow: 0 8px 25px rgba(29,55,119,0.2);\r\n }\r\n\r\n .why-feature-icon svg {\r\n width: 22px;\r\n height: 22px;\r\n fill: #1D3777;\r\n transition: fill 0.3s ease;\r\n }\r\n\r\n .why-feature:hover .why-feature-icon svg {\r\n fill: #ffffff;\r\n }\r\n\r\n \/* Feature Text *\/\r\n .why-feature-text {\r\n flex: 1;\r\n }\r\n\r\n .why-feature-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 15px;\r\n font-weight: 700;\r\n color: #1D3777;\r\n margin-bottom: 5px;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .why-feature-desc {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 12.5px;\r\n font-weight: 400;\r\n color: #9aa5bf;\r\n line-height: 1.7;\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE - TABLET\r\n ============================================ *\/\r\n @media (max-width: 1024px) {\r\n .why-section {\r\n padding: 80px 30px;\r\n }\r\n\r\n .why-container {\r\n max-width: 960px;\r\n padding: 50px 45px;\r\n border-radius: 24px;\r\n }\r\n\r\n .why-header {\r\n margin-bottom: 40px;\r\n }\r\n\r\n .why-layout {\r\n gap: 40px;\r\n }\r\n\r\n .why-image-main img {\r\n height: 400px;\r\n }\r\n\r\n .why-exp-badge {\r\n width: 110px;\r\n height: 110px;\r\n bottom: -16px;\r\n right: -16px;\r\n border-radius: 18px;\r\n }\r\n\r\n .why-exp-number {\r\n font-size: 32px;\r\n }\r\n\r\n .why-content-title {\r\n font-size: 25px;\r\n }\r\n\r\n .why-content-desc {\r\n font-size: 13px;\r\n margin-bottom: 28px;\r\n }\r\n\r\n .why-feature {\r\n gap: 16px;\r\n padding: 18px 0;\r\n }\r\n\r\n .why-feature-icon {\r\n width: 46px;\r\n height: 46px;\r\n min-width: 46px;\r\n border-radius: 12px;\r\n }\r\n\r\n .why-feature-icon svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n\r\n .why-feature-title {\r\n font-size: 14px;\r\n }\r\n\r\n .why-feature-desc {\r\n font-size: 12px;\r\n }\r\n\r\n .why-decor-dots,\r\n .why-decor-dots-2 {\r\n display: none;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE - MOBILE\r\n ============================================ *\/\r\n @media (max-width: 768px) {\r\n .why-section {\r\n padding: 60px 20px;\r\n }\r\n\r\n .why-container {\r\n padding: 40px 28px;\r\n border-radius: 20px;\r\n }\r\n\r\n .why-header {\r\n margin-bottom: 35px;\r\n }\r\n\r\n .why-badge {\r\n padding: 8px 20px;\r\n }\r\n\r\n .why-badge span {\r\n font-size: 10px;\r\n letter-spacing: 2.5px;\r\n }\r\n\r\n .why-layout {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n\r\n .why-image-block {\r\n max-width: 420px;\r\n margin: 0 auto;\r\n width: 100%;\r\n }\r\n\r\n .why-image-main {\r\n border-radius: 18px;\r\n }\r\n\r\n .why-image-main img {\r\n height: 300px;\r\n }\r\n\r\n .why-image-frame {\r\n width: 70px;\r\n height: 70px;\r\n top: -10px;\r\n left: -10px;\r\n border-width: 2px;\r\n border-radius: 18px 0 0 0;\r\n }\r\n\r\n .why-exp-badge {\r\n width: 100px;\r\n height: 100px;\r\n bottom: -14px;\r\n right: -8px;\r\n border-radius: 16px;\r\n border-width: 3px;\r\n }\r\n\r\n .why-exp-number {\r\n font-size: 28px;\r\n }\r\n\r\n .why-exp-number sup {\r\n font-size: 14px;\r\n }\r\n\r\n .why-exp-text {\r\n font-size: 8px;\r\n letter-spacing: 1.5px;\r\n }\r\n\r\n .why-content-tag {\r\n text-align: center;\r\n }\r\n\r\n .why-content-title {\r\n font-size: 23px;\r\n text-align: center;\r\n }\r\n\r\n .why-content-desc {\r\n font-size: 13px;\r\n text-align: center;\r\n margin-bottom: 28px;\r\n }\r\n\r\n .why-feature {\r\n padding: 18px 0;\r\n gap: 16px;\r\n }\r\n\r\n .why-feature-icon {\r\n width: 44px;\r\n height: 44px;\r\n min-width: 44px;\r\n border-radius: 12px;\r\n }\r\n\r\n .why-feature-icon svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n\r\n .why-feature-title {\r\n font-size: 13px;\r\n }\r\n\r\n .why-feature-desc {\r\n font-size: 11.5px;\r\n }\r\n\r\n .why-decor {\r\n display: none;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE - SMALL MOBILE\r\n ============================================ *\/\r\n @media (max-width: 480px) {\r\n .why-section {\r\n padding: 45px 14px;\r\n }\r\n\r\n .why-container {\r\n padding: 30px 20px;\r\n border-radius: 18px;\r\n }\r\n\r\n .why-image-main img {\r\n height: 240px;\r\n }\r\n\r\n .why-image-main {\r\n border-radius: 16px;\r\n }\r\n\r\n .why-exp-badge {\r\n width: 88px;\r\n height: 88px;\r\n bottom: -12px;\r\n right: -4px;\r\n border-radius: 14px;\r\n }\r\n\r\n .why-exp-number {\r\n font-size: 24px;\r\n }\r\n\r\n .why-exp-number sup {\r\n font-size: 12px;\r\n }\r\n\r\n .why-image-frame {\r\n width: 50px;\r\n height: 50px;\r\n top: -8px;\r\n left: -8px;\r\n }\r\n\r\n .why-content-title {\r\n font-size: 21px;\r\n }\r\n\r\n .why-content-desc {\r\n font-size: 12px;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .why-feature {\r\n gap: 12px;\r\n padding: 16px 0;\r\n }\r\n\r\n .why-feature-icon {\r\n width: 40px;\r\n height: 40px;\r\n min-width: 40px;\r\n border-radius: 10px;\r\n }\r\n\r\n .why-feature-icon svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n .why-feature-title {\r\n font-size: 12.5px;\r\n margin-bottom: 3px;\r\n }\r\n\r\n .why-feature-desc {\r\n font-size: 11px;\r\n line-height: 1.6;\r\n }\r\n }\r\n<\/style>\r\n\r\n\r\n<!-- ============================================\r\n ===== WHY CHOOSE US SECTION =====\r\n ============================================ -->\r\n<section class=\"why-section\" id=\"why-us\">\r\n\r\n <!-- Decorative Elements -->\r\n <div class=\"why-decor why-decor-dots\"><\/div>\r\n <div class=\"why-decor why-decor-dots-2\"><\/div>\r\n <div class=\"why-decor why-decor-line\"><\/div>\r\n <div class=\"why-decor why-decor-line-2\"><\/div>\r\n\r\n <div class=\"why-container\">\r\n\r\n <!-- Section Header -->\r\n <div class=\"why-header\">\r\n <div class=\"why-badge\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>\r\n <span>Why Choose Us<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Main Layout -->\r\n <div class=\"why-layout\">\r\n\r\n <!-- Left \u2014 Image -->\r\n <div class=\"why-image-block\">\r\n <div class=\"why-image-frame\"><\/div>\r\n <div class=\"why-image-main\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1631049307264-da0ec9d70304?ixlib=rb-4.0.3&auto=format&fit=crop&w=900&q=80\" alt=\"Trendz Mattress Premium Quality\" loading=\"lazy\">\r\n <\/div>\r\n <div class=\"why-exp-badge\">\r\n <div class=\"why-exp-number\">15<sup>+<\/sup><\/div>\r\n <div class=\"why-exp-text\">Years Expertise<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Right \u2014 Content -->\r\n <div class=\"why-content\">\r\n <div class=\"why-content-tag\">Our Promise<\/div>\r\n <h3 class=\"why-content-title\">Crafting Comfort You Can Trust<\/h3>\r\n <p class=\"why-content-desc\">\r\n Every Trendz product undergoes rigorous quality testing and is made\r\n using the finest materials sourced globally, ensuring durability,\r\n comfort, and value that lasts for years.\r\n <\/p>\r\n\r\n <!-- Feature List -->\r\n <div class=\"why-features\">\r\n\r\n <!-- Feature 1 -->\r\n <div class=\"why-feature\">\r\n <div class=\"why-feature-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"why-feature-text\">\r\n <h4 class=\"why-feature-title\">Certified Quality Standards<\/h4>\r\n <p class=\"why-feature-desc\">\r\n All products meet international quality certifications and undergo\r\n multi-stage testing for durability and safety.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Feature 2 -->\r\n <div class=\"why-feature\">\r\n <div class=\"why-feature-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M7 13c1.66 0 3-1.34 3-3S8.66 7 7 7s-3 1.34-3 3 1.34 3 3 3zm12-6h-8v7H3V5H1v15h2v-3h18v3h2v-9c0-2.21-1.79-4-4-4z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"why-feature-text\">\r\n <h4 class=\"why-feature-title\">Advanced Sleep Technology<\/h4>\r\n <p class=\"why-feature-desc\">\r\n Engineered with memory foam, pocket spring, and cooling gel\r\n technology for optimum spinal support and comfort.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Feature 3 -->\r\n <div class=\"why-feature\">\r\n <div class=\"why-feature-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"why-feature-text\">\r\n <h4 class=\"why-feature-title\">Best Price Guarantee<\/h4>\r\n <p class=\"why-feature-desc\">\r\n Factory-direct pricing with no middlemen ensures you get\r\n premium quality at the most competitive prices in the UAE.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Feature 4 -->\r\n <div class=\"why-feature\">\r\n <div class=\"why-feature-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M18 18.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5 1.5.67 1.5 1.5 1.5zm1.5-9H17V12h4.46L19.5 9.5zM6 18.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5 1.5.67 1.5 1.5 1.5zM20 8l3 4v5h-2c0 1.66-1.34 3-3 3s-3-1.34-3-3H9c0 1.66-1.34 3-3 3s-3-1.34-3-3H1V6c0-1.11.89-2 2-2h14v4h3zM3 6v9h.76c.55-.61 1.35-1 2.24-1s1.69.39 2.24 1H15V6H3z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"why-feature-text\">\r\n <h4 class=\"why-feature-title\">Free Delivery & Setup<\/h4>\r\n <p class=\"why-feature-desc\">\r\n Complimentary doorstep delivery and professional setup\r\n across all Emirates within 48 hours of ordering.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Feature 5 -->\r\n <div class=\"why-feature\">\r\n <div class=\"why-feature-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"why-feature-text\">\r\n <h4 class=\"why-feature-title\">10-Year Warranty<\/h4>\r\n <p class=\"why-feature-desc\">\r\n Every mattress comes with up to 10-year manufacturer warranty\r\n for complete confidence and peace of mind.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c9cebc4 e-con-full e-flex e-con e-parent\" data-id=\"c9cebc4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f2e5430 elementor-widget elementor-widget-html\" data-id=\"f2e5430\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ===== Add this CSS inside your existing <style> tag ===== -->\r\n<style>\r\n \/* ============================================\r\n ===== TESTIMONIALS SECTION =====\r\n ============================================ *\/\r\n .testimonials-section {\r\n position: relative;\r\n padding: 100px 0 110px;\r\n background: linear-gradient(180deg, #f8f9fd 0%, #ffffff 40%, #f5f7fc 100%);\r\n overflow: hidden;\r\n }\r\n\r\n \/* Decorative Elements *\/\r\n .testimonials-section::before {\r\n content: '';\r\n position: absolute;\r\n top: -200px;\r\n left: -200px;\r\n width: 500px;\r\n height: 500px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(29, 55, 119, 0.03) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n .testimonials-section::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -150px;\r\n right: -150px;\r\n width: 400px;\r\n height: 400px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(29, 55, 119, 0.025) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n \/* Large Quote Watermark *\/\r\n .testimonials-watermark {\r\n position: absolute;\r\n top: 60px;\r\n right: 80px;\r\n font-family: 'Georgia', serif;\r\n font-size: 280px;\r\n color: rgba(29, 55, 119, 0.025);\r\n line-height: 1;\r\n pointer-events: none;\r\n user-select: none;\r\n z-index: 0;\r\n }\r\n\r\n .testimonials-container {\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ===== Section Header ===== *\/\r\n .testimonials-header {\r\n text-align: center;\r\n margin-bottom: 65px;\r\n }\r\n\r\n .testimonials-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 24px;\r\n background: rgba(29, 55, 119, 0.05);\r\n border: 1px solid rgba(29, 55, 119, 0.08);\r\n border-radius: 50px;\r\n margin-bottom: 22px;\r\n }\r\n\r\n .testimonials-badge-icon svg {\r\n width: 16px;\r\n height: 16px;\r\n fill: #1D3777;\r\n }\r\n\r\n .testimonials-badge span {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: #1D3777;\r\n }\r\n\r\n .testimonials-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 44px;\r\n font-weight: 800;\r\n color: #1D3777;\r\n line-height: 1.15;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .testimonials-title span {\r\n position: relative;\r\n display: inline-block;\r\n }\r\n\r\n .testimonials-title span::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 5px;\r\n left: 0;\r\n width: 100%;\r\n height: 8px;\r\n background: rgba(29, 55, 119, 0.08);\r\n border-radius: 4px;\r\n z-index: -1;\r\n }\r\n\r\n .testimonials-subtitle {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 16px;\r\n font-weight: 400;\r\n color: #7a8aad;\r\n line-height: 1.7;\r\n max-width: 520px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* ===== Slider Wrapper ===== *\/\r\n .testimonials-slider-wrap {\r\n position: relative;\r\n }\r\n\r\n \/* Slider Track *\/\r\n .testimonials-slider {\r\n display: flex;\r\n gap: 30px;\r\n overflow-x: auto;\r\n scroll-behavior: smooth;\r\n -webkit-overflow-scrolling: touch;\r\n scrollbar-width: none;\r\n -ms-overflow-style: none;\r\n padding: 20px 0 40px;\r\n scroll-snap-type: x mandatory;\r\n }\r\n\r\n .testimonials-slider::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n \/* ===== Individual Testimonial Card ===== *\/\r\n .testimonial-card {\r\n min-width: 380px;\r\n max-width: 380px;\r\n background: #ffffff;\r\n border-radius: 24px;\r\n padding: 40px 35px 35px;\r\n position: relative;\r\n box-shadow: 0 5px 30px rgba(29, 55, 119, 0.06);\r\n border: 1px solid rgba(29, 55, 119, 0.05);\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n scroll-snap-align: start;\r\n flex-shrink: 0;\r\n }\r\n\r\n .testimonial-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 20px 50px rgba(29, 55, 119, 0.12);\r\n border-color: rgba(29, 55, 119, 0.1);\r\n }\r\n\r\n \/* Card Top Accent *\/\r\n .testimonial-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 30px;\r\n right: 30px;\r\n height: 4px;\r\n background: linear-gradient(90deg, #1D3777, #4a6cb3, #a8c0ff);\r\n border-radius: 0 0 4px 4px;\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\r\n }\r\n\r\n .testimonial-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n \/* Quote Icon *\/\r\n .testimonial-quote-icon {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 14px;\r\n background: rgba(29, 55, 119, 0.06);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 24px;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .testimonial-card:hover .testimonial-quote-icon {\r\n background: #1D3777;\r\n transform: rotate(-5deg) scale(1.05);\r\n box-shadow: 0 6px 20px rgba(29, 55, 119, 0.2);\r\n }\r\n\r\n .testimonial-quote-icon svg {\r\n width: 22px;\r\n height: 22px;\r\n fill: #1D3777;\r\n transition: fill 0.3s ease;\r\n }\r\n\r\n .testimonial-card:hover .testimonial-quote-icon svg {\r\n fill: #ffffff;\r\n }\r\n\r\n \/* Product Tag *\/\r\n .testimonial-product-tag {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 6px 14px;\r\n background: rgba(29, 55, 119, 0.04);\r\n border: 1px solid rgba(29, 55, 119, 0.08);\r\n border-radius: 50px;\r\n margin-bottom: 20px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .testimonial-card:hover .testimonial-product-tag {\r\n background: rgba(29, 55, 119, 0.08);\r\n border-color: rgba(29, 55, 119, 0.15);\r\n }\r\n\r\n .testimonial-product-tag svg {\r\n width: 14px;\r\n height: 14px;\r\n fill: #1D3777;\r\n opacity: 0.6;\r\n }\r\n\r\n .testimonial-product-tag span {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 10px;\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: #1D3777;\r\n opacity: 0.7;\r\n }\r\n\r\n \/* Stars *\/\r\n .testimonial-stars {\r\n display: flex;\r\n gap: 4px;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .testimonial-star svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: #fbbf24;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .testimonial-card:hover .testimonial-star svg {\r\n animation: starPop 0.4s ease forwards;\r\n }\r\n\r\n .testimonial-card:hover .testimonial-star:nth-child(1) svg { animation-delay: 0s; }\r\n .testimonial-card:hover .testimonial-star:nth-child(2) svg { animation-delay: 0.05s; }\r\n .testimonial-card:hover .testimonial-star:nth-child(3) svg { animation-delay: 0.1s; }\r\n .testimonial-card:hover .testimonial-star:nth-child(4) svg { animation-delay: 0.15s; }\r\n .testimonial-card:hover .testimonial-star:nth-child(5) svg { animation-delay: 0.2s; }\r\n\r\n @keyframes starPop {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.3); }\r\n 100% { transform: scale(1); }\r\n }\r\n\r\n \/* Review Text *\/\r\n .testimonial-text {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 15px;\r\n font-weight: 400;\r\n color: #4a5568;\r\n line-height: 1.8;\r\n margin-bottom: 28px;\r\n position: relative;\r\n }\r\n\r\n \/* Divider *\/\r\n .testimonial-divider {\r\n width: 100%;\r\n height: 1px;\r\n background: linear-gradient(90deg, transparent, rgba(29, 55, 119, 0.08), transparent);\r\n margin-bottom: 24px;\r\n }\r\n\r\n \/* Author Section *\/\r\n .testimonial-author {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n }\r\n\r\n .testimonial-avatar {\r\n width: 52px;\r\n height: 52px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n border: 3px solid rgba(29, 55, 119, 0.08);\r\n transition: all 0.4s ease;\r\n position: relative;\r\n flex-shrink: 0;\r\n }\r\n\r\n .testimonial-card:hover .testimonial-avatar {\r\n border-color: #1D3777;\r\n transform: scale(1.05);\r\n box-shadow: 0 4px 15px rgba(29, 55, 119, 0.15);\r\n }\r\n\r\n \/* Avatar with Initials *\/\r\n .testimonial-avatar-initials {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #ffffff;\r\n background: linear-gradient(135deg, #1D3777, #3a5db0);\r\n }\r\n\r\n .testimonial-avatar-initials.alt-1 {\r\n background: linear-gradient(135deg, #2a4fa0, #5a7fd4);\r\n }\r\n\r\n .testimonial-avatar-initials.alt-2 {\r\n background: linear-gradient(135deg, #1a3060, #2a4fa0);\r\n }\r\n\r\n .testimonial-avatar-initials.alt-3 {\r\n background: linear-gradient(135deg, #3a5db0, #7a9de0);\r\n }\r\n\r\n .testimonial-avatar-initials.alt-4 {\r\n background: linear-gradient(135deg, #142a5e, #1D3777);\r\n }\r\n\r\n .testimonial-avatar-initials.alt-5 {\r\n background: linear-gradient(135deg, #4a6cb3, #a8c0ff);\r\n }\r\n\r\n .testimonial-author-info {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 3px;\r\n }\r\n\r\n .testimonial-author-name {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 15px;\r\n font-weight: 700;\r\n color: #1D3777;\r\n }\r\n\r\n .testimonial-author-role {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: #9ca8c2;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n \/* Verified Badge *\/\r\n .testimonial-verified {\r\n margin-left: auto;\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n padding: 5px 12px;\r\n background: rgba(16, 185, 129, 0.08);\r\n border-radius: 50px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .testimonial-verified svg {\r\n width: 14px;\r\n height: 14px;\r\n fill: #10b981;\r\n }\r\n\r\n .testimonial-verified span {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 10px;\r\n font-weight: 600;\r\n color: #10b981;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* ===== Slider Navigation ===== *\/\r\n .testimonials-nav {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 20px;\r\n margin-top: 45px;\r\n }\r\n\r\n .testimonials-nav-btn {\r\n width: 52px;\r\n height: 52px;\r\n border-radius: 50%;\r\n border: 2px solid rgba(29, 55, 119, 0.12);\r\n background: #ffffff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n box-shadow: 0 4px 15px rgba(29, 55, 119, 0.05);\r\n }\r\n\r\n .testimonials-nav-btn:hover {\r\n background: #1D3777;\r\n border-color: #1D3777;\r\n transform: scale(1.1);\r\n box-shadow: 0 8px 25px rgba(29, 55, 119, 0.2);\r\n }\r\n\r\n .testimonials-nav-btn:active {\r\n transform: scale(0.95);\r\n }\r\n\r\n .testimonials-nav-btn svg {\r\n width: 20px;\r\n height: 20px;\r\n fill: #1D3777;\r\n transition: fill 0.3s ease;\r\n }\r\n\r\n .testimonials-nav-btn:hover svg {\r\n fill: #ffffff;\r\n }\r\n\r\n \/* Scroll Indicator Dots *\/\r\n .testimonials-scroll-dots {\r\n display: flex;\r\n gap: 8px;\r\n align-items: center;\r\n }\r\n\r\n .testimonials-scroll-dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: rgba(29, 55, 119, 0.12);\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .testimonials-scroll-dot.active {\r\n width: 32px;\r\n border-radius: 10px;\r\n background: #1D3777;\r\n }\r\n\r\n .testimonials-scroll-dot:hover {\r\n background: rgba(29, 55, 119, 0.3);\r\n }\r\n\r\n .testimonials-scroll-dot.active:hover {\r\n background: #1D3777;\r\n }\r\n\r\n \/* ===== Stats Bar ===== *\/\r\n .testimonials-stats {\r\n display: flex;\r\n justify-content: center;\r\n gap: 60px;\r\n margin-top: 60px;\r\n padding-top: 50px;\r\n border-top: 1px solid rgba(29, 55, 119, 0.06);\r\n }\r\n\r\n .testimonial-stat {\r\n text-align: center;\r\n }\r\n\r\n .testimonial-stat-number {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 36px;\r\n font-weight: 800;\r\n color: #1D3777;\r\n line-height: 1;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .testimonial-stat-number span {\r\n color: #a8c0ff;\r\n }\r\n\r\n .testimonial-stat-label {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: #9ca8c2;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* ============================================\r\n ===== TESTIMONIALS RESPONSIVE - TABLET =====\r\n ============================================ *\/\r\n @media (max-width: 1024px) {\r\n .testimonials-section {\r\n padding: 80px 0 90px;\r\n }\r\n\r\n .testimonials-container {\r\n padding: 0 30px;\r\n }\r\n\r\n .testimonials-header {\r\n margin-bottom: 50px;\r\n }\r\n\r\n .testimonials-title {\r\n font-size: 36px;\r\n }\r\n\r\n .testimonials-subtitle {\r\n font-size: 15px;\r\n }\r\n\r\n .testimonial-card {\r\n min-width: 340px;\r\n max-width: 340px;\r\n padding: 35px 30px 30px;\r\n }\r\n\r\n .testimonial-text {\r\n font-size: 14px;\r\n }\r\n\r\n .testimonials-watermark {\r\n font-size: 200px;\r\n right: 40px;\r\n }\r\n\r\n .testimonials-stats {\r\n gap: 40px;\r\n }\r\n\r\n .testimonial-stat-number {\r\n font-size: 30px;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n ===== TESTIMONIALS RESPONSIVE - MOBILE =====\r\n ============================================ *\/\r\n @media (max-width: 768px) {\r\n .testimonials-section {\r\n padding: 65px 0 75px;\r\n }\r\n\r\n .testimonials-container {\r\n padding: 0 20px;\r\n }\r\n\r\n .testimonials-header {\r\n margin-bottom: 40px;\r\n }\r\n\r\n .testimonials-badge {\r\n padding: 8px 18px;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .testimonials-badge span {\r\n font-size: 10px;\r\n letter-spacing: 2.5px;\r\n }\r\n\r\n .testimonials-title {\r\n font-size: 30px;\r\n }\r\n\r\n .testimonials-subtitle {\r\n font-size: 14px;\r\n }\r\n\r\n .testimonials-watermark {\r\n font-size: 150px;\r\n top: 30px;\r\n right: 20px;\r\n }\r\n\r\n .testimonials-slider {\r\n gap: 20px;\r\n padding: 15px 0 30px;\r\n }\r\n\r\n .testimonial-card {\r\n min-width: 300px;\r\n max-width: 300px;\r\n padding: 30px 25px 28px;\r\n border-radius: 20px;\r\n }\r\n\r\n .testimonial-quote-icon {\r\n width: 42px;\r\n height: 42px;\r\n border-radius: 12px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .testimonial-quote-icon svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n\r\n .testimonial-stars svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n .testimonial-text {\r\n font-size: 13px;\r\n margin-bottom: 22px;\r\n line-height: 1.75;\r\n }\r\n\r\n .testimonial-avatar {\r\n width: 46px;\r\n height: 46px;\r\n }\r\n\r\n .testimonial-avatar-initials {\r\n font-size: 16px;\r\n }\r\n\r\n .testimonial-author-name {\r\n font-size: 14px;\r\n }\r\n\r\n .testimonial-author-role {\r\n font-size: 11px;\r\n }\r\n\r\n .testimonial-verified span {\r\n display: none;\r\n }\r\n\r\n .testimonial-verified {\r\n padding: 5px 8px;\r\n }\r\n\r\n .testimonials-nav {\r\n margin-top: 35px;\r\n }\r\n\r\n .testimonials-nav-btn {\r\n width: 46px;\r\n height: 46px;\r\n }\r\n\r\n .testimonials-nav-btn svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n\r\n .testimonials-stats {\r\n gap: 30px;\r\n margin-top: 45px;\r\n padding-top: 40px;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n }\r\n\r\n .testimonial-stat-number {\r\n font-size: 28px;\r\n }\r\n\r\n .testimonial-stat-label {\r\n font-size: 10px;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n ===== TESTIMONIALS RESPONSIVE - SMALL =====\r\n ============================================ *\/\r\n @media (max-width: 480px) {\r\n .testimonials-section {\r\n padding: 55px 0 60px;\r\n }\r\n\r\n .testimonials-container {\r\n padding: 0 16px;\r\n }\r\n\r\n .testimonials-title {\r\n font-size: 26px;\r\n }\r\n\r\n .testimonials-subtitle {\r\n font-size: 13px;\r\n }\r\n\r\n .testimonials-watermark {\r\n display: none;\r\n }\r\n\r\n .testimonials-slider {\r\n gap: 16px;\r\n }\r\n\r\n .testimonial-card {\r\n min-width: 275px;\r\n max-width: 275px;\r\n padding: 26px 22px 24px;\r\n border-radius: 18px;\r\n }\r\n\r\n .testimonial-product-tag {\r\n padding: 5px 12px;\r\n }\r\n\r\n .testimonial-product-tag span {\r\n font-size: 9px;\r\n }\r\n\r\n .testimonial-text {\r\n font-size: 12.5px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .testimonial-author {\r\n gap: 12px;\r\n }\r\n\r\n .testimonial-avatar {\r\n width: 42px;\r\n height: 42px;\r\n }\r\n\r\n .testimonials-stats {\r\n gap: 20px;\r\n }\r\n\r\n .testimonial-stat {\r\n min-width: 80px;\r\n }\r\n\r\n .testimonial-stat-number {\r\n font-size: 24px;\r\n }\r\n\r\n .testimonial-stat-label {\r\n font-size: 9px;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .testimonials-nav {\r\n margin-top: 28px;\r\n gap: 14px;\r\n }\r\n\r\n .testimonials-nav-btn {\r\n width: 42px;\r\n height: 42px;\r\n }\r\n\r\n .testimonials-scroll-dot {\r\n width: 6px;\r\n height: 6px;\r\n }\r\n\r\n .testimonials-scroll-dot.active {\r\n width: 24px;\r\n }\r\n }\r\n<\/style>\r\n\r\n\r\n<!-- ============================================\r\n ===== TESTIMONIALS SECTION HTML =====\r\n ============================================ -->\r\n<section class=\"testimonials-section\" id=\"testimonials\">\r\n\r\n <!-- Watermark Quote -->\r\n <div class=\"testimonials-watermark\">\"<\/div>\r\n\r\n <div class=\"testimonials-container\">\r\n\r\n <!-- Section Header -->\r\n <div class=\"testimonials-header\">\r\n <div class=\"testimonials-badge\">\r\n <div class=\"testimonials-badge-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg>\r\n <\/div>\r\n <span>Testimonials<\/span>\r\n <\/div>\r\n <h2 class=\"testimonials-title\">What Others Are <span>Saying<\/span><\/h2>\r\n <p class=\"testimonials-subtitle\">\r\n Real reviews from real customers who transformed their sleep \r\n experience with Trendz products.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- Testimonials Slider -->\r\n <div class=\"testimonials-slider-wrap\">\r\n <div class=\"testimonials-slider\" id=\"testimonialsSlider\">\r\n\r\n <!-- Testimonial 1 - Mattress -->\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-quote-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"testimonial-product-tag\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M7 13c1.66 0 3-1.34 3-3S8.66 7 7 7s-3 1.34-3 3 1.34 3 3 3zm12-6h-8v7H3V5H1v15h2v-3h18v3h2v-9c0-2.21-1.79-4-4-4z\"\/><\/svg>\r\n <span>Mattress<\/span>\r\n <\/div>\r\n <div class=\"testimonial-stars\">\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <\/div>\r\n <p class=\"testimonial-text\">\r\n \"The orthopedic mattress from Trendz completely transformed my sleep quality. My chronic back pain has significantly reduced and I wake up feeling refreshed every morning. Best investment ever!\"\r\n <\/p>\r\n <div class=\"testimonial-divider\"><\/div>\r\n <div class=\"testimonial-author\">\r\n <div class=\"testimonial-avatar\">\r\n <div class=\"testimonial-avatar-initials\">AK<\/div>\r\n <\/div>\r\n <div class=\"testimonial-author-info\">\r\n <span class=\"testimonial-author-name\">Ahmed Khan<\/span>\r\n <span class=\"testimonial-author-role\">Dubai, UAE<\/span>\r\n <\/div>\r\n <div class=\"testimonial-verified\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>\r\n <span>Verified<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Testimonial 2 - Pillow -->\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-quote-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"testimonial-product-tag\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M20 9.556V3h-2v2H6V3H4v6.557C2.81 10.25 2 11.526 2 13v4a1 1 0 0 0 1 1h1v2h2v-2h12v2h2v-2h1a1 1 0 0 0 1-1v-4c0-1.474-.811-2.75-2-3.444z\"\/><\/svg>\r\n <span>Pillow<\/span>\r\n <\/div>\r\n <div class=\"testimonial-stars\">\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <\/div>\r\n <p class=\"testimonial-text\">\r\n \"I've tried many pillows, but the Trendz memory foam pillow is on another level. Perfect neck support, incredibly soft, and stays cool throughout the night. My neck pain is completely gone!\"\r\n <\/p>\r\n <div class=\"testimonial-divider\"><\/div>\r\n <div class=\"testimonial-author\">\r\n <div class=\"testimonial-avatar\">\r\n <div class=\"testimonial-avatar-initials alt-1\">SR<\/div>\r\n <\/div>\r\n <div class=\"testimonial-author-info\">\r\n <span class=\"testimonial-author-name\">Sarah Rodriguez<\/span>\r\n <span class=\"testimonial-author-role\">Abu Dhabi, UAE<\/span>\r\n <\/div>\r\n <div class=\"testimonial-verified\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>\r\n <span>Verified<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Testimonial 3 - Bath Essentials -->\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-quote-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"testimonial-product-tag\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M7 7c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm13.71 9.29l-4-4a1.003 1.003 0 0 0-1.42 0L12 15.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 0l-4 4A1 1 0 0 0 5 19h14a1 1 0 0 0 .71-1.71zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z\" opacity=\"0\"\/><path d=\"M20 4H4v16h16V4zM9.5 16.5v-9l7 4.5-7 4.5z\" opacity=\"0\"\/><path d=\"M2 7v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7H2zm9-5c.83 0 1.5.67 1.5 1.5S11.83 5 11 5s-1.5-.67-1.5-1.5S10.17 2 11 2z\" opacity=\"0\"\/><path d=\"M20 20H4v-1h16v1zm0-14H4V5h16v1zM7 13c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2v-2c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v2z\"\/><\/svg>\r\n <span>Bath Essentials<\/span>\r\n <\/div>\r\n <div class=\"testimonial-stars\">\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <\/div>\r\n <p class=\"testimonial-text\">\r\n \"The luxury bath towels are incredibly plush and absorbent. Hotel-quality feel at home! They've maintained their softness even after multiple washes. Absolutely love the entire bath collection.\"\r\n <\/p>\r\n <div class=\"testimonial-divider\"><\/div>\r\n <div class=\"testimonial-author\">\r\n <div class=\"testimonial-avatar\">\r\n <div class=\"testimonial-avatar-initials alt-2\">MP<\/div>\r\n <\/div>\r\n <div class=\"testimonial-author-info\">\r\n <span class=\"testimonial-author-name\">Maria Patel<\/span>\r\n <span class=\"testimonial-author-role\">Sharjah, UAE<\/span>\r\n <\/div>\r\n <div class=\"testimonial-verified\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>\r\n <span>Verified<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Testimonial 4 - Mattress -->\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-quote-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"testimonial-product-tag\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M7 13c1.66 0 3-1.34 3-3S8.66 7 7 7s-3 1.34-3 3 1.34 3 3 3zm12-6h-8v7H3V5H1v15h2v-3h18v3h2v-9c0-2.21-1.79-4-4-4z\"\/><\/svg>\r\n <span>Mattress<\/span>\r\n <\/div>\r\n <div class=\"testimonial-stars\">\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <\/div>\r\n <p class=\"testimonial-text\">\r\n \"We furnished our entire hotel with Trendz mattresses and the guest feedback has been exceptional. Superior quality, durable build, and their customer service is outstanding.\"\r\n <\/p>\r\n <div class=\"testimonial-divider\"><\/div>\r\n <div class=\"testimonial-author\">\r\n <div class=\"testimonial-avatar\">\r\n <div class=\"testimonial-avatar-initials alt-3\">RJ<\/div>\r\n <\/div>\r\n <div class=\"testimonial-author-info\">\r\n <span class=\"testimonial-author-name\">Rashid Jameel<\/span>\r\n <span class=\"testimonial-author-role\">Ajman, UAE<\/span>\r\n <\/div>\r\n <div class=\"testimonial-verified\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>\r\n <span>Verified<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Testimonial 5 - Pillow -->\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-quote-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"testimonial-product-tag\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M20 9.556V3h-2v2H6V3H4v6.557C2.81 10.25 2 11.526 2 13v4a1 1 0 0 0 1 1h1v2h2v-2h12v2h2v-2h1a1 1 0 0 0 1-1v-4c0-1.474-.811-2.75-2-3.444z\"\/><\/svg>\r\n <span>Pillow<\/span>\r\n <\/div>\r\n <div class=\"testimonial-stars\">\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <\/div>\r\n <p class=\"testimonial-text\">\r\n \"Switched to Trendz bamboo fiber pillows and the difference is incredible. They stay cool, provide amazing support, and the hypoallergenic material is perfect for my sensitive skin.\"\r\n <\/p>\r\n <div class=\"testimonial-divider\"><\/div>\r\n <div class=\"testimonial-author\">\r\n <div class=\"testimonial-avatar\">\r\n <div class=\"testimonial-avatar-initials alt-4\">FN<\/div>\r\n <\/div>\r\n <div class=\"testimonial-author-info\">\r\n <span class=\"testimonial-author-name\">Fatima Noor<\/span>\r\n <span class=\"testimonial-author-role\">RAK, UAE<\/span>\r\n <\/div>\r\n <div class=\"testimonial-verified\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>\r\n <span>Verified<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Testimonial 6 - Bath Essentials -->\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-quote-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"testimonial-product-tag\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M7 13c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2v-2c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v2z\"\/><\/svg>\r\n <span>Bath Essentials<\/span>\r\n <\/div>\r\n <div class=\"testimonial-stars\">\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <div class=\"testimonial-star\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><\/div>\r\n <\/div>\r\n <p class=\"testimonial-text\">\r\n \"The bathrobes from Trendz are spa-quality luxury at home. Incredibly soft, great stitching, and they look premium. Ordered matching towel sets too \u2014 everything is top notch!\"\r\n <\/p>\r\n <div class=\"testimonial-divider\"><\/div>\r\n <div class=\"testimonial-author\">\r\n <div class=\"testimonial-avatar\">\r\n <div class=\"testimonial-avatar-initials alt-5\">DL<\/div>\r\n <\/div>\r\n <div class=\"testimonial-author-info\">\r\n <span class=\"testimonial-author-name\">David Lee<\/span>\r\n <span class=\"testimonial-author-role\">Al Ain, UAE<\/span>\r\n <\/div>\r\n <div class=\"testimonial-verified\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>\r\n <span>Verified<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Slider Navigation -->\r\n <div class=\"testimonials-nav\">\r\n <div class=\"testimonials-nav-btn\" id=\"testimonialPrev\" aria-label=\"Previous\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"testimonials-scroll-dots\" id=\"testimonialDots\">\r\n <div class=\"testimonials-scroll-dot active\" data-index=\"0\"><\/div>\r\n <div class=\"testimonials-scroll-dot\" data-index=\"1\"><\/div>\r\n <div class=\"testimonials-scroll-dot\" data-index=\"2\"><\/div>\r\n <\/div>\r\n <div class=\"testimonials-nav-btn\" id=\"testimonialNext\" aria-label=\"Next\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Stats Bar -->\r\n <div class=\"testimonials-stats\">\r\n <div class=\"testimonial-stat\">\r\n <div class=\"testimonial-stat-number\">10K<span>+<\/span><\/div>\r\n <div class=\"testimonial-stat-label\">Happy Customers<\/div>\r\n <\/div>\r\n <div class=\"testimonial-stat\">\r\n <div class=\"testimonial-stat-number\">4.9<span>\/5<\/span><\/div>\r\n <div class=\"testimonial-stat-label\">Average Rating<\/div>\r\n <\/div>\r\n <div class=\"testimonial-stat\">\r\n <div class=\"testimonial-stat-number\">98<span>%<\/span><\/div>\r\n <div class=\"testimonial-stat-label\">Satisfaction Rate<\/div>\r\n <\/div>\r\n <div class=\"testimonial-stat\">\r\n <div class=\"testimonial-stat-number\">15<span>+<\/span><\/div>\r\n <div class=\"testimonial-stat-label\">Years Experience<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n<!-- ===== TESTIMONIALS SECTION END ===== -->\r\n\r\n\r\n<!-- ===== Add this JS before closing <\/body> ===== -->\r\n<script>\r\n(function () {\r\n const slider = document.getElementById('testimonialsSlider');\r\n const prevBtn = document.getElementById('testimonialPrev');\r\n const nextBtn = document.getElementById('testimonialNext');\r\n const dots = document.querySelectorAll('.testimonials-scroll-dot');\r\n\r\n if (!slider || !prevBtn || !nextBtn) return;\r\n\r\n let currentGroup = 0;\r\n const totalGroups = dots.length;\r\n\r\n function getScrollAmount() {\r\n const card = slider.querySelector('.testimonial-card');\r\n if (!card) return 400;\r\n const style = getComputedStyle(slider);\r\n const gap = parseInt(style.gap) || 30;\r\n const cardWidth = card.offsetWidth + gap;\r\n\r\n \/\/ Cards visible\r\n const visible = Math.floor(slider.offsetWidth \/ cardWidth);\r\n return cardWidth * Math.max(visible, 1);\r\n }\r\n\r\n function updateDots() {\r\n const maxScroll = slider.scrollWidth - slider.offsetWidth;\r\n const progress = maxScroll > 0 ? slider.scrollLeft \/ maxScroll : 0;\r\n const activeIndex = Math.round(progress * (totalGroups - 1));\r\n\r\n dots.forEach((dot, i) => {\r\n dot.classList.toggle('active', i === activeIndex);\r\n });\r\n currentGroup = activeIndex;\r\n }\r\n\r\n function scrollTo(direction) {\r\n const amount = getScrollAmount();\r\n slider.scrollBy({\r\n left: direction === 'next' ? amount : -amount,\r\n behavior: 'smooth'\r\n });\r\n }\r\n\r\n function scrollToGroup(index) {\r\n const maxScroll = slider.scrollWidth - slider.offsetWidth;\r\n const target = (index \/ (totalGroups - 1)) * maxScroll;\r\n slider.scrollTo({\r\n left: target,\r\n behavior: 'smooth'\r\n });\r\n }\r\n\r\n nextBtn.addEventListener('click', () => scrollTo('next'));\r\n prevBtn.addEventListener('click', () => scrollTo('prev'));\r\n\r\n dots.forEach(dot => {\r\n dot.addEventListener('click', () => {\r\n const index = parseInt(dot.getAttribute('data-index'));\r\n scrollToGroup(index);\r\n });\r\n });\r\n\r\n slider.addEventListener('scroll', updateDots);\r\n\r\n \/\/ Touch swipe\r\n let touchStartX = 0;\r\n slider.addEventListener('touchstart', (e) => {\r\n touchStartX = e.changedTouches[0].screenX;\r\n }, { passive: true });\r\n\r\n slider.addEventListener('touchend', (e) => {\r\n const diff = touchStartX - e.changedTouches[0].screenX;\r\n if (Math.abs(diff) > 50) {\r\n scrollTo(diff > 0 ? 'next' : 'prev');\r\n }\r\n }, { passive: true });\r\n\r\n \/\/ Keyboard\r\n slider.setAttribute('tabindex', '0');\r\n slider.addEventListener('keydown', (e) => {\r\n if (e.key === 'ArrowRight') scrollTo('next');\r\n if (e.key === 'ArrowLeft') scrollTo('prev');\r\n });\r\n\r\n \/\/ Auto-play\r\n let autoPlay = setInterval(() => scrollTo('next'), 5000);\r\n const section = document.querySelector('.testimonials-section');\r\n section.addEventListener('mouseenter', () => clearInterval(autoPlay));\r\n section.addEventListener('mouseleave', () => {\r\n autoPlay = setInterval(() => scrollTo('next'), 5000);\r\n });\r\n\r\n \/\/ Loop back\r\n slider.addEventListener('scroll', () => {\r\n const maxScroll = slider.scrollWidth - slider.offsetWidth;\r\n if (slider.scrollLeft >= maxScroll - 5) {\r\n setTimeout(() => {\r\n slider.scrollTo({ left: 0, behavior: 'smooth' });\r\n }, 2000);\r\n }\r\n });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8b527a5 e-con-full e-flex e-con e-parent\" data-id=\"8b527a5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9c9939b elementor-widget elementor-widget-html\" data-id=\"9c9939b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ===== Add this CSS inside your existing <style> tag ===== -->\r\n<style>\r\n \/* ============================================\r\n ===== CTA HELP SECTION =====\r\n ============================================ *\/\r\n .cta-help {\r\n position: relative;\r\n padding: 100px 0;\r\n background: #FFFF;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Decorative Background Elements *\/\r\n .cta-help::before {\r\n content: '';\r\n position: absolute;\r\n top: -150px;\r\n right: -150px;\r\n width: 400px;\r\n height: 400px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(29, 55, 119, 0.04) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n .cta-help::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -100px;\r\n left: -100px;\r\n width: 300px;\r\n height: 300px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(29, 55, 119, 0.03) 0%, transparent 70%);\r\n back\r\n pointer-events: none;\r\n }\r\n\r\n .cta-help-container {\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n position: relative;\r\n ba\r\n z-index: 1;\r\n }\r\n\r\n \/* ===== Section Header ===== *\/\r\n .cta-help-header {\r\n text-align: center;\r\n margin-bottom: 70px;\r\n }\r\n\r\n .cta-help-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 24px;\r\n background: rgba(29, 55, 119, 0.06);\r\n border: 1px solid rgba(29, 55, 119, 0.1);\r\n border-radius: 50px;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .cta-help-badge-icon {\r\n width: 20px;\r\n height: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .cta-help-badge-icon svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: #1D3777;\r\n }\r\n\r\n .cta-help-badge span {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 12px;\r\n font-weight: 600;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: #1D3777;\r\n }\r\n\r\n .cta-help-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 44px;\r\n font-weight: 800;\r\n color: #1D3777;\r\n line-height: 1.15;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .cta-help-title span {\r\n position: relative;\r\n }\r\n\r\n .cta-help-title span::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 4px;\r\n left: 0;\r\n width: 100%;\r\n height: 6px;\r\n background: rgba(29, 55, 119, 0.1);\r\n border-radius: 3px;\r\n z-index: -1;\r\n }\r\n\r\n .cta-help-subtitle {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 17px;\r\n font-weight: 400;\r\n color: #6b7b99;\r\n line-height: 1.7;\r\n max-width: 550px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* ===== Main Content Grid ===== *\/\r\n .cta-help-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1.4fr;\r\n gap: 50px;\r\n align-items: start;\r\n }\r\n\r\n \/* ===========================\r\n LEFT SIDE - Contact Details\r\n =========================== *\/\r\n .cta-contact-block {\r\n background: #4169e1;\r\n border-radius: 24px;\r\n padding: 50px 45px;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 20px 60px rgba(29, 55, 119, 0.25);\r\n }\r\n\r\n \/* Decorative Pattern *\/\r\n .cta-contact-block::before {\r\n content: '';\r\n position: absolute;\r\n top: -60px;\r\n right: -60px;\r\n width: 200px;\r\n height: 200px;\r\n border-radius: 50%;\r\n border: 40px solid rgba(255, 255, 255, 0.03);\r\n pointer-events: none;\r\n }\r\n\r\n .cta-contact-block::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -40px;\r\n left: -40px;\r\n width: 150px;\r\n height: 150px;\r\n border-radius: 50%;\r\n border: 30px solid rgba(255, 255, 255, 0.02);\r\n pointer-events: none;\r\n }\r\n\r\n .cta-contact-heading {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 22px;\r\n font-weight: 700;\r\n color: #ffffff;\r\n margin-bottom: 10px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .cta-contact-text {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 14px;\r\n font-weight: 400;\r\n color: rgba(255, 255, 255, 0.6);\r\n line-height: 1.7;\r\n margin-bottom: 35px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* Contact Items *\/\r\n .cta-contact-items {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .cta-contact-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 18px;\r\n padding: 22px 0;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.08);\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n }\r\n\r\n .cta-contact-item:last-child {\r\n border-bottom: none;\r\n padding-bottom: 0;\r\n }\r\n\r\n .cta-contact-item:first-child {\r\n padding-top: 0;\r\n }\r\n\r\n .cta-contact-item:hover {\r\n transform: translateX(8px);\r\n }\r\n\r\n .cta-contact-icon {\r\n width: 52px;\r\n height: 52px;\r\n min-width: 52px;\r\n border-radius: 14px;\r\n background: rgba(255, 255, 255, 0.08);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .cta-contact-item:hover .cta-contact-icon {\r\n background: #ffffff;\r\n border-color: #ffffff;\r\n transform: scale(1.05);\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .cta-contact-icon svg {\r\n width: 22px;\r\n height: 22px;\r\n fill: rgba(255, 255, 255, 0.8);\r\n transition: fill 0.3s ease;\r\n }\r\n\r\n .cta-contact-item:hover .cta-contact-icon svg {\r\n fill: #1D3777;\r\n }\r\n\r\n .cta-contact-info {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n }\r\n\r\n .cta-contact-label {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 11px;\r\n font-weight: 600;\r\n letter-spacing: 2.5px;\r\n text-transform: uppercase;\r\n color: rgba(255, 255, 255, 0.45);\r\n }\r\n\r\n .cta-contact-value {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 15px;\r\n font-weight: 600;\r\n color: #ffffff;\r\n line-height: 1.5;\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .cta-contact-value:hover {\r\n color: #a8c0ff;\r\n }\r\n\r\n .cta-contact-value-sub {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 13px;\r\n font-weight: 400;\r\n color: rgba(255, 255, 255, 0.5);\r\n line-height: 1.5;\r\n }\r\n\r\n \/* Social Row inside contact block *\/\r\n .cta-contact-social {\r\n display: flex;\r\n gap: 10px;\r\n margin-top: 30px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .cta-social-btn {\r\n width: 42px;\r\n height: 42px;\r\n border-radius: 12px;\r\n background: rgba(255, 255, 255, 0.06);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n .cta-social-btn:hover {\r\n background: rgba(255, 255, 255, 0.15);\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .cta-social-btn svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: rgba(255, 255, 255, 0.6);\r\n transition: fill 0.3s ease;\r\n }\r\n\r\n .cta-social-btn:hover svg {\r\n fill: #ffffff;\r\n }\r\n\r\n a.cta-social-btn {\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n \/* ===========================\r\n RIGHT SIDE - Image Cards\r\n =========================== *\/\r\n .cta-cards-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n .cta-card {\r\n background: #ffffff;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n box-shadow: 0 8px 35px rgba(29, 55, 119, 0.08);\r\n border: 1px solid rgba(29, 55, 119, 0.06);\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n cursor: pointer;\r\n position: relative;\r\n text-decoration: none;\r\n display: block;\r\n }\r\n\r\n .cta-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 20px 50px rgba(29, 55, 119, 0.15);\r\n border-color: rgba(29, 55, 119, 0.12);\r\n }\r\n\r\n \/* Card Image *\/\r\n .cta-card-image {\r\n position: relative;\r\n width: 100%;\r\n height: 200px;\r\n overflow: hidden;\r\n }\r\n\r\n .cta-card-image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .cta-card:hover .cta-card-image img {\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* Image Overlay Gradient *\/\r\n .cta-card-image::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 50%;\r\n background: linear-gradient(to top, rgba(29, 55, 119, 0.15), transparent);\r\n pointer-events: none;\r\n transition: opacity 0.4s ease;\r\n }\r\n\r\n .cta-card:hover .cta-card-image::after {\r\n opacity: 0.6;\r\n }\r\n\r\n \/* Card Icon Badge *\/\r\n .cta-card-badge {\r\n position: absolute;\r\n top: 16px;\r\n right: 16px;\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 12px;\r\n background: rgba(255, 255, 255, 0.95);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n z-index: 2;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .cta-card:hover .cta-card-badge {\r\n background: #1D3777;\r\n transform: rotate(10deg) scale(1.05);\r\n }\r\n\r\n .cta-card-badge svg {\r\n width: 20px;\r\n height: 20px;\r\n fill: #1D3777;\r\n transition: fill 0.3s ease;\r\n }\r\n\r\n .cta-card:hover .cta-card-badge svg {\r\n fill: #ffffff;\r\n }\r\n\r\n \/* Card Body *\/\r\n .cta-card-body {\r\n padding: 28px 24px;\r\n }\r\n\r\n .cta-card-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #1D3777;\r\n margin-bottom: 10px;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .cta-card:hover .cta-card-title {\r\n color: #2a4fa0;\r\n }\r\n\r\n .cta-card-desc {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 13px;\r\n font-weight: 400;\r\n color: #7a8aad;\r\n line-height: 1.7;\r\n margin-bottom: 20px;\r\n }\r\n\r\n \/* Card Link *\/\r\n .cta-card-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 12px;\r\n font-weight: 700;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n color: #1D3777;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n }\r\n\r\n .cta-card-link::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -3px;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: #1D3777;\r\n transition: width 0.4s ease;\r\n border-radius: 2px;\r\n }\r\n\r\n .cta-card:hover .cta-card-link::after {\r\n width: 100%;\r\n }\r\n\r\n .cta-card-link svg {\r\n width: 16px;\r\n height: 16px;\r\n fill: #1D3777;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .cta-card:hover .cta-card-link svg {\r\n transform: translateX(5px);\r\n }\r\n\r\n \/* ============================================\r\n ===== CTA RESPONSIVE - TABLET =====\r\n ============================================ *\/\r\n @media (max-width: 1024px) {\r\n .cta-help {\r\n padding: 80px 0;\r\n }\r\n\r\n .cta-help-container {\r\n padding: 0 30px;\r\n }\r\n\r\n .cta-help-header {\r\n margin-bottom: 55px;\r\n }\r\n\r\n .cta-help-title {\r\n font-size: 36px;\r\n }\r\n\r\n .cta-help-subtitle {\r\n font-size: 15px;\r\n }\r\n\r\n .cta-help-grid {\r\n grid-template-columns: 1fr 1.2fr;\r\n gap: 35px;\r\n }\r\n\r\n .cta-contact-block {\r\n padding: 40px 35px;\r\n }\r\n\r\n .cta-contact-heading {\r\n font-size: 20px;\r\n }\r\n\r\n .cta-card-image {\r\n height: 170px;\r\n }\r\n\r\n .cta-card-body {\r\n padding: 22px 20px;\r\n }\r\n\r\n .cta-card-title {\r\n font-size: 16px;\r\n }\r\n\r\n .cta-card-desc {\r\n font-size: 12px;\r\n }\r\n\r\n .cta-cards-grid {\r\n gap: 18px;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n ===== CTA RESPONSIVE - MOBILE =====\r\n ============================================ *\/\r\n @media (max-width: 768px) {\r\n .cta-help {\r\n padding: 65px 0;\r\n }\r\n\r\n .cta-help-container {\r\n padding: 0 20px;\r\n }\r\n\r\n .cta-help-header {\r\n margin-bottom: 45px;\r\n }\r\n\r\n .cta-help-badge {\r\n padding: 8px 20px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .cta-help-badge span {\r\n font-size: 10px;\r\n letter-spacing: 2.5px;\r\n }\r\n\r\n .cta-help-title {\r\n font-size: 30px;\r\n }\r\n\r\n .cta-help-subtitle {\r\n font-size: 14px;\r\n }\r\n\r\n .cta-help-grid {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n\r\n .cta-contact-block {\r\n padding: 38px 30px;\r\n border-radius: 20px;\r\n }\r\n\r\n .cta-contact-heading {\r\n font-size: 20px;\r\n }\r\n\r\n .cta-contact-icon {\r\n width: 48px;\r\n height: 48px;\r\n min-width: 48px;\r\n border-radius: 12px;\r\n }\r\n\r\n .cta-contact-icon svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n\r\n .cta-contact-value {\r\n font-size: 14px;\r\n }\r\n\r\n .cta-cards-grid {\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 16px;\r\n }\r\n\r\n .cta-card-image {\r\n height: 140px;\r\n }\r\n\r\n .cta-card-body {\r\n padding: 18px 16px;\r\n }\r\n\r\n .cta-card-title {\r\n font-size: 14px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .cta-card-desc {\r\n font-size: 11px;\r\n margin-bottom: 14px;\r\n line-height: 1.6;\r\n }\r\n\r\n .cta-card-link {\r\n font-size: 10px;\r\n }\r\n\r\n .cta-card-badge {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 10px;\r\n top: 12px;\r\n right: 12px;\r\n }\r\n\r\n .cta-card-badge svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n ===== CTA RESPONSIVE - SMALL MOBILE =====\r\n ============================================ *\/\r\n @media (max-width: 580px) {\r\n .cta-cards-grid {\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n }\r\n\r\n .cta-card {\r\n display: flex;\r\n flex-direction: row;\r\n border-radius: 16px;\r\n }\r\n\r\n .cta-card-image {\r\n width: 140px;\r\n min-width: 140px;\r\n height: auto;\r\n min-height: 160px;\r\n border-radius: 16px 0 0 16px;\r\n }\r\n\r\n .cta-card-badge {\r\n top: 10px;\r\n right: auto;\r\n left: 10px;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 8px;\r\n }\r\n\r\n .cta-card-badge svg {\r\n width: 14px;\r\n height: 14px;\r\n }\r\n\r\n .cta-card-body {\r\n padding: 22px 20px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n .cta-card-title {\r\n font-size: 16px;\r\n margin-bottom: 6px;\r\n }\r\n\r\n .cta-card-desc {\r\n font-size: 12px;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .cta-card-link {\r\n font-size: 11px;\r\n }\r\n\r\n .cta-card:hover {\r\n transform: translateY(-5px) translateX(5px);\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .cta-help {\r\n padding: 55px 0;\r\n }\r\n\r\n .cta-help-container {\r\n padding: 0 16px;\r\n }\r\n\r\n .cta-help-title {\r\n font-size: 26px;\r\n }\r\n\r\n .cta-help-subtitle {\r\n font-size: 13px;\r\n }\r\n\r\n .cta-contact-block {\r\n padding: 30px 24px;\r\n }\r\n\r\n .cta-contact-heading {\r\n font-size: 18px;\r\n }\r\n\r\n .cta-contact-text {\r\n font-size: 13px;\r\n }\r\n\r\n .cta-contact-item {\r\n gap: 14px;\r\n padding: 18px 0;\r\n }\r\n\r\n .cta-contact-icon {\r\n width: 44px;\r\n height: 44px;\r\n min-width: 44px;\r\n }\r\n\r\n .cta-contact-label {\r\n font-size: 10px;\r\n }\r\n\r\n .cta-contact-value {\r\n font-size: 13px;\r\n }\r\n\r\n .cta-contact-value-sub {\r\n font-size: 12px;\r\n }\r\n\r\n .cta-social-btn {\r\n width: 38px;\r\n height: 38px;\r\n }\r\n\r\n .cta-card-image {\r\n width: 120px;\r\n min-width: 120px;\r\n min-height: 140px;\r\n }\r\n }\r\n<\/style>\r\n\r\n\r\n<!-- ============================================\r\n ===== CTA HELP SECTION HTML =====\r\n ============================================ -->\r\n<section class=\"cta-help\" id=\"help\">\r\n <div class=\"cta-help-container\">\r\n\r\n <!-- Section Header -->\r\n <div class=\"cta-help-header\">\r\n <div class=\"cta-help-badge\">\r\n <div class=\"cta-help-badge-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>\r\n <\/div>\r\n <span>We're Here for You<\/span>\r\n <\/div>\r\n <h2 class=\"cta-help-title\">We're Here to <span>Help<\/span><\/h2>\r\n <p class=\"cta-help-subtitle\">\r\n Our trained sleep consultants are ready to assist you in finding \r\n the perfect mattress for your best night's sleep.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- Main Grid -->\r\n <div class=\"cta-help-grid\">\r\n\r\n <!-- LEFT - Contact Details -->\r\n <div class=\"cta-contact-block\">\r\n <h3 class=\"cta-contact-heading\">Get in Touch<\/h3>\r\n <p class=\"cta-contact-text\">\r\n Reach out to us anytime \u2014 we'd love to hear from you.\r\n <\/p>\r\n\r\n <div class=\"cta-contact-items\">\r\n\r\n <!-- Location -->\r\n <div class=\"cta-contact-item\">\r\n <div class=\"cta-contact-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"cta-contact-info\">\r\n <span class=\"cta-contact-label\">Our Location<\/span>\r\n <span class=\"cta-contact-value\">Karama, Dubai<\/span>\r\n <span class=\"cta-contact-value-sub\">Showroom No. 7, New Rocky Tower, Zabeel Road, Karama, \r\nP.O. Box: 32514<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Phone -->\r\n <div class=\"cta-contact-item\">\r\n <div class=\"cta-contact-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"cta-contact-info\">\r\n <span class=\"cta-contact-label\">Call Us<\/span>\r\n <a href=\"tel:+971504693914\" class=\"cta-contact-value\">+971 504693914 \/ +971 55 7043405<\/a>\r\n <span class=\"cta-contact-value-sub\">Mon \u2013 Sat, 10 AM \u2013 10 PM<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Email -->\r\n <div class=\"cta-contact-item\">\r\n <div class=\"cta-contact-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"cta-contact-info\">\r\n <span class=\"cta-contact-label\">Email Us<\/span>\r\n <a href=\"mailto:info@trendzuae.com\" class=\"cta-contact-value\">info@trendzuae.com<\/a>\r\n <span class=\"cta-contact-value-sub\">We reply within 24 hours<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Social Icons with Links -->\r\n <div class=\"cta-contact-social\">\r\n <!-- Facebook -->\r\n <a href=\"https:\/\/www.facebook.com\/share\/1FYcTnWXq9\/?mibextid=wwXIfr\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"cta-social-btn\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z\"\/><\/svg>\r\n <\/a>\r\n\r\n <!-- Instagram -->\r\n <a href=\"https:\/\/www.instagram.com\/trendzlifestyleuae?igsh=MTRxM3AwMjJwemZndQ%3D%3D&utm_source=qr\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"cta-social-btn\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z\"\/><\/svg>\r\n <\/a>\r\n\r\n <!-- WhatsApp (Official Icon) -->\r\n <a href=\"https:\/\/wa.me\/971504693914\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"cta-social-btn\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/><\/svg>\r\n <\/a>\r\n\r\n \r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <!-- RIGHT - Image Cards -->\r\n <div class=\"cta-cards-grid\">\r\n\r\n <!-- Card 1 - Products -->\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/products\/\" class=\"cta-card\">\r\n <div class=\"cta-card-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1631049307264-da0ec9d70304?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80\" alt=\"Our Products\" loading=\"lazy\">\r\n <div class=\"cta-card-badge\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\" fill=\"none\" stroke=\"#1D3777\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\" fill=\"none\" stroke=\"#1D3777\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\" fill=\"none\" stroke=\"#1D3777\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cta-card-body\">\r\n <h4 class=\"cta-card-title\">Our Products<\/h4>\r\n <div class=\"cta-card-link\">\r\n <span>View All<\/span>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Card 2 - FAQ -->\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/about-us\/\" class=\"cta-card\">\r\n <div class=\"cta-card-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1586023492125-27b2c045efd7?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80\" alt=\"FAQ\" loading=\"lazy\">\r\n <div class=\"cta-card-badge\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cta-card-body\">\r\n <h4 class=\"cta-card-title\">FAQ<\/h4>\r\n <div class=\"cta-card-link\">\r\n <span>Read FAQ<\/span>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Card 3 - Contact -->\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/contact-us\/\" class=\"cta-card\">\r\n <div class=\"cta-card-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80\" alt=\"Contact Us\" loading=\"lazy\">\r\n <div class=\"cta-card-badge\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cta-card-body\">\r\n <h4 class=\"cta-card-title\">Contact Us<\/h4>\r\n <div class=\"cta-card-link\">\r\n <span>Reach Out<\/span>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n<!-- ===== CTA HELP SECTION END ===== -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-78912ce e-con-full e-flex e-con e-parent\" data-id=\"78912ce\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-471a8e2 elementor-widget elementor-widget-html\" data-id=\"471a8e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n \/* ============================================\r\n ===== FOOTER =====\r\n ============================================ *\/\r\n .footer {\r\n position: relative;\r\n background: #4169e1;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Background Pattern *\/\r\n .footer::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background:\r\n radial-gradient(circle at 10% 20%, rgba(29, 55, 119, 0.3) 0%, transparent 50%),\r\n radial-gradient(circle at 90% 80%, rgba(29, 55, 119, 0.2) 0%, transparent 50%);\r\n pointer-events: none;\r\n }\r\n\r\n \/* Subtle Grid Lines *\/\r\n .footer-bg-pattern {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: repeating-linear-gradient(\r\n 90deg,\r\n transparent,\r\n transparent 100px,\r\n rgba(255, 255, 255, 0.008) 100px,\r\n rgba(255, 255, 255, 0.008) 101px\r\n ),\r\n repeating-linear-gradient(\r\n 0deg,\r\n transparent,\r\n transparent 100px,\r\n rgba(255, 255, 255, 0.008) 100px,\r\n rgba(255, 255, 255, 0.008) 101px\r\n );\r\n pointer-events: none;\r\n }\r\n\r\n \/* Top Gradient Line *\/\r\n .footer-top-line {\r\n height: 4px;\r\n background: #4169e1;\r\n }\r\n\r\n \/* ===== Main Footer ===== *\/\r\n .footer-main {\r\n position: relative;\r\n z-index: 1;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n padding: 80px 40px 60px;\r\n display: grid;\r\n grid-template-columns: 1.3fr 1fr 1fr 1.2fr;\r\n gap: 50px;\r\n }\r\n\r\n \/* ===== Column 1 - Brand ===== *\/\r\n .footer-brand {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .footer-logo {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n text-decoration: none;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .footer-logo-img {\r\n height: 24px;\r\n width: auto;\r\n filter: brightness(0) invert(1);\r\n object-fit: contain;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .footer-logo:hover .footer-logo-img {\r\n opacity: 0.8;\r\n }\r\n\r\n .footer-brand-desc {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 14px;\r\n font-weight: 400;\r\n color: rgba(255, 255, 255, 0.45);\r\n line-height: 1.8;\r\n margin-bottom: 30px;\r\n max-width: 300px;\r\n }\r\n\r\n \/* Social Icons *\/\r\n .footer-socials {\r\n display: flex;\r\n gap: 10px;\r\n }\r\n\r\n .footer-social-link {\r\n width: 42px;\r\n height: 42px;\r\n border-radius: 12px;\r\n background: rgba(255, 255, 255, 0.04);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.4s ease;\r\n cursor: pointer;\r\n }\r\n\r\n .footer-social-link:hover {\r\n background: #1D3777;\r\n border-color: #1D3777;\r\n transform: translateY(-4px);\r\n box-shadow: 0 8px 25px rgba(29, 55, 119, 0.3);\r\n }\r\n\r\n .footer-social-link svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: rgba(255, 255, 255, 0.5);\r\n transition: fill 0.3s ease;\r\n }\r\n\r\n .footer-social-link:hover svg {\r\n fill: #ffffff;\r\n }\r\n\r\n \/* ===== Column Headings ===== *\/\r\n .footer-heading {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 13px;\r\n font-weight: 700;\r\n letter-spacing: 2.5px;\r\n text-transform: uppercase;\r\n color: #ffffff;\r\n margin-bottom: 28px;\r\n position: relative;\r\n padding-bottom: 14px;\r\n }\r\n\r\n .footer-heading::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 30px;\r\n height: 2px;\r\n background: linear-gradient(90deg, #a8c0ff, transparent);\r\n border-radius: 2px;\r\n }\r\n\r\n \/* ===== Column 2 - Quick Links ===== *\/\r\n .footer-links {\r\n list-style: none;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n }\r\n\r\n .footer-link-item {\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.03);\r\n }\r\n\r\n .footer-link-item:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .footer-link {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 12px 0;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: rgba(255, 255, 255, 0.45);\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .footer-link:hover {\r\n color: #ffffff;\r\n transform: translateX(6px);\r\n }\r\n\r\n .footer-link-arrow {\r\n width: 0;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .footer-link:hover .footer-link-arrow {\r\n width: 16px;\r\n }\r\n\r\n .footer-link-arrow svg {\r\n width: 14px;\r\n height: 14px;\r\n fill: #a8c0ff;\r\n min-width: 14px;\r\n }\r\n\r\n \/* ===== Column 3 - Products ===== *\/\r\n \/* Uses same .footer-links styles *\/\r\n\r\n \/* ===== Column 4 - Contact ===== *\/\r\n .footer-contact-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n\r\n .footer-contact-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 16px;\r\n transition: all 0.3s ease;\r\n cursor: default;\r\n }\r\n\r\n .footer-contact-item:hover {\r\n transform: translateX(4px);\r\n }\r\n\r\n .footer-contact-icon {\r\n width: 42px;\r\n height: 42px;\r\n min-width: 42px;\r\n border-radius: 12px;\r\n background: rgba(255, 255, 255, 0.04);\r\n border: 1px solid rgba(255, 255, 255, 0.06);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .footer-contact-item:hover .footer-contact-icon {\r\n background: rgba(29, 55, 119, 0.4);\r\n border-color: rgba(168, 192, 255, 0.2);\r\n }\r\n\r\n .footer-contact-icon svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: rgba(255, 255, 255, 0.4);\r\n transition: fill 0.3s ease;\r\n }\r\n\r\n .footer-contact-item:hover .footer-contact-icon svg {\r\n fill: #a8c0ff;\r\n }\r\n\r\n .footer-contact-info {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 3px;\r\n }\r\n\r\n .footer-contact-label {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 10px;\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n .footer-contact-value {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: rgba(255, 255, 255, 0.65);\r\n line-height: 1.6;\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n a.footer-contact-value:hover {\r\n color: #ffffff;\r\n }\r\n\r\n \/* ===== Newsletter Row ===== *\/\r\n .footer-newsletter {\r\n position: relative;\r\n z-index: 1;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n }\r\n\r\n .footer-newsletter-inner {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 40px;\r\n padding: 40px 50px;\r\n background: rgba(255, 255, 255, 0.03);\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n border-radius: 20px;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .footer-newsletter-text h4 {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 20px;\r\n font-weight: 700;\r\n color: #ffffff;\r\n margin-bottom: 6px;\r\n }\r\n\r\n .footer-newsletter-text p {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 13px;\r\n font-weight: 400;\r\n color: rgba(255, 255, 255, 0.4);\r\n }\r\n\r\n .footer-newsletter-form {\r\n display: flex;\r\n gap: 12px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .footer-newsletter-input {\r\n width: 300px;\r\n padding: 15px 22px;\r\n background: rgba(255, 255, 255, 0.06);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 50px;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 13px;\r\n font-weight: 400;\r\n color: #ffffff;\r\n outline: none;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .footer-newsletter-input::placeholder {\r\n color: rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n .footer-newsletter-input:focus {\r\n border-color: rgba(168, 192, 255, 0.4);\r\n background: rgba(255, 255, 255, 0.08);\r\n }\r\n\r\n .footer-newsletter-btn {\r\n padding: 15px 32px;\r\n background: #ffffff;\r\n color: #1D3777;\r\n border: none;\r\n border-radius: 50px;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 12px;\r\n font-weight: 700;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .footer-newsletter-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);\r\n background: #e8edf8;\r\n }\r\n\r\n .footer-newsletter-btn svg {\r\n width: 16px;\r\n height: 16px;\r\n fill: #1D3777;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .footer-newsletter-btn:hover svg {\r\n transform: translateX(3px);\r\n }\r\n\r\n \/* ===== Bottom Bar ===== *\/\r\n .footer-bottom {\r\n position: relative;\r\n z-index: 1;\r\n border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n\r\n .footer-bottom-inner {\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n padding: 28px 40px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n }\r\n\r\n .footer-copyright {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 13px;\r\n font-weight: 400;\r\n color: rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n .footer-copyright a {\r\n color: rgba(255, 255, 255, 0.5);\r\n text-decoration: none;\r\n font-weight: 600;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .footer-copyright a:hover {\r\n color: #a8c0ff;\r\n }\r\n\r\n .footer-bottom-links {\r\n display: flex;\r\n gap: 30px;\r\n list-style: none;\r\n }\r\n\r\n .footer-bottom-link {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: rgba(255, 255, 255, 0.3);\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .footer-bottom-link:hover {\r\n color: rgba(255, 255, 255, 0.7);\r\n }\r\n\r\n \/* Scroll to Top *\/\r\n .footer-scroll-top {\r\n position: absolute;\r\n top: -24px;\r\n right: 60px;\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 50%;\r\n background: #1D3777;\r\n border: 3px solid #0f1d3d;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n box-shadow: 0 4px 20px rgba(29, 55, 119, 0.3);\r\n z-index: 5;\r\n }\r\n\r\n .footer-scroll-top:hover {\r\n background: #2a4fa0;\r\n transform: translateY(-4px);\r\n box-shadow: 0 8px 30px rgba(29, 55, 119, 0.4);\r\n }\r\n\r\n .footer-scroll-top svg {\r\n width: 20px;\r\n height: 20px;\r\n fill: #ffffff;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .footer-scroll-top:hover svg {\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE - TABLET\r\n ============================================ *\/\r\n @media (max-width: 1024px) {\r\n .footer-main {\r\n padding: 65px 30px 50px;\r\n grid-template-columns: 1.2fr 1fr 1fr;\r\n gap: 40px;\r\n }\r\n\r\n \/* Contact column goes full width below *\/\r\n .footer-col-contact {\r\n grid-column: 1 \/ -1;\r\n }\r\n\r\n .footer-contact-list {\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n gap: 24px;\r\n }\r\n\r\n .footer-contact-item {\r\n flex: 1;\r\n min-width: 200px;\r\n }\r\n\r\n .footer-newsletter-inner {\r\n padding: 35px 40px;\r\n }\r\n\r\n .footer-newsletter-input {\r\n width: 250px;\r\n }\r\n\r\n .footer-scroll-top {\r\n right: 40px;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE - MOBILE\r\n ============================================ *\/\r\n @media (max-width: 768px) {\r\n .footer-main {\r\n padding: 55px 20px 40px;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 40px 30px;\r\n }\r\n\r\n .footer-brand {\r\n grid-column: 1 \/ -1;\r\n align-items: center;\r\n text-align: center;\r\n }\r\n\r\n .footer-brand-desc {\r\n max-width: 400px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .footer-socials {\r\n justify-content: center;\r\n }\r\n\r\n .footer-heading::after {\r\n left: 0;\r\n }\r\n\r\n .footer-col-contact {\r\n grid-column: 1 \/ -1;\r\n }\r\n\r\n .footer-contact-list {\r\n flex-direction: column;\r\n gap: 18px;\r\n }\r\n\r\n .footer-contact-item {\r\n min-width: auto;\r\n }\r\n\r\n \/* Newsletter *\/\r\n .footer-newsletter {\r\n padding: 0 20px;\r\n }\r\n\r\n .footer-newsletter-inner {\r\n flex-direction: column;\r\n text-align: center;\r\n padding: 30px 28px;\r\n gap: 24px;\r\n border-radius: 16px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .footer-newsletter-form {\r\n width: 100%;\r\n flex-direction: column;\r\n }\r\n\r\n .footer-newsletter-input {\r\n width: 100%;\r\n }\r\n\r\n .footer-newsletter-btn {\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n\r\n \/* Bottom Bar *\/\r\n .footer-bottom-inner {\r\n flex-direction: column;\r\n text-align: center;\r\n padding: 24px 20px;\r\n gap: 16px;\r\n }\r\n\r\n .footer-bottom-links {\r\n gap: 20px;\r\n }\r\n\r\n .footer-copyright {\r\n font-size: 12px;\r\n }\r\n\r\n .footer-bottom-link {\r\n font-size: 11px;\r\n }\r\n\r\n .footer-scroll-top {\r\n right: 30px;\r\n width: 44px;\r\n height: 44px;\r\n top: -22px;\r\n }\r\n\r\n .footer-scroll-top svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE - SMALL MOBILE\r\n ============================================ *\/\r\n @media (max-width: 480px) {\r\n .footer-main {\r\n grid-template-columns: 1fr;\r\n gap: 35px;\r\n padding: 45px 16px 35px;\r\n }\r\n\r\n .footer-brand {\r\n align-items: center;\r\n text-align: center;\r\n }\r\n\r\n .footer-heading {\r\n font-size: 12px;\r\n }\r\n\r\n .footer-heading::after {\r\n left: 0;\r\n }\r\n\r\n .footer-link {\r\n font-size: 13px;\r\n padding: 10px 0;\r\n }\r\n\r\n .footer-contact-icon {\r\n width: 38px;\r\n height: 38px;\r\n min-width: 38px;\r\n }\r\n\r\n .footer-contact-icon svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n .footer-contact-value {\r\n font-size: 13px;\r\n }\r\n\r\n .footer-newsletter {\r\n padding: 0 16px;\r\n }\r\n\r\n .footer-newsletter-inner {\r\n padding: 26px 22px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .footer-newsletter-text h4 {\r\n font-size: 18px;\r\n }\r\n\r\n .footer-newsletter-text p {\r\n font-size: 12px;\r\n }\r\n\r\n .footer-newsletter-input {\r\n padding: 14px 20px;\r\n font-size: 12px;\r\n }\r\n\r\n .footer-newsletter-btn {\r\n padding: 14px 28px;\r\n font-size: 11px;\r\n }\r\n\r\n .footer-bottom-inner {\r\n padding: 22px 16px;\r\n }\r\n\r\n .footer-bottom-links {\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 16px;\r\n }\r\n\r\n .footer-scroll-top {\r\n right: 20px;\r\n width: 40px;\r\n height: 40px;\r\n top: -20px;\r\n }\r\n }\r\n<\/style>\r\n\r\n\r\n<!-- ============================================\r\n ===== FOOTER HTML =====\r\n ============================================ -->\r\n<footer class=\"footer\" id=\"footer\">\r\n\r\n <!-- Top Gradient Line -->\r\n <div class=\"footer-top-line\"><\/div>\r\n\r\n <!-- Background Pattern -->\r\n <div class=\"footer-bg-pattern\"><\/div>\r\n\r\n <!-- ===== Main Footer Content ===== -->\r\n <div class=\"footer-main\">\r\n\r\n <!-- Column 1 \u2014 Brand -->\r\n <div class=\"footer-brand\">\r\n <a href=\"#\" class=\"footer-logo\">\r\n <img decoding=\"async\" src=\"https:\/\/www.trendzuae.com\/wp-content\/uploads\/2026\/02\/Untitled-design-2026-02-20T103457.746.png\"\r\n alt=\"Trendz Mattress\" class=\"footer-logo-img\"\r\n onerror=\"this.style.display='none';\">\r\n <\/a>\r\n <p class=\"footer-brand-desc\">\r\n Trendz Mattress is a leading manufacturer and supplier of premium mattresses,\r\n bed linens, and bath essentials across the UAE. Crafting comfort since 2008.\r\n <\/p>\r\n <div class=\"footer-socials\">\r\n <a href=\"https:\/\/www.facebook.com\/share\/1FYcTnWXq9\/?mibextid=wwXIfr\" class=\"footer-social-link\" aria-label=\"Facebook\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z\"\/><\/svg>\r\n <\/a>\r\n <a href=\"https:\/\/www.instagram.com\/trendzlifestyleuae?igsh=MTRxM3AwMjJwemZndQ%3D%3D&utm_source=qr\" class=\"footer-social-link\" aria-label=\"Instagram\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z\"\/><\/svg>\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/+971504693914\" class=\"footer-social-link\" aria-label=\"WhatsApp\">\r\n <div class=\"cta-social-btn\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/><\/svg>\r\n<\/div>\r\n <\/a>\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Column 2 \u2014 Quick Links -->\r\n <div class=\"footer-col\">\r\n <h4 class=\"footer-heading\">Quick Links<\/h4>\r\n <ul class=\"footer-links\">\r\n <li class=\"footer-link-item\">\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/home\/\" class=\"footer-link\">\r\n <span class=\"footer-link-arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/><\/svg><\/span>\r\n Home\r\n <\/a>\r\n <\/li>\r\n <li class=\"footer-link-item\">\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/about-us\/\" class=\"footer-link\">\r\n <span class=\"footer-link-arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/><\/svg><\/span>\r\n About Us\r\n <\/a>\r\n <\/li>\r\n <li class=\"footer-link-item\">\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/products\/\" class=\"footer-link\">\r\n <span class=\"footer-link-arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/><\/svg><\/span>\r\n Products\r\n <\/a>\r\n <\/li>\r\n <li class=\"footer-link-item\">\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/blog\/\" class=\"footer-link\">\r\n <span class=\"footer-link-arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/><\/svg><\/span>\r\n Blog\r\n <\/a>\r\n <\/li>\r\n <li class=\"footer-link-item\">\r\n <a href=\"https:\/\/www.trendzuae.com\/index.php\/contact-us\/\" class=\"footer-link\">\r\n <span class=\"footer-link-arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/><\/svg><\/span>\r\n Contact Us\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <!-- Column 3 \u2014 Products -->\r\n <div class=\"footer-col\">\r\n <h4 class=\"footer-heading\">Products<\/h4>\r\n <ul class=\"footer-links\">\r\n <li class=\"footer-link-item\">\r\n <a href=\"#mattress\" class=\"footer-link\">\r\n <span class=\"footer-link-arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/><\/svg><\/span>\r\n Mattress\r\n <\/a>\r\n <\/li>\r\n <li class=\"footer-link-item\">\r\n <a href=\"#bedlinen\" class=\"footer-link\">\r\n <span class=\"footer-link-arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/><\/svg><\/span>\r\n Bed Linen\r\n <\/a>\r\n <\/li>\r\n <li class=\"footer-link-item\">\r\n <a href=\"#bedding\" class=\"footer-link\">\r\n <span class=\"footer-link-arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/><\/svg><\/span>\r\n Bedding Accessories\r\n <\/a>\r\n <\/li>\r\n <li class=\"footer-link-item\">\r\n <a href=\"#bath\" class=\"footer-link\">\r\n <span class=\"footer-link-arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/><\/svg><\/span>\r\n Bath Essentials\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <!-- Column 4 \u2014 Contact -->\r\n <div class=\"footer-col footer-col-contact\">\r\n <h4 class=\"footer-heading\">Contact Us<\/h4>\r\n <div class=\"footer-contact-list\">\r\n\r\n <!-- Location -->\r\n <div class=\"footer-contact-item\">\r\n <div class=\"footer-contact-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"footer-contact-info\">\r\n <span class=\"footer-contact-label\">Location<\/span>\r\n <span class=\"footer-contact-value\">Showroom No. 7, New Rocky Tower, Zabeel Road, Karama, Dubai, UAE\r\nP.O. Box: 32514<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Phone -->\r\n <div class=\"footer-contact-item\">\r\n <div class=\"footer-contact-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"footer-contact-info\">\r\n <span class=\"footer-contact-label\">Call Us<\/span>\r\n <a href=\"tel:+971 504693914\" class=\"footer-contact-value\">+971 504693914 \/ +971 55 7043405<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Email -->\r\n <div class=\"footer-contact-item\">\r\n <div class=\"footer-contact-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"footer-contact-info\">\r\n <span class=\"footer-contact-label\">Email<\/span>\r\n <a href=\"mailto:info@trendzuae.com\" class=\"footer-contact-value\">info@trendzuae.com<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Working Hours -->\r\n <div class=\"footer-contact-item\">\r\n <div class=\"footer-contact-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"footer-contact-info\">\r\n <span class=\"footer-contact-label\">Working Hours<\/span>\r\n <span class=\"footer-contact-value\">Mon \u2013 Sat: 10 AM \u2013 10 PM<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n <!-- ===== Bottom Bar ===== -->\r\n <div class=\"footer-bottom\">\r\n\r\n <!-- Scroll to Top -->\r\n <div class=\"footer-scroll-top\" id=\"scrollToTop\" aria-label=\"Back to top\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"\/><\/svg>\r\n <\/div>\r\n\r\n <div class=\"footer-bottom-inner\">\r\n <p class=\"footer-copyright\">\r\n \u00a9 2025 <a href=\"#\">Trendz Lifestyle and Accessories LLC<\/a>. All rights reserved.\r\n <\/p>\r\n \r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n<!-- ===== FOOTER END ===== -->\r\n\r\n\r\n<!-- ===== Scroll to Top JS ===== -->\r\n<script>\r\n(function () {\r\n const scrollBtn = document.getElementById('scrollToTop');\r\n if (scrollBtn) {\r\n scrollBtn.addEventListener('click', () => {\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n });\r\n }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Trendz Mattress +971 504693914, +971 55 7043405 info@trendzuae.com Home About Us Products Blog Contact Us Get Quote +971 504693914, +971 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.trendzuae.com\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.trendzuae.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.trendzuae.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.trendzuae.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.trendzuae.com\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":166,"href":"https:\/\/www.trendzuae.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":390,"href":"https:\/\/www.trendzuae.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/390"}],"wp:attachment":[{"href":"https:\/\/www.trendzuae.com\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}