/* ========================================
   工具类样式 - Utilities
   扩展Bootstrap默认工具类
   ======================================== */
/* ========================================
   Bootstrap 组件样式覆盖
   ======================================== */

/* Nav Pills 样式覆盖 */
.nav-pills .nav-item{
    width: 12.5%;
}
.nav-pills .nav-link.active:first-child {
    color: #ffffff !important;
    background-color: var(--rpworld-primary) !important;
}

.nav-pills .nav-item:first-child a{
    padding: 15px 0;
}


.nav-pills .nav-link.active:not(:first-child) {
    background-color: var(--rpworld-primary) !important;
    color: #000 !important;
}

.nav-pills .nav-link {
    color: #000 !important;
    padding: .5rem;
    line-height: 20px;
}

@media screen and (max-width: 768px) {
    .nav-pills .nav-link {
        padding: 1rem 1.5rem;
    }
}

.nav-pills .nav-link:hover {
    background-color: var(--rpworld-primary)  !important;
    color: #fff !important;
}
@media screen and (max-width: 768px) {
    .nav-pills .nav-item{
        width: 100%;
    }
}
/* ========================================
   Gap utilities (扩展Bootstrap默认的gap-0到gap-5)
   ======================================== */
.gap-1{
    gap: 1rem !important;
}
.gap-2-2{
    gap: 2rem !important;
}

.gap-6 {
    gap: 3.5rem !important;
}

.gap-7 {
    gap: 4rem !important;
}

.gap-8 {
    gap: 4.5rem !important;
}

.gap-9 {
    gap: 5rem !important;
}

.gap-10 {
    gap: 6rem !important;
}

.gap-11 {
    gap: 7rem !important;
}

.gap-12 {
    gap: 8rem !important;
}

.gap-15 {
    gap: 10rem !important;
}

/* ========================================
   响应式gap工具类
   ======================================== */

/* 小屏幕 (sm) - 576px及以上 */
@media (min-width: 576px) {
    .gap-sm-11 {
        gap: 5rem !important;
    }
}

/* 中等屏幕 (md) - 768px及以上 */
@media (min-width: 768px) {
    .gap-md-11 {
        gap: 6rem !important;
    }
}

/* 大屏幕 (lg) - 992px及以上 */
@media (min-width: 992px) {
    .gap-lg-11 {
        gap: 7rem !important;
    }
}

/* 超大屏幕 (xl) - 1200px及以上 */
@media (min-width: 1200px) {
    .gap-xl-11 {
        gap: 8rem !important;
    }
}

/* ========================================
   Margin utilities (扩展Bootstrap默认的mb-0到mb-5)
   ======================================== */

/* 基础margin工具类 - 确保优先级 */
.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mt-5 { margin-top: 3rem !important; }

/* 扩展margin工具类 (Bootstrap默认没有的) */
.mb-2-2{ margin-bottom: 2rem !important; }
.mt-2-2 { margin-top: 2rem !important; }
.mb-4-4{ margin-bottom: 4rem !important; }
.mt-4-4 { margin-top: 4rem !important; }
.mb-5-5 { margin-bottom: 5rem !important; }
.mt-5-5 { margin-top: 5rem !important; }
/* 6rem */
.mb-6 { margin-bottom: 6rem !important; }
.mt-6 { margin-top: 6rem !important; }
.mb-7 { margin-bottom: 7rem !important; }
.mt-7 { margin-top: 7rem !important; }
.mb-8 { margin-bottom: 8rem !important; }
.mt-8 { margin-top: 8rem !important; }
.mb-9 { margin-bottom: 9rem !important; }
.mt-9 { margin-top: 9rem !important; }
.mb-10 { margin-bottom: 10rem !important; }
.mt-10 { margin-top: 10rem !important; }

/* ========================================
   响应式margin工具类
   ======================================== */

/* 中等屏幕及以上 (md) - 768px及以上 */
@media (min-width: 768px) {
    .mb-md-0 { margin-bottom: 0 !important; }
    .mt-md-0 { margin-top: 0 !important; }
    .mb-md-6 { margin-bottom: 6rem !important; }
    .mt-md-6 { margin-top: 6rem !important; }
}

/* 大屏幕及以上 (lg) - 992px及以上 */
@media (min-width: 992px) {
    .mb-lg-0 { margin-bottom: 0 !important; }
    .mt-lg-0 { margin-top: 0 !important; }
}

/* 超大屏幕及以上 (xl) - 1200px及以上 */
@media (min-width: 1200px) {
    .mb-xl-0 { margin-bottom: 0 !important; }
    .mt-xl-0 { margin-top: 0 !important; }
}

/* ========================================
   背景色工具类
   ======================================== */
.bg-custom-light {
    background-color: #ffffff !important;
}

.bg-custom-red {
    background-color: #fbe7e7;
}

.bg-custom-green {
    background-color: #eaf7ee;
}

.bg-custom-blue {
    background-color: #eaf4fe;
}

.text-custom-red {
    color: #e4393c;
}

.text-custom-blue {
    color: #2355ae;
}

.text-custom-green {
    color: #47795e;
}

/* ========================================
   其他工具类
   ======================================== */

/* 统计值样式 */
.stat-value {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-dark);
}

/* 特性图标样式 - 响应式 */
.feature-icon {
    width: 40px;
    height: 40px;
    max-width: 100%;
    transition: transform 0.3s ease;
}

.feature-icon:hover {
    transform: scale(1.1);
}

/* 响应式图标尺寸 */
@media (max-width: 768px) { 
    .feature-icon {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 992px) {
    .feature-icon {
        width: 40px; 
        height: 40px;
    }
}



.swiper-button-prev {
    font-size: 30px;
    color: var(--rpworld-primary);
    position: absolute;
    top: 87%; 
    left: 91% !important;
    border-radius: 50%;
    padding: 20px;
    background-color: #fff;
    border:2px solid var(--rpworld-primary);
}

.swiper-button-next {
    position: absolute;
    top: 87%; 
    border-radius: 50%;
    padding: 20px;
    background-color: #fff;
    border:2px solid var(--rpworld-primary);
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 20px !important;
    color: var(--rpworld-primary) !important;
    font-weight: bolder;
}

@media screen and (max-width: 768px) {
    .swiper-btn{
        height: 29px;
    }
    .swiper-button-prev {
        font-size: 20px;
        top: 90%; 
        left: 34%;
    }
    .swiper-button-next {
        font-size: 20px;
        top: 90%; 
        left: 50%;
    }
}