{"id":16,"date":"2026-05-28T19:05:59","date_gmt":"2026-05-28T19:05:59","guid":{"rendered":"https:\/\/pakinterior.designwithsana.com\/?page_id=16"},"modified":"2026-06-05T17:25:22","modified_gmt":"2026-06-05T17:25:22","slug":"home","status":"publish","type":"page","link":"https:\/\/pakinterior.designwithsana.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nFlooring Hero Slider<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700;800&family=Lato:wght@300;400&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n \/* FULL-WIDTH RESET \u2014 overrides any parent container *\/\r\n html, body {\r\n width: 100%;\r\n max-width: 100% !important;\r\n overflow-x: hidden;\r\n padding: 0 !important;\r\n margin: 0 !important;\r\n }\r\n\r\n \/* Break out of ANY parent wrapper (Bootstrap .container, WordPress, Elementor, etc.) *\/\r\n .slider-fullwidth-wrapper {\r\n width: 100vw;\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n }\r\n\r\n \/* ====== SLIDER ====== *\/\r\n .slider {\r\n position: relative;\r\n width: 100%;\r\n height: 100vh;\r\n min-height: 520px;\r\n overflow: hidden;\r\n background: #111;\r\n }\r\n\r\n \/* ====== SLIDES ====== *\/\r\n .slide {\r\n position: absolute;\r\n inset: 0;\r\n opacity: 0;\r\n z-index: 0;\r\n transition: opacity 1.2s ease;\r\n }\r\n\r\n .slide.active {\r\n opacity: 1;\r\n z-index: 1;\r\n }\r\n\r\n .slide-bg {\r\n position: absolute;\r\n inset: 0;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.08);\r\n transition: transform 7s ease;\r\n }\r\n\r\n .slide.active .slide-bg {\r\n transform: scale(1);\r\n }\r\n\r\n .slide-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(0,0,0,0.52);\r\n }\r\n\r\n \/* ====== SLIDE CONTENT ====== *\/\r\n .slide-content {\r\n position: absolute;\r\n inset: 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: 0 24px;\r\n z-index: 2;\r\n }\r\n\r\n \/* ---- SLIDE 1 ---- *\/\r\n .s1-tag {\r\n display: inline-block;\r\n background: #b89a5a;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: clamp(18px, 3vw, 32px);\r\n font-weight: 800;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: #fff;\r\n padding: 10px 32px;\r\n margin-bottom: 18px;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.7s ease 0.4s, transform 0.7s ease 0.4s;\r\n }\r\n\r\n .s1-sub {\r\n font-family: 'Lato', sans-serif;\r\n font-size: clamp(13px, 1.4vw, 17px);\r\n color: #fff;\r\n background: rgba(0,0,0,0.45);\r\n padding: 7px 22px;\r\n letter-spacing: 1px;\r\n margin-bottom: 28px;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: opacity 0.7s ease 0.75s, transform 0.7s ease 0.75s;\r\n }\r\n\r\n .s1-btn {\r\n display: inline-block;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 12px;\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: #fff;\r\n background: #2c2c2a;\r\n border: none;\r\n padding: 14px 32px;\r\n border-radius: 30px;\r\n cursor: pointer;\r\n text-decoration: none;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: opacity 0.7s ease 1.05s, transform 0.7s ease 1.05s, background 0.3s;\r\n }\r\n\r\n .s1-btn:hover { background: #b89a5a; }\r\n\r\n .s1-thumbs {\r\n position: absolute;\r\n bottom: 28px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n gap: 6px;\r\n z-index: 3;\r\n opacity: 0;\r\n transition: opacity 0.7s ease 1.3s;\r\n }\r\n\r\n .s1-thumb {\r\n width: 72px;\r\n height: 50px;\r\n object-fit: cover;\r\n border: 2px solid rgba(255,255,255,0.4);\r\n cursor: pointer;\r\n transition: border-color 0.3s;\r\n }\r\n\r\n .s1-thumb:hover { border-color: #b89a5a; }\r\n\r\n \/* ---- SLIDE 2 ---- *\/\r\n .s2-content {\r\n align-items: flex-start;\r\n padding-left: clamp(32px, 10vw, 200px);\r\n }\r\n\r\n .s2-label {\r\n font-family: 'Lato', sans-serif;\r\n font-size: clamp(15px, 1.5vw, 20px);\r\n color: #fff;\r\n font-weight: 400;\r\n margin-bottom: 10px;\r\n letter-spacing: 0.5px;\r\n opacity: 0;\r\n transform: translateX(-30px);\r\n transition: opacity 0.7s ease 0.4s, transform 0.7s ease 0.4s;\r\n }\r\n\r\n .s2-callnow {\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: #ccc;\r\n margin-bottom: 14px;\r\n opacity: 0;\r\n transform: translateX(-30px);\r\n transition: opacity 0.7s ease 0.7s, transform 0.7s ease 0.7s;\r\n }\r\n\r\n .s2-phone {\r\n display: flex;\r\n align-items: center;\r\n opacity: 0;\r\n transform: translateX(-30px);\r\n transition: opacity 0.7s ease 1s, transform 0.7s ease 1s;\r\n }\r\n\r\n .s2-phone-icon {\r\n background: #fff;\r\n color: #b89a5a;\r\n width: 52px;\r\n height: 52px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 20px;\r\n }\r\n\r\n .s2-phone-num {\r\n background: #b89a5a;\r\n color: #fff;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: clamp(16px, 2vw, 24px);\r\n font-weight: 700;\r\n padding: 14px 28px;\r\n letter-spacing: 1px;\r\n }\r\n\r\n \/* ---- SLIDE 3 ---- *\/\r\n .s3-small {\r\n font-family: 'Lato', sans-serif;\r\n font-size: clamp(11px, 1.1vw, 14px);\r\n letter-spacing: 4px;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.75);\r\n margin-bottom: 14px;\r\n opacity: 0;\r\n transform: translateY(-20px);\r\n transition: opacity 0.7s ease 0.4s, transform 0.7s ease 0.4s;\r\n }\r\n\r\n .s3-big {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: clamp(28px, 5vw, 64px);\r\n font-weight: 800;\r\n color: #fff;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n line-height: 1.1;\r\n margin-bottom: 24px;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.8s ease 0.65s, transform 0.8s ease 0.65s;\r\n }\r\n\r\n .s3-tags {\r\n display: flex;\r\n align-items: center;\r\n gap: 24px;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: opacity 0.7s ease 1.1s, transform 0.7s ease 1.1s;\r\n }\r\n\r\n .s3-tag-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n color: #fff;\r\n font-family: 'Lato', sans-serif;\r\n font-size: 14px;\r\n }\r\n\r\n .s3-tag-item svg {\r\n width: 18px; height: 18px;\r\n fill: #b89a5a;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* ====== ANIMATE IN ON ACTIVE ====== *\/\r\n .slide.active .s1-tag,\r\n .slide.active .s1-sub,\r\n .slide.active .s1-btn,\r\n .slide.active .s2-label,\r\n .slide.active .s2-callnow,\r\n .slide.active .s2-phone,\r\n .slide.active .s3-small,\r\n .slide.active .s3-big,\r\n .slide.active .s3-tags { opacity: 1; transform: translate(0); }\r\n\r\n .slide.active .s1-thumbs { opacity: 1; }\r\n\r\n \/* ====== ARROWS ====== *\/\r\n .slider-arrow {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n z-index: 10;\r\n background: rgba(0,0,0,0.35);\r\n border: none;\r\n color: #fff;\r\n width: 48px;\r\n height: 48px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n font-size: 26px;\r\n transition: background 0.3s;\r\n line-height: 1;\r\n }\r\n\r\n .slider-arrow:hover { background: #b89a5a; }\r\n .slider-arrow.prev { left: 20px; }\r\n .slider-arrow.next { right: 20px; }\r\n\r\n \/* ====== DOTS ====== *\/\r\n .slider-dots {\r\n position: absolute;\r\n bottom: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n gap: 8px;\r\n z-index: 10;\r\n }\r\n\r\n .dot {\r\n width: 10px; height: 10px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.4);\r\n border: none;\r\n cursor: pointer;\r\n transition: background 0.3s, transform 0.3s;\r\n padding: 0;\r\n }\r\n\r\n .dot.active { background: #b89a5a; transform: scale(1.3); }\r\n\r\n \/* ====== RESPONSIVE ====== *\/\r\n @media (max-width: 600px) {\r\n .s2-content { padding-left: 24px; padding-right: 24px; }\r\n .s1-thumb { width: 52px; height: 36px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- This wrapper breaks out of any parent container -->\r\n<div class=\"slider-fullwidth-wrapper\">\r\n <div class=\"slider\" id=\"heroSlider\">\r\n\r\n <!-- SLIDE 1 -->\r\n <div class=\"slide active\" id=\"slide-0\">\r\n <div class=\"slide-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1562663474-6cbb3eaa4d14?w=1800&q=90&auto=format&fit=crop')\"><\/div>\r\n <div class=\"slide-overlay\"><\/div>\r\n <div class=\"slide-content\">\r\n <div class=\"s1-tag\">The Ultimate Flooring Service<\/div>\r\n <div class=\"s1-sub\">Wood Floor Installation, Refinishing<\/div>\r\n <a href=\"#\" class=\"s1-btn\">View Details<\/a>\r\n <\/div>\r\n <div class=\"s1-thumbs\">\r\n <img decoding=\"async\" class=\"s1-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1581858726788-75bc0f6a952d?w=160&q=75&auto=format&fit=crop\" alt=\"thumb1\" \/>\r\n <img decoding=\"async\" class=\"s1-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1556912172-45b7abe8b7e1?w=160&q=75&auto=format&fit=crop\" alt=\"thumb2\" \/>\r\n <img decoding=\"async\" class=\"s1-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1600585154526-990dced4db0d?w=160&q=75&auto=format&fit=crop\" alt=\"thumb3\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- SLIDE 2 -->\r\n <div class=\"slide\" id=\"slide-1\">\r\n <div class=\"slide-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1616486338812-3dadae4b4ace?w=1800&q=90&auto=format&fit=crop')\"><\/div>\r\n <div class=\"slide-overlay\" style=\"background:rgba(20,15,10,0.65)\"><\/div>\r\n <div class=\"slide-content s2-content\">\r\n <div class=\"s2-label\">For quality flooring service<\/div>\r\n <div class=\"s2-callnow\">Call Now<\/div>\r\n <div class=\"s2-phone\">\r\n <div class=\"s2-phone-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#b89a5a\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81a19.79 19.79 0 01-3.07-8.67A2 2 0 012 .99h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 8.37a16 16 0 006.72 6.72l1.74-1.74a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"s2-phone-num\">+91 2345 678 901<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- SLIDE 3 -->\r\n <div class=\"slide\" id=\"slide-2\">\r\n <div class=\"slide-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1584622650111-993a426fbf0a?w=1800&q=90&auto=format&fit=crop')\"><\/div>\r\n <div class=\"slide-overlay\" style=\"background:rgba(0,0,0,0.48)\"><\/div>\r\n <div class=\"slide-content\">\r\n <div class=\"s3-small\">Commercial and Residential<\/div>\r\n <div class=\"s3-big\">Flooring Specialists<\/div>\r\n <div class=\"s3-tags\">\r\n <div class=\"s3-tag-item\">\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 14.5l-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z\"\/><\/svg>\r\n Laminate\r\n <\/div>\r\n <div class=\"s3-tag-item\">\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 14.5l-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z\"\/><\/svg>\r\n Carpet\r\n <\/div>\r\n <div class=\"s3-tag-item\">\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 14.5l-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z\"\/><\/svg>\r\n Wood\r\n <\/div>\r\n <div class=\"s3-tag-item\">\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 14.5l-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z\"\/><\/svg>\r\n Vinyls\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ARROWS -->\r\n <button class=\"slider-arrow prev\" id=\"sliderPrev\">\u2039<\/button>\r\n <button class=\"slider-arrow next\" id=\"sliderNext\">\u203a<\/button>\r\n\r\n <!-- DOTS -->\r\n <div class=\"slider-dots\">\r\n <button class=\"dot active\" data-index=\"0\"><\/button>\r\n <button class=\"dot\" data-index=\"1\"><\/button>\r\n <button class=\"dot\" data-index=\"2\"><\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n var slides = document.querySelectorAll('.slide');\r\n var dots = document.querySelectorAll('.dot');\r\n var current = 0;\r\n var total = slides.length;\r\n var timer;\r\n\r\n function goTo(n) {\r\n slides[current].classList.remove('active');\r\n dots[current].classList.remove('active');\r\n current = (n + total) % total;\r\n slides[current].classList.add('active');\r\n dots[current].classList.add('active');\r\n resetTimer();\r\n }\r\n\r\n function resetTimer() {\r\n clearInterval(timer);\r\n timer = setInterval(function(){ goTo(current + 1); }, 6000);\r\n }\r\n\r\n document.getElementById('sliderPrev').addEventListener('click', function(){ goTo(current - 1); });\r\n document.getElementById('sliderNext').addEventListener('click', function(){ goTo(current + 1); });\r\n\r\n dots.forEach(function(dot){\r\n dot.addEventListener('click', function(){ goTo(parseInt(dot.getAttribute('data-index'))); });\r\n });\r\n\r\n document.addEventListener('keydown', function(e){\r\n if(e.key === 'ArrowLeft') goTo(current - 1);\r\n if(e.key === 'ArrowRight') goTo(current + 1);\r\n });\r\n\r\n var touchX = 0;\r\n document.getElementById('heroSlider').addEventListener('touchstart', function(e){ touchX = e.touches[0].clientX; });\r\n document.getElementById('heroSlider').addEventListener('touchend', function(e){\r\n var diff = touchX - e.changedTouches[0].clientX;\r\n if(Math.abs(diff) > 50){ goTo(diff > 0 ? current + 1 : current - 1); }\r\n });\r\n\r\n resetTimer();\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4751af4 elementor-widget elementor-widget-html\" data-id=\"4751af4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Covering Wall to Wall<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@600;700;800&family=Lato:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n \/* ====== FULL WIDTH BREAKOUT ====== *\/\r\n .wtw-fullwidth {\r\n position: relative;\r\n width: 100vw;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n }\r\n\r\n \/* ====== SECTION ====== *\/\r\n .wtw-section {\r\n width: 100%;\r\n background: #fff;\r\n padding: 65px 100px 80px;\r\n font-family: 'Lato', sans-serif;\r\n }\r\n\r\n \/* ====== HEADER ====== *\/\r\n .wtw-header {\r\n text-align: center;\r\n position: relative;\r\n height: 90px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 52px;\r\n }\r\n\r\n .wtw-watermark {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 90px;\r\n font-weight: 800;\r\n color: #f0ede8;\r\n letter-spacing: 8px;\r\n text-transform: uppercase;\r\n line-height: 1;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n white-space: nowrap;\r\n z-index: 0;\r\n pointer-events: none;\r\n user-select: none;\r\n }\r\n\r\n .wtw-title-row {\r\n position: relative;\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 18px;\r\n }\r\n\r\n .wtw-title-row .line {\r\n flex: 0 0 70px;\r\n height: 1.5px;\r\n background: #2c2c2a;\r\n }\r\n\r\n .wtw-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 18px;\r\n font-weight: 700;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: #2c2c2a;\r\n }\r\n\r\n .wtw-title span { color: #b89a5a; }\r\n\r\n \/* ====== GRID ====== *\/\r\n .wtw-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 38px;\r\n }\r\n\r\n \/* ====== CARD ====== *\/\r\n .card-img {\r\n width: 100%;\r\n aspect-ratio: 4 \/ 2.9;\r\n overflow: hidden;\r\n margin-bottom: 22px;\r\n }\r\n\r\n .card-img img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.45s ease;\r\n }\r\n\r\n .card-img:hover img { transform: scale(1.05); }\r\n\r\n .card-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 13.5px;\r\n font-weight: 800;\r\n color: #2c2c2a;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .card-text {\r\n font-size: 13.5px;\r\n color: #888;\r\n line-height: 1.78;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .card-link {\r\n display: inline-block;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 12px;\r\n font-weight: 700;\r\n color: #2c2c2a;\r\n text-decoration: none;\r\n letter-spacing: 0.5px;\r\n border-bottom: 1.5px solid transparent;\r\n transition: color 0.2s ease, border-color 0.2s ease;\r\n }\r\n\r\n .card-link:hover {\r\n color: #b89a5a;\r\n border-color: #b89a5a;\r\n }\r\n\r\n \/* ====== RESPONSIVE ====== *\/\r\n @media (max-width: 1024px) {\r\n .wtw-section { padding: 50px 48px 60px; }\r\n .wtw-watermark { font-size: 66px; }\r\n }\r\n\r\n @media (max-width: 820px) {\r\n .wtw-grid { grid-template-columns: 1fr 1fr; gap: 24px; }\r\n .wtw-section { padding: 40px 32px 50px; }\r\n .wtw-watermark { font-size: 50px; }\r\n }\r\n\r\n @media (max-width: 540px) {\r\n .wtw-grid { grid-template-columns: 1fr; gap: 28px; }\r\n .wtw-section { padding: 32px 16px 40px; }\r\n .wtw-watermark { display: none; }\r\n .wtw-title { font-size: 13px; letter-spacing: 1.5px; }\r\n .wtw-title-row .line { flex: 0 0 28px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"wtw-fullwidth\">\r\n <div class=\"wtw-section\">\r\n\r\n <!-- HEADER -->\r\n <div class=\"wtw-header\">\r\n <div class=\"wtw-watermark\">FLOORS<\/div>\r\n <div class=\"wtw-title-row\">\r\n <div class=\"line\"><\/div>\r\n <h2 class=\"wtw-title\">COVERING <span>WALL TO WALL<\/span><\/h2>\r\n <div class=\"line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- GRID -->\r\n <div class=\"wtw-grid\">\r\n\r\n <!-- Card 1 -->\r\n <div class=\"wtw-card\">\r\n <div class=\"card-img\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1562663474-6cbb3eaa4d14?w=900&q=85&auto=format&fit=crop\"\r\n alt=\"Wooden floor interior\"\r\n \/>\r\n <\/div>\r\n <div class=\"card-title\">Best Floors Are Wooden<\/div>\r\n <p class=\"card-text\">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<\/p>\r\n <a href=\"#\" class=\"card-link\">Read More<\/a>\r\n <\/div>\r\n\r\n <!-- Card 2 -->\r\n <div class=\"wtw-card\">\r\n <div class=\"card-img\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1600585154526-990dced4db0d?w=900&q=85&auto=format&fit=crop\"\r\n alt=\"Stylish ceramic tiles room\"\r\n \/>\r\n <\/div>\r\n <div class=\"card-title\">Stylish Ceramic Tiles<\/div>\r\n <p class=\"card-text\">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<\/p>\r\n <a href=\"#\" class=\"card-link\">Read More<\/a>\r\n <\/div>\r\n\r\n <!-- Card 3 -->\r\n <div class=\"wtw-card\">\r\n <div class=\"card-img\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1567016432779-094069958ea5?w=900&q=85&auto=format&fit=crop\"\r\n alt=\"Wall to wall carpeting living room\"\r\n \/>\r\n <\/div>\r\n <div class=\"card-title\">Wall to Wall Carpeting<\/div>\r\n <p class=\"card-text\">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<\/p>\r\n <a href=\"#\" class=\"card-link\">Read More<\/a>\r\n <\/div>\r\n\r\n <\/div><!-- \/wtw-grid -->\r\n <\/div><!-- \/wtw-section -->\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bb64491 e-con e-atomic-element e-flexbox-base e-7c9b8c6 \" data-id=\"bb64491\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"bb64491\" data-e-type=\"e-flexbox\" data-id=\"bb64491\">\n \t\t<div class=\"elementor-element elementor-element-1377b03 elementor-widget elementor-widget-html\" data-id=\"1377b03\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Stats Section<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow+Condensed:wght@700;800&family=Barlow:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n \/* ===== FULL WIDTH BREAKOUT \u2014 works in Elementor, WPBakery, Divi, Gutenberg ===== *\/\r\n .stats-section {\r\n position: relative;\r\n width: 100vw !important;\r\n max-width: 100vw !important;\r\n left: 50% !important;\r\n right: 50% !important;\r\n margin-left: -50vw !important;\r\n margin-right: -50vw !important;\r\n \/* ============================================================ *\/\r\n min-height: 320px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n background: #111;\r\n font-family: 'Barlow', sans-serif;\r\n }\r\n\r\n .stats-bg {\r\n position: absolute;\r\n inset: 0;\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1618219908412-a29a1bb7b86e?w=1600&q=80&auto=format&fit=crop');\r\n background-size: cover;\r\n background-position: center;\r\n filter: brightness(0.35);\r\n transform: scale(1.05);\r\n transition: transform 8s ease;\r\n }\r\n\r\n .stats-section:hover .stats-bg {\r\n transform: scale(1);\r\n }\r\n\r\n .stats-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n to right,\r\n rgba(0,0,0,0.6) 0%,\r\n rgba(0,0,0,0.1) 50%,\r\n rgba(0,0,0,0.6) 100%\r\n );\r\n }\r\n\r\n .stats-container {\r\n position: relative;\r\n z-index: 2;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0;\r\n width: 100%;\r\n max-width: 1200px;\r\n padding: 60px 20px;\r\n }\r\n\r\n .stat-item {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n padding: 20px 30px;\r\n position: relative;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.6s ease, transform 0.6s ease;\r\n }\r\n\r\n .stat-item.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .stat-item:nth-child(1) { transition-delay: 0.1s; }\r\n .stat-item:nth-child(2) { transition-delay: 0.25s; }\r\n .stat-item:nth-child(3) { transition-delay: 0.4s; }\r\n .stat-item:nth-child(4) { transition-delay: 0.55s; }\r\n\r\n .stat-item:not(:last-child)::after {\r\n content: '';\r\n position: absolute;\r\n right: 0;\r\n top: 20%;\r\n height: 60%;\r\n width: 1px;\r\n background: rgba(255,255,255,0.12);\r\n }\r\n\r\n .stat-icon {\r\n width: 64px;\r\n height: 64px;\r\n margin-bottom: 16px;\r\n opacity: 0.9;\r\n transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), opacity 0.35s ease;\r\n filter: drop-shadow(0 0 8px rgba(255,255,255,0.15));\r\n }\r\n\r\n .stat-item:hover .stat-icon {\r\n transform: scale(1.15) translateY(-4px);\r\n opacity: 1;\r\n filter: drop-shadow(0 0 14px rgba(255,255,255,0.35));\r\n }\r\n\r\n .stat-accent {\r\n width: 28px;\r\n height: 2px;\r\n background: #c8a96e;\r\n margin: 0 auto 18px;\r\n transform: scaleX(0);\r\n transition: transform 0.4s ease 0.3s;\r\n }\r\n\r\n .stat-item.visible .stat-accent {\r\n transform: scaleX(1);\r\n }\r\n\r\n .stat-number {\r\n font-family: 'Barlow Condensed', sans-serif;\r\n font-size: clamp(36px, 5vw, 52px);\r\n font-weight: 800;\r\n color: #ffffff;\r\n line-height: 1;\r\n margin-bottom: 10px;\r\n letter-spacing: -0.5px;\r\n text-shadow: 0 2px 20px rgba(0,0,0,0.4);\r\n }\r\n\r\n .stat-number .suffix { color: #c8a96e; }\r\n\r\n .stat-label {\r\n font-size: 11px;\r\n font-weight: 500;\r\n letter-spacing: 2.5px;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.55);\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .stat-item:hover .stat-label { color: rgba(255,255,255,0.85); }\r\n\r\n .stat-icon-wrap {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .stat-icon-wrap::before {\r\n content: '';\r\n position: absolute;\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 50%;\r\n background: rgba(200, 169, 110, 0);\r\n transition: background 0.35s ease;\r\n }\r\n\r\n .stat-item:hover .stat-icon-wrap::before {\r\n background: rgba(200, 169, 110, 0.08);\r\n }\r\n\r\n @media (max-width: 700px) {\r\n .stats-container { flex-wrap: wrap; }\r\n .stat-item { flex: 0 0 50%; }\r\n .stat-item:nth-child(2)::after,\r\n .stat-item:nth-child(4)::after { display: none; }\r\n .stat-item:nth-child(1),\r\n .stat-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.08); }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"stats-section\">\r\n <div class=\"stats-bg\"><\/div>\r\n <div class=\"stats-overlay\"><\/div>\r\n\r\n <div class=\"stats-container\">\r\n\r\n <div class=\"stat-item\">\r\n <div class=\"stat-icon-wrap\">\r\n <svg class=\"stat-icon\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" rx=\"5\" stroke=\"white\" stroke-width=\"2.5\" fill=\"none\"\/>\r\n <rect x=\"36\" y=\"4\" width=\"24\" height=\"24\" rx=\"5\" stroke=\"white\" stroke-width=\"2.5\" fill=\"none\"\/>\r\n <rect x=\"4\" y=\"36\" width=\"24\" height=\"24\" rx=\"5\" stroke=\"white\" stroke-width=\"2.5\" fill=\"none\"\/>\r\n <rect x=\"36\" y=\"36\" width=\"24\" height=\"24\" rx=\"5\" stroke=\"white\" stroke-width=\"2.5\" fill=\"none\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"stat-accent\"><\/div>\r\n <div class=\"stat-number\"><span class=\"counter\" data-target=\"500\">0<\/span><span class=\"suffix\">+<\/span><\/div>\r\n <div class=\"stat-label\">Apartments<\/div>\r\n <\/div>\r\n\r\n <div class=\"stat-item\">\r\n <div class=\"stat-icon-wrap\">\r\n <svg class=\"stat-icon\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <rect x=\"8\" y=\"24\" width=\"48\" height=\"32\" rx=\"2\" stroke=\"white\" stroke-width=\"2.5\" fill=\"none\"\/>\r\n <path d=\"M8 24L32 8L56 24\" stroke=\"white\" stroke-width=\"2.5\" stroke-linejoin=\"round\"\/>\r\n <line x1=\"20\" y1=\"56\" x2=\"20\" y2=\"36\" stroke=\"white\" stroke-width=\"2\"\/>\r\n <line x1=\"32\" y1=\"56\" x2=\"32\" y2=\"36\" stroke=\"white\" stroke-width=\"2\"\/>\r\n <line x1=\"44\" y1=\"56\" x2=\"44\" y2=\"36\" stroke=\"white\" stroke-width=\"2\"\/>\r\n <line x1=\"14\" y1=\"36\" x2=\"50\" y2=\"36\" stroke=\"white\" stroke-width=\"1.5\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"stat-accent\"><\/div>\r\n <div class=\"stat-number\"><span class=\"counter\" data-target=\"350\">0<\/span><span class=\"suffix\">+<\/span><\/div>\r\n <div class=\"stat-label\">Commercial Projects<\/div>\r\n <\/div>\r\n\r\n <div class=\"stat-item\">\r\n <div class=\"stat-icon-wrap\">\r\n <svg class=\"stat-icon\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M32 10L54 22V42L32 54L10 42V22L32 10Z\" stroke=\"white\" stroke-width=\"2.5\" stroke-linejoin=\"round\" fill=\"none\"\/>\r\n <path d=\"M10 22L32 34L54 22\" stroke=\"white\" stroke-width=\"2\" opacity=\"0.6\"\/>\r\n <line x1=\"32\" y1=\"34\" x2=\"32\" y2=\"54\" stroke=\"white\" stroke-width=\"2\" opacity=\"0.6\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"stat-accent\"><\/div>\r\n <div class=\"stat-number\"><span class=\"counter\" data-target=\"25\">0<\/span><span class=\"suffix\">+<\/span><\/div>\r\n <div class=\"stat-label\">Sports Complex<\/div>\r\n <\/div>\r\n\r\n <div class=\"stat-item\">\r\n <div class=\"stat-icon-wrap\">\r\n <svg class=\"stat-icon\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <ellipse cx=\"32\" cy=\"52\" rx=\"18\" ry=\"6\" stroke=\"white\" stroke-width=\"2.5\" fill=\"none\"\/>\r\n <line x1=\"14\" y1=\"52\" x2=\"14\" y2=\"45\" stroke=\"white\" stroke-width=\"2.5\"\/>\r\n <line x1=\"50\" y1=\"52\" x2=\"50\" y2=\"45\" stroke=\"white\" stroke-width=\"2.5\"\/>\r\n <ellipse cx=\"32\" cy=\"45\" rx=\"18\" ry=\"6\" stroke=\"white\" stroke-width=\"2.5\" fill=\"none\"\/>\r\n <line x1=\"14\" y1=\"45\" x2=\"14\" y2=\"38\" stroke=\"white\" stroke-width=\"2.5\"\/>\r\n <line x1=\"50\" y1=\"45\" x2=\"50\" y2=\"38\" stroke=\"white\" stroke-width=\"2.5\"\/>\r\n <ellipse cx=\"32\" cy=\"38\" rx=\"18\" ry=\"6\" stroke=\"white\" stroke-width=\"2.5\" fill=\"none\"\/>\r\n <line x1=\"14\" y1=\"38\" x2=\"14\" y2=\"32\" stroke=\"white\" stroke-width=\"2.5\"\/>\r\n <line x1=\"50\" y1=\"38\" x2=\"50\" y2=\"32\" stroke=\"white\" stroke-width=\"2.5\"\/>\r\n <ellipse cx=\"32\" cy=\"32\" rx=\"18\" ry=\"6\" stroke=\"white\" stroke-width=\"2.5\" fill=\"none\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"stat-accent\"><\/div>\r\n <div class=\"stat-number\"><span class=\"counter\" data-target=\"200\">0<\/span><span class=\"suffix\">+<\/span><\/div>\r\n <div class=\"stat-label\">Resorts & Enclosures<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n const section = document.querySelector('.stats-section');\r\n const items = document.querySelectorAll('.stat-item');\r\n const counters = document.querySelectorAll('.counter');\r\n let counted = false;\r\n\r\n function animateCounter(el) {\r\n const target = +el.dataset.target;\r\n const duration = 1800;\r\n const start = performance.now();\r\n function update(now) {\r\n const elapsed = now - start;\r\n const progress = Math.min(elapsed \/ duration, 1);\r\n const ease = 1 - Math.pow(1 - progress, 3);\r\n el.textContent = Math.floor(ease * target);\r\n if (progress < 1) requestAnimationFrame(update);\r\n else el.textContent = target;\r\n }\r\n requestAnimationFrame(update);\r\n }\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n items.forEach(item => item.classList.add('visible'));\r\n if (!counted) {\r\n counted = true;\r\n setTimeout(() => counters.forEach(animateCounter), 400);\r\n }\r\n }\r\n });\r\n }, { threshold: 0.2 });\r\n\r\n observer.observe(section);\r\n\r\n if (section.getBoundingClientRect().top < window.innerHeight) {\r\n items.forEach(item => item.classList.add('visible'));\r\n if (!counted) {\r\n counted = true;\r\n setTimeout(() => counters.forEach(animateCounter), 400);\r\n }\r\n }\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-dd5237f e-con e-atomic-element e-flexbox-base e-2a1adca \" data-id=\"dd5237f\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"dd5237f\" data-e-type=\"e-flexbox\" data-id=\"dd5237f\">\n \t\t<div class=\"elementor-element elementor-element-7912bda elementor-widget elementor-widget-html\" data-id=\"7912bda\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Contemporary and Stylish \u2014 Flooring Section<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800&family=Lato:wght@300;400;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --gold: #b89a5a;\r\n --dark: #1a1a1a;\r\n --mid: #555;\r\n --light: #f8f8f6;\r\n --text: #444;\r\n }\r\n\r\n body {\r\n background: #fff;\r\n color: var(--text);\r\n font-family: 'Lato', sans-serif;\r\n }\r\n\r\n \/* ====== FULL WIDTH BREAKOUT ====== *\/\r\n .flooring-section {\r\n position: relative;\r\n width: 100vw !important;\r\n max-width: 100vw !important;\r\n left: 50% !important;\r\n right: 50% !important;\r\n margin-left: -50vw !important;\r\n margin-right: -50vw !important;\r\n background: #fff;\r\n padding: 70px 0 80px;\r\n overflow: hidden;\r\n }\r\n\r\n \/* ====== SECTION HEADER ====== *\/\r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 60px;\r\n position: relative;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: opacity 0.7s ease, transform 0.7s ease;\r\n }\r\n\r\n .section-header.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n \/* Watermark text behind heading *\/\r\n .header-watermark {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -55%);\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: clamp(60px, 10vw, 110px);\r\n font-weight: 800;\r\n letter-spacing: 12px;\r\n color: rgba(0,0,0,0.04);\r\n text-transform: uppercase;\r\n white-space: nowrap;\r\n pointer-events: none;\r\n user-select: none;\r\n z-index: 0;\r\n }\r\n\r\n .header-title {\r\n position: relative;\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 18px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n \/* Decorative horizontal lines *\/\r\n .header-title::before,\r\n .header-title::after {\r\n content: '';\r\n display: block;\r\n width: clamp(30px, 5vw, 70px);\r\n height: 1.5px;\r\n background: var(--dark);\r\n flex-shrink: 0;\r\n }\r\n\r\n .header-title span {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: clamp(18px, 2.5vw, 26px);\r\n font-weight: 600;\r\n letter-spacing: 4px;\r\n text-transform: uppercase;\r\n color: var(--dark);\r\n }\r\n\r\n .header-title strong {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: clamp(18px, 2.5vw, 26px);\r\n font-weight: 800;\r\n letter-spacing: 4px;\r\n text-transform: uppercase;\r\n color: var(--gold);\r\n font-style: italic;\r\n }\r\n\r\n \/* ====== INNER WRAPPER ====== *\/\r\n .flooring-inner {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n padding: 0 30px;\r\n }\r\n\r\n \/* ====== ROW ====== *\/\r\n .flooring-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 60px;\r\n margin-bottom: 70px;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.7s ease, transform 0.7s ease;\r\n }\r\n\r\n .flooring-row.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .flooring-row:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n \/* Row 2 reverses the order *\/\r\n .flooring-row.reverse {\r\n flex-direction: row-reverse;\r\n text-align: right;\r\n }\r\n\r\n \/* ====== IMAGE ====== *\/\r\n .flooring-img-wrap {\r\n flex: 0 0 48%;\r\n max-width: 48%;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n .flooring-img-wrap img {\r\n width: 100%;\r\n height: 280px;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.6s ease;\r\n }\r\n\r\n .flooring-img-wrap:hover img {\r\n transform: scale(1.04);\r\n }\r\n\r\n \/* ====== CONTENT ====== *\/\r\n .flooring-content {\r\n flex: 1;\r\n }\r\n\r\n .flooring-row.reverse .flooring-content {\r\n text-align: right;\r\n }\r\n\r\n .content-subtitle {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: clamp(13px, 1.5vw, 15px);\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: var(--dark);\r\n margin-bottom: 8px;\r\n }\r\n\r\n \/* Gold tag badge *\/\r\n .content-tag {\r\n display: inline-block;\r\n background: var(--gold);\r\n color: #fff;\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 padding: 4px 10px;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .content-body {\r\n font-size: 14px;\r\n line-height: 1.8;\r\n color: #666;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .content-link {\r\n display: inline-block;\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: var(--dark);\r\n text-decoration: none;\r\n position: relative;\r\n padding-bottom: 2px;\r\n }\r\n\r\n .content-link::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 0;\r\n height: 1.5px;\r\n background: var(--gold);\r\n transition: width 0.3s ease;\r\n }\r\n\r\n .flooring-row.reverse .content-link::after {\r\n left: auto;\r\n right: 0;\r\n }\r\n\r\n .content-link:hover::after {\r\n width: 100%;\r\n }\r\n\r\n .content-link:hover {\r\n color: var(--gold);\r\n }\r\n\r\n \/* ====== RESPONSIVE ====== *\/\r\n @media (max-width: 768px) {\r\n .flooring-row,\r\n .flooring-row.reverse {\r\n flex-direction: column !important;\r\n text-align: left !important;\r\n gap: 30px;\r\n }\r\n\r\n .flooring-img-wrap {\r\n flex: 0 0 100%;\r\n max-width: 100%;\r\n }\r\n\r\n .flooring-img-wrap img {\r\n height: 220px;\r\n }\r\n\r\n .flooring-row.reverse .flooring-content {\r\n text-align: left;\r\n }\r\n\r\n .flooring-row.reverse .content-link::after {\r\n left: 0;\r\n right: auto;\r\n }\r\n\r\n .flooring-inner {\r\n padding: 0 20px;\r\n }\r\n\r\n .flooring-section {\r\n padding: 50px 0 60px;\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"flooring-section\">\r\n <div class=\"flooring-inner\">\r\n\r\n <!-- HEADER -->\r\n <div class=\"section-header\">\r\n <div class=\"header-watermark\">FLOORS<\/div>\r\n <div class=\"header-title\">\r\n <span>Contemporary and<\/span>\r\n <strong>Stylish<\/strong>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ROW 1: Image Left, Text Right -->\r\n <div class=\"flooring-row\">\r\n <div class=\"flooring-img-wrap\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1581858726788-75bc0f6a952d?w=800&q=80&auto=format&fit=crop\"\r\n alt=\"Timeless Classic Flooring Installation\"\r\n \/>\r\n <\/div>\r\n <div class=\"flooring-content\">\r\n <div class=\"content-subtitle\">Timeless Classic Finish<\/div>\r\n <div class=\"content-tag\">You Would Love to Walk On<\/div>\r\n <p class=\"content-body\">\r\n Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.\r\n <\/p>\r\n <a href=\"#\" class=\"content-link\">View Source<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ROW 2: Text Left, Image Right -->\r\n <div class=\"flooring-row reverse\">\r\n <div class=\"flooring-img-wrap\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1607472586893-edb57bdc0e39?w=800&q=80&auto=format&fit=crop\"\r\n alt=\"Sturdy and Utilitarian Tile Work\"\r\n \/>\r\n <\/div>\r\n <div class=\"flooring-content\">\r\n <div class=\"content-subtitle\">Sturdy & Utilitarian<\/div>\r\n <div class=\"content-tag\">Exemplary Workmanship<\/div>\r\n <p class=\"content-body\">\r\n Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.\r\n <\/p>\r\n <a href=\"#\" class=\"content-link\">View Source<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n \/\/ Animate on scroll\r\n const animEls = document.querySelectorAll('.section-header, .flooring-row');\r\n let triggered = new Set();\r\n\r\n const obs = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting && !triggered.has(entry.target)) {\r\n triggered.add(entry.target);\r\n entry.target.classList.add('visible');\r\n }\r\n });\r\n }, { threshold: 0.15 });\r\n\r\n animEls.forEach((el, i) => {\r\n el.style.transitionDelay = (i * 0.15) + 's';\r\n obs.observe(el);\r\n });\r\n\r\n \/\/ Trigger immediately if in view on load\r\n animEls.forEach(el => {\r\n if (el.getBoundingClientRect().top < window.innerHeight) {\r\n el.classList.add('visible');\r\n triggered.add(el);\r\n }\r\n });\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-5c8b940 e-con e-atomic-element e-flexbox-base e-c87f7bd \" data-id=\"5c8b940\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"5c8b940\" data-e-type=\"e-flexbox\" data-id=\"5c8b940\">\n \t\t<div class=\"elementor-element elementor-element-3154082 elementor-widget elementor-widget-html\" data-id=\"3154082\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Testimonials<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@600;700&family=Lato:wght@300;400&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n \/* ====== FULL WIDTH BREAKOUT ====== *\/\r\n .testi-section {\r\n position: relative;\r\n width: 100vw !important;\r\n max-width: 100vw !important;\r\n left: 50% !important;\r\n right: 50% !important;\r\n margin-left: -50vw !important;\r\n margin-right: -50vw !important;\r\n overflow: hidden;\r\n font-family: 'Lato', sans-serif;\r\n min-height: 380px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n \/* Dark background image *\/\r\n .testi-bg {\r\n position: absolute;\r\n inset: 0;\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?w=1800&q=80&auto=format&fit=crop');\r\n background-size: cover;\r\n background-position: center;\r\n filter: brightness(0.32);\r\n z-index: 0;\r\n }\r\n\r\n \/* ====== SLIDER WRAPPER ====== *\/\r\n .testi-wrapper {\r\n position: relative;\r\n z-index: 2;\r\n width: 100%;\r\n max-width: 1100px;\r\n padding: 60px 40px 50px;\r\n }\r\n\r\n \/* ====== SLIDES TRACK ====== *\/\r\n .testi-track {\r\n overflow: hidden;\r\n }\r\n\r\n .testi-slide {\r\n display: none;\r\n gap: 28px;\r\n }\r\n\r\n .testi-slide.active {\r\n display: flex;\r\n }\r\n\r\n \/* ====== SINGLE CARD ====== *\/\r\n .testi-card {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n opacity: 0;\r\n transform: translateY(16px);\r\n transition: opacity 0.5s ease, transform 0.5s ease;\r\n }\r\n\r\n .testi-slide.active .testi-card { opacity: 1; transform: translateY(0); }\r\n .testi-slide.active .testi-card:nth-child(2) { transition-delay: 0.12s; }\r\n\r\n \/* Speech bubble box *\/\r\n .testi-bubble {\r\n background: #fff;\r\n padding: 26px 28px;\r\n font-size: 13.5px;\r\n line-height: 1.75;\r\n color: #333;\r\n font-family: 'Lato', sans-serif;\r\n position: relative;\r\n margin-bottom: 0;\r\n }\r\n\r\n \/* Triangle pointer below bubble *\/\r\n .testi-bubble::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -14px;\r\n left: 48px;\r\n width: 0;\r\n height: 0;\r\n border-left: 14px solid transparent;\r\n border-right: 14px solid transparent;\r\n border-top: 14px solid #fff;\r\n }\r\n\r\n \/* ====== AUTHOR ROW ====== *\/\r\n .testi-author {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n margin-top: 28px;\r\n padding-left: 4px;\r\n }\r\n\r\n .testi-avatar {\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n border: 3px solid rgba(255,255,255,0.25);\r\n flex-shrink: 0;\r\n }\r\n\r\n .testi-name {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 13.5px;\r\n font-weight: 700;\r\n color: #fff;\r\n margin-bottom: 3px;\r\n }\r\n\r\n .testi-role {\r\n font-size: 12px;\r\n color: rgba(255,255,255,0.6);\r\n font-weight: 300;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n \/* ====== ARROW CONTROLS ====== *\/\r\n .testi-controls {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 24px;\r\n margin-top: 36px;\r\n }\r\n\r\n .testi-btn {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 6px 10px;\r\n display: flex;\r\n align-items: center;\r\n opacity: 0.7;\r\n transition: opacity 0.25s ease;\r\n }\r\n\r\n .testi-btn:hover { opacity: 1; }\r\n\r\n .testi-btn svg {\r\n width: 28px;\r\n height: 14px;\r\n stroke: #fff;\r\n fill: none;\r\n stroke-width: 1.8;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n \/* ====== RESPONSIVE ====== *\/\r\n @media (max-width: 680px) {\r\n .testi-slide.active {\r\n flex-direction: column;\r\n }\r\n .testi-bubble::after {\r\n left: 36px;\r\n }\r\n .testi-wrapper {\r\n padding: 50px 20px 40px;\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"testi-section\" id=\"testiSection\">\r\n <div class=\"testi-bg\"><\/div>\r\n\r\n <div class=\"testi-wrapper\">\r\n <div class=\"testi-track\" id=\"testiTrack\">\r\n\r\n <!-- Slide 1 -->\r\n <div class=\"testi-slide active\">\r\n <div class=\"testi-card\">\r\n <div class=\"testi-bubble\">\r\n \"Curabitur consequat felis ipsum, ac ultrices mauris varius vel. Proin vel felis ultrices, maximus dolor sit amet, vehicula neque. Vivamus sed arcu sit amet eros suscipit rutrum hendrerit in diam.\"\r\n <\/div>\r\n <div class=\"testi-author\">\r\n <img decoding=\"async\" class=\"testi-avatar\" src=\"https:\/\/images.unsplash.com\/photo-1500648767791-00dcc994a43e?w=200&q=80&auto=format&fit=crop&face\" alt=\"Frank Lawson\" \/>\r\n <div>\r\n <div class=\"testi-name\">Frank Lawson<\/div>\r\n <div class=\"testi-role\">Designer<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-bubble\">\r\n \"Curabitur consequat felis ipsum, ac ultrices mauris varius vel. Proin vel felis ultrices, maximus dolor sit amet, vehicula neque. Vivamus sed arcu sit amet eros suscipit rutrum hendrerit in diam.\"\r\n <\/div>\r\n <div class=\"testi-author\">\r\n <img decoding=\"async\" class=\"testi-avatar\" src=\"https:\/\/images.unsplash.com\/photo-1507003211169-0a1dd7228f2d?w=200&q=80&auto=format&fit=crop&face\" alt=\"Mack Berry\" \/>\r\n <div>\r\n <div class=\"testi-name\">Mack Berry<\/div>\r\n <div class=\"testi-role\">Developer<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Slide 2 -->\r\n <div class=\"testi-slide\">\r\n <div class=\"testi-card\">\r\n <div class=\"testi-bubble\">\r\n \"Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.\"\r\n <\/div>\r\n <div class=\"testi-author\">\r\n <img decoding=\"async\" class=\"testi-avatar\" src=\"https:\/\/images.unsplash.com\/photo-1492562080023-ab3db95bfbce?w=200&q=80&auto=format&fit=crop&face\" alt=\"James Carter\" \/>\r\n <div>\r\n <div class=\"testi-name\">James Carter<\/div>\r\n <div class=\"testi-role\">Architect<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-bubble\">\r\n \"Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.\"\r\n <\/div>\r\n <div class=\"testi-author\">\r\n <img decoding=\"async\" class=\"testi-avatar\" src=\"https:\/\/images.unsplash.com\/photo-1519085360753-af0119f7cbe7?w=200&q=80&auto=format&fit=crop&face\" alt=\"Sarah Miles\" \/>\r\n <div>\r\n <div class=\"testi-name\">Sarah Miles<\/div>\r\n <div class=\"testi-role\">Interior Designer<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Slide 3 -->\r\n <div class=\"testi-slide\">\r\n <div class=\"testi-card\">\r\n <div class=\"testi-bubble\">\r\n \"Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.\"\r\n <\/div>\r\n <div class=\"testi-author\">\r\n <img decoding=\"async\" class=\"testi-avatar\" src=\"https:\/\/images.unsplash.com\/photo-1472099645785-5658abf4ff4e?w=200&q=80&auto=format&fit=crop&face\" alt=\"Tom Reid\" \/>\r\n <div>\r\n <div class=\"testi-name\">Tom Reid<\/div>\r\n <div class=\"testi-role\">Project Manager<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testi-card\">\r\n <div class=\"testi-bubble\">\r\n \"Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu.\"\r\n <\/div>\r\n <div class=\"testi-author\">\r\n <img decoding=\"async\" class=\"testi-avatar\" src=\"https:\/\/images.unsplash.com\/photo-1438761681033-6461ffad8d80?w=200&q=80&auto=format&fit=crop&face\" alt=\"Lisa Park\" \/>\r\n <div>\r\n <div class=\"testi-name\">Lisa Park<\/div>\r\n <div class=\"testi-role\">Landscaper<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div><!-- \/track -->\r\n\r\n <!-- Arrow controls -->\r\n <div class=\"testi-controls\">\r\n <button class=\"testi-btn\" id=\"testiPrev\" aria-label=\"Previous\">\r\n <svg viewBox=\"0 0 28 14\"><line x1=\"27\" y1=\"7\" x2=\"1\" y2=\"7\"\/><polyline points=\"8,1 1,7 8,13\"\/><\/svg>\r\n <\/button>\r\n <button class=\"testi-btn\" id=\"testiNext\" aria-label=\"Next\">\r\n <svg viewBox=\"0 0 28 14\"><line x1=\"1\" y1=\"7\" x2=\"27\" y2=\"7\"\/><polyline points=\"20,1 27,7 20,13\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n var slides = document.querySelectorAll('.testi-slide');\r\n var current = 0;\r\n\r\n function goTo(index) {\r\n slides[current].classList.remove('active');\r\n current = (index + slides.length) % slides.length;\r\n slides[current].classList.add('active');\r\n \/\/ Re-trigger card animation\r\n var cards = slides[current].querySelectorAll('.testi-card');\r\n cards.forEach(function(c) {\r\n c.style.opacity = '0';\r\n c.style.transform = 'translateY(16px)';\r\n });\r\n requestAnimationFrame(function() {\r\n requestAnimationFrame(function() {\r\n cards.forEach(function(c) {\r\n c.style.opacity = '';\r\n c.style.transform = '';\r\n });\r\n });\r\n });\r\n }\r\n\r\n document.getElementById('testiPrev').addEventListener('click', function() { goTo(current - 1); });\r\n document.getElementById('testiNext').addEventListener('click', function() { goTo(current + 1); });\r\n\r\n \/\/ Auto-advance every 6s\r\n var autoTimer = setInterval(function() { goTo(current + 1); }, 6000);\r\n document.querySelector('.testi-section').addEventListener('mouseenter', function() { clearInterval(autoTimer); });\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-7162966 e-con e-atomic-element e-flexbox-base e-da8e463 \" data-id=\"7162966\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"7162966\" data-e-type=\"e-flexbox\" data-id=\"7162966\">\n \t\t<div class=\"elementor-element elementor-element-855c1ec elementor-widget elementor-widget-html\" data-id=\"855c1ec\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Portfolio Gallery<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@500;600;700&family=Lato:wght@300;400&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n .gallery-section {\r\n position: relative;\r\n width: 100%;\r\n background: #fff;\r\n padding: 50px 0 70px;\r\n font-family: 'Lato', sans-serif;\r\n }\r\n\r\n .gallery-filters {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n margin-bottom: 40px;\r\n padding: 0 20px;\r\n }\r\n\r\n .filter-btn {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 11px;\r\n font-weight: 600;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n padding: 10px 22px;\r\n border: 1.5px solid #ccc;\r\n background: transparent;\r\n color: #555;\r\n cursor: pointer;\r\n transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;\r\n outline: none;\r\n }\r\n\r\n .filter-btn:hover { border-color: #b89a5a; color: #b89a5a; }\r\n .filter-btn.active { background: #b89a5a; border-color: #b89a5a; color: #fff; }\r\n\r\n \/* ====== GRID \u2014 full bleed, taller images ====== *\/\r\n .gallery-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 6px;\r\n width: 100%;\r\n padding: 0;\r\n }\r\n\r\n \/* ====== GRID ITEM \u2014 taller aspect ratio ====== *\/\r\n .gallery-item {\r\n position: relative;\r\n overflow: hidden;\r\n aspect-ratio: 3 \/ 2.2;\r\n cursor: pointer;\r\n transition: opacity 0.4s ease, transform 0.4s ease;\r\n }\r\n\r\n .gallery-item.hidden { display: none; }\r\n\r\n .gallery-item img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n .gallery-item:hover img { transform: scale(1.06); }\r\n\r\n .gallery-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(184, 154, 90, 0.0);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: background 0.35s ease;\r\n }\r\n\r\n .gallery-item:hover .gallery-overlay { background: rgba(184, 154, 90, 0.45); }\r\n\r\n .gallery-overlay-icon {\r\n width: 52px;\r\n height: 52px;\r\n border: 2px solid #fff;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n transform: scale(0.7);\r\n transition: opacity 0.3s ease, transform 0.3s ease;\r\n }\r\n\r\n .gallery-item:hover .gallery-overlay-icon { opacity: 1; transform: scale(1); }\r\n\r\n .gallery-overlay-icon svg {\r\n width: 22px; height: 22px;\r\n stroke: #fff; fill: none;\r\n stroke-width: 2; stroke-linecap: round;\r\n }\r\n\r\n \/* ====== LIGHTBOX ====== *\/\r\n .lightbox {\r\n display: none;\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(0,0,0,0.92);\r\n z-index: 9999;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .lightbox.open { display: flex; }\r\n\r\n .lightbox-img {\r\n max-width: 88vw;\r\n max-height: 85vh;\r\n object-fit: contain;\r\n border: 3px solid rgba(255,255,255,0.1);\r\n animation: lbIn 0.3s ease;\r\n }\r\n\r\n @keyframes lbIn {\r\n from { opacity: 0; transform: scale(0.92); }\r\n to { opacity: 1; transform: scale(1); }\r\n }\r\n\r\n .lightbox-close {\r\n position: absolute;\r\n top: 22px; right: 28px;\r\n font-size: 32px; color: #fff;\r\n cursor: pointer; line-height: 1;\r\n opacity: 0.75; transition: opacity 0.2s;\r\n background: none; border: none; font-family: sans-serif;\r\n }\r\n .lightbox-close:hover { opacity: 1; }\r\n\r\n .lightbox-prev, .lightbox-next {\r\n position: absolute; top: 50%; transform: translateY(-50%);\r\n background: none; border: none; cursor: pointer;\r\n padding: 16px; opacity: 0.6; transition: opacity 0.2s;\r\n }\r\n .lightbox-prev { left: 16px; }\r\n .lightbox-next { right: 16px; }\r\n .lightbox-prev:hover, .lightbox-next:hover { opacity: 1; }\r\n .lightbox-prev svg, .lightbox-next svg {\r\n width: 32px; height: 32px;\r\n stroke: #fff; fill: none;\r\n stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;\r\n }\r\n\r\n \/* ====== RESPONSIVE ====== *\/\r\n @media (max-width: 768px) {\r\n .gallery-grid { grid-template-columns: repeat(2, 1fr); }\r\n }\r\n @media (max-width: 480px) {\r\n .gallery-grid { grid-template-columns: 1fr; }\r\n .gallery-item { aspect-ratio: 4 \/ 3; }\r\n .filter-btn { font-size: 10px; padding: 8px 14px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"gallery-section\" id=\"gallerySection\">\r\n\r\n <!-- FILTER BUTTONS -->\r\n <div class=\"gallery-filters\">\r\n <button class=\"filter-btn active\" data-filter=\"all\">All<\/button>\r\n <button class=\"filter-btn\" data-filter=\"ceramic\">Ceramic<\/button>\r\n <button class=\"filter-btn\" data-filter=\"hardwood\">Hardwood<\/button>\r\n <button class=\"filter-btn\" data-filter=\"laminate\">Laminate<\/button>\r\n <button class=\"filter-btn\" data-filter=\"marble\">Marble<\/button>\r\n <button class=\"filter-btn\" data-filter=\"oak\">Oak Flooring<\/button>\r\n <\/div>\r\n\r\n <!-- GRID -->\r\n <div class=\"gallery-grid\" id=\"galleryGrid\">\r\n\r\n <!-- Row 1 -->\r\n <div class=\"gallery-item\" data-cat=\"hardwood\" data-src=\"https:\/\/images.unsplash.com\/photo-1581858726788-75bc0f6a952d?w=1200&q=90&auto=format&fit=crop\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1581858726788-75bc0f6a952d?w=900&q=85&auto=format&fit=crop\" alt=\"Hardwood dining room\" loading=\"lazy\" \/>\r\n <div class=\"gallery-overlay\"><div class=\"gallery-overlay-icon\"><svg viewBox=\"0 0 18 18\"><line x1=\"9\" y1=\"2\" x2=\"9\" y2=\"16\"\/><line x1=\"2\" y1=\"9\" x2=\"16\" y2=\"9\"\/><\/svg><\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"gallery-item\" data-cat=\"oak\" data-src=\"https:\/\/images.unsplash.com\/photo-1562663474-6cbb3eaa4d14?w=1200&q=90&auto=format&fit=crop\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1562663474-6cbb3eaa4d14?w=900&q=85&auto=format&fit=crop\" alt=\"Oak sports hall\" loading=\"lazy\" \/>\r\n <div class=\"gallery-overlay\"><div class=\"gallery-overlay-icon\"><svg viewBox=\"0 0 18 18\"><line x1=\"9\" y1=\"2\" x2=\"9\" y2=\"16\"\/><line x1=\"2\" y1=\"9\" x2=\"16\" y2=\"9\"\/><\/svg><\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"gallery-item\" data-cat=\"ceramic\" data-src=\"https:\/\/images.unsplash.com\/photo-1600585154526-990dced4db0d?w=1200&q=90&auto=format&fit=crop\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600585154526-990dced4db0d?w=900&q=85&auto=format&fit=crop\" alt=\"Ceramic tiles room\" loading=\"lazy\" \/>\r\n <div class=\"gallery-overlay\"><div class=\"gallery-overlay-icon\"><svg viewBox=\"0 0 18 18\"><line x1=\"9\" y1=\"2\" x2=\"9\" y2=\"16\"\/><line x1=\"2\" y1=\"9\" x2=\"16\" y2=\"9\"\/><\/svg><\/div><\/div>\r\n <\/div>\r\n\r\n <!-- Row 2 -->\r\n <div class=\"gallery-item\" data-cat=\"laminate\" data-src=\"https:\/\/images.unsplash.com\/photo-1586023492125-27b2c045efd7?w=1200&q=90&auto=format&fit=crop\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1586023492125-27b2c045efd7?w=900&q=85&auto=format&fit=crop\" alt=\"Laminate living room\" loading=\"lazy\" \/>\r\n <div class=\"gallery-overlay\"><div class=\"gallery-overlay-icon\"><svg viewBox=\"0 0 18 18\"><line x1=\"9\" y1=\"2\" x2=\"9\" y2=\"16\"\/><line x1=\"2\" y1=\"9\" x2=\"16\" y2=\"9\"\/><\/svg><\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"gallery-item\" data-cat=\"marble\" data-src=\"https:\/\/images.unsplash.com\/photo-1615873968403-89e068629265?w=1200&q=90&auto=format&fit=crop\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1615873968403-89e068629265?w=900&q=85&auto=format&fit=crop\" alt=\"Marble floor\" loading=\"lazy\" \/>\r\n <div class=\"gallery-overlay\"><div class=\"gallery-overlay-icon\"><svg viewBox=\"0 0 18 18\"><line x1=\"9\" y1=\"2\" x2=\"9\" y2=\"16\"\/><line x1=\"2\" y1=\"9\" x2=\"16\" y2=\"9\"\/><\/svg><\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"gallery-item\" data-cat=\"hardwood\" data-src=\"https:\/\/images.unsplash.com\/photo-1560448204-603b3fc33ddc?w=1200&q=90&auto=format&fit=crop\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1560448204-603b3fc33ddc?w=900&q=85&auto=format&fit=crop\" alt=\"Hardwood living room\" loading=\"lazy\" \/>\r\n <div class=\"gallery-overlay\"><div class=\"gallery-overlay-icon\"><svg viewBox=\"0 0 18 18\"><line x1=\"9\" y1=\"2\" x2=\"9\" y2=\"16\"\/><line x1=\"2\" y1=\"9\" x2=\"16\" y2=\"9\"\/><\/svg><\/div><\/div>\r\n <\/div>\r\n\r\n <!-- Row 3 -->\r\n <div class=\"gallery-item\" data-cat=\"laminate\" data-src=\"https:\/\/images.unsplash.com\/photo-1556912172-45b7abe8b7e1?w=1200&q=90&auto=format&fit=crop\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556912172-45b7abe8b7e1?w=900&q=85&auto=format&fit=crop\" alt=\"Laminate kitchen\" loading=\"lazy\" \/>\r\n <div class=\"gallery-overlay\"><div class=\"gallery-overlay-icon\"><svg viewBox=\"0 0 18 18\"><line x1=\"9\" y1=\"2\" x2=\"9\" y2=\"16\"\/><line x1=\"2\" y1=\"9\" x2=\"16\" y2=\"9\"\/><\/svg><\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"gallery-item\" data-cat=\"marble\" data-src=\"https:\/\/images.unsplash.com\/photo-1558618666-fcd25c85cd64?w=1200&q=90&auto=format&fit=crop\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1558618666-fcd25c85cd64?w=900&q=85&auto=format&fit=crop\" alt=\"Marble blue room\" loading=\"lazy\" \/>\r\n <div class=\"gallery-overlay\"><div class=\"gallery-overlay-icon\"><svg viewBox=\"0 0 18 18\"><line x1=\"9\" y1=\"2\" x2=\"9\" y2=\"16\"\/><line x1=\"2\" y1=\"9\" x2=\"16\" y2=\"9\"\/><\/svg><\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"gallery-item\" data-cat=\"oak\" data-src=\"https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?w=1200&q=90&auto=format&fit=crop\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?w=900&q=85&auto=format&fit=crop\" alt=\"Oak arch interior\" loading=\"lazy\" \/>\r\n <div class=\"gallery-overlay\"><div class=\"gallery-overlay-icon\"><svg viewBox=\"0 0 18 18\"><line x1=\"9\" y1=\"2\" x2=\"9\" y2=\"16\"\/><line x1=\"2\" y1=\"9\" x2=\"16\" y2=\"9\"\/><\/svg><\/div><\/div>\r\n <\/div>\r\n\r\n <!-- Row 4 -->\r\n <div class=\"gallery-item\" data-cat=\"ceramic\" data-src=\"https:\/\/images.unsplash.com\/photo-1600607687939-ce8a6c25118c?w=1200&q=90&auto=format&fit=crop\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600607687939-ce8a6c25118c?w=900&q=85&auto=format&fit=crop\" alt=\"Ceramic modern interior\" loading=\"lazy\" \/>\r\n <div class=\"gallery-overlay\"><div class=\"gallery-overlay-icon\"><svg viewBox=\"0 0 18 18\"><line x1=\"9\" y1=\"2\" x2=\"9\" y2=\"16\"\/><line x1=\"2\" y1=\"9\" x2=\"16\" y2=\"9\"\/><\/svg><\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"gallery-item\" data-cat=\"hardwood\" data-src=\"https:\/\/images.unsplash.com\/photo-1484154218962-a197022b5858?w=1200&q=90&auto=format&fit=crop\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1484154218962-a197022b5858?w=900&q=85&auto=format&fit=crop\" alt=\"Hardwood kitchen\" loading=\"lazy\" \/>\r\n <div class=\"gallery-overlay\"><div class=\"gallery-overlay-icon\"><svg viewBox=\"0 0 18 18\"><line x1=\"9\" y1=\"2\" x2=\"9\" y2=\"16\"\/><line x1=\"2\" y1=\"9\" x2=\"16\" y2=\"9\"\/><\/svg><\/div><\/div>\r\n <\/div>\r\n\r\n <div class=\"gallery-item\" data-cat=\"oak\" data-src=\"https:\/\/images.unsplash.com\/photo-1567016432779-094069958ea5?w=1200&q=90&auto=format&fit=crop\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1567016432779-094069958ea5?w=900&q=85&auto=format&fit=crop\" alt=\"Oak living space\" loading=\"lazy\" \/>\r\n <div class=\"gallery-overlay\"><div class=\"gallery-overlay-icon\"><svg viewBox=\"0 0 18 18\"><line x1=\"9\" y1=\"2\" x2=\"9\" y2=\"16\"\/><line x1=\"2\" y1=\"9\" x2=\"16\" y2=\"9\"\/><\/svg><\/div><\/div>\r\n <\/div>\r\n\r\n <\/div><!-- \/grid -->\r\n<\/section>\r\n\r\n<!-- LIGHTBOX -->\r\n<div class=\"lightbox\" id=\"lightbox\">\r\n <button class=\"lightbox-close\" id=\"lbClose\">\u00d7<\/button>\r\n <button class=\"lightbox-prev\" id=\"lbPrev\"><svg viewBox=\"0 0 32 32\"><polyline points=\"20,4 8,16 20,28\"\/><\/svg><\/button>\r\n <img decoding=\"async\" class=\"lightbox-img\" id=\"lbImg\" src=\"\" alt=\"\" \/>\r\n <button class=\"lightbox-next\" id=\"lbNext\"><svg viewBox=\"0 0 32 32\"><polyline points=\"12,4 24,16 12,28\"\/><\/svg><\/button>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n\r\n \/* ---- FILTER ---- *\/\r\n var filterBtns = document.querySelectorAll('.filter-btn');\r\n var allItems = document.querySelectorAll('.gallery-item');\r\n var current = 'all';\r\n\r\n filterBtns.forEach(function (btn) {\r\n btn.addEventListener('click', function () {\r\n filterBtns.forEach(function (b) { b.classList.remove('active'); });\r\n btn.classList.add('active');\r\n current = btn.getAttribute('data-filter');\r\n allItems.forEach(function (item) {\r\n var cat = item.getAttribute('data-cat');\r\n if (current === 'all' || cat === current) {\r\n item.classList.remove('hidden');\r\n } else {\r\n item.classList.add('hidden');\r\n }\r\n });\r\n });\r\n });\r\n\r\n \/* ---- LIGHTBOX ---- *\/\r\n var lightbox = document.getElementById('lightbox');\r\n var lbImg = document.getElementById('lbImg');\r\n var lbClose = document.getElementById('lbClose');\r\n var lbPrev = document.getElementById('lbPrev');\r\n var lbNext = document.getElementById('lbNext');\r\n var lbIndex = 0;\r\n\r\n function visibleItems() {\r\n return Array.from(allItems).filter(function (i) { return !i.classList.contains('hidden'); });\r\n }\r\n\r\n function openLightbox(index) {\r\n var items = visibleItems();\r\n lbIndex = (index + items.length) % items.length;\r\n lbImg.src = items[lbIndex].getAttribute('data-src');\r\n lbImg.alt = items[lbIndex].querySelector('img').alt;\r\n lightbox.classList.add('open');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n function closeLightbox() {\r\n lightbox.classList.remove('open');\r\n lbImg.src = '';\r\n document.body.style.overflow = '';\r\n }\r\n\r\n allItems.forEach(function (item) {\r\n item.addEventListener('click', function () {\r\n var visible = visibleItems();\r\n var idx = visible.indexOf(item);\r\n openLightbox(idx);\r\n });\r\n });\r\n\r\n lbClose.addEventListener('click', closeLightbox);\r\n lbPrev.addEventListener('click', function () { openLightbox(lbIndex - 1); });\r\n lbNext.addEventListener('click', function () { openLightbox(lbIndex + 1); });\r\n\r\n lightbox.addEventListener('click', function (e) {\r\n if (e.target === lightbox) closeLightbox();\r\n });\r\n\r\n document.addEventListener('keydown', function (e) {\r\n if (!lightbox.classList.contains('open')) return;\r\n if (e.key === 'Escape') closeLightbox();\r\n if (e.key === 'ArrowLeft') openLightbox(lbIndex - 1);\r\n if (e.key === 'ArrowRight') openLightbox(lbIndex + 1);\r\n });\r\n\r\n var style = document.createElement('style');\r\n style.textContent = '@keyframes fadeIn { from { opacity:0; transform:scale(0.97); } to { opacity:1; transform:scale(1); } }';\r\n document.head.appendChild(style);\r\n\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-8a31108 e-con e-atomic-element e-flexbox-base e-bea6509 \" data-id=\"8a31108\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8a31108\" data-e-type=\"e-flexbox\" data-id=\"8a31108\">\n \t\t<div class=\"elementor-element elementor-element-df14fe3 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"df14fe3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Our Expertise \u2013 A Tribute to Success<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@600;700&family=Lato:wght@300;400&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n width: 100%;\r\n overflow-x: hidden;\r\n }\r\n\r\n *, *::before, *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* ====== FULL WIDTH BREAKOUT ====== *\/\r\n \/* Use this class when the section lives inside a centered container *\/\r\n .exp-fullwidth {\r\n position: relative;\r\n width: 100vw;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n }\r\n\r\n \/* ====== SECTION ====== *\/\r\n .exp-wrap {\r\n display: flex;\r\n width: 100%;\r\n height: 440px;\r\n font-family: 'Lato', sans-serif;\r\n overflow: hidden;\r\n }\r\n\r\n \/* ====== LEFT IMAGE ====== *\/\r\n .exp-img {\r\n flex: 0 0 50%;\r\n height: 100%;\r\n overflow: hidden;\r\n }\r\n\r\n .exp-img img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n\r\n \/* ====== RIGHT CONTENT ====== *\/\r\n .exp-content {\r\n flex: 0 0 50%;\r\n background: #faf9f6;\r\n padding: 38px 52px 38px 58px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n overflow: hidden;\r\n }\r\n\r\n \/* ====== HEADING ====== *\/\r\n .exp-heading {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 20px;\r\n font-weight: 700;\r\n color: #2c2c2a;\r\n margin-bottom: 28px;\r\n line-height: 1.4;\r\n }\r\n .exp-heading .gold { color: #b89a5a; }\r\n .exp-heading .olive { color: #7a7a3a; }\r\n\r\n \/* ====== FEATURE GRID ====== *\/\r\n .feat-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 22px 40px;\r\n }\r\n\r\n .feat-icon {\r\n margin-bottom: 8px;\r\n }\r\n .feat-icon svg {\r\n width: 36px;\r\n height: 36px;\r\n stroke: #b89a5a;\r\n fill: none;\r\n stroke-width: 1.5;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n display: block;\r\n }\r\n\r\n .feat-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 12.5px;\r\n font-weight: 700;\r\n color: #2c2c2a;\r\n margin-bottom: 5px;\r\n }\r\n .feat-divider {\r\n width: 22px;\r\n height: 2px;\r\n background: #b89a5a;\r\n margin-bottom: 8px;\r\n }\r\n .feat-text {\r\n font-size: 12px;\r\n color: #999;\r\n line-height: 1.7;\r\n }\r\n\r\n \/* ====== RESPONSIVE ====== *\/\r\n @media (max-width: 900px) {\r\n .exp-wrap { flex-direction: column; height: auto; }\r\n .exp-img { flex: none; width: 100%; height: 260px; }\r\n .exp-content { flex: none; width: 100%; padding: 30px 24px; }\r\n .exp-heading { font-size: 17px; margin-bottom: 20px; }\r\n }\r\n @media (max-width: 560px) {\r\n .feat-grid { grid-template-columns: 1fr; gap: 18px; }\r\n .exp-content { padding: 24px 16px; }\r\n .exp-heading { font-size: 15px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!--\r\n HOW TO USE IN YOUR WEBSITE:\r\n If your site wraps content in a centered container (e.g. .container, .wrapper),\r\n add the class \"exp-fullwidth\" to the <section> tag below.\r\n This uses the vw trick to break out of any max-width parent.\r\n-->\r\n\r\n<section class=\"exp-fullwidth\">\r\n <div class=\"exp-wrap\">\r\n\r\n <!-- LEFT: IMAGE -->\r\n <div class=\"exp-img\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1616486338812-3dadae4b4ace?w=1200&q=85&auto=format&fit=crop\"\r\n alt=\"Modern interior with clean hardwood floor\"\r\n \/>\r\n <\/div>\r\n\r\n <!-- RIGHT: CONTENT -->\r\n <div class=\"exp-content\">\r\n\r\n <h2 class=\"exp-heading\">\r\n Our <span class=\"gold\">Expertise<\/span>, A <span class=\"olive\">Tribute<\/span> to Success\r\n <\/h2>\r\n\r\n <div class=\"feat-grid\">\r\n\r\n <!-- Ceramic Tiles -->\r\n <div>\r\n <div class=\"feat-icon\">\r\n <svg viewBox=\"0 0 36 36\">\r\n <polygon points=\"18,2 22,13 34,13 25,20 28,32 18,25 8,32 11,20 2,13 14,13\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"feat-title\">Ceramic Tiles<\/div>\r\n <div class=\"feat-divider\"><\/div>\r\n <p class=\"feat-text\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at.<\/p>\r\n <\/div>\r\n\r\n <!-- Slip-Resistant Slate -->\r\n <div>\r\n <div class=\"feat-icon\">\r\n <svg viewBox=\"0 0 36 36\">\r\n <rect x=\"3\" y=\"14\" width=\"30\" height=\"7\" rx=\"1.5\"\/>\r\n <rect x=\"7\" y=\"9\" width=\"22\" height=\"6\" rx=\"1\"\/>\r\n <line x1=\"7\" y1=\"21\" x2=\"5\" y2=\"29\"\/>\r\n <line x1=\"29\" y1=\"21\" x2=\"31\" y2=\"29\"\/>\r\n <line x1=\"14\" y1=\"21\" x2=\"13\" y2=\"29\"\/>\r\n <line x1=\"22\" y1=\"21\" x2=\"23\" y2=\"29\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"feat-title\">Slip-Resistant Slate<\/div>\r\n <div class=\"feat-divider\"><\/div>\r\n <p class=\"feat-text\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at.<\/p>\r\n <\/div>\r\n\r\n <!-- Laminate & Vinyl -->\r\n <div>\r\n <div class=\"feat-icon\">\r\n <svg viewBox=\"0 0 36 36\">\r\n <circle cx=\"11\" cy=\"11\" r=\"5\"\/>\r\n <circle cx=\"25\" cy=\"11\" r=\"5\"\/>\r\n <circle cx=\"11\" cy=\"25\" r=\"5\"\/>\r\n <circle cx=\"25\" cy=\"25\" r=\"5\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"feat-title\">Laminate & Vinyl<\/div>\r\n <div class=\"feat-divider\"><\/div>\r\n <p class=\"feat-text\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at.<\/p>\r\n <\/div>\r\n\r\n <!-- Wooden Finish -->\r\n <div>\r\n <div class=\"feat-icon\">\r\n <svg viewBox=\"0 0 36 36\">\r\n <rect x=\"3\" y=\"20\" width=\"30\" height=\"5\" rx=\"1\"\/>\r\n <rect x=\"6\" y=\"15\" width=\"24\" height=\"5\" rx=\"1\"\/>\r\n <rect x=\"3\" y=\"10\" width=\"30\" height=\"5\" rx=\"1\"\/>\r\n <polyline points=\"9,10 6,5 30,5 27,10\"\/>\r\n <line x1=\"18\" y1=\"25\" x2=\"18\" y2=\"32\"\/>\r\n <line x1=\"11\" y1=\"32\" x2=\"25\" y2=\"32\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"feat-title\">Wooden Finish<\/div>\r\n <div class=\"feat-divider\"><\/div>\r\n <p class=\"feat-text\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at.<\/p>\r\n <\/div>\r\n\r\n <\/div><!-- \/feat-grid -->\r\n <\/div><!-- \/exp-content -->\r\n\r\n <\/div><!-- \/exp-wrap -->\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-2955db4 e-con e-atomic-element e-flexbox-base e-df9d5e3 \" data-id=\"2955db4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"2955db4\" data-e-type=\"e-flexbox\" data-id=\"2955db4\">\n \t\t<div class=\"elementor-element elementor-element-ec38339 elementor-widget elementor-widget-html\" data-id=\"ec38339\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>News & Blog<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@600;700;800&family=Lato:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n \/* ====== FULL WIDTH BREAKOUT (if inside a centered container) ====== *\/\r\n .blog-fullwidth {\r\n position: relative;\r\n width: 100vw;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n }\r\n\r\n \/* ====== SECTION ====== *\/\r\n .blog-section {\r\n width: 100%;\r\n background: #fff;\r\n padding: 65px 100px 80px;\r\n font-family: 'Lato', sans-serif;\r\n }\r\n\r\n \/* ====== HEADER ====== *\/\r\n .blog-header {\r\n text-align: center;\r\n position: relative;\r\n height: 80px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 52px;\r\n }\r\n\r\n .blog-watermark {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 88px;\r\n font-weight: 800;\r\n color: #f0ede8;\r\n letter-spacing: 8px;\r\n text-transform: uppercase;\r\n line-height: 1;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n white-space: nowrap;\r\n z-index: 0;\r\n pointer-events: none;\r\n user-select: none;\r\n }\r\n\r\n .blog-title-row {\r\n position: relative;\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 18px;\r\n }\r\n\r\n .blog-title-row .line {\r\n flex: 0 0 70px;\r\n height: 1.5px;\r\n background: #2c2c2a;\r\n }\r\n\r\n .blog-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 18px;\r\n font-weight: 700;\r\n margin-top: 20px;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: #2c2c2a;\r\n }\r\n\r\n .blog-title span { color: #b89a5a; }\r\n\r\n \/* ====== GRID ====== *\/\r\n .blog-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 36px;\r\n }\r\n\r\n \/* ====== POST CARD ====== *\/\r\n .post-img {\r\n width: 100%;\r\n aspect-ratio: 4 \/ 2.8;\r\n overflow: hidden;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .post-img img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.45s ease;\r\n }\r\n\r\n .post-img:hover img { transform: scale(1.05); }\r\n\r\n .post-meta {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n font-size: 11.5px;\r\n color: #aaa;\r\n margin-bottom: 10px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .post-meta .sep { color: #ddd; }\r\n\r\n .post-meta svg {\r\n width: 13px;\r\n height: 13px;\r\n stroke: #aaa;\r\n fill: none;\r\n stroke-width: 1.6;\r\n stroke-linecap: round;\r\n flex-shrink: 0;\r\n }\r\n\r\n .post-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 13px;\r\n font-weight: 700;\r\n color: #2c2c2a;\r\n text-transform: uppercase;\r\n letter-spacing: 0.4px;\r\n line-height: 1.55;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .post-text {\r\n font-size: 13.5px;\r\n color: #999;\r\n line-height: 1.75;\r\n margin-bottom: 22px;\r\n }\r\n\r\n .read-more {\r\n display: inline-block;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 11px;\r\n font-weight: 600;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n color: #2c2c2a;\r\n border: 1.5px solid #ccc;\r\n padding: 10px 22px;\r\n text-decoration: none;\r\n transition: border-color 0.25s ease, color 0.25s ease;\r\n }\r\n\r\n .read-more:hover {\r\n border-color: #b89a5a;\r\n color: #b89a5a;\r\n }\r\n\r\n \/* ====== RESPONSIVE ====== *\/\r\n @media (max-width: 1024px) {\r\n .blog-section { padding: 50px 48px 60px; }\r\n .blog-watermark { font-size: 64px; }\r\n }\r\n\r\n @media (max-width: 820px) {\r\n .blog-grid { grid-template-columns: 1fr 1fr; gap: 24px; }\r\n .blog-section { padding: 40px 32px 50px; }\r\n .blog-watermark { font-size: 48px; }\r\n }\r\n\r\n @media (max-width: 540px) {\r\n .blog-grid { grid-template-columns: 1fr; gap: 28px; }\r\n .blog-section { padding: 32px 16px 40px; }\r\n .blog-watermark { display: none; }\r\n .blog-title { font-size: 14px; letter-spacing: 2px; }\r\n .blog-title-row .line { flex: 0 0 36px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"blog-fullwidth\">\r\n <div class=\"blog-section\">\r\n\r\n <!-- HEADER -->\r\n <div class=\"blog-header\">\r\n <div class=\"blog-watermark\">FLOORS<\/div>\r\n <div class=\"blog-title-row\">\r\n <div class=\"line\"><\/div>\r\n <h2 class=\"blog-title\">NEWS & <span>BLOG<\/span><\/h2>\r\n <div class=\"line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- POSTS GRID -->\r\n <div class=\"blog-grid\">\r\n\r\n <!-- Post 1 -->\r\n <div class=\"post-card\">\r\n <div class=\"post-img\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1504307651254-35680f356dfd?w=800&q=85&auto=format&fit=crop\"\r\n alt=\"Sander being used on wooden floor\"\r\n \/>\r\n <\/div>\r\n <div class=\"post-meta\">\r\n <svg viewBox=\"0 0 14 14\"><rect x=\"1\" y=\"2\" width=\"12\" height=\"11\" rx=\"1\"\/><line x1=\"1\" y1=\"5\" x2=\"13\" y2=\"5\"\/><line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"3\"\/><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"3\"\/><\/svg>\r\n Posted on June 18, 2015\r\n <span class=\"sep\">|<\/span>\r\n <svg viewBox=\"0 0 14 14\"><path d=\"M2 10 Q7 1 12 10\"\/><line x1=\"4\" y1=\"7\" x2=\"10\" y2=\"7\"\/><\/svg>\r\n 2\r\n <span class=\"sep\">|<\/span>\r\n <svg viewBox=\"0 0 14 14\"><circle cx=\"7\" cy=\"5\" r=\"3\"\/><path d=\"M2 13 Q2 9 7 9 Q12 9 12 13\"\/><\/svg>\r\n ram\r\n <\/div>\r\n <div class=\"post-title\">Use of Sander for a Smooth Finish of Wooden Surfaces<\/div>\r\n <p class=\"post-text\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt nunc lorem, nec faucibus mi facilisis eget. Mauris laoreet, nisl id faucibus pellentesque, mi...<\/p>\r\n <a href=\"#\" class=\"read-more\">Read More<\/a>\r\n <\/div>\r\n\r\n <!-- Post 2 -->\r\n <div class=\"post-card\">\r\n <div class=\"post-img\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1558618666-fcd25c85cd64?w=800&q=85&auto=format&fit=crop\"\r\n alt=\"Laying ceramic tiles\"\r\n \/>\r\n <\/div>\r\n <div class=\"post-meta\">\r\n <svg viewBox=\"0 0 14 14\"><rect x=\"1\" y=\"2\" width=\"12\" height=\"11\" rx=\"1\"\/><line x1=\"1\" y1=\"5\" x2=\"13\" y2=\"5\"\/><line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"3\"\/><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"3\"\/><\/svg>\r\n Posted on June 18, 2015\r\n <span class=\"sep\">|<\/span>\r\n <svg viewBox=\"0 0 14 14\"><path d=\"M2 10 Q7 1 12 10\"\/><line x1=\"4\" y1=\"7\" x2=\"10\" y2=\"7\"\/><\/svg>\r\n 0\r\n <span class=\"sep\">|<\/span>\r\n <svg viewBox=\"0 0 14 14\"><circle cx=\"7\" cy=\"5\" r=\"3\"\/><path d=\"M2 13 Q2 9 7 9 Q12 9 12 13\"\/><\/svg>\r\n ram\r\n <\/div>\r\n <div class=\"post-title\">Laying of Ceramic Tiles is an Art<\/div>\r\n <p class=\"post-text\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt nunc lorem, nec faucibus mi facilisis eget. Mauris laoreet, nisl id faucibus pellentesque, mi...<\/p>\r\n <a href=\"#\" class=\"read-more\">Read More<\/a>\r\n <\/div>\r\n\r\n <!-- Post 3 -->\r\n <div class=\"post-card\">\r\n <div class=\"post-img\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1581858726788-75bc0f6a952d?w=800&q=85&auto=format&fit=crop\"\r\n alt=\"Wooden flooring installation\"\r\n \/>\r\n <\/div>\r\n <div class=\"post-meta\">\r\n <svg viewBox=\"0 0 14 14\"><rect x=\"1\" y=\"2\" width=\"12\" height=\"11\" rx=\"1\"\/><line x1=\"1\" y1=\"5\" x2=\"13\" y2=\"5\"\/><line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"3\"\/><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"3\"\/><\/svg>\r\n Posted on June 18, 2015\r\n <span class=\"sep\">|<\/span>\r\n <svg viewBox=\"0 0 14 14\"><path d=\"M2 10 Q7 1 12 10\"\/><line x1=\"4\" y1=\"7\" x2=\"10\" y2=\"7\"\/><\/svg>\r\n 0\r\n <span class=\"sep\">|<\/span>\r\n <svg viewBox=\"0 0 14 14\"><circle cx=\"7\" cy=\"5\" r=\"3\"\/><path d=\"M2 13 Q2 9 7 9 Q12 9 12 13\"\/><\/svg>\r\n ram\r\n <\/div>\r\n <div class=\"post-title\">Wooden Flooring Used Extensively<\/div>\r\n <p class=\"post-text\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt nunc lorem, nec faucibus mi facilisis eget. Mauris laoreet, nisl id faucibus pellentesque, mi...<\/p>\r\n <a href=\"#\" class=\"read-more\">Read More<\/a>\r\n <\/div>\r\n\r\n <\/div><!-- \/blog-grid -->\r\n <\/div><!-- \/blog-section -->\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-fd2dfde e-con e-atomic-element e-flexbox-base e-6aabb80 \" data-id=\"fd2dfde\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"fd2dfde\" data-e-type=\"e-flexbox\" data-id=\"fd2dfde\">\n <div class=\"elementor-element elementor-element-8908e53 e-con e-atomic-element e-flexbox-base e-f1543a6 \" data-id=\"8908e53\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8908e53\" data-e-type=\"e-flexbox\" data-id=\"8908e53\">\n <div class=\"elementor-element elementor-element-c8f62dc e-transform e-flex e-con-boxed e-con e-parent\" data-id=\"c8f62dc\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic","_transform_scale_effect_hover":{"unit":"px","size":0.9,"sizes":[]},"_transform_scale_effect_hover_tablet":{"unit":"px","size":"","sizes":[]},"_transform_scale_effect_hover_mobile":{"unit":"px","size":"","sizes":[]}}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-26f2b68 e-con e-atomic-element e-flexbox-base e-e076de9 \" data-id=\"26f2b68\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"26f2b68\" data-e-type=\"e-flexbox\" data-id=\"26f2b68\">\n <div class=\"elementor-element elementor-element-97fd2de e-transform e-flex e-con-boxed e-con e-parent\" data-id=\"97fd2de\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic","_transform_scale_effect_hover":{"unit":"px","size":0.9,"sizes":[]},"_transform_scale_effect_hover_tablet":{"unit":"px","size":"","sizes":[]},"_transform_scale_effect_hover_mobile":{"unit":"px","size":"","sizes":[]}}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-a5c8cda e-con e-atomic-element e-flexbox-base e-b3e86c8 \" data-id=\"a5c8cda\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"a5c8cda\" data-e-type=\"e-flexbox\" data-id=\"a5c8cda\">\n <div class=\"elementor-element elementor-element-9eb08dc e-transform e-flex e-con-boxed e-con e-parent\" data-id=\"9eb08dc\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic","_transform_scale_effect_hover":{"unit":"px","size":0.9,"sizes":[]},"_transform_scale_effect_hover_tablet":{"unit":"px","size":"","sizes":[]},"_transform_scale_effect_hover_mobile":{"unit":"px","size":"","sizes":[]}}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-29218a3 e-con e-atomic-element e-flexbox-base e-d86f35b \" data-id=\"29218a3\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"29218a3\" data-e-type=\"e-flexbox\" data-id=\"29218a3\">\n <div class=\"elementor-element elementor-element-e73f1eb e-transform e-flex e-con-boxed e-con e-parent\" data-id=\"e73f1eb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic","_transform_scale_effect_hover":{"unit":"px","size":0.9,"sizes":[]},"_transform_scale_effect_hover_tablet":{"unit":"px","size":"","sizes":[]},"_transform_scale_effect_hover_mobile":{"unit":"px","size":"","sizes":[]}}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-5bfccf0 e-con e-atomic-element e-flexbox-base e-0a08a2d \" data-id=\"5bfccf0\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"5bfccf0\" data-e-type=\"e-flexbox\" data-id=\"5bfccf0\">\n <div class=\"elementor-element elementor-element-4c7619b e-transform e-flex e-con-boxed e-con e-parent\" data-id=\"4c7619b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic","_transform_scale_effect_hover":{"unit":"px","size":0.9,"sizes":[]},"_transform_scale_effect_hover_tablet":{"unit":"px","size":"","sizes":[]},"_transform_scale_effect_hover_mobile":{"unit":"px","size":"","sizes":[]}}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Flooring Hero Slider The Ultimate Flooring Service Wood Floor Installation, Refinishing View Details For quality flooring service Call Now +91 2345 678 901 Commercial and Residential Flooring Specialists Laminate Carpet Wood Vinyls \u2039 \u203a Covering Wall to Wall FLOORS COVERING WALL TO WALL Best Floors Are Wooden Aenean commodo ligula eget dolor. Aenean massa. Cum […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"rs_blank_template":"","rs_page_bg_color":"","slide_template_v7":"","footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"admin","author_link":"https:\/\/pakinterior.designwithsana.com\/?author=1"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Flooring Hero Slider The Ultimate Flooring Service Wood Floor Installation, Refinishing View Details For quality flooring service Call Now +91 2345 678 901 Commercial and Residential Flooring Specialists Laminate Carpet Wood Vinyls \u2039 \u203a Covering Wall to Wall FLOORS COVERING WALL TO WALL Best Floors Are Wooden Aenean commodo ligula eget dolor. Aenean massa. Cum…","_links":{"self":[{"href":"https:\/\/pakinterior.designwithsana.com\/index.php?rest_route=\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pakinterior.designwithsana.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pakinterior.designwithsana.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pakinterior.designwithsana.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pakinterior.designwithsana.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":5,"href":"https:\/\/pakinterior.designwithsana.com\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":571,"href":"https:\/\/pakinterior.designwithsana.com\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions\/571"}],"wp:attachment":[{"href":"https:\/\/pakinterior.designwithsana.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}