/* font face................................................................ */
@font-face {
    font-family: Vazir;
    src: url("../Vazir/Vazir.eot");
    src: url("../Vazir/Vazir.ttf") format("Vazir-opentype"), url("../Vazir/Vazir.woff") format("woff"), url("../Vazir/Vazir.woff2") format("woff2"), url("../Vazir/Vazir.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

.containerrespan {
    width: 90%;
    display: none;
}

/* Code above is not really needed since slideshow will fit width of whatever container you put it in. */

.js-slideshow {
    --fade: 1.8s;
    position: relative;
    height: 50px;
    width: 100%;
    padding-bottom: 56.25%;
    left: 15px;
}

    .js-slideshow > figure {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        opacity: 0;
        transition: opacity var(--fade) ease;
    }

        .js-slideshow > figure:first-child {
            opacity: 1;
        }

    .js-slideshow img {
        height: 100%;
        width: 100%;
        display: block;
    }

    /* optional caption */
    .js-slideshow figcaption {
        margin-top: 0.8em;
        font-size: 1.1rem;
        line-height: 1.3em;
        letter-spacing: 0.03em;
        font-weight: 100;
        font-style: italic;
        color: white;
        opacity: 0.7;
    }

@media (orientation: landscape) {
    .container {
        width: 50vw;
    }
}

/* .................................................. */
#panels-cont {
    display: flex;
    cursor: pointer;
}

.panels {
    display: flex;
    flex: 1;
    height: 100vh;
    background: no-repeat center / cover;
    transition: 0.5s ease-out;
  
}

@keyframes blubb {
    10% {
        flex: 0.5;
    }

    20% {
        flex: 2.5;
    }

    30% {
        flex: 0.7;
    }

    40% {
        flex: 2;
    }

    50% {
        flex: 0.8;
    }

    60% {
        flex: 1.5;
    }

    70% {
        flex: 0.9;
    }

    80% {
        flex: 1.1;
    }

    100% {
        flex: 1;
    }
}

#panel1 {
    background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
}

#panel2 {
    background-image: url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500);
}

#panel3 {
    background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d);
    /*animation: blubb*/
    /*<-- peep the JS, yo*/
}

#panel4 {
    background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
}

#panel5 {
    background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
}

/*ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp*/

.panels p {
    transition: 0.33s ease-out;
    line-height: 2;
}

    .panels p.mid {
        margin: auto;
    }

    .panels p.top,
    .panels p.bot {
        position: absolute;
        font-size: calc(var(--font-size) - 1vw);
        width: 100%;
    }

    .panels p.top {
        top: 0;
        margin-top: -10vh;
    }

    .panels p.bot {
        bottom: 0;
        margin-bottom: -10vh;
    }

