F@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800');
@import url('https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700');
@import url('https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i');

@font-face {
    font-family: 'gotham-book';
    src: url('../fonts/gotham-book.otf');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gotham-light';
    src: url('../fonts/gotham-light.otf');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gotham-medium';
    src: url('../fonts/gotham-medium.otf');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gotham-bold';
    src: url('../fonts/gotham-bold.otf');
    font-weight: normal;
    font-style: normal;

}


*{margin:0; padding:0;}

/*body{font-family: 'Muli', sans-serif; line-height:21px; color: #c2c2c2; background: #f8f8f8;}
ul{list-style:none; padding:0; margin:0;}
h2{font-size:32px; color:#fff; font-family: 'Muli'; font-weight: 300;}
h3{font-size:24px; font-family: 'Muli'; color: #5f5f5f; line-height:33px;}
h4{font-size:22px; font-family: 'Muli'; color:#505558; font-weight: normal;}
h5{font-size:20px; font-family: 'Muli'; font-weight: normal;}
h6{font-size:18px; font-family: 'Muli'; font-weight: normal;}
p{font-size:14px; font-family: 'Muli'; color:#8e8e8e}*/

body{font-family: 'gotham-book'; line-height:21px; color: #555;
	background-color: #FFF; 
    
}
ul{list-style:none; padding:0; margin:0;}
h2{font-size:30px; color:#444; font-family: 'gotham-bold'; line-height: 36px;}
h3{font-size:26px; font-family: 'gotham-bold'; line-height:36px; font-weight: normal;}
h4{font-size:22px; font-family: 'gotham-book'; color:#505558; font-weight: normal;}
h5{font-size:20px; font-family: 'gotham-medium'; font-weight: normal;}
h6{font-size:18px; font-family: 'gotham-light'; font-weight: normal;}
p{font-size:14px; font-family: 'open sans'; margin-bottom:20px;}

a {color:#2bcdc5; }
a:focus {outline:none;}

#header {
	background-image: linear-gradient(to bottom right,#ff6022,#fd5b29,#ee2b69,#ee2b69,#ee2b69);
	background-repeat: no-repeat;
    background-size: 100% 100%;
	min-height: 669px;
	height:100%;
	position: relative;
}



.headerbg {
	position:absolute;
}

.paddingTB50 {
	padding: 50px 0px;
}
.paddingT50 {
	padding-top: 50px;
}

#header .logo, #headerinner .logo {
	float:left;
	z-index:1;
	position:relative
}

.navbar-default {
	background:none;
	border:0px;
	margin-top: 30px;
}


.navbar-default .navbar-nav>li>a {color:#FFF; font-size:18px; font-weight:600;}
.nav>li>a { padding: 10px 0px;}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { color:#FFF; background:none; border-bottom: 3px solid #17d6b1;}
.dropdown-menu>li>a { padding: 5px 20px}
.nav>li>a {margin-right:0px;}
.nav>li { margin-left:30px;}
.nav>li> a:hover, .nav>li> a:focus { border-bottom: 3px solid #17d6b1; color:#e8e8e8 !important;}


#banner { margin-top:40px;}
#bannerinner {margin-top:0px;} 
#banner h1, #bannerinner h1{ font-family: 'gotham-bold'; font-size:34px; color:#FFF; line-height:44px;}
#banner h1 span, #bannerinner h1 span { font-family: 'gotham-light'; font-size:20px; font-weight:400; line-height: 20px !important; color: #f9bacc;}

.btn-default, .btn-primary { border-radius: 0; border:0; background: #FFF; padding:12px 20px; text-transform:uppercase; font-family: 'open sans'; font-weight:600;}
.btn-default:hover, .btn-primary:hover { background: #18d7b1; color: #FFF;}
.vialotbg, .btn-primary { background: #4640ce; color: #FFF;}
.orangebg {background: #ffaa30; color: #FFF;}

.rounds { position: absolute; right: 30px; bottom: 30px;}

.service-icon { text-align:center;}
.service-icon ul { margin:0px; padding:0px;}
.service-icon ul li { display:inline-block; font-size: 12px; padding: 10px; text-align:center;}

.remove-padding {padding:0px;}

#servicesblock {}
#servicesblock p { font-size:16px;}

.zoom:hover {
	transform: scale(1.2);
	}

.servicesblock { background:#f9f9f9;}


.websitebox {padding: 85px 30px 30px 30px; min-height:400px; background: #4640ce; color: #FFF;}
.brandbox  { padding: 85px 30px 30px 30px; min-height:400px; color: #FFF; background: #e6118c;}
.printbox  { padding: 85px 30px 30px 30px; min-height:400px; color: #FFF; background: #18d7b1;}
.appbox {padding: 85px 30px 30px 30px; min-height:400px; background: #fd5a2a; color: #FFF;}
.audiobox {padding: 85px 30px 30px 30px; min-height:400px; background: #ffaa30; color: #FFF;}
.packagebox {padding: 85px 30px 30px 30px; min-height:400px; background: #326aca; color: #FFF;}


.web-icon img, .print-icon img{ position:relative; z-index:1;}

[class*="web-icon"]:before {
    position: absolute;
    content: "W";
    z-index: 1;
    font-size: 20em;
    top: 50%;
    left: 10%;
    font-family: 'gotham-bold';
    font-weight: 600;
    color: #292cd2;
}

[class*="print-icon"]:before {
    position: absolute;
    content: "P";
    z-index: 1;
    font-size: 25em;
    top: 50%;
    left: 10%;
    font-family: 'gotham-bold';
    font-weight: 600;
    color: #18d7b1;
}

[class*="mob-icon"]:before {
    position: absolute;
    content: "A";
    z-index: 1;
    font-size: 23em;
    top: 50%;
    left: 20%;
    font-family: 'gotham-bold';
    font-weight: 600;
    color: #fb592a;
}

[class*="pac-icon"]:before {
    position: absolute;
    content: "P";
    z-index: 1;
    font-size: 28em;
    top: 50%;
    left: 10%;
    font-family: 'gotham-bold';
    font-weight: 600;
    color: #326aca;
}

[class*="audio-icon"]:before {
    position: absolute;
    content: "V";
    z-index: 1;
    font-size: 23em;
    top: 50%;
    left: 15%;
    font-family: 'gotham-bold';
    font-weight: 600;
    color: #ffaa30;
}

[class*="one"]:before {
    position: absolute;
    content: "01";
    z-index: 1;
    font-size: 3em;
    top: 19%;
    left: 38%;
    font-family: 'gotham-bold';
    font-weight: 600;
    color: rgba(255, 255, 255, 0.2);
}

[class*="two"]:before {
    position: absolute;
    content: "02";
    z-index: 1;
    font-size: 3em;
    top: 19%;
    left: 38%;
    font-family: 'gotham-bold';
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
}

[class*="three"]:before {
    position: absolute;
    content: "03";
    z-index: 1;
    font-size: 3em;
    top: 19%;
    left: 38%;
    font-family: 'gotham-bold';
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
}

[class*="four"]:before {
    position: absolute;
    content: "04";
    z-index: 1;
    font-size: 3em;
    top: 19%;
    left: 35%;
    font-family: 'gotham-bold';
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
}

[class*="five"]:before {
    position: absolute;
    content: "05";
    z-index: 1;
    font-size: 3em;
    top: 19%;
    left: 35%;
    font-family: 'gotham-bold';
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
}

[class*="six"]:before {
    position: absolute;
    content: "06";
    z-index: 1;
    font-size: 3em;
    top: 19%;
    left: 35%;
    font-family: 'gotham-bold';
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
}


.gredient {
	background-image: linear-gradient(to right,#ff6022,#ff6022,#ff6022,#ee2b69,#ee2b69);
	background-repeat: no-repeat;
    background-size: 100% 100%;
	padding: 40px;
	color:#FFF;
}
.gredient p, .gredient h3 {margin:5px;}
.gredient a { color: #FFF;}




			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
																																																		
																																																									
.modal-content { border-radius: 20px;}
.modal-backdrop.in { opacity: 1; background:#FFF; }
.modal-header { border: none;}
.modal-content { box-shadow: none; border:none;}
.modal-header h3 { font-size: 44px; font-family: 'Gotham-Light', Open Sans; font-weight: 300; line-height:50px;}  
.modal-header h3 span { font-size: 24px;}
.close {
	border: 1px solid;
    border-radius: 30px;
    padding: 10px;
    width: 36px;
	font-size: 14px;
	}

.btn-primary.focus, .btn-primary:focus { background-color: #2bcdc5; border-color: #2bcdc5;
}
.circle {
    padding: 25px 0px;
    border: 2px solid #000;
    border-radius: 100px;
    display: inline-block;
    width: 120px;
    height: 120px;
}

.circle hover {
	border:2px solid #555;
}
.servicelist { text-align:center; font-family: 'Gotham-Light'; font-size: 13px; color: #555; display:inline-block; cursor:pointer;}
.form { font-family: 'Gotham-Light'; }
.form input[type=text] { width: 100%; border: 1px solid #CCC; padding: 10px; border-radius: 3px; margin-bottom:20px;}
.form textarea { width: 100%; border: 1px solid #CCC; padding: 10px; border-radius: 3px; margin-bottom:20px;}
.form input[type=submit] {border-radius: 3px; margin-top:20px;}



.ourwork-banner { margin: 100px 0px 50px 0px; }
.ourwork-banner h1{font-size: 44px; font-family:'gotham-bold'; line-height:normal; color: #FFF;}
.ourwork-banner p{font-size: 18px; font-family:'Gotham-Light'; line-height:30px; color: #FFF;}

.portfolio1 {
  font-family: 'Gotham-Bold', Arial, sans-serif;
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 100%;
  color: #ffffff;
  text-align: left;
  font-size: 16px;
}
.portfolio1 * {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.portfolio1 img {
	width:100%;
	height: 100%;
}
.portfolio1 figcaption {
  position:absolute;
  bottom: 50px;
  left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.portfolio1  h3{font-size:36px; animation-delay:1.5s; animation-duration:1s; font-family:'Lora', serif; color: #000; line-height:45px;} 
.portfolio1  p{animation-delay:2.5s; animation-duration:1s; font-family: lora; font-size: 20px;  color: #444; margin-bottom: 20px;}

.portfolio1:hover img,
.portfolio1.hover img {
  -webkit-transform: scale(1.3) rotate(5deg);
  transform: scale(1.3) rotate(5deg);
}

.category1 { position:absolute; top:50px; left:50px; z-index: 30; font-family:'Gotham-bold'; color: #dadada; font-size:36px;}
.yellocolor {color: #ffdf98;}
.marginbot { margin-bottom: 30px;}
.ourclients  h3{font-size:36px; animation-delay:1.5s; animation-duration:1s; font-family:'Lora', serif; color: #000; line-height:45px;} 

h1.title { font-family: 'Gotham-Bold'; font-size: 50px; color: #000; margin-bottom:30px;}
p.ptext { font-family: 'Gotham-Light'; font-size: 28px; color: #000; margin-bottom:50px; line-height:40px;}

.margintop60px { margin-top: 60px;}

.servicelist2  {
    margin-bottom: 30px;
    
}
.servicelist2 h2 {
    color: #000;
    font-family: 'Gotham-medium';
    font-size: 31px;
    line-height: 40px;
}

.servicelist2 p { font-size: 15px; line-height: 23px; margin-bottom: 30px; font-family:'Gotham-Light';}

.servicelist2 h4 { margin: 0px; color:#000; font-family: 'Gotham-medium'; margin-bottom: 30px;}
.servicelist2 ul {
	border-width: 0;
    border-left-width: 8px;
    border-left-style: solid;
    border-left-color: #ff7b4e;
    border-image: linear-gradient(180deg,#ff7b4e,#ff4e56) 1 100%;
	margin-bottom: 30px;
}
.servicelist2 ul li {
	width: auto;
	color: #000;
	font-family: 'Gotham-light';
	margin: auto;
	padding: 5px 10px;
	display:block;
	font-size: 18px;
	line-height: 25px;
}

.projectimg {
		border-left: 2px solid #d9d9d9;
		border-right: 2px solid #d9d9d9;
		border-bottom: 1px solid #d9d9d9;
}

.marginbot50 {
	margin-bottom:50px;
}



.pnav a {
	display:block;
	text-align: center;
	color: #fff;
	padding-top: 20px;;
	width: 100%;
	height:425px;
	border-left: 2px solid #d9d9d9;
	border-right: 2px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	
	-webkit-transition: background-position 2s ease-in-out;
	-moz-transition: background-position 2s ease-in-out;
	-ms-transition: background-position 2s ease-in-out;
	-o-transition: background-position 2s ease-in-out;
	transition: background-position 2s ease-in-out;
}

.pnav a.firstouch {
	background:url(../images/firstouch-website.jpg) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.besingular {
	background:url(../images/besingular-website.jpg) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.pharus {
	background:url(../images/pharus-homepage.png) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.mooibox {
	background:url(../images/mooibox-home-page.jpg) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.eschoolmart {
	background:url(../images/eschoolmart-website.png) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.uwdma {
	background:url(../images/uwdma-website.png) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.manorama {
	background:url(../images/manorama-website.png) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.akspartner {
	background:url(../images/akspartners-website.jpg) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.italent {
	background:url(../images/italent.jpg) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.hjfashions {
	background:url(../images/hjfashions-website.jpg) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.mccoy {
	background:url(../images/mccoygroup-website.jpg) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.hktrading {
	background:url(../images/hjtrading-website.jpg) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.fabrinox {
	background:url(../images/fabrinox.jpg) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.payoye {
	background:url(../images/payoye.jpg) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.payoye2 {
	background:url(../images/payoye2.jpg) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.pihpng {
	background:url(../images/pihpng-web.jpg) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.mehrasons {
	background:url(../images/mehrasons.jpg) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.mehrasons2 {
	background:url(../images/mehrasons2.jpg) 0 0 no-repeat;
	background-size: cover;
}

.pnav a.mehrasons3 {
	background:url(../images/mehrasons3.jpg) 0 0 no-repeat;
	background-size: cover;
}
	
.pnav a:hover {
	background-position: bottom;
	
	}
	
.form { background: #FFF; text-align:center; overflow:auto;}
.form .ptext2 {
	font-size: 18px;
    font-family: 'Gotham-Light';
}

.form h3 {
	font-size: 35px;
    font-family: 'Gotham-Light';
	margin:0px 0px 30px 0px;
}
.form .circle {
	border: 2px solid #666;
    border-radius: 100%;
    margin: 5px;
    display: table-cell;
    height: 165px;
    width: 165px;
    vertical-align: middle;
}

.form .circle hover {
	border:2px solid #555;
}

.animate {
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.blackfooter { background:#333; padding:50px 0px; position:relative;}
.blackfooter a { color:#ccc; font-size:14px;}
.blackfooter h6 { color:#FFF; font-size:14px;}
.blackfooter a:hover { color:#FFF;}

/*=============== Home-team ===============*/




.doc-img{
	 /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1, 1); // This is the scale for the normal size of the image.
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;
 
  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1, 1);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;
 
  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1, 1);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
  z-index:2;
  position:relative;
}

.doc-img:hover {
	 /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1.2, 1.2); // This is the enlarged size scale of the image.
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;
 
  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1.2, 1.2);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;
 
  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1.20, 1.20);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
  
}

#why-choose h3, .item h3, .clientlogo h3{ font-size: 36px; line-height:46px;}
#why-choose h3 span,  .item h3 span, .clientlogo h3 span { color: #e6118c; font-size: 18px; margin: 0px; margin-bottom: 10px; font-family: 'gotham-regular', Helvetica, Arial;}
.item h3 { line-height:35px;}
#why-choose h4 { font-size: 18px; font-family: 'gotham-bold', Helvetica, Arial;}
#why-choose figure {
	float: left;
    display: block;
    margin-right: 30px;
    margin-bottom: 30px;
}


/*-------------------------------*/
/*      Code snippet by          */
/*      @maridlcrmn              */
/*-------------------------------*/


#carousel { background: #f9f9f9;}

.quote {
    color: rgba(0,0,0,.1);
    text-align: center;
    margin-bottom: 30px;
}

/*-------------------------------*/
/*    Carousel Fade Transition   */
/*-------------------------------*/

#fade-quote-carousel.carousel {
  padding-bottom: 60px;
}
#fade-quote-carousel.carousel .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
      -ms-transition-property: opacity;
          transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-inner .active {
  opacity: 1;
  -webkit-transition-property: opacity;
      -ms-transition-property: opacity;
          transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-indicators {
  bottom: 10px;
}
#fade-quote-carousel.carousel .carousel-indicators > li {
  background-color: #cecece;
  border: none;
  margin: 0 5px;
}
.carousel-indicators .active {
	background-color: #18d7b1 !important;
}

#fade-quote-carousel blockquote {
    text-align: center;
    border: none;
	margin: 0px;
    padding: 0px;
}
#fade-quote-carousel .profile-circle {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 100px;
}

[class*="profile-circle"]:after {
	content: url(../images/comma.png);
	left: 100px;
    top: 90px;
    position: relative;
}

.clientlogo {text-align:center;}
.colorgreen { color: #18d7b1 !important;}
.clientlogo .carousel-inner { margin-top:30px;}

.contact-box { background: #fff; padding:50px;}

.contact-box .form{
	padding: 50px;
    background: #FFF;
    text-align: center;
    overflow: auto;
    box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.2);
	margin:0px;
}

.contact-box .form input[type="text"], .contact-box .form textarea, .contact-box .form select {
	border: 0px;
    border-bottom: 2px solid #17d6b1;
    border-radius: inherit;
	padding: 10px 0;
}
.contact-box .form textarea {
	height:100px;
}

.contact-section h3 span { font-size:18px; color:#ee363f;}
.contact-section h3 {font-size: 36px;}

.social {}
.social ul {}
.social li { float:left; margin-right: 10px; font-size: 18px;}
.social li a { color: #555; width:40px; height:40px; border-radius:100px; border: 1px solid #999; display:block; padding: 11px; text-align:center;}
.social li a:hover { border: 1px solid #18d7b1; color:#18d7b1;}
.icons { display:block; float:left; margin-right:10px;}

.navbar-default .navbar-toggle .icon-bar {background-color: #FFF;}
.navbar-default .navbar-toggle {border-color: #FFF; }
.navbar-default .navbar-toggle:hover { background:#0dd5af;}
.navbar-nav { float:right;}
.modal-dialog { width:800px;}

.clear { clear:both;}

.btn-gredient {
	background: -webkit-gradient(linear, 100% 0, 0 0, from(#e71487), to(#fe5e25));
	background: -webkit-linear-gradient(right, #e71487, #fe5e25);
	background: -moz-linear-gradient(right, #e71487, #fe5e25);
	background: -o-linear-gradient(right, #e71487, #fe5e25);
	background: linear-gradient(right, #e71487, #fe5e25);
	-webkit-background-clip: background;
	line-height:45px;
	color: #FFFFFF;
	font-size: 16px;
	padding: 0px 20px;
}
.btn-gredient:hover { color:#FFF;}

.i36bg {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    background-color: #ff4e56;
    background-image: linear-gradient(to bottom right,#ff6022,#fd5b29,#f5424b,#f5424b,#ee2b69);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.ourclients {
    padding: 50px;
    background: #FFF;
    text-align: center;
    overflow: auto;
    position:relative;
    margin-bottom:50px;
}

.contact-section { background:#FFF; position: relative;}

p.phead {
    font-size: 20px;
    font-family: 'gotham-light';
    margin-bottom: 20px;
    line-height: 31px;
    color: #f9dbe3;
}

.img-responsive {display:inline-block;}

.clients {}

.clients ul li {
    display: inline-block;
    width: 117px;
    margin: 0px 30px 30px 30px;
}

@media (max-width: 1024px) {
	#why-choose figure { margin-bottom: 50px;}
}

@media (max-width: 768px) {
#why-choose { text-align:center}

#why-choose figure {
	float: none;
    display: block;
    margin-right: 30px;
    margin-bottom: 30px;
    margin-top: 40px;
}
}

form select {
    border: 1px solid #CCC;
    background: #FFF;
    width: 100%;
    height: 43px;
    margin-bottom: 20px;
}

.quickconnect {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    background: #0dd6af;
    position: fixed;
    z-index: 11;
    right: 25px;
    bottom: 120px;
    text-align: center;
    border-radius: 100px;
}
.quickconnect a{
    font-size:25px;
    color:#FFF;
    width: 60px;
    height: 60px;
    padding: 17px 0;
    display:block;
}