body {
    direction: rtl;

}

.wrapper {
    overflow: hidden
}

a {
    text-decoration: none !important;
}

li {
    list-style: none !important;
}

.top-header {
    align-items: center;
    display: flex;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);
    min-height: 64px;
    max-height: 64px;
}

.logo {
    display: block;
    height: auto;
    margin-right: 27%;
}

.nav-icon {
    display: none;
}

.nav-bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0;
    margin-right: 19%;
}

.nav-bar li {
    display: inline-block;
    font-family: IRANSansFNormal;
    font-size: 12px;
    padding: 0 1.5%;

}

.nav-item {
    display: block;
    color: rgba(0, 0, 0, 0.56);
    text-decoration: none;

}

.nav-item:hover {
    color: rgba(0, 0, 0, 0.56);
}

.mobile-menu {
    display: none;
    position: fixed;
    width: 50%;
    height: 100%;
    background: #FFFFFF;
    box-shadow: 5px 5px 20px #00000029;
    right: 0;
    top: 0;
    z-index: 10;

}

.hide {
    right: -400px;
    transition: .6s;
}

.show {
    transition: .6s;
    right: 0px;
}

.mobile-logo {
    width: 13%;
    margin: 0.9rem 7rem 0.9rem auto;
}

.close {
    position: absolute;
    right: 1.9rem;
    margin: auto;
    top: 1.8rem;
    width: 2%;

}

.mobile-nav {
    width: 100%;
    padding: 0;
    margin: 0;
}

.mobile-nav li {
    display: block;
    border-top: 1px solid #0000000d;
    opacity: 1;
    padding: 5px 0;
    width: 100%;

}

.mobile-item {
    display: block;
    font-size: 12px;
    font-family: IRANSansFBold;
    padding: 10px 20px;
    border-radius: 10px;
    color: rgba(0, 0, 0, 0.56);

}

.mobile-nav li:last-child {
    border-bottom: 1px solid #0000000d;
}

.mobile-item:hover {
    color: rgba(0, 0, 0, 0.56);
}

.active-nav {
    display: flex;
    background-color: #B40505;
    border-radius: 4px;
    color: #fff;
    min-height: 40px;
    min-width: 133px;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 1.6rem 0.3rem 0.9rem;
    background-image: url(../images/nav-icon.png);
    background-repeat: no-repeat;
    background-position: right;
    background-position-x: 105px;
    background-size: 9px;


}

.hero-btn {
    font-family: IRANSansFNormal;
    font-size: 16px;
    display: flex;
    background-color: #B40505;
    border-radius: 4px;
    color: #fff;
    width: 148px;
    min-height: 40px;
    min-width: 148px;
    align-items: center;
    justify-content: center;
    background-image: url(../images/nav-icon.png);
    background-repeat: no-repeat;
    background-position: right;
    background-position-x: 128px;
    background-size: 9px;
    margin: 10% auto 0;
}
.hero-btn:hover {
    color: #fff;
}
.active-nav:hover {
    color: #fff;
}

.content {
    width: 1148px;
    min-width: 1148px;
    margin: 0 auto;
}

.hero {
    margin-top: 3%;
    margin-bottom: 7%;
}

.hero-img {
    width: 100%;

    margin-right: 3%;
}

.hero-txt {
    width: 100%;
    margin-left: 5%;
}

.video-sec {
    height: auto;
    background-color: #B40505;
    padding: 3% 0;
    margin-bottom: 4%;
}

.video-box {
    position: relative;
    margin: 0 auto;
    max-width: 1149px;
    height: auto;
    max-height: 646px;
    border-radius: 20px;
}

.cover {
    display: block;
    width: 100%;
    margin: 0 auto;
    border-radius: 20px;

}