.backsearch {
    width: 100%;
    height: 55px;
    margin: auto;
    background-color: #00000063;
    margin-top: -60px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.search {
    width: 50px;
    height: 50px;
    margin: -40px auto 0;
    margin-right: auto;
    background-color: #eee;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
    float: right;
    margin-right: 40px;
}

    .search:before {
        content: "";
        display: block;
        width: 3px;
        height: 100%;
        position: relative;
        background-color: #7c9148;
        transition: all 0.5s ease;
    }

    .search.open {
        width: 420px;
    }

        .search.open:before {
            height: 50px;
            margin: 10px 0 20px 30px;
            position: absolute;
        }

.search-box {
    width: 100%;
    height: 100%;
    box-shadow: none;
    border: none;
    background: transparent;
    color: #000;
    padding: 20px 100px 20px 45px;
    font-size: 26px;
    text-align: center;
}

    .search-box:focus {
        outline: none;
    }

.search-button {
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    right: 0;
    top: -10px;
    padding: 25px;
    cursor: pointer;
}

.search-icon {
    width: 20px;
    height: 20px;
    border-radius: 40px;
    border: 3px solid #7c9148;
    display: block;
    position: relative;
    margin-left: 2px;
    transition: all 0.5s ease;
}

    .search-icon:before {
        content: "";
        width: 3px;
        height: 12px;
        position: absolute;
        right: -5px;
        top: 20px;
        display: block;
        background-color: #7c9148;
        transform: rotate(-45deg);
        transition: all 0.5s ease;
    }

    .search-icon:after {
        content: "";
        width: 3px;
        height: 8px;
        position: absolute;
        right: -10px;
        top: 27px;
        display: block;
        background-color: #7c9148;
        transform: rotate(-45deg);
        transition: all 0.5s ease;
    }

.open .search-icon {
    margin: 0;
    width: 30px;
    height: 30px;
    border-radius: 60px;
}

    .open .search-icon:before {
        transform: rotate(52deg);
        left: 15px;
        top: 10px;
        height: 15px;
    }

    .open .search-icon:after {
        transform: rotate(-230deg);
        left: 15px;
        top: 3px;
        height: 15px;
    }

/* ---------------------contac style......................... */
.backimagescontact {
    width: 100%;
    height: 300px;
    margin: auto;
    background-color: transparent;
    background-image: url(../images/images.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 700px;
}

.textimagescontact {
    width: 100%;
    /*height: 140px;*/
    margin: 100px;
    margin-top: 50px;
    float: right;
    background-color: transparent;
    /*margin-top: 120px;*/
    z-index: -1;
    text-align: right;
    font-size: 22px;
}

    .textimagescontact p {
        width: 60%;
        background-color: transparent;
        color: white;
        float: right;
    }

    .textimagescontact h2 {
        color: rgb(0, 0, 0);
        font-family: vazir;
    }

    .textimagescontact a {
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-size: 35px;
    }

    .textimagescontact h2 {
        font-size: 30px;
        color: white;
    }

/* about ............................................................... */
.backimagesabout {
    width: 100%;
    height: 350px;
    margin: auto;
    background-color: transparent;
    background-image: url(../images/about_us.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 700px;
}

.backimagesabouttehran {
    width: 100%;
    height: 400px;
    margin: auto;
    background-color: transparent;
    margin-top: 30px;
}

.aptionpanelabout {
    width: 25%;
    height: 120px;
    margin: auto;
    margin-top: auto;
    margin-right: auto;
    background-color: white;
    border: 2px solid lightgray;
    float: right;
    margin-right: 100px;
    transition: 1s;
    cursor: pointer;
    margin-top: -80px;
}

    .aptionpanelabout:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        border-radius: 40px 10px;
        margin-top: -90px;
    }

.textimagesabout {
    width: 600px;
    height: 140px;
    margin: 100px;
    float: right;
    background-color: transparent;
    z-index: -1;
    text-align: right;
    font-size: 22px;
}

    .textimagesabout h2 {
        color: black;
        font-family: vazir;
    }

        .textimagesabout h2 span {
            font-family: vazir;
            color: #4b5e1e;
        }

    .textimagesabout a {
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-size: 22px;
    }

.moresabout {
    width: 80%;
    height: auto;
    padding: 10px;
    background-color: #00000018;
    float: right;
    font-size: 22px;
    margin-top: 30px;
    margin-bottom: 10px;
    margin-right: 160px;
}

    .moresabout span {
        float: right;
        padding: 20px;
        font-size: 26px;
        font: bold;
    }

    .moresabout p {
        font-size: 18px;
        width: 80%;
        text-align: right;
        float: right;
        padding-right: 20px;
    }

.moresabout2 {
    width: 90%;
    height: auto;
    background-color: #00000018;
    text-align: center;
    margin: 20px;
    float: right;
    font-size: 22px;
    margin-right: 70px;
    padding: 20px;
    clear: both;
}

.backbonyan {
    width: 90%;
    height: 800px;
    margin: auto;
    background-color: transparent;
    clear: both;
}

.titrandtextbonyan {
    width: 100%;
    height: auto;
    margin: auto;
    background-color: #00000018;
    margin-bottom: 50px;
}

    .titrandtextbonyan h2 {
        text-align: center;
        font-size: 28px;
        font-family: vazir;
        padding: 20px;
    }

.backimagestozihatbontan {
    width: 35%;
    height: 500px;
    margin: auto;
    margin-right: 140px;
    float: right;
}

.imagesbonyan {
    width: 100%;
    height: 400px;
    float: right;
    background-color: transparent;
}

    .imagesbonyan img {
        width: 100%;
        height: 400px;
    }

.bonyantozihat {
    width: 100%;
    height: 240px;
    float: right;
    margin: auto;
    background-color: transparent;
    clear: both;
}

.titrtozih {
    width: 100%;
    height: 50px;
    margin: auto;
    background-color: transparent;
}

    .titrtozih h2 {
        text-align: right;
        font-size: 24px;
        padding: 10px;
        font-family: vazir;
    }

.paneltozih {
    width: 100%;
    height: 130px;
    margin: auto;
    background-color: transparent;
    font-family: vazir;
}

    .paneltozih p {
        text-align: right;
        padding: 20px;
    }

.grid {
    position: relative;
    margin: 0 auto;
    padding: 1em 0 4em;
    list-style: none;
    text-align: center;
}

    /* Common style */
    .grid figure {
        position: relative;
        float: left;
        overflow: hidden;
        margin: 10px 52px;
        min-width: 120px;
        max-width: 420px;
        max-height: 360px;
        width: 32%;
        background: transparent;
        text-align: center;
        cursor: pointer;
    }

        .grid figure img {
            position: relative;
            display: block;
            min-height: 100%;
            max-width: 100%;
        }

        .grid figure figcaption {
            padding: 2em;
            color: #fff;
            text-transform: uppercase;
            font-size: 1.25em;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

            .grid figure figcaption::before,
            .grid figure figcaption::after {
                pointer-events: none;
            }

            .grid figure figcaption,
            .grid figure figcaption > a {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

                /* Anchor will cover the whole item by default */
                /* For some effects it will show as a button */
                .grid figure figcaption > a {
                    z-index: 1000;
                    text-indent: 200%;
                    white-space: nowrap;
                    font-size: 0;
                    opacity: 0;
                }

        .grid figure h2 {
            word-spacing: -0.15em;
            font-weight: 300;
        }

            .grid figure h2 span {
                font-weight: 800;
            }

        .grid figure h2,
        .grid figure p {
            margin: 0;
        }

        .grid figure p {
            letter-spacing: 1px;
            font-size: 68.5%;
        }

/*---------------*/
/***** Sadie *****/
/*---------------*/

figure.effect-sadie figcaption::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(top, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.8) 75%);
    background: linear-gradient(to bottom, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.8) 75%);
    content: "";
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
}

figure.effect-sadie h2 {
    position: absolute;
    top: 20%;
    right: 10%;
    font-size: 24px;
    width: 100%;
    color: #484c61;
    -webkit-transition: -webkit-transform 0.35s, color 0.35s;
    transition: transform 0.35s, color 0.35s;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
    position: absolute;
    bottom: 0;
    right: 8%;
    width: 100%;
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
    top: 50%;
    font-size: 12px;
}

figure.effect-sadie:hover h2 {
    color: #fff;
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
    transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
}

figure.effect-sadie:hover figcaption::before,
figure.effect-sadie:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* page details ............................................................... */
.backimagesdetails {
    width: 100%;
    height: 500px;
    margin: auto;
    background-color: transparent;
    background-image: url(../images/55.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 700px;
}

.backimagesdetailsprojectpage1 {
    width: 100%;
    height: 500px;
    margin: auto;
    background-color: transparent;
    background-image: url(../images/project/projectpage1/modern-office-room-design-stylish-modern-executive-office-interior-design-modern-office-modern-office-room-interior-design.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 700px;
}

.backimagesdetailsprojectpage2 {
    width: 100%;
    height: 300px;
    margin: auto;
    background-color: transparent;
    background-image: url(../images/project/projectpage2/unnamed.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 800px;
}

.backimagesdetailsprojectpage3 {
    width: 100%;
    height: 500px;
    height: auto;
    margin: auto;
    background-color: transparent;
    background-image: url(../images/project/projectpage3/dark-accent-wall.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 800px;
}

.textimagedetails {
    width: 300px;
    height: 140px;
    margin: 200px;
    float: right;
    background-color: transparent;
    color: rgb(0, 0, 0);
    z-index: -1;
    text-align: right;
    font-size: 22px;
    direction: rtl;
}

    .textimagedetails a {
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-size: 35px;
    }

    .textimagedetails h2 {
        color: white;
        font-size: 30px;
    }

.backproductdetails {
    width: 100%;
    height: 500px;
    margin: auto;
    background-color: transparent;
    clear: both;
    margin-top: 60px;
}

.backimagesproductdetails {
    width: 40%;
    height: 500px;
    float: right;
    background-color: violet;
    background-image: url(../images/Products/2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 500px;
    margin: auto;
    margin-right: 80px;
}

.backtextdetais {
    width: 50%;
    height: 500px;
    float: left;
    background-color: transparent;
    margin: 30px;
    margin-left: 40px;
}

.titledetais {
    width: 100%;
    height: auto;
    margin: auto;
    font-size: 14px;
    background-color: transparent;
    text-align: right;
    font: bold;
}

.tozihattitle {
    width: 100%;
    height: auto;
    margin: auto;
    font-size: 22px;
    background-color: transparent;
    text-align: right;
}

.datedetails {
    width: 100%;
    height: auto;
    margin: auto;
    font-size: 12px;
    background-color: transparent;
    text-align: right;
    color: #090909b3;
    direction: rtl;
}

}

.deshcreptionsdetails {
    width: 100%;
    height: auto;
    margin: auto;
    font-size: 18px;
    background-color: transparent;
    text-align: right;
}

.icondetails {
    width: 100%;
    height: 60px;
    margin: auto;
    font-size: 18px;
    background-color: transparent;
    text-align: right;
    color: black;
}

    .icondetails i {
        color: rgb(0, 0, 0);
    }

/* تب ایتم*/
.intro h1 {
    color: #efefef;
    font-size: 3rem;
    margin: 60px 0 0;
    font-weight: bold;
    font-family: monospace;
}

body a {
    text-decoration: none;
}

@media screen and (min-width: 800px) {
    .intro h1 {
        font-size: 4rem;
    }
}

.intro p {
    color: #e0cf79;
    font-size: 1.3rem;
    line-height: 1.5;
}

.intro a {
    color: #40dfbb;
    font-weight: bold;
    text-decoration: none;
}

.swiper-container {
    width: 100%;
    height: 100%;
    margin: 50px auto 0;
}

@media screen and (min-width: 800px) {
    .swiper-container {
        width: 70%;
        margin-left: 15%;
    }
}

.swiper-slide {
    background: #fff;
    color: #333;
    font-size: 1.8rem;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.swiper-container-horizontal > .swiper-pagination {
    top: 0;
    bottom: auto;
}

    .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet {
        margin: 0;
    }

.active-mark {
    background: #ffeb3b;
    width: 25%;
    height: 4px;
    position: absolute;
    left: 0;
    top: 52px;
    transition: left 0.2s ease-out;
}

.swiper-pagination-bullet {
    background-color: #00d42b;
    border-radius: 0;
    box-sizing: border-box;
    color: #0e8927;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: normal;
    opacity: 1;
    height: 56px;
    width: 25%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: font-weight 0.22s ease;
}

    .swiper-pagination-bullet:nth-of-type(1).swiper-pagination-bullet-active ~ .active-mark {
        left: 0%;
    }

    .swiper-pagination-bullet:nth-of-type(2).swiper-pagination-bullet-active ~ .active-mark {
        left: 25%;
    }

    .swiper-pagination-bullet:nth-of-type(3).swiper-pagination-bullet-active ~ .active-mark {
        left: 50%;
    }

    .swiper-pagination-bullet:nth-of-type(4).swiper-pagination-bullet-active ~ .active-mark {
        left: 75%;
    }

    .swiper-pagination-bullet:first-of-type.swiper-pagination-bullet-active ~ .active-mark {
        left: 0;
    }

.swiper-pagination-bullet-active {
    font-weight: bold;
}

.tab {
    border-radius: 3px;
    padding: 10px 25px;
    display: inline-block;
    margin: 20px 30px;
    transition: all 0.8s, color 0.3s 0.3s;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.2);
    color: #333;
    float: right;
    width: 200px;
    height: 25px;
    text-align: center;
    margin-bottom: 0;
}

    .tab:hover {
        border-radius: 30px 10px;
        border-top: #7ba810b3 4px solid;
        border-left: #87b40cb3 2px solid;
    }

    .tab label {
        margin-right: 20px;
        position: relative;
        top: 0;
        cursor: pointer;
        color: #333;
        text-transform: uppercase;
    }

.tab__content {
    position: relative;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity 0.2s cubic-bezier(0.42, 0, 0.34, 1.01);
    opacity: 0;
}

[type="radio"]:checked ~ label {
    border: 2px solid #1d1d1d;
    border-radius: 20px;
    color: #1d1d1d;
    background-color: white;
    z-index: 2;
}

    [type="radio"]:checked ~ label ~ .tab__content {
        z-index: 1;
        opacity: 1;
    }

/* project .........................................................*/
.alllistproject {
    width: 95%;
    height: 80px;
    margin: auto;
    background: transparent;
    clear: both;
    margin-top: 60px;
    border: 1px solid transparent;
    border-bottom: 3px solid rgb(179, 177, 177);
}

.subjectproject {
    width: 200px;
    height: 50px;
    margin: 10px;
    float: right;
    background-color: transparent;
    padding-top: 20px;
    border: 1px solid transparent;
    text-align: center;
}

    .subjectproject:hover {
        border-bottom: 3px solid black;
    }

    .subjectproject a {
        color: black;
        text-decoration: none;
        font-family: vazir;
    }

.backimagesprojects {
    width: 100%;
    height: 450px;
    margin: auto;
    background-color: transparent;
    background-image: url(../images/55.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 700px;
    background-size: cover;
}

.backimagesarticles {
    width: 100%;
    height: 300px;
    margin: auto;
    background-color: transparent;
    background-image: url(../images/55.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 700px;
    background-size: cover;
}

.backaslilitproject {
    width: 100%;
    height: 2000px;
    margin: auto;
    background-color: transparent;
    background-image: url(../Pimage/bg3.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* -----------------details project............................. */
.backlistproject {
    width: 100%;
    height: 1000px;
    margin: auto;
    background-color: wheat;
    clear: both;
}

.imagesprojectmodel1 {
    width: 400px;
    height: 500px;
    float: left;
    margin: auto;
    transition: 2s;
}

    .imagesprojectmodel1 img {
        width: 100%;
        height: 500px;
    }

    .imagesprojectmodel1:hover {
        opacity: 0.3;
    }

.imagesprojectmodel2 {
    width: 300px;
    height: 200px;
    float: left;
    margin: auto;
    transition: 2s;
}

    .imagesprojectmodel2 img {
        width: 100%;
        height: 300px;
    }

.imagesprojectmodel3 {
    width: 600px;
    height: 300px;
    float: left;
    margin: auto;
    transition: 2s;
}

.toggle .panels .panel {
    padding: 20px 10px;
    display: none;
}

    .toggle .panels .panel:first-child {
        display: block;
    }

.backimagesitemproject1 {
    width: 40%;
    height: 500px;
    float: right;
    background-color: violet;
    background-image: url(../images/article/TV-tables-2019-850x491.jpg);
    background-repeat: no-repeat;
    background-size: 100% 500px;
    margin: auto;
    margin-top: 20px;
    margin-right: 80px;
}

.backimagesitemproject2 {
    width: 40%;
    height: 500px;
    float: right;
    background-color: violet;
    background-image: url(../images/article/d.jpg);
    background-repeat: no-repeat;
    background-size: 100% 500px;
    margin: auto;
    margin-right: 80px;
    margin-top: 20px;
}

.backimagesitemproject3 {
    width: 40%;
    height: 500px;
    float: right;
    background-color: violet;
    background-image: url(../images/article/935.jpg);
    background-repeat: no-repeat;
    background-size: 100% 500px;
    margin: auto;
    margin-right: 80px;
    margin-top: 20px;
}

.backimagesitemproject4 {
    width: 40%;
    height: 500px;
    float: right;
    background-color: violet;
    background-image: url(../images/article/Article-writing.jpg);
    background-repeat: no-repeat;
    background-size: 100% 500px;
    margin: auto;
    margin-right: 80px;
    margin-top: 20px;
}

.panels {
    width: 100%;
    height: auto;
    margin: auto;
}

/* .................................................... */

.container1 {
    position: relative;
    width: 40%;
    float: right;
    margin: 20px;
    height: 450px;
}

.container2 {
    position: relative;
    width: 40%;
    float: right;
    margin: 20px;
    height: 450px;
}

.image1 {
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: 3px 3px 3px 3px #4e5f27ab;
}

.overlay1 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.486);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: 0.5s ease;
}

.container1:hover .overlay1 {
    height: 100%;
}

.text1 {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

/* porduct................................................. */
.backimagesporducts {
    width: 100%;
    height: 500px;
    margin: auto;
    background-color: transparent;
    background-image: url(../images/porduct/wood.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 600px;
}

/* article.................................................. */
.backasliarticle {
    width: 100%;
    height: auto;
    margin: auto;
    background-color: transparent;
    background-image: url(../Pimage/bg3.png);
    background-size: 100% 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.textimagearticlefa {
    width: 300px;
    height: 140px;
    margin: 200px;
    float: right;
    background-color: transparent;
    color: rgb(255, 255, 255);
    z-index: -1;
    text-align: right;
    font-size: 30px;
}

    .textimagearticlefa a {
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-size: 35px;
    }

.backimagesarticle {
    width: 40%;
    height: 500px;
    float: right;
    background-color: violet;
    background-image: url(../images/article/TV-tables-2019-850x491.jpg);
    background-repeat: no-repeat;
    background-size: 100% 500px;
    margin: auto;
    margin-right: 80px;
}

/* details project.............................................. */
.BackAsliProjectDetails {
    width: 100%;
    height: 800px;
    margin: auto;
    background-color: rgb(253, 222, 195);
}

.backdetails {
    width: 70%;
    height: 500px;
    margin: auto;
    float: right;
    background-color: slategray;
    clear: both;
}

.popup {
    width: 900px;
    margin: auto;
    text-align: center;
}

    .popup img {
        width: 200px;
        height: 200px;
        cursor: pointer;
    }

.show {
    z-index: 999;
    display: none;
}

    .show .overlay {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.66);
        position: absolute;
        top: 500px;
        left: 0;
        border-radius: 1px;
    }

    .show .img-show {
        width: 600px;
        height: 400px;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
    }

.img-show span {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 99;
    cursor: pointer;
}

.img-show img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/*End style*/
.containerg {
    padding: 95px 0;
    margin: 0 auto;
    width: 100%;
}

h1 {
    position: relative;
    margin-bottom: 45px;
    font-family: Vazir, "Oswald", sans-serif;
    font-size: 44px;
    text-transform: uppercase;
    color: #424242;
}

.gallery-wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 90%;
    margin: auto;
}

.item {
    flex: 1;
    height: 80%;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    transition: flex 0.8s ease;
}

    .item:hover {
        flex: 3;
    }

.item-1 {
    background-image: url("../images/Products/2.jpg");
}

.item-2 {
    background-image: url("../images/q1.jpg");
}

.item-3 {
    background-image: url("../images/q2.jpg");
}

.item-4 {
    background-image: url("../images/q3.jpg");
}

.item-5 {
    background-image: url("../images/q4.jpg");
}

.social {
    position: absolute;
    right: 35px;
    bottom: 0;
}

    .social img {
        display: block;
        width: 32px;
    }

.baclskideimagespro {
    width: 100%;
    height: auto;
    margin: auto;
    background-color: transparent;
    clear: both;
}

/* ................................................................................. */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.v3 {
    stroke-dasharray: 1200 150;
    stroke-dashoffset: 2700;
    animation: draw 4s linear 1;
    background-size: contain;
    width: 400px;
    float: right;
    border-radius: 50%;
}

.v4 {
    stroke-dasharray: 1200 150;
    stroke-dashoffset: 2700;
    margin-top: 400px;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

.rslides {
    /*box-shadow: -2px 6px 12px 6px #ccced0;*/
    left: 0;
    position: relative;
    z-index: -1;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
    height: 500px;
}

    .rslides li {
        -webkit-backface-visibility: hidden;
        position: absolute;
        display: none;
        width: 100%;
        left: 0;
        top: 0;
    }

        .rslides li:first-child {
            position: relative;
            display: block;
            float: left;
        }

.f1 {
    position: relative;
    display: block;
    float: left;
}

.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
    max-height: 500px;
}

.container {
    width: 60%;
    margin: 0 auto;
    margin-left: 700px;
    font-family: "Bnazanin";
    margin-top: 10px;
    position: relative;
    background-image: url("../image/1045905058-talab-ir.jpg");
    background-size: cover;
    width: 400px;
    margin-right: 41%;
    float: right;
    margin-top: 420px;
    border-radius: 50%;
    background-repeat: no-repeat;
}

.pp {
    color: white;
    font-size: 30px;
    text-align: right;
    margin-right: 200px;
    padding-top: 90px;
    font-family: "Bnazanin";
}

.pppp {
    color: white;
    text-align: right;
    margin-right: 300px;
    padding-top: 1px;
    font-family: "Bnazanin";
}

.ul1 .li {
    display: inline;
    text-align: center;
}

.aaa {
    display: inline-block;
    width: 10%;
    padding: 0.78rem 0;
    margin: 0;
    margin-left: 100px;
    list-style-type: none;
    text-decoration: none;
    color: rgb(216, 216, 216);
    text-shadow: 1px 1px 2px gray;
    clear: both;
}

.two:hover ~ hr {
    margin-left: 25%;
}

.three:hover ~ hr {
    margin-left: 50%;
}

.four:hover ~ hr {
    margin-left: 70%;
}

.hr {
    height: 0.2rem;
    width: 21%;
    margin: 0;
    background: rgb(0, 0, 0);
    border: none;
    transition: 0.3s ease-in-out;
}

.about {
    float: right;
    margin: auto;
    font-family: "Bnazanin";
    margin-top: 70px;
    margin-right: -280px;
    color: rgb(216, 216, 216);
    text-shadow: 2px 2px 2px gray;
}

.about1 {
    font-family: "Bnazanin";
    font-size: 30px;
    float: right;
    margin-top: 20px;
    margin-right: 100px;
    color: rgb(216, 216, 216);
}

.btn-5 {
    float: left;
    border: 0 solid;
    box-shadow: inset 0 0 20px rgba(179, 179, 179, 0.5);
    outline: 1px solid;
    outline-color: rgba(179, 179, 179, 0.5);
    outline-offset: 0px;
    text-shadow: none;
    transition: all 0 cubic-bezier(0.19, 1, 0.22, 0.5);
    width: 150px;
    height: 17px;
    text-align: center;
    margin-left: 1150px;
    margin-top: 70px;
    font-family: "Bnazanin";
    padding-bottom: 15px;
}

    .btn-5:hover {
        border: 1px solid;
        box-shadow: inset 0 0 20px rgba(179, 179, 179, 0.5), 0 0 20px rgba(179, 179, 179, 0.5);
        outline-color: rgba(255, 255, 255, 0);
        outline-offset: 15px;
        text-shadow: 1px 1px 2px #427388;
    }

.hhh {
    text-align: center;
    color: rgb(62, 155, 0);
    font-size: 20px;
    margin-top: 10px;
    font-family: "Bnazanin";
}

.a {
    width: 300px;
    margin: auto;
    margin-left: 50px;
}

.port {
    width: 100%;
    height: 450px;
    margin: auto;
    margin-top: 700px;
    background: url(../image/r.jpg) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-attachment: fixed;
    opacity: 0.5;
}

.btn-5 {
    float: left;
    border: 0 solid;
    box-shadow: inset 0 0 20px rgba(179, 179, 179, 0.5);
    outline: 1px solid;
    outline-color: rgba(179, 179, 179, 0.5);
    outline-offset: 0px;
    text-shadow: none;
    transition: all 0 cubic-bezier(0.19, 1, 0.22, 0.5);
    width: 150px;
    height: 17px;
    text-align: center;
    margin-left: 1150px;
    margin-top: 70px;
    font-family: "Bnazanin";
    padding-bottom: 15px;
}

    .btn-5:hover {
        border: 1px solid;
        box-shadow: inset 0 0 20px rgba(179, 179, 179, 0.5), 0 0 20px rgba(179, 179, 179, 0.5);
        outline-color: rgba(255, 255, 255, 0);
        outline-offset: 15px;
        text-shadow: 1px 1px 2px #000000;
        height: 35px;
        color: rgb(0, 0, 0);
    }

@keyframes ry {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes r1 {
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes r2 {
    100% {
        color: #fff;
    }
    /* 100% { transform: scale(60); */
}

/*overlay */
.container {
    position: relative;
    width: 400px;
    border-radius: 50%;
    height: 400px;
}

.image {
    display: none;
    width: 400px;
    border-radius: 500px;
}

.overlay {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: 0.5s ease;
    border-radius: 1000px;
}

.container:hover .overlay {
    bottom: 0;
    height: 100%;
    animation: ry 1s linear 1;
}

.text {
    color: #000;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: Vazir;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

/* ovelay */
.logo {
    animation: r1 2s linear 1;
    position: relative;
}

    .logo:hover {
        animation: load 2s linear 1;
    }


#loader {
    opacity: 0;
    transition: z-index 1s step-end, opacity 0.8s ease-in-out;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    background-color: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

#page-content:empty + #loader {
    opacity: 1;
    z-index: 100;
}


/* article contaioner */
.mooneh-maghale1 {
    width: 100%;
    /* height: 700px; */
    margin-top: 30px;
}

.mooneh-maghale {
    background: azure;
    width: 28%;
    /* height: 500px; */
    float: right;
    margin-right: 5px;
    padding-left: 20px;
    background-color: rgba(0, 0, 0, 0.09);
    border-top: #0b0c0bce 4px solid;
    border-left: #434443b3 2px solid;
    border-right: #434443b3 2px solid;
    border-bottom: #434443b3 2px solid;
    border-radius: 20px 0px 20px 0px;
}

.matn-maghale {
    text-align: center;
    padding: 20px;
}

    .matn-maghale a {
        text-decoration: none;
        color: black;
    }

.center {
    text-align: center;
    margin-top: 100px;
}

.containeritem {
    position: relative;
    width: 30%;
    max-width: 350px;
    float: right;
    padding: 10px;
    height: auto;
    transition: 1s;
}

    .containeritem:hover {
        opacity: 0.5;
    }

.im {
    width: 168px;
    margin-top: -24px;
    height: 336px;
    padding-bottom: 15px;
}

.containeritem1 {
    position: relative;
    /* width: 100%; */
    max-width: 300px;
    float: right;
    /* padding: 10px; */
    height: auto;
}

.containeritem img {
    /* border-radius: 25px 0; */
    /* -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
-webkit-mask-size: 200%;
mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
mask-size: 200%; */
    border-top: #333 4px solid;
    border-left: #514f4c 2px solid;
    border-right: #a59e9e 2px solid;
    border-bottom: #818181 2px solid;
    opacity: 1;
    width: 100%;
    transition: 0.5s ease;
    height: 300px;
    backface-visibility: hidden;
    animation: shine 2s 1;
}

im {
    width: 168px;
    margin-top: -24px;
    height: 336px;
    padding-bottom: 15px;
}

.more-link {
    background-color: rgba(191, 189, 189, 0.09);
    color: #000;
}

    .more-link:hover {
        background-color: #000;
        color: #fff;
    }

.arrows {
    width: 15%;
    height: 20px;
    color: #000;
}

.more {
    background-color: rgba(191, 189, 189, 0.09);
    border-top: #d1d1d1 3px solid;
    border-bottom: #969595 3px solid;
    padding: 1px 55px;
    margin-top: 100px;
    clear: both;
    color: #6b6969;
    border-radius: 20px 0px 20px 0px;
}

    .more:hover {
        background-color: rgba(0, 0, 0, 0.2);
        border-top: #7ba810b3 4px solid;
        border-left: #87b40cb3 2px solid;
    }

.flash-more {
    width: 50%;
    height: 15px;
    margin-top: 0px;
    margin-right: 0px;
    float: right;
    background-color: transparent;
    color: #000000;
    padding-top: 5px;
}

    .flash-more:hover {
        color: white;
    }

@keyframes shine {
    from {
        -webkit-mask-position: 150%;
        mask-position: 150%;
    }

    to {
        -webkit-mask-position: -50%;
        mask-position: -50%;
    }
}

.middle1 {
    transition: 0.5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.containeritem:hover img {
    opacity: 0.3;
    mask-size: 200%;
    -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, 0.6) 30%, #000 50%, rgba(0, 0, 0, 0.6) 70%);
    -webkit-mask-size: 200%;
    mask-image: linear-gradient(-75deg, rgba(0, 0, 0, 0.6) 30%, #000 50%, rgba(0, 0, 0, 0.6) 70%);
    animation: shine 2s infinite;
}

.containeritem:hover .middle1 {
    opacity: 1;
}

.text {
    color: black;
    font-size: 16px;
    padding: 16px 32px;
}

/* article container */
/* effect1 */
@keyframes load {
    0% {
        opacity: 0.08;
        /*         font-size: 10px; */
        /* 				font-weight: 400; */
        filter: blur(5px);
        letter-spacing: 3px;
    }

    100% {
        /*         opacity: 1; */
        /*         font-size: 12px; */
        /* 				font-weight:600; */
        /* 				filter: blur(0); */
    }
}

.animate {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    font-family: Helvetica, sans-serif, Arial;
    animation: load 1.2s infinite 0s ease-in-out;
    animation-direction: normal;
    animation-direction: alternate;
    text-shadow: 0 0 1px white
}

/* eefect1 */
a {
    text-decoration: none;
}

@media (min-width: 710px) and (max-width: 1178px) {
    .V4 {
    }

    .title1 {
        margin-top: 300px;
    }
}

@media (max-width: 1178px) {
    .content {
        background-size: contain;
    }
}

@media (min-width: 1179px) {
    .content {
        background-size: cover;
    }
}

.content {
    /*background-image: url("../images/ry112.svg");*/
    background-image: url("/Content/Images/ry2-01.svg");
    background-repeat: no-repeat;
    min-height: 2000px;
    margin-left: -10px;
    background-size: 100% 100%;
    width: 100%;
}

.wrapper {
    display: inline-flex;
    margin: 0;
    /* margin-top: -57px; */
    padding: 0;
    align-items: center;
    width: 100%;
    text-align: center;
    justify-content: center;
}

i {
    padding: 0px 10px;
}

.wrapper i:nth-child(1) {
    color: #eaedeb;
    cursor: pointer;
    text-shadow: 0px 7px 10px rgba(0, 0, 0, 0.4);
    transition: all ease-in-out 150ms;
}

    .wrapper i:nth-child(1):hover {
        margin-top: -10px;
        text-shadow: 0px 16px 10px rgba(0, 0, 0, 0.3);
        transform: translate(0, -8);
    }

.wrapper i:nth-child(2) {
    color: #eaedeb;
    cursor: pointer;
    text-shadow: 0px 7px 10px rgba(0, 0, 0, 0.4);
    transition: all ease-in-out 150ms;
}

    .wrapper i:nth-child(2):hover {
        margin-top: -10px;
        text-shadow: 0px 16px 10px rgba(0, 0, 0, 0.3);
        transform: translate(0, -8);
    }

.wrapper i:nth-child(3) {
    color: #eaedeb;
    cursor: pointer;
    text-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
    transition: all ease-in-out 150ms;
}

    .wrapper i:nth-child(3):hover {
        margin-top: -10px;
        text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
        transform: translate(0, -5);
    }

.wrapper i:nth-child(4) {
    color: #eaedeb;
    cursor: pointer;
    text-shadow: 0px 7px 10px rgba(0, 0, 0, 0.4);
    transition: all ease-in-out 150ms;
}

    .wrapper i:nth-child(4):hover {
        margin-top: -10px;
        text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
        transform: translate(0, -5);
    }

.wrapper i:nth-child(5) {
    color: #eaedeb;
    cursor: pointer;
    text-shadow: 0px 7px 10px rgba(0, 0, 0, 0.4);
    transition: all ease-in-out 150ms;
}

    .wrapper i:nth-child(5):hover {
        margin-top: -10px;
        text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
        transform: translate(0, -5);
    }

/**social*/
.menu.mobile {
    display: none;
    clear: both;
    width: 90%;
    float: right;
    position: fixed;
    right: 0;
    direction: rtl;
    margin-top: 75px;
    z-index: 999;
    border-radius: 200px 0;
    background-color: #000c;
    border-bottom: #7ba810b3 4px solid;
    border-right: #87b40cb3 2px solid;
    background-image: url("../image/2.png");
    background-size: 100px 110px;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 350px;
    height: 500px;
}

.contact-style-one {
    padding-top: 120px;
}

.panelcentercontact {
    width: 100%;
    height: 100px;
    margin: auto;
    clear: both;
    background-color: transparent;
}

.imges1 {
    width: 45%;
    height: 450px;
    margin: auto;
    float: right;
    margin-right: 50px;
}

    .imges1 img {
        width: 100%;
        height: 450px;
    }

.before-form {
    float: right;
    width: 30%;
    height: auto;
    margin-top: 60px;
    margin-right: 250px;
}

.font-aval {
    /* background-color: darkcyan; */
    width: 100%;
    height: auto;
    float: left;
    margin-left: 1%;
}

.phone-number {
    display: none;
    border-radius: 20px 0px 20px 0px;
    height: auto;
    float: right;
    margin-top: 45px;
    margin-right: 5px;
}

.adress {
    display: none;
    border-radius: 20px 0px 20px 0px;
    width: 80px;
    height: auto;
    float: right;
    margin-top: 45px;
    margin-right: 5px;
}

.email {
    display: none;
    border-radius: 20px 0px 20px 0px;
    width: 80px;
    height: auto;
    float: right;
    margin-top: 45px;
    margin-right: 5px;
}

.text-contact {
    float: right;
    height: auto;
    text-align: right;
    text-align: right;
    margin-top: 30px;
    margin-right: 5px;
    font-size: 16px;
}

.contact-form {
    border-radius: 20px 0px 20px 0px;
    width: 50%;
    margin: auto;
    margin-top: 60px;
    margin-bottom: 180px;
    padding-top: 50px;
    margin-left: 300px;
}

.name-forminput1 {
    width: 300px;
    height: 50px;
    text-align: center;
    border-radius: 40px 0;
    font-size: 18px;
    margin-right: 10px;
    font-size: 14px;
    float: right;
    border: 1px solid lightgray;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
}

.name-forminput2 {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 40px 0;
    width: 610px;
    height: 50px;
    float: right;
    text-align: center;
    padding: 5px 55px;
    margin-top: 0;
    clear: both;
    color: rgb(0, 0, 0);
    font-size: 18px;
    margin-right: 10px;
    font-size: 14px;
    border: 1px solid lightgray;
    margin-top: 10px;
}

.comment {
    width: 610px;
    height: 150px;
    float: right;
    text-align: center;
    padding: 5px 55px;
    margin-top: 0;
    clear: both;
    font-size: 18px;
    position: relative;
    margin-right: 10px;
    border: 1px solid lightgray;
    margin-top: 10px;
    border-radius: 40px 0;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
}

.paneladress {
    width: 350px;
    height: auto;
    margin: auto;
    line-height: 2;
    padding: 30px;
    padding-top: 30px;
    direction: rtl;
    padding-top: 30px;
    -webkit-transition: all ease-in-out 150ms;
    transition: all ease-in-out 150ms;
    cursor: pointer;
}

.paneladress2 {
    width: 350px;
    height: auto;
    margin: auto;
    line-height: 2;
    padding: 30px;
    padding-top: 30px;
    direction: rtl;
    padding-top: 40px;
    -webkit-transition: all ease-in-out 150ms;
    transition: all ease-in-out 150ms;
    cursor: pointer;
}

    .paneladress2 a {
        color: #000;
        margin-top: -10px;
    }

        .paneladress2 a:hover {
            color: green;
        }

.iconadres {
    width: 50px;
    height: 50px;
    float: right;
    background-color: transparent;
    margin: 10px;
    margin: auto;
    margin-right: auto;
    margin-left: auto;
    margin-right: 10px;
    margin-left: 20px;
}

.name-forminput1:hover {
    border: 2px solid black;
    box-shadow: 2px 2px 2px gray;
}

.name-forminput2:hover {
    border: 2px solid black;
    box-shadow: 2px 2px 2px gray;
}

.comment:hover {
    border: 2px solid black;
    box-shadow: 2px 2px 2px gray;
}

.button-form {
    background-color: rgb(65, 65, 65);
    padding: 5px 55px;
    margin-top: 0;
    clear: both;
    color: #fff;
    border: 1px solid black;
    font-size: 18px;
    z-index: 999;
    position: relative;
    margin-right: 20px;
    float: right;
    margin-top: 30px;
    transition: 1s;
}

    .button-form:hover {
        opacity: 0.5;
    }

.js-is-hidden {
    display: none;
}

.js-is-show {
    display: block;
}

.menu.menu.mobile {
    float: right;
    width: 100%;
    padding: 0px;
    overflow: scroll;
}


/* .submenurespansiv li{
  width: 100%;

  height: 30px;
  transition: 3s;
  margin-top: 30px;
  padding-top: 10px
} */
.menu li {
    position: relative;
}

    .menu li ul li {
        width: 100%;
        height: 30px;
        transition: 3s;
        margin-bottom: 30px;
    }

.submenu {
    position: absolute;
    margin-top: 0;
    transition-duration: 2s;
    width: 200px;
    right: 0;
    transform: translateY( -120% );
}

@keyframes slideInUp {
    0% {
        display: none;
    }

    100% {
        display: block;
    }
}

.menu li:hover > ul {
    transform: translateY(5%);
    animation: slideInUp 1s ease-in-out 1;
    animation-fill-mode: forwards;
}

.submenu li a {
    max-width: 150px;
    float: right;
    width: 100%;
}


.lirespansivesubmenu:hover > .submenurespansiv {
    display: block;
}

.submenurespansiv li a {
    max-width: 150px;
    background-color: black;
}

    .submenurespansiv li a:hover {
        background-color: rgb(49, 49, 49);
    }

.readmorepanel {
    width: 20%;
    height: 50px;
    margin: auto;
    margin-top: auto;
    margin-left: auto;
    background-color: transparent;
    float: left;
    margin-left: 110px;
    z-index: 999;
    position: absolute;
    margin-top: 100px;
    color: black;
    transition: 1s;
}

    .readmorepanel:hover {
        background-color: black;
        color: white;
    }

.textreadmore {
    width: 40%;
    float: right;
    background-color: transparent;
    height: 30px;
    margin: auto;
    margin-top: 10px;
    border: 1px solid transparent;
    border-right-color: transparent;
    border-right-style: solid;
    border-right-width: 1px;
    border-right: 2px solid black;
    transition: 1s;
}

    .textreadmore:hover {
        border-right: 2px solid rgb(255, 255, 255);
    }

.iconreadmore {
    width: 40%;
    float: right;
    background-color: transparent;
    height: 80px;
    margin: 10px;
    margin-right: 10px;
}

/* ................................................................... */
.readmorepanel1 {
    width: 20%;
    height: 50px;
    margin: auto;
    margin-top: auto;
    margin-left: auto;
    background-color: transparent;
    float: left;
    margin-left: 110px;
    z-index: 999;
    position: absolute;
    margin-top: 100px;
    color: black;
    transition: 1s;
    display: block;
}

    .readmorepanel1:hover {
        background-color: black;
        color: white;
    }

.textreadmore1 {
    width: 40%;
    float: right;
    background-color: transparent;
    height: 30px;
    margin: auto;
    margin-top: 10px;
    border: 1px solid transparent;
    border-right-color: transparent;
    border-right-style: solid;
    border-right-width: 1px;
    border-right: 2px solid black;
    transition: 1s;
}

    .textreadmore1:hover {
        border-right: 2px solid rgb(255, 255, 255);
    }

.iconreadmore1 {
    width: 40%;
    float: right;
    background-color: transparent;
    height: 80px;
    margin: 10px;
    margin-right: 10px;
}

/* ................................................................... */
.readmorepanelrespan {
    width: 50%;
    height: 50px;
    margin: auto;
    background-color: transparent;
    color: black;
    display: none;
    transition: 1s;
}

    .readmorepanelrespan:hover {
        background-color: black;
        color: white;
    }

.textreadmorerespan {
    width: 30%;
    float: left;
    background-color: transparent;
    height: 30px;
    margin: auto;
    margin-top: 10px;
    border: 1px solid transparent;
    border-right-color: transparent;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: transparent;
    border-right-style: solid;
    border-right-width: 1px;
    border-right: 2px solid black;
    transition: 1s;
}

    .textreadmorerespan:hover {
        border-right: 2px solid rgb(255, 255, 255);
    }

.iconreadmorerespan {
    width: 50%;
    float: right;
    background-color: transparent;
    height: 80px;
    margin: 10px;
    margin-right: 10px;
    margin-right: 10px;
}

/* ................................................................... */
.readmorepanelrespan2 {
    width: 50%;
    height: 50px;
    margin: auto;
    background-color: transparent;
    color: black;
    display: none;
    transition: 1s;
}

    .readmorepanelrespan2:hover {
        background-color: black;
        color: white;
    }

.textreadmorerespan2 {
    width: 30%;
    float: left;
    background-color: transparent;
    height: 30px;
    margin: auto;
    margin-top: 10px;
    border: 1px solid transparent;
    border-right-color: transparent;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: transparent;
    border-right-style: solid;
    border-right-width: 1px;
    border-right: 2px solid black;
    transition: 1s;
}

    .textreadmorerespan2:hover {
        border-right: 2px solid rgb(255, 255, 255);
    }

.iconreadmorerespan2 {
    width: 50%;
    float: right;
    background-color: transparent;
    height: 80px;
    margin: 10px;
    margin-right: 10px;
    margin-right: 10px;
}

/* ------------------------------------testmenu----------------------------- */
nav {
    display: block;
}

#mainnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mainnav > ul > li {
    display: inline-block;
    padding: 0 6px;
}

#mainnav ul li {
    position: relative;
}

.header #mainnav > ul > li > a {
    line-height: 100px;
}

#mainnav > ul > li.home > a {
    color: #18ba60;
}

#mainnav > ul > li > a {
    position: relative;
    display: block;
    font-family: "Poppins", sans-serif;
    /* text-transform: uppercase; */
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    margin: 0 0px;
    font-weight: 600;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#mainnav ul.submenu {
    position: absolute;
    left: 0;
    top: 150%;
    width: 300px;
    text-align: left;
    background-color: #222222;
    z-index: 9999;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    #mainnav ul.submenu li:first-child {
        border-top: none;
    }

    #mainnav ul.submenu > li {
        border-top: 1px solid #333333;
    }

#mainnav ul li ul li {
    margin-left: 0;
}

#mainnav ul.submenu > li > a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0 0 0 20px;
    line-height: 45px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#mainnav ul li:hover > ul.submenu {
    top: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    visibility: visible;
}

/* ------------------------------------testmenu----------------------------- */

/* .menu ul li a:hover{
  display: block;
} */

.slider1 {
    margin-top: 50%;
    margin-left: 10%;
}

.content1 {
    background-image: url("../images/ry112.svg");
    background-image: url("/Content/Images/ry2-01.svg");
    min-width: 500px;
    background-repeat: no-repeat;
    min-height: 200px;
    margin-left: -10px;
    background-size: 100% 100%;
    width: 100%;
    margin-top: -10%;
}

.contentp {
    background-image: url("../Pimage/bg3.jpg");
    width: 100%;
    min-height: 500px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    clear: both;
}

.contenta {
    width: 100%;
    height: auto;
    margin: auto;
    background-color: transparent;
}

.copyright {
    width: 100%;
    text-align: center;
    clear: both;
    padding-top: 10px;
    color: #eaedeb;
}

.callinfo {
    background-color: #171717f2;
    border-radius: 180px;
    color: #fff;
    float: right;
    direction: rtl;
    bottom: 0px;
    top: 10px;
    margin-top: 180px;
    padding-right: 20px;
    padding-bottom: 20px;
    border-top: solid;
    border-bottom: solid;
    padding-left: 50px;
    width: 350px;
    text-align: center;
    direction: ltr;
    letter-spacing: 4px;
}

    .callinfo.s {
        background-color: transparent;
        border-radius: 0px;
        float: left;
        direction: rtl;
        bottom: 0px;
        top: 10px;
        margin-top: 180px;
        padding-right: 20px;
        padding-bottom: 20px;
        border-top: none;
        border-bottom: none;
        padding-left: 0px;
        width: max-content;
    }

.footer {
    clear: both;
    background-image: url("../image/baca.png");
    width: 100%;
    min-height: 500px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 15px;
    /* overflow: hidden; */
    /* background-color: rgba(51, 51, 51, 0.007); */
    width: 50%;
    top: 0;
    float: right;
    font-size: 16px;
    font-weight: 100;
    font-family: tahoma;
    /* width:700px; */
}

li {
    float: right;
}

    li:hover {
    }

    li a {
        display: block;
        color: white;
        border-radius: 40px 0;
        text-align: center;
        /* padding: 16px 18px; */
        background-color: rgba(0, 0, 0, 0.43);
        border-top: #222322b3 4px solid;
        border-left: #434443b3 2px solid;
        font-size: 13px;
        line-height: 45px;
        text-shadow: 0 0 1px #fff, 0 0 5px #000;
        text-decoration: none;
        transition: all 0.4s ease-in-out;
    }

    li img:hover {
        animation: fadeIn 1s linear 1;
    }

    li a:hover:not(.active) {
        /*animation: fadeIn 1s linear 1;*/
        background-color: rgba(0, 0, 0, 0.2);
        border-top: #7ba810b3 4px solid;
        border-left: #87b40cb3 2px solid;
    }

.active {
    /* background-color: rgb(114, 114, 114);
  border-top: #7ba810 4px solid;

  border-left: #87b40c 2px solid; */
    background-color: rgba(0, 0, 0, 0.2);
    border-top: #7ba810b3 4px solid;
    border-left: #87b40cb3 2px solid;
}

.searchtext {
    padding: 6px;
    /* margin-top: 8px; */
    font-size: 17px;
    border: none;
    margin-right: 40%;
    float: right;
    text-align: right;
    margin-bottom: 30px;
    border-top: #333 4px solid;
    border-left: #514f4c 2px solid;
    border-right: #a59e9e 2px solid;
    border-bottom: #818181 2px solid;
    border-radius: 0px 0px 20px 0;
}

.search-container button {
    float: right;
    padding: 6px 10px;
    /* margin-top: -3px; */
    /* margin-right: 8%; */
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
    border-top: #333 4px solid;
    border-left: #514f4c 2px solid;
    border-right: #a59e9e 2px solid;
    border-bottom: #818181 2px solid;
    border-radius: 20px 0 0px 0;
    height: 44px;
    /* margin-right: -10px; */
}

.c1 {
    margin-top: 50px;
    max-width: 300px;
    float: right;
    margin-right: 30px;
}

.c2 {
    margin-top: 200px;
    max-width: 300px;
    float: right;
}

.c3 {
    margin-top: 350px;
    max-width: 300px;
    float: right;
}

/* animation load */
#pageloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; /* center children content horizontally */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; /* center children content vertically */
    z-index: 10000;
    background: white;
}

.spinner {
    width: 70px;
    text-align: center;
    opacity: 1;
    transition: opacity 0.4s;
}

    .spinner > div {
        width: 18px;
        height: 18px;
        background-color: #333;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.title1 {
    color: #000;
    animation: r2 0.5s linear 1;
    font-size: 16px;
    text-align: justify;
    max-width: 250px;
    margin-left: 30%;
    position: absolute;
    margin-top: 450px;
    z-index: 1;
}

.tbox1r {
    display: none;
    padding-top: 15px;
}

.rslides1 {
    width: 500px;
    float: right;
}

@font-face {
    font-family: Vazir;
    src: url("../Fonts/Vazir/Vazir.eot");
    src: url("../Fonts/Vazir/Vazir.eot?#iefix") format("Vazir-opentype"), url("../Fonts/Vazir/Vazir.woff") format("woff"), url("../Fonts/Vazir/Vazir.woff2") format("woff2"), url("../Fonts/Vazir/Vazir.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/*search*/
#wrap {
    display: inline-block;
    position: relative;
    height: 60px;
    padding: 0;
    position: relative;
    max-width: 100px;
    direction: rtl;
}

body {
    margin: 0;
    width: 100%;
    overflow-x: hidden;
}

/*search*/
@media screen and (min-width: 701px) and (max-width: 900px) {
    .content {
        margin-top: -20%;
    }

    .v5 {
        display: none;
    }
}

@media screen and (min-width: 1500px) {
    .content {
        margin-top: 200px;
    }
}

@media screen and (min-width: 701px) {
    .tb {
        display: none;
    }

    .bg4 {
        background-image: url("../images/170.jpg");
        height: 160px;
        width: 100%;
        background-size: cover;
    }
}

@media screen and (min-width: 701px) and (max-width: 1300px) {
    .bg4 {
        background-position-y: 0px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    li a {
        min-width: 60px;
        font-size: 13px;
        min-height: 50px;
    }

    ul {
        width: 70%;
    }

    .copyright {
        width: 100%;
        padding-top: 50px;
    }

    .before-form {
        height: 220px;
        margin-right: auto;
        width: 100%;
        margin-top: auto;
    }

    .contact-form {
        margin-left: -75px;
        width: 100%;
        margin-top: auto;
        margin-bottom: 50px;
    }

    .font-aval {
        margin-top: 0px;
        width: 100%;
        text-align: center;
    }

    .phone-number {
        margin-top: 6px;
        float: initial;
        margin-left: 60%;
    }

    .email {
        margin-top: 6px;
        margin-left: 69%;
    }

    .adress {
        margin-top: 6px;
        margin-left: 69%;
    }

    .text-contact {
        margin-top: 0px;
        float: none;
        line-height: 2;
        text-align: center;
    }

        .text-contact span,
        h4 {
            margin-right: 20px;
        }

    .name-form {
        /* margin-left: 25%; */
        float: right;
        margin-bottom: 5px;
    }

    .name-form1 {
        /* margin-left: 25%; */
        float: right;
        margin-bottom: 5px;
    }

    .comment {
        /* margin-left: 5%; */
        float: right;
        margin-bottom: 10px;
    }

    .button-form {
        margin-left: 38%;
    }
}

@media screen and (min-width: 1300px) {
    .bg4 {
        background-position-y: 0px;
    }

    .more {
        display: none;
    }

    .backicon {
        display: none;
    }
}

@media screen and (max-width: 666px) {
    li {
        float: none;
    }
}

@media screen and (max-width: 550px) {
    .rb {
        width: 80px;
        height: 80px;
    }

        .rb a {
            font-size: 32px;
        }
}

@media screen and (min-width: 751px) {
    .rslides {
        height: 500px;
    }
}

@media screen and (max-width: 750px) {
    .rslides {
        height: auto;
    }
}

@media screen and (max-width: 1190px) {
    .v5 {
        display: none;
    }
}

@media screen and (min-width: 1601px) {
    .v3 {
        margin-top: 200px;
        margin-left: -150px;
    }

    ul {
        overflow: visible;
    }
}

@media screen and (min-width: 1491px) and (max-width: 1600px) {
    .v3 {
        margin-top: 200px;
        margin-left: -60px;
    }

    ul {
        overflow: visible;
    }
}

@media screen and (min-width: 1251px) and (max-width: 1490px) {
    .v3 {
        margin-top: 100px;
        margin-left: -10px;
    }
}

@media screen and (min-width: 901px) and (max-width: 1250px) {
    .rslides1 {
        margin-right: -70px;
    }

    .v3 {
        margin-top: 114px;
        margin-left: 40px;
    }

    .container {
        height: 300px;
        width: 300px;
        margin-top: -5px;
        margin-right: 382px;
    }
}

@media screen and (min-width: 700px) and (max-width: 900px) {
    .v3 {
        width: 250px;
        margin-left: 180px;
        margin-top: 140px;
    }

    .container {
        height: 250px;
        width: 250px;
        margin-top: 70px;
    }

    .readmorepanel1,
    .readmorepanel {
        display: none;
    }

    .readmorepanelrespan {
        display: block;
        margin-top: -300px;
        margin-right: 400px;
        width: 40%;
    }

    .iconreadmorerespan {
        margin-top: -600px;
        width: 30%;
    }

    .textreadmorerespan {
        margin-top: -600px;
        width: 50%;
    }

    .readmorepanelrespan2 {
        display: block;
        margin-top: 700px;
        margin-right: 400px;
        width: 40%;
    }

    .textreadmorerespan2 {
        width: 40%;
    }
}

@media screen and (min-width: 650px) and (max-width: 700px) {
    .rslides {
        margin-top: 90px;
    }
}

@media screen and (max-width: 650px) {
    .rslides {
        margin-top: 90px;
    }
}

@media screen and (max-width: 400px) {
    .container {
        width: 270px;
        height: 270px;
    }
}

@media screen and (max-width: 700px) {
    .containerrespan {
        display: block;
    }

    .searchpanel {
        width: 90%;
        margin: auto;
        margin-bottom: 100px;
        margin-top: 20px;
        height: 60px;
    }

    #wrap222 {
        margin: auto 20px;
    }

        #wrap222 form input[type="text"] {
            font-size: 14px;
            text-align: right;
        }

    .menu {
        display: none;
    }

    .tb i {
        line-height: 75px;
    }

    .containeritem img {
        height: 150px;
    }

    .containeritem {
        width: 150px;
    }

    .mooneh-maghale {
        width: 50%;
        /* height: 500px; */
        float: none;
        margin-left: 25%;
        margin-top: 30px;
        padding-left: 0px;
    }

    .matn-maghale {
        margin-top: 0px;
    }

    .cap1 h3 {
        margin-right: 10px;
    }

    .tb {
        width: 100%;
        text-align: right;
        position: fixed;
        display: block;
        z-index: 1000;
        background-image: url("../image/menubg.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position-x: right;
        width: 65px;
        height: 75px;
        float: right;
        right: 0px;
        top: 0px;
    }

        .tb a:hover {
            color: #a2d612;
        }

        .tb a {
            color: #86b309;
            font-size: 20px;
            clear: both;
        }

    .bg4 {
        background-image: url("../images/169.jpg");
        height: 90px;
        width: 100%;
        background-size: cover;
    }

    body {
        overflow-x: hidden !important;
        overflow-x: hidden;
    }

    .title1 {
        left: 0;
        width: 100%;
        max-width: 90%;
        margin-left: 0;
        margin-top: 300px;
        font-size: 16px;
        display: none;
    }

    .container {
        margin: auto;
        float: none;
        clear: both;
        width: 200px;
        height: 200px;
        left: 10%;
    }

    .logo {
        top: 0;
        left: 0;
        position: absolute;
        width: 100px;
        height: 90px;
    }

    .containeritem {
        clear: both;
        position: relative;
        width: 150px;
        float: none;
        max-width: 100%;
        padding: 0px;
        height: auto;
        margin: auto;
        margin-top: 10px;
    }

    .rslides1 {
        display: none;
    }

    .v4 {
        display: none;
    }

    .content {
        min-height: auto;
        background-image: none;
    }

    .rslides rslides2 {
        height: 400px;
    }

    .content {
        clear: both;
    }

    .rslides img {
        height: 285px;
    }

    .v3 {
        float: right;
        margin: auto;
        border-radius: 50%;
    }

    .tbox1r {
        display: block;
        clear: both;
        width: 90%;
        text-align: justify;
        direction: rtl;
        color: #000;
        border-radius: 10px 0;
        padding-bottom: 5px;
        font-family: "Vazir";
        font-size: 14px;
        margin: auto;
    }

    .hj {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 346.4px 200px 0 200px;
        border-color: #007bff transparent transparent transparent;
    }
}

.bg4 {
    position: absolute;
    background-repeat: no-repeat;
    z-index: -1;
}

.imgtitle2 {
    position: absolute;
    z-index: 1;
}

@media (min-width: 700px) and (max-width: 750px) {
    .v3 {
        margin-left: 40%;
    }

    .rslides1 {
        margin-right: -165px;
    }

    .txt {
        font-size: 8px;
        max-width: 189px;
        height: 0px;
    }
}

@media (min-width: 750px) and (max-width: 900px) {
    .v3 {
        margin-left: 35%;
        /* margin-top: 15%; */
    }

    .content1 {
        margin-top: 1px;
        margin-bottom: 540px;
    }

    .containeritem {
        clear: both;
        position: relative;
        width: 200px;
        float: none;
        max-width: 100%;
        padding: 0px;
        height: auto;
        margin: auto;
        margin-top: 10px;
        margin-left: 0px;
    }

        .containeritem img {
            height: 150px;
        }

    .im {
        overflow: hidden;
        display: none;
    }

    .txt {
        font-size: 9px;
        max-width: 270;
        height: 91px;
    }
}

@media (min-width: 375px) and (max-width: 750px) {
    .before-form {
        /* margin-left: 10%; */
        height: auto;
        width: 100%;
    }

    .before-form {
        float: none;
        margin-top: auto;
    }

    .contact-form {
        width: 100%;
        height: auto;
        padding: 0;
        margin-bottom: auto;
        margin-left: auto;
    }

    .name-forminput1 {
        margin-right: 40px;
    }

    .name-forminput2 {
        margin-right: 40px;
        width: 300px;
    }

    .comment {
        margin-right: 40px;
        width: 300px;
    }

    .button-form {
        margin-top: 10px;
        margin-right: 40px;
    }

    .font-aval {
        /* float: none; */
        /* float: right; */
        height: auto;
        margin-top: 4px;
        display: table-cell;
        margin-bottom: 10px;
    }

    .email,
    .phone-number,
    .adress {
        margin: auto;
        margin-top: 5px;
        margin-bottom: 0px;
        /* width: 60px;
    height: 60px; */
    }

    .phone-number {
        margin-right: 30px;
    }

    .text-contact {
        margin: auto;
        margin-top: 5px;
        text-align: center;
        float: none;
    }

        .text-contact h4 {
            margin: auto;
            margin-top: -28px;
        }

    .button-form {
        padding: 5px 15px;
        font-size: 12px;
    }
}

@media (min-width: 750px) and (max-width: 800px) {
    .v3 {
        margin-left: 40%;
    }

    .mores {
        /* display: none; */
        float: right;
    }
}

@media (min-width: 900px) and (max-width: 1000px) {
    .v3 {
        margin-left: 0%;
        width: 400px;
    }
}

@media (min-width: 1000px) and (max-width: 1200px) {
    .v3 {
        margin-left: -40px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
        direction: rtl;
    }
}

@media (min-width: 1200px) and (max-width: 1300px) {
    .v3 {
        margin-left: -40px;
    }

    .more {
        display: none;
    }
}

@media (min-width: 1300px) and (max-width: 1400px) {
    .v3 {
        margin-left: -50px;
    }
}

@media (min-width: 1400px) and (max-width: 1500px) {
    .v3 {
        margin-left: -90px;
    }
}

@media (min-width: 1000px) and (max-width: 1100px) {
    .v3 {
        margin-left: -50px;
        margin-top: 230px;
    }
}

@media (min-width: 1500px) {
    .v3 {
        margin-left: -100px;
    }
}

@media (min-width: 1000px) and (max-width: 1092px) {
    .imgtitle2 {
        margin-left: 60%;
        margin-top: 420px;
    }
}

@media (min-width: 900px) and (max-width: 1099px) {
    .imgtitle2 {
        margin-left: 70%;
        margin-top: 550px;
    }
}

@media (min-width: 700px) and (max-width: 800px) {
    .imgtitle2 {
        margin-left: 60%;
        margin-top: 500px;
    }
}

@media (min-width: 800px) and (max-width: 900px) {
    .imgtitle2 {
        margin-left: 60%;
        margin-top: 400px;
    }
}

@media (min-width: 900px) and (max-width: 1000px) {
    .imgtitle2 {
        margin-left: 65%;
        margin-top: 450px;
    }
}

@media (min-width: 860px) and (max-width: 900px) {
    .imgtitle2 {
        margin-left: 60%;
        margin-top: 385px;
    }
}

@media (min-width: 1100px) and (max-width: 1300px) {
    .imgtitle2 {
        margin-left: 65%;
        margin-top: 470px;
    }
}

@media (min-width: 1350px) and (max-width: 1498px) {
    .imgtitle2 {
        margin-left: 65%;
        margin-top: 310px;
    }
}

@media (min-width: 1300px) and (max-width: 1400px) {
    .imgtitle2 {
        margin-left: 65%;
        margin-top: 380px;
    }
}

@media (min-width: 1130px) and (max-width: 1300px) {
    .imgtitle2 {
        margin-left: 65%;
        margin-top: 400px;
    }
}

@media (min-width: 1500px) {
    .imgtitle2 {
        margin-left: 65%;
        margin-top: 410px;
    }
}

@media (max-width: 700px) {
    body {
        overflow-x: hidden;
        background-image: url("../image/bac3a.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .tab {
        margin: 12px 13px;
        width: 120px;
        float: right;
        padding: 10px 15px;
    }

    /* ARTICLE */
    .backimagesarticlefa {
        height: 650px;
        background-size: 100% 550px;
    }

    .textimagearticlefa,
    .textimagedetails,
    .textimagescontact {
        margin: 180px;
        margin-right: 130px;
        width: 100%;
        margin-right: 10px;
    }

        .textimagescontact a {
            text-decoration: none;
            color: rgb(255, 255, 255);
            font-size: 35px;
            /*border: 3px solid white;*/
            /*padding: 20px;
padding-top: 20px;
padding-bottom: 20px;
border-left-style: none;
border-right-style: none;*/
            /*margin-right: 10px;*/
        }

        .textimagescontact h2 {
            margin-top: 50px;
            margin-right: 10px;
        }

    .paneladress {
        width: 300px;
        font-size: 14px;
        padding-left: 0;
    }

    .iconadres {
        width: 30px;
    }

    .textimagearticlefa a,
    .textimagearticlefa,
    .textimagescontact a {
        font-size: 20px;
    }

    .textimagedetails a {
        font-size: 20px;
    }

    .backimagesporducts {
        height: 650px;
        background-image: 100% 550px;
    }

    .backimagesarticle {
        width: 90%;
        height: 300px;
        float: none;
        background-size: 100% 300px;
        margin-right: auto;
    }

    li a {
        margin: auto;
        padding: 5px 18px;
    }

    ul {
        cursor: pointer;
        animation: fadeIn 0.5s linear 1;
        font-size: 14px;
    }

    .fa-3x {
        font-size: 2em;
    }

    .cap1 {
        margin-top: 50px;
        margin-right: 8px;
        margin-left: 0px;
        margin-bottom: 50px;
    }

    .searchtext {
        margin-right: 50px;
    }

    .callinfo {
        text-align: center;
        width: 90%;
        padding-bottom: 10px;
        padding-left: 14px;
        font-size: small;
        margin-top: 80px;
    }

    .imgtitle2 {
        display: none;
    }

    .content {
        background-image: url();
        background-size: contain;
        background-position-x: 30%;
    }

    .container1 {
        width: 100%;
        height: 300px;
        margin: auto;
        margin-top: 30px;
    }

    .search {
        margin-right: 20px;
    }

        .search.open {
            width: 320px;
        }

    .container2 {
        width: 100%;
        height: 300px;
        margin: auto;
    }

    .footer {
        min-height: 100px;
        background-image: url("../image/baca700.png");
    }

    .backimagescontact {
        height: 350px;
        background-size: 100% 700px;
    }

    .backimagesabout {
        height: 550px;
        background-size: 100% 550px;
    }

    .textimagesabout h2 {
        color: white;
    }

    .textimagesabout {
        width: 60%;
        margin-right: 10px;
        margin-top: 170px;
    }

        .textimagesabout h2 {
            font-size: 20px;
            padding: 20px;
        }

            .textimagesabout h2 span {
                font-size: 20px;
            }

    /* ............details............................... */
    .backimagesdetails {
        height: 650px;
        background-size: 100% 550px;
    }

    .backimagesdetailsprojectpage1 {
        height: 650px;
        background-size: 100% 550px;
    }

    .panelcentercontact {
    }

    .backimagesproductdetails {
        width: 90%;
        height: 300px;
        float: none;
        background-size: 100% 300px;
        margin-right: auto;
    }

    .backtextdetais {
        width: 95%;
        margin: auto;
        height: auto;
    }

    .tozihattitle {
        font-size: 18px;
    }

    .icondetails i {
        padding-right: 15px;
    }

    .backproductdetails {
        height: auto;
        min-height: 250px;
    }

    /* ............project............................. */
    .backimagesprojects {
        height: 550px;
        background-size: 100% 550px;
    }

    .alllistproject {
        width: 100%;
        height: 180px;
        border-bottom: none;
    }

    .subjectproject {
        width: 100px;
        margin: auto;
        padding: auto;
    }

        .subjectproject:hover {
            border-bottom: 1px solid black;
        }
}

@media (max-width: 900px) {
    .more {
        /* display: none; */
    }
}

@media (min-width: 1300px) {
    .more {
        float: right;
        font-size: 16px;
        margin-right: 40%;
        display: none;
    }

    .more {
        display: none;
    }
}

@media screen and (min-width: 490px) and (max-width: 700px) {
    .content1 {
        min-height: 220px;
    }

    .containeritem {
        clear: none;
        position: relative;
        width: 150px;
        float: right;
        max-width: 100%;
        padding: 0px;
        height: auto;
        margin: 5px;
        margin-top: 5px;
        margin-top: 10px;
    }
}

.callinfo a {
    text-decoration: none;
    color: #eaedeb;
}

.callinfo {
    position: sticky;
}

    .callinfo.second {
        float: inline-end;
        display: table-column-group;
        clear: both;
        z-index: 2;
    }

.backicon {
    width: 30%;
    height: 50px;
    background-color: #a2d612;
}

.more {
    float: none;
    font-size: 16px;
}

    .more:hover {
        animation: fadeIn 1s linear 1;
    }

@media (min-width: 400px) and (max-width: 900px) {
    .footer {
        background-size: 100% 100%;
    }

    .backimagescontact {
        height: 300px;
        background-size: 100% 700px;
    }

    .backproductdetails {
        width: 100%;
        height: 800px;
    }

    .backimagesproductdetails {
        width: 80%;
        height: 300px;
        background-size: 100% 300px;
        float: none;
        margin-right: auto;
    }

    .backtextdetais {
        height: auto;
    }
}

.tbox1r {
    background-image: url("");
    background-size: cover;
}

.ls {
    width: 100px;
    border: none;
    font-size: 10px;
    background-color: transparent;
}

    .ls a:hover {
        width: 100px;
        border: none;
        font-size: 10px;
        background-color: transparent;
    }

#slider4 {
    padding: 0;
    overflow: visible;
}

.txt {
    max-width: 439px;
    text-align: justify;
    direction: rtl;
    padding-left: 23px;
    font-family: vazir;
    line-height: 2;
    font-size: 16px;
}

@media screen and (min-width: 1200px) and (max-width: 1300px) {
    .txt {
        margin-top: -325px;
    }
}

@media screen and (min-width: 1300px) and (max-width: 1500px) {
    .txt {
        margin-top: -248px;
    }
}

@media screen and (min-width: 1171px) {
    .container {
        margin-top: 50px;
        margin-right: 35%;
    }

    /* .txt{
  margin-top:-248px;
} */
}

@media screen and (min-width: 1500px) {
    .container {
        margin-top: 30px;
        margin-right: 35%;
    }

    .txt {
        margin-top: -50px;
    }
}

@media screen and (min-width: 700px) {
    .footer {
        margin-top: -154px;
    }
}

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

@media screen and (min-width: 900px) and (max-width: 1200px) {
    .txt {
        margin-top: -300px;
        max-width: 310px;
    }
}

@media screen and(min-width: 700px) and (max-width: 900px) {
    .txt {
        font-size: 9px;
        margin-top: -31px;
        max-width: 250px;
    }
}

.mores {
    background-color: rgba(0, 0, 0, 0.09);
    border-top: #222322b3 4px solid;
    border-left: #434443b3 2px solid;
    padding: 5px 55px;
    margin-top: 0;
    clear: both;
    color: #fff;
    border-radius: 20px 0px 20px 0px;
    font-size: 18px;
    z-index: 999;
    position: relative;
    float: right;
}

.backasliteamwork {
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: transparent;
    clear: both;
    padding-left: 80px;
    max-height: 500px;
}

.containerteam {
    position: relative;
    width: 20%;
    height: 300px;
    margin-right: 50px;
    float: left;
    margin-top: 20px;
}

.imageteamwork {
    display: block;
    width: 100%;
    height: 300px;
}

.textteam {
    width: 100%;
    height: 80px;
    background-color: rgba(100, 100, 100, 0.561);
    margin-top: -85px;
    z-index: 999;
    position: absolute;
    text-align: center;
    color: rgb(231, 231, 231);
}

    .textteam h3 {
        text-align: center;
        color: rgb(233, 233, 233);
        /*padding-right: 10px;*/
        font-size: 15px;
    }

.overlayteamwork {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.65);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: 0.5s ease;
    z-index: 999;
}

.textteameork a {
    font-size: 19px;
    color: white;
}

.containerteam:hover .overlayteamwork {
    bottom: 0;
    height: 100%;
}

.textteameork {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.teamtext {
    width: 40%;
    height: 300px;
    margin: auto;
    margin-top: auto;
    margin-right: auto;
    text-align: right;
    padding: 10px;
    font-family: vazir;
    background-color: transparent;
    float: right;
    margin-top: 20px;
    margin-right: 200px;
    line-height: 2;
}

    .teamtext a {
        text-decoration: none;
        color: black;
        float: right;
    }

.imageteam {
    width: 30%;
    height: 400px;
    margin: auto;
    float: left;
    margin-left: 100px;
}

.matnmores {
    line-height: 2;
    font: bold;
    padding: 10px 125px;
    clear: both;
    color: black;
    border-radius: 20px 0px 20px 0px;
    font-size: 18px;
    z-index: 999;
    position: relative;
    float: right;
    margin-right: 20px;
    margin-left: 20px;
    width: 70%;
    text-align: right;
}

.backasliimgtext {
    width: 100%;
    height: 300px;
    margin: auto;
    background-color: transparent;
    clear: both;
}

.backimagesabout2 {
    width: 80%;
    height: auto;
    margin: auto;
    box-shadow: none;
}

    .backimagesabout2 img {
        width: 100%;
        height: 500px;
    }

.textimagabout {
    width: 50%;
    height: 300px;
    margin: auto;
    margin-right: auto;
    margin-right: auto;
    background-color: transparent;
    float: right;
    text-align: right;
    font-size: 24px;
    margin-right: 160px;
    font: bold;
    text-shadow: 2px 2px #cecece;
}

.matnmores img {
    width: 30%;
    height: 300px;
    /* margin-left: 20%; */
    border-radius: 50%;
    opacity: 0.7;
    display: none;
}

.mores:hover {
    animation: fadeIn 1s linear 1;
    background-color: rgba(0, 0, 0, 0.2);
    border-top: #7ba810b3 4px solid;
    border-left: #87b40cb3 2px solid;
}

.imgtitle2:hover {
    animation: fadeIn 1s linear 1;
}

.txtd {
    font-size: 14px;
    font-family: vazir;
    /* direction: rtl; */
    padding: 10px;
    text-align: left;
    /*margin-top: 265px;*/
    margin-top: 245px;
    color: white;
    clear: left;
    position: absolute;
    width: 100%;
    max-width: 500px;
    direction: rtl;
    text-align: justify;
}

.tbox1r img {
    right: 0;
    margin: auto;
    clear: both;
    border-radius: 100%;
    width: 250px;
    height: 250px;
    margin: auto;
    float: none;
    clear: both;
}

.tbox1r {
    text-align: center;
}

/* font face................................................................ */
@font-face {
    font-family: Vazir;
    src: url("../Vazir/Vazir.eot");
    src: url("../Vazir/Vazir.ttf") format("Vazir-opentype"), url("../Vazir/Vazir.woff") format("woff"), url("../Vazir/Vazir.woff2") format("woff2"), url("../Vazir/Vazir.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

.search {
    width: 50px;
    height: 50px;
    /*margin: 15px auto 0;*/
    margin-right: auto;
    background-color: rgb(250, 250, 250);
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
    float: right;
    margin-right: 40px;
    border-radius: 20px 1px;
}

    .search:before {
        content: "";
        display: block;
        width: 3px;
        height: 100%;
        position: relative;
        background-color: #4d5d26;
        transition: all 0.5s ease;
    }

    .search.open {
        width: 420px;
    }

        .search.open:before {
            height: 30px;
            margin: 10px 0 20px 30px;
            position: absolute;
        }

.search-box {
    width: 100%;
    height: 100%;
    box-shadow: none;
    border: none;
    background: transparent;
    color: #000;
    padding: 20px 100px 20px 45px;
    font-size: 26px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

    .search-box:focus {
        outline: none;
    }

.search-button {
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    right: 0;
    top: -18px;
    padding: 25px;
    cursor: pointer;
}

.search-icon {
    width: 20px;
    height: 20px;
    border-radius: 40px;
    border: 3px solid #4d5d26;
    display: block;
    position: relative;
    margin-left: 2px;
    transition: all 0.5s ease;
}

    .search-icon:before {
        content: "";
        width: 3px;
        height: 12px;
        position: absolute;
        right: -5px;
        top: 20px;
        display: block;
        background-color: #4d5d26;
        transform: rotate(-45deg);
        transition: all 0.5s ease;
    }

    .search-icon:after {
        content: "";
        width: 3px;
        height: 8px;
        position: absolute;
        right: -10px;
        top: 27px;
        display: block;
        background-color: #4d5d26;
        transform: rotate(-45deg);
        transition: all 0.5s ease;
    }

.open .search-icon {
    margin: 0;
    width: 30px;
    height: 30px;
    border-radius: 60px;
}

    .open .search-icon:before {
        transform: rotate(52deg);
        left: 15px;
        top: 10px;
        height: 15px;
    }

    .open .search-icon:after {
        transform: rotate(-230deg);
        left: 15px;
        top: 3px;
        height: 15px;
    }

/* ---------------------contac style......................... */
.backimagescontact {
    width: 100%;
    height: 350px;
    margin: auto;
    background-color: transparent;
    background-image: url(../images/images.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 800px;
}

.textimagescontact p {
    width: 100%;
    background-color: transparent;
    color: white;
    float: right;
}

.textimagescontact h2 {
    color: rgb(0, 0, 0);
    font-family: vazir;
}

.textimagescontact a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 35px;
}

.textimagescontact h2 {
    font-size: 30px;
    color: white;
}

/* about ............................................................... */
.backimagesabout {
    width: 100%;
    height: 350px;
    margin: auto;
    background-color: transparent;
    background-image: url(../images/about_us.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 800px;
}

.backimagesabouttehran {
    width: 100%;
    height: 400px;
    margin: auto;
    background-color: transparent;
    margin-top: 30px;
}

.aptionpanelabout {
    width: 25%;
    height: 120px;
    margin: auto;
    margin-top: auto;
    margin-right: auto;
    background-color: white;
    border: 2px solid lightgray;
    float: right;
    margin-right: 100px;
    transition: 1s;
    cursor: pointer;
    margin-top: -80px;
}

    .aptionpanelabout:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        border-radius: 40px 10px;
        margin-top: -90px;
    }

.textimagesabout {
    width: 600px;
    height: 140px;
    margin: 100px;
    float: right;
    background-color: transparent;
    margin-top: 120px;
    z-index: -1;
    text-align: right;
    font-size: 22px;
}

    .textimagesabout h2 {
        color: black;
        font-family: vazir;
    }

        .textimagesabout h2 span {
            font-family: vazir;
            color: #4b5e1e;
        }

    .textimagesabout a {
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-size: 22px;
    }

.moresabout span {
    float: right;
    padding: 20px;
    font-size: 26px;
    font: bold;
}

.moresabout p {
    font-size: 18px;
    width: 80%;
    text-align: right;
    float: right;
    padding-right: 20px;
    text-align: justify;
    direction: rtl;
}

.moresabout2 {
    width: 90%;
    height: auto;
    background-color: #00000018;
    text-align: center;
    margin: 5px;
    float: right;
    font-size: 22px;
    margin-right: 70px;
    padding: 5px;
    clear: both;
}

.backbonyan {
    width: 90%;
    height: 900px;
    margin: auto;
    background-color: transparent;
    clear: both;
}

.titrandtextbonyan {
    width: 100%;
    height: auto;
    margin: auto;
    background-color: #00000018;
    margin-bottom: 50px;
}

    .titrandtextbonyan h2 {
        text-align: center;
        font-size: 22px;
        font-family: vazir;
        padding: 20px;
    }

.backimagestozihatbontan {
    width: 35%;
    height: 500px;
    margin: auto;
    margin-right: 140px;
    float: right;
}

.imagesbonyan {
    width: 100%;
    height: 400px;
    float: right;
    background-color: transparent;
    box-shadow: 3px 3px 3px 3px #4e5f27ab;
}

    .imagesbonyan img {
        width: 100%;
        height: 400px;
    }

.bonyantozihat {
    width: 100%;
    height: 240px;
    float: right;
    margin: auto;
    background-color: transparent;
    clear: both;
    box-shadow: 5px 0 5px -5px #333;
    margin-top: 30px;
}

.titrtozih {
    width: 100%;
    height: 50px;
    margin: auto;
    background-color: transparent;
}

    .titrtozih h2 {
        text-align: right;
        font-size: 24px;
        padding: 10px;
        font-family: vazir;
    }

.paneltozih {
    width: 100%;
    height: 130px;
    margin: auto;
    background-color: transparent;
    font-family: vazir;
}

    .paneltozih p {
        text-align: right;
        padding: 20px;
    }

.grid {
    position: relative;
    margin: 0 auto;
    padding: 1em 0 4em;
    list-style: none;
    text-align: center;
}

    /* Common style */
    .grid figure {
        position: relative;
        float: left;
        overflow: hidden;
        margin: 10px 52px;
        min-width: 120px;
        max-width: 420px;
        max-height: 360px;
        width: 32%;
        background: transparent;
        text-align: center;
        cursor: pointer;
    }

        .grid figure img {
            position: relative;
            display: block;
            min-height: 100%;
            max-width: 100%;
        }

        .grid figure figcaption {
            padding: 2em;
            color: #fff;
            text-transform: uppercase;
            font-size: 1.25em;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

            .grid figure figcaption::before,
            .grid figure figcaption::after {
                pointer-events: none;
            }

            .grid figure figcaption,
            .grid figure figcaption > a {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

                /* Anchor will cover the whole item by default */
                /* For some effects it will show as a button */
                .grid figure figcaption > a {
                    z-index: 1000;
                    text-indent: 200%;
                    white-space: nowrap;
                    font-size: 0;
                    opacity: 0;
                }

        .grid figure h2 {
            word-spacing: -0.15em;
            font-weight: 300;
        }

            .grid figure h2 span {
                font-weight: 800;
            }

        .grid figure h2,
        .grid figure p {
            margin: 0;
        }

        .grid figure p {
            letter-spacing: 1px;
            font-size: 68.5%;
        }

/*---------------*/
/***** Sadie *****/
/*---------------*/

figure.effect-sadie figcaption::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(top, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.8) 75%);
    background: linear-gradient(to bottom, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.8) 75%);
    content: "";
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
}

figure.effect-sadie h2 {
    position: absolute;
    top: 20%;
    right: 10%;
    font-size: 24px;
    width: 100%;
    color: #484c61;
    -webkit-transition: -webkit-transform 0.35s, color 0.35s;
    transition: transform 0.35s, color 0.35s;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
    position: absolute;
    bottom: 0;
    right: 8%;
    width: 100%;
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
    top: 50%;
    font-size: 12px;
}

figure.effect-sadie:hover h2 {
    color: #fff;
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
    transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
}

figure.effect-sadie:hover figcaption::before,
figure.effect-sadie:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* page details ............................................................... */
.backimagesdetails {
    width: 100%;
    height: 750px;
    margin: auto;
    background-color: transparent;
    background-image: url(../images/project/55.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 800px;
}

.backimagesdetailsprojectpage1 {
    width: 100%;
    height: 750px;
    margin: auto;
    background-color: transparent;
    background-image: url(../images/project/projectpage1/modern-office-room-design-stylish-modern-executive-office-interior-design-modern-office-modern-office-room-interior-design.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 800px;
}

.textimagedetails {
    width: 100%;
    height: 140px;
    margin: 200px;
    float: right;
    background-color: transparent;
    color: rgb(0, 0, 0);
    z-index: -1;
    text-align: right;
    font-size: 22px;
}

    .textimagedetails a {
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-size: 35px;
    }

    .textimagedetails h2 {
        color: white;
        font-size: 30px;
    }

.backproductdetails {
    width: 100%;
    height: 327px;
    margin: auto;
    background-color: transparent;
    clear: both;
    /*background: url('/Content/Moneh/images/bg/bgp5.png');
    background-size: cover;
    background-position: center;*/
}

.backimagesproductdetails {
    width: 40%;
    height: 500px;
    float: right;
    background-color: violet;
    background-image: url(../images/Products/2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 500px;
    margin: auto;
    margin-right: 80px;
}

.backtextdetais {
    width: auto;
    height: 250px;
    float: right;
    background-color: transparent;
    margin: 30px;
    margin-left: 10px;
    padding-right: 15px;
    box-shadow: 5px 0 5px -5px #333;
}

.qw {
    box-shadow: -5px 0 5px -5px #333
}

.titledetais {
    width: 100%;
    height: auto;
    margin: auto;
    font-size: 16px;
    background-color: transparent;
    text-align: right;
    font: bold;
}

.tozihattitle h4 {
    color: #222;
    font-size: 13px;
    direction: rtl;
    text-align: justify;
    line-height: 28px;
}

.tozihattitle {
    width: 100%;
    height: auto;
    margin: auto;
    font-size: 18px;
    background-color: transparent;
    text-align: right;
}

.datedetails {
    width: 100%;
    height: auto;
    margin: auto;
    font-size: 12px;
    background-color: transparent;
    text-align: right;
    color: #090909b3;
    direction: rtl;
}

    .datedetails a {
        text-decoration: none;
        color: #090909b3;
    }

.deshcreptionsdetails {
    width: 100%;
    height: auto;
    margin: auto;
    font-size: 18px;
    background-color: transparent;
    text-align: right;
}

.icondetails {
    width: 100%;
    height: 60px;
    margin: auto;
    font-size: 18px;
    background-color: transparent;
    text-align: right;
    color: black;
}

    .icondetails i {
        color: rgb(0, 0, 0);
        transition: 1s;
    }

        .icondetails i:hover {
            font-size: 25px;
            text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
        }

/* تب ایتم*/
.intro h1 {
    color: #efefef;
    font-size: 3rem;
    margin: 60px 0 0;
    font-weight: bold;
    font-family: monospace;
}

@media screen and (min-width: 800px) {
    .intro h1 {
        font-size: 4rem;
    }
}

.intro p {
    color: #e0cf79;
    font-size: 1.3rem;
    line-height: 1.5;
}

.intro a {
    color: #40dfbb;
    font-weight: bold;
    text-decoration: none;
}

.swiper-container {
    width: 100%;
    height: 100%;
    margin: 50px auto 0;
}

@media screen and (min-width: 800px) {
    .swiper-container {
        width: 70%;
        margin-left: 15%;
    }
}

.swiper-slide {
    background: #fff;
    color: #333;
    font-size: 1.8rem;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.swiper-container-horizontal > .swiper-pagination {
    top: 0;
    bottom: auto;
}

    .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet {
        margin: 0;
    }

.active-mark {
    background: #ffeb3b;
    width: 25%;
    height: 4px;
    position: absolute;
    left: 0;
    top: 52px;
    transition: left 0.2s ease-out;
}

.swiper-pagination-bullet {
    background-color: #00d42b;
    border-radius: 0;
    box-sizing: border-box;
    color: #0e8927;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: normal;
    opacity: 1;
    height: 56px;
    width: 25%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: font-weight 0.22s ease;
}

    .swiper-pagination-bullet:nth-of-type(1).swiper-pagination-bullet-active ~ .active-mark {
        left: 0%;
    }

    .swiper-pagination-bullet:nth-of-type(2).swiper-pagination-bullet-active ~ .active-mark {
        left: 25%;
    }

    .swiper-pagination-bullet:nth-of-type(3).swiper-pagination-bullet-active ~ .active-mark {
        left: 50%;
    }

    .swiper-pagination-bullet:nth-of-type(4).swiper-pagination-bullet-active ~ .active-mark {
        left: 75%;
    }

    .swiper-pagination-bullet:first-of-type.swiper-pagination-bullet-active ~ .active-mark {
        left: 0;
    }

.swiper-pagination-bullet-active {
    font-weight: bold;
}

.tabs {
    clear: both;
    position: relative;
    width: 100%;
    margin: 0 auto;
    float: right;
    /* you can either manually set a min-height here or do it via JS ---> */
}

.tab label {
    margin-right: 20px;
    position: relative;
    top: 0;
    cursor: pointer;
    color: #333;
    text-transform: uppercase;
}

.tab__content {
    position: relative;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity 0.2s cubic-bezier(0.42, 0, 0.34, 1.01);
    opacity: 0;
}

[type="radio"]:checked ~ label {
    border: 2px solid #1d1d1d;
    border-radius: 20px;
    color: #1d1d1d;
    background-color: white;
    z-index: 2;
}

    [type="radio"]:checked ~ label ~ .tab__content {
        z-index: 1;
        opacity: 1;
    }

/* project .........................................................*/
.alllistproject {
    width: 95%;
    height: 80px;
    margin: auto;
    background: transparent;
    clear: both;
    margin-top: 60px;
    border: 1px solid transparent;
    border-bottom: 3px solid rgb(179, 177, 177);
}

.subjectproject {
    width: 200px;
    height: 50px;
    margin: 10px;
    float: right;
    background-color: transparent;
    padding-top: 20px;
    border: 1px solid transparent;
    text-align: center;
}

    .subjectproject:hover {
        border-bottom: 3px solid black;
    }

    .subjectproject a {
        color: black;
        text-decoration: none;
        font-family: vazir;
    }

.backimagesprojects {
    width: 100%;
    /*height: 750px;*/
    margin: auto;
    background-color: transparent;
    background-image: url(../images/project/55.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 800px;
    background-size: cover;
}

.backaslilitproject {
    width: 100%;
    height: 2000px;
    margin: auto;
    background-color: transparent;
    background-image: url(../Pimage/bg3.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* -----------------details project............................. */
.backlistproject {
    width: 100%;
    height: 1000px;
    margin: auto;
    background-color: wheat;
    clear: both;
}

.imagesprojectmodel1 {
    width: 400px;
    height: 500px;
    float: left;
    margin: auto;
    transition: 2s;
}

    .imagesprojectmodel1 img {
        width: 100%;
        height: 500px;
    }

    .imagesprojectmodel1:hover {
        opacity: 0.3;
    }

.imagesprojectmodel2 {
    width: 300px;
    height: 200px;
    float: left;
    margin: auto;
    transition: 2s;
}

    .imagesprojectmodel2 img {
        width: 100%;
        height: 300px;
    }

.imagesprojectmodel3 {
    width: 600px;
    height: 300px;
    float: left;
    margin: auto;
    transition: 2s;
}

.toggle .panels .panel {
    padding: 20px 10px;
    display: none;
}

    .toggle .panels .panel:first-child {
        display: block;
    }

.backimagesitemproject1 {
    width: 40%;
    height: 500px;
    float: right;
    background-color: violet;
    background-image: url(../images/article/TV-tables-2019-850x491.jpg);
    background-repeat: no-repeat;
    background-size: 100% 500px;
    margin: auto;
    margin-top: 20px;
    margin-right: 80px;
}

.backimagesitemproject2 {
    width: 40%;
    height: 500px;
    float: right;
    background-color: violet;
    background-image: url(../images/article/d.jpg);
    background-repeat: no-repeat;
    background-size: 100% 500px;
    margin: auto;
    margin-right: 80px;
    margin-top: 20px;
}

.backimagesitemproject3 {
    width: 40%;
    height: 500px;
    float: right;
    background-color: violet;
    background-image: url(../images/article/935.jpg);
    background-repeat: no-repeat;
    background-size: 100% 500px;
    margin: auto;
    margin-right: 80px;
    margin-top: 20px;
}

.backimagesitemproject4 {
    width: 40%;
    height: 500px;
    float: right;
    background-color: violet;
    background-image: url(../images/article/Article-writing.jpg);
    background-repeat: no-repeat;
    background-size: 100% 500px;
    margin: auto;
    margin-right: 80px;
    margin-top: 20px;
}

.panels {
    width: 100%;
    height: auto;
    margin: auto;
    padding-bottom: 80px;
}

/* .................................................... */
.container1 {
    position: relative;
    width: 30%;
    float: right;
    /*margin: 50px;*/
    height: 300px;
}



    .container1.left {
        float: left;
    }

.backtextdetais.left {
    float: left;
}

.cont1 {
    position: relative;
    width: 40%;
    float: left;
    margin: 50px;
    height: 400px;
}

.container2 {
    position: relative;
    width: 40%;
    float: right;
    margin: 20px;
    height: 450px;
}

.image1 {
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: 3px 3px 3px 3px #4e5f27ab;
}

.overlay1 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.486);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: 0.5s ease;
}

.container1:hover .overlay1 {
    height: 100%;
}

.text1 {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

/* porduct................................................. */
.backimagesporducts {
    width: 100%;
    height: 750px;
    margin: auto;
    background-color: transparent;
    background-image: url(../images/porduct/wood.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 800px;
}

/* article.................................................. */
.backasliarticle {
    width: 100%;
    height: auto;
    margin: auto;
    background-color: transparent;
    background-image: url(../Pimage/bg3.png);
    /*background-size: 100% 100%;*/
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    /*line-height: 32px;*/
    font-size: large;
}

.backimagesarticlefa {
    width: 100%;
    height: 750px;
    margin: auto;
    background-color: transparent;
    background-image: url(../images/article/Article-writing.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 800px;
    clear: both;
}

.textimagearticlefa {
    width: 300px;
    height: 140px;
    margin: 200px;
    float: right;
    background-color: transparent;
    color: rgb(255, 255, 255);
    z-index: -1;
    text-align: right;
    font-size: 30px;
}

    .textimagearticlefa a {
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-size: 35px;
    }

.backimagesarticle {
    width: 40%;
    height: 500px;
    float: right;
    background-color: violet;
    background-image: url(../images/article/TV-tables-2019-850x491.jpg);
    background-repeat: no-repeat;
    background-size: 100% 500px;
    margin: auto;
    margin-right: 80px;
}

/* details project.............................................. */

#preloaderproject {
    top: 0;
    left: 0;
    width: 100%;
}

#loader-imgproject {
    display: block;
    position: relative;
    left: 50%;
    width: 200px;
    height: 100px;
    margin: -100px 0 0 -100px;
    z-index: 1001;
    z-index: 1020;
}

.loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    background: rgba(34, 34, 34, 0.945);
    z-index: 1000;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

    .loader-section.section-left {
        left: 0;
    }

    .loader-section.section-right {
        right: 0;
    }

.panel_left {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 1s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 1s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.projectloadeimagesleft {
    width: 90%;
    height: 500px;
    margin: 150px auto auto auto;
    background-color: mediumorchid;
}

    .projectloadeimagesleft img {
        width: 100%;
        height: 500px;
    }

.panel_right {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all 1s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 1s 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.textrightloader {
    width: 70%;
    height: 500px;
    margin: 150px auto auto auto;
    background-color: transparent;
    color: white;
}

.loaded-circle {
    opacity: 0;
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

.loaded-imgproject {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all 1s 1s ease-out;
    transition: all 1s 1s ease-out;
}

/* article contaioner */
.mooneh-maghale1 {
    width: 100%;
    /* height: 700px; */
    margin-top: 30px;
}

.BackAsliProjectDetails {
    width: 100%;
    height: 800px;
    margin: auto;
    background-color: transparent;
}

.detailspanelleft {
    width: 30%;
    height: 550px;
    margin: auto;
    float: right;
    background-color: transparent;
    clear: both;
    box-shadow: -5px 0 5px -5px #333;
    margin-right: 50px;
}

.tozihatprojectdetails {
    width: 60%;
    height: 250px;
    margin: 50px auto auto 50px;
    float: left;
    background-color: transparent;
    text-align: right;
    line-height: 2;
    padding-right: 50px;
}

.videoproject {
    width: 60%;
    height: 450px;
    margin: 50px auto auto 50px;
    background-color: tomato;
    box-shadow: 3px 3px 3px 3px #4e5f27ab;
}

    .videoproject img {
        width: 100%;
        height: 450px;
    }

.texettitledetailproje {
    width: 90%;
    height: auto;
    margin: 20px auto auto auto;
    text-align: right;
}

.popup {
    width: 100%;
    margin: auto;
    text-align: center;
    height: 300px;
    float: right;
}

    .popup img {
        width: 300px;
        height: 100%;
        cursor: pointer;
        float: right;
        margin-right: 50px;
    }

.show {
    z-index: 999;
    display: none;
}

    .show .overlay1 {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.66);
        position: absolute;
        top: 800px;
        left: 0;
    }

    .show .img-show {
        width: 100%;
        height: 700px;
        background: transparent;
        position: absolute;
        top: 800px;
    }

.img-show span {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 99;
    cursor: pointer;
}

.img-show img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: auto;
    left: 0;
}

/*End style*/
.CSSgal {
    position: relative;
    overflow: hidden;
    height: 100%; /* Or set a fixed height */
}

    /* SLIDER */

    .CSSgal .slider {
        height: 100%;
        white-space: nowrap;
        font-size: 0;
        transition: 0.8s;
    }

        /* SLIDES */

        .CSSgal .slider > * {
            font-size: 1rem;
            display: inline-block;
            white-space: normal;
            vertical-align: top;
            height: 100%;
            width: 100%;
            background: none 50% no-repeat;
            background-size: cover;
        }

    /* PREV/NEXT, CONTAINERS & ANCHORS */

    .CSSgal .prevNext {
        position: absolute;
        z-index: 1;
        top: 50%;
        width: 100%;
        height: 0;
    }

        .CSSgal .prevNext > div + div {
            visibility: hidden; /* Hide all but first P/N container */
        }

        .CSSgal .prevNext a {
            background: #fff;
            position: absolute;
            width: 60px;
            height: 60px;
            line-height: 60px; /* If you want to place numbers */
            text-align: center;
            opacity: 0.7;
            -webkit-transition: 0.3s;
            transition: 0.3s;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            left: 0;
        }

            .CSSgal .prevNext a:hover {
                opacity: 1;
            }

            .CSSgal .prevNext a + a {
                left: auto;
                right: 0;
            }

    /* NAVIGATION */

    .CSSgal .bullets {
        position: absolute;
        z-index: 2;
        bottom: 0;
        padding: 10px 0;
        width: 100%;
        text-align: center;
    }

        .CSSgal .bullets > a {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            text-align: center;
            background: rgba(255, 255, 255, 1);
            -webkit-transition: 0.3s;
            transition: 0.3s;
        }

            .CSSgal .bullets > a + a {
                background: rgba(255, 255, 255, 0.5); /* Dim all but first */
            }

            .CSSgal .bullets > a:hover {
                background: rgba(255, 255, 255, 0.7) !important;
            }

    /* NAVIGATION BUTTONS */
    /* ALL: */
    .CSSgal > s:target ~ .bullets > * {
        background: rgba(255, 255, 255, 0.5);
    }

/* ACTIVE */
#s1:target ~ .bullets > *:nth-child(1) {
    background: rgba(255, 255, 255, 1);
}

#s2:target ~ .bullets > *:nth-child(2) {
    background: rgba(255, 255, 255, 1);
}

#s3:target ~ .bullets > *:nth-child(3) {
    background: rgba(255, 255, 255, 1);
}

#s4:target ~ .bullets > *:nth-child(4) {
    background: rgba(255, 255, 255, 1);
}

/* More slides? Add here more rules */

/* PREV/NEXT CONTAINERS VISIBILITY */
/* ALL: */
.CSSgal > s:target ~ .prevNext > * {
    visibility: hidden;
}

/* ACTIVE: */
#s1:target ~ .prevNext > *:nth-child(1) {
    visibility: visible;
}

#s2:target ~ .prevNext > *:nth-child(2) {
    visibility: visible;
}

#s3:target ~ .prevNext > *:nth-child(3) {
    visibility: visible;
}

#s4:target ~ .prevNext > *:nth-child(4) {
    visibility: visible;
}

#s1:target ~ .slider {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
}

#s2:target ~ .slider {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}

#s3:target ~ .slider {
    transform: translateX(-200%);
    -webkit-transform: translateX(-200%);
}

#s4:target ~ .slider {
    transform: translateX(-300%);
    -webkit-transform: translateX(-300%);
}

.CSSgal {
    color: #fff;
    text-align: center;
}

    .CSSgal .slider h2 {
        margin-top: 40vh;
        font-weight: 200;
        letter-spacing: -0.06em;
        word-spacing: 0.2em;
        font-size: 3em;
    }

    .CSSgal a {
        border-radius: 50%;
        margin: 0 3px;
        color: rgba(0, 0, 0, 0.8);
        text-decoration: none;
    }

/* Page Edari Style */
.backpageEdari {
    width: 100%;
    /*height: 1500px;*/
    padding-bottom: 150px;
    margin: auto;
    background-color: transparent;
    background-image: url(../Pimage/bg3.png);
    background-size: 100% 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.backImages1Edari {
    width: 30%;
    height: 350px;
    margin: 100;
    float: left;
    background-color: darkorange;
}

    .backImages1Edari img {
        width: 100%;
        height: 350px;
    }

.containerEdari {
    position: relative;
    width: 40%;
    float: left;
    margin: 130px auto auto 100px;
    height: 400px;
}

.containerEdarileft {
    position: relative;
    width: 40%;
    float: right;
    margin: 130px 100px auto auto;
    height: 400px;
}

.imageEdari {
    display: block;
    width: 100%;
    height: 100%;
}

.overlayEdari {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.486);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: 0.5s ease;
}

.containerEdari:hover .overlayEdari {
    height: 100%;
}

.containerEdarileft:hover .overlayEdari {
    height: 100%;
}

.textEdari {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.textedariTitle {
    width: 40%;
    height: 350px;
    margin: 130px 50px auto auto;
    padding: 20px;
    background-color: transparent;
    float: right;
    border: 1px solid transparent;
    box-shadow: -5px 0 5px -5px #333;
    clear: both;
}

.textedariTitleleft {
    width: 40%;
    height: 350px;
    margin: 130px 50px auto auto;
    padding: 20px;
    background-color: transparent;
    float: left;
    border: 1px solid transparent;
    box-shadow: 5px 0 5px -5px #333;
    clear: both;
}

.titleNameProjectEdari,
.dateProjectEdari,
.nameDesinerProjectEdari,
.tozihatProjectEdari {
    width: 100%;
    height: auto;
    text-align: right;
    direction: rtl;
    line-height: 2;
}

    .tozihatProjectEdari a {
        color: black;
        font-size: 20px;
    }

/* end Page Edari */
/* ................................................................................. */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

body {
    overflow-x: hidden;
    font-family: vazir;
}

.v3 {
    stroke-dasharray: 1200 150;
    stroke-dashoffset: 2700;
    animation: draw 4s linear 1;
    background-size: cover;
    width: 400px;
    float: right;
    border-radius: 50%;
}

.v4 {
    stroke-dasharray: 1200 150;
    stroke-dashoffset: 2700;
    margin-top: 400px;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

.rslides {
    /*box-shadow: -2px 6px 12px 6px #ccced0;*/
    left: 0;
    position: relative;
    z-index: -1;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
    height: 500px;
}

    .rslides li {
        -webkit-backface-visibility: hidden;
        position: absolute;
        display: none;
        width: 100%;
        left: 0;
        top: 0;
    }

        .rslides li:first-child {
            position: relative;
            display: block;
            float: left;
        }

.f1 {
    position: relative;
    display: block;
    float: left;
}

.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
    max-height: 500px;
}

.container {
    width: 60%;
    margin: 0 auto;
    margin-left: 700px;
    font-family: "Bnazanin";
    margin-top: 10px;
    position: relative;
    background-image: url("../../../Uploads/Images/Imgc.png");
    background-size: cover;
    width: 400px;
    margin-right: 41%;
    float: right;
    margin-top: 420px;
    border-radius: 50%;
    background-repeat: no-repeat;
}

.pp {
    color: white;
    font-size: 30px;
    text-align: right;
    margin-right: 200px;
    padding-top: 90px;
    font-family: "Bnazanin";
}

.pppp {
    color: white;
    text-align: right;
    margin-right: 300px;
    padding-top: 1px;
    font-family: "Bnazanin";
}

.ul1 .li {
    display: inline;
    text-align: center;
}

.aaa {
    display: inline-block;
    width: 10%;
    padding: 0.78rem 0;
    margin: 0;
    margin-left: 100px;
    list-style-type: none;
    text-decoration: none;
    color: rgb(216, 216, 216);
    text-shadow: 1px 1px 2px gray;
    clear: both;
}

.two:hover ~ hr {
    margin-left: 25%;
}

.three:hover ~ hr {
    margin-left: 50%;
}

.four:hover ~ hr {
    margin-left: 70%;
}

.hr {
    height: 0.2rem;
    width: 21%;
    margin: 0;
    background: rgb(0, 0, 0);
    border: none;
    transition: 0.3s ease-in-out;
}

.about {
    float: right;
    margin: auto;
    font-family: "Bnazanin";
    margin-top: 70px;
    margin-right: -280px;
    color: rgb(216, 216, 216);
    text-shadow: 2px 2px 2px gray;
}

.about1 {
    font-family: "Bnazanin";
    font-size: 30px;
    float: right;
    margin-top: 20px;
    margin-right: 100px;
    color: rgb(216, 216, 216);
}

.btn-5 {
    float: left;
    border: 0 solid;
    box-shadow: inset 0 0 20px rgba(179, 179, 179, 0.5);
    outline: 1px solid;
    outline-color: rgba(179, 179, 179, 0.5);
    outline-offset: 0px;
    text-shadow: none;
    transition: all 0 cubic-bezier(0.19, 1, 0.22, 0.5);
    width: 150px;
    height: 17px;
    text-align: center;
    margin-left: 1150px;
    margin-top: 70px;
    font-family: "Bnazanin";
    padding-bottom: 15px;
}

    .btn-5:hover {
        border: 1px solid;
        box-shadow: inset 0 0 20px rgba(179, 179, 179, 0.5), 0 0 20px rgba(179, 179, 179, 0.5);
        outline-color: rgba(255, 255, 255, 0);
        outline-offset: 15px;
        text-shadow: 1px 1px 2px #427388;
    }

.hhh {
    text-align: center;
    color: rgb(62, 155, 0);
    font-size: 20px;
    margin-top: 10px;
    font-family: "Bnazanin";
}

.a {
    width: 300px;
    margin: auto;
    margin-left: 50px;
}

.port {
    width: 100%;
    height: 450px;
    margin: auto;
    margin-top: 700px;
    background: url(../image/r.jpg) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-attachment: fixed;
    opacity: 0.5;
}

.btn-5 {
    float: left;
    border: 0 solid;
    box-shadow: inset 0 0 20px rgba(179, 179, 179, 0.5);
    outline: 1px solid;
    outline-color: rgba(179, 179, 179, 0.5);
    outline-offset: 0px;
    text-shadow: none;
    transition: all 0 cubic-bezier(0.19, 1, 0.22, 0.5);
    width: 150px;
    height: 17px;
    text-align: center;
    margin-left: 1150px;
    margin-top: 70px;
    font-family: "Bnazanin";
    padding-bottom: 15px;
}

    .btn-5:hover {
        border: 1px solid;
        box-shadow: inset 0 0 20px rgba(179, 179, 179, 0.5), 0 0 20px rgba(179, 179, 179, 0.5);
        outline-color: rgba(255, 255, 255, 0);
        outline-offset: 15px;
        text-shadow: 1px 1px 2px #000000;
        height: 35px;
        color: rgb(0, 0, 0);
    }

@keyframes ry {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes r1 {
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes r2 {
    100% {
        color: #fff;
    }
    /* 100% { transform: scale(60); */
}

/*overlay */
.container {
    position: relative;
    width: 400px;
    border-radius: 50%;
    height: 400px;
}

.image {
    display: none;
    width: 400px;
    border-radius: 500px;
}

.overlay {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: 0.5s ease;
    border-radius: 1000px;
}

.container:hover .overlay {
    bottom: 0;
    height: 100%;
    animation: ry 1s linear 1;
}

.text {
    color: #000;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: Vazir;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

/* ovelay */
.logo {
    animation: r1 2s linear 1;
    position: relative;
}

    .logo:hover {
        animation: load 2s linear 1;
    }

oader {
    display: none;
}

.mooneh-maghale {
    background: azure;
    width: 28%;
    /* height: 500px; */
    float: right;
    margin-right: 5px;
    padding-left: 20px;
    background-color: rgba(0, 0, 0, 0.09);
    border-top: #0b0c0bce 4px solid;
    border-left: #434443b3 2px solid;
    border-right: #434443b3 2px solid;
    border-bottom: #434443b3 2px solid;
    border-radius: 20px 0px 20px 0px;
}

.matn-maghale {
    text-align: center;
    padding: 20px;
}

    .matn-maghale a {
        text-decoration: none;
        color: black;
    }

.center {
    text-align: center;
    margin-top: 100px;
}

.containeritem {
    position: relative;
    width: 30%;
    max-width: 350px;
    float: right;
    padding: 10px;
    height: auto;
    transition: 1s;
}

    .containeritem:hover {
        opacity: 0.5;
    }

.im {
    width: 168px;
    margin-top: -15px;
    height: 270px;
    padding-bottom: 15px;
}

.containeritem1 {
    position: relative;
    /* width: 100%; */
    max-width: 300px;
    float: right;
    /* padding: 10px; */
    height: auto;
}

.containeritem img {
    /* border-radius: 25px 0; */
    /* -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
-webkit-mask-size: 200%;
mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
mask-size: 200%; */
    border-top: #333 4px solid;
    border-left: #514f4c 2px solid;
    border-right: #a59e9e 2px solid;
    border-bottom: #818181 2px solid;
    opacity: 1;
    width: 100%;
    transition: 0.5s ease;
    height: 250px;
    backface-visibility: hidden;
    animation: shine 2s 1;
}

im {
    width: 168px;
    margin-top: -24px;
    height: 336px;
    padding-bottom: 15px;
}

.more-link {
    background-color: rgba(191, 189, 189, 0.09);
    color: #000;
}

    .more-link:hover {
        background-color: #000;
        color: #fff;
    }

.arrows {
    width: 15%;
    height: 20px;
    color: #000;
}

.more {
    background-color: rgba(191, 189, 189, 0.09);
    border-top: #d1d1d1 3px solid;
    border-bottom: #969595 3px solid;
    padding: 1px 55px;
    margin-top: 100px;
    clear: both;
    color: #6b6969;
    border-radius: 20px 0px 20px 0px;
}

    .more:hover {
        background-color: rgba(0, 0, 0, 0.2);
        border-top: #7ba810b3 4px solid;
        border-left: #87b40cb3 2px solid;
    }

.flash-more {
    width: 50%;
    height: 15px;
    margin-top: 0px;
    margin-right: 0px;
    float: right;
    background-color: transparent;
    color: #000000;
    padding-top: 5px;
}

    .flash-more:hover {
        color: white;
    }

@keyframes shine {
    from {
        -webkit-mask-position: 150%;
        mask-position: 150%;
    }

    to {
        -webkit-mask-position: -50%;
        mask-position: -50%;
    }
}

.middle1 {
    transition: 0.5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.containeritem:hover img {
    opacity: 0.3;
    mask-size: 200%;
    -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, 0.6) 30%, #000 50%, rgba(0, 0, 0, 0.6) 70%);
    -webkit-mask-size: 200%;
    mask-image: linear-gradient(-75deg, rgba(0, 0, 0, 0.6) 30%, #000 50%, rgba(0, 0, 0, 0.6) 70%);
    animation: shine 2s infinite;
}

.containeritem:hover .middle1 {
    opacity: 1;
}

.text {
    color: black;
    font-size: 16px;
    padding: 16px 32px;
}

/* article container */
/* effect1 */
@keyframes load {
    0% {
        opacity: 0.08;
        /*         font-size: 10px; */
        /* 				font-weight: 400; */
        filter: blur(5px);
        letter-spacing: 3px;
    }

    100% {
        /*         opacity: 1; */
        /*         font-size: 12px; */
        /* 				font-weight:600; */
        /* 				filter: blur(0); */
    }
}

.animate {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    /* 	width: 350px; */
    /* 	font-size:26px; */
    font-family: Helvetica, sans-serif, Arial;
    animation: load 1.2s infinite 0s ease-in-out;
    animation-direction: alternate;
    text-shadow: 0 0 1px white;
}

/* eefect1 */
a {
    text-decoration: none;
}

@media (min-width: 710px) and (max-width: 1178px) {
    .V4 {
    }

    .title1 {
        margin-top: 300px;
    }
}

@media (max-width: 1178px) {
    .content {
        background-size: contain;
    }
}

@media (min-width: 1179px) {
    .content {
        background-size: cover;
    }
}

.content {
    background-image: url("../images/ry112.svg");
    background-image: url("/Content/Images/ry2-01.svg");
    background-repeat: no-repeat;
    min-height: 2000px;
    margin-left: -10px;
    background-size: 100% 100%;
    width: 100%;
}

.wrapper {
    display: inline-flex;
    margin: 0;
    /* margin-top: -57px; */
    padding: 0;
    align-items: center;
    width: 100%;
    text-align: center;
    justify-content: center;
}

i {
    padding: 0px 10px;
}

.wrapper i:nth-child(1) {
    color: #eaedeb;
    cursor: pointer;
    text-shadow: 0px 7px 10px rgba(0, 0, 0, 0.4);
    transition: all ease-in-out 150ms;
}

    .wrapper i:nth-child(1):hover {
        margin-top: -10px;
        text-shadow: 0px 16px 10px rgba(0, 0, 0, 0.3);
        transform: translate(0, -8);
    }

.wrapper i:nth-child(2) {
    color: #eaedeb;
    cursor: pointer;
    text-shadow: 0px 7px 10px rgba(0, 0, 0, 0.4);
    transition: all ease-in-out 150ms;
}

    .wrapper i:nth-child(2):hover {
        margin-top: -10px;
        text-shadow: 0px 16px 10px rgba(0, 0, 0, 0.3);
        transform: translate(0, -8);
    }

.wrapper i:nth-child(3) {
    color: #eaedeb;
    cursor: pointer;
    text-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
    transition: all ease-in-out 150ms;
}

    .wrapper i:nth-child(3):hover {
        margin-top: -10px;
        text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
        transform: translate(0, -5);
    }

.wrapper i:nth-child(4) {
    color: #eaedeb;
    cursor: pointer;
    text-shadow: 0px 7px 10px rgba(0, 0, 0, 0.4);
    transition: all ease-in-out 150ms;
}

    .wrapper i:nth-child(4):hover {
        margin-top: -10px;
        text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
        transform: translate(0, -5);
    }

.wrapper i:nth-child(5) {
    color: #eaedeb;
    cursor: pointer;
    text-shadow: 0px 7px 10px rgba(0, 0, 0, 0.4);
    transition: all ease-in-out 150ms;
}

    .wrapper i:nth-child(5):hover {
        margin-top: -10px;
        text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
        transform: translate(0, -5);
    }

/**social*/
.menu.mobile {
    display: none;
    clear: both;
    width: 90%;
    float: right;
    position: fixed;
    right: 0;
    direction: rtl;
    margin-top: 75px;
    z-index: 999;
    border-radius: 200px 0;
    background-color: #000c;
    border-bottom: #7ba810b3 4px solid;
    border-right: #87b40cb3 2px solid;
    background-image: url("../image/2.png");
    background-size: 100px 110px;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 350px;
    height: 530px;
}

.contact-style-one {
    padding-top: 120px;
}

.panelcentercontact {
    width: 100%;
    height: 100px;
    margin: auto;
    clear: both;
    background-color: transparent;
}

.imges1 {
    width: 45%;
    height: 450px;
    margin: auto;
    float: right;
    margin-right: 50px;
    box-shadow: 3px 3px 3px 3px #4e5f27ab;
}

    .imges1 img {
        width: 100%;
        height: 450px;
    }

.before-form {
    float: right;
    width: 30%;
    height: auto;
    margin-top: 60px;
    margin-right: 250px;
}

.font-aval {
    /* background-color: darkcyan; */
    width: 100%;
    height: auto;
    float: left;
    margin-left: 1%;
}

.phone-number {
    display: none;
    border-radius: 20px 0px 20px 0px;
    height: auto;
    float: right;
    margin-top: 45px;
    margin-right: 5px;
}

.adress {
    display: none;
    border-radius: 20px 0px 20px 0px;
    width: 80px;
    height: auto;
    float: right;
    margin-top: 45px;
    margin-right: 5px;
}

.email {
    display: none;
    border-radius: 20px 0px 20px 0px;
    width: 80px;
    height: auto;
    float: right;
    margin-top: 45px;
    margin-right: 5px;
}

.text-contact {
    float: right;
    height: auto;
    text-align: right;
    text-align: right;
    margin-top: 30px;
    margin-right: 5px;
    font-size: 16px;
}

.contact-form {
    border-radius: 20px 0px 20px 0px;
    width: 50%;
    margin: auto;
    margin-top: 60px;
    margin-bottom: 180px;
    padding-top: 50px;
    margin-left: 300px;
}

.name-forminput1 {
    width: 300px;
    height: 50px;
    text-align: center;
    border-radius: 40px 0;
    font-size: 18px;
    margin-right: 10px;
    font-size: 14px;
    float: right;
    border: 1px solid lightgray;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
}

.name-forminput2 {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 40px 0;
    width: 610px;
    height: 50px;
    float: right;
    text-align: center;
    padding: 5px 55px;
    margin-top: 0;
    clear: both;
    color: rgb(0, 0, 0);
    font-size: 18px;
    margin-right: 10px;
    font-size: 14px;
    border: 1px solid lightgray;
    margin-top: 10px;
}

.comment {
    width: 610px;
    height: 150px;
    float: right;
    text-align: center;
    padding: 5px 55px;
    margin-top: 0;
    clear: both;
    font-size: 18px;
    position: relative;
    margin-right: 10px;
    border: 1px solid lightgray;
    margin-top: 10px;
    border-radius: 40px 0;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
}

.paneladress {
    width: 350px;
    height: auto;
    margin: auto;
    line-height: 2;
    padding: 30px;
    padding-top: 30px;
    direction: rtl;
    padding-top: 30px;
    -webkit-transition: all ease-in-out 150ms;
    transition: all ease-in-out 150ms;
    cursor: pointer;
}

.paneladress2 {
    width: 350px;
    height: auto;
    margin: auto;
    line-height: 2;
    padding: 30px;
    padding-top: 30px;
    direction: rtl;
    padding-top: 40px;
    -webkit-transition: all ease-in-out 150ms;
    transition: all ease-in-out 150ms;
    cursor: pointer;
}

.iconadres {
    width: 50px;
    height: 50px;
    float: right;
    background-color: transparent;
    margin: 10px;
    margin: auto;
    margin-right: auto;
    margin-left: auto;
    margin-right: 10px;
    margin-left: 20px;
}

.name-forminput1:hover {
    border: 2px solid black;
    box-shadow: 2px 2px 2px gray;
}

.name-forminput2:hover {
    border: 2px solid black;
    box-shadow: 2px 2px 2px gray;
}

.comment:hover {
    border: 2px solid black;
    box-shadow: 2px 2px 2px gray;
}

.button-form {
    background-color: rgb(65, 65, 65);
    padding: 5px 55px;
    margin-top: 0;
    clear: both;
    color: #fff;
    border: 1px solid black;
    font-size: 18px;
    z-index: 999;
    position: relative;
    margin-right: 20px;
    float: right;
    margin-top: 30px;
    transition: 1s;
}

    .button-form:hover {
        opacity: 0.5;
    }

.js-is-hidden {
    display: none;
}

.js-is-show {
    display: block;
}

.menu.menu.mobile {
    float: right;
    width: 100%;
    padding: 0px;
    overflow: scroll;
}

    .menu.menu.mobile li ul li {
        width: 100%;
        height: 50px;
        margin-right: 5px;
        transition: 3s;
        margin-bottom: 15px;
        margin-top: 15px;
    }

.mobail li ul li {
    width: 100%;
    height: 30px;
    margin-right: 20px;
    transition: 3s;
    margin-top: 30px;
}

.menu li:hover > ul {
    top: 40px;
}

.submenu li a {
    max-width: 150px;
}

.submenurespansiv {
    margin-top: -25px;
    display: none;
    transition: 2s;
    /* margin-right: 60px; */
    width: 100%;
    background-color: none;
}

.lirespansivesubmenu:hover > .submenurespansiv {
    display: block;
}

.submenurespansiv li a {
    max-width: 150px;
    background-color: black;
}

    .submenurespansiv li a:hover {
        background-color: rgb(49, 49, 49);
    }

.readmorepanel {
    width: 20%;
    height: 50px;
    margin: auto;
    margin-top: auto;
    margin-left: auto;
    background-color: transparent;
    float: left;
    margin-left: 110px;
    z-index: 999;
    position: absolute;
    margin-top: 100px;
    color: black;
    transition: 1s;
}

    .readmorepanel:hover {
        background-color: black;
        color: white;
    }

.textreadmore {
    width: 40%;
    float: right;
    background-color: transparent;
    height: 30px;
    margin: auto;
    margin-top: 10px;
    border: 1px solid transparent;
    border-right-color: transparent;
    border-right-style: solid;
    border-right-width: 1px;
    border-right: 2px solid black;
    transition: 1s;
}

    .textreadmore:hover {
        border-right: 2px solid rgb(255, 255, 255);
    }

.iconreadmore {
    width: 40%;
    float: right;
    background-color: transparent;
    height: 80px;
    margin: 10px;
    margin-right: 10px;
}

/* ................................................................... */
.readmorepanel1 {
    width: 20%;
    height: 50px;
    margin: auto;
    margin-top: auto;
    margin-left: auto;
    background-color: transparent;
    float: left;
    margin-left: 110px;
    z-index: 999;
    position: absolute;
    margin-top: 100px;
    color: black;
    transition: 1s;
    display: block;
}

    .readmorepanel1:hover {
        background-color: black;
        color: white;
    }

.textreadmore1 {
    width: 40%;
    float: right;
    background-color: transparent;
    height: 30px;
    margin: auto;
    margin-top: 10px;
    border: 1px solid transparent;
    border-right-color: transparent;
    border-right-style: solid;
    border-right-width: 1px;
    border-right: 2px solid black;
    transition: 1s;
}

    .textreadmore1:hover {
        border-right: 2px solid rgb(255, 255, 255);
    }

.iconreadmore1 {
    width: 40%;
    float: right;
    background-color: transparent;
    height: 80px;
    margin: 10px;
    margin-right: 10px;
}

/* ................................................................... */
.readmorepanelrespan {
    width: 50%;
    height: 50px;
    margin: auto;
    background-color: transparent;
    color: black;
    display: none;
    transition: 1s;
}

    .readmorepanelrespan:hover {
        background-color: black;
        color: white;
    }

.textreadmorerespan {
    width: 30%;
    float: left;
    background-color: transparent;
    height: 30px;
    margin: auto;
    margin-top: 10px;
    border: 1px solid transparent;
    border-right-color: transparent;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: transparent;
    border-right-style: solid;
    border-right-width: 1px;
    border-right: 2px solid black;
    transition: 1s;
}

    .textreadmorerespan:hover {
        border-right: 2px solid rgb(255, 255, 255);
    }

.iconreadmorerespan {
    width: 50%;
    float: right;
    background-color: transparent;
    height: 80px;
    margin: 10px;
    margin-right: 10px;
    margin-right: 10px;
}

/* ................................................................... */
.readmorepanelrespan2 {
    width: 50%;
    height: 50px;
    margin: auto;
    background-color: transparent;
    color: black;
    display: none;
    transition: 1s;
}

    .readmorepanelrespan2:hover {
        background-color: black;
        color: white;
    }

.textreadmorerespan2 {
    width: 30%;
    float: left;
    background-color: transparent;
    height: 30px;
    margin: auto;
    margin-top: 10px;
    border: 1px solid transparent;
    border-right-color: transparent;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: transparent;
    border-right-style: solid;
    border-right-width: 1px;
    border-right: 2px solid black;
    transition: 1s;
}

    .textreadmorerespan2:hover {
        border-right: 2px solid rgb(255, 255, 255);
    }

.iconreadmorerespan2 {
    width: 50%;
    float: right;
    background-color: transparent;
    height: 80px;
    margin: 10px;
    margin-right: 10px;
    margin-right: 10px;
}

/* ------------------------------------testmenu----------------------------- */
nav {
    display: block;
}

#mainnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mainnav > ul > li {
    display: inline-block;
    padding: 0 6px;
}

#mainnav ul li {
    position: relative;
}

.header #mainnav > ul > li > a {
    line-height: 100px;
}

#mainnav > ul > li.home > a {
    color: #18ba60;
}

#mainnav > ul > li > a {
    position: relative;
    display: block;
    font-family: "Poppins", sans-serif;
    /* text-transform: uppercase; */
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    margin: 0 0px;
    font-weight: 600;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#mainnav ul.submenu {
    position: absolute;
    left: 0;
    top: 150%;
    width: 300px;
    text-align: left;
    background-color: #222222;
    z-index: 9999;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    #mainnav ul.submenu li:first-child {
        border-top: none;
    }

    #mainnav ul.submenu > li {
        border-top: 1px solid #333333;
    }

