:root {
  --theme-color: #DC143C; /* Rojo del logo */
  --secondary-color: #000000; /* Negro del logo */
}

/*===== Primary Color =====*/

/*===== Background Color =====*/
.thm-bg,
.thm-layer:before,
.search-btn:hover,
.search-btn:focus,
.header-cart > span.cart-btn:hover,
.header-cart > span.cart-btn:focus,
.thm-btn.scndry-bg:before, 
.thm-btn.scndry-bg:after,
.thm-btn.bg-black:before,
.thm-btn.bg-black:after,
.slick-slider > button.slick-arrow:hover,
.slick-slider > button.slick-arrow:focus,
.slick-slider.feat-caro > button.slick-arrow:hover,
.slick-slider.feat-caro > button.slick-arrow:focus,
.serv-box:hover .serv-box-inner:before,
.serv-box-inner:after,
.serv-info2 > h3 a:hover,
.serv-info2 > h3 a:focus,
.thm-shp:after,
.team-img:before,
.online-portal-video > a:hover,
.online-portal-video > a:focus,
.prod-img > a.scndry-bg:hover,
.prod-img > a.scndry-bg:focus,
.ftr-gal-list li a:before,
.scndry-bg .topbar-right > a.search-btn:hover, 
.scndry-bg .topbar-right > a.search-btn:focus,
.logo.v2:after,
.feat-cap2 > span:not(.feat-cap-time):before,
.feat-caro2.slick-slider > button.slick-arrow:hover,
.feat-caro2.slick-slider > button.slick-arrow:focus,
.special-box:after,
.serv-box2.v2 .serv-info2 > h3 a:before,
.serv-box2.v2 .serv-info2 > h3 a:hover,
.serv-box2.v2 .serv-info2 > h3 a:focus,
.bg-color11 .topbar-right > a.search-btn:hover,
.bg-color11 .topbar-right > a.search-btn:focus,
header.style3 nav > div > ul > li > a:after,
.social-links4 > a:hover,
.social-links4 > a:focus,
.scndry-bg .find-thera-cap > a:hover,
.scndry-bg .find-thera-cap > a:focus,
.scndry-bg .thm-btn.bg-color5:before,
.scndry-bg .thm-btn.bg-color5:after,
.pagination li.page-item.prev a.page-link:hover, 
.pagination li.page-item.next a.page-link:hover,
.pagination li.page-item.prev a.page-link:focus, 
.pagination li.page-item.next a.page-link:focus,
.gallery-video-box > a.scndry-bg:hover,
.gallery-video-box > a.scndry-bg:focus,
.appointment-calendar .fc-header-toolbar,
.scndry-layer .social-links3.v2 > a:hover,
.scndry-layer .social-links3.v2 > a:focus,
.widget-box.v3 ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li:hover > a:before,
.widget-box.v3 ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li > a:hover:before,
.widget-box.v3 ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li > a:focus:before,
.insta-gal-list > li a:before,
.comment-reply-wrap > h3:after,
.slc-box:before,
.additional-info > h3:after,
.rspn-mnu-btn:hover,
.rspn-mnu-btn:focus,
.rspn-mnu-cls:hover,
.rspn-mnu-cls:focus,
.search-close-btn:hover,
.search-close-btn:focus,
.header-search > form button:hover,
.header-search > form button:focus,
.sticky-menu nav > div > ul > li:hover > a,
.sticky-menu nav > div > ul > li.active > a,
.sticky-menu nav > div > ul > li > a:focus,
.slick-slider:not(.feat-caro) ul.slick-dots > li button:hover,
.slick-slider:not(.feat-caro) ul.slick-dots > li button:focus,
.slick-slider:not(.feat-caro) ul.slick-dots > li.slick-active button,
.slick-slider.feat-caro ul.slick-dots > li button:hover,
.slick-slider.feat-caro ul.slick-dots > li button:focus,
.slick-slider.feat-caro ul.slick-dots > li.slick-active button,
.proced-box.scndry-bg:hover,
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after,
.sn-main-slider .title:before
{
	background-color: var(--theme-color);
}

