::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

body {
  background: #000;
  color: #fff;
  font-family: "calibri_regular";
}

/* --------------------------- Begin Intro page */
.sectionEffect {
  position: relative;
  width: 100%;
  height: 880px;
  /* overflow: hidden; */
}

.sectionEffect .overlayEffect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}

.sectionEffect .overlayEffect header {
  display: flex;
  padding: 32px 0;
  justify-content: space-between;
  position: fixed;
  right: 0;
  left: 0;
  z-index: 99999;
}

.sectionEffect .overlayEffect._mobile header {
  background: #000;
  padding: 32px 24px;
}

.sectionEffect .overlayEffect header:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #00000000;
  filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: -1;
}

.sectionEffect .overlayEffect header .xCode_logo {
  width: 221px;
  height: 40px;
  background: url("../assets/images/logo.svg") no-repeat;
  background-size: contain;
}

@media (max-width: 520px) {
  .sectionEffect .overlayEffect header .xCode_logo {
    width: 114px;
    height: 20px;
  }
}

.sectionEffect .overlayEffect header .menu {
  width: 23%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.sectionEffect .overlayEffect header .menu_mobile {
  width: 32px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  cursor: pointer;
  display: none;
}

.sectionEffect .overlayEffect header .menu_mobile span {
  height: 1px;
  width: 100%;
  background: #fff;
}

@media (max-width: 1500px) {
  .sectionEffect .overlayEffect header .menu {
    width: 26%;
  }
}

@media (max-width: 1270px) {
  .sectionEffect .overlayEffect header .menu {
    width: 33%;
  }
}

.sectionEffect .overlayEffect._mobile header .menu {
  background: #000;
  position: fixed;
  left: 0;
  right: 0;
  top: 84px;
  /* 103 */
  bottom: 0;
  z-index: 999;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 24px 24px;
}

@media (max-width: 1000px) {
  .sectionEffect .overlayEffect header .menu {
    display: none;
  }

  .sectionEffect .overlayEffect._mobile header .menu,
  .sectionEffect .overlayEffect header .menu_mobile {
    display: flex;
  }

  .sectionEffect .overlayEffect header {
    padding: 32px 24px;
  }

  .sectionEffect .overlayEffect._mobile header .menu_mobile span:nth-child(1),
  .sectionEffect .overlayEffect._mobile header .menu_mobile span:nth-child(2) {
    animation: inT 0.8s forwards;
    transform: translateY(16px) rotate(135deg);
  }

  .sectionEffect .overlayEffect._mobile header .menu_mobile span:nth-child(3),
  .sectionEffect .overlayEffect._mobile header .menu_mobile span:nth-child(4) {
    animation: inT 0.8s forwards;
    transform: translateY(0px) rotate(221deg);
  }
}

@media (max-width: 520px) {
  .sectionEffect .overlayEffect header .menu_mobile {
    margin-top: -8px;
    height: 26px;
  }
}

.sectionEffect .overlayEffect header .menu a {
  font: 20px / 24px "calibri_regular";
  color: #fff;
  text-decoration: none;
}

.sectionEffect .overlayEffect._mobile header .menu a {
  margin-bottom: 16px;
}

.sectionEffect .overlayEffect._mobile {
  z-index: 9999;
}

.sectionEffect .overlayEffect h1 {
  font: 64px / 64px "calibri_bold";
  color: #fff;
  display: flex;
  justify-content: center;
  padding-top: 125px;
  position: relative;
  z-index: 2;
  position: relative;
  left: -2%;
}

/* --------------------------- End Intro page */

/* --------------------------- Begin Service Section */
.services {
  padding: 210px 0 24px;
  margin: -88px auto 0;
  /* padding-top: 210px; */
}

@media (max-width: 520px) {
  .services {
    padding-top: 110px;
  }
}

.services>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 90px;
  transition: all 0.5s;
}

.services>div:hover {
  transform: translateY(-10px) !important;
  -webkit-transform: translateY(-10px) !important;
}

.services>div._icons:before {
  content: "";
  width: 50px;
  height: 50px;
  margin-bottom: 16px;
}

.services>div._icons.ai {
  --animate-duration: 1s;
}

.services>div._icons.ai:before {
  background: url("../assets/images/AI.svg") no-repeat;
  background-size: contain;
}

.services>div._icons.iThings {
  --animate-duration: 1.2s;
}

.services>div._icons.iThings:before {
  background: url("../assets/images/IoT.svg") no-repeat;
  background-size: contain;
}

.services>div._icons.cVision {
  --animate-duration: 1.4s;
}

.services>div._icons.cVision:before {
  background: url("../assets/images/Computer_Vision.svg") no-repeat;
  background-size: contain;
}

.services>div._icons.dTransform {
  --animate-duration: 1.6s;
}

.services>div._icons.dTransform:before {
  background: url("../assets/images/Digital_Transformation.svg") no-repeat;
  background-size: contain;
}

