/*==========================================
            ACHIEVEMENTS SECTION
==========================================*/

.achievements{
    min-height:100svh;

    display:flex;
    align-items:center;

    padding:45px 0;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fffaf4 100%
    );

    overflow:hidden;
}

.achievement-grid{

    display:grid;

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

    gap:14px;

    margin-top:24px;
}

/*================ CARD =================*/

.achievement-card{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:18px;

    padding:16px;

    box-shadow:0 10px 24px rgba(15,23,42,.08);

    transition:.35s ease;
}

.achievement-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 36px rgba(239,144,45,.16);
}

.achievement-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:#ef902d;

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;
}

.achievement-card:hover::before{

    transform:scaleX(1);
}

/*================ TOP =================*/

.achievement-top{

    position:relative;

    margin-bottom:12px;
}

.achievement-index{

    position:absolute;

    top:0;
    right:0;

    font-size:24px;

    font-weight:800;

    color:rgba(239,144,45,.15);
}

.achievement-icon{

    width:48px;

    aspect-ratio:1;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

    background:#fff7ef;

    transition:.3s;
}

.achievement-card:hover .achievement-icon{

    transform:translateY(-4px);
}

.achievement-icon i{

    font-size:20px;

    color:#ef902d;
}

/*================ NUMBER =================*/

.achievement-number{

    font-size:clamp(1.7rem,2.5vw,2rem);

    font-weight:800;

    line-height:1;

    color:#111827;

    margin-bottom:6px;

    transition:.3s;
}

.achievement-card:hover .achievement-number{

    color:#ef902d;
}

/*================ TITLE =================*/

.achievement-title{

    font-size:clamp(1rem,1.2vw,1.1rem);

    font-weight:700;

    color:#111827;

    margin-bottom:8px;
}

/*================ LINE =================*/

.achievement-line{

    width:34px;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #ef902d,
        #ffb04a
    );

    margin-bottom:10px;
}

/*================ DESCRIPTION =================*/

.achievement-desc{

    font-size:13px;

    line-height:1.5;

    color:#6b7280;
}

/*==========================================
                LAPTOP
==========================================*/

@media(max-width:1200px){

    .achievements{

        min-height:auto;

        padding:45px 0;
    }

    .achievement-grid{

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

        gap:16px;
    }
}

/*==========================================
                TABLET
==========================================*/

@media(max-width:991px){

    .achievements{

        min-height:auto;

        padding:40px 0;
    }

    .achievement-grid{

        display:flex;

        overflow-x:auto;

        gap:14px;

        scroll-snap-type:x mandatory;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;

        padding:5px 5px 12px;
    }

    .achievement-grid::-webkit-scrollbar{

        display:none;
    }

    .achievement-card{

        flex:0 0 82%;

        min-width:260px;

        max-width:280px;

        scroll-snap-align:center;
    }
}

/*==========================================
                MOBILE
==========================================*/

@media(max-width:576px){

    .achievements{

        padding:30px 0;
    }

    .achievement-card{

        flex:0 0 88%;

        min-width:240px;

        padding:16px;
    }

    .achievement-icon{

        width:44px;
    }

    .achievement-icon i{

        font-size:18px;
    }

    .achievement-index{

        font-size:22px;
    }

    .achievement-number{

        font-size:1.8rem;
    }

    .achievement-title{

        font-size:16px;
    }

    .achievement-desc{

        font-size:12px;

        line-height:1.5;
    }
}

/*==========================================
            SMALL MOBILE
==========================================*/

@media(max-width:400px){

    .achievement-card{

        flex:0 0 92%;

        min-width:220px;
    }
}