html {
    height: 100%;
    overflow: auto;
}
body {
    height: 100%;
}
.text-120px {
    font-size: 120px;
    line-height: 120px;
}

.text-10px {
    font-size: 10px;
}

.text-yellow {
    color: #F3CFB2;
}

.bg-categorymenu {
    overflow: auto;
}

.letter-spacing {
    letter-spacing: 4px;
}

.bottom-arrow-button {
    background-image: url(/img/Purple_c.png);
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#_dm_main_menu_modal,
#_dm_instructions_modal {
    /* top: calc(15% - 0.875rem);
    left: calc((100% - 70%) / 2); */
    /* overflow-y: hidden; */
    /* width: 70%; */
    /* height: 70%; */
    opacity: 0.8;
    border-radius: 38.6px;
}

#_dm_instructions_modal {
    /* height: 80%;
    top: calc(10% - 0.875rem); */
}

.dm-modal-content {
    background-color: rgba(85, 85, 85, 0.40);
    box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.90) !important;
    border-radius: 38.6px;
    padding: 0.5rem;
}

.bg-gray-900 {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.dm_menu_item {
    /* width: 100px;
    height: 100px; */
    padding: 1.0rem;
    border-radius: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: 0.5rem;
    box-shadow: 2px 4px 5px #000000a2;
    cursor: pointer;
    justify-self: center;
}

.milk_tea_menu_item {
    background-color: #F3CFB2;
}

.fruity_menu_item {
    background-color: #D9B7E2;
}

.signature_menu_item {
    background-color: #FA7598;
}

.dessert_menu_item {
    background-color: #A67EB1;
}

.milkshake_menu_item {
    background-color: #8D90D5;
}

#_dm_main_menu_modal .dm-modal-content {
    max-height: 700px;
    /* overflow-y: scroll; */
}

.dm_modal {
    padding: 0.75rem;
    transform: translate3d(0, 0, 0);
}

.dm_modal_close_btn {
    background: url('/img/Exit button.svg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 65px;
    height: 65px;
    top: -20px;
    right: -15px;
}
.w-27px {
    width: 27px;
}
.h-27px {
    height: 27px;
}
button.slick-prev.slick-arrow {
    left: 0px;
    top: 0px;
}

button.slick-next.slick-arrow {
    right: 0px;
    top: 0px;
}

.slick-prev,
.slick-next {
    z-index: 9;
}

@media (max-width: 640px) and (min-width: 320px) {
    #_dm_main_menu_modal {
        /* width: 90%; */
        /* height: 65%;
        left: 5%;
        top: calc(17.5% - 0.875rem); */
    }

    #_dm_instructions_modal {
        /* width: 90%;
        height: 80%;
        left: 5%;
        top: calc(10% - 0.875rem); */
    }

    .dm_modal_close_btn {
        width: 50px;
        height: 50px;
    }
}

.slick-container {
    width: 72%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 55px;
}

@media (max-width: 767px) {
    #proDescp {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        line-height: 20px;
    }

    .slick-container {
        width: 100%;
    }
}

.dm_navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item-point-circle {
    border-radius: 25px;
    /* height: 40px;
    width: 40px; */
    background-color: #FA7598;
}

#dm_category_screen {
    /* background: url('/img/common_wave.svg') !important; */
    background-position: top;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    margin-top: 100px;
    background-origin: content-box;
    height: 300px;
}

.ice_descp h5 {
    height: calc(20px + 0.85rem);
    padding-top: 0.425rem;
}

.abs_top_img,
.dm_navbar_container {
    /* background-image: url('/img/cat_top_img.svg'); */
    width: 100%;
    position: absolute;
    z-index: -9;
    transition: background-color 0.3s ease-in-out;
}

.dm_navbar_container {
    z-index: 9;
}

.white_dash {
    /* background-color: #fff; */
    height: 3px;
    width: 50px;
    border-radius: 20px;
    position: relative;
}

.spacer {
    height: 19px;
}

.w-50px {
    width: 50px;
}

.h-50px {
    height: 50px;
}

.w-40px {
    width: 40px;
}

.h-40px {
    height: 40px;
}

.w-45px {
    width: 45px;
}

.h-45px {
    height: 45px;
}

.w-35px {
    width: 35px;
}

.h-35px {
    height: 35px;
}

.w-30px {
    width: 30px;
}

.h-30px {
    height: 30px;
}

