/*
==========================================================
Arian UI Kit
Services Page
Version : 1.0
Author  : Arian File
==========================================================
*/


/*==========================================================
Hero
==========================================================*/

.af-services-hero{
    padding:80px 0;
    overflow:hidden;
}


/*==========================================================
Columns
==========================================================*/

.af-services-hero .wp-block-columns{
    align-items:center;
    gap:5rem;
}


/*==========================================================
Content Column
==========================================================*/

.af-services-hero .wp-block-column:first-child{
    display:flex;
    flex-direction:column;
    justify-content:center;
}


/*==========================================================
Image Column
==========================================================*/

.af-services-hero .wp-block-column:last-child{
    display:flex;
    justify-content:center;
    align-items:center;
}


/*==========================================================
Badge
==========================================================*/

.af-services-hero .af-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:max-content;

    margin:0 0 1rem;

    padding:.55rem 1rem;

    background:var(--af-surface);

    color:var(--af-primary);

    border:1px solid var(--af-border);

    border-radius:var(--af-radius-pill);

    font-size:.9rem;

    font-weight:600;

    line-height:1;
}


/*==========================================================
Heading
==========================================================*/

.af-services-hero h1{

    margin-bottom:1.5rem;

    color:var(--af-heading);

    font-size:clamp(2.2rem,5vw,3.6rem);

    line-height:1.2;
}


/*==========================================================
Lead
==========================================================*/

.af-services-hero .af-lead{

    max-width:650px;

    margin-bottom:2rem;

    color:var(--af-text);

    font-size:1.08rem;

    line-height:2;
}


/*==========================================================
Buttons
==========================================================*/

.af-services-hero .wp-block-buttons{

    gap:1rem;

    margin-top:.5rem;

    flex-wrap:wrap;
}


/*==========================================================
Image
==========================================================*/

.af-services-hero .wp-block-image{

    margin:0;
}

.af-services-hero .wp-block-image img{

    display:block;

    width:100%;

    max-width:560px;

    height:auto;

    border-radius:var(--af-radius-lg);

    box-shadow:var(--af-shadow-lg);
}


/*==========================================================
Responsive
==========================================================*/

@media (max-width:992px){

    .af-services-hero{

        padding:70px 0;

    }

    .af-services-hero .wp-block-columns{

        gap:3rem;

    }

}


@media (max-width:767px){

    .af-services-hero{

        padding:60px 0;

    }

    .af-services-hero .wp-block-columns{

        gap:2.5rem;

    }

    .af-services-hero .wp-block-column{

        flex-basis:100% !important;

    }

    .af-services-hero .af-badge{

margin-bottom:1rem;

    }

    .af-services-hero h1{

        text-align:center;

        font-size:2rem;

    }

    .af-services-hero .af-lead{

        margin-inline:auto;

        text-align:center;

        font-size:1rem;

    }

    .af-services-hero .wp-block-buttons{

        justify-content:center;

    }

}
/*==========================================================
Services Grid
==========================================================*/

.af-services-grid{

    padding:100px 0;

}

.af-services-grid > h2{

    text-align:center;

    margin-bottom:1rem;

}

.af-services-grid > p{

    max-width:760px;

    margin:0 auto 4rem;

    text-align:center;

    color:var(--af-text-light);

    line-height:2;

}


/*==========================================================
Grid
==========================================================*/

.af-services-grid .wp-block-grid{

    gap:2rem;

}