/*---------------------------------------------
			Table of CONTENTS
-----------------------------------------------
	00. Default       CSS
    01. reset         CSS 
    02. Global        CSS
    03. Header        CSS
    04. Banner        CSS 
    05. Feature       CSS 
    06. Watch         CSS 
    07. Secreenshot   CSS 
    08. Client        CSS 
    09. Pricing       CSS 
    11. Download      CSS 
    12. Blog          CSS 
    13. Subcriber     CSS 
    14. Footer        CSS 
-----------------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i");
/*pink color*/
/*green color*/
/*01 reset start here */
/* Fonts */
/*pink color*/
/*green color*/
/*Reset CSS*/
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-family: 'Poppins', sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  margin: 0;
}

button,
input,
select,
textarea {
  color: #fff;
  line-height: 1;
  border-radius: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

p {
  color: #303030;
  margin-bottom: 0;
  line-height: 1.5;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

h1 {
  font-size: 55px;
  color: #ffffff;
  line-height: 1.36;
  margin-bottom: 30px;
}

h1 span {
  font-weight: 300;
  display: block;
}

h2 {
  font-size: 40px;
  line-height: 1.5;
  color: #434fff;
}

h2 span {
  font-weight: 300;
  color: #18d1ff;
  display: block;
}

h3 {
  font-size: 35px;
  line-height: 1.4;
  font-weight: 700;
  margin: 10px 0;
  color: #434fff;
}

h3 span {
  font-weight: 300;
  color: #18d1ff;
  display: block;
}

h4 {
  font-size: 28px;
  line-height: 1.5;
  margin-bottom: 0;
  color: #434fff;
}

h4 span {
  font-weight: 300;
  color: #18d1ff;
  display: block;
}

h5 {
  font-size: 20px;
  line-height: 1;
}

h6 {
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
}
h2 a, h6 a {
  color: #434fff;
}
h2 a:hover, h6 a:hover {
  color: #202878;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
  color: #ffffff;
}

a:focus, a:hover {
  text-decoration: none;
  color: #ffffff;
}

abbr[title] {
  border-bottom: 1px dotted;
}

.box .form-group input {
  background-color: #fff;
} 

b,
strong {
  font-weight: 700;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
  max-width: 100%;
}

hr {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

code,
kbd,
pre,
samp {
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

select {
  text-transform: none;
}

button {
  overflow: visible;
}

button,
input,
select,
textarea {
  max-width: 100%;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
  opacity: .5;
}

.form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-right: 0.4375em;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #d1d1d1;
  margin: 0 0 1.75em;
  min-width: inherit;
  padding: 0.875em;
}

fieldset > :last-child {
  margin-bottom: 0;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

optgroup {
  font-weight: bold;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  border: 0 solid #1a1a1a;
  border-left-width: 4px;
  color: #434345;
  font-size: 20px;
  font-style: italic;
  line-height: 1.7;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

blockquote p {
  margin-bottom: 1.4736842105em;
}

blockquote cite,
blockquote small {
  color: #1a1a1a;
  display: block;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.75;
}

blockquote cite:before,
blockquote small:before {
  content: "\2014\00a0";
}

blockquote em,
blockquote i,
blockquote cite {
  font-style: normal;
}

blockquote strong,
blockquote b {
  font-weight: 400;
}

blockquote > :last-child {
  margin-bottom: 0;
}

address {
  font-style: italic;
  margin: 0 0 1.75em;
}

code,
kbd,
tt,
var,
samp,
pre {
  font-family: Inconsolata, monospace;
}

pre {
  border: 1px solid #d1d1d1;
  font-size: 14px;
  line-height: 1.3125;
  margin: 0 0 1.75em;
  max-width: 100%;
  overflow: auto;
  padding: 1.75em;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

code {
  background-color: #d1d1d1;
  padding: 0.125em 0.25em;
}

abbr,
acronym {
  border-bottom: 1px dotted #d1d1d1;
  cursor: help;
}

mark,
ins {
  background: #007acc;
  color: #fff;
  padding: 0.125em 0.25em;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/*--------------------------------------------------------------
# 1 Elements
--------------------------------------------------------------*/
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

hr {
  background-color: #000000;
  border: 0;
  height: 1px;
  margin: 0 0 1.75em;
}

ul,
ol {
  margin: 0;
  padding: 0;
  line-height: 1;
}

ul {
  list-style: none;
}

ol {
  list-style: decimal;
  margin-left: 1.5em;
}

li > ul,
li > ol {
  margin-bottom: 0;
}

dl {
  margin: 0 0 1.75em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 0 1.75em;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

del {
  opacity: 0.8;
}

table,
th,
td {
  border: 1px solid #d1d1d1;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  border-width: 1px 0 0 1px;
  margin: 0 0 1.75em;
  table-layout: fixed;
  width: 100%;
}

caption,
th,
td {
  font-weight: normal;
  text-align: left;
}

th {
  border-width: 0 1px 1px 0;
  font-weight: 700;
}

td {
  border-width: 0 1px 1px 0;
}

th,
td {
  padding: 0.4375em;
}

/*-------------------------- Forms ------------------------------------*/
input {
  line-height: normal;
}

button,
button[disabled]:hover,
button[disabled]:focus,
input[type="button"],
input[type="button"][disabled]:hover,
input[type="button"][disabled]:focus,
input[type="reset"],
input[type="reset"][disabled]:hover,
input[type="reset"][disabled]:focus,
input[type="submit"],
input[type="submit"][disabled]:hover,
input[type="submit"][disabled]:focus {
  border: 0;
  outline: 0;
  border-radius: 0;
  color: #000000;
  font-family: poppins, sans-serif;
  font-weight: 700;
  letter-spacing: 0.046875em;
  line-height: 1;
  text-transform: uppercase;
}

button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  outline: 0;
  border: none;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
  outline: none;
  outline-offset: 0;
  outline: 0;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea {
  background: transparent;
  border: none;
  border-radius: 0;
  color: #ffffff;
  padding: 20px 6px;
  width: 100%;
}

select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus {
  background-color: #fff;
  color: #000000;
  outline: 0;
  border: none;
}

/*-------------------------- Reset CSS Ends Here ------------------------------------*/
/*reset end here */
/*02 global css start here */
/*-------Global css-------*/
.bg-color-one {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#18d1ff+0,3bfd69+100 */
  background: #18d1ff;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #18d1ff 0%, #3cfe64 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #18d1ff 0%, #3cfe64 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient(315deg, #18d1ff 0%, #3cfe64 100%);
  background: -o-linear-gradient(315deg, #18d1ff 0%, #3cfe64 100%);
  background: linear-gradient(135deg, #18d1ff 0%, #3cfe64 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.bg-color-two {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6a12ff+0,18d1ff+50 */
  background: #434fff;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #434fff 0%, #18d1ff 50%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #434fff 0%, #18d1ff 50%);
  /* Chrome10-25,Safari5.1-6 */
  background: -o-linear-gradient(45deg, #434fff 0%, #18d1ff 50%);
  background: linear-gradient(45deg, #434fff 0%, #18d1ff 50%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.bg-color-two-d {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7102ff+0,19ceff+100 */
  background: #434fff;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #434fff 0%, #18d1ff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #434fff 0%, #18d1ff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient(315deg, #434fff 0%, #18d1ff 100%);
  background: -o-linear-gradient(315deg, #434fff 0%, #18d1ff 100%);
  background: linear-gradient(135deg, #434fff 0%, #18d1ff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.bg-color-two-c {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5249ff+0,18d1ff+100 */
  background: #434fff;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -o-linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  background: linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.bg-color-two-y {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1accff+0,6e08ff+100 */
  background: #18d1ff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #18d1ff 0%, #434fff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #18d1ff 0%, #434fff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#18d1ff), to(#434fff));
  background: -o-linear-gradient(top, #18d1ff 0%, #434fff 100%);
  background: linear-gradient(to bottom, #18d1ff 0%, #434fff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.bg-color-three {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1acdff+0,7200ff+84 */
  background: #1acdff;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #1acdff 0%, #7200ff 84%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #1acdff 0%, #7200ff 84%);
  /* Chrome10-25,Safari5.1-6 */
  background: -o-linear-gradient(45deg, #1acdff 0%, #7200ff 84%);
  background: linear-gradient(45deg, #1acdff 0%, #7200ff 84%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.section-padding {
  padding: 45px 0;
}

.section-padding-top {
  padding-top: 80px;
}

.section-padding-bottom {
  padding-bottom: 50px;
}

.section-padding-bottom-100 {
  padding-bottom: 100px;
}

.section-wrapper {
  width: 100%;
}

.section-padding-100 {
  padding: 100px 0;
}

.white-header h2 {
  color: #ffffff;
}

.white-header h2 span {
  color: #ffffff;
}

.mk-btn {
  padding: 14px 29px;
  display: inline-block;
  font-size: 15px;
  border-radius: 50px;
  position: relative;
  z-index: 1;
  margin: 2px 1px 2px;
}

.mk-btn:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 50px;
  opacity: 0;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3dff62+0,18d1ff+100 */
  background: #3cfe64;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #3cfe64 0%, #18d1ff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #3cfe64 0%, #18d1ff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient(315deg, #3cfe64 0%, #18d1ff 100%);
  background: -o-linear-gradient(315deg, #3cfe64 0%, #18d1ff 100%);
  background: linear-gradient(135deg, #3cfe64 0%, #18d1ff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  z-index: -1;
}

.mk-btn:hover:after {
  opacity: 1;
}

.mk-btn i {
  padding-left: 10px;
}

/* Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 99;
  /* makes sure it stays on top */
  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;
}

.proloader-inner {
  display: block;
  position: relative;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #9370DB;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.proloader-inner:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #BA55D3;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

.proloader-inner:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #FF00FF;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*global css end here */
/*03 menu css start here*/
.mk-mobile-menu-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  -webkit-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
  background: #434fff;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
  z-index: 99;
}

.mk-header.mk-fixed-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 11;
}

.mk-header {
  background: rgba(25, 40, 73, 0.65);
  padding: 29px 0;
}

.mk-nav {
  width: 100%;
}

.mk-nav-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.mk-mobile-menu-icon {
  width: 28px;
  cursor: pointer;
  display: none;
  z-index: 30;
}

nav.mk-menu-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.mk-mobile-menu-area.show-mobile-menu {
  -webkit-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
}

.main-menu > li > .submenu {
  position: absolute;
  top: 108%;
  left: 0;
  width: 250px;
  background-color: #18d1ff;
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px);
  visibility: hidden;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
  opacity: 0;
  z-index: 4444;
}

.main-menu > li > .submenu li a {
  display: block;
  padding: 10px 15px;
  font-size: 14px;
}

.mk-header.mk-fixed-header.mk-header-v1.mk-sticky-nav .main-menu > li > .submenu {
  background-color: #17182e;
}

.submenu li:hover > a {
  background-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
  padding-left: 20px;
}

.main-menu > li:hover > .submenu {
  visibility: visible;
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
  opacity: 1;
}

.mk-mobile-menu-icon .icon-bar {
  width: 30px;
  height: 4px;
  margin-bottom: 5px;
  background-color: #ffffff;
}

.mk-menu-area > ul > li {
  display: inline-block;
  padding: 0 12px;
  position: relative;
}

.mk-menu-area > ul > li > a {
  display: block;
  position: relative;
  color: #ffffff;
  font-size: 16px;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
  position: relative;
}

.mk-menu-area > ul > li > a:hover {
  color: #18d1ff;
}

.mk-menu-area > ul > li > a::after {
  width: 0;
  height: 2px;
  background: #ffffff;
  content: "";
  position: absolute;
  top: 100%;
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
  left: 0;
}

.mk-menu-area > ul > li.active > a {
  color: #18d1ff;
}

.mk-menu-area > ul > li > a:hover:after {
  width: 50%;
}

.mk-menu-area > ul > li.active > a:after {
  width: 50%;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.mk-header.mk-sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  padding: 22px 0;
  width: 100%;
  background: #17182e;
  z-index: 11;
  opacity: 0;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.mk-mobile-menu-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 10px 15px;
  padding-top: 25px;
}

.mk-menu-close-icon i {
  color: #ffffff;
  font-size: 33px;
}

ul.mk-m-menu {
  margin-left: 12px;
  text-align: center;
}

ul.mk-m-menu li {
  padding: 10px 0;
}

.mk-mobile-menu-area-inner {
  text-align: center;
}

.mk-mobile-menu-area-inner .mk-btn {
  margin: 0;
}

.mk-mobile-menu-area.show-mobile-menu .down-btn {
  padding: 6px 13px;
  font-size: 13px;
  margin-left: 5px;
}

.mk-menu-close-icon.mk-mobile-menu-icon .icon-bar:nth-child(1) {
  -webkit-transform: rotate(45deg) translateY(15px);
  -ms-transform: rotate(45deg) translateY(15px);
  transform: rotate(45deg) translateY(15px);
}

.mk-menu-close-icon.mk-mobile-menu-icon .icon-bar:nth-child(2) {
  -webkit-transform: rotate(-45deg) translate(-8px, -6px);
  -ms-transform: rotate(-45deg) translate(-8px, -6px);
  transform: rotate(-45deg) translate(-8px, -6px);
}

nav.mk-menu-area .mk-btn {
  margin-left: 28px;
}

/*menu css end here*/
/*04 banner section start here*/
.mk-banner {
  position: relative;
  height: 768px;
  /*background-image: url(../images/banner/material-bg.png); */
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}

.mk-banner .overlay {
  opacity: 1;
  z-index: -1;
}

section.mk-banner.banner-v2 {
  height: 550px;
}

.banner-item {
  position: absolute;
  top: 60%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  left: 0;
}

.banner-content {
  padding: 63px 0;
}

.banner-content p {
  color: #ffffff;
  font-size: 25px;
  margin-bottom: 100px;
}

.banner-btn-area a, .banner-btn-area button {
  border: 1px solid #ffffff;
  margin-right: 30px;
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
  margin-bottom: 30px;
  background: transparent;
}

.banner-btn-area a:nth-child(1) {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#18d1ff+0,3bfd69+100 */
  background: #18d1ff;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #18d1ff 0%, #3cfe64 100%);
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient(315deg, #18d1ff 0%, #3cfe64 100%);
  background: -o-linear-gradient(315deg, #18d1ff 0%, #3cfe64 100%);
  background: linear-gradient(135deg, #18d1ff 0%, #3cfe64 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border: 1px solid transparent;
}

.banner-btn-area a:nth-child(1):hover {
  background: transparent;
  -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.25);
}

.banner-btn-area a:nth-child(2):hover, .banner-btn-area button:nth-child(1):hover {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#18d1ff+0,3bfd69+100 */
  background: #18d1ff;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #18d1ff 0%, #3cfe64 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #18d1ff 0%, #3cfe64 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -o-linear-gradient(315deg, #18d1ff 0%, #3cfe64 100%);
  background: linear-gradient(135deg, #18d1ff 0%, #3cfe64 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border: 1px solid transparent;
  -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.25);
}

.scroll-bottom {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
}

.scroll-bottom-item {
  display: inline-block;
  border: 2px solid #ffffff;
  padding: 23px 6px 0px;
  border-radius: 14px;
}

.scroll-bottom-item i {
  color: #ffffff;
  -webkit-animation: upDown 1s infinite alternate;
  animation: upDown 1s infinite alternate;
  font-size: 10px;
}

.banner-content-area {
  position: relative;
}

.mk-banner-thumb {
  position: relative;
  height: 100%;
}

.mk-banner-thumb .banner-thumb-inner {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.mk-banner-thumb img {
  height: 100%;
}

section.mk-banner.banner-v2 .banner-content {
  width: 70%;
  margin: 0 auto;
}

@-webkit-keyframes upDown {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes upDown {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/*banner section end here*/
/*05 feature section start here*/
.section-header {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 60px;
}

.section-header p {
  font-size: 20px;
}

.mk-feature-item {
  text-align: center;
  padding: 20px;
  position: relative;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  margin: 5px 0;
  border-radius: 10px;
  margin-bottom: 25px;
}

.mk-feature-item .feature-item-thumb {
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 0 auto;
  border-radius: 100%;
  margin-bottom: 20px;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.mk-feature-item h6 {
  margin-bottom: 15px;
}

.mk-feature-item:after {
  position: absolute;
  content: "";
  width: 162px;
  height: 2px;
  background: #303030;
  top: 99%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.mk-feature-item:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 10px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7102ff+0,19ceff+100 */
  background: #434fff;
  /* Old browsers */
  background: -moz-linear-gradient(left, #434fff 0%, #18d1ff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #434fff 0%, #18d1ff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, right top, from(#434fff), to(#18d1ff));
  background: -o-linear-gradient(left, #434fff 0%, #18d1ff 100%);
  background: linear-gradient(to right, #434fff 0%, #18d1ff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  bottom: 0;
  left: 0;
  border-radius: 0 0 10px 10px;
  z-index: 9;
  -webkit-transform-origin: bottom;
  -ms-transform-origin: bottom;
  transform-origin: bottom;
  -webkit-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.mk-feature-item:hover {
  -webkit-box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.15);
}

.mk-feature-item:hover:before {
  -webkit-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
}

.mk-feature-item:hover .feature-item-thumb {
  background: #f2f3ff;
}

.mk-feature-item:hover .feature-item-content h6 {
  color: #434fff;
}

.feature-item-content h6 {
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
.feature-item-content a {
    color: #434fff;    
}

.mk-feature-slider {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

/*work item area*/
.work-item-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.work-item {
  width: 46%;
  -webkit-box-shadow: 1px 1px 1px 1px #ddd;
  box-shadow: 1px 1px 1px 1px #ddd;
  position: relative;
  padding: 25px 30px 40px 50px;
  border-radius: 0px 10px 10px 10px;
  position: relative;
  margin-bottom: 50px;
}

.work-item:after {
  position: absolute;
  content: "";
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1accff+0,6e08ff+100 */
  background: #18d1ff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #18d1ff 0%, #434fff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #18d1ff 0%, #434fff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#18d1ff), to(#434fff));
  background: -o-linear-gradient(top, #18d1ff 0%, #434fff 100%);
  background: linear-gradient(to bottom, #18d1ff 0%, #434fff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
  border-radius: 0px 10px 10px 0px;
  transition: .4s;
}

.work-item:hover {
  -webkit-box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.15);
}

.work-item:hover:after {
  width: 9px;
}

.work-item:hover .cycle-item span {
  background: #434fff;
}

.work-item:hover .works-item-content h5 {
  color: #434fff;
}
.works-item-content h5 a {
  color: #434fff;
}

.work-item:hover .work-item-inner h2 {
  color: #434fff;
}

.work-item-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.works-item-content h5 {
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
  margin-bottom: 17px;
}

.cycle-item {
  min-width: 80px;
  height: 80px;
  border-radius: 100%;
  border-right: 2px solid #ddd;
  -webkit-box-shadow: 1px 0px 2px 0px #ddd;
  box-shadow: 1px 0px 2px 0px #ddd;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  left: 0;
  z-index: 9;
  background: #ffffff;
  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;
}

.work-item h2 {
  font-size: 120px;
  color: #f2f3ff;
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
  font-weight: 100;
  line-height: 1;
  margin-right: 8px;
}

.cycle-item {
  min-width: 80px;
  height: 80px;
  border-radius: 100%;
  border-right: 2px solid #ddd;
  -webkit-box-shadow: 2px 0px 2px 1px #ddd;
  box-shadow: 2px 0px 2px 1px #ddd;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  left: 0;
  z-index: 9;
  background: #ffffff;
  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;
}

.cycle-item span {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: 3px solid #434fff;
  display: inline-block;
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
}

.work-item-thumb {
  -webkit-animation: works 2s infinite alternate;
  animation: works 2s infinite alternate;
  margin-bottom: 30px;
}

.mk-app-slider-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}

.mk-app-slider-pagination .swiper-pagination-bullet {
  width: 15px;
  height: 7px;
  display: inline-block;
  border-radius: 6px;
  background: #e5e7ff;
  opacity: 1;
  margin: 0 3px;
}

.mk-app-slider-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 30px;
  background: #434fff;
}

@-webkit-keyframes works {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes works {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/*feature section end here*/
/*06 watch section start here*/
.mk-watch-section {
  /* background: url("../images/light/light.png") no-repeat center center/cover;*/
  position: relative;
  padding: 180px 0;
}

.overlay {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
  opacity: .8;
  z-index: 0;
}

.mk-watch-section h2 {
  color: #ffffff;
  padding-bottom: 40px;
}

.mk-watch-section h2 span {
  color: #ffffff;
  display: inline-block;
}

.mk-watch-content {
  z-index: 1;
  width: 100%;
}

.play-area {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 100%;
  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;
}

.play-area span {
  width: 66px;
  height: 66px;
  border-radius: 100%;
  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;
  z-index: 9;
}

.play-area span i {
  color: #ffffff;
  font-size: 15px;
  border: 2px solid #ffffff;
  width: 36px;
  height: 36px;
  line-height: 34px;
  text-align: center;
  border-radius: 100%;
}

.wpb_wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  border: none;
}

.stm_wave_pulse {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.stm_wave_pulse:after, .stm_wave_pulse:before {
  content: '';
  display: block;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0px solid rgba(255, 255, 255, 0.3);
  -webkit-animation: stm_zoom_big 3.75s linear 3.75s infinite;
  animation: stm_zoom_big 3.75s linear 3.75s infinite;
}

.stm_wave_pulse_1:before {
  -webkit-animation-delay: .75s;
  animation-delay: .75s;
}

.stm_wave_pulse_1:after {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.stm_wave_pulse_2:before {
  -webkit-animation-delay: 2.25s;
  animation-delay: 2.25s;
}

.stm_wave_pulse_2:after {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.stm_wave_pulse_3:before {
  -webkit-animation-delay: 3.75s;
  animation-delay: 3.75s;
}

.stm_wave_pulse_3:after {
  -webkit-animation-delay: 4.5s;
  animation-delay: 4.5s;
}

.stm_wave_pulse_4:before {
  -webkit-animation-delay: 5.25s;
  animation-delay: 5.25s;
}

.stm_wave_pulse_4:after {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

@-webkit-keyframes stm_zoom_big {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    border: 1px solid white;
  }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
    border: 1px solid white;
  }
}

@keyframes stm_zoom_big {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    border: 1px solid white;
  }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
    border: 1px solid white;
  }
}

/*watch section end here*/
/*07 watch section start here*/
.mk-secreenshots-left {
  margin-right: 30px;
}

.mk-secreenshots-left p {
  margin-bottom: 30px;
  line-height: 2;
}

.mk-secreenshots-right {
  height: 540px;
  position: relative;
}

.mk-secreenshots-right .screen-mobile-image {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 2;
}

.appScreenshotCarousel-container {
  overflow: hidden;
  height: 100%;
  padding: 72px 0;
}

.appScreenshotCarousel-container .swiper-slide-active {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  z-index: 999;
  overflow: hidden;
  position: relative;
}

.appScreenshotCarousel-container .swiper-slide-prev,
.appScreenshotCarousel-container .swiper-slide-next {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  z-index: 1;
}

.appScreenshotCarousel-container .swiper-slide {
  opacity: .2;
}

.appScreenshotCarousel-container .swiper-slide.swiper-slide-active {
  opacity: 1;
}

.mk-secreenshots-left .section-header {
  width: 100%;
  text-align: left;
  margin-bottom: 60px;
}

.screenshots-slider-content h1 {
  font-size: 120px;
  color: #f2f3ff;
  line-height: 1;
  margin-bottom: 0;
  border-bottom: 1px solid #000;
}

.appScreenshotCarousel-button-prev {
  left: 12%;
  right: auto;
}

.appScreenshotCarousel-button-next {
  right: 12%;
  left: auto;
}

.appScreenshotCarousel-button-next, .appScreenshotCarousel-button-prev {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background: #434fff;
  border-radius: 100%;
  opacity: .2;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

.appScreenshotCarousel-button-next:hover, .appScreenshotCarousel-button-prev:hover {
  opacity: 1;
}

.appScreenshotCarousel-button-next:hover .appScreenshotCarousel-button-icon, .appScreenshotCarousel-button-prev:hover .appScreenshotCarousel-button-icon {
  visibility: hidden;
}

.appScreenshotCarousel-button-next:hover .appScreenshotCarousel-button-icon-active, .appScreenshotCarousel-button-prev:hover .appScreenshotCarousel-button-icon-active {
  visibility: visible;
}

.appScreenshotCarousel-button-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.appScreenshotCarousel-button-inner .appScreenshotCarousel-button-icon-active, .appScreenshotCarousel-button-inner .appScreenshotCarousel-button-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #ffffff;
}

.appScreenshotCarousel-button-inner .appScreenshotCarousel-button-icon-active i, .appScreenshotCarousel-button-inner .appScreenshotCarousel-button-icon i {
  font-size: 20px;
}

.appScreenshotCarousel-button-inner .appScreenshotCarousel-button-icon {
  visibility: visible;
}

.appScreenshotCarousel-button-inner .appScreenshotCarousel-button-icon-active {
  visibility: hidden;
}

ul.secreenshort-item-list li {
  font-weight: 500;
  font-weight: 500;
  line-height: 2;
}

ul.secreenshort-item-list li i {
  color: #434fff;
  margin-right: 5px;
}

/*watch section end here*/
/* 08 client section start here*/
.mk-client-logo-section {
  background: #f2f3ff;
  padding: 65px 25px;
}

.mk-client-slider {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.mk-client-item {
  padding: 30px;
  -webkit-box-shadow: 1px 1px 1px 1px #ddd;
  box-shadow: 1px 1px 1px 1px #ddd;
  margin: 10px;
  border-radius: 0px 10px 10px 10px;
  margin-top: 50px;
  padding-top: 20px;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.mk-client-item > p {
  font-size: 15px;
  font-weight: 300;
  margin-top: 25px;
}

.mk-client-item:hover {
  -webkit-box-shadow: 1px 1px 26px 1px #ddd;
  box-shadow: 1px 1px 26px 1px #ddd;
}

.mk-client-item:hover .client-thumb {
  -webkit-box-shadow: 1px 20px 26px 1px #ddd;
  box-shadow: 1px 20px 26px 1px #ddd;
}

.client-item-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.client-thumb {
  margin-right: 15px;
  border: 2px solid #434fff;
  border-radius: 0px 10px 10px 10px;
  -webkit-transform: translateY(-67px);
  -ms-transform: translateY(-67px);
  transform: translateY(-67px);
  position: absolute;
  width: 100px;
  -webkit-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  top: 35%;
}

.client-thumb img {
  border-radius: 0px 10px 8px 7px;
  width: 100%;
}

.client-top-content {
  margin-left: 27%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 73%;
}

.client-top-content i {
  color: #f2f3ff;
  font-size: 37px;
}

.client-top-content h6 {
  color: #434fff;
  font-weight: 700;
}
.client-top-content a {
  color: #434fff;
}

.client-top-content p {
  font-size: 15px;
  font-weight: 500;
}

.client-logo-slider-container {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.client-logo-slider-container .swiper-slide img {
  margin: 0 20px;
}

/*client section end here*/
/*09 pricing section start here*/
.mk-pricing-count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.mk-pricing-count h6 {
  font-size: 16px;
  color: #303030;
  font-weight: 400;
  margin: 0 10px;
}

.count-select-area {
  width: 80px;
  height: 40px;
  border: 3px solid #f2f2f2;
  border-radius: 36px;
  -webkit-box-shadow: 0px 0px 26px 5px #ddd;
  box-shadow: 0px 0px 26px 5px #ddd;
  position: relative;
  cursor: pointer;
}

.count-select-area span.count-btn {
  width: 45px;
  height: 32px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5249ff+0,18d1ff+100 */
  background: #434fff;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -o-linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  background: linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  position: absolute;
  left: 1px;
  top: 1px;
  border-radius: 50px;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

span.count-btn.right {
  left: 30px;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.pricing-item-area .col-md-6 {
  margin-bottom: 30px;
}

.pricing-item {
  height: 100%;
  text-align: center;
  -webkit-box-shadow: 0px 0px 6px 1px #ddd;
  box-shadow: 0px 0px 6px 1px #ddd;
  border: 2px solid #ffffff;
  border-radius: 19px;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.pricing-item:hover {
  -webkit-box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.25);
}

.pricing-item:hover .pricing-item-wrapper:after {
  opacity: 1;
}

.pricing-item:hover .start-btn {
  color: #ffffff;
  -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.25);
}

.pricing-item:hover .start-btn:after {
  opacity: 1;
}

.pricing-item:hover ul.pricing-list li {
  color: #ffffff;
}

.pricing-item:hover .pricing-item-header {
  background: #ffffff;
}

.pricing-item:hover ul.pricing-list li .separetor:after {
  -webkit-box-shadow: 0px 0 6px -1px #fff;
  box-shadow: 0px 0 6px -1px #fff;
}

.pricing-item-wrapper {
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  position: relative;
  height: 75%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.pricing-item-wrapper:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 97%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5249ff+0,18d1ff+100 */
  background: #434fff;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -o-linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  background: linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  top: 0%;
  left: 0%;
  border-radius: 0px 0px 15px 15px;
  z-index: -1;
  opacity: 0;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.pricing-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.pricing-item-header {
  background: #f2f3ff;
  padding: 4px 0;
  border-radius: 19px 19px 0px 0px;
  position: relative;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  padding-bottom: 22px;
}

.pricing-item-header h3 {
  color: #434fff;
  margin-bottom: 38px;
  margin-top: 17px;
}

.pricing-item-header p {
  color: #434fff;
  font-size: 22px;
  font-weight: 400;
  padding: 11px 10px;
}

.pricing-item-header p span {
  font-size: 70px;
  font-weight: 700;
}

.pricing-item-header p small {
  font-size: 35px;
  font-weight: 300;
}

.header-content {
  color: #434fff;
  font-size: 22px;
  font-weight: 200;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  padding: 17.5px;
}

.header-content .product-price {
  font-size: 70px;
  font-weight: 700;
  line-height: 1;
}

.header-content sapn.product-duration {
  margin-bottom: 3px;
}

.header-content small {
  font-size: 35px;
}

ul.pricing-list {
  padding: 20px 0;
  width: 100%;
}

.pricing-list li {
  color: #303030;
  font-size: 16px;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  margin-top: 5px;
}

.separetor {
  overflow: hidden;
  height: 6px;
  margin-top: 10px;
}

.separetor:after {
  content: '';
  display: block;
  margin: -25px auto 0;
  width: 90%;
  height: 25px;
  border-radius: 125px / 12px;
  -webkit-box-shadow: 0px 0 6px -1px black;
  box-shadow: 0px 0 6px -1px black;
}

.start-btn {
  color: #434fff;
  width: 215px;
  border: 2px solid #434fff;
  display: inline-block;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 12px 0px;
  border-radius: 50px;
  font-size: 16px;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.start-btn:after {
  position: absolute;
  content: "";
  width: 102%;
  height: 108%;
  left: -2px;
  border-radius: 50px;
  top: -2px;
  opacity: 0;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#18d1ff+0,3bfd69+100 */
  background: #18d1ff;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #18d1ff 0%, #3cfe64 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #18d1ff 0%, #3cfe64 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient(315deg, #18d1ff 0%, #3cfe64 100%);
  background: -o-linear-gradient(315deg, #18d1ff 0%, #3cfe64 100%);
  background: linear-gradient(135deg, #18d1ff 0%, #3cfe64 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  z-index: -1;
}

.start-btn:hover:after {
  opacity: 1;
}

.recommended {
  position: absolute;
  background: #434fff;
  padding: 2px 5px;
  top: 24%;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.recommended P {
  color: #ffffff;
  font-size: 12px;
}

.recommended .recommended-inner {
  position: relative;
}

.recommended .recommended-inner:after {
  content: "";
  position: absolute;
  top: 46%;
  left: -35px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 24px 34px 0 0;
  border-color: transparent #434fff transparent transparent;
}

.recommended .recommended-inner:before {
  content: "";
  position: absolute;
  top: -5%;
  left: -35px;
  width: 0;
  height: 0;
  border-top: 10px solid #434fff;
  border-right: 20px solid #434fff;
  border-bottom: 15px solid #434fff00;
  border-left: 14px solid #434fff00;
}

.mk-pricing-percent {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  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;
  position: relative;
}

.percent-content {
  color: #ffffff;
}

.percent-content span {
  font-size: 10px;
}

.percent-content p {
  color: #fff;
  font-size: 10px;
  line-height: 1;
  text-align: center;
}

.pricing-img-overlay {
  position: absolute;
  top: -24px;
  width: 80px;
  left: -59px;
}

/*pricing section end here*/
/*10 download section start here*/
.download-section {
  background: #f2f3ff;
}

.counter-item {
  background: #ffffff;
  text-align: center;
  position: relative;
  border-radius: 0 20px 20px 20px;
  padding: 70px 0 35px;
}

.counter-thumb {
  width: 85px;
  height: 85px;
  position: absolute;
  top: -41px;
  background: #ffffff;
  padding: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 0 35px 35px 35px;
}

.count {
  font-size: 100px;
  font-weight: 100;
  line-height: 1;
}

.counter-area {
  margin: 45px 0;
}

.download-item {
  width: 28%;
  border-radius: 50px;
  position: relative;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.download-item:hover .download-item-inner {
  background: transparent;
}

.download-item:hover {
  -webkit-box-shadow: 0px 5px 24px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 5px 24px 1px rgba(0, 0, 0, 0.3);
}

.download-item:hover .download-thumb i {
  color: #ffffff;
  -webkit-text-fill-color: inherit;
}

.download-item:hover .download-content h4 {
  color: #ffffff;
  -webkit-text-fill-color: inherit;
}

.download-item:hover .download-content span {
  color: #ffffff;
}

.download-item-inner {
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 40px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #f2f3ff;
  margin: 3px;
  border-radius: 50px;
}

.download-thumb {
  margin-right: 20px;
}

.download-item-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.download-content span {
  font-size: 12px;
  color: #18d1ff;
  z-index: 9;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.download-content h4 {
  line-height: 1;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5249ff+0,18d1ff+100 */
  background: #434fff;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -o-linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  background: linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  z-index: 9;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  font-size: 18px;
}

.download-thumb i {
  font-size: 40px;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5249ff+0,18d1ff+100 */
  background: #434fff;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -o-linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  background: linear-gradient(45deg, #434fff 0%, #18d1ff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  z-index: 9;
}

/*download section end here*/
/*11 blog section start here*/
.mk-blog-slider {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.blog-item {
  -webkit-box-shadow: 1px 1px 1px 1px #ddd;
  box-shadow: 1px 1px 1px 1px #ddd;
  border-radius: 0px 15px 15px 15px;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.blog-item:hover .blog-content-bottom:after {
  opacity: 1;
}

.blog-item:hover {
  -webkit-box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.25);
}

.blog-item:hover .blog-content-top h6 {
  color: #434fff;
}

.blog-item:hover .blog-content-bottom .read-more {
  background: #fff;
  color: #434fff;
}

.blog-item:hover .blog-content-bottom ul li {
  color: #fff;
}

.blog-thumb {
  overflow: hidden;
  border-radius: 0 15px 0 0;
}

.blog-thumb img {
  width: 100%;
  height: 250px;
}

.blog-content-top {
  padding: 15px 12px;
}

.blog-content-top h6 {
  font-size: 18px;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.blog-content-top h6 a {
  color: #434fff;
}

.blog-content-top p {
  font-size: 14px;
}

.meta-post {
  padding-bottom: 20px;
  padding-top: 5px;
  font-size: 12px;
  font-family: roboto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.meta-post .meta-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.meta-post span span {
  color: #434fff;
  font-weight: 500;
}

.meta-post span.author {
  margin-right: 30px;
}

.blog-content-bottom {
  background: #f2f3ff;
  border-radius: 0px 0px 15px 15px;
  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;
  padding: 13px 15px;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
  position: relative;
  z-index: 1;
}

.blog-content-bottom:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 0px 0px 15px 15px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7102ff+0,19ceff+100 */
  background: #434fff;
  /* Old browsers */
  background: -moz-linear-gradient(left, #434fff 0%, #18d1ff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #434fff 0%, #18d1ff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, right top, from(#434fff), to(#18d1ff));
  background: -o-linear-gradient(left, #434fff 0%, #18d1ff 100%);
  background: linear-gradient(to right, #434fff 0%, #18d1ff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  opacity: 0;
  z-index: -1;
}

a.read-more {
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #434fff;
  padding: 5px 15px;
  color: #434fff;
  border-radius: 25px;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

ul.reviews {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

ul.reviews li {
  padding-left: 18px;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  font-size: 10px;
}

ul.reviews li i {
  padding-right: 10px;
  font-size: 16px;
}

section.single-blog-section .blog-item {
  margin-bottom: 50px;
}

section.single-blog-section .blog-item img {
  text-align: center;
}

section.single-blog-section .search-area .input input[type="text"] {
  padding: 17px 0 17px 20px;
  color: #ddd;
  border: 1px solid #ddd;
}

section.single-blog-section .search-area button.submit {
  padding: 14px 34px;
  border-radius: 50px;
}

section.single-blog-section .search-area .input {
  width: 100%;
}

section.single-blog-section .blog-slidebar-item {
  margin-top: 50px;
}

section.single-blog-section .blog-slidebar-item h6 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

section.single-blog-section ul.category-item li {
  padding: 2px 0;
  color: #303030;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  font-size: 14px;
}

section.single-blog-section ul.category-item li:hover {
  color: #434fff;
}

.small-blog-item .blog-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.small-blog-item .blog-item:hover .blog-thumb img {
  -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.25);
}

.small-blog-item .blog-item:hover .blog-thumb:after {
  opacity: .5;
}

.small-blog-item .blog-item:hover .blog-thumb .blog-thumb-overly {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.small-blog-item .blog-content-top {
  padding: 0;
  padding-left: 15px;
}

.blog-slidebar-item .small-blog-item .blog-content-top h6 {
  font-size: 14px;
  margin-bottom: 0;
}

.small-blog-item .meta-post {
  padding-bottom: 0;
}

.small-blog-item .blog-thumb {
  position: relative;
  width: 120px;
}

.small-blog-item .blog-thumb:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7102ff+0,19ceff+100 */
  background: #434fff;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #434fff 0%, #18d1ff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #434fff 0%, #18d1ff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient(315deg, #434fff 0%, #18d1ff 100%);
  background: -o-linear-gradient(315deg, #434fff 0%, #18d1ff 100%);
  background: linear-gradient(135deg, #434fff 0%, #18d1ff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border-radius: 7px;
  opacity: 0;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 0;
}

.small-blog-item .blog-thumb img {
  border-radius: 7px;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.small-blog-item .blog-thumb .blog-thumb-overly {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width: 20px;
  height: 20px;
  line-height: 18px;
  border-radius: 100%;
  border: 1px solid #fff;
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  z-index: 11;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.small-blog-item .blog-thumb .blog-thumb-overly i {
  font-size: 12px;
  color: #fff;
}

section.single-blog-section .small-blog-item .blog-item {
  margin-bottom: 30px;
}

ul.tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

ul.tags li {
  border: 1px solid #ddd;
  padding: 2px 10px;
  margin-right: 10px;
  font-size: 14px;
  margin-bottom: 20px;
  z-index: 1;
  position: relative;
}

ul.tags li:hover {
  color: #fff;
}

ul.tags li:hover:after {
  opacity: 1;
}

ul.tags li:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7102ff+0,19ceff+100 */
  background: #434fff;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #434fff 0%, #18d1ff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #434fff 0%, #18d1ff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient(315deg, #434fff 0%, #18d1ff 100%);
  background: -o-linear-gradient(315deg, #434fff 0%, #18d1ff 100%);
  background: linear-gradient(135deg, #434fff 0%, #18d1ff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  opacity: 0;
  z-index: -1;
}

.blog-pagination.text-center {
  width: 100%;
}

.blog-pagination.text-center nav {
  display: inline-block;
}

.blog-pagination .page-link {
  padding: .5rem 0;
  color: #303030;
  border: none;
}

.blog-pagination li.page-item {
  margin: 0 11px;
}

.blog-pagination .page-item.active .page-link {
  z-index: 1;
  color: #434fff;
  border-bottom: 1px solid #434fff;
  background: transparent;
}

section.single-blog-section.post-details .blog-item.blog-item-details .blog-thumb {
  background: #fff;
  padding: 20px;
  border-radius: 0 15px 0 0;
  -webkit-box-shadow: 0px -25px 25px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px -25px 25px 0px rgba(0, 0, 0, 0.15);
  margin-top: -30%;
}

section.single-blog-section.post-details .blog-item.blog-item-details {
  -webkit-box-shadow: none;
  box-shadow: none;
}

section.single-blog-section.post-details .blog-content-top p {
  margin-bottom: 30px;
}

section.single-blog-section .blog-item.blog-item-details {
  margin-bottom: 0;
}

p.quate-para {
  position: relative;
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  color: #434fff;
  font-style: italic;
  padding: 30px 65px 35px 75px !important;
  line-height: 30px;
}

.quate-para:before {
  position: absolute;
  top: 14%;
  left: 0%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 34px;
  color: #d6d6d6;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f10d";
}

.quate-para:before {
  position: absolute;
  top: 14%;
  left: 0%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 34px;
  color: #d6d6d6;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f10d";
}

.quate-para:after {
  position: absolute;
  bottom: 2%;
  right: 4%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 34px;
  color: #d6d6d6;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f10e";
}

.blog-item-light {
  margin-bottom: 30px;
}

.blog-item-light-thumb {
  background: url("../images/blog/blog-light.png") no-repeat center center/cover;
  height: 350px;
  position: relative;
  border-radius: 0 15px 15px 15px;
}

.blog-item-light-thumb .overlay {
  border-radius: 0 15px 15px 15px;
}

.blog-item-light-thumb .play-area {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.blog-item-light-thumb .play-area span {
  background: #434fff;
}

.blog-item-light-content {
  padding: 26px 0;
}

.blog-item-light-content P {
  margin: 15px 0;
  display: inline-block;
}

.share-blog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.share-blog h6 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  margin-right: 20px;
}

.share-blog ul.social-icon-list li {
  color: #303030;
  padding: 0 10px;
}

.share-blog ul.social-icon-list li i {
  font-size: 25px;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

.share-blog ul.social-icon-list li i:hover {
  color: #434fff;
}

.comments-area > h6 {
  margin: 60px 0 80px;
}

ul.comment-list > li {
  margin-bottom: 86px;
}

ul.comment-list li .comment-item {
  -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
  padding: 15px 25px 10px;
  border-radius: 0 20px 20px 20px;
  width: 90%;
}

ul.comment-list li ul.children > li {
  margin-top: 85px;
}

ul.comment-list li ul.children .comment-item {
  margin-left: 10%;
  border-radius: 20px 0 20px 20px;
  text-align: right;
}

ul.comment-list li ul.children .comment-item .comment-author {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

ul.comment-list li ul.children .comment-item .comment-author .comment-author-thumb {
  margin-right: 0;
  right: 0;
}

ul.comment-list li ul.children .comment-item .comment-author .comment-author-content {
  margin-right: 116px;
}

ul.comment-list li ul.children .comment-item .comment-body ul.reviews {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.comment-author {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

.comment-author .comment-author-content {
  margin-left: 116px;
}

.comment-author .comment-author-thumb {
  margin-right: 15px;
  border: 2px solid blue;
  border-radius: 0px 10px 10px 10px;
  -webkit-transform: translateY(-67px);
  -ms-transform: translateY(-67px);
  transform: translateY(-67px);
  position: absolute;
  width: 100px;
  -webkit-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  top: 35%;
}

.comment-author .comment-author-thumb img {
  border-radius: 0 10px 10px 8px;
}

.comment-body ul.reviews li {
  color: #676767;
}

.comment-body p {
  margin: 8px 0 16px;
}

h6.comments-title {
  font-size: 18px;
  font-weight: 600;
}

.contact-form-area textarea {
  height: 175px;
  border: 1px solid #d7d7d7;
  color: #d7d7d7;
  border-radius: 30px;
  padding: 19px 30px;
}

.contact-form-area input {
  border: 1px solid #d7d7d7;
  color: #d7d7d7;
  padding: 30px 0 30px 25px;
  border-radius: 50px;
  margin-bottom: 30px;
}

.contact-form-area h6.comments-title {
  margin-bottom: 50px;
}

.raleted-post h6.comments-title {
  margin: 100px 0 60px 0;
}

button.submit-btn.bg-color-one {
  width: 200px;
  color: #fff;
  padding: 16px 0;
  border-radius: 50px;
  position: relative;
  z-index: 1;
}

button.submit-btn.bg-color-one:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 50px;
  opacity: 0;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3dff62+0,18d1ff+100 */
  background: #3cfe64;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #3cfe64 0%, #18d1ff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #3cfe64 0%, #18d1ff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient(315deg, #3cfe64 0%, #18d1ff 100%);
  background: -o-linear-gradient(315deg, #3cfe64 0%, #18d1ff 100%);
  background: linear-gradient(135deg, #3cfe64 0%, #18d1ff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  z-index: -1;
}

button.submit-btn.bg-color-one:hover:after {
  opacity: 1;
}

/*blog section end here*/
/*12 subcriber section start here*/
.mk-subcriber-section {
  /* background-image: url(../images/subscription/sub-bg-tr.png);*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 85px 0;
  text-align: center;
  width: 100%;
  position: relative;
}

.mk-subcriber-section .overlay {
  z-index: -1;
  opacity: 1;
}

.newsletter {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  padding: 70px 0;
}

.input {
  position: relative;
  width: 76%;
  margin: 0 auto;
}

.input ::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.input ::-moz-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.input ::-ms-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.input ::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.input :-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.input ::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.input ::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.input input[type="text"] {
  border: 1px solid #ffffff;
  color: #ffffff;
  border-radius: 50px;
  padding: 33px 0 33px 20px;
}

button.submit {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  position: absolute;
  top: 0;
  right: 0;
  padding: 32px 45px;
  border-radius: 50px;
  height: 100%;
}

button.submit i {
  padding-left: 10px;
}

ul.social-icon-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

ul.social-icon-list li {
  color: #ffffff;
  padding: 0 16px;
}

ul.social-icon-list li i {
  font-size: 40px;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

ul.social-icon-list li i:hover {
  color: #35d7ff;
}

.input input[type="text"]:focus {
  background: transparent;
}

/*subcriber section end here*/
/*13 footer section start here*/
.mk-footer-section {
  background: #17182e;
}

.mk-footer-section .separetor {
  width: 100%;
}

.mk-footer-section .separetor:after {
  -webkit-box-shadow: 0 0 3px #fff;
  box-shadow: 0 0 3px #fff;
}

.footer-top {
  width: 100%;
  padding: 70px 0;
}

.footer-top ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.footer-top ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.footer-top ul li i {
  font-size: 35px;
  margin-right: 30px;
}

.footer-top ul li p {
  color: #ffffff;
}

.footer-top ul li.phone i {
  color: #18d1ff;
}

.footer-top ul li.message i {
  color: #3cfe64;
}

.footer-top ul li.place i {
  color: #18d1ff;
}

.footer-bottom {
  width: 100%;
  text-align: center;
  padding: 40px 0;
  position: relative;
}

.footer-bottom .scroll-top {
  position: fixed;
  bottom: 35px;
  right: 14px;
  padding: 5px;
  display: none;
  -webkit-animation: scroll_effects 1s infinite alternate;
  animation: scroll_effects 1s infinite alternate;
  z-index: 999;
}

.footer-bottom .scroll-top a {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 100%;
  line-height: 50px;
  font-size: 36px;
  text-align: center;
}

.footer-bottom p {
  color: #ffffff;
}

@-webkit-keyframes scroll_effects {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes scroll_effects {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/*footer section end here*/