{"id":215638,"date":"2020-12-07T02:40:00","date_gmt":"2020-12-06T23:40:00","guid":{"rendered":"https:\/\/dokansa.com\/home\/"},"modified":"2026-04-16T22:00:47","modified_gmt":"2026-04-16T19:00:47","slug":"home","status":"publish","type":"page","link":"https:\/\/dokansa.com\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\n<!-- HTML Block \u0648\u0627\u062d\u062f: \u0642\u0633\u0645 \u0627\u0644\u0634\u0631\u0627\u0626\u062d + \u0643\u0631\u0648\u062a \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a --><style>* {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* ==================== \u0642\u0633\u0645 \u0627\u0644\u0634\u0631\u0627\u0626\u062d ==================== *\/\r\n  .hero-section {\r\n    position: relative;\r\n    top:-10px;\r\n    overflow: hidden;\r\n    width: 100%;\r\n    margin-bottom: 80px;\r\n    box-shadow: 0 0 6px #0000003d;\r\n    border-radius: 15px;\r\n    direction: ltr; \/* \u0625\u062c\u0628\u0627\u0631 \u0627\u0644\u0633\u0644\u0627\u064a\u062f\u0631 \u0639\u0644\u0649 \u0627\u062a\u062c\u0627\u0647 LTR *\/\r\n  }\r\n\r\n  .slides-container {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    transition: transform 0.5s ease-in-out;\r\n  }\r\n\r\n  .slide {\r\n    min-width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding: 0 8%;\r\n    direction: rtl; \/* \u0625\u0639\u0627\u062f\u0629 RTL \u0644\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062f\u0627\u062e\u0644\u064a *\/\r\n  }\r\n\r\n  .slide-content {\r\n    flex: 1;\r\n    max-width: 550px;\r\n    z-index: 2;\r\n    padding-left: 50px;\r\n    text-align:left;\r\n  }\r\n\r\n  .slide-content h1 {\r\n    font-size: 2.5rem;\r\n    color: #2d1810;\r\n    margin-bottom: 15px;\r\n    font-weight: 900;\r\n    line-height: 1.1;\r\n    letter-spacing: -1px;\r\n  }\r\n\r\n  .title-decoration {\r\n    display: flex;\r\n    gap: 8px;\r\n    margin-bottom: 20px;\r\n    align-items: center;\r\n  }\r\n\r\n  .title-decoration .line {\r\n    height: 4px;\r\n    border-radius: 2px;\r\n  }\r\n\r\n  .title-decoration .line-1 {\r\n    width: 60px;\r\n    background: #ff6b35;\r\n  }\r\n\r\n  .title-decoration .line-2 {\r\n    width: 40px;\r\n    background: #4ecdc4;\r\n  }\r\n\r\n  .title-decoration .line-3 {\r\n    width: 20px;\r\n    background: #ffe66d;\r\n  }\r\n\r\n  .badge {\r\n    display: inline-block;\r\n    padding: 8px 20px;\r\n    border-radius: 25px;\r\n    font-size: 0.85rem;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    margin: 0 5px 15px 0;\r\n    color: white;\r\n  }\r\n\r\n  .badge-green {\r\n    background: #52b788;\r\n  }\r\n\r\n  .badge-orange {\r\n    background: #fb8500;\r\n  }\r\n\r\n  .slide-content p {\r\n    font-size: 1.15rem;\r\n    color: #4a4a4a;\r\n    line-height: 1.7;\r\n    margin-bottom: 30px;\r\n    max-width: 500px;\r\n  }\r\n\r\n  .slide-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    padding: 15px 30px;\r\n    background: #ffed4e;\r\n    color: #2d1810;\r\n    text-decoration: none;\r\n    border-radius: 50px;\r\n    font-weight: 700;\r\n    font-size: 1rem;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 4px 15px rgba(255, 237, 78, 0.4);\r\n    border: 2px solid #2d1810;\r\n  }\r\n\r\n  .slide-btn::before {\r\n    content: '\u2192';\r\n    font-size: 1.2rem;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .slide-image {\r\n    flex: 1;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    z-index: 1;\r\n    position: relative;\r\n  }\r\n\r\n  .slide-image img {\r\n    max-width: 500px;\r\n    width: 100%;\r\n    height: auto;\r\n    border-radius: 20px;\r\n  }\r\n\r\n  \/* \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u062a\u0646\u0642\u0644 *\/\r\n  .slider-nav {\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    z-index: 10;\r\n    background: rgba(255, 255, 255, 0.9);\r\n    border: 2px solid #2d1810;\r\n    width: 50px;\r\n    height: 50px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    font-size: 1.5rem;\r\n    color: #2d1810;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .slider-nav:hover {\r\n    background: #ffed4e;\r\n    transform: translateY(-50%) scale(1.1);\r\n  }\r\n\r\n  .slider-nav.prev {\r\n    right: 20px; \/* \u0639\u0643\u0633 \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0644\u0644\u0639\u0631\u0628\u064a\u0629 *\/\r\n  }\r\n\r\n  .slider-nav.next {\r\n    left: 20px; \/* \u0639\u0643\u0633 \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0644\u0644\u0639\u0631\u0628\u064a\u0629 *\/\r\n  }\r\n\r\n  .slide-indicators {\r\n    position: absolute;\r\n    bottom: 30px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    display: flex;\r\n    gap: 10px;\r\n    z-index: 10;\r\n  }\r\n\r\n  .indicator {\r\n    width: 12px;\r\n    height: 12px;\r\n    border-radius: 50%;\r\n    background: rgba(45, 24, 16, 0.3);\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .indicator.active {\r\n    background: #2d1810;\r\n    width: 35px;\r\n    border-radius: 6px;\r\n  }\r\n\r\n  .slide-1 {\r\n    background: #ffc34a;\r\n  }\r\n\r\n  .slide-2 {\r\n    background: #eaffc2;\r\n  }\r\n\r\n  .slide-3 {\r\n    background: #fff9e3;\r\n  }\r\n\r\n @media (min-width: 1025px) and (max-width: 1280px){\r\n  .hero-section {\r\n    height: 400px;\r\n  }\r\n\r\n  .slide {\r\n    padding: 0 5%;\r\n  }\r\n\r\n  .slide-content {\r\n    padding-left: 30px;\r\n  }\r\n\r\n  .slide-content h1 {\r\n    font-size: 2rem;\r\n  }\r\n\r\n\r\n  .slide-content p {\r\n    font-size: 1rem;\r\n  }\r\n\r\n  .slide-btn {\r\n    padding: 14px 30px;\r\n    font-size: 0.95rem;\r\n  }\r\n\r\n  .slide-image img {\r\n    max-width: 400px;\r\n    position:relative;\r\n    top:10px;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .slider-nav {\r\n    width: 45px;\r\n    height: 45px;\r\n    font-size: 1.3rem;\r\n  }\r\n\r\n  .slider-nav.prev {\r\n    right: 15px;\r\n  }\r\n\r\n  .slider-nav.next {\r\n    left: 15px;\r\n  }\r\n\r\n  .categories-grid {\r\n    grid-template-columns: repeat(2, 1fr);\r\n  }\r\n\r\n  .categories-header h2 {\r\n    font-size: 2.2rem;\r\n  }\r\n}\r\n\r\n@media (max-width: 1024px){\r\n .hero-section {\r\n    height: 400px;\r\n  }\r\n\r\n  .slide {\r\n    padding: 0 5%;\r\n  }\r\n\r\n  .slide-content {\r\n    padding-left: 30px;\r\n  }\r\n\r\n  .slide-content h1 {\r\n    font-size: 2rem;\r\n  }\r\n\r\n\r\n  .slide-content p {\r\n    font-size: 1rem;\r\n  }\r\n\r\n  .slide-btn {\r\n    padding: 14px 30px;\r\n    font-size: 0.95rem;\r\n  }\r\n\r\n  .slide-image img {\r\n    max-width: 400px;\r\n    position:relative;\r\n    top:10px;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .slider-nav {\r\n    width: 45px;\r\n    height: 45px;\r\n    font-size: 1.3rem;\r\n  }\r\n\r\n  .slider-nav.prev {\r\n    right: 15px;\r\n  }\r\n\r\n  .slider-nav.next {\r\n    left: 15px;\r\n  }\r\n\r\n  .categories-grid {\r\n    grid-template-columns: repeat(2, 1fr);\r\n  }\r\n\r\n  .categories-header h2 {\r\n    font-size: 2.2rem;\r\n  }\r\n}\r\n \r\n\r\n\/* ==================== \u0627\u0644\u0647\u0648\u0627\u062a\u0641 (\u0623\u0642\u0644 \u0645\u0646 768px) ==================== *\/\r\n@media (max-width: 767px) {\r\n  .hero-section {\r\n    height: 70vh;\r\n    top:-20px;\r\n  }\r\n\r\n  .slide {\r\n    flex-direction: column;\r\n    justify-content: center;\r\n  }\r\n\r\n  .slide-content {\r\n    padding-left: 0;\r\n    text-align: center;\r\n  }\r\n\r\n  .slide-content h1 {\r\n    font-size: 1.3rem;\r\n  }\r\n\r\n  .slide-content p {\r\n    font-size: 0.7rem;\r\n  }\r\n\r\n  .badge{\r\n   font-size:0.60rem;\r\n  }\r\n\r\n  .slide-btn {\r\n    padding: 6px 15px;\r\n    margin-bottom: 20px;\r\n    font-size:0.8rem;\r\n  }\r\n\r\n  .title-decoration {\r\n    justify-content: center;\r\n  }\r\n\r\n  .indicator {\r\n    display: none;\r\n  }\r\n\r\n  .slide-image img {\r\n    max-width: 210px;\r\n    position:relative;\r\n    top:10px;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .slider-nav {\r\n    \/*width: 40px;\r\n    height: 40px;\r\n    font-size: 1.2rem;\r\n    top:60%;*\/\r\n    display:none;\r\n  }\r\n\r\n  .slider-nav.prev {\r\n    right: 10px;\r\n  }\r\n\r\n  .slider-nav.next {\r\n    left: 10px;\r\n  }\r\n\r\n  .categories-grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .categories-header h2 {\r\n    font-size: 2rem;\r\n  }\r\n}\r\n\r\n<\/style><!-- \u0642\u0633\u0645 \u0627\u0644\u0634\u0631\u0627\u0626\u062d --><section class=\"hero-section\">\r\n  <div class=\"slides-container\">\r\n    \r\n    <!-- First Slide -->\r\n    <div class=\"slide slide-1\">\r\n      <div class=\"slide-image\">\r\n        <img decoding=\"async\" src=\"https:\/\/dokansa.com\/wp-content\/uploads\/2025\/10\/first-hero-image-slide1.webp\" alt=\"pets\"\/>\r\n      <\/div>\r\n      <div class=\"slide-content\">\r\n        <div>\r\n          <span class=\"badge badge-green\">Food<\/span>\r\n          <span class=\"badge badge-orange\">Treats<\/span>\r\n        <\/div>\r\n        <h1>Choose The Best Natural Pet Food<\/h1>\r\n        <div class=\"title-decoration\">\r\n          <div class=\"line line-1\"><\/div>\r\n          <div class=\"line line-2\"><\/div>\r\n          <div class=\"line line-3\"><\/div>\r\n        <\/div>\r\n        <p>\r\n          Premium pet food made from natural ingredients. We are fully committed to providing more of what your pet loves!\r\n        <\/p>\r\n        Shop Now\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Second Slide -->\r\n    <div class=\"slide slide-2\">\r\n      <div class=\"slide-image\">\r\n        <img decoding=\"async\" src=\"https:\/\/dokansa.com\/wp-content\/uploads\/2025\/10\/hero-image-slide2.webp\" alt=\"Pet Health\"\/>\r\n      <\/div>\r\n      <div class=\"slide-content\">\r\n        <div>\r\n          <span class=\"badge badge-green\">Healthy<\/span>\r\n          <span class=\"badge badge-orange\">Easy to Use<\/span>\r\n        <\/div>\r\n        <h1>Take care of your pet&#8217;s health<\/h1>\r\n        <div class=\"title-decoration\">\r\n          <div class=\"line line-1\"><\/div>\r\n          <div class=\"line line-2\"><\/div>\r\n          <div class=\"line line-3\"><\/div>\r\n        <\/div>\r\n        <p>\r\n          We provide certified medical and therapeutic products that ensure your pet&#8217;s comfort and safety. Because their health is our priority, we always offer the best!\r\n        <\/p>\r\n        Shop Medicine\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Third Slide -->\r\n    <div class=\"slide slide-3\">\r\n      <div class=\"slide-image\">\r\n        <img decoding=\"async\" src=\"https:\/\/dokansa.com\/wp-content\/uploads\/2025\/10\/hero-image-slide3.webp\" alt=\"Pet Accessories\"\/>\r\n      <\/div>\r\n      <div class=\"slide-content\">\r\n        <div>\r\n          <span class=\"badge badge-green\">Accessories<\/span>\r\n          <span class=\"badge badge-orange\">Rewards<\/span>\r\n        <\/div>\r\n        <h1>Accessories &#038; Treats For Happy Pets<\/h1>\r\n        <div class=\"title-decoration\">\r\n          <div class=\"line line-1\"><\/div>\r\n          <div class=\"line line-2\"><\/div>\r\n          <div class=\"line line-3\"><\/div>\r\n        <\/div>\r\n        <p>\r\n          From stylish collars to comfortable beds and the most delicious treats, we have everything that makes your pet happier and more comfortable!\r\n        <\/p>\r\n        Shop &#038; Play\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Navigation buttons -->\r\n  <div class=\"slider-nav prev\">\u203a<\/div>\r\n  <div class=\"slider-nav next\">\u2039<\/div>\r\n\r\n  <div class=\"slide-indicators\">\r\n    <div class=\"indicator active\" data-slide=\"0\"><\/div>\r\n    <div class=\"indicator\" data-slide=\"1\"><\/div>\r\n    <div class=\"indicator\" data-slide=\"2\"><\/div>\r\n  <\/div>\r\n<\/section>\r\n<script>document.addEventListener('DOMContentLoaded', function() {\r\n    const slidesContainer = document.querySelector('.slides-container');\r\n    const slides = document.querySelectorAll('.slide');\r\n    const indicators = document.querySelectorAll('.indicator');\r\n    const prevBtn = document.querySelector('.slider-nav.prev');\r\n    const nextBtn = document.querySelector('.slider-nav.next');\r\n    \r\n    let currentSlide = 0;\r\n    const totalSlides = slides.length;\r\n\r\n    \/\/ \u062f\u0627\u0644\u0629 \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0633\u0644\u0627\u064a\u062f\u0631\r\n    function updateSlider() {\r\n      \/\/ \u0627\u0633\u062a\u062e\u062f\u0627\u0645 translateX \u0628\u0634\u0643\u0644 \u0633\u0644\u0628\u064a \u0644\u0623\u0646 direction: ltr\r\n      slidesContainer.style.transform = `translateX(-${currentSlide * 100}%)`;\r\n      \r\n      \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0645\u0624\u0634\u0631\u0627\u062a\r\n      indicators.forEach((indicator, index) => {\r\n        if (index === currentSlide) {\r\n          indicator.classList.add('active');\r\n        } else {\r\n          indicator.classList.remove('active');\r\n        }\r\n      });\r\n    }\r\n\r\n    \/\/ \u0627\u0644\u0627\u0646\u062a\u0642\u0627\u0644 \u0644\u0644\u0634\u0631\u064a\u062d\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629\r\n    function nextSlide() {\r\n      currentSlide = (currentSlide + 1) % totalSlides;\r\n      updateSlider();\r\n    }\r\n\r\n    \/\/ \u0627\u0644\u0627\u0646\u062a\u0642\u0627\u0644 \u0644\u0644\u0634\u0631\u064a\u062d\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629\r\n    function prevSlide() {\r\n      currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;\r\n      updateSlider();\r\n    }\r\n\r\n    \/\/ \u0627\u0644\u0627\u0646\u062a\u0642\u0627\u0644 \u0644\u0634\u0631\u064a\u062d\u0629 \u0645\u062d\u062f\u062f\u0629\r\n    function goToSlide(index) {\r\n      currentSlide = index;\r\n      updateSlider();\r\n    }\r\n\r\n    \/\/ \u0623\u062d\u062f\u0627\u062b \u0627\u0644\u0623\u0632\u0631\u0627\u0631 - \u0627\u0644\u0632\u0631 \u0627\u0644\u0623\u064a\u0645\u0646 \u0644\u0644\u062a\u0627\u0644\u064a \u0648\u0627\u0644\u0623\u064a\u0633\u0631 \u0644\u0644\u0633\u0627\u0628\u0642\r\n    prevBtn.addEventListener('click', nextSlide); \/\/ \u0627\u0644\u0632\u0631 \u0627\u0644\u0623\u064a\u0645\u0646 = \u0627\u0644\u062a\u0627\u0644\u064a\r\n    nextBtn.addEventListener('click', prevSlide); \/\/ \u0627\u0644\u0632\u0631 \u0627\u0644\u0623\u064a\u0633\u0631 = \u0627\u0644\u0633\u0627\u0628\u0642\r\n\r\n    \/\/ \u0623\u062d\u062f\u0627\u062b \u0627\u0644\u0645\u0624\u0634\u0631\u0627\u062a\r\n    indicators.forEach((indicator, index) => {\r\n      indicator.addEventListener('click', () => goToSlide(index));\r\n    });\r\n\r\n    \/\/ \u062f\u0639\u0645 \u0627\u0644\u0633\u062d\u0628 \u0628\u0627\u0644\u0644\u0645\u0633 \u0644\u0644\u0647\u0648\u0627\u062a\u0641\r\n    let touchStartX = 0;\r\n    let touchEndX = 0;\r\n\r\n    slidesContainer.addEventListener('touchstart', (e) => {\r\n      touchStartX = e.changedTouches[0].screenX;\r\n    });\r\n\r\n    slidesContainer.addEventListener('touchend', (e) => {\r\n      touchEndX = e.changedTouches[0].screenX;\r\n      handleSwipe();\r\n    });\r\n\r\n    function handleSwipe() {\r\n      \/\/ \u0639\u0643\u0633 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0633\u062d\u0628 \u0644\u0644\u0639\u0631\u0628\u064a\u0629\r\n      if (touchStartX - touchEndX > 50) {\r\n        prevSlide(); \/\/ \u0627\u0644\u0633\u062d\u0628 \u0644\u0644\u064a\u0633\u0627\u0631 = \u0627\u0644\u0633\u0627\u0628\u0642\r\n      }\r\n      if (touchEndX - touchStartX > 50) {\r\n        nextSlide(); \/\/ \u0627\u0644\u0633\u062d\u0628 \u0644\u0644\u064a\u0645\u064a\u0646 = \u0627\u0644\u062a\u0627\u0644\u064a\r\n      }\r\n    }\r\n\r\n    \/\/ \u0627\u0644\u062a\u0645\u0631\u064a\u0631 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)\r\n    let autoplayInterval = setInterval(nextSlide, 5000);\r\n\r\n    \/\/ \u0625\u064a\u0642\u0627\u0641 \u0627\u0644\u062a\u0645\u0631\u064a\u0631 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a \u0639\u0646\u062f \u0627\u0644\u062a\u0641\u0627\u0639\u0644\r\n    const heroSection = document.querySelector('.hero-section');\r\n    heroSection.addEventListener('mouseenter', () => {\r\n      clearInterval(autoplayInterval);\r\n    });\r\n\r\n    heroSection.addEventListener('mouseleave', () => {\r\n      autoplayInterval = setInterval(nextSlide, 5000);\r\n    });\r\n  });\r\n<\/script>\n\n\n\t\t<div id=\"\" class=\"wd-marquee wd-9393ae4d wd-custom-width\" >\n\t\t\t<div class=\"wd-marquee-content\">\n\t\t\t\t\n\n<div class=\"wp-block-wd-marquee-item wd-marquee-item wd-a3c62557\">\n<p class=\"wp-block-wd-paragraph wd-684da44b wd-custom-width\"><strong>FREE SHIPPING on orders over 250 SAR<\/strong> \ud83d\ude99<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-wd-marquee-item wd-marquee-item wd-03a99566\">\n<p class=\"wp-block-wd-paragraph wd-991d89a6\"><strong>Shipping across all regions of KSA<\/strong> \ud83c\uddf8\ud83c\udde6<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-wd-marquee-item wd-marquee-item wd-943d1e2f\">\n<p class=\"wp-block-wd-paragraph wd-62745b91 wd-custom-width\"><strong>FREE SHIPPING on orders over 250 SAR<\/strong> \ud83d\ude99<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-wd-marquee-item wd-marquee-item wd-be5afcc8\">\n<p class=\"wp-block-wd-paragraph wd-18a2afa1\"><strong>Shipping across all regions of KSA<\/strong> \ud83c\uddf8\ud83c\udde6<\/p>\n<\/div>\n\n\t\t\t<\/div>\n\t\t\t<div class=\"wd-marquee-content\">\n\t\t\t\t\n\n<div class=\"wp-block-wd-marquee-item wd-marquee-item wd-a3c62557\">\n<p class=\"wp-block-wd-paragraph wd-684da44b wd-custom-width\"><strong>FREE SHIPPING on orders over 250 SAR<\/strong> \ud83d\ude99<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-wd-marquee-item wd-marquee-item wd-03a99566\">\n<p class=\"wp-block-wd-paragraph wd-991d89a6\"><strong>Shipping across all regions of KSA<\/strong> \ud83c\uddf8\ud83c\udde6<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-wd-marquee-item wd-marquee-item wd-943d1e2f\">\n<p class=\"wp-block-wd-paragraph wd-62745b91 wd-custom-width\"><strong>FREE SHIPPING on orders over 250 SAR<\/strong> \ud83d\ude99<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-wd-marquee-item wd-marquee-item wd-be5afcc8\">\n<p class=\"wp-block-wd-paragraph wd-18a2afa1\"><strong>Shipping across all regions of KSA<\/strong> \ud83c\uddf8\ud83c\udde6<\/p>\n<\/div>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\n<style>\r\n  \/* \u062d\u0627\u0648\u064a\u0629 \u062e\u0627\u0631\u062c\u064a\u0629 \u062c\u062f\u064a\u062f\u0629 \u0644\u0643\u0644 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 - \u0644\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629 *\/\r\n  .section-header-wrapper-en-4 {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    width: 100%;\r\n    margin: 30px 0 0 0;\r\n    gap: 15px;\r\n    direction: ltr;\r\n  }\r\n\r\n  \/* \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0639\u0646\u0648\u0627\u0646 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629 *\/\r\n  .title-3d-container-en-4 {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    padding: 10px 0 10px 20px;\r\n    overflow: visible;\r\n    width: fit-content;\r\n    max-width: 600px;\r\n    z-index: 10;\r\n  }\r\n\r\n  \/* \u062e\u0644\u0641\u064a\u0629 \u062d\u0645\u0631\u0627\u0621 \u062b\u0644\u0627\u062b\u064a\u0629 \u0627\u0644\u0623\u0628\u0639\u0627\u062f \u0645\u0639 before *\/\r\n  .title-3d-container-en-4::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: linear-gradient(135deg, #e63946 0%, #d62828 100%);\r\n    clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);\r\n    z-index: 0;\r\n    box-shadow: \r\n      0 10px 30px rgba(230, 57, 70, 0.4),\r\n      inset 0 -2px 10px rgba(0, 0, 0, 0.2);\r\n    animation: pulseGlow-en-4 3s ease-in-out infinite;\r\n    border-radius: 0 15px 15px 0;\r\n  }\r\n\r\n  @keyframes pulseGlow-en-4 {\r\n    0%, 100% {\r\n      box-shadow: \r\n        0 10px 30px rgba(230, 57, 70, 0.4),\r\n        inset 0 -2px 10px rgba(0, 0, 0, 0.2);\r\n    }\r\n    50% {\r\n      box-shadow: \r\n        0 15px 40px rgba(230, 57, 70, 0.6),\r\n        inset 0 -2px 10px rgba(0, 0, 0, 0.3);\r\n    }\r\n  }\r\n\r\n  \/* \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 *\/\r\n  .title-3d-container-en-4::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-image: \r\n      radial-gradient(circle, rgba(255, 255, 255, 0.15) 2px, transparent 2px),\r\n      radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);\r\n    background-size: 30px 30px, 50px 50px;\r\n    background-position: 0 0, 25px 25px;\r\n    animation: particlesMove-en-4 20s linear infinite;\r\n    opacity: 0.6;\r\n    z-index: 1;\r\n    clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);\r\n  }\r\n\r\n  @keyframes particlesMove-en-4 {\r\n    0% {\r\n      background-position: 0 0, 25px 25px;\r\n    }\r\n    100% {\r\n      background-position: 30px 30px, 55px 55px;\r\n    }\r\n  }\r\n\r\n  \/* \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u062b\u0644\u0627\u062b\u064a \u0627\u0644\u0623\u0628\u0639\u0627\u062f - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629 *\/\r\n  .title-3d-en-4 {\r\n    position: relative;\r\n    z-index: 2;\r\n    margin: 0;\r\n    padding: 20px 30px 20px 40px;\r\n    font-size: 2.5rem;\r\n    color: white;\r\n    text-shadow: \r\n      0 0.1em 20px rgba(0, 0, 0, 0.8),\r\n      0.05em -0.03em 0 rgba(0, 0, 0, 0.7),\r\n      0.05em 0.005em 0 rgba(0, 0, 0, 0.7),\r\n      0em 0.08em 0 rgba(0, 0, 0, 0.7),\r\n      0.05em 0.08em 0 rgba(0, 0, 0, 0.7),\r\n      0px -0.03em 0 rgba(0, 0, 0, 0.7),\r\n      -0.03em -0.03em 0 rgba(0, 0, 0, 0.7),\r\n      -0.03em 0.08em 0 rgba(0, 0, 0, 0.7),\r\n      -0.03em 0 0 rgba(0, 0, 0, 0.7);\r\n    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));\r\n    direction: ltr;\r\n  }\r\n\r\n  .title-3d-en-4 span {\r\n    transform: scale(0.9);\r\n    display: inline-block;\r\n    font-size: 2rem;\r\n    font-weight: 900;\r\n    margin: 0 8px;\r\n  }\r\n\r\n  .title-3d-en-4 span:first-child {\r\n    animation: bop-en-4 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;\r\n  }\r\n\r\n  .title-3d-en-4 span:last-child {\r\n    animation: bopB-en-4 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;\r\n  }\r\n\r\n  @keyframes bop-en-4 {\r\n    0% {\r\n      transform: scale(0.9);\r\n    }\r\n    50%, 100% {\r\n      transform: scale(1);\r\n    }\r\n  }\r\n\r\n  @keyframes bopB-en-4 {\r\n    0% {\r\n      transform: scale(0.9);\r\n    }\r\n    80%, 100% {\r\n      transform: scale(1) rotateZ(-3deg);\r\n    }\r\n  }\r\n\r\n  \/* \u0631\u0627\u0628\u0637 \u0639\u0631\u0636 \u0627\u0644\u0643\u0644 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629 *\/\r\n  .view-all-link-en-4 {\r\n    font-size: 1.1rem;\r\n    color: #e63946;\r\n    text-decoration: none;\r\n    white-space: nowrap;\r\n    padding: 10px 20px;\r\n    border: 2px solid #e63946;\r\n    border-radius: 25px;\r\n    transition: all 0.3s ease;\r\n    font-weight: 700;\r\n    background: white;\r\n    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.2);\r\n    direction: ltr;\r\n  }\r\n\r\n  .view-all-link-en-4:hover {\r\n    background-color: #e63946;\r\n    color: white;\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4);\r\n  }\r\n\r\n  \/* \u062f\u0627\u0626\u0631\u0629 \u062f\u064a\u0643\u0648\u0631\u064a\u0629 \u0639\u0644\u0649 \u0627\u0644\u064a\u0633\u0627\u0631 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629 *\/\r\n  .title-circle-decoration-en-4 {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: -15px;\r\n    transform: translateY(-50%);\r\n    width: 35px;\r\n    height: 35px;\r\n    background: white;\r\n    border-radius: 50%;\r\n    z-index: 3;\r\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);\r\n  }\r\n\r\n  .title-circle-decoration-en-4::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 20px;\r\n    height: 20px;\r\n    background: #e63946;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  \/* Responsive *\/\r\n  @media (max-width: 768px) {\r\n    .section-header-wrapper-en-4 {\r\n      padding: 0 15px;\r\n      gap: 12px;\r\n    }\r\n\r\n    .title-3d-container-en-4 {\r\n      max-width: 400px;\r\n      padding: 5px 0 5px 12px;\r\n    }\r\n\r\n    .title-3d-en-4 {\r\n      font-size: 1.8rem;\r\n      padding: 12px 18px 12px 25px;\r\n    }\r\n\r\n    .title-3d-en-4 span {\r\n      font-size: 1.4rem;\r\n      margin: 0 5px;\r\n    }\r\n\r\n    .view-all-link-en-4 {\r\n      font-size: 0.85rem;\r\n      padding: 8px 14px;\r\n    }\r\n\r\n    .title-circle-decoration-en-4 {\r\n      width: 26px;\r\n      height: 26px;\r\n      left: -10px;\r\n    }\r\n\r\n    .title-circle-decoration-en-4::after {\r\n      width: 14px;\r\n      height: 14px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .section-header-wrapper-en-4 {\r\n      padding: 0 10px;\r\n      gap: 10px;\r\n    }\r\n\r\n    .title-3d-container-en-4 {\r\n      max-width: 200px;\r\n      padding: 3px 0 3px 8px;\r\n    }\r\n\r\n    .title-3d-en-4 {\r\n      font-size: 1.1rem;\r\n      padding: 8px 12px 8px 15px;\r\n    }\r\n\r\n    .title-3d-en-4 span {\r\n      font-size: 0.95rem;\r\n      margin: 0 3px;\r\n    }\r\n\r\n    .view-all-link-en-4 {\r\n      font-size: 0.75rem;\r\n      padding: 6px 10px;\r\n    }\r\n\r\n    .title-circle-decoration-en-4 {\r\n      width: 20px;\r\n      height: 20px;\r\n      left: -8px;\r\n    }\r\n\r\n    .title-circle-decoration-en-4::after {\r\n      width: 11px;\r\n      height: 11px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0631\u0627\u0628\u0639 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 -->\r\n<div class=\"section-header-wrapper-en-4\">\r\n  <div class=\"title-3d-container-en-4\">\r\n    <a href=\"#popular-categories\"><h1 class=\"title-3d-en-4\">\r\n      <span>Popular<\/span>\r\n      <span>Categories<\/span>\r\n    <\/h1><\/a>\r\n    <div class=\"title-circle-decoration-en-4\"><\/div>\r\n  <\/div>\r\n  \r\n<\/div>\n\n\n\t\t\t\t<div class=\"products wd-carousel-container wd-cats-element  wd-2e6987da wd-cats\">\n\t\t\t\t\t<div class=\"wd-carousel-inner\">\n\t\t\t\t\t\t<div class=\"wd-carousel wd-grid\" data-scroll_per_page=\"yes\" style=\"--wd-col-lg:5;--wd-col-md:4;--wd-col-sm:2;--wd-gap-lg:20px;--wd-gap-sm:10px;\">\n\t\t\t\t\t\t\t<div class=\"wd-carousel-wrap\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wd-carousel-item\">\n\t\t\t\t\t\t\t\t\t\t\n<div class=\"category-grid-item wd-cat cat-design-alt categories-with-shadow without-product-count product-category product first\" data-loop=\"1\">\n\t\n\t<div class=\"wd-cat-inner wrapp-category\">\n\t\t<div class=\"wd-cat-thumb category-image-wrapp\">\n\t\t\t<a class=\"wd-cat-image category-image\" href=\"https:\/\/dokansa.com\/small-animals\/\" aria-label=\"small-animals\">\n\t\t\t\t\n\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/dokansa.com\/wp-content\/uploads\/woocommerce-placeholder-300x300.png\" class=\"woocommerce-placeholder wp-post-image\" alt=\"Placeholder\" \/>\t\t\t<\/a>\n\t\t<\/div>\n\t\t<div class=\"wd-cat-content hover-mask\">\n\t\t\t<h3 class=\"wd-entities-title\">\n\t\t\t\tsmall-animals\t\t\t<\/h3>\n\n\t\t\t\n\t\t\t\t\t<\/div>\n\n\t\t\t\t<a class=\"wd-fill category-link\" href=\"https:\/\/dokansa.com\/small-animals\/\" aria-label=\"Product category small-animals\"><\/a>\n\t\t\t<\/div>\n\n\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"wd-carousel-item\">\n\t\t\t\t\t\t\t\t\t\t\n<div class=\"category-grid-item wd-cat cat-design-alt categories-with-shadow without-product-count product-category product\" data-loop=\"2\">\n\t\n\t<div class=\"wd-cat-inner wrapp-category\">\n\t\t<div class=\"wd-cat-thumb category-image-wrapp\">\n\t\t\t<a class=\"wd-cat-image category-image\" href=\"https:\/\/dokansa.com\/fish\/\" aria-label=\"fish\">\n\t\t\t\t\n\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/dokansa.com\/wp-content\/uploads\/woocommerce-placeholder-300x300.png\" class=\"woocommerce-placeholder wp-post-image\" alt=\"Placeholder\" \/>\t\t\t<\/a>\n\t\t<\/div>\n\t\t<div class=\"wd-cat-content hover-mask\">\n\t\t\t<h3 class=\"wd-entities-title\">\n\t\t\t\tfish\t\t\t<\/h3>\n\n\t\t\t\n\t\t\t\t\t<\/div>\n\n\t\t\t\t<a class=\"wd-fill category-link\" href=\"https:\/\/dokansa.com\/fish\/\" aria-label=\"Product category fish\"><\/a>\n\t\t\t<\/div>\n\n\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t<div class=\"wd-nav-pagin-wrap text-center wd-style-shape wd-hide-lg\">\n\t\t\t<ul class=\"wd-nav-pagin\"><\/ul>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"wd-nav-scroll wd-hide-md-sm wd-hide-sm\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\n\n<style>\/* \u0642\u0633\u0645 \u0627\u0644\u0628\u0627\u0646\u0631\u0627\u062a \u0627\u0644\u062a\u0631\u0648\u064a\u062c\u064a\u0629 *\/\r\n  .promo-banners-section {\r\n  }\r\n\r\n  .banners-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 20px;\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .banner-card {\r\n    position: relative;\r\n    border-radius: 15px;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 3px 10px rgba(0,0,0,0.1);\r\n    min-height: 200px;\r\n    background-size: cover;\r\n    background-position: center;\r\n    background-repeat: no-repeat;\r\n  }\r\n\r\n  .banner-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: rgba(255, 255, 255, 0.1);\r\n    z-index: 1;\r\n    transition: background 0.3s ease;\r\n  }\r\n\r\n  .banner-card:hover {\r\n    transform: translateY(-5px);\r\n    box-shadow: 0 8px 25px rgba(0,0,0,0.15);\r\n  }\r\n\r\n  .banner-card:hover::before {\r\n    background: rgba(255, 255, 255, 0.05);\r\n  }\r\n\r\n  \/* \u0627\u0644\u0628\u0627\u0646\u0631 \u0627\u0644\u0643\u0628\u064a\u0631 \u0641\u064a \u0627\u0644\u0635\u0641 \u0627\u0644\u062b\u0627\u0646\u064a *\/\r\n  .banner-large {\r\n    grid-column: span 2;\r\n    min-height: 250px;\r\n  }\r\n\r\n  \/* \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0628\u0627\u0646\u0631 *\/\r\n  .banner-content {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 200px;\r\n    padding: 25px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    z-index: 2;\r\n  }\r\n\r\n  .banner-large .banner-content {\r\n    min-height: 250px;\r\n  }\r\n\r\n  .banner-badge {\r\n    display: inline-block;\r\n    width: fit-content;\r\n    padding: 8px 18px;\r\n    background: rgba(255, 255, 255, 0.95);\r\n    border-radius: 25px;\r\n    font-size: 0.85rem;\r\n    font-weight: 700;\r\n    color: #e63946;\r\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\r\n    backdrop-filter: blur(5px);\r\n  }\r\n\r\n  .banner-title {\r\n    font-size: 1.8rem;\r\n    font-weight: 900;\r\n    line-height: 1.2;\r\n    margin: 15px 0 10px 0;\r\n    color: #fff;\r\n  }\r\n\r\n  .banner-subtitle {\r\n    font-size: 1.3rem;\r\n    font-weight: 700;\r\n    color: #fff;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .banner-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    width: fit-content;\r\n    padding: 12px 25px;\r\n    border:2px solid #fff;\r\n    color: white;\r\n    text-decoration: none;\r\n    border-radius: 30px;\r\n    font-weight: 700;\r\n    font-size: 0.9rem;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 4px 12px rgba(45, 52, 54, 0.3);\r\n  }\r\n\r\n  .banner-btn:hover {\r\n    background: #ffc34a;\r\n    transform: translateX(-5px);\r\n  }\r\n\r\n  .banner-btn::after {\r\n    content: '\u2192';\r\n    font-size: 1.2rem;\r\n  }\r\n\r\n  \/* Responsive *\/\r\n  @media (max-width: 1024px) {\r\n    .banners-grid {\r\n      grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .banner-large {\r\n      grid-column: span 2;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .promo-banners-section {\r\n      padding: 40px 15px;\r\n    }\r\n\r\n    .banners-grid {\r\n      grid-template-columns: 1fr;\r\n      gap: 15px;\r\n    }\r\n\r\n    .banner-large {\r\n      grid-column: span 1;\r\n    }\r\n\r\n    .banner-card {\r\n      min-height: 180px;\r\n    }\r\n\r\n    .banner-content {\r\n      min-height: 180px;\r\n    }\r\n\r\n    .banner-title {\r\n      font-size: 1.1rem;\r\n    }\r\n\r\n    .banner-subtitle {\r\n      font-size: 1.1rem;\r\n    }\r\n    .banner-btn {\r\n    \r\n    width: fit-content;\r\n    padding: 9px 19px;\r\n    font-size: 0.7rem;\r\n  }\r\n  }\r\n<\/style><!-- \u0642\u0633\u0645 \u0627\u0644\u0628\u0627\u0646\u0631\u0627\u062a \u0627\u0644\u062a\u0631\u0648\u064a\u062c\u064a\u0629 --><section class=\"promo-banners-section\">\r\n  <div class=\"banners-grid\">\r\n    \r\n    <!-- \u0627\u0644\u0628\u0627\u0646\u0631 1 -->\r\n    <div class=\"banner-card\" style=\"background-image: url('https:\/\/dokansa.com\/wp-content\/uploads\/2025\/10\/1.webp');\">\r\n      <div class=\"banner-content\">\r\n        <div>\r\n          <span class=\"banner-badge\">30% OFF<\/span>\r\n          <h3 class=\"banner-title\">Accessories<br\/>&#038; Treats<\/h3>\r\n        <\/div>\r\n        Shop Now\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u0627\u0644\u0628\u0627\u0646\u0631 2 -->\r\n    <div class=\"banner-card\" style=\"background-image: url('https:\/\/dokansa.com\/wp-content\/uploads\/2025\/10\/2.webp');\">\r\n      <div class=\"banner-content\">\r\n        <div>\r\n          <h3 class=\"banner-title\">Medicine<br\/>&#038; Natural Supplements<\/h3>\r\n        <\/div>\r\n        Discover Now\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u0627\u0644\u0628\u0627\u0646\u0631 3 -->\r\n    <div class=\"banner-card\" style=\"background-image: url('https:\/\/dokansa.com\/wp-content\/uploads\/2025\/10\/3.webp');\">\r\n      <div class=\"banner-content\">\r\n        <div>\r\n          <span class=\"banner-badge\">World Quality<\/span>\r\n          <h3 class=\"banner-title\">Food &#038; Supplies<br\/>For Rabbits &#038; Hamsters<\/h3>\r\n        <\/div>\r\n        Shop Now\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u0627\u0644\u0628\u0627\u0646\u0631 5 -->\r\n    <div class=\"banner-card\" style=\"background-image: url('https:\/\/dokansa.com\/wp-content\/uploads\/2025\/10\/4.webp');\">\r\n      <div class=\"banner-content\">\r\n        <div>\r\n          <span class=\"banner-badge\">Save 30%<\/span>\r\n          <h3 class=\"banner-title\">High Quality Food With Natural Ingredients<\/h3>\r\n        <\/div>\r\n        <a href=\"https:\/\/dokansa.com\/en\/dog\/\" class=\"banner-btn\">Shop Now<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u0627\u0644\u0628\u0627\u0646\u0631 4 - \u0643\u0628\u064a\u0631 -->\r\n    <div class=\"banner-card banner-large\" style=\"background-image: url('https:\/\/dokansa.com\/wp-content\/uploads\/2025\/11\/promo-banner5-en.webp');\">\r\n      <div class=\"banner-content\">\r\n        <div>\r\n          <span class=\"banner-badge\">25% OFF<\/span>\r\n          <h3 class=\"banner-title\">Aquarium Decorations<\/h3>\r\n          <p class=\"banner-subtitle\">Decorate your aquarium with realistic designs<\/p>\r\n        <\/div>\r\n        Shop Now\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\n\n\n\n<style>\r\n  \/* \u062d\u0627\u0648\u064a\u0629 \u062e\u0627\u0631\u062c\u064a\u0629 \u062c\u062f\u064a\u062f\u0629 \u0644\u0643\u0644 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 - \u0644\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 *\/\r\n  .section-header-wrapper-en {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    width: 100%;\r\n    margin: 30px 0 0 0;\r\n    gap: 15px;\r\n    direction: ltr;\r\n  }\r\n\r\n  \/* \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0639\u0646\u0648\u0627\u0646 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 *\/\r\n  .title-3d-container-en {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    padding: 10px 0 10px 20px;\r\n    overflow: visible;\r\n    width: fit-content;\r\n    max-width: 600px;\r\n    z-index: 10;\r\n  }\r\n\r\n  \/* \u062e\u0644\u0641\u064a\u0629 \u062d\u0645\u0631\u0627\u0621 \u062b\u0644\u0627\u062b\u064a\u0629 \u0627\u0644\u0623\u0628\u0639\u0627\u062f \u0645\u0639 before *\/\r\n  .title-3d-container-en::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: linear-gradient(135deg, #e63946 0%, #d62828 100%);\r\n    clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);\r\n    z-index: 0;\r\n    box-shadow: \r\n      0 10px 30px rgba(230, 57, 70, 0.4),\r\n      inset 0 -2px 10px rgba(0, 0, 0, 0.2);\r\n    animation: pulseGlow-en 3s ease-in-out infinite;\r\n    border-radius: 0 15px 15px 0;\r\n  }\r\n\r\n  @keyframes pulseGlow-en {\r\n    0%, 100% {\r\n      box-shadow: \r\n        0 10px 30px rgba(230, 57, 70, 0.4),\r\n        inset 0 -2px 10px rgba(0, 0, 0, 0.2);\r\n    }\r\n    50% {\r\n      box-shadow: \r\n        0 15px 40px rgba(230, 57, 70, 0.6),\r\n        inset 0 -2px 10px rgba(0, 0, 0, 0.3);\r\n    }\r\n  }\r\n\r\n  \/* \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u062b\u0644\u0627\u062b\u064a \u0627\u0644\u0623\u0628\u0639\u0627\u062f - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 *\/\r\n  .title-3d-en {\r\n    position: relative;\r\n    z-index: 2;\r\n    margin: 0;\r\n    padding: 20px 30px 20px 40px;\r\n    font-size: 2.5rem;\r\n    color: white;\r\n    text-shadow: \r\n      0 0.1em 20px rgba(0, 0, 0, 0.8),\r\n      0.05em -0.03em 0 rgba(0, 0, 0, 0.7),\r\n      0.05em 0.005em 0 rgba(0, 0, 0, 0.7),\r\n      0em 0.08em 0 rgba(0, 0, 0, 0.7),\r\n      0.05em 0.08em 0 rgba(0, 0, 0, 0.7),\r\n      0px -0.03em 0 rgba(0, 0, 0, 0.7),\r\n      -0.03em -0.03em 0 rgba(0, 0, 0, 0.7),\r\n      -0.03em 0.08em 0 rgba(0, 0, 0, 0.7),\r\n      -0.03em 0 0 rgba(0, 0, 0, 0.7);\r\n    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));\r\n    direction: ltr;\r\n  }\r\n\r\n  .title-3d-en span {\r\n    transform: scale(0.9);\r\n    display: inline-block;\r\n    font-size: 2rem;\r\n    font-weight: 900;\r\n    margin: 0 8px;\r\n  }\r\n\r\n  .title-3d-en span:first-child {\r\n    animation: bop-en 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;\r\n  }\r\n\r\n  .title-3d-en span:last-child {\r\n    animation: bopB-en 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;\r\n  }\r\n\r\n  @keyframes bop-en {\r\n    0% {\r\n      transform: scale(0.9);\r\n    }\r\n    50%, 100% {\r\n      transform: scale(1);\r\n    }\r\n  }\r\n\r\n  @keyframes bopB-en {\r\n    0% {\r\n      transform: scale(0.9);\r\n    }\r\n    80%, 100% {\r\n      transform: scale(1) rotateZ(-3deg);\r\n    }\r\n  }\r\n\r\n  \/* \u0631\u0627\u0628\u0637 \u0639\u0631\u0636 \u0627\u0644\u0643\u0644 - \u0644\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 *\/\r\n  .view-all-link-en {\r\n    font-size: 1.1rem;\r\n    color: #e63946;\r\n    text-decoration: none;\r\n    white-space: nowrap;\r\n    padding: 10px 20px;\r\n    border: 2px solid #e63946;\r\n    border-radius: 25px;\r\n    transition: all 0.3s ease;\r\n    font-weight: 700;\r\n    background: white;\r\n    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.2);\r\n    direction: ltr;\r\n  }\r\n\r\n  .view-all-link-en:hover {\r\n    background-color: #e63946;\r\n    color: white;\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4);\r\n  }\r\n\r\n  \/* \u062f\u0627\u0626\u0631\u0629 \u062f\u064a\u0643\u0648\u0631\u064a\u0629 \u0639\u0644\u0649 \u0627\u0644\u064a\u0633\u0627\u0631 (\u0644\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629) *\/\r\n  .title-circle-decoration-en {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: -15px;\r\n    transform: translateY(-50%);\r\n    width: 35px;\r\n    height: 35px;\r\n    background: white;\r\n    border-radius: 50%;\r\n    z-index: 3;\r\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);\r\n  }\r\n\r\n  .title-circle-decoration-en::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 20px;\r\n    height: 20px;\r\n    background: #e63946;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  \/* ==================== \u0627\u0644\u0643\u0644\u0628 \u0627\u0644\u0645\u062a\u062d\u0631\u0643 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 ==================== *\/\r\n  :root {\r\n    --orange: #F2A247;\r\n    --dark-orange: #DB863C;\r\n  }\r\n\r\n  .height-on-mob-en {\r\n    position: relative;\r\n    width: 100%;\r\n    margin-bottom: 80px;\r\n    min-height: 130px;\r\n  }\r\n\r\n  .dog-container-en {\r\n    position: absolute;\r\n    right: 0;\r\n    bottom: -60px;\r\n    width: 9rem;\r\n    height: 18rem;\r\n    z-index: 1;\r\n    animation: dogWalk-en 10s linear infinite reverse;\r\n  }\r\n\r\n  @keyframes dogWalk-en {\r\n    0% {\r\n      right: 0;\r\n    }\r\n    48% {\r\n      right: calc(100% - 650px);\r\n      transform: scaleX(1);\r\n    }\r\n    50% {\r\n      right: calc(100% - 650px);\r\n      transform: scaleX(-1);\r\n    }\r\n    98% {\r\n      right: 0;\r\n      transform: scaleX(-1);\r\n    }\r\n    100% {\r\n      right: 0;\r\n      transform: scaleX(1);\r\n    }\r\n  }\r\n\r\n  @keyframes bodyJump-en {\r\n    from { transform: translateY(-.3rem); }\r\n    to   { transform: translateY(.3rem); }\r\n  }\r\n\r\n  .body-en {\r\n    width: 9rem;\r\n    height: 4rem;\r\n    margin-top: 10rem;\r\n    position: relative;\r\n    z-index: 0;\r\n    border-radius: 0 0 2rem 2rem;\r\n    will-change: transform;\r\n    animation: bodyJump-en 0.13s ease-in-out infinite alternate;\r\n  }\r\n\r\n  .body-en:after {\r\n    content: '';\r\n    width: 9rem;\r\n    height: 4rem;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    border-radius: 0 0 2rem 2rem;\r\n    background-color: var(--orange);\r\n  }\r\n\r\n  @keyframes ear-en {\r\n    from { transform: rotate(-15deg); }\r\n    to   { transform: rotate(-5deg); }\r\n  }\r\n\r\n  .ear-en {\r\n    width: 1rem;\r\n    height: 3rem;\r\n    border-radius: 2rem;\r\n    position: absolute;\r\n    top: -.7rem;\r\n    left: .2rem;\r\n    background-color: var(--orange);\r\n    transform-origin: 50% 100%;\r\n    will-change: transform;\r\n    animation: ear-en .2s ease-in-out infinite alternate;\r\n  }\r\n\r\n  @keyframes backEar-en {\r\n    from { transform: rotate(0deg); }\r\n    to   { transform: rotate(15deg); }\r\n  }\r\n\r\n  .backEar-en {\r\n    width: 1rem;\r\n    height: 3rem;\r\n    border-radius: 2rem;\r\n    position: absolute;\r\n    top: -.7rem;\r\n    left: 1rem;\r\n    top: -.8rem;\r\n    z-index: -1;\r\n    background-color: var(--dark-orange);\r\n    transform-origin: 50% 100%;\r\n    will-change: transform;\r\n    animation: backEar-en .2s ease-in-out infinite alternate-reverse;\r\n  }\r\n\r\n  @keyframes headTilt-en {\r\n    from { transform: rotate(0deg); }\r\n    to   { transform: rotate(5deg); }\r\n  }\r\n\r\n  .head-en {\r\n    width: 3.2rem;\r\n    height: 5.7rem;\r\n    border-radius: 2rem 2rem 0 0;\r\n    background-color: var(--orange);\r\n    position: absolute;\r\n    bottom: 100%;\r\n    right: 0;\r\n    z-index: 1;\r\n    transform-origin: 0 100%;\r\n    animation: headTilt-en .2s ease-in-out infinite alternate;\r\n  }\r\n\r\n  .head-en:after {\r\n    content: '';\r\n    width: 3.2rem;\r\n    height: 5.7rem;\r\n    border-radius: 2rem 2rem 0 0;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    background-color: var(--orange);\r\n  }\r\n\r\n  .snout-en {\r\n    width: 5rem;\r\n    height: 3.2rem;\r\n    border-radius: 0 1rem 1rem 0;\r\n    background-color: var(--orange);\r\n    position: absolute;\r\n    top: 1.1rem;\r\n    left: 1rem;\r\n  }\r\n\r\n  .nose-en {\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n    position: absolute;\r\n    top: -.4rem;\r\n    right: -.4rem;\r\n    border-radius: 50%;\r\n    background-color: #000;\r\n  }\r\n\r\n  .eye-en {\r\n    margin: 2rem;\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n    border-radius: 50%;\r\n    background:\r\n      radial-gradient(circle at center,#000 10%,transparent 11%) 1.3rem 0px\/100% 100% no-repeat,\r\n      radial-gradient(circle at center, var(--orange) .5rem, transparent .5rem) 0 0\/100% 100% no-repeat, \r\n      linear-gradient(to bottom, var(--orange) 70%, transparent 70%) 0 0\/100% 100% no-repeat, #000;\r\n    position: absolute;\r\n    top: -2.6rem;\r\n    left: -1.5rem;\r\n    z-index: 1;\r\n  }\r\n\r\n  .collar-en {\r\n    height: .9rem;\r\n    position: absolute;\r\n    left: -.1rem;\r\n    right: -.1rem;\r\n    bottom: 0;\r\n    z-index: 1;\r\n    border-radius: .3rem;\r\n    background-color: #000;\r\n  }\r\n\r\n  .tag-en {\r\n    width: .8rem;\r\n    height: .8rem;\r\n    border-radius: 50%;\r\n    position: absolute;\r\n    right: -.6rem;\r\n    bottom: -.5rem;\r\n    background-color: #79964D;\r\n  }\r\n\r\n  .frontLegs-en {\r\n    position: absolute;\r\n    top: 70%;\r\n    right: 2rem;\r\n    z-index: -1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  .backLegs-en {\r\n    position: absolute;\r\n    top: 70%;\r\n    left: 1.4rem;\r\n    z-index: -1;\r\n  }\r\n\r\n  @keyframes legs-en {\r\n    from { transform: rotate(-35deg); }\r\n    to   { transform: rotate(35deg); }\r\n  }\r\n\r\n  .frontLeg-en {\r\n    width: 1rem;\r\n    height: 3rem;\r\n    border-radius: 2rem;\r\n    position: absolute;\r\n    top: 80%;\r\n    background-color: var(--orange);\r\n    transform-origin: 50% 0;\r\n    will-change: transform;\r\n    animation: legs-en .4s ease-in-out infinite alternate;\r\n  }\r\n\r\n  .backLeg-en {\r\n    width: 1rem;\r\n    height: 3rem;\r\n    border-radius: 2rem;\r\n    position: absolute;\r\n    top: 80%;\r\n    right: -1rem;\r\n    z-index: -1;\r\n    background-color: var(--dark-orange);\r\n    transform-origin: 50% 0;\r\n    will-change: transform;\r\n    animation: legs-en .4s ease-in-out infinite alternate-reverse;\r\n  }\r\n\r\n  @keyframes tailTilt-en {\r\n    from { transform: rotate(0deg); }\r\n    to   { transform: rotate(-30deg); }\r\n  }\r\n\r\n  .tail-en {\r\n    width: .8rem;\r\n    height: 2.5rem;\r\n    border-radius: 2rem;\r\n    position: absolute;\r\n    bottom: 70%;\r\n    left: 1%;\r\n    background-color: var(--orange);\r\n    transform-origin: 50% 100%;\r\n    animation: tailTilt-en .2s ease-in-out infinite alternate;\r\n  }\r\n\r\n  @keyframes shadowGrow-en {\r\n    from { width: 7rem; }\r\n    to   { width: 10rem; }\r\n  }\r\n\r\n  .shadow-en {\r\n    position: absolute;\r\n    bottom: 1.6rem;\r\n    height: .47rem;\r\n    border-radius: 2rem;\r\n    background-color: rgba(207, 186, 178, 0.5);\r\n    animation: shadowGrow-en .2s ease-in-out infinite alternate;\r\n  }\r\n\r\n  \/* Responsive *\/\r\n  @media (max-width: 768px) {\r\n    .section-header-wrapper-en {\r\n      padding: 0 15px;\r\n      gap: 12px;\r\n    }\r\n\r\n    .title-3d-container-en {\r\n      max-width: 400px;\r\n      padding: 5px 0 5px 12px;\r\n    }\r\n\r\n    .title-3d-en {\r\n      font-size: 1.8rem;\r\n      padding: 12px 18px 12px 25px;\r\n    }\r\n\r\n    .title-3d-en span {\r\n      font-size: 1.4rem;\r\n      margin: 0 5px;\r\n    }\r\n\r\n    .view-all-link-en {\r\n      font-size: 0.85rem;\r\n      padding: 8px 14px;\r\n    }\r\n\r\n    .title-circle-decoration-en {\r\n      width: 26px;\r\n      height: 26px;\r\n      left: -10px;\r\n    }\r\n\r\n    .title-circle-decoration-en::after {\r\n      width: 14px;\r\n      height: 14px;\r\n    }\r\n\r\n    .dog-container-en {\r\n      transform: scale(0.8);\r\n      transform-origin: left bottom;\r\n    }\r\n\r\n    @keyframes dogWalk-en {\r\n      0% {\r\n        left: 0;\r\n      }\r\n      48% {\r\n        left: calc(100% - 580px);\r\n        transform: scaleX(0.8);\r\n      }\r\n      50% {\r\n        left: calc(100% - 580px);\r\n        transform: scaleX(-0.8);\r\n      }\r\n      98% {\r\n        left: 0;\r\n        transform: scaleX(-0.8);\r\n      }\r\n      100% {\r\n        left: 0;\r\n        transform: scaleX(0.8);\r\n      }\r\n    }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .section-header-wrapper-en {\r\n      padding: 0 10px;\r\n      gap: 10px;\r\n    }\r\n\r\n    .title-3d-container-en {\r\n      max-width: 200px;\r\n      padding: 3px 0 3px 8px;\r\n    }\r\n\r\n    .title-3d-en {\r\n      font-size: 1.1rem;\r\n      padding: 8px 12px 8px 15px;\r\n    }\r\n\r\n    .title-3d-en span {\r\n      font-size: 0.95rem;\r\n      margin: 0 3px;\r\n    }\r\n\r\n    .view-all-link-en {\r\n      font-size: 0.75rem;\r\n      padding: 6px 10px;\r\n    }\r\n\r\n    .title-circle-decoration-en {\r\n      width: 20px;\r\n      height: 20px;\r\n      left: -8px;\r\n    }\r\n\r\n    .title-circle-decoration-en::after {\r\n      width: 11px;\r\n      height: 11px;\r\n    }\r\n\r\n    .dog-container-en {\r\n      display: none;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0642\u0633\u0645 \u0645\u0639 \u0627\u0644\u0643\u0644\u0628 \u0627\u0644\u0645\u062a\u062d\u0631\u0643 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 -->\r\n<div class=\"height-on-mob-en\">\r\n  <div class=\"section-header-wrapper-en\">\r\n    <div class=\"title-3d-container-en\">\r\n      <a href=\"#best-sellers\"><h1 class=\"title-3d-en\">\r\n        <span>Best<\/span>\r\n        <span>Sellers<\/span>\r\n      <\/h1><\/a>\r\n      <div class=\"title-circle-decoration-en\"><\/div>\r\n    <\/div>\r\n    \r\n    \u2192 View All\r\n  <\/div>\r\n\r\n  <!-- \u0627\u0644\u0643\u0644\u0628 \u0627\u0644\u0645\u062a\u062d\u0631\u0643 \u0645\u0646 CodePen -->\r\n  <div class=\"dog-container-en\">\r\n    <div class=\"body-en\">\r\n      <div class=\"head-en\">\r\n        <div class=\"ear-en\"><\/div>\r\n        <div class=\"backEar-en\"><\/div>\r\n        <div class=\"snout-en\">\r\n          <div class=\"eye-en\"><\/div>\r\n          <div class=\"nose-en\"><\/div>\r\n        <\/div>\r\n        <div class=\"collar-en\">\r\n          <div class=\"tag-en\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"frontLegs-en\">\r\n        <div class=\"frontLeg-en\"><\/div>\r\n        <div class=\"backLeg-en\"><\/div>\r\n      <\/div>\r\n      <div class=\"backLegs-en\">\r\n        <div class=\"frontLeg-en\"><\/div>\r\n        <div class=\"backLeg-en\"><\/div>\r\n      <\/div>\r\n      <div class=\"tail-en\"><\/div>\r\n    <\/div>\r\n    <div class=\"shadow-en\"><\/div>\r\n  <\/div>\r\n<\/div>\n\n\n\t\t\t<div class=\"wd-products-element wd-5a87bf9b wd-hide\">\n\t\t\t\n\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\n\n\n<style>\r\n  \/* \u062d\u0627\u0648\u064a\u0629 \u062e\u0627\u0631\u062c\u064a\u0629 \u062c\u062f\u064a\u062f\u0629 \u0644\u0643\u0644 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629 *\/\r\n  .section-header-wrapper-en-2 {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    width: 100%;\r\n    margin: 30px 0 0 0;\r\n    gap: 15px;\r\n    direction: ltr;\r\n  }\r\n\r\n  \/* \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0639\u0646\u0648\u0627\u0646 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629 *\/\r\n  .title-3d-container-en-2 {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    padding: 10px 0 10px 20px;\r\n    overflow: visible;\r\n    width: fit-content;\r\n    max-width: 600px;\r\n    z-index: 10;\r\n  }\r\n\r\n  \/* \u062e\u0644\u0641\u064a\u0629 \u062d\u0645\u0631\u0627\u0621 \u062b\u0644\u0627\u062b\u064a\u0629 \u0627\u0644\u0623\u0628\u0639\u0627\u062f \u0645\u0639 before *\/\r\n  .title-3d-container-en-2::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: linear-gradient(135deg, #e63946 0%, #d62828 100%);\r\n    clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);\r\n    z-index: 0;\r\n    box-shadow: \r\n      0 10px 30px rgba(230, 57, 70, 0.4),\r\n      inset 0 -2px 10px rgba(0, 0, 0, 0.2);\r\n    animation: pulseGlow-en-2 3s ease-in-out infinite;\r\n    border-radius: 0 15px 15px 0;\r\n  }\r\n\r\n  @keyframes pulseGlow-en-2 {\r\n    0%, 100% {\r\n      box-shadow: \r\n        0 10px 30px rgba(230, 57, 70, 0.4),\r\n        inset 0 -2px 10px rgba(0, 0, 0, 0.2);\r\n    }\r\n    50% {\r\n      box-shadow: \r\n        0 15px 40px rgba(230, 57, 70, 0.6),\r\n        inset 0 -2px 10px rgba(0, 0, 0, 0.3);\r\n    }\r\n  }\r\n\r\n  \/* \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u062b\u0644\u0627\u062b\u064a \u0627\u0644\u0623\u0628\u0639\u0627\u062f - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629 *\/\r\n  .title-3d-en-2 {\r\n    position: relative;\r\n    z-index: 2;\r\n    margin: 0;\r\n    padding: 20px 30px 20px 40px;\r\n    font-size: 2.5rem;\r\n    color: white;\r\n    text-shadow: \r\n      0 0.1em 20px rgba(0, 0, 0, 0.8),\r\n      0.05em -0.03em 0 rgba(0, 0, 0, 0.7),\r\n      0.05em 0.005em 0 rgba(0, 0, 0, 0.7),\r\n      0em 0.08em 0 rgba(0, 0, 0, 0.7),\r\n      0.05em 0.08em 0 rgba(0, 0, 0, 0.7),\r\n      0px -0.03em 0 rgba(0, 0, 0, 0.7),\r\n      -0.03em -0.03em 0 rgba(0, 0, 0, 0.7),\r\n      -0.03em 0.08em 0 rgba(0, 0, 0, 0.7),\r\n      -0.03em 0 0 rgba(0, 0, 0, 0.7);\r\n    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));\r\n    direction: ltr;\r\n  }\r\n\r\n  .title-3d-en-2 span {\r\n    transform: scale(0.9);\r\n    display: inline-block;\r\n    font-size: 2rem;\r\n    font-weight: 900;\r\n    margin: 0 8px;\r\n  }\r\n\r\n  .title-3d-en-2 span:first-child {\r\n    animation: bop-en-2 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;\r\n  }\r\n\r\n  .title-3d-en-2 span:last-child {\r\n    animation: bopB-en-2 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;\r\n  }\r\n\r\n  @keyframes bop-en-2 {\r\n    0% {\r\n      transform: scale(0.9);\r\n    }\r\n    50%, 100% {\r\n      transform: scale(1);\r\n    }\r\n  }\r\n\r\n  @keyframes bopB-en-2 {\r\n    0% {\r\n      transform: scale(0.9);\r\n    }\r\n    80%, 100% {\r\n      transform: scale(1) rotateZ(-3deg);\r\n    }\r\n  }\r\n\r\n  \/* \u0631\u0627\u0628\u0637 \u0639\u0631\u0636 \u0627\u0644\u0643\u0644 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629 *\/\r\n  .view-all-link-en-2 {\r\n    font-size: 1.1rem;\r\n    color: #e63946;\r\n    text-decoration: none;\r\n    white-space: nowrap;\r\n    padding: 10px 20px;\r\n    border: 2px solid #e63946;\r\n    border-radius: 25px;\r\n    transition: all 0.3s ease;\r\n    font-weight: 700;\r\n    background: white;\r\n    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.2);\r\n    direction: ltr;\r\n  }\r\n\r\n  .view-all-link-en-2:hover {\r\n    background-color: #e63946;\r\n    color: white;\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4);\r\n  }\r\n\r\n  \/* \u062f\u0627\u0626\u0631\u0629 \u062f\u064a\u0643\u0648\u0631\u064a\u0629 \u0639\u0644\u0649 \u0627\u0644\u064a\u0633\u0627\u0631 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629 *\/\r\n  .title-circle-decoration-en-2 {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: -15px;\r\n    transform: translateY(-50%);\r\n    width: 35px;\r\n    height: 35px;\r\n    background: white;\r\n    border-radius: 50%;\r\n    z-index: 3;\r\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);\r\n  }\r\n\r\n  .title-circle-decoration-en-2::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 20px;\r\n    height: 20px;\r\n    background: #e63946;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  \/* Responsive *\/\r\n  @media (max-width: 768px) {\r\n    .section-header-wrapper-en-2 {\r\n      padding: 0 15px;\r\n      gap: 12px;\r\n    }\r\n\r\n    .title-3d-container-en-2 {\r\n      max-width: 400px;\r\n      padding: 5px 0 5px 12px;\r\n    }\r\n\r\n    .title-3d-en-2 {\r\n      font-size: 1.8rem;\r\n      padding: 12px 18px 12px 25px;\r\n    }\r\n\r\n    .title-3d-en-2 span {\r\n      font-size: 1.4rem;\r\n      margin: 0 5px;\r\n    }\r\n\r\n    .view-all-link-en-2 {\r\n      font-size: 0.85rem;\r\n      padding: 8px 14px;\r\n    }\r\n\r\n    .title-circle-decoration-en-2 {\r\n      width: 26px;\r\n      height: 26px;\r\n      left: -10px;\r\n    }\r\n\r\n    .title-circle-decoration-en-2::after {\r\n      width: 14px;\r\n      height: 14px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .section-header-wrapper-en-2 {\r\n      padding: 0 10px;\r\n      gap: 10px;\r\n    }\r\n\r\n    .title-3d-container-en-2 {\r\n      max-width: 200px;\r\n      padding: 3px 0 3px 8px;\r\n    }\r\n\r\n    .title-3d-en-2 {\r\n      font-size: 1.1rem;\r\n      padding: 8px 12px 8px 15px;\r\n    }\r\n\r\n    .title-3d-en-2 span {\r\n      font-size: 0.95rem;\r\n      margin: 0 3px;\r\n    }\r\n\r\n    .view-all-link-en-2 {\r\n      font-size: 0.75rem;\r\n      padding: 6px 10px;\r\n    }\r\n\r\n    .title-circle-decoration-en-2 {\r\n      width: 20px;\r\n      height: 20px;\r\n      left: -8px;\r\n    }\r\n\r\n    .title-circle-decoration-en-2::after {\r\n      width: 11px;\r\n      height: 11px;\r\n    }\r\n\r\n    .height-on-mob-en{\r\n     min-height:0;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u062b\u0627\u0646\u064a - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 -->\r\n<div class=\"section-header-wrapper-en-2\">\r\n  <div class=\"title-3d-container-en-2\">\r\n    <a href=\"#your-category-link\"><h1 class=\"title-3d-en-2\">\r\n      <span>Medical<\/span>\r\n      <span>Products<\/span>\r\n    <\/h1><\/a>\r\n    <div class=\"title-circle-decoration-en-2\"><\/div>\r\n  <\/div>\r\n  \r\n  \u2192 View All\r\n<\/div>\n\n\n\t\t\t<div class=\"wd-products-element wd-a4058695 wd-hide\">\n\t\t\t\n\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\n\n\n<style>\r\n  \/* \u062d\u0627\u0648\u064a\u0629 \u062e\u0627\u0631\u062c\u064a\u0629 \u062c\u062f\u064a\u062f\u0629 \u0644\u0643\u0644 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 - \u0644\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629 *\/\r\n  .section-header-wrapper-en-3 {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    width: 100%;\r\n    margin: 30px 0 0 0;\r\n    gap: 15px;\r\n    direction: ltr;\r\n  }\r\n\r\n  \/* \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0639\u0646\u0648\u0627\u0646 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629 *\/\r\n  .title-3d-container-en-3 {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    padding: 10px 0 10px 20px;\r\n    overflow: visible;\r\n    width: fit-content;\r\n    max-width: 600px;\r\n    z-index: 10;\r\n  }\r\n\r\n  \/* \u062e\u0644\u0641\u064a\u0629 \u062d\u0645\u0631\u0627\u0621 \u062b\u0644\u0627\u062b\u064a\u0629 \u0627\u0644\u0623\u0628\u0639\u0627\u062f \u0645\u0639 before *\/\r\n  .title-3d-container-en-3::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: linear-gradient(135deg, #e63946 0%, #d62828 100%);\r\n    clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);\r\n    z-index: 0;\r\n    box-shadow: \r\n      0 10px 30px rgba(230, 57, 70, 0.4),\r\n      inset 0 -2px 10px rgba(0, 0, 0, 0.2);\r\n    animation: pulseGlow-en-3 3s ease-in-out infinite;\r\n    border-radius: 0 15px 15px 0;\r\n  }\r\n\r\n  @keyframes pulseGlow-en-3 {\r\n    0%, 100% {\r\n      box-shadow: \r\n        0 10px 30px rgba(230, 57, 70, 0.4),\r\n        inset 0 -2px 10px rgba(0, 0, 0, 0.2);\r\n    }\r\n    50% {\r\n      box-shadow: \r\n        0 15px 40px rgba(230, 57, 70, 0.6),\r\n        inset 0 -2px 10px rgba(0, 0, 0, 0.3);\r\n    }\r\n  }\r\n\r\n  \/* \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 *\/\r\n  .title-3d-container-en-3::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-image: \r\n      radial-gradient(circle, rgba(255, 255, 255, 0.15) 2px, transparent 2px),\r\n      radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);\r\n    background-size: 30px 30px, 50px 50px;\r\n    background-position: 0 0, 25px 25px;\r\n    animation: particlesMove-en-3 20s linear infinite;\r\n    opacity: 0.6;\r\n    z-index: 1;\r\n    clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);\r\n  }\r\n\r\n  @keyframes particlesMove-en-3 {\r\n    0% {\r\n      background-position: 0 0, 25px 25px;\r\n    }\r\n    100% {\r\n      background-position: 30px 30px, 55px 55px;\r\n    }\r\n  }\r\n\r\n  \/* \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u062b\u0644\u0627\u062b\u064a \u0627\u0644\u0623\u0628\u0639\u0627\u062f - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629 *\/\r\n  .title-3d-en-3 {\r\n    position: relative;\r\n    z-index: 2;\r\n    margin: 0;\r\n    padding: 20px 30px 20px 40px;\r\n    font-size: 2.5rem;\r\n    color: white;\r\n    text-shadow: \r\n      0 0.1em 20px rgba(0, 0, 0, 0.8),\r\n      0.05em -0.03em 0 rgba(0, 0, 0, 0.7),\r\n      0.05em 0.005em 0 rgba(0, 0, 0, 0.7),\r\n      0em 0.08em 0 rgba(0, 0, 0, 0.7),\r\n      0.05em 0.08em 0 rgba(0, 0, 0, 0.7),\r\n      0px -0.03em 0 rgba(0, 0, 0, 0.7),\r\n      -0.03em -0.03em 0 rgba(0, 0, 0, 0.7),\r\n      -0.03em 0.08em 0 rgba(0, 0, 0, 0.7),\r\n      -0.03em 0 0 rgba(0, 0, 0, 0.7);\r\n    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));\r\n    direction: ltr;\r\n  }\r\n\r\n  .title-3d-en-3 span {\r\n    transform: scale(0.9);\r\n    display: inline-block;\r\n    font-size: 2rem;\r\n    font-weight: 900;\r\n    margin: 0 8px;\r\n  }\r\n\r\n  .title-3d-en-3 span:first-child {\r\n    animation: bop-en-3 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;\r\n  }\r\n\r\n  .title-3d-en-3 span:last-child {\r\n    animation: bopB-en-3 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;\r\n  }\r\n\r\n  @keyframes bop-en-3 {\r\n    0% {\r\n      transform: scale(0.9);\r\n    }\r\n    50%, 100% {\r\n      transform: scale(1);\r\n    }\r\n  }\r\n\r\n  @keyframes bopB-en-3 {\r\n    0% {\r\n      transform: scale(0.9);\r\n    }\r\n    80%, 100% {\r\n      transform: scale(1) rotateZ(-3deg);\r\n    }\r\n  }\r\n\r\n  \/* \u0631\u0627\u0628\u0637 \u0639\u0631\u0636 \u0627\u0644\u0643\u0644 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629 *\/\r\n  .view-all-link-en-3 {\r\n    font-size: 1.1rem;\r\n    color: #e63946;\r\n    text-decoration: none;\r\n    white-space: nowrap;\r\n    padding: 10px 20px;\r\n    border: 2px solid #e63946;\r\n    border-radius: 25px;\r\n    transition: all 0.3s ease;\r\n    font-weight: 700;\r\n    background: white;\r\n    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.2);\r\n    direction: ltr;\r\n  }\r\n\r\n  .view-all-link-en-3:hover {\r\n    background-color: #e63946;\r\n    color: white;\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4);\r\n  }\r\n\r\n  \/* \u062f\u0627\u0626\u0631\u0629 \u062f\u064a\u0643\u0648\u0631\u064a\u0629 \u0639\u0644\u0649 \u0627\u0644\u064a\u0633\u0627\u0631 - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629 *\/\r\n  .title-circle-decoration-en-3 {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: -15px;\r\n    transform: translateY(-50%);\r\n    width: 35px;\r\n    height: 35px;\r\n    background: white;\r\n    border-radius: 50%;\r\n    z-index: 3;\r\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);\r\n  }\r\n\r\n  .title-circle-decoration-en-3::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 20px;\r\n    height: 20px;\r\n    background: #e63946;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  \/* Responsive *\/\r\n  @media (max-width: 768px) {\r\n    .section-header-wrapper-en-3 {\r\n      padding: 0 15px;\r\n      gap: 12px;\r\n    }\r\n\r\n    .title-3d-container-en-3 {\r\n      max-width: 400px;\r\n      padding: 5px 0 5px 12px;\r\n    }\r\n\r\n    .title-3d-en-3 {\r\n      font-size: 1.8rem;\r\n      padding: 12px 18px 12px 25px;\r\n    }\r\n\r\n    .title-3d-en-3 span {\r\n      font-size: 1.4rem;\r\n      margin: 0 5px;\r\n    }\r\n\r\n    .view-all-link-en-3 {\r\n      font-size: 0.85rem;\r\n      padding: 8px 14px;\r\n    }\r\n\r\n    .title-circle-decoration-en-3 {\r\n      width: 26px;\r\n      height: 26px;\r\n      left: -10px;\r\n    }\r\n\r\n    .title-circle-decoration-en-3::after {\r\n      width: 14px;\r\n      height: 14px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .section-header-wrapper-en-3 {\r\n      padding: 0 10px;\r\n      gap: 10px;\r\n    }\r\n\r\n    .title-3d-container-en-3 {\r\n      max-width: 200px;\r\n      padding: 3px 0 3px 8px;\r\n    }\r\n\r\n    .title-3d-en-3 {\r\n      font-size: 1.1rem;\r\n      padding: 8px 12px 8px 15px;\r\n    }\r\n\r\n    .title-3d-en-3 span {\r\n      font-size: 0.95rem;\r\n      margin: 0 3px;\r\n    }\r\n\r\n    .view-all-link-en-3 {\r\n      font-size: 0.75rem;\r\n      padding: 6px 10px;\r\n    }\r\n\r\n    .title-circle-decoration-en-3 {\r\n      width: 20px;\r\n      height: 20px;\r\n      left: -8px;\r\n    }\r\n\r\n    .title-circle-decoration-en-3::after {\r\n      width: 11px;\r\n      height: 11px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u062b\u0627\u0644\u062b - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u0646\u062c\u0644\u064a\u0632\u064a\u0629 -->\r\n<div class=\"section-header-wrapper-en-3\">\r\n  <div class=\"title-3d-container-en-3\">\r\n    <a href=\"#house-pads-cages\"><h1 class=\"title-3d-en-3\">\r\n      <span>House<\/span>\r\n      <span>&#038; Cages<\/span>\r\n    <\/h1><\/a>\r\n    <div class=\"title-circle-decoration-en-3\"><\/div>\r\n  <\/div>\r\n  \r\n  \u2192 View All\r\n<\/div>\n\n\n\t\t\t<div class=\"wd-products-element wd-49ca6c9c wd-hide\">\n\t\t\t\n\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\n\n\n<style>\/* ==================== \u0627\u0644\u0628\u0627\u0646\u0631 \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u064a \u0627\u0644\u062d\u062f\u064a\u062b ==================== *\/\r\n  .pet-promo-banner {\r\n    position: relative;\r\n    width: 100%;\r\n    margin: 60px 0;\r\n    overflow: hidden;\r\n    border-radius: 30px;\r\n  }\r\n\r\n  \/* \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0645\u0639 Gradient *\/\r\n  .pet-banner-bg {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: #27c7e3;\r\n    z-index: 0;\r\n  }\r\n\r\n  \/* \u0634\u0643\u0644 \u0645\u0646\u062d\u0646\u064a \u0639\u0644\u0648\u064a \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 clip-path *\/\r\n  .pet-banner-shape-top {\r\n    position: absolute;\r\n    top: -50px;\r\n    right: -100px;\r\n    width: 500px;\r\n    height: 500px;\r\n    background: rgba(255, 255, 255, 0.15);\r\n    clip-path: circle(50% at 50% 50%);\r\n    z-index: 1;\r\n  }\r\n\r\n  \/* \u0634\u0643\u0644 \u0645\u0646\u062d\u0646\u064a \u0633\u0641\u0644\u064a *\/\r\n  .pet-banner-shape-bottom {\r\n    position: absolute;\r\n    bottom: -80px;\r\n    left: -120px;\r\n    width: 600px;\r\n    height: 600px;\r\n    background: rgba(255, 107, 53, 0.2);\r\n    clip-path: ellipse(60% 50% at 30% 50%);\r\n    z-index: 1;\r\n  }\r\n\r\n  \/* \u0634\u0643\u0644 \u0645\u0648\u062c\u064a \u0639\u0644\u0649 \u0627\u0644\u062c\u0627\u0646\u0628 *\/\r\n  .pet-banner-wave {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    width: 40%;\r\n    height: 100%;\r\n    background: rgba(255, 255, 255, 0.1);\r\n    clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);\r\n    z-index: 1;\r\n  }\r\n\r\n  \/* \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 *\/\r\n\/* \u062a\u0639\u062f\u064a\u0644 \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 *\/\r\n.pet-banner-wrapper {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  z-index: 10;\r\n  gap: 0; \/* \u0625\u0644\u063a\u0627\u0621 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 *\/\r\n  height: 100%;\r\n}\r\n\r\n\/* \u0642\u0633\u0645 \u0627\u0644\u0646\u0635 *\/\r\n.pet-banner-textbox {\r\n  flex: 1;\r\n  max-width: 600px;\r\n  padding-left: 40px; \/* \u0645\u0633\u0627\u0641\u0629 \u0628\u064a\u0646 \u0627\u0644\u0646\u0635 \u0648\u0627\u0644\u0635\u0648\u0631\u0629 *\/\r\n  z-index: 10;\r\n}\r\n\r\n  \/* \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0631\u0626\u064a\u0633\u064a *\/\r\n  .pet-banner-heading {\r\n    font-size: 3rem;\r\n    font-weight: 900;\r\n    color: white;\r\n    line-height: 1.2;\r\n    margin-bottom: 20px;\r\n    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);\r\n  }\r\n\r\n  .pet-banner-highlight {\r\n    color: #FFE66D;\r\n    text-shadow: \r\n      0 0 20px rgba(255, 230, 109, 0.5),\r\n      0 4px 20px rgba(0, 0, 0, 0.2);\r\n  }\r\n\r\n  \/* \u0627\u0644\u0648\u0635\u0641 *\/\r\n  .pet-banner-text {\r\n    font-size: 1rem;\r\n    color: rgba(255, 255, 255, 0.95);\r\n    line-height: 1.7;\r\n    margin-bottom: 35px;\r\n    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n  }\r\n\r\n  \/* \u0627\u0644\u0623\u0632\u0631\u0627\u0631 *\/\r\n  .pet-banner-actions {\r\n    display: flex;\r\n    gap: 20px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .pet-banner-link {\r\n    padding: 18px 40px;\r\n    font-size: 1.1rem;\r\n    font-weight: 700;\r\n    border-radius: 50px;\r\n    text-decoration: none;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n  }\r\n\r\n  .pet-banner-link-main {\r\n    background: white;\r\n    color: #FF6B35;\r\n    border: 3px solid white;\r\n  }\r\n\r\n  .pet-banner-link-main:hover {\r\n    background: #FFE66D;\r\n    border-color: #FFE66D;\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);\r\n  }\r\n\r\n  .pet-banner-link-alt {\r\n    background: transparent;\r\n    color: white;\r\n    border: 3px solid white;\r\n  }\r\n\r\n  .pet-banner-link-alt:hover {\r\n    background: white;\r\n    color: #FF6B35;\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 12px 30px rgba(255, 255, 255, 0.3);\r\n  }\r\n\r\n  \/* \u0623\u064a\u0642\u0648\u0646\u0629 \u0627\u0644\u0633\u0647\u0645 *\/\r\n  .pet-banner-link::after {\r\n    content: '\u2192';\r\n    font-size: 1.3rem;\r\n    transition: transform 0.3s ease;\r\n  }\r\n\r\n  .pet-banner-link:hover::after {\r\n    transform: translateX(5px);\r\n  }\r\n\r\n  \/* \u0642\u0633\u0645 \u0627\u0644\u0635\u0648\u0631\u0629 *\/\r\n\/* \u0642\u0633\u0645 \u0627\u0644\u0635\u0648\u0631\u0629 *\/\r\n.pet-banner-visual {\r\n  width:600px;\r\n  position: relative;\r\n  height: 100%;\r\n  overflow: hidden;\r\n  margin: -60px -80px -60px 0; \/* \u0625\u0644\u063a\u0627\u0621 padding \u0627\u0644\u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 *\/\r\n}\r\n\r\n\/* \u0627\u0644\u0635\u0648\u0631\u0629 \u0645\u0645\u062a\u0644\u0626\u0629 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 *\/\r\n.pet-banner-photo {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover; \/* \u062a\u0645\u0644\u0623 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 *\/\r\n  object-position: center;\r\n  border-radius: 30px;\r\n  box-shadow: none;\r\n  animation: none;\r\n  border:10px solid #f2faf0;\r\n  \r\n}\r\n\r\n\/* \u0632\u062e\u0631\u0641\u0629 \u062f\u0627\u0626\u0631\u064a\u0629 \u062e\u0644\u0641 \u0627\u0644\u0635\u0648\u0631\u0629 *\/\r\n.pet-banner-circle {\r\n  position: absolute;\r\n  width: 400px;\r\n  height: 400px;\r\n  background: rgba(255, 255, 255, 0.15);\r\n  border-radius: 50%;\r\n  z-index: 1;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  animation: none; \/* \u0625\u0644\u063a\u0627\u0621 \u0627\u0644\u062f\u0648\u0631\u0627\u0646 *\/\r\n  pointer-events: none;\r\n}\r\n\r\n  .pet-banner-metric-label {\r\n    font-size: 0.9rem;\r\n    color: rgba(255, 255, 255, 0.9);\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n  }\r\n\r\n  \/* ==================== Responsive Design ==================== *\/\r\n\r\n@media (min-width: 1025px) and (max-width: 1280px) {\r\n  .pet-promo-banner {\r\n    height: 460px;\r\n  }\r\n  .pet-banner-textbox {\r\n    padding-right: 30px;\r\n  }\r\n\r\n  .pet-banner-heading {\r\n    font-size: 2rem;\r\n  }\r\n\r\n  .pet-banner-text {\r\n    font-size: 1.1rem;\r\n  }\r\n\r\n  .pet-banner-actions {\r\n    justify-content: center;\r\n    gap:10px;\r\n  }\r\n\r\n  .pet-banner-visual{\r\n    text-align:end;\r\n  }\r\n\r\n  .pet-banner-photo{\r\n    width:80%;\r\n  }\r\n\r\n  .pet-company-section {\r\n        display: grid;\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 2vw;\r\n        align-items: start;\r\n    }\r\n\r\n  .pet-banner-link{\r\n   padding:15px 30px;\r\n  }\r\n}  \r\n\r\n\/* \u0627\u0644\u062a\u0627\u0628\u0644\u062a *\/\r\n@media (max-width: 1024px) {\r\n  .pet-promo-banner {\r\n    height: 460px;\r\n  }\r\n  .pet-banner-textbox {\r\n    padding-left: 30px;\r\n  }\r\n\r\n  .pet-banner-heading {\r\n    font-size: 2.5rem;\r\n  }\r\n\r\n  .pet-banner-text {\r\n    font-size: 1.1rem;\r\n  }\r\n\r\n  .pet-banner-visual{\r\n    text-align:end;\r\n  }\r\n\r\n  .pet-banner-photo{\r\n    width:80%;\r\n  }\r\n\r\n  .pet-company-section {\r\n        display: grid;\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 2vw;\r\n        align-items: start;\r\n    }\r\n\r\n  .pet-banner-link{\r\n   padding:15px 30px;\r\n  }\r\n}\r\n\r\n\/* \u0627\u0644\u0647\u0648\u0627\u062a\u0641 \u0627\u0644\u0643\u0628\u064a\u0631\u0629 *\/\r\n@media (max-width: 768px) {\r\n  .pet-promo-banner {\r\n    height: auto;\r\n    min-height: 500px;\r\n    border-radius: 20px;\r\n  }\r\n\r\n  .pet-banner-wrapper {\r\n    flex-direction: column;\r\n    padding: 40px 30px;\r\n    text-align: center;\r\n  }\r\n\r\n  .pet-banner-visual {\r\n    margin: 30px -30px -40px -30px; \/* \u062a\u0645\u0644\u0623 \u0639\u0631\u0636 \u0627\u0644\u0634\u0627\u0634\u0629 *\/\r\n    height: 300px;\r\n    border-radius: 0 0 20px 20px;\r\n    order: 2; \/* \u0627\u0644\u0635\u0648\u0631\u0629 \u0641\u064a \u0627\u0644\u0623\u0633\u0641\u0644 *\/\r\n  }\r\n\r\n  .pet-banner-textbox {\r\n    max-width: 100%;\r\n    padding-right: 0;\r\n    order: 1; \/* \u0627\u0644\u0646\u0635 \u0641\u064a \u0627\u0644\u0623\u0639\u0644\u0649 *\/\r\n  }\r\n\r\n  .pet-banner-heading {\r\n    font-size: 2.2rem;\r\n  }\r\n\r\n  .pet-banner-text {\r\n    font-size: 1rem;\r\n  }\r\n\r\n  .pet-banner-actions {\r\n    justify-content: center;\r\n  }\r\n\r\n  .pet-banner-link {\r\n    padding: 15px 30px;\r\n    font-size: 1rem;\r\n  }\r\n\r\n  .pet-banner-metrics {\r\n    justify-content: center;\r\n  }\r\n\r\n  .pet-banner-metric-num {\r\n    font-size: 2rem;\r\n  }\r\n\r\n  .pet-banner-shape-top {\r\n    width: 300px;\r\n    height: 300px;\r\n  }\r\n\r\n  .pet-banner-shape-bottom {\r\n    width: 400px;\r\n    height: 400px;\r\n  }\r\n}\r\n\r\n\/* \u0627\u0644\u0647\u0648\u0627\u062a\u0641 \u0627\u0644\u0635\u063a\u064a\u0631\u0629 *\/\r\n@media (max-width: 480px) {\r\n  .pet-promo-banner {\r\n    min-height: 450px;\r\n  }\r\n\r\n  .pet-banner-wrapper {\r\n    padding: 30px 20px;\r\n  }\r\n\r\n  .pet-banner-visual {\r\n    margin: 20px -20px -30px -20px;\r\n    height: 250px;\r\n    text-align:center;\r\n  }\r\n\r\n  .pet-banner-photo{\r\n    width:60%;\r\n    border-radius:20px\r\n  }\r\n  .pet-banner-heading {\r\n    font-size: 1.8rem;\r\n  }\r\n\r\n  .pet-banner-text {\r\n    font-size: 0.95rem;\r\n    margin-bottom: 25px;\r\n  }\r\n\r\n  .pet-banner-actions {\r\n    flex-direction: column;\r\n    width: 100%;\r\n  }\r\n\r\n  .pet-banner-link {\r\n    width: 100%;\r\n    justify-content: center;\r\n    padding: 14px 25px;\r\n  }\r\n\r\n  .pet-banner-metrics {\r\n    flex-direction: column;\r\n    gap: 20px;\r\n  }\r\n\r\n  .pet-banner-label {\r\n    font-size: 0.8rem;\r\n    padding: 8px 20px;\r\n  }\r\n}\r\n\r\n<\/style><!-- \u0627\u0644\u0628\u0627\u0646\u0631 \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u064a --><section class=\"pet-promo-banner\"><!-- \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0648\u0627\u0644\u0623\u0634\u0643\u0627\u0644 \u0627\u0644\u0645\u0646\u062d\u0646\u064a\u0629 --><div class=\"pet-banner-bg\"><\/div><div class=\"pet-banner-shape-top\"><\/div><div class=\"pet-banner-shape-bottom\"><\/div><div class=\"pet-banner-wave\"><\/div><!-- \u0627\u0644\u0645\u062d\u062a\u0648\u0649 --><div class=\"pet-banner-wrapper\"><!-- \u0642\u0633\u0645 \u0627\u0644\u0646\u0635 --><div class=\"pet-banner-textbox\"><h2 class=\"pet-banner-heading\"><span class=\"pet-banner-highlight\">Get a 30% discount<\/span> on popular food products.\r\n      <\/h2><p class=\"pet-banner-text\">Natural and healthy food for your pet with free delivery on all orders over 250 riyals. Take care of your pet&#8217;s health with the best products!\r\n      <\/p><!-- \u0627\u0644\u0623\u0632\u0631\u0627\u0631 --><div class=\"pet-banner-actions\"><a href=\"https:\/\/dokansa.com\/sale\/\" class=\"pet-banner-link pet-banner-link-main\">Shop now<\/a>Find out more<\/div><\/div><!-- \u0642\u0633\u0645 \u0627\u0644\u0635\u0648\u0631\u0629 --><div class=\"pet-banner-visual\"><div class=\"pet-banner-circle\"><\/div><img decoding=\"async\" class=\"pet-banner-photo\" src=\"https:\/\/dokansa.com\/wp-content\/uploads\/2025\/10\/middle-image-promo.webp\" alt=\"Happy Pets\"\/><\/div><\/div><\/section>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Food Treats Choose The Best Natural Pet Food Premium pet food made from natural ingredients. We are fully committed to<\/p>\n","protected":false},"author":8626,"featured_media":215629,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-215638","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/dokansa.com\/en\/wp-json\/wp\/v2\/pages\/215638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dokansa.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dokansa.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dokansa.com\/en\/wp-json\/wp\/v2\/users\/8626"}],"replies":[{"embeddable":true,"href":"https:\/\/dokansa.com\/en\/wp-json\/wp\/v2\/comments?post=215638"}],"version-history":[{"count":7,"href":"https:\/\/dokansa.com\/en\/wp-json\/wp\/v2\/pages\/215638\/revisions"}],"predecessor-version":[{"id":215660,"href":"https:\/\/dokansa.com\/en\/wp-json\/wp\/v2\/pages\/215638\/revisions\/215660"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dokansa.com\/en\/wp-json\/wp\/v2\/media\/215629"}],"wp:attachment":[{"href":"https:\/\/dokansa.com\/en\/wp-json\/wp\/v2\/media?parent=215638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}