*{
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  line-height: 2em;
}

a{
  text-decoration: none;
}

.scroll-to-top{
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 10px;
  right: 10px;
  z-index: 10000;
}

.svg-inline--fa.fa-arrow-circle-up.fa-w-16{
  font-size: 40px;
  color:grey;
}

  .navBar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    top:0;
    transition: background-color 1s ,  max-height .5s;
    z-index: 10;
  }
@media (min-width:1200px) {
    .navBar{
      height: 70px;
      padding-top: 20px;
    }
}
  .navBarColorWhite{
  background-color: white;
}


.logoContainer{
  padding: 7px;
  margin-left: 20px;
}



.logoContainer img{
height: 50px;

}
@media (max-width:767px) {

  .logoContainer{
    margin-left: 10px;
  }

  .logoContainer img{
  height: 37px;

  }
}

.menu-list-item i{
  color: white;
}

.searchIcon{
  color: rgba(255,255,255,0.7)
}
.iconBlack{
  color:black !important;
}

.menu-list{
  display: flex;
  justify-content: flex-end;
  width: 80%;
  height: 100%;
  align-items: center;
  list-style: none;
  margin-right: 40px;
}


.menu-list>li{
  margin-right: 20px;

}
/*.menu-list:last-child{
  margin-right: 130px;
}*/

.menu-list-item{
margin-top: 10px;
height: 100%;
padding-top: 35px;
}

@media (max-width:1200px) {
  .menu-list-item{
    padding-top: 0px;
  }
}

.menu-list-item-mobile{
  max-height: 30px;
  overflow: hidden;
  margin-top: 10px;
  position: relative;
  transition: max-height 0.5s;
}
.menu-list-item-mobile img{
  width: 15px;
  height: 15px;
}

.aboutus-sub-menu{
    max-height: 300px;
}
.service-sub-menu{
    max-height: 360px;
    overflow: scroll;
}
.technology-sub-menu{
  max-height: 1000px;
  overflow: scroll;
}
.lang-sub-menu{
  max-height: 300px;
}

.menu-list-item-mobile a{
  color: white;
  text-decoration: none;
  margin-left: 10;
/*  font-family: 'Montserrat',sans-serif !important;
  text-transform: uppercase;*/
}


.menu-list-item>a{
  font-size: 12px;
  font-family:'Montserrat', sans-serif !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color:rgba(255,255,255,0.7);

}

.blackText{
  color: #000 !important;
}

.menu-list>li>i{
  color: #1e3561;
}

.submenu-small{
  display: none;
  background-color: #222222;
  width: 160px;
  position: absolute;
  text-align: center;
  left: -50px;
  top: 88px;
  z-index: 11
}
.submenu-small ul:last-child{
  padding-bottom: 10px;
}

@media (max-width:1200px) {
  .submenu-small{
    top: 33px;
  }
}
.submenu-small ul{
  list-style: none;
}




.submenu-small ul li a {
  color: #999;
  font-size: 12px;
  margin-top: 5px;
  text-decoration: none;
  font-family:'Montserrat', sans-serif !important;
  transition: color .6s;
}

.submenu-small ul li:hover .submenu-link{
  color: #fff !important;
}

.menu-list-item:hover .submenu-small{
  display: block;
}



.submenu-fullwidth{
  display: none;
  flex-direction: row;
  justify-content: space-evenly;
  background-color: #222222;
  width: 100%;
  position: absolute;
  text-align: center;
  left: 0;
  top: 90px;

}
.menu-list-item:hover .submenu-fullwidth{
  display: flex;
}


.fullwidthColumn{
  padding: 20px;
  font-family:'Montserrat', sans-serif !important;
  color: #999;
  flex-grow: 1;
  text-align: left;
}
.fullwidthColumn h5{
  font-size: 13px;
  letter-spacing: 5px;
  margin: 15px;
  color: #7c8387;
  text-transform: uppercase;
}


.fullwidthColumn ul{
  list-style: none;
  margin: 15px;
}
.fullwidthColumn ul li{
  margin-top: 10px;
  font-family: 'Open Sans',sans-serif;
  font-size: 13px;
  padding: 7px 10px 7px 0px;
  font-weight: 600;
}
.fullwidthColumn ul li a{
  color:#999;
}

.fullwidthColumn ul li:hover{
    background-color: #181818 !important;
}


.fullwidthColumn-mobile{
  margin-left: 20px;
  padding: 0;
  font-family: 'Montserrat', sans-serif !important;
  color: #999;
  flex-grow: 1;
  text-align: left;
}
.fullwidthColumn-mobile h5{
  font-size: 10px;
  letter-spacing: 5px;
  margin-left: 5px;
  color: #7c8387;
  text-transform: uppercase;
}
.fullwidthColumn-mobile ul{
  list-style: none;
  margin: 5px;
}
.fullwidthColumn-mobile ul li{
  margin-top: 5px;
  font-family: 'Open Sans',sans-serif;
  font-size: 10px;
  padding:0px;
  font-weight: 400;
}
.fullwidthColumn-mobile ul li a{
  color:#999;
}



#contactUsButton{
  right: 30px;;
  border-radius: 5px;
  padding:8px 8px;
  color:white;
  background-color: #1e3561;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
}


.banner_video_container{
  position: relative;
  background-color: black;
  height: 100vh;
}

.banner_video{
  opacity: 0.7;
  object-fit: cover;
  height: 100vh;
  width: 100%;
  pointer-events: none;
  z-index: -1;
  top:0px;
}

