/* CSS Variables */
:root {
    /* adjust global site padding/spacing from page edges */
    --padding-xxs: 1.5em;
    --padding-xs: 2.5em;
    --padding-sm: 5em;
    --padding-sd: 8em;
    --padding-lg: 12em;
    --padding-xl: 16em;

    /* adjust amount of image offset for home card images */
    --scale-image-offset-xxs: 0; /* no image offset for xxs */
    --scale-image-offset-xs: 2.5em;
    --scale-image-offset-sm: 4.5em;
    --scale-image-offset-sd: 5.5em;
    --scale-image-offset-lg: 7em;
    --scale-image-offset-xl: 9em;

    /* adjust amount of padding for home card images */
    --scale-image-padding-xs: 0; /* no image padding for xs */
    --scale-image-padding-sm: 1.5em;
    --scale-image-padding-sd: 2.5em;
    --scale-image-padding-lg: 3.5em;
    --scale-image-padding-xl: 5em;

    /* standard font size */
    --scale-normal-font-size-sd: 16px;
    /* scaling based on standard font size var(--scale-normal-font-size-sd) */
    --scale-normal-font-size-xxs: calc(0.6 * var(--scale-normal-font-size-sd));
    --scale-normal-font-size-xs: calc(0.7 * var(--scale-normal-font-size-sd));
    --scale-normal-font-size-sm: calc(0.9 * var(--scale-normal-font-size-sd));
    --scale-normal-font-size-lg: calc(1.2 * var(--scale-normal-font-size-sd));
    --scale-normal-font-size-xl: calc(1.5 * var(--scale-normal-font-size-sd));
    --scale-normal-font-size-xxl: calc(2 * var(--scale-normal-font-size-sd));
}

* {
    border: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background-color: #000000;
    box-sizing: border-box;
    color: #ffffff;
    font-family: "Nunito Sans", system-ui, -apple-system, sans-serif;
    font-size: var(--scale-normal-font-size-sd); /* baseline font size 1rem */
    /* custom screen width font size scaling in media queries */
    line-height: 1.375em;
    margin: 0;
    padding: 0;
}

/* Form Validation */
/* Show required automatically in the corresponding label of a form group */
label.required:after {
    color: red;
    content: ' *';
}

a.btn-primary {
    padding: 0.5rem 0.75rem;
}

/* the container-fluid and row stylings below:
    - prevent overflow of page that causes unwanted horizontal scrolling
        + especially on right side of page in mobile view
    - prevent navbar from moving vertically when vertical scrolling in mobile view
*/
.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

.above_footer {
    background-color: #DBDBDB;
    padding: 2rem;
}

.above_footer_icons {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-wrap: nowrap;
}

.above_footer_links {
    list-style-type: none;
    padding-left: 0;
}

.above_footer_links li a {
    color: black;
    text-decoration: none;
}

.above_footer_links li a:hover {
    color: #808080;
}

.aicpaSocLogo {
    width: 40%;
}

.aicpaSocLogo img {
    width: 50%;
}

.blue_box_with_shadow {
    color: white;
    background-color: #0273B5;
    box-shadow: 0px 5px 8px #00000029;
}

.bodyMargin {
    margin-top: 8rem;
}