.play-btn {
    position: absolute;
    display: block;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.play-btn:hover{
    cursor: pointer;
}
.tree-sec-title {
    font-family: IRANSansFNormal;
    font-weight: 700;
    font-size: 32px;
    line-height: 48px;
    color: #B40505;
}

.tree-sec-text {
    font-family: IRANSansFNormal;
    font-weight: 500;
    font-size: 16px;
    line-height: 32px;
    margin: 2% 0;
    color: rgba(0, 0, 0, 0.87);
}

.bg {
    display: block;
    width: 372px;
    height: 224px;
}

.bg-text1 {
    background: url(../images/Mosalasi1.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}

.bg-text2 {
    background: url(../images/Mosalasi2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}

.bg-text3 {
    background: url(../images/Mosalasi3.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}

.caption {
    font-family: IRANSansFNormal;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.87);
}

.subtitle {
    font-family: IRANSansFNormal300;
    font-weight: bold;
    font-size: 16px;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.87);
    margin-top: 1%;
    padding: 0 2.5%;
}
.fore-sec{
    background-color: #FAFAFA;
    width: 100%;
    padding: 5% 0;
    margin-top: 4%;

}
.motion-sec {
    width: 100%;
    margin-top: 4%;
}

.motion-sec-title {
    font-family: IRANSansFNormal;
    font-weight: 700;
    font-size: 32px;
    line-height: 48px;
    color: #B40505;
    margin-bottom: 3%;
}

.motion-sec-text {
    font-family: IRANSansFNormal;
    text-align: right;
    font-weight: 400;
    font-size: 18px;
    line-height: 36px;
    color: rgba(0, 0, 0, 0.87);
    margin-right: 10%;
}

.motion-box {
    margin-right: 10%;
}

.icon {
    display: block;
    margin: 0 auto;
    width: 80px;
    height: 80px;
}

.bg-icon1 {
    background: url(../images/Mosalasi-icon1.jpg);
    background-repeat: no-repeat;
    background-size: contain;

}

.bg-icon2 {
    background: url(../images/Mosalasi-icon2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

}

.bg-icon3 {
    background: url(../images/Mosalasi-icon3.jpg);
    background-repeat: no-repeat;
    background-size: contain;

}

.comment {
    display: block;
    font-family: IRANSansFNormal;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: rgba(0, 0, 0, 0.87);
    margin-top: 6%;
}

.red-box {
    width: 100%;
    background: #B40505;
    border-radius: 20px;
    padding: 3rem 5rem;
    margin-top: 10%;
    margin-bottom: 10%;

}

.text-icon {
    margin-right: 15%;
}

.paragraph {
    font-family: IRANSansFNormal;
    font-weight: 400;
    font-size: 16px;
    line-height: 32px;
    color: rgba(255, 255, 255, 0.98);
}

.footer-content {
    width: 1149px;
    margin: 0 auto;
    padding: 1rem 0;
}

.footer-logo {
    display: inline-block;
    width: 32px;
    height: auto;
    align-items: center;
}

.footer-nav {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: right;
    padding: 0;
    margin-right: .5rem;
    margin-bottom: 0 !important;

}

.footer-nav li {
    display: inline-block;
    border-left: 1px solid #0000001F;
}

.footer-item {
    display: block;
    font-family: IRANSansFNormal;
    font-size: 10px;
    line-height: 20px;
    font-weight: 400;
    color: #00000052;
    padding: 0 .5rem;

}

.footer-nav li:last-child {
    border-left: none;

}

.footer-item:hover {
    color: #00000052;
}

.social-link {
    display: inline-flex;
    margin: 0 .4rem;
    text-decoration: none;
}

.social-link img {
    display: block;
    width: 16px;
    height: auto;
    margin: .5rem 0;
}

.twitter {
    position: relative;
    bottom: 1px;
}

/* Responsive design */
@media screen and (max-width: 1440px) {

    .logo {
        margin-right: 17%;
    }

    .nav-bar {
        margin-right: 8%;
    }

    .content {
        margin: 0 auto;
        max-width: 80%;
        min-width: 80%;
    }
    .footer-content {
        max-width: 80%;
        min-width: 80%;
    }
    .video-box {
        margin: 0 auto;
        max-width: 80%;
        min-width: 80%;

    }
}
@media screen and (max-width: 1170px) {

    .nav-bar {
        margin-right: 0;
    }

    .hero-img {
        max-width: 490px;
        max-height: 490px;
    }

    .content {
        max-width: 90%;
        min-width: 90%;
    }

    .video-box {
        max-width: 100%;
        min-width: 100%;

    }

    .bg {
        width: 100%;
        height: 185px;
    }

    .caption {
        font-size: 12px;
    }

    .motion-sec-text {
        margin-right: 0;
    }

    .footer-content {
        max-width: 90%;
        min-width: 90%;
    }

    .social {
        margin-left: 1%;
    }
}

@media screen and (max-width: 1024px) {
    .red-box {
        padding: 3rem 2rem;
    }

    .logo {
        margin-right: 7%;
    }

    .nav-bar {
        padding: 0;
    }
}

@media screen and (max-width: 992px) {
    .video-box {
        max-width: 95%;
        min-width: 95%;
    }

    .play-btn {
        width: 12%;
    }

    .text-icon {
        margin-right: 9%;
    }
}

@media screen and (max-width: 991px) {
    .logo {
        width: 10%;
    }

    .hero-txt {
        margin-right: 5%;
    }

    .video-box {
        max-width: 92%;
        min-width: 92%;
    }

    .content {
        max-width: 92%;
        min-width: 92%;
    }

    .motion-sec-text {
        font-size: 14px;
    }

    .motion-box {
        margin-right: 0;
    }

    .comment {
        font-size: 14px;
    }

    .icon {
        width: 70px;
        height: 70px;
    }

    .text-icon {
        width: 95%;
    }

    .footer-content {
        max-width: 92%;
        min-width: 92%;
    }
}

@media screen and (max-width: 834px) {
    .paragraph {
        margin-right: 5%;
        font-size: 14px;
    }

    .nav-bar li {

        padding: 0 1%;
    }
}

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

    .nav-bar li {
        font-size: 10px;
    }
}

@media screen and (max-width: 767px) {
    .active-nav {
        min-width: 100px;
        background-position-x: 82px;
    }

    .logo {
        width: 27%;
    }

    .video-sec {
        padding: 5% 0;
    }

    .nav-bar {
        justify-content: center;
        margin-right: 10%;
    }

    .hero-btn {
        width: 138px;
        min-width: 138px;
        background-position-x: 120px;
    }

    .motion-box {
        width: 90%;
        margin: 0 auto;
    }

    .motion-box video {
        width: 100%;
    }

    .text-icon {
        width: auto;
        margin: 0 auto;
    }

    .paragraph {
        margin: 3% auto 0;
        text-align: center !important;
    }
}

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

    .text-icon {
        margin: 0 auto;
    }

    .paragraph {
        text-align: center !important;
        margin: 5% auto 0;

    }

    .bg {
        height: 133px;
    }
}

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

    .nav-bar {
        margin-right: 0;
    }

    .logo {
        width: 30%;
    }

    .tree-sec-title {
        font-size: 28px;
    }

    .motion-sec-title {
        font-size: 28px;
    }

    .footer-nav {
        margin-right: 0;
    }
}

