@font-face {
    font-family: 'Josefin';
    src: url('../fonts/JosefinSans-Regular.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
  }
@font-face {
    font-family: 'JosefinBold';
    src: url('../fonts/JosefinSans-Bold.ttf') format("truetype");
    font-weight: 600;
}
@font-face {
    font-family: 'JosefinBold';
    src: url('../fonts/JosefinSans-Bold.ttf') format("truetype");
    font-weight: 600;
}
@import url("../../use.typekit.net/zac1mfc.css");

html {
    font-family: Josefin,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.font-josefin {
    font-family: Josefin,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
}
.font-watermelon {
    font-family: WatermelonRegular,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-weight: normal;
}
.font-luckiest {
    font-family: LuckiestSoftieProExtraBold,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-weight: 500;
}
.font-arabic {
    font-family: greycliff-arabic-cf;
    font-style: normal;
    font-weight: 600;
}
button.font-semibold {
    font-weight: 500;
}
.md\:text-70px {
    font-size: 70px;
}
.sm\:text-70px {
    font-size: 70px;
}
.xl\:text-70px {
    font-size: 70px;
}
.text-70px {
    font-size: 70px;
}
.md\:text-64px {
    font-size: 64px;
}
.sm\:text-64px {
    font-size: 64px;
}
.xl\:text-64px {
    font-size: 64px;
}
.text-64px {
    font-size: 64px;
}
.md\:text-40px {
    font-size: 40px;
}
.sm\:text-40px {
    font-size: 40px;
}
.xl\:text-40px {
    font-size: 40px;
}
.text-40px {
    font-size: 40px;
}
@media (max-width: 767px) and (min-width: 500px)  {
    .sm\:text-70px {
        font-size: 70px;
    }
    .sm\:text-64px {
        font-size: 64px;
    }
    .sm\:text-40px {
        font-size: 40px;
    }
}

@media (min-width: 768px) {
    .md\:text-70px {
        font-size: 70px;
    }
    .md\:text-64px {
        font-size: 64px;
    }
    .md\:text-40px {
        font-size: 40px;
    }
}

@media (min-width: 1200px) {
    .xl\:text-70px {
        font-size: 70px;
    }
    .xl\:text-64px {
        font-size: 64px;
    }
    .xl\:text-40px {
        font-size: 40px;
    }
}
h1,
h2,
h3,
h4,
h5,
h6,
button {
    font-weight: 500!important;
}
a.font-semibold {
    font-weight: 500!important;
}
.font-semibold {
    letter-spacing: 0.15px;
}
.bg-custom-primary {
    font-family: LuckiestSoftieProExtraBold;
    background-color: #8b85ca;
    font-weight: 500!important;
    letter-spacing: 1px;
}
.home-menu {
    background: unset!important;
}
.home-about {
    background: url(../img/home_bl3_bg.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    height: 1500px;
    margin-top: auto;
    margin-bottom: auto;
}
/* .text-18px {
    font-size: 18px;
} */
/* .text-20px {
    font-size: 20px;
} */
p {
    font-size: 18px;
}
.home-about-tabiboba {
    background: unset;
}
.text-custom-primary {
    color: #8b85ca;
}
.border-custom-primary {
    border-color:  #8b85ca;
}
.border-custom-primary {
    font-family: LuckiestSoftieProExtraBold;
}
.home-karaoke-room {
    background: url(../img/home_bl6_bg.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    height: 1200px;
    margin-top: auto;
    margin-bottom: auto;
}
#mobile-menu .nav_menu_item {
    font-size: 20px;
}
@media (min-width: 768px) and (max-width: 1279px) {
    .home-about {
        height: 1050px
    }
    .home-karaoke-room {
        height: 950px;
    }
}
@media (min-width: 768px) and (max-width: 1200px) {
    .home-about {
        height: 1200px
    }
}
@media (max-width: 767px) {
    .home-about {
        height: 1100px;
    }
    ._menu_container_home {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}   
.hover\:text-custom-light-text:hover {
    color: #8b85ca;
}
.header-active, ._category-active {
    color:#8b85ca;
    font-family: JosefinBold;
}
.header-active::after {
    background-color: #8b85ca;
}
@media (min-width: 768px) and (max-width: 1199px) {
.home-karaoke-room .container {
background-position: top 190px right 48px,bottom 23px left 30px;
    background-size: 38%;
    padding-bottom: 5rem;}
}

@media (max-width: 720px) {
    .home-karaoke-room {
        background-size: cover;
    }
    .qrs {
        display: none;
    }
}
@media (max-width: 768px) and (min-width: 425px) {
    .qrs {
        display: none;
    }
    #delivery_icons_container {
        grid-template-columns: repeat(2, 1fr);
    }
}
._about-slick-image {
    margin-left: auto;
    margin-right: auto;
}
.franchise-banner, .karaoke-room-banner , .darts-banner, .darts-game {
    background: unset;
}
nav {
    height: 70px!important;
}
nav div {
    padding: 0px!important;
}
header.active, header {
    height: 70px!important;
    background-color: #f9f0ff;
}
header #_header-img, header.active #_header-img {
    transform: scale(0.8)!important;
}
main {
    margin-top: 1.0rem;
}
.nav_menu_item:hover {
    font-weight: 600;
}
@media (max-width: 720px) {
    #_order_now_menu, #menu-section {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}
#section1, #section2, #section-about, #section3, #section4, #section5, #section6 {
    position: relative;
}
.orderApp img {
    margin-left: auto;
    margin-right: auto;
}
.bg_element {
    position: absolute;
    z-index: 9;
}
/* === section1 elements === */
.cup1_element {
    left: 2.75%;
    bottom: 150px;
    transform: rotate(11deg) scale(1.3);
}
.bubble1_element {
    left: 40%;
    bottom: 250px;
    transform: rotate(-10deg) scale(1.2);
}
.waffle1_element {
    right: 2.75%;
    bottom: 170px;
    transform: rotate(15deg) scale(1.2);
}
/* === section-about elements === */
.icecream1_element {
    right: 10%;
    top: 10px;
    transform: rotate(-15deg) scale(1.2);
}
.rainbow1_element {
    left: 45%;
    top: 200px;
    transform: rotate(-15deg) scale(1.2);
}
.cup2_element {
    left: 3.5%;
    bottom: 200px;
    transform: rotate(11deg) scale(1.2);
}
.waffle2_element {
    right: 3.75%;
    bottom: 200px;
    transform: rotate(15deg) scale(1.2);
}
/* === section3 elements === */
.bubble2_element {
    left: 30%;
    top: -100px;
    transform: rotate(-10deg) scale(1.2);
}
.icecream2_element {
    left: 75%;
    top: 500px;
    transform: rotate(-10deg) scale(1.2);
}
/* === section4 elements === */
.rainbow2_element {
    left: 10%;
    top: 0px;
    transform: rotate(-15deg) scale(1.2);
}
.cup3_element {
    left: 45%;
    top: 300px;
    transform: rotate(10deg) scale(1.2);
}
.icecream3_element {
    left: 75%;
    bottom: 0px;
    transform: rotate(-10deg) scale(1.2);
}
.waffle3_element {
    left: 30%;
    bottom: 0px;
    transform: rotate(10deg) scale(1.2);
}
/* === section4 elements === */
.bubble3_element {
    left: 5%;
    top: 0px;
    transform: rotate(10deg) scale(1.2);
}
.rainbow3_element {
    right: 10%;
    bottom: -100px;
    transform: rotate(10deg) scale(1.2);
}
/* .cup4_element {
    left: 8%;
    top: 780%;
    transform: rotate(10deg) scale(1.4);
}
.icecream4_element {
    left: 85%;
    top: 820%;
    transform: rotate(-10deg) scale(1.4);
}
.waffle4_element {
    left: 40%;
    top: 830%;
    transform: rotate(10deg) scale(1.4);
}
.bubble4_element {
    left: 5%;
    top: 850%;
    transform: rotate(10deg) scale(1.4);
}
.rainbow4_element {
    left: 25%;
    top: 900%;
    transform: rotate(10deg) scale(1.4);
} */
p,h1,h2,h3,h4,h5,h6,a, img {
    position: relative;
    z-index: 99;
}
.bg-gray-900 {
    z-index: 9999;
}
@media (max-width: 720px) {
    .cup1_element {
        transform: rotate(11deg) scale(1.1);
    }
    .bubble1_element {
        transform: rotate(-10deg) scale(1.1);
    }
    .waffle1_element {
        transform: rotate(15deg) scale(1.1);
    }
    .icecream1_element {
        transform: rotate(-15deg) scale(1.1);
    }
    .rainbow1_element {
        transform: rotate(-15deg) scale(1.1);
    }
    .cup2_element {
        transform: rotate(11deg) scale(1.1);
    }
    .waffle2_element {
        transform: rotate(15deg) scale(1.1);
    }
    .bubble2_element {
        transform: rotate(-10deg) scale(1.1);
    }
    .icecream2_element {
        transform: rotate(-10deg) scale(1.1);
    }
    .rainbow2_element {
        transform: rotate(-15deg) scale(1.1);
    }
    .cup3_element {
        transform: rotate(10deg) scale(1.1);
        display: none;
    }
    .icecream3_element {
        transform: rotate(-10deg) scale(1.1);
    }
    .waffle3_element {
        transform: rotate(10deg) scale(1.1);
    }
    .bubble3_element {
        transform: rotate(10deg) scale(1.1);
    }
    .rainbow3_element {
        transform: rotate(10deg) scale(1.1);
    }
    .cup4_element {
        transform: rotate(10deg) scale(1.1);
    }
    .icecream4_element {
        transform: rotate(-10deg) scale(1.1);
    }
    .waffle4_element {
        transform: rotate(10deg) scale(1.1);
    }
    .bubble4_element {
        transform: rotate(10deg) scale(1.1);
    }
    .rainbow4_element {
        transform: rotate(10deg) scale(1.1);
    }
}
.header-active::after {
    height: 0px;
    width: 0px;
}
#btn-categories-sticky {
    background-color: #f9f0ff;
}
@media (max-width: 620px) {
    .cup1_element {
        bottom: 200px; 
    }
}
@media (max-width: 1200px) {
    .rainbow1_element {
        left: 2.75%;
    }
}
@media (max-width: 960px) {
    .rainbow1_element {
        top: 550px;
    }
}
@media (max-width: 768px) {
    .rainbow1_element {
        top: 300px;
    }
    .bubble1_element {
        display: none;
    }
}
@media (max-width: 470px) {
    .waffle1_element  {
        bottom: -90px;
    }
    .cup1_element {
        bottom: -80px;
    }
}
@media (max-width: 480px) {
    .rainbow1_element {
        top: 500px;
    }
    .cup2_element{
        bottom: 50px;
    }
    .waffle2_element  {
        bottom: 0px;
    }
    .cup3_element {
        top: 400px;
    }
}
/* @media (min-width: 290px) {
    #except_text {
        max-width: 310px;
    }
} */
.home-why-tabiboba {
    background: none;
}
.menu_container_home {
    padding-top: 1.5rem;
}
.menu_container_home_item {
    padding-top: 0.25rem;
}
.menu_container_home {
    padding-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    row-gap: 3rem;
    column-gap: 3rem;
}
.menu_container_home_item{
    flex: 1 0 21%;
}
._menu_image_container img, .menu_container_home_item img {
    object-fit: contain;
}
@media (min-width: 1280px) {
    .franchise-banner .container {
        background-position: top 400px left 350px, top 600px left;
    }
}
.border-custom-violet-bg {
    border-color: #8b85ca;
}
.z-9999 {
    z-index: 9999;
}
.z-99999 {
    z-index: 99999;
}
.btn-outline-secondary {
    background-color: #d0d0e7;
    border-color: #d0d0e7;
    color: #3E3F7A;
}
.btn-outline-info {
    background-color: #c4e7f7;
    border-color: #c4e7f7;
    color: #0090d2;
}
.btn-outline-warning {
    background-color: #ffeae6;
    border-color: #ffeae6;
    color: #FF6D4D;
}
.btn-outline-warning:hover {
        color: #ffffff;
        background-color: #f58972;
        border-color: #f58972;
    }
.btn-outline-secondary:hover {
    color: #ffffff;
    background-color: #817fad;
    border-color: #817fad;
}
.btn-outline-theme {
    background-color: #fbe8ee;
    border-color: #fbe8ee;
    color: #EA7A9A;
}
    .btn-outline-theme:hover {
        background-color: #EA7A9A;
        border-color: #EA7A9A;
        color: #fff;
    }
.pos-menu .nav-container {
    position: relative;
}
.lockedOverLay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgb(255 255 255 / 50%);
    z-index: 999999;
    text-align: center;
}
    .lockedOverLay:after {
        content: "Locked";
        /* margin: auto 0; */
        /* height: 100%; */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        content: "\f023";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 24px;
        color: #d72017;
        /* position: absolute; */
        /* padding-top: 50%; */
        /* height: 100%; */
        /* transform: translate(0, 50%); */
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
    }
.flexEqualBtn {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.flex-grow-1 {
    flex-grow: 1;
}
.inlineBlockEqualBtn {
    display: inline-block;
    width: 100%;
}
.inlineBlockEqualBtn .btn{
    width:31%;
    margin-bottom:4px;
}
.bigtouchSelectBox {
    width: 32px;
    height: 32px;
}