/* --- LIGHT MODE CSS --- */
body.light-mode {
    background: #f9f9f9;
    color: #000;
}

body.light-mode ::selection {
    background: #cf611a;
    color: #fff;
}

body.light-mode header.nav.scrolled {
    background-color: rgba(249, 249, 249, 0.9);
    border-bottom: none;
}

body.light-mode header .brand {
    color: #000;
}

body.light-mode header .logo .brand span {
    background-image: linear-gradient(to right, #cf611a 0%, #d08b5d 50%, #000000 50%, #000000 100%);
}

body.light-mode .profile-img img {
    background-image: linear-gradient(135deg, #cf611a, #da8b56 50%, transparent 50%);
}

body.light-mode .round-1 {
    box-shadow: 0 0 50px #f4a068;
    background: linear-gradient(-25deg, #ffad76, #e0a985);
}

body.light-mode .round-2 {
    box-shadow: 0 0 50px #ff9854;
    background: linear-gradient(180deg, #ffb17c, #fd934d);
}

body.light-mode header .navigation .navigation-items a {
    background-image: linear-gradient(to right, #cf611a 0%, #ff8533 50%, #000000 50%, #000000 100%);
    color: #333;
}



body.light-mode header .navigation .navigation-items a:after {
    background: #000;
}

body.light-mode header .navigation .navigation-items a:before {
    background: #000;
}

@media (max-width: 1040px) {
    body.light-mode header .navigation.active .navigation-items {
        background: #fff;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    }

    body.light-mode header .navigation .navigation-items a {
        color: #000;
    }

    body.light-mode header .navigation .navigation-items a:after {
        background: #000;
    }
}

body.light-mode header .menu-btn {
    filter: invert(1);
}

body.light-mode header .menu-btn.active {
    filter: invert(1);
}

body.light-mode .showcase .text h1,
body.light-mode .showcase .text h2,
body.light-mode .showcase .text p {
    color: #000;
}

body.light-mode .showcase .text a {
    background: #000;
    color: #fff;
}

body.light-mode .showcase .text a animated-icons {
    filter: invert(1);
}

body.light-mode .showcase .social li a {
    color: #000;
}

body.light-mode .box {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

body.light-mode .hacker-permanent {
    background: #fff;
    color: #000;
    border-color: #000;
    -webkit-text-stroke: 0.4px currentColor;
}

body.light-mode .hacker-permanent::before {
    color: #cf611a;
}

body.light-mode .hacker-permanent span::after {
    color: #cf611a;
    text-shadow: 0 0 5px rgba(207, 97, 26, 0.5);
}

body.light-mode .container_services {
    background: #f9f9f9;
    color: #000;
}

body.light-mode .service_wrapper .title {
    background: none;
    -webkit-text-fill-color: #b84c0c;
    color: #b84c0c;
}

body.light-mode .service_container .service .service_Title h2 {
    color: #000;
}

body.light-mode .service_container .service .service_Title h2.ActiveHeading {
    background: none;
    -webkit-text-fill-color: #b84c0c;
    color: #b84c0c;
}

body.light-mode .service_container .service .service_Title .icon-service {
    fill: #000;
}

body.light-mode .service_container .service .service_Title .icon-service.active {
    fill: #b84c0c;
}

body.light-mode .service_description ul li {
    color: #333;
}

body.light-mode .service_wrapper button.button_1 {
    color: #fff;
    background: #000;
    border-color: #000;
}

body.light-mode .service_wrapper button.button_1::after {
    background: #fff;
}

body.light-mode .service_wrapper button.button_1:hover {
    color: #000;
}

body.light-mode .service_wrapper button.button_2 {
    color: #000;
    background: rgba(255, 255, 255, 0.85);
    border-color: #000;
}

body.light-mode .service_wrapper button.button_2::after {
    background: #000;
}

body.light-mode .service_wrapper button.button_2:hover {
    color: #fff;
}

body.light-mode .header-wrp header>h2 {
    -webkit-text-stroke: 3px #000;
    -webkit-text-fill-color: #f9f9f9;
}

body.light-mode .controls ul li {
    background: #000;
}

body.light-mode .controls ul li::before {
    border-color: #000;
}

body.light-mode .controls ul li::after {
    background: rgba(0, 0, 0, 0.2);
}

body.light-mode .slideProgress {
    background: #000;
}

body.light-mode .arrows svg {
    fill: #000;
}

body.light-mode .header-wrp .socials a,
body.light-mode .arrowDown {
    color: #000;
}

body.light-mode .image-link {
    background: #fff;
    color: #000;
    border-color: #000;
}

body.light-mode .image-link:hover {
    background: #000;
    color: #fff;
}

body.light-mode .skills-section {
    background: #f9f9f9;
}

body.light-mode .marquee {
    border-color: #ddd;
    border-top: 2px solid #ddd;
}

body.light-mode .marquee-content {
    color: #000;
    -webkit-text-stroke: 1.5px #000;
}

body.light-mode .grid .grid-el {
    border-color: #ddd;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

body.light-mode .grid-el .row {
    color: #000;
}

body.light-mode .grid-el .tags span {
    border-color: #b84c0c !important;
    color: #b84c0c !important;
}

body.light-mode .grid-el .tags span svg {
    fill: #b84c0c !important;
}

body.light-mode .physics-tag {
    background: #000;
    color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body.light-mode .button {
    background: #fff;
    color: #000;
    border-color: #000;
}

body.light-mode .button:hover {
    background: #000;
    color: #fff;
}

body.light-mode .contact {
    background: #f9f9f9;
    color: #000;
}

body.light-mode .contact h2 {
    border-color: #000;
    color: #000;
}

body.light-mode .contact .row h2 {
    -webkit-text-stroke: 2px #000;
    -webkit-text-fill-color: transparent;
}

body.light-mode .contact .socials,
body.light-mode .contact .contacts {
    border-top-color: #000;
}

body.light-mode .contact a {
    color: #000;
}

body.light-mode .contact a:hover {
    color: #cf611a;
}

body.light-mode .preloader {
    box-shadow: inset 55vw 0 0 0 #000, inset -55vw 0 0 0 #000;
}

body.light-mode .preloader.loaded {
    box-shadow: inset 0 0 0 0 #000, inset 0 0 0 0 #000;
}

body.light-mode .preloader .line {
    background-color: #fff;
}

body.light-mode .preloader-text {
    -webkit-text-stroke: 2px white;
}

body.light-mode .cursor {
    background: #000;
}

body.light-mode .cursor-follow {
    border-color: #000;
}

body.light-mode::-webkit-scrollbar-track {
    border-inline-start: 1px solid #ddd;
    background-color: #f9f9f9;
}

body.light-mode::-webkit-scrollbar-thumb {
    background-color: #2b2b2b;
}

@media (max-width: 768px) {
    .preloader-text {
        color: black;
        -webkit-text-stroke: 0;
    }

    body.light-mode .preloader-text {
        color: white;
        -webkit-text-stroke: 0;
    }
}