.elementor-3272 .elementor-element.elementor-element-6924829{--display:flex;}.elementor-3272 .elementor-element.elementor-element-f797b8f{--display:flex;}.elementor-3272 .elementor-element.elementor-element-e0960f8{--display:flex;}.elementor-3272 .elementor-element.elementor-element-231f4da{--display:flex;}.elementor-3272 .elementor-element.elementor-element-cb8389f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:nowrap;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-3272 .elementor-element.elementor-element-14a79ac{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:nowrap;}.elementor-3272 .elementor-element.elementor-element-2362b53{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:nowrap;}.elementor-3272 .elementor-element.elementor-element-68a840c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:nowrap;}.elementor-3272 .elementor-element.elementor-element-ffa2fa3{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;}.elementor-3272 .elementor-element.elementor-element-d0f1499{--display:flex;}.elementor-3272 .elementor-element.elementor-element-7b97af0{--display:flex;}.elementor-3272 .elementor-element.elementor-element-cb49b5c{--display:flex;}@media(max-width:1024px){.elementor-3272 .elementor-element.elementor-element-ffa2fa3{--e-n-carousel-swiper-slides-to-display:2;}}@media(max-width:767px){.elementor-3272 .elementor-element.elementor-element-ffa2fa3{--e-n-carousel-swiper-slides-to-display:1;}}/* Start custom CSS for container, class: .elementor-element-231f4da *//* ۱. قفل کردن کانتینر اسلایدهای کاروسل روی چیدمان افقی و کنار هم */
.elementor-3272 .elementor-element.elementor-element-231f4da .swiper-slide > .e-con {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* ۲. استایل کانتینر ابزارک‌های تصویر قبل و بعد */
.elementor-3272 .elementor-element.elementor-element-231f4da .img-before,
.elementor-3272 .elementor-element.elementor-element-231f4da .img-after {
    width: 50% !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    padding: 5px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    -webkit-border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
    aspect-ratio: 4 / 3 !important; /* نسبت تصویر استاندارد کادر */
    
    /* رفع باگ عدم اعمال انحنای گوشه‌ها در موبایل */
    isolation: isolate !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

/* ۳. پر شدن کامل کادرها و حذف لبه‌های تیز لایه‌های میانی */
.elementor-3272 .elementor-element.elementor-element-231f4da .img-before .elementor-widget-container,
.elementor-3272 .elementor-element.elementor-element-231f4da .img-after .elementor-widget-container,
.elementor-3272 .elementor-element.elementor-element-231f4da .img-before a,
.elementor-3272 .elementor-element.elementor-element-231f4da .img-after a,
.elementor-3272 .elementor-element.elementor-element-231f4da .img-before img,
.elementor-3272 .elementor-element.elementor-element-231f4da .img-after img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* بازگشت به حالت کاور برای پر شدن کامل کادر */
    border-radius: 8px !important;
    -webkit-border-radius: 8px !important;
    overflow: hidden !important;
}

/* تنظیم نشانگر ماوس برای لایت‌باکس */
.elementor-3272 .elementor-element.elementor-element-231f4da .img-before img,
.elementor-3272 .elementor-element.elementor-element-231f4da .img-after img {
    cursor: zoom-in !important;
}

/* ۴. ایجاد خودکار برچسب BEFORE روی تصویر سمت چپ */
.elementor-3272 .elementor-element.elementor-element-231f4da .img-before::before {
    content: "BEFORE" !important;
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;
    padding: 6px 12px !important;
    font-weight: bold !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    background-color: #1e293b !important;
    letter-spacing: 0.8px !important;
    z-index: 5 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    pointer-events: none;
}

/* ۵. ایجاد خودکار برچسب AFTER روی تصویر سمت راست */
.elementor-3272 .elementor-element.elementor-element-231f4da .img-after::before {
    content: "AFTER" !important;
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;
    padding: 6px 12px !important;
    font-weight: bold !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    background-color: #f1b31c !important;
    letter-spacing: 0.8px !important;
    z-index: 5 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    pointer-events: none;
}

/* ۶. تغییر اندازه برچسب‌ها در تبلت */
@media (max-width: 1024px) {
    .elementor-3272 .elementor-element.elementor-element-231f4da .img-before::before,
    .elementor-3272 .elementor-element.elementor-element-231f4da .img-after::before {
        font-size: 10px !important;
        padding: 5px 10px !important;
        top: 14px !important;
        left: 14px !important;
    }
}

/* ۷. عمودی شدن چیدمان روی موبایل و حل قطعی باگ انحنای گوشه‌ها در وب‌کیت گوشی */
@media (max-width: 767px) {
    /* باز کردن قفل چیدمان ستونی برای لایه‌های تو در تو در موبایل */
    .elementor-3272 .elementor-element.elementor-element-231f4da .swiper-slide > .e-con,
    .elementor-3272 .elementor-element.elementor-element-231f4da .swiper-slide > .e-con > .e-con-inner {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 16px !important;
    }

    .elementor-3272 .elementor-element.elementor-element-231f4da .img-before,
    .elementor-3272 .elementor-element.elementor-element-231f4da .img-after {
        width: 100% !important;
        border-radius: 12px !important;
        -webkit-border-radius: 12px !important;
        overflow: hidden !important;
        isolation: isolate !important;
    }
}

/* ۸. دکمه‌های ناوبری دایره‌ای طلایی درخشان ثابت با فلش مشکی پررنگ و واضح برای دسکتاپ و تبلت */
.perfect-before-after [class*="swiper-button-next"],
.perfect-before-after [class*="swiper-button-prev"],
.perfect-before-after [class*="swiper-button"] {
    background-color: #f1b31c !important; /* پس‌زمینه طلایی ثابت */
    color: #1a202c !important; /* رنگ آیکون داخلی */
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25) !important;
    z-index: 99 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important; /* لغو ماتی و خاکستری بودن پیش‌فرض المنتور */
    visibility: visible !important;
    transition: all 0.3s ease !important;
}

