<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*
 Theme Name:   Template CPL eCommerce 3
 Theme URI:    https://www.commparlimage.ca/
 Description:  ThÃ¨me en dÃ©veloppement
 Author:       Jordan Ouellet
 Author URI:   https://www.commparlimage.ca
 Template:     blankslate
 Version:      1.0.0
 Text Domain:  templatecpl
*/

/********************************************************************************************************************/

html{
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	touch-action: manipulation;
}

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
	margin: 0;
	padding: 0;
	text-decoration: none; 
}

img, fieldset {
	border: 0;
}

/* set image max width to 100% */
img {
	display: block;
	height: auto;
	max-height: 100%;
	max-width: 100%;
	width: auto\9; /* ie8 */
	object-fit: cover;
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

ul li {
	list-style-type: none;
}

del{
	opacity: .5;
}


#human{display:none !important;}


html, body {
	width: 100%;
	min-height: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden;
	background:#111;
}

p {
	line-height: 1.5rem;
	color:#fff;
}

/* INITIALISATION ***************************************************************************************************/

.table{display:table;}
.flex{display:flex;}
.grid{display:grid;}

/********************************************************************************************************************/
/* BACKGROUNDS */


/********************************************************************************************************************/
/* SPECIAL CLASSES */

:root{
	--filter-primary: invert(61%) sepia(39%) saturate(5216%) hue-rotate(360deg) brightness(102%) contrast(107%);
	--filter-white: invert(100%) sepia(8%) saturate(7456%) hue-rotate(287deg) brightness(114%) contrast(115%);
}

.wrap{position:relative; margin:0 auto; width: 1300px;}
.specialheight{min-height:760px;}
.bold{font-weight:700;}
.light{font-weight:300;}
.flex{display:flex;}
.grid{display:grid;}
body.no-scroll,
html.no-scroll{overflow: hidden;}

.w-80{
	width: 80%;
	margin: auto;
}

.page-top-pad{
	padding: 250px 0 3rem;
}

.hp-4{
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.hp-6{
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.hp-angled{
	position: relative;
	padding: 8rem 0;
}

.nm-angled{
	margin-top: -5.05rem;
}

.single-angle{
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	clip-path: polygon(0 5rem, 100% 0, 100% calc(100% - 5rem), 0 100%);
	transform: scaleZ(1);
}

.single-angle-reverse{
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	clip-path: polygon(0 0, 100% 5rem, 100% 100%, 0 calc(100% - 5rem));
	transform: scaleZ(1);
}

.double-angle{
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	clip-path: polygon(0 5rem, 100% 0, 100% 100%, 0 calc(100% - 5rem));
	transform: scaleZ(1);
}

.double-angle-reverse{
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	clip-path: polygon(0 0, 100% 5rem, 100% calc(100% - 5rem), 0 100%);
	transform: scaleZ(1);
}

.nm-footer{
	margin-bottom: -9rem;
}

.nm-footer-angled{
	margin-bottom: -5.05rem;
}

.col-reverse{
	flex-direction: row-reverse;
}

/* 2 Column layout style */

body:not(.woocommerce-page) .col-2{
	display: flex;
	align-items: center;
	gap: 3.25rem;
}

body:not(.woocommerce-page) .col-2 &gt; *{
	flex-basis: 50%;
	flex-grow: 1;
	min-width: 50%;
	align-self:center;
}

body:not(.woocommerce-page) .col-2 img{
	border-radius: 40px;
}

.grid-2{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	padding: 2rem 0;
}

/* 3 Column layout style */

.col-3{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.col-4{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

/* General text block style */

.section-title .main-title{
	font-size: 2.25rem;
	line-height: 2.5rem;
	margin-bottom: 2rem;
	color:#fff;
}

.section-title .extra-title{
	font-size: 1.5rem;
	font-weight: 600;
	color: #555555;
	margin-bottom: 2rem;
}

.section-title.sm-title .main-title{
	font-size: 1.5rem;
	line-height: 2.25rem;
}

.section-title.sm-title .extra-title{
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

.extra-title{
	font-size: 1.5rem;
	font-weight: 600;
	color: #555555;
	margin-bottom: 2rem;
}

.text-block &gt; p:not(:last-child){
	margin-bottom: 1rem;
	color:#fff;
}

.text-block &gt; ul,
.sm-text-block &gt; ul{
	margin-top: 2.5rem;
	margin-left: 2rem;
	margin-bottom: 2.5rem;
}

.text-block &gt; ul &gt; li,
.sm-text-block &gt; ul &gt; li{
	list-style-type: disc;
	padding-left: 1rem;
	color:#fff;
}

.text-block &gt; ul &gt; li:not(:last-child),
.sm-text-block &gt; ul &gt; li:not(:last-child){
	margin-bottom: 1rem;
}

.text-block &gt; ul &gt; li::marker,
.sm-text-block &gt; ul &gt; li::marker{
	content: 'â–¶';
	color: var(--primary-color);
}

.text-block &gt; a{
	margin-top: 1.25rem;
}

.sm-text-block &gt; h3{
	margin-bottom: .5rem;
}

.block-center{
	width: 80%;
	margin: auto;
}

.block-center.w-60{
	width: 60%;
}

.image-shape-layout{
	border: 1rem solid #222;
	box-shadow: -5rem 6.5rem 0 #222;
	margin-left: auto;
	margin: 0 0 6.5rem;
}

.image-shape-layout-reverse{
	border: 1rem solid #222;
	box-shadow: 5rem 6.5rem 0 #222;
	margin-left: auto;
	margin: 0 0 6.5rem;
}

/* Icon boxes */

.icon-boxes-col{
	padding: 1rem 0;
}

.icon-boxes-col .icon-box .icon-container{
	background-color: var(--primary-color);
	border-radius: 20px;
	margin-bottom: 1.5rem;
	overflow: hidden;
}

.icon-boxes-col .icon-box .icon-container .icon{
	background-color: #fff;
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: 5rem;
	padding: 5rem 3rem;
}

.icon-boxes-col .icon-box .icon-container .image{
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 5rem 3rem;
}

.icon-boxes-col .icon-box .text h3{
	font-size: 1.125rem;
	margin-bottom: .625rem;
	color:#fff;
}

.icon-boxes-col .icon-box .text p{
	font-size: .875rem;
}

.icon-box-outline{
	border: 1px solid var(--primary-color);
	padding: 2rem 1.5rem;
	border-radius: 10px;
}

.icon-box-outline .icon{
	width: 3rem;
	height: 3rem;
	background-color: var(--primary-color);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: contain;
	margin: auto;
}

.icon-box-outline.address .icon{
	-webkit-mask-image: url(img/icons/icon-map.svg);
	mask-image: url(img/icons/icon-map.svg);
}

.icon-box-outline.email .icon{
	-webkit-mask-image: url(img/icons/icon-email.svg);
	mask-image: url(img/icons/icon-email.svg);
}

.icon-box-outline.phone .icon{
	-webkit-mask-image: url(img/icons/icon-phone.svg);
	mask-image: url(img/icons/icon-phone.svg);
}

.icon-box-outline h3{
	margin: .5rem;
	color:#fff;
}

.icon-box-outline p{
	font-size: .875rem;
}

.icon-box-outline p span{
	display: inline-block;
}

.icon-box-outline a{
	font-size: .875rem;
	font-weight: 500;
	color: #fff;
	transition: color .2s;
}

.icon-box-outline a:hover{
	color: var(--primary-color);
}

/* General buttons style */

.btn-primary{
	display: inline-block;
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	background-color: var(--primary-color);
	padding: 1rem 2rem;
	border-radius: 10px;
	transition: background-color .2s;
}

.btn-primary:hover{
	background-color: var(--primary-hover);
}

.btn-primary-outline{
	display: inline-block;
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--primary-color);
	padding: .75rem 2rem;
	border: 3px solid var(--primary-color);
	border-radius: 10px;
	transition: color .2s, background-color .2s;
}

.btn-primary-outline:hover{
	color: #fff;
	background-color: var(--primary-color);
}

.white-btn{
	font-size: .875rem;
	font-weight: 500;
	color: var(--primary-color);
	text-transform: uppercase;
	background-color: #fff;
	padding: .875rem 1rem;
	border-radius: 10px;
	transition: color .2s, background-color .2s;
}

.white-btn:hover{
	color: #fff;
	background-color: var(--primary-color);
}

.arrow-btn{
	display: flex;
	align-items: center;
	width: max-content;
	color: var(--primary-color);
	font-weight: 600;
	text-transform: uppercase;
	transition: color .2s;
}

.arrow-btn:hover{
	color: var(--primary-hover);
}

.arrow-btn::after{
	display: block;
	content: '';
	width: 2rem;
	height: 2rem;
	background-color: var(--primary-color);
	mask-image: url(img/icons/icon-arrow-right.svg);
	mask-position: center center;
	mask-size: 100%;
	mask-repeat: no-repeat;
	margin-left: .5rem;
	transition: background-color .2s, transform .2s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.arrow-btn:hover::after{
	background-color: var(--primary-hover);
	transform: translateX(.5rem);
}

.arrow-btn.center-btn{
	margin-left: auto;
	margin-right: auto;
}

/**********/

.extra-ls,
.extra-ls p{
	line-height: 1.8rem;
}

.white-text,
.white-text .extra-title,
.white-text .main-title{
	color: #fff;
}

.img-mid{
	width: 90%;
	margin: 4rem auto;
}

.img-rounded{
	border-radius: 20px;
}

.dark-overlay{
	position: relative;
}

.dark-overlay::before{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #000;
	opacity: .65;
	z-index: 0;
}

.anchor{position:relative; visibility:hidden; top:-150px; display:block;}
.overlay{position: fixed; width: 100%; height: 100%; background-color: #000; visibility: hidden; opacity: 0; z-index: 1500;
	transition: all 0.6s;
}
.overlay.show-overlay{visibility: visible; opacity: 0.3;}

/* ALIGN */
.text-center{text-align: center;}
.align-right{margin-left: auto;}
.align-center{margin-left: auto; margin-right: auto;}
.side{width: 95%;}
.mid{width: 90%;}
.half{height:400px;}
.wide{height: 400px;}

/* ELEMENTS CLASSES */

.anchor{display: block; position: relative; top: -400px; visibility: hidden;}

.general-section{margin-bottom:150px;}

/********************************************************************************************************************/
/* NAV STYLE */

#nav{
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #111;
	box-shadow: 0 0 18px #00000023;
	transform: skewY(-1.5deg);
	transition: transform .5s;
	z-index: 1000;
}

/* Navbar top styling */

#nav .nav-top{
	position: relative;
	background-color: #222;
	padding: .625rem 0;
	transform: skewY(1.5deg);
	transition: transform .5s;
	z-index: 1010;
}

#nav .nav-top .left{width:45%;}
#nav .nav-top .right{width:45%; text-align:right;}

#nav .nav-top &gt; .flex{
	align-items: center;  justify-content:space-between;
}

#nav .nav-top .item{
	display: inline-flex;
	align-items: center;
	color: #fff;
	margin-right: 1rem;
	transition: all 0.3s;
}
#nav .nav-top .item:hover{
	color: var(--primary-color);
}

#nav .nav-top .item svg{
	width: 24px;
	stroke: #000;
	margin-right: .5rem;
	transition: all 0.3s;
	color:#fff !important;
	stroke:#fff !important;
}
#nav .nav-top .item:hover svg{
	stroke: var(--primary-color);
}

