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

.SingleTech{
    background-color:#6a6a69;
    padding: 10% 0;
    direction:rtl;
}

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


.margin-bottom{
    margin-bottom:3%;
}


.margin-top-{
    margin-top:6%;
}


.Image1{
    width:83%; 
    margin:5% 0 0 8%;

}

.image2{
    width:19%; 
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    margin-left:15%;
}

.image3{
    width:13%; 
    position:absolute;
    bottom:3%;
    left:9%;
}

.content{
    color:white;
    width:100%;
    margin:7% 10% -4%;
}

.content p{
    font-family:Iranyekan,Ebrima;
    line-height:1.5;
    margin-bottom:20px;
    font-size:109%;
}

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

.firstParagreph{
    width:50%;
    margin-top:-10%;
}


@media only screen and (max-width:1400px){
    .tech-container{
        width:1000px;
    }
    
    .SingleTech{
        padding:10% 0;
    }
    
    
    .Image1{
        top:14%;
    }
    
    .image2{
        margin:5% 0 0 15%;
    }
    
    .firstParagreph{
        margin-top:-15%;
    }
}

@media only screen and (max-width:1200px){
    .tech-container{
        width:880px;
    }
    
    .SingleTech{
        padding:150px 0 100px;
    }
}

@media only screen and (max-width:991px){
    .tech-container{
        width:720px;
    }
    
    .SingleTech{
        padding:120px 0 100px;
    }
    
    .content h3{
        font-size:230%;
    }
    
    .firstParagreph{
        margin-top:-23%;
    }
}



@media only screen and (max-width:767px){
    .tech-container{
        width:550px;
    }
    .content h3{
        font-size:200%;
    }
    
    .image2{
        margin:5% 0 0 10%;
        width:32%;
    }
    
    .content p{
        font-size:100%;
    }
    
    .firstParagreph{
        margin-top:-38%;
    }
    
    .Image1{
        width:90%;
    }
    
    .image3{
        width:17%;
        bottom:2%;
    }
}

@media only screen and (max-width:575px){
    .tech-container{
        width:450px;
    }
    
    .image3{
        width:80px;
        bottom:1.5%;
    }
    
    .Image1{
        margin:5% 0 17% 8%;
    }
}

@media only screen and (max-width:480px){
    .tech-container{
        width:90%;
    }
    
    .image2{
        width:70%;
        margin:5% 0 0 21%;
    }
    
    .firstParagreph{
        width:100%;
        margin-top:16px;
    }
}