/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Playfair Display",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #0c0b09; /* Background color for the entire website, including individual sections */
  --default-color: rgba(255, 255, 255, 0.7); /* Default color used for the majority of the text content across the entire website */
  --heading-color: #ffffff; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #b88a3c; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #000000; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;  /* The default color of the main navmenu links */
  --nav-hover-color: #cda45e; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #282622; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #ffffff; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #cda45e; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  font-family: var(--default-font);
  background-color: rgb(206, 195, 177);

}

main{
  background-color: var(--background-color);
}
a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*-------------------------------------------------------------- background-i
# Global Header
--------------------------------------------------------------*/
  .header {
    /* --background-color: rgba(8, 5, 5, 0.554); */
    background: white;  
    color: var(--default-color);
    transition: all 0.5s;
    z-index: 997;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Tambahkan properti box-shadow */
  }
  

.header .topbar {
  height: 40px;
  padding: 0;
  font-size: 14px;
  transition: all 0.5s;
}

.header .topbar .contact-info i {
  font-style: normal;
  color: var(--accent-color);
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  padding-left: 5px;
  color: var(--default-color);
}

@media (max-width: 575px) {

  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 13px;
  }
}

.header .topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
}

.header .topbar .contact-info i a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

.header .topbar .languages ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--accent-color);
}

.header .topbar .languages ul a {
  color: var(--default-color);
}

.header .topbar .languages ul a:hover {
  color: var(--accent-color);
}

.header .topbar .languages ul li+li {
  padding-left: 10px;
}

.header .topbar .languages ul li+li::before {
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  content: "/";
}

.header .branding {
  background: white;
  min-height: 60px;
  padding: 10px 0;
  transition: 0.3s;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 45px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin-top: 5px;
  font-weight: 700;
  color: rgb(228, 16, 16);
}

.header .btn-book-a-table,
.header .btn-book-a-table:focus {
  color: var(--default-color);
  border: 2px solid var(--accent-color);
  text-transform: uppercase;
  font-size: 14px;
  padding: 6px 24px;
  margin: 0 5px 0 30px;
  border-radius: 50px;
  transition: 0.3s;
}

.header .btn-book-a-table:hover,
.header .btn-book-a-table:focus:hover {
  color: var(--default-color);
  background: var(--accent-color);
}

.scrolled .header .topbar {
  height: 0;
  visibility: hidden;
  overflow: hidden;
}

.scrolled .header .branding {
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: #0c0b09;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
    border: 1px solid rgb(154, 154, 154);
    background: rgb(188, 39, 39);
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    transform: skew(-20deg);
    box-shadow: 2px 10px 10px rgba(0, 0, 0, 0.5); /* Bayangan lebih besar dan lebih tebal */
    z-index: 10;
  }
  

  .navmenu a,
  .navmenu a:focus {
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    transform: skew(20deg); /* Menambahkan transformasi ini untuk menetralkan kemiringan */
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: rgb(222, 182, 38);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    /* background: var(--nav-dropdown-background-color); */
    background: #059652;
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: #000000;
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu ul li {
    border: 1px solid var(--nav-dropdown-color); /* Tambahkan border */
    padding: 10px; /* Tambahkan padding untuk ruang di dalam kotak */
    margin: 5px 0; /* Tambahkan margin untuk ruang di antara kotak */
    border-radius: 5px; /* Berikan sedikit border radius untuk tampilan lebih halus */
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

@media (max-width: 575px) {
  .header .logo h1 {
    font-size: 20px;
  }
}

@media (max-width:575px){
  .header .logo h1 {
    font-size: 20px;
  
  }
  
}

/* WhatsApp icon */
.whatsapp-icon {
  position: fixed;
  bottom: 60px; /* Adjusted to be above scroll-top icon */
  right: 15px;
  z-index: 1000;
}

.whatsapp-icon img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
/*--------------------------------------------------------------
# Global foot
--------------------------------------------------------------*/
.footer{
  color: black;
  /* background-color: rgb(206, 195, 177); */
  background-color: #986e4d;
  font-size: 14px;
  padding-top: 25px;
  padding-bottom: 30px;
  position: relative;
}

.foot .copyright {
  padding-top: 80px;
  padding-bottom: 15px;
  color: #000000ab;
  /* border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); */
}

.foot .copyright p {
  margin: 0;
  font-size: 20px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

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

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 0 80px 0;
  text-align: center;
  position: relative;
}

.page-title:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/*-------------------------------------------------------------- main
# Global Sectionshero
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 77px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 60px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 18px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #d71515;
  /* color: color-mix(in srgb, var(--default-color), transparent 30%); */
  position: relative;
}

.section-title h2::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: var(--accent-color);
  margin: 4px 10px;
}