/*===== Text Color =====*/
.thm-clr,
.top-links > li a:hover,
.top-links > li a:focus,
.social-links > a:hover,
.social-links > a:focus,
.header-contact-info > li a:hover,
.header-contact-info > li a:focus,
nav ul li:hover > a,
nav ul li.active > a,
nav ul li > a:focus,
.serv-box:hover > i,
.simple-link.scndry-clr:hover,
.simple-link.scndry-clr:focus,
.serv-img2 > a:hover, 
.serv-img2 > a:focus,
.team-info > h3 a:focus,
.prod-info > h3 a:hover,
.prod-info > h3 a:focus,
.news-box-inner > h3 a:hover,
.news-box-inner > h3 a:focus,
.widget-box ul > li a:focus,
form.newsletter-form button:hover,
form.newsletter-form button:focus,
.copyright-links > p a:hover,
.copyright-links > p a:focus,
.bottom-links > li a:hover,
.bottom-links > li a:focus,
.about-play-btn.scndry-clr:hover,
.about-play-btn.scndry-clr:focus,
.live-video-img > a:hover,
.live-video-img > a:focus,
.storie-info > h3 a:hover,
.storie-info > h3 a:focus,
.news-info2 > h3 a:hover,
.news-info2 > h3 a:focus,
.scndry-bg .simple-link:hover,
.scndry-bg .simple-link:focus,
.feat-serv-box > h3 a:hover,
.feat-serv-box > h3 a:focus,
.banner-info > h3 a:hover,
.banner-info > h3 a:focus,
.course-info > h3 a:hover,
.course-info > h3 a:focus,
.video-box > a:not(.thm-btn):hover,
.video-box > a:not(.thm-btn):focus,
.news-info3 > h3 a:hover,
.news-info3 > h3 a:focus,
.news-img3 > a:hover,
.news-img3 > a:focus,
.bottom-bar.v3 p a:hover,
.bottom-bar.v3 p a:focus,
.about-video-box > a.scndry-clr:hover,
.about-video-box > a.scndry-clr:focus,
.scndry-layer .contact-info-box > span a:hover, 
.scndry-layer .contact-info-box > span a:focus,
.search-form button:hover,
.search-form button:focus,
.mini-post-info > h5 a:hover,
.mini-post-info > h5 a:focus,
.post-detail p a,
.video-box > a:hover,
.video-box > a:focus,
.meta3 > li a:hover,
.meta3 > li a:focus,
figure > a:hover,
figure > a:focus,
.team-detail-info-meta > li a:hover,
.team-detail-info-meta > li a:focus,
.post-detail.blog-detail .social-links5 > span.thm-clr,
.authr-meta > li a:hover,
.authr-meta > li a:focus,
.rating > a:hover,
.rating > a:focus,
.rspn-srch > button:hover,
.rspn-srch > button:focus,
.rspn-cnt > span a:hover,
.rspn-cnt > span a:focus,
.rsnp-mnu ul > li:hover > a,
.rsnp-mnu ul > li.active-parent > a,
.rsnp-mnu ul > li.active > a,
.rsnp-mnu ul > li > a:focus,
.serv-post-authr > a:hover,
.serv-post-authr > a:focus,
.course-athr a:hover,
.course-athr a:focus,
.serv-box4-inner > h3 a:hover,
.serv-box4-inner > h3 a:focus,
.testi-list-caro.slick-slider > button.slick-arrow:hover,
.testi-list-caro.slick-slider > button.slick-arrow:focus,
.scndry-layer .testi-list-caro.slick-slider > button.slick-arrow:hover,
.scndry-layer .testi-list-caro.slick-slider > button.slick-arrow:focus,
.meta > li a:hover,
.meta > li a:focus,
.meta2 > li a:hover,
.meta2 > li a:focus,
.course-info > span a:hover,
.course-info > span a:focus,
.proced-box > h4 a:hover,
.proced-box > h4 a:focus,
.minicart-info > h6 a:hover,
.minicart-info > h6 a:focus,
.minicart-info a.remove-cart:hover,
.minicart-info a.remove-cart:focus,
.widget-box ul > li:hover,
.widget-box ul > li a:hover
{
	color: var(--theme-color);
}

