@font-face {
    font-family: 'Oswald-Regular';
    src: url('../fonts/Oswald-Regular.eot');
    src: url('../fonts/Oswald-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Oswald-Regular.woff2') format('woff2'),
        url('../fonts/Oswald-Regular.woff') format('woff'),
        url('../fonts/Oswald-Regular.ttf') format('truetype'),
        url('../fonts/Oswald-Regular.svg#LatoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


.top-head{
    background-image: url(../images/inner-head-bg.png);
    width: 100%;
    min-height: 70px;
    padding: 23px 15px;
    margin-bottom: 45px;
}

.top-head h3, .top-head h1{
    font-family: 'Oswald-Regular';
    font-size: 20px;
    color: rgb(51, 44, 34);
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}

.test-box-main{
    float: left;
    position: relative;
    width: 31.555555555%;
    margin-bottom: 40px;
}
.test-box{
    position: relative;
    min-height: 124px;
    background-color: #f0f0f0;
    padding: 38px 15px 15px 36px; 
}
.test-box p{
    font-size: 16px;
    font-family: 'LatoRegular';
    color: rgb(102, 102, 102);
    line-height: 1.4;
    text-align: justify;
}
.test-box p:before{
    content: '';
    background: url(../images/quo-before.jpg) no-repeat;
    float: left;
    width: 52px;
    height: 32px;
    position: absolute;
    top: 8px;
    left: 12px;
}
.test-box p:after{
    content: '';
    background: url(../images/quo-after.jpg) no-repeat;
    float: right;
    width: 52px;
    height: 32px;
    position: absolute;
    bottom: 8px;
    right: 12px;
}
.test-box:before{
    content: '';
    background: url(../images/testimonial_arrow.png) no-repeat;
    float: left;
    width: 29px;
    height: 21px;
    position: absolute;
    bottom: -21px;
    left: 18px;
}
.test-box-main h5{
    font-size: 16px;
    font-family: 'LatoRegular';
    color: rgb(102, 102, 102);
    line-height: 1.2;
    margin-top: 16px;
    margin-left: 50px;
    font-style: italic;
}
.test-box-main:nth-child(2) {
    margin-left: 30px;
    margin-right: 30px;
}
.test-box-main:nth-child(5) {
    margin-left: 30px;
    margin-right: 30px;
}
.testimonial-main {
    margin-bottom: 60px;
}

.air_conditioning_top h3{
    font-size: 20px;
    font-family: 'Oswald-Regular';
    color: rgb(0, 0, 0);
    line-height: 1.2;
    margin-bottom: 18px;
}
.air_conditioning_top p{
    font-size: 15px;
    font-family: 'LatoRegular';
    color: rgb(102, 102, 102);
    line-height: 1.4;
}

.air_ser_title h3{
    font-size: 20px;
    font-family: 'Oswald-Regular';
    color: rgb(0, 0, 0);
    line-height: 1.2;
}
.air_arc_text h3{
    font-size: 20px;
    font-family: 'Oswald-Regular';
    color: rgb(0, 0, 0);
    line-height: 1.2;
    margin-bottom: 20px;
}

.air_arc_text p {
    font-size: 15px;
    font-family: "LatoRegular";
    color: rgb(102, 102, 102);
    line-height: 1.4;
    text-align: justify;
}

.air_ser_body{
    background-color: rgb(240, 240, 240);
    width: 100%;
    min-height: 175px;
    padding: 22px;
    margin-bottom: 28px;
}

.air_arc_img {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(215, 212, 212);
    background-color: rgb(255, 255, 255);
    width: 254px;
    height: 132px;
    position: relative;
    float: left;
    margin-right: 30px;
}
.arc_logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);

}

.full_air_title{
    background-color: rgb(242, 194, 2);
    width: 100%;
    min-height: 50px;
    padding: 12px 27px;
}

.full_air_title h3 {
    font-size: 22px;
    font-family: "Oswald-Regular";
    color: rgb(34, 30, 24);
    line-height: 1.2;
}

