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

.services{

    padding:var(--space-section) 0;

    background:var(--color-white);

}

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

.services .section-header{

    width:100%;

    max-width:760px;

    margin-left:auto;

    margin-right:auto;

    margin-bottom:var(--space-3xl);

    text-align:center !important;

}

.services .section-subtitle{

    display:block;

    margin-bottom:22px;

    font-family:var(--font-body);

    font-size:.80rem;

    font-weight:500;

    letter-spacing:.35em;

    text-transform:uppercase;

    color:var(--color-gold);

}

.services .section-title{

    font-family:var(--font-title);

    font-size:clamp(2.8rem,5vw,4.8rem);

    font-weight:400;

    line-height:1.15;

    color:var(--color-black);

}

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

.service{

    display:grid;

   	grid-template-columns:120px minmax(0, 1fr);

	gap:80px;

    align-items:start;

    max-width:1100px;

    margin:0 auto;

    padding:70px 0;

	border-top:

	1px solid rgba(0,0,0,.06);

}

.service:last-child{

border-bottom:

1px solid rgba(0,0,0,.06);

}

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

.service-number{

    font-family:var(--font-title);

    font-size:clamp(3rem,6vw,5rem);

    line-height:1;

    color:var(--color-gold);

    opacity:.28;

}

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

.service-title{

    margin-bottom:22px;

    font-family:var(--font-title);

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

    font-weight:400;

    line-height:1.1;

    color:var(--color-black);

}

.service-text{

    max-width:620px;

    font-family:var(--font-body);

    font-size:1.18rem;

    line-height:1.9;

    color:var(--color-light);

}

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

.service{

    transition:

        transform var(--duration-normal) var(--ease-smooth);

}

.service-number{

    color:var(--color-light);

    opacity:.18;

}


.service-title{

    transition:

        color var(--duration-normal) var(--ease-smooth),

        transform var(--duration-normal) var(--ease-smooth);

}

.service:hover{

    transform:translateX(8px);

}

.service:hover .service-number{

    color:var(--color-gold);

    opacity:.65;

}

.service:hover .service-title{

    color:var(--color-gold);

}


/*==================================================
    TABLET
==================================================*/

@media (max-width:992px){

    .service{

        grid-template-columns:90px 1fr;

        gap:50px;

        padding:60px 0;

    }

}

/*==================================================
    MOBILE
==================================================*/

@media (max-width:768px){

    .service{

        grid-template-columns:1fr;

        gap:24px;

        padding:48px 0;

    }

    .service-number{

        font-size:2.6rem;

    }

    .service-title{

        font-size:2.1rem;

    }

    .service-text{

        max-width:100%;

        line-height:1.9;

    }
	
	

}