@font-face {
    font-family: Swis;
    font-style: normal;
    src: url('../fonts/Swis.ttf') format('truetype');
}

#back-top{
    display:none !important;
    
}


span{
    direction:ltr
}

.SingleTech{
    background-color:#5c5c5c;
    padding: 190px 0 100px;
    direction:rtl;
}

.tech-container{
    width:1200px;
    margin:0 auto;
    height:100%;
    box-shadow:0 0 20px 10px #0000005e;
    position:relative;
}

.Image1{
    width:57%; 
    position:absolute;
    top:-5%;
    left:-3%;
}

.image2{
    width:20%; 
    position:absolute;
    top:34px;
    left:51%;
}

.image3{
    width:120px; 
    position:absolute;
    bottom:50px;
    left:9%;
}

.content{
    color:white;
    width:80%;
    margin:32% 10% 13%;
}

.content p{
    font-family:Iranyekan, Ebrima;
    line-height:1.5;
}

.SingleTech li{
    font-family:Iranyekan;
    line-height:1.5;
    text-align:right;
    text-indent:-11px;
    padding-right:50px;
}

.margin-bottom-10{
    margin-bottom:10px;
}

.margin-bottom-20{
    margin-bottom:20px;
}

.content h3{
    font-family:Beirot,Ebrima;
    font-size:280%;
    color:yellow;
    text-align:right;
}

.content h4{
    font-family:Beirot;
    font-size:200%;
    color:yellow;
    text-align:right;
    margin:70px 0 30px;
}

.font{
    font-family:Swis;
    font-size:100%;
}
.phone{
        display:none;
    }
    
    .window{
        display:block
    }
    
    .firstParagraph{
        margin-left:40%;
    }


@media only screen and (max-width:1400px){
    
    .tech-container{
        width:1000px;
    }
    
    .firstParagraph{
        margin-left:28%;
    }
}

@media only screen and (max-width:1200px){
    
    .tech-container{
        width:900px;
    }
    

}



@media only screen and (max-width:991px){
    .tech-container{
        width:720px;
    }
    
        .Image1{
        top:-2%;
    }
    
    .SingleTech{
        padding:140px 0 100px;
    }
    
    .content h3{
        font-size:240%;
    }
    
    .content{
        margin:37% 10% 13%;
    }
    
    .image3{
        width:100px;
    }
    
    .firstParagraph{
        margin-left:20%;
    }
}

@media only screen and (max-width:767px){
    .tech-container{
        width:520px;
    }
    
    .image2{
        width:38%;
        top:51px;
        left:13%;
    }
    
    .Image1{
        top:unset;
        width:80%;
        bottom:4%;
        left:7%;
    }
    
    .content{
        margin:10% 10% 94%;
    }
    
    .firstParagraph{
        margin-left:0;
    }
    
    .content h3{
        font-size:240%;
        margin:9% 3% 31% 0;
    }
    
    .image3{
        bottom:1.5%;
    }

}

@media only screen and (max-width:575px){
    .tech-container{
        width:420px;
    }
    .SingleTech{
        padding:120px 0 100px;
    }
    
    
    .content h4{
        font-size:160%;
    }

}


@media only screen and (max-width:470px){
    .tech-container{
        width:90%;
    }
    .content h3{
        font-size:200%;
    }
    .Image1{
        bottom:3%;
    }

}

@media only screen and (max-width:380px){
    .content h3{
        margin:16% 3% 27% 0;
        font-size:180%;
    }
}