/* =========================================================
   KINGFOOD PREMIUM RED + YELLOW THEME
========================================================= */

:root {
    --kf-red: #d90429;
    --kf-dark-red: #9d0208;
    --kf-yellow: #ffca28;
    --kf-gold: #ffb703;
    --kf-dark: #171717;
    --kf-light: #fff8e7;
}


/* HERO */

.kf-hero {
    position: relative;
    overflow: hidden;
    min-height: 720px;

    background:
        radial-gradient(
            circle at 85% 40%,
            rgba(255, 202, 40, .25),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #7f0000 0%,
            #b30012 45%,
            #d90429 100%
        );

    color: white;
}


/* CONTAINER */

.min-vh-75 {
    min-height: 720px;
}


/* HERO CONTENT */

.kf-hero-content {
    position: relative;
    z-index: 5;
    padding: 70px 0;
}


/* BADGE */

.kf-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 18px;

    background: rgba(255,255,255,.12);

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 50px;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;

    backdrop-filter: blur(10px);

    margin-bottom: 25px;
}


/* TITLE */

.kf-hero h1 {

    font-size: clamp(48px, 6vw, 78px);

    line-height: 1.02;

    font-weight: 900;

    letter-spacing: -2px;

    margin: 0;
}


.kf-hero h1 span {

    color: var(--kf-yellow);

    text-shadow:
        0 5px 20px rgba(255,193,7,.25);
}


/* DESCRIPTION */

.kf-hero p {

    max-width: 560px;

    font-size: 18px;

    line-height: 1.7;

    color: rgba(255,255,255,.85);

    margin-top: 25px;
}


/* BUTTONS */

.kf-hero-buttons {

    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

    margin-top: 32px;
}


/* ORDER BUTTON */

.kf-btn-primary {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 15px 20px 15px 24px;

    color: #171717;

    background: var(--kf-yellow);

    border-radius: 14px;

    font-size: 16px;

    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 12px 30px rgba(0,0,0,.22);

    transition: all .3s ease;
}


.kf-btn-primary:hover {

    color: #171717;

    background: #ffd84d;

    transform: translateY(-4px);

    box-shadow:
        0 18px 35px rgba(0,0,0,.28);
}


/* ARROW */

.kf-btn-arrow {

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: var(--kf-red);

    color: white;
}


/* LOCATION */

.kf-btn-location {

    border: 1px solid rgba(255,255,255,.35);

    background: rgba(255,255,255,.10);

    color: white;

    padding: 15px 22px;

    border-radius: 14px;

    font-weight: 700;

    backdrop-filter: blur(10px);

    transition: .3s;
}


.kf-btn-location:hover {

    background: white;

    color: var(--kf-red);

    transform: translateY(-3px);
}


/* TRUST */

.kf-trust {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 45px;
}


.kf-trust-item {

    display: flex;

    align-items: center;

    gap: 10px;
}


.kf-trust-icon {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(255,202,40,.18);
}


.kf-trust strong {

    display: block;

    font-size: 15px;
}


.kf-trust small {

    display: block;

    color: rgba(255,255,255,.65);

    font-size: 11px;
}


.kf-divider {

    width: 1px;

    height: 35px;

    background: rgba(255,255,255,.25);
}


/* FOOD AREA */

.kf-food-area {

    position: relative;

    height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* GLOW */

.kf-food-glow {

    position: absolute;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    background: var(--kf-yellow);

    filter: blur(5px);

    opacity: .95;

    box-shadow:
        0 0 100px rgba(255,202,40,.55);
}


/* MAIN IMAGE */

.kf-main-food {

    position: relative;

    z-index: 2;

    width: 570px;

    max-width: 100%;

    animation: kfFloat 5s ease-in-out infinite;
}


.kf-main-food img {

    width: 100%;

    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 30px 30px rgba(0,0,0,.35));
}


@keyframes kfFloat {

    0%,100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-15px) rotate(1deg);
    }
}


/* FLOATING CARDS */

.kf-floating-card {

    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 18px;

    background: rgba(255,255,255,.95);

    color: #222;

    border-radius: 16px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.25);

    backdrop-filter: blur(10px);
}


.kf-floating-card strong {

    display: block;

    font-size: 14px;
}


.kf-floating-card small {

    color: #777;

    font-size: 11px;
}


.kf-floating-icon {

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #fff4c2;

    font-size: 25px;
}


.kf-card-pizza {

    top: 20%;

    left: 0;

    animation: kfFloatCard 4s ease-in-out infinite;
}