#mainnav ul li ul li {
    margin-left: 0;
}

#mainnav ul.submenu > li > a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0 0 0 20px;
    line-height: 45px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#mainnav ul li:hover > ul.submenu {
    top: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    visibility: visible;
}

/* ------------------------------------testmenu----------------------------- */

/* .menu ul li a:hover{
  display: block;
} */

.slider1 {
    margin-top: 50%;
    margin-left: 10%;
}

.content1 {
    background-image: url("../images/ry112.svg");
    min-width: 500px;
    background-repeat: no-repeat;
    min-height: 200px;
    margin-left: -10px;
    background-size: 100% 100%;
    width: 100%;
    margin-top: -10%;
}

.contentp {
    background-image: url("../Pimage/bg3.jpg");
    width: 100%;
    min-height: 500px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    clear: both;
}

.contenta {
    width: 100%;
    height: auto;
    margin: auto;
    background-color: transparent;
}

.copyright {
    width: 100%;
    text-align: center;
    clear: both;
    padding-top: 10px;
    color: #eaedeb;
}

.callinfo {
    background-color: #171717f2;
    border-radius: 180px;
    color: #fff;
    float: right;
    direction: rtl;
    bottom: 0px;
    top: 10px;
    margin-top: 180px;
    padding-right: 20px;
    padding-bottom: 20px;
    border-top: solid;
    border-bottom: solid;
    padding-left: 50px;
    width: 350px;
    text-align: center;
    direction: ltr;
    letter-spacing: 4px;
}

    .callinfo.s {
        background-color: transparent;
        border-radius: 0px;
        float: left;
        direction: rtl;
        bottom: 0px;
        top: 10px;
        margin-top: 180px;
        padding-right: 20px;
        padding-bottom: 20px;
        border-top: none;
        border-bottom: none;
        padding-left: 0px;
        width: max-content;
    }

