@font-face {
  font-family: "Object Sans";
  font-display: swap;
  src: url("../fonts/Object-Sans-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Object Sans";
  font-display: swap;
  src: url("../fonts/Object-Sans-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

#app {
    font-family: 'Object Sans', sans-serif;
    font-size: 20px;
    color: rgb(43, 50, 86);
}

h1 {
    font-weight: 700;
    font-size: 60px;
    line-height: 60px;
    margin-top: 24px;
    margin-bottom: 32px;
}

@media (max-width: 1040px) {
    h1.page-title {
        font-size: 48px;
    }
}

@media (max-width: 576px) {
    h1.page-title {
        font-size: 40px;
    }
}

h2 {
    font-size: 40px;
    line-height: 100%;
    font-weight: 700;
    color: #2b3256;
    margin-bottom: 60px;
    margin-top: 30px;
}

@media (max-width: 1024px) {
    h2 {
        font-size: 48px;
    }
}

@media (max-width: 425px) {
    h2 {
        font-size: 38px;
    }
}

h2 strong {
    border-bottom: 2px solid;
}

h3 {
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    margin-bottom: 8px;
    a {
        color: #728CB8;
        text-decoration: underline;
        &:hover {
            text-decoration: underline;
            color: #b05a3f;
        }
    }
}

h4 {
    font-size: 18px;
}

a {
    color: #2b3256;
    text-decoration: underline;
    text-underline-offset: 5px;
    &:hover {
        text-decoration: underline;
        color: #b05a3f;
    }
}

.page-container {
    background-image: url(../img/bg-misc-points.svg), url(../img/bg-misc-points-2.svg);
    background-position: 95% 120px, 20px bottom;
    background-repeat: no-repeat;
}

#footer::after {
    content: "";
    width: 70%;
    max-width: 330px;
    aspect-ratio: 327/175;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../img/bg-footer.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.05;
}

@media (min-width: 1440px) {
        .container, .container-lg, .container-md, .container-sm, .container-xl {
            max-width: 1280px;
        }
    }

@media (min-width: 1620px) {
        .container, .container-lg, .container-md, .container-sm, .container-xl {
            max-width: 1440px;
        }
    }

p {
    margin-bottom: 25px;
    font-size: 20px;
}

@media (max-width: 380px) {
    p img {
        max-width: 300px !important;
    }
}

.row {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.row.content-body{
    margin-left: 0px;
    margin-right: 0px;
}

ul {
    overflow: hidden;
}

.page-part {
    padding-left: 0px;
    padding-right: 0px;
}

.grey-btm-gradient,
.blue-btm-intense-gradient,
.blue-btm-gradient,
.blue-double-gradient {
    position: relative;
}

.grey-btm-gradient:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.2);
    transition: all 0.5s ease;
    mix-blend-mode: normal;
}

.blue-btm-intense-gradient:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(0, 143, 213, 0.8) 0%, rgba(0, 143, 213, 0) 50%), rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
    mix-blend-mode: normal;
}

.blue-btm-gradient:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, #008FD5 0%, rgba(0, 143, 213, 0.706123) 0%, rgba(0, 143, 213, 0) 100%);
    transition: all 0.5s ease;
    mix-blend-mode: normal;
}

.blue-double-gradient:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient( 0deg, rgba(0, 143, 213, 0.8) 0%, rgba(0, 143, 213, 0.2) 50%, rgba(0, 143, 213, 0.5) 100%), rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
    mix-blend-mode: normal;
    opacity: 0.8;
}

:target {
    display: block;
    position: relative;
    top: -10vh;
    visibility: hidden;
}

@media (max-width: 425px) {
    :target {
      top: -40vh;
    }
}