/*======> Root colours <======*/
:root {
    --primary-color: #50c878;
    --secondary-color: #f0ffff;
    --third-color: #1b1b1b;
    --fourth-color: #f82b50;
    --fifth-color: #38ed77;
    --sixth-color: #e4e4e4;
    --seventh-color: #797777;
    --offerprice-color: #22a751;
    --realprice-color: #3c3c3c;
    --discount-color: #d73131;
    --badgeBg-color: #6eeaa468;
    --btn-color: linear-gradient(120deg, #fdfbfb 0%, #c9cdcc 100%);
    --btnHover-color: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
}

/*======> Filter menu <======*/
.filters{
    border-bottom: 1px solid var(--third-color);
    background-color: var(--third-color);
    color: var(--secondary-color);
}

.dropdown .dropdown-toggle{
    color: var(--secondary-color);
}

.dropdown-menu{
    --bs-dropdown-link-active-bg: var(--primary-color);
}

/*======> Product <======*/
.card{
    border: 0;
}

.product-outline{
    text-decoration: none;
}

.product-card:hover {
    transform: scale(1.02);
    transition: 0.5s;
    .product-image{
        transition: 0.5s;
        transform: scale(1.05);
    }
}

.product-card:not(:hover) {
    transform: scale(1);
    transition: 0.5s;
    .product-image{
        transition: 0.5s;
        transform: scale(1);
    }
}

.product-name{
    color: var(--third-color);
}

.wish-btn{
    color: var(--fourth-color);
    font-size: 20px;
}

.badge{
    background-color: var(--badgeBg-color);
    color: var(--offerprice-color);
}

.badge2{
    background-color: var(--badgeBg-color);
    color: var(--offerprice-color);
}

.offer-price{
    color: var(--offerprice-color);
    font-size: 18px;
}

.real-price{
    color: var(--realprice-color);
    font-size: 12px;
}

.discount-percentage{
    color: var(--discount-color);
    font-weight: normal;
    font-size: 18px;
}

.card-footer{
    background-image: var(--btn-color);
    margin: 3px;
    border:  2px solid white;
}

.card-footer:hover{
    background-image: var(--btnHover-color);
    border:  2px solid white;
}

.card-footer-btn{
    background-image: var(--btn-color);
    border:  2px solid white;
}

.card-footer-btn:hover{
    background-image: var(--btnHover-color);
    border:  2px solid white;
}

/*======> Both default and filter pagination <======*/
.pagination .page-link{
    border-radius: 10px;
    border: 0;
    color: var(--third-color);
}

.active>.page-link{
    background-image: var(--btnHover-color);
}

.page-link{
    background-image: var(--btn-color);
}


.sideBarBox{
    background-color: var(--third-color);
    color: var(--secondary-color);
    border-radius: 10px;
}

.sideBarHead{
    color: var(--secondary-color);
    border-radius: 10px;
}


/*======> Very small devices <======*/
@media (max-width: 576px) {
    .card-footer{
        margin: 0px;
        font-size: small;
    }

    .fa-heart{
        font-size: 15px;
    }

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

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

    .price{
        font-size: 13px;
    }

    .submenu-mainhead{
        font-size: 15px;
    }

    .submenu-head{
        font-size: 14px;
    }

    .submenu li a{
        font-size: 12px;
    }
}

/*======> XS / SM devices <======*/
@media (min-width: 576px) and (max-width: 767px) {
    .card-footer{
        margin: 0px;
        font-size: small;
    }

    .fa-heart{
        font-size: 15px;
    }

    .product-name, .product-brand{
        font-size: 15px;
    }

    .price{
        font-size: 15px;
    }

    .submenu-mainhead{
        font-size: 15px;
    }

    .submenu-head{
        font-size: 14px;
    }

    .submenu li a{
        font-size: 12px;
    }
}

.product-brand{
    font-size: 13px;
}

.discount-percentage{
    font-size: 13px;
}

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

.offer-price{
    font-size: 15px;
}

.card-body{
    padding: 0;
}

.card-header{
    border-bottom: 0;
    background-color: white;
}

.product-brand{
    color: #9d9f9f;
}