#navbar-landing,
#offcanvas-header-landing {
    background-image: linear-gradient(90deg, #7d3436 0%, #cf5053 100%);
}

#offcanvas-header-landing {
    color: white;
}

#offcanvas-body-landing .nav-link {
    color: black;
}

#offcanvas-body-landing .nav-item a.active {
    color: #7d3436;
}

#main-landing {
    margin-top: 10rem;
}

#article {
    height: 300px;
}

/* .water-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
} */

#nutrition-info-landing {
    z-index: 99;
}

#swiper-button-next-landing::after,
#swiper-button-prev-landing::after {
    display: none;
}

.swiper-landing {
    width: 600px;
    height: 400px;
}

.swiper-category {
    width: auto;
    height: 400px;
}

.swiper-record {
    width: auto;
    height: auto !important;
}

footer {
    background-color: #fafafa;
}

.carousel-indicators button {
    background-color: #f52d32 !important;
}

.nutri-question h3 {
    font-size: 2.2rem;
}

.nutri-question h1 {
    font-size: 2.7rem;
    background: -webkit-linear-gradient(
        180deg,
        #ff1d1d -39.85%,
        #aa1e1e 149.31%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card-explore i {
    font-size: 5rem;
    color: #c42428;
}

.card-explore h5 {
    font-size: 2rem;
}

/* Media Screen */
@media screen and (min-width: 993px) {
    #brand-landing {
        color: black !important;
        font-size: 0.9rem !important;
    }

    #navbar-landing {
        background: #fafafa !important;
    }

    #navbar-landing .navbar-brand {
        color: #f52d32 !important;
    }

    #navbar-landing #Logo-landing {
        content: url("../logo/logo-without-text.png");
        width: 80px;
        height: 69.57px;
    }

    #navbar-landing .nav-item a {
        color: #931b1e;
    }

    #nutrition-card-landing {
        width: 20% !important;
    }

    #swiper-button-next-landing::after,
    #swiper-button-prev-landing::after {
        display: block;
        color: #931b1e;
    }

    #recipe-detail-image {
        width: 80%;
        height: 300px;
    }

    .swiper-record {
        width: auto;
        height: auto !important;
    }
}

@media screen and (min-width: 1200px) {
    #card-resep-landing {
        width: 14rem !important;
    }

    #card-resep-landing img {
        height: 150px !important;
    }

    .hero-image {
        width: 530px !important;
        height: 430px !important;
    }

    .nutri-question h3 {
        font-size: 2.7rem !important;
    }

    .nutri-question h1 {
        font-size: 3.2rem !important;
    }

    .card-explore {
        height: 13.5rem !important;
        cursor: pointer;
        overflow: hidden;
        transition: 0.4s ease-in-out;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        padding-top: 0.5rem !important;
    }

    .card-explore:hover {
        height: 20rem !important;
        background-color: #fbabad;
    }

    #article {
        height: 400px;
    }
}

@media screen and (min-width: 768px) {
    .nutrition-ingredient-type {
        font-size: 16px !important;
    }

    .hero-image {
        width: 380px;
        height: 390px;
    }

    .card-explore h5 {
        font-size: 1.5rem !important;
    }

    .card-wrapper {
        border: 5px solid #cfcfcf;
        border-radius: 50px;
    }
}