/* Color Palette */
:root {
  --dark-blue: #11263c;
  --airite-blue: #078ae2; /* #4398d2; */
  --off-white: #f9f9f9;
  --soft-gray-blue: #dce6ed;
  --hover-accent: #b2cce1;
  --button-dark: #3a6d94;
  --gray-text: #444;
  --light-gray-text: #666;
}
body {
  background-color: var(--off-white); /* Off white */
  color: var(--gray-text);
}
header img {
  max-height: 50px;
  margin-right: 30px;
  
}
.dropdown-menu a {
    color: white;
}
.dropdown-menu a:hover {
    background-color: var(--airite-blue);
    color: white;
}
.dropdown-menu hr {
    color: var(--off-white);
}
.bg-darkblue {
  background-color: var(--dark-blue); /*#0a2342; Dark blue */
}
.btn-blue {
  background-color: var(--airite-blue);
  color: white;
}
.btn-blue:hover {
  background-color: var(--soft-gray-blue);
  color: var(--dark-blue);
}
.bg-offwhite {
  background-color: var(--off-white);
}
.bg-gradient-blue {
    background-color: var(--off-white);
}
.nav-link {
    font-size: 1.1rem;
    margin: 0 15px;
    color: var(--off-white);
}
.nav-link:hover {
    color var(--dark-blue);
}
.phone {
    color: var(--airite-blue);
    font-weight: 600;
}
.phone:hover {
    color: var(--airite-blue);
}
.hero {
  min-height: 80vh;
  background-image:
    linear-gradient(110deg, rgba(17,38,60,0.92), rgba(10,35,66,0.20)),
    var(--hero-image);
  background-size:
    cover,
    cover;
  background-position:
    center,
    40% 0%;
  background-repeat:
    no-repeat,
    no-repeat;
  animation: panning 50s infinite linear;
}

@keyframes panning {
  0% {
    background-position: center, 40% 0%;
  }
  50% {
    background-position: center, 70% 0%;
  }
  100% {
    background-position: center, 40% 0%;
  }
}
.hero h1 {
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.hero p {
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  max-width: 650px;
}
h2 {
    color: var(--dark-blue);
}
.card-title {
    color: var(--airite-blue);
    font-weight: 700;
}
.card-text {
    color: var(--light-gray-text);
}
.mission-section {
     position: relative;
     padding: 4rem 0;
}
.dark-box {
     background: var(--dark-blue);
     color: white;
     padding: 2rem;
     box-shadow: 0 8px 12px rgba(0, 0, 0, 1);
     position: relative;
     z-index: 2;
}
.dark-box h2 {
    color: var(--airite-blue);
}
.dark-box a {
    color: white;
}
.light-box {
    background: var(--airite-blue);
    color: white;
    padding: 2rem;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 1);
    position: relative;
    z-index: 2;
}
.white-box {
    background-color: white;
    padding: 2rem;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 1);
    position: relative;
    z-index: 2;
}
.white-box h2 {
    color: var(--airite-blue);
}
.white-box a {
    color: var(--grey-text);
}
.image-box img {
     width: 100%;
     height: auto;
     border-radius: .5rem;
}
.overlap-col {
     margin-left: -90px; /* creates the overlap */
     z-index: 1;
}
#industries img {
    max-height: 250px;
}
#call2action h2 {
    color: var(--airite-blue);
}
.slideanim {visibility:hidden;}
  .slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
  }
  @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    }
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }
.fade-in {
  opacity: 0;
  transform: translateY(0%);
  transition: opacity 2.5s ease-out, transform 2.5s ease-out;
  display: block;
  max-width: 100%;
  margin: 50px auto;
}
.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 767px) {
    .overlap-col {
        margin-left: 0; /* remove overlap on small screens */
    }
    footer .footer-col {
      max-width: 240px;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
    }

    footer .footer-col + .footer-col {
      margin-top: 2rem;
    }
}