body {
    font-family: 'Lexend Exa', sans-serif;
    background-color: #FFFFF0;
}

* {
    scroll-behavior: smooth;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #FFFFF0;
}

.navbar-brand,
.logoText {
    font-size: 30px;
    font-family: 'Caveat', cursive;
}

.navbar-nav .nav-item:hover .nav-link {
    color: #dc3545;
}

.content {
    text-align: justify;
    line-height: 30px;
}

/* Image Rotate Animation */
.rotate {
    object-fit: cover;
    transform-origin: center center;
    animation: spin 15s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Dark Mode Styles */
body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

/* Navbar Styles in Dark Mode */
body.dark-mode header {
    background: #121212;
}

body.dark-mode #navbar {
    background-color: #121212;
    border-bottom: 3px solid #555;
}

body.dark-mode #navbar .navbar-nav .nav-link {
    color: #ffffff;
}

body.dark-mode #navbar .navbar-nav .nav-link:hover {
    color: #dc3545;
}

body.dark-mode .navbar-brand {
    color: #ffffff;
}

body.dark-mode #navbar .navbar-toggler-icon {
    background-color: #ffffff;
}

body.dark-mode #navbar .navbar-toggler {
    border-color: #ffffff
}

body.dark-mode .listProduct {
    color: #121212;
}

/* About Us */

.margin-top {
    margin-top: 100px;
}

.aboutImg {
    width: 450px;
    height: 350px;

}

.l-btn {
    padding: 15px 20px 15px 20px;
    font-size: 18px;
}

/* Menu */
.menu {
    margin: 5% 25%;
}





/* Orange => color: #FF6347; 
    Danger => */

/* Booking */
.book-bg {
    background: url("imgs/photo_3_2024-04-03_12-34-17.jpg");
    background-size: cover;
}

.img-size1 {
    width: 1000px;
    height: 600px;
}

#booking {
    width: 1200px;
    height: auto;
    margin: 10% auto;
    border-radius: 30px;
}

#form,
#emailHelp {
    background: rgb(228, 210, 213);
    opacity: .9;
    color: #121212;
}

#form {
    padding: 40px;
    border-radius: 50px;
}

.sub-btn-p {
    margin: 5% 45% auto 35%;
}

.sub-btn {
    width: 100px;
    padding: 10px;
    color: #FFFFF0;
    background-color: #dc3545;
}

/* Pop up */
/* .popup {
    width: 400px;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    text-align: center;
    padding: 0px 30px 60px;
    color: #000;
    visibility: hidden;
}

.popup img {
    width: 100px;
    margin-top: -40px;
    border-radius: 50%;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.popup h2 {
    font-size: 38px;
    font-weight: 500;
    margin: 30px 0px 10px;
}

.open-popup {
    visibility: visible;
    z-index: 1;
    top: 3300px;
    transform: translate(-50%, -50%) scale(1);
} */

/* Footer */
.f-bg {
    background-color: #dc3545;
    color: #FFFFF0;
    width: 100%;
    height: auto;
    margin: auto;
    padding: 20px;
}

#icons {
    font-size: 20px;
}

/* menu */

.listProduct .item img {
    width: 100%;
    filter: drop-shadow(0 30px 10px rgba(54, 47, 47, 0.6));
    border-radius: 50%;
    margin-bottom: 10px;
}