/* تنظیم دقیق فلش بومی سوئیپر (در صورت عدم استفاده از SVG) */
.perfect-before-after [class*="swiper-button-next"]::after,
.perfect-before-after [class*="swiper-button-prev"]::after,
.perfect-before-after [class*="swiper-button"]::after {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #1a202c !important; /* مشکی پررنگ */
}

/* تغییر رنگ و وضوح آیکون‌های SVG اختصاصی المنتور در داخل دکمه‌ها */
.perfect-before-after [class*="swiper-button-next"] svg,
.perfect-before-after [class*="swiper-button-prev"] svg,
.perfect-before-after [class*="swiper-button"] svg {
    fill: #1a202c !important;
    stroke: #1a202c !important;
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}

/* حالت هاور دکمه‌های ناوبری (معکوس شدن رنگ پس‌زمینه و آیکون) */
.perfect-before-after [class*="swiper-button-next"]:hover,
.perfect-before-after [class*="swiper-button-prev"]:hover {
    background-color: #1a202c !important; /* پس‌زمینه تیره */
    color: #f1b31c !important; /* آیکون طلایی */
    transform: scale(1.1) !important;
}

/* معکوس شدن رنگ آیکون‌های SVG در حالت هاور */
.perfect-before-after [class*="swiper-button-next"]:hover svg,
.perfect-before-after [class*="swiper-button-prev"]:hover svg {
    fill: #f1b31c !important;
    stroke: #f1b31c !important;
}

/* تنظیم فاصله فلش‌ها از دو لبه کناری کادرها در حالت دسکتاپ و تبلت */
.perfect-before-after [class*="swiper-button-next"] {
    right: 15px !important;
}
.perfect-before-after [class*="swiper-button-prev"] {
    left: 15px !important;
}

/* ۹. بهینه‌سازی ابعاد و چیدمان دکمه‌های ناوبری در موبایل (صفحات کوچک لمسی) */
@media (max-width: 767px) {
    .perfect-before-after [class*="swiper-button-next"],
    .perfect-before-after [class*="swiper-button-prev"] {
        display: flex !important; /* نمایش دکمه‌ها در موبایل */
        width: 34px !important; /* کوچک‌تر کردن کادر دایره برای عدم تداخل با عکس */
        height: 34px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    }

    /* کوچک کردن آیکون داخلی در موبایل */
    .perfect-before-after [class*="swiper-button-next"]::after,
    .perfect-before-after [class*="swiper-button-prev"]::after,
    .perfect-before-after [class*="swiper-button"]::after {
        font-size: 12px !important;
    }

    .perfect-before-after [class*="swiper-button-next"] svg,
    .perfect-before-after [class*="swiper-button-prev"] svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* نزدیک‌تر کردن دکمه‌ها به لبه صفحه در موبایل */
    .perfect-before-after [class*="swiper-button-next"] {
        right: 8px !important;
    }
    .perfect-before-after [class*="swiper-button-prev"] {
        left: 8px !important;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3d615b7 *//* کادر اصلی مچ شده با کادر قبلی */
.fardo-cta-banner {
  width: 100%;
  background-color: #1a202c;
  border-radius: 12px;
  padding: 45px 25px;
  text-align: center;
  box-sizing: border-box;
  font-family: 'Segoe UI', Roboto, sans-serif !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fardo-cta-banner h2 {
  color: #ffffff !important;
  font-size: 28px !important;
  font-weight: bold !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.3 !important;
}

.fardo-cta-banner p {
  color: #a0aec0 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 0 20px 0 !important;
  text-align: center !important;
}

/* لینک هایلایت طلایی استاندارد */
.fardo-highlight-link {
  color: #f1b31c !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

/* کانتینر فلکس‌باکس دکمه‌ها هماهنگ با نسخه قبل */
.fardo-cta-buttons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  margin-top: 20px !important;
  width: 100% !important;
  flex-wrap: wrap;
}

/* استایل کادر راهنمای کنار دکمه */
.fardo-btn-label {
  display: inline-block !important;
  background-color: rgba(241, 179, 28, 0.15) !important;
  color: #f1b31c !important;
  padding: 8px 18px !important;
  border-radius: 30px !important;
  font-weight: bold !important;
  font-size: 13px !important;
  border: 1px solid rgba(241, 179, 28, 0.3) !important;
  box-sizing: border-box;
}

/* دکمه اصلی طلایی تماس مچ شده با نسخه قبل */
.fardo-btn-solid {
  display: inline-block !important;
  background-color: #f1b31c !important;
  color: #1a202c !important;
  text-decoration: none !important;
  font-weight: bold !important;
  font-size: 15px !important;
  padding: 11px 30px !important;
  border-radius: 30px !important;
  box-shadow: 0 4px 15px rgba(241, 179, 28, 0.3) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box;
  cursor: pointer;
}

.fardo-btn-solid:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(241, 179, 28, 0.45) !important;
  background-color: #f1b31c !important;
}

/* ریسپانسیو اختصاصی موبایل */
@media (max-width: 768px) {
  .fardo-cta-banner {
    padding: 35px 20px;
  }
  .fardo-cta-banner h2 { 
    font-size: 22px !important; 
  }
  .fardo-cta-banner p { 
    font-size: 13.5px !important; 
  }
  .fardo-cta-buttons {
    flex-direction: column !important;
    gap: 15px !important;
  }
  .fardo-btn-solid, .fardo-btn-label {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}/* End custom CSS */