body{
    font-family: 'Noto Sans', sans-serif !important;
}

.glassy{
    backdrop-filter: blur(15px) saturate(200%);
    -webkit-backdrop-filter: blur(15px) saturate(200%);
    background-color: rgba(19, 35, 51, 0.301);
    border-bottom: 1px solid rgba(209, 213, 219, 0.11);
}

.glassy-navbar{
    backdrop-filter: blur(15px) saturate(200%);
    -webkit-backdrop-filter: blur(15px) saturate(200%);
    background-color: rgba(19, 35, 51, 0.829);
    border-bottom: 1px solid rgba(209, 213, 219, 0.11);
}

.glassy-card{
    backdrop-filter: blur(15px) saturate(200%);
    -webkit-backdrop-filter: blur(15px) saturate(200%);
    background-color: rgba(19, 35, 51, 0.601);
}

.glassy-mobile{
    backdrop-filter: blur(15px) saturate(200%);
    -webkit-backdrop-filter: blur(15px) saturate(200%);
    background-color: rgba(19, 35, 51, 0.829);
    border-bottom: 1px solid rgba(209, 213, 219, 0.11);
}

.bg-glassy{
    backdrop-filter: blur(15px) saturate(200%);
    -webkit-backdrop-filter: blur(15px) saturate(200%);
    background-color: rgba(46, 46, 46, 0.11);
    border-bottom: 1px solid rgba(209, 213, 219, 0.205);
}

/* Marquee animation styles */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
.animate-marquee {
    animation: marquee 20s linear infinite;
}

.container-block {
    container-type: inline-size;
}
@container (max-width: 1100px) {
    .container-block svg:nth-child(3),
    .container-block svg:nth-child(4) {
        display: none;
    }
}

/* slider */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 16px !important;
    height: 4px !important;
    border-radius: 5px !important;
    margin: 0 6px !important;
}

.swiper-pagination {
    bottom: 2px !important;
}

.swiper-wrapper {
    height: max-content !important;
    padding-bottom: 64px;
}

.swiper-pagination-bullet-active {
    background: #e5d546 !important;
}

.swiper-slide.swiper-slide-active>.slide_active\:border-indigo-600 {
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229 / var(--tw-border-opacity));
}


/* end slider */