@font-face {
    font-family: "IranSans";
    src: url("fonts/IRANSansWeb_Medium.woff2");
  }


::selection {
    background-color:#008195;
    color: #FFF;
}
body {
    font-family: IranSans;
}
* {
    font-family: IranSans;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

a{
    color: white;
    text-decoration: none;
}

.title {
    background: rgb(0,0,0);
    background: linear-gradient( 
180deg
 , rgb(0 0 0 / 79%) 0%, rgba(255,255,255,0) 100%);
    height: 9.6%;
    width: 100%;
    position: absolute;
    z-index: 1000;
}

.logo-top{
	background-image: url("../img/logo 2.png");
    height: 73px;
    background-repeat: no-repeat;
    width: 153px;
    position: absolute;
    left: 6.5%;
}

/* .logo-top {
    width: 10%;
    position: absolute;
    left: 5%;
    top: 0px;
} */

.title-page {
    display: inline-block;
    position: relative;
    right: -43%;
    padding-left: 75px;
    color: white;
    top: 26px;
}

.title-page a:hover{
    color: #2C89E5;
    transition: 0.3s;
}

.language {
    position: absolute;
    width: 54px;
    height: 26px;
    background-color: white;
    margin-top: 23px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
	cursor: pointer;
}

.right-slide {
    position: absolute;
    width: 78px;
    height: 78px;
    right: 1%;
    top: 35%;
    background: linear-gradient(
270deg
, rgba(44,137,229,1) 0%, rgba(0,212,255,0) 100%);
    border-radius: 50px;
}

.left-slide {
    position: absolute;
    width: 78px;
    height: 78px;
    left: 1%;
    top: 35%;
    background: linear-gradient(
90deg
, rgba(44,137,229,1) 0%, rgba(0,212,255,0) 100%);
    border-radius: 50px;
}

.alert-language-title h4{
	text-align: center;
}

.alert-language {
    position: fixed;
    z-index: 1000000000;
    width: 34%;
    height: 26%;
    background-color: #fff;
    top: 33%;
    border-radius: 8px;
    left: 37%;
	box-shadow: black 0 0 20px 1px;
}

.alert-language-title {
    margin-top: 7.4%;
}

.black-board{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #00000094;
	z-index: 1000000000;
}

.alert-language-button li{
	list-style-type:none;
	display: inline-block;
	width: 49.58%;
    height: 40px;
	padding-top: 1.3%;
}

.alert-language-button {
    margin-top: 11.1%;
}

.alert-language-button h4{
	position: absolute;
	text-align: center;
	width: 48%
}

.alert-language-button-ok{
	background-color: green;
	border-bottom-left-radius: 8px;
	cursor: pointer;
}

.alert-language-button-no{
	background-color: red;
	border-bottom-right-radius: 8px;
	cursor: pointer;
}

.alert-language{
	display: none;
}

.black-board{
	display:none;
}




.stick{
	position: fixed;
    background: white;
    box-shadow: #00000073 0 0 12px 4px;
}

.color{
	color: #2C89E5;
}
	
.color-language{
	box-shadow: #000 0 0 6px 0px;
}

.logo-stick{
	background-image:url("../img/logo.png");
	top: 2.5px;
	
}

.right-slide{
    cursor: pointer;
}

.left-slide{
    cursor: pointer;
}

.slide-show img {
    width: 100%;
    position: absolute;
}

.hide{
    display: none;
}

.active{
    display: block;
}

.scroll-top {
    position: fixed;
    width: 50px;
    height: 50px;
    background-color: #2c89e5b5;
    border-radius: 65%;
    bottom: 3%;
    left: 1.5%;
    padding-top: 0.5%;
    padding-left: 0.856%;
    z-index: 100000000;
    cursor: pointer;
    display: none;
}

.scroll-top:hover{
    background-color: #2C89E5;
    transition-duration: 0.3s;
}

.introduc-text p {
    width: 80%;
    text-align: left;
    direction: ltr;
    margin-left: 8%;
}

.services {
    margin-top: 11%;
    width: 54%;
    margin-left: 3.8%;
}

.services-button {
    width: 9%;
    height: 42px;
    background-color: #ffffff;
    padding-top: 0.4%;
    padding-left: 1.5%;
    border-radius: 2px;
    margin-left: 4.5%;
    margin-top: 1%;
    border: 2px solid #2c89e5;
    position: absolute;
}

.services-button p {
    color: #2c89e5;
    width: 69% !important;
}

.services img {
    position: absolute;
    top: 129%;
    left: 54%;
    width: 45%;
}

.services-button:hover{
    background-color: #2c89e5;
    transition-duration: 0.5s;
}

.services-button:hover p{
    color: #fff;
    transition-duration: 0.5s;
}

.project{
    margin-top: 11%;
    width: 54%;
    margin-left: 3.8%;
}

.project-button{
    width: 9%;
    height: 42px;
    background-color: #ffffff;
    padding-top: 0.4%;
    padding-left: 1.5%;
    border-radius: 2px;
    margin-left: 33%;
    margin-top: 1%;
    border: 2px solid #2c89e5;
    position: absolute;
}

.project-button p{
    color: #2c89e5;
    width: 69% !important;
} 

.project img {
    position: absolute;
    top: 192%;
    left: 12%;
    width: 15%;
}

.project-button:hover{
    background-color: #2c89e5;
    transition-duration: 0.5s;
}

.project-button:hover p{
    color: #fff;
    transition-duration: 0.5s;
}

.project>p {
    padding-top: 12%;
    margin-left: 61%;
}

.SARPROZ{
    margin-top: 17%;
    width: 54%;
    margin-left: 3.8%;
}

.SARPROZ-button {
    width: 9%;
    height: 42px;
    background-color: #ffffff;
    padding-top: 0.4%;
    padding-left: 1.5%;
    border-radius: 2px;
    margin-left: 4.5%;
    margin-top: 1%;
    border: 2px solid #2c89e5;
    position: absolute;
}

.SARPROZ-button p {
    color: #2c89e5;
    width: 69% !important;
}

.SARPROZ img {
    position: absolute;
    top: 265%;
    left: 54%;
    width: 42%;
}

.SARPROZ-button:hover{
    background-color: #2c89e5;
    transition-duration: 0.5s;
}

.SARPROZ-button:hover p{
    color: #fff;
    transition-duration: 0.5s;
}

.footer {
    width: 100%;
    background-color: #e8e8e8;
    height: 320px;
    margin-top: 9%;
    border-top: 1px solid #bdbcbc;
}

.footer-logo {
    margin-left: 9%;
    margin-top: 2%;
    width: 12%;
}

.follow-us {
    float: right;
    margin-right: 11%;
    margin-top: 2%;
}

.contact-us {
    float: right;
    margin-right: 10%;
    width: 19%;
    margin-top: 2%;
}

.quick-access {
    float: right;
    margin-right: 14%;
    margin-top: 2%;
}

.quick-access p {
    margin-left: 15%;
    margin-top: 5%;
    color: #656565;
}

.footer-project-p:hover .footer-project-i{
    margin-left: -2.3%;
}

.footer-project-i {
    position: absolute;
    margin-top: 2.8%;
    margin-left: -2.6%;
    font-size: 150%;
    color: #656565;
}

.footer-services-i{
    position: absolute;
    margin-top: 0.4%;
    font-size: 150%;
    color: #656565;
}

.footer-aboutus-i{
    position: absolute;
    margin-top: 0.4%;
    font-size: 150%;
    color: #656565
}

.footer-contactus-i{
    position: absolute;
    margin-top: 0.5%; 
    font-size: 150%; 
    color: #656565;
}

.footer h4{
    font-weight: 100;
    position: absolute;
    bottom: -253%;
    left: 9%;
    color: blue;
}

.acardeoon{
    color: #fff;
}
.acardeoon-add{
    right: 0 !important;
    display: block !important;
}
.acardeoon-menu {
    width: 53%;
    height: 345px;
    background: white;
    position: absolute;
    z-index: 100000000000000000;
    top: 0%;
    border-bottom-left-radius: 0px;
    right: 0;
    display: none;
    padding-right: 7%;
}

.acardeoon-menu-title-1 p {
    color: #2C89E5;
}
.acardeoon-menu-title-2 p {
    color: #2C89E5;
}
.acardeoon-menu-title-3 p {
    color: #2C89E5;
}
.acardeoon-menu-title-4 p {
    color: #2C89E5;
}
.acardeoon-menu-title-5 p {
    color: #2C89E5;
}

.acardeoon-menu-title-1{
    list-style-type: none;
    padding: 10px 42px;
}
.acardeoon-menu-title-2{
    list-style-type: none;
    padding: 10px 42px;
}
.acardeoon-menu-title-3{
    list-style-type: none;
    padding: 10px 42px;
}
.acardeoon-menu-title-4{
    list-style-type: none;
    padding: 10px 42px;
}
.acardeoon-menu-title-5{
    list-style-type: none;
    padding: 10px 42px;
}

.black-board-2{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #0000006b;
    z-index: 1000000000;
    display: none;
}

.acardeoon-menu li {
    padding: 20px 42px !important;
}

.one-slide{
    width: 100%;
}

.sarproz-text{
    margin-left: 7.5%;
    margin-top: 7%;
    font-weight: 100;
}

.blog-of-sarproz {
    padding-left: 8%;
    padding-top: 2%;
}

.footer-services-p {
    color: #000 !important;
    font-weight: 900;
}

.varamin {
    width: 24%;
    border: 1px solid #9a8c8c;
    border-radius: 10px;
    height: 435px;
    box-shadow: 0px 0px 11px 0px #008195;
    display: inline-block;
    margin-left: 11% !important;
}
.foroodgah {
    width: 24%;
    border: 1px solid #9a8c8c;
    border-radius: 10px;
    height: 435px;
    box-shadow: 0px 0px 11px 0px #008195;
    display: inline-block;
}
.ghazvin {
    width: 24%;
    border: 1px solid #9a8c8c;
    border-radius: 10px;
    height: 435px;
    box-shadow: 0px 0px 11px 0px #008195;
    display: inline-block;
}
.gom {
    width: 24%;
    border: 1px solid #9a8c8c;
    border-radius: 10px;
    height: 435px;
    box-shadow: 0px 0px 11px 0px #008195;
    display: inline-block;
    margin-left: 11% !important;
}
.tehran {
    width: 24%;
    border: 1px solid #9a8c8c;
    border-radius: 10px;
    height: 435px;
    box-shadow: 0px 0px 11px 0px #008195;
    display: inline-block;
}
.shahriar {
    width: 24%;
    border: 1px solid #9a8c8c;
    border-radius: 10px;
    height: 435px;
    box-shadow: 0px 0px 11px 0px #008195;
    display: inline-block;
    margin-top: 3%;
}

.foroodgah p {
    color: #008195;
    text-align: center;
    margin-top: 13%;
}
.varamin p {
    color: #008195;
    text-align: center;
    margin-top: 13%;
}
.ghazvin p {
    color: #008195;
    text-align: center;
    margin-top: 13%;
}
.gom p {
    color: #008195;
    text-align: center;
    margin-top: 13%;
}
.tehran p {
    color: #008195;
    text-align: center;
    margin-top: 13%;
}
.shahriar p {
    color: #008195;
    text-align: center;
    margin-top: 13%;
}

.project-of-rasad div{
    margin-left: 3%;
}

.project-of-rasad  a :hover {
    box-shadow: 0px 0px 20px 2px #008195;
    transition-duration: 0.5s;
}

.imam-p {
    width: 85%;
    margin: auto;
}

.img-1{
    display: inline-block;
    width: 40%;
    margin-left: 5%;
    margin-top: 10%;
}
.img-2{
    display: inline-block;
    width: 40%;
    margin-left: 5%;
    margin-top: 10%;
    margin-bottom: 11%;
}


.img-3 {
    width: 60%;
    margin: 0% 18%;
    margin-top: 5%;
}








































@media only screen and (max-width:1441px){
    .stick{
       height: 13.3%;
    }
    .alert-language-button li {
    width: 49.3%;
    }
    .alert-language{
    height: 31.6%;
    }
    .services img {
        top: 162%;
    }
    .project img {
        top: 244%;
    }
    .SARPROZ img {
        top: 333%;
    }
    .services-button p{
        width: 76% !important;
        margin-left: 3%;
    }
    .project-button p {
        width: 76% !important;
        margin-left: 3%;
    }
    .SARPROZ-button p {
        width: 76% !important;
        margin-left: 3%;
    }
    .scroll-top{
        padding-left: 1%;
    }
    .footer h4{
        bottom: -227%;
    }
    .gmail-footer {
        margin-top: 13.6% !important;
    }
    .footer{
        height: 350px;
    }
    .title{
        height: 12.4%;
    }
    .footer-project-i {
        margin-left: -2.9%;
        margin-top: 3.2%;
    }
}

@media only screen and (max-width:1025px){
    .title-page{
        right: -35%;
        padding-left: 48px;
    }
    .services-button{
        width: 13%;
    }
    .services-button p {
        margin-left: 10%;
        margin-top: 1%;
    }
    .project-button{
        width: 13%;
    }
    .project-button p {
        margin-left: 10%;
        margin-top: 1.5%;
    }
    .SARPROZ-button{
        width: 13%;
    }
    .SARPROZ-button p {
        margin-left: 10%;
        margin-top: 1.5%;
    }
    .services img{
        top: 175%;
    }
    .project img{
        top: 264%;
    }
    .SARPROZ img{
        top: 354%;
    }
    .quick-access{
        margin-right: 6%;
    }
    .footer-logo{
        width: 17%;
    }
    .scroll-top{
        padding-left: 1.27%;
        padding-top: 0.7%;
    }
    .follow-us{
        margin-right: 6%;
    }
    .contact-us{
        margin-right: 14%;
    }
    .contact-phonenumber {
        width: 123% !important;
        margin-top: -4.1% !important;
        margin-right: -34% !important;
    }
    .contact-address {
        margin-top: 6% !important;
    }
    .gmail-footer{
        margin-top: 23.8% !important;
    }
    .footer{
        height: 395px;
    }
    .footer h4{
        bottom: -192%;
    }
    .footer-project-i{
        margin-left: -3.9% !important;
        margin-top: 4.2% !important;
    }
    .alert-language{
        width: 54%;
        left: 24%;
    }
    .alert-language-button {
        margin-top: 2.7%;
    }
    .title{
        height: 14.2%;
    }
    .footer-placeholder-icon{
        margin-top: 6.1% !important;
    }
}

@media only screen and (max-width:769px){
    .logo-top{
        left: 7.5%;
    }
    .title-page{
        right: -29%;
        padding-left: 30px;
        top: 23px;
    }
    .services-img{
        opacity: 0.2;
        left: 16% !important;
        top: 155% !important;
        width: 66% !important;
    }
    .services{
        width: 96%;
    }
    .services-button{
        width: 17%;
        padding-top: 0.6%;
        padding-left: 1.7%;
        margin-left: 8%;
    }
    .project{
        width: 96%;
    }
    .proj-text{
        margin-left: 8% !important;
    }
    .project img{
        display: none;
    }
    .project-button{
        width: 17%;
        padding-top: 0.6%;
        padding-left: 1.7%;
        margin-left: 8%;
    }
    .SARPROZ{
        width: 96%;
    }
    .SARPROZ img{
        top: 302%;
        left: 11.6%;
        width: 74%;
        opacity: 0.2;
    }
    .SARPROZ-button{
        width: 17%;
        padding-top: 0.6%;
        padding-left: 1.7%;
        margin-left: 8%;
    }
    .scroll-top{
        padding-left: 1.8%;
        padding-top: 1%;
    }
    .alert-language-title{
        margin-top: 10.4%;
    }
    .alert-language-button li{
        width: 49.45%;
    }
    .alert-language-button {
        margin-top: 3%;
    }
    .footer-logo {
        margin-left: 10%;
        margin-top: 28%;
        width: 23%;
        position: absolute;
    }
    .footer-facebook {
        width: 5.8% !important;
        margin-top: 6% !important;
    }
    .footer-instagram{
        width: 5.8% !important;
    }
    .contact-us {
        margin-right: 19%;
    }
    .footer-call-icon {
        width: 1.7% !important;
    }
    .footer-placeholder-icon {
        width: 1.7% !important;
        margin-top: 8.2%  !important;
    }
    .gmail-footer {
        width: 1.7% !important;
        margin-top: 34.4%  !important;
    }
    .contact-phonenumber {
        width: 164% !important;
        margin-top: -4.1% !important;
        margin-right: -76% !important;
    }
    .footer-project-i {
        margin-left: -5.3% !important;
        margin-top: 5.7% !important;
    }
    .footer h4 {
        bottom: -157%;
    }
    .project-of-rasad div {
        margin-left: 3%;
        width: 34%;
    }
    .gom{
        margin-left: 3% !important;
        margin-top: 5%;
    }
    .ghazvin{
        margin-left: 11% !important;
    }
    .shahriar{
        margin-left: 11% !important;
    }
    .img-3 {
        width: 76%;
        margin: 0% 10%;
        margin-top: 5%;
    }
}

@media only screen and (max-width:426px){
    .title-page{
        display: none;
    }
    .logo-top {
        left: 14.5%;
    }
    .acardeoon {
        color: #fff;
        font-size: 191%;
        float: right;
        margin-right: 8%;
        margin-top: 5%;
        cursor: pointer;
    }
    .stick{
       position: relative !important;
    }
    .color{
        
    }
        
    .color-language{
        
    }
    
    .logo-stick{
        background-image:url("../img/logo 2.png") !important;
        top: 2.5px;
        
    }
    .services-img{
        display: none;
    }
    .SARPROZ img{
        display: none;
    }
    .services p {
        text-align: justify;
    }
    .project p {
        text-align: justify;
    }
    .SARPROZ p {
        text-align: justify;
    }
    .services-button {
        width: 28%;
        padding-top: 1.3%;
        padding-left: 1.7%;
        margin-left: 8%;
    }
    .project-button {
        width: 28%;
        padding-top: 1.1%;
        padding-left: 1.7%;
        margin-left: 8%;
    }
    .services {
        width: 96%;
        margin-top: 31%;
    }
    .project {
        width: 96%;
        margin-top: 29%;
    }
    .SARPROZ {
        width: 96%;
        margin-top: 29%;
    }
    .scroll-top {
        padding-left: 3.1%;
        padding-top: 1.5%;
    }
    .SARPROZ-button {
        width: 28%;
        padding-top: 1.1%;
        padding-left: 1.7%;
        margin-left: 8%;
    }
    .footer {
        height: 1068px;
        margin-top: 26%;
    }
    .alert-language-title {
        margin-top: 17%;
    }
    .alert-language {
        height: 41.8%;
        top: 29%;
    }
    .alert-language-button li {
        width: 49%;
        padding-top: 3.3%;
    }
    .alert-language-button {
        margin-top: 8.8%;
    }
    .quick-access {
        margin-right: 35%;
    margin-bottom: 17%;
    }
    .contact-us {
        margin-right: 34%;
        width: 37%;
        margin-bottom: 17%;
    }
    .footer-project-i {
        margin-left: -10.1% !important;
        margin-top: 10.7% !important;
    }
    .footer-call-icon {
        width: 3.7% !important;
    }
    .footer-placeholder-icon {
        width: 3.7% !important;
        margin-top: 14.2% !important;
    }
    .gmail-footer {
        width: 3.7% !important;
        margin-top: 55.5% !important;
    }
    .follow-us {
        margin-right: 47%;
    }
    .footer-facebook {
        width: 9.8% !important;
        margin-top: -0.4% !important;
        margin-left: 16%;
    }
    .footer-instagram {
        width: 9.8% !important;
    }
    .footer-logo {
        margin-left: 27%;
        margin-top: 210%;
        width: 46%;
        position: absolute;
    }
    .footer h4 {
        bottom: -358%;
        width: 77%;
        left: 19%;
    }
    .close-acardeoon-menu {
        position: absolute;
        right: 11%;
        top: 5%;
        font-size: 186%;
        color: #1c76d0;
        cursor: pointer;
    }
    .stick {
        position: absolute !important;
        top: 0;
        background: linear-gradient( 
180deg
 , rgb(0 0 0 / 79%) 0%, rgba(255,255,255,0) 100%);
        box-shadow: #0000 1px 1px 1px;
    }
    .one-slide {
        width: 100%;
        height: 400px;
    }
    .project-of-rasad div {
        margin-left: 3%;
        width: 73%;
    }
    .varamin{
        margin-left: 13% !important;
    }
    .foroodgah{
        margin-left: 13% !important;
        margin-top: 10%;
    }
    .ghazvin{
        margin-left: 13% !important;
        margin-top: 10%;
    }
    .gom{
        margin-left: 13% !important;
        margin-top: 10%;
    }
    .shahriar{
        margin-left: 13% !important;
        margin-top: 10%;
    }
    .tehran{
        margin-left: 13% !important;
        margin-top: 10%;
    }
    .img-2 {
        display: block;
        width: 95%;
    }
    .img-1{
        width: 95%;
    }
    .img-3 {
        width: 91%;
        margin: 0% 4%;
        margin-top: 8%;
    }

}