:root {
    /*live*/
    --background-color : #f3f4f9;
    --blinker-color : #5ad149;
    --blinker-shadow-color : #c0e6c0;

    --plans-primary-color : rgb(255, 231, 97);

    --blue : rgb(53, 47, 150);
}

*{
    box-sizing: border-box;
    direction: rtl;
}

@keyframes light {
    to {
        transform:  translate(-50% , -50%) scale(1.5);
    }
}

.live {
    width : 100%;
    height: 100px;
    background: var(--background-color);
    border-radius: 40px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 15px;
}
.live__blinker {
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background: #d91460;
  position: relative;
}
.live__blinker::before{
    position: absolute;
    transform: translate(-50% , -50%);
    left: 50%;
    top: 50%;
    width: 18px;
    content: "";
    height: 18px;
    opacity: 0.2;
    background: #d91460;
    animation: light infinite 0.5s;
    transform-origin: center;
    border-radius: 50px;
}

.live__logo {
    padding: 0 30px 0 30px !important;
}
.live__logo img{
    width: 75px !important;
    height: auto !important;
}

.live__infoo {
    border-right: 1px solid rgba(0,0,0,0.2);
    height: auto;
    display: flex;
    flex-direction: column;
    padding-right: 50px;
    flex: 1;
}
.main.blogs .blogs-box .live__infoo h2{
    font-family: "shabnam-R";
    font-size: 18px;
    text-align: inherit;
    width: auto;
    margin: 0;
}
.live__infoo p{
    font-family: "shabnam-R";
    font-size: 16px !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    color: #999 !important;
}

.live__info {
    border-right: 1px solid rgba(0,0,0,0.2);
    height: auto;
    display: flex;
    flex-direction: column;
    padding-right: 50px;
    flex: 1;
}
.main.blogs .blogs-box .live__info h2{
    font-family: "shabnam-R";
    font-size: 18px;
    text-align: inherit;
    width: auto;
    margin: 0;
}
.live__info p{
    font-family: "shabnam-R";
    font-size: 16px !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    color: #999 !important;
}

.live__time{
    
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    font-size: 16px !important;
}
.live__time span{
    font-family: "shabnam-R";
    margin: 5px 0;
}
    
    @media only screen and (max-width: 1100px) {
        .df{
            width:100% !important;
        }
        .dff{
            width:100% !important;
            margin-bottom: 100px;
        }
        #my-video {
            width: 93% !important;
            height: 95.9% !important;
            margin-top: 30px !important;
            margin-right: 18px !important;
        }
        .imglive{
            height:120% !important;
            margin-right: -13px !important;
        }
    }
    
    @media only screen and (max-width: 930px) {
        #my-video {
            margin-right: 10px !important;
        }
        .imglive {
            margin-right: -15px !important;
        }
    }
    @media only screen and (max-width: 900px) {
        #my-video {
            margin-right: 10px !important;
        }
        .imglive {
            margin-right: -15px !important;
        }
    }
    @media only screen and (max-width: 800px) {
        #my-video {
            width: 93% !important;
            height: 87.7% !important;
            margin-top: 28px !important;
            margin-right: 10px !important;
        }  
        .imglive {
            height: 110% !important;
            margin-right: -15px !important;
        }
    }
    @media only screen and (max-width: 700px) {
        #my-video {
            height: 79.7% !important;
            margin-top: 26px !important;
            margin-right: 8.5px !important;
        }  
        .imglive {
            height: 100% !important;
            margin-right: -15px !important;
        }
        .dff{
            margin-bottom: 10px !important;
        }
    }
    @media only screen and (max-width: 600px) {
        #my-video {
            height: 64.2% !important;
            margin-top: 19px !important;
            margin-right: 5.5px !important;
        }  
        .imglive {
            height: 80% !important;
            margin-right: -15px !important;
        }
        .dff{
            margin-bottom: 0px !important;
        }
    }
    @media only screen and (max-width: 375px) {
        .live{
            box-shadow: 0 2px 16px 0 rgba(0,0,0,0.18);
        }
        .live__logo{
            display:none !important;
        }
        #my-video {
            height: 79.3% !important;
            margin-top: 12px !important;
            margin-right: -3.5px !important;
        }  
        .imglive {
            height: 100% !important;
            margin-right: -15px !important;
        }
        .dff{
            min-height:200px !important;
            margin-bottom: 0px !important;
        }
        .float_left{
            min-height:350px !important;
        }
        .matnText{
            height:30px !important;
            min-height: 30px !important;
        }
        .live__infoo{
            border-right:none !important;
            padding-right:25px !important;
        }
    }    
    
    @media only screen and (max-width: 560px) {
        .live__time{
                
            display: none !important;
        }
        .live__info{
            
            padding-right:15px !important;
            
        }
        .live__info p{
            font-size: 15px !important;
        }
    }
    @media only screen and (max-width: 620px) {
        
        .live__info{
            
            padding-right:15px !important;
            
        }
        
        .live__info p{
            font-size: 14px !important;
        }
        
    }
    @media only screen and (max-width: 685px) {
        
        .fileArchive{
            display: inline-block !important;
        }
        
        .fileArchive__data{
            width: 100% !important;
        }
        
        .fileArchive__data .labell{
            margin-left: 15px !important;
            width: 45% !important;
            margin-top: 10px;
        }
        
        .fileArchive__contact{
            margin-top: 10px !important;
            width:100% !important;
        }
        
        .fileArchive__contact .download{
            float: right !important;
            width: 45% !important;
            margin-right: 25% !important;
            font-size: 14px !important;
            text-align: center !important;
        }
    }
    @media only screen and (max-width: 585px) {
            .fileArchive__data .labell {
                width: 90% !important;
            }
            .fileArchive__contact .download{
                width: 90% !important;
                margin-right: 20px !important;
            }
    }
    @media only screen and (max-width: 585px) {
        
        .fileArchive__data{
            margin-right:12px !important;
        }
        .fileArchive__contact .download{
            margin-right:12px !important;
        }
        
    }
    @media only screen and (max-width: 375px) {
        
        .live__info{
            padding-right: 1px !important;
            border-right: none !important;
        }
        
        .live__info p {
            font-size: 12px !important;
        }
        
    }
       