#nav .nav-top .socials{
	display: inline-block;
	margin-left: auto;
}

#nav .nav-top .socials svg{
	width: 24px;
	fill: #000;
	transition: all 0.3s;
}

#nav .nav-top .socials a{
	display: inline-block;
}

#nav .nav-top .socials a:not(:last-child){
	margin-right: .25rem;
}

#nav .nav-top .ecom-links{
	display: inline-flex;
	padding-left: 1.5rem;
	border-left: 1px solid #0000001A;
	margin-left: 1.5rem;
}

#nav .nav-top .ecom-links &gt; a{
	position: relative;
}

#nav .nav-top .ecom-links &gt; a:not(:last-child){
	margin-right: .5rem;
}

#nav .nav-top .ecom-links .ecom-icon{
	display: inline-block;
	width: 1.75rem;
	height: 1.75rem;
	background-color: #fff;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	-webkit-mask-size: 100%;
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: 100%;
	transition: background-color .2s;
}

#nav .nav-top .ecom-links .ecom-icon:hover{
	background-color: var(--primary-hover);
}

#nav .nav-top .ecom-links .ecom-icon.profile{
	-webkit-mask-image: url(img/icons/profile-icon.svg);
	mask-image: url(img/icons/profile-icon.svg);
}

#nav .nav-top .ecom-links .ecom-icon.cart{
	-webkit-mask-image: url(img/icons/shopping-cart-icon.svg);
	mask-image: url(img/icons/shopping-cart-icon.svg);
}

#nav .nav-top .ecom-links .cart-link .cart-count{
	background-color: var(--primary-color);
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 14px;
	height: 1rem;
	text-align: center;
	color: #fff;
	font-weight: 500;
	font-size: .875rem;
	border: 2px solid transparent;
	background: radial-gradient(5px -9px, circle, transparent 8%, var(--primary-color) 26px);
	background-color: var(--primary-color);
	padding: 1px 2px 1px 2px;
	border-radius: 12px;
}

#nav .nav-top .lang-link{
	color: #000;
    font-weight: 700;
    border-left: 1px solid #0000001A;
    margin-left: 1.5rem;
    padding-left: 1.5rem;
    transition: color .2s;
}

#nav .nav-top .lang-link:hover{
	color: var(--primary-color);
}

/* Navbar main section styling */

#nav .nav-main{
	position: relative;
	padding: 1rem 0;
	transform: skewY(1.5deg) scaleZ(1);
	transition: transform .5s, padding .3s;
}

#nav .nav-main .flex{
	align-items: center;
	justify-content: space-between;
	gap: 3rem;
}

#nav .nav-main .logo{
	max-width: 250px;
}

#nav .nav-main .menu{
	display: flex;
	align-items: center;
	gap: 1rem;
}

#nav .nav-main .menu &gt; li &gt; a{
	display: flex;
	align-items: center;
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	transition: all 0.3s;
}
#nav .nav-main .menu &gt; li:hover &gt; a{
	color: var(--primary-color);
}

#nav .nav-main .menu &gt; li.btn-quote &gt; a{
	color: #fff;
	background-color: var(--primary-color);
	padding: .875rem 1.25rem;
	border-radius: 10px;
	transition: all 0.3s;
}
#nav .nav-main .menu &gt; li.btn-quote &gt; a:hover{
	background-color: var(--primary-hover);
}

#nav .nav-main .mobile-menu-open-btn{
	display: none;
	width: 3rem;
	height: 3rem;
	background-color: #fff;
	-webkit-mask: url(img/icons/icon-menu.svg) no-repeat center center/contain;
	mask: url(img/icons/icon-menu.svg) no-repeat center center/contain;
	border: none;
	cursor: pointer;
	transition: background-color .2s;
}

