@view-transition {navigation: auto;}

*, ::after, ::before {margin: 0; padding: 0; box-sizing: border-box;}
html {font-size: 16px; overflow: hidden; overflow-y: scroll; scroll-behavior: smooth;}
body {font-size: 1rem; line-height: 1.45; font-family: 'Inter', sans-serif; background: white; color: #0d3c72; font-weight: 400;}
header hr, footer hr {display: none;}
.container {padding-inline: 2rem; max-width: 85rem; margin-inline: auto;}
img {display: block; max-width: 100%;}
.logo img {height: 4.5rem;}
main ul, main ol, p {margin-bottom: 1.45em;}
main ul:last-child, main ol:last-child, p:last-child {margin-bottom: 0;}
main ul {margin-left: 1rem;}
main ol {margin-left: 2rem;}
strong {font-weight: 600;}

header .container {display: flex; justify-content: space-between; align-items: center; padding-block: 1.25rem;}
header .menu {display: flex; gap: 4rem}
header > .img {width: 100%; border-bottom: 1.75rem solid #0D4689; min-height: 15rem; position: relative; background: url() center center / cover no-repeat; display: flex; align-items: center;}
header > .img::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    z-index: 1;
    backdrop-filter: blur(0.025vw);
}
header > .img img {object-fit: cover; opacity: 0; width: 100%; height: 100%; display: none;}
header > .img > .container {display: flex; align-items: center; height: 100%; width: 100%; max-width: 85rem; position: relative; z-index: 2;}
header > .img > .container > div {background: white; font-weight: 400; padding: 2.25rem 2rem; width: 19.5rem; margin-block: 2rem;}
header > .img > .container > div .button {padding-inline: 0; display: block; text-align: center; margin-top: 2rem;}
body.home header > .img {min-height: 30rem;}
header .menutoggle {display: none;}

.menu {text-transform: uppercase; font-family: 'Poppins', sans-serif; letter-spacing: 0.02em; font-weight: 400;}
.menu li {list-style: none; font-size: 1rem;}
.menu li a {text-decoration: none; display: block; padding: .35rem 0; color: #0d3c72;}
.menu li.active a, .menu li a:hover {color: #00a39e;}
.menu li:last-child a {
    background: #03bab4;
    color: white;
    padding-inline: 1.5rem;
    letter-spacing: 0.03em;
    font-weight: 500;
    transition: background-color 0.15s ease-in-out;
}
.menu li:last-child a:hover {background: #0D4689; color: white;}

.button {
    padding: .35rem 1.5rem;
    display: inline-block;
    background: #03bab4;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.03em;
    font-weight: 500;
    border: 0;
    font-size: 1rem;
    transition: background-color 0.15s ease-in-out;
    cursor: pointer;
    white-space: nowrap;
}
.button:hover {background: #0D4689;}

h1, h2, h3 {margin-bottom: 1.25rem; font-family: 'Poppins', sans-serif; font-weight: 600; color: #03bab4; line-height: 1.3; font-size: 1.5rem;}
h3 {font-size: 1.2rem;}
p:empty {display: none;}
* + h2 {margin-top: 3rem;}
main a {color: #0d3c72;}
.date {color: #00a39e; font-size: 0.9rem; font-weight: 300;}

.cards {display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem; font-size: 0.9rem;}
.cards > div {flex: 1; background: white; padding: 2rem 1.5rem 5rem; text-align: center; width: 22rem; min-width: 22rem; max-width: 22rem; line-height: 1.8; position: relative;}
.cards > div div {margin-bottom: 1.5rem; background: white; padding: 2rem 2.5rem; cursor: pointer;}
.cards > div img {display: block; width: 100%; aspect-ratio: 2.15; object-fit: contain; filter: grayscale(1) contrast(0) sepia(1) hue-rotate(150deg) brightness(0.72) contrast(6);}
.cards > div img.icon {width: 6rem; height: 4rem; margin-block: 0; filter: none; display: inline-block; cursor: pointer;}
.cards > div h3 {color: #03bab4; margin-block: 0.75rem 1rem; cursor: pointer;}
.cards > div a:not(.button) {color: #0d3c72;}
.cards > div a.button {position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%) scale(0.85); background: #03bab4; line-height: 1.9;}
.cards > div a.button:hover {background: #0D4689;}
.cards.transparent > div a.button {bottom: 1rem;}
.cards.transparent > div {padding: 1.5rem 1rem 4rem; background: transparent;}
p:not(:empty) + .cards {margin-top: 4rem;}

section .container {max-width: 75rem; line-height: 1.9; font-size: 1rem;}
section:not(.alignleft) .container > div > *:not(.cards) {text-align: center; max-width: 45rem; margin-inline: auto;}
section.alignleft {padding-bottom: 9rem!important;}
section.alignleft .container > div {text-align: left; max-width: 45rem; margin-inline: auto;}
section.alignleft .container > div > h1 + p {font-size: 1.45rem; line-height: 1.5; font-weight: 300;}
section.alignleft h1 {font-size: 1.9rem; margin-bottom: 1.75rem;}

section.twocols .container {max-width: 70rem;}
section.twocols .container > div {display: flex; flex-direction: row-reverse; gap: 9rem;}
section.twocols .container > div  > * {text-align: left!important; max-width: 100%;}
section.twocols .container > div > div:nth-child(1) {flex: 7;}
section.twocols .container > div > div:nth-child(2) {flex: 3; line-height: 1.45;}
section.twocols .container > div > div:nth-child(2) ul {margin: 0;}
section.twocols + section.twocols .container > div {flex-direction: row;}

section.haslist .container > div > div:nth-child(2) ul li {
    list-style: none; 
    padding: 0.65rem 1.5rem; 
    background: #0D4689; 
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.03em;
    font-weight: 500;
    color: white;
    font-size: 1rem;
}
section.haslist .container > div > div:nth-child(2) ul li a {
    margin: -0.65rem -1.5rem; 
    padding: 0.65rem 1.5rem; 
    text-decoration: none; 
    color: white;
    display: block;
    background-color: #03bab4;
    transition: background-color 0.15s ease-in-out;
}
section.haslist .container > div > div:nth-child(2) ul li a:hover {background: #0D4689;}

section {padding-block: 5rem 6rem;}
section:nth-child(1) {padding-block: 3.75rem 5rem;}
section:nth-child(even) {background-color: rgba(3, 186, 180, .2);}
section:not(:nth-child(even)) .cards > div {background: rgba(3, 186, 180, .2);}
section:nth-child(even) h2,
section:not(:nth-child(even)) .cards > div h3,
section:nth-child(even) .cards.transparent > div h3 {color: #01afa9;}

form > div {display: flex; flex-direction: column; text-align: left;}
form > div + div {margin-top: 1rem;}
form > div label {font-size: 0.9rem; line-height: 2; position: relative;}
form > div input:not([type="checkbox"], [type="submit"]), form > div textarea {
    border: 1px solid rgba(13, 70, 137, 0.2);
    background: white;
    border-radius: 0;
    font-size: 1rem;
    padding: 0.5rem 0.4rem;
    line-height: 1.45; font-family: 'Inter', sans-serif;
    color: #0d3c72;
}
form > div textarea {resize: vertical;}
form > div input[type="checkbox"] {margin-right: 0.35rem; opacity: 0; position: absolute; pointer-events: none;}
form > div.checkbox label {padding-left: 1.7rem; cursor: pointer;}
form > div.checkbox label span:before,
form > div.checkbox label input[type="checkbox"]:checked + span:after {
    content: "";
    position: absolute;
    left: 0;
    height: 20px;
    width: 20px;
    border: 1px solid rgba(13, 70, 137, 0.2);
    background: white;
    vertical-align: middle;
    top: 50%;
    transform: translateY(-50%);
}
form > div.checkbox label input[type="checkbox"]:checked + span:after {
    content: "";
    left: 2px;
    line-height: 13px;
    text-align: center;
    font-size: 1rem;
    height: 16px;
    width: 16px;
    border: 1px solid #03bab4;
    transform: translateY(-50%);
    background: #03bab4 url(/img/check.svg) center center / 12px auto no-repeat;
    border-radius: 0.2rem;
} 

footer {font-size: 0.9rem; font-weight: 400;}
footer > div:not(.cta) > .container {display: flex; justify-content: space-between; padding-block: 2rem;}
footer > div.cta {text-align: center; background: #0D4689; color: white; padding-block: 4rem 5rem; border-top: 1.75rem solid #03bab4;}
footer > div.cta p {line-height: 1.9; font-size: 1rem;}
footer > div.cta h2 {color: white;}
footer > div.cta .button {margin-top: 0.5rem; transition: all 0.15s ease-in-out;}
footer > div.cta .button:hover {background: white; color: #0d3c72;}
footer > div.cta .container > * {max-width: 45rem; margin-inline: auto;}
footer > div.main a {color: #0d3c72; text-decoration: none;}
footer > div.main p {line-height: 1.7;}
footer > div.main p a:hover {text-decoration: underline;}
footer > div.main .container {max-width: 50rem; color: #0d3c72; padding-block: 3.5rem;}
footer > div.main .menu {text-align: right; display: flex; flex-direction: column;}
footer > div.main .menu li a {text-decoration: none; padding-inline: 0;}
footer > div.main .menu li:last-child {margin-top: 1.5rem;}
footer > div.main .menu li:last-child a {color: white; padding: 0.35rem 1.5rem;}
footer > div.main .socials {display: flex; gap: 0.75rem; justify-content: flex-end; padding-top: 1.5rem;}
footer > div.main .socials a img {transition: filter 0.15s ease-in-out;}
footer > div.main .socials a:hover img {filter: hue-rotate(-42deg) brightness(2.05)}

footer > div.after {background: #03bab4; font-size: 0.8rem; font-weight: 400;}
footer > div.after, footer > div.after a {color: white; text-decoration: none;}
footer > div.after a:hover {text-decoration: underline;}
footer > div.after .container {max-width: 75rem; padding-block: 1.1rem;}
footer > div.after .container > div:nth-child(1) {display: flex; gap: 2rem}

@media only screen and (max-width: 1200px){
    header > .container {flex-direction: column; gap: 1rem;}
    section.twocols .container > div {max-width: 45rem; margin-inline: auto; gap: 3rem;} 
    section.twocols .container > div > div:nth-child(1) {flex: 8;}
    section.twocols .container > div > div:nth-child(2) {flex: 5;}
    section.twocols .container > div > div:nth-child(2) img {max-width: 16rem;}
    section:not(.alignleft) .container > div > :not(.cards) {margin-inline: 0;}
}
@media only screen and (max-width: 900px){
    header > .container {align-items: flex-start; gap: 1.752rem; position: relative;}
    header .menu {flex-direction: column; gap: 0rem; display: none;}
    body.menuopen header .menu {display: block;}
    .menu li:last-child a {margin-block: 0.8rem 0.5rem;}
    header > .img > .container {display: block;}
    header > .img > .container > div {width: 100%; max-width: 19.5rem;}
    header .menutoggle {display: block; position: absolute; right: 1.75rem; top: clamp(0rem, 8vw, 2.25rem);}
    header .menutoggle img {display: block;}
    header .menutoggle img + img {display: none;}
    body.menuopen header .menutoggle img {display: none;}
    body.menuopen header .menutoggle img + img {display: block;}
}
@media only screen and (max-width: 700px){
    section.twocols + section.twocols .container > div,
    section.twocols .container > div {flex-direction: column;}
    .cards > div {width: 100%; min-width: 100%; max-width: 100%;}
    .cards.transparent > div {padding-inline: 0;}
    footer > div.after > .container {flex-direction: column; gap: 0.5rem}
    footer > div.after .container > div:nth-child(1) {justify-content: space-between;}
    section:not(.alignleft) .container > div > :not(.cards) {text-align: left;}
}
@media only screen and (max-width: 550px){
    footer > div.after .container {padding-block: 1.75em;}
    footer > div.main > .container {flex-direction: column; gap: 3rem;}
    footer > div.main .menu {text-align: left; display: inline-block;}
    footer > div.main .socials {justify-content: flex-start;}
    footer > div.after .container > div:nth-child(1) {flex-direction: column; gap: 0.5rem;}
    .container {padding-inline: 1rem;}
    header .menutoggle {right: 0.75rem;}
}
@media only screen and (max-width: 450px){
    a.logo img {height: 16vw;}
}