/* Add custom CSS styles below */ 
<div class="container">
<div class="s-block__title relative">
<div class="right-side">
<h2 class="last:mb-4  ">اخترنا لك</h2> </div>
</div>
<div class="relative dot-banner-image-wrapper before-hover bg-gray-100 dark:bg-white/10 rounded">
<img width="100%" class="lazy banner-image rounded loaded" src="https://cdn.salla.sa/form-builder/kMpa3V5XVGu3L1v635CbJI1BVk8hMUzrCf89exbH.jpg" data-src="https://cdn.salla.sa/form-builder/kMpa3V5XVGu3L1v635CbJI1BVk8hMUzrCf89exbH.jpg" alt="" loading="lazy" data-ll-status="loaded">
<div data-productid="2043270130" class="banner-dot banner-dot--elem absolute" style="top: 62%; right: 40%">
<div class="dot-btn rounded-full">
<svg class="z-30 rounded-full" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
</svg>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
</div>
<div class="banner-dot-popover group 
                    popover--top 
                    popover--h-center">
<div role="status" class="place-holder gap-2.5 animate-pulse flex flex-col md:flex-row items-center">
<div class="flex items-center justify-center w-full h-16 bg-gray-300 rounded sm:w-24 dark:bg-gray-700">
<svg class="w-8 h-10 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
<path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"></path>
</svg>
</div>
<div class="w-full flex flex-col items-center md:items-start">
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-20 md:w-28 mb-2.5"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-16 md:w-20 mb-2.5"></div>
</div>
<span class="sr-only">Loading...</span>
</div> <i class="link-icon sicon-keyboard_arrow_left"></i>
</div>
</div>
<div data-productid="1986332240" class="banner-dot banner-dot--elem absolute loaded" style="top: 55%; right: 46%" data-loaded="true">
<div class="dot-btn rounded-full">
<svg class="z-30 rounded-full" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
</svg>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
</div>
<div class="banner-dot-popover group 
                    popover--top 
                    popover--h-center">
                    <a href="https://alkhudiroud.com/ar/ورد-طائفي-فاخر/p1986332240" class="dot-link">
                        <img src="https://cdn.salla.sa/dZoKj/1zUfVzfgxnfutHLOnPZZyXGQVEHjJzC8YCmAU423.png" alt="ورد طائفي فاخر" class="dot-img" width="75">
                        <div class="flex flex-col justify-center">
                            <p class="dot-title">ورد طائفي فاخر</p>
                            <div class="price-wrapper">
                                <h2 class="font-bold text-2xl normal-price sale-price">402.5 ر.س</h2>
                            </div>
                        </div>
                        <i class="link-icon sicon-keyboard_arrow_left"></i>
                    </a>
                    </div>
</div>
<div data-productid="130114546" class="banner-dot banner-dot--elem absolute" style="top: 45%; right: 77%">
<div class="dot-btn rounded-full">
<svg class="z-30 rounded-full" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
</svg>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
</div>
<div class="banner-dot-popover group 
                    popover--top 
                    popover--h-center">
<div role="status" class="place-holder gap-2.5 animate-pulse flex flex-col md:flex-row items-center">
<div class="flex items-center justify-center w-full h-16 bg-gray-300 rounded sm:w-24 dark:bg-gray-700">
<svg class="w-8 h-10 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
<path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"></path>
</svg>
</div>
<div class="w-full flex flex-col items-center md:items-start">
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-20 md:w-28 mb-2.5"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-16 md:w-20 mb-2.5"></div>
</div>
<span class="sr-only">Loading...</span>
</div> <i class="link-icon sicon-keyboard_arrow_left"></i>
</div>
</div>
<div data-productid="2061159283" class="banner-dot banner-dot--elem absolute loaded" style="top: 56%; right: 49%" data-loaded="true">
<div class="dot-btn rounded-full">
<svg class="z-30 rounded-full" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
</svg>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
</div>
<div class="banner-dot-popover group 
                    popover--top 
                    popover--h-center">
                    <a href="https://alkhudiroud.com/ar/مخلط-الشيخ-عبدالكريم-الخضير/p2061159283" class="dot-link">
                        <img src="https://cdn.salla.sa/dZoKj/wA2GB2im2ONot07litya28ph1LFVisuMI4do7YVG.jpg" alt="مخلط الشيخ عبدالكريم الخضير" class="dot-img" width="75">
                        <div class="flex flex-col justify-center">
                            <p class="dot-title">مخلط الشيخ عبدالكريم الخضير</p>
                            <div class="price-wrapper">
                                <div class="product-entry__price flex items-center justify-center md:justify-start gap-2.5 whitespace-nowrap">
                                    <h2 class="sale-price">293.25 ر.س</h2>
                                    <span class="regular-price regular-price">575 ر.س</span>
                                </div>
                            </div>
                        </div>
                        <i class="link-icon sicon-keyboard_arrow_left"></i>
                    </a>
                    </div>
</div>
<div data-productid="408367445" class="banner-dot banner-dot--elem absolute loaded" style="top: 45%; right: 43%" data-loaded="true">
<div class="dot-btn rounded-full">
<svg class="z-30 rounded-full" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
</svg>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
</div>
<div class="banner-dot-popover group 
                    popover--top 
                    popover--h-center">
                    <a href="https://alkhudiroud.com/ar/كمبودي-ملكي-قديم-معتق/p408367445" class="dot-link">
                        <img src="https://cdn.salla.sa/dZoKj/v25rsLkhR0CCqvhqiF1BEjEBL5kNnylMS9JTt5yU.png" alt="كمبودي ملكي قديم معتق" class="dot-img" width="75">
                        <div class="flex flex-col justify-center">
                            <p class="dot-title">كمبودي ملكي قديم معتق</p>
                            <div class="price-wrapper">
                                <div class="product-entry__price flex items-center justify-center md:justify-start gap-2.5 whitespace-nowrap">
                                    <h2 class="sale-price">235.3 ر.س</h2>
                                    <span class="regular-price regular-price">494.5 ر.س</span>
                                </div>
                            </div>
                        </div>
                        <i class="link-icon sicon-keyboard_arrow_left"></i>
                    </a>
                    </div>
