/* =====================================
   SKILLS SECTION
===================================== */

.skills-section{

    padding:60px 0;

}

/* Grid */

.skills-grid{

    display:grid;

    grid-template-columns:
    repeat(5,1fr);

    gap:20px;

    align-items:center;
}

/* Card */

.skill-card{

    text-align:center;
}

/* Circle */

.skill-circle{

    width:180px;

    height:180px;

    position:relative;

    margin:0 auto 20px;
}

.skill-circle svg{

    width:100%;

    height:100%;

    transform:rotate(-90deg);
}

/* Background Ring */

.circle-bg{

    fill:none;

    stroke:#222;

    stroke-width:12;
}

/* Progress Ring */

.circle-progress{

    fill:none;

    stroke:#EF443B;

    stroke-width:12;

    stroke-linecap:round;
}

/* Counter */

.counter{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    font-weight:700;

    color:#ffffff;

    font-family:'Montserrat',sans-serif;
}

/* Skill Name */

.skill-card h3{

    font-size:18px;

    color:#ffffff;

    font-family:'Montserrat',sans-serif;

    margin-top:10px;
}

/* Laptop */

@media(max-width:1200px){

    .skills-grid{

        grid-template-columns:
        repeat(3,1fr);
    }

}

/* Tablet */

@media(max-width:768px){

    .skills-grid{

        grid-template-columns:
        repeat(2,1fr);

        gap:25px;
    }

}

/* Mobile */

@media(max-width:576px){

    .skills-grid{

        grid-template-columns:1fr;
    }

    .skill-circle{

        width:160px;
        height:160px;
    }

}