/* 
--01-TYPOGRAPY SYSTEM
    FONT SIZE SYSTEM (px)
    10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
    -DEFAULT FONT-WEIGHT:400
--02-COLOR
    -PRIMARY: #e67e22
    -TINTS:
    -SHADES:
    -ACCEENTS:
    -GRAYS:#555

--03-IMAGE

--04-ICON

--05-SHADOW

--06-BORDER-RADIOUS

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

  
########################################
######                      ############
###### 1rem = 16px = 62.5%  ############
######                      ############
######                      ############
######                      ############
######                      ############
########################################
    */

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

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    overflow-X: hidden;
}

body {
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    color: #555;
    line-height: 1;
    /* height: 100vh  ; */
    overflow-X: hidden;
}


/* HEADER SECTION */
.header {
    width: 100%;
    position: relative;
    height: 4.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FAE5D3;
    padding: 3.2rem 2.4rem 6.4rem 2.4rem;
}

.logo {
    height: 3.2rem;
}

.main--nav {
    font-size: 1.8rem;
    font-weight: 600;
    cursor: pointer;
    position: absolute;
    top: 2rem;
    right: 2rem;
}

/* Navigation */
.nav--list {
    display: flex;
    list-style: none;
    justify-content: center;
    align-items: center;

}

/* to hide mobile navigation */
.mob--nav-close {
    display: none;
}

.mob--nav-open {
    display: none;
}


.link--cta {
    background-color: #e67e22;
    border-radius: 0.7rem;
    color: #fff !important;
}

.navigation--link {
    color: #333;
    padding: 1rem 1.2rem;
    text-decoration: none;
    display: inline-block;
    transition: background 0.5s;
}

.navigation--link:hover {
    background-color: #ed9e59;
    border-radius: 0.7rem;
    color: #fff;

}



/* 
########################################################
################    Hero Section               ##########   ######################################################### .
*/

.section--hero {
    background-color: #FAE5D3;
    padding: 9.6rem 0;
}

.hero {
    max-width: 90%;
    /* max-width: 130rem; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 9.6rem;
    margin: 0 auto;
}

/* Section sticy */
.stiky {
    position: sticky;
    top: 0;
    bottom: 0;
    height: 6rem;
    width: 100%;

    padding-top: 0;
    padding-bottom: 0;
    box-shadow: 0 1.2rem 1.2rem #738efc1a;

    z-index: 10;

}

.hero--img {
    width: 100%;
}

.heading--primary {
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.5px;
    margin-bottom: 4.8rem;
    margin-bottom: 3.2rem;
}

.hero--description {
    font-size: 2rem;
    line-height: 1.6;
    margin-bottom: 4.8rem;
}

.btn {
    color: #fff;
    text-decoration: none;
    background-color: #e67e22;
    font-size: 1.5rem;
    padding: 1.5rem 2rem;

    margin-left: 01rem;
    border-radius: 1rem;

    /* hover "state" transition */
    transition: background 0.5s;
}

.btn--filled:hover {
    background-color: #ed9e59;
}

.btn--outline:hover {
    background-color: #FAE5D3;
    box-shadow: 0 0 0 3px #fff;
}

.btn--outline {
    background-color: #fff;
    color: #748ffc;
    font-size: 1.3rem;
}

.delivered--meals {
    display: flex;
    margin-top: 9.6rem;
    justify-content: center;
    align-items: center;
    gap: 2.4rem;
}

.delivered--imgs {
    display: flex;
}

.delivered--imgs img {
    height: 4.8rem;
    width: 4.8rem;
    border-radius: 50%;

    border: 0.2rem solid #FAE5D3;
    margin-left: -1.6rem;
}

.delivered--text {
    font-size: 1.8rem;
    font-weight: 600;
}

.delivered--text span {
    color: #e67e22;
}


/* ##################################################################  FEATURED IN SECTION   ########## ############################################### */

.feature--section {

    background-color: #fdf4ed;
    padding-bottom: 2.4rem;
}

.heading--feature {
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.1rem;
    padding: 1.8rem;
}

.logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5.2rem;
}

.logos img {
    height: 2.4rem;
    filter: brightness(0);
    opacity: 0.5;
    cursor: pointer;
}

/* 
##################################################################  SECTION HOW IT WORKS ########## ############################################### */
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem;
    justify-content: center;
    /* text-align: center; */
    margin-bottom: 4.8rem;
}

.section--how {
    padding: 8.4rem;
    background-color: #fff4e6;
}



.subheadingg {
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #e67e22;
    display: block;
    margin-bottom: 1.4rem;
}

.heading--secondary {
    font-size: 3.2rem;
    font-weight: 500;
    text-align: start;
    margin-bottom: 6.4rem;
}


.heading--tertiary {
    font-size: 1.8rem;
    margin-bottom: 1.6rem;
    text-align: justify;
}

.step--description {
    font-size: 1.6rem;
    text-align: justify;
    line-height: 1.6;

}

