footer{
    background-color: var(--color-darkslate);
    padding: var(--spacing-ml) 0;
    color: var(--color-white);
    border-top: 2px solid var(--color-gray);
}
.footer-wrapper{
    display: flex;
    flex-direction: column;
    color: var(--color-white);
}

.footer-top{
    display: flex;
}

.footer-contact{
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-30);
    font-family: var(--klavika-bold);
    line-height: 35px;
}
.footer-logo{
    width: 336px;
    max-width: 236px;
}
footer .divider {
    width: 100%;
    height: 2px;
    background-color: var(--color-gray);
}

.footer-links-title{
    margin-bottom: var(--spacing-l);
}

.footer-body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
}

.footer-body .footer-column-with-logo {
    grid-area: 1 / 1 / 2 / 3;
}
.footer-body .footer-column-with-logo .cta-button {

    display: inline-block;

}
.footer-body .footer-columns-wrapper {
    grid-area: 1 / 4 / 2 / 13;
    display: flex;
}

.footer-column.footer-pages {
    display: flex;
    flex-direction: column;
    margin-right: 128px;
}
.footer-column.footer-pages a {
    margin-bottom: 12px;
    color: var(--color-white);
   display: flex;
    font-size: var(--navigation-footer-font-size);
    line-height: var(--navigation-footer-line-height);
    font-family: var(--poppins-regular);
}
ul.social-links {
    display: flex;
}
ul.social-links li a{
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 29px;
    height: 32px;
    width: 32px;
    display: block;
    background-color: var(--color-white);
    margin-right: 28px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
ul.social-links li a.facebook{
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.375" height="32.179" viewBox="0 0 32.375 32.179"><path d="M32.937,16.75A16.187,16.187,0,1,0,14.221,32.741V21.429H10.108V16.75h4.112V13.183c0-4.057,2.415-6.3,6.114-6.3a24.912,24.912,0,0,1,3.624.316v3.982H21.917a2.34,2.34,0,0,0-2.638,2.528V16.75h4.489l-.718,4.679H19.279V32.741A16.193,16.193,0,0,0,32.937,16.75Z" transform="translate(-0.563 -0.563)" /></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.375" height="32.179" viewBox="0 0 32.375 32.179"><path d="M32.937,16.75A16.187,16.187,0,1,0,14.221,32.741V21.429H10.108V16.75h4.112V13.183c0-4.057,2.415-6.3,6.114-6.3a24.912,24.912,0,0,1,3.624.316v3.982H21.917a2.34,2.34,0,0,0-2.638,2.528V16.75h4.489l-.718,4.679H19.279V32.741A16.193,16.193,0,0,0,32.937,16.75Z" transform="translate(-0.563 -0.563)" /></svg>');

}
ul.social-links li a.instagram{
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.375" height="32.179" viewBox="0 0 32.375 32.179"><path d="M14.627,9.364a7.5,7.5,0,1,0,7.5,7.5A7.488,7.488,0,0,0,14.627,9.364Zm0,12.375A4.876,4.876,0,1,1,19.5,16.863a4.885,4.885,0,0,1-4.876,4.876ZM24.183,9.057a1.749,1.749,0,1,1-1.749-1.749A1.745,1.745,0,0,1,24.183,9.057Zm4.967,1.775A8.657,8.657,0,0,0,26.787,4.7,8.714,8.714,0,0,0,20.658,2.34C18.243,2.2,11,2.2,8.589,2.34A8.7,8.7,0,0,0,2.46,4.7,8.685,8.685,0,0,0,.1,10.826C-.04,13.241-.04,20.479.1,22.894A8.657,8.657,0,0,0,2.46,29.023a8.725,8.725,0,0,0,6.129,2.363c2.415.137,9.654.137,12.069,0a8.657,8.657,0,0,0,6.129-2.363,8.714,8.714,0,0,0,2.363-6.129c.137-2.415.137-9.647,0-12.062ZM26.03,25.486a4.936,4.936,0,0,1-2.781,2.781c-1.926.764-6.494.587-8.622.587s-6.7.17-8.622-.587a4.936,4.936,0,0,1-2.781-2.781c-.764-1.926-.587-6.494-.587-8.622s-.17-6.7.587-8.622A4.936,4.936,0,0,1,6,5.46C7.93,4.7,12.5,4.873,14.627,4.873s6.7-.17,8.622.587A4.936,4.936,0,0,1,26.03,8.241c.764,1.926.587,6.494.587,8.622S26.793,23.567,26.03,25.486Z" transform="translate(0.005 -2.238)" /></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.375" height="32.179" viewBox="0 0 32.375 32.179"><path d="M14.627,9.364a7.5,7.5,0,1,0,7.5,7.5A7.488,7.488,0,0,0,14.627,9.364Zm0,12.375A4.876,4.876,0,1,1,19.5,16.863a4.885,4.885,0,0,1-4.876,4.876ZM24.183,9.057a1.749,1.749,0,1,1-1.749-1.749A1.745,1.745,0,0,1,24.183,9.057Zm4.967,1.775A8.657,8.657,0,0,0,26.787,4.7,8.714,8.714,0,0,0,20.658,2.34C18.243,2.2,11,2.2,8.589,2.34A8.7,8.7,0,0,0,2.46,4.7,8.685,8.685,0,0,0,.1,10.826C-.04,13.241-.04,20.479.1,22.894A8.657,8.657,0,0,0,2.46,29.023a8.725,8.725,0,0,0,6.129,2.363c2.415.137,9.654.137,12.069,0a8.657,8.657,0,0,0,6.129-2.363,8.714,8.714,0,0,0,2.363-6.129c.137-2.415.137-9.647,0-12.062ZM26.03,25.486a4.936,4.936,0,0,1-2.781,2.781c-1.926.764-6.494.587-8.622.587s-6.7.17-8.622-.587a4.936,4.936,0,0,1-2.781-2.781c-.764-1.926-.587-6.494-.587-8.622s-.17-6.7.587-8.622A4.936,4.936,0,0,1,6,5.46C7.93,4.7,12.5,4.873,14.627,4.873s6.7-.17,8.622.587A4.936,4.936,0,0,1,26.03,8.241c.764,1.926.587,6.494.587,8.622S26.793,23.567,26.03,25.486Z" transform="translate(0.005 -2.238)" /></svg>');
}
ul.social-links li a.twitter{
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.375" height="32.179" viewBox="0 0 32.375 32.179"><path d="M32.937,16.75A16.187,16.187,0,1,0,14.221,32.741V21.429H10.108V16.75h4.112V13.183c0-4.057,2.415-6.3,6.114-6.3a24.912,24.912,0,0,1,3.624.316v3.982H21.917a2.34,2.34,0,0,0-2.638,2.528V16.75h4.489l-.718,4.679H19.279V32.741A16.193,16.193,0,0,0,32.937,16.75Z" transform="translate(-0.563 -0.563)" /></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.375" height="32.179" viewBox="0 0 32.375 32.179"><path d="M32.937,16.75A16.187,16.187,0,1,0,14.221,32.741V21.429H10.108V16.75h4.112V13.183c0-4.057,2.415-6.3,6.114-6.3a24.912,24.912,0,0,1,3.624.316v3.982H21.917a2.34,2.34,0,0,0-2.638,2.528V16.75h4.489l-.718,4.679H19.279V32.741A16.193,16.193,0,0,0,32.937,16.75Z" transform="translate(-0.563 -0.563)" /></svg>');
}
ul.social-links li a.linkedin{
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.375" height="32.179" viewBox="0 0 32.375 32.179"><path d="M27.153,2.25H2.082A2.1,2.1,0,0,0,0,4.358V29.383a2.1,2.1,0,0,0,2.082,2.108H27.153a2.1,2.1,0,0,0,2.089-2.108V4.358A2.1,2.1,0,0,0,27.153,2.25ZM8.838,27.314H4.5V13.359H8.844V27.314ZM6.671,11.453A2.513,2.513,0,1,1,9.184,8.94a2.514,2.514,0,0,1-2.513,2.513ZM25.084,27.314H20.75V20.526c0-1.619-.033-3.7-2.252-3.7-2.258,0-2.6,1.762-2.6,3.583v6.906H11.56V13.359h4.158v1.906h.059a4.565,4.565,0,0,1,4.106-2.252c4.386,0,5.2,2.892,5.2,6.651Z" /></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32.375" height="32.179" viewBox="0 0 32.375 32.179"><path d="M27.153,2.25H2.082A2.1,2.1,0,0,0,0,4.358V29.383a2.1,2.1,0,0,0,2.082,2.108H27.153a2.1,2.1,0,0,0,2.089-2.108V4.358A2.1,2.1,0,0,0,27.153,2.25ZM8.838,27.314H4.5V13.359H8.844V27.314ZM6.671,11.453A2.513,2.513,0,1,1,9.184,8.94a2.514,2.514,0,0,1-2.513,2.513ZM25.084,27.314H20.75V20.526c0-1.619-.033-3.7-2.252-3.7-2.258,0-2.6,1.762-2.6,3.583v6.906H11.56V13.359h4.158v1.906h.059a4.565,4.565,0,0,1,4.106-2.252c4.386,0,5.2,2.892,5.2,6.651Z" /></svg>');
    margin-top: -2px;
}
ul.social-links li a.xing{
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="29.213" height="34.326" viewBox="0 0 29.213 34.326"><defs><clipPath id="a"><rect width="29.213" height="34.326" transform="translate(0 0)" fill="%23fff"/></clipPath></defs><g clip-path="url(%23a)"><path d="M2.661,54.413a.758.758,0,0,0-.675.309.77.77,0,0,0,.028.759l3.347,5.794a.026.026,0,0,1,0,.028L.1,70.587a.766.766,0,0,0,0,.759.729.729,0,0,0,.647.337H5.7a1.513,1.513,0,0,0,1.35-.956l5.344-9.451c-.02-.033-3.4-5.935-3.4-5.935a1.529,1.529,0,0,0-1.378-.928Z" transform="translate(-0.001 -47.634)" fill="%23fff"/><path d="M101.572,0a1.451,1.451,0,0,0-1.325.943S89.581,19.856,89.23,20.478l7.034,12.905a1.548,1.548,0,0,0,1.383.943h4.945a.732.732,0,0,0,.657-.316.773.773,0,0,0-.01-.765L96.26,20.493a.029.029,0,0,1,0-.033L107.221,1.08a.777.777,0,0,0,.01-.764A.734.734,0,0,0,106.573,0Z" transform="translate(-78.114 0)" fill="%23fff"/></g></svg>') ;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="29.213" height="34.326" viewBox="0 0 29.213 34.326"><defs><clipPath id="a"><rect width="29.213" height="34.326" transform="translate(0 0)" fill="%23fff"/></clipPath></defs><g clip-path="url(%23a)"><path d="M2.661,54.413a.758.758,0,0,0-.675.309.77.77,0,0,0,.028.759l3.347,5.794a.026.026,0,0,1,0,.028L.1,70.587a.766.766,0,0,0,0,.759.729.729,0,0,0,.647.337H5.7a1.513,1.513,0,0,0,1.35-.956l5.344-9.451c-.02-.033-3.4-5.935-3.4-5.935a1.529,1.529,0,0,0-1.378-.928Z" transform="translate(-0.001 -47.634)" fill="%23fff"/><path d="M101.572,0a1.451,1.451,0,0,0-1.325.943S89.581,19.856,89.23,20.478l7.034,12.905a1.548,1.548,0,0,0,1.383.943h4.945a.732.732,0,0,0,.657-.316.773.773,0,0,0-.01-.765L96.26,20.493a.029.029,0,0,1,0-.033L107.221,1.08a.777.777,0,0,0,.01-.764A.734.734,0,0,0,106.573,0Z" transform="translate(-78.114 0)" fill="%23fff"/></g></svg>');
    margin-top: -2px;
}

