/*** CSS IMPORT **/

@import url(../../predefined/design_tile_1/design_tile_1.css);
@import url(../../predefined/grid_tile_2x/grid_tile_2x.css);
@import url(../../predefined/grid_tile_3x/grid_tile_3x.css);

@import url(landing_hero.css);
@import url(landing_projects.css);

@import url(../blog/blog_entrie.css);



/*** LANDING SERVICES ***/

#landing_services article:last-of-type {
    grid-column: 1 / 13;
    row-gap: var(--vertical_s);
    margin-top: var(--vertical_xs);
}

#landing_services article:last-of-type section {
    max-width: var(--column12);
    aspect-ratio: unset;
}

@media only screen and (max-width: 640px ) {

    #landing_services article:last-of-type {
        margin-top: unset;
    }
}



/*** LANDING SOCIALPROOF ***/

#landing_socialproof article {
    grid-column: 1 / 8;
}

#landing_socialproof article figure {
    display: flex;
    justify-content: space-between;
    width: fit-content;
    order: 2;
}

#landing_socialproof article img {
    width: 32px;
    padding-right: var(--horizontal_m);
}

#landing_socialproof aside {
    grid-column: 9 / 13;
    flex-direction: column;
    row-gap: var(--vertical_xs);
}

#landing_socialproof aside p>br {
    margin-top: 0;
}

#landing_socialproof aside section {
    padding: var(--vertical_xs) var(--horizontal_m);
    gap: var(--vertical_xxs);
    border-radius: var(--border-radius_xl);
    background: #ffffff;
}

#landing_socialproof aside section div {
    gap: var(--horizontal_m);
}

#landing_socialproof aside section figure {
    width: var(--column);
}

#landing_socialproof aside section div div {
    flex-direction: column;
    gap: var(--vertical_xxxxs);
}

#landing_socialproof aside section h6,
#landing_socialproof aside section p {
    color: var(--grey_dark);
    line-height: 1.25rem;
}

#landing_socialproof aside section div h6 {
    color: var(--blue_dark);
}


/* media */


@media only screen and (max-width: 1024px ) {

    #landing_socialproof article {
        grid-column: 1 / 7;
    }

    #landing_socialproof aside {
        grid-column: 8 / 13;
    }

    #landing_socialproof aside section figure {
        width: var(--column2);
    }
}

@media only screen and (max-width: 768px ) {

    #landing_socialproof article {
        grid-column: 1 / 13;
    }

    #landing_socialproof aside {
        grid-column: 2 / 12;
    }

    #landing_socialproof article figure {
        flex-wrap: wrap;
        row-gap: var(--vertical_xxs);
        justify-content: flex-start;
    }    
}

@media only screen and (max-width: 640px ) {

    #landing_socialproof aside {
        grid-column: 1 / 13;
    } 
}

@media only screen and (max-width: 429px ) {

    #landing_socialproof aside section figure {
        width: var(--column4);
    }
}



/*** LANDING ABOUT-PATH ***/

#landing_about-path {
    row-gap: var(--vertical_xs);
}

#landing_about-path li {
    flex-direction: column;
    grid-column: span 6;
    row-gap: var(--vertical_xxs);
}

#landing_about-path li:nth-of-type(1) {
    grid-column: 1 / 8;
}

#landing_about-path li:nth-of-type(1) p {
    margin-top: 0;
    width: var(--column6)
}

#landing_about-path li:nth-of-type(2) {
    grid-column: 8 / 13;
    grid-row: 1 / 3;
    align-items: center;
}

#landing_about-path li:nth-child(2) figure {
    width: var(--column4);
    min-width: 15rem;
    max-width: 30rem;
    filter: drop-shadow(20px 10px 25px #13141a4d);
}

#landing_about-path li:nth-child(n+3) figure {
    height: var(--column);
    min-height: 2.5rem;
    max-height: 3rem;
}

#landing_about-path li article {
    flex-direction: row;
    align-items: center;
    gap: var(--horizontal_s);
}

#landing_about-path li article h5 {
    color: var(--blue_dark);
}

/* media */

