@media screen and (max-width:1669px) {
    .parallax h1 {
        top: 80px;
        left: -25%;
    }

    main {
        margin-top: 7%;
    }
}

@media screen and (max-width:1469px) {
    .parallax::before {
        top: 83px;
    }

    .parallax h1 {
        font-size: 3em;
        min-width: 550px;
        top: 60px;
        left: -25%;
    }

    main {
        margin-top: 6%;
    }
}

@media screen and (max-width:1389px) {
    .parallax::before {
        top: 73px;
    }

    .parallax h1 {
        top: 60px;
        left: -25%;
    }

    main {
        margin-top: 4.5%;
    }
}

@media screen and (max-width:1289px) {
    .parallax::before {
        top: 58px;
    }

    .parallax h1 {
        top: 60px;
        left: -25%;
    }

    main {
        margin-top: 1%;
    }
}

@media screen and (max-width:1198px) {
    .parallax::before {
        top: 46px;
    }

    .h1-break {
        top: 17px;
    }

    .parallax h1 {
        top: 60px;
        left: -25%;
    }

    main {
        margin-top: 1%;
    }

    #about {
        width: 100%;
    }
}

@media screen and (max-width:1126px) {
    .parallax::before {
        top: 37px;
    }

    .parallax h1 {
        font-size: 2.6em;
        min-width: 480px;
        top: 40px;
        left: -25%;
    }

    main {
        margin-top: -1%;
    }
}

@media screen and (max-width:1086px) {
    .parallax::before {
        top: 35px;
    }

    .parallax h1 {
        top: 40px;
        left: -25%;
    }

    main {
        margin-top: -1.5%;
    }
}

@media screen and (max-width:1024px) {
    .parallax::before {
        top: 20px;
    }

    .parallax h1 {
        top: 20px;
        left: -23%;
    }

    main {
        margin-top: -3.5%;
    }
}

@media screen and (max-width:985px) {
    .banner {
        height: auto;
    }
    #success-panel {
        width:80%;
    }

    .parallax::before {
        top: 19px;
    }

    .parallax h1 {
        font-size: 2.4em;
        min-width: 430px;
        top: 20px;
        left: -23%;
    }

    main {
        margin-top: -5%;
    }

    .top-banner,
    .bottom-banner {
        height: auto;
        position: relative;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .bottom-banner {
        margin: 2em auto;
    }

    .top-section-body,
    .bottom-section-body {
        width: 90%;
        margin-top: 0;
    }

    .top-section-image {
        margin-bottom: -20px;
    }

    .store-summary,
    .packages-summary {
        font-size: 1.1em;
    }
}

@media screen and (max-width:945px) {
    .parallax::before {
        top: 16px;
    }
    .review {
        width: 90%;
    }

    .parallax h1 {
        top: 10px;
    }

    main {
        margin-top: -6%;
    }
}

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

    .parallax::before {
        top: 7px;
    }

    main {
        margin-top: -7.5%;
    }
}

@media screen and (max-width:865px) {
    .parallax::before {
        top: 2px;

    }

    .parallax h1 {
        font-size: 2em;
        min-width: 360px;
        top: 0px;
        left: -23%;

    }

    main {
        margin-top: -9%;
    }

    #cart {
        padding-bottom: 1.5em;
    }

    .cart-total-inner {
        font-size: 1.4em;
        margin: 10px auto;

    }

    .cart-total-btn-panel {
        gap: 1.5em;
        flex-direction: column-reverse;
    }

    .checkout-btn {
        order: 1;
    }
}

@media screen and (max-width:815px) {
    .parallax h1 {
        top: 0px;
    }

    .parallax::before {
        top: -3px;
    }

    main {
        margin-top: -11%;
    }

}

@media screen and (max-width:768px) {
    .parallax::before {
        top: -10px;
    }

    .parallax h1 {
        top: -10px;

        font-size: 1.8em;
        min-width: 340px;
    }

    main {
        margin-top: -13%;
    }
}

@media screen and (max-width:705px) {
    .parallax::before {
        top: -18px;
    }

    .parallax h1 {
        top: -20px;
    }

    main {
        margin-top: -17%;
    }

    #cart {
        padding-bottom: 1.5em;
    }

    .cart-total-inner {
        font-size: 1.4em;
    }

    .cart-total-btn-panel {
        gap: 1.5em;
        flex-direction: column-reverse;
    }

    .checkout-btn {
        order: 1;
    }

}

@media screen and (max-width:670px) {
    .parallax::before {
        top: -25px;
    }

    .parallax h1 {
        top: -30px;
        font-size: 1.6em;
        min-width: 290px;
    }

    main {
        margin-top: -20%;
    }

}

@media screen and (max-width:625px) {
    .parallax::before {
        top: -29px;
    }

    .parallax h1 {
        top: -30px;
    }

    main {
        margin-top: -23%;
    }

}