.copyright p{
    color: var(--color-white);
    font-size: 16px;
    line-height: 21px;
}

.footer-pages img{
    align-self: self-start;
    flex-grow: 0;
    flex-shrink: 0;
}

.footer-contact{

}
.footer-contact {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
}

.footer-contact h3.fc-title { grid-area: 1 / 1 / 2 / 5; }
.footer-contact div { grid-area: 1 / 6 / 2 / 13; }
.footer-contact div h3{
    color: var(--color-green);
}
.footer-contact div h3:first-child{
    margin-bottom: 12px;
}
.footer-bottom{
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    align-items: flex-end;
}

.footer-bottom.copyright br{
    display: none;
}

.footer-bottom .inspired-by-nature{
    display: none;
}
@media (max-width: 480px){

    .footer-contact {
        display: flex;
        grid-column-gap: 12px;
        grid-row-gap: 12px;
    }
    .footer-contact div h3:first-child {
        margin-bottom: 8px;
    }
    .footer-body {
        display: flex;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 24px;
        grid-row-gap: 36px;
        flex-direction: column;
        align-items: center;
    }
    .footer-body .footer-columns-wrapper {
        grid-area: 1 / 4 / 2 / 13;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .footer-column.footer-pages {
        display: flex;
        flex-direction: column;
        margin-right: unset;
    }

    .footer-column.footer-pages {
        display: flex
    ;
        flex-direction: column;
        margin-right: unset;
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    .footer-bottom {
        display: flex;
        color: #ffffff;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
    }
    .footer-bottom p {
        order: 2
    }

    .footer-logo {
        width: auto;
        max-width: 236px;
    }
    .footer-body .footer-column-with-logo {
        grid-area: 1 / 1 / 2 / 3;
        width: 100%;
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

}
@media (min-width: 481px) and (max-width: 860px){

    .footer-contact {
        display: flex;
        grid-column-gap: 12px;
        grid-row-gap: 12px;
    }
    .footer-contact div h3:first-child {
        margin-bottom: 8px;
    }
    .footer-body {
        display: flex;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 24px;
        grid-row-gap: 24px;
        flex-direction: column;
    }


    .footer-bottom {
        display: flex;
        color: #ffffff;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
    }
    .footer-bottom p {
        order: 2
    }
    .footer-body .footer-columns-wrapper {
        grid-area: 1 / 4 / 2 / 13;
        display: flex
    ;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 36px;
    }
    .footer-column.footer-pages {
        display: flex
    ;
        flex-direction: column;
        margin-right: unset;
    }




}
@media (max-width: 850px){

    ul.social-links li a {
        box-sizing: border-box;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50px;
        height: 50px;
        width: 50px;
        display: block;
        background-color: var(--color-white);
        margin-right: 28px;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        mask-size: 100%;
        margin: 0 14px;
    }
    .footer-bottom.copyright br{
        display: block;
    }
    .footer-bottom p {
        order: 2;
        width: 150px;
        margin-top: 36px;
        line-height: 24px;
    }

    .footer-bottom .inspired-by-nature{
        display: block;
        position: relative;
        margin-bottom: 36px;
    }
    .footer-bottom .inspired-by-nature:after{
        display: none;
    }

    .footer-bottom .inspired-by-nature-content{
        position: relative;
    }
}
@media (min-width: 481px) and (max-width: 770px){
    .footer-column.footer-pages {
        display: flex
    ;
        flex-direction: column;
        margin-right: unset;
        width: 50%;
    }

}