@font-face {
    font-family: 'iranyekanwebbold';
    src: url('../../Fonts/iranyekanwebbold.eot') format('embedded-opentype'), url('../../Fonts/iranyekanwebbold.ttf') format('truetype'), url('../../Fonts/iranyekanwebbold.woff') format('woff'), url('../../Fonts/iranyekanwebbold.woff2') format('woff2');
}

@font-face {
    font-family: 'iranyekanweblight';
    src: url('../../Fonts/iranyekanweblight.eot') format('embedded-opentype'), url('../../Fonts/iranyekanweblight.ttf') format('truetype'), url('../../Fonts/iranyekanweblight.woff') format('woff'), url('../../Fonts/iranyekanweblight.woff2') format('woff2');
}

@font-face {
    font-family: 'iranyekanwebregular';
    src: url('../../Fonts/iranyekanwebregular.woff2') format('woff2'), url('../../Fonts/iranyekanwebregular.eot') format('embedded-opentype'), url('../../Fonts/iranyekanwebregular.ttf') format('truetype'), url('../../Fonts/iranyekanwebregular.woff') format('woff');
}

@font-face {
    font-family: 'B Nazanin Bold';
    src: url('../../Fonts/B Nazanin Bold_YasDL.ttf') format('truetype');
}


@font-face {
    font-family: 'B Nazanin';
    src: url('../../Fonts/Far_Nazanin.ttf') format('truetype');
}

@font-face {
    font-family: 'shin';
    src: url('../../Fonts/Adobe arabic shin.ttf') format('truetype');
}

@font-face {
    font-family: 'ebrimabd';
    src: url('../Fonts/ebrimabd.ttf') format('truetype');
}

html{
    overflow-x:hidden !important
}


.background img, .background {
    width: 100%
}
.TopElementVideo {
    position: absolute;
    top: 0;
    width: 69.21875%;
    left: 3.0208%;
    z-index:6
}

    .TopElementVideo img{
        width:100%
    }

    .EngLogo {
        position: absolute;
        z-index: 5;
        width: 5.208%;
        right: 30.3125%;
        z-index:7
    }



    .EngLogo a img {
        transition: all 0.3s ease-in-out 0s;
        width: 100%
    }


.persianLogo {
    position: absolute;
    z-index: 5;
    width: 4.167%;
    right: 66.6146%;
    z-index: 7
}

    .persianLogo img {
        width: 100%;
        transition: all 0.3s ease-in-out 0s;
    }
        .persianLogo img:hover {
            cursor: pointer;
            box-shadow: 0 0 10px black
        }

.blogHeader {
    position: absolute;
    width: 14.583%;
    right: 33.59375%;
    z-index: 10;
    z-index: 7
}

    .blogHeader h1 {
        font-family: shin;
        color: #191817;
        text-align: right;
        font-size: 30px;
    }

.TopVideo {
    position: absolute;
    z-index: 5;
    width: 25%;
    right: 36.93%;
    text-align: right;
    z-index: 7
}

    .TopVideo img {
        width: 100%
    }

    .TopVideo h2 {
        font-family: 'iranyekanwebbold';
        color: #f7b400;
        margin-top: 18px;
        margin-bottom: 0;
        font-size: 40px;
        letter-spacing: 1px
    }

    .TopVideo p {
        font-family: 'B Nazanin';
        color: #8e8e8e;
        margin-top: 5px;
        margin-bottom: 0;
        font-size: 21px;
        font-weight: 600
    }

.logoPlay {
    position: absolute;
    z-index: 5;
    width: 3.802%;
    right: 47.5%;
    z-index: 8
}

    .logoPlay img {
        width: 100%
    }

    .logoPlay:hover {
        cursor: pointer
    }

.menu {
    position: absolute;
    z-index: 5;
    right: 11.30208%;
    width: 18.4375%;
}

.blogItem {
    position: absolute;
    z-index: 5;
    margin: 0 11%;
}

.blogItem img{
    width:104.7%
}

.items {
    padding: 0% 9% 6%;
    background: rgb(43,42,41);
    background: linear-gradient(90deg, rgb(43, 42, 41) 10%,rgb(28, 27, 26) 100%);
    border-bottom-left-radius: 80px
}


