/* Balanced Healing Therapeutic Massage - Custom Styles */

/* Brand Colors */
:root {
    --balanced-healing-primary: #6B8E23;
    /* Olive Green - representing balance and healing */
    --balanced-healing-secondary: #8B7355;
    /* Warm Brown - representing earth and grounding */
    --balanced-healing-accent: #9ACD32;
    /* Yellow Green - representing vitality */
    --balanced-healing-light: #F5F5DC;
    /* Beige - representing calm and serenity */
}

/* Update theme colors */
.color-theme {
    color: var(--balanced-healing-primary) !important;
}

.tm-button {
    background-color: var(--balanced-healing-primary);
    border-color: var(--balanced-healing-primary);
}

.tm-button:hover {
    background-color: var(--balanced-healing-secondary);
    border-color: var(--balanced-healing-secondary);
}

/* Header adjustments */
.header-toparea {
    background-color: var(--balanced-healing-light);
}

.header {
    position: relative;
    z-index: 999;
    display: block !important;
    visibility: visible !important;
}

/* Logo sizing fix */
.header-logo img {
    max-height: 72px;
    /* Increased by 20% from 60px */
    width: auto;
    max-width: 240px;
    /* Increased by 20% from 200px */
}

.header-logo {
    max-width: 200px;
}

/* Service icons */
.tm-service-icon i,
.tm-feature-icon i {
    color: var(--balanced-healing-primary);
}

.tm-service:hover .tm-service-icon i,
.tm-feature:hover .tm-feature-icon i {
    color: var(--balanced-healing-accent);
}

/* Pricing section */
.tm-pricing-pricebox h3 {
    color: var(--balanced-healing-primary);
}

/* Footer */
.footer {
    background-color: #2c2c2c;
}

.footer-widgets .widget-title {
    color: var(--balanced-healing-accent);
}

/* Appointment form */
.tm-form button[type="submit"] {
    background-color: var(--balanced-healing-primary);
    border-color: var(--balanced-healing-primary);
}

.tm-form button[type="submit"]:hover {
    background-color: var(--balanced-healing-secondary);
    border-color: var(--balanced-healing-secondary);
}

/* Additional Colorado Springs location styling */
.location-info {
    color: var(--balanced-healing-secondary);
    font-weight: 500;
}

/* Holistic approach section emphasis */
.holistic-emphasis {
    background-color: var(--balanced-healing-light);
    padding: 30px;
    border-radius: 10px;
    margin: 20px 0;
}

/* Wellness journey highlights */
.wellness-highlight {
    border-left: 4px solid var(--balanced-healing-primary);
    padding-left: 20px;
    margin: 15px 0;
}

/* HERO SLIDER COMPLETE OVERHAUL - Replace SVG with reliable image display */

/* Hide the problematic SVG completely and use background images */
.heroslider-image svg {
    display: none !important;
}

.heroslider-image {
    position: relative;
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    overflow: hidden;
    margin: 20px 0;
}

/* Set specific background images for each slider */
.heroslider-singleslider:nth-child(1) .heroslider-image {
    background-image: url('../images/heroslider/hero-1.jpg');
}

.heroslider-singleslider:nth-child(2) .heroslider-image {
    background-image: url('../images/heroslider/hero-2.jpg');
}

.heroslider-singleslider:nth-child(3) .heroslider-image {
    background-image: url('../images/heroslider/hero-3.jpg');
}

/* Remove any template placeholder elements */
.heroslider-area {
    background: none !important;
}

.heroslider-area::before,
.heroslider-area::after,
.heroslider-singleslider::before,
.heroslider-singleslider::after {
    display: none !important;
}

/* Override any template background that might show "1920 x 1" */
.heroslider-singleslider {
    background: none !important;
    background-image: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .heroslider-image {
        height: 300px;
        margin: 10px 0;
    }
}

/* PRELOADER CUSTOMIZATION - Replace template with Balanced Healing branding */
.preloader-logo {
    text-align: center;
    margin-bottom: 30px;
}

.preloader-spinner {
    text-align: center;
    margin: 20px 0;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--balanced-healing-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Header Text Visibility Fixes */
.header-topinfo ul li {
    color: #4a3c2c;
    /* Dark coffee brown for legibility */
    border-color: rgba(74, 60, 44, 0.3);
    font-weight: 600;
}

.header-topinfo ul li a {
    color: #4a3c2c;
    /* Dark coffee brown for legibility */
    font-weight: 600;
}

.header-topinfo ul li a:hover {
    color: var(--balanced-healing-primary);
}