/*-----------------------
---- Services Styles ----
-------------------------*/
#services{
    background-color: #fff; width:100%;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}
#services .container{ padding-top:7rem; padding-bottom:7rem;}
.index__services__title { display:flex; justify-content:center;}
/*#services h1 {
    margin-bottom: 30px;
}*/

.service-item{
    text-align:center;
    padding: 30px 10px 20px;
}

.service-item h3{
    margin-bottom:15px;
}

.service-icon{
    position:relative;
    display:block;
    text-align:center;
    width:150px;
    height:150px;
    margin:20px auto 50px;
    border-radius:50%;
    font-size:62px;
    line-height:150px;
    background:#334959;
    color:#fff;
    -webkit-transition:all 0.2s ease-out;
    transition:all 0.2s ease-out;
}

.service-icon:after {
    pointer-events:none;
    content:"";
    position:absolute;
    display:block;
    width:174px;
    height:174px;
    top:-12px;
    left:-12px;
    border:3px solid #334959;
    border-radius:50%;
    -webkit-transition:all 0.2s ease-out;
    transition:all 0.2s ease-out;
}
.service-icon [class*=fa]{ position:absolute; top:0; left:0;}

.no-csstransforms .service-icon:after{
	display:none;
}

.service-icon:focus,
.service-icon:active{
    color:#fff;
}

.service-icon [class*=fa]{
    -webkit-transform:scale(1);
    transform:rotate(0);
    -webkit-transition:all 0.3s ease-out;
    transition:none;
}

.service-item:hover [class*=fa]{
    -webkit-transform:scale(1.3);
    transform:rotate(360deg);
    -webkit-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
}

.service-item p{
    margin: auto; 
    max-width: 260px;
    font-size: 14px;
    font-family: "UD Shin Go NT Medium", Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
}