.dm_customize_btn {
    min-width: 170px;
    background-color: #FA7598;
    color: white;
    /* box-shadow: inset 0px 0px 0px 2px rgba(255,255,255,0.54); */
    /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
    padding: 8px 1.5rem;
    border-radius: 25px;
    line-height: 20px;
}

.w-120px {
    width: 120px;
}

.w-140px {
    width: 140px;
}

.w-180px {
    width: 180px;
}

.text-18px {
    font-size: 18px;
}
.text-14px {
    font-size: 13.3px;
}
.text-20px {
    font-size: 20px;
}
.text-22px {
    font-size: 22px;
}
.text-26px {
    font-size: 26px;
}
@media (max-width: 767px) and (min-width: 500px) {
    .sm\:w-180px {
        width: 180px;
    }

    .sm\:w-140px {
        width: 140px;
    }

    .sm\:w-120px {
        width: 120px;
    }

    .sm\:w-50px {
        width: 50px;
    }

    .sm\:h-50px {
        height: 50px;
    }

    .sm\:w-40px {
        width: 40px;
    }

    .sm\:h-40px {
        height: 40px;
    }

    .sm\:w-45px {
        width: 45px;
    }

    .sm\:h-45px {
        height: 45px;
    }

    .sm\:w-35px {
        width: 35px;
    }

    .sm\:h-35px {
        height: 35px;
    }

    .sm\:w-30px {
        width: 30px;
    }

    .sm\:h-30px {
        height: 30px;
    }

    .sm\:text-18px {
        font-size: 18px;
    }

    .sm\:text-20px {
        font-size: 20px;
    }

    .sm\:text-24px {
        font-size: 24px;
    }

    .sm\:text-28px {
        font-size: 28px;
    }
}

@media (min-width: 768px) {
    .md\:w-140px {
        width: 140px;
    }

    .md\:w-120px {
        width: 120px;
    }

    .md\:w-180px {
        width: 180px;
    }

    .md\:w-50px {
        width: 50px;
    }

    .md\:h-50px {
        height: 50px;
    }

    .md\:w-40px {
        width: 40px;
    }

    .md\:h-40px {
        height: 40px;
    }

    .md\:w-45px {
        width: 45px;
    }

    .md\:h-45px {
        height: 45px;
    }

    .md\:w-35px {
        width: 35px;
    }

    .md\:h-35px {
        height: 35px;
    }

    .md\:w-30px {
        width: 30px;
    }

    .md\:h-30px {
        height: 30px;
    }

    .abs_top_img {
        background-size: cover;
        background-repeat: no-repeat;
    }

    .md\:text-18px {
        font-size: 18px;
    }

    .md\:text-22px {
        font-size: 22px;
    }

    .md\:text-20px {
        font-size: 20px;
    }

    .md\:text-24px {
        font-size: 24px;
    }

    .md\:text-28px {
        font-size: 28px;
    }
}

.slick-next:before {
    position: absolute;
    top: 130px;
    right: 10px;
    font-size: 45px;
    -webkit-mask-image: url('/img/Right Button.svg');
          mask-image: url('/img/Right Button.svg');
    -webkit-mask-size: cover;
          mask-size: cover;
    width: 40px;
    height: 40px;
    /* z-index: 999; */
    /*content: attr(data-slick-next);*/
}

.slick-prev:before {
    position: absolute;
    top: 130px;
    left: 10px;
    font-size: 45px;
    -webkit-mask-image: url('/img/Left Button.svg');
          mask-image: url('/img/Left Button.svg');
    -webkit-mask-size: cover;
          mask-size: cover;
    width: 40px;
    height: 40px;
    /* content: attr(data-slick-prev);*/
    /* z-index: 999; */
}
.slick-prev:before, .slick-next:before {
    color: unset;
}
.slick-slide img {
    margin: auto;
    transition: all 0.2s ease-in-out;
    opacity: 0.5;
    transform: scale(0.6);
}

.slick-slide.slick-current img {
    opacity: 1;
    transform: scale(1);
}

