﻿@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
/* FONTS
  font-family: "Inter", sans-serif;
  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:#009ed6;
	--color-darkblue:#0142a6;
	
    --borderad:7px;
    --font-headers:"Inter", 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); 
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-headers);
    font-weight: 600;
}

h1{
        font-size:55px
    }

h2{
    font-size:35px;
}

@media screen and (max-width: 1400px) {
    h1{
        font-size:43px
    }
}

@media screen and (max-width: 1150px) {
    h1{
        font-size:32px
    }
}

@media screen and (max-width: 600px) {
    h1{
        font-size: 25px;
    }
	h2{
    font-size:26px;
}
}


p,a{
   font-family: var(--font-body);
   font-weight:400;
   color:var(--color-dark);
}
p{
	font-size:19px;
	margin-bottom:20px;
}
@media screen and (max-width: 550px) {
	p{
	font-size:17px;
	margin-bottom:15px;
}
}

b, strong {
    font-weight: 700;
}

button:hover{
    cursor: pointer;
}


.title h3,.title h1{
	color:white;
	font-size:40px;
	z-index: 1;
	position:relative;
	display:table;
	margin:0 auto;
}
.title h3::after,.title h1::after {
    content: "";
    position: absolute;
    top: 5px;
    left: -20px;
    width: 258px;
    height: 51px;
    background: url("../img/icon-forkdblue.png") no-repeat;
	background-size: 258px 51px;
    z-index: -1;
}

.title.tblue h3::after {
    content: "";
    position: absolute;
    top: 5px;
    left: -20px;
    width: 258px;
    height: 51px;
    background: url("../img/icon-forklblue.png") no-repeat;
	background-size: 258px 51px;
    z-index: -1;
}
	


.btn-main{
	font-family: var(--font-body);
	color: black;
	font-weight: 400;
    font-size: 18px;
	border-radius: 7px;
	padding:10px 20px;
	transition:all ease 0.3s;
	&:hover{
	  opacity:0.7;
	  
	}
}

.btn-main.bg-dblue{
	color:white;
}

.home-banner-buttons{
  display: flex;
  gap: 45px;

}

.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%
}

.color-mainblue{
	color:var(--color-main);
}
.bg-mainblue{
	background:var(--color-main);
}

.color-dblue{
	color:var(--color-darkblue);
}

.bg-dblue{
	background:var(--color-darkblue);
}

.bg-black{
	background:black;
}



@media screen and (max-width: 550px) {
	.title h3{
		font-size:30px;
	}
	
	.title h3::after {
		content: "";
		left: -15px;
		width: 180px;
		height: 41px;
		background-size: 180px 41px;
	}
}


/*--- HEADER STYLES ---------------------*/
.nav-top{
	background: var(--color-main);
	padding-top:5px;
	padding-bottom:5px;
}
.nav-top-info a{
	color:black;
	margin-right:15px;
	transition:all ease 0.3s;
	&:hover { color: white !important; }
}

.nav-top-info a svg{
	margin-top: 6px;
    margin-bottom: -6px;
	fill:black;
	
}


nav.primary{
	background:black;
	padding-top:10px;
	padding-bottom:10px;
}

nav.primary ul li a{
	color:white;
	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);
}

.nav-top-social{
	padding-top:3px;
}

.nav-top-social a{
	font-size:24px;
	margin-left:4px;
	transition:all ease 0.3s;
	&:hover { color: white !important; }
}


@media screen and (max-width: 550px) {
.nav-top-info a span{
	display:none;
}

}

/*--------HOME Banner -----------*/
.home-banner{
	height:850px;
	background:black;
	background-image: url(../img/bg-home-banner.jpg);
    background-size: cover;
    background-position: 50% 50%;
    box-shadow: rgb(0 0 0 / 80%) 0 0 0 1000000px inset;
}


.home-banner h1{
	color:white;
	padding-bottom:10px;
	font-size: 75px;
    line-height: 80px;
}
.home-banner h2{
	
	padding-bottom:40px;
	font-size: 63px;
    line-height: 70px;
}

.flex-grow-1 {
flex-grow: 1;
}

.home-banner-text{
	margin:0 auto;
}

.home-banner-text img{
	margin-left:-200px;
	width: 850px;
	flex-shrink: 1;
}

