/*
Theme Name: Next Gen HR 2026
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://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root{
	--blue-dark:#0E1829;
	--blue-mid:#0027b5;
	--blue-light:#086FFF;
	--blue-lightest:#bbdefe;
	--orange:#ff8045;
	--grey-light:#eff0f3;
	--grey-mid:#e2e4e7;
	--white:#FCFDFF;
	--blue-gradient:linear-gradient(90deg,#0027b5 0%, #086FFF 100%); 
}

/* ===== GENERAL ===== */
* { box-sizing: border-box; }
html, body { width:100%;margin:0;padding:0;overflow-x:hidden;background:var(--white);color:var(--blue-dark);font-family:'Manrope', sans-serif; }
.pos-rel { position:relative; }
.pos-abs { position:absolute; }



.container { width:100%;max-width:1500px;margin:0 auto; }
.container-small { width:100%;max-width:768px;margin:0 auto; }


.bg-blue-dark { background:var(--blue-dark);color:var(--white); }
.bg-blue-mid { background:var(--blue-mid);color:var(--white); }
.bg-blue-light { background:var(--blue-light); }
.bg-blue-lightest { background:var(--blue-lightest); }
.bg-grey-light { background:var(--grey-light); }
.bg-grey-mid { background:var(--grey-mid); }
.bg-blue-gradient { background:var(--blue-gradient);color:var(--white); }
.bg-orange { background:var(--orange); }

h1,h2,h3,h4,h5,h6 { font-weight:600; }

h1, .h-3xl 	{ font-size:3rem;line-height:3rem; }
h2, .h-2xl 	{ font-size:2.5rem;line-height:3rem; }
h3, .h-xl  	{ font-size:2rem;line-height:2.4rem; }
h4, .h-l 	{ font-size:1.8rem;line-height:2.1rem; }
h5, .h-m 	{ font-size:1.4rem;line-height:1.7rem; }
h6, .h-s 	{ font-size:1.2rem;line-height:1.5rem; }
.h-xs 	{ font-size:1rem;line-height:1.2rem; }

.p-l 	{ font-size:1.2rem;line-height:1.8rem; }
p, .p-m, ul li, ol li { font-size:1rem;line-height:1.5rem; }
.p-s 	{ font-size:0.8rem;line-height:1.2rem; }
.p-xs	{ font-size:0.7rem;line-height:1.05rem; }

.eyebrow { margin-bottom:-1.5rem; }


a { color:var(--blue-dark);font-weight:600; }
a:hover { color:var(--orange); }

