.elementor-1049 .elementor-element.elementor-element-cb1703c:not(.elementor-motion-effects-element-type-background), .elementor-1049 .elementor-element.elementor-element-cb1703c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E4E6EB;}.elementor-1049 .elementor-element.elementor-element-cb1703c{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 50px 0px 50px;}.elementor-1049 .elementor-element.elementor-element-cb1703c > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1049 .elementor-element.elementor-element-5253e95:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-1049 .elementor-element.elementor-element-5253e95 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#6B7280;}.elementor-1049 .elementor-element.elementor-element-5253e95 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-1049 .elementor-element.elementor-element-5253e95 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1049 .elementor-element.elementor-element-ad88275 .elementor-tab-title, .elementor-1049 .elementor-element.elementor-element-ad88275 .elementor-tab-title:before, .elementor-1049 .elementor-element.elementor-element-ad88275 .elementor-tab-title:after, .elementor-1049 .elementor-element.elementor-element-ad88275 .elementor-tab-content, .elementor-1049 .elementor-element.elementor-element-ad88275 .elementor-tabs-content-wrapper{border-width:0px;}body.elementor-page-1049:not(.elementor-motion-effects-element-type-background), body.elementor-page-1049 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E4E6EB;}html{height:100vh;margin:0;overflow:hidden;}body{height:100vh;overflow:auto;scroll-snap-type:y mandatory;}body.elementor-page-1049{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-section:not(.elementor-inner-section), .elementor-location-header, .elementor-location-footer, .page-header, .site-header, .elementor-add-section, .e-con:not(.e-child){scroll-snap-align:start;scroll-snap-stop:normal;}@media(max-width:1024px){.elementor-section:not(.elementor-inner-section), .elementor-location-header, .elementor-location-footer, .page-header, .site-header, .elementor-add-section, .e-con:not(.e-child){scroll-snap-align:start;scroll-snap-stop:normal;}}@media(min-width:768px){.elementor-1049 .elementor-element.elementor-element-5253e95{width:100%;}}@media(max-width:767px){.elementor-1049 .elementor-element.elementor-element-ad88275{width:100%;max-width:100%;}.elementor-1049 .elementor-element.elementor-element-ad88275 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-section:not(.elementor-inner-section), .elementor-location-header, .elementor-location-footer, .page-header, .site-header, .elementor-add-section, .e-con:not(.e-child){scroll-snap-align:start;scroll-snap-stop:normal;}}/* Start custom CSS for tabs, class: .elementor-element-ad88275 *//* ════════════════════════════════════════════════════════════
   NEEDLE DAMAGE — GALLERY PAGE  (complete, v2)

   Paste ALL of this into: Appearance → Customize → Additional CSS
   Replaces everything you had there for the gallery.

   NOTE: this file is CSS only. The optional tab-scroll script
   goes in an HTML widget on the page — never in here.
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   1. TAB BAR — dark navy strip with underline tabs
   ════════════════════════════════════════════════════════════ */

.elementor-widget-tabs .elementor-tabs-wrapper{
  background:#0d1b3e;
  border:none!important;
  display:flex;
  gap:36px;
  flex-wrap:wrap;
  padding:0 56px;
  /* full-bleed — desktop only, reset on mobile in section 5 */
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
}

.elementor-widget-tabs .elementor-tab-title{
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  padding:22px 0 18px!important;
  margin:0!important;
  font-family:'Inter',system-ui,sans-serif;
  font-size:13px!important;
  font-weight:600!important;
  color:rgba(255,255,255,.55)!important;
  cursor:pointer;
  position:relative;
  white-space:nowrap;
  transition:color .15s;
  -webkit-tap-highlight-color:transparent;
}

.elementor-widget-tabs .elementor-tab-title:hover{
  color:#fff!important;
  background:transparent!important;
}

.elementor-widget-tabs .elementor-tab-title.elementor-active{
  background:transparent!important;
  border:none!important;
  color:#fff!important;
}
.elementor-widget-tabs .elementor-tab-title.elementor-active:after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background:#fff;
}

/* kill Elementor's default caret and borders */
.elementor-widget-tabs .elementor-tab-title:before,
.elementor-widget-tabs .elementor-tabs-content-wrapper{border:none!important}


/* ════════════════════════════════════════════════════════════
   2. CONTENT AREA — light band behind the images
   ════════════════════════════════════════════════════════════ */

.elementor-widget-tabs .elementor-tab-content{
  background:#E4E6EB;
  border:none!important;
  padding:48px 56px!important;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
}

