:root {
    --dark-blue: #003262;
    --blue: #004C96;
    --light-blue: #5AAAF8;
    --dark-gray: #424242;
    --gray: #C4C4C4;
    --light-gray: #F9F9F9;
    --black: #000000;
    --white: #ffffff;
    --yellow: #EBA70E;
    --orange: #D93D0D;
    --red: #BA271D;
    --green: #168928;
    --main-font-size: 22px;
    --input-color: #424242;
}

/**** Reset ****/
*, html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    color: var(--black);
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    background-color: #fafcff;
}

ul li {
    margin-left: 30px;
}

header {
    height: 80px;
    background-color: #fff;
}

h1 {
    font-size: 32px;
    text-transform: uppercase;
    font-family: 'Archivo Black', sans-serif;
    color: var(--dark-blue);
    margin: 30px 0;
    text-align: center;
    font-weight: 400;
}

h2 {
    font-size: 28px;
    text-transform: uppercase;
    font-family: 'Archivo Black', sans-serif;
    color: var(--dark-blue);
    margin-bottom: 10px;
}

.ready-to-start-title h2 {
    margin-bottom: 15px;
}

.media-information-card h2{
    font-size: 24px;
}

.btn {
    font-family: 'Source Sans Pro', sans-serif;
    border-radius: 100px;
    color: var(--white);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.2;
    padding: 6.5px 30px;
    width: auto;
    text-align: center;
    border: 1px solid var(--blue);
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
}

.btn-main, .btn-main:visited {
    background: var(--dark-blue);
    border-color: var(--dark-blue);
    color: var(--white);
}
    .btn-main:hover {
        background: var(--white);
        border-color: var(--dark-blue);
        color: var(--dark-blue);
    }

a.btn-orange, a.btn-orange:visited {
    font-weight: 700;
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
}

.btn-orange-reverse, .btn-orange-reverse:visited {
    background: transparent;
    border-color: var(--orange);
    color: var(--orange);
}

.btn-orange:hover {
    font-weight: 700;
    background: var(--white);
    border-color: var(--orange);
    color: var(--orange);
}

.btn-orange-reverse:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
}

.btn-main-reverse, .btn-main-reverse:visited {
    background: rgba(255, 255, 255, 0.5);
    border-color: var(--dark-blue);
    color: var(--dark-blue);
}

    .btn-main-reverse:hover {
        background: var(--dark-blue);
        border-color: var(--dark-blue);
        color: var(--white);
    }

.fixed-width {
    margin: 0 auto;
    max-width: 1200px;
    margin-top: 30px;
}

    .fixed-width.header-wrapper {
        margin-top: 0;
    }

.no-top-margin {
    margin-top: 0px;
}

.header-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    height: 100%;
}

.header-logo-wrapper {
    display: flex;
    flex: 0 1 50%;
    justify-content: flex-start;
}

.header-cta-wrapper {
    display: flex;
    flex: 0 1 50%;
    align-items: center;
    justify-content: flex-end;
}

.header-cta {
    text-decoration: none;
}

.mobile-tab-wrapper {
    display: flex;
    justify-content: space-evenly;
}

.tab-title {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    border: 1px solid #C4C4C4;
    color: #2B2B2B;
    background-color: #F4F4F4;
    font-size: 18px;
    min-height: 34px;
    text-align: center;
}

    .tab-title.selected {
        background-color: #03356E;
        color: #FFF;
    }

        .tab-title.selected.emergency {
            background-color: #B21A10;
        }

#service-selection-body .service-card-section-title {
    text-align: center;
    margin-bottom: 15px;
}

.guarantee {
    text-align: center;
    margin-top: 15px;
}

    .guarantee span {
        color: #168928;
    }

    .guarantee p {
        font-size: 20px;
    }

.service-card-container {
    display: flex;
    justify-content: space-between;
}

    .service-card-container:has(div.service-card.one-card) {
        justify-content: center;
    }

.service-card-container:has(div.service-card.two-card) {
    justify-content: space-evenly;
}

