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

.services-hero{

    position:relative;

    min-height:85vh;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #0D0A63,
    #1E8BFF);

}

.services-hero-overlay{

    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(95,213,208,.35),
    transparent 40%);

}

.min-vh-75{

    min-height:75vh;

}

.services-hero h1{

    font-size:56px;
    font-weight:700;
    line-height:1.15;

    color:#fff;

    margin:20px 0;

}

.services-hero h1 span{

    color:#5FD5D0;

}

.services-hero p{

    color:rgba(255,255,255,.85);

    font-size:18px;

    line-height:1.8;

    max-width:620px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:40px;

}

.services-hero-image{

    position:relative;

}

.services-hero-image img{

    width:100%;

    height:540px;

    object-fit:cover;

    border-radius:30px;

    box-shadow:
    0 30px 70px rgba(0,0,0,.25);

}

.hero-floating-card{

    position:absolute;

    bottom:30px;

    left:-35px;

    background:#fff;

    border-radius:20px;

    padding:20px;

    display:flex;

    gap:15px;

    width:290px;

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

}

.hero-floating-card i{

    width:55px;
    height:55px;

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

    background:#0D0A63;

    color:#fff;

    border-radius:16px;

    font-size:24px;

}

.hero-floating-card h5{

    margin:0;

    color:#24324B;

}

.hero-floating-card p{

    margin:5px 0 0;

    color:#64748B;

    font-size:13px;

}

@media(max-width:992px){

.hero-buttons{

flex-direction:column;

}

.services-hero{

padding:80px 0;

}

.services-hero h1{

font-size:42px;

}

.services-hero-image img{

height:420px;

margin-top:40px;

}

.hero-floating-card{

left:20px;

}

}

/*=========================================
    SERVICES NAVIGATION
=========================================*/

.services-nav-wrapper{

    position:sticky;

    top:95px;      /* Match your sticky header height */

    z-index:998;

    background:#fff;

    border-bottom:1px solid rgba(0,0,0,.05);

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

}

.services-nav{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    padding:18px 0;

    overflow-x:auto;

    scrollbar-width:none;

}

.services-nav::-webkit-scrollbar{

    display:none;

}

.service-nav-item{

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#64748B;

    background:#F8FAFC;

    padding:14px 22px;

    border-radius:50px;

    transition:.3s;

    white-space:nowrap;

    border:1px solid transparent;

}

.service-nav-item i{

    font-size:20px;

}

.service-nav-item:hover{

    color:#0D0A63;

    background:#EEF6FF;

    border-color:#1E8BFF;

}

.service-nav-item.active{

    background:#0D0A63;

    color:#fff;

    box-shadow:0 12px 30px rgba(13,10,99,.25);

}

@media(max-width:768px){

.services-nav{

justify-content:flex-start;

padding:15px 0;

}

.service-nav-item{

padding:12px 18px;

font-size:14px;

}

}

/*====================================
    SERVICES INTRO
====================================*/

.services-intro{

    padding:110px 0;

    background:#F8FAFC;

}

.intro-title{

    font-size:44px;

    font-weight:700;

    line-height:1.2;

    color:#24324B;

    margin:20px 0 30px;

}

.intro-text{

    color:#64748B;

    line-height:1.9;

    font-size:17px;

    margin-bottom:20px;

}

/* Cards */

.capability-card{

    background:#fff;

    border-radius:28px;

    padding:35px;

    height:100%;

    border:1px solid rgba(13,10,99,.05);

    transition:.35s;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

}

.capability-card:hover{

    transform:translateY(-8px);

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

}

.capability-icon{

    width:70px;

    height:70px;

    border-radius:20px;

    background:rgba(30,139,255,.10);

    color:#1E8BFF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin-bottom:25px;

}

.capability-card h4{

    color:#24324B;

    margin-bottom:15px;

    font-size:22px;

}

.capability-card p{

    color:#64748B;

    line-height:1.8;

    margin:0;

}

@media(max-width:992px){

.services-intro{

padding:80px 0;

}

.intro-title{

font-size:36px;

}

}

/*======================================
    SERVICE SHOWCASE
======================================*/

.service-showcase{

    padding:120px 0;

    background:#fff;

}

.service-image{

    position:relative;

}

.service-image img{

    width:100%;

    height:620px;

    object-fit:cover;

    border-radius:32px;

    box-shadow:
    0 30px 70px rgba(0,0,0,.12);

}

.service-number{

    position:absolute;

    top:30px;

    left:30px;

    width:90px;

    height:90px;

    border-radius:50%;

    background:#0D0A63;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    font-weight:700;

}

.service-title{

    font-size:44px;

    font-weight:700;

    color:#24324B;

    margin:20px 0;

    line-height:1.2;

}

.service-description{

    color:#64748B;

    font-size:17px;

    line-height:1.9;

    margin-bottom:18px;

}

.service-features{

    margin:35px 0;

    display:grid;

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

    gap:18px;

}

.feature{

    display:flex;

    align-items:center;

    gap:12px;

    color:#24324B;

    font-weight:500;

}

.feature i{

    color:#1E8BFF;

}

.technology-stack{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:40px;

}

.technology-stack span{

    background:#EEF6FF;

    color:#0D0A63;

    padding:10px 18px;

    border-radius:40px;

    font-weight:600;

    font-size:14px;

}

@media(max-width:992px){

.service-showcase{

padding:80px 0;

}

.service-image img{

height:420px;

}

.service-title{

font-size:36px;

}

.service-features{

grid-template-columns:1fr;

}

}

/*======================================
    ALTERNATE SERVICE LAYOUT
======================================*/

.service-showcase-alt{

    background:#F8FAFC;

}