.btn-primary {
    background-clip: padding-box;
    background-color: transparent;
    background-image: linear-gradient(180deg, #11A7D2 14%, #0173B5 100%);
    background-origin: padding-box;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    border-image: linear-gradient(180deg, #11A7D2 14%, #0173B5 100%) 1;
    border-radius: 0;
    border-width: 2px;
    color: white;
    display: inline-block;
    font-weight: normal;
    isolation: isolate;
    padding: 0.75rem 2.5rem;
    position: relative;
    transition: color 0.1s ease-in-out !important;
}

/* Hover gradient crossfades in (background-image cannot interpolate). */
.btn-primary::before {
    background-clip: padding-box;
    background-image: linear-gradient(180deg, white 14%, white 100%);
    background-origin: padding-box;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    content: "";
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.1s ease-in-out !important;
    z-index: -1;
}

.btn-primary:hover::before,
.btn-primary:focus-visible::before {
    opacity: 1;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    color: rgba(0,114,181,1) !important;
    border-color: rgba(0,114,181,1) !important;
}

.btn-grey-outline {
    background-clip: padding-box;
    background-color: transparent;
    background-image: linear-gradient(180deg, black 0%, rgb(20, 20, 20) 100%);
    background-origin: padding-box;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    /* border-image: linear-gradient(180deg, darkgray 0%, white 100%) 1; */
    border-radius: 0;
    border: 2px solid grey;
    color: white;
    display: inline-block;
    font-weight: normal;
    isolation: isolate;
    position: relative;
    padding: 0.75rem 2.5rem;
    transition: color 0.1s ease-in-out !important;
}

/* Hover gradient crossfades in (background-image cannot interpolate). */
.btn-grey-outline::before {
    background-clip: padding-box;
    background-image: linear-gradient(180deg, black 14%, rgb(20, 20, 20) 100%);
    background-origin: padding-box;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    content: "";
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.1s ease-in-out !important;
    z-index: -1;
}

.btn-grey-outline:hover::before,
.btn-grey-outline:focus-visible::before {
    opacity: 1;
}

.btn-grey-outline:hover,
.btn-grey-outline:focus-visible {
    color: rgb(41, 40, 40) !important;
    border-color: rgb(41, 40, 40) !important;
}

.btn-grey {
    background-clip: padding-box;
    background-color: transparent;
    background-image: linear-gradient(180deg, #fff 0%, #808080 100%);
    background-origin: padding-box;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    border-image: linear-gradient(180deg, #fff 0%, #808080 100%) 1;
    border-radius: 0;
    border-width: 2px;
    color: white;
    display: inline-block;
    font-weight: normal;
    isolation: isolate;
    position: relative;
    padding: 0.75rem 2.5rem;
    transition: color 0.1s ease-in-out !important;
}

/* Hover gradient crossfades in (background-image cannot interpolate). */
.btn-grey::before {
    background-clip: padding-box;
    background-image: linear-gradient(180deg, white 14%, white 100%);
    background-origin: padding-box;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    content: "";
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.1s ease-in-out !important;
    z-index: -1;
}

.btn-grey:hover::before,
.btn-grey:focus-visible::before {
    opacity: 1;
}

.btn-grey:hover,
.btn-grey:focus-visible {
    color: grey !important;
    border-color: rgba(128,128,128,1) !important;
}

.containerPadding {
    padding-left: var(--padding-sd);
    padding-right: var(--padding-sd);
}

.footer {
    background-color: black;
    color: white;
    padding: 2rem;
    text-align: center;
    vertical-align: middle;
}

.gray_box_light {
    background-color: #F7F7F7;
    box-shadow: 2px 6px 8px #00000066;
}

.gray_box_large {
    background-color: #E8E8E8;
    min-height: 50px;
}

.gray_box_large_light {
    background-color: #F7F7F7;
    min-height: 50px;
}

.gray_box_large_spacing {
    padding: 2.5rem;
}

.header-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.header-wrap div {
    display: flex;
}

.header-wrap div a {
    max-width: 33.3333%;
    width: 33.3333%;
}

.header-wrap div a img, .header-wrap picture img {
    width: 100%;
}

.header-wrap-images {
    align-items: center;
    display: flex;
    flex-direction: row;
}

.header-wrap-images > img {
    height: auto;
    min-width: 0;
    object-fit: contain;
}

.header-wrap-images > .header-banner-video-wrap {
    min-width: 0;
}

.header-wrap-images > .header-banner-video-wrap video {
    display: block;
    height: auto;
    min-width: 0;
    object-fit: contain;
    width: 100%;
}

.home_card {
    display: flex;
    flex-direction: column;
}

.home_card_flex_row {
    display: flex;
    flex-direction: row;

}

.home_card_flex_row_reverse {
    display: flex;
    flex-direction: row-reverse;
}

.home_card_image {
    display: flex;
    flex-grow: 1;
    position: relative;
    width: 100%;
}

.home_card_image > img {
    align-self: center;
    width: 100%;
}

.home_card_image_left {
    left: calc(var(--scale-image-offset-sd) * -1);
    padding-bottom: var(--scale-image-padding-sd);
    padding-top: var(--scale-image-padding-sd);
}

.home_card_image_right {
    right: calc(var(--scale-image-offset-sd) * -1);
    padding-bottom: var(--scale-image-padding-sd);
    padding-top: var(--scale-image-padding-sd);
}

.horizontal_divider_leading_header {
    border-bottom: 3px solid black;
    border-radius: 1rem;
    margin-bottom: 1rem;
    width: calc(2.3rem + 0.2vw);
}

.horizontal_divider_text {
    border-bottom: 3px solid gray;
    border-radius: 5px;
    margin-bottom: 0.75rem;
    width: calc(2rem + 0.2vw);
}

.how_it_works_row {
    justify-content: center;
}

.how_it_works_row > .how_it_works_header {
    text-align: center;
    width: 58%;
}

.how_it_works_row > .how_it_works_header h3 {
    color: #0173B5;
    text-align: center;
}

.how_it_works_row > .how_it_works_header p {
    text-align: center;
}

.how_it_works_row > div.row > div.how_it_works_text {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(5, 1fr);
    text-align: center;
}

.how_it_works_row > div.row > div.how_it_works_text p {
    text-align: left;
}

.how_it_works_row > div.row > div.how_it_works_text span {
    font-weight: 900;
}

.landing-hero {
    min-height: calc(100vh - 6rem);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem 4rem;
}
.landing-hero h1 {
    color: #000000;
    font-weight: 700;
    letter-spacing: 0.02em;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}
.landing-hero p {
    color: #555;
    font-size: 1.15rem;
    max-width: 28rem;
    margin: 1.25rem auto 0;
}

.leading_header {
    color: #0073B5;
    font-size: calc(var(--scale-normal-font-size-sd) * 1.5);
    font-stretch: 82.5%;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
}

.leading_header_description_text {
    color: #808080;
}

.leading_header_description_text_black {
    color: #000;
}

.logoNavbarContainer {
    background-color: inherit;
    border-bottom: 0.15rem solid gray;
    height: 8rem;
    padding-left: 60px;
    padding-right: 60px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

.modal-header {
    background-color: rgba(211, 211, 211, 0.5);
    border-color: grey;
}

.modal-body {
    background-image: linear-gradient(to bottom, #303030, #000000);
}

.modal-footer {
    background-color: #303030;
    border-color: grey;
}

.nav_header {
    display: flex;
    height: 8rem;
}

.nav_header_row {
    height: 8rem;
    width: 100%;
}

.nav-link {
    color: #00395a;
    font-weight: bold;
}

.navbar_list {
    align-items: center;
    align-self: center;
    color: #0073B5;
    display: flex;
    font-weight: bold;
    height: 8rem;
    justify-content: end;
}

.navbar_list a {
    color: #0073B5;
    text-decoration: none;
}

.navbar_list a:hover {
    color: #7ABADE;
    text-decoration: none;
}

.navbar_list > ul {
    align-items: center;
    display: flex;
    height: 100%;
    margin-bottom: 0;
}

.navbar_list > ul li {
    display: inline;
    padding-left: 2rem;
    text-align: end;
    text-overflow: ellipsis;
    text-transform: uppercase;
    text-wrap: nowrap;
}

.offset-bs-gutter-spacing {
    padding-left: calc(var(--padding-sd) - var(--bs-gutter-x) * .5) !important;
    padding-right: calc(var(--padding-sd) - var(--bs-gutter-x) * .5) !important;
}

.offset-bs-gutter-spacing-one {
    padding-left: calc(var(--padding-sd) - var(--bs-gutter-x) * 1) !important;
    padding-right: calc(var(--padding-sd) - var(--bs-gutter-x) * 1) !important;
}

.privacy_policy_content {
    color: #808080;
}

.privacy_policy_content h2 {
    color: #0173B5;
    font-weight: bold;
    margin-bottom: 1rem;
    text-transform: none;
}

.privacy_policy_content h4, .privacy_policy_content h5 {
    color: #212529;
    font-weight: bold;
    margin-bottom: 1rem;
}

.privacy_policy_content p, .privacy_policy_content ol, .privacy_policy_content ul {
    margin-bottom: 2.5rem;
}

.social_icons {
    width: 60%;
}

.social_icons a {
    text-decoration: none;
}

.social_icons a img {
    width: 25%;
}

.social_icons a {
    text-decoration: none;
}

.terms_of_use_content {
    color: #808080;
}

.terms_of_use_content h2 {
    color: #0173B5;
    font-weight: bold;
    margin-bottom: 1rem;
    text-transform: none;
}

.terms_of_use_content h4, .terms_of_use_content h5 {
    color: #212529;
    font-weight: bold;
    margin-bottom: 1rem;
}

.terms_of_use_content p, .terms_of_use_content ol, .terms_of_use_content ul {
    margin-bottom: 2.5rem;
}

.white_box_large {
    background-color: #FFFFFF;
    min-height: 50px;
}

#contact_form .form-control, #contact_form .form-control.form-control-lg {
    border: 1px solid #808285;
    border-radius: 2px;
    opacity: 1;
}

#contact_form .form-label {
    font-stretch: 66.6666%;
}

#contact_form .form-label.required::after {
    color: white;
    content: "*";
}

#contact_form .sell-form-file-preview-wrap {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    min-height: 3rem;
}

#contact_form .sell-form-file-dropzone {
    background-color: rgba(25, 25, 25, 0.7);
    border: 3px dashed #a7a7a7;
    border-radius: 4px;
    flex: 1 1 auto;
    min-width: min(14rem, 100%);
    padding: 0.75rem 1rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#contact_form .sell-form-file-dropzone.is-dragover {
    background-color: rgba(1, 115, 181, 0.08);
    border-color: #0173b5;
}

#contact_form .sell-form-file-placeholder-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

#contact_form .sell-form-file-drop-hint {
    font-size: 0.8rem;
}