.services>div._icons.sInnovation {
  --animate-duration: 1.8s;
}

.services>div._icons.sInnovation:before {
  background: url("../assets/images/Strategy.svg") no-repeat;
  background-size: contain;
}

.services>div._icons.cExperience {
  --animate-duration: 2s;
}

.services>div._icons.cExperience:before {
  background: url("../assets/images/Customer_Experience.svg") no-repeat;
  background-size: contain;
}

.services>div>h4 {
  font: 20px / 24px "calibri_bold";
  color: #fff;
  height: 48px;
  text-align: center;
  margin-bottom: 24px;
}

.services>div>p {
  font: 20px / 21px "calibri_regular";
  text-align: center;
  color: #fff;
}

@media (min-width: 768px) {
  .sectionEffect .overlayEffect h1 {
    padding-top: 160px;
  }

  .services>div>p {
    padding: 0 8px;
  }

  .sectionEffect .overlayEffect header {
    max-width: 100%;
    padding: 32px 24px;
  }
}

@media (min-width: 1200px) {
  .services>div>p {
    padding: 0 16px;
  }
}

@media (min-width: 1600px) {
  .services>div>p {
    padding: 0 12px;
    /* 0 76px */
  }
}

/* --------------------------- End Service Section */

/* --------------------------- Begin Contact Us Section */

.contentUs {
  padding: 24px 0;
  margin: 0 auto;
  transition: all 0.5s;
  position: relative;
  z-index: 9;
}

.contentUs .contactInfo {
  display: flex;
  flex-direction: column;
  position: relative;
}

.contentUs .contactInfo:before,
.contentUs .contactInfo:after {
  content: "";
  position: absolute;
}

.contentUs .contactInfo:after {
  background: url("../assets/images/Ellipse_1.svg") no-repeat;
  background-size: contain;
  width: 138px;
  height: 138px;
  bottom: 71px;
  left: 185px;
  opacity: 0.7;
}

.contentUs .contactInfo:before {
  background: url("../assets/images/Ellipse_2.svg") no-repeat;
  background-size: contain;
  width: 269px;
  height: 269px;
  bottom: -80px;
  left: 220px;
  opacity: 0.8;
}

.contentUs .contactInfo h2 {
  font: 28px / 24px "calibri_bold";
  color: #fff;
}

.contentUs .contactInfo h6 {
  font: 18px / 24px "calibri_regular";
  color: #c9c9c9;
  margin-bottom: 12px;
}

.contentUs .contactInfo a {
  font: 16px / 24px "calibri_regular";
  color: #fff;
  margin-bottom: 32px;
  display: flex;
  justify-content: flex-start;
  width: 150px;
}

.contentUs .contactInfo a:before {
  content: "";
  width: 24px;
  height: 24px;
  margin-right: 19px;
}

.contentUs .contactInfo a.email:before {
  background: url("../assets/images/ic_sharp-email.svg") no-repeat;
  background-size: contain;
}

.contentUs .contactInfo a.linkedIn:before {
  background: url("../assets/images/circum_linkedin.svg") no-repeat;
  background-size: contain;
}

.contentUs .contactInfo a.location {
  width: 250px;
  cursor: default;
  text-decoration: none;
}

.contentUs .contactInfo a.location:before {
  background: url("../assets/images/Vector-3.svg") no-repeat;
  background-size: contain;
  width: 36px;
  height: 36px;
}

.contentUs .contctForm {
  position: relative;
  z-index: 99;
}

.contentUs .contctForm .inputCtrl {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
}

.contentUs .contctForm .inputCtrl label {
  font: 12px/21px "calibri_regular";
  color: #8d8d8d;
}

/* input:-internal-autofill-selected, */
.contentUs .contctForm .inputCtrl input,
.contentUs .contctForm .inputCtrl textarea {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0.5px solid #8d8d8d;
  outline: none !important;
  font: 16px/21px "calibri_regular";
  color: #fff;
}

.contentUs .contctForm .inputCtrl input {
  height: 38px;
}

.contentUs .contctForm button {
  height: 56px;
  width: 214px;
  background: #313131;
  border: 0;
  outline: none !important;
  font: 16px / 24px "calibri_regular";
  color: #c9c9c9;
}

@media (max-width: 590px) {
  .contentUs .contctForm button {
    width: 100%;
  }
}

/* --------------------------- End Contact Us Section */

/* --------------------------- Begin Footer Section */

footer {
  padding: 60px 100px 0;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: end;
}

footer p {
  font: 14px / 24px "calibri_regular";
  color: #c9c9c9;
}

@media (max-width: 590px) {
  footer {
    padding-top: 16px;
    height: auto;
  }
}

/* --------------------------- End Footer Section */
.loading,
.error-message,
.sent-message {
  display: none;
}

.d-block {
  display: block;
}