/* dark-mode-btn */
body {
    background-color: #f6f6f6;
    transition: background-color .3s;
}
body[light-mode="dark"] {
    background-color: #1f1f1f;
    color: #ffffff;
}
body[light-mode="dark"]::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.7);
    border-radius: 10px;
}
body[light-mode="dark"]::-webkit-scrollbar-track {
    background-color: rgba(148, 148, 148, 0.2);
    border-radius: 10px;
}
body[light-mode="dark"] .header nav .container .mode-btn .light-mode-btn span:nth-child(1){
    background-color: var(--mustard);
}
body[light-mode="dark"] .header nav .container .mode-btn .light-mode-btn span:nth-child(2) {
    left: 49px;
    background-color: #ffffff;
}
/* ======= Header area ======= */
body[light-mode="dark"] .header.sticky nav .container {
    background: rgba(238, 238, 238, 0.543);
    backdrop-filter: blur(2px);
}

body[light-mode="dark"] .hamburger-btn span:nth-child(1){
    width: 50%;
}
body[light-mode="dark"] .hamburger-btn span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #000000;
    border-radius: 5px;
    transition: 0.3s ease-in-out;
}
body[light-mode="dark"] .hamburger-btn span:nth-child(3){
    width: 50%;
}
body[light-mode="dark"] .hamburger-btn span:nth-child(1),
body[light-mode="dark"] .hamburger-btn span:nth-child(2) {
    transform-origin: center;
}
/* ======= visual area ======= */
body[light-mode="dark"]
.hero-section01 #hero01 {
    background-color: #66AC89;
    color: #fff;
}
body[light-mode="dark"]
.hero-section02 #hero02 {
    background-color: #E1A420;
    color: #fff;
}
body[light-mode="dark"]
.hero-section02 #hero03 {
    background-color: #2C97E4;
    color: #fff;
}
body[light-mode="dark"]
.visual-bottom .touch-btn {
    background-color: #616161;
}

/* ======= About area ======= */
body[light-mode="dark"] .about-text .about-02 p{
    color: var(--orange);
}
body[light-mode="dark"] .about-text .about-02 p #x-cross {
    color:#ddd;
}
body[light-mode="dark"] .about-text .about-02 p #regular  {
    color:var(--orange);
}
body[light-mode="dark"] .my-info li {
    color: #bcbcbc;
}
body[light-mode="dark"] .my-info li span  {
    color: var(--orange);
}

/* ======= My Skills area ======= */
body[light-mode="dark"] .education-card{
    background-color: #242424;
}
body[light-mode="dark"] .experience-card{
    background-color: #242424;
}
body[light-mode="dark"] .skills-card{
    background-color: #242424;
}
body[light-mode="dark"] .education-info .major{
    color: #dddddd;
}
body[light-mode="dark"] .experience-date{
    border: 2px solid #dddddd;
}
body[light-mode="dark"] .experience-description{
    color: #dddddd;
}
body[light-mode="dark"] .skill-dots i.active{
    background-color: #dddddd;
}

body[light-mode="dark"] .skill-dots i {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #707070;
}

/* ======= Ongoing area ======= */
body[light-mode="dark"] .work-container .work-desc .work-wrap {
    color: #1f1f1f;
}
body[light-mode="dark"] .Ongoing .work-container{
    border: 1px solid #fff;
}
body[light-mode="dark"] .workpiece .container .design-timeline li {
    border-bottom: 1px solid #fff;
}
/* ======= Workpiece area ======= */
body[light-mode="dark"] .workpiece .container .design-timeline li a .year {
    color: #dddddd;
}
body[light-mode="dark"] .workpiece .container .design-timeline li a .project {
    color: #dddddd;
}
body[light-mode="dark"] .workpiece .container .design-timeline li .category {
    color: #dddddd;
    border: 1px solid #fff;
}
body[light-mode="dark"] .workpiece .container .design-timeline li .category:hover{
    color: #fff;
    background-color:var(--orange);
}
/* ======= footer area ======= */
body[light-mode="dark"] .footer {
    background-color: #242424;
}
body[light-mode="dark"] #resumeButton {
    background-color: #d6d6d6;
    color: #1f1f1f;
}
body[light-mode="dark"] #resumeButton:hover {
    color: #fff;
}
body[light-mode="dark"] .footer-bottom-center a:hover{
    background-color: #fff;
    color: #1f1f1f;
}