@keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .hidden-section {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.6s ease, transform 0.6s ease;
 }

 .show-section {
   opacity: 1;
   transform: translateY(0);
   animation: fadeInUp 0.8s ease forwards;
 }

 .tech-card {

   opacity: 0;

   transform: translateY(40px) scale(.9);

 }

 .tech-card.show {

   opacity: 1;

   transform: translateY(0) scale(1);

 }

 .tech-card:hover .tech-icon {

   transform: rotate(-10deg) scale(1.15);

 }

 .tech-icon {

   transition: transform .35s;

 }

 .project-card{

    opacity:0;

    transform:translateY(60px) scale(.92);

}

.project-card.show{

    opacity:1;

    transform:translateY(0) scale(1);

}

.project-tag{

    opacity:0;

    transform:translateY(12px);

    transition:.35s;

}

.project-tag.show{

    opacity:1;

    transform:translateY(0);

}

.contact-card{

    opacity:0;

    transform:translateY(45px);

}

.contact-card.show{

    opacity:1;

    transform:translateY(0);

}

.contact-circle{

    transition:
        transform .3s,
        box-shadow .3s,
        background-color .3s;

}

.contact-icon{

    transition:transform .3s;

}

.contact-card:hover .contact-circle{

    transform:translateY(-8px) scale(1.08);

    box-shadow:0 0 30px rgba(255,255,255,.12);

    background:#1e293b;

}

.contact-card:hover .contact-icon{

    transform:rotate(-12deg) scale(1.12);

}

.contact-card:hover .contact-text{

    color:white;

}