/*----------------------------------------------------*/
/*font Variables*/
/*Color Variables*/
@import url('https://fonts.googleapis.com/css2?family=Cantata+One&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=WindSong:wght@400;500&display=swap');

.col-md-offset-right-1 {
  margin-right: 8.33333333%;
}

/*---------------------------------------------------- */
/*----------------------------------------------------*/
ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

a {
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: none;
}

body {
  font-family: Comic Sans !important;
  font-size: 16px;
  line-height: 24px;
  background: #f7f7f7;
  overflow-x: hidden;
}
/*------------------------------------------------------------------------------------*/

/*Abrv CSS*/
.c-3 {
  color: #333 !important;
}
/*------------------------------------------------------------------------------------*/

/*Loader CSS*/
  .mkd-loader {
    width: 48px;
    height: 48px;
    margin-top: 20%;
    border-radius: 50%;
    display: inline-block;
    border: 3px solid;
    border-color: #FFF #FFF transparent transparent;
    animation: rotation 1s linear infinite;
  }

  .mkd-loader::after,
  .mkd-loader::before {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent #FF3D00 #FF3D00;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotationBack 0.5s linear infinite;
    transform-origin: center center;
  }

  .mkd-loader::before {
    width: 32px;
    height: 32px;
    border-color: #FFF #FFF transparent transparent;
    animation: rotation 1.5s linear infinite;
  }
      
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  } 
  @keyframes rotationBack {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
/*------------------------------------------------------------------------------------*/

/* Loaded Styles */ 
.text{color:brown;font-size:220px;text-align:center;}
/*.open{color:green;background:#000;padding:10px;border-radius:20px;}*/

/* Preloader */
.container-preloader {
  align-items:center; cursor:none; display:flex; height:100%;
  justify-content:center; position:fixed; left:0; top:0; width:100%; z-index:900;
  background: #fff;
}
.container-preloader .animation-preloader {
  position:absolute; z-index: 100;}
/* Spinner Loading */
.container-preloader .animation-preloader .spinner {
  animation: spinner 1s infinite linear;
  border-radius: 50%;  border: 10px solid rgba(0, 0, 0, 0.2);
  border-top-color: green; /* It is not in alphabetical order so that you do not overwrite it */
  height: 9em;  margin: 0 auto 3.5em auto; width: 9em;
}
/* Loading text */
.container-preloader .animation-preloader .txt-loading {
  font: bold 5em 'Montserrat', sans-serif;
  text-align: center; user-select: none;
}
.container-preloader .animation-preloader .txt-loading .characters:before {
  animation: characters 4s infinite;  color: orange;
  content: attr(preloader-text);  left: 0;
  opacity: 0;  position: absolute;  top: 0;
  transform: rotateY(-90deg);
}
.container-preloader .animation-preloader .txt-loading .characters {
  color: rgba(0, 0, 0, 0.2);  position: relative;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(2):before {
  animation-delay: 0.2s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(3):before {
  animation-delay: 0.4s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(4):before {
  animation-delay: 0.6s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(5):before {
  animation-delay: 0.8s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(6):before {
  animation-delay: 1s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(7):before {
  animation-delay: 1.2s;
}
.container-preloader .loader-section {
  background-color: #ffffff;  height: 100%;
  position: fixed;  top: 0;  width: calc(50% + 1px);
}
.container-preloader .loader-section.section-left {
  left: 0;
}
.container-preloader .loader-section.section-right {
  right: 0;
}
/* Fade effect on loading animation */
.loaded .animation-preloader {
  opacity: 0;
  transition: 0.3s ease-out;
}
/* Curtain effect */
.loaded .loader-section.section-left {
  transform: translateX(-101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}
.loaded .loader-section.section-right {
  transform: translateX(101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}
/* Animation of the preloader */
@keyframes spinner {
to {
  transform: rotateZ(360deg);
}}
/* Animation of letters loading from the preloader */
@keyframes characters {
  0%,
  75%,
  100% {
 opacity: 0;
 transform: rotateY(-90deg);
  }
  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }}


#cookingLoader {
    position: relative;
    margin: 0 auto;
    margin-bottom: 25%;
    top: 0;
    width: 75vh;
    height: 75vh;
    overflow: hidden;
}

#cookingLoader #area {
    position: absolute;
    bottom: 0;
    right: 15%;
    width: 50%;
    height: 50%;
    background-color: transparent;
    transform-origin: 15% 60%;
    animation: flip 2.1s ease-in-out infinite;
}

#cookingLoader #area #sides {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: 15% 60%;
    animation: switchSide 2.1s ease-in-out infinite;
}

#cookingLoader #area #sides #handle {
    position: absolute;
    bottom: 18%;
    right: 80%;
    width: 35%;
    height: 20%;
    background-color: transparent;
    border-top: 1vh solid #333;
    border-left: 1vh solid #625d5d;
    border-radius: 100%;
    transform: rotate(20deg) rotateX(0deg) scale(1.3, 0.9);
}
#cookingLoader #area #sides #pan {
    position: absolute;
    bottom: 20%;
    right: 30%;
    width: 50%;
    height: 8%;
    background-color: #a39292;
    border-radius: 0 0 1.4em 1.4em;
    transform-origin: -15% 0;
}

#cookingLoader #area #pancake {
    position: absolute;
    top: 24%;
    width: 100%;
    height: 100%;
    transform: rotateX(85deg);
    animation: jump 2.1s ease-in-out infinite;
}

#cookingLoader #area #pancake #pastry {
    position: absolute;
    bottom: 26%;
    right: 37%;
    width: 40%;
    height: 45%;
    background-color: #e0c7c7;
    box-shadow: 0 0 3px 0 #e0c7c7;
    border-radius: 100%;
    transform-origin: -20% 0;
    animation: fly 2.1s ease-in-out infinite;
}

#cookingLoader .bubble {
    position: absolute;
    border-radius: 100%;
    box-shadow: 0 0 0.25vh #4d4d4d;
    opacity: 0;
}