.full_air_body{
    background-color: rgb(35, 30, 24);
    width: 100%;
    padding: 28px;
    margin-bottom: 75px;
}
.full_serv_left {
    width: 47.3%;
    float: left;
    position: relative;
}
.full_serv_left:first-child {
    margin-right: 40px;
}
.full_serv_left h3{
    font-size: 20px;
    font-family: "Oswald-Regular";
    color: rgb(255, 255, 255);
    line-height: 1.2;
    margin-bottom: 22px;
}

.full_serv_left img{
    border: 5px solid #ffffff;
    margin-bottom: 24px;
}

.full_serv_left p {
    font-size: 15px;
    font-family: "LatoRegular";
    color: rgb(255, 255, 255);
    line-height: 1.4;
    text-align: justify;
}
.air_conditioning_top {
    margin-bottom: 35px;
}
.air_ser_title {
    margin-bottom: 24px;
}

.che_left{
    float: left;
    position: relative;
    width: 65%;
    padding-right: 26px;

}
.che_right{
    float: left;
    position: relative;

}
.main_head h3, .main_head h2{
    font-size: 20px;
    font-family: "Oswald-Regular";
    color: rgb(0, 0, 0);
    line-height: 1.2;
    margin-bottom: 25px;
    margin-top: 4px;
    letter-spacing: 0.19px;
}

.what-do h3{
    font-size: 18px;
    font-family: "Oswald-Regular";
    color: rgb(0, 0, 0);
    line-height: 1.2;
    margin-bottom: 10px;
    letter-spacing: 0.19px;
}
.what-do p{
    font-size: 15px;
    font-family: "LatoRegular";
    color: rgb(102, 102, 102);
    line-height: 1.4;
}
.what-is h3{
    font-size: 20px;
    font-family: "Oswald-Regular";
    color: rgb(0, 0, 0);
    line-height: 1.4;
    margin-top: 26px;
    margin-bottom: 11px;
    letter-spacing: 0.19px;
}

.what-is p{
    font-size: 15px;
    font-family: "LatoRegular";
    color: rgb(102, 102, 102);
    line-height: 1.6;
    position: relative;
    padding-left: 24px;
    margin-bottom: 11px;
}

.what-is p i{
    font-size: 14px;
    color: rgb(51, 44, 34);
    line-height: 1.2;
    margin-right: 10px;
    position: absolute;
    left: 4px;
    top: 4px;
}


.che_right img{
    border-style: solid;
    border-width: 1px;
    border-color: rgb(186, 186, 186);
    padding: 2px;
}


.step-main{
    background-color: rgb(239, 239, 239);
    width: 100%;
    padding-top: 42px;
    padding-bottom: 72px;
}

.step-box{
    background-color: rgb(255, 255, 255);
    box-shadow: -1.873px 4.636px 5px 0px rgba(204, 204, 204, 0.255);
    width: 558px;
    min-height: 207px;
    padding: 15px 13px 13px 13px;
    position: relative;
    float: left;
    margin-bottom: 40px;
}
.chemtune-main{
    margin-bottom: 48px;
    margin-top: -16px;
}
.step-box:nth-child(odd){
    margin-right: 24px;
}
.step-box img{
    position: relative;
    float: left;
    margin-right: 25px;
}
.step-text{
    position: relative;

}
.step-text h3{
    font-size: 22px;
    font-family: "Oswald-Regular";
    color: rgb(51, 51, 51);
    line-height: 1.2;
    margin-bottom: 13px;
}
.step-text p{
    font-size: 15px;
    font-family: "LatoRegular";
    color: rgb(102, 102, 102);
    line-height: 1.4;
    text-align: justify;
}
.bottom-line h3{
    font-size: 22px;
    font-family: "Oswald-Regular";
    color: rgb(51, 51, 51);
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.65px;
}
.preventive-main{
    background-color: rgb(35, 30, 24);
    width: 580px;
    padding: 25px 20px 1px;
    margin-top: -4px;
}

