/*! themes/
| Betakit */

/**
 * * TABLE OF CONTENTS
 * =============================================================================
 * 0. User colors change 1. Template Colors
 * =============================================================================
 * *
 */

/**
 * 0. User colors change
 * ==========================================================================
 */

/**
 * 1. Template Colors
 * ==========================================================================
 */

/**
 * Helpers >
 *
 * | Betakit
 */

/**
 * * TABLE OF CONTENTS ====================================================== 0
 * / Color classes 1 / Gradient classes 2 / Padding classes 3 / Margin classes 4
 * / Hidden classes 5 / flex desiplay 6 / border-radius 7 / box-Shadows 8 /
 * Animations 9 / Typography 10 / OTHER
 * =================================================== **
 */

/**
 * =======================================================
 * - - - - - - - - 2 / Padding classes
 * ==========================================================
 */
 :root {
   --font-size            : 15px;
   --font-weight          : 400;
   --line-height          : 1.7;
   --color-text           : #747474;
   --color-primary        : #F84E77;
   --hover-primary        : #F84E77;
   --color-secondary      : #1BAAA0;
   --hover-secondary      : #1BAAA0;
   --color-white          : #FFFFFF;
   --color-black          : #000000;
   --color-green          : #1BAAA0;
   --color-gray           : #A2A6AD;
   --bg-dark              : #111111;
   --bg-light             : #F4F5FB;
   --color-border-dark    : #1BAAA0;
   --color-border-light   : #EEEFF7;
   --color-border-gray   : #DBDBDB;
   --listStyleCounterType : decimal-leading-zero;
 }

.p-0 {
  padding : 0 !important;
}

.p-helf {
  padding : 0.5rem;
}

.p-1 {
  padding : 1rem;
}

.p-2 {
  padding : 2rem;
}

.p-3 {
  padding : 3rem;
}

.p-4 {
  padding : 4rem;
}

.p-5 {
  padding : 5rem;
}

.p-6 {
  padding : 6rem;
}

.p-7 {
  padding : 7rem;
}

.p-8 {
  padding : 8rem;
}

.p-9 {
  padding : 9rem;
}

.p-10 {
  padding : 10rem;
}

/* ------------------------------------ padding top */

.pt-helf {
  padding-top : 0.5rem;
}

.pt-0 {
  padding-top : 0rem !important;
}

.pt-1 {
  padding-top : 1rem;
}

.pt-2 {
  padding-top : 2rem;
}

.pt-3 {
  padding-top : 3rem;
}

.pt-4 {
  padding-top : 4rem;
}

.pt-5 {
  padding-top : 5rem;
}

.pt-6 {
  padding-top : 6rem;
}

.pt-7 {
  padding-top : 7rem;
}

.pt-8 {
  padding-top : 8rem;
}

.pt-9 {
  padding-top : 9rem;
}

.pt-10 {
  padding-top : 10rem;
}

/* ------------------------------------ padding bottom */

.pb-helf {
  padding-bottom : 0.5rem;
}

.pb-1 {
  padding-bottom : 1rem;
}

.pb-2 {
  padding-bottom : 2rem;
}

.pb-3 {
  padding-bottom : 3rem;
}

.pb-4 {
  padding-bottom : 4rem;
}

.pb-5 {
  padding-bottom : 5rem;
}

.pb-6 {
  padding-bottom : 6rem;
}

.pb-7 {
  padding-bottom : 7rem;
}

.pb-8 {
  padding-bottom : 8rem;
}

.pb-9 {
  padding-bottom : 9rem;
}

.pb-10 {
  padding-bottom : 10rem;
}

/* ------------------------------------ padding bottom */

.pl-helf {
  padding-left : 0.5rem;
}

.pl-1 {
  padding-left : 1rem;
}

.pl-2 {
  padding-left : 2rem;
}

.pl-3 {
  padding-left : 3rem;
}

.pl-4 {
  padding-left : 4rem;
}

.pl-5 {
  padding-left : 5rem;
}

.pl-6 {
  padding-left : 6rem;
}

.pl-7 {
  padding-left : 7rem;
}

.pl-8 {
  padding-left : 8rem;
}

.pl-9 {
  padding-left : 9rem;
}

.pl-10 {
  padding-left : 10rem;
}

/* ------------------------------------ padding bottom */

@media
  screen
  and (max-width : 576px) {
  .pr-sm-0 {
    padding-right : 0 !important;
  }
}

@media
  screen
  and (max-width : 576px) {
  .pl-sm-0 {
    padding-left : 0 !important;
  }
}

.pr-helf {
  padding-right : 0.5rem;
}

.pr-1 {
  padding-right : 1rem;
}

.pr-2 {
  padding-right : 2rem;
}

.pr-3 {
  padding-right : 3rem;
}

.pr-4 {
  padding-right : 4rem;
}

.pr-5 {
  padding-right : 5rem;
}

.pr-6 {
  padding-right : 6rem;
}

.pr-7 {
  padding-right : 7rem;
}

.pr-8 {
  padding-right : 8rem;
}

.pr-9 {
  padding-right : 9rem;
}

.pr-10 {
  padding-right : 10rem;
}

/**
 * =======================================================
 * - - - - - - - - 2 / Margin classes
 * ==========================================================
 */

@media
  screen
  and (max-width : 576px) {
  .mr-0-sm {
    margin-right : 0rem !important;
  }
}

.m-0 {
  margin : 0;
}

.m-helf {
  margin : 0.5rem;
}

.m-1 {
  margin : 1rem;
}

.m-2 {
  margin : 2rem;
}

.m-3 {
  margin : 3rem;
}

.m-4 {
  margin : 4rem;
}

.m-5 {
  margin : 5rem;
}

.m-6 {
  margin : 6rem;
}

.m-7 {
  margin : 7rem;
}

.m-8 {
  margin : 8rem;
}

.m-9 {
  margin : 9rem;
}

.m-10 {
  margin : 10rem;
}

/* ------------------------------------ margin top */

@media
  screen
  and (max-width : 576px) {
  .mt-sm-30 {
    margin-top : 30px;
  }
}

.mb-30 {
  margin-bottom : 30px;
}

.mt-20 {
  margin-top : 20px;
}

.mt-helf {
  margin-top : 0.5rem;
}

.mt-0 {
  margin-top : 0 !important;
}

.mt-1 {
  margin-top : 1rem;
}

.mt-2 {
  margin-top : 2rem !important;
}

.mt-3 {
  margin-top : 3rem;
}

.mt-4 {
  margin-top : 4rem;
}

.mt-5 {
  margin-top : 5rem;
}

.mt-6 {
  margin-top : 6rem;
}

.mt-7 {
  margin-top : 7rem;
}

.mt-8 {
  margin-top : 8rem;
}

.mt-9 {
  margin-top : 9rem;
}

.mt-10 {
  margin-top : 10rem;
}

/* ------------------------------------ margin bottom */

.mb-helf {
  margin-bottom : 0.5rem;
}

.mb-1 {
  margin-bottom : 1rem;
}

.mb-2 {
  margin-bottom : 2rem;
}

.mb-3 {
  margin-bottom : 3rem;
}

.mb-4 {
  margin-bottom : 4rem;
}

.mb-5 {
  margin-bottom : 5rem;
}

.mb-6 {
  margin-bottom : 6rem;
}

.mb-7 {
  margin-bottom : 7rem;
}

.mb-8 {
  margin-bottom : 8rem;
}

.mb-9 {
  margin-bottom : 9rem;
}

.mb-10 {
  margin-bottom : 10rem;
}

/* ------------------------------------ padding bottom */

.ml-helf {
  margin-left : 0.5rem;
}

.ml-1 {
  margin-left : 1rem;
}

.ml-2 {
  margin-left : 2rem;
}

.ml-3 {
  margin-left : 3rem;
}

.ml-4 {
  margin-left : 4rem;
}

.ml-5 {
  margin-left : 5rem;
}

.ml-6 {
  margin-left : 6rem;
}

.ml-7 {
  margin-left : 7rem;
}

.ml-8 {
  margin-left : 8rem;
}

.ml-9 {
  margin-left : 9rem;
}

.ml-10 {
  margin-left : 10rem;
}

/* ------------------------------------ margin bottom */

.mr-helf {
  margin-right : 0.5rem;
}

.mr-1 {
  margin-right : 1rem;
}

.mr-2 {
  margin-right : 2rem;
}

.mr-3 {
  margin-right : 3rem;
}

.mr-4 {
  margin-right : 4rem;
}

.mr-5 {
  margin-right : 5rem;
}

.mr-6 {
  margin-right : 6rem;
}

.mr-7 {
  margin-right : 7rem;
}

.mr-8 {
  margin-right : 8rem;
}

.mr-9 {
  margin-right : 9rem;
}

.mr-10 {
  margin-right : 10rem;
}

.w-100 {
  width : 100%;
}

.w-33 {
  width : 33.33%;
}

/**
 * =======================================================
 * - - - - - - - - 3 / hidden classes
 * ==========================================================
 */

@media
  screen
  and (max-width : 992px) {
  .lg-hidden {
    display : none;
  }
}

@media
  screen
  and (max-width : 768px) {
  .md-hidden {
    display : none;
  }
}

@media
  screen
  and (max-width : 576px) {
  .sm-hidden {
    display : none;
  }
}

/**
 * =======================================================
 * - - - - - - - - 5 /
 *
 * flex desiplay ==========================================================
 */

.flex {
  display   : flex;
  flex-wrap : wrap;
}

.flex.start {
  justify-content : flex-start;
}

.flex.center {
  justify-content : center;
}

@media
  screen
  and (max-width : 768px) {
  .flex.md-center {
    justify-content : center;
  }
}

@media
  screen
  and (max-width : 576px) {
  .flex.sm-center {
    justify-content : center;
  }
}

.flex.vcenter {
  align-items : center;
}

.flex.end {
  justify-content : flex-end;
}

.flex.vend {
  align-items : flex-end;
}

.flex.between {
  justify-content : space-between;
}

.flex.is-column {
  flex-direction : column;
}

.white-link {
  color      : #fff;
  transition : .3s;
}

.white-link:hover {
  color     : #fff;
  opacity   : .7;
  font-size : 17px;
}

/**
 * =======================================================
 * - - - - - - - - 6 /
 *
 * border-radius ==========================================================
 */

.border-rad5 {
  border-radius : 5px;
}

.border-rad10 {
  border-radius : 10px;
}

.border-rad15 {
  border-radius : 15px;
}

.border-rad20 {
  border-radius : 20px;
}

.border-rad50 {
  border-radius : 50px;
}

/**
 * =======================================================
 * - - - - - - - - 7 /
 *
 * box-Shadows ==========================================================
 */

.light-shadow {
  border        : solid 1px #edf8fa;
  border-radius : 15px;
  box-shadow    : 0px 10px 40px -10px rgba(209, 209, 209, 0.4);
}

.simple-sh {
  border-radius : 8px;
  box-shadow    : 0 3px 10px 0 rgba(0, 0, 0, 0.01),
                  0 2px 5px 0 rgba(0, 0, 0, 0.02);
}

.light-shadow-bottom {
  border        : solid 1px #edf8fa;
  border-radius : 15px;
  box-shadow    : 0 15px 40px -15px #edf8fa;
}

.ultra-shadow {
  border     : solid 1px #edf8fa;
  box-shadow : 0 8px 30px 0 #edf8fa;
}

/**
 * =======================================================
 * - - - - - - - - 8 /
 *
 * Animations ==========================================================
 */

@keyframes anim-up-down {
  from {
    -webkit-transform : translate(0, 0);
    transform         : translate(0, 0);
  }

  50% {
    -webkit-transform : translate(0, 1rem);
    transform         : translate(0, 1rem);
  }

  to {
    -webkit-transform : translate(0, 0);
    transform         : translate(0, 0);
  }
}

.anim-up-down {
  animation-duration        : 3s;
  animation-iteration-count : infinite;
  animation-name            : anim-up-down;
  animation-timing-function : ease-in-out;
}

@keyframes animbg {
  from {
    background-repeat : no-repeat;
    background-size   : 130%;
    background-size   : cover;
  }

  50% {
    background-blend-mode : saturation;
    background-repeat     : no-repeat;
    background-size       : 120%;
  }

  to {
    background-repeat : no-repeat;
    background-size   : 130%;
  }
}

@keyframes anim2 {
  from {
    width  : 120%;
    height : 120%;
  }

  50% {
    width  : 170%;
    height : 170%;
  }

  70% {
    width  : 120%;
    height : 120%;
  }

  to {
    width  : 130%;
    height : 130%;
  }
}

@keyframes anim1 {
  from {
    width  : 180%;
    height : 180%;
  }

  50% {
    width  : 140%;
    height : 140%;
  }

  70% {
    width  : 150%;
    height : 150%;
  }

  to {
    width  : 180%;
    height : 180%;
  }
}

/**
 * =======================================================
 * - - - - - - - - 9 /
 *
 * Text floats ==========================================================
 */

.text-primary {
  color : var(--color-primary) !important;
}

/* ----------------------------- Font Size */

.font-s-1 {
  font-size : 1rem;
}

.font-s-2 {
  font-size : 2rem;
}

.font-s-3 {
  font-size : 3rem;
}

.font-s-4 {
  font-size : 4rem;
}

.font-s-5 {
  font-size : 5rem;
}

.font-s-6 {
  font-size : 6rem;
}

.font-s-7 {
  font-size : 7rem;
}

.font-s-8 {
  font-size : 8rem;
}

.font-s-9 {
  font-size : 9rem;
}

.font-s-10 {
  font-size : 10rem;
}

/* ----------------------------- Font weight */

.font-w-400 {
  font-weight : 400 !important;
}

.font-w-500 {
  font-weight : 500 !important;
}

.font-w-600 {
  font-weight : 600 !important;
}

/* ----------------------------- Text floats */

.text-left {
  text-align : left !important;
}

.text-right {
  text-align : right !important;
}

.text-center {
  text-align : center !important;
}

.text-deco {
  text-decoration : underline;
}

/**
 * =======================================================
 * - - - - - - - - 10 /
 *
 * OTHER ==========================================================
 */

.before-none::before {
  content : none !important;
}

/* ----------------------------- display none classes */

@media
  screen
  and (max-width : 576px) {
  .sm-none {
    display : none !important;
  }
}

@media
  screen
  and (max-width : 768px) {
  .md-none {
    display : none;
  }
}

@media
  screen
  and (max-width : 992px) {
  .lg-none {
    display : none;
  }
}

@media
  screen
  and (max-width : 1400px) {
  .xl-none {
    display : none;
  }
}

/* ------------------------------------ display block classes */

@media
  screen
  and (max-width : 576px) {
  .sm-block {
    display : block;
  }
}

@media
  screen
  and (max-width : 768px) {
  .md-block {
    display : block;
  }
}

@media
  screen
  and (max-width : 992px) {
  .lg-block {
    display : block;
  }
}

@media
  screen
  and (max-width : 1400px) {
  .xl-block {
    display : block;
  }
}

@media
  screen
  and (max-width : 768px) {
  .mb-sm-20 {
    margin-bottom : 20px;
  }
}

.top-border {
  border-top : solid 1px #f3f3f3;
}

.min-30 {
  margin-bottom : -30px;
}

.min-40 {
  margin-bottom : -40px;
}

.min-3 {
  margin-bottom : -1rem;
}

.mt-section {
  margin-top : 70px;
}

@media
  screen
  and (max-width : 768px) {
  .mb-sm-30 {
    margin-bottom : 30px;
  }
}

.text-primary:hover {
  color : var(--hover-primary) !important;
}

.rounded {
  position : absolute;
  top      : -11px;
  width    : 100%;
}

@media
  screen
  and (max-width : 992px) {
  .rounded {
    top : -1px;
  }
}

.text-red {
  color : #ff5f7c;
}

.top-0 {
  top : 0 !important;
}

.mb-70 {
  margin-bottom : 70px;
}

.min-20 {
  margin-bottom : -20px;
}

.text-copyright {
  color : rgba(255, 255, 255, 0.548) !important;
}

.max-30 {
  max-width : 30rem;
}

.max-20 {
  max-width : 20rem;
}

.bg-grad2 {
  background : linear-gradient(
                 to top right,
                 #450b7c,
                 #563cc9,
                 #49e9fb
               );
}

.bg-grad3 {
  background : linear-gradient(
                 to top right,
                 #3629a7,
                 #e445de
               );
}

.text-blue {
  color : #563cc9 !important;
}

.text-green {
  color : #54eb9f !important;
}

.bg-blue {
  background : #563cc9 !important;
}

.hover-blue:hover {
  color : #563cc9 !important;
}

.bg-opacity {
  background : rgba(0, 0, 0, 0.082);
}

.text-secondary {
  color : var(--color-secondary) !important;
}

.bg-pattern {
  z-index  : 1;
  position : relative;
}

.bg-pattern::before {
  z-index         : -1;
  content         : "";
  position        : absolute;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : 100%;
  background-size : cover;
}

.min-60 {
  margin-bottom : -60px;
}

.mb-20 {
  margin-bottom : 20px !important;
}

html,body {
  margin: 0;
  padding: 0;
}

body {
  color          : #000000;
  font-family    : "SpaceGrotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size      : 15px;
  letter-spacing : .3px;
}

body.is-dark {
  color      : #fff;
  background : #000;
}

@media
  screen
  and (min-width : 1408px) {
  .container {
    max-width : 1200px;
  }
}

a,
a:active,
div,
div:active,
div:focus,
i,
i:active,
span:active,
span:focus {
  outline : none !important;
}

dl,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
p,
ul {
  margin-top    : 0;
  margin-bottom : 0;
}

ul {
  margin  : 0;
  padding : 0;
}

section:focus {
  outline : none !important;
}

a:hover {
  text-decoration : none;
}

li {
  list-style : none;
}

.swiper-container {
  max-width : 100%;
  height    : 100%;
}

.wrapper {
  min-height : 250px;
  padding    : 50px;
  background : #0e90ff;
  box-shadow : 0 5px 20px #999;
  text-align : center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear          : both;
  color          : #101010;
  text-transform : unset;
  font-family    : inherit;
  font-family    : "SpaceGrotesk-Bold";
  font-style     : normal;
  font-weight    : normal;
  letter-spacing : 0px;
}

h1 {
  font-size   : 2em;
  line-height : 1.2;
}

h2 {
  font-size : 1.7em;
}

h3 {
  font-size : 1.5em;
}

h4 {
  font-size : 1.3em;
}

h5 {
  font-size : 1.2em;
}

h6 {
  font-size : 1.1em;
}

.typed-cursor {
  color             : #fff;
  opacity           : 1;
  font-size         : 3rem;
  -moz-animation    : blink 0.7s infinite;
  -webkit-animation : blink 0.7s infinite;
  animation         : blink 0.7s infinite;
}

p {
  color : #747474;
  line-height : 1.7;
}

a.text-primary:focus,
a.text-primary:hover {
  color   : var(--hover-primary) !important;
  opacity : .8;
}

#overlayer {
  z-index    : 1;
  position   : absolute;
  width      : 100%;
  height     : 100%;
  background : #4a4a4a;
}

.font2 {
  font-family : "TradeGothic";
}

.font2 h1,
.font2 h2,
.font2 h3,
.font2 h4,
.font2 h5,
.font2 h6 {
  font-family : "Overpass";
}

.font2 .navbar a {
  font-family : "Overpass";
}

.font2 a {
  font-family : "Overpass";
}

[data-aos="anim1"] {
  display    : inline-block;
  position   : relative;
  transform  : translateY(110%);
  transition : transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
}

