/*!
Theme Name: reschem_theme
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: reschem_theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

reschem_theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}



/*--------------------------------------------------------------
## Custom CSS
--------------------------------------------------------------*/

:root {
    --black: #001536;
    --darkgrey: #353E43;
    --blue: #0F9FE1;
    --textblue: #4EBBED;
    --mediumblue: #0052A9;
    --lightblue: #F7FCFF;
    --white: #FFFFFF;
    --lightgrey: #FAFAFA;
    --inter:  "Inter", sans-serif;
}


*{
    margin: 0;
    padding:0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body {
    margin: 0;
    padding: 0;
    margin: auto;
    font-family: var(--inter);
    background-color: var(--darkgrey);
    color: var(--black);
    overflow: auto;
    overflow-x: hidden;
}

body.single-product,
body.single-industry,
body.single-bund-lining,
body.single-build-ups,
body.single-application,
body.single-project,
body.single-news,
body.page-template-tpl-contact,
body.page-template-tpl-site-survey{
    background-color: var(--white);
}

.post, .page {
    margin: 0;
}

#page{
    max-width:1800px;
    margin:auto;
}

p {
    font-family: var(--inter);
    font-size: 0.9em;
    font-weight: 300;
    line-height: 1.5em;
    color: var(--black);
    margin-bottom:15px;
    text-rendering: geometricPrecision;
    text-decoration: none;
}

h1, h2, h3, h4, h5 {
    font-family: var(--inter);
    color: var(--black);
}

h1 {
    font-size: 2.5em;
    line-height: 1.2em;
    margin: 0 0 5px 0;
    font-weight: 600;
}


h2 {
    font-size: 2em;
    font-weight: 600;
    line-height: 1.2em;
    margin: 0 0 5px 0;
}


h3 {
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.2em;
    margin: 0 0 5px 0;
}


h4 {
    font-size: 1.6em;
    font-weight: 300;
    line-height: 1.2em;
    margin: 0 0 5px 0;
}

h5 {
    font-size: 1em;
    font-weight: 500;
    line-height: 1.1em;
    margin: 0 0 5px 0;
}



p strong, p b, strong, b{
    font-family: var(--inter);
    text-rendering: geometricPrecision;
}


a { 
    text-decoration: none;
    color: var(--lightblue);
    cursor: pointer;
    transition:all 0.3s ease;
}

header#masthead a{  
    text-decoration:none;
}


li { 
    list-style-type: none;
}


section div ul,
section div ol{ 
    margin:0 0 15px 15px;
}

section div ul li { 
    color: var(--black);
    font-size: 0.9em;
    list-style-type: disc;
    text-rendering: geometricPrecision;
}

section div ol li { 
    color: var(--black);
    font-size: 0.9em;
    list-style-type: numbers;
    text-rendering: geometricPrecision;
}



header#masthead .main-navigation {
    width:auto;
}





/* ******************************************************
    Buttons
*********************************************************/

a button {
    border-radius: 50px;
    border: 0;
    background: var(--blue);
    padding: 16px 25px;
    cursor:pointer;
    transition:all 0.5s ease;
}

a button span{
    text-rendering: geometricPrecision;
    font-family: var(--inter);
    font-weight: 500;
    color: var(--white);
    font-size: 0.95em;
    text-transform:capitalize;
    transition:all 0.5s ease;
    text-wrap: nowrap;
}

a:hover button,
a:focus button {
    background: var(--mediumblue);
    cursor:pointer;
    transition:all 0.5s ease;
}

a.blue-cta button {
    background: var(--blue);
}

a.darkblue-cta button {
    background: var(--mediumblue);
}

a.black-hover:hover button {
    background: var(--black);
}

a.white-hover:hover button {
    background: var(--white);
}

a.darkblue-hover:hover button {
    background: var(--mediumblue);
}


/* ******************************************************
    Header, Nav, Menus...
*********************************************************/

header#masthead div.menu-primary-menu-container {
	display: block;
}
header#masthead div.menu-mobile-menu-container {
	display: none;
}

header#masthead{
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    padding-left: 2%;
    padding-right: 2%;
    z-index: 1000;
    max-width:1800px;
    margin:auto;
}

header#masthead .scroll-wrapper{
    padding-top: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    transition: all 0.5s ease-in;
}

header#masthead.scrolled .scroll-wrapper{
    padding: 15px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    background-color: var(--white);
    max-width: 1050px;
    margin: auto;
    transition: all 0.5s ease-in;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 18px;
}

header#masthead.scrolled a.contact-details{
    display: none;
    transition: all 0.5s ease;
}



header#masthead .main-navigation ul {
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    background: var(--lightblue)!important;
    border-radius: 50px!important;
    padding: 0 20px;
}

header#masthead .main-navigation ul.sub-menu{
	border-top-right-radius: 0px!important;
    border-top-left-radius: 0px!important;
    border-bottom-right-radius: 10px!important;
    border-bottom-left-radius: 10px!important;
	padding: 0 20px 20px;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-megamenu > ul.mega-sub-menu{
	border-radius: 10px!important;
    background: white!important;
}

header#masthead .main-navigation ul li {
    margin: 0 18px;
    padding: 17px 0;
    transition: all 0.3s ease;
	position: relative;
}

header#masthead .main-navigation ul li a{
    color: var(--black);
    font-size: 0.9em;
	font-weight: 400;
    transition: all 0.3s ease;
}

header#masthead .main-navigation ul li.dimmed a {
  color: #a2a2a2;
}

header#masthead .main-navigation ul li:hover a,
header#masthead .main-navigation ul li:focus a,
header#masthead .main-navigation ul li.current-menu-item > a{
    color: var(--blue);
    transition: all 0.3s ease;
}

header#masthead .main-navigation ul li.menu-item-has-children{
    padding-right: 15px;
}

header#masthead .main-navigation ul li.menu-item-has-children:after {
    content: " ";
    width: 7px;
    height: 7px;
    position: absolute;
    border: 1.5px solid var(--black);
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
    right: 0px;
    top: calc(50% - 5px);
}


header#masthead .main-navigation ul li ul li {
    padding: 10px 0;
    transition: all 0.3s ease;
}

header#masthead .main-navigation ul li ul li a,
header#masthead .main-navigation ul li:hover ul li a,
header#masthead .main-navigation ul li:focus ul li a{
    color: var(--black);
    font-size: 0.9em;
	font-weight: 500;
    transition: all 0.3s ease;
}

header#masthead .main-navigation ul li ul li:hover a,
header#masthead .main-navigation ul li ul li:focus a{
    color: var(--blue);
    transition: all 0.3s ease;
}


header#masthead .main-navigation ul ul {
	display: flex;
	flex-direction: column;
   background: var(--lightgrey);
    position: absolute;
    top: 100%;
    left: 0;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    margin-left: -15px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 10px 10px 20px;
    z-index: 999;
}

