/* =====================================================
   GLOBAL
===================================================== */

:root{
    --primary:rgb(16, 110, 234);
    --heading:#18304b;
    --text:#777;
    --border:#e7e7e7;
    --sidebar-bg:#ffffff;
}

a{
    text-decoration:none;
    transition:.3s;
}

img{
    max-width:100%;
}

/* =====================================================
   SIDEBAR
===================================================== */

.sidebar{
    position: sticky;
    top: 80px;
    height: calc(100vh - 80px);
    overflow-y: auto;

    scrollbar-width: thin;
}

.sidebar::-webkit-scrollbar{
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb{
    background: #c8c8c8;
    border-radius: 10px;
}

/* Navigation */

.services-nav{

    padding-top:20px;
}

.services-nav ul{

    list-style:none;

    padding:0;

    margin:0;
}

.services-nav li{

    text-align:center;

    border-bottom:1px solid transparent;

    transition:.3s;
}

.services-nav li a{

    display:block;

    padding:18px 20px;

    color:#6d6d6d;

    font-size:17px;
}

.services-nav li:hover{

    background:#fafafa;
}

.services-nav li:hover a{

    color:var(--primary);
}

/* Active */

.services-nav li.active{

    background:#fafafa;

    border-left:4px solid var(--primary);
}

.services-nav li.active a{

    color:#000;

    font-weight:600;
}

/* =====================================================
   SIDEBAR BOXES
===================================================== */

.sidebar-box{

    padding:35px 30px;

    border-top:1px solid var(--border);
}

.sidebar-box h4{

    text-align:center;

    color:var(--heading);

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:30px;
}

.office-item{

    margin-bottom:35px;

    text-align:center;
}

.office-item:last-child{

    margin-bottom:0;
}

.office-item h6{

    color:var(--primary);

    font-size:20px;

    margin-bottom:12px;

    font-weight:600;
}

.office-item p{

    color:var(--text);

    /* font-size:12px; */

    line-height:1.8;
}

/* Map */

.sidebar iframe{

    width:100%;

    border:0;

    border-radius:4px;
}

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

.service-wrapper{

    padding:35px 50px 60px;
}

/* =====================================================
   SLIDER
===================================================== */

.carousel{

    overflow:hidden;
}

.carousel-inner{

    border-radius:2px;
}

.carousel-item img{

    width:100%;

    height:350px;

    object-fit:cover;
}

.carousel-control-prev,
.carousel-control-next{

    width:7%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{

    background-color:rgba(0,0,0,.45);

    border-radius:50%;

    padding:22px;
}

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

.service-content h1, .service-wrapper h1{

    color:var(--heading);

    font-size:54px;

    font-weight:300;

    letter-spacing:3px;

    margin-bottom:12px;
}

.gold-line{

    width:55px;

    height:3px;

    background:var(--primary);

    margin-bottom:35px;
}

.service-content p{

    color:var(--text);

    /* font-size:20px; */

    /* line-height:2; */

    margin-bottom:22px;
}

.service-content strong{

    color:var(--primary);
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width:1199px){

.service-wrapper{

    padding:30px;
}

.carousel-item img{

    height:300px;
}

.service-content h1, .service-wrapper h1{

    font-size:46px;
}

.service-content p{

    /* font-size:18px; */
}

.office-item h6{

    font-size:18px;
}

.office-item p{

    font-size:16px;
}

}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width:991px){

.service-wrapper{

    padding:20px;
}

.carousel-item img{

    height:260px;
}

.service-content h1, .service-wrapper h1{

    font-size:38px;

    text-align:left;
}

.gold-line{

    margin-bottom:25px;
}

.service-content p{

    font-size:17px;

    line-height:1.9;
}

}

/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width:576px){

.service-wrapper{

    padding:15px;
}

.carousel-item img{

    height:210px;
}

.carousel-control-prev,
.carousel-control-next{

    display:none;
}

.service-content h1, .service-wrapper h1{

    font-size:30px;

    letter-spacing:1px;
}

.gold-line{

    width:45px;

    margin-bottom:20px;
}

.service-content p{

    font-size:16px;

    margin-bottom:18px;
}

}

/* Service Page */
.title-area{

    text-align:center;
    margin-bottom:55px;
}

.title-area h2{

    font-size:46px;
    letter-spacing:3px;
    font-weight:300;
}

.underline{

    display:block;
    width:60px;
    height:3px;
    background:var(--primary);
    margin:18px auto 0;
}

.service-card img{

    width:100%;
    height:230px;
    object-fit:cover;
}

.service-card h3{

    margin-top:28px;
    font-size:34px;
    font-weight:300;
}

.service-card span{

    color:#d89a00;
}

.small-line{

    width:50px;
    height:3px;
    background:#d89a00;
    margin:20px 0;
}

.service-card p{

    color:#777;
    line-height:1.8;
    font-size:18px;
}

/*************************
TABLET
**************************/

@media (max-width:991px){

.content{

    padding:40px 25px;
}

.title-area h2{

    font-size:36px;
}

.service-card h3{

    font-size:28px;
}

.service-card img{

    height:220px;
}

}

/*************************
PHONE
**************************/

@media (max-width:767px){

.content{

    padding:25px 18px;
}

.title-area{

    margin-bottom:40px;
}

.title-area h2{

    font-size:30px;
    letter-spacing:2px;
}

.service-card{

    margin-bottom:15px;
}

.service-card img{

    height:210px;
}

.service-card h3{

    font-size:24px;
}

.service-card p{

    font-size:16px;
}

}

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

.service-card{

    display:flex;

    flex-direction:column;

    height:100%;
}

.service-image{

    overflow:hidden;

    display:block;
}

.service-image img{

    transition:transform .45s ease;
}

.service-image:hover img{

    transform:scale(1.05);
}

.service-title{

    color:inherit;

    text-decoration:none;
}

.service-title h3{

    margin-top:28px;

    transition:.3s;
}

.service-title:hover h3{

    color:var(--primary);
}

.service-card p{

    flex-grow:1;
}

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

.service-btn{
    background: #F8D53D;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 14px 35px;
    text-transform: uppercase;
    border-radius: 25px;
    transition: all 0.2s ease;
    margin: 5px;
    max-width: 200px;
}



.service-btn:hover{

    background:#e6d9a1;

    color:#ffff;

    border-color:var(--primary);
}

.service-btn i{

    transition:.3s;
}

.service-btn:hover i{

    transform:translateX(4px);
}