.font-khmer-kh {
  font-family: "Kantumruy Pro", sans-serif;
}

.font-khmer {
  font-family: "Koulen", serif;
}
.font-pali {
  font-family: "Moulpali", serif;
}

.font-chenla {
  font-family: "Chenla", system-ui;
}

.font-lobster {
  font-family: "Lobster", sans-serif;
}

@font-face {
  font-family: "Mikela"; /* ឈ្មោះដើមដែលអ្នកប្រើ */
  src: url("assets/fonts/mikela_regular-webfont.woff2") format("woff2"), /* ត្រូវដាក់មុនគេ */
       url("assets/fonts/mikela_regular-webfont.woff") format("woff"),
       url("assets/fonts/Mikela\ Regular.ttf") format("truetype"); /* ទុកជា fallback */
  font-weight: normal;
  font-style: normal;
}

.font-combined {
  font-family: "Mikela", "Koulen", sans-serif;
}

.font-teko {
  font-family: "Teko", sans-serif;
}

.font-english {
  font-family: "Story Script", sans-serif;
}

.font-bokor {
  font-family: "Bokor", system-ui;
}

.font-moul {
  font-family: "Moul", serif;
}

.font-style {
  font-family: "Parisienne", cursive;
}
.font-new {
  font-family: "Berkshire Swash", serif;
}

.font-bree-serif {
  font-family: "Bree Serif", serif;
}

.font-patua-one {
  font-family: "Patua One", serif;
}

.font-dm-serif-text {
  font-family: "DM Serif Text", serif;
}

.font-yeseva-one {
  font-family: "Yeseva One", serif;
}

.font-stardos-stencil {
  font-family: "Stardos Stencil", system-ui;
}

@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/Roboto-VariableFont_wdth\,wght.ttf")
    format("truetype");
}

.font-roboto {
  font-family: "Roboto", sans-serif;
}

/* Add the Mikela Regular font */
@font-face {
  font-family: "Mikela Regular";
  src: url("/assets/fonts/Mikela Regular.ttf") format("truetype");
}

/* Create a class to use the new font */
.font-mikela {
  font-family: "Mikela Regular", sans-serif;
}

@font-face {
  font-family: "Brannboll Connect PERSONAL USE";
  src: url("/assets/fonts/BrannbollConnect_PERSONAL_USE.ttf") format("truetype");
}

.font-brannboll {
  font-family: "Brannboll Connect PERSONAL USE", sans-serif;
}

@font-face {
  font-family: "Valentine Baby";
  src: url("/assets/fonts/Valentine Baby.ttf") format("truetype");
}

.font-valentine {
  font-family: "Valentine Baby", sans-serif;
}

@font-face {
  font-family: "Shalyne Typeface PERSONAL USE ONLY";
  src: url("/assets/fonts/Shalyne Typeface PERSONAL USE ONLY.ttf")
    format("truetype");
}

.font-shalyne {
  font-family: "Shalyne Typeface PERSONAL USE ONLY", sans-serif;
}

@keyframes bounce-animation {
  0%,
  100% {
    transform: scale(1); /* ទំហំដើម */
    opacity: 1; /* ភាព​ស្រអាប់​ពេញលេញ */
  }
  50% {
    transform: scale(1.3); /* ពង្រីក​ធំ​ជាង​មុន */
    opacity: 0.7; /* ស្រអាប់​បន្តិច​ដើម្បី​មើល​ទៅ​ដូច​លោត​មក​មុខ */
  }
}

.bounce-animation {
  animation: bounce-animation 2s infinite ease-in-out;
}

.hidden {
  display: none;
}

.active-tab {
  @apply text-white bg-[#FF69B4];
}
.tab-button {
  @apply text-[#FF69B4] bg-white;
}

/* Modal overlay */
.modal {
  display: none;
  position: fixed;
  z-index: 1000; /* កំណត់អោយវានៅពីលើគេទាំងអស់ */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* អនុញ្ញាតអោយ scroll បាន */
  background-color: rgba(0, 0, 0, 0.9);
}

/* Modal content (រូបភាព) */
.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* រក្សាសមាមាត្ររូបភាព */
}

/* Close button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.icon {
  background-image: url("assets/images/heart.png");
  background-size: cover; /* This makes the image cover the entire div */
  background-repeat: no-repeat; /* This prevents the image from repeating */
  background-position: center; /* This centers the image */
  opacity: 80%;
}

.home-hidden {
  opacity: 0;
  visibility: hidden;
}

.home-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease-in-out;
}

.content-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out;
}

.content-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease-in-out;
}

.notyf__message {
  font-family: "Noto Sans Khmer", sans-serif !important;
  font-size: 15px;
}

.title-shadow {
  text-shadow: 4px 4px 8px #ffbbe1;
}