/* all */
@font-face {
    font-family: 'vg'; 
    src: url('../font/Vastago_Grotesk/VastagoGrotesk-Regular.otf');
}
@font-face {
    font-family: 'vg-bold'; 
    src: url('../font/Vastago_Grotesk/VastagoGrotesk-Bold.otf');
}
@font-face {
    font-family: 'vg-medium'; 
    src: url('../font/Vastago_Grotesk/VastagoGrotesk-Medium.otf');
}
@font-face {
    font-family: 'vg-thin'; 
    src: url('../font/Vastago_Grotesk/VastagoGrotesk-Thin.otf');
}
@font-face {
    font-family: 'vg-semibold'; 
    src: url('../font/Vastago_Grotesk/VastagoGrotesk-SemiBold.otf');
}   

* {
    font-family: 'vg' !important;
}
body {
    background-color: #F2F2F2 !important;
}
h1, h1 span, b {
    font-family: 'vg-bold' !important;
    font-weight: bold !important;
}
.fw-normal {
    font-family: 'vg' !important;
}
.fw-thin {
    font-family: 'vg-thin' !important;
}
.fw-semibold {
    font-family: 'vg-semibold' !important;
}
.fw-medium {
    font-family: 'vg-medium' !important;
}
@keyframes triggerClick { 
    0% { transform: scale(0.98); }
    50% { transform: scale(1.025); }
    100% { transform: scale(0.98); }
}
.text-yellow {
    color: #FEBE33 !important;
}


/* navbar */
.nav-logo {
    width: 100px !important;
}
.btn-pesan {
    padding: 12px 20px !important;
}
/* navbar end */

/* hero */
.hero-content-container {
    justify-content: stretch !important;
}
.title {
    color: #111111 !important;
    font-size: 80pt !important;
    z-index: 9999 !important;
}
.sub-title {
    color: #F06100 !important;
}
.carousel-hero-prev.carousel-control-prev {
    left: 1% !important;
    border: none !important;
    background: none !important;
    height: 100% !important;
}
.carousel-hero-next.carousel-control-next {
    border: none !important;
    background: none !important;
    height: 100% !important;
    right: 1% !important;
}
.carousel-hero-prev.carousel-control-prev:hover, .carousel-hero-next.carousel-control-next:hover {
    border: none !important;
}
.btn-group-hero {
    bottom: 13% !important;
    right: 5% !important;
}
.btn-gofood {
    background-color: white !important;
    border: 1px solid black !important;
}
.btn-wa {
    background-color: #25D366 !important;
    border: 1px solid black !important;
}
@keyframes zoomOutLittle { 
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(0.95); }
}
.btn-gofood:hover , .btn-wa:hover {
    animation: zoomOutLittle 500ms ease 1 forwards !important;
    cursor: pointer;
}
.cita-rasa {
    background-color: #FEBE33 !important;
    /* height: 100% !important; */
    width: 60% !important;
}
.cita-rasa h1 {
    font-size: 28px !important;
    line-height: 30px !important;
}
.hero-1965 {
    top: 6% !important;
    right: 5% !important;
    animation: bounce 1.5s ease-in-out infinite alternate-reverse both !important;
}
@keyframes bounce { 
    0% { transform: translateY(0px); }
    50% { transform: translateY(15px); }
    100% { transform: translateY(0px); }
}
.cita-rasa-black {
    background-color: #111111 !important;
    height: 100% !important;
}
/* hero end*/

/* didirikan */
.didirikan-container {
    background-color: #111111 !important;
    margin: 8vh 0 !important;
}
.didirikan-right{
    width: 55%;
}
.didirikan-left{
    width: 45%;
}
.container-didirikan-text {
    bottom: 10% !important;
    left: 15% !important;
    width: 75% !important;
}
.didirikan-text {
    line-height: 43.2px !important;
}
/* didirikan end */

/* makan */
.makan-container {
    margin-top: 15vh !important;
    margin-bottom: 15vh !important;
}
.makan1 {
    top: 0 !important;
    right: 0 !important;
    width: 45% !important;
}
.makan-title {
    font-size: 55px !important;
}
.menoe-btn {
    background-color: #111111 !important;
    animation: triggerClick 1.5s ease-in-out infinite alternate-reverse both !important;
}
.menoe-btn:hover {
    animation-name: none !important;
    animation: zoomOutLittle 500ms ease 1 forwards !important;
    cursor: pointer;
}
.makan3-container-left {
    width: 42% !important;
}
.makan3-container-right {
    width: 58% !important;
}
.makan3 {
    width: 48% !important;
}
.makan3-text {
    width: 53% !important;
}
.makan3-sub {
    line-height: 33.6px !important;
}
/* makan-end */

