/* 
   Skills Section
 */

#skills{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:100px 0;

}


.skills-card{

    width:min(1120px,92%);

    padding:58px 64px;

    border-radius:28px;

    background:

    rgba(255,255,255,.18);

    backdrop-filter:

    blur(20px);

    -webkit-backdrop-filter:

    blur(20px);

    box-shadow:

    0 15px 40px

    rgba(0,0,0,.08);

}


/* 
   Main Title */

.section-title{

    text-align:center;

    font-size:20pt;

    font-weight:700;

    color:rgba(6, 157, 227, 0.943);

    margin-bottom:30    px;

}


/* 
   Skill Group  */

.skill-group{

    display:flex;

    align-items:flex-start;

    justify-content:center;

    gap:40px;

    margin-bottom:40px;

}


.category-title{

    min-width:120px;

    font-size:1.3rem;

    font-weight:700;

    color:var(--text);

    margin-top:40px;

}


/* skill container   */

.skills-container{

    flex:1;

    display:grid;

    grid-template-columns:

    repeat(4, minmax(150px,1fr));

    gap:28px;

}


/* skill card  */

.skill{

    width:100%;

    min-height:132px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:14px;

    border-radius:20px;

    background:

    rgba(255,255,255,.15);

    backdrop-filter:

    blur(20px);

    -webkit-backdrop-filter:

    blur(20px);

    border:

    1px solid

    rgba(255,255,255,.2);

    box-shadow:

    0 8px 20px

    rgba(0,0,0,.05);

    transition:

    all .3s ease;

}


.skill:hover{

    transform:

    translateY(-8px)

    scale(1.05);

    box-shadow:

    0 15px 30px

    rgba(0,0,0,.12);

}


/* icon */

.skill i{

    font-size:3.1rem;

    background:

    linear-gradient(

        90deg,

        #06f7c7,

        #2196f3

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:

    transparent;

}




/* textt */

.skill span{

    font-size:1rem;

    font-weight:600;

    color:var(--text);

    text-align:center;

}



/* responsive */

@media(max-width:768px){

    .skills-card{

        padding:30px 20px;

    }

    .skills-container{

        grid-template-columns:

        repeat(2,minmax(120px,1fr));

        gap:18px;

    }


    .skill-group{

        flex-direction:column;

        gap:20px;

    }


    .category-title{

        min-width:auto;

        margin-top:0;

        font-size:1.2rem;

    }


    .skill{

        width:100%;

        min-height:112px;

    }


    .skill i{

        font-size:2.5rem;

    }


    .skill span{

        font-size:.75rem;

    }

}

@media(max-width:420px){

    .skills-container{

        grid-template-columns:1fr;

    }

}

.skill i{

    font-size:3.1rem;

    background:

    linear-gradient(

        90deg,

        #06f7c7,

        #2196f3

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:

    transparent;

    animation:

    bounce 2s ease-in-out infinite;

}

.skill:nth-child(4n+1) i{

    animation-delay:0s;

}

.skill:nth-child(4n+2) i{

    animation-delay:.18s;

}

.skill:nth-child(4n+3) i{

    animation-delay:.36s;

}

.skill:nth-child(4n+4) i{

    animation-delay:.54s;

}

@keyframes bounce{

    0%,100%{

        transform:

        translateY(0);

    }

    50%{

        transform:

        translateY(-8px);

    }

}

/* Engineering Skills */

.skill-list {

    list-style:none;

    padding:0;

    margin:0;

    display:grid;

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

    gap:14px;

}


.skill-list li {

    position:relative;

    padding:14px 18px 14px 42px;

    border-radius:14px;

    background:

    rgba(255,255,255,.12);

    backdrop-filter:

    blur(12px);

    -webkit-backdrop-filter:

    blur(12px);

    border:

    1px solid

    rgba(255,255,255,.18);

    color:var(--text);

    font-size:.95rem;

    font-weight:600;

    transition:.3s ease;

}


/* icon check */

.skill-list li::before {

    content:"✓";

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    color:#06f7c7;

    font-weight:700;

}


/* hover */

.skill-list li:hover {

    transform:translateY(-4px);

    background:

    rgba(255,255,255,.22);

    box-shadow:

    0 10px 25px

    rgba(0,0,0,.1);

}

/* tittle like  */
.skill-box h3 {

    text-align:center;

    font-size:20pt;

    font-weight:700;

    color:rgba(6,157,227,0.943);

    margin-top: 40px;;

    margin-bottom:40px;

}