﻿@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
/* FONTS
 font-family: "Open Sans", sans-serif;
*/

/***** BEGIN RESET *****/
*, *::before, *::after {box-sizing: border-box;}
* {margin: 0;}
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;	
}
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
input, button, textarea, select {font: inherit;}
ol, ul {list-style: none;}
table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}
header, nav, article, footer, address { display: block;} 
/* Remove the gap between audio, canvas, iframes, 
audio, canvas, iframe, img, svg, video {vertical-align: middle;}*/

/***** END RESET *****/

/* Clearfix for floats */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}

/*-------- BASE STYLES --------*/
:root {
    --color-main:#00539b;
	--color-main-darker:#192347;
	--color-grey:#3f3f3f;
	
    --color-white:#ffffff;
	--color-dark:#000000;
    --font-headers:"Open Sans", sans-serif;
    --font-body:"Open Sans", sans-serif;
}

/*-- Text select --*/
::-moz-selection, ::selection {
    background: var(--color-main); 
    color: #fff;
    text-shadow: none;
}

a:link, a:visited, a:active {
    text-decoration:none;
}
a:hover {
    text-decoration:none;
}
hr{border: 0;
    border-top:1px solid rgba(0, 0, 0, .1);}

/*-------- BODY STYLES --------*/
body {
    font-family: var(--font-body); 
}

.page-text h1,.page-text h2,.page-text h3,.page-text h4,.page-text h5,.page-text h6 {
    font-family: var(--font-headers);
    font-weight: 600;
}

.page-text h1{
        font-size:55px
    }

.page-text h2{
    font-size:35px;
}

@media screen and (max-width: 1400px) {
    .page-text h1{
        font-size:43px
    }
}

@media screen and (max-width: 1150px) {
    .page-text h1{
        font-size:32px
    }
}

@media screen and (max-width: 600px) {
    .page-text h1{
        font-size: 25px;
    }
	.page-text h2{
    font-size:26px;
	}
}


.page-text a{
   font-family: var(--font-body);
   font-weight:400;
   color:var(--color-dark);
}

.page-text p{
	font-family: var(--font-body);
    font-weight:400;
	font-size:19px;
	margin-bottom:20px;
	
}

b, strong {
    font-weight: 700;
}

button:hover{
    cursor: pointer;
}


.page-text .btn-main{
	font-family: var(--font-body);
	color: white;
	font-weight: 400;
    font-size: 18px;
	border-radius: 7px;
	padding:10px 20px;
	transition:all ease 0.3s;
	&:hover{
	  opacity:0.7;
	  
	}
}

.bg-main{
	background:var(--color-main);
}
.text-color-main{
	color:var(--color-main);
}

.bg-grey{
	background:var(--color-grey);
}

.bg-whitesmoke{
	background:whitesmoke;
}

.home-banner-buttons{
  display: flex;
  gap: 45px;

}

.section-space{
    padding-top:100px;
	padding-bottom:100px;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}
.mx-auto{
	margin:0 auto;
}
.text-center{
	text-align:center;
}
.h-100{
	height: 100%;
}
.w-100{
	width:100%
}

/*--- HEADER STYLES ---------------------*/
.nav-top{
	background: var(--color-main);
	padding-top:5px;
	padding-bottom:5px;
}
.nav-top-info a{
	color:white;
	margin-right:15px;
	transition:all ease 0.3s;
	&:hover { color: black !important; }
}

.nav-top-info a svg{
	margin-top: 6px;
    margin-bottom: -6px;
	fill:white;
}

.nav-top-info .fa-square-facebook{
	font-size:21px;
}

nav.primary{
	background:white;
	padding-top:15px;
	padding-bottom:15px;
}

nav.primary ul li a{
	color:black;
	font-size:20px;
	font-weight:500;
	margin-left:20px;
	transition:all ease 0.3s;
}

nav.primary ul{
	text-align:right;
}

nav.primary ul li a:hover {
	color:var(--color-main);
}

#menu-button a img{
	padding-top:15px;
}



@media screen and (max-width: 1100px) {

.d-none-mobile{
	display:none;
}

}



/*--------HOME Banner -----------*/
.home-banner{
	height:700px;
	background:black;
	background-image: url(../img/bg-header.webp);
    background-size: cover;
    background-position: 42% 50%;
    /*box-shadow: rgb(0 0 0 / 48%) 0 0 0 1000000px inset;*/
}

.home-banner-text{
	max-width: 922px;
    background: rgb(0 0 0 / 51%);
    padding: 100px 55px 100px 20px;
    border-top-right-radius: 270px;
}