@media screen and (max-width: 1350px) {
	.home-banner{
	height:650px;
	}

	.home-banner-text img{
	margin-left: -120px;
    width: 650px;
}

.home-banner h1{
	font-size: 60px;
    line-height: 68px;
}

.home-banner h2{
	font-size: 50px;
    line-height: 58px;
}

}


@media screen and (max-width: 1100px) {
	    .home-banner-text img {
        margin-left: -56px;
        width: 450px;
		}
		
	.home-banner h1{
	font-size: 45px;
    line-height: 50px;
}

.home-banner h2{
	font-size: 37px;
    line-height: 43px;
}
		
}



@media screen and (max-width: 840px) {
	.home-banner-text img {
        margin-left: 0;
        width: 350px;
		}
		
	.home-banner h1{
	font-size: 40px;
    line-height: 50px;
}

.home-banner h2{
	font-size: 34px;
    line-height: 38px;
}

.home-banner-buttons {
    gap: 15px;
}

}

@media screen and (max-width: 765px) {
	.home-banner-text img {
		display:none;
	}
}

@media screen and (max-width: 555px) {
	.home-banner{
	height:460px;
	}
}

@media screen and (max-width: 450px) {
	.btn-main {
    font-size: 16px;
    padding: 10px 10px;
	}
}

@media screen and (max-width: 395px) {
	.home-banner h1{
	font-size: 30px;
    line-height: 40px;
}

.home-banner h2{
	font-size: 25px;
    line-height: 27px;
}

.home-banner-buttons {
    gap: 10px;
}
}





/*------------- Hire Cat--------------*/
.home-hire{
	background:black;
	padding-top:100px;
	padding-bottom:100px;
}

.home-hire h3{
	margin-bottom:70px;
}

.home-hire-inner{
	background:white;
	position:relative;
}

.home-hire-title{
	background:var(--color-main);
	color:black;
	font-size: 30px;
    font-weight: 600;
	padding:10px 10px 20px 10px;
	transition:all ease-in 0.3s;
}

.home-hire span{
	background:var(--color-darkblue);
	color:white;
	font-size: 18px;
    font-weight: 600;
    padding: 5px 5px 5px 12px;
	position:absolute;
	left:0;
	bottom:-20px;
	transition:all ease-in 0.3s;
}

.home-hire-inner:hover .home-hire-title{
	background:grey;
	color:white;
}
.home-hire-inner:hover span{
	background:var(--color-main);
}

.home-hire span i{
	margin-left:30px;
}

.home-hire p{
	color: white;
    margin: 0 auto;
    max-width: 1079px;
}

@media screen and (max-width: 1508px) {
.home-hire-title{
	font-size: 25px;
}

}

@media screen and (max-width: 1288px) {
.home-hire-title{
	font-size: 20px;
}

.home-hire span{
	font-size: 16px;
}

.home-hire span i{
	margin-left:20px;
}

}

/*-------Home Section Buttons--------*/
.home-section-buttons-lblue{
	background:var(--color-main);
    
}

.home-section-buttons-lblue img{
position: relative;
margin-top:-134px;
right:-80px;
z-index:5;
}


.home-section-buttons-dblue{
	background:var(--color-darkblue);
	padding:40px;
}

.home-section-buttons-dblue h4{
	color:white;
	font-weight:600;
	font-size:27px;
	margin-bottom:35px;
}

.buttons-newused{
	display:flex;
	flex-wrap:wrap;
	gap:25px;
}
.btn-main.bg-black{
	color:white;
}

@media screen and (max-width: 1463px) {
	.home-section-buttons-dblue h4 {
		font-size:23px;
	}
}

@media screen and (max-width: 1280px) {
	.home-section-buttons-dblue{
		padding: 25px;
	}
	.buttons-newused {
		gap: 15px;
	}

	.home-section-buttons-lblue img {
		position: relative;
		margin-top: -108px;
		right: -63px;
	}
}

@media screen and (max-width: 1199px) {
	.home-section-buttons-lblue{
		display:none;
	}
	.home-section-buttons-dblue h4{
		text-align:center;
	}
	.buttons-newused {
		justify-content: center;
	}
}

/*-------- HOME SERVICES ----------------*/
.home-services{
	padding-top:100px;
	padding-bottom:100px;
	background:black;
	background-image: url(../img/bg-home-services.jpg);
    background-size: cover;
    background-position: 50% 50%;
    box-shadow: rgb(0 0 0 / 84%) 0 0 0 1000000px inset;
}


.home-services h3{
	margin-bottom:60px;
}

