/**
 * Home Page Specific Styles
 * 
 * These styles override base component styles for the home page only.
 * They use the theme branding variables from variables.css
 * 
 * @package RevBridge
 * @since 2.0.0
 */

/* ========================================
   HOME PAGE SPECIFIC OVERRIDES
   ======================================== */

.home .btn-primary:not(.btn-mobile):not(.mobile-cta .btn-primary) {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.home .btn-primary:not(.btn-mobile):not(.mobile-cta .btn-primary):hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* Force mobile CTA to always have white text, even on home page */
.home .mobile-cta .btn-primary,
.home .btn-mobile {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

.home .mobile-cta .btn-primary:hover,
.home .btn-mobile:hover {
    background: var(--secondary-color);
    color: #ffffff;
    border-color: var(--secondary-color);
}

.home .btn-secondary {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.home .btn-secondary:hover {
    background: var(--secondary-color);
    color: var(--color-white);
}

.home .btn-cta {
    background: var(--primary-color);
}

.home .btn-cta:hover {
    background: var(--secondary-color);
}

.home .btn-product {
    background: var(--primary-color);
    color: var(--color-white);
}

.home .btn-product:hover {
    background: var(--secondary-color);
    color: var(--color-white);
}

.home .btn-outline {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.home .btn-outline:hover {
    background: var(--secondary-color);
    color: var(--color-white);
}

.home .product-label {
    background: var(--secondary-color);
}

.home .section-label {
    background: var(--secondary-color);
}

.home .tab-btn.active,
.home .tab-btn:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.home .slider-prev,
.home .slider-next {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.home .slider-prev:hover,
.home .slider-next:hover {
    background: var(--secondary-color);
    color: var(--color-white);
}

.home .meutudo-bar {
    background: var(--secondary-color);
}

.home .testimonial-role {
    color: var(--secondary-color);
}

.home .read-more {
    color: var(--secondary-color);
}

.home .read-more:hover {
    color: var(--primary-color);
}

.home .product-features li:before {
    color: var(--secondary-color);
}

.home h1 span {
    color: var(--secondary-color);
}