:root {
    --textColor: #0006;
}




/*    @font-face {
        font-family: 'bootstrap-icons';
        src: url('fonts/bootstrap-icons.woff2') format('woff2');
    }

    body {
    font-family: HarmonyOS_Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', PingFang SC, Hiragino Sans GB, 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
}

*/

body {
    font-family: "Raleway", Helvetica, Arial, sans-serif;
}




.top-banner {
    position: relative;
    text-align: center;
    color: white;
}

.banner-img {
    height: 60vh;
    width: 100%;
    object-fit: cover;
}

@media only screen and (max-width: 768px) {
    .banner-img {
        height: 73vh;
        width: 100%;
        object-fit: cover;
    }
}

 

.centered {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 768px) {
    .banner-img {
        height: 49vh;
        width: 100%;
        object-fit: cover;
    }
    .tab-btn {
        margin-inline-end: 0px !important;
    }
}









.swiper-container {
    position: relative;
    overflow: hidden;
}

.swiper-wrapper {
    display: flex;
    transition: scroll-behavior 0.5s ease;
    gap: 1rem;
    overflow: hidden;
    scroll-behavior: smooth; 
}

.swiper-card {
    flex: 0 0 25%;
    max-width: 25%;
    border-radius: 10px !important;
}

.card {
    color: white;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
    cursor: pointer !important; 
}
    .card img {
        border-radius: 8px;
    }

    .cardhome:hover {
        transform: scale(1.08);
        z-index: 5;
        cursor: pointer !important;
    }

.swiper-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #706767c2;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    z-index: 10;
    cursor: pointer;
    font-weight: bold;
    line-height: 31px;
    text-align: center;
    align-items: center;
}

    .swiper-button.prev {
        left: 12px;

    }

    .swiper-button.next {
        right: 12px;
    }

@media (max-width: 992px) {
    .swiper-card {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 576px) {
    .swiper-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.indicator-container {
    text-align: center;
    margin-top: 10px;
}

.indicator-bar {
    display: inline-block;
    width: 25px;
    height: 4px;
    background-color: #f8d9a4;
    margin: 0 3px;
    border-radius: 5px;
    transition: background-color 0.3s;
    cursor:pointer ;
}

    .indicator-bar.active {
        background-color: #f9b233;
    }

.nav-tabs .nav-link {
    color: #666;
    border: none;
    font-weight: 500;
    font-size: 18px;
}

.nav-link{
    padding:0px 40px;
}

.nav-tabs .nav-link.active {
    border-bottom: 2px solid #f9b233;
    color: #000;
    font-weight: 600;
}

.crypto-table th, .crypto-table td {
    vertical-align: middle;
}

.crypto-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.sparkline {
    width: 100px;
    height: 40px;
    object-fit: contain;
}

.positive {
    color: #00C070;
}

.negative {
    color: #E14C4C;
}









.green-text {
    color: #00c292;
    font-weight: 500;
}

.red-text {
    color: #e74c3c;
    font-weight: 500;
}

.pagination .page-item .page-link {
    border: none;
    margin: 0 4px;
    border-radius: 6px;
    background-color: #f9f9f9;
    color: #000;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination .page-item.active .page-link {
    background-color: #ffc107;
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    background-color: #eee;
    color: #999;
}

.crypto-markets-img {
    width: 30px;
    height: 30px;
}

#cryptoTabsContent th {
    color:var(--textColor);
    font-weight:normal;
}

.select-country-lang .select-lang-title {
    margin-left: 0.5rem;
    color: #fff !important;
}

.select-country-lang {
    display: flex;
    align-items: center;
}