* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}

:root {
  --border-color: #0005;
  --w-image: 50%;
  /* --color: #000; */
  --color: #34484a;
  --shadow: #5555;
  --calculate: calc(3 / 3);
}

[is-dark] {
  --border-color: #fff5;
  --w-image: 70%;
  --color: #fff;
  --shadow: #5555;
  --calculate: calc(3 / 3);
}


.carousel {
  /* margin-top: -80px; */
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: absolute;
}

.carousel .list {
  height: 100%;
  position: relative;
}

/* .carousel .list::before {
  position: absolute;
  width: var(--w-image);
  height: 100%;
  content: '';
  top: 0;
  left: calc(100% - calc(var(--w-image) * var(--calculate)));
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  z-index: 10;
  pointer-events: none;
} */

/* .carousel .list::after {
  position: absolute;
  top: 50px;
  left: 50px;
  content: '';
  background-color: red;
  width: 400px;
  height: 300px;
  z-index: 10;
  pointer-events: none;
  border-radius: 20px 50px 110px 230px;
  filter: blur(150px);
  opacity: .6;
} */

.carousel .list .item {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.carousel .list .item .image {
  width: var(--w-image);
  height: 100%;
  position: relative;
  top: 0;
  /* left: calc(100% - var(--w-image)); */
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  font-weight: 500;
  max-width: var(--w-image);
  width: 100%;
  --image-filter: drop-shadow(0 150px 50px #41414185);
  /* left: 30%; */
  /* left: calc(100% - calc(var(--w-image) * var(--calculate))); */
}

.carousel .list .item .image img {
  width: 100%;
  /* margin-bottom: 20px; */
  /* filter: drop-shadow(0 150px 50px #9e0c0c55); */
  filter: var(--image-filter);
  height: 100%;
  object-fit: contain;
  /* thos */
  /* will-change: transform, animation; */
}

/* .carousel .list .item .image figcaption{
    font-family: 'Aboreto';
    font-weight: bold;
    font-size: 1.3em;
    text-align: right;
    margin-bottom: 30px;
    width: 70%;
} */
.carousel .list .item .item-carousel {
  height: 100%;
  display: grid;
  grid-template-columns: 100%;
  width: 100%;
  width: 50%;
  background: #eee;
  background: #fff;
}

.carousel .list .item .item-carousel .content {
  padding: 150px 20px 20px 80px;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  width: 100%;
  flex-wrap: wrap;
  z-index: 0;
}

.carousel .list .item .item-carousel .content h2 {
  font-size: 5em;
  line-height: 1.5;
  text-transform: uppercase;
}

.carousel .list .item .item-carousel .content .price {
  font-family: 'Myriad';
  font-size: 3em;
  margin: 20px 0;
}

.carousel .list .item .item-carousel .content .addToCard {
  background-color: #4f8b69;
  color: #fff;
  padding: 10px 30px;
  font-family: Poppins;
  font-size: large;
  font-weight: 500;
  border-radius: 30px;
  border: none;
  margin-top: 20px;
}

.arrows {
  position: absolute;
  bottom: 20px;
  width: calc(105% - var(--w-image));
  display: grid;
  grid-template-columns: repeat(2, 50px);
  grid-template-rows: 50px;
  justify-content: space-between;
  gap: 10px;
  padding-left: 5rem;
}

.arrows button {
  background-color: transparent;
  border: 1px solid var(--border-color);
  /* color: #fff; */
  color: var(--color);
  font-family: monospace;
  font-size: large;
  font-weight: bold;
  line-height: 0;
  /* box-shadow: 0 10px 40px #5555; */
  box-shadow: 0 10px 40px var(--shadow);
  cursor: pointer;
  transition: 0.5s;
  border-radius: 1rem;
}

button#next {}

.arrows button:hover {
  background-color: #eee5;
}

.carousel .list .item {
  display: none;
}

.carousel .list .item.active,
.carousel .list .item.other_1,
.carousel .list .item.other_2 {
  display: flex;
}

.carousel .list .item.active {
  z-index: 3;
  /* background: #eee; */
}

.carousel .list .item.other_1,
.carousel .list .item.other_2 {
  pointer-events: none;
}

.carousel .list .item.active .item-carousel {
  animation: showContent 1s ease-in-out 1 forwards;
}

@keyframes showContent {
  from {
    clip-path: circle(0% at 70% 50%);
  }

  to {
    clip-path: circle(100% at 70% 50%);
  }
}

.next .item.other_1 {
  z-index: 1;
}

.next .item .image img,
.next .item .image figcaption {
  animation: effectNext .5s ease-in-out 1 forwards;
}

@keyframes effectNext {
  from {
    transform: translateX(calc(var(--transform-from)));
    transform: translateX(calc(var(--transform-from)));
  }

  to {
    /* transform: translateX(calc(var(--transform-from) - var(--w-image))); */
    /* transform: translateX(0%); */
    transform: translateX(calc(var(--transform-from) - var(--w-image)));
  }
}

.next .item.active .image {
  --transform-from: var(--w-image);
  /* --transform-from: 30%; */
  /* --transform-from: 100%; */
}

.next .item.other_1 .image {
  z-index: 3;
  --transform-from: -30%;
  overflow: hidden;
}

.next .item.other_2 .image {
  z-index: 3;
  /* --transform-from: calc(var(--w-image) * 2); */
  /* --transform-from: calc(var(--w-image) * 2); */
  /* --transform-from: calc(var(--transform-from) * 2); */
  /* --transform-from: calc(var(--w-image) + 110%); */
  --transform-from: calc(calc(var(--w-image) + 30%) * 2);
}

.arrows {
  z-index: 10;
}

/* prev */
.prev .list .item .image img,
.prev .list .item .image figcaption {
  animation: effectPrev 0.5s ease-in-out 1 forwards;
}

@keyframes effectPrev {
  from {
    transform: translateX(calc(var(--transform-from)));
  }

  to {
    transform: translateX(calc(var(--transform-from) + var(--w-image)));
  }
}

.prev .list .item.active .image {
  --transform-from: calc(calc(var(--w-image)) * -1);
  overflow: hidden;
}

.prev .list .item.other_1 .image {
  --transform-from: 60%;
  /* --transform-from: 30%; */
  z-index: 3;
}

.prev .list .item.other_2 .image {
  z-index: 3;
  --transform-from: calc(((var(--w-image) + 30%) * 2) - var(--w-image));
}

.prev .list .item.other_2 .item-carousel {
  opacity: 0;
}

@media screen and (max-width: 1023px) {
  /* :root {
    --calculate: 1;
    --w-image: 400px;
  } */

  .carousel .list .item .item-carousel .content h2 {
    font-size: 3em;
  }
}




.item .slider-bg {
  position: absolute;
  /* display: none; */
  /* top: 0; */
  /* left: 0; */
  width: 100%;
  height: 100%;
  /* transition: display 0s;
  transition-property: display;
  transition-delay: 1s; */
  z-index: 0;
}

.item.active .slider-bg {
  display: block;
  /* transition-property: display;
  transition-delay: 0s;
  will-change: display; */
}

.slider-bg .slider-clip {
  transition: all 0.3s ease;
  cursor: pointer;
  --bg-c-value: #4D82B3;
  --bg-c-opacity: 0.5;
  height: 100%;
  width: auto;
  /* aspect-ratio: 420 / 309; */
  aspect-ratio: var(--aspect-ratio);
  z-index: 1;
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
}

.slider-bg .slider-bg-bk {
  background: var(--slider-bg);
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
}


/* .item .slider-clip .path {
  fill: var(--path-fill-color);
  opacity: var(--path-opacity);
} */
/* .item .slider-clip .path#path-1 {
  stroke-dashoffset: -7391px;
  transition: stroke-dashoffset 0.6s linear 0.5s;
}
.item .slider-clip .path#path-2 {
  stroke-dashoffset: -4195px;
  transition: stroke-dashoffset 0.6s linear 0.5s;
}
.item .slider-clip .path#path-3 {
  stroke-dashoffset: -3231px;
  transition: stroke-dashoffset 0.6s linear 0.5s;
}
.item .slider-clip .path#path-4 {
  stroke-dashoffset: -2662px;
  transition: stroke-dashoffset 0.6s linear 0.5s;
}
.item .slider-clip .path#path-5 {
  stroke-dashoffset: -1957px;
  transition: stroke-dashoffset 0.6s linear 0.5s;
}
.item .slider-clip .path#path-6 {
  stroke-dashoffset: -1295px;
  transition: stroke-dashoffset 0.6s linear 0.5s;
}
.item .slider-clip .path#path-7 {
  stroke-dashoffset: -471px;
  transition: stroke-dashoffset 0.6s linear 0.5s;
}
.item .slider-clip .path#path-8 {
  stroke-dashoffset: -1134px;
  transition: stroke-dashoffset 0.6s linear 0.5s;
} */

.iten .slider-clip .path#path-1 {
  stroke-dasharray: 7391;
  stroke-dashoffset: 7391;
}

.iten .slider-clip .path#path-2 {
  stroke-dasharray: 4195;
  stroke-dashoffset: 4195;
}

