.elementor-3228 .elementor-element.elementor-element-55e11b8f{margin:0px 0px 55px 0px;}.elementor-3228 .elementor-element.elementor-element-7860540{grid-column:span 1;grid-row:span 5;--wd-brd-radius:32px;}.elementor-3228 .elementor-element.elementor-element-7860540 div.product-category .wd-entities-title, .elementor-3228 .elementor-element.elementor-element-7860540 .wd-nav-product-cat>li>a{font-family:"Roboto Slab", Sans-serif;font-size:21px;font-weight:400;text-transform:uppercase;font-style:normal;text-decoration:none;line-height:62px;letter-spacing:0.3px;word-spacing:0px;}.elementor-3228 .elementor-element.elementor-element-97c7a3c{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-3228 .elementor-element.elementor-element-97c7a3c > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-3228 .elementor-element.elementor-element-ab40e2f:not(.elementor-motion-effects-element-type-background), .elementor-3228 .elementor-element.elementor-element-ab40e2f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E7E6E78A;}.elementor-3228 .elementor-element.elementor-element-ab40e2f > .elementor-container{max-width:1600px;}.elementor-3228 .elementor-element.elementor-element-ab40e2f{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-3228 .elementor-element.elementor-element-ab40e2f > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-3228 .elementor-element.elementor-element-c1fb506 .elementor-counter-number-wrapper{color:#C53C4C;font-family:"Roboto Slab", Sans-serif;font-size:67px;font-weight:400;-webkit-text-stroke-width:1px;stroke-width:1px;-webkit-text-stroke-color:#000;stroke:#000;text-shadow:0px 0px 10px rgba(0,0,0,0.3);}@media(max-width:767px){.elementor-3228 .elementor-element.elementor-element-55e11b8f{margin:0px 0px 35px 0px;}.elementor-3228 .elementor-element.elementor-element-317e45d > .elementor-widget-container{margin:-4px 0px -21px 0px;padding:-13px 0px 12px 0px;}.elementor-3228 .elementor-element.elementor-element-7860540 div.product-category .wd-entities-title, .elementor-3228 .elementor-element.elementor-element-7860540 .wd-nav-product-cat>li>a{font-size:18px;}}/* Start custom CSS for wd_image_or_svg, class: .elementor-element-91e47dc *//* اگر این CSS را به المان تصویر المنتور اعمال می‌کنید */
.elementor-3228 .elementor-element.elementor-element-91e47dc {
    max-width: 100% !important; /* اطمینان حاصل می‌کند که تصویر از کانتینر خود بزرگ‌تر نشود */
    height: auto !important;     /* نسبت ابعاد تصویر را حفظ می‌کند */
    display: block !important;   /* از مشکلات فضای خالی زیر تصویر جلوگیری می‌کند */
    
    /* انیمیشن شناور (floating) شما */
    animation: float 3s ease-in-out infinite !important;
    will-change: transform; /* برای بهینه‌سازی انیمیشن */
}

@keyframes float {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-12px) scale(1.02); } /* کمی بزرگنمایی در اوج حرکت */
    100% { transform: translateY(0) scale(1); }
}

/* اگر تصویر شما داخل یک ستون یا بخش خاصی است، می‌توانید برای آن کانتینر هم تنظیمات ریسپانسیو اعمال کنید: */
/* فرض کنید کلاس ستون شما 'my-image-column' است */
.elementor-column.my-image-column { /* یا هر سلکتور دقیق‌تر دیگر */
    overflow: hidden; /* اگر نمی‌خواهید محتوا از ستون بیرون بزند */
    /* یا overflow: visible; اگر می‌خواهید انیمیشن کمی بیرون بزند */
    /* مطمئن شوید که عرض ستون روی موبایل به % تنظیم شده باشد */
}

/* اگر کل صفحه قابل اسکرول نیست، بررسی کنید که body و html مشکل overflow: hidden نداشته باشند */
body, html {
    overflow-x: hidden; /* فقط اسکرول افقی را پنهان کن، اسکرول عمودی مجاز باشد */
    /* یا اگر در جای دیگری overflow: hidden; روی body یا html تنظیم شده، آن را حذف کنید */
    overflow-y: auto; /* برای اطمینان از اسکرول عمودی */
}/* End custom CSS */
/* Start custom CSS for wd_text_block, class: .elementor-element-0e9af92 *//* Media query for mobile devices (adjust max-width as per your Elementor's mobile breakpoint, usually 767px or 480px) */
@media (max-width: 768px) { /* Targeting typical tablet/phone screens */
    .hana-boutique-hero-final p {
        display: none !important; /* Hides the paragraph text completely */
    }
}

/* If you have a specific class for the text widget, use that for more precision:
   Example: If your text widget has a class 'my-hero-text-widget'
@media (max-width: 768px) {
    .my-hero-text-widget p {
        display: none !important;
    }
}
*//* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-181341b */.more-products {
  display: none !important;
}/* End custom CSS */
/* Start custom CSS for wd_products, class: .elementor-element-374c686 */.elementor-3228 .elementor-element.elementor-element-374c686 img {
  width: 100%;
  height: 300px; /* یا هر ارتفاعی که مناسب طراحی‌ت باشه */
  object-fit: cover;
  object-position: center;
  display: block;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-97c7a3c */.elementor-3228 .elementor-element.elementor-element-97c7a3c img {
  width: 100%;
  height: 300px; /* یا هر ارتفاعی که مناسب طراحی‌ت باشه */
  object-fit: cover;
  object-position: center;
  display: block;
}
.wd-product-cats {
  display: none !important;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-ab40e2f */.elementor-3228 .elementor-element.elementor-element-ab40e2f img {
  width: 100%;
  height: 300px; /* یا هر ارتفاعی که مناسب طراحی‌ت باشه */
  object-fit: cover;
  object-position: center;
  display: block;
}
.wd-product-cats {
  display: none !important;
}/* End custom CSS */
/* Start custom CSS for wd_products, class: .elementor-element-08c9cd7 */.elementor-3228 .elementor-element.elementor-element-08c9cd7 img {
  width: 100%;
  height: 300px; /* یا هر ارتفاعی که مناسب طراحی‌ت باشه */
  object-fit: cover;
  object-position: center;
  display: block;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-2078a4e */.elementor-3228 .elementor-element.elementor-element-2078a4e img {
  width: 100%;
  height: 300px; /* یا هر ارتفاعی که مناسب طراحی‌ت باشه */
  object-fit: cover;
  object-position: center;
  display: block;
}
.wd-product-cats {
  display: none !important;
}/* End custom CSS */