@import url('https://fonts.googleapis.com/css2?family=Bevan:ital@0;1&family=Ultra&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
    --primary:#2f2c29;
    --primary-alt:#594530;
    --secondary:#d5a24d;
    --secondary-alt:#d5a24d;
    --text: #222;
    --text-alt: rgb(167, 167, 167);
}

.store-phone, #h-phone{
    display:none !important;
}

.modal-content {
  border: none !important;
}

.modal-header:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(./uploads/patten3.png);
  background-size: cover;
  transform: scaleX(-1);
  opacity: 0.05;
  pointer-events: none;
}

.modal-header,
.modal-header .item-icons-container,
.modal-header .item-icons,
.modal-title {
  background-color: transparent !important;
}

.modal-title {
  font-weight: 900 !important;
}

.modal-title-full {
  font-weight: 500 !important;
}

.multi-option-select {
  padding-bottom: 10px;
  border-bottom: 1px dashed #676767;
  margin-bottom: 20px;
}

.multi-option-select:last-child {
  border-bottom: none;
}

.modal-footer {
  min-height: 70px !important;
}
.input-group-label {
  color: var(--text);
  border: 1px solid #e2e2e2;
  /* border-radius: none !important;*/
  padding: 0.9rem !important;
}

.input-group-label:hover {
  background-color: var(--secondary) !important;
  color: #fff;
}

.modal-footer input,
input:checked + .input-group-label,
.modal-deals .modal-header button,
.modal-deals .modal-footer button,
.modal-deals .modal-body .auto-deal-selection button,
.modal-deals .modal-body .deal-modal-body-selection-list button {
  background-color: var(--primary) !important;
  border:none;
}


#left-nav{
  overflow:hidden;

center{
    display:none;
}
  #store-nav:before{
      content:'';
      left:0;
      top:0;
      width:100%;
      height:100%;
      position:absolute;
      background: rgb(23 24 25 / 71%);
  }

    
  #store-nav{
    position:relative;
    padding:1rem;
    height:180px !important;
    background: url(./uploads/item-bg.jpg);
    background-size:cover;
    background-position-x:-700px;
  }
  
  #nav_profile_pic:before{
    content:'';
    position:absolute;
    left:50px;
    width:150px;
    height:150px;
    background:url('./images/logo.png');
    background-repeat:no-repeat;
    background-size:contain !important;
    background-color:#fff;
    border-radius:50%;
  }


  ul li{
    border:none;
    /* border-bottom: 1px solid var(--tertiary); */
    margin:10px; 
    
    a {
      font-weight:700 !important;
      
      span{
        color: var(--secondary) !important;
    }
    }
  }
}

/* header */
.office-info{
    background: #59453096!important;
    backdrop-filter:blur(4px);

    @media(max-width:1024px){
        backdrop-filter:none;
    }
}

.office-wrapper {
    /* border: 2px solid red; */
    width: 100%;
    margin-left: 0 !important;
    display: flex !important;
    justify-content: center;
    
    @media(max-width:1024px){
       display:none !important;
    }
}

.storeinfo{
    height: 400px;
    display: flex !important;
    align-items: center;
    flex-direction: column;
    justify-content: center;
   
    p{
        width: fit-content;
        height: fit-content;
        font-size: 20px !important;
    }

    @media(max-width:1575px){
        position:relative;
        right:160px
    }
}

#bs-navbar{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    position:relative;
    right:10px;
    
}

.desk-top-title:before{
    content:'';
    position:absolute;
    top:10px;
    left:10px;
    width:430px;
    height:378px;
    background:var(--primary);
    border-radius:50%;
    z-index:-1;
    outline:2px solid var(--secondary);
    outline-offset:4px;
    box-shadow: 0 2px 14px #ffffffd4;
}

.desk-top-title{
    text-align:center !important;
    font-size: 80px !important;
    font-family: "Bevan", serif;
    color: white;
    text-shadow: -1px 3px 0px var(--secondary-alt), 5px 4px 0px rgb(0 0 0 / 5%);
    
    .store-title{
        position:relative;
        left:35px;
    }
    
    .title-alt{
        color: var(--secondary-alt);
        text-shadow: -1px 3px 0px #fff, 5px 4px 0px rgb(0 0 0 / 5%);
        word-spacing:10px;
        position:relative;
        left:-5px;
    }
}
#estimated-time:has(#est-time){
    background:var(--primary);
    border-radius:10px;
    outline:1px dashed var(--secondary);
    outline-offset:-5px;
    padding:5px;
}
#est-time{
    color:var(--secondary);
    font-weight:600;
    font-family: "Bevan", serif;
    text-shadow: -1px 2px 0px #fff, 5px 4px 0px rgb(0 0 0 / 5%);
}

.navbar-collapse.collapse{
    width: fit-content;
}

.navbar{
    background: var(--primary) !important;
    backdrop-filter:blur(3px);
}

#menu-nav{
  display:block !important;
  
  span:before{
    content:'';
    width:60px;
    height:50px;
    top:4px;
    left:20px;
    position:absolute;
    background: url('./images/logo.png');
    background-repeat:no-repeat;
    background-size:cover;
      border-radius:2px;
    background-position-y:-5px;
    transition: all 0.3s ease;
  }

  span{
    color:transparent;
  }

  &:hover{
    background-color:transparent !important;
    cursor:default;
  }
}