header#masthead .main-navigation ul ul li a::after{
    display: none;
}
header#masthead .main-navigation ul li:hover > ul,
header#masthead .main-navigation ul li:focus-within > ul {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
}

header#masthead a.custom-logo-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

header#masthead a.custom-logo-link svg {
    height: 50px;
	width: auto;
    display: block;
	overflow: visible;
}

header#masthead a.contact-details{
	display: flex;
    flex-direction: row;
	gap: 8px;
}

header#masthead a.contact-details div{
    display: flex;
    flex-direction: column;
	font-size: 1.1em;
    font-weight: 500;
	margin-bottom: 0;
    transition: all 0.3s ease;
}

header#masthead a.contact-details svg{
    width: 24px;
    transition: all 0.3s ease;
}

header#masthead a.contact-details span {
    font-size: 0.65em;
    font-weight: 300;
	line-height: 12px;
}

header#masthead a.contact-details:hover {
    color: var(--blue);
}
header#masthead a.contact-details:hover svg path{
    fill: var(--blue);
         transition: all 0.3s ease;
}
	.nav-contact-wrapper{
	display: flex;
    flex-direction: row;
    gap: 30px;
	}

header#masthead{
  transition: background-color .3s ease;
}

header#masthead{
  transition: background-color .3s ease;
}
header#masthead .scroll-wrapper{
  transition: border-radius .3s ease;
}

.single-product header#masthead a.custom-logo-link svg .st2,
.single-industry header#masthead a.custom-logo-link svg .st2,
.single-bund-lining header#masthead a.custom-logo-link svg .st2,
.single-application header#masthead a.custom-logo-link svg .st2,
.single-project header#masthead a.custom-logo-link svg .st2,
.page-template-tpl-contact header#masthead a.custom-logo-link svg .st2,
.page-template-tpl-site-survey header#masthead a.custom-logo-link svg .st2,
.single-news header#masthead a.custom-logo-link svg .st2{
    fill: var(--black);
}

.single-product header#masthead .menu-toggle,
.single-industry header#masthead .menu-toggle,
.single-application header#masthead .menu-toggle,
.single-bund-lining header#masthead .menu-toggle,
.single-project header#masthead .menu-toggle,
.page-template-tpl-contact header#masthead .menu-toggle,
.page-template-tpl-site-survey header#masthead .menu-toggle,
.single-news header#masthead .menu-toggle{
    color: var(--black);
}

.single-product header#masthead button div,
.single-industry header#masthead button div,
.single-application header#masthead button div,
.single-bund-lining header#masthead button div,
.single-project header#masthead button div,
.page-template-tpl-contact header#masthead button div,
.single-news header#masthead button div
.page-template-tpl-site-survey header#masthead button div{
    background-color: var(--black);
}
.single-product header#masthead a.contact-details,
.single-industry header#masthead a.contact-details,
.single-application header#masthead a.contact-details,
.single-bund-lining header#masthead a.contact-details,
.single-project header#masthead a.contact-details,
.page-template-tpl-contact header#masthead a.contact-details,
.page-template-tpl-site-survey header#masthead a.contact-details,
.single-news header#masthead a.contact-details{
    color: var(--black);
}

.single-product header#masthead a.contact-details svg path,
.single-bund-lining header#masthead a.contact-details svg path,
.single-industry  header#masthead a.contact-details svg path,
.single-application header#masthead a.contact-details svg path,
.single-project header#masthead a.contact-details svg path,
.page-template-tpl-contact header#masthead a.contact-details svg path,
.page-template-tpl-site-survey header#masthead a.contact-details svg path,
.single-news header#masthead a.contact-details svg path{
    fill: var(--black);
}

/* ******************************************************
    Content
*********************************************************/
section.home-hero{
    background-color: var(--white);
    margin: 85px 15px 0px;
    border-radius: 15px;
    padding: 70px calc(8% - 15px);
}