.BlogItem {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
    padding: 0 33px;
    text-align: right;
    margin-top: 35px
}



    .BlogItem h3 {
        font-family: "iranyekanwebregular";
        color: #f7b400;
        margin-top: 10px;
        font-size: 28px;
        text-align: justify;
        direction: rtl
    }

    .BlogItem p {
        font-family: 'B Nazanin';
        color: white;
        font-size: 18px;
        text-align: justify;
        direction: rtl;
        transition: all 0.3s ease-in-out 0s;
        margin-bottom: 0;
        line-height: 24px
    }

.BlogItem img{
    width:100%
}
.BlogImageStyle {
    text-align: center;
    position:relative
}

    .BlogImageStyle img {
        border-radius: 0 40px;
        width: 100%
    }

.logoPlayBlog {
    width: 16%;
    left: 42%;
    top: 35%;
    position: absolute;
    filter: drop-shadow(0 0 10px black)
}

.logoPlayBlog img {
    width: 100%;
    border-radius:0 !important
}

.BlogContent {
    transition: all 0.3s ease-in-out 0s;
    padding-bottom: 5%
}

.HoverStyle {
    border-radius: 0 40px;
    padding: 5%;
    transition: all 0.3s ease-in-out 0s;
    position: relative;
    top: 0
}


    .HoverStyle:hover {
        cursor: pointer;
        background-color: #31302e;
        border-radius: 0 40px;
        top: -10px;
        box-shadow: 0 0px 15px #131313
    }

.continueLink {
    text-align: left;
    font-family: iranyekanwebregular;
    color: #e6b032;
    padding-left: 2%;
    font-size: 16px;
    font-weight: 600;
    display: none
}

.pagination i{
    line-height: 30px;
    font-size: 11px
}

.pagination a {
    display: inline-block;
    width: 30px;
    height:30px
}

a[rel="prev"]{
    transform:rotate(180deg)
}

.padination-section {
    margin-top: 4.5%
}

    .padination-section .active {
        color: #f7b400
    }

.pagination li {
    width: 30px;
    height: 30px;
    color:white;
    background-color:#232323;
    border-radius:100%;
    text-align:center;
    line-height:30px;
    margin:0 3px;
    font-family:iranyekanwebbold
}

.absoluteElement{
    position:absolute;
    width:72%;
    right:-13%;
}

.social{
    padding-left:5%
}

.absoluteElement img {
    width: 100%
}

.rights{
    padding:0;
    text-align:center;
    width:100%;
    z-index:10
}

.footer{
    left:23.95%
}

@media only screen and (max-width:1700px){
    .BlogItem{
        padding:0 20px
    }

    .items {
        padding: 0% 7% 6%
    }
}

@media only screen and (max-width:1650px) {
    .menu {
        right: 8.302%;
        width: 20.438%
    }

    .BlogItem h3 {
        font-size: 25px;
        margin-top: 9px
    }

    .BlogItem p {
        font-size: 15px;
        line-height: 22px
    }

    .BlogItem {
        margin-top: 15px
    }
}

@media only screen and (max-width:1500px) {
    .BlogItem {
        padding: 0 10px
    }

    .menu-item p {
        font-size: 23px;
        line-height: 16px
    }

    .menu {
        right: 5.302%;
        width: 23.438%
    }

    .blogHeader h1 {
        font-size: 28px
    }

    .BlogItem h3 {
        font-size: 23px;
        margin-top: 8px
    }

}

@media only screen and (max-width:1350px) {
    .BlogItem {
        padding: 0
    }

    .menu-item p {
        font-size: 22px;
        line-height: 13px
    }

    .menu {
        right: 4.302%;
        width: 25.438%
    }

    .blogHeader h1 {
        font-size: 26px
    }

    .TopVideo h2 {
        font-size: 35px
    }

    .TopVideo p {
        font-size: 19px
    }



    .footer h4 {
        font-size: 21px;
    }

    .footer h5 {
        font-size: 18px;
    }

    .social img {
        width: 25px
    }

    .footer h4{
        font-size:18px
    }

    .footer p{
        margin-bottom:7px
    }

    .social{
        padding-left:7%
    }

    .footer{
        width:18%
    }
}

