*{
    margin: 0;
    padding: 0;
    font-size: 1rem;
    color: black;
}
body{
    height: 1000px;
}
section{
    display: flex;
    flex-wrap: wrap;
    
}
header{
    height: 50px;
    width: 100%;
    background-color: aqua;
    display: flex;
    align-items: center;
    font-size: 1.2em;  
    position:sticky;
    top: 0px;
}
.category-img{
    height: 100%;
}
h1{
    margin: 0px 20px;
}
body{
    /* display: flex; */
    margin-top: 10px;
}


@keyframes animain {
  from {opacity: 0; position: relative;
    top: 20px;}
  to {opacity: 1; position: relative;
    top: 0px;}  
}

.about.in-view{
    animation: animain 1s ease;
  }
.about{
    
    margin: 10px 10px 0px 10px;
    height: 100px;
    background-color:beige ;
    border-radius: 10px;

}

.container{
    /* height: fit-content; */
    margin: 10px;
    background-color: bisque;
    border-radius: 10px;
    padding-bottom: 5px;
    gap: 3vw;
}
.in-view.container{
    animation: animain 1s ease;
}
.item-heading{
    width: 100vw;
    padding-top: 10px;
    font-family: serif;
    font-size: 1.1rem;  

}
.item-sub-heading{
    width: 100vw; 
    font-size: 1.2em;   
    margin-left: 5px;
}
.items{
    display: flex;
    /* justify-content: space-around; */

}
.item{
    width: 40vw;
    background-color: azure;
    margin: 1vw 0vw 1vw 3vw;
    display: flex;
    gap: 0px;
    border-radius: 10px;
    overflow: hidden;
    flex-direction: row;

}
.item-display{
    
    height: 50vw;
    width: 40vw;
    display: flex;
    flex-direction:column;
    align-items: center;
}
.item-img{
    height: 40vw;
    width: 40vw;
}