/* Logo background styles for skill tags */

/* Reset skill-tag display */
.skill-tag {
    position: relative;
}

/* Background logos using Font Awesome pseudo-elements */
.skill-tag[data-skill="python"]::before {
    content: "\f3e2";
    font-family: "Font Awesome 6 Brands";
    position: absolute;
    font-size: 6rem;
    opacity: 0.08;
    color: var(--accent-purple);
    right: 15px;
    bottom: -10px;
    z-index: 0;
    transition: all 0.4s ease;
}

.skill-tag[data-skill="cpp"]::before {
    content: "\f38e";
    font-family: "Font Awesome 6 Brands";
    position: absolute;
    font-size: 6rem;
    opacity: 0.08;
    color: var(--accent-purple);
    right: 15px;
    bottom: -10px;
    z-index: 0;
    transition: all 0.4s ease;
}

.skill-tag[data-skill="tensorflow"]::before {
    content: "\f5dc";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    font-size: 6rem;
    opacity: 0.08;
    color: var(--accent-purple);
    right: 15px;
    bottom: -10px;
    z-index: 0;
    font-weight: 900;
    transition: all 0.4s ease;
}

.skill-tag[data-skill="flask"]::before {
    content: "\f0c3";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    font-size: 6rem;
    opacity: 0.08;
    color: var(--accent-purple);
    right: 15px;
    bottom: -10px;
    z-index: 0;
    font-weight: 900;
    transition: all 0.4s ease;
}

.skill-tag[data-skill="mysql"]::before {
    content: "\f1c0";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    font-size: 6rem;
    opacity: 0.08;
    color: var(--accent-purple);
    right: 15px;
    bottom: -10px;
    z-index: 0;
    font-weight: 900;
    transition: all 0.4s ease;
}

.skill-tag[data-skill="postgresql"]::before {
    content: "\f233";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    font-size: 6rem;
    opacity: 0.08;
    color: var(--accent-purple);
    right: 15px;
    bottom: -10px;
    z-index: 0;
    font-weight: 900;
    transition: all 0.4s ease;
}

.skill-tag[data-skill="mongodb"]::before {
    content: "\f06c";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    font-size: 6rem;
    opacity: 0.08;
    color: var(--accent-purple);
    right: 15px;
    bottom: -10px;
    z-index: 0;
    font-weight: 900;
    transition: all 0.4s ease;
}

.skill-tag[data-skill="vscode"]::before {
    content: "\f121";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    font-size: 6rem;
    opacity: 0.08;
    color: var(--accent-purple);
    right: 15px;
    bottom: -10px;
    z-index: 0;
    font-weight: 900;
    transition: all 0.4s ease;
}

.skill-tag[data-skill="arduino"]::before {
    content: "\f2db";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    font-size: 6rem;
    opacity: 0.08;
    color: var(--accent-purple);
    right: 15px;
    bottom: -10px;
    z-index: 0;
    font-weight: 900;
    transition: all 0.4s ease;
}

.skill-tag[data-skill="postman"]::before {
    content: "\f1d8";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    font-size: 6rem;
    opacity: 0.08;
    color: var(--accent-purple);
    right: 15px;
    bottom: -10px;
    z-index: 0;
    font-weight: 900;
    transition: all 0.4s ease;
}

.skill-tag[data-skill="git"]::before {
    content: "\f1d3";
    font-family: "Font Awesome 6 Brands";
    position: absolute;
    font-size: 6rem;
    opacity: 0.08;
    color: var(--accent-purple);
    right: 15px;
    bottom: -10px;
    z-index: 0;
    transition: all 0.4s ease;
}

.skill-tag[data-skill="docker"]::before {
    content: "\f395";
    font-family: "Font Awesome 6 Brands";
    position: absolute;
    font-size: 6rem;
    opacity: 0.08;
    color: var(--accent-purple);
    right: 15px;
    bottom: -10px;
    z-index: 0;
    transition: all 0.4s ease;
}

/* Hover effect for background logos */
.skill-tag:hover::before {
    opacity: 0.15;
    transform: scale(1.1) rotate(-5deg);
    color: #fff;
}