#contact_form .sell-form-file-error {
    max-width: 36rem;
}

/* Column min ≈ thumbnail width + gap + remove (2rem); keeps × from crowding narrow tracks */
#contact_form .sell-form-file-preview-list {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fill, minmax(calc(2rem + 0.35rem + 7.5rem), 1fr));
    width: 100%;
}

#contact_form .sell-form-file-thumb {
    align-items: flex-start;
    display: flex;
    gap: 0.35rem;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

/* Image leaves horizontal room for the × (2rem button + flex gap) inside the grid cell */
#contact_form .sell-form-file-thumb .sell-form-file-preview-img {
    flex: 1 1 auto;
    max-width: calc(100% - 2.35rem);
    min-width: 0;
}

#contact_form .sell-form-file-remove-btn {
    align-items: center;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #808285;
    border-radius: 2px;
    color: #505050;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.35rem;
    font-weight: 600;
    justify-content: center;
    line-height: 1;
    margin-top: 0.1rem;
    min-height: 2rem;
    min-width: 2rem;
    padding: 0;
}

#contact_form .sell-form-file-remove-btn:hover {
    border-color: #0173b5;
    color: #0173b5;
}

#contact_form .sell-form-file-preview-img {
    border: 1px solid #808285;
    border-radius: 2px;
    max-height: 120px;
    max-width: min(200px, 100%);
    object-fit: contain;
    width: auto;
}

