@font-face {
    font-family: 'Arial';
    src: url('../fonts/Arial/Arial-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arial Bold';
    src: url('../fonts/newArial-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arial Italic';
    src: url('../fonts/newArial-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Arial Bold Italic';
    src: url('../fonts/newArial-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Arial CE';
    src: url('../fonts/newArialCE-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arial CE Bold';
    src: url('../fonts/newArialCE-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arial Black';
    src: url('../fonts/newArialBlack.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



body
{
    width: 100%;
    float: left;
    margin: 0;
    padding: 0;
   /*font-family: 'Open Sans', sans-serif;*/
   font-family: 'Arial', 'Arial Bold', 'Arial Italic', 'Arial Bold Italic', 'Arial CE', 'Arial CE Bold', 'Arial Black', sans-serif;
   /*background: url(../images/napa-bg.jpg);background-repeat: no-repeat; background-size: cover; background-position: center;*/
}
.wrapper{
	margin: 0;
	padding: 0;
	width: 100%;
	box-sizing:border-box;
}
.padding{
	padding: 0;
}


body a {text-decoration: none;    color: inherit;}
ul{list-style: none;margin: 0;padding: 0;}
p:last-child{margin: 0; padding: 0;}
p, h1, h2, h3, h4, h5, h6 {margin: 0;}
html {overflow-x: hidden;}
figure { margin: 0;}



.common-sec h1 {padding: 0 0 20px 0;margin: 0;font-size: 46px;line-height: 60px;color: #00502e;font-weight: 700;text-transform: uppercase;font-family: 'Arial', 'Arial Bold', 'Arial Italic', 'Arial Bold Italic', 'Arial CE', 'Arial CE Bold', 'Arial Black', sans-serif;}
.common-sec h2 {font-size: 38px; line-height: 50px; font-weight: 700; color: #24ADE3; padding-bottom: 25px;text-align:left;}
.common-sec h3 {font-size: 28px; line-height: 36px; font-weight: 700; font-family: 'Arial', 'Arial Bold', 'Arial Italic', 'Arial Bold Italic', 'Arial CE', 'Arial CE Bold', 'Arial Black', sans-serif;text-align:left;padding-bottom:10px;color:#24ADE3!important;}
.common-sec h4{font-size: 24px; line-height: 30px; font-family: 'Arial', 'Arial Bold', 'Arial Italic', 'Arial Bold Italic', 'Arial CE', 'Arial CE Bold', 'Arial Black', sans-serif; padding: 5px 0 40px 0;}
.common-sec p {font-size: 20px; line-height: 28px;padding-right: 0;padding-bottom: 8px;}
.common-sec li {font-size: 20px; line-height: 28px;color: #000; padding: 0 0 10px 0;}
.common-sec ul {margin:0;padding:0;display:inline-block;list-style: none;}

/*.common-sec a:hover {color:#000;}*/
.common-padding  {padding:70px 0;}

.contact-us-box a:hover{color:#212529;}


.header {position:absolute;top: 0;z-index: 99999;width: 100%;padding: 10px 0 5px 0;}
.menu ul li a {transition:0.5s;color:#fff!important;padding: 0px 16px!important;font-size: 24px;font-weight: 600;font-family: "Arial", "Arial Bold", "Arial Italic", "Arial Bold Italic", "Arial CE", "Arial CE Bold", "Arial Black", sans-serif;display: inline-block;letter-spacing: 0.5px;background: transparent;position:relative;line-height:28px;}
.menu .nav-item{margin:0 15px 0 0;}
.menu nav{padding:0;}
.menu .nav-item:last-child{margin:0 0 0 12px;}
.menu ul li a:hover{color:#27283d !important}

.header-btn a{border:2px solid #EE3F2B;}

.header-btn a{line-height:24px;}

.navbar-nav .header-btn a{color:#fff!important;background: #be1e2d;border-radius: 0px;margin: 0 0 0 22px;border:2px solid #be1e2d;padding: 7px 12px 7px 12px !important;}

.navbar-expand-md .navbar-collapse {justify-content: right;}
.slider {position: relative;}
.sticky {position: fixed !important;top: 0;width: 100%;color: #000 !important;z-index: 999;display: block;background: #fff;}
.sticky + *{margin-top:100px;}

.slider .carousel-item img {width: 100%;}
.carousel-control-prev img {transform: rotate(180deg);}
.navbar-nav{align-items:center;}

.carousel .carousel-item{background: #000;}
.carousel .carousel-item img{width:100%;opacity: 0.8;}
#slider .carousel-item{background:#000;}

.slider-content { position: absolute; top: 50%; left: 0; right: 0; z-index: 999; transform: translate(0px, -50%); }
#slider{position:relative}
.menu ul li::after{content:'';width:0%;display:block;height:1px;background:#27283d !important;transition:0.5s;}
.menu ul li:hover::after{width:100%;}

.phone-number::after{content:unset!important;}
#collapsibleNavbar{justify-content: end;}
.logo p{font-size: 30px; line-height: 42px; color: #fff; text-transform: uppercase; font-weight: 600;font-family: "Cormorant Garamond", serif;}
.menu ul .phone-number a{color: #fff !important; background:#24ADE3; padding: 10px 16px!important; display: inline-block; font-size: 24px; line-height: 26px; font-weight: 600; font-family: "Arial", "Arial Bold", "Arial Italic", "Arial Bold Italic", "Arial CE", "Arial CE Bold", "Arial Black", sans-serif; margin: 0px 0 0 0; border: 1px solid #24ADE3; border-radius: 0px;}
.top-header p { color: #fff; font-size: 18px; line-height: 28px; font-weight: 500; font-family: "Arial", "Arial Bold", "Arial Italic", "Arial Bold Italic", "Arial CE", "Arial CE Bold", "Arial Black", sans-serif; }

.carousel .carousel-control-next, .carousel .carousel-control-prev{width: 8%;}

#collapsibleNavbar .phone-number a:hover{color:#fff!important;}

.carousel-control-prev i{font-size: 14px; color: #000; background: #fff; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;}
.carousel-control-next i{font-size: 14px; color: #000; background: #fff; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;}
.carousel-control-prev{opacity:1;}
.carousel-control-next{opacity:1;}



.slider-content { position: absolute; top: 52%; left: 0; right: 0; z-index: 999; transform: translate(0px, -50%); font-family: "Arial", "Arial Bold", "Arial Italic", "Arial Bold Italic", "Arial CE", "Arial CE Bold", "Arial Black", sans-serif;}
#slider{position:relative}
.slider-content-col h1 { font-size: 56px; font-weight: 700; color: #fff; padding: 0 0 25px 0;line-height: 70px;}
.slider-content-col{text-align:center;}

.common-btn{color: #fff !important; background: #24ADE3!important; padding: 10px 16px !important; display: inline-block; font-size: 20px; line-height: 26px; font-weight: 600; font-family: "Arial", "Arial Bold", "Arial Italic", "Arial Bold Italic", "Arial CE", "Arial CE Bold", "Arial Black", sans-serif; margin: 0px 0 0 0; border: 1px solid #24ADE3!important; border-radius: 0px;}
.container{max-width: 1420px;}


/*Mechanic section*/


.master-mechanic {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 10px 10px 0 10px;
    float: left;
    background: #fff;
}
.master-mechanic h2{
    margin: 0;
    padding: 0 0 20px;
    font-size: 30px;
    text-align: center;
    width: 100%;
    float: left;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 42px;
    font-family: "Arial", "Arial Bold", "Arial Italic", "Arial Bold Italic", "Arial CE", "Arial CE Bold", "Arial Black", sans-serif;
}
.master-mechanic .master-mechanic-right h2 {
    padding: 0 0 10px;
    font-size: 30px;
    line-height: 42px;
}
.master-mechanic p {
    font-size: 20px;
    margin: 0;
    padding: 0 0 15px;
    font-weight: 400;
    color: #ffff;
    letter-spacing: 0.5px;
    line-height: 30px;
    width: 100%;
    float: left;
    text-align: left;
}

.master-mechanic p a{
    color: inherit;
}
.master-mechanic .master-mechanic-right p{
    letter-spacing: 0;
    line-height: 30px;
    font-size: 20px;
}
.master-mechanic p:last-child{
    padding-bottom: 0;
}
.master-mechanic-right {
    padding-left: 10px;
}
.master-mechanic-left {
    /*background-image: url(../images/joes-block-1.jpg);*/
    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(../images/joes-block-1.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding: 0px 45px;
    height: 731px;
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.master-mechanic-right-top {
    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(../images/joes-block-2.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding: 0px 45px;
    margin-bottom: 10px;
    width: 100%;
    float: left;
    height: 309px;
    display: flex; flex-direction: column; justify-content: center;
}
.master-mechanic-right-bottom {
    /*background-image: url(../images/joes-block-3.jpg);*/
     background-image: linear-gradient( rgba(0, 0, 0, 0.5) ), url(../images/joes-block-3.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding: 0 45px;
    width: 100%;
    float: left;
    height: 412px;
    display: flex; flex-direction: column; justify-content: center;
}

.welcome-sec{float:left;width:100%;background: #fff;}
.welcome-sec-btn{text-align:right;}

.menu ul .phone-number a:hover{background:#27283d!important;border:1px solid #27283d !important;}
.common-btn:hover{background:#27283d!important;border:1px solid #27283d !important;}

.bg-sec-inner{text-align:center;}
.bg-sec-inner h3{text-align:center;padding: 20px 0 0 0;text-shadow: 3px 3px 4px rgb(25 25 25);}
.bg-sec-inner h3 a:hover{color:#24ADE3;}
/*.bg-section { background: url('../images/joes-bg-section.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; }*/
.bg-section  {float:left;width:100%; background-image: linear-gradient(rgba(0, 0, 0, 0.5) ), url(../images/joes-bg-section.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
.bg-sec-inner img{border: 4px solid #fff;border-radius: 50%;}


/*.testimonial-sec {background: #181818;padding: 60px 0 0 0;}*/
.testimonial-sec .slick-slide img{margin: 10px 0 12px 0;}

.testimonial-sec .slick-next:before, .testimonial-sec .slick-prev:before {font-size: 35px;}
.testimonial-sec .slick-prev {left: -40px;}

.testimonial{background:#dbdbdb;}

.testimonial {padding: 70px 0;}
.testimonial h2 {font-size: 30px;}
.testimonial .testimonial-item img {width: 30%;}
.testimonial p{padding: 0 30px;font-size: 18px;line-height: 28px;}
.testimonial .owl-dots{margin-top: 15px;}
.testimonial .owl-dots button span {width: 12px;height: 12px;}
.testimonial h3 {padding-top: 15px;}

.testimonial {padding: 80px 0;}
.testimonial h2 {font-size: 38px;}
.testimonial .owl-dots {margin-top: 10px;}
.testimonial .owl-dots button span {width: 15px;height: 15px;}


.testimonial{background:#181818; padding: 40px 0 60px 0;text-align: center; }
.testimonial h2{color: #fff;font-weight: 600; font-size: 42px; margin-bottom: 15px;text-transform: uppercase;}
.testimonial p{color: #fff;font-size: 22px; font-weight: 500; line-height: 32px; padding: 0 150px; position: relative; padding-top: 20px;padding-bottom: 20px;}
.testimonial .testimonial-item img{width: 123px;height: 22px;}
.testimonial p i{font-size: 80px; position: absolute; display: none;}
.testimonial p i.fa-quote-right{    right: 0;}
.testimonial p i.fa-quote-left{  top: 0;   left: 0; display: none;}

.testimonial h3{font-size: 20px; font-weight: 600; line-height: 22px; color: #fff; padding: 0 12px 0 0;}
.testimonial .container-md{position: relative; z-index: 111;}
.testimonial .owl-dots button span{width: 20px; height: 20px; display: inline-block; background-color: #ffffffb5; border-radius: 50px;    margin: 0 10px;}
.testimonial .owl-dots button.active span{background-color: #fff; }
.testimonial .owl-dots{    margin-top: 50px;}
.test-review-star{display: flex; justify-content: center; align-items: center;}

.testimonial h4{ color: #fff; padding: 0px 0 25px 0; font-size: 20px;}

.testimonial-heding h2{color: #fff; font-weight: 600;  margin-bottom: 15px; text-transform: uppercase;text-align: center;padding-top: 50px;}


.testimonial .owl-prev{position: absolute;left: 0;top: 35%;background:transparent!important;}
.testimonial .owl-next{position: absolute;right: 0;top: 35%;background:transparent!important;}
.testimonial .owl-prev i{font-size:60px;color: #fff;}
.testimonial .owl-next i{font-size:60px;color: #fff;}



.google-review-box{background: #f6f6f8;padding: 30px;}
.btm-left img{width:42%;}
.google-review-left-box p{font-weight: 600;font-size: 22px;}
.google-review-box{display: flex ; justify-content: space-between; align-items: center;margin: 0 12px;border-radius: 10px;}
.google-review-right-box a{background-color: #24ADE3; color: #fff; padding: 12px 16px; border-radius: 25px; font-weight: 600;font-size: 18px;}
.btm-left p{padding:0;}
.testimonial-sec {background: #181818;padding: 60px 0 0 0;}
.google-review-right-box a:hover{background-color: #27283d;}



.brand-slider {
    background: #fff;
    overflow: hidden;
}


.logo-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.logo-track {
    display: flex;
    width: max-content;
    animation: scroll 25s linear infinite;
}

.logo-item {
    flex: 0 0 auto;
    width: 180px;
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-item img {
    max-width: 160px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.logo-heading{padding-bottom:40px!important;}
.footer-map-inner{padding: 22px; background: #d7d7d7; border-radius: 12px;}
.footer-map-inner p {padding: 0 0 15px 0;display: flex;}
.footer-map-inner i { color: #24ADE3; font-size: 20px; margin: 0 15px 0 0; }
.footer-map-inner img{margin:0 0 10px 0;}

.footer-maps-inner iframe{border-radius: 12px;}
.footer-sec{background: #f5f5f5;}

.copyright { padding: 10px 0; background-color: #24ADE3!important;border-top: 1px solid #fff; margin: 0px 0 0 0;}
.copyright p { color: #fff; font-size: 20px; font-weight: 500; margin: 0; padding: 0 0; letter-spacing: 0.5px;font-family: "Arial"; }
.Proudly_text { text-align: right; }

.footer-logo{width:40%;}

.logo img{width:100%;transition:0.5s;}


.sticky .menu ul li a{color:#24ADE3!important;}
.sticky .menu ul li a:hover{color:#27283d!important;}
.header.sticky .phone-number a{color:#fff!important;}
.sticky .logo img{width:80%;}








