/*
--- 01 TYPOGRAPHY SYSTEM

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

- Font weights
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line heights
Default: 1
Small: 1.05
Medium: 1.2
Paragraph default: 1.6

- Letter spacing
-0.5px
0.75px

--- 02 COLORS

- Primary: #e67e22
- Tints:
#fdf2e9
#fae5d3
#eb984e

- Shades: 
#cf711f
#45260a

- Accents:
- Greys

#888
#767676 (lightest grey allowed on #fff)
#6f6f6f (lightest grey allowed on #fdf2e9)
#555
#333

--- 05 SHADOWS

0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

--- 06 BORDER-RADIUS

Default: 9px
Medium: 11px

--- 07 WHITESPACE

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/





/* HEADER */


.header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fdf2e9;
    height: 9.6rem;
    padding: 0 4.8rem;
    position: relative;
   
}

.logo {

    height: 2.2rem;

}

/* MOBILE */

.icon-mobile-nav {

    height: 4.8rem;
    width: 4.8rem;
    color: #333;
}

.btn-mobile-nav {

    border: none;
    background: none;
    cursor: pointer;
    display:none;

}

.icon-mobile-nav[name=close-outline]{

    display:none;

}

/*NAVIGATION */

.main-nav-list {

    list-style: none;
    display: flex;
    gap: 4.8rem;
    align-items: center;
}

.main-nav-link:link,
.main-nav-link:visited {

    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 1.8rem;
    transition: all 0.3s;
    display: inline-block;

}

.main-nav-link:hover,
.main-nav-link:active {

    color: #CF711f;
}

.main-nav-link.nav-cta:link,
.main-nav-link.nav-cta:visited {

    padding: 1.2rem 2.4rem;
    border-radius: 9px;
    color: white;
    background-color: #e67e22;


}

.main-nav-link.nav-cta:hover,
.main-nav-link.nav-cta:active {

    padding: 1.2rem 2.4rem;
    border-radius: 9px;
    color: white;
    background-color: #CF711f;


}


/* HERO */





html {

    font-size: 62.5%;
    scroll-behavior: smooth;
}


