File: /home/sreyam/public_html/backup/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Orbix - HTML Responsive Multi-Purpose Template</title>
<!--pageMeta-->
<!-- LIB CSS -->
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="lib/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="lib/owl-carousel/owl.css" rel="stylesheet">
<link href="lib/Swiper/css/swiper.min.css" rel="stylesheet">
<link href="lib/owl-carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/vegas/vegas.min.css" rel="stylesheet">
<link href="lib/Magnific-Popup/magnific-popup.css" rel="stylesheet">
<link href="lib/sweetalert/sweetalert2.min.css" rel="stylesheet">
<link href="lib/materialize-parallax/materialize-parallax.css" rel="stylesheet">
<!-- ICON FONTS -->
<link href="fonts/fontawesome/fontawesome-all.min.css" rel="stylesheet">
<link href="fonts/pixeden/pe-icon-7-stroke.css" rel="stylesheet">
<link href="fonts/et-line/et-line-font.css" rel="stylesheet">
<link href="fonts/material-webfont/css/materialdesignicons.min.css" rel="stylesheet">
<!-- TEMPLATE CSS -->
<link href="css/animate.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/ckav-grids.css" rel="stylesheet">
<link href="css/helper.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<!-- THEME COLOR CSS -->
<link href="css/themes/theme-05.css" rel="stylesheet">
<link href="css/template-custom.css" rel="stylesheet">
<!-- FAVICONS -->
<link rel="icon" href="images/favicons/favicon.ico">
<link rel="apple-touch-icon" href="images/favicons/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-touch-icon-114x114.png">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<!--[if IE 9 ]><script src="js/ie-matchmedia.js"></script><![endif]-->
</head>
<body class="bg-light theme-01">
<!--
************************************************************
* PAGELOADER
*************************************************************
-->
<div id="pageloader">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<!-- ************** END : PAGELOADER ************** -->
<!--
************************************************************
* MAIN WRAPPER
*************************************************************
-->
<div class="mainwrapper min-vh-h100">
<!--
************************************************************
* HEADER
*************************************************************
-->
<header class="header px-h120 flex-cc fixed t0 l0 w100" data-ckav-sm="pd-0 block" data-scrollsticky="y">
<div class="container-fluid z1 pd-lr-30" data-ckav-sm="w-reset w100">
<div class="row align-items-center typo-light">
<div class="col-lg-2" data-ckav-md="align-l pd-20" data-ckav-sm="align-l pd-10">
<a href="#" class="inline-block px-w60 mr-auto logowrp" data-ckav-md="px-w60" data-ckav-sm="px-w40"><img src="images/logo.png"></a>
<div class="menu-iconwrp" data-ckav-md="block pd-40" data-ckav-sm="block pd-10 pd-tb-tiny">
<div class="menu-icon" data-ckav-sm="block">
<span></span>
</div>
</div>
</div>
<div class="col-lg-10 align-r" data-ckav-sm="align-c">
<ul class="list-reset nav-ul inline-block fs12 txt-white txt-upper bold-4 f-2" data-ckav-sm="block">
<li><a href="#" data-pagelinkto="homepage" class="mr-lr-20 mr-tb-10 pd-tb-10 block pagelink active-menulink">Home</a></li>
<li><a href="#" data-pagelinkto="aboutpage" class="mr-lr-20 mr-tb-10 pd-tb-10 block pagelink">About</a></li>
<li><a href="#" data-pagelinkto="servicepage" class="mr-lr-20 mr-tb-10 pd-tb-10 block pagelink">Services</a></li>
<li><a href="#" data-pagelinkto="bloglistpage" class="mr-lr-20 mr-tb-10 pd-tb-10 block pagelink">Blog</a></li>
<li><a href="#" data-pagelinkto="portfoliopage" class="mr-lr-20 mr-tb-10 pd-tb-10 block pagelink">Portfolio</a></li>
<li><a href="#" data-pagelinkto="contactpage" class="mr-lr-20 mr-tb-10 pd-tb-10 block pagelink">Contact</a></li>
</ul>
</div>
</div>
</div>
</header>
<!-- ************** END : HEADER ************** -->
<!--
************************************************************
* HOME PAGE
*************************************************************
-->
<div data-thispage="homepage" class="mainpage ckav-pages homepage flex-cc typo-light activepage">
<!--=================================
= BACKGROUND HOLDER
==================================-->
<div class="bg-holder full-wh z1">
<!-- OVERLAY -->
<b data-bgholder="overlay" class="full-wh z3" data-rgradient="y" data-rg-colors="rgba(255, 33, 79, 0)|rgba(255, 33, 79, 0)"></b>
<!-- BACKGROUND IMAGE -->
<b data-bgholder="bg-img" class="full-wh bg-cover bg-cc z1" data-bg="images/bg-10.jpg"></b>
</div>
<!-- ======= END : BACKGROUND HOLDER ======= -->
<!--=================================
= TEXT AREA
==================================-->
<div class="container">
<div data-ckav-sm="align-c">
<h1 class="title f-1 fs80 bold-4 mr-b-20 lh-2" data-ckav-md="fs40" data-ckav-sm="fs30">Good book <br>has no ending</h1>
<p class="fs16 f-2 px-w500 lh-6 mr-b-60" data-ckav-sm="mr-b-30 w100">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<a href="#popup-content" class="set-popup btn btn-default solid hov-btn-white txt-upper round">Let's Work toether</a>
</div>
</div>
<!-- ======= END : TEXT AREA ======= -->
<!--=================================
= SOCIAL ICONS
==================================-->
<div class="social-icons pd-tb-30 fixed b0 l0 w100 z2 align-l" data-ckav-sm="align-c">
<div class="inline-block pd-lr-30">
<a href="http://ckavart.com/" target="_blank" class="sq40 fs14 mr-r-4 rd iconbox btn-default txt-white bdr-1 bdr-op-light-1"><i class="fab fa-facebook-f"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq40 fs14 mr-r-4 rd iconbox btn-default txt-white bdr-1 bdr-op-light-1"><i class="fab fa-twitter"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq40 fs14 mr-r-4 rd iconbox btn-default txt-white bdr-1 bdr-op-light-1"><i class="fab fa-google"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq40 fs14 mr-r-4 rd iconbox btn-default txt-white bdr-1 bdr-op-light-1"><i class="fab fa-tumblr"></i></a>
</div>
</div>
<!-- ======= END : SOCIAL ICONS ======= -->
</div>
<!-- ************** END : HOME PAGE ************** -->
<!--
************************************************************
* ABOUT PAGE
*************************************************************
-->
<div data-thispage="aboutpage" class="otherpage ckav-pages aboutpage bg-light typo-light align-c pd-t-40">
<div class="container-fluid pd-0 mr-t-200" data-ckav-sm="mr-t-60">
<!--=================================
= OUR STORY
==================================-->
<div class="section-01 pd-b-100" data-ckav-sm="pd-b-50">
<div class="container">
<!-- SECTION TITLE -->
<div class="section-title mr-b-60" data-ckav-sm="mr-b-30">
<span class="txt-upper f-1 fs14 bold-3 mr-b-10 ltr-3 txt-default block" data-ckav-sm="mr-b-0 fs12">Our Story</span>
<h2 class="title f-1 fs46 bold-4" data-ckav-md="fs40" data-ckav-sm="fs30">Who we are</h2>
</div><!-- / SECTION TITLE -->
<!-- SLIDER -->
<div class="slider mr-b-30">
<div class="carousel-widget ctrl-3 light align-c overflow-none shadow-xlarge"
data-items="1"
data-nav="true"
data-pager="false"
data-itemrange="0,1|420,1|600,1|768,1|992,1|1200,1"
data-margin="30"
data-autoplay="false"
data-hauto="false"
data-in="false"
data-out="false"
data-center="false">
<div class="owl-carousel">
<div class="item">
<img src="images/about-img-01.jpg" class="rd-5" alt="image">
</div>
<div class="item">
<img src="images/about-img-02.jpg" class="rd-5" alt="image">
</div>
<div class="item">
<img src="images/about-img-03.jpg" class="rd-5" alt="image">
</div>
</div>
</div>
</div><!-- / SLIDER -->
<p class="fs20 f-2 txt-white op-07 w90 mr-auto" data-ckav-sm="fs16 w100">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin leo a dictum viverra. Nulla semper hendrerit sodales. Nunc a hendrerit ligula. Ut tincidunt bibendum dolor sed volutpat. Donec semper mi ut finibus tempor. Cras efficitur faucibus justo eu tempus. Nulla facilisi.
</p>
</div>
</div>
<!-- ======= END : OUR STORY ======= -->
<!--=================================
= OUR VISION & MISSION
==================================-->
<div class="section-02">
<div class="container-fluid">
<!-- SUB SECTION 1 -->
<div class="row align-items-center gt-0">
<div class="col-md-6">
<!-- SECTION TITLE -->
<div class="section-title mr-b-40" data-ckav-sm="mr-b-30">
<span class="txt-upper f-1 fs14 bold-3 mr-b-10 ltr-3 txt-default block" data-ckav-sm="mr-b-0 fs12">Target to achive</span>
<h2 class="title f-1 fs46 bold-4" data-ckav-md="fs40" data-ckav-sm="fs30">Our Mission</h2>
</div><!-- / SECTION TITLE -->
<p class="f-2 px-w500 mr-auto op-07" data-ckav-sm="w100 mr-b-30">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin leo a dictum viverra. Nulla semper hendrerit sodales. Nunc a hendrerit ligula. Ut tincidunt bibendum dolor sed volutpat. Donec semper mi ut finibus tempor. Cras efficitur faucibus justo eu tempus. Nulla facilisi.
</p>
</div>
<div class="col-md-6 min-px-h600" data-ckav-sm="h-reset min-px-h300 mr-b-60">
<div class="bg-holder full-wh z1">
<!-- OVERLAY -->
<b data-bgholder="overlay" class="full-wh z3" data-rgradient="y" data-rg-colors="rgba(255, 33, 79, 0.00)|rgba(255, 33, 79, 0)"></b>
<!-- BACKGROUND IMAGE -->
<b data-bgholder="bg-img" class="full-wh bg-cover bg-cc z1 rd-5" data-bg="images/about-img-05.jpg"></b>
</div>
</div>
</div>
<!-- / SUB SECTION 1 -->
<!-- SUB SECTION 1 -->
<div class="row align-items-center gt-0">
<div class="col-md-6">
<!-- SECTION TITLE -->
<div class="section-title mr-b-40" data-ckav-sm="mr-b-30">
<span class="txt-upper f-1 fs14 bold-3 mr-b-10 ltr-3 txt-default block" data-ckav-sm="mr-b-0 fs12">Look Forward</span>
<h2 class="title f-1 fs46 bold-4" data-ckav-md="fs40" data-ckav-sm="fs30">Our Vision</h2>
</div><!-- / SECTION TITLE -->
<p class="f-2 px-w500 mr-auto txt-white op-07" data-ckav-sm="w100">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin leo a dictum viverra. Nulla semper hendrerit sodales. Nunc a hendrerit ligula. Ut tincidunt bibendum dolor sed volutpat. Donec semper mi ut finibus tempor. Cras efficitur faucibus justo eu tempus. Nulla facilisi.
</p>
</div>
<div class="col-md-6 min-px-h600 order-md-first" data-ckav-sm="h-reset min-px-h300">
<div class="bg-holder full-wh z1">
<!-- OVERLAY -->
<b data-bgholder="overlay" class="full-wh z3" data-rgradient="y" data-rg-colors="rgba(255, 33, 79, 0.00)|rgba(255, 33, 79, 0)"></b>
<!-- BACKGROUND IMAGE -->
<b data-bgholder="bg-img" class="full-wh bg-cover bg-ct z1 rd-5" data-bg="images/about-img-04.jpg"></b>
</div>
</div>
</div>
<!-- / SUB SECTION 1 -->
</div>
</div>
<!-- ======= END : OUR VISION & MISSION ======= -->
<!--=================================
= OUR TEMA
==================================-->
<div class="section-03 pd-tb-100" data-ckav-sm="pd-tb-50">
<div class="container">
<!-- SECTION TITLE -->
<div class="section-title mr-b-40" data-ckav-sm="mr-b-30">
<span class="txt-upper f-1 fs14 bold-3 mr-b-10 ltr-3 txt-default block" data-ckav-sm="mr-b-0 fs12">Behind the success</span>
<h2 class="title f-1 fs46 bold-4" data-ckav-md="fs40" data-ckav-sm="fs30">Our Team</h2>
</div><!-- / SECTION TITLE -->
<div class="row">
<div class="col-md-4" data-ckav-sm="mr-b-30">
<div class="hover-box1 rd-5">
<div class="overlay flex-bl typo-light">
<div class="content mr-tiny z2 w100">
<span class="txt-upper f-1 fs11 bold-3 ltr-3 txt-white block">Marketing</span>
<h3 class="title f-1 fs30 bold-4" data-ckav-sm="fs24">Stela Warn</h3>
<div class="social-links">
<a href="#" target="_blank" class="sq30 fs16 mr-r-4 rd-2 bg-glass-light-01 iconbox btn-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" target="_blank" class="sq30 fs16 mr-r-4 rd-2 bg-glass-light-01 iconbox btn-white"><i class="fab fa-twitter"></i></a>
<a href="#" target="_blank" class="sq30 fs16 mr-r-4 rd-2 bg-glass-light-01 iconbox btn-white"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<b class="full-wh z1 l0" data-gradient="y" data-g-colors="rgba(102, 102, 255, 0.4)|rgba(102, 102, 255, 1)"></b>
</div>
<img src="images/about-img-07.jpg" alt="image">
</div>
</div>
<div class="col-md-4" data-ckav-sm="mr-b-30">
<div class="hover-box1 rd-5">
<div class="overlay flex-bl typo-light">
<div class="content mr-tiny z2 w100">
<span class="txt-upper f-1 fs11 bold-3 ltr-3 txt-white block">C E O</span>
<h3 class="title f-1 fs30 bold-4" data-ckav-sm="fs24">Mark Stef</h3>
<div class="social-links">
<a href="#" target="_blank" class="sq30 fs16 mr-r-4 rd-2 bg-glass-light-01 iconbox btn-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" target="_blank" class="sq30 fs16 mr-r-4 rd-2 bg-glass-light-01 iconbox btn-white"><i class="fab fa-twitter"></i></a>
<a href="#" target="_blank" class="sq30 fs16 mr-r-4 rd-2 bg-glass-light-01 iconbox btn-white"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<b class="full-wh z1 l0" data-gradient="y" data-g-colors="rgba(102, 102, 255, 0.4)|rgba(102, 102, 255, 1)"></b>
</div>
<img src="images/about-img-06.jpg" alt="image">
</div>
</div>
<div class="col-md-4">
<div class="hover-box1 rd-5">
<div class="overlay flex-bl typo-light">
<div class="content mr-tiny z2 w100">
<span class="txt-upper f-1 fs11 bold-3 ltr-3 txt-white block">Manager</span>
<h3 class="title f-1 fs30 bold-4" data-ckav-sm="fs24">Jaff Brown</h3>
<div class="social-links">
<a href="#" target="_blank" class="sq30 fs16 mr-r-4 rd-2 bg-glass-light-01 iconbox btn-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" target="_blank" class="sq30 fs16 mr-r-4 rd-2 bg-glass-light-01 iconbox btn-white"><i class="fab fa-twitter"></i></a>
<a href="#" target="_blank" class="sq30 fs16 mr-r-4 rd-2 bg-glass-light-01 iconbox btn-white"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<b class="full-wh z1 l0" data-gradient="y" data-g-colors="rgba(102, 102, 255, 0.4)|rgba(102, 102, 255, 1)"></b>
</div>
<img src="images/about-img-08.jpg" alt="image">
</div>
</div>
</div>
</div>
</div>
<!-- ======= END : OUR TEMA ======= -->
<!--=================================
= BRANDS
==================================-->
<div class="section-04 pd-tb-100 bg-dark" data-ckav-sm="pd-tb-50">
<div class="container">
<div class="row bdr-b bdr-op-light-2" data-ckav-sm="bdr-reset">
<div class="col-md-3 col-6 op-05 bdr-r bdr-op-light-2">
<div class="pd-30" data-ckav-sm="pd-10">
<img src="images/brand-logo1_light.png" alt="brand" data-ckav-sm="w80 mr-auto">
</div>
</div>
<div class="col-md-3 col-6 op-05 bdr-r bdr-op-light-2">
<div class="pd-30" data-ckav-sm="pd-10">
<img src="images/brand-logo2_light.png" alt="brand" data-ckav-sm="w80 mr-auto">
</div>
</div>
<div class="col-md-3 col-6 op-05 bdr-r bdr-op-light-2">
<div class="pd-30" data-ckav-sm="pd-10">
<img src="images/brand-logo3_light.png" alt="brand" data-ckav-sm="w80 mr-auto">
</div>
</div>
<div class="col-md-3 col-6 op-05">
<div class="pd-30" data-ckav-sm="pd-10">
<img src="images/brand-logo4_light.png" alt="brand" data-ckav-sm="w80 mr-auto">
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-6 op-05 bdr-r bdr-op-light-2">
<div class="pd-30" data-ckav-sm="pd-10">
<img src="images/brand-logo5_light.png" alt="brand" data-ckav-sm="w80 mr-auto">
</div>
</div>
<div class="col-md-3 col-6 op-05 bdr-r bdr-op-light-2">
<div class="pd-30" data-ckav-sm="pd-10">
<img src="images/brand-logo6_light.png" alt="brand" data-ckav-sm="w80 mr-auto">
</div>
</div>
<div class="col-md-3 col-6 op-05 bdr-r bdr-op-light-2">
<div class="pd-30" data-ckav-sm="pd-10">
<img src="images/brand-logo7_light.png" alt="brand" data-ckav-sm="w80 mr-auto">
</div>
</div>
<div class="col-md-3 col-6 op-05">
<div class="pd-30" data-ckav-sm="pd-10">
<img src="images/brand-logo8_light.png" alt="brand" data-ckav-sm="w80 mr-auto">
</div>
</div>
</div>
</div>
</div>
<!-- ======= END : BRANDS ======= -->
<!--=================================
= TESTIMONIALS
==================================-->
<div class="section-05 pd-tb-100" data-ckav-sm="pd-tb-50">
<div class="container">
<!-- SECTION TITLE -->
<div class="section-title mr-b-40" data-ckav-sm="mr-b-30">
<span class="txt-upper f-1 fs14 bold-3 mr-b-10 ltr-3 txt-default block" data-ckav-sm="mr-b-0 fs12">Testimonials</span>
<h2 class="title f-1 fs46 bold-4" data-ckav-md="fs40" data-ckav-sm="fs30">Client Story</h2>
</div><!-- / SECTION TITLE -->
<div class="carousel-widget ctrl-3 light align-c zoom-carousel overflow-none"
data-items="1"
data-nav="true"
data-pager="false"
data-itemrange="0,1|420,1|600,2|768,3|992,3|1200,3"
data-margin="30"
data-autoplay="true"
data-hauto="false"
data-in="false"
data-out="false"
data-center="true">
<div class="owl-carousel">
<div class="item">
<div class="content mr-t-40 rd-5">
<div class="info-obj img-t g30 align-c rd-5 large pd-40 pd-t-1 bg-dark">
<div class="img -mr-t-80"><a href="#" class="shadow-xlarge block rd"><img src="images/testimonial-img-01.jpg" class="rd bdr-10 bdr-default" alt="image"></a></div>
<div class="info">
<h3 class="title f-1 fs20 bold-4 mr-b-10" data-ckav-sm="fs24">Mark Tatd</h3>
<span class="txt-upper f-1 fs11 bold-3 ltr-3 txt-default block">Lorem Opsum Pvt Ltd</span>
<p class="f-2 mr-auto mr-t-30 mr-b-0 op-07">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin leo a dictum viverra. Nulla semper hendrerit sodales semper.
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content mr-t-40 rd-5">
<div class="info-obj img-t g30 align-c rd-5 large pd-40 pd-t-1 bg-dark">
<div class="img -mr-t-80"><a href="#" class="shadow-xlarge block rd"><img src="images/testimonial-img-02.jpg" class="rd bdr-10 bdr-default" alt="image"></a></div>
<div class="info">
<h3 class="title f-1 fs20 bold-4 mr-b-10" data-ckav-sm="fs24">Dina Stone</h3>
<span class="txt-upper f-1 fs11 bold-3 ltr-3 txt-default block">Aorem Tpsum Pvt Ltd</span>
<p class="f-2 mr-auto mr-t-30 mr-b-0 op-07">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin leo a dictum viverra. Nulla semper hendrerit sodales semper.
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content mr-t-40 rd-5">
<div class="info-obj img-t g30 align-c rd-5 large pd-40 pd-t-1 bg-dark">
<div class="img -mr-t-80"><a href="#" class="shadow-xlarge block rd"><img src="images/testimonial-img-03.jpg" class="rd bdr-10 bdr-default" alt="image"></a></div>
<div class="info">
<h3 class="title f-1 fs20 bold-4 mr-b-10" data-ckav-sm="fs24">Mont Abric</h3>
<span class="txt-upper f-1 fs11 bold-3 ltr-3 txt-default block">Yorem Ipsum Pvt Ltd</span>
<p class="f-2 mr-auto mr-t-30 mr-b-0 op-07">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin leo a dictum viverra. Nulla semper hendrerit sodales semper.
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content mr-t-40 rd-5">
<div class="info-obj img-t g30 align-c rd-5 large pd-40 pd-t-1 bg-dark">
<div class="img -mr-t-80"><a href="#" class="shadow-xlarge block rd"><img src="images/testimonial-img-04.jpg" class="rd bdr-10 bdr-default" alt="image"></a></div>
<div class="info">
<h3 class="title f-1 fs20 bold-4 mr-b-10" data-ckav-sm="fs24">Tuna Kelrt</h3>
<span class="txt-upper f-1 fs11 bold-3 ltr-3 txt-default block">Lorem ipsum Pvt Ltd</span>
<p class="f-2 mr-auto mr-t-30 mr-b-0 op-07">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin leo a dictum viverra. Nulla semper hendrerit sodales semper.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ======= END : TESTIMONIALS ======= -->
<!--=================================
= FOOTER
==================================-->
<footer class="pd-tb-30 bg-dark typo-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="#" target="_blank">Orbix - HTML Responsive Multi-Purpose Template</a> © <script>document.write(new Date().getFullYear());</script>
</div>
</div>
<div class="social-links op-06 mr-t-20">
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-facebook-f"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-twitter"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-google"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-youtube"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-tumblr"></i></a>
</div>
</div>
</footer>
<!-- ======= END : FOOTER ======= -->
</div>
</div>
<!-- ************** END : ABOUT PAGE ************** -->
<!--
************************************************************
* SERVICES PAGE
*************************************************************
-->
<div data-thispage="servicepage" class="otherpage ckav-pages servicepage bg-light typo-light align-c pd-t-40">
<div class="container-fluid pd-0 mr-t-200" data-ckav-sm="mr-t-60">
<!--=================================
= SLIDER
==================================-->
<div class="section-06 pd-b-100" data-ckav-sm="pd-b-50">
<div class="container">
<!-- SLIDER -->
<div class="slider mr-b-30">
<div class="carousel-widget ctrl-3 light align-c overflow-none shadow-xlarge"
data-items="1"
data-nav="true"
data-pager="false"
data-itemrange="0,1|420,1|600,1|768,1|992,1|1200,1"
data-margin="30"
data-autoplay="false"
data-hauto="false"
data-in="false"
data-out="false"
data-center="false">
<div class="owl-carousel">
<div class="item">
<img src="images/service-img-01.jpg" class="rd-5" alt="image">
</div>
<div class="item">
<img src="images/service-img-02.jpg" class="rd-5" alt="image">
</div>
</div>
</div>
</div><!-- / SLIDER -->
<p class="fs20 f-2 txt-white op-07 w90 mr-auto mr-b-0" data-ckav-sm="fs16 w100">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin leo a dictum viverra. Nulla semper hendrerit sodales. Nunc a hendrerit ligula. Ut tincidunt bibendum dolor sed volutpat. Donec semper mi ut finibus tempor. Cras efficitur faucibus justo eu tempus. Nulla facilisi.
</p>
</div>
</div>
<!-- ======= END : SLIDER ======= -->
<!--=================================
= CALL TO ACTION
==================================-->
<div class="section-07">
<div class="container">
<div class="bg-default typo-light pd-40 rd-5">
<div class="row align-items-center">
<div class="col-md-10 align-l">
<h3 class="title f-1 fs24 bold-n mr-b-0 w80" data-ckav-md="fs20" data-ckav-sm="fs20 align-c mr-b-30 w100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin leo a dictum viverra.</h3>
</div>
<div class="col-md-2 align-r" data-ckav-sm="align-c">
<a href="#" target="_blank" class="sq80 fs26 mr-r-4 rd iconbox bdr-2 btn-white hov-btn-white"><i class="fas fa-envelope"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- ======= END : CALL TO ACTION ======= -->
<!--=================================
= OUR SERVICES
==================================-->
<div class="section-08 pd-tb-100" data-ckav-sm="pd-tb-50">
<div class="container">
<!-- SECTION TITLE -->
<div class="section-title mr-b-40">
<span class="txt-upper f-1 fs14 bold-3 mr-b-10 ltr-3 txt-default block" data-ckav-sm="mr-b-0">Our services</span>
<h2 class="title f-1 fs46 bold-4 mr-b-40" data-ckav-md="fs40" data-ckav-sm="fs30">Specialisation</h2>
</div><!-- / SECTION TITLE -->
<div class="row">
<div class="col-md-4">
<div class="info-obj img-t g10 medium align-c shadow-xlarge bg-dark typo-light pd-40 rd-5 bdr-1 bdr-op-1">
<div class="img"><span class="iconwrp rd txt-default"><i class="pe-7s-paint-bucket"></i></span></div>
<div class="info">
<h3 class="title f-1 fs20 bold-4 mr-b-20" data-ckav-sm="fs24">Design</h3>
<p class="f-2 mr-auto mr-b-0 op-07">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin leo a dictum viverra. Nulla semper hendrerit sodales semper.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="info-obj img-t g10 medium align-c shadow-xlarge bg-dark typo-light pd-40 rd-5 bdr-1 bdr-op-1">
<div class="img"><span class="iconwrp rd txt-default"><i class="pe-7s-headphones"></i></span></div>
<div class="info">
<h3 class="title f-1 fs20 bold-4 mr-b-20" data-ckav-sm="fs24">Support</h3>
<p class="f-2 mr-auto mr-b-0 op-07">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin leo a dictum viverra. Nulla semper hendrerit sodales semper.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="info-obj img-t g10 medium align-c shadow-xlarge bg-dark typo-light pd-40 rd-5 bdr-1 bdr-op-1">
<div class="img"><span class="iconwrp rd txt-default"><i class="pe-7s-display2"></i></span></div>
<div class="info">
<h3 class="title f-1 fs20 bold-4 mr-b-20" data-ckav-sm="fs24">Code</h3>
<p class="f-2 mr-auto mr-b-0 op-07">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin leo a dictum viverra. Nulla semper hendrerit sodales semper.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ======= END : OUR SERVICES ======= -->
<!--=================================
= NEWS
==================================-->
<div class="section-09 pd-tb-100 bg-dark" data-ckav-sm="pd-tb-50">
<div class="container">
<!-- SECTION TITLE -->
<div class="section-title mr-b-40 typo-light" data-ckav-sm="mr-b-30">
<span class="txt-upper f-1 fs14 bold-3 mr-b-10 ltr-3 txt-default block" data-ckav-sm="mr-b-0 fs12">Be updated</span>
<h2 class="title f-1 fs46 bold-4" data-ckav-md="fs40" data-ckav-sm="fs30">Trend News</h2>
</div><!-- / SECTION TITLE -->
<div class="masonry-wrp w100">
<div class="masonry-grid row gt20 mb20 ratio-square" data-masonry-grid>
<div class="masonry-item col-md-6 web icons">
<figure class="hover-box1 flex-cc align-c typo-light">
<div class="overlay flex-cc">
<div class="content pd-mini z2">
<a href="#" class="btn btn-default solid mini round txt-upper">Read more</a>
</div>
<b class="full-wh bg-dark op-08 z1"></b>
</div>
<div class="pos-abs b0 l0 align-l z1 hover-hide w100 pd-30">
<span class="txt-upper f-1 fs11 tag-text bold-3 mr-b-10 ltr-3 txt-white rd-5 bg-default">News</span>
<h3 class="title fs30 w75 mr-b-0 f-1 bold-4">News title</h3>
<span class="txt-upper f-1 fs11 bold-4 mr-b-10 txt-white block" data-ckav-sm="mr-b-0 fs12">D : 8th Feb 2019</span>
</div>
<div class="bg-cc bg-cover full-wh img-wrp" data-bg="images/news-img-03.jpg"><b class="full-wh" data-gradient="y" data-g-colors="rgba(102,102,255, 0.0)|rgba(102,102,255, 0.8)"></b></div>
</figure>
</div>
<div class="masonry-item col-md-6 design">
<figure class="hover-box1 flex-cc align-c typo-light half">
<div class="overlay flex-cc">
<div class="content pd-mini z2">
<a href="#" class="btn btn-default solid mini round txt-upper">Read more</a>
</div>
<b class="full-wh bg-dark op-08 z1"></b>
</div>
<div class="pos-abs b0 l0 align-l z1 hover-hide w100 pd-30">
<span class="txt-upper f-1 fs11 tag-text bold-3 mr-b-10 ltr-3 txt-white rd-5 bg-default">News</span>
<h3 class="title fs30 w75 mr-b-0 f-1 bold-4">News title</h3>
<span class="txt-upper f-1 fs11 bold-4 mr-b-10 txt-white block" data-ckav-sm="mr-b-0 fs12">D : 8th Feb 2019</span>
</div>
<div class="bg-cc bg-cover full-wh img-wrp" data-bg="images/news-img-02.jpg"><b style="bottom: -1px;" class="full-wh" data-gradient="y" data-g-colors="rgba(102,102,255, 0)|rgba(102,102,255, 0.8)"></b></div>
</figure>
</div>
<div class="masonry-item col-md-6 design">
<figure class="hover-box1 flex-cc align-c typo-light half">
<div class="overlay flex-cc">
<div class="content pd-mini z2">
<a href="#" class="btn btn-default solid mini round txt-upper">Read more</a>
</div>
<b class="full-wh bg-dark op-08 z1"></b>
</div>
<div class="pos-abs b0 l0 align-l z1 hover-hide w100 pd-30">
<span class="txt-upper f-1 fs11 tag-text bold-3 mr-b-10 ltr-3 txt-white rd-5 bg-default">News</span>
<h3 class="title fs30 w75 mr-b-0 f-1 bold-4">News title</h3>
<span class="txt-upper f-1 fs11 bold-4 mr-b-10 txt-white block" data-ckav-sm="mr-b-0 fs12">D : 8th Feb 2019</span>
</div>
<div class="bg-cc bg-cover full-wh img-wrp" data-bg="images/news-img-01.jpg"><b class="full-wh" data-gradient="y" data-g-colors="rgba(102,102,255, 0)|rgba(102,102,255, 0.8)"></b></div>
</figure>
</div>
</div>
</div>
</div>
</div>
<!-- ======= END : NEWS ======= -->
<!--=================================
= COUNTER
==================================-->
<div class="section-10 pd-tb-100" data-ckav-sm="pd-tb-50">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="info-obj img-t g20 small align-c count-box bdr-1 bdr-op-light-1 rd-5 pd-40">
<div class="img"><span class="iconwrp txt-default"><i class="pe-7s-medal"></i></span></div>
<div class="info">
<div class="px-h50 mr-auto px-w1 bdr-r mr-b-10 bdr-op-liht-1 full-visible" data-ckav-sm="hide"></div>
<h5 class="title mini f-1 bold-3" data-ckav-sm="fs24 mr-b-0">Quality</h5>
<h3 class="title large bold-1" data-ckav-sm="fs30 mr-b-0"><span class="count">100</span>%</h3>
</div>
</div>
</div>
<div class="col-md-3">
<div class="info-obj img-t g20 small align-c count-box bdr-1 bdr-op-light-1 rd-5 pd-40">
<div class="img"><span class="iconwrp txt-default"><i class="pe-7s-diamond"></i></span></div>
<div class="info">
<div class="px-h50 mr-auto px-w1 bdr-r mr-b-10 bdr-op-liht-1 full-visible" data-ckav-sm="hide"></div>
<h5 class="title mini f-1 bold-3" data-ckav-sm="fs24 mr-b-0">Experience</h5>
<h3 class="title large bold-1" data-ckav-sm="fs30 mr-b-0"><span class="count">13</span></h3>
</div>
</div>
</div>
<div class="col-md-3">
<div class="info-obj img-t g20 small align-c count-box bdr-1 bdr-op-light-1 rd-5 pd-40">
<div class="img"><span class="iconwrp txt-default"><i class="pe-7s-user"></i></span></div>
<div class="info">
<div class="px-h50 mr-auto px-w1 bdr-r mr-b-10 bdr-op-liht-1 full-visible" data-ckav-sm="hide"></div>
<h5 class="title mini f-1 bold-3" data-ckav-sm="fs24 mr-b-0">Members</h5>
<h3 class="title large bold-1" data-ckav-sm="fs30 mr-b-0"><span class="count">140</span></h3>
</div>
</div>
</div>
<div class="col-md-3">
<div class="info-obj img-t g20 small align-c count-box bdr-1 bdr-op-light-1 rd-5 pd-40">
<div class="img"><span class="iconwrp txt-default"><i class="pe-7s-like2"></i></span></div>
<div class="info">
<div class="px-h50 mr-auto px-w1 bdr-r mr-b-10 bdr-op-liht-1 full-visible" data-ckav-sm="hide"></div>
<h5 class="title mini f-1 bold-3" data-ckav-sm="fs24 mr-b-0">Happy Customer</h5>
<h3 class="title large bold-1" data-ckav-sm="fs30 mr-b-0"><span class="count">5000</span>+</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ======= END : COUNTER ======= -->
<!--=================================
= FOOTER
==================================-->
<footer class="pd-tb-30 bg-dark typo-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="#" target="_blank">Orbix - HTML Responsive Multi-Purpose Template</a> © <script>document.write(new Date().getFullYear());</script>
</div>
</div>
<div class="social-links op-06 mr-t-20">
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-facebook-f"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-twitter"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-google"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-youtube"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-tumblr"></i></a>
</div>
</div>
</footer>
<!-- ======= END : FOOTER ======= -->
</div>
</div>
<!-- ************** END : SERVICES PAGE ************** -->
<!--
************************************************************
* CONTACT PAGE
*************************************************************
-->
<div data-thispage="contactpage" class="otherpage ckav-pages contactpage bg-light typo-light align-c pd-t-40">
<div class="container-fluid pd-0 mr-t-200" data-ckav-sm="mr-t-60">
<!--=================================
= GOOGLE MAP AND CONTACT INFO AND FORM
==================================-->
<div class="section-11 pd-b-100">
<div class="container">
<!-- GOOGLE MAP -->
<div class="px-h500 w100" data-ckav-sm="w100 mr-b-30">
<iframe class="w100 h100 shadow-xlarge rd-5" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d158857.7281094985!2d-0.24167902218915646!3d51.52877184006555!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C+UK!5e0!3m2!1sen!2sin!4v1549624476630" style="border:0" allowfullscreen></iframe>
</div><!-- / GOOGLE MAP -->
<!-- CONTACT INFO -->
<div class="px-w600 pd-40 bg-default typo-light mr-auto relative -mr-t-100 shadow-large mr-b-60" data-ckav-sm="w100 mr-0 mr-b-50">
<p class="fs20">
PO Box 16122,<br>
Collins Street West,<br>
Victoria 8007, Australia
</p>
<p class="fs16">
<strong>Phone:</strong> +1234-567-890 <strong>| Email:</strong> [email protected]
</p>
</div><!-- / CONTACT INFO -->
<!-- SECTION TITLE -->
<div class="section-title mr-b-60" data-ckav-sm="mr-b-30">
<span class="txt-upper f-1 fs14 bold-3 mr-b-10 ltr-3 txt-default block" data-ckav-sm="mr-b-0 fs12">Drop us line</span>
<h2 class="title f-1 fs46 bold-4" data-ckav-md="fs40" data-ckav-sm="fs30">Contact Us</h2>
</div><!-- / SECTION TITLE -->
<!-- CONTACT FORM -->
<form action="form-data/formdata.php" class="form-widget align-l px-w500 mr-auto align-c" novalidate="novalidate" data-ckav-sm="align-c w100">
<div class="field-wrp mr-b-40">
<input type="hidden" name="to" value="[email protected]">
<div class="row gt10">
<div class="col-md-6">
<div class="form-group">
<input class="form-control form-control-light bb" data-label="Name" required="" data-msg="Please enter name." type="text" name="name" placeholder="Enter your name" aria-required="true">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="form-control form-control-light bb" data-label="Email" required="" data-msg="Please enter email." type="email" name="email" placeholder="Enter your email" aria-required="true">
</div>
</div>
</div>
<div class="form-group">
<input class="form-control form-control-light bb" required="" data-label="Phone" data-msg="Please phone number." type="text" name="phone" placeholder="Enter your phone number" aria-required="true">
</div>
<div class="form-group">
<textarea class="form-control form-control-light bb" data-label="Message" required="" data-msg="Please enter your message." name="message" placeholder="Add your message" cols="30" rows="5" aria-required="true"></textarea>
</div>
</div>
<button type="submit" class="btn solid btn-default txt-upper round mr-auto"><i class="fa fa-envelope-o"></i> Send Message</button>
</form><!-- / CONTACT FORM -->
</div>
</div>
<!-- ======= END : GOOGLE MAP AND CONTACT INFO ======= -->
<!--=================================
= FOOTER
==================================-->
<footer class="pd-tb-30 bg-dark typo-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="#" target="_blank">Orbix - HTML Responsive Multi-Purpose Template</a> © <script>document.write(new Date().getFullYear());</script>
</div>
</div>
<div class="social-links op-06 mr-t-20">
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-facebook-f"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-twitter"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-google"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-youtube"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-tumblr"></i></a>
</div>
</div>
</footer>
<!-- ======= END : FOOTER ======= -->
</div>
</div>
<!-- ************** END : CONTACT PAGE ************** -->
<!--
************************************************************
* BLOG LITS PAGE
*************************************************************
-->
<div data-thispage="bloglistpage" class="otherpage ckav-pages bloglistpage bg-light typo-light align-c pd-t-40">
<div class="container-fluid pd-0 mr-t-200" data-ckav-sm="mr-t-60">
<!--=================================
= BLOG LIST
==================================-->
<div class="bloglist pd-b-100">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="hover-box1 min-px-h500 mr-b-30">
<div class="full-wh z2 pd-mini flex-bl" data-ckav-sm="pd-30">
<div class="align-l z2 pos-rel">
<div class="info typo-light">
<ul class="inline-grid align-l fs12 mr-b-20 grid-mid txt-white bold-4 bg-glass-light-02 pd-t-5 pd-b-5 pd-lr-10 rd-10">
<li><a href="http://ckavart.com/">25 Apr 2016</a></li>
<li><span class="mr-lr-5">|</span></li>
<li><a href="http://ckavart.com/">By Admin</a></li>
<li><span class="mr-lr-5">|</span></li>
<li><a href="http://ckavart.com/">General</a></li>
</ul>
<h3 class="title mini bold-4 f-1">Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus enim sequi pariatur. Vitae ea, ipsam assumenda unde tempore rem maxime laudantium rerum non incidunt sequi, suscipit modi id. Impedit, obcaecati</p>
<a href="#" data-pagelinkto="blogsinglepage" class="btn btn-white mini round txt-upper hov-btn-white">Learn more...</a>
</div>
</div><!-- info box -->
<div class="full-wh" data-gradient="y" data-g-colors="rgba(102,102,255, 0.3)|rgba(102,102,255, 0.8)"></div>
</div>
<b class="bg-cc bg-cover full-wh img-wrp" data-bg="images/800x600-blog-01.jpg"></b>
</div>
</div>
<div class="col-md-4">
<div class="hover-box1 min-px-h500 mr-b-30">
<div class="full-wh z2 pd-mini flex-bl" data-ckav-sm="pd-30">
<div class="align-l z2 pos-rel">
<div class="info typo-light">
<ul class="inline-grid align-l fs12 mr-b-20 grid-mid txt-white bold-4 bg-glass-light-02 pd-t-5 pd-b-5 pd-lr-10 rd-10">
<li><a href="http://ckavart.com/">25 Apr 2016</a></li>
<li><span class="mr-lr-5">|</span></li>
<li><a href="http://ckavart.com/">By Admin</a></li>
<li><span class="mr-lr-5">|</span></li>
<li><a href="http://ckavart.com/">General</a></li>
</ul>
<h3 class="title mini bold-4 f-1">Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus enim sequi pariatur. Vitae ea, ipsam assumenda unde tempore rem maxime laudantium rerum non incidunt sequi, suscipit modi id. Impedit, obcaecati</p>
<a href="#" data-pagelinkto="blogsinglepage" class="btn btn-white mini round txt-upper hov-btn-white">Learn more...</a>
</div>
</div><!-- info box -->
<div class="full-wh" data-gradient="y" data-g-colors="rgba(102,102,255, 0.3)|rgba(102,102,255, 0.8)"></div>
</div>
<b class="bg-cc bg-cover full-wh img-wrp" data-bg="images/800x600-blog-02.jpg"></b>
</div>
</div>
<div class="col-md-4">
<div class="hover-box1 min-px-h500 mr-b-30">
<div class="full-wh z2 pd-mini flex-bl" data-ckav-sm="pd-30">
<div class="align-l z2 pos-rel">
<div class="info typo-light">
<ul class="inline-grid align-l fs12 mr-b-20 grid-mid txt-white bold-4 bg-glass-light-02 pd-t-5 pd-b-5 pd-lr-10 rd-10">
<li><a href="http://ckavart.com/">25 Apr 2016</a></li>
<li><span class="mr-lr-5">|</span></li>
<li><a href="http://ckavart.com/">By Admin</a></li>
<li><span class="mr-lr-5">|</span></li>
<li><a href="http://ckavart.com/">General</a></li>
</ul>
<h3 class="title mini bold-4 f-1">Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus enim sequi pariatur. Vitae ea, ipsam assumenda unde tempore rem maxime laudantium rerum non incidunt sequi, suscipit modi id. Impedit, obcaecati</p>
<a href="#" data-pagelinkto="blogsinglepage" class="btn btn-white mini round txt-upper hov-btn-white">Learn more...</a>
</div>
</div><!-- info box -->
<div class="full-wh" data-gradient="y" data-g-colors="rgba(102,102,255, 0.3)|rgba(102,102,255, 0.8)"></div>
</div>
<b class="bg-cc bg-cover full-wh img-wrp" data-bg="images/800x600-blog-03.jpg"></b>
</div>
</div>
<div class="col-md-4">
<div class="hover-box1 min-px-h500 mr-b-30">
<div class="full-wh z2 pd-mini flex-bl" data-ckav-sm="pd-30">
<div class="align-l z2 pos-rel">
<div class="info typo-light">
<ul class="inline-grid align-l fs12 mr-b-20 grid-mid txt-white bold-4 bg-glass-light-02 pd-t-5 pd-b-5 pd-lr-10 rd-10">
<li><a href="http://ckavart.com/">25 Apr 2016</a></li>
<li><span class="mr-lr-5">|</span></li>
<li><a href="http://ckavart.com/">By Admin</a></li>
<li><span class="mr-lr-5">|</span></li>
<li><a href="http://ckavart.com/">General</a></li>
</ul>
<h3 class="title mini bold-4 f-1">Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus enim sequi pariatur. Vitae ea, ipsam assumenda unde tempore rem maxime laudantium rerum non incidunt sequi, suscipit modi id. Impedit, obcaecati</p>
<a href="#" data-pagelinkto="blogsinglepage" class="btn btn-white mini round txt-upper hov-btn-white">Learn more...</a>
</div>
</div><!-- info box -->
<div class="full-wh" data-gradient="y" data-g-colors="rgba(102,102,255, 0.3)|rgba(102,102,255, 0.8)"></div>
</div>
<b class="bg-cc bg-cover full-wh img-wrp" data-bg="images/800x600-blog-04.jpg"></b>
</div>
</div>
<div class="col-md-4">
<div class="hover-box1 min-px-h500 mr-b-30">
<div class="full-wh z2 pd-mini flex-bl" data-ckav-sm="pd-30">
<div class="align-l z2 pos-rel">
<div class="info typo-light">
<ul class="inline-grid align-l fs12 mr-b-20 grid-mid txt-white bold-4 bg-glass-light-02 pd-t-5 pd-b-5 pd-lr-10 rd-10">
<li><a href="http://ckavart.com/">25 Apr 2016</a></li>
<li><span class="mr-lr-5">|</span></li>
<li><a href="http://ckavart.com/">By Admin</a></li>
<li><span class="mr-lr-5">|</span></li>
<li><a href="http://ckavart.com/">General</a></li>
</ul>
<h3 class="title mini bold-4 f-1">Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus enim sequi pariatur. Vitae ea, ipsam assumenda unde tempore rem maxime laudantium rerum non incidunt sequi, suscipit modi id. Impedit, obcaecati</p>
<a href="#" data-pagelinkto="blogsinglepage" class="btn btn-white mini round txt-upper hov-btn-white">Learn more...</a>
</div>
</div><!-- info box -->
<div class="full-wh" data-gradient="y" data-g-colors="rgba(102,102,255, 0.3)|rgba(102,102,255, 0.8)"></div>
</div>
<b class="bg-cc bg-cover full-wh img-wrp" data-bg="images/800x600-blog-05.jpg"></b>
</div>
</div>
<div class="col-md-4">
<div class="hover-box1 min-px-h500 mr-b-30">
<div class="full-wh z2 pd-mini flex-bl" data-ckav-sm="pd-30">
<div class="align-l z2 pos-rel">
<div class="info typo-light">
<ul class="inline-grid align-l fs12 mr-b-20 grid-mid txt-white bold-4 bg-glass-light-02 pd-t-5 pd-b-5 pd-lr-10 rd-10">
<li><a href="http://ckavart.com/">25 Apr 2016</a></li>
<li><span class="mr-lr-5">|</span></li>
<li><a href="http://ckavart.com/">By Admin</a></li>
<li><span class="mr-lr-5">|</span></li>
<li><a href="http://ckavart.com/">General</a></li>
</ul>
<h3 class="title mini bold-4 f-1">Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus enim sequi pariatur. Vitae ea, ipsam assumenda unde tempore rem maxime laudantium rerum non incidunt sequi, suscipit modi id. Impedit, obcaecati</p>
<a href="#" data-pagelinkto="blogsinglepage" class="btn btn-white mini round txt-upper hov-btn-white">Learn more...</a>
</div>
</div><!-- info box -->
<div class="full-wh" data-gradient="y" data-g-colors="rgba(102,102,255, 0.3)|rgba(102,102,255, 0.8)"></div>
</div>
<b class="bg-cc bg-cover full-wh img-wrp" data-bg="images/800x600-blog-06.jpg"></b>
</div>
</div>
</div>
<div class="align-c mr-t-60" data-ckav-sm="mr-t-30">
<ul class="inline-grid grid-mid">
<li class="mr-r-10"><a href="http://ckavart.com/" class="btn btn-default bdr-glass small" data-ckav-sm="mini"><i class="fas fa-long-arrow-alt-left mr-r-4" data-ckav-sm="hide"></i> Prev</a></li>
<li><a href="http://ckavart.com/" data-ckav-sm="mini" class="btn btn-white bdr-op-light-1 mr-lr-5 active small">1</a></li>
<li><a href="http://ckavart.com/" data-ckav-sm="mini" class="btn btn-white bdr-op-light-1 mr-lr-5 small">2</a></li>
<li><a href="http://ckavart.com/" data-ckav-sm="mini" class="btn btn-white bdr-op-light-1 mr-lr-5 small">3</a></li>
<li class="mr-l-10"><a href="http://ckavart.com/" class="btn btn-default bdr-glass small">Next <i class="fas fa-long-arrow-alt-right mr-l-4" data-ckav-sm="hide"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- ======= END : BLOG LIST ======= -->
<!--=================================
= FOOTER
==================================-->
<footer class="pd-tb-30 bg-dark typo-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="#" target="_blank">Orbix - HTML Responsive Multi-Purpose Template</a> © <script>document.write(new Date().getFullYear());</script>
</div>
</div>
<div class="social-links op-06 mr-t-20">
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-facebook-f"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-twitter"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-google"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-youtube"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-tumblr"></i></a>
</div>
</div>
</footer>
<!-- ======= END : FOOTER ======= -->
</div>
</div>
<!-- ************** END : BLOG LIST PAGE ************** -->
<!--
************************************************************
* PORTFOLIO
*************************************************************
-->
<div data-thispage="portfoliopage" class="otherpage ckav-pages portfoliopage bg-light typo-light align-c pd-t-40">
<div class="container-fluid pd-0 mr-t-200" data-ckav-sm="mr-t-60">
<!--=================================
= MASONRY GRID
==================================-->
<div class="masonry-wrp w100 pd-20">
<!-- FILTER LIST -->
<div class="filter-wrp mr-b-mini align-c">
<ul class="inline-grid filters" data-ckav-sm="reset-grid">
<li class="btn btn-default txt-white hov-txt-white mini rd-5 mr-4 bdr-op-light-1 active" data-filter="*">All</li>
<li class="btn btn-default txt-white hov-btn-default mini rd-5 mr-4 bdr-op-light-1" data-filter=".web">Web</li>
<li class="btn btn-default txt-white hov-btn-default mini rd-5 mr-4 bdr-op-light-1" data-filter=".advert">Advertising</li>
<li class="btn btn-default txt-white hov-btn-default mini rd-5 mr-4 bdr-op-light-1" data-filter=".brand">Branding</li>
<li class="btn btn-default txt-white hov-btn-default mini rd-5 mr-4 bdr-op-light-1" data-filter=".design">Design</li>
<li class="btn btn-default txt-white hov-btn-default mini rd-5 mr-4 bdr-op-light-1" data-filter=".photography">Photography</li>
<li class="btn btn-default txt-white hov-btn-default mini rd-5 mr-4 bdr-op-light-1" data-filter=".icons">Icons</li>
</ul>
</div><!-- / FILTER LIST -->
<div class="masonry-grid row gt20 mb20 ratio-square" data-masonry-grid>
<div class="masonry-item col-md-6 web icons">
<figure class="hover-box1">
<div class="portfolio-item">
<a href="#" data-pagelinkto="portfoliosinglepage" class="full-wh z3"></a>
<div class="overlay z2 pd-tiny flex-bl typo-light">
<a href="#" data-pagelinkto="portfoliosinglepage" class="sq60 fs40 iconbox r20 t20 pos-abs z1 txt-default"><i class="pe-7s-right-arrow"></i></a>
<div class="content pos-rel z1 ani-right w100 align-c">
<span class="mr-lr-5 fs11 txt-upper">Web</span>
<span class="mr-lr-5 fs11 txt-upper">|</span>
<span class="mr-lr-5 fs11 txt-upper">Icons</span>
<hr class="mr-tb-10 px-w100 mr-auto bdr-default">
<h3 class="title fs30 mr-b-0 f-1 bold-4">Portfolio title</h3>
<p class="mr-0 fs13 op-06">Project description text content</p>
</div>
<b class="bg-dark op-09 full-wh"></b>
</div>
<b class="full-wh bg-cover bg-cc" data-bg="images/portfolio-img-01.jpg"></b>
</div>
</figure>
</div>
<div class="masonry-item col-md-3 advert brand">
<figure class="hover-box1">
<div class="portfolio-item">
<a href="#" data-pagelinkto="portfoliosinglepage" class="full-wh z3"></a>
<div class="overlay z2 pd-tiny flex-bl typo-light">
<a href="#" data-pagelinkto="portfoliosinglepage" class="sq60 fs40 iconbox r20 t20 pos-abs z1 txt-default"><i class="pe-7s-right-arrow"></i></a>
<div class="content pos-rel z1 ani-right w100">
<span class="mr-lr-5 fs11 txt-upper">Advertising</span>
<span class="mr-lr-5 fs11 txt-upper">|</span>
<span class="mr-lr-5 fs11 txt-upper">Branding</span>
<hr class="mr-tb-10 px-w100 mr-auto bdr-default">
<h3 class="title fs30 mr-b-0 f-1 bold-4">Portfolio title</h3>
<p class="mr-0 fs12 op-06">Project description text content</p>
</div>
<b class="bg-dark op-09 full-wh"></b>
</div>
<b class="full-wh bg-cover bg-cc" data-bg="images/portfolio-img-02.jpg"></b>
</div>
</figure>
</div>
<div class="masonry-item col-md-3 brand design">
<figure class="hover-box1">
<div class="portfolio-item">
<a href="#" data-pagelinkto="portfoliosinglepage" class="full-wh z3"></a>
<div class="overlay z2 pd-tiny flex-bl typo-light">
<a href="#" data-pagelinkto="portfoliosinglepage" class="sq60 fs40 iconbox r20 t20 pos-abs z1 txt-default"><i class="pe-7s-right-arrow"></i></a>
<div class="content pos-rel z1 ani-right w100">
<span class="mr-lr-5 fs11 txt-upper">Brand</span>
<span class="mr-lr-5 fs11 txt-upper">|</span>
<span class="mr-lr-5 fs11 txt-upper">Design</span>
<hr class="mr-tb-10 px-w100 mr-auto bdr-default">
<h3 class="title fs30 mr-b-0 f-1 bold-4">Portfolio title</h3>
<p class="mr-0 fs12 op-06">Project description text content</p>
</div>
<b class="bg-dark op-09 full-wh"></b>
</div>
<b class="full-wh bg-cover bg-cc" data-bg="images/portfolio-img-03.jpg"></b>
</div>
</figure>
</div>
<div class="masonry-item col-md-6 design">
<figure class="hover-box1 half">
<div class="portfolio-item">
<a href="#" data-pagelinkto="portfoliosinglepage" class="full-wh z3"></a>
<div class="overlay z2 pd-tiny flex-bl typo-light">
<a href="#" data-pagelinkto="portfoliosinglepage" class="sq60 fs40 iconbox r20 t20 pos-abs z1 txt-default"><i class="pe-7s-right-arrow"></i></a>
<div class="content pos-rel z1 ani-right w100">
<span class="mr-lr-5 fs11 txt-upper">Design</span>
<hr class="mr-tb-10 px-w100 mr-auto bdr-default">
<h3 class="title fs30 mr-b-0 f-1 bold-4">Portfolio title</h3>
<p class="mr-0 fs12 op-06">Project description text content</p>
</div>
<b class="bg-dark op-09 full-wh"></b>
</div>
<b class="full-wh bg-cover bg-cc" data-bg="images/portfolio-img-04.jpg"></b>
</div>
</figure>
</div>
<div class="masonry-item col-md-3 photography">
<figure class="hover-box1">
<div class="portfolio-item">
<a href="#" data-pagelinkto="portfoliosinglepage" class="full-wh z3"></a>
<div class="overlay z2 pd-tiny flex-bl typo-light">
<a href="#" data-pagelinkto="portfoliosinglepage" class="sq60 fs40 iconbox r20 t20 pos-abs z1 txt-default"><i class="pe-7s-right-arrow"></i></a>
<div class="content pos-rel z1 ani-right w100">
<span class="mr-lr-5 fs11 txt-upper">photography</span>
<hr class="mr-tb-10 px-w100 mr-auto bdr-default">
<h3 class="title fs30 mr-b-0 f-1 bold-4">Portfolio title</h3>
<p class="mr-0 fs12 op-06">Project description text content</p>
</div>
<b class="bg-dark op-09 full-wh"></b>
</div>
<b class="full-wh bg-cover bg-cc" data-bg="images/portfolio-img-05.jpg"></b>
</div>
</figure>
</div>
<div class="masonry-item col-md-3 icons">
<figure class="hover-box1">
<div class="portfolio-item">
<a href="#" data-pagelinkto="portfoliosinglepage" class="full-wh z3"></a>
<div class="overlay z2 pd-tiny flex-bl typo-light">
<a href="#" data-pagelinkto="portfoliosinglepage" class="sq60 fs40 iconbox r20 t20 pos-abs z1 txt-default"><i class="pe-7s-right-arrow"></i></a>
<div class="content pos-rel z1 ani-right w100">
<span class="mr-lr-5 fs11 txt-upper">Icons</span>
<hr class="mr-tb-10 px-w100 mr-auto bdr-default">
<h3 class="title fs30 mr-b-0 f-1 bold-4">Portfolio title</h3>
<p class="mr-0 fs12 op-06">Project description text content</p>
</div>
<b class="bg-dark op-09 full-wh"></b>
</div>
<b class="full-wh bg-cover bg-cc" data-bg="images/portfolio-img-06.jpg"></b>
</div>
</figure>
</div>
<div class="masonry-item col-md-6 web">
<figure class="hover-box1">
<div class="portfolio-item">
<a href="#" data-pagelinkto="portfoliosinglepage" class="full-wh z3"></a>
<div class="overlay z2 pd-tiny flex-bl typo-light">
<a href="#" data-pagelinkto="portfoliosinglepage" class="sq60 fs40 iconbox r20 t20 pos-abs z1 txt-default"><i class="pe-7s-right-arrow"></i></a>
<div class="content pos-rel z1 ani-right w100">
<span class="mr-lr-5 fs11 txt-upper">Web</span>
<hr class="mr-tb-10 px-w100 mr-auto bdr-default">
<h3 class="title fs30 mr-b-0 f-1 bold-4">Portfolio title</h3>
<p class="mr-0 fs12 op-06">Project description text content</p>
</div>
<b class="bg-dark op-09 full-wh"></b>
</div>
<b class="full-wh bg-cover bg-cc" data-bg="images/portfolio-img-07.jpg"></b>
</div>
</figure>
</div>
<div class="masonry-item col-md-6 advert">
<figure class="hover-box1 half">
<div class="portfolio-item">
<a href="#" data-pagelinkto="portfoliosinglepage" class="full-wh z3"></a>
<div class="overlay z2 pd-tiny flex-bl typo-light">
<a href="#" data-pagelinkto="portfoliosinglepage" class="sq60 fs40 iconbox r20 t20 pos-abs z1 txt-default"><i class="pe-7s-right-arrow"></i></a>
<div class="content pos-rel z1 ani-right w100">
<span class="mr-lr-5 fs11 txt-upper">Advertising</span>
<hr class="mr-tb-10 px-w100 mr-auto bdr-default">
<h3 class="title fs30 mr-b-0 f-1 bold-4">Portfolio title</h3>
<p class="mr-0 fs12 op-06">Project description text content</p>
</div>
<b class="bg-dark op-09 full-wh"></b>
</div>
<b class="full-wh bg-cover bg-cc" data-bg="images/portfolio-img-08.jpg"></b>
</div>
</figure>
</div>
<div class="masonry-item col-md-3 brand">
<figure class="hover-box1">
<div class="portfolio-item">
<a href="#" data-pagelinkto="portfoliosinglepage" class="full-wh z3"></a>
<div class="overlay z2 pd-tiny flex-bl typo-light">
<a href="#" data-pagelinkto="portfoliosinglepage" class="sq60 fs40 iconbox r20 t20 pos-abs z1 txt-default"><i class="pe-7s-right-arrow"></i></a>
<div class="content pos-rel z1 ani-right w100">
<span class="mr-lr-5 fs11 txt-upper">Brand</span>
<hr class="mr-tb-10 px-w100 mr-auto bdr-default">
<h3 class="title fs30 mr-b-0 f-1 bold-4">Portfolio title</h3>
<p class="mr-0 fs12 op-06">Project description text content</p>
</div>
<b class="bg-dark op-09 full-wh"></b>
</div>
<b class="full-wh bg-cover bg-cc" data-bg="images/portfolio-img-09.jpg"></b>
</div>
</figure>
</div>
<div class="masonry-item col-md-3 design">
<figure class="hover-box1">
<div class="portfolio-item">
<a href="#" data-pagelinkto="portfoliosinglepage" class="full-wh z3"></a>
<div class="overlay z2 pd-tiny flex-bl typo-light">
<a href="#" data-pagelinkto="portfoliosinglepage" class="sq60 fs40 iconbox r20 t20 pos-abs z1 txt-default"><i class="pe-7s-right-arrow"></i></a>
<div class="content pos-rel z1 ani-right w100">
<span class="mr-lr-5 fs11 txt-upper">Design</span>
<hr class="mr-tb-10 px-w100 mr-auto bdr-default">
<h3 class="title fs30 mr-b-0 f-1 bold-4">Portfolio title</h3>
<p class="mr-0 fs12 op-06">Project description text content</p>
</div>
<b class="bg-dark op-09 full-wh"></b>
</div>
<b class="full-wh bg-cover bg-cc" data-bg="images/portfolio-img-10.jpg"></b>
</div>
</figure>
</div>
<div class="masonry-item col-md-3 photography">
<figure class="hover-box1">
<div class="portfolio-item">
<a href="#" data-pagelinkto="portfoliosinglepage" class="full-wh z3"></a>
<div class="overlay z2 pd-tiny flex-bl typo-light">
<a href="#" data-pagelinkto="portfoliosinglepage" class="sq60 fs40 iconbox r20 t20 pos-abs z1 txt-default"><i class="pe-7s-right-arrow"></i></a>
<div class="content pos-rel z1 ani-right w100">
<span class="mr-lr-5 fs11 txt-upper">Photography</span>
<hr class="mr-tb-10 px-w100 mr-auto bdr-default">
<h3 class="title fs30 mr-b-0 f-1 bold-4">Portfolio title</h3>
<p class="mr-0 fs12 op-06">Project description text content</p>
</div>
<b class="bg-dark op-09 full-wh"></b>
</div>
<b class="full-wh bg-cover bg-cc" data-bg="images/portfolio-img-11.jpg"></b>
</div>
</figure>
</div>
<div class="masonry-item col-md-3 advert">
<figure class="hover-box1">
<div class="portfolio-item">
<a href="#" data-pagelinkto="portfoliosinglepage" class="full-wh z3"></a>
<div class="overlay z2 pd-tiny flex-bl typo-light">
<a href="#" data-pagelinkto="portfoliosinglepage" class="sq60 fs40 iconbox r20 t20 pos-abs z1 txt-default"><i class="pe-7s-right-arrow"></i></a>
<div class="content pos-rel z1 ani-right w100">
<span class="mr-lr-5 fs11 txt-upper">Advertising</span>
<hr class="mr-tb-10 px-w100 mr-auto bdr-default">
<h3 class="title fs30 mr-b-0 f-1 bold-4">Portfolio title</h3>
<p class="mr-0 fs12 op-06">Project description text content</p>
</div>
<b class="bg-dark op-09 full-wh"></b>
</div>
<b class="full-wh bg-cover bg-cc" data-bg="images/portfolio-img-12.jpg"></b>
</div>
</figure>
</div>
</div>
</div>
<!-- ======= END : MASONRY GRID ======= -->
<!--=================================
= FOOTER
==================================-->
<footer class="pd-tb-30 bg-dark typo-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="#" target="_blank">Orbix - HTML Responsive Multi-Purpose Template</a> © <script>document.write(new Date().getFullYear());</script>
</div>
</div>
<div class="social-links op-06 mr-t-20">
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-facebook-f"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-twitter"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-google"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-youtube"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-tumblr"></i></a>
</div>
</div>
</footer>
<!-- ======= END : FOOTER ======= -->
</div>
</div>
<!-- ************** END : PORTFOLIO ************** -->
<!--
************************************************************
* PORTFOLIO SINGLE
*************************************************************
-->
<div data-thispage="portfoliosinglepage" class="otherpage ckav-pages portfoliosinglepage bg-light typo-light align-c pd-t-40">
<div class="container-fluid pd-0 mr-t-100" data-ckav-sm="mr-t-10">
<!--=================================
= SLIDER
==================================-->
<div class="swiper-gallery layout-1" data-autoplay="false">
<!-- LARGE IMAGE -->
<div class="swiper-container gallery-top">
<div class="swiper-wrapper vh70">
<!-- SLIDE -->
<div class="swiper-slide" data-bg="images/bg-slider-01.jpg"></div>
<!-- SLIDE -->
<div class="swiper-slide" data-bg="images/bg-slider-02.jpg"></div>
<!-- SLIDE -->
<div class="swiper-slide" data-bg="images/bg-slider-03.jpg"></div>
</div>
<!-- NAVIGATION -->
<div class="swiper-button-prev"><i class="fa fa-angle-left"></i></div>
<div class="swiper-button-next"><i class="fa fa-angle-right"></i></div>
</div><!-- / LARGE IMAGE -->
<!-- THUMB IMAGE -->
<div class="swiper-container gallery-thumbs bg-dark">
<div class="swiper-wrapper">
<!-- IMAGE -->
<div class="swiper-slide" data-bg="images/bg-slider-01.jpg"></div>
<!-- IMAGE -->
<div class="swiper-slide" data-bg="images/bg-slider-02.jpg"></div>
<!-- IMAGE -->
<div class="swiper-slide" data-bg="images/bg-slider-03.jpg"></div>
</div>
</div>
</div>
<!-- ======= END : SLIDER ======= -->
<!--=================================
= TEXY CONTENT
==================================-->
<div class="pd-tb-100" data-ckav-sm="pd-tb-50">
<div class="container">
<div class="row gt90 mb20">
<div class="col-md-8 align-l" data-ckav-sm="align-c">
<p class="title-sub bold-n small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit</p>
<div class="row gt40 mb20">
<div class="col-md-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col-md-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="col-md-4 bdr-l bdr-op-light-1">
<h4 class="title fs14 mr-b-4 f-1">Client</h4>
<p class="title-sub mini mr-0">Consectetur adipisicing</p>
<hr class="mr-tb-10 bdr-op-light-1">
<h4 class="title fs14 mr-b-4 f-1">Completed on</h4>
<p class="title-sub mini mr-0">12, Dec 2017</p>
<hr class="mr-tb-10 bdr-op-light-1">
<h4 class="title fs14 mr-b-4 f-1">Services</h4>
<p class="title-sub mini mr-0">HTML, PHP, CSS3</p>
<hr class="mr-tb-10 bdr-op-light-1">
<h4 class="title fs14 mr-b-4 f-1">Web</h4>
<p class="title-sub mini mr-0"><a href="#" class="link-default">ckavart.com</a></p>
<hr class="mr-tb-10 bdr-op-light-1">
<!--=========================================
= SOCIAL LINKS
=============================================-->
<a href="#" target="_blank" class="sq30 fs14 mr-r-4 rd-4 iconbox hov-btn-dark solid bg-glass-dark-01"><i class="fab fa-facebook-f"></i></a>
<a href="#" target="_blank" class="sq30 fs14 mr-r-4 rd-4 iconbox hov-btn-dark solid bg-glass-dark-01"><i class="fab fa-twitter"></i></a>
<a href="#" target="_blank" class="sq30 fs14 mr-r-4 rd-4 iconbox hov-btn-dark solid bg-glass-dark-01"><i class="fab fa-google"></i></a>
<a href="#" target="_blank" class="sq30 fs14 mr-r-4 rd-4 iconbox hov-btn-dark solid bg-glass-dark-01"><i class="fab fa-youtube"></i></a>
<a href="#" target="_blank" class="sq30 fs14 mr-r-4 rd-4 iconbox hov-btn-dark solid bg-glass-dark-01"><i class="fab fa-tumblr"></i></a>
<hr class="mr-tb-10 bdr-op-light-1">
<ul class="inline-grid gt-tiny">
<li><a href="#" class="sq60 rd-4 fs40 iconbox btn-dark"><i class="fa fa-angle-left"></i></a></li>
<li><a href="#" class="sq60 rd-4 fs30 iconbox btn-dark"><i class="fa fa-th"></i></a></li>
<li><a href="#" class="sq60 rd-4 fs40 iconbox btn-dark"><i class="fa fa-angle-right"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- ======= END : TEXT CONTENT ======= -->
<!--=================================
= FOOTER
==================================-->
<footer class="pd-tb-30 bg-dark typo-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="#" target="_blank">Orbix - HTML Responsive Multi-Purpose Template</a> © <script>document.write(new Date().getFullYear());</script>
</div>
</div>
<div class="social-links op-06 mr-t-20">
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-facebook-f"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-twitter"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-google"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-youtube"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-tumblr"></i></a>
</div>
</div>
</footer>
<!-- ======= END : FOOTER ======= -->
</div>
</div>
<!-- ************** END : PORTFOLIO SINGLE ************** -->
<!--
************************************************************
* BLOG SINGLE PAGE
*************************************************************
-->
<div data-thispage="blogsinglepage" class="otherpage ckav-pages blogsinglepage bg-light typo-light align-c pd-t-40">
<div class="container-fluid pd-0 mr-t-200" data-ckav-sm="mr-t-60">
<div class="container">
<!-- SECTION TITLE -->
<div class="section-title mr-b-60" data-ckav-sm="mr-b-30">
<span class="txt-upper f-1 fs14 bold-3 mr-b-10 ltr-3 txt-default block" data-ckav-sm="mr-b-0 fs12">25 Apr 2016</span>
<h2 class="title f-1 fs46 bold-4 px-w600 mr-auto" data-ckav-md="fs40" data-ckav-sm="fs30 w100">Seddiam nonumy eirmod tempor invidunt</h2>
<p class="fs12 italic">
<i class="fs14 mr-r-6 fa fa-user txt-default"></i><a href="#">Admin</a>
<span class="mr-lr-5">|</span>
<i class="fs14 mr-r-6 fa fa-th txt-default"></i><a href="#">General</a>, <a href="#">Creative</a>
<span class="mr-lr-5">|</span>
<i class="fs14 mr-r-6 fa fa-comments txt-default"></i><a href="#">13 Comments</a>
</p>
</div><!-- / SECTION TITLE -->
<div class="row gt60 mb60">
<div class="col-md-12">
<p><img src="images/bg-01.jpg" class="rd-5 shadow-xlarge" alt="image"></p>
<div class="mr-b-small align-l">
<p class="op-07">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p class="op-07">Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper.</p>
<p class="op-07">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<blockquote class="txt-dark bdr-white">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
</blockquote>
<p class="op-07">Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper.</p>
<h3 class="title mini bold-n">List item title</h3>
<ul class="list-3">
<li>Nullam id dolor id nibh ultricies vehicula </li>
<li>Curabitur blandit tempus porttitor</li>
<li>Integer posuere erat a ante venenatis</li>
<li>dapibus posuere velit aliquet</li>
<li>Cras justo odio, dapibus ac facilisis</li>
</ul>
</div>
<!--=================================
= TAGS
==================================-->
<hr class="bdr-op-light-1">
<a href="#" class="btn mr-2 btn-default round tiny txt-upper">General</a>
<a href="#" class="btn mr-2 btn-default round tiny txt-upper">Information</a>
<a href="#" class="btn mr-2 btn-default round tiny txt-upper">Media</a>
<a href="#" class="btn mr-2 btn-default round tiny txt-upper">Press</a>
<a href="#" class="btn mr-2 btn-default round tiny txt-upper">Gallery</a>
<a href="#" class="btn mr-2 btn-default round tiny txt-upper">Illustration</a>
<!-- ======= END : TAGS ======= -->
<!--=================================
= SHARING
==================================-->
<hr class="bdr-op-light-1">
<div class="row gt20 middle-md" data-ckav-sm="align-c">
<div class="col-md-6 align-l">
Share this post :
</div>
<div class="col-md-6 align-r" data-ckav-sm="align-c">
<a href="#" target="_blank" class="sq40 fs18 mr-r-4 rd-4 iconbox btn-dark"><i class="fab fa-facebook-f"></i></a>
<a href="#" target="_blank" class="sq40 fs18 mr-r-4 rd-4 iconbox btn-dark"><i class="fab fa-twitter"></i></a>
<a href="#" target="_blank" class="sq40 fs18 mr-r-4 rd-4 iconbox btn-dark"><i class="fab fa-google"></i></a>
<a href="#" target="_blank" class="sq40 fs18 mr-r-4 rd-4 iconbox btn-dark"><i class="fab fa-youtube"></i></a>
<a href="#" target="_blank" class="sq40 fs18 mr-r-4 rd-4 iconbox btn-dark"><i class="fab fa-tumblr"></i></a>
</div>
</div>
<!-- ======= END : SHARING ======= -->
<hr class="bdr-op-light-1">
<!--=================================
= AUTHOR
==================================-->
<h3 class="title small bold-3 f-1 align-l">Posted by <a href="#" class="link-default">Oupsum dolor</a></h3>
<div class="info-obj img-l g20 medium bdr-1 bdr-op-light-1 pd-tiny align-l rd-5 mr-b-mini" data-ckav-sm="img-t align-c pd-20">
<div class="img"><img src="images/testimonial-img-01.jpg" class="rd" alt="author"></div>
<div class="info f-2 op-07">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo error temporibus quos sequi modi maiores pariatur atque ipsum inventore deserunt, eaque placeat corporis voluptas cupiditate? Aut, reiciendis, animi. Minima, inventore.</p>
<p>Nemo error temporibus quos sequi modi maiores pariatur atque ipsum inventore deserunt, eaque placeat corporis voluptas cupiditate? Aut, reiciendis, animi. Minima, inventore.</p>
</div>
</div>
<!-- ======= END : AUTHOR ======= -->
<!--=================================
= COMMENTS
==================================-->
<h3 class="title small bold-3 f-1 align-l">4 Comments</h3>
<ul class="list-reset mr-b-mini">
<li>
<div class="info-obj img-l small align-l comment">
<div class="img -mr-r-10 mr-t-10 z1"><img src="images/testimonial-img-02.jpg" class="rd" alt="author"></div>
<div class="info rd-5 bg-dark typo-light pd-tiny">
<h4 class="title mini mr-b-4">Oupsum dolor</h4>
<p class="fs12 op-07">25 Apr 2016 <span class="mr-lr-10">|</span> <a href="#" class="link-default op-1">Reply</a></p>
<p class="op-07">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo error temporibus quos sequi modi maiores pariatur atque ipsum inventore deserunt, eaque placeat corporis voluptas cupiditate? Aut, reiciendis, animi. Minima, inventore.</p>
</div>
</div>
<div class="info-obj img-l small align-l comment">
<div class="img -mr-r-10 mr-t-10 z1"><img src="images/testimonial-img-03.jpg" class="rd" alt="author"></div>
<div class="info rd-5 bg-dark typo-light pd-tiny">
<h4 class="title mini mr-b-4">Oupsum dolor</h4>
<p class="fs12 op-07">25 Apr 2016 <span class="mr-lr-10">|</span> <a href="#" class="link-default op-1">Reply</a></p>
<p class="op-07">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo error temporibus quos sequi modi maiores pariatur atque ipsum inventore deserunt, eaque placeat corporis voluptas cupiditate? Aut, reiciendis, animi. Minima, inventore.</p>
</div>
</div>
</li>
<li>
<div class="info-obj img-l small align-l comment">
<div class="img -mr-r-10 mr-t-10 z1"><img src="images/testimonial-img-04.jpg" class="rd" alt="author"></div>
<div class="info rd-5 bg-dark typo-light pd-tiny">
<h4 class="title mini mr-b-4">Oupsum dolor</h4>
<p class="fs12 op-07">25 Apr 2016 <span class="mr-lr-10">|</span> <a href="#" class="link-default op-1">Reply</a></p>
<p class="op-07">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo error temporibus quos sequi modi maiores pariatur atque ipsum inventore deserunt, eaque placeat corporis voluptas cupiditate? Aut, reiciendis, animi. Minima, inventore.</p>
</div>
</div>
</li>
</ul>
<!-- ======= END : COMMETNS ======= -->
<!--=================================
= COMMENT FORM
==================================-->
<h2 class="title small mr-b-20 bold-3 f-1 align-l">Leave a comment</h2>
<div class="form-block">
<form action="form-data/formdata.php" class="form-widget align-l" data-success-redirect="y" novalidate="novalidate">
<div class="field-wrp">
<input type="hidden" name="to" value="[email protected]">
<div class="row gt20 mb10">
<div class="col-md-6">
<div class="form-group">
<input class="form-control form-control-light" data-label="Name" required="" data-msg="Please enter name." type="text" name="name" placeholder="Enter your name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="form-control form-control-light" data-label="Email" required="" data-msg="Please enter email." type="email" name="email" placeholder="Enter your email">
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control form-control-light" data-label="Message" required="" data-msg="Please enter your message." name="message" placeholder="Add your message" cols="30" rows="10"></textarea>
</div>
</div>
<button type="submit" class="btn btn-default solid txt-upper round"><i class="fa fa-envelope-o"></i> Submit</button>
</form>
</div>
<!-- ======= END : COMMENT FORM ======= -->
</div>
</div>
</div>
<!--=================================
= FOOTER
==================================-->
<footer class="pd-tb-30 bg-dark typo-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="#" target="_blank">Orbix - HTML Responsive Multi-Purpose Template</a> © <script>document.write(new Date().getFullYear());</script>
</div>
</div>
<div class="social-links op-06 mr-t-20">
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-facebook-f"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-twitter"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-google"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-youtube"></i></a>
<a href="http://ckavart.com/" target="_blank" class="sq30 fs16 mr-r-4 rd-4 iconbox btn-white"><i class="fab fa-tumblr"></i></a>
</div>
</div>
</footer>
<!-- ======= END : FOOTER ======= -->
</div>
</div>
<!-- ************** END : BLOG SINGLE PAGE ************** -->
<!--
************************************************************
* SUBSCRIBE POPUP
*************************************************************
-->
<div id="popup-content" class="white-popup-block popup-content animate fadeInDown mfp-hide">
<div class="pop-header align-c pd-b-0" data-ckav-sm="pd-20">
<p class="sq90 inline-flex flex-cc fs80 mr-0 txt-default"><i class="pe-7s-bell"></i></p>
<h2 class="title mr-0" data-ckav-sm="small">Newsletter</h2>
</div>
<div class="pop-body" data-ckav-sm="pd-20">
<div class="form-block">
<form action="form-data/notify-me.php" data-formtype="newsletter" class="form-widget" novalidate="novalidate">
<div class="field-wrp">
<input type="hidden" name="to" value="[email protected]">
<div class="form-group">
<input class="form-control" data-label="Name" required="" data-msg="Please enter name." type="text" name="name" placeholder="Enter your name">
</div>
<div class="form-group">
<input class="form-control" data-label="Email" required="" data-msg="Please enter email." type="email" name="email" placeholder="Enter your email">
</div>
</div>
<button type="submit" class="btn solid btn-default block"><i class="fa fa-envelope-o"></i> SUBMIT</button>
</form>
</div>
</div>
</div>
<!-- ************** END : SUBSCRIBE POPUP ************** -->
</div>
<!-- ************** END : MAIN WRAPPER ************** -->
<!-- GOOGLE FONTS -->
<script>
/* Use fonts with class name in sequence => f-1, f-2, f-3 .... */
var fgroup = [
'Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i',
'Open Sans:300,300i,400,400i,600,600i,700,700i,800,800i',
'Satisfy'
];
</script>
<script src="js/webfonts.js"></script>
<script src="lib/jquery/jquery-3.3.1.min.js"></script>
<script src="lib/jquery/jquery-migrate-3.0.0.min.js"></script>
<script src="lib/jquery/popper.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/jquery-smooth-scroll/jquery.smooth-scroll.min.js"></script>
<script src="lib/jQuery-viewport-checker/jquery.viewportchecker.min.js"></script>
<script src="lib/Swiper/js/swiper.min.js"></script>
<script src="lib/owl-carousel/owl.carousel.min.js"></script>
<script src="lib/Magnific-Popup/jquery.magnific-popup.min.js"></script>
<script src="lib/isotope/imagesloaded.pkgd.min.js"></script>
<script src="lib/isotope/isotope.pkgd.min.js"></script>
<script src="lib/isotope/packery-mode.pkgd.min.js"></script>
<script src="lib/jQuery-Countdown/jquery-countdown.js"></script>
<script src="lib/sweetalert/sweetalert2.min.js"></script>
<script src="lib/jquery-validation/jquery.validate.min.js"></script>
<script src="lib/youtubebackground/jquery.youtubebackground.js"></script>
<script src="lib/Vide/jquery.vide.min.js"></script>
<script src="lib/vegas/vegas.min.js"></script>
<script src="lib/countUp/countUp.js"></script>
<script src="lib/jarallax-master/jarallax.min.js"></script>
<script src="js/enquire.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>