@font-face {
    font-family: "aenoik";
    src: url("./fonts/AEONIK-BOLD.OTF");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "aenoik";
    src: url("./fonts/AEONIK-MEDIUM.OTF");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "aenoik";
    src: url("./fonts/AEONIK-REGULAR.OTF");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "aenoik";
    src: url("./fonts/AEONIK-LIGHT.OTF");
    font-weight: 300;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "aenoik", sans-serif !important;
}

a {
    text-decoration: none !important;
}

.wrapper {
    min-height: 100vh;
}

.banner-bg-box {
    width: 100%;
    min-height: 100vh;
    background-image: url("./assets/banner-bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* background-position: calc(70% + 100px) center; */
}

/* Navbar */
.nav-container {
    width: 100%;
    height: 10vh !important;
    background-color: transparent !important;
}

.logo-image {
    width: 90%;
}

.list-container {
    height: 100%;
    list-style: none;
}

.list-link {
    font-size: 16px;
    padding: 0 20px;
    text-decoration: none;
    color: #FFFFFF !important;
    opacity: 90%;
}

.btn-whtsap {
    width: 170px;
    height: 46px;
    border-radius: 28px !important;
    background-color: #25D366 !important;
    color: #002A10 !important;
    font-weight: 500;
    border: none;
    outline: none;
}

.btn-order {
    width: 150px;
    height: 46px;
    border-radius: 28px !important;
    background-color: #002B2A !important;
    color: #F1ECD7 !important;
    border: 1px solid #F1ECD7;
    font-weight: 500;
}

.ham-btn {
    background-color: transparent;
    outline: none;
    border: none;
}

/* res nav */
.close-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    transition: right 0.3s ease-in-out;
    z-index: 9999;
}

.nav-menu a,
.nav-menu button {
    margin: 10px 0;
    text-decoration: none;
    color: #333;
    font-size: 18px;
}

.nav-menu.active {
    right: 0;
}

.ham-btn {
    background: none;
    border: none;
    cursor: pointer;
}

.ham-btn img {
    width: 50px;
    height: 50px;
}

.whtsap-icon {
    width: 30px;
}

/* Navbar ends */
/* banner content */
.banner-content-box {
    width: 550px;
    padding: 30px 0;
}

.banner-prop {
    width: 250px;
}

.banner-heading {
    font-size: 80px;
    line-height: 88px;
    font-weight: 300;
    color: #FFFFFF;
}

.bold {
    font-weight: 600;
}

.banner-btn {
    width: 170px;
    height: 50px;
    border: none;
    outline: none;
    border-radius: 30px;
    color: #040404;
    font-size: 16px;
    font-weight: 500;
    background-color: #FFFFFF;
}

/* banner content ends*/
/* yellow banner */
.yellow-banner-bg {
    width: 100%;
    min-height: 12vh;
    padding: 20px 0 10px 0;
    background-image: url("./assets/yellow-banner.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.yellow-heading {
    font-size: 30px;
    font-weight: 600;
    color: #040404;
}

.yellow-text {
    font-size: 14px;
    color: #040404;
    opacity: 80%;
}

.yellow-link,
.yellow-link:hover {
    font-size: 16px;
    color: #040404;
}
.yellow-link span{
    border-bottom: 1px solid #040404;

}
/* yellow banner ends */
/* food and beverages */
.beverages-box {
    width: 100%;
    background-color: #FFFFFF;
}

.beverages-heading {
    font-size: 48px;
    color: #040404;
}
/* food and beverages ends */

/* slide */

.slide-box {
    gap: 10px;
    justify-content: center;
    /* padding-inline: 200px; */
    /* background-color: red; */
}

.slide-1 {
    width: 100% !important;
}

.menu-slide {
    width: 100%;
    height: 500px;
    position: relative;
    z-index: 0;
    
    padding: 20px;
    text-align: center;
    background-color: #f8f9fa;
    /* border: 1px solid #ddd; */
    border-radius: 10px;
    margin: 0 10px;
}

.menu-slide-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    border-radius: 10px;
}

.menu-slide-inner-content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;

}

.menu-slide-title {
    font-size: 38px;
    font-weight: 400;
    color: #FFFFFF;
    text-align: start;
}

.menu-slide-text {
    font-size: 16px;
    opacity: 70%;
    color: #FFFFFF;
    text-align: start;
    display: none;
}

