cart.css

:root {
    --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
        "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
        "Source Han Sans CN", sans-serif;
}
@media (max-width: 768px) {
    .container {
        display: flex;
        justify-content: center;
    }

    .logimg {
        display: block;
        margin: 0 auto;
    }
    .ltext{
        color:rgb(255,99,71);
        font-weight:500;
    }
    .vector, .vector-16, .vector-19 {
        display: none;
      }
 .rectangle-14, .rectangle-17, .rectangle-1a, .cartbtn-1 ,.cartbtn-2 ,.cartbtn-3{
        display:none;
 }
    .sign-up-overlay{
        margin-top:10px;
    }
    .enter-details{
        margin-top:20px;
    font-weight: 600;
    font-size: 28px;
    justify-content: center;
    align-items: center;
    margin-left:70px;
    }
    .label,.address-label,.email-label,.phone-no-label,.label-9,.label-c,.label-f,.label-12{
         margin-left:10px;
         font-size:20px;
         font-weight:500;
    }
    .tfield{
    margin-bottom: 10px;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    min-width: 0;
    height: 49.69px;
    border: 0.89px solid black;
    z-index: 7;
    overflow: hidden;
    border-radius: 10.648px;
    margin-left:10px;
    margin-right:10px;
    }
    .flex-row {
        margin-top:10px;
        margin-left:90px;
        margin-right: 90px;
        flex-direction: column;  
      }
    
      .button, .button-15, .button-div {
        width: auto; 
        margin-bottom: 0;  
      }

      .button, .button-15, .button-div {
        background-color: rgb(214,32,78);
        border: 1px solid #ffffff;
        border-radius: 10px;  
        padding: 10px 20px; 
        color: #ffffff;
        font-family: Poppins, sans-serif;
        margin-bottom:10px;
      }
    

      .empty-cart {
        margin-left:25px;
        font-size: 20px;  
      }
      .checkout, .continue-span {
        margin-left:35px;
        font-size: 20px;  
      }
}
@media (min-width:768px){
.main-container {
    overflow: hidden;
    background-size: cover;
}

.main-container,
.main-container * {
    background-size: cover;
    box-sizing: border-box;
}

input,
select,
textarea,
button {
    outline: 0;
}


.main-container {
    position: relative;
    width: 1440px;
    height: 1024px;
    margin: 0 auto;
    background: #ffffff;
    overflow: hidden;
    background-size: cover;
    object-fit: fill;
    background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        background-attachment: fixed;
}

.image {
    position: absolute;
    width: 1445px;
    height: 1024px;
    top: 0;
    left: 0;
    background: #ffffff;
    overflow: hidden;
    background: linear-gradient(132deg, #FC415A, #1cd98a, #014137);
        background-size: 400% 400%;
        animation: Gradient 15s ease infinite;
}
.cube {
    position: absolute;
    top: 80vh;
    left: 45vw;
    width: 10px;
    height: 10px;
    border: solid 1px #D7D4E4;
    transform-origin: top left;
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    animation: cube 12s ease-in forwards infinite;
}

.cube:nth-child(2n) {
    border-color: #FFF;
}

.cube:nth-child(2) {
    animation-delay: 2s;
    left: 25vw;
    top: 40vh;
}

.cube:nth-child(3) {
    animation-delay: 4s;
    left: 75vw;
    top: 50vh;
}

.cube:nth-child(4) {
    animation-delay: 6s;
    left: 90vw;
    top: 10vh;
}

.cube:nth-child(5) {
    animation-delay: 8s;
    left: 10vw;
    top: 85vh;
}

.cube:nth-child(6) {
    animation-delay: 10s;
    left: 50vw;
    top: 10vh;
}
@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes cube {
    from {
        transform: scale(0) rotate(0deg) translate(-50%, -50%);
        opacity: 1;
    }

    to {
        transform: scale(20) rotate(960deg) translate(-50%, -50%);
        opacity: 0;
    }
}
.sign-up-overlay {
    position: relative;
    
    width: 795px;
    height: 806px;
    margin: 109px 0 0 323px;
    font-size: 0px;
    background: #ffffff;
    z-index: 2;
    overflow: hidden;
    border-radius: 24px;
}

.enter-details {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 281px;
    height: 48px;
    margin: 65px 0 0 256px;
    color: #333333;
    font-family: Poppins, var(--default-font-family);
    font-size: 32px;
    font-weight: 500;
    line-height: 48px;
    text-align: center;
    white-space: nowrap;
    z-index: 3;
}

.text-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 3.549px;
    position: relative;
    width: 504px;
    margin: 39px 0 0 145px;
    z-index: 4;
}

.frame {
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    min-width: 0;
    height: 23.958px;
    z-index: 5;
}

.label {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 21px;
    top: 0;
    left: 0;
    color: #666666;
    font-family: Poppins, var(--default-font-family);
    font-size: 14.197183609008789px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    white-space: nowrap;
    z-index: 6;
}

.text-field-1 {
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    min-width: 0;
    height: 49.69px;
    border: 0.89px solid rgba(102, 102, 102, 0.35);
    z-index: 7;
    overflow: hidden;
    border-radius: 10.648px;
}

.text-field-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 3.549px;
    position: relative;
    width: 504px;
    margin: 22.803px 0 0 145px;
    z-index: 8;
}

