footer forever

<style>

/* --- Footer General Styles --- */

.raver-dogs-footer {

    background-color: #050205; /* A near-black to match the dark vibe */

    color: #CCCCCC;

    padding: 60px 0 0 0;

    font-family: "brandon-grotesque", sans-serif;

    font-weight: 400;

    font-size: 16px;

    border-top: 1px solid #222222;

}

/* --- Footer 3-Column Layout --- */

.footer-container {

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap; /* Allows columns to stack on mobile */

    gap: 40px; /* Space between columns */

}

.footer-column {

    flex: 1;

    min-width: 250px; /* Prevents columns from getting too squished */

}

/* --- Column Content Styling --- */

.footer-column h4 {

    color: #FFFFFF;

    font-weight: 700;

    font-size: 18px;

    margin-bottom: 20px;

    text-transform: uppercase;

    letter-spacing: 1px;

}

.footer-column ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.footer-column ul li {

    margin-bottom: 12px;

}

.footer-column a {

    color: #CCCCCC;

    text-decoration: none;

    transition: color 0.3s ease;

}

.footer-column a:hover {

    color: #FF03E6; /* Your signature "Purpink" */

}

/* --- Social Media Icons --- */

.social-icons a {

    display: inline-block;

    margin-right: 15px;

    font-size: 24px; /* You can replace this with actual icons */

}

/* --- Newsletter Form Styling --- */

.footer-newsletter p {

    margin-bottom: 20px;

    line-height: 1.5;

}

.newsletter-form input[type="email"] {

    width: 100%;

    padding: 12px;

    background-color: #1a1a1a;

    border: 1px solid #444444;

    border-radius: 5px;

    color: #FFFFFF;

    margin-bottom: 10px;

}

.newsletter-form button {

    width: 100%;

    padding: 12px;

    background-color: #FF03E6; /* Purpink */

    color: #FFFFFF;

    border: none;

    border-radius: 5px;

    font-weight: 700;

    text-transform: uppercase;

    cursor: pointer;

    transition: background-color 0.3s ease;

}

.newsletter-form button:hover {

    background-color: #FFFFFF;

    color: #000000;

}

/* --- Bottom Copyright Bar --- */

.footer-bottom {

    text-align: center;

    padding: 20px 0;

    margin-top: 40px;

    border-top: 1px solid #222222;

    font-size: 14px;

    color: #888888;

}

/* --- Responsive Styling for Mobile --- */

@media (max-width: 768px) {

    .footer-container {

        flex-direction: column; /* Stack columns on top of each other */

    }

    .footer-column {

        min-width: 100%; /* Each column takes full width */

    }

}

</style>

<footer class="raver-dogs-footer">

    <div class="footer-container">

        <div class="footer-column">

            <h4>Navigate</h4>

            <ul>

                <li><a href="/">Home</a></li>

                <li><a href="/shop">Shop</a></li>

                <li><a href="/doggyography">Doggyography</a></li>

                <li><a href="/training">Training</a></li>

                <li><a href="/contact">Contact</a></li>

            </ul>

        </div>

        <div class="footer-column">

            <h4>Follow The Pack</h4>

            <div class="social-icons">

                <a href="#" target="_blank" title="Instagram">IG</a>

                <a href="#" target="_blank" title="TikTok">TT</a>

                <a href="#" target="_blank" title="Facebook">FB</a>

                <a href="#" target="_blank" title="YouTube">YT</a>

            </div>

        </div>

        <div class="footer-column footer-newsletter">

            <h4>Join The Pack</h4>

            <p>Get exclusive drops, event info, and pack-only perks delivered straight to your inbox.</p>

            <form class="newsletter-form">

                <input type="email" placeholder="Your Email Address" required>

                <button type="submit">Subscribe</button>

            </form>

        </div>

    </div>

    <div class="footer-bottom">

        <p>© 2025 Raver Dogs. All Rights Reserved.</p>

    </div>

</footer>