/* cabang */

/* swipper */
.card__container {
    padding-block: 5rem;
  }
  
  .card__content {
    margin-inline: 1.75rem;
    border-radius: 1.25rem;
    overflow: hidden;
  }
  
  .card__article {
    width: 300px; /* Remove after adding swiper js */
    border-radius: 1.25rem;
    overflow: hidden;
  }
  
  .card__image {
    position: relative;
    background-color: var(--first-color-light);
    padding-top: 1.5rem;
    margin-bottom: -.75rem;
  }
  
  .card__data {
    background-color: var(--container-color);
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    text-align: center;
    position: relative;
    z-index: 10;
  }
  
  .card__img {
    width: 180px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
  }
  
  .card__shadow {
    width: 200px;
    height: 200px;
    background-color: var(--first-color-alt);
    border-radius: 50%;
    position: absolute;
    top: 3.75rem;
    left: 0;
    right: 0;
    margin-inline: auto;
    filter: blur(45px);
  }
  
  .card__name {
    font-size: var(--h2-font-size);
    color: var(--second-color);
    margin-bottom: .75rem;
  }
  
  .card__description {
    font-weight: 500;
    margin-bottom: 1.75rem;
  }
  
  .card__button {
    display: inline-block;
    background-color: var(--first-color);
    padding: .75rem 1.5rem;
    border-radius: .25rem;
    color: var(--dark-color);
    font-weight: 600;
  }
  
  /* Swiper class */
  .swiper-button-prev:after,
  .swiper-button-next:after {
    content: "";
  }
  
  .swiper-button-prev,
  .swiper-button-next {
    width: initial;
    height: initial;
    font-size: 3rem;
    color: var(--second-color);
    display: none;
  }
  
  .swiper-button-prev {
    left: 0;
  }
  
  .swiper-button-next {
    right: 0;
  }
  
  .swiper-pagination-bullet {
    background-color: hsl(212, 32%, 40%);
    opacity: 1;
  }
  
  .swiper-pagination-bullet-active {
    background-color: var(--second-color);
  }
/* swipper end */
.cabang-container {
    background-color: #FEBE33 !important;
}

.cabang-card {
    background-color: white !important;
    height: 100% !important;
}
@keyframes rotate-zoom { 
    0% { transform: rotate(0deg) scale(1.0)  translateY(0px); }
  100% { transform: rotate(-3deg) scale(1.05) translateY(30px) translateX(-20px); }
}
.cabang-card:hover {
    animation: rotate-zoom 500ms ease 1 forwards !important;
    -webkit-box-shadow: 10px 10px 65px 7px rgba(0,0,0,0.25);
    -moz-box-shadow: 10px 10px 65px 7px rgba(0,0,0,0.25);
    box-shadow: 10px 10px 65px 7px rgba(0,0,0,0.25);
}
.cabang-card:hover .btn-lokasi {
    display: block !important;
}
@keyframes geserKanan { 
    0% { transform: translateX(0px); }
  100% { transform: translateX(30px); }
}
#c2:hover ~ #c3,#c2:hover {
    animation: geserKanan 500ms ease 1 forwards !important;
}
#c4:hover {
    animation: geserKanan 500ms ease 1 forwards !important;
}
#c2:hover ~ #c4{
    animation: geserKanan 500ms ease 1 forwards !important;
}
#c3:hover ~ #c4,#c3:hover {
    animation: geserKanan 500ms ease 1 forwards !important;
}
.btn-lokasi {
    background-color: #F06100 !important;
    bottom: 10px !important;
    left: 10px !important;
    display: none !important;
}
.btn-lokasi:hover {
    transform: scale(0.9) !important;
}
/* cabang end */

