/* Reset default styles */
* {
    margin: 0;
    outline: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: Arial, Helvetica, sans-serif;
}

header div {
    color: white;
    font-size: clamp(2em, 10vw, 4em);
    font-weight: bold;
    text-shadow: 3px 3px#444;
}

img {
    max-width: 100%;
    max-height: 100%;
}

/* Full screen height for each section */
section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    padding: clamp(2em, 5vh, 4em) clamp(.5em, 10vw, 10em);
}

section h2 {
    font-size: 3rem;
}

section ul {
    margin: 1em 0;
}

header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

button {
    padding: .7rem 2rem;
    font-size: clamp(1em, 2vw, 2em);
    font-weight: bold;
    background-color: white;
    color: black;
    border: none;
    cursor: pointer;
}

svg {
    height: 2.5em;
    width: 2.5em;
    padding: .1em;
}

section:nth-child(1) {
    background-image: url('./static/img/main-min.jpg');
    background-size: cover;
    background-position: center center;
    align-items: start;
    justify-content: space-around;
}

section:nth-child(2) {
    background-color: black;
    color: white;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    gap: clamp(1em, 5vw, 4em);
}

section:nth-child(2) img {
    justify-self: end;
}

section:nth-child(3) {
    background: linear-gradient(to bottom, black 0%, #444 20%, white 45%);
}

section:nth-child(3) h2 {
    color: white;
}

section:nth-child(4) {
    background: linear-gradient(to bottom, white 0%, #81A6C3 100%);
}

section:nth-child(5) {
    background-image: url('./static/img/stavba-min.jpg');
    color: white;
    padding: 0;
    align-items: end;
    flex-direction: row;
}

footer {
    flex-grow: 1;
    padding: 5% clamp(5%, 7rem, 15%);
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    grid-template-rows: repeat(4, 1fr);
    column-gap: clamp(2rem, 5vw, 10rem);
    background-color: #727272c4;
}


footer div:nth-child(1) {
    order: 1;
}

footer div:nth-child(2) {
    order: 4;
}

footer div:nth-child(3) {
    order: 7;
}

footer div:nth-child(4) {
    order: 10;
}

footer div:nth-child(5) {
    order: 2;
}

footer div:nth-child(6) {
    order: 5;
}

footer div:nth-child(7) {
    order: 8;
}

footer div:nth-child(8) {
    order: 11;
}

footer div:nth-child(9) {
    order: 3;
}

footer div:nth-child(10) {
    order: 6;
}

footer div:nth-child(11) {
    order: 9;
}

footer div:nth-child(12) {
    order: 12;
}

footer div:nth-child(9),
footer div:nth-child(10),
footer div:nth-child(11),
footer div:nth-child(12) {
    text-align: right;
}

footer a {
    color: white;
    text-decoration: none;
}

footer svg {
    vertical-align: middle;
}

footer ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}


.columns {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(1em, 5vw, 4em);
}

.columns ul {
    padding-left: 1em
}

.left-column {
    flex: 1;
}

.right-column {
    flex: 1;
}

.social-icons {
    display: flex;

}

.subsection {
    flex: 1;
}

.subsection h3 {
    margin: .5em 0;
}

.services-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2em;
}

#facade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
}

#facade .left-column {
    display: grid;
    flex-direction: column;
    height: 100%;
}

#facade .social-icons {
    align-self: end;
}


@media (max-width: 1000px) {
    footer {
        padding: 5% clamp(1rem, 3rem, 4rem);
    }
}

@media (max-width: 860px) {
    .columns {
        flex-direction: column;
    }

    footer {
        display: unset;
        width: 100%;
        padding: clamp(.7em, 5vh, 4em) clamp(.5em, 5vw, 10em);
    }

    footer .logo {
        display: none;
    }

    footer div {
        order: initial !important;
        text-align: left !important;
        margin-top: .2em;
    }

    footer h3 {
        margin-top: 2rem;
    }

    section:nth-child(2) {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    section:nth-child(2) .logo {
        display: none;
    }

    section:nth-child(2) .left-column {
        order: 2;
    }

    section:nth-child(2) .social-icons {
        order: 4;
    }

    #facade {
        grid-template-columns: 1fr;
        grid-template-rows: 2fr;
    }

    #facade .left-column {
        order: 2;
    }
}

@media (max-width: 500px) {
    section {
        font-size: 1.2rem;
    }
}