/* Start Style Guide*/
:root {
    --main-color: #DDAB4F;
    --second-color: #1C1A15;
    --red-color: #DD4F4F;
}

@font-face {
	font-family: zadFontPlain;
    src: url('../font/Bahij_TheSansArabic-Plain.ttf');
}
@font-face {
	font-family: zadFontBold;
    src: url('../font/ArbFONTS-Bahij_TheSansArabic-Bold.ttf');
}

/* End Style Guide*/
/* Start Hero slide */
div.block_zad_hero > .title{
    display: none !important; 
}

.zad-hero{
    position: relative;
    /* height: calc(100vh - 185px); */
    height: 840px !important;
    background-size: cover;
}
.zad-hero .border-hero{
    position: absolute;
    bottom: -38px;
    z-index: 99;
    width: 85%;
    height: 1px;
    background-color: var(--main-color);
    right: 0;
    margin: auto;
}

.zad-hero::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: transparent linear-gradient(0deg, #000000 0%, #000000AD 27%, #0D151400 60%, #1A2928 100%) 0% 0% no-repeat padding-box;
    
}

.zad-hero .box-slide{
    position: absolute;
    top: 25%;
    z-index: 10;
}

.zad-hero .box-slide .logo-episode{
    width: 14%;
    margin-bottom: 80px;
}

.zad-hero .box-slide .btn-live{
    color: #fff;
    font-size: 16px;
    background-color: #DD4F4F33 !important;
    padding: 8px 40px 8px 60px;
    position: relative;
    margin-bottom: 15px;
}

.zad-hero .box-slide .btn-live .pulsating-circle{
    position: absolute;
    top: 50%;
    right: 10px;
    color: #DD4F4F;
    width: 15px;
    height: 15px;
    transform: translateX(-50%) translateY(-50%);
}

.zad-hero .box-slide .btn-live .pulsating-circle::before {
    content: '';
    position: relative;
    display: block;
    width: 220%;
    height: 220%;
    box-sizing: border-box;
    margin-right: -60%;
    margin-top: -60%;
    border-radius: 45px;
    background-color: #DD4F4F;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.zad-hero .box-slide .btn-live .pulsating-circle::after {
    content: '';
    position: absolute;
    left: 0; 
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #DD4F4F;
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(.33);
    }
    80%, 100% {
        opacity: 0;
    }
    }

    @keyframes pulse-dot {
    0% {
        transform: scale(.8);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(.8);
}
}


.zad-hero .box-slide .btn-live::after{
    position: absolute;
    content: "\f04b ";
    font:normal normal normal 14px/1 FontAwesome;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

.zad-hero .box-slide .hero-title{
    color: #fff;
    font-size: 58px;
    font-weight: bold;
    font-family: zadFontBold;
}

.border-hero{
    background-color: #DDAB4F;
}

.hero-info{
    display: flex;
    justify-content:flex-start;
    margin-bottom: 20px;
}

.hero-info i{
    color: var(--main-color);
}
.hero-info span{
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}

.hero-time,
.hero-date{
    display: flex;
    align-items: center;
    margin-left: -140px;
}

.icon-hero{
    display: inline-block;
    width: 8%;
    padding-left: 10px;

}


.hero-text {
    color: #fff;
    font-size: 18px;
    width: 44%;
}

/* End Hero slide */



/* Start media query */
@media (max-width: 991px) {
    .zad-hero .box-slide{
        width: 100%;
    }

    .zad-hero .box-slide .logo-episode{
        width: 40%;
    }

    .zad-hero .box-slide .hero-title{
        font-size: 28px;
    }

    .hero-info{
        display: block;
    }

    .hero-info span{
        font-size: 14px;
    }

    .hero-info img{
        font-size: 6%
    }

    .hero-info .hero-time{
        margin-bottom: 15px;
    }

    .hero-info .hero-date{
        margin-right: 0px;
        margin-top: 10px;
    }
    
    .hero-text {
        padding-left: 28px;
        width: 100%;
    }

    .zad-hero .border-hero{
        width: 92%;
    }
}
/* End media query */