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

.st-services{

    position:relative;

    padding:110px 6% 130px;

    background:#F7F3EE;

    overflow:hidden;

}

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

.st-services::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at 28% 22%,
    rgba(255,255,255,.82),
    transparent 40%),

    radial-gradient(circle at 75% 18%,
    rgba(224,122,99,.05),
    transparent 52%);

    pointer-events:none;

    z-index:0;

}

/* =====================================
   TOP WRAPPER
===================================== */

.st-services-wrapper{

    position:relative;

    z-index:2;

    max-width:1700px;

    margin:auto;

    display:grid;

    grid-template-columns:58% 42%;

    align-items:center;

    gap:0;

}

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

.st-services-header{

    position:relative;

    z-index:5;

    padding-right:20px;

}

.st-services-header span{

    display:flex;

    align-items:center;

    gap:24px;

    margin-bottom:34px;

    font-size:13px;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#C15B42;

    font-family:Manrope,sans-serif;

}

.st-services-header span::after{

    content:"";

    width:95px;

    height:1px;

    background:#C15B42;

}

.st-services-header h2{

    font-size:clamp(96px,7vw,148px);

    line-height:.84;

    letter-spacing:-2.5px;

    font-weight:600;

    color:#0A3D50;

    margin-bottom:26px;

}

.st-services-header h2 em{

    display:block;

    margin-top:12px;

    font-family:"Cormorant Garamond",serif;

    font-style:italic;

    font-weight:400;

    color:#E07A63;

    line-height:.90;

}

.st-services-header p{

    max-width:500px;

    font-size:22px;

    line-height:1.85;

    color:#5C6872;

}

/* =====================================
   HERO ART
===================================== */

.st-services-art{

    position:relative;

    min-height:560px;

    display:flex;

    justify-content:flex-end;

    align-items:flex-end;

    overflow:visible;

}

/* =====================================
   RETRO SCENE
===================================== */

.services-scene{

    width:150%;

    max-width:none;

    height:auto;

    display:block;

    transform:translate(220px,18px);

    filter:drop-shadow(0 22px 40px rgba(0,0,0,.08));

    transition:.45s ease;

}

.services-scene:hover{

    transform:translate(220px,8px) scale(1.02);

}

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

.services-divider{

    width:100%;

    height:1px;

    background:rgba(193,91,66,.14);

    margin:60px 0 70px;

}

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

.services-grid{

    max-width:1600px;

    margin:auto;

    display:grid;

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

}

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

.service-card{

    position:relative;

    padding:10px 38px 205px;

    min-height:540px;

    transition:.35s ease;

}

.service-card:hover{

    transform:translateY(-8px);

}

.service-card:not(:last-child){

    border-right:1px solid rgba(193,91,66,.12);

}

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

.service-number{

    font-family:"Cormorant Garamond",serif;

    font-size:100px;

    font-weight:700;

    color:#E07A63;

    line-height:.82;

    margin-bottom:18px;

}

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

.service-card h3{

    font-size:30px;

    line-height:1.15;

    color:#0A3D50;

    margin-bottom:18px;

}

/* =====================================
   TEXT
===================================== */

.service-card p{

    max-width:260px;

    font-size:19px;

    line-height:1.8;

    color:#5C6872;

    margin-bottom:38px;

}

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

.service-arrow{

    display:inline-block;

    margin-top:6px;

    font-size:34px;

    color:#E07A63;

    transition:.35s;

}

.service-card:hover .service-arrow{

    transform:translateX(8px);

}

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

.service-image{

    position:absolute;

    left:0;

    right:0;

    bottom:55px;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    pointer-events:none;

}

.service-image img{

    width:255px;

    max-width:100%;

    height:auto;

    display:block;

    filter:drop-shadow(0 18px 28px rgba(0,0,0,.16));

    transition:all .35s ease;

}

/* =====================================
   INDIVIDUAL IMAGE STYLES
===================================== */

/* 01 */

.service-card:nth-child(1) .service-image img{

    width:310px;

    transform:rotate(-8deg);

}

/* 02 */

.service-card:nth-child(2) .service-image img{

    width:270px;

    transform:rotate(0deg);

}

/* 03 */

.service-card:nth-child(3) .service-image img{

    width:295px;

    transform:rotate(-4deg);

}

/* 04 */

.service-card:nth-child(4) .service-image img{

    width:285px;

    transform:rotate(6deg);

}

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

.service-card:hover:nth-child(1) .service-image img{

    transform:translateY(-10px) rotate(-6deg);

}

.service-card:hover:nth-child(2) .service-image img{

    transform:translateY(-10px) scale(1.04);

}

.service-card:hover:nth-child(3) .service-image img{

    transform:translateY(-10px) rotate(-2deg);

}

.service-card:hover:nth-child(4) .service-image img{

    transform:translateY(-10px) rotate(8deg);

}