### “Morat” Documentation by “RRDevs” v1.0

# “Morat”

Created:13/01/2024
By: RRDevs

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!

## Table of Contents

1. HTML Structure
2. Template Components
3. CSS Files and Structure
4. JavaScript
5. Sources and Credits
6. PHP Code Explanation (If your theme uses PHP)
7. Flash (If your theme uses Flash)
8. API Usage (If your theme uses an API)
9. Any additional unique features that need an overview

### A) HTML Structure - top

Below is the general HTML structure of the landing page.

#### 1) index.html File Structure - top

The template page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.

    <html class="no-js" lang="en">
        <head>
            <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="description" content="">

            <!-- Site Title -->
            <title>Morat - It Solution HTML5 Template</title>

            <!-- Place favicon.ico in the root directory -->
            <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">

            <!-- CSS here -->
            <link rel="stylesheet" href="assets/css/bootstrap.min.css">
            <link rel="stylesheet" href="assets/css/fontawesome.min.css">
            <link rel="stylesheet" href="assets/css/venobox.min.css">
            <link rel="stylesheet" href="assets/css/animate.min.css">
            <link rel="stylesheet" href="assets/css/keyframe-animation.css">
            <link rel="stylesheet" href="assets/css/odometer.min.css">
            <link rel="stylesheet" href="assets/css/swiper.min.css">
            <link rel="stylesheet" href="assets/css/main.css">
        </head>

        <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

            <div id="preloader">
                <div class="preloader-close">x</div>
                <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>
            </div><!--site preloader-->

            <header class="header">

            </header><!-- /.Main Header -->

            <div id="popup-search-box">

            </div><!-- /#popup-search-box -->

            <section class="hero-section pt-100 pb-100">

            </section><!-- ./ hero-section -->

            <section class="sponsor-section">

            </section><!-- ./ sponsor-section -->

            <section class="about-section pt-100 pb-100">

            </section><!-- ./ about-section -->

            <section class="counter-section pt-100 pb-100">

            </section><!-- ./ counter-section -->

            <section class="service-section bg-grey pt-100 pb-100">

            </section><!-- ./service-section -->

            <section class="skill-section bg-grey pt-100 pb-100">

            </section><!-- ./skill-section -->

            <section class="cta-section bg-grey pt-100 pb-100">

            </section><!-- ./cta-section -->

            <section class="project-section bg-grey pt-100 pb-100">

            </section><!-- ./project-section -->

            <section class="testimonial-section bg-grey pt-100 pb-100">

            </section><!-- ./testimonial-section -->

            <section class="about-section-2">

            </section><!-- ./about-section-2 -->

            <section class="call-area">

            </section><!-- ./call-area -->

            <section class="blog-section bg-grey pt-100 pb-100">

            </section><!-- ./blog-section -->

            <section class="footer-section bg-grey pt-100 pb-100">

            </section><!-- ./footer-section -->

            <div id="scrollup">
                <button id="scroll-top" class="scroll-to-top"><i class="fa-regular fa-arrow-up-long"></i></button>
    		</div>
    		<!--scrollup-->

            <!-- JS here -->
            <script src="assets/js/vendor/jquary-3.6.0.min.js"></script>
            <script src="assets/js/vendor/bootstrap-bundle.js"></script>
            <script src="assets/js/vendor/imagesloaded-pkgd.js"></script>
            <script src="assets/js/vendor/waypoints.min.js"></script>
            <script src="assets/js/vendor/venobox.min.js"></script>
            <script src="assets/js/vendor/odometer.min.js"></script>
            <script src="assets/js/vendor/meanmenu.js"></script>
            <script src="assets/js/vendor/jquery.isotope.js"></script>
            <script src="assets/js/vendor/wow.min.js"></script>
            <script src="assets/js/vendor/swiper.min.js"></script>
            <script src="assets/js/ajax-form.js"></script>
            <script src="assets/js/main.js"></script>
        </body>
    </html>

### B) Template Components - top

The site is made of many sections like header, slider, testimonials, services and more...