.section-title p {
  color: var(--accent-color);
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  --default-color: #000000;
  --background-color: transparent;
  --heading-color: #111111;
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-color);
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero h2 {    
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  color: #000000;
}

.hero h2 span {
  color: rgb(202, 20, 20);
}

.hero p {
  color: #000000;
  margin: 10px 0 0 0;
  font-size: 24px;
}

.hero .cta-btn {
  color: var(--default-color);
  border: 2px solid red;
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 30px;
  border-radius: 50px;
  transition: 0.3s;
  flex-shrink: 0;
}

.hero .cta-btn:first-child {
  margin-right: 10px;
}

.hero .cta-btn:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 1%);
}

@media (max-width: 480px) {
  .hero .cta-btn {
    font-size: 12px;
  }
}

.hero .play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.hero .play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.hero .play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hero .play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.hero .play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
  }

  .hero p {
    font-size: 18px;
  }
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  /* background: url("../img/about-bg.jpg") center center;
  background-size: cover; */
  background: white;
  /* position: relative;
  padding: 80px 0; */
  color: #0000009d;
}

.about:before {
  content: "";
  background: color-mix(in srgb, var(--contrast-color), transparent 12%);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

.about .container {
  position: relative;
}

.about .content h3 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #bc964a;
  margin-bottom: 20px;
}

.content .cta-btn {
  color: rgb(0, 0, 0);
  border: 2px solid var(--accent-color);
  font-weight: 400;
  font-size: 14px;
  /* text-transform: uppercase; */
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 30px;
  border-radius: 50px;
  transition: 0.3s;
  flex-shrink: 0;
  
}
.container .content .cta-btn:hover {
  background:#cda45e;
}

@media (max-width: 480px) {
  .about .content .cta-btn {
    font-size: 12px;
  }
}
.about .about-img {
  border: 6px solid color-mix(in srgb, var(--default-color), transparent 80%);
  transition: 0.3s;
}

.about .about-img:hover {
  transform: scale(1.03);
}

/*--------------------------------------------------------------
# Product Section
--------------------------------------------------------------*/
.product{
  background: #ffffff;
  /* background: color-mix(in srgb,rgb(255, 255, 255), transparent 92%); */

}
.product .card-item {
  background: color-mix(in srgb, var(--default-color), transparent 92%);
  /* background: #c53b3b; */
  padding: 30px;  
  transition: all ease-in-out 0.3s;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  /* border: 2px inset red; */
  border-top: 2px solid black;
  border-right: 2px solid red;
  border-bottom: 2px solid red;
  border-left: 2px solid black;

  /* box-shadow: 0 2px 3px 2px rgb(57, 57, 57); */
  border-radius: 8px;
}

.product .card-item img {
  max-height: 220px;
  object-fit: contain;
  margin-bottom: 20px;
}

.product .card-item h4 {
  font-size: 24px;
  font-weight: 600;
  padding: 0;
  margin: 20px 0;
}

.product .card-item h4 a {
  /* color: var(--heading-color); */
  color: #bc964a;
}

.product .card-item p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0;
  padding: 0;
}

.product .card-item:hover {
  background: var(--accent-color);
  padding: 30px;
}

.product .card-item:hover span,
.product .card-item:hover h4 a,
.product .card-item:hover p {
  color: var(--contrast-color);
}

