:root {
	--color-orange: #ef7d00;
	--color-blue: #0babe4;
	--color-gray-dark: #646363;
	--color-gray-light: #dadada;
	--main-background-height: 600px;
}

body {
	font-family: "Poppins", Arial, sans-serif;
}

.text-body {
	font-family: "Poppins", Arial, sans-serif;
}
.text-body-white {
	font-family: "Poppins", Arial, sans-serif;
    color: #fff!important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "ethnocentric", sans-serif;
font-weight: 400;
font-style: normal;
}

.bg-orange { background-color: var(--color-orange) !important; color: #fff !important; }
.bg-blue { background-color: var(--color-blue) !important; color: #042733 !important; }
.bg-gray-dark { background-color: var(--color-gray-dark) !important; color: #fff !important; }
.bg-gray-light { background-color: var(--color-gray-light) !important; color: #212529 !important; }

.text-orange { color: var(--color-orange) !important; }
.text-blue { color: var(--color-blue) !important; }
.text-gray-dark { color: var(--color-gray-dark) !important; }
.text-gray-light { color: var(--color-gray-light) !important; }

.heading-orange,
.heading-blue,
.heading-gray-dark,
.heading-gray-light {
	margin-bottom: 0.5rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.heading-orange { color: var(--color-orange); }
.heading-blue { color: var(--color-blue); }
.heading-gray-dark { color: var(--color-gray-dark); }
.heading-gray-light { color: var(--color-gray-light); }

.btn-orange { background-color: var(--color-orange); border-color: var(--color-orange); color: #fff; }
.btn-blue { background-color: var(--color-blue); border-color: var(--color-blue); color: #042733; }
.btn-gray-dark { background-color: var(--color-gray-dark); border-color: var(--color-gray-dark); color: #fff; }
.btn-gray-light { background-color: var(--color-gray-light); border-color: var(--color-gray-light); color: #212529; }

.btn-orange:hover,
.btn-blue:hover,
.btn-gray-dark:hover,
.btn-gray-light:hover {
	filter: brightness(0.9);
	color: inherit;
}

.btn-orange:focus,
.btn-blue:focus,
.btn-gray-dark:focus,
.btn-gray-light:focus {
	outline: none;
	box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1);
}

.btn-fontone {
	font-family: "ethnocentric", sans-serif;
	font-weight: 400;
}

.back-to-top {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	z-index: 1030;
}

.back-to-top svg {
	pointer-events: none;
}

.back-to-top:hover,
.back-to-top:focus {
	transform: translateY(-3px);
	box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.3);
}

.border-orange { border-color: var(--color-orange) !important; }
.border-top-orange { border-top-color: var(--color-orange) !important; }
.border-end-orange { border-right-color: var(--color-orange) !important; }
.border-bottom-orange { border-bottom-color: var(--color-orange) !important; }
.border-start-orange { border-left-color: var(--color-orange) !important; }

.border-blue { border-color: var(--color-blue) !important; }
.border-top-blue { border-top-color: var(--color-blue) !important; }
.border-end-blue { border-right-color: var(--color-blue) !important; }
.border-bottom-blue { border-bottom-color: var(--color-blue) !important; }
.border-start-blue { border-left-color: var(--color-blue) !important; }

.border-gray-dark { border-color: var(--color-gray-dark) !important; }
.border-top-gray-dark { border-top-color: var(--color-gray-dark) !important; }
.border-end-gray-dark { border-right-color: var(--color-gray-dark) !important; }
.border-bottom-gray-dark { border-bottom-color: var(--color-gray-dark) !important; }
.border-start-gray-dark { border-left-color: var(--color-gray-dark) !important; }

.border-gray-light { border-color: var(--color-gray-light) !important; }
.border-top-gray-light { border-top-color: var(--color-gray-light) !important; }
.border-end-gray-light { border-right-color: var(--color-gray-light) !important; }
.border-bottom-gray-light { border-bottom-color: var(--color-gray-light) !important; }
.border-start-gray-light { border-left-color: var(--color-gray-light) !important; }

.navbar-gray-dark {
	background-color: var(--color-gray-dark);
	border-top: 0.4rem solid var(--color-blue);
	border-bottom: 1px solid var(--color-gray-light);
	text-transform: uppercase;
}

.navbar-gray-dark .navbar-brand,
.navbar-gray-dark .navbar-nav .nav-link {
	color: #fff !important;
}

.navbar-gray-dark .navbar-nav .nav-link:hover,
.navbar-gray-dark .navbar-nav .nav-link:focus {
	color: rgba(255, 255, 255, 0.8) !important;
}

.navbar-gray-dark .navbar-toggler {
	border-color: rgba(255, 255, 255, 0.7);
}

.navbar-gray-dark .navbar-toggler-icon {
	filter: invert(1);
}

.navbar-gray-dark .dropdown-menu {
	background-color: var(--color-orange);
	border: none;
	min-width: 14rem;
}

.navbar-gray-dark .dropdown-item {
	color: #fff;
	font-weight: 500;
}

.navbar-gray-dark .dropdown-item:hover,
.navbar-gray-dark .dropdown-item:focus {
	background-color: rgba(255, 255, 255, 0.15);
	color: #fff;
}

.main-background {
	background-image: url("../images/background_bottomx.png");
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: auto;
	display: flex;
	flex-direction: column;
}

.main-background-inner {
	background-image: url("../images/background.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center bottom;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.link-grid .link-box {
	border: 1px solid var(--color-gray-light);
	border-radius: 0.75rem;
	padding: 1.75rem 1.25rem;
	background-color: rgba(255, 255, 255, 0.92);
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.link-grid .link-box:hover,
.link-grid .link-box:focus {
	box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
	transform: translateY(-4px);
	color: inherit;
}

.link-grid .link-box h3 {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
	text-transform: uppercase;
}

.link-grid .link-box span {
	font-size: 0.95rem;
	color: var(--color-gray-dark);
}

.link-grid .link-box.bg-orange {
	border-color: var(--color-orange);
	color: #fff;
}

.link-grid .link-box.bg-orange span {
	color: #fff;
}

.link-grid .link-box.bg-gray-dark {
	border-color: var(--color-gray-dark);
	color: #fff;
}

.link-grid .link-box.bg-gray-dark span {
	color: #fff;
}

.bespoke-design h2 {
	font-size: 2rem;
	font-weight: 600;
}

.bespoke-design ul {
	list-style: none;
	padding: 0;
}

.bespoke-design ul li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
}

.bespoke-design ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--color-blue);
}

.bespoke-carousel .carousel-inner,
.bespoke-carousel img {
	border-radius: 0.75rem;
	overflow: hidden;
}

.bespoke-carousel .carousel-indicators [data-bs-target] {
	background-color: var(--color-blue);
}

/* keep indicators visible on light slides */
.bespoke-carousel .carousel-control-prev-icon,
.bespoke-carousel .carousel-control-next-icon {
	filter: invert(1);
}

.service-section {
    padding-top: 15px;
    padding-bottom: 15px;
}
.service-section h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
}

.service-section p {
	font-size: 1rem;
	margin-bottom: 1.25rem;
}

.service-section ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.service-section ul li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.5rem;
}

.service-section ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45rem;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--color-orange);
}

.service-media {
	border-radius: 1rem;
	min-height: 280px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-industrial { background-image: url("../images/industrial.jpg"); }
.service-tarpaulins { background-image: url("../images/box-cover.jpg"); }
.service-wheel { background-image: url("../images/wheel-covers/background-banner.jpg"); }
.service-spill { background-image: url("../images/spill-kits.jpg"); }

.service-media:hover {
	transform: translateY(-6px);
	box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.18);
}

#quick-links {
	border-bottom: 0.5rem solid var(--color-blue);
}

.hero-section {
	position: relative;
	background-image: url("../images/coverall-home-banner.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.hero-section .container {
	position: relative;
	z-index: 1;
}

.service-section {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-bottom: 0.5rem solid var(--color-orange);
}

.service-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.service-section > .container {
	position: relative;
	z-index: 1;
}