@media (max-width:1200px) {
  .navBar{
      display: block;
      background-color: white;
      max-height: 120px;
  }
  .menu-list{
    width: 100%;
    margin-bottom: 10px;
  }



  .menu-list-item>a{
    color:rgba(0,0,0,0.7);
  }
  .submenu-fullwidth{
    top:120px;
  }

}

.toggole{
  position: absolute;
  display: none;
  right: 5%;
  top: 15px;
  padding: 5px;
  border:1px solid #294e8c;
  border-radius: 3px;
}
.bar{
    width: 15px;
    height: 3px;
    background-color: black;
    margin:3px;
}

.mobileMenu li:last-child{
  margin-bottom: 20px;
}

@media (min-width:768px) {
  .mobileMenu{
    display: none;
  }
}

@media (max-width:767px) {
  .navBar{
    max-height: 55px;
    overflow: hidden;
  }

  .toggole{
    display: block;
  }
  .menu-list{
    display: none;
  }

  .mobileMenu{
    top:61px;
    display: block;
    background-color: #222;
    width: 100%;
    overflow: scroll;
    padding-left: 10px;
  }
  .fix{
    position: fixed;
  }
  .menu-list-item{
    list-style: none;
  }
  .menu-list-item>a{
    color:rgba(255,255,255,0.7);
  }

  #contactUsButton{
      padding:5px 4px;
  }
}

.showMenuBar{
  max-height: 720px;
}




.submenu-fullwidth-mobile{

  flex-direction: row;
  justify-content: space-evenly;
  background-color: #222222;
  width: 100%;
  position: absolute;
  text-align: center;
  left: 0;
  top: 70px;
}


.textGroup{
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translateX(-50%);
  width:100%;
  height: 100vh;
  font-family:'Montserrat', sans-serif !important;
  z-index: 9;
}
@media (max-width:1200px) {
  .textGroup{
    top:35%;
  }
}

@media(max-width:360px) {
  .textGroup{
    top:15%;
  }
}

.textGroup h1{
font-size: 50px;
margin: 0px 0px 25px;
color: white;
text-align: center;
line-height: 1.3;
font-weight: 100;
opacity: 0;
transition: all .8s ease;
}

.marginAdd20{
  margin-top: 20px !important;
}

.opacity1{
  opacity: 1 !important;
}


@media (max-width:991px) {
  .textGroup h1{
    font-size: 30px;
  }
}

.textGroup p{
font-size: 15px;
font-family: 'Open Sans',sans-serif;
margin: 0px 0px 35px;
color: white;
text-align: center;
animation: 1s changeFontsize;
}
@keyframes changeFontsize {
  0%{
    font-size: 15px;
  }
  50%{
    font-size: 20px;
  }
  100%{
    font-size: 15px;
  }
}

.fontSize20{
  font-size: 20px;
}


.buttonGroup{
  margin: auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 60px;
  transition: all 1.5s;
}


.padding0{
  padding: 0;
}

.paddingTop0{
  padding-top: 0 !important;
}

