<style>
    .__404__number {
        text-align: center;
        color: var(--bs-primary);
        position: relative;
        width: max-content;
        margin: auto;
    }
    .__404__number > div {
        background-color: white;
        padding: 10px 10px 4px;
        font-family: 'Bebas Neue';
        font-size: 50px;
        position: absolute;
        top: 45%;
        left: 50%;
        width: 100%;
        transform: translate(-50%, -50%);
        line-height: 1;
    }
    .box {
        padding: 18vh 0 0;
    }
    .nav-link {
        --bs-nav-link-color: black;
        font-weight: 500;
    }
    .header__mainBtns button:nth-child(2) {
        border-color: #000;
        --bs-btn-color: black;
    }
    .header__mainBtns button:nth-child(2):hover {
        border-color: var(--bs-primary);
       --bs-btn-hover-color: white;
        background-color: var(--bs-primary);
    }
    .header__top button:nth-child(4) span {
        filter: invert(1);
    }
    .header__top button:nth-child(4):hover span {
        filter: invert(0);
    }
    .header__mainBtns button:nth-child(3) {
        display: none;
    }
    h1 {
        font-weight: 400;
        font-size: 350px;
        line-height: 0.6;
    }
    p {
        max-width: 586px;
        margin: auto;
    }
    @media screen and (max-width: 767px) {
        .__404__number {
            width: 100%;
        }
        .__404__number > div {
            font-size: 34px;
        }
        h1 {
            font-size: 200px;
            font-size: clamp(200px, 50vw, 350px);
        }
    }
</style>


<section class="__404 dottedWorldBg py-5">
    <div class="container pt-5">
        <div class="d-flex align-items-center justify-content-center text-center">
            <div class="box">
                <div class="__404__number">
                    <h1>404</h1>
                    <div class="">page not found</div>
                </div>
                <a href="<?php echo base_url(); ?>" class="btn btn-outline-primary btn-arrow btn-arrow-black mt-4">Back To Home<span></span></a>
            </div>
        </div>
    </div>
</section>

<script>
    $(".header__logo, .footer__logo").addClass("color");
</script>