@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Sora:wght@100..800&display=swap');

@theme {
    --font-manrope: "Manrope", sans-serif;
    --font-sora: "Sora", sans-serif;

    --breakpoint-4xl: 1720px;
    --breakpoint-3xl: 1540px;
    --breakpoint-2xl: 1440px;
    --breakpoint-xl: 1280px;
    --breakpoint-lg: 1024px;
    --breakpoint-md: 768px;
    --breakpoint-sm: 576px;

    --color-color-1: #127a6b;
    --color-color-2: #46fbd4;
    --color-color-3: #c5a34f;
    --color-color-4: #fe099d;
    --color-color-5: #bf77f6;
    --color-color-6: #632ce8;
}

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

.bg-gradient {
    background-image: url('../assets/images/Group-18433.svg');
}

.hero-bottom-hashtag {
    animation: rotateLine 16s infinite linear;
}

.hero-bottom-hashtag-back {
    animation: rotateLine 16s infinite linear;
}

@keyframes rotateLine {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translate(-100%);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.border-text {
    /* -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #222222; */
    color: transparent;
    -webkit-text-stroke: 2px gray;
}

.carousel-row {
    @apply w-full;
}

.carousel-track {
    @apply flex gap-6 w-max;
}

.carousel-img-link{
    @apply w-[22%] lg:min-w-[400px] sm:min-w-[300px] min-w-[250px] sm:h-48 h-40 overflow-hidden object-cover rounded-2xl;
}

.carousel-img {
    @apply w-[22%] lg:min-w-[400px] sm:min-w-[300px] min-w-[250px] sm:h-48 h-40 hover:scale-110 ease-linear duration-200 object-cover rounded-2xl;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

.animate-scroll-left {
    animation: scroll-left 30s linear infinite;
}

.animate-scroll-right {
    animation: scroll-right 30s linear infinite;
}

.hover\:paused:hover {
    animation-play-state: paused;
}