.elementor-27928 .elementor-element.elementor-element-296bfec{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;}.elementor-27928 .elementor-element.elementor-element-296bfec.e-con{--align-self:center;}/* Start custom CSS for html, class: .elementor-element-aedcf0e *//*
=================================================================
  کد اختصاصی و ایزوله برای باکس تماس با افکت سایه تپنده
  این کد هیچ تداخلی با سایر بخش‌های سایت ایجاد نمی‌کند.
=================================================================
*/

/* --- استایل اصلی باکس --- */
.scoped-pulsing-phone-box {
    position: relative; /* برای کارکرد صحیح انیمیشن */
    display: inline-flex; /* باعث می‌شود عنصر مانند یک کلمه در متن رفتار کند ولی بتواند عرض و ارتفاع بگیرد */
    align-items: center; /* تراز عمودی متن و آیکون در وسط */
    flex-direction: row-reverse; /* قرار دادن آیکون در سمت راست */
    
    padding: 10px 22px; /* پدینگ باریک (10 بالا و پایین، 22 چپ و راست) */
    
    background-color: #ffffff;
    border-radius: 50px; /* گوشه‌های کاملا گرد */
    text-decoration: none !important; /* جلوگیری از خط زیر لینک */
    color: #2d3748 !important; /* رنگ خوانای متن */
    
    font-family: 'Vazirmatn', sans-serif; /* فونت وزیرمتن یا فونت دلخواه شما */
    font-size: 1.05rem;
    font-weight: 600;
    
    transition: transform 0.3s ease, color 0.3s ease;
    
    /* سایه ثابت اولیه برای عمق دادن به باکس */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    
    /* اتصال انیمیشن سایه تپنده */
    animation: scoped-pulse-shadow 2.5s infinite;
}

/* --- استایل آیکون داخل باکس --- */
.scoped-pulsing-phone-box .phone-icon {
    margin-left: 15px; /* فاصله از شماره تلفن */
    margin-right: 0;
    fill: currentColor; /* رنگ آیکون از والد (تگ a) به ارث برده می‌شود */
}

/* --- افکت هاور فقط برای دسکتاپ --- */
@media (hover: hover) {
    .scoped-pulsing-phone-box:hover {
        transform: scale(1.05);
        color: #007bff !important;
    }
}

/* --- تعریف انیمیشن (Keyframes) با نام اختصاصی --- */
@keyframes scoped-pulse-shadow {
    0% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 123, 255, 0.4);
    }
    50% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 0 0 20px rgba(0, 123, 255, 0);
    }
    100% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

/*
======================================================
  بهینه‌سازی اختصاصی برای موبایل (کمتر از 768 پیکسل)
======================================================
*/
@media (max-width: 768px) {
    .scoped-pulsing-phone-box {
        font-size: 0.95rem;
        padding: 8px 18px; /* کمی کوچکتر و باریک‌تر در موبایل */
    }

    .scoped-pulsing-phone-box .phone-icon {
        margin-left: 10px; /* کاهش فاصله آیکون در موبایل */
    }
    
    /* پیشنهاد اختیاری: مخفی کردن متن شماره در موبایل برای سادگی بیشتر */
    /*
    .scoped-pulsing-phone-box .phone-number-text {
        display: none;
    }
    .scoped-pulsing-phone-box {
        width: 50px;
        height: 50px;
        justify-content: center;
        padding: 0;
    }
    .scoped-pulsing-phone-box .phone-icon {
        margin-left: 0;
    }
    */
}/* End custom CSS */