/* 

---------- TYPOGRAPHY ----------

FONT SIZES
12px / 16px / 20px / 24px / 32px / 40px / 48px / 62px

FONT WEIGHT
400 / 700

LINE HEIGHT
1.2 / 1.5

LETTER SPACING
0 / -2px

FONT FAMILY
Poppins 

---------- COLORS ----------

PRIMARY
Base: #339af0 (Sky Blue)
Tint: #d0ebff (Arctic)
Shade: #1c7ed6 (Deep Sea)

SECONDARY COLOR
Base: #9775fa (Lavender)
Tint: #e5dbff (Moonlight Iris)
Shade: #7048e8 (Velvet Night)

TERTIARY COLOR 
Base: #ff922b (Pumpkin)
Tint: #ffe8cc (Dawn)
Shade: #f76707 (Lava)

GREY
Base: #495057 (Slate)
Tint: #f1f3f5 (Pebble)
Shade: #212529 (Graphite)
White: #ffffff (White)
Black: #000 (Black)

*/

/* ---------- BORDER RADIUS ---------- 
 4px / 8px / 20px 

   ---------- SPACING SYSTEM ---------- 
 5px / 10px / 15px / 20px / 25px / 30px / 40px / 50px / 60px / 70px / 80px / 90px / 100px / 125px / 150px / 200px / 250px / 300px / 400px / 500px

 */

/* ---------------------------- GLOBAL STYLES ---------------------------- */

:root{
    /* ---------- TYPOGRAPHY ---------- */
    /* FONT SIZES */
    --text-sm: 1.2rem;
    --text-base: 1.6rem;
    --text-paragraph: 2rem;
    --text-h5: 2.4rem;
    --text-h4: 3.2rem;
    --text-h3: 4rem;
    --text-h2: 4.8rem;
    --text-h1: 6.2rem;

    /* FONT WEIGHT */
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* LINE HEIGHT */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;

    /* LETTER SPACING */
    --letter-spacing-tight: -2px;

    /* FONT FAMILY */
    --font-family: 'Poppins', sans-serif;

    /* ---------- COLORS ---------- */
    --primary-base: #4d2632;
    --primary-tint: #6b3e58;
    --primary-shade: #411818;

    --secondary-base: #9775fa;
    --secondary-tint: #e5dbff;
    --secondary-shade: #7048e8;

    --tertiary-base: #ff922b;
    --tertiary-tint: #ffe8cc;
    --tertiary-shade: #f76707;

    --grey-base: #495057;
    --grey-tint: #f1f3f5;
    --grey-shade: #212529;

    --white: #fff;
    --black: #000;

    /* ---------- MISCELLANEOUS ----------  */
    --nav-height: 8rem;


}

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

html{
    font-size: 62.5%;
}


body{
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--grey-base);
}

.container{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}

h1, h2, h3, h4, h5{
    font-weight: var(--font-weight-bold);
    line-height:var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--grey-shade);
}

h1{
    font-size: var(--text-h1);
}

h2{
    font-size: var(--text-h2) ;
}

h3{
    font-size: var(--text-h3);
}

h4{
    font-size: var(--text-h4);
}

h5{
    font-size: var(--text-h5);
}


p{
    font-size: var(--text-paragraph);
}

a{
    text-decoration: none;
    font-size: var(--text-base);
    display: inline-block;
}

ul{
    list-style: none;
}

.small-text{
    font-size: var(--text-sm);
}

span{
    display: inline-block;
}

/* ---------------------------- COMPONENTS ---------------------------- */

.btn{
    font-size: var(--text-base);
    text-decoration: none;
    padding: 1.5rem 3rem;
    border-radius: 8px;
    transition: .2s;
}

.btn-primary:link, .btn-primary:visited{
    color: var(--white);
    background-color: var(--primary-base);
    border: 2px solid var(--primary-base);
}
.btn-primary:hover, .btn-primary:active{
    color: var(--white);
    background-color: var(--primary-shade);
    border: 2px solid var(--primary-shade);
    box-shadow: 0px 3px 6px var(--grey-base);
}

.btn-primary-outline:link, .btn-primary-outline:visited{
    color: var(--primary-base);
    background-color: var(--white);
    border: 2px solid var(--primary-base);
}
.btn-primary-outline:hover, .btn-primary-outline:active{
    color: var(--primary-shade);
    background-color: var(--white);
    border: 2px solid var(--primary-shade);
    box-shadow: 0px 3px 6px var(--grey-base);

}


