.main-about {
    position: relative;
    height: 107vh;
}

.main-about .img-head {
    position: absolute;
    width: 100vw;
    height: 100%;
}

.main-about .social-link {
    position: absolute;
    left: 35px;
    top: 40px;
    display: flex;
}

.main-about .content {
    background-color: var(--background-primary-opacity);    position: absolute;
    text-align: center;
    bottom: 0px;
    right: 0;
    width: 100%;
    color: var(--white);
    direction: rtl;
    z-index: 120;
    padding: 20px;
}

.main-about .content h2 {
    text-align: right;
    font-size: 40px;
}

img {
    object-fit: cover;
}

.body-web {
    margin: 0vh 0 0 0;
    padding: 0;
}

.content li {
    direction: rtl;
}

.content {
    text-align: right;

}

.body .content {
    padding: 20px 15px 30px 15px;
}

.content b {
    padding-top: 10px;
}

.masir-about {
    position: relative;
    background-color: var(--background-tertiary);
}

.masir-about img {
    padding: 10px;
}

.masir-about .content a {
    color: var(--background-primary);
    text-align: center;
}
.years{
    direction: rtl;
}

.year1,
.year3 {
    background-color: var(--action-primary-hover);
}

.year2,
.year4 {
    background-color: var(--action-primary);
}

@media (min-width: 768px) {
    .main-about .social-link {
        left: 35px;
        top: 70px;
    }

    .main-about .content {
        width: 50vw;
        text-align: center;
        padding: 50px;
    }
        .main-about .content .right{
            width: 30vw;
            text-align: right;
        }
    .years {
        position: relative;
        display: flex;
        flex-wrap: wrap;
    }

    .years .year {
        position: relative;
        width: calc(100vw / 2);

    }

    .years .year img {
        width: 100%;
        height: 53vh;
    }

    .years .year .content {
        padding: 20px 50px 50px 50px;
        text-align: right;
    }

    .years .year .content li {
        list-style-type: none;
        padding: 0;
        margin: 0;
        line-height: 25px
    }

    .year1,
    .year4 {
        background-color: var(--action-primary-hover);
    }


    .year2,
    .year3 {
        background-color: var(--action-primary);
    }
}

@media (min-width: 1024px) {
    .welcome-about .content {
        text-align: center;
        padding: 95px 25vw 95px 25vw;
    }

    .masir-about {
        height: 85vh;
    }

    .masir-about h2 {
        position: absolute;
        float: right;
        top: 37vh;
        right: 15vw;
    }

    .masir-about img {
        position: absolute;
        height: 60vh;
        top: 12.5vh;
        width: 60vh;
        left: calc(50vw - 30vh);
    }

    .masir-about .content {
        position: absolute;
        width: 35vw;
        left: calc(15vw - 32vh);
        top: 20vh;
        text-align: right;
    }

    .read-more i {
        margin-top: 20px;
    }

    .years {
        height: 105vh;
    }

    .years .year {
        width: calc(100vw / 4);

    }

    .years b,
    .years li {
        padding: 0;
        margin: 0;
    }

    .year1,
    .year3 {
        background-color: var(--action-primary-hover);
    }

    .year2,
    .year4 {
        background-color: var(--action-primary);
    }

    .rozane {
        position: relative;
        background-color: var(--background-secondary);
        height: 70vh;
    }

    .rozane .img1 {
        position: absolute;
        left: 0;
        width: 17vw;
        height: 100%;
    }

    .rozane .content {
        position: absolute;
        left: 17vw;
        height: 100%;
        width: 34vw;
        padding: 80px;
    }

    .rozane .content h3 {
        text-align: right;
    }

    .rozane .img2 {
        position: absolute;
        right: 0;
        height: 100%;
        width: 49vw;
    }

    .behdasht {
        position: relative;
        height: 85vh;
        width: 100vw;
    }

    .behdasht img {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .behdasht .overlay-div {
        position: absolute;
        background: linear-gradient(to right,
                rgba(0, 0, 0, 0) 0%,
                rgba(255, 255, 255, 0.3) 35%,
                rgba(255, 255, 255, .8) 60%,
                rgba(255, 255, 255) 100%);
        z-index: 150;
        height: 100%;
        width: 100%;
    }

    .behdasht .content {
        position: absolute;
        right: 10vw;
        top: 17vh;
        width: 35vw;
        z-index: 200;
    }

    .behdasht .content h2 {
        text-align: right;
    }

}