.step--number {
    display: block;
    font-size: 9.6rem;
    font-weight: 600;
    color: #ddd;
    margin-bottom: 1.8rem;
}

.step--img--box {
    display: flex;
    justify-content: center;
    position: relative;
}

.step--img {
    width: 50%;
    align-items: center;
    z-index: 3;
}

.step--img--box::before,
.step--img--box::after {
    position: absolute;
    display: block;
    content: " ";
    border-radius: 50%;

    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

.step--img--box::before {
    padding-bottom: 80%;
    width: 80%;
    background-color: #fff;
    z-index: 1;
}

.step--img--box::after {
    width: 60%;
    padding-bottom: 60%;
    background-color: #090;
    z-index: 2;
}

/* 
################################################################## MEALS SECTION  ########## ############################################### */

.sub--heading {
    font-size: 1.6rem !important;
    text-transform: uppercase;
    color: #e67e22;

}

.heading--meals {
    font-size: 3.2rem;
    font-weight: 500 !important;
    text-align: center;
    padding: 4.8rem 9.6rem 4.8rem 9.6rem;
}

.grid--3-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.2rem;
    justify-content: center;
    padding: 4.8rem 4.8rem 0 4.8rem;

}


.meal--img-box {
    border-radius: 1.2rem;
    box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
    /* background: #ddd; */

    transition: all 0.5s;
}

.meal--img-box:hover {
    cursor: pointer;
    transform: translateY(-1.6rem);
}


.meal--img {
    width: 100%;
    height: 50%;
    border-top-left-radius: 1.2rem;
    border-top-right-radius: 1.2rem;
}

.meal--img-2 {
    overflow: hidden;
}

.tag {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 500;
    background: #ed9e59;
    margin-top: 1.2rem;

    padding: 1rem;
    border-radius: 2.4rem;
    cursor: pointer;
    transition: background 0.5s;
}

.tag--2 {
    width: 9.6rem;
    text-align: center;
    margin-left: 1.2rem;
    background: #fcc419;
}

.tag:hover {
    background: #b2f2bb;
    /* color: #fff; */
}

.meal--tittle {
    font-size: 1.8rem;
    font-weight: 500;
    margin: 1.2rem auto 2.4rem auto;

}

.ingridents {
    display: flex;
    flex-direction: column;
    list-style: none;
    font-size: 1.6rem;
    gap: 1.2rem;

}

.meals--title {
    font-size: 3.2rem;
}

.meal--box {
    display: block;
    padding: 0 0 9.6rem 3.2rem;
}

.meal--item-box {
    font-size: 1.8rem;

}

.item--heading {
    display: flex;
    justify-content: center;
}

.item--box {

    padding: 9.6rem 0 0 6.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
}

.icon {
    color: #e67e22;
    font-size: 2.4rem;
    margin-right: 1.8rem;
}

/* link to direct all meals */
.all--meals {
    text-align: center;
    padding-bottom: 9.6rem;
    font-size: 1.6rem;

}

.meals--link:link,
.meals--link:visited {
    color: #e67e22;
    text-decoration: none;
    /* background-color: #ffffe6; */
    border-radius: 0.4rem;


    border-bottom: 0.1rem solid currentColor !important;
    padding-bottom: 0.2rem;
    transition: all 0.5s;
}

.meals--link:active,
.meals--link:hover {
    background-color: #ffec99;
    color: currentColor;
    border-bottom: 0.1rem solid transparent !important;
}

/* 
################################################################## TESTIMONIAL SECTION  ########## ############################################### */
.testimonials {
    display: grid;
    grid-template-columns: 0.6fr 0.4fr;
    row-gap: 3.2rem;
    column-gap: 4.8rem;
    background: #eee;
    align-items: center;
    padding: 0 2.4rem 2.4rem 2.4rem;
}

.testimonials--box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4.8rem;
}

.testimonial {
    margin-top: 3.2rem;
}

.testimonial--img {
    width: 6.4rem;
    border-radius: 50%;
    margin-bottom: 1.2rem;
}

.testimonial--text {
    font-size: 1.6rem;
    line-height: 1.6;
    margin-bottom: 2.4rem;
}

.testimonial--name {
    font-size: 1.2rem;
    color: #999;
}

/* Galleery */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    padding: 1.6rem;
    align-items: center;
}

.gallery--img img {
    width: 100%;
}

.gallery--img img:hover {

    /* transform: rotate3d(0, 0, -2, 45deg); */
    /* transform: rotate(45deg); */
    transform: scale(1.5);
    cursor: pointer;
    transition: all 0.7s;
}

/* scale transition */
.gallery figure {
    overflow: hidden;
}


/* 
################################################################## PRICING SECTION ########## ############################################### */
.section--pricing {
    /* background-color:  #fff3bf; */
    padding: 4.6rem;
}

.plan--box {
    position: relative;
    max-width: 80%;
    padding: 4.8rem;
    margin-left: auto;
    margin-right: auto;
    color: #666;
    box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
    border-radius: 1.2rem;
    background-color: #ffe;
    overflow: hidden;
}

