*{
    margin:0px;
    padding: 0px;
    scroll-behavior: smooth;
}
.container{
    display: grid;
    /* grid-gap: 1rem; */
    grid-template-areas: 
    'navbar-1 '
    'navbar-2 '
    'home '
    'category'
    'sale'
    'About-Us'
    'footer'
    ;
}
/* .item{
    /* background-color: yellow; */
    /* border: 3px solid black; */

/* Navbar-1 */
#navbar-1{
    background-color: black;
    grid-area: navbar-1;
    display: grid;
    grid-template-areas: 
    'left right'
    ;
}
#navbar-1 a{
    text-decoration: none;
    margin: 10px 10px;
    padding: 10px 10px;
    font-size: 1.5rem;
    font-family: 'Work Sans', sans-serif;
    color: white;
}
#navbar-1 a:hover{
    color: grey;
}
.left{
    grid-area: left;
    /* border: 2px solid white; */
    margin: 10px 0px;
}
.left ul {
    display: flex;
    justify-content: center;
}
.left ul li{
    list-style: none;
}

.right{
    grid-area: right;
    /* border: 2px solid white; */
    margin: 10px 0px;
}
.right ul{
    display: flex;
    justify-content: center;
}
.right ul li{
    list-style: none;
}


/* Navbar-2 */

#navbar-2{
    background-color: white;
    border-bottom: 2px solid rgb(145, 143, 143);
    grid-area: navbar-2;
    display: grid;
    margin: 36px 0px;
    padding: 15px 0px;
    position: sticky;
    top: -1px;
    left: 0px;
    height: 70px;
    grid-template-areas: 'left-2 right-2';
}
/* #navbar-2 a{
    color: black;
    text-decoration: none;
    margin: 10px 10px;
    padding: 10px 10px;
    font-size: 2.5rem;
}
#navbar-2 a:hover{
    color: grey;
    
} */
#navbar-2 ul{
    display: flex;
    justify-content: center;
}
#navbar-2 ul li{
    list-style: none;
}
.left-2{
    /* border: 2px solid red; */
    grid-area: left-2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.left-2 ul li a{
    color: black;
    text-decoration: none;
    margin: 10px 10px;
    padding: 10px 10px;
    font-family: 'Work Sans', sans-serif;
    font-size: 1.8rem;
}
.left-2 ul li a:hover{
    color: rgb(71, 71, 71);
}
.right-2{
    grid-area: right-2;
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.right-2 input{
    background-color: rgb(240 240 240);
    width: 32%;
    height: 75%;
    text-align: left;
    padding: 0px 4px;
    font-family: 'Work Sans', sans-serif;
    border-radius: 5px;
    font-size: 21px;
}
.right-2 ul li a{
    color: black;
    text-decoration: none;
    margin: 10px 10px;
    padding: 10px 10px;
    font-family: 'Work Sans', sans-serif;
    font-size: 1.8rem;
}
.right-2 ul li a:hover{
    color: rgb(95, 93, 93);
}


/* section-1 =home*/
#home{
    padding: 70px 0px;
    grid-area: home;
    display: grid;
    justify-content: center;
    background-color: white;
    grid-gap: 1rem;

    grid-template-areas: 
    'head-1'
    'pad-1'
    'img-1'
    ;
}
#head-1{
    grid-area: head-1;
    font-size: 4.0rem;
    font-family: 'Alkatra', cursive;
}
#pad-1{
    grid-area: pad-1;
}
#img-1{
    display: grid;
    grid-area: img-1;
    justify-content: center;
    width: 80vw;
    height: 700px
}
#home h1{
    font-size: 4.0rem;
    font-family: 'Alkatra', cursive;
     /* border: 2px solid red; */
} 

#home img{
    justify-content: center;
    width: 80vw;
    height: 700px;
}


/* category */
#category{
    background-color: white;
    grid-area: category;
    display: grid;
    margin: 89px 194px;
    grid-template-areas: 
    'heading heading heading heading'
    'item-1 item-2 item-3 item-4'
    'item-5 item-6 item-7 item-8'
    ;
}
#heading{
    font-family: 'Alkatra', cursive;
    grid-area: heading;
    margin: 13px 10px;
    font-size: 2.5rem;
    padding: 24px 24px;
}
#category .box{
    margin: 20px;
    /* border: 2px solid black; */
    display: grid;
    grid-gap: 2rem;
    justify-content: center;
    align-content: center;
    text-align: center;
    font-size: 2.0rem;
    font-family: 'Work Sans', sans-serif;
}
#category img{
    width: 100%;
    border-radius: 8px;
    height: 300px;
    cursor: pointer;
}
#category h4{
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
}





/* Sale  */
#sale{
    grid-area: sale;
    display: grid;
    padding: 10px 10px;
    margin: 10px 10px;
    justify-content: center;
    grid-template-areas: 
    'h1-sale'
    'item1'
    ;
}

#h1-sale{
    grid-area: h1-sale;
    margin: 13px 10px;
    font-size: 2.5rem;
    font-family: 'Alkatra', cursive;
    padding: 24px 24px;
}
#sale img{
    width: 80vw;
    height: 700px;
    cursor: pointer;
    border: 2px solid black;
}


#About-Us{
    grid-area: About-Us;
    display: grid;
    grid-template-areas:
    'heading-2 heading-2  heading-2 heading-2' 
    'comment comment comment comment'
    'pic1 pic2 pic3 pic4'  
    ;
}
#heading-2{
    grid-area: heading-2;
    margin: 10px 20px;
    font-size: 2.5rem;
    padding: 50px 180px;
    font-family: 'Alkatra', cursive;
}
#comment{
    grid-area: comment;
    text-align: center;
    font-family: 'Work Sans', sans-serif;
}

.pic{
    /* border: 2px solid black; */
    display: grid;
    justify-content: center;
    align-items: center;
    /* margin: 10px; */
    /* border-radius: 10px;*/
}
.pic img{
    width: 100%;
    height: 100px;
    border-radius: 14px;
    padding: 27px 10px;

}



footer{
    grid-area: footer;
    text-align: center;
    background-color: black;
    color: white;
    font-family: 'Alkatra', cursive;
    padding: 10px 0px;
}




/* utility classes */
.vl{
    border-left: 2px solid white;

}
.vl-2{
    border-left: 2px solid rgb(20, 19, 19);
}
p{
    font-size: 1.3rem;
}