body {
  background-color: black;
}

.intro {
  background: url(../img/intro.png) center no-repeat;
  background-size: cover;
}
.btn {
  font-size: 20px;
  padding: 30px 30px;
  background-color: blue;
  border: none;
  color: white;

  transition: 0.25s;
}
.btn:hover {
  scale: 1.1;
  background-color: blue;
  border: none;
  color: white;
}
.img-card {
  max-width: 100px;
}
.arrow-2 {
  cursor: pointer;
  height: 135px;
  width: 80px;
  position: relative;
  margin: 20px;
  transform: rotate(90deg);
}
.arrow-2-top, 
.arrow-2-bottom {
  background: blue;
  height: 8px;
  left: -30px;
  position: absolute;
  top: 60px;
  width: 80px;
}
.arrow-2-top {
  top: 64px;
}
.arrow-2-top {
  transform: rotate(45deg);
  transform-origin: bottom right;
}
.arrow-2-bottom {
  transform: rotate(-45deg);
  transform-origin: top right;
}
.arrow-2-top::after, 
.arrow-2-bottom::after {
  background: lightblue;
  content: '';
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.15s;
}
.arrow-2-top::after {
  left: 100%;
  right: 0;
  transition-delay: 0s;
}
.arrow-2-bottom::after {
  left: 0;
  right: 100%;
  transition-delay: 0.15s;
}
.arrow-2:hover .arrow-2-top::after {
  left: 0;
  transition-delay: 0.15s;
}
.arrow-2:hover .arrow-2-bottom::after {
  right: 0;
  transition-delay: 0s;
}

.white-text {
  color: white !important;
}

.nav-logo {
  padding-left: 6px;
  color: white !important;
  font-weight: bold;
}
.nav-text {
  color: white !important;
}
.nav-text:hover {
  color: white !important;
  background-color: #232323 !important;
}

.box {
  background-color: #242424;
  color: white !important;
}
.gray-block {
  background: url(../img/gray.png) center no-repeat;
  background-size: cover;

}