#poweredBySasLogo {
    width: 55%;
}

#form_success {
    color: rgba(0,114,181,1);
    font-style: normal;
    font-weight: bold;
    min-height: 300px;
    padding-top: 50px;
    text-align: center;
}

#contact_form .form-control {
    scroll-margin-top: 10rem;
}

#sell_your_car_section {
    scroll-margin-top: 8rem;
}

#sell_your_car_section_link {
    color: white;
    text-decoration: none;
}

#stier_logo {
    height: 100%;
    width: auto;
}

#stier_logo img {
    align-items: center;
    align-self: center;
    display: flex;
    height: 100%;
    max-height: 8rem;
    padding: 0;
    width: auto;
}

/* media queries */
/* custom: less than 165px inclusive */
@media (width <= 165px) {
    .bodyMargin {
        margin-top: 4rem;
    }

    .how_it_works_row > div.row > div.how_it_works_text {
        grid-template-columns: repeat(1, 1fr);
    }

    .logoNavbarContainer {
        height: 4rem;
        padding-left: var(--padding-xxs);
        padding-right: var(--padding-xxs);
    }

    .nav_header {
        height: 4rem;
    }

    .nav_header_row {
        height: 4rem;
    }

    .navbar_list {
        height: 4rem;
    }

    #sell_your_car_section,
    #contact_form .form-control {
        scroll-margin-top: 4rem;
    }

    #stier_logo img {
        max-height: 4rem;
    }
}

/* custom: less than 400px inclusive */
@media (width < 400px) {}

