/* Color variables */
:root {
    --white-color:white;
    --bg-color: #48b8e4;
    --gray-color: white;
  }
  
  /* 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;
    width: 100%;
    background-image: url("image/home.png");
    background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
  
  #skills i {
    height: 100px;
    width: 100px;
  }

  #portfolio img {
    height: 300px;
    background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  }

  #pro-img{
    height: 150px;
    background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  }
  
  #about .img,
  #about img,
  .hire-text h2 {
    position: relative;
    height:
    background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  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-button{
    height: 20px;
    width: 20px;
    background-color: blue;
    box-shadow:5px 3px 3px #f331a2;
  
  }
  
  #cv-img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
  }
  #card

  
  
  /* Contact section background image */
  #contact {
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    
  }
  
  @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;
   }
  }