/* FONT */
@font-face {
    font-family: "WorkSans-Light";
    src: url('./assets/Fonts/WorkSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "WorkSans-Medium";
    src: url('./assets/Fonts/WorkSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "WorkSans-Regular";
    src: url('./assets/Fonts/WorkSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* VARIABLES */
:root {
    --black: #000000;
    --white: #ffffff;
    --text-gray: #7A7A7A;
    --secondary: #D5E8EB;
    --primary: #f5f5f5;
    --light-orange: #F0DECE52;

    --font-size-headline: 29px;
    --font-size-subheadline: 18px;
    --font-size-subheadline-2: 32px;
    --font-size-foot-note: 14px;

    --line-height-headline: 40px;
    --line-height-subheadline: 92px;
    --line-height-subheadline-2: 42px;

    --layout: 40px;
    --spacing: 20px;

    --flex-widht: 100%;
    --hero-section-height: auto;
    --brand-section-height: auto;
    --footer-flex-jystify-centent: center;

    --footer-link-pposition: static
}
@media only screen and (min-width: 652px) {
    :root {
        --font-size-headline: 50px;
        --font-size-subheadline: 30px ;
        --line-height-headline: 51px;
        --layout: 20px;
        --flex-widht: 50%;
        --hero-section-height: 100vh;
        --brand-section-height: 425px;
        --footer-flex-jystify-centent: space-between;
        --footer-link-pposition: absolute
    }
}
@media only screen and (min-width: 1024px) {
    :root {
        --font-size-headline: 75px;
        --line-height-headline: 92px;
        --font-size-subheadline-2: 46px;
        --line-height-subheadline-2: 50px;
        --layout: 20px
    }
}

/* ANIMATIONS */
@keyframes slide-fade-in-40 {
  from {
    transform: translateY(40px);
    opacity: 0;
    }
  to {
    transform: translateY(0);
    opacity: 1;
    }
}
@keyframes slide-fade-in-100 {
  from {
    transform: translateY(100px);
    opacity: 0;
    }
  to {
    transform: translateY(0);
    opacity: 1;
    }
}
.fade-in{
  opacity: 0;
  transition: 1s all ease;
}
.fade-in.active{
  opacity: 1;
}

/* SHARED */
*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'TTFirsNeue-regular', sans-serif;
    color: var(--black);
}
html {
	scroll-behavior: smooth;
}

h1 {
    font-size: var(--font-size-headline);
    line-height: var(--line-height-headline);
    margin-bottom: var(--spacing);
    color: var(--white)
}

img {
    max-width: 100%;
    border: none
}

section {
    position: relative;
    padding: var(--spacing);
}

.container {
    position: relative;
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
}

.container.column {
    max-width: 659px;
}

.content-block {
    padding: calc(0.4 * var(--spacing));
    margin-bottom: calc(2.5 * var(--spacing)) ;
}

.content-block img,
.content-block h2,
.content-block p
 {
    margin-bottom: calc(1.8 * var(--spacing)) ;
}

.content-block h2
 {
    font-size: var(--font-size-subheadline-2);
    line-height: var(--line-height-subheadline-2);
}

.content-block p
 {
    font-size: 1.25rem;
    line-height: 1.5;
}

/*  HERO SECTION */
.hero {
    display: flex;
    align-items: center;
    background-image: url('./assets/Images/background-mountain.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    height: var(--hero-section-height);
}

.hero p {
    font-size: var(--font-size-subheadline);
    max-width: 825px;
    color: var(--white);
    font-family: 'TTFirsNeue-light', sans-serif ;
    font-weight: 300;
}

.hero h1 {
    animation-name: slide-fade-in-100;
    animation-duration: 1s;
}
.hero p {
    animation-name: slide-fade-in-40;
    animation-duration: 1s;
}

.hero a {
    display: inline-block;
    padding: calc(0.8 * var(--spacing)) calc(2 * var(--spacing));
    margin-top: var(--layout);
    border: 3px solid var(--white);
    color: var(--white);
    text-decoration: none;
    font-family: 'TTFirsNeue-light', sans-serif ;
}


/*  BRAND SECTION */
.brand {
    align-items: flex-end;
    background-color: var(--secondary);
    background-image: url('./assets/Images/watermark.png');
    background-position: center left;
    background-size: contain;
    padding-bottom: 0;
    padding-right: 0;
    height: var(--brand-section-height);
}
.brand .container {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

}
.brand .content-block {
    flex: 1 1 auto;
    margin-bottom: 0;
    width:  var(--flex-widht);
}
.brand .content-block p {
    margin-bottom: 0;
}
.illustration {
    background-image: url('./assets/Images/mobile.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 0;
    width: var(--flex-widht);
    min-height: 400px;
    height: 100%;
}


/* BODY SECTION*/
.body {
    background-color: var(--primary);
    padding-top:calc(2 * var(--layout));
}

/* CONTACT SECTION*/
.contact {
    background-color: var(--light-orange);
    text-align: center;
}

.contact .content-block {
    margin-bottom: 0;
}

/* FOOTER */
footer {
    background-color: var(--primary);
    padding:  var(--layout);
    text-align: center;
}
footer .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--footer-flex-jystify-centent);
    align-items: center;
}

footer p {
    font-family: 'TTFirsNeue-light', sans-serif;
    font-size: var(--font-size-foot-note);
    color: var(--text-gray);
    width: 100%;
}
footer a {
    position: var(--footer-link-pposition);
    right: 0;
    display: inline-block;
    padding: var(--spacing);
    transition: .3s ease-in-out opacity;
}
footer a:hover {
    display: inline-block;
    padding: var(--spacing);
    opacity: 0.8;
}