How To Customize

Logo change

Here is your main logo code. To add your logo, replace logo.png from images/logo/ directory with your logo in PNG format.

 <img src="assets/images/logo/logo.png" alt="logo">

Note: Keep your logo inside the ./assets/imaegs/logo folder. The logo size should be minimum 150 X 65 pixel.

Change Menubar

This is Menu navigation codes.

  <ul class="menu">
    <li>
        <a href="javascript:void(0);">Home</a>
        <ul class="submenu">
            <li><a href="index.html">Home One</a></li>
            <li><a href="index1-light.html">Home light</a></li>
            <li><a href="index1-dark.html">Home Dark</a></li>
            <li><a href="index-2.html">Home Two</a></li>
            <li><a href="index-2-light.html">Home light</a></li>
            <li><a href="index-2-dark.html">Home Dark</a></li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0);">Services</a>
        <ul class="submenu">
            <li><a href="services.html">Services</a></li>
            <li><a href="service-details.html">Services Details</a></li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0);">About</a>
        <ul class="submenu">
            <li><a href="about.html">About Us</a></li>
            <li><a href="price.html">Price</a></li>
            <li><a href="team.html">Team</a></li>
            <li><a href="team-2.html">Team 2</a></li>
            <li><a href="team-details.html">Team Details</a></li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0);">Pages</a>
        <ul class="submenu">
            <li><a href="blog.html">Blog</a></li>
            <li><a href="blog-sidebar.html">Blog Sidebar</a></li>
            <li><a href="blog-details.html">Blog Detils</a></li>
            <li><a href="signup.html">Sign Up</a></li>
            <li><a href="signup-2.html">Sign Up 2</a></li>
            <li><a href="signin.html">Sign In</a></li>
            <li><a href="signin-2.html">Sign In 2</a></li>
            <li><a href="forgot-pass.html">Reset Password</a></li>
            <li><a href="forgot-pass-2.html">Reset Password 2</a></li>
            <li><a href="404.html">404 Error</a></li>
        </ul>
    </li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
    

To change the Menu item or menu name you have to edit in the tag Your Menu Name

If you wanna delete a menu item from the menu just remove the menu item above

Section Styles

Here is your section structure.

      <section class="section-name padding-top padding-bottom">
        <div class="container">
          <div class="section-header">					
              .....
          </div>

          <div class="section-wrapper">

          ...sections all content goes there

          </div>

        </div>
      </section>
    

• If you need diffrent style of section header - just you add the utility classes "section-header--left or section-header--middle" class
• In the class="section-class" you can replace with your desired class.
• the section-header div you can add your heading of sections and tagline of sections.
• ou can add your content on the 2nd sectionname__wrapper div.

Section With Background

you can select secondary background dark color. To add color, just simply add the class bg--primary to the section class.

  <section class="section-name bg--primary">
    <div class="container">
      ...
    </div>
  </section>	  
      

    {
        spaceBetween: 20,
        autoplay: false,
        slidesPerView: 4,
        isCustomNav: true,
        breakpoints: {
            576: {
                slidesPerView: 2
            },
            992: {
                slidesPerView: 3
            }
        },
        navigation: {
            nextEl: '.swiper-nav .swiper-next',
            prevEl: '.swiper-nav .swiper-prev'
    }

                                        

        //===================== Variables start===================== //

        // theme colors
        $brand-color: var(--brand-color);
        $secondary-color: var(--secondary-color);
        $tertiary-color: var(--tertiary-color);


        $body-color: var(--body-color);
        $border-color: var(--border-color);
        $social-border-color: var(--social-border-color);

        $form-border: var(--form-border);

        // text colors
        $title-color: var(--title-color);
        $text-color: var(--text-color);
        $text-color-light: var(--text-color-light);


        $white-color: var(--white-color);
        $black-color: var(--black-color);

        // background colors
        $bg-color: var(--bg-color);
        $bg-color-1: var(--bg-color-1);
        $bg-color-2: var(--bg-color-2); 
        $bg-color-3: var(--bg-color-3);
        $bg-color-4: var(--bg-color-4);
        $bg-color-5: var(--bg-color-5);
        $bg-color-6: var(--bg-color-6);

        $bg-white: var(--bg-white);

        // extra colors
        $bg-team: var(--bg-team);


        // form
        $form-border: var(--form-border);
        $form-focus: var(--form-focus);

        // Action colors
        $error: var(--error-color);
        $warning: var(--warning-color);
        $success: var(--success-color);
        $danger: var(--danger-color);





        //=====================>>>\ Variables end ===================== //



        //Template Font family

        $title-font:'Ubuntu',
        sans-serif;

        $text-font:'Nunito Sans',
        sans-serif;

        //Template font sizes
        $fs-base: 16px !default;
        $fs-small:14px;

        $fs-h1: 56px;
        $fs-h2: 40px;
        $fs-h3: 32px;
        $fs-h4: 28px;
        $fs-h5: 24px;
        $fs-h6: 18px;


        //Template transition
        $transition:all .3s linear;