#### 1) Header Section - top

    <header class="header sticky-active">
    	<div class="header-container">
    		<div class="primary-header">
    			<div class="primary-header-inner">
    				<div class="header-logo d-lg-block">
    					<a href="index.html">
    						<img src="assets/img/logo/logo.png" alt="Logo">
    					</a>
    				</div>
    				<div class="header-menu-wrap">
    					<div class="mobile-menu-items">
    						<ul class="sub-menu">
    							<li class="menu-item-has-children active">
    								<a href="index.html">Home</a>
    								<ul>
    									<li><a href="index.html">It Solution</a></li>
    								</ul>
    							</li>
    						</ul>
    					</div>
    					<div class="header-right">
    						<a href="contact.html" class="mt-primary-btn header-btn">Get A Quote</a>
    						<div class="sidebar-icon">
    							<button class="sidebar-trigger open">
    								<span></span>
    							</button>
    						</div>
    						<div class="header-logo d-none d-lg-none">
    							<a href="index.html">
    								<img src="assets/img/logo/logo.png" alt="Logo">
    							</a>
    						</div>
    						<div class="header-right-item">
    							<a href="javascript:void(0)" class="mobile-side-menu-toggle d-lg-none"
    								><i class="fa-sharp fa-solid fa-bars"></i
    							></a>
    						</div>
    					</div>
    					<!-- /.header-right -->
    				</div>
    				<!-- /.header-menu-wrap -->
    			</div>
    			<!-- /.primary-header-inner -->
    		</div>
    		<!-- /.primary-header -->
    	</div>
    </header>
    <!-- /.Main Header -->

#### 2) Hero Section - top

    <section class="hero-section" data-background="assets/img/bg-img/hero-bg.png">
    	<div class="container">
    		<div class="row align-items-center">
    			<div class="col-lg-6">
    				<div class="hero-content section-heading">
    					<h4 class="sub-heading wow fade-in-bottom" data-wow-delay="300ms">Software & IT Solutions !</h4>
    					<h1 class="section-title wow fade-in-bottom" data-wow-delay="400ms">We Are Best Software It Solution <span>Business.</span></h1>
    					<p class=" wow fade-in-bottom" data-wow-delay="500ms">
    						We are tailored it design, management & support services business softwaer elit, sed do
    						eiusmod tempor.
    					</p>
    					<div class="hero-box wow fade-in-bottom" data-wow-delay="600ms">
    						<img src="assets/img/images/hero-box-img.jpg" alt="hero">
    						<ul>
    							<li><i class="fa-sharp fa-solid fa-circle-check"></i>We provide a revolutionary</li>
    						</ul>
    					</div>
    					<div class="hero-btn-wrap wow fade-in-bottom" data-wow-delay="700ms">
    						<a href="contact.html" class="mt-primary-btn primary-2">Contact Now</a>
    						<div class="video-btn">
    							<a
    								class="video-popup"
    								data-autoplay="true"
    								data-vbtype="video"
    								href="https://youtu.be/iyd7qUH3oH0">
    								<div class="play-btn">
    									<img src="assets/img/icon/hero-play.png" alt="play">
    									<div class="ripple-2"></div>
    								</div>
    								<span>Watch Video</span>
    							</a>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    	<div class="hero-shapes">
    		<img class="hero-shape shape-1" src="assets/img/shapes/hero-anim-1.png" alt="shapes">
    	</div>
    	<div class="hero-img-wrap">
    		<img src="assets/img/shapes/hero-img-shape.png" class="hero-shape" alt="shape">
    		<img src="assets/img/shapes/hero-circle.png" class="hero-circle" alt="circle">
    		<div class="hero-img-inner">
    			<img src="assets/img/images/hero-img.png" alt="hero">
    		</div>
    	</div>
    </section>
    <!-- ./ hero-section -->

#### 3) Sponsor Section - top

    <div class="sponsor-section pt-100 pb-100">
    	<div class="container">
    		<div class="sponsor-carousel swiper">
    			<div class="swiper-wrapper swiper-container">
    				<div class="swiper-slide">
    					<div class="sponsor-item">
    						<a href="#"><img src="assets/img/sponsor/sponsor-1.png" alt="sponsor"></a>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    <!-- ./ sponsor-section -->

