/* custom website styles */

:root {
	--container-width: 1320px;
	--section-padding: 1rem;
	--padding-sm:  calc(var(--section-padding) * 1.5);
	--padding-md: calc(var(--section-padding) * 4);
	--padding-lg: calc(var(--section-padding) * 6);
	--light-blue: #8AB3DF;
	--transparent-white: rgba(255, 255, 255, 0.80);
}
.container {
	max-width: var(--container-width);
}

body {
  font-family: "Alexandria", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  line-height: 1.75;
  font-size: 18px;
}
p, ul, ol {
	margin-bottom: 2rem;
}
a {
	color: var(--light-blue);
	text-decoration: none;
	font-weight: 600;
}
a:not(.btn):hover {
	text-decoration: underline;
	color: var(--light-blue);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.bg-light-blue {
	background-color: var(--light-blue);
}
#page .text-light-blue {
	color: var(--light-blue);
}
#page .btn {
	border-radius: 50px;
	text-transform: uppercase;
	padding: 1rem 1.75rem;
	letter-spacing: 1.6px;
	font-size: 1rem;
	font-weight: 400;
}
#page .menu-btn .btn {
	font-size: 0.85rem;
	padding: 0.75rem 1.25rem;
}
#page .btn.btn-primary {
	color: #000;
	border: 1px solid var(--light-blue);
	background-color: var(--light-blue);
	position: relative;
	z-index: 1;
	overflow: hidden;
	line-height: 1.5;
}

#page .btn.btn-primary::before {
    content: '';
	background: linear-gradient(90deg, #FFF 0%, var(--light-blue) 100%);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    border-radius: 10px;
}
#page .btn.btn-primary:hover::before {
    opacity: 0;
}
header#wrapper-navbar {
    position: fixed;
    width: 100%;
    border-bottom: 1px solid var(--light-blue);
    background-color: var(--transparent-white);
    z-index: 10;
    padding: 1rem;
}
/* Blur lives on a pseudo-element, NOT the header itself. backdrop-filter on the
   header would make it a containing block + stacking context that traps the
   fixed offcanvas menu inside it (leaving it covered by page content). The
   ::before keeps the frosted-glass look without trapping descendants. */
header#wrapper-navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: -1;
    pointer-events: none;
}

/* Offcanvas mobile menu (below lg only). At lg+ Bootstrap turns this same
   element into the inline horizontal desktop nav, so every rule here MUST stay
   inside the offcanvas breakpoint — otherwise it corrupts the desktop navbar
   (shrinks it, adds a panel background, dividers, etc.). */
@media (max-width: 991.98px) {
    #navbarNavOffcanvas.offcanvas {
        z-index: 1090;
        width: min(360px, 85vw);
        background-color: #fff;
        border-left: 1px solid var(--light-blue);
        box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease-in-out;
    }
    .offcanvas-backdrop {
        z-index: 1080;
    }
    #navbarNavOffcanvas .offcanvas-header {
        padding: 1.25rem 1.5rem 0.25rem;
    }
    #navbarNavOffcanvas .offcanvas-body {
        padding: 0 1.5rem 2rem;
    }
    /* Column menu: drop the horizontal (desktop) item spacing and centre the
       items now that they stack vertically. */
    #navbarNavOffcanvas .navbar-nav {
        justify-content: flex-start;
        align-items: stretch;
        width: 100%;
        text-align: center;
    }
    #navbarNavOffcanvas ul#main-menu > li + li {
        margin-left: 0;
    }
    /* Every label in the drawer is 16px — the plain links AND the Request
       Booking button (which is a smaller font on desktop). */
    #navbarNavOffcanvas #main-menu a.nav-link,
    #navbarNavOffcanvas .menu-btn .btn {
        font-size: 16px;
    }
    /* Plain links get dividers + comfortable tap targets. The button item
       (menu-btn / "Request Booking") is excluded so it keeps its desktop
       button design via #page .menu-btn .btn. */
    #navbarNavOffcanvas .nav-item:not(.menu-btn) {
        border-bottom: 1px solid var(--light-blue);
    }
    #navbarNavOffcanvas .nav-item:not(.menu-btn) .nav-link {
        padding: 0.9rem 0;
    }
    #navbarNavOffcanvas .menu-btn {
        margin-top: 1.25rem;
    }
}

.bg-transparent-white {
	background-color: var(--transparent-white);
    backdrop-filter: blur(5px);
}
ul#main-menu {
    align-items: center;
}
ul#main-menu > li+li {
	margin-left: 1rem;
}

