.elementor-21 .elementor-element.elementor-element-8ebdec4{--display:flex;--min-height:800px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overflow:hidden;}.elementor-21 .elementor-element.elementor-element-8ebdec4:not(.elementor-motion-effects-element-type-background), .elementor-21 .elementor-element.elementor-element-8ebdec4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#3E26FF;}.elementor-21 .elementor-element.elementor-element-8ebdec4.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-21 .elementor-element.elementor-element-96238f5{--display:flex;--position:absolute;--overflow:hidden;top:336px;--z-index:10;}body:not(.rtl) .elementor-21 .elementor-element.elementor-element-96238f5{left:-106px;}body.rtl .elementor-21 .elementor-element.elementor-element-96238f5{right:-106px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-21 .elementor-element.elementor-element-91365c3.elementor-element{--align-self:flex-start;}.elementor-21 .elementor-element.elementor-element-91365c3{text-align:end;}.elementor-21 .elementor-element.elementor-element-91365c3 .elementor-heading-title{font-family:"bakh", Sans-serif;font-size:48px;font-weight:900;color:#FAFAFA;}.elementor-21 .elementor-element.elementor-element-abcca33 .elementor-heading-title{font-family:"bakh", Sans-serif;font-size:48px;font-weight:600;color:#FFF7F7;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-21 .elementor-element.elementor-element-fa4437c{font-family:"vazir", Sans-serif;font-size:22px;font-weight:600;color:var( --e-global-color-386ec43 );}.elementor-21 .elementor-element.elementor-element-4e720fe{--display:flex;--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--justify-content:flex-end;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-21 .elementor-element.elementor-element-6bffda5 .elementor-button{background-color:transparent;background-image:linear-gradient(180deg, #EA18D2 0%, #D27270 100%);border-radius:15px 15px 15px 15px;}.elementor-21 .elementor-element.elementor-element-6bffda5 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-21 .elementor-element.elementor-element-07a4947 .elementor-button{background-color:var( --e-global-color-386ec43 );fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-radius:15px 15px 15px 15px;}.elementor-21 .elementor-element.elementor-element-07a4947 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-21 .elementor-element.elementor-element-7beac0c{--display:flex;--position:absolute;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:420px;--z-index:10;}.elementor-21 .elementor-element.elementor-element-7beac0c.e-con{--align-self:center;}body:not(.rtl) .elementor-21 .elementor-element.elementor-element-7beac0c{left:750px;}body.rtl .elementor-21 .elementor-element.elementor-element-7beac0c{right:750px;}.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-21 .elementor-element.elementor-element-34a00c1{--display:flex;--position:absolute;--min-height:30px;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:316px;--z-index:10;}.elementor-21 .elementor-element.elementor-element-34a00c1.e-con{--align-self:center;}body:not(.rtl) .elementor-21 .elementor-element.elementor-element-34a00c1{right:220px;}body.rtl .elementor-21 .elementor-element.elementor-element-34a00c1{left:220px;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-21 .elementor-element.elementor-element-ba0b4c9 .elementor-icon-wrapper{text-align:start;}.elementor-21 .elementor-element.elementor-element-ba0b4c9 .elementor-icon{font-size:150px;}.elementor-21 .elementor-element.elementor-element-ba0b4c9 .elementor-icon svg{height:150px;}.elementor-21 .elementor-element.elementor-element-ba0b4c9 .elementor-icon i, .elementor-21 .elementor-element.elementor-element-ba0b4c9 .elementor-icon svg{transform:rotate(268deg);}.elementor-21 .elementor-element.elementor-element-e2c3914{--display:flex;--position:absolute;--overflow:hidden;top:207px;--z-index:10;}.elementor-21 .elementor-element.elementor-element-e2c3914.e-con{--align-self:center;}body:not(.rtl) .elementor-21 .elementor-element.elementor-element-e2c3914{left:842px;}body.rtl .elementor-21 .elementor-element.elementor-element-e2c3914{right:842px;}.elementor-21 .elementor-element.elementor-element-04ee3cc{text-align:end;}.elementor-21 .elementor-element.elementor-element-8fb3d3a{--display:flex;--min-height:700px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overflow:hidden;border-style:none;--border-style:none;--border-radius:50% 50% 50% 50%;}.elementor-21 .elementor-element.elementor-element-8fb3d3a:not(.elementor-motion-effects-element-type-background), .elementor-21 .elementor-element.elementor-element-8fb3d3a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#A51DE6;}.elementor-21 .elementor-element.elementor-element-ca2b323{--display:flex;--min-height:565px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );border-style:none;--border-style:none;--border-radius:50% 50% 50% 50%;}.elementor-21 .elementor-element.elementor-element-ca2b323:not(.elementor-motion-effects-element-type-background), .elementor-21 .elementor-element.elementor-element-ca2b323 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#C81BDC;}.elementor-21 .elementor-element.elementor-element-5431de1{--display:flex;--min-height:390px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:50% 50% 50% 50%;}.elementor-21 .elementor-element.elementor-element-5431de1:not(.elementor-motion-effects-element-type-background), .elementor-21 .elementor-element.elementor-element-5431de1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #EA18D2 0%, #C18154 100%);}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){body:not(.rtl) .elementor-21 .elementor-element.elementor-element-e2c3914{left:192px;}body.rtl .elementor-21 .elementor-element.elementor-element-e2c3914{right:192px;}.elementor-21 .elementor-element.elementor-element-e2c3914{top:330px;}}@media(max-width:767px){.elementor-21 .elementor-element.elementor-element-8ebdec4{--min-height:480px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-21 .elementor-element.elementor-element-8ebdec4.e-con{--align-self:center;}body:not(.rtl) .elementor-21 .elementor-element.elementor-element-96238f5{left:19vw;}body.rtl .elementor-21 .elementor-element.elementor-element-96238f5{right:19vw;}.elementor-21 .elementor-element.elementor-element-96238f5{top:8vw;}.elementor-21 .elementor-element.elementor-element-91365c3{text-align:center;}.elementor-21 .elementor-element.elementor-element-91365c3 .elementor-heading-title{font-size:8vw;}.elementor-21 .elementor-element.elementor-element-7beac0c{--width:500px;top:22vh;}body:not(.rtl) .elementor-21 .elementor-element.elementor-element-7beac0c{left:-10vh;}body.rtl .elementor-21 .elementor-element.elementor-element-7beac0c{right:-10vh;}.elementor-21 .elementor-element.elementor-element-34a00c1{--width:20vw;top:31vh;}body:not(.rtl) .elementor-21 .elementor-element.elementor-element-34a00c1{right:1vh;}body.rtl .elementor-21 .elementor-element.elementor-element-34a00c1{left:1vh;}.elementor-21 .elementor-element.elementor-element-ba0b4c9 .elementor-icon{font-size:20vw;}.elementor-21 .elementor-element.elementor-element-ba0b4c9 .elementor-icon svg{height:20vw;}.elementor-21 .elementor-element.elementor-element-ba0b4c9 .elementor-icon i, .elementor-21 .elementor-element.elementor-element-ba0b4c9 .elementor-icon svg{transform:rotate(275deg);}.elementor-21 .elementor-element.elementor-element-e2c3914{--width:300px;top:40vw;}body:not(.rtl) .elementor-21 .elementor-element.elementor-element-e2c3914{left:19vw;}body.rtl .elementor-21 .elementor-element.elementor-element-e2c3914{right:19vw;}.elementor-21 .elementor-element.elementor-element-8fb3d3a{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(min-width:768px){.elementor-21 .elementor-element.elementor-element-8ebdec4{--width:100%;}.elementor-21 .elementor-element.elementor-element-7beac0c{--width:50%;}.elementor-21 .elementor-element.elementor-element-34a00c1{--width:10%;}.elementor-21 .elementor-element.elementor-element-e2c3914{--width:35%;}.elementor-21 .elementor-element.elementor-element-8fb3d3a{--width:700px;}.elementor-21 .elementor-element.elementor-element-ca2b323{--width:565px;}.elementor-21 .elementor-element.elementor-element-5431de1{--width:390px;}}@media(max-width:1024px) and (min-width:768px){.elementor-21 .elementor-element.elementor-element-e2c3914{--width:48%;}}/* Start custom CSS for image, class: .elementor-element-a415c78 *//* ۱. استایل خود عکس و اعمال انیمیشن اسکرول */
.elementor-21 .elementor-element.elementor-element-a415c78 img {
    width: 100%;
    height: auto;
    display: block;
    animation: scrollMobileSite 8s ease-in-out infinite alternate;
}

