@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:wght@200;400;600&family=Bangers&family=Cinzel:wght@400;500;700&family=Montserrat:wght@100;200;400&display=swap");
* {
  font-family: "Montserrat", sans-serif !important;
}
html {
  scroll-behavior: smooth;
}
#brand-name {
  background-color: rgb(0, 0, 0);
  background-image: linear-gradient(45deg, #fab958, #ffad31);
  background-size: 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}
.brandname {
  transition: transform 0.3s ease-in-out;
}
.navbar-brand {
  font-size: 1.5rem;
}

/* In your CSS file (e.g., style.css) */
.shadow-bottom {
  box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.4); /* Adjust values as needed */
}

/* Example for dark mode if desired */
.dark .shadow-bottom {
  box-shadow: 0 8px 15px -3px rgba(255, 255, 255, 0.2); /* Lighter shadow for dark backgrounds */
}

/* HEADER PART */
.toggle-switch {
  width: 48px;
  height: 24px;
  background-color: #ddd;
  border-radius: 9999px;
  position: relative;
  transition: background-color 0.3s ease;
}

.toggle-switch::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 2px;
  left: 2px;
  border-radius: 9999px;
  background-color: #fff;
  transition: transform 0.3s ease;
}

.dark .toggle-switch {
  background-color: #4b5563; /* gray-700 */
}

.dark .toggle-switch::before {
  transform: translateX(24px);
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

@media (min-width: 1024px) {
  /* Tailwind's 'lg' breakpoint */
  .lg\:scale-right-hover:hover {
    transform-origin: left center;
  }
}