/* Footer — restored from the original design PDF.
   The footer's section titles are Premium Addons "Title" widgets whose generated
   pa-frontend-*.min.css died with the server, and the link rows never had bullet
   elements in the markup. Both are reproduced here. */

footer.aux-elementor-footer{
  --bec-blue:#0C9ED8;
  --bec-ink:#1D2A35;
  --bec-body:#4A4A4A;
}

/* ---------- section titles: blue bar + label ---------- */
footer.aux-elementor-footer .premium-title-container .premium-title-header{
  /* flex so the bar always centres on the label, whatever the theme does to line-height */
  display:flex;
  align-items:center;
  gap:13px;
  margin:0 0 24px;
  padding-left:0;
  font-size:19px;
  line-height:1.35;
  font-weight:600;
  color:var(--bec-ink);
}
footer.aux-elementor-footer .premium-title-container .premium-title-header::before{
  content:"";
  position:static;
  transform:none;
  flex:0 0 auto;
  width:0px;   /* bar removed at the client's request (was 4px) */
  height:21px;
  border-radius:2px;
  background:var(--bec-blue);
}
footer.aux-elementor-footer .premium-title-container .premium-title-text{
  color:inherit;
  font:inherit;
}

/* ---------- the rows that follow a section title become a bulleted list ---------- */
footer.aux-elementor-footer .elementor-widget-premium-addon-title ~ .e-con{
  position:relative;
  padding-left:20px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin-bottom:15px;
}
footer.aux-elementor-footer .elementor-widget-premium-addon-title ~ .e-con:last-child{
  margin-bottom:0;
}
footer.aux-elementor-footer .elementor-widget-premium-addon-title ~ .e-con::before{
  content:"";
  position:absolute;
  left:2px;
  top:8px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--bec-blue);
}
footer.aux-elementor-footer .elementor-widget-premium-addon-title ~ .e-con .elementor-heading-title{
  margin:0;
  font-size:15px;
  line-height:1.5;
  font-weight:400;
  color:var(--bec-body);
}
footer.aux-elementor-footer .elementor-widget-premium-addon-title ~ .e-con .elementor-heading-title a{
  color:var(--bec-body);
  text-decoration:none;
  transition:color .16s ease;
}
footer.aux-elementor-footer .elementor-widget-premium-addon-title ~ .e-con .elementor-heading-title a:hover,
footer.aux-elementor-footer .elementor-widget-premium-addon-title ~ .e-con .elementor-heading-title a:focus{
  color:var(--bec-blue);
}

/* the address block wraps to several lines — keep its bullet on the first line */
footer.aux-elementor-footer .elementor-element-3df0950::before{top:8px;}

/* ---------- brand column ---------- */
footer.aux-elementor-footer .elementor-element-f64d9bb .elementor-heading-title{
  font-size:15px;
  line-height:1.6;
  font-weight:400;
  color:var(--bec-body);
}

/* give the narrow Quick Links column room to breathe */
footer.aux-elementor-footer .elementor-element-8f21cdb{min-width:170px;}