/* event */
.event-container {
    background-color: #111111 !important;
}
@keyframes zoomOut { 
    0% { transform: scale(1) translate(-52%, -52%); }
    50% { transform: scale(1.5) translate(-40%, -40%); }
    100% { transform: scale(1.2) translate(-40%, -40%); }
}
#video-btn {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1 !important;
}
#video-btn:hover {
    animation: zoomOut 500ms ease 1 forwards !important;
    cursor: pointer;
}
@keyframes blur { 
    100% {	filter: blur(4px) };
}
#video-btn:hover + #video-img {
    animation: blur 500ms ease 1 forwards !important;
}
.btn-close {
    top: -6% !important;
    right: 0 !important;
    background-color: #FF6913 !important;
    z-index: 1 !important;
}
.event-title {
    font-size: 58px !important;
    line-height: 66px !important;
    font-family: 'vg-semibold' !important;
    margin-bottom: 30px !important;
}
.event-syarat-container {
    margin-bottom: 5rem !important;
}
.event-wa-card {
    background-color: #32393A !important;
    margin-top: 5rem !important;
}
.event-wa-card-text {
    font-size: 2.10rem !important;
    line-height: 40px !important;
}
.event-syarat-title {
    font-size: 24px !important;
}
.event-syarat-text {
    font-size: 24px !important;
    line-height: 33.6px !important;
    font-family: 'vg-thin' !important;
    margin-bottom: 30px !important;

}
/* event end */

/* review */ 
.review-container {
    border-bottom: 2px solid #E8E8E8 !important;
}
.review-card{
    height: 500px !important;
    max-width: auto !important;
}
.review-text {
    font-size: 32px !important;
    line-height: 50px !important;
}
.profile-container {
    bottom: 0 !important;
}
.carousel-control-next, .carousel-control-prev {
    width: 50px !important;
    top: auto !important;
    left: auto !important;
    border: 2px solid #111111 !important;
    padding: 8px !important;
    border-radius: 50% !important;
}
.carousel-control-prev {
    bottom: 0px !important;
    right: 60px !important;
}
.carousel-control-next:hover, .carousel-control-prev:hover {
    border: 2px solid #F06100 !important;
    opacity: 1 !important;
    cursor: pointer !important;
}
/* review end */

/* hidangan */
.hidangan-container {
    background-color: #F06100 !important;
    background-image: url('../img/index/hidangan-img.png');
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: bottom !important;
}
.hidangan-text {
    font-size: 80px !important;
}
/* hidangan end */

/* footer */
.footer-sub {
    color: #F06100 !important;
}
.aa {
    border: 3px solid white !important;
}
/* footer end */

/* RESPONSIVE */

/* ========= Tablet ==========*/

@media screen and (max-width: 991.98px) {
    /* navbar */
    .navbar-nav {
        margin-top: 20px !important;
    }
    .btn-pesan {
        float: right !important;
    }
    /* navbar end */

    /* hero */
    .hero-content-container {
        flex-direction: column-reverse !important;
    }
    .cita-rasa {
        width: 100% !important;
    }
    .title {
        font-size: 58pt !important;
    }
    .bakso-hero {
        /* height: 300px !important; */
        margin-top: 5vh !important;
    }
    .cita-rasa h1 {
        font-size: 36px !important;
        line-height: 40px !important;
    }
    .cita-rasa-black {
        display: none !important;
    }
    /* hero end */

    /* didirikan */
    .didirikan-container {
        margin: 5vh 0 !important;
    }
    .didirikan-right, .didirikan-left {
        width: auto;
    }
    .didirikan-left {
        position: static !important;
    }
    .container-didirikan-text {
        position: static !important;
        padding: 8rem 4rem !important;
    }
    .didirikan-img-big {
        display: none !important;
    }
    .didirikan-img-small {
        display: block !important;
    }
    .container-didirikan-text {
        left: 10% !important;
    }
    .didirikan-text {
        line-height: 43.2px !important;
    }
    /* didirikan end */

    /* makan */
    .makan-container {
        margin-top: 8vh !important;
        margin-bottom: 8vh !important;
    }
    .makan-title {
        font-size: 36px !important;
    }
    .makan2-container {
        width: 100% !important;
        margin: 70px 0 !important;
    }
    .makan3-container-left, .makan3-container-right {
        width: auto !important;
    }
    .makan3-container-right {
        margin-bottom: 50px !important;
    }
    .makan3-container {
        flex-wrap: wrap-reverse !important;
    }
    .makan3 {
        order: 2 !important;
    }
    /* makan-end */

    /* cabang */
    .cabang-inner-container {
        margin-top: 0 !important;
    }
    .cabang-title {
        width: 75% !important;
    }
    #c3, #c4 {
        margin-top: 30px !important;
    }
    #c1:hover ~ #c3 {
        transform: translateY(40px) !important;
    }
    #c2:hover ~ #c3 {
        transform: translateY(40px) !important;
        animation-name: none !important;
    }
    #c2:hover ~ #c4 {
        transform: translateY(40px) !important;
        animation-name: none !important;
    }
    #c2:hover ~ #c4{
        animation: none !important;
    }
    /* cabang end */

    /* event */
    .event-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    #video-btn:hover {
        animation: zoomOut 500ms ease 1 forwards !important;
        cursor: pointer;
    }
    .list-ketentuan li {
        font-size: 22px !important;
    }
    .event-title {
        font-size: 50px !important;
    }
    .event-wa-card-text {
        width: 60% !important;
        line-height: 45px !important;
    }
    .event-sub {
        font-size: 24px !important;
    }
    /* event end */

    /* review */ 
    .review-text {
        font-size: 30px !important;
        line-height: 40px !important;
    }
    /* review end */

    /* divider */
    .divider-container {
        display: none !important;
    }
    /* divider end */

    /* hidangan */
    .hidangan-title {
        margin-bottom: 30px !important;
        margin-top: 30px !important;
        font-size: 24px !important;
    }
    .hidangan-text {
        font-size: 50px !important;
        padding: 0 20px !important;
    }
    .hidangan-btn-container {
        margin-bottom: 20px !important;
    }
    /* hidangan end */

    /* footer */
    .footer-logo {
        width: 70px !important;
    }
    /* footer end */
}

