*{
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}


@font-face{

        font-family: vazir;
        src: url('fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
        src: url('fonts/webfonts/Vazirmatn-Thin.woff2') format('woff2');
        src: url('fonts/webfonts/Vazirmatn[wght].woff2') format('woff2');
}

/*                                  این استایل ها برای اسلایدر هستند    */
.deylam-slider{
    height:           450px;
    position:         relative;
    overflow:         hidden;
    background-image: linear-gradient( 45deg , #001031 60%, #3a3a3a 60% );
    background-size:  4000px 4000px;
    animation:        bg-of-slider 2s 1 alternate forwards ; 

}
@keyframes bg-of-slider{
    0%{
        background-position: -4000px;
    }
    100%{
        background-position: -6300px;
    }


}

 .deylam-list .deylam-item{
    position:   absolute;
    inset:      0 0 0 0;
    overflow:   hidden; 
    opacity:    0;
    transition: 0s;
    text-align: right;
    
}

.deylam-imgholder{
    width:           30%;
    height:          400px;
    border-radius:   20px;
    object-fit:      contain;
    position:        absolute;
    left:            30px;
    top:             5%;
    overflow:        hidden;
    z-index:         99;
    display:         flex;
    justify-content: center;
    align-items:     center;
    overflow:        hidden;
    padding:         20px;
}
.deylam-imgholder img{
    width:         98%;
    height:        97%;
    position:      absolute;
    object-fit:    cover;
    border-radius: 15px;
}


@keyframes thumd-holder{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.deylam-slider .deylam-list .deylam-item::after{
    content:  "";
    width:    100%;
    height:   100%;
    position: absolute;
    left:     0;
    bottom:   0;
}
.deylam-slider .deylam-list .deylam-item .deylam-content{
    position:    absolute;
    right:       50px;
    top:         20%;
    width:      60%;
    max-width:   80%;
    z-index:     1;
    font-family: vazir;
    color:     white;
    text-wrap:   wrap;
}
.deylam-content .deylam-btn{
    padding:          6px 40px;
    margin-top:       10px;
    background-color: #ff6600;
    border:           none;
    border-radius:    15px;
    font-size:        12px;
    font-weight:      bold;
    font-family:      vazir;
    text-decoration:  none;
    color:          white;
    display:          inline-block;
    transition:       all .5s;
}
.deylam-content .deylam-btn:hover{
    background-color: white;
    color:            black;
}
.deylam-slider .deylam-list .deylam-item .deylam-content h2 .deylam-eng {
    color:       #ff6600;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.deylam-content span{
    color: #ff6600;
}
.deylam-slider .deylam-list .deylam-item .deylam-content p:nth-child(1){
    font-weight: 800;
    font-family: vazir;
    text-align:  right;
}

.deylam-slider .deylam-list .deylam-item .deylam-content h2{
    font-size:   40px;
    margin:      0;
    font-family: vazir;
    line-height: 100px;
}
.deylam-slider .deylam-list .deylam-item.deylam-active{
    opacity:    1;
    z-index:    10;
    transition: all .5s;
    animation:  coming 2s 1 ;
}
@keyframes coming{
    0%{
        opacity: 0;

    }
    100%{
        opacity: 1;
    }
}
@keyframes showcontent{
    to{
        transform: translateY(0);
        filter:    blur(0);
        opacity:   1;
    }
}
.deylam-slider .deylam-list .deylam-item.deylam-active p:nth-child(1),
.deylam-slider .deylam-list .deylam-item.deylam-active h2,
.deylam-slider .deylam-list .deylam-item.deylam-active p:nth-child(3),
.deylam-slider .deylam-list .deylam-item.deylam-active .deylam-btn{
    transform: translateY(30px);
    filter:    blur(20px);
    opacity:   0;
    animation: showcontent .5s .7s ease-in-out 1 forwards;
}
.deylam-slider .deylam-list .deylam-item.deylam-active h2{
    animation-delay: 1s;
}
.deylam-slider .deylam-list .deylam-item.deylam-active p:nth-child(1){
    color: #ff6600;
}
.deylam-slider .deylam-list .deylam-item.deylam-active p:nth-child(3){
    animation-duration: 1.3s;
}
.deylam-slider .deylam-list .deylam-item.deylam-active .deylam-btn{
    animation-duration: 1.5s;
}

/*                                          در اینجا دکمههای پیمایش استایل دهی شده اند          */

.deylam-arrows{
    position: absolute;
    top:      83%;
    right:    5%;
    z-index:  100;
}
.deylam-arrows button{
    background-color: #ff6600;
    border:             none;
    font-size:          x-large;
    width:              40px;
    height:             40px;
    border-radius:      5px;
    color:            white;
    transition:         .5s;
}
.deylam-arrows button:hover{
    background-color: rgb(255, 255, 255);
    color:            #ff6600;
}

/*                                          استایل دهی به تامنیل ها اینجا انجام شده است           */
.deylam-thumbnail{
    position:        absolute;
    z-index:         11;
    display:         flex;
    flex-direction:  column;
    gap:             15px;
    width:           100%;
    height:          150px;
    padding:         0 0 0 70px;
    box-sizing:      border-box;
    overflow:        visible;
    justify-content: flex-start;
    align-items:     flex-end;
    right:           45%;
    top:             9%;
}
.deylam-thumbnail::-webkit-scrollbar{
    width: 0;
}
.deylam-thumbnail .deylam-item{
    width:          80px;
    height:         80px;
    filter:         brightness(.5);
    transition:     1s;
    flex-shrink:    0;
    border-radius:  50%;
    overflow:       visible;
   
}

.deylam-thumbnail .deylam-item img{
    width:         100%;
    height:        100%;
    object-fit:    cover;
    border-radius: 50%;
    z-index:       -1;
}
.deylam-thumbnail .deylam-item.deylam-active{
    filter:        brightness(1.5);
    border-radius: 10px;
    overflow:      visible;
    transition:    all .4s;
    transform:     translateX(-50px);
    opacity:        0;
}

.deylam-thumbnail .deylam-item .deylam-content p{
    display: block;
    position:     absolute;
    inset:        auto 10px 10px 35px  ;
    color:      rgb(255, 255, 255);
    font-family:  vazir;
    cursor: pointer;
}