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;
}

.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;
}