/* Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;600;700&display=swap');

html {
  /* Adjust font size */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  /* Font varient */
  font-variant-ligatures: none;
  -webkit-font-variant-ligatures: none;
  /* Smoothing */
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  /* font-smoothing: antialiased; */
  -webkit-font-smoothing: antialiased;
  text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
  scroll-behavior: smooth;
}

/* Nav */
/* .overlay-menu{
  
} */

/* Hero */

.img-size {
  width: 448px;
  height: 448px;
}

.hero-lineheight {
  line-height: 140%;
}

@media screen and (min-width: 1024px) {
  .css-width {
    width: 521px;
  }
}

/* Brands Collaborated  */

.logo-bg-gradient {
  background: rgb(10, 17, 26);
  background: linear-gradient(270deg, rgba(10, 17, 26, 0) 24%, rgba(10, 17, 26, 1) 100%);
}

.logo-bg-gradient-r {
  background: rgb(10, 17, 26);
  background: linear-gradient(90deg, rgba(10, 17, 26, 0) 24%, rgba(10, 17, 26, 1) 100%);
}



.lg\:h2-css {
  @media (min-width: 1024px) {
    line-height: 125%;
    font-size: 32px;
  }
}

@media screen and (min-width: 1024px) {
  .brand-width {
    width: 113px;
  }
}

/* Button   */
.outline-button {
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.75);
}

/* Skills and Tools */
.hw {
  width: 200px;
  height: 200px;
}

@media (max-width: 640px) {
  .hide-on-small {
    display: none;
    /* Hide the element on small screens */
  }
}

.green-hover {

  transition-duration: .3s;
  transition-timing-function: ease-in-out;
}

.green-hover:hover {
  border-color: #0F0;
}

.fixed-width {
  flex: 0 0 200px;
  /* Set the desired fixed width, for example, 200px */
  /* Add any additional styling or animations here */
}

.gallery {
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow: visible;



}


/* Design Process */
@media screen and (min-width: 1024px) {
  .brand-width {
    width: 205;
  }
}

.process-color {
  background-color: #0E1824;
  border-color: #0E1824;
}

.process-color:hover {
  background-color: #0E1824;
  border-color: #0F0;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
}

.overlay-color {
  background-color: #142333;
  color: #fff;
}





/* Footer */
.green-text {
  color: #0F0;
}


/* About */
.lineheight {
  line-height: 160%;
}



.lg\:a-width {
  @media (min-width: 1024px) {
    width: 600px;
  }
}

.lg\:a-bigtext {
  @media (min-width: 1024px) {
    line-height: 150%;
    font-size: 32px;
  }
}


/* Contact */
.line-h {
  line-height: 150%;
}




/* Project z-index for desktop or large screens */
/* Add this CSS for Project 2, 3, 4 */
@media (min-width: 1024px) {

  /* Adjust the minimum width to match your "large" breakpoint */
  .left-el-4-2 {
    position: relative;
    z-index: 1;
    top: -44px;
  }

  .right-el-4-3 {
    position: relative;
    z-index: 1;
    top: -98px;
  }

  .left-el-4-4 {
    position: relative;
    z-index: 1;
    top: -145px;
  }
}

/* Reduce bottom spacing for all projects for desktop or large screens */
@media (min-width: 1024px) {

  /* Adjust the minimum width to match your "large" breakpoint */
  /* .container { */
  /* margin-bottom: 0;
    padding-bottom: 0; */
  /* } */

  /* Additional adjustments specific to each project if necessary */
  .right-el-4-1,
  .left-el-4-2,
  .right-el-4-3,
  .left-el-4-4 {
    margin-bottom: -50px;
    padding-bottom: 0;
  }
}


/* Mouse Animation */
/* Add your CSS styles here */
#project-gallery {
  position: relative;
}

.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper img {
  max-width: 100%;
  height: auto;
}

#mouse-text {
  position: absolute;
  display: none;
  pointer-events: none;
}



/* Test */

/* @keyframes moveRightToLeft {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(-120%); 
      }
    } */


.r-to-l {
  width: 100%;
  /* Set your desired width */
  overflow: hidden;
}

.r-to-l .flex {
  display: flex;
  gap: 50px;
  animation: moveRightToLeft 20s linear infinite;
}

.r-to-l {
  width: 100%;
  /* Set your desired width */
  overflow: hidden;
  display: inline-block;
}

.r-to-l .flex {
  display: flex;
  gap: 12px;
}

.left-s {
  left: 0% !important;
}

@media (min-width: 1024px) {
  .right-el-4-1, .left-el-4-2, .right-el-4-3, .left-el-4-4 {
      margin-bottom: -200px;
      padding-bottom: 0;
  }
}

.wrapper {
  width: 90%;
  max-width: 1536px;
  margin-inline: auto;
  position: relative;
  height: 100px;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
}

@keyframes scrollLeft {
  to {
    left: -200px;
  }
}

.item {
  width: 200px;
  height: 100px;
  border-radius: 6px;
  position: absolute;
  left: max(calc(200px * 7), 100%);
  animation-name: scrollLeft;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.item1 {
  animation-delay: calc(30s / 7 * (7 - 1) * -1);
}

.item2 {
  animation-delay: calc(30s / 7 * (7 - 2) * -1);
}

.item3 {
  animation-delay: calc(30s / 7 * (7 - 3) * -1);
}

.item4 {
  animation-delay: calc(30s / 7 * (7 - 4) * -1);
}

.item5 {
  animation-delay: calc(30s / 7 * (7 - 5) * -1);
}

.item6 {
  animation-delay: calc(30s / 7 * (7 - 6) * -1);
}

.item7 {
  animation-delay: calc(30s / 7 * (7 - 7) * -1);
}

/* .item8 {
  animation-delay: calc(30s / 8 * (8 - 8) * -1);
} */

.services {
  color: #ffffff50;
  border: 1px solid #ffffff50;
  padding: 10px 20px;
  border-radius: 999em;
  white-space: nowrap;
  font-size: 14px;
  transition: border-color 0.3s ease-in-out;
  cursor: default;
}

/* .services:hover {
  border-color: #0F0;
} */