Free Responsive Personal Portfolio Website Templates Free Download themes and website templates. If you are looking for an easy way to represent your portfolio to the world these themes will help you create website templates for creative agency, design, and photography.
This blog post will walk you through creating a responsive portfolio website with essential sections like Home, Skills, Portfolio, About Us, Curriculum Vitae (CV), Contact Us Form, and Footer.
Table of Contents
HTML
- Create a Folder:
- You can create a new folder anywhere you’d like on your computer. Could you give it a name of your choice? For example, let’s call it “my website.”
- Inside the Folder:
- Open the newly created folder (“my-website” in our example).
- Inside this folder, create the following files:
- Create an
index.htmlFile:- Right-click inside the folder and choose New Text Document.
- Rename the newly created text document to “index.html” (make sure to remove the “.txt” extension).
- Open the “index.html” file using a text editor (such as Notepad or Visual Studio Code).
<!DOCTYPE html>
<html lang="en">
<!-- AC Zone By Animationcoding.com -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="wpOceans">
<link rel="shortcut icon" type="image/png" href="assets/images/favicon.png">
<title>Elito - Creative Portfolio HTML5 Template</title>
<link href="assets/css/themify-icons.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/flaticon.css" rel="stylesheet">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/magnific-popup.css" rel="stylesheet">
<link href="assets/css/animate.css" rel="stylesheet">
<link href="assets/css/owl.carousel.css" rel="stylesheet">
<link href="assets/css/owl.theme.css" rel="stylesheet">
<link href="assets/css/slick.css" rel="stylesheet">
<link href="assets/css/slick-theme.css" rel="stylesheet">
<link href="assets/css/swiper.min.css" rel="stylesheet">
<link href="assets/css/nice-select.css" rel="stylesheet">
<link href="assets/css/owl.transitions.css" rel="stylesheet">
<link href="assets/css/jquery.fancybox.css" rel="stylesheet">
<link href="assets/css/odometer-theme-default.css" rel="stylesheet">
<link href="assets/sass/style.css" rel="stylesheet">
</head>
<body>
<!-- start page-wrapper -->
<div class="page-wrapper">
<!-- start preloader -->
<div class="preloader">
<div class="vertical-centered-box">
<div class="content">
<div class="loader-circle"></div>
<div class="loader-line-mask">
<div class="loader-line"></div>
</div>
<img src="assets/images/preloader.png" alt="">
</div>
</div>
</div>
<!-- end preloader -->
<!-- Start header -->
<header id="header" class="wpo-header-style-1">
<div class="wpo-site-header">
<nav class="navigation navbar navbar-expand-lg navbar-light">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-3 col-md-3 col-3 d-lg-none dl-block">
<div class="mobail-menu">
<button type="button" class="navbar-toggler open-btn">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar first-angle"></span>
<span class="icon-bar middle-angle"></span>
<span class="icon-bar last-angle"></span>
</button>
</div>
</div>
<div class="col-lg-2 col-md-6 col-6">
<div class="navbar-header">
<a class="navbar-brand site-logo" href="index.html">.AC.</a>
</div>
</div>
<div class="col-lg-8 col-md-1 col-1">
<div id="navbar" class="collapse navbar-collapse navigation-holder">
<button class="menu-close"><i class="ti-close"></i></button>
<ul class="nav navbar-nav mb-2 mb-lg-0">
<li class="menu-item-has-children">
<a class="active" href="#">Home</a>
<ul class="sub-menu">
<li><a class="active" href="index.html">Main Home</a></li>
<li><a href="index-2.html">Home Style 2</a></li>
<li><a href="index-3.html">Home Style 3</a></li>
</ul>
</li>
<li>
<a href="about.html">About</a>
</li>
<li class="menu-item-has-children">
<a href="#">Service</a>
<ul class="sub-menu">
<li><a href="service.html">Service</a></li>
<li><a href="service-single.html">Service Single</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Portfolio</a>
<ul class="sub-menu">
<li><a href="portfolio-grid.html">Portfolio Grid</a></li>
<li><a href="portfolio-masonary.html">Portfolio Masonary</a></li>
<li><a href="portfolio.html">Portfolio Slide</a></li>
<li><a href="portfolio-single.html">Portfolio Single</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Blog</a>
<ul class="sub-menu">
<li><a href="blog.html">Blog right sidebar</a></li>
<li><a href="blog-left-sidebar.html">Blog left sidebar</a></li>
<li><a href="blog-fullwidth.html">Blog fullwidth</a></li>
<li class="menu-item-has-children">
<a href="#">Blog details</a>
<ul class="sub-menu">
<li><a href="blog-single.html">Blog details right
sidebar</a>
</li>
<li><a href="blog-single-left-sidebar.html">Blog details
left
sidebar</a></li>
<li><a href="blog-single-fullwidth.html">Blog details
fullwidth</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div><!-- end of nav-collapse -->
</div>
<div class="col-lg-2 col-md-2 col-2">
<div class="header-right">
<div class="header-btn">
<a class="theme-btn" download="My Cv" href="assets/images/cv.jpg"
title="ImageName">
<img class="hide-img" alt="ImageName" src="assets/images/cv.jpg">
Resume
</a>
</div>
</div>
</div>
</div>
</div><!-- end of container -->
</nav>
</div>
</header>
<!-- end of header -->
<!-- start of hero -->
<section class="static-hero" id='div'>
<div class="hero-container">
<div class="hero-inner">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-6 col-lg-6 col-12">
<div class="wpo-static-hero-inner">
<div data-swiper-parallax="300" class="slide-title">
<h2><span>Hello,</span>
I am Youtuber</h2>
</div>
<div data-swiper-parallax="300" class="slide-sub-title">
<h5>Web Designer</h5>
</div>
<div data-swiper-parallax="400" class="slide-text">
<p>Must explain to how all this mistaken idea denouncing pleasure pain
the system and expound the actua.</p>
</div>
<div class="clearfix"></div>
<div class="slide-btn"><a class="theme-btn" href="about.html">Hire Me</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="static-hero-right">
<div class="static-hero-img">
<div class="static-hero-img-inner">
<img src="assets/images/slider/1.png" alt="">
<div class="icon-1 floating-item"><img src="assets/images/icon/photoshop.svg" alt=""></div>
<div class="icon-2 floating-item"><img src="assets/images/icon/illustrator.svg" alt=""></div>
<div class="icon-3 floating-item"><img src="assets/images/icon/diamond.svg" alt=""></div>
<div class="project floating-item">
<div class="icon">
<i class="fi flaticon-verified"></i>
</div>
<div class="p-text">
<h3><span class="odometer" data-count="1500">00</span>+</h3>
<p>Complete Project</p>
</div>
</div>
</div>
</div>
</div>
<div class="shape-1">
<svg width="1038" height="938" viewBox="0 0 1038 938" fill="none">
<g opacity="0.5" filter="url(#filter0_f_39_4392)">
<circle cx="290.5" cy="282.5" r="247.5" />
</g>
<defs>
<filter id="filter0_f_39_4392" x="-457" y="-465" width="1495" height="1495"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="250" result="effect1_foregroundBlur_39_4392" />
</filter>
</defs>
</svg>
</div>
<div class="shape-2">
<svg width="1295" height="938" viewBox="0 0 1295 938" fill="none">
<g opacity="0.4" filter="url(#filter0_f_39_4393)">
<circle cx="647.5" cy="561.5" r="247.5" />
</g>
<defs>
<filter id="filter0_f_39_4393" x="0" y="-86" width="1295" height="1295"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="200" result="effect1_foregroundBlur_39_4393" />
</filter>
</defs>
</svg>
</div>
<div class="shape-3">
<svg width="752" height="747" viewBox="0 0 752 747" fill="none">
<g opacity="0.45" filter="url(#filter0_f_39_4394)">
<circle cx="647.5" cy="99.5" r="247.5" />
</g>
<defs>
<filter id="filter0_f_39_4394" x="0" y="-548" width="1295" height="1295"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="200" result="effect1_foregroundBlur_39_4394" />
</filter>
</defs>
</svg>
</div>
<div class="line-shape-1">
<img src="assets/images/slider/line-1.png" alt="">
</div>
<div class="line-shape-2">
<img src="assets/images/slider/line-2.png" alt="">
</div>
</section>
<!-- end of hero slider -->
<!-- start of wpo-about-area -->
<div class="wpo-about-area section-padding">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 col-md-12 col-sm-12">
<div class="wpo-about-exprience-wrap">
<div class="wpo-about-exprience">
<h2>08</h2>
<span>Years of Experience</span>
</div>
<div class="client">
<h3><span class="odometer" data-count="100">00</span>%</h3>
<p>Clients Satisfections</p>
</div>
</div>
</div>
<div class="col-lg-6 offset-lg-1 col-md-12 col-sm-12">
<div class="wpo-about-content">
<div class="wpo-about-title">
<h2>My Advantage</h2>
<p>Must explain to you how all this mistaken idea of denouncing
pleasure and praising pain was born and I will give you a complete account
the system and expound the actual and praising pain was born.</p>
</div>
<div class="wpo-about-funfact">
<div class="grid">
<div class="grid-inner">
<h3><span class="odometer" data-count="98">00</span>%</h3>
<p>Figma</p>
</div>
</div>
<div class="grid">
<div class="grid-inner">
<h3><span class="odometer" data-count="92">00</span>%</h3>
<p>Sketch</p>
</div>
</div>
<div class="grid">
<div class="grid-inner">
<h3><span class="odometer" data-count="88">00</span>%</h3>
<p>Photoshop</p>
</div>
</div>
<div class="grid">
<div class="grid-inner">
<h3><span class="odometer" data-count="72">00</span>%</h3>
<p>Illustrator</p>
</div>
</div>
<div class="grid">
<div class="grid-inner">
<h3><span class="odometer" data-count="43">00</span>%</h3>
<p>WordPress</p>
</div>
</div>
<div class="grid">
<div class="grid-inner">
<h3><span class="odometer" data-count="37">00</span>%</h3>
<p>ReactJS</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ab-shape">
<svg width="995" height="1495" viewBox="0 0 995 1495" fill="none">
<g opacity="0.3" filter="url(#filter0_f_39_4267)">
<circle cx="247.5" cy="747.5" r="247.5" fill="#FFE500" />
</g>
<defs>
<filter id="filter0_f_39_4267" x="-500" y="0" width="1495" height="1495"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="250" result="effect1_foregroundBlur_39_4267" />
</filter>
</defs>
</svg>
</div>
<div class="ab-shape-s2">
<svg width="1252" height="1901" viewBox="0 0 1252 1901" fill="none">
<g opacity="0.15" filter="url(#filter0_f_39_4265)">
<circle cx="950" cy="950.004" r="450" />
</g>
<defs>
<filter id="filter0_f_39_4265" x="-0.00012207" y="0.00402832" width="1900" height="1900"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="250" result="effect1_foregroundBlur_39_4265" />
</filter>
</defs>
</svg>
</div>
<div class="line-shape-1">
<img src="assets/images/about/shape1.png" alt="">
</div>
<div class="line-shape-2">
<img src="assets/images/about/shape2.png" alt="">
</div>
</div>
<!-- end of wpo-about-area -->
<!-- start of wpo-service-area -->
<div class="wpo-service-area section-padding">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-12">
<div class="wpo-section-title">
<h2>Popular Services</h2>
<p>Must explain to you how all this mistaken idea of denouncing pleasure
born and give you a complete account the system</p>
</div>
</div>
</div>
<div class="wpo-service-wrap">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link" id="Development-tab" data-bs-toggle="tab" href="#Development" role="tab"
aria-controls="Development" aria-selected="true">Development</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link active" id="Design-tab" data-bs-toggle="tab" href="#Design" role="tab"
aria-controls="Design" aria-selected="false">Design</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="Marketing-tab" data-bs-toggle="tab" href="#Marketing" role="tab"
aria-controls="Marketing" aria-selected="false">Marketing</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="Development">
<div class="row align-items-center">
<div class="col-lg-4 col-md-6 col-12">
<div class="wpo-service-item">
<div class="icon">
<i class="fi flaticon-coding"></i>
</div>
<h2>Web Development</h2>
<p>Explain to you how all this mistaken idea of denouncing pleasure born and
give you complete account the system.</p>
<a href="service-single.html">Learn More</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="wpo-service-item">
<div class="icon">
<i class="fi flaticon-app-development"></i>
</div>
<h2>App Development</h2>
<p>Explain to you how all this mistaken idea of denouncing pleasure born and
give you complete account the system.</p>
<a href="service-single.html">Learn More</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="wpo-service-item">
<div class="icon">
<i class="fi flaticon-smartphone"></i>
</div>
<h2>Softwere Development</h2>
<p>Explain to you how all this mistaken idea of denouncing pleasure born and
give you complete account the system.</p>
<a href="service-single.html">Learn More</a>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane active" id="Design">
<div class="row align-items-center">
<div class="col-lg-4 col-md-6 col-12">
<div class="wpo-service-item">
<div class="icon">
<i class="fi flaticon-vector"></i>
</div>
<h2>Graphic Design</h2>
<p>Explain to you how all this mistaken idea of denouncing pleasure born and
give you complete account the system.</p>
<a href="service-single.html">Learn More</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="wpo-service-item">
<div class="icon">
<i class="fi flaticon-palette"></i>
</div>
<h2>Brand Identity</h2>
<p>Explain to you how all this mistaken idea of denouncing pleasure born and
give you complete account the system.</p>
<a href="service-single.html">Learn More</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="wpo-service-item">
<div class="icon">
<i class="fi flaticon-add"></i>
</div>
<h2>UI/UX Design</h2>
<p>Explain to you how all this mistaken idea of denouncing pleasure born and
give you complete account the system.</p>
<a href="service-single.html">Learn More</a>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="Marketing">
<div class="row align-items-center">
<div class="col-lg-4 col-md-6 col-12">
<div class="wpo-service-item">
<div class="icon">
<i class="fi flaticon-social-media"></i>
</div>
<h2>Social Media Marketing</h2>
<p>Explain to you how all this mistaken idea of denouncing pleasure born and
give you complete account the system.</p>
<a href="service-single.html">Learn More</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="wpo-service-item">
<div class="icon">
<i class="fi flaticon-promotion"></i>
</div>
<h2>Digital Marketing</h2>
<p>Explain to you how all this mistaken idea of denouncing pleasure born and
give you complete account the system.</p>
<a href="service-single.html">Learn More</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="wpo-service-item">
<div class="icon">
<i class="fi flaticon-email-marketing"></i>
</div>
<h2>Email Marketing</h2>
<p>Explain to you how all this mistaken idea of denouncing pleasure born and
give you complete account the system.</p>
<a href="service-single.html">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ab-shape">
<svg width="995" height="1495" viewBox="0 0 995 1495" fill="none">
<g opacity="0.3" filter="url(#filter0_f_39_4268)">
<circle cx="247.5" cy="747.5" r="247.5" fill="#FFE500" />
</g>
<defs>
<filter id="filter0_f_39_4268" x="-500" y="0" width="1495" height="1495"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="250" result="effect1_foregroundBlur_39_4267" />
</filter>
</defs>
</svg>
</div>
</div>
<!-- end of wpo-service-area -->
<!-- start of wpo-work-area -->
<div class="wpo-work-area section-padding">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-12">
<div class="wpo-section-title">
<h2>My Work Experience</h2>
<p>Must explain to you how all this mistaken idea of denouncing pleasure
born and give you a complete account the system</p>
</div>
</div>
</div>
<div class="wpo-work-wrap">
<div class="wpo-work-item">
<ul>
<li class="date">2015 - 2016</li>
<li class="logo"><img src="assets/images/work/1.png" alt=""></li>
<li class="position">Junior Visual Designer <span>Trapeza Group, USA.</span></li>
<li class="link"><a href="#">Go to website</a></li>
</ul>
</div>
<div class="wpo-work-item">
<ul>
<li class="date">2017 - 2018</li>
<li class="logo"><img src="assets/images/work/2.png" alt=""></li>
<li class="position">UI/UX Designer <span>Gallerie Ontario, Canada
<span>(Remote)</span></span></li>
<li class="link"><a href="#">Go to website</a></li>
</ul>
</div>
<div class="wpo-work-item">
<ul>
<li class="date">2019 - 2020</li>
<li class="logo"><img src="assets/images/work/3.png" alt=""></li>
<li class="position">Seinor UI/UX Desinger <span>Morson Hybrid, Canada</span></li>
<li class="link"><a href="#">Go to website</a></li>
</ul>
</div>
<div class="wpo-work-item">
<ul>
<li class="date">2019 - <span>Present</span></li>
<li class="logo"><img src="assets/images/work/4.png" alt=""></li>
<li class="position">Product Designer <span>Myant Inc. Etobicoke, ON
<span>(Remote)</span></span></li>
<li class="link"><a href="#">Go to website</a></li>
</ul>
</div>
</div>
</div>
<div class="shape-wk">
<svg width="1500" height="1500" viewBox="0 0 1500 1500" fill="none">
<g opacity="0.45" filter="url(#filter0_f_39_4214)">
<circle cx="750" cy="750" r="200" />
</g>
<defs>
<filter id="filter0_f_39_4214" x="0" y="0" width="1500" height="1500"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="275" result="effect1_foregroundBlur_39_4212" />
</filter>
</defs>
</svg>
</div>
</div>
<!-- end of wpo-work-area -->
<!-- start of wpo-project-area -->
<div class="wpo-project-area section-padding">
<div class="container">
<div class="wpo-section-title-s2">
<div class="row align-items-center">
<div class="col-lg-4 col-12">
<div class="title">
<h2>Recent Work.</h2>
<p>Must explain to you how all this mistaken idea pleasure
born and give you a complete account.</p>
</div>
</div>
<div class="col-lg-6 offset-lg-2">
<div class="sec-title-icon">
<i class="fi flaticon-self-growth"></i>
</div>
</div>
</div>
</div>
<div class="wpo-project-wrap wpo-project-slide owl-carousel">
<div class="wpo-project-item">
<div class="wpo-project-img">
<img src="assets/images/project/img-1.jpg" alt="">
</div>
<div class="wpo-project-text">
<h2><a href="portfolio-single.html">Arkio - Architecture & Interior WordPress Theme</a></h2>
<span>Architecture / Business</span>
</div>
</div>
<div class="wpo-project-item">
<div class="wpo-project-img">
<img src="assets/images/project/img-2.jpg" alt="">
</div>
<div class="wpo-project-text">
<h2><a href="portfolio-single.html">Follio - Multipurpose Portfolio HTML5 Template</a></h2>
<span>Web Design</span>
</div>
</div>
<div class="wpo-project-item">
<div class="wpo-project-img">
<img src="assets/images/project/img-3.jpg" alt="">
</div>
<div class="wpo-project-text">
<h2><a href="portfolio-single.html">Elito - Creative Portfolio HTML5 Template</a></h2>
<span>Website / Creative</span>
</div>
</div>
<div class="wpo-project-item">
<div class="wpo-project-img">
<img src="assets/images/project/img-1.jpg" alt="">
</div>
<div class="wpo-project-text">
<h2><a href="portfolio-single.html">Arkio - Architecture & Interior WordPress Theme</a></h2>
<span>Architecture / Business</span>
</div>
</div>
<div class="wpo-project-item">
<div class="wpo-project-img">
<img src="assets/images/project/img-2.jpg" alt="">
</div>
<div class="wpo-project-text">
<h2><a href="portfolio-single.html">Follio - Multipurpose Portfolio HTML5 Template</a></h2>
<span>Web Design</span>
</div>
</div>
<div class="wpo-project-item">
<div class="wpo-project-img">
<img src="assets/images/project/img-3.jpg" alt="">
</div>
<div class="wpo-project-text">
<h2><a href="portfolio-single.html">Elito - Creative Portfolio HTML5 Template</a></h2>
<span>Website / Creative</span>
</div>
</div>
</div>
</div>
<div class="shape-p">
<svg width="1325" height="1687" viewBox="0 0 1325 1687" fill="none">
<g filter="url(#filter0_f_39_4166)">
<circle cx="481.5" cy="843.5" r="343.5" fill-opacity="0.27" />
</g>
<defs>
<filter id="filter0_f_39_4166" x="-362" y="0" width="1687" height="1687"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="250" result="effect1_foregroundBlur_39_4166" />
</filter>
</defs>
</svg>
</div>
<div class="line-shape-1">
<img src="assets/images/project/line-1.png" alt="">
</div>
<div class="line-shape-2">
<img src="assets/images/project/line-2.png" alt="">
</div>
</div>
<!-- end of wpo-project-area -->
<!--Start wpo-testimonial-section-->
<section class="wpo-testimonial-section section-padding">
<div class="container">
<div class="wpo-testimonial-wrap">
<div class="row align-items-center">
<div class="col-lg-6 col-12">
<div class="testimonial-left">
<div class="testimonial-left-inner">
<div class="slider-for">
<div class="testimonial-img">
<img src="assets/images/testimonial/img-1.jpg" alt="">
</div>
<div class="testimonial-img">
<img src="assets/images/testimonial/img-2.jpg" alt="">
</div>
<div class="testimonial-img">
<img src="assets/images/testimonial/img-3.jpg" alt="">
</div>
<div class="testimonial-img">
<img src="assets/images/testimonial/img-4.jpg" alt="">
</div>
<div class="testimonial-img">
<img src="assets/images/testimonial/img-5.jpg" alt="">
</div>
<div class="testimonial-img">
<img src="assets/images/testimonial/img-6.jpg" alt="">
</div>
</div>
<div class="side-img-1"><img src="assets/images/testimonial/img-2.jpg" alt=""></div>
<div class="side-img-2"><img src="assets/images/testimonial/img-3.jpg" alt=""></div>
<div class="side-img-3"><img src="assets/images/testimonial/img-4.jpg" alt=""></div>
<div class="side-img-4"><img src="assets/images/testimonial/img-5.jpg" alt=""></div>
<div class="side-img-5"><img src="assets/images/testimonial/img-6.jpg" alt=""></div>
<div class="border-s1"></div>
<div class="border-s2"></div>
<div class="border-s3"></div>
</div>
<div class="shape-t">
<svg width="750" height="750" viewBox="0 0 750 750" fill="none">
<g filter="url(#filter0_f_39_4154)">
<circle r="125" transform="matrix(-1 0 0 1 375 375)" fill-opacity="0.4" />
</g>
<defs>
<filter id="filter0_f_39_4154" x="0" y="0" width="750" height="750"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix"
result="shape" />
<feGaussianBlur stdDeviation="125"
result="effect1_foregroundBlur_39_4154" />
</filter>
</defs>
</svg>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="wpo-testimonial-items">
<div class="slider-nav">
<div class="wpo-testimonial-item">
<div class="wpo-testimonial-text">
<h4>Many desktop publishing packages and editors now use as their.</h4>
<p>It is a long established fact that a reader will be distracted by the
readable
content of page when looking at its layout point of using is that it has
more-or-less
normal distribution of letters, as opposed to using 'Content here,
content here',
making look like readable English.</p>
<div class="wpo-testimonial-text-btm">
<h3>Cathi Falcon, <span>Software Engineer</span></h3>
</div>
</div>
</div>
<div class="wpo-testimonial-item">
<div class="wpo-testimonial-text">
<h4>Many desktop publishing packages and editors now use as their.</h4>
<p>It is a long established fact that a reader will be distracted by the
readable
content of page when looking at its layout point of using is that it has
more-or-less
normal distribution of letters, as opposed to using 'Content here,
content here',
making look like readable English.</p>
<div class="wpo-testimonial-text-btm">
<h3>Robert Johnson, <span>Software Developer</span></h3>
</div>
</div>
</div>
<div class="wpo-testimonial-item">
<div class="wpo-testimonial-text">
<h4>Many desktop publishing packages and editors now use as their.</h4>
<p>It is a long established fact that a reader will be distracted by the
readable
content of page when looking at its layout point of using is that it has
more-or-less
normal distribution of letters, as opposed to using 'Content here,
content here',
making look like readable English.</p>
<div class="wpo-testimonial-text-btm">
<h3>Jenelia Orkid, <span>Web Designer</span></h3>
</div>
</div>
</div>
<div class="wpo-testimonial-item">
<div class="wpo-testimonial-text">
<h4>Many desktop publishing packages and editors now use as their.</h4>
<p>It is a long established fact that a reader will be distracted by the
readable
content of page when looking at its layout point of using is that it has
more-or-less
normal distribution of letters, as opposed to using 'Content here,
content here',
making look like readable English.</p>
<div class="wpo-testimonial-text-btm">
<h3>Cathi Falcon, <span>Software Enginee</span></h3>
</div>
</div>
</div>
<div class="wpo-testimonial-item">
<div class="wpo-testimonial-text">
<h4>Many desktop publishing packages and editors now use as their.</h4>
<p>It is a long established fact that a reader will be distracted by the
readable
content of page when looking at its layout point of using is that it has
more-or-less
normal distribution of letters, as opposed to using 'Content here,
content here',
making look like readable English.</p>
<div class="wpo-testimonial-text-btm">
<h3>Cathi Falcon, <span>Software Enginee</span></h3>
</div>
</div>
</div>
<div class="wpo-testimonial-item">
<div class="wpo-testimonial-text">
<h4>Many desktop publishing packages and editors now use as their.</h4>
<p>It is a long established fact that a reader will be distracted by the
readable
content of page when looking at its layout point of using is that it has
more-or-less
normal distribution of letters, as opposed to using 'Content here,
content here',
making look like readable English.</p>
<div class="wpo-testimonial-text-btm">
<h3>Cathi Falcon, <span>Software Enginee</span></h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="left-shape"></div>
<div class="right-shape"><img src="assets/images/testimonial/shape.png" alt=""></div>
</section>
<!--End wpo-testimonial-section-->
<!-- start wpo-pricing-section -->
<section class="wpo-pricing-section section-padding">
<div class="container">
<div class="row">
<div class="row justify-content-center">
<div class="col-lg-5">
<div class="wpo-section-title">
<h2>Pricing Plan</h2>
<p>Must explain to you how all this mistaken idea pleasure
born and give you a complete account.</p>
</div>
</div>
</div>
</div>
<div class="wpo-pricing-wrap">
<div class="row">
<div class="col col-lg-4 col-md-6 col-12">
<div class="wpo-pricing-item">
<div class="wpo-pricing-top">
<div class="pricing-thumb">
<span>Basic</span>
</div>
<div class="wpo-pricing-text">
<h2>$120<span> / per month</span></h2>
<p>Determine the Best Pricing Strategy For Your Business.</p>
</div>
</div>
<div class="wpo-pricing-bottom">
<div class="wpo-pricing-bottom-text">
<ul>
<li>Softwere Development</li>
<li>Web Development</li>
<li>Digital Marketing</li>
<li>Graphic Design</li>
<li>24/Support</li>
</ul>
<a href="pricing.html">CHOOSE PLAN</a>
</div>
</div>
</div>
</div>
<div class="col col-lg-4 col-md-6 col-12">
<div class="wpo-pricing-item">
<div class="wpo-pricing-top">
<div class="pricing-thumb">
<span>Premium</span>
</div>
<div class="wpo-pricing-text">
<h2>$210<span> / per month</span></h2>
<p>Determine the Best Pricing Strategy For Your Business.</p>
</div>
</div>
<div class="wpo-pricing-bottom">
<div class="wpo-pricing-bottom-text">
<ul>
<li>Softwere Development</li>
<li>Web Development</li>
<li>Digital Marketing</li>
<li>Graphic Design</li>
<li>24/Support</li>
</ul>
<a href="pricing.html">CHOOSE PLAN</a>
</div>
</div>
</div>
</div>
<div class="col col-lg-4 col-md-6 col-12">
<div class="wpo-pricing-item">
<div class="wpo-pricing-top">
<div class="pricing-thumb">
<span>Advanced</span>
</div>
<div class="wpo-pricing-text">
<h2>$373<span> / per month</span></h2>
<p>Determine the Best Pricing Strategy For Your Business.</p>
</div>
</div>
<div class="wpo-pricing-bottom">
<div class="wpo-pricing-bottom-text">
<ul>
<li>Softwere Development</li>
<li>Web Development</li>
<li>Digital Marketing</li>
<li>Graphic Design</li>
<li>24/Support</li>
</ul>
<a href="pricing.html">CHOOSE PLAN</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- end container -->
<div class="shape-p">
<svg width="1500" height="1500" viewBox="0 0 1500 1500" fill="none">
<g opacity="0.45" filter="url(#filter0_f_39_4213)">
<circle cx="750" cy="750" r="200" />
</g>
<defs>
<filter id="filter0_f_39_4213" x="0" y="0" width="1500" height="1500"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="275" result="effect1_foregroundBlur_39_4212" />
</filter>
</defs>
</svg>
</div>
</section>
<!-- end wpo-pricing-section -->
<!-- start of wpo-blog-section -->
<section class="wpo-blog-section section-padding">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-5">
<div class="wpo-section-title">
<h2>Latest News</h2>
<p>Must explain to you how all this mistaken idea pleasure
born and give you a complete account.</p>
</div>
</div>
</div>
<div class="wpo-blog-wrap wpo-blog-slide owl-carousel">
<div class="wpo-blog-item">
<div class="wpo-blog-img">
<img src="assets/images/blog/img-1.jpg" alt="">
</div>
<div class="wpo-blog-text">
<ul>
<li>January 02, 2022</li>
</ul>
<h2><a href="blog-single.html">Have evolved over the years sometimes accident.</a></h2>
<a class="details" href="blog-single.html">Post Details</a>
</div>
</div>
<div class="wpo-blog-item">
<div class="wpo-blog-img">
<img src="assets/images/blog/img-2.jpg" alt="">
</div>
<div class="wpo-blog-text">
<ul>
<li>January 03, 2022</li>
</ul>
<h2><a href="blog-single.html"> The Internet tend to repeat predefined chunks.</a></h2>
<a class="details" href="blog-single.html">Post Details</a>
</div>
</div>
<div class="wpo-blog-item">
<div class="wpo-blog-img">
<img src="assets/images/blog/img-3.jpg" alt="">
</div>
<div class="wpo-blog-text">
<ul>
<li>January 05, 2022</li>
</ul>
<h2><a href="blog-single.html">The standard chunk of used since the interested.</a></h2>
<a class="details" href="blog-single.html">Post Details</a>
</div>
</div>
</div>
</div>
<div class="shadow-shape">
<svg width="1319" height="1567" viewBox="0 0 1319 1567" fill="none">
<g filter="url(#filter0_f_39_3832)">
<circle cx="803" cy="803" r="303" fill="#59C378" fill-opacity="0.5" />
</g>
<defs>
<filter id="filter0_f_39_3832" x="0" y="0" width="1606" height="1606"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="250" result="effect1_foregroundBlur_39_3832" />
</filter>
</defs>
</svg>
</div>
</section>
<!-- end of wpo-blog-section -->
<!-- start wpo-site-footer -->
<footer class="wpo-site-footer">
<div class="upper-contact-area">
<div class="container">
<div class="contact-grids">
<div class="row align-items-center">
<div class="col col-lg-6">
<h2>Send me a message and make something together.</h2>
</div>
<div class="col col-lg-6">
<div class="send-message-btn">
<a class="theme-btn" href="contact.html">Contact Us</a>
</div>
</div>
</div>
<div class="left-shape"></div>
</div>
</div>
</div>
<div class="upper-footer">
<div class="container">
<div class="row">
<div class="col col-lg-4 col-md-6 col-12">
<div class="widget about-widget">
<div class="logo widget-title">
<a class="site-logo" href="index.html">.AC.</a>
</div>
<p>Welcome and open yourself to your truest love this year with us! With the Release
Process</p>
<div class="social-icons">
<ul>
<li><a href="#"><i class="ti-facebook"></i></a></li>
<li><a href="#"><i class="ti-twitter-alt"></i></a></li>
<li><a href="#"><i class="ti-linkedin"></i></a></li>
<li><a href="#"><i class="ti-pinterest"></i></a></li>
<li><a href="#"><i class="ti-vimeo-alt"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col col-lg-2 col-md-6 col-12">
<div class="widget link-widget">
<div class="widget-title">
<h3>Navigation</h3>
</div>
<ul>
<li><a href="#about">About us</a></li>
<li><a href="contact.html">Contact us</a></li>
<li><a href="#video">Video Guide</a></li>
<li><a href="blog.html">Recent Post</a></li>
</ul>
</div>
</div>
<div class="col col-lg-3 col-md-6 col-12">
<div class="widget link-widget service-link-widget">
<div class="widget-title">
<h3>All Services</h3>
</div>
<ul>
<li><a href="service-single.html">Web Design</a></li>
<li><a href="service-single.html">Web Development</a></li>
<li><a href="service-single.html">Brand Identity</a></li>
<li><a href="service-single.html">Digital Marketing</a></li>
</ul>
</div>
</div>
<div class="col col-lg-3 col-md-6 col-12">
<div class="widget newsletter-widget">
<div class="widget-title">
<h3>Newsletter</h3>
</div>
<p>Must explain to you how all this mistaken idea pleasure born and give you a complete
account.</p>
<form>
<div class="input-1">
<input type="email" class="form-control" placeholder="Email Address *" required>
</div>
<div class="submit clearfix">
<button type="submit"><i class="ti-email"></i></button>
</div>
</form>
</div>
</div>
</div>
</div> <!-- end container -->
<div class="shadow-shape">
<svg width="1319" height="1567" viewBox="0 0 1319 1567" fill="none">
<g filter="url(#filter0_f_39_3833)">
<circle cx="803" cy="803" r="303" fill="#59C378" fill-opacity="0.5" />
</g>
<defs>
<filter id="filter0_f_39_3833" x="0" y="0" width="1606" height="1606"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="250" result="effect1_foregroundBlur_39_3832" />
</filter>
</defs>
</svg>
</div>
</div>
<div class="lower-footer">
<div class="container">
<div class="row">
<div class="separator"></div>
<p class="copyright">Copyright © 2022 .AC. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<!-- end wpo-site-footer -->
</div>
<!-- end of page-wrapper -->
<!-- All JavaScript files
================================================== -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- Plugins for this template -->
<script src="assets/js/modernizr.custom.js"></script>
<script src="assets/js/jquery.dlmenu.js"></script>
<script src="assets/js/jquery-plugin-collection.js"></script>
<!-- Moving Animation -->
<script src="assets/js/moving-animation.js"></script>
<!-- Custom script for this template -->
<script src="assets/js/script.js"></script>
</body>
</html>
CSS
2. Create a style.css File:
- Right-click inside the folder again and choose New Text Document.
- Rename the newly created text document to
style.css(remove the “.txt” extension). - Open the
style.cssfile using a text editor.
<!-- AC Zone By Animationcoding.com -->
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
/* 1.1 Theme Reset Style */
html {
font-size: 15px;
}
:root {
scroll-behavior: unset;
}
body {
font-family: "Inter", sans-serif;
color: #888888;
background-color: #fff;
font-size: 16px;
font-size: 1.06667rem;
overflow-x: hidden;
}
@media (max-width: 767px) {
body {
font-size: 14px;
border-radius: 10px;
}
}
p {
font-size: 16px;
color: #888888;
line-height: 1.8em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #202020;
font-family: "Inter", sans-serif;
font-weight: 600;
}
ul {
padding-left: 0;
margin: 0;
}
a {
text-decoration: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
a:hover {
text-decoration: none;
}
img {
max-width: 100%;
}
.wpo-box-style {
padding: 0 130px;
}
@media (max-width: 1700px) {
.wpo-box-style {
padding: 0 30px;
}
}
@media (max-width: 575px) {
.wpo-box-style {
padding: 0 10px;
}
}
.hidden {
display: none;
}
.sr-only {
display: none !important;
opacity: 0;
visibility: hidden;
}
.pb-120 {
padding-bottom: 120px !important;
}
@media (max-width: 991px) {
.pb-120 {
padding-bottom: 90px !important;
}
}
@media (max-width: 767px) {
.pb-120 {
padding-bottom: 80px !important;
}
}
.pb-160 {
padding-bottom: 160px !important;
}
@media (max-width: 991px) {
.pb-160 {
padding-bottom: 120px !important;
}
}
@media (max-width: 767px) {
.pb-160 {
padding-bottom: 90px !important;
}
}
.pt-120 {
padding-top: 120px !important;
}
@media (max-width: 991px) {
.pt-120 {
padding-top: 90px !important;
}
}
@media (max-width: 767px) {
.pt-120 {
padding-top: 80px !important;
}
}
/* 1.2 Global Elements */
.page-wrapper {
position: relative;
overflow: hidden;
}
.wow {
visibility: hidden;
}
.fi:before {
margin: 0;
}
.section-padding {
padding: 120px 0;
}
@media (max-width: 991px) {
.section-padding {
padding: 90px 0;
}
}
@media (max-width: 767px) {
.section-padding {
padding: 80px 0;
}
}
.pt-120 {
padding-top: 120px;
}
@media (max-width: 991px) {
.pt-120 {
padding-top: 90px;
}
}
@media (max-width: 767px) {
.pt-120 {
padding-top: 80px;
}
}
.pb-120 {
padding-bottom: 120px;
}
@media (max-width: 991px) {
.pb-120 {
padding-bottom: 90px;
}
}
@media (max-width: 767px) {
.pb-120 {
padding-bottom: 80px;
}
}
/*** contact form error handling ***/
.contact-validation-active .error-handling-messages {
width: 100% !important;
margin-top: 15px !important;
}
.contact-validation-active label.error {
color: red;
font-size: 0.93333rem;
font-weight: normal;
margin: 5px 0 0 0;
text-align: left;
display: block;
}
.contact-validation-active #c-loader,
.contact-validation-active #loader {
display: none;
margin-top: 10px;
}
.contact-validation-active #c-loader i,
.contact-validation-active #loader i {
font-size: 30px;
font-size: 2rem;
color: #0e8af7;
display: inline-block;
-webkit-animation: rotating linear 2s infinite;
animation: rotating linear 2s infinite;
}
.contact-validation-active #success,
.contact-validation-active #c-success,
.contact-validation-active #c-error,
.contact-validation-active #error {
width: 100%;
color: #fff;
padding: 5px 10px;
font-size: 16px;
text-align: center;
display: none;
}
@media (max-width: 767px) {
.contact-validation-active #success,
.contact-validation-active #c-success,
.contact-validation-active #c-error,
.contact-validation-active #error {
font-size: 15px;
}
}
.contact-validation-active #c-success,
.contact-validation-active #success {
background-color: #009a00;
border-left: 5px solid green;
margin-bottom: 5px;
}
.contact-validation-active #c-error,
.contact-validation-active #error {
background-color: #ff1a1a;
border-left: 5px solid red;
}
@-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 5s alternate infinite;
animation: rotating 5s alternate infinite;
}
/*** back to top **/
.back-to-top {
background-color: #0e8af7;
width: 45px;
height: 45px;
line-height: 45px;
border: 2px solid #06579e;
border-radius: 45px;
text-align: center;
display: none;
position: fixed;
z-index: 999;
right: 15px;
bottom: 15px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
@media (max-width: 991px) {
.back-to-top {
width: 35px;
height: 35px;
line-height: 35px;
}
}
.back-to-top:hover {
background-color: #0e8af7;
}
.back-to-top i {
font-size: 18px;
font-size: 1.2rem;
color: #fff;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/** for popup image ***/
.mfp-wrap {
background-color: rgba(0, 0, 0, 0.9);
z-index: 99999;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
/*** for fancybox video ***/
.fancybox-overlay {
background: rgba(0, 0, 0, 0.9);
z-index: 9999 !important;
}
.fancybox-wrap {
z-index: 99999 !important;
}
.wpo-section-title,
.wpo-section-title-s2 {
margin-bottom: 60px;
text-align: center;
}
@media (max-width: 767px) {
.wpo-section-title,
.wpo-section-title-s2 {
margin-bottom: 40px;
}
}
.wpo-section-title h2,
.wpo-section-title-s2 h2 {
font-size: 48px;
line-height: 55px;
margin: 0;
position: relative;
font-family: "Inter", sans-serif;
font-weight: 700;
color: #202020;
display: inline-block;
padding-bottom: 20px;
position: relative;
margin-top: 10px;
}
@media (max-width: 1200px) {
.wpo-section-title h2,
.wpo-section-title-s2 h2 {
font-size: 35px;
}
}
@media (max-width: 767px) {
.wpo-section-title h2,
.wpo-section-title-s2 h2 {
font-size: 32px;
line-height: 40px;
}
}
@media (max-width: 575px) {
.wpo-section-title h2,
.wpo-section-title-s2 h2 {
font-size: 22px;
}
}
.wpo-section-title p,
.wpo-section-title-s2 p {
font-size: 18px;
color: #888888;
margin-bottom: 0;
}
.wpo-section-title-s2 {
text-align: left;
}
@media (max-width: 991px) {
.wpo-section-title-s2 {
text-align: center;
}
}
.theme-btn,
.view-cart-btn {
background: #0e8af7;
color: #fff;
display: inline-block;
font-weight: 600;
padding: 15px 35px;
padding-right: 65px;
border: 0;
border-radius: 40px;
text-transform: capitalize;
-webkit-backface-visibility: hidden;
z-index: 1;
position: relative;
font-size: 16px;
font-size: 1.06667rem;
}
.theme-btn:before,
.view-cart-btn:before {
position: absolute;
right: 30px;
top: 51%;
content: "\e628";
font-family: "themify";
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 14px;
}
.theme-btn:after,
.view-cart-btn:after {
position: absolute;
content: "";
top: 0;
left: 0;
border-radius: 40px;
width: 100%;
height: 100%;
background: #41b362;
-webkit-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
opacity: 0;
z-index: -1;
}
.theme-btn:hover,
.view-cart-btn:hover,
.theme-btn:focus,
.view-cart-btn:focus,
.theme-btn:active,
.view-cart-btn:active {
background: #46bc69;
color: #fff;
}
.theme-btn:hover:after,
.view-cart-btn:hover:after {
opacity: 1;
}
@media (max-width: 991px) {
.theme-btn,
.view-cart-btn {
font-size: 18px;
font-size: 1.2rem;
}
}
@media (max-width: 767px) {
.theme-btn,
.view-cart-btn {
padding: 12px 18px;
font-size: 14px;
padding-right: 45px;
}
.theme-btn:before,
.view-cart-btn:before {
right: 18px;
}
}
.theme-btn-s2 {
background: #fffbfb;
color: #fff;
display: inline-block;
padding: 12px 22px;
border: 1px solid #0e8af7;
border-radius: 55px;
text-transform: capitalize;
z-index: 1;
position: relative;
}
.theme-btn-s2:after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 55px;
background: -webkit-gradient(
linear,
left top,
right top,
from(#00ded8),
to(#00a7d5)
);
background: linear-gradient(left, #00ded8, #00a7d5);
-webkit-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
opacity: 0;
z-index: -1;
}
@media (max-width: 991px) {
.theme-btn-s2 {
font-size: 14px;
font-size: 0.93333rem;
}
}
.theme-btn-s2:hover,
.theme-btn-s2:focus,
.theme-btn-s2:active {
background: #46bc69;
color: #fff;
}
.theme-btn-s2:hover:after {
opacity: 1;
}
@media (max-width: 767px) {
.theme-btn-s2 {
padding: 12px 18px;
font-size: 13px;
}
}
.view-cart-btn {
display: block;
margin-top: 15px;
border-radius: 5px;
padding: 10px 45px;
}
.view-cart-btn:after,
.view-cart-btn:before {
display: none;
}
.view-cart-btn:hover {
background-color: #41b362;
}
.view-cart-btn.s1 {
background: #ddd;
}
.view-cart-btn.s1:hover {
background-color: #c9c9c9;
}
.form input,
.form textarea,
.form select {
border-color: #bfbfbf;
border-radius: 0;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
color: #595959;
font-style: normal;
}
.form input:focus,
.form textarea:focus,
.form select:focus {
border-color: #0e8af7;
-webkit-box-shadow: 0 0 5px 0 #7ed196;
-o-box-shadow: 0 0 5px 0 #7ed196;
-ms-box-shadow: 0 0 5px 0 #7ed196;
box-shadow: 0 0 5px 0 #7ed196;
}
.form ::-webkit-input-placeholder {
font-style: 14px;
font-style: italic;
color: #595959;
}
.form :-moz-placeholder {
font-style: 14px;
font-style: italic;
color: #595959;
}
.form ::-moz-placeholder {
font-style: 14px;
font-style: italic;
color: #595959;
}
.form :-ms-input-placeholder {
font-style: 14px;
font-style: italic;
color: #595959;
}
.form select {
font-style: normal;
background: url(../images/select-icon.png) no-repeat right center;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
cursor: pointer;
color: #595959;
}
.form select::-ms-expand {
/* for IE 11 */
display: none;
}
.form ::-webkit-input-placeholder {
/* Edge */
font-style: normal;
}
.form :-ms-input-placeholder {
/* Internet Explorer 10-11 */
font-style: normal;
}
.form ::-ms-input-placeholder {
font-style: normal;
}
.form ::placeholder {
font-style: normal;
}
.social-links {
overflow: hidden;
}
.social-links li {
float: left;
width: 35px;
height: 35px;
margin-right: 1px;
}
.social-links li a {
background-color: #7ed196;
width: 35px;
height: 35px;
line-height: 35px;
display: block;
color: #fff;
text-align: center;
}
.social-links li a:hover {
background-color: #0e8af7;
}
.wpo-page-title {
background: url(../images/page-title2.jpg) no-repeat center top/cover;
min-height: 350px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
z-index: 1;
}
@media (max-width: 767px) {
.wpo-page-title {
min-height: 250px;
}
}
.wpo-page-title .wpo-breadcumb-wrap {
text-align: center;
}
.wpo-page-title .wpo-breadcumb-wrap h2 {
font-size: 60px;
color: #fff;
line-height: 60px;
margin-top: -10px;
margin-bottom: 20px;
font-weight: 900;
}
@media (max-width: 767px) {
.wpo-page-title .wpo-breadcumb-wrap h2 {
font-size: 30px;
line-height: 35px;
margin-bottom: 10px;
}
}
.wpo-page-title .wpo-breadcumb-wrap ol {
padding-left: 0;
margin-bottom: 0;
}
.wpo-page-title .wpo-breadcumb-wrap ol li {
display: inline-block;
padding: 0px 5px;
color: #fff;
position: relative;
font-size: 20px;
font-family: "Inter", sans-serif;
}
@media (max-width: 767px) {
.wpo-page-title .wpo-breadcumb-wrap ol li {
font-size: 18px;
}
}
.wpo-page-title .wpo-breadcumb-wrap ol li:after {
content: "/";
position: relative;
left: 7px;
}
.wpo-page-title .wpo-breadcumb-wrap ol li:last-child span {
color: #cbd4fd;
}
.wpo-page-title .wpo-breadcumb-wrap ol li:last-child:after {
display: none;
}
.wpo-page-title .wpo-breadcumb-wrap ol li a {
color: #fff;
font-size: 20px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.wpo-page-title .wpo-breadcumb-wrap ol li a:hover {
color: #0e8af7;
}
.preloader {
background-color: #202020;
width: 100%;
height: 100%;
position: fixed;
z-index: 99999;
overflow: hidden;
}
.preloader .vertical-centered-box {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
.preloader .vertical-centered-box:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.preloader .vertical-centered-box .content {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
text-align: left;
font-size: 0;
}
.preloader * {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.preloader .loader-circle {
position: absolute;
left: 50%;
top: 50%;
width: 120px;
height: 120px;
border-radius: 50%;
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
margin-left: -60px;
margin-top: -60px;
}
.preloader .loader-line-mask {
position: absolute;
left: 50%;
top: 50%;
width: 60px;
height: 120px;
margin-left: -60px;
margin-top: -60px;
overflow: hidden;
-webkit-transform-origin: 60px 60px;
transform-origin: 60px 60px;
-webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
-webkit-animation: rotate 1.2s infinite linear;
animation: rotate 1.2s infinite linear;
}
.preloader .loader-line-mask .loader-line {
width: 120px;
height: 120px;
border-radius: 50%;
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.preloader #particles-background,
.preloader #particles-foreground {
left: -51%;
top: -51%;
width: 202%;
height: 202%;
-webkit-transform: scale3d(0.5, 0.5, 1);
transform: scale3d(0.5, 0.5, 1);
}
.preloader #particles-background {
background: #2c2d44;
background-image: linear-gradient(45deg, #3f3251 2%, #002025 100%);
}
.preloader lesshat-selector {
-lh-property: 0;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.preloader [not-existing] {
zoom: 1;
}
.preloader lesshat-selector {
-lh-property: 0;
}
@-webkit-keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 0.25;
}
}
@keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 0.25;
}
}
.preloader [not-existing] {
zoom: 1;
}
.preloader lesshat-selector {
-lh-property: 0;
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.preloader [not-existing] {
zoom: 1;
}
/*------------------------------------
blog sidebar
------------------------------------*/
.blog-sidebar {
/*** search-widget ***/
/*** about-widget ***/
/*** category-widget ***/
/*** recent-post-widget ***/
/*** instagram-widget ***/
/*** wpo-newsletter-widget ***/
/*** tag-widget ***/
/*** wpo-contact-widget ***/
}
@media screen and (min-width: 992px) {
.blog-sidebar {
padding-left: 45px;
}
}
@media (max-width: 991px) {
.blog-sidebar {
margin-top: 80px;
max-width: 400px;
}
}
@media (max-width: 767px) {
.blog-sidebar {
margin-top: 60px;
max-width: 400px;
}
}
.blog-sidebar .widget h3 {
font-size: 23px;
font-size: 1.53333rem;
color: #202020;
margin: 0 0 1.3em;
position: relative;
text-transform: capitalize;
font-family: "Inter", sans-serif;
padding-bottom: 20px;
font-weight: 700;
}
.blog-sidebar .widget h3:before {
content: "";
background-color: #0e8af7;
width: 55px;
height: 4px;
position: absolute;
left: 0;
bottom: 0;
border-radius: 10px;
}
.blog-sidebar .widget h3:after {
content: "";
background-color: #f1f1f1;
width: 80%;
height: 4px;
position: absolute;
left: 65px;
bottom: 0;
border-radius: 10px;
}
.blog-sidebar > .widget + .widget {
margin-top: 65px;
}
.blog-sidebar .search-widget form div {
position: relative;
}
.blog-sidebar .search-widget input {
background-color: #f3f3f3;
height: 70px;
font-size: 16px;
font-size: 1.06667rem;
padding: 6px 50px 6px 20px;
border: 0;
border-radius: 5px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
color: #fff;
}
.blog-sidebar .search-widget input:focus {
background-color: rgba(89, 195, 120, 0.1);
}
.blog-sidebar .search-widget form button {
background: transparent;
font-size: 20px;
font-size: 1.33333rem;
color: #fff;
background-color: #0e8af7;
border: 0;
outline: 0;
position: absolute;
right: 10px;
top: 52%;
height: 50px;
line-height: 50px;
width: 50px;
border-radius: 6px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.blog-sidebar .about-widget {
text-align: center;
background-color: #f3f3f3;
padding: 45px;
position: relative;
z-index: 1;
}
@media (max-width: 1200px) {
.blog-sidebar .about-widget {
padding: 35px;
}
}
.blog-sidebar .about-widget .aw-shape {
position: absolute;
right: 0;
top: 0;
z-index: -1;
display: none;
}
.blog-sidebar .about-widget .img-holder {
margin-bottom: 25px;
}
.blog-sidebar .about-widget .img-holder img {
border-radius: 50%;
width: 100%;
max-width: 200px;
}
.blog-sidebar .about-widget ul {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.blog-sidebar .about-widget ul li {
margin-right: 10px;
}
.blog-sidebar .about-widget ul li:last-child {
margin-right: 0;
}
.blog-sidebar .about-widget ul li a {
text-decoration: none;
display: block;
width: 40px;
height: 40px;
line-height: 44px;
background-color: #fffdfd;
border-radius: 50%;
}
.blog-sidebar .about-widget h4 {
font-size: 25px;
font-weight: 700;
margin-bottom: 15px;
}
.blog-sidebar .about-widget p {
font-size: 15px;
font-size: 1rem;
margin-bottom: 1.2em;
}
.blog-sidebar .about-widget a {
font-family: "Inter", sans-serif;
font-size: 14px;
font-size: 0.93333rem;
color: #202020;
text-decoration: underline;
}
.blog-sidebar .about-widget a:hover {
color: #0e8af7;
}
.blog-sidebar .category-widget ul {
list-style: none;
}
.blog-sidebar .category-widget ul li {
font-size: 19px;
font-size: 1.26667rem;
position: relative;
}
@media (max-width: 767px) {
.blog-sidebar .category-widget ul li {
font-size: 16px;
font-size: 1.06667rem;
}
}
.blog-sidebar .category-widget ul li span {
position: absolute;
right: 0;
}
.blog-sidebar .category-widget ul > li + li {
margin-top: 12px;
padding-top: 12px;
}
.blog-sidebar .category-widget ul a {
display: block;
color: #888888;
font-size: 16px;
font-weight: 600;
}
.blog-sidebar .category-widget ul a span {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
background-color: #f3f3f3;
text-align: center;
border-radius: 50%;
font-size: 18px;
}
@media (max-width: 767px) {
.blog-sidebar .category-widget ul a span {
font-size: 14px;
font-size: 0.93333rem;
}
}
.blog-sidebar .category-widget ul a:hover,
.blog-sidebar .category-widget ul li:hover:before {
color: #0e8af7;
}
.blog-sidebar .recent-post-widget .post {
overflow: hidden;
}
.blog-sidebar .recent-post-widget .posts > .post + .post {
margin-top: 15px;
padding-top: 15px;
}
.blog-sidebar .recent-post-widget .post .img-holder {
width: 90px;
float: left;
}
.blog-sidebar .recent-post-widget .post .img-holder img {
border-radius: 6px;
}
.blog-sidebar .recent-post-widget .post .details {
width: calc(100% - 90px);
float: left;
padding-left: 20px;
}
.blog-sidebar .recent-post-widget .post h4 {
font-size: 18px;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.3em;
margin: 0 0 0.3em;
font-family: "Inter", sans-serif;
}
@media (max-width: 1199px) {
.blog-sidebar .recent-post-widget .post h4 {
margin: 0;
}
}
@media (max-width: 767px) {
.blog-sidebar .recent-post-widget .post h4 {
font-size: 16px;
font-size: 1.06667rem;
}
}
.blog-sidebar .recent-post-widget .post h4 a {
display: inline-block;
color: #202020;
}
.blog-sidebar .recent-post-widget .post h4 a:hover {
color: #0e8af7;
}
.blog-sidebar .recent-post-widget .post .details .date {
font-size: 13px;
font-size: 0.86667rem;
color: #888888;
}
.blog-sidebar .recent-post-widget .post .details .date i {
display: inline-block;
padding-right: 7px;
}
.blog-sidebar .wpo-instagram-widget ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
}
.blog-sidebar .wpo-instagram-widget ul li {
-ms-flex: 0 0 33.33%;
-webkit-box-flex: 0;
flex: 0 0 33.33%;
max-width: 33.33%;
margin-bottom: 5px;
padding: 0px 3px;
}
.blog-sidebar .wpo-instagram-widget ul li img {
width: 100%;
}
.blog-sidebar .wpo-newsletter-widget p {
font-size: 18px;
color: #888888;
text-align: left;
}
.blog-sidebar .wpo-newsletter-widget span {
font-size: 15px;
color: #888888;
}
.blog-sidebar .wpo-newsletter-widget span a {
color: #888888;
font-weight: 700;
}
.blog-sidebar .wpo-newsletter-widget span a:hover {
color: #0e8af7;
}
.blog-sidebar .wpo-newsletter-widget .form input {
border: 0;
display: block;
width: 100%;
height: 55px;
border-radius: 10px;
padding: 15px;
text-align: center;
background-color: #f3f3f3;
color: #202020;
}
.blog-sidebar .wpo-newsletter-widget .form input::-webkit-input-placeholder {
/* Edge */
color: #888888;
}
.blog-sidebar .wpo-newsletter-widget .form input:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #888888;
}
.blog-sidebar .wpo-newsletter-widget .form input::-ms-input-placeholder {
color: #888888;
}
.blog-sidebar .wpo-newsletter-widget .form input::placeholder {
color: #888888;
}
.blog-sidebar .wpo-newsletter-widget .form button {
background: #0e8af7;
width: 100%;
height: 55px;
border-radius: 10px;
text-align: center;
color: #fff;
border: none;
margin: 20px 0;
}
.blog-sidebar .tag-widget ul {
overflow: hidden;
list-style: none;
}
.blog-sidebar .tag-widget ul li {
float: left;
margin: 0 8px 8px 0;
}
.blog-sidebar .tag-widget ul li a {
font-size: 15px;
font-size: 1rem;
display: inline-block;
padding: 5px 18px;
color: #202020;
background: #f3f3f3;
border-radius: 5px;
}
.blog-sidebar .tag-widget ul li a:hover {
background: #0e8af7;
color: #fff;
}
.blog-sidebar .wpo-contact-widget {
border: 0;
background: url(../images/bg-2.html) no-repeat center center;
position: relative;
background-size: cover;
z-index: 1;
padding: 30px 40px;
}
.blog-sidebar .wpo-contact-widget:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(22, 57, 103, 0.9);
content: "";
z-index: -1;
}
@media (max-width: 1200px) {
.blog-sidebar .wpo-contact-widget {
padding: 20px;
}
}
.blog-sidebar .wpo-contact-widget h2 {
font-size: 36px;
font-weight: 700;
text-align: left;
color: #fff;
margin-bottom: 20px;
}
.blog-sidebar .wpo-contact-widget h2::before {
left: 28px;
background: url(../images/Single-title-shape2.html) no-repeat right center;
}
.blog-sidebar .wpo-contact-widget p {
color: #fff;
font-size: 18px;
}
.blog-sidebar .wpo-contact-widget a {
display: inline-block;
padding: 10px 20px;
border: 1px solid #fff;
font-size: 18px;
color: #fff;
padding-right: 90px;
position: relative;
margin-top: 10px;
}
.blog-sidebar .wpo-contact-widget a::before {
font-family: "themify";
content: "\e628";
font-size: 18px;
position: absolute;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
@media screen and (min-width: 992px) {
.wpo-blog-pg-section.blog-pg-left-sidebar .blog-sidebar {
padding-left: 0px;
padding-right: 45px;
}
}
@media screen and (min-width: 992px) {
.wpo-blog-single-section.wpo-blog-single-left-sidebar-section .blog-sidebar {
padding-left: 0px;
padding-right: 45px;
}
}
/*------------------------------------
shop sidebar
------------------------------------*/
.wpo-shop-sidebar {
/*** search-widget ***/
/*** widget_price_filter ***/
/*** widget_product_categories ***/
}
@media (max-width: 991px) {
.wpo-shop-sidebar {
margin-top: 50px;
}
}
.wpo-shop-sidebar .widget h3 {
font-size: 18px;
font-size: 1.2rem;
font-weight: 700;
margin: 0 0 1.5em;
position: relative;
text-transform: none;
text-transform: uppercase;
font-family: "Inter", sans-serif;
}
.wpo-shop-sidebar > .widget + .widget {
margin-top: 65px;
}
.wpo-shop-sidebar .search-widget form div {
position: relative;
}
.wpo-shop-sidebar .search-widget input {
font-size: 14px;
font-size: 0.93333rem;
width: 100%;
height: 60px;
border: 1px solid #e4ebf2;
padding: 10px;
}
.wpo-shop-sidebar .search-widget input:focus {
outline: none;
border-color: #0e8af7;
}
.wpo-shop-sidebar .search-widget form button {
background-color: #0e8af7;
color: #fff;
padding: 0;
border: 0;
outline: 0;
position: absolute;
right: 0px;
top: 0px;
border-radius: 0;
width: 60px;
height: 60px;
}
.wpo-shop-sidebar .search-widget form button i {
font-size: 18px;
font-size: 1.2rem;
}
.wpo-shop-sidebar .widget_price_filter .ui-corner-all,
.wpo-shop-sidebar .widget_price_filter .ui-corner-bottom,
.wpo-shop-sidebar .widget_price_filter .ui-corner-right,
.wpo-shop-sidebar .widget_price_filter .ui-corner-br {
border-radius: 30px;
}
.wpo-shop-sidebar .widget_price_filter .filter-price {
position: relative;
font-size: 14px;
}
.wpo-shop-sidebar .widget_price_filter .filter-price input {
border: 0;
padding: 0;
display: inline-block;
width: auto;
position: absolute;
}
.wpo-shop-sidebar .widget_price_filter .filter-price input:focus {
border: 0;
outline: none;
}
.wpo-shop-sidebar .widget_price_filter .filter-price button {
font-family: "Inter", sans-serif;
background: transparent;
color: #0e8af7;
font-size: 18px;
font-size: 1.2rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0;
display: inline-block;
border: 0;
outline: none;
position: absolute;
right: 0;
z-index: 99;
text-decoration: underline;
}
.wpo-shop-sidebar .widget_price_filter .filter-price button:hover,
.wpo-shop-sidebar .widget_price_filter .filter-price button:focus,
.wpo-shop-sidebar .widget_price_filter .filter-price button:active {
text-decoration: underline;
}
.wpo-shop-sidebar .widget_price_filter .filter-price #amount {
color: #000;
}
.wpo-shop-sidebar .widget_price_filter #slider-range {
height: 3px;
background: #f3f8ff;
border: 0;
border-radius: 50px;
margin-bottom: 25px;
margin-left: 8px;
}
.wpo-shop-sidebar .widget_price_filter .ui-state-default,
.wpo-shop-sidebar .widget_price_filter .ui-widget-content .ui-state-default,
.wpo-shop-sidebar .widget_price_filter .ui-widget-header .ui-state-default {
width: 10px;
height: 10px;
border: none;
background: #dfca08;
top: -4px;
}
.wpo-shop-sidebar .widget_price_filter .ui-state-default:focus,
.wpo-shop-sidebar
.widget_price_filter
.ui-widget-content
.ui-state-default:focus,
.wpo-shop-sidebar
.widget_price_filter
.ui-widget-header
.ui-state-default:focus {
outline: none;
}
.wpo-shop-sidebar .widget_price_filter .ui-widget-header {
background: #dfca08;
}
.wpo-shop-sidebar .widget_product_categories,
.wpo-shop-sidebar .woocommerce-widget-layered-nav {
font-family: "Inter", sans-serif;
}
.wpo-shop-sidebar .widget_product_categories .product-categories a,
.wpo-shop-sidebar
.widget_product_categories
.woocommerce-widget-layered-nav-list
a,
.wpo-shop-sidebar .woocommerce-widget-layered-nav .product-categories a,
.wpo-shop-sidebar
.woocommerce-widget-layered-nav
.woocommerce-widget-layered-nav-list
a {
color: #585858;
}
.wpo-shop-sidebar .widget_product_categories .product-categories,
.wpo-shop-sidebar .woocommerce-widget-layered-nav .product-categories {
list-style: none;
}
.wpo-shop-sidebar .widget_product_categories .product-categories li,
.wpo-shop-sidebar
.widget_product_categories
.woocommerce-widget-layered-nav-list
li,
.wpo-shop-sidebar .woocommerce-widget-layered-nav .product-categories li,
.wpo-shop-sidebar
.woocommerce-widget-layered-nav
.woocommerce-widget-layered-nav-list
li {
margin-top: 10px;
position: relative;
padding-bottom: 10px;
border-bottom: 1px solid #e4ebf2;
}
.wpo-shop-sidebar .widget_product_categories .product-categories li:first-child,
.wpo-shop-sidebar
.widget_product_categories
.woocommerce-widget-layered-nav-list
li:first-child,
.wpo-shop-sidebar
.woocommerce-widget-layered-nav
.product-categories
li:first-child,
.wpo-shop-sidebar
.woocommerce-widget-layered-nav
.woocommerce-widget-layered-nav-list
li:first-child {
margin-top: 0;
}
.wpo-shop-sidebar .widget_product_categories .product-categories li:last-child,
.wpo-shop-sidebar
.widget_product_categories
.woocommerce-widget-layered-nav-list
li:last-child,
.wpo-shop-sidebar
.woocommerce-widget-layered-nav
.product-categories
li:last-child,
.wpo-shop-sidebar
.woocommerce-widget-layered-nav
.woocommerce-widget-layered-nav-list
li:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.wpo-shop-sidebar .widget_product_categories .product-categories li a,
.wpo-shop-sidebar
.widget_product_categories
.woocommerce-widget-layered-nav-list
li
a,
.wpo-shop-sidebar .woocommerce-widget-layered-nav .product-categories li a,
.wpo-shop-sidebar
.woocommerce-widget-layered-nav
.woocommerce-widget-layered-nav-list
li
a {
font-size: 16px;
font-size: 1.06667rem;
font-weight: 500;
position: relative;
}
.wpo-shop-sidebar .widget_product_categories .product-categories li a:hover,
.wpo-shop-sidebar
.widget_product_categories
.woocommerce-widget-layered-nav-list
li
a:hover,
.wpo-shop-sidebar
.woocommerce-widget-layered-nav
.product-categories
li
a:hover,
.wpo-shop-sidebar
.woocommerce-widget-layered-nav
.woocommerce-widget-layered-nav-list
li
a:hover {
text-decoration: underline;
color: #000;
}
.wpo-shop-sidebar
.widget_product_categories
.product-categories
li
a:hover:before,
.wpo-shop-sidebar
.widget_product_categories
.woocommerce-widget-layered-nav-list
li
a:hover:before,
.wpo-shop-sidebar
.woocommerce-widget-layered-nav
.product-categories
li
a:hover:before,
.wpo-shop-sidebar
.woocommerce-widget-layered-nav
.woocommerce-widget-layered-nav-list
li
a:hover:before {
border-color: #000;
}
/*** widget_best-seller ***/
.widget_best-seller .wpo-best-seller-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 20px;
}
.widget_best-seller .wpo-best-seller-item:last-child {
margin-bottom: 0;
}
.widget_best-seller .wpo-best-seller-item .wpo-best-seller-text {
margin-left: 20px;
}
.widget_best-seller .wpo-best-seller-item .wpo-best-seller-text h4 {
font-size: 18px;
font-weight: 600;
color: #585858;
font-family: "Inter", sans-serif;
}
.widget_best-seller .wpo-best-seller-item .wpo-best-seller-text span {
font-size: 16px;
color: #8d8d8d;
}
/*** instagram-widget ***/
.wpo-instagram-widget ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
}
.wpo-instagram-widget ul li {
-ms-flex: 0 0 50%;
-webkit-box-flex: 0;
flex: 0 0 50%;
max-width: 50%;
margin-bottom: 5px;
padding: 0px 3px;
}
.wpo-instagram-widget ul li img {
width: 100%;
}
/**** pagination ****/
.pagination-wrapper {
text-align: center;
margin-top: 60px;
}
@media (max-width: 991px) {
.pagination-wrapper {
text-align: left;
margin-top: 40px;
}
}
.pagination-wrapper .pg-pagination {
display: inline-block;
overflow: hidden;
list-style-type: none;
text-align: center;
}
.pagination-wrapper .pg-pagination li {
float: left;
margin-right: 10px;
}
@media (max-width: 767px) {
.pagination-wrapper .pg-pagination li {
margin-right: 5px;
}
}
.pagination-wrapper .pg-pagination li:last-child {
margin-right: 0;
}
.pagination-wrapper .pg-pagination li a {
background-color: transparent;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 16px;
font-size: 1.06667rem;
font-weight: 600;
color: #202020;
background: #f3f3f3;
display: block;
}
@media (max-width: 991px) {
.pagination-wrapper .pg-pagination li a {
width: 40px;
height: 40px;
line-height: 40px;
font-size: 15px;
font-size: 1rem;
}
}
.pagination-wrapper .pg-pagination .active a,
.pagination-wrapper .pg-pagination li a:hover {
background: #0e8af7;
border-color: #0e8af7;
color: #fff;
}
.pagination-wrapper .pg-pagination .fi:before {
font-size: 15px;
font-size: 1rem;
}
.pagination-wrapper-left {
text-align: left;
}
.pagination-wrapper-right {
text-align: right;
}
@media screen and (min-width: 1200px) {
.pagination-wrapper-right {
padding-right: 50px;
}
}
@media (max-width: 991px) {
.pagination-wrapper-right {
margin-top: 45px;
text-align: left;
}
}
/*--------------------------------------------------------------
2. header
--------------------------------------------------------------*/
/*-- 2.1 topbar --*/
.topbar {
background: none;
}
@media (max-width: 991px) {
.topbar {
text-align: center;
padding: 0;
}
}
@media (max-width: 767px) {
.header-style-1 {
text-align: center;
padding: 20px 0;
}
}
.topbar {
font-size: 16px;
color: #e5e3e3;
margin: 0;
}
.topbar ul {
overflow: hidden;
list-style: none;
float: right;
margin-bottom: 0;
}
@media (max-width: 991px) {
.topbar ul {
float: none;
display: inline-block;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
.topbar ul li {
font-size: 16px;
float: left;
padding: 15px 10px;
color: #fff;
line-height: 1em;
}
@media (max-width: 991px) {
.topbar ul li {
padding: 15px 10px;
}
}
.topbar .contact-info ul li a {
color: #fff;
}
.topbar .contact-info ul li a:hover {
color: #0e8af7;
}
.topbar ul li:first-child {
padding-left: 0;
}
.topbar .contact-intro ul {
float: left;
margin-bottom: 0;
}
@media (max-width: 991px) {
.topbar .contact-intro ul {
float: none;
}
}
@media (max-width: 1200px) {
.topbar ul li {
font-size: 12px;
padding: 15px 10px;
}
}
@media (max-width: 991px) {
.topbar ul li {
font-size: 13px;
}
.topbar {
padding: 10px 0;
}
}
@media (max-width: 767px) {
.topbar ul li {
float: left;
border: none;
padding: 8px 6px;
font-size: 13px;
}
}
@media (max-width: 590px) {
.topbar ul li {
float: none;
}
.topbar .contact-info ul li {
float: left;
}
.topbar ul {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.topbar .theme-btn-s2 {
padding: 15px 20px;
font-size: 14px;
font-weight: 600;
margin-bottom: -3px;
color: #fff !important;
}
.topbar ul .fi {
position: relative;
top: 2px;
display: inline-block;
padding-right: 6px;
}
.topbar ul .fi:before {
font-size: 15px;
font-size: 1rem;
color: #fff;
}
/* 2.2 navigation */
.wpo-site-header {
/* navigation open and close btn hide for width screen */
/* style for navigation less than 992px */
/*navbar collaps less then 992px*/
/*** cart-search-contact ***/
background-color: #fff;
}
.wpo-site-header .navbar-brand.site-logo {
font-size: 45px;
font-weight: 700;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #202020;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
}
.wpo-site-header .navbar-brand.site-logo img {
border-radius: 50%;
margin-right: 10px;
}
@media (min-width: 991px) {
.wpo-site-header {
padding: 0 130px;
}
}
.wpo-site-header .navigation {
background-color: #fff;
margin-bottom: 0;
padding: 0;
border: 0;
border-radius: 0;
}
.sticky-header {
width: 100%;
position: fixed;
left: 0;
top: -400px;
z-index: 9999;
opacity: 0;
visibility: hidden;
-webkit-transition: all 1s;
transition: all 1s;
-webkit-box-shadow: 0 -5px 15px #086ad84a;
box-shadow: 0 -5px 15px #086ad84a;
}
.sticky-on {
opacity: 1;
top: 0;
visibility: visible;
}
.wpo-site-header .navigation > .container {
position: relative;
}
.wpo-site-header .row {
width: 100%;
}
@media (max-width: 991px) {
.wpo-site-header .navigation {
padding: 5px 0;
}
}
.wpo-site-header #navbar {
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.wpo-site-header #navbar > ul li a:hover,
.wpo-site-header #navbar > ul li a:focus {
text-decoration: none;
color: #0e8af7;
}
@media screen and (min-width: 992px) {
.wpo-site-header #navbar {
/*** hover effect ***/
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.wpo-site-header #navbar li {
position: relative;
}
.wpo-site-header #navbar > ul > li > a:before {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background: #0e8af7;
content: "";
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
border-radius: 3px;
}
.wpo-site-header #navbar > ul > li > a:hover:before,
.wpo-site-header #navbar > ul > li.current-menu-item a:before,
.wpo-site-header #navbar > ul > li > a.active:before {
opacity: 1;
visibility: visible;
}
.wpo-site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a {
position: relative;
}
.wpo-site-header #navbar > ul > li:hover > .sub-menu {
top: 100%;
visibility: visible;
opacity: 1;
}
.wpo-site-header #navbar .sub-menu > li:hover > .sub-menu {
left: 100%;
visibility: visible;
opacity: 1;
}
}
.wpo-site-header .container-fluid {
padding-right: 0;
}
@media (max-width: 991px) {
.wpo-site-header {
/* class for show hide navigation */
}
.wpo-site-header .container {
width: 100%;
max-width: 100%;
}
.wpo-site-header .header-right {
right: -10px;
}
.wpo-site-header .navbar-header button span {
background-color: #fff;
width: 20px;
display: block;
height: 2px;
margin-bottom: 5px;
}
.wpo-site-header .navbar-header button span:last-child {
margin: 0;
}
}
.wpo-site-header #navbar ul {
list-style: none;
}
@media (max-width: 991px) and (max-width: 991px) {
.wpo-site-header #navbar {
top: 0;
visibility: visible;
opacity: 1;
}
}
@media (max-width: 991px) {
.wpo-site-header #navbar > ul {
z-index: 101;
}
.wpo-site-header #navbar ul a {
color: #000;
}
.wpo-site-header #navbar ul a:hover,
.wpo-site-header #navbar ul li.current a {
color: #0e8af7;
}
.wpo-site-header #navbar .close-navbar .ti-close {
position: relative;
top: 1px;
}
.wpo-site-header .navbar-toggler .first-angle,
.wpo-site-header .navbar-toggler .last-angle {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.wpo-site-header .x-close .middle-angle {
opacity: 0;
}
.wpo-site-header .x-close .first-angle {
position: absolute;
-webkit-transform: rotate(-44deg);
top: 16px;
left: 10px;
}
.wpo-site-header .x-close .last-angle {
-webkit-transform: rotate(44deg);
position: absolute;
top: 16px;
right: 10px;
}
}
@media (max-width: 767px) {
.wpo-site-header .navbar-header .navbar-brand {
font-size: 24px;
}
.wpo-site-header #navbar .navbar-nav {
margin: 0;
}
}
@media (max-width: 991px) {
.wpo-site-header .navbar-collapse.collapse {
display: none;
}
.wpo-site-header .navbar-collapse.collapse.in {
display: block;
}
.wpo-site-header .navbar-header .collapse,
.wpo-site-header .navbar-toggle {
display: block;
}
.wpo-site-header .navbar-header {
float: none;
position: relative;
z-index: 99;
text-align: center;
}
.wpo-site-header .navbar-right {
float: none;
}
.wpo-site-header .navbar-nav {
float: none;
}
.wpo-site-header .navbar-nav > li {
float: none;
}
}
.wpo-site-header .header-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
z-index: 991;
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.wpo-site-header .header-right button {
padding: 0;
border: 0;
outline: 0;
}
.wpo-site-header .header-right > div {
float: left;
position: relative;
margin-right: 8px;
}
.wpo-site-header .header-right .close-form .theme-btn,
.wpo-site-header .header-right .close-form .view-cart-btn {
padding: 10px 25px;
}
@media (max-width: 1400px) {
.wpo-site-header .header-right .close-form .theme-btn,
.wpo-site-header .header-right .close-form .view-cart-btn {
padding: 10px 15px;
font-size: 15px;
}
}
@media (max-width: 450px) {
.wpo-site-header .header-right > div {
margin-right: 10px;
}
.wpo-site-header .header-right {
right: -30px;
}
}
.wpo-site-header .header-right > div:last-child {
margin: 0 0 0 10px;
position: relative;
}
@media (max-width: 767px) {
.wpo-site-header .header-right > div:last-child {
margin: 3px 0 0 10px;
}
}
.wpo-site-header .header-right .header-search-form-wrapper {
position: relative;
}
.wpo-site-header .header-right .header-search-form-wrapper .fi:before {
font-size: 18px;
}
@media (max-width: 450px) {
.wpo-site-header .header-right .cart-toggle-btn {
display: none;
}
}
.wpo-site-header .header-right .search-toggle-btn,
.wpo-site-header .header-right .cart-toggle-btn {
color: #202020;
background: none;
}
.wpo-site-header .header-right .search-toggle-btn .fi:before,
.wpo-site-header .header-right .cart-toggle-btn .fi:before {
font-size: 25px;
}
.wpo-site-header .header-right .search-toggle-btn .ti-close,
.wpo-site-header .header-right .cart-toggle-btn .ti-close {
display: block;
line-height: 20px;
position: relative;
top: -2px;
}
.wpo-site-header .header-right .search-toggle-btn .fi:before {
font-size: 20px;
}
/*** cart-search-contact ***/
.cart-search-contact button {
background: transparent;
padding: 0;
border: 0;
outline: 0;
}
.cart-search-contact .fi {
font-size: 30px;
font-size: 2rem;
color: #202020;
}
.cart-search-contact > div {
float: left;
position: relative;
}
.cart-search-contact > div + div {
margin-left: 12px;
}
.cart-search-contact .header-search-form {
position: absolute;
width: 350px;
right: 0;
top: 75px;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
visibility: hidden;
background: #fff;
padding: 30px;
border-radius: 6px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-box-shadow: -2px 18px 40px -9px #999999;
box-shadow: -2px 18px 40px -9px #999999;
}
@media (max-width: 991px) {
.cart-search-contact .header-search-form {
top: 65px;
}
}
@media (max-width: 767px) {
.cart-search-contact .header-search-form {
right: 15px;
}
}
@media (max-width: 575px) {
.cart-search-contact .header-search-form {
width: 260px;
padding: 15px;
}
}
.cart-search-contact .header-search-form-wrapper .fi:before {
font-size: 18px;
font-size: 1.2rem;
}
.cart-search-contact form div {
position: relative;
}
.cart-search-contact form div button {
position: absolute;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.cart-search-contact form div button .fi:before {
font-size: 18px !important;
}
.cart-search-contact input {
width: 100%;
height: 50px;
padding: 6px 20px;
border: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid #ebebeb;
}
.cart-search-contact input:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color: #0e8af7;
}
.wpo-site-header .header-right .header-search-content-toggle {
opacity: 1;
visibility: visible;
right: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
.mini-cart .cart-count {
background: #0e8af7;
width: 19px;
height: 19px;
font-size: 10px;
font-size: 0.53333rem;
line-height: 17px;
color: white;
position: absolute;
top: -2px;
right: -5px;
border-radius: 50%;
font-weight: 600;
}
.mini-cart-content {
background: #fff;
width: 320px;
height: 100%;
z-index: 100;
position: fixed;
right: -320px;
top: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-box-shadow: -2px 18px 40px -9px #999999;
box-shadow: -2px 18px 40px -9px #999999;
}
@media (max-width: 575px) {
.mini-cart-content {
width: 290px;
}
}
.mini-cart-content .mini-cart-close {
display: block;
width: 40px;
height: 40px;
background-color: #333333;
color: white;
font-size: 0px;
text-align: center;
overflow: hidden;
position: relative;
float: right;
line-height: 54px;
border-radius: 3px;
right: 10px;
top: 20px;
}
.mini-cart-content .mini-cart-close i {
font-size: 15px;
}
.mini-cart-content p {
font-size: 15px;
font-size: 1rem;
font-weight: 500;
color: #202020;
margin: 0;
text-transform: uppercase;
}
.mini-cart-content .mini-cart-items {
padding: 100px 20px 25px;
}
.mini-cart-content .mini-cart-item {
padding-top: 15px;
margin-top: 15px;
border-top: 1px solid #efefef;
}
.mini-cart-content .mini-cart-item:first-child {
padding-top: 0;
margin-top: 0;
border-top: 0;
}
.mini-cart-content .mini-cart-item-image {
width: 50px;
height: 50px;
border: 2px solid #f3f3f3;
float: left;
margin-right: 15px;
}
.mini-cart-content .mini-cart-item-image a,
.mini-cart-content .mini-cart-item-image img {
display: block;
width: 46px;
height: 46px;
}
.mini-cart-content .mini-cart-item-des {
position: relative;
overflow: hidden;
}
.mini-cart-content .mini-cart-item-des a {
font-size: 14px;
font-size: 0.93333rem;
font-weight: 600;
text-align: left;
color: #202020;
}
.mini-cart-content .mini-cart-item-des a:hover {
color: #0e8af7;
}
.mini-cart-content .mini-cart-item-des .mini-cart-item-price {
font-size: 13px;
font-size: 0.86667rem;
color: #888;
display: block;
margin-top: 3px;
}
.mini-cart-content .mini-cart-item-des .mini-cart-item-quantity {
font-size: 12px;
font-size: 0.8rem;
color: #444;
display: block;
position: absolute;
right: 0;
top: 6px;
}
.mini-cart-content .visible-icon {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
opacity: 0.02;
z-index: -1;
}
.mini-cart-content .mini-cart-action {
padding: 20px 0 30px;
text-align: center;
position: absolute;
left: 50%;
bottom: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.mini-cart-content .mini-cart-action .theme-btn-s2 {
float: right;
}
.mini-cart-content .mini-cart-action .mini-btn {
width: 240px;
}
.mini-cart-content .mini-cart-action .mini-checkout-price {
font-size: 16px;
font-size: 1.06667rem;
font-weight: 600;
color: #202020;
display: block;
margin-bottom: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mini-cart-content .mini-cart-action .mini-checkout-price span {
color: #dfca08;
font-size: 20px;
}
.mini-cart-content-toggle,
.mini-wislist-content-toggle {
opacity: 1;
visibility: visible;
right: 0;
}
@media (max-width: 991px) {
.page-wrapper {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.body-overlay:before {
content: "";
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
position: absolute;
left: 0;
top: 0;
z-index: 10;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
}
.header-search-area {
background: #fff;
width: 100%;
padding: 100px 0;
text-align: center;
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
.header-search-area h3 {
font-size: 45px;
margin: 0 0 1em;
}
.header-search-area form {
position: relative;
}
.header-search-area input {
height: 50px;
font-size: 18px;
font-size: 1.2rem;
border-radius: 0;
border: 0;
border-bottom: 1px solid #d0d0d0;
-webkit-box-shadow: none;
box-shadow: none;
}
.header-search-area input:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color: #0e8af7;
}
.header-search-area form button {
background: transparent;
border: 0;
font-size: 20px;
font-size: 1.33333rem;
position: absolute;
right: 0;
bottom: 10px;
}
.header-search-area form button:focus {
border: none;
outline: none;
}
.header-search-area .close-form {
position: absolute;
right: 35px;
top: 35px;
bottom: auto;
padding-bottom: 5px;
border-bottom: 1px solid;
}
.header-search-area .close-form button {
background: transparent;
border: 0;
outline: 0;
font-size: 13px;
font-size: 0.86667rem;
text-transform: uppercase;
color: #000;
letter-spacing: 2px;
z-index: 99;
}
.header-search-area .close-form button:focus {
border: 0;
outline: 0;
}
.wpo-site-header {
/* navigation open and close btn hide for width screen */
/* style for navigation less than 992px */
/*navbar collaps less then 992px*/
}
.wpo-site-header .navigation {
background-color: #fff;
margin-bottom: 0;
padding: 0;
border: 0;
border-radius: 0;
}
.wpo-site-header .navigation > .container {
position: relative;
}
@media (max-width: 991px) {
.wpo-site-header .navigation {
padding: 5px 0;
}
}
.wpo-site-header #navbar {
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.wpo-site-header #navbar > ul li a:hover,
.wpo-site-header #navbar > ul li a:focus {
text-decoration: none;
color: #46bc69;
}
@media screen and (min-width: 992px) {
.wpo-site-header #navbar {
/*** hover effect ***/
}
.wpo-site-header #navbar li {
position: relative;
}
.wpo-site-header #navbar > ul > li > a {
font-size: 16px;
padding: 35px 20px;
display: block;
color: #202020;
font-weight: 500;
position: relative;
font-family: "Inter", sans-serif;
text-transform: capitalize;
}
}
@media screen and (min-width: 992px) and (max-width: 1870px) {
.wpo-site-header #navbar > ul > li > a {
padding: 35px 18px;
}
}
@media screen and (min-width: 992px) {
.wpo-site-header #navbar > ul .sub-menu {
background-color: #fff;
-webkit-box-shadow: 0px 2px 20px 0px rgba(62, 65, 159, 0.09);
box-shadow: 0px 2px 20px 0px rgba(62, 65, 159, 0.09);
width: 240px;
position: absolute;
padding: 20px;
left: 0;
top: 110%;
z-index: 10;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.wpo-site-header #navbar > ul > li .sub-menu a {
font-size: 16px;
font-size: 1.06667rem;
display: inline-block;
padding: 5px 0px;
color: #202020;
position: relative;
overflow: hidden;
font-weight: 500;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.wpo-site-header #navbar > ul > li .sub-menu a:after {
position: absolute;
left: 0px;
bottom: 5px;
width: 0px;
height: 1px;
content: "";
background: #0e8af7;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
visibility: hidden;
}
.wpo-site-header #navbar > ul > li .sub-menu a.active {
color: #002642;
font-weight: 700;
}
.wpo-site-header #navbar > ul > li .sub-menu a:hover:after {
width: 100%;
opacity: 1;
visibility: visible;
}
.wpo-site-header #navbar > ul > li > .sub-menu .sub-menu {
left: 120%;
top: 0;
}
.wpo-site-header #navbar > ul > li > .sub-menu > .menu-item-has-children {
position: relative;
}
.wpo-site-header
#navbar
> ul
> li
> .sub-menu
> .menu-item-has-children:before {
font-family: "themify";
content: "\e649";
font-size: 11px;
font-size: 0.73333rem;
position: absolute;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.wpo-site-header #navbar > ul > li:hover > .sub-menu {
top: 100%;
visibility: visible;
opacity: 1;
}
.wpo-site-header #navbar .sub-menu > li:hover > .sub-menu {
left: 110%;
visibility: visible;
opacity: 1;
}
}
@media (max-width: 991px) {
.wpo-site-header #navbar > ul > li a {
display: block;
font-size: 15px;
font-size: 1rem;
color: #fff;
font-weight: 600;
}
.wpo-site-header #navbar > ul > li a:hover,
.wpo-site-header #navbar > ul > li a.active {
color: #fff;
}
.wpo-site-header #navbar > ul .sub-menu > li:last-child {
border-bottom: 0;
}
.wpo-site-header #navbar > ul > li > .sub-menu a {
padding: 8px 15px 8px 45px;
}
.wpo-site-header #navbar > ul > li > .sub-menu .sub-menu a {
padding: 8px 15px 8px 65px;
}
.wpo-site-header #navbar > ul .menu-item-has-children {
position: relative;
}
.wpo-site-header #navbar > ul .menu-item-has-children > a {
position: relative;
color: #ddd;
}
.wpo-site-header #navbar > ul .menu-item-has-children > a:hover,
.wpo-site-header #navbar > ul .menu-item-has-children > a.active {
color: #fff;
}
.wpo-site-header #navbar > ul .menu-item-has-children > a:before {
font-family: "themify";
content: "\e649";
font-size: 11px;
font-size: 0.73333rem;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.wpo-site-header #navbar > ul .menu-item-has-children > a.rotate:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
top: 29%;
}
.wpo-site-header #navbar > ul .menu-item-has-children > a.rotate {
color: #fff;
}
}
@media screen and (min-width: 992px) {
.wpo-site-header .navbar-header .open-btn {
display: none;
}
.wpo-site-header #navbar .close-navbar {
display: none;
}
}
.wpo-site-header .menu-close {
display: none;
}
@media (max-width: 991px) {
.wpo-site-header {
/* class for show hide navigation */
}
.wpo-site-header .container {
width: 100%;
}
.wpo-site-header .mobail-menu button {
background-color: #0e8af7;
width: 40px;
height: 35px;
border: 0;
padding: 5px 10px;
outline: 0;
position: relative;
z-index: 20;
}
.wpo-site-header .mobail-menu button:focus {
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.wpo-site-header .mobail-menu button span {
background-color: #fff;
width: 20px;
display: block;
height: 2px;
margin-bottom: 5px;
}
.wpo-site-header .mobail-menu button span:last-child {
margin: 0;
}
.wpo-site-header #navbar {
background: #1e1e1e;
display: block !important;
width: 300px;
height: 100%;
margin: 0;
padding: 0;
border: 0;
position: fixed;
left: -320px;
top: 0px;
z-index: 999999;
opacity: 0;
visibility: hidden;
}
.wpo-site-header #navbar .navbar-nav {
display: block;
}
.wpo-site-header #navbar > ul {
position: relative;
z-index: 101;
}
.wpo-site-header #navbar ul a {
color: #000;
}
.wpo-site-header #navbar ul a:hover,
.wpo-site-header #navbar ul li.current a {
color: #0e8af7;
}
.wpo-site-header #navbar .navbar-nav {
height: 100%;
overflow: auto;
padding-bottom: 60px;
}
.wpo-site-header #navbar .close-navbar {
background-color: #fff;
width: 40px;
height: 40px;
color: #000;
border: 0;
outline: none;
position: absolute;
left: -41px;
top: 90px;
z-index: 20;
}
.wpo-site-header #navbar .close-navbar .ti-close {
position: relative;
top: 1px;
}
.wpo-site-header .menu-close {
display: block;
z-index: 99;
background: none;
text-align: center;
color: #fff;
border: 0;
text-align: center;
margin-left: auto;
margin-top: 30px;
margin-right: 30px;
margin-bottom: 30px;
width: 40px;
height: 40px;
line-height: 40px;
border: 1px solid #fff;
}
.wpo-site-header .slideInn {
left: 0 !important;
opacity: 1 !important;
visibility: visible !important;
}
.wpo-site-header .navbar-toggler .first-angle,
.wpo-site-header .navbar-toggler .last-angle {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.wpo-site-header .x-close .middle-angle {
opacity: 0;
}
.wpo-site-header .x-close .first-angle {
position: absolute;
-webkit-transform: rotate(-44deg);
top: 16px;
left: 10px;
}
.wpo-site-header .x-close .last-angle {
-webkit-transform: rotate(44deg);
position: absolute;
top: 16px;
right: 10px;
}
}
@media (max-width: 767px) {
.wpo-site-header .navbar-header .navbar-brand {
font-size: 24px;
}
.wpo-site-header #navbar .navbar-nav {
margin: 0;
}
}
.wpo-site-header .navbar-header .navbar-brand img {
max-width: 170px;
}
@media (max-width: 991px) {
.wpo-site-header .navbar-collapse.collapse {
display: none;
}
.wpo-site-header .navbar-collapse.collapse.in {
display: block;
}
.wpo-site-header .navbar-header .collapse,
.wpo-site-header .navbar-toggle {
display: block;
}
.wpo-site-header .navbar-header {
float: none;
}
.wpo-site-header .navbar-right {
float: none;
}
.wpo-site-header .navbar-nav {
float: none;
}
.wpo-site-header .navbar-nav > li {
float: none;
}
}
@media (max-width: 440px) {
.wpo-site-header .navbar-header .navbar-brand img {
max-width: 170px;
}
}
@media (max-width: 370px) {
.wpo-site-header .navbar-header .navbar-brand img {
max-width: 140px;
}
}
@media (max-width: 1700px) {
.wpo-site-header {
padding: 0 30px;
}
}
@media (max-width: 1500px) {
.wpo-site-header #navbar > ul > li > a {
padding: 30px 15px;
}
.wpo-site-header {
padding: 0 10px;
}
}
@media (max-width: 1400px) {
.wpo-site-header #navbar > ul > li > a {
padding: 30px 10px;
}
}
@media (max-width: 1200px) {
.wpo-site-header #navbar > ul > li > a {
padding: 30px 6px;
font-size: 16px;
}
}
@media (max-width: 991px) {
.wpo-site-header #navbar > ul > li > a {
font-size: 15px;
padding: 15px 30px;
}
}
@media (max-width: 767px) {
.header-right .theme-btn,
.header-right .view-cart-btn {
padding: 20px 12px;
}
.wpo-site-header .header-right .close-form {
display: none;
}
}
.wpo-header-style-1 .wpo-site-header {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 99;
background: transparent;
padding: 0;
}
.wpo-header-style-1 .wpo-site-header .navigation {
background: transparent;
}
.wpo-header-style-1 .wpo-site-header #navbar > ul > li > a {
color: #202020;
cursor: pointer;
}
.wpo-header-style-1 .wpo-site-header .header-right .search-toggle-btn .fi {
color: #202020;
}
.wpo-header-style-1 .wpo-site-header .header-right .theme-btn,
.wpo-header-style-1 .wpo-site-header .header-right .view-cart-btn {
padding: 15px 20px;
padding-right: 50px;
border-radius: 40px;
}
.wpo-header-style-1 .wpo-site-header .header-right .theme-btn:before,
.wpo-header-style-1 .wpo-site-header .header-right .view-cart-btn:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
top: 36%;
right: 20px;
}
.wpo-header-style-1 .wpo-site-header .header-right .theme-btn:after,
.wpo-header-style-1 .wpo-site-header .header-right .view-cart-btn:after {
border-radius: 40px;
}
@media (max-width: 1400px) {
.wpo-header-style-1 .wpo-site-header .header-right .theme-btn,
.wpo-header-style-1 .wpo-site-header .header-right .view-cart-btn {
padding: 10px 40px 10px 20px;
margin-right: -15px;
}
}
@media (max-width: 767px) {
.wpo-header-style-1 .wpo-site-header .header-right .theme-btn,
.wpo-header-style-1 .wpo-site-header .header-right .view-cart-btn {
padding: 10px 30px 10px 15px;
}
.wpo-header-style-1 .wpo-site-header .header-right .theme-btn:before,
.wpo-header-style-1 .wpo-site-header .header-right .view-cart-btn:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
top: 33%;
right: 14px;
font-size: 12px;
}
}
@media (max-width: 450px) {
.wpo-header-style-1 .wpo-site-header .header-right .theme-btn,
.wpo-header-style-1 .wpo-site-header .header-right .view-cart-btn {
margin-right: 0;
}
}
@media (max-width: 375px) {
.wpo-header-style-1 .wpo-site-header .header-right .theme-btn,
.wpo-header-style-1 .wpo-site-header .header-right .view-cart-btn {
padding: 10px 30px 10px 15px;
}
.wpo-header-style-1 .wpo-site-header .header-right .theme-btn:before,
.wpo-header-style-1 .wpo-site-header .header-right .view-cart-btn:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
top: 33%;
right: 14px;
font-size: 12px;
}
}
.wpo-header-style-1 .wpo-site-header .header-right .theme-btn .hide-img,
.wpo-header-style-1 .wpo-site-header .header-right .view-cart-btn .hide-img {
display: none;
}
.wpo-header-style-1 .wpo-site-header .sticky-header.sticky-on {
background: #fff;
}
.wpo-header-style-2 .wpo-site-header .sticky-header.sticky-on {
background: #131313;
}
.wpo-header-style-2 .navbar-brand.site-logo {
color: #fff;
}
.wpo-header-style-2 .wpo-site-header #navbar > ul > li > a {
color: #fff;
}
.wpo-header-style-3 .wpo-site-header .header-right .theme-btn .hide-img,
.wpo-header-style-3 .wpo-site-header .header-right .view-cart-btn .hide-img {
display: none;
}
/*--------------------------------------------------------------
3. content
--------------------------------------------------------------*/
/*3.1 wpo-hero-slider*/
.wpo-hero-slider,
.wpo-hero-style-3,
.static-hero {
width: 100%;
height: 1000px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
z-index: 0;
background: #fff;
}
@media (max-width: 991px) {
.wpo-hero-slider,
.wpo-hero-style-3,
.static-hero {
height: 600px;
}
}
@media (max-width: 767px) {
.wpo-hero-slider,
.wpo-hero-style-3,
.static-hero {
height: 500px;
}
}
.wpo-hero-slider .swiper-slide,
.wpo-hero-style-3 .swiper-slide,
.static-hero .swiper-slide {
overflow: hidden;
}
.wpo-hero-slider .swiper-container,
.wpo-hero-slider .hero-container,
.wpo-hero-style-3 .swiper-container,
.wpo-hero-style-3 .hero-container,
.static-hero .swiper-container,
.static-hero .hero-container {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.wpo-hero-slider .slide-inner,
.wpo-hero-slider .hero-inner,
.wpo-hero-style-3 .slide-inner,
.wpo-hero-style-3 .hero-inner,
.static-hero .slide-inner,
.static-hero .hero-inner {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background-size: cover;
background-position: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: left;
}
.wpo-hero-slider .slide-inner:before,
.wpo-hero-slider .hero-inner:before,
.wpo-hero-style-3 .slide-inner:before,
.wpo-hero-style-3 .hero-inner:before,
.static-hero .slide-inner:before,
.static-hero .hero-inner:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #313131;
content: "";
opacity: 0.4;
z-index: -1;
}
.wpo-hero-slider .slide-inner .slide-content,
.wpo-hero-slider .hero-inner .slide-content,
.wpo-hero-style-3 .slide-inner .slide-content,
.wpo-hero-style-3 .hero-inner .slide-content,
.static-hero .slide-inner .slide-content,
.static-hero .hero-inner .slide-content {
max-width: 550px;
}
@media (max-width: 1199px) {
.wpo-hero-slider .slide-inner .slide-content .slide-title,
.wpo-hero-slider .hero-inner .slide-content .slide-title,
.wpo-hero-style-3 .slide-inner .slide-content .slide-title,
.wpo-hero-style-3 .hero-inner .slide-content .slide-title,
.static-hero .slide-inner .slide-content .slide-title,
.static-hero .hero-inner .slide-content .slide-title {
padding-top: 90px;
}
}
@media (max-width: 991px) {
.wpo-hero-slider .slide-inner .slide-content .slide-title,
.wpo-hero-slider .hero-inner .slide-content .slide-title,
.wpo-hero-style-3 .slide-inner .slide-content .slide-title,
.wpo-hero-style-3 .hero-inner .slide-content .slide-title,
.static-hero .slide-inner .slide-content .slide-title,
.static-hero .hero-inner .slide-content .slide-title {
padding-top: 115px;
}
}
.wpo-hero-slider .slide-inner .slide-content .slide-title h2,
.wpo-hero-slider .hero-inner .slide-content .slide-title h2,
.wpo-hero-style-3 .slide-inner .slide-content .slide-title h2,
.wpo-hero-style-3 .hero-inner .slide-content .slide-title h2,
.static-hero .slide-inner .slide-content .slide-title h2,
.static-hero .hero-inner .slide-content .slide-title h2 {
color: #fff;
font-size: 90px;
text-transform: capitalize;
font-weight: 700;
line-height: 105%;
margin-bottom: 10px;
}
@media (max-width: 1199px) {
.wpo-hero-slider .slide-inner .slide-content .slide-title h2,
.wpo-hero-slider .hero-inner .slide-content .slide-title h2,
.wpo-hero-style-3 .slide-inner .slide-content .slide-title h2,
.wpo-hero-style-3 .hero-inner .slide-content .slide-title h2,
.static-hero .slide-inner .slide-content .slide-title h2,
.static-hero .hero-inner .slide-content .slide-title h2 {
font-size: 65px;
margin-bottom: 10px;
line-height: 75px;
}
}
@media (max-width: 991px) {
.wpo-hero-slider .slide-inner .slide-content .slide-title h2,
.wpo-hero-slider .hero-inner .slide-content .slide-title h2,
.wpo-hero-style-3 .slide-inner .slide-content .slide-title h2,
.wpo-hero-style-3 .hero-inner .slide-content .slide-title h2,
.static-hero .slide-inner .slide-content .slide-title h2,
.static-hero .hero-inner .slide-content .slide-title h2 {
font-size: 45px;
margin-bottom: 10px;
line-height: 45px;
}
}
@media (max-width: 530px) {
.wpo-hero-slider .slide-inner .slide-content .slide-title h2,
.wpo-hero-slider .hero-inner .slide-content .slide-title h2,
.wpo-hero-style-3 .slide-inner .slide-content .slide-title h2,
.wpo-hero-style-3 .hero-inner .slide-content .slide-title h2,
.static-hero .slide-inner .slide-content .slide-title h2,
.static-hero .hero-inner .slide-content .slide-title h2 {
font-size: 35px;
line-height: 35px;
margin-bottom: 0;
}
}
.wpo-hero-slider .slide-inner .slide-content .slide-title h2 span,
.wpo-hero-slider .hero-inner .slide-content .slide-title h2 span,
.wpo-hero-style-3 .slide-inner .slide-content .slide-title h2 span,
.wpo-hero-style-3 .hero-inner .slide-content .slide-title h2 span,
.static-hero .slide-inner .slide-content .slide-title h2 span,
.static-hero .hero-inner .slide-content .slide-title h2 span {
display: block;
font-size: 60px;
color: #dfca08;
}
@media (max-width: 1199px) {
.wpo-hero-slider .slide-inner .slide-content .slide-title h2 span,
.wpo-hero-slider .hero-inner .slide-content .slide-title h2 span,
.wpo-hero-style-3 .slide-inner .slide-content .slide-title h2 span,
.wpo-hero-style-3 .hero-inner .slide-content .slide-title h2 span,
.static-hero .slide-inner .slide-content .slide-title h2 span,
.static-hero .hero-inner .slide-content .slide-title h2 span {
font-size: 45px;
}
}
@media (max-width: 991px) {
.wpo-hero-slider .slide-inner .slide-content .slide-title h2 span,
.wpo-hero-slider .hero-inner .slide-content .slide-title h2 span,
.wpo-hero-style-3 .slide-inner .slide-content .slide-title h2 span,
.wpo-hero-style-3 .hero-inner .slide-content .slide-title h2 span,
.static-hero .slide-inner .slide-content .slide-title h2 span,
.static-hero .hero-inner .slide-content .slide-title h2 span {
font-size: 35px;
}
}
@media (max-width: 530px) {
.wpo-hero-slider .slide-inner .slide-content .slide-title h2 span,
.wpo-hero-slider .hero-inner .slide-content .slide-title h2 span,
.wpo-hero-style-3 .slide-inner .slide-content .slide-title h2 span,
.wpo-hero-style-3 .hero-inner .slide-content .slide-title h2 span,
.static-hero .slide-inner .slide-content .slide-title h2 span,
.static-hero .hero-inner .slide-content .slide-title h2 span {
font-size: 25px;
}
}
.wpo-hero-slider .slide-inner .slide-content .slide-sub-title h5,
.wpo-hero-slider .hero-inner .slide-content .slide-sub-title h5,
.wpo-hero-style-3 .slide-inner .slide-content .slide-sub-title h5,
.wpo-hero-style-3 .hero-inner .slide-content .slide-sub-title h5,
.static-hero .slide-inner .slide-content .slide-sub-title h5,
.static-hero .hero-inner .slide-content .slide-sub-title h5 {
font-weight: 600;
font-size: 32px;
line-height: 39px;
color: #0e8af7;
margin-bottom: 20px;
}
@media (max-width: 1199px) {
.wpo-hero-slider .slide-inner .slide-content .slide-sub-title h5,
.wpo-hero-slider .hero-inner .slide-content .slide-sub-title h5,
.wpo-hero-style-3 .slide-inner .slide-content .slide-sub-title h5,
.wpo-hero-style-3 .hero-inner .slide-content .slide-sub-title h5,
.static-hero .slide-inner .slide-content .slide-sub-title h5,
.static-hero .hero-inner .slide-content .slide-sub-title h5 {
font-size: 28px;
}
}
@media (max-width: 991px) {
.wpo-hero-slider .slide-inner .slide-content .slide-sub-title h5,
.wpo-hero-slider .hero-inner .slide-content .slide-sub-title h5,
.wpo-hero-style-3 .slide-inner .slide-content .slide-sub-title h5,
.wpo-hero-style-3 .hero-inner .slide-content .slide-sub-title h5,
.static-hero .slide-inner .slide-content .slide-sub-title h5,
.static-hero .hero-inner .slide-content .slide-sub-title h5 {
font-size: 22px;
margin-bottom: 10px;
}
}
@media (max-width: 530px) {
.wpo-hero-slider .slide-inner .slide-content .slide-sub-title h5,
.wpo-hero-slider .hero-inner .slide-content .slide-sub-title h5,
.wpo-hero-style-3 .slide-inner .slide-content .slide-sub-title h5,
.wpo-hero-style-3 .hero-inner .slide-content .slide-sub-title h5,
.static-hero .slide-inner .slide-content .slide-sub-title h5,
.static-hero .hero-inner .slide-content .slide-sub-title h5 {
font-size: 20px;
margin-bottom: 5px;
}
}
.wpo-hero-slider .slide-inner .slide-content .slide-text p,
.wpo-hero-slider .hero-inner .slide-content .slide-text p,
.wpo-hero-style-3 .slide-inner .slide-content .slide-text p,
.wpo-hero-style-3 .hero-inner .slide-content .slide-text p,
.static-hero .slide-inner .slide-content .slide-text p,
.static-hero .hero-inner .slide-content .slide-text p {
color: #fff;
margin: 0;
font-size: 19px;
line-height: 33px;
margin-bottom: 30px;
}
@media (max-width: 530px) {
.wpo-hero-slider .slide-inner .slide-content .slide-text p,
.wpo-hero-slider .hero-inner .slide-content .slide-text p,
.wpo-hero-style-3 .slide-inner .slide-content .slide-text p,
.wpo-hero-style-3 .hero-inner .slide-content .slide-text p,
.static-hero .slide-inner .slide-content .slide-text p,
.static-hero .hero-inner .slide-content .slide-text p {
font-size: 15px;
line-height: 28px;
}
}
.wpo-hero-slider .swiper-button-prev,
.wpo-hero-slider .swiper-button-next,
.wpo-hero-style-3 .swiper-button-prev,
.wpo-hero-style-3 .swiper-button-next,
.static-hero .swiper-button-prev,
.static-hero .swiper-button-next {
background: rgba(255, 255, 255, 0.2);
width: 60px;
height: 60px;
line-height: 60px;
border: 2px solid #fff;
border-radius: 50%;
opacity: 0.7;
text-align: center;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.wpo-hero-slider .swiper-button-prev:hover,
.wpo-hero-slider .swiper-button-next:hover,
.wpo-hero-style-3 .swiper-button-prev:hover,
.wpo-hero-style-3 .swiper-button-next:hover,
.static-hero .swiper-button-prev:hover,
.static-hero .swiper-button-next:hover {
opacity: 0.9;
}
@media (max-width: 767px) {
.wpo-hero-slider .swiper-button-prev,
.wpo-hero-slider .swiper-button-next,
.wpo-hero-style-3 .swiper-button-prev,
.wpo-hero-style-3 .swiper-button-next,
.static-hero .swiper-button-prev,
.static-hero .swiper-button-next {
display: none;
}
}
.wpo-hero-slider .swiper-button-prev,
.wpo-hero-style-3 .swiper-button-prev,
.static-hero .swiper-button-prev {
left: 25px;
}
.wpo-hero-slider .swiper-button-prev:before,
.wpo-hero-style-3 .swiper-button-prev:before,
.static-hero .swiper-button-prev:before {
font-family: "themify";
content: "\e629";
font-size: 20px;
color: #fff;
}
.wpo-hero-slider .swiper-button-next,
.wpo-hero-style-3 .swiper-button-next,
.static-hero .swiper-button-next {
right: 25px;
}
.wpo-hero-slider .swiper-button-next:before,
.wpo-hero-style-3 .swiper-button-next:before,
.static-hero .swiper-button-next:before {
font-family: "themify";
content: "\e628";
font-size: 20px;
color: #fff;
}
@media (max-width: 991px) {
.wpo-hero-slider .swiper-button-prev,
.wpo-hero-slider .swiper-button-next,
.wpo-hero-style-3 .swiper-button-prev,
.wpo-hero-style-3 .swiper-button-next,
.static-hero .swiper-button-prev,
.static-hero .swiper-button-next {
display: none;
}
}
.wpo-hero-slider .swiper-pagination-bullet,
.wpo-hero-style-3 .swiper-pagination-bullet,
.static-hero .swiper-pagination-bullet {
width: 12px;
height: 12px;
text-align: center;
line-height: 12px;
font-size: 12px;
color: #000;
opacity: 1;
background: rgba(255, 255, 255, 0.2);
}
@media screen and (min-width: 992px) {
.wpo-hero-slider .swiper-pagination-bullet,
.wpo-hero-style-3 .swiper-pagination-bullet,
.static-hero .swiper-pagination-bullet {
display: none;
}
}
.wpo-hero-slider .swiper-pagination-bullet-active,
.wpo-hero-style-3 .swiper-pagination-bullet-active,
.static-hero .swiper-pagination-bullet-active {
color: #fff;
background: #fff;
width: 12px;
height: 12px;
text-align: center;
line-height: 12px;
}
.wpo-hero-slider .swiper-container-horizontal > .swiper-pagination-bullets,
.wpo-hero-slider .swiper-pagination-custom,
.wpo-hero-slider .swiper-pagination-fraction,
.wpo-hero-style-3 .swiper-container-horizontal > .swiper-pagination-bullets,
.wpo-hero-style-3 .swiper-pagination-custom,
.wpo-hero-style-3 .swiper-pagination-fraction,
.static-hero .swiper-container-horizontal > .swiper-pagination-bullets,
.static-hero .swiper-pagination-custom,
.static-hero .swiper-pagination-fraction {
bottom: 30px;
}
.wpo-hero-slider
.swiper-container-horizontal
> .swiper-pagination-bullets
.swiper-pagination-bullet,
.wpo-hero-style-3
.swiper-container-horizontal
> .swiper-pagination-bullets
.swiper-pagination-bullet,
.static-hero
.swiper-container-horizontal
> .swiper-pagination-bullets
.swiper-pagination-bullet {
margin: 0 8px;
}
/*-------------------------------------------
hero style 1
--------------------------------------------*/
.static-hero {
background: #fff;
height: 940px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
z-index: 1;
overflow: hidden;
}
@media (max-width: 1400px) {
.static-hero {
height: 900px;
}
}
@media (max-width: 1199px) {
.static-hero {
height: 650px;
}
}
@media (max-width: 991px) {
.static-hero {
height: 950px;
}
}
@media (max-width: 767px) {
.static-hero {
height: 850px;
}
}
@media (max-width: 500px) {
.static-hero {
height: 800px;
}
}
.static-hero .shape-1 {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.static-hero .shape-1 svg circle {
fill: #ff4155;
}
.static-hero .shape-2 {
position: absolute;
left: 60%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: -1;
}
.static-hero .shape-2 svg circle {
fill: #ffe600;
}
.static-hero .shape-3 {
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.static-hero .shape-3 svg circle {
fill: #48c5ea;
}
.static-hero .line-shape-1 {
position: absolute;
left: 0;
bottom: 0;
}
.static-hero .line-shape-2 {
position: absolute;
top: 0;
right: 0;
}
.static-hero .wpo-static-hero-inner {
padding-bottom: 85px;
}
@media (max-width: 991px) {
.static-hero .wpo-static-hero-inner {
padding-bottom: 0;
text-align: center;
}
}
@media (max-width: 991px) {
.static-hero .hero-inner {
display: block;
}
}
.static-hero .slide-title {
padding-top: 130px;
}
@media (max-width: 1199px) {
.static-hero .slide-title {
padding-top: 90px;
}
}
@media (max-width: 991px) {
.static-hero .slide-title {
padding-top: 115px;
}
}
.static-hero .slide-title h2 {
color: #202020;
font-size: 90px;
text-transform: capitalize;
font-weight: 700;
line-height: 118%;
margin-bottom: 10px;
}
@media (max-width: 1199px) {
.static-hero .slide-title h2 {
font-size: 65px;
margin-bottom: 10px;
line-height: 75px;
}
}
@media (max-width: 991px) {
.static-hero .slide-title h2 {
font-size: 45px;
margin-bottom: 10px;
line-height: 45px;
}
}
@media (max-width: 530px) {
.static-hero .slide-title h2 {
font-size: 35px;
line-height: 35px;
margin-bottom: 0;
}
}
.static-hero .slide-title h2 span {
display: block;
font-size: 60px;
color: #363636;
}
@media (max-width: 1199px) {
.static-hero .slide-title h2 span {
font-size: 45px;
}
}
@media (max-width: 991px) {
.static-hero .slide-title h2 span {
font-size: 35px;
}
}
@media (max-width: 530px) {
.static-hero .slide-title h2 span {
font-size: 25px;
}
}
.static-hero .slide-sub-title h5 {
font-weight: 600;
font-size: 32px;
line-height: 39px;
color: #0e8af7;
margin-bottom: 20px;
}
@media (max-width: 1199px) {
.static-hero .slide-sub-title h5 {
font-size: 28px;
}
}
@media (max-width: 991px) {
.static-hero .slide-sub-title h5 {
font-size: 22px;
margin-bottom: 10px;
}
}
@media (max-width: 530px) {
.static-hero .slide-sub-title h5 {
font-size: 20px;
margin-bottom: 5px;
}
}
.static-hero .hero-inner .container {
position: relative;
}
.static-hero .hero-inner::before {
display: none;
}
.static-hero .slide-text p {
color: #585858;
margin: 0;
font-size: 19px;
line-height: 33px;
margin-bottom: 30px;
}
@media (max-width: 530px) {
.static-hero .slide-text p {
font-size: 15px;
line-height: 28px;
}
}
.static-hero .static-hero-right {
position: absolute;
top: 53%;
right: 200px;
z-index: 1;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.static-hero .static-hero-right img {
border-radius: 50%;
}
@media (max-width: 1600px) {
.static-hero .static-hero-right {
right: 100px;
}
}
@media (max-width: 1400px) {
.static-hero .static-hero-right {
max-width: 500px;
}
}
@media (max-width: 1199px) {
.static-hero .static-hero-right {
max-width: 450px;
top: 54%;
right: 50px;
}
}
@media (max-width: 991px) {
.static-hero .static-hero-right {
max-width: 450px;
top: 50%;
margin: 0 auto;
right: auto;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
@media (max-width: 767px) {
.static-hero .static-hero-right {
top: 50%;
width: 400px;
height: 400px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
margin: 0;
}
}
@media (max-width: 575px) {
.static-hero .static-hero-right {
top: 56%;
width: 300px;
height: 300px;
}
}
.static-hero .static-hero-right .icon-1,
.static-hero .static-hero-right .icon-2,
.static-hero .static-hero-right .icon-3 {
position: absolute;
left: 0;
top: 20%;
width: 110px;
height: 110px;
padding: 20px;
background: #fff;
border-radius: 25px;
-webkit-animation: bounceTop 3s linear infinite;
animation: bounceTop 3s linear infinite;
-webkit-box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
}
.static-hero .static-hero-right .icon-1 img,
.static-hero .static-hero-right .icon-2 img,
.static-hero .static-hero-right .icon-3 img {
border-radius: 0;
}
@media (max-width: 991px) {
.static-hero .static-hero-right .icon-1,
.static-hero .static-hero-right .icon-2,
.static-hero .static-hero-right .icon-3 {
top: 15%;
width: 95px;
height: 95px;
padding: 15px;
border-radius: 15px;
}
}
@media (max-width: 575px) {
.static-hero .static-hero-right .icon-1,
.static-hero .static-hero-right .icon-2,
.static-hero .static-hero-right .icon-3 {
top: 10%;
width: 70px;
height: 70px;
padding: 15px;
border-radius: 15px;
}
}
.static-hero .static-hero-right .icon-2 {
left: auto;
right: 0;
}
.static-hero .static-hero-right .icon-3 {
left: auto;
right: 10%;
top: auto;
bottom: 0;
}
@media (max-width: 991px) {
.static-hero .static-hero-right .icon-3 {
right: 0;
bottom: 40px;
}
}
@media (max-width: 575px) {
.static-hero .static-hero-right .icon-3 {
left: auto;
right: 0;
top: auto;
bottom: 25px;
}
}
.static-hero .static-hero-right .project {
position: absolute;
left: 0;
bottom: 5%;
padding: 10px 20px;
background: #fff;
border-radius: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-animation: bounceTop 3s linear infinite;
animation: bounceTop 3s linear infinite;
}
.static-hero .static-hero-right .project .icon .fi {
margin-right: 10px;
}
.static-hero .static-hero-right .project .icon .fi:before {
font-size: 50px;
color: #0e8af7;
}
@media (max-width: 575px) {
.static-hero .static-hero-right .project .icon .fi:before {
font-size: 40px;
}
}
.static-hero .static-hero-right .project .p-text h3 {
font-size: 25px;
margin-bottom: 0px;
color: #202020;
}
@media (max-width: 575px) {
.static-hero .static-hero-right .project .p-text h3 {
font-size: 20px;
}
}
.static-hero .static-hero-right .project .p-text p {
font-size: 15px;
margin-bottom: 0;
color: #585858;
}
.wpo-hero-slider.style-2 .slide-inner .slide-content .slide-title h2 {
color: #fff;
}
.wpo-hero-slider.style-2 .slide-inner .slide-content .slide-text p {
color: #fff;
}
/*--------------------------------------------------------------
0.3 hero slider
--------------------------------------------------------------*/
.wpo-hero-style-3 {
position: relative;
height: 950px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
@media (max-width: 991px) {
.wpo-hero-style-3 {
max-height: 600px;
}
}
@media (max-width: 767px) {
.wpo-hero-style-3 {
max-height: 520px;
}
}
.wpo-hero-style-3 .hero-inner {
height: 950px;
position: relative;
background-repeat: no-repeat;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
@media (max-width: 991px) {
.wpo-hero-style-3 .hero-inner {
max-height: 600px;
}
}
@media (max-width: 767px) {
.wpo-hero-style-3 .hero-inner {
max-height: 520px;
}
}
.wpo-hero-style-3 .hero-inner .slider-image {
width: 100%;
height: 950px;
position: absolute;
left: 0;
top: 0;
-webkit-animation: kenburn 25s 2s alternate infinite;
animation: kenburn 25s 2s alternate infinite;
}
.wpo-hero-style-3 .hero-inner .slider-image img {
height: 950px;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
@media (max-width: 991px) {
.wpo-hero-style-3 .hero-inner .slider-image img {
max-height: 600px;
}
}
@media (max-width: 767px) {
.wpo-hero-style-3 .hero-inner .slider-image img {
max-height: 520px;
}
}
.wpo-hero-style-3 .hero-inner .slide-content {
z-index: 99;
position: relative;
}
@media (max-width: 991px) {
.wpo-hero-style-3 .hero-inner .slide-content .slide-title {
padding-top: 0px;
}
}
.wpo-hero-style-3 .hero-inner .slide-content .slide-title h2 {
color: #fff;
}
.wpo-hero-style-3 .hero-inner .slide-content .slide-text p {
color: #fff;
}
@media (max-width: 991px) {
.wpo-hero-style-3 .hero-inner .slide-content {
padding-top: 50px;
}
}
.dark_svg {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
overflow: hidden;
z-index: 99;
}
.dark_svg svg {
fill: #f8f8f8;
width: 100%;
}
@-webkit-keyframes kenburn {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
to {
-webkit-transform: scale3d(1.3, 1.3, 1.3);
transform: scale3d(1.3, 1.3, 1.3);
}
}
@keyframes kenburn {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
to {
-webkit-transform: scale3d(1.3, 1.3, 1.3);
transform: scale3d(1.3, 1.3, 1.3);
}
}
/*--------------------------------------------------------------
#0.5 footer
--------------------------------------------------------------*/
.wpo-site-footer,
.wpo-site-footer-s2 {
background-color: #202020;
position: relative;
z-index: 1;
/*** upper contact area ***/
/*** about-widget ***/
/*** link-widget ***/
/*** service-link-widget ***/
/*** newsletter-widget ***/
/*** lower-footer ***/
}
.wpo-site-footer ul,
.wpo-site-footer-s2 ul {
list-style: none;
}
.wpo-site-footer p,
.wpo-site-footer li,
.wpo-site-footer-s2 p,
.wpo-site-footer-s2 li {
color: #fff;
}
.wpo-site-footer .upper-contact-area,
.wpo-site-footer-s2 .upper-contact-area {
position: absolute;
width: 100%;
top: -280px;
z-index: 10;
}
@media (max-width: 991px) {
.wpo-site-footer .upper-contact-area,
.wpo-site-footer-s2 .upper-contact-area {
display: none;
}
}
.wpo-site-footer .upper-contact-area .contact-grids,
.wpo-site-footer-s2 .upper-contact-area .contact-grids {
background: #ff4155;
padding: 80px 165px;
position: relative;
z-index: 1;
padding-left: 0;
}
.wpo-site-footer .upper-contact-area .contact-grids:before,
.wpo-site-footer-s2 .upper-contact-area .contact-grids:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
background: url(../images/blog/shape.png) no-repeat center center;
background-size: cover;
z-index: -1;
}
.wpo-site-footer .upper-contact-area .contact-grids .left-shape,
.wpo-site-footer-s2 .upper-contact-area .contact-grids .left-shape {
position: absolute;
left: -40%;
top: 0;
width: 40%;
height: 100%;
background: #ff4155;
z-index: 1;
}
.wpo-site-footer .upper-contact-area .contact-grids .left-shape:before,
.wpo-site-footer-s2 .upper-contact-area .contact-grids .left-shape:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
background: url(../images/blog/shape.png) no-repeat center center;
background-size: cover;
z-index: -1;
}
.wpo-site-footer .upper-contact-area .contact-grids h2,
.wpo-site-footer-s2 .upper-contact-area .contact-grids h2 {
font-weight: 700;
font-size: 50px;
line-height: 60px;
color: #fff;
}
@media (max-width: 1400px) {
.wpo-site-footer .upper-contact-area .contact-grids h2,
.wpo-site-footer-s2 .upper-contact-area .contact-grids h2 {
font-size: 45px;
}
}
@media (max-width: 1200px) {
.wpo-site-footer .upper-contact-area .contact-grids h2,
.wpo-site-footer-s2 .upper-contact-area .contact-grids h2 {
font-size: 36px;
line-height: 50px;
}
}
.wpo-site-footer .upper-contact-area .contact-grids .send-message-btn,
.wpo-site-footer-s2 .upper-contact-area .contact-grids .send-message-btn {
text-align: right;
}
.wpo-site-footer
.upper-contact-area
.contact-grids
.send-message-btn
.theme-btn,
.wpo-site-footer
.upper-contact-area
.contact-grids
.send-message-btn
.view-cart-btn,
.wpo-site-footer-s2
.upper-contact-area
.contact-grids
.send-message-btn
.theme-btn,
.wpo-site-footer-s2
.upper-contact-area
.contact-grids
.send-message-btn
.view-cart-btn {
background: #202020;
border-radius: 5px;
}
.wpo-site-footer
.upper-contact-area
.contact-grids
.send-message-btn
.theme-btn:after,
.wpo-site-footer
.upper-contact-area
.contact-grids
.send-message-btn
.view-cart-btn:after,
.wpo-site-footer-s2
.upper-contact-area
.contact-grids
.send-message-btn
.theme-btn:after,
.wpo-site-footer-s2
.upper-contact-area
.contact-grids
.send-message-btn
.view-cart-btn:after {
display: none;
}
.wpo-site-footer
.upper-contact-area
.contact-grids
.send-message-btn
.theme-btn:before,
.wpo-site-footer
.upper-contact-area
.contact-grids
.send-message-btn
.view-cart-btn:before,
.wpo-site-footer-s2
.upper-contact-area
.contact-grids
.send-message-btn
.theme-btn:before,
.wpo-site-footer-s2
.upper-contact-area
.contact-grids
.send-message-btn
.view-cart-btn:before {
content: "\f10d";
font-family: "Flaticon";
}
.wpo-site-footer .upper-footer,
.wpo-site-footer-s2 .upper-footer {
padding: 90px 0;
z-index: 1;
overflow: hidden;
position: relative;
}
@media screen and (min-width: 992px) {
.wpo-site-footer .upper-footer,
.wpo-site-footer-s2 .upper-footer {
padding-top: 170px;
}
}
@media (max-width: 991px) {
.wpo-site-footer .upper-footer,
.wpo-site-footer-s2 .upper-footer {
padding: 90px 0 20px;
}
}
@media (max-width: 767px) {
.wpo-site-footer .upper-footer,
.wpo-site-footer-s2 .upper-footer {
padding: 80px 0 10px;
}
}
.wpo-site-footer .upper-footer .shadow-shape,
.wpo-site-footer-s2 .upper-footer .shadow-shape {
position: absolute;
top: -140%;
right: 0;
z-index: -1;
}
.wpo-site-footer .upper-footer .shadow-shape svg circle,
.wpo-site-footer-s2 .upper-footer .shadow-shape svg circle {
fill: #0e8af7;
}
@media (max-width: 991px) {
.wpo-site-footer .upper-footer .col,
.wpo-site-footer-s2 .upper-footer .col {
min-height: 235px;
margin-bottom: 70px;
}
}
@media (max-width: 767px) {
.wpo-site-footer .upper-footer .col,
.wpo-site-footer-s2 .upper-footer .col {
min-height: auto;
margin-bottom: 60px;
}
}
.wpo-site-footer .widget-title,
.wpo-site-footer-s2 .widget-title {
margin-bottom: 30px;
}
@media (max-width: 767px) {
.wpo-site-footer .widget-title,
.wpo-site-footer-s2 .widget-title {
margin-bottom: 20px;
}
}
.wpo-site-footer .widget-title h3,
.wpo-site-footer-s2 .widget-title h3 {
font-size: 24px;
font-size: 1.6rem;
font-weight: blod;
color: #fff;
margin: 0;
padding-bottom: 0.4em;
text-transform: capitalize;
position: relative;
}
@media (max-width: 767px) {
.wpo-site-footer .widget-title h3,
.wpo-site-footer-s2 .widget-title h3 {
font-size: 22px;
font-size: 1.46667rem;
}
}
@media screen and (min-width: 1200px) {
.wpo-site-footer .about-widget,
.wpo-site-footer-s2 .about-widget {
padding-right: 75px;
position: relative;
}
.wpo-site-footer .about-widget:after,
.wpo-site-footer-s2 .about-widget:after {
content: "";
background: rgba(255, 255, 255, 0.05);
width: 1px;
height: 100%;
position: absolute;
right: 35px;
top: 0;
}
}
@media (max-width: 1199px) {
.wpo-site-footer .about-widget .logo,
.wpo-site-footer-s2 .about-widget .logo {
max-width: 90%;
}
}
.wpo-site-footer .about-widget .logo .site-logo,
.wpo-site-footer-s2 .about-widget .logo .site-logo {
font-size: 45px;
font-weight: 700;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #fff;
font-family: "Inter", sans-serif;
}
.wpo-site-footer .about-widget .logo .site-logo img,
.wpo-site-footer-s2 .about-widget .logo .site-logo img {
border-radius: 50%;
margin-right: 10px;
}
.wpo-site-footer .about-widget p,
.wpo-site-footer-s2 .about-widget p {
margin-bottom: 0.8em;
line-height: 1.9em;
}
.wpo-site-footer .about-widget p:last-child,
.wpo-site-footer-s2 .about-widget p:last-child {
margin-bottom: 0;
}
.wpo-site-footer .about-widget .social-icons ul,
.wpo-site-footer-s2 .about-widget .social-icons ul {
overflow: hidden;
padding-top: 15px;
}
@media (max-width: 767px) {
.wpo-site-footer .about-widget .social-icons ul,
.wpo-site-footer-s2 .about-widget .social-icons ul {
padding-top: 8px;
}
}
.wpo-site-footer .about-widget .social-icons ul li,
.wpo-site-footer-s2 .about-widget .social-icons ul li {
float: left;
}
.wpo-site-footer .about-widget .social-icons ul > li + li,
.wpo-site-footer-s2 .about-widget .social-icons ul > li + li {
margin-left: 15px;
}
.wpo-site-footer .about-widget .social-icons ul a,
.wpo-site-footer-s2 .about-widget .social-icons ul a {
color: #fff;
}
.wpo-site-footer .about-widget .social-icons ul a:hover,
.wpo-site-footer-s2 .about-widget .social-icons ul a:hover {
color: #dfca08;
}
@media (max-width: 1199px) {
.wpo-site-footer .link-widget,
.wpo-site-footer-s2 .link-widget {
padding-left: 20px;
}
}
@media (max-width: 991px) {
.wpo-site-footer .link-widget,
.wpo-site-footer-s2 .link-widget {
padding-left: 0;
}
}
.wpo-site-footer .link-widget ul li,
.wpo-site-footer-s2 .link-widget ul li {
position: relative;
padding-left: 15px;
}
.wpo-site-footer .link-widget ul li:before,
.wpo-site-footer-s2 .link-widget ul li:before {
content: "";
background-color: #fff;
width: 5px;
height: 1px;
position: absolute;
left: 0;
top: 9px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.wpo-site-footer .link-widget ul li:hover:before,
.wpo-site-footer-s2 .link-widget ul li:hover:before {
background: #0e8af7;
}
.wpo-site-footer .link-widget ul a,
.wpo-site-footer-s2 .link-widget ul a {
color: #fff;
}
.wpo-site-footer .link-widget ul a:hover,
.wpo-site-footer .link-widget ul li:hover:before,
.wpo-site-footer-s2 .link-widget ul a:hover,
.wpo-site-footer-s2 .link-widget ul li:hover:before {
color: #0e8af7;
}
.wpo-site-footer .link-widget ul > li + li,
.wpo-site-footer-s2 .link-widget ul > li + li {
margin-top: 17px;
}
@media screen and (min-width: 1200px) {
.wpo-site-footer .service-link-widget,
.wpo-site-footer-s2 .service-link-widget {
padding-left: 25px;
}
}
.wpo-site-footer .newsletter-widget form,
.wpo-site-footer-s2 .newsletter-widget form {
margin-top: 25px;
position: relative;
}
.wpo-site-footer .newsletter-widget form input,
.wpo-site-footer-s2 .newsletter-widget form input {
background-color: #232925;
height: 50px;
color: #fff;
padding: 6px 15px;
border: 1px solid #222623;
-webkit-box-shadow: none;
box-shadow: none;
}
.wpo-site-footer .newsletter-widget form .submit,
.wpo-site-footer-s2 .newsletter-widget form .submit {
position: absolute;
right: 20px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.wpo-site-footer .newsletter-widget form .submit button,
.wpo-site-footer-s2 .newsletter-widget form .submit button {
background: transparent;
border: 0;
outline: 0;
font-size: 20px;
color: #fff;
}
.wpo-site-footer .lower-footer,
.wpo-site-footer-s2 .lower-footer {
text-align: center;
}
.wpo-site-footer .lower-footer .row,
.wpo-site-footer-s2 .lower-footer .row {
padding: 20px 0;
position: relative;
}
.wpo-site-footer .lower-footer .row .separator,
.wpo-site-footer-s2 .lower-footer .row .separator {
background: rgba(255, 255, 255, 0.05);
width: calc(100% - 30px);
height: 1px;
position: absolute;
left: 15px;
top: 0;
}
.wpo-site-footer .lower-footer .copyright,
.wpo-site-footer-s2 .lower-footer .copyright {
text-align: center;
font-size: 14px;
font-size: 0.93333rem;
margin: 7px 0 0;
}
@media (max-width: 991px) {
.wpo-site-footer .lower-footer .copyright,
.wpo-site-footer-s2 .lower-footer .copyright {
float: none;
margin: 7px 0 20px;
}
}
@media screen and (min-width: 992px) {
.wpo-site-footer-s2 .upper-footer {
padding-top: 90px;
}
}
@media (max-width: 991px) {
.wpo-site-footer-s2 .upper-footer {
padding: 90px 0 20px;
}
}
@media (max-width: 767px) {
.wpo-site-footer-s2 .upper-footer {
padding: 80px 0 10px;
}
}
.sticky-header {
width: 100%;
position: fixed;
left: 0;
top: -200px;
z-index: 9999;
opacity: 0;
-webkit-transition: all 0.7s;
transition: all 0.7s;
}
.sticky-on {
opacity: 1;
top: 0;
}
/* 3.2 wpo-about-area */
.wpo-about-area,
.wpo-about-area-s2 {
background: #f8f8f8;
overflow: hidden;
z-index: 1;
position: relative;
}
.wpo-about-area .ab-shape,
.wpo-about-area-s2 .ab-shape {
position: absolute;
left: 0;
bottom: -95%;
z-index: -1;
}
.wpo-about-area .ab-shape svg circle,
.wpo-about-area-s2 .ab-shape svg circle {
fill: #dfca08;
}
.wpo-about-area .ab-shape-s2,
.wpo-about-area-s2 .ab-shape-s2 {
position: absolute;
right: -10%;
bottom: -90%;
z-index: -1;
}
.wpo-about-area .ab-shape-s2 svg circle,
.wpo-about-area-s2 .ab-shape-s2 svg circle {
fill: #ad00ff;
}
.wpo-about-area .line-shape-1,
.wpo-about-area-s2 .line-shape-1 {
position: absolute;
left: 0;
top: 50px;
z-index: -1;
}
.wpo-about-area .line-shape-2,
.wpo-about-area-s2 .line-shape-2 {
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
.wpo-about-area .wpo-about-exprience-wrap,
.wpo-about-area-s2 .wpo-about-exprience-wrap {
position: relative;
max-width: 480px;
}
@media (max-width: 991px) {
.wpo-about-area .wpo-about-exprience-wrap,
.wpo-about-area-s2 .wpo-about-exprience-wrap {
margin-bottom: 50px;
}
}
.wpo-about-area .wpo-about-exprience-wrap .wpo-about-exprience,
.wpo-about-area-s2 .wpo-about-exprience-wrap .wpo-about-exprience {
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#fff),
to(#f8f8f8)
);
background: linear-gradient(180deg, #fff 0%, #f8f8f8 100%);
-webkit-box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
border-radius: 10px;
padding: 50px;
max-width: 350px;
text-align: center;
padding-bottom: 180px;
}
@media (max-width: 575px) {
.wpo-about-area .wpo-about-exprience-wrap .wpo-about-exprience,
.wpo-about-area-s2 .wpo-about-exprience-wrap .wpo-about-exprience {
padding: 30px;
padding-bottom: 160px;
}
}
.wpo-about-area .wpo-about-exprience-wrap .wpo-about-exprience h2,
.wpo-about-area-s2 .wpo-about-exprience-wrap .wpo-about-exprience h2 {
font-size: 140px;
font-weight: 700;
color: #0e8af7;
}
@media (max-width: 575px) {
.wpo-about-area .wpo-about-exprience-wrap .wpo-about-exprience h2,
.wpo-about-area-s2 .wpo-about-exprience-wrap .wpo-about-exprience h2 {
font-size: 90px;
}
}
.wpo-about-area .wpo-about-exprience-wrap .wpo-about-exprience span,
.wpo-about-area-s2 .wpo-about-exprience-wrap .wpo-about-exprience span {
font-size: 18px;
color: #585858;
}
.wpo-about-area .wpo-about-exprience-wrap .client,
.wpo-about-area-s2 .wpo-about-exprience-wrap .client {
border-radius: 12px;
padding: 20px;
position: relative;
z-index: 1;
max-width: 300px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: transparent;
position: absolute;
bottom: 40px;
right: 0px;
}
.wpo-about-area .wpo-about-exprience-wrap .client:after,
.wpo-about-area-s2 .wpo-about-exprience-wrap .client:after {
position: absolute;
left: 0px;
top: 0%;
width: 100%;
height: 100%;
content: "";
background: -webkit-gradient(
linear,
left top,
right top,
from(#ddd),
to(rgba(255, 255, 255, 0.3))
);
background: linear-gradient(90deg, #ddd 0%, rgba(255, 255, 255, 0.3) 100%);
opacity: 1;
z-index: -2;
border-radius: 12px;
}
.wpo-about-area .wpo-about-exprience-wrap .client:before,
.wpo-about-area-s2 .wpo-about-exprience-wrap .client:before {
position: absolute;
left: 2px;
top: 2px;
width: 98%;
height: 96%;
content: "";
background: #fff;
opacity: 0.85;
z-index: -1;
border-radius: 12px;
}
.wpo-about-area .wpo-about-exprience-wrap .client h3,
.wpo-about-area-s2 .wpo-about-exprience-wrap .client h3 {
font-weight: 700;
font-size: 45px;
line-height: 28px;
color: #0e8af7;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
margin-bottom: 0;
margin-right: 10px;
}
.wpo-about-area .wpo-about-exprience-wrap .client p,
.wpo-about-area-s2 .wpo-about-exprience-wrap .client p {
margin-bottom: 0;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
color: #585858;
}
.wpo-about-area .wpo-about-content .wpo-about-title,
.wpo-about-area-s2 .wpo-about-content .wpo-about-title {
margin-bottom: 40px;
}
.wpo-about-area .wpo-about-content .wpo-about-title h2,
.wpo-about-area-s2 .wpo-about-content .wpo-about-title h2 {
font-size: 48px;
color: #202020;
margin-bottom: 20px;
}
@media (max-width: 767px) {
.wpo-about-area .wpo-about-content .wpo-about-title h2,
.wpo-about-area-s2 .wpo-about-content .wpo-about-title h2 {
font-size: 35px;
}
}
.wpo-about-area .wpo-about-content .wpo-about-title p,
.wpo-about-area-s2 .wpo-about-content .wpo-about-title p {
color: #888888;
}
.wpo-about-area .wpo-about-content .wpo-about-funfact,
.wpo-about-area-s2 .wpo-about-content .wpo-about-funfact {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -15px;
}
.wpo-about-area .wpo-about-content .wpo-about-funfact .grid,
.wpo-about-area-s2 .wpo-about-content .wpo-about-funfact .grid {
background: -webkit-gradient(
linear,
left top,
left bottom,
from(rgba(255, 230, 0, 0.6)),
color-stop(67.59%, rgba(255, 255, 255, 0.6))
);
background: linear-gradient(
180deg,
rgba(255, 230, 0, 0.6) 0%,
rgba(255, 255, 255, 0.6) 67.59%
);
-ms-flex-preferred-size: 28.33%;
flex-basis: 28.33%;
margin: 0 15px;
border-radius: 12px;
margin-bottom: 30px;
}
@media (max-width: 1400px) {
.wpo-about-area .wpo-about-content .wpo-about-funfact .grid,
.wpo-about-area-s2 .wpo-about-content .wpo-about-funfact .grid {
-ms-flex-preferred-size: 27.33%;
flex-basis: 27.33%;
}
}
@media (max-width: 1200px) {
.wpo-about-area .wpo-about-content .wpo-about-funfact .grid,
.wpo-about-area-s2 .wpo-about-content .wpo-about-funfact .grid {
-ms-flex-preferred-size: 26.33%;
flex-basis: 26.33%;
}
}
@media (max-width: 575px) {
.wpo-about-area .wpo-about-content .wpo-about-funfact .grid,
.wpo-about-area-s2 .wpo-about-content .wpo-about-funfact .grid {
-ms-flex-preferred-size: 42.33%;
flex-basis: 42.33%;
}
}
@media (max-width: 400px) {
.wpo-about-area .wpo-about-content .wpo-about-funfact .grid,
.wpo-about-area-s2 .wpo-about-content .wpo-about-funfact .grid {
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
}
}
.wpo-about-area .wpo-about-content .wpo-about-funfact .grid .grid-inner,
.wpo-about-area-s2 .wpo-about-content .wpo-about-funfact .grid .grid-inner {
padding: 40px;
background: #fff;
margin: 3px 3px 0 3px;
text-align: center;
border-radius: 12px;
}
@media (max-width: 1200px) {
.wpo-about-area .wpo-about-content .wpo-about-funfact .grid .grid-inner,
.wpo-about-area-s2 .wpo-about-content .wpo-about-funfact .grid .grid-inner {
padding: 20px;
}
}
.wpo-about-area .wpo-about-content .wpo-about-funfact .grid .grid-inner h3,
.wpo-about-area-s2 .wpo-about-content .wpo-about-funfact .grid .grid-inner h3 {
font-weight: 700;
font-size: 35px;
line-height: 42px;
color: #202020;
}
.wpo-about-area .wpo-about-content .wpo-about-funfact .grid .grid-inner p,
.wpo-about-area-s2 .wpo-about-content .wpo-about-funfact .grid .grid-inner p {
margin-bottom: 0;
color: #dfca08;
}
.wpo-about-area .wpo-about-content .wpo-about-funfact .grid:nth-child(2),
.wpo-about-area-s2 .wpo-about-content .wpo-about-funfact .grid:nth-child(2) {
background: -webkit-gradient(
linear,
left top,
left bottom,
from(rgba(89, 195, 120, 0.6)),
color-stop(67.59%, rgba(255, 255, 255, 0.6))
);
background: linear-gradient(
180deg,
rgba(89, 195, 120, 0.6) 0%,
rgba(255, 255, 255, 0.6) 67.59%
);
}
.wpo-about-area
.wpo-about-content
.wpo-about-funfact
.grid:nth-child(2)
.grid-inner
p,
.wpo-about-area-s2
.wpo-about-content
.wpo-about-funfact
.grid:nth-child(2)
.grid-inner
p {
margin-bottom: 0;
color: #0e8af7;
}
.wpo-about-area .wpo-about-content .wpo-about-funfact .grid:nth-child(3),
.wpo-about-area-s2 .wpo-about-content .wpo-about-funfact .grid:nth-child(3) {
background: -webkit-gradient(
linear,
left top,
left bottom,
from(rgba(221, 88, 79, 0.6)),
color-stop(67.59%, rgba(255, 255, 255, 0.6))
);
background: linear-gradient(
180deg,
rgba(221, 88, 79, 0.6) 0%,
rgba(255, 255, 255, 0.6) 67.59%
);
}
.wpo-about-area
.wpo-about-content
.wpo-about-funfact
.grid:nth-child(3)
.grid-inner
p,
.wpo-about-area-s2
.wpo-about-content
.wpo-about-funfact
.grid:nth-child(3)
.grid-inner
p {
margin-bottom: 0;
color: #dd584f;
}
.wpo-about-area .wpo-about-content .wpo-about-funfact .grid:nth-child(4),
.wpo-about-area-s2 .wpo-about-content .wpo-about-funfact .grid:nth-child(4) {
background: -webkit-gradient(
linear,
left top,
left bottom,
from(rgba(255, 154, 0, 0.6)),
color-stop(67.59%, rgba(255, 255, 255, 0.6))
);
background: linear-gradient(
180deg,
rgba(255, 154, 0, 0.6) 0%,
rgba(255, 255, 255, 0.6) 67.59%
);
}
.wpo-about-area
.wpo-about-content
.wpo-about-funfact
.grid:nth-child(4)
.grid-inner
p,
.wpo-about-area-s2
.wpo-about-content
.wpo-about-funfact
.grid:nth-child(4)
.grid-inner
p {
margin-bottom: 0;
color: #ff9a00;
}
.wpo-about-area .wpo-about-content .wpo-about-funfact .grid:nth-child(5),
.wpo-about-area-s2 .wpo-about-content .wpo-about-funfact .grid:nth-child(5) {
background: -webkit-gradient(
linear,
left top,
left bottom,
from(rgba(0, 169, 255, 0.6)),
color-stop(67.59%, rgba(255, 255, 255, 0.6))
);
background: linear-gradient(
180deg,
rgba(0, 169, 255, 0.6) 0%,
rgba(255, 255, 255, 0.6) 67.59%
);
}
.wpo-about-area
.wpo-about-content
.wpo-about-funfact
.grid:nth-child(5)
.grid-inner
p,
.wpo-about-area-s2
.wpo-about-content
.wpo-about-funfact
.grid:nth-child(5)
.grid-inner
p {
margin-bottom: 0;
color: #00a9ff;
}
.wpo-about-area .wpo-about-content .wpo-about-funfact .grid:nth-child(6),
.wpo-about-area-s2 .wpo-about-content .wpo-about-funfact .grid:nth-child(6) {
background: -webkit-gradient(
linear,
left top,
left bottom,
from(rgba(158, 0, 255, 0.6)),
color-stop(67.59%, rgba(255, 255, 255, 0.6))
);
background: linear-gradient(
180deg,
rgba(158, 0, 255, 0.6) 0%,
rgba(255, 255, 255, 0.6) 67.59%
);
}
.wpo-about-area
.wpo-about-content
.wpo-about-funfact
.grid:nth-child(6)
.grid-inner
p,
.wpo-about-area-s2
.wpo-about-content
.wpo-about-funfact
.grid:nth-child(6)
.grid-inner
p {
margin-bottom: 0;
color: #ad00ff;
}
/* 3.3 wpo-service-area */
.wpo-service-area,
.wpo-service-area-s2 {
background: #fffbfb;
position: relative;
overflow: hidden;
z-index: 1;
padding-bottom: 90px;
}
@media (max-width: 991px) {
.wpo-service-area,
.wpo-service-area-s2 {
padding-bottom: 60px;
}
}
@media (max-width: 767px) {
.wpo-service-area,
.wpo-service-area-s2 {
padding-bottom: 50px;
}
}
.wpo-service-area .ab-shape,
.wpo-service-area-s2 .ab-shape {
position: absolute;
left: 0;
top: -70%;
z-index: -1;
}
.wpo-service-area .wpo-service-wrap .nav-tabs,
.wpo-service-area-s2 .wpo-service-wrap .nav-tabs {
border-bottom: 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 65px;
}
@media (max-width: 767px) {
.wpo-service-area .wpo-service-wrap .nav-tabs,
.wpo-service-area-s2 .wpo-service-wrap .nav-tabs {
margin-bottom: 35px;
}
}
.wpo-service-area .wpo-service-wrap .nav-tabs .nav-item .nav-link,
.wpo-service-area-s2 .wpo-service-wrap .nav-tabs .nav-item .nav-link {
width: 250px;
height: 65px;
background: transparent;
text-align: center;
margin-right: 30px;
border-radius: 38px;
text-align: center;
line-height: 65px;
padding: 0;
color: #202020;
border: 2px solid #dddbdb;
font-weight: 700;
font-size: 22px;
cursor: pointer;
}
@media (max-width: 991px) {
.wpo-service-area .wpo-service-wrap .nav-tabs .nav-item .nav-link,
.wpo-service-area-s2 .wpo-service-wrap .nav-tabs .nav-item .nav-link {
width: 180px;
height: 55px;
margin-right: 20px;
line-height: 55px;
font-size: 16px;
}
}
@media (max-width: 767px) {
.wpo-service-area .wpo-service-wrap .nav-tabs .nav-item .nav-link,
.wpo-service-area-s2 .wpo-service-wrap .nav-tabs .nav-item .nav-link {
width: 120px;
height: 45px;
margin-right: 10px;
line-height: 45px;
font-size: 14px;
margin-bottom: 5px;
}
}
.wpo-service-area .wpo-service-wrap .nav-tabs .nav-item .nav-link.active,
.wpo-service-area-s2 .wpo-service-wrap .nav-tabs .nav-item .nav-link.active {
background: none;
border: 2px solid #0e8af7;
color: #fff;
background: #0e8af7;
}
.wpo-service-area .wpo-service-wrap .wpo-service-item,
.wpo-service-area-s2 .wpo-service-wrap .wpo-service-item {
background: #fff;
border: 2px solid #e7e2e2;
border-radius: 12px;
text-align: center;
padding: 50px 40px;
margin-bottom: 30px;
}
@media (max-width: 1199px) {
.wpo-service-area .wpo-service-wrap .wpo-service-item,
.wpo-service-area-s2 .wpo-service-wrap .wpo-service-item {
padding: 30px 20px;
}
}
.wpo-service-area .wpo-service-wrap .wpo-service-item .icon,
.wpo-service-area-s2 .wpo-service-wrap .wpo-service-item .icon {
width: 120px;
height: 120px;
line-height: 120px;
background: #fff;
margin: 0 auto;
margin-bottom: 30px;
border-radius: 50%;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
}
.wpo-service-area .wpo-service-wrap .wpo-service-item .icon .fi:before,
.wpo-service-area-s2 .wpo-service-wrap .wpo-service-item .icon .fi:before {
font-size: 50px;
color: #0e8af7;
line-height: unset;
}
.wpo-service-area .wpo-service-wrap .wpo-service-item h2,
.wpo-service-area-s2 .wpo-service-wrap .wpo-service-item h2 {
font-weight: 700;
font-size: 26px;
line-height: 31px;
color: #202020;
margin-bottom: 20px;
}
@media (max-width: 1399px) {
.wpo-service-area .wpo-service-wrap .wpo-service-item h2,
.wpo-service-area-s2 .wpo-service-wrap .wpo-service-item h2 {
font-size: 20px;
line-height: 20px;
margin-bottom: 10px;
}
}
.wpo-service-area .wpo-service-wrap .wpo-service-item p,
.wpo-service-area-s2 .wpo-service-wrap .wpo-service-item p {
color: #888888;
margin: 25px 0;
}
@media (max-width: 1399px) {
.wpo-service-area .wpo-service-wrap .wpo-service-item p,
.wpo-service-area-s2 .wpo-service-wrap .wpo-service-item p {
margin: 15px 0;
font-size: 14px;
}
}
.wpo-service-area .wpo-service-wrap .wpo-service-item a,
.wpo-service-area-s2 .wpo-service-wrap .wpo-service-item a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #202020;
font-weight: 700;
font-size: 16px;
line-height: 19px;
padding: 0;
padding-left: 30px;
position: relative;
display: inline-block;
}
@media (max-width: 1399px) {
.wpo-service-area .wpo-service-wrap .wpo-service-item a,
.wpo-service-area-s2 .wpo-service-wrap .wpo-service-item a {
font-size: 15px;
}
}
.wpo-service-area .wpo-service-wrap .wpo-service-item a:before,
.wpo-service-area-s2 .wpo-service-wrap .wpo-service-item a:before {
position: absolute;
left: -5px;
top: 1px;
content: "\f10d";
font-family: "Flaticon";
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.wpo-service-area .wpo-service-wrap .wpo-service-item a:hover,
.wpo-service-area-s2 .wpo-service-wrap .wpo-service-item a:hover {
color: #dfca08;
background: none;
}
.wpo-service-area .wpo-service-wrap .wpo-service-item a:hover:before,
.wpo-service-area-s2 .wpo-service-wrap .wpo-service-item a:hover:before {
left: 0;
}
.wpo-service-area .wpo-service-wrap .wpo-service-item a:focus,
.wpo-service-area-s2 .wpo-service-wrap .wpo-service-item a:focus {
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.wpo-service-area .wpo-service-wrap .wpo-service-item:hover .icon,
.wpo-service-area-s2 .wpo-service-wrap .wpo-service-item:hover .icon {
background: #0e8af7;
}
.wpo-service-area .wpo-service-wrap .wpo-service-item:hover .icon .fi:before,
.wpo-service-area-s2
.wpo-service-wrap
.wpo-service-item:hover
.icon
.fi:before {
color: #fff;
}
/* 3.4 wpo-work-area */
.wpo-work-area,
.wpo-work-area-s2 {
background: #f8f8f8;
position: relative;
z-index: 1;
overflow: hidden;
}
.wpo-work-area .shape-wk,
.wpo-work-area-s2 .shape-wk {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.wpo-work-area .shape-wk svg circle,
.wpo-work-area-s2 .shape-wk svg circle {
fill: #e34e44;
}
.wpo-work-area .wpo-work-wrap .wpo-work-item,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item {
padding: 20px 70px;
background: #fff;
border-radius: 8px;
margin-bottom: 30px;
position: relative;
border: 1px solid transparent;
-webkit-box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
}
@media (max-width: 991px) {
.wpo-work-area .wpo-work-wrap .wpo-work-item,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item {
padding: 20px 30px;
}
}
.wpo-work-area .wpo-work-wrap .wpo-work-item:hover,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item:hover {
border: 1px solid #494949;
}
.wpo-work-area .wpo-work-wrap .wpo-work-item:last-child,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item:last-child {
margin-bottom: 0;
}
.wpo-work-area .wpo-work-wrap .wpo-work-item ul,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 767px) {
.wpo-work-area .wpo-work-wrap .wpo-work-item ul,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media (max-width: 450px) {
.wpo-work-area .wpo-work-wrap .wpo-work-item ul,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li {
-ms-flex-preferred-size: 18%;
flex-basis: 18%;
}
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.date,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.date {
font-weight: 700;
font-size: 30px;
line-height: 36px;
color: #202020;
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 1200px) {
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.date,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.date {
font-size: 20px;
}
}
@media (max-width: 991px) {
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.date,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.date {
font-size: 16px;
}
}
@media (max-width: 767px) {
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.date,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.date {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
}
@media (max-width: 450px) {
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.date,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.date {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
text-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 10px;
}
}
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.date span,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.date span {
color: #585858;
display: inline-block;
font-size: 15px;
font-weight: 400;
margin-left: 3px;
}
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.logo,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.logo {
-ms-flex-preferred-size: 15%;
flex-basis: 15%;
}
@media (max-width: 450px) {
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.logo,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.logo {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
text-align: center;
}
}
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.position,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.position {
font-weight: 700;
font-size: 24px;
line-height: 29px;
color: #202020;
-ms-flex-preferred-size: 30%;
flex-basis: 30%;
}
@media (max-width: 1200px) {
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.position,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.position {
font-size: 20px;
}
}
@media (max-width: 991px) {
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.position,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.position {
font-size: 16px;
}
}
@media (max-width: 767px) {
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.position,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.position {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
margin-top: 20px;
}
}
@media (max-width: 450px) {
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.position,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.position {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
text-align: center;
}
}
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.position span,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.position span {
display: block;
font-weight: 400;
font-size: 15px;
line-height: 18px;
margin-top: 10px;
color: #dd584f;
}
@media (max-width: 991px) {
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.position span,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.position span {
font-size: 14px;
margin-top: 5px;
}
}
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.position span span,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.position span span {
color: #727272;
display: inline-block;
}
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.link,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.link {
text-align: right;
}
@media (max-width: 767px) {
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.link,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.link {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
}
@media (max-width: 450px) {
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.link,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.link {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
text-align: center;
margin-top: 10px;
}
}
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.link a,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.link a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #202020;
font-weight: 700;
font-size: 16px;
line-height: 19px;
padding-left: 30px;
position: relative;
display: inline-block;
}
@media (max-width: 991px) {
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.link a,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.link a {
font-size: 14px;
padding-left: 15px;
}
}
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.link a:before,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.link a:before {
position: absolute;
left: -5px;
top: 1px;
content: "\f10d";
font-family: "Flaticon";
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.link a:hover,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.link a:hover {
color: #dfca08;
}
.wpo-work-area .wpo-work-wrap .wpo-work-item ul li.link a:hover:before,
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.link a:hover:before {
left: 0;
}
/* 3.5 wpo-project-area */
.wpo-project-area,
.wpo-project-area-s2 {
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#fff),
to(#f8f8f8)
);
background: linear-gradient(180deg, #fff 0%, #f8f8f8 100%);
position: relative;
z-index: 1;
overflow: hidden;
padding-bottom: 190px;
}
@media (max-width: 991px) {
.wpo-project-area,
.wpo-project-area-s2 {
padding-bottom: 90px;
}
}
@media (max-width: 767px) {
.wpo-project-area,
.wpo-project-area-s2 {
padding-bottom: 80px;
}
}
.wpo-project-area .shape-p,
.wpo-project-area-s2 .shape-p {
position: absolute;
top: 50%;
left: 30%;
z-index: -1;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.wpo-project-area .shape-p svg circle,
.wpo-project-area-s2 .shape-p svg circle {
fill: #ffe500;
}
.wpo-project-area .line-shape-1,
.wpo-project-area-s2 .line-shape-1 {
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
.wpo-project-area .line-shape-2,
.wpo-project-area-s2 .line-shape-2 {
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.wpo-project-area .sec-title-icon,
.wpo-project-area-s2 .sec-title-icon {
width: 130px;
height: 130px;
line-height: 130px;
background: #faf8e0;
text-align: center;
border-radius: 50%;
margin-left: auto;
position: relative;
}
@media (max-width: 991px) {
.wpo-project-area .sec-title-icon,
.wpo-project-area-s2 .sec-title-icon {
margin: 0 auto;
margin-top: 30px;
}
}
.wpo-project-area .sec-title-icon:before,
.wpo-project-area-s2 .sec-title-icon:before {
position: absolute;
left: -10px;
top: -10px;
width: 150px;
height: 150px;
border: 1px dashed #dfca08;
content: "";
border-radius: 50%;
}
.wpo-project-area .sec-title-icon .fi::before,
.wpo-project-area-s2 .sec-title-icon .fi::before {
font-size: 55px;
color: #dfca08;
line-height: unset;
}
.wpo-project-area .wpo-project-wrap,
.wpo-project-area-s2 .wpo-project-wrap {
padding-bottom: 90px;
}
@media (max-width: 767px) {
.wpo-project-area .wpo-project-wrap,
.wpo-project-area-s2 .wpo-project-wrap {
padding-bottom: 60px;
}
}
.wpo-project-area .wpo-project-wrap .wpo-project-item .wpo-project-text,
.wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-text {
padding-top: 30px;
}
.wpo-project-area .wpo-project-wrap .wpo-project-item .wpo-project-text h2,
.wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-text h2 {
font-weight: 600;
font-size: 25px;
line-height: 35px;
cursor: pointer;
}
.wpo-project-area .wpo-project-wrap .wpo-project-item .wpo-project-text h2 a,
.wpo-project-area-s2
.wpo-project-wrap
.wpo-project-item
.wpo-project-text
h2
a {
color: #202020;
}
.wpo-project-area
.wpo-project-wrap
.wpo-project-item
.wpo-project-text
h2
a:hover,
.wpo-project-area-s2
.wpo-project-wrap
.wpo-project-item
.wpo-project-text
h2
a:hover {
color: #0e8af7;
}
@media (max-width: 1199px) {
.wpo-project-area .wpo-project-wrap .wpo-project-item .wpo-project-text h2,
.wpo-project-area-s2
.wpo-project-wrap
.wpo-project-item
.wpo-project-text
h2 {
font-size: 20px;
line-height: 30px;
}
}
.wpo-project-area .wpo-project-wrap .wpo-project-item .wpo-project-text span,
.wpo-project-area-s2
.wpo-project-wrap
.wpo-project-item
.wpo-project-text
span {
font-weight: 400;
font-size: 14px;
line-height: 30px;
color: #888888;
}
.wpo-project-area .wpo-project-wrap .wpo-project-item .wpo-project-img,
.wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-img {
overflow: hidden;
position: relative;
}
.wpo-project-area .wpo-project-wrap .wpo-project-item .wpo-project-img img,
.wpo-project-area-s2 .wpo-project-wrap .wpo-project-item .wpo-project-img img {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: scale(1);
transform: scale(1);
width: 100%;
}
.wpo-project-area
.wpo-project-wrap
.wpo-project-item:hover
.wpo-project-img
img,
.wpo-project-area-s2
.wpo-project-wrap
.wpo-project-item:hover
.wpo-project-img
img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.wpo-project-area .wpo-project-wrap .owl-nav button.owl-next,
.wpo-project-area-s2 .wpo-project-wrap .owl-nav button.owl-next {
left: 51%;
bottom: -40px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.wpo-project-area .wpo-project-wrap .owl-nav button,
.wpo-project-area-s2 .wpo-project-wrap .owl-nav button {
position: absolute;
left: 46%;
bottom: -40px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
background: transparent;
-webkit-transition: all 0.3s;
transition: all 0.3s;
background: transparent;
border: 1px solid #0e8af7;
color: #0e8af7;
text-decoration: none;
border-radius: 50%;
}
.wpo-project-area .wpo-project-wrap .owl-nav button:hover,
.wpo-project-area-s2 .wpo-project-wrap .owl-nav button:hover {
background: #0e8af7;
color: #fff;
text-decoration: none;
border-radius: 50%;
}
@media (max-width: 1200px) {
.wpo-project-area .wpo-project-wrap .owl-nav button,
.wpo-project-area-s2 .wpo-project-wrap .owl-nav button {
left: 43%;
}
}
@media (max-width: 767px) {
.wpo-project-area .wpo-project-wrap .owl-nav button,
.wpo-project-area-s2 .wpo-project-wrap .owl-nav button {
left: 38%;
}
}
@media (max-width: 575px) {
.wpo-project-area .wpo-project-wrap .owl-nav button,
.wpo-project-area-s2 .wpo-project-wrap .owl-nav button {
display: none;
}
}
.wpo-project-area .wpo-project-wrap .owl-dots,
.wpo-project-area-s2 .wpo-project-wrap .owl-dots {
bottom: -10px;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.wpo-project-area .wpo-project-wrap .owl-dots button,
.wpo-project-area-s2 .wpo-project-wrap .owl-dots button {
border: 0;
width: 10px;
height: 12px;
margin: 5px;
border-radius: 50%;
}
.wpo-project-area .wpo-project-wrap .owl-dots button.active,
.wpo-project-area-s2 .wpo-project-wrap .owl-dots button.active {
background: #0e8af7;
}
/* 3.6 wpo-testimonial-section */
.wpo-testimonial-section {
background: #fff;
position: relative;
}
@media (max-width: 500px) {
.wpo-testimonial-section {
padding-top: 130px;
}
}
.wpo-testimonial-section .left-shape {
position: absolute;
left: 0;
top: 0;
width: 40%;
height: 110%;
background: #e9e9e9;
top: -70px;
z-index: 9;
-webkit-clip-path: polygon(0 0, 100% 0, 55% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 55% 100%, 0% 100%);
}
@media (max-width: 991px) {
.wpo-testimonial-section .left-shape {
display: none;
}
}
.wpo-testimonial-section .right-shape {
position: absolute;
right: 0px;
bottom: 0;
}
.wpo-testimonial-section .wpo-testimonial-wrap {
position: relative;
z-index: 91;
}
@media (max-width: 500px) {
.wpo-testimonial-section .wpo-testimonial-wrap .wpo-testimonial-item {
margin-top: 70px;
}
}
@media (max-width: 767px) {
.wpo-testimonial-section
.wpo-testimonial-wrap
.wpo-testimonial-item
.wpo-testimonial-text {
text-align: center;
}
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.wpo-testimonial-item
.wpo-testimonial-text
h4 {
font-weight: 500;
font-size: 32px;
line-height: 52px;
color: #202020;
margin-bottom: 20px;
}
@media (max-width: 767px) {
.wpo-testimonial-section
.wpo-testimonial-wrap
.wpo-testimonial-item
.wpo-testimonial-text
h4 {
font-size: 24px;
line-height: 35px;
margin-bottom: 10px;
}
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.wpo-testimonial-item
.wpo-testimonial-text
p {
font-weight: 400;
font-size: 16px;
line-height: 30px;
color: #888888;
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.wpo-testimonial-item
.wpo-testimonial-text
.wpo-testimonial-text-btm {
margin-top: 30px;
}
@media (max-width: 575px) {
.wpo-testimonial-section
.wpo-testimonial-wrap
.wpo-testimonial-item
.wpo-testimonial-text
.wpo-testimonial-text-btm {
margin-top: 20px;
}
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.wpo-testimonial-item
.wpo-testimonial-text
.wpo-testimonial-text-btm
h3 {
font-weight: 600;
font-size: 26px;
line-height: 31px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #202020;
}
@media (max-width: 767px) {
.wpo-testimonial-section
.wpo-testimonial-wrap
.wpo-testimonial-item
.wpo-testimonial-text
.wpo-testimonial-text-btm
h3 {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 18px;
}
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.wpo-testimonial-item
.wpo-testimonial-text
.wpo-testimonial-text-btm
h3
span {
font-weight: 400;
font-size: 14px;
line-height: 17px;
color: #888888;
display: block;
margin-left: 10px;
position: relative;
top: 3px;
}
.wpo-testimonial-section .wpo-testimonial-wrap .testimonial-left {
position: relative;
width: 474px;
height: 469px;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 0 auto;
}
@media (max-width: 500px) {
.wpo-testimonial-section .wpo-testimonial-wrap .testimonial-left {
width: 220px;
height: 220px;
}
}
@media (max-width: 991px) {
.wpo-testimonial-section .wpo-testimonial-wrap .testimonial-left {
margin-bottom: 40px;
}
}
.wpo-testimonial-section .wpo-testimonial-wrap .testimonial-left .shape-t {
position: absolute;
top: 50%;
left: 30%;
z-index: -1;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.shape-t
svg
circle {
fill: #ffe600;
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner {
width: 250px;
height: 250px;
position: relative;
z-index: 1;
}
@media (max-width: 500px) {
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner {
width: 180px;
height: 180px;
}
}
@media (max-width: 767px) {
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner {
margin: 0 auto;
}
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.border-s1 {
position: absolute;
left: -14%;
top: -16%;
width: 130%;
height: 130%;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 50%;
z-index: -1;
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.border-s2 {
position: absolute;
left: -28%;
top: -30%;
width: 160%;
height: 160%;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 50%;
z-index: -1;
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.border-s3 {
position: absolute;
left: -42%;
top: -45%;
width: 190%;
height: 190%;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 50%;
z-index: -1;
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-1,
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-2,
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-3,
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-4,
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-5 {
position: absolute;
left: -35px;
top: -25%;
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-1
img,
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-2
img,
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-3
img,
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-4
img,
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-5
img {
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
width: 80px;
height: 80px;
}
@media (max-width: 500px) {
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-1
img,
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-2
img,
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-3
img,
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-4
img,
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-5
img {
width: 60px;
height: 60px;
left: -10px;
top: 0;
}
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-2 {
left: auto;
right: -120px;
top: -18%;
}
@media (max-width: 500px) {
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-2 {
right: -50px;
top: -20%;
}
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-3 {
top: auto;
left: -120px;
bottom: 0;
}
@media (max-width: 500px) {
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-3 {
left: -50px;
}
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-4 {
top: auto;
left: auto;
right: -85px;
bottom: 0;
}
@media (max-width: 500px) {
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-4 {
right: -60px;
}
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-4
img {
width: 60px;
height: 60px;
}
@media (max-width: 500px) {
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-4
img {
width: 40px;
height: 40px;
}
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-5 {
top: auto;
left: 45%;
right: 1px;
bottom: -104px;
}
@media (max-width: 500px) {
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-5 {
bottom: -65px;
}
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-5
img {
width: 60px;
height: 60px;
}
@media (max-width: 500px) {
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-left-inner
.side-img-5
img {
width: 40px;
height: 40px;
}
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-img {
position: relative;
border-radius: 8px;
width: 250px;
height: 250px;
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.testimonial-left
.testimonial-img
img {
border-radius: 50%;
}
.wpo-testimonial-section .wpo-testimonial-wrap .slick-arrow {
background: transparent;
width: 50px;
height: 50px;
line-height: 65px;
border: 1px solid #404040;
color: #6e6e6e;
padding: 0;
font-size: 0;
margin: 0;
border-radius: 50%;
-webkit-transition: all 0.3s;
transition: all 0.3s;
z-index: 1;
top: auto;
}
.wpo-testimonial-section .wpo-testimonial-wrap .slick-arrow.slick-next {
position: absolute;
bottom: -25px;
right: 0;
}
@media (max-width: 991px) {
.wpo-testimonial-section .wpo-testimonial-wrap .slick-arrow.slick-next {
bottom: -45px;
}
}
.wpo-testimonial-section .wpo-testimonial-wrap .slick-arrow.slick-next:before {
font-family: "themify";
content: "\e628";
font-size: 15px;
color: #585858;
}
.wpo-testimonial-section .wpo-testimonial-wrap .slick-arrow.slick-prev {
position: absolute;
bottom: -25px;
left: auto;
right: 70px;
}
@media (max-width: 991px) {
.wpo-testimonial-section .wpo-testimonial-wrap .slick-arrow.slick-prev {
bottom: -45px;
}
}
.wpo-testimonial-section .wpo-testimonial-wrap .slick-arrow.slick-prev:before {
font-family: "themify";
content: "\e629";
font-size: 15px;
color: #585858;
}
.wpo-testimonial-section .wpo-testimonial-wrap .slick-arrow:hover {
background: #0e8af7;
border-color: #0e8af7;
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.slick-arrow:hover.slick-next:before {
color: #fff;
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.slick-arrow:hover.slick-prev:before {
color: #fff;
}
@media (max-width: 767px) {
.wpo-testimonial-section .wpo-testimonial-wrap .slick-arrow {
display: none !important;
}
}
.wpo-testimonial-section .wpo-testimonial-wrap .slick-dots {
text-align: center;
bottom: -30px;
display: none !important;
}
@media (max-width: 767px) {
.wpo-testimonial-section .wpo-testimonial-wrap .slick-dots {
display: block !important;
}
}
.wpo-testimonial-section .wpo-testimonial-wrap .slick-dots li {
width: unset;
height: unset;
}
.wpo-testimonial-section .wpo-testimonial-wrap .slick-dots li button {
width: 15px;
background: #f3f8ff;
margin-right: 5px;
height: 5px;
padding: 0;
}
.wpo-testimonial-section .wpo-testimonial-wrap .slick-dots li button::before {
display: none;
}
.wpo-testimonial-section
.wpo-testimonial-wrap
.slick-dots
li.slick-active
button {
background: #0e8af7;
}
/* 3.7 wpo-pricing-section */
.wpo-pricing-section {
background: #f8f8f8;
position: relative;
z-index: 1;
}
.wpo-pricing-section .shape-p {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.wpo-pricing-section .shape-p svg circle {
fill: #ffe500;
}
.wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item {
background: #fff;
-webkit-box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
border-radius: 30px;
}
@media (max-width: 991px) {
.wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item {
margin-bottom: 30px;
}
}
.wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-top {
padding: 30px;
text-align: center;
padding-top: 0;
padding-bottom: 0;
}
.wpo-pricing-section
.wpo-pricing-wrap
.wpo-pricing-item
.wpo-pricing-top
.pricing-thumb {
display: inline-block;
padding: 3px 30px 5px;
background: #0e8af7;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.wpo-pricing-section
.wpo-pricing-wrap
.wpo-pricing-item
.wpo-pricing-top
.pricing-thumb
span {
text-transform: uppercase;
color: #fff;
}
.wpo-pricing-section
.wpo-pricing-wrap
.wpo-pricing-item
.wpo-pricing-top
.wpo-pricing-text {
margin-top: 30px;
}
.wpo-pricing-section
.wpo-pricing-wrap
.wpo-pricing-item
.wpo-pricing-top
.wpo-pricing-text
h2 {
color: #202020;
font-size: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 15px;
font-weight: 700;
}
.wpo-pricing-section
.wpo-pricing-wrap
.wpo-pricing-item
.wpo-pricing-top
.wpo-pricing-text
h2
span {
font-weight: 500;
color: #888888;
font-size: 16px;
text-transform: uppercase;
display: inline-block;
margin-left: 2px;
}
.wpo-pricing-section
.wpo-pricing-wrap
.wpo-pricing-item
.wpo-pricing-top
.wpo-pricing-text
p {
padding-bottom: 30px;
max-width: 282px;
margin: 0 auto;
border-bottom: 1px solid #ebebeb;
color: #888888;
}
.wpo-pricing-section .wpo-pricing-wrap .wpo-pricing-item .wpo-pricing-bottom {
padding: 40px;
padding-top: 35px;
text-align: center;
}
.wpo-pricing-section
.wpo-pricing-wrap
.wpo-pricing-item
.wpo-pricing-bottom
.wpo-pricing-bottom-text
ul {
list-style: none;
}
.wpo-pricing-section
.wpo-pricing-wrap
.wpo-pricing-item
.wpo-pricing-bottom
.wpo-pricing-bottom-text
ul
li {
color: #888888;
padding-bottom: 15px;
}
.wpo-pricing-section
.wpo-pricing-wrap
.wpo-pricing-item
.wpo-pricing-bottom
.wpo-pricing-bottom-text
a {
font-size: 16px;
color: #0e8af7;
font-weight: 500;
display: inline-block;
margin-top: 20px;
position: relative;
padding: 10px 25px;
border: 1px solid #ebebeb;
}
.wpo-pricing-section
.wpo-pricing-wrap
.wpo-pricing-item
.wpo-pricing-bottom
.wpo-pricing-bottom-text
a:hover {
background: #0e8af7;
color: #fff;
}
.wpo-pricing-section
.wpo-pricing-wrap
.wpo-pricing-item
.wpo-pricing-bottom
.wpo-pricing-bottom-text
a:hover:before {
background-color: #0e8af7;
}
.wpo-pricing-section .wpo-pricing-wrap .col:last-child .wpo-pricing-item {
margin-bottom: 0;
}
/* 3.8 wpo-blog-section */
.wpo-blog-section {
background: #fff;
position: relative;
overflow: hidden;
z-index: 1;
padding-bottom: 360px;
}
@media (max-width: 991px) {
.wpo-blog-section {
padding-bottom: 90px;
}
}
@media (max-width: 767px) {
.wpo-blog-section {
padding-bottom: 80px;
}
}
.wpo-blog-section .shadow-shape {
position: absolute;
bottom: -75%;
right: 0;
z-index: -1;
}
.wpo-blog-section .shadow-shape svg circle {
fill: #0e8af7;
}
.wpo-blog-section .wpo-blog-wrap {
position: relative;
z-index: 111;
}
.wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-text {
padding: 30px;
padding-left: 0;
}
.wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-text h2 {
font-size: 25px;
font-weight: 600;
line-height: 35px;
margin-bottom: 20px;
margin-top: 15px;
}
@media (max-width: 1400px) {
.wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-text h2 {
font-size: 22px;
}
}
@media (max-width: 767px) {
.wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-text h2 {
font-size: 20px;
}
}
.wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-text h2 a {
color: #202020;
}
.wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-text h2 a:hover {
color: #3faf60;
}
.wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-text ul {
list-style: none;
}
.wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-text ul li {
color: #fff;
padding: 5px 10px;
background: #3c3c3c;
display: inline-block;
font-size: 14px;
}
.wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-text a.details {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #202020;
font-weight: 500;
font-size: 16px;
line-height: 19px;
padding: 0;
padding-left: 30px;
position: relative;
display: inline-block;
}
.wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-text a.details:hover {
color: #fff;
background: transparent;
}
.wpo-blog-section
.wpo-blog-wrap
.wpo-blog-item
.wpo-blog-text
a.details:before {
position: absolute;
left: -5px;
top: 1px;
content: "\f10d";
font-family: "Flaticon";
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-text a.details:hover {
color: #dfca08;
}
.wpo-blog-section
.wpo-blog-wrap
.wpo-blog-item
.wpo-blog-text
a.details:hover:before {
left: 0;
}
.wpo-blog-section .wpo-blog-wrap .wpo-blog-item .wpo-blog-img img {
width: 100%;
}
.wpo-blog-section .wpo-blog-wrap .owl-nav [class*="owl-"] {
background: #fff;
-webkit-box-shadow: 0 2px 10px rgba(14, 29, 44, 0.15);
box-shadow: 0 2px 10px rgba(14, 29, 44, 0.15);
width: 60px;
height: 60px;
line-height: 50px;
color: #202020;
padding: 0;
font-size: 20px;
margin: 0;
border-radius: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
z-index: 1;
border: 0;
}
@media (max-width: 767px) {
.wpo-blog-section .wpo-blog-wrap .owl-nav [class*="owl-"] {
display: none;
}
}
.wpo-blog-section .wpo-blog-wrap .owl-nav [class*="owl-"].owl-next {
position: absolute;
top: 15%;
-webkit-transform: rotate(325deg);
transform: rotate(325deg);
right: -100px;
border-radius: 50%;
}
@media (max-width: 1500px) {
.wpo-blog-section .wpo-blog-wrap .owl-nav [class*="owl-"].owl-next {
right: -20px;
}
}
.wpo-blog-section .wpo-blog-wrap .owl-nav [class*="owl-"].owl-next:hover {
background: #0e8af7;
color: #fff;
}
.wpo-blog-section .wpo-blog-wrap .owl-nav [class*="owl-"].owl-next:focus {
outline: none;
}
.wpo-blog-section .wpo-blog-wrap .owl-nav [class*="owl-"].owl-next i {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.wpo-blog-section .wpo-blog-wrap .owl-nav [class*="owl-"].owl-prev {
position: absolute;
top: 15%;
-webkit-transform: rotate(325deg);
transform: rotate(325deg);
left: -100px;
border-radius: 50%;
}
@media (max-width: 1500px) {
.wpo-blog-section .wpo-blog-wrap .owl-nav [class*="owl-"].owl-prev {
left: -20px;
}
}
.wpo-blog-section .wpo-blog-wrap .owl-nav [class*="owl-"].owl-prev:hover {
background: #0e8af7;
color: #fff;
}
.wpo-blog-section .wpo-blog-wrap .owl-nav [class*="owl-"].owl-prev:focus {
outline: none;
}
.wpo-contact-area {
background: #fff;
padding-bottom: 40px !important;
position: relative;
overflow: hidden;
z-index: 1;
}
.wpo-contact-area .shape-wk {
position: absolute;
top: 50%;
left: 0;
z-index: -1;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.wpo-contact-area .shape-wk svg circle {
fill: #dd584f;
}
.wpo-wpo-contact-form-map .wpo-contact-form {
padding: 60px 65px 30px;
-webkit-box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
border-radius: 5px;
background: #fff;
border: 1px solid #ebebeb;
}
@media (max-width: 1199px) {
.wpo-wpo-contact-form-map .wpo-contact-form {
margin-bottom: 60px;
}
}
@media (max-width: 600px) {
.wpo-wpo-contact-form-map .wpo-contact-form {
padding: 40px 35px;
}
}
.wpo-wpo-contact-form-map .wpo-contact-form h2 {
font-size: 30px;
font-size: 1.875rem;
font-weight: 600;
margin: 0 0 1em;
text-align: center;
color: #202020;
}
@media (max-width: 767px) {
.wpo-wpo-contact-form-map .wpo-contact-form h2 {
font-size: 25px;
font-size: 1.5625rem;
}
}
.wpo-wpo-contact-form-map form input,
.wpo-wpo-contact-form-map form select,
.wpo-wpo-contact-form-map form textarea {
background: transparent;
width: 100%;
height: 50px;
border: 0;
border-bottom: 1px solid #ebebeb;
border-radius: 0;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding-left: 0;
color: #fff;
}
@media (max-width: 991px) {
.wpo-wpo-contact-form-map form input,
.wpo-wpo-contact-form-map form select,
.wpo-wpo-contact-form-map form textarea {
height: 45px;
}
}
.wpo-wpo-contact-form-map form input:focus,
.wpo-wpo-contact-form-map form select:focus,
.wpo-wpo-contact-form-map form textarea:focus {
border-color: #dfca08;
outline: none;
}
.wpo-wpo-contact-form-map form textarea {
height: 172px;
}
.wpo-wpo-contact-form-map .errorMessage {
color: red;
font-size: 14px;
margin-top: 10px;
}
.wpo-wpo-contact-form-map form {
overflow: hidden;
}
.wpo-wpo-contact-form-map form select {
display: inline-block;
cursor: pointer;
opacity: 1;
margin-left: -5px;
}
.wpo-wpo-contact-form-map form select option {
color: #202020;
}
.wpo-wpo-contact-form-map form > div {
margin-bottom: 15px;
}
.wpo-wpo-contact-form-map .submit-area {
width: 100%;
float: none;
clear: both;
text-align: center;
margin-top: 30px;
}
.wpo-contact-form .theme-btn,
.wpo-contact-form .view-cart-btn {
color: #fff;
outline: none;
margin-top: 20px;
border-radius: 40px;
}
.wpo-wpo-contact-form-map form p {
color: #dfca08;
font-size: 14px;
}
.wpo-wpo-contact-form-map .form-field {
margin-bottom: 21px;
}
.wpo-wpo-contact-form-map .wpo-contact-form {
margin-bottom: 60px;
}
.wpo-wpo-contact-form-map .info-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.wpo-wpo-contact-form-map .info-icon {
width: 90px;
height: 90px;
background: #fff;
line-height: 90px;
border-radius: 50%;
-webkit-box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
text-align: center;
margin-right: 20px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.info-item {
-webkit-box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
padding: 33px 40px;
margin-bottom: 30px;
background: #fff;
border: 1px solid #ebebeb;
border-radius: 5px;
}
.info-item h2 {
font-size: 24px;
color: #202020;
font-weight: 600;
margin-top: 0;
margin-bottom: 15px;
}
.wpo-contact-info {
max-width: 395px;
padding-left: 20px;
}
.info-icon .fi:before {
font-size: 40px;
color: #dfca08;
line-height: unset;
}
.info-text span {
color: #888888;
font-size: 18px;
font-weight: 300;
}
@media (max-width: 991px) {
.wpo-wpo-contact-form-map {
padding: 0px 10px;
}
.wpo-contact-info {
padding-left: 0;
}
.wpo-wpo-contact-form-map .wpo-contact-form {
padding: 60px 25px 30px;
}
}
@media (max-width: 590px) {
.info-item h2 {
font-size: 20px;
}
.info-text span {
font-size: 15px;
}
.wpo-wpo-contact-form-map form textarea {
height: 100px;
}
.info-item {
padding: 32px 25px;
}
}
.wpo-wpo-contact-form-map form ::-webkit-input-placeholder {
font-style: 16px;
font-style: normal;
color: #585858;
}
.wpo-wpo-contact-form-map form :-moz-placeholder {
font-style: 16px;
font-style: normal;
color: #585858;
}
.wpo-wpo-contact-form-map form ::-moz-placeholder {
font-style: 16px;
font-style: normal;
color: #585858;
}
.wpo-wpo-contact-form-map form :-ms-input-placeholder {
font-style: 16px;
font-style: normal;
color: #585858;
}
.wpo-wpo-contact-form-map form .form-submit {
text-align: center;
}
.wpo-wpo-contact-form-map form button {
padding-bottom: 16px;
}
/* 5.1 wpo-about-area-s2 */
.wpo-about-area-s2 {
position: relative;
}
.wpo-about-area-s2 .wpo-about-img {
position: relative;
padding: 30px;
background: #fffbfb;
border-radius: 6px;
}
.wpo-about-area-s2 .wpo-about-img .icon-1,
.wpo-about-area-s2 .wpo-about-img .icon-2,
.wpo-about-area-s2 .wpo-about-img .icon-3 {
position: absolute;
left: 0;
top: 2%;
width: 110px;
height: 110px;
padding: 20px;
background: #fff;
border-radius: 25px;
-webkit-animation: bounceTop 3s linear infinite;
animation: bounceTop 3s linear infinite;
-webkit-box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
}
.wpo-about-area-s2 .wpo-about-img .icon-1 img,
.wpo-about-area-s2 .wpo-about-img .icon-2 img,
.wpo-about-area-s2 .wpo-about-img .icon-3 img {
border-radius: 0;
}
@media (max-width: 991px) {
.wpo-about-area-s2 .wpo-about-img .icon-1,
.wpo-about-area-s2 .wpo-about-img .icon-2,
.wpo-about-area-s2 .wpo-about-img .icon-3 {
width: 95px;
height: 95px;
padding: 15px;
border-radius: 15px;
}
}
@media (max-width: 575px) {
.wpo-about-area-s2 .wpo-about-img .icon-1,
.wpo-about-area-s2 .wpo-about-img .icon-2,
.wpo-about-area-s2 .wpo-about-img .icon-3 {
width: 70px;
height: 70px;
padding: 15px;
border-radius: 15px;
}
}
.wpo-about-area-s2 .wpo-about-img .icon-2 {
left: auto;
right: 0;
}
.wpo-about-area-s2 .wpo-about-img .icon-3 {
left: auto;
right: 0;
top: auto;
bottom: 2%;
}
@media (max-width: 991px) {
.wpo-about-area-s2 .wpo-about-img .icon-3 {
right: 0;
}
}
@media (max-width: 575px) {
.wpo-about-area-s2 .wpo-about-img .icon-3 {
left: auto;
right: 0;
top: auto;
}
}
.wpo-about-area-s2 .wpo-about-img .project {
position: absolute;
left: 0;
bottom: 2%;
padding: 5px 20px;
background: #fff;
border-radius: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-animation: bounceTop 3s linear infinite;
animation: bounceTop 3s linear infinite;
-webkit-box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
}
.wpo-about-area-s2 .wpo-about-img .project .icon .fi {
margin-right: 10px;
}
.wpo-about-area-s2 .wpo-about-img .project .icon .fi:before {
font-size: 50px;
color: #0e8af7;
}
@media (max-width: 575px) {
.wpo-about-area-s2 .wpo-about-img .project .icon .fi:before {
font-size: 40px;
}
}
.wpo-about-area-s2 .wpo-about-img .project .p-text h3 {
font-size: 25px;
margin-bottom: 0px;
color: #202020;
}
@media (max-width: 575px) {
.wpo-about-area-s2 .wpo-about-img .project .p-text h3 {
font-size: 20px;
}
}
.wpo-about-area-s2 .wpo-about-img .project .p-text p {
font-size: 15px;
margin-bottom: 0;
color: #585858;
}
/* 5.2 wpo-service-area-s2 */
.wpo-service-area-s2 .wpo-service-wrap .wpo-service-item {
-webkit-box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
border: 0;
background: none;
}
/* 5.3 wpo-work-area-s2 */
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item {
text-align: center;
padding: 30px;
}
@media (max-width: 1200px) {
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item {
padding: 25px;
}
}
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul {
display: block;
}
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.date {
display: block;
}
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.link {
text-align: center;
}
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li {
margin-bottom: 20px;
}
@media (max-width: 1200px) {
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li {
margin-bottom: 15px;
}
}
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li:last-child {
margin-bottom: 0;
}
.wpo-work-area-s2 .wpo-work-wrap .wpo-work-item ul li.position span span {
margin-top: 0;
}
/* 5.4 partners-section */
.partners-section {
background: #fff;
padding: 85px 0;
}
.partners-section .partners-slider .grid img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
margin: 0 auto;
}
.partners-section .partners-slider .owl-item img {
width: unset;
}
.partners-section .partners-slider .owl-nav {
display: none;
}
/*=====================================================
6. wpo-service-single
======================================================*/
.wpo-service-single-area {
background: #fffbfb;
}
.wpo-service-single-area .wpo-service-single-wrap .wpo-service-single-title h3 {
font-weight: 500;
font-size: 35px;
line-height: 130.5%;
margin-bottom: 20px;
}
@media (max-width: 767px) {
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-single-title
h3 {
font-size: 25px;
}
}
.wpo-service-single-area .wpo-service-single-wrap .wpo-service-single-item {
margin-bottom: 40px;
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-single-item
.wpo-service-single-main-img {
margin-bottom: 30px;
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-single-item:last-child {
margin-bottom: 0;
}
.wpo-service-single-area .wpo-service-single-wrap .list-widget {
max-width: 590px;
}
.wpo-service-single-area .wpo-service-single-wrap .list-widget ul {
list-style: none;
}
.wpo-service-single-area .wpo-service-single-wrap .list-widget ul li {
padding: 10px 0;
padding-left: 35px;
position: relative;
}
.wpo-service-single-area .wpo-service-single-wrap .list-widget ul li:before {
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
background: rgba(89, 195, 120, 0.1);
content: "\e64c";
font-family: "themify";
text-align: center;
color: #0e8af7;
font-size: 14px;
}
.wpo-service-single-area .wpo-service-single-wrap .wpo-p-details-img {
margin-bottom: 10px;
}
.wpo-service-single-area .wpo-service-single-wrap .wpo-service-area {
padding-bottom: 0;
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-area
.wpo-service-item {
padding: 20px;
border: 1px solid #ebebeb;
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-area
.wpo-service-item
.fi:before {
font-size: 40px;
}
@media (max-width: 1200px) {
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-area
.wpo-service-item {
padding: 20px 10px;
}
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-area
.wpo-service-item
h2 {
font-weight: 600;
font-size: 22px;
margin-bottom: 12px;
margin-top: 10px;
}
@media (max-width: 1400px) {
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-area
.wpo-service-item
h2 {
font-size: 19px;
margin-bottom: 10px;
}
}
@media (max-width: 1200px) {
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-area
.wpo-service-item
h2 {
font-size: 17px;
margin-bottom: 10px;
}
}
@media (max-width: 991px) {
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-area
.wpo-service-item
h2 {
font-size: 22px;
}
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-area
.wpo-service-item
p {
margin-bottom: 5px;
}
.wpo-service-single-area .wpo-service-single-wrap .wpo-service-contact-area {
padding: 30px;
-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 20px;
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-contact-area
.wpo-contact-title {
margin-bottom: 30px;
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-contact-area
.wpo-contact-form-area
.col {
margin-bottom: 30px;
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-contact-area
.wpo-contact-form-area
.form-control {
height: 50px;
border: 0;
border-bottom: 0;
border-radius: 0;
background: #f1f1f1;
color: #888888;
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-contact-area
.wpo-contact-form-area
.form-control:focus {
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-contact-area
.wpo-contact-form-area
.form-control::-webkit-input-placeholder {
/* Edge */
color: #888888;
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-contact-area
.wpo-contact-form-area
.form-control:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #888888;
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-contact-area
.wpo-contact-form-area
.form-control::-ms-input-placeholder {
color: #888888;
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-contact-area
.wpo-contact-form-area
.form-control::placeholder {
color: #888888;
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-contact-area
.wpo-contact-form-area
textarea.form-control {
height: 120px;
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-contact-area
.wpo-contact-form-area
select.form-control {
background: #f1f1f1 url(../images/select-icon2.png) no-repeat
calc(100% - 15px) center;
}
.wpo-service-single-area
.wpo-service-single-wrap
.wpo-service-contact-area
.wpo-contact-form-area
.submit-area
button {
border-radius: 6px;
}
/*====================================================
7. wpo-protfolio-area
======================================================*/
.wpo-protfolio-area {
padding-bottom: 90px;
background: #fffbfb;
}
.wpo-protfolio-area-3 {
padding-bottom: 70px;
background: #fffbfb;
}
.wpo-protfolio-text h2 {
font-size: 40px;
color: #fff;
}
.wpo-protfolio-text span {
font-size: 18px;
color: #fff;
display: block;
margin-bottom: 20px;
font-weight: 300;
}
.wpo-protfolio-text a {
display: inline-block;
font-size: 18px;
color: #fff;
padding: 10px 50px;
background: rgba(255, 255, 255, 0.35);
position: relative;
border-radius: 40px;
}
.wpo-protfolio-text a:after {
position: absolute;
left: -5px;
bottom: -5px;
width: 105%;
height: 120%;
content: "";
border-radius: 40px;
border: 1px solid #fff;
}
.wpo-protfolio-text a:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
opacity: 0;
z-index: 9;
content: "";
-webkit-transition: all 0.3s;
transition: all 0.3s;
border-radius: 40px;
}
.wpo-protfolio-text a:hover:before {
left: 0;
opacity: 0.3;
}
.wpo-protfolio-single,
.wpo-blog-img {
position: relative;
margin-bottom: 1px;
overflow: hidden;
}
.wpo-protfolio-text {
padding: 40px;
position: absolute;
left: 0;
bottom: 30px;
}
.wpo-protfolio-right {
margin-top: -200px;
}
.wpo-protfolio-area .section-title {
margin-bottom: 120px;
}
.wpo-protfolio-img img {
width: 100%;
}
@media (max-width: 767px) {
.wpo-protfolio-area .section-title {
margin-bottom: 40px;
}
.wpo-protfolio-right {
margin-top: 0;
}
.protfolio-btn {
text-align: center;
margin-top: 15px;
}
}
@media (max-width: 590px) {
.protfolio-btn a {
font-size: 20px;
}
}
.sortable-gallery {
overflow: hidden;
}
.gallery-filters {
text-align: center;
margin-bottom: 60px;
}
.gallery-filters ul {
display: inline-block;
overflow: hidden;
list-style: none;
text-align: center;
}
.gallery-filters ul li {
display: inline-block;
}
.gallery-filters ul li a {
font-weight: 600;
color: #888888;
display: block;
text-transform: capitalize;
}
.gallery-filters ul > li + li {
margin-left: 30px;
}
.gallery-filters ul li a.current {
color: #0e8af7;
}
@media (max-width: 500px) {
.gallery-filters ul > li + li {
margin-left: 10px;
margin-bottom: 5px;
}
}
.wpo-protfolio-area .wpo-protfolio-single {
margin-bottom: 30px;
}
.wpo-protfolio-area .wpo-protfolio-img {
position: relative;
}
.wpo-protfolio-area .wpo-protfolio-img:before {
position: absolute;
left: 0;
top: 0;
content: "";
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.wpo-protfolio-area .wpo-protfolio-single:hover .wpo-protfolio-img:before {
height: 100%;
opacity: 1;
visibility: visible;
}
.wpo-protfolio-area .wpo-protfolio-text {
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
bottom: -200px;
}
.wpo-protfolio-area .wpo-protfolio-single:hover .wpo-protfolio-text {
opacity: 1;
visibility: visible;
bottom: 0;
}
.wpo-protfolio-area-3 .wpo-protfolio-text {
position: relative;
padding: 30px 0;
bottom: 0;
}
.wpo-protfolio-area-3 .wpo-protfolio-text h2 {
color: #131058;
font-weight: 400;
margin-top: 0;
}
.wpo-protfolio-area-3 .wpo-protfolio-text span {
color: #666;
}
.protfolio-slide-area .wpo-protfolio-single {
position: relative;
margin-bottom: 30px;
overflow: hidden;
z-index: 9;
}
.protfolio-slide-area .wpo-protfolio-single:after {
position: absolute;
left: 0;
top: 0;
width: 0%;
height: 100%;
content: "";
background: rgba(8, 8, 78, 0.8);
-webkit-transition: all 0.3s;
transition: all 0.3s;
z-index: 9;
}
.protfolio-slide-area .wpo-protfolio-single:hover:after {
width: 100%;
}
.protfolio-slide-area .protfolio-btn {
text-align: center;
margin-top: 0;
}
.protfolio-slide-area .thumb-text {
position: absolute;
right: 10px;
top: -30%;
-webkit-transition: all 0.6s;
transition: all 0.6s;
opacity: 0;
visibility: hidden;
z-index: 999;
}
.protfolio-slide-area .thumb-text span {
font-size: 200px;
color: #fff;
font-weight: 700;
line-height: 190px;
font-family: "Conv_Now-Bold";
z-index: 999;
}
.protfolio-slide-area .wpo-protfolio-text {
bottom: -50%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
opacity: 0;
visibility: hidden;
z-index: 999;
}
.protfolio-slide-area .wpo-protfolio-single:hover .wpo-protfolio-text {
bottom: 0;
opacity: 1;
visibility: visible;
}
.protfolio-slide-area .wpo-protfolio-single:hover .thumb-text {
top: 0;
opacity: 1;
visibility: visible;
}
.gallery-active .owl-item.active {
position: relative;
}
.gallery-active .owl-nav button.owl-next {
left: 52%;
bottom: -70px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.gallery-active .owl-nav button {
position: absolute;
left: 48%;
bottom: -70px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
height: 50px;
width: 50px;
line-height: 46px;
text-align: center;
background: transparent;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-shadow: 0px 16px 32px 0px rgba(184, 184, 184, 0.3);
box-shadow: 0px 16px 32px 0px rgba(184, 184, 184, 0.3);
background: transparent;
}
@media (max-width: 1200px) {
.gallery-active .owl-nav button {
left: 43%;
}
}
@media (max-width: 767px) {
.gallery-active .owl-nav button {
left: 35%;
}
}
.gallery-active .owl-nav button {
background: transparent;
border: 0;
color: #333;
text-decoration: none;
border-radius: 50%;
}
.gallery-active .owl-nav button:hover {
background: #0e8af7;
color: #fff;
text-decoration: none;
border-radius: 50%;
}
.protfolio-slide-area .owl-carousel .owl-item img {
height: 475px;
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 767px) {
.protfolio-slide-area .owl-carousel .owl-item img {
height: 375px;
}
}
.wpo-protfolio-area-3 .wpo-protfolio-text h2 a {
color: #202020;
padding: 0;
font-size: 40px;
background: none;
}
.wpo-protfolio-area-3 .wpo-protfolio-text h2 a::after,
.wpo-protfolio-area-3 .wpo-protfolio-text h2 a::before {
display: none;
}
.wpo-protfolio-area-3 .wpo-protfolio-text h2 a:hover {
color: #0e8af7;
}
.wpo-protfolio-area-3 .wpo-protfolio-text span {
color: #888888;
}
/*=====================================================
8. wpo-project-single
======================================================*/
.wpo-project-single-area {
background: #fffbfb;
}
.wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-title h3 {
font-weight: 500;
font-size: 35px;
line-height: 130.5%;
margin-bottom: 20px;
}
@media (max-width: 767px) {
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-title
h3 {
font-size: 25px;
}
}
.wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-item {
margin-bottom: 40px;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item:last-child {
margin-bottom: 0;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-main-img {
margin-bottom: 30px;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-main-img
.owl-controls {
width: 100%;
margin: 0;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-main-img
.owl-nav
[class*="owl-"]:hover {
background: #0e8af7;
color: #fff;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-main-img
.owl-nav
[class*="owl-"] {
background: #fff;
width: 50px;
height: 50px;
line-height: 58px;
padding: 0;
margin: 0;
border-radius: 50%;
color: #0e8af7;
-webkit-transition: all 0.3s;
transition: all 0.3s;
border: 0;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-main-img
.owl-nav
[class*="owl-"]
.fi::before {
font-size: 20px;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-main-img
.owl-nav
.owl-prev,
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-main-img
.owl-nav
.owl-next {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-main-img
.owl-nav
.owl-prev {
left: 15px;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-main-img
.owl-nav
.owl-next {
right: 15px;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-content-des-right {
max-width: 380px;
-ms-flex-preferred-size: 35%;
flex-basis: 35%;
margin-left: auto;
margin-bottom: 50px;
-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
@media (max-width: 1200px) {
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-content-des-right {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
margin-bottom: 40px;
}
}
@media (max-width: 991px) {
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-content-des-right {
margin-left: 0;
max-width: 100%;
margin-top: 20px;
}
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-content-des-right
ul {
list-style: none;
padding: 50px 30px;
-webkit-box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
box-shadow: 0px 2px 10px rgba(14, 29, 44, 0.15);
}
@media (max-width: 575px) {
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-content-des-right
ul {
padding: 50px 20px;
}
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-content-des-right
ul
li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 10px 0;
font-size: 16px;
color: #202020;
font-weight: 600;
position: relative;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-weight: 600;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-content-des-right
ul
li
span {
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
color: #888888;
font-weight: 400;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-content-des-right
ul
li:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item
.wpo-project-single-content-des-right
ul
li:first-child {
padding-top: 0;
}
.wpo-project-single-area .wpo-project-single-wrap .list-widget ul {
list-style: none;
}
.wpo-project-single-area .wpo-project-single-wrap .list-widget ul li {
padding: 7px 0;
padding-left: 35px;
position: relative;
}
.wpo-project-single-area .wpo-project-single-wrap .list-widget ul li:before {
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
background: rgba(89, 195, 120, 0.1);
content: "\e64c";
font-family: "themify";
text-align: center;
color: #0e8af7;
font-size: 14px;
}
.wpo-project-single-area .wpo-project-single-wrap .wpo-p-details-img {
margin-bottom: 10px;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item-quote {
padding: 45px;
background: #fff;
text-align: center;
border-radius: 15px;
}
@media (max-width: 991px) {
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item-quote {
padding: 20px;
margin-top: 30px;
}
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item-quote
p {
font-size: 22px;
margin-bottom: 30px;
color: #888888;
line-height: 44px;
}
@media (max-width: 991px) {
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item-quote
p {
font-size: 16px;
margin-bottom: 20px;
}
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item-quote
span {
font-size: 22px;
}
@media (max-width: 991px) {
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item-quote
span {
font-size: 16px;
}
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-single-item-quote
span
span {
color: #0e8af7;
}
@media (max-width: 991px) {
.wpo-project-single-area .wpo-project-single-wrap .list-widget-s {
margin-top: 30px;
}
}
.wpo-project-single-area .wpo-project-single-wrap .wpo-project-single-gallery {
margin-bottom: 30px;
}
.wpo-project-single-area .wpo-project-single-wrap .wpo-project-contact-area {
padding: 30px;
-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 20px;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-contact-area
.wpo-contact-title {
margin-bottom: 30px;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-contact-area
.wpo-contact-form-area
.col {
margin-bottom: 30px;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-contact-area
.wpo-contact-form-area
.form-control {
height: 50px;
border: 0;
border-bottom: 0;
border-radius: 0;
background: #f1f1f1;
color: #888888;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-contact-area
.wpo-contact-form-area
.form-control:focus {
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-contact-area
.wpo-contact-form-area
.form-control::-webkit-input-placeholder {
/* Edge */
color: #888888;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-contact-area
.wpo-contact-form-area
.form-control:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #888888;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-contact-area
.wpo-contact-form-area
.form-control::-ms-input-placeholder {
color: #888888;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-contact-area
.wpo-contact-form-area
.form-control::placeholder {
color: #888888;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-contact-area
.wpo-contact-form-area
textarea.form-control {
height: 120px;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-contact-area
.wpo-contact-form-area
select.form-control {
background: #f1f1f1 url(../images/select-icon2.png) no-repeat
calc(100% - 15px) center;
}
.wpo-project-single-area
.wpo-project-single-wrap
.wpo-project-contact-area
.wpo-contact-form-area
.submit-area
button {
border-radius: 6px;
}
.wpo-project-single-area .wpo-project-area-s2 {
background: none;
padding: 0;
}
.wpo-project-single-area .wpo-project-area-s2 .wpo-project-wrap {
padding-bottom: 0;
}
.wpo-project-single-area
.wpo-project-area-s2
.wpo-project-wrap
.wpo-project-item {
position: relative;
overflow: hidden;
}
@media (max-width: 991px) {
.wpo-project-single-area
.wpo-project-area-s2
.wpo-project-wrap
.wpo-project-item {
margin-bottom: 30px;
}
}
.wpo-project-single-area
.wpo-project-area-s2
.wpo-project-wrap
.wpo-project-item
.wpo-project-img
img {
width: 100%;
}
.wpo-project-single-area
.wpo-project-area-s2
.wpo-project-wrap
.wpo-project-item
.wpo-project-text {
position: absolute;
left: 0;
bottom: -100%;
padding: 20px;
width: 100%;
height: 100%;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background: rgba(14, 29, 44, 0.7);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.wpo-project-single-area
.wpo-project-area-s2
.wpo-project-wrap
.wpo-project-item
.wpo-project-text
h2 {
font-size: 20px;
line-height: 30px;
}
.wpo-project-single-area
.wpo-project-area-s2
.wpo-project-wrap
.wpo-project-item:hover
.wpo-project-text {
bottom: 0;
}
/*--------------------------------------------------------------
9. wpo-blog-pg-section
--------------------------------------------------------------*/
.wpo-blog-pg-section {
background: #fffbfb;
/*** format-standard ***/
/*** format-gallery ***/
/*** format-quote ***/
/*** format-video ***/
}
@media (min-width: 1440px) {
.wpo-blog-pg-section .container {
max-width: 1320px;
}
}
.wpo-blog-pg-section .wpo-blog-content .post {
margin-bottom: 70px;
}
@media (max-width: 991px) {
.wpo-blog-pg-section .wpo-blog-content .post {
margin-bottom: 50px;
}
}
@media (max-width: 767px) {
.wpo-blog-pg-section .wpo-blog-content .post {
margin-bottom: 40px;
}
}
.wpo-blog-pg-section .entry-meta {
list-style: none;
overflow: hidden;
margin: 35px 0;
}
@media (max-width: 767px) {
.wpo-blog-pg-section .entry-meta {
margin: 25px 0;
}
}
.wpo-blog-pg-section .entry-meta ul {
list-style: none;
}
.wpo-blog-pg-section .entry-meta ul li {
font-weight: 500;
font-size: 14px;
font-size: 0.93333rem;
float: left;
text-transform: uppercase;
}
.wpo-blog-pg-section .entry-meta ul li a {
color: #888888;
}
.wpo-blog-pg-section .entry-meta ul li a:hover {
color: #0e8af7;
}
.wpo-blog-pg-section .entry-meta ul li i {
position: relative;
top: 0px;
margin-right: 3px;
}
.wpo-blog-pg-section .entry-meta ul li i.fi:before {
font-size: 15px;
}
.wpo-blog-pg-section .entry-meta ul li + li {
margin-left: 20px;
padding-left: 20px;
position: relative;
}
.wpo-blog-pg-section .entry-meta ul li + li:before {
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 7px;
height: 7px;
content: "";
background: #0e8af7;
border-radius: 50%;
}
@media (max-width: 440px) {
.wpo-blog-pg-section .entry-meta ul li + li:before {
display: none;
}
}
@media (max-width: 440px) {
.wpo-blog-pg-section .entry-meta ul li + li {
margin-left: 0;
padding-left: 0;
}
}
@media (max-width: 767px) {
.wpo-blog-pg-section .entry-meta ul li {
font-size: 12px;
font-size: 0.8rem;
}
}
@media (max-width: 440px) {
.wpo-blog-pg-section .entry-meta ul li {
float: none;
display: block;
margin-bottom: 5px;
}
}
.wpo-blog-pg-section .post h3 {
font-size: 34px;
font-size: 2.26667rem;
line-height: 1.2em;
font-weight: 600;
margin: -0.27em 0 0.7em;
font-family: "Inter", sans-serif;
font-weight: 600;
}
@media (max-width: 991px) {
.wpo-blog-pg-section .post h3 {
font-size: 25px;
font-size: 1.66667rem;
}
}
@media (max-width: 767px) {
.wpo-blog-pg-section .post h3 {
font-size: 22px;
font-size: 1.46667rem;
}
}
.wpo-blog-pg-section .post h3 a {
color: #202020;
}
.wpo-blog-pg-section .post h3 a:hover {
color: #0e8af7;
}
.wpo-blog-pg-section .post p {
margin-bottom: 1.5em;
}
@media (max-width: 991px) {
.wpo-blog-pg-section .post p {
font-size: 16px;
font-size: 1.06667rem;
}
}
.wpo-blog-pg-section .post a.read-more {
text-decoration: underline;
color: #888888;
text-transform: uppercase;
font-family: "Inter", sans-serif;
font-size: 15px;
font-weight: 600;
}
.wpo-blog-pg-section .post a.read-more:hover {
color: #0e8af7;
}
.wpo-blog-pg-section .entry-media img {
width: 100%;
}
.wpo-blog-pg-section .format-standard,
.wpo-blog-pg-section .format-quote {
background-color: #f3f3f3;
padding: 25px 35px 45px;
}
@media (max-width: 767px) {
.wpo-blog-pg-section .format-standard,
.wpo-blog-pg-section .format-quote {
padding: 25px 20px 45px;
}
}
.wpo-blog-pg-section .format-standard {
position: relative;
}
.wpo-blog-pg-section .format-standard:before {
position: absolute;
right: 15px;
top: 5px;
content: "\f11d";
font-family: "flaticon";
font-size: 90px;
line-height: 80px;
color: #ebebeb;
}
.wpo-blog-pg-section .format-gallery {
position: relative;
}
.wpo-blog-pg-section .format-gallery .owl-controls {
width: 100%;
margin: 0;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.wpo-blog-pg-section .format-gallery .owl-nav [class*="owl-"]:hover {
background: #0e8af7;
color: #fff;
}
.wpo-blog-pg-section .format-gallery .owl-nav [class*="owl-"] {
background: #1e1d1d;
width: 50px;
height: 50px;
line-height: 58px;
padding: 0;
margin: 0;
border-radius: 50%;
color: #0e8af7;
-webkit-transition: all 0.3s;
transition: all 0.3s;
border: 0;
}
.wpo-blog-pg-section .format-gallery .owl-nav [class*="owl-"] .fi::before {
font-size: 20px;
}
.wpo-blog-pg-section .format-gallery .owl-nav .owl-prev,
.wpo-blog-pg-section .format-gallery .owl-nav .owl-next {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.wpo-blog-pg-section .format-gallery .owl-nav .owl-prev {
left: 15px;
}
.wpo-blog-pg-section .format-gallery .owl-nav .owl-next {
right: 15px;
}
.wpo-blog-pg-section .format-quote {
text-align: center;
padding: 80px 60px;
position: relative;
}
@media (max-width: 767px) {
.wpo-blog-pg-section .format-quote {
padding: 40px 20px;
}
}
.wpo-blog-pg-section .format-quote p {
margin-bottom: 0;
}
.wpo-blog-pg-section .format-quote:before {
font-family: "Flaticon";
content: "\f120";
font-size: 250px;
font-size: 16.66667rem;
color: #ecf3fb;
margin-left: 0;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.wpo-blog-pg-section .format-quote h3,
.wpo-blog-pg-section .format-quote p {
position: relative;
}
.wpo-blog-pg-section .format-video .video-holder {
position: relative;
text-align: center;
}
.wpo-blog-pg-section .format-video .video-holder:before {
content: "";
background-color: #fffbfb;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0.3;
}
.wpo-blog-pg-section .format-video .video-holder:hover:before {
opacity: 0.5;
}
.wpo-blog-pg-section .format-video .video-holder a {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 63px;
height: 63px;
line-height: 63px;
background: #fff;
border-radius: 50%;
z-index: 1;
}
.wpo-blog-pg-section .format-video .video-holder a:before {
position: absolute;
left: -12px;
top: -12px;
width: 140%;
height: 140%;
background: rgba(255, 255, 255, 0.3);
content: "";
-webkit-animation: save-the-date-pulse 1s infinite;
animation: save-the-date-pulse 1s infinite;
border-radius: 50%;
z-index: -1;
}
.wpo-blog-pg-section .format-video .video-holder .fi:before {
font-size: 20px;
font-size: 1.33333rem;
color: #0e8af7;
}
@media screen and (min-width: 1200px) {
.blog-pg-left-sidebar .blog-sidebar {
padding-right: 45px;
padding-left: 0;
}
}
@media screen and (min-width: 1200px) {
.blog-pg-fullwidth .wpo-blog-content {
padding: 0;
}
}
@-webkit-keyframes save-the-date-pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(0.95, 0.95, 0.95);
transform: scale3d(0.95, 0.95, 0.95);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes save-the-date-pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(0.95, 0.95, 0.95);
transform: scale3d(0.95, 0.95, 0.95);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
/*--------------------------------------------------------------
10. wpo-blog-single-section
--------------------------------------------------------------*/
.wpo-blog-single-section {
background: #fffbfb;
/*** tag-share ***/
/*** author-box ***/
/*** more-posts ***/
/*** comments area ***/
/*** comment-respond ***/
}
@media (min-width: 1440px) {
.wpo-blog-single-section .container {
max-width: 1320px;
}
}
.wpo-blog-single-section .entry-meta {
list-style: none;
overflow: hidden;
margin: 35px 0;
}
@media (max-width: 767px) {
.wpo-blog-single-section .entry-meta {
margin: 25px 0;
}
}
.wpo-blog-single-section .entry-meta ul {
list-style: none;
}
.wpo-blog-single-section .entry-meta ul li {
font-weight: 500;
font-size: 14px;
font-size: 0.93333rem;
float: left;
text-transform: uppercase;
}
.wpo-blog-single-section .entry-meta ul li a {
color: #888888;
}
.wpo-blog-single-section .entry-meta ul li a:hover {
color: #0e8af7;
}
.wpo-blog-single-section .entry-meta ul li i {
position: relative;
top: 0px;
margin-right: 3px;
}
.wpo-blog-single-section .entry-meta ul li i.fi:before {
font-size: 15px;
}
.wpo-blog-single-section .entry-meta ul li + li {
margin-left: 20px;
padding-left: 20px;
position: relative;
}
.wpo-blog-single-section .entry-meta ul li + li:before {
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 7px;
height: 7px;
content: "";
background: #0e8af7;
border-radius: 50%;
}
@media (max-width: 440px) {
.wpo-blog-single-section .entry-meta ul li + li:before {
display: none;
}
}
@media (max-width: 440px) {
.wpo-blog-single-section .entry-meta ul li + li {
margin-left: 0;
padding-left: 0;
}
}
@media (max-width: 767px) {
.wpo-blog-single-section .entry-meta ul li {
font-size: 12px;
font-size: 0.8rem;
}
}
@media (max-width: 440px) {
.wpo-blog-single-section .entry-meta ul li {
float: none;
display: block;
margin-bottom: 5px;
}
}
.wpo-blog-single-section .entry-media img {
width: 100%;
}
.wpo-blog-single-section .post h2 {
font-size: 35px;
font-size: 2.33333rem;
margin: -0.22em 0 0.7em;
line-height: 1.3em;
font-family: "Inter", sans-serif;
font-weight: 600;
}
@media (max-width: 991px) {
.wpo-blog-single-section .post h2 {
font-size: 30px;
font-size: 2rem;
}
}
@media (max-width: 767px) {
.wpo-blog-single-section .post h2 {
font-size: 25px;
font-size: 1.66667rem;
}
}
.wpo-blog-single-section .post p {
margin-bottom: 1.5em;
}
.wpo-blog-single-section .post h3 {
font-size: 24px;
font-size: 1.6rem;
font-weight: 600;
line-height: 1.3em;
margin: 1.8em 0 1em;
}
@media (max-width: 991px) {
.wpo-blog-single-section .post h3 {
font-size: 22px;
font-size: 1.46667rem;
}
}
@media (max-width: 767px) {
.wpo-blog-single-section .post h3 {
font-size: 20px;
font-size: 1.33333rem;
}
}
.wpo-blog-single-section .post blockquote {
background-color: #f3f3f3;
color: #888888;
font-size: 19px;
padding: 65px;
margin-top: 60px;
margin-bottom: 40px;
border: 0;
text-align: center;
position: relative;
font-weight: 600;
line-height: 35px;
padding-bottom: 45px;
}
@media (max-width: 767px) {
.wpo-blog-single-section .post blockquote {
padding: 55px 25px;
}
}
.wpo-blog-single-section .post blockquote:before {
font-family: "Flaticon";
content: "\f11d";
font-size: 20px;
font-size: 1.33333rem;
position: absolute;
left: 50%;
top: -30px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 60px;
height: 60px;
line-height: 60px;
border: 2px solid #f1f1f1;
background: #f3f3f3;
color: #0e8af7;
border-radius: 50%;
}
.wpo-blog-single-section .post .gallery {
overflow: hidden;
margin: 40px -7.5px 0;
}
.wpo-blog-single-section .post .gallery > div {
width: calc(50% - 15px);
float: left;
margin: 0 7.5px 15px;
}
.wpo-blog-single-section .post .gallery img {
width: 100%;
}
.wpo-blog-single-section .tag-share,
.wpo-blog-single-section .tag-share-s2 {
border-bottom: 1px solid #ebebeb;
margin: 75px 0 0;
padding-bottom: 30px;
color: #202020;
}
@media (max-width: 767px) {
.wpo-blog-single-section .tag-share,
.wpo-blog-single-section .tag-share-s2 {
margin-top: 40px;
}
}
.wpo-blog-single-section .tag-share ul,
.wpo-blog-single-section .tag-share-s2 ul {
list-style: none;
display: inline-block;
overflow: hidden;
}
.wpo-blog-single-section .tag-share ul li,
.wpo-blog-single-section .tag-share-s2 ul li {
float: left;
}
@media (max-width: 767px) {
.wpo-blog-single-section .tag-share ul li,
.wpo-blog-single-section .tag-share-s2 ul li {
margin: 2px;
}
}
.wpo-blog-single-section .tag-share ul > li + li,
.wpo-blog-single-section .tag-share-s2 ul > li + li {
margin-left: 10px;
}
@media (max-width: 767px) {
.wpo-blog-single-section .tag-share ul > li + li,
.wpo-blog-single-section .tag-share-s2 ul > li + li {
margin: 2px;
}
}
.wpo-blog-single-section .tag-share .tag,
.wpo-blog-single-section .tag-share-s2 .tag {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.wpo-blog-single-section .tag-share .tag > span,
.wpo-blog-single-section .tag-share-s2 .tag > span {
font-family: "Inter", sans-serif;
color: #888888;
font-weight: 600;
display: inline-block;
padding-right: 15px;
text-transform: uppercase;
}
.wpo-blog-single-section .tag-share .tag ul,
.wpo-blog-single-section .tag-share-s2 .tag ul {
list-style: none;
position: relative;
}
.wpo-blog-single-section .tag-share .tag li,
.wpo-blog-single-section .tag-share-s2 .tag li {
position: relative;
}
.wpo-blog-single-section .tag-share .tag a,
.wpo-blog-single-section .tag-share-s2 .tag a {
font-size: 13px;
font-size: 0.86667rem;
display: inline-block;
padding: 5px 18px;
color: #888888;
background: #f3f3f3;
border-radius: 5px;
font-weight: 600;
}
@media (max-width: 767px) {
.wpo-blog-single-section .tag-share .tag a,
.wpo-blog-single-section .tag-share-s2 .tag a {
font-size: 13px;
font-size: 0.86667rem;
}
}
.wpo-blog-single-section .tag-share .tag a:hover,
.wpo-blog-single-section .tag-share-s2 .tag a:hover {
color: #0e8af7;
}
.wpo-blog-single-section .tag-share-s2 {
margin: 0;
margin-top: 30px;
border-bottom: 0;
}
.wpo-blog-single-section .tag-share-s2 .tag a {
padding: 0;
font-size: 16px;
font-size: 1.06667rem;
text-transform: capitalize;
background: none;
text-decoration: underline;
color: #888888;
}
.wpo-blog-single-section .author-box {
margin: 35px 0 60px;
}
.wpo-blog-single-section .author-box .author-avatar {
float: left;
}
@media (max-width: 767px) {
.wpo-blog-single-section .author-box .author-avatar {
float: none;
}
}
.wpo-blog-single-section .author-box .author-avatar img {
border-radius: 50%;
}
.wpo-blog-single-section .author-box .author-content {
display: block;
overflow: hidden;
padding-left: 25px;
}
@media (max-width: 767px) {
.wpo-blog-single-section .author-box .author-content {
padding: 0;
margin: 15px 0 0 0;
}
}
.wpo-blog-single-section .author-box .author-content p {
margin-bottom: 20px;
}
.wpo-blog-single-section .author-box .author-name {
font-family: "Inter", sans-serif;
font-size: 24px;
font-size: 1.6rem;
font-weight: 600;
display: inline-block;
margin-bottom: 10px;
color: #202020;
}
.wpo-blog-single-section .author-box .social-link {
display: inline-block;
list-style: none;
}
.wpo-blog-single-section .author-box .social-link li {
float: left;
margin-right: 12px;
}
.wpo-blog-single-section .author-box .social-link a {
display: block;
font-size: 13px;
font-size: 0.86667rem;
color: #202020;
}
.wpo-blog-single-section .author-box .social-link a:hover {
color: #0e8af7;
}
.wpo-blog-single-section .more-posts {
overflow: hidden;
border: 1px solid #ebebeb;
padding: 0 25px;
}
.wpo-blog-single-section .more-posts > div {
width: 50%;
float: left;
}
@media (max-width: 767px) {
.wpo-blog-single-section .more-posts > div {
width: 100%;
float: none;
}
}
.wpo-blog-single-section .more-posts > div > a {
display: inline-block;
}
.wpo-blog-single-section .more-posts .previous-post,
.wpo-blog-single-section .more-posts .next-post {
padding: 40px 0;
}
@media (max-width: 767px) {
.wpo-blog-single-section .more-posts .previous-post,
.wpo-blog-single-section .more-posts .next-post {
padding: 25px 15px !important;
}
}
.wpo-blog-single-section .more-posts .next-post {
text-align: right;
border-left: 1px solid #ebebeb;
padding-left: 15px;
padding-right: 5px;
}
@media (max-width: 767px) {
.wpo-blog-single-section .more-posts .next-post {
border-left: 0;
text-align: left;
border-top: 1px solid #ebebeb;
}
}
.wpo-blog-single-section .more-posts .next-post .post-control-link {
padding-right: 25px;
position: relative;
}
@media (max-width: 767px) {
.wpo-blog-single-section .more-posts .next-post .post-control-link {
padding-right: 0;
}
}
.wpo-blog-single-section .more-posts .next-post .post-control-link:before {
font-family: "themify";
content: "\e628";
position: absolute;
right: 0;
top: 0;
}
@media (max-width: 767px) {
.wpo-blog-single-section .more-posts .next-post .post-control-link:before {
display: none;
}
}
.wpo-blog-single-section .more-posts .previous-post {
padding-right: 15px;
padding-left: 5px;
}
.wpo-blog-single-section .more-posts .previous-post .post-control-link {
padding-left: 25px;
position: relative;
}
@media (max-width: 767px) {
.wpo-blog-single-section .more-posts .previous-post .post-control-link {
padding-left: 0;
}
}
.wpo-blog-single-section .more-posts .previous-post .post-control-link:before {
font-family: "themify";
content: "\e629";
position: absolute;
left: 0;
top: 0;
}
@media (max-width: 767px) {
.wpo-blog-single-section
.more-posts
.previous-post
.post-control-link:before {
display: none;
}
}
.wpo-blog-single-section .more-posts .previous-post > a > span,
.wpo-blog-single-section .more-posts .next-post > a > span {
display: block;
}
.wpo-blog-single-section .more-posts .post-control-link {
font-size: 14px;
font-size: 0.93333rem;
color: #888888;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
}
.wpo-blog-single-section .more-posts .post-name {
font-family: "Inter", sans-serif;
font-size: 18px;
font-size: 1.2rem;
color: #202020;
margin: 0.7em 0 0;
}
@media (max-width: 991px) {
.wpo-blog-single-section .more-posts .post-name {
font-size: 18px;
font-size: 1.2rem;
}
}
.wpo-blog-single-section .more-posts a:hover .post-control-link {
color: #0e8af7;
}
.wpo-blog-single-section .comments-area {
margin-top: 70px;
}
.wpo-blog-single-section .comments-area li > div {
border-bottom: 1px solid #ebebeb;
padding: 35px;
}
@media (max-width: 991px) {
.wpo-blog-single-section .comments-area li > div {
padding: 35px 25px;
}
}
.wpo-blog-single-section .comments-area ol {
list-style-type: none;
padding-left: 0;
}
.wpo-blog-single-section .comments-area ol ul {
padding-left: 30px;
list-style-type: none;
}
.wpo-blog-single-section .comments-area ol > li:last-child div {
border-bottom: 0;
}
.wpo-blog-single-section .comments-area .comments-title {
font-size: 22px;
font-size: 1.46667rem;
font-weight: 500;
margin: 0 0 1em;
text-transform: uppercase;
letter-spacing: 3px;
}
@media (max-width: 991px) {
.wpo-blog-single-section .comments-area .comments-title {
font-size: 20px;
font-size: 1.33333rem;
}
}
.wpo-blog-single-section .comments-area li > div {
position: relative;
}
.wpo-blog-single-section .comments-area .comment-theme {
position: absolute;
left: 35px;
}
@media (max-width: 767px) {
.wpo-blog-single-section .comments-area .comment-theme {
position: static;
}
}
.wpo-blog-single-section .comments-area .comment-theme img {
border-radius: 50%;
}
.wpo-blog-single-section .comments-area .comment-main-area {
padding-left: 100px;
}
@media (max-width: 767px) {
.wpo-blog-single-section .comments-area .comment-main-area {
padding-left: 0;
margin-top: 25px;
}
}
.wpo-blog-single-section .comments-area .comment-main-area p {
margin-bottom: 20px;
}
.wpo-blog-single-section .comments-area .comments-meta h4 {
font-family: "Inter", sans-serif;
font-size: 18px;
font-size: 1.2rem;
color: #202020;
font-weight: bold;
margin: 0 0 1em;
}
.wpo-blog-single-section .comments-area .comments-meta h4 span {
font-size: 15px;
font-size: 1rem;
color: #888888;
font-weight: normal;
text-transform: none;
display: inline-block;
padding-left: 5px;
font-family: "Inter", sans-serif;
}
@media (max-width: 767px) {
.wpo-blog-single-section .comments-area .comments-meta h4 span {
padding-left: 0;
}
}
.wpo-blog-single-section .comments-area .comment-reply-link {
font-family: "Inter", sans-serif;
font-size: 14px;
font-size: 0.93333rem;
font-weight: 600;
color: #fff;
text-align: center;
border-radius: 50px;
display: inline-block;
font-family: "Inter", sans-serif;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 1px;
}
.wpo-blog-single-section .comments-area .comment-reply-link:hover {
color: #0e8af7;
}
.wpo-blog-single-section .comment-respond {
margin-top: 70px;
}
.wpo-blog-single-section .comment-respond .comment-reply-title {
font-size: 22px;
font-size: 1.46667rem;
margin: 0 0 1.5em;
text-transform: uppercase;
letter-spacing: 2px;
}
@media (max-width: 991px) {
.wpo-blog-single-section .comment-respond .comment-reply-title {
font-size: 20px;
font-size: 1.33333rem;
}
}
.wpo-blog-single-section .comment-respond form input,
.wpo-blog-single-section .comment-respond form textarea {
background-color: #f1f1f1;
width: 100%;
height: 55px;
border: 1px solid #ebebeb;
padding: 6px 15px;
margin-bottom: 15px;
outline: 0;
border-radius: 30px;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
color: #888888;
}
.wpo-blog-single-section .comment-respond form input:focus,
.wpo-blog-single-section .comment-respond form textarea:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color: #0e8af7;
}
@media (max-width: 991px) {
.wpo-blog-single-section .comment-respond form input,
.wpo-blog-single-section .comment-respond form textarea {
height: 40px;
}
}
.wpo-blog-single-section .comment-respond form textarea {
height: 220px;
padding: 15px;
}
@media (max-width: 991px) {
.wpo-blog-single-section .comment-respond form textarea {
height: 150px;
}
}
.wpo-blog-single-section .comment-respond .form-inputs {
overflow: hidden;
}
.wpo-blog-single-section .comment-respond .form-inputs > input:nth-child(1) {
width: 49%;
float: left;
}
@media (max-width: 767px) {
.wpo-blog-single-section .comment-respond .form-inputs > input:nth-child(1) {
width: 100%;
float: none;
}
}
.wpo-blog-single-section .comment-respond .form-inputs > input:nth-child(2) {
width: 49%;
float: right;
}
@media (max-width: 767px) {
.wpo-blog-single-section .comment-respond .form-inputs > input:nth-child(2) {
width: 100%;
float: none;
}
}
.wpo-blog-single-section .comment-respond .form-submit input {
font-family: "Inter", sans-serif;
max-width: 180px;
background-color: #0e8af7;
color: #fff;
margin-bottom: 0;
border: 0;
outline: 0;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 2px;
border-radius: 30px;
line-height: 41px;
}
.wpo-blog-single-section .comment-respond .form-submit input:hover {
background-color: #3faf60;
}
@media screen and (min-width: 1200px) {
.wpo-blog-single-left-sidebar-section .blog-sidebar {
padding-right: 45px;
padding-left: 0;
}
}
/*--------------------------------------------------------------
11. wpo-contact-pg-section
--------------------------------------------------------------*/
.wpo-contact-pg-section {
padding-bottom: 0px;
background: #fffbfb;
position: relative;
z-index: 1;
}
.wpo-contact-pg-section .shape-1 {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.wpo-contact-pg-section .shape-1 svg circle {
fill: #0e8af7;
}
.wpo-contact-pg-section .wpo-contact-title {
max-width: 440px;
margin: 0 auto;
text-align: center;
margin-bottom: 50px;
}
@media (max-width: 767px) {
.wpo-contact-pg-section .wpo-contact-title {
margin-bottom: 30px;
}
}
.wpo-contact-pg-section .wpo-contact-title h2 {
font-size: 35px;
font-size: 2.33333rem;
font-weight: 700;
margin-bottom: 20px;
}
@media (max-width: 575px) {
.wpo-contact-pg-section .wpo-contact-title h2 {
font-size: 25px;
font-size: 1.66667rem;
}
}
.wpo-contact-pg-section form input,
.wpo-contact-pg-section form select,
.wpo-contact-pg-section form textarea {
background: transparent;
width: 100%;
height: 50px;
border: 1px solid transparent;
border-radius: 0px;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding-left: 25px;
border: 1px solid #ebebeb;
color: #888888;
}
@media (max-width: 991px) {
.wpo-contact-pg-section form input,
.wpo-contact-pg-section form select,
.wpo-contact-pg-section form textarea {
height: 45px;
}
}
.wpo-contact-pg-section form input:focus,
.wpo-contact-pg-section form select:focus,
.wpo-contact-pg-section form textarea:focus {
border-color: #0e8af7;
background: transparent;
color: #888888;
}
.wpo-contact-pg-section form textarea {
height: 180px;
padding-top: 15px;
}
.wpo-contact-pg-section form {
margin: 0 -15px;
overflow: hidden;
}
.wpo-contact-pg-section form ::-webkit-input-placeholder {
font-style: 15px;
font-style: normal;
color: #9d9c9c;
}
.wpo-contact-pg-section form :-moz-placeholder {
font-style: 15px;
font-style: normal;
color: #9d9c9c;
}
.wpo-contact-pg-section form ::-moz-placeholder {
font-style: 15px;
font-style: normal;
color: #9d9c9c;
}
.wpo-contact-pg-section form :-ms-input-placeholder {
font-style: 15px;
font-style: normal;
color: #9d9c9c;
}
.wpo-contact-pg-section form select {
display: inline-block;
color: #a9a9a9;
cursor: pointer;
opacity: 1;
padding: 6px 25px;
font-size: 15px;
font-size: 1rem;
-webkit-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
-moz-appearance: none;
background: transparent url(../images/select-icon2.png) no-repeat
calc(100% - 15px) center;
position: relative;
}
.wpo-contact-pg-section form select:focus {
background: transparent url(../images/select-icon2.png) no-repeat
calc(100% - 15px) center;
}
.wpo-contact-pg-section form .submit-area {
text-align: center;
width: 100%;
margin-bottom: 10px;
margin-left: 0;
}
@media (max-width: 767px) {
.wpo-contact-pg-section form .submit-area {
margin-bottom: 0;
}
}
.wpo-contact-pg-section form .submit-area .theme-btn,
.wpo-contact-pg-section form .submit-area .view-cart-btn {
border-radius: 0px;
font-family: "Inter", sans-serif;
font-size: 16px;
}
.wpo-contact-pg-section form .submit-area .theme-btn:after,
.wpo-contact-pg-section form .submit-area .view-cart-btn:after {
border-radius: 0px;
}
.wpo-contact-pg-section form > div {
width: calc(50% - 30px);
float: left;
margin: 0 15px 25px;
}
@media (max-width: 600px) {
.wpo-contact-pg-section form > div {
width: calc(100% - 25px);
float: none;
}
}
.wpo-contact-pg-section form .fullwidth {
width: calc(100% - 25px);
float: none;
clear: both;
}
.wpo-contact-pg-section .office-info {
padding-bottom: 100px;
}
@media (max-width: 767px) {
.wpo-contact-pg-section .office-info {
padding-bottom: 60px;
}
}
@media (max-width: 1200px) {
.wpo-contact-pg-section .office-info .col .office-info-item {
margin-bottom: 30px;
}
}
@media (max-width: 1200px) {
.wpo-contact-pg-section .office-info .col:last-child .office-info-item {
margin-bottom: 0px;
}
}
.wpo-contact-pg-section .office-info .office-info-item {
text-align: center;
-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 40px;
background: #fffbfb;
}
.wpo-contact-pg-section .office-info .office-info-item .office-info-icon {
width: 85px;
height: 85px;
background: #2e2e2e;
line-height: 85px;
text-align: center;
margin: 0 auto;
border-radius: 50%;
}
.wpo-contact-pg-section
.office-info
.office-info-item
.office-info-icon
.icon
.fi:before {
font-size: 35px;
color: #dfca08;
}
.wpo-contact-pg-section .office-info .office-info-item .office-info-text h2 {
font-size: 30px;
font-weight: 500;
margin: 20px 0;
}
.wpo-contact-pg-section .office-info .office-info-item .office-info-text p {
margin-bottom: 0;
}
.wpo-contact-pg-section .wpo-contact-form-area {
padding: 50px;
background: #fffbfb;
-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding-bottom: 0;
margin-bottom: -125px;
position: relative;
z-index: 99;
}
@media (max-width: 767px) {
.wpo-contact-pg-section .wpo-contact-form-area {
padding: 30px;
padding-top: 50px;
}
}
.wpo-contact-map-section .wpo-contact-map {
height: 550px;
}
.wpo-contact-map-section iframe {
width: 100%;
height: 100%;
border: 0;
outline: 0;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.wpo-contact-map-section h2.hidden {
display: none;
}
/*--------------------------------------------------------------
12. error-404-section
--------------------------------------------------------------*/
.error-404-section {
text-align: center;
background: #fffbfb;
}
.error-404-section .error-message {
margin-top: 70px;
padding: 0 200px;
}
@media (max-width: 991px) {
.error-404-section .error-message {
margin-top: 50px;
padding: 0 100px;
}
}
@media (max-width: 767px) {
.error-404-section .error-message {
padding: 0;
}
}
.error-404-section .error-message h3 {
font-size: 30px;
font-size: 2rem;
margin: 0 0 0.8em;
}
.error-404-section .error-message p {
margin-bottom: 1.8em;
}
/*--------------------------------------------------------------
preview
--------------------------------------------------------------*/
.demo-smooth {
scroll-behavior: smooth;
}
.Header-tp {
position: absolute;
background: transparent;
left: 0;
width: 100%;
z-index: 99;
padding: 10px 0;
background: rgba(0, 0, 0, 0.11);
}
.Header-tp p {
margin-bottom: 0;
margin-right: 10px;
}
.Header-tp a {
padding: 5px 10px;
background: #0e8af7;
color: #fff;
border-radius: 30px;
}
.Header-tp a:hover {
color: #fff;
}
.Header-tp .Header-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.static-hero.previews {
background: #131313;
}
@media (max-width: 991px) {
.static-hero.previews {
height: 550px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
@media (max-width: 575px) {
.static-hero.previews {
height: 400px;
}
}
@media (max-width: 991px) {
.static-hero.previews .hero-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.static-hero.previews .wpo-static-hero-inner .slide-title {
text-align: center;
}
@media (max-width: 991px) {
.static-hero.previews .wpo-static-hero-inner .slide-title {
padding-top: 30px;
}
}
.static-hero.previews .wpo-static-hero-inner .slide-title h2 {
color: #fff;
}
@media (max-width: 575px) {
.static-hero.previews .wpo-static-hero-inner .slide-title h2 {
font-size: 25px;
}
}
.static-hero.previews .wpo-static-hero-inner .slide-btn {
text-align: center;
}
.static-hero.previews .wpo-static-hero-inner .slide-btn-2 {
text-align: center;
margin-top: 20px;
}
.static-hero.previews .wpo-static-hero-inner .slide-btn-2 img {
max-width: 50px;
cursor: pointer;
}
.static-hero.previews .wpo-static-hero-inner .demo-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.static-hero.previews .wpo-static-hero-inner .demo-btn .d-btn a {
display: block;
padding: 15px 40px;
background: #625900;
margin: 0 5px;
cursor: pointer;
border-radius: 30px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
color: #fff;
}
@media (max-width: 991px) {
.static-hero.previews .wpo-static-hero-inner .demo-btn .d-btn a {
padding: 15px 20px;
}
}
.static-hero.previews .wpo-static-hero-inner .demo-btn .d-btn a:hover {
background: #8d7f00;
color: #fff;
}
.wpo-demo-section {
padding: 130px 0 10px;
background: #191919;
}
.wpo-demo-section .wpo-section-title h2 {
color: #fff;
}
.wpo-demo-section.s2 {
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#323030),
to(#191919)
);
background: linear-gradient(180deg, #323030, #191919);
}
@media (max-width: 991px) {
.wpo-demo-section {
padding: 100px 0 20px;
}
}
@media (max-width: 767px) {
.wpo-demo-section {
padding: 90px 0 30px;
}
}
@media screen and (min-width: 992px) {
.wpo-demo-section .container-fluid {
padding: 0 100px;
}
}
.wpo-demo-section .wpo-demo-grids {
margin: 0 -15px;
text-align: center;
}
@media (max-width: 991px) {
.wpo-demo-section .wpo-demo-grids {
margin: 0 -7.5px;
}
}
.wpo-demo-section .wpo-demo-grids .grid {
width: calc(33% - 30px);
margin: 0 15px 100px;
float: left;
}
@media (max-width: 991px) {
.wpo-demo-section .wpo-demo-grids .grid {
margin: 0 15px 80px;
width: calc(50% - 30px);
}
}
@media (max-width: 767px) {
.wpo-demo-section .wpo-demo-grids .grid {
width: calc(50% - 30px);
margin: 0 15px 60px;
}
}
@media (max-width: 600px) {
.wpo-demo-section .wpo-demo-grids .grid {
width: calc(100% - 30px);
margin: 0 15px 60px;
float: none;
}
}
.wpo-demo-section .wpo-demo-grids .inner {
-webkit-box-shadow: 0 1px 31.92px 6.08px rgba(133, 142, 154, 0.09);
box-shadow: 0 1px 31.92px 6.08px rgba(133, 142, 154, 0.09);
margin-bottom: 35px;
max-height: 570px;
overflow: hidden;
-webkit-box-shadow: 0 1px 7.5px 2.5px rgba(5, 2, 52, 0.05);
box-shadow: 0 1px 7.5px 2.5px rgba(5, 2, 52, 0.05);
}
.wpo-demo-section .wpo-demo-grids .coming-inner img {
height: 570px;
}
.wpo-demo-section .wpo-demo-grids .inner img {
-webkit-transition: all 3s;
transition: all 3s;
}
.wpo-demo-section .wpo-demo-grids .grid:hover .inner img {
-webkit-transform: translateY(calc(-100% + 570px));
}
.wpo-demo-section .wpo-demo-grids h3 {
font-size: 18px;
margin: 0;
color: #fff;
}
@media (max-width: 991px) {
.wpo-demo-section .wpo-demo-grids h3 {
font-size: 16px;
}
}
.wpo-inner-demo-section .owl-stage-outer {
padding: 20px;
}
.wpo-inner-demo-section .wpo-inner-demo-grids {
text-align: center;
}
.wpo-inner-demo-section .wpo-inner-demo-grids .inner {
-webkit-box-shadow: 0 1px 31.92px 6.08px rgba(133, 142, 154, 0.09);
box-shadow: 0 1px 31.92px 6.08px rgba(133, 142, 154, 0.09);
margin-bottom: 35px;
max-height: 500px;
overflow: hidden;
-webkit-box-shadow: 0 1px 7.5px 2.5px rgba(5, 2, 52, 0.05);
box-shadow: 0 1px 7.5px 2.5px rgba(5, 2, 52, 0.05);
}
.wpo-inner-demo-section .wpo-inner-demo-grids .inner img {
-webkit-transition: all 3s;
transition: all 3s;
}
.wpo-inner-demo-section .wpo-inner-demo-grids .grid:hover .inner img {
-webkit-transform: translateY(calc(-100% + 500px));
}
.wpo-inner-demo-section .wpo-inner-demo-grids h3 {
font-size: 18px;
margin: 0;
font-weight: 700 !important;
}
@media (max-width: 991px) {
.wpo-inner-demo-section .wpo-inner-demo-grids h3 {
font-size: 16px;
}
}
.wpo-inner-demo-section .wpo-demo-active .slick-slide {
padding: 0 10px;
}
.other-demo {
text-align: center;
padding-bottom: 100px;
padding-top: 30px;
}
.other-demo-ball {
width: 300px;
height: 300px;
background: #202026;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border-radius: 50%;
color: #fff;
-webkit-box-shadow: 0 0px 30px 0 rgba(0, 0, 0, 0.2),
0 0px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 0px 30px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0.19);
}
.other-demo-ball h3 {
font-size: 38px;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
text-transform: uppercase;
}
.other-demo-ball span {
font-size: 20px;
}
@media (max-width: 440px) {
.other-demo-ball {
width: 250px;
height: 250px;
}
.other-demo-ball h3 {
font-size: 30px;
}
}
.wpo-preview-footer {
background: #202026;
position: relative;
font-size: 15px;
overflow: hidden;
z-index: 1;
}
.wpo-upper-footer {
position: relative;
overflow: hidden;
z-index: 1;
}
.wpo-preview-footer .wpo-upper-footer {
padding: 100px 0;
}
@media (max-width: 767px) {
.wpo-preview-footer .wpo-upper-footer {
padding: 70px 0;
}
}
.wpo-preview-footer .wpo-upper-footer .wpo-footer-text {
text-align: center;
}
.wpo-preview-footer .wpo-upper-footer .wpo-footer-text h2 {
font-size: 55px;
color: #fff;
margin-bottom: 20px;
}
@media (max-width: 1400px) {
.wpo-preview-footer .wpo-upper-footer .wpo-footer-text h2 {
font-size: 40px;
}
}
@media (max-width: 767px) {
.wpo-preview-footer .wpo-upper-footer .wpo-footer-text h2 {
font-size: 30px;
}
}
/*# sourceMappingURL=style.css.map */
JavaScprit
3. Create a script.js File:
- Right-click inside the folder once more and choose “New” > “Text Document.”
- Rename the newly created text document to “script.js” (remove the “.txt” extension).
- Open the “script.js” file using a text editor.
<!-- AC Zone By Animationcoding.com -->
(function ($) {
"use strict";
/*------------------------------------------
= ALL ESSENTIAL FUNCTIONS
-------------------------------------------*/
// Toggle mobile navigation
function toggleMobileNavigation() {
var navbar = $(".navigation-holder");
var openBtn = $(".mobail-menu .open-btn");
var xbutton = $(".mobail-menu .navbar-toggler");
openBtn.on("click", function (e) {
e.stopImmediatePropagation();
navbar.toggleClass("slideInn");
xbutton.toggleClass("x-close");
return false;
})
}
toggleMobileNavigation();
// Function for toggle class for small menu
function toggleClassForSmallNav() {
var windowWidth = window.innerWidth;
var mainNav = $("#navbar > ul");
if (windowWidth <= 991) {
mainNav.addClass("small-nav");
} else {
mainNav.removeClass("small-nav");
}
}
toggleClassForSmallNav();
// Function for small menu
function smallNavFunctionality() {
var windowWidth = window.innerWidth;
var mainNav = $(".navigation-holder");
var smallNav = $(".navigation-holder > .small-nav");
var subMenu = smallNav.find(".sub-menu");
var megamenu = smallNav.find(".mega-menu");
var menuItemWidthSubMenu = smallNav.find(".menu-item-has-children > a");
if (windowWidth <= 991) {
subMenu.hide();
megamenu.hide();
menuItemWidthSubMenu.on("click", function (e) {
var $this = $(this);
$this.siblings().slideToggle();
e.preventDefault();
e.stopImmediatePropagation();
$this.toggleClass("rotate");
})
} else if (windowWidth > 991) {
mainNav.find(".sub-menu").show();
mainNav.find(".mega-menu").show();
}
}
smallNavFunctionality();
// function for active menuitem
function activeMenuItem($links) {
var top = $(window).scrollTop(),
windowHeight = $(window).height(),
documentHeight = $(document).height(),
cur_pos = top + 2,
sections = $("section"),
nav = $links,
nav_height = nav.outerHeight();
sections.each(function () {
var top = $(this).offset().top - nav_height,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
nav.find("> ul > li > a").parent().removeClass("current-menu-item");
nav.find("a[href='#" + $(this).attr('id') + "']").parent().addClass("current-menu-item");
} else if (cur_pos === 2) {
nav.find("> ul > li > a").parent().removeClass("current-menu-item");
}
});
}
// smooth-scrolling
function smoothScrolling($scrollLinks, $topOffset) {
var links = $scrollLinks;
var topGap = $topOffset;
links.on("click", function () {
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
var target = $(this.hash);
target = target.length ? target : $("[name=" + this.hash.slice(1) + "]");
if (target.length) {
$("html, body").animate({
scrollTop: target.offset().top - topGap
}, 1000, "easeInOutExpo");
return false;
}
}
return false;
});
}
$("body").on("click", function () {
$('.navigation-holder').removeClass('slideInn');
});
$(".menu-close").on("click", function () {
$('.navigation-holder').removeClass('slideInn');
});
$(".menu-close").on("click", function () {
$('.open-btn').removeClass('x-close');
});
// tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
// Parallax background
function bgParallax() {
if ($(".parallax").length) {
$(".parallax").each(function () {
var height = $(this).position().top;
var resize = height - $(window).scrollTop();
var doParallax = -(resize / 5);
var positionValue = doParallax + "px";
var img = $(this).data("bg-image");
$(this).css({
backgroundImage: "url(" + img + ")",
backgroundPosition: "50%" + positionValue,
backgroundSize: "cover"
});
});
}
}
// HERO SLIDER
var menu = [];
jQuery('.swiper-slide').each(function (index) {
menu.push(jQuery(this).find('.slide-inner').attr("data-text"));
});
var interleaveOffset = 0.5;
var swiperOptions = {
loop: true,
speed: 1000,
parallax: true,
autoplay: {
delay: 6500,
disableOnInteraction: false,
},
watchSlidesProgress: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
progress: function () {
var swiper = this;
for (var i = 0; i < swiper.slides.length; i++) {
var slideProgress = swiper.slides[i].progress;
var innerOffset = swiper.width * interleaveOffset;
var innerTranslate = slideProgress * innerOffset;
swiper.slides[i].querySelector(".slide-inner").style.transform =
"translate3d(" + innerTranslate + "px, 0, 0)";
}
},
touchStart: function () {
var swiper = this;
for (var i = 0; i < swiper.slides.length; i++) {
swiper.slides[i].style.transition = "";
}
},
setTransition: function (speed) {
var swiper = this;
for (var i = 0; i < swiper.slides.length; i++) {
swiper.slides[i].style.transition = speed + "ms";
swiper.slides[i].querySelector(".slide-inner").style.transition =
speed + "ms";
}
}
}
};
var swiper = new Swiper(".swiper-container", swiperOptions);
// DATA BACKGROUND IMAGE
var sliderBgSetting = $(".slide-bg-image");
sliderBgSetting.each(function (indx) {
if ($(this).attr("data-background")) {
$(this).css("background-image", "url(" + $(this).data("background") + ")");
}
});
/*------------------------------------------
= HIDE PRELOADER
-------------------------------------------*/
function preloader() {
if ($('.preloader').length) {
$('.preloader').delay(100).fadeOut(500, function () {
//active wow
wow.init();
});
}
}
/*------------------------------------------
= WOW ANIMATION SETTING
-------------------------------------------*/
var wow = new WOW({
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
});
/*------------------------------------------
= ACTIVE POPUP IMAGE
-------------------------------------------*/
if ($(".fancybox").length) {
$(".fancybox").fancybox({
openEffect: "elastic",
closeEffect: "elastic",
wrapCSS: "project-fancybox-title-style"
});
}
/*------------------------------------------
= POPUP YOUTUBE, VIMEO, GMAPS
-------------------------------------------*/
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
/*------------------------------------------
= POPUP VIDEO
-------------------------------------------*/
if ($(".video-btn").length) {
$(".video-btn").on("click", function () {
$.fancybox({
href: this.href,
type: $(this).data("type"),
'title': this.title,
helpers: {
title: { type: 'inside' },
media: {}
},
beforeShow: function () {
$(".fancybox-wrap").addClass("gallery-fancybox");
}
});
return false
});
}
/*------------------------------------------
= ACTIVE GALLERY POPUP IMAGE
-------------------------------------------*/
if ($(".popup-gallery").length) {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled: true
},
zoom: {
enabled: true,
duration: 300,
easing: 'ease-in-out',
opener: function (openerElement) {
return openerElement.is('img') ? openerElement : openerElement.find('img');
}
}
});
}
/*------------------------------------------
= FUNCTION FORM SORTING GALLERY
-------------------------------------------*/
function sortingGallery() {
if ($(".sortable-gallery .gallery-filters").length) {
var $container = $('.gallery-container');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
$(".gallery-filters li a").on("click", function () {
$('.gallery-filters li .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
}
}
sortingGallery();
/*------------------------------------------
= MASONRY GALLERY SETTING
-------------------------------------------*/
function masonryGridSetting() {
if ($('.masonry-gallery').length) {
var $grid = $('.masonry-gallery').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-item',
percentPosition: true
});
$grid.imagesLoaded().progress(function () {
$grid.masonry('layout');
});
}
}
// masonryGridSetting();
/*------------------------------------------
= FUNFACT
-------------------------------------------*/
if ($(".odometer").length) {
$('.odometer').appear();
$(document.body).on('appear', '.odometer', function (e) {
var odo = $(".odometer");
odo.each(function () {
var countNumber = $(this).attr("data-count");
$(this).html(countNumber);
});
});
}
/*------------------------------------------
= STICKY HEADER
-------------------------------------------*/
// Function for clone an element for sticky menu
function cloneNavForSticyMenu($ele, $newElmClass) {
$ele.addClass('original').clone().insertAfter($ele).addClass($newElmClass).removeClass('original');
}
// clone home style 1 navigation for sticky menu
if ($('.wpo-site-header .navigation').length) {
cloneNavForSticyMenu($('.wpo-site-header .navigation'), "sticky-header");
}
var lastScrollTop = '';
function stickyMenu($targetMenu, $toggleClass, $topOffset) {
var st = $(window).scrollTop();
var mainMenuTop = $('.wpo-site-header .navigation');
if ($(window).scrollTop() > 500) {
if (st > lastScrollTop) {
// hide sticky menu on scroll down
$targetMenu.addClass($toggleClass);
} else {
// active sticky menu on scroll up
$targetMenu.addClass($toggleClass);
}
} else {
$targetMenu.removeClass($toggleClass);
}
lastScrollTop = st;
}
/*------------------------------------------
= Header search toggle
-------------------------------------------*/
if ($(".header-search-form-wrapper").length) {
var searchToggleBtn = $(".search-toggle-btn");
var searchToggleBtnIcon = $(".search-toggle-btn i");
var searchContent = $(".header-search-form");
var body = $("body");
searchToggleBtn.on("click", function (e) {
searchContent.toggleClass("header-search-content-toggle");
searchToggleBtnIcon.toggleClass("fi flaticon-search fi ti-close");
e.stopPropagation();
});
body.on("click", function () {
searchContent.removeClass("header-search-content-toggle");
}).find(searchContent).on("click", function (e) {
e.stopPropagation();
});
}
/*------------------------------------------
= Testimonial slider 1
-------------------------------------------*/
if ($(".wpo-testimonial-wrap").length) {
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.slider-for',
focusOnSelect: true,
dots: true,
});
}
/*------------------------------------------
wpo-project-slide
-------------------------------------------*/
if ($(".wpo-project-slide").length) {
$(".wpo-project-slide").owlCarousel({
autoplay: true,
smartSpeed: 300,
margin: 30,
items: 3,
loop: true,
autoplayHoverPause: true,
dots: false,
arrows: true,
navText: ['<i class="fi ti-arrow-left"></i>', '<i class="fi ti-arrow-right"></i>'],
nav: false,
responsive: {
0: {
items: 1,
dots: true,
arrows: false,
nav: false,
},
575: {
items: 1,
},
767: {
items: 2,
},
992: {
items: 3
},
1200: {
items: 3
}
}
});
}
/*------------------------------------------
= wpo-blog-slide
-------------------------------------------*/
if ($(".wpo-blog-slide").length) {
$(".wpo-blog-slide").owlCarousel({
autoplay: false,
smartSpeed: 300,
margin: 30,
loop: true,
autoplayHoverPause: true,
dots: false,
nav: true,
navText: ['<i class="fi flaticon-left-arrow" aria-hidden="true"></i>', '<i class="fi flaticon-right-arrow" aria-hidden="true"></i>'],
autoplay: true,
responsive: {
0: {
items: 1,
nav: false
},
500: {
items: 1,
nav: false
},
768: {
items: 2,
},
1200: {
items: 3
},
1400: {
items: 3
},
}
});
}
/*------------------------------------------
= PARTNERS SLIDER
-------------------------------------------*/
if ($(".partners-slider").length) {
$(".partners-slider").owlCarousel({
autoplay: true,
smartSpeed: 300,
margin: 30,
loop: true,
autoplayHoverPause: true,
dots: false,
arrows: false,
nav: false,
responsive: {
0: {
items: 2
},
550: {
items: 3
},
992: {
items: 4
},
1200: {
items: 4
}
}
});
}
/*------------------------------------------
= wpo-project-single-main-img
-------------------------------------------*/
if ($(".wpo-project-single-main-img".length)) {
$(".wpo-project-single-main-img").owlCarousel({
mouseDrag: false,
smartSpeed: 500,
margin: 30,
loop: true,
nav: true,
navText: ['<i class="fi ti-arrow-left"></i>', '<i class="fi ti-arrow-right"></i>'],
dots: false,
items: 1
});
}
/*------------------------------------------
= POST SLIDER
-------------------------------------------*/
if ($(".post-slider".length)) {
$(".post-slider").owlCarousel({
mouseDrag: false,
smartSpeed: 500,
margin: 30,
loop: true,
nav: true,
navText: ['<i class="fi ti-arrow-left"></i>', '<i class="fi ti-arrow-right"></i>'],
dots: false,
items: 1
});
}
/*------------------------------------------
= BACK TO TOP BTN SETTING
-------------------------------------------*/
$("body").append("<a href='#' class='back-to-top'><i class='ti-arrow-up'></i></a>");
function toggleBackToTopBtn() {
var amountScrolled = 1000;
if ($(window).scrollTop() > amountScrolled) {
$("a.back-to-top").fadeIn("slow");
} else {
$("a.back-to-top").fadeOut("slow");
}
}
$(".back-to-top").on("click", function () {
$("html,body").animate({
scrollTop: 0
}, 700);
return false;
})
/*------------------------------------------
= CONTACT FORM SUBMISSION
-------------------------------------------*/
if ($("#contact-form-main").length) {
$("#contact-form-main").validate({
rules: {
name: {
required: true,
minlength: 2
},
email: "required",
phone: "required",
adress: "required",
service: "required",
guest: "required",
meal: "required",
},
messages: {
name: "Please enter your name",
email: "Please enter your email address",
phone: "Please enter your phone number",
adress: "Please enter your adress",
service: "Please select your contact service",
guest: "Please select your guest Number",
meal: "Please select your Meal Name"
},
submitHandler: function (form) {
$.ajax({
type: "POST",
url: "mail-contact.php",
data: $(form).serialize(),
success: function () {
$("#loader").hide();
$("#success").slideDown("slow");
setTimeout(function () {
$("#success").slideUp("slow");
}, 3000);
form.reset();
},
error: function () {
$("#loader").hide();
$("#error").slideDown("slow");
setTimeout(function () {
$("#error").slideUp("slow");
}, 3000);
}
});
return false; // required to block normal submit since you used ajax
}
});
}
/*==========================================================================
WHEN DOCUMENT LOADING
==========================================================================*/
$(window).on('load', function () {
preloader();
sortingGallery();
toggleMobileNavigation();
smallNavFunctionality();
smoothScrolling($("#navbar > ul > li > a[href^='#'], .link-widget > ul > li > a[href^='#'] "), $(".wpo-site-header .navigation").innerHeight());
});
/*==========================================================================
WHEN WINDOW SCROLL
==========================================================================*/
$(window).on("scroll", function () {
if ($(".wpo-site-header").length) {
stickyMenu($('.wpo-site-header .navigation'), "sticky-on");
}
toggleBackToTopBtn();
activeMenuItem($(".navigation-holder"));
});
/*==========================================================================
WHEN WINDOW RESIZE
==========================================================================*/
$(window).on("resize", function () {
toggleClassForSmallNav();
//smallNavFunctionality();
clearTimeout($.data(this, 'resizeTimer'));
$.data(this, 'resizeTimer', setTimeout(function () {
smallNavFunctionality();
}, 200));
});
})(window.jQuery);
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="wpOceans">
<link rel="shortcut icon" type="image/png" href="assets/images/favicon.png">
<title>Elito - Creative Portfolio HTML5 Template</title>
<link href="assets/css/themify-icons.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/flaticon.css" rel="stylesheet">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/magnific-popup.css" rel="stylesheet">
<link href="assets/css/animate.css" rel="stylesheet">
<link href="assets/css/owl.carousel.css" rel="stylesheet">
<link href="assets/css/owl.theme.css" rel="stylesheet">
<link href="assets/css/slick.css" rel="stylesheet">
<link href="assets/css/slick-theme.css" rel="stylesheet">
<link href="assets/css/swiper.min.css" rel="stylesheet">
<link href="assets/css/nice-select.css" rel="stylesheet">
<link href="assets/css/owl.transitions.css" rel="stylesheet">
<link href="assets/css/jquery.fancybox.css" rel="stylesheet">
<link href="assets/css/odometer-theme-default.css" rel="stylesheet">
<link href="assets/sass/style.css" rel="stylesheet">
</head>
<body>
<!-- start page-wrapper -->
<div class="page-wrapper">
<!-- start preloader -->
<div class="preloader">
<div class="vertical-centered-box">
<div class="content">
<div class="loader-circle"></div>
<div class="loader-line-mask">
<div class="loader-line"></div>
</div>
<img src="assets/images/preloader.png" alt="">
</div>
</div>
</div>
<div class="widget newsletter-widget">
<div class="widget-title">
<h3>Newsletter</h3>
</div>
<p>Must explain to you how all this mistaken idea pleasure born and give you a complete
account.</p>
<form>
<div class="input-1">
<input type="email" class="form-control" placeholder="Email Address *" required>
</div>
<div class="submit clearfix">
<button type="submit"><i class="ti-email"></i></button>
</div>
</form>
</div>
</div>
</div>
</div> <!-- end container -->
<div class="shadow-shape">
<svg width="1319" height="1567" viewBox="0 0 1319 1567" fill="none">
<g filter="url(#filter0_f_39_3833)">
<circle cx="803" cy="803" r="303" fill="#59C378" fill-opacity="0.5" />
</g>
<defs>
<filter id="filter0_f_39_3833" x="0" y="0" width="1606" height="1606"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="250" result="effect1_foregroundBlur_39_3832" />
</filter>
</defs>
</svg>
</div>
</div>
<div class="lower-footer">
<div class="container">
<div class="row">
<div class="separator"></div>
<p class="copyright">Copyright © 2022 .AC. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<!-- end wpo-site-footer -->
</div>
<!-- end of page-wrapper -->
<!-- All JavaScript files
================================================== -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- Plugins for this template -->
<script src="assets/js/modernizr.custom.js"></script>
<script src="assets/js/jquery.dlmenu.js"></script>
<script src="assets/js/jquery-plugin-collection.js"></script>
<!-- Moving Animation -->
<script src="assets/js/moving-animation.js"></script>
<!-- Custom script for this template -->
<script src="assets/js/script.js"></script>
</body>
</html>
If you face any problem in the source link given above, then you people do not need to be afraid, what we have done is that I have created a download folder and packed it for you, so you do not have to do anything. Below you will be getting an option download link click on it and you can download this file to all files.
Animated Radial Menu animate style animation coding animationcoding Clean Toast Notifications with CSS create password css digital clock digital clock using html and css figma html and css icons Image Slider javascript JavaScript Clock Digital login design page login from pdf Personal Portfolio Python 3 Cheat Sheet PDF react react login react login from Top 5 VSCode Extensions Top 5 VSCode Extensions for 2024 ui ui kit