.home-banner h1{
	color:white;
	font-size: 46px;
    line-height: 60px;
	font-weight:bold;
}
.home-banner h2{
	color: white;
    font-size: 40px;
    line-height: 50px;
	margin-bottom: 35px;
	font-weight:500;
}

@media screen and (max-width: 1400px) {
	.home-banner{
	height:650px;
	}
}

@media screen and (max-width: 910px) {
	.home-banner h1{
	font-size: 35px;
    line-height: 40px;
	}
	
.home-banner h2{
    font-size: 30px;
	line-height: 40px;
}

}



@media screen and (max-width: 550px) {
	.home-banner{
	height:400px;
	}
	.home-banner h1{
	font-size: 22px;
    line-height: 30px;
	}
	
	.home-banner h2{
		font-size: 20px;
		line-height: 30px;
	}
	
	.home-banner-buttons {
    gap: 20px;
    flex-wrap: wrap;
	}
	
	.home-banner-text{
    padding: 30px 35px 30px 10px;
    border-top-right-radius: 110px;
}
}


/*---- Home Categories ----*/
.home-categories-inner{
	height:450px;
	padding:20px;
	border-top-right-radius: 265px;
	position:relative;
}
.home-categories-inner.cat1{
	background:black;
	background-image: url(../img/bg-cat1.jpg);
    background-size: cover;
    background-position: 50% 50%;
}

.home-categories-inner.cat2{
	background:black;
	background-image: url(../img/bg-cat2.jpg);
    background-size: cover;
    background-position: 50% 50%;
}

.home-categories-inner.cat3{
	background:black;
	background-image: url(../img/bg-cat3.jpg);
    background-size: cover;
    background-position: 50% 50%;
}

.home-categories-inner .btn-main{
	position:absolute;
	bottom:20px;
	left:20px;
	left: 2%;
    width: 95%;
	font-size: 30px;
    line-height: 35px;
}
@media screen and (max-width: 1351px) {
	.home-categories-inner .btn-main{
	font-size: 22px;
    line-height: 27px;
}
}


@media screen and (max-width: 600px) {
	.home-categories-inner .btn-main{
	font-size: 19px;
    line-height: 23px;
}

.home-categories-inner{
	height:300px;
}
}


/*--- Home Search ---*/
.home-search .w-container{
    background: var(--color-grey);
    padding: 30px 30px;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 35%);
	max-width:1300px;
}

 @media screen and (max-width:991px){
	 .home-search .w-container{
    background: var(--color-grey);
    padding: 30px 15px;
	 }
 }
  
.home-search h2{
    font-weight: 500;
	color:white;
    font-size: 30px;
    text-align:center;
	margin-bottom:20px;
}

.home-search-form{
    position:relative;
}

.home-form-icon{
    position: absolute;
    top: 15px;
    left: 15px;
    width: 64px;
    height: 28px
}

.home-form-icon:after {
    content: '';
    display: block;
    position: absolute;
    right: 35px;
    top: 30%;
    margin-top: -8px;
    height: 24px;
    border-right: solid 1px gray;
}

.home-search-form{
	width:300px;
}

.home-search-form input,.home-search-form select{
    padding-left: 48px;
    padding-top:15px;
    padding-bottom:15px;
    height:auto !important;
	width: 100%;
} 

.form-container{
	gap:50px;
	justify-content: center;
}

.home-search .btn-search{
    background: var(--color-main);
    color: white;
    padding: 17px 30px;
    border-radius: 8px;
    transition: all ease 0.3s;
    border: none;
    font-weight: bold;
}
.home-search .btn-search i{
	color:white;
}

.home-search i{
	color:var(--color-grey);
}
.home-search input::placeholder {
	color: var(--color-grey);
}

@media screen and (max-width: 800px) {

.form-container{
	flex-wrap:wrap;
	gap:20px;
}

.home-search-form{
	width: 90%;
}

}

@media screen and (max-width: 550px) {
    .home-form-icon {
        display: none;
    }

    .home-search-form .form-control {
        text-align: left;
        padding-left:7px;
        height: 55px !important;
    }
	
	.home-search .w-container {
    background: var(--color-grey);
    padding: 20px 15px;
	}
	
	.home-search-form{
	width: 95%;
}
        
}


/*--- Home stock iframe scrolling ---*/
#scroll .scrolling-wrap {
    width: 100%;
    height: 180px  !important;
    overflow: hidden;
}
#scroll .scrolling{
    width:100%;
    height:100px  !important;
     zoom:1.8;
}

#scroll .scrolling-inventory__bar {
    height: 180px;
}

#scroll .scrolling-inventory__image {
    height: 180px;
    zoom:1.8;
}

#scroll{
	margin-top:50px;
	margin-bottom:100px;
}


/*---- Home about ----*/
.home-about{
	background:whitesmoke;
}

