*, html {
    margin:0;
    padding:0;
    /*overflow: hidden;*/
    /*scrollbar-color: rebeccapurple green;*/
}
body{
    direction: rtl;


}
p{
    font-family: "IRANYekanWeb",sans-serif;
    font-size: 13px;
}
.main-header{

    height: 100vh;
    width: 100%;
    background-color: red;


}

.main-header nav{
    height: 120px ;
    padding: 0 90px;


}
.main-header nav .left-menu{
    position: absolute;
    left: 70px;
    top: 25px;
}
.main-header nav .left-menu li span {
    height: 30px;
    width: 30px;
    display: inline-block;
    background-position: center;
    background-size: cover;
    float: left;
    background-image: url("../img/icons/light-mode.png");
    cursor: pointer;
}
.main-header nav ul li {
    display: inline;
}
.main-header nav ul li a{
    font-family: "Mj_Thameen", sans-serif;
    text-decoration: none;
}
.main-header nav .left-menu li a{
    margin-top: 6px;
    margin-right: 35px;
    font-size: 16px;
    font-family: "Myriad Pro Regular",sans-serif;
    float: left;
}
.main-header nav .center-menu{
    display: block;
    text-align: center;
}
.main-header nav .center-menu ul{
    margin: 0 auto;
}
.main-header nav .center-menu ul li{
    display: inline-block;
}
.main-header nav .right-menu li  a span {
    height: 30px;
    width: 30px;
    display: inline-block;
    background-position: center;
    background-size: cover;
    float: right;
    background-image: url("../img/icons/logo-circle.svg");
    cursor: pointer;
    margin-top: 25px;
}
.hover-icon{
    height: 88px;
    width: 180px;
    display: inline-block;
    background-position: center;
    background-size: cover;
    background-image: url("../img/icons/menu-hover.svg");
    cursor: pointer;
    transform: scaleY(0);
    transition: transform .2s ease-out;
    transform-origin: top;
    position: relative;
    z-index: 10;
    left: 58px;
}
.hover-icon-hovered{
    transform: scaleY(1);
    transition: transform .8s ease;
}

.menu-item{
    background-color: #53bc58;
    mask-size: cover;
    -webkit-mask-size: cover;
    height: 40px;
    width: 40px;
    margin-bottom: 37px;
    margin-right: -112px;
    left: 58px;
    display: inline-block;
    position: relative;
    transition: background-color 0.8s ease;
    cursor: pointer;
    z-index: 10;
}
.menu-item-hovered{
    background-color: #151515;
    transition: background-color 0.7s ease;
}
#creative-icon{
    -webkit-mask-image: url("../img/icons/creative-icon.png");
    mask-image: url("../img/icons/creative-icon.png");

}
#about-icon{
    -webkit-mask-image: url("../img/icons/about-icon.png");
    mask-image: url("../img/icons/about-icon.png");
}
#contact-icon{
    -webkit-mask-image: url("../img/icons/contact-icon.png");
    mask-image: url("../img/icons/contact-icon.png");
}
#map-icon{
    -webkit-mask-image: url("../img/icons/map.svg");
    mask-image: url("../img/icons/map.svg");
    opacity: .6;
    
}
#login-icon{
    -webkit-mask-image: url("../img/icons/login.svg");
    mask-image: url("../img/icons/login.svg");
    opacity: .6;
    
}

.sub-menu-item{
    padding-top: 65px;
    padding-bottom: 20px;
    background-color: #393939;
    color: #e4e4e4;
    width: 120px;
    top:-200px;
    margin-right: -143px!important;
    border-radius: 0 0 40px 40px;
    position: absolute;
    display: inline-block;
    box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.3);
    z-index: 1;
    transition: top 1s ease-out;

}
.sub-menu-item-hovered{
    top:0;
    transition: top .7s ease-in;
    transition-delay: .1s;
}

.sub-menu-item li{
    margin-top: 10px;
    display: block!important;
}
.sub-menu-item li a {
    font-size: 20px;
    color: #ffffff;
}
.sub-menu-item li:hover a,.sub-menu-item li a:hover {
    /*font-size: 26px;*/
    color: #50ce56;
}
@keyframes slideInDown {
    0%{
        opacity: 0;
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
        visibility: visible;
    }

    50% {
        opacity: 100%;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }
    70%{
        -webkit-transform: translate3d(0, 22px, 0);
        transform: translate3d(0, 22px, 0);
    }
    100%{
        -webkit-transform: translate3d(0, 3px, 0);
        transform: translate3d(0, 3px, 0);
    }
}