.iten .slider-clip .path#path-3 {
  stroke-dasharray: 3231;
  stroke-dashoffset: 3231;
}

.iten .slider-clip .path#path-4 {
  stroke-dasharray: 2662;
  stroke-dashoffset: 2662;
}

.iten .slider-clip .path#path-5 {
  stroke-dasharray: 1957;
  stroke-dashoffset: 1957;
}

.iten .slider-clip .path#path-6 {
  stroke-dasharray: 1295;
  stroke-dashoffset: 1295;
}

.iten .slider-clip .path#path-7 {
  stroke-dasharray: 471;
  stroke-dashoffset: 471;
}

.iten .slider-clip .path#path-8 {
  stroke-dasharray: 1134;
  stroke-dashoffset: 1134;
}

.item .slider-clip .path {
  fill: var(--path-fill-color);
  opacity: var(--path-opacity);
  fill-opacity: var(--path-opacity);
}

.item .slider-clip .stroke {
  opacity: var(--path-opacity);
  fill: none;
  stroke: var(--path-fill-color);
  stroke-width: 2;
  stroke-miterlimit: 10;
  mix-blend-mode: var(--path-blend);
}

.item.active .slider-clip .path {
  /* fill: var(--path-fill-color); */
  /* opacity: var(--path-opacity); */
  /* mix-blend-mode: var(--path-blend); */
  stroke-dashoffset: 0 !important;
  transition: stroke-dashoffset 2s linear;
}

