/*Custom CSS*/

@font-face {
  font-family: "Avenir-Black";
  src: url("/assets/fonts/avenir-black.woff");
}

:root {
  --dark-blue: #242c40;
  --light-blue: #2f87c7;
}

a {
  text-decoration: none;
}

.ixd-logo {
  content: url("/assets/images/logo-black.png");
  margin-top: -20px;
  margin-bottom: -20px;
  height: 100px;
}

.ixd-logo-shrink {
  content: url("/assets/images/logo-light.png");
  margin-top: -20px;
  margin-bottom: -20px;
  height: 100px;
}

.bg-particle {
  position: relative;
}

.bg-particle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeat url("/assets/images/animated-bg.svg");
  opacity: 0.7;
}

.ta-center {
  text-align: center;
}

.bg-dark {
  background-color: #242c40 !important;
}

.tc-dark {
  color: #ffffff !important;
}

.tc-primary {
  color: var(--light-blue) !important;
}

.tc-dark-blue {
  color: var(--dark-blue) !important;
}

.tc-light {
  color: black !important;
}

.text-dark-blue {
  color: var(--dark-blue);
}

.icon-large {
  font-size: 2rem;
}

.image-container {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  position: relative;
  overflow: hidden;
  border-radius: 300px;
  border: 2px solid var(--light-blue);
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}

.round-crew-image {
  border-radius: 300px;
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}

.image-container .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.image-container:hover .after {
  display: block;
  background: rgba(0, 0, 0, 0.7);
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  opacity: 0;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 200ms;
  animation-duration: 200ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.image-container:hover .round-crew-image {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.image-container:hover a:hover {
  color: white;
}

.image-overlay-column {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
}

.image-overlay-icon {
  font-size: 3rem;
}

.top-content-padding {
  padding-top: 150px;
}

.bottom-content-padding {
  padding-bottom: 150px;
}

.blog-topic-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.blog-topic {
  margin: 5px;
  color: #1a202f;
  background-color: #2f87c7;
  border: none;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.blog-topic.active,
.blog-topic:focus {
  color: #2f87c7;
  background-color: #1a202f;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  outline: none;
  border: solid #2f87c7 1px;
}

.blog-card {
  overflow: hidden;
  background-color: #1a202f;
  border: solid #1a202f 1px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.blog-card:hover {
  background-color: #000000;
}

.blog-item {
  width: 100%;
}

@media (min-width: 600px) {
  .blog-item {
    width: 50%;
  }
}

@media (min-width: 900px) {
  .blog-item {
    width: 33%;
  }
}

.blog-image-container {
  position: relative;
  width: 100%;
}

.blog-image {
  width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.blog-author-image {
  height: 35px;
  width: 35px;
}

.blog-description {
  font-size: 0.9em;
}

.blog-tag,
.blog-tag:focus {
  padding: 1px 4px;
  margin-right: 4px;
  font-size: 0.8em;
  color: #242c40;
  background-color: #ffffff;
  outline: none;
  border: none;
}

.blog-container img {
  max-width: 100%;
}

.hover-enlarge {
  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}

.hover-enlarge:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.tech-logos-wrapper,
.clients-wrapper,
.awards-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.tech-logo {
  max-width: 100px;
  height: 50px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

@media (max-width: 600px) {
  .tech-logo {
    max-width: 80px;
    height: 40px;
  }
}

.clients-image {
  height: 80px;
  max-width: 160px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

@media (max-width: 600px) {
  .clients-image {
    height: 60px;
    max-width: 120px;
  }
}

.award-image {
  max-width: 200px;
  height: 120px;
  -o-object-fit: contain;
  object-fit: contain;
}

@media (max-width: 600px) {
  .award-image {
    max-width: 100px;
    height: 60px;
    -o-object-fit: contain;
    object-fit: contain;
  }
}

#services-section h3,
#values-section h3 {
  font-size: 1.5em;
  font-weight: bold;
}

@media (max-width: 1200px) {
  .nav-link {
    border-bottom: solid white;
  }

  .nav-link:active {
    color: var(--dark-blue) !important;
    font-weight: bold;
    border-bottom: solid var(--light-blue);
  }
}

#software-section h3,
#iot-section h3,
#ai-section h3 {
  font-size: 1.5em;
  font-weight: bold;
}

#software-section h2,
#iot-section h2,
#ai-section h2 {
  font-weight: bold;
}

.service-feature {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  text-align: center;
  font-size: 0.9em;
  width: 150px;
  height: 150px;
  border: 1px solid var(--light-blue);
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}

.bg-dark .service-feature {
  color: black;
}

.service-feature:hover {
  color: white;
  background-color: var(--dark-blue);
}

.service-feature img {
  height: 50px;
  width: 50px;
  object-fit: contain;
}

.mobile-view {
  z-index: 10;
  position: relative;
  height: 250px;
  max-width: 200px;
  object-fit: contain;
  transition: 0.3s ease-in;
}

.desktop-view {
  z-index: 1;
  position: relative;
  height: 250px;
  max-width: 350px;
  object-fit: contain;
  transition: 0.3s ease-in;
}

@media (min-width: 768px) {
  .service-feature {
    width: 200px;
    font-size: 1em;
  }

  .mobile-view {
    right: 8%;
  }

  .desktop-view:hover {
    z-index: 20;
  }

  .view-hover {
    transform: scale(1.15);
  }

  .view-not-hover {
    filter: grayscale(1);
    opacity: 0.2;
  }
}

.contact-form label {
  margin-bottom: 0;
}

.contact-form .form-control {
  margin-bottom: 0.5em;
  border-radius: 2px;
}

.contact-form .btn {
  padding: 8px;
  margin-top: 0.5em;
  border-radius: 2px;
  width: 150px;
}

#cookies-banner {
  z-index: 100000;
}

#cookies-banner div {
  border: 4px solid black;
  border-radius: 2px;
}

#cookies-banner button {
  border-radius: 2px;
}

#cookies-banner a:hover {
  text-decoration: underline;
}

#privacy-section * {
  word-break: break-word;
}

#privacy-section h1 {
  font-size: 2em;
  margin-top: 1em;
}

#privacy-section h2 {
  margin-top: 0.5em;
  font-size: 1.75em;
}

#privacy-section h3 {
  font-size: 1.5em;
}

#back-to-top {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

#back-to-top button {
  position: relative;
  left: 15px;
  bottom: -50px;
  font-size: 2em;
  padding: 2px;
  height: 50px;
  width: 50px;
  transition: bottom 0.5s ease-in;
}

#back-to-top button.move-in {
  bottom: 15px;
}

.quote {
  position: relative;
  font-style: italic;
  padding: 1em;
  width: auto;
  border: 1px solid var(--light-blue);
  border-radius: 2px;
}

.quote::before,
.quote::after {
  position: absolute;
  font-family: "icomoon" !important;
  font-size: 0.7em;
  color: var(--light-blue);
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.quote::before {
  content: "\f10d";
  top: 0.2em;
  left: 0.2em;
}

.quote::after {
  content: "\f10e";
  bottom: 0.2em;
  right: 0.2em;
}

.t404 {
  position: relative;
  font-size: 10rem;
  font-weight: bold;
  line-height: 1;
}

.t404.effect {
  color: #ffffff05;
  position: absolute;
  bottom: 0;
  transform-origin: center;
  transform: scale(2);
}

.bestweb-img{
  width: 150px;
  height: 150px;
}

@media (max-width: 768px) {
  .bestweb-img{
    width: 120px;
    height: 120px;
  }
}