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

.services{

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

    background:var(--color-primary);

    position:relative;

    overflow:hidden;

}

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

.services__header{

    max-width:760px;

    margin:0 auto var(--space-64);

    text-align:center;

}

.services__subtitle{

    display:inline-block;

    margin-bottom:var(--space-16);

    color:var(--color-secondary);

    font-size:var(--font-size-xl);

    font-weight:var(--font-weight-semibold);

    letter-spacing:1px;

    text-transform:uppercase;

}

.services__title{

    margin-bottom:var(--space-24);

    color:var(--color-white);

}

.services__description{

    max-width:620px;

    margin:0 auto;

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

    line-height:1.8;

}

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

.services__grid{

    display:grid;

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

    gap:var(--space-32);

}

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

.services__card{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:var(--color-white);

    border-radius:var(--radius-xl);

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

    box-shadow:0 18px 45px rgba(0,0,0,.16);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);

}

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

.services__image{

    width:100%;

    aspect-ratio:16 / 10;

    overflow:hidden;

    background:var(--color-light);

}

.services__image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .6s ease;

}

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

.services__content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:var(--space-32);

}

/*=========================================
ICON
=========================================*/

.services__icon{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:var(--space-24);

    border-radius:50%;

    background:rgba(246,163,50,.12);

    color:var(--color-secondary);

    font-size:1.5rem;

    transition:
        background var(--transition-normal),
        color var(--transition-normal),
        transform var(--transition-normal);

}

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

.services__heading{

    margin-bottom:var(--space-16);

    color:rgb(33, 37, 41);

    font-size:var(--font-size-xl);

    font-weight:var(--font-weight-bold);

    line-height:1.3;

}

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

.services__text{

    flex:1;

    margin-bottom:var(--space-32);

    color:var(--color-text);

    line-height:1.8;

}

/*=========================================
BUTTON
=========================================*/

.services__content .btn{

    align-self:flex-start;

}

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

.services__card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.22);

}

.services__card:hover .services__image img{

    transform:scale(1.08);

}

.services__card:hover .services__icon{

    background:var(--color-secondary);

    color:var(--color-white);

    transform:rotate(-8deg);

}

/*=========================================
FOOTER
=========================================*/

.services__footer{

    display:flex;

    justify-content:center;

    margin-top:var(--space-64);

}

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

@media (max-width:1200px){

    .services__grid{

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

    }

}

@media (max-width:768px){

    .services{

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

    }

    .services__header{

        margin-bottom:var(--space-48);

    }

    .services__grid{

        gap:var(--space-24);

    }

    .services__content{

        padding:var(--space-24);

    }

    .services__icon{

        width:56px;

        height:56px;

        font-size:1.3rem;

    }

}

@media (max-width:576px){

    .services__grid{

        grid-template-columns:1fr;

    }

    .services__title{

        max-width:100%;

    }

    .services__description{

        max-width:100%;

    }

    .services__content .btn{

        width:100%;

        justify-content:center;

    }

    .services__footer .btn{

        width:100%;

        justify-content:center;

    }

}

/*=========================================
ACCESSIBILITY
=========================================*/

.services__card:focus-within{

    outline:2px solid var(--color-secondary);

    outline-offset:4px;

}

/*=========================================
ANIMATIONS
=========================================*/

.services__card{

    will-change:transform;

}

.services__image img{

    will-change:transform;

}

.services__card{

    overflow:hidden;

}

.services__content{

    border-top:1px solid rgba(0,0,0,.05);

}