.service-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    border: 1px solid #C4C4C4;
    border-radius: 4px;
    background-color: #FFF;
    margin-top: 42px;
}

    .service-card.one-card,
    .service-card.two-card,
    .service-card.three-card {
        max-width: 380px;
    }

    .service-card.four-card {
        max-width: 270px;
    }

    .service-card.five-card {
        max-width: 225px;
    }

    .service-card.emergency {
        border: 1px solid #FFCFCA;
    }

.service-card-title-container {
    flex: 1 1 auto;
    min-height: 34px;
    width: 204px;
    text-align: center;
    vertical-align: middle;
    background-color: #03356E;
    margin: -17px auto 0;
}

    .service-card-title-container.emergency {
        background-color: #B21A10;
    }

.service-card-title {
    font-size: 18px;
    color: #FFF;
    font-weight: bold;
    vertical-align: middle;
}

.service-card-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
}

    .service-card-top button {
        margin-top: 20px;
        margin-bottom: 30px;
        border-radius: 4px;
        width: 201px;
        height: 40px;
    }
        .service-card-top button:disabled,
        .service-card-top button.emergency:disabled {
            background-color: #2B2B2B;
            border-color: #2B2B2B;
        }

            .service-card-top button:disabled:hover,
            .service-card-top button.emergency:disabled:hover {
                color: #FFF;
                background-color: #2B2B2B;
                border-color: #2B2B2B;
                cursor: not-allowed;
            }

        .service-card-top button.emergency,
        .service-card-top button.emergency:visited {
            background-color: #B21A10;
            border: 1px solid #B21A10;
        }

            .service-card-top button.emergency:hover {
                color: #B21A10;
                background-color: #FFF;

            }

.service-price {
    display: flex;
    align-items: flex-end;
    height: 43px;
    font-family: 'Archivo', sans-serif;
    font-size: 34px;
    font-weight: 900;
    margin-top: 20px;
    line-height: 1;
}

    .service-price sup {
        font-family: 'Archivo', sans-serif;
        font-size: 30px;
        align-self: flex-start;
    }

    .service-price sub {
        font-family: 'Archivo', sans-serif;
        font-size: 16px;
    }

.diagnostics .title {
    font-size: 18px;
    color: #2b2b2b;
    text-align: center;
    margin-top: 10px;
}

.affirm {
    text-align: center;
    margin-top: 20px;
    max-width: 201px;
    margin-bottom: 20px;
}

.affirm .p-HeightObserverProvider-container {
    height: 33px;
}

.financing-banner {
    max-width: 100%;
}

.recovery .title,
.support .title,
.transfer-media .title,
.shipping .title {
    font-size: 20px;
    font-weight: bold;
    color: #004C96;
    text-align: center;
    margin-top: 15px;
    text-transform: uppercase;
}

.diagnostics .body,
.recovery .body,
.support .body,
.transfer-media .body,
.shipping .body {
    margin-top: 10px;
    text-align: center;
}

    .diagnostics .body span,
    .recovery .body span,
    .support .body span,
    .transfer-media .body span,
    .shipping .body span {
        display: block;
        font-size: 18px;
        color: #2B2B2B;
        font-weight: 600;
    }

    .diagnostics .body sup,
    .recovery .body sup,
    .support .body sup,
    .transfer-media .body sup {
        vertical-align: super;
        font-size: small;
    }

    .diagnostics .body a,
    .recovery .body a,
    .support .body a,
    .transfer-media .body a {
        text-decoration: none;
    }

.service-card-bottom {
    width: 100%;
    background-color: #FAFAFA;
    padding-bottom: 30px;
}
    .service-card-bottom.emergency {
        background-color: #FFF6F5;
    }

    .service-card-bottom .shipping {
        height: 81px;
    }


.content-block {
    display: flex;
}

.left-column {
    display: flex;
}

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

.media-information-card {
    background-color: var(--white);
}

.media-image {
    display: flex;
    justify-content: center;
    width: 476px;
    margin: auto 80px auto 0px;
    height: fit-content;
}

.media-image img {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 400px;
}

.media-information {
    margin-bottom: 25px;
}

    .media-information h2 {
        line-height: 1;
        margin-top: 0px;
    }

    .media-information p {
        margin-top: 5px;
        margin-bottom: 0;
    }

    .media-information ul {
        margin-top: 10px;
    }

.ready-to-start {
    padding: 30px 0;
}