.ourServiceButton{
  border: 1px solid  #1e3561;
  text-decoration: none;
  border-radius: 3px;
  color:white !important;
  padding: 10px 30px;
  font-family: 'montserrat',sans-serif;
  font-size: 13px;
  background-color: #1e3561;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.freeConsultationButton{
    border: 1px solid  #1e3561;
    text-decoration: none;
    border-radius: 3px;
    color:white !important;
    padding: 10px 30px;
    letter-spacing: 2px;
    margin-left: 20px;
    font-size: 13px;
    text-transform: uppercase;
    background: linear-gradient(to left, transparent 50%, #30569e 50%);
    background-size: 200% 100%;
    background-position:right bottom;
    transition:all .7s ease;
}
.freeConsultationButton:hover{
  background-position:left bottom;
}

@media (max-width:991px) {
  .freeConsultationButton{
    padding: 10px 10px;
  }
  .ourServiceButton{
    padding: 10px 10px;
  }
}

@media (max-width:360px) {
  .buttonGroup{
    flex-direction: column;
    width: 70%;
  }
  .freeConsultationButton{
    margin-left: 0px;
    margin-top: 10px;
  }
}

.intro-section{
  text-align: center;
  font-family: 'Open Sans' sans-serif;
  margin: auto;
}

.textArea{
  margin-top: 75px;
  margin-bottom: 20px;
}

.textArea h2{
width: 35%;
margin: auto;
}

@media (max-width:991px) {
  .textArea h2{
    width: 100%;
  }
}

.seperateLine{
  background-color: black;
  width: 50px;
  height: 3px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.textArea p {
  width: 35%;
  margin: auto;
  font-size: 15px;
    color:#777777;
      font-family: 'Open Sans' sans-serif;
}
@media (max-width:991px) {
  .textArea p{
      width: 90%;
  }
}

.small{
  font-size: 21px;

  color:#777777;
}
.middleText{
  font-size: 36px;
  color: black;
  font-weight: 200;
}
@media (max-width:467px) {
  .middleText{
      font-size: 20px;
  }
}

.flex-intro{
  display: flex;
  flex-direction: row;
  width: 100%;
  opacity: 0;
  margin: auto;
  transition: all 1s
}

.width60{
  width: 60%
}
.width80{
  width: 80%
}

.width60-mobile{
  width: 60%
}
@media (max-width:1200px) {
  .width60{
    width: 85% !important;
  }
}
.width40{
  width: 40%
}

.bottom-intro{
  width: 40%;
}

@media (min-width:979px) {
  .width50{
    width: 50%;
  }
}
@media (max-width:978px) {
  .flex-intro{
    width: 100%;
    display: block;
  }
  .width100-mobile{
    width: 100%;
  }
}

.rowCell{
  padding: 20px;
  flex: 1;
  font-family: 'Open Sans' sans-serif;
}
.rowCell a{
  color:#747474 !important;
}

.rowCellIcon{
  animation-name:floating;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-play-state: paused;
}

.rowCellIcon:hover{
  animation-play-state: running;
}

@keyframes floating {
    from { transform: translate(0,  0px);
           width: 75px;
           height: 75px;
          }
    65%  { transform: translate(0,  5px);
            width: 75px;
            height: 75px;
          }
    to   { transform: translate(0,  0px);
            width: 75px;
            height: 75px;
          }
}
@media (max-width:991px) {
  @keyframes floating {
      from { transform: translate(0,  0px);
             width: 50px;
             height: 50px;
            }
      65%  { transform: translate(0,  5px);
              width: 50px;
              height: 50px;
            }
      to   { transform: translate(0,  0px);
              width: 50px;
              height: 50px;
            }
  }
}
@media (max-width:676px) {
  @keyframes floating {
      from { transform: translate(0,  0px);
             width: 40px;
             height: 40px;
            }
      65%  { transform: translate(0,  5px);
              width: 40px;
              height: 40px;
            }
      to   { transform: translate(0,  0px);
              width: 40px;
              height: 40px;
            }
  }
}


.top-intro img{
  width: 37.5px;
  height: 41px;
}

.rowCell h3{
  font-size: 14px;
  color:#000000;
  margin-bottom: 5px;
  margin-top: 5px;
    font-family: 'Open Sans' sans-serif;
}
.rowCell p{
  font-size: 15px;
  color:#747474;
  margin-bottom: 25px;
}

.image-intro{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.float-left-container{
  display: flex;
  flex-direction: row;
  /*margin-top: 100px;*/
}
.middleLeftContainer{
  flex-direction: row-reverse;



}
.middleLeftContainer img{
  margin-left: 20px;
  margin-right: 0px !important;
}
@media (max-width:676px) {
  .middleLeftContainer img{
    margin-left: 0px;
  }
}

.float-left-container img{
  /*padding: 20px;*/
  opacity: 0;
  transition: all 2s ease;
  object-fit: contain;
  /*margin-right: 20px;*/

}



.paddingleft20{
  padding-left: 20px !important;
}


.image-intro-text-contaner{
  text-align: left;
  padding-top: 15px;
  margin-left: 20px;
  opacity: 0;
  font-family: 'Open Sans' sans-serif;
  width: 400px;
  transition: all 2s ease;
}

.image-intro-img-contaner{
  width: 50%;
}
.image-intro-img-contaner img{
  width: 80%;
}
@media (max-width:360px) {
  .image-intro-img-contaner img{
    width: 80%;
  }
}


@media (max-width:628px) {
  .image-intro-img-contaner{
    width: 100%;
  }
}

.marginLeft0{
  margin-left: 0 !important;
}


@media (max-width:467px) {
  .image-intro-text-contaner{
      width: 300px;
  }

}

@media (max-width:978px) {
  .float-left-container{
    flex-direction: column;
    align-items: center;
  }

  .float-left-container img{
    padding: 0px;
  }

  #middle-container{
    display: flex;
    flex-direction: column-reverse;
  }
  .image-intro-text-contaner{
    margin:auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .flex-column{
    flex-direction: column;
  }

  .image-intro-text-contaner p{
    width: 80%;
    margin: auto;
    padding: 20px;
  }
}

@media (max-width:1200px) {
  .flex-column1200{
    flex-direction: column;
  }
}

.image-intro-text-contaner h4{
  font-size: 17px;
  color:#111111;
    font-family: 'Open Sans' sans-serif;
}

.image-intro-text-contaner h2{
  font-size: 24px;
  color:#1E3561;
  margin-bottom: 10px;
    font-family: 'Open Sans' sans-serif;
}

.image-intro-text-contaner p{

font-size: 15px;
color: #747474;
font-family: 'Open Sans' sans-serif;
margin-bottom: 70px;

}
.image-intro-text-contaner a{
  text-decoration: none;
  padding: 8px 20px;
  border: 1px solid #0e192e;
  color: #0e192e;
  font-family:'Montserrat', sans-serif !important;
  border-radius: 2px;
  text-transform: uppercase;
  font-size: 12px;
  transition: all .2s;
}

.image-intro-text-contaner a:hover{
  background-color: #0e192e!important;
  color: white;
}


.social-media-group{

  list-style: none;
}
.social-media-group li{

}
.social-media-group li a {
  border: none !important;
}

.social-media-img{
  width: 50px;
  height: 50px;
  display: inline;
  vertical-align: middle;
}
@media (max-width:767px) {
  .social-media-img{
    width: 40px;
    height: 40px;

  }
}

#sem{
  width: 570px;
  height: 325px;
}
#banner-main{
  width: 444px;
  height: 400px;
}
#social-media{
  width: 565px;
  height: 400px;
}
@media (max-width:628px) {
  #sem{
    width: 285px;
    height: 174px;
  }
  #banner-main{
    width: 222px;
    height: 200px;
  }
  #social-media{
    width: 284px;
    height: 200px;
  }
}

