Kalleshwara Electronics | Hero + Brands (Fully Responsive)<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:opsz,wght@14..32,300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <style>\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: 'Inter', sans-serif;\r\n background: #ffffff;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* ========== HERO CAROUSEL \u2013 IMPROVED RESPONSIVE ========== *\/\r\n .hero {\r\n position: relative;\r\n width: 100%;\r\n overflow: hidden;\r\n background: #000;\r\n }\r\n .carousel-container {\r\n position: relative;\r\n width: 100%;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n .carousel-slides {\r\n display: flex;\r\n transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n will-change: transform;\r\n }\r\n .slide {\r\n min-width: 100%;\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n position: relative;\r\n }\r\n \/* Dynamic height based on viewport *\/\r\n .slide {\r\n height: 70vh;\r\n max-height: 650px;\r\n min-height: 320px;\r\n }\r\n\r\n \/* Carousel buttons \u2013 touch\u2011friendly, visible on all devices *\/\r\n .carousel-btn {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: rgba(0,0,0,0.55);\r\n backdrop-filter: blur(6px);\r\n border: none;\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 50%;\r\n font-size: 1.2rem;\r\n color: white;\r\n cursor: pointer;\r\n z-index: 20;\r\n transition: 0.2s;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n touch-action: manipulation;\r\n }\r\n .carousel-btn:hover {\r\n background: #D4A33D;\r\n color: #071633;\r\n }\r\n .prev-btn { left: 16px; }\r\n .next-btn { right: 16px; }\r\n\r\n \/* Dots \u2013 larger tap area *\/\r\n .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: 12px;\r\n z-index: 20;\r\n padding: 6px 12px;\r\n background: rgba(0,0,0,0.35);\r\n border-radius: 40px;\r\n backdrop-filter: blur(4px);\r\n }\r\n .dot {\r\n width: 10px;\r\n height: 10px;\r\n background: rgba(255,255,255,0.8);\r\n border-radius: 10px;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n touch-action: manipulation;\r\n }\r\n .dot.active {\r\n width: 26px;\r\n background: #D4A33D;\r\n }\r\n\r\n \/* ========== BRAND MARQUEE \u2013 SMOOTH INFINITE SCROLL ========== *\/\r\n .brands-section {\r\n background: #f8f9fc;\r\n padding: 30px 0;\r\n border-top: 1px solid rgba(0,0,0,0.05);\r\n border-bottom: 1px solid rgba(0,0,0,0.05);\r\n overflow: hidden;\r\n width: 100%;\r\n }\r\n .brands-container {\r\n width: 100%;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n overflow: visible;\r\n }\r\n .brand-track {\r\n display: flex;\r\n align-items: center;\r\n gap: 32px;\r\n animation: scrollBrands 28s linear infinite;\r\n width: max-content;\r\n will-change: transform;\r\n }\r\n .brand-item {\r\n flex: 0 0 auto;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 65px;\r\n padding: 0 8px;\r\n transition: transform 0.2s;\r\n }\r\n .brand-item img {\r\n max-height: 50px;\r\n max-width: 120px;\r\n width: auto;\r\n height: auto;\r\n object-fit: contain;\r\n opacity: 0.85;\r\n transition: all 0.2s ease;\r\n }\r\n .brand-item:hover img {\r\n opacity: 1;\r\n filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));\r\n transform: scale(1.03);\r\n }\r\n .brands-container:hover .brand-track {\r\n animation-play-state: paused;\r\n }\r\n\r\n @keyframes scrollBrands {\r\n 0% { transform: translateX(0); }\r\n 100% { transform: translateX(-50%); }\r\n }\r\n\r\n \/* ========== RESPONSIVE MEDIA QUERIES (Desktop + Mobile) ========== *\/\r\n @media (max-width: 900px) {\r\n .slide { height: 55vh; min-height: 380px; }\r\n .carousel-btn { width: 40px; height: 40px; font-size: 1rem; }\r\n .brands-section { padding: 25px 0; }\r\n .brand-item { height: 55px; }\r\n .brand-item img { max-height: 42px; max-width: 100px; }\r\n .brand-track { gap: 26px; }\r\n .dots { gap: 10px; bottom: 16px; }\r\n .dot.active { width: 24px; }\r\n }\r\n\r\n @media (max-width: 650px) {\r\n .slide { height: 45vh; min-height: 300px; }\r\n .carousel-btn { width: 36px; height: 36px; font-size: 0.9rem; }\r\n .prev-btn { left: 12px; }\r\n .next-btn { right: 12px; }\r\n .brands-section { padding: 20px 0; }\r\n .brand-item { height: 48px; }\r\n .brand-item img { max-height: 38px; max-width: 85px; }\r\n .brand-track { gap: 20px; }\r\n .dots { padding: 5px 10px; gap: 8px; }\r\n .dot { width: 8px; height: 8px; }\r\n .dot.active { width: 20px; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .slide { height: 40vh; min-height: 260px; }\r\n .carousel-btn { width: 32px; height: 32px; font-size: 0.8rem; }\r\n .brand-item { height: 42px; }\r\n .brand-item img { max-height: 32px; max-width: 70px; }\r\n .brand-track { gap: 16px; }\r\n }\r\n\r\n \/* Landscape orientation on phones *\/\r\n @media (max-width: 850px) and (orientation: landscape) {\r\n .slide { height: 90vh; min-height: 280px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<section class=\"hero\">\r\n <div class=\"carousel-container\">\r\n <div class=\"carousel-slides\" id=\"carouselSlides\">\r\n <div class=\"slide\" style=\"background-image: url('https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/for-website-3-rd-one-1.png');\"><\/div>\r\n <div class=\"slide\" style=\"background-image: url('https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/for-website-2-image-1.png');\"><\/div>\r\n <div class=\"slide\" style=\"background-image: url('https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/photo-too-add-in-the-website.png');\"><\/div>\r\n <div class=\"slide\" style=\"background-image: url('https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/for-website-4-one.png');\"><\/div>\r\n <\/div>\r\n <button class=\"carousel-btn prev-btn\" id=\"prevBtn\" aria-label=\"Previous\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\r\n <button class=\"carousel-btn next-btn\" id=\"nextBtn\" aria-label=\"Next\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\r\n <div class=\"dots\" id=\"dotsContainer\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"brands-section\">\r\n <div class=\"brands-container\">\r\n <div class=\"brand-track\" id=\"brandTrack\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n \/\/ ========== HERO CAROUSEL (touch + auto) ==========\r\n (function() {\r\n const slidesContainer = document.getElementById('carouselSlides');\r\n const slides = document.querySelectorAll('.slide');\r\n const prevBtn = document.getElementById('prevBtn');\r\n const nextBtn = document.getElementById('nextBtn');\r\n const dotsDiv = document.getElementById('dotsContainer');\r\n \r\n let currentIndex = 0;\r\n const totalSlides = slides.length;\r\n let autoInterval;\r\n\r\n function updateCarousel() {\r\n const offset = -currentIndex * 100;\r\n slidesContainer.style.transform = `translateX(${offset}%)`;\r\n const dots = document.querySelectorAll('.dot');\r\n dots.forEach((dot, idx) => {\r\n dot.classList.toggle('active', idx === currentIndex);\r\n });\r\n }\r\n\r\n function goToSlide(index) {\r\n if (index < 0) index = totalSlides - 1;\r\n if (index >= totalSlides) index = 0;\r\n currentIndex = index;\r\n updateCarousel();\r\n resetAutoPlay();\r\n }\r\n\r\n function nextSlide() { goToSlide(currentIndex + 1); }\r\n function prevSlide() { goToSlide(currentIndex - 1); }\r\n\r\n function startAutoPlay() {\r\n if (autoInterval) clearInterval(autoInterval);\r\n autoInterval = setInterval(() => nextSlide(), 5000);\r\n }\r\n function resetAutoPlay() {\r\n clearInterval(autoInterval);\r\n startAutoPlay();\r\n }\r\n\r\n function initDots() {\r\n dotsDiv.innerHTML = '';\r\n for (let i = 0; i < totalSlides; i++) {\r\n const dot = document.createElement('div');\r\n dot.classList.add('dot');\r\n if (i === currentIndex) dot.classList.add('active');\r\n dot.addEventListener('click', () => goToSlide(i));\r\n dotsDiv.appendChild(dot);\r\n }\r\n }\r\n\r\n const hero = document.querySelector('.hero');\r\n hero.addEventListener('mouseenter', () => clearInterval(autoInterval));\r\n hero.addEventListener('mouseleave', () => startAutoPlay());\r\n\r\n \/\/ Touch swipe for mobile\r\n let touchStart = 0;\r\n const container = document.querySelector('.carousel-container');\r\n container.addEventListener('touchstart', (e) => {\r\n touchStart = e.changedTouches[0].screenX;\r\n });\r\n container.addEventListener('touchend', (e) => {\r\n const diff = e.changedTouches[0].screenX - touchStart;\r\n if (Math.abs(diff) > 40) {\r\n diff > 0 ? prevSlide() : nextSlide();\r\n resetAutoPlay();\r\n }\r\n });\r\n\r\n prevBtn.addEventListener('click', () => { prevSlide(); resetAutoPlay(); });\r\n nextBtn.addEventListener('click', () => { nextSlide(); resetAutoPlay(); });\r\n\r\n initDots();\r\n startAutoPlay();\r\n updateCarousel();\r\n })();\r\n\r\n \/\/ ========== BRAND MARQUEE (duplicate for seamless loop) ==========\r\n (function() {\r\n const logoUrls = [\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/green-chef.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/samsung.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/lg.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/ifb.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/tcl.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/bajaj-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/prestige.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/preethi.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/voltas.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/lloyd.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/havells.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/haier.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/phx-png.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/daikin.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/vijayalakshmi.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/whirlpool.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/blue-star-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/daikin-1.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/godrej.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/bosch.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/vzy.png\"\r\n ];\r\n \/\/ remove exact duplicates\r\n const unique = [...new Map(logoUrls.map(url => [url, url])).values()];\r\n const track = document.getElementById('brandTrack');\r\n if (!track) return;\r\n \r\n function createLogo(src) {\r\n const div = document.createElement('div');\r\n div.className = 'brand-item';\r\n const img = document.createElement('img');\r\n img.src = src;\r\n img.alt = 'Brand';\r\n img.loading = 'lazy';\r\n img.onerror = () => { img.style.opacity = '0.4'; img.style.filter = 'grayscale(1)'; };\r\n div.appendChild(img);\r\n return div;\r\n }\r\n \r\n unique.forEach(url => track.appendChild(createLogo(url)));\r\n unique.forEach(url => track.appendChild(createLogo(url))); \/\/ duplicate for infinite scroll\r\n \r\n \/\/ dynamic speed based on item count (smoother on all devices)\r\n let speed = Math.min(42, Math.max(22, unique.length * 0.85));\r\n track.style.animationDuration = `${speed}s`;\r\n \r\n if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\r\n track.style.animation = 'none';\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-891024f e-con e-atomic-element e-flexbox-base e-e2934b3 \" data-id=\"891024f\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"891024f\">\n \t\t<div class=\"elementor-element elementor-element-f4acb27 elementor-widget elementor-widget-html\" data-id=\"f4acb27\" 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, user-scalable=yes\">\r\n <title>Havells Water Purifier | Call to Action<\/title>\r\n <style>\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 background: #ffffff;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 2rem;\r\n }\r\n\r\n \/* CTA Section \u2013 only image, animated *\/\r\n .cta-section {\r\n width: 100%;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n overflow: hidden;\r\n background: #ffffff;\r\n border-radius: 2rem;\r\n }\r\n\r\n .cta-image {\r\n width: 100%;\r\n display: block;\r\n animation: gentlePulse 3s ease-in-out infinite;\r\n transition: transform 0.3s ease, filter 0.3s ease;\r\n border-radius: 1.5rem;\r\n }\r\n\r\n \/* Subtle animation \u2013 smooth scale and shadow effect *\/\r\n @keyframes gentlePulse {\r\n 0% {\r\n transform: scale(1);\r\n filter: drop-shadow(0 10px 20px rgba(0,0,0,0.05));\r\n }\r\n 50% {\r\n transform: scale(1.01);\r\n filter: drop-shadow(0 15px 30px rgba(212, 163, 61, 0.15));\r\n }\r\n 100% {\r\n transform: scale(1);\r\n filter: drop-shadow(0 10px 20px rgba(0,0,0,0.05));\r\n }\r\n }\r\n\r\n \/* Hover effect - user interaction *\/\r\n .cta-image:hover {\r\n animation: none;\r\n transform: scale(1.02);\r\n filter: drop-shadow(0 20px 35px rgba(212, 163, 61, 0.25));\r\n transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);\r\n cursor: pointer;\r\n }\r\n\r\n \/* Responsive \u2013 ensure image covers nicely *\/\r\n @media (max-width: 768px) {\r\n body {\r\n padding: 1rem;\r\n }\r\n .cta-image {\r\n border-radius: 1rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"cta-section\">\r\n <img decoding=\"async\" class=\"cta-image\" \r\n src=\"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/havells-watter-purifier-corosal-image.png\" \r\n alt=\"Havells Water Purifier - Limited Time Offer\"\r\n loading=\"eager\">\r\n <\/div>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-76a00dc e-con e-atomic-element e-flexbox-base e-32d04f8 \" data-id=\"76a00dc\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"76a00dc\">\n \t\t<div class=\"elementor-element elementor-element-068b8ef elementor-widget elementor-widget-html\" data-id=\"068b8ef\" 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, user-scalable=yes\">\r\n <title>Home Appliances | Moving Carousel<\/title>\r\n <style>\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 background: #ffffff;\r\n font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 2rem 0;\r\n }\r\n\r\n \/* Carousel wrapper *\/\r\n .carousel-wrap {\r\n width: 100%;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n overflow: hidden;\r\n background: #fafbfc;\r\n padding: 2rem 0;\r\n border-radius: 2rem;\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.02);\r\n }\r\n\r\n \/* Infinite scroll container *\/\r\n .carousel-track {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n animation: scrollLeft 35s linear infinite;\r\n width: max-content;\r\n will-change: transform;\r\n }\r\n\r\n \/* Individual item *\/\r\n .carousel-item {\r\n flex: 0 0 auto;\r\n width: 180px;\r\n text-align: center;\r\n transition: transform 0.2s;\r\n }\r\n .carousel-item img {\r\n width: 100%;\r\n max-width: 150px;\r\n height: 150px;\r\n object-fit: contain;\r\n filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));\r\n transition: all 0.2s ease;\r\n background: white;\r\n border-radius: 1.5rem;\r\n padding: 0.8rem;\r\n }\r\n .carousel-item:hover {\r\n transform: scale(1.05);\r\n }\r\n .carousel-item:hover img {\r\n filter: drop-shadow(0 8px 12px rgba(0,0,0,0.1));\r\n }\r\n\r\n \/* Animation *\/\r\n @keyframes scrollLeft {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(-50%);\r\n }\r\n }\r\n\r\n \/* Pause on hover *\/\r\n .carousel-wrap:hover .carousel-track {\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 700px) {\r\n .carousel-item {\r\n width: 140px;\r\n }\r\n .carousel-item img {\r\n max-width: 110px;\r\n height: 110px;\r\n }\r\n .carousel-track {\r\n gap: 1.2rem;\r\n }\r\n }\r\n @media (max-width: 500px) {\r\n .carousel-item {\r\n width: 120px;\r\n }\r\n .carousel-item img {\r\n max-width: 90px;\r\n height: 90px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"carousel-wrap\">\r\n <div class=\"carousel-track\" id=\"applianceTrack\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ List of appliance images (provided by user)\r\n const applianceImages = [\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/hair-dryer.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/vaccum-cleaner-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/water-gyzer-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/fan-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/heater-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/cooler-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/ac-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/iron-box-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/water-purifer-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/microwave-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/induction-stove-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/fridge-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/washing-machine-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/tv.png\"\r\n ];\r\n\r\n \/\/ Build the carousel track \u2013 duplicate the set for seamless infinite loop\r\n const track = document.getElementById('applianceTrack');\r\n if (track) {\r\n \/\/ Helper to create a carousel item\r\n function createItem(imgSrc) {\r\n const div = document.createElement('div');\r\n div.className = 'carousel-item';\r\n const img = document.createElement('img');\r\n img.src = imgSrc;\r\n img.alt = 'Home Appliance';\r\n img.loading = 'lazy';\r\n \/\/ Optional: fallback if image fails to load\r\n img.onerror = () => {\r\n img.style.opacity = '0.5';\r\n img.style.filter = 'grayscale(1)';\r\n };\r\n div.appendChild(img);\r\n return div;\r\n }\r\n\r\n \/\/ Add all images once (original set)\r\n applianceImages.forEach(src => {\r\n track.appendChild(createItem(src));\r\n });\r\n \/\/ Duplicate the set for infinite scroll (so it loops seamlessly)\r\n applianceImages.forEach(src => {\r\n track.appendChild(createItem(src));\r\n });\r\n\r\n \/\/ Adjust animation speed based on number of items (smooth and natural)\r\n const totalItems = applianceImages.length;\r\n let duration = Math.max(20, totalItems * 1.2);\r\n duration = Math.min(duration, 45);\r\n track.style.animationDuration = `${duration}s`;\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-336ee75 e-con e-atomic-element e-flexbox-base e-336ee75-4da831a \" data-id=\"336ee75\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"336ee75\">\n \t\t<div class=\"elementor-element elementor-element-b0ba5ec elementor-widget elementor-widget-html\" data-id=\"b0ba5ec\" 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, user-scalable=yes\">\r\n <title>Call to Action | Water Geyser Offer<\/title>\r\n <style>\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 background: #ffffff;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 1.5rem;\r\n }\r\n\r\n \/* CTA Container \u2013 fully responsive, centered *\/\r\n .cta-wrapper {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n }\r\n\r\n \/* Animated button \u2013 pure image *\/\r\n .cta-button {\r\n display: inline-block;\r\n cursor: pointer;\r\n background: transparent;\r\n border: none;\r\n padding: 0;\r\n margin: 0;\r\n line-height: 0;\r\n max-width: 100%;\r\n width: auto;\r\n transition: transform 0.2s ease;\r\n animation: gentlePulse 2.5s ease-in-out infinite;\r\n }\r\n\r\n .cta-button img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n border-radius: 1.5rem;\r\n filter: drop-shadow(0 12px 20px rgba(0,0,0,0.1));\r\n transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);\r\n }\r\n\r\n \/* Desktop: image size limited, but responsive *\/\r\n @media (min-width: 1024px) {\r\n .cta-button img {\r\n max-width: 550px;\r\n }\r\n }\r\n\r\n \/* Tablet \/ small desktop *\/\r\n @media (max-width: 1023px) and (min-width: 768px) {\r\n .cta-button img {\r\n max-width: 450px;\r\n }\r\n }\r\n\r\n \/* Mobile *\/\r\n @media (max-width: 767px) {\r\n .cta-button img {\r\n max-width: 320px;\r\n }\r\n body {\r\n padding: 1rem;\r\n }\r\n }\r\n\r\n \/* Extra small devices *\/\r\n @media (max-width: 480px) {\r\n .cta-button img {\r\n max-width: 280px;\r\n }\r\n }\r\n\r\n \/* Hover effect \u2013 stops pulse and scales slightly *\/\r\n .cta-button:hover {\r\n animation: none;\r\n transform: scale(1.02);\r\n }\r\n .cta-button:hover img {\r\n filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));\r\n }\r\n\r\n \/* Pulse animation with golden glow *\/\r\n @keyframes gentlePulse {\r\n 0% {\r\n transform: scale(1);\r\n filter: drop-shadow(0 8px 15px rgba(0,0,0,0.08));\r\n }\r\n 50% {\r\n transform: scale(1.02);\r\n filter: drop-shadow(0 15px 25px rgba(212, 163, 61, 0.4));\r\n }\r\n 100% {\r\n transform: scale(1);\r\n filter: drop-shadow(0 8px 15px rgba(0,0,0,0.08));\r\n }\r\n }\r\n\r\n \/* Accessibility: focus outline *\/\r\n .cta-button:focus-visible {\r\n outline: 2px solid #D4A33D;\r\n outline-offset: 4px;\r\n border-radius: 1.5rem;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"cta-wrapper\">\r\n <button class=\"cta-button\" id=\"ctaBtn\" aria-label=\"Exclusive water geyser offer \u2013 click to shop\">\r\n <img decoding=\"async\" src=\"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/water-geyser-for-corosal-.png\" \r\n alt=\"Water Geyser - Limited Time Offer\" \r\n loading=\"eager\">\r\n <\/button>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Interactive CTA \u2013 redirect to offers page (replace with actual URL)\r\n const cta = document.getElementById('ctaBtn');\r\n if (cta) {\r\n cta.addEventListener('click', () => {\r\n \/\/ Uncomment the line below to redirect to actual offer page\r\n \/\/ window.location.href = \"https:\/\/kalleshwaraelectronics.com\/offers\/water-geyser-deal\/\";\r\n \r\n \/\/ Fallback alert for demonstration (remove in production if redirect is used)\r\n alert(\"\ud83d\udd25 Special water geyser offer! Visit our store or call 082632 00208 for festive discounts.\");\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-522a5d2 e-con e-atomic-element e-flexbox-base e-fa6c0c6 \" data-id=\"522a5d2\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"522a5d2\">\n \t\t<div class=\"elementor-element elementor-element-0825945 elementor-widget elementor-widget-html\" data-id=\"0825945\" 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, user-scalable=yes\">\r\n <title>Home Appliances | Moving Carousel<\/title>\r\n <style>\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 background: #ffffff;\r\n font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 2rem 0;\r\n }\r\n\r\n \/* Carousel wrapper *\/\r\n .carousel-wrap {\r\n width: 100%;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n overflow: hidden;\r\n background: #fafbfc;\r\n padding: 2rem 0;\r\n border-radius: 2rem;\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.02);\r\n }\r\n\r\n \/* Infinite scroll container *\/\r\n .carousel-track {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n animation: scrollLeft 35s linear infinite;\r\n width: max-content;\r\n will-change: transform;\r\n }\r\n\r\n \/* Individual item *\/\r\n .carousel-item {\r\n flex: 0 0 auto;\r\n width: 180px;\r\n text-align: center;\r\n transition: transform 0.2s;\r\n }\r\n .carousel-item img {\r\n width: 100%;\r\n max-width: 150px;\r\n height: 150px;\r\n object-fit: contain;\r\n filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));\r\n transition: all 0.2s ease;\r\n background: white;\r\n border-radius: 1.5rem;\r\n padding: 0.8rem;\r\n }\r\n .carousel-item:hover {\r\n transform: scale(1.05);\r\n }\r\n .carousel-item:hover img {\r\n filter: drop-shadow(0 8px 12px rgba(0,0,0,0.1));\r\n }\r\n\r\n \/* Animation *\/\r\n @keyframes scrollLeft {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(-50%);\r\n }\r\n }\r\n\r\n \/* Pause on hover *\/\r\n .carousel-wrap:hover .carousel-track {\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 700px) {\r\n .carousel-item {\r\n width: 140px;\r\n }\r\n .carousel-item img {\r\n max-width: 110px;\r\n height: 110px;\r\n }\r\n .carousel-track {\r\n gap: 1.2rem;\r\n }\r\n }\r\n @media (max-width: 500px) {\r\n .carousel-item {\r\n width: 120px;\r\n }\r\n .carousel-item img {\r\n max-width: 90px;\r\n height: 90px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"carousel-wrap\">\r\n <div class=\"carousel-track\" id=\"applianceTrack\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ List of appliance images (provided by user)\r\n const applianceImages = [\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/hair-dryer.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/vaccum-cleaner-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/water-gyzer-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/fan-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/heater-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/cooler-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/ac-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/iron-box-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/water-purifer-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/microwave-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/induction-stove-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/fridge-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/washing-machine-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/tv.png\"\r\n ];\r\n\r\n \/\/ Build the carousel track \u2013 duplicate the set for seamless infinite loop\r\n const track = document.getElementById('applianceTrack');\r\n if (track) {\r\n \/\/ Helper to create a carousel item\r\n function createItem(imgSrc) {\r\n const div = document.createElement('div');\r\n div.className = 'carousel-item';\r\n const img = document.createElement('img');\r\n img.src = imgSrc;\r\n img.alt = 'Home Appliance';\r\n img.loading = 'lazy';\r\n \/\/ Optional: fallback if image fails to load\r\n img.onerror = () => {\r\n img.style.opacity = '0.5';\r\n img.style.filter = 'grayscale(1)';\r\n };\r\n div.appendChild(img);\r\n return div;\r\n }\r\n\r\n \/\/ Add all images once (original set)\r\n applianceImages.forEach(src => {\r\n track.appendChild(createItem(src));\r\n });\r\n \/\/ Duplicate the set for infinite scroll (so it loops seamlessly)\r\n applianceImages.forEach(src => {\r\n track.appendChild(createItem(src));\r\n });\r\n\r\n \/\/ Adjust animation speed based on number of items (smooth and natural)\r\n const totalItems = applianceImages.length;\r\n let duration = Math.max(20, totalItems * 1.2);\r\n duration = Math.min(duration, 45);\r\n track.style.animationDuration = `${duration}s`;\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-dc4ed3b e-con e-atomic-element e-flexbox-base e-f13d981 \" data-id=\"dc4ed3b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"dc4ed3b\">\n \t\t<div class=\"elementor-element elementor-element-8f0b18a hfe-content-align-left elementor-widget elementor-widget-hfe-woo-product-grid\" data-id=\"8f0b18a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"columns":"5","columns_tablet":"3","columns_mobile":"1","content_alignment":"left"}\" data-widget_type=\"hfe-woo-product-grid.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"hfe-woo-products-wrapper\">\n\t\t\t<div class=\"hfe-woo-products-grid\">\n\t\t\t\t\t\t<div class=\"hfe-product-item\">\n\t\t\t\t\t\t\t<div class=\"hfe-product-image\">\n\t\t\t\t\t<a href=\"https:\/\/kalleshwaraelectronics.com\/kn\/product\/haier-165l-1-star-marine-elegance-floral-finish-direct-cool-single-door-refrigerator\/\">\n\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"222\" height=\"300\" src=\"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-08-at-18.37.51-1-222x300.jpeg\" class=\"attachment-woocommerce_thumbnail size-woocommerce_thumbnail\" alt=\"Haier 165L 1 Star Marine Elegance Floral Finish Direct Cool Single Door Refrigerator\" \/>\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"hfe-product-content\">\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-product-category\">\n\t\t\t\t\t\tFridge, Haier\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-product-title\">\n\t\t\t\t\t\t<a href=\"https:\/\/kalleshwaraelectronics.com\/kn\/product\/haier-165l-1-star-marine-elegance-floral-finish-direct-cool-single-door-refrigerator\/\" class=\"hfe-loop-product__link\">\n\t\t\t\t\t\t\t<h2 class=\"woocommerce-loop-product__title\">Haier 165L 1 Star Marine Elegance Floral Finish Direct Cool Single Door Refrigerator<\/h2>\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-product-rating\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-product-price\">\n\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-product-add-to-cart\">\n\t\t\t\t\t\t<a href=\"https:\/\/kalleshwaraelectronics.com\/kn\/product\/haier-165l-1-star-marine-elegance-floral-finish-direct-cool-single-door-refrigerator\/\" aria-describedby=\"woocommerce_loop_add_to_cart_link_describedby_237\" data-quantity=\"1\" class=\"button product_type_variable\" data-product_id=\"237\" data-product_sku=\"HRD-1851SMEA-P\" aria-label=\"Select options for “Haier 165L 1 Star Marine Elegance Floral Finish Direct Cool Single Door Refrigerator”\" rel=\"nofollow\">Read more<\/a>\t<span id=\"woocommerce_loop_add_to_cart_link_describedby_237\" class=\"screen-reader-text\">\n\t\t\t<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p> […]<\/p>\n","protected":false},"author":1,"featured_media":20,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-18","page","type-page","status-publish","has-post-thumbnail","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":64,"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":236,"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/pages\/18\/revisions\/236"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/media\/20"}],"wp:attachment":[{"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Kalleshwara Electronics | Hero + Brands (Fully Responsive)<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:opsz,wght@14..32,300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <style>\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: 'Inter', sans-serif;\r\n background: #ffffff;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* ========== HERO CAROUSEL \u2013 IMPROVED RESPONSIVE ========== *\/\r\n .hero {\r\n position: relative;\r\n width: 100%;\r\n overflow: hidden;\r\n background: #000;\r\n }\r\n .carousel-container {\r\n position: relative;\r\n width: 100%;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n .carousel-slides {\r\n display: flex;\r\n transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n will-change: transform;\r\n }\r\n .slide {\r\n min-width: 100%;\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n position: relative;\r\n }\r\n \/* Dynamic height based on viewport *\/\r\n .slide {\r\n height: 70vh;\r\n max-height: 650px;\r\n min-height: 320px;\r\n }\r\n\r\n \/* Carousel buttons \u2013 touch\u2011friendly, visible on all devices *\/\r\n .carousel-btn {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: rgba(0,0,0,0.55);\r\n backdrop-filter: blur(6px);\r\n border: none;\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 50%;\r\n font-size: 1.2rem;\r\n color: white;\r\n cursor: pointer;\r\n z-index: 20;\r\n transition: 0.2s;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n touch-action: manipulation;\r\n }\r\n .carousel-btn:hover {\r\n background: #D4A33D;\r\n color: #071633;\r\n }\r\n .prev-btn { left: 16px; }\r\n .next-btn { right: 16px; }\r\n\r\n \/* Dots \u2013 larger tap area *\/\r\n .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: 12px;\r\n z-index: 20;\r\n padding: 6px 12px;\r\n background: rgba(0,0,0,0.35);\r\n border-radius: 40px;\r\n backdrop-filter: blur(4px);\r\n }\r\n .dot {\r\n width: 10px;\r\n height: 10px;\r\n background: rgba(255,255,255,0.8);\r\n border-radius: 10px;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n touch-action: manipulation;\r\n }\r\n .dot.active {\r\n width: 26px;\r\n background: #D4A33D;\r\n }\r\n\r\n \/* ========== BRAND MARQUEE \u2013 SMOOTH INFINITE SCROLL ========== *\/\r\n .brands-section {\r\n background: #f8f9fc;\r\n padding: 30px 0;\r\n border-top: 1px solid rgba(0,0,0,0.05);\r\n border-bottom: 1px solid rgba(0,0,0,0.05);\r\n overflow: hidden;\r\n width: 100%;\r\n }\r\n .brands-container {\r\n width: 100%;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n overflow: visible;\r\n }\r\n .brand-track {\r\n display: flex;\r\n align-items: center;\r\n gap: 32px;\r\n animation: scrollBrands 28s linear infinite;\r\n width: max-content;\r\n will-change: transform;\r\n }\r\n .brand-item {\r\n flex: 0 0 auto;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 65px;\r\n padding: 0 8px;\r\n transition: transform 0.2s;\r\n }\r\n .brand-item img {\r\n max-height: 50px;\r\n max-width: 120px;\r\n width: auto;\r\n height: auto;\r\n object-fit: contain;\r\n opacity: 0.85;\r\n transition: all 0.2s ease;\r\n }\r\n .brand-item:hover img {\r\n opacity: 1;\r\n filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));\r\n transform: scale(1.03);\r\n }\r\n .brands-container:hover .brand-track {\r\n animation-play-state: paused;\r\n }\r\n\r\n @keyframes scrollBrands {\r\n 0% { transform: translateX(0); }\r\n 100% { transform: translateX(-50%); }\r\n }\r\n\r\n \/* ========== RESPONSIVE MEDIA QUERIES (Desktop + Mobile) ========== *\/\r\n @media (max-width: 900px) {\r\n .slide { height: 55vh; min-height: 380px; }\r\n .carousel-btn { width: 40px; height: 40px; font-size: 1rem; }\r\n .brands-section { padding: 25px 0; }\r\n .brand-item { height: 55px; }\r\n .brand-item img { max-height: 42px; max-width: 100px; }\r\n .brand-track { gap: 26px; }\r\n .dots { gap: 10px; bottom: 16px; }\r\n .dot.active { width: 24px; }\r\n }\r\n\r\n @media (max-width: 650px) {\r\n .slide { height: 45vh; min-height: 300px; }\r\n .carousel-btn { width: 36px; height: 36px; font-size: 0.9rem; }\r\n .prev-btn { left: 12px; }\r\n .next-btn { right: 12px; }\r\n .brands-section { padding: 20px 0; }\r\n .brand-item { height: 48px; }\r\n .brand-item img { max-height: 38px; max-width: 85px; }\r\n .brand-track { gap: 20px; }\r\n .dots { padding: 5px 10px; gap: 8px; }\r\n .dot { width: 8px; height: 8px; }\r\n .dot.active { width: 20px; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .slide { height: 40vh; min-height: 260px; }\r\n .carousel-btn { width: 32px; height: 32px; font-size: 0.8rem; }\r\n .brand-item { height: 42px; }\r\n .brand-item img { max-height: 32px; max-width: 70px; }\r\n .brand-track { gap: 16px; }\r\n }\r\n\r\n \/* Landscape orientation on phones *\/\r\n @media (max-width: 850px) and (orientation: landscape) {\r\n .slide { height: 90vh; min-height: 280px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<section class=\"hero\">\r\n <div class=\"carousel-container\">\r\n <div class=\"carousel-slides\" id=\"carouselSlides\">\r\n <div class=\"slide\" style=\"background-image: url('https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/for-website-3-rd-one-1.png');\"><\/div>\r\n <div class=\"slide\" style=\"background-image: url('https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/for-website-2-image-1.png');\"><\/div>\r\n <div class=\"slide\" style=\"background-image: url('https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/photo-too-add-in-the-website.png');\"><\/div>\r\n <div class=\"slide\" style=\"background-image: url('https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/for-website-4-one.png');\"><\/div>\r\n <\/div>\r\n <button class=\"carousel-btn prev-btn\" id=\"prevBtn\" aria-label=\"Previous\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\r\n <button class=\"carousel-btn next-btn\" id=\"nextBtn\" aria-label=\"Next\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\r\n <div class=\"dots\" id=\"dotsContainer\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"brands-section\">\r\n <div class=\"brands-container\">\r\n <div class=\"brand-track\" id=\"brandTrack\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n \/\/ ========== HERO CAROUSEL (touch + auto) ==========\r\n (function() {\r\n const slidesContainer = document.getElementById('carouselSlides');\r\n const slides = document.querySelectorAll('.slide');\r\n const prevBtn = document.getElementById('prevBtn');\r\n const nextBtn = document.getElementById('nextBtn');\r\n const dotsDiv = document.getElementById('dotsContainer');\r\n \r\n let currentIndex = 0;\r\n const totalSlides = slides.length;\r\n let autoInterval;\r\n\r\n function updateCarousel() {\r\n const offset = -currentIndex * 100;\r\n slidesContainer.style.transform = `translateX(${offset}%)`;\r\n const dots = document.querySelectorAll('.dot');\r\n dots.forEach((dot, idx) => {\r\n dot.classList.toggle('active', idx === currentIndex);\r\n });\r\n }\r\n\r\n function goToSlide(index) {\r\n if (index < 0) index = totalSlides - 1;\r\n if (index >= totalSlides) index = 0;\r\n currentIndex = index;\r\n updateCarousel();\r\n resetAutoPlay();\r\n }\r\n\r\n function nextSlide() { goToSlide(currentIndex + 1); }\r\n function prevSlide() { goToSlide(currentIndex - 1); }\r\n\r\n function startAutoPlay() {\r\n if (autoInterval) clearInterval(autoInterval);\r\n autoInterval = setInterval(() => nextSlide(), 5000);\r\n }\r\n function resetAutoPlay() {\r\n clearInterval(autoInterval);\r\n startAutoPlay();\r\n }\r\n\r\n function initDots() {\r\n dotsDiv.innerHTML = '';\r\n for (let i = 0; i < totalSlides; i++) {\r\n const dot = document.createElement('div');\r\n dot.classList.add('dot');\r\n if (i === currentIndex) dot.classList.add('active');\r\n dot.addEventListener('click', () => goToSlide(i));\r\n dotsDiv.appendChild(dot);\r\n }\r\n }\r\n\r\n const hero = document.querySelector('.hero');\r\n hero.addEventListener('mouseenter', () => clearInterval(autoInterval));\r\n hero.addEventListener('mouseleave', () => startAutoPlay());\r\n\r\n \/\/ Touch swipe for mobile\r\n let touchStart = 0;\r\n const container = document.querySelector('.carousel-container');\r\n container.addEventListener('touchstart', (e) => {\r\n touchStart = e.changedTouches[0].screenX;\r\n });\r\n container.addEventListener('touchend', (e) => {\r\n const diff = e.changedTouches[0].screenX - touchStart;\r\n if (Math.abs(diff) > 40) {\r\n diff > 0 ? prevSlide() : nextSlide();\r\n resetAutoPlay();\r\n }\r\n });\r\n\r\n prevBtn.addEventListener('click', () => { prevSlide(); resetAutoPlay(); });\r\n nextBtn.addEventListener('click', () => { nextSlide(); resetAutoPlay(); });\r\n\r\n initDots();\r\n startAutoPlay();\r\n updateCarousel();\r\n })();\r\n\r\n \/\/ ========== BRAND MARQUEE (duplicate for seamless loop) ==========\r\n (function() {\r\n const logoUrls = [\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/green-chef.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/samsung.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/lg.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/ifb.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/tcl.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/bajaj-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/prestige.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/preethi.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/voltas.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/lloyd.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/havells.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/haier.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/phx-png.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/daikin.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/vijayalakshmi.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/whirlpool.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/blue-star-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/daikin-1.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/godrej.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/bosch.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/vzy.png\"\r\n ];\r\n \/\/ remove exact duplicates\r\n const unique = [...new Map(logoUrls.map(url => [url, url])).values()];\r\n const track = document.getElementById('brandTrack');\r\n if (!track) return;\r\n \r\n function createLogo(src) {\r\n const div = document.createElement('div');\r\n div.className = 'brand-item';\r\n const img = document.createElement('img');\r\n img.src = src;\r\n img.alt = 'Brand';\r\n img.loading = 'lazy';\r\n img.onerror = () => { img.style.opacity = '0.4'; img.style.filter = 'grayscale(1)'; };\r\n div.appendChild(img);\r\n return div;\r\n }\r\n \r\n unique.forEach(url => track.appendChild(createLogo(url)));\r\n unique.forEach(url => track.appendChild(createLogo(url))); \/\/ duplicate for infinite scroll\r\n \r\n \/\/ dynamic speed based on item count (smoother on all devices)\r\n let speed = Math.min(42, Math.max(22, unique.length * 0.85));\r\n track.style.animationDuration = `${speed}s`;\r\n \r\n if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\r\n track.style.animation = 'none';\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-891024f e-con e-atomic-element e-flexbox-base e-e2934b3 \" data-id=\"891024f\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"891024f\">\n \t\t<div class=\"elementor-element elementor-element-f4acb27 elementor-widget elementor-widget-html\" data-id=\"f4acb27\" 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, user-scalable=yes\">\r\n <title>Havells Water Purifier | Call to Action<\/title>\r\n <style>\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 background: #ffffff;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 2rem;\r\n }\r\n\r\n \/* CTA Section \u2013 only image, animated *\/\r\n .cta-section {\r\n width: 100%;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n overflow: hidden;\r\n background: #ffffff;\r\n border-radius: 2rem;\r\n }\r\n\r\n .cta-image {\r\n width: 100%;\r\n display: block;\r\n animation: gentlePulse 3s ease-in-out infinite;\r\n transition: transform 0.3s ease, filter 0.3s ease;\r\n border-radius: 1.5rem;\r\n }\r\n\r\n \/* Subtle animation \u2013 smooth scale and shadow effect *\/\r\n @keyframes gentlePulse {\r\n 0% {\r\n transform: scale(1);\r\n filter: drop-shadow(0 10px 20px rgba(0,0,0,0.05));\r\n }\r\n 50% {\r\n transform: scale(1.01);\r\n filter: drop-shadow(0 15px 30px rgba(212, 163, 61, 0.15));\r\n }\r\n 100% {\r\n transform: scale(1);\r\n filter: drop-shadow(0 10px 20px rgba(0,0,0,0.05));\r\n }\r\n }\r\n\r\n \/* Hover effect - user interaction *\/\r\n .cta-image:hover {\r\n animation: none;\r\n transform: scale(1.02);\r\n filter: drop-shadow(0 20px 35px rgba(212, 163, 61, 0.25));\r\n transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);\r\n cursor: pointer;\r\n }\r\n\r\n \/* Responsive \u2013 ensure image covers nicely *\/\r\n @media (max-width: 768px) {\r\n body {\r\n padding: 1rem;\r\n }\r\n .cta-image {\r\n border-radius: 1rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"cta-section\">\r\n <img decoding=\"async\" class=\"cta-image\" \r\n src=\"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/havells-watter-purifier-corosal-image.png\" \r\n alt=\"Havells Water Purifier - Limited Time Offer\"\r\n loading=\"eager\">\r\n <\/div>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-76a00dc e-con e-atomic-element e-flexbox-base e-32d04f8 \" data-id=\"76a00dc\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"76a00dc\">\n \t\t<div class=\"elementor-element elementor-element-068b8ef elementor-widget elementor-widget-html\" data-id=\"068b8ef\" 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, user-scalable=yes\">\r\n <title>Home Appliances | Moving Carousel<\/title>\r\n <style>\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 background: #ffffff;\r\n font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 2rem 0;\r\n }\r\n\r\n \/* Carousel wrapper *\/\r\n .carousel-wrap {\r\n width: 100%;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n overflow: hidden;\r\n background: #fafbfc;\r\n padding: 2rem 0;\r\n border-radius: 2rem;\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.02);\r\n }\r\n\r\n \/* Infinite scroll container *\/\r\n .carousel-track {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n animation: scrollLeft 35s linear infinite;\r\n width: max-content;\r\n will-change: transform;\r\n }\r\n\r\n \/* Individual item *\/\r\n .carousel-item {\r\n flex: 0 0 auto;\r\n width: 180px;\r\n text-align: center;\r\n transition: transform 0.2s;\r\n }\r\n .carousel-item img {\r\n width: 100%;\r\n max-width: 150px;\r\n height: 150px;\r\n object-fit: contain;\r\n filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));\r\n transition: all 0.2s ease;\r\n background: white;\r\n border-radius: 1.5rem;\r\n padding: 0.8rem;\r\n }\r\n .carousel-item:hover {\r\n transform: scale(1.05);\r\n }\r\n .carousel-item:hover img {\r\n filter: drop-shadow(0 8px 12px rgba(0,0,0,0.1));\r\n }\r\n\r\n \/* Animation *\/\r\n @keyframes scrollLeft {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(-50%);\r\n }\r\n }\r\n\r\n \/* Pause on hover *\/\r\n .carousel-wrap:hover .carousel-track {\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 700px) {\r\n .carousel-item {\r\n width: 140px;\r\n }\r\n .carousel-item img {\r\n max-width: 110px;\r\n height: 110px;\r\n }\r\n .carousel-track {\r\n gap: 1.2rem;\r\n }\r\n }\r\n @media (max-width: 500px) {\r\n .carousel-item {\r\n width: 120px;\r\n }\r\n .carousel-item img {\r\n max-width: 90px;\r\n height: 90px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"carousel-wrap\">\r\n <div class=\"carousel-track\" id=\"applianceTrack\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ List of appliance images (provided by user)\r\n const applianceImages = [\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/hair-dryer.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/vaccum-cleaner-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/water-gyzer-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/fan-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/heater-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/cooler-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/ac-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/iron-box-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/water-purifer-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/microwave-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/induction-stove-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/fridge-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/washing-machine-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/tv.png\"\r\n ];\r\n\r\n \/\/ Build the carousel track \u2013 duplicate the set for seamless infinite loop\r\n const track = document.getElementById('applianceTrack');\r\n if (track) {\r\n \/\/ Helper to create a carousel item\r\n function createItem(imgSrc) {\r\n const div = document.createElement('div');\r\n div.className = 'carousel-item';\r\n const img = document.createElement('img');\r\n img.src = imgSrc;\r\n img.alt = 'Home Appliance';\r\n img.loading = 'lazy';\r\n \/\/ Optional: fallback if image fails to load\r\n img.onerror = () => {\r\n img.style.opacity = '0.5';\r\n img.style.filter = 'grayscale(1)';\r\n };\r\n div.appendChild(img);\r\n return div;\r\n }\r\n\r\n \/\/ Add all images once (original set)\r\n applianceImages.forEach(src => {\r\n track.appendChild(createItem(src));\r\n });\r\n \/\/ Duplicate the set for infinite scroll (so it loops seamlessly)\r\n applianceImages.forEach(src => {\r\n track.appendChild(createItem(src));\r\n });\r\n\r\n \/\/ Adjust animation speed based on number of items (smooth and natural)\r\n const totalItems = applianceImages.length;\r\n let duration = Math.max(20, totalItems * 1.2);\r\n duration = Math.min(duration, 45);\r\n track.style.animationDuration = `${duration}s`;\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-336ee75 e-con e-atomic-element e-flexbox-base e-336ee75-4da831a \" data-id=\"336ee75\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"336ee75\">\n \t\t<div class=\"elementor-element elementor-element-b0ba5ec elementor-widget elementor-widget-html\" data-id=\"b0ba5ec\" 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, user-scalable=yes\">\r\n <title>Call to Action | Water Geyser Offer<\/title>\r\n <style>\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 background: #ffffff;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 1.5rem;\r\n }\r\n\r\n \/* CTA Container \u2013 fully responsive, centered *\/\r\n .cta-wrapper {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n }\r\n\r\n \/* Animated button \u2013 pure image *\/\r\n .cta-button {\r\n display: inline-block;\r\n cursor: pointer;\r\n background: transparent;\r\n border: none;\r\n padding: 0;\r\n margin: 0;\r\n line-height: 0;\r\n max-width: 100%;\r\n width: auto;\r\n transition: transform 0.2s ease;\r\n animation: gentlePulse 2.5s ease-in-out infinite;\r\n }\r\n\r\n .cta-button img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n border-radius: 1.5rem;\r\n filter: drop-shadow(0 12px 20px rgba(0,0,0,0.1));\r\n transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);\r\n }\r\n\r\n \/* Desktop: image size limited, but responsive *\/\r\n @media (min-width: 1024px) {\r\n .cta-button img {\r\n max-width: 550px;\r\n }\r\n }\r\n\r\n \/* Tablet \/ small desktop *\/\r\n @media (max-width: 1023px) and (min-width: 768px) {\r\n .cta-button img {\r\n max-width: 450px;\r\n }\r\n }\r\n\r\n \/* Mobile *\/\r\n @media (max-width: 767px) {\r\n .cta-button img {\r\n max-width: 320px;\r\n }\r\n body {\r\n padding: 1rem;\r\n }\r\n }\r\n\r\n \/* Extra small devices *\/\r\n @media (max-width: 480px) {\r\n .cta-button img {\r\n max-width: 280px;\r\n }\r\n }\r\n\r\n \/* Hover effect \u2013 stops pulse and scales slightly *\/\r\n .cta-button:hover {\r\n animation: none;\r\n transform: scale(1.02);\r\n }\r\n .cta-button:hover img {\r\n filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));\r\n }\r\n\r\n \/* Pulse animation with golden glow *\/\r\n @keyframes gentlePulse {\r\n 0% {\r\n transform: scale(1);\r\n filter: drop-shadow(0 8px 15px rgba(0,0,0,0.08));\r\n }\r\n 50% {\r\n transform: scale(1.02);\r\n filter: drop-shadow(0 15px 25px rgba(212, 163, 61, 0.4));\r\n }\r\n 100% {\r\n transform: scale(1);\r\n filter: drop-shadow(0 8px 15px rgba(0,0,0,0.08));\r\n }\r\n }\r\n\r\n \/* Accessibility: focus outline *\/\r\n .cta-button:focus-visible {\r\n outline: 2px solid #D4A33D;\r\n outline-offset: 4px;\r\n border-radius: 1.5rem;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"cta-wrapper\">\r\n <button class=\"cta-button\" id=\"ctaBtn\" aria-label=\"Exclusive water geyser offer \u2013 click to shop\">\r\n <img decoding=\"async\" src=\"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/water-geyser-for-corosal-.png\" \r\n alt=\"Water Geyser - Limited Time Offer\" \r\n loading=\"eager\">\r\n <\/button>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Interactive CTA \u2013 redirect to offers page (replace with actual URL)\r\n const cta = document.getElementById('ctaBtn');\r\n if (cta) {\r\n cta.addEventListener('click', () => {\r\n \/\/ Uncomment the line below to redirect to actual offer page\r\n \/\/ window.location.href = \"https:\/\/kalleshwaraelectronics.com\/offers\/water-geyser-deal\/\";\r\n \r\n \/\/ Fallback alert for demonstration (remove in production if redirect is used)\r\n alert(\"\ud83d\udd25 Special water geyser offer! Visit our store or call 082632 00208 for festive discounts.\");\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-522a5d2 e-con e-atomic-element e-flexbox-base e-fa6c0c6 \" data-id=\"522a5d2\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"522a5d2\">\n \t\t<div class=\"elementor-element elementor-element-0825945 elementor-widget elementor-widget-html\" data-id=\"0825945\" 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, user-scalable=yes\">\r\n <title>Home Appliances | Moving Carousel<\/title>\r\n <style>\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 background: #ffffff;\r\n font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 2rem 0;\r\n }\r\n\r\n \/* Carousel wrapper *\/\r\n .carousel-wrap {\r\n width: 100%;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n overflow: hidden;\r\n background: #fafbfc;\r\n padding: 2rem 0;\r\n border-radius: 2rem;\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.02);\r\n }\r\n\r\n \/* Infinite scroll container *\/\r\n .carousel-track {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n animation: scrollLeft 35s linear infinite;\r\n width: max-content;\r\n will-change: transform;\r\n }\r\n\r\n \/* Individual item *\/\r\n .carousel-item {\r\n flex: 0 0 auto;\r\n width: 180px;\r\n text-align: center;\r\n transition: transform 0.2s;\r\n }\r\n .carousel-item img {\r\n width: 100%;\r\n max-width: 150px;\r\n height: 150px;\r\n object-fit: contain;\r\n filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));\r\n transition: all 0.2s ease;\r\n background: white;\r\n border-radius: 1.5rem;\r\n padding: 0.8rem;\r\n }\r\n .carousel-item:hover {\r\n transform: scale(1.05);\r\n }\r\n .carousel-item:hover img {\r\n filter: drop-shadow(0 8px 12px rgba(0,0,0,0.1));\r\n }\r\n\r\n \/* Animation *\/\r\n @keyframes scrollLeft {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(-50%);\r\n }\r\n }\r\n\r\n \/* Pause on hover *\/\r\n .carousel-wrap:hover .carousel-track {\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 700px) {\r\n .carousel-item {\r\n width: 140px;\r\n }\r\n .carousel-item img {\r\n max-width: 110px;\r\n height: 110px;\r\n }\r\n .carousel-track {\r\n gap: 1.2rem;\r\n }\r\n }\r\n @media (max-width: 500px) {\r\n .carousel-item {\r\n width: 120px;\r\n }\r\n .carousel-item img {\r\n max-width: 90px;\r\n height: 90px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"carousel-wrap\">\r\n <div class=\"carousel-track\" id=\"applianceTrack\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ List of appliance images (provided by user)\r\n const applianceImages = [\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/hair-dryer.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/vaccum-cleaner-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/water-gyzer-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/fan-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/heater-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/cooler-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/ac-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/iron-box-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/water-purifer-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/microwave-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/induction-stove-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/fridge-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/washing-machine-.png\",\r\n \"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/tv.png\"\r\n ];\r\n\r\n \/\/ Build the carousel track \u2013 duplicate the set for seamless infinite loop\r\n const track = document.getElementById('applianceTrack');\r\n if (track) {\r\n \/\/ Helper to create a carousel item\r\n function createItem(imgSrc) {\r\n const div = document.createElement('div');\r\n div.className = 'carousel-item';\r\n const img = document.createElement('img');\r\n img.src = imgSrc;\r\n img.alt = 'Home Appliance';\r\n img.loading = 'lazy';\r\n \/\/ Optional: fallback if image fails to load\r\n img.onerror = () => {\r\n img.style.opacity = '0.5';\r\n img.style.filter = 'grayscale(1)';\r\n };\r\n div.appendChild(img);\r\n return div;\r\n }\r\n\r\n \/\/ Add all images once (original set)\r\n applianceImages.forEach(src => {\r\n track.appendChild(createItem(src));\r\n });\r\n \/\/ Duplicate the set for infinite scroll (so it loops seamlessly)\r\n applianceImages.forEach(src => {\r\n track.appendChild(createItem(src));\r\n });\r\n\r\n \/\/ Adjust animation speed based on number of items (smooth and natural)\r\n const totalItems = applianceImages.length;\r\n let duration = Math.max(20, totalItems * 1.2);\r\n duration = Math.min(duration, 45);\r\n track.style.animationDuration = `${duration}s`;\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-dc4ed3b e-con e-atomic-element e-flexbox-base e-f13d981 \" data-id=\"dc4ed3b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"dc4ed3b\">\n \t\t<div class=\"elementor-element elementor-element-8f0b18a hfe-content-align-left elementor-widget elementor-widget-hfe-woo-product-grid\" data-id=\"8f0b18a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"columns":"5","columns_tablet":"3","columns_mobile":"1","content_alignment":"left"}\" data-widget_type=\"hfe-woo-product-grid.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"hfe-woo-products-wrapper\">\n\t\t\t<div class=\"hfe-woo-products-grid\">\n\t\t\t\t\t\t<div class=\"hfe-product-item\">\n\t\t\t\t\t\t\t<div class=\"hfe-product-image\">\n\t\t\t\t\t<a href=\"https:\/\/kalleshwaraelectronics.com\/kn\/product\/haier-165l-1-star-marine-elegance-floral-finish-direct-cool-single-door-refrigerator\/\">\n\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"222\" height=\"300\" src=\"https:\/\/kalleshwaraelectronics.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-08-at-18.37.51-1-222x300.jpeg\" class=\"attachment-woocommerce_thumbnail size-woocommerce_thumbnail\" alt=\"Haier 165L 1 Star Marine Elegance Floral Finish Direct Cool Single Door Refrigerator\" \/>\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"hfe-product-content\">\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-product-category\">\n\t\t\t\t\t\tFridge, Haier\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-product-title\">\n\t\t\t\t\t\t<a href=\"https:\/\/kalleshwaraelectronics.com\/kn\/product\/haier-165l-1-star-marine-elegance-floral-finish-direct-cool-single-door-refrigerator\/\" class=\"hfe-loop-product__link\">\n\t\t\t\t\t\t\t<h2 class=\"woocommerce-loop-product__title\">Haier 165L 1 Star Marine Elegance Floral Finish Direct Cool Single Door Refrigerator<\/h2>\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-product-rating\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-product-price\">\n\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"hfe-product-add-to-cart\">\n\t\t\t\t\t\t<a href=\"https:\/\/kalleshwaraelectronics.com\/kn\/product\/haier-165l-1-star-marine-elegance-floral-finish-direct-cool-single-door-refrigerator\/\" aria-describedby=\"woocommerce_loop_add_to_cart_link_describedby_237\" data-quantity=\"1\" class=\"button product_type_variable\" data-product_id=\"237\" data-product_sku=\"HRD-1851SMEA-P\" aria-label=\"Select options for “Haier 165L 1 Star Marine Elegance Floral Finish Direct Cool Single Door Refrigerator”\" rel=\"nofollow\">Read more<\/a>\t<span id=\"woocommerce_loop_add_to_cart_link_describedby_237\" class=\"screen-reader-text\">\n\t\t\t<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p> […]<\/p>\n","protected":false},"author":1,"featured_media":20,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-18","page","type-page","status-publish","has-post-thumbnail","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":64,"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":236,"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/pages\/18\/revisions\/236"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/media\/20"}],"wp:attachment":[{"href":"https:\/\/kalleshwaraelectronics.com\/kn\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}