body {
	margin: 0;
	display: block;
	font-family: 'Roboto', sans-serif;
}

a
{
	text-decoration: none
}

.banner-main {
    position: relative;
    overflow: hidden;
}
.background {
    position: relative;
    height: 750px;
    width: 100%;
}
.background img {
  height: 100%;
  width: 100%;
}

.background .layer {
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.background .layer-bg {
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    height: 120px;
    width: 100%;
}

.banner-main .header-bg {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 1;
}

.container {
	margin: 0 auto;
	max-width: 1170px;
	overflow: hidden;
}

.header-bg .header {
    padding: 1.3em 0em;
    overflow: hidden;
}

.header-bg .header {
	padding: 30px;
}

.header .logo {
	float: left;
}

.header .logo a {
    display: block;
}

a {
    color: #555;
    text-decoration: none;
}

.nav {
	float: right;
	margin-top: 0.82em;
}

.nav ul {
	padding: 0px;
	margin: 8px 0;
	list-style: none;
}

.nav ul li {
	display: inline-block;
}

.nav ul li a {
	  color: #fff;
    display: block;
    font-size: 17px;
    padding: 9px 0;
    margin: 0 12px;
    position: relative;
		text-decoration: none;
}

.nav ul li a:hover,
.nav ul li a.active  {
  border-bottom: solid 3px #BB141A;
}

.header-bg .header {
  position: relative;
  overflow: hidden;
}

.header-bg .header:after {
  border-bottom: 3px solid #999999;
  width: 100%;
  position: absolute;
}

.banner-main .content {
	padding: 13% 0%;
	overflow: hidden;
}

.banner-main .content h2 {
    color: #fff;
    font-size: 43px;
    font-weight: 300;
    text-align: center;
    margin: 80px auto 65px auto;
    width: 83%;
}

.banner-main .content .btn-group {
	overflow: hidden;
	text-align: center;
	display: inherit;

}

.banner-main .btn-group .left-link {
    background-color: #BB141A;
    display: inline-block;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    margin: 2px 0 2px 0;
    text-align: center;
    padding: 12px 4%;
    vertical-align: middle;
		text-decoration: none;
	}

.banner-main .btn-group .left-link:hover {
    background: rgba(187, 20, 26, 0.7);
}

.banner-main .btn-group .right-link {
    background-color: rgba(187, 20, 26, 0.7);
    display: inline-block;
    color: #FFF;
    font-size: 14px;
    text-transform: uppercase;
    margin: 2px 0% 2px 1%;
    text-align: center;
    padding: 12px 4%;
}

.banner-main .btn-group .right-link:hover {
    background-color: #BB141A;
}

.design-block {
	overflow: hidden;
	border-bottom: 1px solid #e6e7eb;
}

.icon {
	overflow: hidden;
	padding: 70px 0px 20px 0px;
}

.icon .design-icon {
    width: 17%;
    margin: 3% 0% 3% 6%;
    float: left;
    text-align: center;
}

.icon .design-icon img {
    display: block;
    margin: 0 auto;
}

.icon .design-icon strong {
    display: block;
    font-size: 17px;
    padding: 8% 0 6% 0;
    position: relative;
}

.icon .design-icon strong:before {
	position: absolute;
    bottom: -6;
    left: 0%;
    content: "";
    border-bottom: 3px solid #888888;
    width: 25%;
    transform: translateX(145%);
}

.icon .design-icon p {
    display: block;
    font-size: 14px;
    color: #999999;
    margin: 0px;
    padding: 20px 0px 10px 0px;
    line-height: 20px;
}

.icon .design-icon:hover {
	color: #bb141a;
}

.history {
	overflow: hidden;
	padding: 100px 0px 50px 0px;
}

.history .img-box {
    margin: 3% 0% 3% 5%;
    float: left;
}

.history .history-box {
    margin: 3% 0% 3% 7%;
    float: right;
    width: 50%;
}

.history .history-box h2 {
	font-size: 35px;
	color: #6a6a6a;
	margin: 0px 0px 30px 0px;
	padding-left: 35px;
	border-left: 5px solid #e74c3c;
}

.history .history-box p {
    font-size: 17px;
    color: #999999;
    margin: 0px 0px 30px 0px;
    line-height: 20px;
}

.history .history-box .da-link {
    background-color: #e74c3c;
    display: inline-block;
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 12px 4%;
    vertical-align: top;
		text-decoration: none;
}

.history .history-box .da-link:hover {
    background: rgba(187, 20, 26, 0.7);
}

.block {
	overflow: hidden;
  display: flex;
}

.left-block {
	background-color: #202020;
	width: 55%;
	text-align: right;
	float: left;
}

.left-block .container {
	width: 86%;
}

#services {
	overflow: hidden;
	padding: 70px 0 0 0;
}