@media screen and (max-width: 546px) {
    .logo {
        width: 40px;
        margin: 0 37%;
    }

    .nav-bar {
        display: none;
    }

    .nav-icon {
        display: inline-block;
        width: 20px;
        margin-right: 1.5rem;
    }

    .mobile-menu {
        display: block;
    }


    .hero-txt {
        width: 95%;
        margin: 7% auto;
    }

    .hero-img {
        margin: .5% auto;
    }

    .order2 {
        order: 2;
    }

    .order1 {
        order: 1;
    }

    .order5 {
        order: 5;
    }

    .tree-sec-text {
        text-align: center !important;
    }

    .caption {
        padding: 0px 16%;
    }

    .icon {
        width: 80px;
        height: 80px;
    }

    .comment {
        margin: 3% auto 3%;
        padding: 0 20%;
    }

    .paragraph {
        font-size: 16px;
    }

    .bg {
        width: 372px;
        height: 224px;
        margin: 0 auto;
    }

    .footer-nav {
        justify-content: center;
        margin: 1.5rem 0;
    }

    .social {
        margin-top: 1.5rem;
    }

    .video-sec {
        padding: 7% 0;
        margin-bottom: 7%;
    }

    .motion-sec {
        padding: 7% 0;
        margin-bottom: 7%;
    }
}

@media screen and (max-width: 490px) {
    .mobile-logo {
        margin: 0.4rem 7rem 0.4rem auto;
    }

    .close {
        top: 4.5%;
        width: 2.4%;
    }

    .hero-txt {
        margin: 5% auto;
    }

    .hero-img {
        margin: .5% auto;
        width: 95%;
    }

    .tree-sec-title {
        font-size: 20px;
        line-height: 30px;
        margin-top: 5%;

    }

    .tree-sec-text {
        font-size: 14px;
        line-height: 28px;
    }

    .caption {
        font-size: 14px;
        line-height: 28px;
    }

    .subtitle {
        font-size: 16px;
        line-height: 32px;
    }

    .motion-sec-title {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 8%;
        margin-top: 5%;
    }

    .red-box {
        padding: 3rem 1rem;
    }
}

@media screen and (max-width: 428px) {
    .logo {
        width: 40px;
        margin: 0 34%;
    }

    .mobile-logo {
        margin: 0.4rem 6rem 0.4rem auto;
    }

    .caption {
        padding: 0px 5%;
    }

    .motion-sec {
        padding: 9% 0;
        margin-bottom: 13%;
    }

    .video-sec {
        padding: 8% 0;
    }
}

@media screen and (max-width:414px) {
    .close {
        top: 4%;
        width: 2.4%;
    }

}

@media screen and (max-width:390px) {
    .bg {
        width: 355px;
        height: 215px;
        margin: 0 auto;
    }

}

@media screen and (max-width: 375px) {
    .bg {
        width: 350px;
        height: 209px;
        margin: 0 auto;
    }

    .mobile-logo {
        margin: 0.5rem 5.7rem 0.5rem auto;
    }

}

@media screen and (max-width: 360px) {
    .mobile-logo {
        margin: 0.5rem 5.7rem 0.5rem auto;
    }

    .bg {
        width: 330px;
        height: 196px;
        margin: 0 auto;
    }

    .comment {
        padding: 0 17%;
    }

    .red-box {
        padding: 3rem 1rem;
    }
}

@media screen and (max-width: 340px) {
    .logo {
        margin: 0 31%;
    }

    .mobile-logo {
        margin: 0.6rem 5rem 0.6rem auto;
    }

    .bg {
        width: 320px;
        height: 170px;
        margin: 0 auto;
    }

    .comment {
        padding: 0 14%;
    }
}

@media screen and (max-width: 320px) {
    .logo {
        margin: 0 30%;
    }

    .bg {
        width: 295px;
        margin: 0 auto;
    }

    .comment {
        padding: 0 12%;
    }
}

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

    .mobile-logo {
        margin: 0.6rem 5rem 0.6rem auto;
    }

    .mobile-menu {
        width: 65%;
    }

    .logo {
        margin: 0 27%;
    }

    .bg {
        width: 250px;
        margin: 0 auto;
    }

    .comment {
        padding: 0 8%;
    }
}