@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Andika:ital,wght@0,400;0,700;1,400;1,700&display=swap");
html,
body {
overflow-x: hidden;
}
.bg-merah {
background-color: #f54748;
}

section.half-section {
padding: 80px 0;
}
section.halff-section {
padding-top: 80px;
}
section.order-section {
padding: 50px;
}
section.small-section {
height: 470px;
}
section.small-section.menu {
height: 520px;
width: 1920;
}
section.extra-small-section {
padding-top: 10px;
}


.nav-active {
background: #fff;
color: #f54748;
}
.zoomin:hover {
transform: scale(1.2);
}
.fades {
-webkit-animation-name: fades;
-webkit-animation-duration: 1.5s;
animation-name: fades;
animation-duration: 1.5s;
}

@-webkit-keyframes fades {
from {
opacity: 0.4;
}

to {
opacity: 1;
}
}

@keyframes fades {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}

.bg-merah {
background-color: #f54748;
}
.bg-white {
color: white;
}

.txt-putih {
color: white;
}
.navbar-nav li a {
font-family: "Nunito", sans-serif;
color: rgb(254, 254, 254) !important;
font-size: 18px;
font-weight: 400;
margin-top: 10px;
margin-left: 8px;
}

.navbar-nav li a:hover {
background-color: white;
color: #f54748 !important;
transition: 0.5s;
border-radius: 5px;
padding: 10px 20px;
}

.main-text-slider {
font-family: "Nunito", sans-serif;
margin-top: 40px;
font-weight: 700;
font-size: 64px;
color: white;
}
.txt-menu {
font-family: "Nunito", sans-serif;
font-weight: 700;
font-size: 22px;
margin-top: 7px;
color: white;
}
.deskripsi-menu {
font-family: "Nunito", sans-serif;
font-weight: 400;
font-size: 22px;
color: white;
}
hr.garis {
border: 3px solid #fff;
}

.gambar {
position: absolute;
top: 0px;
}
.gambar-slider {
width: 50vw;
height: 650px;
/* transition: 0.5s all ease-in-out; */
}
.gambar-slider:hover {
/* transform: scale(1.1); */
}
.slider-arrow {
position: absolute;
top: 550px;
left: 1075px;
}
.btn-circle.btn-xl {
width: 50px;
height: 50px;
padding: 13px 18px;
margin-left: 5px;
border-radius: 180px;
font-size: 15px;
text-align: center;
}
.small-icon {
font-size: 18px;
}
.medium-icon {
font-size: 30px;
}
.icon-map {
position: relative;
bottom: 5px;
margin-right: 10px;
}
.icon-kontak {
margin-right: 10px;
}

.set-lingkaran {
position: relative;
top: 115px;
display: block;
margin-left: auto;
margin-right: auto;
width: 290px;
}