@keyframes CircleCenter {
    /*0%{*/
    /*    transform: translate3d(0, 3px, 0);*/
    /*    animation-timing-function: ease-in;*/
    /*}*/
    /*20%{*/
    /*    transform: translate3d(6px, 5px, 0);*/
    /*    animation-timing-function: ease-in;*/
    /*}*/

    /*40% {*/
    /*    transform: translate3d(2px, 0,0);*/
    /*    animation-timing-function: ease-in;*/
    /*}*/
    /*60%{*/
    /*    transform: translate3d(2px, 6px, 0);*/
    /*    animation-timing-function: ease-in;*/
    /*}*/
    /*80%{*/
    /*    transform: translate3d(6px, 1px, 0);*/
    /*    animation-timing-function: ease-in;*/
    /*}*/
    /*100%{*/
    /*    transform: translate3d(0, 3px, 0);*/
    /*    animation-timing-function: ease-in;*/
    /*}*/
    0%{
        transform: translate3d(0, 6px, 0);
        animation-timing-function: ease-in;
    }
    20%{
        transform: translate3d(12px, 10px, 0);
        animation-timing-function: ease-in;
    }

    40% {
        transform: translate3d(4px, 0,0);
        animation-timing-function: ease-in;
    }
    60%{
        transform: translate3d(4px, 12px, 0);
        animation-timing-function: ease-in;
    }
    80%{
        transform: translate3d(12px, 2px, 0);
        animation-timing-function: ease-in;
    }
    100%{
        transform: translate3d(0, 6px, 0);
        animation-timing-function: ease-in;
    }
}

@keyframes yAxis {
    0%{
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
        transform: translateY(0);
    }
    20%{
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
        transform: translateY(12px);
    }

    40% {
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
        transform: translateY(4px);
    }
    60%{
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
        transform: translateY(4px);
    }
    80%{
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
        transform: translateY(12px);
    }
    100%{
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
        transform: translateY(0);
    }
}

@keyframes xAxis {

    0%{
        animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
        transform:  translateX(6px)
    }
    20%{
        animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
        transform:  translateX(10px)
    }

    40% {
        animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
        transform:  translateX(0)
    }
    60%{
        animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
        transform:  translateX(12px)
    }
    80%{
        animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
        transform:  translateX(2px)
    }
    100%{
        animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
        transform:  translateX(6px)
    }
}


/*@keyframes fadeInLeft {*/

/*    0%{*/
/*        transform:  translateX(0);*/
/*        opacity: 0;*/
/*    }*/
/*    100%{*/
/*        */
/*    }*/
/*}*/


.center-circle-container{
    position: absolute;
    left:0;
    right:0;
    top: 32vh;
    margin-left: auto;
    margin-right: auto;
    width: 35vh;
}
.center-circle-container .center-des{
    position: absolute;
    display: inline-block;
    opacity: 0;
    transition: opacity 1s,transform 1s;


}
.center-circle-container:hover{
    cursor: pointer;
}
.center-circle-container:hover .center-des{

    transform:  translateX(-150px);
    opacity: 1;
    transition: opacity 1s,transform 1s;

}
.center-circle-container:hover .center-circle svg,.center-circle-container:hover .center-circle-shadow img{

    transform:  translateX(150px) scale(0.7);
    transition: transform 1s;
}
.center-circle{
    z-index: 9;
    position: absolute;
    animation: 1.5s ease-out 0s 1 slideInDown,7s linear 1.5s infinite CircleCenter;
    display: inline-block;

}
.center-circle svg{
    transition: transform 1s;
}
.center-des p{
    color: #fff;
}
.center-circle:hover img{
    transition: opacity 2s;
    opacity: 1;
}
.center-circle svg{
    position: relative;


}
.center-circle img{

    opacity: 0;
    transition: opacity 1s;
    position: absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    width: 15vh;
    top: 11vh;

}
.center-circle-shadow{

    position: absolute;
    margin-top: 80%;
    animation: 9s linear 1.5s infinite CircleCenter;

}
.center-circle-shadow img{
    width: 35vh;
    position: relative;
    transition: transform 1s;
}