#nav .nav-main .mobile-menu-open-btn:hover{
	background-color: var(--primary-color);
}

#nav .nav-main .menu .menu-item-has-children{
	position: relative;
}

#nav .nav-main .menu .menu-item-has-children &gt; a::after{
	display: block;
	content: 'â–¾';
	position: relative;
	top: -2px;
	font-size: 1rem;
	margin-left: .5rem;
}

#nav .nav-main .menu .menu-item-has-children .sub-menu{
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 300px;
}

#nav .nav-main .menu .menu-item-has-children .sub-menu::before{
	display: block;
	content: '';
	width: 100%;
	height: 1rem;
}

#nav .nav-main .menu .menu-item-has-children:hover .sub-menu{
	display: block;
}

#nav .nav-main .menu .menu-item-has-children .sub-menu &gt; li &gt; a{
	display: block;
	color: #fff;
	background-color: var(--primary-color);
	padding: .75rem 1rem;
}

#nav .nav-main .menu .menu-item-has-children .sub-menu &gt; li &gt; a:hover{
	background-color: #000;
}

#nav .logo img{
	transition: all 0.3s;
}

/* Menu dropdown styling */

.menu .sub-menu{
	display: none;
}

/* SCROLLED */

#nav.scrolled{
	transform: skewY(0);
}

#nav.scrolled .nav-top{
	transform: skewY(0);
}

#nav.scrolled .nav-main{
	padding: 1rem 0 1.5rem;
	transform: skewY(0);
}
#nav.scrolled .nav-main::before{
	transform: scale(2) rotate(0);
}

#nav.scrolled .logo img{
	max-width: 130px;
}

/**
 * Mobile menu styling
 */

#mobile-menu{
	position: fixed;
	width: 75%;
	height: 100%;
	right: -75%;
	background-color: #f4f4f4;
	padding: 2rem;
	border-top: 1rem solid var(--primary-color);
	border-left: 1rem solid var(--primary-color);
	box-sizing: border-box;
	transition: right .5s;
	z-index: 2000;
}

#mobile-menu.open-menu{
	right: 0;
}

#mobile-menu .menu &gt; li:not(:last-child){
	margin-bottom: 1rem;
}

#mobile-menu .menu &gt; li &gt; a{
	font-size: 1.25rem;
	font-weight: 500;
	color: #000;
	transition: color .2s;
}

#mobile-menu .menu &gt; li &gt; a:hover{
	color: var(--primary-color);
}

#mobile-menu .mobile-menu-close-btn{
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	background-color: var(--primary-color);
	-webkit-mask: url(img/icons/icon-close.svg) no-repeat center center/contain;
	mask: url(img/icons/icon-close.svg) no-repeat center center/contain;
	border: none;
	cursor: pointer;
	transition: background-color .2s;
}

#mobile-menu .mobile-menu-close-btn:hover{
	background-color: #000;
}

#mobile-menu .extra-info{
	border-top: 1px solid #e4e4e4;
	padding-top: 1.5rem;
	margin-top: 1.5rem;
}

#mobile-menu .extra-info .item{
	display: flex;
	align-items: center;
	font-weight: 400;
	color: #000;
	margin-bottom: 1rem;
	transition: all 0.3s;
}
#mobile-menu .extra-info .item:hover{
	color: var(--primary-color);
}

#mobile-menu .extra-info .item svg{
	width: 24px;
	stroke: #000;
	margin-right: .5rem;
	transition: all 0.3s;
}
#mobile-menu .extra-info .item:hover svg{
	stroke: var(--primary-color);
}

#mobile-menu .lang-link{
	display: block;
	font-weight: 700;
	color: #000;
	font-size: 1.25rem;
	float: right;
	transition: color .2s;
}

#mobile-menu .lang-link:hover{
	color: var(--primary-color);
}

/********************************************************************************************************************/
/* HOME PAGE TOP STYLES */

#hero-section{
	position: relative;
	margin-top: -3rem;
}

#hero-section::after{
	display: block;
	content: '';
	width: 100%;
	height: 250px;
	position: absolute;
	top: 96%;
	background-color: var(--primary-color);
	transform: skewY(4deg);
	z-index: 1;
}

#hero-section .swiper-slide{
	height: 1080px;
}

#hero-section .swiper-slide::before{
	display: block;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	top: 0;
	opacity: 0.5;
}

#hero-section .swiper-slide .flex{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 32%;
}

#hero-section .swiper-slide h1,
#hero-section .swiper-slide h2{
	max-width: 70%;
	font-size: 3rem;
	color: #fff;
	margin-bottom: 1rem;
}

#hero-section .swiper-slide p{
	max-width: 70%;
	font-size: 1.875rem;
	color: #fff;
	line-height: 2.5rem;
	margin-bottom: 3.125rem;
}

#hero-section .swiper-slide .btn-hero{
	display: inline-block;
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	padding: 1.25rem 2.125rem;
	background-color: var(--primary-color);
	border-radius: 10px;
	transition: all 0.3s;
}
#hero-section .swiper-slide .btn-hero:hover{
	background-color: var(--primary-hover);
}

/********************************************************************************************************************/
/* HOME PAGE BODY STYLES */

#home-content{
	position: relative;
	z-index: 2;
}

#home-content::before{
	display: block;
	content: '';
	width: 100%;
	height: 500px;
	position: absolute;
	top: -25px;
	background-color: #111;
	transform: skewY(-8deg);
}

#home-content &gt; *:not(:last-child){
	margin-bottom: 8rem;
}

/**
 * Section 1 - Presentation styling
 */

#home-content .presentation img{
	/*border-left: 1rem solid #fff;
	border-top: 1rem solid #fff;*/
	box-sizing: border-box;
}

#home-content .icon-boxes{
	padding: 3.5rem 0;
}

#home-content .icon-box{
	padding: 0 1rem;
}

#home-content .icon-box .icon{
	flex-shrink: 0;
	width: 64px;
	background-color: var(--primary-color);
	mask-repeat: no-repeat;
	margin-right: 1.5rem;
}

#home-content .icon-box h3{
	font-size: 1.25rem;
	margin-bottom: .625rem;
	color:#fff;
}

/**
 * eCommerce Featured Products styling
 */

#home-content .featured-products{
	margin-top: -4rem;
}

#home-content .featured-products .col-4{
	margin: 4rem 0;
}

#home-content .featured-products .product-info{
	display: block;
	color: #000;
	margin-bottom: 2rem;
	transition: color .2s;
}

#home-content .featured-products .product-info:hover{
	color: var(--primary-color);
}

#home-content .featured-products .product-info img{
	margin-bottom: 1rem;
}

#home-content .featured-products .product-info .product-name{
	margin-bottom: .5rem;
	color:#fff;
}

#home-content .featured-products .product .add_to_cart_inline &gt; a{
	display: inline-block;
	font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	background-color: var(--primary-color);
	padding: 1rem 2rem;
	border-radius: 10px;
	transition: background-color .2s;
}

#home-content .featured-products .product .add_to_cart_inline &gt; a:hover{
	background-color: var(--primary-hover);
}

/**
 * Section 2 - Services styling
 */

#home-content .services{
	position: relative;
}

#home-content .services::before{
	display: block;
	content: '';
	position: absolute;
	top: 28%;
	width: 100%;
	height: 60%;
	background-color: #222;
	transform: skewY(-3deg);
}

#home-content .services .arrow-btn{
	margin-bottom: 4rem;
}

#home-content .services .services-container{
	display: flex;
	justify-content:center;
	gap: 2rem;
	
}

