.section-portfolio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin: 64px 0px;
}

.section-portfolio img {
  transition: all 0.3s ease-in-out;
}

.portifolio-block {
  background-color: #000;
  max-width: 361px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  font-family: "Titillium Web", sans-serif;
  font-size: clamp(2rem, 2.5vw, 3rem);
  line-height: 40px;
  border: 1px solid #fff;
  transition: all 0.3s ease-in-out;

  h2 {
    font-size: 100%;
  }
}

.hide-mobile:hover {
  transition: all 0.3s ease-in-out;
  scale: 1.1;
}

@media (max-width: 900px) {
  .section-portfolio {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .section-portfolio {
    display: flex;
    justify-content: center;
  }

  .portifolio-block {
    width: 100%;
    gap: 30px;

    padding: 20px;
  }

  .hide-mobile {
    display: none;
  }
}

.see-more-projects {
  border: 1px solid #fff;
  padding: 12px 16px;
  cursor: pointer;
  width: 80%;
  background-color: #000;
  font-family: "Titillium Web", sans-serif;
  font-size: clamp(1rem, 1vw, 2rem);
  text-align: center;
  text-decoration: none;
  color: #fff;
}

.see-more-projects button {
  all: unset;
}

.see-more-projects:hover {
  background-color: #df7310;
  color: #fff;
  border-color: #000;
}

.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
    display: flex;
}

.marquee-track {
    display: flex;
    width: max-content;
    gap: 40px;
}

.marquee-content {
    display: flex;
    gap: 40px; 
    align-items: center;
}

.marquee-content img {
    height: 160px; 
    width: auto;
    object-fit: contain;
}

.scroll-left {
    animation: scroll-left-ani 20s linear infinite;
}

@keyframes scroll-left-ani {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.scroll-right {
    animation: scroll-right-ani 25s linear infinite;
}

@keyframes scroll-right-ani {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

.marquee-track:hover {
    animation-play-state: paused;
}