/* ۲. انیمیشن اسکرول عکس داخل قاب */
@keyframes scrollMobileSite {
    0%, 10% { transform: translateY(0); }
    90%, 100% { transform: translateY(-60%); }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7beac0c *//* =========================================
   ۱. بدنه اصلی آیفون و تنظیمات پایه
   ========================================= */
.elementor-21 .elementor-element.elementor-element-7beac0c {
    width: 130px; 
    height: 275px; 
    border: 5px solid #EAEAEA; 
    border-radius: 20px; 
    box-shadow: -15px 20px 40px rgba(0, 0, 0, 0.25); 
    background-color: #000; 
    overflow: hidden; 
    position: absolute;
    z-index: 15; 
    
   
    transform-origin: left bottom; 
    
   
    animation: mwpIphoneEntrance 1.5s ease-out forwards;
     animation-timing-function: cubic-bezier(.165, .84, .44, 1) !important;
   
}

/* =========================================
   ۲. ناچ (بریدگی بالای صفحه آیفون)
   ========================================= */
.elementor-21 .elementor-element.elementor-element-7beac0c::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px; 
    height: 10px; 
    background-color: #EAEAEA; 
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    z-index: 20; 
}

/* =========================================
   ۳. ریسپانسیو (بهینه‌سازی برای موبایل)
   ========================================= */