/* ========= tablet end ===== */


/* ========= Mobile ========= */
@media screen and (max-width: 500px) {
    /* navbar */
    .nav-logo {
        width: 60px !important;
    }
    .nav-item {
        padding-left: 20px !important;
    }
    .btn-pesan {
        font-size: 12px !important;
        display: block !important;
        width: 90% !important;
        float: none !important;
        margin: auto !important;
    }
    /* navbar end */

    /* hero */
    .hero-container {
        margin-bottom: 8vh !important;
        margin-top: 0vh !important;
    }
    .title {
        font-size: 40pt !important;
        margin-top: 3vh !important;
        margin-bottom: 10vh !important;
        line-height: 0.9 !important;
    }
    .bakso-hero {
        /* height: 150px !important; */
        margin-top: 0vh !important;
        margin-bottom: 1vh !important;
        border-radius: 15px !important;
    }
    .bakso-hero-img {
        width: 70% !important;
    }
    .btn-group-hero {
        /* display: none !important; */
    }
    .btn-group-hero-mobile {
        display: block !important;
        padding: 0 8px !important;
    }
    .btn-gofood {
        margin-bottom: 10px !important;
        justify-content: center !important;
    }
    .btn-gofood div {
        font-size: 18px !important;
        margin-right: 15px !important;
    }
    .btn-gofood img {
        width: 40px !important;
    }
    .btn-wa {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        justify-content: center !important;
    }
    .btn-wa img {
        margin-right: 10px !important;
    }
    .cita-rasa-container {
        margin-bottom: 3vh !important;
    }
    .cita-rasa {
        width: 100% !important;
        padding: 22px 30px !important;
    }
    .cita-rasa h1 {
        font-size: 22px !important;
        line-height: 25px !important;
        margin: 0 !important;
    }
    .hero-1965 {
        width: 22% !important;
    }
    /* hero end */

    /* didirikan */
    .container-didirikan-text {
        padding: 5rem 3rem !important;
        width: 100% !important;
    }
    .didirikan-img {
        width: 50% !important;
        margin-bottom: 6vh !important;
    }
    .didirikan-text {
        font-size: 18px !important;
        line-height: 22px !important;
    }
    /* didirikan end */

    /* makan */
    .makan1 {
        display: none !important;
    }
    .makan1-small {
        display: block !important;
    }
    .makan-text-container {
        width: 90% !important;
        margin: auto !important;
        margin-bottom: 5   !importantvh !important;
    }
    .makan-title {
        font-size: 50px !important;
        line-height: 1 !important;
        font-family: 'vg-semibold' !important;
        margin-bottom: 30px !important;
    }
    .makan-sub {
        font-size: 18px !important;
    }
    .makan2-container {
        padding-top: 0 !important;
        margin: 40px 0 !important;
        flex-wrap: wrap-reverse !important;
        justify-content: center !important;
        width: 100% !important;
    }
    .menoe-btn-container {
        width: 90% !important;
        margin-bottom: 40px !important;
        margin-top: 20px !important;
    }
    .menoe-btn {
        margin-top: 10px !important;
        font-size: 20px !important;
        padding: 15px 30px !important;
        width: 100% !important;
    }
    .makan2, .makan1-small {
        width: 90% !important;
    }
    .makan3-container-right {
        flex-wrap: wrap-reverse !important;
        width: 90% !important;
        margin: auto !important;
        margin-bottom: 20px !important;
    }
    .makan3 {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    .makan3-text {
        width: 100% !important;
        padding: 0 !important;
        padding-left: 10px !important;
    }
    .makan3-title {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }
    .makan3-sub {
        font-size: 14px !important;
        line-height: 20px !important;
    }
    .makan3-container {
        flex-wrap: wrap !important;
    }
    .makan3-container-left {
        width: 80% !important;
        margin: auto !important;
        margin-bottom: 40px !important;
    }
    .accivement-img {
        width: 50px !important;
        margin-right: 15px !important; 
    }
    .accivement-text {
        font-size: 16px !important;
        margin: 0 !important;
    }
    /* makan-end */

    /* cabang */
    .cabang-container {
        padding: 0 !important;
    }
    .cabang-container{
        padding-left: 2vw !important;
        padding-right: 2vw !important;
        padding-bottom: 5vh !important;
    }
    .cabang-card {
        width: 90% !important;
        margin: auto !important;
    }
    .cabang-title {
        width: 85% !important;
        font-size: 20px !important;
        margin: auto !important;
        margin-bottom: 30px !important;
    }
    .cabang-card-title {
        font-size: 18px !important;
        margin-bottom: 5px !important;
    }
    .cabang-card-sub {
        font-size: 14px !important;
        margin-bottom: 0 !important;
    }
    #c2 {
        margin-top: 30px !important;
    }
    #c1:hover ~ #c3, #c1:hover ~ #c2 {
        transform: translateY(40px) !important;
    }
    #c3:hover ~ #c4 {
        animation: none !important;
        transform: translateY(40px) !important;
    }
    /* cabang end */

    /* event */
    #video-btn {
        width: 50px !important;
    }
    .list-ketentuan li {
        font-size: 16px !important;
        letter-spacing: 1px !important;
    }
    .event-syarat-container {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
    .event-title {
        font-size: 32px !important;
        line-height: 40px !important;
    }
    .event-wa-card {
        margin-top: 3rem !important;
        margin-bottom: 4rem !important;
        padding: 20px !important;
    }
    .event-wa-card-text {
        font-size: 20px !important;
        line-height: 28px !important;
        width: 100% !important;
    }
    .event-wa-btn {
        font-size: 20px !important;
    }
    .event-syarat-title {
        font-size: 18px !important;
    }
    .event-syarat-text {
        font-size: 18px !important;
        line-height: 25px !important;
        margin-bottom: 20px !important;
    }
    .event-sub {
        font-size: 18px !important;
    }
    /* event end */

    /* review */ 
    .review-container {
        padding-top: 0px !important;
        padding-bottom: 30px !important;
        margin-bottom: 0 !important;
    }
    .review-text-container {
        margin-bottom: 30px !important;
    }
    .review-card{
        height: 250px !important;
    }
    .review-text {
        font-size: 15px !important;
        line-height: 18px !important;
    }
    .profile-img {
        width: 50px !important;
    }
    .profile-name {
        font-size: 14px !important;
    }
    .carousel-control-prev, .carousel-control-next {
        width: 30px !important;
        padding: 5px !important;
        bottom: 10px !important;
    }
    .carousel-control-prev {
        right: 40px !important;
    }
    /* review end */

    /* hidangan */
    .hidangan-container {
        padding-left: 4vw !important;
        padding-right: 4vw !important;
        width: 90% !important;
        margin: auto !important;
        margin-bottom: 30px !important;
    }
    .hidangan-title {
        margin-top: 0px !important;
        margin-bottom: 10px !important;
        font-size: 20px !important;
    }
    .hidangan-text {
        font-size: 28px !important;
        padding: 0px !important;
        margin-bottom: 30px !important;
    }
    .hidangan-btn-container {
        margin-bottom: 0px !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    #btn-gofood {
        margin-right: 0px !important;
    }
    /* hidangan end */

    /* footer */
    .footer-container {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    .footer-logo {
        width: 40px !important;
    }
    .footer-text {
        font-size: 9px !important;
    }
    .social-logo {
        gap: 5px !important;
    }
    .social-logo img {
        width: 20px !important;
    }

/* ========= Mobile end ========= */


}