content{
    overflow-x:hidden;
}
content h1{
     text-align:center;
     font-size:50px;
     color:rgb(87, 94, 104);
}
/* SERVICES */
 .services{
     display:flex;
     justify-content: center;
     margin-top:10px;
     margin-bottom:100px;
}
 .services > div{
     padding:30px;
     width:30%;
     text-align:center;
     font-size:30px;
     color:rgb(87, 94, 104);
}
 .services h3{
     background-color:rgba(75, 179, 117, 0.70);
     background: linear-gradient(to right, rgba(34, 146, 187, 0.79) 50%, rgba(75, 179, 117, 0.70) 50%);
     background-size: 200% 100%;
     background-position:right bottom;
     transition:all 1s ease;
     color:white;
     padding-top:20px;
     padding-bottom:20px;
     width:auto;
     margin-left:auto;
     margin-right:auto;
     border-radius:8px;
}
 .services h3:hover{
     background-position:left bottom;
     cursor:pointer;
}
 .services i{
     font-size:70px;
}
/* -----------| SERVICES END |----------- */
/* TECHNOLOGY*/
 .technology{
     width:100%;
     background-color:rgb(246, 246, 246);
     padding-top:5px;
     margin-top:155px;
     margin-bottom:155px;
     padding-bottom:100px;
     position:relative;
}
 .technology h1{
     font-size:55px;
}
 .wrap-tech{
     display:flex;
     justify-content: center;
     flex-wrap: wrap;
}
 .wrap-tech h2{
     font-size:25px;
}
 .wrap-tech > div{
     text-align:center;
     color:rgb(255, 255, 255);
     border-radius:10px;
     padding:20px;
     margin:30px;
     width:550px;
}
 .wrap-tech .odd{
     background: linear-gradient(to right, rgba(75, 179, 117, 0.70) 50%, rgba(34, 146, 187, 0.79) 50%);
     background-size: 200% 100%;
     background-position:right bottom;
     transition:all 1s ease;
}
 .wrap-tech .even{
     background: linear-gradient(to right, rgba(34, 146, 187, 0.79) 50%, rgba(75, 179, 117, 0.70) 50%);
     background-size: 200% 100%;
     background-position:right bottom;
     transition:all 1s ease;
}
 .wrap-tech > div:hover {
     background-position:left bottom;
     cursor:pointer;
}
/* TECH END */
/* Satisfaction guaranteed*/
 .satisfaction-guaranteed{
     display:flex;
     justify-content: center;
     margin-top:10px;
     margin-bottom:100px;
}
 .satisfaction-guaranteed > div{
     text-align:center;
     font-size:30px;
     width:30%;
     padding:30px;
     color:rgb(87, 94, 104);
}
 .satisfaction-guaranteed h3{
     background-color:rgba(75, 179, 117, 0.70);
     background: linear-gradient(to right, rgba(34, 146, 187, 0.79) 50%, rgba(75, 179, 117, 0.70) 50%);
     background-size: 200% 100%;
     background-position:right bottom;
     transition:all 1s ease;
     color:white;
     padding-top:20px;
     padding-bottom:20px;
     width:auto;
     margin-left:auto;
     margin-right:auto;
     border-radius:8px;
}
 .satisfaction-guaranteed h3:hover{
     background-position:left bottom;
     cursor:pointer;
}
 .satisfaction-guaranteed i{
     font-size:70px;
}
/* Satisfaction guaranteed*/
/* ----------| RESPONSIVE |---------- */
 @media screen and (max-width:2100px){
     content h1{
         font-size:40px;
    }
    /* SERVICES */
     .services{
         margin-bottom:0px;
    }
     .services > div{
         width:28%;
         font-size:20px;
    }
     .services h3{
         width:auto;
    }
     .services i{
         font-size:55px;
    }
    /* -----------| SERVICES END |----------- */
    /* TECHNOLOGY*/
     .technology{
         padding-bottom:65px;
         margin-top:90px;
         margin-bottom:90px;
    }
     .technology h1{
         font-size:45px;
    }
     .technology h2{
         font-size:22px;
    }
     .wrap-tech > div{
         padding:15px;
         width:450px;
    }
    /* -----------| TECH END |----------- */
    /* Satisfaction guaranteed*/
     .satisfaction-guaranteed > div{
         font-size:18px;
         width:28%;
         padding:27px;
    }
     .satisfaction-guaranteed i{
         font-size:60px;
    }
    /* -----------| SATISFACTION GUARANTEED END |-----------*/
}
 @media screen and (max-width:1750px){
     content h1{
         font-size:36px;
    }
    /* SERVICES */
     .services > div{
         width:28%;
         font-size:19px;
    }
     .services h3{
         padding-top:15px;
         padding-bottom:15px;
    }
     .services i{
         font-size:55px;
    }
    /* -----------| SERVICES END |----------- */
    /* TECHNOLOGY*/
     .technology{
         padding-bottom:45px;
    }
     .technology h1{
         font-size:40px;
    }
     .technology h2{
         font-size:20px;
    }
     .wrap-tech > div{
         padding:12px;
         width:380px;
    }
    /* -----------| TECH END |----------- */
    /* Satisfaction guaranteed*/
     .satisfaction-guaranteed > div{
         font-size:18px;
         width:28%;
         padding:27px;
    }
     .satisfaction-guaranteed i{
         font-size:60px;
    }
     .satisfaction-guaranteed h3{
         padding-top:15px;
         padding-bottom:15px;
    }
    /* -----------| SATISFACTION GUARANTEED END |-----------*/
}
 @media screen and (max-width:1600px){
     content h1{
         font-size:27px;
    }
    /* SERVICES */
     .services > div{
         width:26%;
         font-size:15px;
    }
     .services h3{
         padding-top:15px;
         padding-bottom:15px;
    }
     .services i{
         font-size:45px;
    }
    /* -----------| SERVICES END |----------- */
    /* TECHNOLOGY*/
     .technology{
         padding-bottom:30px;
         margin-top:70px;
         margin-bottom:70px;
    }
     .technology h1{
         font-size:30px;
    }
     .technology h2{
         font-size:16px;
    }
     .wrap-tech > div{
         padding:6px 12px;
         width:310px;
    }
    /* -----------| TECH END |----------- */
    /* Satisfaction guaranteed*/
     .satisfaction-guaranteed > div{
         font-size:15px;
         width:26%;
         padding:26px;
    }
     .satisfaction-guaranteed i{
         font-size:45px;
    }
     .satisfaction-guaranteed h3{
         padding-top:15px;
         padding-bottom:15px;
    }
    /* -----------| SATISFACTION GUARANTEED END |-----------*/
}
 @media screen and (max-width:1400px){
     content h1{
         font-size:20px;
    }
    /* SERVICES */
     .services > div{
         font-size:11px;
         width:25%;
         padding:26px;
    }
     .services h3{
         border-radius:5px;
         padding-top:11px;
         padding-bottom:11px;
    }
     .services i{
         font-size:35px;
    }
    /* -----------| SERVICES END |----------- */
    /* TECHNOLOGY*/
     .technology{
         padding-bottom:20px;
         margin-top:40px;
         margin-bottom:40px;
    }
     .technology h1{
         font-size:22px;
    }
     .technology h2{
         font-size:13px;
    }
     .wrap-tech > div{
         margin:20px;
         padding:6px 12px;
         width:280px;
    }
    /* -----------| TECH END |----------- */
    /* Satisfaction guaranteed*/
     .satisfaction-guaranteed{
         margin-bottom:50px;
    }
     .satisfaction-guaranteed > div{
         font-size:11px;
         width:25%;
         padding:26px;
    }
     .satisfaction-guaranteed i{
         font-size:35px;
    }
     .satisfaction-guaranteed h3{
         padding-top:11px;
         padding-bottom:11px;
         border-radius:5px;
    }
    /* -----------| SATISFACTION GUARANTEED END |-----------*/
}
 @media screen and (max-width:1100px){
     .technology{
         padding-bottom:20px;
         margin-top:40px;
         margin-bottom:40px;
    }
     .technology h1{
         font-size:20px;
    }
     .technology h2{
         font-size:12px;
    }
     .wrap-tech > div{
         margin:20px;
         padding:6px 12px;
         width:240px;
         border-radius:6px;
    }
}
 @media screen and (max-width:1000px){
     content .services{
         display:block;
         width:400px;
         margin-left:auto;
         margin-right:auto;
    }
     content .services > div{
         width:90%;
         margin-left:auto;
         margin-right:auto;
    }
     content .satisfaction-guaranteed{
         display:block;
         width:400px;
         margin-left:auto;
         margin-right:auto;
    }
     content .satisfaction-guaranteed > div{
         width:90%;
         margin-left:auto;
         margin-right:auto;
    }
     .technology{
         padding-bottom:20px;
         margin-top:40px;
         margin-bottom:40px;
    }
     .technology h1{
         font-size:20px;
    }
     .technology h2{
         font-size:11px;
    }
     .wrap-tech > div{
         margin:10px;
         padding:6px 2px;
         width:28%;
    }
}
 @media screen and (max-width:660px){
     .wrap-tech > div{
         margin:10px 0px;
         padding:6px 2px;
         width:300px;
    }
     .wrap-tech .odd{
         margin-left:50px;
    }
}
 @media screen and (max-width:550px){
     content .services{
         display:block;
         width:90%;
         padding:0;
         margin-left:auto;
         margin-right:auto;
    }
     content .services > div{
         width:90%;
         margin-left:auto;
         margin-right:auto;
         padding:10px 0px 10px 0px;
    }
     content .satisfaction-guaranteed{
         display:block;
         width:90%;
         padding:0;
         margin-left:auto;
         margin-right:auto;
    }
     content .satisfaction-guaranteed > div{
         width:90%;
         margin-left:auto;
         margin-right:auto;
         padding:10px 0px 10px 0px;
    }
}
 @media screen and (max-width:420px){
     .wrap-tech > div{
         margin:10px 0px;
         padding:6px 2px;
         width:78%;
    }
     .wrap-tech .odd{
         margin-left:0px;
    }
}
