/* 3D Hover Effects */

/* Service Items 3D Effect */
.service-item {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
}

.service-item:hover {
  transform: rotateY(10deg) rotateX(5deg) translateZ(20px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Project Items 3D Effect */
.project-item {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
}

.project-item:hover {
  transform: rotateY(-8deg) rotateX(3deg) translateZ(15px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

/* Blog Items 3D Effect */
.blog-post-item {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
}

.blog-post-item:hover {
  transform: rotateY(6deg) rotateX(-4deg) translateZ(12px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

/* Client Items 3D Effect */
.clients-item {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
}

.clients-item:hover {
  transform: rotateY(-5deg) rotateX(2deg) scale(1.05) translateZ(10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Timeline Items 3D Effect */
.timeline-item {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
}

.timeline-item:hover {
  transform: rotateY(4deg) translateZ(8px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Skills Items 3D Effect */
.skills-item {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
}

.skills-item:hover {
  transform: rotateX(5deg) translateZ(5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Icon Box 3D Effect */
.icon-box:hover {
  transform: rotateY(15deg) rotateX(10deg) translateZ(10px);
  box-shadow: 0 10px 20px rgba(255, 183, 0, 0.3);
}

/* Service Icon Box Enhanced */
.service-icon-box:hover {
  transform: rotateY(20deg) rotateX(15deg) translateZ(15px) scale(1.1);
  box-shadow: 0 15px 30px rgba(255, 183, 0, 0.4);
}

/* Mobile Touch Support */
@media (hover: none) and (pointer: coarse) {
  .service-item:active,
  .project-item:active,
  .blog-post-item:active,
  .clients-item:active {
    transform: scale(0.95);
  }
}