section.home-hero .text{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

section.home-hero .text div{
    max-width: 470px;
}

section.home-hero h1 span{
    font-weight: 300;
    display: block;
}

section.home-hero .images{
    display: flex;
    border-radius: 10px;
    gap: 15px;
    margin-top: 40px;
}

section.home-hero .images img{
    border-radius: 15px;
    object-fit: cover;
    width: calc((100% / 3) - 10px);
    aspect-ratio: 3 / 2;
	  transition: opacity 1s ease-in-out;
}

section.home-hero .buttons{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}


section.icons-banner{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 25px 8%;
    gap: 20px;
    flex-wrap: wrap;
}

section.icons-banner .image-wrapper{
    width: calc((100% / 4) - 15px);
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 12px;
    max-width: 250px;
    align-items: center;
    color: var(--white);
}

section.icons-banner .image-wrapper img{
    width: 45px;
}

.white-wrapper{
    background-color: var(--white);
    margin: 0px 15px;
    border-radius: 15px;
}

section.cards-layout{
    padding: 70px calc(8% - 15px);
}

section.cards-layout a.blue-cta {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

section.cards-layout.news{
    padding: 70px 8%; 
}

section.cards-layout.news h3,
section.cards-layout.news h4{
    color: var(--white);
}

section.cards-layout .project-desc{
    margin: 0 5px 0;
    font-size: 0.9em;
}



section.cards-layout.project-layout ul li {
    width: calc((100% / 3) - 10px);
    position: relative;
}

section.cards-layout.project-layout.home{
	margin-top: 20px;
} 

section.cards-layout.project-layout.home h2{
	    text-align: start;
}

.post-type-archive-project section.cards-layout.project-layout ul li:first-child,
section.cards-layout.project-layout.home ul li{
    width: 100%;
    max-width: 1100px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s 
ease, transform 0.3s 
ease;
    position: unset;
    background: none;
    margin: 0 auto 30px;
}

.post-type-archive-project section.cards-layout.project-layout ul li:first-child a,
section.cards-layout.project-layout.home ul li a{
    display: flex;
    flex-direction: row;
    justify-content: center;
	gap: 40px;
}
.post-type-archive-project section.cards-layout.project-layout ul li:first-child a .text-content,
section.cards-layout.project-layout.home ul li a .text-content{
	padding: 40px 0;
}

.post-type-archive-project section.cards-layout.project-layout ul li:first-child a h5,
section.cards-layout.project-layout.home ul li a h5{
    margin: 0;
}

.post-type-archive-project section.cards-layout.project-layout ul li:first-child .text-content
section.cards-layout.project-layout.home ul li.text-content{
    background: var(--white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    padding: 40px 30px;
    border-radius: 0 20px 20px 0;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.post-type-archive-project section.cards-layout.project-layout ul li:first-child .text-content h6,
section.cards-layout.project-layout.home ul li .text-content h6{
    font-size: 1em;
    font-weight: 500;
    color: var(--black);
    margin-top: 15px;
}

.post-type-archive-project section.cards-layout.project-layout ul li:first-child .text-content .cat,
section.cards-layout.project-layout.home ul li .text-content .cat{
    position: unset;
    width: fit-content;
    margin-bottom: 8px;
}

.post-type-archive-project section.cards-layout.project-layout ul li:first-child img,
section.cards-layout.project-layout.home ul li img{
    border-radius: 20px 0px 0px 20px; 
    width: 50%;  
}

.post-type-archive-project section.cards-layout.project-layout ul li:first-child .project-desc,
.post-type-archive-project section.cards-layout.project-layout ul li h3,
section.cards-layout.project-layout.home ul li:first-child .project-desc,
section.cards-layout.project-layout.home ul li h3{
    margin: 0 0 5px;
}

section.cards-layout.news-layout ul li h3{
	    margin: 15px 5px 5px;
}

.post-type-archive-project section.cards-layout.project-layout ul li:first-child .related-products,
section.cards-layout.project-layout.home ul li .related-products{
    gap: 5px;
    margin: 0;
}

.post-type-archive-project section.cards-layout.project-layout ul li:first-child .related-product,
section.cards-layout.project-layout.home ul li .related-product{
    box-shadow: none;
    padding: 0;
    margin: 0 0 20px;
    width: unset;
}

.post-type-archive-project section.cards-layout.project-layout ul li:first-child .related-product .product-title,
section.cards-layout.project-layout.home ul li .related-product .product-title{
    color: var(--black);
    text-decoration: underline;
    text-wrap: nowrap;
}

section.cards-layout.project-layout ul li .cat{
    position: absolute;
    top: 18px;
    right: 18px;
    background-color: var(--lightblue);
    border-radius: 25px;
    padding: 8px 14px;
    color: var(--black);
    font-size: 0.8em;
}

section.cards-layout.industry-layout.application-layout-home{
	    padding: 70px calc(8% - 15px);
}

section.cards-layout.news-layout.project-layout h2,
section.cards-layout.news-layout.project-layout h4{
	color: var(--white);
	text-align: start;
}

section.banner{
    background-color: #2D2D2D;
    border-radius: 15px;
    padding: 40px 5%;
    margin: 30px 2.5%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-gap: 30px;
}

.page-template-front-page section.banner{
	margin: 0px 2.5% 30px;
}

section.banner .text {
    max-width: 900px;
}

section.banner .text h3{
    color: var(--white);
    font-size: 1.6em;
}

section.banner .text h3 span{
    color: var(--blue);
}

section.banner .text p{
    color: var(--white);
}

section.banner .text{
    display: flex;
    flex-direction: column;
}

section.banner .links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 40px;
}

section.banner a.contact-details{
    display: flex;
    flex-direction: row;
	gap: 10px;
    align-items: center;
}

section.banner a.contact-details div{
    display: flex;
    flex-direction: column;
	font-size: 1.2em;
    font-weight: 500;
	margin-bottom: 0;
    transition: all 0.3s ease;
    text-wrap: nowrap;
}

section.banner a.contact-details svg{
    width: 27px;
    transition: all 0.3s ease;
}

section.banner a.contact-details span {
    font-size: 0.65em;
    font-weight: 300;
	line-height: 12px;
}

section.banner a.contact-details:hover {
    color: var(--blue);
}
section.banner a.contact-details:hover svg path{
    fill: var(--blue);
    transition: all 0.3s ease;
}

section.project-steps{
    padding: 70px 8%;
}

section.project-steps h2,
section.project-steps h3,
section.project-steps h4,
section.project-steps h5,
section.project-steps p{
    color: var(--white);
}
section.project-steps .wrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 40px;
    margin-top: 30px;
    padding-bottom: 20px;
}

section.project-steps .lhs{
    border-radius: 15px;
    padding: 40px;
    background-color: #5B6469;
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

section.project-steps .lhs h3{
    margin-bottom: 25px;
}

section.project-steps img{
    width: 45%;
    border-radius: 15px;
    object-fit: cover;
    max-height: 500px;
}

section.project-steps .step-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
    gap: 15px;
}

section.project-steps .lhs a.blue-cta {
    margin-top: 15px;
}

section.project-steps .step-wrapper .step-number{
    font-size: 2.5em;
    font-weight: 600;
    color: var(--white);
}

section.project-spotlight{
    padding: 70px calc(8% - 15px);
}

section.cards-layout .related-bund-lining h5 {
	    margin: 20px 0 40px;
}

section.cards-layout .related-bund-lining h5 span{
    color: var(--black);
    font-size: 1em;
    margin: 0 5px;
}

.post-type-archive-bund-lining .image-text h2,
.post-type-archive-bund-lining .image-text p{
	color: var(--white);
}

.post-type-archive-bund-lining .faqs,
.post-type-archive-industry .faqs{
	background: var(--white);
}

/* ******************************************************
    Single Bund Lining
*********************************************************/
.single-bund-lining section.industry-content .rhs {
	display: unset;
}

.single-bund-lining section.industry-content .rhs .box-wrapper {
	background-color: var(--white);
	margin-top: 30px;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
	padding: 0;
	width: 100%;
}
.single-bund-lining section.industry-content .rhs .box-wrapper .box{
    background-color: var(--lightblue);
    border-radius: 10px;
    padding: 30px 25px;
    width: calc(33% - 15px);
}
section.design-considerations{
	padding: 70px 8%;
    background-color: var(--lightblue);
}

section.design-considerations .box-wrapper {
	margin-top: 30px;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
	padding: 0;
	width: 100%;
}
section.design-considerations .box-wrapper .box{
    background-color: var(--white);
    border-radius: 10px;
    padding: 30px 25px;
    width: calc(33% - 15px);
}


/* ******************************************************
    Archive Products
*********************************************************/
.post-type-archive-product .white-wrapper{
    margin: 92px 15px 0;
    padding: 10px 0 0;
}

.post-type-archive-product section.cards-layout {
    padding: 20px calc(8% - 15px) 0px;
}

/* ******************************************************
    Single Product
*********************************************************/

.single-product .product {
    background-color: #F7FCFF;
    margin: 96px 15px 0px;
    border-radius: 15px;
    padding: 40px calc(8% - 15px);
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 50px;
}

.single-product aside#secondary,
nav.woocommerce-breadcrumb,
.woocommerce-tabs.wc-tabs-wrapper{
    display: none;
}

nav.custom-breadcrumb,
nav.breadcrumbs span{
    color: var(--blue);
    font-size: 0.9em;
    padding-bottom: 10px;
}

nav.custom-breadcrumb a,
nav.breadcrumbs a {
    color: var(--black);
    position: relative;
    text-decoration: none;
    transition: color 0.3s ease;
}

nav.custom-breadcrumb a::after,
nav.breadcrumbs a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    opacity: 0;
    transition: opacity 0.2s ease;
}

nav.custom-breadcrumb a:hover::after,
nav.breadcrumbs a:hover::after {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.woocommerce div.product div.images img {
    border-radius: 15px;
}

.woocommerce div.product .product_title {
    margin-bottom: 20px;
}

.product_meta span a{
    font-size: 0.9em;
    color: var(--blue);
    border: 1px solid var(--blue);
    padding: 7px 14px;
    border-radius: 50px;
    margin-left: 20px;
}

.product_meta span a:hover{
    color: var(--black);
    border: 1px solid var(--black);
    transition: 0.3s ease all;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2){
    width: calc(33% - 10px);
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    gap: 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.woocommerce div.product .product_meta {
    display: none;
}

.error404 section.news-archive-hero h4{
	margin-bottom: 20px;
}

.woocommerce aside#secondary{
	display: none;
}

section.product-extra{
    padding: 50px 8%;
    display: flex;
    flex-direction: row;
    gap: 50px;
    justify-content: space-between;
}

section.product-extra .product-applications{
    padding-top: 40px;
}

section.product-extra .rhs{
    background-color: #F7FCFF;
    padding: 40px;
    border-radius: 15px;
}

section.product-extra .rhs h5{
    margin-bottom: 15px;
}

section.product-extra .rhs ul{
    margin: 0 0 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
}

section.product-extra .rhs ul li{
    list-style-type: none;
}

section.product-extra .rhs ul li a {
    font-size: 0.9em;
    color: var(--blue);
    background-color: var(--white);
    padding: 7px 14px;
    border-radius: 50px;
}

section.product-extra .rhs .product-documents a{
    color: var(--blue);
    text-decoration: underline;
    display: flex;
    flex-direction: row;
    gap: 8px;
    font-size: 0.9em;
    align-items: center;
}

section.product-extra .rhs .product-documents a svg {
    width: 20px;
}

section.product-extra .rhs .product-documents a:hover{
    color: var(--black);
    transition: 0.3s ease all;
}

section.product-extra .rhs .product-documents a:hover svg path,
section.product-extra .rhs .product-documents a:hover svg polyline,
section.product-extra .rhs .product-documents a:hover svg line{
    stroke: var(--black);
    transition: 0.3s ease all;
}

section.related.products{
    padding: 70px 8%;
}

section.related.products h2{
    text-transform: capitalize;
    padding-bottom: 30px;
}

section.related.products ul.products li.product,
section.related.products ul.products li.product,
section.cards-layout ul li,
section.project-content .rhs ul li {
  padding: 10px;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  list-style-type: none;
  border-radius: 10px;
}

section.related.products ul.products li.product{
	margin: 0;
}

section.related.products ul.products li.product:hover,
.section.related.products ul.products li.product:hover,
section.cards-layout ul li:hover,
section.project-content .rhs ul li:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

section.related.products ul.products li.product a img,
section.cards-layout ul li a img,
section.project-content .rhs ul li img {
    border-radius: 10px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

section.related.products ul.products li.product .woocommerce-loop-product__title{
    padding: 10px 0 0;
    margin: 0 5px 0;
    font-size: 1em;
    font-weight: 500;
}

section.related.products ul.products li.product .button,
section.cards-layout ul li a span {
    background-color: transparent;
    color: var(--blue);
    padding: 0;
    font-size: 0.9em;
    font-weight: 400;
    margin: 20px 5px 10px;
}

section.related.products li.product {
    flex-direction: column;
    gap: 0;
}

section.project-content .rhs ul {
    margin: 30px 0 0!important;
}

section.project-content .rhs ul li {
    width: 200px;
}

a.blue-cta.prod-cta{
    display: flex;
    justify-content: center;
    align-items: center;
}

section.cards-layout ul,
section.project-content .rhs ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0 60px;
}

section.cards-layout ul li{
    width: calc((100% / 4) - 15px);
    border-radius: 15px;
}

section.cards-layout ul li a h3,
section.project-content .rhs ul li h3  {
    margin: 0 5px 0;
    font-size: 1.1em;
    font-weight: 500;
}

section.cards-layout ul li a h5,
section.project-content .rhs ul li h5 {
    background-color: transparent;
    color: var(--blue);
    padding: 0;
    font-size: 0.9em;
    font-weight: 400;
    margin: 10px 5px 10px;
}


/* ******************************************************
    Single Industry
*********************************************************/
section.hero-text-image{
    background-color: var(--white);
    margin: 92px 0 0;
    padding: 0px 8% 70px;
    display: flex;
    flex-direction: row;
    gap: 50px;
}

section.hero-text-image .lhs{
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

section.hero-text-image .buttons{
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}

section.hero-text-image img{
    width: 55%;
    height: 450px;
    border-radius: 15px;
    object-fit: cover;
}

section.industry-content{
    padding: 0 8% 50px;
    display: flex;
    flex-direction: row;
    gap: 50px;
    justify-content: space-between;
}

section.industry-content .lhs{
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

section.industry-content .rhs{
    width: 55%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
}

section.industry-content .rhs .box-wrapper{
    background-color: var(--lightblue);
    border-radius: 10px;
    padding: 30px 25px 25px;
    width: calc(50% - 17px);
}

section.industry-applications{
    padding: 0 8% 70px;
}

section.industry-applications .text{
    max-width: 700px;
}

section.industry-applications .wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
}

section.industry-applications .wrapper .box{
    width: calc(33% - 15px);
    background-color: var(--lightblue);
    border-radius: 10px;
    padding: 10px;
}

section.industry-applications section.applications-layout {
    padding: 10px 0 0;
}


/* ******************************************************
    Archive Industry
*********************************************************/
section.hero-text-image.blue-bg {
    background-color: var(--lightblue);
    margin: 0 10px 0;
    padding: 0 0 0 7.5%;
    border-radius: 15px;
}

.post-type-archive-industry .white-wrapper {
    margin: 92px 15px 0;
    padding: 10px 0 0;
}

section.cards-layout.industry-layout{
    padding: 40px calc(8% - 15px) 60px;
}

section.cards-layout.industry-layout .text-content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 15px 5px 10px;
}

section.cards-layout.products-layout ul li a h3{
	margin: 15px 5px 0;
}

section.cards-layout.application-layout-home  p.excerpt {
    margin: 0 5px;
}
section.cards-layout.application-layout-home .text-content {
    padding: 15px 5px 5px;
}
section.cards-layout.industry-layout .text-content svg{
    width: 20px;
}

section.about-cards{
    padding: 70px 8%;
}

section.about-cards .text{
    max-width: 800px;
    text-align: center;
    margin: auto;
    margin-bottom: 30px;
}

section.about-cards .text h2,
section.about-cards .text p{
    color: var(--white);
}

section.about-cards .text h2 span{
    color: var(--textblue);
}

section.about-cards .wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
}

section.about-cards .wrapper .box{
    width: calc(33% - 15px);
    background-color: #454D52;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

section.about-cards .wrapper .box img{
    width: 60px;
    margin-bottom: 15px
}

section.about-cards .wrapper .box h5{
    color: var(--textblue);
}

section.about-cards .wrapper .box p{
    color: var(--white);
    text-align: center;
    margin-bottom: 0;
}


/* ******************************************************
    Archive Applications
*********************************************************/
.post-type-archive-application .white-wrapper{
    margin: 92px 15px 0;
    padding: 10px 0 0;
}
 section.applications-layout{
    padding: 30px 7.5%;
 }

 section.applications-layout ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
    margin: 30px 0 60px;
 }

  section.applications-layout ul li{
    width: calc((100% / 3) - 27px);
    border-radius: 100px;
    padding: 5px 30px 5px 5px;
    background: var(--lightblue);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
  }

  section.applications-layout ul li:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

section.applications-layout ul li a{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 30px;
}

section.applications-layout ul li a img{
    border-radius: 50%;
    width: 110px;
    height: 110px;
    object-fit: cover;
}


section.applications-layout ul li .text-content h3{
    margin-bottom: 0;
    font-size: 1.1em;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
}

section.applications-layout ul li .text-content svg{
    width: 20px;
}

section.project-steps.white-bg .lhs {
    background-color: var(--lightblue);
}

section.project-steps.white-bg h2, 
section.project-steps.white-bg h3, 
section.project-steps.white-bg h4, 
section.project-steps.white-bg h5, 
section.project-steps.white-bg p,
section.project-steps.white-bg .step-wrapper .step-number{
    color: var(--black);
}


/* ******************************************************
    Single Application
*********************************************************/
section.features-cards{
    padding: 20px 8% 70px;
}

section.features-cards .wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 60px;
}

