@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Play&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
/*font-family: 'Montserrat', sans-serif;*/

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 62.5%;
  font-size: 10px;
  scroll-behavior: smooth;
  width: 100%;
  height: 100%;
}

.container-fluid {
  overflow: hidden;
}

.nav {
  width: 100%;
  height: 65px;
  position: absolute;
  line-height: 65px;
  text-align: center;
  z-index: 99;
  padding: 0px;
  padding-top: 3px;
  padding-bottom: 68px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.6s ease;
  top: 0px;
  padding-right: 3.9%;
  padding-left: 3.5%;
  background: -webkit-linear-gradient(45deg, #040a22, #0c253d); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(45deg, #040a22, #0c253d);
  box-shadow: 0 6px 2px -2px rgba(236, 236, 236, 0.027);
}
.hexersoft-hero-banner {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  position: relative;
  background: -webkit-linear-gradient(45deg, #040a22, #0c253d); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(45deg, #040a22, #0c253d);
  overflow: hidden;
  z-index: 9;
}
.hexersoft-hero-banner-split-window {
  position: absolute;
  width: 50%;
  height: 100%;
  background: white;
}

.hero-banner-text {
  width: 70%;
  position: absolute;
  top: 50%;
  transform: translateY(-40%);
  left: 0;
  padding: 0 50px;
  padding-left: 7%;
  z-index: 10;
}

.banner-heading {
  color: #0c3c69;
  font-size: 3.16vw;
  margin-bottom: 8%;
}
.banner-paragraph {
  color: #333333;
  font-size: 16px;
  width: 63%;
  text-align: justify;
}
.banner-paragraph.autosar {
  color: #333333;
  font-size: 16px;
  width: 74%;
  text-align: justify;
}
.banner-paragraph.autosar.the-software-development {
  color: #333333;
  font-size: 16px;
  width: 83%;
  text-align: justify;
}

.hexersoft-contact-icons span::before {
  border: 1px solid #333333;
}
.hexersoft-contact-icons span {
  color: #333333;
}

.hexersoft-contact-icons span svg {
  fill: #333333;
}

.the-direction {
  position: absolute;
  top: 115px;
  left: 4%;
  z-index: 99;
}
.the-direction span {
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 17px;
  line-height: 22px;
  text-transform: capitalize;
  color: #333333;
}
.the-direction span a {
  color: #0c71a9;
}

@media screen and (max-width: 1366px) {
  .the-direction {
    top: 115px;
  }
  .the-direction span {
    font-size: 16px;
  }
  .banner-paragraph {
    font-size: 15px;
  }
  .banner-paragraph.autosar {
    font-size: 15px;
  }
  .banner-paragraph.autosar.the-software-development {
    font-size: 15px;
  }
}

.hexersoft-hero-banner .row {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
  top: 0;
  left: 0;
  z-index: 1;
}

.hexersoft-hero-banner .row {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  top: 0;
  left: 0;
  z-index: 1;
}
.hexersoft-hero-banner .row .col-xl-5 {
  padding: 0%;
  left: 8%;
}
.hexersoft-hero-banner .row .col-xl-7 {
  padding: 7.4%;
  right: 4%;
}

.hexersoft-hero-banner.the-autosar .row .col-xl-5 {
  left: 6.5%;
}
.hexersoft-hero-banner.the-software-development .row .col-xl-5 {
  left: 5%;
}

.hexersoft-contact-icons span {
  z-index: 9999999999999999999999999;
}

.hexersoft-contact-icons span svg {
  margin-left: 20px;
  fill: #333333;
  transition: 0.5s;
}

.hexersoft-contact-icons span svg:hover {
  transition: 0.5s;
  fill: #009dfe;
}

.hexersoft-contact-icons .hexersoft-social-icons svg {
  margin-left: 20px;
  fill: white;
  transition: 0.5s;
}

.hexersoft-contact-icons .hexersoft-social-icons svg:hover {
  transition: 0.5s;
  fill: #009dfe;
}

@media screen and (max-width: 1366px) {
  .banner-heading {
    margin-bottom: 5%;
  }
  .hexersoft-hero-banner .row .col-xl-5 {
    padding: 0%;
    left: 9%;
  }
  .hexersoft-hero-banner .row .col-xl-7 {
    padding: 7%;
    right: 4%;
  }
  .hexersoft-hero-banner.the-autosar .row .col-xl-5 {
    left: 6.2%;
  }
  .hexersoft-hero-banner.the-software-development .row .col-xl-5 {
    left: 4.8%;
  }
  .banner-content {
    padding-top: 3%;
  }
}

.banner-content .banner-autosar {
  margin-top: 9%;
}
.banner-content .banner-autosar-tools {
  margin-top: 11%;
}
.banner-content .banner-safety {
  margin-top: 8%;
}
.banner-software-development {
  margin-top: 10.5%;
}

@media screen and (max-width: 1366px) {
  .banner-paragraph.autosar br {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .hexersoft-hero-banner {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    position: relative;
    background: white;
    overflow: hidden;
    z-index: 9;
  }
  .hexersoft-hero-banner-split-window {
    position: absolute;
    width: 100%;
    height: 40%;
    bottom: 0;
    background: -webkit-linear-gradient(45deg, #040a22, #0c253d); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(45deg, #040a22, #0c253d);
  }
  .hexersoft-contact-icons.the-separate {
    display: none;
  }
  .banner-content {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .banner-paragraph {
    width: 100%;
  }

  .hexersoft-hero-banner .row .col-xl-7 {
    padding: 0%;
    margin: 0%;
    width: 100%;
    right: 0;
    background-image: #333;
    text-align: center;
    position: relative;
    height: 50%;
  }
  .hexersoft-hero-banner .row .col-xl-7 img {
    width: 80%;
    margin-top: -10%;
  }
  .hexersoft-hero-banner .row .col-xl-5 {
    padding: 0%;
    margin: 0%;
    left: 0%;
    height: 50%;
    width: 100%;
    vertical-align: middle;
  }
}

@media screen and (max-width: 768px) {
  .nav {
    height: 95px;
  }
  /* TAB AUTOSAR */
  .banner-content.tab-autosar {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-58%, -33%);
    width: 78%;
  }
  /* TAB SAFETY */
  .banner-content.tab-safety {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -27%);
    width: 53%;
  }
  /* REDLINE PROJECT */
  .banner-content.tab-redline-project {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -27%);
    width: 53%;
  }
  /* SOFTWARE DEVEOPMENT*/
  .banner-content.tab-software-development {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-47%, -37%);
    width: 86%;
  }
  /* SOFTWARE TESTING*/
  .banner-content.tab-software-testing {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -27%);
    width: 53%;
  }
  /* AUTOSAR TOOLS */
  .tab-autosar-tools {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 40%;
    left: 40%;
    transform: translate(-50%, 88%);
    width: 100%;
  }
  .banner-paragraph.autosar {
    width: 100%;
  }
  .banner-paragraph.autosar {
    width: 100%;
  }
  .banner-content .banner-autosar-tools {
    margin-top: -8%;
    margin-left: -30%;
  }

  /* FOR ALL */
  .banner-content {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -13%);
    width: 53%;
  }
  .banner-heading {
    color: #0c3c69;
    font-size: 3.96vw;
    margin-bottom: 6%;
  }
  .the-direction {
    top: 125px;
  }
  .hexersoft-hero-banner .row .col-xl-7 img {
    width: 80%;
    margin-top: -7%;
  }
  .nav {
    padding-right: 0%;
    padding-left: 0%;
  }
}

@media screen and (max-width: 500px) {
  #remove-it-on-mob {
    display: none;
  }
}