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

:root {
    --bg-color: #FCF7F7;
    --bg-color400: #DDB7B7;
    --primary-color: #EC1E77;
    --secondary-color: #EC1E77;
    --font-color800: #131313;
    --font-color700: #131313;
    --font-color400: #EC1E77;
    --font-color100: #ffffff;
    --hover-color: #131313;
    --car-color: #259CDE;
    --car-color-bg: #E5F4FE;
    --walk-color: #EE6547;
    --walk-color-bg: #FFE2DB;
    --bike-color: #FFA51D;
    --bike-color-bg: #FFEBCC;
    --cta-bg: #EC1E77;

}

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;
}

.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;
    opacity: 0.8;
}

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

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

.exit-survey-view .btn-primary {
    background-color: var(--primary-color);
    border: none;
}

.exit-survey-view .btn-primary:hover {
    background-color: var(--primary-color);
    border: none;
    opacity: 0.8;
}

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

#website-widget-container {
    width: 400px;
    height: 700px;
    overflow: hidden;
    border: 1px solid #DDB7B7;
    filter: drop-shadow(0 4px 84px #EFDDDD);
    border-radius: 8px;
}

/** 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);
}