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

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

.SingleTech{
    background-color:#5c5c5c;
    padding: 190px 0 100px;
}

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

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

.image2{
    width:20%; 
    position:absolute;
    top:34px;
    left:51%;
}

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

.content{
    color:white;
    width:42%;
    margin:24% 0 0 48%;
}

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

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

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


@media only screen and (max-width:1400px){
    .content h3{
        font-size:230%;
        margin-left:54%;
    }
    
    .content{
        width:51%;
        margin:24% 0 6% 42%;
    }
    
    .tech-container{
        width:1000px;
        height:100%;
    }
}

@media only screen and (max-width:1200px){
    .content h3{
        margin-left:52%;
    }
    
    .content{
        width:54%;
        margin:24% 0 6% 39%;
    }
    
    .tech-container{
        width:900px;
    }
}



@media only screen and (max-width:991px){
    .tech-container{
        width:720px;
    }
    
    .content{
        width:64%;
        margin:30% 0 6% 27%;
    }
    
    .content h3{
        margin-left:51%;
        font-size:215%;
    }
    
    .Image1{
        top:-10%;
        left:-8%;
        width:63%;
    }
    
    .image2{
        width:24%; 
        top:28px;
        left:51%;
    }
    
    .firstParagreph{
        width:50%;
        margin-top:-38%;
    }
    
    
    .image3{
        width:90px; 
        left:6%;
        bottom:5%;
    }
    
    .SingleTech{
        padding:130px 0 80px;
    }
}

@media only screen and (max-width:880px){
    .tech-container{
        width:520px;
    }
    
    .content{
        width:80%;
        margin:53% 10% 15%;
    }
    
    .Image1{
        left:-25%;
        width:87%;
        top:-7%;
    }
    
    .image2{
        width:37%; 
        top:20px;
        left:57%;
    }
    
    .image3{
        left:8%;
    }
    
    .firstParagreph{
        width:100%;
        margin-top:0;
    }
    
    .SingleTech{
        padding:120px 0 60px;
    }
}

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

    
    .content{
        width:80%;
        margin:60% 10% 19%;
    }
    
    .Image1{
        top:-7%;
        left:-35%;
        width:100%;
    }
    
    .image2{
        width:37%;
        top:29px;
        left:60%;
    }

    .content h3{
        margin-left:41%;
        font-size:200%;
    }

}


@media only screen and (max-width:710px){
    
    .Image1{
        top:-4%;
        left:-24%;
        width:90%;
    }
}


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

    .content{
        margin:55% 10% 19%;
    }
    
    
    .Image1{
        top:-4%;
        left:-15%;
        width:80%;
    }
    
    .image2{
        width:34%;
        top:21px;
    }
    
    .SingleTech{
        padding:100px 0 60px;
    }
}

@media only screen and (max-width:575px){
    
    .tech-container{
        width:90%;
    }


    .content{
        margin:52% 12% 19%;
    }
    
    .content h3{
        margin:-53% 0 19%;
        font-size:190%;
    }
    
    
    .Image1{
        top:unset;
        left:7%;
        width:80%;
        bottom:25%;
        position:relative;
    }
    
    .image2{
        width:28%;
        top:50px;
    }
    
    
    .image3{
        bottom:4%;
    }
    

}


@media only screen and (max-width:430px){
    .content h3{
        margin:-53% 0 43%;
    }
    
    .image2{
        width:35%;
        top:100px;
        left:50%;
    }
}