@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
  --bg-color: #F4F3F2;
  --bg-color400: #E9DFD5;
  --primary-color: #077BBD;
  --secondary-color: #077BBD;
  --font-color800: #131313;
  --font-color700: #131313;
  --font-color400: #131313;
  --font-color100: #ffffff;
  --hover-color: #077BBD;
  --car-color: #259CDE;
  --car-color-bg: #E5F4FE;
  --walk-color: #EE6547;
  --walk-color-bg: #FFE2DB;
  --bike-color: #FFA51D;
  --bike-color-bg: #FFEBCC;
  --cta-bg: #FF7E28;

}

body {
  font-family: "Inter", sans-serif;
  background-size: 50%;
  background-color: var(--bg-color);
}

header .nav-link {
  line-height: 64px;
}

.nav-link {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--font-color400) !important;
  text-decoration: none;
  text-transform: uppercase;
}

.nav-link:hover,
.nav-link.active {
  color: var(--hover-color) !important;
}

footer ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

.first-section {
  background: url(../img/bg.webp) no-repeat;
  background-position: center;
  min-height: 800px;
  background-size: cover;
  margin-top: -100px;
  padding-top: 100px;
}

.add-ext-btn {
  width: 216px !important;
  height: 55px;
  background: var(--cta-bg);
  border-radius: 16px;
  font-weight: 500;
  font-size: 21px;
  line-height: 55px;
  color: var(--font-color100);
  text-decoration: none;
  transition: 0.5s;
}

.add-ext-btn:hover {
  background: var(--cta-bg);
  color: var(--font-color100);
  opacity: 0.8;
  transition: 0.5s;
}

.main-wrapper h1 {
  font-style: normal;
  font-weight: 600;
  font-size: 56px;
  line-height: 68px;
  color: var(--font-color800);
}

.main-wrapper p {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--font-color700);
}

.main-wrapper h2 {
  font-weight: 600;
  font-size: 40px;
  line-height: 52px;
  color: var(--font-color800);
}

.main-wrapper h3 {
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  color: var(--font-color800);
}

.use-widget img {
  max-width: 220px;
}

.start-simple .card {
  max-width: 400px;
  height: 320px;
  border-radius: 16px;
}

.card-car {
  background: var(--car-color-bg);
  border: 1px solid var(--car-color-bg);
}

.card-car svg path {
  fill: var(--car-color);
}

.card-bike {
  background: var(--bike-color-bg);
  border: 1px solid var(--bike-color-bg);
}

.card-bike svg path {
  fill: var(--bike-color);
}

.card-walk {
  background: var(--walk-color-bg);
  border: 1px solid var(--walk-color-bg);
}

.card-walk svg path {
  fill: var(--walk-color);
}

.card p,
.use-widget-step p {
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: var(--font-color700);
  max-width: 330px;
}

.cta-holder-bg,
.hp-last-section .bg {
  border-radius: 32px;
  background-color: var(--bg-color400);
}

.map-img {
  position: absolute;
  margin-top: -50px;
}

.directions-printing h3.number {
  color: var(--primary-color);
}

.directions-printing h3 {
  font-weight: 600;
  font-size: 21px;
  line-height: 36px;
}

.ccpa-container .alert-danger {
  text-align: left;
  background-color: var(--bg-color400);
  color: var(--font-color700);
}

.fdbck-main {
  background-color: var(--bg-color);
}

.feedback-holder .btn {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.feedback-holder .btn:hover {
  background: var(--secondary-color) !important;
}

.fdbc-img-holder {
  background: var(--bg-color400);
}

.fdbck-header-holder {
  background: var(--bg-color);
}

#starScore {
  margin-left: -20px;
}

#website-widget-container {
  width: 400px;
  height: 700px;
  overflow: hidden;
}

/** scroller */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
  background: var(--font-color800);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--font-color400);
}