/*=========== BACKGROUND COLOR ================ */
.circular > a:before, .cause-img > span, .cause-img > a.donate-btn, .volunteer-inner > a:hover, .theme-btn, .title.style3 > h2 span:before, .donate-btn > span, .progress-border .progress .progress-bar, .big-btn, .deal-countdown .button, .toggle-item h2:after, .don-amt > strong, .post-img > span, .product-img > a:hover, .gallery-widget .row > div a:before, .page-gallery-img::before, .page-gallery-img::after, .page-gallery-img a::before, .heading h3::before, .tagclouds > a:hover span::before, .comment > a:hover, .button:hover, .cause-detail > strong a, .contact-form button, .member-social::before, #team-detail-img p, .frequency li a.active:before, .wpdonation-button, .donation-figures li a.active, .proceed, .payment-type .nav li.active a, .social a:hover, .slide-button, .popup-form > form input[type="submit"], .blog-img a i:after, .donate-btn:after, .upcoming-eventbar::before {
	background-color: #e47257;
}
/*=========== TEXT COLOR ================ */
.urgentcause-detail > span, .amount > i, .circular > div:before, .video > a, .cause-detail > strong i, .cause-detail > h3 a:hover, .countdown-amount, .event-bar h3 a:hover, ul.meta li a:hover, .volunteer-inner > strong i, .active .event-bar h3, .event-intro h3 a:hover, .theme-btn:hover, .counter-box > span, .blog-detail > h3 a:hover, ul.meta li i, .about-service-inner h2, .service-box-inner h3 a:hover, .collected-donation > strong i, .collected-donation > span, .who-we-detail > p span, .help-detail > h3 a:hover, .goal > span i, .enter-amount > a, .product > span ins, .collected-amount i, .cause-donation > i, .review > span, .urgent-parallax > strong, .urgent-parallax > p strong, .big-btn:hover, .fancy-cause-detail > span, .help-us i, .banner-text > strong i, .counting > span, .story-detail > span, .spent-bar > span strong i, .story-detail h3 a:hover, .deal-desc > ul li, .deal-desc > ul li a, .deal-desc > h4 a:hover, .deal-desc > span i, .deal-countdown .button:hover, .toggle-item h2:hover, .toggle-item h2.active, .upcoming-detail > h4 a:hover, .spent-bar > span.date, .service-box > h3 a:hover, .service-carousel .owl-nav > div:hover:before, .service-block-inner h3 a:hover, .product > h4 a:hover, .post-img > span a:hover, .widget-post h5 a:hover, .page-title > ul li a:hover, .page-top h2 strong, .gallery-detail h3 a:hover, .gallery-detail > ul li, .gallery-detail > ul li a, .gallery-popup a, .spent-bar > span.price i, .project-info .goal > i, .project-hover > h3 a:hover, .volunteer-inner > strong, .overlay-donation > span i, .event-overlay-inner span, .event-overlay-inner h5 a:hover, .service-ways .service-box > h3, .title.style3 h2 span, .blog-detail-page blockquote i, .heading span, .tagclouds > a span:hover:after, .comment h6 a, .comment > i, .cause-detail > span, .cart-item i, .cart-price span, .product-desc > span ins, .contact-info strong i, .team-member > h4 a:hover, .skills > span, .skills h5, .event-org > h4 span, .sidebar .widget li i, .make-donation h5 i, .circular span, .select-cause .amount > span, footer .widget ul li i, .contact-widget h5 span, footer .widget ul li a:hover, .tweet blockquote a, .footer-bar-title span, .blackbox i, .inline-list > li i, nav > ul > li:hover > a, nav > ul > li ul li:hover > a, nav > ul > li.menu-item-has-children > a:before, header.dark-header nav > ul > li:hover > a, header.dark-header nav > ul > li ul li:hover > a, .sideheader-menu > ul li:hover > a, .sideheader-menu > ul li a.active, .sideheader.fancy .sideheader-menu > ul li:hover > a, .sideheader.fancy .sideheader-menu > ul li a.active, .sideheader-bottom > p i, .popup-form > strong span, .popup-form > span.close-btn, .popup-form > form p a, .title.light h2 span, .banner-inner > strong i, .banner-inner > h5 strong, .urgentcause-detail > p a {
	color: #e47257;
}
/*=========== BORDERS COLOR ================ */
.video > a, .toggle-item h2:after, .service-carousel .owl-nav > div:hover, .comment h6, .skills > span {
	border-color: #e47257;
}


