/* =========================================================
   FOOTER
   Secret Allure
========================================================= */


/* =========================================================
   1. FOOTER - GRUNDLAYOUT
========================================================= */

.footer {

    width: 100%;

    padding: 75px 0 0;

    background: #f8eee8;

    border-top: 1px solid rgba(197, 143, 105, .18);

}


/* =========================================================
   2. FOOTER CONTENT
========================================================= */

.footer-content {

    max-width: 1500px;

    margin: 0 auto;

    padding: 0 30px 70px;

    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

    gap: 60px;

    align-items: start;

}


/* =========================================================
   3. FOOTER BRAND
========================================================= */

.footer-brand {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}


/* =========================================================
   4. FOOTER LOGO
========================================================= */

.footer-logo {

    display: block;

    width: 420px;

    height: auto;

    margin-bottom: 18px;

}


/* =========================================================
   5. FOOTER BRAND TEXT
========================================================= */

.footer-brand p {

    margin: 0;

    color: #665d57;

    font-family: "Great Vibes", serif;

    font-size: 1.7rem;

    letter-spacing: .5px;

}


/* =========================================================
   6. FOOTER COLUMNS
========================================================= */

.footer-column,
.footer-social {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}


/* =========================================================
   7. FOOTER HEADINGS
========================================================= */

.footer-column h4,
.footer-social h4 {

    position: relative;

    margin: 0 0 30px;

    padding-bottom: 12px;

    color: #3a302c;

    font-size: 1.25rem;

    font-weight: 500;

    letter-spacing: 3px;

    text-transform: uppercase;

}


/* Kleine Roségold-Linie unter der Überschrift */

.footer-column h4::after,
.footer-social h4::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 58px;

    height: 1px;

    background: #c58f69;

}


/* =========================================================
   8. FOOTER LINKS
========================================================= */

.footer-column a {

    margin-bottom: 13px;

    color: #514842;

    font-family: "Cormorant Garamond", serif;

    font-size: 1.2rem;

    text-decoration: none;

    transition:
        color .3s ease,
        transform .3s ease;

}


.footer-column a:hover {

    color: #c58f69;

    transform: translateX(4px);

}


/* =========================================================
   9. SOCIAL ICONS
========================================================= */

.social-icons {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    max-width: 190px;

}


/* =========================================================
   10. SOCIAL BUTTONS
========================================================= */

.social-icons a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 60px;

    height: 60px;

    border: 1px solid rgba(197, 143, 105, .65);

    border-radius: 50%;

    color: #5b4c44;

    text-decoration: none;

    font-size: 1.2rem;

    transition:
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.social-icons a:hover {

    color: #ffffff;

    background: #c58f69;

    border-color: #c58f69;

    transform: translateY(-3px);

}


/* =========================================================
   11. FOOTER BOTTOM
========================================================= */

.footer-bottom {

    width: 100%;

    padding: 0 30px 28px;

    text-align: center;

}


/* =========================================================
   12. FOOTER TRENNLINIE
========================================================= */

.footer-divider {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    margin-bottom: 22px;

}


/* Linien links und rechts */

.footer-divider::before,
.footer-divider::after {

    content: "";

    flex: 1;

    height: 1px;

    background: rgba(197, 143, 105, .55);

}


/* =========================================================
   13. FOOTER ORNAMENT
========================================================= */

.footer-ornament {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    margin: 0 16px;

    color: #c58f69;

    font-size: 50px;

}


/* =========================================================
   14. COPYRIGHT
========================================================= */

.footer-bottom p {

    margin: 0;

    color: #766c65;

    font-family: "Cormorant Garamond", serif;

    font-size: .9rem;

    letter-spacing: .3px;

}


/* =========================================================
   15. TABLET
========================================================= */

@media (max-width: 950px) {

    .footer-content {

        grid-template-columns:
            1fr
            1fr;

        gap: 55px;

    }

}


/* =========================================================
   16. MOBILE
========================================================= */

@media (max-width: 600px) {

    .footer {

        padding-top: 55px;

    }


    .footer-content {

        grid-template-columns: 1fr;

        gap: 42px;

        padding:
            0 25px 50px;

    }


    .footer-logo {

        width: 190px;

    }


    .footer-column,
    .footer-social {

        align-items: flex-start;

    }


    .social-icons {

        max-width: 220px;

        gap: 12px;

    }


    .social-icons a {

        width: 40px;

        height: 40px;

    }


    .footer-bottom {

        padding:
            0 25px 25px;

    }

}