.itemPicture {

  height: 350px;

  display: flex;
  align-items: center;

  border:  3px solid transparent;

}

.box_product {

  display: flex;
  flex-direction: column;
  border: var(--text-secondary-color) solid 2px;
  border-radius: 0px;
  margin: 0.5em;
  /* padding: clamp(2rem, 1vw, 4rem); */

  flex: 1;

  li {
    translate: -16px 0px;
    text-align: center;
    border-bottom: var(--text-secondary-color) solid 1px;
  }

  li::marker {
    color: transparent;
  }

}

.box_product_text {
  display: flex;
  flex-direction: column;

}

.container_products {
  display: flex;
  flex-direction: row;

}
.carousel-wrapper {
  position: relative;
  min-height: 350px;
    max-height: 750px;
    align-content: center;
    padding: 1.5em;
    margin: 32px auto;
    font-weight: 700;
    color: var(--clr-light);
    border: 1px solid var(--accent-secondary-color);
    border-radius: 10px;
}

.carousel-container {
  overflow: hidden; /* Only items within this boundary are visible */
  width: 90%;
  margin: auto;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0));
}

.carousel-track {
  display: flex;
  width: 140dvw;
  transition: transform 0.5s ease-in-out; /* Smooth sliding transition */
}

.carousel-item-2 {
  /* If max-width is 600px and you want 3 items visible, each item is 200px */
      width: 20dvw;


  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Important: prevents items from shrinking */
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
}

.carousel-btn.left { left: 0; }
.carousel-btn.right { right: 0; }

.box_heading {
  margin-left: 4%;
}
.wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out; /* Smooth sliding transition */
    /* width: 90%;
    max-width: 1536px;
    margin-inline: auto;
    position: relative;
    height: 400px;
    margin-top: 2.5em;
    overflow: hidden;
    mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0)
    ); */
}

  @keyframes scrollLeft {

    to {
      left: -50px;
    }
  }

   @keyframes scrollRight {

    to {
      right: 50px;
    }
  }

  .wrapper .item {

    min-width: 200px;
  height: 150px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Important: prevents items from shrinking */
    /* width: 350px;
    height: 400px;

    background-color: transparent;
    border-radius: 6px;
    position: absolute;

    display: flex;
    align-items: center;
    flex-direction: column;

    border: 3px solid transparent; */

    /* left: max(calc(350px * 7), 100%);
    right: max(calc(350px * 7), 100%); */


    /* animation-name: scrollLeft; */
    /* animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    flex: 1;
    animation-play-state: paused; */
  }

  /* .wrapper:hover .item {

    animation-play-state: running;

  } */

  .wrapperAnimateLeft {

    animation-name: scrollLeft;
    animation-play-state: running;


  }

  .wrapperAnimateRight {
    animation-name: scrollRight;
    animation-play-state: running;
  }



  .item1 {
    animation-delay: calc(5s / 7 * (7 - 1) * -1);
  }

  .item2 {
    animation-delay: calc(5s / 7 * (7 - 2) * -1);
  }

  .item3 {
    animation-delay: calc(5s /7 * (7 - 3) * -1);
  }

  .item4 {
    animation-delay: calc(5s /7 * (7 - 4) * -1);
  }

  .item5 {
    animation-delay: calc(5s / 7 * (7 - 5) * -1);
  }

  .item6 {
    animation-delay: calc(5s / 7 * (7 - 6) * -1);
  }

   .item7 {
    animation-delay: calc(5s / 7 * (7 - 7) * -1);
  }

.picture1 {

  width: 100%;


}

.picture2 {

  height: 100%;
  width: 100%;
  max-width: 500px;
  margin: auto;
  overflow: hidden;
  border-radius: 6px;



}

.picture3 {
  height: 100%;
  min-height: 200px;
}

.picture4 {

    width: 90%;
    margin: 32px;
    overflow: hidden;
    border-radius: 6px;
    margin: 32px 5%;

}
.picture5 {

   width: 90%;
    overflow: hidden;
    border-radius: 6px;
    margin: 32px 5%;

}
/* .item:hover {

  border: 3px solid var(--accent-secondary-color);
} */
.pictureFullscreen{
  flex-basis: auto;
  height: auto;
}

.section_gallery_one {

  min-height: 80vh !important;
  min-height: 80dvh !important;

  padding: 50px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  place-content: center;
}

.section_gallery_two {

  display: flex;
  flex-direction: column;
  align-items: center;
  place-content: center;
}

.section_image_full {
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  place-content: center;

}

.spacerPFS {

  min-height: 50px;

}



.video_one {

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

}

.warning {

  border: 4px solid red;
  padding: 8px;

}



@media screen and (max-width: 1024px) {

  .box_product {
    flex-direction: row;
  }
  .box_product_text {
    display: flex;
    flex-direction: row;

  }
  .container_products {

    flex-direction: column;
  }

  .picture3 {
    height: auto;
    min-width: 200px;
  }
}


@media screen and (max-width: 768px) {

  .box_product {
    flex-direction: row;
  }
  .box_product_text {
    display: flex;
    flex-direction: column;

  }

  .picture4 {


    margin: 8px 5%;

}
.picture5 {

   width: 90%;
    overflow: hidden;
    border-radius: 6px;
    margin: 8px 5%;

}

  .picture3 {
    height: auto;
    min-width: 30vw;
  }

   .carousel-item-2 {
    width: 37.5dvw;
  }


}





@media screen and (max-width: 480px){

  .carousel-item-2 {
    width: 75dvw;
  }




}

@media screen and (max-width: 375px){
  .box_product {
    flex-direction: column;
  }

  .wrapper .item {
    width: 250px;
  }
  .carousel-item-2 {
    width: 75dvw;
  }




}