.gambar-about {
position: relative;
bottom: 155px;
display: block;
margin-left: auto;
margin-right: auto;
width: 250px;
}
.putar {
-moz-animation: rota-full-kanan 8s infinite linear;
-webkit-animation: rota-full-kanan 8s infinite linear;
}
@-moz-keyframes rota-full-kanan {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes rota-full-kanan {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

.sc-about {
color: black;
font-family: "Andika";
font-weight: 400;
font-size: 22px;
}
.tt-about {
color: #f54748;
font-family: "Nunito";
font-weight: 700;

font-size: 44px;
}
.desc-about {
font-family: "Nunito";
font-weight: 400;
font-size: 22px;
}
.tombol {
background-color: #f54748;
color: white;
padding: 8px 13px;
border-radius: 8px;
font-family: "Nunito";
font-weight: 400;
font-size: 15px;
border: none;
}
.tombol:hover {
background-color: #a2070b;
transition: 0.3s;
}
.menu {
background: linear-gradient(
90deg,
rgba(245, 71, 72, 0.1) 0%,
rgba(245, 71, 72, 0) 100%
);
}

.mobile {
display: none;
}
.tablinks {
cursor: pointer;
}

.tabcontent {
display: none;
}
.tabcontent.active {
display: block;
}
.sc-menu {
font-family: "Andika";
font-weight: 400;
font-size: 45px;
margin-bottom: 15px;
}
.nama-menu {
background-color: #f54748;
padding: 5px 83px;
color: white;
border-radius: 5px;
font-family: "Nunito";
font-weight: 700;
font-size: 24px;
}
.sc-menu-terbaik {
position: relative;
left: 95px;
}

.title-best-menu{
position: relative;
top: 70px;

}
.sc-best-menu{
font-family: 'Andika';
font-weight: 400;
font-size: 42px;
margin-bottom: 28px;
}
.name-best-menu{
font-family: 'Nunito';
font-weight: 700;
font-size: 20px;
color: white;
padding: 10px 85px;
background-color: #F54748;
border-radius: 10px;
}
.desc-best-menu{
margin-top: 28px;
font-family: 'Nunito';
font-weight: 400;
font-size: 22px;
line-height: 30px;
}
.best-menu-image{
width: 100%;
height: 100%;
display: flex;
}
.best-menu-image img{
margin-right: 30px;
margin-top: 23px;
cursor: pointer;
width: 100px;
height: 100px;
transition:0.3s;
}
.best-menu-image img:hover{
/* width: 105px;
height: 105px; */
position: relative;
bottom: 8px;
}
.best-menu-big img{
z-index: 2;
position: relative;
left: 140px;
top: 85px;
display: flex;
justify-content: center;
width: 350px;
}
.bg-menu-terbaik{
position: relative;
bottom: 465px;
left: 30px;
width: 600px;
}
.kotak-merah img {
position: relative;
left: 155px;
width: 560px;
height: 420px;
}
.kotak-merah-1024 img {
display: none;
}

.menus-terbaik {
position: relative;
left: 100px;
bottom: 445px;
}

.slider-menu-terbaik {
padding: 135px 0;
}

.kiri-arrow {
position: absolute;
bottom: 100px;
right: 755px;
font-size: 25px;
color: #464646;
}
.kanan-arrow {
position: absolute;
bottom: 100px;
right: 510px;
font-size: 25px;
color: #464646;
}

.kiri-arrow,
.kanan-arrow:hover {
cursor: pointer;
}

.slider-menu-terbaik .slick-list {
height: 220px;
}

.tt-menu-terbaik {
position: relative;
bottom: 245px;
/* padding: 135px 0; */
}

.gambar-menu-terbaik {
/* vertical-align: middle; */
width: 170px;
border: 8px solid #f15555;
opacity: 0.7;
border-radius: 300px;
}

.gambar-menu-terbaik.active-menu {
width: 195px;
border: 10px solid #ff0000;
opacity: 1;
transition: all 0s linear;
}

.sc-menu-2 {
font-family: "Nunito";
color: #f54748;
font-weight: 700;
font-size: 22px;
}
.menu-arrow {
position: relative;
text-align: end;
top: 65px;
}

.prev-arrow {
position: absolute;
bottom: 450px;
left: 810px;
color: #fff;
width: 50px;
height: 50px;
background: #b0aeae;
border-radius: 50%;
text-align: center;
line-height: 50px;
display: inline-block;
cursor: pointer;
transition: 0.2s;
}
.prev-arrow:hover {
background: #f54748;
}
.next-arrow {
position: absolute;
bottom: 450px;
left: 865px;
color: #fff;
width: 50px;
height: 50px;
background: #f54748;
border-radius: 50%;
text-align: center;
line-height: 50px;
display: inline-block;
cursor: pointer;
}

.gambar-menu {
position: relative;
width: 35px;
margin-right: 10px;
background-color: rgb(255, 255, 255);
border-radius: 90px;
}

.sidebar {
margin-bottom: 18px;
padding: 10px 15px;
background-color: #fefe;
border-radius: 30px;
transition: 0.3s;
}
.sidebar.active {
background-color: #f54748;
color: white;
}

.menu-side a {
font-family: "Nunito";
font-style: normal;
font-weight: 400;
font-size: 15px;
text-decoration: none;
color: rgb(0, 0, 0);
}

.sidebar:hover {
background-color: #f54748;
transition: 0.3s;
color: white;
}

.slider-menu-terbaik .slick-list .slick-track {
display: flex !important;
align-items: center !important;
}
.slider-menu .slick-list .slick-track {
margin-left: 0px;
}

.cards {
position: relative;
top: -75px;

transition: transform 0.25s;
}

.cards img {
width: 300px;
height: 350px;
border-radius: 10px;
}
.cards:hover {

transform: scale(1.1);
}
.shadow {
}
.bottom-cards {
position: relative;
top: 350px;
padding: 5px;
width: 300px;
box-shadow: inset 5px -30px 45px #000000;
}
.cards h3 {
margin-left: 10px;
font-family: "Nunito";
font-weight: 700;
font-size: 22px;
color: #fff;
margin-bottom: 0px;
}
.cards h4 {
margin-left: 10px;
font-size: 15px;
color: #fff;
}
.cards h4 span {
position: relative;
font-weight: 700px;
font-size: 20px;
color: #e7b052;
}

.txt-menu-2 {
font-family: "Andika";
font-weight: 400;
font-size: 42px;
margin-bottom: 30px;
}
.tersedia-di {
text-align: center;
align-items: center;
color: #f54748;
font-family: "Andika";
font-weight: 400;
font-size: 40px;
}
.ojol {
display: flex;
}
.shopee-food,
.grab-food,
.go-food {
transition: transform 0.25s;
margin-left: 30px;
max-width: 168px;
height: 50px;
}
.lokasi {
margin-left: 26px;
}
.lokasi-kotak{
height: 471px;
}
.gmap {
width: 528px;
height: 473px;
}
.lokasi-kami {
font-family: "Andika";
color: white;
font-weight: 400;
font-size: 40px;
margin-top: 62px;
}
.txt-lokasi {
margin-top: 67px;
font-family: "Nunito";
color: white;
font-weight: 700;
font-size: 34px;
}
.desc-lokasi {
font-family: "Nunito";
color: white;
font-weight: 400;
font-size: 24px;
}
.kontak {
margin-top: 13px;
font-family: "Nunito";
color: white;
font-weight: 400;
font-size: 24px;
}
.txt-footer {
padding-top: 15px;
text-align: left;
font-family: "Nunito";
color: #fff;
font-weight: 700;
font-size: 14px;
}


@media (min-width: 992px) and (max-width: 1199.98px) { 

.navbar-nav li a {
font-size: 18px;
}

.navbar-nav li a:hover {
transition: 0.5s;
border-radius: 5px;
padding: 10px 20px;
}

.main-text-slider {
margin-top: 40px;
font-size: 54px;
}
.txt-menu {
font-size: 22px;
margin-top: 7px;
}
.deskripsi-menu {
font-size: 22px;
}

.gambar {
position: absolute;
top: 0px;
}
.gambar-slider {
width: 50vw;
height: 648px;

/* transition: 0.5s all ease-in-out; */
}
.gambar-slider:hover {
/* transform: scale(1.1); */
}
.slider-arrow {
position: absolute;
top: 570px;
left: 865px;
}
.btn-circle.btn-xl {
width: 50px;
height: 50px;
padding: 13px 18px;
margin-left: 5px;
border-radius: 180px;
font-size: 15px;
text-align: center;
}
.small-icon {
font-size: 18px;
}
.medium-icon {
font-size: 30px;
}
.icon-map {
position: relative;
bottom: 5px;
margin-right: 10px;
}
.icon-kontak {
margin-right: 10px;
}

.set-lingkaran {
top: 115px;
margin-left: auto;
margin-right: auto;
width: 290px;
}

.gambar-about {
position: relative;
bottom: 155px;
margin-left: auto;
margin-right: auto;
width: 250px;
}


.sc-about {
font-size: 22px;
}
.tt-about {
font-size: 44px;
}
.desc-about {
font-size: 22px;
}
.tombol {
padding: 8px 13px;
border-radius: 8px;
font-size: 15px;
}

.sc-menu {
font-size: 45px;
margin-bottom: 15px;
}
.nama-menu {
padding: 5px 83px;
border-radius: 5px;
font-size: 24px;
}
.sc-menu-terbaik {
position: relative;
left: 95px;
}

.title-best-menu{
position: relative;
top: 70px;
}
.sc-best-menu{
font-size: 42px;
margin-bottom: 28px;
}
.name-best-menu{
font-size: 20px;
padding: 10px 85px;
border-radius: 10px;
}
.desc-best-menu{
margin-top: 28px;
font-size: 22px;
}
.best-menu-image{
width: 100%;
height: 100%;
display: flex;
}
.best-menu-image img{
margin-right: 30px;
margin-top: 23px;
width: 100px;
height: 100px;
transition:0.3s;
}
.best-menu-image img:hover{
/* width: 105px;
height: 105px; */
position: relative;
bottom: 8px;
}
.best-menu-big img{
top: 110px;
left: 90px;
width: 330px;
}
.bg-menu-terbaik{
position: relative;
bottom: 390px;
left: 0px;
width: 535px;
}
.kotak-merah img {
position: relative;
left: 155px;
width: 560px;
height: 420px;
}
.kotak-merah-1024 img {
display: none;
}

.menus-terbaik {
position: relative;
left: 100px;
bottom: 445px;
}

.slider-menu-terbaik {
padding: 135px 0;
}

.kiri-arrow {
position: absolute;
bottom: 100px;
right: 755px;
font-size: 25px;
color: #464646;
}
.kanan-arrow {
position: absolute;
bottom: 100px;
right: 510px;
font-size: 25px;
color: #464646;
}

.kiri-arrow,
.kanan-arrow:hover {
cursor: pointer;
}

.slider-menu-terbaik .slick-list {
height: 220px;
}

.tt-menu-terbaik {
position: relative;
bottom: 245px;
/* padding: 135px 0; */
}

.gambar-menu-terbaik {
/* vertical-align: middle; */
width: 170px;
border: 8px solid #f15555;
opacity: 0.7;
border-radius: 300px;
}

.gambar-menu-terbaik.active-menu {
width: 195px;
border: 10px solid #ff0000;
opacity: 1;
transition: all 0s linear;
}

.sc-menu-2 {
font-family: "Nunito";
color: #f54748;
font-weight: 700;
font-size: 22px;
}
.menu-arrow {
position: relative;
text-align: end;
top: 65px;
}

.prev-arrow {
position: absolute;
bottom: 450px;
left: 660px;
color: #fff;
width: 50px;
height: 50px;
background: #b0aeae;
border-radius: 50%;
text-align: center;
line-height: 50px;
display: inline-block;
cursor: pointer;
transition: 0.2s;
}
.prev-arrow:hover {
background: #f54748;
}
.next-arrow {
position: absolute;
bottom: 450px;
left: 720px;
color: #fff;
width: 50px;
height: 50px;
background: #f54748;
border-radius: 50%;
text-align: center;
line-height: 50px;
display: inline-block;
cursor: pointer;
}

.gambar-menu {
position: relative;
width: 33px;
margin-right: 10px;
background-color: rgb(255, 255, 255);
border-radius: 90px;
}

.sidebar {
margin-bottom: 18px;
padding: 10px 15px;
background-color: #fefe;
border-radius: 30px;
transition: 0.3s;
}
.sidebar.active {
background-color: #f54748;
color: white;
}

.menu-side a {
font-family: "Nunito";
font-style: normal;
font-weight: 400;
font-size: 15px;
text-decoration: none;
color: rgb(0, 0, 0);
}

.sidebar:hover {
background-color: #f54748;
transition: 0.3s;
color: white;
}

.slider-menu-terbaik .slick-list .slick-track {
display: flex !important;
align-items: center !important;
}
.slider-menu .slick-list .slick-track {
margin-left: 0px;
}

.cards {
position: relative;
top: -75px;

transition: transform 0.25s;
}

.cards img {
width: 250px;
height: 340px;
border-radius: 10px;
}
.cards:hover {

transform: scale(1.1);
}
.shadow {
}
.bottom-cards {
position: relative;
top: 343px;
padding: 5px;
width: 250px;
box-shadow: inset 5px -30px 45px #000000;
}
.cards h3 {
margin-left: 10px;
font-family: "Nunito";
font-weight: 700;
font-size: 22px;
color: #fff;
margin-bottom: 0px;
}
.cards h4 {
margin-left: 10px;
font-size: 15px;
color: #fff;
}
.cards h4 span {
position: relative;
font-weight: 700px;
font-size: 20px;
color: #e7b052;
}

.txt-menu-2 {
font-family: "Andika";
font-weight: 400;
font-size: 42px;
margin-bottom: 30px;
}
.tersedia-di {
text-align: center;
align-items: center;
color: #f54748;
font-family: "Andika";
font-weight: 400;
font-size: 40px;
}
.ojol {
display: flex;
}
.shopee-food,
.grab-food,
.go-food {
transition: transform 0.25s;
margin-left: 20px;
width: 130px;
height: 40px;
}
.lokasi {
margin-left: 26px;
}
.lokasi-kotak{
height: 471px;
}
.gmap {
width: 528px;
height: 473px;
}
.lokasi-kami {
font-family: "Andika";
color: white;
font-weight: 400;
font-size: 40px;
margin-top: 62px;
}
.txt-lokasi {
margin-top: 67px;
font-family: "Nunito";
color: white;
font-weight: 700;
font-size: 34px;
}
.desc-lokasi {
font-family: "Nunito";
color: white;
font-weight: 400;
font-size: 24px;
}
.kontak {
margin-top: 13px;
font-family: "Nunito";
color: white;
font-weight: 400;
font-size: 24px;
}
.txt-footer {
padding-top: 15px;
text-align: left;
font-family: "Nunito";
color: #fff;
font-weight: 700;
font-size: 14px;
}

.slick-slide.slick-current {
}
}

@media (min-width: 768px) and (max-width: 991.98px){  
section.small-section {
height: 365px;
}
section.small-section.menu {
height: 460px;
}
.nav-active {
background: #fff;
color: #f54748;
}
.zoomin:hover {
transform: scale(1.2);
}
.fades {
-webkit-animation-name: fades;
-webkit-animation-duration: 1.5s;
animation-name: fades;
animation-duration: 1.5s;
}

@-webkit-keyframes fades {
from {
opacity: 0.4;
}

to {
opacity: 1;
}
}

@keyframes fades {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}

.bg-merah {
background-color: #f54748;
}
.bg-white {
color: white;
}

.txt-putih {
color: white;
}
.navbar-nav li a {
font-family: "Nunito", sans-serif;
color: rgb(254, 254, 254) !important;
font-size: 18px;
font-weight: 400;
margin-top: 10px;
margin-left: 8px;
}

.navbar-nav li a:hover {
background-color: white;
color: #f54748 !important;
transition: 0.5s;
border-radius: 5px;
padding: 10px 20px;
}

.main-text-slider {
font-family: "Nunito", sans-serif;
margin-top: 40px;
font-weight: 700;
font-size: 28px;
color: white;
}
.txt-menu {
font-family: "Nunito", sans-serif;
font-weight: 700;
font-size: 16px;
margin-top: 7px;
color: white;
}
.deskripsi-menu {
font-family: "Nunito", sans-serif;
font-weight: 400;
font-size: 16px;
color: white;
}
hr.garis {
border: 3px solid #fff;
}

.gambar {
position: absolute;
top: 0px;
}
.gambar-slider {
    width: 50vw;
height: 468px;
/* transition: 0.5s all ease-in-out; */
}
.gambar-slider:hover {
/* transform: scale(1.1); */
}
.slider-arrow {
position: absolute;
top: 395px;
left: 635px;
}
.btn-circle.btn-xl {
width: 50px;
height: 50px;
padding: 13px 18px;
margin-left: 5px;
border-radius: 180px;
font-size: 15px;
text-align: center;
}
.small-icon {
font-size: 18px;
}
.medium-icon {
font-size: 30px;
}
.icon-map {
position: relative;
bottom: 5px;
margin-right: 10px;
}
.icon-kontak {
margin-right: 10px;
}

.set-lingkaran {
position: relative;
top: 115px;
display: block;
margin-left: auto;
margin-right: auto;
width: 240px;
}

.gambar-about {
position: relative;
bottom: 105px;
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
}
.putar {
-moz-animation: rota-full-kanan 8s infinite linear;
-webkit-animation: rota-full-kanan 8s infinite linear;
}
@-moz-keyframes rota-full-kanan {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes rota-full-kanan {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

.sc-about {
color: black;
font-family: "Andika";
font-weight: 400;
font-size: 16px;
}
.tt-about {
color: #f54748;
font-family: "Nunito";
font-weight: 700;
font-size: 28px;
}
.desc-about {
font-family: "Nunito";
font-weight: 400;
font-size: 16px;
}
.tombol {
margin-top: 10px;
background-color: #f54748;
color: white;
padding: 7px 12px;
border-radius: 5px;
font-family: "Nunito";
font-weight: 400;
font-size: 17px;
border: none;
}
.tombol:hover {
  /*  */
}
.menu {
background: linear-gradient(
90deg,
rgba(245, 71, 72, 0.1) 0%,
rgba(245, 71, 72, 0) 100%
);
}

.mobile {
display: none;
}
.tablinks {
cursor: pointer;
}

.tabcontent {
display: none;
}
.tabcontent.active {
display: block;
}
.sc-menu {
font-family: "Andika";
font-weight: 400;
font-size: 45px;
margin-bottom: 15px;
}
.nama-menu {
background-color: #f54748;
padding: 5px 83px;
color: white;
border-radius: 5px;
font-family: "Nunito";
font-weight: 700;
font-size: 24px;
}
.sc-menu-terbaik {
position: relative;
left: 95px;
}

.title-best-menu{
position: relative;
top: 60px;

}
.sc-best-menu{
font-family: 'Andika';
font-weight: 400;
font-size: 28px;
margin-bottom: 28px;
}
.name-best-menu{
font-family: 'Nunito';
font-weight: 700;
font-size: 20px;
color: white;
padding: 10px 40px;
background-color: #F54748;
border-radius: 10px;
}
.desc-best-menu{
margin-top: 28px;
font-family: 'Nunito';
font-weight: 400;
font-size: 16px;
line-height: 30px;
}
.best-menu-image{
width: 100%;
height: 100%;
display: flex;
}
.best-menu-image img{
margin-right: 30px;
margin-top: 23px;
cursor: pointer;
width: 80px;
height: 80px;
transition:0.3s;
}
.best-menu-image img:hover{
/* width: 105px;
height: 105px; */
position: relative;
bottom: 8px;
}
.best-menu-big img{
z-index: 2;
position: relative;
top: 108px;
left: 90px;
width: 250px;
}
.bg-menu-terbaik{
position: relative;
bottom: 300px;
left: 0px;
width: 452px;
}
.kotak-merah img {
position: relative;
left: 155px;
width: 560px;
height: 420px;
}
.kotak-merah-1024 img {
display: none;
}

.menus-terbaik {
position: relative;
left: 100px;
bottom: 445px;
}

.slider-menu-terbaik {
padding: 135px 0;
}


.sc-menu-2 {
font-family: "Nunito";
color: #f54748;
font-weight: 700;
font-size: 16px;
}
.menu-arrow {
position: relative;
text-align: center;
top: 460px;
}

.prev-arrow {
position: absolute;
bottom: 330px;
left: 455px;
color: #fff;
width: 50px;
height: 50px;
background: #b0aeae;
border-radius: 50%;
text-align: center;
line-height: 50px;
display: inline-block;
cursor: pointer;
transition: 0.2s;
}
.prev-arrow:hover {
background: #f54748;
}
.next-arrow {
position: absolute;
bottom: 330px;
left: 515px;
color: #fff;
width: 50px;
height: 50px;
background: #f54748;
border-radius: 50%;
text-align: center;
line-height: 50px;
display: inline-block;
cursor: pointer;
}

.gambar-menu {
position: relative;
width: 22px;
margin-right: 5px;
background-color: rgb(255, 255, 255);
border-radius: 90px;
}

.sidebar {
margin-bottom: 12px;
padding: 8px 9px;
background-color: #fefe;
border-radius: 30px;
transition: 0.3s;
}
.sidebar.active {
background-color: #f54748;
color: white;
}

.menu-side a {
font-family: "Nunito";
font-style: normal;
font-weight: 400;
font-size: 12px;
text-decoration: none;
color: rgb(0, 0, 0);
}

.sidebar:hover {
background-color: #f54748;
transition: 0.3s;
color: white;
}

.slider-menu-terbaik .slick-list .slick-track {
display: flex !important;
align-items: center !important;
}
.slider-menu .slick-list .slick-track {
margin-left: 0px;
}

.cards {
position: relative;
top: -75px;

transition: transform 0.25s;
}

.cards img {
width: 180px;
height: 255px;
border-radius: 10px;
}
.cards:hover {

transform: scale(1.1);
}
.shadow {
}
.bottom-cards {
position: relative;
top: 255px;
padding: 5px;
width: 180px;
box-shadow: inset 5px -30px 45px #000000;
}
.cards h3 {
margin-left: 10px;
font-family: "Nunito";
font-weight: 700;
font-size: 16px;
color: #fff;
margin-bottom: 0px;
}
.cards h4 {
margin-left: 10px;
font-size: 14px;
color: #fff;
}
.cards h4 span {
position: relative;
font-weight: 700px;
font-size: 16px;
color: #e7b052;
}

.txt-menu-2 {
font-family: "Andika";
font-weight: 400;
font-size: 28px;
margin-bottom: 30px;
}
.tersedia-di {
text-align: center;
align-items: center;
color: #f54748;
font-family: "Andika";
font-weight: 400;
font-size: 28px;
}
.ojol {
margin-left: 0px;
display: flex;
justify-content: center;
}
.shopee-food,
.grab-food,
.go-food {
transition: transform 0.25s;
margin-left: 20px;
width: 120px;
height: 30px;
}
.lokasi {
margin-left: 26px;
}
.lokasi-kotak{
height: 360px;
}
.gmap {
width: 350px;
height: 360px;
}
.lokasi-kami {
font-family: "Andika";
color: white;
font-weight: 400;
font-size: 28px;
margin-top: 62px;
}
.txt-lokasi {
margin-top: 50px;
font-family: "Nunito";
color: white;
font-weight: 700;
font-size: 22px;
}
.desc-lokasi {
font-family: "Nunito";
color: white;
font-weight: 400;
font-size: 16px;
}
.kontak {
margin-top: 13px;
font-family: "Nunito";
color: white;
font-weight: 400;
font-size: 16px;
}
.txt-footer {
padding-top: 15px;
text-align: left;
font-family: "Nunito";
color: #fff;
font-weight: 700;
font-size: 14px;
}

.slick-slide.slick-current {
}
}

@media (min-width: 575px) and (max-width: 767px) { 
    section.small-section.menu{
        height: 550px;
        }
        .menu {
          background: linear-gradient(0deg, rgba(245, 71, 72, 0) 30%, rgba(245, 71, 72, 0.2) 100%);
          }
        
        .title-best-menu{
        top:30px
        }
        .sc-best-menu{
        font-family: 'Andika';
        font-weight: 400;
        font-size: 26px;
        margin-bottom: 28px;
        text-align: center;
        }
        .name-best-menu{
        position: relative;
        top: 275px;
        margin: 0 auto;
        display: table;
        text-align: center;
        font-size: 14px;
        padding: 5px 35px;
        border-radius: 10px;
        }
        .desc-best-menu{
          position: relative;
          top: 260px;
          text-align: center;
        margin-top: 28px;
        font-family: 'Nunito';
        font-weight: 400;
        font-size: 16px;
        line-height: 30px;
        }
        .best-menu-image{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        }
        .best-menu-image img{
        position: relative;
        top: 55px;
        left: 15px;
        display: flex;
        justify-content: center;
        margin-top: 13px;
        cursor: pointer;
        width: 60px;
        height: 60px;
        transition:0.3s;
        }
        
        .best-menu-big img{
          left: 0;
          justify-content: center;
          margin: 0 auto;
        top: -165px;
        width: 160px;
        }
        .bg-menu-terbaik{
        display: none;
        }
        section.half-section {
        padding: 35px 0;
        }
        section.order-section{
          margin-top: 30px;
        height: 145px;
        }
        
        .desktop {
        display: none;
        }
        .tablet {
        display: none;
        }
        .mobile {
        display: block;
        }
        
        section.extra-small-section {
        padding: 30px 0px;
        }
        section.halff-section {
        padding-top: 40px;
        height: 350px;
        }
        
        .gambar {
        order: 1;
        left: 0px;
        }
        .gambar-slider {
            width: 100vw;
        height: 390px;
        }
        .main-text-slider {
        margin-top: 380px;
        font-size: 34px;
        text-align: center;
        }
        .deskripsi-menu{
          font-size: 14px;
          text-align: center;
        }
        .txt-menu {
        font-size: 14px;
        text-align: center;
        }
        .btn-circle.btn-xl {
        width: 45px;
        height: 45px;
        padding: 10px 15px;
        }
        .slider-arrow {
        position: absolute;
        top: 320px;
        left: 20px;
        }
        
        .set-lingkaran {
          position: relative;
          top: 101px;
          right: 135px;
          width: 250px;
        }
        
        .gambar-about {
          left: -115px;
          bottom: 130px;
          width: 210px;
        }
        .tt-menu-terbaik {
        position: relative;
        top: 50px;
        }
        .kotak-merah-mobile img {
        
        display: block;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        top: 90px;
        width: 950px;
        }
        .menus-terbaik-mobile {
        margin: auto;
        right: 1px;
        bottom: 25px;
        }
        .gambar-menu-terbaik-mobile {
        display: block;
        margin-left: auto;
        margin-right: auto;
        
        width: 100px;
        border: 10px solid #f15555;
        border-radius: 90px;
        opacity: 0.9;
        }
        .gambar-menu-terbaik-mobile.active-menu-mobile {
        position: relative;
        width: 100px;
        bottom: 0px;
        border: 10px solid #ff0000;
        border-radius: 90px;
        opacity: 1;
        }
        .tt-about {
        font-size: 34px;
        }
        .desc-about{
          font-size: 14px;
        }
        .sc-about {
        font-size: 16px;
        }
        .tombol {
        margin-top: 10px;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 12px;
        }
        .sc-menu {
        text-align: center;
        font-size: 20px;
        }
        .nama-menu {
        display: table;
        margin: 0 auto;
        text-align: center;
        font-weight: 500;
        padding: 5px 5px;
        border-radius: 5px;
        font-size: 14px;
        }
        .sc-menu-2 {
        font-size: 16px;
        margin-bottom: 0px;
        }
        .txt-menu-2 {
        font-size: 26px;
        margin-bottom: 5px;
        }
        .menu-side {
        position: relative;
        display: inline-flex;
        margin-bottom: 10px;
        left: -5px;
        }
        .gambar-menu {
        margin-left: 6px;
        width: 25px;
        border-radius: 0;
        }
        .sidebar {
        margin-top: 10px;
        margin-bottom: 15px;
        margin-left: 8px;
        padding: 5px 10px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
        }
        
        .menu-side a {
        text-align: center;
        font-size: 12px;
        }
        .cards {
        position: relative;
        top: -65px;
        }
        .cards img {
        width: 160px;
        height: 190px;
        border-radius: 10px;
        }
        .bottom-cards {
        width: 160px;
        position: relative;
        top: 190px;
        padding: 5px;
        }
        .cards h3 {
        margin-left: 10px;
        font-size: 14px;
        color: #fff;
        margin-bottom: 0px;
        }
        .cards h4 {
        margin-left: 10px;
        font-size: 12px;
        color: #fff;
        }
        .cards h4 span {
        position: relative;
        font-weight: 700px;
        font-size: 14px;
        color: #e7b052;
        }
        .tersedia-di {
        font-size: 26px;
        }
        .ojol{
        display: flex;
        justify-content: center;
        }
        .shopee-food,
        .grab-food,
        .go-food {
        margin-left: 16px;
        margin-right: 16px;
        margin-top: 10px;
        max-width: 100%;
        height: 23px;
        }
        .gmap {
        width: 210px;
        height: 240px;
        }
        .lokasi-kotak{
        height: 240px;
        }
        .lokasi-kami,
        .icon-map {
        font-size: 26px;
        margin-top: 15px;
        }
        .txt-lokasi,
        .desc-lokasi,
        .icon-kontak,
        .kontak {
        font-size: 16px;
        line-height: 15px;
        }
        .txt-lokasi {
        margin-top: 28px;
        }
        
        .kontak {
        margin-top: 28px;
        }
        .txt-footer{
          font-size: 16px;
        }
}
@media (min-width: 320px) and (max-width: 574px) { 
  section.small-section.menu{
      height: 550px;
      }
      .menu {
        background: linear-gradient(0deg, rgba(245, 71, 72, 0) 30%, rgba(245, 71, 72, 0.2) 100%);
        }
      
      .title-best-menu{
      top:30px
      }
      .sc-best-menu{
      font-family: 'Andika';
      font-weight: 400;
      font-size: 20px;
      margin-bottom: 28px;
      text-align: center;
      }
      .name-best-menu{
      position: relative;
      top: 275px;
      margin: 0 auto;
      display: table;
      text-align: center;
      font-family: 'Nunito';
      font-weight: 700;
      font-size: 13px;
      color: white;
      padding: 5px 35px;
      background-color: #F54748;
      border-radius: 10px;
      }
      .desc-best-menu{
        position: relative;
        top: 260px;
        text-align: center;
      margin-top: 28px;
      font-family: 'Nunito';
      font-weight: 400;
      font-size: 14px;
      line-height: 30px;
      }
      .best-menu-image{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      }
      .best-menu-image img{
        left: 15px;
      position: relative;
      margin-right: 30px;
      top: 35px;
      display: flex;
      justify-content: center;
      margin-top: 13px;
      cursor: pointer;
      width: 55px;
      height: 55px;
      transition:0.3s;
      }
      
      .best-menu-big img{
        left: 0;
      top: -170px;
      margin: 0 auto ;
      width: 160px;
      }
      .bg-menu-terbaik{
      display: none;
      }
      section.half-section {
      padding: 35px 0;
      }
      section.order-section{
      padding: 30px 0;
      }
      
      .desktop {
      display: none;
      }
      .tablet {
      display: none;
      }
      .mobile {
      display: block;
      }
      
      section.extra-small-section {
      padding: 30px 0px;
      }
      section.halff-section {
      padding-top: 40px;
      height: 350px;
      }
      
      .gambar {
      order: 1;
      left: 0px;
      }
      .gambar-slider {
    width: 100vw;
      height: 404px;
      }
      .main-text-slider {
      margin-top: 400px;
      font-size: 22px;
      text-align: center;
      }
      .deskripsi-menu{
        font-size: 14px;
        text-align: center;
      }
      .txt-menu {
      font-size: 16px;
      text-align: center;
      }
      .btn-circle.btn-xl {
      width: 45px;
      height: 45px;
      padding: 10px 15px;
      }
      .slider-arrow {
      position: absolute;
      top: 335px;
      left: 14px;
      }
      
      .set-lingkaran {
      position: relative;
      top: 75px;
      right: 95px;
      width: 180px;
      }
      
      .gambar-about {
      position: relative;
      left: -80px;
      bottom: 90px;
      width: 150px;
      }
      .tt-menu-terbaik {
      position: relative;
      top: 50px;
      }
      .kotak-merah-mobile img {
      
      display: block;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      top: 90px;
      width: 950px;
      }
      .menus-terbaik-mobile {
      margin: auto;
      right: 1px;
      bottom: 25px;
      }
      .gambar-menu-terbaik-mobile {
      display: block;
      margin-left: auto;
      margin-right: auto;
      
      width: 100px;
      border: 10px solid #f15555;
      border-radius: 90px;
      opacity: 0.9;
      }
      .gambar-menu-terbaik-mobile.active-menu-mobile {
      position: relative;
      width: 100px;
      bottom: 0px;
      border: 10px solid #ff0000;
      border-radius: 90px;
      opacity: 1;
      }
      .tt-about {
      font-size: 22px;
      }
      .desc-about{
        font-size: 14px;
      }
      .sc-about {
      font-size: 16px;
      }
      .tombol {
      margin-top: 10px;
      padding: 5px 10px;
      border-radius: 5px;
      font-size: 13px;
      }
      .sc-menu {
      text-align: center;
      font-size: 20px;
      }
      .nama-menu {
      display: table;
      margin: 0 auto;
      text-align: center;
      font-weight: 500;
      padding: 5px 5px;
      border-radius: 5px;
      font-size: 14px;
      }
      .sc-menu-2 {
      font-size: 14px;
      margin-bottom: 0px;
      }
      .txt-menu-2 {
      font-size: 20px;
      margin-bottom: 5px;
      }
      .menu-side {
      position: relative;
      display: inline-flex;
      margin-bottom: 10px;
      left: -5px;
      }
      .gambar-menu {
      margin-left: 6px;
      width: 25px;
      border-radius: 0;
      }
      .sidebar {
      margin-top: 10px;
      margin-bottom: 15px;
      margin-left: 8px;
      padding: 5px 10px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
      }
      
      .menu-side a {
      text-align: center;
      font-size: 12px;
      }
      .cards {
      position: relative;
      top: -65px;
      }
      .cards img {
      width: 115px;
      height: 150px;
      border-radius: 10px;
      }
      .bottom-cards {
      width: 115px;
      position: relative;
      top: 150px;
      padding: 5px;
      }
      .cards h3 {
      margin-left: 10px;
      font-size: 9px;
      color: #fff;
      margin-bottom: 0px;
      }
      .cards h4 {
      margin-left: 10px;
      font-size: 10px;
      color: #fff;
      }
      .cards h4 span {
      position: relative;
      font-weight: 700px;
      font-size: 12px;
      color: #e7b052;
      }
      .tersedia-di {
      font-size: 20px;
      }
      .ojol{
      display: flex;
      justify-content: center;
      }
      .shopee-food,
      .grab-food,
      .go-food {
      margin-left: 16px;
      margin-right: 16px;
      margin-top: 10px;
      max-width: 100%;
      height: 23px;
      }
      .gmap {
      width: 140px;
      height: 190px;
      }
      .lokasi-kotak{
      height: 190px;
      }
      .lokasi-kami,
      .icon-map {
      font-size: 16px;
      margin-top: 15px;
      }
      .txt-lokasi,
      .desc-lokasi,
      .icon-kontak,
      .kontak {
      font-size: 12px;
      line-height: 15px;
      }
      .txt-lokasi {
      margin-top: 18px;
      }
      
      .kontak {
      margin-top: 18px;

      }
}