.plans{
    display: flex;
    flex-direction: column;
}

.plans__title { 
    position: relative;
    font-size: 20px;
    margin-bottom: 40px;
}
.plans__title::after { 
    content: "";
    width: 75px;
    height: 7px;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    background: var(--plans-primary-color);
}
.plans__content{
    display: flex;
    flex-wrap: wrap;
}

.plans__content .plan {
    width: 280px;
    border-radius: 20px;
    margin: 10px;
    overflow: hidden;
    border: 2px solid #efefef;
    transition: 0.3s;
}
.plans__content .plan:hover header .more{
    opacity: 1;
}
.plans__content .plan:hover {
    background: #efefef;
}

.plans__content .plan header{ 
    border-radius: 20px 20px 0 0 ;
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 220px;
}

.plans__content .plan header img{ 
    width: 100%;
    height: 220px;
    position: absolute;
    top: 0;
    right: 0;
}

.plans__content .plan header .more{
    width: 100%;
    height: 100%;
    background: rgba(53, 47, 150 , 0.6);
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    opacity: 0;
    margin: 0px 0 !important;
 }

 .plans__content .plan header .more .link{
     box-sizing: content-box;
     padding: 10px 20px;
     border-radius: 50px;
     background: var(--plans-primary-color);
     text-decoration: none;
     color: var(--blue);
     box-shadow: 0 0 50px 5px  rgb(255, 231, 97, 0.5);
 }

 .plans__content .plan .content{ 
   padding: 20px;
}

.plans__content .plan .content h3{
    margin-top: 0;
    font-size:18px !important;
} 

.plans__content .plan .content p{
    font-size: 14px;
}

.fileArchive { 
    display: flex;
    border-radius: 50px;
    border: 2px solid #efefef;
    padding: 10px ;
    width: 100%;
    align-items: center;
}

.fileArchive__data {
    display: block;
    margin-right: 20px;
    width: 80%;
    float: right;
}

.fileArchive__data .labell {
    float:right;
    margin-left: 30px;
    padding: 10px 25px;
    border-radius: 50px;
    background-color: #313490;
    color:#fff;
    text-align: center;
    white-space: nowrap;
    font-size: 75%;
}
.fileArchive__data .labell span{
    font-size: 14px;
}

.fileArchive__contact {
    display: block;
    width: 18%;
    float: right;
}


.fileArchive__contact .download{
    background: var(--blue);
    border-radius: 50px;
    padding: 10px 25px;
    color: white;
    text-decoration: none;
    transition: 0.3s;
    float:left;

}

.fileArchive__contact .download:hover{
    box-shadow: 0 0 10px 5px  rgb(53, 47, 150, 0.5);
    transform: translateX(10px);
}

.fileArchive__contact .social {
    display: flex;
    align-items: center;
    margin-left: 25px;
}

.fileArchive__contact .social a{
    margin : 5px;
    color: #999;
    transition: 0.3s;
    text-decoration: none;
}

.fileArchive__contact .social a:hover{
    text-shadow: 0 0 10px   rgb(53, 47, 150, 0.5);
    color: var(--blue);
}