@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Source+Sans+Pro:wght@300;400;600;700&display=swap');

:root {
  --primary: #0a1931;
  --secondary: #185adb;
  --highlight: #ffc947;
  --font-dark: rgba(0, 0, 0, 0.87);
  --font-dark-secondary: rgba(0, 0, 0, 0.6);
  --font-dark-disabled: rgba(0, 0, 0, 0.38);
  --font-light: rgba(255, 255, 255, 1);
  --font-light-secondary: rgba(255, 255, 255, .7);
  --font-light-disabled: rgba(255, 255, 255, .5);
}

html,body {
  background: #f3f3f3;
  color: var(--font-dark);
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  line-height: 1.65;
  min-width: 20rem;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6, nav {
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
}

body {
  background-image: url('../images/body-bg.jpg');
  background-size: cover;
}

.site-wrapper {
  background-color: #f3f3f3;
}

/* Helpers */
.has-box-shadow {
  box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
}

.has-border-radius-2 {
  border-radius: .5rem;
}

.has-highlight-left {
  border-left: 4px solid var(--highlight);
  padding-left: 1rem;
}

.has-text-highlight {
  color: var(--highlight);
}

.p-4-mobile {
  padding: 1rem !important;
}

.px-4-mobile {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

@media screen and (min-width: 769px) {
  .p-4-mobile {
    padding: 0;
  }

  .px-4-mobile {
    padding-left: 0;
    padding-right: 0;
  }

  .p-6-tablet {
    padding: 3rem !important;
  }

  .px-6-tablet {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

/* Layout */
.section {
  padding: 2rem 1rem;
}

@media screen and (min-width: 769px) {
  .section {
    padding: 5rem 1.5rem;
  }
}

/* Slides */
@-webkit-keyframes slide-up {
  0% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slide-up {
  0% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
  }
}

@-webkit-keyframes slide-right {
  0% {
    transform: translateX(1400px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slide-right {
  0% {
    transform: translateX(1400px);
  }
  100% {
    transform: translateX(0);
  }
}

.slide-container {
  overflow: hidden;
}

.slide-up {
  -webkit-animation: slide-up 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
          animation: slide-up 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.slide-right {
  -webkit-animation: slide-right 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
          animation: slide-right 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
}

/* Hero */
.hero {
  background-image: url('../images/smith-johnson-hero.jpg');
  background-size: cover;
  background-position-y: center;
  background-position-x: -10rem;
  padding-top: 0;
  position: relative;
}

.hero-overlay {
  background-color: rgba(0, 0, 0, .5);
}

.hero-body .title {
  color: var(--font-light-secondary);
  font-size: 3rem !important;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 auto;
  max-width: 60rem;
  -webkit-animation-delay: 0;
          animation-delay: 0;
}

.hero-body .title .slide-container:nth-child(1) .slide-right {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.hero-body .title .slide-container:nth-child(2) {
  margin-left: .5rem;
}

.hero-body .title .slide-container:nth-child(2) .slide-right {
  -webkit-animation-delay: 0.05s;
          animation-delay: 0.05s;
}

.hero-body .title .slide-container:nth-child(3) {
  margin-left: 1rem;
}

.hero-body .title .slide-container:nth-child(3) .slide-right {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.hero-body .title > div {
  margin: -0.5rem 0;
}

@media screen and (min-width: 481px) {
  .hero-body .title {
    font-size: 4.5rem !important;
  }

  .hero-body .title .slide-container:nth-child(2) {
    margin-left: 1.5rem;
  }

  .hero-body .title .slide-container:nth-child(3) {
    margin-left: 3rem;
  }

  .hero-body .title > div {
    margin: -1rem 0;
  }
}

@media screen and (min-width: 769px) {
  .hero {
    background-position-x: 0;
  }

  .hero-body .title {
    font-size: 7rem !important;
  }

  .hero-body .title .slide-container:nth-child(2) {
    margin-left: 3rem;
  }

  .hero-body .title .slide-container:nth-child(3) {
    margin-left: 6rem;
  }

  .hero-body .title > div {
    margin: -2rem 0;
  }
}

@media screen and (min-width: 1024px) {
  .hero-body .title {
    font-size: 9rem !important;
  }

  .hero-body .title .slide-container:nth-child(2) {
    margin-left: 4rem;
  }

  .hero-body .title .slide-container:nth-child(3) {
    margin-left: 8rem;
  }

  .hero-body .title > div {
    margin: -3rem 0;
  }
}

@media screen and (min-width: 1216px) {
  .hero-body .title {
    font-size: 10rem !important;
  }

  .hero-body .title .slide-container:nth-child(2) {
    margin-left: 5rem;
  }

  .hero-body .title .slide-container:nth-child(3) {
    margin-left: 10rem;
  }

  .hero-body .title > div {
    margin: -3.5rem 0;
  }
}

/* Navbar */
.navbar-item {
  align-self: center;
  font-size: 1.2rem;
}

.navbar-item:hover {
  background-color: #f2f2f2;
}

.navbar-item a {
  color: var(--font-dark);
}

.navbar-item:nth-child(1) a {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.navbar-item:nth-child(2) a {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.navbar-item:nth-child(3) a {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.navbar-item:nth-child(4) a {
  -webkit-animation-delay: 0;
          animation-delay: 0;
}

.navbar-item:focus {
  background-color: transparent !important;
}

.navbar-item img {
  max-height: 2.5rem;
}

@media screen and (min-width: 769px) {
  .navbar-item img {
    max-height: 5rem;
  }
}

@media screen and (max-width: 1023px) {
  .navbar-menu {
    background-color: rgba(255, 255, 255, .5);
  }

  .navbar-menu .navbar-item a {
    color: var(--font-dark);
  }

  .navbar-menu .navbar-item a:hover {
    color: var(--font-dark-secondary);
  }
}

/* Services */
.services p {
  font-size: .875rem;
  padding: 0 0 1rem;
}

.services .card {
  height: 100%;
}

/* Consultation */
.consultation {
  background-image: url('../images/consultation-bg.jpg');
  background-position: top right;
  background-size: cover;
}

/* Stats */
.stats {
  background-color: var(--primary);
}

.stats .column {
  flex-basis: auto;
  width: 100%;
}

.stats .box {
  height: 100%;
  margin: 0 auto;
  /* max-width: 15rem; */
}

.stats i {
  color: var(--secondary);
  font-size: 2rem;
  opacity: .7;
}

.stats span {
  color: var(--font-dark-secondary);
}

@media screen and (min-width: 481px) {
  .stats .column {
    flex: none;
    width: 50%;
  }
}

@media screen and (min-width: 769px) {
  .stats .column {
    width: 25%;
  }
}

/* About */
.about .column {
  padding: 0;
}

.about .quote-container {
  background-image: url('../images/gavel.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  padding: 2rem;
  width: 100%;
}

.about .text-container {
  height: 100%;
}

@media screen and (min-width: 769px) {
  .about .quote-container {
    padding: 4rem;
  }
}

/* Location */
.location .column {
  padding: 0;
}

.location .map {
  height: 100%;
}

.location .map iframe {
  filter: brightness( 100% ) contrast( 100% ) saturate( 0% ) blur( 0px ) hue-rotate( 0deg );
}

.location .content i {
  color: var(--highlight);
  margin-right: 1rem;
  opacity: .6;
}

/* Footer */
.footer {
  background-color: var(--primary);
}

.footer img {
  max-width: 15rem;
}