.schedule_left h3 {
    font-size: 20px;
    font-family:"Oswald-Regular";
    color: rgb(0, 0, 0);
    line-height: 1.2;
    margin-bottom: 8px;
    margin-top: 4px;
}

.schedule_left p{
    font-size: 15px;
    font-family: "LatoRegular";
    color: rgb(102, 102, 102);
    line-height: 1.5;
    text-align: justify;
    margin-bottom: 29px;
}
.schedule_left{
    float: left;
    position: relative;
    width: 49.111%;
    padding-right: 24px;
}
.schedule_right{
    float: left;
    position: relative;
}

.preventive-main h3{
    font-size: 20px;
    font-family: "Oswald-Regular";
    color: rgb(255, 255, 255);
    line-height: 1.2;
    margin-bottom: 11px;
}

.preventive-main p{
    font-size: 15px;
    font-family: "LatoRegular";
    color: rgb(255, 255, 255);
    line-height: 1.4;
    text-align: justify;
    margin-bottom: 19px;
}
.schedule_right img{
    padding: 2px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(203, 201, 201);
}
.brake-fluid img{
    position: relative;
    float: left;
}

.brake-text h3 {
    font-size: 20px;
    font-family: "Oswald-Regular";
    color: rgb(0, 0, 0);
    line-height: 1.2;
    margin-bottom: 18px;

}

.brake-text p {
    font-size: 15px;
    font-family: "LatoRegular";
    color: rgb(102, 102, 102);
    line-height: 1.4;
    text-align: justify;
}

.brake-text{
    padding: 23px 20px 20px 32px;
    float: left;
    position: relative;
    width: 53.6%;
    background-color: #f3f3f3;
    min-height: 268px;
}


.auto-trans h3 {
    font-size: 20px;
    font-family: "Oswald-Regular";
    color: rgb(0, 0, 0);
    line-height: 1.2;
    margin-bottom: 15px;
    letter-spacing: 0.78px;
}
.auto-trans p {
    font-size: 15px;
    font-family: "LatoRegular";
    color: rgb(102, 102, 102);
    line-height: 1.4;
    text-align: justify;
    margin-bottom: 14px;
}
.anti-free h3 {
    font-size: 20px;
    font-family: "Oswald-Regular";
    color: rgb(0, 0, 0);
    line-height: 1.2;
    margin-bottom: 15px;
}
.anti-free p {
    font-size: 15px;
    font-family: "LatoRegular";
    color: rgb(102, 102, 102);
    line-height: 1.4;
    text-align: justify;

}
.brake-fluid {
    margin-bottom: 25px;
    margin-top: 23px;

}
.brake-fluid img {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(169, 164, 164);
    padding: 2px;
}

.item_interest{
    background-color: #231e18;
    padding: 20px 20px 33px 26px;
    margin-top: 20px;
    margin-bottom: 3px;
}
.item_interest h3{
    font-size: 20px;
    font-family: "Oswald-Regular";
    color: rgb(255, 255, 255);
    line-height: 1.2;
    margin-bottom: 15px;
}

.item_interest p {
    font-size: 15px;
    font-family: "LatoRegular";
    color: rgb(255, 255, 255);
    line-height: 1.4;
    text-align: justify;
}
.item_left {
    position: relative;
    float: left;
    width: 50%;
    padding-right: 15px;
}
.item_right {
    position: relative;
    float: left;
    width: 50%;
    padding-left: 15px;
}

.oil-warning img{
    border: 0;
    padding: 0;
}

.oil-warning .brake-text {
    width: 51%;
    min-height: 243px;
}
.oil-warning{
    margin-bottom: 60px;
}
.schedule-main {
    margin-top: -19px;
}

.ui-icon {
    display: inline-block;
    vertical-align: middle;
    /*    margin-top: -.25em;*/
    position: relative;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}
.ui-icon {
    width: 36px;
    height: 36px;
}
.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    position: relative;
    margin: 0 0 14px 0;
    padding:15px 15px 15px 15px;
    font-size: 100%;
    min-height: 50px;
    outline: 0;
}

