/*==================================================
  SERVICES
  Zen Spa Home
==================================================*/

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

.services{

    background:var(--color-surface);

}

.services .section-header{

    margin-bottom:90px;

}

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

.services-grid{

    display:grid;

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

    gap:2rem;

}

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

.service-card{

    position:relative;

    overflow:hidden;

    border-radius:32px;

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

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

    transition:

        transform .6s cubic-bezier(.22,.61,.36,1),

        border-color .4s ease,

        box-shadow .4s ease;

}

.service-card:hover{

    transform:translateY(-12px);

    border-color:rgba(185,145,93,.35);

    box-shadow:

        0 30px 70px rgba(0,0,0,.28);

}

/*==============================================
  IMAGE
==============================================*/

.service-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/11;

}

.service-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform 1.1s cubic-bezier(.22,.61,.36,1);

}

.service-card:hover .service-image img{

    transform:scale(1.08);

}

/*==============================================
  OVERLAY
==============================================*/

.service-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.45),

            transparent

        );

}

/*==============================================
  CONTENT
==============================================*/

.service-content{

    padding:2.5rem;

}

.service-number{

    display:inline-block;

    margin-bottom:1rem;

    color:var(--color-primary);

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.30em;

}

.service-content h3{

    margin-bottom:1rem;

}

.service-content p{

    margin-bottom:2rem;

}

/*==============================================
  LINK
==============================================*/

.service-link{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    color:var(--color-primary);

    font-size:.9rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    transition:gap .35s ease;

}

.service-link i{

    transition:transform .35s ease;

}

.service-card:hover .service-link{

    gap:1rem;

}

.service-card:hover .service-link i{

    transform:translateX(6px);

}

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

@media (max-width:992px){

    .services-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .service-content{

        padding:2rem;

    }

}