/* ===========================
   Job Category Section
=========================== */

.job-category{
    width:100%;
    padding:70px 5%;
    background:#f8fafc;
}

.section-title{
    text-align:center;
    font-size:34px;
    font-weight:700;
    color:#1e293b;
    margin-bottom:45px;
    position:relative;
}

.section-title::after{
    content:'';
    width:80px;
    height:4px;
    background:#2563eb;
    display:block;
    margin:15px auto 0;
    border-radius:20px;
}

/* ===========================
   Grid
=========================== */

.category-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:25px;
}

/* ===========================
   Card
=========================== */

.job-btn{
    background:#fff;
    border-radius:16px;
    padding:30px 15px;
    text-align:center;
    text-decoration:none;
    border:1px solid #e5e7eb;
    transition:.35s;
    box-shadow:0 5px 20px rgba(0,0,0,.06);
    position:relative;
    overflow:hidden;
}

.job-btn:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(37,99,235,.20);
    border-color:#2563eb;
}

/* Blue Top Border */

.job-btn::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:#2563eb;
    transform:scaleX(0);
    transition:.35s;
}

.job-btn:hover::before{
    transform:scaleX(1);
}

/* ===========================
   Icon
=========================== */

.job-btn .icon{
    width:75px;
    height:75px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    background:#eff6ff;
    border-radius:50%;
    font-size:34px;
    transition:.35s;
}

.job-btn:hover .icon{
    transform:rotate(10deg) scale(1.12);
    background:#2563eb;
    color:#fff;
}

/* ===========================
   Title
=========================== */

.job-btn h3{
    margin-top:18px;
    font-size:19px;
    font-weight:600;
    color:#1e293b;
    transition:.3s;
}

.job-btn:hover h3{
    color:#2563eb;
}

/* ===========================
   Mobile
=========================== */

@media(max-width:992px){

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

}

@media(max-width:768px){

.job-category{
padding:50px 20px;
}

.section-title{
font-size:28px;
}

.category-grid{
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.job-btn{
padding:25px 12px;
}

.job-btn .icon{
width:65px;
height:65px;
font-size:28px;
}

.job-btn h3{
font-size:17px;
}

}

@media(max-width:480px){

.category-grid{
grid-template-columns:repeat(2,1fr);
gap:15px;
}

.job-btn{
padding:20px 10px;
}

.job-btn .icon{
width:58px;
height:58px;
font-size:24px;
}

.job-btn h3{
font-size:15px;
}

}