</div>
<div data-productid="1872084372" class="banner-dot banner-dot--elem absolute loaded" style="top: 50%; right: 17%" data-loaded="true">
<div class="dot-btn rounded-full">
<svg class="z-30 rounded-full" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
</svg>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
</div>
<div class="banner-dot-popover group 
                    popover--top 
                    popover--left">
                    <a href="https://alkhudiroud.com/ar/هندي-ملكي/p1872084372" class="dot-link">
                        <img src="https://cdn.salla.sa/dZoKj/fN8gEv3c0w3H03vMyxjnTcB4NPr51vuxu61jNEcR.png" alt="هندي ملكي" class="dot-img" width="75">
                        <div class="flex flex-col justify-center">
                            <p class="dot-title">هندي ملكي</p>
                            <div class="price-wrapper">
                                <div class="product-entry__price flex items-center justify-center md:justify-start gap-2.5 whitespace-nowrap">
                                    <h2 class="sale-price">441.19 ر.س</h2>
                                    <span class="regular-price regular-price">833.75 ر.س</span>
                                </div>
                            </div>
                        </div>
                        <i class="link-icon sicon-keyboard_arrow_left"></i>
                    </a>
                    </div>
</div>
<div data-productid="629834458" class="banner-dot banner-dot--elem absolute loaded" style="top: 76%; right: 56%" data-loaded="true">
<div class="dot-btn rounded-full">
<svg class="z-30 rounded-full" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
</svg>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
</div>
<div class="banner-dot-popover group 
                    popover--top 
                    popover--h-center">
                    <a href="https://alkhudiroud.com/ar/هندي-نوادر/p629834458" class="dot-link">
                        <img src="https://cdn.salla.sa/dZoKj/gIAVNilPX22YM8MOb65is3G9mLXx6xOe9GyNNPya.png" alt="هندي نوادر" class="dot-img" width="75">
                        <div class="flex flex-col justify-center">
                            <p class="dot-title">هندي نوادر</p>
                            <div class="price-wrapper">
                                <h2 class="font-bold text-2xl normal-price sale-price">2587.5 ر.س</h2>
                            </div>
                        </div>
                        <i class="link-icon sicon-keyboard_arrow_left"></i>
                    </a>
                    </div>
</div>
<div data-productid="407499179" class="banner-dot banner-dot--elem absolute" style="top: 88%; right: 88%">
<div class="dot-btn rounded-full">
<svg class="z-30 rounded-full" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
</svg>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
</div>
<div class="banner-dot-popover group 
                    popover--top 
                    popover--h-center">
<div role="status" class="place-holder gap-2.5 animate-pulse flex flex-col md:flex-row items-center">
<div class="flex items-center justify-center w-full h-16 bg-gray-300 rounded sm:w-24 dark:bg-gray-700">
<svg class="w-8 h-10 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
<path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"></path>
</svg>
</div>
<div class="w-full flex flex-col items-center md:items-start">
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-20 md:w-28 mb-2.5"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-16 md:w-20 mb-2.5"></div>
</div>
<span class="sr-only">Loading...</span>
</div> <i class="link-icon sicon-keyboard_arrow_left"></i>
</div>
</div>
<div data-productid="2029830800" class="banner-dot banner-dot--elem absolute loaded" style="top: 28%; right: 40%" data-loaded="true">
<div class="dot-btn rounded-full">
<svg class="z-30 rounded-full" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
</svg>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
<span class="ripple rounded-full border-white border-2 bg-white"></span>
</div>
<div class="banner-dot-popover group 
                    popover--top 
                    popover--h-center">
                    <a href="https://alkhudiroud.com/ar/لافندر/p2029830800" class="dot-link">
                        <img src="https://cdn.salla.sa/dZoKj/6X3lWmjQRkzNhYjx9axnsTDU4fVmykJXr7P4aR0K.png" alt="لافندر" class="dot-img" width="75">
                        <div class="flex flex-col justify-center">
                            <p class="dot-title">لافندر</p>
                            <div class="price-wrapper">
                                <div class="product-entry__price flex items-center justify-center md:justify-start gap-2.5 whitespace-nowrap">
                                    <h2 class="sale-price">65 ر.س</h2>
                                    <span class="regular-price regular-price">230 ر.س</span>
                                </div>
                            </div>
                        </div>
                        <i class="link-icon sicon-keyboard_arrow_left"></i>
                    </a>
                    </div>
</div>
<div class="image-indecator absolute left-1/2 -translate-x-1/2 bottom-6 opacity-0 scale-90 translate-y-3 group-hover:translate-y-0 group-hover:scale-100 group-hover:opacity-100 transition-all duration-300 ease-elastic flex gap-2.5 py-2 px-5 bg-[#fff2b2] text-[#7c620c] rounded pointer-events-none text-sm text-center">
<span class="indecator-values hidden">
<span>الموقع الحالي، من الأعلى: <strong class="from-top"></strong>%</span>
<span>من اليمين: <strong class="from-right"></strong>%</span>
</span>
<span class="initi-message">مرر المؤشر على الصورة لتحديد مكان المنتج على الصورة</span>
</div>
</div>
</div>