/* Tech Stack Section */

.tech-stack-section {
     margin-bottom: 35px;
     overflow: hidden;
}

.tech-stack-title {
     margin-bottom: 20px;
}

.tech-stack-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
     gap: 20px;
}

.tech-item {
     position: relative;
     background: var(--eerie-black-2);
     padding: 20px;
     border-radius: var(--radius-md);
     border: 1px solid var(--jet);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 10px;
     transition: all var(--transition-1);
     cursor: pointer;
     flex-shrink: 0;
}

.tech-item:hover {
     border-color: var(--orange-yellow-crayola);
     transform: translateY(-5px);
     box-shadow: 0 8px 16px hsla(45, 100%, 72%, 0.2);
}

.tech-icon {
     font-size: 40px;
     color: var(--orange-yellow-crayola);
     transition: transform var(--transition-1);
}

.tech-icon-wrap {
     width: 48px;
     height: 48px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
}

.tech-icon-img {
     width: 42px;
     height: 42px;
     object-fit: contain;
}

.tech-item:hover .tech-icon {
     transform: scale(1.1);
}

.tech-name {
     color: var(--white-2);
     font-size: var(--fs-7);
     font-weight: var(--fw-400);
     text-align: center;
}

/* Responsive adjustments */
@media (min-width: 580px) and (max-width: 1023px) {
     .tech-stack-grid {
          grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
          gap: 25px;
     }

     .tech-item {
          padding: 25px;
     }

     .tech-icon {
          font-size: 48px;
     }
}

/* Desktop - Slider View */
@media (min-width: 1024px) {
     .tech-stack-grid {
          display: flex;
          flex-wrap: nowrap;
          gap: 25px;
          overflow-x: auto;
          scroll-behavior: smooth;
          scroll-snap-type: x mandatory;
          padding: 15px 0;
          margin: 0 -15px;
          padding: 25px 15px 35px;
          overscroll-behavior-inline: contain;
     }

     .tech-item {
          min-width: 120px;
          max-width: 120px;
          scroll-snap-align: center;
          padding: 25px;
     }

     .tech-icon {
          font-size: 48px;
     }

     /* Custom scrollbar for tech stack */
     .tech-stack-grid::-webkit-scrollbar {
          height: 6px;
     }

     .tech-stack-grid::-webkit-scrollbar-track {
          background: var(--eerie-black-1);
          border-radius: 6px;
          border: 1px solid var(--jet);
     }

     .tech-stack-grid::-webkit-scrollbar-thumb {
          background: var(--orange-yellow-crayola);
          border-radius: 6px;
          transition: background var(--transition-1);
     }

     .tech-stack-grid::-webkit-scrollbar-thumb:hover {
          background: var(--vegas-gold);
     }
}