.elementor-865 .elementor-element.elementor-element-df200cf{--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;--justify-content:space-between;--padding-top:6%;--padding-bottom:7%;--padding-left:0%;--padding-right:0%;}.elementor-865 .elementor-element.elementor-element-df200cf:not(.elementor-motion-effects-element-type-background), .elementor-865 .elementor-element.elementor-element-df200cf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F7F7;}.elementor-865 .elementor-element.elementor-element-5bf36cf{text-align:center;}.elementor-865 .elementor-element.elementor-element-5bf36cf .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:38px;font-weight:400;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1.1em;letter-spacing:0px;word-spacing:0px;color:#000000;}.elementor-865 .elementor-element.elementor-element-d8325ab{--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;--justify-content:center;}.elementor-865 .elementor-element.elementor-element-d8325ab.e-con{--align-self:center;}@media(min-width:768px){.elementor-865 .elementor-element.elementor-element-df200cf{--content-width:1400px;}.elementor-865 .elementor-element.elementor-element-d8325ab{--width:100%;}}@media(max-width:1024px){.elementor-865 .elementor-element.elementor-element-df200cf{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:10%;--padding-bottom:10%;--padding-left:5%;--padding-right:5%;}.elementor-865 .elementor-element.elementor-element-5bf36cf .elementor-heading-title{font-size:26px;}.elementor-865 .elementor-element.elementor-element-d8325ab{--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;}}@media(max-width:767px){.elementor-865 .elementor-element.elementor-element-df200cf{--padding-top:15%;--padding-bottom:15%;--padding-left:5%;--padding-right:5%;}.elementor-865 .elementor-element.elementor-element-5bf36cf{padding:0px 0px 15px 0px;text-align:start;}.elementor-865 .elementor-element.elementor-element-5bf36cf .elementor-heading-title{font-size:24px;}.elementor-865 .elementor-element.elementor-element-d8325ab{--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;--padding-top:0px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for container, class: .elementor-element-df200cf *//* ===== Carousel wrapper & arrows ===== */
.service-scroll-wrap{
  position:relative;
  overflow:visible;                 /* so arrows aren't clipped by parents */
  padding-inline: 48px;             /* space inside for arrows */
}

/* Track */
.service-scroll{
  --gap:20px;                       /* adjust once and it updates all math */
  display:flex;
  gap:var(--gap);
  overflow:;                  /* clip extra cards */
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding: 4px 0;
  border-radius: 16px;
}

/* Cards: show 3 at a time but clamp their width so they don't get too wide */
.service-scroll > .service-boxes {
  flex: 0 0 300px;   /* pick your sweet spot */
}

/* Optional: keep a consistent visual height even if content differs */
.service-scroll > .service-boxes{
  aspect-ratio: 16 / 10;            /* adjust to taste */
}

/* Arrow buttons */
.service-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:40px;height:40px;
  border:none;border-radius:999px;
  background:#0f9da44d;             /* teal-ish translucent; tweak to match brand */
  cursor:pointer;font-size:20px;font-weight:700;
  display:grid;place-items:center;
  transition:background .2s ease, opacity .2s ease;
}
.service-arrow:hover{ background:#0f9da47a; }
.service-arrow:disabled{ opacity:.35; cursor:default; }
.service-arrow.prev{ left:8px; }     /* inside the padded wrapper */
.service-arrow.next{ right:8px; }    /* no more clipping */

/* Images/overlays inside each card (adjust to your markup) */
.service-boxes img{ 
  width:100%; height:100%; object-fit:cover;
}
.service-boxes .gradient-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.28) 100%);
}

/* Title styling example to keep it readable over the image */
.service-boxes .elementor-icon-box-title{
  position:absolute; left:16px; right:16px; bottom:14px;
  margin:0; color:#0b0e10;        /* dark-on-light if you fade the image; change to #fff if needed */
  font-weight:800; line-height:1.2;
}

/* Responsive: 2 cards on tablets, 1 on phones */
@media (max-width: 1024px){
  .service-scroll > .service-boxes{
    flex: 0 0 clamp(240px, calc((100% - var(--gap)) / 2), 360px);
  }
}
@media (max-width: 640px){
  .service-scroll-wrap{ padding-inline: 36px; }
  .service-scroll > .service-boxes{ flex: 0 0 100%; aspect-ratio: 16/11; }
}/* End custom CSS */