#### 4) about Section - top

    <section class="about-section pb-100">
    	<div class="container">
    		<div class="row">
    			<div class="col-lg-6">
    				<div class="about-img wow slide-in-left" data-wow-delay="500ms">
    					<img src="assets/img/images/about-img-1.jpg" alt="about">
    				</div>
    			</div>
    			<div class="col-lg-6">
    				<div class="about-content">
    					<div class="section-heading mb-30">
    						<h4 class="sub-heading wow fade-in-right" data-wow-delay="300ms">Our About Us</h4>
    						<h3 class="section-title wow fade-in-right" data-wow-delay="400ms">Complete Managing About Software Business</h3>
    						<p class="wow fade-in-right" data-wow-delay="500ms">
    							Softewer being able to crank out videos consistently, localize this them for
    							different regions, and still save resources, time, energy has been a game change
    						</p>
    					</div>
    					<div class="about-tab wow fade-in-right" data-wow-delay="600ms">
    						<ul class="nav nav-tabs" id="myTab" role="tablist">
    							<li class="nav-item" role="presentation">
    								<button
    									class="nav-link active"
    									id="home-tab"
    									data-bs-toggle="tab"
    									data-bs-target="#home"
    									type="button"
    									role="tab"
    									aria-controls="home"
    									aria-selected="true"
    								>
    									Our Solution
    								</button>
    							</li>
    						</ul>
    						<div class="tab-content" id="myTabContent">
    							<div
    								class="tab-pane fade show active"
    								id="home"
    								role="tabpanel"
    								aria-labelledby="home-tab"
    							>
    								<p>
    									Softewer being able to crank out videos consistently, this them for
    									different regions, and still senergy.
    								</p>
    								<ul class="about-list">
    									<li><i class="fa-sharp fa-solid fa-circle-check"></i>We a revolutionary</li>
    									<li>
    										<i class="fa-sharp fa-solid fa-circle-check"></i>This softewer solution.
    									</li>
    								</ul>
    							</div>
    						</div>
    					</div>
    					<div class="about-author wow fade-in-right" data-wow-delay="700ms">
    						<div class="author-info">
    							<div class="author-img">
    								<img src="assets/img/images/about-author.jpg" alt="author">
    							</div>
    							<h3 class="name">Porata Marat <span>Co-Founder</span></h3>
    						</div>
    						<img class="sign" src="assets/img/images/sign.png" alt="sign">
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </section>
    <!-- ./ about-section -->

#### 5) Counter Section - top

    <section class="counter-section pb-0">
    	<div class="bg-color"></div>
    	<div class="container">
    		<div class="row gy-4">
    			<div class="col-lg-3 col-md-6">
    				<div class="counter-item wow fade-in-bottom" data-wow-delay="300ms">
    					<div class="shape"><img src="assets/img/shapes/counter-shape.png" alt="shape"></div>
    					<div class="counter-icon"><img src="assets/img/icon/counter-1.png" alt="counter"></div>
    					<h3 class="title"><span class="odometer" data-count="56">0</span>k+</h3>
    					<p>Happy Clients</p>
    				</div>
    			</div>
    		</div>
    	</div>
    </section>
    <!-- ./ counter-section -->

