@keyframes pulse {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.icon {
    animation: pulse 2s ease-in-out infinite;
    max-width: 40%;
    height: auto;
    transition: max-width 0.3s ease;
    margin: -50px;
}

.tutorial-card {
    animation: slideInFromLeft 1s ease-out;
    width: 400px;
    height: 325px;
    background: rgb(255,209,220);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    z-index: 100;
    box-shadow: 0 0 40px rgba(148, 248, 248, 0.5), 
                0 0 60px rgba(148, 248, 248, 0.5),
                0 10px 40px rgba(148, 248, 248, 0.5);
}

.tutorial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 40px rgb(116, 255, 255), 
                0 0 60px rgb(116, 255, 255),
                0 10px 40px rgb(116, 255, 255);

    .icon {
        animation: none;
    }
}

.tutorial-card .service-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.tutorial-card .service-title {
    font-size: 1.8rem;
    font-weight: bolder;
    margin-top: 50px;
    margin-bottom: 1rem;
    color: #ffffff;
    text-shadow: 0 0 20px rgb(116, 255, 255);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.tutorial-card:hover .service-title {
    text-shadow: 0 0 20px rgb(255, 255, 255);
    font-weight: lighter;
}

.tutorial-card .service-description {
    color: white;
    font-weight: bolder;
    font-size: 1.1rem;
    line-height: 1.6;
    transition: color 0.25s ease, font-weight 0.25s ease;
    text-shadow: 0 0 20px rgb(116, 255, 255);
    white-space: nowrap;
}

.tutorial-card:hover .service-description {
    font-weight: lighter;
    text-shadow: 0 0 20px rgb(255, 255, 255);
}