@charset "utf-8";
/* CSS Document */
html{scroll-behavior: smooth;}
body{background:#fff;font-family:'Roboto',sans-serif;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%; margin:0; padding:0; position: relative}
h1, h2, h3, h4, h5, h6, p, span{font-family:'Roboto',sans-serif,; color:#000}
p{line-height: 24px;}
body a{-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;transition:0.5s all;}
*{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.cl{clear:both}
.logo { margin: 25px 50px;  position: relative;   z-index: 9;}
.yellow-bg{background:#ffbd05}
.page-heading {font-size:50px;font-weight:100;}
.page-heading  span{font-weight:500}
.d-flex {display: -webkit-box !important;display: -ms-flexbox !important;display: flex !important;}
.flex-wrap {-ms-flex-wrap: wrap !important;flex-wrap: wrap !important;}
.align-items-center {-webkit-box-align: center !important;-ms-flex-align: center !important;align-items: center !important;}
.justify-content-center {-webkit-box-pack: center !important;-ms-flex-pack: center !important;justify-content: center !important;}
.know-more {color: #000;border: 1px solid #000;padding:12px 40px; display:inline-block; border-radius:4px; }
.know-more:hover{text-decoration:none; border-color:#000; background:#000;color:#fff;}
.purple-btn{color: #fff;border: 1px solid #fff;padding:12px 40px; display:inline-block; background:#4d00ab; border-radius:4px; }
.purple-btn:hover{color:#000; text-decoration:none; border-color:#000; background:transparent;}
.menu-btn {position: absolute;top: 25px;right: 50px;z-index: 999;display: inline;font-size: 32px;}
.menu-btn a {display: inline-block;text-decoration: none;}
.btn-open:after {color: #333;content: "\f0c9";font-family: "FontAwesome";-webkit-transition: all .2s linear 0s;-moz-transition: all .2s linear 0s;-o-transition: all .2s linear 0s;transition-property: all .2s linear 0s;}
.btn-open:hover:after {color: #001d86;}
.btn-close:after {color: #fff;content: "\f00d";font-family: "FontAwesome";-webkit-transition: all .2s linear 0s;-moz-transition: all .2s linear 0s;-o-transition: all .2s linear 0s;transition-property: all .2s linear 0s;}
.btn-close:hover:after {color: #34B484;}
.overlay {position: fixed;top: 0;z-index: 99;display: none;overflow: auto;width: 100%;height: 100%;background: #333; left:0}
.overlay .menu {margin: 10% auto;width: 80%;}
.overlay .menu ul {margin: 0;padding: 0;width: 100%;}
.overlay .menu ul li {float: left;padding: 20px 0;width: 25%;list-style: none;text-align: center;text-transform: uppercase;}
.overlay .menu ul li a {color: #34B484;font-weight: bold;font-size: 20px;}
.overlay .menu ul ul {margin-top: 50px;}
.overlay .menu ul ul li {position: relative;float: none;margin: 0;width: 100%;border: 0;}
.overlay .menu ul ul li a {color: #fff;text-transform: capitalize;font-weight: bold;font-size: 14px;}
.overlay .menu ul ul li a:hover {color: #34b484;}
.navbar-brand>img {  height: 75px}
.inner-header .navbar-brand>img {height: 80px;position: absolute; top: 0; background: #484848; padding: 5px;}

.topbar {background: rgba(17,17,17,0.1); border-bottom: 1px solid rgba(169,193,215,0.2);color: #fff;font-size: 1em;}
.topbar ul {list-style: none; text-align: right; margin-bottom: 0;}
.topbar li {display: inline-block;}
.topbar a {font-size: 16px;text-decoration: none;color: #fff; display: inline-block;padding: 10px 20px;}
.top-contact {display: flex; align-items: center; padding:10px 0;}
a.navbar-brand {margin-left: 0 !important;}
header.inner-header .navbar { margin-bottom: 0;}
.product-name ul {padding: 10px;}
.inner-header .navbar li.active a {background: #fff; color: #484848 !important;}
.top-contact a .fa { color: #ffff;}
.top-contact span {color: #fff;}
.inner-header .top-contact { background: #e2e2e2; border-bottom: 0;}
.inner-header .top-contact a .fa { color: #000;}
.inner-header .top-contact span {color: #000;}

.map iframe {width: 100% !important; height: 400px; border: 1px solid #ccc !important; padding: 5px;  margin-top: 30px;}
.top-scroll {
    position: absolute;
    bottom: 50px;
    background: #bdbdbd;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    text-align: center;
    color: #fff;
    font-size: 30px;
    line-height: 40px;
    right: 30px;
}

.navbar-toggle .icon-bar{background: #fff}

img.sedex {height: 40px;    float: right; margin: 8px 0;}


.header .navbar-brand{margin-top: 10px}
.header {background: #000;background-repeat: no-repeat;background-size: 35% !important;background-position: right 110px bottom; height: 100vh;  position: relative;  overflow: hidden;}
.purple-bg-header {width:50%;height:50%;background: #4d00ab;top: 0;position: absolute;z-index: 1;}
.home .menu {position: absolute; width: 100%; z-index: 2;}
.menu .navbar-nav>li>a {text-transform: uppercase;  color: #fff;}

/*.header::before{background-color: rgba(93, 184, 254, 0.1);content: '';display: block;height: 100%;position: absolute;width: 100%;}*/

.header-overlay{position:absolute;float:left; width:100%; margin-top:150px;}
.top-contact {
    display: flex;
    align-items: center;
    padding: 10px 0;
}


.intro{padding:150px;}
.intro{padding: 60px 120px 70px 150px; color:#fff} 
.intro p{margin-top:40px;color:#000;}
.intro-image {display: flex; align-items: center; justify-content: center;  background-repeat: no-repeat !important;  background-size: cover !important;  background-position: center center !important;}
.intro-content{ background:#fff;}
.intro-content .page-heading {color: #000;}

.advertising-agency {background-image: linear-gradient(to right, rgba(10,148,209,1), rgba(5,88,171,1), rgba(0,29,134,1));}
.advertising-agency .inner-content {padding: 170px 50px; color:#fff;}
.advertising-agency p{margin:40px 0 30px;display: inline-block;}

.public-relations {background-image: linear-gradient(to right, rgba(77,0,171,1), rgba(130,25,178,1), rgba(204,61,189,1));}
.public-relations .inner-content {padding: 170px 50px; color:#fff;}
.public-relations p{margin:40px 0 30px;display: inline-block;}

.branding-management {background-image: linear-gradient(to right, rgba(255,189,5,1), rgba(255,141,22,1), rgba(255,81,44,1));}
.branding-management .inner-content {padding: 170px 50px; color:#fff;}
.branding-management p{margin:40px 0 30px;display: inline-block;}

.video-section {background: #ebebeb; padding:100px 0;}
.video-section .container{text-align: center}
.video-section .container img{display:inline-block}

.start-project .page-heading {color:#000000;}
.start-project .inner-content {padding:90px 200px;text-align: center;}
.start-project  p{margin:15px 0 30px;display: inline-block;}

.footer-top {background:#ffbd05;padding:50px 0;}
.footer-top h4 {color:#000;font-weight: 600;font-size: 20px;}
.footer-top a,.footer-top p{color:#000;}
.footer-top a:hover{color:#000; text-decoration:none;padding-left:5px}
.footer-links {padding: 0;}
.footer-links li {line-height: 32px; font-size: 12px;background: url(../images/arrow.png) no-repeat 0 13px;border-bottom: 1px solid #000;padding-left: 22px; list-style:none}
.footer-top address b {color:#000;font-size: 16px;font-weight: 400;letter-spacing: 0.5px;}
.footer-top .branch-office {display:inline-block;margin-top:8px;}
.bottom-footer {background: #333;padding: 10px 0px;}
.footer-social{padding:0 ;margin:0}
.footer-contact li {display: inline-block;color: #fff;padding: 0 5px;border-right: 1px solid #fff;font-size: 12px;line-height: 10px;}
.footer-social li {list-style: none;display: inline-block;}
.footer-contact li a {color: #fff;padding-left: 5px;}
.footer-social li a {color:#fff; padding:0 5px;}
.footer-contact {margin:0;padding:0;}

.inner-banner {width: 100%; display: block;  height: 350px; background-size: cover !important; background-position: center center !important;}
.inner-content {padding: 30px 0 40px;}
.inner-content p {line-height: 26px;}

.inner-header nav.navbar {background: #484848; border-radius: 0}
.navbar-brand{padding: 0}

.header-mail span {margin-right: 15px;}
.header-mail span .fa {margin-right:5px;}

@media screen and (max-width: 768px) 
{
.page-heading {font-size: 28px; margin-top: 0}
.intro p {margin-top: 15px;	}
.top-scroll{display: none !important}
.nav>li>a {padding: 10px 5px;}	
}

@media screen and (max-width: 768px) {
.intro { padding: 30px 15px;  color: #fff;}
.header{ height:auto}
video#myhomeVideo {width: 100%;}
.top-contact{display: none}	
.header{overflow: inherit !important}
.inner-header{overflow: inherit !important}
#myNavbar {background: #000;}
.nav>li {position: relative;  display: block;    border-bottom: 1px solid #333;}
.navbar-brand>img { height: 45px;}
.navbar-header {margin: 0 !important;}	
.navbar-toggle{margin-right: 0}	
.navbar { background: rgba(0,0,0,0.5);}	
#myNavbar {background: #000;border-top: 1px solid #9a9a9a;}
.inner-header .navbar-brand>img{height: 50px}	
.inner-banner{height: 150px}
.intro-image{display: none}	
	
}