/*======================================================

                SERVICE HERO

======================================================*/

.service-hero{

    padding:170px 0 140px;

    background:#f5f5f7;

}

.service-hero-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.service-hero .section-subtitle{

    display:inline-block;

    font-size:14px;

    font-weight:600;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#8b8b8b;

    margin-bottom:22px;

}

.service-hero h1{

    font-size:72px;

    line-height:1.08;

    font-weight:700;

    color:#111;

    margin-bottom:30px;

}

.service-hero p{

    max-width:760px;

    margin:auto;

    font-size:21px;

    line-height:1.9;

    color:#6e6e73;

}

.service-hero-buttons{

    display:flex;

    justify-content:center;

    gap:22px;

    margin-top:55px;

}

.service-hero-buttons .outline-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:220px;

    height:60px;

    border-radius:999px;

    border:1px solid #d5d5d5;

    color:#111;

    transition:.35s;

}

.service-hero-buttons .outline-btn:hover{

    background:#111;

    color:#fff;

}

@media(max-width:992px){

.service-hero{

    padding:130px 0 100px;

}

.service-hero h1{

    font-size:54px;

}

.service-hero p{

    font-size:18px;

}

}

@media(max-width:768px){

.service-hero h1{

    font-size:42px;

}

.service-hero-buttons{

    flex-direction:column;

    align-items:center;

}

.service-hero-buttons a{

    width:100%;

    max-width:320px;

}

}
/*=========================================
    FORCE BUTTON STYLE
=========================================*/

.service-hero-buttons .primary-btn,
.service-hero-buttons .outline-btn{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:10px;

    width:220px;

    height:60px;

    text-decoration:none;

    font-weight:600;

    border-radius:50px;

    flex-shrink:0;

}

/* Primary */

.service-hero-buttons .primary-btn{

    background:#111 !important;

    color:#fff !important;

    border:2px solid #111 !important;

}

.service-hero-buttons .primary-btn:hover{

    background:#000 !important;

    color:#fff !important;

}

/* Outline */

.service-hero-buttons .outline-btn{

    background:transparent !important;

    color:#111 !important;

    border:2px solid #111 !important;

    margin-left:0 !important;

}

.service-hero-buttons .outline-btn:hover{

    background:#111 !important;

    color:#fff !important;

}