.footer {
    clear: both;
    background-image: url("../image/baca.png");
    width: 100%;
    min-height: 500px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 15px;
    /* overflow: hidden; */
    /* background-color: rgba(51, 51, 51, 0.007); */
    width: 50%;
    top: 0;
    float: right;
    font-size: 16px;
    font-weight: 100;
    font-family: tahoma;
    /* width:700px; */
}

li {
    float: right;
}

    li:hover {
    }

    li a {
        display: block;
        color: white;
        border-radius: 40px 0;
        text-align: center;
        /* padding: 16px 18px; */
        max-width: 80px;
        background-color: rgba(0, 0, 0, 0.43);
        border-top: #222322b3 4px solid;
        border-left: #434443b3 2px solid;
        min-width: 68px;
        /*min-width: 75px;*/
        font-size: 13px;
        min-height: 50px;
        line-height: 45px;
        text-shadow: 0 0 1px #fff, 0 0 5px #000;
        text-decoration: none;
        max-width: 80px;
    }

    li img:hover {
        animation: fadeIn 1s linear 1;
    }

    li a:hover:not(.active) {
        animation: fadeIn 1s linear 1;
        background-color: rgba(0, 0, 0, 0.2);
        border-top: #7ba810b3 4px solid;
        border-left: #87b40cb3 2px solid;
    }

