/* ==============================================
HERO BANNER
============================================== */
.banner-lady-stage{height: 30vw; overflow: hidden;}
.banner-lady-img1{position:absolute; top: -11.5vw; left:-5px; right:0;max-height: 45vw;}
.banner-lady-img2{position:absolute; top:-11.75vw; left:0; right:0;}

.hide-bottom-overflow {
  clip-path: inset(0 0 40px 0); /* top right bottom left */ 
}

/* @media (max-width: 1024px){
  .banner-lady-img1{ top: -72px; }
}*/
@media (max-width: 640px){
  .banner-lady-img1{  
    top: 10vw;
    max-height: 65vw;
    scale: 1.5 !important;
    left: 3px;
}

.hide-bottom-overflow {
  clip-path: inset(0 13vw 30vw 9vw);
}
  .banner-lady-stage{height:60vw;}

  .banner-lady-img2{max-height: 65vw; scale: 1.5 !important; top:7vw}


  
 
} 


/* ==============================================
   NUE STORIES
============================================== */
.nueStories-title{position: sticky; padding-left: 5vw;}
#nueStories .img-box-nueStories{ max-width:35vw;  }
#nueStories .content-box-nueStories{ max-width:calc(100%); }

.BuiltSwiper{ padding-left: 9.5vw; padding-right: 80px;}
.BuiltSwiper .label-title{ height: 48px; line-height:1; text-align: center; background-color: #D9D9D9; border-top-right-radius: 30px; border-top-left-radius:30px; position: absolute; bottom:0; left: 50%; transform: translateX(-50%); padding: 0px 30px; display: flex;  align-items: center; justify-content: center;  width: max-content; z-index: 1;}
.BuiltSwiper p{ font-size:var(--text-p);}
.BuiltSwiper .swiper-button-next{ right: 0; }
.BuiltSwiper .swiper-button-prev{ left: 0; }

.BuiltSwiper .img-box::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index:0;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5) 0%,   /* 👈 dark at bottom */
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 0.07) 70%,
    rgba(0, 0, 0, 0) 100%   /* 👈 transparent at top */
  );
}

.swiper-button-next,
.swiper-button-prev{width: 30px;height: 30px;background: white; border-radius: 50%;box-shadow: 0 4px 10px rgba(0,0,0,0.1);}

.swiper-navigation-icon{ display: none !important;}

.nylonSection-right p{ font-size:var(--text-h3); font-weight:300;}

/* Trusted section swiper */
#trusted .TrustedSwiper .swiper-slide {
  height: auto;
}

#trusted .TrustedSwiper .trusted-card {
  height: 100%;
}

#trusted .trusted-swiper-nav {
  align-items: center;
}

#trusted .trusted-swiper-button-prev,
#trusted .trusted-swiper-button-next {
  cursor: pointer;
}

.trusted-swiper-container .swiper-button-prev{ left:-40px; }
.trusted-swiper-container .swiper-button-next{ right:-40px; }

