@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;900&display=swap");
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}
* {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}
.row {
  --bs-gutter-x: 0;
}
.contact-us .text-div h1,
h1 {
  font-size: 40px;
  font-weight: 900;
}
@media (max-width: 965px) {
  .contact-us .text-div h1,
  h1 {
    font-size: 30px;
  }
}
@media (max-width: 425px) {
  .contact-us .text-div h1,
  h1 {
    font-size: 30px;
  }
}
@media (max-width: 320px) {
  .contact-us .text-div h1,
  h1 {
    font-size: 25px;
  }
}
/* contact nav */
.contact-nav {
  background-color: rgb(20, 29, 56);
  color: #ddd;
}
.contact-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.contact-nav ul li {
  display: flex;
  margin: 0 20px;
}
.contact-nav ul li span {
  /* font-family: "Nunito Sans", sans-serif; */
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 12px;
  padding: 0 10px;
}
.contact-nav ul li i {
  border-right: solid 1px;
  border-left: solid 1px;
  margin: 0;

  padding: 10px;
}
.contact-nav ul li span i {
  margin-right: 10px;
}
.navBar {
  /* margin-top: 10px; */
  padding: 10px 5px;
  display: flex;
  z-index: 10;
  background-color: #fff;
}
.logo {
  width: 200px;
}
.navBar .logo img {
  width: 100%;
}
.navBar .navBar-links {
  width: 100%;
  display: flex;
}
.navBar .navBar-links a,
.navBar .navBar-links div.dropDown {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
  cursor: pointer;
  color: rgb(0, 138, 255);
  font-family: "Roboto", sans-serif;

  font-weight: 500;
}
.navBar .navBar-links a {
  transition: border ease-in-out 0.2s;
  text-decoration: none;
}
.navBar .navBar-links div.dropDown:hover,
.navBar .navBar-links a:hover {
  border-bottom: blue solid 2px;
}
.navBar .navBar-links div.dropDown {
  flex-direction: column;
  position: relative;
}
.navBar .navBar-links div.dropDown ul {
  position: absolute;
  top: 59px;

  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 300px;
  display: none;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
.navBar .navBar-links div.dropDown:hover ul {
  display: block;
  z-index: 10;
  background-color: #fff;
  padding: 10px 0;
}
.navBar .navBar-links div.dropDown ul li {
  padding: 5px 0;
  font-family: "Roboto", sans-serif;
}
.navBar .navBar-links div.dropDown ul li a:hover {
  border: none;
  border-left: solid;
  border-right: solid;
}
.navBar .navBar-links div.dropDown ul li a {
  justify-content: start;
  display: flex;
  margin: 0;
  padding-left: 5px;
  text-align: right;
  width: 100%;
  font-family: "Roboto", sans-serif;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  margin-top: 0;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .main-content {
  padding-top: 60px;
}

.navBar .logo .nav-toggle::after {
  content: "Open";
}
#nav-check:checked ~ .navBar .logo .nav-toggle::after {
  content: "Close";
}
.nav-toggle,
#nav-check {
  display: none;
}

@media (max-width: 926px) {
  .navBar .navBar-links a,
  .navBar .navBar-links div.dropDown {
    margin: 0 5px;
  }
}
@media (max-width: 846px) {
  .contact-nav {
    display: none;
  }
  .nav-toggle {
    display: block;
    margin: auto 20px;
  }
  .navBar {
    flex-direction: column;
    overflow: visible;
    padding: 5px 0;
  }
  .navBar .logo {
    width: 100%;

    display: flex;
    justify-content: space-between;
  }
  .navBar .logo img {
    width: 150px;
  }
  .navBar .navBar-links {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    height: 0;
    overflow-y: scroll;
    transition: height ease-in-out 1s;
    background-color: #fff;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 10000;
  }

  .navBar .navBar-links a,
  .navBar .navBar-links div.dropDown {
    display: inline;
    margin: 10px;
  }
  .navBar .navBar-links div.dropDown ul {
    position: unset;
    width: 100%;
    box-shadow: none;
    margin-left: 10px;
  }
  #nav-check:checked ~ .navBar .navBar-links {
    height: 100vh;
    padding-bottom: 20px;
  }
}