#cookingLoader .bubble:nth-child(1) {
    margin-top: 2.5vh;
    left: 58%;
    width: 2.5vh;
    height: 2.5vh;
    background-color: #454545;
    animation: bubble 2s cubic-bezier(0.53, 0.16, 0.39, 0.96) infinite;
}

#cookingLoader .bubble:nth-child(2) {
    margin-top: 3vh;
    left: 52%;
    width: 2vh;
    height: 2vh;
    background-color: #3d3d3d;
    animation: bubble 2s ease-in-out 0.35s infinite; 
}

#cookingLoader .bubble:nth-child(3) {
    margin-top: 1.8vh;
    left: 50%;
    width: 1.5vh;
    height: 1.5vh;
    background-color: #333;
    animation: bubble 1.5s cubic-bezier(0.53, 0.16, 0.39, 0.96) 0.55s infinite;
}

#cookingLoader .bubble:nth-child(4) {
    margin-top: 2.7vh;
    left: 56%;
    width: 1.2vh;
    height: 1.2vh;
    background-color: #2b2b2b;
    animation: bubble 1.8s cubic-bezier(0.53, 0.16, 0.39, 0.96) 0.55s infinite;
}

#cookingLoader .bubble:nth-child(5) {
    margin-top: 2.7vh;
    left: 63%;
    width: 1.1vh;
    height: 1.1vh;
    background-color: #242424;
    animation: bubble 1.6s ease-in-out 1s infinite; 
}


@keyframes pulse {
    0% {
        transform: scale(1, 1);
        opacity: 0.25;
    }
    50% {
        transform: scale(1.2, 1);
        opacity: 1;
    }
    100% {
        transform: scale(1, 1);
        opacity: 0.25;
    }
}