@media only screen and (max-width:1200px) {
    .BlogItem {
        margin-top: 45px;
        flex: 0 0 50%;
        max-width:50%
    }
    .menu-item p {
        font-size: 20px;
    }

    .blogHeader h1 {
        font-size: 23px;
        line-height: 18px
    }




    .BlogItem h3 {
        font-size: 22px
    }

    .items{
        margin-top:-6%
    }

}

@media only screen and (max-width:1150px) {

    .BlogItem p {
        line-height: 20px
    }

    .rights p {
        margin-top: 50px
    }

    .BlogItem h3 {
        font-size: 20px;
        line-height: 20px
    }
}

@media only screen and (max-width:1050px) {
    .menu-item p {
        line-height: 12px;
    }

    .menu {
        right: 3.5%;
        width: 26.2%
    }

    .TopVideo h2 {
        font-size: 30px
    }

    .blogHeader h1 {
        font-size: 20px
    }

    .TopVideo p {
        font-size: 16px
    }
}


@media only screen and (max-width:991px) {
    .EngLogo {
        width: 10.091%;
        right: 7.972%
    }

    .TopElementVideo {
        display: block;
        position: absolute;
        z-index: 4;
        right: 0;
        left: 0;
        top: 0;
        width:100%
    }

    .topElementImage{
        display:none
    }

    .blogItem{
        z-index:unset
    }

    .items {
        margin-top: 0;
        border-radius: 0 60px;
        background: none;
        background-color: #201f1e
    }


    .persianLogo {
        width: 7.781%;
        right: 75.08%
    }

    .mobileMenu {
        width: 5.568%;
        right: 0
    }

    .blogHeader {
        width: 21.1362%;
        right: 23.7134%;
    }

        .blogHeader h1 {
            font-size: 35px
        }

    .TopVideo h2 {
        font-size: 36px
    }

    .TopVideo p {
        font-size: 22px
    }

    .TopVideo {
        width: 39.9596%;
        right: 26.841%
    }

    .logoPlay {
        width: 6.6%;
        right: 43.5923%;
    }

    .continueLink a{
        display:block
    }

    .BlogImageStyle img {
        border-radius: 0 30px
    }

    .blogItem {
        width: 84%;
        right: 8%;
        padding: 0;
        z-index: 3;
        margin:0
    }

    .HoverStyle {
        background-color: #262625;
        padding: 6%
    }

    .continueLink {
        display: block;
        text-align: left;
        font-family: iranyekanwebregular;
            color: #e6b032;
            padding-left: 2%;
            font-size: 16px;
            font-weight: 600;
    }


    .BlogItem {
        flex: 0 0 50%;
        max-width: 50%;
        margin-top: 30px;
        padding: 0 1.5%
    }

        .BlogItem h3 {
            margin-top: 20px;
            font-size: 27px;
            line-height: 33px
        }

        .BlogItem p {
            font-size: 18px;
            margin-bottom: 0;
            line-height: 22px;
            margin-top: 20px
        }

    .pagination {
        margin: 8% 0 0
    }

        .pagination li{
            margin:0 6px
        }

        .absoluteElement {
            width: 100%
        }

    .footer {
        width: 30%;
        left: 14.1271%;
        padding-bottom: 50px
    }

    .rights {
        padding-bottom: 50px
    }

    .BlogItemsElement {
        display: block;
        position: absolute;
        left: unset;
        right: 0;
        bottom: -11%
    }


        .BlogItemsElement img {
            width: 100%
        }

    .collapseIcon img {
        width: 100%
    }

    .tabletVersion {
        display: block;
        position: static
    }


    .width-100 {
        margin: 0
    }

    .footer p{
        margin-bottom:2px
    }

    .ContactUs{
        padding-top:30px
    }

    .rights p{
        margin-top:0
    }
}


@media only screen and (max-width:900px) {
    .BlogItem p {
        margin-bottom: 15px
    }
}

@media only screen and (max-width:860px) {
    .BlogItem h3 {
        font-size: 25px
    }
}

@media only screen and (max-width:850px) {
    .BlogItem h3 {
        margin-bottom: 10px;
        margin-top: 10px
    }

    .blogHeader h1 {
        font-size: 30px
    }
}


