/*
Theme Name: Nifty 2025
Template: twentytwentyone
Author: Nifty Development
Author URI: https: //niftymarketing.com/
Description: A lightweight theme for use of our clients.
Version: 2.5.1
*/

/*Theme Variables*/
:root {
	/* Site Colors*/
	--color-1: #272361;
	--color-2: #ebebeb;
	--color-background: white;
	--color-text: black;
	--alt-text-color: #6a6a6a;
	--color-text-subtle: rgba(255, 255, 255, 0.8);
	--secondary-color-text: white;
	/* Gradient-specific colors */
	--gradient-dark: var(--color-1);
	--gradient-light: var(--color-1);
	--left-to-right-gradient: linear-gradient(90deg, var(--color-1), var(--color-1));

	--color-error: #c02b0a;

	/* Font Sizes */
	--fsize-xxl: clamp(16px, 11.2vw, 215px);
	--fsize-banner: clamp(24px, 5.1vw, 100px);
	--fsize-xl: clamp(24px, 7.7vw, 124px);
    --fsize-lg: clamp(32px, 6vw, 108px);
	--fsize-md-lg: clamp(32px, 5vw, 100px);
	--fsize-md: clamp(32px, 3vw, 57px);
	--fsize-sm-md: clamp(17px, 1.5vw, 45px);
	--fsize-sm: clamp(16px, 1.1vw, 18px);
	--fsize-default: clamp(17px, 1.1vw, 19px);
	--fsize-xs: 16px;
	
/* 	Font weights */
	--giant-bold: 900;	
	--extra-bold: 800;
	--bolder: 700;
	--bold:600;
	--less-bold:500;
	--normal:400;
	
/* 	Line Heights */
	--xtr-line-height:2;
	--lrg-line-height:1.6;
	--md-line-height:1.4;
	--sml-line-height:1.2;
	--xsml-line-height:0.9;
	
	/* 	Letter Spacing */
	--l-space-3:-0.06vw;
	--l-space-2:-0.3vw;
	--l-space-1:1px;
	
	/*font families*/
	--heading-font: "Albert Sans Variable", sans-serif;
	--text-font: "Albert Sans Variable", sans-serif;
}

/*Default Overall Styles*/
html, body { scroll-behavior: smooth; font-size: var(--fsize-default); font-variant-ligatures: none; overflow-anchor: none; }
body { background:var(--color-background); margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-family: var(--text-font); line-height: var(--md-line-height); }
* { box-sizing: border-box; -webkit-appearance: none; font-family: inherit; max-width: 100%; }
/* lazy loading flow fixes */
img { object-fit: contain; min-width: 1px; }
a { color: var(--color-1); text-decoration: none; transition: ease all .25s; }
nav a:hover { color: var(--secondary-color-text); }
article a { text-decoration: underline; text-underline-position: under; text-decoration-thickness: 2px; }
code, pre, kbd, samp { font-family: monospace; }

/*Font Defaults*/
h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); line-height: 1.25em; margin-bottom: 0.5em; color:var(--color-text); }
body, p, ul, ol, li { font-family: var(--text-font); line-height:var(----md-line-height); }
h1 { font-size: var(--fsize-xl); font-weight: normal; text-transform: uppercase; line-height: 0.9; }
h2 { font-size: var(--fsize-lg); letter-spacing: var(--l-space-2); text-transform: uppercase; line-height: var(--xsml-line-height); font-weight: var(--normal); margin: 0; }
h3 { font-size: var(--fsize-md); }
h4 { font-size: var(--fsize-sm); }
p { line-height: var(--lrg-line-height); color:var(--color-text); }

/*Layout*/
.section-padding { padding: 5% 0; }
.content-width { width: 1800px; max-width: 90%; padding: 0; margin: 0 auto; }
.flex { display: flex; flex-wrap: wrap; }
.slider-wrapper { max-width: 2500px; margin: 0 auto; overflow: hidden; }

/* ADA header */
.masthead { padding: 15px 0; }
.masthead ul .menu-item a { color:var(--color-text); font-weight: var(--bold);text-transform: uppercase; font-size: 1.1em; }