/* ===== BOOTSTRAP xs Extra Small Devices (less than 576px) ===== */
@media (width < 576px) {
    .about_statistics_blue_header_text {
        font-size: calc(var(--scale-normal-font-size-xs) * 2.5);
    }

    .about_statistics_text {
        font-size: calc(var(--scale-normal-font-size-xs) * 1.4);
    }

    .btn_blue_gray_box {
        padding: 0.25rem 1.25rem 0.25rem 1.25rem !important;
    }

    .containerPadding {
        padding-left: var(--padding-xs);
        padding-right: var(--padding-xs);
    }

    .footerIconsMargins {
        margin-bottom: 1rem;
    }

    /* Ensure picture and img elements take full width */
    .header-wrap div a {
        max-width: 100%;
    }

    .header-wrap-images {
        flex-direction: column;
    }

    .how_it_works_row > .how_it_works_header {
        width: 90%;
    }
}

/* custom: less than 960px inclusive */
@media (width <= 960px) {}

/* custom: greater than 165px */
@media (width > 165px) {
    /* mobile devices with smaller screen sizes and/or lower resolutions */
    html, body {
        font-size: var(--scale-normal-font-size-xxs) * 2;
    }

    h2 {
        font-size: calc(var(--scale-normal-font-size-xxs) * 2.8);
    }

    h3 {
        font-size: calc(var(--scale-normal-font-size-xxs) * 2.6);
    }

    h4 {
        font-size: calc(var(--scale-normal-font-size-xxs) * 2.4);
    }

    h5 {
        font-size: calc(var(--scale-normal-font-size-xxs) * 2.2);
    }

    .bodyMargin {
        margin-top: 4rem;
    }

    .containerPadding {
        padding-left: var(--padding-xxs);
        padding-right: var(--padding-xxs);
    }

    .flex-column-mobile {
        flex-direction: column;
    }

    .footer {
        font-size: var(--scale-normal-font-size-xxs);
        padding: 0.5rem;
    }

    .home_card_flex_row, .home_card_flex_row_reverse {
        flex-direction: column;
    }

    .home_card_image_left {
        left: var(--scale-image-offset-xxs);
        padding-bottom: var(--scale-image-padding-xs);
        padding-top: var(--scale-image-padding-xs);
    }

    .home_card_image_right {
        right: var(--scale-image-offset-xxs);
        padding-bottom: var(--scale-image-padding-xs);
        padding-top: var(--scale-image-padding-xs);
    }

    .how_it_works_row > div.row > div.how_it_works_text {
        grid-template-columns: repeat(1, 1fr);
    }

    .leading_header {
        font-size: calc(var(--scale-normal-font-size-xxs) * 2.1);
    }

    .logoNavbarContainer {
        height: 4rem;
        padding-left: var(--padding-xxs);
        padding-right: var(--padding-xxs);
    }

    .nav_header {
        height: 4rem;
    }

    .nav_header_row {
        height: 4rem;
    }

    .navbar_list {
        height: 4rem;
    }

    .offset-bs-gutter-spacing {
        padding-left: calc(var(--padding-xxs) - var(--bs-gutter-x) * .5) !important;
        padding-right: calc(var(--padding-xxs) - var(--bs-gutter-x) * .5) !important;
    }

    .offset-bs-gutter-spacing-one {
        padding-left: calc(var(--padding-xxs) - var(--bs-gutter-x) * 1) !important;
        padding-right: calc(var(--padding-xxs) - var(--bs-gutter-x) * 1) !important;
    }

    #contact_form .form-control {
        scroll-margin-top: 6rem;
    }

    #sell_your_car_section {
        scroll-margin-top: 4rem;
    }

    #stier_logo img {
        max-height: 4rem;
    }
}

