<footer class="footer-wrapper">
    <div class="footer">
        <div class="footer-top">
            <div class="footer-top-top">
                <div class="footer-top-top-left">
                    Join more than <span style="color: #D4D85D;">8 million<br>learners</span> worldwide
                </div>
                <div class="footer-top-top-right">
                    Start Learning For Free
                </div>
            </div>
            <div class="footer-top-bottom">
                <img class="footer-top-bottom-left" src="{{ current_school.logo_url }}">
                <div class="footer-top-bottom-right">
                    <span>Follow us on social media</span>
                    {% for social in website_footer.social_media_links %}
                        <a class="footer-social" href="{{ social.link }}">
                            <i class="fab fa-{{ social.name }}"></i>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="footer-mid container">
            <div class="row" style="width: 100%; justify-content: space-between;">
                <div class="footer-mid-left col-7 row">
                    <div class="footer-mid-column col">
                        <div class="footer-mid-column-title">
                            About
                        </div>
                        <a class="footer-item" href="">
                            About Us
                        </a>
                        <a class="footer-item" href="">
                            Learner Stories
                        </a>
                        <a class="footer-item" href="">
                            Careers
                        </a>
                        <a class="footer-item" href="">
                            Press
                        </a>
                        <a class="footer-item" href="">
                            Leadership
                        </a>
                        <a class="footer-item" href="">
                            Contact Us
                        </a>
                    </div>

                    <div class="footer-mid-column col">
                        <div class="footer-mid-column-title">
                            Categories
                        </div>
                        <a class="footer-item" href="">
                            Development
                        </a>
                        <a class="footer-item" href="">
                            Business
                        </a>
                        <a class="footer-item" href="">
                            Finance & Accounting
                        </a>
                        <a class="footer-item" href="">
                            IT & Software
                        </a>
                        <a class="footer-item" href="">
                            Office Productivity
                        </a>
                        <a class="footer-item" href="">
                            Design
                        </a>
                        <a class="footer-item" href="">
                            Marketing
                        </a>
                    </div>

                    <div class="footer-mid-column col">
                        <div class="footer-mid-column-title"></div>
                        <a class="footer-item" href="">
                            Lifestyle
                        </a>
                        <a class="footer-item" href="">
                            Photography & Video
                        </a>
                        <a class="footer-item" href="">
                            Health & Fitness
                        </a>
                        <a class="footer-item" href="">
                            Music
                        </a>
                        <a class="footer-item" href="">
                            UX Design
                        </a>
                        <a class="footer-item" href="">
                            Seo
                        </a>
                    </div>
                </div>
                <div class="footer-mid-right col-5 row">
                    <div class="footer-mid-column col">
                        <div class="footer-mid-column-title">
                            Support
                        </div>
                        <a class="footer-item" href="">
                            Documentation
                        </a>
                        <a class="footer-item" href="">
                            FAQS
                        </a>
                        <a class="footer-item" href="">
                            Dashboard
                        </a>
                        <a class="footer-item" href="">
                            Contact
                        </a>
                    </div>
                    <div class="footer-mid-column col">
                        <div class="footer-mid-column-title">
                            Get in touch
                        </div>
                        <div class="footer-item">
                            We don’t send spam so don’t worry.
                        </div>
                        <form class="footer-form">
                            <input class="footer-input" placeholder="Email...">
                            <button class="footer-form-button">
                                Submit
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="footer-bottom-left">
                © {{ "now" | date: "%Y" }} Educrat. All Right Reserved.
            </div>
            <div class="footer-bottom-right">
                <a class="footer-item" href="">
                    Help
                </a>
                <a class="footer-item" href="">
                    Privacy Policy
                </a>
                <a class="footer-item" href="">
                    Cookie Notice
                </a>
                <a class="footer-item" href="">
                    Security
                </a>
                <a class="footer-item" href="">
                    Terms of Use
                </a>
            </div>
        </div>
    </div>
</footer>

<style>
    .footer-wrapper {
        background: #563150;
        padding: 30px 0;
        display: flex;
    }

    .footer {
        width: 92%;
        max-width: 1400px;
        margin: auto;
    }

    .footer > * {
        color: white;
    }

    .footer-top-top, .footer-top-bottom, .footer-mid, .footer-bottom {
        display: flex;
        justify-content: space-between;
        padding: 30px 0;
    }

    .footer-top, .footer-mid {
        border-bottom: 1px solid rgba(255, 255, 255, .15);
    }

    .footer-top-top-left {
        margin: auto 0;
        font-weight: 700;
        font-size: 1.8rem;
    }

    .footer-top-top-right {
        color: #563150;
        background: #D4D85D;
        border: 2px solid #D4D85D;
        border-radius: 8px;
        padding: 12px 20px;
        height: min-content;
    }

    .footer-top-top-right:hover {
        background: none;
        color: #D4D85D;
    }

    .footer-top-bottom-right {
        margin: auto 0;
    }

    .footer-top-bottom-right > * {
        margin: auto 10px;
    }

    .footer-mid {
        max-width: none;
    }

    .footer-mid-right.col-5.row, .footer-mid-right.col-5.row > .footer-mid-column.col:last-child {
        padding-right: 0;
    }

    .footer-mid-column {
        display: flex;
        flex-direction: column;
    }

    .footer-mid-column .footer-item {
        line-height: 1.6rem;
        padding: 5px 0;
    }

    .footer-mid-column-title {
        height: 50px;
        text-transform: uppercase;
        font-size: 1.1rem;
        font-weight: 500;
    }

    .footer-form {
        background: white;
        border-radius: 100px;
        display: flex;
        flex-wrap: nowrap;
        margin-top: 15px;
        justify-content: space-between;
        width: inherit;
    }

    .footer-input {
        border: none;
        padding-left: 22px;
        background: none;
        outline: none;
        max-width: 180px;
        width: inherit;
    }

    .footer-form-button {
        border-radius: 100px;
        padding: 8px 12px;
        border: none;
        background: #6440fb;
        color: #fff;
        margin: 8px;
    }

    .footer-bottom-right > .footer-item {
        margin: auto 6px;
    }
</style>
