/**
 * Color classes and default styling are in /assets/main.css, focus your efforts there
 * @import external fonts at top of this page before default.css
 * remove comment for dark-mode.css if you want to enable that -- will not be 100%, you will need to fix minor things
 */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Ubuntu:wght@300;400;500;700&display=swap');
@import url("./assets/default-settings.css");
/** @import url("assets/dark-mode.css"); */

small, .small { font-size: 80%; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .heading-font { font-family: 'Rajdhani', sans-serif; font-weight: 700; }
.btn { font-family: "Rajdhani", sans-serif; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1875rem; }
a { color: #0170B9; }
a { text-decoration: none; }
a:hover { color: #212529; }
a.nav-link, a.nav-link:hover, a.nav-link:focus, .btn, .btn:hover, .btn:focus { color: #212529; }
.btn.btn-link { text-decoration: none; }
.btn.angle-start, .btn.angle-end, .carousel-caption .btn { position: relative; }
.btn.angle-start { padding: 1rem 2rem 1rem 3.25rem; }
.btn.angle-end, .carousel-caption .btn { padding: 1rem 3rem 1rem 2rem; }
.btn.angle-start:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%); }
.btn.angle-end:before, .carousel-caption .btn:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%); }
.btn-content-wrapper { position: relative; z-index: 10; }
.btn.btn-blue, .btn.btn-blue:hover, .btn-green, .btn-green:hover { color: #fff; }
.btn-blue { padding: 0.75rem 1.25rem; letter-spacing: 3px; }
.btn-blue:before { background-color: #649bee; }
.btn-green:before { background-color: #6abe4c; }
.text-blue { color: #649bee; }
.text-green, #pum-4623 a.text-green:hover { color: #6abe4c; }

.form-control { border-radius: 0; }

main { font-family:'Ubuntu', sans-serif; font-weight: 300; }
.quote-font { font-family: 'Ubuntu', sans-serif; font-size: 1.5rem; font-weight: 300; }
#pum-4623 .wpcf7-submit { background-color: transparent; text-transform: uppercase; letter-spacing: 0.1875rem; border: 0 none; }
#pum-4623 .wpcf7-spinner { margin-bottom: -9px; }
#pum-4623 .btn-green { display: block; text-align: left; }
#pum-4623 .btn-green:before { z-index: -1; }

body > header { background-color: #fff; }
header .navbar-brand img { width: 100%; height: auto; }
#block-3 { display: none; }
#block-3 .fa-envelope-open { color: #212529; }
.logged-in #block-3 { height: 177px; }
.navbar { padding-left: 4%; padding-right: 25%; }
.navbar > .container { max-width: unset; }
.nav-link { font-family: "Rajdhani", sans-serif; padding: 0.75rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.125rem; }
.navbar-toggler, .navbar-toggler:focus { position: absolute; top: 1.25rem; right: 0; border: 0 none; outline: 0 none; box-shadow: none; }

.jwbs-banner { margin-bottom: 3rem; }
.carousel-caption .btn { background-color: transparent; }
.carousel-caption .btn:before { background-color: #fff; }
.green-gradient-bg { background: url('/wp-content/uploads/2022/10/green-gradient-bg.jpg') no-repeat center; background-size: cover; }
.green-gradient-bg h2 { line-height: 1em; }
.green-gradient-bg p { font-family: 'Ubuntu', sans-serif; font-weight: 700; line-height: 1.2; }

.home #jwbs-banner-banner .carousel-caption { margin: 0; padding: 0; right: 3%; bottom: 0.75rem; left: 3%; }
.home #jwbs-banner-banner .carousel-caption .container { margin: 0; max-width: unset; }
.home #jwbs-banner-banner .carousel-caption h3 { font-size: 2rem; line-height: 1; }
.home #jwbs-banner-slides .carousel-control-prev, .home #jwbs-banner-slides .carousel-control-next { width: 15%; opacity: 1; z-index: 20; }
.home #jwbs-banner-slides .carousel-control-prev-icon, .home #jwbs-banner-slides .carousel-control-next-icon { width: 4rem; height: 4rem; }
.home #jwbs-banner-slides .carousel-item:before { content: ''; position: absolute; top: 0; bottom: auto; left: 0; width: 100%; height: 50%; background-color: rgba(106, 190, 76, 0.95); clip-path: unset; }
.home #jwbs-banner-slides .carousel-item:after { content: ''; position: absolute; top: auto; right: 0; bottom: 0; width: 100%; height: 50%; background-color: rgba(100, 155, 239, 0.8); clip-path: unset; }
.home #jwbs-banner-slides .carousel-caption { position: absolute; top: 0; right: 0; bottom: unset; left: 0; padding: 1.875rem; transform: unset; z-index: 10; }
.home #jwbs-banner-slides .carousel-caption .container { margin: unset; max-width: unset; }
.home #jwbs-banner-slides .h1 { font-size: 2rem; font-weight: 700; line-height: 1em; }
.home #jwbs-banner-slides ul { padding: 0; list-style: none; font-family: "Rajdhani", sans-serif; font-size: 1.125rem; }
.home #jwbs-banner-slides li { position: relative; margin: 1.125rem 0; padding-left: 1.25rem; }
.home #jwbs-banner-slides li:before { position: absolute; content: '\2713'; top: 1px; left: 0; }
.jwbs-banner h1 { font-size: 2rem; }

#consultation-lead { font-size: 1.875rem; line-height: 1.2em; }

#jwbs-banner-contact:before, #jwbs-banner-contact-mobile:before { content: ''; position: absolute; top: 0; left: 0; width: 46%; height: 100%; background-color: rgba(100, 155, 230, 0.6); clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%); z-index: 5; }
#jwbs-banner-contact:after, #jwbs-banner-contact-mobile:after { content: ''; position: absolute; top: 0; right: 0; width: 21%; height: 100%; background-color: rgba(95, 212, 142, 0.7); clip-path: polygon(0 0, 100% 0, 100% 100%, 45% 100%); z-index: 5; }
#jwbs-banner-contact .carousel-caption { bottom: 33%; z-index: 15; }
#jwbs-banner-contact .carousel-caption .container { max-width: 1056px; }
#jwbs-banner-contact-mobile:after { clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%); }
#jwbs-banner-contact-mobile .carousel-caption { bottom: 32.5%; left: 0; z-index: 15; }
#jwbs-banner-contact-mobile .carousel-caption h1 { font-size: 2.625rem; }

#block-4 .breakout { background: #f7f7f9 url('/wp-content/uploads/2021/05/footer-back.png') no-repeat center; background-size: cover; }
#block-4 .wp-block-column:not(:first-of-type) { padding-top: 2.75rem; }
#block-4 a, #inner-footer .breakout a:hover { color: var(--bs-body-color); }
#block-5 { font-family: 'Rajdhani', sans-serif; font-size: 0.875rem; font-weight: 700; letter-spacing: 3px; }

/** media queries */
/** Small devices (landscape phones, 576px and up) [-sm] */
@media only screen and (min-width : 576px) {
}

/** Medium devices (tablets, 768px and up) [-md] */
@media only screen and (min-width : 768px) {
	header .navbar-brand img { width: auto; max-height: 125px; }
	#block-3 { display: flex; align-items: center; justify-content: flex-end; position: fixed; top:0; right: 0; padding-top: 2rem; width: 25%; height: 145px; z-index: 1030; }
	.home #jwbs-banner-slides .carousel-control-prev, .home #jwbs-banner-slides .carousel-control-next { width: 5%; }
	.home #jwbs-banner-slides .carousel-item:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 42%; height: 100%; background-color: rgba(106, 190, 76, 0.95); clip-path: polygon(0 0, 75% 0, 100% 100%, 0 100%); }
	.home #jwbs-banner-slides .carousel-item:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 32%; height: 100%; background-color: rgba(100, 155, 239, 0.8); clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%); }
	.home #jwbs-banner-slides .carousel-caption { position: absolute; top: 50%; left: 50%; padding: 0; transform: translate(-80%, -50%); }
	.home #jwbs-banner-slides .carousel-caption .container { max-width: 410px; }
	.home #jwbs-banner-slides .h1 { font-size: 3.25rem; }
	.home #jwbs-banner-banner .carousel-caption { bottom: 1.25rem; }
	.home #jwbs-banner-banner .carousel-caption .container { margin-top: -25%; }
	.home #jwbs-banner-banner .carousel-caption h3 { font-size: 2,5rem; line-height: 1.2; }
	#jwbs-banner-contact .carousel-caption h1 { font-size: 4rem; font-weight: 700; }
}

/** Large devices (desktops, 992px and up) [-lg] */
@media only screen and (min-width : 992px) {
	.font-size-lg-325 { font-size: 3.25rem !important; }
}

/** X-Large devices (large desktops, 1200px and up) [-xl] */
@media only screen and (min-width : 1200px) {
}

/** larger desktops, 1400px and up [-xxl] */
@media only screen and (min-width : 1400px) {
}