@keyframes flip {
    0% {
        transform: rotate(0deg);
    }

    5% {
        transform: rotate(-27deg);
    }

    30%, 50% {
        transform: rotate(0deg);
    }

    55% {
        transform: rotate(27deg);
    }

    83.3% {
        transform: rotate(0deg);
    }

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

@keyframes switchSide {
    0% {
        transform: rotateY(0deg) ;
    }

    50% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

@keyframes jump {
    0% {
        top: 24;
        transform: rotateX(85deg);
    }
    25% {
        top: 10%;
        transform: rotateX(0deg);
    }
    50% {
        top: 30%;
        transform: rotateX(85deg);
    }
    75% {
        transform: rotateX(0deg);
    }
    100% {
        transform: rotateX(85deg);
    }
}

@keyframes fly {
    0% {
        bottom: 26%;
        transform: rotate(0deg);
    }
    10% {
        bottom: 40%;
    }
    50% {
        bottom: 26%;
        transform: rotate(-190deg);
    }
    80% {
        bottom: 40%;
    }
    100% {
        bottom: 26%;
        transform: rotate(0deg);
    }
}

@keyframes bubble {
    0% {
        transform: scale(0.15, 0.15);
        top: 80%;
        opacity: 0;
    }
    50% {
        transform: scale(1.1, 1.1);
        opacity: 1;
    }
    100% {
        transform: scale(0.33, 0.33);
        top: 60%;
        opacity: 0;
    }
}
/*------------------------------------------------------------------------------------*/

/*header CSS*/
  .mkd-header {
    position: relative;
    min-height: auto;
    margin-bottom: 0;
    background: #E6DDDD;
    height: 80px;
  }

  .mkd-header .navbar-logo img{
    height: 185px;
    position: relative;
    bottom: 55px;
    left: 5%;
  }
  
  .mkd-header .navbar-nav {
    position: relative;
    right: 5%;
    top: 13px;
    text-align: center;
  }

  .mkd-header .nav li a{
    height: 50px;
    color: #8e0b0b;
    font-weight: 700;
    letter-spacing: .42px;
  }

  .mkd-header .nav>.login-drpdown, 
  .mkd-header .nav>.login-nav.inactive {
    display: none;
  }

  .mkd-header .nav>.login-drpdown.active {
    display: block;
  }

  .mkd-header .nav>.login-drpdown.active a {
    color: #8e0b0b;
  }

  .mkd-header .nav>.login-drpdown.active:hover a {
    color: #434949cc;
  }

  .mkd-header .nav li:hover a, 
  .mkd-header .nav li.active a {
    color: #434949cc;
    background: transparent;
  }

  .nav>li>a:hover, .nav>li>a:focus {
    background-color: transparent;
  }

  .mkd-header .nav li.submenu .dropdown-menu {
    padding-top: 0;
    border: none;
    right: 33%;
    transition: all 400ms linear 0s;
    border-radius: 0px;
    background: #fff;
  }

  .mkd-header .nav>.login-drpdown.active .dropdown-menu:before {
    font-family: FontAwesome;
    content: "\f0de";
    display: inline-block;
    position: relative;
    bottom: 14px;
    left: 197px;
    height: 15px;
    width: 20px;
    font-size: 20px;
    vertical-align: middle;
    color: #fff;
  }

  .mkd-header .nav li.submenu .dropdown-menu {
    display: block;
    top: 150%;
    transition: all 300ms ease-in;
    opacity: 0;
    visibility: hidden;
    min-width: 210px;
    height: 130px;
  }

  .mkd-header .nav li.submenu .dropdown-menu li {
    display: block;
    margin-right: 0px;
    margin-left: 5%;
    font-size: 13px;
  }

  .mkd-header .nav>.login-drpdown.active .dropdown-menu li a {
    color: #8e0b0b;
    height: 30px;
  }

  .mkd-header .nav>.login-drpdown.active .dropdown-menu li:hover a {
    color: #434949cc;
    background: transparent;
  }

  .mkd-header .nav li.submenu .dropdown-menu li a:before {
    display: none;
  }

  .mkd-header .nav li.submenu:hover .dropdown-menu {
    top: 100%;
    opacity: 1;
    visibility: visible;
  }
/*------------------------------------------------------------------------------------

/*Footer CSS*/
  .mkd-footer-widget {
    background: #181818;
    padding: 25px 0px;
  }

  .footer-title {
    padding-bottom: 20px;
  }

  .footer-title h4 {
    font-size: 25px;
    color: #fff;
  }

  .footer-body p {
    color: #fff;
  }

  .contact-widget .footer-body ul {
    position: relative;
    left: 5%;
  }

  .contact-widget .footer-body ul li a {
    position: relative;
    color: #8e0b0b;
    font-weight: 900;
  }

  .contact-widget .footer-body ul li a i {
    position: relative;
    right: 15px;
    color: #8e0b0b;
  }

  .contact-widget .footer-body ul li:last-child {
    margin-bottom: 0px;
  }

  .aide-widget .footer-body a{
    color: #ffffff;
  }

  .support-area{
    padding: 50px 40px;
    font-family: Muli, Arial, Helvetica, "sans-serif" !important;
    font-size: 14px;
  }

  .support-area h1 {
    padding-bottom: 30px;
    text-align: center;
  }

  .support-area p{
    margin: 0 0 20px;
    padding-right: 60px;
  }

  .mkd-footer .social-icon {
    position: relative;
    top: 20px;
  }

  .mkd-footer .social-icon ul li {
    display: inline-block;
    margin-right: 10px;
  }

  .mkd-footer .social-icon ul li a {
    color: #3b5998;
    font-size: 18px;
    display: block;
    text-align: center;
    height: 30px;
    width: 30px;
    line-height: 30px;
    background: #fff;
    border-radius: 50%;
    transition: all 400ms linear 0s;
  }

  .mkd-footer .social-icon ul li:hover a {
    background: #8e0b0b;
    color: #fff;
  }

  .newsletter-widget {
    position: relative;
    left: 15%;
  }

  .newsletter-widget .footer-body .subscribe {
    height: 54px;
    width: 355px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 54px;
    padding: 5px;
    overflow: hidden;
    background-color: #fff;
    position: relative;
    top: 25px;
  }

  .newsletter-widget .footer-body .subscribe input {
    font-family: inherit;
    border: 0;
    flex: 1;
    padding: 0 16px;
    outline: none;
    background-color: transparent;
    color: #000;
  }

  .newsletter-widget .footer-body .subscribe input::placeholder {
    color: inherit;
  }

  .newsletter-widget .footer-body .subscribe button {
    border: 0;
    height: 44px;
    width: 44px;
    border-radius: 44px;
    background-color: #8e0b0b;
    cursor: pointer;
    transition: all .2s;
  }
      
  .newsletter-widget .footer-body .subscribe button i {
    color: #fefefe;
  }
/*------------------------------------------------------------------------------------*/

/*Maklet Dari BTN*/
  .btns-mkd {
    background: transparent;
    text-align: center;
    width: 100%;
    font-family: "Cantata One", serif;
    color: #333333;
    line-height: 40px;
    display: inline-block;
    font-size: 12px;
    z-index: 2;
    position: relative;
    letter-spacing: .42px;
    text-transform: uppercase;
  }

  .btns-mkd i {
    padding-right: 5px;
  }

  .btns-mkd:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border: 1px solid #333333;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }

  .btns-mkd:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background: #8e0b0b;
    -webkit-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }

  .btns-mkd:hover {
    color: #fff;
  }

  .btns-mkd:hover:before {
    opacity: 0;
    -webkit-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
  }

  .btns-mkd:hover:after {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  .submit_btn {
    background: transparent;
    text-align: center;
    width: 100%;
    font-family: "Open Sans", sans-serif;
    line-height: 28px;
    display: inline-block;
    font-size: 14px;
    z-index: 2;
    text-transform: uppercase;
    font-weight: bold;
    height: 40px;
    position: relative;
    letter-spacing: .42px;
    text-transform: uppercase;
    outline: none !important;
    box-shadow: none !important;
    border: none;
    color: #fff;
  }

  .submit_btn i {
    padding-right: 5px;
  }

  .submit_btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #8e0b0b;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 5px;
  }

  .submit_btn:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    border: 1px solid #8e0b0b;
    -webkit-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    border-radius: 5px;
  }

  .submit_btn:hover {
    color: #fff;
    background: transparent;
  }

  .submit_btn:hover:before {
    opacity: 0;
    -webkit-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
  }

  .submit_btn:hover:after {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }
