?
áEÓê¤ÎïLwebshll2019
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<!-- Author -->
<meta name="author" content="Themes Industry">
<!-- description -->
<meta name="description" content="MegaOne is a highly creative, modern, visually stunning and Bootstrap responsive multipurpose studio and portfolio HTML5 template with 8 ready home page demos.">
<!-- keywords -->
<meta name="keywords" content="Creative, modern, clean, bootstrap responsive, html5, css3, portfolio, blog, studio, templates, multipurpose, one page, corporate, start-up, studio, branding, designer, freelancer, carousel, parallax, photography, studio, masonry, grid, faq">
<!-- Page Title -->
<title>Surfing | MegaOne HTML5 Template</title>
<!-- Favicon -->
<link href="football/img/favicon.ico" rel="icon">
<!-- Bundle -->
<link href="vendor/css/bundle.min.css" rel="stylesheet">
<!-- Plugin Css -->
<link href="vendor/css/LineIcons.min.css" rel="stylesheet">
<link href="vendor/css/revolution-settings.min.css" rel="stylesheet">
<link href="vendor/css/jquery.fancybox.min.css" rel="stylesheet">
<link href="vendor/css/owl.carousel.min.css" rel="stylesheet">
<link href="vendor/css/cubeportfolio.min.css" rel="stylesheet">
<!-- Style Sheet -->
<link href="surfing/css/navigation.css" rel="stylesheet">
<link href="surfing/css/style.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="90">
<!--loading start-->
<div class="loader">
<div class="inner-loader">
<div class="image-holder-loader">
<img src="surfing/img/loader.png">
</div>
<div class="circle-loader">
<div class="wave-loader">
</div>
</div>
</div>
</div>
<!--loading end-->
<!--HEADER START-->
<header>
<!--Navigation-->
<nav class="navbar navbar-top-default navbar-expand-lg navbar-simple nav-line">
<div class="container">
<a href="index-surfing.html" title="Logo" class="logo scroll">
<!--Logo Default-->
<img src="surfing/img/logo-white.png" alt="logo" class="logo-white">
</a>
<!--Nav Links-->
<div class="collapse navbar-collapse" id="megaone">
<div class="navbar-nav ml-auto">
<a class="nav-link scroll" href="#slider-section">Home</a>
<a class="nav-link scroll" href="#about-us">About Us</a>
<a class="nav-link scroll" href="#app">Services</a>
<a class="nav-link scroll" href="#team-section">Our Crew</a>
<a class="nav-link scroll" href="#portfolio-sec">Showcases</a>
<a class="nav-link scroll" href="#testimonial-sec">Testimonials</a>
<a class="nav-link scroll" href="#contact">Contact Us</a>
</div>
</div>
<!--Side Menu Button-->
<a href="javascript:void(0)" class="sidemenu_btn" id="sidemenu_toggle">
<span></span>
<span></span>
<span></span>
</a>
</div>
</nav>
<!--Side Nav-->
<div class="side-menu hidden">
<div class="inner-wrapper">
<span class="btn-close" id="btn_sideNavClose"><i></i><i></i></span>
<nav class="side-nav w-100">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link scroll" href="#revo_main_wrapper">Home</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#about-us">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#app">Services</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#team-section">Our Crew</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#portfolio-sec">Showcases</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#testimonial-sec">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#contact">Contact Us</a>
</li>
</ul>
</nav>
<div class="side-footer w-100">
<ul class="social-icons-simple">
<li><a class="facebook-text-hvr" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
<li><a class="instagram-text-hvr" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
<li><a class="twitter-text-hvr" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
</ul>
<p>© 2020 MegaOne. Made With Love by Themesindustry</p>
</div>
</div>
</div>
<a id="close_side_menu" href="javascript:void(0);"></a>
<!-- End side menu -->
</header>
<!--HEADER END-->
<!--MAIN SLIDER START-->
<div id="slider-section" class="slider-section">
<div id="revo_main_wrapper" class="rev_slider_wrapper fullwidthbanner-container m-0 p-0 bg-dark" data-alias="classic4export" data-source="gallery">
<!-- START REVOLUTION SLIDER 5.4.1 fullwidth mode -->
<div id="vertical-bullets" class="rev_slider fullwidthabanner white vertical-tpb" data-version="5.4.1">
<ul>
<!-- SLIDE 1 -->
<li data-index="rs-01" data-transition="fade" data-slotamount="default" data-easein="Power100.easeIn" data-easeout="Power100.easeOut" data-masterspeed="2000" data-fsmasterspeed="1500" data-param1="01">
<!-- MAIN IMAGE -->
<img src="surfing/img/slider-1.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<div class="bg-overlay bg-black opacity-4"></div>
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-resizeme"
data-x="['left','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['-40','-40','-35','-35']"
data-width="none" data-height="none" data-type="text"
data-textAlign="['center','center','center','center']"
data-responsive_offset="on" data-start="1000"
data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":2000,"to":"o:1;","delay":1500,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'>
<h2 class="text-capitalize font-xlight whitecolor heading-title-small">WIND,WATER,SURF</h2>
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption tp-resizeme"
data-x="['left','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['20','20','20','20']"
data-width="none" data-height="none" data-type="text"
data-textAlign="['center','center','center','center']"
data-responsive_offset="on" data-start="1000"
data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":2000,"to":"o:1;","delay":1500,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'>
<h1 class="text-capitalize font-xlight defaultcolor-slider heading-title-large">SURF LIKE PRO</h1>
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption tp-resizeme"
data-x="['left','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['95','95','90','90']"
data-width="none" data-height="none" data-type="text"
data-textAlign="['left','center','center','center']"
data-responsive_offset="on" data-start="1500"
data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":2000,"to":"o:1;","delay":1500,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'>
<p class="text-capitalize font-xlight whitecolor">Lorem ipsum dolor sit amet, consectetur adipiscing <br/>elit. Etiam eget velit interdum, sodales erat <br/>commodo, faucibus urna.</p>
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption tp-resizeme"
data-x="['left','center','center','center']" data-hoffset="['0','0','0','15']"
data-y="['middle','middle','middle','middle']" data-voffset="['170','170','160','170']"
data-width="none" data-height="none" data-whitespace="nowrap" data-type="text"
data-textAlign="['center','center','center','center']"
data-responsive_offset="on" data-start="2000"
data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":2000,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'>
<a href="#about-us" class="btn white-tran-blue-btn slider-btn slider-btn">Learn More</a>
</div>
</li>
<!-- SLIDE 2 -->
<li data-index="rs-02" data-transition="fade" data-slotamount="default" data-easein="Power100.easeIn" data-easeout="Power100.easeOut" data-masterspeed="2000" data-fsmasterspeed="1500" data-param1="02">
<!-- MAIN IMAGE -->
<img src="surfing/img/slider-2.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<div class="bg-overlay bg-black opacity-4"></div>
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-resizeme"
data-x="['right','right','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['-40','-40','-35','-35']"
data-width="none" data-height="none" data-type="text"
data-textAlign="['center','center','center','center']"
data-responsive_offset="on" data-start="1000"
data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":2000,"to":"o:1;","delay":1500,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'>
<h2 class="text-capitalize font-xlight whitecolor heading-title-small">WIND,WATER,STYLE</h2>
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption tp-resizeme"
data-x="['right','right','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['20','20','20','20']"
data-width="none" data-height="none" data-type="text"
data-textAlign="['center','center','center','center']"
data-responsive_offset="on" data-start="1000"
data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":2000,"to":"o:1;","delay":1500,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'>
<h1 class="text-capitalize font-xlight defaultcolor-slider heading-title-large">BEST SURF CLUB</h1>
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption tp-resizeme"
data-x="['right','right','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['95','95','90','90']"
data-width="none" data-height="none" data-type="text"
data-textAlign="['right','right','center','center']"
data-responsive_offset="on" data-start="1500"
data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":2000,"to":"o:1;","delay":1500,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'>
<p class="text-capitalize font-xlight whitecolor">Lorem ipsum dolor sit amet, consectetur adipiscing <br/>elit. Etiam eget velit interdum, sodales erat <br/>commodo, faucibus urna.</p>
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption tp-resizeme"
data-x="['right','right','center','center']" data-hoffset="['0','0','0','15']"
data-y="['middle','middle','middle','middle']" data-voffset="['170','170','160','170']"
data-width="none" data-height="none" data-whitespace="nowrap" data-type="text"
data-textAlign="['center','center','center','center']"
data-responsive_offset="on" data-start="2000"
data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":2000,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'>
<a href="#about-us" class="btn white-tran-blue-btn slider-btn">Learn More</a>
</div>
</li>
<!-- SLIDE 3 -->
<li data-index="rs-03" data-transition="fade" data-slotamount="default" data-easein="Power100.easeIn" data-easeout="Power100.easeOut" data-masterspeed="2000" data-fsmasterspeed="1500" data-param1="03">
<!-- MAIN IMAGE -->
<img src="surfing/img/slider-3.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<div class="bg-overlay bg-black opacity-4"></div>
<div class="tp-caption tp-resizeme"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['-55','-30','-35','-35']"
data-whitespace="nowrap" data-responsive_offset="on"
data-width="['none','none','none','none']" data-type="text"
data-textalign="['center','center','center','center']"
data-transform_idle="o:1;"
data-transform_in="x:-50px;opacity:0;s:2000;e:Power3.easeOut;"
data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;"
data-start="1000" data-splitin="none" data-splitout="none">
<h2 class="text-capitalize font-xlight whitecolor heading-title-small">WIND,WATER,LIFE</h2>
</div>
<div class="tp-caption tp-resizeme"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['0','20','20','20']"
data-whitespace="nowrap" data-responsive_offset="on"
data-width="['none','none','none','none']" data-type="text"
data-textalign="['center','center','center','center']" data-fontsize="['48','48','20','26']"
data-transform_idle="o:1;"
data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;"
data-transform_out="s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;"
data-start="900" data-splitin="none" data-splitout="none">
<h1 class="text-capitalize font-xlight defaultcolor-slider heading-title-large">PERFECT WAVES</h1>
</div>
<div class="tp-caption tp-resizeme"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['70','800','90','90']"
data-whitespace="nowrap" data-responsive_offset="on"
data-width="['none','none','none','none']" data-type="text"
data-textalign="['center','center','center','center']" data-fontsize="['16','16','16','16']"
data-transform_idle="o:1;"
data-transform_in="z:0;rX:0deg;rY:0;rZ:0;sX:2;sY:2;skX:0;skY:0;opacity:0;s:1000;e:Power2.easeOut;"
data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;"
data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
data-start="1600" data-splitin="none" data-splitout="none">
<p class="font-light text-capitalize whitecolor">Lorem ipsum dolor sit amet, consectetur adipiscing <br/>elit. Etiam eget velit interdum, sodales erat <br/>commodo, faucibus urna.</p>
</div>
<div class="tp-caption tp-resizeme"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['150','160','160','170']"
data-width="['500','500','500','500']" data-textalign="['center','center','center','center']" data-type="text"
data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:1500;e:Power4.easeInOut;" data-transform_out="s:900;e:Power2.easeInOut;s:900;e:Power2.easeInOut;" data-start="1800" data-splitin="none" data-splitout="none" data-responsive_offset="on">
<a href="#about-us" class="btn white-tran-blue-btn slider-btn">Learn More</a>
</div>
</li>
</ul>
</div>
</div>
<svg id="svg-wave" preserveAspectRatio="xMidYMax meet" class="svg-separator sep1" viewBox="0 0 1600 100" style="" data-height="100">
<path class="" style="opacity: 1;fill: #ffffff;" d="M1040,56c0.5,0,1,0,1.6,0c-16.6-8.9-36.4-15.7-66.4-15.7c-56,0-76.8,23.7-106.9,41C881.1,89.3,895.6,96,920,96
C979.5,96,980,56,1040,56z"></path>
<path class="" style="opacity: 1;fill: #ffffff;" d="M1699.8,96l0,10H1946l-0.3-6.9c0,0,0,0-88,0s-88.6-58.8-176.5-58.8c-51.4,0-73,20.1-99.6,36.8
c14.5,9.6,29.6,18.9,58.4,18.9C1699.8,96,1699.8,96,1699.8,96z"></path>
<path class="" style="opacity: 1;fill: #ffffff;" d="M1400,96c19.5,0,32.7-4.3,43.7-10c-35.2-17.3-54.1-45.7-115.5-45.7c-32.3,0-52.8,7.9-70.2,17.8
c6.4-1.3,13.6-2.1,22-2.1C1340.1,56,1340.3,96,1400,96z"></path>
<path class="" style="opacity: 1;fill: #ffffff;" d="M320,56c6.6,0,12.4,0.5,17.7,1.3c-17-9.6-37.3-17-68.5-17c-60.4,0-79.5,27.8-114,45.2
c11.2,6,24.6,10.5,44.8,10.5C260,96,259.9,56,320,56z"></path>
<path class="" style="opacity: 1;fill: #ffffff;" d="M680,96c23.7,0,38.1-6.3,50.5-13.9C699.6,64.8,679,40.3,622.2,40.3c-30,0-49.8,6.8-66.3,15.8
c1.3,0,2.7-0.1,4.1-0.1C619.7,56,620.2,96,680,96z"></path>
<path class="" style="opacity: 1;fill: #ffffff;" d="M-40,95.6c28.3,0,43.3-8.7,57.4-18C-9.6,60.8-31,40.2-83.2,40.2c-14.3,0-26.3,1.6-36.8,4.2V106h60V96L-40,95.6
z"></path>
<path class="" style="opacity: 1;fill: #ffffff;" d="M504,73.4c-2.6-0.8-5.7-1.4-9.6-1.4c-19.4,0-19.6,13-39,13c-19.4,0-19.5-13-39-13c-14,0-18,6.7-26.3,10.4
C402.4,89.9,416.7,96,440,96C472.5,96,487.5,84.2,504,73.4z"></path>
<path class="" style="opacity: 1;fill: #ffffff;" d="M1205.4,85c-0.2,0-0.4,0-0.6,0c-19.5,0-19.5-13-39-13s-19.4,12.9-39,12.9c0,0-5.9,0-12.3,0.1
c11.4,6.3,24.9,11,45.5,11C1180.6,96,1194.1,91.2,1205.4,85z"></path>
<path class="" style="opacity: 1;fill: #ffffff;" d="M1447.4,83.9c-2.4,0.7-5.2,1.1-8.6,1.1c-19.3,0-19.6-13-39-13s-19.6,13-39,13c-3,0-5.5-0.3-7.7-0.8
c11.6,6.6,25.4,11.8,46.9,11.8C1421.8,96,1435.7,90.7,1447.4,83.9z"></path>
<path class="" style="opacity: 1;fill: #ffffff;" d="M985.8,72c-17.6,0.8-18.3,13-37,13c-19.4,0-19.5-13-39-13c-18.2,0-19.6,11.4-35.5,12.8
c11.4,6.3,25,11.2,45.7,11.2C953.7,96,968.5,83.2,985.8,72z"></path>
<path class="" style="opacity: 1;fill: #ffffff;" d="M743.8,73.5c-10.3,3.4-13.6,11.5-29,11.5c-19.4,0-19.5-13-39-13s-19.5,13-39,13c-0.9,0-1.7,0-2.5-0.1
c11.4,6.3,25,11.1,45.7,11.1C712.4,96,727.3,84.2,743.8,73.5z"></path>
<path class="" style="opacity: 1;fill: #ffffff;" d="M265.5,72.3c-1.5-0.2-3.2-0.3-5.1-0.3c-19.4,0-19.6,13-39,13c-19.4,0-19.6-13-39-13
c-15.9,0-18.9,8.7-30.1,11.9C164.1,90.6,178,96,200,96C233.7,96,248.4,83.4,265.5,72.3z"></path>
<path class="" style="opacity: 1;fill: #ffffff;" d="M1692.3,96V85c0,0,0,0-19.5,0s-19.6-13-39-13s-19.6,13-39,13c-0.1,0-0.2,0-0.4,0c11.4,6.2,24.9,11,45.6,11
C1669.9,96,1684.8,96,1692.3,96z"></path>
<path class="" style="opacity: 1;fill: #ffffff;stroke: #ffffff" d="M25.5,72C6,72,6.1,84.9-13.5,84.9L-20,85v8.9C0.7,90.1,12.6,80.6,25.9,72C25.8,72,25.7,72,25.5,72z"></path>
<path class="" style="fill: rgb(255,255,255); stroke: #ffffff" d="M-40,95.6C20.3,95.6,20.1,56,80,56s60,40,120,40s59.9-40,120-40s60.3,40,120,40s60.3-40,120-40
s60.2,40,120,40s60.1-40,120-40s60.5,40,120,40s60-40,120-40s60.4,40,120,40s59.9-40,120-40s60.3,40,120,40s60.2-40,120-40
s60.2,40,120,40s59.8,0,59.8,0l0.2,143H-60V96L-40,95.6z"></path>
</svg>
<ul class="social-icons social-icons-simple revicon white d-none d-md-block d-lg-block">
<li class="d-table"><a href="javascript:void(0)"><i class="fab fa-facebook-f"></i></a> </li>
<li class="d-table"><a href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
<li class="d-table"><a href="javascript:void(0)"><i class="fab fa-linkedin-in"></i> </a> </li>
<li class="d-table"><a href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
</ul>
</div>
<!--Main SLIDER END -->
<!--About Star-->
<section id="about-us" class="about-us">
<div class="container">
<div class="row dot-box">
<!-- Features Box-->
<div class="col-lg-6 wow fadeInLeft">
<!--About Image-->
<div class="about-image">
<img src="surfing/img/about-us.png" alt="about-img">
</div>
</div>
<!-- Heading Area-->
<div class="col-lg-6 order-lg-2 wow fadeInRight">
<div class="heading-area pl-lg-4 p-0">
<h6 class="sub-title main-color">Basic info about us</h6>
<h2 class="title">ABOUT US</h2>
<p class="paragraph">There are many variations of passages of Lorem Ipsum available be the majority have suffered alteration in some form, by injected humour or randomised words.
<!--List-->
<ul class="about-list">
<li><i class='lni lni-chevron-right-circle a-icon'></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class='lni lni-chevron-right-circle a-icon'></i> Morbi ornare nibh id cursus vestibulum.</li>
<li><i class='lni lni-chevron-right-circle a-icon'></i> Duis vitae lectus facilisis, tristique lorem sit amet males.</li>
<li><i class='lni lni-chevron-right-circle a-icon'></i> It is a long established fact that a distracted</li>
<li><i class='lni lni-chevron-right-circle a-icon'></i> Morbi ornare nibh id cursus vestibulum.</li>
<li><i class='lni lni-chevron-right-circle a-icon'></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
</section>
<!--About End-->
<!--START ADVERTISEMENT-->
<section id="advertisement-sec" class="advertisement-sec">
<div class="row no-gutters">
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="video-box">
<div class="bg-overlay bg-black opacity-1"></div>
<img src="surfing/img/adver-sec-1.jpg" alt="Adver-sec 1">
<a data-fancybox="" href="https://vimeo.com/155467649" class="video-btn"><i class='lni lni-play'></i></a>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="video-box">
<div class="bg-overlay bg-black opacity-1"></div>
<img src="surfing/img/adver-sec-3.jpg" alt="Adver-sec 2">
<a data-fancybox="" href="https://vimeo.com/155467649" class="video-btn"><i class='lni lni-play'></i></a>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="video-box">
<div class="bg-overlay bg-black opacity-1"></div>
<img src="surfing/img/adver-sec-2.jpg" alt="Adver-sec 3">
<a data-fancybox="" href="https://vimeo.com/155467649" class="video-btn"><i class='lni lni-play'></i></a>
</div>
</div>
</div>
</section>
<!--End ADVERTISEMENT-->
<!--START FEATURES-->
<section class="features" id="app">
<div class="container">
<!--Heading-->
<div class="row">
<div class="col-12 col-md-10 col-lg-8 offset-md-1 offset-lg-2 text-center wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
<div class="heading-area d-inline-block">
<h6 class="sub-title main-color">Towards Wind & Waves</h6>
<h2 class="title">We Server Best</h2>
<p class="paragraph">There are many variations of passages of Lorem Ipsum available be the majority have suffered alteration in some form, by injected humour or randomised words.
</div>
</div>
</div>
<!--START APP DETAIL-->
<div class="row align-items-center text-center">
<!-- SERVICES 1 & 2 -->
<div class="col-lg-4 wow fadeInLeft mb-5 mb-lg-0" style="visibility: visible; animation-name: fadeInLeft;">
<!--App deatil item-->
<div class="app-feature">
<i class="lni lni-book gradient-text1"></i>
<h4 class="mb-3">Beginners Tuition</h4>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit Suspendisse in orci enim gravida nibh.</p>
</div>
<!--App deatil item-->
<div class="app-feature">
<i class="lni lni-home gradient-text1"></i>
<h4 class="mb-3">Accommodation</h4>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit Suspendisse in orci enim gravida nibh.</p>
</div>
</div>
<!--APP SLIDER-->
<div class="col-lg-4 wow fadeInUp mb-5 mb-lg-0">
<!--app Image-->
<div class="app-image">
<img src="surfing/img/services.png" alt="image">
</div>
</div>
<!-- SERVICES 3 & 4 -->
<div class="col-lg-4 wow fadeInRight" style="visibility: visible; animation-name: fadeInRight;">
<!--App deatil item-->
<div class="app-feature">
<i class="lni lni-direction gradient-text1"></i>
<h4 class="mb-3">Location</h4>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit Suspendisse in orci enim gravida nibh.</p>
</div>
<!--App deatil item-->
<div class="app-feature">
<i class="lni lni-drop gradient-text1"></i>
<h4 class="mb-3">Windsurfing</h4>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit Suspendisse in orci enim gravida nibh.</p>
</div>
</div>
</div>
<!--END APP DETAIL-->
</div>
<div class="ocean1">
<div class="wave"></div>
<div class="wave"></div>
</div>
</section>
<!--END FEATURES-->
<!--Parallax Start-->
<section class="parallax bg-img1">
<div class="bg-overlay bg-main opacity-7"></div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-8">
<div class="heading-box">
<h6>Enjoy The Diving</h6>
<h1>The Most Advanced Sea, Diving</h1>
<p>There are many variations of passages of Lorem Ipsum available be the majority have suffered alteration in some form, by injected humour or randomised words.</p>
<a href="#" class="white-tran-black-btn">Read More</a>
</div>
</div>
</div>
</div>
</section>
<!--Parallax End-->
<!--START FEATURES-->
<section class="team-section" id="team-section">
<div class="container">
<!--Heading-->
<div class="row">
<div class="col-12 col-md-10 col-lg-8 offset-md-1 offset-lg-2 text-center wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
<div class="heading-area d-inline-block">
<h6 class="sub-title main-color">Towards the Sea</h6>
<h2 class="title">Our Crew</h2>
<p class="paragraph">There are many variations of passages of Lorem Ipsum available be the majority have suffered alteration in some form, by injected humour or randomised words.
</div>
</div>
</div>
<!--Heading-->
<!-- Grid row -->
<div class="team-carousel owl-carousel owl-theme wow fadeIn">
<!-- Grid column -->
<div class="item mb-lg-0 mb-4">
<!-- Rotating card -->
<div class="card-wrapper">
<div id="card-1" class="card card-rotating text-center">
<div class="face front">
<!-- Avatar -->
<div class="avat-image-team">
<img src="surfing/img/team1.jpg" alt="First sample avatar image">
</div>
</div>
<div class="face back">
<!-- Content -->
<div class="card-body p-0">
<h4 class="font-weight-bold mt-4 mb-2">
<strong>Mark Alex</strong>
</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta.
Blanditiis rem amet repellat.
</p>
<hr>
<!-- Social Icons -->
<ul class="list-inline list-unstyled team-ul">
<li class="list-inline-item">
<a href="javascript:void(0);" class="p-2 fa-lg fb-ic">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a href="javascript:void(0);" class="p-2 fa-lg pin-ic">
<i class="fab fa-pinterest"> </i>
</a>
</li>
<li class="list-inline-item">
<a href="javascript:void(0);" class="p-2 fa-lg ins-ic">
<i class="fab fa-instagram"> </i>
</a>
</li>
<li href="javascript:void(0);" class="list-inline-item">
<a class="p-2 fa-lg tw-ic">
<i class="fab fa-twitter"> </i>
</a>
</li>
</ul>
</div>
</div>
<!-- Back Side -->
</div>
</div>
<!-- Rotating card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="item mb-lg-0 mb-4">
<!-- Rotating card -->
<div class="card-wrapper">
<div id="card-2" class="card card-rotating text-center">
<div class="face front">
<!-- Avatar -->
<div class="avat-image-team">
<img src="surfing/img/team2.jpg" alt="First sample avatar image">
</div>
</div>
<div class="face back">
<!-- Content -->
<div class="card-body p-0">
<h4 class="font-weight-bold mt-4 mb-2">
<strong>maria jose</strong>
</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta.
Blanditiis rem amet repellat.
</p>
<hr>
<!-- Social Icons -->
<ul class="list-inline list-unstyled team-ul">
<li class="list-inline-item">
<a class="p-2 fa-lg fb-ic">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg pin-ic">
<i class="fab fa-pinterest"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg ins-ic">
<i class="fab fa-instagram"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg tw-ic">
<i class="fab fa-twitter"> </i>
</a>
</li>
</ul>
</div>
</div>
<!-- Back Side -->
</div>
</div>
<!-- Rotating card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="item mb-lg-0 mb-4">
<!-- Rotating card -->
<div class="card-wrapper">
<div id="card-4" class="card card-rotating text-center">
<div class="face front">
<!-- Avatar -->
<div class="avat-image-team">
<img src="surfing/img/team3.jpg" alt="First sample avatar image">
</div>
</div>
<div class="face back">
<!-- Content -->
<div class="card-body p-0">
<h4 class="font-weight-bold mt-4 mb-2">
<strong>Williamson</strong>
</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta.
Blanditiis rem amet repellat.
</p>
<hr>
<!-- Social Icons -->
<ul class="list-inline list-unstyled team-ul">
<li class="list-inline-item">
<a class="p-2 fa-lg fb-ic">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg pin-ic">
<i class="fab fa-pinterest"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg ins-ic">
<i class="fab fa-instagram"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg tw-ic">
<i class="fab fa-twitter"> </i>
</a>
</li>
</ul>
</div>
</div>
<!-- Back Side -->
</div>
</div>
<!-- Rotating card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="item mb-lg-0 mb-4">
<!-- Rotating card -->
<div class="card-wrapper">
<div id="card-5" class="card card-rotating text-center">
<div class="face front">
<!-- Avatar -->
<div class="avat-image-team">
<img src="surfing/img/team4.jpg" alt="First sample avatar image">
</div>
</div>
<div class="face back">
<!-- Content -->
<div class="card-body p-0">
<h4 class="font-weight-bold mt-4 mb-2">
<strong>bella vita</strong>
</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta.
Blanditiis rem amet repellat.
</p>
<hr>
<!-- Social Icons -->
<ul class="list-inline list-unstyled team-ul">
<li class="list-inline-item">
<a class="p-2 fa-lg fb-ic">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg pin-ic">
<i class="fab fa-pinterest"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg ins-ic">
<i class="fab fa-instagram"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg tw-ic">
<i class="fab fa-twitter"> </i>
</a>
</li>
</ul>
</div>
</div>
<!-- Back Side -->
</div>
</div>
<!-- Rotating card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!--END FEATURES-->
<!--START PORTFOLIO-->
<section class="portfolio-sec" id="portfolio-sec">
<!--Heading-->
<div class="row">
<div class="col-12 col-md-12 col-lg-12 text-center wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
<div class="heading-area d-inline-block">
<h6 class="sub-title main-color">OUR WORK</h6>
<h2 class="title">SHOWCASES</h2>
<p class="paragraph ml-auto mr-auto">There are many variations of passages of Lorem Ipsum available be the majority have suffered alteration in some form, by injected humour or randomised words.
</div>
</div>
</div>
<!--Heading-->
<div class="portfolio-items owl-carousel owl-theme wow fadeIn">
<div class="item">
<a href="https://vimeo.com/155467649" data-fancybox="gallery" data-title="Showcases">
<div class="port-img">
<img src="surfing/img/work-1.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-inner-content">
<i class='lni lni-play'></i>
<span>play</span>
</div>
</div>
</a>
</div>
<div class="item">
<a href="surfing/img/work-2.jpg" data-fancybox="gallery" data-title="Showcases">
<div class="port-img">
<img src="surfing/img/work-2.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-inner-content">
<i class='lni lni-plus'></i>
<span>view</span>
</div>
</div>
</a>
</div>
<div class="item">
<a href="surfing/img/work-3.jpg" data-fancybox="gallery" data-title="Showcases">
<div class="port-img">
<img src="surfing/img/work-3.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-inner-content">
<i class='lni lni-plus'></i>
<span>view</span>
</div>
</div>
</a>
</div>
<div class="item">
<a href="https://vimeo.com/155467649" data-fancybox="gallery" data-title="Showcases">
<div class="port-img">
<img src="surfing/img/work-4.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-inner-content">
<i class='lni lni-play'></i>
<span>play</span>
</div>
</div>
</a>
</div>
<div class="item">
<a href="surfing/img/work-5.jpg" data-fancybox="gallery" data-title="Showcases">
<div class="port-img">
<img src="surfing/img/work-5.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-inner-content">
<i class='lni lni-plus'></i>
<span>view</span>
</div>
</div>
</a>
</div>
<div class="item">
<a href="surfing/img/work-6.jpg" data-fancybox="gallery" data-title="Showcases">
<div class="port-img">
<img src="surfing/img/work-6.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-inner-content">
<i class='lni lni-plus'></i>
<span>view</span>
</div>
</div>
</a>
</div>
</div>
</section>
<!--END PORTFOLIO-->
<!--START TESTIMONIAL-->
<section class="testimonial-sec" id="testimonial-sec">
<div class="container">
<!--Heading-->
<div class="row">
<div class="col-12 col-md-10 col-lg-8 offset-md-1 offset-lg-2 text-center wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
<div class="heading-area d-inline-block">
<h6 class="sub-title main-color">Our valuable customer </h6>
<h2 class="title">testimonial</h2>
<p class="paragraph">There are many variations of passages of Lorem Ipsum available be the majority have suffered alteration in some form, by injected humour or randomised words.
</div>
</div>
</div>
<!--Heading-->
<div class="row">
<div class="col-md-12">
<div id="testimonial-slider" class="owl-carousel owl-theme wow fadeIn">
<div class="testimonial">
<div class="pic">
<img src="surfing/img/test1.jpg">
</div>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto commodi dolorum earum fugiat, fugit hic id, ipsum laborum minus nostrum numquam perspiciatis saepe velit.
</p>
<div class="testimonial-profile">
<h3 class="title">Kristina-</h3>
<span class="post">Customer</span>
</div>
</div>
<div class="testimonial">
<div class="pic">
<img src="surfing/img/test2.jpg">
</div>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto commodi dolorum earum fugiat, fugit hic id, ipsum laborum minus nostrum numquam perspiciatis saepe velit.
</p>
<div class="testimonial-profile">
<h3 class="title">williamson-</h3>
<span class="post">Customer</span>
</div>
</div>
<div class="testimonial">
<div class="pic">
<img src="surfing/img/test3.jpg">
</div>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto commodi dolorum earum fugiat, fugit hic id, ipsum laborum minus nostrum numquam perspiciatis saepe velit.
</p>
<div class="testimonial-profile">
<h3 class="title">Steve Thomas-</h3>
<span class="post">Customer</span>
</div>
</div>
<div class="testimonial">
<div class="pic">
<img src="surfing/img/test4.jpg">
</div>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto commodi dolorum earum fugiat, fugit hic id, ipsum laborum minus nostrum numquam perspiciatis saepe velit.
</p>
<div class="testimonial-profile">
<h3 class="title">Alan Mark-</h3>
<span class="post">Customer</span>
</div>
</div>
<div class="testimonial">
<div class="pic">
<img src="surfing/img/team1.jpg">
</div>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto commodi dolorum earum fugiat, fugit hic id, ipsum laborum minus nostrum numquam perspiciatis saepe velit.
</p>
<div class="testimonial-profile">
<h3 class="title">Steve Thomas-</h3>
<span class="post">Trainer</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--END TESTIMONIAL-->
<section class="bg-light">
<div class="container">
<!--Partner Slider-->
<div class="owl-carousel partners-slider">
<div class="logo-item"> <img alt="client-logo" src="surfing/img/client-1.png"></div>
<div class="logo-item"> <img alt="client-logo" src="surfing/img/client-2.png"></div>
<div class="logo-item"> <img alt="client-logo" src="surfing/img/client-3.png"></div>
<div class="logo-item"> <img alt="client-logo" src="surfing/img/client-4.png"></div>
</div>
</div>
</section>
<!--Contact Start-->
<section id="contact">
<div class="container">
<!--Heading-->
<div class="row">
<div class="col-md-12 text-center">
<!--Heading-->
<div class="heading-area mx-570 pb-5">
<h6 class="sub-title main-color">For Support Contact Us</h6>
<h2 class="title m-0">Let's Get In Touch</h2>
</div>
</div>
</div>
<!--contact us-->
<form class="contact-form" id="contact-form-data">
<div class="row">
<div class="col-sm-12" id="result"></div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input class="form-control" type="text" placeholder="First Name:" required="" id="first_name" name="firstName">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input class="form-control" type="text" placeholder="Last Name:" required="" id="last_name" name="lastName">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input class="form-control" type="email" placeholder="Email:" required="" id="email" name="userEmail">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input class="form-control" type="tel" placeholder="Phone:" id="phone" name="userPhone">
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="form-group">
<textarea class="form-control" placeholder="Message" id="message" name="userMessage"></textarea>
</div>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-large btn-purple mt-4 contact_btn">Contact Now</button>
</div>
</div>
</form>
</div>
</section>
<!--Contact End-->
<!--Footer Start-->
<footer class="footer-style-1 bg-light">
<div class="container">
<div class="row align-items-center">
<!--Social-->
<div class="col-lg-6">
<div class="footer-social text-lg-left">
<ul class="list-unstyled">
<li><a class="wow fadeInUp" href="javascript:void(0);"><i aria-hidden="true"
class="fab fa-facebook-f"></i></a></li>
<li><a class="wow fadeInDown" href="javascript:void(0);"><i aria-hidden="true"
class="fab fa-twitter"></i></a></li>
<li><a class="wow fadeInUp" href="javascript:void(0);"><i aria-hidden="true"
class="fab fa-google-plus-g"></i></a></li>
<li><a class="wow fadeInDown" href="javascript:void(0);"><i aria-hidden="true"
class="fab fa-linkedin-in"></i></a></li>
<li><a class="wow fadeInUp" href="javascript:void(0);"><i aria-hidden="true"
class="fab fa-instagram"></i></a></li>
<li><a class="wow fadeInDown" href="javascript:void(0);"><i aria-hidden="true"
class="fab fa-pinterest-p"></i></a></li>
</ul>
</div>
</div>
<!--Text-->
<div class="col-lg-6 text-lg-right">
<p class="company-about fadeIn">© 2020 MegaOne. Made With Love By <a href="javascript:void(0);">Themesindustry</a>
</p>
</div>
</div>
</div>
</footer>
<!--Footer End-->
<!--Scroll Top Start-->
<span class="scroll-top-arrow"><i class="fas fa-angle-up"></i></span>
<!--Scroll Top End-->
<!-- JavaScript -->
<script src="vendor/js/bundle.min.js"></script>
<!-- Plugin Js -->
<script src="vendor/js/jquery.appear.js"></script>
<script src="vendor/js/jquery.fancybox.min.js"></script>
<script src="vendor/js/owl.carousel.min.js"></script>
<script src="vendor/js/parallaxie.min.js"></script>
<script src="vendor/js/wow.min.js"></script>
<script src="vendor/js/jquery.cubeportfolio.min.js"></script>
<!-- REVOLUTION JS FILES -->
<script src="vendor/js/jquery.themepunch.tools.min.js"></script>
<script src="vendor/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION EXTENSIONS -->
<script src="vendor/js/extensions/revolution.extension.actions.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.carousel.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.kenburn.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.migration.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.navigation.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.parallax.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.slideanims.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.video.min.js"></script>
<!--<script src="surfing/js/countdown.js"></script>-->
<!--contact form-->
<script src="vendor/js/contact_us.js"></script>
<!-- custom script-->
<script src="surfing/js/script.js"></script>
</body>
</html>