@font-face {
    font-family: 'Nunito' ;
    src: url(assets/fonts/Nunito/Nunito-VariableFont_wght.ttf);
    font-weight: 200 1000;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'Nunito-Sans';
    src: url(assets/fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC\,opsz\,wdth\,wght.ttf);
    font-weight: 200 1000;
    font-display: swap;
    font-style: normal;
}

@layer customVariables{
    :root{
        --clr-neutral-900: #163A34;
        --clr-neutral-600: #395852;
        --clr-neutral-300: #D0DCD9;
        --clr-neutral-200: #E0E6E3;
        --clr-neutral-100: #F6F5F1;

        --clr-white: #FFF;
        --clr-orange: #FE9F6B;
        --clr-teal: #49AC9B;
        --clr-indigo: #697DDB;
    
        --ff-heading: 'Nunito', sans-serif;
        --ff-body:    'Nunito-Sans', sans-serif;
    
    
         --btn-clr: var(--clr-neutral-600)       
    
    }


}

body{
    background-color: #F6F5F1;
    font-family: var(--ff-body);
}

.navbar > .container{
    padding: 1.25rem 3.7rem;
    width: 100%;
    max-width: 1440px;
    
}

.logo{
    width: 100%;
}

header{
    border-bottom: 1px solid var(--clr-neutral-300);
}



.btn-primary{
    --bs-btn-bg: var(--btn-clr);
    font-family: var(--ff-heading);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 28px */
    letter-spacing: -0.5px;
    border-color: var(--btn-clr);

    --bs-btn-hover-bg: var(--btn-clr);
    --bs-btn-hover-border-color: var(--btn-clr);
}

.nav-link{
    font-family: var(--ff-heading);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 27px */
    letter-spacing: -0.3px;
    color: var(--clr-neutral-900);
    position: relative;
}

.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.2rem;
  width: 100%;
  height: 3px;
  background-color: var(--clr-orange);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.navbar .nav-link:hover::after,
.navbar .nav-link:focus-visible::after,
.navbar .nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}



.hero-container{
   width: 100%;
   max-width: 1192px;
   gap: 5.5rem;  

}

.hero-img{
    width: 100%;
    border: 12px solid var(--clr-white);
    border-radius: 16px;
}

.grid-img-container{
    display: flex;
width: 3.75rem;
height: 3.75rem;
padding: 0.25rem  0.5rem;
justify-content: center;
align-items: center;
background-color: var(--clr-white);
border-radius: 8px;
}

.hero-heading{
    font-family: var(--ff-heading);
font-size: 72px;
font-style: normal;
font-weight: 800;
line-height: 110%; /* 79.2px */
letter-spacing: -2px;
}

