    <div class="fix-area">
        <div class="offcanvas__info">
            <div class="offcanvas__wrapper">
                <div class="offcanvas__content">
                    <div class="offcanvas__top mb-[clamp(16px,1.26vw,24px)] flex justify-between items-center">
                        <div class="offcanvas__logo">
                            <a href="/">
                                <img src="logo.png" style="height: 40px; width: auto;" alt="logo-img">
                            </a>
                        </div>
                        <div class="offcanvas__close">
                            <button>
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>

                    <div class="mobile-menu fix mb-[clamp(10px,0.84vw,16px)]"></div>

                    <div class="offcanvas__contact">
                        <h4 class="n900-clr font-bold text-[19px] text-primary">Contact Info</h4>
                        <ul class="grid gap-[clamp(5px,0.42vw,8px)] mb-[clamp(24px,2.52vw,48px)]">
                            <li class="flex items-center">
                                <div class="offcanvas__contact-icon mr-[clamp(10px,0.79vw,15px)]">
                                    <i class="fal fa-envelope"></i>
                                </div>
                                <div class="offcanvas__contact-text">
                                    <a href="mailto:cooperativeinvestmentinitiativ@gmail.com">cooperativeinvestment<BR/>initiativ@gmail.com</a>
                                </div>
                            </li>
                            <li class="flex items-center">
                                <div class="offcanvas__contact-icon mr-[clamp(10px,0.79vw,15px)]">
                                    <i class="far fa-phone"></i>
                                </div>
                                <div class="offcanvas__contact-text">
                                    <a href="tel:+2349044849753">+234 904 484 9753</a>
                                </div>
                            </li>
                            <li class="flex items-center">
                                <div class="offcanvas__contact-icon mr-[clamp(10px,0.79vw,15px)]">
                                    <i class="far fa-phone"></i>
                                </div>
                                <div class="offcanvas__contact-text">
                                    <a href="tel:+2347036496340">+234 703 649 6340</a>
                                </div>
                            </li>
                        </ul>
                        <div class="header-button mt-clamp(16px,1.26vw,24px)">
                            <a href="signup" class="theme-btn p2-bg flex items-center justify-center gap-[clamp(5px,0.42vw,8px)] text-center">
                                <span>
                                    Register Now
                                    <span class="ani-arrow">
                                        <i class="fa-solid fa-arrow-right-long"></i>
                                    </span>
                                </span>
                            </a>
                        </div>
                        <!-- <div class="social-icon flex items-center">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fa-brands fa-instagram"></i></a>
                            <a href="#"><i class="fa-brands fa-pinterest-p"></i></a>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="offcanvas__overlay"></div>

    <!-- Header Section Start -->
    <header id="header-sticky" class="header-section style1 style3 w-full">
        <div class="container !max-w-[clamp(0px,92.75vw,1765px)] mx-auto">
            <div class="mega-menu-wrapper">
                <div class="header-main">
                    <div class="header-left">
                        <div class="logo">
                            <a href="index" class="header-logo">
                                <img src="logo.png" style="height:40px; width: auto;" alt="CII - Cooperative Investment Initiative" >
                            </a>
                        </div>
                    </div>
                    <div class="header-right flex justify-end items-center">
                        <div class="mean__menu-wrapper">
                            <div class="main-menu">
                                <nav id="mobile-menu">
                                    <ul>
                                        <li class="active">
                                            <a href="index">Home</a>
                                        </li>
                                        <li>
                                            <a href="about">About</a>
                                        </li>
                                        <li>
                                            <a href="gallery">Gallery</a>
                                        </li>
                                        <!-- <li>
                                            <a href="services">Services</a>
                                        </li> -->
                                        <!-- <li>
                                            <a href="faqs">FAQ</a>
                                        </li> -->
                                        <li>
                                            <a href="contact">Contact</a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                        <div class="flex items-center gap-[clamp(10px,0.84vw,16px)]">
                            <a href="#0" class="search-trigger hidden lg:flex search-icon theme-clr4 hover-svg w-[clamp(43px,2.52vw,48px)] aspect-square bg-white rounded-full items-center justify-center">
                                <i class="fa-solid fa-magnifying-glass black"></i>
                            </a>
                            <div class="header__hamburger hidden lg:block my-auto">
                                <div class="sidebar__toggle">
                                    <img src="assets/img/icon/bars.png" alt="icon">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="header-hamburger-inner flex items-center lg:hidden">
                        <div class="dropdown">
                            <!-- <button class="font-medium flex items-center gap-[clamp(5px,0.42vw,8px)] black-clr" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="w-[clamp(30px,1.89vw,36px)] aspect-square flex items-center justify-center rounded-full shadow-[0px_16px_48px_0px_#0000002D] bg-white ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M11.9989 17C15.6613 17 18.8639 18.5751 20.606 20.9247L18.764 21.796C17.3463 20.1157 14.8463 19 11.9989 19C9.15151 19 6.65155 20.1157 5.23382 21.796L3.39258 20.9238C5.13479 18.5747 8.33699 17 11.9989 17ZM11.9989 2C14.7603 2 16.9989 4.23858 16.9989 7V10C16.9989 12.6888 14.8766 14.8818 12.2158 14.9954L11.9989 15C9.2375 15 6.99893 12.7614 6.99893 10V7C6.99893 4.31125 9.12123 2.11818 11.782 2.00462L11.9989 2ZM11.9989 4C10.4012 4 9.09526 5.24892 9.00402 6.82373L8.99893 7V10C8.99893 11.6569 10.342 13 11.9989 13C13.5966 13 14.9026 11.7511 14.9938 10.1763L14.9989 10V7C14.9989 5.34315 13.6557 4 11.9989 4Z" fill="#333333" />
                                    </svg>
                                </span>
                                Login
                            </button> -->
                            <ul class="dropdown-menu hidden">
                                <li><button class="dropdown-item" type="button">Logout</button></li>
                            </ul>
                        </div>
                        <a href="signup" class="et-btn et-3-btn bg-black">
                            Register Now
                            <i class="fa-solid fa-arrow-right fz-14" style="transform: rotate(-40deg);"></i>
                        </a>
                        <div class="header__hamburger my-auto hidden lg:block">
                            <div class="sidebar__toggle">
                                <img src="assets/img/icon/bars.png" alt="icon">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
