﻿/***** BEGIN RESET *****/
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&family=Vazirmatn:wght@100..900&display=swap');
@import url("https://media.sandhills.com/CDN/CSS/Font-Awesome/7.0.0/webfonts/fa-brands-400.woff2");
@import url("https://media.sandhills.com/CDN/CSS/Font-Awesome/7.0.0/css/all.min.css");
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 {
  font-family: "Vazirmatn", sans-serif;
	box-sizing:border-box;
	line-height:1.5;
	font-style: normal;
}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}

.flex {display:flex;}

h1,h2,h3,h4,h5,h6 {font-family: "Sofia Sans", sans-serif;text-transform:uppercase;}
/*--- HEADER STYLES ---------------------*/
header {}


.site-header {display: flex;}

.dropbtn {
  color: #000;
	background:unset;
  padding: 17px 0;
  font-size: 16px;
  border: none;
  cursor: pointer;
	font-weight: 800;
	font-family: "Sofia Sans", sans-serif;
	text-transform:uppercase;
}

.mobile-buttons i {font-size:20px;}

.search-content input {padding: 18px 1%;border-radius: 5px;width: 90%;box-sizing: border-box;}

button#Submit {width: 100%;
   max-width: 90px;background:#fff;border:none;border-radius:5px;color: #082B7B;font-size: 18px;;}

#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background: #082B7B;
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 70px 2%;
  margin: 0 auto;
	display:flex;
	gap:10px;
	justify-content: center;
}

#myInput:focus {outline: 3px solid #ddd;}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f6f6f6;
  width: 100%;
  top: 0;
  overflow: auto;
  z-index: 600;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

button,a {cursor:pointer;}


