body,
html {
    scroll-behavior: smooth
}

.lined::before,
main section.faq div details::before {
    background: linear-gradient(to right, #ae8550 0, #f6eaa6 100%);
    content: ""
}

main section.contact,
main section:nth-child(odd) {
    background-color: #f5f5f5
}

a.btn,
main section.contact form button {
    letter-spacing: 2px;
    transition-duration: .5s
}

:root {
    --color: #232323;
    --white: #ffffff
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

details summary {
    list-style: none;
    cursor: pointer
}

details summary::-webkit-details-marker {
    display: none
}

details summary:focus {
    outline: 0
}

ol,
ul {
    list-style-type: none
}

a {
    color: inherit;
    text-decoration: none
}

a.btn,
body {
    color: var(--color)
}

a.btn {
    border: 1px solid var(--color);
    padding: 15px 80px;
    background-color: var(--white);
    font-size: 16px;
    display: inline-block
}

a.btn:hover,
main section.outProjects div.tabArea a.btn.active {
    background-color: var(--color);
    color: var(--white);
    transition-duration: .5s
}

a.btn.alternate,
header div input {
    background-color: transparent;
    color: var(--white)
}

a.btn.alternate {
    border: 1px solid var(--white)
}

a.btn.alternate:hover {
    background-color: var(--color);
    transition-duration: .5s
}

body {
    font-family: Roboto, sans-serif;
    font-weight: 300;
    position: relative;
}

body::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(255, 255, 255, .2);
    z-index: 9999999999;
    display: block;
}

h1.font,
h2.font,
h3.font,
h4.font {
    font-family: Belleza, serif;
    position: relative
}

.lined::before {
    position: absolute;
    width: 60%;
    height: 5px;
    bottom: -25px
}

header {
    width: 100%;
    padding: 10px 10%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    transition-duration: .5s
}

header div,
header nav.mainMenu {
    flex-direction: row;
    display: flex
}

header.active {
    padding: 0 10%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .9) 0, #000 100%);
    transition-duration: .5s
}

header a.logo {
    width: 20%
}

header nav.mainMenu {
    width: 80%;
    justify-content: center;
    align-items: center
}

header nav.mainMenu a {
    color: var(--white);
    padding: 0 10px;
    font-size: 14px
}

header div {
    justify-content: space-between;
    align-items: center;
    gap: 20px
}

header div input {
    border: .5px solid rgba(255, 255, 255, .6);
    padding: 10px 20px;
    border-radius: 50px;
    outline: 0
}

header div nav.socialMedia {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px
}

header div nav.socialMedia a {
    padding: 5px;
    color: var(--white)
}

header div nav.socialMedia img {
    width: auto;
    height: 12px
}

main {
    width: 100%;
    overflow: hidden
}

main>section {
    width: 100%;
    padding: 50px 10%
}

main section.slider {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    gap: 10%
}

main section.pageHeader::before,
main section.slider::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .8) 0, rgba(0, 0, 0, 0) 100%)
}

main section.pageHeader,
main section.zPattern::before {
    background-position: center;
    background-repeat: no-repeat
}

main section.slider h1 {
    width: 80%;
    font-size: 75px;
    font-weight: 300;
    color: var(--white);
    position: relative;
    text-align: center
}

main section.parallax a.btn,
main section.slider a.btn {
    position: relative
}

main section.pageHeader {
    padding: 150px 10% 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: cover;
    position: relative
}

main section.pageHeader h1 {
    font-size: 85px;
    font-weight: 300;
    color: var(--white);
    position: relative;
    text-transform: capitalize
}

main section.zPattern {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 5%;
    padding: 100px 10% 50px;
    margin-bottom: -100px;
    position: relative;
    z-index: 9
}

main section.zPattern::before {
    content: "";
    position: absolute;
    right: -10%;
    top: 5%;
    background-image: url(/images/bgLogo.svg);
    width: 40%;
    height: 50%;
    z-index: -1;
    background-size: 100%
}

main section.zPattern div {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
    padding-bottom: 100px
}

