/* ================= BO ABOUT WIDGET — default styling =================
   Scoped under .bo-about-wrap. Reproduces .about-grid / .about-panel /
   .accordion-item exactly.
   ========================================================================= */

.bo-about-wrap{
  --ab-navy: #031B39;
  --ab-accent: #1083E6;
  --ab-slate: #54627A;
  --ab-line: #E4E8EE;
  --ab-ease: cubic-bezier(.22,1,.36,1);

  --ab-section-bg: transparent;
  --ab-section-padding-top: 80px;
  --ab-section-padding-bottom: 80px;
  --ab-grid-gap: 60px;

  --ab-panel-bg: #ffffff;
  --ab-panel-border: var(--ab-line);
  --ab-panel-radius: 18px;
  --ab-panel-shadow: 0 36px 70px -36px rgba(11,31,58,.25);

  --ab-image-fit: cover;
  --ab-image-position: center center;
  --ab-image-aspect: 4 / 3.1;
  --ab-image-radius: 13px;
  --ab-image-zoom-scale: 1;
  --ab-overlay-color: rgba(3,27,57,0);

  --ab-tag-bg: #ffffff;
  --ab-tag-border: var(--ab-line);
  --ab-tag-radius: 12px;
  --ab-tag-num-color: var(--ab-accent);
  --ab-tag-label-color: var(--ab-slate);

  --ab-eyebrow-color: var(--ab-accent);
  --ab-heading-color: var(--ab-navy);
  --ab-desc-color: var(--ab-slate);

  --ab-acc-border-color: var(--ab-line);
  --ab-acc-item-padding: 18px;
  --ab-acc-title-color: var(--ab-navy);
  --ab-acc-title-hover-color: var(--ab-accent);
  --ab-acc-icon-color: var(--ab-navy);
  --ab-acc-text-color: var(--ab-slate);

  font-family:'Roboto', sans-serif;
}

.bo-about-wrap .about-section{
  background: var(--ab-section-bg, transparent);
  padding: var(--ab-section-padding-top, 80px) 0 var(--ab-section-padding-bottom, 80px);
}
.bo-about-wrap .ab-wrap{ max-width:1220px; margin:0 auto; padding:0 40px; }

.bo-about-wrap .about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: var(--ab-grid-gap, 60px);
  align-items:center;
}
.bo-about-wrap .about-grid.about-grid--flip{ direction: rtl; }
.bo-about-wrap .about-grid.about-grid--flip > *{ direction: ltr; }
/* ---------- Image side ---------- */
.bo-about-wrap .about-art{ position:relative; }
.bo-about-wrap .about-panel{
  background: var(--ab-panel-bg, #fff);
  border:1px solid var(--ab-panel-border, var(--ab-line));
  border-radius: var(--ab-panel-radius, 18px);
  padding:8px;
  box-shadow: var(--ab-panel-shadow, 0 36px 70px -36px rgba(11,31,58,.25));
  transition:transform .5s var(--ab-ease);
}
.bo-about-wrap .about-art:hover .about-panel{ transform:translateY(-4px); }
.bo-about-wrap .about-panel-inner{
  position:relative;
  border-radius: var(--ab-image-radius, 13px);
  aspect-ratio: var(--ab-image-aspect, 4 / 3.1);
  overflow:hidden;
}
.bo-about-wrap .about-panel-inner img{
  width:100%; height:100%;
  display:block;
  object-fit: var(--ab-image-fit, cover);
  object-position: var(--ab-image-position, center center);
  transition:transform .6s var(--ab-ease);
}
.bo-about-wrap .about-art:hover .about-panel-inner img{
  transform: scale(var(--ab-image-zoom-scale, 1));
}
.bo-about-wrap .about-overlay{
  position:absolute; inset:0;
  background: var(--ab-overlay-color, rgba(3,27,57,0));
  pointer-events:none;
  transition: opacity .4s var(--ab-ease);
}
.bo-about-wrap .about-overlay.about-overlay--hover-only{ opacity:0; }
.bo-about-wrap .about-art:hover .about-overlay.about-overlay--hover-only{ opacity:1; }
.bo-about-wrap .about-tag{
  position:absolute; bottom:-20px; left:28px;
  background: var(--ab-tag-bg, #fff);
  border:1px solid var(--ab-tag-border, var(--ab-line));
  border-radius: var(--ab-tag-radius, 12px);
  padding:14px 18px;
  box-shadow:0 16px 36px -18px rgba(11,31,58,.3);
  display:flex; gap:11px; align-items:center;
}
.bo-about-wrap .about-tag .num{
  font-family:'Roboto Slab', serif; font-size:22px; color: var(--ab-tag-num-color, var(--ab-accent)); font-weight:500;
}
.bo-about-wrap .about-tag .lab{
  font-size:11px; color: var(--ab-tag-label-color, var(--ab-slate)); line-height:1.3; max-width:115px;
}

/* ---------- Copy side ---------- */
.bo-about-wrap .about-copy .ab-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ab-eyebrow-color, var(--ab-accent)); font-weight:500;
  display:flex; align-items:center; gap:10px;
}
.bo-about-wrap .about-copy .ab-eyebrow::before{
  content:''; width:18px; height:1px; background: var(--ab-eyebrow-color, var(--ab-accent)); display:inline-block;
}
.bo-about-wrap .about-copy h2{
  font-family:'Roboto Slab', serif;
  font-weight:600; letter-spacing:-0.01em; line-height:1.12;
  color: var(--ab-heading-color, var(--ab-navy));
  font-size:32px;
  margin:16px 0 16px;
}
.bo-about-wrap .about-copy p{
  color: var(--ab-desc-color, var(--ab-slate)); line-height:1.6; font-size:15px;
  margin-bottom:26px;
}

