/** code by webdevtrick ( https://webdevtrick.com ) **/
.main {
    padding: 50px 0;
}

.main h1 {
    font-size: 42px;
    color: #333;
    font-weight: 700;
}

.main p {
    font-size: 18px;
    color: #687074;
    width: 70%;
    margin: 15px auto;
}

.main p a {
    text-decoration: none;
    color: #ec1c23;
    font-weight: 900;
}

/* .main ul {
    margin-top: 50px;
}
.main ul li {
    padding: 10px 15px;
    border: 2px solid #333;
    margin-right: 10px;
    margin-bottom: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all .5s ease;
    color: #333;
} */

#categories ul li.active,
#categories ul li:hover {

    color: #000;
    background-color:  var(--links);
    color: #fff !important;
    border-radius: 10px;
}

.main ul li:last-of-type {
    margin-right: 0;
}

.main ul li:nth-of-type(3),
.main ul li:nth-of-type(4),
.main ul li:nth-of-type(5) {
    flex-grow: 2
}

.main .row {
    overflow: hidden;
    padding: 0;
}

.main .row .col-md-4 {
    padding: 0;
    float: left;
    transition: all 5s ease-in-out
}
.main .row .col-md-3 {
    padding: 0;
    float: left;
    transition: all 5s ease-in-out
}

.main .row img {
    width: 100%
}

#categories ul {
    margin: auto;
}

#categories ul li {
    display: inline-block;
    color:  var(--links) !important;
    padding: 20px;

}

#categories ul li {
    cursor: pointer;
}

div#showcase {
    margin-top: 50px;
    margin-bottom: 100px;
}

div#single-product {
    padding: 10px;
}

#single-product a {
    background-color:  var(--links);
    color: #fff;
    border-radius: 0px;
}
#single-product a:hover{
    background-color: var(--white);
    color: #333;
    border: 1px solid var(--links);
}

@media (max-width: 767px) {}