/* custom: greater than 400px */
@media (width > 400px) {
    html, body {
        font-size: var(--scale-normal-font-size-xs) * 1.4;
    }

    h2 {
        font-size: calc(var(--scale-normal-font-size-xs) * 2.2);
    }

    h3 {
        font-size: calc(var(--scale-normal-font-size-xs) * 2);
    }

    h4 {
        font-size: calc(var(--scale-normal-font-size-xs) * 1.8);
    }

    h5 {
        font-size: calc(var(--scale-normal-font-size-xs) * 1.6);
    }

    .bodyMargin {
        margin-top: 5rem;
    }

    .containerPadding {
        padding-left: var(--padding-xs);
        padding-right: var(--padding-xs);
    }

    .containerPaddingGrayBox {
        padding-left: 0;
        padding-right: 0;
    }

    .flex-column-mobile {
        flex-direction: row;
    }

    .footer {
        font-size: inherit;
        padding: 1rem;
    }

    .how_it_works_row > div.row > div.how_it_works_text {
        grid-template-columns: repeat(2, 1fr);
    }

    .leading_header {
        font-size: calc(var(--scale-normal-font-size-xs) * 2);
    }

    .logoNavbarContainer {
        height: 5rem;
        padding-left: var(--padding-xs);
        padding-right: var(--padding-xs);
    }

    .nav_header {
        height: 5rem;
    }

    .nav_header_row {
        height: 5rem;
    }

    .navbar_list {
        height: 5rem;
    }

    .offset-bs-gutter-spacing {
        padding-left: calc(var(--padding-xs) - var(--bs-gutter-x) * .5) !important;
        padding-right: calc(var(--padding-xs) - var(--bs-gutter-x) * .5) !important;
    }

    .offset-bs-gutter-spacing-one {
        padding-left: calc(var(--padding-xs) - var(--bs-gutter-x) * 1) !important;
        padding-right: calc(var(--padding-xs) - var(--bs-gutter-x) * 1) !important;
    }

    #contact_form .form-control {
        scroll-margin-top: 7rem;
    }

    #sell_your_car_section {
        scroll-margin-top: 5rem;
    }

    #stier_logo img {
        max-height: 5rem;
    }
}

/* ===== BOOTSTRAP sm Small Devices (greater than 576px inclusive) ===== */
@media (width >= 576px) {
    .containerPaddingGrayBox {
        padding-left: var(--padding-xs);
        padding-right: var(--padding-xs);
    }

    .footerIconsMargins {
        margin-bottom: 1rem;
    }

    .how_it_works_row > div.row > div.how_it_works_text {
        grid-template-columns: repeat(3, 1fr);
    }

    .leading_header {
        font-size: calc(var(--scale-normal-font-size-xs) * 2);
    }
}

/* custom: greater than 680px */
@media (width > 680px) {
    .logoNavbarContainer {
        height: 5rem;
    }
}

/* ===== BOOTSTRAP md Medium Devices (greater than 768px inclusive) ===== */
@media (width >= 768px) {
    .above_footer_icons {
        flex-direction: row;
    }

    .how_it_works_row > div.row > div.how_it_works_text {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* custom: greater than 900px */
@media (width > 900px) {
    .home_card_flex_row {
        display: flex;
        flex-direction: row;
    }

    .home_card_flex_row_reverse {
        display: flex;
        flex-direction: row-reverse;
    }

    .home_card_image_left {
        left: calc(var(--scale-image-offset-xs) * -1);
        padding-bottom: var(--scale-image-padding-sm);
        padding-top: var(--scale-image-padding-sm);
    }

    .home_card_image_right {
        right: calc(var(--scale-image-offset-xs) * -1);
        padding-bottom: var(--scale-image-padding-sm);
        padding-top: var(--scale-image-padding-sm);
    }
}

/* custom: greater than 960px */
@media (width > 960px) {
    html, body {
        font-size: var(--scale-normal-font-size-sm);
    }

    h2 {
        font-size: calc(var(--scale-normal-font-size-sm) * 1.8);
    }

    h3 {
        font-size: calc(var(--scale-normal-font-size-sm) * 1.6);
    }

    h4 {
        font-size: calc(var(--scale-normal-font-size-sm) * 1.4);
    }

    h5 {
        font-size: calc(var(--scale-normal-font-size-sm) * 1.2);
    }

    .bodyMargin {
        margin-top: 8rem;
    }

    .containerPadding {
        padding-left: var(--padding-sm);
        padding-right: var(--padding-sm);
    }

    .containerPaddingGrayBox {
        padding-left: var(--padding-sm);
        padding-right: var(--padding-sm);
    }

    .leading_header {
        font-size: calc(var(--scale-normal-font-size-sm) * 2);
    }

    .logoNavbarContainer {
        border-bottom: 0.15rem solid gray;
        height: 8rem;
        padding-left: 60px;
        padding-right: 60px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10;
    }

    .nav_header {
        height: 8rem;
    }

    .nav_header_row {
        height: 8rem;
        width: 100%;
    }

    .navbar_list {
        align-items: center;
        align-self: center;
        color: #0073B5;
        display: flex;
        font-size: 0.9rem;
        font-weight: bold;
        height: 8rem;
        justify-content: end;
    }

    .offset-bs-gutter-spacing {
        padding-left: calc(var(--padding-sm) - var(--bs-gutter-x) * .5) !important;
        padding-right: calc(var(--padding-sm) - var(--bs-gutter-x) * .5) !important;
    }

    .offset-bs-gutter-spacing-one {
        padding-left: calc(var(--padding-sm) - var(--bs-gutter-x) * 1) !important;
        padding-right: calc(var(--padding-sm) - var(--bs-gutter-x) * 1) !important;
    }

    #contact_form .form-control {
        scroll-margin-top: 10rem;
    }

    #sell_your_car_section {
        scroll-margin-top: 8rem;
    }

    #stier_logo img {
        max-height: 8rem;
    }
}