.selected-text {
    display: block !important;
}

/* hover */
.hover-slide {
    transition: width 0.3s ease;
}

.menu-slide {
    transition: transform 0.3s ease;
}

/* Make the hover-slide column flexible */
.row {
    display: flex;
}

/* Initial default state */
.hover-slide {
    transition: width 0.3s ease;
}

/* When hovering, make the hovered slide bigger */
.hover-slide:hover {
    width: 50% !important;
    /* 6-column for hovered slide */
}

.hover-slide.col-lg-3 {
    width: 25% !important;
    /* 3-column for non-hovered slides */
}

.hover-slide.col-lg-6 .menu-slide-text {
    display: block;
}

.hover-slide.col-lg-6 {
    width: 50% !important;
    /*Default size for the first column*/
}

/* ------- */
.carousel-control-next,
.carousel-control-prev {
    opacity: 1 !important;
}

.carousel-control-prev-icon {
    background-image: url('./assets/left-icon-bg.png') !important;
    margin-right: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 50%;
    width: 40px !important;
    height: 40px !important;
}

.carousel-control-next-icon {
    background-image: url('./assets/right-icon-bg\ \(1\).png') !important;
    margin-left: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 50%;
    width: 40px !important;
    height: 40px !important;
}

/* slide ends */


/* know */
.know-left {
    width: 50%;
}

.know-heading {
    font-size: 40px;
    font-weight: 300;
    color: #040404;
}

.reda {
    width: 130px;
}

.know-text {
    font-size: 16px;
    color: #040404;
    opacity: 80%;
}

/* right */
.know-right {
    width: 40%;
}

.know-card {
    padding: 10px 20px;
    width: 400px;
    box-shadow: 0 3px 40px #0000000D;
}

.know-card-img {
    width: 48px;
}

.know-card-head {
    font-size: 18px;
    font-weight: 500;
    color: #040404;
}

.know-card-text {
    font-size: 16px;
    color: #040404;
    opacity: 60%;
}

.margin {
    margin-left: 100px;
}

