/*
    manrope: 300 regular, 700 bold, 800 extra bold
    lexend mega: 800 extra bold, 900 black

*/
* {
  box-sizing: border-box;
}
html {
    overflow-x: hidden;
}
body {
    height: auto;
    min-height: 100dvh;
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    background-color: #262322;
    overflow-x: hidden;
}
.landscape {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background-color: #fff;
    z-index: 9999;
}
h1,h2,h3,h4 {
    font-family: 'Lexend Mega', sans-serif;
}
/*@media (min-width: 1600px) {
    .uk-container {
        max-width: 1680px;
    }
}*/

.header {
    position: sticky;
    top: 0;
    width: 100dvw;
    transition: all 1.5s;
    transition-delay: 5s;
    z-index: 1;
    background-color: #262322;

    & .header-container {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    & svg {
        height: 40px;
        width: auto;
    }
    & .sublogo {
        color: #fff;
        font-family: 'Manrope', sans-serif;
        font-size: 16px;
        text-align: center;
        margin: 26px 0 0 0;
    }
    & a {
        color: #FCF7EE;
        text-decoration: underline;
        text-decoration-color: rgb(252, 247, 238, .4);
        transition: all .6s;
    }
    & a:hover {
        color: #E55934;
        text-decoration-color: #E55934;
        text-decoration-thickness: 2px;
    }
}

.form {
    position: absolute;

    width: 100dvw;
    height: auto;

    transform: translateX(-100%);
    transition: all .6s;

    &.black-form {
        background: rgb(38, 35, 34, .9);
    }
    &.red-form {
        background: rgb(229, 89, 52, .9);
    }
    
    @media (min-width: 1280px) {
        height: calc(100dvh - 140px);
        width: calc(100dvw / 2);  

        &.black-form {
            transform: translateX(-100%);
        }

        &.red-form {
            transform: translateX(200%);
        }


    }
    
}
.form-close {
    position: absolute;

    width: 100dvw;
    height: auto;

    margin-top: -30px;

    transform: translateX(100%);
    transition: all .6s;

    @media (min-width: 1280px) {
        margin-top: 0;
    }

    & a {
        display: block;
        margin-right: 15px;
        @media (min-width: 1280px) {
            margin-right: 5px;
        }
    }
}

.module {
    & article {
        padding-top: 40px;
        padding-bottom: 40px;

        @media (min-width: 1280px) {
            padding-top: 60px;
            padding-bottom: 60px;
        }

        & h2 {
            color: #FCF7EE;
            font-family: 'Lexend Mega', sans-serif;
            font-weight: 900;
            font-size: 24px;
            margin-bottom: 40px;

            @media (min-width: 1280px) {
                margin-bottom: 60px;
            }
        }
        & h3 {
            color: #FCF7EE;
            font-family: 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 22px;
        }
        & h4 {
            color: #FCF7EE;
            font-family: 'Manrope', sans-serif;
            font-weight: 300;
            font-size: 18px;
            text-decoration: underline;
            margin-bottom: 0;
        }
        & dt {
            color: #FCF7EE;
            font-family: 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 18px;
            margin-bottom: 20px;
        }
        & p, dd {
            color: #FCF7EE;
            font-family: 'Manrope', sans-serif;
            font-weight: 300;
            font-size: 16px;
        }
        & dd {
            max-width: 412px;
        }
        & .cost {
            color: #FCF7EE;
            font-family: 'Manrope', sans-serif;
            font-weight: 300;
            font-size: 54px;
            margin: 20px 0;
        }


    }

    &.bg-light {
        background-color: #6d635b;
    }
    &.bg-yellow {
        background-color: #DED7BE;
        
        & * {
            color: #262322;
        }
    }

    &.what-we-offer {

        & .gallery {

            @media (max-width: 1280px) {
                padding-inline: 0;
            }

            margin-top: 40px;
            margin-bottom: 40px;
        }

        & hr {
            margin: 20px 0;
            border-top: 2px solid #E55934;
        }

    }

    &.use-of-funds {

        padding-bottom: 150px;
        @media (min-width: 1280px) {
            padding-bottom: 50px;
        }

        & p {

            @media (min-width: 1280px) {
                line-height: 2.2;
            }
            
            & strong {
                font-weight: 700;
            }
        }
        & .git {
            position: relative;
            margin: 30px auto 0;
            width: 190px;
            opacity: 1;

            & a {
                font-size: 12px;
                font-family: 'Lexend Mega', sans-serif;
                font-weight: 900;
                color: #FCF7EE;
                transition: all .6s;
            }
            & a:hover {
                border-color: #E55934;
                color: #E55934;
            }

        }
    }

    &.timeline {
        position: relative;

        @media (min-width: 1280px) {
            padding-top: 40px;
            padding-bottom: 40px;
        }

        & .timeline-pic {

            & figure {
                margin: -130px 0 0 0;
            }

            & picture {
                border: 8px solid #FCF7EE;
                display: inline-block;

                @media (min-width: 1280px) {
                    border: 18px solid #FCF7EE;
                }
            }

        }

        & .timeline-wrapper {
            
            width: 100%;
            max-width: 300px;
            margin: 0 auto;
            padding: 40px 0;

            @media (min-width: 1280px) {
                margin-left: 80px;
            }

            section {
                display: flex;
                align-items: flex-start;
                gap: 30px;

                .tl-value {
                    width: 50px;
                }

                .tl-text {
                    display: flex;
                    gap: 30px;
                    width: 220px;

                    aside {
                        display: flex;
                        align-items: center;
                        flex-direction: column;

                        .dot {
                            --size: 5px;
                            width: var(--size);
                            height: var(--size);
                            margin: 0px 0 0 0;
                            border-radius: 50%;
                            background-color: #E55934;
                            flex-grow: 0;
                            transform: translateY(10px);
                        }

                        .line {
                            flex-grow: 1;
                            margin: 0;
                            width: 1px;
                            background-color: #E55934;
                            transform: translateY(10px);
                        }

                    }

                    .main {
                        padding-bottom: 3rem;
                    }

                }

                &.last-tl {
                    .line {
                        display: none;
                    }
                    .main {
                        padding-bottom: 0;
                    }
                }

            }

        }

    }
}

.text-underline {
    text-decoration: underline;
    text-decoration-color: #FCF7EE;
    text-underline-offset: 10px;
    line-height: 2;
}

.page-forms {
    & .header {
        overflow-x: hidden;
        overflow-y: scroll;
        height: 100dvh;
    }
    & .form {
        position: relative;
        transform: translateX(0%);
        @media(min-width:1280px) {
            position: absolute;
            &.red-form {
                transform: translateX(100%);
            }
        }
    }
    & .form-close {
        position: relative;
        transform: translateX(0%);
    }
}

#modal-lff {
    & .uk-modal-dialog {
        backdrop-filter: blur(10px);
        background: transparent;
        & picture {
            @media (min-width: 1280px) {
                max-width: 70%;
            }
        }
    }

    & .uk-modal-close-full {
        color: #E55934;
        background: transparent;

        & svg {
            width: 30px;

            & line {
                stroke-width: 2;
            }
        }
    }
}

#footer {
    padding: 40px 0;
    background-color: #262322;

    border-bottom: 3px solid #E55934;

    @media(min-width:1280px) {
        padding: 80px 0 30px 0;
    }

    svg {
        color: #FCF7EE;
    }

    .footer-info {
        color: #FCF7EE;
        gap: 40px;

        a {
            color: #FCF7EE;
            transition: all .6s;
        }
        a:hover {
            color: #E55934;
        }

        .text {
            max-width: 440px;
            text-align: right;
            text-wrap: balance;
        }

    }
}

@media (max-height:500px) {
  .landscape {
    display: grid;
    place-items: center;
    & img {
        height: 250px;
    }
  }
}