/*Common CSS of BHC*/

@font-face {
  font-family: Satoshi-Bold;
  src: url("../fonts/Satoshi-Bold.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Satoshi-Regular;
  src: url("../fonts/Satoshi-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Satoshi-Medium;
  src: url("../fonts/Satoshi-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-global: Satoshi-Regular;
  --font-alt: Satoshi-Regular;
}

body {
  color: #010101;
  font-family: Satoshi-Regular;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: normal;
}

main {
  overflow: clip;
}
.light-content {
  color: #fff;
}
.home-section {
  width: 100%;
  display: block;
  position: relative;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.bg-gradient-dark-1 {
  background-image: url("../images/background-home-image.png");
  background-size: cover;
}

.home-content {
  width: 100%;
  position: relative;
  text-align: center;
}

.pb-100 {
  padding-bottom: 100px !important;
}

.pt-100 {
  padding-top: 100px !important;
}
.h3,
h3 {
  margin-bottom: 0.7em;
  font-size: 28px;
}
p {
  margin: 0 0 1.5em 0;
}

a {
  color: var(--color-dark-1);
  text-decoration: underline;
  transition: color 0.1s var(--ease-default);
}

.bhc-page-section {
  background-image: url(../images/background-page.png);
  background-size: cover;
}
.section-title {
  font-size: 56px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.017em;
}

/*Marketing page CSS*/

.why-icons {
  background-color: #37df71;
}
.section-title-marketing {
  font-size: 46px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.017em;
}
b {
  font-family: Satoshi-Medium;
}
.bhc-home-img {
  background-image: url(../images/background-home-image.png);
  background-attachment: fixed;
}
.bhc-home-img .box {
  background-color: #ffffff1a;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 15px;
  min-height: 190px;
  margin-bottom: 25px !important;
  backdrop-filter: blur(7px);
}
.box h4 {
  font-family: Satoshi-Medium;
}
.box p {
  margin-bottom: 0px !important;
}
.join-section {
  position: fixed;
  z-index: 99;
  width: 100%;
  bottom: 0;
  background-color: #000;
  padding: 30px 0px;
  background-image: url("../images/background-home-image.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.join-section .btn-primary {
  background-color: #37df71;
  color: #fff;
  font-size: 17px;
  font-family: Satoshi-Bold;
  padding: 10px 17px;
  border-radius: 9px;
  border: none;
  transition: all 0.3s ease;
  text-transform: uppercase;
}
.join-section .btn-primary:hover {
  transform: scale(1.2);
  transition: 0.2s;
  transition-timing-function: ease-out;
}
.join-section p {
  margin-bottom: 0px;
  color: #fff;
  font-size: 16px;
}
.join-section .innerbox p {
  display: flex;
  flex-direction: column;
  text-align: center;
  background-color: #ffffff33;
  border-radius: 9px;
  padding: 17px;
}
.join-section .innerbox b {
  text-transform: uppercase;
  color: #37df71;
}
.join-section .container {
  display: flex;
  align-items: center;
  text-align: left;
  justify-content: space-between;
  gap: 20px;
}
.join-section .container .outerbox {
  display: flex;
  gap: 15px;
}
.pb-160 {
  padding-bottom: 168px !important;
}
.w-100 {
  width: 100%;
}

/*==============
    Media Queries
    ==============*/

@media screen and (max-width: 992px) {
  .join-section .container {
    flex-direction: column;
  }
  .join-section {
    position: static;
  }
  .pb-160 {
    padding-bottom: 100px !important;
  }
}

@media screen and (max-width: 500px) {
  .bhc-home-img .box,
  .join-section .container .outerbox {
    flex-direction: column;
    text-align: center;
    width: 100%;
  }
  .w-75 {
    width: 100% !important;
  }
  .section-title-marketing {
    font-size: 32px;
  }
}