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

@media (min-width:412px) and (max-width:767px){
    .desktoppcards{
        display: none;
    }
}

.pherotitle{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Heebo", sans-serif;
    color: white;
    margin-bottom: 1em;
    background-image: url(../media/hero-mobile.png);    
    width: 100%;
    height: 25VH;
}

.mobilepcards{
    display:grid;
    justify-content: center;
    width: 100%;
    grid-template-rows: repeat(2, 80%);
    grid-template-columns: repeat(2, 47%);
    gap: 2%;
    margin-bottom:12em;
}

.pcard{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border-radius: 1.5em;
    background-color: #5A6C57;
}

.product-img{
    display: flex;
    justify-content: center;
    border-radius: 1.5em;
    background-color: white;
    width: 80%;
    height: 45%;
}

.product-img img{
    width: 35%;
}


.pcategory{
    border-radius: 1.5em;
    background-color: white;
    padding: 2% 6%;
    font-size: 70%;
    font-family:"Heebo", sans-serif;
}

.pbuybutton{
    border-radius: 1.5em;
    background-color: #85A98F;
    padding: 4% 11%;
    font-size: 70%;
}

.pbuybutton a{
    text-decoration: none;
    font-family:"Heebo", sans-serif;
    color: black;
}

.pbuybutton:active{
    background-color: #5e735a;
    transform: scale(0.95);
}

.pagenation{
    text-align: center;
}

.pagenation a{
    text-decoration: none;
    color: black;
    display: inline-block;
    padding: 0.5EM;
}

.pagenation a.active{
    background-color: #5A6C57;
    padding: 1%;
    color: white;
    border-radius: 1Em;
}

.pagenation a:active:not(.active){
    background-color: #828181;
    padding: 0.5%;
    color: white;
    border-radius: 1Em;
    transform: scale(1.2);
}

.pallproducts{
    display: flex;
    flex-direction: column;
    gap: 2em;
}

@media screen and (min-width:767px){
    .mobilepcards{
        display: none;
    }

    .desktoppcards{
    margin: 0% 22%;
    width: 40%;
    display:grid;
    grid-template-rows: repeat(3, 80%);
    grid-template-columns: repeat(3, 47%);
    gap: 2%;
    margin-bottom:10em;
}
.pherotitle{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Heebo", sans-serif;
    color: white;
    margin-bottom: 1em;
    background-image: url(../media/hero-desktop.png);    
    width: 100%;
    height: 25VH;
}
.pagenation a:hover:not(.active){
    background-color: #828181;
    padding: 0.5%;
    color: white;
    border-radius: 1Em;
    transform: scale(1.2);
}

}