/* remove dot from services list */
#services {
    list-style-type: none;
  }

  /* change the icon color when user hover */
.faHover:hover{
  color:purple;
}

/* make item fade-in from the right one by one when user enter the site */
/* Only apply on index.handlebar */
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Opening fade-in animation */
.fade-in-right {
  animation-name: fadeInRight;
  animation-duration: 1s;
  animation-fill-mode: both;
}



.vertical-line {
  border-left: 2px solid #000;
  height: 100px;
  margin: 0 20px;
}

/* make the image container contains four images in the same size */
.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.img-box{
  width:50%;
  padding: 0.1rem;
  box-sizing: border-box;
}

.make-bold{
  font-size:larger;
  font-weight: 900;
}


/* Change the form asterik color */
.astreik-color{
  color: red
}

/* make the icon different color when hover (only used in sidebar) */
.social-icon {
  color: #333; /* Change this to your desired color */
  font-size: 1.5rem;
}

.social-icon:hover {
  color: #666; /* Change this to your desired hover color */
  text-decoration: none;
}

.sidebar{
  background-color: white;
  z-index: 9999; /* make sure the sidebar always on top of anything */
}

.icon-size{
  font-size: 1rem;
}