.services{

    position:relative;

    padding:120px 20px;

    background:#070d15;

    overflow:hidden;

}

.services-container{

    max-width:1300px;

    margin:auto;

    display:grid;

    gap:70px;

    align-items:center;

}

@media(min-width:900px){

.services-container{

grid-template-columns:1fr 1fr;

}

}

.services-glow{

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    filter:blur(120px);

    opacity:.35;

}

.glow-left{

    background:#00a6ff;

    left:-150px;

    top:120px;

}

.glow-right{

    background:#ffc107;

    right:-150px;

    bottom:100px;

}

/******** IMAGE ********/

.image-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    backdrop-filter:blur(20px);

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

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

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

}

.image-card img{

    width:100%;

    display:block;

    transition:.8s;

}

.image-card:hover img{

    transform:scale(1.08);

}

.image-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:30px;

    background:linear-gradient(to top,#000c,transparent);

}

.image-overlay h3{

    color:white;

    font-size:2rem;

}

.image-overlay span{

    color:#ddd;

}

/******** TEXT ********/

.section-tag{

    color:#FFD54A;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:.8rem;

}

.services-content h2{

    margin:15px 0;

    font-size:clamp(2rem,5vw,3.4rem);

    color:white;

}

.services-content>p{

    color:#bfc7d1;

    line-height:1.8;

    margin-bottom:40px;

}

/******** SERVICES ********/

.service{

    position:relative;

    display:flex;

    gap:20px;

    align-items:flex-start;

    margin-bottom:18px;

    padding:24px;

    border-radius:22px;

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

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

    backdrop-filter:blur(20px);

    transition:.35s;

    overflow:hidden;

}

.service::before{

    content:"";

    position:absolute;

    left:-120px;

    top:0;

    width:80px;

    height:100%;

    background:linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.35),
    transparent);

    transform:skewX(-25deg);

    transition:1s;

}

.service:hover::before{

    left:120%;

}

.service:hover{

    transform:translateX(10px);

    border-color:#FFD54A;

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

}

.icon{

    min-width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:linear-gradient(135deg,#FFD54A,#ff9800);

    font-size:28px;

}

.service h3{

    color:white;

    margin-bottom:6px;

}

.service p{

    color:#c8d0d8;

}

/******** REVEAL ********/

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:1s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}