@media screen and (max-width:595px) {
    header a img {
        width: 75px;
        height: 75px;
    }

    main {
        margin-top: -26%;
    }

    .parallax::before {
        top: -38px;
    }

    .parallax h1 {
        top: -40px;
    }

    #contact {
        width: 80%;
        flex-direction: column;
    }

    .contact-form {
        width: 90%;
        margin: auto;
        padding: 5%;
    }

    .contact-socials {
        margin: 2em auto 0;
    }

    details {
        width: 90%;
    }
}

@media screen and (max-width:565px) {
    .parallax::before {
        top: -42px;
    }

    .parallax h1 {
        top: -45px;
        font-size: 1.4em;
        min-width: 260px;
    }

    main {
        margin-top: -29.5%;
    }

    /* .package, */
    .product,
    .cart-item {
        width: 90%;
        min-height: 440px;
    }
}

@media screen and (max-width:535px) {
    .parallax::before {
        top: -46px;
    }

    main {
        margin-top: -32%;
    }
}

@media screen and (max-width:515px) {
    .parallax::before {
        top: -45px;
    }

    .parallax h1 {
        top: -40px;
    }

    .h1-break {
        top: 14px;
    }

    main {
        margin-top: -34%;
    }
}

@media screen and (max-width:490px) {
    header a img {
        width: 60px;
        height: 60px;
    }
    #success-panel {
        font-size: 0.8em;
    }

    .parallax::before {
        top: -65px;
    }

    .parallax h1 {
        top: -60px;
        font-size: 1.2em;
        min-width: 220px;
        left: -24%;
    }

    main {
        margin-top: -40%;
    }
}

@media screen and (max-width:465px) {
    .parallax h1 {
        top: -70px;
    }

    .parallax::before {
        top: -70px;
    }

    main {
        margin-top: -44%;
    }
}

@media screen and (max-width:445px) {
    .parallax::before {
        top: -69px;
    }

    .parallax h1 {
        top: -65px;
    }

    main {
        margin-top: -45%;
    }
}

@media screen and (max-width:430px) {
    .parallax::before {
        top: -68px;
    }

    main {
        margin-top: -49.5%;
    }
}

@media screen and (max-width:416px) {
    .parallax::before {
        top: -71px;
    }

    .h1-break {
        top: 14px;
    }

    .parallax h1 {
        font-size: 1em;
        min-width: 188px;
        top: -72px;
    }

    main {
        margin-top: -50%;
    }
}

@media screen and (max-width:398px) {
    .parallax::before {
        top: -75px;
    }

    .h1-break {
        top: 13.5px;
    }

    .parallax h1 {
        top: -75px;
    }

    main {
        margin-top: -54%;
    }
}

@media screen and (max-width:380px) {
    .parallax::before {
        top: -78px;
    }


    .parallax h1 {
        font-size: 0.9em;
        min-width: 190px;
        top: -76px;
    }

    main {
        margin-top: -57%;
    }
}

@media screen and (max-width:368px) {
    .parallax::before {
        top: -79px;
    }

    .parallax h1 {
        top: -79px;
    }

    main {
        margin-top: -59.5%;
    }
}

@media screen and (max-width:355px) {
    .parallax::before {
        top: -82px;
    }

    main {
        margin-top: -63%;
    }
}

@media screen and (max-width:333px) {
    .parallax::before {
        top: -84px;
    }

    .parallax h1 {
        top: -84px;
    }

    main {
        margin-top: -68.5%;
    }
}

@media screen and (max-width:322px) {
    .nav-link {
        font-size: 0.8em;
    }

    .parallax::before {
        top: -85px;
    }

    .parallax h1 {
        top: -84px;
    }

    main {
        margin-top: -72%;
    }
}

@media screen and (max-width:308px) {
    .nav-link {
        font-size: 0.8em;
    }

    .parallax::before {
        top: -87px;
    }

    .parallax h1 {
        font-size: 0.8rem;
        top: -87px;
    }

    main {
        margin-top: -76.5%;
    }
}

@media screen and (max-width:293px) {
    .nav-link {
        font-size: 0.8em;
    }

    .parallax::before {
        top: -88px;
    }

    .parallax h1 {
        top: -88px;
    }

    main {
        margin-top: -81%;
    }
}

@media screen and (max-width:278px) {
    .nav-link {
        font-size: 0.8em;
    }

    .parallax::before {
        top: -91px;
    }

    .parallax h1 {
        font-size: 0.8rem;
        min-width: 135px;
        top: -91px;
    }

    main {
        margin-top: -87%;
    }
}

/* 
SMALL SCREEN
MAIN
- REDUCE TOP MARGIN
TOP BANNER
- FLEX COLUMN
TB&BB IMAGE
- POSITION RELATIVE
PRODUCT, PACKAGE, CART - ITEM
- EXPAND WIDTH
CONTACT
- FLEX COLUMN
*/

/* 
LARGE SCREEN

BANNER 60% MAX WIDTH


*/