.home-services-inner{
	background:black;
    background-size: cover;
    background-position: 50% 50%;
    box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
	position:relative;
	padding:20px;
}

.home-services-inner.service1{
	background-image: url(../img/services1.jpg);
}
.home-services-inner.service2{
	background-image: url(../img/services2.jpg);
}
.home-services-inner.service3{
	background-image: url(../img/services3.jpg);
}

.home-services-inner .absolute-icon{
	position:absolute;
	right:16px;
	top:16px;
	z-index:2;
	filter: brightness(0) saturate(100%) invert(88%) sepia(1%) saturate(245%) hue-rotate(335deg) brightness(92%) contrast(91%);
	width:50px;
}

.service2 .absolute-icon{
	width:60px;
}

.service3 .absolute-icon{
	width:43px;
}

.home-services-inner h4{
	color:white;
	font-size:35px;
	font-weight:600;
	margin-bottom:40px;
	position:relative;
}

.home-services-inner h4:after {
    content: '';
    width: 80px;
    height: 4px;
    background: var(--color-main);
    position: absolute;
    bottom: -15px;
    left: 0;
}
.home-services-inner p{
	color:white;
	margin-bottom:30px;
}

.home-services-inner a{
	display:table;
}

@media screen and (max-width: 490px) {
	.home-services-inner{
		padding:10px;
	}
	.home-services-inner h4{
		font-size:28px;
	}
}

/*-----Trusted BY--------*/
.home-trusted{
	padding-top:100px;
	padding-bottom:100px;
	background:var(--color-darkblue);
}
.home-trusted h4{
	color:white;
	margin-bottom:40px;
	font-size:30px;
	font-weight:400;
	text-align:center;
}

.home-trusted span{
	font-weight:bold;
	font-size:21px;
	text-align:center;
	display:block;
	color:white;
}
@media screen and (max-width: 490px) {
	.home-trusted span{
	font-size:19px;
	}
}
.owl-carousel-logos .owl-prev{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -15px;
}
.owl-carousel-logos .owl-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -15px;
	
}

.home-trusted .owl-prev,.home-trusted .owl-next{
	color: white !important;
    font-size: 30px  !important;
}

/*----------HOME ABOUT--------*/
.home-about{
	padding-top:100px;
	padding-bottom:100px;
}

.home-about h3{
	color:black;
	margin:0 0 50px 0;
}

@media screen and (max-width: 398px) {
	.home-about h3{
		font-size:26px;
		margin-bottom:20px;
	}
	.home-about .title.tblue h3::after {
    content: "";
    position: absolute;
    top: -7px;
	}
}

/*----------HOME ABOUT--------*/

.home-callus{
	padding-top:40px;
	padding-bottom:40px;
	background:var(--color-main);
}


.home-callus h3{
	font-size:40px;
	margin-bottom:15px;
}

.home-callus p{
	text-align:center;
	max-width:1020px;
	margin:0 auto;
}

@media screen and (max-width: 500px) {
	.home-callus h3{
	font-size:30px;
	}
}
/*-------- FOOTER STYLES ----------------*/
footer{
	background:black;
	padding-top:100px;
	padding-bottom:170px;
}

footer h4{
	font-size: 21px;
	color:var(--color-main);
	margin-bottom:25px;
}


footer ul{
    list-style: none;
    padding:0;
	margin:0;
}
footer ul li{
	margin-bottom:10px;
}
footer ul li a{
	color:#cccccc;
	transition:all ease 0.3s;
	&:hover { color: var(--color-main); }
}

footer .nav-top-social a{
	color:var(--color-main);
}


.footer-copyright{
	background:black;
	padding-top:10px;
	padding-bottom:10px;
}
.footer-copyright p{
	color:#cccccc;
}
.footer-contact li a svg{
	fill:var(--color-main);
	margin-top:6px;
	margin-bottom:-6px;
}


/*--- Inner Pages ---*/

.inner-pages{
	padding-top:125px;
	padding-bottom:125px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	box-shadow: rgba(0, 0, 0, .55) 0 0 0 1000000px inset;
}

/*--- CONTACT PAGE ---*/
.page-contact .inner-pages{
background-color: black;
background-image: url(../img/bg-header-inner-contact.jpg);
}

.page-contact h2{
	color:black;
	margin-bottom:30px;
}

