.elementor-5363 .elementor-element.elementor-element-70023050{--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-5363 .elementor-element.elementor-element-70023050:not(.elementor-motion-effects-element-type-background), .elementor-5363 .elementor-element.elementor-element-70023050 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-astglobalcolor4 );}.elementor-5363 .elementor-element.elementor-element-186b4980{--display:flex;}/* Start custom CSS for html, class: .elementor-element-609cf221 *//* ------------------------------
CSS Variables (scoped)
------------------------------ */
.bbl-about{ /* Scoped variables to avoid theme overrides */
--bbl-primary:#0077B6;
--bbl-accent:#FC9635;
--bbl-bg:#FFFFFF;
--bbl-text:#1F2937;
--bbl-muted:#6B7280;
}


/* ------------------------------
Base (Desktop-first)
------------------------------ */
.bbl-about{ background:var(--bbl-bg, #FFFFFF); color:var(--bbl-text, #1F2937);  }
/* Extra specificity for Elementor global styles */
.elementor .bbl-about{ background:var(--bbl-bg, #FFFFFF) !important; color:var(--bbl-text, #1F2937) !important; }


.bbl-wrap{
max-width:1200px;
margin:0 auto;
padding:clamp(2.5rem, 6vw, 6rem) clamp(1rem, 4vw, 2rem);
display:grid;
grid-template-columns:1.15fr 0.85fr; /* Desktop: دو ستون */
gap:clamp(2rem, 4vw, 4rem);
align-items:center;
}


/* Typography */
.bbl-eyebrow{ font-size:clamp(1rem, 0.95rem + 0.4vw, 1.125rem); font-weight:600; color:var(--bbl-primary, #0077B6); margin:0 0 .5rem; }
.bbl-title{ font-size:clamp(2rem, 1.3rem + 2.6vw, 3rem); font-weight:800; line-height:1.15; margin:0 0 1.25rem; color:var(--bbl-text, #1F2937); }
.bbl-text{ font-size:clamp(1rem, 0.97rem + 0.35vw, 1.125rem); line-height:1.7; color:var(--bbl-muted, #6B7280); margin:0 0 1.25rem; }
.bbl-highlight{ display:block; margin-top:1rem; font-weight:700; color:var(--bbl-primary, #0077B6); }


/* Button */
.bbl-btn{ display:inline-flex; align-items:center; gap:.5rem; border-radius:12px; padding:.85rem 1.25rem; font-weight:600; background:var(--bbl-accent, #FC9635); color:#111827; text-decoration:none; box-shadow:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease, color .25s ease; }
.bbl-btn:hover{ transform:translateY(-2px); background:#f08323; color:#FFFFFF; } /* Hover: متن سفید طبق درخواست */
.bbl-btn i{ font-size:1rem; }


/* Image block */
.bbl-figure{ border-radius:16px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,.08); max-width:640px; justify-self:center; }
.bbl-figure img{ width:100%; height:auto; display:block; object-fit:cover; aspect-ratio:4 / 5; }


/* A11y helpers */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }


/* Motion preferences */
@media (prefers-reduced-motion: reduce){
.bbl-btn{ transition:none; }
.bbl-btn:hover{ transform:none; }
}


/* Dark mode (optional: inherits from body.dark) */
.dark .bbl-about{ background:#0b1220 !important; color:#e5e7eb !important; border-color:rgba(255,255,255,.08) !important; }
.dark .bbl-text{ color:#c9ced6; }
.dark .bbl-title{ color:#f3f4f6; }


/* ------------------------------
Tablet and below (≤1024px)
------------------------------ */
@media (max-width:1024px){
.bbl-wrap{ grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 3vw, 3rem); }
.bbl-title{ font-size:clamp(1.875rem, 1.2rem + 2.2vw, 2.5rem); }
}


/* ------------------------------
Mobile and below (≤767px)
— بهبود مشکلات موبایل: تک‌ستونه، فاصله‌ها، تصویر تمام‌عرض
------------------------------ */
@media (max-width:767px){
.bbl-wrap{ grid-template-columns:1fr; gap:clamp(1.25rem, 3.5vw, 2rem); padding:clamp(2rem, 7vw, 3rem) clamp(1rem, 5vw, 1.25rem); }
.bbl-title{ font-size:clamp(1.5rem, 1.1rem + 3vw, 2rem); }
.bbl-text{ line-height:1.75; }


/* اطمینان از تناسب تصویر و عرض کامل در موبایل */
.bbl-figure{ max-width:none; width:100%; justify-self:stretch; }
.bbl-figure img{ width:100%; height:auto; aspect-ratio:4 / 5; }


/* دکمه: لمس‌پذیری بیشتر و چینش وسط */
.bbl-btn{ padding:1rem 1.25rem; }
}


/* ------------------------------
Small Mobile (≤480px)
------------------------------ */
@media (max-width:480px){
.bbl-btn{ width:100%; justify-content:center; }
}/* End custom CSS */