section.features-cards .wrapper .box{
    width: calc(33% - 15px);
    background-color: var(--lightblue);
    border-radius: 10px;
    padding: 50px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    position: relative;
}

section.features-cards .wrapper .box img{
    height: 55px;
    width: auto;
    position: absolute;
    top: -25px;
    left: 20px;
}

section.image-text{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 40px;
}

section.image-text.reversed{
    flex-direction: row-reverse;
}

section.image-text .rhs{
    padding: 40px 0;
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

section.image-text img {
    width: 45%;
	aspect-ratio: 3 / 2;
    border-radius: 15px;
    object-fit: cover;
    max-height: 500px;
}

section.image-text{
    padding: 70px 8%;
}

section.faqs{
    padding: 70px 8%;
}

section.faqs .wrapper{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 50px;
}

section.faqs .lhs{
    width: 50%;
}

section.faqs h2 {
     margin-bottom: 20px;
}

section.faqs .rhs{
    width: 50%;
    background: var(--lightgrey);
    border-radius: 15px;
    padding: 40px 30px;
}

section.faqs .rhs h3{
    margin-bottom: 10px;
}

section.faqs .rhs div{
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 10px;
}

section.faqs .rhs svg{
    width: 18px;
    margin-top: 5px;
}

section.faqs .rhs a{
    color: var(--blue);
    transition: 0.3s ease all;
    font-weight: 500;
}

section.faqs .faqs-section {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1rem;
}

section.faqs .faq-item {
    border-bottom: none;
    background-color: var(--lightblue);
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 15px;
}

section.faqs .faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-size: 1.1em;
    font-family: var(--satoshi);
    font-weight: 500;
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

section.faqs .faq-question svg{
    width: 20px;
}

section.faqs .faq-answer {
    display: none;
    padding: 0 20px;
    color: var(--black);
}

section.faqs .faq-question[aria-expanded="true"] + .faq-answer {
    display: block;
}

section.faqs .faq-question .arrow {
    transition: transform 0.3s ease;
}

section.faqs .faq-question[aria-expanded="true"] .arrow {
    transform: rotate(180deg);
}


/* ******************************************************
    Single Project
*********************************************************/
.single-project section.hero-text-image.blue-bg{
    margin: 92px 30px 0;
    padding: 0 0 0 calc(8% - 30px);
}

.single-project section.hero-text-image.blue-bg h1{
    font-size: 2.2em;
    margin: 0px 0 18px 0;
}

section.project-content{
    padding: 70px 8%;
    display: flex;
    flex-direction: row;
    gap: 50px;
    justify-content: space-between;
}

section.project-content .lhs{
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

section.project-content .rhs{
    width: 55%;
    background-color: var(--lightblue);
    border-radius: 15px;
    padding: 40px 30px;
}

section.gallery{
    padding: 0px 8% 50px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
}

section.gallery img{
    border-radius: 10px;
    width: calc((100% / 3) - 14px);
    object-fit: cover;
    height: 300px;
}

section.cards-layout.project-layout h2 {
    margin: auto;
    text-align: center;
}

section.cards-layout.project-layout h2 span{
    color: var(--blue);
}


/* ******************************************************
    Archive Project
*********************************************************/
.post-type-archive-project .white-wrapper{
    margin: 92px 15px 0;
    padding: 10px 0 0;
}


.page-template-tpl-about .white-wrapper {
    margin: 92px 15px 0;
    padding: 10px 0 0;
}

.page-template-tpl-about section.features-cards {
    padding: 100px 8% 70px;
}

/* ******************************************************
    Single News
*********************************************************/
.single-news section.hero-text-image.blue-bg {
    margin: 92px 30px 0;
    padding: 0 0 0 calc(8% - 30px);
}

.single-news section.hero-text-image.blue-bg h1 {
    font-size: 2.2em;
    margin: 0px 0 18px 0;
}

.single-news section.project-content .rhs {
    width: 35%;
    background-color: white;
    border-radius: 0;
    padding: 0;
	    display: flex;
    flex-direction: column;
    gap: 30px;
}

.single-news section.project-content .lhs {
    width: 65%;
    gap: 30px;
}

.single-news section.project-content .rhs img {
    border-radius: 15px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.single-news section.cards-layout.project-layout h2{
	text-align: start;
}


/* ******************************************************
    Archive News
*********************************************************/
section.news-archive-hero {
    padding: 120px 8% 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

section.news-archive-hero h1,
section.news-archive-hero h4,
section.news-archive-hero p{
	color: var(--white);
}

section.news-archive-hero .rhs{
max-width: 450px;
}

section.news-archive-hero nav.breadcrumbs a {
    color: var(--white);
}

.post-type-archive-news .white-wrapper{
	background-color: var(--lightblue);
}

section.cards-layout.news-layout ul li {
    width: calc((100% / 4) - 15px);
}

/* ******************************************************
    About
*********************************************************/
section.meet-team{
    padding: 70px 8% 0;
}

section.meet-team h2{
    color: var(--white);
    text-align: center;
}

section.meet-team .wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 50px;
}

section.meet-team .wrapper .box{
    width: calc(25% - 23px);
}

section.meet-team .wrapper .box h5{
    color: var(--white);
    padding:25px 10px 0;
}

section.meet-team .wrapper .box h6{
    color: var(--blue);
    font-size: 0.9em;
    font-weight: 500;
    padding:0px 10px 0;
}


/* ******************************************************
    Form
*********************************************************/
section.centred-text-hero{
	padding: 120px 5% 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    text-align: center;
    margin: auto;
}

section.form{
    background: var(--lightblue);
    margin: auto;
    max-width: 900px;
    border-radius: 15px;
    padding: 70px 5%;
    position: relative;
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 70px;
    margin: 0 8% 70px;
    max-width: unset;
}

div#gform_wrapper_1 {
    padding-top: 20px;
}

section.form .form-contact{
	width: 55%;
	max-width: 650px;
}

section.form .gform-body input[type="text"],
section.form .gform-body select,
.gform_wrapper.gravity-theme .gfield textarea.large{
    border: none;
    padding: 12px;
}

.gform_wrapper.gravity-theme .gform_fields {
    grid-column-gap: 5%!important;
    grid-row-gap: 30px!important;
}

section.form .gform_wrapper.gravity-theme .gfield_label {
    font-size: 0.9em;
    font-weight: 300;
}

section.form p.gform_required_legend {
    display: none;
}

.gform_wrapper.gravity-theme .gfield_required {
    color: var(--blue)!important;
}

.gform_wrapper.gravity-theme .gform_footer input{
border-radius: 50px;
    border: 0;
    background: var(--blue);
    padding: 16px 25px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
    font-family: var(--dmsans);
    font-weight: 500;
    color: var(--white);
    font-size: 0.95em;
    text-transform: capitalize;
}

.gform_wrapper.gravity-theme .gform_footer input:hover{
	background: var(--mediumblue);
    transition: all 0.2s ease;
}

section.form section.contact-detail-map{
	width: 45%;
}

section.contact-detail-map h4{
    color: var(--black);
    font-weight: 500;
    margin-top: 30px;
    font-size: 1em;
    text-transform: capitalize;
}

section.contact-detail-map iframe {
    border-radius: 10px;
}

section.contact-detail-map a svg{
    width: 18px;
    height: 18px;
}

section.contact-detail-map a {
    display: flex;
    align-items: center;
    gap: 8px;
	font-weight: 400;
	font-size: 1.1em;
	color: var(--blue);
}

section.contact-detail-map a:hover{
	color: var(--black);
	transition: 0.3s ease all;
}

section.contact-detail-map .rhs {
    padding-top: 20px;
}

section.contact-detail-map {
    margin: unset;
    flex-direction: column;
    align-items: start;
    gap: 30px;
}

.page-template-tpl-site-survey section.form {
    flex-direction: row-reverse;
}

/* general slider styles */

ul.glide__slides,
ul.glide__slides li{
    margin:0;
    padding:0;
    list-style-type:none;
}

.glide__arrow {
    color: transparent;
    text-shadow: none;
    box-shadow: none;
    border-radius: 0;
    transform: rotate(45deg);
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    border: var(--lightblue) 3px solid;
    transition:all 0.3s ease;
}


.glide__arrow:hover,
.glide__arrow:focus {
    border: var(--black) 3px solid;
    transition:all 0.3s ease;
}

.glide__arrow--right {
    right: -25px;
    border-left: 0!important;
    border-bottom: 0!important;
}

.glide__arrow--left {
    left: -25px;
    border-right: 0!important;
    border-top: 0!important;
}

/* end of slider */





/* ******************************************************
    Footer
*********************************************************/

footer#colophon h2,
footer#colophon h4,
footer#colophon p,
footer#colophon a{
	color: var(--white);
}
footer#colophon .top-text {
    display: flex;
    flex-direction: row;
	gap: 50px;
    justify-content: space-between;
    align-items: center;
    padding: 70px 8% 40px;
	background: #161616;
    position: relative;
}

