@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");

.logo-font {
    font-family: "Pacifico", cursive;
    font-weight: 400;
    font-style: normal;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Reduce arrow size overall */
.swiper-button-next,
.swiper-button-prev {
    @apply w-8 h-8;
    /* Default button size */
}

/* Reduce arrow icon size */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 16px !important;
    /* default smaller */
}

/* MOBILE — even smaller */
@media (max-width: 640px) {
    .swiper-button-next,
    .swiper-button-prev {
        @apply w-6 h-6;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 12px !important;
    }
}

/* Remove blurry white outline background */
.swiper-button-next,
.swiper-button-prev {
    background: rgba(0, 0, 0, 0.2);
    /* Soft transparent circle */
    border-radius: 9999px;
    transition: all 0.2s;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: rgba(0, 0, 0, 0.35);
}

/* Hide scrollbar on desktop, show on small screens */
.scrollbar-none::-webkit-scrollbar {
    display: none;
}

.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@media (max-width: 640px) {
    #featuredContainer {
        scrollbar-width: thin;
        scrollbar-color: #a0aec0 #edf2f7;
    }

    #featuredContainer::-webkit-scrollbar {
        height: 6px;
    }

    #featuredContainer::-webkit-scrollbar-thumb {
        background-color: #a0aec0;
        border-radius: 9999px;
    }

    #featuredContainer::-webkit-scrollbar-track {
        background: #edf2f7;
        border-radius: 9999px;
    }
}


/* mobile menu dropdown items style */
.pill {
  background-color: #ffffff;
  padding: 0.5rem 0.75rem;    /* px-3 py-2 */
  border-radius: 0.75rem;     /* rounded-xl */
  font-size: 0.875rem;        /* text-sm */
  font-weight: 500;           /* font-medium */
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: transform .15s ease, box-shadow .15s ease;
}

.pill:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transform: scale(1.03);
}