/*-----------------------------------------------------------------------------------



    Author: MR TECH



-----------------------------------------------------------------------------------







-----------------------------------------------------------------------------------*/

/*===========================

    1. COMMON css 

===========================*/

@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800");

body {

  font-family: "Poppins", sans-serif;

  font-weight: normal;

  font-style: normal;

  color: #8a8fa3; }



* {

  margin: 0;

  padding: 0;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box; }



img {

  max-width: 100%; }



a:focus,

input:focus,

textarea:focus,

button:focus {

  text-decoration: none;

  outline: none; }



a:focus,

a:hover {

  text-decoration: none; }



i,

span,

a {

  display: inline-block; }



h1,

h2,

h3,

h4,

h5,

h6 {

  font-family: "Poppins", sans-serif;

  font-weight: 600;

  color: #32333c;

  margin: 0px; }



h1 {

  font-size: 60px; }



h2 {

  font-size: 36px; }



h3 {

  font-size: 28px; }



h4 {

  font-size: 22px; }



h5 {

  font-size: 18px; }



h6 {

  font-size: 16px; }



ul, ol {

  margin: 0px;

  padding: 0px;

  list-style-type: none; }



p {

  font-size: 16px;

  font-weight: 400;

  line-height: 28px;

  color: #8a8fa3;

  margin: 0px; }

  @media (max-width: 767px) {

    p {

      font-size: 15px; } }



.bg_cover {

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

  width: 100%;

  height: 100%; }



/*===== All Button Style =====*/

.main-btn {

  display: inline-block;

  font-weight: 500;

  text-align: center;

  white-space: nowrap;

  vertical-align: middle;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  border: 1px solid #00cf07;

  padding: 0 40px;

  font-size: 15px;

  line-height: 48px;

  border-radius: 50px;

  color: #fff;

  cursor: pointer;

  z-index: 5;

  -webkit-transition: all 0.3s ease-out 0s;

  -moz-transition: all 0.3s ease-out 0s;

  -ms-transition: all 0.3s ease-out 0s;

  -o-transition: all 0.3s ease-out 0s;

  transition: all 0.3s ease-out 0s;

  -webkit-box-shadow: 0px 5px 8px 0px rgba(78, 249, 172, 0.55);

  -moz-box-shadow: 0px 5px 8px 0px rgba(106, 249, 78, 0.55);

  box-shadow: 0px 5px 8px 0px rgba(84, 249, 78, 0.55);

  background-color: #00cf07;

  text-transform: uppercase; }

  .main-btn:hover {

    background-color: #fff;

    color: #00cf07;

    border-color: #00cf07; }

  .main-btn.main-btn-2 {

    background-color: transparent;

    color: #fff;

    border-color: #fff;

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    box-shadow: none; }

    .main-btn.main-btn-2:hover {

      background-color: #00cf07;

      color: #fff;

      border-color: #00cf07; }



/*===== All Section Title Style =====*/

.section-title .title {

  font-weight: 700;

  font-size: 45px;

  color: #000;

  padding-bottom: 20px; }

  @media (max-width: 767px) {

    .section-title .title {

      font-size: 30px; } }



/*===== All Preloader Style =====*/

.preloader {

  /* Body Overlay */

  position: fixed;

  top: 0;

  left: 0;

  display: table;

  height: 100%;

  width: 100%;

  /* Change Background Color */

  background: #fff;

  z-index: 99999; }

  .preloader .loader_34 {

    display: table-cell;

    vertical-align: middle;

    text-align: center; }

    .preloader .loader_34 .ytp-spinner {

      position: absolute;

      left: 50%;

      top: 50%;

      width: 64px;

      margin-left: -32px;

      z-index: 18;

      pointer-events: none; }

      .preloader .loader_34 .ytp-spinner .ytp-spinner-container {

        pointer-events: none;

        position: absolute;

        width: 100%;

        padding-bottom: 100%;

        top: 50%;

        left: 50%;

        margin-top: -50%;

        margin-left: -50%;

        -webkit-animation: ytp-spinner-linspin 1568.23529647ms linear infinite;

        -moz-animation: ytp-spinner-linspin 1568.23529647ms linear infinite;

        -o-animation: ytp-spinner-linspin 1568.23529647ms linear infinite;

        animation: ytp-spinner-linspin 1568.23529647ms linear infinite; }

        .preloader .loader_34 .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator {

          position: absolute;

          width: 100%;

          height: 100%;

          -webkit-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;

          -moz-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;

          -o-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;

          animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

          .preloader .loader_34 .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-left {

            position: absolute;

            top: 0;

            left: 0;

            bottom: 0;

            overflow: hidden;

            right: 50%; }

          .preloader .loader_34 .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-right {

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            overflow: hidden;

            left: 50%; }

    .preloader .loader_34 .ytp-spinner-circle {

      box-sizing: border-box;

      position: absolute;

      width: 200%;

      height: 100%;

      border-style: solid;

      /* Spinner Color */

      border-color: #00cf07 #00cf07 #ddd;

      border-radius: 50%;

      border-width: 6px; }

    .preloader .loader_34 .ytp-spinner-left .ytp-spinner-circle {

      left: 0;

      right: -100%;

      border-right-color: #ddd;

      -webkit-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;

      -moz-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;

      -o-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;

      animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

    .preloader .loader_34 .ytp-spinner-right .ytp-spinner-circle {

      left: -100%;

      right: 0;

      border-left-color: #ddd;

      -webkit-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;

      -moz-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;

      -o-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;

      animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }



/* Preloader Animations */

@-webkit-keyframes ytp-spinner-linspin {

  to {

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    transform: rotate(360deg); } }

@keyframes ytp-spinner-linspin {

  to {

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    transform: rotate(360deg); } }

@-webkit-keyframes ytp-spinner-easespin {

  12.5% {

    -webkit-transform: rotate(135deg);

    -moz-transform: rotate(135deg);

    -ms-transform: rotate(135deg);

    -o-transform: rotate(135deg);

    transform: rotate(135deg); }

  25% {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    -ms-transform: rotate(270deg);

    -o-transform: rotate(270deg);

    transform: rotate(270deg); }

  37.5% {

    -webkit-transform: rotate(405deg);

    -moz-transform: rotate(405deg);

    -ms-transform: rotate(405deg);

    -o-transform: rotate(405deg);

    transform: rotate(405deg); }

  50% {

    -webkit-transform: rotate(540deg);

    -moz-transform: rotate(540deg);

    -ms-transform: rotate(540deg);

    -o-transform: rotate(540deg);

    transform: rotate(540deg); }

  62.5% {

    -webkit-transform: rotate(675deg);

    -moz-transform: rotate(675deg);

    -ms-transform: rotate(675deg);

    -o-transform: rotate(675deg);

    transform: rotate(675deg); }

  75% {

    -webkit-transform: rotate(810deg);

    -moz-transform: rotate(810deg);

    -ms-transform: rotate(810deg);

    -o-transform: rotate(810deg);

    transform: rotate(810deg); }

  87.5% {

    -webkit-transform: rotate(945deg);

    -moz-transform: rotate(945deg);

    -ms-transform: rotate(945deg);

    -o-transform: rotate(945deg);

    transform: rotate(945deg); }

  to {

    -webkit-transform: rotate(1080deg);

    -moz-transform: rotate(1080deg);

    -ms-transform: rotate(1080deg);

    -o-transform: rotate(1080deg);

    transform: rotate(1080deg); } }

@keyframes ytp-spinner-easespin {

  12.5% {

    -webkit-transform: rotate(135deg);

    -moz-transform: rotate(135deg);

    -ms-transform: rotate(135deg);

    -o-transform: rotate(135deg);

    transform: rotate(135deg); }

  25% {

    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    -ms-transform: rotate(270deg);

    -o-transform: rotate(270deg);

    transform: rotate(270deg); }

  37.5% {

    -webkit-transform: rotate(405deg);

    -moz-transform: rotate(405deg);

    -ms-transform: rotate(405deg);

    -o-transform: rotate(405deg);

    transform: rotate(405deg); }

  50% {

    -webkit-transform: rotate(540deg);

    -moz-transform: rotate(540deg);

    -ms-transform: rotate(540deg);

    -o-transform: rotate(540deg);

    transform: rotate(540deg); }

  62.5% {

    -webkit-transform: rotate(675deg);

    -moz-transform: rotate(675deg);

    -ms-transform: rotate(675deg);

    -o-transform: rotate(675deg);

    transform: rotate(675deg); }

  75% {

    -webkit-transform: rotate(810deg);

    -moz-transform: rotate(810deg);

    -ms-transform: rotate(810deg);

    -o-transform: rotate(810deg);

    transform: rotate(810deg); }

  87.5% {

    -webkit-transform: rotate(945deg);

    -moz-transform: rotate(945deg);

    -ms-transform: rotate(945deg);

    -o-transform: rotate(945deg);

    transform: rotate(945deg); }

  to {

    -webkit-transform: rotate(1080deg);

    -moz-transform: rotate(1080deg);

    -ms-transform: rotate(1080deg);

    -o-transform: rotate(1080deg);

    transform: rotate(1080deg); } }

@-webkit-keyframes ytp-spinner-left-spin {

  0% {

    -webkit-transform: rotate(130deg);

    -moz-transform: rotate(130deg);

    -ms-transform: rotate(130deg);

    -o-transform: rotate(130deg);

    transform: rotate(130deg); }

  50% {

    -webkit-transform: rotate(-5deg);

    -moz-transform: rotate(-5deg);

    -ms-transform: rotate(-5deg);

    -o-transform: rotate(-5deg);

    transform: rotate(-5deg); }

  to {

    -webkit-transform: rotate(130deg);

    -moz-transform: rotate(130deg);

    -ms-transform: rotate(130deg);

    -o-transform: rotate(130deg);

    transform: rotate(130deg); } }

@keyframes ytp-spinner-left-spin {

  0% {

    -webkit-transform: rotate(130deg);

    -moz-transform: rotate(130deg);

    -ms-transform: rotate(130deg);

    -o-transform: rotate(130deg);

    transform: rotate(130deg); }

  50% {

    -webkit-transform: rotate(-5deg);

    -moz-transform: rotate(-5deg);

    -ms-transform: rotate(-5deg);

    -o-transform: rotate(-5deg);

    transform: rotate(-5deg); }

  to {

    -webkit-transform: rotate(130deg);

    -moz-transform: rotate(130deg);

    -ms-transform: rotate(130deg);

    -o-transform: rotate(130deg);

    transform: rotate(130deg); } }

@-webkit-keyframes ytp-right-spin {

  0% {

    -webkit-transform: rotate(-130deg);

    -moz-transform: rotate(-130deg);

    -ms-transform: rotate(-130deg);

    -o-transform: rotate(-130deg);

    transform: rotate(-130deg); }

  50% {

    -webkit-transform: rotate(5deg);

    -moz-transform: rotate(5deg);

    -ms-transform: rotate(5deg);

    -o-transform: rotate(5deg);

    transform: rotate(5deg); }

  to {

    -webkit-transform: rotate(-130deg);

    -moz-transform: rotate(-130deg);

    -ms-transform: rotate(-130deg);

    -o-transform: rotate(-130deg);

    transform: rotate(-130deg); } }

@keyframes ytp-right-spin {

  0% {

    -webkit-transform: rotate(-130deg);

    -moz-transform: rotate(-130deg);

    -ms-transform: rotate(-130deg);

    -o-transform: rotate(-130deg);

    transform: rotate(-130deg); }

  50% {

    -webkit-transform: rotate(5deg);

    -moz-transform: rotate(5deg);

    -ms-transform: rotate(5deg);

    -o-transform: rotate(5deg);

    transform: rotate(5deg); }

  to {

    -webkit-transform: rotate(-130deg);

    -moz-transform: rotate(-130deg);

    -ms-transform: rotate(-130deg);

    -o-transform: rotate(-130deg);

    transform: rotate(-130deg); } }

/*===========================

    2.HEADER css 

===========================*/

.navigation {

  -webkit-box-shadow: 0px 0px 29px 0px rgba(134, 134, 134, 0.25);

  -moz-box-shadow: 0px 0px 29px 0px rgba(134, 134, 134, 0.25);

  box-shadow: 0px 0px 29px 0px rgba(134, 134, 134, 0.25);

  padding: 30px 0;

  background-color: #fff;

  -webkit-transition: all 0.3s ease-out 0s;

  -moz-transition: all 0.3s ease-out 0s;

  -ms-transition: all 0.3s ease-out 0s;

  -o-transition: all 0.3s ease-out 0s;

  transition: all 0.3s ease-out 0s; }

  .navigation.sticky {

    padding: 20px 0;

    -webkit-transition: all 0.3s ease-out 0s;

    -moz-transition: all 0.3s ease-out 0s;

    -ms-transition: all 0.3s ease-out 0s;

    -o-transition: all 0.3s ease-out 0s;

    transition: all 0.3s ease-out 0s; }

  .navigation .navbar {

    padding: 0;

    position: relative; }

    .navigation .navbar .navbar-brand {

      padding-top: 0;

      padding-bottom: 5px; }

    .navigation .navbar .navbar-toggler {

      padding: 2px 6px; }

      .navigation .navbar .navbar-toggler .toggler-icon {

        width: 30px;

        height: 2px;

        background-color: #32333c;

        margin: 5px 0;

        display: block;

        position: relative;

        -webkit-transition: all 0.3s ease-out 0s;

        -moz-transition: all 0.3s ease-out 0s;

        -ms-transition: all 0.3s ease-out 0s;

        -o-transition: all 0.3s ease-out 0s;

        transition: all 0.3s ease-out 0s; }

      .navigation .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {

        -webkit-transform: rotate(45deg);

        -moz-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

        -o-transform: rotate(45deg);

        transform: rotate(45deg);

        top: 7px; }

      .navigation .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {

        opacity: 0; }

      .navigation .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {

        -webkit-transform: rotate(135deg);

        -moz-transform: rotate(135deg);

        -ms-transform: rotate(135deg);

        -o-transform: rotate(135deg);

        transform: rotate(135deg);

        top: -7px; }

    @media only screen and (min-width: 768px) and (max-width: 991px) {

      .navigation .navbar .navbar-collapse {

        position: absolute;

        top: 158%;

        left: 0;

        width: 100%;

        background-color: #fff;

        z-index: 99;

        -webkit-box-shadow: 0px 10px 15px 0px rgba(134, 134, 134, 0.15);

        -moz-box-shadow: 0px 10px 15px 0px rgba(134, 134, 134, 0.15);

        box-shadow: 0px 10px 15px 0px rgba(134, 134, 134, 0.15);

        padding: 3px 12px; } }

    @media (max-width: 767px) {

      .navigation .navbar .navbar-collapse {

        position: absolute;

        top: 158%;

        left: 0;

        width: 100%;

        background-color: #fff;

        z-index: 99;

        -webkit-box-shadow: 0px 10px 15px 0px rgba(134, 134, 134, 0.15);

        -moz-box-shadow: 0px 10px 15px 0px rgba(134, 134, 134, 0.15);

        box-shadow: 0px 10px 15px 0px rgba(134, 134, 134, 0.15);

        padding: 3px 12px; } }

    .navigation .navbar .navbar-nav .nav-item {

      margin-left: 30px; }

      @media only screen and (min-width: 768px) and (max-width: 991px) {

        .navigation .navbar .navbar-nav .nav-item {

          margin: 4px 0; } }

      @media (max-width: 767px) {

        .navigation .navbar .navbar-nav .nav-item {

          margin: 4px 0; } }

      .navigation .navbar .navbar-nav .nav-item:first-child {

        margin-left: 0; }

      .navigation .navbar .navbar-nav .nav-item a {

        text-transform: uppercase;

        font-size: 16px;

        color: #8a8fa3;

        font-weight: 500;

        position: relative;

        -webkit-transition: all 0.3s ease-out 0s;

        -moz-transition: all 0.3s ease-out 0s;

        -ms-transition: all 0.3s ease-out 0s;

        -o-transition: all 0.3s ease-out 0s;

        transition: all 0.3s ease-out 0s; }

        .navigation .navbar .navbar-nav .nav-item a::before {

          position: absolute;

          content: '';

          width: 3px;

          height: 0;

          background-color: #00cf07;

          left: 50%;

          top: -50px;

          -webkit-transform: translateX(-50%);

          -moz-transform: translateX(-50%);

          -ms-transform: translateX(-50%);

          -o-transform: translateX(-50%);

          transform: translateX(-50%);

          -webkit-transition: all 0.3s ease-out 0s;

          -moz-transition: all 0.3s ease-out 0s;

          -ms-transition: all 0.3s ease-out 0s;

          -o-transition: all 0.3s ease-out 0s;

          transition: all 0.3s ease-out 0s; }

          @media only screen and (min-width: 768px) and (max-width: 991px) {

            .navigation .navbar .navbar-nav .nav-item a::before {

              display: none; } }

          @media (max-width: 767px) {

            .navigation .navbar .navbar-nav .nav-item a::before {

              display: none; } }

      .navigation .navbar .navbar-nav .nav-item.active a, .navigation .navbar .navbar-nav .nav-item:hover a {

        color: #00cf07; }

        .navigation .navbar .navbar-nav .nav-item.active a::before, .navigation .navbar .navbar-nav .nav-item:hover a::before {

          height: 45px; }



.header-content {

  height: 730px;

  width: 100%;

  margin-top: 90px;

  position: relative;

  overflow: hidden;

  background-color: #fbfbfb; }

  @media only screen and (min-width: 768px) and (max-width: 991px) {

    .header-content {

      height: 550px; } }

  @media (max-width: 767px) {

    .header-content {

      height: 550px; } }

  .header-content .header-shape {

    position: absolute !important; }

    .header-content .header-shape.shape-one {

      top: 0 !important;

      left: 0 !important; }

      @media (max-width: 767px) {

        .header-content .header-shape.shape-one img {

          width: 40px; } }

    .header-content .header-shape.shape-tow {

      top: -18px !important;

      left: 20% !important; }

      @media (max-width: 767px) {

        .header-content .header-shape.shape-tow img {

          width: 40px; } }

    .header-content .header-shape.shape-three {

      top: 0 !important;

      left: 40% !important; }

      @media (max-width: 767px) {

        .header-content .header-shape.shape-three img {

          width: 100px; } }

    .header-content .header-shape.shape-fore {

      top: 28px !important;

      right: 7.6% !important;

      left: auto !important; }

      @media (max-width: 767px) {

        .header-content .header-shape.shape-fore img {

          width: 40px; } }

    .header-content .header-shape.shape-five {

      right: 30px !important;

      bottom: 35% !important;

      left: auto !important;

      top: auto !important; }

      @media (max-width: 767px) {

        .header-content .header-shape.shape-five {

          right: 20px !important;

          bottom: 48% !important; } }

      @media (max-width: 767px) {

        .header-content .header-shape.shape-five img {

          width: 40px; } }

    .header-content .header-shape.shape-six {

      top: 44% !important;

      left: 13% !important;

      -webkit-transform: translateY(-50%);

      -moz-transform: translateY(-50%);

      -ms-transform: translateY(-50%);

      -o-transform: translateY(-50%);

      transform: translateY(-50%); }

      @media (max-width: 767px) {

        .header-content .header-shape.shape-six img {

          width: 40px; } }

    .header-content .header-shape.shape-seven {

      left: 30px !important;

      bottom: 50px !important;

      top: auto !important; }

      @media (max-width: 767px) {

        .header-content .header-shape.shape-seven {

          left: 15px !important;

          bottom: 25px !important; } }

      @media (max-width: 767px) {

        .header-content .header-shape.shape-seven img {

          width: 100px; } }

    .header-content .header-shape.shape-eight {

      left: 90px !important;

      bottom: 140px !important;

      top: auto !important; }

      @media (max-width: 767px) {

        .header-content .header-shape.shape-eight {

          left: 50px !important;

          bottom: 70px !important; } }

      @media (max-width: 767px) {

        .header-content .header-shape.shape-eight img {

          width: 100px; } }

    .header-content .header-shape.shape-nine {

      left: 50% !important;

      -webkit-transform: translateX(-50%);

      -moz-transform: translateX(-50%);

      -ms-transform: translateX(-50%);

      -o-transform: translateX(-50%);

      transform: translateX(-50%);

      bottom: 28px !important;

      top: auto !important; }

      @media (max-width: 767px) {

        .header-content .header-shape.shape-nine {

          left: 65% !important;

          bottom: 20px !important; } }

      @media (max-width: 767px) {

        .header-content .header-shape.shape-nine img {

          width: 100px; } }

    .header-content .header-shape.shape-ten {

      right: 30px !important;

      bottom: 5px !important;

      left: auto !important;

      top: auto !important; }

      @media (max-width: 767px) {

        .header-content .header-shape.shape-ten {

          right: 0px !important;

          bottom: 140px !important; } }

      @media (max-width: 767px) {

        .header-content .header-shape.shape-ten img {

          width: 100px; } }



.header-content-right {

  position: relative; }

  .header-content-right .sub-title {

    font-size: 30px;

    color: #00cf07;

    text-transform: uppercase;

    padding-bottom: 15px; }

    @media (max-width: 767px) {

      .header-content-right .sub-title {

        font-size: 24px; } }

  .header-content-right .title {

    font-size: 60px;

    text-transform: uppercase;

    padding-bottom: 15px; }

    @media (max-width: 767px) {

      .header-content-right .title {

        font-size: 38px; } }

  .header-content-right p {

    padding-bottom: 40px; }



.header-image {

  max-width: 430px;

  margin: 0 auto;

  position: relative; }

  .header-image::before {

    position: absolute;

    content: '';

    width: 0%;

    height: 0%;

    border: 0px solid #00cf07;

    border-bottom: 0;

    top: 0%;

    border-radius: 0px;

    left: 0;

    -webkit-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    transform: translateY(-50%); }

  .header-image::after {

    position: absolute;

    content: '';

    width: 100%;

    height: 3px;

    background-color: #00cf07;

    border-radius: 50px;

    left: 0;

    bottom: 58px;

    z-index: 11; }

  .header-image img {

    position: relative;

    z-index: 5; }



.header-social {

  position: absolute;

  bottom: 30px;

  left: 15px;

  width: 100%; }

  .header-social .header-social-icon {

    position: relative; }

    .header-social .header-social-icon::before {

      position: absolute;

      content: '';

      width: 100%;

      height: 2px;

      background-color: #00cf07;

      left: -102.5%;

      top: 50%;

      -webkit-transform: translateY(-50%);

      -moz-transform: translateY(-50%);

      -ms-transform: translateY(-50%);

      -o-transform: translateY(-50%);

      transform: translateY(-50%); }

    .header-social .header-social-icon ul li {

      display: inline-block;

      margin-left: 13px; }

      .header-social .header-social-icon ul li:first-child {

        margin-left: 0; }

      .header-social .header-social-icon ul li a {

        color: #ccc;

        font-size: 20px;

        width: 40px;

        height: 40px;

        line-height: 40px;

        border-radius: 50%;

        border: 1px solid #ccc;

        -webkit-transition: all 0.3s ease-out 0s;

        -moz-transition: all 0.3s ease-out 0s;

        -ms-transition: all 0.3s ease-out 0s;

        -o-transition: all 0.3s ease-out 0s;

        transition: all 0.3s ease-out 0s;

        text-align: center; }

        .header-social .header-social-icon ul li a:hover {

          color: #fff;

          background-color: #00cf07;

          border-color: #00cf07; }



/*===========================

        3.ABOUT css 

===========================*/

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .about-area {

    padding-top: 90px;

    padding-bottom: 100px; } }

@media (max-width: 767px) {

  .about-area {

    padding-top: 70px;

    padding-bottom: 80px; } }



.about-content .about-title {

  font-size: 18px;

  font-weight: 500;

  padding-bottom: 15px; }

.about-content ul {

  padding-top: 15px; }

  .about-content ul li {

    width: 50%;

    float: left;

    margin-top: 5px; }

    @media only screen and (min-width: 992px) and (max-width: 1200px) {

      .about-content ul li {

        width: 100%;

        float: none; } }

    @media (max-width: 767px) {

      .about-content ul li {

        width: 100%;

        float: none; } }

    @media only screen and (min-width: 576px) and (max-width: 767px) {

      .about-content ul li {

        width: 50%;

        float: left; } }

.about-content .single-info .info-icon i {

  font-size: 16px;

  color: #00cf07; }

.about-content .single-info .info-text {

  padding-left: 13px; }

  .about-content .single-info .info-text p span {

    color: #32333c; }



.about-skills .skill-item .skill-header {

  position: relative; }

  .about-skills .skill-item .skill-header .skill-title {

    font-size: 16px;

    font-weight: 400; }

  .about-skills .skill-item .skill-header .skill-percentage {

    position: absolute;

    top: 0;

    right: 0;

    font-size: 16px;

    color: #32333c;

    font-weight: 400;

    display: -webkit-flex;

    display: -moz-flex;

    display: -ms-flex;

    display: -o-flex;

    display: flex; }

    .about-skills .skill-item .skill-header .skill-percentage .count-box {

      font-size: 16px;

      color: #32333c; }

.about-skills .skill-item .skill-bar {

  margin-top: 15px; }

  .about-skills .skill-item .skill-bar .bar-inner {

    width: 100%;

    height: 5px;

    border-radius: 5px;

    background-color: #d9d9d9;

    position: relative; }

    .about-skills .skill-item .skill-bar .bar-inner .progress-line {

      position: absolute;

      top: 0;

      left: 0;

      height: 5px;

      border-radius: 5px;

      background-color: #00cf07;

      -webkit-transition: all 2s ease-out 0s;

      -moz-transition: all 2s ease-out 0s;

      -ms-transition: all 2s ease-out 0s;

      -o-transition: all 2s ease-out 0s;

      transition: all 2s ease-out 0s;

      width: 0; }



/*===========================

        4.SERVICES css 

===========================*/

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .services-area {

    padding-top: 90px;

    padding-bottom: 100px; } }

@media (max-width: 767px) {

  .services-area {

    padding-top: 70px;

    padding-bottom: 80px; } }



.single-service {

  background-color: #fff;

  border: 1px solid #eceff8;

  border-radius: 5px;

  padding: 25px;

  -webkit-transition: all 0.3s ease-out 0s;

  -moz-transition: all 0.3s ease-out 0s;

  -ms-transition: all 0.3s ease-out 0s;

  -o-transition: all 0.3s ease-out 0s;

  transition: all 0.3s ease-out 0s; }

  @media (max-width: 767px) {

    .single-service {

      padding: 15px; } }

  .single-service .service-icon i {

    font-size: 60px;

    color: #00cf07;

    line-height: 56px; }

  .single-service .service-content {

    margin-top: 11px; }

    .single-service .service-content .service-title a {

      font-size: 22px;

      font-weight: 600;

      color: #32333c;

      margin-bottom: 20px;

      -webkit-transition: all 0.3s ease-out 0s;

      -moz-transition: all 0.3s ease-out 0s;

      -ms-transition: all 0.3s ease-out 0s;

      -o-transition: all 0.3s ease-out 0s;

      transition: all 0.3s ease-out 0s; }

      .single-service .service-content .service-title a:hover {

        color: #00cf07; }

  .single-service:hover {

    -webkit-box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23);

    -moz-box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23);

    box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23); }



/*===========================

    4.CALL TO ACTION css 

===========================*/

.call-to-action {

  position: relative;

  z-index: 9; }

  @media only screen and (min-width: 768px) and (max-width: 991px) {

    .call-to-action {

      padding-top: 90px;

      padding-bottom: 100px; } }

  @media (max-width: 767px) {

    .call-to-action {

      padding-top: 70px;

      padding-bottom: 80px; } }

  .call-to-action::before {

    position: absolute;

    content: '';

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(30, 30, 31, 0.90);

    z-index: -1; }



  .call-to-action1 {

  position: relative;

  z-index: 9; }

  @media only screen and (min-width: 768px) and (max-width: 991px) {

    .call-to-action1 {

      padding-top: 90px;

      padding-bottom: 100px; } }

  @media (max-width: 767px) {

    .call-to-action1 {

      padding-top: 70px;

      padding-bottom: 80px; } }

  .call-to-action1::before {

    position: absolute;

    content: '';

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(255, 255, 255, 0.7);

    z-index: -1; }



.call-action-content .action-title {

  font-size: 45px;

  font-weight: 700;

  color: #fff;

  padding-bottom: 30px; }

  @media (max-width: 767px) {

    .call-action-content .action-title {

      font-size: 30px; } }

.call-action-content p {

  color: #fff;

  padding-bottom: 25px; }

.call-action-content ul li {

  display: inline-block;

  margin: 10px 15px 0; }

  .call-action-content ul li .main-btn {

    width: 180px;

    padding: 0; }

    .call-action-content ul li .main-btn.custom {

      -webkit-box-shadow: none;

      -moz-box-shadow: none;

      box-shadow: none;

      background-color: #fff;

      color: #00cf07;

      border-color: #fff; }

      .call-action-content ul li .main-btn.custom:hover {

        background-color: #00cf07;

        color: #fff;

        border-color: #00cf07; }

    .call-action-content ul li .main-btn.custom-2 {

      color: #fff;

      background-color: transparent;

      border-color: #fff; }

      .call-action-content ul li .main-btn.custom-2:hover {

        background-color: rgba(255, 255, 255, 0.5);

        color: #fff;

        border-color: #fff; }



/*===========================

        5.WORK css 

===========================*/

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .work-area {

    padding-top: 90px;

    padding-bottom: 100px; } }

@media (max-width: 767px) {

  .work-area {

    padding-top: 70px;

    padding-bottom: 80px; } }



.single-work {

  position: relative; }

  .single-work .work-image img {

    width: 100%; }

  .single-work .work-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(40, 40, 40, 0.8);

    opacity: 0;

    visibility: hidden;

    -webkit-transition: all 0.3s ease-out 0s;

    -moz-transition: all 0.3s ease-out 0s;

    -ms-transition: all 0.3s ease-out 0s;

    -o-transition: all 0.3s ease-out 0s;

    transition: all 0.3s ease-out 0s; }

    .single-work .work-overlay .work-content {

      position: absolute;

      top: 50%;

      left: 0;

      width: 100%;

      -webkit-transform: translateY(-50%);

      -moz-transform: translateY(-50%);

      -ms-transform: translateY(-50%);

      -o-transform: translateY(-50%);

      transform: translateY(-50%); }

      .single-work .work-overlay .work-content .work-title {

        font-size: 22px;

        color: #fff;

        font-weight: 60;

        -webkit-transform: translateY(-100%);

        -moz-transform: translateY(-100%);

        -ms-transform: translateY(-100%);

        -o-transform: translateY(-100%);

        transform: translateY(-100%);

        margin-bottom: 15px;

        -webkit-transition: all 0.3s ease-out 0s;

        -moz-transition: all 0.3s ease-out 0s;

        -ms-transition: all 0.3s ease-out 0s;

        -o-transition: all 0.3s ease-out 0s;

        transition: all 0.3s ease-out 0s;

        opacity: 0; }

      .single-work .work-overlay .work-content ul {

        position: relative;

        padding-top: 20px; }

        .single-work .work-overlay .work-content ul::before {

          position: absolute;

          content: '';

          width: 60px;

          height: 2px;

          background-color: #fff;

          left: 50%;

          -webkit-transform: translateX(-50%);

          -moz-transform: translateX(-50%);

          -ms-transform: translateX(-50%);

          -o-transform: translateX(-50%);

          transform: translateX(-50%);

          top: 0; }

        .single-work .work-overlay .work-content ul li {

          display: inline-block;

          margin: 0 15px;

          -webkit-transition: all 0.3s ease-out 0s;

          -moz-transition: all 0.3s ease-out 0s;

          -ms-transition: all 0.3s ease-out 0s;

          -o-transition: all 0.3s ease-out 0s;

          transition: all 0.3s ease-out 0s;

          opacity: 0; }

          .single-work .work-overlay .work-content ul li a {

            width: 50px;

            height: 50px;

            line-height: 50px;

            font-size: 25px;

            color: #fff;

            border-radius: 50%;

            border: 1px solid #fff;

            text-align: center;

            -webkit-transition: all 0.3s ease-out 0s;

            -moz-transition: all 0.3s ease-out 0s;

            -ms-transition: all 0.3s ease-out 0s;

            -o-transition: all 0.3s ease-out 0s;

            transition: all 0.3s ease-out 0s; }

            .single-work .work-overlay .work-content ul li a:hover {

              background-color: #fff;

              color: #00cf07; }

          .single-work .work-overlay .work-content ul li:nth-of-type(1) {

            -webkit-transform: translateX(-100%);

            -moz-transform: translateX(-100%);

            -ms-transform: translateX(-100%);

            -o-transform: translateX(-100%);

            transform: translateX(-100%); }

          .single-work .work-overlay .work-content ul li:nth-of-type(2) {

            -webkit-transform: translateX(100%);

            -moz-transform: translateX(100%);

            -ms-transform: translateX(100%);

            -o-transform: translateX(100%);

            transform: translateX(100%); }

  .single-work:hover .work-overlay {

    opacity: 1;

    visibility: visible; }

    .single-work:hover .work-overlay .work-content .work-title {

      -webkit-transform: translateY(0);

      -moz-transform: translateY(0);

      -ms-transform: translateY(0);

      -o-transform: translateY(0);

      transform: translateY(0);

      opacity: 1; }

    .single-work:hover .work-overlay .work-content ul li {

      -webkit-transform: translateX(0);

      -moz-transform: translateX(0);

      -ms-transform: translateX(0);

      -o-transform: translateX(0);

      transform: translateX(0);

      opacity: 1; }



/*===========================

       6.PRICING css 

===========================*/

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .pricing-area {

    padding-top: 90px;

    padding-bottom: 100px; } }

@media (max-width: 767px) {

  .pricing-area {

    padding-top: 70px;

    padding-bottom: 80px; } }



.single-pricing .pricing-package {

  background-color: #00cf07;

  border-top-left-radius: 5px;

  border-top-right-radius: 5px; }

  .single-pricing .pricing-package .package-title {

    font-size: 22px;

    color: #fff;

    padding: 25px; }

.single-pricing .pricing-body {

  border: 1px solid #ddd;

  border-bottom-left-radius: 5px;

  border-bottom-right-radius: 5px; }

  .single-pricing .pricing-body .pricing-text {

    border-bottom: 1px solid #ddd;

    padding: 20px 25px; }

    .single-pricing .pricing-body .pricing-text .price {

      font-size: 30px;

      font-weight: 600;

      color: #00cf07;

      padding-top: 15px; }

  .single-pricing .pricing-body .pricing-list {

    padding-top: 30px; }

    .single-pricing .pricing-body .pricing-list ul li {

      line-height: 36px;

      color: #32333c;

      font-size: 16px; }

  .single-pricing .pricing-body .pricing-btn {

    padding-top: 25px;

    padding-bottom: 40px; }

    .single-pricing .pricing-body .pricing-btn .main-btn {

      background-color: #fff;

      color: #00cf07; }

      .single-pricing .pricing-body .pricing-btn .main-btn:hover {

        background-color: #00cf07;

        color: #fff; }

.single-pricing.active {

  -webkit-box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23);

  -moz-box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23);

  box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23); }

  .single-pricing.active .pricing-body .pricing-btn .main-btn {

    background-color: #00cf07;

    color: #fff; }

    .single-pricing.active .pricing-body .pricing-btn .main-btn:hover {

      background-color: #fff;

      color: #00cf07; }



/*===========================

       7.BLOG css 

===========================*/

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .blog-area {

    padding-top: 90px;

    padding-bottom: 100px; } }

@media (max-width: 767px) {

  .blog-area {

    padding-top: 70px;

    padding-bottom: 80px; } }



.single-blog {

  -webkit-box-shadow: 0px 0px 15px 0px rgba(152, 152, 152, 0.25);

  -moz-box-shadow: 0px 0px 15px 0px rgba(152, 152, 152, 0.25);

  box-shadow: 0px 0px 15px 0px rgba(152, 152, 152, 0.25);

  position: relative;

  border-radius: 5px;

  overflow: hidden; }

  .single-blog .blog-image {

    overflow: hidden; }

    .single-blog .blog-image img {

      width: 100%;

      -webkit-transition: all 0.3s ease-out 0s;

      -moz-transition: all 0.3s ease-out 0s;

      -ms-transition: all 0.3s ease-out 0s;

      -o-transition: all 0.3s ease-out 0s;

      transition: all 0.3s ease-out 0s; }

  .single-blog .blog-content {

    width: 75%;

    position: absolute;

    bottom: 0;

    left: 0;

    background-color: #fff;

    padding: 25px;

    -webkit-transition: all 0.3s ease-out 0s;

    -moz-transition: all 0.3s ease-out 0s;

    -ms-transition: all 0.3s ease-out 0s;

    -o-transition: all 0.3s ease-out 0s;

    transition: all 0.3s ease-out 0s; }

    @media (max-width: 767px) {

      .single-blog .blog-content {

        padding: 20px; } }

    .single-blog .blog-content .blog-title a {

      font-size: 22px;

      font-weight: 600;

      padding-bottom: 5px;

      -webkit-transition: all 0.3s ease-out 0s;

      -moz-transition: all 0.3s ease-out 0s;

      -ms-transition: all 0.3s ease-out 0s;

      -o-transition: all 0.3s ease-out 0s;

      transition: all 0.3s ease-out 0s;

      color: #32333c; }

      @media (max-width: 767px) {

        .single-blog .blog-content .blog-title a {

          font-size: 18px; } }

    .single-blog .blog-content span {

      font-size: 16px;

      color: #8a8fa3;

      -webkit-transition: all 0.3s ease-out 0s;

      -moz-transition: all 0.3s ease-out 0s;

      -ms-transition: all 0.3s ease-out 0s;

      -o-transition: all 0.3s ease-out 0s;

      transition: all 0.3s ease-out 0s; }

  .single-blog:hover .blog-image img {

    -webkit-transform: scale(1.2);

    -moz-transform: scale(1.2);

    -ms-transform: scale(1.2);

    -o-transform: scale(1.2);

    transform: scale(1.2); }

  .single-blog:hover .blog-content {

    background-color: #00cf07; }

    .single-blog:hover .blog-content .blog-title a {

      color: #fff; }

    .single-blog:hover .blog-content span {

      color: #fff; }



/*===========================

       8.CONTACT css 

===========================*/

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .contact-area {

    padding-top: 90px;

    padding-bottom: 100px; } }

@media (max-width: 767px) {

  .contact-area {

    padding-top: 70px;

    padding-bottom: 80px; } }



.contact-box {

  background-color: #fff;

  border: 1px solid #ddd;

  padding: 30px 35px;

  -webkit-transition: all 0.3s ease-out 0s;

  -moz-transition: all 0.3s ease-out 0s;

  -ms-transition: all 0.3s ease-out 0s;

  -o-transition: all 0.3s ease-out 0s;

  transition: all 0.3s ease-out 0s; }

  @media only screen and (min-width: 992px) and (max-width: 1200px) {

    .contact-box {

      padding: 30px 25px; } }

  @media (max-width: 767px) {

    .contact-box {

      padding: 30px 25px; } }

  .contact-box .contact-icon i {

    font-size: 48px;

    color: #00cf07; }

  .contact-box .contact-content {

    margin-top: 15px; }

    .contact-box .contact-content .contact-title {

      font-size: 18px;

      font-weight: 600;

      padding-bottom: 15px; }

  .contact-box:hover {

    -webkit-box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23);

    -moz-box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23);

    box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23); }



.contact-box1 {

  background-color: #0000;

  border: 1px solid #ddd;

  padding: 30px 35px;

  -webkit-transition: all 0.3s ease-out 0s;

  -moz-transition: all 0.3s ease-out 0s;

  -ms-transition: all 0.3s ease-out 0s;

  -o-transition: all 0.3s ease-out 0s;

  transition: all 0.3s ease-out 0s; }

  @media only screen and (min-width: 992px) and (max-width: 1200px) {

    .contact-box {

      padding: 30px 25px; } }

  @media (max-width: 767px) {

    .contact-box {

      padding: 30px 25px; } }

  .contact-box .contact-icon i {

    font-size: 48px;

    color: #00cf07; }

  .contact-box .contact-content {

    margin-top: 15px; }

    .contact-box .contact-content .contact-title {

      font-size: 18px;

      font-weight: 600;

      padding-bottom: 15px; }

  .contact-box:hover {

    -webkit-box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23);

    -moz-box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23);

    box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23); }



p.form-message.success, p.form-message.error {

  font-size: 16px;

  color: #333;

  background: #ddd;

  padding: 10px 15px;

  margin-top: 15px; }

  p.form-message.success.form-message.error, p.form-message.error.form-message.error {

    color: #f00; }



.single-form {

  margin-top: 30px; }

  .single-form input, .single-form textarea {

    width: 100%;

    height: 55px;

    border-radius: 5px;

    border: 1px solid #ddd;

    padding: 0 25px;

    font-size: 16px;

    color: #8a8fa3; }

    .single-form input.placeholder, .single-form textarea.placeholder {

      opacity: 1;

      color: #8a8fa3; }

    .single-form input:-moz-placeholder, .single-form textarea:-moz-placeholder {

      opacity: 1;

      color: #8a8fa3; }

    .single-form input::-moz-placeholder, .single-form textarea::-moz-placeholder {

      opacity: 1;

      color: #8a8fa3; }

    .single-form input::-webkit-input-placeholder, .single-form textarea::-webkit-input-placeholder {

      opacity: 1;

      color: #8a8fa3; }

    .single-form input:focus, .single-form textarea:focus {

      border-color: #00cf07; }

  .single-form textarea {

    height: 135px;

    padding-top: 10px;

    resize: none; }



.contact-map .gmap_canvas iframe {

  width: 100%;

  height: 335px;

  padding: 10px;

  border-radius: 5px;

  background-color: #fff;

  -webkit-box-shadow: 0px 0px 12px 0px rgba(152, 152, 152, 0.46);

  -moz-box-shadow: 0px 0px 12px 0px rgba(152, 152, 152, 0.46);

  box-shadow: 0px 0px 12px 0px rgba(152, 152, 152, 0.46); }



/*===========================

       9.FOOTER css 

===========================*/

.footer-widget {

  background-color: #1e1e1f; }

  @media only screen and (min-width: 768px) and (max-width: 991px) {

    .footer-widget {

      padding-top: 100px;

      padding-bottom: 100px; } }

  @media (max-width: 767px) {

    .footer-widget {

      padding-top: 80px;

      padding-bottom: 80px; } }



.footer-content p {

  color: #fff;

  margin-top: 35px; }

.footer-content ul {

  margin-top: 35px; }

  .footer-content ul li {

    display: inline-block;

    margin: 0 14px; }

    @media (max-width: 767px) {

      .footer-content ul li {

        margin: 0 7px; } }

    .footer-content ul li a {

      font-size: 30px;

      width: 74px;

      height: 70px;

      line-height: 74px;

      text-align: center;

      border-radius: 50%;

      color: #1e1e1f;

      background-color: #00cf07;

      -webkit-transition: all 0.3s ease-out 0s;

      -moz-transition: all 0.3s ease-out 0s;

      -ms-transition: all 0.3s ease-out 0s;

      -o-transition: all 0.3s ease-out 0s;

      transition: all 0.3s ease-out 0s; }

      @media (max-width: 767px) {

        .footer-content ul li a {

          width: 52px;

          height: 50px;

          line-height: 50px;

          font-size: 20px; } }

      .footer-content ul li a:hover {

        background-color: #00cf07;

        color: #fff; }



.footer-copyright {

  background-color: #00cf07; }

  .footer-copyright .copyright-text p {

    color: #fff; }



.back-to-top {

  font-size: 20px;

  color: #fff;

  position: fixed;

  right: 20px;

  bottom: 20px;

  width: 50px;

  height: 50px;

  line-height: 46px;

  border-radius: 50%;

  border: 2px solid #586376;

  background-color: #1e1e1f;

  text-align: center;

  z-index: 99;

  -webkit-transition: all 0.3s ease-out 0s;

  -moz-transition: all 0.3s ease-out 0s;

  -ms-transition: all 0.3s ease-out 0s;

  -o-transition: all 0.3s ease-out 0s;

  transition: all 0.3s ease-out 0s;

  display: none; }

  .back-to-top:hover {

    color: #fff;

    background-color: #00cf07;

    border-color: #00cf07; }



/*===========================

      10.PAGE BANNER css 

===========================*/

.page-banner {

  margin-top: 95px;

  padding-top: 118px;

  padding-bottom: 122px; }

  @media only screen and (min-width: 768px) and (max-width: 991px) {

    .page-banner {

      padding-top: 88px;

      padding-bottom: 92px; } }

  @media (max-width: 767px) {

    .page-banner {

      padding-top: 73px;

      padding-bottom: 72px; } }



.page-banner-content {

  position: relative;

  z-index: 9; }

  .page-banner-content .page-title {

    font-size: 48px;

    text-transform: uppercase;

    color: #fff;

    padding-bottom: 10px; }

    @media (max-width: 767px) {

      .page-banner-content .page-title {

        font-size: 28px; } }

    @media only screen and (min-width: 768px) and (max-width: 991px) {

      .page-banner-content .page-title {

        font-size: 38px; } }

  .page-banner-content .breadcrumb {

    background: none;

    border-radius: 0;

    padding: 0;

    margin-bottom: 0; }

    .page-banner-content .breadcrumb .breadcrumb-item {

      color: #fff;

      font-size: 16px;

      font-weight: 500;

      text-transform: uppercase;

      position: relative;

      padding-left: 26px; }

      .page-banner-content .breadcrumb .breadcrumb-item a {

        color: #fff;

        font-size: 16px;

        font-weight: 500; }

      .page-banner-content .breadcrumb .breadcrumb-item + .breadcrumb-item::before {

        position: absolute;

        content: '';

        width: 10px;

        height: 2px;

        background-color: #fff;

        left: 7px;

        top: 50%;

        -webkit-transform: translateY(-50%);

        -moz-transform: translateY(-50%);

        -ms-transform: translateY(-50%);

        -o-transform: translateY(-50%);

        transform: translateY(-50%); }



/*===========================

   10.SINGLE BLOG PAGE css 

===========================*/

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .single-blog-page {

    padding-top: 70px;

    padding-bottom: 100px; } }

@media (max-width: 767px) {

  .single-blog-page {

    padding-top: 30px;

    padding-bottom: 80px; } }



.single-blog-post .blog-content {

  padding-top: 32px;

  padding-bottom: 45px;

  border-bottom: 1px solid #ddd; }

  .single-blog-post .blog-content .blog-title {

    font-size: 24px;

    color: #32333c;

    padding-bottom: 10px; }

    @media (max-width: 767px) {

      .single-blog-post .blog-content .blog-title {

        font-size: 18px; } }

  .single-blog-post .blog-content .meta li {

    display: inline-block;

    margin-right: 40px; }

    @media (max-width: 767px) {

      .single-blog-post .blog-content .meta li {

        margin-right: 20px; } }

    .single-blog-post .blog-content .meta li:last-child {

      margin-right: 0; }

    .single-blog-post .blog-content .meta li a {

      font-size: 16px;

      color: #8a8fa3;

      -webkit-transition: all 0.3s ease-out 0s;

      -moz-transition: all 0.3s ease-out 0s;

      -ms-transition: all 0.3s ease-out 0s;

      -o-transition: all 0.3s ease-out 0s;

      transition: all 0.3s ease-out 0s; }

      @media (max-width: 767px) {

        .single-blog-post .blog-content .meta li a {

          font-size: 14px; } }

      .single-blog-post .blog-content .meta li a:hover {

        color: #00cf07; }

      .single-blog-post .blog-content .meta li a i {

        color: #00cf07;

        margin-right: 5px; }

  .single-blog-post .blog-content .blockquote {

    margin-bottom: 0;

    padding: 20px 80px; }

    @media (max-width: 767px) {

      .single-blog-post .blog-content .blockquote {

        padding: 20px 25px; } }

    .single-blog-post .blog-content .blockquote p {

      color: #32333c;

      font-weight: 500;

      position: relative; }

      .single-blog-post .blog-content .blockquote p .quote-left {

        position: absolute;

        top: 5px;

        left: -30px; }

      .single-blog-post .blog-content .blockquote p .quote-right {

        margin-left: 10px; }

.single-blog-post .blog-tag-share .blog-tag span {

  text-transform: uppercase;

  color: #32333c;

  font-size: 16px;

  font-weight: 600; }

.single-blog-post .blog-tag-share .blog-tag .tag li {

  display: inline-block;

  margin-left: 10px; }

  .single-blog-post .blog-tag-share .blog-tag .tag li a {

    text-transform: uppercase;

    color: #8a8fa3;

    -webkit-transition: all 0.3s ease-out 0s;

    -moz-transition: all 0.3s ease-out 0s;

    -ms-transition: all 0.3s ease-out 0s;

    -o-transition: all 0.3s ease-out 0s;

    transition: all 0.3s ease-out 0s;

    font-size: 16px; }

    @media (max-width: 767px) {

      .single-blog-post .blog-tag-share .blog-tag .tag li a {

        font-size: 14px; } }

    .single-blog-post .blog-tag-share .blog-tag .tag li a:hover {

      color: #00cf07; }

.single-blog-post .blog-tag-share .blgo-share span {

  text-transform: uppercase;

  color: #32333c;

  font-size: 16px;

  font-weight: 600; }

.single-blog-post .blog-tag-share .blgo-share .share li {

  display: inline-block;

  margin-left: 10px; }

  .single-blog-post .blog-tag-share .blgo-share .share li a {

    font-size: 16px; }

    .single-blog-post .blog-tag-share .blgo-share .share li a.color-1 {

      color: #3b5998; }

    .single-blog-post .blog-tag-share .blgo-share .share li a.color-2 {

      color: #55acee; }

    .single-blog-post .blog-tag-share .blgo-share .share li a.color-3 {

      color: #dc4e41; }

    .single-blog-post .blog-tag-share .blgo-share .share li a.color-4 {

      color: #517fa4; }

.single-blog-post .blog-comment .title {

  font-size: 22px;

  font-weight: 600; }

.single-blog-post .blog-comment .author-comment ul li {

  margin-top: 25px; }

@media (max-width: 767px) {

  .single-blog-post .blog-comment .author-comment .single-comment .comment-thumb img {

    width: 80px; } }

.single-blog-post .blog-comment .author-comment .single-comment .comment-content {

  padding-left: 30px; }

  @media (max-width: 767px) {

    .single-blog-post .blog-comment .author-comment .single-comment .comment-content {

      padding-left: 0;

      padding-top: 25px; } }

  @media only screen and (min-width: 576px) and (max-width: 767px) {

    .single-blog-post .blog-comment .author-comment .single-comment .comment-content {

      padding-left: 30px;

      padding-top: 0; } }

  .single-blog-post .blog-comment .author-comment .single-comment .comment-content .author-name {

    font-size: 16px; }

  .single-blog-post .blog-comment .author-comment .single-comment .comment-content span {

    font-size: 14px;

    color: #8a8fa3;

    padding-bottom: 10px; }

.single-blog-post .blog-comment .author-comment .comment-replay {

  padding-left: 30px; }

.single-blog-post .blog-comment .comment-form .comment-form-box .single-input {

  margin-top: 30px; }

  .single-blog-post .blog-comment .comment-form .comment-form-box .single-input input, .single-blog-post .blog-comment .comment-form .comment-form-box .single-input textarea {

    width: 100%;

    height: 55px;

    border: 1px solid #ddd;

    padding: 0 30px;

    border-radius: 5px; }

    .single-blog-post .blog-comment .comment-form .comment-form-box .single-input input.placeholder, .single-blog-post .blog-comment .comment-form .comment-form-box .single-input textarea.placeholder {

      opacity: 1;

      color: #8a8fa3; }

    .single-blog-post .blog-comment .comment-form .comment-form-box .single-input input:-moz-placeholder, .single-blog-post .blog-comment .comment-form .comment-form-box .single-input textarea:-moz-placeholder {

      opacity: 1;

      color: #8a8fa3; }

    .single-blog-post .blog-comment .comment-form .comment-form-box .single-input input::-moz-placeholder, .single-blog-post .blog-comment .comment-form .comment-form-box .single-input textarea::-moz-placeholder {

      opacity: 1;

      color: #8a8fa3; }

    .single-blog-post .blog-comment .comment-form .comment-form-box .single-input input::-webkit-input-placeholder, .single-blog-post .blog-comment .comment-form .comment-form-box .single-input textarea::-webkit-input-placeholder {

      opacity: 1;

      color: #8a8fa3; }

    .single-blog-post .blog-comment .comment-form .comment-form-box .single-input input:focus, .single-blog-post .blog-comment .comment-form .comment-form-box .single-input textarea:focus {

      border-color: #00cf07; }

  .single-blog-post .blog-comment .comment-form .comment-form-box .single-input textarea {

    height: 160px;

    padding-top: 20px;

    resize: none; }

  .single-blog-post .blog-comment .comment-form .comment-form-box .single-input .main-btn {

    width: 160px; }



.blog-sidebar .sidebar-search {

  position: relative; }

  .blog-sidebar .sidebar-search input {

    width: 100%;

    height: 60px;

    border: 1px solid #ddd;

    padding: 0 30px;

    border-radius: 50px; }

    .blog-sidebar .sidebar-search input.placeholder {

      opacity: 1;

      color: #8a8fa3; }

    .blog-sidebar .sidebar-search input:-moz-placeholder {

      opacity: 1;

      color: #8a8fa3; }

    .blog-sidebar .sidebar-search input::-moz-placeholder {

      opacity: 1;

      color: #8a8fa3; }

    .blog-sidebar .sidebar-search input::-webkit-input-placeholder {

      opacity: 1;

      color: #8a8fa3; }

    .blog-sidebar .sidebar-search input:focus {

      border-color: #00cf07; }

  .blog-sidebar .sidebar-search button {

    width: 65px;

    height: 60px;

    text-align: center;

    background-color: #00cf07;

    font-size: 30px;

    color: #fff;

    border: 1px solid #00cf07;

    border-top-right-radius: 50px;

    border-bottom-right-radius: 50px;

    position: absolute;

    top: 0;

    right: 0;

    line-height: 64px;

    cursor: pointer; }

.blog-sidebar .sidebar-title {

  font-size: 22px;

  font-weight: 600; }

.blog-sidebar .sidebar-post {

  padding: 25px 20px;

  border: 1px solid #ddd;

  border-radius: 5px; }

  .blog-sidebar .sidebar-post .single-sidebar-post {

    margin-top: 25px; }

    .blog-sidebar .sidebar-post .single-sidebar-post .post-thumb a img {

      border-radius: 3px; }

    .blog-sidebar .sidebar-post .single-sidebar-post .post-content {

      padding-left: 20px; }

      .blog-sidebar .sidebar-post .single-sidebar-post .post-content .post-title a {

        line-height: 22px;

        font-size: 15px;

        color: #32333c;

        -webkit-transition: all 0.3s ease-out 0s;

        -moz-transition: all 0.3s ease-out 0s;

        -ms-transition: all 0.3s ease-out 0s;

        -o-transition: all 0.3s ease-out 0s;

        transition: all 0.3s ease-out 0s; }

        @media (max-width: 767px) {

          .blog-sidebar .sidebar-post .single-sidebar-post .post-content .post-title a {

            font-size: 14px; } }

        @media only screen and (min-width: 576px) and (max-width: 767px) {

          .blog-sidebar .sidebar-post .single-sidebar-post .post-content .post-title a {

            font-size: 15px; } }

        .blog-sidebar .sidebar-post .single-sidebar-post .post-content .post-title a:hover {

          color: #00cf07; }

      .blog-sidebar .sidebar-post .single-sidebar-post .post-content span {

        color: #8a8fa3;

        font-size: 14px; }

.blog-sidebar .sidebar-category {

  padding: 25px 20px;

  border: 1px solid #ddd;

  border-radius: 5px; }

  .blog-sidebar .sidebar-category ul li a {

    display: block;

    font-size: 16px;

    color: #8a8fa3;

    margin-top: 10px;

    -webkit-transition: all 0.3s ease-out 0s;

    -moz-transition: all 0.3s ease-out 0s;

    -ms-transition: all 0.3s ease-out 0s;

    -o-transition: all 0.3s ease-out 0s;

    transition: all 0.3s ease-out 0s; }

    .blog-sidebar .sidebar-category ul li a span {

      float: right; }

    .blog-sidebar .sidebar-category ul li a:hover {

      color: #00cf07; }

.blog-sidebar .sidebar-subscribe {

  padding: 25px 20px;

  border: 1px solid #ddd;

  border-radius: 5px; }

  .blog-sidebar .sidebar-subscribe .subscribe-form {

    position: relative; }

    .blog-sidebar .sidebar-subscribe .subscribe-form input {

      width: 100%;

      height: 50px;

      border: 1px solid #ddd;

      padding: 0 30px;

      border-radius: 50px;

      background-color: #f2f2f2; }

      .blog-sidebar .sidebar-subscribe .subscribe-form input.placeholder {

        opacity: 1;

        color: #8a8fa3; }

      .blog-sidebar .sidebar-subscribe .subscribe-form input:-moz-placeholder {

        opacity: 1;

        color: #8a8fa3; }

      .blog-sidebar .sidebar-subscribe .subscribe-form input::-moz-placeholder {

        opacity: 1;

        color: #8a8fa3; }

      .blog-sidebar .sidebar-subscribe .subscribe-form input::-webkit-input-placeholder {

        opacity: 1;

        color: #8a8fa3; }

      .blog-sidebar .sidebar-subscribe .subscribe-form input:focus {

        border-color: #00cf07; }

    .blog-sidebar .sidebar-subscribe .subscribe-form button {

      width: 65px;

      height: 50px;

      text-align: center;

      background-color: #00cf07;

      font-size: 20px;

      color: #fff;

      border: 1px solid #00cf07;

      border-top-right-radius: 50px;

      border-bottom-right-radius: 50px;

      position: absolute;

      top: 0;

      right: 0;

      line-height: 54px;

      cursor: pointer; }















      .player{

        height: 95vh;

        display: flex;

        align-items: center;

        flex-direction: column;

        justify-content: center;

    }

      .wrapper{

        border: 1px solid transparent;

        padding: 30px;

        border-radius: 20px;

        background-color: #ddd;

        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;

      }

      

      .details {

      display: flex;

      align-items: center;

      flex-direction: column;

      justify-content: center;

      }

      

      .track-art {

      margin: 25px;

      height: 250px;

      width: 250px;

      border:2px solid 	#FFFAFA;

      background-size: cover;

      background-position: center;

      border-radius: 50%;

      -moz-box-shadow: 0px 6px 5px black;

      -webkit-box-shadow: 0px 6px 5px black;

      box-shadow: 0px 6px 5px black;

      -moz-border-radius:190px;

      -webkit-border-radius:190px;

      border-radius:190px;

      }

      

      .now-playing {

      font-size: 1rem;

      }

      

      .track-name {

      font-size: 2.5rem;

      }

      

      .track-artist {

      margin-top: 5px;

      font-size: 1.5rem;

      }

      

      .buttons {

      display: flex;

      appearance: none;

      flex-direction: row;

      align-items: center;

      justify-content: center;

      

      }

      .active{

          color: black;

      }

      

      .repeat-track,

      .random-track,

      .playpause-track,

      .prev-track,

      .next-track {

      padding: 25px;

      opacity: 0.8;

      transition: opacity .2s;

      }

      

      .repeat-track:hover,

      .random-track:hover,

      .playpause-track:hover,

      .prev-track:hover,

      .next-track:hover {

      opacity: 1.0;

      }

      

      .slider_container {

      display: flex;

      justify-content: center;

      align-items: center;

      }

      

      .seek_slider, .volume_slider {

      -webkit-appearance: none;

      -moz-appearance: none;

      appearance: none;

      height: 5px;

      background: #018f14;

      -webkit-transition: .2s;

      transition: opacity .2s;

      }

      

      .seek_slider::-webkit-slider-thumb,

      .volume_slider::-webkit-slider-thumb {

      -webkit-appearance: none;

      -moz-appearance: none;

      appearance: none;

      width: 15px;

      height: 15px;

      background: white;

      border: 3px solid #5aeb5f;

      cursor: grab;

      border-radius: 100%;

      }

      

      .seek_slider:hover,

      .volume_slider:hover {

      opacity: 1.0;

      }

      

      .seek_slider {

      width: 60%;

      }

      

      .volume_slider {

      width: 30%;

      }

      

      .current-time,

      .total-duration {

      padding: 10px;

      }

      

      i.fa-volume-down,

      i.fa-volume-up {

      padding: 10px;

      }

      

      i,

      i.fa-play-circle,

      i.fa-pause-circle,

      i.fa-step-forward,

      i.fa-step-backward,

      p {

      cursor: pointer;

      }

      .randomActive{

          color: black;

      }

      .rotate {

          animation: rotation 8s infinite linear;

      }

      @keyframes rotation {

          from {

            transform: rotate(0deg);

          }

          to {

            transform: rotate(359deg);

          }

      }

      .loader {

        height: 70px;

        display: flex;

        justify-content: center;

        align-items: center;

      }

      .loader .stroke{

          background: #f1f1f1;

          height: 100%;

          width: 10px;

          border-radius: 50px;

          margin: 0 5px;

          animation: animate 1.4s linear infinite;

      }

        @keyframes animate {

          50% {

            height: 20%;

            background: #00cf07;

          }

      

          100% {

            background: #00cf07;

            height: 100%;

          }

        }

        .stroke:nth-child(1){

            animation-delay: 0s;

        }

        .stroke:nth-child(2){

          animation-delay: 0.3s;

      }

      .stroke:nth-child(3){

          animation-delay: 0.6s;

      }

      .stroke:nth-child(4){

          animation-delay: 0.9s;

      }

      .stroke:nth-child(5){

          animation-delay: 0.6s;

      }

      .stroke:nth-child(6){

          animation-delay: 0.3s;

      }

      .stroke:nth-child(7){

          animation-delay: 0s;

      }

/*# sourceMappingURL=style.css.map */