.ready-to-start .left-column {
    flex-direction: column;
}

.ready-to-start-image {
    margin-left: 50px;
}

.ready-to-start-image-mobile {
    display: none;
}

.price-range-section{
    margin-top:40px;
}

.quote-range-card {
    width: 100%;
}

.quote-range-card-body {
    background-color: #FFF;
    padding: 30px 19px;
}

    .quote-range-card-body .left-column {
        flex: 1 1 100%;
    }

    .quote-range-card-body .right-column {
        flex: 1 1 auto;
    }


.price-calc {
    height: 40px;
    border-top: solid 1px #C4C4C4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

    .price-calc a {
        font-size: 20px;
        font-weight: 600;
        color: #004C96;
        text-decoration: none;
        vertical-align: middle;
        text-align: right;
    }

    .price-calc i {
        font-size: 10px;
        color: #004C96;
        margin-left: 5px;
        margin-right: 20px;
        vertical-align: top;
    }

.quote-range-card {
    border: solid 1px #C4C4C4;
    border-radius: 4px;
}

.quote-range-information {
    margin-left: 30px;
}

.quote-range-information h2 {
    line-height: 0.75;
    margin-bottom: 20px;
}

.quote-range-information p {
    font-size: 20px;
    color: #2B2B2B;
}

    .quote-range-information p:last-child {
        margin-top: 10px;
    }

.price-quote-range {
    font-family: 'Source Sans Pro Black', sans-serif;
    color: #004C96;
    font-weight: bold;
}

.footnotes {
    margin: 30px auto 30px;
}

.footnotes p {
    font-size: 16px;
    color: #2B2B2B;
    padding-bottom: 12px;
}

.video-testimonials-section {
    margin: 30px 0;
}

    .video-testimonials-section form {
        display: flex;
        justify-content: center;
    }

    .video-testimonials-section .video-grid {
        margin-top: 30px;
        display: grid;
        grid: auto-flow / repeat(var(--story-grid-column-count, 1), 1fr);
        gap: 53px;
        row-gap: 30px;
        margin-bottom: 20px;
    }

.video-testimonial-summary-body {
    display: flex;
    flex: 0 1 75%;
    align-items: center;
    gap: 50px;
}

    .video-testimonial-summary-body a {
        display: flex;
        flex: 0 0 20%;
        justify-content: center;
        align-items: center;
        height: 3.125rem;
        font-size: 1.25rem;
        padding: 12px 45px;
        text-decoration: none;
    }

.highlight-orange {
    color: var(--orange);
}

.bold {
    font-weight: bold;
}

.center-align {
    text-align: center;
}

.select-error-wrapper {
    display: flex;
    flex-direction: column;
    height: 85vh;
}

.select-error {
    flex: 1 1 auto;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    align-content: center;
}

@media (min-width: 600px) {
    .video-testimonials-section .video-grid {
        --story-grid-column-count: 2;
    }
}

@media (min-width: 860px) {
    .video-testimonials-section .video-grid {
        --story-grid-column-count: 4;
    }
}

@media (max-width: 1020px) {
    .video-testimonials-section .video-grid {
        gap: 20px;
        row-gap: 20px;
        margin-top: 30px;
    }
}

.video-grid a.video-grid-item {
    display: block;
    width: 100%;
    position: relative;
    line-height: 0;
}

.video-grid .video-item-block {
    border: solid 2px transparent;
}

    .video-grid .video-item-block:hover {
        border: solid 2px #eba70e;
    }

.video-grid .story-link-block {
    border: solid 0.5px #02447f;
    position: relative;
    border-top: none;
}

.video-grid .story-link {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-blue);
    display: block;
    padding: 5px 0;
}

    .video-grid .story-link:hover {
        text-decoration: underline;
    }

.video-grid img {
    width: 100%;
    height: initial;
}



.video-testimonials-section .load-more {
    align-self: center;
    transition: 200ms;
    display: block;
    cursor: pointer;
    width: 100%;
    max-width: 250px;
    padding: 10px;
    font-size: 18.9px;
    font-weight: bold;
    color: var(--dark-blue);
    border: 2px solid var(--dark-blue);
    border-radius: 9999px;
    background: transparent;
    margin-bottom: 40px;
}

