* {
    margin: 0%;
    padding: 0%;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
    scrollbar-color: #644241 #644241;
    scrollbar-width: thin;
    /* border: red solid; */
    /* border: red solid 2px; */
}

body {
    background: rgb(254, 225, 225);
    width: 100vw;
    height: 100%;
    overflow-x: hidden;
}

#dishes {
    overflow: hidden;
    height: 100%;
}

#Chefs {
    padding-top: 8rem;
    overflow: hidden;
    height: 100vh;
}

#order {
    /* border: red solid; */
    padding-bottom: 5rem;
}

#menu {
    padding-top: 8rem;
}

section {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

nav {
    position: fixed;
    z-index: 99;
    margin-top: 1.5rem;
    width: 92%;
    margin-left: 4rem;
    margin-right: 4rem;
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 10px;
    /* border: 1px solid rgba( 255, 255, 255, 0.18 ); */
}

.wrapper {
    display: flex;
    width: 100%;
    overflow: hidden;
    justify-content: space-between;
    align-items: center;
    /* border: red solid ; */
}

.nav {
    display: flex;
    gap: 2rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: rgb(67, 41, 41);
    letter-spacing: 0.2rem;
    text-transform: uppercase;
}

.logo {
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    gap: 0.8rem;
    cursor: pointer;
}

#hlogo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
}

.cart {
    display: flex;
    font-size: 1.5rem;
    font-weight: 600;
    gap: 0.8rem;
}

.cart button {
    background: rgb(247, 198, 198);
    padding: 0.2rem 2rem;
    border-radius: 0.6rem;
    border: rgb(123, 85, 85) solid 4px;
    color: rgb(123, 85, 85);
    font-weight: 700;
}

.cart i {
    font-size: 1.8rem;
}

.designbg {
    position: absolute;
    right: 0;
    background: rgb(199, 165, 165);
    width: 50%;
    height: 100%;
    z-index: -1;
    clip-path: polygon(81% 0, 80% 0%, 100% 0, 100% 100%, 80% 100%, 20% 100%, 0 100%, 0 100%);
}

.herosec {
    /* border: red solid; */
    margin-top: 6rem;
    /* margin-left: 5rem; */
    height: 75vh;
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

#food {
    /* transform: translateX(10rem); */
    width: 60%;
}

.left {
    width: 50%;
    transform: translateX(10rem);
}

.op #detail {
    /* border: red solid; */
    width: 70%;
}

.right {
    /* border: green solid; */
    width: 50%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.botomsec_hero {
    /* border: red solid; */
    height: 12vh;
    width: 100vw;
    display: flex;
}

.left_b {
    /* border: green solid; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 0.3rem;
    width: 50%;
    padding-left: 4rem;
}

#arrow {
    transform: translateX(10rem);
}

.cieclesec {
    display: flex;
}

.circle {
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border-radius: 50%;
    object-fit: cover;
    background: rgb(103, 65, 65);
    border: rgb(199, 165, 165)solid;
}

.circle img {
    width: 100%;
    height: 100%;
}

.circle:nth-child(2) {
    /* border: red solid; */
    transform: translateX(-0.5rem);
}

.circle:nth-child(3) {
    /* border: red solid; */
    transform: translateX(-1rem);
}

.right_b {
    /* border: rgb(177, 37, 60) solid; */
    width: 50%;
    padding-right: 4rem;
    display: flex;
    justify-content: flex-end;
    gap: 1.2rem;
    align-items: center;
}

.s_sec {
    display: flex;
}

#bmenu {
    outline: none;
    border: none;
    padding: 0.5rem 2rem;
    display: flex;
    align-items: center;
    text-align: center;
    border-radius: 0.5rem;
    background: rgb(103, 65, 65);
    color: #ffffff;
}

#bold {
    font-weight: 700;
    font-size: 1.3rem;
}

#reg {
    font-weight: 600;
    color: rgb(132, 94, 94);
}

.uil-arrow-right {
    font-size: 1.5rem;
}

.context {
    /* border: red solid; */
    padding-left: 4rem;
    display: flex;
    height: 100%;
    justify-content: center;
    flex-direction: column;
}

a {
    color: rgb(132, 94, 94);
}

.retragular {
    height: 15rem;
    width: 0.5rem;
    background: rgb(172, 106, 106);
}

.retragular2 {
    height: 3rem;
    width: 0.5rem;
    background: rgb(172, 106, 106);
}

.op {
    display: flex;
    gap: 2rem;
    align-items: center;
}

#bold2 {
    font-size: 4.5rem;
    text-transform: uppercase;
    /* border: red solid; */
    line-height: 5rem;
    width: 80%;
    margin-bottom: 1.5rem;
    font-weight: 700;
    color: rgb(51, 39, 39);
}