footer#colophon .top-text h2,
footer#colophon .top-text h4{
	text-wrap: no-wrap;
}

footer#colophon .top-text svg#Layer_1 {
    height: auto;
    width: 280px;
}

footer#colophon .top-text::after {
    content: "";
    width: 85%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #979797;
}

footer#colophon .top-text .wrapper-f{
	width: calc(100% - 360px);
	 display: flex;
	flex-wrap: wrap;
    flex-direction: row;
        column-gap: 50px;
	row-gap: 20px;
       justify-content: start;
    align-items: center;
}

footer#colophon .site-info .wrapper {
    display: flex;
    flex-direction: row;
    justify-content: start;
    flex-wrap: wrap;
    row-gap: 50px;
    gap: 60px;
	width: calc(100% - 500px);
}

footer#colophon .site-info aside#nav_menu-4 ul{
	column-count:1;
}

footer#colophon .custom-widget {
    max-width: 500px;
	background: #444545;
	border-radius: 15px;
	padding: 40px 30px;
    height: fit-content;
}

footer#colophon .custom-widget .contacts{
	margin-top: 10px;
	display:flex;
	flex-direction: column;
	gap: 10px;
}

footer#colophon .custom-widget .contacts a{
	display: flex;
    flex-direction: row;
    justify-content: start;
	align-items: start;
    gap: 15px;
	color: var(--blue);
}

