@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-VariableFont_wdth\,wght.ttf");
}

:root {
    --secondary-purple: #0D0152;
    --primary-pink: #FF4291;
    --white: #FFFFFF;
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 700;
    --size-13: 0.813rem;
    --size-14: 0.875rem;
    --size-16: 1rem;
    --size-20: 1.25rem;
    --size-21: 1.313rem;
    --size-24: 1.5rem;
    --size-30: 1.875rem;
    --size-32: 2rem;
    --size-36: 2.25rem;
    --size-40: 2.5rem;
    --size-60: 3.75rem;
    /* rem based on body font-size: 16px. calculator: https://nekocalc.com/px-to-rem-converter */
 }  

 * {
  font-synthesis: none !important;
}
  
body {
    font-family: "Roboto";
    font-style: normal;
    font-weight: var(--font-regular);
    line-height: normal;
    font-size: 16px;
    color: var(--secondary-purple);
    background: linear-gradient(169deg, #0D0152 5.54%, rgba(33, 7, 87, 0.96) 8.31%, rgba(157, 40, 119, 0.75) 16.8%, rgba(184, 47, 120, 0.61) 18.36%, rgba(255, 66, 120, 0.25) 22.52%, rgba(255, 255, 255, 0.00) 36.1%);
}

p {
    font-size: 1.31vw;
}

ul {
    list-style: none;
    padding: 0;
}

/*** utility classes ***/
.white {
    color: var(--white);
}

.flex {
    display: flex;
}

.column {
    flex-direction: column;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.align-center {
    align-items: center;
}

.center {
    text-align: center;
}

.h1 {
    font-size: 3.75vw;
    font-weight: var(--font-medium);
}

.h2 {
    font-size: 2.5vw;
    font-weight: var(--font-bold);
}

.h3 {
    font-size: 1.875vw;
    font-weight: var(--font-bold);
}

.button {
    display: inline-flex;
    padding: 21.113px 46.746px 20.887px 48.254px;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 10px;
    background: var(--Primary-pink, #FF4291);
    box-shadow: 0px 4px 4px 0px rgba(13, 1, 82, 0.50);
    color: var(--white);
    font-size: var(--size-24);
    text-decoration: none;
}

/*** header section ***/
.header-container {
    height: 254px;
    vertical-align: middle;
    margin: 0 110px;
}

.header__logo {
    width: 340px;
}

/*** intro section ***/
.intro-container {
    max-height: 78.88vw;
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
}

.intro-image__container {
    margin: 0 100px;
}

.intro-image__image {
    width: 100%;
    max-width: 1400px;
    position: relative;
    z-index: 10;
}

.intro-text {
    text-align: left;
    left: 15%;
    top: -54.1vw;
    position: relative;
    z-index: 10;
    max-width: fit-content;
}

.intro-text__header, .intro-text__p {
    background-color: var(--white);
    padding: 10px 0 10px 16px;
    margin-bottom: 0;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
}

.intro-text__header {
    width: 37vw;
    max-width: 592px;
}

.intro-text__p:first-of-type {
    width: 39vw;
    max-width: 624px;
}

.intro-text__p {
    width: 31vw;
    max-width: 496px;
    font-size: 2vw;
    margin-top: 10px;
    line-height: 150%;
}
 
.storyline-1 {
    position: absolute;
    top: 68vw;
    left: 11vw;
}

/*** about section ***/
.about-container--desktop {
    height: 41.56vw;
    max-height: 665px;
    margin-top: 3.5vw;
    max-width: 1600px;
}

.about-image__container {
    max-width: 616px;
    width: 38.5vw;
    margin-left: 98.5px;
}

.about-image__image {
    width: 100%;
    position: relative;
    z-index: 10;
}

.about-text {
    max-width: 650px;
    width: 40.6vw;
    margin-left: 75px;
}

.about-text__description {
    line-height: 150%;
}

.about-text__list-item {
    margin-top: 2.5vw;
}

.about-text__list-text {
    padding-left: 16px;
    font-size: 1.31vw;
}

/*** benefits section ***/
.benefits-list {
    background-image: url("images/section-2-blue-bg.svg");
    height: 40.44vw;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 4;
    background-size: 101% 40.44vw;
}

.benefits-list__list-item {
    width: 14.69vw;
    line-height: 150%;
    font-size: 1.31vw;
    margin-right: 5.63vw;
}

.benefits-list__list-item:last-of-type {
    margin-right: 0;
}

.benefits-list__list-image {
    display: block;
    font-weight: var(--font-bold);
}

.benefits-description {
    background-color: var(--secondary-purple);
    height: 54vw;
    margin-top: -100px;
    padding-top: 1.5vw;
}

.benefits-description-background {
    position: relative;
    z-index: 1;
    background-color: var(--secondary-purple);
    height: 1034px;
    width: 100%;
    margin-top: -2vw;
}

.benefits-image {
    margin-top: 17vw;
    margin-left: 133px;
    width: 62.88vw;
    z-index: 3;
    position: absolute;
}

.benefits-description__text {
    font-size: 2vw;
    font-weight: var(--font-medium);
    max-width: 35.25vw;
    line-height: 160%;
    position: absolute;
    left: 54.2vw;
    z-index: 10;
}

/*** partners section ***/
.divider-image {
    position: absolute;
    margin-top: -11.69vw;
    margin-right: 15.25vw;
    width: 13.19vw;
    z-index: 3;
}

.partners-container {
    background-color: var(--white);
    position: relative;
    z-index: 2;
}

.partners-text {
    margin-left: 6.88vw;
    margin-top: 12.81vw;
}

.partners-text__header {
    margin: 32px 0;
}

.partners-text__p {
    line-height: 150%;
    font-size: 1.31vw;
    width: 39.25vw;
}

.partners-text__link {
    color: var(--primary-pink);
}

.partners-image {
    margin-top: 89px;
    width: 49.94vw;
}

.partners-button {
    box-shadow: none;
}

/*** footer section ***/
.disclaimer {
    font-size: var(--size-16);
    margin-right: 135px;
    text-align: right;
}
footer {
    background-color: var(--white);
    position: relative;
}
.footer-privacy-container {
    position: relative;
    bottom: -115px;
    z-index: 100;
}
.footer-privacy-container div {
    font-size: 13px;
}
.footer-privacy-container .dot {
    height: 2px;
    width: 2px;
    border-radius: 20px;
    margin: 0 10px;
    background-color: white;
}
.footer-privacy-choices-text {
    margin-left: 5px;
}
.footer-copyright {
    background-image: url("images/footer-bg.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 285px;
    background-size: 101% 285px;
}
.footer__image {
    position: absolute;
    bottom: 12.06vw;
    left: 5.13vw;
    z-index: 3;
}
.footer__logo {
    margin-top: 150px;
    margin-bottom: 16px;
}
.copyright {
    font-size: var(--size-13);
}


/*** responsive styles ***/
/* desktop 1024 + */
@media (min-width: 1024px) {
    .hide-desktop {
        display: none;
    }
    .benefits-description-background {
        position: absolute;
    }
    .benefits-image__container {
        width: 1600px;
        position: relative;
        margin: 0 auto;
        top: -42vw;
    }
    footer {
        margin-top: 115px;
    }
}

/* xl desktop above 1600px - no scaling */
@media (min-width: 1601px) {
    .header-container {
        max-width: 1380px;
        margin: 0 auto;
    }
    .h1 {
        font-size: var(--size-60);
    }
    .intro-container {
        max-height: 1143px;
    }
    .intro-text {
        top: -866px;
        left: 240px;
        position: relative;
    }
    .intro-text__p {
        font-size: var(--size-32);
    }
    .storyline-1 {
        top: 1166px;
    }
    .about-container--desktop {
        margin: 168px auto 0;
    }
    .about-text__header {
        font-size: var(--size-40);
    }
    .about-text__description, .about-text__list-text {
        font-size: var(--size-21);
    }
    .about-text__list-item {
        margin-top: 40px;
    }
    .benefits-list {
        background-size: 101% 647px;
        height: 647px;
    }
    .benefits-list__heading {
        font-size: var(--size-30);
    }
    .benefits-list__list-item {
        font-size: var(--size-21);
        margin-right: 90px;
        width: 235px;
    }
    .benefits-description {
        height: 864px;
        position: relative;
    }
    .benefits-description-background {
        max-height: 880px;
    }
    .benefits-image {
        width: 1006px;
        margin-top: 260px;
    }
    .benefits-description__text {
        font-size: 32px;
        max-width: 564px;
    }
    .benefits-image__container {
        top: -672px;
    }
    .divider-image__container--desktop {
        position: relative;
        max-width: 1600px;
        margin: 0 auto;
    }
    .divider-image {
        max-width: 211px;
        position: relative;
        margin-top: -188px;
        margin-right: 187px;
        z-index: 3;
    }
    .partners-container {
        top: -112px;
        max-width: 1600px;
        margin: 0 auto;
    }
    .partners-image {
        width: 799px;
    }
    .partners-text__header {
        font-size: 60px;
    }
    .partners-text {
        margin-top: 205px;
        margin-left: 110px;
    }
    .partners-text__p {
        font-size: var(--size-21);
        width: 628px;
    }
    .h3.partners-text__header {
        font-size: var(--size-30);
    }
    .footer-copyright {
        background-position: top;
    }
    .disclaimer-container {
        width: 1600px;
        margin: 0 auto;
    }
    footer {
        margin-top: 0;
    }
    .footer__image-container {
        position: relative;
        width: 1600px;
        margin: 0 auto;
        margin-top: -252px;
    }
    .footer__image {
        bottom: -93px;
        left: 101px;
    }
}

/* tablet 768 - 1023 */
@media (min-width:768px) and (max-width: 1023px) {
    body {
        background: linear-gradient(163deg, #0D0152 3.5%, rgba(33, 7, 87, 0.96) 5.21%, rgba(157, 40, 119, 0.75) 10.45%, rgba(184, 47, 120, 0.61) 11.42%, rgba(255, 66, 120, 0.25) 13.98%, rgba(255, 255, 255, 0.00) 19.91%);
    }
    .h1 {
        font-size: 5.87vw;
    }
    .h2 {
        font-size: 3.91vw;
    }
    p {
        font-size: 2.05vw;
    }
    .hide-tablet {
        display: none;
    }
    .button {
        padding: 16.113px 31.746px 15.887px 33.254px;
    }
    .header-container {
        height: 200px;
        margin-left: 5.82vw;
        margin-right: 5.82vw;
    }
    .intro-container {
        max-height: 96.44vw;
    }
    .intro-image__container {
        margin: 0 14px 31px;
        display: flex;
        flex-direction: column;
    }
    .intro-image__image {
        max-width: 979px;
        width: 100%;
        height: auto;
        display: flex;
        align-items: flex-start;
    }
    .intro-text {
        left: 0;
        margin-left: 91.5px;
        top: -50.1vw;
    }
    .intro-text__header {
        width: 57.77vw;
    }
    .intro-text__p:first-of-type {
        width: 60.61vw;
    }
    .intro-text__p {
        font-size: 3.13vw;
        width: 49.27vw;
    }
    .storyline-1 {
        left: 30vw;
    }
    .about-container {
        height: 100%;
    }
    .about-text {
        max-width: 657px;
        width: 64.22vw;
        margin: 0 auto;
    }
    .about-text__description {
        width: 59.43vw;
        margin: 40px 0;
        line-height: 150%;
    }
    .about-text__list {
        margin-bottom: 76px;
    }
    .about-text__list-text {
        font-size: 2.05vw;
        line-height: 150%;
        max-width: 52vw;
    }
    .about-text__list-text:last-of-type {
        max-width: 49vw;
    }
    .about-image__container {
        width: 60.22vw;
        margin: 0 auto 68.86px;
    }
    .benefits-description-background {
        position: absolute;
    }
    .benefits-list {
        height: 88.56vw;
        background-image: url("images/section-2-blue-bg-tablet.svg");
        background-size: 101% 88.56vw;
    }
    .benefits-list__heading {
        margin-top: 0;
        font-size: 3.91vw;
    }
    .benefits-list__list {
        flex-direction: column;
        text-align: center;
        width: 52.2vw;
    }
    .benefits-list__list-item {
        width: 46vw;
        font-size: 2.05vw;
        margin: 0 auto 32px;
    }
    .benefits-list__list-image {
        line-height: 150%;
    }
    .benefits-list__list-item:last-of-type {
        margin: 0 auto;
    }
    .benefits-description {
        flex-direction: column;
        height: 100%;
    }
    .benefits-image {
        width: 64.17vw;
        margin: 0 auto;
        position: relative;
    }
    .benefits-description__text {
        font-size: 3.13vw;
        margin: 0 auto;
        width: 82.5vw;
        max-width: 100%;
        text-align: center;    
        position: static;
        padding-bottom: 141px;
    }
    .divider-image {
        margin-right: 5.87vw;
        width: 175px;
        margin-top: -155.1px;
    }
    .storyline-3--tablet {
        height: 266px;
        position: relative;
        left: 7.5vw;
    }
    .partners-image {
        width: 78.5vw;
        margin: 0 auto;
        position: relative;
        z-index: 5;
    }
    .partners-text {
        margin: 0 90px 111px;
    }
    .partners-text__p {
        font-size: 2.05vw;
        width: 82.5vw;
    }
    .h3.partners-text__header {
        font-size: 2.93vw;
    }
    .partners-button {
        width: 280.759px;
        height: 70px;
        flex-shrink: 0;
        padding: 0;
    }
    footer {
        margin-top: 183px;
    }
    .footer__image {
        bottom: 18vw;
    }
    .disclaimer {
        margin-right: 60px;
    }
}

@media (max-width: 890px) {
    .storyline-1 {
        left: 20vw;
    }
}

/* mobile up 360 - 767 */
@media (max-width: 767px) {
    body {
        background: linear-gradient(163deg, #0D0152 2.06%, rgba(33, 7, 87, 0.96) 2.98%, rgba(157, 40, 119, 0.75) 5.83%, rgba(184, 47, 120, 0.61) 6.36%, rgba(255, 66, 120, 0.25) 7.75%, rgba(255, 255, 255, 0.00) 11.52%);
    }
    .hide-mobile {
        display: none;
    }
    .header-container {
        height: 70.48px;
        margin: 0 16px;
    }
    .header__logo {
        width: 119px;
    }
    .button {
        font-size: var(--size-14);
        padding: 7.113px 9.746px 6.887px 11.254px;
        border-radius: 4px;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    }
    p {
        font-size: 4.88vw;
    }
    .h2 {
        font-size: 6.98vw;
        margin-bottom: 33.5px;
    }
    .intro-image__container {
        margin: 0 40px 27.72vw 42.5px;
        max-width: 80.82vw;
    }
    .intro-image__image {
        width: 100%;
        height: auto;
        max-width: 388px;
    }
    .storyline-1 {
        top: 66.5vw;
        left: 67vw;
        height: 32.56vw; 
    }
    .intro-container {
        height: 93.4vw;
    }
    .intro-text {
        top: -42vw;
        left: 45.64px;
    }
    .intro-text__header {
        font-size: 7.44vw;
        width: 69.53vw;
        max-width: 351.64px;
        padding: 0 8px;
    }
    .intro-text__p {
        font-size: 4.19vw;
        padding: 0 6px;
        font-weight: 600;
    }
    .intro-text__p-1 {
        width: 46.74vw;
    }
    .intro-text__p-2 {
        width: 45vw;
    }
    .intro-text__p-3 {
        width: 44vw;
    }
    .about-container {
        text-align: center;
        height: auto;
        margin-top: 13.26vw;
    }
    .about-text {
        width: 100%;
        margin: 0 auto;
    }
    .about-text__description {
        margin: 0 16px;
    }
    .about-text__list {
        margin: 0 24px;
    }
    .about-text__list-item {
        margin-top: 7.44vw;
    }
    .about-text__list-text {
        font-size: 4.88vw;
        text-align: left; 
        line-height: 150%;
    }
    .about-image__container {
        width: 84.16vw;
        height: auto;
        max-height: 1914.1px;
        flex-shrink: 0;
        margin: 0 auto -9px auto;
    }
    .benefits-list__heading {
        font-size: 6.98vw;
        width: 62.56vw;
        max-width: 300.28px;
        text-align: center;
        margin-top: 52px;
        margin-bottom: 32px;
    }
    .benefits-list {
        background-image: url("images/section-2-blue-bg-mobile.svg");
        height: 202.74vw;
        max-height: 964.5px;
        background-size: 101% 964px;
    }
    .benefits-list__list {
        flex-direction: column;
        text-align: center;
        font-size: 5.58vw;
        width: 81.4vw;
        max-width: 390.72px;
        margin-top: 0;
    }
    .benefits-list__list-item {
        width: 100%;
        font-size: 4.88vw;
        font-weight: var(--font-regular);
        margin-bottom: 32px;
    }
    .benefits-list__list-image {
        font-weight: var(--font-regular);
    }
    .benefits-description {
        height: auto;
        max-height: 1005.5px;
        flex-direction: column;
        margin-top: -42px;
    }
    .benefits-description-background {
        height: 120vw;
        margin-top: -5vw;
        max-height: 576px;
    }
    .benefits-image {
        margin: 0 30px;
        width: 92.5vw;
        max-width: 389px;
    }
    .benefits-description__text {
        font-size: 5.58vw;
        max-width: 437px;
        position: static;
        text-align: center;
        width: 91.16vw;
        margin-bottom: 132.49px;
        margin-top: 12.79vw;
        line-height: 180%;
    }
    .divider-image {
        width: 24.5vw;
        max-width: 117.6px;
        margin-right: 3.77vw;
        margin-top: -23.69vw;
    }
    .partners-text {
        margin-left: 24px;
        margin-top: 0;
    }
    .h1.partners-text__header {
        font-size: 7.44vw;
        margin-top: 5px;
        margin-bottom: 24px;
    }
    .partners-text__p, .h3.partners-text__header {
        font-size: 4.88vw;
        width: 88.84vw;
    }
    .partners-image {
        margin: 0 auto;
        width: 100%;
        max-width: 480px;
    }
    .partners-button {
        width: 184px;
        height: 45px;
        padding: 0;
        font-size: var(--size-24);
        box-shadow: none;
    }
    .disclaimer {
        width: 51.16vw;
        margin-right: 24px;
        margin-top: 140px;
        margin-bottom: 20px;
    }
    .footer__image {
        bottom: 44vw;
        width: 33vw;
        max-width: 158.4px;
    }
    .footer__logo {
        margin-top: 134px;
        margin-bottom: 7px;
    }
    .footer-copyright {
        background-image: url("images/footer-bg-mobile.svg");
        height: 56vw;
    }
    .footer-privacy-container {
        bottom: -95px;
        width: 320px;
        margin: 0 auto;
        flex-wrap: wrap;
        line-height: 2;
    }
    .dot-2 {
        display: none;
    }

}

/* large mobile (scaling stops) */
@media (min-width: 481px) and (max-width: 767px) {
    .header-container {
        max-width: 448px;
        margin: 0 auto;
    }
    .intro-container {
        margin: 0 auto;
        max-width: 480px;
        position: relative;
        height: 372px;
    }
    .storyline-1 {
        top: -143px;
        left: 322.2px;
        position: relative;
        height: 141px;
    }
    .intro-text {
        top: 237px;
        position: absolute;
    }
    .intro-text__header {
        font-size: var(--size-36);
    }
    .intro-text__p {
        font-size: var(--size-20);
    }
    .intro-text__p-1 {
        max-width: 224.35px;
    }
    .intro-text__p-2 {
        max-width: 213.81px;
    }
    .intro-text__p-3 {
        max-width: 210.14px;
    }
    .intro-image__container {
        margin-bottom: 133px;
    }
    .h2 {
        font-size: 33.5px;
        margin-left: auto;
        margin-right: auto;
        max-width: 480px;
    }
    .about-container {
        margin-top: 61.3px;
        max-height: 1327px;
    }
    .about-text__description {
        font-size: 1.46rem;
        max-width: 448px;
        margin: 0 auto;
    }
    .about-text__list {
        max-width: 432px;
        margin: 0 auto;
    }
    .about-text__list-item {
        margin-top: 35.7px;
    }
    .about-text__list-text {
        font-size: 1.46rem;
        max-width: 384px;
    }
    .about-image__container {
        max-width: 404px;
    }
    .benefits-list__heading {
        font-size: 2.09rem;
    }
    .benefits-list__list-item {
        font-size: 1.46rem;
    }
    .benefits-description {
        padding-top: 3px;
    }
    .benefits-description__text {
        font-size: 1.67rem;
    }
    .benefits-list {
        background-image: url("images/section-2-blue-bg-mobile-lg.svg");
        height: 200.93vw;
        max-height: 964.5px;
        background-size: 102% 964px;
    }
    .divider-image__container--mobile {
        max-width: 480px;
        margin: 0 auto;
    }
    .divider-image {
        margin-right: 18.096px;
        margin-top: -104.112px;
    }
    .h1.partners-text__header {
        font-size: 2.232rem;
    }
    .partners-text {
        max-width: 480px;
        margin: 0 auto;
    }
    .partners-text__p, .h3.partners-text__header {
        font-size: 1.464rem;
        max-width: 426.5px;
    }
    .footer-copyright {
        background-image: url("images/footer-bg-mobile-lg.svg");
        background-size: 101% 268.8px;
        height: 268.8px;
    }
    .footer__image {
        bottom: 208px;
        left: 24.6px;
        position: relative;
    }
    .footer__image-container {
        margin: 0 auto;
        max-width: 480px;
        position: relative;
        margin-top: -150px;
    }
}