.kf-card-burger {

    right: 0;

    bottom: 20%;

    animation: kfFloatCard 4.5s ease-in-out infinite;
}


@keyframes kfFloatCard {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


/* DISCOUNT */

.kf-discount {

    position: absolute;

    right: 8%;

    top: 8%;

    z-index: 6;

    width: 105px;
    height: 105px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    background: var(--kf-yellow);

    color: #8b0000;

    border-radius: 50%;

    border: 6px solid white;

    box-shadow:
        0 15px 35px rgba(0,0,0,.25);

    transform: rotate(12deg);
}


.kf-discount strong {

    font-size: 27px;

    line-height: 1;

    font-weight: 900;
}


.kf-discount span {

    font-size: 12px;

    font-weight: 900;
}


.kf-discount small {

    font-size: 9px;

    font-weight: 700;
}


/* DECORATIVE CIRCLES */

.kf-circle {

    position: absolute;

    border-radius: 50%;

    background: var(--kf-yellow);

    opacity: .10;
}


.kf-circle-1 {

    width: 400px;
    height: 400px;

    left: -200px;
    bottom: -200px;
}


.kf-circle-2 {

    width: 250px;
    height: 250px;

    right: -100px;
    top: -100px;
}


/* DOT PATTERN */

.kf-dots {

    position: absolute;

    right: 40%;

    bottom: 40px;

    width: 100px;
    height: 100px;

    background-image:
        radial-gradient(
            var(--kf-yellow) 2px,
            transparent 2px
        );

    background-size: 15px 15px;

    opacity: .35;
}


/* MOBILE */

@media (max-width: 991px) {

    .kf-hero {
        min-height: auto;
    }

    .min-vh-75 {
        min-height: auto;
    }

    .kf-hero-content {
        padding: 80px 0 30px;
        text-align: center;
    }

    .kf-hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .kf-hero-buttons {
        justify-content: center;
    }

    .kf-trust {
        justify-content: center;
        flex-wrap: wrap;
    }

    .kf-food-area {
        height: 500px;
    }

    .kf-main-food {
        width: 500px;
    }

    .kf-card-pizza {
        left: 5%;
    }

    .kf-card-burger {
        right: 5%;
    }

}


@media (max-width: 575px) {

    .kf-hero h1 {
        font-size: 48px;
    }

    .kf-hero p {
        font-size: 16px;
    }

    .kf-trust {
        gap: 10px;
    }

    .kf-divider {
        display: none;
    }

    .kf-food-area {
        height: 390px;
    }

    .kf-food-glow {
        width: 300px;
        height: 300px;
    }

    .kf-main-food {
        width: 350px;
    }

    .kf-floating-card {
        padding: 8px 12px;
    }

    .kf-floating-icon {
        width: 35px;
        height: 35px;
        font-size: 19px;
    }

    .kf-card-pizza {
        top: 10%;
        left: 0;
    }

    .kf-card-burger {
        bottom: 10%;
        right: 0;
    }

    .kf-discount {
        width: 80px;
        height: 80px;
        border-width: 4px;
    }

    .kf-discount strong {
        font-size: 20px;
    }

}

/* =========================================================
   KINGFOOD NAVBAR
   RED + YELLOW PREMIUM THEME
========================================================= */

.kf-navbar {

    min-height: 76px;

    background:
        linear-gradient(
            135deg,
            #8b0000 0%,
            #c9001b 55%,
            #d90429 100%
        ) !important;

    border-bottom: 4px solid #ffca28;

    box-shadow:
        0 5px 25px rgba(0,0,0,.18);

    z-index: 1000;
}


/* =========================================================
   LOGO
========================================================= */

.kf-logo {

    font-size: 29px !important;

    font-weight: 900 !important;

    letter-spacing: -1px;

    color: white !important;

    text-decoration: none;

    transition: .3s;
}


.kf-logo:hover {

    transform: scale(1.03);

    color: white !important;
}


/* K */

.kf-logo-k {

    color: #ffca28;

    font-size: 38px;

    font-weight: 1000;

    text-shadow:
        2px 3px 0 #8b0000;
}


/* FOOD */

.kf-logo-food {

    color: #ffca28;

}


/* =========================================================
   NAV LINKS
========================================================= */

.kf-nav-link {

    position: relative;

    display: flex !important;

    align-items: center;

    gap: 7px;

    color: rgba(255,255,255,.95) !important;

    font-weight: 700;

    font-size: 15px;

    padding: 27px 15px !important;

    transition:
        color .25s ease,
        background .25s ease;
}


/* Hover */

.kf-nav-link:hover {

    color: #ffca28 !important;

    background: rgba(255,255,255,.08);

}


/* Bottom yellow line */

.kf-nav-link::after {

    content: "";

    position: absolute;

    left: 15px;

    right: 15px;

    bottom: 13px;

    height: 3px;

    background: #ffca28;

    border-radius: 20px;

    transform: scaleX(0);

    transition: .3s;

}


.kf-nav-link:hover::after {

    transform: scaleX(1);

}


/* Icons */

.kf-nav-link i {

    font-size: 16px;

}


.kf-yellow-icon {

    color: #ffca28 !important;

}


/* =========================================================
   CART
========================================================= */

.kf-cart-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 11px 17px;

    background: #ffca28;

    color: #8b0000 !important;

    border-radius: 12px;

    font-weight: 900;

    text-decoration: none;

    box-shadow:
        0 6px 18px rgba(0,0,0,.22);

    transition: all .3s ease;

}