#### 6) Service Section - top

    <section class="service-section bg-grey pt-100 pb-100">
    	<div class="container">
    		<div class="section-heading text-center">
    			<h4 class="sub-heading bg-white wow fade-in-bottom" data-wow-delay="400ms">Our Flexibility Service</h4>
    			<h2 class="section-title wow fade-in-bottom" data-wow-delay="500ms">Our Best Service Solution</h2>
    		</div>
    		<div class="row gy-4">
    			<div class="col-lg-4 col-md-6">
    				<div class="service-item text-center wow fade-in-bottom" data-wow-delay="400ms" style="--mt-color-theme-primary: #ffc330">
    					<div class="shape">
    						<svg
    							style="
    								shape-rendering: geometricPrecision;
    								text-rendering: geometricPrecision;
    								image-rendering: optimizeQuality;
    								fill-rule: evenodd;
    								clip-rule: evenodd;
    							"
    							xmlns:xlink="http://www.w3.org/1999/xlink"
    						>
    							<g>
    								<path
    									d="M 30.5,-0.5 C 35.8333,-0.5 41.1667,-0.5 46.5,-0.5C 46.5,4.5 46.5,9.5 46.5,14.5C 51.8333,14.5 57.1667,14.5 62.5,14.5C 62.5,19.8333 62.5,25.1667 62.5,30.5C 67.5,30.5 72.5,30.5 77.5,30.5C 77.5,35.8333 77.5,41.1667 77.5,46.5C 72.5,46.5 67.5,46.5 62.5,46.5C 62.5,51.8333 62.5,57.1667 62.5,62.5C 57.1667,62.5 51.8333,62.5 46.5,62.5C 46.5,67.5 46.5,72.5 46.5,77.5C 41.1667,77.5 35.8333,77.5 30.5,77.5C 30.5,72.5 30.5,67.5 30.5,62.5C 25.1667,62.5 19.8333,62.5 14.5,62.5C 14.5,57.1667 14.5,51.8333 14.5,46.5C 9.5,46.5 4.5,46.5 -0.5,46.5C -0.5,41.1667 -0.5,35.8333 -0.5,30.5C 4.5,30.5 9.5,30.5 14.5,30.5C 14.5,25.1667 14.5,19.8333 14.5,14.5C 19.8333,14.5 25.1667,14.5 30.5,14.5C 30.5,9.5 30.5,4.5 30.5,-0.5 Z M 33.5,1.5 C 36.8333,1.5 40.1667,1.5 43.5,1.5C 43.5,5.16667 43.5,8.83333 43.5,12.5C 40.1667,12.5 36.8333,12.5 33.5,12.5C 33.5,8.83333 33.5,5.16667 33.5,1.5 Z M 31.5,15.5 C 36.1667,15.5 40.8333,15.5 45.5,15.5C 45.5,20.5 45.5,25.5 45.5,30.5C 40.8333,30.5 36.1667,30.5 31.5,30.5C 31.5,25.5 31.5,20.5 31.5,15.5 Z M 17.5,17.5 C 21.1667,17.5 24.8333,17.5 28.5,17.5C 28.5,21.1667 28.5,24.8333 28.5,28.5C 24.8333,28.5 21.1667,28.5 17.5,28.5C 17.5,24.8333 17.5,21.1667 17.5,17.5 Z M 48.5,17.5 C 52.1667,17.5 55.8333,17.5 59.5,17.5C 59.5,21.1667 59.5,24.8333 59.5,28.5C 55.8333,28.5 52.1667,28.5 48.5,28.5C 48.5,24.8333 48.5,21.1667 48.5,17.5 Z M 15.5,31.5 C 20.5,31.5 25.5,31.5 30.5,31.5C 30.5,36.1667 30.5,40.8333 30.5,45.5C 25.5,45.5 20.5,45.5 15.5,45.5C 15.5,40.8333 15.5,36.1667 15.5,31.5 Z M 46.5,31.5 C 51.5,31.5 56.5,31.5 61.5,31.5C 61.5,36.1667 61.5,40.8333 61.5,45.5C 56.5,45.5 51.5,45.5 46.5,45.5C 46.5,40.8333 46.5,36.1667 46.5,31.5 Z M 1.5,33.5 C 5.16667,33.5 8.83333,33.5 12.5,33.5C 12.5,36.8333 12.5,40.1667 12.5,43.5C 8.83333,43.5 5.16667,43.5 1.5,43.5C 1.5,40.1667 1.5,36.8333 1.5,33.5 Z M 33.5,33.5 C 36.8333,33.5 40.1667,33.5 43.5,33.5C 43.5,36.8333 43.5,40.1667 43.5,43.5C 40.1667,43.5 36.8333,43.5 33.5,43.5C 33.5,40.1667 33.5,36.8333 33.5,33.5 Z M 64.5,33.5 C 68.1667,33.5 71.8333,33.5 75.5,33.5C 75.5,36.8333 75.5,40.1667 75.5,43.5C 71.8333,43.5 68.1667,43.5 64.5,43.5C 64.5,40.1667 64.5,36.8333 64.5,33.5 Z M 31.5,46.5 C 36.1667,46.5 40.8333,46.5 45.5,46.5C 45.5,51.5 45.5,56.5 45.5,61.5C 40.8333,61.5 36.1667,61.5 31.5,61.5C 31.5,56.5 31.5,51.5 31.5,46.5 Z M 17.5,48.5 C 21.1667,48.5 24.8333,48.5 28.5,48.5C 28.5,52.1667 28.5,55.8333 28.5,59.5C 24.8333,59.5 21.1667,59.5 17.5,59.5C 17.5,55.8333 17.5,52.1667 17.5,48.5 Z M 48.5,48.5 C 52.1667,48.5 55.8333,48.5 59.5,48.5C 59.5,52.1667 59.5,55.8333 59.5,59.5C 55.8333,59.5 52.1667,59.5 48.5,59.5C 48.5,55.8333 48.5,52.1667 48.5,48.5 Z M 33.5,64.5 C 36.8333,64.5 40.1667,64.5 43.5,64.5C 43.5,68.1667 43.5,71.8333 43.5,75.5C 40.1667,75.5 36.8333,75.5 33.5,75.5C 33.5,71.8333 33.5,68.1667 33.5,64.5 Z">
    							   </path>
    							</g>
    						</svg>
    					</div>
    					<div class="service-icon">
    						<img src="assets/img/icon/service-1.png" alt="service">
    					</div>
    					<h3 class="title"><a href="service-details.html">Online Documentation</a></h3>
    					<p>
    						Softewer business it before tab providet Payroll & Worksite Servicesfull for applica
    						best agency for business solution.
    					</p>
    					<a href="service-details.html" class="read-more"
    						>Read More<i class="fa-solid fa-circle-chevron-right"></i
    					></a>
    				</div>
    			</div>
    		</div>
    	</div>
    </section>
    <!-- ./ service-section -->

