.elementor-55 .elementor-element.elementor-element-2b3968c{--display:flex;--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;}@media(min-width:768px){.elementor-55 .elementor-element.elementor-element-2b3968c{--content-width:100%;}}/* Start custom CSS for html, class: .elementor-element-5746816 *//* تعریف متغیرها اختصاصی برای این سکشن */
.hero-section-wrapper {
    --text-main: #0f172a;
    --text-muted: #64748b;
    --gradient-start: #e0f2fe;
    --gradient-end: #fbcfe8;
    --accent-blue: #3b82f6;
    --accent-pink: #ec4899;
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(255, 255, 255, 0.8);
    --glass-shadow: 0 8px 32px 0 rgba(148, 163, 184, 0.15);
    --radius-lg: 24px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* افکت‌های پایه شیشه‌ای */
.hero-section-wrapper .glass {
    background: var(--glass-bg); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px); 
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* دکمه‌ها */
.hero-section-wrapper .btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.8rem 1.5rem; border-radius: 12px; font-weight: 600;
    transition: var(--transition);
    font-size: 1rem;
    text-decoration: none;
}
.hero-section-wrapper .btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2); 
}
.hero-section-wrapper .btn-primary { 
    background: linear-gradient(to left, var(--accent-blue), var(--accent-pink)); 
    color: white; 
    border: none; 
}
.hero-section-wrapper .btn-secondary { 
    background: var(--glass-bg); 
    border: 1px solid var(--glass-border); 
    color: var(--text-main);
}

/* ساختار کلی هیرو */
.hero-section-wrapper .hero { 
    display: flex; align-items: center; justify-content: space-between; 
    min-height: 100vh; padding-top: 100px; gap: 4rem; 
}
.hero-section-wrapper .hero-content { flex: 1; }