#services .ser-box {
	 margin: 0% 0% 5% 0%;
}

#services .ser-box strong a:hover {
	color: #bb141a;
}

#services h2 {
	font-size: 35px;
	color: #f4f5f9;
	padding-right: 35px;
	border-right: 5px solid #e74c3c;
	margin: 0 0 30px 0;
}

#services .ser-box strong a {
	font-size: 19px;
	color: #e74c3c;
	padding-bottom: 20px;
	text-decoration: none;
}

#services .ser-box p {
	font-size: 15px;
	color: #999999;
	margin: 20px 0 20px 0;
}

.right-block {
	width: 45%;
	float: right;
}

.right-block .ser-img {
	position: relative;
}

.right-block .ser-img img {
  width: 100%;
  height: 538px;
}

.right-block .ser-img .layer-bg {
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.integration-box {
    background-color: #f4f5f9;
    overflow: hidden;
    padding: 100px 0px 50px 0px;
    position: relative;
}

.info-box {
    text-align: center;
    vertical-align: middle;
    padding-bottom: 40px;
}

.info-box i {
	color: #e74c3c;
	position: relative;
    padding: 0 10px;
    background: #f4f5f9
}

.info-box h2 {
	font-size: 36px;
	color: #6c6c6c;
	text-align: center;
	margin: 0;
	padding-bottom: 10px;
	position: relative;
}

.info-box h2:after {
    position: absolute;
    left: 50%;
    content: "";
    border-bottom: 2px solid #888888;
    width: 10%;
    transform: translateX(-50%);
    top: 112%;
}

.info-box p {
    color: #999999;
    font-size: 17px;
    text-align: center;
    margin: 5px auto 0px;
    line-height: 20px;
    width: 68%;
}

.col-info {
    overflow: hidden;
}

.integration-box .logo-box {
	  overflow: hidden;
	  padding: 10px 0px 20px 0px;
}

.integration-box .logo-box .grid-box {
	  width: 17%;
    margin: 3% 0% 3% 6%;
    float: left;
    text-align: center;
}

.integration-box .link-bg  {
    text-align: center;
}

.integration-box .link-bg a {
    background: transparent;
    display: inline-block;
    color: #e74c3c;
    font-size: 18px;
    text-align: center;
    padding: 12px 4%;
    vertical-align: top;
    border: 1px solid #e74c3c;
		text-decoration: none;
}

.integration-box .link-bg a:hover {
  color: rgba(187, 20, 26, 0.7);
  border: 1px solid rgba(187, 20, 26, 0.7);
}

.touch-box {
    overflow: hidden;
    padding: 100px 0px 50px 0px;;
}

.touch-box .info-box i {
	background-color: #fff;
}

.touch-box .col-info {
	overflow: hidden;
  display: flex;
  justify-content : space-between; // horizontal alignment
  align-content   : center; // vertical alignment
}

.address-box {
	overflow: hidden;
}

.touch-box .address-box {
	width: 478px;
	background-color: #f4f5f9;;
	float: left;
  margin-top: 45px;
  margin-right: 30px;
}

.touch-box .address-box .col-address {
	text-align: left;
	padding: 15% 5% 5% 10%;
	overflow: hidden;
}

.touch-box .col-address strong {
	color: #bb141a;
	font-size: 27px;
  display: block;
}

.touch-box .col-address  {
  padding: 0 0 0 0px;
  margin: 10px 0;
}

.touch-box .locate-1 {
  top: 0;
}

.touch-box .locate-1 img {
  width: 25px;
  color: #999999;
  float: left;
  bottom: 0;
  padding-top: 19px;
}

.touch-box .locate-2 {
  overflow: hidden;
}

.touch-box .locate-2 p {
	color: #999999;
	font-size: 16px;
	line-height: 25px;
	margin: 20px 0 0px 5px;
}

.touch-box .address-box .col-call {
	text-align: left;
	padding: 5% 5% 15% 10%;
	overflow: hidden;
}

.touch-box .col-call strong {
  color: #bb141a;
  display: block;
  font-size: 27px;
}

.touch-box .ph-1 img {
  width: 25px;
  color: #999999;
  float: left;
  bottom: 0;
  padding-top: 19px;
}

.touch-box .ph-2 {
  overflow: hidden;
}

.touch-box .ph-2 p {
	color: #999999;
	font-size: 16px;
	line-height: 25px;
	margin: 20px 0 0 5px;
}

.touch-box .message-box {
	width: 600px;
	overflow: hidden;
	background-color: #f4f5f9;;
	margin-top: 45px;
	float: right;
  margin-left: 30px;
}

.touch-box .message-box .column {
	padding: 11% 5% 5% 10%;
}

.touch-box .message-box .column strong {
    color: #bb141a;
    font-size: 27px;
}

.touch-box .message-box .column form {
    color: #999999;
    padding: 0 0 5% 0%;
    margin: 0;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    width: 90%;
}

.touch-box .message-box  .column #fname {
    display: block;
    margin: 5% 0 1% 0;
    width: 90%;
    border-left: 0 solid;
    border-top: 0 solid;
    border-right: 0 solid;
    padding-left: 10px;
    border-bottom-width: 1px;
    height: 40px;
    font-size: 15px;
    background: #fff;
    text-align: left;
    font-style: italic;
}