.active {
    /* background-color: rgb(114, 114, 114);
  border-top: #7ba810 4px solid;

  border-left: #87b40c 2px solid; */
    background-color: rgba(0, 0, 0, 0.2);
    border-top: #7ba810b3 4px solid;
    border-left: #87b40cb3 2px solid;
}

.searchtext {
    padding: 6px;
    /* margin-top: 8px; */
    font-size: 17px;
    border: none;
    margin-right: 40%;
    float: right;
    text-align: right;
    margin-bottom: 30px;
    border-top: #333 4px solid;
    border-left: #514f4c 2px solid;
    border-right: #a59e9e 2px solid;
    border-bottom: #818181 2px solid;
    border-radius: 0px 0px 20px 0;
}

.search-container button {
    float: right;
    padding: 6px 10px;
    /* margin-top: -3px; */
    /* margin-right: 8%; */
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
    border-top: #333 4px solid;
    border-left: #514f4c 2px solid;
    border-right: #a59e9e 2px solid;
    border-bottom: #818181 2px solid;
    border-radius: 20px 0 0px 0;
    height: 44px;
    /* margin-right: -10px; */
}

.c1 {
    margin-top: 50px;
    max-width: 300px;
    float: right;
    margin-right: 30px;
}

.c2 {
    margin-top: 200px;
    max-width: 300px;
    float: right;
}