.op:nth-child(2) {
    /* border: red solid; */
    margin-top: 1rem;
}

#reg2 {
    font-size: 3rem;
    font-weight: 500;
    color: rgb(123, 85, 85);
}

.buts {
    margin-top: 2.5rem;
    display: flex;
    gap: 2rem;
}

#btn2 {
    font-size: 1.5rem;
    padding: 0rem 2rem;
    border-radius: 0.5rem;
    border: none;
    border: rgb(114, 66, 66) solid 5px;
    background: rgb(114, 66, 66);
    color: rgb(254, 225, 225);
}

#btn3 {
    font-size: 1.5rem;
    padding: 0.5rem 2rem;
    border-radius: 0.5rem;
    /* border: none; */
    border: rgb(114, 66, 66) solid 5px;
    color: rgb(114, 66, 66);
    background: rgb(254, 225, 225);
}

#detail {
    font-size: 1.3rem;
    width: 92%;
}

.mk {
    /* border: red solid; */
    display: flex;
    margin-top: 6rem;
    height: 80vh;
}

.t1 {
    width: 50%;
    height: 100%;
    /* border: rgb(75, 231, 96) solid; */
}

.t2 {
    width: 50%;
    height: 100%;
    /* border: rgb(75, 132, 231) solid; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin-left: 5rem;
    gap: 2rem;
    /* border: rgb(75, 132, 231) solid; */
    padding-left: 10%;
    height: 100%;
}

.wrp p:nth-child(1) {
    font-weight: 600;
    font-size: 4.5rem;
    width: 100%;
    /* margin-bottom: 2rem; */
}

.active {
    padding: 0.2rem 1.2rem;
    border-radius: 0.3rem;
    box-shadow: rgba(157, 109, 89, 0.4) -5px 5px,
        rgba(157, 109, 89, 0.3) -10px 10px,
        rgba(157, 109, 89, 0.2) -15px 15px,
        rgba(157, 109, 89, 0.1) -20px 20px,
        rgba(157, 109, 89, 0.05) -25px 25px;
    color: rgb(247, 198, 198);
    background: rgb(103, 65, 65);
    /* border: rgb(103, 65, 65) solid 5px; */
}

.nav ul a {
    padding: 0.2rem 1.2rem;
    border-radius: 0.3rem;
    text-decoration: none;
    transition: all 0.8s;
    /* color: rgb(247, 198, 198); */
    /* background: rgb(103, 65, 65); */
}

.uil-restaurant {
    font-size: 2rem;
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrp p:nth-child(2) {
    font-weight: 400;
    font-size: 1.4rem;
    color: rgb(147, 117, 117);
    width: 88%;
    margin-bottom: 1rem;
}

.con {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    /* border: red solid; */
    width: 70%;
    justify-content: center;
    align-items: center;
}

.s1 {
    background: #ffecec;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 16rem;
    height: 18rem;
    border-radius: 0.5rem;
}

.s1:hover {
    background: #8a554453;
    color: #ffecec;
}

#reg4 {
    /* border: red solid; */
    font-size: 0.8rem;
    width: 80%;
}

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

.secdiv p:nth-child(1) {
    font-size: 3rem;
    font-weight: 600;
}

.secdiv p:nth-child(2) {
    width: 50%;
    text-align: center;
}

.m1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    align-items: center;
    /* margin-top: 2rem; */
    /* border: red solid; */
}

.cardct {
    margin-top: 4rem;
}

.m2 {
    width: 100%;
    padding: 0rem 4rem;
}

.ko {
    margin-top: 8rem;
}

.wocon {
    /* border: red solid; */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cef {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    margin-top: 2rem;
}

.cf {
    border-radius: 0.5rem;
    width: 20rem;
    height: 25rem;
    background: #ffffff;
}

.cf:nth-child(1),
.cf:nth-child(3) {
    /* border: red solid; */
    transform: translateY(12rem);
}

.h6 {
    margin-top: 8rem;
}

#review {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.k7 {
    /* border: red solid; */
    padding-bottom: 2rem;
}

.activepic {
    border: rgb(103, 65, 65) solid;
    padding: 0.2rem;
    transform: scale(1.15);
}

.rev_text {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: #ffffff;
    height: 28rem;
    /* border: red solid; */
}

.dsflex_sa {
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: space-around;
    /* border: red solid; */
}

.us_text {
    position: absolute;
    text-align: center;
    border-radius: 1rem;
    background: rgb(123, 85, 85);
    height: 28rem;
    /* margin: 0rem 15rem; */
    width: 65%;
    display: none;
}

.us_text.activetext {
    display: block;
}

.us_text p {
    margin: 2rem 5rem;
    font-size: 1.6rem;
}

.us_text i {
    font-size: 4rem;
    margin-top: 2rem;
    color: #c7afaf;
}

