* {
    padding: 0;
    margin: 0
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/IRANSansX.woff) format("woff"), url(fonts/IRANSansX.woff2) format("woff2");
    font-display: swap
}

html {
    box-sizing: border-box
}
li{list-style: none;
}
a{
    text-decoration: none;
}
input ,button{
    border: 0;
    background: 0;
    outline: none;
    
}

body{
    background:url(image/img1.png) no-repeat #247ba8;
    background-size: contain;
    direction: rtl;
    font-size: 16px;
    font-family: IRANSansX;
    
    overflow-y: hidden !important;

}

.mycrosite{
    max-width: 1000px;
    width: 96%;
    margin:0 auto;
   
   
}
.box1{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    margin: 50px auto;
}
.box2{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    margin: 50px auto;
}
.box2 a{
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
       
min-width: 220px;
min-height: 90px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 19px;
}
.box3{
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 10px auto;

}
.box3 a{
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    
min-width: 100px;
min-height: 40px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 19px;
}

.box1 a{
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
       
min-width: 180px;
min-height: 80px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 19px;
}
.footsa {
    height: 50px;
    color: #fff;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.fotsdd{
    text-align: center;
}
.adre, .conts{
    margin: 10px;
}

i {
    opacity: 0;
    font-size: 28px;
    color: #1F1E1E;
    will-change: transform;
    -webkit-transform: scale(.1);
            transform: scale(.1);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.btn_wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: hidden;
    cursor: pointer;
    width: 240px;
    height: 72px;
    background-color: #EEEEED;
    border-radius: 80px;
    padding: 0 18px;
    will-change: transform;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.btn_wrap:hover {
    /* transition-delay: .4s; */
    -webkit-transform: scale(1.1);
            transform: scale(1.1)
}

span {
    position: absolute;
    z-index: 99;
    width: 240px;
    height: 72px;
    border-radius: 80px;
    font-family: IRANSansX;
    font-size: 20px;
    text-align: center;
    line-height: 70px;
    color: #EEEEED;
    background-color: #20b71a;
    padding: 0 18px;
    -webkit-transition: all 1.2s ease;
    transition: all 1.2s ease;
}

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 240px;
    height: 64px;
    border-radius: 80px;
    margin-top: 8px;
}

.container i:nth-of-type(1) {
            -webkit-transition-delay: 1.1s;
                    transition-delay: 1.1s;
}

.container i:nth-of-type(2) {
            -webkit-transition-delay: .9s;
                    transition-delay: .9s;
}

.container i:nth-of-type(3) {
            -webkit-transition-delay: .7s;
                    transition-delay: .7s;
}

.container i:nth-of-type(4) {
            -webkit-transition-delay: .4s;
                    transition-delay: .4s;
}

.btn_wrap:hover span {
    -webkit-transition-delay: .25s;
            transition-delay: .25s;
    -webkit-transform: translateX(-280px);
            transform: translateX(-280px)
}

.btn_wrap:hover i {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
}


.dr {
position: absolute;
  bottom: 16px; 
  right: 16px;
  width:100px;
}
@media screen and (max-width: 500px){
    .box1{
        flex-direction: column;
    }
    .box1 a{
        margin-bottom: 5px;
    }
    body{
        overflow:inherit !important;
    }
    
}
.conts{
    display: flex;
    width: 100%;
    justify-content: center
}