/* utility classes */
@import url('https://fonts.googleapis.com/css2?family=Inika:wght@400;700&family=Inter:wght@100..900&family=Poppins:wght@400;600&display=swap');

:root {
    --ff-primary: "Inika", serif;
    --ff-secondary: "Inter", sans-serif;
    --ff-least: "Poppins", sans-serif;

    --ff-major-headings: var(--ff-primary);
    --ff-body: var(--ff-secondary);
    --ff-minorHeadings-btns: var(--ff-least);
    

    --fw-bold: 600;
    --fw-semi-bold: 500;
    --fw-normal: 400;
   

    --fs-600: 4.313rem;
    --fs-500: 4rem;
    --fs-300: 3.75rem;
    --fs-250: 2.5rem;
    --fs-200: 1.5rem;
    --fs-100: 1.125rem;
    --fs-50: 1rem;
   
    --fs-heroHeading: var(--fs-250);
    --fs-aboutHeading: var(--fs-250);
    --fs-menu-heading: var(--fs-100);
    --fs-body: var(--fs-50);
    --fs-button: var(--fs-50);
    --fs-heading: var(--fs-200);
}

@media (min-width: 54rem) {
    :root {
    --fs-heading: var(--fs-250);
    --fs-heroHeading: var(--fs-600);
    --fs-aboutHeading: var(--fs-300);
    --fs-menu-heading: var(--fs-500);
    --fs-body: var(--fs-100);
    --fs-button: var(--fs-50);
    }
}

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

html,
body {
    height: 100%;
    overflow-x: hidden;
} 

