/* Color variables */
:root {
  --white-color: #fff;
  --bg-color: #fff;
  --gray-color: #ccc;
}

/* Changing background color */
body {
  background: var(--bg-color) !important;
}

/* Changing link color */
.nav-item .nav-link {
  color: var(--white-color);
}

/* Hero section background image */
.hero {
    height: 100vh;
    background-image: url(../images/home-bg.jpg);
    background-repeat: no-repeat;
    background-position: 60% 0%;
    background-size: cover;
    background-attachment: fixed
}

#skills i {
  height: 100px;
  width: 100px;
}

#portfolio img {
  height: 300px;
  object-fit: cover;
}

#about .img,
#about img,
.hire-text h2 {
  position: relative;
}

/* Timeline background line */
#about .img::before {
  content: "";
  left: 50%;
  width: 4px;
  position: absolute;
  height: calc(100% + 140px);
  background: var(--gray-color);
}

#about img,
#about .hire-text h2 {
  width: 140px;
}

#about .hire-text h2 {
  height: 140px;
}

.social-icons a {
  width: 40px;
  height: 40px;
}

footer .social-icons a {
  width: 30px;
  height: 30px;
}

#cv img {
  width: 230px;
}

/* Contact section background image */
#contact {
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-image: url("../images/contact-bg.jpeg");
}

@media screen and (max-width: 990px) {
  #skills .card {
    width: calc(100% / 2 - 10px) !important;
  }
}

@media screen and (max-width: 668px) {
  #skills .card,
  #portfolio .card-wrapper {
    width: 100% !important;
  }
  #about .hire-text h2 {
    height: 70px;
    width: 70px;
  }
}