@charset "utf-8";
/* CSS Document */	
@import'bootstrap.min.css';
@import'animation.css';
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
/*-------------------------------------------------------------------------------------------RESET CSS START*/
html{   scroll-behavior: smooth;}
body { font-family: 'Roboto', sans-serif; font-weight: normal;  overflow-x: hidden;  direction: ltr; font-size:16px; color:#4a4a4a; line-height:25px; padding:0px; margin:0px; -webkit-font-smoothing: antialiased; }
html, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, i, center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0px; padding:0px; }
footer, header, figure, aside { padding:0px; display:block; }
q:before, q:after { content:''; }
abbr, acronym { border:0; font-variant:normal; }
sup { vertical-align:text-top; }
sub { vertical-align:text-bottom; }
input, select, textarea, button { font-family: 'Roboto', sans-serif; font-weight: normal; direction: ltr; color:#3e3e3e; font-size:12px; margin:0em; margin:0px; border:1px solid #cecece; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; border-radius:0px; box-sizing:border-box; }
input, button { overflow:visible; }
input, textarea{ outline:none; }
input[type=file] + input[type=file] { margin-left:5px; }
select + select, input[type=text] + input[type=text], input[type=password] + input[type=password] input[type=text] + select { margin-left:0px; }
input[type=text] + input[type=submit] { margin-left:10px; }
input[type=checkbox] { height:13px; width:13px; margin-right:5px; position:relative; top:1px; }
input[type=submit], input[type=button], input[type=reset], a, button { cursor:pointer; }
input[type=submit], input[type=button], input[type=reset], button { overflow:visible; }
input[type=submit] + input[type=submit], input[type=button] + input[type=button], input[type=reset] + input[type=reset], button + button, .btn + .btn, input[type=submit] + input[type=button], input[type=button] + input[type=submit] { margin-left:5px; }
input[type=radio] { margin-right:4px; position:relative; top:1px; }
input[type=radio] + abbr, input[type=checkbox] + abbr { padding-right:0px; }
input[type=file] { padding:4px 5px; display:inline; }
input[type=file] + input { margin-left:5px; }
input, input:focus, input:active, .btn:focus, .btn:active:focus, .btn.active:focus { outline:none; }
abbr + select, abbr + input { margin-left:15px; }
select[class*=col-] { padding:7px 8px; }
select option { padding-left:4px; }
input[type=submit], input[type=button], input[type=reset], button, .btn { font-weight:bold;  height: 48px; border-radius: 4px; padding:0px 37px; text-decoration:none; display:inline-block; font-size: 16px; line-height: 48px; background-color:#000; color:#FFF; box-shadow: 20px 20px 40px 0 rgba(0, 0, 0, 0.16); }
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, button:hover, .btn:hover, .btn.focus, .btn:focus, .btn:hover { /*background-color:#db3355;*/ color:#FFF; }
p { margin:0px; padding-bottom:15px; }
a { color:#000; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
a:hover{ text-decoration:underline; }
a:visited { text-decoration:none; }
a, a:hover, a:focus, a:active, a:visited { outline:none; }
a img, a:hover img, img, a input { text-decoration:none; }
a img, img, input[type=checkbox], input[type=radio], iframe { border:none; }
ul { margin:0px; padding:0px; }
del { visibility:hidden; }
textarea { width:100%; height:160px; resize:none; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
article{ padding:0px 0px; min-height:600px; overflow-x: hidden;}
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse; border-spacing:0; }
td { vertical-align:top; }
select { max-width:100%; }
img { max-width:100%; border:0; -ms-interpolation-mode:bicubic; vertical-align:middle; }
hr { color:#D0D0D0; }
address p { padding-bottom:5px; }
*:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-button { width:8px; height:5px; }
::-webkit-scrollbar-track { background-color:#DDD; border: skinny plain lightgray; box-shadow: 0px 0px 3px #dfdfdf inset; }
::-webkit-scrollbar-thumb { background-color:#999; border: skinny plain gray; }
::-webkit-scrollbar-thumb:hover { background:#1b1e24; }
::-webkit-input-placeholder { font-family: 'Roboto', sans-serif; font-weight: normal;  direction: ltr; color:#9b9b9b; }
:-ms-input-placeholder { font-family: 'Roboto', sans-serif; font-weight: normal; direction: ltr; color:#9b9b9b; }
::selection { background-color:#9e9e9e; color:#FFF; }
::-moz-selection { background-color:#65ac05; color:#FFF; }
h1 { font-size:32px; font-weight:700; margin:0px; }
h2 { font-size:56px; color:#000; font-weight: 600; padding-bottom:40px; margin:0px;  }
h3 { font-size:44px; font-weight:600; color:#000; margin:0px; padding-bottom:15px; }
h4 { font-size:18px; line-height:30px; }
h5 { font-size:16px; margin:0px; color:#212121; padding-bottom:20px; }
/*-------------------------------------------------------------------------------------------RESET CSS CLOSE	*/	
/*-------------------------------------------------------------------------------------------BOOTSTRAP COMMON CSS START	*/	
.carousel-item { height: 32rem; background-color: #777; }
.container{ max-width: 1300px; width: 100%;}
.loader {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 10000;
	top:0px;
	left: 0px;
	background-color: #FFF;
	}
.loader span{
	top:50%;
	left: 50%;
	margin: -32px;
	transform: translate(-50%,-50%);
	position: absolute;
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 16px solid #3498db;
	width: 120px;
	height: 120px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
}	
/* Safari */
@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
	}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}
.backtotop { cursor:pointer; z-index: 10000; position:fixed; width: 55px; height: 55px; line-height: 55px; bottom:20px; right:20px; display:none; padding:0px; border-radius: 50%; background-color: #db3355; text-align: center; color: #FFF !important; font-size: 25px;}
.backtotop:focus{box-shadow: none;}
.navbar.sticky { position: fixed; z-index: 1000; top: 0; width: 100%; } 
.navbar.fixed-header { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%;}
.sticky + .content { padding-top: 60px; }
button:focus{outline:0;}
.btn.btn-lg{
    height: 56px;
    line-height: 56px;
    padding: 0px 63px;
}
.btn {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0px 0px 40px 0 rgba(0, 0, 0, 0.16);
    position: relative;
    background: #db3355;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    border-color: #000;
  }
.btn:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn:hover, .btn:focus, .btn:active {
    color: white;
    border-color: #db3355;
}
.btn.btn-primary{
    background-color: #000;
    border-color: #db3355;
}
.btn.btn-primary:hover{
    border-color: #000;
}
.btn.btn-primary::before{
    background-color: #db3355;
    border-color: #db3355;
}
.btn:hover:before, .btn:focus:before, .btn:active:before {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
.btn:hover, .btn:focus, .btn:active{
    box-shadow: none;
}
.textUppercase{
    text-transform: uppercase !important;
}
textarea.form-control{
    height: 130px;
    padding-top: 12px;
}
.form-group{
    font-size: 16px;
    color: #4a4a4a;
}
.form-control{
    color: #4a4a4a;
    font-size: 16px;
    height: 48px;
    border-radius: 4px;
    border: solid 1px #c8c8c8;
}
.form-group{
    margin-bottom: 22px;
}
.modal-backdrop.show{
    opacity: 0.7;
}
.modal-title{
    padding: 0px;
    font-size: 28px;
    color: #4a4a4a;
    line-height: 1;
}
.modal-dialog{
    max-width: 600px;
}
.modal-body{
    padding: 30px;
}
.modal-header{
    padding: 30px;
    background-color: #f9f9f9;
}
.modal-header .close{
    box-shadow: none;
    text-shadow: none;
    font-size: 35px;
    font-weight: normal;
    padding: 0;
    color: #9b9b9b;
    opacity: 1;
    margin: 0;
    height: auto;
    line-height: 0.8;
}
.form-row{
    margin-left: -8px;
    margin-right: -8px;
}
.form-row>.col, .form-row>[class*=col-]{
    padding-right: 8px;
    padding-left: 8px;
}
.form-control:focus{
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-color: #db3355;
}
.modal-content{
    border:none;
}

/*-------------------------------------------------------------------------------------------BOOTSTRAP COMMON CSS CLOSE	*/	

/*-------------------------------------------------------------------------------------------HEADER CSS START*/	
.navbar{
    padding: 20px 20px 0px;
    top:-100px;
    width: 100%;
    z-index: 100;
    position: absolute;
    background-color: #FFF;
    box-shadow: 0 18px 22px 0 rgba(6, 10, 36, 0.1), 0 4px 11px 0 rgba(6, 10, 36, 0.05);
}
#logo{ margin-bottom:20px; }
.navbar-nav .nav-link{
    font-size: 18px;
    color: #000;
    padding: 11px 19px !important;
}
.navbar-nav .dropdown .nav-link{
    padding-bottom:31px !important;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active{
    color: #db3355;
}
.navbar-nav .btn{
    margin-left: 10px;
    padding: 0px 20px;
}


.videoWrapper {
    position: relative;
    width: 100vw;
    height: 100vh;

    padding-top:0px;
    overflow: hidden;
    background-color: #000;
}
.videoWrapper .video{
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.btnDown{
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%);
    position: absolute;
}
.btnDown img{
    height: auto !important;
}
.btnInfo{
    position: absolute;
    right: 12px;
    top: 7px;
}
.btnclose{
    position: absolute;
    top: 10px;
    right: 17px;
}
@media (min-width: 768px){  
    .nav-item.dropdown:hover ul.dropdown-menu{
        display: block;
    }
}
.dropdown-menu{
    padding: 0px;
    border-radius: 0px;
    min-width: 15rem;
    margin: 0px 0px 0px 20px;
}
.navbar-nav .nav-link i{
    font-size: 14px;
    margin-left: 4px;

}
.dropdown-menu .dropdown-item{
    color: #000;
    padding: 9px 20px;
}
.dropdown-menu li + li{
    border-top:solid 1px rgba(169, 183, 205, 0.37);
}
.dropdown-menu .dropdown-item:hover{
    color: #db3355;
    background-color: transparent;
}
.show-Mobile{
    display: none;
}

/*-------------------------------------------------------------------------------------------HEADER CSS END*/	
/*-------------------------------------------------------------------------------------------CONTENT CSS START*/	
.sectionFirst{
    font-size: 18px;
    text-align: center;
    padding: 135px 0px 95px 0px;
}
.sectionFirst .container{
    max-width: 940px;
}
.sectionFirst p{
    padding-bottom: 50px;
}
.textLink{
    font-size: 14px;
    font-weight: 600;
    color: #db3355;
}
.textLink:hover{
    color: #000;
    text-decoration: none;
}
.addleftSpacing{
    padding-left: 120px;
}
.addrightSpacing{
    padding-right: 120px;  
}
.rowComman{
    padding-bottom: 120px;   
}
.rowComman p{
    padding-bottom: 28px;
}
.imgComman{
    line-height: 0;
    box-shadow: 20px 20px 40px 0 rgba(0, 0, 0, 0.16);
}

/*-------------------------------------------------------------------------------------------CONTENT CSS END*/	
/*-------------------------------------------------------------------------------------------CLIENTS CSS START*/	
.sectionClients{
    padding-bottom: 130px;
}
.sectionClients h2{
    max-width: 820px;
    margin: 0px auto;
    text-align: center;
    padding-bottom: 80px;
}
.boxLogo{
    height: 149px;
    position: relative;
    border: solid 0.5px #d8d8d8;
    background-color: #ffffff;
}
.boxLogo img.logoSmall{
    max-height: 116px;
}
.boxLogo img{
    left: 50%;
    top:50%;
    max-width: 200px;
    max-height: 65px;
    transform: translate(-50%,-50%);
    position: absolute;
    opacity:0.3;
    -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out;
}
.boxLogo:hover img{
    opacity:1;
    -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out;
}
.sectionClients .row{
    margin-bottom: 40px;
}


/*-------------------------------------------------------------------------------------------CLIENTS CSS START*/	
/*-------------------------------------------------------------------------------------------TESTIMONIALS CSS START*/
.sectionTestimonials{
    padding-bottom: 80px;
}
.sliderTestimonials .carousel-item {
    background-color: transparent;
    height: auto;
}
.contentTestimonial{
    position: relative;
    max-width: 590px;
    padding-left: 10px;
}
.contentTestimonial:before{
    content: "";
    width: 41px;
    height: 35px;
    display: block;
    margin-bottom: 22px;
    background: url(../img/icon-quote.png) no-repeat center top;
}
.contentTestimonial h2 {
    font-size: 40px;
    color: #db3355;
    padding-bottom: 23px;
}
.contentTestimonial h5 {
    font-size: 16px;
    font-weight:bold;
    color:#4a4a4a;    
}
.contentTestimonial .carousel-indicators li{
	width: 10px;
	height: 10px;
    border-radius: 24px;
	background-color: #000;
}
.carousel-indicators li{
    width: 8px;
    height: 8px;
    display: inline-block;
    margin: 0px;
    border-radius: 50%;
    background-color: #cccccc;
}
html body .carousel-indicators .active{
    background-color: #000000 !important;
}
.sectionTestimonials .carousel-indicators{
    margin: 0px;
    bottom: 40px;    
    padding-left: 43.5%;
    text-align: left;
    display: initial;
}
/*-------------------------------------------------------------------------------------------TESTIMONIALS CSS END*/
/*-------------------------------------------------------------------------------------------CALL FOR ACTION CSS START*/
.sectionWecanbuild{
    font-size: 18px;
    padding: 155px 0px;
    text-align: center;
    background: url(../img/bg-callForaction.png) no-repeat center top #f4fafc;
}
.sectionWecanbuild h2{
    font-size: 44px;
    padding-bottom: 20px;
}
.sectionWecanbuild .container{
    max-width: 700px;
}
.sectionWecanbuild p{
    line-height: 27px;    
    padding-bottom: 25px;
}
/*-------------------------------------------------------------------------------------------CALL FOR ACTION CSS END*/
/*-------------------------------------------------------------------------------------------FOOTER CSS START*/
.sectionFooter {
    color: #FFF;
    font-size: 18px;
    padding: 90px 0px 50px 0px;
    background-color: #000;
    overflow-x: hidden;
}
.sectionFooter a{
    color: #FFF;
}
.sectionFooter a:hover{
    text-decoration: none;
    color: #db3355;
}
.sectionFooter ul.menuService a:hover, .sectionFooter ul.listSocialMedia a:hover{
    color: #fff;
}
.sectionFooter ul{
    list-style: none;
}
ul.listContactDetail{
    text-align: right;
}
ul.listContactDetail li:last-child{
    padding-top: 35px;
}
.boxMap{
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: 8px;
    max-width: 420px;
    width: 100%;
    line-height: 0;
    display: inline-block;
}
ul.listContactDetail li address a:hover{
    color: #fff;
}
ul.listContactDetail li address{
    max-width: 420px;
    display: inline-block;
}

.boxCopyright{
    color: #9b9b9b;
    padding-top: 120px;
}
ul.listSocialMedia{
    font-size: 20px;
}
ul.listSocialMedia li{
    display: inline-block;
}
ul.listSocialMedia li + li{
    margin-left: 17px;
}
ul.listSocialMedia li a{
    color: #9b9b9b;
    opacity: 0.6;
}
ul.listSocialMedia li a:hover{
    opacity: 1;
    color: #FFF;
}
ul.menuQuicklinks{
    font-size: 24px;
    font-weight: bold;
}
ul.menuQuicklinks li + li{
    padding-top: 25px;
}
ul.menuService{
    font-size: 24px;
    font-weight: normal;
}
ul.menuService li + li{
    margin-top: 27px;
}
ul.menuService li a{
    color: #9b9b9b;
}

/*-------------------------------------------------------------------------------------------FOOTER CSS END*/
/*-------------------------------------------------------------------------------------------ABOUT PAGE CSS START*/
.boxBanner{
    height: calc(100vh - 88px);
    margin-top: 88px;
    position: relative;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center 88px;
}
.bannersolution{
    background-image: url(../img/banner-solution.jpg);
    background-size: cover;
}
.bannerAbout{
    background-image: url(../img/banner-about.jpg);
    background-size: 80%;
    background-position: center 90% !important; 
    background-color: #ffe701;
}
.boxBanner img{
    width: 100%;
    object-fit: cover;
}
.sectionAboutFirst{
    padding: 130px 0px 95px 0px;
}
.sectionAboutFirst h2{
    padding-bottom: 30px;
}
.sectionAboutFirst h6{
    font-size: 18px;
    color: #4a4a4a;
    line-height: 1.5;
    margin-bottom: 30px;
}
.sectionAboutFirst .container{
    max-width: 1000px;
}
.sectionAboutFirst p{
    font-size: 20px;
    color: #000000;
    /* line-height: 2.1;
    font-weight: 600; */
}
.sectionTeam{
    padding-bottom: 100px;
}
.boxTeamMember .teamContent{
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
}

.boxTeamMember .teamContent .teamHover{
    position: absolute;
    width: 100%;
    height: 100%;
    color: #FFF;
    font-size: 16px;
    top:-100%;
    padding: 60px 40px 20px 40px;
    -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
    line-height: 1.44;
    color: #ffffff;
    background-color: #93c453;
}
.btnInfo, .btnclose{
    display: none;
}
.boxTeamMember .teamContent.show .teamHover{
    top:0px;
}
@media (min-width: 991px){  
    .boxTeamMember:hover .teamContent .teamHover{
        top:0px;
    } 
}
.boxTeamMember h4{
    font-size: 24px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 5px;
}
.boxTeamMember h6{
    font-size: 18px;
    color: #4a4a4a;
    line-height: 1.5;
}
.boxTeamMember .teamContent .imgClient{
    height: 395px;
    width: 100%;
    object-fit: cover;
}
.sectionTeam .row + .row{
    margin-top: 55px;
}
/*-------------------------------------------------------------------------------------------ABOUT PAGE CSS END*/
/*-------------------------------------------------------------------------------------------CLIENT PAGE CSS START*/
.navbarNormal{
    top:0px;
}
.clientBanner{
    font-size: 18px;
    color: #9b9b9b;
    text-align: center;
    background-color: #000;
    padding: 200px 0px 100px 0px;
    margin-bottom: 100px;
}
.clientBanner h2{
    color: #FFF;
    padding-bottom: 20px;
}
/*-------------------------------------------------------------------------------------------CLIENT PAGE CSS END*/
/*-------------------------------------------------------------------------------------------BRAND PAGE CSS START*/
.sectionSolution {
    font-size: 18px;
    line-height: 1.5;
    padding: 130px 0px;
}
.sectionSolution p{
    padding-bottom: 35px;
}
.sectionSolution .container{
    max-width: 870px;
}
ul.listSimple{
    color: #000;
    list-style: none;
    font-size: 20px;
    font-weight: 600;
}
ul.listSimple li {
    padding-left: 30px;
    background: url(../img/icon-arrow.png) no-repeat 0px 9px;
}
ul.listSimple li + li{
    margin-top: 9px;
}
.sectionSolutionContent{
    font-size: 18px;
}
.sectionSolutionContent h3{
    font-size: 36px;
}
.vimeo{
    width: 100%;
    line-height: 0;
    height: 355px;
}
.boxNoodles{
    font-size: 16px;
}
.boxNoodles p{
    padding-bottom: 17px;
}
.boxNoodles .btnView{
    margin-top: 10px;
}

.btnView{
    padding-right: 25px;
    color: #db3355;
    background: url(../img/btn-arrow.png) no-repeat right 2px;
}
.btnView:hover{
    color: #000;
    text-decoration: none;
}
.sectionMoreSolutions{
    text-align: center;
    padding-bottom: 80px;
}
.sectionMoreSolutions h3{
    font-size: 36px;
    padding-bottom: 35px;
}
.sectionMoreSolutions .imgComman{
    position: relative;
    top:0px;
    -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out;
}
.sectionMoreSolutions .imgComman:hover{
    top:-20px;
}

.sectionSolutionContent .imgComman {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }
  
  .sectionSolutionContent .imgComman iframe,
  .sectionSolutionContent .imgCommanobject,
  .sectionSolutionContent .imgComman embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .msgThankYou{
      text-align: center;
      max-width: 300px;
      margin: 0px auto;
      font-size: 18px;
      padding-top: 45px;
      min-height: 415px;
  }
  .iconHand{
      width: 130px;
      height: 130px;
      display: table;
      line-height: 130px;
      border-radius: 50%;
      background-color: #fdf5f6;
      margin: 0px auto 30px auto;
    }

/*-------------------------------------------------------------------------------------------BRAND PAGE CSS START*/


/*-------------------------------------------------------------------------------------------RESPONSIVE CSS START*/


@media (max-width: 1366px){  
    .bannerAbout{ background-position:center 67% !important;}
}
@media (max-width: 1200px){
    .addleftSpacing{ padding-left: 40px;}
    .addrightSpacing{ padding-right: 40px;}
}
@media (max-width: 1080px){
    .sectionWecanbuild{ padding:120px 0px;}
    .sectionFooter{ padding:50px 0px 35px 0px;}
    ul.menuService, ul.menuQuicklinks{ font-size: 20px; }
    .sectionFooter{ font-size: 14px;}
    .boxCopyright{ padding-top: 50px;}
    ul.menuService li + li{ margin-top: 18px;}
    ul.menuQuicklinks li + li{ padding-top: 18px;}
    .sectionFirst{ padding: 80px 0px 30px 0px;}
    .boxTeamMember .teamContent .teamHover{ padding: 25px;}
    .sectionTestimonials .carousel-indicators{ bottom: 0px; padding-left: 44%;}
}

@media (max-width: 990px){
    h2{ font-size: 44px;}
    .btnDown{ bottom: 30px;}
    .sectionFirst .container, .container, .sectionWecanbuild .container, .sectionAboutFirst .container{ max-width: 630px;}
    .rowComman{ text-align: center; padding-bottom: 80px;}
    .rowComman .imgComman{ margin-bottom: 35px;}
    .addleftSpacing, .addrightSpacing{ padding-left: 0px; padding-right: 0px;}
    .sectionClients h2{ padding-bottom: 45px;}
    .sectionClients .row{ margin-bottom: 22px;}
    .sectionClients .pt-5{ padding-top: 5px !important;}
    .sectionClients{ padding-bottom: 110px;}
    .contentTestimonial{ padding-left: 0px; max-width: 100%; text-align: center;}
    .contentTestimonial:before{ display: table; margin-left: auto; margin-right: auto; }
    .sectionTestimonials .carousel-indicators{ padding-left: 0px; text-align: center; bottom: -15px;}
    .sectionWecanbuild h2{ font-size: 32px; }
    ul.listContactDetail li:last-child{ padding-top: 20px;}
    .boxMap iframe{ height: 90px; }
    ul.menuQuicklinks { font-size: 16px; margin-top: 30px;}
    ul.menuQuicklinks li{ display: inline-block; }
    ul.menuQuicklinks li + li{ padding-top: 0px; padding-left: 13px;}
    .sectionSolution{ padding: 80px 0px;}
    .sectionSolution .container{ max-width: 630px;}
    .sectionSolutionContent .rowComman{ text-align: left;}
    .vimeo{ height: 335px;}
    .boxNoodles .btnView{ margin-top: -23px; float: right;}
    .sectionMoreSolutions .row [class*="col-"] + [class*="col-"]{ margin-top: 50px;}
    .sectionAboutFirst{ padding: 80px 0px 40px 0px;}
    .sectionAboutFirst p{ line-height: 30px;}
    .boxTeamMember h4{ font-size: 20px;}
    .boxTeamMember .teamContent{ margin-bottom: 20px;}
    .sectionTeam .row + .row{ margin-top: 0px;}
    .sectionTeam .row [class*="col"]{ padding: 25px 15px 15px 15px;}
    .boxTeamMember .teamContent .teamHover{ padding: 65px 25px 15px 25px;}
    .btnInfo, .btnclose{   display: block;}
}
@media (max-width: 854px){
    .bannersolution{ background-image: url(../img/banner_brand_solution_ipad.jpg); }
}

@media (max-width: 767px){
    .backtotop{ display: none !important;}
    .navbar{ padding: 13px 15px;}
    #logo{ max-width: 85px; margin-bottom:0px;}
    .navbar-toggler{ padding: 0px 10px; color: #000 !important; background-color: transparent !important; font-size: 22px; box-shadow: none;}
    .navbar-toggler.collapsed .fa-bars:before{ content: "\f0c9"; font-family: "Font Awesome 5 Free"; }
    .navbar-toggler .fa-bars:before{ content: "\f00d"; font-family: "Font Awesome 5 Free"; }
    .navbar-nav .nav-item{ padding: 0px 25px;}
    .navbar-nav .nav-link{ height: 56px; line-height: 56px; padding: 0px 0px !important; border-bottom: solid 1px rgba(169, 183, 205, 0.37);  }
    .navbar-nav .nav-item:hover{ background-color:#fdf5f6;}
    .navbar-nav .nav-item:hover .nav-link { color: #db3355;}
    .navbar-nav { padding: 10px 0px 20px 0px; box-shadow: 0 15px 44px 0 rgba(169, 183, 205, 0.37);  margin: 10px -15px -15px -15px !important;}
    .navbar-nav .btn{ height: 40px; line-height: 40px; width: 100%; margin-top: 20px; margin-left: 0;}
    .boxBanner{ height: calc(100vh - 74px); margin-top: 74px;}
    .show-Mobile{ display: block;}
    .nav-link i{ display: none;}
    .dropdown.show .dropdown-toggle i::before{ content: "\f077"; font-weight: 900; font-family: "Font Awesome 5 Free";}
    .dropdown-toggle{ color: #000 !important; position: absolute; top:9px; text-align: center; right: 25px; width: 40px; height: 40px; font-size: 13px; line-height: 40px; }
    .dropdown-toggle::after{ display: none;}
    .dropdown-menu{ margin: 0px -25px;     border: none;}
    .dropdown-menu li{ margin: 0px 0px 0px 30px;}
    .dropdown-menu .dropdown-item{ padding: 9px 0px;}
    .dropdown-menu li:last-child{ border-bottom: solid 1px rgba(169, 183, 205, 0.37);}
    .bannerAbout{ background-size: 100%; background-position:center center !important; }
}

@media (max-width: 600px){
    .container{ padding-left: 25px; padding-right: 25px;}
    h3{ font-size: 28px;}
    input[type=submit], input[type=button], input[type=reset], button, .btn{ height: 40px; line-height: 40px; font-size: 14px;}
    body{ font-size: 14px; line-height: 23px;}
    .sectionFirst{ font-size: 16px; line-height: 25px;}
    h2{ font-size: 32px; padding-bottom: 25px;}
    .sectionFirst{ padding: 50px 0px 10px 0px;}
    .sectionFirst p{ padding-bottom: 30px;}
    .rowComman{ padding-bottom: 70px;}
    .sectionClients{ padding-bottom: 95px;}
    .contentTestimonial h2{ font-size: 28px;}
    .sectionTestimonials{ padding-bottom: 110px;}
    .sectionWecanbuild{ padding: 95px 0px;}
    .sectionClients h2{ padding-bottom: 25px;}
    .sectionSolution .container,  .sectionMoreSolutions .container, .container{ max-width: 400px;}
    .sectionSolutionContent .container{ max-width: 100%;}
    .sectionSolution{ padding: 45px 0px 55px 0px;}
    .boxBanner img{ height: 650px;}
    .sectionSolutionContent .rowComman{ text-align: center;}
    .sectionSolutionContent h3{ font-size: 28px;}
    .boxNoodles .btnView{ float: none; margin: 10px 0px 0px 0px; padding-top: 2px;}
    .sectionMoreSolutions{ padding-bottom: 50px;}
    .rowComman p{ font-size: 14px;}
    .sectionSolution{ font-size: 16px;}
    .sectionTeam .row [class*="col"], .sectionClients .row [class*="col"]{  flex: 0 0 100%;  max-width: 100%;}
    .sectionClients .row [class*="col"] + [class*="col"]{ margin-top: 20px;}
    .clientBanner{ padding: 140px 0px 60px 0px; margin-bottom: 50px;}
    .sectionAboutFirst .container{ max-width: 400px;}
    .sectionAboutFirst p{ font-size: 18px;}
    .sectionAboutFirst{ padding: 50px 0px 20px 0px;}
    .boxBanner{ height: calc(100vh - 66px); margin-top: 66px; background-position: center 66px;}
    .bannersolution{
        background-image: url(../img/banner_brand_solution_mobile.jpg);
    }
    ul.menuService, ul.menuQuicklinks{ text-align: center;}
    ul.listContactDetail{ text-align: center; padding-top: 45px;}
    ul.menuService{ font-size: 18px;}
    ul.menuQuicklinks li + li{ padding-left: 32px;}
    .boxCopyright{ text-align: center;}
    ul.listSocialMedia{ padding-bottom: 40px;}
    .boxTeamMember .teamContent .imgClient{ height: auto;}
    .sectionFooter .row [class*="col"]{ flex: 0 0 100%;  max-width: 100%; }
    .text-sm-right{ text-align: center !important;}
    ul.listContactDetail li address, .boxMap{ max-width: 290px;}
}
@media (max-width: 384px){
    h2{ font-size: 27px;}
    h3{ font-size: 24px;}
  
}