@media (max-width: 768px) {
    .elementor-21 .elementor-element.elementor-element-7beac0c {
        /* استفاده از ویژگی‌های مدرن برای جلوگیری از تداخل با transform در انیمیشن */
        translate: -50% 0 !important; 
        scale: 0.6 !important;
    }
}

/* =========================================
   ۴. تعریف انیمیشن ورود چند مرحله‌ای (Overshoot)
   ========================================= */
@keyframes mwpIphoneEntrance {
    0% {
        opacity: 0;
        /* شروع از حالت محو و خمیده به سمت چپ (منفی ۳۰ درجه) */
        transform: rotate(-30deg); 
    }
    40% {
        opacity: 0.6;
        /* در مسیر بالا آمدن و شفاف شدن */
        transform: rotate(-12deg); 
    }
    70% {
        opacity: 1;
        /* عبور جزئی از خط عمود برای ایجاد حس فنری (Bounce) */
        transform: rotate(3deg); 
    }
    85% {
        opacity: 1;
        /* برگشت نرم به سمت عقب */
        transform: rotate(-1deg); 
    }
    100% {
        opacity: 1;
        /* ایست کامل در زاویه صفر درجه (کاملاً صاف) */
        transform: rotate(0deg);
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a7e5890 */.elementor-21 .elementor-element.elementor-element-a7e5890 {
    position: absolute;
    top: 9.5%; 
    left: -3.5%;
  
    width: 100% !important; 
    
    height: 36%;
    overflow: hidden; 
    z-index: 10; 
    transform: skewY(26.1deg);
}
.elementor-21 .elementor-element.elementor-element-a7e5890 .elementor-widget-container,
.elementor-21 .elementor-element.elementor-element-a7e5890 .elementor-image,
.elementor-21 .elementor-element.elementor-element-a7e5890 a,
.elementor-21 .elementor-element.elementor-element-a7e5890 img {
    width: 59.5% !important;
    max-width: none !important; 
    display: block !important;
    height: auto;
}
.elementor-21 .elementor-element.elementor-element-a7e5890 img {
    /* اجرای انیمیشن 10 ثانیه‌ای، بی‌نهایت و رفت‌وبرگشتی */
    animation: autoScrollMockup 10s ease-in-out infinite alternate;
}

/* ۴. تعریف کلیدهای انیمیشن (Keyframes) */
@keyframes autoScrollMockup {
    0%, 10% {
        /* شروع حرکت: 10 درصد از زمان را در بالای سایت مکث می‌کند تا کاربر هدر را ببیند */
        transform: translateY(0);
    }
    90%, 100% {
        /* پایان حرکت: به سمت پایین لیز می‌خورد و مکث می‌کند */
        /* ⚠️ نکته مهم: این عدد را بسته به بلندی عکس خودت تغییر بده */
        transform: translateY(-65%); 
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ca2b323 */@media (max-width: 768px) {
    .elementor-21 .elementor-element.elementor-element-ca2b323 {
        position: absolute;
        width: 150vw;
        height: auto;
        aspect-ratio: 1 / 1;
        
        /* فرمول طلایی وسط‌چین کردن دایره ۱۵۰ درصدی */
        left: 50%;
        margin-left: -75vw; 
        
        top: 5%;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8fb3d3a */.elementor-21 .elementor-element.elementor-element-8fb3d3a {
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}

@media (max-width: 768px) {
    .elementor-21 .elementor-element.elementor-element-8fb3d3a {
        position: absolute;
        width: 200vw;
        height: auto;
        aspect-ratio: 1 / 1;
        
        /* فرمول طلایی وسط‌چین کردن دایره ۲۰۰ درصدی */
        left: 50%;
        margin-left: -100vw; 
        
        top: 5%;
        
        -webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 60%);
        mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 60%);
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8ebdec4 *//*.elementor-21 .elementor-element.elementor-element-8ebdec4 .animated {*/
/*    animation-timing-function: cubic-bezier(.165, .84, .44, 1) !important;*/
/*    animation-duration: 1.5s !important;*/
    
/*}*/
.elementor-21 .elementor-element.elementor-element-8ebdec4::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    
    /* ۱. ارتفاع محوشدگی را بسیار زیاد کردیم (می‌توانی تغییرش دهی) */
    height: 400px; 
    
    /* ۲. شیب بسیار ملایم: استفاده از rgba برای جلوگیری از سایه خاکستری در مرورگرها */
  background: linear-gradient(
        to bottom, 
        rgba(255, 255, 255, 0) 0%,      /* نقطه صفر: کاملاً نامرئی */
        rgba(255, 255, 255, 0.02) 15%,  /* شروع بسیار بسیار ملایم (فقط ۲ درصد) */
        rgba(255, 255, 255, 0.08) 30%,  /* هاله‌ای نامحسوس */
        rgba(255, 255, 255, 0.18) 45%,  /* کم‌کم وارد فاز محو شدن می‌شود */
        rgba(255, 255, 255, 0.35) 60%,  /* غلظت به ۳۵ درصد می‌رسد */
        rgba(255, 255, 255, 0.60) 75%,  /* عبور از نیمه‌شفافی */
        rgba(255, 255, 255, 0.85) 88%,  /* غلظت شدید می‌شود */
        rgba(255, 255, 255, 0.96) 95%,  /* تقریباً سفید کامل */
        rgba(255, 255, 255, 1) 100%     /* رسیدن به مرز پایینی: سفید خالص */
    );
    
    z-index: 1; 
    pointer-events: none; 
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'bakh';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://meliwordpress.ir/wp-content/uploads/2026/06/YekanBakh-Regular-1.ttf') format('truetype');
}
/* End Custom Fonts CSS */