@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
}

body {
    padding: 0;
    overflow-x: hidden;
    background-color: #ededed;
    padding-right:0 !important
}

.header {
    background-color: #f7b400;
    width: 100%;
    position: relative;
    z-index: 20
}

    .header img {
        width: 100%;
        border-bottom-left-radius: 42px;
        filter: drop-shadow(0 0 5px gray)
    }


.route {
    display:flex;
    background-color: #f7b400;
    top: 0;
    right: 0;
    left: 15px;
    background-color: #f7b400;
    border-bottom-left-radius: 42px;
    z-index: 15;
    filter: drop-shadow(0 0 5px gray);
    direction:rtl
}


.firstNode {
    right: 0;
    width: 17.44792%;
    background-color: #ffeab1;
    bottom: 0;
    border-bottom-left-radius: 42px;
    z-index: 18;
    display: flex;
    line-height: 50px;
    padding-right: 8.4%
}

    .firstNode p {
        font-family: iranyekanwebbold;
        font-size: 18px;
        color: #343434;
        margin-bottom:0
    }

    .firstNode i {
        color: #343434;
        line-height: 50px;
        margin-right:7%
    }


.secondNode {
    position: absolute;
    top: 0;
    right: 0;
    width: 31.6145%;
    background-color: #ffd259;
    bottom: 0;
    border-bottom-left-radius: 42px;
    z-index: 17;
    line-height: 50px;
    display: flex;
    padding-right:20%
}

    .secondNode p {
        font-family: iranyekanwebbold;
        font-size: 22px;
        font-weight: 600;
        color: #343434;
        margin-bottom:0
    }

    .secondNode i {
        color: #343434;
        line-height: 50px;
        margin-right:3%
    }

.thirdNode {
    position: absolute;
    top: 0;
    right: 32.8125%;
    bottom: 0;
    z-index: 16;
    left: 0;
    text-align: right;
    line-height: 50px;
}

    .thirdNode p {
        font-family: iranyekanwebregular;
        font-size: 14px;
        color: #343434;
    }

.main-container {
    width: 1350px;
    margin: 0 auto;
    border-top: 1px solid #242322;
    margin-top: 2%
}


.mainBox {
    width: 100%;
    border-top: 10px solid #f7b400;
    border-bottom: 10px solid #f7b400;
    border-radius: 0 70px;
    margin-top: 30px;
    background-color: white;
    box-shadow: 0 0 10px gray;
    direction: rtl;
    padding: 1.5%;
    text-align: right
}


.image img {
    width: 100%;
    border-radius: 0 70px
}


.ContextHeader {
    padding: 5.2% 4.5% 0 3.5%;
}

.border-bottom {
    height: 100%;
    border-bottom: 1px solid #242322 !important;
}

.PositionFixed {
    padding-top: 0 !important;
    top: 50px;
    position: fixed
}

.stichyBotton {
    position: absolute;
    bottom: 0
}

.ContextHeader h1 {
    font-family: shin;
    color: #717171;
    margin-bottom: 8%;
    letter-spacing: 1px
}



.ContextHeader span {
    font-family: 'B Nazanin Bold';
}


.ContextHeader p {
    font-family: 'B Nazanin';
    font-size: 23px;
    text-align: justify;
}

.mainArticleCol {
    flex: 0 0 67.5%;
    max-width: 67.5%;
    padding: 4.5% 4.5% 0 2%
}

    .mainArticleCol p {
        font-family: 'B Nazanin';
        text-align: justify;
        font-size: 22px;
        line-height: 30px
    }


.sidebar {
    flex: 0 0 32.5%;
    max-width: 32.5%;
    padding: 2% 3% 0 3%;
    text-align: right
}

.sidebarHeader {
    background-color: #363636;
    border-top-right-radius: 30px
}

    .sidebarHeader h3 {
        font-family: shin;
        color: white;
        line-height: 63px;
        margin-right: 11%;
        font-size: 35px
    }

