@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap);





@font-face {
	font-family: poppins;
	src: url(../fonts/poppins.ttf);
}



@font-face {
	font-family: jura;
	src: url(../fonts/jura.ttf);
}


@font-face {
	font-family: foxy;
	src: url(../fonts/foxy.ttf);
}



@font-face {
	font-family:kadam;
	src: url(../fonts/kadam.ttf);
}



@font-face {
	font-family:lato;
	src: url(../fonts/lato.ttf);
}


@font-face {
	font-family:wides;
	src: url(../fonts/wides.ttf);
}







@font-face {
	font-family:waterbrush;
	src: url(../fonts/waterbrush.ttf);
}




@font-face {
	font-family:ubuntu;
	src: url(../fonts/ubuntu.ttf);
}




@font-face {
	font-family:satisfy;
	src: url(../fonts/satisfy.ttf);
}





@font-face {
	font-family:russo;
	src: url(../fonts/russo.ttf);
}





@font-face {
	font-family:raleway;
	src: url(../fonts/raleway.ttf);
}




@font-face {
	font-family:nunito;
	src: url(../fonts/nunito.ttf);
}




@font-face {
	font-family:noto;
	src: url(../fonts/noto.ttf);
}


body {
    background-color: #eff5f9;
    color: black;
    font-family: raleway;
    margin: auto;
    /* padding: 10px; */
    width: 100%;
}




a:-webkit-any-link {
    cursor: pointer;
    text-decoration: none;
}



.wrapper {
    margin: auto;
    padding: 10px;
}


.head {
    padding: 20px 20px;
    margin: auto;
    background: #0b83ff;
}



.menu-topleft {
    float: left;
    display: flex;
    width: 33%;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
}




.menu-topright {
    float: right;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-evenly;
    width: 33%;
}




.menu-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 15px;
    /* font-family: 'Poppins',sans-serif; */
    font-size: 15px;
    font-weight: 600;
    height: 40px;
}




.menu-button {
    background-color: #131720;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: inset 0 0 4px 0px #0b83ff;
    width: 120px;
    height: 37px;
    text-align-last: center;
    line-height: 37px;
}



.menu-logo {
    /* left: 45%; */
    /* right: 45%; */
    text-align: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    object-position: center;
    justify-items: center;
    background: #0b0d13;
    border-radius: 100%;
    position: relative;
    height: 60px;
    padding: 65px 25px;
    font-size: 30px;
    width: 150px;
    /* line-height: 34px; */
    top: 10px;
    margin-top: 65px;
}




.backgroundheader {
    height: 350px;
    text-align: center;
    background: url(../images/bgtop.png);
}


.smalltext10 {
    font-size: 10px;
    margin-top: 0px;
    position: absolute;
    text-align: center;
    left: 49px;
    color: #878787;
}





.comingsooncode {
    width: 40%;
    padding: 25px;
    background: #0b83ff;
    background: linear-gradient(186deg, #066bd5 19%, #0d599f 48%, #007dff 78%);
    border-radius: 10px;
    margin: auto;
    position: absolute;
    left: 29%;
    text-align: center;
    text-transform: uppercase;
    margin-top: -65px;
    border-bottom: 1px solid #131720;
    box-shadow: inset 0 0 13px black;
}


.contenttitle {
    font-size: 22px;
    font-weight: 500;
    text-shadow: 1px 1px 8px #0000008f;
    font-family: 'noto';
}


.smalltext10px {
    font-size: 10px;
    font-weight: 500;
}




.bg-content {
    padding: 155px;
}





.text-bghead {
    font-family: 'Poppins';
    font-weight: 500;
    font-size: 20px;
}





.descript-bghead {
    text-transform: uppercase;
    font-family: noto;
    font-size: 13px;
}


.bluetext {
    color: #037fff;
    font-weight: 600;
}






.content {
    width: 100%;
    margin: auto;
    text-align: center;
}



.titlecateg {
    width: 57%;
    padding: 10px;
    background: #0b83ff;
    background: linear-gradient(186deg, #066bd5 19%, #0d599f 48%, #007dff 78%);
    border-radius: 10px;
    margin: auto;
    position: absolute;
    left: 21%;
    text-align: center;
    text-transform: uppercase;
    margin-top: -36px;
    border-bottom: 1px solid #131720;
    box-shadow: 0 0 20px 0px #404040;
}











@import url("https://fonts.googleapis.com/css?family=Geo");
.text-center {
  text-align: center;
}

h3 {
  margin-top: 100px;
}

ul.blocks {
    list-style: none;
    padding: 50px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
}
ul.blocks li.block {
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    margin-bottom: 5px;
    margin-left: 20px;
    margin-right: 20px;
}
ul.blocks li.block .window.macpro {
  width: 415px;
  position: absolute;
  top: 17px;
  left: 19px;
}
ul.blocks li.block .window.macpro img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  height: 248px;
}
ul.blocks li.block .window.imac {
  width: 292px;
  position: absolute;
  top: 12px;
  left: 79px;
}
ul.blocks li.block .window.imac img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  height: 182px;
}
ul.blocks li.block .window img {
  transition: 5s all ease;
}
ul.blocks li.block .window img:hover {
  -o-object-position: bottom;
     object-position: bottom;
}
ul.blocks svg {
  width: 450px;
}




