/* ============================================================
   LIGHT THEME OVERRIDE  — White / Black / Red color scheme
   ============================================================ */

/* -------------------------------------------------------
   1. Root Variable Overrides
------------------------------------------------------- */
:root {
    /* Main section backgrounds: very dark → white */
    --color-four: rgb(255, 255, 255);
    --color-four-rgb: 255, 255, 255;

    /* Secondary backgrounds (header-top, footer): dark gray → light gray */
    --color-two: rgb(242, 242, 242);
    --color-two-rgb: 242, 242, 242;

    /* Text/icons that were light (designed for dark bg): → dark */
    --color-three: rgb(31, 32, 35);
    --color-three-rgb: 31, 32, 35;

    /* Footer bottom bar: dark gray → very light */
    --color-six: rgb(220, 220, 220);
    --color-six-rgb: 220, 220, 220;
    --white-color-rgb: rgba(247, 247, 247);
}

/* -------------------------------------------------------
   2. Base — body & page wrapper
------------------------------------------------------- */
body {
    color: var(--color-three);
    background-color: #ffffff;
}

.page-wrapper {
    background-color: #ffffff;
}

/* Headings — were using --color-two (now light), force dark */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-three);
}

p,
.text {
    color: rgb(71, 71, 71);
}

/* Section title heading — used --color-three (now dark) → good
   Section title text opacity variant stays readable */
.sec-title_heading {
    color: var(--color-three);
}

.sec-title_text {
    color: rgba(31, 32, 35, 0.65);
}

/* List style one — white text on dark bg → dark on light */
.list-style-one li,
.list-style-one li a {
    color: var(--color-three);
}