.kf-cart-btn:hover {

    background: #ffd84d;

    color: #8b0000 !important;

    transform: translateY(-2px);

    box-shadow:
        0 9px 24px rgba(0,0,0,.28);

}


.kf-cart-btn i {

    font-size: 19px;

}


/* Cart count */

.kf-cart-count {

    min-width: 23px;

    height: 23px;

    padding: 0 6px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #8b0000;

    color: white;

    border-radius: 50px;

    font-size: 11px;

    font-weight: 900;

}


/* =========================================================
   MOBILE TOGGLER
========================================================= */

.kf-toggler {

    border: 2px solid #ffca28 !important;

    border-radius: 10px;

    padding: 8px 10px;

}


.kf-toggler:focus {

    box-shadow:
        0 0 0 3px rgba(255,202,40,.25);

}


/* Make hamburger visible on red */

.kf-toggler .navbar-toggler-icon {

    filter: brightness(0) invert(1);

}


/* =========================================================
   MOBILE MENU
========================================================= */

@media (max-width: 991px) {

    .kf-navbar {

        min-height: 70px;

    }


    .kf-nav-link {

        padding: 13px 15px !important;

        border-radius: 10px;

    }


    .kf-nav-link::after {

        display: none;

    }


    .kf-nav-link:hover {

        background: rgba(255,202,40,.15);

    }


    .kf-cart-btn {

        margin: 8px 15px 15px;

        justify-content: center;

    }

}
/* =========================================
   KINGFOOD PRODUCT IMAGE
========================================= */

.food-image-wrapper {
    width: 100%;
    height: 230px;
    overflow: hidden;
    background: #f8f9fa;
}

.food-img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}


/* IMAGE HOVER */

.food-card:hover .food-img {
    transform: scale(1.05);
}


/* IMAGE PLACEHOLDER */

.food-placeholder {
    width: 100%;
    height: 230px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 85px;
}


/* PRODUCT CARD */

.food-card {
    overflow: hidden;
    border-radius: 15px;
    transition: transform .2s ease,
                box-shadow .2s ease;
}


/* CARD HOVER */

.food-card:hover {
    transform: translateY(-5px);
}


/* PRODUCT PRICE */

.price {
    color: #dc3545;
    font-weight: 800;
    font-size: 1.25rem;
}

/* =========================================================
   KINGFOOD HOME PRODUCT CARDS
========================================================= */

.popular-section {
    background: #f8f9fa;
}


/* SECTION TITLE */

.popular-label {
    color: #dc3545;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.popular-title {
    font-size: 36px;
    font-weight: 800;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.home-product-card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #eeeeee;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.06);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.home-product-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 18px 40px rgba(0,0,0,0.12);
}


/* =========================================================
   IMAGE BOX
========================================================= */

.home-product-image {

    width: 100%;
    height: 260px;

    position: relative;

    overflow: hidden;

    background: #f1f3f5;
}


/* ACTUAL IMAGE */

.home-product-image img {

    width: 100%;
    height: 260px;

    object-fit: cover;

    display: block;

    transition:
        transform .5s ease;
}


/* IMAGE HOVER */

.home-product-card:hover
.home-product-image img {

    transform: scale(1.08);
}


/* =========================================================
   CATEGORY BADGE
========================================================= */

.home-product-badge {

    position: absolute;

    top: 15px;
    left: 15px;

    background: #fff;

    color: #dc3545;

    padding: 7px 14px;

    border-radius: 50px;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 5px 15px rgba(0,0,0,.12);
}


