/* ----------------------------------------------------
Template Name: DriftCrop - App Landing Page
Author: CreativeJeff
URL: https://DriftCropapp.uiexpertin.com/
Version: 1.0;
------------------------------------------------------- */
/*  -------------------------------
CSS Table of Content

00. Typography
01. Global base style
02. Pre-loader style
03. Typography style
04. Button style
05. Scroll bar style
06. Header Navigation style
07. Hero welcome Header style
08. Welcome Section style
09. How it Works style
10. Screenshots style
11. Pricing style
12. Clients style
13. Our team style
14. Newsletter style
15. Subscribe style
16. FAQ's style
17. FAQ's Form style
18. Coming Soon style
19. Page Not Found style
20. Pagination style
21. Blog style
22. Login Register style
23. Parallax background image style
24. Swiper Custom style
25. Footer style
26. Animation style
27. Demo Page Custom style
28. Responsive style
  
 ---------------------------------- */
/* --------------------------
  00. Typography
----------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap");
/* --------------------------
  01. Global base style
----------------------------- */
body {
  font-family: "Open Sans", sans-serif;
  color: #3C404D;
  font-size: 16px;
  line-height: 1.5rem;
  font-style: normal;
  font-weight: normal; }

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

a {
  text-decoration: none; }

a:hover,
a:focus {
  color: #2A2D43; }

a,
a:hover,
a:focus,
.btn:focus {
  text-decoration: none;
  outline: none;
  box-shadow: none; }

/* Images Filter Shadow */
.img-shadow {
  -webkit-filter: drop-shadow(0px 0.625rem 1.25rem rgba(26, 26, 27, 0.2));
  filter: drop-shadow(0px 0.625rem 1.25rem rgba(26, 26, 27, 0.2)); }

/* Image Shake Animation */
.shake-item {
  -webkit-animation: shakeItem 5s linear 0s infinite normal forwards;
  animation: shakeItem 5s linear 0s infinite normal forwards; }

section {
  overflow: hidden;
  position: relative; }
  section .section-heading {
    margin-bottom: 1.25rem; }
    section .section-heading .section-title {
      display: inline-block;
      margin-bottom: 1.25rem;
      padding-bottom: .5rem;
      position: relative;
      color: #707070;
      font-weight: 600; }
      section .section-heading .section-title:before {
        width: 100%;
        height: 2px;
        content: '';
        position: absolute;
        background: #00BBF2;
        border-radius: 1rem;
        top: unset;
        left: 50%;
        right: unset;
        bottom: 0;
        transform: translate(-50%, 0); }
    section .section-heading.section-heading-on-dark .section-title {
      color: #ffffff; }
      section .section-heading.section-heading-on-dark .section-title:before {
        background: #00BBF2; }
    section .section-heading.section-heading-on-dark h2 {
      color: #ffffff; }
    section .section-heading.section-heading-on-dark p {
      color: #ffffff; }
    section .section-heading p {
      line-height: 1.75rem;
      font-size: 1.125rem;
      font-weight: 300; }
  section .service-thumb {
    position: relative;
    z-index: 1; }
    section .service-thumb img {
      margin-left: auto;
      margin-right: auto;
      display: block; }
      section .service-thumb img.mw-img {
        max-width: 360px; }
  section .art-background {
    background: url(../img/bg/bg-art.svg) no-repeat center center;
    background-size: 100% auto;
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1rem;
    z-index: 0; }

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

/* Store Buttons */
.button-group.store-buttons {
  margin-left: -5px;
  margin-right: -5px; }
  .button-group.store-buttons a {
    padding: 5px;
    -webkit-filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.07));
    filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.07));
    transition: all 0.3s ease;
    -webkit-transform: scale(1);
    transform: scale(1);
    position: relative;
    top: 0; }
    .button-group.store-buttons a:hover {
      -webkit-transform: scale(1.02);
      transform: scale(1.02);
      top: -4px; }
    .button-group.store-buttons a:active {
      opacity: .8; }

/* List with check list */
ul.list-with-checklist li {
  position: relative;
  padding-left: 2.625rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 1.125rem;
  font-weight: 600; }
  ul.list-with-checklist li:before {
    content: "\F012C";
    font-family: "Material Design Icons";
    background: #04bbf1;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 5px;
    position: absolute;
    top: 0.625rem;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FBFBFF; }
ul.list-group.list-group-custom .list-group-item {
  border: none;
  margin: .5rem 0;
  padding: 5px;
  -webkit-box-align: center;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.1);
  -webkit-box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.1); }
  ul.list-group.list-group-custom .list-group-item .icon {
    width: 6.875rem;
    height: 6.875rem;
    -webkit-box-flex: 0;
    flex: 0 0 6.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-right: 1.25rem;
    color: #04bbf1;
    background: #FBFBFF;
    font-size: 3rem; }
  ul.list-group.list-group-custom .list-group-item .list-content h4 {
    margin-bottom: .5rem; }
  ul.list-group.list-group-custom .list-group-item .list-content p {
    margin-bottom: 0; }

/* VenoBox Styling */
.vbox-container .vbox-content img {
  border-radius: .8rem; }

/* parallax Styling */
.parallax-window {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1; }

/*--- Video Button ---*/
.video-btn, .how-it-works-video .how-it-works-video-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 50%;
  background: #2A2D43;
  color: #ffffff;
  font-size: 2.5rem;
  animation: shadowPulse 2s linear infinite;
  transform: scale(1);
  transition: all 0.3s ease;
  z-index: 4; }
  .video-btn:hover, .how-it-works-video .how-it-works-video-btn:hover {
    color: #ffffff;
    transform: scale(1.3); }

/* Scroll to Top */
.scroll-to-top-btn {
  position: fixed;
  z-index: 50;
  right: 1.5rem;
  bottom: 1.5rem;
  background: #4caeea;
  background: linear-gradient(45deg, #3395d0 0%, #74caff 100%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.1);
  -webkit-box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.1);
  color: #ffffff;
  font-size: 1.5rem;
  opacity: 0;
  visibility: hidden; }
  .scroll-to-top-btn:active, .scroll-to-top-btn:focus {
    color: #ffffff; }
  .scroll-to-top-btn.active {
    opacity: .8;
    visibility: visible; }
    .scroll-to-top-btn.active:hover {
      opacity: 1;
      color: #fff;
      box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.3) !important;
      -webkit-box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.3) !important; }

/*--- Used to develop DriftCrop Template ---*/
@media (min-width: 992px) {
  .build-with {
    padding-bottom: 4rem; } }
.build-with a {
  margin: 1rem; }
  .build-with a img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(26, 26, 27, 0.05);
    padding: .5rem;
    background: #ffffff; }

/*--- Scroll Mouse Animation ---*/
.scroll-down-mouse {
  position: absolute;
  width: 34px;
  height: 55px;
  left: 50%;
  transform: translateX(-50%);
  margin-left: auto;
  margin-right: auto;
  bottom: 27.5px; }
  .scroll-down-mouse:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 34px;
    height: 55px;
    border: 2px solid #0033CC;
    opacity: 0.75;
    border-radius: 17px; }
  .scroll-down-mouse:after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translate(-50%, 10px);
    width: 3px;
    height: 10px;
    border-radius: 25%;
    background-color: #0033CC;
    animation-name: scroll;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
    animation-iteration-count: infinite; }

@keyframes scroll {
  0% {
    opacity: 0; }
  10% {
    transform: translate(-50%, 10px);
    opacity: 1; }
  100% {
    transform: translate(-50%, 20px);
    opacity: 0; } }
