﻿@font-face {
    font-family: 'Shabnam';
    src: url('Shabnam.woff') format('woff');
}

body {
    font-family: Shabnam;
    text-align: right;
    direction: rtl;
}

ul li {
    list-style: none;
}

.sar-slider {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

    .sar-slider > ul {
        position: relative;
        display: block;
        min-height: 500px;
        width: 100%;
        margin: 0;
    }

        .sar-slider > ul > li {
            display: none;
            width: 100%;
            height: 500px;
        }

        .sar-slider > ul li:first-child {
            display: block;
        }

.slide-item-icons li img {
    border-radius: 25% 0 25%;
    box-shadow: 0 2px 26px #14141433;
}
.sar-slider .slide-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

    .sar-slider .slide-content > .slid-box {
        width: 100%;
    }

        .sar-slider .slide-content > .slid-box > .slide-col {
            text-align: center;
        }

            .sar-slider .slide-content > .slid-box > .slide-col .text-box {
                width: 80%;
                background-color: #00000094;
                margin: auto;
                padding: 20px 0;
                border-radius: 15px;
            }

.slide-item-icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .slide-item-icons li {
        margin-left: 15px;
        width: 150px;
        border-radius: 100%;
        padding:2px;
    }

.txt-effect {
    font-size: 3em;
    font-weight: 900;
}

.btn-arrow {
    position: absolute;
    font-size: 5em;
    color: #fff;
    top: calc(50% - 50px);
    opacity: .5;
    transition: all .5s;
    -webkit-transition: all .5s;
}

    .btn-arrow:hover {
        opacity: .8;
    }

    .btn-arrow > i {
        font-weight: 100 !important;
    }

    .btn-arrow.btn-prev {
        left: 20px;
    }

    .btn-arrow.btn-next {
        right: 20px;
    }