.center-bottom{
    position: absolute;
    width: 27px;
    height: 40px;
    bottom: 40px;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
}
.out-down-icon ,.in-down-icon{
    position: absolute;
    display: block;
    width: 26px;
    height: 40px;

    mask-size: cover;
    -webkit-mask-size: cover;
    background-color: #53bc58;
    cursor: pointer;



}

@keyframes ScrollIcon {
    0%{
        opacity: 0;
        transform: translate3d(0, -18px, 0);
    }

    50%{
        opacity: 1;
    }


    100%{
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }
}

.out-down-icon{

    mask-image: url("../img/icons/scroll-down-body.svg");
    -webkit-mask-image: url("../img/icons/scroll-down-body.svg");
    background-repeat: no-repeat;
}
.in-down-icon{
    animation: 1.5s ease-out 0s infinite ScrollIcon;
    mask-image: url("../img/icons/scroll-down-dot.svg");
    -webkit-mask-image: url("../img/icons/scroll-down-dot.svg");
}

.right-bottom{

    position: absolute;
    width: 26px;
    height: 40px;
    bottom: 30px;
    right:90px;

    /*background-color: red;*/
}
.right-bottom .share-icon{
    position: absolute;
    mask-image: url("../img/icons/share-icon.svg");
    -webkit-mask-image: url("../img/icons/share-icon.svg");
    mask-size: cover;
    -webkit-mask-size: cover;
    background-color: #808080;
    width: 25px;
    height: 25px;
}
.left-center{
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right:0;
}
.section-service{
    height: 100vh;
    width: 100%;
}
.section-service .section-right{
    /*width: 30%;*/
    margin-top: 31.5vh;
    display: inline-block;
    float: right;
}
.section-service .section-left{
    margin-top: 20vh;
    display: inline-block;
}
.section-circle-service{
    width:37vh;
    height:37vh;
    vertical-align:center;
    margin-left: 4vw;
    margin-right: calc(50vw - 22.5vw - 4vw - 18.5vh );
    border-radius: 50%;
    background-color: #53bc58;
    float: left;
    box-shadow:-12px -12px 20px 0 rgba(255,255,255,.10), 14px 12px 20px 6px rgba(18,18,18,.78);

}
.section-circle-service .section-circle-inner-service{
    width:calc(37vh - 1px );
    height:calc(37vh - 1px );
    margin-top: 0.75px;
    margin-right: 1px;


    border-radius: 50%;
    background-color: #303030;

    box-shadow:inset 12px 12px 20px 10px rgba(0, 0, 0,0.35),inset -12px -12px 20px 10px rgba(255,255,255,0.10)

}
.section-circle-service img{
    width:17vh;
    margin-right: 11vh;
    margin-top: 11vh;
}
.section-service .section-left{
    display: inline-block;
    width: 60vw;
}
.section-service .section-left .section-box{
    border-radius: 40px;
    height: 60vh;
    width:45vw;
    border: #5f9f60 1px solid;
    background: linear-gradient(135deg, #22d626 20%, #3f4840 100%);
    box-shadow:-12px -12px 20px 0 rgba(255,255,255,.10), 14px 12px 20px 6px rgba(18,18,18,.78);
    display: none;

}
.section-service .section-left .section-box.active{
    display: inline-block;
}
.section-service .section-left .section-box img{
    opacity: 0;
    position: absolute;
    margin-top: -18vh;
    right: 57vw;
    height: 70vh;
    transition: opacity 10s;

}
.section-service .section-left .section-box.active img{
    opacity: 1;
    transition: opacity 10s;
}
.section-service .section-left .section-box{
    color: #fff;
    font-family: "Mj_Thameen",sans-serif;

}
.section-service .section-left .section-box p{

    margin-right: 60px;
    padding-left: 40vh;

}
.section-service .section-left .section-box h2{
    margin-top: 35vh;
    margin-right: 60px;


}
.section-item-service{
    width: 13vh;
    height: 13vh;
    background-color: #303030;
    position: absolute;
    border-radius: 50%;
    box-shadow: inset 3px 5px 4px 0 rgba(255,255,255 , 0.12), inset -3px -5px 4px 0 rgba(0,0,0,0.27), 5px 5px 4px 0 rgba(0,0,0,0.24);
    transition: background-color 0.3s;
    cursor: pointer;

}
.section-item-service:hover{
    background-color: #565656;
    transition: background-color .3s;
}
.section-item-service.selected{
    background-color: #3ab53d;
    transition: background-color 0.3s;
}
.section-item-service span{
    width: 50%;
    height: 50%;
    margin-top: 25%;
    margin-right: 25%;
    display: block;
    background-color: #a3a3a3;

    mask-size: cover;
    -webkit-mask-size: cover;
}
.section-item-service.selected span{
    background-color: #313431;

}
#section-item-service_1{
    margin-top: -5vh;
    margin-right: 11.5vh;

}

