*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    color: #000;
    font-family: 'Poppins', 'Courier New';
}

html{
    scroll-snap-type: y mandatory;
}

/* Global */
html::-webkit-scrollbar{
    width: 1px;
    height: 1px;
}
.cart-container::-webkit-scrollbar{
    width: 1px;
    height: 1px;
}
.verification-modal::-webkit-scrollbar{
    width: 1px;
    height: 1px;
}
.confirmation-modal .order-container::-webkit-scrollbar{
    width: 1px;
    height: 1px;
}
section{
    height: 100vh;
    padding: 2.5rem;
}

/* Components */
.primary-btn{
    padding: 10px 30px;
    border: none;
    border-radius: 5px;
    color: #fff;
    background: rgb(157, 75, 37);
    cursor: pointer;
    transition: 0.2s ease-in;
}
.primary-btn:hover{
    opacity: 0.8;
}
.secondary-btn{
    padding: 10px 30px;
    border-radius: 5px;
    color: rgb(157, 75, 37);
    border: 1px solid rgb(157, 75, 37);
    background: #ffffff00;
    cursor: pointer;
    transition: 0.2s ease-in;
}
.secondary-btn:hover{
    color: #fff;
    background: rgb(157, 75, 37);
}
input{
    width: 100%;
    padding: 9px 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
}
input[type="radio"]{
    width: 20px;
    height: 20px;
    accent-color: rgb(157, 75, 37);
}
.modal-section{
    z-index: 2000;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.5);
}  
.modal-container{
    width: 29rem;
    border: 1px solid #ccc;
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 10px;
    background: #fff;
}
.modal-container h6{
    margin: -10px 0 -18px 0;
}
.modal-container p{
    margin: 0 0 -6px 0;
}
.modal-container button{
    width: 100%;
}
.combo-modal{
    display: flex; 
}
.combo-modal .combo-button-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cart-modal-section{
    z-index: 5;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.5);
}  
.confirmation-modal{
    width: 29rem;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    background: #fff;
    gap: 1rem;
    padding: 1rem;
}
.confirmation-modal h6{
    margin: -7px 0 0 0;
}
.confirmation-modal > p{
    margin: -13px 0 -5px 0;
}
.confirmation-modal .order-container{
    width: 100%;
    max-height: 14.1rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.confirmation-modal .order{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: -4px 0 -5px 0;
}
.confirmation-modal .button-container{
    margin: 0 0 0 0;
    width: 100%;
    display: flex;
    gap: 1rem;
}
.confirmation-modal button{
    width: 100%;
}
.confirmation-modal input:last-of-type{
    display: none;
}
.confirmation-modal .total-container{
    border-top: 1px solid #ccc;
    padding-top: 7px;
}
.verification-modal{
    width: 29rem;
    border: 1px solid #ccc;
    display: none;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    background: #fff;
    word-break: break-all;
    /* max-height: 26.26rem; */
    overflow: scroll;
    padding: 1rem;
    gap: 1rem;
}
.verification-modal h6{
    margin: -7px 0 -12px 0;
}
.verification-modal > p:first-of-type{
    margin: 0 0 -6px 0;
}
.verification-modal .qr-code{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid #ccc;
    gap: 1rem;
    padding: 0 0 7px 0;
}
.verification-modal .qr-code  img{
    width: 10rem;
    height: 10rem;
}
.verification-modal .qr-code p:first-of-type{
    margin: -14px 0 -11px 0;
    font-weight: 500 !important;
}
.verification-modal .qr-code p:last-of-type{
    font-weight: 500 !important;
}
.verification-modal > p:last-of-type{
    margin: -4px 0 -6px 0;
}
.verification-modal .image-preview{
    display: none;
    border-radius: 6px;
    width: 100%;
    height: 15rem;
    object-fit: cover;
}
.verification-modal .button-container{
    width: 100%;
    display: flex;
    gap: 1rem;
}
.verification-modal .button-container button{
    width: 100%;
}
.successful-modal{
    width: 29rem;
    border: 1px solid #ccc;
    display: none;
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding: 1rem;
    align-items: center;
    border-radius: 10px;
    background: #fff;
}
.successful-modal h6{
    margin: -7px 0 -12px 0;
}
.successful-modal > p{
    margin: 0 0 -6px 0;
}
.successful-modal .button-container{
    width: 100%;
    display: flex;
    gap: 1rem;
}
.successful-modal .button-container button{
    width: 100%;
}
.loader-container{
    display: none;
}
.loader{
    width: 30px;
    height: 30px;
    border: 6px solid #ccc;
    border-top: 6px solid rgb(157, 75, 37);
    border-radius: 50px;
    animation: spin 2s linear infinite;
}
@keyframes spin{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

/* Navigation Bar */
nav{
    z-index: 1000;
    width: 100%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2.5rem;
    backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.5);
}
.logo{
    transition: 0.2s ease-in;
}
.logo:hover{
    transform: scale(1.1);
}
ul{
    display: flex;
    align-items: center;
    gap: 40px;
}
ul li a{
    padding: 10px 30px;
    border-radius: 5px;
    transition: 0.2s ease-in;
}
ul li a:hover{
    background: rgb(157, 75, 37);
    color: #fff;
}

/* Home */
.home-section{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2.5rem clamp(1rem, -1.1935rem + 8.2581vw, 5rem);;

    max-width: 90rem;
    margin: 0 auto;
}
.home-section p{
    margin: -26px 0 -7px 0;
}

/* Land - Benefit */
.benefit-section{
    height: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2.5rem clamp(1rem, -1.1935rem + 8.2581vw, 5rem);;

    max-width: 90rem;
    margin: 0 auto;
}
.benefit-section > p{
    margin: -26px 0 -7px  0;
}
.card-container{
    display: flex;
    gap: 1rem;
}
.card-container .card{
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.card-container .card .small-1{
    line-height: 27px;
    margin: 1px 0 -9px 0;
}
.card-container .card img{
    width: 24px !important;
    height: 24px !important;
    margin-bottom: -7px;
}

/* About */
.about-section{
    height: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2.5rem clamp(1rem, -1.1935rem + 8.2581vw, 5rem);

    max-width: 90rem;
    margin: 0 auto;
}
.about-section > p{
    margin: -26px 0 -13px  0;
}
.about-container{
    margin: 1.5rem 0 1.5rem 0;
    display: flex;
}
.about-container div{
    width: 100%;
    text-align: center;
    padding: 0 2rem 0 2rem;
}
.about-container div:nth-child(1){
    border-right: 1px solid #ccc;
}
.about-container div p{
    line-height: 28px;
}

/* Testimonial */
.testimonial-section{
    height: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2.5rem clamp(1rem, -1.1935rem + 8.2581vw, 5rem);;

    max-width: 90rem;
    margin: 0 auto;
}
.testimonial-section > p{
    margin: -26px 0 -7px  0;
}
.testimonial-container{
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.testimonial-container .card{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    text-align: start;
    border-radius: 5px;
    border: 1px solid #ccc;
}
.testimonial-container .card .top{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: -5px;
}
.testimonial-container .card .top div p:first-of-type{
    margin-bottom: 5px;
}
.testimonial-container .card img{
    width: 5rem;
    height: 5rem;
    border-radius: 50px;
    object-fit: cover;
    object-position: center;
}
.testimonial-container .card p{
    line-height: 28px;
    height: 100%;
}
.testimonial-container .card .bottom{
    display: flex;
    gap: 0.5rem;
    margin: -9px 0 -9px 0;
}
.testimonial-container .card .bottom span{
    margin-left: -4px;
}

/* Footer */
.footer-section{
    height: auto;
    background: rgb(157, 75, 37);
    padding: 1rem clamp(1rem, -0.9194rem + 7.2258vw, 4.5rem) 1rem clamp(1rem, -0.9194rem + 7.2258vw, 4.5rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.footer-section *{
    color: #fff;
}
.footer-section * img{
    filter: invert(1);
}
.footer-container{
    display: flex;
    gap: 1rem;
}
.footer-container > div{
    width: 100%;
}
.footer-container .card{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.footer-container .card > p:first-of-type{
    margin-bottom: -11px;
}
.kachos div{
    margin-top: -9px;
    display: flex;
    gap: 1rem;
}
.kachos div img{
    margin-right: -10px;
    transition: 0.2s ease-in;
}
.kachos div img:hover{
    opacity: 0.6;
}
.quick div{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.quick div p:nth-child(2){
    margin: -11px 0 -10px 0;
}
.quick div p:nth-child(3){
    margin: 0 0 -10px 0;
}
.quick div p a{
    cursor: pointer;
    transition: 0.2s ease-in;
}
.quick div p a:hover{
    opacity: 0.6;
}
.contact div{
    display: flex;
    align-items: center;
    gap: 1rem;
}
.contact div:nth-of-type(2){
    margin: -10px 0 -10px 0;
}
.contact div img{
    margin-right: -2px;
}
.hour div{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.hour div p:nth-of-type(2){
    margin: -10px 0 -10px 0;
}
.footer-section .copyright{
    border-top: 1px solid #fff;
    margin-top: -7px;
}
.footer-section .copyright p{
    margin-top: 12px;
}

/* Independent About */
.independent-about-section{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8.5rem;
    gap: 1.5rem;
    padding: 2.5rem clamp(1rem, -1.1935rem + 8.2581vw, 5rem);
    
    max-width: 90rem;
    margin: 0 auto;
}
.independent-about-section > div{
    width: 100%;
}
.independent-about-section img{
    object-fit: cover;
    border-radius: 10px;
}
.independent-about-section .left{
    display: flex;
    justify-content: end;
}
.independent-about-section .right{
    padding-right: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1.5rem;
}
.independent-about-section .right h3{
    margin: -12px 0 -21px 0;
}
.independent-about-section .right p:last-of-type{
    margin: -13px 0 -7px 0;
}

/* Independent - Contact */
.independent-contact-section{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2.5rem clamp(1rem, -1.1935rem + 8.2581vw, 5rem);

    max-width: 90rem;
    margin: 0 auto;
}
.independent-contact-section .left img{
    object-fit: cover;
    border-radius: 10px;
}
.independent-contact-section .left iframe{
    object-fit: cover;
    border-radius: 10px;
}
.independent-contact-section .right{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.independent-contact-section .right h3{
    margin: -12px 0 -10px 0;
}
.independent-contact-section .right div{
    display: flex;
    gap: 1rem;
    margin-top: -10px;    
}
.independent-contact-section .right div img{
    margin-right: -4px;
    object-fit: cover;
}
.independent-contact-section .right div:last-of-type{
    margin-bottom: -6px;
}

/* Independent - Menu */
.menu-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem clamp(1rem, -1.1935rem + 8.2581vw, 5rem);

    max-width: 90rem;
    margin: 0 auto;
}
.menu-section > p{
    margin: -13px 0 -6px 0;
}
.menu-container{
    display: flex;
    gap: 1rem;
}
.menu-container .card{
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    text-align: start;
    padding: 1rem;
    gap: 1rem;
}
.menu-container .card img{
    width: 100%;
    height: 12.75rem;
    object-fit: cover;
    object-position: center;
    border-radius: 6px;
}
.menu-container .card .name-price{
    margin: -6px 0 -15px 0;
    display: flex;
    justify-content: space-between;
}
.menu-container .card > p{
    line-height: 28px;
    margin-bottom: -9px;
    height: 100%;
}
.go-back{
    width: 100%;
    text-align: start;
    margin: -4px 0 0 0 !important;
    opacity: 0.6;
    cursor: pointer;
    transition: 0.2s ease-in;
}
.go-back:hover{
    opacity: 0.4;
}

/* Independent - Cart */
.cart-nav{
    position: relative;
    top: 0;
}
.cart-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 1rem clamp(1rem, -1.1935rem + 8.2581vw, 5rem);
   
    max-width: 90rem;
    margin: 0 auto;
}
.cart-section > p{
    margin: -13px 0 -6px 0;
}
.cart-container{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0 0 0;
    border-top: 1px solid #ccc;
    overflow: scroll;

    /* min-height: 25.5rem; */
    min-height: 25.5rem;
}
.cart-card{ 
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
}
.cart-card .remove{
    position: absolute;
    right: 0;
}
.cart-card .quantity-container{
    position: absolute;
    right: 2rem;
}
.cart-card .price{
    position: absolute;
    right: 9.5rem;
}
.cart-card > img:first-of-type{
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}
.cart-card .name-container{ 
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cart-card .label{
    margin: 0 0 -11px 0;
    font-weight: 500 !important;
}
.cart-card .quantity-container{
    display: flex;
    align-items: center;   
    gap: 1rem;
    border: 1px solid #ccc;
    border-radius: 50px;
    padding: 0.5rem;
}
.cart-card .quantity-container p{
    font-weight: 500 !important;
    margin: 0 -7px 0 -7px;
}
.cart-card .quantity-container p, .cart-card .quantity-container img{
    margin: -5px 0 -5px 0;
}
.cart-card .quantity-container img, .cart-card .remove{
    cursor: pointer;
    transition: 0.2s ease-in;
}
.cart-card .quantity-container img:hover, .cart-card .remove:hover{
    opacity: 0.6;
}
.cart-card .price{
    font-weight: 500 !important;
}
.cart-footer{
    width: 100%;
    border-radius: 10px;
    display: flex;
    border: 1px solid #ccc;
    padding: 1rem;
}
.cart-footer .left{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cart-footer .left h6{
    margin: -7px 0 -8px 0;
}
.cart-footer .left div{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cart-footer .right{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cart-footer .right div{
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
}
.cart-footer .right div p:last-child{
    font-weight: 500 !important;
}
.cart-footer .right div:nth-child(1){
    margin: -5px 0 -10px 0;
}
.cart-footer .right div:nth-child(2){
    margin: 0 0 -6px 0;
}
.cart-footer .right div:nth-child(4){
    margin: -6px 0 -6px 0;
}
.horizontal-rule{
    width: 100%;
    height: 1px;
    background: #ccc;
}
.cart-footer .right button{
    padding: 10px 1rem !important;
    display: flex;
    justify-content: space-between;
}
.cart-footer .right button p{
    color: #fff;
}
.cart-footer .right button p:last-of-type{
    font-weight: 500 !important;
}
.cart-footer input, .cart-footer label{
    cursor: pointer;
}
.cart-container .no-items{
    display: none;
    text-align: center;
}

/* Media Queries */
.footer-section img, .independent-contact-section .right img{ /* Icons */
    width: clamp(1.25rem, 1.0862rem + 0.5517vw, 1.5rem) !important;
    height: clamp(1.25rem, 1.0862rem + 0.5517vw, 1.5rem) !important;
}
.remove, .quantity-container img{
    width: clamp(0.875rem, 0.5323rem + 1.2903vw, 1.5rem) !important;
    width: clamp(0.875rem, 0.5323rem + 1.2903vw, 1.5rem) !important;
}
.nav-icon{
    width: clamp(1.25rem, 1.0862rem + 0.5517vw, 1.5rem) !important;
    height: clamp(1.25rem, 1.0862rem + 0.5517vw, 1.5rem) !important;
    cursor: pointer;
    display: none;
}
nav{
    padding: clamp(1rem, 0.3448rem + 2.2069vw, 2rem) clamp(1rem, 0.0172rem + 3.3103vw, 2.5rem) !important;
}
.logo{
    font-size: clamp(1rem, 0.8362rem + 0.5517vw, 1.25rem) !important;
    font-weight: 300 !important;
}
ul li a{
    font-size: clamp(0.75rem, 0.5862rem + 0.5517vw, 1rem) !important;
    font-weight: 300 !important;
}
h1{
    font-size: clamp(2.074rem, 1.5739rem + 1.8828vw, 2.986rem) !important;
    font-weight: 500 !important;
}
p{
    font-size: clamp(0.75rem, 0.6129rem + 0.5161vw, 1rem) !important;
    font-weight: 300 !important;
}
button{
    font-size: clamp(0.75rem, 0.6815rem + 0.2581vw, 0.875rem) !important;
    font-weight: 300 !important;
}
.small-1{
    font-size: clamp(0.694rem, 0.6178rem + 0.287vw, 0.833rem) !important;
    font-weight: 300 !important;
}
.independent-about-section img, .independent-contact-section > div > iframe{
    width: clamp(15.5rem, 8.9194rem + 24.7742vw, 27.5rem) !important;
    height: clamp(10.5rem, 3.9194rem + 24.7742vw, 22.5rem) !important;
}
input{
    font-size: clamp(0.75rem, 0.5862rem + 0.5517vw, 0.875rem) !important;
}
h5{
    font-size: clamp(1.2rem, 1.0684rem + 0.4955vw, 1.44rem) !important;
    font-weight: 500 !important;
}
h3{
    font-size: clamp(1.44rem, 1.0923rem + 1.3089vw, 2.074rem) !important;
    font-weight: 500 !important;
}
.card-container .card p:first-of-type{
    font-weight: 500 !important;
}
.testimonial-container .card .top p:first-of-type{
    font-weight: 500 !important;
}
h6{
    font-size: clamp(0.833rem, 0.6317rem + 0.7577vw, 1.2rem) !important;
    font-weight: 500 !important;
}
.menu-container .card .name-price p{
    font-weight: 500 !important;
}
.cart-bold-label{
    font-weight: 500 !important;
}
.cart-container .card > img:first-of-type{
    width: clamp(5.37rem, 4.2184rem + 4.3355vw, 7.47rem) !important;
    height: clamp(5.37rem, 4.2184rem + 4.3355vw, 7.47rem) !important;
}
.modal-section{
    padding: 1rem clamp(1rem, -1.1935rem + 8.2581vw, 5rem) !important;
} 
.cart-modal-section{
    padding: 1rem clamp(1rem, -1.1935rem + 8.2581vw, 5rem) !important;
}   

@media screen and (max-width: 1024px){
    ul{
        height: 100vh;
        background: rgb(157, 75, 37);
        position: fixed;
        flex-direction: column;
        align-items: start;
        top: 0;
        left: -100%;
        padding: 4.7rem 2rem;
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        transition: 0.5s ease-in-out;
    }
    .move-nav{
        left: 0;
    }
    ul li a{
        color: #fff;
    }
    ul li a:hover{
        background: #fff;
        color: rgb(157, 75, 37);
    }
    .nav-icon:first-child{
        display: flex;
        position: absolute;
        top: 2rem;
        right: 1rem;
        filter: invert(1);
    }
    .nav-icon:last-child{
        display: flex;
    }
    .card-container, .menu-container{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .menu-nav{
        position: sticky;
        top: 0;
    }
    .menu-section{
        height: auto;
    }
}
@media screen and (max-width: 550px){
    .card-container, .menu-container{
        display: flex;
        flex-direction: column;
    }
}
@media screen and (max-width: 765px){
    .about-container{
        flex-direction: column;
    }
    .about-container div:nth-child(1){
        border: none !important;
        border-bottom: 1px solid #ccc !important;
    }
    .about-container div{
        padding: 0.5rem;
    }
    .testimonial-container{
        flex-direction: column;
    }
    .footer-container{
        flex-direction: column;
    }
    .kachos{
        margin-bottom: -10px;
    }
    .quick, .contact, .hour{
        padding: 1rem 0 0 0;
        border-top: 1px solid #ccc;
    }
    .hour{
        padding: 1rem 0 0.5rem 0 !important;
    }

    .independent-about-section, .independent-contact-section{
        flex-direction: column;
    }
    .independent-about-section .left{
        justify-content: center;
    }
    .independent-about-section .right, .independent-contact-section .right{
        padding: 0;
        align-items: center;
        text-align: center;
    }

    .cart-section{
        height: auto !important;
    }
    .cart-footer{
        flex-direction: column;
    }
    .cart-footer .right{
        margin-top: 10px;
        border-top: 1px solid #ccc;
        padding-top: 1rem;
        width: 100%;
    }
    .cart-container .card .price{
        bottom: 0;
        left: 0;
        padding-left: clamp(6.4rem, 5.6988rem + 3.3488vw, 7.3rem) !important;
    }
    .cart-card .quantity-container{
        padding: clamp(0.3rem, 0.1442rem + 0.7442vw, 0.5rem) !important;
    }
}