.listProduct {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.listProduct .item {
    background-color: #EEEEE6;
    padding: 20px;
    border-radius: 20px;
}

.listProduct .item h2 {
    padding: 20px 5px 10px 5px;
    font-weight: 500;
    font-size: large;
}

.listProduct .item .price {
    letter-spacing: 2px;
    margin-bottom: 10px;

}

.listProduct .item button {
    background-color: #dc3545;
    color: #eee;
    font-size: small;
    width: 150px;
    height: 40px;
    border: none;
    padding: 10px 10px;
    margin-top: 10px;
    border-radius: 20px;
}

/* cart */
.cartTab {
    width: 400px;
    padding: 100px 3px 5px 10px;
    background-color: #555;
    color: #eee;
    position: fixed;
    z-index: 1;
    top: 0;
    right: -400px;
    bottom: 0;
    display: grid;
    grid-template-rows: 70px 1fr 70px;
    transition: .5s;
}


body.showCart .cartTab {
    right: 0;
}

.listCart .item img {
    width: 100%;
    border-radius: 50%;
}

.listCart .item {
    display: grid;
    grid-template-columns: 70px 150px 50px 1fr;
    gap: 10px;
    text-align: center;
    align-items: center;
}

.listCart .quantity span {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: #eee;
    border-radius: 50%;
    color: #555;
    cursor: pointer;
}

.listCart .quantity span:nth-child(2) {
    background-color: transparent;
    color: #eee;
    cursor: auto;
}

.listCart .item:nth-child(even) {
    background-color: #eee1;
}

.listCart {
    overflow: auto;
}

.listCart::-webkit-scrollbar {
    width: 0;
}

@media only screen and (max-width: 992px) {
    .nav-icon {
        display: inline;
    }

    .listProduct {
        grid-template-columns: repeat(3, 1fr);
    }

    #booking {
        background-size: cover;
        width: 800px;
    }

    .texts {
        display: none;
    }

    .contact-us {
        display: none;
    }

}


/* mobile */
@media only screen and (max-width: 768px) {
    .nav-icon {
        display: inline;
    }

    .listProduct {
        grid-template-columns: repeat(1, 1fr);
    }

    #menu h1 {
        font-size: 20px;
    }



    .cartTab>.close-btn {
        display: inline;
    }

    #booking {
        background-size: cover;
        width: 400px;
    }

    #booking h1 {
        width: 100px;
        font-size: 15px;
    }


    #filters {
        display: flex;
        justify-content: space-between;
        align-items: center;

    }

    .texts {
        display: none;
    }

    .logo {
        display: none;
    }

    #review h1 {
        width: 100px;
        font-size: 15px;
    }
}

.truck-button {
    --color: #fff;
    --background: #2b3044;
    --tick: #16bf78;
    --base: #0d0f18;
    --wheel: #2b3044;
    --wheel-inner: #646b8c;
    --wheel-dot: #fff;
    --back: #6d58ff;
    --back-inner: #362a89;
    --back-inner-shadow: #2d246b;
    --front: #a6accd;
    --front-shadow: #535a79;
    --front-light: #fff8b1;
    --window: #2b3044;
    --window-shadow: #404660;
    --street: #646b8c;
    --street-fill: #404660;
    --box: #dcb97a;
    --box-shadow: #b89b66;
    padding: 12px 0;
    width: 172px;
    cursor: pointer;
    text-align: center;
    position: relative;
    border: none;
    outline: none;
    color: var(--color);
    background: var(--background);
    border-radius: var(--br, 5px);
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) translateZ(0);
    transition: transform 0.5s, border-radius 0.3s linear var(--br-d, 0s);
}

.truck-button:before,
.truck-button:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 6px;
    display: block;
    background: var(--b, var(--street));
    transform-origin: 0 100%;
    transform: rotateX(90deg) scaleX(var(--sy, 1));
}

.truck-button:after {
    --sy: var(--progress, 0);
    --b: var(--street-fill);
}

.truck-button .default,
.truck-button .success {
    display: block;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    opacity: var(--o, 1);
    transition: opacity 0.3s;
}

.truck-button .success {
    --o: 0;
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
}

.truck-button .success svg {
    width: 12px;
    height: 10px;
    display: inline-block;
    vertical-align: top;
    fill: none;
    margin: 7px 0 0 4px;
    stroke: var(--tick);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: var(--offset, 16px);
    transition: stroke-dashoffset 0.4s ease 0.45s;
}

.truck-button .truck {
    position: absolute;
    width: 72px;
    height: 28px;
    transform: rotateX(90deg) translate3d(var(--truck-x, 4px), calc(var(--truck-y-n, -26) * 1px), 12px);
}

.truck-button .truck:before,
.truck-button .truck:after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: var(--l, 18px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 2;
    box-shadow: inset 0 0 0 2px var(--wheel), inset 0 0 0 4px var(--wheel-inner);
    background: var(--wheel-dot);
    transform: translateY(calc(var(--truck-y) * -1px)) translateZ(0);
}

