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

.services{

    position:relative;

    padding:45px 0 35px;

    overflow:hidden;

}

.services-container{

    width:min(1400px,90%);

    margin:auto;

}

/* ==========================
        HEADER
========================== */

.services-header{

    text-align:center;

    max-width:760px;

    margin:0 auto 35px;

}

.services-header h2{

    font-size:58px;

    font-family:var(--heading);

    margin:25px 0;

    line-height:1.15;

}

.services-header h2 span{

    background:linear-gradient(90deg,var(--primary),var(--secondary));

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.services-header p{

    color:var(--text);

    font-size:18px;

    line-height:1.9;

}

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

.services-grid{

    display:grid;

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

    gap:30px;

}

.service-card a{
    color: #ff9800;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.service-card a:hover{
    color: #FFC107;
}

.service-card a{
    color: #ff9800 !important;
}

.service-card a:visited{
    color: #ff9800 !important;
}

.service-card a:hover{
    color: #FFC107 !important;
}

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

.service-card{

    background: rgba(255,255,255,.05);

    backdrop-filter: blur(20px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:35px;

    transition:.35s ease;

    box-shadow:0 20px 40px rgba(0,0,0,.20);

    position:relative;

    overflow:hidden;

}

.service-card:hover{

    transform:translateY(-12px);

    border-color:rgba(255,176,0,.35);

    box-shadow:
        0 20px 40px rgba(255,140,0,.15),
        0 0 35px rgba(255,176,0,.25);

}

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

.service-icon{
    width:70px;
    height:70px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:18px;

    background:rgba(255,165,0,.08);
    border:1px solid rgba(255,165,0,.25);

    transition:.35s ease;
}

.service-icon i{
    font-size:30px;
    color:#FFB000;
    transition:.35s ease;
}

.service-card:hover .service-icon{
    background:#FFB000;
    transform:rotate(10deg) scale(1.08);
}

.service-card:hover .service-icon i{
    color:#111827;
}

/* ==========================
        TEXT
========================== */

.service-card h3{

    font-size:24px;

    margin-bottom:15px;

    font-family:var(--heading);

}

.service-card p{

    color:var(--text);

    line-height:1.8;

    margin-bottom:25px;

}

.service-card a{

    color:#FFB000;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.service-card a:hover{

    color:#FFD54A;

}

.service-icon i{
    font-size:34px;
    color:#ffb000;
    transition:.3s ease;
}

.service-card:hover .service-icon i{
    transform:scale(1.15) rotate(-8deg);
}