.home-about h2{
	margin-bottom:25px;
}
.home-about-inner{
	padding-left: 50px;
    padding-right: 50px;;
}
.landing-about-main2-fullwbg {
    background-image: url(../img/bg-home-about.jpg);
    background-color: whitesmoke;
    height: 700px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
 }
 
 @media screen and (max-width:991px){
	 .home-about-inner{
		 padding:70px 40px;
		}
    .landing-about-main2-fullwbg {
        height: 400px; 
    }
 }
 
 @media screen and (max-width:550px){
    .landing-about-main2-fullwbg {
        height: 250px; 
    }
	
	 .home-about-inner{
		 padding:70px 10px;
		}
 }
 
 /*--- Home Call Us ----*/
 .home-callus{
	padding-top:100px;
	padding-bottom:100px;
	background:black;
	background-image: url(../img/bg-home-question.jpg);
    background-size: cover;
    background-position: 50% 80%;
    box-shadow: rgb(0 0 0 / 65%) 0 0 0 1000000px inset;
	
	text-align:center;
 }
 
 .home-callus h2{
	 margin-bottom:20px;
 }
 
  .home-callus h2, .home-callus p{
	  color:white;
  }
  
  .home-callus p{
	max-width: 58ch;
    margin: 0 auto 35px auto;
    font-size: 22px;
  }


/*-------- FOOTER STYLES ----------------*/
footer{
	/*background: black url(../img/footer-tractor.png) no-repeat right bottom;
	background-size: 470px;*/ /* adjust size */
	background:var(--color-main-darker);
	padding-top:100px;
	padding-bottom:100px;
}

footer h3{
	color:white;
	margin-bottom:25px;
	position:relative;
}


footer ul{
    list-style: none;
    padding:0;
	margin:0;
}
footer ul li{
	margin-bottom:10px;
}
.page-text footer ul li a{
	color:#cccccc;
	transition:all ease 0.3s;
	&:hover { color: var(--color-main); }
}

.page-text footer ul li a i{
    color: white;
	font-size:19px;
}

.footer-copyright{
	background:var(--color-grey);
	padding-top:10px;
	padding-bottom:10px;
}
.footer-copyright p{
	color:#cccccc;
}
.footer-contact li a svg{
	fill:white;
	margin-top:6px;
	margin-bottom:-6px;
}


.footer-social li a svg{
	fill:white;
	transition:all ease 0.3s;
	&:hover { fill: var(--color-secondary); }
}

/*--- INNER PAGES ---*/
.inner-pages {
	/* -- flex auto-align --
    height: 400px;
	
	<div class="w-container  h-100 d-flex align-items-center">
						<h1>ABOUT US</h1>                                                                            
	</div>
	*/
	padding-top:100px;
	padding-bottom:100px;
}

.inner-pages h1{
	color:white;
	font-size:42px;
}


/*--- INNER pages Header images ---*/
.page-inventory .inner-pages{
    background:black;
	background-image: url(../img/bg-stock.jpg);
	background-size: cover;
    background-position: 50% 50%;
	background-repeat:no-repeat;
	box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
}

.page-contact .inner-pages{
    background:black;
	background-image: url(../img/bg-contact.jpg);
	background-size: cover;
    background-position: 50% 50%;
	background-repeat:no-repeat;
	box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
}

.page-about .inner-pages{
    background:black;
	background-image: url(../img/bg-about.jpg);
	background-size: cover;
    background-position: 50% 50%;
	background-repeat:no-repeat;
	box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
}





/*--- Inner Page Contact ---*/

.page-contact-info-text{
	background: whitesmoke;
    padding: 25px 70px 24px 25px;
    border-top-right-radius: 120px;
}
.page-contact-form{
	background: var(--color-main);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 1px 2px 3px black;
}

.page-contact-form input{
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
}
.page-contact-form textarea{
    width: 100%;
    margin-bottom: 20px;
}

.page-contact-form .btn-main.bg-dark{
	color:white;
	border:0;
	border-radius:8px;
	padding: 10px 20px;
	background:black;
}

.page-contact p{
	color:white;
	margin-top:25px;
}

.page-contact h2{
	color:white;
	margin-bottom:25px;
}

.CaptchaMessagePanel,.CaptchaWhatsThisPanel a{
	color:white;
}




/*--- INNER PAGES STOCK ----*/

.inner-pages h2{
	color:white;
	font-size:42px;
}


/*----INVENTORY STYLES ----*/

.list-container-flexrow .view-listing-details-link, .faceted-search-content .selected-facets-container .selected-facet {
background: var(--color-main) !important;
}

.inner-pages .underline{
	text-decoration: none !important;
}