/* =========================================================
   IMAGE PLACEHOLDER
========================================================= */

.home-product-placeholder {

    width: 100%;
    height: 260px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 95px;

    background:
        linear-gradient(
            135deg,
            #f8f9fa,
            #eeeeee
        );
}


/* =========================================================
   PRODUCT BODY
========================================================= */

.home-product-body {

    padding: 22px;
}


.home-product-name {

    font-size: 21px;

    font-weight: 800;

    margin-bottom: 8px;

    color: #222;
}


.home-product-description {

    color: #777;

    font-size: 14px;

    line-height: 1.6;

    min-height: 45px;

    margin-bottom: 18px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* =========================================================
   PRODUCT FOOTER
========================================================= */

.home-product-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 15px;

    border-top: 1px solid #eeeeee;
}


/* PRICE */

.home-product-price {

    color: #dc3545;

    font-size: 20px;

    font-weight: 800;

    margin-top: 2px;
}


/* =========================================================
   ADD BUTTON
========================================================= */

.home-add-btn {

    border: none;

    background: #dc3545;

    color: #fff;

    padding: 10px 18px;

    border-radius: 50px;

    font-weight: 700;

    transition: all .25s ease;
}

.home-add-btn:hover {

    background: #bb2d3b;

    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 7px 15px rgba(220,53,69,.25);
}


/* =========================================================
   NO PRODUCTS
========================================================= */

.home-no-products {

    text-align: center;

    padding: 70px 20px;

    background: #fff;

    border-radius: 20px;
}

.home-no-products i {

    font-size: 55px;

    color: #aaa;
}

.home-no-products h4 {

    margin-top: 15px;

    font-weight: 700;
}

.home-no-products p {

    color: #777;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .home-product-image,
    .home-product-image img,
    .home-product-placeholder {

        height: 240px;
    }

}


@media (max-width: 576px) {

    .popular-title {
        font-size: 28px;
    }

    .popular-section .d-flex {

        align-items: flex-start !important;

        flex-direction: column;

        gap: 15px;
    }

    .home-product-image,
    .home-product-image img,
    .home-product-placeholder {

        height: 230px;
    }

    .home-product-body {

        padding: 18px;
    }

}

/* ==========================================
   KINGFOOD PRODUCT IMAGE - FIXED INSIDE BOX
========================================== */

.home-product-card {
    width: 100%;
    overflow: hidden !important;
    border-radius: 22px;
    background: #fff;
    position: relative;
}


/* IMAGE CONTAINER */

.home-product-image {
    width: 100% !important;
    height: 260px !important;

    position: relative;
    overflow: hidden !important;

    background: #f1f1f1;

    border-radius: 22px 22px 0 0;
}


/* ACTUAL IMAGE */

.home-product-image img {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    display: block !important;

    object-fit: cover !important;

    object-position: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    border-radius: 0 !important;

    transition: transform 0.4s ease;
}


/* HOVER */

.home-product-card:hover .home-product-image img {
    transform: scale(1.05);
}


/* CATEGORY BADGE */

.home-product-badge {
    position: absolute !important;
    top: 15px;
    left: 15px;

    z-index: 5;

    background: #fff;

    color: #dc3545;

    padding: 7px 14px;

    border-radius: 50px;

    font-size: 12px;
    font-weight: 700;

    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}


/* PLACEHOLDER */

.home-product-placeholder {
    width: 100% !important;
    height: 260px !important;

    display: flex !important;

    align-items: center;
    justify-content: center;

    overflow: hidden !important;

    background: #f1f1f1;

    font-size: 90px;
}


/* PRODUCT BODY */

.home-product-body {
    width: 100%;
    box-sizing: border-box;
    padding: 22px;
}


/* IMPORTANT:
   Override old .food-img rules
*/

.food-img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}


/* MOBILE */

@media (max-width: 576px) {

    .home-product-image {
        height: 230px !important;
    }

    .home-product-placeholder {
        height: 230px !important;
    }

}

/* =========================================================
   KINGFOOD MODERN PRODUCT CARD
========================================================= */

.kf-product-card {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 20px;
    overflow: hidden !important;
    position: relative;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.kf-product-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.12);

}


/* =========================================================
   IMAGE BOX
========================================================= */

.kf-product-image {

    position: relative;

    width: 100%;

    height: 245px;

    overflow: hidden !important;

    background: #f5f5f5;

    line-height: 0;
}


/* =========================================================
   ACTUAL PRODUCT IMAGE
========================================================= */