.us_text span {
    /* border: red solid; */
    font-weight: 600;
    color: #c7afaf;
    font-size: 2.5rem;
    padding-bottom: 2rem;
}

.r_pic {
    /* border: red solid; */
    margin-top: 1.8rem;
    display: flex;
    gap: 1.5rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.user_pic {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: 50%;
}

.ts {
    height: 100%;
    width: 100%;
    background: #ffffff;
    border-radius: 0.5rem;
}

.cunter {
    width: 42rem;
    height: 3rem;
    border-radius: 0.5rem;
    /* padding-left: 2rem; */
    /* padding-right: 2rem; */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background: #ffecec;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.cunter span:nth-child(3) {
    border-left: rgb(103, 65, 65) solid;
    padding: 1rem 2rem;
    background: rgb(103, 65, 65);
    color: #ffecec;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
}

.cunter span:nth-child(2) {
    font-size: 1.3rem;
    font-weight: 600;
}

.cunter span:nth-child(1) {
    border-right: rgb(103, 65, 65) solid;
    padding: 1rem 2rem;
    background: rgb(103, 65, 65);
    color: #ffecec;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
}

#date {
    color: #ffecec;
    background: linear-gradient(to right, #ffecec 87%, rgb(103, 65, 65) 20%, rgb(103, 65, 65) 100%);
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    color: #ffecec;
    opacity: 1;
    width: 25px;
    height: 25px;
}

input {
    outline: none;
    border: none;
    width: 38rem;
    height: 3rem;
    border-radius: 0.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background: #ffecec;
}

select {
    outline: none;
    border: none;
    /* width: 38rem; */
    height: 3rem;
    border-radius: 0.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background: #ffecec;
    cursor: pointer;
}


#specialRequests {
    outline: none;
    border: none;
    width: 38rem;
    height: 10rem;
    border-radius: 0.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    resize: none;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background: #ffecec;
}

#mes {
    height: 12rem;
    width: 38rem;
    outline: none;
    background: #ffecec;
    border: none;
    border-radius: 0.5rem;
    padding: 2rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

form {
    display: flex;
    gap: 2rem;
    /* margin-top: 2rem; */
    /* border: red solid; */
    justify-content: center;
}

/* #btn4 {
    font-size: 1.5rem;
    padding: 0.8rem 0.8rem;
    border-radius: 0.5rem;
    border: none;
    width: 18rem;
    margin-top: 1.5rem;
    border: rgb(114, 66, 66) solid 5px;
    background: rgb(114, 66, 66);
    color: rgb(247, 198, 198);
} */
/* ============================================================= */

.uil-shopping-cart {
    font-size: 2rem;
    padding-left: 1rem;
}

#btn4,
#btn4:after {
    width: 200px;
    height: 60px;
    /* line-height: 78px; */
    font-size: 20px;
    font-family: 'Bebas Neue', sans-serif;
    background: linear-gradient(45deg, transparent 5%, #674141 5%);
    border: 0;
    color: #fff;
    letter-spacing: 3px;
    box-shadow: 6px 0px 0px #f1bb99;
    outline: transparent;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

#btn4:after {
    --slice-0: inset(50% 50% 50% 50%);
    --slice-1: inset(80% -6px 0 0);
    --slice-2: inset(50% -6px 30% 0);
    --slice-3: inset(10% -6px 85% 0);
    --slice-4: inset(40% -6px 43% 0);
    --slice-5: inset(80% -6px 5% 0);

    content: 'ALTERNATE TEXT';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 3%, #f1bb99 3%, #f1bb99 5%, #674141 5%);
    text-shadow: -3px -3px 0px #f6e147, 3px 3px 0px #ff6600;
    clip-path: var(--slice-0);
}

#btn4:hover:after {
    animation: 1s glitch;
    animation-timing-function: steps(2, end);
}

@keyframes glitch {
    0% {
        clip-path: var(--slice-1);
        transform: translate(-20px, -10px);
    }

    10% {
        clip-path: var(--slice-3);
        transform: translate(10px, 10px);
    }

    20% {
        clip-path: var(--slice-1);
        transform: translate(-10px, 10px);
    }

    30% {
        clip-path: var(--slice-3);
        transform: translate(0px, 5px);
    }

    40% {
        clip-path: var(--slice-2);
        transform: translate(-5px, 0px);
    }

    50% {
        clip-path: var(--slice-3);
        transform: translate(5px, 0px);
    }

    60% {
        clip-path: var(--slice-4);
        transform: translate(5px, 10px);
    }

    70% {
        clip-path: var(--slice-2);
        transform: translate(-10px, 10px);
    }

    80% {
        clip-path: var(--slice-5);
        transform: translate(20px, -10px);
    }

    90% {
        clip-path: var(--slice-1);
        transform: translate(-10px, 0px);
    }

    100% {
        clip-path: var(--slice-1);
        transform: translate(0);
    }
}





