html {
  scroll-behavior: smooth;
}

/* ************************************** */
/* changing whole websites scrollbar */
/* ************************************** */

/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #021227;
  border-radius: 10px;
  color: #021227;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #38bdf8;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #18adf1;
}

/* ************************************** */
/* featured project section */
/* ************************************** */

.featured-project-img-01 {
  background-image: linear-gradient(
    to bottom,
    rgba(25, 254, 67, 0),
    rgba(25, 254, 67, 0)
  );

  transition: background-image 0.5s;

  position: relative;

  color: #ffffff78;
}

.featured-project-img-01::before {
  content: "";
  width: 100%;
  display: block;

  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 0;

  background-image: linear-gradient(
    to bottom,
    rgba(2, 22, 49, 0.5),
    rgba(2, 22, 48, 0.5)
  );
  transition: width 1s ease-in-out;
}

.featured-project-img-01:hover:before {
  width: 0%;
}

/* ************************************** */
/* hiding scrollbar of img */
/* ************************************** */

.featured-project-img-01-div::-webkit-scrollbar {
  display: none;
}

.featured-project-img-01-div {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
@media (max-width:640px){
  .xsm-aling-center{
    align-items: center;
    text-align: center;
    padding: 0 20px;
  }
  .xsm-photo{
    height: 280px;
    margin-bottom: 20px;
  }
}