.skills-container {
     perspective: 1000px;
 }

 /*
.skill-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transform-style: preserve-3d;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
} */

 .skill-title {
     position: relative;
     z-index: 2;
     text-align: center;
     padding: 1rem;
     transition: all 0.3s ease;
 }

 .skill-card {
     background-size: cover;
     background-position: center;
     min-height: 260px;
     position: relative;
     overflow: hidden;
 }

 .skill-card::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(8, 47, 73, 0.95) 0%, rgba(4, 12, 24, 0.95) 100%);
     transition: all 0.3s ease;
     z-index: 1;
     pointer-events: none;

     mask-image: radial-gradient(circle 80px at var(--x, 50%) var(--y, 50%),
             rgba(0, 0, 0, 0) 0%,
             rgba(0, 0, 0, 1) 80%);
     -webkit-mask-image: radial-gradient(circle 80px at var(--x, 50%) var(--y, 50%),
             rgba(0, 0, 0, 0) 0%,
             rgba(0, 0, 0, 1) 80%);
     mask-composite: exclude;
     -webkit-mask-composite: destination-out;
 }

 .skill-card:hover::before {
     background: rgba(17, 24, 39, 0.7);
     backdrop-filter: blur(2px);
 }

 .skill-icon {
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
     font-size: 1.5rem;
     color: rgba(103, 232, 249, 0.9);
     transition: all 0.3s ease;
     z-index: 2;
 }

 .skill-card:hover .skill-icon {
     transform: scale(1.2) rotate(5deg);
     color: #67e8f9;
 }

 .skill-border {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border: 2px solid transparent;
     border-radius: 1rem;
     background: linear-gradient(135deg, rgba(56, 189, 248, 0.5) 0%, rgba(99, 102, 241, 0.5) 100%) border-box;
     -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: destination-out;
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     pointer-events: none;
 }

 .skill-card:hover .skill-title {
     transform: translateY(-10px);
 }