header {
  @extend .bg-theme, .p-3, .text-white;

  font-size: 14px !important;
  line-height: 1.625rem;
  letter-spacing: 0.03em;

  &.header {
    min-height: auto;
  }

  nav {
    @extend .container, .navbar, .navbar-expand-lg;

    .collapse {
      @extend .justify-content-end;

      ul, div {
        @extend .navbar-nav;
    
        div, li {
          @extend .nav-item, .nav-link, .pr-3;
    
          &:nth-child(2n) {
              @extend .pl-4
          }
        }
        img {
          width: 100%;
          max-width: 25px;
          margin-left: 20px;
          margin-right: 20px;
        }
        img:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .banner {
   @extend .container, .p-5, .pb-0, .text-center;

   h4 {
      @extend .p-3, .pb-1;
      font-family: SFUIDisplayRegular;
      font-weight: bold;
      font-size: 2rem;
      line-height: 3.75rem;
   }

   h3 {
      @extend .display-4, .p-2;
   }
   
   h2 {
      @extend .display-3, .p-2;
   }

   h1 {
      @extend .display-2, .p-2, .pb-3;
   padding-top: 0px !important;
   padding-bottom: 0px !important;
   }

   p {
     @extend .p-3;
     width: 98%;
   padding-top: 0px !important;
   padding-bottom: 0px !important;
   }
  }
}