@media only screen and (max-width: 640px ) {

    #landing_about-path li {
        grid-column: span 12 !important;
    }
    
    #landing_about-path li:nth-of-type(1) p {
        width: unset;
    }

    #landing_about-path li:nth-child(n+3) figure {
        height: var(--column2);
    }
}



/*** LANDING UF-DESIGN ***/

#landing_uf-design header {
    grid-column: 1 / 5;
}

#landing_uf-design h2,
#landing_uf-design h5 {
    color: var(--blue_dark);
}

#landing_uf-design article {
    grid-column: 6 / 13;
    gap: var(--vertical_s);
}

#landing_uf-design article section {
    gap: var(--vertical_xxs);
}

/* media */

@media only screen and (max-width: 1024px ) {

    #landing_uf-design header {
        grid-column: 1 / 6;
    }
}

@media only screen and (max-width: 768px ) {

    #landing_uf-design,
    #landing_uf-design article {
        row-gap: var(--vertical_xs);
    }

    #landing_uf-design article section {
        gap: var(--vertical_xxxs);
    }

    #landing_uf-design header,
    #landing_uf-design article {
        grid-column: 1 / 13;
    }
}



/*** LANDING BLOG ***/

#landing_blog {
    row-gap: var(--vertical_s);
}

#landing_blog>header {
    grid-column: span 12;
    text-align: center;
    row-gap: var(--vertical_xxxs);
    align-items: center;
}

#landing_blog>header h2 {
    color: var(--blue_dark);
}

#landing_blog>header>h6 {
    color: var(--grey_dark);
    width: var(--column6);
}

#landing_blog>div:last-of-type {
    grid-column: span 12;
    justify-content: center;
}

/* media */

@media only screen and (max-width: 1280px ) {

    #landing_blog>header>h6 {
        width: var(--column10);
    }
}

@media only screen and (max-width: 768px ) {

    #landing_blog>header {
        text-align: left;
        align-items: baseline;
    }
}



/*** LANDING ABOUT-INTRODUCTION ***/

#landing_about-introduction article {
    grid-column: 1 / 8;
}

#landing_about-introduction figure {
    grid-column: 8 / 13;    
}

@media only screen and (max-width: 1280px ) {

    #landing_about-introduction article {
        grid-column: 1 / 9;
    }

    #landing_about-introduction figure {
        grid-column: 9 / 13;    
    }
}

@media only screen and (max-width: 1023px ) {

    #landing_about-introduction {
        row-gap: var(--vertical_xs);
    }

    #landing_about-introduction article {
        grid-column: 2 / 12;
    }

    #landing_about-introduction figure {
        grid-column: 5 / 9;  
    }
}

@media only screen and (max-width: 768px ) {

    #landing_about-introduction article {
        grid-column: 1 / 13;
    }

    #landing_about-introduction figure {
        grid-column: 4 / 10; 
    }
}

@media only screen and (max-width: 374px ) {

    #landing_about-introduction figure {
        grid-column: 3 / 11; 
    }
}



/*** LANDING CALLACTION ***/

#landing_callaction {
    row-gap: var(--vertical_xs);
}

#landing_callaction article {
    grid-column: span 6;
}

#landing_callaction article,
#landing_callaction article a {
    display: flex;
    flex-direction: column;
    row-gap: var(--vertical_xxs);
}

#landing_callaction article .h6_style {
    color: var(--grey);
}

#landing_callaction article .h6_style:hover {
    color: var(--hover_white);
}

/* Media */

@media only screen and (max-width: 768px ) {

    #landing_callaction article {
        grid-column: span 12;
    }
}



/*** NAVIGATION LANDING ***/


/* Navigation Landingpage */

input:not(:checked)+nav.not_scrolled {
        background: unset;
        backdrop-filter: unset;
        -webkit-backdrop-filter: unset;
    }

@media only screen and (min-width: 769px ) {

    nav.not_scrolled {
        background: unset;
        backdrop-filter: unset;
        -webkit-backdrop-filter: unset;
    }

    nav.not_scrolled figure {
        height: 2.5rem;
    }
}