.item.active .slider-clip .path#path-1 {
  transition-delay: 0s;
}

.item.active .slider-clip .path#path-2 {
  transition-delay: 0.2s;
}

.item.active .slider-clip .path#path-3 {
  transition-delay: 0.4s;
}

.item.active .slider-clip .path#path-4 {
  transition-delay: 0.6s;
}

.item.active .slider-clip .path#path-5 {
  transition-delay: 0.8s;
}

.item.active .slider-clip .path#path-6 {
  transition-delay: 1s;
}

.item.active .slider-clip .path#path-7 {
  transition-delay: 1.2s;
}

.item.active .slider-clip .path#path-8 {
  transition-delay: 1.4s;
}

/* .item.active .slider-clip .path#path-1 {
  transition: stroke-dashoffset 2s linear;
  stroke-dashoffset: 0px;
}
.item.active .slider-clip .path#path-2 {
  transition: stroke-dashoffset 2s linear;
  stroke-dashoffset: 0px;
}
.item.active .slider-clip .path#path-3 {
  transition: stroke-dashoffset 2s linear;
  stroke-dashoffset: 0px;
}
.item.active .slider-clip .path#path-4 {
  transition: stroke-dashoffset 2s linear;
  stroke-dashoffset: 0px;
}
.item.active .slider-clip .path#path-5 {
  transition: stroke-dashoffset 2s linear;
  stroke-dashoffset: 0px;
}
.item.active .slider-clip .path#path-6 {
  transition: stroke-dashoffset 2s linear;
  stroke-dashoffset: 0px;
}
.item.active .slider-clip .path#path-7 {
  transition: stroke-dashoffset 2s linear;
  stroke-dashoffset: 0px;
}
.item.active .slider-clip .path#path-8 {
  transition: stroke-dashoffset 2s linear;
  stroke-dashoffset: 0px;
} */

