/*
Theme Name: CBA Business Solutions
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=Inter:wght@300;400;600&display=swap');

 
:root{
	--blue:#253469;
	--red:#c41d23;
	--grey:#909090;
	--grey-light:#f4f5f8;
	--side-padding:30px;
}


/* ===== GENERAL ===== */

html, body { width:100%;margin:0;padding:0;overflow-x:hidden;font-family:"Inter", sans-serif;color:var(--blue); }

img { display:block; }

.m-container { width:100%;max-width:1500px;margin:0 auto;padding:0px var(--side-padding); }
.m-container.no-padding { padding:0px; }

.m-grid { margin:0; }
.m-grid-gap-30 { grid-column-gap: 60px;grid-row-gap:0px; }

.pos-rel { position:relative; }
.pos-abs { position:absolute; }


.vertical-align { display:block;top:0;left:0;width:100%;height:100%; }
.vertical-outer { display:table;width:100%;height:100%;vertical-align: middle;  }
.vertical-inner { display:table-cell;width:100%;height:100%;vertical-align: middle; }

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

a { color:var(--red) }
a:hover { color:var(--blue) }

a.button, button { background:var(--red);color:#fff;display:inline-block;text-decoration:none;padding:0.75rem 0.75rem;border-radius:5px;font-size:1rem;font-weight:600;border:none; }
a.button:hover, button:hover { background:var(--grey); }

h1 { font-size:clamp(2.5rem,3vw,3.5rem);text-wrap:balance; }
h2	{ font-size:clamp(1.4rem,3vw,2.5rem); }
h3 { font-size:clam(1.125rem,3vw,1.5rem);line-height:150%;color:var(--red); }

.bg-blue h3 { color:#fff; }

.bg-grey :is(h1,h2,h3,h4,h5,h6) { color:var(--red); }

p { line-height:150%; }

ul li { margin-bottom:15px;color:var(--red);font-weight:600; }
.bg-blue ul li { color:#fff; }

/* ===== NAV MENU ===== */
nav { width:100%;background:var(--grey-light);padding:10px 0; }
a.logo { display:inline-block;vertical-align:middle; }
#navmenu { width:calc(100% - 180px);display:inline-block;vertical-align:middle; }
#navmenu .menu { list-style: none;padding:0;margin:10px 0px -10px 0;;width:100%;z-index:100;position:relative;right:-20px;text-align:right; }
#navmenu .menu li {text-align:center;padding:0 0px;position:relative;display:inline-block;margin:0; }
#navmenu .menu li a { font-size:0.875rem;padding:12px 20px;font-weight:600;text-decoration:none;color:var(--blue);display:inline-block; }
#navmenu .menu li.current-menu-item a,
#navmenu .menu li:hover a { background:var(--blue);color:#fff;border-top-right-radius:10px;border-top-left-radius:10px; }
#navmenu .sub-menu { display:none;position:absolute;width:auto;top:100%;left:0;background:var(--blue);list-style: none;padding:0;margin:0;text-align:left }
#navmenu .menu .sub-menu li { display:block;width:auto; }
#navmenu .menu .sub-menu li a { border-radius:0px;text-wrap:nowrap;text-align:left;display:block; }
#navmenu .menu .sub-menu li a:hover { background:var(--red) }
#navmenu .menu li:hover .sub-menu { display:block; }

.navtop { width:100%;text-align:right;display:inline-block; }
.navtop span.phone { color:var(--red);font-size:1.25rem;font-weight:600;margin-right:60px; }
.navtop.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:#666; }

footer { padding:60px 0px 120px;color:#fff; }
#footermenu .menu { list-style: none;padding:0;margin:0; }
#footermenu .menu li { margin-bottom:15px; }
#footermenu .menu li a { text-decoration:none;color:#fff; }
#footermenu .menu li a:hover { opacity:0.4; }
.footer-grid { margin-top:60px; }


/* ===== MODULES ===== */
.module { display:block; }

/* ===== BANNER ===== */
.module.banner { padding:60px 0 30px;overflow:visible; }
.banner-image { border-top-left-radius:12.5rem;position:relative;width:calc(100% + 150px); }
.banner-image.left{ right:auto;left:-150px;border-top-left-radius:0rem;border-top-right-radius:12.5rem; }
.banner-background { position:absolute;top:-18vw;left:0;width:100%;object-fit:contain;z-index:-1; }
.module.banner p { color:var(--red);font-size:clamp(1.125rem,3vw,1.5rem);font-weight:600;text-wrap:balance }

/* ===== BLUE BAR ===== */
.blue-bar { position:relative;padding:45px var(--side-padding);border-top-right-radius:12.5rem; }
.blue-bar :is(p, ul) { font-size:clamp(1rem,3vw,1.2rem); }
.blue-bar li { margin-bottom:15px; }
.blue-bar::before { content:"";display:block;background:var(--blue);width:100vw;height:100%;position:absolute;top:0;right:100%; }

/* ===== PANELS ===== */
.panel-grid { display:grid;grid-auto-columns: minmax(0, 1fr);grid-auto-flow: column; }
.panel img { width:100%;height:auto;aspect-ratio:1/1;object-fit:cover; }
.panel span { color:#fff;font-size:2rem;font-weight:600;position:absolute;top:50%;transform:translateY(-50%);display:table-caption;text-align:center;word-spacing:999rem;line-height:120%; }
.panel a { font-weight:600;font-size:1rem;text-decoration:none;color:#fff;position:absolute;bottom:0;left:0;display:inline-block;text-align:center;width:100%;height:auto;padding:30px;background:rgba(196,29,35,0.7); }
.panel a:hover { background:var(--red); }
.dark-overlay { position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5); }

/* ==== COLUMN TEXT ==== */
.column_text { padding:clamp(40px,5vw,90px) 0px; }
.plus-bullets ul { list-style:none;padding-left:45px; }
.plus-bullets ul li { margin-bottom:30px;position:relative;line-height:150%; }
.plus-bullets ul li::before { content:"";display:block;width:30px;height:30px;position:absolute;top:0;left:-45px;background:url("/wp-content/themes/cba_arch/img/plus_bullet.svg") no-repeat center;background-size:contain; }


/* ===== FORM ===== */
.module.form { padding:60px 0px; }
.form-image { position:absolute;top:0;right:calc(50% + 60px);width:50%;height:100%;object-fit:cover; }
form, input, textarea { width:100%;display:inline-block; }
input, textarea { width:100%;padding:10px;font-size:1.125rem;border:none;font-family:"Inter", sans-serif; }

/* Banner */
.banner-overlay { background:rgba(0,0,0,0.4); }


.forminator-module-edit-link { display: none !important; }

/* Two Column */
.column-image { width:100%;height:100%;position:relative;right:-30px;border-top-left-radius: 5rem;overflow:hidden; }
.column-image.left { left:-30px;right:auto;border-top-left-radius: 0rem;border-top-right-radius: 5rem; }
.column-image img { height:100%;width:100%;object-fit: cover; } 

.module.team_module { padding:clamp(45px,5vw,90px) 0; }
.team-member { margin-bottom:30px; }
.team-image { width:100%;border-top-right-radius: 12.5rem;overflow: hidden;margin-bottom:20px; }
.team-name { font-size:1.25rem;margin-bottom:5px;display:block; }
.team-role { color:var(--red);display:block; }
.team-contact { display: block;margin-top:15px;line-height:180%; }

.animate {
    opacity: 0;
    position: relative;
    top: 30px;
    /*transition: all 0.5s ease-in-out;*/
}

.animate-left { opacity:0;position: relative;left:-30px; }
/*.animate.animated { opacity:1;top:0; }*/

.socials { margin:0 -5px 30px; }
.socials a { display:inline-block;margin:0 5px; }
.socials a:hover { opacity:0.6; }
.footer-grid > div p:first-child { margin-top: 0px; }
#footermenu .menu { margin-bottom:30px; }

@media(min-width:1336px){
	.column-image,.banner-image { border-bottom-right-radius:5rem; }
	.column-image.left { border-bottom-right-radius:0rem;border-bottom-left-radius:5rem; }

}

@media(max-width:1500px){

}

@media(max-width:1200px){
	.banner-image { width:calc(100% + 30px); }
	.banner-image.left { left:-30px; }

}


@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:70px;right:30px; }
		#navmenu { display:none;width:100%;width:calc(100% + 60px);left:-30px;position:relative; }
		#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;background:var(--grey);color:#fff; }
		#navmenu .menu li.current-menu-item .sub-menu a, #navmenu .menu li:hover .sub-menu a { background:var(--grey);color:#fff; }
		#navmenu .menu .sub-menu li a { text-align:center;color:#fff; }
		#navmenu .menu .sub-menu li:hover a { background:var(--red); }
		#navmenu .menu li:hover .sub-menu { display:none; }
		#navmenu .menu li.opened { background:var(--blue); }
		#navmenu .menu li.opened > a { color:#fff; }
		.navtop { display:none; }
		.navtop.mobile { display:block; }
		.navtop.mobile a { width:calc(100% + 60px);text-align:center;position:relative;top:-10px;left:-30px;border-radius:0px;padding:8px 0.75rem; }
		#navmenu .menu { right:0; }
		#navmenu .menu li.current-menu-item a, #navmenu .menu li:hover a { border-radius:0px; }
	/* ---------------------- */

	a.logo { transform:scale(0.7) translateX(-30%); }

	.form-image { display:none; }
}	


@media(max-width:900px){
			.panel-grid { display:inline-block; }
	.panel img { aspect-ratio:2/1; } 
	.panel span { top:calc(50% - 40px); }
	.panel a { position:relative; }

	}

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

	.image-col { grid-row-start:1; }


	/*h1 { font-size:3rem; }*/
	.banner h1 { margin-top:0px; }
/*	h2 { font-size:2rem; }
	h3 { font-size:1.25rem; }*/

	.column_text { padding:30px 0; }
	.blue-bar { border-top-right-radius:4.5rem; }
	.banner-image { border-top-left-radius:4.5rem; }
	.banner-image.left { border-top-right-radius:4.5rem; }
	.m-grid-gap-30 { grid-column-gap: 30px; }

	.column-image { width:calc(100% + 60px);right:auto;left:-30px;border-radius:0rem !important; }
}

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

	:root{
		--side-padding:15px;
	}

	.m-grid-gap-30 { grid-column-gap: 15px; }
/*
		h1 { font-size:2.5rem; }
	h2 { font-size:1.8rem; }
	h3 { font-size:1.125rem; }*/

}