footer#colophon .custom-widget .contacts a svg{
	height: 15px;
    margin-top: 5px;
}

footer#colophon .terms-banner{
display: flex;
    flex-direction: row;
    justify-content: start;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    padding: 6px 8%;
	background: #444545;
}

footer#colophon .terms-banner a,
footer#colophon .terms-banner a p{
	margin-bottom: 0;
	font-size: 0.9em;
}

footer#colophon ul li{
    list-style-type:none;
    margin-bottom: 5px;
}

footer#colophon .site-info ul li a{
	text-wrap: nowrap;
	font-weight: 200;
	font-size: 0.9em;
}

footer#colophon a{
    text-decoration:none;
}

footer#colophon .site-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 45px 8% 70px;
    flex-wrap: wrap;
    background: #161616;
    width: 100%;
}

footer#colophon .site-info .widget {
    margin: 0;
    padding: 0 20px 0 0;
    max-width: unset;
}

footer#colophon .site-info .widget-title,
footer#colophon .custom-widget h4{
    font-weight: 500;
	font-size: 1.2em;
}

footer#colophon .site-info a,
footer#colophon .site-info p,
footer#colophon .site-info li{
    font-size: 1em;
    transition:all 0.3s ease;
}

footer#colophon .site-info ul{
    margin:0;
    column-count:2;
    column-gap: 70px;
}

footer#colophon .site-info a:hover,
footer#colophon .site-info a:focus{
    color:var(--blue);
    transition:all 0.3s ease;
}





/* ******************************************************
    Media Queries
*********************************************************/


@media screen and (max-width:1440px){
    
}

@media screen and (max-width:1400px){
    section.home-hero .text {
    flex-direction: column;
    align-items: start;
    gap: 5px;
}
	header#masthead a.contact-details{
		display: none;
	}
section.home-hero .text div {
    max-width: 660px;
}
}

