/*====================================================
SERVICES SECTION
====================================================*/

.services{

    padding:120px 0;

    background:#ffffff;

    position:relative;

    overflow:hidden;

}

.services::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-180px;

    right:-180px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(37,99,235,.08),
    transparent 70%);

}

.services::after{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    left:-150px;

    bottom:-150px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(124,58,237,.08),
    transparent 70%);

}

.services-container{

    width:min(92%,1320px);

    margin:auto;

    position:relative;

    z-index:2;

}

/*=====================================
SECTION HEADING
=====================================*/

.section-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 60px;

}

.section-heading .section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 18px;

    border-radius:40px;

    background:#eef4ff;

    border:1px solid #dbeafe;

    color:#2563eb;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:20px;

}

.section-heading h2{

    font-size:58px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:18px;

    line-height:1.15;

}

.section-heading h2 span{

    background:linear-gradient(90deg,#2563eb,#7c3aed);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.section-heading p{

    color:#64748b;

    line-height:1.8;

    font-size:18px;

}

/*=====================================
FILTER
=====================================*/

.service-filter{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:55px;

}

.service-filter button{

    border:none;

    background:#fff;

    border:1px solid #e5e7eb;

    padding:12px 22px;

    border-radius:50px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.35s;

}

.service-filter button:hover{

    color:#2563eb;

    border-color:#2563eb;

}

.service-filter button.active{

    background:linear-gradient(135deg,#2563eb,#7c3aed);

    color:#fff;

    border-color:transparent;

    box-shadow:0 15px 35px rgba(37,99,235,.25);

}

/*=====================================
GRID
=====================================*/

.services-grid{

    display:grid;

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

    gap:28px;

}

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

.service-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    border:1px solid #edf2f7;

    padding:30px;

    transition:.35s;

    overflow:hidden;

}

.service-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#2563eb,#7c3aed);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.service-card:hover::before{

    transform:scaleX(1);

}

.service-card:hover{

    transform:translateY(-10px);

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

}
/*====================================================
CARD TOP
====================================================*/

.service-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

/*====================================================
ICON
====================================================*/

.service-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    transition:.35s;

}

.service-card:hover .service-icon{

    transform:rotate(-8deg) scale(1.08);

}

/*====================================================
CATEGORY BADGE
====================================================*/

.service-badge{

    padding:8px 15px;

    border-radius:50px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.3px;

}

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

.service-card h3{

    font-size:24px;

    color:#0f172a;

    margin-bottom:15px;

    font-weight:700;

    line-height:1.3;

}

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

.service-card p{

    color:#64748b;

    font-size:15px;

    line-height:1.8;

    margin-bottom:25px;

}

/*====================================================
TAGS
====================================================*/

.service-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:28px;

}

.service-tags span{

    padding:7px 14px;

    border-radius:30px;

    background:#f8fafc;

    font-size:12px;

    font-weight:600;

    color:#64748b;

    transition:.35s;

}

.service-tags span:hover{

    background:#2563eb;

    color:#fff;

}

/*====================================================
FOOTER
====================================================*/

.service-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-top:1px solid #eef2f7;

    padding-top:20px;

}

.service-footer a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#2563eb;

    font-weight:700;

    transition:.35s;

}

.service-footer a i{

    transition:.35s;

}

.service-card:hover .service-footer a i{

    transform:translateX(8px);

}
/*====================================================
ICON COLORS
====================================================*/

.blue{

background:#eef4ff;
color:#2563eb;

}

.purple{

background:#f3e8ff;
color:#7c3aed;

}

.green{

background:#dcfce7;
color:#16a34a;

}

.orange{

background:#fff7ed;
color:#f59e0b;

}

.red{

background:#fee2e2;
color:#ef4444;

}

.pink{

background:#fce7f3;
color:#ec4899;

}

.cyan{

background:#ecfeff;
color:#0891b2;

}

.yellow{

background:#fef9c3;
color:#ca8a04;

}

/*====================================================
CATEGORY BADGES
====================================================*/

.development .service-badge{

background:#eef4ff;
color:#2563eb;

}

.marketing .service-badge{

background:#ffe4e6;
color:#e11d48;

}

.enterprise .service-badge{

background:#dcfce7;
color:#16a34a;

}

.training .service-badge{

background:#f3e8ff;
color:#7c3aed;

}

.ecommerce .service-badge{

background:#fff7ed;
color:#ea580c;

}
/*====================================================
PREMIUM GLOW
====================================================*/

.service-card::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
135deg,
rgba(37,99,235,.04),
transparent);

opacity:1;

transform:none;

transition:.35s;
pointer-events:none;

}

.service-card:hover::after{

opacity:1;

}
.hidden-card{

display:none;

}

/*=====================================
VIEW ALL BUTTON
=====================================*/

.service-btn{

display:flex;
justify-content:center;
margin-top:48px;

}

.service-btn #viewMore{

display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
min-width:205px;
padding:15px 25px;
border:0;
border-radius:999px;
background:linear-gradient(135deg,#2563eb,#7c3aed);
color:#fff;
font-family:inherit;
font-size:15px;
font-weight:700;
line-height:1;
cursor:pointer;
box-shadow:0 14px 28px rgba(37,99,235,.24);
transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;

}

.service-btn #viewMore i{

font-size:18px;
transition:transform .25s ease;

}

.service-btn #viewMore:hover{

transform:translateY(-3px);
filter:brightness(1.06);
box-shadow:0 18px 34px rgba(37,99,235,.34);

}

.service-btn #viewMore:hover i{

transform:translateX(4px);

}

.service-btn #viewMore:focus-visible{

outline:3px solid rgba(124,58,237,.35);
outline-offset:4px;

}

.service-btn #viewMore:active{

transform:translateY(-1px);

}