body { font-family: "Open Sans", sans-serif; }

a { color: #5b748e; text-decoration: none; }
a:hover, a:active { color: #666; text-decoration: none; }
a:focus { outline:none; color: #5b748e; text-decoration: none; }

sup { font-size: 50%; top: -.7em; }
.btn { text-transform: uppercase; }
.btn-sw-blue { background-color: #5b748e; color: #fff; }
.btn-sw-blue:hover{ background-color: #000; color: #fff; }


.sw-blue { color: #5b748e; }
.white { color: #fff; }
.uc { text-transform: uppercase; }
.section-pad { padding: 5rem 0; }

h1 { font-size: clamp(3.3rem, 3.25vw, 5rem); font-weight: 300; }
h2 { font-size: clamp(2.5rem, 3vw, 3.5rem); font-weight: 300; }
h3 { font-size: clamp(2rem, 2.5vw, 3rem); font-weight: 300; }

#header { position: absolute; top: 0; left: 0; padding: 30px 0; width: 100%; z-index: 99; -webkit-transition: all .3s ease; transition: all .3s ease; }
a.nav-link { color: #fff; font-size: clamp(.875em, 1.25vw, 1.25rem); font-weight: 600; }
a.nav-link:hover { color: #000; }

#header.inbody { background-color: rgba(91,116,142,.9); position: fixed !important; top: 0; width: 100%; padding: 12px 0; z-index: 999; opacity: 1; backdrop-filter: blur(12px); animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: .3s; }

#logo { width: 360px; }
#header.inbody #logo { width: 200px; }

.account-btn { font-size: .75rem; }

#hero { height: 80vh; }
.bg-img { width: 100%; heigh: 100%; background-repeat: no-repeat; background-position: center bottom; background-size: cover; }
.hero-overlay { position: absolute; bottom: 80px; left: 0; width: 100%; text-align: center; }
.hero-overlay h1 { color: #fff; font-style: italic; font-weight: 300; text-shadow: 0 0 12px #333; }
.hero-overlay h1 span { display: block; font-size: 115%; font-style: normal; font-weight: 600; }
.arrow { position: absolute; bottom: 30px; left: 0; right: 0; width: 100%; font-size: 40px; line-height: 1; color: #fff; text-align: center; animation-name: bounceInSmall; animation-duration: 3s; animation-delay: 0s; animation-timing-function: ease; animation-fill-mode: both; animation-iteration-count: infinite; }

@keyframes bounceInSmall { 
0% {opacity:1;transform:translateY(0px)}
20% {opacity:1;transform:translateY(-5px)}
30% {opacity:1;transform:translateY(10px)}
40% {opacity:1;transform:translateY(0)}
}


#team { background-color: #5b748e; color: #fff; }

.team-overlay { overflow: hidden; position: relative; line-height: 0px; }
.team-overlay-blk { background-color: #000; width: 100%; height: 100%; position: absolute; z-index: 2; opacity: 0; transition-duration: .35s; }
.team-overlay:hover .team-overlay-blk { opacity: .5; }
.team-icons { position: absolute; color: #fff; line-height: 1.5em; bottom:30px; width: 100%; opacity: 0; padding: 0px 36px; z-index: 4; transform: scale(.9, .9); transition-duration: .35s; transition-delay: 0s; }
.team-overlay.hovered .team-icons { opacity: 1; transform: scale(1, 1); transition-delay: .25s; }
.team-icons-list { margin: 0; padding: 0; list-style-type: none; font-size: 0; }
.team-icons-list li { display: block; margin: 8px 0; text-align: left; }
.team-icons-list li a { display: block; font-size: 14px; color: #fff; text-decoration: none; }
.team-icons-list li i { color: #2980b9; margin: 0 8px; padding: 0; font-size: 26px; background-color: #fff; border: 1px solid #fff; border-radius: 50%; text-align: center; width: 44px; height: 44px; line-height: 44px; vertical-align: -2px; transition: all 0.5s ease; }
.team-icons-list li i:hover { background-color: transparent; color: #fff; }
.team-name { font-size: 1.1rem; font-weight: 600; }

#services i { font-size: 60px; color: #B57453; }

.fee-box { background-color: #5b748e; border: 1px solid #bfbebe; border-radius: 15px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
.fee-box .fee-percentage { color: #fff; font-size: clamp(3rem, 4vw, 4rem); line-height: 1.2; font-weight: 300; padding: 20px; }
.fee-box .fee-amount { background-color: #000; color: #fff; line-height: 1.2; padding: 20px; border-radius: 0 0 13px 13px; }

#cta { background-color: #bfbebe; color: #000; position: relative; }
#cta .circle-icon-container { display: flex; justify-content: center; align-items: center; width: 70px; height: 70px; border-radius: 50%; background-color: #5b748e; margin: 0 auto; }
#cta .circle-icon-container i { font-size: 32px; color: #fff; }


#cta a { color: #000; text-decoration: underline; }

#contact { height: 100%; width: 100%; heigh: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 60px 0; }
.form-wrapper { background-color: rgba(255,255,255,.5); border: 1px solid #ccc; padding: 40px; border-radius: 12px; backdrop-filter: blur(12px); }
.form-wrapper h4 { color: #5b748e; font-size: 2rem; font-weight: 300; text-transform: uppercase; }

#footer { background-color: #000; color: #fff; }

@media all and (min-width: 992px) {
.w-80 { width: 100%; max-width: 80%; }
}

@media all and (max-width: 992px) {
.container-xl { --bs-gutter-x: 3rem; }
#header { padding: 8px 0; }
#main-menu  { border: 1px solid #fff; border-radius: .375rem; max-width: 70%; margin: 0 auto; }
.nav { flex-wrap: nowrap !important; }
.account-btn { width: 50%; font-size: .75rem; }
#header.inbody .account-btn { display: none; }
.section-pad { padding: 4rem 0; }
}

@media all and (max-width: 768px) {
.mobile-team-icons { margin: 20px auto 0 auto; width: 70vw; }
}

@media all and (max-width: 450px) {
#logo { width: 300px; }
#main-menu  { max-width: 90%; }
a.nav-link { padding-top: 4px; padding-bottom: 4px; }
.fee-box .fee-amount { font-size: 14px; }
}

/* ModuleBegin::forms */
/* basic calendar popup css */
.ui-datepicker {
	background-color: #fff;
	border: 1px solid #999;
	border-radius: 4px;
	display: none;
	margin-top: 4px;
	padding: 10px;
	width: 240px;
}
.ui-datepicker .ui-datepicker-header {
	text-align: center;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev {
	float: left;
	text-align: left;
}
.ui-datepicker .ui-datepicker-next {
	float: right;
	text-align: right;
}
.ui-datepicker .ui-datepicker-calendar {
    table-layout: fixed;
	width: 100%;
}
.ui-datepicker .ui-datepicker-calendar th,
.ui-datepicker .ui-datepicker-calendar td {
	text-align: center;
	padding: 2px 0;
}
.ui-datepicker .ui-datepicker-calendar td:hover {
	background-color: #eee;
	cursor: pointer;
}
.ui-datepicker .ui-datepicker-calendar td a {
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-today {
	background-color: #f2f2f2;
}
.ui-datepicker .ui-datepicker-current-day a {
	color: #000;
}
.ui-datepicker .ui-datepicker-calendar .ui-datepicker-unselectable:hover {
	background-color: #fff;
	cursor: default;
}
/* ModuleEnd::forms */