#section-item-service_2{
    margin-top: 4vh;
    margin-right: -4vh;
}
#section-item-service_3{
    margin-top: 21vh;
    margin-right: -4vh;
}
#section-item-service_4{
    margin-top: 30vh;
    margin-right: 11.5vh;
}
#section-item-service_1 span{
    -webkit-mask-image: url("../img/icons/idea.svg");
    mask-image: url("../img/icons/idea.svg");
}
#section-item-service_2 span{
    -webkit-mask-image: url("../img/icons/paper-pen.svg");
    mask-image: url("../img/icons/paper-pen.svg");
}
#section-item-service_3 span{
    -webkit-mask-image: url("../img/icons/networking.svg");
    mask-image: url("../img/icons/networking.svg");
}
#section-item-service_4 span{
    -webkit-mask-image: url("../img/icons/target.svg");
    mask-image: url("../img/icons/target.svg");
    margin-right: 20%!important;
}
#navigtion {
    position: fixed;
    top: calc(50vh - 50px);
    left: 70px;
    z-index: 99;
    border-radius: 4px;
    height: 100px;
    width: 16px;
}
#navigtion .dot-navi{
    height: 5px;
    width: 5px;
    margin-right: 4px;
    background-color: #6b6b6b;
    margin-top: 20px;
    border-radius: 7px;
    transition: width 1s,margin-right 1s,background-color .2s;
    cursor: pointer;
}

