/**
 * 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("./assets/default-settings.css");
/** @import url("assets/dark-mode.css"); */

html, body { overflow-x: hidden; }
body { font-size: 1.125rem; }
a { color: var(--bs-primary-rgb); }

.btn { --bs-btn-border-radius: 0; }
.font-weight-medium { font-weight: 500; }
.font-weight-semibold { font-weight: 600; }
.font-weight-bold { font-weight: 700; }
.font-weight-black { font-weight: 900; }

#block-3 p .inner { padding: 1rem 1rem 0.75rem; font-size: 0.75rem; background-color: #cbcbcb; }
#block-3 p .inner * { color: var(--jwbs-heading-font-color); }

.navbar{ 
--bs-navbar-toggler-collapsed-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2811, 66, 97, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 20 30' xmlns='http://www.w3.org/2000/svg' version='1.1'><g stroke='rgba(11,66,97,1)'><line x1='0' y1='25' x2='20' y2='5' stroke-width='2' /><line x1='0' y1='5' x2='20' y2='25' stroke-width='2' /></g></svg>");
 }
.navbar .container { align-items: flex-end; margin-bottom: 1.5rem; }
.nav-link { font-weight: 500; color: var(--jwbs-heading-font-color); }
.navbar-collapse { padding-top: 1rem; }
.dropdown-menu { --bs-dropdown-link-active-bg: rgb(var(--bs-primary-rgb)); }
.navbar-toggler { border-color: rgba(11,66,97,1); }

#content .jwbs-banner:first-of-type { margin-bottom: 3rem; }

.carousel-caption { display: flex !important; align-items: center; }

#jwbs-banner-home-banner .carousel-caption { top: 0; right: 5%; bottom: 0; left: 5%; }
#jwbs-banner-home-banner .carousel-caption h1, .carousel-caption p { color: #595959; }
#jwbs-banner-home-banner .carousel-caption .display-3 { font-size: 2.25rem; font-weight: 500; }
.carousel-caption p { font-size: 1rem; }
#jwbs-banner-home-banner .carousel-caption .container > div > p { display: none; }
#jwbs-banner-home-banner .carousel-caption .container > p { text-align: right; }
#jwbs-banner-home-banner .carousel-caption .btn { padding: 0.375rem 1.75rem; text-transform: uppercase; }

#jwbs-banner-home-services .carousel-item { background-position: center right; }
#jwbs-banner-home-services .carousel-caption { top: 0; right: 5%; bottom: 0; left: 5%; }

#block-6 .breakout { background-color: #e5e5e5; }
#block-7 .breakout * { font-weight: 500; }
#block-7 .wp-block-columns div:not(:first-child) { flex-basis: 25%; }
#menu-footer-menu { margin: 0; padding: 0; list-style: none; }
#block-7 .breakout a { text-decoration: none; }
#block-7 .breakout a:hover { text-decoration: underline; }

/* forms */
.form-control { border-radius: 0; }
.wpcf7-spinner { margin-right: -48px; }

footer { font-size: 1rem; }

/** media queries */
/** Small devices (landscape phones, 576px and up) [-sm] */
@media only screen and (min-width : 576px) {
	body > header { margin-top: 2rem; }
	#jwbs-banner-home-banner .carousel-caption .container > div > p { display: block; }
}

/** Medium devices (tablets, 768px and up) [-md] */
@media only screen and (min-width : 768px) {
	#block-3 p .inner { padding: 1rem 1.5rem 0.75rem; font-size: 1rem; }
	#jwbs-banner-home-services .carousel-item { background-position: var(--jwbs_banner_slide_image_focus); }
}

/** Large devices (desktops, 992px and up) [-lg] */
@media only screen and (min-width : 992px) {
	body > header { margin-top: -1rem; }
	#jwbs-banner-home-banner	.carousel-caption { right: 10%; left: 30%; }
	.carousel-caption p { font-size: 1.5rem; }
	#block-7 .wp-block-columns div:not(:first-child) { flex-basis: 0; }
}

/** X-Large devices (large desktops, 1200px and up) [-xl] */
@media only screen and (min-width : 1200px) {
	#jwbs-banner-home-banner .carousel-caption .display-3 { font-size: 2.25rem; }
}

/** larger desktops, 1400px and up [-xxl] */
@media only screen and (min-width : 1400px) {
	#jwbs-banner-home-banner .carousel-caption .display-3 { font-size: 3rem; }
	.carousel-caption p { font-size: 1.75rem; }
}