/* متون و بج‌ها */
.hero-section-wrapper .badge { 
    display: inline-block; padding: 0.4rem 1rem; border-radius: 100px; 
    font-size: 0.85rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--text-main);
}
.hero-section-wrapper .text-gradient {
    background: linear-gradient(to left, var(--accent-blue), var(--accent-pink));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-section-wrapper .hero-title { font-size: 3.5rem; line-height: 1.2; margin-bottom: 1.5rem; color: var(--text-main); }
.hero-section-wrapper .hero-subtitle { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2.5rem; max-width: 500px; }
.hero-section-wrapper .hero-ctas { display: flex; gap: 1rem; }

/* موک‌آپ و آیکون‌ها */
.hero-section-wrapper .hero-mockup { flex: 1; position: relative; perspective: 1000px; }
.hero-section-wrapper .mockup-window { 
    width: 100%; height: 350px; border-radius: var(--radius-lg); padding: 1rem; 
    transform: rotateY(-15deg) rotateX(5deg); transition: transform 0.5s ease; 
}
.hero-section-wrapper .mockup-header { display: flex; gap: 6px; margin-bottom: 1rem; }
.hero-section-wrapper .dot { width: 10px; height: 10px; border-radius: 50%; }
.hero-section-wrapper .dot.red { background: #ef4444; } 
.hero-section-wrapper .dot.yellow { background: #f59e0b; } 
.hero-section-wrapper .dot.green { background: #10b981; }

.hero-section-wrapper .mockup-body { height: calc(100% - 30px); display: flex; flex-direction: column; gap: 1rem; }
.hero-section-wrapper .mockup-chart { height: 100px; background: linear-gradient(to right, transparent, var(--gradient-start)); border-radius: 8px; opacity: 0.5; }
.hero-section-wrapper .mockup-bars { display: flex; align-items: flex-end; gap: 1rem; height: 120px; }
.hero-section-wrapper .mockup-bars .bar { flex: 1; background: var(--accent-blue); border-radius: 4px 4px 0 0; opacity: 0.8; }

.hero-section-wrapper .floating-icon { 
    position: absolute; width: 60px; height: 60px; border-radius: 16px; 
    display: flex; align-items: center; justify-content: center; color: var(--accent-blue); 
    animation: float 6s infinite alternate; 
}
.hero-section-wrapper .icon-1 { top: -20px; right: -20px; animation-delay: 0s; }
.hero-section-wrapper .icon-2 { bottom: 40px; right: -30px; animation-delay: -2s; }
.hero-section-wrapper .icon-3 { bottom: -20px; left: 20px; animation-delay: -4s; }

/* ریسپانسیو */
@media (max-width: 992px) {
    .hero-section-wrapper .hero { flex-direction: column; text-align: center; }
    .hero-section-wrapper .hero-mockup { transform: none; width: 100%; max-width: 500px; margin: 0 auto; }
    .hero-section-wrapper .mockup-window { transform: none; }
    .hero-section-wrapper .hero-ctas { justify-content: center; }
}
@media (max-width: 768px) {
    .hero-section-wrapper .hero-title { font-size: 2.5rem; }
    .hero-section-wrapper .hero { padding-top: 150px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2b3968c *//* تنظیمات کلی کانتینر Hero */
.hero { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    min-height: 10vh; 
    padding-top: 100px; 
    gap: 4rem; 
}
.hero-content { flex: 1; }

/* استایل متون و بج (Badge) */
.badge { 
    display: inline-block; 
    padding: 0.4rem 1rem; 
    border-radius: 100px; 
    font-size: 0.85rem; 
    font-weight: 600; 
    margin-bottom: 1.5rem; 
}
.hero-title { 
    font-size: 3.5rem; 
    line-height: 1.2; 
    margin-bottom: 1.5rem; 
}
.hero-subtitle { 
    font-size: 1.1rem; 
    color: var(--text-muted); 
    margin-bottom: 2.5rem; 
    max-width: 500px; 
}

/* دکمه‌ها */
.hero-ctas { display: flex; gap: 1rem; }

/* استایل موک‌آپ شیشه‌ای (سمت چپ) */
.hero-mockup { 
    flex: 1; 
    position: relative; 
    perspective: 1000px; /* برای ایجاد عمق 3D */
}
.mockup-window { 
    width: 100%; 
    height: 350px; 
    border-radius: var(--radius-lg); 
    padding: 1rem; 
    transform: rotateY(-15deg) rotateX(5deg); /* چرخش 3 بعدی */
    transition: transform 0.5s ease; 
}

/* دایره‌های رنگی بالای موک‌آپ */
.mockup-header { display: flex; gap: 6px; margin-bottom: 1rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #ef4444; } 
.dot.yellow { background: #f59e0b; } 
.dot.green { background: #10b981; }

/* نمودارهای داخل موک‌آپ */
.mockup-body { 
    height: calc(100% - 30px); 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
}
.mockup-chart { 
    height: 100px; 
    background: linear-gradient(to right, transparent, var(--gradient-start)); 
    border-radius: 8px; 
    opacity: 0.5; 
}
.mockup-bars { 
    display: flex; 
    align-items: flex-end; 
    gap: 1rem; 
    height: 120px; 
}
.mockup-bars .bar { 
    flex: 1; 
    background: var(--accent-blue); 
    border-radius: 4px 4px 0 0; 
    opacity: 0.8; 
}

/* آیکون‌های شناور دور موک‌آپ */
.floating-icon { 
    position: absolute; 
    width: 60px; 
    height: 60px; 
    border-radius: 16px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--accent-blue); 
    animation: float 6s infinite alternate; 
}
.icon-1 { top: -20px; right: -20px; animation-delay: 0s; }
.icon-2 { bottom: 40px; right: -30px; animation-delay: -2s; }
.icon-3 { bottom: -20px; left: 20px; animation-delay: -4s; }

/* ریسپانسیو برای تبلت و موبایل */
@media (max-width: 992px) {
    .hero { flex-direction: column; text-align: center; }
    .hero-mockup { transform: none; width: 100%; max-width: 500px; margin: 0 auto; }
    .mockup-window { transform: none; }
    .hero-ctas { justify-content: center; }
}
@media (max-width: 768px) {
    .hero-title { font-size: 2.5rem; }
    .hero { padding-top: 150px; }
}/* End custom CSS */