html {scroll-behavior: smooth;}

.search-box-wrap {position: fixed; top: 0; right: 0; bottom: 100%; left: 0; z-index: 99999999; display: flex; opacity: 0; justify-content: center; align-items: center;}
.search-box {position: relative; z-index: 1; padding: 0 1rem; width: 100%; max-width: 600px; color: #f0f0f0;}
.search-box .search-close {margin-top: 1rem; text-align: center; font-size: 3rem; color: rgba(255,255,255,.7); cursor: pointer;}
.search-box .search-close:hover {color: var(--brand-color);}
.search-box .form-control {background-color: rgba(255,255,255,.75);}
.search-box-wrap.show .search-close {display: block;}
.search-box .icon {position: absolute; top: .75rem; right: 1.25rem; font-size: 2rem; color: var(--brand-color-1); cursor: pointer;}
.search-box .icon:hover {color: var(--brand-color);}
.search-form-control {position: relative;}
.search-form-control .search-btn {position: absolute; top: 0; bottom: 0; right: 1rem; z-index: 10; display: flex; align-items: center; font-size: 1.6rem; line-height: 1; cursor: pointer;}
.search-form-control .search-btn:hover {color: var(--brand-color);}
.search-box-mask {position: absolute; top: 0; right: 0; bottom: 0; left:0; z-index: 0; background: linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.85)); transition: all .3s ease; cursor: url(../images/close.png), auto;}

.swiper-hero:hover .swiper-button-prev,
.swiper-hero:hover .swiper-button-next {color: #fff;}
.swiper-hero .swiper-button-prev,
.swiper-hero .swiper-button-next {width: 60px; height: 60px; color: rgba(255,255,255,.5); background-color: rgba(0,0,0,.0); border-radius: 100%;}
.swiper-hero .swiper-button-prev:hover,
.swiper-hero .swiper-button-next:hover {color: #fff; background-color: rgba(var(--brand-color-1-rgb), .8);}

.breadcrumb-wrapper {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.breadcrumb-wrapper .breadcrumb-item+.breadcrumb-item::before {content: "\e13a"; font-family: Phosphor-Bold !important}
.footer-item i {padding-top: 4px;}
input.form-control {line-height: 1;}
.cursor-pointer {cursor: pointer;}

#clients-slider .clients-item {border: 1px #f0f0f0 solid;}
/*
#clients-slider a {position: relative; display: block;}
#clients-slider a::before {content: ""; position: absolute; top: 100%; right: 0; bottom: 0; left: 0; z-index: 0; background-color: rgba(var(--brand-color-1-rgb), .3); transition: all .3s ease;}
#clients-slider a:hover::before {top: 0;}
*/

.no-scrollbar {overflow-x: auto; scrollbar-width: none; user-select: none; -webkit-overflow-scrolling: touch; touch-action: pan-x;}
.no-scrollbar::-webkit-scrollbar {display: none; height: 0;}

footer.footer{background: url("../images/footer-bg.jpg"); background-size: cover; background-repeat: no-repeat;}
.footer-bottom.bg-dark {background-color: #171111 !important;}
.footer-bottom p {margin-bottom: 0;}
.white-popup {
    position: relative;
    background: #FFF;
    padding: 25px;
    width: auto;
    max-width: 600px;
    margin: 20px auto;
    border-radius: .25rem;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}
.toast-alert {position: fixed; z-index: 99999999999999; top: 15vh; left: 50%; transform: translateX(-50%);}

/* 1. 定义变量 */
:root {
    --scrollbar-thumb: #2e3092;
    --scrollbar-track: #f5f5f5;
    --scrollbar-width: thin;
}

/* 2. 全局样式 */
* {
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* 3. WebKit 兼容兜底 */
@supports selector(::-webkit-scrollbar) {
    *::-webkit-scrollbar {
        width: var(--scrollbar-width);
        height: var(--scrollbar-width);
    }
    *::-webkit-scrollbar-track {
        background: var(--scrollbar-track);
        border-radius: 4px;
    }
    *::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
        border-radius: 4px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    *::-webkit-scrollbar-thumb:hover {
        background: #257cef;
    }
    *::-webkit-scrollbar-corner {
        background: transparent;
    }
}

@media (min-width: 576px) {
    .container, .container-sm {
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
    }
}

@media (min-width: 768px) {
    .container, .container-md, .container-sm {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
    }
    .text-md-left {text-align: left !important;}
}

@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        width: calc(100% - 30px);
        max-width: calc(100% - 30px);
    }
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        width: calc(100% - 60px);
        max-width: 1500px;
    }
}

@media (max-width: 767.98px) {
    .page-item.start,
    .page-item.end,
    .page-item.totalpage {
        display: none;
    }
    .page-link {
        padding: 5px 10px;
        font-size: 12px;
    }
    .btn-scroll-top {
        right: 30px;
        bottom: 40px;
    }
    .counter-item-wrapper .display3 {font-size: 1.5rem;}
    .counter-item-wrapper .fs-18px {font-size: .9rem !important;}
}

@media (max-width: 575.98px) {
    .counter-item-wrapper {margin: .75rem 0;}
    .counter-item-wrapper+.counter-item-wrapper .counter-item {
        border-left-color: transparent;
    }
    .counter-item-wrapper:nth-of-type(even) .counter-item {
        border-left-color: rgba(var(--white-color-rgb), .2);
    }
}