style.scss

@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

// font-family: 'Righteous', cursive;
// font-family: 'Lato', sans-serif;
// font-family: 'Roboto', sans-serif;

body {
  overflow-x: hidden;
  font-family: 'Roboto', sans-serif;
  color: #0A1612;
}

/*--- Nav Scrolling Offset ---*/
.offset::before {
  height: 4rem;
  margin-top: -4rem; 
  content: "";
  display: block;
}

/*--- Extra Bootstrap Padding ---*/
[class*="col-"] {
  padding: 1rem;
}
.btn-sm {
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.25);
}

/*============ NAVIGATION ============*/

.navbar {
  padding: 0.7rem 1rem;
  text-transform: uppercase;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  transition: background-color 0.5s ease 0s;
  .navbar-brand {
    text-decoration: none;
    font-family: 'Righteous', cursive;
    color: #C5C1C0;
    font-size: 1.7rem; 
  }
  .brand-name {
    color: #F7CE3E;
  }
  .navbar-nav li {
    padding-right: .8rem;
  }
  .navbar-nav .nav-link {
    color: #C5C1C0;
    padding-top: .8rem;
    transition: 0.3s;
  }
  .navbar-nav .nav-link.active,
  .navbar-nav .nav-link:hover {
    color: #F7CE3E;
  }
}
.navbar.solid {
  background: rgba(0, 0, 0, 0.7)!important;
  transition: background-color 0.5s ease 0s;
}
.svg-inline--fa.fa-w-14 {
  color: #C5C1C0;
  font-size: 1.6rem;
}

/*============ LANDING ============*/

.home-inner {
  background-image: radial-gradient(rgba(10,22,18,0.8), rgba(10,22,18,0.98)), url("./img/apple-black-and-white-black-and-white-169573.jpg");
}
.caption {
  width: 100%;
  max-width: 100%;
  position: absolute;
  top: 30%;
}
  .svg-content {
    top: 0;
    left: 0;
    max-width: 960px;
  }
.st0 {
  stroke: #C5C1C0;
  fill: #C5C1C0;
  stroke-width:3px;
  stroke-miterlimit:10px;
  stroke-dasharray: 2100;
  opacity: 10;
  animation: animate 2.5s;
  position: absolute;
}
@keyframes animate {
  0% {
    opacity: 0;
    fill: none;
    stroke-dashoffset: 2100;
  }
  30% {
    opacity: 10;
    fill: none;
    stroke-dashoffset: 2100;
  }
  85% {
    fill: rgba(0, 255, 255, 0);
  }
  100% {
    opacity: 100;
    fill: #C5C1C0;
    stroke-dashoffset: 0;
  }
}
.btn-lg {
  border: solid 2px #F7CE3E;
  color: #F7CE3E;
  border-radius: 0;
  padding: 0.8rem 1.5rem;
  margin-top: 1.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block!important;
}
.btn-lg:hover {
  border: solid 2px #F7CE3E;
  background-color: #F7CE3E;
}

/*============ DESCRIPTION ============*/
.narrow {
  width: 75%;
  margin: 0 auto;
  padding-top: 2rem;
  .btn-sm {
    border-width: medium;
    border-radius: 0;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 1rem;
    color: #F7CE3E;
  }
  .btn-yellow {
    border-color: #F7CE3E;
    background-color: #F7CE3E;
    color: #0A1612;

  }
  .btn-yellow:hover, 
  .btn-yellow:focus {
    border-color: #DEB937;
    background-color: #DEB937;
    color: #0A1612;
    
  }
}


/* Devices under 992px (lg) */
@media (max-width: 991px) {
  .btn-lg {
      padding: 0.7rem 1.2rem;
      font-size: 1rem;
  }
  .narrow h1 {
      font-size: 2.1rem;
  }
}

/* Devices under 768px (md) */
@media (max-width: 767px) {
  .btn-lg {
    padding: 0.6rem 1.1rem;
    font-size: 1rem;
  }
  .narrow h1 {
    font-size: 1.8rem;
  }
  .clients img {
    max-width: 50%;
    margin: 0 auto;
  }
  .top-scroll {
      display: none!important;
  }
}

/* Devices under 576px (sm) */
@media (max-width: 575px) {
  .btn-lg {
      padding: 0.4rem 0.9rem;
      font-size: 0.9rem;
  }
  .narrow {
      width: 85%;
  }
}



/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/