.frame-3 {
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    min-width: 0;
    height: 23.958px;
    z-index: 9;
}

.address-label {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    height: 21px;
    top: 0;
    left: 0;
    color: #666666;
    font-family: Poppins, var(--default-font-family);
    font-size: 14.197183609008789px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    white-space: nowrap;
    z-index: 10;
}

.text-field-4 {
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    min-width: 0;
    height: 49.69px;
    border: 0.89px solid rgba(102, 102, 102, 0.35);
    z-index: 11;
    overflow: hidden;
    border-radius: 10.648px;
}

.flex-row-aefd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 529px;
    height: 74.55px;
    margin: 23.803px 0 0 135px;
    z-index: 27;
}

.text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 3.55px;
    position: relative;
    width: 252px;
    z-index: 12;
}

.email-label {
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    height: 21px;
    color: #666666;
    font-family: Poppins, var(--default-font-family);
    font-size: 14.197183609008789px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    white-space: nowrap;
    z-index: 13;
}

.text-field-5 {
    flex-shrink: 0;
    position: relative;
    width: 252px;
    height: 50px;
    border: 0.89px solid rgba(102, 102, 102, 0.35);
    z-index: 14;
    overflow: hidden;
    border-radius: 10.648px;
}

.text-6 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 3.55px;
    position: relative;
    width: 252px;
    z-index: 27;
}

.phone-no-label {
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    height: 21px;
    color: #666666;
    font-family: Poppins, var(--default-font-family);
    font-size: 14.197183609008789px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    white-space: nowrap;
    z-index: 28;
}

.text-field-7 {
    flex-shrink: 0;
    position: relative;
    width: 252px;
    height: 50px;
    border: 0.89px solid rgba(102, 102, 102, 0.35);
    z-index: 29;
    overflow: hidden;
    border-radius: 10.648px;
}

.flex-row-f {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 529px;
    height: 74.55px;
    margin: 20.45px 0 0 135px;
    z-index: 24;
}

.text-8 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 3.55px;
    position: relative;
    width: 252px;
    z-index: 24;
}

.label-9 {
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    height: 21px;
    color: #666666;
    font-family: Poppins, var(--default-font-family);
    font-size: 14.197183609008789px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    white-space: nowrap;
    z-index: 25;
}

.text-field-a {
    flex-shrink: 0;
    position: relative;
    width: 252px;
    height: 50px;
    border: 0.89px solid rgba(102, 102, 102, 0.35);
    z-index: 26;
    overflow: hidden;
    border-radius: 10.648px;
}

.text-b {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 3.55px;
    position: relative;
    width: 252px;
    z-index: 15;
}

.label-c {
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    height: 21px;
    color: #666666;
    font-family: Poppins, var(--default-font-family);
    font-size: 14.197183609008789px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    white-space: nowrap;
    z-index: 16;
}

.text-field-d {
    flex-shrink: 0;
    position: relative;
    width: 252px;
    height: 50px;
    border: 0.89px solid rgba(102, 102, 102, 0.35);
    z-index: 17;
    overflow: hidden;
    border-radius: 10.648px;
}

.flex-row-e {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 529px;
    height: 74.55px;
    margin: 19.45px 0 0 135px;
    z-index: 21;
}

.text-e {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 3.55px;
    position: relative;
    width: 252px;
    z-index: 18;
}