/* ===== BOOTSTRAP lg Large Devices (greater than 992px inclusive) ===== */
@media (width >= 992px) {}

/* ===== BOOTSTRAP xl Extra Large Devices (greater than 1200px inclusive) ===== */
@media (width >= 1200px) {
    html, body {
        font-size: var(--scale-normal-font-size-sd);
    }

    h2 {
        font-size: calc(var(--scale-normal-font-size-sd) * 1.8);
    }

    h3 {
        font-size: calc(var(--scale-normal-font-size-sd) * 1.6);
    }

    h4 {
        font-size: calc(var(--scale-normal-font-size-sd) * 1.4);
    }

    h5 {
        font-size: calc(var(--scale-normal-font-size-sd) * 1.2);
    }

    .home_card_image_left {
        left: calc(var(--scale-image-offset-sd) * -1);
        padding-bottom: var(--scale-image-padding-sd);
        padding-top: var(--scale-image-padding-sd);
    }

    .home_card_image_right {
        right: calc(var(--scale-image-offset-sd) * -1);
        padding-bottom: var(--scale-image-padding-sd);
        padding-top: var(--scale-image-padding-sd);
    }

    .leading_header {
        font-size: calc(var(--scale-normal-font-size-sd) * 2);
    }

    .navbar_list {
        font-size: calc(var(--scale-normal-font-size-sd));
    }
}

/* ===== BOOTSTRAP xxl Extra Extra Large Devices (greater than 1400px inclusive) ===== */
@media (width >= 1400px) {}

/* custom: greater than 1920px inclusive */
@media (width >= 1920px) {
    html, body {
        font-size: var(--scale-normal-font-size-sd);
    }

    h2 {
        font-size: calc(var(--scale-normal-font-size-sd) * 1.8);
    }

    h3 {
        font-size: calc(var(--scale-normal-font-size-sd) * 1.6);
    }

    h4 {
        font-size: calc(var(--scale-normal-font-size-sd) * 1.4);
    }

    h5 {
        font-size: calc(var(--scale-normal-font-size-sd) * 1.2);
    }

    a.dropdown-item, .navbar_list {
        font-size: calc(var(--scale-normal-font-size-sd));
    }

    .containerPadding {
        padding-left: var(--padding-sd);
        padding-right: var(--padding-sd);
    }

    .containerPaddingGrayBox {
        padding-left: var(--padding-sd);
        padding-right: var(--padding-sd);
    }

    .leading_header {
        font-size: calc(var(--scale-normal-font-size-sd) * 2);
    }

    .offset-bs-gutter-spacing {
        padding-left: calc(var(--padding-sd) - var(--bs-gutter-x) * .5) !important;
        padding-right: calc(var(--padding-sd) - var(--bs-gutter-x) * .5) !important;
    }

    .offset-bs-gutter-spacing-one {
        padding-left: calc(var(--padding-sd) - var(--bs-gutter-x) * 1) !important;
        padding-right: calc(var(--padding-sd) - var(--bs-gutter-x) * 1) !important;
    }
}