#home-content .services .service-box{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	position: relative;
	min-height: 400px;
	color: #fff;
	text-align: center;
	padding: 1rem 2rem;
	border: 2px solid var(--primary-color);
	border-radius: 20px;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
	transition: transform .5s;
	width:22%;
}

#home-content .services .service-box &gt; *{
	z-index: 1;
}

#home-content .services .service-box::before{
	display: block;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	background-image: linear-gradient(to top, #000, transparent);
	opacity: 1;
	transition: opacity .5s, background-image .5s, height .5s
}

@media (hover: hover) {

	#home-content .services .service-box:hover{
		transform: translateY(-2.5rem);
	}

	#home-content .services .service-box:hover::before{
		height: 100%;
	}

	#home-content .services .service-box p{
		display: none;
	}

	#home-content .services .service-box a{
		display: none;
	}

}

@media (hover: none) {

	#home-content .services .service-box::before{
		height: 100%;
	}

	#home-content .services .service-box p,
	#home-content .services .service-box a{
		display: block !important;
	}

}

#home-content .services .service-box h3{
	margin-bottom: 1rem;
}

#home-content .services .service-box h3::after{
	display: block;
	content: '';
	width: 3rem;
	border-bottom: 1px solid #fff;
	margin: .5rem auto 0;
}

#home-content .services .service-box a{
	margin-top: 1rem;
}

/**
 * Section 4 - Blog styling
 */

#home-content article &gt; *:not(:last-child){
	margin-bottom: 1rem;
}

#home-content article .article-image{
	display: block;
	position: relative;
	background-color: #000;
	border-radius: 10px;
	overflow: hidden;
}

#home-content article .article-image img{
	width: 100%;
	max-height: 300px;
}

#home-content article .article-date{
	position: absolute;
	bottom: 0;
	left: 0;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	background-color: var(--primary-color);
	padding: 1rem;
	box-sizing: border-box;
	border-top-right-radius: 20px;
}

#home-content article .article-title{
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	margin: 1rem 0;
	transition: color .2s;
}

#home-content article:hover .article-title{
	color: var(--primary-color);
}

/**
 * Section 5 - Testimonies styling
 */

#home-content .testimonies{
	position: relative;
	color: #fff;
	padding: 6rem 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
	transform: scaleZ(1);
}

#home-content .testimonies::before{
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--primary-color);
	opacity: .9;
}

#home-content .testimonies .section-title{
	font-size: 1.875rem;
}

#home-content .testimonies .icon-quote{
	width: 4rem;
	height: 4rem;
	background-color: #fff;
	mask: url(img/icons/icon-quote.svg) no-repeat center center/contain;
	margin: 2rem auto;
}

#home-content .testimonies .testimony-slider{
	width: 60%;
}

#home-content .testimonies .testimony-slider .testimony-message,
#home-content .testimonies .testimony-slider .testimony-name{
	line-height: 2.25rem;
}

#home-content .testimonies .testimony-slider .testimony-name{
	font-weight: 600;
}

#home-content .testimonies .testimony-slider-dots{
	display: none;
	position: relative;
	margin-top: 2rem;
}

#home-content .testimonies .testimony-slider-dots .swiper-pagination-bullet{
	background: #fff;
	opacity: .5;
}

#home-content .testimonies .testimony-slider-dots .swiper-pagination-bullet-active{
	background: #fff;
	opacity: 1;
}

#home-content .testimonies .testimony-slide-arrow{
	all: unset;
	position: absolute;
	top: 50%;
	width: 4rem;
	height: 4rem;
	background-color: #fff;
	mask: url(img/icons/icon-arrow-simple.svg) no-repeat center center/contain;
	opacity: .5;
	cursor: pointer;
	transition: opacity .2s;
}

#home-content .testimonies .testimony-slide-arrow:hover{
	opacity: 1;
}

#home-content .testimonies .testimony-slide-arrow.testimony-slide-prev{
	left: 10%;
}

#home-content .testimonies .testimony-slide-arrow.testimony-slide-next{
	right: 10%;
	transform: scaleX(-1);
}

/**
 * Section 7 - Portfolio styling
 */

#home-content .portfolio .portfolio-container{
	margin-top: 3rem;
}

#home-content .portfolio .portfolio-single{
	display: block;
	position: relative;
	min-height: 260px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border-radius: 20px;
	overflow: hidden;
	transition: transform .5s;
}

#home-content .portfolio .portfolio-single:hover{
	transform: translateY(-1rem);
}

#home-content .portfolio .portfolio-single::before{
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0;
	transition: opacity .5s;
}

#home-content .portfolio .portfolio-single:hover::before{
	opacity: .5;
}

#home-content .portfolio .portfolio-single .portfolio-title{
	position: absolute;
	bottom: 10%;
	left: 0;
	right: 0;
	font-size: 1.5rem;
	font-weight: 600;
	color: #fff;
	padding: 1rem;
	margin: auto;
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity.3s, transform .3s;
	z-index: 1;
}

#home-content .portfolio .portfolio-single:hover .portfolio-title{
	opacity: 1;
	transform: translateY(0);
	transition-delay: .3s;
}

#home-content .portfolio .portfolio-single .portfolio-title::after{
	display: block;
	content: '';
	width: 3rem;
	border-bottom: 2px solid #fff;
	margin: .5rem auto 0;
}

/**
 * Section 8 - Contact / Request quote styling
 */

.quote-form{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
}

.quote-form &gt; *{
	width: 100%;
	box-sizing: border-box;
}

.quote-form &gt; *.half-width{
	width: 47.5%;
}

.quote-form input[type=text],
.quote-form input[type=email],
.quote-form select{
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	border: none;
	border-bottom: 2px solid var(--primary-color);
	padding: .5rem;
}

.quote-form textarea{
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	min-height: 200px;
	border: 2px solid var(--primary-color);
	padding: .5rem;
}

.quote-form input[type=submit]{
	display: inline-block;
	width: max-content;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--primary-color);
    border: none;
    padding: .75rem 2rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .2s;
}

.quote-form input[type=submit]:hover{
	background-color: var(--primary-hover);
}

/**
 * Section 9 - Partners styling
 */

#home-content .partners{
	background-color: #f4f4f4;
	padding: 3rem 0 8rem;
}

#home-content .partners .partners-container{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5rem;
}

/********************************************************************************************************************/
/* GENERAL PAGE STYLING */
/********************************************************************************************************************/

#page-top{
	position: relative;
	height: 750px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	box-shadow: 0 0 30px #00000066;
	margin-bottom: 4rem;
}

#page-top::before{
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: .65;
	z-index: 0;
}

#page-top::after{
	display: block;
	content: '';
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 150px;
	background-color: var(--primary-color);
	clip-path: polygon(0 0, 100% 60%, 100% 100%, 0 100%);
	z-index: 10;
}

#page-top &gt; .wrap{
	height: 100%;
}

#page-top .page-title{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 65%;
	color: #fff;
}

#page-top .page-title h1{
	font-size: 3rem;
}

#page-top .page-title p{
	max-width: 65%;
	font-size: 1.5rem;
	line-height: 2rem;
	margin-top: 1rem;
}

/********************************************************************************************************************/
/* About Us page styling */
/********************************************************************************************************************/

#about-us .cta-section{
	display: flex;
	align-items: center;
	gap: 10rem;
}

#about-us .cta-section .cta-text h3{
	font-size: 1.5rem;
	margin-bottom: 2rem;
}

#about-us .cta-section .cta-btn{
	flex-shrink: 0;
}

/********************************************************************************************************************/
/* Portfolio page styling */
/********************************************************************************************************************/

