/* ======================================================
   NIMMEX SERVICES
====================================================== */

:root{

    --service-primary:#0A84FF;

    --service-bg:#050A12;

    --service-card:#0F1724;

    --service-border:rgba(255,255,255,.08);

}



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

.service-hero{

    padding:180px 0 120px;

    background:
        radial-gradient(circle at right,#0A84FF22,transparent 40%),
        #050A12;

}

.service-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:rgba(10,132,255,.15);

    color:#0A84FF;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:30px;

}

.service-title{

    color:#fff;

    font-size:64px;

    font-weight:800;

    line-height:1.05;

    margin-bottom:30px;

}

.service-description{

    color:#AFC4DD;

    font-size:20px;

    line-height:1.9;

    max-width:620px;

    margin-bottom:45px;

}

.service-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}



/* ======================================================
   SECTIONS
====================================================== */

section{

    position:relative;

}

section h2{

    color:#fff;

    font-size:42px;

    font-weight:800;

    margin-bottom:25px;

}

section p{

    color:#AFC4DD;

    font-size:18px;

    line-height:1.9;

}



/* ======================================================
   CARDS
====================================================== */

.service-card{

    background:#0F1724;

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

    border-radius:24px;

    padding:35px;

    height:100%;

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:#0A84FF;

    box-shadow:0 20px 50px rgba(10,132,255,.18);

}

.service-card h4{

    color:#fff;

    margin-bottom:25px;

    font-size:24px;

}

.service-card ul{

    margin:0;

    padding-left:18px;

}

.service-card li{

    color:#AFC4DD;

    margin-bottom:12px;

    line-height:1.8;

}



/* ======================================================
   BUTTONS
====================================================== */

.service-buttons .btn{

    padding:15px 32px;

    border-radius:14px;

    font-size:16px;

    font-weight:700;

}

.service-buttons .btn-primary{

    background:#0A84FF;

    border:none;

}

.service-buttons .btn-primary:hover{

    background:#1E90FF;

}

.service-buttons .btn-outline-light{

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

}



/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:992px){

    .service-title{

        font-size:46px;

    }

    .service-description{

        font-size:18px;

    }

    .service-hero{

        text-align:center;

        padding:150px 0 80px;

    }

}

@media(max-width:576px){

    .service-title{

        font-size:38px;

    }

}

/* ======================================================
   NIMMEX SERVICE CARDS PREMIUM
====================================================== */

.service-link{

    display:block;

    text-decoration:none;

}

.service-card{

    position:relative;

    overflow:hidden;

    background:linear-gradient(180deg,#101A2A 0%,#0B1421 100%);

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

    border-radius:24px;

    padding:40px;

    height:100%;

    transition:all .35s ease;

}

.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#0A84FF,#3EA0FF);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:#0A84FF;

    box-shadow:
        0 25px 60px rgba(10,132,255,.18),
        0 0 35px rgba(10,132,255,.10);

}

.service-card:hover::before{

    transform:scaleX(1);

}

.service-icon{

    width:84px;

    height:84px;

    margin:0 auto 28px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#0A84FF,#1F7BFF);

    color:#fff;

    font-size:34px;

    transition:.35s;

    box-shadow:0 12px 35px rgba(10,132,255,.35);

}

.service-card:hover .service-icon{

    transform:translateY(-6px) scale(1.08) rotate(4deg);

}

.service-card h3{

    color:#fff;

    font-size:30px;

    font-weight:700;

    text-align:center;

    margin-bottom:22px;

}

.service-card p{

    color:#AFC4DD;

    text-align:center;

    line-height:1.9;

    margin-bottom:28px;

}

.service-features{

    list-style:none;

    padding:0;

    margin:0;

}

.service-features li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    color:#D4E3F5;

    margin-bottom:12px;

    line-height:1.7;

}

.service-features i{

    color:#0A84FF;

    margin-top:4px;

    font-size:14px;

}