@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,900');
 @import url('https://fonts.googleapis.com/css?family=Oswald');
 /* ---------For Padding Property ---------*/ 
.pd-0{padding: 0}
.pd-left-0{padding-left: 0}
.pd-right-0{padding-right: 0}
.pd-top-10{padding-top: 10px}
.pd-top-15{padding-top: 10px}
.pd-top-20{padding-top: 20px}
.pd-top-30{padding-top: 30px}
.pd-top-40{padding-top: 40px}
.pd-top-50{padding-top: 50px}
.pd-top-60{padding-top: 60px}
.pd-top-70{padding-top: 70px}
.pd-top-80{padding-top: 80px}
.pd-top-90{padding-top: 90px}
.pd-top-100{padding-top: 100px}
.pd-top-110{padding-top: 110px}
.pd-top-210{padding-top: 210px}
.pd-top-260{padding-top: 260px}

.pd-btm-100{padding-bottom: 100px}
.pd-btm-70{padding-bottom: 70px}
.pd-btm-60{padding-bottom: 60px}
.pd-btm-50{padding-bottom: 50px}
.pd-btm-40{padding-bottom: 40px}
.pd-btm-30{padding-bottom: 30px}
.pd-btm-20{padding-bottom: 20px}
.pd-btm-0{padding-bottom:0px}
.pd-lr-35{padding:0 35px;}

/*--------- For Padding Property --------*/