/* ---------- responsive: stack the columns ---------- */
@media (max-width:900px){
  footer.aux-elementor-footer .elementor-element-e8070e6{
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    gap:36px;
  }
  footer.aux-elementor-footer .elementor-element-e8070e6 > .e-con{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  footer.aux-elementor-footer .premium-title-container .premium-title-header{
    margin-bottom:18px;
  }
}

/* ------------------------------------------------------------------
   Site-wide fixes (this file is loaded on every page)
   ------------------------------------------------------------------ */

/* Slider Revolution's timer/progress bar draws a 5px strip under the
   header. It isn't in the design, so hide it. */
canvas.sr7-pbar,
sr7-module .sr7-pbar,
rs-progress,
.rs-progress{
  display:none !important;
}

/* The header carried a blue bottom border that the design doesn't have.
   (Delete this rule if you want the blue divider back.) */
header.aux-elementor-header .elementor-element-b462429{
  border-bottom:0 !important;
}

/* the header/footer logo is now a link to the homepage */
a.bec-logo-link{display:inline-block;line-height:0;text-decoration:none;}
a.bec-logo-link img{display:block;}

/* ------------------------------------------------------------------
   Premium Addons buttons ("Learn More" on the Product Categories cards)
   The per-element styling survived (navy fill, green border, 8px radius)
   but the plugin's base rule that makes .premium-button a padded
   inline-block did not, so it computed to display:inline with 0 padding —
   the border collapsed around the inline text and read as a stray line.
   ------------------------------------------------------------------ */
.premium-button{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:12px 28px;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  box-sizing:border-box;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.premium-button.premium-btn-sm{padding:9px 20px;font-size:14px;}
.premium-button.premium-btn-lg{padding:13px 30px;}
.premium-button .premium-button-text-icon-wrapper{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height:1.2;
}
.premium-button .premium-button-text-icon-wrapper span{line-height:1.2;}
/* give it a hover affordance in the site's green */
.premium-button:hover,
.premium-button:focus-visible{
  background-color:#00A883 !important;
  border-color:#00A883 !important;
  color:#fff !important;
}

/* ------------------------------------------------------------------
   Premium Addons "Title" widgets OUTSIDE the footer
   (the Expertise / Quality / Global Reach list in "Why Choose BEC?" —
   the only three on the site).

   Same failure as the footer titles: the plugin's pa-frontend css is
   gone, so all that survives is the per-element border-left:8px and a
   line-height:14px on a 20px font. The accent reads as a fat block
   glued to the label instead of a slim rule set off from it.
   Rebuilt the way the footer titles are: flex row, bar as ::before so
   it always centres on the label whatever the line-height does.
   Scoped to that container so it can never reach the footer titles.
   ------------------------------------------------------------------ */
.elementor-88 .elementor-element.elementor-element-1685d08 .premium-title-container .premium-title-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  padding-left:0;
  border:0 !important;
  font-size:20px;
  line-height:1.3;
  font-weight:700;
  color:#0E3659;
}
.elementor-88 .elementor-element.elementor-element-1685d08 .premium-title-container .premium-title-header::before{
  content:"";
  position:static;
  transform:none;
  flex:0 0 auto;
  width:5px;
  height:24px;
  border-radius:2px;
  background:#0C9ED8;
}
.elementor-88 .elementor-element.elementor-element-1685d08 .premium-title-container .premium-title-text{
  color:inherit;
  font:inherit;
}

/* the copy under each title: navy-grey, not the default #444 */
.elementor-88 .elementor-element.elementor-element-1685d08 .elementor-heading-title{
  color:#3F5261;
}
/* 40px spacers left a 80px trough between the three blocks; the design has ~68 */
.elementor-88 .elementor-element.elementor-element-e265827,
.elementor-88 .elementor-element.elementor-element-cc137fc{
  --spacer-size:30px;
}

/* ------------------------------------------------------------------
   Header top bar (Marudhara mark + 3 social icons) — tablet band.

   The header template carries TWO top bars: a desktop pair
   (a546b41 + 9c822b6) and a compact one (5528409) for narrow screens.
   post-81.css only ever sizes 5528409's two children inside its
   `@media (max-width:500px)` block — it sets their widths (42.4vw /
   46.4vw) and the icon row's `--flex-direction:row` there and nowhere
   else. Between 501px and the desktop switch the compact bar is the
   one on screen, so both children fall back to Elementor's default
   `--width:100%` and the icon row to column: the mark ends up stacked
   above three vertically-listed icons, ~200px of header.

   Restated for 501px and up. Above the desktop switch 5528409 is
   display:none, so these rules cannot reach the desktop bar.
   ------------------------------------------------------------------ */
@media (min-width:501px){
  .elementor-81 .elementor-element.elementor-element-5528409.e-con{
    --width:100%;
    --flex-direction:row;
    --justify-content:space-between;
    --align-items:center;
    --padding-top:0px;
    --padding-bottom:0px;
    --padding-left:0px;
    --padding-right:0px;
  }
  .elementor-81 .elementor-element.elementor-element-dfa6d94.e-con,
  .elementor-81 .elementor-element.elementor-element-7c5f2ad.e-con{
    --width:auto;
    --flex-direction:row;
    --align-items:center;
    --container-widget-width:initial;
    --padding-top:0px;
    --padding-bottom:0px;
    --padding-left:0px;
    --padding-right:0px;
  }
  .elementor-81 .elementor-element.elementor-element-dfa6d94.e-con{--justify-content:flex-start;}
  .elementor-81 .elementor-element.elementor-element-7c5f2ad.e-con{--justify-content:flex-end;--gap:0px 14px;}
}

/* ------------------------------------------------------------------
   Homepage "Product Categories" — tablet band.

   The card row (ad760be) is --width:100vw at 501px and up and carries its
   own side padding: 300px at the base, 200px under @media(max-width:1540px),
   0 only under @media(max-width:500px). Nothing in between, so at 533px the
   row is 533 wide with 400px of padding — the four cards get squeezed to
   16-20px each and the titles wrap one letter per line.

   Under 900px there is no room for four across, so they go two-up.
   ------------------------------------------------------------------ */
@media (min-width:501px) and (max-width:900px){
  .elementor-88 .elementor-element.elementor-element-ad760be.e-con{
    /* it is a grid container, not flex: the column count lives here */
    --e-con-grid-template-columns:repeat(2, 1fr);
    /* and keep the pair from stretching past a sensible card width */
    --padding-left:max(24px, (100vw - 620px) / 2);
    --padding-right:max(24px, (100vw - 620px) / 2);
    --padding-top:0px;
    --padding-bottom:0px;
  }
  .elementor-88 .elementor-element.elementor-element-124a4d9.e-con{
    --padding-left:0px;
    --padding-right:0px;
  }
}
/* 901px up to the desktop rule: four across still fits, but the flat 200px
   gutters left them 110-141px wide. Cap the row instead of fixing the gutter. */
@media (min-width:901px) and (max-width:1540px){
  .elementor-88 .elementor-element.elementor-element-ad760be.e-con{
    --padding-left:max(30px, (100vw - 1140px) / 2);
    --padding-right:max(30px, (100vw - 1140px) / 2);
  }
  .elementor-88 .elementor-element.elementor-element-124a4d9.e-con{
    --padding-left:24px;
    --padding-right:24px;
  }
}

/* "What's New?" card row — identical defect to Product Categories above, but
   this one is a FLEX container (e-flex), so the two-up comes from flex-wrap
   plus a width on the children rather than a grid column count.
   Its 200px side padding left the four cards 88px wide at 825px. */
@media (min-width:501px) and (max-width:900px){
  .elementor-88 .elementor-element.elementor-element-f33c700.e-con{
    --padding-left:max(24px, (100vw - 620px) / 2);
    --padding-right:max(24px, (100vw - 620px) / 2);
  }
  /* this one is e-con-BOXED: the cards sit inside .e-con-inner, not on the
     container itself, so the wrap and the widths belong there */
  .elementor-88 .elementor-element.elementor-element-f33c700.e-con > .e-con-inner{
    flex-wrap:wrap;
    gap:20px;
  }
  .elementor-88 .elementor-element.elementor-element-f33c700.e-con > .e-con-inner > .e-con{
    --width:calc(50% - 10px);
  }
}
@media (min-width:901px) and (max-width:1540px){
  .elementor-88 .elementor-element.elementor-element-f33c700.e-con{
    --padding-left:max(30px, (100vw - 1140px) / 2);
    --padding-right:max(30px, (100vw - 1140px) / 2);
  }
}

/* "Our Global Presence" (homepage map). Its two children are --width:100vw from
   501px up, but @media(max-width:1540px) gives the section 50px side padding —
   so from 501 to 1540 the heading and the map start at x=50 and run 50px past
   the right edge. The <=500 and >=1541 rules both use 0, which is the intent
   for a full-bleed block; only this band was missed. Vertical padding kept. */
@media (min-width:501px) and (max-width:1540px){
  .elementor-88 .elementor-element.elementor-element-1af9427.e-con{
    --padding-left:0px;
    --padding-right:0px;
  }
}