@media screen and (max-width: 1200px) {
    .wrap, .wrap2, .wrap3 {
        width: 95%;
        max-width: 1200px;
    }
}

@media screen and (max-width: 992px) {
    .wrap, .wrap2, .wrap3 {
        width: 96%;
        max-width: 1000px;
    }
    
    /* 优化导航栏 */
    .header-v1 {
        height: auto !important;
        min-height: 80px;
    }
    
    .nav li {
        margin: 0 10px;
    }
}

@media screen and (max-width: 768px) {
    /* 确保移动设备上所有元素都是响应式的 */
    * {
        box-sizing: border-box !important;
    }
    
    /* 优化图片显示 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 优化表单元素 */
    input, textarea, select {
        max-width: 100% !important;
    }
    
    /* 优化页脚布局 */
    .f_bg .f_bg_div > div {
        float: none !important;
        width: 100% !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }
}

@media screen and (max-width: 480px) {
    /* 确保小屏幕设备上文字可读 */
    body {
        font-size: 14px !important;
    }
    
    /* 优化按钮大小 */
    button, .bnts, .bnt1 {
        padding: 10px 20px !important;
        font-size: 16px !important;
    }
}



/* === 优化的自适应响应式样式 === */
/* 全局响应式设置 */
@media screen and (max-width: 1200px) {
    .wrap, .wrap2, .wrap3 {
        width: 95% !important;
        max-width: 1200px !important;
    }
}

@media screen and (max-width: 992px) {
    .wrap, .wrap2, .wrap3 {
        width: 96% !important;
        max-width: 1000px !important;
    }
    
    /* 优化导航栏 */
    .header-v1 {
        height: auto !important;
        min-height: 80px !important;
    }
    
    .nav li {
        margin: 0 10px !important;
    }
}

@media screen and (max-width: 768px) {
    /* 确保移动设备上所有元素都是响应式的 */
    * {
        box-sizing: border-box !important;
    }
    
    /* 优化图片显示 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 优化表单元素 */
    input, textarea, select {
        max-width: 100% !important;
    }
    
    /* 优化页脚布局 */
    .f_bg .f_bg_div > div {
        float: none !important;
        width: 100% !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }
}

@media screen and (max-width: 480px) {
    /* 确保小屏幕设备上文字可读 */
    body {
        font-size: 14px !important;
    }
    
    /* 优化按钮大小 */
    button, .bnts, .bnt1 {
        padding: 10px 20px !important;
        font-size: 16px !important;
    }
}
/* === 优化的自适应响应式样式结束 === */



/* === 优化的自适应响应式样式 === */
/* 全局响应式设置 */
@media screen and (max-width: 1200px) {
    .wrap, .wrap2, .wrap3 {
        width: 95% !important;
        max-width: 1200px !important;
    }
}

@media screen and (max-width: 992px) {
    .wrap, .wrap2, .wrap3 {
        width: 96% !important;
        max-width: 1000px !important;
    }
    
    /* 优化导航栏 */
    .header-v1 {
        height: auto !important;
        min-height: 80px !important;
    }
    
    .nav li {
        margin: 0 10px !important;
    }
}

@media screen and (max-width: 768px) {
    /* 确保移动设备上所有元素都是响应式的 */
    * {
        box-sizing: border-box !important;
    }
    
    /* 优化图片显示 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 优化表单元素 */
    input, textarea, select {
        max-width: 100% !important;
    }
    
    /* 优化页脚布局 */
    .f_bg .f_bg_div > div {
        float: none !important;
        width: 100% !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }
}

@media screen and (max-width: 480px) {
    /* 确保小屏幕设备上文字可读 */
    body {
        font-size: 14px !important;
    }
    
    /* 优化按钮大小 */
    button, .bnts, .bnt1 {
        padding: 10px 20px !important;
        font-size: 16px !important;
    }
}
/* === 优化的自适应响应式样式结束 === */