/* =====================================================
   SERVICES HERO
===================================================== */

.services-hero{

    padding:170px 0 90px;

}

.services-heading{

    max-width:900px;

    margin:0 auto;

    text-align:center;

}

.services-heading h1{

    font-size:64px;

    line-height:1.15;

    margin:25px 0;

    color:var(--white);

}

.services-heading p{

    max-width:760px;

    margin:0 auto;

    font-size:18px;

    line-height:1.9;

    color:var(--text);

}


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

.services-section{

    padding:20px 0 120px;

}

.services-grid{

    display:grid;

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

    gap:28px;

}

.service-card ul{

    list-style:none;

    margin:28px 0;

    padding:0;

}

.service-card ul li{

    position:relative;

    padding-left:24px;

    margin-bottom:12px;

    color:#d6d6d6;

    font-size:15px;

}

.service-card ul li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#0D85EB;

    font-weight:700;

}

.service-card a{

    display:inline-block;

    margin-top:12px;

    color:#0D85EB;

    font-weight:600;

    transition:.3s;

}

.service-card a:hover{

    transform:translateX(6px);

}

.graphic-icon::before{
    content:"🎨";
}

.uiux-icon::before{
    content:"🎯";
}

.web-icon::before{
    content:"💻";
}

.ai-icon::before{
    content:"🤖";
}

.cloud-icon::before{
    content:"☁️";
}

.security-icon::before{
    content:"🛡️";
}

.marketing-icon::before{
    content:"📈";
}

.business-icon::before{
    content:"💼";
}