@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=Ysabeau:ital,wght@0,1..1000;1,1..1000&display=swap');

/* @font-face {
  font-family: "cardo";

  src: url("../fonts/Cardo-Regular.ttf") format("truetype"),
    url("../fonts/Cardo-Italic.ttf") format("truetype"),
    url("../fonts/Cardo-Bold.ttf") format("truetype");
} */

body {
  font-family: "Cardo", sans-serif;
}

p {
  font-family: "Ysabeau", sans-serif;
}

html {
  scroll-behavior: smooth;
}

.nav-text {
  color: var(--navtextcolor);
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* Homepage */
@keyframes bounce45deg {
  0%,
  100% {
    transform: translate(0, 0) rotate(45deg); /* Initial position */
  }
  50% {
    transform: translate(0px, 10px) rotate(45deg); /* Move 45 degrees */
  }
}

.animate-bounce-45deg {
  animation: bounce45deg 1s infinite;
}

.left-button {
  rotate: 135deg;
}

.right-button {
  rotate: -45deg;
}

swiper-container {
  width: 100%;
  height: 100%;
  margin-left: 0px;
  margin-right: 0px;
}

swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

swiper-slide:nth-child(1n) {
  width: 80%;
  height: 303px;
}

swiper-slide:nth-child(2n) {
  width: 80%;
  height: 303px;
}

swiper-slide:nth-child(3n) {
  width: 80%;
  height: 303px;
}

/* Hamburger to X Transition */
.hamburger-bar {
  transition: all 0.3s ease;
}

.hamburger.open .hamburger-bar:nth-child(1) {
  transform: rotate(37deg) translate(3px, 5px);
}

.hamburger.open .hamburger-bar:nth-child(2) {
  transform: rotate(-35deg) translate(3px, -6px);
}

.hidden {
  display: none; /* Adjust as needed for your myNav styling */
}

.no-scroll {
  overflow: hidden;
}

/* Selected Styling Sidebar */
.space-y-6 a.text-black.font-bold {
  color: black;
  font-weight: bold;
}

/* Navigation Overlay Styles */
#myNav {
  transition: transform 0.3s ease-out;
  transform: translateX(-100%); /* Start off-screen to the right */
  position: fixed; /* Ensure it covers the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#myNav.show {
  transform: translateX(0); /* Slide into view */
}

@media (min-width: 768px) and (max-width: 1060px) {
  .truncated {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}

@media (min-width: 1600px) and (max-width: 2000px) {
  swiper-container {
    width: 87%;
  }
}