#navigtion .dot-navi:hover{
    background-color: #4ccf52;
    transition: background-color .2s;
}
#navigtion .dot-navi.selected{
    width: 13px;
    background-color: #4ccf52;
    margin-right: 0!important;
    transition: width 1s,margin-right 1s,background-color .2s;
}
.section-services{
    background-color:rgb(20,20,20);
    height: 100vh;

}
.section-services .section-services-box{
    padding: 15px 15vw;
}
.section-services .section-item{
    display: inline-block;
    width: 21%;
    height: 40vh;
    margin: 20px 6%;

}
.section-services .section-item .icon{
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background-color: #222222;
    margin: 30px auto;
    border: #525252 1px solid;
    box-shadow:  -3px -3px 16px 0 rgba(255,255,255,0.28), 3px 3px 26px 0 rgba(0,0,0,0.89);
}
.section-services .section-item .icon span{
    background-color: #c7c7c7;
    mask-size: cover;
    -webkit-mask-size: cover;
    margin-right: 35px;
    margin-top: 35px;
    height: 80px;
    width: 80px;
    display: block;

}
.section-services .section-item .icon span#section-item_1{
    -webkit-mask-image: url("../img/icons/billboard.svg");
    mask-image: url("../img/icons/billboard.svg");

}
.section-services .section-item .icon span#section-item_2{
    -webkit-mask-image: url("../img/icons/web-design.svg");
    mask-image: url("../img/icons/web-design.svg");
}
.section-services .section-item .icon span#section-item_3{
    -webkit-mask-image: url("../img/icons/chat-marketing.svg");
    mask-image: url("../img/icons/chat-marketing.svg");
}
.section-services .section-item .icon span#section-item_4{
    -webkit-mask-image: url("../img/icons/website.svg");
    mask-image: url("../img/icons/website.svg");
}
.section-services .section-item .icon span#section-item_5{
    -webkit-mask-image: url("../img/icons/film.svg");
    mask-image: url("../img/icons/film.svg");
}
.section-services .section-item .icon span#section-item_6{
    -webkit-mask-image: url("../img/icons/camera.svg");
    mask-image: url("../img/icons/camera.svg");
}
.section-services .section-item h3{
    color: #fff;
    font-family: "Mj_Thameen",sans-serif;
    padding-bottom: 5px;
}
.section-services .section-item p{
    color: #fff;
    text-align: justify;
}
.section-contact{
    height: 100vh;

    background: linear-gradient(0, rgba(20,20,20,1) 0%, rgba(51,51,51,1) 100%);
}
.section-contact .section-contact-box{
    padding: 23vh 15vw 0 15vw;
}
.section-contact .form{
    display: inline-block;
}
.section-contact .form form{
    width: 40vw;
    background-color: #1d1d1d;
    box-shadow: -12px -12px 20px 0 rgba(255,255,255,.10), 14px 12px 20px 6px rgba(18,18,18,.78);
    border: #525252 1px solid;
    border-radius: 23px;
    display: inline-block;

}
.section-contact .form form input,.section-contact .form form textarea{
    display: block;
    width: 90%;
    /*margin:0;*/
    border: none;
    background-color: transparent;
    padding: 20px 30px 20px 0;
    color: white;
    resize: none;
    font-family: "IRANYekanWeb",sans-serif;
    font-size: 16px;
}
.section-contact .form form div{
    direction: ltr;
}
.section-contact .form form input[type=submit]{
    background-color: #1d1d1d;
    color: #4d950e;
    font-size: 16px;
    padding: 6px 40px;
    display: block;
    width: auto;
    direction: ltr;
    cursor: pointer;
    box-shadow: inset 3px 3px 6px 0 rgba(255,255,255 ,0.25), inset -4px -4px 6px 0 rgba(0,0,0 ,0.72), 4px 6px 10px 2px rgba(16,16,16,0.87);
    border-radius: 30px;
    margin-bottom: 30px;
    margin-left: 30px;
    transition: box-shadow 0.2s;

}
.section-contact .form form input[type=submit]:hover{
    box-shadow: inset -3px -3px 6px 0 rgba(255,255,255 ,0.25), inset 4px 4px 6px 0 rgba(0,0,0 ,0.72);
    transition: box-shadow 0.2s;

}
.section-contact .form form span{
    width: 100%;
    height: 1px;
    display: block;
    background: linear-gradient(90deg, #202020 0%, #4b4b4b 50%,#202020 100%);




}
textarea:focus, input:focus{
    outline: none;
}
::placeholder{
    font-family: "IRANYekanWeb",sans-serif;
    font-size: 16px;

}
.phone-image{
    width: 28vw;
    height: 5px;
    display: inline-block;
    float: right;
}
.phone-image img{

    width: 90%;
}
.section-partners{
    height: 100vh;
    background: linear-gradient(180deg, rgba(20,20,20,1) 0%, rgba(51,51,51,1) 100%);
}
.section-partners .section-contact-box{
    padding: 40px 15vw;


}
.section-partners .section-contact-box .partners-logo{
    width: 19.5%;
    display: inline-block;
}
.section-partners .section-contact-box .partners-logo img{
    width: 80%;
    cursor:pointer;
    margin: 4vh auto;
    display: block;
}
footer{
    background-color: rgb(20,20,20);
    height: 50vh;
    padding: 0 15vw;

}
footer .footer-container{
    height: 50vh;
    position: relative;
}
footer .logo-des img{
    height: 120px;
}

footer .logo-des{
    color: #8d8d8d;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 30vw;
}
footer .logo-des h3{
    margin: 10px 0;
    font-family: "Mj_Thameen", sans-serif;
}
.icon{
    height: 25px;
    width: 25px;
    display: inline-block;
    background-color: #8d8d8d;
    mask-size: cover;
    -webkit-mask-size: cover;
    margin: 0 20px;
}
.icon-whatsapp{
    -webkit-mask-image: url("../img/icons/whatsApp-logo.svg");
    mask-image: url("../img/icons/whatsApp-logo.svg");
}
.icon-telegram{
    -webkit-mask-image: url("../img/icons/telegram-logo.svg");
    mask-image: url("../img/icons/telegram-logo.svg");
}
.icon-instagram{
    -webkit-mask-image: url("../img/icons/instagram-logo.svg");
    mask-image: url("../img/icons/instagram-logo.svg");
}
.footer-left-links{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 0;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 40vw;
    float: left;
}
.footer-links h4{
    color: #23a455;
    font-family: "Mj_Thameen", sans-serif;
    font-size: 20px;
    margin-bottom: 5px;
}
.footer-links a{
    color: #8d8d8d;
    display: block;
    text-decoration: none;
    font-family: "IRANYekanWeb", sans-serif;
}
.footer-links{
    display: inline-block;
    padding: 0 50px;
}
.footer-social{
    direction: ltr;
    padding: 50px 0;
}