.skip-bar { position: absolute; display: block; width: 100%; text-align: center; height: 0; overflow: hidden; background: var(--secondary-color-text); color: black; font-weight: var(--bold); top: 0; left: 0; z-index: 10; }
.skip-bar:focus { height: auto; padding: 20px; }
.inner-masthead { justify-content: space-between; align-items: start; flex-wrap: nowrap; }
.logo-container svg { width: clamp(100px, 17vw, 330px); height: auto; transition: fill .3s ease, width .3s ease; fill:var(--color-1);}


.mobile-nav-input { display: none; }
.main-nav { padding: 0; }
.masthead ul .current-menu-item > a:first-child, .masthead ul .current-menu-ancestor > a:first-child { /* color: var(--color-text); */ color: var(--color-1); }
.menus { justify-content: flex-end; }
.header-call-box { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0px; margin: 8px 0 4px; font-size: var(--fsize-sm); }
.header-call-box p, .header-call-box a { color: var(--color-1); letter-spacing: var(--l-space-3); text-transform: uppercase; font-weight: var(--bold); margin: 0; display: flex; flex: 1 1 100%; align-items: end; line-height: 1; justify-content: end; }
.header-call-box p{font-size: 57%; margin-bottom: 8px;}
.header-call-box .inner { font-size: 1.7em; }
.header-phone-number svg { width: 25px; height: 25px; }
.sub-menu > li { position: relative; padding: 5px 0; }
.is-style-outline .wp-block-button__link{ background: var(--secondary-color-text); color: var(--color-1); } 
.wp-block-button__link { color: var(--color-background); text-decoration: none; font-size: var(--fsize-sm); text-transform: uppercase; font-weight: var(--bolder); background: var(--color-1); width: max-content; padding: 1rem 3rem; height: max-content; display: inline-block; filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, .3)); }
.wp-block-button__link:hover { color: var(--color-text); background: white; }

.bg-img-image img { position: absolute; object-fit: cover; width: 100%; height: 100%; left: 0; top: 0; filter: grayscale(1); z-index: 0; }
.gradient-bg { position: relative; }

.gradient-bg:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(black, transparent), linear-gradient(164deg, transparent, black), linear-gradient(transparent 40%, black); z-index: 1; }

