/* LIGHT MODE (your original theme colors) */
:root {
    --brand-color: #004aad;
}

/* DARK MODE (new theme) */
.dark-mode {
    --brand-color: #5e91d4;
}


/*=========== Blue - #004aad / old - #40bad5 ============*/

.btn-primary,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand-color);
    color: #ffffff;
}

.btn-primary:hover {
    color: #ffffff;
    background-color: var(--brand-color);
}

.btn-primary:before,
.contact .contact-form .btn-primary:hover {
    content: "";
    color: #ffffff !important;
    background-color: #333333;
}

::selection,
.switcher-wrapper .switcher-trigger,
.separator:after,
.navigation .navbar-nav .nav-item .nav-link:hover,
.navigation .navbar-nav .nav-item .nav-link.active,
.menu-toggle-line,
.education-box:after,
.experince-box:after,
.education-box:hover:before,
.experince-box:hover:before,
.proggress,
.grid li figure div,
.carousel .carousel-indicators li,
.carousel .carousel-control-next:hover,
.carousel .carousel-control-prev:hover,
.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active,
.portfolio .portfolio-wrap .portfolio-links a:hover,
.contact .card-body:hover .card-icon i,
.back-to-top:hover {
    background-color: var(--brand-color) !important;
}

a:hover:not(.btn),
.btn-link,
.cd-headline.clip .cd-words-wrapper,
.section-title h1 span,
.banner-section .banner-text h3.headline b,
.about-text h4 span,
.counter-box h3,
.service .card-icon,
.testimonial-name,
.meta-action .fa,
.meta-action .fa-regular,
.contact .card-body .card-icon i,
.contact .card-body .social-links a:hover,
.breadcrumb .breadcrumb-item.active,
.not-found-page .animate-ziro {
    color: var(--brand-color) !important;
}

a.btn-link:hover {
    color: #666666 !important;
}

.education-box,
.education-box:before,
.experince-box,
.experince-box:before,
.work .card .work-card-img,
.form-control:focus {
    border-color: var(--brand-color) !important;
}

.preloader-inner,
.customers-testimonial .item {
    border-top-color: var(--brand-color) !important;
}