.white_dash::after {
    content: '';
    position: absolute;
    bottom: 25px;
    left: 65px;
    width: 60px;
    height: 60px;
    background: url('/img/customize icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

@media (max-width: 1200px) {
    .slick-next:before {
        top: 270px;
        right: 10px;
    }

    .slick-prev:before {
        top: 270px;
        left: 10px;
    }

    .white_dash::after {
        width: 50px;
        height: 50px;
        left: 50px;
    }

    /* .boba_instruction {
        width: 40px;
        height: 40px;
        top: calc(50% - 40px);
        left: calc(50% + 15px);
    } */
    #dm_category_screen {
        /* background: url("/img/mobile_wave.svg") !important; */
        background-repeat: no-repeat !important;
        background-size: cover !important;
        margin-top: 75px;
    }
}

@media (max-width: 768px)  {
    .slick-container {
        margin-top: 55px;
    }
}

@media (max-width: 425px) {
    .slick-container {
        margin-top: 25px;
    }
}

@media (max-width: 640px) {
    .slick-next:before, .slick-prev:before {
        right: 10px;
        top: 242px;
    }

    #dm_category_screen {
        margin-top: 85px;
    }
}

@media (max-width: 450px) {
    .slick-next:before {
        font-size: 40px;
        right: 30px;
    }

    .slick-prev:before {
        left: 25px;
        font-size: 40px;
    }
}

.slick-slide .slick_bg {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform: scale(0);
    transform-origin: center;
    transition: all 0.3s ease-in-out;
}

.slick-slide.slick-current .slick_bg {
    transform: scale(1);
}

.bottomMenuSection {
    max-width: 700px;
    margin: auto;
    margin-top: 30px;
    column-gap: 0.75rem;
    height: 50px
}

.flavorsContent {
    max-width: 700px;
    margin: auto;
    column-gap: 0.75rem;
}

.prevCat,
.nextCat {
    background-color: rgba(170, 151, 184);
    width: 50px;
    height: 50px;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    /* box-shadow: 0px 4px 4px rgba(85,85,85,0.8); */
}

.prevCat {
    transform: rotate(-15deg);
}

.nextCat {
    transform: rotate(15deg);
}

.prevCat:hover,
.nextCat:hover {
    background: #FA7598;

    border-radius: 55%;
}

.prevCat img,
.nextCat img {
    height: 50%;
    width: auto;
}

.bg-gray-900 {
    z-index: 999;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
img {
    position: unset;
    z-index: unset;
}

.text-shadow {
    text-shadow: 0px 1px 1px rgba(0,0,0,0.25)
}
.digitalmenu_pink_wavy {
    background-image: url("/img/digitalmenu_pink_wavy.svg");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    height: 250px;
    width: 100%;
    bottom: -50px;
}

.dmRaibow {
    transform: rotate(-5deg) scale(1.1);
    top: 15%;
    left: 8%;
}

.dmIceCream {
    transform: rotate(-19deg) scale(1.1);
    top: 40%;
    left: 20%;
}

.dmBubble {
    transform: rotate(-5deg) scale(1.1);
    top: 60%;
    left: 5.5%;
}

.dmWaffle {
    transform: rotate(15deg) scale(1.1);
    top: 40%;
    left: 75%
}

.dmCup {
    transform: rotate(10deg) scale(1.1);
    top: 15%;
    left: 85%;
}

@media (max-width: 768px) {
    .dmpic {
        width: 260px;
    }

    .digitalmenu_pink_wavy {
        width: 100%;
    }

    .desktop-icon {
        display: none;
    }

    .dmRaibow {
        transform: rotate(-5deg) scale(1.4);
        top: 0px;
        right: 15%;
    }

    .dmBubble {
        top: 56%;
        left: 9%;
        transform: rotate(-5deg) scale(1.4);
    }
}

@media (max-width: 960px) {
    .dmBubble {
        transform: rotate(-5deg) scale(1.3);
        left: 5.5%;
    }
}

@media (max-width: 768px) {
    .dmBubble {
        transform: rotate(-5deg) scale(1.3);
        top: 2.0%;
        left: 70%;
    }
}

@media (max-width: 480px) {

    /* pic */
    .dmpic {
        width: 200px;
    }

    .digitalmenu_pink_wavy {
        width: 100%;
    }

    .desktop-icon {
        display: none;
    }

    .dmRaibow {
        transform: rotate(-5deg);
        top: 0px;
        right: 15%;
    }

    .dmBubble {
        top: 2%;
        left: 70%;
        transform: rotate(-5deg);
    }

    .bottomMenuSection {
        margin-top: 30px;
    }

    .slick-slide {
        margin: auto;
    }
}



@keyframes animatedBackground {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.slick__item {
    background-position: center;
    background-size: contain;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    animation: animatedBackground 0.4s;
}

.singleSlick .slick-slide {
    transform: scale(0);
    transition: transform 0.4s;
}

.singleSlick .slick-slide.slick-current {
    transform: scale(1);
}

#main_menu_front {
    position: fixed;
    bottom: 0px;
    transform: translateY(0px);
    z-index: 999;
    transition: transform 0.3s ease-in-out;
    height: 100%;
    width: 100%;
}

#open_pop_up,
#open_pop_up2 {
    cursor: pointer;
}

