.slider-3d-curved {
   width: 100%;
   /* height: 500px; */
   position: relative;
   perspective: 1500px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: -70px;
   overflow: hidden;
 }

 .slider-3d-curved .carousel {
   /* width: 300px; */
   width: min(300px, 25vw);
   /* 25% of viewport width up to 300px */
   height: 400px;
   position: relative;
   transform-style: preserve-3d;
   /*
   transition: transform 1s cubic-bezier(.25, .8, .25, 1);*/ 
    opacity: 0;

 }

 .slider-3d-curved .item {
   position: absolute;
   width: 300px; /*240px; */
   height: 350px; 
   left: 60px;
   top: 25px;
   opacity: 0;
   /* transition: transform 1s, opacity 1s; */
   transition: opacity 0.5s; /**/
   /*
   
     left = (carousel width - item width) / 2
     top  = (carousel height - item height) / 2
    */



 }

 .slider-3d-curved .item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 20px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
 }

 .slider-3d-curved .nav {
   position: absolute;
   background: #000;
   color: #fff;
   border: none;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   cursor: pointer;
   font-size: 22px;
   z-index: 10;
   transition: 0.3s;
 }

 .slider-3d-curved .nav:hover {
   scale: 0.95;
   background: #00000081;
 }

 .slider-3d-curved .prev,
 .slider-3d-curved .next {
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .slider-3d-curved .prev {
   left: 40px;
 }

 .slider-3d-curved .next {
   right: 40px;
 }


 /* .slider-nav-sections{
  text-align:center;
  margin-top:20px;
}

.sec-btn{
  padding:10px 20px;
  border:none;
  background:#ccc;
  margin:5px;
  cursor:pointer;
  border-radius:30px;
  transition:.3s;
}

.sec-btn.active{
  background:#000;
  color:#fff;
} */


 @media (max-width: 768px) {
   .slider-3d-curved {
     height: 400px;
   }

   .slider-3d-curved .item img {
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
   }


   /* .item {
        width: 90px;
        height: 220px;
        left: 75px;
      } */
 }

 @media (max-width: 576px) {
   .slider-3d-curved .item {
     width: 140px;
     /*70px;*/
     height: 380px;
     /*180px;*/
     left: 80px;
     /*120*/

     /*
     left = (carousel width - item width) / 2
     top  = (carousel height - item height) / 2
    */
   }


 }

 /* @media (max-width: 576px) {
   .slider-3d-curved .carousel {
     width: min(1600px, 25vw);
   }
 } */

 @media (min-width: 577px) and (max-width: 768px) {
   .slider-3d-curved .item {
     width: 150px;
     height: 220px;
   }
 }