.flexynameprice {
    font-family: kadam;
    font-size: 16px;
    background: #0962bc;
    border-radius: 10px;
    padding: 5px 12px;
    text-align: start;
    border-bottom: 2px solid #8f9096;
    display: flex;
    justify-content: space-between;
}





.productprice {
    padding: 0px 15px;
    background: rgb(150,153,157);
    background: linear-gradient(338deg, rgba(150,153,157,1) 25%, rgb(188 188 191) 41%, rgb(9 98 188) 60%);
    border-radius: 8px;
    color: black;
}




.productname {
    padding: 0px 15px;
    background: rgb(150,153,157);
    background: linear-gradient(160deg, rgba(150,153,157,1) 25%, rgb(188 188 191) 41%, rgb(9 98 188) 60%);
    border-radius: 8px;
    color: black;
    font-weight: 600;
}









.header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    height: 120px;
    background: #3455f1 url(../images/bghead.webp) no-repeat center center/cover;
    padding: 0px 100px;
    border-top: 30px solid #ffffff26;
    border-bottom: 30px solid #ffffff26;
}



.header-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
}



.linkstylehead {
    padding: 20px;
}

.height250 {
    height: 250px;
}


.height450 {
    height: 450px;
}

.subheader {
    text-align: center;
    padding: 0 20px;
    background: #eff5f9 url(../images/plpp.webp);
    background-size: 60%;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: center;
    background-position-y: 100%;
    border-bottom: 10px solid white;
    border-top: 10px solid white;
}


.wrapper80 {
    width: 80%;
    margin: auto;
}



.fs35px {
    font-size: 35px;
}

.fs14px {
    font-size: 14px;
}

.fw900 {
    font-weight: 900;
}


.dsflex {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    cursor: pointer;
}

.header-logo {   
    color: #FFFFFF;
}

.header-logo:hover {   
    color: #000000;
}


.iconlogo {
    font-size: 50px;
}



.buttonproject {
    color: white;
    font-weight: 900;
    padding: 15px;
    border-radius: 50px;
    border: 2px solid #ffffff2b;
    font-size: 15px;
}

.buttonproject:hover {
    color: black;
    background: white;
    cursor: pointer;
}


.city {
    height: 240px;
}

.linkstylesd {
    font-size: 16px;
    font-weight: 900;
    color: white;
    padding: 5px;
    text-decoration: none;
}


.linkstylesd:hover {
    border-radius: 100%;
    border-bottom: 6px solid white;
    padding: 8px 5px;

}


.subheadtext {
    font-size: 30px;
    margin-top: 15px;
}




.subheadtextdescription {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.height300 {
    height: 300px;
}


.offert-btn {
    margin: auto;
    width: 10%;
    margin-top: 25px;
    background: #3456f0;
    padding: 20px;
    border-radius: 50px;
    color: white;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0px 5px 4px #0000005e;
    cursor: pointer;
}




.offert-btn:hover {
    background: linear-gradient(97deg, rgba(57,179,239,1) 26%, rgba(52,86,240,1) 78%);
}


.kind-oflex {
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
}




.w30sut {
    width: 30%;
}


.w70sut {
    width: 70%;
}




.flexleftcontent  {
    padding: 20px;
    background: white;
    margin-top: 25px;
    border-radius: 5px;
    box-shadow: 0px 5px 4px #0000005e;
}


.flxbtnmitd2 {
    display: flex;
    flex-direction: row;
    /* margin-right: 100px; */
    align-items: center;
}
.w3-button {
    margin: 25px;
    display: flex;
    width: 150px;
    height: 50px;
    border-radius: 5px;
    box-shadow: 0px 5px 4px #0000005e;
    background: white;
    border: 5px solid #ffffff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    font-family: Poppins;
    justify-content: flex-start;
    align-items: center;
}

.w3-container {
    padding: 0 20px;
}


.btnimgsc {
    position: relative;
    float: left;
    width: 35px;
    margin-right: 5px;
    border-radius: 5px;
}




.btnviewprojects {
    float: right;
    padding: 18px;
    border-radius: 5px;
    box-shadow: inset 0px 5px 4px #00000026;
    color: white;
    background: linear-gradient(97deg, rgba(57,179,239,1) 26%, rgba(52,86,240,1) 78%);
    font-weight: 700;
    /* position: relative; */
    margin-top: 70px;
}



.btnviewprojects:hover {
 background: linear-gradient(97deg, rgba(57,179,239,1) 26%, rgba(52,86,240,1) 78%);
 box-shadow: 0px 5px 4px #00000026;
}

.blob {
	
	transform: scale(1);
	animation: pulse-blue 2s infinite;
}

.blob.blue {
    /* background: rgba(52, 172, 224, 1); */
    box-shadow: 0 0 0 0 rgb(52 172 224);
    animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
	}
	
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
	}
	
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
	}
}



