html {
    scroll-behavior: smooth;
}

#skills {
    background-color: #1a1a1a; 
}

.glass-card {
    background: rgba(255, 255, 255, 0.05); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    color: white;
    transition: all 0.4s ease;
    backdrop-filter: blur(5px); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.glass-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.1);
}

.glass-card i {
    margin-bottom: 15px;
    transition: all 0.4s ease;
}

.tech-php:hover {
    border-color: #777BB4;
    box-shadow: 0 10px 30px rgba(119, 123, 180, 0.3);
}
.tech-php:hover i { color: #777BB4; }

.tech-cpp:hover {
    border-color: #00599C;
    box-shadow: 0 10px 30px rgba(0, 89, 156, 0.3);
}
.tech-cpp:hover i { color: #00599C; }

.tech-lua:hover {
    border-color: #000080;
    box-shadow: 0 10px 30px rgba(0, 0, 128, 0.3);
}
.tech-lua:hover i { color: #8181f7; } 

.tech-sql:hover {
    border-color: #F29111;
    box-shadow: 0 10px 30px rgba(242, 145, 17, 0.3);
}
.tech-sql:hover i { color: #F29111; }

.tech-csharp:hover {
    border-color: #239120; 
    box-shadow: 0 10px 30px rgba(104, 33, 122, 0.3);
}
.tech-csharp:hover i { color: #68217A; }

.tech-java:hover {
    border-color: #5382a1;
    box-shadow: 0 10px 30px rgba(224, 31, 36, 0.3);
}
.tech-java:hover i { color: #e01f24; }