@import url(fontiran.css); /* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */

body{
    background-image: url("../images/1280px-Negarestan_Garden.jpg");
    background-position: top center;
    background-size: cover;
    background-attachment: fixed;
    font-family: IRANSans;
}
.list{
    list-style: none;
    margin: 0;
}
.titel{
    color: aliceblue;
    text-align: center;
    margin: 0;
}
.article .titel {

    padding: 0.5em;

    background-color: #00000054;

    font-size: 1.3rem;
}
.titel .article {
    margin:0
}
.titel span{

    padding: 1rem;

    background-color: #0000009c;

    border-radius: 4rem;

    padding: 0.2rem 2rem;
}
.rtl{direction: rtl}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}
*, ::after, ::before {
    box-sizing: inherit;
}

.header{
    height: 54vh;
    text-align: center;
}
.order1{
    order: 1;
}
.order2{
    order: 2;
}
.article{
    -ms-flex-wrap: wrap!important;
    flex-wrap: wrap!important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center!important;
    align-items: center!important;
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    background-color: rgba(0, 0, 0, 0.5);
    color: #FFFF;
    border-radius: 1rem;
    overflow: hidden;
    margin: 1.6rem 0;
    font-size: 1.3rem;
    text-decoration: none;
}

.box{
    -ms-flex-wrap: wrap!important;
    flex-wrap: wrap!important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;

}
.col{
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    padding: 15px;
}
.col-12 {
    flex: 0 0 auto;
    width: 100%;
}
.image{
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
.image img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}
.container {
    margin: auto;
    padding: 15px;
    width: auto;
}
.d-flex {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
}
.flex-row {
    -ms-flex-direction: row!important;
    flex-direction: row!important
}

.flex-column {
    -ms-flex-direction: column!important;
    flex-direction: column!important;
    flex: 1 1 auto;
}

.flex-row-reverse {
    -ms-flex-direction: row-reverse!important;
    flex-direction: row-reverse!important
}

.flex-column-reverse {
    -ms-flex-direction: column-reverse!important;
    flex-direction: column-reverse!important
}

.flex-wrap {
    -ms-flex-wrap: wrap!important;
    flex-wrap: wrap!important
}

.flex-nowrap {
    -ms-flex-wrap: nowrap!important;
    flex-wrap: nowrap!important
}

.flex-wrap-reverse {
    -ms-flex-wrap: wrap-reverse!important;
    flex-wrap: wrap-reverse!important
}

.justify-content-start {
    -ms-flex-pack: start!important;
    justify-content: flex-start!important
}

.justify-content-end {
    -ms-flex-pack: end!important;
    justify-content: flex-end!important
}

.justify-content-center {
    -ms-flex-pack: center!important;
    justify-content: center!important
}

.justify-content-between {
    -ms-flex-pack: justify!important;
    justify-content: space-between!important
}

.justify-content-around {
    -ms-flex-pack: distribute!important;
    justify-content: space-around!important
}

.align-items-start {
    -ms-flex-align: start!important;
    align-items: flex-start!important
}

.align-items-end {
    -ms-flex-align: end!important;
    align-items: flex-end!important
}

.align-items-center {
    -ms-flex-align: center!important;
    align-items: center!important
}

.align-items-baseline {
    -ms-flex-align: baseline!important;
    align-items: baseline!important
}

.align-items-stretch {
    -ms-flex-align: stretch!important;
    align-items: stretch!important
}

.align-content-start {
    -ms-flex-line-pack: start!important;
    align-content: flex-start!important
}

.align-content-end {
    -ms-flex-line-pack: end!important;
    align-content: flex-end!important
}

.align-content-center {
    -ms-flex-line-pack: center!important;
    align-content: center!important
}

.align-content-between {
    -ms-flex-line-pack: justify!important;
    align-content: space-between!important
}

.align-content-around {
    -ms-flex-line-pack: distribute!important;
    align-content: space-around!important
}

.align-content-stretch {
    -ms-flex-line-pack: stretch!important;
    align-content: stretch!important
}

.align-self-auto {
    -ms-flex-item-align: auto!important;
    align-self: auto!important
}

.align-self-start {
    -ms-flex-item-align: start!important;
    align-self: flex-start!important
}

.align-self-end {
    -ms-flex-item-align: end!important;
    align-self: flex-end!important
}

.align-self-center {
    -ms-flex-item-align: center!important;
    align-self: center!important
}

.align-self-baseline {
    -ms-flex-item-align: baseline!important;
    align-self: baseline!important
}

.align-self-stretch {
    -ms-flex-item-align: stretch!important;
    align-self: stretch!important
}
.article h2{
    font-size: 1rem;
    margin: 0 0.2px;
}
.article h5{
    font-size: 1.1rem;
    margin: 0 0.2px;
}
@media (orientation: landscape) {
    body {
        flex-direction: row;
    }
    .image img {
        object-fit: cover;
        width: 12rem;
        height: 100%;
        display: block;
    }
    .text-align-right {
        text-align: right;
    }
    .text-align-left {
        text-align: left;
    }
}

@media (orientation: portrait) {

    .titel span{
        font-size: 4rem;
        padding: 0.4rem 3rem;
    }
    .image img {
        object-fit: cover;
        width: 116px;
        height: 115px;
        display: block;
        object-position: top center;
    }
    .content{

        text-align: center;
    }
}

@media (min-width: 1200px) and (orientation: landscape){
    .container {
        width: 1170px;
    }
    .image img {
        object-fit: cover;
        width: 21rem;
        height: 50%;
        display: block;
    }
    .header {
        height: 54vh;
        text-align: center;
    }
}
.description{

    font-size: 1rem;

    padding: 28px;

    white-space: pre-wrap;
}
@media (min-width: 1200px) {
    .description{

        font-size: 1.5rem;

    }
    .article h2{
        font-size: 2rem;
        margin: 0 0.2px;
    }
    .article h5{
        font-size: 1.3rem;
        margin: 0 0.2px;
    }
    .order-lg-1{
        order: 1;
    }
    .order-lg-2{
        order: 2;
    }
}
@media (min-width: 992px){
    .container {
        width: 970px;
    }
}
.text-center{
    text-align: center;
}
.w-100{
    width: 100%;
}
.ch-logo{
    width:65px
}