.aboutus{
  background: linear-gradient(-15deg,#041021,#275d86,#4c8ab9);
  position: relative;
}

.aboutus h2{
  font-size: 30px;
  font-weight: 100;
  color: white;
  text-align: center;
  margin-top: 10px;
  padding-top: 50px;
  margin-bottom: 20px;
}

.aboutus h2 span{
  display: block;
  font-size: 22px;
}

.number-container{
  display: flex;
  flex-direction: row;
  width: 60%;
  margin: auto;
  justify-content: center;
  text-align: center;
}
.number-container img{
  width: 570px;
  height: 276px;

}
@media (max-width:1200px) {
  .number-container img{
    width: 470px;
    height: 228px;
  }
    .number-container{
      width: 80%;
    }
}

@media (max-width:991px) {
  .number-container img{
    width: 360px;
    height: 174px;
  }
  .number-container{
    width: 90%;
  }
}
@media (max-width:767px) {
  .number-container{
    flex-direction: column;
  }
  .number-container{
    width: 100%;
  }
  .number-container img{
    width: 470px;
    height: 228px;
    margin: auto;
  }
}
@media (max-width:470px) {
  .number-container img{
    width: 360px;
    height: 174px;
  }
}
@media (max-width:360px) {
  .number-container img{
    width: 290px;
    height: 141px;
  }
}

.numberComlumn{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.numberCounter{
  font-size: 80px;
  color: white;
}
.numberComlumntitle{
  font-size: 12px;
  color: white;
  text-align: center;
}

.aboutus-text{
  width: 40%;
  margin: auto;
}
.aboutus-text h3{
  text-align: center;
  font-size: 36px;
  color: white;
}

.aboutus-text p{
  color: white;
  font-size: 15px;
  line-height: 2em;
  text-align: center;
}
  @media (max-width:991px) {
    .aboutus-text{
      width: 80%;
    }
  }


.learnMore{
  background-color: white;
  padding: 12px 25px 11px;
  color: black;
  font-size: 12px;
  letter-spacing: 1px;
  border-radius: 3px;
  text-decoration: none;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif !important;
}
.news{
  padding: 75px 41px;
}

.newBlockContainer{
  width: 50%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.newsBlock{
  flex:1;
  box-shadow: 0 1px 1px #ddd;
  margin-right: 20px;

  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: all 0.3s ease-in-out;
}
.newsBlock:hover{
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}


.blockTitle{
  background-color: #f1f5f9;
  padding: 15px 25px;
  border-bottom: 1px solid #eee;
}
.newsContent{
  text-decoration: none;
  overflow: hidden;
  text-overflow:ellipsis;
  /* white-space:nowrap; */
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 10px;
}
@media (min-width:1200px) {
  .newsContent{
    width: 300px;
  }
}
@media (min-width:991px) {
  .newsContent{
    height: 90px;
  }
}


@media (max-width:360px) {
  .newsContent{
    margin-top: 0px;
  }
}

.newsContent a{
  text-decoration: none;
  font-size: 15px;
  color:#555555;
  text-align: center;

}
.readMore{
  position: relative;
  color:#bbb;
  margin-top: 40px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left:10px;
  font-size: 12px;
  border-top: 1px #bbb dashed;
}
@media (max-width:1200px) {
  .newBlockContainer{
    width: 100%;
  }
}
@media (max-width:1200px) {
  .newBlockContainer{
    display: block;

  }
  .newsBlock{
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;

  }
}

.awards{
  width: 100%;
}

.awards-title{
  font-size: 50px;
  color: white;
  text-align: center;
}
.awards img{
  max-width:100vw;
  max-height:100%;
}
.awardsContainer{
  background-color:#6b9cc1;
  margin-top: -20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.awards-years{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 60px;

}

.awards-years-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 20px;

}
@media (min-width:1200px) {
  .awards-years-container{
    min-width: 338px;
    transform: translateX(190px);
  }
  .awards-years{
    width: 1014px;
    overflow-x: auto;
    overflow: -moz-scrollbars-none;
  }
  .awards-years::-webkit-scrollbar {
    width: 0 !important;
  }

}
.award-logo-container{
  border-radius: 50%;
  margin-bottom: 10px;
  width: 80px;
  height: 80px;
  background-color: white;
  position: relative;
}

.awards-years-container img{
object-fit: contain;
  max-width: 67%;
  max-height: 67%  ;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top:10px;
  /* border-radius: 50%;
  margin-bottom: 10px; */
}
.years{
  color: white;
  margin-bottom: 10px;
  font-size: 15px;
}

.awards-name{
  color: white;
  margin-bottom: 10px;
  font-size: 15px;
  text-align: center;
  max-width: 350px;
  height: 90px;
}
.awards-footer{
  font-size: 12px;
  text-align: center;
  min-height: 50px;
}
.awards-footer-text{
  color:white;

}

@media (max-width:1200px) {
  .awards-years{
    display: block;
  }
  .awards-years-container{
    margin-top: 20px;
    margin-right: 0px;
  }
}

.callForAction{
  width: 100%;
  background-image:linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),url('../materials/home/marketing-background.jpg');
  height:400px;
  background-position: 0px 0px, 50% 50%;
  background-size: auto, cover;
  margin-bottom: 20px;
}

.callForActionText{
    padding-top: 125px;
  text-align: center;
}
@media (max-width:767px) {
  .callForActionText{
    padding-top: 100px;
  }
}
@media (max-width:360px) {
  .callForActionText{
    padding-top: 50px;
  }
}

.callForActionText h3{
  font-size: 22px;
  color:rgba(255,255,255,0.7);
}

.callForActionText h2{
  font-size: 36px;
  color:white;
}
@media (max-width:658px) {
  .callForActionText h2{
    font-size: 24px;
  }
}

.callForActionButton{
  margin-top: 50px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;

}

@media (max-width:991px) {
  .callForActionButton{
    margin-top: 30px;
  }
}
@media (max-width:400px) {
  .callForActionButton{
    flex-direction: column;
    width: 100%;
    align-items: center;
  }
  .action_consult{
    margin-right: 0px !important;
  }

  .action_contact{
    margin-left: 0px !important;
    margin-top: 20px;
  }
}
.action_consult{
  text-decoration: none;
  font-size: 12px;
  padding: 7px 15px;
  background-color: white;
  color: #1e3561 !important;
}
.action_contact{
  text-decoration: none;
  border-color: #3dace1 !important;
  color: #fff !important;
  padding: 7px 15px;
  font-size: 12px;
  transition: all .5s ease;
}
.action_contact:hover{
  background-color: #3dace1;
}

.porfoli-text{
  margin-top: 125px;
  text-align: center;
}
.porfoli-text h2{
  font-size: 24px;
  color:#1e3561;
}
.porfoli-text h6{
  font-size: 12px;
  color:##acacac;
}

.test_grid{
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  margin: auto;
}


.portfolio_grid{
  display: grid;
  width: 70%;
  grid-template-columns: auto auto auto auto auto auto;
  margin: auto;
}
.img_container{
display: flex;
justify-content: center;
opacity: 0;
transition: all .5s ease-in;

}



.img_container img{
  object-fit: contain !important;
  -webkit-object-fit:contain !important;
  width: 80% !important;
  max-height: 200px;
}
@media (max-width:1300px) {
  .portfolio_grid{
    width: 100%;
  }
}

@media (max-width:1021px) {
  .portfolio_grid{
    grid-template-columns: auto auto auto auto;
  }
}
@media (max-width:767px) {
  .portfolio_grid{
    grid-template-columns: auto auto auto;
  }

}

.viewMore{
  color: #1e3561 !important;
  border-color: #1e3561;
  font-size: 12px !important;
  padding: 12px 25px 11px;
  margin-bottom: 20px;
  letter-spacing: 2px;
  border: 1px solid black;
  border-radius: 3px;

}

.contact-form{
    background: linear-gradient(-15deg,#041021,#275d86,#4c8ab9);
    width: 100%;
    padding-bottom: 50px;
}
.contact-form-container{
display: flex;
flex-direction: row;
width: 65%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding-top: 50px;
}

@media (max-width:1550px) {
  .contact-form-container{
    width: 90%;
  }
}


.contact-form-leftContainer{
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 75px;

}

.icon-group{
  display: flex;
  flex-direction: row;
  margin-top: 60px;
}
.contact-block{
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-right: 30px;
}



@media (max-width:1200px) {
  .contact-form-leftContainer{
    padding: 0px;
    align-items: center;
  }
  .contact-block{
    align-items: center;
  }
}

@media (max-width:676px) {
  .icon-group{
      flex-direction: column;
      margin-top: 30px;
  }
  .contact-block{
    align-items: flex-start;
    margin-top: 20px;
  }
}


.contact-form-leftContainer h4{
  font-size: 18px;
  color:white;
}
.contact-form-leftContainer h2{
  font-size: 30px;
  color:white;
}
@media (max-width:676px) {
  .contact-form-leftContainer h2{
    font-size: 20px;
  }
}
.contact-form-leftContainer h6{
  font-size: 14px;
  padding-right: 10px;
  color:white;
}
.contact-block h5{
  font-size: 14px;
  color:white;
}
.contact-block h3{
  font-size: 15px;
  color:white;
}

.contact-form-rightContainer{
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #eaeff3;
  align-items: center;
  margin-top: 20px;
  border: 1px solid black;
  border-radius: 25px;
  padding: 20px 20px 40px;
}
.contact-form-rightContainer h3{
  font-size: 18px;
  color:black;
}

.contact-form-rightContainer h4{
  font-size: 15px;
  color:rgba(177,177,177,0.7);
  margin-bottom: 25px;
}
.contact-form-input{
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 15px 40px;
  width: 80%;
}
.contact-form-input input{
  height: 30px;
}

@media (max-width:1200px) {
  .contact-form-container{
    display: block;
  }
}
@media (max-width:910px) {
  .contact-form-input{
      width: 100%;
      display: block;
  }
  .contact-form-input input{
    display: block;
    width: 100%;
    margin-top:10px;
  }
  .contact-form-input textarea{
    display: block;
    width: 100%;
    margin-top: 10px;
    height: 100px;
    border:none;
  }
}

.textAreaInput{
  grid-column-start: 1;
  grid-column-end: 3;
  margin-top:20px;
  height: 200px;
}
.submitButton{
  grid-column-start: 1;
  grid-column-end: 3;
  color:white;
  height: 40px !important;
  font-family:'Montserrat', sans-serif !important;
  font-size: 11px;
  letter-spacing: 2px;
  background: linear-gradient(-45deg,#7474bf,#348ac7);
  margin-top: 20px !important;
  border: none;
}
::-webkit-input-placeholder { /* Edge */
  padding-left: 5px;
  color: rgba(177,177,177,0.7);

}

:-ms-input-placeholder { /* Internet Explorer */
    padding-left: 5px;
  color: rgba(177,177,177,0.7);
}

::placeholder {
    padding-left: 5px;
  color:rgba(177,177,177,0.7);
}

.footer-image{
  display: flex;
  flex-direction: row;
  width: 100vw;
  background-color: black;
}

.imageTextContainer{

  position: relative;

}

.location{
  position: absolute;
  left:50%;
  top: 40%;
  transform: translateX(-50%);
  transition: all .3s ease;
  color:white;
  font-size: 20px;
  opacity: 0;
  height: 0px;
}
@media (max-width:1200px) {
  .location{
    font-size: 16px;
  }
}
@media (max-width:991px) {
  .location{
    font-size: 30px;
  }
}
.imageTextContainer:hover .location{
  opacity: 1 !important;
}
  .footer-image img{
    opacity: 1;
    transition: opacity .3s ease;
  }
  .imageTextContainer:hover .locationImage{
    opacity: 0.5
    }


.footer{
  background-color: black;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 95px;
  margin-top: -1px;
}

@media (min-width:767px) {
  .footer-image img{
    flex: 1;
    width: 100%;
    transform: scale(0);
    transition: transform .5s ease;

  }

  .scale1{
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
  }

}

@media (max-width:991px) {
  .footer-image{
    display: block;
  }
}

@media (max-width:767px) {

  .footer-image img{
    width: 100%;
    margin-top: -10px;
  }
  .footer{
    margin-top: -10px;
    flex-direction: column;
  }

}



.copyrightText{
  font-size: 13px;
  color: #fff;
  margin-top: 10px;
  text-align: center;
}
.footer-image-container{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.footer-image-container img:nth-child(1){
  width: 92px;
  height: 40px;
  padding-top: 15px
}
.footer-image-container img:nth-child(2){
  width: 150px;
  height: 40px;
  padding-top: 15px
}

.footer-image-container img:nth-child(3){
  width: 140px;
  height: 60px;
}
@media (max-width:450px) {
  .footer-image-container img:nth-child(1){
    width: 46px;
    height: 20px;
    padding-top: 7px
  }
  .footer-image-container img:nth-child(2){
    width: 65px;
    height: 20px;
    padding-top: 7px
  }

  .footer-image-container img:nth-child(3){
    width: 70px;
    height: 30px;
  }
}

.about-us-textArea{
  width: 40%;
  text-align: center;
  margin: auto;
  padding-top: 75px;
}

.about-us-textArea h2 span{
  font-size: 18px;
  color:black;
}
.about-us-textArea h6{
  font-size: 14px;
  color:#777;
}



.about-us-textArea p{
  font-size: 15;
  color:#747474;
}

.in-house-container{
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.big-team-container{
  display: grid;
  grid-template-columns: auto auto auto;
  grid-row-gap: 50px;
  width: 75%;
  margin: auto;
  flex-wrap: wrap;
}
@media (max-width:1200px) {
  .big-team-container{
      grid-template-columns: auto auto;
  }
}

.team-container{
  display: flex;
  flex:1;
  flex-direction: column;
  margin-left: 40px;
  margin-right: 40px;
  box-shadow: 0 1px 1px #ddd;

}
.team-container img{
  width: 100%;
  transition: transform .2s;
}

.team-container img:hover{
  transform: rotate(5deg);
}

@media (max-width:991px) {
  .big-team-container{
    display: block;
  }
}

@media (max-width:676px) {
  .team-container{
    margin: 0px;
  }
}

.team-text-container {
  text-align: left;
  padding: 10px;
}
.team-text-container div{
  font-size: 14px;
  color:black;
}
.team-text-container p{
  font-size: 15px;
  color:#747474;
}

.blogmainContainer{
  width: 100%;
}

.BlogBanner{
  width: 100%;
  /*height: 120px;*/
  position: relative;
  top: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(-45deg,#7474bf,#348ac7);
  padding-top: 30px;
  padding-bottom: 30px;
}

@media (max-width:1200px) {
  .BlogBanner{
    top:125px;
  }
}
@media (max-width:767px) {
  .BlogBanner{
    top:80px;
  }
}

.blog{
  font-size: 24px;
  color: white;
  text-transform: uppercase;
  position: relative;
}
.home{
  font-size: 13px;

  color: white;
}

.home a{
  text-decoration: none;
  font-weight: 400;
  color:white;
  opacity: 1;
}

.home a:hover{
  opacity: 0.5;
}

.news_container{
  display: flex;
  flex-direction: column;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
}
.news_block{
  display:flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 50px;
  padding-top: 30px;
  border-bottom: 1px dotted #ccc;
}
.news_title a{
  font-size: 30px;
  font-family:'Montserrat', sans-serif;
  color: #111111;
  font-weight: 100;

}
.date_container{
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #747474;

}
.news_pic{
  width: 100%;
}
.news_pic img{
  width: 100%;
  object-fit: cover;
}
.main_content{
  font-size: 14px;
  color: #747474;
  max-height: 80px;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


.main_content_open{
  max-height: 100% !important;
  display: block !important;
}

.news_readMore{
  font-size: 12px;
  color: #111;
  background-color: #E0E0E0;
  padding: 8px 20px;
  border-radius: 2px;
  text-transform: uppercase;
  max-width: 120px;
  text-align: center;
  letter-spacing: 1px;
  margin-top: 20px;
  cursor: pointer;
}

@media (max-width:991px) {
.news_container{
  width: 80%;
}
}

@media (max-width:689px) {
.news_title a{
  font-size: 20px;
}
}
.aboutus_page{
  top: 80px;
}
@media (max-width:767px) {
  .aboutus_page{
    top: 50px;
  }
}

.jobContainer_small{
  font-size: 14px !important;
  color: #777777 !important;
  display: block;
  margin-top: 10px;
}
.job_title{
  font-size: 18px !important;
  color:#000;
}
.responsibility,.requirements{
  font-size: 15px;
  text-decoration: underline;
  color:#747474!important;
}

.team-text-container ul{
  font-size: 13px;
  color:#747474;
  padding-left: 20px;
  margin-bottom: 10px;
}

.team-text-container ul li{
  font-size: 13px;
  color:#747474;
}
.team-image-container{
  width: 100%;
}
.team-image-container img{
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.applyNowButton{
  text-decoration: none;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 2px;
  background-color: #1e3561;
  color:white;
  border-radius: 2px;
  padding: 12px 25px 11px 25px;
  margin-bottom: 10px;
  display: inline-block;
}

.joinusContainer{
background: linear-gradient(-125deg,#68e9b6,#4e75b9);
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 75px;
}

.joinus_title{
  margin-top: 20px;
  padding-top: 0px;
  margin-bottom: 20px;
  color: white;
  font-family: 'Montserrat',sans-serif !important;
  font-size: 36px;
  opacity: 0;
  transition: all 3s ease;
}
.paddingTop60{
  padding-top: 60px;
}

@media (min-width:979px) {
  .paddingTop80{
    padding-top: 80px;
  }
}


@media (min-width:676px) {
  .joinusContainer{
    padding:100px 80px 75px 80px;
  }
}

.joinus_form{
width: 40%;
}

@media (max-width:676px) {
  .joinus_form{
  width: 60%;
  }
  .joinus_title{
    margin-top: 60px;
  }
}
.now{
font-size: 17px;
position: absolute;
width: 110px;
top:35px;
}
.engine_banner{
  background-image: url('../materials/home/engine_background.jpg');
  min-height: 300px;
  background-position: 50% 90%;
  background-repeat: no-repeat;
  text-align: center;
  background-size: cover;
}
.engine_banner h2{
  padding-top:100px;
  font-size: 36px;
  color: white;
}
@media (max-width:1200px) {
  .engine_banner h2{
    padding-top: 150px;
  }
}

.engine_banner h5{
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  padding-bottom:30px;
}
@media (max-width:991px) {
  .engine_banner h5{
    line-height: 1em;
  }
}
.main_intro{
width: 100%;
}
.main_intro_container{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60%;
  margin: auto;
  padding-top: 60px;
}
.main_intro_img{
width: 70%;
}

.main_intro_container p{
margin-bottom: 30px;
text-align: center;
color:#777;
font-size: 14px;
}

@media (max-width:676px) {
  .main_intro_container{
    width: 80%;
  }
.main_intro_img{
  width: 100%;
  }
}
.marketing_rowcell{
  display: flex;
  flex-direction: row;
  text-align: left;
}
.marketing_rowcell img{
  padding-top: 20px;
  margin-right: 30px;
}
.scocialMediaContainer{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 30px;

}
.progressRing{

  margin-top: 50px;
  margin-bottom: 150px;

}
.ringContainer{
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 80%;
  margin: auto;
}
.box{
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
  color:#AAA;
  align-items: center;
}
.chartTExt{
  font-size: 14px;
  margin-top: 40px;
}

.percentage{
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.chart{
  position: relative;
  width: 150px;
  height: 150px;
}

.box div canvas{
  width: 150px !important;
  height: 150px !important;
}

@media (max-width:991px) {
  .ringContainer{
    display: block;
  }
  .progressRing{
    margin-bottom: 0px;
  }
  .box{
    margin-top: 20px;
  }
}
.seo-bottom-text-container{
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: left;
  margin-left:auto;
  margin-right: auto;
  margin-bottom: 60px;


}
.seo-bottom-text h2{
  font-size: 30px;
  color: #1e3561;
  font-family: 'Noto Sans TC', sans-serif;
}

.seo-bottom-text h5{
  font-size: 15px;
  color: #747474;
}
.seo-bottom-text:last-child{
  margin-left: 20px;
}
@media (max-width:991px) {
  .seo-bottom-text-container{
    width: 80%;
  }
}
@media (max-width:676px) {
  .seo-bottom-text-container{
    display: block;
  }
  .seo-bottom-text:last-child{
    margin-left: 0px;
  }
}
.row-view{
  display: flex;
  flex-direction: row;
}
.row-view-desltop{
  display: flex;
  flex-direction: row;
}
@media (max-width:991px) {
  .row-view-desltop{
    flex-direction: column;
  }
}
.column-view{
  display: flex;
  flex-direction: column;

}

.width60Percent{
  width: 60%;
}

.lineHeight1_5{
  line-height: 1.5;
}
.fontSize30{
  font-size: 30px !important;
}
.fontSize18{
  font-size:  18px !important;
}
.natoTC{
    font-family: 'Noto Sans TC', sans-serif;
}
.paraContainer{
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
@media (max-width:676px) {
  .paraContainer{
    display: block;
  }
}
.paraContainer p {
  padding: 10px;
  flex:1;
}
.textAlignLeft{
  text-align: left !important;
}
.icon-text-container{
  text-align: left;
  margin-left: 20px;
}
@media (min-width:979px) {
  .marginLeft60-desktop{
    margin-left: 60px !important;
  }
  .marginRight60-desktop{
    margin-right: 60px;
  }

}
.content_banner{
  background-image: url('../materials/home/content_marketing_bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.content_banner .main_intro_container .paraContainer p{
  color:white;
}

.iframe_container{
  width: 60%;
  position: relative;
  padding-bottom: 32.25%;
  height: 0;
  margin: auto;
  margin-bottom: 75px;
}

.iframe_container iframe{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}
@media (max-width:991px) {
  .iframe_container{
    width: 100%;
    padding-bottom: 56.25%;
    margin-bottom: 0px;
  }
  .textCenter-mobile{
    text-align: center;
  }

}

@media (max-width:676px) {
  .width90-mobile{
    width: 90% !important;
  }
  .no_margin_padding_mobile{
    margin: 0 !important;
    padding: 0 !important;
  }
}

.textAlignCenter{
  text-align: center;
}
.data-analysis-container{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.data-analysis-image{
  width: 30%;
}

@media (max-width:991px) {
  .data-analysis-image{
    width: 70%;
  }
}
.rowCell img{
  width: 75px;
  height: 75px;
}
@media (max-width:991px) {
  .textAlignCenter-mobile{
    text-align: center;
  }
  .width90-991{
    width: 90% !important;
  }
}
@media (min-width:1200px) {
  .justify-content-desktop{
    justify-content: center;
  }

}
.email-marketing-middle-text{
  font-size: 30px;
}
@media (max-width:767px) {
  .email-marketing-middle-text{
    font-size: 15px;
  }
}

#hongkong{
  background:linear-gradient(-15deg,rgba(4,6,33,0.8),rgba(39,93,134,0.8),rgba(76,138,185,0.8)), url('../materials/home/contact-hongkong.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}
#singapore{
  background:linear-gradient(-15deg,rgba(4,6,33,0.8),rgba(39,93,134,0.8),rgba(76,138,185,0.8)), url('../materials/home/contact-singapore.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}
#shenzhen{
  background: linear-gradient(-15deg,rgba(4,6,33,0.8),rgba(39,93,134,0.8),rgba(76,138,185,0.8)),url('../materials/home/contact-shenzhen.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}
#beijing{
  background:linear-gradient(-15deg,rgba(4,6,33,0.8),rgba(39,93,134,0.8),rgba(76,138,185,0.8)), url('../materials/home/contact-beijing.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}
#london{
  background:linear-gradient(-15deg,rgba(4,6,33,0.8),rgba(39,93,134,0.8),rgba(76,138,185,0.8)), url('../materials/home/contact-london.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}
#newyork{
  background:linear-gradient(-15deg,rgba(4,6,33,0.8),rgba(39,93,134,0.8),rgba(76,138,185,0.8)), url('../materials/home/contact-newyork.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}

.locationMainContiner{
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 30px;
padding-bottom: 30px;
width: 80%;
margin: auto;
}

@media (max-width:1200px) {
  .locationMainContiner{
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 30px;
  width: 100%;
  }
}

.contactleftContainer{
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.contactleftContainer{
  display: flex;
  flex-direction: column;

}
.contactleftContainer h5{
  padding-left: 10px;
  font-size: 18px;
  color: white;
  word-wrap: break-word;
  text-align: left;
  width: 90%;
  margin: auto;
}
.contactleftContainer h3{
  padding-left: 10px;
  font-size: 30px;
  color: white;
  text-align: left;
  width: 90%;
  margin: auto;
}
.contactleftContainer h4{
  padding-left: 10px;
  font-size: 18px;
  color: white;
  width: 40%;
  word-wrap: normal;
}
@media (min-width:1200px) {
  .contactleftContainer h4{
    width: 100%;
  }
  .contactleftContainer h5{
    text-align: center;
  }
  .contactleftContainer h3{
    text-align: center;
  }
}
@media (max-width:1200px) {

  .contactleftContainer h5{
    text-align: center;
  }
  .contactleftContainer h3{
    text-align: center;
  }
}


.contactIconContainer{
  display: flex;
  flex-direction: row;
  padding: 10px;
  color: white;
  width: 100%;
  justify-content:center;
}
.spcial-left-con{
  display: flex;
  justify-content: flex-end;
}
@media (max-width:978px) {
  .spcial-left-con{
    justify-content: center;
  }
  .paddingTop60-desktop{
    padding-top: 60px;
  }
}
@media (min-width:979px) {
  .width70width70-desktop{
    width: 70%;
  }

}
.mapContainer{
  flex: 1;
  display:flex;
  justify-content: center;
}
.tem{
  width:75px;
  height: 75px;
  background-color:#1e3561;
  margin-right:20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.phone{
  width: 70%;
}
.mail{
  width: 70%;
}

.address{
  width: 50%;
}

@media (max-width:1200px) {
  .mapContainer{
      padding-bottom: 20px;
  }
  .contactIconContainer{
    width: 90%;
    margin: auto;
  }
}

@media (max-width:991px) {
  .mapContainer iframe{
      width: 300px;
      height: 225px;
  }
  .tem{
    width:50px !important;
    height:50px !important;
    margin-right:0px;
  }
  .contactIconContainer{
    width: 90%;
  }
  .contactleftContainer h4{
    width: 50%;
  }

  .phone{
    width: 40%;
  }
  .mail{
    width: 40%;
  }

  .address{
    width: 40%;
  }
}
@media (max-width:360px) {
  .contactleftContainer h4{
    width: 100%;
    font-size: 20px;
  }
}
.lang-menu{
  display: flex;
  padding-top: 50px;
}

.lang-submenu li{
  display: flex;
  align-items: center;
  padding-left: 10px;
}
.lang-submenu li a{
    margin-bottom: 5px;
    margin-left: 5px;
}

@media (max-width:1200px) {
  .lang-menu{
    padding-top: 5px;
  }
}
.lang-menu img{
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.iconSize{
  width: 75px !important;
  max-width: 75px !important;
  min-width: 75px !important;
  height: 75px !important;
  max-height: 75px !important;
  min-height: 75px !important;

}
@media (max-width:991px) {
  .iconSize{
    width: 50px !important;
    max-width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    max-height: 50px !important;
    min-height: 50px !important;
  }
}
@media (max-width:676px) {
  .iconSize{
    width: 40px !important;
    max-width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    min-height: 40px !important;
  }
}