.btn-secondary:link, .btn-secondary:visited{
    color: var(--white);
    background-color: var(--secondary-base);
    border: 2px solid var(--secondary-base);
}
.btn-secondary:hover, .btn-secondary:active{
    color: var(--white);
    background-color: var(--secondary-shade);
    border: 2px solid var(--secondary-shade);
    box-shadow: 0px 3px 6px var(--grey-base);
}

.highlight{
    color: var(--white);
    padding: .5rem 1rem;
    border-radius: 4px;
}
.highlight-primary{
    background-color: var(--primary-base) ;
}
.highlight-secondary{
    background-color: var(--secondary-base);
}
.highlight-tertiary{
    background-color: var(--tertiary-base) ;
}

/* ---------------------------- SECTIONS ---------------------------- */
.mb{
    margin-bottom: 10rem;
}

.cookie-bg{
    display: flex;
    justify-content: center;
}
.cookie-image{
    width: 80rem;
    z-index: -1;
    position: absolute;
    transform: translate(0, -35rem);
    
}

.nav-layout{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    border: 1px solid var(--primary-shade);
    border-radius: 0 0 1rem 1rem ;
    padding: 0 1.5rem;
    background: rgb(77, 36, 39, .3);
    backdrop-filter: blur(1rem);

    box-shadow: 0px -1px 20px var(--black);

    position: fixed; 
    width: 100%;
    top: 0;
    z-index: 10; 
}

.web-logo{
    display: flex;
    align-items: center;
}
.left-hero-sec-grid{
    display: grid;
    grid-template-rows: 4.3fr 1.5fr 3fr;
}
.hero-title{
    align-self: end;
}
.hero-buttons-flex{
    display: flex;
    gap: 2rem;
    align-items: center;
    font-weight: var(--font-weight-bold);
}

.hero-review-flex{
    max-width: 60rem;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--primary-base);
    border-radius: 5rem;
    padding: 4rem;
    gap: 2rem;
    background: rgb(77, 36, 39, .7);
    backdrop-filter: blur(1rem);
    color: var(--white);
    
}
.review-card-profile{
    display: flex;
    gap: 2rem;
    align-items: center;
}
.review-image-frame{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background-color: rgb(0, 255, 55);
}
.review-image{
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
}
.star{
    width: 2.5rem;
}

#hero-product{
    display: none;
}

/* ------------------------------  MAIN  -------------------------------------- */

.main-top-selling-section{
    display: grid;
    grid-template-rows: 1fr 7fr;
    justify-content: center;
    justify-items: center;
}

.main-title{
    text-align: center;
    align-self: center;
}

.main-top-selling-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 5rem;
    width: 90%;
}
.main-top-selling-card{
    display: flex;
    flex-direction: column;
    /* gap: 4rem; */
    border: 1px solid var(--primary-base);
    border-radius: 5rem;
    width: 100%;
    padding: 2rem 3rem;
    background: #6b3e58 .5;
}
.main-cookie-div{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 18rem;
    /* transform: translate(0, -8rem); */
}
.cookie{
    width: 20rem;
}

.price-button-flex{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
}
.cart{
    width: 3rem;
}
.cart-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 5rem;
}

/* ------------------------------  Footer  -------------------------------------- */
footer{
    display: grid;
    height: 5rem;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    border-top: 1px solid black;
}

/* ------------------------------  Media Queries  -------------------------------------- */


@media (min-width: 47.5rem) { /*760*/

    .cookie-bg{
        display: none;
        justify-content: end;
    }

    .hero-section-grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: end;
        height: calc(100vh - var(--nav-height));
        gap: 3rem;
    }
    
    #hero-product{
    display: flex;
    }

     .main-top-selling-card{
    gap: 4rem;
    }
    
}

@media (min-width: 66.25rem) {  /* 1060 */

    .main-top-selling-grid{
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    .main-top-selling-card{
    display: flex;
    flex-direction: column;
    gap: 4rem;
    border: 1px solid var(--primary-base);
    border-radius: 5rem;
    padding: 2rem 3rem;
    background: #6b3e58 .5;
    }
}