.Sidebarimage {
    direction: ltr;
    text-align: left;
    margin: 6% 0 2%
}

    .Sidebarimage img {
        width: 45%;
        border-radius: 0 30px;
        transition: 0.3s all ease-in-out 0s
    }

        .Sidebarimage img:hover {
            cursor: pointer;
            box-shadow: 0 0 8px #0000008a
        }

.sidebarItem h4 {
    font-family: iranyekanwebbold;
    text-align: justify;
    font-size: 16px;
    line-height: 30px;
    color: #2a2a2a;
    border-bottom: 1px solid #242322;
    padding-bottom: 5%;
    transition: 0.3s all ease-in-out 0s
}

    .sidebarItem h4:hover {
        color: #ffc800;
        cursor: pointer
    }



.sidebarItem:last-child h4 {
    border: none
}

.innerPadding {
    padding: 0 6%
}

.box-shadow {
    box-shadow: 0 0 10px #aeaeae;
    border-radius: 0 30px
}

.text-align-left img:hover {
    cursor: pointer
}


.Contentfooter {
    border-top: 1px solid black;
    padding: 3% 0 0;
    margin-top: 7%
}

    .Contentfooter p {
        font-family: iranyekanwebregular;
        font-size: 16px
    }


.elementBlog {
    position: absolute;
    width: 48.177%;
    right: 0;
    padding-bottom: 5%
}

    .elementBlog img {
        width: 100%
    }



.footerSection {
   
    padding-top: 1.5%;
}

.footerContainer {
    width: 1350px;
    margin: 0 auto;
}

.footer {
    position: static;
    margin-top: 5%;
    margin-left:17.37%
}

.rights{
    position:static;
    padding:0;
    text-align:center;
    margin-top:10%
}

.text-align-right {
    direction: ltr
}

.col-3 {
    padding: 0 3.5%
}

.Contentfooter img {
    width: 100%
}

.Contentfooter p {
    margin-bottom: 0;
    line-height: 35px
}

.social {
    margin-left: -2%
}

.text-align-center {
    text-align: center
}

.text-align-left {
    text-align: left;
    direction: ltr;
    display: flex
}

    .text-align-left img {
        max-width: 35px;
        margin-right: 5%
    }
.phoneShow{
    display:none
}

.PhoneRoute{
    display:none
}

.phoneLastPost{
    display:none
}

.phoneSlider{
    display:none
}