main section.relatedProducts h2,
main section.zPattern div h1,
main section.zPattern div h2 {
    font-size: 80px;
    font-weight: 300
}

main section.zPattern div h2.blog {
    font-size: 46px;
}

main section.zPattern div p {
    font-size: 18px;
    line-height: 2em
}

main section.zPattern picture {
    width: 50%;
    height: 600px;
    border: 20px solid var(--white);
    transform: translateY(50px)
}

main section.blogPage div.article picture img,
main section.catalog div.catalogList picture img,
main section.collections div.items div.item picture img,
main section.outProjects div.productContent picture img,
main section.productDetails section.productDetailsArea div picture img,
main section.relatedProducts div.relatedProducts div.item picture img,
main section.tables div.tableList div.item picture img,
main section.zPattern picture img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

main section.parallax {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 150px 10%;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    position: relative;
    gap: 50px
}

main section.parallax::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .8) 0, rgba(0, 0, 0, .2) 100%)
}

main section.parallax h2 {
    font-size: 100px;
    font-weight: 300;
    text-align: right;
    color: var(--white);
    position: relative
}

main section.collections {
    overflow-y: scroll
}

main section.collections div.items {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 40px;
    overflow: hidden;
    width: max-content;
    align-items: flex-end
}

main section.collections div.items div.item {
    width: 350px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px
}

main section.collections div.items div.item h3 {
    font-size: 45px;
    font-weight: 300;
    width: 100%;
    text-align: center
}

main section.collections div.items div.item h3.lined::before {
    left: 0;
    right: 0;
    margin: 0 auto
}

main section.collections div.items div.item picture,
main section.relatedProducts div.relatedProducts div.item picture {
    width: 100%;
    height: 400px;
    overflow: hidden
}

main section.faq {
    display: flex;
    flex-direction: column;
    gap: 80px
}

main section.blogPage h1,
main section.blogPage h2,
main section.catalog h1,
main section.catalog h2,
main section.collectionList h1,
main section.collectionList h2,
main section.contact h1,
main section.contact h2,
main section.faq h2,
main section.outProjects h1,
main section.outProjects h2,
main section.tables h1,
main section.tables h2 {
    width: max-content;
    font-size: 80px;
    font-weight: 300
}

main section.faq div {
    display: flex;
    flex-direction: column;
    gap: 25px
}

main section.faq div details {
    outline: 0;
    position: relative;
    padding-top: 25px
}

main section.faq div details::before {
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -25px
}

main section.faq div details summary {
    font-family: Belleza, serif;
    font-size: 26px;
    font-weight: 300
}

main section.faq div details p {
    font-size: 18px;
    margin-top: 10px;
    line-height: 1.5em
}

main section.faq div details summary::before {
    content: "+";
    position: absolute;
    right: 0
}

main section.faq div details[open] summary::before {
    content: "-"
}

main section.outProjects nav.productDetailsNav,
main section.productDetails nav.productDetailsNav {
    display: flex;
    flex-direction: row;
    gap: 10px
}

main section.outProjects nav.productDetailsNav+section,
main section.productDetails nav.productDetailsNav+section {
    padding-top: 50px
}

main section.blogPage nav.blogPageNav a:not(:first-child):before,
main section.outProjects nav.productDetailsNav a:not(:first-child):before,
main section.productDetails nav.productDetailsNav a:not(:first-child):before {
    content: "/";
    margin-right: 10px
}

main section.productDetails section.productDetailsArea {
    display: flex;
    flex-direction: row;
    gap: 50px
}

main section.productDetails section.productDetailsArea div {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 25px
}

main section.productDetails section.productDetailsArea div.photoGallery {
    display: flex;
    flex-direction: column;
    gap: 20px
}

main section.productDetails section.productDetailsArea div.productContent {
    position: sticky;
    top: 50px
}

main section.productDetails section.productDetailsArea div.photoGallery div.gallery {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10%;
    overflow-y: scroll
}

main section.productDetails section.productDetailsArea div.photoGallery div.gallery img {
    width: 100px;
    height: 100px;
    object-fit: cover
}