.trusted-swiper-container .trusted-swiper-button-prev img,
.trusted-swiper-container .trusted-swiper-button-next img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/**=============================
CARD ICON CSS
============================**/
.card-head{ flex:0 0 52px; width: 52px !important; height: 52px !important; display: flex; align-items: center; justify-content: center; position: relative;}
.icon-wrap:before{content: ''; position: absolute; width: 52px; height: 52px; background: #c8d830; border-radius: 50%;  display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: -1;}


/**=============================
Engineered to perform. Designed to last
=============================**/
.design-nylon-cards {display: flex; flex-wrap: nowrap; justify-content: space-between;  align-items: stretch;  position: relative; }
.design-nylon-cards .card-wrap{width: 23%; position: relative; flex-shrink: 0; display: flex;} 
.design-nylon-cards .card { position: relative; width: 100%; height: 100%;  padding:0px 1vw; }
.design-nylon-cards{min-height:25vw;}

.design-nylon-cards .card-wrap:nth-of-type(odd) .card{display: flex; align-items: end; padding-top:3vw;     padding-bottom:3vw;}
.design-nylon-cards .card-wrap:nth-of-type(even) .card{display: flex; align-items: start; padding-bottom:3vw;     padding-top: 3vw;}
.design-nylon-cards .card-inner{ background: transparent; position: relative; z-index: 2; opacity: 0; transform: translateY(16px); }    

.design-nylon-cards .card-wrap:nth-of-type(1)  .icon-wrap:before{ right:-5px; top:-10px;}
.design-nylon-cards .card-wrap:nth-of-type(2) .icon-wrap:before{ right:-8px; top: -8px;}
.design-nylon-cards .card-wrap:nth-of-type(3) .icon-wrap:before{ left:-5px; top: -15px;}
.design-nylon-cards .card-wrap:nth-of-type(4) .icon-wrap:before{ left:-10px; top: -10px;}


.design-nylon-cards .design-nylon-cards .card-svg:nth-of-type(odd){bottom: 0;}
.design-nylon-cards .design-nylon-cards .card-svg:nth-of-type(even){top: 0;}
.design-nylon-cards .card{ overflow: hidden;}
.design-nylon-cards .card-svg {position: absolute; left: 0; top: 0; width: 100%; height: auto;  overflow: visible; pointer-events: none;  z-index: 1; }
.design-nylon-cards .card-wrap:nth-of-type(odd) .card-svg{bottom: 0; top: inherit;}
.design-nylon-cards .card-wrap:nth-of-type(even) .card-svg{top: 0;}
.card-path {fill: none; stroke: #b5cc3a;stroke-width: 1.5;  stroke-linecap: round; stroke-linejoin: round;}

@media all and  (min-width: 1025px) {
.design-nylon-cards .card-wrap:nth-of-type(odd){ padding-top:10vw;}
.design-nylon-cards .card-wrap:nth-of-type(even){ padding-bottom: 10vw;}
}

@media (max-width: 1024px) {
  .design-nylon-cards { flex-wrap: wrap; }
  .design-nylon-cards .card-wrap { width: 48%; }
  .design-nylon-cards .card-wrap.offset { margin-top: 40px; }
}
@media (max-width: 640px) {
  .design-nylon-cards  .card-wrap{width: 100%; min-height:50vw;}
  .design-nylon-cards .card-wrap.offset{margin-top: 0;}
  .design-nylon-cards .card{ overflow: hidden;}
  .design-nylon-cards .card-wrap:nth-of-type(odd) .card,
  .design-nylon-cards .card-wrap:nth-of-type(even) .card{ padding-bottom:30px; align-items: center;}
  .design-nylon-cards .card-wrap:nth-of-type(odd) .card{ padding-left: 30px; padding-right: 0;}
  .design-nylon-cards .card-wrap:nth-of-type(even) .card{ padding-left: 0; padding-right: 30px;}
  .design-nylon-cards .card-wrap:nth-of-type(even) .card-svg{transform: scaleX(-1) scaleY(-1); transform-origin: center;}
  .design-nylon-cards .card-wrap:nth-of-type(odd) .card-svg{bottom: 0; top: inherit;}
  .design-nylon-cards .card-wrap:nth-of-type(even) .card-svg{bottom: 0; top: inherit;}
  .design-nylon-cards .card-svg {height: 100vw; position: absolute; left: 0; top: -50vw !important;}


  .engineered-layout-item:nth-of-type(odd),
  .engineered-layout-item:nth-of-type(even){margin-top:0;}



}



/**=====================================
Designed for everything nylon can become
=====================================**/
#DesignedEverything {
  perspective: 1100px;
  transform-style: preserve-3d;
}
#DesignedEverything .card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

#DesignedEverything .img-wrap {
  position: relative;
  flex-shrink: 0;
  width: min(24vw, 88vw);
  max-width: 380px;
  aspect-ratio: 380 / 450;
  height:  min(28vw, 100vw);
  overflow: hidden;
  border-bottom-left-radius:60px;
  border-bottom-right-radius:60px;
}
#DesignedEverything .img-wrap > img {
  position: absolute;
  top:0; left: 50%; transform: translateX(-50%); width: 100%;
  height: auto;
  object-fit: cover;
  will-change: transform; object-position: center top;
}