.ui-icon, .ui-widget-content .ui-icon {
    background-image: url(../images/accordian-de-active.png) !important;
    background-position: 50% !important;
    float: right;
    width: 70px;
    height: 50px;
    background-color: #c8c8c8;
}


.ui-state-active .ui-icon, .ui-button:active .ui-icon {
    background-image: url(../images/accordian-active.png) !important;
    background-position: 50% !important;
    float: right;
    background-color: #ffdc51;
    width: 70px;
    height: 50px;

}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 0px solid #c5c5c5;
    background: #e5e5e5;
    font-weight: normal;
    color: #454545;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 0px solid #003eff;
    background: #f1c100;
    font-weight: normal;
    color: #ffffff;
    margin: 0 !important;
}
.ui-accordion-content{
    background-color: rgb(51, 44, 34);
    padding: 15px;
    width: 100%;
}
.service_left {
    width: 715px;
    float: left;
    position: relative;
}
.service_left p {
    font-size: 16px;
    font-family: "LatoRegular";
    color: rgb(255, 255, 255);
    line-height: 1.4;
    margin-bottom: 9px;
    letter-spacing: 0.10px;


}

.service_left ul li{
    font-size: 16px;
    font-family: "LatoRegular";
    color: rgb(255, 255, 255);
    line-height: 2;
}

.service_left ul{

    margin: 0;
    list-style: none;
    padding-left: 7px;
}
.service_left h3,h1,h2{
    font-size: 18px;
    font-family: "Oswald-Regular";
    color: rgb(0, 0, 0);
    line-height: 1.2;
}

span.ui-icon{
    position: absolute;
    right: 0;
    top: 0;
}
.ui-accordion div{
    margin-bottom: 16px;

}
.service_right .backed-service-imges-right {
    margin-top: 0px !important;
    float: none;
}

.brand-we-use{
    border-style: solid;
    border-width: 1px;
    border-color: rgb(169, 164, 164);
    background-color: rgb(255, 255, 255);
    width: 394px;
    min-height: 578px;
    margin-top: 26px;

}
.service_right{
    float: right;
    position: relative;
    width: 391px;
}

.brand-img img{
    border: 1px solid #a9a4a4;
    width: 179px;
    margin-bottom: -4px;
}
.brand-img img:nth-child(odd){
    margin-right: -4px;
    margin-left: 16px;
}

.brand-top-text p{
    font-size: 16px;
    font-family: "LatoRegular";
    color: rgb(51, 51, 51);
    line-height: 1.6;
    text-align: center;
    margin-bottom: 10px;
}

.brand-top-head{
    background-color: rgb(51, 44, 34);
    width: 100%;
    margin-bottom: 20px;
    padding: 15px 15px;

}
.brand-top-text {
    padding: 16px;
}

.brand-top-head h3{
    font-size: 26px;
    font-family: "Oswald-Regular";
    color: rgb(255, 255, 255);
    line-height: 1.2;
    text-align: center;
}
.service-main {
    padding-bottom: 76px;
    margin-top: -16px;
}
.service-contact .btn_1 a {
    /*    margin-right: -19px;
        padding: 13px 24px;*/
}
.service-contact{
    /*    top: 90%;*/
}



/* --------------- responsive ---------------- */

