/* GLOBAL STYLES
-------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  color: #ebebeb;
}

/* width */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

/* Track */
.user-content::-webkit-scrollbar-track,
.user-content::-webkit-scrollbar-corner {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #999;
  border: 3px solid transparent;
  border-radius: 6px;
  background-clip: content-box;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #4c4cff;
  border: 2px solid transparent;
  background-clip: content-box;
}

.gauss-bg-primary {
  background-color: #4c4cff !important;
}

.gauss-bg-secondary {
  background-color: #2e2e8a !important;
}

.gauss-bg-dark {
  color: #f8f9fa;
  background-color: #10101f !important;
}

.gauss-logo {
  height: 30px;
  transition: transform 0.15s ease-in-out;
}

.company-logo {
  max-width: 100%;
  max-height: 125px;
  padding: 1.5rem;
}

.shadow-header {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
}

.img-shadow {
  box-shadow: 0 0.3rem 1.5rem rgba(0, 0, 0, 0.33) !important;
}

.bg-img-lowpoly {
  background-image: url("../img/lowpoly_bg_transparent.png");
  background-position: center;
  background-size: cover;
  background-repeat: repeat-y;
}

.bg-img-laser {
  background-image: url("../img/laser_machine.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: repeat-y;
}

.bg-img-operator {
  background-image: url("../img/operator.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: repeat-y;
}

.bg-img-factory {
  background-image: url("../img/factory_floor.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: repeat-y;
}

.gauss-text-primary {
  color: #4c4cff !important;
}

.gauss-text-secondary {
  color: #2e2e8a !important;
}

.section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.small {
  font-size: smaller;
  color: rgb(100, 100, 100);
}

.page-title {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.heading-1 {
  font-size: 1.3em;
  font-weight: 400;
}

.heading-2 {
  font-size: 1.15em;
  font-weight: 400;
}

.btn-primary {
  color: white !important;
  background-color: #4c4cff !important;
  border-color: #4c4cff !important;
  border-radius: 0.5em !important;
}

.btn-outline-primary {
  color: #4c4cff !important;
  border-color: #4c4cff !important;
  border-radius: 0.5em !important;
}

.btn-outline-primary:hover {
  color: white !important;
  background-color: #4c4cff !important;
  border-color: #4c4cff !important;
  box-shadow: 0.1em 0.2em 0.1em rgba(100, 100, 255, 50%);
}

.btn-outline-light {
  color: white !important;
  border-color: white !important;
  border-radius: 0.5em !important;
  transition: all 0.2s ease;
}

.btn-outline-light:hover {
  color: #4c4cff !important;
  background-color: white !important;
  text-decoration: none;
  box-shadow: 0.1em 0.2em 0.1em rgba(100, 100, 255, 50%);
}

.profile-fa {
  font-size: 1.25rem !important;
  width: 1.875rem;
  padding: 0.25rem;
  margin: 0.5rem 0.25rem 0 0.25rem;
  color: #555;
  border-radius: 0.5rem;
  border: 1px solid #555;
  text-align: center;
  text-decoration: none !important;
  transition: all 0.15s ease-in-out;
}

.profile-fa:hover {
  color: white;
  background-color: #4c4cff;
  border: 1px solid #4c4cff;
}

.section-title {
  font-size: 3em;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
  width: 100%;
  text-align: center;
}

.lead {
  font-size: 1.8em !important;
}

.vertical-center {
  min-height: 100%;
  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh;
  /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

.laser-icon {
  text-align: center;
  margin: .5rem;
  padding: .5rem;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 1500px) {
  .section-title {
    font-size: 2.4em;
  }

  .lead {
    font-size: 1.4em !important;
  }
}

@media (max-width: 991px) {
  .section-title {
    font-size: 2.0em;
  }
}

@media (max-width: 767px) {
  .navbar {
    padding: 0.75rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .gauss-logo {
    height: 24px;
  }

  .page-title {
    font-size: 2.0rem;
  }
}