/*setting font styles*/
@font-face {
  font-family: "Rastin-Circle";
  src: url('../font/Digi-Rastin-Plus/Digi Rastin Plus Circle.ttf') format(truetype);
}

@font-face {
  font-family: "Rastin-Line";
  src: url('../font/Digi-Rastin-Plus/Digi Rastin Plus Line.ttf') format(truetype);
}

@font-face {
  font-family: "Rastin-Rectangle";
  src: url('../font/Digi-Rastin-Plus/Digi Rastin Plus Rectangle.ttf') format(truetype);
}

/*variables*/
/*common attributes for all elements*/
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

/*setting wrapper styles*/
.wrapper {
  /*setting header styles*/
}

.wrapper .header {
  width: 90%;
  font-family: "Rastin-Line";
  overflow-x: hidden;
  animation: opacities 0.7s;
  /*setting navbar styles*/
}

.wrapper .header nav .close-menu {
  border: none;
  outline: none;
  background: none;
  opacity: 1;
}

.wrapper .header nav .close-menu img {
  transition: all 0.3s;
}

.wrapper .header nav .close-menu img:hover {
  opacity: 0.7;
}

.wrapper .header nav .login-btn,
.wrapper .header nav .user-panel-btn {
  background-color: #003B5C;
  color: #FFFFFF;
  transition: all 0.3s;
}

.wrapper .header nav .login-btn:hover,
.wrapper .header nav .user-panel-btn:hover {
  opacity: 0.7;
}

.wrapper .header nav ul li {
  list-style-type: none;
}

.wrapper .header nav ul li a {
  text-decoration: none;
  color: #000000;
  transition: all 0.3s;
}

.wrapper .header nav ul li a:hover {
  opacity: 0.5;
}

.wrapper .header nav form input {
  border: 1px solid #003B5C;
  width: 50%;
}

.wrapper .header nav form button {
  transition: all 0.3s;
}

.wrapper .header nav form button:hover {
  opacity: 0.5;
}

.wrapper .header nav .hamburger-menu {
  border: none;
  outline: none;
  background: none;
}

.wrapper .header nav .hamburger-menu img {
  transition: all 0.3s;
}

.wrapper .header nav .hamburger-menu img:hover {
  opacity: 0.7;
}

/*making header responsive for 1200px or less*/
@media screen and (max-width: 1200px) {
  .wrapper .header nav #offcanvasResponsive {
    width: 18rem;
  }
}

/*opacity animation*/
@keyframes opacities {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*# sourceMappingURL=header-style.css.map */