/* carousel */
.tag {
  color: rgb(136, 176, 196);
  font-weight: 900;
  font-size: 15;
}
.tag::before {
  content: "// ";
}
.hover {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.carousel-caption h5 {
  font-weight: 900;
  font-size: 30px;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
.carousel-caption a {
  color: #fff;
  background-color: rgb(0, 138, 255);
  padding: 10px 20px;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
/* remove to use the old one */
.carousel-caption {
  top: 40%;
}
.carousel-item {
  height: 700px;
}

@media (max-width: 1160px) {
  .carousel-item {
    height: 700px;
  }
  .carousel-image {
    height: 700px;
    min-width: 1000px;
  }
}
@media (max-width: 768px) {
  .carousel-caption {
    top: 40%;
  }
  .carousel-item {
    height: 500px;
  }
  .carousel-image {
    min-width: 800px;
  }
}
@media (max-width: 425px) {
  .carousel-caption {
    top: 30%;
  }
  .carousel-item {
    height: 500px;
  }
  .carousel-image {
    min-width: 800px;
  }
  .carousel-caption h5 {
    font-size: 25px;
  }
}
/* about us */
.about-us-section .text-col {
  padding: 20px;
}
.more-about {
  display: flex;
}

.more-about .box {
  margin-top: 20px;
  height: 200px;
}
.more-about .box .icon-main {
  display: flex;
  margin: 5px;
}
.more-about .box .icon-main h5 {
  font-weight: 900;
}
.more-about .box .icon-main img {
  width: 50px;
}
.more-about .box .line-box {
  background-color: rgb(136, 176, 196);
  height: 3px;
  margin: 10px 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}
.more-about .box:hover .line-box {
  opacity: 1;
}
.about-us-section .image-col img {
  width: 100%;
}

@media (max-width: 425px) {
  .about-us-section .text-col {
    padding: 10px;
    text-align: center;
  }
  .about-us-section .image-col img {
    margin-bottom: 20px;
  }
}
@media (max-width: 400px) {
  .more-about .box .icon-main {
    margin: 0 auto;

    justify-content: center;
    text-align: center;
  }
  .more-about .box {
    margin-top: 5px;
    height: 150px;
  }
  .more-about {
    flex-wrap: wrap;
  }
}

/* why choose-us */
.why-choose-us {
  background-color: rgb(34, 31, 60);
  color: #ddd;
  position: relative;

  height: 600px;
}

.Concept-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 10px;
}
.Concept-grid .box {
  position: relative;
  height: 300px;
  padding: 20px;
  line-height: 2;
  width: 200px;
  background-color: rgb(38, 32, 81);
  margin: 0 1px;
  text-align: center;
}
.Concept-grid .box h3 {
  text-align: center;
  font-weight: 900;
}
.Concept-grid .box .number {
  position: absolute;
  font-weight: 900;
  font-size: 100px;
  top: -20px;
  left: 5px;
  opacity: 0.1;
}
.Concept-grid .box p {
  margin-top: 10px;
  z-index: 10;
}
.Concept-grid .box .icon {
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 50px 00 0;
  padding: 15px 0 0 15px;
  background-color: rgba(221, 221, 221, 0.401);
  width: 80px;
  opacity: 0.2;
  z-index: 1;
}
.Concept-grid .box .icon img {
  width: 100%;
  z-index: 0;
}
.Concept-grid .box:hover {
  background-color: rgb(246, 246, 246);
  color: #000;
}
.Concept-grid .box:hover .icon {
  opacity: 1;
  z-index: 0;
}
.why-choose-us .count-div {
  border: solid;
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  margin-top: 10px;
}

.count-div .box {
  position: relative;
  overflow: hidden;
  border: solid;
  color: #000;
  width: 45%;
  padding: 30px;
}
.count-div .box .number {
  font-size: 30px;
  font-weight: 900;
  z-index: 3;
}
.count-div .box h3 {
  font-weight: 900;
}
.count-div .box p {
  font-size: 20px;
}
.count-div .box p a {
  text-align: left;
  border: solid;
}
.count-div .box img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0.5;
}

@media (max-width: 992px) {
  .why-choose-us {
    height: auto;
  }
  .Concept-grid .box {
    height: 300px;
    padding: 30px 10px 10px 10px;
    margin: 5px 0;
  }
}
/* our-service
 */
.our-service-header .text-div {
  max-width: 750px;
}
.our-service-header .btn-div {
  min-width: 150px;
}
@media (max-width: 810px) {
  .our-service-header {
    flex-direction: column;
  }
  .our-service-header .btn-div {
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 499px) {
  .our-service-header {
    flex-direction: column;
    text-align: center;
  }
  .our-service-header h1 {
    font-size: 30px;
  }
  .our-service-header .btn-div {
    width: 100%;
  }
}
.our-service {
  display: flex;
}
.our-service .icon {
  width: 50px;
  height: 50px;
  margin-right: 5px;
}
.our-service .icon img {
  width: 50px;
  height: 50px;
}
.our-service .text-div {
  line-height: 2;
  padding: 0 20px;
}
.our-service .text-div h3 {
  font-weight: 700;
}
@media (max-width: 375px) {
  .our-service-row {
    padding: 0 !important;

    margin: 0;
  }
  .our-service .text-div {
    padding: 0 5px;
  }
}
/* contact-us */
.contact-us {
  position: relative;
  width: 80%;
  margin: 10px auto;

  height: 300px;
  background-image: url("../images/contact-us.jpg");
  background-repeat: no-repeat;
  background-position: 0 -780px;
  background-size: cover;
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
  overflow: hidden;
}
.contact-us .text-div,
.contact-us .btn-div {
  margin: auto 0;
  z-index: 2;
}
.contact-us .text-div {
  padding: 20px;
  color: #fff;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
.contact-us .tag {
  color: #fff;
}

.contact-us .btn-div {
  padding-right: 20px;
}
.contact-us .btn-div button {
  padding: 10px;
  margin-right: 50px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  transition: color ease-in-out 0.5s;
  transition: background ease-in-out 0.5s;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
.contact-us .btn-div button:hover {
  background: #fff;
  color: #000;
}
@media (max-width: 1399px) {
  .contact-us {
    background-position: 0 -670px;
  }
}
@media (max-width: 1199px) {
  .contact-us {
    background-position: 0 -550px;
  }
}
@media (max-width: 991px) {
  .contact-us {
    width: 100%;
    background-position: 0 -480px;
  }
}
@media (max-width: 797px) {
  .contact-us {
    height: 200px;
    background-position: 0 -380px;
  }
  .contact-us .text-div {
    padding: 10px;
  }
  .contact-us .btn-div button {
    padding: 5px;
    margin-right: 0px;
  }
}
@media (max-width: 768px) {
  .contact-us {
    height: 200px;
    background-position: 0 -550px;
  }
}
@media (max-width: 517px) {
  .contact-us .text-div .tag {
    font-size: 15px;
  }
  .contact-us .text-div h1 {
    font-size: 30px;
  }
}
@media (max-width: 499px) {
  .contact-us {
    flex-wrap: wrap;
    text-align: center;
    background-position: 0 -320px;
  }

  .contact-us .btn-div,
  .contact-us .text-div {
    width: 100%;
  }
}
@media (max-width: 441px) {
  .contact-us {
    background-position: 0 -230px;
  }
}
@media (max-width: 320px) {
  .contact-us {
    background-position: 0 -180px;
  }
}
.contact-us-row ul {
  font-size: 30px;
  max-width: 250px;
  margin: auto;
}
/* case-study */
.case-study .top-text {
  display: flex;
  justify-content: space-between;
  line-height: 2;
  /* add on smaller screen */
  /* flex-wrap: wrap; */
}
.case-study .top-text h1 {
  font-size: 40px;
  width: 100%;

  width: 300px;
}
.case-study .top-text p {
  margin: auto 5px;
}
.case-study .card .card-title {
  font-weight: 900;
}

@media (max-width: 846px) {
  .case-study .top-text {
    /* add on smaller screen */
    flex-wrap: wrap;
  }
  .case-study .top-text h1 {
    font-size: 30px;
  }
}
@media (max-width: 425px) {
  .case-study .top-text h1 {
    width: auto;
    margin: 0 auto;
    text-align: center;

    font-size: 25px;
  }
  .case-study .top-text {
    text-align: center;
  }
}
/* technologies */
.technologies .card {
  overflow: hidden;
  position: relative;
  height: 380px;
  border-radius: 0;
}
.technologies .card .tech {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.technologies .card .tech .box {
  border: solid #ddd 1px;
  padding: 20px 30px;
  margin: 10px 0;
}
.technologies .card .tech .box .text {
  font-weight: 900;
  font-size: 25px;
}
.technologies .card .tech .box .icon img {
  width: 50px;
}
@media (max-width: 623px) {
  .technologies .card {
    height: 415px;
  }
  .technologies .card h1 {
    font-size: 25px;
  }
  .technologies .card .card-img {
    min-width: 800px;
  }
}
@media (max-width: 532px) {
  .technologies .card {
    height: 500px;
  }
  .technologies .card h1 {
    font-size: 20px;
  }
}
@media (max-width: 480px) {
  .technologies .card {
    height: 570px;
  }
  .technologies .card .card-img {
    min-width: 1000px;
  }
}
@media (max-width: 363px) {
  .technologies .card {
    height: 767px;
  }
  .technologies .card .card-img {
    min-width: 1500px;
  }
}
@media (max-width: 310px) {
  .technologies .card {
    height: 897px;
  }
}
/* footer-section */

.footer-section {
  background-color: rgb(34, 31, 60);
  color: #ddd;
}

@media (max-width: 425px) {
  footer .logo-col {
    width: 280px;
  }
}

/*  */
@-webkit-keyframes animation {
  from {
    opacity: 0;
    -webkit-transform: scale(1.2) rotateX(45deg);
    transform: scale(1.2) rotateX(45deg);
  }
  to {
  }
}

@-webkit-keyframes animation2 {
  from {
    opacity: 0;
    -webkit-transform: scale(1.2) rotateX(45deg);
    transform: scale(1.2) rotateX(45deg);
  }
  to {
  }
}

.card-slider div p {
  color: #1c1c1c;
  position: absolute;
  bottom: -65px;
  font-size: 18px;

  font-family: "Roboto", sans-serif;
}
.card-slider {
  -webkit-animation: animation ease 1s;
  animation-delay: 0.8s;
  animation-fill-mode: backwards;

  margin: 0px auto 20px auto;
  height: 380px;
  padding: 40px;
  top: 100px;
  transition: ease-in-out 0.2s;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.card-slider .slide img {
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: solid blue;
  -webkit-user-drag: none;
  user-drag: none;
  -moz-user-drag: none;
}

.card-slider .slide {
  -webkit-user-select: none;
  user-select: none;
  -moz-user-select: none;
  position: absolute;
  height: 220px;
  width: 250px;

  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
  background: #fcfcfc;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  text-align: center;
  border: 12px white solid;
  box-sizing: border-box;
  border-bottom: 55px white solid;
  border-radius: 5px;
}
@media (max-width: 425px) {
}
.transition {
  -webkit-transition: cubic-bezier(0, 1.95, 0.49, 0.73) 0.4s;
  -moz-transition: cubic-bezier(0, 1.95, 0.49, 0.73) 0.4s;
  transition: cubic-bezier(0, 1.95, 0.49, 0.73) 0.4s;
}

/*  */

/* ====== About page ======= */
.page-card {
  background-color: rgb(20, 29, 56);
  color: #fff;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  font-family: "Roboto", sans-serif;
  font-size: 30px;
  font-weight: 900;
  text-shadow: 1px 1px 10px rgb(2, 17, 32);
  background-image: url("../images/top-page-image.webp");
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: -10px -555px;
  position: relative;
}
.page-card .container {
  z-index: 1;
  font-weight: 900;
}
.page-card::after {
  content: "";
  background-color: rgba(20, 29, 56, 0.539);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1px;
}

@media (max-width: 1440px) {
  .page-card {
    background-position: -743px -648px;
  }
}
@media (max-width: 768px) {
  .page-card {
    background-size: 3000px;
    background-position: -743px -648px;
  }
}
@media (max-width: 425px) {
  .page-card {
    height: 100px;
    background-size: 2000px;

    background-position: -743px -648px;
  }
}

.form-div {
  padding: 50px 20px;
}
.form-div .form-col {
  padding: 50px;
  background-color: rgb(20, 29, 56);
  color: #fff;
}
.form-div .text-col {
  padding: 30px;
}
.contact-card-div {
  margin-bottom: 20px;
}
.contact-card-div .contact-card {
  display: flex;
  padding: 10px;
}
.contact-card-div .contact-card:hover {
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
.contact-card-div .contact-card .icon-div {
  width: 50px;

  margin-right: 5px;
}
.contact-card-div .contact-card .text-div {
  width: 100%;
}
.contact-card-div .contact-card .icon-div img {
  width: 100%;
}
@media (max-width: 425px) {
  .form-div .text-col {
    padding: 10px;
  }
  .form-div .form-col {
    padding: 50px 20px;
  }
}

/* other page design */
.card-div {
  border: solid #ddd 1px;
  padding: 20px;
  margin: 10px 5px;
  border-radius: 20px;
  background-color: #fff;
  color: #000;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  line-height: 2.2;
  font-size: 18px;
}

.content-table b,
.card-div .card-head {
  color: rgb(17, 146, 255);
}

.card-div .card-head {
  font-weight: 700;
  font-size: 25px;
}

.card-div .card-head:hover {
  font-size: 25.5px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.tableSticky {
  position: fixed;
  top: 100px;
  width: 24%;
  margin-left: 5px;
}

.content-table b {
  margin-left: 10px;
  font-size: 20px;
}

.content-table {
  padding: 10px;
}

.content-table ul {
  padding: 0px;
  list-style: none;
}

.content-table ul a {
  text-decoration: none;
}

.content-table ul li:hover {
  border-left: solid blue;
}

.content-table ul li {
  font-weight: 500;
  padding: 10px;
  font-size: 18px;
}
@media (max-width: 767px) {
  .content-table label {
    position: absolute;
    clear: both;
  }
  #content-table-toggle-btn {
    position: fixed;
    display: flex;
    text-align: center;
    top: 135px;
    left: -65px;
    width: 150px;
    z-index: 1px;
    transform: rotate(90deg);
    background-color: rgba(0, 0, 0, 0.467);
    color: #fff;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.301);
    transition: top ease 1s;
    transition: transform ease 1s;
    display: none;
  }
  #content-table-toggle-btn::before {
    content: "Page content";
    font-weight: 700;
  }
  .tableSticky {
    background-color: rgba(255, 255, 255, 0.964);

    width: 0;
    overflow: hidden;
    padding: 0px;
    top: 136px;
    transition: width ease 1s;
  }
  #content-table-toggle:checked ~ #content-table-toggle-btn {
    top: 111px;
    left: 0;
    transform: rotate(0deg);
  }
  #content-table-toggle:checked ~ #content-table-toggle-btn::before {
    content: "close";
    transform: rotate(0deg);
  }
  #content-table-toggle:checked ~ .page-content .tableSticky {
    width: 300px;
  }
}

/* About-us-page */
/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
  background-color: transparent;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.flip-box,
.flip-box img {
  width: 100%;
  max-width: 300px;
  height: 390px;
  margin: 0 auto;
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-box-back {
  background-color: rgb(0, 138, 255);
  color: white;
  transform: rotateY(180deg);
}
.flip-box-back a {
  color: white;
}
.flip-box-back a:hover {
  color: rgb(236, 236, 236);
  font-size: larger;
}
.dark-bg {
  background-color: rgb(20, 29, 56);
  color: #fff;
}
.fit-screen-xl {
  max-width: 1500px;
}
.fit-screen-lg {
  max-width: 900px;
}
.fit-screen-sm {
  max-width: 250px;
}
.fit-screen-height-sm {
  max-height: 267px;
  overflow: hidden;
}

/* Career page */
.careers-list {
  list-style: square;
}

.careers-list li {
  margin: 10px 0;
  line-height: 2;
}
a.button {
  color: #fff;
  background-color: rgb(0, 138, 255);
  padding: 20px;
  text-decoration: none;
}