[data-aos="anim1"].aos-animate {
  transform  : translateY(0px);
  transition : transform 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

[data-aos="anim2"] {
  display    : inline-block;
  position   : relative;
  transform  : translateY(-110%);
  transition : transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
}

[data-aos="anim2"].aos-animate {
  transform  : translateY(0px);
  transition : transform 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

[data-aos="anim1"]:before {
  z-index          : 1;
  content          : '';
  position         : absolute;
  top              : 0;
  right            : 0;
  bottom           : 0;
  left             : 0;
  background       : #10131a;
  animation        : reveal 1s 0s ease-in-out forwards;
  transform        : scaleX(0);
  transform-origin : 0% 0% 0px;
}

[data-aos="anim1"].aos-animate {
  transform  : translateY(0px);
  transition : transform 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.slick-dots {
  margin-top : 20px;
}

.slick-dots li {
  border        : solid 1px #b8b8b8;
  border-radius : 50%;
  transition    : .25s ease-in-out;
}

.slick-dots li:hover {
  border     : solid 1px var(--hover-primary);
  background : var(--hover-primary);
  transform  : scale(1.1);
}

.slick-dots .slick-active {
  border     : solid 1px var(--hover-primary);
  background : var(--hover-primary);
}

.slick-dots li button:before {
  width  : 15px;
  height : 15px;
}

.slick-dots li button {
  width  : 15px;
  height : 15px;
}

.slick-dots li {
  width  : 15px;
  height : 15px;
}

.slick-dots {
  bottom : -20px;
}

.ip-header {
  z-index    : 9999999999999999999;
  display    : flex;
  position   : fixed;
  top        : 0;
  width      : 100%;
  height     : 100%;
  background : #000;
}

.ip-loader,
.ip-logo {
  position       : absolute;
  top            : 50%;
  left           : 50%;
  width          : 100%;
  opacity        : 0;
  transform      : translate(-50%);
  pointer-events : none;
  cursor         : default;
}

.ip-logo {
  top               : 0;
  height            : 100%;
  -webkit-transform : translate3d(0, 25%, 0);
  transform         : translate3d(0, 25%, 0);
}

.ip-loader {
  bottom : 20%;
}

.ip-header .ip-inner {
  display         : block;
  display         : flex;
  margin          : 0 auto;
  align-items     : center;
  justify-content : center;
}

.ip-header .ip-logo svg {
  width     : 25%;
  min-width : 320px;
  max-width : 480px;
}

.ip-header .ip-logo svg path {
  fill : var(--color-primary);
}

.ip-header .ip-loader svg path {
  fill         : none;
  stroke-width : 6;
}

.ip-header .ip-loader svg path.ip-loader-circlebg {
  stroke : #fff;
}

.ip-header .ip-loader svg path.ip-loader-circle {
  stroke             : var(--color-primary);
  -webkit-transition : stroke-dashoffset 0.5s;
  transition         : stroke-dashoffset 0.5s;
}

/* Content */

.ip-main {
  overflow : hidden;
}

/* Animations */

/* Initial animation of header elements */

.loading .ip-loader,
.loading .ip-logo {
  opacity           : 1;
  -webkit-animation : animInitialHeader 1s cubic-bezier(0.7, 0, 0.3, 1) both;
  animation         : animInitialHeader 1s cubic-bezier(0.7, 0, 0.3, 1) both;
}

.loading .ip-loader {
  -webkit-animation-delay : 0.2s;
  animation-delay         : 0.2s;
}

@-webkit-keyframes animInitialHeader {
  from {
    opacity           : 0;
    -webkit-transform : translate3d(0, 800px, 0);
  }
}

@keyframes animInitialHeader {
  from {
    opacity           : 0;
    -webkit-transform : translate3d(0, 800px, 0);
    transform         : translate3d(0, 800px, 0);
  }
}

/* Header elements when loading finishes */

.loaded .ip-loader,
.loaded .ip-logo {
  opacity : 1;
}

.loaded .ip-loader {
  -webkit-animation : animLoadedLoader 0.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;
  animation         : animLoadedLoader 0.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@-webkit-keyframes animLoadedLoader {
  to {
    opacity           : 0;
    -webkit-transform : translate3d(0, -100%, 0) scale3d(0.3, 0.3, 1);
  }
}

@keyframes animLoadedLoader {
  to {
    opacity           : 0;
    -webkit-transform : translate3d(0, -100%, 0) scale3d(0.3, 0.3, 1);
    transform         : translate3d(0, -100%, 0) scale3d(0.3, 0.3, 1);
  }
}

/* Change the color of the logo */

.loaded .ip-logo svg path {
  fill               : #fff;
  -webkit-transition : all 0.5s ease 0.3s;
  transition         : all 0.5s ease 0.3s;
}

/* Header animation when loading finishes */

.loaded .ip-header {
  -webkit-animation : animLoadedHeader 1s cubic-bezier(0.7, 0, 0.3, 1) forwards;
  animation         : animLoadedHeader 1s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@-webkit-keyframes animLoadedHeader {
  to {
    -webkit-transform : translate3d(0, -100%, 0);
  }
}

@keyframes animLoadedHeader {
  to {
    -webkit-transform : translate3d(0, -100%, 0);
    transform         : translate3d(0, -100%, 0);
  }
}

/* No JS */

.no-js .ip-header {
  position   : relative;
  min-height : 0px;
}

.no-js .ip-header .ip-logo {
  height            : 180px;
  margin-top        : 20px;
  opacity           : 1;
  -webkit-transform : none;
  transform         : none;
}

.no-js .ip-header .ip-logo svg path {
  fill : #fff;
}

.slick-list {
  margin-bottom : 20px;
}

.dark-bg {
  background : #2d3088;
}

.no-js #loader {
  display : none;
}

.js #loader {
  display  : block;
  position : absolute;
  top      : 0;
  left     : 100px;
}

.se-pre-con {
  z-index         : 9999;
  position        : fixed;
  top             : 0px;
  left            : 0px;
  width           : 100%;
  height          : 100%;
  background      : url("../images/icons/loader.gif ") center no-repeat #fff;
  background-size : 5rem;
}

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

.equal > [class*='col-'] {
  display        : flex;
  flex-direction : column;
}

.tertiary-bg {
  color      : #fff;
  background : #75E8F0;
}

.text-grad {
  background : linear-gradient(
                 45deg,
                 #231F73,
                 #D72F86
               );
}

#particles-js {
  z-index  : -1;
  position : absolute;
  top      : 0;
  width    : 100%;
  height   : 100%;
}

.top-bg-secondary {
  background : linear-gradient(
                 rgba(27, 170, 160, 0.2) 0%,
                 white 50%
               );
}

.toggle,
.toggler {
  display        : inline-block;
  margin         : 10px;
  vertical-align : middle;
}

.toggler {
  color       : black;
  font-weight : bold;
  line-height : 34px;
  transition  : .2s;
}

.toggler--is-active {
  color : var(--color-secondary);
}

.b {
  display : block;
}

.toggle {
  position         : relative;
  width            : 80px;
  height           : 35px;
  overflow         : hidden;
  border-radius    : 100px;
  background-color : var(--color-secondary);
  box-shadow       : inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
}

.check {
  z-index  : 6;
  display  : block;
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
  opacity  : 0;
  cursor   : pointer;
}

.check:checked ~ .switch {
  right               : 2px;
  left                : 57.5%;
  transition          : 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-property : left,
                        right;
  transition-delay    : .08s,
                        0s;
}

.switch {
  z-index             : 1;
  position            : absolute;
  top                 : 2px;
  right               : 57.5%;
  bottom              : 2px;
  left                : 2px;
  border-radius       : 36px;
  background-color    : #fff;
  box-shadow          : 0 1px 2px rgba(0, 0, 0, 0.2);
  transition          : 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-property : left,
                        right;
  transition-delay    : 0s,
                        .08s;
}

.hidden {
  display : none;
}

/**
 * components >
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 * | coinkit
 */

/**
 * * TABLE OF CONTENTS ====================================================== 0/
 * Generale 1/ Button sizes `
 *
 * 2/ Button variations 3/ other buttons
 * ===================================================**
 */

/**
 * ====================================================
 * - - - - - - - - - 0/ Generale
 * =====================================================
 */

button {
  display        : inline-block;
  border         : none;
  text-align     : center;
  vertical-align : middle;
  line-height    : 100%;
  white-space    : nowrap;
}

button:focus {
  opacity            : .8;
  outline            : none;
  -webkit-box-shadow : none;
  box-shadow         : none;
}

button:hover {
  opacity    : .9;
  background : unset;
}

.btn {
  display          : inline-block;
  position         : relative;
  position         : relative;
  min-height       : 20px;
  padding          : 14px 18px;
  color            : #fff;
  border           : none;
  border-radius    : 4px;
  border-radius    : 5px;
  background-color : #17161A;
  outline          : 0;
  text-align       : center;
  text-decoration  : none;
  vertical-align   : middle;
  font-family      : "SpaceGrotesk-Bold";
  font-size        : 1rem;
  font-weight      : 600;
  font-weight      : normal;
  line-height      : 20px;
  letter-spacing   : 1px;
  transition       : .4s ease-in-out;
  cursor           : pointer;
}

.btn ion-icon {
  padding        : 0 0 0 .5rem;
  vertical-align : inherit;
}

.btn:hover {
  transform : scale(1.02);
}

.btn-round {
  border-radius : 50rem;
}

.btn-outline {
  border     : solid 2px;
  background : transparent !important;
}

.light-skin .btn {
  color : #000000;
}

.footer-btn {
  position   : absolute;
  top        : 7px;
  right      : 7px;
  bottom     : 7px;
  color      : #fff;
  background : var(--color-primary);
}

@media
  screen
  and (max-width : 576px) {
  .footer-btn {
    position      : relative;
    width         : 100%;
    margin        : auto 6px;
    border-radius : 5px;
  }
}

.btn-opacity {
  color      : var(--color-primary);
  background : rgba(248, 78, 119, 0.1);
}

.btn-opacity.btn-blue {
  color      : #563cc9;
  background : rgba(86, 60, 201, 0.1);
}

.btn2 {
  position   : absolute;
  top        : 5px;
  right      : 5px;
  bottom     : 5px;
  color      : #fff;
  background : var(--color-primary);
}

@media
  screen
  and (max-width : 576px) {
  .btn2 {
    position : relative;
    width    : 95%;
    margin   : auto 1rem;
  }
}

/**
 * =====================================================
 * - - - - - - - - - 1/ Button sizes
 * ======================================================
 */

.btn-sm {
  padding     : .3rem 1rem;
  font-size   : .9rem;
  line-height : 1.5;
}

.btn-lg {
  padding     : .7rem 2rem;
  font-size   : 17px;
  line-height : 1.7;
}


/**
 * ==================================================+===
 * - - - - - - - - - 2/ Button variations
 * =======================================================
 */

.btn-primary {
  color      : #fff;
  border     : solid 2px var(--color-primary);
  background : var(--color-primary);
  transition : .4s ease-in-out;
}

.btn-primary.btn-sh {
  box-shadow : 0 14px 35px -11px var(--color-primary);
}

.btn-primary.btn-outline {
  color      : var(--color-primary);
  border     : solid 2px var(--color-primary);
  background : transparent;
}

.btn-primary.btn-outline-bottom {
  color         : var(--color-primary);
  border-bottom : solid 3px var(--color-primary);
  background    : transparent;
}

.btn-primary.btn-hover-line:hover {
  color      : var(--hover-primary);
  border     : solid 2px var(--hover-primary);
  background : transparent;
}

.btn-primary:hover {
  border     : solid 2px var(--hover-primary);
  background : var(--hover-primary);
  outline    : none;
}

.btn-secondary {
  color      : #fff;
  border     : solid 2px var(--color-secondary);
  background : var(--color-secondary);
  transition : .4s ease-in-out;
}

.btn-secondary:hover {
  color      : #fff;
  border     : solid 2px var(--hover-secondary);
  background : var(--hover-secondary);
}

.btn-secondary.btn-sh {
  box-shadow : 0 14px 35px -11px var(--color-secondary);
}

.btn-secondary.btn-outline {
  color      : var(--color-secondary);
  border     : solid 2px var(--color-secondary);
  background : transparent;
}

.btn-secondary.btn-outline-bottom {
  color         : var(--color-primary);
  border-bottom : solid 3px var(--color-secondary);
  background    : transparent;
}

.btn-secondary.btn-hover-line:hover {
  color      : var(--hover-secondary);
  border     : solid 2px var(--hover-secondary);
  background : transparent;
}

.btn-white {
  color      : #000000;
  background : #fff;
}

.btn-white.btn-outline {
  color      : white;
  border     : 2px solid #fff;
  background : transparent;
}

.btn-white:hover {
  opacity : .8;
}

.btn-dark {
  color      : #fff;
  border     : solid 1px #000000;
  background : #000000;
}

.btn-dark:hover {
  color      : var(--hover-primary);
  border     : solid 1px #000000;
  background : #000000;
}

.btn-dark.btn-sh {
  box-shadow : 0 14px 35px -11px #000000;
}

.btn-dark.btn-outline {
  color      : #000000;
  border     : solid 2px #000000;
  background : transparent;
}

.btn-dark.btn-outline-bottom {
  color         : #000000;
  border-bottom : solid 3px #000000;
  background    : transparent;
}

.btn-grad1 {
  color      : white;
  background : linear-gradient(
                 45deg,
                 #231F73,
                 #D72F86
               );
}

.btn-grad1:hover {
  color : white;
}

.btn-grad2 {
  color      : white;
  border     : none;
  background : linear-gradient(
                 to top right,
                 #450b7c,
                 #563cc9,
                 #49e9fb
               );
  outline    : none;
}

.btn-red {
  color      : #fff;
  border     : solid 1px #ff5f7c;
  background : #ff5f7c;
}

.btn-green {
  color      : #fff;
  border     : solid 1px #54eb9f;
  background : #54eb9f;
}



/**
 * ==================================================+===
 * - - - - - - - - - 3 / outher button
 * =======================================================
 */

.form2 {
  position      : relative;
  width         : 100%;
  max-width     : 30rem;
  height        : 4rem;
  border-radius : 50rem;
  background    : #fff;
  box-shadow    : 0 16px 23px rgba(0, 0, 0, 0.076);
  transition    : .2s;
}

@media
  screen
  and (max-width : 576px) {
  .form2 {
    height        : fit-content;
    padding       : 1rem .5rem 1rem;
    border-radius : 10px;
    background    : #fff !important;
  }
}

.input {
  width         : 100%;
  height        : 4rem;
  margin-bottom : 20px;
  padding-right : 1rem;
  padding-left  : 1rem;
  border        : solid 1px #dbdbdb;
  background    : #ffffff;
  outline       : none;
  transition    : .25s ease-in-out;
}

.input:hover {
  background : #fff;
  box-shadow : 0 7px 11px 1px rgba(0, 0, 0, 0.0196078);
}

.footer-input {
  width         : 100%;
  height        : 4rem;
  padding       : 0 2rem;
  border        : solid 0;
  border-radius : 5px;
  outline       : none !important;
}

@media
  screen
  and (max-width : 576px) {
  .footer-input {
    width         : 100%;
    margin        : auto 0;
    border-radius : 5px;
  }
}

.footer-input::placeholder {
  color     : #9790AC;
  font-size : 1rem;
}

.input2 {
  width         : 100%;
  height        : 4rem;
  padding       : 0 2rem;
  border        : solid 0;
  border-radius : 50rem;
  outline       : none !important;
}

.input2::placeholder {
  color     : #9790AC;
  font-size : 1rem;
}

.form-control.has-style1 {
  height           : 50px;
  margin-bottom    : 25px;
  border           : solid 1px #e4e6f3;
  border-radius    : 4px;
  background-color : #f4f5fb;
  outline          : none;
  padding: .375rem 1.25rem;
}

select {
    padding: 12px;
    text-indent: 12px;
}

.input:hover,
.is-hovered.input,
.is-hovered.textarea,
.select select.is-hovered,
.select select:hover,
.textarea:hover {
  border-color : rgba(248, 78, 119, 0.3) solid 1px !important;
}

.input:active,
.input:focus,
.is-active.input,
.is-active.textarea,
.is-focused.input,
.is-focused.textarea,
.select select.is-active,
.select select.is-focused,
.select select:active,
.select select:focus,
.textarea:active,
.textarea:focus {
  border-color : #f0f0f0;
  box-shadow   : none;
}

.field:not(:last-child) {
  margin-bottom : 1.5rem;
}

label {
  margin-bottom : 10px;
}

textarea {
  margin-bottom : 20px;
  padding       : 20px;
  border        : solid 1px #dbdbdb;
  background    : #ffffff;
}

.textarea.has-style1 {
  width            : 100%;
  min-height       : 100px;
  margin-bottom    : 50px;
  border           : solid 1px #e4e6f3;
  border-radius    : 4px;
  background-color : #f4f5fb;
  outline          : none;
  font-size: 16px;
}

.card {
  border-radius : 5px;
  box-shadow    : 0 0 0 0 #f3f3f3;
}

.card .card-title2 {
  padding-top    : 14px;
  padding-bottom : 20px;
  padding-left   : 20px;
  color          : #fff;
}

.card .card-title {
  z-index     : 2;
  display     : flex;
  position    : relative;
  padding     : 1rem 0;
  align-items : center;
  font-size   : 1.3rem;
  flex-grow   : 1;
  line-height : 1.5;
  transition  : .15s ease-in-out;
}

.card .card-content {
  padding : 2rem;
}

.card.in-demo {
  margin-bottom      : 2rem;
  overflow           : hidden;
  border             : none !important;
  border-radius      : 5px;
  background         : rgba(255, 255, 255, 0.157);
  outline            : none !important;
  box-shadow         : none !important;
  -webkit-transition : .15s ease-in-out;
  transition         : .15s ease-in-out;
}

.card.in-demo .card-title2 {
  padding-top    : 14px;
  padding-bottom : 0;
  padding-left   : 20px;
  color          : #fff;
}

.card.in-demo figure {
  margin : 0 0 0;
}

.card.in-demo .card-image {
  width      : 100%;
  background : #494949;
}

.card.in-demo .card-title2 {
  text-transform : uppercase;
  font-size      : 1.2rem;
  letter-spacing : .8pt;
}

.card.in-demo .feather {
  width        : 50px;
  height       : 50px;
  stroke       : currentColor;
  stroke-width : 1.5;
}

.card.in-demo ion-icon {
  width  : 50px;
  height : 50px;
  color  : #fff;
}

.card.in-demo .card-description {
  padding-left : 20px;
  font-size    : 14px;
}

.card.in-demo .card-title {
  z-index       : 2;
  display       : flex;
  position      : relative;
  margin-bottom : 0;
  padding       : 1rem;
  color         : #f3f3f3;
  align-items   : center;
  font-size     : 1.3rem;
  font-size     : 1.2rem;
  flex-grow     : 1;
  transition    : .15s ease-in-out;
}

.card.in-demo .card-title.new::before {
  content         : "New";
  display         : flex;
  position        : absolute;
  right           : 15px;
  bottom          : 15px;
  padding         : 4px 8px 4px;
  border-radius   : 4px;
  background      : #FF0066;
  align-content   : center;
  align-items     : center;
  font-family     : "TradeGothic";
  font-size       : 16px;
  justify-content : center;
  line-height     : 100%;
}

.card.in-demo:hover {
  transform : translateY(-0.5rem);
}

.card.in-demo:hover .card-title {
  color : var(--hover-primary);
}

.card.in-demo:hover .card-title::before {
  color      : #ffffff;
  background : #1f1f1f;
}

.card.in-demo.soon {
  cursor : default;
}

.card.in-demo.soon:hover {
  transform : none;
}

.card.in-demo.soon:hover .card-title {
  color : #ffffff;
}

.card.in-demo.soon:hover .card-title::before {
  color      : #ffffff;
  background : var(--hover-primary);
}

.card.in-demo.new {
  cursor : pointer;
}

.card.in-demo.new:hover {
  transform : none;
}

.card.in-demo.new:hover .card-title::before {
  color      : #ffffff;
  background : var(--hover-primary);
}

.card.is-dark {
  color      : #fff;
  background : #34373B;
}

.card.is-dark .title {
  margin-bottom : 2.5rem;
  color         : #fff;
}

.card.is-dark .subtitle {
  color : #fff;
}

.card.in-feautures {
  padding    : 2rem;
  box-shadow : 0 10px 14px 0 #e8e8f6;
  transition : .15s ease-in-out;
}

.card.in-feautures .icon {
  width         : 4rem;
  height        : 4rem;
  color         : #fff;
  border-radius : 100%;
  background    : var(--color-primary);
}

.card.in-feautures .card-title {
  font-size : 1.3rem;
}

.card.in-feautures .card-description {
  margin-bottom : 0;
}

.card.in-feautures:hover {
  box-shadow : 0 14px 20px 0 #e2e2f6;
  transform  : translateY(-5px);
}

.card.in-feautures2 {
  display         : flex;
  padding         : 2rem;
  background      : transparent;
  background      : #e9e9e9;
  flex-direction  : column;
  justify-content : center;
  transition      : .15s ease-in-out;
}

.card.in-feautures2 .icon {
  width         : 100%;
  height        : auto;
  margin-bottom : 2rem;
  margin-bottom : 1rem;
  transition    : 0.2s cubic-bezier(0.39, 0.68, 0.27, 1.78);
}

.card.in-feautures2 .icon img {
  width  : 5rem;
  height : 5rem;
  margin : 0 auto;
}

.card.in-feautures2 .title {
  margin-top    : 1rem;
  margin-bottom : 1rem;
  text-align    : center;
  font-size     : 1.2rem;
}

.card.in-feautures2 .description {
  text-align : center;
}

.card.in-feautures2:hover .icon {
  transform : scale(1.1) translateY(-5px);
}

.card.in-download {
  max-width    : 55rem;
  margin-right : auto;
  margin-left  : auto;
  padding      : 4rem;
}

.card.in-help {
  border           : none;
  border-radius    : 10px;
  background-color : #FFFFFF;
  box-shadow       : 0 15px 29px -4px #3f49621f;
}

.card.in-help .card-img {
  max-width     : 8rem;
  padding       : 2rem;
  padding-right : 0;
}

@media
  screen
  and (max-width : 768px) {
  .card.in-help .card-img {
    padding : 2rem 2rem 0;
  }
}

.card.in-help .card-title {
  padding : 0;
}

.card-free {
  padding       : 3rem;
  color         : #fff;
  border-radius : 10px;
  background    : #313896;
}

.card-faq {
  padding    : 40px 30px;
  background : #00000003;
}

.card-faq .title {
  margin-bottom : 20px;
}

.job-card {
  margin-bottom : 40px;
  padding       : 40px 20px;
  border-radius : 5px;
  background    : white;
  box-shadow    : 0 15px 25px 0 #d8efec;
}

.job-card.is-empty {
  border       : solid 2px rgba(27, 170, 160, 0.4);
  border-style : dashed;
  background   : transparent;
  box-shadow   : none;
}

.job-card.is-empty .card-title {
  margin-bottom : 20px;
  font-size     : 50px;
  line-height   : 100%;
}

.job-card.is-empty .card-desc {
  margin-bottom : 20px;
}

.job-card .head {
  width         : fit-content;
  margin-bottom : 20px;
  padding       : 5px 20px;
  color         : var(--color-secondary);
  border-radius : 1rem;
  background    : rgba(27, 170, 160, 0.2);
}

.job-card .card-title {
  margin-bottom : 20px;
  line-height   : 1.4;
}

.job-card .card-info {
  margin-bottom : 20px;
  color         : #89929e;
}

.job-card .location {
  margin-right : 20px;
}

.job-card .time-left {
  margin-left  : 10px;
  padding-left : 10px;
  color        : #89929e;
  border-left  : solid 1px #89929e;
}

.job-card .company {
  display     : flex;
  align-items : center;
}

.job-card .company .logo {
  margin-right  : 15px;
  padding       : 5px;
  border-radius : 5px;
  background    : rgba(27, 170, 160, 0.2);
}

.job-card .company .logo img {
  height     : 100%;
  max-height : 1.5rem;
}

/**
 * ==================================== ========= Lists
 * =====================================
 */

.list {
  margin-bottom : 1rem;
  border        : none;
  background    : none;
  box-shadow    : none;
}

.list .list-item {
  display : flex;
}

.list .list-item .icon {
  margin-right : 1rem;
  color        : var(--color-primary);
}

.list .list-item.has-style1 {
  border     : none;
  background : #e9e9e9;
  box-shadow : none;
}

.box {
  position      : relative;
  margin-bottom : 30px;
  padding       : 40px 30px;
  overflow      : hidden;
  border-radius : 10px;
  cursor        : default;
}

.box .link-icon {
  display         : flex;
  width           : 2rem;
  height          : 2rem;
  border-radius   : 50%;
  background      : var(--color-secondary);
  align-items     : center;
  justify-content : center;
}

.box .link-icon ion-icon {
  color     : white;
  font-size : 1rem;
}

.box .box-particles {
  position : absolute;
  top      : 1rem;
  right    : 1rem;
}

.box .box-particles2 {
  position : absolute;
  top      : -1rem;
  right    : -1rem;
}

.box .box-particles2 img {
  max-width : 6rem;
}

.box .box-num {
  margin-bottom : 15px;
  font-size     : 3rem;
  font-weight   : 900;
  line-height   : 100%;
}

.box .box-price {
  display         : flex;
  width           : 100%;
  margin-top      : 40px;
  padding         : 10px 20px;
  color           : white;
  border-radius   : 5px;
  background      : var(--color-secondary);
  align-items     : center;
  justify-content : space-between;
  transition      : .25s;
  cursor          : pointer;
}

.box .box-price .title {
  color : white;
}

.box .box-price ion-icon {
  font-size : 1.5rem;
}

.box .box-price:hover {
  background : #18948b;
}

.box .box-logo {
  margin-bottom : 40px;
}

.box .box-logo img {
  height : 2rem;
}

.box .row {
  margin  : 0;
  padding : 0;
}

.box .col,
.box .col-auto {
  margin  : 0;
  padding : 0;
}

.box .col {
  margin-left : 10px;
}

.box .box-icon {
  margin-bottom : 15px;
}

.box .box-icon ion-icon {
  font-size   : 3rem !important;
  line-height : 100%;
}

.box .box-icon2 {
  margin-bottom : 15px;
}

.box .box-icon2 ion-icon {
  border-radius : 10px;
  background    : rgba(27, 170, 160, 0.1);
  font-size     : 2rem;
}

.box .box-title {
  margin-bottom : 15px;
}

.box.has-primary-bg {
  background : var(--color-primary);
  transition : 0.2s cubic-bezier(0.5, 0, 0.35, 1);
}

.box.has-primary-bg:hover {
  box-shadow : 0 14px 33px -3px rgba(0, 0, 0, 0.098);
  transform  : scale(1.02);
}

.box.has-primary-bg .box-icon ion-icon {
  color : #fff;
}

.box.has-primary-bg .box-title {
  color : #fff;
}

.box.has-primary-bg .box-desc {
  color : #fff;
}

.box.has-grad1 {
  background : linear-gradient(
                 45deg,
                 #231F73,
                 #D72F86
               );
  transition : 0.2s cubic-bezier(0.5, 0, 0.35, 1);
}

.box.has-grad1:hover {
  box-shadow : 0 14px 33px -3px rgba(0, 0, 0, 0.098);
  transform  : scale(1.02);
}

.box.has-grad1 .box-icon ion-icon {
  color : #fff;
}

.box.has-grad1 .box-title {
  color : #fff;
}

.box.has-grad1 .box-desc {
  color : #fff;
}

.box.has-grad2 {
  background : linear-gradient(
                 to top right,
                 #450b7c,
                 #563cc9,
                 #49e9fb
               );
  transition : 0.2s cubic-bezier(0.5, 0, 0.35, 1);
}

.box.has-grad2:hover {
  box-shadow : 0 14px 33px -3px rgba(0, 0, 0, 0.098);
  transform  : scale(1.02);
}

.box.has-grad2 .box-icon ion-icon {
  color : #fff;
}

.box.has-grad2 .box-title {
  color : #fff;
}

.box.has-grad2 .box-desc {
  color : #fff;
}

.box.has-blue-text .box-title {
  color : #3639a3;
}

.box.has-blue-text .box-desc {
  color : #3639a3;
}

.box.has-blue-text svg {
  color : #3639a3;
}

.box.has-blue-text ion-icon {
  color : #3639a3;
}

.box.has-blue-text path {
  color : #3639a3;
}

.box.has-secondary-bg {
  background : var(--color-secondary);
  transition : 0.2s cubic-bezier(0.5, 0, 0.35, 1);
}

.box.has-secondary-bg:hover {
  box-shadow : 0 14px 33px -3px rgba(0, 0, 0, 0.098);
  transform  : scale(1.02);
}

.box.has-secondary-bg .box-icon ion-icon {
  color : #fff;
}

.box.has-secondary-bg .box-title {
  color : #fff;
}

.box.has-secondary-bg .box-desc {
  color : #fff;
}

.box.has-shadow {
  border     : solid 1px #c2e6e2d7;
  background : #fff;
  box-shadow : 0 0 0 0 #eee;
  box-shadow : 0 14px 33px -3px rgba(0, 0, 0, 0.078);
  transition : 0.2s cubic-bezier(0.5, 0, 0.35, 1);
}

.box.has-shadow:hover {
  box-shadow : 0 14px 33px -3px rgba(0, 0, 0, 0.098);
  transform  : scale(1.02);
}

.box.is-dark {
  background : #002b44 !important;
}

.box.is-dark ion-icon {
  color : white;
}

.box.is-dark .box-title {
  color : white;
}

.box.is-dark .box-desc {
  color : white;
}

.box.has-left-icon .box-title {
  margin : 5px 0 10px;
}

.box.has-style1 {
  background : rgba(27, 170, 160, 0.1);
  transition : .25s ease-in-out;
}

.box.has-style1 .box-icon ion-icon {
  font-size : 1.5rem;
}

.box.has-style1:hover {
  background : rgba(27, 170, 160, 0.17);
}

.box.has-style2 {
  display         : flex;
  background      : #fff;
  box-shadow      : 0 3px 7px #0000000a;
  align-items     : center;
  flex-direction  : column;
  justify-content : center;
  transition      : .2s ease-in-out;
}

.box.has-style2 .box-icon ion-icon {
  font-size : 1.5rem;
}

.box.has-style2:hover {
  transform : scale(1.03);
}

.box.has-style3 {
  background : white;
  box-shadow : 0 60px 40px -30px rgba(37, 48, 51, 0.04),
               0 10px 50px 0 rgba(37, 48, 51, 0.06);
}

.box.has-style3 .box-icon ion-icon {
  font-size : 1.5rem;
}

.list-wrap {
  margin : 0 0 60px;
}

.list-wrap .title {
  position      : relative;
  margin-bottom : 10px;
  padding-left  : 2rem;
  color         : var(--color-secondary);
}

.list-wrap .title::before {
  content           : "";
  position          : absolute;
  top               : 0;
  left              : 0;
  width             : 1.5rem;
  height            : 1.5rem;
  background-repeat : no-repeat;
  background-size   : contain;
}

.list-wrap .desc {
  max-width    : 25rem;
  padding-left : 2rem;
}

/**
 * ========================================= Navbar
 * =========================================
 */

.top-menu li {
  display     : inline;
  margin-left : 5px;
}

.top-menu li a {
  text-decoration : none;
}

.top-site {
  padding       : 5px 0;
  border-top    : solid 3px var(--color-secondary);
  border-bottom : 1px solid #f2f3f5;
}

.top-site p {
  font-size   : 0.875rem;
  line-height : 1.5rem;
}

.top-site a {
  color           : var(--color-secondary);
  text-decoration : underline;
}

.top-site a:hover {
  opacity : 0.7;
}

.top-site.has-style1 {
  padding       : 10px 0;
  color         : white;
  border-top    : none;
  border-bottom : none;
  background    : var(--color-secondary);
}

.top-site.has-style1 a {
  color : white;
}

.top-site.has-style1 a:hover {
  opacity : 0.7;
}

.top-site.has-style1 p {
  color : white;
}

.navbar {
  z-index       : 9999;
  display       : flex;
  height        : 6rem;
  padding       : 0;
  border-bottom : 1px solid #f2f3f5;
  align-items   : center;
  flex-wrap     : wrap;
  line-height   : 1;
  /**
  * ==================================== ========= is dark mode
  * =====================================
  */
}

.navbar .container {
  display     : flex;
  align-items : center;
}

.navbar a {
  font-family : "SpaceGrotesk";
}

.navbar .logo {
  height : 2rem;
}

@media
  screen
  and (max-width : 576px) {
  .navbar .logo {
    height : 1.6rem;
  }
}

@media
  screen
  and (max-width : 992px) {
  .navbar .navbar-menu {
    display : none;
  }
}

.navbar .navbar-menu > li {
  display      : inline-block;
  position     : relative;
  margin-right : 1.5rem;
  color        : #4a4a4a;
  align-items  : flex-end;
  line-height  : 100%;
}

.navbar .navbar-menu > li:nth-last-child(-n + 1) {
  margin-right : 0;
}

.navbar .navbar-menu > li:hover {
  color : var(--hover-primary);
}

.navbar .navbar-menu > li > a {
  color       : #000000;
  font-size   : 1.1rem;
  line-height : 6rem;
  transition  : 0.25s;
  cursor      : pointer;
}

.navbar .navbar-menu > li > a:hover {
  color : var(--hover-primary);
}

.navbar .navbar-menu > li::before {
  content       : "";
  position      : absolute;
  top           : 1.5rem;
  left          : 50%;
  width         : 0.5rem;
  height        : 0.5rem;
  border-radius : 100%;
  background    : transparent;
  opacity  : 0;
  transition    : 0.15s ease-in-out;
}

.navbar .navbar-menu > li:hover::before {
  background : var(--hover-primary);
  opacity  : 1;
  display:block;
}

.navbar .navbar-menu > li:hover .sub-menu {
  visibility : visible;
  opacity  : 1;
  display:block;
}

.navbar .navbar-menu > li .chevron {
  color : #cacaca;
}

.navbar .navbar-menu > li .sub-menu {
  z-index          : 9999999;

  position         : absolute;
  top              : 6rem;
  min-width:         12rem;
  padding          : 1em 0;
  border           : solid 1px #f7f7f7;
  border-radius    : 8px;
  background-color : #fff;
  box-shadow       : 0 6px 61px 0 rgba(11, 12, 62, 0.14);
  opacity  : 0;
  display:none;
}

.navbar .navbar-menu > li .sub-menu li {
  display     : block;
  line-height : 2.5;
}

.navbar .navbar-menu > li .sub-menu li a {
  width          : 100%;
  padding        : 0 2rem;
  color          : #000;
  opacity        : 0.8;
  text-transform : capitalize;
  font-size      : 1rem;
  transition     : 0.25s;
}

.navbar .navbar-menu > li .sub-menu li a:hover {
  padding : 0 2.1em;
  color   : var(--hover-primary);
}

.navbar .navbar-menu > li .sub-menu li:hover {
  background : rgba(27, 170, 160, 0.05);
}

.navbar .close-mobile-menu {
  z-index          : 1;
  position         : relative;
  width            : 30px;
  height           : 30px;
  margin-bottom    : 20px;
  padding          : 15px;
  color            : #fff;
  color            : #000000;
  border-radius    : 50%;
  background-color : #f1f1f1;
  outline          : 0;
  text-align       : center;
  font-size        : 24px;
  line-height      : 56px;
  transition       : all cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
  cursor           : pointer;
}

.navbar .close-mobile-menu:hover {
  background-color : silver;
}

.navbar .mobile-overlay {
  z-index    : 9999999;
  visibility : none;
  position   : fixed;
  top        : 0;
  left       : 0;
  width      : 100%;
  height     : 100vh;
  color      : #000000;
  opacity    : 0;
  transform  : translateX(-100%);
}

.navbar .mobile-overlay-bg {
  position         : fixed;
  top              : 0;
  left             : 0;
  width            : 100%;
  height           : 100vh;
  background-color : rgba(23, 22, 26, 0.9);
}

.navbar .mobile-menu {
  z-index         : 9999;
  display         : flex;
  position        : absolute;
  top             : 0;
  left            : 0;
  width           : 90%;
  height          : 100%;
  padding         : 2rem;
  overflow        : scroll;
  background      : white;
  box-shadow      : 0 0 62px rgba(0, 0, 0, 0.2);
  flex-direction  : column;
  justify-content : flex-start;
}

.navbar .mobile-menu .has-dropdown-m {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  transition      : all cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

.navbar .mobile-menu .has-dropdown-m ion-icon {
  width      : 1rem;
  height     : 1rem;
  transition : all cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

.navbar .mobile-menu .has-dropdown-m:hover ion-icon:before {
  transform : rotate(45deg);
}

.navbar .mobile-menu ul {
  margin  : 0;
  padding : 0;
}

.navbar .mobile-menu li {
  text-align  : left;
  line-height : 50px;
}

.navbar .mobile-menu li a {
  color          : #000000;
  text-transform : capitalize;
  font-family    : "SpaceGrotesk-Bold";
  font-size      : 17px;
  transition     : 0.25s;
}

.navbar .mobile-menu li a:hover {
  padding-left : 0.5rem;
  color        : var(--hover-primary);
}

.navbar .mobile-menu .copyright {
  margin-top  : 40px;
  color       : #000000;
  line-height : 1.5;
}

.navbar .mobile-menu .copyright a {
  color : #000000;
}

.navbar .color-secondary {
  color : var(--color-secondary) !important;
}

.navbar .menu-toggle {
  display     : none;
  height      : 6rem;
  line-height : 6rem;
}

@media
  screen
  and (max-width : 992px) {
  .navbar .menu-toggle {
    display     : flex;
    align-items : center;
  }
}

.navbar .menu {
  display  : block;
  position : relative;
  width    : 30px;
  height   : 30px;
  cursor   : pointer;
}

.navbar .menu .line-menu {
  position      : absolute;
  height        : 3px;
  border-radius : 2px;
  background    : #000000;
  transition    : transform 0.45s cubic-bezier(0.9, -0.6, 0.3, 1.6),
                  width 0.2s ease 0.2s;
}

.navbar .menu input {
  display : none;
}

.navbar .menu input + .line-menu {
  top              : 50%;
  left             : 0;
  width            : 30px;
  margin           : -2px 0 0 0;
  transform-origin : 50% 50%;
}

.navbar .menu input + .line-menu + .line-menu {
  top              : 4px;
  left             : 0;
  width            : 30px;
  transform-origin : 0 50%;
}

.navbar .menu input + .line-menu + .line-menu + .line-menu {
  right            : 0;
  bottom           : 4px;
  width            : 30px;
  transform        : translate(0, 0);
  transform-origin : 100% 50%;
}

.navbar .menu input:checked + .line-menu {
  transform  : rotate(-45deg);
  transition : transform 0.45s cubic-bezier(0.9, -0.6, 0.3, 1.6) 0.1s;
}

.navbar .menu input:checked + .line-menu + .line-menu {
  width      : 15px;
  transform  : translate(4px, -0.5px) rotate(45deg);
  transition : transform 0.45s cubic-bezier(0.9, -0.6, 0.3, 1.6) 0.1s,
               width 0.2s ease;
}

.navbar .menu input:checked + .line-menu + .line-menu + .line-menu {
  width      : 14px;
  transform  : translate(-4.5px, 0.5px) rotate(45deg);
  transition : transform 0.45s cubic-bezier(0.9, -0.6, 0.3, 1.6) 0.1s,
               width 0.2s ease;
}

.navbar .mobile-visible {
  visibility : visible;
  opacity    : 1;
  transform  : translateX(0);
}

.navbar .mobile-menu .dropdown-mobile {
  display       : none;
  margin-bottom : 15px;
  padding-left  : 20px;
  overflow      : hidden;
  border-left   : solid 3px var(--color-secondary);
  background    : rgba(27, 170, 160, 0.1);
}

.navbar.style2 {
  position      : relative;
  margin-bottom : 8rem;
}

.navbar.is-dark {
  position   : relative;
  color      : #000000 !important;
  background : transparent;
}

.navbar.is-dark .navbar-menu li {
  color : #000;
}

.navbar.is-dark .navbar-menu li a {
  color : #000000;
}

.navbar.is-dark .navbar-menu li a:hover {
  color : var(--hover-primary);
}

.navbar.is-light {
  position   : relative;
  color      : white !important;
  background : transparent;
}

.navbar.is-light .navbar-menu li {
  color : white;
}

.navbar.is-light .navbar-menu li a {
  color : white;
}

.navbar.is-light .navbar-menu li a:hover {
  color : var(--hover-primary);
}

.navbar.is-transparent {
  background : transparent;
}

.navbar.is-transparent .line-menu {
  background : #fff;
}

.navbar-brand {
  margin-right : 5rem;
}

/**
 * Layouts >
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 * | Betakit - creabik
 */

/**
 * * TABLE OF CONTENTS ================================================== 0.
 * Hero in index page =============================================== **
 */

.header {
  position : relative;
  /**
  * ==================================== =========
  *
  * In Index page =====================================
  */
  /**
  * ==================================== ========= has style1
  * =====================================
  */
  /**
  * ==================================== ========= has style1
  * =====================================
  */
  /**
  * ==================================== ========= has style1
  * =====================================
  */
  /**
  * ==================================== ========= has style1
  * =====================================
  */
  /**
  * ==================================== ========= has style1
  * =====================================
  */
  /**
  * ==================================== ========= has style1
  * =====================================
  */
}

.header.in-index {
  z-index       : 1;
  position      : relative;
  margin-bottom : 0;
  padding-top   : 0;
  color         : #fff;
  background    : var(--color-secondary);
}

.header.in-index .navbar {
  position      : relative;
  border-bottom : none;
}

.header.in-index .navbar a {
  color : white;
}

.header.in-index .navbar .mobile-menu a {
  color : #000000;
}

.header.in-index .header-wrap {
  display         : flex;
  padding         : 10rem 0;
  align-items     : center;
  flex-direction  : column;
  justify-content : center;
}

@media
  screen
  and (max-width : 768px) {
  .header.in-index .header-wrap {
    padding    : 6rem 0 0;
    text-align : center;
  }
}

@media
  screen
  and (max-width : 768px) {
  .header.in-index .header-wrap {
    padding    : 70px 0 0;
    text-align : center;
  }
}

.header.in-index .header-img {
  max-height : 7rem;
}

.header.in-index .header-title {
  margin-bottom : 30px;
  color         : #fff;
  text-align    : center;
  font-size     : 50px;
}

@media
  screen
  and (max-width : 576px) {
  .header.in-index .header-title {
    margin-top : 1rem;
    text-align : center;
    font-size  : 35px;
  }
}

.header.in-index .screen {
  width : 150%;
}

.header.in-index .header-desc {
  margin-bottom : 30px;
  color         : #fff;
  text-align    : center;
}

@media
  screen
  and (max-width : 576px) {
  .header.in-index .header-desc {
    font-size : 15px;
  }
}

.header.in-index .line-menu {
  background : #f3f3f3;
}

@media
  screen
  and (max-width : 768px) {
  .header.in-index {
    padding-bottom : 80px;
  }
}

.header.has-style1 .line-menu {
  background : #000000;
}

.header.has-style1 .header-wrap {
  padding             : 10rem 0 10rem;
  background-repeat   : no-repeat;
  background-position : center;
}

@media
  screen
  and (max-width : 992px) {
  .header.has-style1 .header-wrap {
    padding : 7rem 0 7rem;
  }
}

@media
  screen
  and (max-width : 768px) {
  .header.has-style1 .header-wrap {
    padding : 5rem 0 5rem;
  }
}

.header.has-style1 .header-title {
  margin-bottom : 20px;
  text-align    : center;
  font-size     : 4.444rem;
  line-height   : 1;
}

@media
  screen
  and (max-width : 992px) {
  .header.has-style1 .header-title {
    font-size : 50px;
  }
}

@media
  screen
  and (max-width : 768px) {
  .header.has-style1 .header-title {
    margin-bottom : 20px;
    text-align    : center;
    font-size     : 40px;
  }
}

.header.has-style1 .header-desc {
  margin-bottom : 20px;
  text-align    : center;
  font-size     : 24px;
}

@media
  screen
  and (max-width : 992px) {
  .header.has-style1 .header-desc {
    font-size : 20px;
  }
}

@media
  screen
  and (max-width : 768px) {
  .header.has-style1 .header-desc {
    font-size : 18px;
  }
}

.header.has-style1 .header-img img {
  width : 150%;
}

@media
  screen
  and (max-width : 992px) {
  .header.has-style1 .header-img img {
    width      : 100%;
    max-width  : 100%;
    margin-top : 20px;
  }
}

.header.has-style1 .header-shape {
  z-index   : -1;
  position  : absolute;
  top       : -10rem;
  left      : -4rem;
  transform : scale(0.9);
}

.header.has-style2 {
  background : rgba(27, 170, 160, 0.2);
}

.header.has-style2 .header-wrap {
  height  : 100%;
  padding : 40px 0 80px;
}

.header.has-style2 .search-input {
  width         : 100%;
  height        : 4rem;
  padding       : 0 2rem;
  border        : solid 0;
  border-radius : 5px;
  outline       : none !important;
}

@media
  screen
  and (max-width : 576px) {
  .header.has-style2 .search-input {
    width         : 100%;
    height        : 2rem;
    margin        : auto 0;
    border-radius : 5px;
  }
}

.header.has-style2 .search-input::placeholder {
  color     : #9790AC;
  font-size : 1rem;
}

.header.has-style2 .form {
  display         : flex;
  position        : relative;
  width           : -webkit-fill-available;
  padding         : 10px;
  border-radius   : 3px;
  background      : white;
  justify-content : flex-start;
}

.header.has-style2 .search-btn {
  padding-right : 2rem;
  padding-left  : 2rem;
  overflow      : visible !important;
}

.header.has-style2 .header-title {
  max-width     : 60rem;
  margin-bottom : 40px;
  color         : #000;
  font-size     : 4rem;
}

@media
  screen
  and (max-width : 992px) {
  .header.has-style2 .header-title {
    text-align : center;
    font-size  : 50px;
  }
}

@media
  screen
  and (max-width : 768px) {
  .header.has-style2 .header-title {
    margin-bottom : 20px;
    text-align    : center;
    font-size     : 40px;
  }
}

@media
  screen
  and (max-width : 992px) {
  .header.has-style2 .form {
    margin-bottom : 20px;
  }
}

.header.has-style2 .header-desc {
  max-width     : 30rem;
  margin-bottom : 40px;
  color         : #000;
}

.header.has-style2 .header-img img {
  width : 100%;
}

@media
  screen
  and (max-width : 768px) {
  .header.has-style2 .header-img {
    display : none;
  }
}

.header.has-style2 .header-shape {
  z-index   : -1;
  position  : absolute;
  top       : -10rem;
  left      : -4rem;
  transform : scale(0.9);
}

.header.has-style2 .hero-particles .particle-6 {
  z-index       : -1;
  position      : absolute;
  top           : -30em;
  right         : -30em;
  width         : 79em;
  height        : 70em;
  border-radius : 50% 50% 50% 50% / 60% 60% 40% 40%;
  background    : #fff8f5;
}

.header.has-style3 {
  position   : relative;
  background : #002b44;
}

.header.has-style3 .navbar {
  border-bottom : solid 2px rgba(255, 255, 255, 0.103);
}

.header.has-style3::before {
  content         : "";
  position        : absolute;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : 100%;
  background-size : cover;
}

.header.has-style3 .deco {
  position : relative;
}

.header.has-style3 .deco::before {
  content       : "";
  position      : absolute;
  bottom        : 0;
  width         : 100%;
  height        : 50%;
  border-radius : 7px 7px 0 0;
  background    : var(--color-secondary);
}

.header.has-style3 .deco::after {
  content         : "";
  position        : absolute;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : 100%;
  background-size : cover;
}

.header.has-style3 .hero-img {
  margin        : 4rem 0;
  overflow      : hidden;
  border-radius : 7px;
}

.header.has-style3 .line-menu {
  background : #fff;
}

.header.has-style3 .header-wrap {
  display        : flex;
  height         : 100%;
  padding        : 80px 0 0;
  align-items    : center;
  flex-direction : column;
}

.header.has-style3 .bottom-img {
  position : relative;
  bottom   : -3px;
  width    : 100%;
}

.header.has-style3 .header-title {
  max-width     : 60rem;
  margin-bottom : 40px;
  color         : #fff;
  text-align    : center;
  font-size     : 3.5rem;
}

@media
  screen
  and (max-width : 992px) {
  .header.has-style3 .header-title {
    font-size : 60px;
  }
}

@media
  screen
  and (max-width : 768px) {
  .header.has-style3 .header-title {
    font-size : 40px;
  }
}

.header.has-style3 .header-desc {
  max-width     : 40rem;
  margin-bottom : 40px;
  color         : #fff;
  text-align    : center;
}

.header.has-style3 .header-img img {
  width : 150%;
}

@media
  screen
  and (max-width : 768px) {
  .header.has-style3 .header-img {
    display : none;
  }
}

.header.has-style3 .header-shape {
  z-index   : -1;
  position  : absolute;
  top       : -10rem;
  left      : -4rem;
  transform : scale(0.9);
}

.header.has-style4 {
  z-index           : 0;
  position          : relative;
  background-repeat : no-repeat;
  background-size   : cover;
}

.header.has-style4::before {
  z-index    : -1;
  content    : "";
  position   : absolute;
  bottom     : 0;
  width      : 100%;
  height     : 30%;
  background : white;
}

.header.has-style4 .line-menu {
  background : #fff;
}

.header.has-style4 .header-wrap {
  display        : flex;
  height         : 100%;
  padding        : 80px 0 0;
  align-items    : center;
  flex-direction : column;
}

.header.has-style4 .bottom-img {
  width : 100%;
}

.header.has-style4 .soft-screens {
  margin-top : 40px;
}

.header.has-style4 .soft-screens img {
  width         : 100%;
  max-width     : 50rem;
  border-radius : 30px;
  box-shadow    : 0 35px 66px 0 rgba(0, 0, 0, 0.137);
}

.header.has-style4 .header-title {
  max-width     : 60rem;
  margin-bottom : 40px;
  color         : #fff;
  text-align    : center;
  font-size     : 3.5rem;
}

@media
  screen
  and (max-width : 768px) {
  .header.has-style4 .header-title {
    font-size : 40px;
  }
}

.header.has-style4 .header-desc {
  max-width     : 40rem;
  margin-bottom : 40px;
  color         : #fff;
  text-align    : center;
}

.header.has-style4 .header-img img {
  width : 150%;
}

@media
  screen
  and (max-width : 768px) {
  .header.has-style4 .header-img {
    display : none;
  }
}

.header.has-style4 .header-shape {
  z-index   : -1;
  position  : absolute;
  top       : -10rem;
  left      : -4rem;
  transform : scale(0.9);
}

.header.has-style5 {
  background : var(--color-secondary);
}

.header.has-style5 .navbar .menu .line-menu {
  background : white;
}

.header.has-style5 .header-wrap {
  height  : 100%;
  padding : 40px 0 80px;
}

.header.has-style5 .navbar {
  border-bottom : 1px solid #f2f3f50d;
}

.header.has-style5 .search-input {
  width         : 100%;
  height        : 4rem;
  padding       : 0 2rem;
  border        : solid 0;
  border-radius : 5px;
  outline       : none !important;
}

@media
  screen
  and (max-width : 576px) {
  .header.has-style5 .search-input {
    width         : 100%;
    margin        : auto 0;
    border-radius : 5px;
  }
}

.header.has-style5 .search-input::placeholder {
  color     : #9790AC;
  font-size : 1rem;
}

.header.has-style5 .form {
  display         : flex;
  position        : relative;
  width           : -webkit-fill-available;
  padding         : 10px;
  border-radius   : 3px;
  background      : white;
  justify-content : flex-start;
}

.header.has-style5 .search-btn {
  padding-right : 2rem;
  padding-left  : 2rem;
  overflow      : visible !important;
}

.header.has-style5 .header-title {
  max-width     : 60rem;
  margin-bottom : 30px;
  color         : white;
  font-size     : 72px;
  line-height   : 1;
}

@media
  screen
  and (max-width : 992px) {
  .header.has-style5 .header-title {
    font-size : 60px;
  }
}

@media
  screen
  and (max-width : 768px) {
  .header.has-style5 .header-title {
    font-size : 40px;
  }
}

.header.has-style5 .header-desc {
  max-width     : 30rem;
  margin-bottom : 30px;
  color         : white;
  font-size     : 17px;
}

.header.has-style5 .header-img {
  padding : 5rem 0;
}

.header.has-style5 .header-img img {
  width : 160%;
}

@media
  screen
  and (max-width : 992px) {
  .header.has-style5 .header-img img {
    width : 100%;
  }
}

.header.has-style5 .header-wrap {
  overflow : hidden;
}

.header.has-style5 .header-shape {
  z-index   : -1;
  position  : absolute;
  top       : -10rem;
  left      : -4rem;
  transform : scale(0.9);
}

.header.has-style5 .hero-particles .particle-6 {
  z-index       : -1;
  position      : absolute;
  top           : -30em;
  right         : -30em;
  width         : 79em;
  height        : 70em;
  border-radius : 50% 50% 50% 50% / 60% 60% 40% 40%;
  background    : #fff8f5;
}

.header.has-style6 .header-wrap {
  height  : 100%;
  padding : 40px 0 80px;
}

.header.has-style6 .search-input {
  width         : 100%;
  height        : 4rem;
  padding       : 0 2rem;
  border        : solid 0;
  border-radius : 5px;
  outline       : none !important;
}

@media
  screen
  and (max-width : 576px) {
  .header.has-style6 .search-input {
    width         : 100%;
    margin        : auto 0;
    border-radius : 5px;
  }
}

.header.has-style6 .search-input::placeholder {
  color     : #9790AC;
  font-size : 1rem;
}

.header.has-style6 .form {
  display         : flex;
  position        : relative;
  width           : -webkit-fill-available;
  padding         : 10px;
  border-radius   : 3px;
  background      : white;
  justify-content : flex-start;
}

.header.has-style6 .search-btn {
  padding-right : 2rem;
  padding-left  : 2rem;
  overflow      : visible !important;
}

.header.has-style6 .header-title {
  max-width     : 60rem;
  margin-bottom : 40px;
  color         : #000;
  font-size     : 4rem;
}

@media
  screen
  and (max-width : 992px) {
  .header.has-style6 .header-title {
    text-align : center;
  }
}

@media
  screen
  and (max-width : 768px) {
  .header.has-style6 .header-title {
    font-size : 40px;
  }
}

.header.has-style6 .header-desc {
  max-width     : 30rem;
  margin-bottom : 40px;
  color         : #000;
}

@media
  screen
  and (max-width : 992px) {
  .header.has-style6 .header-desc {
    margin-right : auto;
    margin-left  : auto;
    text-align   : center;
  }
}

.header.has-style6 .header-img img {
  width : 110%;
}

@media
  screen
  and (max-width : 992px) {
  .header.has-style6 .header-img img {
    width      : 100%;
    margin-top : 20px;
  }
}

@media
  screen
  and (max-width : 768px) {
  .header.has-style6 .header-img {
    display : none;
  }
}

.header.has-style6 .header-shape {
  z-index   : -1;
  position  : absolute;
  top       : -10rem;
  left      : -4rem;
  transform : scale(0.9);
}

.header.has-style6 .hero-particles .particle-6 {
  z-index       : -1;
  position      : absolute;
  top           : -30em;
  right         : -30em;
  width         : 79em;
  height        : 70em;
  border-radius : 50% 50% 50% 50% / 60% 60% 40% 40%;
  background    : #fff8f5;
}

.header.has-style-bg {
  background-size : cover;
}

.header.has-style-bg.is-grad {
  position : relative;
}

.header.has-style-bg.is-grad::before {
  content    : "";
  position   : absolute;
  width      : 100%;
  height     : 100%;
  opacity    : .8;
  background : linear-gradient(
                 to top right,
                 #450b7c,
                 #563cc9,
                 #49e9fb
               );
}

.header.has-style-bg .line-menu {
  background : #fff;
}

.header.has-style-bg .header-wrap {
  display        : flex;
  height         : 100%;
  padding        : 150px 0 180px;
  align-items    : center;
  flex-direction : column;
}

@media
  screen
  and (max-width : 768px) {
  .header.has-style-bg .header-wrap {
    padding : 70px 0;
  }
}

.header.has-style-bg .header-title {
  max-width     : 40rem;
  margin-bottom : 20px;
  color         : #fff;
  text-align    : center;
  font-size     : 3.5rem;
}

@media
  screen
  and (max-width : 768px) {
  .header.has-style-bg .header-title {
    font-size : 40px;
  }
}

.header.has-style-bg .header-desc {
  max-width     : 40rem;
  margin-bottom : 20px;
  color         : #fff;
  text-align    : center;
}

.header.has-style-bg .header-img img {
  width : 150%;
}

@media
  screen
  and (max-width : 768px) {
  .header.has-style-bg .header-img {
    display : none;
  }
}

.header.has-style-bg .header-shape {
  z-index   : -1;
  position  : absolute;
  top       : -10rem;
  left      : -4rem;
  transform : scale(0.9);
}

.header-page {
  z-index         : 3;
  position        : relative;
  background      : #3639A3;
  background-size : cover;
}

.header-page::before {
  content    : "";
  position   : absolute;
  top        : 0;
  left       : 0;
  width      : 100%;
  height     : 100%;
  opacity    : .4;
  background : #000;
}

.header-page .navbar {
  border-bottom : none;
}

.header-page .line-menu {
  background : #fff !important;
}

.header-page .header-title {
  max-width    : 60rem;
  margin-right : auto;
  margin-left  : auto;
  color        : #fff;
  font-size    : 3.5rem;
}

.header-page .header-title.is-center {
  margin-right : auto;
  margin-left  : auto;
}

@media
  screen
  and (max-width : 576px) {
  .header-page .header-title {
    font-size : 2.5rem;
  }
}

.header-page .header-desc {
  max-width     : 30rem;
  margin-top    : 20px;
  margin-right  : auto;
  margin-bottom : 40px;
  margin-left   : auto;
  color         : #fff;
  text-align    : center;
}

.header-page .header-wrap {
  position   : relative;
  padding    : 10rem 0;
  overflow-y : hidden;
}

@media
  screen
  and (max-width : 576px) {
  .header-page .header-wrap {
    padding : 3rem 0;
  }
}

.header-page .shape {
  z-index   : -1;
  position  : absolute;
  right     : -5rem;
  bottom    : -10rem;
  transform : scale(0.7);
}

@media
  screen
  and (max-width : 576px) {
  .header-page .shape {
    right     : -10em;
    transform : scale(0.4);
  }
}

.header-page2 {
  position   : relative;
  background : rgba(27, 170, 160, 0.2);
}

.header-page2 .header-title {
  max-width    : 60rem;
  margin-right : auto;
  margin-left  : auto;
  color        : #000000;
  text-align   : center;
  font-size    : 3.5rem;
}

@media
  screen
  and (max-width : 576px) {
  .header-page2 .header-title {
    font-size : 2.5rem;
  }
}

.header-page2 .header-desc {
  max-width     : 30rem;
  margin-top    : 20px;
  margin-bottom : 40px;
  color         : #000000;
}

.header-page2 .header-wrap {
  padding  : 7rem 0;
  overflow : hidden;
}

@media
  screen
  and (max-width : 576px) {
  .header-page2 .header-wrap {
    padding : 50px 0;
  }
}

.header-page2 .shape {
  z-index  : -1;
  position : absolute;
  right    : -5rem;
  bottom   : -10rem;
}

@media
  screen
  and (max-width : 576px) {
  .header-page2 .shape {
    transform : scale(0.5);
  }
}

.header-page3 {
  position   : relative;
  background : #002b44;
}

.header-page3 .navbar {
  border-bottom : solid 2px rgba(255, 255, 255, 0.103);
}

.header-page3 .line-menu {
  background : #fff !important;
}

.header-page3 .header-title {
  max-width     : 60rem;
  margin-right  : auto;
  margin-bottom : 20;
  margin-left   : auto;
  color         : #fff;
  text-align    : center;
  font-size     : 3.5rem;
}

@media
  screen
  and (max-width : 576px) {
  .header-page3 .header-title {
    font-size : 2.5rem;
  }
}

.header-page3 .header-desc {
  max-width     : 30rem;
  margin-top    : 20px;
  margin-right  : auto;
  margin-bottom : 40px;
  margin-left   : auto;
  color         : #fff;
  text-align    : center;
}

.header-page3 .header-wrap {
  padding : 10rem 0;
}

@media
  screen
  and (max-width : 576px) {
  .header-page3 .header-wrap {
    padding : 50px 0;
  }
}

.header-page3 .shape {
  z-index  : -1;
  position : absolute;
  right    : -5rem;
  bottom   : -10rem;
}

@media
  screen
  and (max-width : 576px) {
  .header-page3 .shape {
    transform : scale(0.5);
  }
}

.header-page4 {
  position   : relative;
  background : linear-gradient(
                 rgba(27, 170, 160, 0.2) 0%,
                 white 50%
               );
}

.header-page4 .navbar {
  border-bottom : solid 2px rgba(255, 255, 255, 0.103);
}

.header-page4 .header-title {
  max-width     : 60rem;
  margin-bottom : 40px;
  margin-bottom : 20;
  color         : #000000;
  font-size     : 74px;
  line-height   : 1;
}

@media
  screen
  and (max-width : 576px) {
  .header-page4 .header-title {
    font-size : 2.5rem;
  }
}

.header-page4 .header-desc {
  max-width     : 30rem;
  margin-top    : 20px;
  margin-bottom : 20px;
  color         : #000000;
  font-size     : 17px;
}

.header-page4 .header-wrap {
  padding : 4rem 0;
}

@media
  screen
  and (max-width : 576px) {
  .header-page4 .header-wrap {
    padding : 50px 0;
  }
}

.header-page4 .shape {
  z-index  : -1;
  position : absolute;
  right    : -5rem;
  bottom   : -10rem;
}

@media
  screen
  and (max-width : 576px) {
  .header-page4 .shape {
    transform : scale(0.5);
  }
}

.header-changelog {
  position   : relative;
  background : #f4f5fb;
}

.header-changelog .header-title {
  max-width     : 60rem;
  margin-right  : auto;
  margin-bottom : 40px;
  margin-left   : auto;
  color         : #000000;
  text-align    : center;
  font-size     : 3.5rem;
}

@media
  screen
  and (max-width : 576px) {
  .header-changelog .header-title {
    font-size : 2.6rem;
  }
}

.header-changelog .header-desc {
  max-width     : 30rem;
  margin-bottom : 40px;
  color         : #000000;
}

.header-changelog .header-wrap {
  padding : 6rem 0;
}

.header-changelog .shape {
  z-index  : -1;
  position : absolute;
  right    : -5rem;
  bottom   : 0;
}

.phone {
  padding        : .2rem;
  border-radius  : .5rem;
  background     : #fff;
  vertical-align : center;
}

.phone ion-icon {
  margin-right : .5rem;
}

/**
 * Layouts >
 *
 * | Betakit - creabik /** * TABLE OF CONTENTS ==============================
 * ========= Global ========= section index feautures ========= section
 * companies ========= section feautures ========= section feautures2 =========
 * section works ========= section team ========= section works2 =========
 * section works3 ========= section testimonials ========= section testimonial2
 * ========= section testimonial3 ========= section testimonial4 =========
 * section About ========= section blog ========= section talk ========= section
 * video ========= section Plans ========= section counter ========= section
 * services ========= section services 2 ========= section services 3 =========
 * section contact ========= section jobs ========= section trial
 * =============================================== **
 */

.section {
  /* ========================= ======= Global =========================== */
  z-index  : 0;
  position : relative;
}

.section .section-head {
  width         : 100%;
  margin-bottom : 60px;
}

.section .section-subtitle {
  margin-bottom : 15px;
  color         : var(--color-secondary);
}

.section .section-subtitle.is-center {
  max-width    : auto;
  margin-right : auto;
  margin-left  : auto;
  text-align   : center;
}

.section .section-title {
  position       : relative;
  max-width      : 40rem;
  color          : #000000;
  overflow       : hidden;
  text-align     : left;
  text-transform : capitalize;
  font-size      : 48px;
}

@media
  screen
  and (max-width : 992px) {
  .section .section-title {
    font-size : 40px;
  }
}

@media
  screen
  and (max-width : 768px) {
  .section .section-title {
    font-size : 35px;
  }
}

@media
  screen
  and (max-width : 576px) {
  .section .section-title {
    font-size : 30px;
  }
}

.section .section-title ::before {
  content    : "";
  position   : absolute;
  top        : -10px;
  left       : 0;
  width      : 40px;
  height     : 4px;
  background : var(--color-primary);
}

.section .section-title ::after {
  content          : "";
  position         : absolute;
  top              : -10px;
  left             : 42px;
  width            : 10px;
  height           : 4px;
  background-color : #282828;
}

.section .section-title .has-line {
  position : relative;
}

.section .section-title .has-line::before {
  z-index    : 0;
  content    : "";
  position   : absolute;
  bottom     : 0.2rem;
  left       : 0;
  width      : 103%;
  height     : 0.7rem;
  opacity    : 0.2;
  background : var(--color-primary);
}

.section .section-title.is-left {
  max-width    : 30rem;
  margin-right : 0;
  margin-left  : 0;
  text-align   : left;
}

.section .section-title.is-center {
  max-width    : auto;
  max-width    : 60rem;
  margin-right : auto;
  margin-left  : auto;
  text-align   : center;
}

.section .section-title.is-center ::before {
  content    : "";
  position   : absolute;
  top        : -10px;
  left       : 50%;
  width      : 40px;
  height     : 4px;
  background : var(--color-primary);
}

.section .section-title.is-center ::after {
  content          : "";
  position         : absolute;
  top              : -10px;
  left             : 50%;
  width            : 10px;
  height           : 4px;
  background-color : #282828;
}

.section.is-lg {
  padding-top    : 140px;
  padding-bottom : 140px;
}

@media
  screen
  and (max-width : 992px) {
  .section.is-lg {
    padding-top    : 70px;
    padding-bottom : 70px;
  }
}

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

@media
  screen
  and (max-width : 576px) {
  .section.is-sm {
    padding : 60px 0;
  }
}

.section .section-title-sm {
  max-width      : 40rem;
  margin-right   : auto;
  margin-bottom  : 1.5rem;
  margin-left    : auto;
  color          : #000000;
  text-align     : center;
  text-transform : lowercase;
  font-size      : 2.5em;
  line-height    : 1.4;
}

.section .section-title-sm .has-line {
  position : relative;
}

.section .section-title-sm .has-line::before {
  z-index    : 0;
  content    : "";
  position   : absolute;
  bottom     : 0.2rem;
  left       : 0;
  width      : 103%;
  height     : 0.7rem;
  opacity    : 0.2;
  background : var(--color-primary);
}

.section .section-title-sm.is-left {
  max-width    : 30rem;
  margin-right : 0;
  margin-left  : 0;
  text-align   : left;
}

.section .section-desc {
  margin : 30px 0;
}

.section .section-desc.is-center {
  max-width  : 45rem;
  margin     : 30px auto;
  text-align : center;
}

.section .section-description {
  max-width  : 40rem;
  text-align : left;
}

.section .section-description.is-center {
  text-align : center;
}

@media
  screen
  and (max-width : 992px) {
  .section .section-description {
    margin-top : 30px;
  }
}

.section.is-dark {
  color      : #fff;
  background : #000000;
}

.section.is-dark .section-title {
  color : #fff;
}

.section .section-shape1 {
  z-index  : -1;
  position : absolute;
  top      : 0rem;
  right    : 0rem;
  height   : 100%;
}

.section .section-particle {
  z-index  : -3;
  position : absolute;
  top      : -10em;
  left     : -25em;
  width    : 50em;
  height   : 50em;
}

@media
  screen
  and (max-width : 768px) {
  .section .section-particle {
    top    : 70px;
    top    : -70px;
    left   : -10rem;
    width  : 100%;
    height : 50%;
  }
}

.section .section-shape2 {
  z-index   : -1;
  position  : absolute;
  top       : 50%;
  right     : 50%;
  width     : 100%;
  width     : 100%;
  max-width : 32rem;
  overflow  : hidden;
  transform : translate(50%, -50%);
}

@media
  screen
  and (max-width : 576px) {
  .section .section-shape2 {
    transform : translate(50%, -50%) scale(1.5);
  }
}

.section .lines {
  z-index  : -1;
  position : absolute;
  top      : 0;
  right    : 0;
}

.section.section-grey-half {
  background : var(--color-secondary);
}

.section.section-grey-half::before {
  content    : "";
  position   : absolute;
  bottom     : 0;
  width      : 100%;
  height     : 40%;
  background : rgba(255, 255, 255, 0.911);
}

.section.section-grey {
  background : #f1eff5;
}

.section.primary-bg {
  background : #3639A3;
}

.section.section-demos {
  background : white;
}

.section.section-demos .demo-wrap {
  padding       : 40px 20px;
  border-radius : 7px;
  background    : rgba(27, 170, 160, 0.08);
}

.section.section-demos .demo-item {
  margin-bottom : 40px;
}

.section.section-demos .demo-item .item-img {
  max-height    : 24rem;
  overflow      : hidden;
  border-radius : 5px;
  box-shadow    : 0 8px 12px -5px #1da99f26;
  transition    : all ease 0.3s;
}

.section.section-demos .demo-item .item-img:hover {
  opacity   : 0.9;
  transform : rotateX(-10deg) translateZ(50px);
}

.section.section-demos .demo-item .item-title {
  margin-top : 20px;
  text-align : center;
  transition : all ease 0.3s;
}

.section.section-demos .demo-item img {
  width : 100%;
}

.section.section-demos .demo-item:hover .item-title {
  color : var(--hover-primary);
}

.section.section-index-feautures {
  position         : relative;
  background-color : #2f1893;
}

.section.section-companies {
  position      : relative;
  width         : 100%;
  padding       : 4rem 2rem;
  border-radius : 10px;
}

.section.section-companies.in-header {
  bottom : -140px;
}

.section.section-companies.has-style1 {
  border     : solid 1px #c2e6e2;
  background : white;
  box-shadow : 0 60px 40px -30px rgba(37, 48, 51, 0.04),
               0 10px 50px 0 rgba(37, 48, 51, 0.06);
}

.section.section-companies.has-style1.is-dark {
  border-radius : 50rem;
  background    : #e9e9e9;
}

@media
  screen
  and (max-width : 992px) {
  .section.section-companies.has-style1.is-dark {
    border-radius : 5rem;
  }
}

@media
  screen
  and (max-width : 768px) {
  .section.section-companies.has-style1.is-dark {
    border-radius : 10px;
  }
}

.section.section-companies.has-style1 .company-item {
  display         : flex;
  justify-content : center;
}

.section.section-companies.has-style1 .company-item img {
  max-height    : 2rem;
  margin-bottom : 30px;
  transition    : 0.25s ease-in-out;
}

@media
  screen
  and (max-width : 768px) {
  .section.section-companies.has-style1 .company-item img {
    max-height : 2rem;
  }
}

@media
  screen
  and (max-width : 576px) {
  .section.section-companies.has-style1 .company-item img {
    max-height : 1.5rem;
  }
}

.section.section-companies.has-style1 .company-item img:hover {
  transform : scale(1.1);
}

@media
  screen
  and (max-width : 992px) {
  .section.section-companies.has-style1 {
    padding : 4rem 1rem;
  }

  .section.section-companies.has-style1 .company-item {
    display         : flex;
    justify-content : center;
  }
}

.section.section-feautures .feautures-boxes {
  counter-reset : feautures-box;
}

@media
  screen
  and (max-width : 992px) {
  .section.section-feautures .feautures-boxes .col-lg-4 {
    margin-bottom : 2rem;
  }

  .section.section-feautures .feautures-boxes .col-lg-4:nth-last-child(-n + 1) {
    margin-bottom : 0;
  }
}

.section.section-feautures .feautures-boxes .feautures-box {
  z-index    : 0;
  position   : relative;
  padding    : 60px 40px;
  color      : #fff;
  overflow   : hidden;
  background : #161616;
  transition : 0.25s;
  cursor     : pointer;
}

.section.section-feautures .feautures-boxes .feautures-box .title {
  color : #fff;
}

.section.section-feautures .feautures-boxes .feautures-box .desc {
  color : #fff;
}

.section.section-feautures .feautures-boxes .feautures-box::after {
  z-index  : -1;
  content  : url(../img/bg/box.png);
  position : absolute;
  top      : 0;
  right    : 0;
}

.section.section-feautures .feautures-boxes .feautures-box .title {
  margin    : 0 0 20px 0;
  font-size : 24px;
}

.section.section-feautures .feautures-boxes .feautures-box .feather {
  width        : 50px;
  height       : 50px;
  stroke       : currentColor;
  stroke-width : 2.5;
}

.section.section-feautures .feautures-boxes .feautures-box.is-active {
  color      : #fff;
  background : var(--color-primary);
}

.section.section-feautures .feautures-boxes .feautures-box.is-active .desc {
  color : #fff;
}

.section.section-feautures .feautures-boxes .feautures-box.is-active::after {
  content : none;
}

.section.section-feautures .feautures-boxes .feautures-box:hover {
  box-shadow : 0 11px 19px 0 rgba(0, 0, 0, 0.12);
  transform  : translateY(-10px);
}

.section.section-feautures .feautures-boxes .feautures-box:hover .feather {
  color : #f61d51;
}

.section.section-feautures2 {
  position   : relative;
  background : linear-gradient(
                 white,
                 rgba(27, 170, 160, 0.2)
               );
}

.section.section-feautures3 {
  background          : #efefef;
  background-position : center;
  background-size     : cover;
}

.section.section-feautures3 .feautures3-box {
  margin-bottom : 30px;
  padding       : 2rem;
  background    : #fff;
}

.section.section-feautures3 .feautures3-box .media-left {
  margin-right : 20px;
}

.section.section-feautures3 .feautures3-box .feather {
  width        : 40px;
  height       : 40px;
  stroke       : currentColor;
  stroke-width : 2.5;
}

.section.section-feautures3 .feautures3-box .title {
  margin    : 30px 0 5px 0;
  font-size : 24px;
}

.section.section-feautures3 .feautures3-box .icon {
  max-width : 4rem;
}

.section.section-portfolio .portfolio-boxes .portfolio-box {
  z-index       : 0;
  position      : relative;
  margin-bottom : 30px;
  overflow      : hidden;
  border-radius : 10px;
  transition    : all ease 0.3s;
}

.section.section-portfolio .portfolio-boxes .portfolio-box::before {
  content       : "";
  position      : absolute;
  top           : 0;
  left          : 0;
  width         : 100%;
  height        : 100%;
  border-radius : 8px;
  background    : rgba(0, 0, 0, 0.1);
  transition    : all ease 0.3s;
}

.section.section-portfolio .portfolio-boxes .portfolio-box img {
  width : 100%;
}

.section.section-portfolio .portfolio-boxes .portfolio-box .icon {
  display         : flex;
  position        : absolute;
  top             : 1rem;
  right           : 1rem;
  width           : 3rem;
  height          : 3rem;
  border-radius   : 50%;
  background      : #000;
  align-items     : center;
  justify-content : center;
}

.section.section-portfolio .portfolio-boxes .portfolio-box .icon .feather {
  width        : 20px;
  height       : 20px;
  stroke       : currentColor;
  stroke-width : 1.5;
}

.section.section-portfolio .portfolio-boxes .portfolio-box .wrap {
  z-index    : 3;
  position   : absolute;
  right      : 0;
  bottom     : 0;
  left       : 0;
  margin     : 30px;
  transform  : translate3d(0, 150%, 0);
  transition : transform 0.6s;
}

.section.section-portfolio .portfolio-boxes .portfolio-box .wrap .title {
  color : #fff;
}

.section.section-portfolio .portfolio-boxes .portfolio-box .wrap span {
  color : #fff;
}

.section.section-portfolio .portfolio-boxes .portfolio-box:hover {
  transform : rotateX(-10deg) translateZ(50px);
}

.section.section-portfolio .portfolio-boxes .portfolio-box:hover::before {
  content    : "";
  background : rgba(0, 0, 0, 0.75);
}

.section.section-portfolio .portfolio-boxes .portfolio-box:hover .wrap {
  transform : translate3d(0, 0, 0);
}

.section.section-portfolio.is-dark {
  background : #161616;
}

.section.section-clients {
  position : relative;
}

.section.section-clients .col {
  padding : 0;
}

.section.section-clients .slick-dots {
  bottom : -30px !important;
}

.section.section-clients::before {
  z-index    : -1;
  content    : "";
  position   : absolute;
  top        : 0;
  right      : 0;
  width      : 100%;
  height     : 60%;
  background : #161616;
}

.section.section-clients .section-title {
  color : #fff;
}

.section.section-clients .client-wrap {
  overflow      : hidden;
  border-radius : 5px;
  box-shadow    : 5px 10px 35px #00000014;
}

.section.section-clients .client-logo {
  height     : 20rem;
  padding    : 2rem;
  background : #282828;
}

.section.section-clients .client-logo img {
  width : 70%;
}

@media
  screen
  and (max-width : 992px) {
  .section.section-clients .client-logo {
    height : 20rem;
  }
}

.section.section-clients .client-image {
  width               : 100%;
  height              : 20rem;
  background-position : center;
  background-size     : cover;
}

@media
  screen
  and (max-width : 992px) {
  .section.section-clients .client-image {
    height : 20rem;
  }
}

.section.section-clients .client-quote {
  height     : 20rem;
  padding    : 4rem;
  color      : white;
  background : #282828;
  text-align : center;
  font-style : italic;
}

@media
  screen
  and (max-width : 992px) {
  .section.section-clients .client-quote {
    height  : auto;
    padding : 2rem;
  }
}

.section.section-clients.is-dark .client-wrap {
  box-shadow : 5px 10px 35px #070216;
}

.section.section-clients.is-dark .client-quote {
  background : #020d1f;
}

.section.section-clients.is-grad::before {
  background : #efefef;
}

.section.section-clients.is-light::before {
  background : #f3f6fc;
}

.section.section-clients.is-light .section-title {
  color : #000000;
}

.section.section-customers .customer-box {
  display        : flex;
  padding        : 30px;
  border-radius  : 10px;
  background     : #000;
  align-items    : center;
  flex-direction : column;
}

.section.section-customers .customer-box .thumb {
  margin-bottom : 30px;
}

.section.section-customers .customer-box .thumb img {
  width         : 100%;
  max-width     : 5rem;
  border-radius : 100%;
}

.section.section-customers .customer-box .name {
  margin-bottom : 20px;
  color         : #fff;
  text-align    : center;
}

.section.section-customers .customer-box .desc {
  color      : #fff;
  text-align : center;
}

.section.section-stars.is-dark {
  background : #000;
}

.section.section-stars .section-title {
  margin-bottom : 20px;
}

.section.section-stars .stars {
  margin-top : 20px;
}

.section.section-stars .stars img {
  max-height : 1rem;
}

@media
  screen
  and (max-width : 768px) {
  .section.section-stars .stars img {
    margin-bottom : 70px;
  }
}

.section.section-stars .img {
  width : 100%;
}

.team-item-wrapper .team-item {
  z-index       : 0;
  display       : flex;
  position      : relative;
  height        : 30rem;
  margin-bottom : 2rem;
  overflow      : hidden;
  align-items   : flex-end;
  transition    : 0.25s;
}

.team-item-wrapper .team-item::before {
  z-index    : -1;
  content    : "";
  position   : absolute;
  width      : 100%;
  height     : 100%;
  opacity    : 0.3;
  background : #10131a;
  transition : 0.25s;
}

.team-item-wrapper .team-item .team-img {
  z-index         : -2;
  position        : absolute;
  top             : 0;
  left            : 0;
  width           : 130%;
  height          : 100%;
  background-size : cover;
  transition      : 0.35s;
}

.team-item-wrapper .team-item .title {
  width          : 100%;
  margin-right   : 20px;
  padding        : 30px 0 30px 30px;
  color          : #fff;
  text-transform : capitalize;
  font-size      : 20px;
  line-height    : 1.4;
}

.team-item-wrapper .team-item .title a {
  color : #fff;
}

.team-item-wrapper .team-item .sub-title {
  padding        : 30px 30px 30px 0;
  color          : #e7e7e7;
  text-transform : uppercase;
  font-size      : 14px;
  line-height    : 1.8;
}

.team-item-wrapper .team-item .link {
  padding : 0 2rem 2rem;
}

.team-item-wrapper .team-item:hover::before {
  z-index    : -1;
  opacity    : 0.5;
  background : #000000;
  transform  : scale(1.1);
}

.team-item-wrapper .team-item:hover .team-img {
  width : 100%;
}

.team-item-wrapper.has-bg {
  z-index             : 0;
  position            : relative;
  background          : linear-gradient(
                          to top,
                          #fff 60%,
                          #000 40%
                        );
  background-position : center;
}

.team-item-wrapper.has-bg::after {
  z-index    : -1;
  content    : "";
  position   : absolute;
  right      : 0;
  bottom     : 0;
  width      : 100%;
  height     : 60%;
  background : #fff;
}

.team-item-wrapper .team-box {
  display         : flex;
  margin-bottom   : 30px;
  text-align      : center;
  flex-direction  : column;
  justify-content : center;
}

.team-item-wrapper .team-thumb {
  position      : relative;
  width         : 100%;
  margin-bottom : 1rem;
  overflow      : hidden;
  border-radius : 10px;
  box-shadow    : 0 18px 33px rgba(0, 0, 0, 0.078);
}

.team-item-wrapper .team-thumb img {
  width : 100%;
}

.team-item-wrapper .team-thumb::before {
  content    : "";
  position   : absolute;
  width      : 100%;
  height     : 100%;
  background : none;
  transition : 0.35s cubic-bezier(0.5, 0, 0.35, 1);
}

.team-item-wrapper .team-thumb img {
  max-width : 100%;
}

.team-item-wrapper .team-thumb .team-social {
  visibility : hidden;
  position   : absolute;
  top        : 0%;
  left       : 50%;
  width      : 100%;
  height     : 100%;
  margin     : 1rem 0 0;
  padding    : 0;
  opacity    : 0;
  transform  : translateX(-50%) scale(1.3);
  transition : 0.35s cubic-bezier(0.5, 0, 0.35, 1);
}

.team-item-wrapper .team-thumb .team-social li {
  margin : 0 0.5rem;
}

.team-item-wrapper .team-thumb .team-social li a {
  color : #ffffff;
}

.team-item-wrapper .team-thumb .team-social li svg {
  color : #ffffff;
}

.team-item-wrapper .team-thumb:hover .team-social {
  visibility : visible;
  opacity    : 1;
  transform  : translateX(-50%) scale(1);
}

.team-item-wrapper .team-thumb:hover::before {
  content    : "";
  position   : absolute;
  width      : 100%;
  height     : 100%;
  background : rgba(0, 0, 0, 0.26);
}

.team-item-wrapper .team-name {
  text-transform : capitalize;
}

.section-works2 {
  z-index             : 0;
  position            : relative;
  background-position : center;
}

.section-works2 .work3-box {
  z-index       : 0;
  position      : relative;
  margin-bottom : 2rem;
  overflow      : hidden;
  overflow      : hidden;
  transition    : 0.25s;
}

.section-works2 .work3-box::before {
  z-index    : 1;
  content    : "";
  position   : absolute;
  width      : 100%;
  height     : 100%;
  opacity    : 0;
  background : var(--color-primary);
  transition : 0.25s;
  transition : 0.25s;
}

.section-works2 .work3-box .work3-head {
  z-index    : 3;
  position   : absolute;
  right      : 0;
  bottom     : 0;
  left       : 0;
  margin     : 30px;
  transform  : translate3d(0, 150%, 0);
  transition : transform 0.6s;
}

.section-works2 .work3-box .work3-head .title a {
  color     : white;
  font-size : 24px;
}

.section-works2 .work3-box .work3-head span {
  color          : #fff;
  text-transform : uppercase;
  font-size      : 15px;
}

.section-works2 .work3-box .work3-img {
  z-index    : 0;
  position   : relative;
  width      : 100%;
  transition : 0.25s;
}

.section-works2 .work3-box:hover::before {
  opacity : 0.6;
}

.section-works2 .work3-box:hover .work3-head {
  transform : translate3d(0, 0, 0);
}

.section-works2 .work3-box.is-active .work3-head {
  transform : translate3d(0, 0, 0);
}

.section-works2 .work3-box.is-active::before {
  z-index    : 1;
  content    : "";
  position   : absolute;
  width      : 100%;
  height     : 100%;
  opacity    : 0.5;
  background : #000000;
  transition : 0.25s;
  transition : 0.25s;
}

.section-works .work-boxes-slick {
  margin : 0 -20px;
}

@media
  screen
  and (max-width : 768px) {
  .section-works .work-boxes-slick {
    margin : 0 0;
  }
}

.section-works .work-box {
  z-index       : 0;
  position      : relative;
  margin        : 0 20px;
  margin-bottom : 2rem;
  overflow      : hidden;
  overflow      : hidden;
  border-radius : 10px;
  box-shadow    : 0px 5px 20px 0px rgba(130, 136, 147, 0.15);
  transition    : 0.25s;
}

@media
  screen
  and (max-width : 576px) {
  .section-works .work-box {
    margin-right : 0;
    margin-left  : 0;
  }
}

.section-works .work-box::before {
  z-index    : 1;
  content    : "";
  position   : absolute;
  width      : 100%;
  height     : 100%;
  opacity    : 0;
  background : var(--color-primary);
  transition : 0.25s;
  transition : 0.25s;
}

.section-works .work-box .work-head {
  z-index    : 3;
  position   : absolute;
  right      : 0;
  bottom     : 0;
  left       : 0;
  margin     : 30px;
  transform  : translate3d(0, 150%, 0);
  transition : transform 0.6s;
}

.section-works .work-box .work-head .title,
.section-works .work-box .work-head .title a {
  color     : white;
  font-size : 24px;
}

.section-works .work-box .work-head span {
  color          : #fff;
  text-transform : uppercase;
  font-size      : 15px;
}

.section-works .work-box .work-img {
  z-index    : 0;
  position   : relative;
  width      : 100%;
  transition : 0.25s;
}

.section-works .work-box:hover::before {
  opacity : 0.6;
}

.section-works .work-box:hover .work-head {
  transform : translate3d(0, 0, 0);
}

.section-works .work-box.is-active .work-head {
  transform : translate3d(0, 0, 0);
}

.section-works .work-box.is-active::before {
  z-index    : 1;
  content    : "";
  position   : absolute;
  width      : 100%;
  height     : 100%;
  opacity    : 0.5;
  background : #000000;
  transition : 0.25s;
  transition : 0.25s;
}

.section.section-testimonial {
  z-index  : 0;
  position : relative;
  overflow : visible;
}

.section.section-testimonial .client-wrap {
  z-index             : 0;
  display             : flex;
  position            : relative;
  height              : 100%;
  padding-top         : 6rem;
  padding-bottom      : 6rem;
  padding-left        : 4rem;
  background-repeat   : no-repeat;
  background-position : center;
  background-size     : 120%;
  align-items         : center;
  flex-direction      : column;
  justify-content     : center;
}

@media
  screen
  and (max-width : 576px) {
  .section.section-testimonial .client-wrap {
    padding-left : 0;
  }
}

.section.section-testimonial .client-wrap.is-white .client {
  color : #000;
}

.section.section-testimonial .client-wrap.is-white .client-quote {
  color : #000;
}

.section.section-testimonial .client-wrap.is-white .client-name {
  color : #000;
}

.section.section-testimonial .client-wrap.is-white .client-position {
  color : #000;
}

.section.section-testimonial .stars {
  max-height : 1.2rem;
}

.section.section-testimonial .client {
  margin-top     : 40px;
  margin-bottom  : 20px;
  color          : #ffffff;
  text-transform : uppercase;
}

.section.section-testimonial .client-quote {
  max-width  : 25rem;
  color      : #fff;
  text-align : center;
}

.section.section-testimonial .client-img {
  display         : flex;
  margin-bottom   : 20px;
  border-radius   : 100%;
  justify-content : center;
}

.section.section-testimonial .client-img img {
  max-width : 5rem;
}

.section.section-testimonial .client-name {
  margin-top   : 20px;
  margin-right : 15px;
  color        : #fff;
  text-align   : center;
}

.section.section-testimonial .client-position {
  margin-top : 20px;
  color      : #fff;
}

.section .testimonial-box {
  display : flex;
}

@media
  screen
  and (max-width : 768px) {
  .section .testimonial-box {
    flex-direction : column;
  }
}

.section .testimonial-box .box-left {
  height          : inherit;
  background-size : cover;
}

.section .testimonial-box .box-left img {
  width           : 100%;
  height          : 100%;
  object-fit      : cover;
  object-position : 50% 0;
}

.section .testimonial-box .box-right {
  display        : flex;
  width          : 75%;
  padding        : 60px;
  background     : #002b44;
  flex-direction : column;
  flex-grow      : 1;
}

@media
  screen
  and (max-width : 768px) {
  .section .testimonial-box .box-right {
    width : 100%;
  }
}

.section .testimonial-box .box-right .testimonial-quote {
  display       : flex;
  margin-bottom : 60px;
  color         : white;
  text-align    : center;
  align-items   : center;
  font-size     : 1.875rem;
  flex-grow     : 1;
}

@media
  screen
  and (max-width : 992px) {
  .section .testimonial-box .box-right .testimonial-quote {
    font-size : 1.6rem;
  }
}

@media
  screen
  and (max-width : 768px) {
  .section .testimonial-box .box-right .testimonial-quote {
    font-size : 20px;
  }
}

.section .testimonial-box .box-right .logo {
  display         : flex;
  box-sizing      : content-box;
  position        : relative;
  width           : 100%;
  margin          : auto;
  overflow        : hidden;
  justify-content : center;
}

.section .testimonial-box .box-right .logo img {
  height : 2.5rem;
}

.section .testimonial-box .box-right .title {
  margin     : 30px 0;
  color      : white;
  text-align : center;
}

.section.section-testimonial2 {
  background          : #000;
  background-position : center;
}

.section.section-testimonial2 .section-title {
  color : #ffffff;
}

.section.section-testimonial2 .client-wrap {
  display         : flex;
  flex-direction  : column;
  justify-content : center;
}

.section.section-testimonial2 .client-wrap .client-img {
  display         : flex;
  margin-bottom   : 20px;
  border-radius   : 100%;
  justify-content : center;
}

.section.section-testimonial2 .client-wrap .client-img img {
  max-width : 5rem;
}

.section.section-testimonial2 .client-wrap .client-name {
  margin-bottom : 20px;
  color         : #fff;
  text-align    : center;
}

.section.section-testimonial2 .client-wrap .client-quote {
  max-width    : 40rem;
  margin-right : auto;
  margin-left  : auto;
  color        : #fff;
  text-align   : center;
  font-size    : 20px;
  font-weight  : 500;
  line-height  : 38px;
}

.section.section-testimonial3 {
  background          : #000;
  background-position : center;
}

.section.section-testimonial3 .quote {
  position : relative;
  width    : 100%;
}

.section.section-testimonial3 .quote::before {
  z-index             : 1;
  content             : url(../img/others/icon-quote-white.svg);
  position            : absolute;
  left                : 50%;
  height              : 100%;
  margin              : 0 auto;
  background-repeat   : no-repeat;
  background-position : center 0;
  transform           : translateX(-50%);
}

.section.section-testimonial3 .section-title {
  color : #ffffff;
}

.section.section-testimonial3 .client-wrap {
  display         : flex;
  padding-top     : 70px;
  flex-direction  : column;
  justify-content : center;
}

.section.section-testimonial3 .client-wrap .client-img {
  display         : flex;
  margin-bottom   : 20px;
  border-radius   : 100%;
  justify-content : center;
}

.section.section-testimonial3 .client-wrap .client-img img {
  max-width : 5rem;
}

.section.section-testimonial3 .client-wrap .client-name {
  margin-bottom : 20px;
  color         : #fff;
  text-align    : center;
}

.section.section-testimonial3 .client-wrap .client-quote {
  max-width    : 40rem;
  margin-right : auto;
  margin-left  : auto;
  color        : #fff;
  text-align   : center;
  font-size    : 20px;
  font-weight  : 500;
  line-height  : 38px;
}

.section.section-testimonial4 .quote-wrap {
  padding-top    : 80px;
  padding-right  : 60px;
  padding-bottom : 80px;
  padding-left   : 80px;
  background     : #000;
}

.section.section-testimonial4 .quote-wrap .client-img {
  margin-right  : 20px;
  overflow      : hidden;
  border-radius : 100%;
}

.section.section-testimonial4 .quote-wrap .client-img img {
  max-width : 4rem;
}

.section.section-testimonial4 .quote-wrap .client-name {
  color : #fff;
}

.section.section-testimonial4 .quote-wrap .client-position {
  color          : #a1a1a1;
  text-transform : uppercase;
  font-size      : 13px;
}

.section.section-testimonial4 .quote-wrap .client-quote {
  margin-top : 40px;
  color      : #fff;
  font-size  : 25px;
}

.section.section-testimonial4 .profile-img img {
  width : 100%;
}

.section.section-testi .element-eight {
  position      : relative;
  float         : left;
  margin-bottom : 25px;
  overflow      : hidden;
  box-shadow    : none !important;
  text-align    : left;
}

.section.section-testi .element-eight * {
  -webkit-box-sizing : border-box;
  box-sizing         : border-box;
  -webkit-transition : all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  transition         : all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.section.section-testi .element-eight img {
  width          : 70px !important;
  max-width      : 100%;
  height         : 70px;
  margin         : 30px 0 0 25px;
  border-radius  : 50% !important;
  vertical-align : middle;
}

.section.section-testi .element-eight .description {
  display          : block;
  position         : relative;
  margin-right     : 14px;
  margin-left      : 14px;
  padding-top      : 41px;
  padding-right    : 38px;
  padding-bottom   : 40px;
  padding-left     : 38px;
  color            : #5e656c;
  border           : solid 1px #c2e6e2;
  border-radius    : 5px;
  background-color : #fff;
  box-shadow       : 0px 10px 30px rgba(3, 36, 27, 0.08);
  font-weight      : 400;
  line-height      : 30px;
  line-height      : 30px;
}

.section.section-testi .element-eight .arrow {
  display      : none;
  position     : absolute;
  top          : 97%;
  left         : 0;
  width        : 0;
  height       : 0;
  margin       : 0;
  border-top   : 40px solid #fff;
  border-right : 30px solid transparent;
  border-left  : 0 solid transparent;
}

.section.section-testi .element-eight .author {
  position          : absolute;
  bottom            : 9%;
  margin            : 0;
  padding           : 0 10px 0 112px;
  color             : #16171e;
  -webkit-transform : translateY(50%);
  transform         : translateY(50%);
}

.section.section-testi .element-eight .author h5 {
  margin-bottom : 10px;
  color         : #16171e;
  font-size     : 22px;
  font-weight   : 500;
  line-height   : 28px;
}

.section.section-testi .element-eight .author p {
  margin-top : -10px;
  color      : #85868c;
  font-size  : 14px;
}

.section.section-testimonial-cards .testimonial3 h1,
.section.section-testimonial-cards .testimonial3 h2,
.section.section-testimonial-cards .testimonial3 h3,
.section.section-testimonial-cards .testimonial3 h4,
.section.section-testimonial-cards .testimonial3 h5,
.section.section-testimonial-cards .testimonial3 h6 {
  color : #3e4555;
}

.section.section-testimonial-cards .testimonial3 .font-weight-medium {
  font-weight : 500;
}

.section.section-testimonial-cards .testimonial3 .bg-light {
  background-color : #f4f8fa !important;
}

.section.section-testimonial-cards .testimonial3 .subtitle {
  color       : #8d97ad;
  line-height : 24px;
}

.section.section-testimonial-cards .testimonial3 .testi3 .card-body {
  padding : 40px;
}

.section.section-testimonial-cards .testimonial3 .testi3 h6 {
  line-height : 26px;
}

.section.section-testimonial-cards .testimonial3 .testi3 .thumb-img img {
  width : 60px;
}

.section.section-testimonial-cards .testimonial3 .testi3 .customer {
  text-transform : uppercase;
  font-size      : 14px;
  font-weight    : 500;
}

.section.section-testimonial-cards .testimonial3 .card.card-shadow {
  -webkit-box-shadow : 0px 0px 30px rgba(115, 128, 157, 0.1);
  box-shadow         : 0px 0px 30px rgba(115, 128, 157, 0.1);
}

.section.section-testimonial-cards .testimonial3 .font-10 {
  font-size : 10px;
}

.section.section-testimonial-cards .testimonial3 .text-success {
  color : #2cdd9b !important;
}

.section.section-testimonial-cards .testimonial3 .text-muted {
  color : #8d97ad !important;
}

.section.section-testimonial-cards .testimonial3 .owl-theme .owl-dots .owl-dot.active span,
.section.section-testimonial-cards .testimonial3 .owl-theme .owl-dots .owl-dot:hover span {
  background : #316ce8;
}

.section.section-about {
  position : relative;
  overflow : hidden;
}

.section.section-about .about-img {
  width : 100%;
}

.section.section-about .screen {
  width : 100%;
}

.section.section-about-us {
  overflow : hidden;
}

.section.section-about-us .section-title {
  margin-bottom : 20px;
}

.section.section-about-us .section-description {
  margin-bottom : 20px;
}

.section.section-blog .blog .blog-img {
  z-index : -1;
  width   : 100%;
}

.section.section-blog .blog .blog-wrap {
  z-index      : 2;
  position     : relative;
  margin-top   : -1rem;
  margin-right : 20px;
  margin-left  : 20px;
  padding      : 1.5rem;
  background   : #fff;
  box-shadow   : 0 8px 21px -3px rgba(0, 0, 0, 0.09);
  transition   : 0.25s;
}

.section.section-blog .blog .title a {
  color     : #000000;
  font-size : 20px;
}

.section.section-blog .blog .blog-item {
  margin-bottom : 2rem;
}

.section.section-blog .blog .blog-item:hover .blog-wrap {
  background : var(--hover-primary);
  transform  : translateY(-1rem);
}

.section.section-blog .blog .blog-item:hover .title a {
  color     : #fff;
  font-size : 20px;
}

.section.section-subscribe {
  z-index               : 0;
  position              : relative;
  background-attachment : fixed;
  background-position   : center;
  background-size       : cover;
}

.section.section-subscribe .section-desc {
  margin : 30px 0;
}

.section.section-subscribe::after {
  z-index    : -1;
  content    : "";
  position   : absolute;
  right      : 0;
  bottom     : 0;
  width      : 100%;
  height     : 100%;
  background : rgba(0, 0, 0, 0.438);
}

.section.section-talk {
  color               : #ffffff;
  background          : #202020;
  background-position : center;
}

.section.section-talk .row {
  margin : 0;
}

@media
  screen
  and (max-width : 576px) {
  .section.section-talk {
    padding-right : 15px;
    padding-left  : 15px;
  }
}

.section.section-talk .section-title {
  color : #ffffff;
}

.section.section-video {
  overflow   : hidden;
  background : #eae9ec;
}

.section.section-video .section-title {
  margin-bottom : 20px;
}

.section.section-video .section-description {
  margin-bottom : 20px;
}

.section.section-video .signature {
  max-width  : 6rem;
  margin-top : 20px;
}

.section.section-video .info {
  position : relative;
  color    : #fff;
}

@media
  screen
  and (max-width : 768px) {
  .section.section-video .info {
    padding : 70px 30px;
  }
}

@media
  screen
  and (max-width : 576px) {
  .section.section-video .info {
    padding : 70px 15px;
  }
}

.section.section-video .play-area {
  z-index       : 9;
  display       : block;
  position      : absolute;
  top           : 55%;
  left          : 51%;
  width         : 100px;
  height        : 100px;
  border-radius : 50%;
  transform     : translateX(-50%) translateY(-50%);
}

@media
  screen
  and (max-width : 992px) {
  .section.section-video .play-area {
    top       : auto;
    right     : 0;
    bottom    : 0;
    left      : auto;
    transform : translateX(0) translateY(0);
  }
}

.play-btn {
  z-index           : 0;
  display           : flex;
  display           : -webkit-box;
  display           : -ms-flexbox;
  -webkit-box-align : center;
  -webkit-box-pack  : center;
  position          : relative;
  width             : 4rem;
  height            : 4rem;
  padding           : 0.5rem;
  border-radius     : 100%;
  background        : #fff;
  align-items       : center;
  -ms-flex-align    : center;
  -ms-flex-pack     : center;
  justify-content   : center;
  cursor            : pointer;
}

.play-btn::before {
  z-index                   : -1;
  content                   : "";
  position                  : absolute;
  right                     : 50%;
  bottom                    : 50%;
  width                     : 150%;
  height                    : 150%;
  border-radius             : 100%;
  background                : rgba(255, 255, 255, 0.301);
  animation-duration        : 2s;
  animation-iteration-count : infinite;
  animation-name            : anim2;
  animation-timing-function : cubic-bezier(0, 0, 0.41, 1.87);
  transform                 : translate(50%, 50%);
}

.section.section-video .video {
  position        : relative;
  position        : absolute;
  top             : 0;
  right           : 0;
  width           : 100%;
  width           : 50%;
  height          : 30rem;
  height          : 100%;
  overflow        : hidden;
  background      : transparent;
  background-size : cover;
}

@media
  screen
  and (max-width : 992px) {
  .section.section-video .video {
    display : none;
  }
}

.section.section-video .video.is-grad2::before {
  content    : "";
  position   : absolute;
  width      : 100%;
  height     : 100%;
  opacity    : 0.8;
  background : linear-gradient(
                 to top right,
                 #450b7c,
                 #563cc9,
                 #49e9fb
               );
}

.section.section-video .video img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
}

@media
  screen
  and (max-width : 768px) {
  .section.section-video .video img {
    width  : 100%;
    height : auto;
  }
}

.section.section-testimonial5 {
  overflow : hidden;
}

.section.section-testimonial5 .section-title {
  margin-bottom : 30px;
}

.section.section-testimonial5 .section-description {
  margin-bottom : 30px;
  color         : #fff;
}

.section.section-testimonial5 .info {
  padding : 140px 7em 140px 6.5em;
  color   : #fff;
}

@media
  screen
  and (max-width : 768px) {
  .section.section-testimonial5 .info {
    padding : 70px 30px;
  }
}

@media
  screen
  and (max-width : 576px) {
  .section.section-testimonial5 .info {
    padding : 70px 15px;
  }
}

.section.section-testimonial5 .video {
  overflow      : hidden;
  border-radius : 0 20px 20px 0;
}

.section.section-testimonial5 .video img {
  height : 100%;
}

@media
  screen
  and (max-width : 768px) {
  .section.section-testimonial5 .video img {
    width  : 100%;
    height : auto;
  }
}

.section.section-testimonial5 .image img {
  width         : 5rem;
  margin-top    : 30px;
  margin-right  : 10px;
  border-radius : 100%;
}

.section.section-testimonial5 .client-quote {
  color     : #fff;
  font-size : 30px;
}

.section.section-testimonial5 .media-content {
  margin-top : 30px;
}

.section.section-plans {
  position : relative;
}

.section.section-plans .is-dark-green {
  color      : white !important;
  background : #002b44 !important;
}

.section.section-plans .is-dark-green .plan-title {
  color : white !important;
}

.section.section-plans .is-dark-green .item {
  color : white !important;
}

.section.section-plans .pricing-toggle {
  float         : right;
  margin-bottom : 20px;
  text-align    : right;
}

.section.section-plans f .pricing-toggle span {
  color          : #59c894;
  text-transform : uppercase;
  font-weight    : 500;
}

.section.section-plans .pricing-toggle svg {
  position          : relative;
  top               : 15px;
  margin-right      : 15px;
  fill              : #59c894;
  -o-transform      : rotate(20deg);
  -webkit-transform : rotate(20deg);
  transform         : rotate(20deg);
}

.section.section-plans .pricing-toggle .pricing-switch {
  margin-top  : 20px;
  color       : #000;
  line-height : 34px;
}

.section.section-plans .pricing-toggle .pricing-switch .switch {
  margin : 0 10px;
}

.section.section-plans .slider {
  top              : 0;
  right            : 0;
  bottom           : 0;
  left             : 0;
  background-color : #3d8aed;
  cursor           : pointer;
}

.section.section-plans .slider,
.section.section-plans .slider:before {
  position           : absolute;
  -o-transition      : 0.4s;
  -webkit-transition : 0.4s;
  transition         : 0.4s;
}

.section.section-plans .slider:before {
  content          : "";
  bottom           : 4px;
  left             : 4px;
  width            : 26px;
  height           : 26px;
  background-color : #fff;
}

.section.section-plans input:checked + .slider {
  background-color : var(--color-secondary);
}

.section.section-plans input:checked + .slider:before {
  -o-transform      : translateX(26px);
  -webkit-transform : translateX(26px);
  transform         : translateX(26px);
}

.section.section-plans .slider.round {
  border-radius : 34px;
}

.section.section-plans .slider.round:before {
  border-radius : 50%;
}

.section.section-plans .swith-plan {
  margin-bottom : 40px;
}

.section.section-plans .switch input {
  width   : 0;
  height  : 0;
  opacity : 0;
}

.section.section-plans .rounded-underline {
  position        : relative;
  text-decoration : none;
}

.section.section-plans .rounded-underline:before {
  content       : "";
  position      : absolute;
  bottom        : 0;
  width         : 100%;
  height        : 6px;
  border-radius : 3px;
}

@media
  (max-width : 991.98px) {
  .section.section-plans .rounded-underline:before {
    display : none;
  }
}

.section.section-plans .in-right {
  transform : translateX(-30px);
}

@media
  screen
  and (max-width : 992px) {
  .section.section-plans .in-right {
    transform : none;
  }
}

.section.section-plans .in-left {
  z-index   : -1;
  position  : relative;
  transform : translateX(30px);
}

@media
  screen
  and (max-width : 992px) {
  .section.section-plans .in-left {
    transform : none;
  }
}

.section.section-plans .plan-item {
  position      : relative;
  border-radius : 0.5rem;
  background    : #EFEFFF;
}

.section.section-plans .plan-item .best-choose {
  position      : absolute;
  top           : -2rem;
  left          : 50%;
  padding       : 5px 20px;
  color         : var(--color-secondary);
  border-radius : 5px 5px 0 0;
  background    : #e4f1f1;
  text-align    : center;
  font-size     : 15px;
  transform     : translateX(-50%);
}

@media
  screen
  and (max-width : 992px) {
  .section.section-plans .plan-item {
    margin-bottom : 2rem;
  }
}

.section.section-plans .plan-item .plan-head {
  padding : 2rem 2rem 0;
}

.section.section-plans .plan-item .billed {
  margin-bottom : 20px;
}

.section.section-plans .plan-item .plan-title {
  color       : #000000;
  font-family : "SpaceGrotesk-Bold";
  font-size   : 26px;
}

.section.section-plans .plan-item .plan-desc {
  margin : 20px 0;
}

.section.section-plans .plan-item .price-var {
  margin-right : 0.5rem;
  color        : #81838a;
}

.section.section-plans .plan-item .plan-price {
  margin-bottom : 20px;
  font-size     : 3rem;
  line-height   : 100%;
}

@media
  screen
  and (max-width : 768px) {
  .section.section-plans .plan-item .plan-price {
    font-size : 2.5rem;
  }
}

.section.section-plans .plan-item .list-items {
  margin-bottom : 1rem;
  margin-left   : 0;
  padding       : 0;
}

.section.section-plans .plan-item .list-items .item {
  display       : flex;
  margin-bottom : 1rem;
  color         : #828893;
  align-items   : center;
}

.section.section-plans .plan-item .list-items .item ion-icon {
  margin-right  : 10px;
  padding       : 2px;
  color         : #fff;
  border-radius : 50%;
  background    : #75E8F0;
}

.section.section-plans .plan-item .list-items .item img {
  margin-right : 10px;
  padding      : 2px;
  color        : #fff;
}

.section.section-plans .plan-item.is-active {
  z-index          : 3;
  position         : relative;
  color            : #000000;
  border           : solid 17px #21a09a24;
  background-color : white;
}

.section.section-plans .plan-item.is-grad1 {
  background : linear-gradient(
                 45deg,
                 #231F73,
                 #D72F86
               );
}

.section.section-plans .plan-item.is-grad1 .plan-title {
  color : #fff;
}

.section.section-plans .plan-item.is-grad1 .price-var {
  color : #fff;
}

.section.section-plans .plan-item.is-grad1 .plan-price {
  color : #fff;
}

.section.section-plans .plan-item.is-grad1 .list-items {
  color : #fff;
}

.section.section-plans .plan-item.is-grad1 .list-items .item {
  color : #fff;
}

.section.section-plans .plan-item.is-grad1 .list-items .item ion-icon {
  color : #fff;
}

.section.section-plans .plan-item.is-dark {
  background : #3639A3;
}

.section.section-plans .plan-item.is-dark .plan-title {
  color : #fff;
}

.section.section-plans .plan-item.is-dark .price-var {
  color : #fff;
}

.section.section-plans .plan-item.is-dark .plan-price {
  color : #fff;
}

.section.section-plans .plan-item.is-dark .list-items {
  color : #fff;
}

.section.section-plans .plan-item.is-dark .list-items .item {
  color : #fff;
}

.section.section-plans .plan-item.is-dark .list-items .item ion-icon {
  color : #fff;
}

.section.section-plans .plan-item .plan-body {
  padding : 40px;
}

.section.section-plans .plan-item.has-style1 {
  border     : solid 1px #c2e6e2;
  background : #fff;
  box-shadow : 0 15px 25px 0 rgba(0, 0, 0, 0.06);
}

.section.section-counter {
  overflow : hidden;
}

.section.section-counter .counters {
  margin-top : 70px;
}

.section.section-counter .counter-item {
  padding       : 20px;
  border-radius : 10px;
  transition    : 0.25s;
  transition    : 0.2s cubic-bezier(0.5, 0, 0.35, 1);
  cursor        : default;
}

.section.section-counter .counter-item:hover {
  border-radius : 10px;
  box-shadow    : 0 14px 33px -3px rgba(0, 0, 0, 0.098);
}

.section.section-counter .counter-item .counter-number {
  text-align : center;
  font-size  : 30px;
}

@media
  screen
  and (max-width : 768px) {
  .section.section-counter .counter-item .counter-number {
    font-size : 20px;
  }
}

.section.section-counter .counter-item .counter-name {
  color      : var(--color-primary);
  text-align : center;
}

.section.section-services .section-title {
  max-width     : 30rem;
  margin-bottom : 30px;
  margin-left   : 0;
}

.section.section-services .section-description {
  max-width     : 30rem;
  margin-bottom : 30px;
  margin-left   : 0;
}

.section.section-services .service-img {
  overflow      : hidden;
  border-radius : 5px;
  box-shadow    : 0 10px 20px rgba(0, 0, 0, 0.2);
}

.section.section-services .service-img img {
  width : 100%;
}

.section.section-services2 {
  background : #f3f3f3;
}

.section.section-services2 .section-title {
  margin-bottom : 30px;
}

.section.section-services2 .read-more {
  margin-top : 30px;
}

@media
  screen
  and (max-width : 768px) {
  .section.section-services2 .read-more {
    margin : 30px 0;
  }
}

.section.section-services2 .list-group {
  margin-top : 30px;
}

.section.section-services2 .list-group .list-group-item {
  position     : relative;
  margin       : 0px 0px 10px 20px;
  padding      : 0;
  padding-left : 20px;
  border       : none;
  background   : transparent;
}

.section.section-services2 .list-group .list-group-item::before {
  content          : "";
  position         : absolute;
  top              : 10px;
  left             : 0;
  width            : 7px;
  height           : 7px;
  border-radius    : 100%;
  background-color : var(--color-primary);
}

.section.section-services2 .img-box {
  z-index          : 1;
  box-sizing       : content-box;
  position         : relative;
  margin-top       : 0;
  margin-left      : 55px;
  padding          : 14%;
  background-color : #fff;
  box-shadow       : 0 28px 50px rgba(77, 91, 120, 0.15);
}

.section.section-services2 .img-box.has-padding0 {
  margin-right : 55px;
  margin-left  : 0;
}

@media
  screen
  and (max-width : 768px) {
  .section.section-services2 .img-box {
    margin-right : 0 !important;
    margin-left  : 0;
  }
}

.section.section-services2 .img-box img {
  width : 100%;
}

.section.section-services2 .exp-box {
  display        : flex;
  align-items    : center;
  align-items    : center;
  flex-direction : row;
}

.section.section-services2 span.exp-year {
  color       : var(--color-primary);
  font-size   : 100px;
  font-weight : 900;
}

.section.section-services2 span.exp-text {
  width       : 100px;
  max-width   : 100px;
  margin-left : 20px;
  color       : #000000;
  font-size   : 20px;
}

.section.section-services2 .services2-boxes {
  margin-top : 140px;
}

@media
  screen
  and (max-width : 768px) {
  .section.section-services2 .services2-boxes {
    margin-top : 70px;
  }
}

.section.section-services2 .services2-box {
  padding    : 40px 25px 40px 25px;
  transition : 0.25;
}

.section.section-services2 .services2-box .feather {
  width        : 40px;
  height       : 40px;
  stroke       : currentColor;
  stroke-width : 1.5;
}

.section.section-services2 .services2-box.is-active {
  border-top : solid 2px var(--color-primary);
  background : #ffff;
  box-shadow : 0 28px 50px rgba(77, 91, 120, 0.15);
}

.section.section-services2 .services2-box.is-active p {
  color : #282828;
}

.section.section-services2 .services2-box:hover {
  transform : translateY(-5px);
}

.section.section-services2 .services2-box:hover .feather {
  color : #000000;
}

.section.section-services2 .services2-box .title {
  margin      : 0px 0px 20px 0px;
  font-size   : 20px;
  line-height : 28px;
}

.service-boxes .service-box {
  position      : relative;
  padding       : 30px;
  overflow      : hidden;
  border        : solid 1px #f3f3f3;
  background    : white;
}

.service-boxes .service-box .feather {
  position     : absolute;
  top          : 50%;
  right        : -15px;
  width        : 50px;
  height       : 50px;
  color        : var(--color-secondary);
  stroke-width : 1.5;
  transform    : translateY(-50%);
  transition   : 0.25s;
  font-size    : 40px;
}
.service-boxes .service-box .feather svg{
  width        : 100%;
  height        : 100%;
}

.service-boxes .service-box:hover .feather {
  right : 15px;
}

.service-boxes .service-box.is-active {
  color      : white;
  background : #002b44;
}

.service-boxes .service-box.is-active h5 {
  color : white;
}

.service-boxes .service-box.has-style2 {
  color         : #fff;
  border        : none;
  border-radius : 10rem;
  background    : #161616;
}

.service-boxes .service-box.has-style2.is-active {
  border     : solid 1px #161616;
  background : #000;
}

.service-boxes .service-box.has-style2 .title {
  color : #fff;
}

.section.section-contact {
  z-index           : 0;
  position          : relative;
  width             : 100%;
  background-color  : #ffffff;
  background-repeat : no-repeat;
  background-size   : cover;
}

.section.section-contact .contact-form {
  position      : relative;
  width         : 100%;
  height        : auto;
  padding       : 60px;
  border-radius : 10px;
  background    : #fff;
  box-shadow    : 0 0 0 #ffff;
  box-shadow    : 0 17px 43px #e1e4e5;
}

@media
  screen
  and (max-width : 576px) {
  .section.section-contact .contact-form {
    padding : 25px 15px;
  }
}

.section.section-contact .feather {
  width        : 20px;
  height       : 20px;
  stroke       : currentColor;
  stroke-width : 1.5;
}

.section.section-contact .contact-info-list-item {
  display       : flex;
  margin-bottom : 30px;
  overflow      : hidden;
}

.section.section-contact .contact-info-list-item p {
  color       : #c1c1c1;
  font-size   : 16px;
  font-weight : 400;
}

.section.section-contact .contact-info-list-item h3 {
  margin-top  : 5px;
  color       : #fff;
  font-size   : 25px;
  font-weight : 900;
}

.section.section-contact .contact-info-list-item.pdt-50:last-child span {
  margin-right : 50px;
}

.section.section-contact h4.contact-heading {
  margin-bottom : -40px;
  border-bottom : 1px solid #ddd;
}

.section.section-map {
  background-color : #ffffff;
}

.section .items-contact .col-lg-12 {
  padding : 0;
}

.section .items-contact .contact-item {
  margin        : 0 0 2rem;
  padding       : 20px 30px;
  border-radius : 10px;
  background    : #ffffff;
  box-shadow    : 0 60px 120px rgba(150, 155, 187, 0.2);
}

.section .items-contact .contact-item h6 {
  position      : relative;
  margin-bottom : 0.5rem;
  padding-left  : 1.5rem;
  color         : var(--color-secondary);
  font-size     : 1.1rem;
}

.section .items-contact .contact-item h6::before {
  content       : "";
  position      : absolute;
  top           : 4px;
  left          : 0;
  width         : 1rem;
  height        : 1rem;
  border-radius : 5px 5px 5px 15px;
  background    : var(--color-secondary);
}

.section .items-contact .contact-item-info {
  font-size : 1rem;
}

.section.section-jobs .job-title {
  margin         : 0px;
  padding        : 60px 0px 30px;
  color          : #262626;
  text-transform : capitalize;
  font-size      : 24px;
  font-weight    : 400;
  line-height    : 1;
}

.job-list-item {
  display           : flex;
  -webkit-box-align : center;
  -webkit-box-pack  : justify;
  padding           : 22px 20px;
  align-items       : center;
  justify-content   : space-between;
  transition        : 0.25s;
}

.job-list-item.is-active {
  color      : #fff;
  background : var(--color-secondary);
}

.job-list-item.is-active .job-item-title {
  color : #fff;
}

.job-list-item.is-active .job-info {
  color : #fff;
}

.job-list-item.is-active .arrow {
  color : white;
}

.job-list-item .arrow {
  color : var(--color-primary);
}

.job-list-item .job-info {
  color : #000;
}

.job-list-item .job-item-title {
  color : var(--color-secondary);
}

.job-list-item:hover {
  color      : #000000;
  background : rgba(27, 170, 160, 0.08);
}

.job-list-item:hover .arrow {
  color : #000000;
}

.job-list-item:hover .job-info {
  color : #000000;
}

.job-list-item:hover .job-item-title {
  color : #000000;
}

.section.section-steps .SimpleSteps {
  display         : flex;
  position        : relative;
  max-width       : 800px;
  margin          : 0 auto;
  align-items     : top;
  justify-content : space-between;
  counter-reset   : section;
}

.section.section-steps .SimpleSteps::before {
  z-index    : 1;
  content    : "";
  position   : absolute;
  top        : 23px;
  right      : 120px;
  left       : 140px;
  height     : 1px;
  background : rgba(0, 0, 0, 0.38);
}

@media
  screen
  and (max-width : 576px) {
  .section.section-steps .SimpleSteps::before {
    display : none;
  }
}

.section.section-steps .SimpleSteps__step {
  position   : relative;
  text-align : center;
  flex-basis : 0;
  flex-grow  : 1;
}

.section.section-steps .SimpleSteps__step::before {
  z-index           : 2;
  content           : counter(section);
  display           : block;
  position          : relative;
  width             : 3rem;
  height            : 3rem;
  margin            : 0 auto 1rem;
  color             : white;
  border-radius     : 50%;
  background        : var(--color-secondary);
  box-shadow        : 0 0 0 10px white;
  font-size         : 1.5rem;
  line-height       : 3rem;
  counter-increment : section;
}

.section.section-steps .SimpleSteps__step-content {
  font-size   : 1rem;
  font-weight : 700;
}

@media
  screen
  and (max-width : 720px) {
  .section.section-steps .SimpleSteps {
    display         : flex;
    max-width       : 100%;
    align-items     : center;
    flex-direction  : column;
    justify-content : space-between;
  }
}

@media
  screen
  and (max-width : 720px) {
  .section.section-steps .SimpleSteps__step {
    margin-bottom : 50px;
  }
}

@media
  screen
  and (max-width : 720px) {
  .section.section-steps .SimpleSteps__step::after {
    z-index    : 1;
    content    : "";
    display    : inline;
    position   : absolute;
    bottom     : -78px;
    left       : 50%;
    width      : 1px;
    height     : 70px;
    background : rgba(0, 0, 0, 0.38);
    transform  : translateX(-50%);
  }
}

@media
  screen
  and (max-width : 720px) {
  .section.section-steps .SimpleSteps__step:last-child::after {
    display : none;
  }
}

.section .SimpleSteps__step:last-child {
  margin-bottom : 0;
}

.section.section-trial .free-box {
  position      : relative;
  padding       : 4rem;
  color         : #fff;
  overflow      : hidden;
  border-radius : 5px;
  background    : #161616;
}

.section.section-trial .free-box::before {
  content   : url(../img/bg/shape.png);
  position  : absolute;
  right     : -158px;
  bottom    : -71px;
  transform : scale(0.5);
}

.section.section-trial .free-box .title {
  margin-bottom : 20px;
  color         : #fff;
}

.section.section-trial .free-box .desc {
  margin-bottom : 20px;
}

.section.section-trial .plan-boxes {
  margin-top : 70px;
}

.section.section-trial .plan-boxes .plan-box {
  margin-bottom : 30px;
  padding       : 2rem;
  border-radius : 0.5rem;
  background    : #efefef;
}

.section.section-trial .plan-boxes .plan-box .plan-title {
  margin-bottom : 20px;
}

.section.section-trial .plan-boxes .plan-box .plan-desc {
  margin-bottom : 20px;
}

.section.section-trial .plan-boxes .plan-box .plan-price-wrap {
  display       : flex;
  margin-bottom : 20px;
  align-items   : start;
}

.section.section-trial .plan-boxes .plan-box .plan-price-wrap .price-title {
  margin-right : 5px;
  font-size    : 30px;
}

.section.section-trial .plan-boxes .plan-box.is-active {
  color      : #fff;
  background : var(--color-primary);
  box-shadow : 0 15px 17px rgba(0, 0, 0, 0.19);
}

.section.section-trial .plan-boxes .plan-box.is-active .plan-title {
  color : #fff;
}

.section.section-trial .plan-boxes .plan-box.is-active .plan-desc {
  color : #fff;
}

.section.section-trial .plan-boxes .plan-box.is-active .price-title {
  color : #fff;
}

.section.section-call2action {
  background-size : cover;
}

.section.section-call2action::before {
  content    : "";
  position   : absolute;
  top        : 0;
  width      : 100%;
  height     : 100%;
  opacity    : 0.3;
  background : #000;
}

.section.section-call2action.is-grad2::before {
  content    : "";
  position   : absolute;
  width      : 100%;
  height     : 100%;
  opacity    : 0.8;
  background : linear-gradient(
                 to top right,
                 #450b7c,
                 #563cc9,
                 #49e9fb
               );
}

/**
 * ==================================== ========= section
 *
 * help =====================================
 */

.section-help .card.in-help {
  margin-bottom : 30px;
}

.section-help .card.in-help .card-text {
  font-size : 17px;
}

.section-help .card.in-help .text-small span {
  font-size : 14px;
}

.section-help .card.in-help .ml-min {
  margin-left : -20px;
}

.section-help .card.in-help .avatars {
  display       : flex;
  margin-bottom : 0;
  padding-left  : 0;
  list-style    : none;
}

.section-help .card.in-help .avatars .avatar {
  width         : 3rem;
  height        : 3rem;
  border        : 5px solid #fff;
  border-radius : 50%;
  flex-shrink   : 0;
}

/**
 * ==================================== ========= section
 *
 * companies2 =====================================
 */

.section-companies2 {
  margin-top : 70px;
}

.section-companies2 .company-item {
  display         : flex;
  margin-bottom   : 30px;
  padding         : 30px;
  border-radius   : 50rem;
  background      : #181818;
  justify-content : center;
  transition      : 0.25s;
}

.section-companies2 .company-item:hover {
  transform : rotateX(-5deg) translateZ(50px);
}

.section-companies2 .company-item img {
  width : 70%;
}

.section-job .job-wrap {
  z-index             : 0;
  position            : relative;
  padding             : 100px;
  border-radius       : 10px;
  background-position : top;
  background-size     : cover;
}

.section-job .job-wrap::before {
  z-index       : -1;
  content       : "";
  position      : absolute;
  top           : 0;
  left          : 0;
  width         : 100%;
  height        : 100%;
  opacity       : 0.5;
  border-radius : 10px;
  background    : #000000;
}

@media
  screen
  and (max-width : 768px) {
  .section-job .job-wrap {
    padding : 60px 15px;
  }
}

.section-blog2 .card-blog {
  margin        : 0 0 2rem;
  overflow      : hidden;
  border-radius : 5px;
  background    : #ffffff;
  box-shadow    : 0 15px 29px -4px #3f49621f;
  transition    : 0.2s cubic-bezier(0, 0, 0.41, 1.87);
}

.section-blog2 .card-blog .card-blog-wrap {
  padding : 2rem;
}

.section-blog2 .card-blog .img-blog {
  width      : 100%;
  transition : 1s;
}

.section-blog2 .card-blog .title-blog {
  margin-bottom : 1rem;
  font-size     : 24px;
  transition    : 0.2s;
}

.section-blog2 .card-blog .meta-blog {
  display     : flex;
  margin-top  : 1rem;
  align-items : center;
}

.section-blog2 .card-blog .meta-blog .author {
  margin-right : 1rem;
  font-size    : 0.9rem;
}

.section-blog2 .card-blog .meta-blog .author a {
  color : var(--color-primary);
  text-transform: capitalize;
}

.section-blog2 .card-blog .meta-blog .date {
  color     : #a2a6ad;
  font-size : 0.8rem;
  margin-top: 3px;
}

.section-blog2 .card-blog:hover {
    transform: none;
}

.section-blog2 .card-blog:hover .img-blog {
  opacity : 0.9;
  filter  : blur(0.1rem);
}

.section-blog2 .card-blog:hover .title-blog {
  color : var(--hover-primary);
}

.section-blog2 .load-more {
  margin-top : 3rem;
}

.section-blog2 .load-more span {
  padding       : 1rem 2rem;
  color         : var(--color-primary);
  border-radius : 50rem;
  background    : #ffffff;
  box-shadow    : 0 15px 29px -4px #2227351f;
  transition    : 0.25s;
}

.section-blog2 .load-more span:hover {
  background : rgba(248, 78, 119, 0.05);
  box-shadow : none;
}

.section-blog2 .img-post {
  z-index       : -1;
  position      : relative;
  width         : 100%;
  border-radius : 10px;
}

.section-blog2 .content-post {
  z-index       : 1;
  position      : relative;
  margin        : -8rem 4rem 0;
  padding       : 4rem;
  overflow      : hidden;
  overflow      : hidden;
  border-radius : 10px;
  background    : #ffffff;
  box-shadow    : 0 15px 29px -4px #3f49621f;
}

@media
  screen
  and (max-width : 768px) {
  .section-blog2 .content-post {
    margin  : -2rem 1rem 0;
    padding : 1rem;
  }
}

.section-blog2 .content-post p {
  margin-bottom : 1rem;
}

.section-blog2 .content-post img {}

.section-blog2 .comments-wrap {
  margin     : 2rem 4rem 0;
  padding    : 4rem;
  background: rgb(249, 249, 249);
  /* border: 1px solid #eeeff1; */
}

@media
  screen
  and (max-width : 768px) {
  .section-blog2 .comments-wrap {
    margin  : 2rem 0 0;
    padding : 1rem;
  }
}

.section-blog2 .comments-wrap .comments-wrap-title {
  margin-bottom : 1rem;
  color         : var(--color-primary);
  font-size     : 1.3rem;
}

.blog-top {
  margin-top : -70px;
}

.blog-top .card-blog .card-blog-wrap {
  padding : 1.5rem;
}

.blog-top .card-blog .title-blog {
  font-size   : 20px;
  line-height : 1.3;
}

.section-purshase {
  background-repeat   : no-repeat;
  background-position : center;
}

.section-purshase ion-icon {
  color     : white;
  font-size : 2rem;
}

.img-screen {
  border-radius : 5px;
  box-shadow    : 0 32px 64px -8px rgba(36, 18, 77, 0.32);
}

.screen-wrap {
  position : relative;
}

.screen-wrap .deco {
  z-index   : -1;
  position  : absolute;
  bottom    : -5rem;
  left      : 50%;
  width     : 120%;
  transform : translateX(-50%);
}

.divider-wrap {
  position            : absolute;
  bottom              : 0;
  width               : 100%;
  height              : 6rem;
  background-repeat   : no-repeat;
  background-position : top;
  background-size     : cover;
}

.divider-wrap-white {
  width               : 100%;
  height              : 6rem;
  background-repeat   : no-repeat;
  background-position : top;
  background-size     : cover;
}

.divider-wrap2 {
  position            : absolute;
  top                 : 0;
  width               : 100%;
  height              : 6rem;
  background-repeat   : no-repeat;
  background-position : top;
  background-size     : cover;
}

.bg-secondary {
  background : rgba(27, 170, 160, 0.08) !important;
}

.draw {
  position : relative;
}

.draw::before {
  content           : "";
  position          : absolute;
  right             : -3rem;
  bottom            : -6px;
  width             : 100%;
  height            : 2rem;
  background-repeat : no-repeat;
}

@media
  screen
  and (max-width : 768px) {
  .draw::before {
    right           : 0rem;
    bottom          : -23px;
    background-size : contain;
  }
}

.integration {
  position : relative;
}

.integration .integration-list-left {
  display     : flex;
  height      : 100%;
  align-items : center;
}

.integration .integration-list-left li {
  display          : flex;
  min-width        : 76px;
  min-height       : 76px;
  border-radius    : 100px;
  background-color : #fff;
  box-shadow       : 0 15px 25px 0 rgba(0, 0, 0, 0.06);
  align-items      : center;
  justify-content  : center;
}

.integration .integration-list-left li img {
  width : 40px;
}

.integration .content {
  height              : 650px;
  background-repeat   : no-repeat;
  background-position : center center;
  background-size     : 100%;
}

@media
  screen
  and (max-width : 992px) {
  .integration .content {
    height  : 100%;
    padding : 60px 0;
  }
}

.integration .integration-list-left li:nth-of-type(1) {
  position   : relative;
  margin-top : -280px;
}

.integration .integration-list-left li:nth-of-type(2) {
  margin-bottom : -230px;
  margin-left   : -10px;
}

.integration .integration-list-left li:nth-of-type(3) {
  margin-top  : -40px;
  margin-left : -45px;
}

.integration .integration-list-right {
  display     : flex;
  height      : 100%;
  align-items : center;
}

.integration .integration-list-right li {
  display          : flex;
  min-width        : 76px;
  min-height       : 76px;
  border-radius    : 100px;
  background-color : #fff;
  box-shadow       : 0 15px 25px 0 rgba(0, 0, 0, 0.06);
  align-items      : center;
  justify-content  : center;
}

.integration .integration-list-right li:nth-of-type(1) {
  position      : relative;
  margin-bottom : -160px;
  margin-left   : 25px;
}

.integration .integration-list-right li img {
  width : 40px;
}

.integration .integration-list-right li:nth-of-type(3) {
  position   : relative;
  margin-top : 25px;
}

.integration .integration-list-right li:nth-of-type(2) {
  position    : relative;
  margin-top  : -180px;
  margin-left : -10px;
}

.integration .heading {
  display         : flex;
  height          : 100%;
  flex-direction  : column;
  justify-content : center;
}

@media
  screen
  and (max-width : 992px) {
  .integration-block {
    display : none;
  }
}

.bg-secondary-solid {
  background : var(--color-secondary) !important;
}

.plan-single {
  padding       : 5rem;
  border-radius : 7px;
  background    : white;
  box-shadow    : 0 14px 33px -3px rgba(0, 0, 0, 0.078);
}

@media
  screen
  and (max-width : 768px) {
  .plan-single {
    padding : 3rem;
  }
}

.plan-single .desc-plan {
  max-width    : 40rem;
  margin-right : auto;
  margin-left  : auto;
}

@media
  screen
  and (max-width : 576px) {
  .plan-single {
    padding : 2rem;
  }
}

.plan-single.top-header {
  margin-top : -4rem;
}

.plan-single .box {
  box-shadow : 0 14px 33px -3px rgba(0, 0, 0, 0.078);
}

.plan-single .title {
  margin-bottom : 40px;
  text-align    : center;
  font-size     : 25px;
}

.plan-single .price {
  text-align : center;
  font-size  : 6.25rem;
}

.plan-single .width {
  display         : flex;
  width           : 100%;
  justify-content : center;
}

.plan-single .bg-points {
  background-size : contain;
}

.plan-single .billed {
  margin-bottom : 20px;
}

.plan-single .pricing {
  font-size : 35px;
}

.plan-single .list-title {
  margin-bottom : 20px;
}

.plan-single .list__pricing {
  margin-bottom : 30px;
  color         : #4e5867;
  font-size     : 1rem;
  font-weight   : 500;
  line-height   : 1.625rem;
}

.plan-single .list {
  margin-top : 40px;
}

.plan-single .paragraph {
  color      : rgba(27, 170, 160, 0.7);
  text-align : center;
  font-size  : 13px;
}

.pricing-table {
  padding-bottom : 30px;
  overflow       : auto;
  border-radius  : 5px;
  background     : #002b44;
}

.pricing-table table {
  display : block;
}

.pricing-table table thead {
  display : block;
}

.pricing-table table thead tr {
  display : block;
}

.pricing-table table thead tr .sin-title-box {
  height         : 60px;
  padding        : 0 20px;
  color          : #ffffff;
  font-size      : 18px;
  font-weight    : 700;
  letter-spacing : -0.56px;
}

.pricing-table table tbody {
  display : block;
}

.pricing-table table tbody tr {
  display : block;
}

.pricing-table table .title-col {
  min-width : 290px;
}

.pricing-table table .basic-col {
  min-width : 195px;
}

.pricing-table table .standard-col {
  min-width : 195px;
}

.pricing-table table .premium-col {
  min-width : 195px;
}

.pricing-table table .ent-col {
  min-width : 195px;
}

.pricing-table table .colored-row {
  width      : initial;
  border-top : 2px solid #002b44;
  background : #24475d;
}

.pricing-table table .colored-row:first-child {
  border-top : 0;
}

.pricing-table table .colored-row:first-child .sin-box:before {
  top    : auto;
  bottom : 0;
  height : 100%;
}

.pricing-table table .colored-row .sin-box {
  position       : relative;
  height         : 65px;
  padding        : 0 20px;
  color          : #d8d8d8;
  background     : #24475d;
  font-size      : 18px;
  font-weight    : 300;
  letter-spacing : -0.56px;
}

.pricing-table table .colored-row .sin-box:before {
  content    : "";
  position   : absolute;
  top        : 0;
  left       : 0;
  width      : 1px;
  height     : 100%;
  background : #002b44;
}

.pricing-table table .colored-row .sin-box.title-col {
  color       : #ffffff;
  font-weight : 700;
}

.pricing-table table .colored-row .sin-box .table-icon {
  font-size : 20px;
}

.pricing-table table .colored-row .sin-box .table-icon.neg {
  color : #f04037;
}

.pricing-table table .colored-row .sin-box .table-icon.pos {
  color : #67d216;
}

.pricing-table table .price-widget-block {
  margin-top   : 50px;
  padding-left : 22px;
}

.pricing-table table .price-widget-block .title {
  padding-bottom : 5px;
  color          : #ffffff;
  font-size      : 21px;
  font-weight    : 700;
  letter-spacing : -0.66px;
}

.pricing-table table .price-widget-block .subtitle {
  padding-bottom : 26px;
  color          : #9c9aaa;
  font-size      : 13px;
  font-weight    : 300;
  letter-spacing : -0.46px;
}

.pricing-table table .price-widget-block .btn {
  display          : inline-flex;
  width            : 167px;
  height           : 50px;
  margin-bottom    : 50px;
  color            : white;
  border-radius    : 5px;
  background-color : var(--color-secondary);
  align-items      : center;
  font-size        : 18px;
  font-weight      : 500;
  justify-content  : center;
  letter-spacing   : -0.56px;
}

.pricing-table table .price-widget-block .btn:hover {
  color            : white;
  background-color : var(--hover-secondary);
}

.bg-dark {
  background : #002b44 !important;
}

.is-dark-green {
  background : #002c44;
}

.footer {
  margin     : 0;
  overflow-y : visible !important;
}

.footer .draw1 {
  display  : inline;
  position : relative;
}

.footer .draw1::before {
  content           : "";
  position          : absolute;
  top               : auto;
  right             : -5px;
  bottom            : -14px;
  left              : auto;
  width             : 100%;
  height            : 2rem;
  background-color  : transparent;
  background-repeat : no-repeat;
  background-size   : contain;
}

.footer .copyright {
  color     : #595b5d;
  font-size : 1rem;
}

.footer .footer-shape {
  z-index   : 0;
  position  : absolute;
  top       : 0rem;
  right     : -5rem;
  height    : 100%;
  transform : scale(0.5);
}

.footer .footer-shape-top {
  z-index   : 0;
  position  : absolute;
  top       : -2rem;
  left      : -5rem;
  height    : 100%;
  transform : scale(0.8);
}

.footer {
  color : #000000;
}

.footer.in-index {
  padding : 1rem 0 1rem;
}

.footer.has-style1 .footer-head {
  position   : relative;
  background : rgba(27, 170, 160, 0.2);
}

.footer.has-style1 .footer-head.is-dark {
  background : #202020;
}

.footer.has-style1 .footer-head .to-top {
  z-index         : 9;
  display         : flex;
  position        : absolute;
  top             : -2rem;
  left            : 50%;
  width           : 4rem;
  height          : 4rem;
  opacity         : 1 !important;
  border          : solid 5px #fff;
  border-radius   : 50%;
  background      : var(--color-secondary);
  align-items     : center;
  justify-content : center;
  transform       : translateX(-50%);
  cursor          : pointer;
}

.footer.has-style1 .footer-head .to-top:hover {
  opacity    : 1;
  background : var(--hover-primary) !important;
}

.footer.has-style1 .footer-head .to-top ion-icon {
  color : #ffff;
}

.footer.has-style1 .footer-body {
  background : #062624;
}

.footer.has-style2 .footer-head {
  position   : relative;
  background : #0e132c;
}

.footer.has-style2 .footer-head .to-top {
  z-index         : 9;
  display         : flex;
  position        : absolute;
  top             : -2rem;
  left            : 50%;
  width           : 4rem;
  height          : 4rem;
  opacity         : 1 !important;
  border          : solid 5px #fff;
  border-radius   : 50%;
  background      : var(--color-primary);
  align-items     : center;
  justify-content : center;
  transform       : translateX(-50%);
  cursor          : pointer;
}

.footer.has-style2 .footer-head .to-top:hover {
  opacity    : 1;
  background : var(--hover-primary) !important;
}

.footer.has-style2 .footer-head .to-top ion-icon {
  color : #ffff;
}

.footer.has-style2 .footer-body {
  background : #0e132c;
}

.footer.is-light {
  color      : #000000;
  background : #fff;
}

.footer.is-light .footer-body {
  color      : #000000;
  background : #fff;
}

.footer.is-light .footer-body p {
  color : #000000;
}

.footer.is-light .footer-body .list-title {
  color : #000000;
}

.footer.is-light .footer-body .list-title::before {
  color      : #000000;
  background : #000;
}

.footer.is-light .footer-body .list-items {
  color : #000000;
}

.footer.is-light .footer-body .list-items li a {
  color : #000000;
}

.footer.is-light .footer-body .copyright p {
  color : #000000;
}

.footer .footer-body {
  padding    : 70px 0 35px;
  overflow   : hidden;
  background : #303290;
}

.footer .social-footer {
  margin-top : 1rem;
}

.footer .social-footer a ion-icon {
  font-size : 25px;
}

.footer .footer-desc {
  margin-bottom : 2rem;
}

.footer .footer-desc .logo {
  margin-bottom : 2rem;
}

.footer .footer-desc .logo img {
  height : 2rem;
}

.footer .footer-desc p {
  max-width : 20rem;
  color     : #fff;
  font-size : 1rem;
}

.footer .list-title {
  position      : relative;
  margin-bottom : 2rem;
  padding-left  : 1.5rem;
  color         : #fff;
  font-size     : 1.1rem;
}

.footer .list-title::before {
  content       : "";
  position      : absolute;
  top           : 4px;
  left          : 0;
  width         : 1rem;
  height        : 1rem;
  border-radius : 5px 5px 5px 15px;
  background    : #fff;
}

.footer .list-items {
  margin-bottom : 2rem;
  color         : #fff;
}

.footer .list-items li {
  margin-bottom : 1rem;
}

.footer .list-items li a {
  color     : #c5c5c5;
  font-size : 1rem;
}

.footer .copyright {
  margin-top : 35px;
}

.footer .copyright p {
  margin    : 0;
  padding   : 2rem 0 2rem;
  color     : #a5a5a5;
  font-size : 1rem;
}

.footer .contact-item {
  margin-bottom : 2rem;
}

.footer .contact-item h6 {
  position      : relative;
  width         : fit-content;
  margin-bottom : 0.5rem;
  font-size     : 1.1rem;
}

.footer .contact-item h6::before {
  background : var(--color-primary);
}

.footer .contact-item div {
  content             : "";
  position            : absolute;
  top                 : 50%;
  top                 : 60%;
  right               : -1.5em;
  right               : -1.944rem;
  width               : 1em;
  width               : 3rem;
  height              : 60%;
  background-repeat   : no-repeat;
  background-position : center;
  background-size     : contain;
  -webkit-transform   : translate(0, -50%);
  transform           : translate(0, -50%);
}

.footer form {
  position      : relative;
  width         : 100%;
  max-width     : 30rem;
  height        : 4rem;
  margin-bottom : 4rem;
  border-radius : 50rem;
  background    : #fff;
  transition    : 0.2s;
}

@media
  screen
  and (max-width : 576px) {
  .footer form {
    height         : fit-content;
    padding-bottom : 1rem;
    background     : transparent;
  }
}

.divider {
  position       : relative;
  width          : 100%;
  height         : 5vw;
  pointer-events : none;
}

.footer-index {
  padding         : 2rem 0;
  background-size : cover;
}

.footer-index img {
  max-height : 2rem;
}

.footer-index .links a {
  margin-right   : 2rem;
  font-family    : "SpaceGrotesk-Bold";
  font-size      : 14px;
  letter-spacing : 2px;
}

.footer-index a {
  color : #fff;
}

/* ========================= ======= Blog =========================== */

.widget-title {
  color : var(--color-secondary);
}

.post-wrap {
    margin-left: 20px;
    -ms-grid-column: 20px;
    margin-top: 50px;
}
.post-wrap .post-img {
  z-index        : 0;
  position       : relative;
  overflow       : hidden;
  border-radius  : 10px;
  box-shadow     : 0px 5px 15px 0px rgba(130, 136, 147, 0.1);
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-direction : column;
}

.post-wrap .post-img::after {
  content          : "";
  position         : absolute;
  top              : 0px;
  right            : 0px;
  bottom           : 0;
  left             : 0px;
  color            : white;
  opacity          : 0;
  background-color : rgba(27, 170, 160, 0.8);
  text-transform   : uppercase;
  font-size        : 18px;
  font-weight      : 700;
  transition       : all 0.15s ease-in 0s;
}

.post-wrap .post-btn {
  z-index          : 1;
  color            : white;
  text-transform   : uppercase;
  font-size        : 18px;
  font-weight      : 700;
  position         : absolute;
  opacity          : 0;
  transition       : all 0.15s ease-in 0s;
}

.post-wrap .post-img:hover::after,
.post-wrap .post-img:hover .post-btn {
  opacity : 1;
}

.post-wrap .post-img img {
  width      : 100%;
  transition : .25s;
}

.post-wrap .post-content {
  position      : relative;
  margin        : 0 15px 30px;
  padding       : 0 0 30px;
  border-radius : 0 10px 10px 10px;
  background    : #fff;
}

.post-wrap .post-content .post-tag {
  display      : flex;
  margin-top   : 20px;
  margin-right : .5rem;
}

.post-wrap .post-content .post-tag .tag-item {
  padding          : 4px 18px 3px;
  color            : #fff;
  border-radius    : 2rem;
  background-color : #2e2e2e;
  text-transform   : uppercase;
  font-size        : 12px;
}

.post-wrap .post-content .post-date {
  color     : #615f6c;
  font-size : 13px;
}

.post-wrap .post-content .post-author {
  font-size : 13px;
}

.post-wrap .post-content .post-author a {
  color : var(--color-secondary);
}

.post-wrap .post-content .post-title {
  margin : 20px 0;
}

.post-wrap .post-content .post-title a {
  color      : #000;
  font-size  : 24px;
  transition : .25s;
}

.post-wrap .post-content .post-title a:hover {
  color : var(--hover-secondary);
}

.post-wrap .post-content .post-description {
  margin-bottom : 20px;
}

.post-wrap.in-first-post {
  margin-top    : 0;
  margin-bottom : 30px;
  border-bottom : 4px solid #f2f2f2;
}

.post-wrap.in-first-post .post-content {
  margin-bottom : 0;
  border-bottom : none;
}

.post-wrap.in-first-post .post-title a {
  font-size   : 30px;
  line-height : 1.4;
}

@media
  screen
  and (max-width : 576px) {
  .post-wrap.in-first-post .post-title a {
    font-size : 20px;
  }
}

.post-wrap2 {
  margin-bottom : 30px;
}

.post-wrap2 .post-img {
  z-index  : 0;
  position : relative;
  overflow : hidden;
}

.post-wrap2 .post-img img {
  width      : 100%;
  transition : .25s;
}

.post-wrap2 .post-content {
  position      : relative;
  padding       : 0 0 30px;
  border-radius : 0 10px 10px 10px;
}

.post-wrap2 .post-content .post-tag {
  display      : flex;
  margin-right : .5rem;
}

.post-wrap2 .post-content .post-tag .tag-item {
  padding        : 15px 0;
  color          : var(--color-secondary);
  color          : #646464;
  text-transform : uppercase;
  font-size      : 13px;
  font-size      : 12px;
  font-weight    : 700;
  line-height    : 1.5;
}

.post-wrap2 .post-content .post-date {
  color     : #615f6c;
  font-size : 13px;
}

.post-wrap2 .post-content .post-author {
  font-size : 13px;
}

.post-wrap2 .post-content .post-author a {
  color : var(--color-secondary);
}

.post-wrap2 .post-content .post-title {
  margin : 0 0 20px;
}

.post-wrap2 .post-content .post-title a {
  color      : #000;
  font-size  : 24px;
  transition : .25s;
}

.post-wrap2 .post-content .post-title a:hover {
  color : var(--hover-secondary);
}

.post-wrap2 .post-content .read-more {
  position : relative;
  color    : #000;
}

.post-wrap2 .post-content .read-more::before {
  content    : "";
  position   : absolute;
  bottom     : -10px;
  left       : 0;
  width      : 25%;
  height     : 2px;
  background : var(--color-secondary);
  transition : .25s;
}

.post-wrap2 .post-content .read-more:hover::before {
  width : 100%;
}

.post-wrap2 .post-content .post-description {
  margin-bottom : 20px;
}

.post-wrap2.in-first-post {
  margin-top    : 0;
  margin-bottom : 30px;
  border-bottom : 4px solid #f2f2f2;
}

.post-wrap2.in-first-post .post-content {
  margin-bottom : 0;
  border-bottom : none;
}

.post-wrap2.in-first-post .post-title a {
  font-size   : 30px;
  line-height : 1.4;
}

@media
  screen
  and (max-width : 576px) {
  .post-wrap2.in-first-post .post-title a {
    font-size : 20px;
  }
}

.post-wrap2.is-dark .post-img img {
  border-radius : 10px;
}

.post-wrap2.is-dark .post-content .post-tag .tag-item {
  color : #cacaca;
}

.post-wrap2.is-dark .post-content .post-date {
  color : #ebebeb;
}

.post-wrap2.is-dark .post-content .post-author a {
  color : var(--color-secondary);
}

.post-wrap2.is-dark .post-content .post-title a {
  color : white;
}

.post-wrap2.is-dark .post-content .post-title a:hover {
  color : var(--hover-secondary);
}

.post-wrap2.is-dark .post-content .read-more {
  color : white;
}

.post-wrap2.is-dark .post-content .post-description {
  color : white;
}

/* ========================= ======= Subscribe =========================== */

.subscribe-box {
  width      : 100%;
  padding    : 5rem;
  color      : #fff;
  background : var(--color-secondary);
}

.subscribe-box .description {
  font-family : "Avant Garde Gothic";
  font-size   : 25px;
}

.subscribe-box .span {
  margin-right : 5px;
}

.subscribe-box .btn {
  margin-bottom : .5rem;
}

/* ========================= ======= contact-boxes =========================== */

.contact-boxes .contact-box {
  margin-bottom : 30px;
  padding       : 50px 30px;
  border-bottom : solid 2px #f06;
  box-shadow    : 0 28px 50px rgba(77, 91, 120, 0.15);
}

@media
  screen
  and (max-width : 576px) {
  .contact-boxes .contact-box {
    padding : 25px 15px;
  }
}

.contact-boxes .contact-box.is-active {
  border     : none;
  background : #f3f3f3;
  box-shadow : none;
}

.contact-boxes .contact-box .title {
  margin-bottom : 20px;
  color         : var(--color-primary);
  font-size     : 20px;
}

.contact-form-wrap {
  max-width : 600px;
  margin    : auto;
}

.contact-form-wrap .contact-form {
  margin-top : 40px;
}

.mapouter {
  position      : relative;
  position      : relative;
  width         : 100%;
  width         : 100%;
  height        : 200px;
  height        : auto;
  padding       : 60px;
  border-radius : 10px;
  background    : #fff;
  box-shadow    : 0 0 0 #ffff;
  box-shadow    : 0 17px 43px #e1e4e5;
  text-align    : right;
}

.mapouter.has-style2 {
  padding    : 0;
  box-shadow : none;
}

@media
  screen
  and (max-width : 576px) {
  .mapouter {
    padding : 25px 15px;
  }
}

.mapouter iframe {
  width   : 100%;
  border  : none;
  outline : none;
}

.gmap_canvas {
  width      : 100%;
  height     : 500px;
  overflow   : hidden;
  background : none !important;
}

/* ========================= ======= progress =========================== */

.progress-work {
  margin-top : 80px;
  /**
  * This for loop creates the necessary css animation names Due to the split
  * circle of progress-left and progress right, we must use the animations on
  * each side.
  */
}

@media
  screen
  and (max-width : 992px) {
  .progress-work {
    margin-top : 70px;
  }
}

.progress-work .progress {
  position      : relative;
  width         : 200px;
  height        : 200px;
  margin        : 0 auto;
  margin-bottom : 30px;
  background    : none;
  box-shadow    : none;
  line-height   : 200px;
}

@media
  screen
  and (max-width : 992px) {
  .progress-work .progress {
    width  : 150px;
    height : 150px;
  }
}

@media
  screen
  and (max-width : 768px) {
  .progress-work .progress {
    width  : 125px;
    height : 125px;
  }
}

.progress-work .progress:after {
  content       : "";
  position      : absolute;
  top           : 0;
  left          : 0;
  width         : 100%;
  height        : 100%;
  border        : 7px solid #f3f3f3;
  border-radius : 50%;
}

.progress-work .progress > span {
  z-index  : 1;
  position : absolute;
  top      : 0;
  width    : 50%;
  height   : 100%;
  overflow : hidden;
}

.progress-work .progress .progress-left {
  left : 0;
}

.progress-work .progress .progress-bar {
  position     : absolute;
  top          : 0;
  width        : 100%;
  height       : 100%;
  border-color : var(--color-primary);
  border-width : 7px;
  border-style : solid;
  background   : none;
}

.progress-work .progress .progress-left .progress-bar {
  left                       : 100%;
  border-left                : 0;
  border-top-right-radius    : 100px;
  border-bottom-right-radius : 100px;
  -webkit-transform-origin   : center left;
  transform-origin           : center left;
}

.progress-work .progress .progress-right {
  right : 0;
}

.progress-work .progress .progress-right .progress-bar {
  left                      : -100%;
  border-right              : 0;
  border-top-left-radius    : 100px;
  border-bottom-left-radius : 100px;
  -webkit-transform-origin  : center right;
  transform-origin          : center right;
}

.progress-work .progress .progress-value {
  display         : flex;
  width           : 100%;
  height          : 100%;
  border-radius   : 50%;
  text-align      : center;
  align-items     : center;
  font-size       : 36px;
  font-weight     : bold;
  justify-content : center;
  line-height     : 20px;
}

.progress-work .progress .progress-value div {
  margin-top : 10px;
}

.progress-work .progress .progress-value span {
  text-transform : uppercase;
  font-size      : 12px;
  font-weight    : normal;
}

.progress-work.is-blue .progress-bar {
  position     : absolute;
  top          : 0;
  width        : 100%;
  height       : 100%;
  border-color : #563cc9 !important;
  border-width : 7px;
  border-style : solid;
  background   : none;
}

.progress-work .progress[data-percentage="10"] .progress-right .progress-bar {
  animation : loading-1 1.5s linear forwards;
}

.progress-work .progress[data-percentage="10"] .progress-left .progress-bar {
  animation : 0;
}

.progress-work .progress[data-percentage="20"] .progress-right .progress-bar {
  animation : loading-2 1.5s linear forwards;
}

.progress-work .progress[data-percentage="20"] .progress-left .progress-bar {
  animation : 0;
}

.progress-work .progress[data-percentage="30"] .progress-right .progress-bar {
  animation : loading-3 1.5s linear forwards;
}

.progress-work .progress[data-percentage="30"] .progress-left .progress-bar {
  animation : 0;
}

.progress-work .progress[data-percentage="40"] .progress-right .progress-bar {
  animation : loading-4 1.5s linear forwards;
}

.progress-work .progress[data-percentage="40"] .progress-left .progress-bar {
  animation : 0;
}

.progress-work .progress[data-percentage="50"] .progress-right .progress-bar {
  animation : loading-5 1.5s linear forwards;
}

.progress-work .progress[data-percentage="50"] .progress-left .progress-bar {
  animation : 0;
}

.progress-work .progress[data-percentage="60"] .progress-right .progress-bar {
  animation : loading-5 1.5s linear forwards;
}

.progress-work .progress[data-percentage="60"] .progress-left .progress-bar {
  animation : loading-1 1.5s linear forwards 1.5s;
}

.progress-work .progress[data-percentage="70"] .progress-right .progress-bar {
  animation : loading-5 1.5s linear forwards;
}

.progress-work .progress[data-percentage="70"] .progress-left .progress-bar {
  animation : loading-2 1.5s linear forwards 1.5s;
}

.progress-work .progress[data-percentage="80"] .progress-right .progress-bar {
  animation : loading-5 1.5s linear forwards;
}

.progress-work .progress[data-percentage="80"] .progress-left .progress-bar {
  animation : loading-3 1.5s linear forwards 1.5s;
}

.progress-work .progress[data-percentage="90"] .progress-right .progress-bar {
  animation : loading-5 1.5s linear forwards;
}

.progress-work .progress[data-percentage="90"] .progress-left .progress-bar {
  animation : loading-4 1.5s linear forwards 1.5s;
}

.progress-work .progress[data-percentage="100"] .progress-right .progress-bar {
  animation : loading-5 1.5s linear forwards;
}

.progress-work .progress[data-percentage="100"] .progress-left .progress-bar {
  animation : loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform : rotate(0deg);
    transform         : rotate(0deg);
  }

  100% {
    -webkit-transform : rotate(36);
    transform         : rotate(36deg);
  }
}

@keyframes loading-2 {
  0% {
    -webkit-transform : rotate(0deg);
    transform         : rotate(0deg);
  }

  100% {
    -webkit-transform : rotate(72);
    transform         : rotate(72deg);
  }
}

@keyframes loading-3 {
  0% {
    -webkit-transform : rotate(0deg);
    transform         : rotate(0deg);
  }

  100% {
    -webkit-transform : rotate(108);
    transform         : rotate(108deg);
  }
}

@keyframes loading-4 {
  0% {
    -webkit-transform : rotate(0deg);
    transform         : rotate(0deg);
  }

  100% {
    -webkit-transform : rotate(144);
    transform         : rotate(144deg);
  }
}

@keyframes loading-5 {
  0% {
    -webkit-transform : rotate(0deg);
    transform         : rotate(0deg);
  }

  100% {
    -webkit-transform : rotate(180);
    transform         : rotate(180deg);
  }
}

@media
  screen
  and (max-width : 768px) {
  .contact-info-list-warpper {
    margin-top : 30px;
  }
}

/* ========================= ======= sidebar blog =========================== */

.blog-sidebar {
  margin-top : 80px;
}

.blog-sidebar .widget {
  margin-bottom : 40px;
}

.blog-sidebar .widget-title {
  margin-bottom : 20px;
  font-size     : 25px;
}

.blog-sidebar .widget-desc {
  margin-bottom : 20px;
}

.blog-sidebar .search-group {
  display         : flex;
  position        : relative;
  justify-content : flex-start;
}

.blog-sidebar .search-input {
  width         : 100%;
  padding       : 10px 20px;
  border        : none;
  border-radius : 10rem;
  background    : #f4f5fb;
  outline       : none;
}

.blog-sidebar .search-submit {
  position   : absolute;
  top        : 50%;
  right      : 20px;
  background : transparent;
  transform  : translateY(-50%);
}

.blog-sidebar .search-submit ion-icon {
  font-size : 25px;
}

.email-group {
  display         : flex;
  justify-content : flex-start;
}

.email-input {
  width         : 100%;
  padding       : 15px 20px;
  border        : none;
  border-radius : 5px;
  background    : #f4f5fb;
  outline       : none;
}

.email-submit {
  font-size : 14px;
}

.blog-sidebar .ads {
  padding       : 2rem;
  border-radius : 5px;
  box-shadow    : 0 15px 29px -4px #3f49621f;
}

.blog-sidebar .ads img {
  width         : 100%;
  border-radius : 5px;
}

.blog-sidebar .tagcloud a {
  display       : inline-block;
  margin        : 3px 1px 2px;
  padding       : 4px 10px;
  color         : #303037;
  border-radius : 3px;
  background    : #eeeff7;
  font-size     : 14px !important;
  font-size     : 12px;
  transition    : all .3s;
}

.blog-sidebar .tagcloud a:hover {
  background : #e0e1eb;
}

.blog-sidebar ul .cat-item {
  padding       : 12px 15px;
  border-bottom : 1px solid #eeeff7;
}

.blog-sidebar ul .cat-item a {
  color : #000000;
}

.blog-sidebar ul .cat-item:first-of-type {}

.blog-sidebar .post-group__thumb {
  display  : block;
  position : relative;
  outline  : 0;
}

.blog-sidebar .post-group__thumb img {
  width              : 100%;
  -webkit-transform  : translateZ(0);
  transform          : translateZ(0);
  -webkit-transition : -webkit-transform .7s ease;
  transition         : -webkit-transform .7s ease;
  transition         : transform .7s ease;
  transition         : transform .7s ease,
                       -webkit-transform .7s ease;
}

.blog-sidebar .post-group__thumb:before {
  z-index            : 10;
  content            : '';
  position           : absolute;
  top                : 0;
  right              : 0;
  bottom             : 0;
  left               : 0;
  opacity            : 0;
  background         : #000;
  -webkit-transition : opacity .6s;
  transition         : opacity .6s;
}

.blog-sidebar .post-group__thumb:hover img {
  -webkit-transform : scale(1.1) translateZ(0);
  transform         : scale(1.1) translateZ(0);
}

.blog-sidebar .post-group__thumb:hover:before {
  opacity : .2;
}

.blog-sidebar .post-group__meta {
  color : #8b8c99;
}

.blog-sidebar .post-group {
  position : relative;
}

.blog-sidebar .post-group--md .post-group__meta {
  margin    : 15px 0 8px;
  font-size : 14px;
}

.blog-sidebar .post-group--lg {
  margin-bottom : 70px;
}

.blog-sidebar .post-group--lg .post-group__meta {
  margin : 22px 0 15px;
}

.blog-sidebar .post-group--lg .author__name {
  font-size : 18px;
}

.blog-sidebar .post-group .h3-h4 a,
.blog-sidebar .post-group .h6 a {
  color      : #303037;
  transition : color .2s;
}

.blog-sidebar .post-group__left {
  width : 82px;
  float : left;
}

.blog-sidebar .post-group__right {
  width        : calc(100% - 82px);
  float        : left;
  padding-left : 15px;
}

.blog-sidebar .post-group .h3-h4 a:hover,
.blog-sidebar .post-group .h6 a:hover {
  color : var(--hover-primary);
}

.blog-sidebar .post-group--sm .h6 {
  margin      : -5px 0 5px;
  font-family : "SpaceGrotesk-Bold";
  font-size   : 18px;
  line-height : 1.4;
}

.blog-sidebar .post-group--sm {
  display       : flex;
  margin-bottom : 30px;
}

.blog-sidebar .post-group--sm .post-group__desc p {
  margin      : 0;
  color       : #8b8c99;
  font-size   : 14px;
  line-height : 1.3;
}

.type1 {
  color      : white;
  background : #f56863 !important;
}

ol.style--styled-numbers {
  margin-top    : 40px;
  margin-bottom : 40px;
  padding-left  : 0px;
  list-style    : none;
  counter-reset : ol-counter;
}

ol.style--styled-numbers li {
  position          : relative;
  margin-bottom     : 20px;
  margin-left       : 0;
  padding-left      : 32px;
  color             : var(--color-secondary);
  counter-increment : ol-counter;
}

ol.style--styled-numbers li span {
  color     : black;
  font-size : 17px;
}

ol.style--styled-numbers li:before {
  content        : counter(ol-counter, decimal-leading-zero);
  display        : inline-block;
  position       : absolute;
  top            : 1px;
  left           : 0;
  padding-bottom : 4px;
  color          : var(--color-secondary);
  border-bottom  : 2px solid var(--color-secondary);
  font-family    : "Moderat-Medium",
                   sans-serif;
  font-weight    : 400;
  line-height    : 1;
}

.page .text-deco {
  color : var(--color-secondary);
}

/* ========================= ======= Pricing =========================== */

/* ========================= ======= article page =========================== */

.article-page {
  z-index   : 1;
  position  : relative;
  max-width : 810px;
  margin    : -185px auto 0;
}

.article-page .article-head {
  margin-top     : 40px;
  margin-bottom  : 40px;
  padding-bottom : 40px;
  border-bottom  : 4px solid #f2f2f2;
}

.article-page .article-img img {
  width : 100%;
}

.article-page .article-meta {
  margin : 40px 0;
}

.article-page .article-meta .article-tag {
  padding          : 4px 18px;
  color            : var(--color-primary);
  color            : white;
  border-radius    : 2rem;
  background       : rgba(0, 0, 0, 0.9);
  background-color : #2e2e2e;
  text-transform   : uppercase;
  font-size        : 13px;
  font-size        : 12px;
  line-height      : 1.5;
}

.article-page .article-meta .article-social {
  display          : flex;
  padding          : 4px 18px;
  color            : var(--color-primary);
  color            : white;
  border-radius    : 2rem;
  background       : #000;
  background-color : #2e2e2e;
  text-transform   : uppercase;
  font-size        : 12px;
  justify-content  : space-around;
  line-height      : 1.5;
}

.article-page .article-meta .article-social li {
  margin-left : .5rem;
}

.article-page .article-meta .article-social li:first-child {
  margin-left : 0;
}

.article-page .article-title {
  margin-bottom : 40px;
  color         : rgba(0, 0, 0, 0.9);
  font-size     : 40px;
}

@media
  screen
  and (max-width : 768px) {
  .article-page .article-title {
    font-size : 30px;
  }
}

.article-page .article-date {
  color     : #615f6c;
  font-size : 13px;
}

.article-page .article-author {
  font-size : 13px;
}

.article-page .article-author a {
  color : var(--color-primary);
}

.article-page p {
  margin-bottom : 20px;
}

.article-page h4 {
  margin-top    : 40px;
  margin-bottom : 20px;
}

.article-page .article-body img {
  max-width     : 100%;
  margin-bottom : 20px;
}

.article-page .article-body .img-by {
  display       : flex;
  width         : fit-content;
  margin-bottom : 20px;
  padding       : 8px 20px;
  border-radius : 20px;
  background    : #f3f3f3;
  font-size     : 14px;
}

.article-page .article-body .blockquote {
  margin-top  : 40px;
  font-weight : bold;
}

.article-page img {
  width : 100%;
}

.article-page .acticle-footer {
  margin-top    : 40px;
  margin-bottom : 80px;
  padding       : 20px;
  background    : #f3f3f3;
}

.article-page .acticle-footer .article-social li {
  margin : 0rem .5rem;
}

/* ========================= ======= job page =========================== */

.job-page .job-wrap h3 {
  margin      : 15px 0px;
  line-height : 1.8;
}

.job-page .job-wrap p {
  margin-bottom : 20px;
}

.job-page .job-wrap li {
  list-style : circle !important;
}

.job-page .job-wrap .job-subtitle2 {
  margin      : 35px 0px 25px;
  padding-top : 30px;
  color       : #262626;
  border-top  : 1px solid #e4e4e4;
  font-size   : 24px;
  font-weight : 400;
  line-height : 1.3;
}

.job-page .job-btns {
  margin-top : 40px;
}

.job-page .list-group .list-group-item {
  position     : relative;
  margin       : 0px 0px 10px 20px;
  padding      : 0;
  padding-left : 20px;
  border       : none;
}

.job-page .list-group .list-group-item::before {
  content          : "";
  position         : absolute;
  top              : 10px;
  left             : 0;
  width            : 7px;
  height           : 7px;
  border-radius    : 100%;
  background-color : var(--color-primary);
}

.sidebar-wrap {
  margin-top : 140px;
}

.sidebar-wrap .widget-title {
  position       : relative;
  position       : relative;
  margin-bottom  : 60px;
  color          : var(--color-primary);
  text-transform : uppercase;
  font-family    : "TradeGothic";
  font-size      : 22px;
  font-weight    : bold;
  letter-spacing : normal;
}

.sidebar-wrap .widget-title::before {
  content    : "";
  position   : absolute;
  top        : -10px;
  width      : 40px;
  height     : 2px;
  background : var(--color-primary);
}

.sidebar-wrap .widget-title::after {
  content          : "";
  position         : absolute;
  top              : -10px;
  left             : 42px;
  width            : 5px;
  height           : 2px;
  background-color : #282828;
}

.sidebar-wrap .jobs-widget ul {
  margin       : 5px 0px 40px;
  padding-left : 0;
}

.sidebar-wrap .jobs-widget .type-title {
  position       : relative;
  text-transform : uppercase;
}

.sidebar-wrap .jobs-widget .type-title::before {
  content    : "";
  position   : absolute;
  top        : -10px;
  width      : 20px;
  height     : 2px;
  background : #000;
}

.sidebar-wrap .jobs-widget li a {
  color : var(--color-primary);
}

/* ========================= ======= changelog page =========================== */

.changelog-page {
  background : #f4f5fb;
}

.changelog-page .version {
  color          : var(--color-primary);
  text-align     : center;
  text-transform : uppercase;
  font-family    : "SpaceGrotesk-Bold";
  font-weight    : bold;
  letter-spacing : 2px;
}

.changelog-page .description {
  margin-top     : 20px;
  text-align     : center;
  text-transform : capitalize;
  font-family    : "SpaceGrotesk-Bold";
  font-size      : 30px;
  font-weight    : bold;
}

.changelog-page .date {
  margin-top : 20px;
  color      : #919DAB;
  text-align : center;
  font-size  : 14px;
}

.changelog-page .block {
  display         : flex;
  padding         : 28px 30px;
  color           : #0A0A40;
  border-radius   : 15px;
  border-radius   : 50rem;
  background      : #ffffff;
  box-shadow      : 0px 4px 6px rgba(36, 25, 94, 0.1);
  align-items     : flex-start;
  justify-content : space-between;
}

.changelog-page .text-adaptive {
  padding : 5px 10px;
}

.changelog-page .type {
  padding       : 5px 15px;
  color         : #ffff;
  border-radius : 30px;
  background    : #ae64ff;
}

/* ========================= ======= 404 page =========================== */

.page-404 {
  display         : flex;
  height          : 100vh;
  padding         : 0;
  background      : #002c44;
  text-align      : center;
  align-items     : center;
  justify-content : center;
}

.page-404 .title {
  color      : #ffff;
  text-align : center;
  font-size  : 22px;
}

@media
  screen
  and (max-width : 768px) {
  .page-404 .title {
    font-size : 18px;
  }
}

.page-404 .fortyfor {
  color      : #ffff;
  text-align : center;
  font-size  : 140px;
}

@media
  screen
  and (max-width : 768px) {
  .page-404 .fortyfor {
    font-size : 100px;
  }
}

/* ========================= ======= Sign in page =========================== */

.page-sign {
  padding-top : 10rem;
}

.page-sign .sign-wrap {
  border           : none;
  border-radius    : 10px;
  background-color : #FFFFFF;
  box-shadow       : 0 15px 29px -4px #3f49621f;
}

.page-sign .sign-wrap .sign-right {
  height     : 50rem;
  background : #3639A3;
}

.login-right {
  position        : relative;
  height          : 100%;
  min-height      : 100vh;
  background-size : cover !important;
}

@media
  screen
  and (max-width : 768px) {
  .login-right {
    display : none;
  }
}

.login-right .screen {
  display         : flex;
  width           : 100%;
  height          : 100vh;
  align-items     : center;
  justify-content : center;
}

.login-right img {
  width : 70%;
}

.login-left {
  width      : 100%;
  height     : 100%;
  height     : 100%;
  padding    : 2rem 2rem 4rem;
  overflow   : hidden;
  background : #fff;
}

@media
  screen
  and (max-width : 576px) {
  .login-left {
    height : auto;
  }
}

.login-left nav {
  width    : 100%;
  overflow : hidden;
}

.login-left nav .back-to {
  float  : left;
  color  : #000000;
  cursor : pointer;
}

.login-left nav .back-to:hover span {
  padding-left : .5rem;
}

.login-left nav .back-to:hover svg {
  color          : var(--hover-primary);
  opacity        : 1;
  vertical-align : middle;
}

.login-left nav .back-to span {
  opacity    : .3;
  transition : .25s;
}

@media
  screen
  and (max-width : 576px) {
  .login-left nav .back-to span {
    display : none;
  }
}

.login-left nav .back-to svg {
  opacity : .3;
}

.login-left header {
  margin : 2rem 0;
}

.login-left .logo {
  display         : flex;
  overflow        : hidden;
  justify-content : center;
}

.login-left .logo img {
  height     : 7rem;
  max-height : 100%;
}

.login-left .title {
  margin    : 1rem 0 2rem;
  font-size : 500;
}

.login-left .form {
  width  : 22rem;
  margin : auto;
}

.login-left .form .btn-login {
  width      : 100%;
  margin-top : 2rem;
}

.login-left .form .forgot-link {
  color           : #000000;
  opacity         : .5;
  text-decoration : underline;
  font-size       : 14px;
}

@media
  screen
  and (max-width : 576px) {
  .check-password {
    display        : flex;
    align-items    : baseline !important;
    flex-direction : column;
  }
}

.login-page {
  width      : 100%;
  max-width  : 35rem;
  padding    : 4rem;
  background : #fff;
}

.login-title {
  color : var(--color-secondary);
}

.page a {
  color : #161616;
}

.index-page {
  background : #edf8f8;
}

.index-page .demo {
  position      : relative;
  border-radius : 2px;
}

@media
  screen
  and (max-width : 768px) {
  .index-page .demo {
    padding : 15px;
  }
}

.index-page .demo-title {
  display       : block;
  margin-bottom : 1rem;
  color         : #000000;
  font-size     : 3rem;
  font-weight   : bold;
  line-height   : 1.5;
}

@media
  screen
  and (max-width : 992px) {
  .index-page .demo-title {
    font-size : 2.5rem;
  }
}

@media
  screen
  and (max-width : 768px) {
  .index-page .demo-title {
    font-size : 2.2rem;
  }
}

.index-page .demo-title .has-line {
  position : relative;
}

.index-page .demo-title .has-line::before {
  z-index    : 0;
  content    : "";
  position   : absolute;
  top        : -1rem;
  left       : 0;
  width      : 103%;
  height     : .2rem;
  background : var(--color-primary);
}

@media
  screen
  and (max-width : 768px) {
  .index-page .demo-title {
    font-size : 1.8rem;
  }
}

.index-page .buy {
  position   : relative;
  max-width  : 38rem;
  margin     : 0 auto;
  padding    : 2rem;
  overflow   : hidden;
  box-shadow : 0 6px 12px 1px #e5e5f2;
}

.index-page .buy .pricing {
  padding       : 2rem;
  border-radius : 5px;
  background    : #e9e9e9;
}

.index-page .buy .pricing-title {
  z-index     : 1;
  position    : relative;
  font-size   : 2.5rem;
  font-weight : bold;
}

.index-page .buy .button {
  z-index  : 1;
  position : relative;
}

.index-page .buy::before {
  z-index  : 0;
  content  : url(../img/others/buy-shape2.svg);
  position : absolute;
  right    : 0;
  bottom   : 4rem;
  width    : 4rem;
  height   : 4rem;
}

.index-page .buy::after {
  z-index  : 0;
  content  : url(../img/others/buy-shape1.svg);
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 4rem;
  height   : 4rem;
}

.index-page .buy-list {
  z-index : 1;
}

.index-page .buy-list-item {
  display     : flex;
  align-items : center;
}

.index-page .buy-list-item svg {
  margin-right  : .5rem;
  padding       : .2rem;
  color         : #fff;
  border-radius : 20rem;
  background    : var(--color-primary);
}

.index-page .bottom0menu {
  padding : 20px 0;
}

@media
  screen
  and (max-width : 768px) {
  .index-page .bottom0menu {
    padding : 10px 0;
  }
}

.account-page {
  height : 100vh;
}

.account-page .form-wrap {
  width         : 25rem;
  height        : 30rem;
  margin-top    : 10rem;
  margin-bottom : 10rem;
  border-radius : 5px;
  background    : #fff;
}

.account-page .account-img {
  position   : relative;
  height     : 100vh;
  overflow   : hidden;
  background : #313896;
}

.account-page .account-img img {
  z-index   : 1;
  position  : absolute;
  top       : 50%;
  left      : 50%;
  max-width : 40rem;
  height    : auto;
  transform : translate(-50%, -50%);
}

.account-page header {
  margin : 8rem 0 2rem;
}

.account-page .form {
  width  : 22rem;
  margin : auto;
}

.account-page label {
  margin-bottom : .5rem !important;
}

.account-page .logo {
  display          : -webkit-box;
  display          : -ms-flexbox;
  display          : flex;
  -webkit-box-pack : center;
  overflow         : hidden;
  -ms-flex-pack    : center;
  justify-content  : center;
}

.account-page .title {
  margin    : 1rem 0 2rem;
  font-size : 500;
}

.account-page .form .forgot-link {
  color           : #313845;
  opacity         : .5;
  text-decoration : underline;
  font-size       : 14px;
}

.account-page .form .btn-login {
  width      : 100%;
  margin-top : 1rem;
}