.touch-box .message-box  .column #email {
    display: block;
    margin: 5% 0 1% 0;
    width: 90%;
    border-left: 0 solid;
    border-top: 0 solid;
    border-right: 0 solid;
    padding-left: 10px;
    border-bottom-width: 1px;
    height: 40px;
    font-size: 15px;
    background: #fff;
    text-align: left;
    font-style: italic;
}

.touch-box .message-box  .column #phone {
    display: block;
    margin: 5% 0 1% 0;
    width: 90%;
    border-left: 0 solid;
    border-top: 0 solid;
    border-right: 0 solid;
    padding-left: 10px;
    border-bottom-width: 1px;
    height: 40px;
    font-size: 15px;
    background: #fff;
    text-align: left;
    font-style: italic;
}

.touch-box .message-box  .column textarea {
    display: block;
    margin: 5% 0 1% 0;
    width: 90%;
    border-left: 0 solid;
    border-top: 0 solid;
    border-right: 0 solid;
    padding-left: 10px;
    border-bottom-width: 0px;
    font-size: 15px;
    min-width: 50%;
    max-height: 40%;
    max-width: 90%;
    min-height: 20%;
    font-style: italic;
}

.touch-box .message-box  .column .da-link  {
    background-color: #e74c3c;
    display: inline-block;
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 12px 4%;
    margin: 2% 0 2% 0;
}


.touch-box .message-box  .column input:hover {
   background: rgba(187, 20, 26, 0.7);
}

.touch-box .message-box .column .loader {
	margin-left: 3%;
	display: inline-block;
}

.footer {
    background-color: #202020;
    height: 40px;
    padding: 10px 0 10px 0;
    overflow: hidden;
}

.footer .wrap {
    width: 70%;
    margin: 0px auto;
}

.footer .wrap .copy {
	text-align: center;
	color: #999999;
}

.footer .wrap .copy a {
	color: #e74c3c;
}

.footer .wrap .copy a:hover {
	color: #bb141a;
}

  .nav .tog-btn i {
  	display: none;
}







.background-2 {
    position: relative;
    height: 500px;
}

.background-2 img {
  width: 100%;
  height: 100%;
}