/* Elementor's accordion titles — hidden, the tab strip is used instead */
.elementor-widget-tabs .elementor-tab-mobile-title{
  display:none!important;
}


/* ════════════════════════════════════════════════════════════
   3. IMAGE GRID
   ── CHANGE COLUMNS HERE: repeat(3,1fr) or repeat(4,1fr) ──
   ════════════════════════════════════════════════════════════ */

.nde-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  max-width:1600px;
  margin:0 auto;
}

.nde-gallery .nde-tile{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:3px;
  background:#e4e6eb;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.nde-gallery .nde-tile img,
.nde-gallery .nde-tile video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s;
}

/* zoom only where there's a real pointer — it sticks after a tap */
@media (hover:hover) and (pointer:fine){
  .nde-gallery .nde-tile:hover img{transform:scale(1.04)}
}

/* play badge on video tiles */
.nde-gallery .nde-tile.is-video:after{
  content:'\25B6';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:52px; height:52px;
  background:rgba(13,27,62,.85);
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  color:#fff;
  font-size:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transition:opacity .2s;
}
.nde-gallery .nde-tile.is-video.playing:after{opacity:0}

/* caption bar */
.nde-gallery .nde-cap{
  position:absolute;
  bottom:0; left:0; right:0;
  background:linear-gradient(to top,rgba(8,15,34,.9),transparent);
  padding:26px 14px 10px;
  font-size:12px;
  color:rgba(255,255,255,.9);
  font-family:'Inter',system-ui,sans-serif;
}

/* strip the Text Editor's auto-added <p> spacing */
.nde-gallery p{display:none}
.elementor-tab-content .nde-gallery{margin-top:0}


/* ════════════════════════════════════════════════════════════
   4. TABLET
   ════════════════════════════════════════════════════════════ */

@media (max-width:1100px){
  .nde-gallery{grid-template-columns:repeat(2,1fr)}
}


/* ════════════════════════════════════════════════════════════
   5. MOBILE
   ════════════════════════════════════════════════════════════ */

@media (max-width:900px){

  /* ── drop the vw full-bleed ──
     100vw measures the whole window, which breaks inside
     Elementor's preview and can cause sideways scroll on real
     phones too. For edge-to-edge instead:
     Section → Advanced → Padding → mobile icon → left/right 0  */
  .elementor-widget-tabs .elementor-tabs-wrapper,
  .elementor-widget-tabs .elementor-tab-content{
    margin-left:0!important;
    margin-right:0!important;
    width:auto!important;
  }

  /* tab strip → horizontal scroll */
  .elementor-widget-tabs .elementor-tabs-wrapper{
    flex-wrap:nowrap!important;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scroll-padding-left:18px;
    gap:22px!important;
    padding:0 18px!important;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .elementor-widget-tabs .elementor-tabs-wrapper::-webkit-scrollbar{display:none}

  .elementor-widget-tabs .elementor-tab-title{
    flex:0 0 auto;
    scroll-snap-align:start;
    padding:16px 0 13px!important;
    font-size:12.5px!important;
  }
  .elementor-widget-tabs .elementor-tab-title:last-child{
    padding-right:18px!important;
  }

  /* only the active panel shows */
  .elementor-widget-tabs .elementor-tab-content{
    display:none!important;
    padding:22px 14px!important;
  }
  .elementor-widget-tabs .elementor-tab-content.elementor-active{
    display:block!important;
  }

  /* grid */
  .nde-gallery{gap:10px!important}
  .nde-gallery .nde-cap{
    font-size:11.5px!important;
    padding:22px 12px 9px!important;
  }
  .nde-gallery .nde-tile.is-video:after{
    width:44px!important;
    height:44px!important;
    font-size:14px!important;
  }

  .elementor-widget-tabs{overflow-x:hidden}
}

/* two-up on bigger phones */
@media (max-width:700px){
  .nde-gallery{grid-template-columns:repeat(2,1fr)}
}

/* single column on small phones */
@media (max-width:519px){
  .nde-gallery{grid-template-columns:1fr}
  .nde-gallery .nde-cap{padding:24px 12px 10px!important}
}

@media (max-width: 900px) {
  .elementor-section:has(.elementor-widget-tabs),
  .elementor-section:has(.elementor-widget-tabs) > .elementor-container,
  .elementor-section:has(.elementor-widget-tabs) .elementor-column,
  .elementor-section:has(.elementor-widget-tabs) .elementor-element-populated,
  .elementor-widget-tabs,
  .elementor-widget-tabs > .elementor-widget-container,
  .e-con:has(.elementor-widget-tabs),
  .e-con:has(.elementor-widget-tabs) > .e-con-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}/* End custom CSS */