body{
    height: auto;
    width: auto;
    display: grid;
    background-color: white;
}

.heading
{
    text-align: center;
    font-size: 4rem;
}
.heading span{
    background: aqua;
    color: rgb(141, 43, 226);
    display: inline-block;
    padding: .3rem 2rem;
    clip-path: polygon(100% 0, 93% 50%, 100% 99%, 0% 100%,7% 50%, 0% 0%);
}

.grid-container{
    height:auto;
    width: auto;
    padding-left: 3rem;
    padding-right: 3rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}
.grid-item{
    aspect-ratio: 1;
    background: #feffff;
    border-radius: 10px;
    transition: transform 0.3s ease;
    transform-origin: center;
    box-shadow: 3px 5px 5px rgba(78, 12, 232, 0.5);
}
.item-1{
    background-image: url(/html/productsImages/item1.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-2{
    background-image: url(/html/productsImages/item2.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-3{
    background-image: url(/html/productsImages/item3.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-4{
    background-image: url(/html/productsImages/item4.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-5{
    background-image: url(/html/productsImages/item5.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-6{
    background-image: url(/html/productsImages/item6.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-7{
    background-image: url(/html/productsImages/item7.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-8{
    background-image: url(/html/productsImages/item8.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-9{
    background-image: url(/html/productsImages/item9.png);
    background-size: cover;
    background-position: 0.8rem;
}
.item-10{
    background-image: url(/html/productsImages/item10.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-11{
    background-image: url(/html/productsImages/item11.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-12{
    background-image: url(/html/productsImages/item12.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-13{
    background-image: url(/html/productsImages/item13.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-14{
    background-image: url(/html/productsImages/item14.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-15{
    background-image: url(/html/productsImages/item15.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-16{
    background-image: url(/html/productsImages/item16.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-17{
    background-image: url(/html/productsImages/item17.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-18{
    background-image: url(/html/productsImages/item18.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-19{
    background-image: url(/html/productsImages/item19.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-20{
    background-image: url(/html/productsImages/item20.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-21{
    background-image: url(/html/productsImages/item21.jpg);
    background-size: cover;
    background-position: 0rem;
}
.item-22{
    background-image: url(/html/productsImages/item22.jpg);
    background-size: cover;
    background-position: 0rem;
}
.item-23{
    background-image: url(/html/productsImages/item23.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-24{
    background-image: url(/html/productsImages/item24.jpg);
    background-size: cover;
    background-position: 0.8rem;
}
.item-25{
    background-image: url(/html/productsImages/item25.jpg);
    background-size: cover;
    background-position: -1rem;
}
.item-26{
    background-image: url(/html/productsImages/item26.jpg);
    background-size: cover;
    background-position: -1rem;
}
.item-27{
    background-image: url(/html/productsImages/item27.jpg);
    background-size: cover;
    background-position: -1rem;
}
.item-28{
    background-image: url(/html/productsImages/item28.jpg);
    background-size: cover;
    background-position: 0rem;
}
.item-29{
    background-image: url(/html/productsImages/item29.jpg);
    background-size: cover;
    background-position: -1rem;
}
.item-30{
    background-image: url(/html/productsImages/item30.jpg);
    background-size: cover;
    background-position: -1rem;
}
.item-31{
    background-image: url(/html/productsImages/item31.jpg);
    background-size: cover;
    background-position: -1rem;
}
.item-32{
    background-image: url(/html/productsImages/item32.jpg);
    background-size: cover;
    background-position: 1rem;
}
.item-33{
    background-image: url(/html/productsImages/item33.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0.8rem;
}
.item-34{
    background-image: url(/html/productsImages/item34.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 1.5rem;
}
.item-35{
    background-image: url(/html/productsImages/item35.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0rem;
}
.grid-item:hover{
    transform: scale(1.1) rotate(5deg);
    z-index: 1;
}
.grid-container:hover .grid-item:not(:hover){
    transform: scale(0.95);
}




/*codes for ABOUT US page*/
.bgimg{
    background-image: url(/Image/bannerImg.jpg);
    background-size: contain;
    background-attachment: fixed;
}
.box-containers .boxs h1{
    color: rgb(243, 60, 5);
}
.box-containers .boxs h2{
    padding-left: 43rem;
    color: rgb(141, 43, 226);
    align-items: center;
}
.box-containers .boxs p{
    color: rgb(18, 6, 6);
    padding: 0rem 27rem;
}
.box-container
{
    border: 0px solid;
    display: grid;
    height: fit-content;
    padding-left: 2rem;
    padding-right: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(25rem,1fr));
    gap: 8rem;
    grid-area: auto;

}
.box-container .box
{
    border: 0px solid red;
    width: 100%;
    padding: rem 2rem;
    background: white;
    outline: rgba(78, 12, 232, 0.5);
    outline-offset: -.8rem;
    outline-color:darkgrey;
    text-align: center;
    box-shadow: grey;
}
.box-container .box:hover{
    box-shadow: 1px 1px 10px 4px green;
}
.box-container .box img
{
    width: 20rem;
    height: 18rem;
}
.box-container .box h3
{
    font-size: 2rem;
    line-height: normal;
    color: darkblue;
}
.box-container .box h3:hover{
    color: black;
}
.box-container .box p
{
    font-size: 1rem;
    line-height: 1.5rem;
    color: black;
    padding: 1rem 0;
}
.box-container .box p:hover
{
    color: darkblue;
}