div#wrapper-footer {
    padding: 0.75rem 0;
    background-color: var(--light-blue);
    color: #fff;
}
div#wrapper-footer a {
	color: #fff;
}
#page .text-light label,
#page .text-light legend {
	color: #fff;
}
.text-light a {
	color: #fff;
}
.footer-section a {
	text-decoration: none;
}
a.navbar-brand.custom-logo-link > img {
    max-height: 38px;
    max-width: 100%;
    width: auto;
    height: auto;
}
/* Keep the logo + hamburger on one row on narrow screens. The wide banner logo
   would otherwise push the toggler onto a second line. Stop the navbar from
   wrapping and let the logo shrink below its max size to make room. */
#main-nav > .container,
#main-nav > .container-fluid {
    flex-wrap: nowrap;
}
a.navbar-brand.custom-logo-link {
    min-width: 0;
    flex-shrink: 1;
}
#main-nav .navbar-toggler {
    flex-shrink: 0;
}
li.menu-item > a {
    text-transform: uppercase;
}
#main-menu a.nav-link {
    color: #000;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
}

#footer-contact .left {
	text-align: center;
	font-weight: 600;
	font-size: 1.15rem;
}
ul#menu-footer-menu {
	list-style: none;
	padding: 0;
	margin-top: 2rem;
}
ul#menu-footer-menu > li+li {
	margin-top: 1rem;
}
#footer-contact .gform_wrapper {
    border-radius: 10px;
    background: rgba(138, 179, 223, 0.30);
    padding: 3rem;
}
#page .gform-theme--foundation {
    --gf-form-gap-y: 25px;
}
.gform_wrapper label, .gform_wrapper legend {
	text-transform: uppercase;
}
figure.footer-logo img {
    width: 450px;
}
figure.footer-logo {
    margin-bottom: 2rem;
}
#page .gform_wrapper textarea,
#page .gform_wrapper input,
#page .gform_wrapper select {
	border-radius: 6px;
}
.footer-section .gform_wrapper .gform_footer {
	justify-content: center;
	margin-top: 2rem;
}
.gform_confirmation_message {
	text-align: center;
}
.col-inner {
	overflow: hidden;
}
p.separator-label {
    display: inline-block;
    position: relative;
    padding-right: 1rem;
    color: var(--light-blue);
    text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

p.separator-label::before {
    content: '';
    position: absolute;
    left: 100%;
    height: 1px;
    background-color: var(--light-blue);
    width: 100vw;
    display: block;
    top: 50%;
    transform: translateY(-50%);
}

hr {
    border-color: var(--light-blue);
    opacity: 2;
}
figure.carousel-image.image-wrapper.size-cover {
	padding-top: 0;
	margin-bottom: 0;
	height: 55vw;
	max-height: 950px;
	min-height: 565px;
}

/* Below the lg breakpoint the slides stop scaling by viewport width and hold a
   stable, tall height so the images stay in good view on tablet/mobile
   (width still changes with the viewport; height stays consistent). */
@media (max-width: 991.98px) {
	figure.carousel-image.image-wrapper.size-cover {
		height: 70vh;
		min-height: 440px;
		max-height: 620px;
	}

	/* Below lg, the callout stacks tall and covered too much of the slide when
	   overlaid. Drop the whole footer (indicators + callout) into normal flow so
	   it sits in its own row UNDER the slides instead of on top of them. */
	.layout_image-slider .carousel-footer {
		position: static;
		z-index: auto;
	}
	/* The carousel is now taller (slides + footer below); keep the prev/next
	   arrows confined to the slide area so they don't stretch over the callout. */
	.layout_image-slider .carousel-control-prev,
	.layout_image-slider .carousel-control-next {
		height: 70vh;
		min-height: 440px;
		max-height: 620px;
		bottom: auto;
	}
	/* Keep the indicator dots overlaid on the bottom of the slide image (they
	   stay white), NOT down in the callout row that now sits below. Absolute so
	   they're out of flow and the callout still butts right under the slides.
	   The top offset tracks the slide height clamp set above. */
	.layout_image-slider .carousel-indicators {
		position: absolute;
		top: calc(clamp(440px, 70vh, 620px) - 46px);
		bottom: auto;
		left: 0;
		right: 0;
		margin-bottom: 0;
		z-index: 6;
	}
	/* No longer an overlay, so use even vertical padding. */
	.layout_image-slider .slider-callout {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
}

/* When the callout content + button stack (below md), add space above the
   button so it isn't tight against the content. Only applies while stacked. */
@media (max-width: 767.98px) {
	.layout_image-slider .slider-callout .row > .col-auto {
		margin-top: 1.5rem;
	}
}

.carousel-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
	z-index: 5;
}
.carousel-indicators {
	position: relative;
	margin-bottom: 2rem;
}
/* Nudge the prev/next chevrons up ~30px (all viewports) — they were sitting too
   low and getting cut off at some widths. */
.carousel-control-prev-icon,
.carousel-control-next-icon {
	transform: translateY(-30px);
}
ul.icon-list {
    list-style: none;
    padding-left: 0;
}

ul.icon-list i {
    margin-right: 0.5rem;
}

ul.icon-list > li+li {
    margin-top: 0.5rem;
}
.home header#page-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
}
.slider-callout {
	padding-top: 3rem;
    padding-bottom: 3rem;
}
.carousel-indicators [data-bs-target] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: solid 1px #fff;
    opacity: 1;
    margin-left: 0.35rem;
    margin-right: 0.35rem;
}

