/* Header */
.page-header {
    padding-top: 0;
    padding-bottom: 3rem;
}

.main-promo img {
    width: 100%;
    max-height: 462px;
}

.flash-sale-wrapper {
    height: 195px;
    width: 180px;
}

.flash-sale-img {
    width: 100%;
    height: 180px;
    object-fit: cover;

}

.flash-product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 48px;
    width: 140px;
}

.flash-sale-button a {
    color: var(--black);
}

.flash-sale .card:hover .flash-sale-button {
    visibility: visible;
    opacity: 1;
    transition: all 500ms linear;
}

.next-flash-sale {
    position: absolute;
    right: 0;
    top: 47%;
    width: 50px;
    cursor: pointer;
}

.slick-dots li.slick-active button::before {
    opacity: 1;
    color: var(--accent);
}

.slick-dots li button::before {
    font-size: 15px;
}

.slick-dots {
    bottom: 12px;
}

.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.main-promo .slick-list,
.new-product .slick-list {
    border: 2px solid var(--secondary);
    border-radius: 5px;
}

.card-category .card-body {
    border: 1px solid var(--grey);
}

.card-category .card-body a {
    text-decoration: none;
}

.card-category .card-body a > p {
    margin-bottom: 0.625rem;
    text-decoration: none;
    transition: all 150ms linear;
}

.card-category p.active {
    color: var(--accent);
}

.best-category-img {
    width: 150px;
    height: 150px;
    background: rgba(103, 112, 92, 0.05);
    border: 2px solid var(--primary);
    border-radius: 5px;
    padding: 5px;
}

.best-category-img img {
    border-radius: 5px;
    max-height: 100%;
    max-width: 100%;
}

.best-category-card span {
    color: var(--grey);
}

/* Best Product */

#bestProduct .card-img-wrapper {
    height: 210px;
    width: 100%;
}

#bestProduct .card-img-wrapper img {
    max-height: 100%;
    max-width: 100%;
}

.best-product-wrapper {
    max-width: 270px;
    max-height: 290px;
    transition: all 200ms linear;
}

.best-product-wrapper .product-image {
    border-radius: 3px;
    height: 285px;
}

.best-product-one p,
.best-product-one h4 {
    color: var(--white);
}

.product-one-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
}

.non-one-icon {
    position: absolute;
    top: 10px;
    left: 30px;
}

.product-non-wrapper {
    max-width: 110px;
    max-height: 110px;
    border: 1px solid var(--grey);
    border-radius: 5px;
}

.product-non-wrapper img.p-1 {
    width: 110px;
    height: 110px;
}

.anchor-product-non + .media-body p,
.anchor-product-non + .media-body h4 {
    transition: all 150ms linear;
}

.new-product .card-header,
.flash-sale .card-header {
    border-bottom: 1px solid black;
}

.new-product .card-footer,
.flash-sale .card-footer {
    border-top: 1px solid black;
}

.next-new-product {
    position: absolute;
    right: 0;
    top: 50%;
    width: 60px;
    cursor: pointer;
}

.hr-grey {
    border-top: 1px solid var(--grey);
}

.border-right-primary {
    border-right: 2px solid var(--primary);
}

.border-bottom-primary {
    border-bottom: 2px solid var(--primary);
}

.border-right-secondary {
    border-right: 2px solid var(--secondary);
}

.border-bottom-secondary {
    border-bottom: 2px solid var(--secondary);
}

/* Rasul Product */
.desktop-rasul-img {
    height: 340px;
}

#rasulProduct .col-lg-5 .col-lg-4,
#herbalSicknessBase .col-lg-5 .col-lg-4 {
    cursor: pointer;
}

#rasulProduct .col-lg-5 .col-lg-4 .rosul-third {
    color: var(--black);
    transition: all 200ms linear;
}