.c3 {
    margin-top: 350px;
    max-width: 300px;
    float: right;
}

/* animation load */
#pageloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; /* center children content horizontally */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; /* center children content vertically */
    z-index: 10000;
    background: white;
}

.spinner {
    width: 70px;
    text-align: center;
    opacity: 1;
    transition: opacity 0.4s;
}

    .spinner > div {
        width: 18px;
        height: 18px;
        background-color: #333;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.title1 {
    color: #000;
    animation: r2 0.5s linear 1;
    font-size: 16px;
    text-align: justify;
    max-width: 250px;
    margin-left: 30%;
    position: absolute;
    margin-top: 450px;
    z-index: 1;
}

.tbox1r {
    display: none;
    padding-top: 15px;
}

.rslides1 {
    width: 500px;
    float: right;
}

@font-face {
    font-family: Vazir;
    src: url("../Fonts/Vazir/Vazir.eot");
    src: url("../Fonts/Vazir/Vazir.eot?#iefix") format("Vazir-opentype"), url("../Fonts/Vazir/Vazir.woff") format("woff"), url("../Fonts/Vazir/Vazir.woff2") format("woff2"), url("../Fonts/Vazir/Vazir.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: Vazir;
}

/*search*/
#wrap {
    display: inline-block;
    position: relative;
    height: 60px;
    padding: 0;
    position: relative;
    max-width: 100px;
    direction: rtl;
}

body {
    margin: 0;
    width: 100%;
    overflow-x: hidden;
}

/*search*/
@media screen and (min-width: 701px) and (max-width: 900px) {
    .content {
        margin-top: -20%;
    }

    .v5 {
        display: none;
    }
}

@media screen and (min-width: 1500px) {
    .content {
        margin-top: 200px;
    }
}

@media screen and (min-width: 701px) {
    .tb {
        display: none;
    }

    .bg4 {
        background-image: url("../images/170.jpg");
        height: 160px;
        width: 100%;
        background-size: cover;
    }
}