.orange-highlight{
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.orange-highlight::after{
    content: "";
    height: 0.6em;
    background-color: var(--clr-orange);
    position: absolute;
    z-index: -1;
    bottom: 0.1em;
    width: 100%;
    left: 0;
    opacity: 0.4;
    border-radius: 8px;
}

.hero-text{
font-family: var(--ff-body);
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 30px */
letter-spacing: -0.4px;
max-width: 580px;
}

.grid-heading{
    font-family: var(--ff-heading);
font-size: 48px;
font-style: normal;
font-weight: 800;
line-height: 120%; /* 57.6px */
letter-spacing: -2px;
color: var(--clr-neutral-900);
}

.grid-card-heading{
    font-family: var(--ff-heading);
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 41.6px */
letter-spacing: -1px;
color: var(--clr-neutral-900);
}

.grid-text{
    font-family: var(--ff-body);
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 30px */
letter-spacing: -0.4px;
color: var(--clr-neutral-600);
}
.hero-grid{
    max-width: 1192px;
    --bs-gutter-x: 2rem;
}

.hero-grid-container{
    width: 100%;
    max-width: 1192px;
}



.built-container{
    width: 100%;
    max-width: 1192px;
    padding: 6rem 0;
}

.built-img{
    width: 100%;
    border-radius: 1rem;
}

.built-heading{
    font-family: var(--ff-heading);
font-size: 3rem;
font-style: normal;
font-weight: 800;
line-height: normal;
letter-spacing: -0.09rem;
color: var(--clr-neutral-900);
}

.built-text{
    font-family: var(--ff-body);
font-size: 1.25rem;
font-style: normal;
font-weight: 500;
line-height: 150%; 
letter-spacing: -0.025rem;
color: var(--clr-neutral-600);
}

.built-text span{
    font-family: var(--ff-heading);
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 140%;
letter-spacing: -0.5px;
color: var(--clr-neutral-600);
}

.built-text span.orange-highlight::after{
    opacity: 1;
}

.built-text-container{
    width: 100%;
    max-width: 509px;
}

.cook-smarter-container{
    width: 100%;
    max-width: 1192px;
    background-color: #E9EDE8;
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
    background-image: url(assets/images/pattern-fork.svg), url(assets/images/pattern-knife.svg);
    background-repeat: no-repeat;
    background-position: left -50px bottom -25px, right -50px top -25px;
    border-radius: 1rem;
}


.navbar-toggler{
    
display: flex;
width: 2.5rem;
height: 2.5rem;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 0;
}


.cook-smarter-content{
    z-index: 2;
    gap: 2.5rem;

}

.explore-heading{
    color: var(--clr-neutral-900);
    font-family: var(--ff-heading);
font-size: 48px;
font-style: normal;
font-weight: 800;
line-height: 120%; /* 57.6px */
letter-spacing: -2px;
}

.explore-text{
    font-family: var(--ff-body);
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 30px */
letter-spacing: -0.4px;
text-align: center;
width: 100%;
max-width: 45rem;
}

.cook-smarter-heading{
    color: var(--clr-neutral-900);
text-align: center;
font-family: var(--ff-heading);
font-size: 48px;
font-style: normal;
font-weight: 800;
line-height: normal;
letter-spacing: -1.44px;
}

.cook-smarter-text{
    color: var(--clr-neutral-600);
font-family: var(--ff-body);
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 30px */
letter-spacing: -0.4px;
}

.footer-container{
    width: 100%;
    max-width: 1192px;
    --bs-gutter-x: 0;
}


/* About Section */

/* About - Mission  */

.mission-container{
    max-width: 1192px;
    padding-inline: 0px;
}

.exist-container, .philosophy-container{
    max-width: 1192px;
    padding-inline: 0;
}

.exist, .philosophy, .beyond{
    border-top: 1px solid var(--clr-neutral-300);

}



.exist li, .philosophy li, .instructions-list li, .ingredients-list li{
    position: relative;
}

.exist li::before, .philosophy li::before, .instructions-list li::before, .ingredients-list li::before{
    position: absolute;
    left: -3rem;
    content: "";
    height: 2rem;
    width: 2rem;
    background-image: url(assets/images/icon-bullet-point.svg);
}

.instructions-list li, .ingredients-list li{
    list-style-type: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    color: var(--clr-neutral-600);
    font-family: var(--ff-body);
    font-size: 20px;
    font-style: normal; 
    font-weight: 500;
    line-height: 150%; 
    letter-spacing: -0.4px;
    gap: .5rem;
}

.instructions-list li::before, .ingredients-list li::before{
    height: 24px;
    width: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    left: -2rem;
    background-size: contain;
}

.exist-heading, .philosophy-heading{
    color: var(--clr-neutral-900);
    font-family: var(--ff-heading);
font-size: 3rem;
font-style: normal;
font-weight: 800;
line-height: 120%; /* 3.6rem */
letter-spacing: -0.125rem;
}

.exist-list-heading, .philosophy-list-heading{
    font-family: var(--ff-heading);
    color: var(--clr-neutral-900);
font-size: 1.5rem;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 1.95rem */
letter-spacing: -0.0625rem;
}
                    
.exist-list-text, .philosophy-list-text{
    font-family: var(--ff-body);
    color: var(--clr-neutral-600);
font-size: 1.25rem;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 1.875rem */
letter-spacing: -0.025rem;
}

.orange-tag{
    background-color: var(--clr-orange);
    font-family: var(--ff-heading);
font-size: 1.25rem;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 1.75rem */
letter-spacing: -0.03125rem;
border-radius: .5rem;
padding: .5rem .5rem;
align-self: flex-start;
}

.mission-img{
    max-height: 600px;
    border-radius: 1rem;
}

.mission-heading{
color: var(--clr-neutral-900);
font-family: var(--ff-heading);
font-size: 3rem;
font-style: normal;
font-weight: 800;
line-height: 120%; /* 3.6rem */
letter-spacing: -0.125rem;
}

.mission-text{
    font-family: var(--ff-body);
font-size: 1.25rem;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 1.875rem */
letter-spacing: -0.025rem;

}

.beyond-img{
    border-radius: 1rem;
}

.beyond-heading{
font-family: var(--ff-heading);
color: var(--clr-neutral-900);
font-size: 3rem;
font-style: normal;
font-weight: 800;
line-height: 120%; 
letter-spacing: -0.125rem;
}

.beyond-text{
font-family: var(--ff-body);
font-size: 1.25rem;
font-style: normal;
font-weight: 500;
line-height: 150%; 
color: var(--clr-neutral-600);
}

.beyond-list-item{
    font-family: var(--ff-body);
    color: var(--clr-neutral-600);
font-size: 1.25rem;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 1.875rem */
letter-spacing: -0.025rem;
}

/* recipes */

.recipe-card-inner{
    background-color: var(--clr-white)
}
    
.recipe-card-inner{
    border-radius: 0.625rem;
}


.recipe-card-img{
    max-width: 22rem;
    border-radius: 0.625rem;
}

.recipes-container{
    width: 100%;
    max-width: 1192px;
}

.card-heading{
overflow: hidden;
color: var(--colors-neutral-900, #163A34);
text-overflow: ellipsis;

/* text-preset-5 */
font-family: var(--ff-heading);
font-size: 1.25rem;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 1.75rem */
letter-spacing: -0.03125rem;
}

.recipe-description{
color: var(--clr-neutral-600);
font-family: var(--ff-body);
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 1.5rem */
letter-spacing: -0.01875rem;
}

.pill-btn{
    background-color: var(--clr-neutral-900);
    color: var(--clr-white);
    padding: .75rem 2rem;
    border-radius: 99px;
}

/* recipe */

.recipe-img{
    width: 100%;
    max-width: 580px;
    border-radius: 10px;
}

.recipe-information-container{
    max-width: 575px;
}

.recipe-desc{
    color: var(--clr-neutral-600);
    font-family: var(--ff-body);
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 30px */
letter-spacing: -0.4px;
}

.recipe-name{
color: var(--clr-neutral-900);
font-family: var(--ff-heading);
font-size: 48px;
font-style: normal;
font-weight: 800;
line-height: 120%; /* 57.6px */
letter-spacing: -2px;
}

.card h3{
    color: var(--clr-neutral-900);
    font-family: var(--ff-heading);
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 28px */
letter-spacing: -0.5px;
text-wrap: nowrap;
overflow: hidden;
text-align: start;
}

.instructions-heading, .ingredients-heading{
    color: var(--clr-neutral-900);
font-family: var(--ff-heading);
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 31.2px */
letter-spacing: -1px;
}

.serving, .prep, .cook{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .5rem;
}

.serving p, .prep p, .cook p{
    display: flex;
    flex-direction: row;
    gap: .25rem;
}

.card-heading{
    text-wrap: nowrap;
    
}

 .recipe-card-inner {
    overflow-x: hidden;
    width: 100%;
}

.no-recipes-error{
    font-size: 2rem;
}

.hidden{
    display: none;
}

/* Tablet */
@media (max-width: 991.98px){
   main,footer{
    padding-inline: 1.25rem;
   }

   .hero-text{
    width: 100%;
    max-width: max-content;
    align-self: stretch;
   }
   .hero-heading{
    font-size: 4rem;
   }

   .built-text-container{
    width: 100%;
    max-width: max-content;
   }
   .navbar{
    position: relative;
   }
   .menu{
    position: absolute;
    left: .75rem;
    top: 5.375rem;
    width: 100%;
    max-width: calc(100% - 1.5rem);
    background-color: var(--clr-white);
    z-index: 2;
    padding: .5rem;
    border: 1px solid var(--clr-neutral-300);
    border-radius: .5rem;
   }

   .menu .btn-primary{
    width: 100%;
   }

   .nav-link[aria-current="page"]{
    text-decoration: none;
    text-underline-offset: initial;
   }

   .navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0px;
  height: 0px;
  background-color: var(--clr-orange);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.navbar .nav-link:hover::after,
.navbar .nav-link:focus-visible::after,
.navbar .nav-link[aria-current="page"]::after {
  transform: none;
}

/* About Tablet */

}


/* Mobile */

@media (max-width: 676px){
    .hero-heading{
        font-size: 3.25rem;
        letter-spacing: -0.125rem;
        align-self: stretch;

    }

    main, footer{
        padding-inline: 1rem;
    }

    .hero-container{
        padding-inline: 0;
    }

    .container{
        --bs-gutter-x: 0;
    }

    .cook-smarter-container{
        background-image: none;
    }
    .built-heading{
        font-size: 2.5rem;
    }

    .grid-heading{
        font-size: 2.5rem;
    }

    .navbar > .container{
        padding: 1rem;
    }

    /* About Mobile */
}