.background-2 .layer-2 {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.header-bg .text .col-text {
  overflow: hidden;
}

.header-bg .text-one {
  padding: 100px 0 56px 0;
  text-align: center;
}

.header-bg .text-one p {
  color: #fff;
  font-size: 35px;
  margin: 0;
  margin-bottom: 12px;
}

.header-bg .text-sec p {
  color: #fff;
  font-size: 55px;
}

.header-bg .about-banner {
  background-color: rgba(187, 20, 26, 0.7);
    bottom: 0;
    width: 100%;
    padding: 20px 0 10px 0;
    z-index: 1;
}

.header-bg .about-banner .about-banner-block {
  padding: 0;
}

.header-bg .about-banner .about-banner-section {
    display: table-cell;
    width: 25%;
    vertical-align: middle;
    padding: 0 4%
}

.header-bg .about-banner-section p {
    color: #fff;
    margin: 0;
}

.header-bg .about-banner-section p strong {
    font-weight: bold;
    font-size: 40px;
    display: table-cell;
    vertical-align: middle;
}

.header-bg .about-banner-section p span {
  font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    display: table-cell;
    vertical-align: middle;
    padding-left: 10%;
    line-height: 15px;
}

.about-bg {
  text-align: center;
  overflow: hidden;
  padding: 100px 0 50px 0;
}

.about-bg .wrape {
    width: 70%;
    margin: 0 auto;
}

.about-bg .wrape h1 {
  color: #6a6a6a;
  font-size: 36px;
    position: relative;
    margin: 0;
    padding: 20px 0 5px 0;
}


.about-bg .wrape i {
    color: #e74c3c;
    position: relative;
    padding: 0 10px;
    background: #f4f5f9;
    background-color: #fff;
}

.about-bg .wrape h1:after {
  position: absolute;
    left: 50%;
    content: "";
    border-bottom: 2px solid #888888;
    width: 16%;
    transform: translateX(-50%);
    top: 110%;
}

.about-bg .wrape p{
  font-size: 16px;
  color: #6a6a6a;
  margin: 2% 0 2% 0;
}

.grid {
    overflow: hidden;
    padding: 30px 0px 50px 0px;
}

.grid .content {
  color: #999999;
  font-size: 16px;
}

.grid .content .block {
  padding: 20px 20px 20px 20px;
  width: 29%;
  display: inline-block;
  float: left;
}

.grid .content .block img {
  width: 100%;
}

.block-bg {
  overflow: hidden;
}

.block-bg .map-img {
    background-color: rgb(255, 255, 255);
    position: relative;
}

.block-bg .map-img img {
  display: block;
  width: 100%;
}

.block-bg .col-about {
  text-align: left;
  width: 70%;
  color: #f4f5f9;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px 0;
}

.block-bg .col-about h2 {
  font-size: 23px;
  margin: 40px 0 20px 35px;
  line-height: 35px;
}

.block-bg .col-about p {
  font-size: 18px;
  margin: 25px 0 20px 35px;
  line-height: 25px;
}







.background-3 {
    position: relative;
    height: 500px;
}

.background-3 img {
  width: 100%;
  height: 100%;
}

.background-3 .layer-3 {
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.col-text-2 {
    margin-left: 15px;
}

.header-bg .text .col-text-2 {
  overflow: hidden;
}

.header-bg .text-2 {
  padding: 110px 0 45px 0;
  text-align: center;
  color: #f4f5f9;
}

.header-bg .text-2 p {
  font-size: 50px;
  margin: 0;
  margin-bottom: 10px;
}

.header-bg .text-fourth {
  overflow: hidden;
}

.header-bg .text-fourth p {
  font-size: 25px;
  margin: 0;
  margin: 0 auto 5px;
  line-height: 30px;
  width: 66%;
}


.service-box {
    overflow: hidden;
    padding: 100px 0px 50px 0px;
}

.service-box .heading {
    text-align: center;
    vertical-align: middle;
    padding-bottom: 25px;
}

.service-box .heading h2 {
    font-size: 36px;
    color: #6c6c6c;
    text-align: center;
    margin: 0;
    padding-bottom: 10px;
    position: relative;
}

.service-box .heading h2:after {
    position: absolute;
    left: 50%;
    content: "";
    border-bottom: 2px solid #888888;
    width: 12%;
    transform: translateX(-50%);
    top: 113%;
}

.heading i {
    color: #e74c3c;
    position: relative;
    padding: 0 10px;
    background: #fff;
}

.service-col  {
    overflow: hidden;
}

.service-col .content-1 {
    width: auto;
    z-index: 5;
    overflow: hidden;
    border-radius: 3px;
}

.service-col .tab-1 {
    padding: 40px 40px;
    z-index: 1;
    text-align: center;
    background: #f4f5f9;
}

.service-col .tab-1 h2 {
    color: #398080;
    font-size: 35px;
    padding: 10px 0 10px 0;
}

.service-col .tab-1 p {
    font-size: 17px;
    line-height: 25px;
    text-align: left;
    margin: 0;
    color: #777;
}

.service-col .heading {
    overflow: hidden;
}


.service-col .heading h2 {
    font-size: 30px;
    color: #6c6c6c;
    text-align: left;
}

.service-col .tab-1 ul {
    padding-left: 0;
    margin: 20px 0 0 0;
    text-align: left;
    list-style: none;
}


.service-col .tab-1 ul li {
    display: inline-block;
    padding: 8px 17px;
    background: #ddd;
    margin: 2px 1px;
    border-radius: 4px;
}

.service-col .tab-1 ul i {
  font-size: 40px;
  color: #6a6a6a;;
  vertical-align: middle;
}

.service-col .content-2 {
    width: auto;
    z-index: 5;
    overflow: hidden;
    border-radius: 3px;
    margin-top: 40px;
}

.service-col .content-3 {
    width: auto;
    z-index: 5;
    overflow: hidden;
    border-radius: 3px;
    margin-top: 40px;
}

.service-col .tab-1 h3 {
    color: #398080;
}







.background-5 {
    position: relative;
    height: 500px;
}

.background-5 img {
  width: 100%;
  height: 100%;
}

.background-5 .layer-5 {
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.nav .tog-btn i {
    display: none;
}


.col-text-3 {
    margin-left: 15px;
}

.header-bg .text .col-text-3 {
  overflow: hidden;
}

.header-bg .text-3 {
  padding: 110px 0 45px 0;
  text-align: center;
  color: #f4f5f9;
}

.header-bg .text-3 p {
  font-size: 50px;
  margin: 0;
  margin-bottom: 10px;
}

.header-bg .text-fifth {
  overflow: hidden;
}
.header-bg .text-fifth p {
  font-size: 25px;
  margin: 0;
  margin: 0 auto 5px;
  line-height: 30px;
  width: 66%;
}

.info-box {
    text-align: center;
    vertical-align: middle;
    padding-bottom: 25px;
}

#map {
    display: block;
}









.background-4 {
    position: relative;
    height: 500px;
}


.background-4 img {
  width: 100%;
  height: 100%;
}

.background-4 .layer-4 {
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.header-bg .col-text-4 {
  overflow: hidden;
}
.header-bg .col-text-4 {
    padding: 145px 0 65px 0;
    text-align: center;
}

.header-bg .col-text-4 p {
    color: #fff;
    font-size: 40px;
    text-align: center;
    margin: 0px auto 33px auto;
    width: 57%;
}

.header-bg .col-text-4 p strong {
  font-size: 33px;
}

.client-box {
  overflow: hidden;
  padding: 100px 0px 50px 0px;
}

.client-bg {
  overflow: hidden;
}

.client-box .client-bg {
  text-align: center;
  vertical-align: middle;
  padding-bottom: 10px;
}

.client-box .client-bg h2 {
    font-size: 36px;
    color: #6c6c6c;
    text-align: center;
    margin: 0;
    padding-bottom: 10px;
    position: relative;
}

.client-box .client-bg h2:after {
    position: absolute;
    left: 50%;
    content: "";
    border-bottom: 2px solid #888888;
    width: 9%;
    transform: translateX(-50%);
    top: 112%;
}

.client-bg i {
    color: #e74c3c;
    position: relative;
    padding: 0 10px;
    background: #f4f5f9;
}

.client-box .client-bg i {
    background-color: #fff;
}

.client-box .logo-box-img {
    overflow: hidden;
    padding: 40px 0px;
    z-index: 1;
    text-align: center;
    background: #f4f5f9;
    margin: 4% 0 0 0;
}

.logo-box-img .grid-box-one {
    width: 23%;
    margin: 3% 0% 3% 8%;
    float: left;
    text-align: center;
}

.logo-box-img .grid-box-one img {
  width: 200px;
  height: 200px;
}





@media only screen and (max-width: 1200px) {
  .history .history-box {
    margin: 3% 0% 3% 1%;
    float: right;
    width: 50%;
  }

  .history .img-box {
    margin: 3% 1% 3% 1%;
    float: left;
  }
}

@media only screen and (max-width: 1177px) {
  .integration-box .logo-img {
    margin: 0 9px 20px 9%;
    display: inline-block;
    vertical-align: middle;
    }

   .touch-box .address-box {
    width: 40%;
    margin-left: 5%;
    float: left;
    }

   .touch-box .message-box {
    width: 50%;
    margin-right: 5%;
    float: right;
   }
}


@media only screen and (max-width: 1152px) {
   .banner-main .content h2 {
    width: 80%;
   } 

   .history .img-box img {
    width: 80%;
  }
}


@media only screen and (max-width: 991px) {
  .history .history-box {
    margin: 3% 0% 3% 1%;
    float: left;
    width: 90%;
  }

  .history .img-box img {
    width: 100%;
  }

  .history .img-bo {
    text-align: center;
  }

  .header-bg .text-one p {
    font-size: 30px;
  }

  .header-bg .text-sec p {
    font-size: 40px;
  }

  .header-bg .text-one {
    padding: 130px 0 55px 0;
  }
}

@media only screen and (max-width: 982px) {
   .integration-box .logo-img {
    margin: 0 9px 20px 9%;
    }

    .client-box .client-bg h2:after {
    width: 12%;
   }
}

@media only screen and (max-width: 991px) {
	.header-bg .header {
    width: 90%;
	}

	.header .logo img {
		width: 80%;
	}

	.nav ul li a {
    font-size: 15px;
	}

  .banner-main .content {
    padding: 18% 0 8%;
  }
}

@media only screen and (max-width: 910px) {
  .icon .design-icon strong:before {
    left: 0%;
    transform: translateX(145%)
    }

    .info-box h2:after {
    width: 15%;
  }

  .service-box .heading h2:after {
    width: 15%;
  }
}


@media only screen and (max-width: 895px) {
   .integration-box .logo-img {
    margin: 0 9px 20px 5%;
    }
}

@media only screen and (max-width: 850px) {
  .nav {
    position: relative;
    }

  .nav .tog-btn  {
    float: right;
    margin: 5px 20px 0px;
    font-size: 40px;
   }

   .nav .tog-btn i {
    color: #fff;
    display: block;
   }

   .nav ul {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0px;
    z-index: 1;
    display: none;
   }

    div.nav {
    float: none;
   }

    .nav li {
    margin: 0px;
    width: 300px;
    display: none;
   }

   .nav ul li a {
    text-align: center;
    padding: 12px 0 13px;
   }

   .nav ul li a {
    width: 100%;
    text-align: center;
    padding: 12px 0 12px;
    background-color: #1e2329;;
   }

   .icon .design-icon p {
    font-size: 14px;
   }

   .history .img-box {
    margin: 3% 0% 3% 20%;
   }

   .history .history-box {
    margin: 3% 0% 3% 2%;
    width: 94%;
   }

   .history .history-box p {
    width: 80%;
   }

   .integration-box .logo-box .grid-box {
    width: 39%;
  }

   .header-bg .text-3 p {
    font-size: 46px;
  }

  .header-bg .text-fifth p {
    font-size: 20px;
  }

  .header-bg .text-2 p {
    font-size: 43px;
  }

  .header-bg .text-fourth p {
    font-size: 20px;
  }

  .header-bg .col-text-4 p {
    font-size: 34px;
    width: 80%;
  }

  .header-bg .col-text-4 p strong {
    font-size: 30px;
  }

  .banner-main .content {
    padding: 23% 0 8%;
  }

  .banner-main .content h2 {
    width: 100%;
    font-size: 40px;
  }

  .header-bg .text-one {
    padding: 138px 0 55px 0;
  }
}

@media only screen and (max-width: 802px) {
   .integration-box .logo-img {
    margin: 0 9px 20px 14%;
    width: 30%;
    }

    .client-box .client-bg h2:after {
    width: 15%;
   }
}

@media only screen and (max-width: 780px) {
  .icon .design-icon strong:before {
    left: 45;
    width: 30%;
    }

   .touch-box .col-info .col-address {
    padding: 15% 0 5% 10%;
    }

    .touch-box .col-info .col-call {
    padding: 5% 0 15% 10%;
    }

    .touch-box .col-address strong {
    font-size: 22px;
    }

    .touch-box .col-call strong {
    font-size: 22px;
    }

    .touch-box .message-box .column strong {
    font-size: 22px;
   }

   .icon .design-icon strong:before {
    left: 30%;
    transform: translateX(50%);
    width: 20%
   }

    .icon .design-icon {
    width: 41%;
   }

   .banner-main .content h2 {
    font-size: 35px;
    margin: 0px auto 30px auto;
    width: 95%;
  }

  .service-box .heading h2:after {
    width: 18%;
  }

  .logo-box-img .grid-box-one {
    width: 30%;
    margin: 3% 0 3% 2%;
  }

  .banner-main .content {
    padding: 40% 0 10%;
  }
}


@media only screen and (max-width: 710px) {
  .touch-box .locate-2 p {
    font-size: 14px;
  }

  .touch-box .locate-1 img {
    width: 23px;
  }

  .touch-box .ph-2 p {
    font-size: 14px;
  }

  .touch-box .ph-1 img {
    width: 23px;
  }
}


@media only screen and (max-width: 660px) {
  .icon .design-icon {
    width: 88%;
    margin: 3% 0% 3% 6%;
   }

   .icon .design-icon p {
    font-size: 15px;
  }

  .integration-box .logo-img {
    margin: 0 9px 20px 10%;
  }
  .icon .design-icon strong:before {
    left: 36%;
    transform: translateX(115%);
    width: 8%;
  }

  .info-box h2:after {
    width: 22%;
  }

  .service-box .heading h2:after {
    width: 22%;
  }

  .logo-box-img .grid-box-one {
    width: 44%;
    margin: 3% 0 3% 3%;
  }

  .banner-main .content {
    padding: 45% 0 10%;
  }

   .touch-box .address-box {
    width: 70%;
    margin: 10% 10% 5% 15%;
    float: left;
  }

  .touch-box .message-box {
    width: 80%;
    margin: 5% 5% 5% 10%;
    float: left;
  }

  .touch-box .col-info { 
    display: inherit;
  }

  .touch-box .locate-2 p {
    font-size: 18px;
  }

  .touch-box .locate-1 img {
    width: 25px;
  }

  .touch-box .ph-2 p {
    font-size: 18px;
  }

  .touch-box .ph-1 img {
    width: 25px;
  }

  .touch-box .col-address strong {
    font-size: 25px;
  }

  .touch-box .col-call strong {
    font-size: 25px
  }

  .header-bg .text-one p {
    font-size: 26px;
  }

  .header-bg .text-sec p {
    font-size: 37px;
  }

  .header-bg .text-one {
    padding: 147px 0 55px 0;
  }

}


@media only screen and (max-width: 600px) {
    .icon .design-icon strong:before {
    left: 36%;
    transform: translateX(115%);
    width: 8%;
  }

   .history .img-box {
    margin: 3% 0% 3% 20%;
   }

   .history .img-box img {
    width: 80%;
   }

    .touch-box .col-info .address-box {
    width: 75%;
    margin-left: 12%;
   }

   .touch-box .message-box {
    width: 90%;
    margin-left: 5%;
   }

   .touch-box .col-address strong {
    font-size: 25px;
  }

  .touch-box .col-address p {
    font-size: 17px;
  }

  .touch-box .col-call strong {
    font-size: 25px;
  }

  .touch-box .col-call p {
    font-size: 17px;
  }

  .touch-box .message-box .column strong {
    font-size: 25px;
  }

  .client-box .client-bg h2:after {
    width: 20%;
  }

  .nav .tog-btn {
    margin: 5px 8px 0px;
  }

  .header-bg .header {
    padding: 30px 20px;
  }
}

@media only screen and (max-width: 570px) {
   .icon .design-icon strong:before {
    left: 215;
    width: 10%;
    bottom: -3;
    position: fixed;
   }

   .icon .design-icon p {
    padding: 0 0 10px 0;
   }

   .icon .design-icon strong {
    font-size: 18px;
    padding: 8% 0 3% 0;
   }

   .header-bg .text-3 p {
    font-size: 43px;
  }

   .header-bg .text-fifth p {
    font-size: 16px;
    width: 100%;
  }

  .header-bg .text-2 p {
    font-size: 40px;
  }

  .header-bg .text-fourth p {
    font-size: 17px;
     width: 100%;
  }

  .service-col .tab-1 h2 {
    font-size: 32px;
  }

  .header-bg .col-text-4 p {
    font-size: 30px;
    width: 90%;
  }

  .header-bg .col-text-4 p strong {
    font-size: 28px;
  }

   .header .logo img {
    width: 85%;
  }

  .nav .tog-btn {
    font-size: 40px;
  }

  .banner-main .content h2 {
    font-size: 32px;
  }

  .banner-main .content {
    padding: 55% 0 10%;
  }

  .header-bg .text-one {
    padding: 144px 0 55px 0;
  }
}


@media only screen and (max-width: 521px) {
  .header-bg .about-banner {
    padding: 10px 0 10px 0;
  }

  .header-bg .text-one p {
    font-size: 23px;
  }

  .header-bg .text-sec p {
    font-size: 33px;
  }

  .header-bg .text-one {
    padding: 174px 0 55px 0;
  }

  .header-bg .about-banner-section p strong {
    font-size: 30px;
  }

  .header-bg .about-banner-section p span {
    font-size: 11px;
    width: 100%;
  }

  .header-bg .about-banner .about-banner-section {
    padding: 0 2%;
  }
}

@media only screen and (max-width: 510px) {
  .banner-main .content h2 {
    font-size: 30px;
    width: 100%;
   }

   .banner-main .content {
    padding: 55% 0 10%;
  }

  .banner-main .content p {
    font-size: 18px;
    width: 80%;
  }

  .history .img-box {
    margin: 3% 0% 3% 10%;
   }

   .integration-box .logo-img {
    margin: 0 9px 20px 10%;
   }

   .integration-box .logo-img img {
    width: 100%;
   }

   .nav .tog-btn {
    margin: 0px 5px 0px;
    font-size: 37px;
   }

   .header .logo {
    width: 45%;
   }

   .header .logo a {
    width: 100%;
   }

   .header .logo a img {
    width: 100%;
   }

   .info-box h2:after {
    width: 27%;
  }

  .service-box .heading h2:after {
    width: 27%;
  }

  .logo-box-img .grid-box-one {
    width: 44%;
    margin: 3% 0 3% 4%;
  }
}

@media only screen and (max-width: 447px) {
  .banner-main .content h2 {
    font-size: 27px;
    margin: 0px auto 20px auto
   }

   .banner-main .content {
    padding: 70% 0 10%;
  }

  .banner-main .content p {
    font-size: 16px;
    margin: 0 auto 20px;
  }

  .touch-box .message-box .column input {
    margin: 5% 0 5% 0;
  }

  .touch-box .message-box .column textarea {
    margin: 5% 0 5% 0;
  }

  .touch-box .message-box .column a {
    margin: 0% 0 5% 0;
  }

  .integration-box .logo-box .grid-box img {
    width: 90%;
  }

  .integration-box .logo-box .grid-box {
    width: 40%;
  }

  .info-box h2:after {
    width: 30%;
  }

  .info-box h2 {
    font-size: 33px;
  }

  .info-box p {
    font-size: 15px;
  }

  .service-box .heading h2 {
    font-size: 34px;
  }

  .client-box .client-bg h2:after {
    width: 25%;
  }

  .logo-box-img .grid-box-one {
    width: 100%;
    margin: 3% 0 3% 0;
  }

  .logo-box-img .grid-box-one img {
    width: 230px;
    height: 230px;
  }

  .header .logo {
    width: 45%;
  }

  .nav .tog-btn {
    margin: 0px 5px 0px;
    font-size: 35px;
  }

  .header-bg .about-banner {
    display: none;
  }
}


@media only screen and (max-width: 400px) {
  .integration-box .great-box h2 {
    font-size: 30px;
  }

  .integration-box .great-box p {
    font-size: 15px;
  }

  .touch-form h2 {
    font-size: 30px;
  }

  .touch-form p {
    font-size: 15px;
  }

   .nav .tog-btn {
    margin: 0;
    font-size: 35px;
   }

   .header .logo a {
    width: 100%;
   }

   .header .logo a img {
    width: 100%;
   }

  .header-bg .text-3 p {
    font-size: 40px;
  }

  .header-bg .text-fifth p {
    font-size: 15px;
    width: 90%;
  }

   .touch-box .col-address strong {
    font-size: 22px;
  }

  .touch-box .col-address p {
    font-size: 14px;
  }

  .touch-box .col-call strong {
    font-size: 22px;
  }

  .touch-box .col-call p {
    font-size: 14px;
  }

  .touch-box .message-box .column strong {
    font-size: 22px;
  }

   .header-bg .text-2 p {
    font-size: 35px;
  }

  .header-bg .text-fourth p {
    font-size: 15px;
     width: 100%;
  }

  .service-box .heading h2:after {
    width: 32%;
  }

  .header-bg .col-text-4 p {
    font-size: 28px;
    width: 100%;
  }

  .header-bg .col-text-4 p strong {
    font-size: 22px;
  }

  .header-bg .col-text-4 {
    padding: 160px 0 70px 0;
  }

  .header .logo {
    width: 50%;
  }

  .header-bg .header {
    padding: 30px 10px;
  }

  .banner-main .content h2 {
    font-size: 28px;
    margin: 0px auto 20px auto;
  }

}


@media only screen and (max-width: 350px) {
  .integration-box .logo-box .grid-box img {
    width: auto;
  }

  .integration-box .logo-box .grid-box {
    width: 83%;
  }

  .info-box h2 {
    font-size: 32px;
  }

  .info-box p {
    font-size: 14px;
  }

  .info-box h2:after {
    width: 35%;
  }

  .service-box .heading h2 {
    font-size: 34px;
  }

  .client-box .client-bg h2:after {
    width: 110px;
  }

  .header-bg .logo {
    width: 50%;
  }
  .header-bg .header {
    padding: 30px 10px;
  }

  .banner-main .content h2 {
    font-size: 25px;
  }

  .banner-main .content {
    padding: 85% 0 10%;
  }

  .nav .tog-btn {
    font-size: 30px;
  }
}


@media only screen and (max-width: 331px) {
   .nav .tog-btn {
    margin: 0 0 0 0;
    font-size: 32px;
   }

   .header .logo a {
    width: 100%;
   }

   .service-box .heading h2:after {
    width: 36%;
  }

  .banner-main .content {
    padding: 100% 0 20%;
  }

  .banner-main .content h2 {
    font-size: 25px;
  }

  .touch-box .col-info .address-box {
    width: 80%;
    margin: 10% 3% 5% 10%;
  }

}