Current File : //home/vedfinancials/public_html/ved/html/style-guide.html
<!doctype html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Finwise - Online Banking & Finance HTML5 Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/imgs/favicon.svg">
    <!-- CSS here -->
    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/vendor/animate.min.css">
    <link rel="stylesheet" href="assets/css/plugins/swiper.min.css">
    <link rel="stylesheet" href="assets/css/plugins/slick.css">
    <link rel="stylesheet" href="assets/css/vendor/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/vendor/fontawesome-pro.css">
    <link rel="stylesheet" href="assets/css/vendor/flaticon_finwise.css">
    <link rel="stylesheet" href="assets/css/vendor/spacing.css">
    <link rel="stylesheet" href="assets/css/main.css">
</head>

<body>

    <!--[if lte IE 9]>
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
      <![endif]-->

    <!-- Preloder start -->
    <div id="preloader">
        <div class="sk-three-bounce">
            <div class="sk-child sk-bounce1"></div>
            <div class="sk-child sk-bounce2"></div>
            <div class="sk-child sk-bounce3"></div>
        </div>
    </div>
    <!-- Preloder start -->

    <!-- Backtotop start -->
    <div class="backtotop-wrap cursor-pointer ">
        <svg class="backtotop-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
        </svg>
    </div>
    <!-- Backtotop end -->

    <!-- Offcanvas area start -->
    <div class="fix">
        <div class="offcanvas__area">
            <div class="offcanvas__wrapper">
                <div class="offcanvas__content">
                    <div class="offcanvas__top d-flex justify-content-between align-items-center">
                        <div class="offcanvas__logo">
                            <a href="index.html">
                                <img src="assets/imgs/logo/logo-white.svg" alt="logo not found">
                            </a>
                        </div>
                        <div class="offcanvas__close">
                            <button class="offcanvas-close-icon animation--flip">
                                <span class="offcanvas-m-lines">
                              <span class="offcanvas-m-line line--1"></span><span class="offcanvas-m-line line--2"></span><span class="offcanvas-m-line line--3"></span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="mobile-menu fix"></div>
                    <div class="offcanvas__social">
                        <h3 class="offcanvas__title mb-20">Subscribe & Follow</h3>
                        <ul>
                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fab fa-youtube"></i></a></li>
                            <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                    <div class="offcanvas__btn">
                        <div class="header__btn-wrap">
                            <a class="sub__btn sm" href="login.html">Log In</a>
                            <a class="bd-gradient-btn" href="contact.html">Get Started</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="offcanvas__overlay"></div>
    <div class="offcanvas__overlay-white"></div>
    <!-- Offcanvas area start -->

    <!-- Header area start -->
    <header>
        <div class="header__area header-transparent header-common">
            <div class="container">
                <div class="mega__menu-wrapper p-relative">
                    <div class="header__main">
                        <div class="header__left">
                            <div class="header__logo">
                                <a href="index.html">
                                    <img src="assets/imgs/logo/logo-white.svg" alt="logo not found">
                                </a>
                            </div>
                        </div>
                        <div class="header__middle">
                            <div class="mean__menu-wrapper d-none d-lg-block">
                                <div class="main-menu">
                                    <div class="main-menu">
                                        <nav id="mobile-menu">
                                            <ul>
                                                <li class="has-dropdown has-mega-menu">
                                                    <a href="javascript:void(0)">Demos</a>
                                                    <ul class="mega-menu">
                                                        <li>
                                                            <div class="home__menu-grid">
                                                                <div class="home__menu-item">
                                                                    <div class="home__menu-thumb">
                                                                        <img src="assets/imgs/menu/menu-home-1.jpg" alt="thumb not found">
                                                                        <div class="home__menu__buttons">
                                                                            <a class="bd-gradient-btn" href="online-banking.html">MULTI PAGE</a>
                                                                            <a class="bd-gradient-btn" href="online-banking-one-page.html">ONE PAGE</a>
                                                                        </div>
                                                                    </div>
                                                                    <h4 class="home__menu-title">Online Banking</h4>
                                                                </div>
                                                                <div class="home__menu-item">
                                                                    <div class="home__menu-thumb">
                                                                        <img src="assets/imgs/menu/menu-home-2.jpg" alt="thumb not found">
                                                                        <div class="home__menu__buttons">
                                                                            <a class="bd-gradient-btn" href="investment-management.html">MULTI PAGE</a>
                                                                            <a class="bd-gradient-btn" href="investment-management-one-page.html">ONE PAGE</a>
                                                                        </div>
                                                                    </div>
                                                                    <h4 class="home__menu-title">Investment Management</h4>
                                                                </div>
                                                                <div class="home__menu-item">
                                                                    <div class="home__menu-thumb">
                                                                        <img src="assets/imgs/menu/menu-home-3.jpg" alt="thumb not found">
                                                                        <div class="home__menu__buttons">
                                                                            <a class="bd-gradient-btn" href="personal-loan.html">MULTI PAGE</a>
                                                                            <a class="bd-gradient-btn" href="personal-loan-one-page.html">ONE PAGE</a>
                                                                        </div>
                                                                    </div>
                                                                    <h4 class="home__menu-title">Personal Loan</h4>
                                                                </div>
                                                                <div class="home__menu-item">
                                                                    <div class="home__menu-thumb">
                                                                        <img src="assets/imgs/menu/menu-home-4.jpg" alt="thumb not found">
                                                                        <div class="home__menu__buttons">
                                                                            <a class="bd-gradient-btn" href="insurance.html">MULTI PAGE</a>
                                                                            <a class="bd-gradient-btn" href="insurance-one-page.html">ONE PAGE</a>
                                                                        </div>
                                                                    </div>
                                                                    <h4 class="home__menu-title">Insurance</h4>
                                                                </div>
                                                                <div class="home__menu-item">
                                                                    <div class="home__menu-thumb">
                                                                        <img src="assets/imgs/menu/menu-home-5.jpg" alt="thumb not found">
                                                                        <div class="home__menu__buttons">
                                                                            <a class="bd-gradient-btn" href="wealth-management.html">MULTI PAGE</a>
                                                                            <a class="bd-gradient-btn" href="wealth-management-one-page.html">ONE PAGE</a>
                                                                        </div>
                                                                    </div>
                                                                    <h4 class="home__menu-title">Wealth Managment</h4>
                                                                </div>
                                                                <div class="home__menu-item">
                                                                    <div class="home__menu-thumb">
                                                                        <img src="assets/imgs/menu/menu-home-6.jpg" alt="thumb not found">
                                                                        <div class="home__menu__buttons">
                                                                            <a class="bd-gradient-btn" href="payment-solution.html">MULTI PAGE</a>
                                                                            <a class="bd-gradient-btn" href="payment-solution-one-page.html">ONE PAGE</a>
                                                                        </div>
                                                                    </div>
                                                                    <h4 class="home__menu-title">Payment Solution</h4>
                                                                </div>
                                                                <div class="home__menu-item">
                                                                    <div class="home__menu-thumb">
                                                                        <img src="assets/imgs/menu/menu-home-7.jpg" alt="thumb not found">
                                                                        <div class="home__menu__buttons">
                                                                            <a class="bd-gradient-btn" href="forex-trading.html">MULTI PAGE</a>
                                                                            <a class="bd-gradient-btn" href="forex-trading-one-page.html">ONE PAGE</a>
                                                                        </div>
                                                                    </div>
                                                                    <h4 class="home__menu-title">Forex Trading</h4>
                                                                </div>
                                                                <div class="home__menu-item">
                                                                    <div class="home__menu-thumb">
                                                                        <img src="assets/imgs/menu/menu-home-8.jpg" alt="thumb not found">
                                                                        <div class="home__menu__buttons">
                                                                            <a class="bd-gradient-btn" href="retirement-planning.html">MULTI PAGE</a>
                                                                            <a class="bd-gradient-btn" href="retirement-planning-one-page.html">ONE PAGE</a>
                                                                        </div>
                                                                    </div>
                                                                    <h4 class="home__menu-title">Retirement Planning</h4>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="has-dropdown has-mega-menu">
                                                    <a href="javascript:void(0)">Pages</a>
                                                    <ul class="mega-menu mega-menu-grid-4">
                                                        <li>
                                                            <a href="javasript:void(0);" class="mega-menu-title">Home Dark</a>
                                                            <ul>
                                                                <li><a href="online-banking.html">Online Banking</a></li>
                                                                <li><a href="investment-management.html">Investment Management</a></li>
                                                                <li><a href="personal-loan.html">Personal Loan</a></li>
                                                                <li><a href="insurance.html">Insurance</a></li>
                                                                <li><a href="wealth-management.html">Wealth Managment</a></li>
                                                                <li><a href="payment-solution.html">Payment Solution</a></li>
                                                                <li><a href="forex-trading.html">Forex Trading</a></li>
                                                                <li><a href="retirement-planning.html">Retirement Planning</a></li>
                                                            </ul>
                                                        </li>
                                                        <li>
                                                            <a href="javasript:void(0);" class="mega-menu-title">Home Light</a>
                                                            <ul>
                                                                <li><a href="online-banking-light.html">Online Banking</a></li>
                                                                <li><a href="investment-management-light.html">Investment Management</a></li>
                                                                <li><a href="personal-loan-light.html">Personal Loan</a></li>
                                                                <li><a href="insurance-light.html">Insurance</a></li>
                                                                <li><a href="wealth-management-light.html">Wealth Managment</a></li>
                                                                <li><a href="payment-solution-light.html">Payment Solution</a></li>
                                                                <li><a href="forex-trading-light.html">Forex Trading</a></li>
                                                                <li><a href="retirement-planning-light.html">Retirement Planning</a></li>
                                                            </ul>
                                                        </li>
                                                        <li>
                                                            <a href="javasript:void(0);" class="mega-menu-title">Page dark</a>
                                                            <ul>
                                                                <li><a href="about.html">About Us</a></li>
                                                                <li><a href="services.html">Services</a></li>
                                                                <li><a href="service-details.html">Services Details</a></li>
                                                                <li><a href="pricing.html">Pricing</a></li>
                                                                <li><a href="blog.html">Blog</a></li>
                                                                <li><a href="blog-details.html">Blog Details</a></li>
                                                                <li><a href="error-page.html">Error Page</a></li>
                                                                <li><a href="login.html">Login</a></li>
                                                                <li><a href="register.html">Register</a></li>
                                                                <li><a href="forgot.html">Forgot Password</a></li>
                                                                <li><a href="privacy-policy.html">Privacy & Policy</a></li>
                                                                <li><a href="contact.html">Contact</a></li>
                                                            </ul>
                                                        </li>
                                                        <li>
                                                            <a href="javasript:void(0);" class="mega-menu-title">Page Light</a>
                                                            <ul>
                                                                <li><a href="about-light.html">About Us</a></li>
                                                                <li><a href="services-light.html">Services</a></li>
                                                                <li><a href="service-details-light.html">Services Details</a></li>
                                                                <li><a href="pricing-light.html">Pricing</a></li>
                                                                <li><a href="blog-light.html">Blog</a></li>
                                                                <li><a href="blog-details-light.html">Blog Details</a></li>
                                                                <li><a href="error-page-light.html">Error Page</a></li>
                                                                <li><a href="login-light.html">Login</a></li>
                                                                <li><a href="register-light.html">Register</a></li>
                                                                <li><a href="forgot-light.html">Forgot Password</a></li>
                                                                <li><a href="privacy-policy-light.html">Privacy & Policy</a></li>
                                                                <li><a href="contact-light.html">Contact</a></li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="has-dropdown has-mega-menu">
                                                    <a href="javascript:void(0)">elements</a>
                                                    <ul class="mega-menu mega-menu-grid-3">
                                                        <li>
                                                            <a href="javasript:void(0);" class="mega-menu-title">elements Layout 1</a>
                                                            <ul>
                                                                <li><a href="style-guide.html">Style Guide</a></li>
                                                                <li><a href="elements-about.html">About Us</a></li>
                                                                <li><a href="elements-accordion.html">Accordion</a></li>
                                                                <li><a href="elements-advancetab.html">Advance Tab</a></li>
                                                                <li><a href="elements-brand.html">Brand</a></li>
                                                                <li><a href="elements-button.html">Button</a></li>
                                                                <li><a href="elements-team.html">Team</a></li>
                                                            </ul>
                                                        </li>
                                                        <li>
                                                            <a href="javasript:void(0);" class="mega-menu-title">elements Layout 2</a>
                                                            <ul>
                                                                <li><a href="elements-pricing.html">pricing</a></li>
                                                                <li><a href="elements-why-chose.html">why chose us</a></li>
                                                                <li><a href="elements-working-steps.html">Working steps</a></li>
                                                                <li><a href="elements-feedback.html">feedback</a></li>
                                                                <li><a href="elements-service.html">service</a></li>
                                                                <li><a href="elements-counter.html">counter</a></li>
                                                                <li><a href="elements-case.html">Use case</a></li>
                                                            </ul>
                                                        </li>
                                                        <li>
                                                            <a href="javasript:void(0);" class="mega-menu-title">elements Layout 3</a>
                                                            <ul>
                                                                <li><a href="elements-benefits.html">benefits</a></li>
                                                                <li><a href="elements-cta.html">Call To Action</a></li>
                                                                <li><a href="elements-our-offers.html">our Offers</a></li>
                                                                <li><a href="elements-features.html">Key features</a></li>
                                                                <li><a href="elements-form.html">form</a></li>
                                                                <li><a href="elements-footer.html">Footer Style</a></li>
                                                                <li><a href="#">More Coming</a></li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="contact.html">Contact</a>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="header__right">
                            <div class="header__action d-flex align-items-center">
                                <div class="header__btn-wrap d-none d-xl-inline-flex">
                                    <a class="sub__btn" href="login.html">Log In</a>
                                    <a class="bd-gradient-btn" href="contact.html">Get Started</a>
                                </div>
                                <div class="header__hamburger ml-20 d-xl-none">
                                    <div class="sidebar__toggle">
                                        <a class="bar-icon" href="avascript:void(0)">
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                        </a>
                                    </div>
                                </div>
                                <!-- for wp -->
                                <div class="header__hamburger ml-20 d-none">
                                    <button type="button" class="hamburger-btn offcanvas-open-btn">
                                        <span>01</span>
                                        <span>01</span>
                                        <span>01</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Header area end -->

    <!-- Body glow start -->
    <div class="glow__area">
        <div class="body__color-glow"></div>
        <div class="body__color-glow glow-2"></div>
    </div>
    <!-- Body glow end -->

    <!-- Body main wrapper start -->
    <main>

        <!-- Breadcrumb area start  -->
        <div class="breadcrumb__area breadcrumb-space theme-bg-1 valign p-relative z-index-11 fix">
            <div class="breadcrumb__glow">
                <div class="glow-1"></div>
                <div class="glow-2"></div>
            </div>
            <div class="round__shape">
                <img src="assets/imgs/shapes/cercle.png" alt="image not found">
            </div>
            <div class="container">
                <div class="row gy-50 align-items-center justify-content-between">
                    <div class="col-xxl-6 col-xl-6 col-lg-6">
                        <div class="breadcrumb__title-wraper">
                            <span class="section__subtitle-7 mb-20">Style Guide</span>
                            <h2 class="breadcrumb__title"> Crafting a Consistent and Engaging Online <span class="gradient-text-3">Experience</span></h2>
                        </div>
                    </div>
                    <div class="col-xxl-5 col-xl-5 col-lg-6">
                        <div class="breadcrumb__description">
                            <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Breadcrumb area end  -->

        <!-- Style- gride area start  -->
        <div class="style__guide-area section-space">
            <div class="container">
                <div class="row g-5">
                    <div class="col-xl-3 col-lg-4">
                        <div class="widget-sidebar bd-sticky-top">
                            <div class="content-item-content">
                                <div class="widget-details">
                                    <nav class="onepagenav">
                                        <ul class="mainmenu rbt-course-details-list-wrapper">
                                            <li class="current"><a href="#colorPalette"><span>1. Color Palette</span></a></li>
                                            <li><a href="#gradient"><span>2. Color Gradient</span></a></li>
                                            <li><a href="#typography"><span>3. Typography</span></a></li>
                                            <li><a href="#formElements"><span>4. Form Elements</span></a></li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-8 col-lg-8">
                        <div class="guide__widget-box">
                            <div id="colorPalette" class="elements__area">
                                <div class="wrapper">
                                    <h4 class="style__guide-title mb-20">Color Palette</h4>
                                    <div class="row g-5">
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box bg-theme-primary"></div>
                                                <div class="content mt-10">
                                                    <span class="color-box-title">#FB5141</span>
                                                    <h6 class="title mb--0">Primary Color</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box bg-theme-secondary"></div>
                                                <div class="content mt-10">
                                                    <span class="color-box-title">#FB5141</span>
                                                    <h6 class="title mb--0">Secondary Color</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box bg-theme-tertiary"></div>
                                                <div class="content mt-10">
                                                    <span class="color-box-title">#674AD9</span>
                                                    <h6 class="title mb--0">Tertiary Color</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box bg-theme-quaternary"></div>
                                                <div class="content mt-10">
                                                    <span class="color-box-title">#E540A3</span>
                                                    <h6 class="title mb--0">Quaternary Color</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box theme-bg-1"></div>
                                                <div class="content mt-10">
                                                    <span class="color-box-title">rgba(14, 10, 36, 1)</span>
                                                    <h6 class="title mb--0">theme-bg-1</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box theme-bg-2"></div>
                                                <div class="content mt-10">
                                                    <span class="color-box-title">rgba(6, 6, 6, 1)</span>
                                                    <h6 class="title mb--0">theme-bg-2</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box theme-bg-3"></div>
                                                <div class="content mt-10">
                                                    <span class="color-box-title">rgba(14, 10, 36, 0.5)</span>
                                                    <h6 class="title mb--0">theme-bg-3</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box theme-bg-4"></div>
                                                <div class="content mt-10">
                                                    <span class="color-box-title">rgba(18, 18, 18, 1)</span>
                                                    <h6 class="title mb--0">theme-bg-4</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box theme-bg-5"></div>
                                                <div class="content mt-10">
                                                    <span class="color-box-title">#121212</span>
                                                    <h6 class="title mb--0">theme-bg-5</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box theme-bg-6"></div>
                                                <div class="content mt-10">
                                                    <span class="color-box-title">rgba(255, 255, 255, 0.06)</span>
                                                    <h6 class="title mb--0">theme-bg-6</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box theme-bg-7"></div>
                                                <div class="content mt-10">
                                                    <span class="color-box-title">rgb(240, 235, 255)</span>
                                                    <h6 class="title mb--0">theme-bg-7</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box theme-bg-8"></div>
                                                <div class="content mt-10">
                                                    <span class="color-box-title">rgb(236, 235, 241)</span>
                                                    <h6 class="title mb--0">theme-bg-8</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box theme-bg-9"></div>
                                                <div class="content mt-10">
                                                    <span class="color-box-title">rgb(242, 242, 242)</span>
                                                    <h6 class="title mb--0">theme-bg-9</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box theme-bg-10"></div>
                                                <div class="content mt-10">
                                                    <span class="color-box-title">rgb(247, 247, 247)</span>
                                                    <h6 class="title mb--0">theme-bg-10</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box white-bg"></div>
                                                <div class="content mt-10">
                                                    <span class="color-box-title">#fff</span>
                                                    <h6 class="title mb--0">white-bg</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box black-bg"></div>
                                                <div class="content mt-10">
                                                    <span class="color-box-title">#000000 </span>
                                                    <h6 class="title mb--0">black-bg</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="elements__devider">
                                <hr>
                            </div>
                            <div id="gradient" class="elements__area">
                                <div class="wrapper">
                                    <h4 class="style__guide-title mb-20">Color Gradient</h4>
                                    <div class="row g-5">
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box bg-gradient-1"></div>
                                                <div class="content mt-10">
                                                    <h6 class="title mb--0">Gradient 1</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box bg-gradient-2"></div>
                                                <div class="content mt-10">
                                                    <h6 class="title mb--0">Gradient 2</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box bg-gradient-3"></div>
                                                <div class="content mt-10">
                                                    <h6 class="title mb--0">Gradient 3</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-md-6">
                                            <div class="color-box-inner">
                                                <div class="color-box bg-gradient-4"></div>
                                                <div class="content mt-10">
                                                    <h6 class="title mb--0">Gradient 4</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="elements__devider">
                                <hr>
                            </div>
                            <div id="typography" class="elements__area">
                                <div class="wrapper">
                                    <h4 class="style__guide-title mb-20">Typography</h4>
                                    <div class="row g-5">
                                        <div class="col-lg-12">
                                            <h1 class="mb-20">H1. Heading One</h1>
                                            <h2 class="mb-20">H2. Heading Two</h2>
                                            <h3 class="mb-20">H3. Heading Three</h3>
                                            <h4 class="mb-20">H4. Heading Four</h4>
                                            <h5 class="mb-20">H5. Heading Five</h5>
                                            <h6 class="mb-20">H6. Heading Six</h6>
                                        </div>
                                    </div>
                                    <div class="row mt-40">
                                        <div class="section__guide">
                                            <h4 class="style__guide-title mb-20">Heading Style</h4>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="subtitle text-center">
                                                <h2 class="section__title mb-15">Section Title</h2>
                                            </div>
                                        </div>
                                        <div class="col-xl-auto col-lg-6 col-md-6 mt-30">
                                            <div class="subtitle text-center">
                                                <span class="section__subtitle uppercase">Section subtitle One</span>
                                            </div>
                                        </div>
                                        <div class="col-xl-auto col-lg-6 col-md-6 mt-30">
                                            <div class="subtitle text-center">
                                                <span class="section__subtitle-2 uppercase">Section subtitle Two</span>
                                            </div>
                                        </div>
                                        <div class="col-xl-auto col-lg-6 col-md-6 mt-30">
                                            <div class="subtitle text-center">
                                                <span class="section__subtitle-3 uppercase">Section subtitle Three</span>
                                            </div>
                                        </div>
                                        <div class="col-xl-auto col-lg-6 col-md-6 mt-30">
                                            <div class="subtitle text-center">
                                                <span class="section__subtitle-4 uppercase">Section subtitle Four</span>
                                            </div>
                                        </div>
                                        <div class="col-xl-auto col-lg-6 col-md-6 mt-30">
                                            <div class="subtitle text-center">
                                                <span class="section__subtitle-5 uppercase">Section subtitle Five</span>
                                            </div>
                                        </div>
                                        <div class="col-xl-auto col-lg-6 col-md-6 mt-30">
                                            <div class="subtitle text-center">
                                                <span class="section__subtitle-6 uppercase">Section subtitle Six</span>
                                            </div>
                                        </div>
                                        <div class="col-xl-auto col-lg-6 col-md-6 mt-30">
                                            <div class="subtitle text-center">
                                                <span class="section__subtitle-7 uppercase">Section subtitle seven</span>
                                            </div>
                                        </div>
                                        <div class="col-xl-auto col-lg-6 col-md-6 mt-30">
                                            <div class="subtitle text-center">
                                                <h5 class="section__subtitle-8">
                                                    <span>Section subtitle Eight</span>
                                                </h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="elements__devider">
                                <hr>
                            </div>
                            <div id="formElements" class="elements__area">
                                <div class="wrapper">
                                    <h4 class="style__guide-title mb-20">Form Elements</h4>
                                    <div class="row g-5">
                                        <div class="contact__input-wrapper">
                                            <div class="row">
                                                <div class="col-xxl-6 col-xl-6 col-lg-6">
                                                    <div class="login__input mb-25">
                                                        <input type="email" placeholder="hello@finwise.com">
                                                    </div>
                                                </div>
                                                <div class="col-xxl-6 col-xl-6 col-lg-6">
                                                    <div class="login__input mb-25">
                                                        <input type="password" placeholder="Enter your email">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="contact__input-box">
                                                        <div class="contact__input-title">
                                                            <label for="cname">company name<span>*</span></label>
                                                        </div>
                                                        <div class="contact__input">
                                                            <input name="companyname" id="cname" type="text" placeholder="">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="contact__input-box mb-20">
                                                        <div class="contact__input-title">
                                                            <label>select option<span>*</span></label>
                                                        </div>
                                                        <div class="contact__select">
                                                            <select>
                                                                <option>Select option One</option>
                                                                <option>Select option Two</option>
                                                                <option>Select option Three</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    <div class="contact__input-box">
                                                        <div class="contact__input-title">
                                                            <label for="cname">Country (optional)<span>*</span></label>
                                                        </div>
                                                        <div class="contact__input">
                                                            <textarea name="message" placeholder="Your message"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Style gride area end -->

        <!-- Brand area start -->
        <div class="brand__area-6 theme-bg-1 section-rounded-60 section-space">
            <div class="container">
                <div class="swiper brnad__active">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="brand__item text-center">
                                <div class="brand__thumb">
                                    <img src="assets/imgs/brand/brand-01.png" alt="image not found">
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="brand__item text-center">
                                <div class="brand__thumb">
                                    <img src="assets/imgs/brand/brand-02.png" alt="image not found">
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="brand__item text-center">
                                <div class="brand__thumb">
                                    <img src="assets/imgs/brand/brand-03.png" alt="image not found">
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="brand__item text-center">
                                <div class="brand__thumb">
                                    <img src="assets/imgs/brand/brand-04.png" alt="image not found">
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="brand__item text-center">
                                <div class="brand__thumb">
                                    <img src="assets/imgs/brand/brand-05.png" alt="image not found">
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="brand__item text-center">
                                <div class="brand__thumb">
                                    <img src="assets/imgs/brand/brand-06.png" alt="image not found">
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="brand__item text-center">
                                <div class="brand__thumb">
                                    <img src="assets/imgs/brand/brand-02.png" alt="image not found">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Brand area end -->

    </main>
    <!-- Body main wrapper end -->

    <!-- Footer area start -->
    <footer>
        <section class="footer__area-common">
            <div class="container">
                <div class="footer__main">
                    <div class="footer__grid">
                        <div class="footer__widget">
                            <div class="footer__logo mb-25">
                                <a href="index.html">
                                    <img src="assets/imgs/logo/logo-white.svg" alt="logo not found">
                                </a>
                            </div>
                            <div class="footer__content">
                                <p>Lorem ipsum dolor am oledop consectetur adipisc.</p>
                                <div class="footer__social">
                                    <a href="#"><i class="fa-brands fa-facebook"></i></a>
                                    <a href="#"><i class="fa-brands fa-twitter"></i></a>
                                    <a href="#"><i class="fa-brands fa-linkedin"></i></a>
                                    <a href="#"><i class="fa-brands fa-youtube"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="footer__widget">
                            <div class="footer__widget-title">
                                <h5>Use Cases</h5>
                            </div>
                            <div class="footer__link">
                                <ul>
                                    <li><a href="#">SaaS</a></li>
                                    <li><a href="#">Online Business</a></li>
                                    <li><a href="#">Creators</a></li>
                                    <li><a href="#">E-Commerce</a></li>
                                    <li><a href="#">Agencies</a></li>
                                    <li><a href="#">Secure</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="footer__widget">
                            <div class="footer__widget-title">
                                <h5>Products</h5>
                            </div>
                            <div class="footer__link">
                                <ul>
                                    <li><a href="#">Invoicing</a></li>
                                    <li><a href="#">Office Hours</a></li>
                                    <li><a href="#">Explore More</a></li>
                                    <li><a href="#">Loan Type</a></li>
                                    <li><a href="#">Calculate</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="footer__widget">
                            <div class="footer__widget-title">
                                <h5>Newsletter</h5>
                            </div>
                            <div class="footer__newsletter">
                                <p>For latest Update subscribe us!</p>
                                <form action="https://html.bdevs.net/finwise-prev/assets/mail.php" method="POST">
                                    <div class="footer__newsletter-from mb-25">
                                        <div class="footer__newsletter-input p-relative">
                                            <input type="text" placeholder="Enter Email">
                                            <button class="footer__round-btn" type="submit"><i class="fa-regular fa-angle-right"></i></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="footer__short-info">
                                <div class="info-icon">
                                    <span><i class="fa-solid fa-envelope"></i></span>
                                </div>
                                <div class="info-content">
                                    <p><a href="https://html.bdevs.net/cdn-cgi/l/email-protection#b7dfd2dbdbd8f7d1ded9c0dec4d299d4d8da"><span class="__cf_email__" data-cfemail="d6beb3babab996b0bfb8a1bfa5b3f8b5b9bb">[email&#160;protected]</span></a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer__bottom">
                    <div class="footer__copyright">
                        <p>Copyright © 2023 <a href="#">Finwise</a></p>
                    </div>
                    <div class="footer__conditions">
                        <ul>
                            <li><a href="privacy-policy.html">Privacy Policy</a></li>
                            <li><a href="contact.html">Contact Us</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </footer>
    <!-- Footer area end -->

    <!-- JS here -->
    <script data-cfasync="false" src="../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
    <script src="assets/js/plugins/waypoints.min.js"></script>
    <script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
    <script src="assets/js/plugins/meanmenu.min.js"></script>
    <script src="assets/js/plugins/swiper.min.js"></script>
    <script src="assets/js/plugins/slick.min.js"></script>
    <script src="assets/js/plugins/wow.js"></script>
    <script src="assets/js/vendor/magnific-popup.min.js"></script>
    <script src="assets/js/vendor/type.js"></script>
    <script src="assets/js/plugins/counterup.js"></script>
    <script src="assets/js/plugins/nice-select.min.js"></script>
    <script src="assets/js/vendor/jquery-ui.min.js"></script>
    <script src="assets/js/plugins/parallax-scroll.js"></script>
    <script src="assets/js/vendor/ajax-form.js"></script>
    <script src="assets/js/main.js"></script>
</body>

</html>