.label-f {
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    height: 21px;
    color: #666666;
    font-family: Poppins, var(--default-font-family);
    font-size: 14.197183609008789px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    white-space: nowrap;
    z-index: 19;
}

.text-field-10 {
    flex-shrink: 0;
    position: relative;
    width: 252px;
    height: 50px;
    border: 0.89px solid rgba(102, 102, 102, 0.35);
    z-index: 20;
    overflow: hidden;
    border-radius: 10.648px;
}

.text-11 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 3.55px;
    position: relative;
    width: 252px;
    z-index: 21;
}

.label-12 {
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    height: 21px;
    color: #666666;
    font-family: Poppins, var(--default-font-family);
    font-size: 14.197183609008789px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    white-space: nowrap;
    z-index: 22;
}

.text-field-13 {
    flex-shrink: 0;
    position: relative;
    width: 252px;
    height: 50px;
    border: 0.89px solid rgba(102, 102, 102, 0.35);
    z-index: 23;
    overflow: hidden;
    border-radius: 10.648px;
}

.flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 594px;
    height: 72px;
    margin: 51.45px 0 0 101px;
    z-index: 40;
}

.button {
    flex-shrink: 0;
    position: relative;
    width: 176px;
    height: 72px;
    z-index: 30;
}

.cartbtn-1 {
    position: absolute;
    width: 176px;
    height: 56px;
    top: 0;
    left: 0;
    cursor: pointer;
    background: #eb3581;
    border: none;
    z-index: 32;
    border-radius: 8px;
}

.vector {
    position: absolute;
    width: 11.36%;
    height: 27.78%;
    top: 25%;
    left: 10.23%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M17 18c-1.11 0-2 .89-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2M1 2v2h2l3.6 7.59l-1.36 2.45c-.15.28-.24.61-.24.96a2 2 0 0 0 2 2h12v-2H7.42a.25.25 0 0 1-.25-.25q0-.075.03-.12L8.1 13h7.45c.75 0 1.41-.42 1.75-1.03l3.58-6.47c.07-.16.12-.33.12-.5a1 1 0 0 0-1-1H5.21l-.94-2M7 18c-1.11 0-2 .89-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% 100%;
    z-index: 34;
}

