* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #f7f9fc, #e8f4f8);
  color: #2d3436;
  line-height: 1.6;
  min-height: 100vh; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px; }

header {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px 0; }
  header h1 {
    font-size: 3rem;
    color: #6c5ce7;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); }
  header p {
    font-size: 1.2rem;
    color: #a29bfe;
    font-weight: 300; }

.transform-section {
  margin-bottom: 50px; }
  .transform-section h2 {
    font-size: 2.2rem;
    color: #6c5ce7;
    text-align: center;
    margin-bottom: 30px;
    position: relative; }
    .transform-section h2::after {
      content: '';
      display: block;
      width: 100px;
      height: 4px;
      background: #fd79a8;
      margin: 10px auto;
      border-radius: 2px; }

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  padding: 20px 0; }

.card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  cursor: pointer;
  position: relative;
  height: 350px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px; }
  .card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out; }
  .card .card-content {
    padding: 20px; }
    .card .card-content h3 {
      font-size: 1.4rem;
      margin-bottom: 10px;
      color: #6c5ce7; }
    .card .card-content .transform-desc {
      font-size: 0.9rem;
      color: #666;
      font-family: 'Courier New', monospace;
      background: #f8f9fa;
      padding: 8px;
      border-radius: 5px;
      border-left: 3px solid #fd79a8; }
  .card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); }

.card-2d-1:hover {
  -webkit-transform: translate(50px, 20px) rotate(15deg);
  -moz-transform: translate(50px, 20px) rotate(15deg);
  -ms-transform: translate(50px, 20px) rotate(15deg);
  -o-transform: translate(50px, 20px) rotate(15deg);
  transform: translate(50px, 20px) rotate(15deg); }
  .card-2d-1:hover img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }

.card-2d-2:hover {
  -webkit-transform: scale(1.2) skew(10deg, 5deg);
  -moz-transform: scale(1.2) skew(10deg, 5deg);
  -ms-transform: scale(1.2) skew(10deg, 5deg);
  -o-transform: scale(1.2) skew(10deg, 5deg);
  transform: scale(1.2) skew(10deg, 5deg); }
  .card-2d-2:hover img {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg); }

.card-2d-3:hover {
  -webkit-transform: translate(-20px, -10px) rotate(-5deg) scale(1.1);
  -moz-transform: translate(-20px, -10px) rotate(-5deg) scale(1.1);
  -ms-transform: translate(-20px, -10px) rotate(-5deg) scale(1.1);
  -o-transform: translate(-20px, -10px) rotate(-5deg) scale(1.1);
  transform: translate(-20px, -10px) rotate(-5deg) scale(1.1); }
  .card-2d-3:hover img {
    -webkit-transform: rotate(-10deg) scale(1.05);
    -moz-transform: rotate(-10deg) scale(1.05);
    -ms-transform: rotate(-10deg) scale(1.05);
    -o-transform: rotate(-10deg) scale(1.05);
    transform: rotate(-10deg) scale(1.05); }

.card-3d-1 {
  -webkit-transform: preserve-3d;
  -moz-transform: preserve-3d;
  -ms-transform: preserve-3d;
  -o-transform: preserve-3d;
  transform: preserve-3d; }
  .card-3d-1:hover {
    -webkit-transform: rotateX(45deg) translateZ(20px);
    -moz-transform: rotateX(45deg) translateZ(20px);
    -ms-transform: rotateX(45deg) translateZ(20px);
    -o-transform: rotateX(45deg) translateZ(20px);
    transform: rotateX(45deg) translateZ(20px); }

.card-3d-2 {
  -webkit-transform: preserve-3d;
  -moz-transform: preserve-3d;
  -ms-transform: preserve-3d;
  -o-transform: preserve-3d;
  transform: preserve-3d; }
  .card-3d-2:hover {
    -webkit-transform: rotateY(45deg) translateZ(30px);
    -moz-transform: rotateY(45deg) translateZ(30px);
    -ms-transform: rotateY(45deg) translateZ(30px);
    -o-transform: rotateY(45deg) translateZ(30px);
    transform: rotateY(45deg) translateZ(30px); }

.card-3d-3 {
  -webkit-transform: preserve-3d;
  -moz-transform: preserve-3d;
  -ms-transform: preserve-3d;
  -o-transform: preserve-3d;
  transform: preserve-3d; }
  .card-3d-3:hover {
    -webkit-transform: rotateX(20deg) rotateY(30deg) rotateZ(15deg) translateZ(40px);
    -moz-transform: rotateX(20deg) rotateY(30deg) rotateZ(15deg) translateZ(40px);
    -ms-transform: rotateX(20deg) rotateY(30deg) rotateZ(15deg) translateZ(40px);
    -o-transform: rotateX(20deg) rotateY(30deg) rotateZ(15deg) translateZ(40px);
    transform: rotateX(20deg) rotateY(30deg) rotateZ(15deg) translateZ(40px); }

footer {
  text-align: center;
  padding: 30px 0;
  margin-top: 20px;
  border-top: 2px solid #a29bfe;
  color: #a29bfe;
  font-weight: 300; }

@media (max-width: 768px) {
  .container {
    padding: 10px; }

  header h1 {
    font-size: 2rem; }

  .transform-section h2 {
    font-size: 1.8rem; }

  .card-container {
    grid-template-columns: 1fr; }

  .card {
    height: auto; } }