@media screen and (max-width:1200px){
	footer#colophon .top-text {
    flex-direction: column-reverse;
    gap: 20px;
    align-items: start;
	}
	footer#colophon .top-text .wrapper-f {
    width: 100%;
	}
	section.cards-layout ul li {
    width: calc((100% / 3) - 14px);
	}
    section.banner{
    flex-direction: column;
    align-items: start;
    row-gap: 10px;
}
    header#masthead div.menu-primary-menu-container {
	display: none;
	}
	header#masthead div.menu-mobile-menu-container {
	display: flex;
	}
header#masthead .main-navigation .menu-toggle {
        display: block;
        margin: auto;
    }
    
    header#masthead .main-navigation {
        display: flex;
        position: fixed;
        right: 5%;
        height:80px;
        flex-direction: column;
        justify-content: center;
        z-index: 9999;
    }
    header#masthead .main-navigation ul li.current-menu-item > a{
    color: var(--blue);
}
	header#masthead .main-navigation ul li.current-menu-item > a::after {
    background-color: var(--blue);
	}
    
    header#masthead .main-navigation ul#mobile-menu {
        background: #f8f8f8;
        height: 100vh;
        top: 0;
        left: -500px;
        position: fixed;
        width: calc(100% - 85px);
        max-width:400px;
        min-width:150px;
        padding: 35px 20px 35px 5%!important;
        display: flex!important;
        flex-direction: column;
        justify-content: center;
        transition: all 1s ease;
        border-radius: 0px;
    } 
    
    
    header#masthead .main-navigation.toggled ul#mobile-menu {
        background: var(--darkgrey)!important;
        z-index:9999;
        height: 100vh;
        top: 0;
        left: 0;
        position: fixed;
        width: calc(100% - 85px);
		border-radius: 0!important;
        max-width:400px;
        min-width:150px;
        padding: 35px 20px 35px 5%!important;
        display: flex!important;
        flex-direction: column;
        justify-content: center;
        transition: all 1s ease;
    } 
    
    header#masthead .main-navigation ul li {
        margin: 0;
        font-size: 1.25em;
    }

       header#masthead .main-navigation ul li a{
        color: var(--white);
       }
    
    header#masthead .main-navigation ul li a,
    header#masthead .main-navigation ul li:hover a,
    header#masthead .main-navigation ul li:focus a{
        margin: 0 0 15px;
        line-height: 1em;
        padding-bottom:3px;
    }
    
    header#masthead .main-navigation ul li.current_page_item a, 
    header#masthead .main-navigation ul li ul li.current_page_item a,
    header#masthead .main-navigation ul li.current_page_item:hover a,
    header#masthead .main-navigation ul li.current_page_item:focus a {
        margin: 0 0 15px;
        padding-bottom:3px;
    }

    
    header#masthead .main-navigation ul li {
        height: auto;
    }
    
    header#masthead .main-navigation ul li:hover,
    header#masthead .main-navigation ul li:focus{
        margin:0;
        font-size: 1.25em;
    }
    
    header#masthead .main-navigation ul ul{
        box-shadow: none;
    }
    
    header#masthead button div:first-child {
         margin: 0px 0 5px;
    }
    
    header#masthead button div {
        height: 3px;
        width: 34px;
        background: var(--white);
         margin: 5px 0;
        transition: all 0.3s ease;
    }
    
    header#masthead button:hover div,
header#masthead button:focus div {
        background: var(--blue)0;
        transition: all 0.3s ease;
    }
    
    header#masthead button div:last-child {
         margin: 5px 0 8px;
        transition: all 0.3s ease;
    }
    
    
    header#masthead nav#site-navigation.toggled button div:first-child {
        transform: rotate(45deg);
        width:34px;
        transform-origin: 6px 5px;
        transition: all 0.3s ease;
    }
    
    header#masthead nav#site-navigation.toggled button div {
        width:0;
        transition: all 0.3s ease;
    }
    
    header#masthead nav#site-navigation.toggled button div:last-child {
        transform: rotate(-45deg);
        width:34px;
        transform-origin: 8px -1px;
        transition: all 0.3s ease;
    }
    
    
    header#masthead .menu-toggle{
        background-color: transparent;
        color:var(--white);
        border:0;
        border-radius:0;
        font-size: 0.65em;
        cursor: pointer;
        padding: 0!important;
    }
	header#masthead .main-navigation ul li:hover a, header#masthead .main-navigation ul li:focus a, header#masthead .main-navigation ul li.current-menu-item > a {
    color: var(--blue);
    transition: all 0.3s ease;
}
    
    header#masthead .menu-toggle:hover,
header#masthead .menu-toggle:focus {
        color: var(--blue);
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    header#masthead .menu-toggle:focus {
        outline: 0;
    }
    
    header.active .menu-toggle{
        color:var(--black)!important;
        transition: all 0.3s ease;
    }
    
    header.active button div{
        background-color:var(--black)!important;
        transition: all 0.3s ease;
    }
    
    header.active .menu-toggle:hover,
    header.active .menu-toggle:focus{
        color:var(--blue)!important;
        transition: all 0.3s ease;
    }
    
    header.active button:hover div,
    header.active button:focus div{
        background-color:var(--blue)!important;
        transition: all 0.3s ease;
    }
    .nav-contact-wrapper {
    margin-right: 85px;
}
	section.form {
    flex-direction: column;
	}
	section.form .form-contact,
	section.form section.contact-detail-map{
    width: 100%;
    max-width: 100%;
}
	.page-template-tpl-site-survey section.form {
    flex-direction: column-reverse;
}
	section.cards-layout.news-layout ul li {
    width: calc((100% / 3) - 14px);
}
}

@media screen and (max-width:1100px){
    section.industry-content {
    flex-direction: column;
    }
    section.industry-content .lhs,
    section.industry-content .rhs {
    width: 100%;
    }
    section.hero-text-image .lhs {
    width: 60%;
    }
    section.hero-text-image img {
    width: 40%;
    height: 400px;
    }
    section.project-content .rhs {
    width: 40%;
    padding: 40px 23px;
}
section.project-content .lhs {
    width: 60%;
}
	section.project-content {
    flex-direction: column;
    gap: 40px;
	}
	.single-news section.project-content .lhs,
	.single-news section.project-content .rhs{
		width: 100%;
	}
	section.news-archive-hero {
    flex-direction: column;
    align-items: start;
    gap: 10px;
}
	section.news-archive-hero .rhs {
    max-width: 600px;
}
}