@media only screen and (max-width:790px) {
    .BlogItem h3 {
        font-size: 25px;
        margin-top: 10px;
        margin-bottom: 0
    }

    .footer {
        left: 10%
    }

    .BlogItem p {
        margin-bottom: 0;
        font-size: 16px
    }

    .BlogItem h3 {
        font-size: 23px
    }
}


@media only screen and (max-width:768px) {
    .blogItems {
        width: 92%;
        right: 4%
    }

    .footer p {
        margin-bottom: 0
    }

    .footer {
        padding-bottom: 20px
    }


}

@media only screen and (max-width:700px) {


    .BlogItem {
        flex: 0 0 100%;
        max-width: 100%
    }

    .items {
        padding: 0% 18% 6%
    }

    .BlogItem h3{
        font-size:27px
    }

    .pagination {
        justify-content: center
    }

    .padination-section {
        margin-bottom: 28%
    }

    .absoluteElement {
        width: 115%;
    }
}

@media only screen and (max-width:675px) {

    .blogHeader h1 {
        font-size: 25px
    }

    .TopVideo h2 {
        font-size: 30px
    }

    .TopVideo p {
        font-size: 18px
    }


}


@media only screen and (max-width:675px) {
    .BlogItem h3 {
        font-size: 22px;
        margin-top: 5px;
        margin-bottom: 0
    }

    .rights p {
        margin-top: 80px
    }



    .footer h4 {
        font-size: 19px
    }

    .footer h5 {
        font-size: 16px
    }

    .padding-top-20 {
        padding-top: 0
    }

    .footer .col-3 {
        margin-right: 7%
    }
}

@media only screen and (max-width:650px) {
    .footer h4 {
        font-size: 17px
    }
}


@media only screen and (max-width:600px) {

    .blogHeader h1 {
        font-size: 23px;
        line-height: 14px
    }

    .TopVideo h2 {
        font-size: 27px;
        margin-top: 10px
    }

    .TopVideo p {
        font-size: 16px
    }

    .BlogItem h3 {
        font-size: 20px
    }
}

@media only screen and (max-width:576px) {
    .persianLogo {
        width: 8.68%;
        right: 82.292%
    }

    .mobileMenu {
        width: 8.681%;
        right: 0
    }

    .EngLogo {
        display: none
    }

    .blogHeader h1 {
        font-size: 25px
    }

    .blogHeader {
        right: 20.83%;
        right: 20.83%
    }


    .TopVideo {
        width: 50.3472%;
        right: 26.42%
    }

    .logoPlay {
        width: 7.64%;
        right: 47.222%;
    }


    .TopVideo h2 {
        font-size: 25px
    }

    .blogItem {
        width: 86%;
        right: 7%
    }

    .BlogItem {
        flex: 0 0 80%;
        max-width: 80%;
        margin: 20px auto
    }

    .items{
        padding:0 6% 6%
    }

    .padination-section{
        margin-bottom:22%
    }

    .width-100 {
        width: 60%;
        margin: 0 auto
    }

    .bullet {
        margin: 0 9%
    }

    .BlogItemsElement {
        bottom: -5%;
    }

    .footer{
        width:190px !important;
        margin:80px 0 50px
    }

    .rights p{
        margin-top:40px
    }
}

@media only screen and (max-width:500px) {
    .blogHeader h1 {
        font-size: 21px;
        margin-top: 3px;
    }
}


@media only screen and (max-width:460px) {
    .blogItems {
        width: 94%;
        right: 3%
    }

    .BlogItem {
        flex: 0 0 94%;
        max-width: 94%;
        margin: 20px auto;
        padding: 0
    }



        .BlogItem p {
            margin-bottom: 10px;
            line-height: 22px;
            margin-top: 20px
        }

        .BlogItem h3 {
            margin-top: 10px;
            font-size: 28px
        }
}


@media only screen and (max-width:430px) {
    .width-100 {
        width: 70%
    }
}

@media only screen and (max-width:500px) {
    .blogHeader h1 {
        font-size: 17px;
        margin-top: 1px;
    }

    .TopVideo h2 {
        font-size: 23px
    }
}