.logo{
    display: none !important;
}

/* menu ul*/
#menu{
    background-color: white;
    color: black;
}

#menu-ul{
    background-color: white;
    overflow-y: hidden !important;
    display:flex;

    li a{
        color: black !important;
        font-weight: bold !important;
        transition: all 0.3s ease;
        background:#fff !important;
          /* font-family: "Poppins", sans-serif; */
    }
}

#menu ul  {
    overflow:hidden;
}

#menu ul li a:hover, #menu ul li:hover > a {
    color: black !important;
    background: white !important;
    transform: scale(1.1);
}

#menu-cont > #menu > #menu-ul > li > a.menu-active {
    border-bottom: none !important;
    transform: scale(1.1);
    font-family: "Bevan", serif;
    color: var(--primary) !important;
}

.pn-Advancer {
    background: #fff
}

.pn-Advancer_Icon {
    fill: var(--secondary-alt) !important;
}

.menu-item:before {
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:400px;
    height:100%;
    background: url(./uploads/menu-bg.png);
    background-repeat:no-repeat;
    opacity:0.1;
    animation: upAndDown 3s ease-in-out infinite;
}

#menu_items:before {
    content:'';
    position:absolute;
    top:300px;;
    left:0;
    width:100%;
    height:100%;
    background: url(./uploads/menu-bg2.png);
    background-repeat:no-repeat;
    opacity:0.1;
    animation: upAndDown 3s ease-in-out infinite;
}

.menu-item {
    overflow:hidden;
    position:relative;
    background-color: #e9e9e9;
    border-bottom:none;
}
#menu-items .menu-item h1:after {
    content:'';
    position:absolute;
    width:5000px;
    height:1px;
    border: 1px dashed var(--secondary);
    top:85%;
}

#menu-items .menu-item h1 {
    background:none !important;
    font-family: "Poppins", sans-serif;
    color: black;
    margin-right:10px !important;
    font-size:43px !important;
    font-weight:800 !important;
    background: #e9e9e9;
    width:fit-content;
    /* text-shadow: -1px 3px 0px var(--secondary-alt), 5px 4px 0px rgb(0 0 0 / 5%); */
}

/* #menu-items ul li.group:before,
#menu-items ul li.single:before {
    content:''; 
    position:absolute;
    width: 60px;
    top:0;
    right:0px;
    height:100%;
    background: url(./uploads/pattern.png);
    border-top-right-radius:7px;
    border-bottom-right-radius:7px;
    transition: all 0.3s ease;
} */

#menu-items ul li.group:hover:before,
#menu-items ul li.single:hover:before {
    width:100px;
}

#menu-items ul li.group,
#menu-items ul li.single {
    background-color:#ffff;
    border:none;
    border-radius:7px;
    padding:7px;
    outline:none;
    transition:all 0.3s ease;
    box-shadow: 0 8px 12px #00000003;
    display:flex;
    
    .item-title-container{
        display:flex;
        flex-direction:column;
    }
    
     .item-title {
        transition: all 0.1s ease;
        font-family: "Bevan", serif;
        color: var(--primary) !important;
        font-weight:200;
    }

    .item-price{
        margin-bottom:7px;
        order:-1;
        background:#fff;
        z-index:1;
        border-radius:5px;
        font-size:20px;
        font-weight:300;
        text-align:start;
        font-family: "Bevan", serif;
        color:var(--primary);
        text-shadow: -1px 2px 0px var(--secondary), 2px 1px 0px rgb(0 0 0 / 5%);
    }


}

#menu-items ul li.group:hover,
#menu-items ul li.single:hover {
  background-color:#fff;
  box-shadow: 0 8px 12px #0000002e;
  outline-offset:-7px;
  outline: 2px solid var(--secondary-alt);
}

@media (max-width: 1024px) {
    #menu ul {
        overflow-x: visible ;
        justify-content:start;
    }
    
    #menu ul li a {
        color: black !important;
    }
}

@media(max-width:768px){
    #menu-items ul li.group,
    #menu-items ul li.single {
         margin-block:25px; 
    }
}

@media(max-width:480px){
    .toggle-left, .navbar-right a span{
        filter: invert(100%);
    }
    
    #menu-items ul li.group:not(:has(.item-thumb))::before,
    #menu-items ul li.single:not(:has(.item-thumb))::before,
    #menu-items .menu-item h1:after {
        display: none;
    }

    #menu-items ul li.group:has(.item-thumb):before,
    #menu-items ul li.single:has(.item-thumb):before  {
        position:absolute;
        top:0;
        z-index:;
        height:40px;
        width:100%;
        border-radius:5px 5px 0 0;
    }

    
    #menu-items ul li.group,
    #menu-items ul li.single {
        flex-direction:column;

        .item-thumb{
            z-index:1;
            height:170px !important;
            width:200px !important;

            img{
                width:100%;
                height:100%;
            }
        }
        
        .item-block,.item-description{
            width:100% !important;
        }
    
        .item-title {
            padding-top:2px;
            max-height:10px;
        }
    }
}
 
@keyframes upAndDown {
    0% {
        transform: translateY(0); 
    }
    50% {
        transform: translateY(-10px); 
    }
    100% {
        transform: translateY(0); 
    }
}