/* ============================ About: Imgs ============================ */
/* 3D Triangle Rotation Container */
.about_content .imgs {
    position: relative;
    width: 400px;
    height: 400px;
    perspective: 1500px;
    perspective-origin: center center;
    transform-style: preserve-3d;
}

.about_content .imgs img {
    width: 180px;
    object-fit: cover;
    position: absolute;
    border-radius: 20px;
    transform-style: preserve-3d;
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
    transition: all 0.3s ease;
}

/* 3D Triangle Formation - Each image positioned in a triangular pattern */
.about_content .imgs .img1 {
    top: 50%;
    left: 50%;
    transform-origin: center center;
    animation: triangleRotate1 16s linear infinite;
}

.about_content .imgs .img2 {
    top: 50%;
    left: 50%;
    transform-origin: center center;
    animation: triangleRotate2 16s linear infinite;
}

.about_content .imgs .img3 {
    top: 50%;
    left: 50%;
    transform-origin: center center;
    animation: triangleRotate3 16s linear infinite;
}

.about_content .imgs .img4 {
    top: 50%;
    left: 50%;
    transform-origin: center center;
    animation: triangleRotate4 16s linear infinite;
}


/* 4 Images Rotation - All rotate 360deg with same pattern, starting at different angles */
@keyframes triangleRotate1 {
  0% {
    transform: translate(-50%, -50%)
      rotateY(0deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 10;
  }
  
  25% {
    transform: translate(-50%, -50%)
      rotateY(90deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 8;
  }
  
  50% {
    transform: translate(-50%, -50%)
      rotateY(180deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 5;
  }
  
  75% {
    transform: translate(-50%, -50%)
      rotateY(270deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 8;
  }
  
  100% {
    transform: translate(-50%, -50%)
      rotateY(360deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 10;
  }
}

@keyframes triangleRotate2 {
  0% {
    transform: translate(-50%, -50%)
      rotateY(90deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 8;
  }
  
  25% {
    transform: translate(-50%, -50%)
      rotateY(180deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 5;
  }
  
  50% {
    transform: translate(-50%, -50%)
      rotateY(270deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 8;
  }
  
  75% {
    transform: translate(-50%, -50%)
      rotateY(360deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 10;
  }
  
  100% {
    transform: translate(-50%, -50%)
      rotateY(450deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 8;
  }
}

@keyframes triangleRotate3 {
  0% {
    transform: translate(-50%, -50%)
      rotateY(180deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 5;
  }
  
  25% {
    transform: translate(-50%, -50%)
      rotateY(270deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 8;
  }
  
  50% {
    transform: translate(-50%, -50%)
      rotateY(360deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 10;
  }
  
  75% {
    transform: translate(-50%, -50%)
      rotateY(450deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 8;
  }
  
  100% {
    transform: translate(-50%, -50%)
      rotateY(540deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 5;
  }
}

@keyframes triangleRotate4 {
  0% {
    transform: translate(-50%, -50%)
      rotateY(270deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 8;
  }
  
  25% {
    transform: translate(-50%, -50%)
      rotateY(360deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 10;
  }
  
  50% {
    transform: translate(-50%, -50%)
      rotateY(450deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 8;
  }
  
  75% {
    transform: translate(-50%, -50%)
      rotateY(540deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 5;
  }
  
  100% {
    transform: translate(-50%, -50%)
      rotateY(630deg)
      translateZ(150px)
      rotateX(10deg);
    z-index: 8;
  }
}












/* ============================ About: Imgs ============================ */
/* 3D Triangle Rotation Container */
.about_content .imgs {
    position: relative;
    width: 400px;
    height: 400px;
    perspective: 1500px;
    perspective-origin: center center;
    transform-style: preserve-3d;
}

.about_content .imgs img {
    width: 180px;
    object-fit: cover;
    position: absolute;
    border-radius: 20px;
    transform-style: preserve-3d;
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
    transition: all 0.3s ease;
}

/* 3D Triangle Formation - Each image positioned in a triangular pattern */
.about_content .imgs .img1 {
    top: 50%;
    left: 50%;
    transform-origin: center center;
    animation: triangleRotate1 16s linear infinite;
}

.about_content .imgs .img2 {
    top: 50%;
    left: 50%;
    transform-origin: center center;
    animation: triangleRotate2 16s linear infinite;
}

.about_content .imgs .img3 {
    top: 50%;
    left: 50%;
    transform-origin: center center;
    animation: triangleRotate3 16s linear infinite;
}

.about_content .imgs .img4 {
    top: 50%;
    left: 50%;
    transform-origin: center center;
    animation: triangleRotate4 16s linear infinite;
}


/* 4 Images Rotation - All rotate 360deg with same depth and vertical position */
@keyframes triangleRotate1 {
  0% {
    transform: translate(-50%, -50%)
      rotateY(0deg)
      translateZ(200px);
    z-index: 10;
  }
  
  25% {
    transform: translate(-50%, -50%)
      rotateY(90deg)
      translateZ(200px);
    z-index: 8;
  }
  
  50% {
    transform: translate(-50%, -50%)
      rotateY(180deg)
      translateZ(200px);
    z-index: 5;
  }
  
  75% {
    transform: translate(-50%, -50%)
      rotateY(270deg)
      translateZ(200px);
    z-index: 8;
  }
  
  100% {
    transform: translate(-50%, -50%)
      rotateY(360deg)
      translateZ(200px);
    z-index: 10;
  }
}

@keyframes triangleRotate2 {
  0% {
    transform: translate(-50%, -50%)
      rotateY(90deg)
      translateZ(200px);
    z-index: 8;
  }
  
  25% {
    transform: translate(-50%, -50%)
      rotateY(180deg)
      translateZ(200px);
    z-index: 5;
  }
  
  50% {
    transform: translate(-50%, -50%)
      rotateY(270deg)
      translateZ(200px);
    z-index: 8;
  }
  
  75% {
    transform: translate(-50%, -50%)
      rotateY(360deg)
      translateZ(200px);
    z-index: 10;
  }
  
  100% {
    transform: translate(-50%, -50%)
      rotateY(450deg)
      translateZ(200px);
    z-index: 8;
  }
}

@keyframes triangleRotate3 {
  0% {
    transform: translate(-50%, -50%)
      rotateY(180deg)
      translateZ(200px);
    z-index: 5;
  }
  
  25% {
    transform: translate(-50%, -50%)
      rotateY(270deg)
      translateZ(200px);
    z-index: 8;
  }
  
  50% {
    transform: translate(-50%, -50%)
      rotateY(360deg)
      translateZ(200px);
    z-index: 10;
  }
  
  75% {
    transform: translate(-50%, -50%)
      rotateY(450deg)
      translateZ(200px);
    z-index: 8;
  }
  
  100% {
    transform: translate(-50%, -50%)
      rotateY(540deg)
      translateZ(200px);
    z-index: 5;
  }
}

@keyframes triangleRotate4 {
  0% {
    transform: translate(-50%, -50%)
      rotateY(270deg)
      translateZ(200px);
    z-index: 8;
  }
  
  25% {
    transform: translate(-50%, -50%)
      rotateY(360deg)
      translateZ(200px);
    z-index: 10;
  }
  
  50% {
    transform: translate(-50%, -50%)
      rotateY(450deg)
      translateZ(200px);
    z-index: 8;
  }
  
  75% {
    transform: translate(-50%, -50%)
      rotateY(540deg)
      translateZ(200px);
    z-index: 5;
  }
  
  100% {
    transform: translate(-50%, -50%)
      rotateY(630deg)
      translateZ(200px);
    z-index: 8;
  }
}




@media (max-width: 500px) {
  .about_content .imgs {
    width: 300px;
    height: 300px;
    perspective: 1000px;
    perspective-origin: center center;
    transform-style: preserve-3d;
  }

  .about_content .imgs img {
      width: 120px;
      object-fit: cover;
      position: absolute;
      border-radius: 10px;
      transform-style: preserve-3d;
      box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
      transition: all 0.3s ease;
  }

  /* 3D Triangle Formation - Each image positioned in a triangular pattern */
  .about_content .imgs .img1 {
      top: 50%;
      left: 50%;
      transform-origin: center center;
      animation: triangleRotate1 16s linear infinite;
  }

  .about_content .imgs .img2 {
      top: 50%;
      left: 50%;
      transform-origin: center center;
      animation: triangleRotate2 16s linear infinite;
  }

  .about_content .imgs .img3 {
      top: 50%;
      left: 50%;
      transform-origin: center center;
      animation: triangleRotate3 16s linear infinite;
  }

  .about_content .imgs .img4 {
      top: 50%;
      left: 50%;
      transform-origin: center center;
      animation: triangleRotate4 16s linear infinite;
  }


  /* 4 Images Rotation - All rotate 360deg with same depth and vertical position */
  @keyframes triangleRotate1 {
    0% {
      transform: translate(-50%, -50%)
        rotateY(0deg)
        translateZ(100px);
      z-index: 10;
    }
    
    25% {
      transform: translate(-50%, -50%)
        rotateY(90deg)
        translateZ(100px);
      z-index: 8;
    }
    
    50% {
      transform: translate(-50%, -50%)
        rotateY(180deg)
        translateZ(100px);
      z-index: 5;
    }
    
    75% {
      transform: translate(-50%, -50%)
        rotateY(270deg)
        translateZ(100px);
      z-index: 8;
    }
    
    100% {
      transform: translate(-50%, -50%)
        rotateY(360deg)
        translateZ(100px);
      z-index: 10;
    }
  }

  @keyframes triangleRotate2 {
    0% {
      transform: translate(-50%, -50%)
        rotateY(90deg)
        translateZ(100px);
      z-index: 8;
    }
    
    25% {
      transform: translate(-50%, -50%)
        rotateY(180deg)
        translateZ(100px);
      z-index: 5;
    }
    
    50% {
      transform: translate(-50%, -50%)
        rotateY(270deg)
        translateZ(100px);
      z-index: 8;
    }
    
    75% {
      transform: translate(-50%, -50%)
        rotateY(360deg)
        translateZ(100px);
      z-index: 10;
    }
    
    100% {
      transform: translate(-50%, -50%)
        rotateY(450deg)
        translateZ(100px);
      z-index: 8;
    }
  }

  @keyframes triangleRotate3 {
    0% {
      transform: translate(-50%, -50%)
        rotateY(180deg)
        translateZ(100px);
      z-index: 5;
    }
    
    25% {
      transform: translate(-50%, -50%)
        rotateY(270deg)
        translateZ(100px);
      z-index: 8;
    }
    
    50% {
      transform: translate(-50%, -50%)
        rotateY(360deg)
        translateZ(100px);
      z-index: 10;
    }
    
    75% {
      transform: translate(-50%, -50%)
        rotateY(450deg)
        translateZ(100px);
      z-index: 8;
    }
    
    100% {
      transform: translate(-50%, -50%)
        rotateY(540deg)
        translateZ(100px);
      z-index: 5;
    }
  }

  @keyframes triangleRotate4 {
    0% {
      transform: translate(-50%, -50%)
        rotateY(270deg)
        translateZ(100px);
      z-index: 8;
    }
    
    25% {
      transform: translate(-50%, -50%)
        rotateY(360deg)
        translateZ(100px);
      z-index: 10;
    }
    
    50% {
      transform: translate(-50%, -50%)
        rotateY(450deg)
        translateZ(100px);
      z-index: 8;
    }
    
    75% {
      transform: translate(-50%, -50%)
        rotateY(540deg)
        translateZ(100px);
      z-index: 5;
    }
    
    100% {
      transform: translate(-50%, -50%)
        rotateY(630deg)
        translateZ(100px);
      z-index: 8;
    }
  }
}