@media only screen and (max-width: 378px) {
    .addon-inner {
        min-height: 1728px !important;
    }

    .addon-right {
        top: 10% !important;
    }

    .hero-copy h3 {
        font-size: 12px;
    }

    .brand-row {
        border-bottom: none !important;
    }
}
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        position: absolute !important;
    }
}

@media only screen and (max-width: 575px) {
    .info-card {
        margin-bottom: 18px;
    }

    .photos-stage {
        position: static;
        min-height: auto;
        padding-top: 8px;
    }

    .advisor {
        position: relative;
        margin: 14px auto;
        width: 78% !important;
        height: 260px !important;
    }

    .advisor::before,
    .advisor::after {
        display: none;
    }

    .a-main,
    .a-top,
    .a-right,
    .a-front {
        right: auto;
        top: auto;
        bottom: auto;
        left: auto;
    }

    .steps-grid {
        grid-template-columns: 1fr;
    }

    .step-card {
        min-height: auto;
        padding: 18px;
    }

    .step-number {
        font-size: 1.9rem;
    }

    .step-image img {
        max-width: 220px;
    }
    .brand-row {
        border-bottom: none !important;
    }
}

@media (max-width: 991.98px) {
    .faq-heading {
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .left-card {
        padding: 12px;
    }

    .left-card img {
        max-width: 260px;
    }
}

@media (max-width: 700px) {
    .brand-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .footer-top {
        padding: 28px 14px 18px;
    }
}


@media only screen and (max-width: 768px) {
    .row.align-items-center {
        gap: 18px;
    }

    .advisor::before {
        left: -140px;
        width: 140px;
    }

    .a-main {
        right: 18%;
        top: 8px;
    }

    .a-top {
        right: 6%;
        top: -6px;
    }

    .a-front {
        right: 26%;
        bottom: 0;
    }

    .a-right {
        right: 6%;
        bottom: 6px;
        width: 260px;
        height: 180px;
    }

    .photos-stage {
        min-height: 480px;
    }

    .addon-inner {
        min-height: 1000px !important;
    }

    .addon-right {
        top: 17% !important;
    }

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

    .hero-sub {
        margin-top: 8px;
    }

    .hero-copy {
        max-width: 90%;
        left: 18px;
        right: 18px;
    }

    .comparison-row {
        grid-template-columns: 1fr;
    }

    .cmp-wrapper {
        padding: 0 8px;
    }

    .btn-outline-dark {
        border: 1px solid #c70303;
        padding: 0;
        outline: none;
    }

    .btn-outline-dark:hover {
        background: none;
        color: #c70303;
    }
}

@media only screen and (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        justify-content: flex-end !important;
    }
}


@media only screen and (max-width: 992px) {
    .addon-inner {
        grid-template-columns: 1fr;
        /* stack */
    }

    .addon-left {
        border-bottom: 1px solid rgba(198, 40, 40, 0.06);
        padding: 28px 22px;
    }

    .addon-right {
        padding: 22px;
    }

    .addons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .addon-left h1 {
        font-size: 1.45rem;
    }

    .hero-sub {
        text-align: left;
    }

    .hero-copy {
        max-width: 80%;
        left: 22px;
    }

    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .step-card {
        min-height: 320px;
    }
}

