@font-face {
    font-family: 'kollektif';
    src: url('../fonts/kollektif-webfont.woff2') format('woff2'),
    url('../fonts/kollektif-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root {
    /* Colors: */
    --purple-light-2: #B491D8;
    --purple-light-1: #955ECB;
    --purple: #7535B5;
    --purple-dark-1: #5C2791;
    --purple-dark-2: #421A6A;
    --logo-color: #fff;

    --heading-font: kollektif;
    --text-font: kollektif;
    --nav-font: kollektif;
}

html {
    font-size: 62.5%;
    scroll-snap-type: y mandatory;
    box-sizing: border-box;
} /* =10px */
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    font-size: 1.4rem;

} /* =14px */
h1 { font-size: 2.4rem; } /* =24px */

body, html {
    padding:0;
    margin:0;
    scroll-behavior: smooth;
}

header {
    position: fixed;
    top: 0px;
    z-index:10;
    padding-left:5rem;
    display:flex;
    /*height:40px;*/
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    width:100%;
    transition:0.5s ease-in-out all;
}

header svg {
    position:absolute;
    left:25%;
    top:40vh;
    width:50%;

}

header nav {
    justify-content: flex-end;
}
header nav ul {
    display:flex;
    flex-direction:row;
    margin:4rem 0;
}

header nav ul li {
    list-style: none;
}

header nav ul li a {
    color:#fff;
    font-size:1.6rem;
    text-decoration:none;
    font-family: var(--nav-font);
    margin-right:5rem;
    display:flex;
    flex-direction:column;
}

header.sticky {
    background:#fff;
    flex-direction:row;

}

header.sticky svg{
    --logo-color:var(--purple-dark-2);
    display: flex;
    justify-content: center;
    align-items: center;
    fill:#fff;
    position:relative;
    left:0;
    top:0;
    width:auto;
    height:5rem;
}

header.sticky nav ul li a  {
    color:var(--purple-dark-2);
}
header.header--inverted {
    background:transparent;
}
header.header--inverted nav ul li a {
    color:#fff;
}

header.header--inverted svg{
    --logo-color:#fff;
}

section {
    scroll-snap-align:start;
    height:100vh;
    scroll-padding:10rem;
    padding-top:10rem;
}

.page-title {
    font-size:5rem;
    font-family: var(--heading-font);
    color:var(--purple-dark-2);
    line-height:6.5rem;
    padding:0;
    margin:0;
    font-weight:normal;
    text-align: center;
    margin-top:5rem;
}

.home {
    height:100vh;
    background: transparent linear-gradient(119deg, var(--purple) 0%, var(--purple-dark-2) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(119deg, #7535B5 0%, #421A6A 100%) 0% 0% no-repeat padding-box;
}
.about {
    margin-bottom:5rem;
}

.talking-point__text h1 {
    font-size:5rem;
    font-family: var(--heading-font);
    color:var(--purple-dark-2);
    line-height:6.5rem;
    padding:0;
    margin:0;
    font-weight:normal;
}

.talking-point__text {
    max-width:45%;
    color:var(--purple-dark-2);
    font-family: var(--text-font);
}
.talking-point__text p {
    font-size:1.8rem;
    line-height:2.5rem;
}
.talking-point__image {
    width:50%;
    padding-right:3rem;
}
.talking-point__image img {
    width:100%;
}
.talking-point, .approach-points {
    display:flex;
    padding:5rem;
}

.talking-point:nth-child(even), .approach-points:nth-child(odd) {
    flex-direction: row-reverse;
}

.approach-points__text h1 {
    font-size:4.2rem;
    font-family: var(--heading-font);
    color:var(--purple-dark-2);
    line-height:5rem;
    padding:0;
    margin:0;
    font-weight:normal;
}

.approach-points__text p, .talking-point__text p {
    line-height:2.2rem;
}

.approach-points__text {
    max-width:60%;
    color:var(--purple-dark-2);
    font-family: var(--text-font);
}
.approach-points__image {
    width:20%;
    max-width:40rem;
    padding-right:3rem;
}
.approach-points__image img {
    width:100%;
}


.approach {
    height:auto;
    min-height:100vh;
    padding-bottom:10rem;
}

.contact {
    background:var(--purple);
    --contact-font-color: #fff;
    display:flex;
    flex-direction: column;
    height:auto;
    min-height:100vh;
}

.contact .page-title {
    color:var(--contact-font-color);
}
.contact .contact-page__image {
    width:45%;
}
.contact .contact-page {
    padding:0 5rem;
    display:flex;
    align-items: flex-start;
    padding-top:5rem;
    flex-grow:1;
}

.contact .contact-page__form {
    width:50%;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction:row;
    flex-grow:1;
}

.contact .contact-page__form iframe {
    height:75.4rem;
}
.contact .contact-option__icon {
    filter:invert(100);
    width:8rem;
    padding-right:2rem;
}

.contact-options {
    margin:0;
    padding:0;
    padding-left:5rem;
    display:flex;
    flex-direction:column;
    flex-grow:1;
    justify-content: space-between;
}

.contact-option__text {
    font-size: 2.4rem;
    color:#fff;
    font-family: var(--text-font);
    text-decoration: none;
}

.contact-options li{
    list-style: none;
    display:flex;
    align-items: center;
}

nav ul li a::after {
    content:'';
    width:65%;
    position:relative;
    display:block;
    height:0.2rem;
    top:0.5rem;
    transition:0.3s ease-in-out background-color;
    margin:auto;
}

nav ul li a.active::after {
    background-color:var(--purple-dark-2);
}

header.header--inverted nav ul li a.active::after {
    background-color:#fff;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    section {
        height:auto;
    }
    .talking-point, .approach-points, .contact-page {
        flex-direction: column;
    }
    .talking-point:nth-child(even), .approach-points:nth-child(odd) {
        flex-direction: column;
    }

    .talking-point__text, .talking-point__image, .approach-points__image, .approach-points__text, .contact .contact-page__image {
        width:100%;
        max-width:100%;
        font-size:1.4rem;
    }

    .contact .contact-page__form {
        flex-grow:0;
        flex-direction:column;
        display:flex;
        padding-top:5rem;
    }

    .contact-option__text {
        font-size:3.6rem;
    }

    header nav ul li a {
        font-size:3.4rem;
    }
}