/*
Theme Name: EVS Valeting
Theme URI: Arch
Author: Arch
Author URI: archcreative.co.uk
Description: 
Version: 1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: 
*/


 @import url("https://use.typekit.net/etn5unb.css");

:root{
	--grey:#1d1d1b;
	--grey-light:#f5f5f5;
	--green:#d9e021;
	--plyr-color-main:#fff;
}  

/* ===== GENERAL ===== */
* { box-sizing:border-box; }
html, body { width:100%;margin:0;padding:0;overflow-x:hidden;font-family: "graphie", sans-serif;color:var(--grey); }


.container { width:100%;max-width:1580px;margin:0 auto;padding:0 clamp(1rem, 2vw, 2rem);position:relative; }
.container.no-padding { padding:0; }
section { position:relative; }

.bg-grey { background:var(--grey);color:#fff; }

.bg-grey-light { background:var(--grey-light) }
.bg-black { background:#000;color:#fff; }
.bg-green { background:var(--green); }

h1 { font-size:clamp(1.5rem, 4vw, 2.25rem);font-weight:400; }
h2 { font-size:2.25rem;font-weight:400; }
h3 { font-size:1.875rem; font-weight: 400;line-height: 160%;letter-spacing: 0.25rem;text-transform:uppercase; }
h4 { font-size:1.25rem; font-weight: 400;line-height: 160%;letter-spacing: 0.25rem;text-transform:uppercase; }
h5 { font-size:1.125rem;font-weight: 400;text-transform:uppercase;letter-spacing: 0.1125rem; }

p, ul,ol { font-size:1rem;font-weight:400;line-height:160%;text-wrap:pretty; }
ul,ol { padding-left:1.1rem; }
li { padding-bottom:0.5rem; }
.large p { font-size:1.125rem; }

a { color:var(--grey); }
a:hover { color:var(--green); }
a.button, button { letter-spacing:0.2rem;font-size:0.875rem;font-weight:600;color:var(--grey);text-transform:uppercase;text-decoration:none;border:1px solid var(--grey);display:inline-block;padding:1rem 3rem; }
a.button.green, button { background:var(--green);border-color:var(--green); }
a.button:hover, button:hover { background:var(--grey);border-color:var(--grey);color:#fff; }
.bg-grey a:not(.button) { color:#fff; }
.bg-grey a:not(.button):hover { color:var(--green); }

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

/* ===== NAV MENU ===== */
.top-nav { text-align:center;padding:2rem 0; }
.top-nav-flex { display:flex;align-items:center;justify-content:space-between; }
.top-nav a.button { font-size:0.875rem;letter-spacing:0.175rem; }
.top-nav span { font-size:1rem;font-weight:600; }
.top-nav-right,.top-nav-left { display:flex;gap:1rem;align-items:center; }
.bottom-nav { background:var(--grey); }

#navmenu .menu { justify-content:space-around;list-style: none;padding:0;margin:0;display:flex;width:100%;z-index:100;position:relative; }
#navmenu .menu li { display:inline-block;flex:1 1 auto;text-align:center;padding:0; }
#navmenu .menu li a { width:100%;display:inline-block;font-weight:600;letter-spacing: 0.15rem;padding:1rem;text-decoration:none;color:#fff;font-size:0.75rem;text-transform:uppercase; }
#navmenu .menu li a:hover { background:var(--green);color:var(--grey); }
#navmenu .menu li.menu-item.mobile { display:none; }


.mobile-toggle { width:30px;height:30px;display:none; }
.toggle-bar { width:100%;height:3px;margin-bottom:5px;background:#000; }
.mobile-toggle.active .toggle-bar { background:var(--green); }

footer { padding:6rem 0 8rem; }
footer h6 { font-size:0.875rem;letter-spacing:0.175rem;margin-top:0px;font-weight:400;margin-bottom:1rem; }
footer p { font-size:0.875rem;font-weight:400; }
footer .menu { list-style: none;padding:0;margin:0; }
footer .menu li a { font-size:0.875rem;letter-spacing:0.175rem;display:inline-block;text-decoration:none;color:#fff;text-transform:uppercase;margin-bottom:1rem; }
footer a:hover { color:var(--green) !important; }
.footer-flex { display:flex;gap:2rem;justify-content:space-between;flex-wrap:wrap; }
.footer-logo { display:inline-block;margin:3rem auto 0; }
footer .social { margin:0 0.5rem 0 0; }
footer .social svg { width:40px;height:40px; }
footer .social:hover svg path { fill:var(--green); }
footer a { color:#fff !important; }




.hero.home video { width:100%;aspect-ratio:1920/768;position:relative; }
.hero.home .plyr--video { aspect-ratio:1920/768;opacity:0;margin-bottom:-10px; }
.hero-text { pointer-events:none;text-align:center;padding:1rem 1rem 2rem;position:absolute;z-index:2;left:50%;transform:translateX(-50%);bottom:0;width:100%; }
.logo-carousel { width:100%;padding:1.5rem 0 1.5rem; }
.logo-carousel img { width:auto !important;max-width:140px;height:50px;object-fit:contain; }
.logo-carousel .slick-slide > div { padding:0 2rem; }
.slick-slider { margin:0; }
.slick-autoplay-toggle-button { display:none; }
.overlay-video { position:absolute;top:0;left:0;width:100%;height:100%; }
.overlay-video video { width:100%;height:100%;object-fit:cover; }
.play { z-index:2;width:80px;height:80px;background:rgba(255,255,255,0.2);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:15px 0 0 25px;border-radius:100%; }
.play::after { display:block;content:"";width: 0px;   height: 0px;   border-style: solid;   border-width: 25px 0 25px 40px;   border-color: transparent transparent transparent #000;transform: scale(0.75); }
.play:hover { cursor:pointer;background:rgba(255,255,255,0.6); }
.plyr__control svg { fill:#000; }



/* ===== MODULES ===== */
.module { display:block;padding:clamp(2rem,3vw,5rem) 0;position:relative; }
.column-flex { display:flex;gap:2rem;flex-wrap:wrap; }
.services-flex { gap:clamp(3rem, 2vw, 6rem);margin:4rem 0 4rem; }
.column-flex > div { flex:1 1 300px; }
.column-flex.services-flex > div { flex:1 1 500px;text-align:center; }
.column-flex .image-holder img { width:100%; }

.text-holder { text-align:left;width:100%;margin:0 auto; }
.services-flex .text-holder { max-width:580px; }
.text-container { max-width:520px; }
.button-group { display:flex;gap:1rem;flex-wrap:wrap;padding-top:1.5rem; }
.button-holder { justify-items:flex-end; }

.banner { position:relative; }
.banner img, .full_width_image img { width:100%;height:100%;max-height:600px;object-fit:cover; }
.banner-text { padding:1rem 1rem 3rem;color:#fff;background:linear-gradient(180deg,rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%);;position:absolute;bottom:0;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:space-around; }



.q { padding-right:calc(2rem + 30px) !important;line-height: 160%;position:relative;background:var(--grey);color:#fff;text-transform:uppercase;font-size:clamp(0.9rem, 2vw, 1.25rem);letter-spacing: 0.25rem; }
.q.active, .q:hover { background:var(--green);color:var(--grey); }
.a { background:var(--grey-light);display:none; }

.q,.a { padding:1rem 2rem; }
.a p { max-width:950px; }

.q-open { position:absolute;top:50%;transform:translateY(-50%);right:1rem;width:30px;height:30px;border:2px solid #fff;border-radius:100%;padding:5px; }
.q-open::before, .q-open::after { content:"";display:block;width:19px;height:2px;background:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%); }
.q-open::after { transform:translate(-50%) rotate(90deg); }

:is(.q.active, .q:hover) .q-open { border-color:var(--grey); }
.q:hover { cursor:pointer; }
:is(.q.active, .q:hover) .q-open::before,
:is(.q.active, .q:hover) .q-open::after { background-color:var(--grey); }
.q.active .q-open:after { display:none; }

.testimonial-slider { padding:4rem 0; }
.testimonial-slide { padding:0 30px; }
.testimonial-text { font-size:clamp(1rem,3vw,1.5rem);line-height:160%;text-align:center;max-width:1000px;display:block;margin:0 auto; }
.testimonial-name { font-size:0.875rem;text-transform:uppercase;display:block;text-align:center;font-weight:600;padding:2rem 0 0;letter-spacing:0.175rem; }

.slick-prev, .slick-next { z-index:2;transform:translateY(-50%);height:36px;width:10px;background:url("/wp-content/themes/evs/img/slider-arrow.svg") no-repeat;background-size:contain; }
.slick-prev:before, .slick-next:before { display:none; }
.slick-prev { left:0; }
.slick-next { right:0;transform:translateY(-50%) scaleX(-1); }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { opacity:0.5;background:url("/wp-content/themes/evs/img/slider-arrow.svg") no-repeat;background-size:contain; }


form :is(input, textarea) { font-family: "graphie", sans-serif;margin-bottom:1rem;background:var(--grey-light);padding:1rem 1.5rem;border:none; }


.contact-details { display:flex;flex-wrap:wrap; }
.contact-details > div { flex:1 1 250px; }
.contact-flex { gap:2rem 6rem; }



.block-grid {  display: flex;  flex-wrap: wrap;gap: 1rem;justify-content:space-around; }
.block {  flex:1 1 280px;max-width:400px;background:var(--grey-light);display: flex;  flex-direction: column;justify-content: space-between;width: calc(25% - 20px);min-height: 100%;box-sizing: border-box; }
.block-content { flex-grow: 1;padding:2rem 2rem 1rem; }
.block-img { width: 100%;height: 100%;object-fit: cover; }
.block-img-wrapper { width: 100%;  aspect-ratio: 4 / 2.5; overflow: hidden; }

.single-column { width:100%;max-width:800px;margin:0 auto; }


.myvaletbay::before { filter: grayscale(100%);opacity:0.1;content:"";display:block;width:100%;height:100%;background:url("/wp-content/themes/evs/img/mvb-background.jpg") no-repeat;background-size:cover;position:absolute;top:0;left:0; }
.mvb-flex { display:flex;flex-wrap:wrap;gap:2rem;margin-top:3rem; }
.mvb-flex > div { flex:1 1 300px; }
.mvb-list > div { display:flex;gap:2rem;padding:1rem 0;border-bottom:1px solid #fff; }
.mvb-list > div:last-child { border:none; }
.phone-hand { max-width:300px; }

.team-flex { display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-around;width:100%;max-width:1200px;margin:0 auto; }
.team-holder { flex:0 1 calc(400px - 1rem); }
.team-holder img { width:100%;margin-bottom:-1rem; }
.team-holder span { margin-top:-1rem;margin-bottom:1rem;display:block; }
.team-details { background:var(--grey-light);padding:0.5rem 1rem 1rem; }

@media(max-width:1200px){
	.top-nav { padding:4rem 0 1.5rem; }
	.top-nav-flex { justify-content:center; }
	.top-nav-left a.button, .top-nav-right { display:none; }
	.top-nav-left { padding:0.5rem;position:absolute;top:-4rem;left:0;width:100%;display:inline-block;background:var(--green); }
	/* Move this to it's own query if it needs to break down earlier */
		.mobile-toggle { display:inline-block;position:absolute;top:4.5rem;right:1rem; }
		#navmenu { display:none; }
		#navmenu .menu { flex-wrap:wrap; }
		#navmenu .menu li { display:inline-block;width:100%;padding:0;flex:1 0 100%; }
		#navmenu .menu li.menu-item.mobile { display:inline-block; }
		.bottom-nav .container { padding:0; }
	/* ---------------------- */

	.hero.home .plyr--video { aspect-ratio:auto }
	.hero-text { position:static;transform:translate(0); }
	.play { top:35%; }
}

/* Tablet Size */
@media(max-width:768px){

	.mvb-phone { display:none; }
	.image-holder { order:0; }
}

/* Mobile Size */
@media(max-width:560px){

}