@media screen and (min-width: 701px) and (max-width: 1300px) {
    .bg4 {
        background-position-y: 0px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    li a {
        min-width: 60px;
        font-size: 13px;
        min-height: 50px;
    }

    ul {
        width: 70%;
    }

    .copyright {
        width: 100%;
        padding-top: 50px;
    }

    .before-form {
        height: 220px;
        margin-right: auto;
        width: 100%;
        margin-top: auto;
    }

    .contact-form {
        margin-left: -75px;
        width: 100%;
        margin-top: auto;
        margin-bottom: 50px;
    }

    .font-aval {
        margin-top: 0px;
        width: 100%;
        text-align: center;
    }

    .phone-number {
        margin-top: 6px;
        float: initial;
        margin-left: 60%;
    }

    .email {
        margin-top: 6px;
        margin-left: 69%;
    }

    .adress {
        margin-top: 6px;
        margin-left: 69%;
    }

    .text-contact {
        margin-top: 0px;
        float: none;
        line-height: 2;
        text-align: center;
    }

        .text-contact span,
        h4 {
            margin-right: 20px;
        }

    .name-form {
        /* margin-left: 25%; */
        float: right;
        margin-bottom: 5px;
    }

    .name-form1 {
        /* margin-left: 25%; */
        float: right;
        margin-bottom: 5px;
    }

    .comment {
        /* margin-left: 5%; */
        float: right;
        margin-bottom: 10px;
    }

    .button-form {
        margin-left: 38%;
    }
}

@media screen and (min-width: 1300px) {
    .bg4 {
        background-position-y: 0px;
    }

    .more {
        display: none;
    }

    .backicon {
        display: none;
    }
}

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

@media screen and (max-width: 550px) {
    .rb {
        width: 80px;
        height: 80px;
    }

        .rb a {
            font-size: 32px;
        }
}

@media screen and (min-width: 751px) {
    .rslides {
        height: 500px;
    }
}

@media screen and (max-width: 750px) {
    .rslides {
        height: auto;
    }
}

@media screen and (max-width: 1190px) {
    .v5 {
        display: none;
    }
}

@media screen and (min-width: 1601px) {
    .v3 {
        margin-top: 200px;
        margin-left: -150px;
    }

    ul {
        overflow: visible;
    }
}

@media screen and (min-width: 1491px) and (max-width: 1600px) {
    .v3 {
        margin-top: 200px;
        margin-left: -60px;
    }

    ul {
        overflow: visible;
    }
}

@media screen and (min-width: 1251px) and (max-width: 1490px) {
    .v3 {
        margin-top: 100px;
        margin-left: -10px;
    }
}

@media screen and (min-width: 901px) and (max-width: 1250px) {
    .rslides1 {
        margin-right: -70px;
    }

    .v3 {
        margin-top: 114px;
        margin-left: 40px;
    }

    .container {
        height: 300px;
        width: 300px;
        margin-top: -5px;
        margin-right: 382px;
    }
}

@media screen and (min-width: 700px) and (max-width: 900px) {
    .v3 {
        width: 250px;
        margin-left: 180px;
        margin-top: 140px;
    }

    .container {
        height: 250px;
        width: 250px;
        margin-top: 70px;
    }

    .readmorepanel1,
    .readmorepanel {
        display: none;
    }

    .readmorepanelrespan {
        display: block;
        margin-top: -300px;
        margin-right: 400px;
        width: 40%;
    }

    .iconreadmorerespan {
        margin-top: -600px;
        width: 30%;
    }

    .textreadmorerespan {
        margin-top: -600px;
        width: 50%;
    }

    .readmorepanelrespan2 {
        display: block;
        margin-top: 700px;
        margin-right: 400px;
        width: 40%;
    }

    .textreadmorerespan2 {
        width: 40%;
    }
}

@media screen and (min-width: 650px) and (max-width: 700px) {
    .rslides {
        margin-top: 90px;
    }
}

@media screen and (max-width: 650px) {
    .rslides {
        margin-top: 90px;
    }
}

@media screen and (max-width: 400px) {
    .container {
        width: 270px;
        height: 270px;
    }
}

@media screen and (max-width: 700px) {
    .searchpanel {
        width: 90%;
        margin: auto;
        margin-bottom: 100px;
        margin-top: 20px;
        height: 60px;
    }

    #wrap222 {
        margin: auto 20px;
    }

        #wrap222 form input[type="text"] {
            font-size: 14px;
            text-align: right;
        }

    .menu {
        display: none;
    }

    .tb i {
        line-height: 75px;
    }

    .containeritem img {
        height: 180px;
    }

    .containeritem {
        width: 150px;
    }

    .mooneh-maghale {
        width: 50%;
        /* height: 500px; */
        float: none;
        margin-left: 25%;
        margin-top: 30px;
        padding-left: 0px;
    }

    .matn-maghale {
        margin-top: 0px;
    }

    .cap1 h3 {
        margin-right: 10px;
    }

    .tb {
        width: 100%;
        text-align: right;
        position: fixed;
        display: block;
        z-index: 1000;
        background-image: url("../image/menubg.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position-x: right;
        width: 65px;
        height: 75px;
        float: right;
        right: 0px;
        top: 0px;
    }

        .tb a:hover {
            color: #a2d612;
        }

        .tb a {
            color: #86b309;
            font-size: 20px;
            clear: both;
        }

    .bg4 {
        background-image: url("../images/169.jpg");
        height: 90px;
        width: 100%;
        background-size: cover;
    }

    body {
        overflow-x: hidden !important;
        overflow-x: hidden;
    }

    .title1 {
        left: 0;
        width: 100%;
        max-width: 90%;
        margin-left: 0;
        margin-top: 300px;
        font-size: 16px;
        display: none;
    }

    .container {
        margin: auto;
        float: none;
        clear: both;
        width: 200px;
        height: 200px;
        left: 10%;
    }

    .logo {
        top: 0;
        left: 0;
        position: absolute;
        width: 100px;
        height: 90px;
    }

    .containeritem {
        clear: both;
        position: relative;
        width: 180px;
        float: none;
        max-width: 100%;
        padding: 0px;
        height: auto;
        margin: auto;
        margin-top: 10px;
    }

    .rslides1 {
        display: none;
    }

    .v4 {
        display: none;
    }

    .content {
        min-height: auto;
        background-image: none;
    }

    .rslides rslides2 {
        height: 400px;
    }

    .content {
        clear: both;
    }

    .rslides img {
        height: 285px;
    }

    .v3 {
        float: right;
        margin: auto;
        border-radius: 50%;
    }

    .tbox1r {
        display: block;
        clear: both;
        width: 90%;
        text-align: justify;
        direction: rtl;
        color: #000;
        border-radius: 10px 0;
        padding-bottom: 5px;
        font-family: "Vazir";
        font-size: 14px;
        margin: auto;
    }

    .hj {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 346.4px 200px 0 200px;
        border-color: #007bff transparent transparent transparent;
    }
}

.bg4 {
    position: absolute;
    background-repeat: no-repeat;
    z-index: -1;
}

.imgtitle2 {
    position: absolute;
    z-index: 1;
}

@media (min-width: 700px) and (max-width: 750px) {
    .v3 {
        margin-left: 40%;
    }

    .rslides1 {
        margin-right: -165px;
    }

    .txt {
        font-size: 8px;
        max-width: 189px;
        height: 0px;
    }
}

@media (min-width: 750px) and (max-width: 900px) {
    .v3 {
        margin-left: 35%;
        /* margin-top: 15%; */
    }

    .content1 {
        margin-top: 1px;
        margin-bottom: 540px;
    }

    .containeritem {
        clear: both;
        position: relative;
        width: 200px;
        float: none;
        max-width: 100%;
        padding: 0px;
        height: auto;
        margin: auto;
        margin-top: 10px;
        margin-left: 0px;
    }

        .containeritem img {
            height: 150px;
        }

    .im {
        overflow: hidden;
        display: none;
    }

    .txt {
        font-size: 9px;
        max-width: 270;
        height: 91px;
    }
}

@media (min-width: 375px) and (max-width: 750px) {
    .before-form {
        /* margin-left: 10%; */
        height: auto;
        width: 100%;
    }

    .before-form {
        float: none;
        margin-top: auto;
    }

    .contact-form {
        width: 100%;
        height: auto;
        padding: 0;
        margin-bottom: auto;
        margin-left: auto;
    }

    .name-forminput1 {
        margin-right: 40px;
    }

    .name-forminput2 {
        margin-right: 40px;
        width: 300px;
    }

    .comment {
        margin-right: 40px;
        width: 300px;
    }

    .button-form {
        margin-top: 10px;
        margin-right: 40px;
    }

    .font-aval {
        /* float: none; */
        /* float: right; */
        height: auto;
        margin-top: 4px;
        display: table-cell;
        margin-bottom: 10px;
    }

    .email,
    .phone-number,
    .adress {
        margin: auto;
        margin-top: 5px;
        margin-bottom: 0px;
        /* width: 60px;
    height: 60px; */
    }

    .phone-number {
        margin-right: 30px;
    }

    .text-contact {
        margin: auto;
        margin-top: 5px;
        text-align: center;
        float: none;
    }

        .text-contact h4 {
            margin: auto;
            margin-top: -28px;
        }

    .button-form {
        padding: 5px 15px;
        font-size: 12px;
    }
}

@media (min-width: 750px) and (max-width: 800px) {
    .v3 {
        margin-left: 40%;
    }

    .mores {
        /* display: none; */
        float: right;
    }
}

@media (min-width: 900px) and (max-width: 1000px) {
    .v3 {
        margin-left: 0%;
        width: 400px;
    }
}

@media (min-width: 1000px) and (max-width: 1200px) {
    .v3 {
        margin-left: -40px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
        direction: rtl;
    }
}

@media (min-width: 1200px) and (max-width: 1300px) {
    .v3 {
        margin-left: -40px;
    }

    .more {
        display: none;
    }
}

@media (min-width: 1300px) and (max-width: 1400px) {
    .v3 {
        margin-left: -50px;
    }
}

@media (min-width: 1400px) and (max-width: 1500px) {
    .v3 {
        margin-left: -90px;
    }
}

@media (min-width: 1000px) and (max-width: 1100px) {
    .v3 {
        margin-left: -50px;
        margin-top: 230px;
    }
}

@media (min-width: 1500px) {
    .v3 {
        margin-left: -100px;
    }
}

@media (min-width: 1000px) and (max-width: 1092px) {
    .imgtitle2 {
        margin-left: 60%;
        margin-top: 420px;
    }
}

@media (min-width: 900px) and (max-width: 1099px) {
    .imgtitle2 {
        margin-left: 70%;
        margin-top: 550px;
    }
}

@media (min-width: 700px) and (max-width: 800px) {
    .imgtitle2 {
        margin-left: 60%;
        margin-top: 500px;
    }
}

@media (min-width: 800px) and (max-width: 900px) {
    .imgtitle2 {
        margin-left: 60%;
        margin-top: 400px;
    }
}

@media (min-width: 900px) and (max-width: 1000px) {
    .imgtitle2 {
        margin-left: 65%;
        margin-top: 450px;
    }
}

@media (min-width: 860px) and (max-width: 900px) {
    .imgtitle2 {
        margin-left: 60%;
        margin-top: 385px;
    }
}

@media (min-width: 1100px) and (max-width: 1300px) {
    .imgtitle2 {
        margin-left: 65%;
        margin-top: 470px;
    }
}

@media (min-width: 1350px) and (max-width: 1498px) {
    .imgtitle2 {
        margin-left: 65%;
        margin-top: 310px;
    }
}

@media (min-width: 1300px) and (max-width: 1400px) {
    .imgtitle2 {
        margin-left: 65%;
        margin-top: 250px;
    }
}

@media (min-width: 1130px) and (max-width: 1300px) {
    .imgtitle2 {
        margin-left: 65%;
        margin-top: 400px;
    }
}

@media (min-width: 1500px) {
    .imgtitle2 {
        margin-left: 65%;
        margin-top: 410px;
    }
}