main section.outProjects div.productContent div.text div.tabArea,
main section.productDetails section.productDetailsArea div div.tabArea {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    position: relative
}

main section.outProjects div.productContent div.text div.tabArea p,
main section.productDetails section.productDetailsArea div div.tabArea p {
    cursor: pointer
}

main section.outProjects div.productContent div.text div.tabArea p.active,
main section.productDetails section.productDetailsArea div div.tabArea p.active {
    font-weight: 500
}

main section.blogPage div.article div.text span::after,
main section.catalog div.catalogList div.text span::after,
main section.outProjects div.productContent div.text div.tabArea::after,
main section.productDetails section.productDetailsArea div div.tabArea::after {
    content: "";
    position: absolute;
    width: 60%;
    height: 5px;
    bottom: -10px;
    background: linear-gradient(to right, #ae8550 0, #f6eaa6 100%)
}

main section.productDetails section.productDetailsArea div picture {
    width: 100%;
    height: 500px;
    overflow: hidden
}

main section.productDetails section.productDetailsArea div h1,
main section.productDetails section.productDetailsArea div h2 {
    font-size: 56px;
    font-weight: 300;
    text-transform: capitalize
}

main section.productDetails section.productDetailsArea div.productContent>p {
    font-size: 18px;
    line-height: 1.5em;
    display: none
}

main section.productDetails section.productDetailsArea div.productContent>p.active {
    display: flex
}

main section.catalog,
main section.collectionList,
main section.outProjects,
main section.relatedProducts,
main section.tables {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 50px
}

main section.relatedProducts div.relatedProducts {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 50px 2%
}

main section.relatedProducts div.relatedProducts a {
    width: 32%;
    display: flex;
    flex-direction: column;
    gap: 20px
}

main section.relatedProducts div.relatedProducts a div.item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px
}

main section.relatedProducts div.relatedProducts div.item h3 {
    font-size: 30px;
    font-weight: 300;
    text-transform: capitalize
}

main section.collectionList div.collectionList {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px 2%
}

main section.collectionList div.collectionList a.item,
main section.collectionList div.collectionList div.item {
    width: 32%;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative
}

main section.collectionList div.collectionList a.item::before,
main section.collectionList div.collectionList div.item::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .6)
}

main section.collectionList div.collectionList a.item h3,
main section.collectionList div.collectionList div.item h3 {
    width: 80%;
    font-size: 40px;
    color: var(--white);
    text-align: center;
    font-weight: 300;
    text-transform: capitalize
}

main section.outProjects section.outProjectList {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px
}

main section.outProjects div.tabArea a.btn {
    font-size: 14px;
    padding: 10px 30px;
    transition-duration: .5s
}

main section.outProjects div.productContent {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5%
}

main section.outProjects div.productContent picture {
    width: 40%;
    height: 400px;
    overflow: hidden
}

main section.outProjects div.productContent div.text {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 25px
}

main section.outProjects div.productContent div.text>p {
    display: none
}

main section.outProjects div.productContent div.text>p.active {
    display: block;
    line-height: 1.5em
}

main section.outProjects div.productContent h3 {
    font-size: 50px;
    font-weight: 300;
    text-transform: capitalize
}

main section.blogPage,
main section.blogPage div.blogList {
    display: flex;
    flex-direction: column;
    gap: 50px
}

main section.blogPage div.article {
    border: 1px solid var(--color);
    padding: 50px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 5%
}

main section.blogPage div.article picture,
main section.catalog div.catalogList picture {
    width: 35%;
    height: 300px;
    overflow: hidden
}

main section.blogPage div.article div.text {
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 25px
}

main section.blogPage div.article div.text h2,
main section.catalog div.catalogList div.text h2 {
    font-size: 55px;
    width: 100%;
}

main section.blogPage div.article div.text span,
main section.catalog div.catalogList div.text span {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 15px;
    position: relative
}

main section.blogPage div.article div.text p,
main section.catalog div.catalogList div.text p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5em
}

main section.blogPage div.article div.text a.btn,
main section.catalog div.catalogList div.text a.btn {
    font-size: 14px;
    padding: 15px 50px
}