a{
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

svg, picture, img {
    display: block;
}

.container-all {
    --max-width: 1200px;
    --container-padding: 1.5rem;
    
    width: min(var(--max-width), 100% - var(--container-padding)*2);
    margin-inline: auto;
}

.flow>*+* {
    margin-top: var(--flow-spacer, 1.5em);
}

.btn {
    border: solid 2px #3D2619;
    background-color: transparent;
    color: #3D2619;
    border-radius: 100vw;
    padding: 10px 16px;
    /* width: 100px; */
    font-size: var(--fs-50);
    font-weight: var(--fw-bold);
    font-family: var(--ff-minorHeadings-btns);
}

.btnGap{
    margin-right: 10px;
}

.btn[data-type= "inverted"]{
    background-color: #6A4028;
    color: #ffff;  
    border-style: none;   
}

.abt-bg, .blog-bg{
    background-color: #FFF8E1;
}

/* independent styling */

/* header{
position: fixed;
top: 0;
width: 100%;
} */

.nav-wrapper{
display: flex;
justify-content: space-between;
align-items: center;
}

.nav-list{
    display: flex;
    /* gap: clamp(.3rem, 3vw, 2rem); */
    background-color: #6A4028;
    border-radius: 9px;   
}

.nav-list li{
    font-family: var(--ff-secondary);
    font-size: var(--fs-50);
    font-weight: var(--fw-semi-bold);
    padding: 10px 20px;   
}

.nav-list a{
    color: #fff;
}

.nav-list>li:hover, .nav-list>li:focus{
   background-color: #fff;
   border-radius: 8px;
}

.nav-list>li:hover a, .nav-list>li:focus a{
    color: #6A4028;
}

.display-bg{
    display: none;
}  

.hamburger-icon{
    background-color: transparent;
    border-style: none;
}

@media (min-width: 43rem){
    .hamburger-icon{
     display: none;
    }

    .display-bg{
        display: block;
    }  
}

.hero{
    display: grid;
    grid-template: 
    'cake'
    'writeup';
    align-items: center;
    padding-block: 10px 20px;
}

@media (min-width: 43rem){
    .hero{
        grid-template: 'writeup cake';
        grid-template-columns: 1fr .6fr;
    }   
    
}

.hero-Writeup{
padding-top: 20px;
grid-area: writeup;
}

.hero-img{
grid-area: cake;   
}

h1{
    font-family: var(--ff-primary);
    text-transform: capitalize;
    font-weight: var(--fw-normal);
    font-size: var(--fs-heroHeading);
    color: #523728;
}

p{
    font-size: var(--fs-body);
    color: #1B0B0BBF; 
}

.width-full{
    width: 100%;
}
/* About section */

.abt-story{
    display: grid;
    grid-template: 
    'abt-w'
    'abt-i';
    gap: 3rem;
    padding-block: 30px;
}

.abt-writeup h1{
 font-size: var(--fs-aboutHeading);   
}

.abt-writeup{
    grid-area: abt-w;
    text-align: center;
}

.abt-img{
    grid-area: abt-i;   
}

@media (min-width: 43rem){
    .abt-story{
        padding-top: 80px;
        grid-template: 'abt-i abt-w';
        grid-template-columns: .78fr 1fr;
    }  
    
    .abt-img{
        padding-top: 70px;
    }

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

@media (min-width: 70.438rem){
    .abt-img{
        padding-top: 0px;
    }
}

/* Menu */

.menu-bg, .footer-bg{
    background-color: #6A4028E5;
    padding-block: 20px;
}

.menu-bg h2{
    color: #FFF8E1;
    text-align: center;
    font-size: 3rem;
}

.menu-showcase{
    margin: auto;
    background-color: #FFF8E1;
    border-radius: 10px;
    padding: 18px 10px;
    width: 300px;
}

.menuimg{
width: 6rem;
margin-inline: auto;
margin-bottom: 10px;

}

.price{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price div{
display: flex;
align-items: center;
/* justify-content: center; */
}

.dollarimg{
    width: .68rem;
}
.starimg{
    width: 4rem;
}
.menu-link{
    display: block;
    margin-left: auto;
}

.flex{
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-top: 30px;
}

@media (min-width: 43rem){
    .flex{
        flex-direction: row;
    }

    .menu-showcase{
        height: 230px;
    }
}

/* blog */
.blog-showcase{
    background-color: #FFF8E1;
    box-shadow: -3px 3px 10px 5px #4D422C61;
    padding: 20px;
    border-radius: 17px;
    font-family: var(--ff-minorHeadings-btns);
    margin: auto;
    width: 300px;
}

/* @media (min-width: 43rem){
    .blog-showcase{
         height: 22rem; 
    }
}  */

.blog-bg{
    padding-block: 50px;
}
.blogTitle{
    color: #734B33;
    text-align: center;
    margin-bottom: 3px;
}
/* footer */

.contact-us{
    display: grid;
    font-size: var(--fs-body);
    /* align-content: center; */
} 

.footer-list, .socials{
    display: flex;
    gap: 1rem;
}

.footer-text{
  width: 200px;
  margin: auto;
}

.footer-text p{
    color: #FFF8E1;
}

.footer-text h2{
    font-size: 2.125rem;
    font-family: var(--ff-primary);
    color: #FFF8E1;
}

.footer-con{
    width: 15rem;
}

.socials>li{
    display: flex;
    width: 30px;
    height: 30px;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    border-radius: 100vw;
}

.socials li:hover{
    background-color: #FCAE36;   
}

.socials>li:hover .socials>img{
    fill: #FFF;
}

.contact-form>*{
padding: 10px;
}

.contact-form{
display: flex;
flex-direction: column;
padding-top: 20px;
width: 200px;
margin: auto;
}

.contact-form>*:not([class]){
    border-radius: 100vw;
    border: none;
}

.copyright{
    display: none;
}

.footer-btn{
    background-color: #FCAE36;
    border: none;
    text-align: center;
}

textarea{
    border-radius: 15px;
}

@media (min-width: 36.25rem){
    .contact-us{
        grid-template-columns: 1fr .6fr; 
        gap: 2rem;
    }

    .contact-form{
        width: auto;
        padding-top: 35px;
        margin: 0;
    }

    .footer-text{
        width: auto;
        margin: 0;
      }

    .copyright{
        display: block;
    }
}