/*

  - SPACING SYSTEM (px)
    2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

  - FONT SIZE SYSTEM (px)
    10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

*/

/* -- STYLES -- */

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

/* Rem Configuration */
html {
    font-size: 62.5%;
    overflow-x: hidden;
}

p {
    font-size: 2.2rem;
    color: #000;
}

/* Base Font */
body {
    font-family: "Merriweather", serif;
    overflow: hidden;
}

/* TITLE SECTION */
.heading-primary {
    font-size: 8rem;
    font-weight: 600;
    color: #ff0000;
}

.heading-secondary {
    font-size: 3.5rem;
    font-weight: 500;
}

/* BUY BOOK SECTION */
.mg-price-cart {
    margin-top: 7rem;
}

.price-text {
    font-family: "Playfair Display", serif;
    line-height: 1.5;
}

.price-text p {
    font-size: 2.8rem;
}

.price-text span {
    font-weight: 700;
}

.discount-price {
    word-spacing: 3rem;
    margin-top: -2rem;
}

.discount-price span {
    font-size: 6.4rem;
}

.price-save {
    font-size: 4rem;
}

.add-to-cart {
    margin-top: 2.4rem;
}

.add-to-cart-btn {
    /* width: 79%; */
    opacity: 100%;
    cursor: pointer;
    transition: all 300ms;
}

.add-to-cart-btn:hover {
    opacity: 85%;
}

.buy-book-fixer {
    gap: 10rem;
    justify-content: center;
    align-items: center;
}

/* GLIMPSE SECTION */

.section-container-spacing {
    margin-top: 4.8rem;
}

.img-1 {
    width: 50rem;
    margin-top: 9rem;
}

.glimpse-text {
    margin-bottom: 3rem;
    line-height: 1.625;
}

.fixer .glimpse-text:first-child {
    margin-top: 5rem;
}

/* BONUS SUBSECTION (GLIMPSE SECTION) */

.bonus-title {
    font-size: 3.6rem;
    /* line-height: 1.3; */
    color: #000;
    background-color: yellow;
    margin-top: 5rem;
}

.bonus-content:first-child {
    margin-top: 8rem;
}

.bonus-stitle {
    margin-bottom: 2.4rem;
}

.tablet {
    margin-top: 2rem;
}

.bonus-text h2 {
    font-size: 2.6rem;
}

.bonus-text p {
    margin-bottom: 3rem;
}

.bonus-bot-margin-fixer {
    margin-bottom: -6rem;
}

/* SHIPPING SECTION */
.shipping-text {
    /* font-size: 2.2rem; */
    /* line-height: 1.625; */
    margin: 2.5rem 1.5rem 0 1.5rem;
}

/* MONEYBACK SECTION */
.moneyback-text p {
    margin-bottom: 3rem;
}

/* WHY SHOULD GET SECTION */
.should-img {
    margin-top: 1.2rem;
}

.should-text h2 {
    font-size: 2.5rem;
}

.should-txt {
    line-height: 1.625;
}

/* RATING SECTION */
.rating-boxes {
    column-gap: 8rem;
    padding: 0;
}

.rating-stars {
    font-size: 2.4rem;
}

.rating-title {
    font-size: 2.4rem;
    text-decoration: underline;
}

.rating-title:hover {
    cursor: pointer;
    text-decoration: none;
}

.rating-text p {
    font-size: 1.8rem;
}

/* .rating-author {
} */

/* FOOTER */

.reddish {
    background: #800404;
    padding: 5rem 0;
}

.reddish-2 {
    background: #800404;
    padding: 0 0 2rem 0;
}

.footer-text {
    color: #ffffff;
    text-align: center;
}

a.menuitem:link,
a.menuitem:visited {
    color: #ffffff;
    font-size: 1.4rem;
    padding: 0.1rem 1.2rem;
    font-weight: 400;
    font-family: "Rubik", sans-serif;
    text-decoration: none;
}

a.menuitem:hover,
a.menuitem:active {
    color: #ffffff;
}

.cb-note p {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 300;
    font-family: "Rubik", sans-serif;
}

footer {
    margin-top: 5rem;
}

/* -- REUSABLE -- */
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.section-spacing {
    margin-top: 8rem;
}

.red-banner {
    background: #800404;
    padding: 1.2rem 1rem 1.2rem 1rem;
}

.yellow-banner {
    background: yellow;
    padding: 1rem 0 1rem 0;
}

figcaption {
    margin-top: 0.8rem;
}

.r-banner-title {
    font-size: 4rem;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 0;
}

.reusable-grid {
    display: grid;
}

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

.reusable-grid--3-col {
    grid-template-columns: repeat(3, 1fr);
}

.reusable-flex {
    display: flex;
}

.reusable-flex--dir-col {
    flex-direction: column;
}

.reusable-flex--gap-2 {
    gap: 2rem;
}

.reusable-flex--centering {
    justify-content: center;
    align-items: center;
}

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

.col-centered {
    float: none !important;
    margin: 0 auto;
}

/* -- QUERIES -- */
@media (min-width: 1200px) {
    .should-text_7 {
        margin-top: 5rem;
    }

    .should-img_1 {
        margin-top: 2rem;
    }

    .should-img_2 {
        margin-top: 3rem;
    }

    .should-img_3 {
        margin-top: 2rem;
    }

    .should-img_4 {
        margin-top: 4rem;
    }

    .should-img_5 {
        margin-top: 4rem;
    }

    .should-img_6 {
        margin-top: 2rem;
    }

    .should-img_7 {
        margin-top: 1rem;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .img-1 {
        width: 50rem;
        margin-top: 0rem;
    }

    .bonus-content > .reusable-flex {
        flex-direction: column;
    }

    .should-text_7 {
        margin-top: 5rem;
    }

    .should-text h2 {
        font-size: 2.4rem;
    }

    .should-img_1 {
        margin-top: 5rem;
    }

    .should-img_2 {
        margin-top: 5rem;
    }

    .should-img_3 {
        margin-top: 5rem;
    }

    .should-img_4 {
        margin-top: 5rem;
    }

    .should-img_5 {
        margin-top: 4rem;
    }

    .should-img_6 {
        margin-top: 3rem;
    }

    .should-img_7 {
        margin-top: 2rem;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .img-1 {
        width: 50rem;
        margin-top: 0rem;
    }

    .bonus-content > .reusable-flex {
        flex-direction: column;
    }

    .moneyback-content.reusable-flex {
        flex-direction: column;
    }

    .moneyback-content > .col-sm-6 {
        width: 100%;
    }

    .moneyback-text {
        margin-top: 5rem;
    }

    .rating-boxes {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 6rem;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .img-1 {
        width: 50rem;
        margin-top: 0rem;
    }

    .bonus-content > .reusable-flex {
        flex-direction: column;
    }

    .moneyback-content.reusable-flex {
        flex-direction: column;
    }

    .moneyback-text {
        margin-top: 5rem;
    }

    .rating-boxes {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 6rem;
    }

    .buy-book-fixer {
        gap: 4rem;
        flex-direction: column;
    }

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

    .r-banner-title {
        font-size: 3.8rem;
    }
}

@media (max-width: 575px) {
    .img-1 {
        width: 50rem;
        margin-top: 0rem;
    }

    .buy-book-fixer {
        gap: 4rem;
        flex-direction: column;
    }

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

    .bonus-content > .reusable-flex {
        flex-direction: column;
    }

    .rating-boxes {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 6rem;
    }

    .moneyback-content.reusable-flex {
        flex-direction: column;
    }

    .moneyback-text {
        margin-top: 5rem;
    }
}