.engineered-layout-item:nth-of-type(even){margin-top:-10vw; }
.engineered-layout-item:nth-of-type(odd){margin-top:-5vw; }
#DesignedEverything .img-wrap::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); z-index: 1;}
.engineered-layout-item .card{max-width: 50vw; width: 40vw;}

.engineered-layout-item:nth-of-type(even) .card {justify-content: start;}
.engineered-layout-item:nth-of-type(odd) .card {justify-content: end;}
.engineered-layout-item:nth-child(4n+1) .card .card-content{text-align: right;}

/**=====================================
Waste Section
=====================================**/
/* Flex box centers the stage on screen (vertical + horizontal); width tween handled in JS */
#wasteSection .wasteSection-img-center {
  position: relative;
}

#wasteSection .wasteSection-img-wrap.wasteSection-img-stage {
  width: 50vw;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  transform-origin: center center;
  overflow: hidden;
  border-radius: 40px;
}

#wasteSection .wasteSection-right-content {
  opacity: 0;
}

.wasteSection-right-content .card-wrap:nth-of-type(1)  .icon-wrap:before{ right:-5px; top:-10px;}
.wasteSection-right-content .card-wrap:nth-of-type(2) .icon-wrap:before{ right:-8px; top: -8px;}
.wasteSection-right-content .card-wrap:nth-of-type(3) .icon-wrap:before{ left:-5px; top: -15px;}
.wasteSection-right-content .card-wrap:nth-of-type(4) .icon-wrap:before{ left:-10px; top: -10px;}


@media (max-width: 992px) {
  .engineered-layout-wrap{gap: 20px;}
  .engineered-layout-item:nth-of-type(odd),
  .engineered-layout-item:nth-of-type(even){margin-top:0; justify-content: center;}
  .engineered-layout-item:nth-of-type(even){margin-left: 0;}
  .engineered-layout-item:nth-of-type(odd){margin-right: 0;}
  #DesignedEverything .img-wrap{ width: min(40vw, 88vw);height: min(60vw, 100vw); border-bottom-left-radius: 40px;  border-bottom-right-radius: 40px; aspect-ratio: 380 / 450;}
  .engineered-layout-item:nth-of-type(odd) .card{ flex-direction: row-reverse;}
  .engineered-layout-item .card{max-width: 100vw; width: 100vw;}
}

@media (max-width: 640px) {
  /***Designed for everything nylon can become****/
  .engineered-layout-wrap{gap: 20px;}
  .engineered-layout-item:nth-of-type(odd),
  .engineered-layout-item:nth-of-type(even){margin-top:0; justify-content: center;}
  .engineered-layout-item:nth-of-type(even){margin-left: 0;}
  .engineered-layout-item:nth-of-type(odd){margin-right: 0;}
  #DesignedEverything .card{ gap:10px;}

  .engineered-layout-item:nth-of-type(odd)   .card{ text-align:right;}
  #DesignedEverything .img-wrap{ width: min(40vw, 88vw);height: min(60vw, 100vw); border-bottom-left-radius: 40px;  border-bottom-right-radius: 40px; aspect-ratio: 380 / 450;}
  .engineered-layout-item:nth-of-type(odd) .card{ flex-direction: row-reverse;}

  .wasteSection-left-wrap .left-title{ padding-top:0;}
  /* .engineered-layout-item:nth-child(4n+1) .card .card-content{text-align: left;} */
  .engineered-layout-item .card{max-width: 100vw; width: 100vw;}
}



@media screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio:1.5),screen and (min-width:1025px) and (min-resolution:144dpi) {
  .engineered-layout-item:nth-of-type(even){margin-top: -5vw;}
  .engineered-layout-item:nth-of-type(odd){margin-top:-5vw;}

  #DesignedEverything .img-wrap {  height:  min(30vw, 100vw);}
  .engineered-layout-item .card{ gap:20px;}
}