@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500;600;700&display=swap');
/*.bg-danger{background: var(--red)}*/
@font-face {
    font-family: 'Baron Neue';
    src: url('../fonts/BaronNeueBlack.woff2') format('woff2'),
        url('../fonts/BaronNeueBlack.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Baron Neue';
    src: url('../fonts/BaronNeueBold.woff2') format('woff2'),
        url('../fonts/BaronNeueBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
.baron-bold{font-family: 'Baron Neue';font-weight: bold;}
.baron-black{font-family: 'Baron Neue';font-weight:900;}
.w-auto{width: auto!important}
.overflow-hidden{overflow: hidden}
.rounded-pill{border-radius: 100px}
.text-hover-danger:hover{color: var(--danger)!important}
.left-0 {left: 0}
.top-0{top: 0}


/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 27, 2020 */
.font-medium{font-weight: 500}
.font-semi-bold{font-weight: 600}
.font-bold{font-weight: 700}

.font-200{font-weight: 200}
.font-300{font-weight: 300}
.font-500{font-weight: 500}
.font-600{font-weight: 600}
.font-700{font-weight: 700}

:root{
    
    --red:#f70909;
    --blue-light:#8aa3ce;
    --black:#000000;
    --blue:#007bff;
    --blue-dark:#26344c;
 --indigo:#6610f2;
 --purple:#6f42c1;
 --pink:#e83e8c;
 --orange:#fd7e14;
 --yellow:#ffc107;
 --green:#28a745;
 --teal:#20c997;
 --cyan:#17a2b8;
 --white:#fff;
 --gray:#3a3939;
 --gray-light:#7e7e7e;
 --gray-dark:#343a40;
 --primary:#007bff;
 --secondary:#6c757d;
 --success:#28a745;
 --info:#17a2b8;
 --warning:#ffc107;
 --danger:#dc3545;
 --light:#f8f9fa;
 --dark:#343a40;
 --amaranth:#D71C58;
    --gray-300:#afafaf;
    --gray-400:#8d8d8d;
}

.gray-300{color:var(--gray-300)!important}}
.gray-400{color:var(--gray-400)}

.bg-red{background: var(--red)}
.bg-gray{background: var(--gray)!important}
.bg-black{background: var(--black)!important}
.text-red{color: var(--red)}
.text-gray{color: var(--gray-light)}
.bg-blue-dark{background: var(--blue-dark)}

a:hover {text-decoration: none}
html {
  scroll-behavior: smooth;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,div{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
}
a{
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}
.shadow{box-shadow:2px 6px 6px #ececec}
::selection {
  color: #ffffff;
  background: var(--black);
}
.ease{
	transition:all ease .4s ;
	-moz-transition:all ease .4s ;
	-webkit-transition:all ease .4s ;
	-o-transition:all ease .4ms ;
}
body{font-family: 'Poppins', sans-serif;font-size:14px;color: #26344c;font-weight: 300;}
img{height: auto;max-width: 100%}

html {
	-webkit-text-size-adjust:100%;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;overflow-x:hidden;
}
.relative{position: relative}
/*  Clearfix
------------------------------------------------------------------------------*/
.clearfix:after,
section:after,
aside:after,
article:after,
footer:after,
header:after,
div:after,
ul:after {
	content: "";
	display: table;
	clear: both;
}
.clearfix:before,
section:before,
aside:before,
article:before,
footer:before,
header:before,
div:before,
ul:before {
	content: "";
	display: table;
}

.clearfix,
section,
aside,
article,
footer,
header,
div,
ul 
 {
	zoom: 1;
}
.clear {
	clear:both;
	height:0;
}
li{list-style: none}
a, button{
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;
}

a:focus, button:focus{
  outline: none;
}
a:focus,
.btn:focus,
.form-control:focus
{box-shadow:none!important}
ul, li{margin: 0;padding: 0}
.relative{position: relative}
  #preloader {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:url(../img/web-system-wide-loading-stars-GIF.gif) no-repeat center center #000;
    width:100%;background-size: 69px;
	height:100%;
	z-index:9999;
    
}
#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%;
	top:50%;
	
	margin:-100px 0 0 -100px;
}
.img-responsive{height: auto}
.bg-transparent{background: transparent}
.md-modal h1{font-size: calc(20px + (53 - 20) * ((100vw - 320px) / (1920 - 320)));margin: 0}
/**/
header,header .logo img{-webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;}
header{position: fixed;left: 0;top: 0;z-index: 20;width: 100%;margin: 0;padding: 30px 0}
header .logo{position: relative;z-index: 20}
header.fixed-header{padding: 10px 0;background: #ffffff;box-shadow: 0 0 2px #ccc} 
header.fixed-header .logo img{width: 80px} 
header.fixed-header .navbar-togle{top: 8px;padding: 13px 15px 16px 9px;} 
/*inner header*/

.header-inner .mail{display: inline-block;padding: 20px 0 20px 57px;background: url(../img/icon-mail.png) no-repeat 0 center; }
.header-inner .navbar-togle{padding:31px 15px 31px 24px;position: absolute;right: 0;top:30px;border-radius: 10px 0 0 10px;text-align: right}
.header-inner .navbar-togle span{height: 3px; border-radius: 5px;background: #ffffff;display: block;clear: both}
.header-inner .navbar-togle .span-1{margin-left:35px; }
.header-inner .navbar-togle .span-2{width: 63px;margin: 14px 0}
.header-inner .navbar-togle .span-3{margin-left:28px;}

header .navbar{position: absolute;left: 50px; bottom: 25px}
header .navbar ul li a{color: #ffffff;display: inline-block;padding: 0 0 0px;margin: 0 0 10px;position: relative;}
header .navbar ul li a::after{position: absolute;bottom: -2px;height: 1px;display: block;width: 0%;left:50%;content:"";background: #ffffff;
       transition:All .5s ease;
    -webkit-transition:All .5s ease;
    -moz-transition:All .5s ease;
    -o-transition:All .5s ease;
}
header .navbar ul li:hover a::after{left: 0;width: 100%; }


.home-banner{background:url(../img/home-banner.jpg) no-repeat 90% center;height: 950px;margin: 76px 0 0 0 }

.home-banner .carousel-caption{position: relative;left: 0}
.home-banner .carousel-caption h1{font-size: calc(21px + (65 - 21) * ((100vw - 390px) / (1920 - 390)));font-weight: 700;
  transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
    opacity: 0;
    transform: translate(50px);
-webkit-transform: translate(50px);
-moz-transform:  translate(50px);
-o-transform: translate(50px);
-ms-transform:translate(50px);
    font-family: 'Baron Neue';
    font-weight: 900
}
.home-banner .carousel-item.active  h1{
    opacity: 1;
    transform: translate(0px);
-webkit-transform: translate(0px);
-moz-transform:  translate(0px);
-o-transform: translate(0px);
-ms-transform:translate(0px);
}

.home-banner .carousel-caption p{
    transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
    opacity: 0;
    transform: translate(-50px);
-webkit-transform: translate(-50px);
-moz-transform:  translate(-50px);
-o-transform: translate(-50px);
-ms-transform:translate(-50px);
}
.home-banner .carousel-item.active  p{
        transform: translate(0px);
-webkit-transform: translate(0px);
-moz-transform:  translate(0px);
-o-transform: translate(0px);
-ms-transform:translate(0px);opacity: 1
}
.home-banner .carousel-item {overflow: hidden;}
.home-banner .carousel-item img{
    transform: scale(1.2);
    -webkit-transform:scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
       transition:All 8s ease;
    -webkit-transition:All 8s ease;
    -moz-transition:All 8s ease;
    -o-transition:All 8s ease;
}
.home-banner .carousel-item.active img{
    transform: scale(1);
-webkit-transform:scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
.home-banner .carousel-fade .carousel-item {
 opacity: 0;
 transition-duration: .6s;
 transition-property: opacity;
}

.home-banner .carousel-fade  .carousel-item.active,
.home-banner .carousel-fade  .carousel-item-next.carousel-item-left,
.home-banner .carousel-fade  .carousel-item-prev.carousel-item-right {
  opacity: 1;
}

.home-banner .carousel-fade .active.carousel-item-left,
.home-banner .carousel-fade  .active.carousel-item-right {
 opacity: 0;
}

.home-banner .carousel-fade  .carousel-item-next,
.home-banner .carousel-fade .carousel-item-prev,
.home-banner .carousel-fade .carousel-item.active,
.home-banner .carousel-fade .active.carousel-item-left,
.home-banner .carousel-fade  .active.carousel-item-prev {
 transform: translateX(0);
 transform: translate3d(0, 0, 0);
}
.home-banner .carousel-fade  .carousel-indicators {margin: 0;bottom: 0;justify-content: flex-start}
.home-banner .carousel-fade  .carousel-indicators li{width: 30px; height: 30px; border-radius: 50%;border: 2px solid transparent;text-indent: 0;text-align: center;transition:All 1s ease;padding: 2px}
.home-banner .carousel-fade  .carousel-indicators li.active{border-color: var(--danger)}


main.digital header .navbar ul li.digital a{border-bottom: 2px solid var(--red)}
main.brand-stratagy header .navbar ul li.brand a{border-bottom: 2px solid var(--red)}
main.e-commerce header .navbar ul li.e-commerce a{border-bottom: 2px solid var(--red)}
main.web-development header .navbar ul li.web-development a{border-bottom: 2px solid var(--red)}
main.home .toper li.home a{border-bottom: 2px solid var(--red);}
main.contact .toper li.contact a{border-bottom: 2px solid var(--red)}




.home-video-bg{width: 100%;object-fit: cover;height: 100%;position: fixed;z-index: 1;left: 0; top: 0;opacity: .5;pointer-events: none}

footer{padding:80px 0 0 ;background: #0f0f0f}
footer ul.social li{padding: 20px 0 0 0;}
footer ul.social li{padding:0 0 10px 0;}
footer ul.social li a{display: inline-block;width: 40px;height: 40px; border-radius:50px;border: 2px solid #ffffff;font-size: 25px;color: #ffffff }
footer ul.social li a:hover{border: 2px solid var(--red);color: var(--red);background:#ffffff;color:var(--red)   }


footer ul.Q-contact{position: absolute; bottom: 50px;width: 100%;left: 0}
footer ul.Q-contact li{padding:10px 0 0 0;}
footer ul.Q-contact li a{display: inline-block;width: 50px;height: 50px; border-radius:50px;border:;font-size: 34px;color: #000000;background: #ffffff }
footer ul.Q-contact li a:hover{color: var(--red); animation: pulse-white 2s linear infinite; }

footer{}
footer ul.footlinks{}
footer ul.footlinks li {padding: 0 0 20px}
footer ul.footlinks  li a{color: #ffffff}
footer ul.footlinks li a:hover{color: var(--red)}
footer h5{font-size: 18px;margin: 0}
footer address{color:#b8b8b8;font-size: 12px;line-height: 25px}
footer ul.bullet-list{font-size: 12px}
footer ul.bullet-list li {padding: 0 0 10px 20px;position: relative;list-style: none}
footer ul.bullet-list li a{color:#b8b8b8;}
footer ul.bullet-list li a:hover{color:var(--red);}

footer ul.get-in li {padding: 0 0 15px}
footer ul.get-in li i{font-size: 18px;color: #000000}
footer ul.get-in li a{font-size: 12px;color:#b8b8b8;}
footer ul.get-in li {font-size: 12px;color:#b8b8b8;}
footer .copy {font-size: 12px;color:#b8b8b8;}

footer ul.foot-social{}
footer ul.foot-social li{border: 1px solid;width: 40px; height: 40px;border-radius: 50px;padding: 3px}
footer ul.foot-social li a{width:32px; height: 32px;border-radius: 40px;color: #ffffff;display: inline-block;text-align: center;padding: 5px}
footer ul.foot-social li.fb{border-color: #3a5898;}
footer ul.foot-social li.fb a{background:  #3a5898}
footer ul.foot-social li.twitter a{background:  #3f98fe}
footer ul.foot-social li.twitter{border-color:  #3f98fe}
footer ul.foot-social li.linkdin a{background:  #4775b3}
footer ul.foot-social li.linkdin{border-color:  #4775b3}
footer ul.foot-social li.whatsapp a{background:  #4ced69}
footer ul.foot-social li.whatsapp{border-color:  #4ced69}

.content-area{position: fixed;left:0%;height: 100%;width: 100%;z-index: 2;padding:103px 100px 0px 100px;}

.home-intro{}
#typewriter{text-align: center;line-height: calc(15px + (104 - 15) * ((100vw - 320px) / (1920 - 320)));}
#typewriter #typewriter-prefix{font-size: calc(20px + (100 - 20) * ((100vw - 320px) / (1920 - 320)));display: block}
#typewriter #typewriter-text{font-size: calc(15px + (40 - 15) * ((100vw - 320px) / (1920 - 320)));font-weight: 300;}
#typewriter #typewriter-suffix{color: var(--red);font-size: calc(15px + (40 - 15) * ((100vw - 320px) / (1920 - 320)));}

@keyframes animate {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 64, 0.7), 0 0 0 0 rgba(255, 0, 64, 0.7);
    }

    40% {
        box-shadow: 0 0 0 20px rgba(255, 0, 64, 0), 0 0 0 0 rgba(255, 0, 64, 0.7);
    }

    80% {
        box-shadow: 0 0 0 20px rgba(255, 0, 64, 0), 0 0 0 30px rgba(255, 0, 64, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 64, 0), 0 0 0 30px rgba(255, 0, 64, 0);
    }
}

@keyframes pulse-white {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(255, 0, 64, 0.7);
    }

    40% {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 0, 64, 0.7);
    }

    80% {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0), 0 0 0 30px rgba(255, 0, 64, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 30px rgba(255, 0, 64, 0);
    }
}
.toper{position:absolute; top: 0; left:14px;z-index: 5;width:100%;padding:33px 76px 0 51px;    
/*    border-bottom: 1px solid #eee;*/
}
.toper .call{font-size: 16px; font-weight: 400;color: #ffffff;text-transform: uppercase;padding: 5px 20px ;display: inline-block;border-radius: 25px;position: relative;top: -8px}
.toper ul {margin-right: -10px}
.toper ul li{display: inline-block;padding: 0 0 0 20px;text-transform: uppercase;position: relative}
.toper ul li a::after{position: absolute; left: 50%; bottom: 0; width: 0;height: 2px; background: var(--red);content:""; 
    transition:All .5s ease;
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-o-transition:All .5s ease;
}
.toper ul li:hover a::after{width: 100%;left: 0;}

.toper ul li a{color: #ffffff;font-size: 18px;display: inline-block;padding: 0 10px 5px;position: relative}
.inner .toper ul li a{color: #000000}
.inner .toper .call{color: #000000}
.content-area .content{height: 100%;padding: 0 0 50px;}
.content-area .titlle{font-family: 'Baron Neue';font-size:calc(15px + (33 - 15) * ((100vw - 320px) / (1920 - 320)));position: relative;padding:9px 0 21px}
.content-area .titlle::before {position:absolute;left:0;top:0;width:10%;height:5px;background:var(--red);content:"";display: block;}
.content-area .titlle::after {position:absolute;left:10%;top:0;width:20px;height:5px;background:var(--black);content:"";display: block;margin-left: 5px;}

.custom-tabs .tab-content{padding: 40px;border: 1px solid #d2d2d2;background: #fff;}
.custom-tabs .tab-content .tab-pane{padding: 0 0 0 }
.custom-tabs  .nav-tabs{border-bottom: 0;border-top: 1px solid rgba(255, 255, 255, 0.3); }
.custom-tabs  .nav-tabs .nav-item .nav-link,
.custom-tabs  .nav-tabs .nav-item.show .nav-link,
.custom-tabs  .nav-tabs .nav-item .nav-link:hover,
.custom-tabs .nav-tabs .nav-link.active{border: 0;background:var(--red);margin-bottom: 0}
.custom-tabs  .nav-tabs .nav-item .nav-link{color:  #ffffff;position: relative;padding: 15px;font-size:17px;    font-weight: 400;background: var(--red)}
.custom-tabs  .nav-tabs .nav-item .nav-link.active{color:#ffffff;background: #1a1918}
.custom-tabs  .nav-tabs .nav-item .nav-link.active::before{background:var(--red);left: 0; top: 0;width: 100%;height: 5px; content:"";display: block;position:absolute;}
.custom-tabs  .nav-tabs .nav-item {width: 33.33%;text-align: center}

.what-we{}
 .title-sub{font-family: 'Baron Neue';font-size: calc(20px + (32 - 20) * ((100vw - 320px) / (1920 - 320)));position: relative;padding: 20px 0 20px 0;margin-bottom: 40px;}

 .title-sub i{width: 65px; height: 65px; text-align: center; background:#ececec;font-size:51px;border-radius: 50px; position: absolute; left: 16px; top:13px;padding: 7px;}
 .title-sub img{position: absolute; right:21px; top:27px; width: 50px;}
.what-we figcaption{min-height: 80px}
.owl-carousel3{padding: 0 0 40px}
.owl-carousel3 .item img{border-radius: 20px ; }
.owl-carousel3 .owl-nav{ text-align: right;padding: 0 40px 0 0}
.owl-carousel3 .owl-nav .owl-prev,
.owl-carousel3 .owl-nav .owl-next{ text-align:center;width: 40px; height:40px; border-radius: 50px; display:inline-block;font-family: 'Baron Neue';background: var(--red);font-size: 28px;line-height: 33px;margin-left: 5px}
.owl-carousel3 .owl-nav .owl-prev:hover,
.owl-carousel3 .owl-nav .owl-next:hover{animation: animate 2s linear infinite;}

ul.targeting{border-left:1px dotted #888888;margin: 0 0 0 50px}
ul.targeting li{position: relative;padding: 0 0 40px 80px}
ul.targeting .count{ width: 45px;height: 45px; background: #ffffff;font-family: 'Baron Neue';font-size: 30px; text-align: center;border-radius: 50px;color: #000000;position: absolute;left: -25px;line-height: 37px;font-weight: bold;border: 1px solid #888888}

.e-commerce .colums article{min-height: 120px}
.e-commerce .colums figcaption{background:#f70909;color: #ffffff;display: inline-block;padding: 5px 20px; font-weight: 600;position: absolute;left:0; top: -29px;}

ul.bullet-list{}
ul.bullet-list li{position: relative;padding: 0 0 21px 20px}
ul.bullet-list li::before{position:absolute;left: 0; top:15px;background:var(--red);content:"";width: 5px; height: 5px;border-radius: 20px;display: block;}

/*
.section-stratagy{}
.section-stratagy .colum{position: relative;padding-left: 117px; min-height: 100px}
.section-stratagy .colum .img-absolute{position: absolute; left: 0}
*/

.contact-form .info{background: url(../img/form-image.jpg)}

/**/
.inner-container{font-size: 22px;color: #000000;font-weight: 500;padding-top: 205px;}

.strategy {padding-bottom:59px }
.strategy figure{position: relative;margin-right: 49px;border-radius:0 0 50px 50px;background: url(../img/patern.jpg) repeat 0 0;padding: 85px 0 85px 0;  }
.strategy figure img{left: 48px;position: relative}

.sub-hed{font-size: 42px;line-height: 45px;padding: 0 0 50px}
.sub-hed span{font-size: 60px;display: block;line-height: 60px;}

.learn-more a{font-size:16px;position: relative;display: inline-block;}
.learn-more a::after{border: 1px solid var(--red);display: block;border-radius: 50px;position: absolute;left: 0;top: 0;height: 100%; width: 100%;content: "";z-index: 1}
.learn-more a::before{display: block;position: absolute;left: 0;top: 0;height: 100%; width: 100%;content: "";z-index: 2;background: #ffffff;
-webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;
}

.learn-more a:hover::before{ width:0%;}
.learn-more a span{background: url(../img/arrow.png) no-repeat right center;padding: 10px 81px 10px 0;display: inline-block;position: relative;z-index: 5;-webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;}
.learn-more a:hover span{padding: 10px 81px 10px 26px;}

.why-strategy{position: relative;padding: 31px 0 31px 131px;margin-bottom: 118px;font-size: 27px}
.why-strategy .qs{position: relative;position: absolute;left: 0; top: 0;width: 97px;height: 100%;border-radius: 0 20px 20px 0;text-align: center;font-size: 83px;color: #ffffff;font-style: normal;line-height: 85px}
.why-strategy .las{position: absolute;background: #000000;width:46px;height: 46px; text-align: center;color: #ffffff;border-radius: 50px;right: 44px;top: 28px;padding: 9px;-webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;}
.why-strategy:hover .las{background: var(--red)}
.why-strategy{
 overflow: hidden;
}

.why-strategy:before{
  content: '';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background: rgba(255,255,255,0.1);
  transition:0.5s;
  pointer-events: none;
}

.why-strategy:hover:before{
  left:-50%;
  transform: skewX(-5deg);
}


.why-strategy .content{
  position:absolute;
  top:15px;
  left:15px;
  right:15px;
  bottom:15px;
  border:1px solid var(--red);
  padding:20px;
  text-align:center;

  
}

.why-strategy span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  
}

.why-strategy span:nth-child(1)
{
  transform:rotate(0deg);
}

.why-strategy span:nth-child(2)
{
  transform:rotate(90deg);opacity: 0
}

.why-strategy span:nth-child(3)
{
  transform:rotate(180deg);
}

.why-strategy span:nth-child(4)
{
  transform:rotate(270deg);opacity: 0
}

.why-strategy span:before
{
  content: '';
  position: absolute;
  width:100%;
  height: 1px;
  background: var(--red);
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0% {
  transform:scaleX(0);
  transform-origin: left;
  }
  50%
  {
    transform:scaleX(1);
  transform-origin: left;
  }
  50.1%
  {
    transform:scaleX(1);
  transform-origin: right;
    
  }
  
  100%
  {
    transform:scaleX(0);
  transform-origin: right;
    
  }
  
  
} 


/**/
.rebranding{padding: 0 0 161px;}
.rebranding .left{border-radius: 0 0 0 25px;padding:139px 25px 35px;height: 245px; }
.rebranding .colum .more{color:#000000;font-size: 35px; position: absolute;right: 50px; bottom: 50px;left: auto;top: auto;}
.rebranding .colum{background: #f3f3f3;font-size: 17px;color: #000000;position: relative;      transition:All .2s ease;
-webkit-transition:All .2s ease;
-moz-transition:All .2s ease;
-o-transition:All .2s ease;}

.rebranding .colum  .more{color:#000000;font-size: 35px; position: absolute;left: auto;top: auto;
 transform: rotate(-45deg) ;
    -webkit-transform: rotate(-45deg) ;
    -moz-transform: rotate(-45deg) ;
    -o-transform: rotate(-45deg) ;
    -ms-transform: rotate(-45deg) ;
      transition:All .2s ease;
-webkit-transition:All .2s ease;
-moz-transition:All .2s ease;
-o-transition:All .2s ease;
}
.rebranding .colum:hover{box-shadow: 5px 7px 0px var(--red);}
.rebranding .colum:hover .more{
     transform: rotate(0deg) ;
    -webkit-transform: rotate(0deg) ;
    -moz-transform: rotate(0deg) ;
    -o-transform: rotate(0deg) ;
    -ms-transform: rotate(0deg) ;color: var(--red);
}
.rebranding .left i{position: absolute;left:-44px;top: -22px }
.rebranding .left .more{right: 37px; bottom: 18px; }
.rebranding .right i{position: absolute;right:20px;top: -51px }
.rebranding .right{border-radius: 0 0 25px 0;padding:139px 25px 35px;height: 245px; }
.rebranding .right .more{right: 37px; bottom: 18px;}


.rebranding .bottom{border-radius: 25px 25px 0 0;padding:82px 55% 35px 35px;height: 245px; }
.rebranding .bottom i{position: absolute;right:-4px;bottom: -36px;z-index: 5 }
.rebranding .bottom .more{left: 44px; bottom: 27px;top: auto;right: auto}

.rebranding  .baloon {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  margin: auto;
  background:var(--red);
 
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
  animation: morphing 10s infinite;
  overflow: hidden;
    position: absolute;left: 50%;bottom: -41px;z-index: 1
}
/*
.baloon:hover {
  animation-play-state: paused;
}
*/

@-moz-keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
  }
  25% {
    border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
    box-shadow: -10px -5px 50px rgba(0,0,0,0.2);
  }
  75% {
    border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
  }
}
@-webkit-keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
  }
  25% {
    border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
    box-shadow: -10px -5px 50px rgba(0,0,0,0.2);
  }
  75% {
    border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
  }
}
@-o-keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
  }
  25% {
    border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
    box-shadow: -10px -5px 50px rgba(0,0,0,0.2);
  }
  75% {
    border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
  }
}
@keyframes morphing {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
  }
  25% {
    border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
    box-shadow: -10px -5px 50px rgba(0,0,0,0.2);
  }
  75% {
    border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
  }
}
/**/



.improvement {padding-bottom: 148px}
.improvement .colum{background:#f6f6f6;border-radius: 0 50px 50px 0;padding:97px 0 54px;}
.improvement .colum img{left: 45px;position: relative}
.improvement .right{width:627px }


.close {
  position: relative;
  height: 2rem;
  width: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;line-height: 1px;color: #ffffff;margin: 0 auto;float: none;opacity: 1
}
.close__animation {
  height: 100%;
  width: 100%;
  position: absolute;
}
.close__icon {
  width: 1rem;
  height: 1rem;margin: 0 auto
}

@keyframes closeAnimation {
  from {
    stroke-dashoffset: 282.743343;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.circle__svg-circle {
  fill: transparent;
  stroke: #000000;
  stroke-dasharray: 282.743343;
  stroke-linecap: round;
  stroke-width: 5px;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  animation: 2s linear infinite closeAnimation;color: #fff;
}

.main-nav-popup{font-size: 25px}
.main-nav-popup a{color: #000000}
.main-nav-popup ul li {opacity: 0;top: 20px;padding: 20px 0 !important}
.main-nav-popup ul li {opacity: 0;top: 20px;
transition:all ease 1s ;
	-moz-transition:all ease 1s ;
	-webkit-transition:all ease 1s ;
	-o-transition:all ease 1ms ;position: relative
}
.main-nav-popup.md-show ul li { transition-delay:.5s;opacity:1;top: 0 }
.main-nav-popup.md-show ul li:nth-child(2){ transition-delay:.7s; }
.main-nav-popup.md-show ul li:nth-child(3){ transition-delay:.9s; }
.main-nav-popup.md-show ul li:nth-child(4){ transition-delay:1.1s; }
.main-nav-popup.md-show ul li:nth-child(5){ transition-delay:1.3s; }
.main-nav-popup.md-show ul li:nth-child(6){ transition-delay:1.5s; }
.main-nav-popup.md-show ul li:nth-child(7){ transition-delay:1.7s; }
.main-nav-popup ul li.nav-link a{position: relative;}
.main-nav-popup ul li.nav-link a:after {position:relative;position: absolute;left:50%;bottom: 0;content:"";height: 1px;width: 0;
    transition:all ease 1s ;
	-moz-transition:all ease 1s ;
	-webkit-transition:all ease 1s ;
	-o-transition:all ease 1ms ;display: block;background:#000000;display: block}

.main-nav-popup ul li.nav-link a:hover:after {left: 0;width: 100%}
.md-modal.content-popup{overflow: auto}
.md-modal.content-popup figure{position: relative}
.md-modal.content-popup figure img{position: relative;z-index: 5;border-radius: 20px}
.md-modal.content-popup figure::before{position:absolute;z-index: 1;left: -25px; background: #000000;display: block;height: 100%;top: -20px;content:"";width: 100%;border-radius: 20px}

.md-modal.content-popup figure,
.md-modal.content-popup article{
    transition:all ease 1s ;
	-moz-transition:all ease 1s ;
	-webkit-transition:all ease 1s ;
	-o-transition:all ease 1ms ;position: relative;opacity: 0;left: -40px;
    
}
.md-modal.content-popup.md-show figure{opacity: 1;left:0px;transition-delay:.5s;}
.md-modal.content-popup.md-show article{opacity: 1;left: 0px;transition-delay:.8s;}

.md-modal {}

.page-title {font-size:42px;line-height: 46px;padding: 0 0 20px }
.page-title span{font-size:60px;display: block}
.D-Marketing .colum{max-width: 627px;}
.D-Marketing .colum h3{font-size: calc(20px + (37 - 20) * ((100vw - 320px) / (1920 - 320)))}

.how-we{padding: 126px 0 20px}
.how-we h3{font-size: calc(20px + (37 - 20) * ((100vw - 320px) / (1920 - 320)))}
.how-we .bg{background: url(../img/bg-how-we.jpg) no-repeat center center;border-radius:40px 0 0 40px;height: 571px;background-size: cover;position: relative}
.how-we .bg img{position: absolute;left: 50px; bottom: 0}
.how-we .colum{max-width:451px;}

.how-we-3-col{font-size: 17px}
.how-we-3-col .rounded{border-radius: 20px!important}
.how-we-3-col .colums{padding: 40px 35px 50px;}
.how-we-3-col .colums {padding: 40px 35px 50px;position: relative}
.how-we-3-col .colums .layer-3 {position: relative;z-index: 6}
.how-we-3-col .colums canvas {position: absolute;z-index: 1;left: 0;top: 0;opacity: .4;width: 100%;height: 100%}

.how-we-3-col .colums .count{font-size: 40px;background:#ffffff;width: 59px; height: 59px;border-radius: 50px;color: #000000;line-height:46px;margin-bottom: 15px }
.D-Marketing .two-colum{}
.D-Marketing .two-colum .bg-grey{background: #f6f6f6;border-radius:0 20px 20px 0; }
.D-Marketing .two-colum .colum{max-width: 627px;}
.D-Marketing .two-colum h4{font-size: 22px}

.contact-form {font-size: 15px;margin-bottom: 100px}
.contact-form .caption{font-size: 60px;line-height: 60px}
.contact-form .bg-yellow{background: #fff568;border-radius: 20px;display: inline-block;font-size: 15px}
.contact-form .select-custom,
.contact-form .border-bottom
{border-bottom:1px solid #000000!important;}
.contact-form .select-custom .nice-select{font-size: 16px; font-weight: 600}
.contact-form .btn{ border: 1px solid var(--red);background: transparent;border-radius: 50px;padding: 10px 65px;font-size: 18px}
.contact-form .btn:hover{background:var(--red);color: #ffffff}



.nice-select {
  -webkit-tap-highlight-color: transparent;

  border-radius: 5px;
  border: 0;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
 font-weight: 600;
    color: #000000;
  font-family: inherit;
  font-size: 14px;
  font-weight: normal;
  height: 42px;
  line-height: 40px;
  outline: none;
  padding-left: 18px;
  padding-right: 30px;
  position: relative;
  text-align: left !important;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  white-space: nowrap;
  width: auto; }
  .nice-select:hover {
    border-color: #d0dae5; }
  .nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: #88bfff; }
  .nice-select:after {
    border-bottom: 2px solid #000000;
    border-right: 2px solid #000000;
    content: '';
    display: block;
    height: 9px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
        -ms-transform-origin: 66% 66%;
            transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 9px; }
  .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
            transform: rotate(-135deg); }
  .nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
        -ms-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0); }
  .nice-select.disabled {
    border-color: #e7ecf2;
    color: #90a1b5;
    pointer-events: none; }
    .nice-select.disabled:after {
      border-color: #cdd5de; }
  .nice-select.wide {
    width: 100%; }
    .nice-select.wide .list {
      left: 0 !important;
      right: 0 !important; }
  .nice-select.right {
    float: right; }
    .nice-select.right .list {
      left: auto;
      right: 0; }
  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; }
    .nice-select.small:after {
      height: 4px;
      width: 4px; }
    .nice-select.small .option {
      line-height: 34px;
      min-height: 34px; }
  .nice-select .list {
      margin-top: 23px;
      min-width: 100%;
    background-color: #fff;
    border-radius:0 0 5px 5px;
    box-shadow: 0 0 0 1px rgba(68, 88, 112, 0.11);
    box-sizing: border-box;
   
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
        -ms-transform: scale(0.75) translateY(-21px);
            transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; }
    .nice-select .list:hover .option:not(:hover) {
      background-color: transparent !important; }
  .nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 40px;
    list-style: none;
    min-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s; }
    .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
      background-color: #f6f7f9; }
    .nice-select .option.selected {
      font-weight: bold; }
    .nice-select .option.disabled {
      background-color: transparent;
      color: #000000;
      cursor: default; }

.no-csspointerevents .nice-select .list {
  display: none; }

.no-csspointerevents .nice-select.open .list {
  display: block; }
/**/
.contact-form .field {
  display: flex;
  flex-flow: column-reverse;
  margin-bottom: 1em;
}
/**
* Add a transition to the label and input.
* I'm not even sure that touch-action: manipulation works on
* inputs, but hey, it's new and cool and could remove the 
* pesky delay.
*/
.contact-form label,.contact-form  input {
  transition: all 0.2s;
  touch-action: manipulation;
}

.contact-form input {
  font-size: 1.5em;
  border: 0;
  border-bottom: 1px solid #000000;
  font-family: inherit;
  -webkit-appearance: none;
  border-radius: 0;
  padding: 0;
  cursor: text;
}

.contact-form  input:focus {
  outline: 0;
  border-bottom: 1px solid #666;
}

.contact-form  label {
  
  letter-spacing: 0.05em;
}
/**
* Translate down and scale the label up to cover the placeholder,
* when following an input (with placeholder-shown support).
* Also make sure the label is only on one row, at max 2/3rds of the
* field—to make sure it scales properly and doesn't wrap.
*/
.contact-form  input:placeholder-shown + label {
  cursor: text;
  max-width: 66.66%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left bottom;
  transform: translate(0, 2.125rem) scale(1);pointer-events: none
}
/**
* By default, the placeholder should be transparent. Also, it should 
* inherit the transition.
*/
::-webkit-input-placeholder {
  opacity: 0;
  transition: inherit;
}
/**
* Show the placeholder when the input is focused.
*/
input:focus::-webkit-input-placeholder {
  opacity: 1;
}
/**
* When the element is focused, remove the label transform.
* Also, do this when the placeholder is _not_ shown, i.e. when 
* there's something in the input at all.
*/
.contact-form input:not(:placeholder-shown) + label,
.contact-form input:focus + label {
  transform: translate(0, 0) scale(1);
  cursor: pointer;
}
.callback img{border:14px solid #dbdbdb;}

/**/

.menu__toggler {
  position: absolute;
  bottom:48px;
  left: 49px;
  z-index: 999;
  height: 28px;
  width: 28px;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {
  position: absolute;
  content: "";
  width: 28px;
  height: 2.5px;
  background: #fafafa;
  border-radius: 20px;
  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
.menu__toggler span::before {
  top: -8px;
}
.menu__toggler span::after {
  top: 8px;
}
.menu__toggler.active > span {
  background: transparent;
}
.menu__toggler.active > span::before, .menu__toggler.active > span::after {
  background: #ffffff;
  top: 0px;
}
.menu__toggler.active > span::before {
  transform: rotate(-225deg);
}
.menu__toggler.active > span::after {
  transform: rotate(225deg);
}
.menu {
  position: absolute;
  left: -500px;
  z-index: 5;
  color: #ffffff;
  background:#000000;
  top: 0;
  width: 500px;
  height: 100%;
  padding:50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);font-size: 22px;line-height:47px
}
    .menu a{color: #ffffff}

.menu.active {
  left: 0;
}
.menu::after{background:#ffffff;display: block; height: 100%;left: 500px;right:100%;top: 0; content: "";z-index: 9;position: fixed;opacity: .8;
transition:all ease .4s ;
	-moz-transition:all ease .4s ;
	-webkit-transition:all ease .4s ;
	-o-transition:all ease .4ms ;
}

.menu.active::after{left: 500px;right: 0;}
.web-dev{padding: 180px 0 271px;}
.web-dev .squre{max-width: 1000px;position: absolute; top:-417px;right:-100px }
.web-dev .robo-hand{max-width: 2000px;position: absolute; bottom:-417px;right:-100px }
.web-dev .btn-red{background: var(--red);color: #ffffff;border-radius: 50px; padding: 15px 50px;font-size: 17px;border: 1px solid var(--red)}
.web-dev .btn-red:hover{background: var(--white);color: #000000;}

.mbr-parallax-background,
.mbr-background {
  background-attachment: fixed !important;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover !important;
}
.mbr-hidden-scrollbar .mbr-parallax-background {
  background-size: auto 130%;
}
.mobile .mbr-parallax-background {
  background-attachment: scroll !important;
}

/*.web-d tab*/
.web-d-tab{}
.web-d-tab .nav-tabs{position: absolute; left: 0; width: 100%;padding: 0 2px;z-index: 2;border-bottom: 0}
.web-d-tab .nav-tabs li{width: 33.33%;padding: 4px 2px}
.web-d-tab .nav-tabs li a{ display: block;border:1px solid #f18686;text-align: center;color: #ffffff}
.web-d-tab .tab-pane {padding:256px 0 81px;position: relative;} 
.web-d-tab .tab-pane .container{position: relative; z-index: 5}
.web-d-tab .tab-pane::after{background: var(--red);display: block;left: 0;top: 0;right: 0; bottom: 0;position: absolute; content:"";opacity: .8 }
.web-d-tab .tab-pane#WebDesign {background:url(../img/web-d-bg.jpg) no-repeat center center; } 
.web-d-tab .tab-pane#MobileApp {background:url(../img/app-development.jpg) no-repeat center center; } 
.web-d-tab .tab-pane#WebApplication {background:url(../img/web-application.jpg) no-repeat center center; } 
.web-d-tab .nav-tabs .nav-item .nav-link{border-radius: 0;font-weight: 300;padding: 15px 10px;position: relative}
.web-d-tab .nav-tabs .nav-item.show .nav-link, 
.web-d-tab .nav-tabs .nav-link.active{background-color: transparent;border-radius: 0;border:1px solid #f18686;color: #ffffff;font-size: 22px;} 
.web-d-tab .nav-tabs .nav-link.active::after{position: absolute; left: 0;bottom: 0; width: 100%;height: 4px; background: #ffffff; display: block;content: "";}

.web-d-tab .tab-content h3 {font-size: calc(20px + (56 - 20) * ((100vw - 320px) / (1920 - 320)));
    line-height: calc(20px + (48 - 20) * ((100vw - 320px) / (1920 - 320)));padding: 0 0 30px}
.web-d-tab .tab-content h3 span {font-size: calc(16px + (42 - 20) * ((100vw - 320px) / (1920 - 320)));background: #000000;color: #ffffff}

.web-d-tab .tab-pane#WebDesign .box {border-radius: 20px;}
.about{padding:62px 0 142px;background: url(../img/layar.png) no-repeat 0 0 / 41%  }
.about h1{font-size:  calc(20px + (43 - 20) * ((100vw - 320px) / (1920 - 320)))}
.about .tile{width:174px;height: 174px;padding: 20px;  }
.about .display-4{font-size: calc(24px + (53 - 24) * ((100vw - 320px) / (1920 - 390)));}

.HM-Basic{}
.HM-Basic .left{padding-left: calc(((100vw - 1254px) / 2 + 21px));background: url(../img/lines.png) no-repeat right center;padding-top: 194px;padding-bottom: 194px}
.HM-Basic .left .display-1{font-size: calc(16px + (65 - 16) * ((100vw - 390px) / (1920 - 390)));}
.HM-Basic .left .pen-1{position: absolute;left: 50px; top: -76px}
.HM-Basic .Right .pen-2{position: absolute;right: 50px; top: -76px}
.HM-Basic .Right .cup{position: absolute;left:-273px; bottom:-219px}
.HM-Basic .Right{padding-right: calc(((100vw - 1254px) / 2 + 21px));padding-top: 180px;padding-bottom: 180px;padding-left: 70px}

.what-we{padding: 156px 0 289px;background: url(../img/dots.png) right top no-repeat}
.what-we i{display: block;height:204px; }
.what-we .display-4{font-size:  calc(20px + (43 - 20) * ((100vw - 320px) / (1920 - 320)))}

.process{padding:0 0 148px;}
.process ul.flow{}
.process ul.flow li{position: relative;padding:0 0 70px 110px; }
.process ul.flow li::after{position:absolute;content:"";display: block;border-left: 1px dashed #8b8b8b;height: 100%;z-index: 0;left: 32px; width: 1px}
.process ul.flow li:last-child::after{display: none}
.process ul.flow li .no{background: #fff;position:absolute;z-index: 2;width:63px;height: 63px;text-align:center;padding:4px 0 0;border-radius: 50px;display: block;left: 0;border:4px solid var(--danger);;font-size: 30px;font-weight: 600 }
.process ul.flow li:hover .no{border:4px solid var(--black);background: #000000;color: #ffffff; }
.process .figure {border-radius:18px}
.process .squre{position: absolute;top:-95px;right:49px;-webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.process .multiple{position: absolute;top:5px;left:-49px;}
.process .triangle{position: absolute;bottom:15px;left:-49px;}
.process h1{font-size:  calc(20px + (43 - 20) * ((100vw - 320px) / (1920 - 320)))}

.technology{}
.technology .owl-carousel .owl-item img{width: auto}
.technology .owl-theme .owl-dots .owl-dot{border: 1px solid transparent;border-radius: 20px; margin: 2px;width: 24px; height: 24px;  transition:All .2s ease;
-webkit-transition:All .2s ease;
-moz-transition:All .2s ease;
-o-transition:All .2s ease;}
.technology .owl-theme .owl-dots .owl-dot.active{border: 1px solid var(--danger);}
.technology .owl-theme .owl-dots .owl-dot span{margin:6px;}
.technology .owl-theme .owl-dots .owl-dot.active span{background:var(--danger); }
.technology .owl-carousel{margin-bottom:86px }

.join{background: url(../img/info-bg.jpg) no-repeat center top / cover;padding: 206px 0 113px}
.join .display-4{font-size:  calc(20px + (69 - 20) * ((100vw - 320px) / (1920 - 320)))}


.blog{padding: 121px 0}
.blog .h1{font-size:  calc(20px + (52 - 20) * ((100vw - 320px) / (1920 - 320)))}
.blog figure img{border-radius:11px}
.blog figcaption{position: absolute;bottom: 0;left: 20px;right:20px;padding: 15px 18px;border-radius: 12px;box-shadow:0px 3px 6px #ccc;z-index: 2;background: #ffffff}

.blog .owl-theme .owl-dots .owl-dot{border: 1px solid transparent;border-radius: 20px; margin: 2px;width: 24px; height: 24px;  transition:All .2s ease;
-webkit-transition:All .2s ease;
-moz-transition:All .2s ease;
-o-transition:All .2s ease;}
.blog .owl-theme .owl-dots .owl-dot.active{border: 1px solid var(--danger);}
.blog .owl-theme .owl-dots .owl-dot span{margin:6px;}
.blog .owl-theme .owl-dots .owl-dot.active span{background:var(--danger); }
.join{padding: 126px 0 79px;}
.blog{padding: 58px 0;}


.bg-service{background: url(../img/near-laptop.png) no-repeat center top / cover}
.services .owl-theme .owl-nav{display: none}
.services .owl-controls{display: none}
.services .item{padding:38px 39px 430px;}
.services .item h3{height: 80px}
.services .item.seo{background:url(../img/seo.png) no-repeat center bottom #f4f8fd ;background-size: contain  }
.services .item.ecommerce{background:url(../img/ecommerce.png) no-repeat center bottom #dde9fd ;background-size: contain  }
.services .item.marketing{background:url(../img/marketing-vector.png) no-repeat center bottom #a4d1ec ;background-size: contain  }
.services .item.webdesign{background:url(../img/web-design.png) no-repeat center bottom #ffd4d4 ;background-size: contain  }



.ecommerce article{padding-left: calc(((100vw - 1254px) / 2 + 21px));padding-top: 135px;padding-bottom: 135px;padding-right: 40px}
.ecommerce figure{background:url(../img/e-commerce.jpg) no-repeat center center / cover;border-radius: 20px 0 0 20px; }

@media (min-width: 1366px) {
    .container{max-width:1254px;}  
}



@media screen and (max-width: 1400px){
    .custom-tabs .nav-tabs .nav-item .nav-link{padding: 15px 5px;}
    
    .custom-tabs .nav-tabs .nav-item .nav-link{font-size: 14px;}
    .content-area{padding: 103px 50px 0px 50px;}
    header .navbar{left: 11px;}
    header .navbar ul li a{font-size: 11px;}
    .title-sub{margin-bottom: 15px;}
    .toper ul li a{font-size: 13px;}
    .h3, h3{font-size: 20px;}
    .h4, h4{font-size: 18px;}
    .h5, h5{font-size: 15px}
    .what-we figcaption{min-height: 52px;}
    ul.targeting li{padding: 0 0 40px 42px;}
    footer ul.Q-contact li a{width: 32px;height: 32px;font-size: 23px;}
    footer ul.social li a{width: 27px;height: 27px;font-size: 16px;}
    ul.targeting{margin: 0 0 0 26px;}
    .header-inner{padding: 43px 0 46px;}
    .header-inner .mail{padding: 20px 82px 20px 57px;}
    .inner-container{font-size: 17px;font-weight: 300;padding-top: 158px;}
    .rebranding{padding: 0 0 29px;}
    .D-Marketing .colum h3,.sub-hed{font-size: 31px;}
    .learn-more a span{font-size: 16px;}
    .how-we h2{font-size: 42px;}
    .how-we .colum{font-size: 17px;}
    .sub-hed span{font-size: 51px;line-height: 41px;}
    .improvement{padding-bottom: 74px;}
    .page-title{font-size: 32px;line-height: 38px;}
    .page-title span{font-size: 43px;}
    .header-inner .logo img{max-width: 103px;}
     .header-inner .logo img{max-width: 100px;}
    .header-inner .navbar-togle{padding: 19px 15px 20px 15px;}
    .header-inner .navbar-togle .span-2{width: 50px;}
    .header-inner .navbar-togle .span-1{margin-left: 27px;}
    .header-inner .navbar-togle .span-3{margin-left: 14px;}
    .contact-form .caption{font-size: 47px;line-height: 45px;}
    .menu {line-height: 30px;}
    .menu a{font-size: 17px;}
    .D-Marketing .two-colum .colum.right{padding-right: 45px}
    .about .tile {width: 161px;height: 161px; padding: 24px;}
    .home-banner{background: url(../img/home-banner.jpg) no-repeat right center;background-size: 56%;height: 689px;}
    .home-banner .carousel-fade .carousel-indicators{bottom: -47px;}
    .about{padding: 30px 0 93px;}
    .HM-Basic .Right{padding-bottom: 85px;padding-top: 85px}
    .HM-Basic .left{padding-top: 120px;padding-bottom: 100px;}
    .HM-Basic .left .pen-1{width: 114px;}
    .HM-Basic .Right .pen-2{width: 100px;}
    .HM-Basic .Right .cup{width: 247px;bottom: -146px;left: -158px;}
    .what-we{padding: 156px 0 151px;}
    .web-dev .squre{max-width: 602px;top: -358px;right: -49px;}
    .web-dev .robo-hand{max-width: 856px;bottom: -264px;}
    .web-dev{padding: 180px 0 131px;}
    .services .item{padding: 38px 39px 301px}
    .ecommerce article{padding-left: calc(((100vw - 1140px) / 2 + 21px));padding-top: 47px;padding-bottom: 61px;}
}



@media screen and (max-width: 1365px){
    .how-we .colum{}
    .HM-Basic .left{padding-left: calc(((100vw - 1140px) / 2 + 21px));}
    .HM-Basic .right{padding-right: calc(((100vw - 1140px) / 2 + 21px));}
 .about .tile{width: 154px;height:154px;padding: 17px;}
}
@media screen and (max-width: 1199px){
    
    .HM-Basic .left{padding-left: calc(((100vw - 960px) / 2 + 21px));}
    .HM-Basic .Right{padding-right: calc(((100vw - 960px) / 2 + 21px));}
    .about .tile{width: 127px;height: 135px;}
    .what-we i img{max-height: 100px;max-width: 100px;height: 150px;}
    .process ul.flow li{padding: 0 0 33px 87px;}
    .process .squre{width: 28px;top: -60px;}
    .process .multiple{width: 24px;left: -22px;}
    .process .triangle{width: 23px;left: -27px;}
    .what-we i{height: auto}
    .ecommerce article{padding-left: calc(((100vw - 960px) / 2 + 21px));padding-top: 47px;padding-bottom: 61px;}
}


@media screen and (max-width:991px){
    footer .foot-nav{padding: 16px 16px;margin: 0 20px 35px}
    .inner-container,.how-we-3-col{font-size: 14px}
    footer .foot-nav{margin: }
    .how-we .bg{margin-left: 20px;}
    .what-we i{}
    .process .triangle{left: auto;right: 0;bottom: -15px}
    .about .tile{width: 209px;height: 186px;}
    .HM-Basic .left{padding-left: calc(((100vw - 720px) / 2 + 21px));padding-right: calc(((100vw - 720px) / 2 + 21px));}
    .HM-Basic .Right{padding-right: calc(((100vw - 720px) / 2 + 21px));padding-left: calc(((100vw - 720px) / 2 + 21px));}
    .HM-Basic .Right .cup{display: none}
    .what-we{padding: 56px 0 4px;}
    .process{padding: 0 0 50px;}
    .web-dev .robo-hand,.web-dev .squre{display: none}
    .web-dev{padding: 1px 0 2px;}
}
@media screen and (max-width:768px){
    .how-we .bg img{max-height: 250px;width: auto}
    .how-we .bg{height: 189px;}
    .how-we{padding: 60px 0 20px;}
    .ecommerce article{padding: 25px}
    .ecommerce figure{height: 200px!important;border-radius: 0}
    
.learn-more a::after{left: 0;top: 0;height: 100%; width: 100%;content: "";z-index: 1}
.learn-more a::before{ width:0%;
}

.learn-more a span{;padding: 10px 81px 10px 26px;}

    
}

@media screen and (max-width:767px){
    .md-modal.content-popup{font-size: 14px;}
    .page-title,.D-Marketing .colum h3, .sub-hed{font-size: 24px;}
    .page-title span,.sub-hed span{font-size: 27px;line-height: 29px;}
    .main-nav-popup{font-size: 17px;}
    .main-nav-popup ul li{padding: 7px 0 !important;}
    .sub-hed{line-height: 28px;padding: 0 0 9px;}
    .strategy figure{padding: 39px 0 39px 0;}
    .strategy{padding-bottom:9px;}
    .why-strategy{margin-bottom: 28px;padding: 10px 46px 11px 69px;font-size: 17px;font-weight: 500;}
    .why-strategy .qs{width: 52px;font-size: 27px;line-height: 39px;}
    .why-strategy .las{width: 30px;height: 30px;right: 6px;top: 10px;padding: 5px;}
    .rebranding .colum.left img{width: 113px}
    .rebranding .colum.right img{width: 113px}
    .rebranding .colum.bottom img{width:216px}
    .rebranding .baloon{width: 152px;height: 146px;}
    .rebranding .colum.left {padding: 69px 25px 51px;height: 204px;}
    .rebranding .colum.right {padding:69px 25px 51px;height: 204px;}
    .rebranding .left i{left: -11px;}
    .rebranding .colum{font-size: 14px;font-weight: 500}
    .rebranding .bottom{padding: 37px 55% 35px 35px;height: 165px;}
    .improvement .colum img{left: 0}
    .improvement .colum{padding: 41px 0 54px;margin-right: 20px;}
    .improvement{padding-bottom: 24px;}
    footer address,footer ul.bullet-list li a,footer ul.get-in li{color: #646464;}
    .improvement .right{width: auto;padding: 0 14px}

    .D-Marketing .two-colum .colum{max-width: 100%}
    .D-Marketing .two-colum .colum.right{padding-right:0px;}
    .HM-Basic .left{padding-left: calc(((100vw - 540px) / 2 + 21px));padding-right: calc(((100vw - 540px) / 2 + 21px));}
    .HM-Basic .Right{padding-right: calc(((100vw - 540px) / 2 + 21px));padding-left: calc(((100vw - 540px) / 2 + 21px));padding-bottom: 32px;padding-top: 46px;}
    .home-banner{height: 465px;}
    .service-carousel{padding: 0 20px}
}
@media screen and (max-width:640px){
    .content-area{103px 28px 0px 28px}
    .HM-Basic .left,
    .HM-Basic .Right{padding: 40px}
    .HM-Basic .left .pen-1,.HM-Basic .Right .pen-2{display: none}
    footer ul.footlinks {padding: 0 0 25px;}
    footer ul.footlinks li{padding: 0 0 11px;}
    .learn-more a span{background: transparent;padding: 7px 26px;font-size: 12px;}
    .learn-more a:hover span{background: transparent;padding: 7px 26px;font-size: 12px;}
    .about{padding: 30px 0 23px;}
    .home-banner .carousel-fade .carousel-item{width: 50%}
    .home-banner .carousel-item.active p{display: none}
    .home-banner{height: 274px;}
    .header-inner{padding: 13px 0 10px;}
    .header-inner .logo img{max-width: 70px;}
    .header-inner .navbar-togle,header.fixed-header .navbar-togle{top: 4px;padding: 11px 15px 13px 11px;}
    .header-inner .navbar-togle .span-1{margin-left: 22px;}
    .header-inner .navbar-togle .span-2{width: 39px;}
    .header-inner .navbar-togle .span-3{margin-left: 10px;}
    .HM-Basic{padding: 0 15px}
    .inner-container{padding-top: 88px;}
}
@media only screen and (max-width: 600px) {
  .menu {
    width:331px;
    left: -331px;
    padding: 20px;
  }
    .menu ul li{font-size: 17px;line-height:27px;padding: 0 0 11px }
    .menu .sub-hed{padding: 0 0 26px }
    header .logo{width: 77px;}
    .menu__toggler{left: 32px}
    footer .foot-nav{border-left: 0;border-right: 0;border-radius: 0}
    footer ul.get-in li,footer ul.get-in li a{font-size: 16px;color: #000000}
    .technology .owl-stage-outer .owl-item .item{text-align: center}
    .technology .owl-stage-outer .owl-item .item img{display: inline-block}
    .technology .owl-carousel{margin-bottom: 36px;}
    .process .triangle{right: 31px;}
    .process .multiple{display: none}
}
@media screen and (max-width:578px){

        
}