* {

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

.section-hero {

    background-color: #fdf2e9;
    padding: 4.8rem 0 9.6rem 0;
}



.hero-img {

    width: 100%;
}





.hero {

    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 140rem;
    margin: 0px auto;
    align-items: center;
    gap: 9.6rem;
    padding: 0 3.2rem;

}




.delivered-meals {

    display: flex;
    margin-top: 8rem;
    align-items: center;
    gap: 1.6rem;

}

.delivered-img {

    display: flex;
}

.delivered-img img {

    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    margin-right: -1.6rem;
    border: 3px solid #fdf2e9;
}

.delivered-img img:last-child {

    margin: 0;
}

.delivered-text {

    font-size: 1.8rem;
    font-weight: 600;
}



.delivered-text span {

    color: #CF711F;
    font-weight: 700;
}

.hero-description {

    font-size: 2rem;
    line-height: 1.6;
    margin-bottom: 4.8rem;

}

.test {

    background-color: red;
    padding: 100px;
    /* width:1000px; */
    max-width: 1000px;
}

body {

    font-family: "Rubik", sans-serif;
    line-height: 1;
    font-weight: 400;
    color: #555;
    overflow-x: hidden;
}

/*FEATURED IN */

.heading-featured-in {

    font-size: 1.4rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    text-align: center;
    margin-bottom: 2.6rem;
    color: #777;
}

.section-featured {

    padding: 4.8rem 0 3.2rem 0;
}

.logos {

    display: flex;
    justify-content: space-around;

}

.logos img {

    height: 2.8rem;
    filter: brightness(0);
    opacity: 50%;
}


/*HOW IT WORKS SECTION */

.section-how {


    padding: 9.6rem 0;

}

.step-img {

    width: 35%;


}

.step-image-box {

    align-items: center;
    justify-content: center;
    display: flex;
    position: relative;
}

.step-image-box::before {

    content: "";
    display: block;
    width: 60%;
    padding-bottom: 60%;
    background-color: #fdf2e9;
    position: absolute;
    border-radius: 50%;
    z-index: -2;


}

.step-image-box::after {

    width: 45%;
    padding-bottom: 45%;
    background-color: #fae5d3;
    position: absolute;
    display: block;
    content: "";
    border-radius: 50%;
    z-index: -1;

}

.step-number {

    font-size: 8.6rem;
    font-weight: 600;
    color: #ddd;
    margin-bottom: 1.2rem;
}

.step-description {

    line-height: 1.8rem;
    font-size: 1.8rem;
}


/* MEALS SECTION */


.section-meals {


    padding: 9.6rem 0;

}

.meal-img {

    width: 100%;
}

.meal-title {

    font-size: 2.4rem;
    color: #333;
    font-weight: 600;
    margin-bottom: 3.2rem;

}

.meal-attributes {

    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.meal-attribute {

    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 1rem;

}

.meal-icon {

    height: 2.4rem;
    width: 2.4rem;
    color: #e67e22
}

.tag {

    display: inline-block;
    padding: 0.4rem 0.8rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #222;
    border-radius: 100px;
    font-weight: 600px;
}

.meal-tags {

    margin-bottom: 1.2rem;
    display: flex;
    gap: 0.4rem;
}

.meal {

    box-shadow: 0 2.4rem 4.8rem -3rem rgba(0, 0, 0, 0.35);
    border-radius: 11px;
    overflow: hidden;
    transition: all 0.4s;
}


.card-content {

    padding: 3.2rem 4.8rem 4.8rem 4.8rem;
}


.tag--vegetarian {

    background-color: #51cf66;

}

.tag--vegan {

    background-color: #94d82d;
}

.tag--paleo {

    background-color: #fcc419;
}


.all-recipes {

    text-align: center;
    font-size: 1.8rem;
}


.link:visited,
.link:link {

    text-decoration: none;
    color: #e67e22;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.2rem;
    display: inline-block;
    transition: all 0.3s;
}

.link:hover,
.link:active {

    color: rgba(207, 113, 31, 0.655);
    border-bottom: 1px solid transparent;
}

.meal:hover {

    box-shadow: 0 3.2rem 6.4rem -3rem rgba(0, 0, 0, 0.15);
    transform: translateY(-1.2rem);


}

/* testimonials */

.section-testimonials {


    background-color: #fdf2e9;
    display: grid;
    grid-template-columns: 55fr 45fr;
    align-items: center;
}

.testimonials {

    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 4.8rem;
    column-gap: 8rem;

}

.testimonial-image {

    width: 6.4rem;
    border-radius: 50%;

}

.testimonial-text {

    font-size: 1.8rem;
    line-height: 1.8;
    margin-bottom: 1.2rem;
}

.testimonial-name {

    font-size: 1.6rem;
    color: #6F6F6F;
}

.testimonials-container {

    padding: 4.8rem 9.6rem;
}

/* GALLERY */

.gallery {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    padding: 1.6rem;

}

.gallery-item {

    overflow: hidden;
}

.gallery-item img {

    display: block;
    width: 100%;
    transition: all 0.4s;
}

.gallery-item img:hover {

    transform: scale(1.1);

}


/* PRICING */

.section-pricing {

    padding: 9.6rem 0;
}

.plan-header {

    text-align: center;
    margin-bottom: 4.8rem;
}

.plan-name {

    color: #CF711f;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: 0.75px;
    margin-bottom: 3.2rem;

}

.plan-price {

    font-size: 6.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.6rem;
}

.plan-price span {

    font-size: 3rem;
    font-weight: 500;

}

.plan-text {

    font-size: 1.6rem;
    line-height: 1.8rem;
    color: #6F6F6F
}

.plan-signup {

    text-align: center;
    margin-top: 4.8rem;
}

.pricing-plan {


    border-radius: 11px;

    width: 45%;
    justify-items: center;
}

.pricing-plan--starter {

    justify-self: end;
    border: 2px solid #fdf2e9;
    padding: 4.6rem;

}

.pricing-plan--complete {

    background-color: #fdf2e9;
    padding: 4.8rem;
    position: relative;
    overflow: hidden;

}

.pricing-plan--complete::after {

    content: "Best Value";
    position: absolute;
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 700;
    top: 6%;
    right: -18%;
    background-color: #ffc61a;
    padding: 0.8rem 8rem;
    transform: rotate(45deg);


}

/*FEATURE*/

.feature {}

.feature-icon {

    color: #e67e22;
    height: 3.2rem;
    width: 3.2rem;
    margin-bottom: 3.2rem;
    background-color: #fdf2e9;
    padding: 1.6rem;
    border-radius: 50%;

}

.feature-title {

    font-size: 2.4rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1.6rem;
}

.feature-text {

    font-size: 1.8rem;
    line-height: 1.8rem;
}

.plan-details {

    font-size: 1.6rem;
    line-height: 1.6;
    text-align: center;

}

/* CTA SECTION */

.section-cta {

    padding: 4.8rem 0 12.8rem 0;
}

.cta {

    display: grid;
    grid-template-columns: 2fr 1fr;
    background-image: linear-gradient(to right bottom, #eb984e, #e67e22);
    box-shadow: 0 2.4rem 4.8rem -3rem rgba(0, 0, 0, 0.65);
    border-radius: 11px;
    overflow: hidden;

}


.cta-text-box {

    color: #45206a;
    padding: 4.8rem 6.4rem 6.4rem 6.4rem;

}

.cta-text {

    font-size: 1.8rem;
    line-height: 1.8rem;
    margin-bottom: 4.8rem;
}

.cta-text-box.heading-secondary {

    color: #45260a;
    margin-bottom: 3.2rem;

}

.cta-img-box {

    background-image: linear-gradient(to right bottom, #eb974e99, #e67d2200), url('../content/img/eating.jpg');
    background-size: cover;
    background-position: center;


}

.cta-form {

    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3.2rem;
    row-gap: 2.4rem;
}

.cta-form label {

    display: block;
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 1.2rem;

}

.cta-form input,
.cta-form select {

    width: 100%;
    padding: 1.2rem;
    font-size: 1.8rem;
    font-family: inherit;
    border: none;
    background-color: #fdf2e9;
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    color: inherit;
}

.cta-form input::placeholder {

    color: #aaa;
}


.cta *:focus {

    box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5);
}

.heading-secondary.padding-md {

    margin-bottom: 4.8rem;
}

/* FOOTER */

.footer {

    padding: 12.8rem 0;
    border-top: 1px solid #eee;

}

.footer-heading {

    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 4rem;
}

.footer-nav {

    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.footer-link:link,
.footer-link:visited {

    text-decoration: none;
    font-size: 1.6rem;
    color: #888;
    transition: all 0.3s;
}

.footer-link:hover,
.footer-link:active {

    text-decoration: none;
    font-size: 1.6rem;
    color: #555;
}

.social-links {

    list-style: none;
    display: flex;
    gap: 2.4rem;
}

.footer-logo {

    display: block;
    margin-bottom: 3.2rem;
}

.social-icon {

    height: 2.2rem;
    width: 2.4rem;
}

.copyright {

    font-size: 1.4rem;
    color: #767676;
    line-height: 1.6;
    margin-top: auto;
}

.logo-col {

    display: flex;
    flex-direction: column;

}

.contacts {

    font-style: normal;
    font-size: 1.6rem;
    line-height: 1.6;
}

.contacts:first-child {

    margin-bottom: 2.4rem;
}

/* STICKY NAVIGATION */

.sticky .header{

    position:fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: white;
    z-index: 100;
    height: 8rem;
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: 0 1.2rem 1.6rem rgba(0, 0, 0, 0.153);
}

.sticky .section-hero{

    margin-top: 9.6rem;
}