:root{
    --ar-service-office-main-color: #9b6d31;
    --ar-service-office-light-color: #f2e3c4;
    --ar-service-office-gradi: linear-gradient(90deg,#9b6d31 30%, #f2e3c4 70%);
}

.ar-office-service-flex{
    position: relative;
    margin: 0 -15px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.ar-office-service-item{
    position: relative;
    margin: 0 15px 30px 15px;
    text-decoration: none;
}
.ar-office-col-2 .ar-office-service-item{width: calc(100% * (1/2) - 0px - 0px - 30px);}
.ar-office-col-3 .ar-office-service-item{width: calc(100% * (1/3) - 0px - 0px - 30px);}
.ar-office-col-4 .ar-office-service-item{width: calc(100% * (1/4) - 0px - 0px - 30px);}
.ar-office-col-5 .ar-office-service-item{width: calc(100% * (1/5) - 0px - 0px - 30px);}
.ar-office-col-6 .ar-office-service-item{width: calc(100% * (1/6) - 0px - 0px - 30px);}

.ar-office-service-item:before{
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40%;
    border-bottom-left-radius: 40px;
    background: linear-gradient(90deg, rgb(41, 41, 41) 30%, rgb(85, 85, 85) 70%);
}
.ar-office-service-image-holder{
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    background: linear-gradient(90deg, #9b6d31, #ddb37c);
    overflow: hidden;
}
.ar-office-service-image-holder lord-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.ar-office-service-image-holder img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 800ms;
}
.ar-office-service-image-holder:hover img{transform: scale(1.05);}
.ar-office-service-hard-corners{
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
}

.ar-office-service-text-holder{
    position: relative;
    padding: 20px;
    box-sizing: border-box;
}
.ar-office-service-text-holder h4.ar-office-service-title{
    position: relative;
    margin: 0;
    padding: 0 15px 0 0;
    text-transform: uppercase;
    text-align: right;
    font-size: 14px;
    line-height: 1.3em;
    color: #fff;
    border-right: 2px solid #c09966;
}





.ar-service-empty{
    position: relative;
    width: 100%;
}
.ar-service-height-10{height: 10px}
.ar-service-height-20{height: 20px}
.ar-service-height-30{height: 30px}
.ar-service-height-40{height: 40px}
.ar-service-height-50{height: 50px}
.ar-service-height-60{height: 60px}
.ar-service-height-70{height: 70px}
.ar-service-height-80{height: 80px}
.ar-service-height-90{height: 90px}
.ar-service-height-100{height: 100px}
.ar-service-height-110{height: 110px}
.ar-service-height-120{height: 120px}
.ar-service-height-130{height: 130px}
.ar-service-height-140{height: 140px}
.ar-service-height-150{height: 150px}
.ar-service-height-160{height: 160px}
.ar-service-height-170{height: 170px}
.ar-service-height-180{height: 180px}
.ar-service-height-190{height: 190px}
.ar-service-height-200{height: 200px}
.ar-service-height-210{height: 210px}
.ar-service-height-220{height: 220px}
.ar-service-height-230{height: 230px}
.ar-service-height-240{height: 240px}
.ar-service-height-250{height: 250px}
.ar-service-height-260{height: 260px}
.ar-service-height-270{height: 270px}
.ar-service-height-280{height: 280px}
.ar-service-height-290{height: 290px}
.ar-service-height-300{height: 300px}

.ar-service-container{
    position: relative;
    margin: 0 auto 40px auto;
    width: 86%;
}

.ar-service-container .ar-service-single-flex{
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item{
    position: relative;
    margin: 0;
    padding: 0;
    flex-grow: 1;
    flex-basis: 0;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item.ar-side-panel{
    margin: 0 60px 0 0;
    flex-grow: 0;
    flex-basis: auto;
    width: 450px;
}

.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-image-holder{
    position: relative;
    width: 100%;
    padding-bottom: 60%;
    margin: 0 0 60px 0;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-image-holder:before{
    position: absolute;
    content: '';
    right: -25px;
    bottom: -25px;
    width: 50%;
    height: 80%;
    border-radius: 30px;
    background: var(--ar-service-office-gradi);

}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-image-holder img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item h1.ar-single-title{
    position: relative;
    margin: 0 0 40px 0;
    padding: 0 0 0 20px;
    border-left: 3px solid var(--ar-service-office-main-color);
    font-size: 44px;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-single-desc{
    position: relative;
    line-height: 1.6em;
    margin-bottom: 40px;
}

.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-office-social{
    position: relative;
    border-top: 2px solid var(--ar-service-office-main-color);
    margin: 0;
    padding: 15px 0 40px 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-office-social li{
    position: relative;
    margin: 0 10px 0 0;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-office-social li:nth-last-child(1){
    margin: 0;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-office-social li a{
    position: relative;
    width: 40px;
    height: 40px;
    border: 2px solid var(--ar-service-office-main-color);
    text-decoration: none;
    display: block;
    border-radius: 100px;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-office-social li a *{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder{
    position: relative;
    padding: 50px 50px 30px 50px;
    box-sizing: border-box;
    background: var(--ar-service-office-light-color);
    margin: 0 0 30px 0;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder h2.ar-title{
    position: relative;
    margin: 0 0 25px 0;
    padding: 0;
    font-size: 28px;
    line-height: 1.3em;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder .ar-service-form{
    position: relative;
    margin: 0 -10px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder .ar-service-form label{
    position: relative;
    margin: 0 10px 20px 10px;
    width: calc(100% * (1/1) - 0px - 0px - 20px);
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder .ar-service-form label.ar-col-2{width: calc(100% * (1/2) - 0px - 0px - 20px);}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder .ar-service-form label input,
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder .ar-service-form label textarea{
    position: relative;
    width: 100%;
    display: block;
    padding: 15px 20px;
    box-sizing: border-box;
    border: 2px solid var(--ar-service-office-main-color);
    color: var(--ar-service-office-main-color);
    border-radius: 6px;
    font-size: 14px;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder .ar-service-form label textarea{height: 120px;}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder .ar-service-form label input:focus,
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder .ar-service-form label textarea:focus{outline: none;}

.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder .ar-service-form label input.ar-service-btn{
    background: var(--ar-service-office-main-color);
    color: #fff;
    cursor: pointer;
    transition: 350ms;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder .ar-service-form label input.ar-service-btn:hover{background: #000; border-color: #000;}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder .ar-service-form label span.ar-service-small-text{
    position: relative;
    display: block;
    font-size: 12px;
    line-height: 1.6em;
    color: var(--ar-service-office-main-color);
}





.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-widget{
    position: relative;
    width: 100%;
    margin: 0 0 40px 0;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-widget .ar-service-widget-title{
    position: relative;
    padding: 15px;
    box-sizing: border-box;
    background: var(--ar-service-office-main-color);
    border-radius: 6px;
    margin: 0 0 15px 0;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-widget .ar-service-widget-title h2{
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2em;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-widget .ar-service-list{
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-widget .ar-service-list li{
    position: relative;
    padding: 0 0 10px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.15);
    margin: 0 0 10px 0;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-widget .ar-service-list li:nth-last-child(1){margin: 0;}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-widget .ar-service-list li a.ar-service-list-item{
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-widget .ar-service-list li a.ar-service-list-item .ar-service-list-box{
    position: relative;
    flex-grow: 1;
    flex-basis: 0;
}

.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-widget .ar-service-list li a.ar-service-list-item .ar-service-list-box.ar-photo-holder{
    flex-grow: 0;
    flex-basis: auto;
    width: 50px;
    height: 50px;
    background: var(--ar-service-office-main-color);
    border-radius: 6px;
    margin-right: 10px;
    overflow: hidden;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-widget .ar-service-list li a.ar-service-list-item .ar-service-list-box.ar-photo-holder img{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-widget .ar-service-list li a.ar-service-list-item .ar-service-list-box.ar-photo-holder lord-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-widget .ar-service-list li a.ar-service-list-item .ar-service-list-box span{
    position: relative;
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-widget .ar-service-list li a.ar-service-list-item .ar-service-list-box span.ar-small-text{
    position: relative;
    display: block;
    font-size: 11px;
    line-height: 1.4em;
    margin-top: 3px;
}
.ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-widget .ar-service-list li a.ar-service-list-item .ar-service-list-box span.ar-small-text strong{color: var(--ar-service-office-main-color);}



.reference-list{
    position: relative;
    margin: 0 -15px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.reference-list .reference-item{
    position: relative;
    margin: 0 15px 30px 15px;
    width: calc(100% * (1/5) - 0px - 0px - 30px);
    background: #fff;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 20px;
    min-height: 260px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.reference-list .reference-item .reference-item-head{
    position: relative;
    margin: 0 0 10px 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.reference-list .reference-item .reference-item-head strong{
    position: relative;
    margin-left: 10px;
}
.reference-list .reference-item .reference-desc{
    position: relative;
    margin: 0;
    line-height: 1.6em;
    font-size: 12px;
}
.reference-list .reference-item .reference-desc .reference-services{
    position: relative;
    margin: 0 -3px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.reference-list .reference-item .reference-desc .reference-services .reference-service-item{
    position: relative;
    margin: 0 2px 4px 2px;
    color: #000;
    background: rgb(236, 236, 236);
    font-size: 10px;
    display: block;
    border-radius: 8px;
    line-height: 1em;
    padding: 3px 6px;
}
.reference-list.ar-style-one .reference-item{background: rgb(240, 240, 240);}
.ar-section{
    position: relative;
    width: 100%;
}
.ar-section h2{
    position: relative;
    font-size: 34px;
    line-height: 1.2em;
    margin: 0 0 20px 0;
    padding: 0px;
    display: block;
}
.ar-section h2.ar-center{
    text-align: center;
}

@media screen and (max-width: 1500px){
    .ar-service-container .ar-service-single-flex .ar-service-single-item.ar-side-panel {
        margin: 0px 40px 0 0;
        width: 400px;
    }
    .ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-widget .ar-service-widget-title h2{font-size: 14px;}
    .ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-widget .ar-service-list li a.ar-service-list-item .ar-service-list-box span{font-size: 12px;}
    .ar-service-container .ar-service-single-flex .ar-service-single-item h1.ar-single-title {
        margin: 0 0 30px 0;
        padding: 0 0 0 17px;
        font-size: 32px;
    }
}
@media screen and (max-width: 1300px){
    .ar-office-service-flex{justify-content: center;}
    .ar-office-col-5 .ar-office-service-item {width: calc(100% * (1 / 3) - 0px - 0px - 30px);}
    .ar-service-container .ar-service-single-flex .ar-service-single-item.ar-side-panel {width: 350px;}
    .ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder h2.ar-title {
        margin: 0 0 20px 0;
        font-size: 18px;
    }
    .ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder {
        padding: 40px 40px 10px 40px;
        border-radius: 15px;
    }
    .ar-section h2 {
        font-size: 28px;
        margin: 0 0 15px 0;
    }
    .ar-bg-style-one, .ar-bg-style-clear {padding: 60px 0;}
}
@media screen and (max-width: 1100px){
    .ar-service-height-140 {height: 120px;}
    .ar-service-container {width: 90%;}
    .ar-service-container .ar-service-single-flex {flex-direction: column-reverse;}
    .ar-service-container .ar-service-single-flex .ar-service-single-item.ar-side-panel {
        width: 100%;
        margin: 40px 0 0 0;
    }
    .ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-image-holder img{border-radius: 15px;}
    .ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-image-holder:before {
        right: -10px;
        bottom: -10px;
        border-radius: 20px;
    }
    .ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-image-holder {margin: 0 0 40px 0;}
    .ar-service-container .ar-service-single-flex .ar-service-single-item h1.ar-single-title {
        margin: 0 0 20px 0;
        font-size: 26px;
    }
    .ar-service-container .ar-service-single-flex .ar-service-single-item .ar-single-desc {font-size: 14px;}
}
@media screen and (max-width: 760px){
    .ar-office-col-5 .ar-office-service-item {width: calc(100% * (1 / 2) - 0px - 0px - 30px);}
    .ar-office-service-hard-corners {
        border-top-right-radius: 30px;
        border-bottom-left-radius: 30px;
    }
    .ar-office-service-item:before {border-bottom-left-radius: 30px;}
}
@media screen and (max-width: 660px){
    .ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder .ar-service-form label.ar-col-2 {width: calc(100% * (1 / 1) - 0px - 0px - 20px);}
}
@media screen and (max-width: 600px){
    .ar-office-service-flex{
        position: relative;
        margin: 0 -10px;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
    }
    .ar-office-service-item{
        position: relative;
        margin: 0 10px 20px 10px;
        text-decoration: none;
    }
    .ar-office-col-2 .ar-office-service-item{width: calc(100% * (1/2) - 0px - 0px - 20px);}
    .ar-office-col-3 .ar-office-service-item{width: calc(100% * (1/2) - 0px - 0px - 20px);}
    .ar-office-col-4 .ar-office-service-item{width: calc(100% * (1/2) - 0px - 0px - 20px);}
    .ar-office-col-5 .ar-office-service-item{width: calc(100% * (1/2) - 0px - 0px - 20px);}
    .ar-office-col-6 .ar-office-service-item{width: calc(100% * (1/3) - 0px - 0px - 20px);}

    .ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder {padding: 30px 30px 0px 30px;}
    .ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder h2.ar-title {font-size: 16px;}
    .ar-service-container .ar-service-single-flex .ar-service-single-item .ar-service-form-holder h2.ar-title br{display: none;}
    .ar-section h2 {font-size: 22px;}
    .ar-bg-style-one, .ar-bg-style-clear {padding: 50px 0;}
}
@media screen and (max-width: 500px){
    .ar-office-col-5 .ar-office-service-item {width: calc(100% * (1 / 1) - 0px - 0px - 30px);}
}