.text-capitalize {
    text-transform: capitalize;
}

.popping_boba {
    grid-template-columns: 2fr 1fr;
}

.popping_boba img {
    width: 18px;
}

.new-price-circle {
    background-image: url("/img/point_circle_new.svg");
    background-size: contain;
    background-repeat: no-repeat;
    padding: 5px;
}

/* .new-price-circle h4 {
    margin-left: -5px;
} */

.text-pink {
    color: #FA7598;
}

/* #choose_drink_container {
    h4 {
        line-height: 20px;
    }
} */
h4.font-watermelon {
    line-height: 20px !important;
}

.dm-modal-content {
    width: fit-content;
}

#_dm_milk_instructions_modal .dm-modal-content {
    padding: 0px;
}

.flavorsContent:last-child .flavorItem:last-child {
    margin-bottom: 20px;
}

/* ===== Animation for digital menu page ======  */
.fading {
    animation: fadeInOut 1.75s ease-in-out infinite;
    /* Adjust the duration and easing as needed */
}

@keyframes fadeInOut {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

.floating-image {
    position: relative;
    animation: floatUpDown 2s ease-in-out infinite;
    /* Adjust the duration and easing as needed */
}

@keyframes floatUpDown {

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

    50% {
        transform: translateY(-20px);
        /* Adjust the distance you want the image to move up and down */
    }
}

.dmBubble-dmRaibow-animation {
    animation: bubbleRaibowAnimation 5s ease-in-out infinite;
    
}

.dmBubble.dmBubble-dmRaibow-animation {
    animation-delay: 1.5s;
}

@keyframes bubbleRaibowAnimation {

    0%,
    100% {
        transform: translate(1px, 1px);
    }

    50% {
        transform: translate(-5px, -5px);
    }
}

.rotate-and-scale {
    animation: rotateAndScale 5s infinite;
}

@keyframes rotateAndScale {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(15deg) scale(1.1);
    }
}

.rotate-and-scale {
    animation: rotateAndScale 5s infinite;
}

.dmCup-animation {
    animation: dmCupAnimation 5s infinite;
}

@keyframes dmCupAnimation {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(10deg) scale(1.1);
    }
}

.dmIceCream-animation {
    animation: dmIceCreamAnimation 5s infinite;

}

@keyframes dmIceCreamAnimation {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(-19deg) scale(1.1);
    }
}
.cat_list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: 1.25rem;
    position: relative ;
    z-index: 9999;
}
.cat_btn, .how_to_order_btn {
    background-color: #8B85CA;
    color: white;
    min-width: 235px;
    text-align: center;
    cursor: pointer;
    border-radius: 60px;
    padding: 0.5rem;
}
#tabsContainer {
    column-gap: 2.0rem;
    height: 35px;
}
.tabItem {
    text-transform: uppercase;
    color: white;
    font-weight: 500;
    cursor: pointer;
    line-height: normal;
    letter-spacing: 0.16em;
    padding-top: 1.0rem;
    padding-bottom: 1.0rem;
}
.tabItem.selected {
    font-weight: 600;
    position: relative;
}
.tabItem.selected .tabUnderline {
    position: absolute;
    bottom: 5px;
    left: 0px;
    width: 100%;
    height: 8px;
    /* background-image: url("/img/selectedLine.svg"); */
    background-repeat: no-repeat;
    background-size: contain; 
}
.textUpper {
    text-transform: uppercase;
}

@media screen and (max-width: 425px) {
    #tabsContainer {
        column-gap: 1.0rem;
    }
}
#selectedProductDescription {
    line-height: 16px;
}
#selectedCatName {
    line-height: 30px;
}
#selectedProductName {
    text-transform: uppercase;
}
.py-22px {
    padding-top: 22px;
    padding-bottom: 22px;
}