/*===== Border Color =====*/
.thm-brd-clr,
.thm-btn:before,
.thm-btn:after,
.proced-box:before,
.proced-box:after,
.about-inner > span,
.about-inner > span:before,
.about-inner > span:after,
.about-inner > span i
{
	border-color: var(--theme-color);
}

/*===== Secondary Color =====*/

/*===== Background Color =====*/
.scndry-bg,
.thm-btn.scndry-bg,
.thm-btn.scndry-bg:before,
.thm-btn.scndry-bg:after,
.thm-btn.bg-color11,
.thm-btn.bg-color11:before,
.thm-btn.bg-color11:after,
.thm-btn.bg-color15,
.thm-btn.bg-color15:before,
.thm-btn.bg-color15:after,
.thm-btn.bg-color6,
.thm-btn.bg-color6:before,
.thm-btn.bg-color6:after,
.thm-btn.bg-color13,
.thm-btn.bg-color13:before,
.thm-btn.bg-color13:after,
.thm-btn.bg-color14,
.thm-btn.bg-color14:before,
.thm-btn.bg-color14:after,
.thm-btn.bg-color12,
.thm-btn.bg-color12:before,
.thm-btn.bg-color12:after,
.thm-btn.bg-color16,
.thm-btn.bg-color16:before,
.thm-btn.bg-color16:after,
.thm-btn.bg-color7,
.thm-btn.bg-color7:before,
.thm-btn.bg-color7:after,
.thm-btn.bg-color8,
.thm-btn.bg-color8:before,
.thm-btn.bg-color8:after,
.thm-btn.bg-color9,
.thm-btn.bg-color9:before,
.thm-btn.bg-color9:after,
.thm-btn.bg-color10,
.thm-btn.bg-color10:before,
.thm-btn.bg-color10:after,
.thm-btn.bg-color5,
.thm-btn.bg-color5:before,
.thm-btn.bg-color5:after,
.thm-btn.bg-color1,
.thm-btn.bg-color1:before,
.thm-btn.bg-color1:after,
.thm-btn.bg-color2,
.thm-btn.bg-color2:before,
.thm-btn.bg-color2:after,
.thm-btn.bg-color3,
.thm-btn.bg-color3:before,
.thm-btn.bg-color3:after,
.thm-btn.bg-color4,
.thm-btn.bg-color4:before,
.thm-btn.bg-color4:after,
.thm-btn.bg-black,
.thm-btn.bg-black:before,
.thm-btn.bg-black:after,
.thm-btn.bg-white,
.thm-btn.bg-white:before,
.thm-btn.bg-white:after,
.thm-btn.bg-color11:hover,
.thm-btn.bg-color11:focus,
.thm-btn.bg-color15:hover,
.thm-btn.bg-color15:focus,
.thm-btn.bg-color6:hover,
.thm-btn.bg-color6:focus,
.thm-btn.bg-color13:hover,
.thm-btn.bg-color13:focus,
.thm-btn.bg-color14:hover,
.thm-btn.bg-color14:focus,
.thm-btn.bg-color12:hover,
.thm-btn.bg-color12:focus,
.thm-btn.bg-color16:hover,
.thm-btn.bg-color16:focus,
.thm-btn.bg-color7:hover,
.thm-btn.bg-color7:focus,
.thm-btn.bg-color8:hover,
.thm-btn.bg-color8:focus,
.thm-btn.bg-color9:hover,
.thm-btn.bg-color9:focus,
.thm-btn.bg-color10:hover,
.thm-btn.bg-color10:focus,
.thm-btn.bg-color5:hover,
.thm-btn.bg-color5:focus,
.thm-btn.bg-color1:hover,
.thm-btn.bg-color1:focus,
.thm-btn.bg-color2:hover,
.thm-btn.bg-color2:focus,
.thm-btn.bg-color3:hover,
.thm-btn.bg-color3:focus,
.thm-btn.bg-color4:hover,
.thm-btn.bg-color4:focus,
.thm-btn.bg-black:hover,
.thm-btn.bg-black:focus,
.thm-btn.bg-white:hover,
.thm-btn.bg-white:focus,
.thm-btn.scndry-bg:hover,
.thm-btn.scndry-bg:focus,
.thm-btn.scndry-bg:before,
.thm-btn.scndry-bg:after,
.thm-btn.bg-color11:before,
.thm-btn.bg-color11:after,
.thm-btn.bg-color15:before,
.thm-btn.bg-color15:after,
.thm-btn.bg-color6:before,
.thm-btn.bg-color6:after,
.thm-btn.bg-color13:before,
.thm-btn.bg-color13:after,
.thm-btn.bg-color14:before,
.thm-btn.bg-color14:after,
.thm-btn.bg-color12:before,
.thm-btn.bg-color12:after,
.thm-btn.bg-color16:before,
.thm-btn.bg-color16:after,
.thm-btn.bg-color7:before,
.thm-btn.bg-color7:after,
.thm-btn.bg-color8:before,
.thm-btn.bg-color8:after,
.thm-btn.bg-color9:before,
.thm-btn.bg-color9:after,
.thm-btn.bg-color10:before,
.thm-btn.bg-color10:after,
.thm-btn.bg-color5:before,
.thm-btn.bg-color5:after,
.thm-btn.bg-color1:before,
.thm-btn.bg-color1:after,
.thm-btn.bg-color2:before,
.thm-btn.bg-color2:after,
.thm-btn.bg-color3:before,
.thm-btn.bg-color3:after,
.thm-btn.bg-color4:before,
.thm-btn.bg-color4:after,
.thm-btn.bg-black:before,
.thm-btn.bg-black:after,
.thm-btn.bg-white:before,
.thm-btn.bg-white:after
{
	background-color: var(--secondary-color);
}