/* ---------- Accordion ---------- */
.bo-about-wrap .accordion-item{
  border-bottom:1px solid var(--ab-acc-border-color, var(--ab-line));
  padding: var(--ab-acc-item-padding, 18px) 0;
  cursor:pointer;
}
.bo-about-wrap .accordion-item:first-child{ border-top:1px solid var(--ab-acc-border-color, var(--ab-line)); }
.bo-about-wrap .acc-head{ display:flex; justify-content:space-between; align-items:center; }
.bo-about-wrap .acc-head h4{
  font-family:'Roboto', sans-serif;
  font-size:16px; font-weight:600; color: var(--ab-acc-title-color, var(--ab-navy));
  transition:color .3s var(--ab-ease);
}
.bo-about-wrap .accordion-item:hover .acc-head h4{ color: var(--ab-acc-title-hover-color, var(--ab-accent)); }
.bo-about-wrap .acc-icon{ width:22px; height:22px; flex-shrink:0; position:relative; }
.bo-about-wrap .acc-icon::before,
.bo-about-wrap .acc-icon::after{
  content:''; position:absolute; background: var(--ab-acc-icon-color, var(--ab-navy));
  transition:all .35s var(--ab-ease);
}
.bo-about-wrap .acc-icon::before{ width:14px; height:1.4px; top:50%; left:50%; transform:translate(-50%,-50%); }
.bo-about-wrap .acc-icon::after{ width:1.4px; height:14px; top:50%; left:50%; transform:translate(-50%,-50%); }
.bo-about-wrap .accordion-item.open .acc-icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.bo-about-wrap .acc-body{
  max-height:0; overflow:hidden;
  transition:max-height .4s var(--ab-ease), opacity .3s var(--ab-ease);
  opacity:0;
}
.bo-about-wrap .accordion-item.open .acc-body{ max-height:200px; opacity:1; margin-top:11px; }
.bo-about-wrap .acc-body p{ font-size:14px; color: var(--ab-acc-text-color, var(--ab-slate)); line-height:1.6; margin:0; }

/* ---------- Reveal helper ---------- */
.bo-about-wrap .reveal-left{
  opacity:0; transform:translateX(-34px);
  transition:opacity .8s var(--ab-ease), transform .8s var(--ab-ease);
}
.bo-about-wrap .reveal-left.in{ opacity:1; transform:translateX(0); }
.bo-about-wrap .reveal-right{
  opacity:0; transform:translateX(34px);
  transition:opacity .8s var(--ab-ease), transform .8s var(--ab-ease);
}
.bo-about-wrap .reveal-right.in{ opacity:1; transform:translateX(0); }

@media (prefers-reduced-motion: reduce){
  .bo-about-wrap .reveal-left,
  .bo-about-wrap .reveal-right{ opacity:1; transform:none; transition:none; }
}

/* ---------- Editor-active safety net ----------
   Elementor adds this class to the preview iframe <body> so plugins can
   force-show scroll-reveal content while editing, independent of any
   JS timing race. */
body.elementor-editor-active .bo-about-wrap .reveal-left,
body.elementor-editor-active .bo-about-wrap .reveal-right {
  opacity: 1 !important;
  transform: none !important;
}
/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .bo-about-wrap .about-grid{ grid-template-columns:1fr; }
  .bo-about-wrap .about-grid.about-grid--flip{ direction: ltr; }
}
@media (max-width:640px){
  .bo-about-wrap .ab-wrap{ padding:0 20px; }
  .bo-about-wrap .about-copy h2{ font-size:26px; }
}