body {
    font-family: "Poppins", sans-serif;
    background-image: url('./assets/groovepaper2.png');
}
header{
    z-index: 20 !important;
}

.bg-groovepaper {
    background-image: url('./assets/groovepaper2.png');
}

.header-nav-link {
  color: #4b5563; /* text-gray-600 */
  font-weight: 500; /* font-medium */
  transition: all 150ms ease-in-out;
}
.header-nav-link:hover {
  color: #f97316; /* hover:text-orange-500 */
}

/* New style for the active desktop link */
.header-nav-link.active-link {
  color: #ea580c; /* text-orange-600 */
}

.mobile-nav-link {
  display: block;          /* block */
  padding-left: 0.75rem;   /* pl-3 */
  padding-right: 1rem;     /* pr-4 */
  padding-top: 0.5rem;     /* py-2 */
  padding-bottom: 0.5rem;
  border-left-width: 4px;  /* border-l-4 */
  border-left-color: transparent; /* border-transparent */
  font-size: 1rem;         /* text-base */
  font-weight: 500;        /* font-medium */
  color: #4b5563;          /* text-gray-600 */
}

.nav-link{
    cursor: pointer;
}

.mobile-nav-link:hover {
  background-color: #f9fafb;     /* hover:bg-gray-50 */
  border-left-color: #f97316;    /* hover:border-orange-500 */
  color: #ea580c;                /* hover:text-orange-600 */
}

/* New style for the active mobile link */
.mobile-nav-link.active-link {
  background-color: #fff7ed; /* orange-50 */
  border-left-color: #ea580c; /* border-orange-600 */
  color: #ea580c;           /* text-orange-600 */
}

/* Prevents flash of unstyled content */
[data-page-template] {
	display: none;
}

/* Custom Glide.js Styles */
.glide__arrow {
	background-color: rgba(255, 255, 255, 0.5) !important;
	border: none !important;
    border-radius: 20px !important;
    height: 35px;
    width: 35px;
	box-shadow: none;
    display: flex;
    padding: 0 !important;
    transition: .2s ease !important;
}
.glide__arrow:hover {
	background-color: rgba(255, 255, 255, 0.8) !important;
}

.glide__arrow svg{
    margin: auto;
}
.glide__bullet--active {
	background-color: #f97316; /* orange-500 */
}

li.glide__slide{
    display: flex;
    justify-content: center;
}

img{
    display: block;
    margin: auto;
}

#home-map {
    height: 500px;
    z-index: 10;
}

#map {
    height: 500px;
    z-index: 10;
}

/* Fade-in Animation on Scroll */
.fade-in-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}