﻿/***** 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 --------

*/

:root {
    --white: #ffffff;
    --blue: #005496;
    --yellow: #ffcb05;
    --off-white: #f7f7f7;
    --black: #000000;
    
/* REBRAND NEW COLORS */
    --navy: #183341;
    --cream: #f8f5ed;
    --light-blue: #cfdfe5;
    --md-blue: #a0afbd;
    --red: #ed1d24;
    
/* REBRAND NEW FONTS */
    --
}
/*-------- FONTS --------*/

h1, h2, h3, h4 {
    font-family: 'Inter', 'Arial', sans-serif;
}
.heading-lg {
    font-family: 'Slate', sans-serif;
    font-size: clamp(25px, 5vw, 25px);
    font-weight: 600;
    text-transform: capitalize;
}

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: var(--cream);
    text-shadow: none;
}
::selection {
    background: #000;
    color: var(--cream);
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {
	background: var(--cream);
}

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: 'Barlow', sans-serif !important;}

/*--- NAV STYLES ---------------------*/
header {
    background: var(--navy) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
/*    height: inherit !important;*/
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	position: relative;
	z-index: 800;
}
.header-fb {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: var(--navy);
    width: 95%;
    margin: 0 auto; 
	padding-top: 20px;
}
.header-logo {
    width: clamp(300px, 40vw, 500px) !important;
}
.header-contact {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
	flex-wrap: wrap;
}
.header-contact a {
    font-family: 'Inter', 'Arial', sans-serif;
    color: var(--cream);
    text-decoration: none;
    border-bottom: 2px var(--navy) solid;
    transition: transform 0.3s ease, color 0.3s ease;
}
.header-contact a:hover {
    color: var(--red);
    transition: .5s;
}
.header-menu {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-self: flex-end;
    padding: 0 0 20px 0;
}
.header-menu nav ul li a {
    color: var(--cream) !important;
    border-bottom: 2px var(--navy) solid;
}
.header-menu nav ul li a:hover {
    border-bottom: 2px var(--red) solid;
    transform: translateY(-3px);
}

@media only screen and (max-width: 1240px) {
    header {
        height: inherit;
    }
    .header-fb {
        flex-direction: column;
        justify-content: center;
        align-content: center;
        padding: 0;
    }
    .header-menu {
        display: none;
        align-self: center;
        padding: 0;
        gap: 0;
    }
}
@media only screen and (max-width: 400px) {
    .header-contact {
        flex-direction: column;
        text-align: center !important;
        align-content: center;
        padding: 0;
    }
}
/*--- HEADER STYLES ---------------------*/
/* 
header {width: 95%; margin: 0 auto; padding: 30px 0;}
header section {display: flex; align-items: center; justify-content: space-between; gap: 100px;}
header section > div {width: 100%; text-align: center;}
header section .shadow-box {background: #F0F0F0; width: 340px; margin: 0 auto; padding: 20px 0; margin-bottom: 30px;}
header section .shadow-box p {font-size: 20px; color: var(--navy); line-height: 30px; font-weight: 600;}
header section a {color: var(--navy); font-size: 20px; line-height: 30px; font-weight: 600; border-bottom: 2px transparent solid; font-family: 'Barlow', sans-serif !important;}
header section .header-col-1 a {font-size: 25px !important;}
header section a:hover {border-bottom: 2px var(--navy) solid; transition: .5s;}
header section .header-logo p {font-size: 20px; line-height: 20px; background: var(--navy); padding: 10px 0; color: var(--cream); font-weight: 500; width: 400px; margin: 0 auto; margin-top: 10px; font-family: 'Barlow', sans-serif !important;}
header section .header-logo a:hover {border-bottom: none !important;}
*/