.carousel-indicators [data-bs-target].active {
    background-color: rgba(255, 255, 255, 0);
}

.statistics-grid .stat {
	background-image: linear-gradient(#fff, var(--light-blue));
    color: transparent;
    background-clip: text;
	font-size: 6rem;
	font-weight: 900;
}

.row.statistics-grid {
    font-size: 1.25rem;
}

.stat-col > .col-inner {
    border-left: solid 2px var(--light-blue);
    margin-bottom: 3rem;
	padding-left: 2rem;
}
i.fas,
i.fa-regular,
i.fa-solid {
    color: var(--light-blue);
}
.col-inner > i.fas {
    font-size: 2rem;
    display: inline-block;
    margin-bottom: 0.5rem;
}

p+i.fas {
    margin-top: 1rem;
}
.icon-col > .col-inner {
    border: solid 1px var(--light-blue);
    border-radius: 10px;
    padding: 1.5rem;
    height: 100%;
}

.icon-col {
    margin-bottom: 2rem;
}

.icon-col i {
    font-size: 2rem;
    display: inline-block;
    margin-bottom: 1.5rem;
}
.h1, h1 {
    font-size: 4.25rem;
}
.h2, h2 {
    font-size: 3.5rem;
}
.h3, h3 {
    font-size: 2rem;
}

/* Scale the two largest headings down by 1rem on phones. */
@media (max-width: 767.98px) {
    .h1, h1 {
        font-size: 3.25rem;
    }
    .h2, h2 {
        font-size: 2.5rem;
    }
}

figure.image-wrapper:not(.carousel-image),
.col-inner p > img,
.col-inner figure:not(.carousel-image) > img {
	border-radius: 10px;
}
.layout_separator {
    margin-bottom: 3rem;
}
#page-header:not(.hero-section) {
	text-align: center;
}
.card {
	height: 100%;
	border-radius: 20px;
	border: 1px solid #8AB3DF;
	background: #FFF;
}
.card-body {
    padding: 3rem 2rem;
}
.card-body > p {
	margin-bottom: 1rem;
}
.card-body > p:last-child {
    margin-bottom: 0;
}
span.price-string {
    display: block;
    font-size: 3.5rem;
    font-weight: 500;
    line-height: 1.25;
}

span.price-string > sup {
    top: -0.45em;
    font-size: 0.65em;
}

.pricing-col .card-body ul {
    list-style: none;
    padding-left: 1rem;
}

.pricing-col .card-body ul > li {
    position: relative;
    padding-left: 0.75rem;
    margin-bottom: 0.5rem;
}

.pricing-col .card-body ul > li::before {
    content: '\f00c';
    font-family: 'Font Awesome 7 Free';
    font-weight: 700;
    color: var(--light-blue);
    position: absolute;
    right: 100%;
}

input#input_2_1 {
    height: 64px;
}

.layout_two-column .col-background > .col-inner {
    border-radius: 10px;
    padding: 3rem;
    background-color: rgba(138, 179, 223, 0.30);
}
.text-sm {
    font-size: 0.85rem;
}

.organization-address.icon::before,
a.contact-link.icon::before {
    content: '';
    font-family: 'Font Awesome 7 Free';
    font-weight: 700;
    font-size: 1.5em;
    margin-right: 1rem;
	color: var(--light-blue);
}
a.contact-link.email.icon::before {
    content: '\f0e0';
}
a.contact-link.phone.icon::before {
    content: '\f095';
}
.organization-address.icon::before {
	content: '\f3c5';
}
p+h3 {
    margin-top: 3rem;
}

.content-row+.layout_separator {
    margin-top: 3rem;
}
.modal button.close {
    background-color: rgba(255, 255, 255, 0);
    border: none;
    text-align: right;
    display: inline-block;
    font-size: 2rem;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5;
}
.modal-body {
	padding: 3rem;
}
.modal-body > *:last-child {
	margin-bottom: 0;
}

.form-row.place-order {
    justify-content: center;
    display: flex;
}