@media only screen and (max-width: 1100px) {
    .advisor::before {
        left: -180px;
        width: 180px;
    }

    .a-main {
        right: 22%;
    }

    .a-front {
        right: 28%;
    }

    .a-top {
        right: 4%;
        top: -10px;
    }

    .a-right {
        right: 6%;
        bottom: 12px;
    }

    .photos-stage {
        min-height: 420px;
    }

    .cmp-grid {
        grid-template-columns: 1fr;
    }

    .page-intro {
        text-align: left;
        margin-bottom: 8px;
    }

    .section-label {
        display: none;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-top {
        padding: 36px 18px 24px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .legal-note {
        max-width: 100%;
    }
}

@media only screen and (max-width: 1140px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1140px;
    }

    .banner .smarter-motor {
        width: 300px;
    }

}

@media (max-width: 1200px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .addon-inner {
        grid-template-columns: 300px 1fr;
    }

    .addon-left {
        padding: 36px 26px;
    }

    .addons-grid {
        gap: 18px;
    }

    .addon-number {
        font-size: 48px;

    }
}


@media (max-width: 576px) {
    .addon-left {
        padding: 22px 16px;
    }

    .addon-right {
        padding: 14px;
    }

    .addons-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .addon-card {
        padding: 18px;
        border-radius: 12px;
        min-height: auto;
    }

    .addon-number {
        font-size: 44px;
    }
}

@media (max-width: 900px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {

    /* hide desktop grid, show carousel */
    .grid {
        display: none;
    }

    .carousel-stage {
        display: block;
    }
}

@media (min-width: 701px) {
    .carousel-stage {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .hero {
        padding: 36px 10px;
    }

    .signup-card {
        margin: 18px auto 0;
    }
}

@media (max-width: 575.98px) {
    .hero-title {
        font-size: 1.45rem;
    }

    .hero-sub {
        font-size: .95rem;
    }

    .signup-card {
        max-width: 100%;
        padding: 18px;
    }
}

@media (max-width: 767.98px) {
    .why-title {
        text-align: center;
    }
}

@media (max-width: 991.98px) {
    .cards-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .panel-inner {
        padding: 18px;
    }

    .hero-section {
        padding: 30px 12px;
    }

    .hero-inner {
        padding: 0 8px;
    }
}

@media (max-width: 575.98px) {
    .cards-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .panel {
        padding: 12px;
    }

    .panel-inner {
        padding: 12px;
    }

    .feature-cardd {
        min-height: 72px;
    }

    .hero-title {
        font-size: clamp(1.4rem, 6.2vw, 2.1rem);
        text-align: center;
    }

    .hero-cta {
        display: block;
        margin: 10px auto 0;
    }

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

    .video-col {
        margin-top: 18px;
    }
}


:root {
    --white: rgba(255, 255, 255, 1);
    --black: rgba(0, 0, 0, 1);
    --red: rgba(204, 35, 39, 1);
    --gray: rgba(67, 67, 67, 1);
    --upper-nav-font-family: "Poppins", Helvetica;
    --upper-nav-font-weight: 600;
    --upper-nav-font-size: 15px;
    --upper-nav-letter-spacing: 0px;
    --upper-nav-line-height: 139.9999976158142%;
    --upper-nav-font-style: normal;
    --nav-font-family: "Poppins", Helvetica;
    --nav-font-weight: 600;
    --nav-font-size: 20px;
    --nav-letter-spacing: 0px;
    --nav-line-height: normal;
    --nav-font-style: normal;
    --nav-2-font-family: "Poppins", Helvetica;
    --nav-2-font-weight: 400;
    --nav-2-font-size: 18px;
    --nav-2-letter-spacing: 0px;
    --nav-2-line-height: normal;
    --nav-2-font-style: normal;
    --headline-XL-font-family: "Poppins", Helvetica;
    --headline-XL-font-weight: 700;
    --headline-XL-font-size: 50px;
    --headline-XL-letter-spacing: 0px;
    --headline-XL-line-height: 123.00000190734863%;
    --headline-XL-font-style: normal;
    --subtext-m-font-family: "Poppins", Helvetica;
    --subtext-m-font-weight: 600;
    --subtext-m-font-size: 24px;
    --subtext-m-letter-spacing: 0px;
    --subtext-m-line-height: 139.9999976158142%;
    --subtext-m-font-style: normal;
    --btn-text-font-family: "Poppins", Helvetica;
    --btn-text-font-weight: 600;
    --btn-text-font-size: 18px;
    --btn-text-letter-spacing: 0px;
    --btn-text-line-height: normal;
    --btn-text-font-style: normal;
    --box-body-font-family: "Poppins", Helvetica;
    --box-body-font-weight: 400;
    --box-body-font-size: 18px;
    --box-body-letter-spacing: 0px;
    --box-body-line-height: 139.9999976158142%;
    --box-body-font-style: normal;
    --sub-body-font-family: "Poppins", Helvetica;
    --sub-body-font-weight: 600;
    --sub-body-font-size: 40px;
    --sub-body-letter-spacing: 0px;
    --sub-body-line-height: 139.9999976158142%;
    --sub-body-font-style: normal;
    --h1-text-font-family: "Poppins", Helvetica;
    --h1-text-font-weight: 500;
    --h1-text-font-size: 80px;
    --h1-text-letter-spacing: 0px;
    --h1-text-line-height: 114.99999761581421%;
    --h1-text-font-style: normal;
    --h6-text-font-family: "Poppins", Helvetica;
    --h6-text-font-weight: 400;
    --h6-text-font-size: 24px;
    --h6-text-letter-spacing: 0px;
    --h6-text-line-height: 139.9999976158142%;
    --h6-text-font-style: normal;
}