@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "@fortawesome/fontawesome-free/css/all.min.css";
@import "../../public/css/aos.min.css";
@import "../../public/css/tocify.min.css";
@import "../../public/css/jquery-ui.min.css";
@import "../../public/css/toastify-js.min.css";

@layer components {
    .container {
        @apply max-w-4xl xl:max-w-5xl 2xl:max-w-[1312px] mx-auto px-5 lg:px-8;
    }

    .spacer {
        @apply py-6;
    }

    .button-primary {
        @apply px-3 py-2 bg-primary-color text-white border border-primary-color hover:bg-primary-color/80 hover:underline rounded text-base focus:outline-none focus:ring-2 focus:ring-primary-color focus:ring-offset-2 select-none;
    }

    .button-secondary {
        @apply px-3 py-2 text-primary-color hover:underline border border-primary-color hover:bg-gray-100 rounded text-base focus:outline-none focus:ring-2 focus:ring-primary-color focus:ring-offset-2 select-none;
    }
}

.shine {
    animation: shine 2s infinite;
}

.bottom-navigation-bar.active {
    color: rgb(3 105 161);
}

.bottom-navigation-bar.active svg path {
    stroke: rgb(3 105 161);
}

.swiper-pagination-bullet-active {
    background: rgb(3 105 161) !important;
}

.text-shadow {
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

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

.animate__fadeInLeft {
    animation: fadeInLeft 0.5s ease-in-out;
}

.animate__fadeOutLeft {
    animation: fadeOutLeft 0.5s ease-in-out;
}

/* Keyframes */
@keyframes shine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50px);
    }
}