#portfolio .grid-2{
	gap: 2rem;
}

#portfolio .portfolio-single{
	display: block;
	position: relative;
	min-height: 350px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border-radius: 20px;
	overflow: hidden;
	transition: transform .5s;
}

#portfolio .portfolio-single:hover{
	transform: translateY(-1rem);
}

#portfolio .portfolio-single::before{
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0;
	transition: opacity .5s;
}

#portfolio .portfolio-single:hover::before{
	opacity: .5;
}

#portfolio .portfolio-single .portfolio-title{
	position: absolute;
	bottom: 10%;
	left: 0;
	right: 0;
	font-size: 1.875rem;
	font-weight: 600;
	color: #fff;
	padding: 1rem;
	margin: auto;
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity.3s, transform .3s;
	z-index: 1;
}

#portfolio .portfolio-single:hover .portfolio-title{
	opacity: 1;
	transform: translateY(0);
	transition-delay: .3s;
}

#portfolio .portfolio-single .portfolio-title::after{
	display: block;
	content: '';
	width: 3rem;
	border-bottom: 2px solid #fff;
	margin: .5rem auto 0;
}

.widget-container{margin-bottom:30px;}
.main-content h2, .widget-title, .wp-block-heading, .woocommerce-Price-amount{color:#fff;}


/**
 * Portfolio summary page styling
 */

#portfolio-single .portfolio-container{
	display: flex;
}

#portfolio-single .portfolio-container &gt; *:first-child{
	width: 70%;
}

#portfolio-single .portfolio-container &gt; *:last-child{
	width: 30%;
}

#portfolio-single .main-content .portfolio-image{
	display: block;
	position: relative;
	background-color: #000;
	border-radius: 10px;
	overflow: hidden;
}

#portfolio-single .main-content h1{
	font-size: 2rem;
	margin: 3rem 0 2rem;
}

#portfolio-single .main-content .text-content &gt; p:not(:last-child){
	margin-bottom: 1rem;
}

#portfolio-single .main-content .portfolio-gallery{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin: 3rem 0;
}

#portfolio-single .main-content .portfolio-gallery &gt; a{
	display: block;
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	transition: opacity 0.3s;
}

#portfolio-single .main-content .portfolio-gallery &gt; a:hover{
	opacity: .6;
}

#portfolio-single .main-content .portfolio-gallery &gt; a &gt; img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#portfolio-single .sidebar{
	margin-left: 3rem;
}

#portfolio-single .sidebar h3{
	font-size: 1.25rem;
	margin-bottom: 2rem;
}

#portfolio-single .sidebar .project-preview{
	display: flex;
	align-items: center;
	gap: 1rem;
	color: #666;
	transition: color .3s;
}

#portfolio-single .sidebar .project-preview:hover{
	color: var(--primary-color);
}

#portfolio-single .sidebar .project-preview:not(:last-child){
	margin-bottom: 1rem;
}

#portfolio-single .sidebar .project-preview img{
	width: 8rem;
	border-radius: 10px;
	transition: opacity .3s;
}

#portfolio-single .sidebar .project-preview:hover img{
	opacity: .6;
}

#portfolio-single .sidebar .project-preview h4{
	margin-bottom: .3rem;
}

#portfolio-single .sidebar .project-preview p{
	font-size: .875rem;
	line-height: 1.25rem;
}

/********************************************************************************************************************/
/* Contact styling */
/********************************************************************************************************************/

#contact .contact-form{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 3rem 1rem;
}

#contact .contact-form &gt; *{
	width: 100%;
	box-sizing: border-box;
}

#contact .contact-form &gt; *.half-width{
	width: 47.5%;
}

#contact .contact-form input[type=text],
#contact .contact-form input[type=email],
#contact .contact-form select{
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	border: none;
	border-bottom: 2px solid var(--primary-color);
	padding: .5rem;
}

#contact .contact-form textarea{
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	min-height: 200px;
	border: 2px solid var(--primary-color);
	padding: .5rem;
}

#contact .contact-form input[type=submit]{
	display: inline-block;
	width: max-content;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--primary-color);
    border: none;
    padding: .75rem 2rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .2s;
}

#contact .contact-form input[type=submit]:hover{
	background-color: var(--primary-hover);
}

#contact .hours-section .col-2{
	align-items: stretch;
	gap: 0;
}

#contact .open-hours{
	color: #fff;
	background-color: #4a4a4a;
	padding: 6rem 10rem 10rem 6rem;
	box-sizing: border-box;
}

#contact .open-hours h2{
	display: flex;
	align-items: center;
	margin-bottom: 3rem;
}

#contact .open-hours h2::before{
	display: block;
	content: '';
	width: 2.5rem;
	height: 2.5rem;
	background-color: #fff;
	-webkit-mask: url(img/icons/icon-clock.svg) no-repeat center center/contain;
	mask: url(img/icons/icon-clock.svg) no-repeat center center/contain;
	margin-right: 1rem;
}

#contact .open-hours .open-hours-day{
	display: flex;
	align-items: center;
	gap: 1rem;
	color: #fff;
}

#contact .open-hours .open-hours-day:not(:last-child){
	margin-bottom: 1rem;
}

#contact .open-hours .open-hours-day::before{
	display: block;
	content: '';
	width: 100%;
	border-bottom: 1px dotted #fff;
	flex-grow: 1;
	order: 1;
}

#contact .open-hours .open-hours-day p:first-of-type{
	flex-shrink: 0;
	order: 0;
}

#contact .open-hours .open-hours-day p:last-of-type{
	flex-shrink: 0;
	order: 2;
}

#contact .hours-section iframe{
	min-height: 500px;
}

/********************************************************************************************************************/
/* Quote page styling */
/********************************************************************************************************************/

#quote .quote-form{
	gap: 2rem 1rem;
	margin-top: 3rem;
}

/********************************************************************************************************************/
/* Blog styling */
/********************************************************************************************************************/

.blog-container{
	display: flex;
}

.blog-container .grid-2{
	gap: 3rem 1.5rem;
	padding: 0;
}

.blog-container &gt; *:first-child{
	width: 70%;
}

.blog-container &gt; *:last-child{
	width: 30%;
}

#blog article .article-image{
	display: block;
	position: relative;
	background-color: #000;
	border-radius: 10px;
	overflow: hidden;
}

#blog article .article-image img{
	width: 100%;
	max-height: 300px;
}

#blog article .article-date{
	position: absolute;
	bottom: 0;
	left: 0;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	background-color: var(--primary-color);
	padding: 1rem;
	box-sizing: border-box;
	border-top-right-radius: 20px;
}

#blog article .entry-title{
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	margin: 1rem 0;
	transition: color .2s;
}

#blog article:hover .entry-title{
	color: var(--primary-color);
}

#blog article p{
	line-height: 1.8rem;
	margin-bottom: 1rem;
}

/**************************************/

.blog-container .sidebar{
	margin-left: 2rem; color:#fff;
}

.blog-container .sidebar .widget_block:first-child{
	padding-bottom: 1.5rem;
}

.blog-container .sidebar .widget_block:not(:first-child){
	padding: 1.5rem 0;
}

.blog-container .sidebar .widget_block h2{
	font-size: 1.25rem;
}

.blog-container .sidebar .widget_block ul{
	margin-top: 1.25rem;
}

.blog-container .sidebar .widget_block ul &gt; li:not(:last-child){
	margin-bottom: 1rem;
}

.blog-container .sidebar .widget_block ul &gt; li &gt; a{
	color: #fff;
	transition: color .2s;
}

.blog-container .sidebar .widget_block ul &gt; li &gt; a:hover{
	color: var(--primary-color);
}

