/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
.resume-media-thumb {
  border-radius: 15px;
  margin-bottom: 5px;
}

.btn-outline-primary {
  --bs-btn-color: #0563bb;
  --bs-btn-border-color: #0563bb;
  --bs-btn-hover-bg: #0563bb;
  --bs-btn-hover-border-color: #0563bb;
  --bs-btn-active-bg: #0563bb;
  --bs-btn-active-border-color: #0563bb;
  --bs-btn-disabled-color: #0563bb;
  --bs-btn-disabled-border-color: #0563bb;
  color: #0563bb;
}

.badge-pill {
  border-radius: 15px;
}

.badge-primary {
  background-color: #0563bb;
}

.btn-outline-external-link {
  border-radius: 20px;
}

body {
  background-color: #242424;
  color: #c9c9c9;
}

.nav-menu a, .nav-menu a:focus {
  color: #c9c9c9;
  background: #2e2e2e;
}

.nav-menu a:hover, .nav-menu .active, .nav-menu .active:focus, .nav-menu li:hover > a {
  color: #fff;
  background: #00aeef;
}

.portfolio #portfolio-flters {
  background: #242424;
}

.portfolio #portfolio-flters li {
  color: #c9c9c9;
}

.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
  color: #00aeef;
}

.section-title h2::after {
  background: #00aeef;
}

.skills .progress-bar {
  background-color: #00aeef;
}

.back-to-top {
  background: #00aeef;
}

.section-title h2 {
  color: white;
}

.skills .progress .skill {
  color: #c9c9c9;
}

#footer .social-links a {
  background: #00aeef;
}

#footer {
  background: #242424;
  color: #c9c9c9;
}

a {
  color: #00aeef;
}

.btn-outline-primary {
  --bs-btn-color: #00aeef;
  --bs-btn-border-color: #00aeef;
  --bs-btn-hover-bg: #00aeef;
  --bs-btn-hover-border-color: #00aeef;
  --bs-btn-active-bg: #00aeef;
  --bs-btn-active-border-color: #00aeef;
  --bs-btn-disabled-color: #00aeef;
  --bs-btn-disabled-border-color: #00aeef;
  color: #00aeef;
}

.resume .resume-item {
  border-left: 2px solid #00aeef;
}

.resume .resume-item h4 {
  color: #00aeef;
}

.opaque-glass {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: #00000030;
}

.portfolio-info {
  background-color: #242424;
}

.portfolio .portfolio-wrap .portfolio-info::after {
  border-bottom: 3px solid #00aeef;
  border-right: 3px solid #00aeef;
}

.portfolio .portfolio-wrap .portfolio-info::before {
  border-top: 3px solid #00aeef;
  border-left: 3px solid #00aeef;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
  color: #c9c9c9;
}

.portfolio .portfolio-wrap .portfolio-info h6 {
  color: #c9c9c9;
}

.portfolio .portfolio-wrap .portfolio-links a {
  color: #c9c9c9;
}

.portfolio .portfolio-wrap .portfolio-links a:hover {
  color: #00aeef;
}

.resume .resume-item h5 {
  background: transparent;
}

.portfolio-info-modal {
  background-color: #2e2e2e;
}

#hero::before {
  background: rgba(36, 36, 36, 0.57);
}

#hero h1 {
  color: #c9c9c9;
}

#hero .social-links a {
  color: #777;
}

#hero .social-links a:hover {
  color: #00aeef;
}

.about .content ul i {
  color: #00aeef;
}

.about .content h3 {
  color: #c9c9c9;
}

#preloader::before {
  border: 6px solid #00aeef;
  border-top-color: #00aeef;
  border-bottom-color: #00aeef;
  border-top-color: #242424;
  border-bottom-color: #242424;
}

#preloader {
  background: #242424;
}

.resume .resume-item::before {
  border: 2px solid #00aeef;
  background: #242424;
}

.glightbox-clean .gslide-description {
  background: #242424;
}

.glightbox-clean .gslide-title {
  color: #c9c9c9;
}

.portfolio .portfolio-wrap {
  background: rgb(36, 36, 36);
}

.mobile-nav-active .mobile-nav-toggle {
  background-color: #00aeef;
}

@media (max-width: 991px) {
  #header {
    background: #242424;
    border-right: 1px solid #292929;
  }
}

.nav-menu a span, .nav-menu a:focus span {
  color: #c9c9c9;
}

.gallery-item {
  padding-left: 5px;
  padding-right: 5px;
}

@media (min-width: 300px) {
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}

@media (min-width: 585px) {
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
}

@media (min-width: 780px) {
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
}

@media (min-width: 1200px) {
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666666%;
  }
}

@media (max-width: 550px) {
  #hero {
    background-position-x: calc(right -100px);
  }
}

#hero p span {
  color: #00aeef;
}

@media (min-width: 900px) {
  #hero p {
    color: #777;
  }
  #hero .social-links a {
    color: #777;
  }
}
@media (max-width: 900px) {
  #hero p {
    color: #b7b7b7;
  }
  #hero .social-links a {
    color: #b7b7b7;
  }
}