.kf-product-image img {

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    object-fit: cover !important;

    object-position: center center;

    transition:
        transform 0.5s ease;
}


/* IMAGE HOVER */

.kf-product-card:hover
.kf-product-image img {

    transform: scale(1.07);

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.kf-image-overlay {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 90px;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.35),
        transparent
    );

    pointer-events: none;
}


/* =========================================================
   CATEGORY BADGE
========================================================= */

.kf-product-category {

    position: absolute;

    top: 15px;
    left: 15px;

    z-index: 10;

    background: #ffffff;

    color: #dc3545;

    padding: 7px 14px;

    border-radius: 50px;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.2;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.kf-product-placeholder {

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 85px;

    background: linear-gradient(
        135deg,
        #f8f9fa,
        #eeeeee
    );
}


/* =========================================================
   PRODUCT BODY
========================================================= */

.kf-product-body {

    min-height: 175px;

    padding: 20px;
}


/* =========================================================
   PRODUCT NAME
========================================================= */

.kf-product-name {

    font-size: 17px;

    font-weight: 700;

    line-height: 1.4;

    color: #222222;

    margin: 0 0 6px 0;

    min-height: 48px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.kf-product-description {

    font-size: 13px;

    line-height: 1.55;

    color: #999999;

    margin: 0;

    min-height: 40px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;
}


/* =========================================================
   PRODUCT FOOTER
========================================================= */

.kf-product-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding-top: 15px;

    border-top: 1px solid #eeeeee;
}


/* =========================================================
   PRICE LABEL
========================================================= */

.kf-price-box small {

    display: block;

    color: #999999;

    font-size: 11px;

    margin-bottom: 3px;
}


/* =========================================================
   PRICE
========================================================= */

.kf-product-price {

    display: inline-block;

    font-size: 20px;

    font-weight: 800;

    line-height: 1.2;

    color: #dc3545;

    background: #fff1f2;

    padding: 5px 9px;

    border-radius: 9px;

    white-space: nowrap;
}


/* =========================================================
   ADD BUTTON
========================================================= */

.kf-add-btn {

    border: 0;

    background: #dc3545;

    color: #ffffff;

    border-radius: 10px;

    padding: 10px 16px;

    font-size: 14px;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.kf-add-btn:hover {

    background: #bb2d3b;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 6px 15px rgba(220, 53, 69, 0.25);
}


.kf-add-btn:active {

    transform: translateY(0);

}


/* =========================================================
   NO PRODUCTS
========================================================= */

.kf-no-products {

    text-align: center;

    background: #ffffff;

    border-radius: 20px;

    padding: 60px 20px;

    border: 1px solid #eeeeee;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.05);
}


.kf-no-products-icon {

    font-size: 50px;

    color: #dc3545;

    margin-bottom: 15px;
}


.kf-no-products h4 {

    font-weight: 700;

}


.kf-no-products p {

    color: #888888;

    margin-bottom: 20px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {


    .kf-product-image {

        height: 220px;

    }


    .kf-product-body {

        min-height: 160px;

        padding: 16px;

    }


    .kf-product-name {

        font-size: 15px;

        min-height: 42px;

    }


    .kf-product-description {

        font-size: 12px;

        min-height: 37px;

    }


    .kf-product-price {

        font-size: 18px;

        padding: 4px 7px;

    }


    .kf-add-btn {

        padding: 9px 13px;

        font-size: 13px;

    }


    .kf-product-category {

        top: 12px;

        left: 12px;

        font-size: 11px;

        padding: 6px 11px;

    }

}


/* =========================================================
   POPULAR SECTION MOBILE
========================================================= */

@media (max-width: 576px) {


    .popular-section
    .d-flex.justify-content-between {

        align-items: flex-start !important;

        flex-direction: column;

        gap: 15px;

    }


    .popular-section .btn {

        align-self: flex-start;

    }

}

/* PRODUCT IMAGE - SMALL */
.kf-product-image {
    width: 100%;
    height: 150px;
    position: relative;
    overflow: hidden !important;
    background: #f5f5f5;
    line-height: 0;
}

/* ACTUAL IMAGE */
.kf-product-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;

    transition: transform .4s ease;
}

/* SMALL HOVER ZOOM */
.kf-product-card:hover .kf-product-image img {
    transform: scale(1.04);
}

/* PLACEHOLDER */
.kf-product-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 55px;

    background: #f5f5f5;
}

/* MOBILE */
@media (max-width: 576px) {
    .kf-product-image {
        height: 130px;
    }

    .kf-product-placeholder {
        height: 130px;
        font-size: 50px;
    }
}
.kf-product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 10px !important;
    display: block !important;
}
/* =========================================================
   KINGFOOD HERO SLIDER
========================================================= */