/*End CSS BTN*/

  .img-dish{
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px;
  }

  .select2-container--default .select2-selection--single {
    border: none !important;
  }

  .select2-selection__placeholder {
    color: #666666 !important;
  }

  .select2-results__option {
    width: 100% !important;
  } 

  .section-gap {
    padding: 70px 0;
  }

  .home_desc {
    text-align: center;
    margin-top: 2%;
    margin-bottom: 2%;
  }

  .home_desc span {
    margin-left: .7rem;
    line-height: 32px;
    font-size: 1.5rem;
    background: purple;
    /* box-shadow: 0 5px 5px #000; */
    text-shadow: 0 5px 5px #000;
    color: #f4f4f4;
    border: 1px solid #f4f4f4;
    border-radius: 50px 15% / 10px 25%;
    width: 140px;
    /* height: 45px; */
    /* margin-right: 60px; */
    /* flex-shrink: 0; */
    /* position: relative; */
    /* display: block; */
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 3px;
    padding-bottom: 5px;
  }

  .home_desc_ntext {
    text-align: center;
    font-size: xxx-large;
    height: 100px;
    line-height: 175px;
    margin-bottom: 80px;
  }

  .banner-area .banner-item {
    height: 455px;
    position: relative;
    display: flex;
    align-items: center;
  }

  .banner-area .banner-content h4 {
    font-weight: 400;
    letter-spacing: 3px;
    color: #fff;
    font-size: 26px;
    padding-bottom: 15px;
    text-transform: uppercase;
  }

  .banner-area .banner_content a {
    font-size: 18px;
    color: #fff;
    margin-right: 15px;
    position: relative;
  }

  .banner-area .banner_content a:last-child {
    margin-right: 0px;
  }

  .banner-area .banner_content a:last-child:before {
    display: none;
  }

  .banner-area .banner_content a:before {
    content: "/";
    color: #fff;
    font-size: 18px;
    position: absolute;
    right: -14px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .banner-area .banner_content a.active {
    color: #8e0b0b;
  }

  .banner-content h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1em;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .desc-text {
    font-size: 30px;
    line-height: 40px;
  }
  
  /* Position text in the middle of the page/image */
  .desc-bgtext {
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
    color: white;
    font-weight: bold;
    border: 3px solid #f1f1f1;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    padding: 20px;
    text-align: center;
  }

  .banner-area .banner-btn {
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 5%;
    background-color: #f42f2c;
    border: 1px solid transparent;
    color: #fff;
    background-color: #f42f2c;
    line-height: 42px;
    border-radius: 25px;
    border: none;
    color: #fff;
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    word-spacing: 0.1cm;
  }

/* End Banner area css */

/*Menu Section CSS*/
  .menu_desc {
    height: 500px;
    padding: 72px;
  }

  .menu_desc h1 {
    text-align: center;
    margin-bottom: 60px;
  }

  .menu_desc p {
    padding: 3% 5%;
  }

  .menu_desc img {
    width: 45px;
    margin-left: 20px;
  }

  .menu-area {
    padding: 45px 0px;
    position: relative;
    z-index: 2;
  }

  .home-menu-area:before {
    content: "";
    background: #8e0b0b;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
  }

  .menu-area .menu-area-filter {
    text-align: center;
    margin: 45px 0px 55px 0px;
    overflow: hidden;
  }

  .menu-area .menu-area-filter li {
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 10px;
    margin-right: 5px;
  }

  .menu-area .menu-area-filter li a {
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    color: #000;
    display: block;
    border: 1px solid #000;
    padding: 0px 15px;
    line-height: 30px;
    transition: all 400ms linear 0s;
  }

  .menu-area .menu-area-filter li:hover a, .menu-area .menu-area-filter li .tab-menu.active {
    background: #111111;
    border-color: #fff;
    color: #fff;
  }

  .menu-area .menu-area-filter li:last-chlild {
    margin-right: 0px;
  }

  .menu-area .home-menu-items {
    background: #fff;
    padding: 10px;
  }

  .menu-area .home-menu-items .row.home-menu-items-active {
    margin-top: -30px;
  }

  .tab {
    display: none;
  }

  .tab-active {
    display: block;
  }

  .menu-area .home-menu-items .home-menu-dish {
    margin-top: 30px;
  }

  .menu-area .home-menu-items .home-menu-dish .home-menu-dish-img {
    padding-right: 0;
  }

  .menu-area .home-menu-items .home-menu-dish .home-menu-dish-body {
    border: 1px solid #8e0b0b;
    padding-left: 15px;
    border-left: 0px;
    padding-right: 15px;
    width: 100%;/*10000px*/
  }

  .menu-area .home-menu-items .home-menu-dish .home-menu-dish-body h3 {
    font-size: 14px;
    /* text-transform: uppercase; */
    display: inline-block;
    color: #8e0b0b;
    transition: all 400ms linear 0s;
    padding-top: 15px;
  }

  .menu-area .home-menu-items .home-menu-dish:hover .home-menu-dish-body h3,
  .menu-area .home-menu-items .home-menu-dish:hover .home-menu-dish-body h4 {
    color: #434949cc;
  }

  .menu-area .home-menu-items .home-menu-dish .home-menu-dish-body h4 {
    display: inline-block;
    float: right;
    font-size: 16px;
    text-transform: uppercase;
    color: #8e0b0b;
    padding-top: 15px;
  }

  .menu-area .home-menu-items .home-menu-dish .home-menu-dish-body p {
    font-size: 14px;
    color: #f85c07;
    /*padding: 5px 0px 15px 0px;*/
    position: relative;
    bottom: 30px;
    line-height: 15px;
  }

  .md-title {
    position: relative;
    bottom: 20px;
  }

  .home-menu-dish-footer{
    position: relative;
    bottom: 10px;
  }

  .menu-area .home-menu-items .btndish {
    display: inline-block;
    /*position: relative;
    bottom: 10px;*/
    width: 165px;
    line-height: 33px;
    letter-spacing: .42px;
    text-align: center;
    font-size: 12px;
    color: #8e0b0b;
    text-transform: uppercase;
    border: 1px solid #000;
  }

  .menu-area .home-menu-items .btndish:hover {
    color: #fff;
    border: 1px solid #8e0b0b;
    background: #8e0b0b;
  }

  /*.menu-area .home-menu-items .home-menu-dish .home-menu-dish-body ul {*/
  .mkd-ratingstar {
    display: inline-block;
    float: right;
    vertical-align: bottom;
    /*position: relative;
    bottom: 5px;*/
  }

  /*.menu-area .home-menu-items .home-menu-dish .home-menu-dish-body ul li {*/
  .mkd-ratingstar li {
    display: inline-block;
  }

  /*.menu-area .home-menu-items .home-menu-dish .home-menu-dish-body ul li a {*/
  .mkd-ratingstar li a {
    color: #ffcf3b;
    font-size: 14px;
  }

  .home-menu-dish-img, .home-menu-dish-body {
    display: table-cell;
    vertical-align: top;
  }

  .menu-area.menu_list_page {
    background: #fff;
  }

  .menu-area.menu_list_page:before {
    display: none;
  }

  .menu-area.menu_list_page .menu-area-filter {
    margin: 0px;
  }

  .menu-area.menu_list_page .feature_item {
    margin-top: 30px;
  }

  .menu-area-title {
    text-align: center;
    margin-bottom: 50px;
  }

  .menu-area-title h3 {
    font-size: 50px;
    font-family: "WindSong", cursive;
    font-weight: 500;
    color: #fff;
  }
/*End Menu CSS*/

/*About us Section CSS*/
  .aboutus-title {
    position: relative;
    float: left;
  }

  /*.aboutus-title h1 {
    font-size: 36px;
  }*/

  .aboutus-title:after {
    content: '';
    display: block;
    position: relative;
    width: 43%;
    border: 2px solid #8e0b0b; 
    float: right;
    right: 28%;
    bottom: 10px;
  }

  .aboutus-title h1:first-letter {
    text-transform: uppercase;
  }

  .desc_aboutus {
    font-size: 17px;
    letter-spacing: 1px;
    width: 65%;
    float: left;
    position: relative;
    left: 40px;
  }
/*End About us CSS

/*Recent Blog Css*/
  .single-blog {
    overflow: hidden;
  }
  .single-blog .thumb {
    overflow: hidden;
  }
  .single-blog img {
    overflow: hidden;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    cursor: pointer;
  }
  .single-blog:hover img {
    transform: scale(1.2);
  }

  .single-blog p {
    margin-top: 0;
    margin-bottom: 1rem;
  }

  .img-fluid {
    max-width: 100%;
    height: auto;
  }

  .single-blog a {
    color: #222;
  }

  .justify-content-between {
      justify-content: space-between !important;
  }

  a, a:focus, a:hover {
    text-decoration: none;
    outline: 0;
  }
  a {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  .single-blog h5 {
    margin-bottom: 12px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background-color: #000;
    color: #fff;
    font-weight: 100;
    padding: 11px 15px; 
    text-align: center;
    margin-top: 20px;
  }
/*End*/

/*Top Product*/
  .pb-60 {
      padding-bottom: 60px;
  }
  .mb-10 {
      margin-bottom: 10px;
  }
  .pb-20 {
      padding-bottom: 20px;
  }
  .pt-20 {
      padding-top: 20px;
  }
  .single-dish {
    overflow: hidden;
  }
  .single-dish .thumb {
    overflow: hidden;
  }
  .single-dish img {
    overflow: hidden;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    cursor: pointer;
  }
  .single-dish:hover img {
    transform: rotate(5deg) scale(1.2);
  }
/*End Top P*/

/*header*/
  .mkd-sticky {
    position: fixed;
    top: 0;
    background: #483c3c;
  }
/*End header*/

/*home menu*/
  .dish-menu-img {
    width: 130px;
    height: 130px;
  }
/*End*/

/*Close btn CSS*/
  .close-btn {
    /* position: absolute; */
    top: 8%;
    right: 38%;  
    transition: all 200ms !important;
    font-family: cursive;
    font-size: 30px !important;
    font-weight: 300;
    text-decoration: none;
    color: #ffffff !important;
    background-color: #a92b2b !important;
    cursor: pointer !important;
    height: 30px !important;
    width: 30px !important;
    border: none !important;
    border-radius: 25px !important;
/*    padding-top: 4px;
*/    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
      0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  }

  .close-btn:focus {
    outline: 0;
  }
/*----------------------------------------------------------------------------------------*/

/*disabled btn*/
  button:disabled, .disabled-btn {
    cursor: not-allowed !important;
  }
/*----------------------------------------------------------------------------------------*/

/*edit btn*/
.edit-btn, .add-btn {
  cursor: pointer;
  border: none;
  outline: none;
  -webkit-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out;
  color: white;
  width: 40px;
  height: 40px;
  
  background-color: #a92b2b;
  font-size: 20px;
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
/*----------------------------------------------------------------------------------------*/

/*Round btn effect*/
.rounded-btn {
  border-radius: 50% !important;
}

.rounded-btn:hover, .square-btn:hover {
  animation: pulse 1s infinite;
  transition: .3s;
}

.square-btn {
  border-radius: 5px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(.9);
  }
    100% {
    transform: scale(1);
  }
}
/*----------------------------------------------------------------------------------------*/

/*Pagination Css*/
.pagination {
  float: right;
}

.pagination a {
  font-size: 15px;
  width: 30px;
  height: 30px;
  background-color: transparent;
  color: #222;
  border: 1px solid rgb(0 0 0 / 29%);
  display: inline-block;
  vertical-align: middle;
  line-height: 30px;
  text-decoration: none;
  border-radius: 50%;
  margin: 5px;
  padding-left: 9%;
  transition: all 0.2s linear;
}

.pagination a:hover, .pagination a.active_page {
  color: #fff;
  background-color: #4d8fc8;
}
/*----------------------------------------------------------------------------------------*/

/*radio button css*/
.custom-radio[type="radio"],
.custom-checkbox[type="checkbox"]
{
  appearance: none;
  border: 2px solid #d3d3d3 !important;
  width: 20px !important;
  height: 20px !important;
  content: none;
  outline: none;
  border-radius:100%;
  margin: 0 5% 0 5%;
   
}

.custom-radio[type="radio"]:checked,
.custom-checkbox[type="checkbox"]:checked
 {
  appearance: none;
  border-radius:100%;
  outline: none;  
}

.custom-radio[type="radio"]:checked::before,
.custom-checkbox[type="checkbox"]:checked::before
{
  color: red !important;
  font-family: FontAwesome;
  content: "\f00c";
  font-weight: bolder;
  font-size: 16px;
  position: relative;
  bottom: 2px;
  left: 3px;
}

/*//Text color change and underline when clicked.*/
.custom-radio[type="radio"]:focus + label,
.custom-checkbox[type="checkbox"]:focus + label {
  transition: all .2s ease-out;
  -webkit-transition-delay: .75s;
  color:#1E0803;
  border-bottom:1px solid #1E0803;
  border-bottom-height:20px;
}
/*//Adds pointer cursor to text when hovered.*/
.custom-radio[type="radio"] + label,
.custom-checkbox[type="checkbox"] + label {
  cursor:pointer;
}

.custom-radio + label,
.custom-checkbox + label
{
  position: relative;
  top: -5px;
  left: 0px;
  color: #1E0803;
}
/*----------------------------------------------------------------------------------------*/

/*Aside Navbar CSS*/
.aside {
  float: left;
  color: #333;
  width: 22%;
  height: 100%;
  border-radius: 5px;
  background: transparent;
}

.account-navbar {
  padding: 25px 20px 30px;
}

.title-sidebar {
  padding-bottom: 10px;
  cursor: pointer;
  font-size: 18px;
  text-transform: capitalize;
  font-weight: 700;
  color: #222;
}

.account-content {
  margin-top: 20px;
}

.account-title {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  text-transform: capitalize;
  font-weight: 700;
  color: #222;
}


.account-content a {
  font-size: 14px;
  color: #333;
  display: block;
  padding: 12px;
  border-bottom: 1px solid #ece3e394;
}

.aside .active, .account-content a:hover {
  color: #a92b2b;
  font-weight: 800;
}

.account-content a i {
  margin-right: 10px;
}

.sidebar-text, .account-title, .title-sidebar {
  letter-spacing: 1px;
}

/*.aside .active::after, .account-content a:hover::after {
  content: "";
  position: absolute;
  background-color: transparent;
  bottom: 100%;
  right: 0;
  height: 35px;
  width: 35px;
  border-bottom-right-radius: 18px;
  box-shadow: 0 20px 0 0 #f7f7f7;
}

.aside .active::before, .account-content a:hover::before {
  content: "";
  position: absolute;
  background-color: transparent;
  top: 38px;
  right: 0;
  height: 35px;
  width: 35px;
  border-top-right-radius: 18px;
  box-shadow: 0 -20px 0 0 #f7f7f7;
}

.aside p {
  margin-top: 5%;
  font-size: 20px;
  font-weight: 600;
  padding: 7%;
  text-decoration-line: underline;
}*/
/*----------------------------------------------------------------------------------------*/

/*Emoji Rating CSS*/
.emoji-container {
    margin: 5%;
}

.emoji {
    text-align: center;
    position: relative;
    bottom: 20%;
    right: 18%;
}

.emoji input[type="radio"] {
    -webkit-appearance: none;
    width: 30px !important;
    height: 30px !important;
    border: none;
    cursor: pointer;
    transition: border .2s ease;
    filter: grayscale(100%);
    margin: 0 5px;
    transition: all .2s ease;
}
 
.emojis input[type="radio"].checked, 
.emojis input[type="radio"]:hover {
    filter: grayscale(0);
}

.emojis input[type="radio"]:focus {
    outline: 0;
}
/*----------------------------------------------------------------------------------------*/

.btn-actions {
  width: 100% !important;
  text-align: -webkit-center;
  position: relative;
  top: 2%;
  line-height: 30px;
}

.btn-actions button {
  /*width: 30%;*/
  width: fit-content;
  height: 35px;
  line-height: 0px;
  padding: 15px;
  text-align: center;
  border-radius: 7px !important;
  border: 1px solid !important;
  font-size: 15px !important;
  letter-spacing: 0.42px;
}

.confirmbtn-action {
    color: #fff !important;
    background: #a92b2b !important;
    border: none;
}

.confirmbtn-action:hover {
  color: #a92b2b !important;
  background: #fff !important;
}

.cancelbtn-action {
  color: #272829 !important;
  background: #b8bca8 !important;
  border: none;
} 

.cancelbtn-action:hover {
  background: #fff !important;
  color: #272829 !important;
}

.milarge-btns {
  width: 30% !important;
}

.rm-swal {
  width: 35% !important;
  height: 50% !important;
  padding: 10px !important;
}

/*Media*/
@media screen and (max-width: 1200px){
  #cstmraddress .mkdcard-body{
    grid-template-columns: repeat(1, 1fr) !important;
  }


  .address-card{
    max-width: 100% !important;
    width: 100% !important;
    padding-bottom: 40px !important;
  }
}

/*Tablets*/
@media screen and (min-width: 992px) and (max-width: 1200px){
  
}

@media screen and (max-width: 992px){
  .aside{
    width: 30%;
  }
}

@media screen and (max-width: 600px){
  .aside{
    width: 20%;
  }
}

@media screen and (min-width: 650px) and (max-width: 992px){
  .navbar-nav {
    margin: 0;
  }

  .navbar-right {
    float: right !important;
    margin-right: -15px;
  }

  .navbar-nav>li {
    float: left;
  }

  .navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .navbar-nav .active:not(.open) .dropdown-menu{
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .navbar-nav .active.open .dropdown-menu {
    display: block !important;
    position: absolute;
    left: -615%;
    opacity: 1;
    visibility: visible;
  }

  .aboutus-title:after {
    width: 60%;
    right: 0;
  }

  .desc_aboutus {
    top: 20px;
    left: 0;
    float: right;
    width: 100%
  }
}

@media screen and (min-width: 768px){
  .menu_desc{
    height: 500px !important;
  }
}

/* Laptop size back (laptop, tablet, cell phone) */
@media screen and (max-width: 768px) {
  /* Preloader */
  /* Spinner Loading */ 
  .container-preloader .animation-preloader .spinner {
  height: 8em;
  width: 8em;
  }
  /* Text Loading */
  .container-preloader .animation-preloader .txt-loading {
    font: bold 3.5em 'Montserrat', sans-serif;
  }

  .mkd-header .navbar-logo img{
    height: 80px;
    bottom: 0px;
    left: 3%;
  }

  .menu_desc{
    height: 100%;
  }

  .aboutus-title:after {
    width: 60%;
    right: 0;
  }

  .desc_aboutus {
    top: 20px;
    left: 0;
    float: right;
    width: 100%
  }
}
@media screen and (max-width: 650px) {
  /* Prelaoder */
  /* Spinner Loading */
  .container-preloader .animation-preloader .spinner {
  height: 7em;
  width: 7em;
  }
  /*Loading text */
  .container-preloader .animation-preloader .txt-loading {
    font: bold 2em 'Montserrat', sans-serif;
  }

  .mkd-header .navbar-nav{
    display: flex;
    justify-content: end;
    top: 0;
    background: #8e0b0b;
    width: 100%;
    height: 40px;
    margin-top: -20px;
    left: 15px;
  }

  .mkd-header .nav li a, .mkd-header .nav>.login-drpdown.active a{
    color: #fbdddd;
  }

  .navbar-nav .active:not(.open) .dropdown-menu{
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .navbar-nav .active.open .dropdown-menu {
    display: block !important;
    position: absolute;
    left: -407%;
    opacity: 1;
    visibility: visible;
  }

  .menu_desc h1 {
    font-size: 25px;
    margin-bottom: 30px;
    padding: 0 25px;
  }

  
  .home_desc {
    margin-top: 8%;
  }

  .home_desc_ntext {
    line-height: 213px;
  }

  .section-gap {
    padding: 30px 0;
  }
}


@media screen and (min-width: 321px) and (max-width: 1000px){
  #cookingLoader {
    right: 10%;
  }
}

@media screen and (min-width: 399px) and (max-width: 420px){
  .home_desc{
    margin-top: 14%;
  }
}

/*Small devices Size*/
@media screen and (max-width: 420px){
  .mkd-header .navbar-nav{
    display: flex;
    left: 15px;
    top: 0;
    background: #8e0b0b;
    padding: 0 3%;
    width: 100%;
    height: 40px;
    margin-top: 0;
  }
  .mkd-header .nav li a{
    color: #fbdddd;
  }

  .mkd-header .nav>.login-drpdown.active a {
    color: #fbdddd;
  }

  .navbar-nav .active.open .dropdown-menu {
    display: block !important;
    position: absolute;
    left: -407%;
  }

  .navbar-nav .active .dropdown-menu {
    display: none !important;
  }

  .desc-text {
    font-size: 25px;
    line-height: 30px;
  }

  .home_desc_ntext {
    font-size: 210%;
    line-height: 203px;
  }

  /* .desc-bgtext {
    top: 55%;
    left: 57%;
    width: 60%;
  } */

  .banner-area {
    min-height: 250px;
  }
  .banner-area .banner-item {
    height: 255px;
    text-align: center;
  }

  .banner-area .banner-content h4 {
    font-size: 14px;
  }

  .banner-content h1 {
    font-size: 34px;
  }

  .banner-content p, .banner-content .banner-btn {
    font-size: 30px;
    line-height: 35px;
  }

  .menu_desc h1 {
    font-size: 20px;
  }

  .menu_desc img {
    width: 30px;
  }

  .menu-area .home-menu-items .dish-menu-img{
    width: 90px;
    height: 100%;
  }

  .menu-area .home-menu-items .home-menu-dish {
    border: 1px solid #8e0b0b;
    display: flex;
  }

  .menu-area .home-menu-items .home-menu-dish .home-menu-dish-body {
    border: none;
    padding-left: 7px;
    padding-right: 5px;
  }

}


@media screen and (max-width: 399px) {
  .home_desc {
    margin-top: 16%;
  }

  /* .desc-bgtext {
    top: 67%;
  } */
}


/*Smartwatches Size*/
@media screen and (max-width: 320px){
  .mkd-header .navbar-nav {
    display: flex;
    font-size: 79%;
    left: 15px;
    right: 0;
    top: 0;
    background: #8e0b0b;
    margin-top: 0;
    width: 100%;
    height: 40px;
  }

  .mkd-header .nav li a {
    color: #fbdddd;
  }

  .mkd-header .nav>.login-drpdown.active a {
    color: #fbdddd;
  }

  .navbar-nav .active.open .dropdown-menu{
    left: -435%;
  }

  .menu-area .home-menu-items .dish-menu-img {
    width: 70px;
    height: 100%
  }

  .home_desc_ntext {
    font-size: 170%;
    line-height: 235px;
  }

  .close-btn {
    top: 0;
    right: 40%;
  }

  .sticky-md-header .close-btn {
    top: 24%;
  }
}

@media screen and (max-width: 313px) {
  .menu-area .home-menu-items a.btndish {
    top: 15px;
  }

  .aboutus-title h1 {
    font-size: 30px;
  }
}

@media screen and (min-width: 261px) and (max-width: 270px) {
  .mkd-header .navbar-nav {
    font-size: 79%;
    height: 60px;
  }
}

@media screen and (max-width: 261px) {
  .mkd-header .navbar-nav {
    font-size: 60%;
  }
  
  .home_desc {
    margin-top: 30%;
  }
}