.keycontacts{
	padding-top:100px;
	padding-bottom:50px;
	max-width:1500px;
}
.team_member{
	background:var(--color-main);
	max-width:350px;
	margin:0 auto;
	padding:20px;
	border-radius:7px;
	box-shadow:1px 2px 3px #484848;
}

.page-contact-info{
	background:whitesmoke;
	padding-top:50px;
	padding-bottom:100px;
}

.page-contact-info-text{
	background:var(--color-main);
	width:100%;
	text-align:center;
	border-radius:7px;
	box-shadow:1px 2px 3px #484848;
	padding-top:15px;
	padding-bottom:15px;
}
.page-contact-info-text.map{
	padding:20px;
}

/*--contact form --*/
.page-contact-form{
	background: var(--color-darkblue);
    padding: 35px;
    border-radius: 7px;
    box-shadow: 1px 2px #484848;
}
.page-contact-form h2{
	color:white;
}
.page-contact-form input{
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
}
.page-contact-form textarea{
    width: 100%;
    margin-bottom: 20px;
}

.page-contact-form button{
    display:table;
    margin:0 auto;
    border:0;
}


.CaptchaMessagePanel,.CaptchaWhatsThisPanel a{
	color:white;
}

/*--- TRANSPORT PAGE ---*/
.page-transport .inner-pages{
background-color: black;
background-image: url(../img/bg-header-inner-transport.jpg);
}
.section-exports,.section-about,.section-training,.section-parts,.section-service,.section-newforklifts,.section-hire{
	padding-top:100px;
	padding-bottom:100px;
}

.section-exports h3,.section-about h3,.section-training h3,.section-parts h3,.section-service h3{
	margin-bottom:15px;
	font-weight:bold;
}

.page-about .inner-pages{
background-color: black;
background-image: url(../img/bg-header-inner-about.jpg);
}

.page-training .inner-pages{
background-color: black;
background-image: url(../img/bg-header-inner-training.jpg);
}
.section-training h2{
	font-size:30px;
}

.page-parts .inner-pages{
background-color: black;
background-image: url(../img/bg-header-inner-parts.jpg);
}

.page-service .inner-pages{
background-color: black;
background-image: url(../img/bg-header-inner-service.jpg);
}

.page-newforklifts .inner-pages{
background-color: black;
background-image: url(../img/bg-header-inner-new.jpg);
}
.section-newforklifts-inner{
	margin-bottom:90px;
	
}

.section-newforklifts-inner h3{
	background:#ff0f0f;
	color:black;
	padding:20px 10px 30px 10px;
	transition:all ease 0.3s;
}
.section-newforklifts-inner span{
	margin-top:-20px;
	display:table;
	background:var(--color-darkblue);
	padding:10px;
	font-size:20px;
	color:white;
	transition:all ease 0.3s;
}

.section-newforklifts-inner span i{
	margin-left:25px;
	font-size:21px;
}

.section-newforklifts-inner:hover h3{
	background:grey;
}
.section-newforklifts-inner:hover span{
	background:var(--color-main);
	color:black;
}

/*--- Hire Inner Page ---*/

.page-hire .inner-pages{
background-color: black;
background-image: url(../img/bg-hire.webp);
}

.forklift-table {
    width: 100%;
    border-collapse: collapse;
}

.forklift-table th:first-child {
	width: 45%;
}

.forklift-table th,
.forklift-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.forklift-table th {
    background: #f5f5f5;
}

.hire-example .table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.hire-example .table th,
.table td {
    padding: 0.5rem;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

.hire-example .table tbody tr:first-child th,
.hire-example .table tbody tr:first-child td {
    border-top: none;
}

.hire-example .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

.hire-example .table-sm th,
.hire-example .table-sm td {
    padding: 0.3rem;
}

.hire-example tr th{
	width:38%;
}

.hire-example .text-left {
    text-align: left;
}

.section-space{
	padding-top:100px;
	padding-bottom:100px;
}
.section-blue h2{
	color:white;
	margin-bottom:25px;
}

html {
scroll-behavior: smooth;
}



/*--- INNER PAGES STOCK ----*/
.page-inventory .inner-pages{
	background-color: black;
	background-image: url(../img/bg-header-inner-contact.jpg);
}



/*----INVENTORY STYLES ----*/
.list-container-flexrow .view-listing-details-link, .faceted-search-content .selected-facets-container .selected-facet {
background: var(--color-main) !important;
}

.inner-pages .title{
	text-decoration: none !important;
}