.blog-container .sidebar .widget_block ul &gt; li &gt; time{
	font-weight: 600;
	text-transform: uppercase;
	opacity: .4;
	margin-top: .3rem;
}

.blog-container .sidebar .wp-block-search__button{
	border: 0;
}

/**
 * Blog single page styling
 */

#blog-single .attachment-post-thumbnail{
	border-radius: 20px;
	margin-bottom: 2rem;
}

#blog-single .entry-title{
	font-size: 2rem;
	line-height: 2.25rem;
	color:#fff;
}

#blog-single .article-date{
	font-weight: 500;
	color: var(--primary-color);
	margin: .5rem 0 1rem;
}

#blog-single article &gt; p:not(:last-child){
	margin-bottom: 1.25rem;
}

/********************************************************************************************************************/
/* Woocommerce pages styling */
/********************************************************************************************************************/

/**
 * General Woocommerce styling
 */

.woocommerce h2{
	margin-bottom: 1.5rem;
}

.woocommerce-Tabs-panel{display:none !important;}

.single-product.woocommerce div.product form.cart .variations{margin-bottom:50px;}
.woocommerce div.product form.cart .variations label{color:#fff;}
.woocommerce div.product form.cart .variations select{color:#222; background-color:#fff;}

.woocommerce-tabs{opacity:0;}
.single-product.woocommerce div.product form.cart .variations{margin-bottom:3rem !important;}
/**
 * Single product page style
 */

.single-product .content-area{
	padding-top: 250px;
}

.single-product.woocommerce div.product form.cart .variations{
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.single-product .summary .woocommerce-product-details__short-description{
	margin-bottom: 2rem;
}

.single-product .summary .woocommerce-product-details__short-description ul,
.single-product .woocommerce-Tabs-panel--description ul{
	margin-left: 2rem;
}

.single-product .summary .woocommerce-product-details__short-description ul &gt; li,
.single-product .woocommerce-Tabs-panel--description ul &gt; li{
	list-style-type: disc;
	margin-bottom: .5rem;
}

.single-product .woocommerce-Tabs-panel--description &gt; *{
	margin-bottom: 1rem;
}

.single-product .summary .variations .label{
	text-align: left;
}

.single-product .summary .woocommerce-variation-price .price{
	margin: 2rem 0 1.5rem;
}

.single-product .summary .variations .value select{
	font-family: 'Montserrat', sans-serif;
	padding: .5rem;
	border: 1px solid #000;
}

.woocommerce div.product form.cart div.quantity{
	position: relative;
	top: 7px;
	margin-right: 1rem;
}

.woocommerce .quantity .qty{
	padding: .5rem 0;
}

.woocommerce.single-product .summary .single_add_to_cart_button,
.woocommerce .woocommerce-form-login .woocommerce-form-login__submit,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button{
	display: inline-block;
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	background-color: var(--primary-color);
	padding: 1rem 2rem;
	border-radius: 10px;
	transition: background-color .2s;
}

.woocommerce.single-product .summary .single_add_to_cart_button:hover,
.woocommerce .woocommerce-form-login .woocommerce-form-login__submit:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button:hover{
	background-color: var(--primary-hover);
}

.woocommerce div.product form.cart .reset_variations{
	color: var(--primary-color);
}

.single-product .related.products{
	clear: both;
}

/**
 * Woocommerce product archive styling
 */

#shop-page .shop-container{
	display: flex;
}

#shop-page .shop-container &gt; #primary{
	width: 70%;
}

#shop-page #primary .woocommerce-ordering select{
	font-family: 'Montserrat', sans-serif;
	padding: .5rem;
	border: 1px solid #000;
	margin-bottom: 1rem;
}

#shop-page .shop-container &gt; #sidebar{
	width: 30%;
	margin-left: 3rem;
}

#shop-page #sidebar .widget_aws_widget .widget-title{
	display: none;
}

#shop-page #sidebar .aws-container .aws-search-form .aws-form-btn{
	background: var(--primary-color);
}

#shop-page #sidebar .aws-container .aws-search-form .aws-form-btn:hover{
	background-color: var(--primary-hover);
}

#shop-page #sidebar .aws-container .aws-search-form .aws-form-btn path{
	fill: #fff;
}

#shop-page #sidebar .widget-container{
	margin-bottom: 2rem;
}

/**
 * Woocommerce account page
 */

.woocommerce-account a{
	color: var(--primary-color);
}

.woocommerce-account a:hover{
	text-decoration: underline;
}

.woocommerce-account .woocommerce-MyAccount-navigation &gt; ul &gt; li{
	margin-bottom: 1rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation &gt; ul &gt; li a{
	color: #000;
	font-weight: 500;
	text-decoration: underline;
	transition: color .2s;
}

.woocommerce-account .woocommerce-MyAccount-navigation &gt; ul &gt; li a:hover{
	color: var(--primary-color);
	text-decoration: none;
}

.woocommerce-account form .form-row input.input-text{
	font-family: 'Montserrat', sans-serif;
	padding: .5rem;
	border: 1px solid #000;
}

/**
 * Woocommerce override styles
 */

.wc-block-components-checkbox__label, .added_to_cart, .product_title, .product_meta, .woocommerce h2{color:#fff;}
.posted_in a{color:var(--my-color);}
.posted_in a:hover{color:#fff;}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price{
	color: #000;
	margin: 1rem 0;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price{
	display: block;
	color: #000;
	font-weight: 500;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price{
	color: #000;
}

.woocommerce.single-product:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled{
	background-color: var(--primary-color);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
	color: #fff;
}

.woocommerce ul.products li.product .button,
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link),
.wp-block-button__link{
	display: inline-block;
	font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--primary-color);
	background-color: #111;
	padding: .75rem 1rem;
	border: 3px solid var(--primary-color);
	border-radius: 10px;
	transition: color .2s, background-color .2s;
}

.woocommerce ul.products li.product .button:hover,
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):hover,
.wp-block-button__link:hover{
	color: #fff;
	background-color: var(--primary-color);
}

body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):disabled{
	opacity: .5;
}

.woocommerce .woocommerce-form-login .woocommerce-form-login__submit:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button:hover{
	color: #fff !important;
}

.wc-block-grid__product .wc-block-grid__product-link{
	transition: .2s;
}

.wc-block-grid__product .wc-block-grid__product-link:hover{
	opacity: .6;
}

.wc-block-grid__product .wc-block-grid__product-title{
	color: var(--primary-color);
}

.woocommerce .price-free{
	color: green;
}

/**
 * Checkout styling
 */

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name{
	color: var(--primary-color);
	font-weight: 500;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:hover{
	text-decoration: underline;
}

.woocommerce span.onsale{
	background-color: var(--primary-color);
}

/********************************************************************************************************************/
/* General page styling */
/********************************************************************************************************************/

#general-page{
	padding-top: 300px;
	padding-bottom: 100px;
}

#general-page .page-title{
	font-size: 3rem;
	margin-bottom: 3rem;
	color:#fff;
}

