.elementor-14140 .elementor-element.elementor-element-274133ba{--display:flex;}/* Start custom CSS for text-editor, class: .elementor-element-23f9cfef *//* * 🚀 Modern Article Styles - Final Optimized 2026
 * Scoped Class: .modern-article-wrapper
 * Features: Responsive, Vazirmatn Font, Instagram Box, Mobile Tables
 */

/* 1. Scoped Variables & Core Layout */
.modern-article-wrapper {
    /* --- Restored Original Blue/Amber Palette --- */
    --ma-primary: #3b82f6;        /* Trust Blue */
    --ma-primary-dark: #1e40af;   /* Deep Blue (Original H1 Color) */
    --ma-secondary: #0f172a;      /* Dark Slate */
    --ma-accent: #f59e0b;         /* Amber Highlight */
    --ma-bg-light: #f8fafc;       
    --ma-bg-white: #ffffff;
    --ma-bg-bio: #eff6ff;
    --ma-text-main: #334155;
    --ma-text-muted: #64748b;
    --ma-border: #e2e8f0;

    /* --- Spacing & Geometry --- */
    --ma-radius: 16px;
    --ma-spacing-md: 1.5rem;
    --ma-spacing-lg: 2.5rem;
    
    /* --- Typography Setup (Vazirmatn) --- */
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    line-height: 1.8;
    color: var(--ma-text-main);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%; /* Prevents horizontal scroll */
    direction: rtl;
    text-align: justify;
    font-size: 16px;
}

.modern-article-wrapper *, 
.modern-article-wrapper *::before, 
.modern-article-wrapper *::after {
    box-sizing: border-box;
}

/* 2. Intelligent Typography (Headings) */
.modern-article-wrapper h1,
.modern-article-wrapper h2,
.modern-article-wrapper h3,
.modern-article-wrapper h4 {
    line-height: 1.4;
    margin-top: 2.2rem;
    margin-bottom: 1rem;
    font-weight: 800;
}

/* H1: Main Title - Size 20pt (~26px) - Restored Color */
.modern-article-wrapper h1 {
    font-size: 26px !important; /* Size 20pt approx */
    color: var(--ma-primary-dark); /* Restored Deep Blue */
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 2rem;
    border-bottom: 3px solid var(--ma-accent);
    display: inline-block;
    width: auto;
    max-width: 100%;
}

/* H2: Section Title - Size 18pt (~24px) */
.modern-article-wrapper h2 {
    font-size: 22px !important; /* Size 18pt approx */
    color: var(--ma-secondary);
    padding-right: 15px;
    border-right: 5px solid var(--ma-accent); /* Orange Vertical Line */
    background: linear-gradient(to left, rgba(245, 158, 11, 0.08), transparent);
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 4px;
}

/* H3, H4: Sub-sections - Size 16pt (~20px) */
.modern-article-wrapper h3, 
.modern-article-wrapper h4 {
    font-size: 19px !important; /* Size 16pt approx */
    color: var(--ma-primary-dark);
    padding-right: 12px;
    border-right: 4px solid var(--ma-primary); /* Blue Vertical Line */
}

.modern-article-wrapper p { margin-bottom: 1.5rem; }
.modern-article-wrapper ul, .modern-article-wrapper ol { padding-right: 25px; margin-bottom: 1.5rem; }
.modern-article-wrapper li { margin-bottom: 0.5rem; padding-left: 0.5rem; }

