:root {
  /*========== Colors ==========*/
  --light-color: #007604;
  --dark-color: #c56c00;
  --light-hover-color: #417f43;
  --dark-hover-color: #dd9f54;
}

/*-------------------------
        Light Mode
  -------------------------*/

::selection {
  background: var(--light-color);
}

::-moz-selection {
  background: var(--light-color);
}

.base-color {
  color: var(--light-color) !important;
}

.hero-social li a:hover,
.blog-link a:hover {
  color: var(--light-hover-color) !important;
}

.bg-base-color {
  background-color: var(--light-color) !important;
}

.btn-link {
  color: var(--light-color);
}

.btn-link:hover {
  color: var(--light-hover-color);
}

.follow-label:before,
.skill-box .fill-skillbar,
.timeline-area:before,
.testimonial .testimonial-border,
.blog-content:before,
.blog .owl-dot.active span {
  background: var(--light-color);
}

.testimonial .owl-dot.active span {
  background: var(--light-color) !important;
}

.menu li a,
header .navbar-brand span,
header .navbar-brand b,
.ability ul li:before,
.timeline-icon,
.timeline-year,
.language-skill ul li i,
.contact .form-item .form-control,
.comments .comment-info a,
.portfolio .portfolio-icon a,
.portfolio .portfolio-icon a:first-child,
.blog-content button:hover,
.comments .comment-info a:hover,
.social a:hover {
  color: var(--light-hover-color) !important;
}

.loader {
  border-top: 4px solid var(--light-color) !important;
}

.timeline-icon {
  border: 1px solid var(--light-color);
  background-color: var(--light-color);
}

.portfolio .portfolio-item-content::before {
  background-color: var(--light-color);
}

.menu-toggler span {
  background-color: var(--light-color);
}

.timeline-item:before {
  border: 2px solid var(--light-color);
}

.timeline-item:before {
  border: 1px solid var(--light-color);
}

.header nav .nav-pills a.active {
  color: var(--light-color) !important;
}

.header nav a:hover {
  color: var(--light-hover-color) !important;
}

.testimonial .testimonial-item::before {
  color: var(--light-color) !important;
}

/*-------------------------
      Flat Demo
-------------------------*/
.flat-demo .button-border,
.arshia-dark.flat-demo .button-border {
  background-color: var(--light-color);
}

.flat-demo .pill-button:hover,
.flat-demo .pill-button.active {
  background-color: var(--light-hover-color);
}

.arshia-dark .hero-social li a:hover {
  color: var(--light-hover-color) !important;
}

.arshia-dark .header nav a:hover {
  color: var(--light-hover-color) !important;
}

/*-------------------------
        Dark Mode
  -------------------------*/

@media (prefers-color-scheme: dark) {
  ::selection {
    background: var(--dark-color);
  }

  ::-moz-selection {
    background: var(--dark-color);
  }

  .base-color {
    color: var(--dark-color) !important;
  }

  .hero-social li a:hover,
  .blog-link a:hover {
    color: var(--dark-hover-color) !important;
  }

  .bg-base-color {
    background-color: var(--dark-color) !important;
  }

  .btn-link {
    color: var(--dark-color);
  }
  
  .btn-link:hover {
    color: var(--dark-hover-color);
  }

  .follow-label:before,
  .skill-box .fill-skillbar,
  .timeline-area:before,
  .testimonial .testimonial-border,
  .blog-content:before,
  .blog .owl-dot.active span {
    background: var(--dark-color);
  }

  .testimonial .owl-dot.active span {
    background: var(--dark-color) !important;
  }

  .menu li a,
  header .navbar-brand span,
  header .navbar-brand b,
  .ability ul li:before,
  .timeline-icon,
  .timeline-year,
  .language-skill ul li i,
  .contact .form-item .form-control,
  .comments .comment-info a,
  .portfolio .portfolio-icon a,
  .portfolio .portfolio-icon a:first-child,
  .blog-content button:hover,
  .comments .comment-info a:hover,
  .social a:hover {
    color: var(--dark-hover-color) !important;
  }

  .loader {
    border-top: 4px solid var(--dark-color) !important;
  }

  .timeline-icon {
    border: 1px solid var(--dark-color);
    background-color: var(--dark-color);
  }

  .portfolio .portfolio-item-content::before {
    background-color: var(--dark-color);
  }

  .menu-toggler span {
    background-color: var(--dark-color);
  }

  .timeline-item:before {
    border: 2px solid var(--dark-color);
  }

  .timeline-item:before {
    border: 1px solid var(--dark-color);
  }

  .header nav .nav-pills a.active {
    color: var(--dark-color) !important;
  }

  .header nav a:hover {
    color: var(--dark-hover-color) !important;
  }

  .testimonial .testimonial-item::before {
    color: var(--dark-color) !important;
  }

  /*-------------------------
        Flat Demo
  -------------------------*/
  .flat-demo .button-border,
  .arshia-dark.flat-demo .button-border {
    background-color: var(--dark-color);
  }

  .flat-demo .pill-button:hover,
  .flat-demo .pill-button.active {
    background-color: var(--dark-hover-color);
  }

  .arshia-dark .hero-social li a:hover {
    color: var(--dark-hover-color) !important;
  }

  .arshia-dark .header nav a:hover {
    color: var(--dark-hover-color) !important;
  }
}