#### 7) Project Section - top

    <section class="project-section pt-100">
    	<div class="container">
    		<div class="project-top">
    			<div class="section-heading">
    				<h4 class="sub-heading">Portfolio</h4>
    				<h2 class="section-title">Featured Project</h2>
    			</div>
    			<div class="swiper-arrow">
    				<div class="swiper-nav swiper-next"><i class="fa-regular fa-chevron-left"></i></div>
    			</div>
    			<!-- Carousel Arrows -->
    		</div>
    	</div>
    	<div class="project-carousel-wrap">
    		<div class="project-carousel swiper">
    			<div class="swiper-wrapper">
    				<div class="swiper-slide">
    					<div class="project-item">
    						<div class="project-img">
    							<img src="assets/img/project/project-1.jpg" alt="img">
    						</div>
    						<a
    							class="img-popup project-btn"
    							data-autoplay="true"
    							data-vbtype="image"
    							href="assets/img/project/project-1.jpg">
    							<i class="fa-regular fa-arrow-right"></i>
    						</a>
    						<div class="project-content">
    							<span>Distribution</span>
    							<h3 class="title"><a href="portfolio-details.html">Shipping Transport</a></h3>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </section>
    <!-- ./ project-section -->

#### 8) Skill Section - top

    <section class="skill-section">
    	<div class="container">
    		<div class="row">
    			<div class="col-lg-6">
    				<div class="skill-content pt-100 pb-100">
    					<div class="section-heading">
    						<h4 class="sub-heading wow fade-in-bottom" data-wow-delay="300ms">Our Skill Now</h4>
    						<h2 class="section-title wow fade-in-bottom" data-wow-delay="400ms">This Digital Solutions Skill Service Software</h2>
    						<p class="wow fade-in-bottom" data-wow-delay="500ms">
    							Softewer being able to crank out videos consistently, localize this them for
    							different regions, and still save resources, time, energy has been a game change
    						</p>
    					</div>
    					<div class="skills-items wow fade-in-bottom" data-wow-delay="600ms">
    						<div class="skills-item" style="--mt-color-theme-primary: #ffc330">
    							<div class="title-wrap">
    								<div class="progress-count">
    									(<span class="odometer" data-count="73"></span>%)
    								</div>
    								<h4 class="title">Development</h4>
    							</div>
    							<div class="progress">
    								<div
    									class="progress-bar wow slideInLeft"
    									data-wow-delay="0ms"
    									data-wow-duration="2000ms"
    									role="progressbar"
    									style="width: 73%"
    								>
    									<div class="arrow">
    										<i class="fa-solid fa-triangle"></i><i class="fa-solid fa-triangle"></i>
    									</div>
    								</div>
    							</div>
    						</div>
    					</div>
    					<div class="skill-btn-wrap wow fade-in-bottom" data-wow-delay="700ms">
    						<a href="about.html" class="mt-primary-btn primary-2">Skill More</a>
    						<div class="skill-number">
    							<i class="fa-solid fa-phone"></i>
    							<div class="numbers">
    								<a href="tel:+955426535255">+955426535255</a>
    								<a href="tel:+210154444564">+210154444564</a>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    	<div class="man" data-background="assets/img/images/skill-img.png"></div>
    </section>
    <!-- ./ skill-section -->

#### 10) Cta Section - top

    <section class="cta-section">
    	<div class="cta-wrap" data-background="assets/img/bg-img/cta-bg.jpg">
    		<div class="overlay"></div>
    		<div class="top-shape"></div>
    		<div class="cta-content wow fade-in-bottom" data-wow-delay="300ms">
    			<a
    				class="video-popup video-btn"
    				data-autoplay="true"
    				data-vbtype="video"
    				href="https://youtu.be/iyd7qUH3oH0"
    				><i class="fa-light fa-circle-play"></i>
    				<div class="ripple"></div>
    			</a>
    			<h3 class="title wow fade-in-bottom" data-wow-delay="400ms">We Can Save Softwere This For Video</h3>
    			<p class="wow fade-in-bottom" data-wow-delay="500ms">
    				Softwere being able to crank out videos consistently, localize this them for different regions,
    				and still save resources, time, energy has been a game change
    			</p>
    			<a href="about.html" class="mt-primary-btn primary-2 wow fade-in-bottom" data-wow-delay="600ms">Video More</a>
    		</div>
    	</div>
    </section>
    <!-- ./ cta-section -->