/*===== Text Color =====*/
.scndry-clr,
.thm-btn.scndry-bg,
.thm-btn.bg-color11,
.thm-btn.bg-color15,
.thm-btn.bg-color6,
.thm-btn.bg-color13,
.thm-btn.bg-color14,
.thm-btn.bg-color12,
.thm-btn.bg-color16,
.thm-btn.bg-color7,
.thm-btn.bg-color8,
.thm-btn.bg-color9,
.thm-btn.bg-color10,
.thm-btn.bg-color5,
.thm-btn.bg-color1,
.thm-btn.bg-color2,
.thm-btn.bg-color3,
.thm-btn.bg-color4,
.thm-btn.bg-black,
.thm-btn.bg-white,
.thm-btn.scndry-bg:hover,
.thm-btn.scndry-bg:focus,
.thm-btn.bg-color11:hover,
.thm-btn.bg-color11:focus,
.thm-btn.bg-color15:hover,
.thm-btn.bg-color15:focus,
.thm-btn.bg-color6:hover,
.thm-btn.bg-color6:focus,
.thm-btn.bg-color13:hover,
.thm-btn.bg-color13:focus,
.thm-btn.bg-color14:hover,
.thm-btn.bg-color14:focus,
.thm-btn.bg-color12:hover,
.thm-btn.bg-color12:focus,
.thm-btn.bg-color16:hover,
.thm-btn.bg-color16:focus,
.thm-btn.bg-color7:hover,
.thm-btn.bg-color7:focus,
.thm-btn.bg-color8:hover,
.thm-btn.bg-color8:focus,
.thm-btn.bg-color9:hover,
.thm-btn.bg-color9:focus,
.thm-btn.bg-color10:hover,
.thm-btn.bg-color10:focus,
.thm-btn.bg-color5:hover,
.thm-btn.bg-color5:focus,
.thm-btn.bg-color1:hover,
.thm-btn.bg-color1:focus,
.thm-btn.bg-color2:hover,
.thm-btn.bg-color2:focus,
.thm-btn.bg-color3:hover,
.thm-btn.bg-color3:focus,
.thm-btn.bg-color4:hover,
.thm-btn.bg-color4:focus,
.thm-btn.bg-black:hover,
.thm-btn.bg-black:focus,
.thm-btn.bg-white:hover,
.thm-btn.bg-white:focus
{
	color: var(--secondary-color);
}