/* -------------------------------------------------------
   3. Header
------------------------------------------------------- */
.main-header {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

/* Header top bar — black background */
.header-top {
    background-color: #111111;
    border-bottom: none;
}

/* List items text */
.header-top_list li {
    color: rgba(255, 255, 255, 0.65);
}

/* Divider between list items */
.header-top_list li:before {
    background-color: rgba(255, 255, 255, 0.20);
}

/* Links inside list */
.header-top_list li a {
    color: rgba(255, 255, 255, 0.85);
}

.header-top_list li a:hover {
    color: var(--main-color);
}

/* Language dropdown button */
.language-dropdown button {
    color: rgba(255, 255, 255, 0.85);
}

.language-dropdown button:hover,
.language-dropdown button:focus {
    color: var(--main-color);
}

/* Header socials */
.header_socials span {
    color: rgba(255, 255, 255, 0.65);
}

.header_socials a {
    color: rgba(255, 255, 255, 0.85);
    border: rgba(255, 255, 255, 0.20);
}

.header_socials a:hover {
    color: #ffffff;
    border: var(--main-color);
    background-color: var(--main-color);
}

/* Header lower / nav area */
.main-header .header-lower {
    background-color: #ffffff;
}

/* Nav link — text was --color-three (now dark) → OK.
   Border was white-rgba → make dark-rgba */
.main-header .main-menu .navigation>li>a {
    color: var(--color-three);
    border: rgba(0, 0, 0, 0.12);
}

/* Nav hover / active — keep red bg + white text */
.main-header .main-menu .navigation>li:hover>a,
.main-header .main-menu .navigation>li.current>a {
    color: #ffffff;
    background-color: var(--main-color);
    border: var(--main-color);
}

/* Sticky / fixed header */
.main-header.fixed-header .header-lower {
    background-color: #ffffff;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
}

/* Dropdown btn (mobile toggle indicator inside nav) */
.main-header .main-menu .navbar-collapse>ul li.dropdown .dropdown-btn {
    color: var(--color-three);
    border: rgba(0, 0, 0, 0.20);
}

/* Header options box (search + cart + menu icons container) */
.header-options_box {
    border: rgba(0, 0, 0, 0.12);
}

/* Search button icon */
.main-header .search-box-btn {
    color: var(--color-three);
}

.main-header .search-box-btn:hover {
    color: var(--main-color);
}

/* Cart sidebar button */
.navSidebar-button {
    color: var(--color-three);
    border-left-color: rgba(0, 0, 0, 0.12);
    border-right-color: rgba(0, 0, 0, 0.12);
}

.navSidebar-button span {
    color: #ffffff;
    background-color: var(--main-color);
}

.journey-block_one-title a {
    color: var(--color-three);
}

/* About / menu widget icon */
.about-widget {
    color: var(--color-three);
}

/* Mobile nav toggler */
.main-header .mobile-nav-toggler {
    color: var(--color-three);
}

.btn-style-two .btn-wrap .text-one,
.btn-style-two .btn-wrap .text-two {
    color: var(--color-three);
}

.shop-block_one-title {
    color: var(--color-three);
}

.event-block_one-heading a {
    color: var(--color-three);
}

.event-block_two-inner {
    border-top: 1px solid var(--color-three);
}

.event-block_two:last-child {
    border-bottom: 1px solid var(--color-three);
}

.event-block_two-arrow .arrow {
    color: var(--color-three);
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.event-block_two-arrow .arrow:hover {
    color: #fff;
}

/* -------------------------------------------------------
   4. Buttons
------------------------------------------------------- */

/* btn-style-three hover fill — was --color-two (now light gray) → dark */
.btn-style-three:before {
    background-color: var(--color-three);
}

/* -------------------------------------------------------
   5. Search Popup
------------------------------------------------------- */
.search-popup .color-layer {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.06);
}

/* -------------------------------------------------------
   6. Footer
------------------------------------------------------- */
.main-footer {
    background-color: var(--color-three);
}

/* Footer titles were --white-color (invisible on light bg) */
.footer-title {
    color: #ffffff;
}

.footer-widget h5 {
    color: #ffffff;
}

/* Footer text */
.footer-text {
    color: var(--white-color-rgb);
}

/* Footer links */
.footer-list li a {
    color: var(--white-color-rgb);
}

.footer-list li a:hover {
    color: var(--main-color);
}

/* Footer contact list */
.footer-contact_list li {
    color: var(--white-color-rgb);
}

.footer-contact_list li span {
    color: var(--white-color-rgb);
}

/* Footer social icons */
.footer_socials a {
    color: var(--white-color-rgb);
    border: 1px solid var(--white-color-rgb, 0.15);
}

.footer_socials a:hover {
    color: #ffffff;
    border: var(--main-color);
    background-color: var(--main-color);
}

/* Footer bottom bar */
.footer-bottom {
    background-color: rgb(71, 71, 71);
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.footer-bottom .copyright {
    color: var(--white-color-rgb, 0.15);
}

.footer-bottom_nav li a {
    color: var(--white-color-rgb, 0.15);
}

.footer-bottom_nav li a:hover {
    color: var(--main-color);
}

/* Newsletter input */
.newsletter-box_two .form-group input {
    background-color: #ffffff;
    color: var(--color-three);
    border: rgba(0, 0, 0, 0.15);
}

.newsletter-box_two .form-group input::placeholder {
    color: rgba(31, 32, 35, 0.50);
}

.newsletter-box_two .form-group input[type="text"],
.newsletter-box_two .form-group input[type="email"] {
    background-color: #fff;
}

.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"] {
    color: var(--color-three);
}

.search-popup .form-group input[type="search"]::placeholder {
    color: var(--color-three);
}

/* -------------------------------------------------------
   7. Sidebar Cart (xs-sidebar-widget)
------------------------------------------------------- */
.xs-sidebar-widget {
    background-color: #ffffff;
}

.sidebar-info-contents .title-box h5,
.sidebar-info-contents .title-box h5 span {
    color: var(--color-three);
}

.sidebar-info-contents .price {
    color: rgba(31, 32, 35, 0.65);
}

.sidebar-info-contents .no-cart {
    color: rgba(31, 32, 35, 0.50);
}

.sidebar-info-contents .post-block h6 a {
    color: var(--color-three);
}

.sidebar-info-contents .post-block h6 a:hover {
    color: var(--main-color);
}

.sidebar-info-contents .price-box {
    color: var(--main-color);
}

/* -------------------------------------------------------
   8. About Sidebar
------------------------------------------------------- */
.about-sidebar {
    background-color: #ffffff;
}

.about-sidebar .content-box h3,
.about-sidebar .content-box h3 span {
    color: var(--color-three);
}

.about-sidebar .text {
    color: rgba(31, 32, 35, 0.70);
}

.about-sidebar .about-one_list li {
    color: var(--color-three);
    border: rgba(0, 0, 0, 0.10);
}

.about-sidebar .social-box a {
    color: var(--color-three);
    border: rgba(0, 0, 0, 0.15);
}

.about-sidebar .social-box a:hover {
    color: #ffffff;
    background-color: var(--main-color);
    border: var(--main-color);
}

/* -------------------------------------------------------
   9. Preloader
------------------------------------------------------- */
.preloader {
    background-color: #ffffff;
}

/* -------------------------------------------------------
   10. Scrollbar — keep red handle
------------------------------------------------------- */
::-webkit-scrollbar-track {
    background: #eeeeee;
}

::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
}

/* -------------------------------------------------------
   11. UI Menu hover (custom select)
------------------------------------------------------- */
.ui-menu-item:hover {
    background-color: #eeeeee;
}

.logo a img {
    max-width: 200px;
}

.cats-slider-section {
    background-color: #fff;
    padding: 70px 0px;
}

@media screen and (max-width: 991px) {
    .cats-slider-header {
        margin-bottom: 0px !important;
    }

    .sec-title {
        margin-bottom: 0px !important;
    }
}

@media screen and (max-width: 767px) {
    .cats-slider-header {
        gap: 0px;
    }
}

.cats-slider-section .cats-slider-prev,
.cats-slider-section .cats-slider-next {
    color: var(--color-three);
}

.cats-slider-section .cats-slider-prev:hover,
.cats-slider-section .cats-slider-next:hover {
    color: #fff;
}

.page-title:before {
    opacity: 0.50;
    background-color: var(--color-three);
}

.service-block_one-title a,
.service-block_one-text {
    color: #fff;
}

.journey-block_two-title a {
    color: var(--color-three);
}