.truck-button .truck:after {
    --l: 54px;
}

.truck-button .truck .wheel,
.truck-button .truck .wheel:before {
    position: absolute;
    bottom: var(--b, -6px);
    left: var(--l, 6px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--wheel);
    transform: translateZ(0);
}

.truck-button .truck .wheel {
    transform: translateY(calc(var(--truck-y) * -1px)) translateZ(0);
}

.truck-button .truck .wheel:before {
    --l: 35px;
    --b: 0;
    content: '';
}

.truck-button .truck .front,
.truck-button .truck .back,
.truck-button .truck .box {
    position: absolute;
}

.truck-button .truck .back {
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 47px;
    height: 28px;
    border-radius: 1px 1px 0 0;
    background: linear-gradient(68deg, var(--back-inner) 0%, var(--back-inner) 22%, var(--back-inner-shadow) 22.1%, var(--back-inner-shadow) 100%);
}

.truck-button .truck .back:before,
.truck-button .truck .back:after {
    content: '';
    position: absolute;
}

.truck-button .truck .back:before {
    left: 11px;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    border-radius: 0 1px 0 0;
    background: var(--back);
}

.truck-button .truck .back:after {
    border-radius: 1px;
    width: 73px;
    height: 2px;
    left: -1px;
    bottom: -2px;
    background: var(--base);
}

.truck-button .truck .front {
    left: 47px;
    bottom: -1px;
    height: 22px;
    width: 24px;
    -webkit-clip-path: polygon(55% 0, 72% 44%, 100% 58%, 100% 100%, 0 100%, 0 0);
    clip-path: polygon(55% 0, 72% 44%, 100% 58%, 100% 100%, 0 100%, 0 0);
    background: linear-gradient(84deg, var(--front-shadow) 0%, var(--front-shadow) 10%, var(--front) 12%, var(--front) 100%);
}

.truck-button .truck .front:before,
.truck-button .truck .front:after {
    content: '';
    position: absolute;
}

.truck-button .truck .front:before {
    width: 7px;
    height: 8px;
    background: #fff;
    left: 7px;
    top: 2px;
    -webkit-clip-path: polygon(0 0, 60% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 60% 0%, 100% 100%, 0% 100%);
    background: linear-gradient(59deg, var(--window) 0%, var(--window) 57%, var(--window-shadow) 55%, var(--window-shadow) 100%);
}

.truck-button .truck .front:after {
    width: 3px;
    height: 2px;
    right: 0;
    bottom: 3px;
    background: var(--front-light);
}

.truck-button .truck .box {
    width: 13px;
    height: 13px;
    right: 56px;
    bottom: 0;
    z-index: 1;
    border-radius: 1px;
    overflow: hidden;
    transform: translate(calc(var(--box-x, -24) * 1px), calc(var(--box-y, -6) * 1px)) scale(var(--box-s, 0.5));
    opacity: var(--box-o, 0);
    background: linear-gradient(68deg, var(--box) 0%, var(--box) 50%, var(--box-shadow) 50.2%, var(--box-shadow) 100%);
    background-size: 250% 100%;
    background-position-x: calc(var(--bx, 0) * 1%);
}

.truck-button .truck .box:before,
.truck-button .truck .box:after {
    content: '';
    position: absolute;
}

.truck-button .truck .box:before {
    content: '';
    background: rgba(255, 255, 255, .2);
    left: 0;
    right: 0;
    top: 6px;
    height: 1px;
}

.truck-button .truck .box:after {
    width: 6px;
    left: 100%;
    top: 0;
    bottom: 0;
    background: var(--back);
    transform: translateX(calc(var(--hx, 0) * 1px));
}

.truck-button.animation {
    --rx: -90deg;
    --br: 0;
}

.truck-button.animation .default {
    --o: 0;
}

.truck-button.animation.done {
    --rx: 0deg;
    --br: 5px;
    --br-d: 0.2s;
}

.truck-button.animation.done .success {
    --o: 1;
    --offset: 0;
}