/*===== Border Color =====*/
.scndry-brd-clr,
.thm-btn.scndry-bg:before,
.thm-btn.scndry-bg:after,
.thm-btn.bg-color11:before,
.thm-btn.bg-color11:after,
.thm-btn.bg-color15:before,
.thm-btn.bg-color15:after,
.thm-btn.bg-color6:before,
.thm-btn.bg-color6:after,
.thm-btn.bg-color13:before,
.thm-btn.bg-color13:after,
.thm-btn.bg-color14:before,
.thm-btn.bg-color14:after,
.thm-btn.bg-color12:before,
.thm-btn.bg-color12:after,
.thm-btn.bg-color16:before,
.thm-btn.bg-color16:after,
.thm-btn.bg-color7:before,
.thm-btn.bg-color7:after,
.thm-btn.bg-color8:before,
.thm-btn.bg-color8:after,
.thm-btn.bg-color9:before,
.thm-btn.bg-color9:after,
.thm-btn.bg-color10:before,
.thm-btn.bg-color10:after,
.thm-btn.bg-color5:before,
.thm-btn.bg-color5:after,
.thm-btn.bg-color1:before,
.thm-btn.bg-color1:after,
.thm-btn.bg-color2:before,
.thm-btn.bg-color2:after,
.thm-btn.bg-color3:before,
.thm-btn.bg-color3:after,
.thm-btn.bg-color4:before,
.thm-btn.bg-color4:after,
.thm-btn.bg-black:before,
.thm-btn.bg-black:after,
.thm-btn.bg-white:before,
.thm-btn.bg-white:after
{
	border-color: var(--secondary-color);
}

/*===== Additional Colors =====*/
.meta2 > li:not(.thm-clr) span:before,
.about-inner > span.scndry-clr,
.about-inner > span.scndry-clr:before,
.about-inner > span.scndry-clr:after,
.about-inner > span.scndry-clr i
{
	color: var(--secondary-color);
}

/*===== Estilos adicionales para mejorar la apariencia con los colores del logo =====*/

/* Botones principales con color rojo */
.thm-btn {
    background-color: var(--theme-color);
    color: #fff;
    border-color: var(--theme-color);
}

.thm-btn:hover {
    background-color: #B22222; /* Rojo más oscuro */
    border-color: #B22222;
}

/* Botones secundarios con color negro */
.thm-btn.scndry-bg,
.thm-btn.bg-color11,
.thm-btn.bg-color15 {
    background-color: var(--secondary-color);
    color: #fff; /* Texto blanco para contraste */
    border-color: var(--secondary-color);
}

.thm-btn.scndry-bg:hover,
.thm-btn.bg-color11:hover,
.thm-btn.bg-color15:hover {
    background-color: #333333; /* Negro más claro */
    border-color: #333333;
}

/* Enlaces y elementos de navegación */
nav ul li:hover > a,
nav ul li.active > a {
    color: var(--theme-color);
}

/* Iconos y elementos decorativos */
.serv-box > i,
.feat-cap > i {
    color: var(--theme-color);
}

/* Elementos de fondo con color negro */
.scndry-bg {
    background-color: var(--secondary-color);
}

/* Texto destacado */
.thm-clr {
    color: var(--theme-color);
}

/* Bordes y líneas decorativas */
.thm-brd-clr {
    border-color: var(--theme-color);
}

/* Elementos de hover con color rojo */
.simple-link:hover,
.simple-link:focus {
    color: var(--theme-color);
}

/* Elementos de fondo con color rojo */
.thm-bg {
    background-color: var(--theme-color);
}