html {
  overflow-x: hidden !important;
  overflow-y: auto;
}

body {
  min-height: 100vh;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

input,
textarea,
button,
select {
  font: inherit;
}

:root {
  --bs-body-font-family: "Roboto", sans-serif;
  --bs-body-color: $font;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Vazirmatn", sans-serif;
}

a.btn {
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
  background-color: #ffb803;
  color: #ffffff;
  border: none;
  padding: 0.375rem 1rem;
  transition: background-color 0.5s, color 0.5s, border-color 0.5s;
}
a.btn:focus-visible, a.btn:focus {
  box-shadow: 0 0 0 0.125rem #000000;
}
a.btn:focus {
  box-shadow: none;
}
a.btn:hover {
  background-color: #cf9500;
  color: #ffffff;
}
a.btn:not(.btn-disabled):active {
  transform: scale(0.96);
}

a.btn.btn-outline {
  background-color: transparent;
  border: solid 2px #ffb803;
  padding: calc(0.375rem - 2px) calc(1rem - 2px);
  color: #ffffff;
}
a.btn.btn-outline:hover {
  background-color: transparent;
  color: #cf9500;
  border-color: #cf9500;
}

a.btn.btn-white {
  background-color: #ffffff;
  color: #1b3c6b;
}
a.btn.btn-white:hover {
  background-color: #ffffff;
  color: #112542;
}

a.btn.btn-blue {
  background-color: #1b3c6b;
  color: #ffffff;
}
a.btn.btn-blue:hover {
  background-color: #112542;
  color: #ffffff;
}

a.btn.btn-darkBlue {
  background-color: #112542;
  color: #ffffff;
}
a.btn.btn-darkBlue:hover {
  background-color: #1b3c6b;
  color: #373f4a;
}

a.btn.btn-yellow {
  background-color: #ffb803;
  color: #373f4a;
}
a.btn.btn-yellow:hover {
  background-color: #cf9500;
  color: #1b3c6b;
}

a.btn.btn-white.btn-outline {
  background-color: transparent;
  border: solid 2px #ffffff;
  padding: calc(0.375rem - 2px) calc(1rem - 2px);
  color: #ffffff;
}
a.btn.btn-white.btn-outline:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

div.btns a {
  margin: 0.5rem 0.25rem 0 0.25rem;
}

input.btn.btn-blue {
  background-color: #1b3c6b;
  color: white;
}

.bg-gradient-blue {
  background: #1b3c6b;
  background: linear-gradient(178.26deg, #1b3c6b 1.6%, #3584c6 98.66%);
}

.bg-gradient-yellow {
  background: #ffb803;
  background: linear-gradient(180deg, #ffb803 0%, #ed8c05 100%);
}

.text-yellow {
  color: #ffb803;
}

.text-blue {
  color: #1b3c6b;
}

.text-lightBlue {
  color: #3584c6;
}

.text-darkBlue {
  color: #373f4a;
}

.text-white {
  color: #ffffff;
}

@media (min-width: 1272px) {
  div.header {
    max-height: 412px;
    display: flex;
  }
}
div.bg-image {
  background-image: url("/src/img/pages/homepage/background-sales-transaction.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

div.bg-image2 {
  background-image: url("/src/img/pages/homepage/cc-terminal-bg-image.png");
  background-repeat: no-repeat;
  background-position: 40vw;
  position: relative;
}

ul {
  list-style: none;
}

.img-fluid.transaction {
  max-height: 412px;
  max-width: 100vw;
}

.false,
.pay-terminal {
  -o-object-fit: contain;
     object-fit: contain;
}

h5.text-center {
  margin-top: 1rem;
}

@media (max-width: 767.5px) {
  div.contact-image {
    max-height: 350px;
  }
  div.contact-image img.img-fluid {
    max-height: 350px;
  }
}
div.bg-gradient-blue.px-5 {
  display: block;
}

div.mission {
  position: relative;
  z-index: -1;
}

.mw-25 {
  max-width: 25rem;
}

.mw-20 {
  max-width: 20rem;
}

p.mw-13 {
  max-width: 13rem;
}

p.mw-30 {
  max-width: 30rem;
}

p.mw-35 {
  max-width: 35rem;
}

.mw-50 {
  max-width: 50rem;
}

#problem,
#solution,
#features,
#contact {
  scroll-margin-top: 75px;
}

@media (min-width: 750px) and (max-width: 1271.5px) {
  .img-fluid.transaction {
    width: 100vw;
  }
}