/*---BODY--------------------------------*/
/*---DEFAULT---*/
/*-------- POP UP --------*/
*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.overlay:target:before {
    display: none;
}
.popup {
    background: #fff;
    background-size: cover;
    background-position: 25% 80%;
    color: #000;
    font-size: 22px;
    font-weight: 300;
    width: 80%;
    max-width: 600px;
    position: fixed;
    top: 6vw;
    left: 0;
    right: 0;
    float: none;
    margin: 0 auto;
    text-align: left;
    z-index: 99999999;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    box-shadow: none;
	border-radius: 5px;
}

.popup .close {
   position: absolute;
        top: 40px;
    right: 30px;
    transition: all 0.2s;
    font-size: 40px;
    line-height: 40px;
    font-weight: bold;
    text-decoration: none;
    color: #e41515 !important;
    padding: 5px 10px 0px 10px;
    background: none;
    border: 1px solid #e41515;
}
.popup .close:hover {
  background: #e41515; color: #fff !important;}
.popup .content {
  max-height: 60%;
  overflow: auto;
}

.popup a {
    color: #fff !important;
}
.popup a:hover {
    text-decoration: none;
    color: #e41515;
}
.pop-text {
    padding: 50px;
    background: #fff;
    text-align: center;
    margin: 0 auto;
    width: 100%;
	margin-top: 50px;
	border-radius: 5px;
}
.pop-text img {
	width: 100%;
}
.pop-text p { 
	font-size: 20px;
	line-height: 30px;
	margin: 20px 0 20px 0;
}
.pop-text button {
	-webkit-transition: all .6s ease-in-out; background: var(--navy); color: var(--cream); border: none; letter-spacing: 2px; font-size: 16px; padding: 13px 30px 12px 30px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; margin: 5px; text-transform: uppercase; font-style: normal; border-radius: 50px;
}
.pop-text button:hover {
	background: #000; transition: .8s;
}

.hero {
    position: relative;
	background-image: url("/siteart/new-hero-bkgrd.jpg");
    background-position: center;
    background-size: cover;
}
.hero-text {
/*    height: 40vh;*/
    padding: 150px 0 50px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.hero-text img {padding-bottom: 100px;}
.hero-overlay {background: rgba(24,51,65,0.60);}
.hero-text h1 {
    color: var(--cream);
    text-align: center;
}
#quick-links {background: url("/siteart/hero-bkgrd.jpg") no-repeat; background-position: center; background-size: cover;}
.ql-overlay {background: rgba(0,84,150,0.80);}
.ql-content {width: 80%; margin: 0 auto; padding: 120px 0; display: flex; justify-content: space-between; gap: 30px;}
.ql-content a {width: 100%; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.ql-content a:hover .link-overlay {background: rgba(214,169,0,0.85); transition: .5s;}
#inventory-link {background: url("/siteart/inventory-bkgrd.jpg") no-repeat; background-position: center; background-size: cover;}
#financing-link {background: url("/siteart/financing-bkgrd.jpg") no-repeat; background-position: center; background-size: cover;}
#contact-link {background: url("/siteart/contact-bkgrd.jpg") no-repeat; background-position: center; background-size: cover;}
.link-overlay {background: rgba(255,203,5,0.85); padding: 80px 0; text-align: center;}
.link-overlay h1, .link-overlay h2, .link-overlay h3 {color: var(--cream); font-size: 35px; text-transform: uppercase; line-height: 35px;}
.link-overlay hr {width: 90px; border: 2px var(--cream) solid;}

#brands {text-align: center; width: 95%; margin: 0 auto; padding: 65px 0;}
#brands h4 {color: var(--navy); font-size: 35px; font-weight: 600; line-height: 40px;}
#brands div {display: flex; justify-content: center; gap: 80px; align-items: center; margin-top: 20px;}
#brands div a {-webkit-transition: .4s ease all; -moz-transition: .2s ease all; -o-transition: .2s ease all; transition: .2s ease all;}
#brands div a:hover {transform: translateY(-5px); -webkit-transition: .4s ease all; -moz-transition: .2s ease all; -o-transition: .2s ease all; transition: .2s ease all;}
#brands img {width: 100% !important;}

/*---CONTACT---*/
#contact-page h1 {font-size: 35px; color: var(--navy);}
#contact-page {width: 95%; margin: 0 auto; padding: 50px 0;}
#contact-page p {font-size: 18px; margin-top: 10px; display: flex; align-items: center;}
#contact-page p a {color: var(--navy);}
#contact-page p a:hover span {border-bottom: 1px var(--navy) solid;}
#contact-page-map {width: 95%; margin: 0 auto; padding-bottom: 50px;}

/*---FINANCING---*/
#financing-page {width: 95%; margin: 0 auto; padding: 50px 0;}
#financing-page h1 {font-size: 35px; color: var(--navy); margin-bottom: 5px; font-family: 'Slate', sans-serif;}
#financing-page p, .credit-app p {line-height: 24px;}
.credit-app p {margin-top: 10px;}
#financing-page form {margin-top: 20px;}
#financing-page .form-flex {display: flex;  gap: 10px; flex-wrap: wrap;}
#financing-page input {width: 48%; height: 35px; padding-left: 15px; font-size: 14px; font-family: 'Arial', sans-serif; border: 1px #bbb solid;}
#financing-page select {width: 49.3%; height: 40px; padding-left: 10px; font-size: 14px; font-family: 'Arial', sans-serif; color: #6E6E6E; border: 1px #bbb solid;}
#financing-page .flex-select { margin-top: 10px; margin-bottom: 10px;}
#financing-page h2 {color: var(--navy); margin: 25px 0 15px 0; font-size: 25px;}
#financing-page .submitselect {border: 2px var(--navy) solid; color: var(--navy); font-size: 18px; font-weight: 600; width: 180px; display: flex; justify-content: center; padding: 12px 0 10px 0; margin-top: 25px;}
#financing-page .submit {border: 2px var(--navy) solid; color: var(--navy); font-size: 18px; font-weight: 600; width: 180px; padding: 12px 0 10px 0; height: auto !important;}
#financing-page .submitselect:hover, #financing-page .submit:hover, .credit-app button:hover {background: var(--navy); color: var(--cream);}
.CaptchaWhatsThisPanel a {color: var(--navy); border-bottom: 1px var(--navy) solid;}
.credit-app button {border: 2px var(--navy) solid; color: var(--navy); font-size: 18px; font-weight: 600; width: 200px; padding: 12px 0 10px 0; margin-top: 20px;}
.credit-app p a {color: var(--navy); border-bottom: 1px transparent solid;}
.credit-app p a:hover {border-bottom: 1px var(--navy) solid;}

/*---ABOUT---*/
#associations {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#associations h2, #associations h1 {
    font-family: 'Slate', sans-serif;
    font-size: clamp(20px, 1.5vw, 30px);
    font-weight: 400;
    color: var(--navy);
	margin: 0;
}
#associations-logos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    algin-items: center;
    gap: 50px;
    width: 60%;
    padding-top: 50px;
}
#associations-logos a img {
    height: clamp(50px, 5vw, 200px);
/*    max-height: 200px;*/
}
#associations-logos div {
    display: flex;
    flex-wrap: none;
    flex-direction: row;
    gap: 50px;
}
#associations-logos a {-webkit-transition: .4s ease all; -moz-transition: .2s ease all; -o-transition: .2s ease all; transition: .2s ease all;}
#associations-logos a:hover {
    transform: translateY(-5px);
    -webkit-transition: .4s ease all; 
    -moz-transition: .2s ease all; 
    -o-transition: .2s ease all; 
    transition: .2s ease all;
}