.wc-block-cart, .wc-block-components-sidebar-layout{color:#fff;}
/********************************************************************************************************************/
/* FOOTER STYLE */

footer{
	position: relative;
	background-color: var(--primary-color);
	padding-top: 8rem;
	clip-path: polygon(0 5rem, 100% 0, 100% 100%, 0 100%);
	z-index: 100;
}

footer .wrap.flex{
	justify-content: center;
	gap: 5rem;
}

footer .footer-menu{
	max-width: 300px;
	color: #fff;
}

footer .footer-menu h3::after{
	display: block;
	content: '';
	width: 100%;
	border-bottom: 2px solid #000;
	opacity: .1;
	margin: 1rem 0;
}

footer .footer-menu .footer-menu-item{
	font-weight: 400;
	margin-bottom: 1rem;
}

footer .footer-menu .footer-menu-item h4{
	font-size: .75rem;
	text-transform: uppercase;
	margin-bottom: .5rem;
}

footer .footer-menu .footer-menu-item a{
	color: #fff;
	transition: color .2s;
}

footer .footer-menu .footer-menu-item a:hover{
	color: #000;
}

footer .footer-menu .menu &gt; li:not(:last-child){
	margin-bottom: .625rem;
}

footer .footer-menu .menu &gt; li &gt; a{
	color: #fff;
	transition: color .2s;
}

footer .footer-menu .menu &gt; li &gt; a:hover{
	color: #000;
}

footer .footer-socials{
	display: flex;
	gap: .5rem;
	margin-top: 2rem;
}

#home-content + footer{
	margin-top: -6rem;
}

/**
 * Subfooter styling
 */

footer .subfooter{
	color: #fff;
	padding: 2rem 0;
	margin-top: 6rem;
}

footer .subfooter .wrap.flex{
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2rem;
}

footer .subfooter a{
	font-weight: 600;
	color: #fff;
	transition: color .2s;
}

footer .subfooter a:hover{
	color: #000;
}

/********************************************************************************************************************/

.social-icon{
	width: 1.75rem;
	height: 1.75rem;
	transition: background-color .2s;
}

#nav .social-icon{
	background-color: #fff;
}

#nav .social-icon:hover{
	background-color: var(--primary-color);
}

footer .social-icon{
	background-color: #fff;
}

footer .social-icon:hover{
	background-color: #000;
}

.social-icon.facebook{
	mask: url(img/icons/icon-facebook.svg) no-repeat center center/contain;
}
.social-icon.instagram{
	mask: url(img/icons/icon-instagram.svg) no-repeat center center/contain;
}
.social-icon.social-x{
	mask: url(img/icons/icon-x.svg) no-repeat center center/contain;
}
.social-icon.youtube{
	mask: url(img/icons/icon-youtube.svg) no-repeat center center/contain;
}
.social-icon.linkedin{
	mask: url(img/icons/icon-linkedin.svg) no-repeat center center/contain;
}

/********************************************************************************************************************/

.form-result{
	color: #fff;
	padding: 1rem;
	margin-bottom: 2rem;
}

.form-result.error{
	background-color: red;
}

.form-result.success{
	background-color: var(--primary-color);
}

/********************************************************************************************************************/

#page-not-found{padding: 100px; text-align: center;}
#page-not-found h2{font-size: 36px; color: var(--second-color); margin-bottom: 15px;}
#page-not-found a{margin-left: auto; margin-right: auto;}

/********************************************************************************************************************/