/* ========================================================== */
#btns4,
#btns56 {
    font-size: 1.5rem;
    padding: 0.5rem 1.3rem;
    border-radius: 0.5rem;
    border: none;
    width: 18rem;
    margin-top: 1.5rem;
    border: rgb(114, 66, 66) solid 5px;
    background: rgb(114, 66, 66);
    color: rgb(247, 198, 198);
}

.k7 {
    margin-top: 8rem;
    /* border: red solid; */
}

label {
    color: rgb(147, 117, 117);
}

footer {
    background: rgb(103, 65, 65);
    width: 100vw;
    height: 40vh;
}

#picicon {
    font-size: 5rem;
}

.material-symbols-outlined {
    font-size: 4.5rem;
}

.s1 span {
    margin-bottom: 1rem;
}

.m2 {
    /* border: red solid; */
    /* column-gap: 2rem; */
    margin-top: 2rem;
}

.s2 {
    background: #ffecec;
    border: #ffecec solid;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    /* align-items: center; */
    /* text-align: center; */
    width: 18rem;
    height: 32rem;
    padding: 0.8rem 2rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    margin-right: 1rem;
}

.s2 p:nth-child(2) {
    text-align: right;
    font-weight: 500;
    margin-top: 1rem;
    display: flex;
    justify-content: end;
    align-items: center;
    /* border: red solid; */
}

#star {
    filter: invert(42%) sepia(30%) saturate(300%) hue-rotate(87deg) brightness(119%) contrast(119%);
}

.s2 p:nth-child(3) {
    font-weight: 600;
    font-size: 1.2rem;
    margin-top: 0.8rem;
    /* margin-bottom: 0.5rem; */
    height: 4rem;
    width: 100%;
    color: rgb(103, 65, 65);
    /* border: red solid; */
    display: flex;
    justify-content: start;
    /* align-items: center; */
}

.s2 p:nth-child(4) {
    margin-bottom: 0.5rem;
    text-align: left;
    height: 3rem;
    font-size: 1rem;
    color: rgb(147, 117, 117);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 1.5rem;
    /* fallback */
    /* fallback */
    -webkit-line-clamp: 2;
    /* number of lines to show */
    -webkit-box-orient: vertical;
    width: 100%;
    /* border: red solid; */
}

#price {
    /* border: red solid; */
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 0.5rem;
    /* text-align: right; */
}

.pici {
    width: 100%;
    height: 10rem;
    overflow: hidden;
    margin-top: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    background: rgb(137, 88, 88);
}

.pici img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.uil-star {
    padding-right: 0.5rem;
}

.cf {
    /* border: red solid; */
    overflow: hidden;
}

.cf img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.btn5 {
    margin-top: 5%;
    margin-bottom: 5%;
    background: rgb(103, 65, 65);
    color: rgb(247, 198, 198);
    border: none;
    width: 100%;
    height: 3.5rem;
    font-size: 1.2rem;
    border-radius: 0.5rem;
}

.add_cart {
    background: rgb(208, 174, 174);
    color: #222222;
}

input::placeholder {
    color: rgb(147, 117, 117);
    font-weight: 600;
}

input {
    color: rgb(147, 117, 117);
    font-weight: 600;
}

#date {
    color: rgb(147, 117, 117);
    font-weight: 600;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.loader_con {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 999;
    background: #ffc5bb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader_con img {
    width: 55rem;
    height: auto;
}

.loader_con.fade-out {
    top: 110%;
    opacity: 0;
}

/* ===================== */
.swiper {
    width: 100%;
    height: 88vh;
}

.swiper-button-next,
.swiper-button-prev {
    color: rgb(103, 65, 65);
    font-size: 1rem;
    font-weight: 700;
}

.swiper-button-next {
    padding-right: 4rem;
}

.swiper-button-prev {
    padding-left: 4rem;
}

.swiper-pagination-bullet {
    background: #ab9591;
    width: 0.8rem;
    height: 0.8rem;
}

.swiper-pagination-bullet-active {
    background: rgb(103, 65, 65);
}