/* custom: greater than 2560px inclusive */
@media (width >= 2560px) {
    html, body {
        font-size: var(--scale-normal-font-size-xl);
    }

    h2 {
        font-size: calc(var(--scale-normal-font-size-xl) * 1.8);
    }

    h3 {
        font-size: calc(var(--scale-normal-font-size-xl) * 1.6);
    }

    h4 {
        font-size: calc(var(--scale-normal-font-size-xl) * 1.4);
    }

    h5 {
        font-size: calc(var(--scale-normal-font-size-xl) * 1.2);
    }

    a.dropdown-item {
        padding: 1rem;
    }

    a.dropdown-item, .navbar_list {
        font-size: calc(var(--scale-normal-font-size-xl));
    }

    .home_card_image_left {
        left: calc(var(--scale-image-offset-lg) * -1);
        padding-bottom: var(--scale-image-padding-lg);
        padding-top: var(--scale-image-padding-lg);
    }

    .home_card_image_right {
        right: calc(var(--scale-image-offset-lg) * -1);
        padding-bottom: var(--scale-image-padding-lg);
        padding-top: var(--scale-image-padding-lg);
    }

    .leading_header {
        font-size: calc(var(--scale-normal-font-size-xl) * 2);
    }

    .offset-bs-gutter-spacing {
        padding-left: calc(var(--padding-lg) - var(--bs-gutter-x) * .5) !important;
        padding-right: calc(var(--padding-lg) - var(--bs-gutter-x) * .5) !important;
    }

    .offset-bs-gutter-spacing-one {
        padding-left: calc(var(--padding-lg) - var(--bs-gutter-x) * 1) !important;
        padding-right: calc(var(--padding-lg) - var(--bs-gutter-x) * 1) !important;
    }
}

/* custom: greater than 3840px inclusive */
@media (width >= 3840px) {
    html, body {
        font-size: var(--scale-normal-font-size-xxl);
    }

    h2 {
        font-size: calc(var(--scale-normal-font-size-xxl) * 1.8);
    }

    h3 {
        font-size: calc(var(--scale-normal-font-size-xxl) * 1.6);
    }

    h4 {
        font-size: calc(var(--scale-normal-font-size-xxl) * 1.4);
    }

    h5 {
        font-size: calc(var(--scale-normal-font-size-xxl) * 1.2);
    }

    a.dropdown-item {
        padding: 1rem 2rem;
    }

    a.dropdown-item, .navbar_list {
        font-size: calc(var(--scale-normal-font-size-xxl));
    }

    .containerPadding {
        padding-left: var(--padding-xl);
        padding-right: var(--padding-xl);
    }

    .containerPaddingGrayBox {
        padding-left: var(--padding-xl);
        padding-right: var(--padding-xl);
    }

    .home_card_image_left {
        left: calc(var(--scale-image-offset-xl) * -1);
        padding-bottom: var(--scale-image-padding-xl);
        padding-top: var(--scale-image-padding-xl);
    }

    .home_card_image_right {
        right: calc(var(--scale-image-offset-xl) * -1);
        padding-bottom: var(--scale-image-padding-xl);
        padding-top: var(--scale-image-padding-xl);
    }

    .leading_header {
        font-size: calc(var(--scale-normal-font-size-xxl) * 2);
    }

    .offset-bs-gutter-spacing {
        padding-left: calc(var(--padding-xl) - var(--bs-gutter-x) * .5) !important;
        padding-right: calc(var(--padding-xl) - var(--bs-gutter-x) * .5) !important;
    }

    .offset-bs-gutter-spacing-one {
        padding-left: calc(var(--padding-xl) - var(--bs-gutter-x) * 1) !important;
        padding-right: calc(var(--padding-xl) - var(--bs-gutter-x) * 1) !important;
    }
}

/* custom: greater than 5760px inclusive */
@media (width >= 5760px) {
    html, body {
        font-size: calc(var(--scale-normal-font-size-xxl) * 1.5);
    }

    h2 {
        font-size: calc(var(--scale-normal-font-size-xxl) * 1.9);
    }

    h3 {
        font-size: calc(var(--scale-normal-font-size-xxl) * 1.8);
    }

    h4 {
        font-size: calc(var(--scale-normal-font-size-xxl) * 1.7);
    }

    h5 {
        font-size: calc(var(--scale-normal-font-size-xxl) * 1.6);
    }
}

/* custom: greater than 7680px inclusive */
@media (width >= 7680px) {
    html, body {
        font-size: calc(var(--scale-normal-font-size-xxl) * 2);
    }

    h2 {
        font-size: calc(var(--scale-normal-font-size-xxl) * 2.4);
    }

    h3 {
        font-size: calc(var(--scale-normal-font-size-xxl) * 2.3);
    }

    h4 {
        font-size: calc(var(--scale-normal-font-size-xxl) * 2.2);
    }

    h5 {
        font-size: calc(var(--scale-normal-font-size-xxl) * 2.1);
    }
}