@media screen and (max-width: 1199px) {
    .test-box-main {
        width: 31%;
    }
    .test-box {
        padding: 38px 15px 50px 36px;
    }
    .test-box p {
        text-align: left;
    }
    .che_left {
        width: 58%;
    }
    .step-box {
        width: 452px;
    }
    .schedule_left {
        width: 37.6%;
    }
    .schedule_left h3 {
        font-size: 16px;
    }
    .schedule_left p {
        margin-bottom: 12px;
        font-size: 14px;
    }
    .brake-text {
        width: 42.8%;
    }
    .oil-warning .brake-text {
        width: 40%;
        padding: 13px 20px 20px 32px;
    }
    .service_left {
        width: 500px;
    }
    .service-contact {
        top: 50%;
    }

}
@media screen and (max-width: 991px) {
    .test-box-main {
        width: 30.5%;
    }
    .test-box {
        min-height: 178px;
    }
    .air_conditioning_top {
        margin-bottom: 18px;
    }
    .air_arc_text h3 {
        margin-bottom: 10px;
    }
    .full_serv_left {
        width: 46.3%;
    }
    .che_left {
        width: 100%;
        padding-right: 0;
    }
    .step-box:nth-child(odd) {
        margin-right: auto;
    }
    .step-box {
        width: 456px;
        float: none;
        display: table;
        margin: 20px auto;
    }
    .che_right {
        float: none;
        position: relative;
        margin: auto;
        display: table;
        padding-top: 26px;
    }

    .step-main {
        background-color: rgb(239, 239, 239);
        width: 100%;
        padding-top: 20px;
        padding-bottom: 40px;
    }
    .chemtune-main {
        margin-bottom: 25px;
    }
    .schedule_left {
        width: 100%;
        text-align: center;
        padding: 0;
    }
    .schedule_left p {
        margin-bottom: 16px;
        text-align: center;
    }
    .schedule_right {
        float: none;
        margin: auto;
        display: table;
    }
    .schedule_right img {
        margin-bottom: 15px;
    }
    .brake-fluid img {
        float: none;
        margin: auto;
        display: table;
    }
    .brake-text {
        width: 100%;
        margin-top: 15px;
        text-align: center;
        min-height: inherit;
        padding: 15px;
    }
    .brake-text p {
        text-align: center;
        font-size: 15px;
    }
    .auto-trans {
        text-align: center;
    }
    .auto-trans p {
        text-align: center;
    }
    .anti-free {
        text-align: center;
    }
    .anti-free p {
        text-align: center;
    }
    .item_interest {
        text-align: center;
    }
    .item_left, .item_right {
        width: 100%;
        padding-right: 0px;
        padding-left: 0;
    }
    .item_interest p {
        text-align: center;
        margin-bottom: 15px;
    }
    .item_interest {
        background-color: #231e18;
        padding: 20px;
        padding-bottom: 5px;
    }
    .oil-warning .brake-text {
        width: 100%;
        min-height: inherit;
        padding: 15px;
    }
    .preventive-main {
        width: 100%;
        text-align: center;
    }
    .schedule_right img {
        margin: auto;
        display: table;
        margin-bottom: 20px;
    }
    .preventive-main p {
        text-align: center;
    }
    .service_left {
        width: 100%;
        margin-bottom: 20px;
    }
    .service_right {
        float: none;
        width: 391px;
        display: table;
        margin: auto;
    }
    .brand-we-use {
        margin-top: 10px;
    }

}
@media screen and (max-width: 767px) {
    .test-box-main:nth-child(2),  .test-box-main:nth-child(5) {
        margin-left: 0px;
        margin-right: 0px;
    }
    .test-box-main {
        width: 100%; 
        margin-bottom: 20px;

    }
    .test-box {
        min-height: inherit;
    }
    .air_conditioning_top {
        text-align: center;
    }
    .air_conditioning_top h3 {
        font-size: 16px;
    }
    .air_cond_service {
        text-align: center;
    }
    .air_arc_img {
        float: none;
        margin: auto;
        margin-bottom: 15px;
        width: 226px;
        height: 105px;
    }
    .air_arc_text p {
        text-align: center;
        font-size: 14px;
    }
    .full_air_title h3 {
        font-size: 20px;
        text-align: center;
    }
    .full_serv_left:first-child {
        margin-right: 0;
    }
    .full_serv_left {
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }
    .top-head {
        padding: 13px 15px;
        margin-bottom: 25px;
        min-height: 44px;
    }
    .full_serv_left p {
        text-align: center;
        font-size: 14px;
    }
    .full_serv_left h3 {
        font-size: 18px;
    }
    .full_air_body {
        padding-bottom: 10px;
        padding: 20px;
    }
    .air_conditioning_top p {
        font-size: 14px;
    }
    .air_ser_title h3 {
        font-size: 18px;
    }
    .air_ser_title {
        margin-bottom: 12px;
    }
    .air_ser_body {
        margin-bottom: 16px;
    }
    .chemtune-main {
        margin-top: 0;
    }
    .main_head h3, .main_head h2 {
        font-size: 18px;
        margin-bottom: 16px;
    }
    .what-do h3 {
        font-size: 16px;
    }
    .what-do p {
        font-size: 14px;
    }
    .what-is h3 {
        font-size: 18px;
        margin-top: 14px;
    }
    .che_right {
        padding-top: 16px;
    }
    .step-main {
        padding-top: 10px;
        padding-bottom: 20px;
    }
    .step-text h3 {
        font-size: 18px;
        margin-bottom: 8px;
    }
    .step-text p {
        font-size: 14px;
    }
    .bottom-line h3 {
        font-size: 14px;
    }
    .what-is p {
        font-size: 14px;
    }
    .schedule-main {
        margin-top: 0;
    }
    .preventive-main h3 {
        font-size: 18px;
    }
    .preventive-main p {
        font-size: 14px;
    }
    .brake-text h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .brake-text p {
        font-size: 14px;
    }
    .brake-fluid {
        margin-bottom: 15px;
        margin-top: 15px;
    }
    .auto-trans h3 {
        font-size: 18px;
    }
    .auto-trans p {
        font-size: 14px;
    }
    .anti-free h3 {
        font-size: 18px;
    }
    .anti-free p {
        font-size: 14px;
    }
    .item_interest p {
        font-size: 14px;
    }
    .full_air_body {
        margin-bottom: 20px;
    }
    .testimonial-main {
        margin-bottom: 10px;
    }
    .service-main {
        padding-bottom: 25px;
        margin-top: 0;
    }
    .ui-state-active .ui-icon, .ui-button:active .ui-icon {
        width: 42px;
        height: 42px;
        background-size: 24px;
    }
    .ui-icon, .ui-widget-content .ui-icon{
        width: 42px;
        height: 42px;
        background-size: 24px;
    }
    .ui-accordion .ui-accordion-header {
        margin: 0 0 14px 0;
        padding: 11px;
        min-height: 42px;
        font-size: 16px;
    }
    .service_left p, .service_left ul li {
        font-size: 14px;
    }


}