/* 3. Abstract Box */
.modern-article-wrapper .ma-abstract {
    background-color: #eff6ff;
    border-right: 5px solid var(--ma-primary);
    padding: var(--ma-spacing-md);
    border-radius: var(--ma-radius);
    margin-bottom: var(--ma-spacing-lg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.modern-article-wrapper .ma-abstract h2,
.modern-article-wrapper .ma-abstract h3 {
    color: var(--ma-primary-dark);
    margin-top: 0;
    border-right: none;
    padding-right: 0;
    background: none;
    font-size: 20px !important;
}

/* 4. Branding Box */
.modern-article-wrapper .ma-branding {
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    color: #fff;
    padding: var(--ma-spacing-md);
    border-radius: var(--ma-radius);
    margin: var(--ma-spacing-lg) 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
}
@media (min-width: 768px) {
    .modern-article-wrapper .ma-branding { flex-direction: row; align-items: center; justify-content: space-between; }
}
.modern-article-wrapper .ma-branding h4 {
    color: var(--ma-accent);
    margin: 0 0 0.5rem 0;
    font-size: 18px !important;
    border: none; padding: 0; background: none;
}
.modern-article-wrapper .ma-branding p { color: #cbd5e1; margin: 0; font-size: 14px; }
.modern-article-wrapper .ma-brand-logo {
    width: 65px; height: 65px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.2);
}

/* 5. Instagram Box (RESTORED) */
.modern-article-wrapper .ma-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    padding: 3px;
    border-radius: var(--ma-radius);
    margin: var(--ma-spacing-lg) 0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}
.modern-article-wrapper .ma-instagram:hover { transform: translateY(-3px); }

.modern-article-wrapper .ma-instagram-inner {
    background: var(--ma-bg-white);
    border-radius: calc(var(--ma-radius) - 2px);
    padding: var(--ma-spacing-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.modern-article-wrapper .ma-instagram h4 {
    background: linear-gradient(45deg, #f09433, #bc1888);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    font-weight: 900;
    font-size: 20px !important;
    border: none; padding: 0;
}
.modern-article-wrapper .ma-insta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 0.5rem;
    padding: 0.6rem 2rem;
    background: linear-gradient(45deg, #dc2743, #cc2366);
    color: white !important;
    text-decoration: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(220, 39, 67, 0.3);
    transition: 0.3s;
}
.modern-article-wrapper .ma-insta-btn:hover { transform: scale(1.05); box-shadow: 0 6px 15px rgba(220, 39, 67, 0.4); }

/* 6. CTA Box */
.modern-article-wrapper .ma-cta {
    background-color: var(--ma-bg-white);
    border: 2px solid var(--ma-primary);
    border-radius: var(--ma-radius);
    padding: var(--ma-spacing-lg);
    text-align: center;
    margin: 2rem 0;
    position: relative;
    overflow: hidden;
}
.modern-article-wrapper .ma-cta::before {
    content: ''; position: absolute; top: -20px; right: -20px; width: 100px; height: 100px; background: var(--ma-primary); opacity: 0.08; border-radius: 50%;
}
.modern-article-wrapper .ma-cta h3 {
    color: var(--ma-secondary);
    margin-top: 0;
    border: none; padding: 0; background: none;
    font-size: 20px !important;
}
.modern-article-wrapper .ma-cta-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.modern-article-wrapper .ma-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; background-color: var(--ma-primary); color: white !important; padding: 0.8rem 2.5rem; border-radius: 8px; text-decoration: none; font-weight: bold; transition: 0.3s; box-shadow: 0 4px 6px rgba(59, 130, 246, 0.4);
}
.modern-article-wrapper .ma-btn-primary:hover { background-color: var(--ma-primary-dark); transform: translateY(-2px); }

/* 7. Note Box (Info/Warning) */
.modern-article-wrapper .ma-note {
    padding: 15px 20px;
    border-radius: 8px;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.7;
    border-right: 4px solid;
    text-align: justify;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

/* 8. Optimized Table Styling (Mobile Friendly & Small Font) */
.modern-article-wrapper .sepehr-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 2rem 0;
    border: 1px solid var(--ma-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.modern-article-wrapper table {
    width: 100%;
    min-width: 600px; /* Forces scroll on mobile */
    border-collapse: collapse;
}
.modern-article-wrapper th {
    background-color: #eff6ff; /* Very Light Blue */
    color: var(--ma-secondary);
    padding: 12px 15px;
    text-align: right;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    border-bottom: 2px solid var(--ma-primary);
}
.modern-article-wrapper td {
    padding: 10px 15px;
    border-bottom: 1px solid var(--ma-border);
    font-size: 13.5px; /* Smaller font for better density */
    color: var(--ma-text-main);
    vertical-align: top;
    text-align: right !important; /* No Justify in tables */
    line-height: 1.6;
}
.modern-article-wrapper tr:nth-child(even) { background-color: #f8fafc; }
.modern-article-wrapper tr:hover td { background-color: #f1f5f9; }

/* 9. FAQ Section */
.modern-article-wrapper .sepehr-faq-item {
    background: #fff; border: 1px solid var(--ma-border); border-radius: 10px; margin-bottom: 10px; padding: 5px; transition: 0.2s;
}
.modern-article-wrapper .sepehr-faq-item:hover { border-color: var(--ma-primary); }
.modern-article-wrapper .sepehr-faq-item summary {
    cursor: pointer; font-weight: 700; padding: 12px 15px; list-style: none; position: relative; padding-left: 30px; font-size: 15px; color: var(--ma-secondary);
}
.modern-article-wrapper .sepehr-faq-item summary::-webkit-details-marker { display: none; }
.modern-article-wrapper .sepehr-faq-item summary::after {
    content: '+'; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--ma-text-muted);
}
.modern-article-wrapper .sepehr-faq-item[open] summary::after { content: '-'; color: var(--ma-accent); }
.modern-article-wrapper .sepehr-faq-item p { padding: 0 15px 15px 15px; margin: 0; font-size: 14px; color: var(--ma-text-main); animation: fadeIn 0.3s; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* 10. Icons (CSS-Only / No-SVG) */
.modern-article-wrapper .ma-icon {
    display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; font-family: sans-serif; font-style: normal;
}
.modern-article-wrapper .ma-icon-doc::before { content: "📄"; font-size: 20px; }
.modern-article-wrapper .ma-icon-brand::before { content: "✨"; font-size: 20px; }
.modern-article-wrapper .ma-icon-phone::before { content: "📞"; font-size: 18px; color: white; }
.modern-article-wrapper .ma-icon-insta::before { content: "📸"; font-size: 24px; } /* Camera Icon for Insta */

/* 11. Mobile Adjustments */
@media (max-width: 768px) {
    .modern-article-wrapper { 
        padding: 0 2px; /* Minimal side padding */
    } 
    .modern-article-wrapper h1 { font-size: 22px !important; }
    .modern-article-wrapper h2 { font-size: 19px !important; }
    .modern-article-wrapper h3, 
    .modern-article-wrapper h4 { font-size: 17px !important; }
    
    .modern-article-wrapper .ma-branding { text-align: center; gap: 1.5rem; }
    .modern-article-wrapper .ma-cta-buttons { flex-direction: column; width: 100%; }
    .modern-article-wrapper .ma-btn-primary { width: 100%; }
    
    /* Table font adjustments for mobile */
    .modern-article-wrapper th, 
    .modern-article-wrapper td {
        padding: 8px 10px;
        font-size: 13px; 
    }
}/* End custom CSS */