a.button { white-space:nowrap;border:1px solid var(--orange);display:inline-block;color:var(--white);text-decoration:none;width:fit-content;padding:0.75rem 1rem;font-weight:600; }
a.button::after { display:inline-block;content:"";width:10px;height:17px;background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='17' viewBox='0 0 10 17' fill='none'><path d='M0.353516 16.3535L8.35352 8.35351L0.353515 0.353515' stroke='%23FCFDFF'/></svg>");background-size:contain;margin-left:1rem;position:relative;top:3px; }
a.button:hover { background:var(--orange); }

button { font-family:'Manrope', sans-serif;background:transparent;font-size:1.2rem;font-weight:600; }
li.button a, button, a.button.dark { border:1px solid var(--orange);display:inline-block;color:var(--blue-dark);text-decoration:none;width:fit-content;padding:0.75rem 1rem;white-space:nowrap; }
li.button a:hover, button:hover, a.button.dark:hover { background:var(--orange); }
li.button a::after, button::after, a.button.dark::after { display:inline-block;content:"";width:17px;height:10px;background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='10' viewBox='0 0 17 10' fill='none'><path d='M0.353516 0.353546L8.35352 8.35355L16.3535 0.353546' stroke='%230E1829'/></svg>");background-size:contain;margin-left:1rem;position:relative;top:3px;transform:rotate(-90deg);position:relative;top:-2px;transition:transform 0.3s ease-in-out; }
li.button a.visible::after { transform:rotate(0deg); }

a.button.black { background:var(--blue-dark);border:none; }
a.button.black:hover { background:var(--orange); }

a.arrow { font-size:1.2rem;line-height:1.5rem;font-weight:600;text-decoration: none; }
a.arrow::after { content:"";margin-left:0.7rem;position:relative;top:2px;display:inline-block;width:10px;height:17px;background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='17' viewBox='0 0 10 17' fill='none'><path d='M0.353516 16.3535L8.35352 8.35351L0.353515 0.353515' stroke='%230E1829'/></svg>"); }

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

/* ===== NAV MENU ===== */
.top_bar { padding:1rem 1rem; }
.top-bar { display:flex;flex-wrap:wrap;gap:1rem;justify-content: flex-end;}

nav { position:relative;background:var(--white); }
.nav-flex { padding:2.5rem 1rem;display:flex;flex-wrap:wrap;justify-content: space-between;align-items:center;row-gap:1rem; }
#navmenu .menu { list-style: none;padding:0;margin:0;display:flex;flex-wrap:wrap; width:100%;z-index:100;position:relative;gap:3rem;row-gap:1rem;align-items:center; }
#navmenu .menu li { display:inline-block; }
#navmenu .menu > li > a { text-decoration: none;font-weight:600; }
#navmenu .sub-menu { display:none;position:absolute;width:100%;top:100%;left:0;background:#fff;list-style: none;padding:0;margin:0; }
#navmenu .sub-menu li { display:inline-block;width:100%; }
#navmenu .menu li:hover .sub-menu { display:inline-block; }

nav.nav-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.nav-shim {
    width: 100%;
}


.contact-grid-holder { display:none; }
.contact-grid { display:grid;grid-template-columns:repeat(4, 1fr);gap:1.5rem;margin-bottom:2rem;padding:0 1rem; }
.contact-box { padding:2.5rem;display:flex;flex-direction: column;gap:0.7rem;height:100%; }
.contact-box a.button { width:100%;text-align:center;margin-top:auto; }
.qr { width:7.5rem;margin-top:1rem; }

.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:#666; }

.footer-contact { padding:5rem 1rem; }
.footer-contact-flex { display:flex;flex-direction: column;text-align:center;gap:1rem;align-items:center; }
.footer-nav { padding:5rem 1rem 6.75rem; }
.footer-nav-flex { display:flex;gap:1rem;flex-wrap:wrap;justify-content: space-between; }
.footer-logo { width:100%;max-width:22px; }

footer .menu { list-style: none;padding:0;margin:0; }
footer .menu li { margin-bottom:1rem; }
footer a { color:var(--white);text-decoration: none; }
.footer-menus-flex { display:flex;flex-wrap:wrap;gap:7rem; }
.footer-menus-flex > div { display:flex;flex-direction: column;gap:1rem; }
footer .socials { display:flex;gap:1rem; }
.footer-footer { padding-top:2rem;margin-top:6rem;border-top:1px solid var(--orange); }
footer .getintouch  { display:none; }
footer .socials a:hover svg path { fill:var(--orange) }

/* ===== MODULES ===== */
.module { display:block;padding:5rem 1rem; }


.banner-columns { display:grid;gap:2rem;grid-template-columns:600px 1fr;align-items:center; }
.banner-images { margin-top:-5rem;margin-bottom:-5rem;position:relative;height:500px; }
.main-banner { height:100%; }
.cross { position:absolute;top:0;left:50%;width:100%;height:100%; }
.cross svg { margin:0 1rem;height:100%;width:auto; }
/* .cross svg:nth-child(2) { position: absolute; top:0; left:2rem;transform:translateX(100%); } */
.banner-images .box { height:33.4%;aspect-ratio:1/1;display:inline-block;position:absolute;top:0;left:2rem; }
.banner-images .box:nth-child(1) { transform:translate(0%, 100%); }
.banner-images .box:nth-child(2) { transform:translate(100%, 100%); }
.banner-images .box:nth-child(3) { transform:translate(100%, 200%); }
.banner-images .box:nth-child(4) { transform:translate(200%, 0%); }
.banner-images .box:nth-child(5) { transform:translate(300%, 100%); }
.banner-images .box:nth-child(6) { transform:translate(400%, 200%); }
.banner-images .box:nth-child(7) { transform:translate(500%, 100%); }
.banner-images .box img { position:absolute;top:0;left:0;width:100%;height:100%;object-fit: cover; }

.two-column { display:grid;gap:5rem;grid-template-columns:1fr 1fr; }

.flex { display:flex;flex-direction: column;gap:2rem; }

.services-grid { display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin:2rem 0 4rem; }
.services-grid > div { background:var(--white); }
.service-grid-section { padding:1.3rem 3.5rem 3rem;color:var(--blue-dark);border-top:1px solid var(--blue-dark);text-align:left; }
.services-grid > div > .service-grid-section:first-child { padding-bottom:1.3rem; }

ul.ticks { list-style:url("data:image/svg+xml;utf8,<svg width='13' height='11' viewBox='0 0 13 11' xmlns='http://www.w3.org/2000/svg'><path d='M12.5999 1.78194L4.89588 10.4219L-0.000117123 5.56194L1.76388 3.77994L4.58988 6.58794L10.6379 -5.93662e-05L12.5999 1.78194Z' fill='%230E1829'/></svg>");padding-left:2rem; }
ul.ticks li { padding-left:1rem;margin-bottom:0.5rem; }


.why-grid { display:grid;grid-template-columns: repeat(5, 1fr);gap:1.5rem;margin:1rem 0 2rem; }
.why-grid-item { padding:2.5rem;text-align:left; }


.team-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.5rem; }
.team-grid > div { display:flex;flex-direction: column;gap:1rem; }
.team-grid > div img { width:8.5rem; }



.post-grid { display:grid;grid-template-columns:repeat(4, 1fr);gap:1.5rem; }
.post-grid-item { padding:2.5rem 0; }
.post-grid-item:has(> img) { padding-top:0; }
.post-grid-item img { margin-bottom:1.5rem;aspect-ratio:16/9;object-fit:cover; }

.pagination { width:100%;display:flex;gap:0.4rem;justify-content:center; }
.pagination a { text-decoration: none; }

.noverflow { overflow:hidden; }
.testimonial-slider { width:80%;overflow:visible;margin-left:-0.75rem; }
.testimonial-slider .slick-list { overflow:visible; }
.testimonial-slide { padding:0.75rem; }

.top-border { border-top:1rem solid var(--blue-light); }
.top-border.orange { border-color:var(--orange); }
.top-border.blue-lightest { border-color:var(--blue-lightest); }
.top-border.blue-mid { border-color:var(--blue-mid); }



.testimonial-slide, .testimonial-slide > div { height:100%; }
.testimonial-slide > div { display:flex;flex-direction:column; }
.testimonial-slide-section { padding:2.5rem; }
.testimonial-slide-section:last-child { border-top:1px solid var(--blue-dark);margin-top:auto; }
.testimonial-grid { display:grid;grid-template-columns:1fr 150px; }
.testimonial-details { display:flex;flex-direction: column;gap:0.5rem; }
.testimonial-grid img { max-height:90px;width:auto;max-width:100%;margin:0 0 0 auto; }

.testimonial-header { position:relative;padding-right:8rem; }
.slider-arrows { display:flex;gap:0.8rem;position:absolute;top:2.5rem;right:0; }
.slick-next, .slick-prev { transform:none;position:static;padding:0.6rem 0.9rem;border:1px solid var(--orange);width:35px;height:35px;  }
button.slick-next::after, button.slick-prev::after { display:none; }
.slick-next:before, .slick-prev:before { background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='17' viewBox='0 0 10 17' fill='none'><path d='M0.353516 16.3535L8.35352 8.35351L0.353515 0.353515' stroke='%230E1829'/></svg>") no-repeat center;background-size:contain;content:"";display:block;width:10px;height:17px;position:static;opacity: 1; }
.slick-prev { padding-left:0.7rem; }
.slick-prev::before { transform:scaleX(-1); }
.slick-next:hover, .slick-prev:hover { background:var(--orange); }

.slick-dots { position:static;display:flex;flex-wrap:nowrap; }
.slick-dots li { width:auto;flex:1 1 auto;margin:0; }
.slick-dots li button { background:var(--grey-mid);width:100%;padding:0px;height:1rem; }
.slick-dots li:hover button { background:var(--blue-lightest); }
.slick-dots li.slick-active button { background:var(--blue-dark); }
.slick-dots li button::before, .slick-dots li button::after { display:none; }

.slick-track {display:flex}
.slick-slide {height:auto}
.slick-slide > div {height:100%}


.forminator-checkbox { border:1px solid #000;position:relative;width:fit-content;display:inline-flex !important;padding:0.5rem 0.75rem;margin:0.5rem !important; }
.forminator-checkbox input { position:absolute;pointer-events:none;opacity:0; }
.forminator-checkbox span { margin:0 !important; }
.forminator-checkbox.forminator-is_checked { background:#000;color:#fff; }
 

.popup { z-index:999;position:fixed;top:100%;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);padding:5rem 2rem;opacity:0;pointer-events:none;transition:opacity 0.3s ease-in-out; }
.popup-box { background:var(--white);max-height:100%;width:100%;max-width:60rem;margin:0 auto;position:relative;max-height:100%;
    width:100%; display:flex;
    flex-direction:column;transform:translateY(10%);transition:transform 0.4s ease-in-out; }
.popup.visible .popup-box { transform:translateY(0%); }
.popup-content { overflow:auto;flex:1;padding:3.5rem; }
.close { position:absolute;top:0;right:-4rem;padding:1rem 1rem 14px 1rem;background:var(--white); }
.close::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'><path d='M0.353577 0.353554L16.3536 16.3536M16.3536 0.353554L0.353577 16.3536' stroke='%230E1829' stroke-miterlimit='10'/></svg>");background-position:center;content:"";display:inline-block;width:17px;height:17px;
 }
 .close:hover { background:var(--grey-mid);}


 .popup * { pointer-events:none;}
.popup.visible { opacity:1;pointer-events:all;top:0; }
.popup.visible * { pointer-events:all; }





form :is(input, textarea) { background:transparent;padding:0.5rem 1rem;font-family:'Manrope', sans-serif; }
textarea { min-height:160px; }
.forminator-field-html p, .forminator-consent__label p { font-size:0.8rem;line-height:1.2rem; }
.forminator-row:has(> .forminator-field-consent) { margin-bottom:-0px !important;margin-top:-30px; }
.forminator-checkbox__wrapper { align-items:center !important; }

.cky-btn-revisit, .cky-btn-revisit-wrapper { display:none !important; }

@media(max-width:1200px){
	.two-column { gap:2rem;}
	.services-grid { grid-template-columns:1fr 1fr; }
	.why-grid { grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr; }
	.services-grid > div:first-child { grid-column: span 2; }
	.why-grid > .why-grid-item { grid-column:span 2; } 
	.why-grid > :is(.why-grid-item:nth-child(4), .why-grid-item:nth-child(5)) { grid-column:span 3; } 
	.team-grid { grid-template-columns:1fr;row-gap:3rem; }
	.post-grid { grid-template-columns:1fr 1fr; }
	.footer-menus-flex { margin-top:3rem; }
	.contact-grid { grid-template-columns:1fr 1fr;}
	.contact-box { flex-wrap:wrap;flex-direction:row;align-items: center;gap:1rem; }
	.banner-columns { grid-template-columns:1fr; }
	.banner-images { margin-top:0;height:400px; }
}

/* Tablet Size */
@media(max-width:991px){
	/* Move this to it's own query if it needs to break down earlier */
		.mobile-toggle { display:inline-block;position:absolute;top:4rem;right:2rem; }
		.mobile-toggle:hover .toggle-bar { background:var(--orange); }
		#navmenu { flex:1 0; }
		.menu-nav-menu-container { display:none; }
		footer .menu-nav-menu-container { display:inline-block !important; }
		#navmenu .menu li { display:inline-block;width:100%;padding:0; }
		#navmenu .menu a { display:inline-block;width:100%;padding:10px; }
		#navmenu .sub-menu { display: none;width:100%;position:static; }
		#navmenu .menu li:hover .sub-menu { display:none; }
		.nav-flex > div { width:100%; }
	/* ---------------------- */

	.two-column { grid-template-columns:1fr; }
	.banner-images { height:300px; }
	.close { right:0; }
	
}

/* Mobile Size */
@media(max-width:768px){
	.services-grid { grid-template-columns:1fr; }
	.services-grid > div:first-child { grid-column: span 1; }
.testimonial-slider {width:100%;}
.slider-arrows { position:static;margin-bottom:1rem;}
	.why-grid > .why-grid-item { grid-column:span 3; } 
	.why-grid > .why-grid-item:nth-child(3) { grid-column:span 6; }
	.why-grid > :is(.why-grid-item:nth-child(4), .why-grid-item:nth-child(5)) { grid-column:span 3; } 
	.post-grid { grid-template-columns:1fr; }

	.footer-menus-flex { gap:3rem;margin-top:3rem; }
.contact-grid { grid-template-columns:1fr;}


h1, .h-3xl 	{ font-size:3rem;line-height:3rem; }
h1, .h-3xl 	{ font-size:2.5rem;line-height:3rem; }
h2, .h-2xl  	{ font-size:2rem;line-height:2.4rem; }
h3, .h-xl 	{ font-size:1.8rem;line-height:2.1rem; }
h4, .h-l 	{ font-size:1.4rem;line-height:1.7rem; }
h5, .h-m, h6, .h-s 	{ font-size:1.2rem;line-height:1.5rem; }
.h-xs 	{ font-size:1rem;line-height:1.2rem; }

.p-l 	{ font-size:1.21rem;line-height:1.7rem; }
p, .p-m, ul li, ol li { font-size:1rem;line-height:1.5rem; }
.p-s 	{ font-size:0.8rem;line-height:1.2rem; }
.p-xs	{ font-size:0.7rem;line-height:1.05rem; }

.service-grid-section { padding:1.3rem 1.5rem 3rem; }
.forminator-row:has(> .forminator-field-consent) { margin-bottom:-0px !important;margin-top:0px; }
.forminator-checkbox__wrapper { align-items:center; }

}

@media(max-width:560px){
	.banner-images { height:250px; }
	.top-bar { justify-content:flex-start; }
	.top-bar a { color:#fff !important; }
	.why-grid > .why-grid-item { grid-column:span 6 !important; }
	.testimonial-slide-section { padding:1rem;}
	.testimonial-slide-section:nth-child(2) { padding-top:2rem;padding-bottom:2rem; }
	.testimonial-grid { grid-template-columns: 1fr;gap:1.5rem; }
	.testimonial-grid img { margin:0;}
	.testimonial-details { grid-row:2; }
	.popup { padding:2.5rem 1rem;}
	.popup-content { padding:2rem 1rem; }

	.logo svg { width:100px;height:auto;}
	.nav-flex { padding:1rem; }
			.mobile-toggle { top:1.8rem; }

			/* .testimonial-slide, .testimonial-slide > div { height:auto; } */
			.testimonial-slider { margin-left:0; }
			.testimonial-slide { padding:0; }
			.testimonial-slide-section:last-child { margin-top:1rem; }
			.testimonial-grid img { max-height:150px;max-width:150px; }

		
}