/*---BUTTON STYLES---------------*/
a.white-button {width: 100%;}
a.white-button button{width: 100%;background:#fff;border:unset;color:#082B7B;padding:3% 4%;display:flex;justify-content: space-between;border-radius:10px;box-shadow:0 5px 5px #0005;font-family: "Sofia Sans", sans-serif;text-transform:uppercase;font-weight:800;font-size: clamp(1rem, 0.973rem + 0.1351vw, 1.125rem);transition:.3s;}

a.white-button button:hover {background:#082B7B;color:#fff;}

a.white-button-border {width: 90%;}
a.white-button-border button{width: 90%;border:#fff solid 4px;background:rgba(255,255,255,0.1);color:#fff;display:flex;justify-content: space-between;border-radius:10px;box-shadow:0 5px 5px #0005;font-family: "Sofia Sans", sans-serif;text-transform:uppercase;font-weight:800;font-size: clamp(1rem, 0.973rem + 0.1351vw, 1.125rem);margin: 8px auto 20px;align-items:center;padding:0 0 0 3%;transition:.3s;}

span.white-background {background: #fff;padding:3%;color: #000;}

 .inventory-overlay:hover button  {background:#fff;color:#000} 

a.blue-button {width: 100%;}
a.blue-button button{width: 100%;background:#082B7B;border:unset;color:#fff;padding:22px 4%;display:flex;justify-content: space-between;border-radius:10px;box-shadow:0 5px 5px #0005;font-family: "Sofia Sans", sans-serif;text-transform:uppercase;font-weight:800;font-size: clamp(1rem, 0.973rem + 0.1351vw, 1.125rem);transition:.3s;}

a.blue-button button:hover {background:#000;}
/*---BODY--------------------------------*/


.hero-image {background: url("../siteart/homepage.webp");background-color:#000;
	background-repeat: no-repeat;background-size: cover;position:relative;aspect-ratio: 12/6;}

.hero-overlay {color: #fff;width: 100%;height: 100%;background: #0005;display: flex;flex-direction: column;align-items: center;justify-content: center;line-height:.9;}

.sub-page.hero-image .hero-overlay {background: #0009;}

.hero-overlay h1 {font-size: clamp(2.375rem, 0.8615rem + 7.5676vw, 9.375rem);font-weight:900;}

.sub-page.hero-image .hero-overlay h1 {font-size: clamp(1.875rem, 1.0642rem + 4.0541vw, 5.625rem);font-weight:900;}

.hero-overlay p {font-size: clamp(1.25rem, 0.777rem + 2.3649vw, 3.4375rem);font-family: "Sofia Sans", sans-serif;text-transform:uppercase;}

.hero-content {text-align: center;position: relative;top: -13%;}
.hero-content .button.flex{margin-top:10px;gap: 20px;}

.hero-content .top {display: flex;width: 100%;justify-content: space-between;align-items: center;}

.line hr {border: none;height: 7px;background-color: #fff!important;lin-height:0;}
.line {width:30%;}


.sub-page.hero-image {height: 380px;background-position: 0;width: 100%;}

.sub-page.hero-image .hero-content{top:unset;}
/*--------SEARCH HOMEPAGE STYLES--------------------*/
section.search-section {position: absolute;bottom: -80px;margin: 0 auto;width: 90%;background:#082B7B;left: 0;right: 0;color:#fff;padding: 2% 0 3%;border-radius: 10px;}

section.search-section .wrapper{width: 90%;margin:0 auto;}

form.search input {box-sizing:border-box;width:100%;padding:1%;border-radius: 5px;border:unset;}

form.search {display:flex;gap:20px;}

.search-section h2 {font-size: clamp(1.25rem, 0.9797rem + 1.3514vw, 2.5rem);margin-bottom: 30px;}

.search-section button#Submit {width: 100%;max-width: 7%;border-radius: 5px;background:#fff;color:#082B7B;font-size:20px;border:unset;}


/*--------ABOUT STYLES--------------------*/

section.about-section {background:url("../siteart/background.png");width:100%;height:100%;background-repeat:no-repeat;background-size:cover;padding: 150px 0 10%;border-bottom: solid #082B7B 7px;}

.about-section .wrapper.flex {width: 90%;margin: 0 auto;justify-content: space-between;gap: 90px;}

.about-section h2 {font-weight:900;font-size: clamp(1.25rem, 1.1149rem + 0.6757vw, 1.875rem);line-height:1.1;}

.about-section p{margin-bottom:10px;}

.about-section .sec-1 {width:100%;max-width: 50%;}

.about-section .sec-2 {width: 100%;max-width: 50%;display: flex;flex-direction: column;justify-content: center;gap: 13px;}

.about-section .line hr {background:#082B7B !important;margin-bottom:20px;}
.about-section .line {width: 20%;}

/*--------CONTACT STYLES--------------------*/

.bullet-section i {color:#082B7B;}
.bullet-section p {padding-bottom:5px;}
.bullet-section {padding:10px 0;}

.contact.button.flex {margin-top:20px;flex-direction:column;gap:10px;}

.map {box-shadow: 0 0 15px #0005;}
.map {border-top: solid #082B7B  20px;width: 100%;height: 100%;}

section.contact.about-section {padding: 5% 0;}

/*--------INVENTORY SECTION STYLES--------------------*/

.inventory-heading .line hr {background:#082B7B !important;margin-bottom:20px;}
.inventory-heading .line {width: 10%;}

.inventory-heading h2 {font-weight:900;font-size: clamp(1.25rem, 1.1149rem + 0.6757vw, 1.875rem);line-height:1.1;}

.inventory-cat img	{object-fit: cover;width: 100%;height: 100%;transition:.3s;}

.inventory-cat:hover img {transform:scale(1.1);}

.inventory-cat {width: 100%;max-width: 100%;overflow: hidden;height: 440px;border-radius:10px;position: relative;}

.inventory-overlay {position: absolute;top: 0;width: 100%;height: 100%;background: #0006;display: flex;align-items: flex-end;justify-content: center;}

.inventory-section .wrapper.flex {width: 90%;margin: 0 auto;gap: 7px;padding: 6% 0 10%;flex-direction: column;}
.inventory-section .wrapper.flex .inventory-categories{justify-content: space-between;gap: 20px;display: flex;}


/*--------FORM STYLES--------------------*/




/*-------- FOOTER STYLES ----------------*/
footer{background:#082B7B;color:#fff;}
.footer-categories a {color:#fff;transition:.3s}

.footer-categories a:hover {box-shadow: inset 0 -5px 0 0 #fff;padding-bottom: 5px;}

.top-cat ul,.bottom-cat ul {display:flex;flex-direction:row;}

.top-cat ul li a,.bottom-cat ul li a,.footer p {font-family: "Sofia Sans", sans-serif;text-transform:uppercase;font-weight:800;}

.top-cat ul li a{font-size: clamp(1rem, 0.9324rem + 0.3378vw, 1.3125rem);}
.bottom-cat ul li a{font-size: clamp(1rem, 0.973rem + 0.1351vw, 1.125rem);}

.footer-categories .wrapper.flex {display:flex;flex-direction:column;}

.footer .wrapper.flex {align-items: center;justify-content: space-around;padding: 3% 0;}

.top-cat ul {justify-content: space-between;width: 100%;}
.top-cat {width: 100%;border-bottom: solid 3px #fff;padding-bottom: 1%;margin-bottom: 2%;}

.bottom-cat ul {width: 100%;justify-content: end;gap: 30px;}
.bottom-cat {width: 100%;}

.footer-logo img{margin-bottom:10px;width:100%;height:100%;max-width:300px;}

.footer-categories {width: 50%;}
/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.ground-bcrumbs {padding-top: 3%;}

.column3.left ul li a {color:#000;}


a.view-listing-details-link.des-view-listingDetails.template-branded-button,.list-redesign .widget-container .listing-widgets .shipping a,.list-content .listing-widgets .Currency a{background:#082B7B !important;color:#fff !important;}


/*---------- RESPONSIVE STYLES ----------*/
@media only screen and (max-width:1800px) {
	.footer-categories {width: 60%;}
}


@media only screen and (max-width:1300px) {
	.footer-categories {width: 66%;}
	
}



@media only screen and (max-width:1140px) {
	.footer .wrapper.flex {flex-direction: column;}
	.footer-categories {width: 90%;margin-top:30px;}
	.bottom-cat ul {justify-content: center;gap: 30px;}
	.inventory-section .wrapper.flex .inventory-categories{flex-wrap: wrap;}
	
/*	.hero-image {height:603px;}*/
	
	
/*	section.search-section {bottom: -120px;}*/
	
	.search-section h2 {margin-bottom: 20px;}
}

@media only screen and (max-width:1000px) {
	.about-section .wrapper.flex {flex-direction: column;gap: 30px;}
	.about-section .sec-1,.about-section .sec-2 {max-width: 100%;}
}


@media only screen and (max-width:900px) {
	.about-section {padding: 160px 0 10%;}
	.about-section .wrapper.flex {flex-direction: column;}
	.about-section .sec-1,.about-section .sec-2 {max-width: 100%;}
	.bottom-cat ul {gap:10px;}
	.hero-content .line {width: 24%;}
	.hero-content .button.flex {flex-direction: column;}
	.hero-image {aspect-ratio: 8/6;}
	form.search {flex-direction: column;}
	form.search input {padding: 3% 2%;}
	.search-section button#Submit {max-width: 100%;padding: 3%;}
	section.contact.about-section {padding: 10% 0;}
	.sub-page.hero-image {height: 220px;}
	.map {height: 420px;}
}

@media only screen and (max-width:722px) {
	.top-cat ul {flex-direction: column;gap: 20px;}
	.top-cat {padding-bottom: 3%;margin-bottom: 3%;}
	.bottom-cat ul {flex-direction: column;gap: 20px;}
}


@media only screen and (max-width:600px) {
	.hero-image {aspect-ratio: 6/6;}
	section.search-section {padding: 30px 0;bottom: -130px;border-radius: 5px;}
	.search-content input {padding: 14px 1%;}
	#myInput {padding: 37px 2%;}
	form.search input {padding: 6% 2%;}
	.search-section h2 {text-align: center;}
}

@media only screen and (max-width:500px) {
	.line {width: 18%;}
}