.stylemybbbg {
    /* background: #3455f100 url(../images/citybg/mybbbg.png) no-repeat center center/cover; */
    background-size: auto;
    /* opacity: .4; */
    /* height: 60px; */
    background-position: center bottom;
}


.mgr20px {
    margin-right: 20px;
}



.btnrequestprojects {
    float: left;
    padding: 18px;
    border-radius: 5px;
    box-shadow: inset 0px 5px 4px #00000026;
    color: white;
    background: linear-gradient(97deg, rgb(33 203 38) 26%, rgb(92 229 22) 78%);
    font-weight: 700;
    /* position: relative; */
    margin-top: 70px;
}


.btnrequestprojects:hover {
    box-shadow: 0px 5px 4px #00000026;
}




/* common */
.box {
    /* border-radius: 10px; */
    /* height: 300px; */
    position: relative;
    /* border: 1px solid #BBB; */
    /* background: #eff5f9; */
}
.ribbon {
   position: absolute;
   right: -5px; top: -5px;
   z-index: 1;
   overflow: hidden;
   width: 75px; height: 75px; 
   text-align: right;
}
.ribbon span {
    font-size: 10px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    /* font-weight: bold; */
    line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #79A70A;
    background: linear-gradient(#9BC90D 0%, #79A70A 100%);
    box-shadow: 0 3px 10px -5px rgb(0 0 0);
    position: absolute;
    top: 19px;
    right: -21px;
}




.ribbon span::before {
   content: '';
   position: absolute; 
   left: 0px; top: 100%;
   z-index: -1;
   border-left: 3px solid #79A70A;
   border-right: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}
.ribbon span::after {
   content: '';
   position: absolute; 
   right: 0%; top: 100%;
   z-index: -1;
   border-right: 3px solid #79A70A;
   border-left: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}


.purpple span {background: linear-gradient(#a505f7 0%, #6e088f 100%);}
.orange span {background: linear-gradient(#f76a05 0%, #8f5f08 100%);}


.yellow span {background: linear-gradient(#e8f705 0%, #8d8f08 100%);}
.green span {background: linear-gradient(#57f705 0%, #238f08 100%);}
.grey span {background: linear-gradient(#858585 0%, #1c1c1c 100%);}


.red span {background: linear-gradient(#F70505 0%, #8F0808 100%);}
.red span::before {border-left-color: #8F0808; border-top-color: #8F0808;}
.red span::after {border-right-color: #8F0808; border-top-color: #8F0808;}

.blue span {background: linear-gradient(#2989d8 0%, #1e5799 100%);}
.blue span::before {border-left-color: #1e5799; border-top-color: #1e5799;}
.blue span::after {border-right-color: #1e5799; border-top-color: #1e5799;}


.bodyarea {
    margin-bottom: 20px;
}



.border10white {
    border: 6px solid white;
    margin: 30px 0px;
}



.latestprojects-title {
    font-size: 35px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 20px;
}

.latestprojects7 {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
}


.projectbox {
    width: 20%;
    text-align: center;
    border: 1px solid #eff5f9;
    background: white;
    padding: 15px;
    margin: 20px;
    border-radius: 5px;
    box-shadow: 0px 5px 4px #0000005e;
    height: 352px;
}

.projectname {
    background: #eff5f9;
    position: relative;
    width: 50%;
    padding: 10px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    margin-left: -29px;
    box-shadow: inset -1px 0px 1px 0px #00000026;
}


.lstprojectimages {
    width: 295px;
    margin-top: 15px;
    box-shadow: inset 0px 5px 4px #0000005e;
    border: 1px solid #64646447;
    border-radius: 4px;
}













/*------------------------------------------------------ 
This add the "View" notice when the image is linked"
If not need everything below can be removed
-------------------------------------------------*/
.frame {
    margin-top: 13px;
    border-radius: 5px;
}
.card .title{
  text-align:center;
}

/* Hover Scroll Effect */
.frame {
    width: -webkit-fill-available;
    height: 300px;
    overflow: hidden;
}
.frame img{
  object-fit: cover;
  width:100%;
  transform: translateY(0);
  transition: 8s ease-out;
}
.frame:hover img {
  object-fit: cover;
  width:100%;
  /* Considering frame height   */
  transform: translateY(calc(-100% + 300px));
  transition: 8s ease-out;
}
/*OR */
/* .frameimg:hover{
  object-fit: cover;
  width:100%;
  transform: translateY(-100%);
  transition: 8s ease-out;
} */


.frame:hover .bg-image{
    background-position: 0 100%;
 }





.mhei300 {
    min-height: 300px;
}


.projectbox:hover {
    font-weight: 900;
}



.diagnol svg {
    display: block;
    width: 100%;
    height: 90px;
    margin-bottom: -1px;
    background: #eff5f9;
}

.diagnol svg polygon {
    fill: #2f40f4e0;
}



.bggpolygon {
    background: linear-gradient(97deg, rgba(57,179,239,1) 26%, rgba(52,86,240,1) 78%);
}


#clientstest {
    height: 850px;
    background: #4656f4;
    margin-bottom: 20px;
}



.blursmalldescription {
    text-align: center;
    margin-top: 20px !important;
    font-size: 21px;
    width: 50%;
    color: #fdfdfd;
    margin: auto;
}

.titlebluredimg {
    font-size: 35px;
    text-align: center;
    color: white;
}


.codetext {
    background: linear-gradient(217deg, #eff5f9, white);
    border-radius: 4px;
    color: #2f40f4;
    font-weight: 600;
    padding: 5px 5px 7px 5px;
    box-shadow: 0px 0px 8px 0px #eff5f9;
}

.centerbluredimg {
    text-align: -webkit-center;
    margin-top: -50px;
}


#footerstpoly {
    height: 350px;
    background: #4656f4;
}

.sociallinks {
    display: flex;
    padding: 20px;
    justify-content: space-around;
    flex-wrap: nowrap;
    align-content: center;
    flex-direction: row;
    font-size: 25px;
    color: #ffffff;
    border-top: 10px solid white;
    border-bottom: 10px solid white;
}


.sociallinksbutton {
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    background: #4656f4;
    border-radius: 10px;
}




.copyrighttext {
    padding: 10px;
    text-align: center;
    font-size: 20px;
    margin: auto;
}



.utilitylinktitle {
    font-size: 30px;
    margin-left: 130px;
    font-weight: 600;
    margin-top: -50px;
    color: white;
}


.flexlinks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: center;
    text-align: center;
}

.column {
    width: 33%;
}


.linkutilitydes {
    padding: 15px;
    font-weight: 600;
    color: #4656f4;
    background: #eff5f9;
    width: 40%;
    margin: auto;
    border-radius: 5px;
    margin-bottom: 10px;
}

.utilitylinkdescription {
    font-size: 20px;
    color: white;
    padding: 20px;
    text-align: start;
    margin-left: 30px;
    margin-top: -25px;
}





#facebook-icon {
  background: $blue-color;
  text-indent: -999em;
  width: 100px;
  height: 110px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  border: 15px solid $blue-color;
  border-bottom: 0;
  display: inline-block;
  &::before {
    background: $blue-color;
    content: "/20";
    position: absolute;
    bottom: -30px;
    right: -37px;
    width: 40px;
    height: 90px;
    border: 20px solid $gray-color;
    border-radius: 25px;
  }
  &::after {
    background: $gray-color;
    content: "/20";
    position: absolute;
    top: 50px;
    right: 5px;
    width: 55px;
    height: 20px;
  }
}



.instagramlogofoot {
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}




.fblogofoot {
background: rgb(57,179,239);
background: radial-gradient(circle, rgba(57,179,239,1) 25%, rgba(52,86,240,1) 68%);

}




.glugulugu {
background: rgb(240,88,96);
background: radial-gradient(circle, rgba(240,88,96,1) 25%, rgba(145,1,1,1) 70%);
}


.twitterogofoot {
background: rgb(57,161,239);
background: radial-gradient(circle, rgba(57,161,239,1) 25%, rgba(52,204,240,1) 68%);
}





.githublogofoot {
background: rgb(105,106,107);
background: radial-gradient(circle, rgba(105,106,107,1) 25%, rgba(33,33,33,1) 68%);
}




.youtubelogofoot {
background: rgb(252,77,86);
background: radial-gradient(circle, rgba(252,77,86,1) 25%, rgba(203,21,9,1) 68%);
}






.contactform {
    text-align: center;
    display: flex;
    width: 80%;
    margin: auto;
    padding: 10px;
}



.titleforms {
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0px;
    font-family: 'raleway';
}