/***** BEGIN RESET *****/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
} 

/*-------- COLORS --------

*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {overflow-x: hidden;}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none; cursor: pointer !important;}
button:hover {cursor: pointer !important;}

hr{border:#000 1px solid;}
html {font-family: 'roboto', sans-serif;}

/*--- HEADER STYLES ---------------------*/

header {width: 95%; margin: 0 auto; padding: 30px 0; display: flex; justify-content: space-between; align-items: center;}
.header-right {display: flex; flex-wrap: wrap; gap: 20px;}
.header-right > div {width: 100%;}
.header-phone {display: flex; justify-content: flex-end;}
.header-phone a {font-family: 'roboto-condensed', sans-serif; font-size: 32px; line-height: 32px; font-weight: 800; color: #000;}
.header-phone a:hover {color: #F1592A; transition: .5s;}

/*---BODY--------------------------------*/

/*---DEFAULT---*/

.hero-bkgrd {background: url("/siteart/hero-bkgrd.jpg") no-repeat; background-position: center; background-size: cover;}
.hero-wrap {width: 95%; margin: 0 auto; padding: 100px 0; display: flex; justify-content: space-between; align-items: center;}
.hero-wrap > div {width: 42%;}
.hero-right img {border-radius: 5px; width: 100%;}
.hero-left h1 {color: #fff; font-family: 'roboto-condensed', sans-serif; font-size: 45px; line-height: 55px; text-transform: uppercase; font-weight: 800;}
.hero-left h1 span {color: #fff; font-family: 'roboto-condensed', sans-serif; font-size: 45px; line-height: 55px; text-transform: uppercase; font-weight: 200 !important;}
.hero-left p {color: #fff; font-family: 'roboto', sans-serif; font-size: 18px; line-height: 30px; margin: 20px 0;}
.hero-btns {display: flex; gap: 15px; margin-top: 30px;}
.hero-btns > a:first-child button {width: 220px; border: 1px #F1592A solid; border-radius: 3px; background: #F1592A; padding: 12px 0; color: #fff; font-family: 'roboto', sans-serif; font-size: 16px; line-height: 16px;}
.hero-btns > a:last-child button {width: 220px; border: 1px #FFFF solid; border-radius: 3px; background: none; padding: 12px 0; color: #fff; font-family: 'roboto', sans-serif; font-size: 16px; line-height: 16px;}
.hero-btns a:hover button {background: #CB3A0D !important; border: 1px #CB3A0D solid !important; transition: .5s;}

.light-gray {background: #F8F8F8;}
.body-wrap {width: 95%; margin: 0 auto; padding: 100px 0;}
.body-flex {display: flex; justify-content: space-between; gap: 50px; align-items: center;}
.body-flex > div:first-child {width: 42%;}
.body-flex > div:last-child {width: 48%;}
.body-flex h2 {font-family: 'roboto-condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 45px; line-height: 55px;}
.body-flex p {color: #6D6D6D; font-family: 'roboto', sans-serif; font-weight: 200; font-size: 18px; line-height: 30px; margin: 20px 0;}
.body-flex button {width: 220px; border: 1px #F1592A solid; border-radius: 3px; background: #F1592A; padding: 12px 0; color: #fff; font-family: 'roboto', sans-serif; font-size: 16px; line-height: 16px; margin-top: 10px;}
.body-flex button:hover {background: #000; border: 1px #000 solid; transition: .5s;}
.body-links {display: flex; gap: 15px;}
.body-links > a {border: 1px #6D6D6D solid; border-radius: 5px; background: #fff; width: 100%;}
.body-links > a > div {padding: 20px;}
.body-links img {width: 100%; border-radius: 3px; margin-bottom: 40px;}
.body-links h3 {font-family: 'roboto-condensed', sans-serif; font-weight: 800; font-size: 32px; line-height: 42px; text-transform: uppercase; color: #000;}
.body-links p {font-size: 17px; line-height: 30px;}
.body-links p span {color: #F1592A;}
.body-links a:hover p i {padding-left: 8px; transition: .5s;}
.body-links a:hover {transition: .5s; transform: translateY(-8px);}

.contact-head {text-align: center; width: 700px; margin: 0 auto;}
.contact-head h4 {font-family: 'roboto-condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 45px; line-height: 55px;}
.contact-head p {color: #6D6D6D; font-family: 'roboto', sans-serif; font-weight: 200; font-size: 18px; line-height: 30px; margin: 15px 0;}
.contact-flex {display: flex; justify-content: space-between; gap: 50px; margin-top: 50px;}
.contact-flex > div {width: 100%;}
.contact-flex iframe {border-radius: 5px;}
.contact-links {display: flex; gap: 50px; margin-top: 40px;}
.contact-links a {width: 100%;}
.contact-links h5, .contact-links h3 {color: #000; font-family: 'roboto-condensed', sans-serif; font-size: 25px; line-height: 35px; text-transform: uppercase; font-weight: 800;}
.contact-links p {color: #6D6D6D; font-family: 'roboto', sans-serif; font-weight: 200; font-size: 17px; line-height: 30px; margin-left: 35px;}
.contact-links a:hover h5 {color: #F1592A; transition: .5s;}
.contact-form h6, .contact-form h2 {font-family: 'roboto-condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 38px; margin-bottom: 8px;}
.contact-form p, .contact-form li {color: #6D6D6D; font-family: 'roboto', sans-serif; font-weight: 200; font-size: 18px; line-height: 30px;}
.contact-form form {margin-top: 20px;}

.testimonial-bkgrd {background: url("/siteart/testimonial-bkgrd.jpg") no-repeat; background-position: center; background-size: cover;}
.testimonial-overlay {background: rgba(255,255,255,0.90);}
.testimonial-wrap {width: 95%; margin: 0 auto; padding: 100px 0;}
.testimonial-head {width: 700px; margin: 0 auto; text-align: center;}
.testimonial-head h7 {font-family: 'roboto-condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 45px; line-height: 55px;}
.testimonial-head p {color: #6D6D6D; font-family: 'roboto', sans-serif; font-weight: 200; font-size: 18px; line-height: 30px; margin: 15px 0;}
#testimonials {margin-top: 100px; padding-bottom: 100px;}
#testimonials > div:first-child {width: 95%; margin: 0 auto; margin-bottom: 40px;}
#testimonials .testimonial {display: flex; gap: 15px; margin-bottom: 30px;}
.slide .testimonial-name {display: flex; justify-content: space-between;}
.slide .testimonial-name p {text-align: center; color: rgba(0,0,0,0.20);}
.testimonial i {color: rgba(0,0,0,0.20); font-size: 40px;}
.testimonial p {padding-top: 14px; color: rgba(0,0,0,0.20); font-size: 18px; line-height: 30px; font-family: 'Poppins', sans-serif;}
.testimonial-name p {font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 16px; color: #000; font-weight: 400;}
.slide .testimonial {background: none;}
.testimonial-name {margin-top: 10px;}
.slide.slick-active .testimonial {background: #fff; padding: 30px 25px 35px 25px; margin: 0 80px; border-radius: 5px; border: 1px #6D6D6D solid;}
.slide.slick-active .testimonial p {color: #000;}
.slide.slick-active .testimonial i {color: #000;}
.slide.slick-active .testimonial-name p {color: #000;}
.testimonial-name div {display: flex; gap: 10px; align-items: center;}
.testimonial-name i {font-size: 18px; color: rgba(0,0,0,0.20);}
.slide.slick-active .testimonial-name i {font-size: 18px; color: #F5C137;}
.reel {margin-top: 50px;}

/*---CONTACT---*/

.contact-hero-wrap {padding-bottom: 80px !important;}
.contact-hero {text-align: center; width: 100% !important;}

.contact-page-flex {margin-top: 0px !important;}
.contact-form button {width: 200px; padding: 12px 0; background: #F1592A; border-radius: 3px; font-family: 'roboto', sans-serif; font-size: 16px; line-height: 16px; color: #fff; border: none; margin-top: 20px;}
.contact-form button:hover {background: #000; transition: .5s;}

/*---REPAIR---*/
.services-section {
    padding: 50px 20px;
}

.services-title {
    text-align: center;
    font-size: 36px;
    color: #212121;
    margin-bottom: 40px;
    font-weight: bold;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.service-card {
    background: #fff;
    padding: 30px 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.service-card i {
    font-size: 40px;
    color: #F1592A;
    margin-bottom: 15px;
    display: block;
}

.service-card h3 {
    font-size: 18px;
    color: #333;
    margin: 0;
    font-weight: 600;
    line-height: 1.4;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
    }
    
    .services-title {
        font-size: 28px;
    }
    
    .service-card {
        padding: 20px 15px;
    }
    
    .service-card i {
        font-size: 32px;
    }
}

.contact-form ul li i {color: #F1592A;}
.contact-form ul {display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 15px 0;}
.contact-form li {width: 24%; display: flex; justify-content: center; align-items: center; padding: 15px 0; border-radius: 5px; background: #F8F8F8;}

/*--------FORM STYLES--------------------*/

.form-flex > div {display: flex; gap: 10px; margin-bottom: 10px;}
.form-flex input {width: 100%; border: 1px #bbb solid; color: #6D6D6D; font-family: 'roboto', sans-serif; font-weight: 200; font-size: 15px; line-height: 15px; padding: 12px 0 12px 15px; border-radius: 3px;}
.form-textarea {display: flex;}
.form-textarea textarea {width: 100%; border: 1px #bbb solid; color: #6D6D6D; font-family: 'roboto', sans-serif; font-weight: 200; font-size: 15px; line-height: 15px; padding: 12px 0 12px 15px; height: 140px; border-radius: 3px;}
.contact-form form .submitselect {width: 180px; padding: 12px 0; background: #F1592A; border-radius: 3px; font-family: 'roboto', sans-serif; font-size: 16px; line-height: 16px; color: #fff; display: flex; justify-content: center; align-items: center; margin-top: 25px;}
.contact-form form .submit {width: 180px; padding: 12px 0; background: #F1592A; border-radius: 3px; font-family: 'roboto', sans-serif; font-size: 16px; line-height: 16px; color: #fff; border: none;}
.contact-form form .submitselect:hover, .contact-form form .submit:hover {background: #000; transition: .5s; cursor: pointer !important;}
.CaptchaAnswerPanel input {border: 1px #bbb solid; color: #6D6D6D; font-family: 'roboto', sans-serif; font-weight: 200; font-size: 15px; line-height: 15px; border-radius: 3px; height: 35px;}
.CaptchaWhatsThisPanel a {color: #F1592A;}
.CaptchaWhatsThisPanel a:hover {text-decoration: underline; transition: .5s;}

/*-------- FOOTER STYLES ----------------*/

footer {background: #000;}
.footer-wrap {width: 95%; margin: 0 auto; padding: 80px 0; display: flex; justify-content: space-between;}
footer p {font-family: 'roboto-condensed', sans-serif; font-size: 22px; line-height: 32px; text-transform: uppercase; font-weight: 800; color: #fff;}
footer ul {margin-top: 20px;}
footer li, footer li a {font-family: 'roboto', sans-serif; font-size: 16px; line-height: 28px; color: #fff;}
footer li {margin-bottom: 8px;}
footer li a i {font-size: 25px; margin-top: 10px;}
footer li a:hover {text-decoration: underline; transition: .5s;}
footer a:hover i {color: #F1592A; transition: .5s;}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/

.list-redesign {padding-top: 50px !important;}
.list-top-section .list-listings-count {color: #F1592A !important;}




/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1700px) {
	.contact-links a {width: auto;}
}

@media only screen and (max-width: 1500px) {
	.hero-wrap > div, .body-flex > div:first-child {width: 45%;}
	.contact-links {flex-wrap: wrap; gap: 15px;}
	.contact-links a {width: 100%;}
}

@media only screen and (max-width: 1350px) {
	.hero-wrap > div:first-child {width: 50%;}
	.hero-wrap > div:last-child {width: 40%;}
}

@media only screen and (max-width: 1250px) {
	.hero-left h1, .body-flex h2, .contact-head h4, .testimonial-head h7 {font-size: 42px; line-height: 52px;}
	.hero-left h1 span {font-size: 42px; line-height: 52px;}
	.hero-left p, .body-flex p, .contact-head p, .contact-form p, .testimonial-head p, .testimonial p, .contact-form li {font-size: 17px;}
	.body-links h3 {font-size: 30px; line-height: 40px;}
	.body-links p, .contact-links p {font-size: 16px; line-height: 28px;}
	.contact-links h5, .contact-links h3 {font-size: 22px; line-height: 32px;}
	.contact-form h6, .contact-form h2 {font-size: 25px; line-height: 35px;}
}

@media only screen and (max-width: 1200px) {
	.body-flex {flex-wrap: wrap;}
	.body-flex > div {width: 100% !important;}
	.contact-flex {flex-wrap: wrap;}
	.contact-links {flex-wrap: nowrap;}
	.slide.slick-active .testimonial {margin: 0 40px;}
	.contact-form li {width: 32%;}
}

@media only screen and (max-width: 1150px) {
	.hero-wrap {flex-wrap: wrap; gap: 50px;}
	.hero-wrap > div {width: 100% !important;}
}

@media only screen and (max-width: 1100px) {
	header {flex-wrap: wrap; width: 100%; padding: 0px;}
	header > div {width: 100%;}
	.header-left {width: 95%; margin: 0 auto; text-align: center; padding: 30px 0;}
	.header-phone {display: none;}
	.header-right > div > a {background: #000; width: 100%; display: flex; justify-content: center; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; padding: 20px 0;}
	.header-right > div > a:hover {background: #F1592A; transition: .5s;}
}

@media only screen and (max-width: 850px) {
	.contact-head, .testimonial-head {width: 100%;}
	.contact-links {gap: 50px;}
	.contact-links a {width: auto;}
	.slide.slick-active .testimonial {margin: 0 20px;}
	.contact-form li {width: 48.5%;}
}

@media only screen and (max-width: 650px) {
	.contact-links {flex-wrap: wrap; gap: 15px;}
	.contact-links a {width: 100%;}
}

@media only screen and (max-width: 600px) {
	.hero-wrap, .body-wrap, .testimonial-wrap {padding: 80px 0;}
	.hero-left h1, .body-flex h2, .contact-head h4, .testimonial-head h7 {font-size: 40px; line-height: 50px;}
	.hero-left h1 span {font-size: 40px; line-height: 50px;}
	.hero-btns a, .hero-btns button {width: 100% !important;}
	.body-links {flex-wrap: wrap;}
	.body-links > a {width: 100%;}
	.body-links h3 {font-size: 28px; line-height: 38px;}
	.contact-flex, .reel {margin-top: 40px;}
	.slide.slick-active .testimonial {margin: 0 5px;}
	.contact-hero-wrap {padding-bottom: 60px !important;}
}

@media only screen and (max-width: 550px) {
	.slide .testimonial-name {flex-wrap: wrap; gap: 15px;}
	.slide .testimonial-name p, .testimonial-name div {width: 100%;}
	.testimonial-name div {justify-content: center;}
	.slide.slick-active .testimonial i {display: flex; justify-content: center;}
	.footer-wrap {flex-wrap: wrap; gap: 30px;}
	.footer-wrap > div {width: 100%;}
	.contact-form li {width: 100%;}
}

@media only screen and (max-width: 500px) {
	.header-left {padding: 25px 0;}
	.header-left img {width: 80%; margin: 0 auto;}
	.header-right > div > a {padding: 18px 0;}
	.hero-left h1, .body-flex h2 {font-size: 38px; line-height: 48px;}
	.hero-left h1 span {font-size: 38px; line-height: 48px;}
	.body-links h3 {font-size: 25px; line-height: 35px;}
	.form-flex > div {flex-wrap: wrap;}
}

@media only screen and (max-width: 450px) {
	.hero-left h1, .body-flex h2, .contact-head h4, .testimonial-head h7 {font-size: 35px; line-height: 45px;}
	.hero-left h1 span {font-size: 35px; line-height: 45px;}
	.hero-left p, .body-flex p, .contact-head p, .contact-form p, .testimonial-head p, .testimonial p, .contact-form li {font-size: 16px; line-height: 28px;}
	.hero-btns {flex-wrap: wrap;}
	.body-flex button {width: 100%;}
	.body-links h3 {font-size: 22px; line-height: 32px;}
	.body-links p, .contact-links p {font-size: 15px; line-height: 26px;}
	.contact-links h5, .contact-links h3 {font-size: 20px; line-height: 30px;}
	.contact-form h6, .contact-form h2 {font-size: 22px; line-height: 32px;}
	.contact-form form .submitselect, .contact-form form .submit, .contact-form button {width: 100%;}
	.slide.slick-active .testimonial {margin: 0 25px;}
}

@media only screen and (max-width: 400px) {
	.header-right > div > a {padding: 15px 0;}
	.header-left {padding: 25px 0;}
}

@media only screen and (max-width: 350px) {
	.hero-left h1 {font-size: 32px; line-height: 42px;}
	.hero-left h1 span {font-size: 32px; line-height: 42px;}
	.hero-wrap, .body-wrap, .testimonial-wrap, .footer-wrap {padding: 60px 0;}
	.contact-flex, .reel {margin-top: 30px;}
	.slide.slick-active .testimonial {margin: 0 15px;}
	.contact-hero-wrap {padding-bottom: 40px !important;}
}

@media only screen and (max-width: 300px) {
	.hero-left h1 {font-size: 30px; line-height: 40px;}
	.hero-left h1 span {font-size: 30px; line-height: 40px;}
}