main section.catalog div.catalogList {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 25px
}

main section.catalog div.catalogList div.item {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid var(--color);
    padding: 50px;
    gap: 5%
}

main section.catalog div.catalogList div.text {
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 50px
}

main section.contact {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 50px
}

main section.contact div.contactArea {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 50px
}

main section.contact div.contactArea div {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 15px
}

main section.contact div.contactArea div p {
    width: 90%
}

main section.contact div.contactArea div p:first-child {
    font-weight: 600
}

main section.contact form {
    padding: 50px;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 70%;
    gap: 25px;
    z-index: 10
}

main section.contact form div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 25px
}

main section.contact form input,
main section.contact form textarea {
    border: 1px solid var(--color);
    padding: 10px 30px;
    width: 100%;
    font-family: inherit;
    outline: 0;
    font-size: 16px
}

main section.contact form textarea {
    min-height: 200px;
    max-height: 400px;
    resize: vertical
}

main section.contact form button {
    border: 1px solid var(--color);
    padding: 15px 80px;
    background-color: var(--color);
    color: var(--white);
    font-size: 16px;
    display: inline-block;
    cursor: pointer
}

main section.contact form button:hover {
    background-color: var(--white);
    color: var(--color)
}

main section.map {
    width: 100%;
    height: 500px;
    padding: 0
}

main section.contact+section.map {
    margin-top: -10%
}

main section.map iframe {
    width: 100%;
    height: 100%
}

main section.tables div.tableList {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    flex-wrap: wrap;
    gap: 50px 5%
}

main section.tables div.tableList a {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 25px
}

main section.tables div.tableList a div.item {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 25px
}

main section.tables div.tableList>div.item {
    width: 30%
}

main section.tables div.tableList div.item picture {
    width: 100%;
    height: 400px;
    overflow: hidden;
    display: block
}

main section.tables div.tableList div.item h3 {
    width: max-content;
    font-size: 30px;
    font-weight: 300;
    text-transform: capitalize
}

article section.zPattern {
    background-color: #FFFFFF !important;
}

footer {
    width: 100%;
    padding: 100px 10%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--color);
    position: relative
}

footer div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 25px
}

footer div span {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px
}

footer div nav.socialMedia {
    display: flex;
    flex-direction: row
}

footer div nav.socialMedia a {
    padding: 8px
}

footer div nav.socialMedia a img {
    width: auto;
    height: 20px
}

footer div img.logo {
    width: 50%;
    height: auto;
    object-fit: cover;
    display: block
}

footer div h3,
footer div h4 {
    font-weight: 600;
    color: var(--white)
}

footer div a,
footer div p {
    color: var(--white)
}

footer a.copyright {
    position: absolute;
    bottom: 50px;
    left: 10%
}

footer a.copyright img {
    width: 50px;
    height: auto;
    filter: invert(1)
}

