.elementor-5359 .elementor-element.elementor-element-5036af0a{--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;}.elementor-5359 .elementor-element.elementor-element-5036af0a:not(.elementor-motion-effects-element-type-background), .elementor-5359 .elementor-element.elementor-element-5036af0a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-5359 .elementor-element.elementor-element-f269887{background-color:var( --e-global-color-astglobalcolor4 );}/* Start custom CSS for html, class: .elementor-element-f269887 */:root {
--bbl-color-primary: #0077B6;
--bbl-color-alert: #D11D24;
--bbl-tone-1: #F4F8FB; /* cards */
--bbl-tone-2: #FFFFFF; /* section bg */
--bbl-text-1: #1F2937;
--bbl-text-2: #6B7280;
--bbl-border: #E5E7EB;
--bbl-radius: 16px;
--bbl-shadow: 0 8px 20px rgba(2, 12, 27, 0.06);
--bbl-tr: 180ms ease;
}


/* سیستم Dark Mode (اختیاری) —
توجه: در ریسپانسیو، بک‌گراند سکشن را سفید نگه می‌داریم و در مدیاکوئری‌ها override می‌کنیم. */
@media (prefers-color-scheme: dark) {
:root{
--bbl-tone-1:#0f172a;
--bbl-tone-2:#0b1220;
--bbl-text-1:#e5e7eb;
--bbl-text-2:#94a3b8;
--bbl-border:#1f2a44;
--bbl-shadow:0 8px 20px rgba(0,0,0,.35);
}
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.bbl-card,.bbl-icon i{transition:none !important;}
}


/* ------------------------------
2) Base (Desktop-first ≥1025px)
------------------------------ */
.bbl-quickfacts{ background:var(--bbl-tone-2); padding:3rem 0; }
/* افزایش specificity برای Elementor */
.elementor .bbl-quickfacts{ background:var(--bbl-tone-2) !important; }


.bbl-container{ max-width:1120px; margin:0 auto; padding:0 1rem; }


.bbl-heading{
margin:0 0 3rem 0;
text-align:center;
color:#000;
font-size:clamp(1.25rem,1.1rem + 1vw,1.75rem);
font-weight:800;
line-height:1.25;
}


/* Grid — Desktop: ستون‌های متوازن */
.bbl-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:1.25rem;
}


/* Cards */
.bbl-card{
background:#FFFFFF;
border:1px solid var(--bbl-border);
border-radius:var(--bbl-radius);
padding:1.25rem;
text-align:center;
transition:transform var(--bbl-tr), box-shadow var(--bbl-tr);
}
.bbl-card:hover{ transform:translateY(-2px); box-shadow:var(--bbl-shadow); }


.bbl-icon{ font-size:1.75rem; margin-bottom:.5rem; color:var(--bbl-color-primary); }
.bbl-icon i{ display:inline-block; line-height:1; }


.bbl-card-title{ margin:0 0 .25rem 0; font-weight:700; font-size:1.2rem; color:#000; }


.bbl-card-sub{ margin:0; font-size:.9rem; color:var(--bbl-text-2); }
.bbl-card-alert{ color:var(--bbl-color-alert); font-weight:700; }


/* ------------------------------
3) Tablet و پایین‌تر (≤1024px)
- بک‌گراند سکشن «سفید» می‌ماند (override)
------------------------------ */
@media (max-width:1024px){
.bbl-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.25rem; }
.bbl-heading{ margin-bottom:2.5rem; }
.bbl-quickfacts{ background:#FFFFFF !important; } /* سفید در ریسپانسیو */
.elementor .bbl-quickfacts{ background:#FFFFFF !important; }
}


/* ------------------------------
4) Mobile و پایین‌تر (≤767px)
- تک‌ستونه + بک‌گراند سفید
------------------------------ */
@media (max-width:767px){
.bbl-grid{ grid-template-columns:1fr; gap:1rem; }
.bbl-heading{ margin-bottom:2rem; }
.bbl-quickfacts{ background:#FFFFFF !important; }
.elementor .bbl-quickfacts{ background:#FFFFFF !important; }
}


/* ------------------------------
5) Tiny phones (≤360px)
------------------------------ */
@media (max-width:360px){
.bbl-card{ padding:.875rem; }
.bbl-icon{ font-size:1.5rem; }
}


/* ------------------------------
6) RTL (اختیاری)
------------------------------ */
html[dir="rtl"] .bbl-heading{ text-align:center; }/* End custom CSS */