@media screen and (max-width: 568px) {
    .service-contact .btn_1 a {
        margin-right: 0px;
        padding: 11px;
    }
    .top-head h3,.top-head h1 {
        font-size: 18px;
    }
    .top-head {
        min-height: 48px;
        padding: 14px 15px;
        margin-bottom: 15px;
    }
    .full_air_title h3 {
        font-size: 18px;
    }
    .step-box img {
        float: none;
        margin: auto;
        display: block;
        margin-bottom: 20px;
    }
    .step-text h3 {
        text-align: center;
    }
    .step-text p {
        text-align: center;
    }
    .step-box {
        width: 100%;
    }
    .brand-top-text {
        padding: 9px;
    }
    .brand-top-head h3 {
        font-size: 20px;
    }
    .brand-top-head {

        padding: 10px 10px;
    }
    .ui-accordion .ui-accordion-header {
        padding: 15px;
        min-height: 42px;
        font-size: 11px;
    }
    .brand-we-use {
        min-height: inherit;
    }
    .brand-img {
        padding-bottom: 15px;
    }
}

@media screen and (max-width: 480px) {
    .brand-we-use {
        margin: auto;
        margin-top: 10px;
        width: 320px;

    }
    .service_right {
        width: 100%;
    }
    .brand-img img {
        width: 144px;
    }
}
@media screen and (max-width: 360px) {
    .brand-we-use {
        width: 100%;
    }

    .brand-img img:nth-child(odd) {
        width: auto;
        margin: auto;
        display: table;
        margin-bottom: 10px;
    }
    .brand-img img {
        width: auto;
        margin: auto;
        display: table;
        margin-bottom: 10px;
    }

    .service_left {
        width: 100%;
        margin-bottom: 5px;
    }
    .brand-top-text p {
        font-size: 14px;
    }
}