<!doctype html>
<html>


<!-- Mirrored from rudra-tailwind.vercel.app/ by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 08 Nov 2025 13:20:04 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<head>
    <!-- ========== Meta Tags ========== -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Rudra_">
    <meta name="description" content="CCI - A financial cooperative initiative for a better financial future.">
    <!-- ======== Page title ============ -->
    <title>CCI - Financial Cooperative Initiative</title>
    <!--<< Favcion >>-->
    <link rel="shortcut icon" href="assets/img/favicon.phtml">

    <!--<< All Min Css >>-->
    <link rel="stylesheet" href="assets/css/all.min.css">
    <!--<< Animate.css >>-->
    <link rel="stylesheet" href="assets/css/animate.css">
    <!--<< Magnific Popup.css >>-->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!--<< MeanMenu.css >>-->
    <link rel="stylesheet" href="assets/css/meanmenu.css">
    <!--<< Swiper Bundle.css >>-->
    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
    <!--<< Nice Select.css >>-->
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <!--<< Flaticon.css >>-->
    <link rel="stylesheet" href="assets/css/flaticon.css">
    <!--<< Main.css >>-->
    <!-- <link rel="stylesheet" href="assets/css/main.css"> -->
    <link href="assets/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="src/output.css">
</head>

<body>
    <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="index-2.phtml">
                                <h1>CCI</h1>
                            </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">
                                    <i class="fal fa-map-marker-alt"></i>
                                </div>
                                <div class="offcanvas__contact-text">
                                    <a target="_blank" href="#">3517 W. Gray St. Utica, Pennsylvania</a>
                                </div>
                            </li>
                            <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:info@example.com"><span class="mailto:info@example.com">alma.lawson@example.com</span></a>
                                </div>
                            </li>
                            <li class="flex items-center">
                                <div class="offcanvas__contact-icon mr-[clamp(10px,0.79vw,15px)]">
                                    <i class="fal fa-clock"></i>
                                </div>
                                <div class="offcanvas__contact-text">
                                    <a target="_blank" href="#">Sun-friday, 02am -09pm</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:+11002345909">(219) 555-0114</a>
                                </div>
                            </li>
                        </ul>
                        <div class="header-button mt-clamp(16px,1.26vw,24px)">
                            <a href="contact.phtml" class="theme-btn p2-bg flex items-center justify-center gap-[clamp(5px,0.42vw,8px)] text-center">
                                <span>
                                    Get A Quote
                                    <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 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.phtml" class="header-logo">
                                <h1>CCI</h1>
                            </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="has-dropdown active menu-thumb">
                                            <a href="index-2.phtml">
                                                Home
                                            </a>
                                            <ul class="submenu has-homemenu">
                                                <li>
                                                    <div class="homemenu-items">
                                                        <div class="homemenu">
                                                            <div class="homemenu-thumb">
                                                                <img src="assets/img/banner/home1.png" alt="img">
                                                                <div class="demo-button">
                                                                    <a href="index-2.phtml" class="et-btn before:rounded-none !text-center bg-et3primary !text-white">
                                                                        <span>Home 01</span>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <div class="homemenu-content text-center">
                                                                <h4 class="homemenu-title">
                                                                    <a href="index-2.phtml">Home Version 01</a>
                                                                </h4>
                                                            </div>
                                                        </div>
                                                        <div class="homemenu">
                                                            <div class="homemenu-thumb">
                                                                <img src="assets/img/banner/home2.png" alt="img">
                                                                <div class="demo-button">
                                                                    <a href="index-3.phtml" class="et-btn before:rounded-none !text-center bg-et3primary !text-white">
                                                                        <span>Home 02</span>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <div class="homemenu-content text-center">
                                                                <h4 class="homemenu-title">
                                                                    <a href="index-3.phtml">Home Version 02</a>
                                                                </h4>
                                                            </div>
                                                        </div>
                                                        <div class="homemenu">
                                                            <div class="homemenu-thumb">
                                                                <img src="assets/img/banner/home3.png" alt="img">
                                                                <div class="demo-button">
                                                                    <a href="index-4.phtml" class="et-btn before:rounded-none !text-center bg-et3primary !text-white">
                                                                        <span>Home 03</span>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <div class="homemenu-content text-center">
                                                                <h4 class="homemenu-title">
                                                                    <a href="index-4.phtml">Home Version 03</a>
                                                                </h4>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="about.phtml">About us</a>
                                        </li>
                                        <li>
                                            <a href="services.phtml">
                                                Services
                                            </a>
                                            <ul class="submenu">
                                                <li><a href="services.phtml">Service</a></li>
                                                <li><a href="services-details.phtml">Service Details</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="case-details.phtml">
                                                Case
                                            </a>
                                            <ul class="submenu">
                                                <li><a href="case-studies.phtml">Case studies</a></li>
                                                <li><a href="case-details.phtml">Case Details</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="blog.phtml">
                                                Blog
                                            </a>
                                            <ul class="submenu">
                                                <li><a href="blog.phtml">Blog</a></li>
                                                <li><a href="blog-details.phtml">Blog Details</a></li>
                                            </ul>
                                        </li>
                                        <li class="has-dropdown">
                                            <a href="#0">
                                                Pages
                                            </a>
                                            <ul class="submenu">
                                                <li><a href="team.phtml">Team</a></li>
                                                <li><a href="team-details.phtml">Team Details</a></li>
                                                <li><a href="testimonials.phtml">Testimonial</a></li>
                                                <li><a href="faqs.phtml">Faqs</a></li>
                                                <li><a href="pricing-plan.phtml">Pricing Plan</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="contact.phtml">
                                                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 text-primary hover-svg w-[clamp(43px,2.52vw,48px)] aspect-square bg-white rounded-full items-center justify-center hover:bg-primary hover:text-white">
                                <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">
                        <a href="contact.phtml" class="et-btn bg-white text-primary hover:text-white">
                            <span class="icon border border-primary">
                                <i class="fa-solid fa-arrow-right"></i>
                            </span>
                            Contact Us
                        </a>
                        <a href="#0" class="search-trigger search-icon text-primary hover-svg w-[clamp(43px,2.52vw,48px)] aspect-square bg-white rounded-full flex items-center justify-center lg:hidden hover:bg-primary hover:text-white">
                            <i class="fa-solid fa-magnifying-glass black"></i>
                        </a>
                        <div class="flex items-center gap-[clamp(8px,0.84vw,16px)]">
                            <i class="fa-solid fa-phone w-[clamp(43px,2.52vw,48px)] aspect-square rounded-full bg-primary flex text-center content-center text-secondary"></i>
                            <a href="#0" class="font-normal block xl:hidden text-[15px] leading-[1.5] text-[#161616]">
                                24/7 Support <br>
                                <span class="font-semibold text-nowrap text-primary">(++597)678 09876</span>
                            </a>
                        </div>
                        <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>

    <main>
        <!-- BANNER SECTION START -->
        <section class="et-banner relative bg-[url(../assets/img/banner/hero-bg1.png)] bg-cover bg-no-repeat bg-center pt-[clamp(110px,6.73vw,128px)] text-center">
            <div class="et-container relative z-[1]">
                <div class="banner-content">
                    <h1 class="text-primary text-[clamp(60px,4.47vw,85px)] md:text-[clamp(40px,4.47vw,85px)] font-bold leading-[0.94] text-center capitalize transition ease-in-out duration-[400ms]">Building a better<br><span class="font-normal">financial future, together.</span></h1>
                </div>
                <div class="hero-1-video absolute left-0 lg:left-[20px] top-[270px] sm:static">
                    <div class="flex items-center gap-[24px] justify-start sm:justify-center mb-[clamp(16px,1.26vw,24px)] sm:mt-[16px]">
                        <a href="#0" class="video-popup w-[clamp(54px,3.36vw,64px)] aspect-square flex items-center justify-center bg-white border border-[#DEE2E6] rounded-full transition ease-in-out duration-[400ms] text-primary"><i class="fa-solid fa-play"></i></a>
                        <span class="text-primary text-[clamp(14px,0.79vw,15px)] italic font-semibold leading-[1.1] block text-left">Check <br class="sm:hidden"> Intro Video</span>
                    </div>
                    <a href="pricing-plan.phtml" class="et-btn">
                        <span class="icon"><i class="fa-solid fa-arrow-up-right"></i></span>Free Consultation</a>
                </div>
                <div class="hero-thumb1">
                    <img src="assets/img/banner/hero-thumb1.png" alt="img" class="mx-auto !max-w-[clamp(363px,21.70vw,413px)] -mt-[60px] sm:mt-0 xxs:!max-w-full">
                </div>
                <!-- extra img -->
                <div class="hero-right-card absolute right-[40px] top-[200px] sm:hidden">
                    <img src="assets/img/banner/right-card.png" alt="img" class="thumb-big !max-w-[clamp(235px,16.55vw,315px)]">
                    <img src="assets/img/banner/groth.png" alt="img" class="groth-card absolute box-border bottom-[115px] left-[-139px] align-middle animate-[updown_2s_linear_infinite]">
                    <a href="#0" class="absolute flex items-center justify-center box-border bg-white text-primary rounded-full cursor-pointer bottom-[clamp(8px,0.84vw,16px)] left-0 w-[clamp(45px,3.15vw,60px)] aspect-square transition duration-[500ms] hover:bg-primary group">
                        <svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_16_2193)">
                                <path d="M11.6699 21.821L11.7996 21.821C13.9445 18.9709 16.6612 16.1736 19.2531 13.9747L19.1485 13.8449C16.505 15.544 14.389 17.6371 11.8525 20.0932C11.8789 13.5301 12.1661 5.10823 12.4281 0.192561L11.0414 0.192561C11.3034 5.10944 11.617 13.5301 11.6422 20.0956C9.13212 17.7152 6.98609 15.5704 4.31978 13.8473L4.21524 13.9771C6.83109 16.0931 9.52504 18.9709 11.6699 21.821Z" fill="#1C4B42" class="group-hover:fill-white"></path>
                            </g>
                            <defs>
                                <clipPath id="clip0_16_2193">
                                    <rect width="21.6285" height="21.6285" fill="white" transform="translate(22.5488 21.8212) rotate(-180)"></rect>
                                </clipPath>
                            </defs>
                        </svg>
                    </a>
                </div>
                <img src="assets/img/banner/percentage-card.png" alt="img" class="percentage-card absolute left-[clamp(130px,13.66vw,260px)] top-[320px] align-middle -z-[1] max-w-[clamp(228px,14.61vw,278px)] sm:hidden">
            </div>
        </section>
        <!-- BANNER SECTION END -->


        <!-- WHY CHOOSE US SECTION START -->
        <section class="choose-section relative bg-etWhite z-[1]">
            <div class="choose-wrapper-section absolute max-w-[clamp(990px,93.01vw,1770px)] w-full left-1/2 -translate-x-1/2 text-center -z-[1] -top-[clamp(67.812px,5.67vw,107.812px)]  -bottom-[2px]">
                <img src="assets/img/service/choose-bg.png" alt="img" class="h-full w-full">
            </div>
            <div class="et-container">
                <div class="grid grid-cols-2 md:grid-cols-1 gap-y-[20px]">
                    <div class="txt pt-[clamp(46px,3.99vw,76px)]">
                        <p class="text-primary text-[15px] leading-[22.5px] mb-[24px] pb-[4px]">
                            Designed to meet your unique financial needs no matter where you are on your journey designed to
                            meet your unique
                            financial needs no matter where <br> you are on your journey.
                        </p>
                        <div class="choose-content-wrap flex flex-col gap-[clamp(16px,1.26vw,24px)]">
                            <div class="choose-items flex items-center gap-[24px] box-border hover:bg-[#B3E7173D] border border-[#DEE2E6] rounded-[8px] p-[clamp(20px,1.68vw,32px)] duration-[400ms] wow fadeInUp" data-wow-delay=".2s">
                                <img src="assets/img/service/choose-icon1.png" alt="img" class="w-[clamp(53px,2.94vw,56px)] aspect-square rounded-full">
                                <div>
                                    <h4 class="text-primary text-[clamp(17px,1.05vw,20px)] font-bold leading-[1.25] mb-[clamp(5px,0.42vw,8px)]">Most profitable industries</h4>
                                    <p class="text-primary text-[15px]">The financial industry is one of the most profitable industries to invest in today.</p>
                                </div>
                            </div>
                            <div class="choose-items flex items-center gap-[24px] box-border hover:bg-[#B3E7173D] border border-[#DEE2E6] rounded-[8px] p-[clamp(20px,1.68vw,32px)] duration-[400ms] wow fadeInUp" data-wow-delay=".3s">
                                <img src="assets/img/service/choose-icon1.png" alt="img" class="w-[clamp(53px,2.94vw,56px)] aspect-square rounded-full">
                                <div>
                                    <h4 class="text-primary text-[clamp(17px,1.05vw,20px)] font-bold leading-[1.25] mb-[clamp(5px,0.42vw,8px)]">Strong corporate governance</h4>
                                    <p class="text-primary text-[15px]">It has strong cooperate governance in the industry.</p>
                                </div>
                            </div>
                            <div class="choose-items flex items-center gap-[24px] box-border hover:bg-[#B3E7173D] border border-[#DEE2E6] rounded-[8px] p-[clamp(20px,1.68vw,32px)] duration-[400ms] wow fadeInUp" data-wow-delay=".4s">
                                <img src="assets/img/service/choose-icon1.png" alt="img" class="w-[clamp(53px,2.94vw,56px)] aspect-square rounded-full">
                                <div>
                                    <h4 class="text-primary text-[clamp(17px,1.05vw,20px)] font-bold leading-[1.25] mb-[clamp(5px,0.42vw,8px)]">Most regulated sectors</h4>
                                    <p class="text-primary text-[15px]">It is one of the most regulated sectors of the economy.</p>
                                </div>
                            </div>
                            <div class="choose-items flex items-center gap-[24px] box-border hover:bg-[#B3E7173D] border border-[#DEE2E6] rounded-[8px] p-[clamp(20px,1.68vw,32px)] duration-[400ms] wow fadeInUp" data-wow-delay=".5s">
                                <img src="assets/img/service/choose-icon1.png" alt="img" class="w-[clamp(53px,2.94vw,56px)] aspect-square rounded-full">
                                <div>
                                    <h4 class="text-primary text-[clamp(17px,1.05vw,20px)] font-bold leading-[1.25] mb-[clamp(5px,0.42vw,8px)]">Legacy of strength</h4>
                                    <p class="text-primary text-[15px]">It enjoys a legacy of strength and continuity.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="img">
                        <div class="choose-thumb-wrap">
                            <div class="boxes ml-[clamp(0px,3.42vw,65px)] max-w-[clamp(568px,30.01vw,571px)] md:mx-auto">
                                <div class="section-header mb-[clamp(16px,1.26vw,24px)]">
                                    <div class="flex items-center box-border text-secondary text-[clamp(14px,0.79vw,15px)] font-semibold gap-[clamp(5px,0.42vw,8px)] mb-[clamp(5px,0.42vw,8px)]">
                                        <img src="assets/img/icon/section-step1.png" alt="img"> Why Choose Us
                                    </div>
                                    <h2 class="et-section-title wow fadeInUp" data-wow-delay=".4s">
                                        Your Partner in 
                                        <span class="font-light">Financial Success!</span>
                                    </h2>
                                </div>
                                <div class="thumb rounded-[8px] w-full relative z-[1]">
                                    <img src="assets/img/service/why-choose.png" alt="img" class="w-full rounded-3">
                                    <div class="text-circles absolute z-[2] bottom-[clamp(5px,6.67vw,127px)] left-[-60px] sm:left-[20px] rounded-full bg-[#FFFFFFA6] [backdrop-filter:blur(12.9474px)] [fill:#FFFFFFA6] [transform:matrix(1,0,0,1,0,-82)] w-[clamp(161px,8.62vw,164px)] aspect-square">
                                        <img src="assets/img/service/text-circle.png" alt="img" class="circle360 absolute box-border bottom-[-68px] left-[82px] right-[-68px] top-[82px] rounded-full [fill:#FFFFFFA6] [transform:matrix(-0.559549,-0.828797,0.828797,-0.559549,-75,-75)] animate-[circle360_10s_linear_infinite]">
                                        <img src="assets/img/service/txt-tumb.png" alt="img" class="shapee absolute box-border bottom-[24px] left-[82px] right-[26px] top-[82px] align-middle [fill:#FFFFFFA6] [transform:matrix(1,0,0,1,-28,-29)]">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- WHY CHOOSE US SECTION END -->


        <!-- SERVICE SECTION START -->
        <section class="service-section bg-etWhite pn-[clamp(120px,10.51vw,200px)] py-[clamp(60px,5.25vw,100px)]">
            <!-- <div class="pt-100 d-xxl-block d-none"></div> -->
            <div class="et-container">
                <div class="grid grid-cols-2 sm:grid-cols-1 place-items-end sm:place-items-start mb-[clamp(20px,2.10vw,40px)] gap-y-[10px]">
                    <div class="section-left">
                        <div class="section-header">
                            <div class="et-section-sub-title">
                                <img src="assets/img/icon/section-step1.png" alt="img"> Our Services
                            </div>
                            <h2 class="et-section-title wow fadeInUp" data-wow-delay=".3s">
                                Our
                                <span>Services</span>
                            </h2>
                        </div>
                    </div>
                    <div class="section-right">
                        <div class="text-md-end wow fadeInUp" data-wow-delay=".4s">
                            <a href="services.phtml" class="et-btn">
                                <div class="icon">
                                    <i class="fa-solid fa-arrow-up-right"></i>
                                </div>
                                Check All Services
                            </a>
                        </div>
                    </div>
                </div>


                <div class="grid grid-cols-4 md:grid-cols-3 sm:grid-cols-2 xxs:grid-cols-1 gap-[clamp(16px,1.26vw,24px)] *:bg-white *:rounded-2xl *:px-[clamp(16px,1.26vw,24px)] *:transition *:duration-[400ms]">
                    <div class="service-item hover:bg-secondary hover:translate-y-[-8px]">
                        <div class="content flex items-start justify-between gap-[clamp(10px,0.84vw,16px)] py-[clamp(20px,2.10vw,40px)]">
                            <div>
                                <h5 class="mb-[clamp(5px,0.42vw,8px)] text-[clamp(16px,0.95vw,18px)] font-semibold leading-[1.1] text-primary wow fadeInUp" data-wow-delay=".3s">
                                    <a href="services-details.phtml" class="text-inherit hover:text-black inline-block">
                                        Invest in<br>
                                        Parallex Bank
                                    </a>
                                </h5>
                                <span class="text-[14px] font-medium leading-[1.5] text-primary block mb-[4px]">Invest in a stable, safe and most profitable investment vehicle.</span>
                            </div>
                            <a href="services-details.phtml" class="shrink-0 w-[clamp(35px,2.52vw,48px)] aspect-square flex items-center justify-center hover:bg-primary border border-[#dee2e6] hover:border-primary rounded-full text-primary hover:text-white transform-[rotate(-40deg)] transition duration-[400ms]">
                                <i class="fa-solid fa-arrow-right"></i>
                            </a>
                        </div>
                        <div class="thumb w-full overflow-hidden relative">
                            <img src="assets/img/service/service-thumb1.png" alt="img" class="w-full rounded-[8px]">
                            <img src="assets/img/service/service-icon1.png" alt="img" class="service-icon absolute m-[16px] left-0 bottom-0">
                        </div>
                    </div>
                    <div class="service-item hover:bg-secondary hover:translate-y-[-8px]">
                        <div class="content flex items-start justify-between gap-[clamp(10px,0.84vw,16px)] py-[clamp(20px,2.10vw,40px)]">
                            <div>
                                <h5 class="mb-[clamp(5px,0.42vw,8px)] text-[clamp(16px,0.95vw,18px)] font-semibold leading-[1.1] text-primary wow fadeInUp" data-wow-delay=".3s">
                                    <a href="services-details.phtml" class="text-inherit hover:text-black inline-block">
                                        Alternate Saving<br>
                                        Culture
                                    </a>
                                </h5>
                                <span class="text-[14px] font-medium leading-[1.5] text-primary block mb-[4px]">To have an alternate saving culture.</span>
                            </div>
                            <a href="services-details.phtml" class="shrink-0 w-[clamp(35px,2.52vw,48px)] aspect-square flex items-center justify-center hover:bg-primary border border-[#dee2e6] hover:border-primary rounded-full text-primary hover:text-white transform-[rotate(-40deg)] transition duration-[400ms]">
                                <i class="fa-solid fa-arrow-right"></i>
                            </a>
                        </div>
                        <div class="thumb w-full overflow-hidden relative">
                            <img src="assets/img/service/service-thumb2.png" alt="img" class="w-full rounded-[8px]">
                            <img src="assets/img/service/service-icon2.png" alt="img" class="service-icon absolute m-[16px] left-0 bottom-0">
                        </div>
                    </div>
                    <div class="service-item hover:bg-secondary hover:translate-y-[-8px]">
                        <div class="content flex items-start justify-between gap-[clamp(10px,0.84vw,16px)] py-[clamp(20px,2.10vw,40px)]">
                            <div>
                                <h5 class="mb-[clamp(5px,0.42vw,8px)] text-[clamp(16px,0.95vw,18px)] font-semibold leading-[1.1] text-primary wow fadeInUp" data-wow-delay=".3s">
                                    <a href="services-details.phtml" class="text-inherit hover:text-black inline-block">
                                        Build<br>
                                        Wealth
                                    </a>
                                </h5>
                                <span class="text-[14px] font-medium leading-[1.5] text-primary block mb-[4px]">By investing, your money has the potential to earn returns.</span>
                            </div>
                            <a href="services-details.phtml" class="shrink-0 w-[clamp(35px,2.52vw,48px)] aspect-square flex items-center justify-center hover:bg-primary border border-[#dee2e6] hover:border-primary rounded-full text-primary hover:text-white transform-[rotate(-40deg)] transition duration-[400ms]">
                                <i class="fa-solid fa-arrow-right"></i>
                            </a>
                        </div>
                        <div class="thumb w-full overflow-hidden relative">
                            <img src="assets/img/service/service-thumb3.png" alt="img" class="w-full rounded-[8px]">
                            <img src="assets/img/service/service-icon3.png" alt="img" class="service-icon absolute m-[16px] left-0 bottom-0">
                        </div>
                    </div>
                    <div class="service-item hover:bg-secondary hover:translate-y-[-8px]">
                        <div class="content flex items-start justify-between gap-[clamp(10px,0.84vw,16px)] py-[clamp(20px,2.10vw,40px)]">
                            <div>
                                <h5 class="mb-[clamp(5px,0.42vw,8px)] text-[clamp(16px,0.95vw,18px)] font-semibold leading-[1.1] text-primary wow fadeInUp" data-wow-delay=".3s">
                                    <a href="services-details.phtml" class="text-inherit hover:text-black inline-block">
                                        Financial<br>
                                        Discipline
                                    </a>
                                </h5>
                                <span class="text-[14px] font-medium leading-[1.5] text-primary block mb-[4px]">It encourages financial discipline.</span>
                            </div>
                            <a href="services-details.phtml" class="shrink-0 w-[clamp(35px,2.52vw,48px)] aspect-square flex items-center justify-center hover:bg-primary border border-[#dee2e6] hover:border-primary rounded-full text-primary hover:text-white transform-[rotate(-40deg)] transition duration-[400ms]">
                                <i class="fa-solid fa-arrow-right"></i>
                            </a>
                        </div>
                        <div class="thumb w-full overflow-hidden relative">
                            <img src="assets/img/service/service-thumb4.png" alt="img" class="w-full rounded-[8px]">
                            <img src="assets/img/service/service-icon4.png" alt="img" class="service-icon absolute m-[16px] left-0 bottom-0">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- SERVICE SECTION END -->


        <!-- TESTIMONIAL SECTION START -->
        <section class="testimonial-section pb-[clamp(60px,5.25vw,100px)] bg-etWhite">
            <div class="testimonial-wrap max-w-[clamp(1130px,93.01vw,1770px)] pt-[clamp(60px,5.25vw,100px)] bg-[url('assets/img/testimonial/testimonial-bg.png')] bg-center bg-no-repeat bg-cover mx-auto rounded-[clamp(20px,1.58vw,30px)]">
                <div class="et-container">
                    <div class="grid grid-cols-3 sm:grid-cols-1 gap-[clamp(24px,2.52vw,48px)]">
                        <div class="col">
                            <div class="thumb w-full rounded-4 overflow-hidden img-custom-anim-right">
                                <img src="assets/img/testimonial/testimonail-thumb1.png" alt="img" class="rounded-4 w-full">
                            </div>
                        </div>

                        <div class="col-span-2 sm:col-span-1">
                            <div class="swiper testimonial-slider1">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="testimonial-content">
                                            <img src="assets/img/testimonial/quote-arrow.png" alt="img" class="inline mb-[clamp(16px,1.26vw,24px)] pb-[clamp(5px,0.42vw,8px)]">
                                            <h3 class="text-white text-[clamp(16px,1.26vw,24px)] italic font-bold leading-[1.15] mb-[clamp(24px,2.52vw,48px)]">
                                                "CCI has been a game-changer for my financial well-being. Their commitment to the community and their members is truly inspiring. I feel like I'm part of something bigger than just a bank."
                                            </h3>
                                            <div>
                                                <h4 class="mb-[4px] text-white text-[clamp(17px,1.05vw,20px)] font-bold leading-[1.25]">
                                                    Jane D.
                                                </h4>
                                                <span class="text-white inline text-[15px] leading-[2.13]">
                                                    Member since 2020
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center gap-[16px] mt-[clamp(70px,5.25vw,100px)] ml-[clamp(25px,2.63vw,50px)] collapse-area">
                                <img src="assets/img/testimonial/testimi-collapse.png" alt="img">
                                <div class="array-button flex items-center gap-[clamp(10px,0.84vw,16px)] mt-[clamp(16px,1.26vw,24px)]">
                                    <button type="button" class="array-prev w-[clamp(40px,2.36vw,45px)] aspect-square flex items-center justify-center hover:bg-primary rounded-full cursor-pointer p-[8px] transition duration-[500ms] group">
                                        <svg width="28" height="18" viewBox="0 0 28 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M27.3337 10.3334L27.3338 7.66685H5.77123L11.0375 2.40051L9.15191 0.514893L0.666626 9.00019L9.15191 17.4855L11.0375 15.5998L5.77116 10.3335L27.3337 10.3334Z" fill="#1C4B42" fill-opacity="1" class="group-hover:fill-white" />
                                        </svg>
                                    </button>
                                    <button type="button" class="array-next w-[clamp(40px,2.36vw,45px)] aspect-square flex items-center justify-center hover:bg-primary rounded-full cursor-pointer p-[8px] transition duration-[500ms] group">
                                        <svg width="28" height="18" viewBox="0 0 28 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M0.666324 10.3334L0.666138 7.66685H22.2287L16.9624 2.40051L18.848 0.514893L27.3333 9.00019L18.848 17.4855L16.9624 15.5998L22.2288 10.3335L0.666324 10.3334Z" fill="#1C4B42" class="group-hover:fill-white" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- TESTIMONIAL SECTION END -->


        <!-- TEAM SECTION START -->
        <section class="team-section py-[clamp(60px,5.25vw,100px)]">
            <!-- <div class="pt-100 d-xxl-block d-none"></div> -->
            <div class="et-container">
                <div class="grid grid-cols-2 sm:grid-cols-1 place-items-end sm:place-items-start mb-[clamp(20px,2.10vw,40px)] gap-y-[10px]">
                    <div class="section-left">
                        <div class="section-header">
                            <div class="et-section-sub-title"><img src="assets/img/icon/section-step1.png" alt="img"> Our Team</div>
                            <h2 class="et-section-title wow fadeInUp" data-wow-delay=".3s">
                                Meet Our
                                <span>Team</span>
                            </h2>
                        </div>
                    </div>
                    <div class="section-right">
                        <div class="text-md-end wow fadeInUp" data-wow-delay=".4s">
                            <a href="team.phtml" class="et-btn">
                                <div class="icon">
                                    <i class="fa-solid fa-arrow-up-right"></i>
                                </div>
                                Check All Team Members
                            </a>
                        </div>
                    </div>
                </div>


                <div class="grid grid-cols-4 md:grid-cols-3 sm:grid-cols-2 xxs:grid-cols-1 gap-[clamp(16px,1.26vw,24px)] *:bg-etWhite *:rounded-2xl *:px-[clamp(16px,1.26vw,24px)] *:transition *:duration-[400ms]">
                    <div class="team-item hover:bg-secondary hover:translate-y-[-8px]">
                        <div class="thumb w-full overflow-hidden">
                            <img src="assets/img/team/member1.png" alt="img" class="w-full rounded-b-[8px]">
                        </div>
                        <div class="content flex items-end justify-between gap-[clamp(10pxpx,0.84vw,16px)] pt-[clamp(10px,0.84vw,16px)] pb-[clamp(16px,1.26vw,24px)]">
                            <div>
                                <h5 class="mb-[4px] text-[clamp(16px,0.95vw,18px)] font-semibold leading-[1.1] text-primary wow fadeInUp" data-wow-delay=".3s">
                                    <a href="team-details.phtml" class="text-inherit hover:text-black inline-block">
                                        John Doe
                                    </a>
                                </h5>
                                <span class="text-[14px] font-medium leading-[1.5] text-primary block">Branch Manager</span>
                            </div>
                            <a href="team-details.phtml" class="shrink-0 w-[clamp(35px,2.52vw,48px)] aspect-square flex items-center justify-center hover:bg-primary border border-[#dee2e6] hover:border-primary rounded-full text-primary hover:text-white transform-[rotate(-40deg)] transition duration-[400ms]">
                                <i class="fa-solid fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>

                    <div class="team-item hover:bg-secondary hover:translate-y-[-8px]">
                        <div class="thumb w-full overflow-hidden">
                            <img src="assets/img/team/member2.png" alt="img" class="w-full rounded-b-[8px]">
                        </div>
                        <div class="content flex items-end justify-between gap-[clamp(10pxpx,0.84vw,16px)] pt-[clamp(10px,0.84vw,16px)] pb-[clamp(16px,1.26vw,24px)]">
                            <div>
                                <h5 class="mb-[4px] text-[clamp(16px,0.95vw,18px)] font-semibold leading-[1.1] text-primary wow fadeInUp" data-wow-delay=".3s">
                                    <a href="team-details.phtml" class="text-inherit hover:text-black inline-block">
                                        Jane Smith
                                    </a>
                                </h5>
                                <span class="text-[14px] font-medium leading-[1.5] text-primary block">Loan Officer</span>
                            </div>
                            <a href="team-details.phtml" class="shrink-0 w-[clamp(35px,2.52vw,48px)] aspect-square flex items-center justify-center hover:bg-primary border border-[#dee2e6] hover:border-primary rounded-full text-primary hover:text-white transform-[rotate(-40deg)] transition duration-[400ms]">
                                <i class="fa-solid fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>

                    <div class="team-item hover:bg-secondary hover:translate-y-[-8px]">
                        <div class="thumb w-full overflow-hidden">
                            <img src="assets/img/team/member3.png" alt="img" class="w-full rounded-b-[8px]">
                        </div>
                        <div class="content flex items-end justify-between gap-[clamp(10pxpx,0.84vw,16px)] pt-[clamp(10px,0.84vw,16px)] pb-[clamp(16px,1.26vw,24px)]">
                            <div>
                                <h5 class="mb-[4px] text-[clamp(16px,0.95vw,18px)] font-semibold leading-[1.1] text-primary wow fadeInUp" data-wow-delay=".3s">
                                    <a href="team-details.phtml" class="text-inherit hover:text-black inline-block">
                                        Peter Jones
                                    </a>
                                </h5>
                                <span class="text-[14px] font-medium leading-[1.5] text-primary block">Member Services Representative</span>
                            </div>
                            <a href="team-details.phtml" class="shrink-0 w-[clamp(35px,2.52vw,48px)] aspect-square flex items-center justify-center hover:bg-primary border border-[#dee2e6] hover:border-primary rounded-full text-primary hover:text-white transform-[rotate(-40deg)] transition duration-[400ms]">
                                <i class="fa-solid fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>

                    <div class="team-item hover:bg-secondary hover:translate-y-[-8px]">
                        <div class="thumb w-full overflow-hidden">
                            <img src="assets/img/team/member1.png" alt="img" class="w-full rounded-b-[8px]">
                        </div>
                        <div class="content flex items-end justify-between gap-[clamp(10pxpx,0.84vw,16px)] pt-[clamp(10px,0.84vw,16px)] pb-[clamp(16px,1.26vw,24px)]">
                            <div>
                                <h5 class="mb-[4px] text-[clamp(16px,0.95vw,18px)] font-semibold leading-[1.1] text-primary wow fadeInUp" data-wow-delay=".3s">
                                    <a href="team-details.phtml" class="text-inherit hover:text-black inline-block">
                                        Mary Williams
                                    </a>
                                </h5>
                                <span class="text-[14px] font-medium leading-[1.5] text-primary block">Community Outreach Coordinator</span>
                            </div>
                            <a href="team-details.phtml" class="shrink-0 w-[clamp(35px,2.52vw,48px)] aspect-square flex items-center justify-center hover:bg-primary border border-[#dee2e6] hover:border-primary rounded-full text-primary hover:text-white transform-[rotate(-40deg)] transition duration-[400ms]">
                                <i class="fa-solid fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- TEAM SECTION END -->


        <!-- INDUSTRIE SECTION START -->
        <section class="industries-section bg-etWhite pb-[clamp(60px,5.25vw,100px)] pt-[clamp(105px,9.98vw,190px)]">
            <div class="et-container">
                <div class="flex grid-cols-2 justify-between md:flex-col gap-y-[80px]">
                    <div class="w-1/2 md:w-full">
                        <img src="assets/img/element/graph-area.png" alt="img" class="w-full">
                    </div>

                    <div class="max-w-[calc(100%/2.4)] grow md:w-full md:max-w-full">
                        <div class="industries-content relative z-[1]">
                            <div class="boxex mx-auto max-w-[clamp(361px,21.60vw,411px)] px-[10px]">
                                <div class="section-header mb-3">
                                    <div class="et-section-sub-title">Industries</div>
                                    <h3 class="et-section-title text-[clamp(19px,1.26vw,24px)] wow fadeInUp" data-wow-delay=".3s">
                                        Industries We Serve
                                    </h3>
                                </div>
                                <ul class="*:flex *:items-center *:justify-between *:gap-2 *:cursor-pointer *:border-b *:border-[#DDE4E3] *:text-primary *:text-[15px] *:font-semibold *:leading-[2.133] *:list-none *:px-[0px] *:py-[8px] *:transition *:duration-[400ms]">
                                    <li class="wow fadeInUp group" data-wow-delay=".2s">
                                        Non-Profits
                                        <a href="about.phtml" class="flex items-center justify-center cursor-pointer bg-white border border-[#DEE2E6] rounded-full transition duration-[400ms] w-[clamp(35px,2.10vw,40px)] aspect-square group-hover:bg-primary group-hover:text-white"><i class="fa-solid fa-arrow-right"></i></a>
                                    </li>
                                    <li class="wow fadeInUp group" data-wow-delay=".3s">
                                        Small Businesses
                                        <a href="about.phtml" class="flex items-center justify-center cursor-pointer bg-white border border-[#DEE2E6] rounded-full transition duration-[400ms] w-[clamp(35px,2.10vw,40px)] aspect-square group-hover:bg-primary group-hover:text-white"><i class="fa-solid fa-arrow-right"></i></a>
                                    </li>
                                    <li class="wow fadeInUp group" data-wow-delay=".4s">
                                        Community Organizations
                                        <a href="about.phtml" class="flex items-center justify-center cursor-pointer bg-white border border-[#DEE2E6] rounded-full transition duration-[400ms] w-[clamp(35px,2.10vw,40px)] aspect-square group-hover:bg-primary group-hover:text-white"><i class="fa-solid fa-arrow-right"></i></a>
                                    </li>
                                    <li class="wow fadeInUp group" data-wow-delay=".5s">
                                        Local Government
                                        <a href="about.phtml" class="flex items-center justify-center cursor-pointer bg-white border border-[#DEE2E6] rounded-full transition duration-[400ms] w-[clamp(35px,2.10vw,40px)] aspect-square group-hover:bg-primary group-hover:text-white"><i class="fa-solid fa-arrow-right"></i></a>
                                    </li>
                                    <li class="wow fadeInUp group" data-wow-delay=".6s">
                                        Education
                                        <a href="about.phtml" class="flex items-center justify-center cursor-pointer bg-white border border-[#DEE2E6] rounded-full transition duration-[400ms] w-[clamp(35px,2.10vw,40px)] aspect-square group-hover:bg-primary group-hover:text-white"><i class="fa-solid fa-arrow-right"></i></a>
                                    </li>
                                    <li class="wow fadeInUp group" data-wow-delay=".7s">
                                        Healthcare
                                        <a href="about.phtml" class="flex items-center justify-center cursor-pointer bg-white border border-[#DEE2E6] rounded-full transition duration-[400ms] w-[clamp(35px,2.10vw,40px)] aspect-square group-hover:bg-primary group-hover:text-white"><i class="fa-solid fa-arrow-right"></i></a>
                                    </li>
                                </ul>
                            </div>
                            <img src="assets/img/element/industry-links.png" alt="img" class="industries-shape w-full absolute inset-x-0 -top-[clamp(70px,5.78vw,110px)] -bottom-[clamp(48.2px,2.80vw,53.2px)] align-middle -z-[1] md:h-[130%]">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- INDUSTRIE SECTION END -->


        <!-- PRICING SECTION END -->


        <!-- FAQ SECTION START -->
        <section class="faqs-section bg-etWhite py-[clamp(60px,5.25vw,100px)]">
            <div class="et-container">
                <div class="grid grid-cols-2 sm:grid-cols-1 place-items-end sm:place-items-start mb-[clamp(20px,2.10vw,40px)] gap-y-[10px]">
                    <div class="section-left">
                        <div class="section-header">
                            <div class="et-section-sub-title"><img src="assets/img/icon/section-step1.png" alt="img">FAQ</div>
                            <h2 class="et-section-title wow fadeInUp" data-wow-delay=".3s">
                                Frequently Asked
                                <span>Questions</span>
                            </h2>
                        </div>
                    </div>
                    <div class="section-right">
                        <div class="text-md-end wow fadeInUp" data-wow-delay=".4s">
                            <a href="team.phtml" class="et-btn">
                                <div class="icon">
                                    <i class="fa-solid fa-arrow-up-right"></i>
                                </div>
                                Check All Team Members
                            </a>
                        </div>
                    </div>
                </div>


                <div class="flex gap-[clamp(18px,1.26vw,24px)] items-center md:flex-col">
                    <div class="w-[58%] grow md:w-full">
                        <div class="accordion accordion-style1 rounded-[10px] overflow-hidden *:backdrop-blur-[5px] *:bg-white *:shadow-[8px_8px_32px_0px_#240C8714]" id="accordionExample">
                            <div class="accordion-item group grid grid-rows-[max-content_0fr] [&[class~='open']]:grid-rows-[max-content_1fr] duration-300 wow fadeInUp open" data-wow-delay=".2s">
                                <h2 class="accordion-header">
                                    <button class="accordion-button w-full flex items-center justify-between gap-[8px] cursor-pointer relative text-left box-border text-primary font-semibold leading-[1.015] px-[20px] py-[clamp(17.9px,1.10vw,20.9px)] bg-white rounded-[5px_5px_0_0] transition duration-[150ms] z-[3]" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        1. What are the directives from the starring Committee on how the three cooperative executives are nominated?
                                        <span class="cus-icon shrink-0 w-[clamp(32px,1.84vw,35px)] aspect-square flex items-center justify-center box-border cursor-pointer bg-white rounded-full [transform:matrix(1,0,0,1,0,0)] transition ease-in-out duration-[400ms] group-[.open]:bg-primary group-[.open]:text-secondary  group-[.open]:rotate-180"><i class="fa-solid fa-chevron-down"></i></span>
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse overflow-hidden" data-bs-parent="#accordionExample">
                                    <div class="accordion-body px-[clamp(15px,1.05vw,20px)] pb-[clamp(16px,1.26vw,24px)]">
                                        <p class="text-primary text-[15px] leading-[1.5]">
                                            The three executives have been put in place already, and were registered when the committee was being registered, as that is a requirement for registration that must submit along as a Trustee. You must identify the executive. We worked with the Zonal Pastors on the nomination of the committee executives. The names of the Executives will be posted on each cooperative group right after the meeting.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item group grid grid-rows-[max-content_0fr] [&[class~='open']]:grid-rows-[max-content_1fr] duration-300 wow fadeInUp" data-wow-delay=".2s">
                                <h2 class="accordion-header">
                                    <button class="accordion-button w-full flex items-center justify-between gap-[8px] cursor-pointer relative text-left box-border text-primary font-semibold leading-[1.015] px-[20px] py-[clamp(17.9px,1.10vw,20.9px)] bg-white rounded-[5px_5px_0_0] transition duration-[150ms] z-[3]" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        2. What is the specific modality for selecting the three cooperative executive/principal members?
                                        <span class="cus-icon shrink-0 w-[clamp(32px,1.84vw,35px)] aspect-square flex items-center justify-center box-border cursor-pointer bg-white rounded-full [transform:matrix(1,0,0,1,0,0)] transition ease-in-out duration-[400ms] group-[.open]:bg-primary group-[.open]:text-secondary  group-[.open]:rotate-180"><i class="fa-solid fa-chevron-down"></i></span>
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse overflow-hidden" data-bs-parent="#accordionExample">
                                    <div class="accordion-body px-[clamp(15px,1.05vw,20px)] pb-[clamp(16px,1.26vw,24px)]">
                                        <p class="text-primary text-[15px] leading-[1.5]">
                                            The cooperatives are already established and registered as required.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item group grid grid-rows-[max-content_0fr] [&[class~='open']]:grid-rows-[max-content_1fr] duration-300 wow fadeInUp" data-wow-delay=".2s">
                                <h2 class="accordion-header">
                                    <button class="accordion-button w-full flex items-center justify-between gap-[8px] cursor-pointer relative text-left box-border text-primary font-semibold leading-[1.015] px-[20px] py-[clamp(17.9px,1.10vw,20.9px)] bg-white rounded-[5px_5px_0_0] transition duration-[150ms] z-[3]" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        3. What is the administrative process for the cooperatives, and how will transparency be ensured?
                                        <span class="cus-icon shrink-0 w-[clamp(32px,1.84vw,35px)] aspect-square flex items-center justify-center box-border cursor-pointer bg-white rounded-full [transform:matrix(1,0,0,1,0,0)] transition ease-in-out duration-[400ms] group-[.open]:bg-primary group-[.open]:text-secondary  group-[.open]:rotate-180"><i class="fa-solid fa-chevron-down"></i></span>
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse overflow-hidden" data-bs-parent="#accordionExample">
                                    <div class="accordion-body px-[clamp(15px,1.05vw,20px)] pb-[clamp(16px,1.26vw,24px)]">
                                        <p class="text-primary text-[15px] leading-[1.5]">
                                            A platform will be created for each cooperative, allowing members to log in and ensure transparency. Executives are responsible for maintaining proper records, while Trustees ensure compliance.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item group grid grid-rows-[max-content_0fr] [&[class~='open']]:grid-rows-[max-content_1fr] duration-300 wow fadeInUp" data-wow-delay=".2s">
                                <h2 class="accordion-header">
                                    <button class="accordion-button w-full flex items-center justify-between gap-[8px] cursor-pointer relative text-left box-border text-primary font-semibold leading-[1.015] px-[20px] py-[clamp(17.9px,1.10vw,20.9px)] bg-white rounded-[5px_5px_0_0] transition duration-[150ms] z-[3]" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        4. Will a third party be involved in overseeing the cooperatives?
                                        <span class="cus-icon shrink-0 w-[clamp(32px,1.84vw,35px)] aspect-square flex items-center justify-center box-border cursor-pointer bg-white rounded-full [transform:matrix(1,0,0,1,0,0)] transition ease-in-out duration-[400ms] group-[.open]:bg-primary group-[.open]:text-secondary  group-[.open]:rotate-180"><i class="fa-solid fa-chevron-down"></i></span>
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse overflow-hidden" data-bs-parent="#accordionExample">
                                    <div class="accordion-body px-[clamp(15px,1.05vw,20px)] pb-[clamp(16px,1.26vw,24px)]">
                                        <p class="text-primary text-[15px] leading-[1.5]">
                                            No third party will be involved. The existing team will manage processes at the backend without micromanaging the cooperatives.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item group grid grid-rows-[max-content_0fr] [&[class~='open']]:grid-rows-[max-content_1fr] duration-300 wow fadeInUp" data-wow-delay=".2s">
                                <h2 class="accordion-header">
                                    <button class="accordion-button w-full flex items-center justify-between gap-[8px] cursor-pointer relative text-left box-border text-primary font-semibold leading-[1.015] px-[20px] py-[clamp(17.9px,1.10vw,20.9px)] bg-white rounded-[5px_5px_0_0] transition duration-[150ms] z-[3]" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        5. What percentage of dividends will be given to cooperative members?
                                        <span class="cus-icon shrink-0 w-[clamp(32px,1.84vw,35px)] aspect-square flex items-center justify-center box-border cursor-pointer bg-white rounded-full [transform:matrix(1,0,0,1,0,0)] transition ease-in-out duration-[400ms] group-[.open]:bg-primary group-[.open]:text-secondary  group-[.open]:rotate-180"><i class="fa-solid fa-chevron-down"></i></span>
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse overflow-hidden" data-bs-parent="#accordionExample">
                                    <div class="accordion-body px-[clamp(15px,1.05vw,20px)] pb-[clamp(16px,1.26vw,24px)]">
                                        <p class="text-primary text-[15px] leading-[1.5]">
                                            No fixed percentage has been determined. Every dividend will be calculated based on the amount or unit contributed by each individual. A detailed breakdown will be provided, and legal professionals are ensuring compliance.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="w-[42%] md:w-full">
                        <div class="bg-secondary rounded-[8px] px-[clamp(28px,2.89vw,55px)] py-[clamp(25px,2.63vw,50px)] relative z-[1] wow fadeInUp" data-wow-delay=".4s">
                            <div class="flex items-center gap-[clamp(20px,3.68vw,70px)] mb-[clamp(5px,0.42vw,8px)] pb-[clamp(60px,5.25vw,100px)]">
                                <h3 class="text-primary text-[clamp(20px,1.26vw,24px)] font-bold leading-[1.15]">
                                    Still have questions? Don't worries we have answers!
                                </h3>
                                <img src="assets/img/icon/message-icon.png" alt="img" class="w-[clamp(43px,2.52vw,48px)] aspect-square ml-auto flex-shrink-0">
                            </div>
                            <p class="text-primary text-[15px] leading-[1.5] mb-[clamp(16px,1.26vw,24px)]">
                                We're here to help. If you didn't find the answer you were looking for, feel free to reach
                                out to our team. We'll make
                                sure you get the clarity you need to move forward with confidence.
                            </p>
                            <a href="faqs.phtml" class="et-btn">
                                <span class="icon"><i class="fa-solid fa-arrow-up-right"></i></span>
                                Check All Questions
                            </a>
                            <img src="assets/img/element/faq-element.png" alt="img" class="faq-shape1 absolute bottom-[30px] right-[30px] -z-[1]">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- FAQ SECTION END -->


        <!-- BLOG SECTION START -->
        <section class="blog-section py-[clamp(60px,5.25vw,100px)]">
            <!-- <div class="pt-100 d-xxl-block d-none"></div> -->
            <div class="et-container">
                <div class="grid grid-cols-2 sm:grid-cols-1 place-items-end sm:place-items-start mb-[clamp(20px,2.10vw,40px)] gap-y-[10px]">
                    <div class="section-left">
                        <div class="section-header">
                            <div class="et-section-sub-title"><img src="assets/img/icon/section-step1.png" alt="img"> Insights</div>
                            <h2 class="et-section-title wow fadeInUp" data-wow-delay=".3s">
                                Our
                                <span>Blog</span>
                            </h2>
                        </div>
                    </div>
                    <div class="section-right">
                        <div class="text-md-end wow fadeInUp" data-wow-delay=".4s">
                            <a href="team.phtml" class="et-btn">
                                <div class="icon">
                                    <i class="fa-solid fa-arrow-up-right"></i>
                                </div>
                                Check All News
                            </a>
                        </div>
                    </div>
                </div>


                <div class="grid grid-cols-3 md:grid-cols-2 xs:grid-cols-1 gap-[clamp(16px,1.26vw,24px)] *:bg-etWhite *:rounded-2xl *:px-[clamp(16px,1.26vw,24px)] *:transition *:duration-[400ms]">
                    <div class="team-item hover:bg-secondary hover:translate-y-[-8px]">
                        <div class="thumb w-full overflow-hidden">
                            <img src="assets/img/team/team1.png" alt="img" class="w-full rounded-b-[8px]">
                        </div>
                        <div class="content flex items-end justify-between gap-[clamp(20px,1.58vw,30px)] pt-[clamp(10px,0.84vw,16px)] pb-[clamp(16px,1.26vw,24px)]">
                            <div>
                                <span class="text-[14px] font-medium leading-[1.5] text-primary block mb-[4px]">Cooperative Banking</span>
                                <h5 class="text-[clamp(15px,0.95vw,18px)] font-medium leading-[1.1] text-primary wow fadeInUp" data-wow-delay=".3s">
                                    <a href="team-details.phtml" class="text-inherit hover:text-black inline-block">
                                        The Power of Cooperative Banking
                                    </a>
                                </h5>
                            </div>
                            <a href="team-details.phtml" class="shrink-0 w-[clamp(35px,2.52vw,48px)] aspect-square flex items-center justify-center hover:bg-primary border border-[#dee2e6] hover:border-primary rounded-full text-primary hover:text-white transform-[rotate(-40deg)] transition duration-[400ms]">
                                <i class="fa-solid fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>

                    <div class="team-item hover:bg-secondary hover:translate-y-[-8px]">
                        <div class="thumb w-full overflow-hidden">
                            <img src="assets/img/team/team2.png" alt="img" class="w-full rounded-b-[8px]">
                        </div>
                        <div class="content flex items-end justify-between gap-[clamp(20px,1.58vw,30px)] pt-[clamp(10px,0.84vw,16px)] pb-[clamp(16px,1.26vw,24px)]">
                            <div>
                                <span class="text-[14px] font-medium leading-[1.5] text-primary block mb-[4px]">Financial Tips</span>
                                <h5 class="text-[clamp(15px,0.95vw,18px)] font-medium leading-[1.1] text-primary wow fadeInUp" data-wow-delay=".3s">
                                    <a href="team-details.phtml" class="text-inherit hover:text-black inline-block">
                                        5 Tips for a Healthy Financial Future
                                    </a>
                                </h5>
                            </div>
                            <a href="team-details.phtml" class="shrink-0 w-[clamp(35px,2.52vw,48px)] aspect-square flex items-center justify-center hover:bg-primary border border-[#dee2e6] hover:border-primary rounded-full text-primary hover:text-white transform-[rotate(-40deg)] transition duration-[400ms]">
                                <i class="fa-solid fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>

                    <div class="team-item hover:bg-secondary hover:translate-y-[-8px]">
                        <div class="thumb w-full overflow-hidden">
                            <img src="assets/img/team/team3.png" alt="img" class="w-full rounded-b-[8px]">
                        </div>
                        <div class="content flex items-end justify-between gap-[clamp(20px,1.58vw,30px)] pt-[clamp(10px,0.84vw,16px)] pb-[clamp(16px,1.26vw,24px)]">
                            <div>
                                <span class="text-[14px] font-medium leading-[1.5] text-primary block mb-[4px]">Community</span>
                                <h5 class="text-[clamp(15px,0.95vw,18px)] font-medium leading-[1.1] text-primary wow fadeInUp" data-wow-delay=".3s">
                                    <a href="team-details.phtml" class="text-inherit hover:text-black inline-block">
                                        CCI in the Community
                                    </a>
                                </h5>
                            </div>
                            <a href="team-details.phtml" class="shrink-0 w-[clamp(35px,2.52vw,48px)] aspect-square flex items-center justify-center hover:bg-primary border border-[#dee2e6] hover:border-primary rounded-full text-primary hover:text-white transform-[rotate(-40deg)] transition duration-[400ms]">
                                <i class="fa-solid fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- BLOG SECTION END -->


        <!-- CONTACT SECTION START -->
        <section class="contact-section bg-etWhite py-[clamp(60px,5.25vw,100px)]">
            <div class="et-container">
                <div class="grid grid-cols-2 md:grid-cols-1">
                    <div class="col">
                        <div class="contact-thumb1 relative w-full h-full">
                            <img src="assets/img/contact/contact-thumb1.png" alt="img" class="rounded-2 w-full">
                            <div class="absolute flex items-center justify-between gap-[clamp(24px,2.52vw,48px)] bottom-[clamp(35px,3.68vw,70px)] md:top-[15px] md:bottom-auto w-full max-w-[clamp(420px,24.70vw,470px)] xxs:max-w-[97%] xxs:right-[5px] px-[clamp(18px,2.00vw,38px)] py-[clamp(16px,1.26vw,24px)] rounded-[16px] bg-white/65 [backdrop-filter:blur(10px)] left-1/2 xxs:left-[5px] -translate-x-1/2 xxs:translate-0 wow fadeInUp" data-wow-delay=".4s">
                                <div class="">
                                    <span class="text-primary text-[14px] leading-[1.5]">Phone Number</span>
                                    <h6 class="text-primary font-bold leading-[1.2]">(123) 456-7890</h6>
                                </div>
                                <div class="">
                                    <span class="text-primary text-[14px] leading-[1.5]">Email Address</span>
                                    <h6 class="text-primary font-bold leading-[1.2]">info@cci.com</h6>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <div class="contact-content1 bg-white rounded-[24px] -ml-[clamp(16px,1.58vw,30px)] md:ml-0 px-[clamp(25px,4.20vw,80px)] py-[clamp(20px,2.63vw,50px)] relative z-[1]">
                            <div class="section-header mb-xxl-4 mb-4">
                                <div class="et-section-sub-title">
                                    <img src="assets/img/icon/section-step1.png" alt="img"> Schadule
                                </div>
                                <h2 class="et-section-title wow fadeInUp mb-[clamp(10px,0.84vw,16px)]">
                                    Contact
                                    <span class="fw-300">Us</span>
                                </h2>
                                <p class="text-primary text-[15px] leading-[1.5] wow fadeInUp" data-wow-delay=".3s">Schedule a free consultation to
                                    discover personalized solutions from
                                    our financial experts.</p>
                            </div>
                            <div class="grid grid-cols-2 xs:grid-cols-1 gap-[clamp(18px,1.26vw,24px)]">
                                <div class="col">
                                    <div class="form__grp">
                                        <input class="form-control w-full border-b border-[#2C2F581C] pb-[clamp(10px,0.74vw,14px)] pt-[0px]" type="text" placeholder="Full Name *">
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form__grp">
                                        <input class="form-control w-full border-b border-[#2C2F581C] pb-[clamp(10px,0.74vw,14px)] pt-[0px]" type="email" placeholder="Full Email *">
                                    </div>
                                </div>
                                <div class="col-span-2 xs:col-span-1">
                                    <div class="form__grp">
                                        <input class="form-control w-full border-b border-[#2C2F581C] pb-[clamp(10px,0.74vw,14px)] pt-[0px]" type="text" placeholder="Phone number *">
                                    </div>
                                </div>
                                <div class="col-span-2 xs:col-span-1">
                                    <div class="form__grp">
                                        <textarea class="form-control w-full border-b border-[#2C2F581C] pb-[clamp(10px,0.74vw,14px)] pt-[0px]" name="#" placeholder="Your comment *" rows="4"></textarea>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form__grp wow fadeInUp" data-wow-delay=".3s">
                                        <button type="button" class="et-btn">
                                            <span class="icon"><i class="fa-solid fa-arrow-up-right"></i></span>
                                            Submit your message
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- CONTACT SECTION END -->
    </main>

    <!-- FOOTER SECTION START -->
    <footer class="footer-section fix overflow-hidden">
        <div class="footer-widget-wrapper bg-[url('assets/img/footer/footer-bg.png')] bg-center bg-no-repeat bg-cover rounded-[30px] mx-auto mb-[clamp(40px,4.20vw,80px)] max-w-[clamp(1000px,92.59vw,1762px)]">
            <div class="footer-header border-b border-white/10 pt-[clamp(50px,4.20vw,80px)] pb-[clamp(30px,2.63vw,50px)]">
                <div class="et-container">
                    <div class="grid grid-cols-3 sm:grid-cols-2 xxs:grid-cols-1 gap-[clamp(16px,1.26vw,24px)]">
                        <div class="col col-md-4 col-sm-6">
                            <div class="text-sm-start text-center">
                                <div class="footer-logo mb-[clamp(16px,1.26vw,24px)] max-w-[clamp(150px,9.46vw,180px)] mx-auto">
                                    <h1>CCI</h1>
                                </div>
                                <p class="text-white text-[14px] leading-[1.1] text-center">&copy; 2025 CCI</p>
                            </div>
                        </div>
                        <div class="col sm:hidden">
                            <div>
                                <img src="assets/img/footer/foote-ele.png" alt="img" class="footer-ele1 mx-auto">
                            </div>
                        </div>
                        <div class="col">
                            <div class="socal-icon flex justify-end xxs:justify-center gap-[clamp(4px,0.32vw,6px)] *:w-[clamp(35px,2.10vw,40px)] *:aspect-square *:rounded-full *:flex *:items-center *:justify-center *:border *:border-white/10 *:text-white *:hover:bg-secondary *:hover:text-primary transition duration-[400ms]">
                                <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
                                <a href="#"><i class="fa-brands fa-twitter"></i></a>
                                <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
                                <a href="#"><i class="fa-brands fa-pinterest-p"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="footer-middle py-[clamp(40px,3.36vw,64px)]">
                <div class="et-container">
                    <div class="grid grid-cols-4 md:grid-cols-3 sm:grid-cols-2 xxs:grid-cols-1 clamp(16px,1.26vw,24px) gap-y-[35px]">
                        <div class="col-span-2 xxs:col-span-1">
                            <div class="footer-single-widget">
                                <h6 class="text-white font-medium leading-[1.2] mb-[clamp(8px,0.84vw,16px)]">Subscribe to our newsletter</h6>
                                <div class="search-widget flex">
                                    <input type="email" class="bg-white rounded-[32px] px-[clamp(16px,1.26vw,24px)] py-[1px] h-[clamp(43px,2.52vw,48px)] w-full outline-none max-w-[clamp(250px,15.76vw,300px)]" placeholder="Type your Email address">
                                    <a href="contact.phtml" class="et-btn bg-secondary text-primary px-[clamp(15px,1.05vw,20px)] flex-shrink-0">Sign Up<i class="fa-solid fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <h4 class="text-white text-[clamp(17px,1.05vw,20px)] font-bold leading-[1.25] mb-[clamp(10px,0.84vw,16px)]">Head Office</h4>
                            <p class="text-white text-[15px] leading-[1.5] max-w-[clamp(212px,13.24vw,252px)] opacity-75">123 Main Street, Anytown, USA 12345</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="footer-bottom border-t border-white/10 py-[clamp(20px,2.05vw,39px)] px-[0px]">
                <div class="et-container">
                    <ul class="footer-list flex items-center flex-wrap justify-center gap-y-[9px] gap-x-[clamp(16px,1.68vw,32px)]">
                        <li>
                            <a href="about.phtml" class="inline-flex items-center text-white text-[15px] gap-[8px] leading-[1.1] text-left transition duration-[500ms] hover:text-secondary">
                                About Us <i class="fa-solid fa-arrow-up-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="services.phtml" class="inline-flex items-center text-white text-[15px] gap-[8px] leading-[1.1] text-left transition duration-[500ms] hover:text-secondary">
                                Our services <i class="fa-solid fa-arrow-up-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="team.phtml" class="inline-flex items-center text-white text-[15px] gap-[8px] leading-[1.1] text-left transition duration-[500ms] hover:text-secondary">
                                Team <i class="fa-solid fa-arrow-up-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="about.phtml" class="inline-flex items-center text-white text-[15px] gap-[8px] leading-[1.1] text-left transition duration-[500ms] hover:text-secondary">
                                Awards <i class="fa-solid fa-arrow-up-right"></i>
                            </a>
                        </li>
                        <li>
                            <a href="contact.phtml" class="inline-flex items-center text-white text-[15px] gap-[8px] leading-[1.1] text-left transition duration-[500ms] hover:text-secondary">
                                Contact <i class="fa-solid fa-arrow-up-right"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
    <!-- FOOTER SECTION END -->

    <!-- Search Area Start -->
    <div class="search-wrap">
        <div class="search-inner">
            <i class="fas fa-times search-close" id="search-close"></i>
            <div class="search-cell">
                <form method="get">
                    <div class="search-field-holder">
                        <input type="search" class="main-search-input" placeholder="Search...">
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!--<< All JS Plugins >>-->
    <script src="assets/js/jquery-3.7.1.min.js"></script>
    <!--<< Viewport Js >>-->
    <script src="assets/js/viewport.jquery.js"></script>

    <!--<< Nice Select Js >>-->
    <script src="assets/js/jquery.nice-select.min.js"></script>
    <!--<< Waypoints Js >>-->
    <script src="assets/js/jquery.waypoints.js"></script>
    <!--<< Counterup Js >>-->
    <script src="assets/js/jquery.counterup.min.js"></script>
    <!--<< Swiper Slider Js >>-->
    <script src="assets/js/swiper-bundle.min.js"></script>
    <!--<< MeanMenu Js >>-->
    <script src="assets/js/jquery.meanmenu.min.js"></script>
    <!--<< Magnific Popup Js >>-->
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <!--<< Wow Animation Js >>-->
    <script src="assets/js/wow.min.js"></script>
    <!--<< Main.js >>-->
    <script src="assets/js/main.js"></script>
    <script src="assets/js/accordion.js"></script>
</body>


<!-- Mirrored from rudra-tailwind.vercel.app/ by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 08 Nov 2025 13:20:49 GMT -->
</html>