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

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

.SingleTech{
    background-color:#262626;
    padding: 150px 0 120px;
}

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

.Image1{
    width:61%; 
    position:absolute;
    top:5%;
    left:-6%;
}

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

.image3{
    width:10%; 
    position:absolute;
    bottom:6%;
    left:4%;
}

.content{
    color:white;
    width:31%;
    margin:8% 0 0 57%;
}

.content p{
    font-family:IranYekan,Ebrima;
    line-height:1.4;
}

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

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


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

    
    
    .Image1{
      top:9%;
    }
    
    .content{
        width:34%;
    }
}

@media only screen and (max-width:1200px){
    .tech-container{
        width:950px;
        height:630px;
    }
    
    .content{
        width:36%;
        margin:6% 0 0 56%;
    }
    
    
.Image1{
    width:58%; 
    top:9%;
    left:-5%;
}

.image2{
    width:15%; 
    top:14%;
    left:35%;
}
    
    .content h3{
        font-size:190%;
    }


}

@media only screen and (max-width:1070px){
    .tech-container{
        width:850px;
    }
    
    .content{
        margin:4% 0 0 56%;
    }
    
    .Image1{
        top:16%;
        width:59%;
    }
}

@media only screen and (max-width:991px){
    
    .tech-container{
        width:800px;
    }
    
    
    .SingleTech{
        padding:130px 0 80px;
    }
    
    .content{
        margin:7% 0 0 53%;
        width:40%;
    }
    
    .Image1{
        top:21%;
        width:55%;
        left:-4%;
    }
    
    .Image2{
        top:19%;
        width:15%;
        left:35%;
    }
}

@media only screen and (max-width:927px){
    .tech-container{
        height:800px;
        width:600px;
    }
    
    .content{
        width:75%;
        margin:5% 0 0 12%;
    }
    
    .Image1{
        top:57%;
        left:-6%;
        width:59%;
    }
    
    .image2{
        width:23%; 
        top:61%;
        left:62%;
    }
    
    .image3{
        width:17%; 
        bottom:6%;
        right:9%;
        left:unset;
    }

}

@media only screen and (max-width:690px){
    .tech-container{
        height:900px;
        width:450px;
    }
    
    .content{
        margin:11% 0 0 12%;
    }
    
    .Image1{
        top:66%;
        width:70%;
        left:-7%;
    }
    
    .image2{
        width:28%; 
        top:66%;
        left:59%;
    }
    
    .image3{
        width:20%; 
        bottom:6%;
        right:12%;
        left:unset;
    }
    
    .SingleTech{
        padding:110px 0 100px;
    }
}

@media only screen and (max-width:530px){
    .tech-container{
        height:100%;
        width:90%;
    }
    
    .content{
        margin:14% 0 6% 12%;
    }
    
    .Image1{
        top:unset;
        width:84%;
        position:relative;
        bottom:-12%;
        left:0;
    }
    
    .image2{
        width:31%; 
        top:unset;
        left:56%;
        bottom:23%
    }
    
    .image3{
        width:19%; 
        bottom:2%;
        right:unset;
        left:3%;
    }
    
    .SingleTech{
        padding:110px 0 100px;
    }
}


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