/* navbar regular css start */

.site-navbar {
  background-color: #f7f7f7;

  display        : flex;
  justify-content: flex-end;
  align-items    : self-end;

  z-index: 999;

  box-shadow: 0 5px 5px -3px rgb(0 0 0 / 30%);
}

.site-navbar {
  min-height: 64px;
}

.site-navbar ul {
/*  margin    : 0;
  padding   : 0; */
  display   : flex;
}

/* these two padding fellas control the navigation items size, padding, etc. */

nav .navbar ul li {
  list-style: none;
  padding: 24px 0;
  border: 0px blue solid;

  margin: 0;
}




.site-navbar ul li a {
/*  padding: 26px 16px 16px 16px;  */

  font-family: "Helvetica Neue LT W01_77 Bd Cn", Arial, Helvetica, sans-serif;
  color      : #747474;
  font-weight: normal;
  font-size  : 1.2rem;

  text-transform : uppercase;
  text-decoration: none;
  transition     : none;

  padding: 22px 1em;
}


nav .navbar ul li a:hover {
  color           : #ffffff;
  background-color: #ee7f17;
  transition      : 0.3s ease background-color;
  padding: 22px 1em;
}

nav .navbar ul li.active {
  background-color: #ee7f17;
  transition      : 0.3s ease background-color;
}

nav .navbar ul li.active a {
  color: #ffffff;
}

/* navbar regular css end */


.nav-toggler-wrapper {
  margin: 8px 8px 0 8px;
}

/* nav-toggler css start */
.nav-toggler {
  border          : 2px solid #000;
  padding         : 5px;
  margin          : 0 0 15px 0;
  background-color: transparent;
  cursor          : pointer;
  height          : 39px;
  display         : none;
}

.nav-toggler span,
.nav-toggler span:before,
.nav-toggler span:after {
  width           : 28px;
  height          : 2px;
  background-color: #777;
  display         : block;
  transition      : 0.3s;
}

.nav-toggler span:before {
  content  : '';
  transform: translateY(-9px);
}

.nav-toggler span:after {
  content  : '';
  transform: translateY(6px);
}

.nav-toggler.toggler-open span {
  background-color: transparent;
}

.nav-toggler.toggler-open span:before {
  transform: translateY(0px) rotate(45deg);
}

.nav-toggler.toggler-open span:after {
  transform: translateY(-2px) rotate(-45deg);
}

/* nav-toggler css start */




/* intro-area css end */


/* mobile breakpoint breakpoint breakpoint breakpoint breakpoint breakpoint breakpoint start */

@media screen and (min-width: 1000px) {

  .site-navbar ul li a {
    font-size: 1.3rem;
  }
}

/* burger menu styles breakpoint */



@media screen and (max-width: 850px) {

  nav .navbar ul {
    text-align: left;
  }

  nav .navbar ul li {
    padding: 0;
  }

  .site-navbar ul li {
    width: calc(100% - 20px);
/*    margin: 0 0 0 10px; */
  }

  .site-navbar ul li a {

/*    padding: 10px; */
    display: inline-block;
    width: calc(100% - 20px);

    font-size: 1.6rem;
  }

  nav .navbar ul li a:hover {
    color           : rgb(255, 255, 255);
    background-color: #ee7f17;
    transition      : 0.3s ease background-color;
  }



  /* navbar css for mobile start */

  .nav-toggler {
    display: block;
  }

  .site-navbar {
    min-height: 64px;
  }

  .site-navbar ul {
    position        : absolute;
    width           : 100%;
    height          : calc(100vh - 60px);
    left            : 0;
    flex-direction  : column;
/*    align-items     : center;  */
    background-color: #f7f7f7;
    max-height      : 0;
    overflow        : hidden;
/*    transition      : 0.3s;  */

}

  .site-navbar ul li a:hover {
    background-color: rgba(255, 255, 255, .1);
  }

  .site-navbar ul.open {

    min-height: 341px;
    overflow  : visible;
    z-index   : 999;
    box-shadow: 0 5px 5px -3px rgb(0 0 0 / 30%);

  }

  .intro-area h2 {
    font-size    : 36px;
    margin-bottom: 15px;
  }

  /* navbar css for mobile end */
}

/* mobile breakpoint end */








/* navbar FOOTER css */

footer ul li {
  display: inline;
}

footer ul li a {
  padding: 22px 16px 8px 16px;

  font-family: "Helvetica Neue LT W01_77 Bd Cn", Arial, Helvetica, sans-serif;
  color      : #747474;
  font-weight: normal;
  font-size  : 1.4rem;

  text-transform : uppercase;
  text-decoration: none;
  transition     : all 0.3s;
}

.navbar ul li a:hover {
  background: rgba(255, 255, 255, .1);
}

footer ul li a:active,
footer ul li a:hover {
  color: #ee7f17;
}

/* navbar FOOTER css end */



/* make navigation sticky */
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top     : 0;
}