.starter--box {
    margin-right: 0;
    background-color: #f8f9fa;
}

.complet--box::after {
    content: "Best Value";
    position: absolute;
    text-transform: uppercase;
    top: 0;
    right: 0;

    padding: 0.5rem 2.4rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    background-color: #495057;

    transform: rotate(45deg) translate(30%, -10%);
}

.plan--box:hover {
    transform: translateY(-1.2rem);
    transition: all 0.5s;
}

.heading--price {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2.4rem;
}

.plans {
    text-align: center;
    padding-bottom: 2.4rem;
}


.pricing--name {
    font-size: 3.2rem;
    font-weight: 600 !important;
    padding-bottom: 1.8rem;
}

.price {
    font-size: 4.8rem;
    font-weight: 700;
}

.per-meal {
    font-size: 1.6rem;
    padding: 1.2rem;
}

.price span {
    font-size: 2.4rem;
    font-weight: 500;
}

.plan--details {
    list-style: none;
}

.plan--detail {
    line-height: 1.7;
    font-size: 1.8rem;
    margin-left: 3.2rem;
}

.plan--action {
    margin: 6.4rem 0;
    text-align: center;
}

/* #####################
###### plan details  ## /
 #####################
*/
.price--include {
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 4.8rem;
    color: #999;
}

.feature--icon-fill {
    font-size: 2.4rem;
    color: #2b8a3e;
}

.grid--4-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3.2rem;
    justify-content: center;
}

.feature--icon {
    text-align: center;
    font-size: 2.4rem;
    height: 2.4rem;
    width: 2.4rem;
    color: #e67e22;
    background-color: #fff4e6;
    padding: 1.6rem;
    border-radius: 50%;
    margin-bottom: 3.2rem;
}

.feature--title {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 1.6rem;

}

.feature--text {
    font-size: 1.6rem;
    line-height: 1.6;
    margin-bottom: 1.6rem;
}


/* 
################################################################## CTA SECTION ########## ############################################### */

.section--cta {
    padding: 6.4rem 4.8rem;
    border-radius: 1.2rem;
}

.cta--box {
    background-image: linear-gradient(-45deg, #adb5bd, #f03e3e, #fcc419);
    display: grid;
    grid-template-columns: 2fr 1fr;

}

.cta--img {
    padding: 9.6rem;
    background-image: linear-gradient(45deg, #2b8a3e66, #f03d3d66), url(../img/eating.jpg);


    background-position: center;
}

.heading--form {
    padding: 3.2rem;
}

.form--box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 3.2rem;
    column-gap: 6.4rem;
    padding: 4.8rem;
    margin-bottom: 4.8rem;

}

.deiscription {
    font-size: 1.8rem;
    line-height: 1.8;
    margin: 3.2rem auto;
}

.form--box label {
    display: block;
    font-size: 1.8rem;
    font-weight: 500;
}

.form input,
.form select {
    font-size: 1.8rem;
    padding: 1.2rem;
    opacity: 0.8;
    font-family: inherit;
    color: inherit;
    margin-top: 1.2rem;
    width: 100%;
    border: none;
    border-radius: 0.9rem;
    outline-style: none;

}

.sign--in {
    display: flex;
    font-size: 1.8rem;
    font-weight: 600;
    background-image: linear-gradient(45deg, #ffd43b, #7950f2);
    border: none;
    box-shadow: 0 0 2.4rem #fcc31980;
    margin-left: 50%;
    transition: all 0.5s;
    color: inherit;
}

.sign--in:hover {
    cursor: pointer;
    background-image: linear-gradient(45deg, #aa97e3, #fcc419);
    transform: translateY(0.2rem);
}

/* 
##################################################
################ FOOTER SECTION ########## ############################################### */


.footer {
    border: 0.2rem solid #ddd;
}

.footer--5-cols {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1.5fr 1fr 1fr;
    padding: 3.2rem 9.6rem;
    gap: 4.8rem;


}

.footer--heading {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 3.2rem;
}

.footer--logo {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.logo {
    display: block;
    height: 3.2rem;
    width: 14rem;
    margin-bottom: 1.6rem;
}

.social--links {
    list-style: none;
    display: flex;
    gap: 2.4rem;
}

.social-icon {
    font-size: 2.4rem;
    color: inherit;
}

.Copyright {
    font-size: 1.6rem;
    color: #999;
    margin: 3.2rem 2.4rem;
}


.contact address {
    font-size: 1.6rem;
    margin-bottom: 1.8rem;
}


.contact a,
.contact p {
    text-decoration: none;
    font-style: normal;
    display: flex;
    color: inherit;
    font-size: 1.6rem;

}


.contact ion-icon {
    font-size: 1.8rem;
    color: inherit;
    margin-right: 1.6rem;
}

.footer--nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    font-size: 1.6rem;
}

.footer--nav a {
    color: #555;
    text-decoration: none;
    transition: all 0.5s;
}

.footer--nav a:hover,
.contact a:hover {
    color: #e67e22;
    text-decoration: underline;
}