/* --------------------------
  02. Pre-loader style
----------------------------- */
.preloader {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99999; }
  .preloader .preloader-container {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .preloader .preloader-container .loader-section {
      position: fixed;
      top: 0;
      height: 100%;
      width: 100%;
      background-color: #ffffff;
      transform: translateY(0);
      transition: all 0.3s ease; }
    .preloader .preloader-container .preloader-effect {
      position: absolute;
      height: 50px;
      width: 170px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 99; }
      .preloader .preloader-container .preloader-effect circle.dot:nth-of-type(1) {
        -webkit-animation: slide 2s ease infinite;
        animation: slide 2s ease infinite; }
      .preloader .preloader-container .preloader-effect circle.dot:nth-of-type(2) {
        -webkit-transform: translateX(55px);
        transform: translateX(55px);
        -webkit-animation: slide 2s ease infinite;
        animation: slide 2s ease infinite;
        -webkit-animation-delay: 1s;
        animation-delay: 1s; }

.page-loaded .loader-section {
  transform: translateY(-100%) !important; }
.page-loaded .preloader-effect {
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
  visibility: hidden;
  opacity: 0; }

/* --------------------------
  03. Typography style
----------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #3C404D;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: 0; }

h1 {
  font-size: 3.375rem;
  font-weight: 600; }

h2 {
  font-size: 2.5rem; }

h3 {
  font-size: 1.5rem; }

h4 {
  font-size: 1.25rem; }

h5 {
  font-size: 1rem; }

h6 {
  font-size: 0.875rem;
  font-weight: 400; }

p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: #707070; }

/* --------------------------
  04. Button style
----------------------------- */
.btn {
  font-weight: 600;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  letter-spacing: 0 0.031rem;
  top: 0;
  transition: all 0.3s ease;
  /* Button Shadow Style Start */
  /* Button Shadow Style Start */ }
  .btn.btn-lg {
    min-height: 3.75rem;
    font-size: 1.125rem;
    padding-left: 1.875rem;
    padding-right: 1.875rem;
    line-height: 1.125rem; }
  .btn:not(.btn-lg):not(.btn-sm) {
    min-height: 2.75rem;
    font-size: 0.875rem;
    line-height: 2.2;
    padding-left: 1.25rem;
    padding-right: 1.25rem; }
  .btn:hover {
    top: -0.125rem; }
  .btn:focus, .btn:active {
    outline: none;
    box-shadow: none; }
  .btn.btn-primary.btn-shadow {
    box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.3); }
    .btn.btn-primary.btn-shadow:hover {
      box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.6); }
  .btn.btn-primary.btn-shadow-sm {
    box-shadow: 0px 0.25 0.625 rgba(0, 51, 204, 0.3); }
    .btn.btn-primary.btn-shadow-sm:hover {
      box-shadow: 0px 0.25 0.625 rgba(0, 51, 204, 0.5); }
  .btn.btn-primary.btn-shadow-lg {
    box-shadow: 0px 1rem 2rem rgba(0, 51, 204, 0.3); }
    .btn.btn-primary.btn-shadow-lg:hover {
      box-shadow: 0px 1rem 2rem rgba(0, 51, 204, 0.5); }
  .btn.btn-success.btn-shadow {
    box-shadow: 0px 0.625rem 1.25rem rgba(43, 216, 101, 0.3); }
    .btn.btn-success.btn-shadow:hover {
      box-shadow: 0px 0.625rem 1.25rem rgba(43, 216, 101, 0.6); }
  .btn.btn-success.btn-shadow-sm {
    box-shadow: 0px 0.25 0.625 rgba(43, 216, 101, 0.3); }
    .btn.btn-success.btn-shadow-sm:hover {
      box-shadow: 0px 0.25 0.625 rgba(43, 216, 101, 0.5); }
  .btn.btn-success.btn-shadow-lg {
    box-shadow: 0px 1rem 2rem rgba(43, 216, 101, 0.3); }
    .btn.btn-success.btn-shadow-lg:hover {
      box-shadow: 0px 1rem 2rem rgba(43, 216, 101, 0.5); }
  .btn.btn-warning.btn-shadow {
    box-shadow: 0px 0.625rem 1.25rem rgba(242, 185, 70, 0.3); }
    .btn.btn-warning.btn-shadow:hover {
      box-shadow: 0px 0.625rem 1.25rem rgba(242, 185, 70, 0.6); }
  .btn.btn-warning.btn-shadow-sm {
    box-shadow: 0px 0.25 0.625 rgba(242, 185, 70, 0.3); }
    .btn.btn-warning.btn-shadow-sm:hover {
      box-shadow: 0px 0.25 0.625 rgba(242, 185, 70, 0.5); }
  .btn.btn-warning.btn-shadow-lg {
    box-shadow: 0px 1rem 2rem rgba(242, 185, 70, 0.3); }
    .btn.btn-warning.btn-shadow-lg:hover {
      box-shadow: 0px 1rem 2rem rgba(242, 185, 70, 0.5); }
  .btn.btn-danger.btn-shadow {
    box-shadow: 0px 0.625rem 1.25rem rgba(238, 80, 80, 0.3); }
    .btn.btn-danger.btn-shadow:hover {
      box-shadow: 0px 0.625rem 1.25rem rgba(238, 80, 80, 0.6); }
  .btn.btn-danger.btn-shadow-sm {
    box-shadow: 0px 0.25 0.625 rgba(238, 80, 80, 0.3); }
    .btn.btn-danger.btn-shadow-sm:hover {
      box-shadow: 0px 0.25 0.625 rgba(238, 80, 80, 0.5); }
  .btn.btn-danger.btn-shadow-lg {
    box-shadow: 0px 1rem 2rem rgba(238, 80, 80, 0.3); }
    .btn.btn-danger.btn-shadow-lg:hover {
      box-shadow: 0px 1rem 2rem rgba(238, 80, 80, 0.5); }
  .btn.btn-dark-blue.btn-shadow {
    box-shadow: 0px 0.625rem 1.25rem rgba(34, 41, 64, 0.3); }
    .btn.btn-dark-blue.btn-shadow:hover {
      box-shadow: 0px 0.625rem 1.25rem rgba(34, 41, 64, 0.6); }
  .btn.btn-dark-blue.btn-shadow-sm {
    box-shadow: 0px 0.25 0.625 rgba(34, 41, 64, 0.3); }
    .btn.btn-dark-blue.btn-shadow-sm:hover {
      box-shadow: 0px 0.25 0.625 rgba(34, 41, 64, 0.5); }
  .btn.btn-dark-blue.btn-shadow-lg {
    box-shadow: 0px 1rem 2rem rgba(34, 41, 64, 0.3); }
    .btn.btn-dark-blue.btn-shadow-lg:hover {
      box-shadow: 0px 1rem 2rem rgba(34, 41, 64, 0.5); }
  .btn.btn-dark.btn-shadow {
    box-shadow: 0px 0.625rem 1.25rem rgba(60, 64, 77, 0.3); }
    .btn.btn-dark.btn-shadow:hover {
      box-shadow: 0px 0.625rem 1.25rem rgba(60, 64, 77, 0.6); }
  .btn.btn-dark.btn-shadow-sm {
    box-shadow: 0px 0.25 0.625 rgba(60, 64, 77, 0.3); }
    .btn.btn-dark.btn-shadow-sm:hover {
      box-shadow: 0px 0.25 0.625 rgba(60, 64, 77, 0.5); }
  .btn.btn-dark.btn-shadow-lg {
    box-shadow: 0px 1rem 2rem rgba(60, 64, 77, 0.3); }
    .btn.btn-dark.btn-shadow-lg:hover {
      box-shadow: 0px 1rem 2rem rgba(60, 64, 77, 0.5); }
  .btn.btn-dark-gray.btn-shadow {
    box-shadow: 0px 0.625rem 1.25rem rgba(112, 112, 112, 0.3); }
    .btn.btn-dark-gray.btn-shadow:hover {
      box-shadow: 0px 0.625rem 1.25rem rgba(112, 112, 112, 0.6); }
  .btn.btn-dark-gray.btn-shadow-sm {
    box-shadow: 0px 0.25 0.625 rgba(112, 112, 112, 0.3); }
    .btn.btn-dark-gray.btn-shadow-sm:hover {
      box-shadow: 0px 0.25 0.625 rgba(112, 112, 112, 0.5); }
  .btn.btn-dark-gray.btn-shadow-lg {
    box-shadow: 0px 1rem 2rem rgba(112, 112, 112, 0.3); }
    .btn.btn-dark-gray.btn-shadow-lg:hover {
      box-shadow: 0px 1rem 2rem rgba(112, 112, 112, 0.5); }
  .btn.btn-gray.btn-shadow {
    box-shadow: 0px 0.625rem 1.25rem rgba(199, 199, 213, 0.3); }
    .btn.btn-gray.btn-shadow:hover {
      box-shadow: 0px 0.625rem 1.25rem rgba(199, 199, 213, 0.6); }
  .btn.btn-gray.btn-shadow-sm {
    box-shadow: 0px 0.25 0.625 rgba(199, 199, 213, 0.3); }
    .btn.btn-gray.btn-shadow-sm:hover {
      box-shadow: 0px 0.25 0.625 rgba(199, 199, 213, 0.5); }
  .btn.btn-gray.btn-shadow-lg {
    box-shadow: 0px 1rem 2rem rgba(199, 199, 213, 0.3); }
    .btn.btn-gray.btn-shadow-lg:hover {
      box-shadow: 0px 1rem 2rem rgba(199, 199, 213, 0.5); }
  .btn.btn-light-gray.btn-shadow {
    box-shadow: 0px 0.625rem 1.25rem rgba(251, 251, 255, 0.3); }
    .btn.btn-light-gray.btn-shadow:hover {
      box-shadow: 0px 0.625rem 1.25rem rgba(251, 251, 255, 0.6); }
  .btn.btn-light-gray.btn-shadow-sm {
    box-shadow: 0px 0.25 0.625 rgba(251, 251, 255, 0.3); }
    .btn.btn-light-gray.btn-shadow-sm:hover {
      box-shadow: 0px 0.25 0.625 rgba(251, 251, 255, 0.5); }
  .btn.btn-light-gray.btn-shadow-lg {
    box-shadow: 0px 1rem 2rem rgba(251, 251, 255, 0.3); }
    .btn.btn-light-gray.btn-shadow-lg:hover {
      box-shadow: 0px 1rem 2rem rgba(251, 251, 255, 0.5); }
  .btn.btn-light-blue.btn-shadow {
    box-shadow: 0px 0.625rem 1.25rem rgba(217, 225, 252, 0.3); }
    .btn.btn-light-blue.btn-shadow:hover {
      box-shadow: 0px 0.625rem 1.25rem rgba(217, 225, 252, 0.6); }
  .btn.btn-light-blue.btn-shadow-sm {
    box-shadow: 0px 0.25 0.625 rgba(217, 225, 252, 0.3); }
    .btn.btn-light-blue.btn-shadow-sm:hover {
      box-shadow: 0px 0.25 0.625 rgba(217, 225, 252, 0.5); }
  .btn.btn-light-blue.btn-shadow-lg {
    box-shadow: 0px 1rem 2rem rgba(217, 225, 252, 0.3); }
    .btn.btn-light-blue.btn-shadow-lg:hover {
      box-shadow: 0px 1rem 2rem rgba(217, 225, 252, 0.5); }
  .btn.btn-facebook.btn-shadow {
    box-shadow: 0px 0.625rem 1.25rem rgba(27, 118, 244, 0.3); }
    .btn.btn-facebook.btn-shadow:hover {
      box-shadow: 0px 0.625rem 1.25rem rgba(27, 118, 244, 0.6); }
  .btn.btn-facebook.btn-shadow-sm {
    box-shadow: 0px 0.25 0.625 rgba(27, 118, 244, 0.3); }
    .btn.btn-facebook.btn-shadow-sm:hover {
      box-shadow: 0px 0.25 0.625 rgba(27, 118, 244, 0.5); }
  .btn.btn-facebook.btn-shadow-lg {
    box-shadow: 0px 1rem 2rem rgba(27, 118, 244, 0.3); }
    .btn.btn-facebook.btn-shadow-lg:hover {
      box-shadow: 0px 1rem 2rem rgba(27, 118, 244, 0.5); }
  .btn.btn-twitter.btn-shadow {
    box-shadow: 0px 0.625rem 1.25rem rgba(30, 159, 244, 0.3); }
    .btn.btn-twitter.btn-shadow:hover {
      box-shadow: 0px 0.625rem 1.25rem rgba(30, 159, 244, 0.6); }
  .btn.btn-twitter.btn-shadow-sm {
    box-shadow: 0px 0.25 0.625 rgba(30, 159, 244, 0.3); }
    .btn.btn-twitter.btn-shadow-sm:hover {
      box-shadow: 0px 0.25 0.625 rgba(30, 159, 244, 0.5); }
  .btn.btn-twitter.btn-shadow-lg {
    box-shadow: 0px 1rem 2rem rgba(30, 159, 244, 0.3); }
    .btn.btn-twitter.btn-shadow-lg:hover {
      box-shadow: 0px 1rem 2rem rgba(30, 159, 244, 0.5); }
  .btn.btn-googleplus.btn-shadow {
    box-shadow: 0px 0.625rem 1.25rem rgba(211, 72, 54, 0.3); }
    .btn.btn-googleplus.btn-shadow:hover {
      box-shadow: 0px 0.625rem 1.25rem rgba(211, 72, 54, 0.6); }
  .btn.btn-googleplus.btn-shadow-sm {
    box-shadow: 0px 0.25 0.625 rgba(211, 72, 54, 0.3); }
    .btn.btn-googleplus.btn-shadow-sm:hover {
      box-shadow: 0px 0.25 0.625 rgba(211, 72, 54, 0.5); }
  .btn.btn-googleplus.btn-shadow-lg {
    box-shadow: 0px 1rem 2rem rgba(211, 72, 54, 0.3); }
    .btn.btn-googleplus.btn-shadow-lg:hover {
      box-shadow: 0px 1rem 2rem rgba(211, 72, 54, 0.5); }
  .btn.btn-instagram.btn-shadow {
    box-shadow: 0px 0.625rem 1.25rem rgba(226, 49, 108, 0.3); }
    .btn.btn-instagram.btn-shadow:hover {
      box-shadow: 0px 0.625rem 1.25rem rgba(226, 49, 108, 0.6); }
  .btn.btn-instagram.btn-shadow-sm {
    box-shadow: 0px 0.25 0.625 rgba(226, 49, 108, 0.3); }
    .btn.btn-instagram.btn-shadow-sm:hover {
      box-shadow: 0px 0.25 0.625 rgba(226, 49, 108, 0.5); }
  .btn.btn-instagram.btn-shadow-lg {
    box-shadow: 0px 1rem 2rem rgba(226, 49, 108, 0.3); }
    .btn.btn-instagram.btn-shadow-lg:hover {
      box-shadow: 0px 1rem 2rem rgba(226, 49, 108, 0.5); }
  .btn.btn-pinterest.btn-shadow {
    box-shadow: 0px 0.625rem 1.25rem rgba(233, 1, 37, 0.3); }
    .btn.btn-pinterest.btn-shadow:hover {
      box-shadow: 0px 0.625rem 1.25rem rgba(233, 1, 37, 0.6); }
  .btn.btn-pinterest.btn-shadow-sm {
    box-shadow: 0px 0.25 0.625 rgba(233, 1, 37, 0.3); }
    .btn.btn-pinterest.btn-shadow-sm:hover {
      box-shadow: 0px 0.25 0.625 rgba(233, 1, 37, 0.5); }
  .btn.btn-pinterest.btn-shadow-lg {
    box-shadow: 0px 1rem 2rem rgba(233, 1, 37, 0.3); }
    .btn.btn-pinterest.btn-shadow-lg:hover {
      box-shadow: 0px 1rem 2rem rgba(233, 1, 37, 0.5); }
  .btn.btn-primary:hover {
    background-color: #2A2D43;
    border-color: #2A2D43; }
  .btn.btn-success:hover {
    background-color: #41dc75;
    border-color: #41dc75; }
  .btn.btn-warning:hover {
    background-color: #f4c25e;
    border-color: #f4c25e; }
  .btn.btn-danger:hover {
    background-color: #f06767;
    border-color: #f06767; }
  .btn.btn-dark-blue:hover {
    background-color: #2b3451;
    border-color: #2b3451; }
  .btn.btn-dark:hover {
    background-color: #474c5b;
    border-color: #474c5b; }
  .btn.btn-dark-gray:hover {
    background-color: #7d7d7d;
    border-color: #7d7d7d; }
  .btn.btn-gray:hover {
    background-color: #d6d6e0;
    border-color: #d6d6e0; }
  .btn.btn-light-gray:hover {
    background-color: white;
    border-color: white; }
  .btn.btn-light-blue:hover {
    background-color: #f1f4fe;
    border-color: #f1f4fe; }
  .btn.btn-facebook:hover {
    background-color: #3385f5;
    border-color: #3385f5; }
  .btn.btn-twitter:hover {
    background-color: #36a9f5;
    border-color: #36a9f5; }
  .btn.btn-googleplus:hover {
    background-color: #d85b4b;
    border-color: #d85b4b; }
  .btn.btn-instagram:hover {
    background-color: #e5477c;
    border-color: #e5477c; }
  .btn.btn-pinterest:hover {
    background-color: #fe062c;
    border-color: #fe062c; }

/* --------------------------
  05. Scroll bar style
----------------------------- */
/*::-webkit-scrollbar {
  width: 0.313rem;
  height: 0.313rem; }

::-webkit-scrollbar-track {
  background: #FBFBFF; }

::-webkit-scrollbar-thumb {
  background-color: #0033CC;
  outline: 1px solid #002699;
  border-radius: 0.313rem; }*/

/* --------------------------
  06. Header Navigation style
----------------------------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 0;
  padding-bottom: 0;
  z-index: 999;
  -webkit-transition: .3s;
  transition: .3s;
  background: transparent; }
  .navbar .nav-title {
    position: absolute;
    height: 54px;
    top: 0;
    padding-left: 1.25rem;
    display: flex;
    align-items: center; }
  .navbar .navbar-nav .nav-link {
    padding-right: 2.25rem;
    padding-left: 1.25rem;
    -webkit-transition: .3s;
    transition: .3s;
    font-weight: 400;
    font-family: "Poppins", sans-serif; }
    .navbar .navbar-nav .nav-link:not(.dropdown-toggle) {
      padding-right: 1.25rem; }
  .navbar .logo-image {
    min-width: 172px;
    position: relative;
    min-height: 34px; }
    @media (min-width: 991px) {
      .navbar .logo-image {
        min-height: 34px; } }
    .navbar .logo-image img {
      position: absolute;
      left: 0;
      top: 0;
      max-width: 100%;
      transition: all 0.3s ease;
      max-height: 34px; }
      .navbar .logo-image img.logo-on-white {
        opacity: 0; }
      .navbar .logo-image img.logo-on-dark {
        opacity: 1; }
  .navbar.navbar-sticky-on-top {
    transition: all 0.3s ease;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px;
    top: 0;
    background: #fff; }
    .navbar.navbar-sticky-on-top .logo-image img.logo-on-white {
      opacity: 1; }
    .navbar.navbar-sticky-on-top .logo-image img.logo-on-dark {
      opacity: 0; }

/*NAVBAR DARK*/
.navbar-dark .navbar-nav .nav-link {
  color: #000000; }
.navbar-dark .btn-outline {
  color: #fff; }
.navbar-dark.navbar-sticky-on-top .navbar-nav .nav-link {
  color: #7e8085; }
  .navbar-dark.navbar-sticky-on-top .navbar-nav .nav-link:hover, .navbar-dark.navbar-sticky-on-top .navbar-nav .nav-link:focus, .navbar-dark.navbar-sticky-on-top .navbar-nav .nav-link.active, .navbar-dark.navbar-sticky-on-top .navbar-nav .nav-link.current-menu-item {
    color: #2c2e30; }

/*---------- Bootstrap Nav Custom Hover ----------*/
.dropdown-menu {
  border: 0;
  padding: 0;
  margin: 0;
  -webkit-transition: .3s;
  transition: .3s; }
  .dropdown-menu > li {
    padding: 0; }

/* Main Menu caret */
.dropdown > .dropdown-toggle {
  position: relative; }
  .dropdown > .dropdown-toggle:after {
    border: none;
    content: '\F0140';
    font-family: "Material Design Icons";
    vertical-align: unset;
    font-size: 18px;
    position: absolute;
    width: 2.25rem;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    margin: 0; }
.dropdown .dropdown-item {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  font-family: "Poppins", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #2c2e30;
  -webkit-transition: .3s;
  transition: .3s;
  position: relative; }
  .dropdown .dropdown-item:active {
    background: #0033CC;
    color: #ffffff; }
.dropdown .dropdown-sub-menu {
  position: relative;
  /*  Sub Menu cater */ }
  .dropdown .dropdown-sub-menu > .dropdown-menu {
    top: 0;
    left: 100%; }
    .dropdown .dropdown-sub-menu > .dropdown-menu .dropdown-item {
      padding-left: 2.5rem; }
  .dropdown .dropdown-sub-menu .dropdown-toggle:after {
    border: none;
    content: '\F0140';
    font-family: "Material Design Icons";
    vertical-align: unset;
    font-size: 18px;
    position: absolute;
    width: 2.25rem;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(0);
    transform: translateY(-50%) rotate(0);
    text-align: center;
    color: #bdc0cb;
    margin: 0;
    transition: all 0.3s ease; }
  .dropdown .dropdown-sub-menu:hover .dropdown-toggle:after {
    text-decoration: none;
    transform: translateY(-50%) rotate(-90deg); }

.my-element {
  animation: fadeIn;
  /* referring directly to the animation's @keyframe declaration */
  animation-duration: .5s;
  /* don't forget to set a duration! */ }

/* --------------------------
  07. Hero welcome Header style
----------------------------- */
.welcome-area {
  min-height: 100vh;
  padding-top: 100px;
  /*--- Full Screen Shape or BG Style Start ---*/
  /*--- Full Screen Shape or BG Style End ---*/
  /*--- Bottom Screen Shape or BG Style style ---*/
  /*--- Bottom Screen Shape or BG Style style ---*/ }
  .welcome-area.bg-overlay {
    position: relative; }
    .welcome-area.bg-overlay:before {
      background: #292c44;
      /*background: linear-gradient(45deg, #292c44 0%, #8900cc 100%);*/
      opacity: 0.80;
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }
      @media (min-width: 992px) {
        .welcome-area.bg-overlay:before {
          z-index: -1; } }
    .welcome-area.bg-overlay.overlay-one:before {
      background: #9e35ae;
      background: linear-gradient(45deg, #9e35ae 0%, #2828b1 100%); }
  .welcome-area .welcome-intro {
    position: relative;
    z-index: 1; }
    .welcome-area .welcome-intro .hero-subscribe {
      max-width: 606px; }
  .welcome-area .welcome-thumb {
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1; }
  .welcome-area .welcome-hero-mockup {
    position: relative;
    z-index: 2;
    max-width: 750px; }
  .welcome-area .shape-fullsection {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100vh;
    z-index: -1; }
    .welcome-area .shape-fullsection.showcase-header-pattern-bg .shape-one {
      position: absolute;
      bottom: 25rem;
      left: 60rem;
      width: 80rem;
      height: 35rem;
      border-radius: 17rem;
      transform: rotate(-45deg);
      opacity: .04;
      background-color: #0033CC; }
    .welcome-area .shape-fullsection.showcase-header-pattern-bg .shape-two {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url(../img/bg/ball-wed-01.svg) no-repeat top center;
      background-size: 100% auto;
      opacity: .04;
      transform: scaleX(-1);
      -webkit-filter: FlipH;
      filter: FlipH; }
    .welcome-area .shape-fullsection .shape-radial {
      color: #e8dfff; }
    .welcome-area .shape-fullsection .shape-wave {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url(../img/bg/overlay-bg-curve.svg) no-repeat center top;
      background-size: 100% auto; }
    .welcome-area .shape-fullsection.bg-slider:before {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      content: '';
      background: rgba(60, 64, 77, 0.8);
      z-index: 0; }
    .welcome-area .shape-fullsection.bg-slider .swiper-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1; }
      .welcome-area .shape-fullsection.bg-slider .swiper-container .swiper-slide img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover; }
    .welcome-area .shape-fullsection.heroheaderparticles {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }
      .welcome-area .shape-fullsection.heroheaderparticles:before {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: '';
        background: rgba(60, 64, 77, 0.8);
        z-index: 0; }
      .welcome-area .shape-fullsection.heroheaderparticles canvas {
        position: relative;
        z-index: 1; }
    .welcome-area .shape-fullsection.video-bg {
      background: url(http://via.placeholder.com/1920x1080/333333/fff) no-repeat center center;
      background-size: cover; }
      .welcome-area .shape-fullsection.video-bg:before {
        background: #292c44;
        /*background: linear-gradient(45deg, #292c44 0%, #8900cc 100%);*/
        opacity: 0.7;
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1; }
      .welcome-area .shape-fullsection.video-bg .video-background {
        position: absolute;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        z-index: 0; }
    .welcome-area .shape-fullsection.svg-animated-bg .shape-bg-one {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url(../img/bg/hero-bg.svg) no-repeat bottom center;
      background-size: 100% auto; }
    .welcome-area .shape-fullsection.svg-animated-bg .shape-bg-two {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url(../img/bg/ball-wed.svg) no-repeat top center;
      background-size: 100% auto;
      opacity: .1; }
    .welcome-area .shape-fullsection.shape-curve-with-spot {
      background-position: center bottom;
      background-size: cover;
      background-repeat: no-repeat;
      background-image: url(../img/bg/shape-01.svg); }
    .welcome-area .shape-fullsection.shape-ios-bigsur {
      background-position: right bottom;
      background-size: cover;
      background-repeat: no-repeat;
      background-image: url(../img/bg/shape-03.svg); }
    .welcome-area .shape-fullsection.shape-cube-large {
      background-position: center bottom;
      background-size: cover;
      background-repeat: no-repeat;
      background-image: url(../img/bg/shape-02.svg); }
      .welcome-area .shape-fullsection.shape-cube-large .box-animation-01,
      .welcome-area .shape-fullsection.shape-cube-large .box-animation-02 {
        position: absolute;
        z-index: 1;
        border-radius: 50px;
        transform: rotate(-12deg);
        background: rgba(200, 29, 207, 0.05);
        background: linear-gradient(0deg, rgba(200, 29, 207, 0.05) 0%, rgba(200, 29, 207, 0.4) 100%); }
      .welcome-area .shape-fullsection.shape-cube-large .box-animation-01 {
        width: 250px;
        height: 350px;
        right: 15%;
        top: 30%;
        -webkit-animation: rotateAnimation 15s infinite;
        animation: rotateAnimation 15s infinite; }
      .welcome-area .shape-fullsection.shape-cube-large .box-animation-02 {
        width: 230px;
        height: 280px;
        left: 20%;
        top: 20%;
        -webkit-animation: rotateAnimation 5s infinite;
        animation: rotateAnimation 5s infinite; }
  .welcome-area .shape-bottom {
    position: absolute;
    top: unset;
    left: 0;
    right: 0;
    bottom: -1px; }
    .welcome-area .shape-bottom svg {
      width: 100%;
      height: auto; }

/* Inner Hero Header Style */
.inner-header-area.bg-overlay {
  position: relative; }
  .inner-header-area.bg-overlay:before {
    background: #292c44;
    /*background: linear-gradient(45deg, #292c44 0%, #8900cc 100%);*/
    opacity: 0.80;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
.inner-header-area .container {
  position: relative; }
.inner-header-area .breadcrumb .breadcrumb-item {
  color: rgba(255, 255, 255, 0.8); }
  .inner-header-area .breadcrumb .breadcrumb-item + .breadcrumb-item:before {
    font-family: "Material Design Icons";
    color: rgba(255, 255, 255, 0.8);
    margin: 0 .45rem;
    content: '\F0142'; }
  .inner-header-area .breadcrumb .breadcrumb-item a {
    color: #ffffff; }

@-webkit-keyframes rotateAnimation {
  0% {
    transform: rotate(-12deg); }
  50% {
    transform: rotate(12deg); }
  100% {
    transform: rotate(-12deg); } }
@keyframes rotateAnimation {
  0% {
    transform: rotate(-12deg); }
  50% {
    transform: rotate(12deg); }
  100% {
    transform: rotate(-12deg); } }
/* --------------------------
  08. Welcome Section style
----------------------------- */
.card.card-different .icon {
  font-size: 3rem; }

/* --------------------------
  09. How it Works style
----------------------------- */
.how-it-works-video {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; }
  .how-it-works-video .how-it-works-video-btn {
    position: absolute; }

.how-it-works-process .how-it-work-process-item .how-it-work-step {
  margin-bottom: 1.5rem;
  position: relative; }
  .how-it-works-process .how-it-work-process-item .how-it-work-step a {
    width: 4.375rem;
    height: 4.375rem;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    color: #2A2D43;
    box-shadow: 0 0 0 10px rgba(42, 45, 67, 0.3);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease; }
    .how-it-works-process .how-it-work-process-item .how-it-work-step a .icon {
      font-size: 2.15rem; }
    .how-it-works-process .how-it-work-process-item .how-it-work-step a:hover {
      animation: imgJump 2s linear infinite;
      background: #2A2D43;
      color: #ffffff; }
.how-it-works-process .how-it-work-process-item.active .how-it-work-step a {
  background: #2A2D43;
  color: #ffffff; }

/* --------------------------
  10. Screenshots style
----------------------------- */
.screenshots-slider .swiper-slide {
  width: 300px;
  height: auto;
  padding: 0 15px; }
  .screenshots-slider .swiper-slide img {
    width: 100%;
    display: block; }
  .screenshots-slider .swiper-slide .overlay-bg {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.1);
    -webkit-box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.1);
    margin-top: 2rem;
    margin-bottom: 2rem;
    background: #ffffff; }
    .screenshots-slider .swiper-slide .overlay-bg:before {
      position: absolute;
      content: "";
      opacity: 0;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #292c44;
      /*background: linear-gradient(45deg, #292c44 0%, #8900cc 100%);*/
      transition: all 0.3s ease; }
    .screenshots-slider .swiper-slide .overlay-bg .screenshots-icon {
      position: absolute;
      z-index: 3;
      left: 50%;
      top: 50%;
      color: #ffffff;
      font-size: 2rem;
      background: rgba(255, 255, 255, 0.3);
      opacity: 0;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 4.375rem;
      height: 4.375rem;
      border-radius: 2.1875rem;
      transform: translate(-50%, -10%); }
  .screenshots-slider .swiper-slide.swiper-slide-active .overlay-bg:hover:before {
    opacity: .8; }
  .screenshots-slider .swiper-slide.swiper-slide-active .overlay-bg:hover .screenshots-icon {
    transform: translate(-50%, -50%);
    opacity: 1; }
.screenshots-slider .swiper-pagination {
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center; }
  .screenshots-slider .swiper-pagination .swiper-pagination-bullet {
    border: 2px solid #2A2D43;
    opacity: 1;
    background: #ffffff;
    background: linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
    transition: all 0.3s ease;
    width: 1rem;
    height: 1rem;
    border-radius: 0.5rem; }
    .screenshots-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
      border-width: 0;
      background: #292c44;
      /*background: linear-gradient(45deg, #292c44 0%, #8900cc 100%);*/ }

/* --------------------------
  11. Pricing style
----------------------------- */
.section-pricing .pricing-pills .nav-pills {
  border: 2px solid #0033CC;
  border-radius: 5px;
  box-shadow: 0px 10px 20px rgba(0, 51, 204, 0.1);
  overflow: hidden; }
  .section-pricing .pricing-pills .nav-pills .nav-item .nav-link {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    padding-left: 2.125rem;
    padding-right: 2.125rem;
    min-height: 3.125rem;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    letter-spacing: .5px; }
    .section-pricing .pricing-pills .nav-pills .nav-item .nav-link:not(.active) {
      color: #0033CC; }
      .section-pricing .pricing-pills .nav-pills .nav-item .nav-link:not(.active):hover {
        background-color: #e6ecff; }
.section-pricing .card.card-pricing .card-header {
  background: #ffffff;
  border-color: #F5F5F5;
  padding: 1.5rem 1.875rem; }
  .section-pricing .card.card-pricing .card-header h4 {
    color: #707070;
    font-weight: 600;
    margin-bottom: .2rem; }
  .section-pricing .card.card-pricing .card-header h2 {
    margin-bottom: 0; }
    .section-pricing .card.card-pricing .card-header h2 small {
      font-size: 1.25rem;
      bottom: 4px;
      position: relative; }
  .section-pricing .card.card-pricing .card-header .icon {
    font-size: 2rem;
    color: #0033CC; }
.section-pricing .card.card-pricing .card-body {
  padding: 1.5rem 1.875rem; }
  .section-pricing .card.card-pricing .card-body .pricing-available-option {
    margin-bottom: 0; }
    .section-pricing .card.card-pricing .card-body .pricing-available-option li {
      padding: .8rem 2rem .8rem 0;
      color: #707070;
      position: relative; }
      .section-pricing .card.card-pricing .card-body .pricing-available-option li:after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Material Design Icons";
        font-size: 1.3rem; }
      .section-pricing .card.card-pricing .card-body .pricing-available-option li.available:after {
        content: '\F012C';
        color: #2BD865; }
      .section-pricing .card.card-pricing .card-body .pricing-available-option li.not-available:after {
        content: '\F0156';
        color: #EE5050; }
.section-pricing .card.card-pricing .card-footer {
  padding: 1.875rem;
  background: #ffffff;
  border-color: #F5F5F5; }
  .section-pricing .card.card-pricing .card-footer .btn .icon {
    margin-right: .5rem; }
.section-pricing .card.card-pricing.active {
  background: #0033CC; }
  .section-pricing .card.card-pricing.active.shadow {
    box-shadow: 0px 10px 20px rgba(0, 51, 204, 0.3) !important; }
  .section-pricing .card.card-pricing.active .card-header {
    background: #0033CC;
    border-color: rgba(245, 245, 245, 0.2); }
    .section-pricing .card.card-pricing.active .card-header h4,
    .section-pricing .card.card-pricing.active .card-header h2,
    .section-pricing .card.card-pricing.active .card-header .icon {
      color: #ffffff; }
  .section-pricing .card.card-pricing.active .card-body {
    padding: 1.5rem 1.875rem; }
    .section-pricing .card.card-pricing.active .card-body .pricing-available-option {
      margin-bottom: 0; }
      .section-pricing .card.card-pricing.active .card-body .pricing-available-option li {
        color: #ffffff; }
        .section-pricing .card.card-pricing.active .card-body .pricing-available-option li:after, .section-pricing .card.card-pricing.active .card-body .pricing-available-option li:before {
          color: #ffffff; }
  .section-pricing .card.card-pricing.active .card-footer {
    background: #0033CC;
    border-color: rgba(245, 245, 245, 0.2); }
    .section-pricing .card.card-pricing.active .card-footer .btn {
      background: #ffffff;
      color: #0033CC; }
      .section-pricing .card.card-pricing.active .card-footer .btn:hover {
        background-color: #e6ecff; }

/* --------------------------
  12. Clients style
----------------------------- */
.swiper-clients-container {
  padding-bottom: 2rem; }
  .swiper-clients-container .swiper-slide {
    padding-bottom: 2rem; }
  .swiper-clients-container .swiper-pagination {
    bottom: 0; }
    .swiper-clients-container .swiper-pagination .swiper-pagination-bullet {
      background: #ffffff;
      transition: all 0.3s ease;
      width: 12px;
      height: 12px;
      border-radius: 6px; }
      .swiper-clients-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 36px; }

.card.card-clients {
  position: relative;
  border: none;
  box-shadow: 0px 10px 20px rgba(0, 44, 176, 0.2) !important; }
  .card.card-clients:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -0.8rem;
    content: '';
    width: 80%;
    left: 10%;
    background: #ffffff;
    z-index: -1;
    border-radius: 10px;
    box-shadow: 0px 10px 20px rgba(0, 44, 176, 0.2); }
  .card.card-clients .card-body {
    padding: 1.875rem; }
    .card.card-clients .card-body .user-details {
      display: flex;
      align-items: center; }
      .card.card-clients .card-body .user-details .user-img {
        flex: 0 0 5.625rem;
        margin-right: 1rem; }
        .card.card-clients .card-body .user-details .user-img img {
          width: 5.625rem;
          height: 5.625rem;
          border-radius: 5px; }
      .card.card-clients .card-body .user-details .user-info h4 {
        margin: 0; }
      .card.card-clients .card-body .user-details .user-info p {
        margin: 0 0 .4rem; }
      .card.card-clients .card-body .user-details .user-info .star {
        font-size: 1rem;
        color: #F2B946; }
      .card.card-clients .card-body .user-details .user-info .news-share a {
        font-size: 1rem; }
        .card.card-clients .card-body .user-details .user-info .news-share a + a {
          margin-left: 1rem; }

.statistics {
  margin-top: 2rem; }
  .statistics .statistic .icon {
    font-size: 2.5rem;
    margin-left: auto;
    margin-right: auto;
    color: #ffffff;
    position: relative;
    margin-bottom: 1.5rem;
    background: #00BBF2;
    width: 5.625rem;
    height: 5.625rem;
    border-radius: 2.8125rem;
    display: flex;
    align-items: center;
    justify-content: center; }
    .statistics .statistic .icon:before {
      animation: iconPulse 1.5s linear infinite;
      content: "";
      display: block;
      position: absolute;
      border: 1px solid #ffffff;
      border-radius: 50%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }
  .statistics .statistic h3 {
    color: #ffffff;
    margin-bottom: 0; }
  .statistics .statistic p {
    margin: 0;
    color: #ffffff; }
  .statistics .statistic p.dark {
    margin:0;
    color: #3C404D;
  }

/* --------------------------
  13. Our team style
----------------------------- */
.card.card-team {
  transition: all 0.3s ease;
  top: 0; }
  .card.card-team .team-member-image img {
    width: 100%;
    height: auto; }
  .card.card-team .card-body {
    position: absolute;
    top: 35%;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-direction: column;
    background: rgba(59, 61, 78, 0.9); }
    .card.card-team .card-body .team-member-text {
      text-align: center; }
      .card.card-team .card-body .team-member-text h4 {
        color: #ffffff;
        margin: 0; }
      .card.card-team .card-body .team-member-text p {
        color: #D9E1FC; }
    .card.card-team .card-body .team-member-social {
      margin-top: .7rem;
      display: flex;
      align-items: center;
      justify-content: center; }
      .card.card-team .card-body .team-member-social a {
        display: block;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        width: 44px;
        height: 44px;
        margin: 0 .2rem;
        color: #D9E1FC;
        background: rgba(0, 57, 230, 0.1);
        border-radius: 5px; }
        .card.card-team .card-body .team-member-social a:hover {
          background: rgba(0, 57, 230, 0.9);
          color: #ffffff; }
  .card.card-team:hover {
    box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.3) !important;
    -webkit-box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.3) !important;
    top: -4px; }
    .card.card-team:hover .card-body {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 1; }

/* --------------------------
  14. Newsletter style
----------------------------- */
.card.card-news {
  transition: all 0.3s ease;
  top: 0; }
  .card.card-news .news-image {
    position: relative;
    border-radius: 10px;
    overflow: hidden; }
    .card.card-news .news-image img {
      width: 100%; }
    .card.card-news .news-image .news-overlay {
      position: absolute;
      opacity: 0;
      top: 35%;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 51, 204, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease; }
      .card.card-news .news-image .news-overlay .btn {
        color: #ffffff;
        font-size: 1.5rem;
        width: 50px;
        height: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center; }
  .card.card-news .card-body {
    padding: 1.875rem; }
    .card.card-news .card-body .news-posted-by {
      display: flex;
      align-items: center;
      margin-top: 1.5rem; }
      .card.card-news .card-body .news-posted-by .user-img {
        flex: 0 0 5.625rem;
        margin-right: 1rem; }
        .card.card-news .card-body .news-posted-by .user-img img {
          width: 5.625rem;
          height: 5.625rem;
          border-radius: 5px; }
      .card.card-news .card-body .news-posted-by .user-info h4 {
        margin: 0; }
      .card.card-news .card-body .news-posted-by .user-info p {
        margin: 0 0 .4rem; }
      .card.card-news .card-body .news-posted-by .user-info .star {
        font-size: 1rem;
        color: #F2B946; }
      .card.card-news .card-body .news-posted-by .user-info .news-share a {
        font-size: 1rem; }
        .card.card-news .card-body .news-posted-by .user-info .news-share a + a {
          margin-left: 1rem; }
  .card.card-news:hover {
    box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.3) !important;
    -webkit-box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.3) !important;
    top: -4px; }
    .card.card-news:hover .news-overlay {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 1; }

.app-rating h2 {
  margin: 0;
  color: #ffffff !important; }
.app-rating .icon {
  font-size: 1.8rem; }
.app-rating .total-download {
  background: #0040ff;
  font-size: 1rem;
  padding: .3rem 1rem;
  color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); }

/* --------------------------
  15. Subscribe style
----------------------------- */
.subscribe-input-group {
  box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.1);
  -webkit-box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.1);
  transition: all 0.3s ease;
  border-radius: 5px;
  border: 2px solid #0033CC;
  overflow: hidden; }
  .subscribe-input-group .form-control {
    border: none;
    height: calc(4rem - 4px);
    padding: 0 1.875rem;
    box-shadow: none; }
  .subscribe-input-group .btn {
    padding: 0 3rem; }
    .subscribe-input-group .btn:hover {
      top: 0; }
  .subscribe-input-group:hover, .subscribe-input-group:active, .subscribe-input-group.focused {
    box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.3) !important;
    -webkit-box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.3) !important; }

/* --------------------------
  16. FAQ's style
----------------------------- */
.faq-questions {
  counter-reset: myitemcounter; }
  .faq-questions .card {
    background: none;
    border: none; }
    .faq-questions .card .card-header {
      border: none;
      background: #ffffff;
      border-radius: 5px;
      box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.1);
      -webkit-box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.1);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      padding: .625rem;
      cursor: pointer;
      font-weight: 600; }
      .faq-questions .card .card-header:before {
        counter-increment: myitemcounter;
        content: counters(myitemcounter,".") ".";
        margin: 0 1rem; }
      .faq-questions .card .card-header .number {
        flex: 0 0 2.75rem;
        text-align: center; }
      .faq-questions .card .card-header .title {
        font-family: "Poppins", sans-serif;
        flex: 1 1 auto; }
      .faq-questions .card .card-header .icon {
        border-radius: 5px;
        display: block;
        flex: 0 0 2.75rem;
        width: 2.75rem;
        height: 2.75rem;
        position: relative;
        background: rgba(217, 225, 252, 0.1); }
        .faq-questions .card .card-header .icon:before, .faq-questions .card .card-header .icon:after {
          border-radius: 2px;
          position: absolute;
          content: "";
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%) rotate(0deg);
          background: #0033CC;
          transition: all 0.3s ease;
          width: 1rem;
          height: 0.25rem; }
        .faq-questions .card .card-header .icon:after {
          transform: translate(-50%, -50%) rotate(-90deg); }
      .faq-questions .card .card-header[aria-expanded="false"]:hover {
        box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.3) !important;
        -webkit-box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.3) !important; }
      .faq-questions .card .card-header[aria-expanded="true"] {
        background: #0033CC;
        color: #ffffff; }
        .faq-questions .card .card-header[aria-expanded="true"] .icon {
          background: #ffffff; }
          .faq-questions .card .card-header[aria-expanded="true"] .icon:before {
            transform: translate(-50%, -50%) rotate(180deg); }
          .faq-questions .card .card-header[aria-expanded="true"] .icon:after {
            transform: translate(-50%, -50%) rotate(0deg); }
    .faq-questions .card .card-body {
      color: #707070;
      font-size: 1rem;
      line-height: 2rem; }
      .faq-questions .card .card-body strong {
        font-weight: 600; }
      .faq-questions .card .card-body p {
        font-size: 1rem; }
    .faq-questions .card + .card {
      margin-top: 1rem; }

/* --------------------------
  17. FAQ's Form style
----------------------------- */
.ask-questions .form-group .input-group {
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.1);
  -webkit-box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.1);
  transition: all 0.3s ease; }
  .ask-questions .form-group .input-group .input-group-prepend .input-group-text {
    border: none;
    background: none;
    font-size: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1rem;
    color: #D9E1FC; }
  .ask-questions .form-group .input-group.focused {
    box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.3) !important;
    -webkit-box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.3) !important; }
.ask-questions .form-group .form-control {
  min-height: 4rem;
  border: none;
  border-radius: 5px;
  resize: none;
  box-shadow: none; }
.ask-questions .form-group textarea.form-control {
  height: 16.5rem;
  padding: 1.5rem 1.875rem; }

/* --------------------------
  18. Coming Soon style
----------------------------- */
.section.coming-soon {
  min-height: 100vh; }
  .section.coming-soon.bg-overlay {
    position: relative; }
    .section.coming-soon.bg-overlay:before {
      background: #292c44;
      /*background: linear-gradient(45deg, #292c44 0%, #8900cc 100%);*/
      opacity: 0.80;
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }
    .section.coming-soon.bg-overlay:after {
      background: url(../img/bg/overlay.png) repeat;
      position: absolute;
      content: "";
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }
  .section.coming-soon .container {
    z-index: 2; }
  .section.coming-soon .logo {
    font-size: 3rem;
    color: #ffffff;
    font-weight: 300; }
    .section.coming-soon .logo img {
      margin: 0 1rem;
      height: 3.4rem; }
.section .is-countdown .countdown-row {
  display: flex;
  align-items: center;
  justify-content: center; }
  .section .is-countdown .countdown-row .countdown-section {
    flex: 1 1 auto; }
    .section .is-countdown .countdown-row .countdown-section:not(:first-child) {
      border-left: 1px solid rgba(255, 255, 255, 0.3); }
    .section .is-countdown .countdown-row .countdown-section > span {
      display: block;
      color: #ffffff;
      line-height: 1.5; }
      .section .is-countdown .countdown-row .countdown-section > span.countdown-amount {
        font-size: 4rem;
        font-weight: 300; }
      .section .is-countdown .countdown-row .countdown-section > span.countdown-period {
        font-weight: 300;
        letter-spacing: 1px;
        text-transform: uppercase; }

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

  19. Page Not Found style
----------------------------- */
.section.page-not-found {
  min-height: 100vh; }
  .section.page-not-found.bg-overlay {
    position: relative; }
    .section.page-not-found.bg-overlay:before {
      background: #292c44;
      /*background: linear-gradient(45deg, #292c44 0%, #8900cc 100%);*/
      opacity: 0.80;
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }

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

  20. Pagination style
----------------------------- */
.pagination {
  margin-left: -5px;
  margin-right: -5px; }
  .pagination > .page-item {
    margin: 0 5px; }
    .pagination > .page-item > .page-link {
      font-size: 14px;
      height: 40px;
      width: 40px;
      line-height: 40px;
      padding: 0;
      display: inline-block;
      border: 1px solid #3C404D;
      text-align: center;
      transition: all 0.3s ease; }
      .pagination > .page-item > .page-link .icon {
        transition: all 0.3s ease;
        position: relative;
        transform: translate(0, 0);
        display: block; }
    .pagination > .page-item:not(.active) .page-link {
      color: #3C404D; }
      .pagination > .page-item:not(.active) .page-link:hover {
        color: #0033CC; }
    .pagination > .page-item:first-child .page-link, .pagination > .page-item:last-child .page-link {
      border-radius: 0;
      border-color: transparent;
      font-size: 20px; }
    .pagination > .page-item:first-child .page-link:hover {
      background: transparent; }
      .pagination > .page-item:first-child .page-link:hover .icon {
        transform: translate(-5px, 0); }
    .pagination > .page-item:last-child .page-link:hover {
      background: transparent; }
      .pagination > .page-item:last-child .page-link:hover .icon {
        transform: translate(5px, 0); }

/* --------------------------
  21. Blog style
----------------------------- */
.blog-card {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  top: 0;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
  .blog-card:hover {
    box-shadow: 0px 10px 20px rgba(0, 51, 204, 0.1);
    top: -4px; }
  .blog-card .blog-thumb {
    position: relative; }
    .blog-card .blog-thumb img {
      display: block;
      border-radius: 10px; }
    .blog-card .blog-thumb .blog-thumb-hover {
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      top: 100px;
      opacity: 0;
      visibility: hidden; }
      .blog-card .blog-thumb .blog-thumb-hover:before {
        background: #292c44;
        /*background: linear-gradient(45deg, #292c44 0%, #8900cc 100%);*/
        opacity: 0.80;
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; }
      .blog-card .blog-thumb .blog-thumb-hover .icon {
        background-color: rgba(255, 255, 255, 0.1);
        padding: 1.125rem 1.125rem;
        position: relative;
        z-index: 2;
        color: #ffffff;
        border-radius: 3.3333333333px;
        font-size: 20px;
        top: 20px;
        transition: all 1s ease; }
    .blog-card .blog-thumb:hover .blog-thumb-hover {
      top: 0;
      visibility: visible;
      opacity: 1; }
      .blog-card .blog-thumb:hover .blog-thumb-hover .icon {
        top: 0; }
  .blog-card .card-body a {
    transition: all 0.3s ease; }
    .blog-card .card-body a:not(:hover) {
      color: #343a40; }
  .blog-card .card-body p {
    font-size: 1rem;
    color: #6c757d; }
  .blog-card .card-body .blog-meta-info {
    margin-bottom: 1rem; }
    .blog-card .card-body .blog-meta-info .posted-time {
      font-weight: 600; }
    .blog-card .card-body .blog-meta-info a:not(:hover) {
      color: #6c757d; }
  .blog-card .card-body .blog-title {
    margin-bottom: 1rem; }
  .blog-card .card-body .blog-read-more-btn {
    position: relative;
    font-weight: 400; }
    .blog-card .card-body .blog-read-more-btn:after {
      transition: all 0.3s ease;
      padding-left: 1rem;
      position: absolute;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      font-family: "Material Design Icons";
      content: "\F0054";
      top: 50%;
      right: 10px;
      transform: translate(0, -47%);
      opacity: 0; }
    .blog-card .card-body .blog-read-more-btn:hover:after {
      right: -20px;
      opacity: 1; }

/* --------------------------
20.01. Blog Sidebar style
----------------------------- */
.card-search-widget {
  position: relative;
  border-color: #f0f1f4;
  border-radius: 5px; }
  .card-search-widget .input-group {
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: all 0.3s ease; }
    .card-search-widget .input-group .input-group-prepend .input-group-text {
      border: none;
      background: none;
      font-size: 1.5rem;
      padding-left: 1rem;
      padding-right: 1rem;
      color: #D9E1FC;
      padding-top: 0;
      padding-bottom: 0; }
    .card-search-widget .input-group.focused {
      box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.3) !important;
      -webkit-box-shadow: 0px 0.625rem 1.25rem rgba(0, 51, 204, 0.3) !important; }
    .card-search-widget .input-group .form-control {
      min-height: 3rem;
      padding-left: 0;
      border: none;
      border-radius: 5px;
      resize: none;
      box-shadow: none; }

.card-blog-widget {
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: all 0.3s ease;
  border-color: #f0f1f4;
  overflow: hidden; }
  .card-blog-widget .card-header {
    border-radius: 5px 5px 0 0;
    background: #ffffff;
    border-color: #f0f1f4;
    text-transform: uppercase;
    padding-top: 1rem;
    padding-bottom: 1rem;
    cursor: pointer; }
    .card-blog-widget .card-header.collapsed {
      border-radius: 5px;
      border: none; }
  .card-blog-widget .post-widgets .post-widget {
    display: flex;
    flex-wrap: nowrap;
    padding: 1rem 1.25rem;
    background: #ffffff;
    transition: all 0.3s ease; }
    .card-blog-widget .post-widgets .post-widget:hover {
      background: #f5f7ff; }
    .card-blog-widget .post-widgets .post-widget + .post-widget {
      border-top: 1px solid #f0f1f4; }
    .card-blog-widget .post-widgets .post-widget .widget-post-thumb {
      min-width: 4rem;
      height: 4rem; }
      .card-blog-widget .post-widgets .post-widget .widget-post-thumb img {
        width: 4rem;
        height: 4rem;
        -o-object-fit: cover;
        object-fit: cover; }
    .card-blog-widget .post-widgets .post-widget .post-widget-content {
      margin-left: 1rem; }
      .card-blog-widget .post-widgets .post-widget .post-widget-content p {
        margin: 0 0 .3rem;
        font-size: .8rem; }
      .card-blog-widget .post-widgets .post-widget .post-widget-content h6 {
        margin: 0; }
  .card-blog-widget .tags {
    display: inline-flex;
    gap: 5px;
    flex-wrap: wrap;
    padding-top: 1rem; }
    .card-blog-widget .tags a {
      border: 1px solid #f0f1f4;
      padding: .2rem 1rem;
      color: #3C404D;
      font-size: .8rem;
      border-radius: 3px;
      transition: all 0.3s ease;
      background-color: #ffffff; }
      .card-blog-widget .tags a:hover {
        background: #f5f7ff;
        color: #0033CC; }
  .card-blog-widget .post-category-list li + li {
    border-top: 1px solid #f0f1f4; }
  .card-blog-widget .post-category-list li a {
    background: #ffffff;
    transition: all 0.3s ease;
    padding: .7rem 1.25rem;
    color: #3C404D; }
    .card-blog-widget .post-category-list li a:hover {
      background: #f5f7ff;
      color: #0033CC; }
  .card-blog-widget .post-category-list li.active a {
    background: #f5f7ff;
    color: #0033CC; }

/* --------------------------
20.02. Single Blog style
----------------------------- */
.single-blog-card .blog-img img {
  display: block;
  border-radius: 10px; }
.single-blog-card a,
.single-blog-card .icon {
  transition: all 0.3s ease; }
  .single-blog-card a:not(:hover),
  .single-blog-card .icon:not(:hover) {
    color: #3C404D; }
    .single-blog-card a:not(:hover) .icon,
    .single-blog-card .icon:not(:hover) .icon {
      color: #838a9f; }
.single-blog-card .blog-meta-info .meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap; }
  .single-blog-card .blog-meta-info .meta .devider {
    width: 6px;
    height: 6px;
    margin-left: 1rem;
    margin-right: 1rem;
    background-color: #bdc0cb;
    border-radius: 50%; }
.single-blog-card .card-body p {
  font-size: 1rem;
  line-height: 1.8rem; }
.single-blog-card .card-body ul.blog-list {
  list-style: none;
  margin-left: 0;
  padding-left: 1.5rem; }
  .single-blog-card .card-body ul.blog-list li {
    position: relative;
    padding-left: 1.5rem;
    color: #697086; }
    .single-blog-card .card-body ul.blog-list li:before {
      background: #0033CC;
      content: "";
      height: 8px;
      left: 0;
      position: absolute;
      top: 8px;
      width: 8px;
      border-radius: 100%; }
    @media (min-width: 992px) {
      .single-blog-card .card-body ul.blog-list li {
        line-height: 2.2rem; }
        .single-blog-card .card-body ul.blog-list li:before {
          top: 13px; } }
.single-blog-card .card-body blockquote, .single-blog-card .card-body .share-single-post-wrapper {
  background-color: #f6f6f8;
  border-radius: 5px;
  display: block;
  padding: 1rem 1.5rem;
  margin-left: 2rem; }
  .single-blog-card .card-body blockquote p, .single-blog-card .card-body .share-single-post-wrapper p {
    color: #3C404D; }
    .single-blog-card .card-body blockquote p:last-child, .single-blog-card .card-body .share-single-post-wrapper p:last-child {
      margin: 0; }
.single-blog-card .card-body .share-single-post-wrapper {
  margin-left: 0;
  margin-bottom: 0; }
  .single-blog-card .card-body .share-single-post-wrapper .post-tags span {
    font-weight: 600; }
  .single-blog-card .card-body .share-single-post-wrapper .post-tags a {
    margin-left: .5rem; }
    .single-blog-card .card-body .share-single-post-wrapper .post-tags a:not(:hover) {
      color: #697086; }
  .single-blog-card .card-body .share-single-post-wrapper .social-share span {
    font-weight: 600; }
  .single-blog-card .card-body .share-single-post-wrapper .social-share .btn {
    padding: .2rem .7rem;
    border: none;
    margin-left: .2rem; }
    .single-blog-card .card-body .share-single-post-wrapper .social-share .btn i {
      transition: all 0.3s ease; }
    .single-blog-card .card-body .share-single-post-wrapper .social-share .btn:hover i {
      color: #ffffff !important; }

.media-list-wrapper {
  margin-bottom: 3rem; }
  .media-list-wrapper .comment-title {
    margin-top: 2rem;
    margin-bottom: 2rem; }
  .media-list-wrapper .media img {
    width: 4rem;
    height: 4rem;
    border-radius: 2rem; }
    @media (min-width: 992px) {
      .media-list-wrapper .media img {
        width: 7rem;
        height: 7rem;
        border-radius: 3.5rem; } }
  .media-list-wrapper .media .media-body {
    border-bottom: 1px solid rgba(60, 64, 77, 0.1); }
    .media-list-wrapper .media .media-body .comment-author-info h5 {
      margin: 0 0 .3rem; }
    .media-list-wrapper .media .media-body .comment-author-info p {
      font-size: 1rem; }
    .media-list-wrapper .media .media-body p {
      font-size: 1rem; }
    .media-list-wrapper .media .media-body .comment-action {
      margin: 0 0 1.5rem;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center; }
      .media-list-wrapper .media .media-body .comment-action li a {
        font-size: .9rem;
        transition: all 0.3s ease;
        display: flex;
        align-items: center; }
        .media-list-wrapper .media .media-body .comment-action li a:not(:hover) {
          color: #697086; }
        .media-list-wrapper .media .media-body .comment-action li a i {
          margin-left: .5rem; }
      .media-list-wrapper .media .media-body .comment-action li + li {
        margin-left: 1.5rem; }
  .media-list-wrapper .media.media-replay {
    margin-left: 2.5rem; }
    @media (min-width: 992px) {
      .media-list-wrapper .media.media-replay {
        margin-left: 5rem; } }

/* --------------------------
  22. Login Register style
----------------------------- */
/* Card login Styling */
.card-login-signup {
  position: relative;
  z-index: 99; }
  .card-login-signup p {
    font-size: 1rem; }
  .card-login-signup .login-or-signup-with .btn-sm {
    min-width: 34px; }

/* --------------------------
  23. Parallax background image style
----------------------------- */
@media (max-width: 991px) {
  /* -- Testimonial --*/
  .parallax-testimonial {
    background-image: url(../img/bg/team.svg) no-repeat; }

  /* -- Download App --*/
  .parallax-download-app {
    background-image: url(../img/bg/download.svg); }

  /* -- Download App --*/
  .parallax-map {
    background-image: url(../img/football-fans-hero.jpg); } }

@media (max-width: 1024px) {
  .parallax-testimonial {
    background-color: #3b3d4e }
}
/* --------------------------
  24. Swiper Custom style
----------------------------- */
#bannerCarousel .swiper-pagination .swiper-pagination-bullet {
  transition: all 0.3s ease;
  width: 20px;
  border-radius: 10px;
  height: 5px; }
  #bannerCarousel .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 40px;
    background-color: #0033CC; }

/* --------------------------
  25. Footer style
----------------------------- */
.footer {
  background: #2A2D43; }
  .footer .footer-item .logo {
    margin-bottom: 1.5rem; }
  .footer .footer-item p {
    color: #D9E1FC; }
  .footer .footer-item .footer-social-links {
    display: flex;
    align-items: center; }
    .footer .footer-item .footer-social-links a {
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      flex: 0 0 2.75rem;
      background: #4caeea;
      color: #ffffff;
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
      position: relative;
      top: 0; }
      .footer .footer-item .footer-social-links a + a {
        margin-left: .3rem; }
      .footer .footer-item .footer-social-links a:hover {
        background: #2e3857;
        box-shadow: 0px 10px 20px rgba(0, 51, 204, 0.1);
        top: -2px; }
  .footer .footer-item .footer-title {
    color: #ffffff;
    font-weight: 600;
    position: relative;
    padding-bottom: .8rem;
    margin-bottom: 1rem; }
    .footer .footer-item .footer-title:before {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      border-radius: 2px;
      width: 90px;
      content: "";
      background: #4caeea; }
  .footer .footer-item .footer-links {
    margin: 0; }
    .footer .footer-item .footer-links li {
      position: relative;
      padding: .4rem 0; }
      .footer .footer-item .footer-links li:before {
        content: "\F0142";
        font-family: "Material Design Icons";
        color: #D9E1FC;
        margin-right: .5rem; }
      .footer .footer-item .footer-links li a {
        color: #D9E1FC;
        transition: all 0.3s ease; }
        .footer .footer-item .footer-links li a:hover {
          color: #f5cb76; }
  .footer .footer-item .contact-info-footer {
    margin: 0; }
    .footer .footer-item .contact-info-footer li {
      padding: .5rem 0;
      color: #D9E1FC; }
      .footer .footer-item .contact-info-footer li i {
        margin-right: .8rem; }
      .footer .footer-item .contact-info-footer li a {
        color: #F2B946;
        transition: all 0.3s ease; }
        .footer .footer-item .contact-info-footer li a:hover {
          color: #f9dda5; }
  .footer .footer-bottom {
    background: #272A3F;
    padding: 1rem 0; }
    .footer .footer-bottom .copy-right-info p {
      margin: 0;
      font-size: 1rem;
      color: #D9E1FC; }
      .footer .footer-bottom .copy-right-info p a {
        color: #F2B946;
        margin-left: .5rem;
        transition: all 0.3s ease;
        font-weight: 600; }
        .footer .footer-bottom .copy-right-info p a:hover {
          color: #f5cb76; }
    .footer .footer-bottom .footer-menu {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: 0; }
      .footer .footer-bottom .footer-menu a {
        padding: 0 1rem;
        color: #D9E1FC;
        transition: all 0.3s ease; }
        .footer .footer-bottom .footer-menu a:hover {
          color: #f5cb76; }

/* --------------------------
  26. Animation style
----------------------------- */
@-webkit-keyframes buttonEffectRight {
  0% {
    right: -100%; }
  100% {
    right: 100%; } }
@keyframes buttonEffectRight {
  0% {
    right: -100%; }
  100% {
    right: 100%; } }
@-webkit-keyframes shakeItem {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  20% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  41% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); }
  50% {
    -webkit-transform: translateY(-7px);
    transform: translateY(-7px); }
  50% {
    -webkit-transform: translateY(-7px);
    transform: translateY(-7px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes shakeItem {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  20% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  41% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); }
  50% {
    -webkit-transform: translateY(-7px);
    transform: translateY(-7px); }
  50% {
    -webkit-transform: translateY(-7px);
    transform: translateY(-7px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@-webkit-keyframes shadowPulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(242, 185, 70, 0.6);
    box-shadow: 0 0 0 0 rgba(242, 185, 70, 0.6); }
  70% {
    -webkit-box-shadow: 0 0 0 3.125rem rgba(242, 185, 70, 0);
    box-shadow: 0 0 0 3.125rem rgba(242, 185, 70, 0); }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(242, 185, 70, 0);
    box-shadow: 0 0 0 0 rgba(242, 185, 70, 0); } }
@keyframes shadowPulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(242, 185, 70, 0.6);
    box-shadow: 0 0 0 0 rgba(242, 185, 70, 0.6); }
  70% {
    -webkit-box-shadow: 0 0 0 3.125rem rgba(242, 185, 70, 0);
    box-shadow: 0 0 0 3.125rem rgba(242, 185, 70, 0); }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(242, 185, 70, 0);
    box-shadow: 0 0 0 0 rgba(242, 185, 70, 0); } }
@-webkit-keyframes preloader {
  0% {
    top: 8px;
    height: 64px; }
  50%,
  100% {
    top: 24px;
    height: 32px; } }
@keyframes preloader {
  0% {
    top: 8px;
    height: 64px; }
  50%,
  100% {
    top: 24px;
    height: 32px; } }
@-webkit-keyframes dashedRotate {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }
@keyframes dashedRotate {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }
@-webkit-keyframes iconPulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 0; }
  50% {
    opacity: .2; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3); } }
@keyframes iconPulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 0; }
  50% {
    opacity: .2; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3); } }
@-webkit-keyframes slide {
  0%,
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); }
  50% {
    -webkit-transform: translateX(70px);
    transform: translateX(70px); } }
@keyframes slide {
  0%,
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); }
  50% {
    -webkit-transform: translateX(70px);
    transform: translateX(70px); } }
/* --------------------------
  27. Demo Page Custom style
----------------------------- */
@media (min-width: 768px) {
  .btn.btn-purchase:not(.btn-lg):not(.btn-sm) {
    padding-right: 48px;
    position: relative;
    min-height: 44px; }
    .btn.btn-purchase:not(.btn-lg):not(.btn-sm) .icon {
      width: 34px;
      height: 34px;
      position: absolute;
      top: 4px;
      right: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 22px;
      font-size: 24px;
      color: #0033CC; } }
.btn.btn-purchase .icon-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  width: 34px;
  height: 34px; }

.card.card-template-demo {
  position: relative;
  overflow: hidden;
  top: 0;
  transition: all 0.3s ease;
  transform: scale(1); }
  .card.card-template-demo .card-title {
    font-weight: 600; }
  .card.card-template-demo .overlay-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #292c44;
    background: linear-gradient(-45deg, #292c44 0%, #8900cc 100%);
    opacity: 0;
    top: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #ffffff;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    border-radius: 10px; }
    .card.card-template-demo .overlay-link .icon {
      position: relative;
      width: 3rem;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.5s ease;
      top: 100px;
      opacity: 0; }
  .card.card-template-demo:hover {
    top: -5px;
    transform: scale(1.05);
    z-index: 9; }
    .card.card-template-demo:hover .overlay-link {
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
      top: 0;
      opacity: .9; }
      .card.card-template-demo:hover .overlay-link .icon {
        top: 0;
        opacity: 1; }
.card.card-key-feature {
  transition: all 0.2s ease;
  transform: scale(1) translateY(0);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
  .card.card-key-feature .icon {
    position: relative;
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 24px;
    background: rgba(0, 51, 204, 0.05);
    background: linear-gradient(45deg, rgba(0, 51, 204, 0.05) 0%, rgba(0, 51, 204, 0.1) 100%);
    color: #0033CC; }
  .card.card-key-feature .title {
    font-weight: 300; }
  .card.card-key-feature:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0px 10px 20px rgba(0, 51, 204, 0.1); }

/* --------------------------
  28. Responsive style
----------------------------- */
/* ******************************
:: 2.0 WELCOME AREA CSS
****************************** */
@media (min-width: 767px) {
  .welcome-area {
    padding-top: 0; } }
@media (min-width: 992px) {
  .welcome-area.mh-950 {
    min-height: 950px; }
  .welcome-area .shape-fullsection .shape-top-cube {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    background-color: rgba(0, 51, 204, 0.01);
    z-index: -5; }
    .welcome-area .shape-fullsection .shape-top-cube:before, .welcome-area .shape-fullsection .shape-top-cube:after {
      width: 1000px;
      height: 1000px;
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      transform: rotate(-37deg) translate(28%, -38%);
      border-radius: 100px;
      background: #2A2D43;
      /*background: linear-gradient(45deg, #2A2D43 0%, #8900cc 100%);*/
      z-index: -101; }
    .welcome-area .shape-fullsection .shape-top-cube:before {
      transform: rotate(-37deg) translate(28%, -38%) scale(1.07);
      opacity: .1; }

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

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

  section .section-heading {
    margin-bottom: 50px; } }
/* ******************************
:: 2.0 HEADER NAVIGATION AREA CSS
****************************** */
@media (min-width: 992px) {
  .navbar .navbar-nav .nav-link {
    padding-top: 1.875rem;
    padding-bottom: 1.875rem;
    transition: all 0.2s ease; }
  .navbar .navbar-nav .dropdown-menu {
    box-shadow: 0px 0.188rem 0.625rem rgba(0, 51, 204, 0.1);
    -webkit-box-shadow: 0px 0.188rem 0.625rem rgba(0, 51, 204, 0.1); }
    .navbar .navbar-nav .dropdown-menu li:first-child a {
      border-radius: 0.25rem 0.25rem 0 0; }
    .navbar .navbar-nav .dropdown-menu li:last-child a {
      border-radius: 0 0 0.25rem 0.25rem; }
  .navbar .navbar-nav li:hover > ul.dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible; }
    .navbar .navbar-nav li:hover > ul.dropdown-menu .dropdown-item {
      padding-left: 1.5rem; }
  .navbar:not(.navbar-sticky-on-top) .navbar-nav .nav-link {
    color: #fff; }
  .navbar.navbar-sticky-on-top .navbar-nav .nav-link {
    padding-top: 1.625rem;
    padding-bottom: 1.625rem; }
  .navbar .dropdown-menu {
    opacity: 0;
    display: block;
    visibility: hidden;
    min-width: 14.375rem;
    margin-top: 0;
    transform: translateY(20px); }

  .dropdown-menu .dropdown .dropdown-menu {
    left: 100%;
    top: 0%;
    margin: 0 20px;
    border-width: 0; }

  .dropdown-menu .dropdown .dropdown-menu {
    margin: 0;
    border-width: 1px; } }
@media (max-width: 991px) {
  body:before {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all 0.2s ease;
    content: "";
    z-index: 50;
    background: rgba(60, 64, 77, 0);
    visibility: hidden; }
  body.sidemenu-open:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(60, 64, 77, 0.8);
    visibility: visible; }

  .navbar {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem; }
    .navbar.active {
      display: block; }
      .navbar.active .navbar-inner {
        right: 0; }
    .navbar .navbar-inner {
      right: 0;
      -webkit-transition: right 0.3s 0.2s;
      transition: right 0.3s 0.2s;
      position: fixed;
      top: 0;
      bottom: 0;
      height: 100% !important;
      width: 320px;
      padding-top: 54px;
      background-color: #ffffff;
      -webkit-box-shadow: 0 0.5rem 1.875rem rgba(0, 0, 0, 0);
      box-shadow: 0 0.5rem 1.875rem rgba(0, 0, 0, 0);
      border-radius: 0;
      overflow-y: auto;
      z-index: 1050;
      display: block;
      transform: translateX(320px);
      transition: all 0.2s ease; }
      .navbar .navbar-inner.show {
        transform: translateX(0);
        -webkit-box-shadow: 0 0.5rem 1.875rem rgba(0, 0, 0, 0.15);
        box-shadow: 0 0.5rem 1.875rem rgba(0, 0, 0, 0.15); }
      .navbar .navbar-inner .dropdown-menu {
        border: medium none;
        background: none;
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        float: none;
        margin: 0;
        padding-top: 0;
        position: static; }
        .navbar .navbar-inner .dropdown-menu:before {
          content: none; }
    .navbar .nav-link {
      border-bottom: 1px solid #eee;
      padding-top: 0.75rem;
      padding-bottom: 0.75rem; }
    .navbar.navbar-dark .nav-link:hover, .navbar.navbar-dark .nav-link:focus, .navbar.navbar-dark .nav-link.active, .navbar.navbar-dark .nav-link.current-menu-item {
      color: #2c2e30; }

  .nav-open .main-wrapper {
    -webkit-transform: translate3d(-150px, 0, 0);
    transform: translate3d(-150px, 0, 0); }

  /*MOBILE NAVBAR TOGGLER*/
  .navbar-toggler {
    position: fixed;
    top: auto;
    right: 0;
    bottom: auto;
    left: auto;
    border: none;
    height: 54px;
    width: 3.75rem;
    background-image: none;
    border-radius: 0;
    z-index: 1051;
    display: inline-block; }

  .navbar-inner .navbar-toggler {
    position: absolute;
    height: 2.5rem;
    top: 0; }

  .navbar-toggler-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-image: none !important;
    height: 3px;
    width: 50%;
    background: #838a9f;
    display: inline-block;
    transition: all 0.3s ease; }
    .navbar-toggler-icon:before, .navbar-toggler-icon:after {
      transition: all 0.3s ease;
      content: "";
      background: #838a9f;
      left: 0;
      height: 100%;
      width: 100%;
      position: absolute; }
    .navbar-toggler-icon:before {
      top: -0.625rem; }
    .navbar-toggler-icon:after {
      top: 0.625rem; }

  .navbar-dark .navbar-toggler-icon:not(.navbar-toggler-dark) {
    background: #ffffff; }
    .navbar-dark .navbar-toggler-icon:not(.navbar-toggler-dark):before, .navbar-dark .navbar-toggler-icon:not(.navbar-toggler-dark):after {
      background: #ffffff; }
  .navbar-dark.active:not(.navbar-toggler-dark) .navbar-toggler-icon {
    background: transparent; }
    .navbar-dark.active:not(.navbar-toggler-dark) .navbar-toggler-icon:before, .navbar-dark.active:not(.navbar-toggler-dark) .navbar-toggler-icon:after {
      background: #838a9f; }

  .navbar-sticky-on-top:not(.navbar-toggler-dark) .navbar-toggler-icon {
    background: #838a9f; }
    .navbar-sticky-on-top:not(.navbar-toggler-dark) .navbar-toggler-icon:before, .navbar-sticky-on-top:not(.navbar-toggler-dark) .navbar-toggler-icon:after {
      background: #838a9f; }

  .navbar-toggler-icon.active {
    background-color: transparent;
    -webkit-transform: scale(0.85) rotate(270deg);
    transform: scale(0.85) rotate(270deg); }
    .navbar-toggler-icon.active:before, .navbar-toggler-icon.active:after {
      background-color: #3C404D; }
    .navbar-toggler-icon.active:before {
      top: 0;
      -webkit-transform: scale(0.65) rotate(45deg);
      transform: scale(0.65) rotate(45deg); }
    .navbar-toggler-icon.active:after {
      top: 0;
      -webkit-transform: scale(0.65) rotate(-45deg);
      transform: scale(0.65) rotate(-45deg); } }
/*SECTION HEADING*/
@media (max-width: 991px) {
  h1 {
    font-size: 3em; }

  h2 {
    font-size: 36px; }

  section .section-heading {
    margin-bottom: 50px; } }
@media (max-width: 767px) {
  h1 {
    font-size: 2.8em; }

  h2 {
    font-size: 30px;
    line-height: 1.4; } }
@media (max-width: 575px) {
  h1 {
    font-size: 2em;
    line-height: 1.4; }

  h2 {
    font-size: 24px;
    line-height: 1.4; }

  h3 {
    font-size: 18px;
    line-height: 1.4; }

  p {
    line-height: 26px; }

  .section-heading > h2 {
    line-height: 1.5; } }
/* --------------------------
04. How it Works style
----------------------------- */
@media (min-width: 990px) {
  .how-it-works-process .how-it-work-process-item:not(:last-child) .how-it-work-step:before {
    background: url(../img/bg/dassed-line.svg) repeat-x left center;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 4px;
    transform: translate(0, -50%); } }
/* --------------------------
04. Pricing style
----------------------------- */
@media (min-width: 990px) {
  .section-pricing .pricing-pills .nav-pills .nav-item .nav-link {
    padding-left: 3.125rem;
    padding-right: 3.125rem; }
  .section-pricing .card.card-pricing.active {
    transform: scale(1.05); } }
@media (min-width: 992px) {
  .footer .footer-bottom {
    padding: 1.5rem 0; }
    .footer .footer-bottom .footer-menu {
      justify-content: flex-end; } }

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

.timeline-container {
  width: 100%;
  height: 420px;
  display: flex;
  overflow-x: auto;
}
.timeline-item {
  width: 358px;
  flex-shrink: 0;
  max-height: 400px;
  border-top: 5px solid #00BBF2;
}
.timeline-item:before {
    background-color: #00BBF2;
    border-radius: 50%;
    top: -15px;
    content: '';
    display: block;
    height: 25px;
    left: 25px;
    position: relative;
    width: 25px;
    z-index: 1;
}
ul.list-privacy li{
  list-style-type: circle;
  color: #707070;
  line-height: 1.5rem;
}