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

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


.SingleTech{
    background-color:#464545;
    padding: 180px 0 100px;
}

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

.Image1{
    width:45%; 
    position:absolute;
    top:-7%;
    left:-4%;
}

.image2{
    width:12%; 
    margin:-13% 0 5% 40%;
}

.image3{
    width:115px; 
    position:absolute;
    bottom:5%;
    left:8%;
}

.content{
    color:white;
    width:36%;
    margin:8% 0 0 55%;
}


.Paragraph2{
    font-family:IranYekan;
    padding:0 9%;
    line-height:1.5;
    margin-bottom:10%;
}

.Paragraph2 li{
    color:white;
    direction:rtl;
    text-align:justify;
    margin-bottom:15px;
    margin-right:5%;
    text-indent:-11px;
    padding-right:10px;
}

.content p{
    font-family:IranYekan;
    line-height:1.5;
}


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

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


.horizontal{
    display:block;
}


.vertical{
    display:none;
}


@media only screen and (max-width:1400px){
    .tech-container{
        width:1100px;
    }
    
    
    
    .Image1{
        top:-4%;
    }
    
    .image2{
        width:12%;
        margin:-13% 0 5% 36.5% ;
    }
    
    .content{
        width:40%;
        margin:8% 0 0 51%;
    }
}

@media only screen and (max-width:1200px){
    .tech-container{
        width:900px;
    }
    
    .content{
        width:38%;
        margin:7% 0 0 53%;
    }
    
    
    .Image1{
        width:38%; 
        top:-4%;
        left:2%;
    }
    
    .image2{
        width:14%; 
       margin:-16% 0 5% 36%;
    }
    
    .content p{
        line-height:1.5;
    }
    
    .content h3{
        font-size:230%;
    }
    
    
    .SingleTech{
        padding:150px 0 100px;
    }
    
    .horizontal{
        display:none;
    }
    
    .vertical{
        display:block;
    }
}



@media only screen and (max-width:991px){
    .tech-container{
       width:800px;
    }
    .content{
        width:41%;
        margin:7% 0 0 50%;
    }
    
    
    .Image1{
        top:2%;
    }
    
    .image2{
       margin:-13% 0 2% 32%;
    }
    
    .image3{
        width:100px;
        bottom:4%;
    }
    
    .SingleTech{
        padding:120px 0 100px;
    }
}



@media only screen and (max-width:880px){
    .tech-container{
        height:1450px;
        width:600px;
    }
    
    .content{
        width:75%;
        margin:5% 0 0 12%;
    }
    
    .Image1{
        top:27%;
        left:46%;
        width:41%;
        -webkit-transform: scaleX(-1);
         transform: scaleX(-1);
    }
    
    .image2{
        width:23%; 
        margin:33% 0 8% 22%;
    }
    
    
    .image3{
        bottom:3%;
    }

    
    .Paragraph{
        padding-top:3%;
    }
}

@media only screen and (max-width:650px){
    .tech-container{
        width:450px;
        height:1550px;
    }
    
    .SingleTech{
        padding:20% 0 11%;
    }
    
    .Image1{
        top:30.5%;
        left:42%;
        width:45%;
    }
    
    .image2{
        width:25%; 
        margin:31% 0 8% 17%;
    }
    
    .image3{
        width:24%;
        bottom:2%;
    }
    
    
}

@media only screen and (max-width:520px){
    .tech-container{
        height:100%;
        width:90%;
    }
    
    .Paragraph{
        padding:0 0 10%;
    }
    
    .Paragraph2{
        padding:0;
        margin:0 10% 27%;
    }
    
    .content{
        width:80%;
        margin:14% 10% -6%;
    }
    
    .Image1{
        top:unset;
        width:50%;
        position:relative;
        bottom:30%;
        left:12%;
        transform:scaleX(1);
    }
    
    .image2{
        position:absolute;
        width:26%; 
        top:unset;
        left:47%;
        bottom:50px
    }
    
    .image3{
        width:22%; 
    }
    
    .SingleTech{
        padding:110px 0 100px;
    }
}


@media only screen and (max-width:340px){
        .content{
        margin:9% 0 12% 12%;
    }
    
    .SingleTech{
        padding:100px 0 100px;
    }
    
    
    .content h3{
        font-size:200%;
    }
}