.empty-cart {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    height: 18px;
    top: 19px;
    left: 50px;
    color: #ffffff;
    font-family: Poppins, var(--default-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    white-space: nowrap;
    letter-spacing: 0.9px;
    z-index: 33;
}

.rectangle-14 {
    position: absolute;
    width: 128px;
    height: 44px;
    top: 28px;
    left: 24px;
    background: rgba(233, 118, 187, 0.8);
    filter: blur(12px);
    z-index: 31;
    border-radius: 8px;
}

.button-15 {
    flex-shrink: 0;
    position: relative;
    width: 176px;
    height: 72px;
    z-index: 35;
}

.cartbtn-2 {
    position: absolute;
    width: 176px;
    height: 56px;
    top: 0;
    left: 0;
    cursor: pointer;
    background: #eb3581;
    border: none;
    z-index: 37;
    border-radius: 8px;
}

.vector-16 {
    position: absolute;
    width: 11.76%;
    height: 27.78%;
    top: 25%;
    left: 10.8%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m12 10l-1.4-1.4L12.175 7H8V5h4.175l-1.6-1.6L12 2l4 4zM7 22q-.825 0-1.412-.587T5 20t.588-1.412T7 18t1.413.588T9 20t-.587 1.413T7 22m10 0q-.825 0-1.412-.587T15 20t.588-1.412T17 18t1.413.588T19 20t-.587 1.413T17 22M1 4V2h3.275l4.25 9h7l3.9-7H21.7l-4.4 7.95q-.275.5-.737.775T15.55 13H8.1L7 15h12v2H7q-1.125 0-1.713-.975T5.25 14.05L6.6 11.6L3 4z'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% 100%;
    z-index: 39;
}

.checkout {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    height: 18px;
    top: 19px;
    left: 54px;
    color: #ffffff;
    font-family: Poppins, var(--default-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    white-space: nowrap;
    letter-spacing: 0.9px;
    z-index: 38;
}

.rectangle-17 {
    position: absolute;
    width: 128px;
    height: 44px;
    top: 28px;
    left: 24px;
    background: rgba(233, 118, 187, 0.8);
    filter: blur(12px);
    z-index: 36;
    border-radius: 8px;
}

.button-div {
    flex-shrink: 0;
    position: relative;
    width: 176px;
    height: 72px;
    z-index: 40;
}

.cartbtn-3 {
    position: absolute;
    width: 176px;
    height: 56px;
    top: 0;
    left: 0;
    text-align: center;
    cursor: pointer;
    background: #eb3581;
    border: none;
    z-index: 42;
    border-radius: 8px;
}

.vector-19 {
    position: absolute;
    width: 11.36%;
    height: 27.78%;
    top: 25%;
    left: 7.95%;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.13em' height='1em' viewBox='0 0 27 24'%3E%3Cpath fill='white' d='M25.714 10.286h.027c.465 0 .885.192 1.185.502c.31.301.502.721.502 1.186v.028v-.001v.027c0 .465-.192.885-.502 1.185c-.301.31-.721.502-1.186.502h-.028h.001h-.201l-1.541 8.869a1.655 1.655 0 0 1-.587 1.015l-.003.002c-.29.249-.67.401-1.085.401H5.129c-.415 0-.795-.152-1.087-.403l.002.002a1.654 1.654 0 0 1-.588-1.008l-.001-.01l-1.541-8.869h-.228c-.465 0-.885-.192-1.185-.502a1.647 1.647 0 0 1-.502-1.186v-.054c0-.465.192-.885.502-1.185c.301-.31.721-.502 1.186-.502h.028h-.001zM6.491 21a.823.823 0 0 0 .581-.3l.001-.001a.823.823 0 0 0 .208-.626v.003l-.429-5.572a.823.823 0 0 0-.3-.581l-.001-.001a.823.823 0 0 0-.626-.208h.003a.823.823 0 0 0-.581.3l-.001.001a.823.823 0 0 0-.208.626v-.003l.429 5.572a.827.827 0 0 0 .274.562l.001.001a.83.83 0 0 0 .572.228h.011h-.001zm5.505-.856v-5.58a.816.816 0 0 0-.254-.594a.82.82 0 0 0-.595-.254h-.016a.816.816 0 0 0-.594.254a.82.82 0 0 0-.254.595v5.588c0 .234.097.445.254.594a.82.82 0 0 0 .595.254h.016a.816.816 0 0 0 .594-.254a.82.82 0 0 0 .258-.598v-.006zm5.143 0v-5.58a.816.816 0 0 0-.254-.594a.82.82 0 0 0-.595-.254h-.016a.816.816 0 0 0-.594.254a.82.82 0 0 0-.254.595v5.588c0 .234.097.445.254.594a.82.82 0 0 0 .595.254h.016a.816.816 0 0 0 .594-.254a.82.82 0 0 0 .258-.598v-.006zm4.714.066l.429-5.572a.83.83 0 0 0-.208-.624l.001.001a.826.826 0 0 0-.58-.302h-.003a.83.83 0 0 0-.624.208l.001-.001a.826.826 0 0 0-.302.58v.003l-.429 5.572a.83.83 0 0 0 .208.624l-.001-.001a.826.826 0 0 0 .58.302h.08a.834.834 0 0 0 .573-.228a.83.83 0 0 0 .279-.564v-.003zM6.375 3.91L5.13 9.428H3.362l1.352-5.906c.163-.785.59-1.45 1.182-1.915l.007-.005A3.332 3.332 0 0 1 8.01.858h.038h-.002h2.236V.85c0-.234.097-.445.254-.594a.821.821 0 0 1 .596-.255h5.162c.234 0 .445.097.594.254a.82.82 0 0 1 .254.595v.008h2.273c.801 0 1.536.28 2.112.748l-.006-.005A3.262 3.262 0 0 1 22.706 3.5l.004.021l1.352 5.906h-1.768l-1.245-5.518a1.767 1.767 0 0 0-.606-.962l-.003-.003a1.638 1.638 0 0 0-1.046-.375h-2.255v.008a.816.816 0 0 1-.254.594a.82.82 0 0 1-.595.254h-5.158a.816.816 0 0 1-.594-.254a.82.82 0 0 1-.254-.595v-.008H8.029a1.64 1.64 0 0 0-1.048.377l.003-.002a1.76 1.76 0 0 0-.603.954l-.002.012z'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% 100%;
    z-index: 44;
}

.continue-span {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 18px;
    top: 19px;
    left: 54px;
    color: #ffffff;
    font-family: Poppins, var(--default-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.9px;
    z-index: 43;
}

.rectangle-1a {
    position: absolute;
    width: 128px;
    height: 44px;
    top: 28px;
    left: 24px;
    background: rgba(233, 118, 187, 0.8);
    filter: blur(12px);
    z-index: 41;
    border-radius: 8px;
}

.rectangle-1b {
    position: absolute;
    width: 1445px;
    height: 1024px;
    top: 0;
    left: -5px;
    background: url(./assets/images/0cbc8e85478cf92edf852aba358f8275bf3f85f9.png) no-repeat center;
    background-size: cover;
    z-index: 1;
}
}
/* new cart css */
.cart-background {
    position: relative;
    background-color: #1cd98a;
    border-radius: 10px;
    background: url("https://marketplace.canva.com/EAFnfGcKtiM/1/0/800w/canva-green-illustrative-organic-plant-zoom-virtual-background-5jgOKxZFOf4.jpg");
    background-size: cover;
    text-align: center;
    justify-content: center;
    margin: 30px;
    padding: 30px 20px;
    overflow: hidden; /* Ensure the pseudo-element doesn't overflow */
}

.cart-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(17, 126, 5, 0.148); /* Semi-transparent white overlay */
    border-radius: inherit; /* Match the border-radius of the parent */
    z-index: 1; /* Ensure the overlay is on top */
}

.cart-background > * {
    position: relative;
    z-index: 2; /* Ensure the content is above the overlay */
}
.cart-background h1{
   color: white;
}
.cart-table{
    overflow-x: auto;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.item-detail img{
  width: 3.5rem;
  border-radius: 50%;
  border:2px solid rgb(2, 62, 2);
}
.items-container{
    position: relative;
    text-align: -webkit-center;
    overflow: auto;
    max-height: 50vh;
  min-width: 800px;
   
}
.cartlist:first-child{
    border-top:2px solid #baffac ;
    margin-top: 50px;
    
}
.cartlist{
    display: flex;
    text-align: left;
    color: #fafafa;
    justify-content: space-around;
    align-items: center;
    width: 80%;
    border-bottom:2px solid #baffac;
    align-items: center;
    padding: 5px;
}
.cartlist span{
    font-size: 1.5rem;
}
.cartlist button:focus {
    outline: none;
}
.item-detail{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 70%;
    margin: 10px;
}
.cartlist button{
    background-color: transparent;
    color: white;
    border: none;
    border-radius: 5px;
    margin: 10px;
    cursor: pointer;
    width: 30%;

}
.item-quantity{
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 2px solid #bfffa1;
    border-radius: 30px;
    height: 30px;
}
#subtotal{
    margin-top: 20px;
    color: rgb(169, 255, 199);
    font-weight: bold;
    font-size: 1.5rem;
    padding: 20px;
}
.items-container::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  .items-container::-webkit-scrollbar-track {
    background: #cef9d4;
    border: 1px solid #004b08;
  }
  
  /* Handle */
  .items-container::-webkit-scrollbar-thumb {
    border: 1px solid #004b08;
    background: #004b08;
  }
  
  /* Handle on hover */
  .cart-table::-webkit-scrollbar-thumb:hover {
    border: 1px solid #004b08;
    background: #004b08;
  }
  .cart-table::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  .cart-table::-webkit-scrollbar-track {
    background: #cef9d4;
    border: 1px solid #004b08;
  }
  
  /* Handle */
  .cart-table::-webkit-scrollbar-thumb {
    border: 1px solid #004b08;
    background: #004b08;
  }
  
  /* Handle on hover */
  .cart-table::-webkit-scrollbar-thumb:hover {
    border: 1px solid #004b08;
    background: #004b08;
  }

  .buttons-1 {
    display: flex;
    gap: 10px;
    justify-content: center;
  }

  .order_now_button{
  padding: 10px 20px;
  font-size: 20px;
  background-color:rgb(244, 244, 244);
  color:#004b08;
  font-weight: bold;
  border-radius:6px;
  display: inline-block;
  text-align: center;
  position: relative;
  color: #004b08;
  text-decoration: none;
  transition: 0.2s ease all;
  z-index: 1;
  
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  transform: translateY(-3px);

  }

  .order_now_button:hover{
    background-color:#ffd386;
    color:#014137;
    transition: 0.2s all ease;
    box-shadow: 2px 2px 0px #ddffbf;
  transform: translateY(-5px);

  }