.s2:hover {
    filter: drop-shadow(16px 16px 30px #33333338);
    background: #e8b18c5e;
    transform: scale(1.03);
    transition: all 1s;
    border: rgb(103, 65, 65) solid;
    box-shadow: rgba(116, 84, 66, 0.4) -5px 5px,
        rgba(116, 84, 66, 0.3) -10px 10px,
        rgba(116, 84, 66, 0.2) -15px 15px,
        rgba(116, 84, 66, 0.1) -20px 20px,
        rgba(116, 84, 66, 0.05) -25px 25px;
}

.cart {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: red solid; */
    padding: 0rem 1rem;
    border-radius: 0.5rem;
    background: #c7afaf;
    cursor: pointer;
}

.cartno {
    background: rgb(103, 65, 65);
    height: 2rem;
    width: 2rem;
    color: #c7afaf;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}

.cartsection {
    position: fixed;
    width: 100vw;
    height: 100%;
    overflow: hidden;
    background: rgb(254, 225, 225);
    z-index: 98;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: red solid; */
    display: none;
}

.cart_wraper {
    width: 100vw;
    padding: 1rem 0rem 6rem;
    height: 80%;
    overflow-y: scroll;
    gap: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cartbtnarea {
    height: 20%;
    /* border: red solid; */
    width: 100vw;
    background: rgb(56, 44, 44);
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: 2rem;
    padding-top: 2rem; */
    color: #ffecec;
}

.orderfrom_cart {
    width: 50vw;
    height: 4rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* border: red solid; */
}

.orderfrom_cart button {
    padding: 0.7rem 2rem;
    background: #c7afaf;
    border: none;
    font-size: 1.2rem;
    font-weight: 500;
    border-radius: 0.2rem;
}

.orderfrom_cart span {
    font-size: 2.5rem;
    font-weight: 500;
}

.minus_cart,
.plus_cart {
    width: 8rem;
    height: 2rem;
    color: rgb(103, 65, 65);
    background: rgb(211, 186, 186);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    border: none;
    border-radius: 0.2rem;
    cursor: pointer;
}

.dis_cart {
    font-size: 1rem;
    font-weight: 600;
    width: 10rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.counter_item {
    border-radius: 0.2rem;
    width: 6rem;
    display: flex;
    margin-right: 1rem;
    justify-content: space-between;
    cursor: pointer;
}

.img_cart {
    overflow: hidden;
    margin-left: 4rem;
    height: 6rem;
    width: 8rem;
    padding: 1rem 0rem;
    object-fit: cover;
    border-radius: 0;
    background: rgb(103, 65, 65);
}

.item_cart_title {
    font-weight: 600;
    /* border: red solid; */
    width: 16rem;
    text-align: center;
    color: #ffecec;
}

.cart_div_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(103, 65, 65);
    overflow: hidden;
    border-radius: 0.5rem;
    color: #c7afaf;
    width: 50rem;
    /* border: red solid; */
}

/* footer */
.footer_wraper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    overflow: hidden;
}

.mainfooter {
    /* border: red solid; */
    height: 85%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.bottom_footer {
    height: 15%;
    text-align: center;
}

#fid {
    color: #c7afaf;
    font-size: 1.2rem;
    font-weight: 600;
    /* border: red solid; */
    width: 50%;
    transform: rotate(-90deg) translate(-12rem, 2rem);

}

.rname {
    /* border: red solid; */
    width: 6%;
}

.getint {
    /* border: red solid; */
    width: 25%;
}

.rcont p {
    color: #c7afaf;
    font-size: 4rem;
    font-weight: 600;
    width: 30%;
    /* border: red solid; */
    margin-left: 4rem;
    padding-top: 2rem;
}

.menu_foot {
    /* border: red solid; */
    width: 25%;
}

.rcont {
    /* border: red solid; */
    width: 44%;
}

#ftilt {
    color: #ffc5bb;
    font-size: 1.8rem;
    text-transform: capitalize;
    font-weight: 500;
    margin-bottom: 1rem;
    padding-top: 4rem;
}

.menu_foot ul a,
#feedback {
    color: #ab9591;
    padding-bottom: 0.3rem;
}

.placetotal {
    /* border: red solid; */
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: right;
}

.timesx {
    margin-right: 4rem;
    height: 3rem;
    width: 2.5rem;
    font-size: 1.5rem;
    border: none;
    border-radius: 0.5rem;
    background: rgb(181, 123, 123);
    color: #ffecec;
}

.cusmrec {
    display: flex;
    flex-direction: column;
}

.form-group {
    display: flex;
    flex-direction: column;
}

#reservationDate,
#reservationTime {
    background: linear-gradient(to right, #ffecec 87%, #724242 20%, #724242 100%);
}

::-webkit-calendar-picker-indicator {
    color: #ffecec;
    fill: #ffecec;
    font-size: 1.2rem;
    filter: invert();
}

input[type="date"]::-moz-calendar-box {
    /* Styles for the calendar drop-down arrow in Firefox */
    color: #ffecec;
    background-color: #ffecec;
    font-size: 1.2rem;
    filter: invert();
}

/* Track */
::-webkit-scrollbar {
    width: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background-color: #644241;
    height: 0rem;
    border-radius: 0.2rem;
}

::-webkit-scrollbar-track-piece:start {
    background-color: #644241;
}

