body.wood {
  background: url('../profile/wood.png') no-repeat center center fixed !important;
  background-size: cover !important;
}

#main>section {
  background-color: rgba(20, 20, 20, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

header,
.right-side,
.left-side {
  background: rgba(15, 15, 15, 0.9) !important;
  backdrop-filter: blur(5px) !important;
}

.base-color {
  color: #20c997;
}

.secondary-button {
  color: #20c997;
  border: 1px solid #20c997;
  background-color: transparent;
}

.secondary-button:hover {
  color: #fff;
  background-color: #20c997;
}

.subtitle {
  color: #20c997;
}

.subtitle::before {
  background-color: #20c997;
}

.subtitle::after {
  background: linear-gradient(90deg, #20c997 40%, rgba(13, 202, 145, 0) 100%);
}

.heading-meta-container .description {
  color: #20c997;
}

.heading-meta-container .description::before {
  background-color: #20c997;
}

.heading-meta-container .description::after {
  background: linear-gradient(to right, rgba(185, 143, 95, 0.15), #20c997, rgba(185, 143, 95, 0.15));
}

.vertical-line::after {
  background: linear-gradient(to top, rgba(185, 143, 95, 0.15), #20c997, rgba(185, 143, 95, 0.15));
}

#main>section {
  background-color: rgba(20, 20, 20, 0.8);
  /* Semi-transparent dark for wood look */
  backdrop-filter: blur(10px);
  /* Glass effect */
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/*------------------------- Preloader -------------------------*/
#line-loader:before,
#line-loader:after {
  background-color: #e5e7ed;
}

.middle-line:before {
  background-color: #000;
}

.middle-line:after {
  background-color: #bbb;
}

/*------------------------- OVERLAY MENU -------------------------*/
a.menu-arrow {
  color: #20c997;
}

.menu li a {
  color: #20c997;
}

.menu li:nth-child(1) a {
  color: #028ac9;
}

.menu li:nth-child(2) a {
  color: #f13a3a;
}

.menu li:nth-child(3) a {
  color: #dba423;
}

.menu li:nth-child(4) a {
  color: #0cc0de;
}

.menu li:nth-child(5) a {
  color: #d78fd6;
}

.menu li:nth-child(6) a {
  color: #ff4274;
}

.portfolio-dark-theme .menu a.active span {
  color: inherit !important;
}

.menu .list-group-item {
  background-color: transparent;
}

header,
.right-side {
  background: rgba(15, 15, 15, 0.9);
  backdrop-filter: blur(5px);
}

/*------------------------- RIGHT SIDE -------------------------*/
#date b {
  color: #20c997;
}

.follow-label {
  color: #595959;
}

.follow-label::before {
  background-color: #20c997;
}

.social a {
  color: #595959;
}

/*------------------------- LEFT SIDE -------------------------*/
.left-side {
  background-color: rgba(15, 15, 15, 0.9);
  backdrop-filter: blur(5px);
}

.primary-button {
  color: #fff;
  background-color: #20c997;
  border: 1px solid #20c997;
}

.primary-button:hover {
  color: #fff;
}

/*------------------------- Next & Prev Page -------------------------*/
.next-prev-page button {
  background-color: transparent;
  border: 2px solid #20c997;
  color: #20c997;
}

/*------------------------- About -------------------------*/
.border-img {
  border: 1px solid #20c997;
}

.personal-info li small {
  color: #595959;
}

.count-up::before,
.count-up::after {
  background: linear-gradient(to right, rgba(185, 143, 95, 0.15), #20c997, rgba(185, 143, 95, 0.15));
}

.count-icon {
  color: #20c997;
}


/*------------------------- Services -------------------------*/

.services-description {
  color: #595959;
}



/*--------------------------- Contact ---------------------------*/
.form-control {
  border-bottom: 1px solid #595959;
}

.form-control:focus {
  color: #20c997;
  background-color: transparent;
  border-bottom: 1px solid #20c997;
}

.item-icon {
  color: #20c997;
}

/*--------------------------- Page Load Inner ---------------------------*/
.page-ajax-loaded {
  background-color: #fff;
}

.ajax-page-content {
  background-color: #fff;
}

.ajax-page-nav div.nav-item a {
  color: #595959;
  background-color: #ccc;
}

.ajax-page-nav div.nav-item a:hover {
  background-color: #20c997;
  color: #fff;
}


/*------------------------- Custom Scrollbar -------------------------*/
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #fff;
  background-color: #20c997;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #20c997;
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: #20c997;
}

.slider-thumb::before {
  background: #c49f69;
  background: #c29a60;
}


/*------------------------- Mouse Magic Cursor -------------------------*/
.mmc-inner,
.mmc-inner.mmc-hover {
  background-color: #20c997;
}

.mmc-outer {
  border: 2px solid #20c997;
}

/*------------------------- Media -------------------------*/
@media (max-width: 991px) {
  .services-boxes .row [class^="col-"]::before {
    background: linear-gradient(to right, rgba(185, 143, 95, 0.15), #20c997, rgba(185, 143, 95, 0.15)) !important;
  }

  .left-side a.download-cv {
    background-color: #20c997 !important;
    color: #fff;
  }

  .next-prev-page button {
    background-color: #e5e7ed !important;
  }

  .nav-btn {
    background-color: transparent;
  }

  .nav-btn i {
    color: #fff;
  }

  .menu-toggle {
    background-color: #e5e7ed !important;
  }

  .menu-toggle span {
    background: #20c997;
  }

  .menu-overlay {
    background-color: rgba(0, 0, 0, 0.25);
  }

  .mobile-menu .list-group-item a {
    color: #000;
  }

  .mobile-menu .list-group-item a.active {
    color: #20c997;
  }
}