.container {
    margin: 0 auto;
    width: 80%;
    text-align: center;
    direction: rtl;
}

#introduce {
    display: block;
    width: 100%;
    font-size: 35px;
    font-weight: bold;
    color: white;
    padding-bottom: 5px;
    background-color: #4CAF50;
    text-decoration: none;
    margin-bottom: 15px;
}

body{
    background-color: gray;
}


/* Page Style */

.d-block {
    display: block;
}

.width-full {
    width: 100%;
}

.splide {
    margin: auto;
}

.splide__slide.custom-effect {
    transition: 0.3s all;
    border-bottom: 3px solid transparent;
}

.splide__slide.custom-effect.is-active {
   border-bottom-color: greenyellow;
}

.wrapper-center {
    width: 75%;
    margin: 2rem auto;
}

/*
Pagination
*/

.splide-3 .splide__pagination {
    counter-reset: pagination-num;
}

.splide-3 .splide__pagination__page:before {
    counter-increment: pagination-num;
    content: counter(pagination-num);
}

.splide-3 .splide__pagination__page {
    width: 15px;
    height: 15px;
}


/*
Progress
*/

.my-slider-progress {
    background: #ccc;
}

.my-slider-progress-bar {
    background: greenyellow;
    height: 5px;
    transition: width 400ms ease;
    width: 0;
}