.btnwrap_form {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    /* border: red solid; */
}

label {
    padding-left: 1rem;
}

.rightsidebtn {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.nav ul a:hover {
    /* border: #644241 solid 3px; */
    box-shadow: rgba(157, 109, 89, 0.4) 0px 5px,
        rgba(157, 109, 89, 0.3) 0px 10px,
        rgba(157, 109, 89, 0.2) 0px 15px,
        rgba(157, 109, 89, 0.1) 0px 20px,
        rgba(157, 109, 89, 0.05) 0px 25px;
    border-radius: 0.5rem;
    /* padding: 0.5rem 0.5rem; */
}


.menubtn_id {
    margin-right: 2rem;
    padding: 0.2rem 1rem;
    background: transparent;
    border: #644241 solid 3px;
    border-radius: 0.5rem;
    cursor: pointer;
    outline: none;
    font-size: 1rem;
}

.menubtn_id:hover {
    font-weight: 700;
    background: #644241;
    box-shadow: rgba(157, 109, 89, 0.4) 5px 5px,
        rgba(157, 109, 89, 0.3) 10px 10px,
        rgba(157, 109, 89, 0.2) 15px 15px,
        rgba(157, 109, 89, 0.1) 20px 20px,
        rgba(157, 109, 89, 0.05) 25px 25px;
    color: #ffecec;
    border: #644241 solid 3px;
    /* scale: 1.2; */
}

.menu_active {
    font-weight: 700;
    background: #644241;
    box-shadow: rgba(157, 109, 89, 0.4) 5px 5px,
        rgba(157, 109, 89, 0.3) 10px 10px,
        rgba(157, 109, 89, 0.2) 15px 15px,
        rgba(157, 109, 89, 0.1) 20px 20px,
        rgba(157, 109, 89, 0.05) 25px 25px;
    color: #ffecec;
    border: #644241 solid 3px;
}

.menupage {
    background: rgb(244, 212, 212);
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 98;
    overflow: scroll;
    display: none;
}

.search-bar {
    display: none;
    background: #ffecec;
    border-radius: 0.6rem;
    align-items: center;
    justify-content: space-around;
    height: fit-content;
    width: 50%;
    height: 3rem;
}

.search-bar button {
    background: transparent;
    border: none;
    outline: none;
}

.uil-search {
    font-size: 1.2rem;
    padding-right: 2rem;
    color: #b49a98;
}

.categories {
    /* border: red solid; */
    /* padding-right: 5.5rem; */
    display: flex;
    flex-direction: row;
    align-items: center;
    /* margin-top:7rem; */
    gap: 2rem;
    justify-content: center;
}

.category {
    all: unset;
    width: 60px;
    height: 20px;
    font-size: 16px;
    background: transparent;
    border: none;
    position: relative;
    color: #f0f0f0;
    cursor: pointer;
    z-index: 1;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.category::after,
.category::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -99999;
    transition: all .4s;
}

.category::before {
    transform: translate(0%, 0%);
    width: 100%;
    height: 100%;
    background: #b9918f;
    border-radius: 10px;
}

.category::after {
    transform: translate(10px, 10px);
    width: 35px;
    height: 35px;
    background: #ffffff15;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 50px;
}

.category:hover::before {
    transform: translate(5%, 20%);
    width: 100%;
    height: 100%;
}

.category:hover::after {
    border-radius: 10px;
    border: #6442417e solid 1px;
    transform: translate(0, 0);
    width: 100%;
    height: 100%;
}


/* ======================================= */

.alactive {
    all: unset;
    width: 60px;
    height: 20px;
    font-size: 16px;
    background: transparent;
    border: none;
    position: relative;
    color: #f0f0f0;
    cursor: pointer;
    z-index: 1;
    padding: 10px 20px;
    display: flex;
    font-weight: 600;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.alactive::after,
.alactive::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -99999;
    transition: all .4s;
}

/* backgroud */
.alactive::before {
    transform: translate(5%, 20%);
    width: 100%;
    height: 100%;
    background: #846665;
    border-radius: 10px;
}

/* glasseffect */
.alactive::after {
    transform: translate(0, 0);
    width: 100%;
    height: 100%;
    border: #b9918f solid 1px;
    background: #ffffff15;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 0.5rem;
}

.menutit {
    text-align: center;
    margin-top: 6rem;
    margin-bottom: 2rem;
    /* display: none !important; */
}

.menutit p:nth-child(1) {
    font-weight: 700;
    font-size: 2.5rem;
}

.viewcart {
    margin-top: 2rem;
}

.popupbg {
    top: 0;
    position: fixed;
    /* border: red solid; */
    z-index: 98;
    width: 100%;
    height: 100%;
    background: #22222257;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

/* popup */
.orderpop {
    background: white;
    position: fixed;
    height: fit-content;
    width: 50rem;
    z-index: 99;
    border-radius: 0.5rem;
    transform: scale(0);
    transition: all 1s;
}

.orderpop span {
    position: absolute;
    top: 1rem;
    right: 2rem;
    font-size: 2rem;
}

.closepopbtn {
    background: rgb(241, 241, 241);
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    border: rgb(228, 186, 186) solid;
    z-index: 100;
}

.posrel {
    width: 100%;
    /* border: blue solid; */
    display: flex;
    justify-content: center;
}

.posrel h2 {
    text-transform: uppercase;
}

.posrel form {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: 0px;
    margin-top: 2rem;
    margin-bottom: 2rem;
    justify-content: center;
    gap: 10px;
}


.posrel form input {
    /* Your custom input styles go here */
    width: 100%;
    padding: 0rem 0.8rem;
    margin: 0px;
    /* box-sizing: border-box; */
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    background: rgb(255, 255, 255);
}

.posrel form textarea {
    /* Your custom input styles go here */
    width: 100%;
    /* padding: 0px; */
    margin: 0px;
    padding: 0rem 0.8rem;
    height: 5rem;
    resize: none;
    /* box-sizing: border-box; */
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    background: rgb(255, 255, 255);
}

.posrel form button {
    /* Your custom button styles go here */
    background-color: #4caf50;
    color: #fff;
    /* padding: 10px 20px; */
    padding: 0rem 0.8rem;
    margin-top: 1.5rem;
    width: 108%;
    height: 3rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.posrel form button:hover {
    background-color: #45a049;
}

.guide {
    position: absolute;
    right: 3rem;
    top: 5rem;
    /* border: red solid; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.uil-arrow-up {
    font-size: 3rem;
    animation: moveUpDown 1.3s linear infinite;
}

@keyframes moveUpDown {

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

    50% {
        transform: translateY(10px);
        /* Adjust the distance as needed */
    }
}

#lop {
    top: 0;
    margin-top: 5rem;
}

.juit {
    position: relative;
    /* text-transform: uppercase; */
}

.juit::after {
    content: "";
    display: block;
    /* or inline-block */
    width: 70%;
    height: 0.3rem;
    background: rgba(107, 77, 77, 0.337);
    position: absolute;
    border-radius: 0.2rem;
    top: 4rem;
    /* Adjust for margin-top */
    left: 15%;
    /* Adjust as needed */

}

.emptycart {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 20rem;
}

.emptycart p {
    margin-top: 1.5rem;
    font-weight: 600;
    color: #585858;
    text-align: center;
    font-size: 1.8rem;
}

#cart_svg {
    height: 17rem;
}



