/* --- Cards --- */


.skills-heading {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    margin-top: 1rem;
    margin-bottom: 60px;

}

.skills-heading span.grad {
    background: var(--grad-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cards {
    position: relative;
    padding: 80px 20px;
    overflow: hidden;
}

.carousel-track-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

/* Base card style applied to all new skill cards */
.card-skill-new {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 30px;
    transition: all 0.3s ease;
    min-height: 250px;
    /* Ensures visual consistency */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    /* Subtle shadow */
}

.card-skill-new:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.skill-row {
    display: grid;
    /* Logo card (left) gets 1 fraction, Description card (right) gets 1.5 fractions */
    grid-template-columns: 1fr 1.5fr;
    gap: 30px;
    margin-bottom: 50px;
    /* Lazy loading styles removed here. Rows are visible by default. */
}

/* Logo Card (Left) Styling */
.logo-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
}

.logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.logo-item:hover {
    opacity: 1;
}

.logo-card i {
    font-size: 3rem;
    color: var(--primary-color);
    transition: transform 0.3s;
}

.logo-item:hover i {
    transform: scale(1.1);
}

.logo-card span {
    font-size: 0.9rem;
    color: var(--text-color);
    margin-top: 5px;
    display: block;
    opacity: 0.8;
}

/* Description Card (Right) Styling */
.desc-card h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--primary-color);
    transition: color 0.5s;
}

.desc-card p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-color);
    opacity: 0.9;
}

.logo-card i {
    font-size: 3rem;
    transition: transform 0.3s, color 0.3s;
}

.logo-item:hover i {
    transform: scale(1.1);
}


.cards::before {
    content: "+";
    font-size: 24px;
    color: #868686;
    position: absolute;
    top: 20px;
    left: 50px;
}

.cards::after {
    content: "+";
    font-size: 24px;
    color: #868686;
    position: absolute;
    bottom: 20px;
    right: 50px;
}


/* 🎨 Individual Icon Colors */
i.fa-node-js {
    color: #68A063
}

/* Node.js green */
i.fa-database {
    color: #f29111;
}

/* SQL/NoSQL orange */
i.fa-python {
    color: #3776AB;
}

/* Python blue */
i.fa-server {
    color: #6c757d;
}

/* Express gray */
i.fa-shield-halved {
    color: #4CAF50;
}

/* Security green */
i.fa-fire {
    color: #FF6F00;
}

/* Firebase orange */

i.fa-react {
    color: #61DBFB;
}

/* React blue */
i.fa-js {
    color: #f7df1e;
}

/* JavaScript yellow */
i.fa-html5 {
    color: #e34f26;
}

/* HTML orange */
i.fa-css3-alt {
    color: #264de4;
}

/* CSS blue */
i.fa-angular {
    color: #dd0031;
}

/* Angular red */
i.fa-vuejs {
    color: #41b883;
}

/* Vue green */

i.fa-git-alt {
    color: #f05033;
}

/* Git orange */
i.fa-docker {
    color: #0db7ed;
}

/* Docker blue */
i.fa-aws {
    color: #FF9900;
}

/* AWS orange */
i.fa-sitemap {
    color: #5a5a5a;
}

/* CI/CD gray */
i.fa-ubuntu {
    color: rgb(236, 83, 6);
}

/* Linux black */
i.fa-network-wired {
    color: #9c27b0;
}




/* --- Skills Section Responsive --- */

/* Medium devices: tablets, smaller desktops */
@media (max-width: 1100px) {
    .cards {
        padding: 60px 15px;
    }

    .carousel-track-wrapper {
        max-width: 95%;
    }

    .skill-row {
        gap: 20px;
    }

    .logo-card i {
        font-size: 2.5rem;
    }

    .desc-card h3 {
        font-size: 1.6rem;
    }

    .desc-card p {
        font-size: 1rem;
    }
}

/* Small devices: phones, <768px */
@media (max-width: 768px) {
    .skill-row {
        display: grid;
        grid-template-columns: 1fr; /* stack logo + description vertically */
        gap: 30px;
        text-align: center;
    }

    .logo-card {
        justify-content: center;
        gap: 15px;
    }

    .logo-item i {
        font-size: 2rem;
    }

    .logo-item span {
        font-size: 0.85rem;
    }

    .desc-card h3 {
        font-size: 1.5rem;
    }

    .desc-card p {
        font-size: 0.95rem;
        line-height: 1.5;
    }
}

/* Extra small devices: very small phones <480px */
@media (max-width: 480px) {
    .cards {
        padding: 40px 10px;
    }

    .logo-card i {
        font-size: 1.8rem;
    }

    .logo-item span {
        font-size: 0.8rem;
    }

    .desc-card h3 {
        font-size: 1.3rem;
    }

    .desc-card p {
        font-size: 0.9rem;
    }

    .skill-row {
        gap: 20px;
    }
}