#### 11) Project Section - top

    <section class="project-section pt-100 pb-100">
    	<div class="project-container">
    		<div class="section-heading text-center">
    			<h4 class="sub-heading wow fade-in-bottom" data-wow-delay="400ms">Our Projects Now</h4>
    			<h2 class="section-title wow fade-in-bottom" data-wow-delay="600ms">Work Gallery Recent Projects</h2>
    		</div>
    		<div class="row">
    			<div class="col-lg-12">
    				<ul class="project-filter text-center">
    					<li class="active" data-filter="*">All</li>
    				</ul>
    			</div>
    		</div>
    		<div class="row filter-items">
    			<div class="col-lg-4 col-md-6 single-item design app">
    				<div class="project-item">
    					<div class="project-thumb">
    						<div class="overlay"></div>
    						<img src="assets/img/images/project-img-6.png" alt="project">
    					</div>
    					<div class="project-content">
    						<h3 class="title">
    							<a href="project-details.html">Mobile Application</a> <span>Creative Theme</span>
    						</h3>
    						<a href="project-details.html" class="project-btn">
    							<i class="fa-regular fa-arrow-left-long"></i>
    						</a>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </section>
    <!-- ./ project-section -->

#### 12) Testimonial Section - top

    <section class="testimonial-section pt-100 pb-100" data-background="assets/img/bg-img/testi-bg.jpg">
    	<div class="overlay"></div>
    	<div class="testi-shape" data-background="assets/img/shapes/testi-shape.png"></div>
    	<div class="container">
    		<div class="section-heading text-center">
    			<h4 class="sub-heading wow fade-in-bottom" data-wow-delay="400ms">Our Testimonial Say</h4>
    			<h2 class="section-title wow fade-in-bottom" data-wow-delay="500ms">What Clients Say Digital Services</h2>
    			<p class="wow fade-in-bottom" data-wow-delay="600ms">
    				Softewer being able to crank out videos consistently, localize this them for different regions,
    				and still save resources, time, energy has been a game change
    			</p>
    		</div>
    		<div class="row">
    			<div class="col-lg-6 offset-lg-6">
    				<div class="testi-carousel-wrap">
    					<div class="quote-3"><img src="assets/img/icon/quote-3.png" alt="quote"></div>
    					<div class="testi-thumb-wrap">
    						<div class="swiper thumb-carousel">
    							<div class="swiper-wrapper">
    								<div class="swiper-slide">
    									<div class="testi-thumb">
    										<img src="assets/img/images/testi-author-1.png" alt="testi">
    									</div>
    								</div>
    							</div>
    						</div>
    					</div>
    					<div class="swiper content-carousel">
    						<div class="swiper-wrapper">
    							<div class="swiper-slide">
    								<div class="testi-content">
    									<div class="quote"><img src="assets/img/icon/quote.png" alt="quote"></div>
    									<p>
    										We are privileged to work with hundreds future what They Say About
    										businesses, including many of the world’s for best this tobe software,
    										and this softewer brands.
    									</p>
    									<h3 class="author">Karon Metara<span>Founder</span></h3>
    									<ul class="review">
    										<li><i class="fas fa-star"></i></li>
    									</ul>
    								</div>
    							</div>
    						</div>
    						<div class="swiper-pagination"></div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </section>
    <!-- ./ testimonial-section -->

#### 13) About Section 2 - top

    <section class="about-section-2 pt-100 pb-100">
    	<div class="container">
    		<div class="row">
    			<div class="col-lg-6">
    				<div class="about-info">
    					<div class="section-heading">
    						<h4 class="sub-heading wow fade-in-left" data-wow-delay="300ms">Our Choose Us</h4>
    						<h2 class="section-title wow fade-in-left" data-wow-delay="400ms">Digital Solutions Choose Provide This About.</h2>
    						<p class="wow fade-in-left" data-wow-delay="500ms">
    							Softewer being able to crank out videos consistently, localize this them for
    							different regions, and still save resources, time, energy has been a game change
    						</p>
    					</div>
    				</div>
    				<div class="about-items">
    					<div class="about-item wow fade-in-left" data-wow-delay="600ms">
    						<div class="about-icon">
    							<img src="assets/img/icon/about-1.png" alt="icon">
    						</div>
    						<div class="about-item-content">
    							<h3 class="title">Branding Services <span>Step: 01</span></h3>
    							<p>Softewer business it before tab providet Payroll & Worksite Servicesfull for</p>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    	<div class="about-img-wrap">
    		<img src="assets/img/images/about-img-2.png" alt="about">
    	</div>
    </section>
    <!-- ./ about-section-2 -->