/* ================================== */
/* CSS */
.button-85 {
    padding: 1.2rem 2em;
    margin-top: 3rem;
    border: none;
    outline: none;
    color: rgb(255, 255, 255);
    background: #a48383;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    font-size: 1.2rem;
}

.button-85:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #423535;
    left: 0;
    top: 0;
    border-radius: 10px;
}

.payment_page {
    background: rgba(54, 54, 54, 0.591);
    backdrop-filter: blur( 12px );
    -webkit-backdrop-filter: blur( 12px );
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 98;
    left: 50%;
    top: -50%;
    transform: translate(-50%, 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    /* display: none; */
}

.contz {
    background: white;
    border-radius: 1rem;
    width: 80%;
    height: 80%;
    display: flex;
    overflow: hidden;
}

.address_pay {
    background: rgb(255, 247, 247);
    width: 60%;
    padding-left: 6rem;
    padding-top: 3rem;
}

#kop {
    text-align: left;
    color: #fcf0e7;
    padding-left: 1rem;
}

.summry {
    background: #b19c9b;
    width: 40%;
}

.payment_methods {
    display: flex;
}

.payment_methods input {
    width: 1rem;
}

.payment_methods label {
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: center;
}

.kl {
    display: flex;
    /* justify-content: space-around; */
    gap: 1rem;
    align-items: center;
}

.kl input {
    width: 3rem;
}

.fllll {
    display: flex;

}

.flyu {
    /* border: red solid; */
    width: fit-content;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1.2rem;
    overflow: hidden;
    margin-bottom: 0.3rem;
}

.popup input {
    border: 1.5px solid rgb(115, 115, 115);
    background: white;
    width: 10rem;
    height: 1.8rem;
}

.popup {
    /* border: red solid; */
    padding: 0.5rem 1rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
    border-radius: 10px;
    border: 3px solid rgb(70, 70, 70);
    display: none;
    overflow: hidden;
}

/*  */
.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transform: translateX(-30rem);
    z-index: 999 !important;
}

