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

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

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

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

.image2{
    width:35%; 
    margin:-6% 0 5% 53%;
}

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

.content{
    color:white;
    width:36%;
    margin:7% 0 0 57%;
}

.content p{
    font-family:Ebrima;
    line-height:1.3;
}

.content h3{
    font-family:Myrid-light;
    font-size:280%;
    color:yellow;
}

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


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

@media only screen and (max-width:1200px){
    .tech-container{
        width:800px;
        height:800px;
    }
    
    
    .content{
        width:86%;
        margin:15% 0 0 7%;
    }
    
    
    .Image1{
        width:63%; 
        top:7%;
        left:-4%;
    }
    
    .image2{
        width:20%; 
       margin:6% 0 12% 66%;
    }
    
    .image3{
        width:13%; 
    }
    .content p{
        line-height:1.2;
    }
    
    .content h3{
        font-size:230%;
        padding-left:62%;
    }
    
    
    .SingleTech{
        padding:12% 0 9%;
    }
}



@media only screen and (max-width:880px){
    .tech-container{
        height:888px;
        width:600px;
    }
    
    .content{
        width:75%;
        margin:9% 0 0 12%;
    }
    
    .content h3{
        padding-left:0;
    }
    
    .Image1{
        top:49%;
        left:4%;
        width:85%;
    }
    
    .image2{
        width:28%; 
        margin:-3% 0 5% 63%
    }
    
    .firstParagreph{
        width:50%;
        margin-top:-38%;
    }
    
    
    .image3{
        width:17%; 
        left:10%;
        bottom:4%;
    }
    
    .SingleTech{
        padding:12% 0 11%;
    }
}

@media only screen and (max-width:650px){
    .tech-container{
        height:930px;
        width:450px;
    }
    
    .content{
        margin:11% 0 0 12%;
    }
    
    .Image1{
        left:6%;
        width:85%;
        top:63%;
    }
    
    .image2{
        width:34%; 
        margin:-4% 0 5% 47%;
    }
    
    .image3{
        width:18%; 
        left:9%;
        bottom:3%;
    }
    
    .firstParagreph{
        width:100%;
        margin-top:0;
    }
    
    .SingleTech{
        padding:110px 0 100px;
    }
}

@media only screen and (max-width:520px){
    .tech-container{
        height:100%;
        width:90%;
    }
    
    .Paragraph{
        padding:0 0 10%;
    }
    
    .content{
        margin:14% 0 6% 12%;
    }
    
    .Image1{
        top:unset;
        position:relative;
        bottom:9%;
        left:7%;
    }
    

    
    .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;
    }
    
    .Image1{
        bottom:21%;
    }
    
    .content h3{
        font-size:200%;
    }
}