#### 14) Call Section - top

    <section class="call-area">
    	<div class="custom-container call-wrap wow fade-in-bottom" data-wow-delay="500ms" data-background="assets/img/bg-img/call-area-bg.jpg">
    		<div class="call-icon"><img src="assets/img/shapes/call-icon.png" alt="icon"></div>
    		<div class="content-wrap">
    			<h3 class="title">Let's Try! Get Free Support Solution?</h3>
    			<div class="btn-group">
    				<a href="contact.html" class="mt-primary-btn primary-2">Contact With Us</a>
    				<a
    					class="video-popup video-btn"
    					data-autoplay="true"
    					data-vbtype="image"
    					href="https://youtu.be/iyd7qUH3oH0"
    				>
    					<i class="fa-sharp fa-solid fa-play"></i>
    				</a>
    			</div>
    		</div>
    	</div>
    </section>
    <!-- ./ call-area  -->

#### 15) Call Section - top

    <section class="call-area">
    	<div class="custom-container call-wrap wow fade-in-bottom" data-wow-delay="500ms" data-background="assets/img/bg-img/call-area-bg.jpg">
    		<div class="call-icon"><img src="assets/img/shapes/call-icon.png" alt="icon"></div>
    		<div class="content-wrap">
    			<h3 class="title">Let's Try! Get Free Support Solution?</h3>
    			<div class="btn-group">
    				<a href="contact.html" class="mt-primary-btn primary-2">Contact With Us</a>
    				<a
    					class="video-popup video-btn"
    					data-autoplay="true"
    					data-vbtype="image"
    					href="https://youtu.be/iyd7qUH3oH0"
    				>
    					<i class="fa-sharp fa-solid fa-play"></i>
    				</a>
    			</div>
    		</div>
    	</div>
    </section>
    <!-- ./ call-area  -->

#### 16) Blog Section - top

    <section class="blog-section pt-100 pb-100">
    	<div class="container">
    		<div class="section-heading text-center">
    			<h4 class="sub-heading wow fade-in-bottom" data-wow-delay="400ms">Our News & Blogs</h4>
    			<h2 class="section-title wow fade-in-bottom" data-wow-delay="600ms">Largest The News & Blog</h2>
    		</div>
    		<div class="blog-carousel-wrap">
    			<div class="blog-carousel swiper">
    				<div class="swiper-wrapper swiper-container">
    					<div class="swiper-slide">
    						<div class="post-card card-1">
    							<div class="post-thumb">
    								<img src="assets/img/blog/post-1.jpg" alt="post">
    								<a href="#" class="category">Solution</a>
    							</div>
    							<div class="post-content-wrap">
    								<div class="post-content">
    									<ul class="post-meta">
    										<li>By: <a href="#">Admin, </a>May 02, 2024</li>
    										<li>Comments (02)</li>
    									</ul>
    									<h3 class="title">
    										<a href="blog-details.html"
    											>Get Latest Updates Best Blog This Business</a
    										>
    									</h3>
    									<p class="desc">
    										We business standard chunk ofI nibh velit auctor aliquet sollic tudin.
    									</p>
    								</div>
    								<div class="post-review-wrap">
    									<ul class="review">
    										<li><i class="fas fa-star"></i></li>
    										<li><span>(05)</span></li>
    									</ul>
    									<a href="blog-details.html"
    										>Read More <i class="fa-solid fa-circle-chevron-right"></i
    									></a>
    								</div>
    							</div>
    						</div>
    					</div>
    				</div>
    				<!-- Carousel Dots -->
    				<div class="swiper-pagination"></div>
    			</div>
    		</div>
    	</div>
    </section>
    <!-- ./ blog-section -->

