#main_image{
    position: relative;
    width: 100%;
    height: 40vh;
    margin-bottom: 50px;
}
#main_image>img{
    width: inherit;
    height: inherit;
}
.heading{
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    
}
.heading>h1{
    display: block;
    font-size: 2.8rem;
    color: white;
}
.blkscrn{
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(38, 38, 36, 0.616);
    filter: blur(2px);
    width: inherit;
    height: inherit;
    z-index: 1;
}


/* product */
#Product{
    width: 100%;
    margin: 50px 0px;
    height: fit-content;
}
 .container{
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
    width: 100vw;
    height: fit-content;
    gap:50px 30px;
    justify-content: center;
    /* align-items: center; */
 }
 /* .card{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    overflow:hidden;
    box-shadow: 0px 0px 6px 3px black;
    height: 100vh;
    background-color: rgb(255, 0, 0);
    color: white;
 }
 .card img{
     width: 100%;
     height: 70%;
     background-color: white;
     overflow:hidden;
 }
 .card_text{
     width: 100%;
     height: 30%;
     margin: 10px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
    padding: 0px 10px;
    font-size: 0.9rem;
    
}

.card:hover {
   background-color: rgb(223, 0, 0);
    
    color: white;
} */
.card{
    width: 20rem;
    box-shadow: 0px 0px 2px 2px rgb(158, 158, 158);
}
.card img{
    height: 320px;
}
.card-body{
    background-color: rgb(245, 245, 245);
}
.card-body h5{
    color: red;
}

@media screen and (max-width:480px) {
    .container{
        display: grid;
        grid-template-columns: 1fr;
        width: 100vw;
        height: fit-content;
        gap:50px 30px;
        justify-content: center;
        align-items: center;
       /* align-items: center; */
    }
    .card{
        width: 20rem;
        box-shadow: 0px 0px 2px 2px rgb(158, 158, 158);
        margin: auto;
    }
    
}