@media screen and (max-width:1024px){
	section.image-text.reversed{
    flex-direction: column;
}
    section.icons-banner .image-wrapper{
    width: calc((100% / 2) - 15px);
    max-width: unset;
    }    
    section.project-steps .wrapper {
    flex-direction: column;
    }
    section.project-steps img {
    width: 100%;
    max-height: 500px;
    }
    section.project-steps .lhs {
    width: 100%;
    }
    .woocommerce-product-gallery__image {
    width: 100%;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) img{
    max-height: 200px;
}
section.features-cards .wrapper {
    flex-direction: column;
    gap: 40px;
}
section.features-cards .wrapper .box {
    width: 100%;
}
section.image-text .rhs {
    padding: 0;
    width: 100%;
}
section.image-text {
    flex-direction: column-reverse;
    gap: 30px;
}
section.image-text img {
    width: 100%;
}
}

@media screen and (max-width:960px){
    .single-product .product {
    flex-direction: column;
    justify-content: space-between;
    gap: 0px;
}
.woocommerce div.product div.summary{
    width: 100%;
}
.woocommerce-page div.product div.images {
    width: 100%;
}
section.faqs .wrapper {
    flex-direction: column;
    gap: 20px;
}
section.faqs .lhs,
section.faqs .rhs {
    width: 100%;
}
.post-type-archive-project section.cards-layout.project-layout ul li:first-child,
	section.cards-layout.project-layout.home ul li{
    margin: 0 auto 15px;
}
.post-type-archive-project section.cards-layout.project-layout ul li:first-child a,
	section.cards-layout.project-layout.home ul li a{
    flex-direction: column;
	gap: 0;
}
.post-type-archive-project section.cards-layout.project-layout ul li:first-child img,
	section.cards-layout.project-layout.home ul li img{
    border-radius: 15px 15px 0px 0px;
    max-height: 400px;
    width: 100%;
}
.post-type-archive-project section.cards-layout.project-layout ul li:first-child .text-content,
	section.cards-layout.project-layout.home ul li .text-content {
    border-radius: 0 0 15px 15px;
    width: 100%;
    padding: 30px 20px;
}
section.meet-team .wrapper .box {
    width: calc(33% - 18px);
}
	footer#colophon .site-info {
    gap: 50px;
    flex-direction: column;
	}
}

@media screen and (max-width:860px){
	section.cards-layout.news-layout ul li {
    width: calc((100% / 2) - 10px);
}
	 section.home-hero .images {
        position: relative;
        display: block;
        overflow: hidden;
        aspect-ratio: 3 / 2;
    }

    section.home-hero .images img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        animation: fadeSlide 12s infinite;
    }
	  section.home-hero .images img:nth-child(1) {
        animation-delay: 0s;
    }
    section.home-hero .images img:nth-child(2) {
        animation-delay: 4s;
    }
    section.home-hero .images img:nth-child(3) {
        animation-delay: 8s;
    }

    @keyframes fadeSlide {
        0% { opacity: 0; }
        8% { opacity: 1; }
        33% { opacity: 1; }
        41% { opacity: 0; }
        100% { opacity: 0; }
    }
	section.cards-layout ul li {
    width: calc((100% / 2) - 10px);
	}
    section.hero-text-image {
    flex-direction: column;
    gap: 30px;
}
section.hero-text-image .lhs {
    width: 100%;
}
section.hero-text-image.blue-bg .lhs {
    padding: 40px calc(8% - 15px) 20px;
}
section.hero-text-image img {
    width: 100%;
}
section.hero-text-image.blue-bg {
    padding: 0;
}
section.about-cards .wrapper {
    flex-direction: column;
    gap: 20px;
}
section.about-cards .wrapper .box {
    width: 100%;
}
.single-project section.hero-text-image.blue-bg{
    gap: 0;
}
section.project-content {
    flex-direction: column;
    gap: 30px;
}
section.project-content .lhs,
section.project-content .rhs {
    width: 100%;
}
section.gallery img {
    width: calc((100% / 3) - 7px);
    height: 200px;
}
section.gallery {
    gap: 10px;
}
section.meet-team .wrapper .box {
    width: calc(50% - 15px);
}
}

@media screen and (max-width:768px){
    section.banner{
    padding: 40px 3.5%;
    margin: 50px 1%;
}
section.icons-banner {
    padding: 25px 5%;
}
section.project-steps {
    padding: 70px 5%;
}
section.project-steps .lhs {
        padding: 40px 25px;
    }
    .single-product .product {
    padding: 40px calc(5% - 15px);
    }
    section.product-extra {
    padding: 50px 5%;
    flex-direction: column;
    gap: 40px;
}
section.cards-layout {
    padding: 70px calc(5% - 15px);
}
	
	section.cards-layout.news-layout{
	    padding: 70px 5%;	
	}
section.product-extra .rhs {
    padding: 30px 20px;
}
section.industry-content {
    padding: 0 5% 50px;
}
section.hero-text-image {
    padding: 0 5% 50px;
}
section.hero-text-image.blue-bg .lhs {
    padding: 40px calc(5% - 15px) 20px;
}
section.about-cards {
    padding: 70px 5%;
}
section.features-cards {
    padding: 20px 5% 0px;
}
section.image-text {
    padding: 70px 5%;
}
section.faqs {
    padding: 70px 5%;
}
section.faqs .faq-item {
    padding: 12px 0;
}
section.project-content {
    padding: 70px 5%;
}
section.gallery {
    padding: 0px 5% 50px;
}
section.gallery img {
    width: calc((100% / 2) - 5px);
}
header#masthead a.contact-details{
    display: none;
}
section.meet-team{
    padding: 70px 5% 0;
}
	section.design-considerations {
    padding: 70px 5%;
}
section.form {
    padding: 60px 5% 50px;
    margin: 0 0 70px;
	}
	section.news-archive-hero {
    padding: 120px 5% 70px;
	}
	section.home-hero {
    padding: 50px calc(5% - 15px);
}
	.page-template-front-page section.banner{
	margin: 0px 1% 30px;
}
	.post-type-archive-product section.cards-layout {
    padding: 20px calc(5% - 15px) 0px;
}
	footer#colophon .terms-banner{
    padding: 6px 5%;
}
footer#colophon .site-info {
    padding: 45px 5%;	
}
}

@media screen and (max-width:640px){
    section.design-considerations .box-wrapper .box {
    width: calc(50% - 13px);
}
	.single-bund-lining section.industry-content .rhs .box-wrapper .box {
    width: calc(50% - 13px);
}
}

@media screen and (max-width:540px){
    section.industry-content .rhs .box-wrapper {
    width: 100%;
}
	.nav-contact-wrapper {
        display: none;
    }
	section.cards-layout.news-layout ul li {
    width: 100%;
}
}

@media screen and (max-width:480px){
    section.banner .links {
    flex-direction: column;
    gap: 15px;
	}
}

@media screen and (max-width:440px){
        section.icons-banner .image-wrapper {
        width: 100%;
        }
        section.project-steps .step-wrapper {
    flex-direction: column;
    gap: 5px;
}
section.project-steps .step-wrapper .step-number {
    font-size: 2em;
}
	    section.cards-layout ul li {
        width: 100%;
    }
	footer#colophon .site-info ul {
    column-count: 1;
	}
}