/*---COMING SOON---*/
.coming-soon p {text-align: center;}
.coming-soon button {background: #183341; width: 250px; padding: 12px 0 10px 0; color: #fff; font-size: 20px; font-weight: 500; font-family: 'Barlow', sans-serif; margin-top: 20px; border: none; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.coming-soon button:hover {background: #ED1D24; transition: .5s;}
.coming-soon h2 {margin: 25px 0 0px 0 !important;}
.coming-soon hr {border: 1px #ED1D24 solid; width: 50px; margin: 15px 0 20px 0;}

/*---SHOWROOM---*/
.showroom-links {padding: 20px 0 !important; width: 100% !important;}

/* NEWS */
.news-page h2{
	color: #183341;
	margin: 25px 0 15px 0;
	font-size: 25px;
}
.news-page button {background: #183341; width: 250px; padding: 12px 0 10px 0; color: #fff; font-size: 20px; font-weight: 500; font-family: 'Barlow', sans-serif; margin-top: 20px; border: none; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.news-page button:hover {background: #ED1D24; transition: .5s;}


/*--------FORM STYLES--------------------*/
/*--HOME CATEGORY CONTAINER--*/
.cat-container {display:grid;grid-template-columns: repeat(4, 1fr);gap: 2px;padding-top: 2px;background-color: var(--navy)!important;}
.cat img {width: 100%;height:100%;object-fit: cover;filter: grayscale(100%);transition: .5s ease-in-out;}
.cat {position:relative;max-height: 400px;}
.overlay {position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:flex;align-items:center; background: rgba(24,51,65,0.60);}
.cat:hover img {filter: grayscale(0%);}
.cat-wrap {width: 80%; margin: 0 auto;}
.cat-wrap h2 {	text-shadow: 2px 4px 3px rgba(0,0,0,0.3);font-size: 28px;letter-spacing: 2px; color:var(--cream);}
button.cat-btn {   -webkit-transition: all .6s ease-in-out;
       background: none;
    color: var(--cream);
    border: 1px solid var(--cream);
    letter-spacing: 2px;
    font-size: 16px;
    padding: 12px 30px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    margin: 5px;
    text-transform: uppercase;
    font-style: normal;
    border-radius: 50px;}
.cat:hover button.cat-btn {background: var(--cream);border-color: var(--cream);color:var(--navy);}

.cat hr {
    margin: 20px 0;
    width: 175px;
    border: none;
    height: 5px;
    background: var(--red);
}

/*-------- SEARCH BOX STYLES--------------------*/

.search-inv {
/*    position: absolute;*/
/*    top: 25vh;*/
/*    justify-self: center;*/
/*    align-self: center;*/
    display: flex;
	justify-content: center; 
	align-items: center;
	gap: 70px; 
	flex-wrap: wrap; 
	padding-top: 10px;
	padding-bottom: 30px;
    z-index: 50;
    width: 100%;
}

.search-box {
  background-color: var(--cream); 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); 
  padding: 20px;
  bottom: -40px;
  z-index: 10;
  margin-top: 20px;
  width: 35%;
}


.searchbox-item{
	background-color: #efefef;
	padding: 5px 15px;

input,select{
    border: none;
    background-color: transparent;
    font-family: 'Barlow', sans-serif !important;
    color: var(--color-primary);
    font-size: 16px;
   
    box-sizing: content-box;
    width: 100%;
    outline: none;
}

input::placeholder{
    color: #515151;
}

input#keywords{
    color: green !important;
}

label{
    color: #00000075;
    font-size: 12px;
   font-family: 'Barlow', sans-serif !important;
}

}

.searchbox1{
    width: 25%;
}

.searchbox2{
    width: 55%;
}

.search-box-container {
  justify-content: space-between;
  align-items: center;
  display: flex;
}


.search-box-container button {
	border: none !important;
	background-color: var(--navy) !important;
	padding: 12px 40px;
	font-weight: 700;
	transition: background-color 0.3s ease;
	cursor: pointer;
}


.search-box-container button:hover {
  background-color: var(--red)!important; /* darker blue on hover */
}


.search-box-container button a {
  color: var(--cream);
  font-family: 'franklin-gothic-std-cond', sans-serif;
  font-style: normal;
  font-size: 18px;
  padding: 15px 30px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}


.finance-btn {
	background-color: var(--md-blue);
	color: var(--navy);
	font-family: 'franklin-gothic-std-cond', sans-serif;
	font-style: normal;
	font-size: 25px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 29px 80px;
	text-decoration: none;
/*	border: 5px var(--cream) solid;*/
	cursor: pointer;
	display: flex;
	margin-top: 20px;
	justify-content: center;
	align-items: center;
	text-align: center;
	transition: background-color 0.3s ease;
	line-height: 1.2;
}
.finance-btn:hover {
  background-color: var(--red); /* darker shade of blue */
}

.finance-btn-wrapper {justify-content: center;}

.bullet-list {line-height: 24px;margin-left:35px;}

/*-------- FOOTER STYLES ----------------*/
footer{background: var(--navy); font-family: 'Barlow', sans-serif !important;}
.footer-wrap {width: 70%; margin: 0 auto; display: flex; padding: 50px 0; align-items: center; justify-content: space-between;}
.footer-wrap button {border: 2px var(--cream) solid; width: 350px; padding: 10px 0; color: var(--cream); font-size: 25px; font-weight: 500; font-family: 'Barlow', sans-serif; background: none;}
.footer-wrap button:hover {background: var(--cream); border: 2px var(--cream) solid; color: var(--navy);}
.footer-wrap > div {width: 100%; text-align: center;}
.footer-wrap hr {border: 1px rgba(255,255,255,0.50) solid; height: 50px; width: 0px;}
.footer-wrap p {color: var(--cream); font-size: 20px; font-weight: 500; line-height: 25px; font-family: 'Barlow', sans-serif !important;}
.footer-wrap a p {border-bottom: 1px transparent solid; width: 220px; margin: 0 auto;}
.footer-location p:first-child {margin-bottom: 10px;}
.footer-location a:hover p {border-bottom: 1px var(--cream) solid; transiton: .5s}

.footer-bottom {background:#f8f5ed; color:#183341; display:flex; justify-content:center; padding:10px 0; font-family: 'Barlow', sans-serif !important;}
.footer-bottom a {color:#183341; text-align:center; font-weight:600;}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/







/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1500px) {
	header section .shadow-box p, header section a {font-size: 18px; line-height: 28px;}
	header section .header-logo p {font-size: 18px; line-height: 18px;}
	header section .shadow-box, header section .header-logo p {width: 100%;}
	header section .header-col-1 a {font-size: 22px !important;}
	.cat-wrap h2 {font-size: 25px;}
}
@media only screen and (max-width: 1400px) {
	header section .shadow-box p, header section a {font-size: 16px; line-height: 26px;}
	header section .header-logo p {font-size: 16px; line-height: 16px;}
	.footer-wrap {width: 80%;}
	header section .header-col-1 a {font-size: 20px !important;}
}
@media only screen and (max-width: 1300px) {
	#financing-page input {width: 47.5%;}
	#financing-page select {width: 49%;}
}
@media only screen and (max-width: 1250px) {
	.cat-wrap h2 {font-size: 20px;}
}
@media only screen and (max-width: 1240px) {
	header section .shadow-box {margin-bottom: 0px;}
	header {width: 100%; padding-bottom: 0px;}
	header section {width: 95%; margin: 0 auto;}
	.ql-content {width: 90%;}
	#brands div img {width: 200px;}
	.footer-wrap {width: 90%;}
	.footer-wrap hr {display: none;}
/*    .header-menu {align-self: flex-end;}*/
}
@media only screen and (max-width: 1200px) {
	#financing-page input {width: 47%;}
	#financing-page select {width: 48.8%;}
}
@media only screen and (max-width: 1150px) {
	header section {gap: 50px;}
	
		
	.searchbox1,.searchbox2{
        width: 100%;
        box-sizing: border-box;
    }


    .search-box-container {
     button {
        width: 100%;

    }

}


.search-box{
    position: static;
    width: 95%;
    box-sizing: border-box;
    margin-top: 50px;
}
	
.search-inv {gap: 20px;
}
@media only screen and (max-width: 1100px) {
	.cat-container{grid-template-columns: repeat(2, 1fr);}
	.cat-wrap {
        width: 90%;
        margin: 0px auto;
    }
	.cat-wrap h2 {font-size: 28px;}
}
@media only screen and (max-width: 1000px) {
	.footer-wrap button {width: 300px;}
	#financing-page input {width: 46.5%;}
	#financing-page select {width: 48.5%;}
}
@media only screen and (max-width: 950px) {
	.header-col-1 a {display: none;}
	header section .shadow-box {display: none;}
	.ql-content {width: 95%;}
	.link-overlay h1, .link-overlay h2, .link-overlay h3 {font-size: 30px; line-height: 30px;}
	.link-overlay hr {width: 75px;}
	.ql-content {gap: 20px;}
	#brands h4 {font-size: 30px; line-height: 35px;}
	#brands div img {width: 180px;}
	.footer-wrap button {font-size: 20px; width: 250px;}
	.footer-wrap p {font-size: 18px;}
	#brands div {gap: 50px;}
}
@media only screen and (max-width: 900px) {
	.footer-wrap button {width: 300px;}
	#financing-page input {width: 46%;}
	#financing-page select {width: 48.3%;}
	.hero-text img {width: 80%; margin: 0 auto;}
}
@media only screen and (max-width: 850px) {
	.footer-wrap button {width: 300px;}
	.footer-wrap {flex-wrap: wrap; gap: 25px;}

}
@media only screen and (max-width: 800px) {
	.header-logo img {width: 200px;}
	header section .header-logo p {width: 300px;}
	header {padding-top: 20px;}
	.ql-content {gap: 10px;}
	.link-overlay h1, .link-overlay h2, .link-overlay h3 {font-size: 25px; line-height: 25px;}
	.link-overlay hr {width: 60px;}
	#brands h4, #financing-page h1, #contact-page h1 {font-size: 25px; line-height: 30px;}
	#brands div img {width: 100%;}
	#contact-page p {font-size: 16px;}
	#financing-page p {font-size: 15px;}
	#financing-page input {width: 45.5%;}
	#financing-page select {width: 48%;}
	#financing-page h2 {font-size: 22px;}
	#financing-page .submitselect, #financing-page .submit {font-size: 16px; width: 150px;}
	.credit-app button {font-size: 16px; width: 180px;}
	#associations h1 {text-align: center;}
}
@media only screen and (max-width: 700px) {
	#financing-page input {width: 45%;}
	#financing-page select {width: 47.8%;}
	.cat-wrap h2 {font-size: 23px;}
	#brands div {flex-wrap: wrap;}
}
@media only screen and (max-width: 650px) {
	.ql-content {flex-wrap: wrap;}
	.link-overlay h1, .link-overlay h2, .link-overlay h3 {font-size: 30px; line-height: 30px;}
	.link-overlay {padding: 70px 0;}
	.ql-content {padding: 80px 0;}
	#brands h4 {font-size: 30px; line-height: 35px;}
	#brands div {margin-top: 40px; gap: 40px;}
	#brands div a {width: 44%;}
}
@media only screen and (max-width: 600px) {
	#financing-page input {width: 100%;}
	#financing-page select {width: 100%;}
	.popup {width: 90%;}
}
@media only screen and (max-width: 550px) {
	.cat-container {grid-template-columns: repeat(1, 1fr);}
	.cat-wrap {
        width: 90%;
        margin: 0px auto;
    }
}
@media only screen and (max-width: 450px) {
	.pop-text {padding: 50px 30px;}
	.pop-text p {font-size: 18px;}
	header section {display: block;}
	
	.search-box-container{

button{
    background-color: var(--navy) !important;
	padding: 12px 4px;
		}}}
	
@media only screen and (max-width: 400px) {
	.footer-wrap button {width: 100%;}
}
@media only screen and (max-width: 350px) {
	.header-logo img {width: 180px;}
	header section .header-logo p, .coming-soon button, .coming-soon a {width: 100%;}
    #associations-logos div {flex-direction: column;}
	.popup {width: 95%;}
}