/* CSS MEDIA QUERIES - WIDTH */

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

}

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

	.wrap{width:1000px;}

	/**
	 * Home page media queries
	 */

	.quote-form input[type=text],
	.quote-form input[type=email],
	.quote-form select,
	.quote-form textarea{
		font-size: .875rem;
	}
	
	

}

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

	.wrap{width:800px;}

	/**
	 * General media queries
	 */

	.col-3{
		gap: 1rem;
	}

	.block-center{
		width: 100%;
	}

	/**
	 * Navbar media queries
	 */

	#nav .nav-top .item,
	#nav .nav-main .menu &gt; li &gt; a{
		font-size: .75rem;
	}

	/**
	 * Home page media queries
	 */

	#home-content .icon-box{
		padding: 0;
	}

	#home-content .icon-box .icon{
		margin-right: 1rem;
	}

	#home-content .services .services-container{
		grid-template-columns: 1fr 1fr;
	}

	#home-content .article .article-title{
		font-size: 1.25rem;
	}

	.quote-form &gt; *.half-width{
		width: 100%;
	}

	/**
	 * General page media queries
	 */

	#page-top .page-title{
		width: 75%;
	}

	#page-top .page-title h1,
	#general-page .page-title{
		font-size: 2.5rem;
	}

	#blog article .article-date,
	#home-content article .article-date{
		font-size: .75rem;
		padding: .75rem;
	}

	#contact .open-hours{
		padding: 6rem 8rem 10rem 6rem;
	}
	
	#home-content .services .service-box{width:33%;}
}

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

	.wrap{width:700px;}

	/**
	 * General media queries
	 */

	.col-2{
		flex-direction: column;
	}

	.col-2 &gt; *{
		flex-basis: 100%;
	}

	.col-4{
		grid-template-columns: 1fr 1fr;
	}

	.section-title .main-title{
		font-size: 2rem;
	}

	.block-center.w-60{
		width: 100%;
	}

	.page-top-pad{
		padding: 150px 0 3rem;
	}

	/**
	 * Navbar media queries
	 */

	.social-icon,
	#nav .nav-top .ecom-links .ecom-icon{
		width: 1.5rem;
		height: 1.5rem;
	}

	#nav .nav-top .ecom-links,
	#nav .nav-top .lang-link{
		padding-left: .75rem;
		margin-left: .75rem;
	}

	#nav .nav-main .nav-menu{
		display: none;
	}

	#nav .nav-main .mobile-menu-open-btn{
		display: block;
	}

	/**
	 * Hero section media queries
	 */

	#hero-section .swiper-slide{
		height: 800px;
	}

	#hero-section .swiper-slide .flex{
		bottom: 25%;
	}

	#hero-section .swiper-slide h1,
	#hero-section .swiper-slide h2{
		font-size: 2rem;
	}

	#hero-section .swiper-slide p{
		font-size: 1.25rem;
		margin-bottom: 2.5rem;
	}

	/**
	 * Home page media queries
	 */

	#home-content .icon-boxes{
		grid-template-columns: auto;
		gap: 3rem;
		padding: 5rem 0;
	}

	#home-content .services .service-box:hover{
		transform: translateY(-1rem);
	}

	#home-content .blog .col-3{
		grid-template-columns: auto;
		gap: 3rem;
	}

	#home-content .article &gt; *:not(:last-child){
		margin-bottom: 1.5rem;
	}

	#home-content .portfolio .portfolio-container{
		grid-template-columns: 1fr 1fr;
	}

	#home-content .portfolio .portfolio-single:hover{
		transform: translateY(-.625rem);
	}

	#home-content .partners .partners-container{
		gap: 3rem;
	}

	.quote-form &gt; *.half-width{
		width: 47.5%;
	}
	
	#home-content .services .services-container{
		flex-direction:column;
	}
	
	#home-content .services .service-box{width:100%;}

	/**
	 * General page media queries
	 */

	#page-top .page-title{
		width: 100%;
	}

	#about-us .cta-section{
		gap: 5rem;
	}

	#portfolio-single .portfolio-container{
		flex-direction: column;
	}

	#portfolio-single .portfolio-container &gt; *:first-child,
	#portfolio-single .portfolio-container &gt; *:last-child{
		width: 100%;
	}

	#portfolio-single .sidebar{
		margin-left: 0;
		margin-top: 3rem;
	}

	.blog-container .grid-2{
		grid-template-columns: auto;
	}

	.blog-container .sidebar{
		margin-left: 3rem;
	}

	#blog-single .blog-container{
		flex-direction: column;
	}

	#blog-single .blog-container &gt; *:first-child,
	#blog-single .blog-container &gt; *:last-child{
		width: 100%;
	}

	#blog-single .blog-container .sidebar{
		margin-top: 5rem;
		margin-left: 0;
	}

	#contact .open-hours{
		padding: 6rem 4rem 10rem 4rem;
	}

	/**
	 * Woocommerce media queries
	 */

	#shop-page .shop-container{
		flex-direction: column;
	}

	#shop-page .shop-container &gt; #primary,
	#shop-page .shop-container &gt; #sidebar{
		width: 100%;
	}

	#shop-page .shop-container &gt; #sidebar{
		margin-left: 0;
		margin-top: 3rem;
	}

	/**
	 * Footer media queries
	 */

	footer .wrap.flex{
		flex-wrap: wrap;
		gap: 3rem;
	}

	footer .footer-menu{
		width: 45%;
	}

	footer .footer-menu .footer-menu-item,
	footer .footer-menu .menu &gt; li &gt; a,
	footer .subfooter .wrap.flex{
		font-size: .875rem;
	}

	footer .footer-menu .menu &gt; li:not(:last-child){
		margin-bottom: 1rem;
	}

}

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

	.single-product.woocommerce div.product form.cart .variations{
		margin-top: 2rem;
		margin-bottom: 2rem;
	}

}

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

	.wrap{width: 500px;}

	/**
	 * General media queries
	 */

	.grid-2{
		grid-template-columns: auto;
		gap: 2rem;
	}

	.section-title.sm-title .main-title{
		font-size: 1.25rem;
		line-height: 2rem;
	}

	.image-shape-layout{
		box-shadow: -5rem 3rem 0 #e5e5e5;
		margin: 0;
	}

	.image-shape-layout-reverse{
		box-shadow: 5rem 3rem 0 #e5e5e5;
		margin: 0;
	}

	/**
	 * Navbar media queries
	 */

	#nav .nav-top{
		display: none;
	}

	#nav::before{
		display: block;
		content: '';
		width: 100%;
		height: 50%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: inherit;
		transform: skewY(1.5deg) scaleZ(1);
		transition: transform .5s;
	}

	#nav.scrolled::before{
		transform: skewY(0);
	}

	/**
	 * Hero section media queries
	 */

	#hero-section .swiper-slide{
		height: 700px;
	}

	#hero-section .swiper-slide h1,
	#hero-section .swiper-slide h2{
		max-width: 85%;
		font-size: 1.75rem;
	}

	#hero-section .swiper-slide p{
		max-width: 85%;
		font-size: 1.125rem;
		line-height: 2rem;
	}

	#hero-section .swiper-slide .btn-hero{
		font-size: 1.125rem;
	}

	/**
	 * Home page media queries
	 */

	#home-content .services .services-container{
		grid-template-columns: auto;
	}

	#home-content .testimonies{
		clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
	}

	#home-content .testimonies .section-title{
		font-size: 1.5rem;
	}

	#home-content .testimonies .testimony-slider{
		width: 100%;
	}

	#home-content .testimonies .testimony-slider .testimony-message,
	#home-content .testimonies .testimony-slider .testimony-name{
		line-height: 1.625rem;
	}

	#home-content .testimonies .testimony-slider .testimony-name{
		margin-top: 1rem;
	}

	#home-content .testimonies .testimony-slider-dots{
		display: block;
	}

	#home-content .testimonies .testimony-slide-arrow{
		display: none;
	}

	#home-content .partners .partners-container{
		justify-content: center;
		flex-wrap: wrap;
	}

	#home-content .partners .partners-container &gt; a{
		max-width: 25%;
	}

	/**
	 * General page media queries
	 */

	#general-page{
		padding-top: 250px;
	}

	#page-top{
		height: 600px;
	}

	#page-top::after{
		height: 80px;
	}

	#page-top .page-title h1,
	#general-page .page-title{
		font-size: 2rem;
	}

	#page-top .page-title p{
		max-width: 80%;
		font-size: 1.25rem;
	}

	#about-us .cta-section{
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
	}

	.blog-container{
		flex-direction: column;
	}

	.blog-container &gt; *:first-child,
	.blog-container &gt; *:last-child{
		width: 100%;
	}

	.blog-container .sidebar{
		margin-top: 5rem;
		margin-left: 0;
	}

	#contact section:first-child .col-3{
		grid-template-columns: auto;
	}

	/**
	 * Woocommerce media queries
	 */

	.single-product .content-area{
		padding-top: 180px;
	}

	/**
	 * Footer media queries
	 */

	footer .footer-menu{
		width: 40%;
	}

	footer .subfooter .wrap.flex{
		justify-content: center;
		gap: 1rem;
	}

}

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

	.wrap{width: 90%;}

	html{
		font-size: 14px;
	}

	/**
	 * General media queries
	 */

	.col-2{
		gap: 2rem;
	}

	.section-title .main-title{
		font-size: 1.625rem;
		line-height: 2rem;
		margin-bottom: 1.5rem;
	}

	.section-title .extra-title{
		margin-bottom: 1rem;
	}

	.image-shape-layout,
	.image-shape-layout-reverse{
		border: 0;
		box-shadow: none;
	}

	.icon-boxes-col .icon-box .icon-container .icon,
	.icon-boxes-col .icon-box .icon-container .image{
		mask-size: 4rem;
		padding: 3.5rem 0;
	}

	/**
	 * Navbar media queries
	 */

	#nav .logo img{
		max-width: 150px;
	}

	#nav.scrolled .logo img{
		max-width: 100px;
	}

	/**
	 * Hero section media queries
	 */

	#hero-section .swiper-slide h1,
	#hero-section .swiper-slide h2,
	#hero-section .swiper-slide p{
		max-width: 100%;
	}

	/**
	 * Home page media queries
	 */

	#home-content::before{
		top: 0;
	}

	#home-content .presentation img{
		/*border-right: 1rem solid #fff;*/
	}

	#home-content .services .service-box{
		min-height: 300px;
	}

	#home-content .services .service-box h3{
		font-size: 1.5rem;
	}

	#home-content .partners .partners-container{
		gap: 2rem;
	}

	#home-content .partners .partners-container &gt; a{
		max-width: 30%;
	}

	.quote-form &gt; *.half-width{
		width: 100%;
	}

	/**
	 * General page media queries
	 */

	#general-page{
		padding-top: 200px;
	}

	#page-top{
		height: 500px;
	}

	#page-top .page-title h1,
	#general-page .page-title{
		font-size: 1.75rem;
	}

	#page-top .page-title p{
		max-width: 100%;
		font-size: 1.125rem;
	}

	#portfolio-single .main-content .portfolio-gallery{
		grid-template-columns: 1fr 1fr;
		gap: .5rem;
	}

	#blog-single .entry-title{
		font-size: 1.75rem;
		line-height: 2rem;
	}

	#contact .contact-form{
		gap: 2rem 1rem;
	}

	#contact .contact-form &gt; *.half-width{
		width: 100%;
	}

	#contact .hours-section iframe{
		min-height: 350px;
	}

	#contact .open-hours{
		padding: 4rem 2rem 10rem 2rem;
	}

	/**
	 * Woocommerce media queries
	 */

	#home-content .featured-products .product .add_to_cart_inline &gt; a{
		font-size: .75rem;
		text-align: center;
	}

	.single-product .content-area{
		padding-top: 135px;
	}

	/**
	 * Footer media queries
	 */

	footer{
		padding-top: 6rem;
		clip-path: polygon(0 2rem, 100% 0, 100% 100%, 0 100%);
	}

	footer .footer-menu{
		width: 100%;
	}

	footer .footer-socials{
		gap: .875rem;
	}

}

/* CSS MEDIA QUERIES - HEIGHT */


@media screen and (max-height: 920px) {
	
}

@media screen and (max-height: 810px) {
	
}</pre></body></html>