#herbalSicknessBase .col-lg-5 .col-lg-4 .sickness-text {
    color: var(--white);
    transition: all 200ms linear;
}
.rasul-bg-zaitun {
    background: url(../../assets/img/homepage/bg-zaitun.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

.rasul-bg-kurma {
    background: url(../../assets/img/homepage/bg-kurma.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

.rasul-bg-cuka {
    background: url(../../assets/img/homepage/bg-cuka.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

.rasul-bg-barley {
    background: url(../../assets/img/homepage/bg-barley.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

.rasul-bg-zam {
    background: url(../../assets/img/homepage/bg-zam.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

.rasul-bg-parfum {
    background: url(../../assets/img/homepage/bg-parfume.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

.rasul-bg-mata {
    background: url(../../assets/img/homepage/bg-mata.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.rasul-bg-pankreas {
    background: url(../../assets/img/homepage/bg-pankreas.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.rasul-bg-liver {
    background: url(../../assets/img/homepage/bg-liver.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.rasul-bg-rahim {
    background: url(../../assets/img/homepage/bg-rahim.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.rasul-bg-tulang {
    background: url(../../assets/img/homepage/bg-tulang.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.rasul-bg-usus {
    background: url(../../assets/img/homepage/bg-usus.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.see-more {
    transition: all 150ms linear;
}

#workWithUs .card-img {
    height: 100%;
}

.flash-sale-header{
    font-size: 1.9rem;
}

.flash-btn-more{
    background: var(--accent);
    color: var(--white);
    width: 16vh;
    font-family: "Source";
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
}

.flash-sale-more{
    height: 369px;
}

.flash-see-more{
    font-size: 1rem;
}

@media (hover: hover) and (pointer: fine) {
    .best-product-wrapper:hover {
        transform: scale(1.05);
        transition: all 200ms linear;
    }

    .product-non-one .anchor-product-non:hover + .media-body p,
    .product-non-one .anchor-product-non:hover + .media-body h4,
    .card-category .card-body a:hover > p,
    .see-more:hover {
        color: var(--accent);
        transition: all 150ms linear;
    }

    #rasulProduct .col-lg-5 .col-lg-4:hover .rosul-third,
    #herbalSicknessBase .col-lg-5 .col-lg-4:hover .sickness-text {
        color: var(--accent);
        transition: all 200ms linear;
    }
}

@media only screen and (min-width: 768px) and (max-width: 998px) {
    .page-header {
        padding-top: 3rem;
    }

    .product-one-icon {
        left: 40px;
    }

    .next-new-product {
        right: 20px;
        width: 40px;
    }

    #workWithUs .card-img {
        height: 350px;
    }

    .card-product .button-preview {
        top: -38px;
    }
    .mobile-category-icon {
        width: 35px;
        height: 35px;
        margin-bottom: 0.5rem;
    }

    .flash-sale-button {
        visibility: visible;
        opacity: 1;
    }

    .flash-btn-more{
        width: 70px;
    }
}

@media only screen and (max-width: 767px) {
    .flash-btn-more{
        font-size: 0.875rem;
    }
    .flash-sale-more{
        height: 301px;
    }

    .flash-sale-header{
        font-size: 1.25rem;
    }

    .flash-sale-time{
        font-size: 1rem;
    }

    .flash-see-more{
        font-size: 12px;
    }

    .flash-product-name {
        height: 41px;
        width: 125px;
    }

    .page-header {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .flash-sale-wrapper {
        height: 148px;
        width: 148px;
    }

    .flash-sale-button {
        bottom: 116px;
        left: 29%;
    }

    .best-category-img {
        width: 100%;
        height: 123px;
        background: rgba(103, 112, 92, 0.05);
        border: 2px solid var(--primary);
        border-radius: 5px;
        padding: 5px;
    }

    .main-promo img {
        height: 215px;
    }

    .best-in-category .card-body {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .best-category-img img {
        height: 100px;
        width: 100px;
    }

    .mobile-rasul-product {
        height: 150px;
    }

    .next-new-product {
        right: 10px;
        width: 40px;
    }

    #workWithUs .card-img {
        height: 375px;
    }

    .mobile-category p {
        font-size: 0.6875rem;
        color: var(--black);
    }

    .mobile-category-icon {
        width: 25px;
        height: 25px;
        margin-bottom: 0.5rem;
    }

    .next-flash-sale {
        right: 10px;
        width: 40px;
    }

    .flash-sale-button {
        visibility: visible;
        opacity: 1;
    }
}