/* ******************************** */
/* Default Properties */
/* ******************************** */

/* --- 01 Fonts
  - font-family: 'Roboto Slab', serif; 
*/

/* --- 02 COLORS

  text-primary-colors: #3cba54 and shades of it
  Primary:  #1877F2 
  
*/

html {
  scroll-behavior: smooth;
}

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

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

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

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

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #3cba5399;
}

/* ************************************** */
/* 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%;
  /* height: 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)
  );

  /* background-image: linear-gradient(
    to bottom,
    rgba(25, 254, 67, 0.1),
    rgba(25, 254, 67, 0.1)
  ); */
  transition: width 1s ease-in-out;
}

.featured-project-img-01:hover:before {
  /* height: 0%; */
  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 */
}

/* ************************************** */
/* mentions projects */
/* ************************************** */

.mentions-project:hover .mentions-project-img {
  display: none;
}
.mentions-project:hover .mentions-project-div {
  display: block;
}

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

  transition: background-image 0.5s;

  position: relative;
}

.mentions-project::after {
  content: "";

  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)
  );

  /* background-image: linear-gradient(to bottom, #021630a7, #021630a7); */
  /* background-image: linear-gradient(
    to bottom,
    rgba(25, 254, 67, 0.1),
    rgba(25, 254, 67, 0.1)
  ); */
  transition: width 1s ease-in-out;
}

.mentions-project:hover:after {
  /* height: 0%; */
  width: 0%;
}