/*==================================================
    SERVICES.CSS
    Zen Spa Home
==================================================*/

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

.services{

    position:relative;

    background:#0b0b0b;

    overflow:hidden;

}

/*==============================================
    BACKGROUND
==============================================*/

.services::before{

    content:"";

    position:absolute;

    top:-250px;

    right:-250px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:radial-gradient(
        rgba(185,145,93,.10),
        transparent 70%
    );

    pointer-events:none;

}

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

.services-grid{

    display:grid;

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

    gap:32px;

}

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

.service-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:380px;

    padding:48px;

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

    border-radius:28px;

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

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    transition:
        transform .45s ease,
        border-color .45s ease,
        background .45s ease,
        box-shadow .45s ease;

    overflow:hidden;

}

/*==============================================
    HOVER LIGHT
==============================================*/

.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(185,145,93,.10),
        transparent 60%
    );

    opacity:0;

    transition:.45s;

}

.service-card:hover{

    transform:translateY(-12px);

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

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

    box-shadow:

        0 25px 60px rgba(0,0,0,.30),

        0 0 60px rgba(185,145,93,.08);

}

.service-card:hover::before{

    opacity:1;

}

/*==============================================
    NUMBER
==============================================*/

.service-number{

    margin-bottom:28px;

    font-size:4rem;

    font-weight:800;

    line-height:1;

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

    transition:.35s;

}

.service-card:hover .service-number{

    color:#b9915d;

}

/*==============================================
    TITLE
==============================================*/

.service-card h3{

    margin-bottom:22px;

    font-size:1.7rem;

    font-weight:600;

    line-height:1.3;

    transition:.35s;

}

.service-card:hover h3{

    transform:translateX(6px);

}

/*==============================================
    DESCRIPTION
==============================================*/

.service-card p{

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

    font-size:1rem;

    line-height:1.9;

}

/*==============================================
    DIVIDER
==============================================*/

.service-card::after{

    content:"";

    width:60px;

    height:2px;

    margin-top:36px;

    background:#b9915d;

    transition:.35s;

}

.service-card:hover::after{

    width:120px;

}

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

@media (max-width:1100px){

    .services-grid{

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

    }

}

@media (max-width:768px){

    .services-grid{

        grid-template-columns:1fr;

    }

    .service-card{

        min-height:auto;

        padding:36px;

    }

    .service-number{

        font-size:3rem;

    }

    .service-card h3{

        font-size:1.5rem;

    }

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

.service-card{

    position:relative;

    transform-style:preserve-3d;

    perspective:1200px;

    will-change:transform;

    transition:

        background .35s ease,

        border-color .35s ease;

}
/*==============================================
  SERVICE LINE
==============================================*/

.service-line{

    width:100%;

    height:1px;

    margin-top:2rem;

    background:var(--color-primary);

    transform:scaleX(0);

    transform-origin:left;

}

/*==============================================
  SERVICE ARROW
==============================================*/

.service-arrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    transition:color .3s ease;

}

/*==============================================
  NUMBER
==============================================*/

.service-number{

    transition:color .35s ease;

}

/*==============================================
  TITLE
==============================================*/

.service-card h3{

    will-change:transform;

}

/*==============================================
  DESCRIPTION
==============================================*/

.service-card p{

    will-change:transform;

}