#slider{
    overflow: hidden;
  }
.dp-wrap {
    margin: 10px auto;
    position: relative;
    perspective: 1000px;
    width:80%;
    height: 100%;
  }
  
  .dp-slider {
    height: 100%;
    width: 100%;
    position: absolute;
    transform-style: preserve-3d;
  }
  
  .dp-slider div {
    transform-style: preserve-3d;
  }
  
  .dp_item {
    display: block;
    position: absolute;
    text-align: center;
    color: #dfdcd6;
    border-radius: 10px;
    transition: transform 1.2s;
  }
  
  .dp-img img {
    border-left: 1px solid #fff;
  }
  
  #dp-slider .dp_item:first-child {
    z-index: 10 !important;
    transform: rotateY(0deg) translateX(0px) !important;
  }
  
  .dp_item[data-position="2"] {
    z-index: 9;
    transform: rotateY(0deg) translateX(10%) scale(0.9);
  }
  
  .dp_item[data-position="3"] {
    z-index: 8;
    transform: rotateY(0deg) translateX(20%) scale(0.8);
  }
  
  .dp_item[data-position="4"] {
    z-index: 7;
    transform: rotateY(0deg) translateX(30%) scale(0.7);
  }
  
  #dp-next,
  #dp-prev {
    position: absolute;
    top: 50%;
    right: 16%;
    height: 33px;
    width: 33px;
    z-index: 10;
    cursor: pointer;
  }
  
  #dp-prev {
    left: 15px;
    transform: rotate(180deg);
  }
  
  #dp-dots {
    position: absolute;
    bottom: 25px;
    z-index: 12;
    left: 38%;
    cursor: default;
  }
  
  #dp-dots li {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 50%;
  }
  
  #dp-dots li:hover {
    cursor: pointer;
    background: #5f6d49;
    transition: background 0.3s;
  }
  
  #dp-dots li.active {
    background: #5f6d49;
  }
  
  .dp_item {
    width: 85%;
  }
  
  .dp-content,
  .dp-img {
    text-align: left;
  }
  
  .dp_item {
    display: flex;
    align-items: center;
    background: #dfdcd6;
    border-radius: 10px;
    overflow: hidden;
    border-top: none;
  }
  
  .dp-content {
    display: inline-block;
    width: 320px;
    margin:0 auto;
    padding:0 5%;
  }
  
  .dp-content h2 {
    color: #5f6d49;
    font-family: 'Noto Serif Bengali', serif;;
    font-size: 32px;
    max-width: 460px;
    margin-top: 8px;
    margin-bottom: 0px;
    /* text-align: left; */
  }
  
  .dp-content p {
    color: #74747f;
    max-width: 490px;
    margin-top: 15px;
    font-size: 20px;
  }
  
  .dp-content .site-btn {
    margin-top: 15px;
    font-size: 18px;
    padding: 19px 40px;
  }
  
  .dp-img:before {
    background: -webkit-linear-gradient(
      -90deg,
      rgba(255, 255, 255, 0.25),
      rgba(255, 255, 255, 0)
    );
    background: -o-linear-gradient(
      -90deg,
      rgba(255, 255, 255, 0.25),
      rgba(255, 255, 255, 0)
    );
    background: -moz-linear-gradient(
      -90deg,
      rgba(255, 255, 255, 0.25),
      rgba(255, 255, 255, 0)
    );
    background: linear-gradient(
      -90deg,
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0)
    );
    content: "";
    position: absolute;
    height: 100%;
    width: 5%;
    z-index: 1;
    top: 0;
    pointer-events: none;
    background: -webkit-linear-gradient(
      -90deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.75)
    );
    background: -o-linear-gradient(
      -90deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.75)
    );
    background: -moz-linear-gradient(
      -90deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.75)
    );
    background: linear-gradient(
      -90deg,
      rgba(255, 255, 255, 0),
      rgb(255, 255, 255)
    );
  }
  
  .dp-img img {
    object-fit: cover;
    object-position: right;
  }
  
  #dp-slider,
  .dp-img img {
    height: 600px;
  }
  
  #dp-slider .dp_item:hover:not(:first-child) {
    cursor: pointer;
  }
  
  .site-btn {
    color: #fff;
    font-size: 18px;
    font-family: 'Noto Serif Bengali', serif;;
    background: #5f6d49;
    padding: 14px 33px;
    display: inline-block;
    border-radius: 50px;
    position: relative;
    top: -10px;
    text-decoration: none;
  }
  
  .site-btn:hover {
    cursor: pointer;
  }
  
  @media (max-width:800px){
    #dp-slider{
      height: 540px;
    }
    
    .dp-img img {
      height: 320px;
      width:400px;
    }
    .dp_item{
        display: flex;
        flex-wrap: wrap;
    }
    .dp-content {
        text-align: center;
    }
  }
  @media (max-width:490px){
    #dp-slider{
      height: 600px;
    }
    .dp-img img {
      width:300px;
      width:300px;
    }
    .dp-wrap{
        width:95%;
    }
  }