.item .slider-bg-bk .path {
  fill: var(--path-fill-color);
  opacity: var(--path-opacity);
}

.item.active .slider-bg-bk .path {
  fill: var(--path-fill-color);
  opacity: var(--path-opacity);
  mix-blend-mode: var(--path-blend);
}


.slider-bg .texture-bg {
  background: url('../images/texture/black-felt.png');
  background: url('../images/texture/texutre.png');
  /* background: url('../images/texture/texutre1.png'); */
  z-index: 3;
  background-repeat: repeat;
  /* mix-blend-mode: color-burn; */
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  position: absolute;
  /* background-color: #8a005e;
background-image: url("https://www.transparenttextures.com/patterns/arabesque.png"); */
  /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
  opacity: 0.4;
}

.carousel .list .item figure.image img.landscape {
  max-width: 95%;
  max-height: 100%;
  object-fit: none;
}

.carousel .list .item figure.image img.portrait {
  max-height: 80%;
  max-width: 70%;
}

.carousel .list .item figure.image img {
  object-fit: contain;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.carousel .list .item figure.image img.ready {
  opacity: 1;
  visibility: visible;
}

.carousel .list .item[is-dark] {
  color: var(--color);
  color: #fff;
}

.carousel .list .item .product-title,
.product-title {
  /* color: var(--color) !important; */
}

.bg-svg-s-1 {
  width: 100vw;
  height: 100%;
  display: block;
  overflow: hidden;
}

.bg-svg-s-1 svg {
  /* width: 100vw; */
  height: auto;
  width: auto;
  height: 100%;
  display: block;
}

.carousel .list .item .item-carousel .content .head-title {
  margin-bottom: 3rem;
  width: 100%;
}

.carousel .list .item .item-carousel .slider-squre-mb {
  display: none;
}

/* @media screen and (max-width: 767px) { */
@media screen and (max-width: 992px) {
  .carousel .list .item .item-carousel {
    height: 100%;
    display: grid;
    grid-template-rows: 30%;
    grid-template-columns: unset;
  }

  .carousel .list .item .image {
    width: 100%;
    left: 0;
    justify-content: end;
    max-width: 100%;
  }

  .carousel .list .item .image img {
    height: 71%;
  }

  .carousel .list .item .image figcaption {
    color: #fff;
    width: 100%;
    text-align: center;
  }

  .carousel .list .item .item-carousel .content {
    /* display: none; */
  }

  .carousel .list .item .item-carousel .content {
    padding: unset;
    display: flex;
    flex-direction: row;
    align-content: flex-end;
    justify-content: center;
    width: 100%;
    z-index: 0;
    align-items: end;
    position: relative;
    display: grid;
    justify-items: center;
  }

  .carousel .list .item .item-carousel .content .head-title {
    margin-bottom: 1rem;
    text-align: center;
  }

  .carousel .list .item .item-carousel .content h2 {
    font-size: 2em;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: .105rem;
    font-weight: 500;
  }

  .carousel .list .item .item-carousel .content .price {
    font-size: 2.25rem;
    margin: 0;
  }
  .slider-bg .slider-clip {
    display: none;
  }

  .carousel .list .item .item-carousel .slider-squre-mb {
    /* max-height: var(--w-image); */
    height: calc(100% - .5rem);
    display: block;
    clip-path: inset(var(--clip-top) 0 0 0 round 3.6rem);
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    margin: 0 auto 2rem;
    padding-bottom: 0rem;
    width: calc(100% - 2rem);
    border-radius: 2.25rem;
    overflow: hidden;
    /* will-change: clip-path; */
    position: relative;
  }

  .arrows {
    left: 50%;
    justify-content: center;
  }
}