.modalBg {
    background-image: url('../../Images/Blog/SingleBlog/share.png');
    background-size: cover;
    height: 100%;
    filter: drop-shadow(0 0 5px #0000003d);
    border-radius: 25px;
    padding: 13% 7%
}

.modal-content {
    
    border: none !important;
    border-radius: 25px;
    padding:5%
}

    .modal-content h4{
        text-align:right;
        direction:rtl;
        font-family:iranyekanwebbold;
        font-size:16px;
        line-height:27px
    }

    .modal-content p {
        font-family: Ebrima;
        background-color: #d9d9d7;
        padding: 5px;
        text-align: center;
        box-shadow: inset 0 0 5px #00000040
    }



        @media only screen and (max-width:1600px) {
            .firstNode p{
        line-height:45px;
        font-size:17px
    }

    .firstNode i{
        line-height:45px
    }

    .secondNode p {
        line-height: 45px;
        font-size: 21px
    }

    .secondNode i{
        line-height:45px;
        margin-right:6%
    }

    .thirdNode p{
        line-height:45px
    }
}


@media only screen and (max-width:1500px) {
    .main-container {
        width: 1150px
    }

    .firstNode{
        padding-right:7%
    }

    .secondNode {
        padding-right: 19%
    }

    .ContextHeader h1 {
        font-size: 32px
    }

    .ContextHeader p {
        font-size: 21px
    }

    .mainArticleCol p {
        font-size: 20px
    }

    .Contentfooter p {
        font-size: 14px;
        line-height: 34px
    }

    .sidebarHeader h3 {
        font-size: 32px
    }

    .sidebarItem h4 {
        font-size: 14px;
        padding-bottom: 1%
    }

    .sidebar {
        padding: 3% 1% 0 2%
    }

    .Sidebarimage {
        margin: 5% 0 1%
    }

        .Sidebarimage img {
            width: 50%
        }

    .footer {
        margin-top: 2%;
        left: 21.25%
    }
}


@media only screen and (max-width:1350px){
    .firstNode p {
        line-height: 45px;
        font-size: 16px
    }

    .firstNode i {
        line-height: 45px
    }

    .secondNode p {
        line-height: 45px;
        font-size: 19px
    }

    .secondNode i {
        line-height: 45px;
        margin-right: 6%
    }

    .thirdNode p {
        font-size:14px;
        line-height: 45px
    }
}

@media only screen and (max-width:1250px) {
    .firstNode{
        width:18.4%
    }

    

    .secondNode {
        padding-right: 20%;
        width: 33.615%
    }

    .thirdNode{
        right:34.8%
    }
    .ContextHeader {
        padding: 3.2% 4.5% 0 2.5%
    }

    .main-container {
        width: 900px;
        margin-top: 3%
    }

    .ContextHeader h1 {
        font-size: 30px;
        margin-bottom: 1%
    }

    .ContextHeader p {
        font-size: 19px
    }

    .mainArticleCol p {
        font-size: 19px
    }

    .mainArticleCol {
        flex: 0 0 63.5%;
        max-width: 63.5%
    }

    .sidebar {
        flex: 0 0 36.5%;
        max-width: 36.5%
    }

    .Contentfooter p {
        font-size: 11px;
        line-height: 28px;
    }

    .text-align-left img {
        max-width: 28px
    }

    .ContactUs {
        padding-top: 30px
    }

    .footer {
        width: 15%
    }
        .footer p {
            margin-bottom: 0
        }

    .rights{
        margin-top:7%
    }

    .ContactUs{
        padding-top:20px
    }
}

@media only screen and (max-width:1150px){
    .firstNode{
        width:19.4%
    }
}

@media only screen and (max-width:991px){
    .phoneHide{
        display:none
    }

    .header {
        background-color: #f1c654;

    }

    .mainBox .col-md-6 {
        flex: 0 0 100%;
        max-width:100%
    }

    .PhoneRoute {
        display: block;
        background-color: #f7b400;
        border-bottom-left-radius: 49px;
        text-align: right;
        direction: rtl;
        box-shadow: 0 0 5px gray
    }

    .firstRow {
        display: flex;
        background-color: #f1c654;
        border-bottom-left-radius: 49px;
        padding: 0 6.5%;
        filter: drop-shadow(0 0 5px gray)
    }


    .firstCol {
        flex: 0 0 20.18163%;
        display: flex;
        line-height: 80px
    }
    .firstCol i{
        line-height:80px
    }

        .firstCol a{
            margin-left:7%
        }

        .secondCol {
            display: flex;
            flex: 0 0 26%;
            max-width: 26%
        }

        .secondCol i {
            line-height: 80px
        }
            .secondCol a{
                margin-left:7%
            }

            .yekan {
                font-family: iranyekanwebregular;
                margin-bottom: 0;
                line-height: 80px;
                font-size: 18px
            }

    .yekanBold {
        font-family: iranyekanwebbold;
        margin-bottom: 0;
        line-height:80px;
        font-size:20px
    }

    .secondRow {
    }

    .secondRow p {
        font-family: iranyekanwebregular;
        font-size: 16px;
        line-height: 80px;
        padding: 0 6.5%;
        color: #444444
    }

    .main-container{
        border-top:none;
        width:92.8%;
    }

    .mainBox {
        padding: 0 4.5%
    }
    .ContextHeader {
        padding: 5.7% 4.5% 5%
    }

        .ContextHeader h1{
            font-size:37px;
            margin-bottom:3%
        }
    .ContextHeader p{
        font-size:23px;
        margin-bottom:5%
    }

    .mainArticleCol {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 4.5% 4.5% 0
    }
    .image img{
        border-radius:0 50px
    }

    .mainArticleCol p{
        font-size:21px
    }

    .Contentfooter {
        padding: 3% 0
    }

    .Contentfooter .row{
        display:block
    }

    .text-align-left{
        direction:rtl;
        text-align:right
    }

    .Contentfooter p {
        font-size: 16px;
        line-height:30px
    }

    .phoneShow{
        display:flex
    }

    .text-align-left img{
        max-width:30px;
        padding:0.5%;
        margin-right:15px
    }



        .phoneLastPost {
            display: block;
            text-align: right;
            width: 92.8%;
            margin: 0 auto;
            margin-top: 45px
        }

    .box-shadow{
        background-color:white
    }

    .innerPadding {
        padding: 1% 15px 6%
    }


    .sidebarItem {
        flex: 0 0 50%;
        max-width: 50%;
        padding:0 4.3%
    }

        .sidebarItem h4{
            font-size:16px;
            direction:rtl;
            padding:3% 0
        }
        .sidebarItem:last-child h4 {
            border-bottom: 1px solid #242322
        }
    .sidebarHeader h3{
        margin-right:4.3%;
        font-size:35px
    }

    .footer{
        width:13%;
        margin-top:6%;
        margin-left:7.37%
    }

    .elementBlog{
        width:100%;
        margin-top:3%;
        text-align:right
    }

    .elementBlog img {
        width: 64.5%;
    }


    .rights p{
        font-size:18px;
    }

    .footer h4{
        font-size:115%
    }
}

@media only screen and (max-width:790px) {
    .rights{
        top:113%
    }

    .footer {
        margin-top: 4%;
        margin-left: 4%
    }
}

@media only screen and (max-width:750px) {
    .rights {
        top: 120%
    }

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

@media only screen and (max-width:700px){
    .firstCol{
        flex:0 0 25%
    }
    .secondCol{
        flex:0 0 30%;
        max-width:30%
    }
}

@media only screen and (max-width:670px) {
    .rights {
        top: 130%
    }
    .footer {
        margin-top: 3%;
        margin-left: 3%
    }
}

@media only screen and (max-width:600px) {
    .rights {
        top: 145%
    }


}

@media only screen and (max-width:576px) {
    .firstCol{
        flex:0 0 150px;
        padding:15px 0
    }

    .sidebarItem h4{
        text-align:center
    }



    .tabeletshow {
        display: none
    }

    .secondCol {
        flex: 0 0 175px;
        max-width: 175px;
        padding:15px 0
    }

    .ContextHeader h1{
        font-size:32px
    }

    .ContextHeader {
        padding: 4.7% 4.5% 5%
    }

    .secondRow p {
        font-size: 16px;
        padding: 15px 6.5%;
        line-height: 30px
    }

    .ContextHeader p{
        font-size:21px
    }

    .mainArticleCol p{
        font-size:21px
    }

    .Contentfooter p{
        font-size:15px
    }

    .firstRow p, .firstRow i {
        line-height: 30px
    }

    .sidebarItem {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0
    }
    .owl-carousel{
        width:74.7%;
        margin:0 auto
    }

    .mainBox {
        border-radius: 0 40px
    }

    .sidebarItem h4{
        border:none !important
    }

    .phoneSlider{
        display:block
    }

    .owl-carousel i {
        font-size: 40px
    }

    .owl-next, .owl-prev{
        position:absolute;
    }

    .owl-next{
        right:-14%
    }

    .owl-prev{
        left:-14%
    }

    .innerPadding {
        padding: 1% 15px 3%
    }

    .sidebarItem h4{
        font-size:17px;
        padding:7% 0 0
    }

    .elementBlog img{
        width:90%
    }

    

    .rights{
        top:200%
    }

    .sidebarHeader h3{
        margin-right:9.3%
    }

    .box-shadow{
        border-radius:0 25px
    }

    .sidebarHeader{
        border-top-right-radius:25px
    }

    .Sidebarimage img {
        border-radius: 0 25px
    }

    .image img {
        border-radius: 0 40px
    }

    .elementBlog{
        margin-top:5%
    }

    .footerSection{
        width:50%;
        margin:0 auto
    }
    .footer {
        margin-left: 0;
        width: 14% !important
    }

    .rights{
        width:90%;
        margin:9% auto 0
    }
}