/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root { --bs-gradient:linear-gradient(90deg, rgba(0, 166, 182, 1) 0%, rgba(45, 46, 139, 1) 100%);--bs-gradient-hover:linear-gradient(90deg, rgba(0, 166, 182, 1) 30%, rgba(45, 46, 139, 1) 100%);}
body { font-size: 18px; font-family: "Poppins", sans-serif; line-height: 1.3; color: #00236d;     -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}
a, a:focus-visible { border: 0; outline: 0; }
.xs-small { font-size: 12px;}
.text-lg { font-size: 62px;}
.text-xl { font-size: 75px; line-height: 1;}
.text-shadow {text-shadow: 1px 2px 0px rgba(0,0,0,1);}
.text-shadow-w {text-shadow: 0 0 10px rgba(255,255,255,0.5);}
.bg-gradient-reverse { background: linear-gradient(90deg,  rgba(45, 46, 139, 1) 0%, rgba(0, 166, 182, 1) 100%)}
.logo { width: 320px; }
p:last-child {margin-bottom: 0;}
@media (max-width:768px) {
	.main{ overflow-x: hidden;}
	.text-lg { font-size: 32px;}
	.text-xl { font-size: 38px;}
}

/*--------------------------------------------------------------
# Bootstrap Overwrite
--------------------------------------------------------------*/
.btn { --bs-btn-padding-x: 35px; --bs-btn-padding-y:3px }
.text-muted { color: #c9c9c9 !important;}
.accordion {--bs-accordion-inner-border-radius:0; --bs-accordion-btn-color:#00236d; --bs-accordion-color:#00a6b6;--bs-accordion-btn-padding-x:0; --bs-accordion-body-padding-x:0; --bs-accordion-body-padding-y:1.5rem;}
.accordion-button { font-size: inherit; font-weight: 700;}
.accordion-button:focus {box-shadow:none}
.accordion-button:not(.collapsed) {background-color: unset; box-shadow: none;}
.accordion-item { border: 0; border-bottom: 1px solid #00236d; border-radius: 0;}
.accordion-item:last-of-type { border-radius: 0;}
@media (max-width:768px) {
 	.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x:3.5rem }
}
@media (min-width: 768px) {
	.g-md-6, .gy-md-6 {--bs-gutter-x: 5rem;}
}

/*--------------------------------------------------------------
# Section
--------------------------------------------------------------*/
section { padding-top: 100px; padding-bottom: 100px; }
section:last-child { padding-bottom:100px; }
@media (max-width:768px) {
	section { padding-top:50px;padding-bottom: 50px;}
	section:last-child { padding-bottom:50px; }
}

/*--------------------------------------------------------------
# Timeline
--------------------------------------------------------------*/
.process-steps {display: flex;justify-content: space-between;position: relative;z-index: 2;}
.process-item {flex: 1;display: flex;flex-direction: column;align-items: center;text-align: center;}
.icon-box {position: relative;height: 80px;margin-bottom: 20px;width: 100%;border-bottom: 1px solid #fff;}
.step-badge {position: absolute;top: -10px;left: 20%;background: white;color: #00a6b6;width: 24px;height: 24px;border-radius: 50%;font-weight: bold;font-size: 14px;display: flex;align-items: center;justify-content: center;line-height: 1;}
.icon-box:before {content: "";display: block;position: absolute;width: 10px;height: 10px;background: white;border-radius: 50%;box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);bottom: -5px;left: calc(50% - 5px);}
@media (max-width:768px) {
	.process-steps {flex-direction: column;}
	.process-item  {flex-direction: row;align-items: stretch;}
	.process-item p { text-align: left;}
	.icon-box {border-bottom: none;border-right: 1px solid #fff;flex: 0 0 80px;margin-bottom: 0;display: flex;align-self: stretch;align-items: start;justify-content: center;height: auto;}
	.icon-box img {height: 40px;}
	.icon-box:before {left: auto;right: -5px;top: 10%;bottom: unset;}
	.step-badge { left: 0; top: 0; height: 20px; width: 20px;}
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
.banner { background-position: center; aspect-ratio: 16/9; background-size: cover; }
.ribbon {position: relative;background: linear-gradient(to right, #0099ab, #2e3192);border-radius: 0 100px 100px 0;margin-bottom: 20px;padding: 1rem 3rem;font-weight: bold;color: #fff;display: inline-block;}
.ribbon::before {content: "";position: absolute;left: 0;bottom: -25px;width: 25px;height: 25px;background: linear-gradient(to right, #2e3192, #0099ab);clip-path: polygon(0 0, 100% 0, 100% 100%);}
.ribbon.reverse {background: linear-gradient(to right, #ffffff, #d2d2d2);border-radius: 100px 0 0 100px;padding: 1rem;}
.ribbon.reverse::before { right: 0; left: auto;background: #fff;}
.ribbon.reverse span {background: linear-gradient(to right, #0099ab, #2e3192); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.what-section:after {content: "";position: absolute; width: 100%; height: 100%; background: url('../img/texture-bg.png');background-repeat: no-repeat;background-position: bottom;background-size: cover; z-index: 0; bottom: 0;}
.steps [class*="col-"] { position: relative;}
.steps [class*="col-"]:after {content: "";position: absolute;width: 30px;height: 100%;top: 0;right: -25px;background-image: url(../img/divider.webp);background-repeat: no-repeat;background-position: 50% 10%;}
.steps [class*="col-"]:last-child { background-image: none;}
.half-bleed-img img { width: 100%; height: 100%; object-fit: cover; min-height: 400px; }
ul.check-list {list-style: none;padding-inline-start: 0;padding: 1em;border: 1px solid #fff;border-radius: 0 0 50px 0;font-size: .95em;}
ul.check-list li { display: flex; margin-bottom: 10px; color: #fff; }
ul.check-list li::before { content: ""; display: block; width: 20px; height: 20px; margin-right: 10px; background-image: url('../img/check-icon.png'); background-size: contain; background-repeat: no-repeat; flex-shrink: 0; }
.app-wrapper {border: 1px solid rgba(255,255,255,0.5);border-radius: 8px;display: flex;gap: 10px;padding: 3px;margin: -3px 3em 0;}
.app-wrapper a {opacity: 1;transition: opacity 0.3s ease;}
.app-wrapper:hover a {opacity: 0.35;}
.app-wrapper a:hover {opacity: 1;}
.embedvid {width: 100%;height: auto;display: block; aspect-ratio: 16 / 9;}

@media (min-width: 768px) {
 	.half-bleed-text {padding-right: calc((100vw - 720px) / 2);padding-left: 1rem;}
}
@media (min-width: 992px) {
 	.half-bleed-text { padding-right: calc((100vw - 960px) / 2); }
}
@media (min-width: 1200px) {
	.half-bleed-text { padding-right: calc((100vw - 1140px) / 2); }
}
@media (max-width:768px) {
	.banner { padding-bottom: 20px;}
	.banner .h1 { font-size: 18px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);}
	.ribbon { padding: .35em .5em; font-size: 24px;}
	.half-bleed-text { padding: 3rem 1.5rem 1.5rem 1.5rem;}
	.steps [class*="col-"]:after { display: none;}
	.steps [class*="col-"] .h2 { font-size: 16px;}
}

/*--------------------------------------------------------------
# Popup Modal
--------------------------------------------------------------*/
.modal {--bs-modal-width:1140px; --bs-modal-header-padding:1rem 1rem 0.5rem 1rem}
.modal-content {background-position: bottom;background-size: cover;background-repeat: no-repeat;overflow: hidden;}
.modal .ribbon {margin-bottom: 0px;z-index: 1;font-size: 24px;padding: 1rem 1.5rem;text-shadow: 0 0 8px rgba(255, 255, 255, .7);width: 100%;}
.modal .ribbon + .card {margin: -20px 25px 20px;padding-top: 1.5em;color: #00236d;background-color: rgba(255,255,255,.95);font-size: 12px;line-height: 1.75;}
.modal .footer-bg {--img-h: 15px;height: var(--img-h);position: absolute;bottom: 0;top: auto;}
.modal .footer-bg:before, .modal .footer-bg:after {border-top: 2px solid #fff;border-bottom: 2px solid #fff;}
.modal .learn-more-btn {padding: .5em 1em;background: var(--bs-gradient);display: inline-block;text-decoration: none;color: #fff;border-radius: 100px;font-weight: bold;font-size: 0.85em; transition: .3s;}
.modal .learn-more-btn:hover { background: var(--bs-gradient-hover); transition: .3s;}
.modal .modal-body {--bs-aspect-ratio: 56.25%;}
.modal .btn-close{ filter: invert(1) grayscale(100%) brightness(200%); --bs-btn-close-opacity: 1;}
@media (max-width:768px) {
	.modal .modal-body {--bs-aspect-ratio: 80%;}
	.modal .ribbon {font-size: 20px;white-space: nowrap;padding: 0.5rem;width: 100%;}
	.modal .container {--bs-gutter-x: 1.5rem;}
	.modal .modal-body:after {content: "";position: absolute;width: 100%;height: 200px;background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);top: 16%;left: 0;z-index: 0;}
	.modal .xs-small { font-size: 9px;}
	.modal .btn-close{ filter: invert(0) grayscale(100%) brightness(0); --bs-btn-close-opacity: 1;}
	.modal .footer-bg {--img-h: 11px;}
	.modal .footer-bg:before, .modal .footer-bg:after {border-top: 1px solid #fff;border-bottom: 1.5px solid #fff;}
}
@media (max-width:440px) {
	.modal .modal-body {--bs-aspect-ratio: 160%;}
	.modal .modal-content {background-size: 230%;}
	.modal .card {--bs-card-spacer-y: 0.8rem; --bs-card-spacer-x: 0.8rem; }
	.modal .ribbon + .card {font-size: 9px;}

}
@media (max-width:425px) {
	.modal .ribbon {font-size: 17px;}
}
@media (max-width:375px) {

}
@media (max-width:320px) {
	.modal .modal-body {--bs-aspect-ratio: 200%;}
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer-bg {--img-h:35px; width: 100%; height: var(--img-h); display: flex;text-align: center;}
.footer-bg:before,.footer-bg:after {content: "";height:var(--img-h);width: 100%;border-top: 4px solid #fff;border-bottom: 4px solid #fff;}
.footer-bg:before {background-color: #2d2e8b;}
.footer-bg:after { background-color: #00a6b6;}