/* === HOSTINGZIM ELECTRIC BLUE THEME (Theme 2) === */
/* Main Color: #0088ff */

/* 1. Text Colors */
#header a.navbar-brand h1 span,
.blog--links-widget ul li a:hover,
.blog--recent-posts-widget ul li h4 a:focus,
.blog--recent-posts-widget ul li h4 a:hover,
.blog--tags-widget ul li a:focus,
.blog--tags-widget ul li a:hover,
.btn--default.hover:hover,
.footer--copyright a,
.footer--widget ul li a:hover,
.fw--about a.more,
.page-header--breadcrumb ul>li.active,
.page-header--breadcrumb ul>li>a:hover,
.post--comment-meta a:focus,
.post--comment-meta a:hover,
.post--except-footer a:hover,
.post--full-content-footer ul li a:hover,
.post--meta a:hover,
.post--title h2 a:hover,
.pricing--body h3 strong,
.pricing--popular-tag,
.service--item:hover .service--content h3,
.service--item:hover .service--icon,
.team--item:hover .team--name a,
.team--social-links ul li a:focus,
.team--social-links ul li a:hover,
.vps-pricing--feature i.fa,
.vps-pricing--slider .ui-slider-handle i.fa,
a.btn--default.hover:hover {
    color: #0088ff !important;
}

/* 2. Background Colors */
#header .navbar-toggle .icon-bar,
#headerNav .nav>.dropdown>.dropdown-menu>li.active>a,
#headerNav .nav>.dropdown>.dropdown-menu>li>a:focus,
#headerNav .nav>.dropdown>.dropdown-menu>li>a:hover,
#preloader,
.banner--slider-nav ul>li.active,
.banner--slider-nav ul>li:hover,
.bg--vermilion,
.blog--search-widget .input--text .highlight,
.blog-widget--title h3:before,
.btn--primary,
.contact--form .highlight,
.counter--num:before,
.f0f--search-bar .highlight,
.faq--categories h3:before,
.faq--categories ul li a:hover,
.faq--categories ul li.active a,
.faq--content .accordion .panel-heading a,
.features--item.dot:after,
.features--item.dot:before,
.footer--widget h4:before,
.login--form .form-group .highlight,
.page-header--title h2:before,
.post--comment-form-group .input--text .highlight,
.post--comment-form-title h3:before,
.post--comments-title h3:before,
.pricing--item.popular,
.section--title h2:before,
.vps-pricing--slider .ui-slider-handle em,
a.btn--primary {
    background-color: #0088ff !important;
}

/* 3. Border Colors */
#header .navbar-toggle,
.banner--slider-nav ul>li.active,
.banner--slider-nav ul>li:hover,
.blog--links-widget ul li a:hover,
.btn--default.hover:hover,
.btn--primary,
.fw--links li a:hover,
.pricing--item.popular,
.service--item:hover .service--icon,
a.btn--default.hover:hover,
a.btn--primary {
    border-color: #0088ff !important;
}

/* 4. Shape Colors (Triangles/Arrows) */
.banner--slider-nav ul>li:after,
.vps-pricing--slider .ui-slider-handle:before {
    border-top-color: #0088ff !important;
}

.banner--slider-nav ul>li:before {
    border-bottom-color: #0088ff !important;
}

/* 5. Preloader Fix */
#preloader {
    background-color: #0088ff !important;
}
.preloader--spinner {
    background-color: #ffffff !important;
}
/* === FIX INVISIBLE PRICE ON POPULAR PLAN === */
.pricing--item.popular .pricing--body h3,
.pricing--item.popular .pricing--body h3 strong,
.pricing--item.popular .pricing--body p,
.pricing--item.popular .pricing--header h2 {
    color: #ffffff !important;
}

/* Ensure the button on the blue card is white so it stands out */
.pricing--item.popular .pricing--footer .btn--default {
    background-color: #ffffff !important;
    color: #0088ff !important;
    border-color: #ffffff !important;
}

/* Button hover effect for the popular card */
.pricing--item.popular .pricing--footer .btn--default:hover {
    background-color: transparent !important;
    color: #ffffff !important;
}