#### 16) Blog Section - top

    <section class="blog-section pt-100 pb-100">
    	<div class="container">
    		<div class="section-heading text-center">
    			<h4 class="sub-heading wow fade-in-bottom" data-wow-delay="400ms">Our News & Blogs</h4>
    			<h2 class="section-title wow fade-in-bottom" data-wow-delay="600ms">Largest The News & Blog</h2>
    		</div>
    		<div class="blog-carousel-wrap">
    			<div class="blog-carousel swiper">
    				<div class="swiper-wrapper swiper-container">
    					<div class="swiper-slide">
    						<div class="post-card card-1">
    							<div class="post-thumb">
    								<img src="assets/img/blog/post-1.jpg" alt="post">
    								<a href="#" class="category">Solution</a>
    							</div>
    							<div class="post-content-wrap">
    								<div class="post-content">
    									<ul class="post-meta">
    										<li>By: <a href="#">Admin, </a>May 02, 2024</li>
    										<li>Comments (02)</li>
    									</ul>
    									<h3 class="title">
    										<a href="blog-details.html"
    											>Get Latest Updates Best Blog This Business</a
    										>
    									</h3>
    									<p class="desc">
    										We business standard chunk ofI nibh velit auctor aliquet sollic tudin.
    									</p>
    								</div>
    								<div class="post-review-wrap">
    									<ul class="review">
    										<li><i class="fas fa-star"></i></li>
    										<li><span>(05)</span></li>
    									</ul>
    									<a href="blog-details.html"
    										>Read More <i class="fa-solid fa-circle-chevron-right"></i
    									></a>
    								</div>
    							</div>
    						</div>
    					</div>
    				</div>
    				<!-- Carousel Dots -->
    				<div class="swiper-pagination"></div>
    			</div>
    		</div>
    	</div>
    </section>
    <!-- ./ blog-section -->

#### 17) Footer Section - top

    <footer class="footer-section" data-background="assets/img/bg-img/footer-bg.jpg">
    	<div class="overlay"></div>
    	<div class="container">
    		<div class="footer-top">
    			<div class="footer-logo">
    				<a href="index.html"><img src="assets/img/logo/logo.png" alt="logo"></a>
    			</div>
    			<div class="footer-form-wrap">
    				<h3 class="news">Our Newsletter <span>We are dolor sit amet csectetur</span></h3>
    				<div class="footer-form">
    					<form action="#" class="mt-subscribe-form">
    						<input
    							class="form-control"
    							type="email"
    							name="email"
    							placeholder="Enter Your Email"
    							required="">
    						<input type="hidden" name="action" value="mailchimpsubscribe">
    						<button class="submit">Subscribe</button>
    						<div class="clearfix"></div>
    					</form>
    				</div>
    			</div>
    		</div>
    		<div class="row">
    			<div class="col-lg-3 col-md-6">
    				<div class="footer-widget">
    					<h3 class="widget-header">About</h3>
    					<ul class="address-list">
    						<li>
    							<i class="fa-regular fa-clock"></i>Open Hours of Government: Mon - Fri: 8.00 am. -
    							6.00 pm.
    						</li>
    						<li><i class="fa-solid fa-location-dot"></i> 13/A, Miranda Halim City .</li>
    						<li>
    							<i class="fa-sharp fa-solid fa-phone"></i
    							><a href="tel:09969569535">099 695 695 35</a>
    						</li>
    					</ul>
    					<ul class="social-list">
    						<li class="facebook">
    							<a href="#"><i class="fab fa-facebook-f"></i></a>
    						</li>
    					</ul>
    				</div>
    			</div>

    		</div>
    	</div>
    	<div class="copyright-area">
    		<div class="container">
    			<div class="copyright-content">
    				<p>Copyright © 2024 <span>Morat</span>, All Rights Reserved.</p>
    				<ul class="copy-list">
    					<li><a href="about.html">About Us</a></li>
    				</ul>
    			</div>
    		</div>
    	</div>
    </footer>
    <!-- ./ footer-section -->

### C) CSS Files and Structure - top

These are the css files:

1. bootstrap.min.css
2. animate.min.css
3. fontawesome.min.css
4. keyframe-animation.css
5. odometer.min.css
6. swiper.min.css
7. venobox.min.css
8. main.css

### D) JavaScript - top

This theme use these Javascript files:

1. jQuery
   jQuery is a Javascript library that greatly reduces the amount of code that you must write. jQuery use these javascript files:

       				jquary-3.6.0.min.js
                       ajax-form..js
                       bootstrap.min.js
                       popper.min.js
                       odometer.min.js
                       waypoints.min.js
                       venobox.min.js
                       swiper.min.js
                       imagesloaded.pkgd.min.js
                       jquery.isotope.v3.0.2.js
                       wow.min.js
                       contact.js
                       main.js

   You can edit the contact.js files. for setting contact form

### F) Sources and Credits - top

1. Bootstrap v5.0.2
2. Swiper Carousel
3. WOW JS
4. VenoBox
5. YTPlayer
6. AjaxChimp

### G) PHP Code Explanation - top

There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

Morat

Go To Table of Contents