.my-banner-slider{
    position:relative;
    width:100%;
    max-width:100%;
    height:500px;
    overflow:hidden;
    margin:0 auto;
    background:#f5f5f5;
}

.my-banner-slider .slide{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    opacity:0;
    transition:opacity .8s ease;
    z-index:1;
}

.my-banner-slider .slide.active{
    opacity:1;
    z-index:2;
}

.my-banner-slider img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* فلش ها */

.slider-prev,
.slider-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:45px;
    height:45px;
    border-radius:50%;
    background:rgba(0,0,0,.5);
    color:#fff;
    cursor:pointer;
    z-index:50;
    border:none;
    font-size:22px;
    transition:.3s;
}

.slider-prev:hover,
.slider-next:hover{
    background:#c79a63;
}

.slider-prev{
    left:20px;
}

.slider-next{
    right:20px;
}

/* نقاط */

.slider-dots{
    position:absolute;
    bottom:20px;
    width:100%;
    text-align:center;
    z-index:60;
}

.slider-dots span{

    display:inline-block;
    width:12px;
    height:12px;
    margin:5px;
    border-radius:50%;
    background:#fff;
    cursor:pointer;
    transition:.3s;
}

.slider-dots span.active{

    background:#c79a63;
    transform:scale(1.2);
}

/* موبایل */

@media(max-width:768px){

.my-banner-slider{

height:220px;

}

.slider-prev,
.slider-next{

width:35px;
height:35px;
font-size:18px;

}

}