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

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

.SingleTech{
    background-color:#515151;
    padding: 200px 0 120px;
    direction:rtl;
}

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

.Image1{
    width:40%; 
    position:absolute;
    top:-11%;
    left:5%;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}



.image2{
    width:12%; 
    position:absolute;
    top:20%;
    left:39%;
}

.image3{
    width:11%; 
    position:absolute;
    bottom:9%;
    left:8%;
}

.content{
    color:white;
    width:41%;
    margin:6% 10% 6% 0;
}

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

.content h3{
    font-family:Beirot;
    font-size:250%;
    color:yellow;
    margin-bottom:15px;
    text-align:right;
}

.font{
    font-family:Swis;
    font-size:135%;
}


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

    .SingleTech{
    padding: 150px 0 80px;
}
    
.Image1{
    width:44%; 
    top:-4%;
    left:2%;
}
}

@media only screen and (max-width:1200px){
    .tech-container{
        width:900px;
        height:600px;
    }
    
    .content{
        width:48%;
        margin:8% 8% 0 0;
    }
    
    .content h3{
        font-size:165%;
    }
    
.Image1{
    width:41%; 
    top:-4%;
    left:0;
}

.image3{
    left:7.5%;
}

    
    
    .SingleTech{
        padding:14% 0 9%;
    }
}

@media only screen and (max-width:991px){
     .tech-container{
        height:650px;
        width:800px;
    }
    
    .content{
        width:77%;
        margin:11% 12% 0 0;
    }
    
    .firstParagraph{
        width:57%;
    }
    
    .Image1{
        width:34%;
        top:-6%;
        left: 4%;
    }
    
    .image3{
        left:9.5%;
        width:14%;
    }
}

@media only screen and (max-width:850px){
    .tech-container{
        height:930px;
        width:650px;
    }
    
    .content{
        width:80%;
        margin:11% 10% 0 0;
    }
    
    .content h3{
        font-size:209%;
    }
    
    .firstParagraph{
        width:100%;
    }
    
    .Image1{
        top:unset;
        left:30%;
        width:38%;
        bottom:5%;
    }

    
    .image3{
        width:17%; 
        bottom:6%;
    }
    
    .SingleTech{
        padding:12% 0 11%;
    }
}

@media only screen and (max-width:700px){
    .tech-container{
        height:1050px;
        width:500px;
    }
    
    .Image1{
        top:59%;
        width:50%;
        left:24%;
    }
    
    .Image3{
        width:21%;
    }
    
    
    .SingleTech{
        padding:110px 0 100px;
    }
}

@media only screen and (max-width:550px){
    .tech-container{
        height:100%;
        width:90%;
    }
    
    
    .content{
        margin:11% 10% 12% 0;
    }
    
    .content h3{
        font-size:200%;
    }
    
    .Image1{
        top:unset;
        width:49%;
        position:relative;
        bottom:12%;
        left:23%;
    }
    
    
    .image3{
        width:90px; 
        bottom:3.5%;
        right:unset;
        left:9%;
    }
    
    .SingleTech{
        padding:110px 0 100px;
    }
}


@media only screen and (max-width:400px){

    
    .SingleTech{
        padding:100px 0 100px;
    }
}