.kf-hero-slider {
    width: 100%;
    overflow: hidden;
}


/* SLIDE */

.kf-hero-slide {
    min-height: 520px;
    position: relative;
    overflow: hidden;
}


/* RED */

.kf-slide-red {
    background:
        radial-gradient(
            circle at 80% 50%,
            #ff5a5f 0%,
            #dc3545 35%,
            #a30012 100%
        );

    color: #ffffff;
}


/* DARK */

.kf-slide-dark {
    background:
        radial-gradient(
            circle at 80% 50%,
            #555555 0%,
            #222222 45%,
            #080808 100%
        );

    color: #ffffff;
}


/* ORANGE */

.kf-slide-orange {
    background:
        radial-gradient(
            circle at 80% 50%,
            #ffb347 0%,
            #f07800 45%,
            #a83c00 100%
        );

    color: #ffffff;
}


/* =========================================================
   CONTENT
========================================================= */

.kf-hero-content {
    position: relative;
    z-index: 3;
    padding: 70px 0;
}


.kf-hero-badge {
    display: inline-block;

    background: rgba(255,255,255,.18);

    border: 1px solid rgba(255,255,255,.35);

    padding: 9px 16px;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 20px;

    backdrop-filter: blur(5px);
}


.kf-hero-content h1 {
    font-size: 58px;

    line-height: 1.08;

    font-weight: 800;

    margin-bottom: 20px;
}


.kf-hero-content h1 span {
    color: #ffffff;
}


.kf-hero-content p {
    font-size: 18px;

    line-height: 1.7;

    max-width: 520px;

    margin-bottom: 28px;

    color: rgba(255,255,255,.85);
}


/* BUTTONS */

.kf-hero-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.kf-hero-buttons .btn {
    border-radius: 50px;

    padding: 12px 25px;

    font-weight: 600;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.kf-hero-image {
    height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    z-index: 2;
}


.kf-hero-image::before {
    content: "";

    position: absolute;

    width: 390px;

    height: 390px;

    background: rgba(255,255,255,.12);

    border-radius: 50%;

    filter: blur(2px);
}


.kf-hero-image img {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 500px;

    max-height: 440px;

    object-fit: contain;

    display: block;

    filter:
        drop-shadow(
            0 25px 30px rgba(0,0,0,.35)
        );

    animation: kfFoodFloat 4s ease-in-out infinite;
}


/* FLOAT */

@keyframes kfFoodFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0);
    }

}


/* =========================================================
   INDICATORS
========================================================= */

.kf-hero-slider .carousel-indicators {
    z-index: 10;

    margin-bottom: 25px;
}


.kf-hero-slider .carousel-indicators button {
    width: 35px;

    height: 5px;

    border: 0;

    border-radius: 10px;

    margin: 0 4px;
}


/* =========================================================
   ARROWS
========================================================= */

.kf-hero-slider .carousel-control-prev,
.kf-hero-slider .carousel-control-next {
    width: 7%;

    z-index: 10;
}


.kf-hero-slider .carousel-control-prev-icon,
.kf-hero-slider .carousel-control-next-icon {
    width: 40px;

    height: 40px;

    background-color: rgba(0,0,0,.25);

    border-radius: 50%;

    background-size: 45%;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .kf-hero-slide {
        min-height: auto;
    }

    .kf-hero-content {
        text-align: center;

        padding: 55px 20px 15px;
    }

    .kf-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .kf-hero-buttons {
        justify-content: center;
    }

    .kf-hero-image {
        height: 300px;

        margin-bottom: 35px;
    }

    .kf-hero-image img {
        max-height: 280px;
    }

    .kf-hero-image::before {
        width: 250px;
        height: 250px;
    }

}


@media (max-width: 576px) {

    .kf-hero-content {
        padding-top: 40px;
    }

    .kf-hero-content h1 {
        font-size: 38px;
    }

    .kf-hero-content p {
        font-size: 15px;
    }

    .kf-hero-image {
        height: 240px;
    }

    .kf-hero-image img {
        max-height: 220px;
    }

    .kf-hero-image::before {
        width: 200px;
        height: 200px;
    }

    .kf-hero-buttons .btn {
        font-size: 14px;

        padding: 10px 18px;
    }

}