@media only screen and (max-width: 425px) {
     .addon-inner {
        min-height: 1700px !important;
    }
    body > div.bg-image > section:nth-child(4) > main > section > div{
        min-height: 1700px !important;
    }
    .a-main{
        right: 0% !important;
    }
    .a-front{
        right: 0% !important;
    }
}
@media only screen and (min-width: 768px) {
    /* .addon-inner {
        min-height: 1686px !important;
    } */
        .addon-right {
        top: 20% !important;
    }
}
.navbar-nav{
  position:absolute;
}
.dropdown-menu{
  z-index: 2000;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        position: absolute;
    }
}
@media only screen and (max-width: 378px) {
    .navbar-nav{
  position:none !important;
}
.dropdown-menu{
  z-index: none !important;
}
    .addon-inner {
        min-height: 869px !important;
    }

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

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

    .brand-row {
        border-bottom: none !important;
    }
}
@media only screen and (min-width: 575px) {
     /* .addon-inner {
        min-height: 1000px !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;
    }
    .brand-row {
        border-bottom: none !important;
    }
}

@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-right {
        top: 10% !important;
    }

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

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

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

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

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

@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: 60%;
        left: 22px;
    }
}

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

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