::-webkit-input-placeholder{color: #525252;}
::-moz-placeholder {color: #525252;}
:-ms-input-placeholder{color: #525252;}
:-moz-placeholder {color: #525252;}

body{font-family:'Source Sans Pro',sans-serif;color: black}
img{border: 0px}
a{color: #303339;transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out;}
button{transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out;}
a:hover, a:focus{text-decoration: none; color:#f57e16 }
a:focus{outline: none;}
button:focus{outline: none;}
img{object-fit: cover}

h1,h2,h3,h4{font-family: 'Oswald', sans-serif;}

P{font-weight: 300;}
/*--------- For Header Section --------*/
header .container{width: 100%;margin: 0px auto;position: fixed;z-index: 99;display: table;}

.contactNumberRow{width: 100%;}
/*.contactNumberRow .row{background-color: rgba(255,255,255,0.1)}*/
.headerContact{color: white;float: right;    margin-right: 3px;    padding: 5px 0;}
.headerContact a{    color: #fff;    float: right;    font-size: 17px;   padding-left: 2em;    position: relative;}
.headerContact a.beforeLine:before {    content: '';    position: absolute;    left: 15px;    height: 14px;    width: 1px;    color: #fff;    z-index: 999;    top: 5px;    background: #ffffff;}
.headerContact a i{font-size: 15px;margin-right: 5px}


.headerSection{width: 100%;display: table;padding: 0 15px;/*border-bottom: 1px solid rgba(255,255,255,0.2);*/position: fixed;top: 34px}
.headerSection.fixed-header{background-color: rgba(0,0,0,0.9);    top: 0;z-index: 99999;    transition: 0.5s all ease-in-out;}
.headerSection a.logoClick{float: left;display: inline-block;margin: 10px 0;}
.headerSection a.logoClick img{width: 220px}
.headerSection .headerList{float: right;display: inline-block;margin-bottom: 0;transition: 0.5s all ease-in-out;height: auto;}
.headerSection .headerList li{display: inline-block;list-style-type: none;vertical-align: middle;}
.headerSection .headerList li a{    text-decoration: none;    padding: 28px 20px;    display: block;    text-transform: uppercase;    color: #fff;    width: 100%;    text-align: center;    float: left;    letter-spacing: .8px;    font-size: 17px;    font-weight: 400; border-bottom: 5px solid transparent;}
.headerSection .headerList .inquiryBtn a{background-image: linear-gradient(to bottom, #e56e3b, #e46a36, #e46731, #e3632c, #e25f27);    border-radius: 50px;    padding: 10px 30px;    font-weight: 600;}
.headerSection .headerList li a:hover, .headerSection .headerList li a:focus, .headerSection .headerList li a.active{border-color: #f6821f}

/*--------- For Banner Slider Section --------*/

.bannerSlider{position: relative;}
.bannerSlider .carousel-inner{height: 100%;}
.bannerSlider .carousel-inner>.item{height: 100%}
.bannerSlider .carousel-inner>.item>a>img,.bannerSlider .carousel-inner>.item>img{width: 100%;height: 100%;}
.bannerSlider .item:after{    content: " ";    position: absolute;    top: 0;   bottom: 0;    left: 0;   right: 0;    background: rgba(43,48,54,0.80);  background-attachment: fixed;}

.bannerSlider .bannerTxt{position: absolute;color: white;z-index: 1;top: 25%;width: 100%;text-align: center;}
.bannerSlider .bannerTxt h2{font-family: 'Oswald', sans-serif;font-weight: 600;font-size: 70px;line-height: 100px;letter-spacing: 3px}
.bannerSlider .bannerTxt p{    font-size: 27px;    margin: 50px auto;line-height: 35px}
.bannerSlider .bannerTxt a{background-image: linear-gradient(to bottom, #e56e3b, #e46a36, #e46731, #e3632c, #e25f27);    border-radius: 50px;    padding: 15px 45px;    font-weight: 600;    margin: 70px auto;    display: table;    font-size: 20px;    color: white;}

/* Custom Indicator */
.bannerSlider .carousel-indicators{bottom: 89px;    /* right: 0; */  left: 31.6%;   display: table;    width: 1%;}
.bannerSlider .carousel-indicators li{background-color: #929497;border-color: #929497;width: 14px;height: 14px;margin-bottom: 15px;border-radius: 100%;}
.bannerSlider .carousel-indicators li.active{width: 22px;    height: 22px;    margin: 0;   background: #ffffff;
background:-webkit-linear-gradient(top, #ffffff, #929497);
background: -moz-linear-gradient(top, #ffffff, #929497);
background: -ms-linear-gradient(top, #ffffff, #929497);
background: -o-linear-gradient(top, #ffffff, #929497);
background: linear-gradient(to bottom, #ffffff, #929497);  border: 2px solid rgba(0,0,0,1);    box-shadow: 0px 0px 4px 3px #929497;margin-bottom: 15px}
.bannerSlider .carousel-indicators::after{content: '';display: block;height: 100px;width: 1px;background-color: #929497;position: absolute;    left: 50%;    bottom: -99px;}


/*--------- For About US Section --------*/

.aboutUsSection{padding: 70px 0;display: block;width: 100%;position: relative;overflow: hidden;background-color: #f4f8fb;height: 770px;}
.aboutImages{display: table-cell;vertical-align: middle;height: 770px;position: relative;width: 55%;}
.laptopImage{    position: absolute;    left: -162px;    top: 20px;z-index: 1}
.iphoneImgae{    position: absolute;        left: 190px;    top: 310px;z-index: 2}
.aboutTxt{display: table-cell;vertical-align: middle;height: 770px;padding-bottom: 170px;width: 45%}
.aboutTxt h2{font-family: 'Oswald', sans-serif;font-weight: 600;color: #f5821f;font-size: 42px;letter-spacing: 2px;text-transform: uppercase;}
.aboutTxt p{margin: 50px 0;font-size: 21px;    font-weight: 300;    color: black;width: 76%}
.aboutTxt a{background-color: #3d3d3d;border-radius: 50px;color: white; padding: 15px 35px;font-size: 17px;font-weight: 600;letter-spacing: 1px;display: table;box-shadow: 8px 19px 69px rgba(61, 61, 61, 0.5)}
/*------ Radar css-------*/
.radar {
position:absolute;
left:29%;
top:12%;
}

.radar span {
position:absolute;
width:350px;
height:350px;
border-radius:999px;
animation:radar 5s infinite linear;
-webkit-animation:radar 5s infinite linear;
opacity:0;
background: white;
-webkit-background: white;
/*box-shadow:0 0 80px 0px rgba(244,244,244,0.2);*/
z-index: 0;
border:4px solid lightgray;
}

.radar span:nth-child(1) {
animation-delay:0s;
-webkit-animation-delay:0s;
background: white;
-webkit-background: white;
}

.radar span:nth-child(2) {
animation-delay:.66s;
-webkit-animation-delay:.66s;
background: white;
-webkit-background: white;
}

.radar span:nth-child(3) {
animation-delay:1.33s;
-webkit-animation-delay:1.33s;
background: white;
-webkit-background: white;
}

@keyframes radar {
0% {
transform:scale(0);
opacity:0
}

/*25% {
transform:scale(0);
opacity:.5
}*/

50% {
transform:scale(1);
opacity:1
}

/*75% {
transform:scale(1.5);
opacity:.5
}
*/
100% {
transform:scale(2);
opacity:0
}

}

@-webkit-keyframes radar {
0% {
-webkit-transform:scale(0);
opacity:0
}

/*25% {
-webkit-transform:scale(0);
opacity:.3
}
*/
50% {
-webkit-transform:scale(1);
opacity:.6
}

/*75% {
-webkit-transform:scale(1.5);
opacity:.5
}
*/
100% {
-webkit-transform:scale(2);
opacity:0
}

}
/*-------Radar css end*/

/*--------- For Services Section --------*/

.serviceSection{padding: 80px 0;display: block;width: 90%;position: relative;overflow: hidden;margin: 0px auto}
.serviceTxt{width: 27%;display: inline-block;float: left;padding-top: 12%}
.serviceTxt h2{font-family: 'Oswald', sans-serif;font-weight: 600;color: #f5821f;font-size: 42px;letter-spacing: 2px;text-transform: uppercase;}
.serviceTxt p{font-size: 30px;margin: 50px 0 60px;line-height: 35px;}
.serviceTxt p span{font-weight: 600;}
.serviceInfo{padding: 30px 00px 30px 50px;width: 40%;display: inline-block;}
.serviceDetails{display: table;width: 100%;margin-bottom: 70px;}
.serviceDetails.middleService{padding-left: 75px;}
.serviceDetails:last-of-type{margin-bottom: 0}
.serviceImg{display: table-cell;width: 110px;}
.serviceImg span{width: 80px;height: 80px;border: 5px solid white;background-color: #3d3d3d;vertical-align: middle;border-radius: 100%;display: table-cell;text-align: center;box-shadow: none;background-image: url(../images/sprit-img.png);}
.serviceImg span.appleIcon{background-position: -2px -5px;}
.serviceImg span.android{background-position: 0px -72px;}
.serviceImg span.web{background-position: 0px -140px;}
.serviceDetails:hover span{background-color: #f08a30;box-shadow: 0px 10px 60px rgba(61,61,61,0.57)}
.serviceImg span i{color: white;font-size: 43px;}
.serviceImg span i.lapy{font-size: 36px;}
.serviceImgDetail{display: table-cell;vertical-align: top;}
.serviceImgDetail h2{text-transform: uppercase;font-weight: 600;font-family: 'Oswald', sans-serif;font-size: 27px;margin:0 ;letter-spacing: 1px}
.serviceImgDetail p{    margin: 20px 0;    font-size: 21px;    font-weight: 300;    color: black;}


.serviceCenterImg{width: 33%;display: inline-block;float: left;padding-top: 6%;margin: 0px auto;position: relative;margin-top: 6%;height: 482px;}

.outerRound-outer{
  -moz-animation: rotate-rev 5s infinite linear;
  -webkit-animation: rotate-rev 5s infinite linear;
  animation: rotate-rev 5s infinite linear;  
  position: absolute;
  top: 0;  
}
.outerRound-inner{
  top: 0;
  position: absolute;
  -moz-animation: rotate 9s infinitelinear;
  -webkit-animation: rotate 9s infinite linear;
  animation: rotate 9s infinite linear;
}
.innerCircle{text-align: center;margin: 0px auto;position: relative;position: absolute;top: 0}
.innerMobile{position: absolute;left: 200px;top: 160px;}
.dot1 {width: 8px;    height: 8px;    background: #acacac;    position: absolute;    border-radius: 100%;   top: 3px;    left: 232px;    z-index: 1;}
.dot2 {width: 18px;height: 18px;background: black;position: absolute;border-radius: 100%;top: 54px;left: 80px;}
.dot3 {width: 30px;height: 30px;background: #acacac;position: absolute;border-radius: 100%;top: 80px;    left: 42px;}
.dot4 {width: 22px;height: 22px;background: #000;position: absolute;border-radius: 100%;top: 371px;    left: 42px;}
.dot5 {width: 18px;height: 18px;background: #acacac;position: absolute;border-radius: 100%;    top: 469px;    left: 231px;}
.dot6 {width: 10px;height: 10px;background: #404040;position: absolute;border-radius: 100%;top: 343px;    left: 68px;}
.dot7 {width: 25px;height: 25px;background: #404040;position: absolute;border-radius: 100%;    top: 414px;    left: 302px;}
.dot8 {width: 21px;height: 21px;background: #404040;position: absolute;border-radius: 100%;    top: 397px;    left: 342px;}
.dot9 {width: 10px;height: 10px;background: black;position: absolute;border-radius: 100%;top: 41px;    left: 236px;}
.dot10 {width: 10px;height: 10px;background: #acacac;position: absolute;border-radius: 100%;    top: 410px;    left: 397px;}
.dot11 {width: 15px;height: 15px;background: black;position: absolute;border-radius: 100%;    top: 160px;    left: 457px;}

.serviceStacticImage{display: none;}
.serviceAnimation{display: block;}

/* service Animation */

/*==============ANIMATIONS=================*/

/*==============ROTATE=====================*/

@-moz-keyframes rotate{
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate{
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}

@keyframes rotate{
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

/*==============ROTATE-REV=================*/

@-moz-keyframes rotate-rev{
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(-360deg);}
}

@-webkit-keyframes rotate-rev{
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(-360deg);}
}

@keyframes rotate-rev{
  0% {transform: rotate(0deg);}
  100% {transform: rotate(-360deg);}
}



/*--------- For Clients Section --------*/

.clientSection{padding: 30px 50px;display: block;width: 100%;position: relative;overflow: hidden;background-color: #e8edf1}
.clientTxt {  text-align: center;    font-family: 'Oswald', sans-serif;    font-weight: 600;   color: #f5821f;    font-size: 42px;    letter-spacing: 2px;   text-transform: uppercase;}
.clientSlider p{margin: 20px 0;    font-size: 24px;color: black;}
.clientSlider{margin: 0px auto;    width: 100%;    text-align: center;    padding-left: 0px;}
.clientSlider .columns {width: 100%;}
.clientSlider .owl-carousel{max-width: 100%;margin-top: 20px}
.clientSlider .owl-stage-outer{padding: 9px 0 5px;}
.clientSlider .owl-carousel li{margin: 10px 0;height: 85px;list-style-type: none;}
.clientSlider .owl-theme .owl-dots,.clientSlider .owl-theme .owl-nav{display: none;}
.clientSlider .owl-carousel .owl-item img{margin: 12px auto}

/*--------- For Testimonial Section --------*/

.testimonialSection{padding: 80px 0 130px;display: block;width: 100%;position: relative;overflow: hidden;text-align: center;}
.testimonialSection::after{content: '';position: absolute;height: 100%;width: 100%;top: 0;left: 0;background: url(../images/doticon.png)repeat;z-index: -1}
.testimonialSection .testimonialsTxt{text-align: center;    font-family: 'Oswald', sans-serif;    font-weight: 600;   color: #f5821f;    font-size: 42px;    letter-spacing: 2px;   text-transform: uppercase;}
.testimonialSection p{margin: 20px 0;    font-size: 24px;color: black;text-align: center;}
.testimonialSection p span{font-weight: 600}

.testimonialSection .testimonialImgBox{position: relative;margin: 50px auto 30px;width: 185px;height: 185px}
.testimonialSection .testimonialImgBox::after{content: ''; border:3px solid white;    width: 53px;    height: 53px;    background-color: #f5821f;    position: absolute;    display: inline-block;    border-radius: 100%;    bottom: 13px;    right: -4px;   background-image: url(../images/sprit-img.png);   background-position: -126px -14px;}
.testimonialSection .testimonialImgBox img.testimonialImg{text-align: center;width: 100%;height: 100%;border-radius: 100%}
.testimonialSection .testimonialSlider h3{color: black;font-size: 30px;font-family:  'Oswald', sans-serif;font-weight: 600;letter-spacing: 1px;}
.testimonialSection .testimonialSlider p{    font-weight: 300;    width: 70%;margin: 40px auto 0;font-size: 21px;}

.testimonialSection .carousel-indicators{bottom: -50px;}
.testimonialSection .carousel-indicators li{border:none;background-color: #3d3d3d}
.testimonialSection .carousel-indicators .active{background-color: #e3622b;width: 10px;height: 10px;margin: 1px}


/*--------- For Case Study Section --------*/

.caseStudySection{padding: 70px 0;display: block;width: 100%;position: relative;overflow: hidden;background: #f5821f;
background:-webkit-linear-gradient(right, #f5821f, #e25e26);
background: -moz-linear-gradient(right, #f5821f, #e25e26);
background: -ms-linear-gradient(right, #f5821f, #e25e26);
background: -o-linear-gradient(right, #f5821f, #e25e26);
background: linear-gradient(to left, #f5821f, #e25e26);height: 870px;color: white}
.caseStudyImages{display: table-cell;vertical-align: middle;height: 870px;position: relative;width: 50%}
.caseStudyImages .laptopImage{    position: absolute;    left: -450px;    top: 20px;z-index: 1}
.caseStudyImages .iphoneImgae{position: absolute;    left: 410px;    bottom: 150px;   z-index: 2;    top: auto;}
.caseStudyDescription{display: table-cell;vertical-align: middle;height: 870px;padding-bottom: 150px;padding-left: 60px;width: 50%}
.caseStudyDescription h2{font-family: 'Oswald', sans-serif;font-weight: 600;color: #fff;font-size: 55px;letter-spacing: 2px;}
.caseStudyDescription p{margin: 50px 0;font-size: 24px;    font-weight: 300;    color: #fff;width: 90%}
.caseStudyDescription a{background-color: #3d3d3d;border-radius: 50px;color: white; padding: 15px 20px 15px 35px;font-size: 17px;font-weight: 600;letter-spacing: 1px;display: table;box-shadow: 8px 19px 69px rgba(61, 61, 61, 0.5);transition: 0.5s all ease-in-out;position: relative;}
.caseStudyDescription a span.arrowRight{background-image: url(../images/sprit-img.png); width: 30px;height: 20px;vertical-align: middle;display: inline-block;margin-left: 10px;background-position: -135px -72px;}
/*.caseStudyDescription a:hover span{display: inline-block;transition: 0.5s all ease-in-out;left: 130px;opacity: 1;margin-left: 10px}*/
/*.caseStudyDescription a:hover{padding-right: 50px;}*/

/* case study slider */
.caseStudySection .carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.caseStudySection .carousel-fade .carousel-inner .item,
.caseStudySection .carousel-fade .carousel-inner .active.left,
.caseStudySection .carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.caseStudySection .carousel-fade .carousel-inner .active,
.caseStudySection .carousel-fade .carousel-inner .next.left,
.caseStudySection .carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.caseStudySection .carousel-fade .carousel-inner .next,
.caseStudySection .carousel-fade .carousel-inner .prev,
.caseStudySection .carousel-fade .carousel-inner .active.left,
.caseStudySection .carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.caseStudySection .carousel-fade .carousel-control {
  z-index: 2;
}
.caseStudySection .carousel,
.caseStudySection .carousel-inner,
.caseStudySection .carousel-inner .item {
  height: 100%;
  overflow: visible;
}
.caseStudySection .carousel-indicators{bottom: -45px;}
.bubble1{width: 36px;height: 36px;background-color: rgba(255,255,255,0.08);position: absolute;left: 70%;top: 90px;border-radius: 100%;}
.bubble2{width: 150px;height: 150px;background-color: rgba(255,255,255,0.08);position: absolute;left: 84%;top: 60px;border-radius: 100%;}
.bubble3{width: 330px;height: 330px;background-color: rgba(255,255,255,0.08);position: absolute;left: 94%;top: -80px;border-radius: 100%;}
.bubble4{width: 320px;height: 320px;background-color: rgba(255,255,255,0.08);   position: absolute;  left: 61%;    top: 64%;    border-radius: 100%;    z-index: -1;}
.bubble5{width: 150px;height: 150px;background-color: rgba(255,255,255,0.08);position: absolute;left: 82%;top: 83%;border-radius: 100%;}

.dish1{position: absolute;bottom: -10px;right: 260px}
.dish2{position: absolute;bottom: 10px;right: -230px;}

/* Bubble Animation */


/*body {
  background: #09f;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOTlmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1ZDFmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0099ff), color-stop(100%, #45d1ff));
  background-image: -moz-linear-gradient(bottom, #0099ff, #45d1ff);
  background-image: -webkit-linear-gradient(bottom, #0099ff, #45d1ff);
  background-image: linear-gradient(to top, #0099ff, #45d1ff);
}
*/
.bubbles {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.bubble-container {
  position: absolute;
  -webkit-animation: bubblerise 5s infinite ease-in;
  -moz-animation: bubblerise 5s infinite ease-in;
  -ms-animation: bubblerise 5s infinite ease-in;
  animation: bubblerise 5s infinite ease-in;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}

.bubble {
  width: 6px;
  height: 6px;
  margin: 0 auto;
  border: 0px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.25);
  -moz-border-radius: 150px;
  -webkit-border-radius: 150px;
  border-radius: 150px;
}

@-webkit-keyframes bubblerise {
  0% {
    bottom: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
  5% {
    bottom: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
  }
  99% {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
  }
  100% {
    bottom: 100%;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}
@-moz-keyframes bubblerise {
  0% {
    bottom: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
  5% {
    bottom: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
  }
  99% {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
  }
  100% {
    bottom: 100%;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}
@-ms-keyframes bubblerise {
  0% {
    bottom: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
  5% {
    bottom: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
  }
  99% {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
  }
  100% {
    bottom: 100%;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}
@keyframes bubblerise {
  0% {
    bottom: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
  5% {
    bottom: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
  }
  99% {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
  }
  100% {
    bottom: 100%;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}



/*--------- For Achivement Section --------*/

.achivementSection{padding: 80px 0;display: block;width: 100%;position: relative;overflow: hidden;text-align: left;}
.achivementSection::after{content: url(../images/portfoliodevice.png);display: inline-block;position: absolute;top: 100px;right: -350px;}

.achiementsInfo h2{font-family: 'Oswald', sans-serif;font-weight: 600;color: #f5821f;font-size: 55px;letter-spacing: 2px;text-transform: uppercase;}
.achiementsInfo p{font-size: 30px;margin: 20px 0 60px;line-height: 35px;}

.achivementDetails{margin: 70px 0 0;    display: table;    width: 80%;}
.achivementBox{display: table;width: 45%;float: left;padding-bottom: 50px;}
.achivementIcon{display: table-cell;width: 110px;vertical-align: middle;}
.achivementIcon span{width: 80px;height: 80px;background-color: #3d3d3d;vertical-align: middle;border-radius: 100%;display: table-cell;text-align: center;box-shadow: none;background-image: url(../images/sprit-img.png);transition: 0.5s all ease-in-out}
.achivementBox:hover span{background-color: #f08a30;box-shadow: 0px 10px 60px rgba(61,61,61,0.57)}
.achivementIcon span.mobile{background-position: 4px -206px}
.achivementIcon span.website{background-position: 5px -275px}
.achivementIcon span.client{background-position: 5px -345px}
.achivementIcon span.country{background-position: 5px -414px}
.achivementIconDetails{display: table-cell;}
.achivementIconDetails h2{color: #000;font-size: 62px;font-family: 'Oswald', sans-serif;}
.achivementIconDetails p{font-size: 20px;margin: 10px 0;font-weight: 400;letter-spacing: 1px}


/*--------- For Achivement Section --------*/

.contactUsSection{padding: 80px 0;display: block;width: 100%;position: relative;overflow: hidden;background-color: #f4f8fb}
.contactus-text{    text-align: center;    font-family: 'Oswald', sans-serif;    font-weight: 600;    color: #f5821f;    font-size: 42px;    letter-spacing: 2px;    text-transform: uppercase;}    
.content {    font-size: 150%;    width: 75%;    margin: 0px auto;}
.content-text {    width: 80%;    margin-left: 12%;    padding-top: 20px;    display: table;    text-align: left;    font-size: 19px;   color: #4f4f4f;}
.contact-text {    margin: 20px auto;    width: 71%;line-height: 28px;    text-align: center;    font-size: 24px;   color: black;    }
.submit-button{float: right;}
.submitDetails{background-color: #3d3d3d;
    border-radius: 50px;
    color: white;
    padding: 15px 75px;
    font-size: 20px;    
    letter-spacing: 1px;
    display: table;
    box-shadow: 8px 19px 69px rgba(61, 61, 61, 0.5);
    transition: 0.5s all ease-in-out;
    position: relative;border:none;}


/*--------- For Footer Section --------*/
footer{position: relative;width: 100%;height: 100%;}
.footerDot{position: absolute;width: 100%;height: 100%;background: url(../images/dot-pattern.png)repeat;display: block;z-index: 1}
.footerSection{background-color: #262626;padding: 40px 0;position: relative;}
.footerService{position: relative;z-index: 4}
.footerService::after{    content: '';
    height: 250px;
    width: 1px;
    position: absolute;
    right: -20px;
    top: -50px;
    display: block;
    z-index: 6;
    background: #3d3d3d;}
.footerService.serviceFooter::after{right: 60px;top: 0}    
.footerService h3{color: white;font-family: 'Oswald', sans-serif;font-weight: 600;font-size: 24px;letter-spacing: 1px;text-transform: uppercase;margin-bottom:20px}
.footerService a{color: white;width: 100%;display: block;font-size: 16px;margin: 10px 0;padding-left: 23px;}
.footerService a:hover{color: #e3622b}
.footerService a::before{    content: '';    padding-right: 5px;    background-image: url(../images/sprit-img.png);    width: 20px;    height: 20px;    background-position: -142px -114px;    display: inline-block;margin-left: -20px;}
.mainServices{padding-left: 20px;}
.mainServices li{list-style-type: none;}
.mainServices li a{color: #b4b4b4}
.mainServices li a:hover{padding-left: 30px;color: #e3622b}
.moreService{margin-top: 67px}

.footerContact{padding-left: 80px;position: relative;z-index: 4}
.footerContact img{width: 230px;margin-top: 20px;margin-bottom: 10px;}
.footerContact span.footerSprit{background-image: url(../images/sprit-img.png);    width: 30px;    height: 34px;    display: inline-block;    vertical-align: middle;}
.footerContact span.footerMobile{background-position: -138px -213px}
.footerContact span.footerSkype{background-position: -135px -156px;margin-right: 5px;}

.footerContact span{width: 100%;color: white;display: block;margin: 5px 0}
.footerContact span a {color: #b4b4b4;font-size: 18px}
.footerContact span a i{color: #b4b4b4;padding-right: 5px;font-size: 26px;vertical-align:middle;}
.footerSocial ul {padding-left: 0;margin: 20px 0}
.footerSocial ul li{list-style-type: none;display: inline-block;margin-right: 12px;}
.footerSocial ul li a i{font-size: 17px;}
.fb-icon{border-radius: 100%;color: #b4b4b4;border:2px solid #b4b4b4;text-align: center;width: 35px;height: 35px;vertical-align: middle;display: table-cell;}
.fb-icon:hover{color: #3b5998;border:2px solid #3b5998;transition: 0.2s}

.tw-icon{border-radius: 100%;color: #b4b4b4;border:2px solid #b4b4b4;text-align: center;width: 35px;height: 35px;vertical-align: middle;display: table-cell;}
.tw-icon:hover{color: #00aced;border:2px solid #00aced;transition: 0.2s}

.gp-icon{border-radius: 100%;color: #b4b4b4;border:2px solid #b4b4b4;text-align: center;width: 35px;height: 35px;vertical-align: middle;display: table-cell;}
.gp-icon:hover{color: #dd4b39;border:2px solid #dd4b39;transition: 0.2s}

.ln-icon{border-radius: 100%;color: #b4b4b4;border:2px solid #b4b4b4;text-align: center;width: 35px;height: 35px;vertical-align: middle;display: table-cell;}
.ln-icon:hover{color: #0077B5;border:2px solid #0077B5;transition: 0.2s}

.pn-icon{border-radius: 100%;color: #b4b4b4;border:2px solid #b4b4b4;text-align: center;width: 35px;height: 35px;vertical-align: middle;display: table-cell;}
.pn-icon:hover{color: #C92228;border:2px solid #C92228;transition: 0.2s}

.copyrightSection{background-color: #010101;width: 100%;display: table;position: relative;}
.copyrightSection p{text-align: center;color: #b4b4b4;margin: 15px auto;font-size: 18px;position: relative;z-index: 4}





/* ===============================================  About us Core CSS  ================================================ */

.commonWrapper{width: 100%; height: 420px;background: url(../images/bgimg.jpg); background-size: cover; position: relative; display: table;}
.commonWrapper:before{background:rgba(000,000,000,0.7); position: absolute; top:0px; left: 0px; width: 100%; height: 100%; content:'';}
.textHeader{height: 100%; display: table-cell;vertical-align:middle; width: 100%; text-align: center; z-index:9; position: relative;}
.textHeader h1{font-size:5em; font-family: 'Oswald'; color: #ffffff; padding-top:1em;}
.ourGlobalMission h3, .aboutContainWrap h2{text-align: center; font-size: 3.125em; color:#f5821f; margin-top: 0px; margin-bottom:0px}
.aboutContainWrap p{font-size:1.5em; line-height:1.5; margin-top:35px; margin-bottom: 0px;}

.ourGlobalMission{background:#f5f8fa;}
.ourGlobalMission p{ font-size:1.75em; color: #000000; text-align: center; line-height:30px;max-width: 80%; margin: 0px auto 15px;}

.ourValueBox{margin-top:70px; height: 340px;}
.ourValueBox h4{font-size: 1.8em; text-align: center; margin:30px 0px; text-transform: uppercase; font-weight:400;}
.ourValueBox p{font-size: 1.4em; text-align: center;  line-height:1.5; text-align: justify;}
.ourGlobalMission .valueIconsHeading{font-size: 2em;    margin: 40px 0 0;}
.valueIcons{width: 72px; height: 72px; background:#595959; border-radius:100%; margin: 0px auto;}
.valueIcons span{background:url(../images/sprit-img.png) no-repeat left top; width:100%; height: 100%; display: table;}
.valueIcons span.innovation{background-position:-218px -12px;}
.valueIcons span.transparency{background-position:-218px -89px;}
.valueIcons span.satisfaction{background-position:-220px -167px;}

.ourValueBox:hover .valueIcons{background:#f5821f; transition: 0.4s ease-in-out; box-shadow: 0px 3px 13px rgba(000,000,000,0.2);}





/* ===============================================  Responsive Core CSS  ================================================ */


@media (min-width: 100px) and (max-width: 992px){
  .ourValueBox p{font-size: 1.2em}
  .aboutContainWrap {padding:50px 0px}
  .commonWrapper{height:250px;}
}
@media (min-width: 100px) and (max-width: 767px){
  .ourValueBox{height: auto;}
}

@media (min-width: 100px) and (max-width: 767px){
.ourGlobalMission h3, .aboutContainWrap h2{
    font-size: 2.125em;}
    .aboutContainWrap p{text-align:justify; font-size: 1.2em;}
    .ourGlobalMission p{font-size: 1.4em;text-align:justify;}
    .ourValueBox{margin-top:35px;}
    .ourValueBox p{font-size: 1.2em}
    .textHeader h1{font-size:3em}
    .commonWrapper{height:200px;}
    .ourGlobalMission p{max-width:96%;}
}






/* Responsive Header Menu */
.toggleMenu {
    float: right;
    margin: 0;    
    margin-top: 24px;
    padding:5px 7px;
    display: block;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    display: none;
}

.toggleMenu span {
    position: relative;
    top: 0;
    display: block;
    width: 24px;
    height: 3px;
    background: #ffffff;
    margin-bottom: 4px;
    transition: 300ms ease-in-out;
}
.toggleMenu span:last-child {
    margin-bottom: 0;
}

.toggleMenu:focus {
    outline: 0;
}

.toggleMenu.openMenu span:nth-child(2) {
    opacity: 0;
}
.toggleMenu.openMenu span:last-child {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: -7px;
}
.toggleMenu.openMenu span:first-child {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 7px;
}
.fullHeight{background: rgba(0,0,0,0.9)}
.fullHeight .headerList{height: 100vh;transition: 0.5s all ease-in-out}
.fullHeight .headerList{padding-left: 0;float: none;width: 100%;}
.fullHeight .headerList li{width: 100%;display: table;}
.fullHeight .headerList .inquiryBtn a{width: 150px;margin: 0px auto;float: none;}


/* ========================================= Responsive Part ========================================= */

@media (min-width: 1400px){
    .container{width: 1170px}
}

@media (min-width: 100px) and (max-width: 1400px){
.bannerSlider .bannerTxt h2{font-size: 60px;line-height: 80px;}
.bannerSlider .bannerTxt p{margin: 40px auto;font-size: 25px;}
.bannerSlider .bannerTxt a{margin: 50px auto}
.aboutTxt{width: 35%}
.aboutTxt p{width: 95%;}
.laptopImage{left: -200px}
.iphoneImgae{left: 150px;}
.serviceTxt p{font-size: 26px;}
.serviceImgDetail p{font-size: 20px;margin: 10px 0}
.caseStudyImages .laptopImage{left: -570px}
.caseStudyImages .iphoneImgae{left: 290px;}
.caseStudyDescription p{font-size: 21px;}
.dish1{bottom: 0;right: 120px;}
.dish2{right: -300px}
.achivementIcon{width: 100px;}
.achivementSection::after{right: -410px}
.footerService.serviceFooter::after{right: 0}
.footerContact{padding-left: 30px;}
.achivementIconDetails h2{font-size: 42px;}
.achivementIconDetails p{font-size: 21px}
.serviceCenterImg{width: 38%}
.serviceTxt{width: 22%;}
}
@media (min-width: 100px) and (max-width: 1200px){
.laptopImage {    left: -129px;    width: 100%;top: 90px}
.iphoneImgae{     left: 110px;    width: 70%; }
.aboutTxt,.aboutImages,.aboutUsSection{height: 650px;}
.aboutUsSection{padding: 20px 0}
.radar {     left: 28%;    top: 19%;}
.serviceTxt{margin-left: 0}
.serviceTxt p{font-size: 23px;margin: 30px 0 40px}
.serviceInfo{padding: 30px 00px 30px 20px}
.serviceDetails{margin-bottom: 30px}
.serviceSection{padding: 60px 0}
.testimonialSection{padding: 60px 0 110px}
.caseStudyImages,.caseStudyDescription,.caseStudySection{height: 600px}
.caseStudyImages .iphoneImgae{    width: 31%;    left: 310px;    top: 90px;bottom: auto;}
.caseStudyImages .laptopImage{left: -90px;width: 110%}
.dish1{bottom: -60px;right: 70px;}
.dish2{bottom: -10px;right: -340px;}
.dish1 img{width: 50%;}
.dish2 img{width: 50%;}
.caseStudyDescription{padding-bottom: 200px}
.caseStudyDescription p{margin: 30px 0}
.achiementsInfo h2{font-size: 42px;}
.achiementsInfo p{font-size: 27px;}
.achivementIconDetails h2{font-size: 36px;}
.achivementIconDetails p{font-size: 20px;line-height: normal;}
.achivementBox{width: 43%}
.achivementSection{padding: 70px 0 150px}
.achivementSection::after{right: -460px}
.footerService a{margin: 8px 0}
.footerContact span{margin: 3px 0}
.serviceCenterImg{padding-top: 16%;}

.serviceTxt p {    font-size: 21px;    margin: 20px 0 30px;    line-height: 27px;}
.serviceTxt p br{display: none;}
.serviceTxt,.serviceCenterImg{text-align: center;width: 100%;padding-top: 0}
.serviceCenterImg{    width: 482px;    margin: 0px auto;    display: table;   float: none;}
.serviceInfo{width: 100%}
.serviceDetails.middleService{padding-left: 0}
.serviceTxt img{width: 80%}
.serviceImgDetail h2{letter-spacing: 0}
.serviceInfo{padding-bottom: 0}
}

@media (min-width: 100px) and (max-width: 1023px){
.headerSection .headerList{display: none;}
.headerSection.fullHeight .headerList{display: block;}
.contactNumberRow{display: none !important;}
.toggleMenu{display: block}
.headerSection a.logoClick img{width: 200px;}
.headerSection{top: 0}
}

@media (min-width: 100px) and (max-width: 992px){
.bannerSlider .bannerTxt{top: 30%}
.bannerSlider .bannerTxt h2{font-size: 55px;    line-height: 65px;}
.bannerSlider .bannerTxt p{    font-size: 23px;    line-height: 29px;}
.radar span{width: 200px;height: 200px}
.iphoneImgae{top: 240px;}
.aboutUsSection{padding:60px 0 }
.testimonialSection .testimonialImgBox{margin-top: 10px;}
.caseStudyImages, .caseStudyDescription, .caseStudySection{height: auto;}
.caseStudyImages,.caseStudyDescription{width: 100%;display: table;text-align: center;}
.caseStudyImages .laptopImage{position: relative;}
.caseStudyImages .laptopImage{width: 80%;left: 0;top: 0}
.caseStudyImages .iphoneImgae{top: 50px;    left: 70%;    width: 25%;}
.caseStudyDescription a{margin: 0px auto;float: none;}
.caseStudyDescription{padding-bottom: 30px;padding-left: 0}
.dish1{right: auto;left: 0}
.dish2{right: -90px;bottom: -70px;}
.achivementSection::after{display: none;}
.achivementDetails{width: 100%;}
.achivementBox{width: 50%}
.achiementsInfo h2{text-align: center;}
.achiementsInfo p{text-align: center;}
.achivementIconDetails h2,.achivementIconDetails p{text-align: left;}
.achivementSection{padding: 60px 0 30px}
.footerContact img{width: 190px;}
.footerSocial ul li{margin-bottom: 15px}
.footerService a{font-size: 14px;}
.footerContact{padding-left: 20px}
.caseStudyDescription p{margin: 30px auto}

.serviceCenterImg{    display: table;    margin: 0px auto;    text-align: center;  width: 482px;    float: none;}

}

@media (min-width: 100px) and (max-width: 767px){    
.bannerSlider .bannerTxt h2 {    font-size: 45px;    line-height: 60px;}
.bannerSlider .bannerTxt p {    font-size: 21px;    line-height: 28px;margin: 30px auto}
.bannerSlider .bannerTxt a{padding: 10px 25px;font-size: 18px;line-height: normal;margin: 30px auto}
.aboutTxt, .aboutImages, .aboutUsSection{height: auto;}
.aboutImages,.aboutTxt{width: 100%;display: table;padding: 40px 40px 0;}
.laptopImage{width: 70%;position: relative;left: 0;top: 0}
.iphoneImgae{top: 130px;width: 40%;left: 300px}
.radar{top:16%;left: 40%}
.serviceTxt h2{margin-top: 0}
.serviceTxt img{margin-bottom: 10px}
.testimonialSection{padding: 40px 0 80px}
.content-text{font-size: 17px;width: 80%;}
.footerSection{padding: 20px 0}
.footerService a{font-size: 16px;}
.moreService{margin-top: 10px;}
.footerService.serviceFooter::after,.footerService::after{display: none;}
.footerSocial ul{margin-bottom: 0}
.footerContact{text-align: center;padding-left: 0;padding-top: 10px;}
.copyrightSection p{font-size: 16px;}
}
@media (min-width: 100px) and (max-width: 639px){
.bannerSlider .bannerTxt h2 {    font-size: 35px;   line-height: 45px;}
.bannerSlider .bannerTxt p{ font-size: 19px;    line-height: 26px;    margin: 20px auto;}
.laptopImage{width: 90%;}
.iphoneImgae {    top: 160px;    width: 40%;   left: 260px;}
.radar span {    width: 160px;    height: 160px;}
.radar {    top: 21%;    left: 47%;}
.serviceImgDetail p{font-size: 18px;}
.aboutTxt p {    margin: 30px 0;    font-size: 18px;    }
.testimonialSection .testimonialSlider p{    margin: 20px auto 0;    font-size: 18px;}
.testimonialSection p,.clientSlider p{font-size: 21px;}
.caseStudyDescription p{font-size: 17px;}
.dish1{left: -40%;}
.dish2{right: -40%;}
.dish2 img{width: 40%}
.achiementsInfo p{font-size: 21px;margin: 20px 0;line-height: normal;}
.achivementDetails{margin: 20px 0}
.achivementIconDetails p{margin: 10px 0;font-size: 19px;}
.achivementBox{padding-bottom: 20px;}
.contactUsSection{padding: 50px 0}
.serviceCenterImg{width: 100%;height: auto;}
.serviceStacticImage{display: block;width: 100%;}
.serviceStacticImage img{width: 100%;}
.serviceAnimation{display: none;}
}

@media (min-width: 100px) and (max-width: 479px){
.bannerSlider .bannerTxt h2 {    font-size: 27px;    line-height: 36px;}
.bannerSlider .bannerTxt p {    font-size: 17px;    line-height: 23px;}
.bannerSlider .bannerTxt a{font-size: 15px;margin: 25px auto}
.bannerSlider .carousel-indicators li{width: 12px;height: 12px;}
.bannerSlider .carousel-indicators li.active{width: 19px;height: 19px;}
.aboutTxt{padding: 60px 20px 0}
.aboutImages{padding-top: 0}
.laptopImage{width: 100%}
.iphoneImgae{    top: 100px;    width: 50%;    left: 180px;}
.radar{top: 12%;}
.aboutTxt h2,.serviceTxt h2,.clientTxt,.testimonialSection .testimonialsTxt,.achiementsInfo h2,.contactus-text{font-size: 32px;}
.aboutTxt a{padding: 10px 25px;font-size: 16px;}
.caseStudyDescription h2{font-size: 45px;}
.serviceTxt p,.testimonialSection p, .clientSlider p{font-size: 18px;}
.serviceInfo{padding-left: 0 }
.serviceImg{width: 90px;}
.serviceImgDetail h2{font-size: 25px;}
.achivementBox{width: 100%;}
.achivementIconDetails h2{margin-top: 10px}
.submit-button {    float: none;    margin: 0px auto;   display: table;}
.dish1{left: -40%;}
.dish2{right: -60%;}
}

@media (min-width: 100px) and (max-width: 350px){
.bannerSlider .bannerTxt h2 {    font-size: 21px;   line-height: 30px;}
.bannerSlider .bannerTxt p {    font-size: 15px;    line-height: 23px;}
.iphoneImgae {    top: 80px;    width: 50%;    left: 150px;}
.radar {top: 0%;left: 42%;}
.serviceTxt p, .testimonialSection p, .clientSlider p {    font-size: 15px;    line-height: 20px;}
.serviceImgDetail h2{font-size: 23px;}
.serviceImgDetail p{font-size: 16px;}
.testimonialSection .testimonialSlider p{font-size: 16px;}
.dish1{left: -160px;}
.dish2{right: -220px;}
.achivementSection{padding: 30px 0}
.contactUsSection{padding: 30px 0}
.content{width:95%}
.content-text{font-size: 15px;}
}