@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 
 .carousel {
    overflow: hidden;
    padding: 2rem 0 2rem;
   
   
 }
 .carousel h2 {
    text-align: center;
    margin-top: 4rem;
     
 }
  
    
 
 .swiper-slide {
   position: relative;
   width: 400px ;
    
    display: block;
    background-color:#E5E3DC;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid  rgba(36, 32, 32, 0.4);
 
 }
 svg {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 24px;
   height: 24px;
   fill: #3C352A;
   opacity: 0.7;
   transition: opacity 0.3s;
 }
  
 .swiper-slide:hover {
   cursor: pointer;
   border: 1px solid rgb(58, 129, 228, 0.4);
  
 }  .swiper-slide:hover svg{
   color: blue;
 }
 .swiper-slide:hover img{
   
 }
 
.swiper-slide:nth-child(1) {
 
}
 
.swiper-slide:nth-child(2) {
 
}
 
.swiper-slide:nth-child(3) {
 
}
 
.swiper-slide:nth-child(4) {
 
}

 .card-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     
 
 }
 img {
    width: 100%;
      clip-path: polygon(0 0, 90% 0, 100% 6.8%, 100% 100%, 0 100%);
 }
 .card-wrapper {
    display: flex; 
    justify-content: center;
    align-items: center;
   
     
 }
.title {
   color: rgb(60, 53, 42);
   text-align: center;
   margin: 0.5rem;
   padding: 5px;
   width: fit-content; 
   border-radius: 12px;
   background-color:#e6dec4;
}
  
 
.swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(70, 63, 35, 0.48), rgba(230, 222, 196, 0))!important;
}
 
.swiper-slide-shadow-right {
  background-image: linear-gradient(to right,   rgba(70, 63, 35, 0.48), rgba(230, 222, 196, 0))!important;
}
 
@media screen and (max-width: 768px) {
  .swiper-slide {
    width: 440px!important;  
  }
  .close-btn {
    top: 55px ;
    right: 10px!important;
  }
}
@media screen and (max-width: 468px) {
  .swiper-slide {
    width: 300px!important;  
  }
  .close-btn {
    top: 55px ;
    left: 0px;
  }
  .modalimg {
    padding-top: 8rem!important;
    
    align-self: center;
  }
}
@media screen and (max-width: 348px) {
  .swiper-slide {
    width: 270px!important;  
  }
  .swiper-button-next, .swiper-button-prev {
    width: 15px;
    margin-left: 20px!important;
  }
}