@media screen and (min-width:1025px) and (max-width:1200px){

    .products{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .product img{
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    .header .title{
        font-size: 22px !important;
    }

    .header-img{
        height: 25vh !important;
        object-fit: cover;
    }

    .merchant-product{
        position: relative;
        display: block !important;
    }
    
    .merchant-product .card-footer{
        padding: 5px 0px !important;
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 1;
        transition: none;
    }
    
    .merchant-product:hover .card-footer{
        opacity: 1;
        bottom: 0%;
        position: relative;
    }

}


@media screen and (min-width:769px) and (max-width:900px){

    .products{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .product img{
        width: 100%;
        height: 200px !important;
        object-fit: cover;
    }

    .header .title{
        font-size: 22px !important;
    }

    .header-img{
        height: 25vh;
        object-fit: contain;
    }

    .merchant-product{
        position: relative;
        display: block !important;
    }
    
    .merchant-product .card-footer{
        padding: 5px 0px !important;
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 1;
        transition: none;
    }
    
    .merchant-product:hover .card-footer{
        opacity: 1;
        bottom: 0%;
        position: relative;
    }

}


@media screen and (min-width:577px) and (max-width:768px){
    .navbar-logo{
        width: 100px;
    }

    .logo-text{
        font-size: 16px !important;
    }

    .pyramid-feautures img{
        width: 75%;
    }

    .header .title{
        font-size: 20px !important;
    }

    .products{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .product img{
        width: 100%;
        height: 170px;
        object-fit: cover;
    }

    .product .name{
        font-size: 14px;
    }

    .product .op{
        font-size: 14px;
    }

    .product .sp{
        font-size: 14px;
    }

    .cart-btn{
        font-size: 14px;
    }

    .qty-btn{
        font-size: 14px;
    }

    .merchant-product{
        position: relative;
        display: block !important;
    }
    
    .merchant-product .card-footer{
        padding: 5px 0px !important;
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 1;
        transition: none;
    }
    
    .merchant-product:hover .card-footer{
        opacity: 1;
        bottom: 0%;
        position: relative;
    }

    .categories .image{
        height: 150px;
    }

    .categories p{
        font-size: 16px !important;
    }

    .categories p i{
        font-size: 14px !important;
    }

}



@media screen and (min-width:0px) and (max-width:576px){

    .button{
        font-size: 12px;
    }

    .navbar-logo{
        width: 70px;
    }

    .logo-text{
        font-size: 14px !important;
    }
    
    .header-img{
        height: 30vh;
        object-fit: contain;
    }

    .header .title{
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    .header p{
        font-size: 14px !important;
    }

    .pyramid-feautures img{
        width: 75%;
    }

    .products{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .product img{
        max-width: 100%;
        height: 130px;
        object-fit: cover;
    }

    .product .name{
        font-size: 12px;
    }

    .product .op{
        font-size: 12px;
    }

    .product .sp{
        font-size: 12px;
    }

    .cart-btn{
        font-size: 12px;
    }

    .qty-btn{
        font-size: 12px;
    }

    .product-details .carousel .main-image{
        width: 100%;
        height: 300px;
        display: block;
        margin: auto;
        object-fit: contain;
    }

    .healing-crystals .img{
        width: 80px;
    }


    .merchant-product{
        position: relative;
        display: block !important;
    }
    
    .merchant-product .card-footer{
        padding: 5px 0px !important;
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 1;
        transition: none;
    }
    
    .merchant-product:hover .card-footer{
        opacity: 1;
        bottom: 0%;
        position: relative;
    }

    .categories .image{
        height: 100px !important;
    }

    .categories p{
        font-size: 14px !important;
    }

    .categories p i{
        font-size: 12px !important;
    }

    .bottom-menu{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        min-height: 50px;
    }

    .go-to-top{
        bottom: 60px;
    }

    .footer{
        margin-bottom: 60px !important;
    }

}