@media (min-width: 1201px) {
	.header-content { display: flex; flex-direction: row-reverse; align-items: flex-end; column-gap: 3cqw;        flex-wrap: wrap; padding-top: 10px;}
	/* 	"FIXED" IS AN ANIMATEABLE CLASS FOR SMOOTH ANIMATION ON MASTHEAD */
	.masthead.fixed { position: fixed; left: 0; width: 100%; z-index: 1000; top: 0; }
	.masthead.fixed:before { content: ''; position: absolute; top: 0%; left: 0%; width: 100%; height: 0; background: var(--color-1); transition: ease .5s; z-index: -1; border: 1px solid black; box-shadow: 0 0 11px rgba(0,0,0,.5); }
	.masthead.active .header-call-box p, .masthead.active .header-call-box a,
	.masthead.active ul .menu-item a{color: var(--secondary-color-text);}
	.masthead.active .logo-container svg{fill: var(--secondary-color-text);}
	.masthead.fixed.active:before { height: 100%; }

	body.admin-bar .masthead { top: 32px; }
	.mobile-nav { display: none; }
	.main-nav ul { list-style: none; display: flex; margin: 0; gap: 2.5cqw; padding: 0; }
	.main-nav .main-menu > li { position: relative; margin-bottom: 0!important; padding:4px 0; }
	.sub-menu { position: absolute; top: 100%; left: 0; background: var(--transluscent); backdrop-filter: blur(5px); height: 0; overflow: hidden; z-index: 1000; box-shadow: 0 2px 7px rgba(0,0,0,.4); }
	.sub-menu > li:hover > a { color: var(--color-1); }
	.sub-menu .sub-menu { left: 99%; top: 0; }
	.masthead.active ul.sub-menu .menu-item:hover > a,
	.masthead.active ul.sub-menu .menu-item a,
	.masthead ul .menu-item:hover > a { color: var(--color-text); }

	.masthead.active ul .menu-item:hover > a { color:var(--secondary-color-text); }
	.main-nav .main-menu > li:hover > .sub-menu li:hover .sub-menu, .main-nav .main-menu > li:hover > .sub-menu, .masthead .main-nav .main-menu > li > a:focus + .sub-menu, .masthead .main-nav .main-menu > li:focus-within > .sub-menu { height: auto; padding: 15px; min-width: max-content; overflow: initial; border: 1px solid var(--color-text); flex-direction: column; gap: 0; background-color: #fff; }
	.sub-menu > li:hover > .sub-menu, .sub-menu > li > a:focus + .sub-menu, .sub-menu > li:focus-within > .sub-menu { padding: 15px; width: initial; height: initial; min-width: 225px; border: 1px solid var(--secondary-color-text); }

	.main-nav .main-menu > li:nth-last-child(-n + 2) .sub-menu { left: unset; right: 0; }
}

@media(max-width: 1200px) {
	.masthead { position: relative; }
	.logo-container svg { width: clamp(100px, 50vw, 230px); }
	.masthead .header-content { width: 100%; display: flex; flex-direction: column; align-items: end; }
	.masthead .logo-container{ position: absolute; bottom: 14px; }
	.header-call-box p, .header-call-box a { font-size: var(--fsize-sm); }
	.menus { width: 20%; }
	.mobile-nav { font-size: 34px; transform: scaleX(1.75); color: var(--color-text); }
	.main-nav { position: absolute; top: 100%; width: 100%; left: 0; background: var(--color-background); box-shadow: 0 5px 10px rgba(0,0,0,.3); padding: 0 25px; height: 0; overflow: hidden; transition: padding .25s; z-index: 1000; }
	#mobile-nav-input:checked + * + .main-nav { height: auto; padding: 10px 25px; ; }
	.main-nav .sub-menu { display: none; }
	.main-nav li a { outline-color: var(--color-1); }
	.main-nav li:hover a{ color:var(--color-1); }
	.main-nav .main-menu > li { padding: 4px 0; }
	.main-nav .sub-menu { display: none; transition: ease.3s; list-style: none; padding: 0; }
	.main-nav .sub-menu.active { display: block; padding: 4px 15px; }
	.main-nav .sub-menu.active li { padding: 5px 0; }
	.masthead .menu-item a { color:var(--color-text); }
	.masthead .menu-item-has-children { position: relative; }
	.masthead .menu-arrow { content: ''; position: absolute; width: 12px; height: 12px; border-bottom: 2px solid var(--color-1); border-right: 2px solid var(--color-1); transform: rotate(45deg); top: 6px; right: 5%; transition: ease .3s; }
	.masthead .sub-menu.active + .menu-arrow { transform: rotate(225deg); }
	figure img { height: auto; }
	ul#menu-main-menu { list-style: none; padding: 0; }
}

@media(max-width: 750px) {
	h2 { font-size: var(--fsize-xl);}
	.content-width{padding:0;}
	.header-call-box { flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; align-items: baseline; }
	.header-call-box p, .header-call-box a { line-height: 1; }
	.header-call-box p { font-size: var(--fsize-xs); }
	.header-call-box a { font-weight: var(--bold); }
	.section-padding{padding: 65px 0;}
}
@media(max-width: 450px) {
	h1 { font-weight: var(--bold); }
	p { line-height: 1.4; }
}

/* Built In WP Classes */
figure { display: inline-block; margin: 0; }
.aligncenter { display: block; margin: 0 auto; width: fit-content; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.is-layout-flex { display: flex; }
.is-content-justification-center { justify-content: center; }
.is-content-justification-left { justify-content: flex-start; }
.is-content-justification-right { justify-content: flex-end; }
.are-vertically-aligned-center { align-items: center; }
/* DEFAULT CLASSES FOR ANIMATIONS */
.transition { transition: ease 1s; }
.fade-left { opacity: 0; transform: translate(-100%, 0); }
.fade-right { opacity: 0; transform: translate(100%, 0); }
.fade-up { opacity: 0; transform: translate(0, 100%); }
.fade-down { opacity: 0; transform: translate(0, -100%); }
.ghost-in { opacity: 0; }
.transition.active { opacity: 1; transform: none; transition: ease 1s; }