@media (max-width:576px) {
    a.btn {
        font-size: 14px;
        padding: 15px 60px
    }

    header {
        padding: 20px 5%
    }

    header.active {
        background-color: var(--color);
        padding: 10px 5%
    }

    header div,
    header nav.mainMenu {
        display: none
    }

    header a.logo {
        width: auto;
        z-index: 99
    }

    header a.logo img {
        width: auto;
        height: 40px
    }

    header.active a.logo img {
        height: 35px
    }

    header span.mobileMenu {
        width: 35px;
        height: 35px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        transition-duration: .5s
    }

    header span.mobileMenu span {
        width: 100%;
        height: 1px;
        background-color: var(--white);
        z-index: 99;
        transition-duration: .5s
    }

    header span.mobileMenu.active span:nth-child(2) {
        display: none;
        transition-duration: .5s
    }

    header span.mobileMenu.active span:first-child {
        transform: rotate(45deg) translate(10%, 410%);
        transition-duration: .5s
    }

    header span.mobileMenu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(10%, -400%);
        transition-duration: .5s
    }

    header nav.mainMenu.active {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: var(--color);
        gap: 25px;
        z-index: 10;
        transition-duration: .5s
    }

    main section.parallax,
    main>section {
        padding: 50px 5%
    }

    main section.pageHeader h1 {
        font-size: 48px
    }

    main section.slider h1 {
        font-size: 50px;
        text-align: center
    }

    main section.zPattern {
        flex-direction: column-reverse;
        padding: 50px 5%;
        gap: 50px;
        margin-bottom: unset
    }

    main section.blogPage div.article picture,
    main section.catalog div.catalogList picture,
    main section.collectionList div.collectionList a.item,
    main section.collectionList div.collectionList div.item,
    main section.outProjects div.productContent div.text,
    main section.productDetails section.productDetailsArea div,
    main section.productDetails section.productDetailsArea div.photoGallery,
    main section.relatedProducts div.relatedProducts a,
    main section.relatedProducts div.relatedProducts div.item,
    main section.tables div.tableList a,
    main section.tables div.tableList div.item,
    main section.zPattern div {
        width: 100%
    }

    main section.blogPage h1,
    main section.blogPage h2,
    main section.catalog h1,
    main section.catalog h2,
    main section.collectionList h1,
    main section.collectionList h2,
    main section.contact h1,
    main section.contact h2,
    main section.faq h1,
    main section.faq h2,
    main section.outProjects h1,
    main section.outProjects h2,
    main section.relatedProducts h2,
    main section.tables h1,
    main section.tables h2,
    main section.zPattern div h1,
    main section.zPattern div h2 {
        width: 100%;
        font-size: 60px
    }

    main section.zPattern picture {
        width: 100%;
        height: 400px;
        border: none;
        transform: unset
    }

    main section.parallax h2 {
        font-size: 60px
    }

    main section.collections div.items div.item {
        width: 300px
    }

    main section.blogPage div.article div.text,
    main section.faq div details summary {
        width: 90%
    }

    main section.contact form div,
    main section.productDetails section.productDetailsArea,
    main section.tables div.tableList {
        flex-direction: column
    }

    main section.relatedProducts div.relatedProducts {
        width: 100%;
        flex-direction: column;
        gap: 50px
    }

    main section.productDetails section.productDetailsArea div picture {
        height: auto
    }

    main section.productDetails section.productDetailsArea div picture img {
        object-fit: contain
    }

    main section.collectionList div.collectionList {
        gap: 8px 2%
    }

    main section.collectionList div.collectionList div.item {
        width: 48%;
        height: 200px
    }

    main section.collectionList div.collectionList div.item h3 {
        font-size: 30px
    }

    main section.outProjects div.tabArea {
        display: flex;
        flex-direction: row;
        gap: 10px;
        flex-wrap: wrap
    }

    main section.outProjects section.outProjectList {
        gap: 100px
    }

    main section.contact div.contactArea,
    main section.outProjects div.productContent {
        flex-direction: column;
        gap: 25px
    }

    main section.outProjects div.productContent picture {
        width: 100%;
        height: 200px
    }

    main section.blogPage div.article {
        flex-direction: column;
        padding: 0 0 25px;
        gap: 25px
    }

    main section.blogPage div.article div.text h2 {
        font-size: 45px
    }

    main section.blogPage div.article div.text h2.blog {
        font-size: 36px;
    }

    footer div a,
    footer div p,
    main section.blogPage div.article div.text p {
        font-size: 14px
    }

    main section.catalog div.catalogList div.item {
        padding: 0;
        flex-direction: column
    }

    main section.catalog div.catalogList div.text,
    main section.contact form {
        width: 100%;
        padding: 25px
    }

    main section.contact div.contactArea div a,
    main section.contact p {
        font-size: 14px;
        line-height: 1.5em
    }

    main section.contact form button {
        font-size: 14px;
        width: 100%
    }

    main section.contact+section.map {
        margin-top: -30%
    }

    footer {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 100px 5%;
        gap: 50px
    }

    footer div {
        justify-content: center;
        align-items: center;
        gap: 15px
    }

    footer div span {
        justify-content: center;
        align-items: center
    }

    footer a.copyright {
        position: relative;
        bottom: unset;
        left: unset
    }
}