@media (max-width: 990px) {
  .product .row {
    display: flex;
    flex-wrap: wrap;
  }
  
  .product .col-lg-4 {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media(max-width:415px){
  .product .col-lg-4 {
    width: 70%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/*--------------------------------------------------------------
# Menu Section
--------------------------------------------------------------*/
.menu {
  background-color: color-mix(in srgb, var(--background-color) 90%, white 5%);
}

.menu .menu-filters {
  padding: 0;
  margin: 0 auto;
  list-style: none;
  text-align: center;
  border-radius: 50px;
}

.menu .menu-filters li {
  color: var(--default-color);
  margin-bottom: 10px;
  cursor: pointer;
  display: inline-block;
  padding: 8px 12px 10px 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  transition: all ease-in-out 0.3s;
  font-family: var(--heading-font);
}

.menu .menu-filters li:hover,
.menu .menu-filters li.filter-active {
  color: var(--accent-color);
}

.menu .menu-filters li:last-child {
  margin-right: 0;
}

.menu .menu-item {
  margin-top: 50px;
  position: relative;
}

.menu .menu-img {
  width: 80px;
  border-radius: 50%;
  float: left;
  border: 8px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.menu .menu-content {
  margin-left: 95px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  position: relative;
}
       
.menu .menu-content::after {
  content: "......................................................................" "...................................................................." "....................................................................";
  position: absolute;
  left: 20px;
  right: 0;  right: 0;

  top: -4px;
  z-index: 1;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.menu .menu-content a {
  color: var(--heading-color);
  background: var(--background-color);
  padding-right: 10px;
  position: relative;
  z-index: 3;
  font-weight: 700;
  transition: 0.3s;
}

.menu .menu-content a:hover {
  color: var(--accent-color);
}

.menu .menu-content span {
  background: var(--background-color);
  color: var(--accent-color);
  position: relative;
  z-index: 3;
  padding: 0 10px;
  font-weight: 600;
}

.menu .menu-ingredients {
  margin-left: 95px;
  font-style: italic;
  font-size: 14px;
  font-family: var(--nav-font);
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/*--------------------------------------------------------------
# Specials Section
--------------------------------------------------------------*/
.specials {
  overflow: hidden;
}

.specials .nav-tabs {
  border: 0;
}

.specials .nav-link {
  border: 0;
  padding: 12px 15px;
  transition: 0.3s;
  color: var(--heading-color);
  border-radius: 0;
  border-right: 2px solid var(--accent-color);
  font-weight: 600;
  font-size: 15px;
}

.specials .nav-link:hover {
  color: var(--accent-color);
}

.specials .nav-link.active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.specials .tab-pane.active {
  animation: fadeIn 0.5s ease-out;
}

.specials .details h3 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 20px;
}

.specials .details p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.specials .details p:last-child {
  margin-bottom: 0;
}

@media (max-width: 992px) {
  .specials .nav-link {
    border: 0;
    padding: 15px;
  }

  .specials .nav-link.active {
    color: var(--accent-color);
    background: var(--accent-color);
  }
}

/*--------------------------------------------------------------
# Events Section
--------------------------------------------------------------*/
.events {
  --default-color: #ffffff;
  --background-color: #000000;
  --heading-color: #ffffff;
  padding: 80px 0;
  position: relative;

}

.events .slider-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.events:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.events .section-title h2 {
  color: #ffffff;
}

.events .container {
  position: relative;
  z-index: 3;
}

.events .event-item h3 {
  font-weight: 700;
  font-size: 30px;
}

.events .event-item ul {
  list-style: none;
  padding: 0;
}

.events .event-item ul li {
  padding-bottom: 10px;
}

.events .event-item ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.events .event-item p:last-child {
  margin-bottom: 0;
}

.events .swiper-wrapper {
  height: auto;
}

.events .swiper-pagination {
  margin-top: 30px;
  position: relative;
}

.swiper-slide .event-item .content h4{
  font-family: 'Times New Roman', Times, serif;
  font-size: 27px;
}
.swiper-slide .event-item .content span{
  color: white;
}
.events .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 70%);
  opacity: 1;
}

.events .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/* 
----------------------------------------
#Profil box 
--------------------------------------------- */
.profil-section {
  position: relative;
  height: 300px;
  display: flex;
  justify-content: space-between;
  align-items:baseline;
  background: #bc964a
}

.background-half {
  position: absolute;
  top: 0;
  left: -10%; 
  width: 120%;
  height: 100%;
  background: linear-gradient(to right, #bc964a 60%, rgb(172, 30, 30) 40%);
  transform: skew(-20deg); 
  z-index: 1;  
}

.profil-section .container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  background: transparent;
}

.profil-section .container .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profil-section .container .content .profile-content h3 {
  font-size: 40px;  
  color: #ffffff; 
  margin-bottom: 15px;
}
.profil-section .container .content .profile-content p   {
  font-size: 20px;  
  color: #ffffff; 
}

.profil-section .container .content .profile-pentagon {
  width: 700px;
  height: 70px;
  background-color: #986e4d; 
  clip-path: polygon(0% 100%, 38% 0%, 100% 0%, 100% 100%, 38% 100%);
  display: flex;
  border-radius: 10% ;
  align-items: center;
  padding: 10px;
  justify-content: center;
  color: white; 
  text-align: center; 
}

.profil-section .container .content .profile-pentagon h2{
  margin-left: 50px;
}

/* Media Queries for Mobile */
@media (max-width: 886px) {
  .profil-section {
    height: auto;
    display: block;
    padding: 20px;
  }

  .background-half {
    left: 0;
    width: 100%;
  }

  .profil-section .container {
    flex-direction: column;
    align-items: flex-start;
  }

  .profil-section .container .content {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .profil-section .container .content .profile-content h3 {
    font-size: 30px;
    margin-bottom: 10px;
  }

  .profil-section .container .content .profile-content p {
    font-size: 16px;
  }

  .profil-section .container .content .profile-pentagon {
    width: 100%;
    height: auto;
    clip-path: none; /* Hilangkan clip-path pada mobile */
    border-radius: 0;
    margin-top: 20px;
  }

  .profil-section .container .content .profile-pentagon h2 {
    margin-left: 0;
  }
}

.profil{
  justify-content: center;
  background-color: #ffffff;

}
.profil .title-custom h2{ 
  text-align: center;
  margin-bottom: 60px;
  color: var(--accen  t-color);
  font-size: 36px;
  font-weight: 600;
  font-family: var(--heading-font);
}
.section-profil{
  position: relative;
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.box-profil {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: 82%;
  margin: auto;
} 
.box-profil .box {
  background-color: #bc964a;
  border: 8px double #ebdcb2;
  outline: 5px solid #986e4d;
  color: #ffffff;
  padding: 25px;  
  border-radius: 10px;
}
.box-profil .box h2{
  color: #ffffff;
  text-align: center;
  font-size: 30px;
}
.box-profil .box .box-p p{
  text-align: justify;
  margin-top: 30px;
}
.box-profil .box .icon {
  font-size: 40px;
  margin-bottom: 10px;
}

@media(max-width: 1100px){
  .box-profil {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(max-width: 884px){
  .box-profil .box .box-h2 h2{
      margin-bottom: 63px;
  } 
}

  @media(max-width: 799px){
    .box-profil {
      grid-template-columns: repeat(1, 1fr);
    }
    .box-profil .box .box-h2 h2{
      margin-bottom: 30px;
  }
  }

/*--------------------------------------------------------------
# Gallery Section
--------------------------------------------------------------*/
.gallery .gallery-item {
  overflow: hidden;
  border-right: 3px solid var(--background-color);
  border-bottom: 3px solid var(--background-color);
}

.gallery .gallery-item img {
  transition: all ease-in-out 0.4s;
}

.gallery .gallery-item:hover img {
  transform: scale(1.1);
}


/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
  /* background-color: color-mix(in srgb, var(--background-color) 90%, white 5%); */
  background-color: #ebdcb2;
  /* background-color: rgba(233, 198, 153, 0.5); */

  border-bottom: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
}

.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #b88a3c;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  color: #000000;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  /* background-color: color-mix(in srgb, var(--background-color), transparent 80%); */
  background-color: #986e4d;
  border-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  /* color: color-mix(in srgb, var(--accent-color), transparent 50%); */
  color: rgba(255, 255, 255, 0.646);
}

.contact .php-email-form button[type=submit] {
  margin-top: 50px;
  /* color: var(--default-color); */
  color: rgb(0, 0, 0);
  background: none;
  border: 3px solid #531313;
  padding: 8px 36px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: var(--accent-color);
  color: white;
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

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