@media (max-width: 700px) {
    body {
        overflow-x: hidden;
        background-image: url("../image/bac3a.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    /* ARTICLE */
    .backimagesarticlefa {
        height: 750px;
        background-size: 100% 750px;
    }

    .textimagearticlefa,
    .textimagedetails,
    .textimagescontact {
        margin: 140px;
        margin-right: 130px;
        width: 100%;
        margin-right: 10px;
        height: 0px;
    }

        .textimagescontact a {
            text-decoration: none;
            color: rgb(255, 255, 255);
            font-size: 35px;
            /*border: 3px solid white;
padding: 20px;
padding-top: 20px;
padding-bottom: 20px;
border-left-style: none;
border-right-style: none;*/
            /*margin-right: 10px;*/
        }

        .textimagescontact h2 {
            margin-top: 50px;
            margin-right: 10px;
        }

    .paneladress {
        width: 300px;
        font-size: 14px;
        padding-left: 0;
    }

    .iconadres {
        width: 30px;
    }

    .textimagearticlefa a,
    .textimagearticlefa,
    .textimagescontact a {
        font-size: 20px;
    }

    .textimagedetails a {
        font-size: 20px;
    }

    .backimagesporducts {
        height: 700px;
        background-size: 100% 750px;
    }

    .backimagesarticle {
        width: 90%;
        height: 300px;
        float: none;
        background-size: 100% 300px;
        margin-right: auto;
    }

    li a {
        margin: auto;
        padding: 5px 18px;
    }

    ul {
        cursor: pointer;
        animation: fadeIn 0.5s linear 1;
        font-size: 14px;
    }

    .fa-3x {
        font-size: 2em;
    }

    .cap1 {
        margin-top: 50px;
        margin-right: 8px;
        margin-left: 0px;
        margin-bottom: 50px;
    }

    .searchtext {
        margin-right: 50px;
    }

    .callinfo {
        text-align: center;
        width: 90%;
        padding-bottom: 10px;
        padding-left: 14px;
        font-size: small;
        margin-top: 80px;
    }


    .imgtitle2 {
        display: none;
    }

    .content {
        background-image: url();
        background-size: contain;
        background-position-x: 30%;
        margin: auto;
        width: 100%;
    }

    .toggle .tabs {
        width: 100%;
        height: auto;
        padding-right: 20px;
    }

    .container1 {
        width: 100%;
        height: 300px;
        margin: auto;
        margin-top: 10px;
    }

    .search {
        margin-right: 20px;
    }

        .search.open {
            width: 290px;
        }

    .container2 {
        width: 100%;
        height: 300px;
        margin: auto;
        margin-top: 10px;
    }

    .footer {
        min-height: 100px;
        background-image: url("../image/baca700.png");
    }

    .backimagescontact {
        height: 300px;
        background-size: 100% 700px;
    }

    .backimagesabout {
        height: 550px;
        /*background-size: 100% 700px;*/
        background-size: cover;
    }

    .textimagesabout a {
        text-decoration: none;
        color: rgb(255, 255, 255);
        /*border: 3px solid white;*/
        padding-top: 20px;
        padding-bottom: 20px;
        border-left-style: none;
        border-right-style: none;
        margin-right: 10px;
    }

    .textimagesabout h4 {
        color: white;
    }

    .textimagesabout {
        width: 90%;
        margin-right: 10px;
        margin-top: 220px;
    }

        .textimagesabout h4 {
            /*font-size: 20px;*/
            padding: 20px;
            color: gray
        }

            .textimagesabout h4 span {
                /*font-size: 20px;*/
            }

    /* ............details............................... */
    .backimagesdetails {
        height: 700px;
        background-size: 100% 700px;
    }

    .backimagesdetailsprojectpage1 {
        height: 700px;
        background-size: 100% 700px;
    }

    .panelcentercontact {
    }

    .backimagesproductdetails {
        width: 90%;
        height: 300px;
        float: none;
        background-size: 100% 300px;
        margin-right: auto;
    }

    .backtextdetais {
        width: 95%;
        margin: auto;
        height: auto;
        box-shadow: none;
        padding: 0;
        padding-bottom: 5px;
    }

    .tozihattitle {
        font-size: 18px;
    }

    .icondetails i {
        padding-right: 15px;
    }

    .backproductdetails {
        height: auto;
        min-height: 500px;
    }

    /* ............project............................. */
    .backimagesprojects {
        /*height: 700px;*/
        background-size: 100% 700px;
    }

    .alllistproject {
        width: 100%;
        height: 180px;
        border-bottom: none;
    }

    .subjectproject {
        width: 100px;
        margin: auto;
        padding: auto;
    }

        .subjectproject:hover {
            border-bottom: 1px solid black;
        }
}

@media (max-width: 900px) {
    .more {
        /* display: none; */
    }
}

@media (min-width: 1300px) {
    .more {
        float: right;
        font-size: 16px;
        margin-right: 40%;
        display: none;
    }

    .more {
        display: none;
    }
}

@media screen and (min-width: 490px) and (max-width: 700px) {
    .content1 {
        min-height: 220px;
    }

    .containeritem {
        clear: none;
        position: relative;
        width: 150px;
        float: right;
        max-width: 100%;
        padding: 0px;
        height: auto;
        margin: 5px;
        margin-top: 5px;
        margin-top: 10px;
    }
}

.callinfo a {
    text-decoration: none;
    color: #eaedeb;
}

.callinfo {
    position: sticky;
}

    .callinfo.second {
        float: inline-end;
        display: table-column-group;
        clear: both;
        z-index: 2;
    }

.backicon {
    width: 30%;
    height: 50px;
    background-color: #a2d612;
}

.more {
    float: none;
    font-size: 16px;
}

    .more:hover {
        animation: fadeIn 1s linear 1;
    }

@media (min-width: 400px) and (max-width: 900px) {
    .footer {
        background-size: 100% 100%;
    }

    .backimagescontact {
        height: 00px;
        background-size: 100% 700px;
    }

    .backproductdetails {
        width: 100%;
        height: 500px;
    }

    .backimagesproductdetails {
        width: 80%;
        height: 300px;
        background-size: 100% 300px;
        float: none;
        margin-right: auto;
    }

    .backtextdetais {
        height: auto;
    }
}

.tbox1r {
    background-image: url("");
    background-size: cover;
}

.ls {
    width: 100px;
    border: none;
    font-size: 10px;
    background-color: transparent;
}

    .ls a:hover {
        width: 100px;
        border: none;
        font-size: 10px;
        background-color: transparent;
    }

#slider4 {
    padding: 0;
    overflow: visible;
}

.txt {
    max-width: 360px;
    text-align: justify;
    direction: rtl;
    padding-left: 23px;
    font-family: vazir;
    line-height: 2;
    font-size: 16px;
}

@media screen and (min-width: 1200px) and (max-width: 1300px) {
    .txt {
        margin-top: -325px;
    }
}

@media screen and (min-width: 1300px) and (max-width: 1500px) {
    .txt {
        margin-top: -248px;
    }
}

@media screen and (min-width: 1171px) {
    .container {
        margin-top: -75px;
        margin-right: 38%;
    }
}

@media screen and (min-width: 1500px) {
    .container {
        margin-top: -29px;
        margin-right: 41%;
    }

    .txt {
        margin-top: -50px;
    }
}

@media screen and (min-width: 700px) {
    .footer {
        margin-top: -154px;
    }
}

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

@media screen and (min-width: 900px) and (max-width: 1200px) {
    .txt {
        margin-top: -300px;
        max-width: 310px;
    }
}

@media screen and(min-width: 700px) and (max-width: 900px) {
    .txt {
        font-size: 9px;
        margin-top: -31px;
        max-width: 250px;
    }
}

.mores {
    background-color: rgba(0, 0, 0, 0.09);
    border-top: #222322b3 4px solid;
    border-left: #434443b3 2px solid;
    padding: 5px 55px;
    margin-top: 0;
    clear: both;
    color: #fff;
    border-radius: 20px 0px 20px 0px;
    font-size: 18px;
    z-index: 999;
    position: relative;
    float: right;
}

/* .backasliteamwork {
  width: 100%;
  height: 500px;
  margin: auto;
  background-color: transparent;
  clear: both;
} */
.teamtext {
    width: 40%;
    height: 300px;
    margin: auto;
    margin-top: auto;
    margin-right: auto;
    text-align: right;
    padding: 10px;
    font-family: vazir;
    background-color: transparent;
    float: right;
    margin-top: 20px;
    margin-right: 200px;
    line-height: 2;
}

    .teamtext a {
        text-decoration: none;
        color: black;
        float: right;
    }

.imageteam {
    width: 30%;
    height: 400px;
    margin: auto;
    float: left;
    margin-left: 100px;
}

.matnmores {
    line-height: 2;
    font: bold;
    padding: 10px 125px;
    clear: both;
    color: black;
    border-radius: 20px 0px 20px 0px;
    font-size: 18px;
    z-index: 999;
    position: relative;
    float: right;
    margin-right: 20px;
    margin-left: 20px;
    width: 70%;
    text-align: right;
}

.backasliimgtext {
    width: 100%;
    /*height: 300px;*/
    height: auto;
    margin: auto;
    background-color: transparent;
    clear: both;
}

.backimagesabout2 {
    width: max-content;
    height: auto;
    margin: auto;
    box-shadow: 3px 3px 3px 3px #4e5f27ab;
}

    .backimagesabout2 img {
        width: 100%;
        height: 700px;
    }

.textimagabout {
    width: 100%;
    height: 300px;
    margin: auto;
    margin-right: auto;
    margin-right: auto;
    background-color: transparent;
    /*float: right;*/
    text-align: right;
    font-size: 24px;
    /*margin-right: 160px;*/
    font: bold;
    text-shadow: 2px 2px #cecece;
    text-align: justify;
    direction: rtl;
    margin: auto;
}

.matnmores img {
    width: 30%;
    height: 300px;
    /* margin-left: 20%; */
    border-radius: 50%;
    opacity: 0.7;
    display: none;
}

.mores:hover {
    animation: fadeIn 1s linear 1;
    background-color: rgba(0, 0, 0, 0.2);
    border-top: #7ba810b3 4px solid;
    border-left: #87b40cb3 2px solid;
}

.imgtitle2:hover {
    animation: fadeIn 1s linear 1;
    cursor: pointer
}

.txtd {
    font-size: 14px;
    font-family: vazir;
    /* direction: rtl; */
    padding: 10px;
    text-align: left;
    margin-top: 245px;
    color: white;
    clear: left;
    position: absolute;
    width: 100%;
    max-width: 500px;
    direction: rtl;
    text-align: justify;
}

.tbox1r img {
    right: 0;
    margin: auto;
    clear: both;
    border-radius: 100%;
    width: 250px;
    height: 250px;
    margin: auto;
    float: none;
    clear: both;
}

.tbox1r {
    text-align: center;
}

@media (max-width: 700px) {
    .contentp {
        margin-top: auto;
        clear: inherit;
    }

    .name-form {
        width: 80%;
        height: auto;
        float: right;
        margin: auto;
        margin-top: 5px;
        font-size: 12px;
        margin-right: 100px;
    }

    .name-form1 {
        width: 80%;
        height: auto;
        /* float: right; */
        margin-top: 5px;
        font-size: 12px;
        margin-right: 100px;
    }

    .callinfo.s img {
        clear: both;
        margin-left: 134px;
    }

    .aptionpanelabout {
        width: 90%;
        margin-right: auto;
        float: none;
        margin-top: 10px;
        transition: none;
        cursor: none;
    }

        .aptionpanelabout:hover {
            box-shadow: none;
            border-radius: 5px 0;
            margin-top: 1px;
        }

    .backimagesabouttehran {
        height: auto;
        margin-top: 180px;
    }

    .imges1 {
        width: 90%;
        margin-top: 40px;
        float: none;
        height: 250px;
        margin-right: auto;
    }

        .imges1 img {
            height: 250px;
        }

    .paneladress2 {
        width: 290px;
    }

    .matnmores img {
        width: 50%;
        height: 180px;
        /* margin-left: 20%; */
        border-radius: 50%;
        opacity: 0.7;
    }

    .mores {
        display: none;
        float: right;
        /* width: 80%;
      margin-right: 0px; */
    }

    .txtd {
        position: absolute;
        text-align: center;
        width: 90%;
        margin-top: 260px;
        padding: 20px;
    }

    .wrapper {
        margin-top: 160px;
    }

    .callinfo.s {
        margin-top: 20px;
    }

    .content1 {
        min-width: 0;
    }

    .tbox1r img {
        display: none;
    }

    .containeritem.im {
        display: none;
    }

    .container {
        display: none;
    }

    .font-aval {
        width: 90%;
        margin-left: 20px;
    }
}

@media (max-width: 568px) and (min-width: 320px) {
    .backimagesabout2 img {
        height: 190px;
    }

    .textimagabout {
        margin-top: -200px;
        padding: 5px;
        font-size: 18px;
        margin-right: auto;
        width: 90%;
        height: auto;
    }

    .imageteam {
        width: 100%;
        margin: auto;
    }

    .teamtext {
        width: 90%;
        margin: auto;
        height: auto;
    }

    .backimagesabout2 {
        height: auto;
        width: 80%;
        box-shadow: none;
    }

    .backimagestozihatbontan {
        height: auto;
        margin: auto;
        width: 90%;
        float: none;
    }

    .imagesbonyan {
        height: 300px;
    }

        .imagesbonyan img {
            height: 300px;
        }

    .bonyantozihat {
        height: 300px;
    }

    .moresabout {
        margin-right: 20px;
        margin-top: 20px;
        background-color: #00000018;
        height: auto;
        text-align: right;
        padding-right: 10px;
    }

        .moresabout p {
            width: 90%;
            line-height: 2;
        }

    .moresabout2 {
        margin: auto;
        width: 90%;
        float: none;
        font-size: 18px;
        text-align: center;
    }

    .backasliteamwork {
        height: auto;
    }

    .grid figure {
        margin: auto;
        min-width: auto;
        margin-top: 20px;
        max-width: auto;
        max-height: auto;
        width: 90%;
        float: none;
    }

    .contenta {
        width: 100%;
        height: auto;
    }

    .matnmores {
        width: 90%;
        text-align: right;
        margin: auto;
        float: none;
        padding: 0;
    }
}

@media (min-width: 1500px) {
    .title1 {
        margin-left: 18%;
    }
}

@media (min-width: 700px) {
    .cap1 {
        display: none;
        margin-top: 90px;
        /* float: right; */
    }
}

@media (min-width: 800px) and (max-width: 1400px) {
    .im {
        width: 128px;
    }

    .container {
        height: 350px;
        width: 370px;
    }

    .txtd {
        max-width: 400px;
        padding-left: 50px;
    }

    .aptionpanelabout {
        margin-right: 180px;
    }

    .backimagestozihatbontan {
        margin-right: 110px;
    }

    .imagesbonyan {
        height: 300px;
    }

        .imagesbonyan img {
            height: 300px;
        }

    .backbonyan {
        height: auto;
    }

    .moresabout2 {
        margin-top: 100px;
        margin-right: 60px;
    }

    .grid figure {
        max-width: 340px;
    }

    .moresabout {
        margin-right: 120px;
    }
}

@media (min-width: 700px) and (max-width: 750px) {
    .content1 {
        margin-top: -575;
    }

    .rslides1 {
        margin-right: -165px;
    }

    .txt {
        font-size: 8px;
        max-width: 189px;
        height: 0px;
    }
}

@media (min-width: 750px) and (max-width: 900px) {
    .containeritem img {
        height: 200px;
        width: 200px;
    }

    .tab {
        margin: 15px 22px;
        width: 120px;
        float: right;
        padding: 10px 15px;
    }

    .containeritem1 {
        float: none;
        margin-left: 37%;
    }

    .content1 {
        margin-top: -575;
    }

    .mores {
        margin-top: 30px;
        margin-right: 20px;
    }

    .matnmores img {
        width: 40%;
        height: 250px;
        /* margin-left: 20%; */
        border-radius: 50%;
        opacity: 0.7;
    }

    .callinfo {
        margin-top: 250px;
        width: 33%;
        margin-right: 0px;
    }

    .container {
        margin-right: 230px;
        margin-top: -20px;
    }

    .rslides1 {
        margin-right: -165px;
        margin-top: 70px;
    }

    .txt {
        font-size: 12px;
        max-width: 270;
        height: 91px;
        margin-top: -380px;
    }

    .cap1 {
        display: none;
        margin-top: 90px;
        /* float: right; */
    }

    .subjectproject {
        width: 80px;
    }

    .backimagesprojects {
        height: 500px;
        background-size: 100% 500px;
    }
}

@media (min-width: 700px) {
    .lanbtn {
        display: none;
    }

    .containeritem.first {
        clear: both;
        margin-right: 0px;
        margin-top: 0px;
    }

    .f1 {
        clear: both;
        margin-right: 10px;
    }
}

/* -------------------------------------------------------------
--------------------------------------------------------------- */
@media (min-width: 320px) and (max-width: 350px) {
    .tab {
        margin: 20px auto auto auto;
        width: 120px;
        float: none;
        padding: 10px 18px;
    }

    .tab3 {
        margin-left: 80px;
    }
}

@media (min-width: 360px) and (max-width: 700px) {

    .tab3 {
        margin-right: 100px;
    }

    .search {
        margin-right: 20px;
        width: 50px;
        height: 50px;
        /*margin-top: 5px;*/
        margin-top: -148px;
    }

    .backsearch {
        margin-top: -60px;
        height: 51px;
    }

    .search-button {
        right: 0px;
        top: -15px;
    }

    .search-icon::before {
        right: -2px;
        top: 17px;
    }

    .search-icon::after {
        right: -8px;
        top: 25px;
    }
}

@media (max-width: 700px) {
    .titrandtextbonyan h2 {
        font-size: 18px;
    }

    .contentp {
        margin-top: auto;
        clear: inherit;
    }

    .name-form {
        width: 80%;
        height: auto;
        float: right;
        margin: auto;
        margin-top: 5px;
        font-size: 12px;
        margin-right: 100px;
    }

    .name-form1 {
        width: 80%;
        height: auto;
        /* float: right; */
        margin-top: 5px;
        font-size: 12px;
        margin-right: 100px;
    }

    .callinfo.s img {
        clear: both;
        margin-left: 134px;
    }

    .aptionpanelabout {
        width: 90%;
        margin-right: auto;
        float: none;
        margin-top: 10px;
        transition: none;
        cursor: none;
    }

        .aptionpanelabout:hover {
            box-shadow: none;
            border-radius: 5px 0;
            margin-top: 1px;
        }

    .backimagesabouttehran {
        height: auto;
        margin-top: 310px;
    }

    .imges1 {
        width: 90%;
        margin-top: 40px;
        float: none;
        height: 250px;
        margin-right: auto;
        margin-top: 20px;
    }

        .imges1 img {
            height: 250px;
        }

    .paneladress2 {
        width: 290px;
    }

    .matnmores img {
        width: 50%;
        height: 180px;
        /* margin-left: 20%; */
        border-radius: 50%;
        opacity: 0.7;
    }

    .mores {
        display: none;
        float: right;
        /* width: 80%;
      margin-right: 0px; */
    }

    .txtd {
        position: absolute;
        text-align: center;
        width: 90%;
        margin-top: 240px;
        padding: 20px;
    }

    .wrapper {
        margin-top: 160px;
    }

    .callinfo.s {
        margin-top: 20px;
    }

    .content1 {
        min-width: 0;
        background-image: none;
    }

    .txt {
        background-color: #00000018;
        width: 90%;
        padding: 10px;
        margin: auto;
    }

    .tbox1r img {
        display: none;
    }

    .containeritem.im {
        display: none;
    }

    .container {
        display: none;
    }

    .font-aval {
        width: 90%;
        margin-left: 20px;
    }

    /* page mskoni edari vilaei */
    .textedariTitle,
    .textedariTitleleft {
        margin: 5px 10px auto auto;
        width: 90%;
        padding: 0;
        box-shadow: none;
    }

    .containerEdari,
    .containerEdarileft {
        margin: 5px auto auto 10px;
        height: 250px;
        width: 90%;
    }

    .backpageEdari {
        height: auto;
    }

    /* page details.......................................... */
    .textrightloader {
        width: 100%;
        height: auto;
        margin-top: auto;
    }

    .BackAsliProjectDetails {
        height: auto;
    }

    .detailspanelleft {
        margin-top: auto;
        width: 90%;
        float: none;
        height: auto;
    }

    .videoproject {
        height: 250px;
        width: 90%;
        margin-left: 15px;
        margin-top: auto;
    }

    .tozihatprojectdetails {
        width: 90%;
        float: none;
        font-size: 14px;
        margin-left: auto;
        height: auto;
    }

    .containerg {
        padding: 35px 0;
        display: none;
    }

    .gallery-wrap {
        height: 50%;
    }

    .item {
        height: 100%;
    }

    .videoproject img {
        height: 250px;
    }

    .nameDesinerProjectEdari {
        font-size: 12px;
    }

    .titleNameProjectEdari,
    .dateProjectEdari,
    .nameDesinerProjectEdari {
        width: 90%;
        font-size: 14px;
    }

    .textimagearticlefa,
    .textimagedetails {
        width: 50%;
    }

    .tozihatProjectEdari {
        width: 90%;
    }

    .projectloadeimagesleft {
        width: 100%;
        height: 150px;
    }

        .projectloadeimagesleft img {
            height: 150px;
        }
}

@media (max-width: 568px) and (min-width: 320px) {
    .backimagesabout2 img {
        height: 190px;
        /*margin-top: -70px*/
    }

    .textimagabout {
        margin-top: -300px;
        padding: 12px;
        font-size: 18px;
        margin-right: auto;
        width: 90%;
        height: auto;
    }

    .imageteam {
        width: 100%;
        margin: auto;
    }

    .teamtext {
        width: 90%;
        margin: auto;
        height: auto;
    }

    .backimagesabout2 {
        height: auto;
        width: 80%;
        box-shadow: none;
    }

    .backimagestozihatbontan {
        height: auto;
        margin: auto;
        width: 90%;
        float: none;
    }

    .imagesbonyan {
        height: 300px;
    }

        .imagesbonyan img {
            height: 300px;
        }

    .bonyantozihat {
        height: 300px;
    }

    .moresabout {
        margin-right: 20px;
        margin-top: 20px;
        background-color: #00000018;
        height: auto;
        text-align: right;
        padding-right: 10px;
    }

        .moresabout p {
            width: 90%;
            line-height: 2;
        }

    .moresabout2 {
        margin: auto;
        width: 90%;
        float: none;
        font-size: 18px;
        text-align: center;
    }

    .backasliteamwork {
        padding-left: 20px;
    }

    .containerteam {
        width: 90%;
        margin-right: auto;
        float: none;
    }

    .backasliteamwork {
        height: auto;
    }

    .grid figure {
        margin: auto;
        min-width: auto;
        margin-top: 20px;
        max-width: auto;
        max-height: auto;
        width: 90%;
        float: none;
    }

    .contenta {
        width: 100%;
        height: auto;
    }

    .matnmores {
        width: 90%;
        text-align: right;
        margin: auto;
        float: none;
        padding: 0;
    }
}

@media (min-width: 1500px) {
    .title1 {
        margin-left: 18%;
    }
}

@media (min-width: 700px) {
    .cap1 {
        display: none;
        margin-top: 90px;
        /* float: right; */
    }
}

@media (min-width: 800px) and (max-width: 1400px) {
    .im {
        width: 128px;
    }

    .container {
        height: 350px;
        width: 370px;
    }

    .txtd {
        max-width: 400px;
        padding-left: 50px;
    }

    .aptionpanelabout {
        margin-right: 80px;
    }

    .iconadres {
        margin-right: 40px;
    }

    .paneladress2 {
        font-size: 15px;
    }

    .backimagestozihatbontan {
        margin-right: 110px;
    }

    .imagesbonyan {
        height: 300px;
    }

        .imagesbonyan img {
            height: 300px;
        }

    .backbonyan {
        height: auto;
    }

    .moresabout2 {
        margin-top: 100px;
        margin-right: 60px;
    }

    .grid figure {
        max-width: 340px;
    }

    .moresabout {
        margin-right: 120px;
    }

    .backasliteamwork {
        padding-left: 50px;
    }

    .containerteam {
        height: 280px;
    }

    .imageteamwork {
        height: 280px;
    }
}

@media (min-width: 700px) and (max-width: 750px) {
    .content1 {
        margin-top: -575;
    }

    .rslides1 {
        margin-right: -165px;
    }

    .txt {
        font-size: 8px;
        max-width: 189px;
        height: 0px;
    }
}

@media (min-width: 750px) and (max-width: 900px) {
    .containeritem img {
        height: 200px;
        width: 200px;
    }

    .containeritem1 {
        float: none;
        margin-left: 37%;
    }

    .content1 {
        margin-top: -575;
    }

    .mores {
        margin-top: 30px;
        margin-right: 20px;
    }

    .matnmores img {
        width: 40%;
        height: 250px;
        /* margin-left: 20%; */
        border-radius: 50%;
        opacity: 0.7;
    }

    .callinfo {
        margin-top: 250px;
        width: 33%;
        margin-right: 0px;
    }

    .container {
        margin-right: 230px;
        margin-top: -20px;
    }

    .rslides1 {
        margin-right: -165px;
        margin-top: 70px;
    }

    .txt {
        font-size: 12px;
        max-width: 270;
        height: 91px;
        margin-top: -380px;
    }

    .cap1 {
        display: none;
        margin-top: 90px;
        /* float: right; */
    }

    .subjectproject {
        width: 80px;
    }

    .backimagesprojects {
        height: 500px;
        background-size: 100% 500px;
    }
}

@media (min-width: 700px) {
    .lanbtn {
        display: none;
    }

    .containeritem.first {
        clear: both;
        margin-right: 0px;
        margin-top: 0px;
    }

    .f1 {
        clear: both;
        margin-right: 10px;
    }
}

/* -------------------------------------------------------------
--------------------------------------------------------------- */
@media (max-width: 360px) {
    .before-form {
        height: auto;
        margin-top: auto;
        width: 100%;
        margin-right: auto;
    }

    .container1 {
        width: 100%;
        height: 250px;
        margin: auto;
        margin-top: 30px;
    }

    .search {
        margin-right: 20px;
        width: 50px;
        height: 50px;
        margin-top: -35px;
    }

    .backsearch {
        margin-top: -60px;
        height: 60px;
    }

    .search.open {
        width: 290px;
    }

    .search-icon {
        width: 15px;
        height: 15px;
    }

        .search-icon::before {
            right: -3px;
            top: 13px;
        }

        .search-icon::after {
            right: -8px;
            top: 20px;
        }

    .search-button {
        right: 0px;
        top: -10px;
    }

    .container1 {
        margin-top: 20px;
    }

    .toggle .tabs {
        width: 100%;
        height: auto;
        margin: auto;
        padding: 0;
    }

    .before-form {
        height: auto;
        width: 100%;
        margin-right: auto;
    }

    .backimagescontact {
        height: 300px;
        background-size: 100% 700px;
    }

    .aptionpanelabout {
        width: 90%;
        margin-right: auto;
        float: none;
        margin-top: 10px;
        transition: none;
        cursor: none;
    }

        .aptionpanelabout:hover {
            box-shadow: none;
            border-radius: 5px 0;
            margin-top: 1px;
        }

    .backimagesabouttehran {
        height: auto;
        margin-top: 350px;
    }

    .font-aval {
        float: none;
        width: 100%;
        height: auto;
        margin: auto;
        margin-top: 5px;
    }

    .paneladress2 {
        width: 310px;
        padding: 0;
        padding-top: 30px;
    }

    .phone-number,
    .email,
    .adress {
        margin-top: 0px;
        height: 30px;
        width: 60px;
    }

    .text-contact {
        margin-top: 0px;
        text-align: center;
        float: none;
    }

    .contact-form {
        width: 100%;
        margin-left: 22px;
        margin-top: auto;
        padding-top: 110px;
        margin-bottom: auto;
        float: none;
    }

    .name-forminput1 {
        margin-left: 35px;
        margin-right: 40px;
        margin-top: 5px;
    }

    .name-forminput2 {
        margin-left: 35px;
        width: 300px;
        margin-right: 40px;
        margin-top: 5px;
    }

    .button-form {
        padding: 5px 10px;
        font-size: 12px;
        margin-right: 40px;
        margin-top: 10px;
    }

    .comment {
        width: 300px;
        margin-right: 40px;
        margin-top: 5px;
        font-size: 12px;
        clear: both;
    }

    .paneladress2 {
        width: 290px;
    }
}

.menu.mobile {
    flex-direction: column;
    padding-top: 30px !important;
}


.search-bar input,
.search-btn,
.search-btn:before,
.search-btn:after {
    transition: all 0.25s ease-out;
}

.search-bar input,
.search-btn {
    width: 3em;
    height: 3em;
}

    .search-bar input:invalid:not(:focus),
    .search-btn {
        cursor: pointer;
    }

    .search-bar,
    .search-bar input:focus,
    .search-bar input:valid {
        width: 100%;
    }

        .search-bar input:focus,
        .search-bar input:not(:focus) + .search-btn:focus {
            outline: transparent;
        }

.search-bar {
    margin: auto;
    padding: 1.5em;
    justify-content: center;
    max-width: 30em;
}

    .search-bar input {
        background: transparent;
        border-radius: 1.5em;
        box-shadow: 0 0 0 0.4em #171717 inset;
        padding: 0.75em;
        transform: translate(0.5em,0.5em) scale(0.5);
        transform-origin: 100% 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

        .search-bar input::-webkit-search-decoration {
            -webkit-appearance: none;
        }

        .search-bar input:focus,
        .search-bar input:valid {
            background: #fff;
            border-radius: 0.375em 0 0 0.375em;
            box-shadow: 0 0 0 0.1em #d9d9d9 inset;
            transform: scale(1);
        }

.search-btn {
    background: #171717;
    border-radius: 0 0.75em 0.75em 0 / 0 1.5em 1.5em 0;
    padding: 0.75em;
    position: relative;
    transform: translate(0.25em,0.25em) rotate(45deg) scale(0.25,0.125);
    transform-origin: 0 50%;
}

    .search-btn:before,
    .search-btn:after {
        content: "";
        display: block;
        opacity: 0;
        position: absolute;
    }

    .search-btn:before {
        border-radius: 50%;
        box-shadow: 0 0 0 0.2em #f1f1f1 inset;
        top: 0.75em;
        left: 0.75em;
        width: 1.2em;
        height: 1.2em;
    }

    .search-btn:after {
        background: #f1f1f1;
        border-radius: 0 0.25em 0.25em 0;
        top: 51%;
        left: 51%;
        width: 0.75em;
        height: 0.25em;
        transform: translate(0.2em,0) rotate(45deg);
        transform-origin: 0 50%;
    }

    .search-btn span {
        display: inline-block;
        overflow: hidden;
        width: 1px;
        height: 1px;
    }

/* Active state */
.search-bar input:focus + .search-btn,
.search-bar input:valid + .search-btn {
    background: #2762f3;
    border-radius: 0 0.375em 0.375em 0;
    transform: scale(1);
}

    .search-bar input:focus + .search-btn:before,
    .search-bar input:focus + .search-btn:after,
    .search-bar input:valid + .search-btn:before,
    .search-bar input:valid + .search-btn:after {
        opacity: 1;
    }

    .search-bar input:focus + .search-btn:hover,
    .search-bar input:valid + .search-btn:hover,
    .search-bar input:valid:not(:focus) + .search-btn:focus {
        background: #0c48db;
    }

    .search-bar input:focus + .search-btn:active,
    .search-bar input:valid + .search-btn:active {
        transform: translateY(1px);
    }

@media screen and (prefers-color-scheme: dark) {
    input {
        color: #f1f1f1;
    }



    .search-bar input {
        box-shadow: 0 0 0 0.4em #f1f1f1 inset;
    }

        .search-bar input:focus,
        .search-bar input:valid {
            background: #3d3d3d;
            box-shadow: 0 0 0 0.1em #3d3d3d inset;
        }

    .search-btn {
        background: #f1f1f1;
    }
}

.search.btn {
    position: absolute;
    margin-top: 0px;
    border: 1px #86b309 solid;
    background: #4d4d4d;
    color: white;
    cursor: pointer;
}

.search-box {
    font-size: 14px;
    text-align: right;
}

li.active {
    background: transparent;
    border-radius: 40px 0;
}

.pagination {
    direction: rtl;
    background-color: #f7f7f7;
    width: 100%
}

@media (max-width: 700px) {
    .pagination li a {
        padding: 0px;
        min-width: 50px;
    }

    .pagination {
        width: 100%;
    }
}

.prtl {
    /* width: 90%;*/
    text-align: center;
    direction: rtl;
    background-color: #f0f0f000;
    margin: 50px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.backasliProduct.backsearch.search {
    margin-top: 5px;
}

@media (max-width: 800px) {
    .panels {
        padding-bottom: 0px;
    }

    .backasliProduct.backsearch.search {
        margin-top: -40px;
    }
}

@media (min-width: 800px) {


    .backasliProduct.backsearch.search {
        margin-top: 5px;
    }
}

@media (min-width: 1100px) and (max-width: 1400px) {
    #slider4 {
        margin-top: -74px;
    }
}

@media (min-width: 1400px) {
    .title1 {
        margin-left: 31%;
        margin-top: 630px;
    }

    #slider4 {
        margin-top: -74px;
    }
}

.imgtitle2 {
    width: auto;
}