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

/*---------- Section ----------*/

.services{}

/*---------- Container ----------*/

.services__container{}

/*---------- Header ----------*/

.services__header{
    max-width:700px;
    margin:0 auto var(--space-5);
    text-align:center;
}

.services__title{
    margin-bottom:1rem;
}

.services__description{
    color:var(--color-text-light);
    font-size:1.05rem;
    line-height:1.7;
}

/*---------- Grid ----------*/

.services__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2rem;
}

/*---------- Card ----------*/

.service{
    position:relative;
    overflow:hidden;
    min-height:380px;
    border-radius:22px;
    box-shadow:0 12px 40px rgba(0,0,0,.12);
    transition:
        transform .45s ease,
        box-shadow .45s ease;
    isolation:isolate;
    cursor:pointer;
}

.service:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 60px rgba(0,0,0,.18);
}

.service__image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .9s ease;
}

.service:hover .service__image{
    transform:scale(1.08);
}

/* Overlay */

.service__overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0) 0%,
            rgba(0,0,0,.05) 35%,
            rgba(0,0,0,.25) 60%,
            rgba(0,0,0,.78) 100%
        );
    transition:background .4s ease;
}

.service:hover .service__overlay{
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0) 0%,
            rgba(0,0,0,.08) 30%,
            rgba(0,0,0,.32) 58%,
            rgba(0,0,0,.86) 100%
        );
}

/*---------- Content ----------*/

.service__content{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    height:100%;
    padding:2rem;
}

/*---------- Title ----------*/

.service__title{
    position:relative;
    margin-bottom:1rem;

    color:#fff;
    font-size:1.8rem;
    font-weight:600;
    line-height:1.15;
    letter-spacing:.06em;
    text-transform:uppercase;

    text-shadow:
        0 3px 12px rgba(0,0,0,.45);
}

.service__title::after{
    content:"";
    display:block;

    width:56px;
    height:2px;

    margin-top:.8rem;

    background:rgba(255,255,255,.9);
    border-radius:999px;
}

/*---------- Description ----------*/

.service__description{
    max-width:90%;

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

    font-size:1rem;
    line-height:1.7;

    text-shadow:
        0 2px 8px rgba(0,0,0,.45);
}

/*---------- Responsive ----------*/

@media (max-width:992px){

    .services__grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:640px){

    .services__grid{
        grid-template-columns:1fr;
    }

    .service{
        min-height:340px;
    }

    .service__content{
        padding:1.5rem;
    }

    .service__title{
        font-size:1.5rem;
    }

    .service__description{
        max-width:100%;
        font-size:.95rem;
    }

}