/* know ends */
/* fresh */
.fresh-wrapper {
    width: 100%;
    min-height: 100vh;
    background-image: url("/assets/fresh-food-bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


.fresh-heading {
    font-size: 48px;
    color: #FFFFFF;
}

.fresh-text {
    font-size: 18px;
    color: #FFFFFF;
    opacity: 60%;
}

.fresh-bottom {
    padding-inline: 100px !important;
}

.custom-box {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.custom-head {
    font-size: 30px;
    color: #FFFFFF;
    text-align: center;
}

.custom-text {
    font-size: 16px;
    color: #FFFFFF;
    opacity: 80%;
    text-align: center;
}

/* fresh ends */
/* menu  */
.menu-wrapper {
    width: 100%;
    background-color: #FFFFFF;
}

.menu-price {
    text-align: end;

}

/* FAQ Section */
.faq-container {
    padding: 0px 160px;
}

.faq-container .faq-heading {
    font-size: 46px;
    font-weight: 600;
    color: #0F1728;
    text-align: center;
}

.accordion-item {
    border: none !important;
}

.accordion-body {
    opacity: 80%;
}

.accordion-button::after {
    width: 15px !important;
    height: 15px !important;
    background-image: url("./assets/arrow-down.svg") !important;
    background-position: center;
    background-color: cover;
    background-repeat: no-repeat;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("./assets/arrow-down.svg") !important;
}

.accordion-button {
    background-color: transparent !important;
    color: inherit !important;
    border: none !important;
    outline: none !important;
    box-shadow: none;
    font-weight: 500;
    font-size: 18px !important;
    background-color: #002B2A !important;
    color: #F1ECD7 !important;
    border-radius: 20px !important;
}

.accordion-button:focus {
    box-shadow: none !important;
}

.accordion-header {
    cursor: pointer;
    user-select: none;
}

.accordion-body {
    padding: 1rem;
}

.acc-menu-text {
    padding: 10px 0;
    border-bottom: 1px solid grey;
    font-size: 16px;
    color: #040404;
}

/* FAQ Section Ends */
/* menu ends */
/* Review container */
.slick-slide {
    margin: 0 10px;
}

.slick-list {
    padding: 0 10px;
}

.review-container {
    min-width: 100%;
    background-color: #FFFFFF;
    overflow-x: hidden;
}

.rating-img {
    width: 400px;
}

.para-heading {
    font-size: 48px;
    font-weight: 400;
}

/* Review box */
.star-icon {
    width: 16px;
    height: 16px;

}

.reviewer {
    width: 60px;
    height: 60px;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
}

.review-date {
    color: #002B2A;
    font-style: italic;
}

.review-box {
    height: 450px !important;
    border-radius: 30px;
    overflow: hidden;
    transition: width 0.6s ease, height 0.3s ease;
    position: relative;
    flex-shrink: 0;
}

.review-card {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 30px;
    transition: background-image 0.3s ease;
}

.review-bg {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    object-fit: cover;
}

.review-content {
    padding: 30px 20px;
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hover Effects */
.review-box:hover {
    background-color: #F1ECD7;
}

.review-box:hover .review-bg {
    display: none;
}

.review-box:hover .review-content {
    display: block;
    animation: fadeInContent 0.2s ease 0.3s forwards;
}

/* Keyframe Animation */
@keyframes fadeInContent {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* brand-logos */
.brand-logos {
    width: 100%;
    padding-inline: 20px;
    background-image: url("./assets/brand-logos.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.brand-logos img {
    width: 170px;
}

/* brand-logos ends */
/* footer */
footer {
    width: 100%;
    background-color: #010101;
    color: #F5F6F8;
    background-image: url("./assets/footer-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.upper-footer {
    border-bottom: 1px solid #ffffffce;
}

.footer-reda {
    width: 250px;
}

.footer-qr {
    width: 350px;
}

/*  */
.middle-footer {
    border-bottom: 1px solid #ffffffce;
}

.footer-margin {
    margin-left: 100px;
}

.middle-footer .heading {
    font-size: 14px;
    color: #FFFFFF;
    text-transform: uppercase;
}

.middle-footer .heading1 {
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    text-transform: uppercase;
}

.middle-footer .text {
    font-size: 16px;
    color: #FFFFFF;
    opacity: 60%;
    transition: color 0.3s;
}

.bottom-footer .text {
    font-size: 16px;
    color: #FFFFFF;
    opacity: 60%;
    transition: color 0.3s;
}

.middle-footer .text:hover {
    opacity: 100%;
}

.bottom-footer {
    width: 100%;
    overflow-x: hidden;
}

.bottom-footer .image-footer {
    width: 100%;
}

.footer-map {
    width: 264px;
}

/* BLOG BLOG BLOG */
.blog-banner {
    width: 100%;
    background-color: #F5F6F8;
    color: #191919;
}

.blog-banner-img img {
    width: 100%;
}

.blog-detail {
    font-size: 50px;
    font-weight: 600;
    color: #191919;
}

.blog-date {
    font-size: 18px;
    opacity: 80%;
    color: #191919;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-calendar {
    width: 20px;
}

.blog-detail {
    width: 620px;
}

.blog-detail h2 {
    font-size: 28px;
    font-weight: 600;
    color: #191919;
    opacity: 100%;
}

.blog-detail b,
.blog-detail h3 {
    font-size: 22px;
    font-weight: 600;
    color: #000;
    opacity: 100%;
}

.blog-detail p,
.blog-detail span {
    font-size: 18px;
    opacity: 80%;
    color: #191919;
    font-weight: 400;
}

.blog-detail ul li {
    font-size: 26px;
}

/* footer ends */


/* responsive */
/* 1300 */
@media screen and (max-width:1300px) {
    .know-right {
        width: 48%;
        padding-left: 40px;
    }

    .know-card-text {
        font-size: 14px;
    }

    .know-card {
        width: 330px;
    }
}

/* 1200 */
@media screen and (max-width:1200px) {

    /* right */
    .know-right {
        width: 48%;
    }

    .know-card-text {
        font-size: 14px;
    }

    .know-card {
        width: 330px;
    }

    /* FAQ Section */
    .faq-container {
        padding: 0px 60px;
    }

    /* brand logos */

    .brand-logos img {
        width: 100px;
    }

    /* footer */

    .footer-margin {
        margin-left: 20px;
    }

    /* hover menu */
    .menu-slide {
        height: 350px;
    }
    .menu-slide-title {
        font-size: 22px;
    }

    .menu-slide-text {
        font-size: 14px;
    }

    /* ------- */
    .carousel-control-next {
        padding: 50px !important;
    }

    .carousel-control-next,
    .carousel-control-prev {
        opacity: 1 !important;
        padding: 0px !important;
    }

    .carousel-control-prev-icon {
        margin-right: 0px;
        border-radius: 50%;
        width: 40px !important;
        height: 40px !important;
    }

    .carousel-control-next-icon {
        margin-left: 0px;
        border-radius: 50%;
        width: 40px !important;
        height: 40px !important;
    }
}

/* 992 */
@media screen and (max-width:991px) {

    /* banner */
    .banner-bg-box {
        background-position: calc(70% + 100px) center;
    }
    /* yellow banner */
    /* food and beverages */
    .beverages-heading {
        font-size: 40px;
    }

    /* know */
    .know-left {
        width: 100%;
    }

    .know-right {
        width: 100%;
        padding-left: 0px;
    }

    /* FAQ Section */
    .faq-container {
        padding: 0px 0px;
    }

    /* brand logos */

    .brand-logos img {
        width: 90px;
    }

    /* para */
    .para-heading {
        font-size: 38px;
    }

    /* footer */
    .footer-margin {
        margin-left: 100px;
    }

    .footer-reda {
        width: 200px;
    }

    .footer-qr {
        width: 300px;
    }
    /* menu hover */
    .menu-slide-text {
        font-size: 14px;
        display: block;
    }
    .menu-slide-text br{
        display: none;
    }

}

/* 767 */
@media screen and (max-width:767px) {

    /* banner content */
    .banner-content-box {
        width: 100%;
    }

    /* food and beverages */
    .beverages-heading {
        font-size: 32px;
    }

    /* know */
    .know-heading {
        font-size: 32px;
    }

    .reda {
        width: 100px;
    }

    /* right */
    .margin {
        margin-left: 0px;
    }

    /* fresh */

    .fresh-heading {
        font-size: 32px;
    }

    .fresh-text {
        font-size: 14px;
    }

    /* faq */
    .review-box {
        height: 390px !important;
        border-radius: 30px;
        overflow: hidden;
        transition: width 0.6s ease, height 0.3s ease;
        position: relative;
        flex-shrink: 0;
    }

    /* brand logos */

    .brand-logos img {
        width: 60px;
    }

    /* para */
    .para-heading {
        font-size: 30px;
    }

    /* footer */
    .footer-margin {
        margin-left: 50px;
    }
}

/* 576 */
@media screen and (max-width:575px) {

    /* banner content */
    .banner-content-box {
        margin-top: 90px;
    }

    .banner-heading {
        font-size: 68px;
        line-height: 76px;
    }

    /* yellow banner */
    .yellow-heading {
        font-size: 24px;
    }
    .yellow-banner-bg {
        padding: 30px 0 20px 0;
        background-image: url("./assets/yellow-banner-res.svg");
    }
    /* food and beverages */
    .beverages-heading {
        font-size: 20px;
        padding: 0 10px;
    }

    /* know */
    .know-heading {
        font-size: 20px;
    }

    .reda {
        width: 70px;
    }

    .know-text {
        font-size: 14px;
    }

    /* fresh */
    .fresh-heading {
        font-size: 20px;
    }

    .fresh-text {
        font-size: 14px;
    }

    .custom-text {
        font-size: 14px;
    }

    /* faq */

    .menu-dish {
        padding-right: 20px;
    }

    /* review */
    .rating-img {
        width: 200px;
    }

    /* brand logos */

    .brand-logos img {
        width: 100px;
    }

    /* footer */

    .footer-margin {
        margin-left: 0px;
    }

    .footer-reda {
        /* width:150px; */
    }

    .footer-qr {
        width: 250px;
    }

    /* para */
    .para-heading {
        font-size: 26px;
    }
}

/* 450px */
@media screen and (max-width:450px) {
    
    .know-card {
        width: 100%;
    }

    /* faq */

    .menu-heading {
        font-size: 14px;
        padding-right: 30px;
    }

    .menu-dish {
        font-size: 14px;
        padding-right: 20px;
    }

    .menu-price {
        font-size: 14px;
        text-align: end;

    }

    .acc-menu-text {
        display: flex !important;
        justify-content: none !important;
    }
}

/* 400px */
@media screen and (max-width:400px) {

    .know-br {
        display: none;
    }
}