@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@font-face {
    font-family: 'Arboria';
    src: url('/frontend/assets/fonts/FontsFree-Net-Arboria-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Arboria-Book';
    src: url('/frontend/assets/fonts/FontsFree-Net-arboria2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
:root{
    --primary : #C42025;
}

body{
    font-family: sans-serif;
}

.arboria-font {
    font-family: 'Arboria', sans-serif;
}
.arboria-book-font {
    font-family: 'Arboria-Book', sans-serif;
}


.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  .roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
  }

  .roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
  }

  .roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
  }

.animate-text {
    background-image: linear-gradient(-225deg,
            #37a000 0%,
            #121312 29%,
            #d71195 67%,
            #cc4646 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textanim 2s linear infinite;
    display: inline-block;
}

@keyframes textanim {
    to {
        background-position: 200% center;
    }
}

.swiper-button-next,
.swiper-button-prev {
    background-color: white !important;
    color: black !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    z-index: 1000;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
}


.swiper-button-next::after,
.swiper-button-prev::after {
    transform: scale(0.4);
}



.toast-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
}


.toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

.custom-toast {
    animation: toaseFadeIn 0.3s ease-out, toastFadeOut 1.5s ease-in forwards;
    animation-delay: 0s, 4.5s;
}

@keyframes toaseFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(10px);
    }
}