.btn-black {
    border-radius: 4px;
    background: #2B2B2B;
    padding: 7px 20px;
    width: max-content;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 15px;
    text-decoration: none;
    margin-top: 25px;
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}

@media handheld, only screen and (max-width: 1239px) {
    .video-testimonial-summary-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: initial;
    }

        .video-testimonial-summary-body a {
            display: flex;
            width: 235px;
            justify-content: center;
            height: 3.125rem;
            margin-top: 20px;
        }
}

@media only screen and (min-width: 1200px) {
    .mobile-tab-wrapper {
        display: none;
    }
}

@media handheld, only screen and (max-width: 1199px) {
    .fixed-width {
        margin: 30px 40px 0;
    }

    .no-top-margin {
        margin-top: 0px;
    }

    .mobile-tab-wrapper {
        margin-top: 20px;
    }

    .service-card,
    .service-card-title-container {
        display: none;
    }

    .service-card {
        margin-top: 0px;
    }

        .service-card.selected {
            display: flex;
            max-width: 100%;
            height: 100%;
        }

    .content-block {
        flex-direction: row;
    }

    .footnotes {
        margin-top: 30px;
    }
}

@media only screen and (max-width: 956px) {
    .content-block {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .left-column {
        justify-content: center;
    }

    .right-column {
        margin-top: 15px;
    }


    .ready-to-start-title h2 {
        margin-bottom: 15px;
    }

        .ready-to-start .right-column {
            margin: 0;
            padding: 0;
        }

        .ready-to-start .left-column {
            flex-direction: column;
        }

        .ready-to-start h2 {
            text-align: center;
        }

    .ready-to-start-body p:first-child {
        margin-bottom: 10px;
    }

    .ready-to-start-image {
        display: none;
    }

    .ready-to-start-image-mobile {
        display: flex;
        margin: 0 auto 15px;
    }

    .quote-range-img img,
    .ready-to-start-image-mobile img {
        width: 100%;
        height: auto;
    }

    .quote-range-information {
        margin: 7px 10px 20px;
    }

        .quote-range-information h2 {
            text-align: center;
        }

    .media-information-card .media-image,
    .ready-to-start-image {
        margin: 0 auto;
        width: 100%;
        max-width: 476px;
    }

    .media-information {
        margin-top: 10px;
    }

    .btn-black {
        margin: 0 auto;
        margin-top: 25px;
    }
}

@media only screen and (max-width: 768px) {
    body {
        font-size: 16px;
    }

    .fixed-width {
        margin: 20px 15px 0;
    }

    .no-top-margin {
        margin-top: 0px;
    }

    .footnotes {
        margin-top: 30px;
    }

    .header-logo-wrapper img {
        width: 137px;
        height: auto;
    }

    .header-cta-wrapper .btn {
        font-size: 12px;
    }

    h1, h2 {
        font-family: 'Archivo', sans-serif;
        font-weight: 900;
    }

    h1 {
        font-size: 22px;
    }

    h2 {
        font-size: 20px;
    }

    .media-information-card {
        padding: 10px;
    }

        .media-information-card .media-image img {
            max-height: 300px;
        }

    .tab-title {
        font-size: 12px;
        min-height: 30px;
    }

    .service-price {
        font-size: 30px;
        height: 39px;
    }

        .service-price sup {
            font-size: 26px;
        }

    .diagnostics .title {
        font-size: 18px;
        margin-top: 15px;
    }

    .recovery .title,
    .support .title,
    .transfer-media .title {
        font-size: 18px;
        margin-top: 20px;
    }

    .diagnostics .body span,
    .recovery .body span,
    .support .body span,
    .transfer-media .body span,
    .shipping .body span,
    .quote-range-information p,
    .price-calc a {
        font-size: 16px;
    }

    .price-calc {
        text-align: center;
        justify-content: center;
    }

        .price-calc i {
            display: none;
        }

    .guarantee p {
        font-size: 18px;
    }

    .video-testimonial-summary-body {
        font-size: 18px;
    }

        .video-testimonial-summary-body a {
            font-size: 18px;
        }

    .footnotes p {
        font-size: 14px;
        padding-bottom: 10px;
    }
}