/* ==========================================================================
   PORTFOLIO SECTION
   ========================================================================== */

.portfolio-section {
  width: 100vw;
  min-height: 100vh;
  background-color: #000;
  color: white;
  padding: 80px 0;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
}

.portfolio-container {
  width: 100%;
  /* max-width: 1400px; */
  /* margin: 0 auto; */
  /* padding: 0 20px; */
}

/* Section Header */
.section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 80px;
}

.section-icon {
  color: #f6d764; /* Yellow accent */
}

.section-title {
  color: #f6d764;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin: 0;
}

/* Portfolio Grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 120px;
  overflow: hidden;
}

.portfolio-item {
  opacity: 0;
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  /* transition: transform 0.3s ease; */
}

.portfolio-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Hover effects */
.portfolio-item:hover {
  transform: translateY(-8px);
}

.portfolio-item:hover .portfolio-image img {
  transform: scale(1.05);
}

/* Clients Section */
.clients-section {
  margin-top: 80px;
}

.section-title-text {
  transform: translateY(-6px);
}

.align-end {
  justify-content: flex-end;
}
/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Large Desktop (1921px+) */
@media (min-width: 1921px) {
  .portfolio-container {
    max-width: 1600px;
  }

  .portfolio-grid {
    gap: 32px;
  }
}

/* Laptop (1367px - 1920px) */
@media (min-width: 1367px) and (max-width: 1920px) {
  .portfolio-container {
    /* width: 85%; */
  }

  .portfolio-grid {
    gap: 24px;
  }
}

/* Large Tablet (1025px - 1366px) */
@media (min-width: 1025px) and (max-width: 1366px) {
  .portfolio-container {
    /* width: 90%; */
  }

  .portfolio-grid {
    gap: 20px;
  }

  .section-header {
    margin-bottom: 60px;
  }
}

/* Small Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .portfolio-container {
    width: 90%;
    padding: 0 15px;
  }
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .section-header {
    margin-bottom: 50px;
  }

  .clients-section {
    margin-top: 60px;
  }
}

/* Large Mobile (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .portfolio-section {
    padding: 60px 0;
  }

  .portfolio-container {
    width: 95%;
    padding: 0 15px;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 80px;
  }

  .portfolio-item {
    aspect-ratio: 3/4;
  }

  .section-header {
    margin-bottom: 40px;
    gap: 12px;
  }
}

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
  .portfolio-section {
    padding: 50px 0;
  }

  .portfolio-container {
    width: 85%;
    padding: 0 10px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 20px;
  }

  .portfolio-item {
    aspect-ratio: 4/3;
  }

  .section-header {
    margin-bottom: 30px;
    gap: 10px;
  }

  .section-title {
    font-size: 1.8rem;
  }

  .section-title-text {
    transform: translateY(-3px);
  }

  .align-end {
    justify-content: center;
    margin-top: 0;
  }

  .portfolio-item-tablet-up {
    display: none;
  }
}

/* Hover effects only on devices that support hover */
@media (hover: hover) {
  .portfolio-item:hover {
    transform: translateY(-8px);
  }

  .portfolio-item:hover .portfolio-image img {
    transform: scale(1.05);
  }
}

.section-title span {
  display: flex;
  align-items: center;
  gap: 16px;
}

.section-title .down-arrow {
  /* Remove any existing transform or margin that might be offsetting it */
  transform: none;
  margin: 0;
  vertical-align: middle;
}