@import url(https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;700;900&display=swap);
html, body {
  font-family: "Raleway", sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", sans-serif !important;
}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
  color: #222;
}

.footer-widget img {
  max-width: 64px;
}

.hero-section .hero-content h1 {
  font-family: "Raleway", sans-serif;
  line-height: 60px;
  font-weight: 900;
  font-size: 68px;
}
@media only screen and (max-width: 767px) {
  .hero-section .hero-content h1 {
    line-height: 50px;
    font-size: 54px;
    margin-top: 30px;
  }
}
.hero-section .hero-content h1 span {
  color: #222;
}
@media only screen and (max-width: 767px) {
  .hero-section .hero-content p {
    margin-bottom: 35px;
    font-size: 16px;
    line-height: 24px;
  }
}
.hero-section .hero-content .btn-secondary {
  color: black !important;
  background-color: white !important;
}

.hero-section .hero-content .scroll-bottom {
  transform: translateY(-25px);
}

.navbar-nav .nav-item a::before {
  background: white;
  bottom: 0;
}

.navbar-area.sticky .nav-item a::before {
  background: #5864FF;
  bottom: 0;
}

.navbar-brand img {
  width: 120px;
}

.text-primary {
  color: #5864FF !important;
}

@media only screen and (max-width: 767px) {
  .main-btn {
    padding: 12px 18px !important;
  }
}