.cdrt {
    /* background: #423535; */
    color: #ffffff;
    padding: 1rem 1rem;
    border-radius: 0.8rem;
    position: relative;
    width: 22rem;
    height: 13rem;
    overflow: hidden;
    text-align: center;
    background: #0C2D57;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 10px;
    border: 2px solid #423535;
    ;
    display: none;
}

#uio {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: #4a607d;
    height: 100%;
    width: 50%;
    position: absolute;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    /* top: 50%; */
    top: 0;
    right: 0%;
    /* transform: translate(-50%, -50%); */
    z-index: 8;

}

#uio2 {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: #4a607d;
    height: 100%;
    width: 50%;
    position: absolute;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    /* top: 50%; */
    top: 0;
    right: 0%;
    /* transform: translate(-50%, -50%); */
    z-index: 8;

}

.bottomdi {
    /* border: red solid; */
    position: absolute;
    width: 100%;
    z-index: 10;
    bottom: 0;
    left: 0;
}

.bottomdi p:nth-child(1) {
    font-size: 1.5rem;
    font-weight: 600;
    padding-bottom: 1rem;
    color: #fcfdff;
}

.bottomdi p:nth-child(2) {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #e1eeff;
    padding-bottom: 1rem;
}

.bottomdi p:nth-child(3) {
    font-size: 1rem;
    font-weight: 500;
    padding-bottom: 1rem;
    text-align: left;
    padding-left: 2rem;
    color: #fcfdff;
}

.gyj {
    /* border: #45a049 solid; */
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.gyj strong {
    width: 50%;
}

.gyj span {
    width: 50%;
    /* border: red solid; */
    text-align: end;
}

.addr {
    margin-top: 1rem;
    width: 21rem;
    height: fit-content;
    border: #423535 solid;
    border-radius: 0.5rem;
    padding: 1rem 1.2rem;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    /* border: 1px solid rgba(255, 255, 255, 0.18); */
}

#hcen {
    text-align: center;
}

.fcerow {
    display: flex;
    align-items: center;
    gap: 5rem;
}

.add_address_btn {
    padding: 0.5rem 1.5rem;
    background: #644241;
    color: #ffffff;
    outline: none;
    border: none;
    border-radius: 0.5rem;
}

.btns45 {
    margin-top: 2rem;
    display: flex;
    gap: 1.2rem;
    /* border: red solid; */
}

.btns45 button {
    padding: 0.5rem 1.2rem;
    border: #644241 solid 2px;
    outline: none;
    color: #644241;
    border-radius: 0.5rem;
    background: transparent;
}

.btns45 button:nth-child(2) {
    background: #644241;
    color: white;
}

.btns46 {
    padding: 0.5rem 1.2rem;
    border: #644241 solid 2px;
    outline: none;
    background: #644241;
    color: white;
    border-radius: 0.5rem;
}

.popup {
    margin-top: 2rem;
}

/*  */
.summry {
    display: flex;
    justify-content: center;
    align-items: center;
}

.congyu {
    background: white;
    width: 65%;
    height: fit-content;
    border-radius: 1rem;
}

.address_pay {
    position: relative;
    overflow: hidden;
}

.shopck {
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: auto;
    z-index: 0;
    object-fit: cover;
    opacity: 0.3;
}

.njk {
    background: #644241;
    color: white;
    padding: 1rem 0rem;
    margin-top: 1.2rem;
    border: none;
    outline: none;
}

.chu {
    position: absolute;
    z-index: 2;
}

#creditCardModal {
    border-radius: 1rem;
    padding: 2rem 2.5rem;
    display: none;
    flex-direction: column;
}

#creditCardModal input {
    width: 20rem;
    background: #fff8f8;
    height: 2.5rem;
    border: #584d4d solid 2px;
}
.tex{
    display: flex;
    flex-direction: row;
    padding: 0.4rem;
    justify-content: space-between;
}
.linet {
    list-style: none;
    width: 100%;
    border: 1px solid rgba(34, 24, 24, 0.161);
}
.congyu{
    padding: 1rem 1.5rem;
}
#bold{
    font-weight: 600;
    font-size: 1rem;
    color: #4e4e4e;
    text-transform: capitalize;
}
.ni{
    margin: 1rem 0rem;
}
.ni2{
    background: #d9d9d9;
    padding: 0.6rem 0rem;
    text-align: center;
}
#dis{
    color: red;
    font-weight: 500;
}
#tol0{
    color: rgb(18, 167, 18);
    font-weight: 500;
}
.svgwraper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 25rem;
    height: 20rem;
    z-index: 99;
    mix-blend-mode: multiply;
}
.butyu{
    text-transform: capitalize;
    padding: 1rem 4.5rem;
    background: #493109;
    color: #f7f7f7;
    float: right;
    margin-right: 12rem;
    font-size: 1.4rem;
    border: none;
    outline: none;
    border-radius: 0.5rem;
}