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

.services{

    display:flex;

    flex-direction:column;

    gap:8px;

    max-width:1080px;

    margin:0 auto;

}

/*
==================================================
ITEM
==================================================
*/

.service-item{

    display:block;

    width:100%;

    background:#ffffff;

    border:2px solid #0F4E82;

    border-radius:20px;

    overflow:hidden;

    color:#0F4879;

    text-decoration:none;
	box-shadow: 0px 0px 20px 0px #ffffff;
	transition: 0.3s ease-in;

}
.service-item:hover{
	box-shadow: 0px 0px 10px 0px #0f4879;
}
.service-item~.service-item{
	margin-top: 14px
}

/*
==================================================
HEAD
==================================================
*/

.service-item__head{

    width:100%;

    min-height:103px;

    display:grid;

    grid-template-columns:1fr 110px;

    padding:0;

    border:0;

    background:transparent;

    color:inherit;

    font:inherit;

    text-align:left;

    cursor:pointer;

    text-decoration:none;
	border-radius: 0;

}
.service-item__head:hover{
	background-color: #ffffff;
}


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

.service-item__title{

    display:flex;

    align-items:center;

    padding:0 28px;

    color:#0F4879;

    font-size:32px;

    font-weight:700;

    line-height:1.25;

    text-transform:uppercase;

    letter-spacing:.02em;

}

/*
==================================================
TOGGLE
==================================================
*/

.service-item__toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0F4879;

    color:#ffffff;

    transition:background .25s ease;

}

.service-item__arrow{

    display:block;

    color:#ffffff;

    font-size:28px;

    line-height:1;

    transition:transform .25s ease;

}

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

.service-item--link:hover{

    border-color:#1D7ED0;

}

.service-item--link:hover .service-item__toggle{

    background:#1D7ED0;

}

.service-item--link:hover .service-item__arrow{

    transform:translateX(8px);

}

/*
==================================================
ACCORDION
==================================================
*/

.service-item--accordion:hover .service-item__toggle{

    background:#1D7ED0;

}

.service-item--accordion:hover .service-item__arrow,
.service-item--accordion.is-open .service-item__arrow{

    transform:rotate(90deg);

}

.service-item__content{

    max-height:0;

    overflow:hidden;

    transition:max-height .3s ease;

}

.service-item__content-inner{

    padding:0 28px 26px;

    color:#0F4E82;

    font-size:17px;

    line-height:1.5;

}

.service-item__content-inner p{

    margin:0 0 14px;

}

.service-item__content-inner p:last-child{

    margin-bottom:0;

}

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

@media(max-width:768px){

    .service-item__head{

        grid-template-columns:1fr 72px;

        min-height:58px;

    }

    .service-item__title{

        padding:0 18px;

        font-size:15px;

    }

    .service-item__arrow{

        font-size:24px;

    }

    .service-item__content-inner{

        padding:0 18px 22px;

        font-size:16px;

    }

}