footer {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

footer .contact-form {
    padding: 100px 0 40px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: start;
    background: var(--olive-ultra-light, #E6F4EC);

    h2 {
        color: var(--coffee-light, #966046);
        font-family: Poppins;
        font-size: var(--small, 14px);
        font-style: normal;
        line-height: normal;
        text-transform: uppercase;
    }

    h1 {
        color: var(--text, #1A1414);
        font-family: Castoro;
        font-size: var(--h1, 50px);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .contact-info {
        background-repeat: no-repeat;
        background-position: center right;
        background-size: contain;

        display: flex;
        padding-right: 40px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 10px;
        flex: 1 0 0;
        align-self: stretch;

        .contact-info-wrapper {
            display: flex;
            width: 300px;
            flex-direction: column;
            align-items: center;
            gap: 40px;

            .contact-card {
                display: flex;
                padding: 40px;
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
                align-self: stretch;
    
                border-radius: 6px;
                background: #FFF;

                h1 {
                    font-size: var(--h4, 28px);
                }

                a {
                    color: var(--coffee-light, #966046);
                    font-family: Poppins;
                    font-size: var(--body, 16px);
                    font-style: normal;
                    line-height: normal;
                }
            }
        }
    }

    .contact-form-container {
        flex: 1 0 0;
        margin: 0 20px 0 0;

        .contact-form-wrapper {
            width: 615px;
            max-width: 100%;

            .wpforms-container {
                width: 100%;
            }
        }
    }

    @media screen and (max-width: 1024px) {
        padding: 60px 10vw;
        flex-direction: column;
        align-items: center;
        gap: 80px;

        .contact-info {
            background-image: none !important;

            padding: 0;
            align-items: flex-start;

            .contact-info-wrapper {
                flex-direction: 1 0 0;
                width: 100%;
                gap: 20px;
                padding: 0;

                text-align: center;

                .contact-card {
                    background: none;
                    padding: 0;
                    align-items: center;
                }
            }
        }

        .contact-form-container {
            padding: 0;
            
            .contact-form-wrapper {
                width: 100%;

                h1, h2 {
                    text-align: center;
                }
            }
        }
    }
}

.instagram-feed {
    width: 100%;

    #sb_instagram {
        padding: 10px 40px;

        #sbi_images {
            padding: 0;
            gap: 2px !important;
        }
    }
}

footer .socials {
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;

    background: var(--olive-light, #96B0A6);

    .socials-wrapper {
        display: flex;
        padding: 10px;
        align-items: center;
        gap: 20px;

        background-repeat: no-repeat;
        background-position: 20% 85%;

        span {
            color: #FFF;
            font-family: Poppins;
            font-size: var(--small, 14px);
            font-style: normal;
            line-height: normal;
        }
        .menu {
            display: flex;
            padding: 20px 0;
            align-items: center;
            gap: 20px;    
            list-style: none;
            padding: 0;
            margin: 0;

            a {
                display: flex;
                justify-content: center;
                align-items: center;
                display: flex;
                width: 60px;
                height: 60px;
                aspect-ratio: 1/1;
                justify-content: center;
                align-items: center;

                border-radius: 1000px;
                background: var(--coffee, #593401);
                
                svg {
                    display: block;
                    height: var(--body, 16px);
                    fill: var(--latte, #EFE9CE);
                }
            }
        }
    }
}

footer .links-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    align-self: stretch;

    background: var(--olive, #1C5551);

    .link-wrapper {
        display: flex;
        width: 1000px;
        max-width: 100%;
        padding: 40px 0px;
        justify-content: space-between;
        align-items: center;
        gap: 10px;

        .logo {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 10px;
            flex: 1 0 0;
            img {
                display: block;
                max-width: 265px;
            }
        }

        .links {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
            flex: 1 0 0;

            h1 {
                color: var(--latte, #EFE9CE);
                font-family: Castoro;
                font-size: var(--h5, 22px);
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }
            .menu {
                display: grid;
                grid-auto-flow: column;
                grid-template-rows: repeat(9, 1fr);
                gap: 6px 40px;
                padding: 20px 0;
                align-items: center; 
                list-style: none;
                padding: 0;
                margin: 0;

                li {
                    display: block;
                    
                    a {
                        color: var(--olive-light, #96B0A6);
                        font-family: Poppins;
                        font-size: var(--body, 16px);
                        font-style: normal;
                        line-height: normal;
                        text-decoration: none;
                    }
                }
            }
        }
    }

    .copyright {
        display: block;
        width: 1000px;
        max-width: 100%;
        box-sizing: border-box;
        padding: 10px 20px;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;

        border-top: 4px solid var(--olive-mid, #336663);

        text-align: center;

        small, a {
            display: inline;
            color: var(--olive-light, #96B0A6);
            font-family: Poppins;
            font-size: var(--body, 16px);
            font-style: normal;
            line-height: normal;
            text-decoration: none;
        }
    }

    @media screen and (max-width: 1024px) {
        .copyright {
            width: 100%;
        }

        .link-wrapper {
            flex-direction: column;
            gap: 100px;
        }
    }

    @media screen and (max-width: 767px) {
        .link-wrapper .links .menu {
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: flex-start;
        }
    }
}