/* @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); */
html {scroll-behavior: smooth;}
:root {
  --alignment: center;
  --fontMono: 'Questrial', sans-serif;
  --fontSans: 'Montserrat', sans-serif;
  --primary_dark: #1c1d1e;
  --primary_light: #fff;
  --one_color: #550beb;
  --two_color: #fbfcff;
  --three_color: #dbdbdb;
  --four_color: #72767D;
  --five_color: #4682e61a;
  --navcolor: rgb(255 255 255 / 0.78);
}

html[data-theme='dark'] {
  --primary_dark: #fff;
  --primary_light: #15191d;
  --one_color: #8052ff;
  --two_color: #121317;
  --three_color: #414249;
  --five_color: rgba(207, 206, 230, 0.2);
  --navcolor: rgb(32 35 39 / 0.78);
}

::selection {
  background: #8052ff;
  color: var(--primary_light);
}

body {
  margin: 0;
  padding: 0;
}

main {
  /* margin: 4rem 0 0 0; */
}

.centersectionteaser{
  width: 96%;
  margin: 0px auto;
}

ul, li a {
  list-style: none;
  text-decoration: none;
}

video::-webkit-media-controls-panel {
  background-image: linear-gradient(transparent, transparent);
   !important;
}

.videobox {
  Padding: 6%;
  /* background-color: var(--five_color); */
  border-radius: 10px;
}

.videores {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* =======================================
   Typography
 ======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary_dark);
  padding: 0 0 0.3rem 0;
  font-weight: 700;
  font-family: var(--fontSans);
}

h1 {
  font-size: 2.653em;
  line-height: 1.3;
  letter-spacing: -0.05rem;
}

h2 {
  font-size: 1.563em;
  line-height: 1.2;
  letter-spacing: 0;
  margin-bottom: .5rem;
  letter-spacing: -1px;
  letter-spacing: 0px;
}

h3 {
  font-size: 1.25em;
  line-height: 1.25;
  letter-spacing: 0;
  margin-bottom: .8rem;
}

h4 {
  font-size: 1em;
  line-height: 1.8;
  letter-spacing: 0.3px;
}

h5 {
  font-size: 0.8em;
  line-height: 1.35;
  letter-spacing: .02rem;
}

p {
  font-size: 1.1em;
  font-family: var(--fontMono);
  line-height: 1.65;
  color: var(--four_color);
}

body, html, li, ul {
  margin: 0;
  padding: 0;
  counter-reset: headings
}

ul {
  list-style: none
}

button {
  margin: 0
}

html {
  box-sizing: border-box
}

*, ::after, ::before {
  box-sizing: inherit
}

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

html {
  background-color: var(--primary_light);
  font-size: 16px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  min-width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%
}

body, button {
  font-family: var(--fontSans)
}

body {
  background-color: var(--primary_light)
}

a {
  color: var(--four_color);
  cursor: pointer;
  text-decoration: none
}

a:hover {
  color: var(--primary_light)
}

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

span {
  font-style: inherit;
  font-weight: inherit
}

/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
body,
h1,
h2,
h3,
h4,
h5,
h6,
html,
li,
p,
ul {
  margin: 0;
  padding: 0;
  counter-reset: headings;
}

/* =======================================
   Modifiers
 ======================================== */
.has-text-centered {
  text-align: center !important
}

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

.is-uppercase {
  text-transform: uppercase !important
}

.has-text-light {
  color: var(--primary_light) !important;
}

.has-text-dark {
  color: var(--primary_dark);
   !important
}

.is-white {
  background: var(--primary_light) !important;
}

a.has-text-light:focus,
a.has-text-light:hover {
  color: var(--primary_dark) !important;
}

.has-background-light {
  background-color: var(--two_color);
   !important
}

.has-background-purple {
  background-color: var(--one_color) !important;
}

.has-background-video {
  background-color: var(--five_color);
   !important
}

.has-background-bit {
  background-image: linear-gradient(180deg, rgba(57, 184, 200, 1) 0%, rgba(46, 116, 160, 1) 100%);
}

.has-background-igloo {
  background: radial-gradient(circle at bottom center, rgb(150 125 206) 0%, rgb(90 50 179) 73%);
  padding-top: 5rem !important;
  padding-bottom: 6rem !important;
  /* background: radial-gradient(circle at bottom center, rgba(100,143,215,1) 0%, rgba(27,49,91,1) 73%); */
}

.has-background-mills {
  background-image: radial-gradient(circle, rgba(47, 50, 70, 1) 0%, rgba(47, 50, 70, 1) 100%) !important;
}

.has-background-gofer {
  background-image: radial-gradient(circle, rgba(36, 217, 230, 1) 0%, rgba(0, 155, 240, 1) 100%) !important;
}

.has-background-payback {
  background-image: radial-gradient(circle, rgba(37, 47, 97, 1) 0%, rgba(30, 38, 80, 1) 100%) !important;
}

a.has-text-dark:focus,
a.has-text-dark:hover {
  color: var(--primary_dark) !important;
}

.has-background-dark {
  background-color: var(--primary_dark) !important;
}

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

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

.has-background-primary {
  background-color: var(--primary_dark) !important;
}

.has-text-link {
  color: var(--primary_dark) !important;
}

a.has-text-link:focus,
a.has-text-link:hover {
  color: var(--primary_dark) !important;
}

.has-background-link {
  background-color: var(--primary_dark) !important;
}

.is-bold {
  font-weight: 800 !important;
}

a.has-text-info:focus,
a.has-text-info:hover {
  color: var(--primary_dark) !important;
}

.has-background-info {
  background-color: var(--primary_dark) !important;
}

/* =======================================
   Grid system
 ======================================== */
.section.is-smallish {
  padding: 6rem 1.5rem;
}

.section.is-small {
  padding: 6rem 1.5rem;
}

.section.is-medium {
  padding: 15rem 1.5rem;
}

.section.is-large {
  padding: 18rem 1.5rem;
}

footer, section {
  /* display: block; */
}

.container {
  position: relative;
  margin: auto 20rem;
}

.container2{
  margin:0 auto; 
  max-width: 900px;
  padding:0px 20px;
}

.grid12 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-auto-flow: column;
  justify-content: start;
  align-content: start;
  /* grid-template-columns: repeat(auto-fill, 120px); */
  grid-row: 2;
}

.column_left_hero {
  grid-column: 1/6;
  grid-row: 1;
  display: grid;
  height: fit-content;
  align-self: center;
  justify-content: left;
}

.column_right_hero {
  grid-column: 7/12;
  grid-row: 1;
  align-content: start;
  display: grid;
  justify-content: center;
  align-self: center;
}

.column_left {
  grid-column: 2/6;
  grid-row: 1;
  display: grid;
  height: fit-content;
  align-self: center;
  justify-content: left;
}

.column_right {
  grid-column: 7/12;
  grid-row: 1;
  align-content: start;
  display: grid;
  justify-content: center;
  align-self: center;
}

.column_left_alt {
  grid-column: 2/6;
  grid-row: 1;
  height: fit-content;
  align-self: center;
  justify-content: center;
}

.column_right_alt {
  grid-column: 7/12;
  grid-row: 1;
  /* display: grid; */
  justify-content: center;
}

#bm {
  width: 80%;
}

/* Desktop and bigger */
@media (min-width: 768px) and (max-width: 1500px) {
  .container {
    margin: auto 3rem;
  }

  .container-nav {
    margin: auto 3rem;
  }
}

@media (min-width: 769px) and (max-width: 900px) {
  .container {
    margin: auto 1rem;
  }
}

/* Tablet and smaller */
@media (max-width: 769px) {
  .container-nav {
    margin: auto 1rem;
  }

  .container {
    margin: auto 0rem;
  }

  main {
    /* margin: 1rem 0 0 0; */
  }

  .section.is-medium {
    padding: 9rem 1.5rem;
  }

  .section.is-large {
    padding: 18rem 1.5rem;
  }

  .section.is-small {
    padding: 4.5rem 0.5rem;
  }

  .section.is-smallish {
    padding: 0.5rem 0.5rem 2.5rem 0.5rem;
  }

  .column_left_hero {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    height: fit-content;
    align-self: center;
    justify-content: left;
  }

  .column_right_hero {
    grid-column: 1;
    grid-row: 2;
    align-content: start;
    display: grid;
    justify-content: center;
    align-self: center;
  }

  .column_left {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    justify-content: left;
  }

  .column_right {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    justify-content: center;
  }

  .column_left_alt {
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
  }

  .column_right_alt {
    grid-column: 1;
    grid-row: 2;
    justify-content: center;
  }

  .grid12 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
  }
}

/* =======================================
   Navigation Bar
 ======================================== */
nav {
  width: 100%;
}

.navbar {
  transition: all 0.5s;
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 1rem 0 1rem 0;
  backdrop-filter: blur(15px) saturate(100%);
  background-color: var(--navcolor);
}

.navbar.is-fixed-top {
  position: fixed;
  top: 0;
  z-index: 30;
  padding: 1rem 0 1rem 0;
}

.nav-up {
  top: -7rem;
  z-index: 30;
  position: fixed;
}

.container-nav {
  margin: auto 20rem;
  display: grid;
  grid-auto-flow: column;
}

.brand {
  display: grid;
  /* width: auto; */
  cursor: pointer;
  justify-content: left;
  align-items: flex-end;
}

.brand img {
  max-height: 2.6rem;
}

.brand li a {
  margin: 15px;
  flex: 0 0 auto;
  text-transform: uppercase;
  font-size: .75rem;
  font-family: var(--fontSans);
  font-weight: 600;
  color: var(--four_color);
  cursor: pointer;
  text-decoration: none;
}

.menu-end {
  display: grid;
  justify-content: end;
  align-content: center;
  justify-content: right;
  grid-auto-flow: column;
  grid-gap: 30px;
  list-style-type: none;
  text-transform: uppercase;
  font-size: .75rem;
  font-family: var(--fontSans);
  font-weight: 600;
}

.menu-end:hover {
  transition: all .2s;
}

.menu-end li {
  transition: all .2s;
  align-self: center;
}

.menu-end a {
  color: var(--four_color);
  cursor: pointer;
  text-decoration: none;
}

/* underline animation hover test */
li .menu-item {
  display: inline-block;
  position: relative;
  text-transform: capitalize;
  font-weight: 600;
  /* padding: 1rem 1.8rem 0rem 0; */
  font-size: 0.85rem;
  line-height: 2;
}

li .menu-item:last-child {
  margin-right: 0;
}

li .menu-item:after {
  content: '';
  display: block;
  margin: auto;
  height: 2px;
  width: 0px;
  transition: width .4s ease, background-color .4s ease;
}

li .menu-item:hover:after {
  width: 100%;
  background: var(--one_color);
}

a:hover {
  color: var(--primary_dark);
  transition: width .4s ease, background-color .4s ease;
}

/* underline animation ends */
.icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  height: 1.5rem;
  width: 1.5rem;
  animation: moveleft 0.45s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
  animation-direction: alternate;
}

@keyframes moveleft {
  0% {
    transform: translateX(0px);
    /* opacity: 0; */
  }

  100% {
    transform: translateX(10px);
    /* opacity: 1; */
  }
}

.buttons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 2rem 0 0 0;
  justify-content: center;
}

.buttons_left {
  padding: 0rem 0 0 0;
  justify-content: left;
}

.buttons_left li {
  padding: 1rem 0 0.4rem 0;
}

.button_prime {
  color: var(--primary_dark);
  transition: all .4s;
  background-color: var(--primary_light);
  opacity: 1;
  border-radius: 100px;
  border: 3px solid var(--one_color);
  font-family: var(--fontSans);
  font-weight: 700;
  padding: 10px 30px;
  font-size: 0.8rem;
  word-spacing: 1px;
  text-align: var(--alignment);
  align-self: center;
  text-transform: uppercase;
  inline-size: fit-content;
}

a.button_prime {
  color: var(--primary_dark);
}

.button_prime:hover {
  background-color: var(--one_color);
  color: #fff;
}

.button_white {
  color: var(--primary_light);
  transition: all .4s;
  background-color: transparent;
  opacity: 1;
  border-radius: 100px;
  border: 3px solid var(--primary_light);
  font-family: var(--fontSans);
  font-weight: 700;
  padding: 10px 30px;
  font-size: 0.8rem;
  word-spacing: 1px;
  text-align: var(--alignment);
  align-self: center;
  text-transform: uppercase;
  inline-size: fit-content;
}

a.button_white {
  color: var(--primary_light);
}

.button_white:hover {
  background-color: var(--primary_light);
  color: var(--primary_dark);
}

.button_second {
  color: var(--primary_light);
  transition: all .4s;
  background-color: var(--one_color);
  opacity: 1;
  border-radius: 100px;
  /* border: 3px solid var(--one_color); */
  font-family: var(--fontSans);
  font-weight: 700;
  padding: 15px 30px;
  font-size: 0.8rem;
  word-spacing: 1px;
  text-align: var(--alignment);
  align-self: center;
  text-transform: uppercase;
  inline-size: fit-content;
}

a.button_second {
  color: #fff;
}

.button_second:hover {
  background-color: var(--primary_dark);
  color: var(--primary_light);
}

.buttonborder {
  font-family: var(--fontSans);
  font-weight: 700;
  color: var(--primary_dark);
  transition: all .5s;
  border-bottom: 3px solid var(--one_color);
  padding: 5px;
  font-size: 0.8rem;
}

.buttonborder:hover {
  color: var(--one_color);
  border-bottom: 3px solid var(--one_color)
}

.novile {
  display: none;
}

.navbutton {
  display: none;
}

@media (max-width: 1500px) and (min-width: 769px) {
  .container-nav {
    margin: auto 4.5rem;
  }
}

/* Desktop and bigger */
@media (max-width: 769px) {
  .container-nav {
    margin: 0.5rem 1rem;
  }

  .navbar {
    transition: all 0.7s;
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 0.5rem 0 0.5rem 0;
    backdrop-filter: blur(15px) saturate(100%);
    background-color: var(--navcolor);
  }

  .nav-up {
    top: -7rem;
    z-index: 30;
    position: fixed;
  }

  .navbar.is-fixed-top {
    position: fixed;
    top: 0;
    z-index: 30;
    padding: 0.2rem 0 0.2rem 0;
  }

  .menu-end {
    display: none;
  }

  .novile {
    display: grid;
    justify-content: start;
    /* align-content: center; */
    grid-auto-flow: column;
    grid-row: 1;
  }

  .brand {
    display: grid;
    /* width: auto; */
    cursor: pointer;
    justify-content: center;
    align-items: center;
    transform: scale(0.9);
  }

  .navbutton {
    display: grid;
    justify-content: end;
    /* align-content: center; */
    grid-auto-flow: column;
    grid-row: 1;
  }

  .burger {
    z-index: 10;
    cursor: pointer;
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    transition-timing-function: cubic-bezier(.55, .055, .675, .19);
    transition-duration: .22s;
    /* Background: var(--primary_light); */
    border-radius: 50%;
    /* border: 3px solid var(--one_color); */
    color: var(--primary_dark);
    padding: 12px 9px;
    justify-content: right;
  }

  .burger_line {
    width: 23px;
    border-radius: 100px;
    height: 3px;
    margin: 0 0 4px 0;
    background: var(--primary_dark);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    /* transition: top .1s ease-out,opacity .1s ease-out .12s; */
  }

  .burger_line:last-child {
    margin-bottom: 0;
  }

  .burger_close {
    -webkit-transform: rotate(180deg);
    /* transform: rotate(180deg); */
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    transform: rotate(180deg);
    Background: var(--one_color);
  }

  .burger_close .burger_line:nth-child(1) {
    -webkit-transform: rotate(45deg) translate(5px, 5px);
    transition: bottom .1s ease-out, transform .22s cubic-bezier(.215, .61, .355, 1) .12s;
    Background: #fff;
  }

  .burger_close .burger_line:nth-child(2) {
    opacity: 0;
    Background: #fff;
  }

  .burger_close .burger_line:nth-child(3) {
    -webkit-transform: rotate(-45deg) translate(5px, -4px);
    transform: rotate(-45deg) translate(5px, -4px);
    Background: #fff;
  }

  .global-nav {
    background: var(--primary_light);
    width: 100%;
    height: 105vh;
    position: fixed;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: all 800ms cubic-bezier(0.68, -0.16, 0, 1.13);
    z-index: -100;
  }

  .global-nav.js-open {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .global-nav__list {
    line-height: 50px;
    text-align: left;
    transform: translateX(-55px);
  }

  .global-nav__list li {
    /* Reverse menu animation */
    line-height: 3;
    transition: all 800ms cubic-bezier(0.68, -0.16, 0, 1.13);
    line-height: 3;
    transform: translate(-900px);
    /* This delay will take effect when _showing_ elements */
    transition-delay: calc(0.025s * var(--index));
  }

  li.fade {
    opacity: 1;
    transform: translateX(0px);
    /* This delay will take effect when _hiding_ elements */
    transition-delay: calc(0.025s * (var(--length) - (var(--index) + 1)));
  }

  ul.global-nav__list a {
    font-size: 1.2em;
    font-family: var(--fontSans);
    line-height: 1.65;
    color: var(--primary_dark);
    font-weight: 700;
    opacity: 1;
    transition-duration: .3s transform: translate(0%);
    /* This delay will take effect when _hiding_ elements */
    transition-delay: calc(0.025s * (var(--length) + (var(--index) + 1)));
  }

  .global-nav.js-open a {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition-delay: 90ms;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0px);
  }

  .novile-items {
    position: relative;
    height: 50px;
    width: 50px;
    background: transparent;
    border-radius: 50%;
    margin: 8px 8px 0 0;
    display: -ms-flexbox;
    display: inline-flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 2;
    cursor: pointer;
    border: 3px solid var(--one_color);
    color: var(--primary_dark);
    opacity: 1;
  }

  .novile-items:hover {
    background: var(--one_color);
    color: #fff;
    transition: all .2s;
  }

  .nav_line_list {
    height: 2px;
    width: 60px;
    background: var(--primary_dark);
    margin: 20px 0 20px 0;
    opacity: 1;
  }
}

/* =======================================
   Hero Section
 ======================================== */
.count {
  position: absolute;
  /* counter-increment: headings; */
  /* content: counter(headings,decimal-leading-zero); */
  font-size: 30px;
}

.count:before {
  z-index: 0;
  Font-size: 3rem;
  font-weight: 900;
  position: absolute;
  color: var(--five_color);
  counter-increment: headings;
  content: counter(headings, decimal-leading-zero);
  top: -3rem;
  left: -0.2rem;
}

.products_img {
  Padding: 2rem 0rem 0rem 0;
  width: 100%;
}

.herointro {
  Padding: 0rem 0 0.4rem 0;
  text-align: left;
  color: var(--one_color);
  font-weight: 700;
  max-block-size: fit-content;
}

.hero_heading {
  text-transform: uppercase;
  padding: 0rem 0.2rem 0rem 0rem;
  font-weight: 800;
}

.hero_paragraph {
  text-transform: none;
  padding: 0rem 0rem 2rem 0;
  text-align: left;
  color: var(--four_color);
  width: 82.5%;
  font-weight: 600;
  line-height: 1.6;
}

.hero_img {
  padding: 1rem;
  width: 100%;
}

.sidebyside {
  display: grid;
  grid-column-gap: 16px;
  grid-template-columns: auto auto;
  justify-self: left;
}

/* Tablet portrait and smaller */
@media (max-width: 768px) {
  .herointro {
    Padding: 1rem 0 0.4rem 0;
    text-align: left;
    color: var(--one_color);
    font-weight: 700;
  }

  .hero_heading {
    text-transform: uppercase;
    padding: 0rem 0rem 0.2rem 0;
    font-weight: 800;
    font-size: 2rem;
  }

  .hero_paragraph {
    text-transform: none;
    padding: 0rem 0rem 1.5rem 0rem;
    text-align: left;
    color: var(--four_color);
    font-weight: 600;
    line-height: 1.6;
  }

  .sidebyside {
    /* justify-self: center; */
    grid-gap: 10px;
  }

  .gplay {
    width: 96%;
  }

  .appstore {
    width: 98%;
  }

  .button_prime {
    padding: 10px 20px;
    align-self: center;
  }

  .hero_img {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    padding: 1.5rem 10rem 1.5rem 0;
  }
}

/* =======================================
   Features Section
 ======================================== */
.features {
  padding: 3rem 2rem;
  background-color: var(--primary_light);
  box-shadow: 0 10px 20px 0 rgba(119, 129, 173, .1);
  border-radius: 10px;
  /* margin: 3rem 0 0 0; */
  text-align: center;
  top: 2rem;
  position: relative;
}

.grid-3-item {
  /* grid-row: 1; */
  /* display: grid; */
  text-align: center;
}

.feature-text {
  text-align: center;
  text-transform: uppercase;
  padding: 0.5rem 0rem;
  display: grid;
}

.feature-text p {
  text-align: center;
  text-transform: none;
  display: flex;
  width: 65%;
  margin: 0 auto;
  color: var(--four_color);
  padding: 0.8rem 0 0 0;
}

.feature-icon {
  padding: 1rem;
  display: grid;
  place-items: center;
  margin: auto;
  text-align: center;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  text-align: center;
}

.feature-title {
  text-align: center;
  color: var(--primary_dark);
  font-weight: 700;
  max-block-size: fit-content;
}

@media screen and (max-width: 530px) {
  .feature-title {
    text-align: left;
    color: var(--primary_dark);
    font-weight: 700;
    max-block-size: fit-content;
  }

  .grid3 {
    text-align: center;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1.7rem;
  }

  .features {
    padding: 1rem;
    top: 0.2rem;
  }

  .grid-3-item {
    display: flex;
  }

  .feature-text {
    text-transform: uppercase;
    display: grid;
  }

  .feature-text p {
    text-align: left;
    text-transform: none;
    display: flex;
    margin: unset;
    width: 100%;
    color: var(--four_color);
  }
}

/* =======================================
   Testimonials Section
 ======================================== */
.timelinebox {
  margin: 0 auto;
  padding: 10px 0 0 0;
  border-radius: 10px;
  width: auto;
  background-color: var(--one_color);
  text-align: left;
  align-items: center;
  transition: all .2s;
}

.timelinebox:hover {
  background: transparent;
  cursor: pointer;
}

.testimage {
  width: 48px;
  height: 48px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  border-radius: 50%;
  align-items: center;
  margin: 0 0 10px 0
}

.testimonial-author-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  text-align: left;
  padding: 2rem 0 0 0;
}

.testimonial {
  margin: 15px 8px;
  padding: 24px 48px;
  border-radius: 10px;
  background-color: var(--primary_light);
}

.testimonial-text p {
  color: var(--primary_light);
  font-size: 1.6rem;
  line-height: 38px;
  font-family: var(--fontMono);
  text-align: left;
  width: 455px;
  margin: auto 0;
}

.testimonial-author-info h4 {
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .6px;
  color: var(--primary_light);
  padding: 0 0 6px 0;
}

.testimonial-author-info h5 {
  margin-bottom: 1px;
  line-height: 20px;
  font-family: var(--fontSans);
  font-weight: 600
}

.testimonial-author-link {
  display: inline-block;
  margin-top: -5px;
  color: var(--primary_light);
  font-size: .8rem;
  line-height: 16px;
  text-decoration: none;
  font-family: var(--fontMono)
}

.glide {
  position: relative;
  width: 100%;
  box-sizing: border-box
}

.glide * {
  box-sizing: inherit;
}

.glide__track {
  overflow: hidden
}

.glide__slides {
  position: relative;
  width: 100%;
  list-style: none;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  touch-action: pan-Y;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  height: auto;
}

.glide__slide {
  width: 100%;
  flex-shrink: 0;
  white-space: normal;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 250ms ease-out 0s;
  opacity: .2;
}

.glide__slide a {
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -ms-user-select: none
}

.glide__slide--active {
  transform: translate3d(0, 0.8%, 0) scale(1);
  transition: all 250ms ease-out 0s;
  opacity: 1;
}

.glide__bullets {
  -webkit-touch-callout: none;
  user-select: none;
  position: absolute;
  z-index: 2;
  top: auto;
  left: 50%;
  display: inline-flex;
  list-style: none;
  transform: translateX(-50%);
  padding: 2rem 0 0 0;
}

.glide__bullet {
  background-color: transparent;
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--primary_light);
  transition: all .3s ease-in-out;
  cursor: pointer;
  line-height: 0;
  margin: 0 .25em
}

.glide__bullet--active {
  background-color: var(--primary_light);
  border: 2px solid var(--primary_light);
}

.glide__bullet:focus {
  outline: 0;
}

.glide__bullet:focus,
.glide__bullet:hover {
  border: 2px solid var(--primary_light);
  background-color: var(--primary_light);
}

/* Phone and smaller */
@media (max-width: 640px) {
  .testimonial-author-info {
    padding: 0 0 0 0;
  }

  .testimonial-text p {
    margin-bottom: 8%;
    color: var(--primary_light);
    font-size: 1.4rem;
    line-height: 33px;
    font-family: var(--fontMono);
    text-align: left;
    width: 100%;
  }

  .testimonial {
    margin: 15px 8px;
    padding: 24px 48px;
    border-radius: 10px;
    background-color: var(--primary_light);
  }

  .glide__bullet {
    /* background-color: var(--primary_light); */
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--primary_light);
    transition: all .3s ease-in-out;
    cursor: pointer;
    line-height: 0;
    margin: 0 .25em;
  }

  .glide__bullets {
    -webkit-touch-callout: none;
    user-select: none;
    position: absolute;
    z-index: 2;
    top: auto;
    left: 8%;
    display: inline-flex;
    list-style: none;
    transform: translateX(-50%);
    padding: 5rem 0 0 0;
  }

  .glide__slides {
    position: relative
  }

  .glide__bullets {
    top: 82%;
    margin: 0px 0 0 0;
  }

  .glide__slide--active {
    transform: translate3d(0, 0.8%, 0) scale(1);
    transition: all 250ms ease-out 0s;
    opacity: 1;
  }

  .glide__wrapper {
    /* height: -webkit-fill-available; */
    /* height: 40vh; */
  }
}

/* =======================================
   Accordion
 ======================================== */
.accordion {
  max-width: 560px;
  margin: 0 auto 100px;
  border-top: 1px solid var(--three_color);
}

.accordion li {
  border-bottom: 1px solid var(--three_color);
  position: relative;
}

.accordion li p {
  display: none;
  padding: 10px 25px 30px;
}

.accordion a {
  width: 100%;
  display: block;
  cursor: pointer;
  font-weight: 600;
  line-height: 3;
  color: var(--primary_dark);
  text-indent: 15px;
  user-select: none;
}

.accordion a:after {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--primary_dark);
  border-bottom: 2px solid var(--primary_dark);
  position: absolute;
  right: 10px;
  content: " ";
  top: 17px;
  transform: rotate(-45deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.accordion p {
  line-height: 2;
  padding: 10px;
  color: var(--four_color);
}

a.active:after {
  transform: rotate(45deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/* =======================================
   Toggle button
 ======================================== */
label {
  cursor: pointer;
  text-indent: -9999px;
  width: 52px;
  height: 27.5px;
  background: var(--four_color);
  float: right;
  border-radius: 100px;
  position: relative;
}

label:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 25.5px;
  height: 25.5px;
  background: #fff;
  border-radius: 100%;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

input:checked+label {
  background: var(--one_color);
}

input:checked+label:after {
  left: calc(100% - 26px);
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

label:active:after {
  /* width: 45px; */
}

input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition-delay: 0 !important;
  transition: all 250ms !important;
}

/* =======================================
   Footer Section
 ======================================== */
.footer_legals h6 {
  color: var(--five_color);
  font-weight: 600;
}

.footer_legals h6 a {
  color: var(--five_color);
}

.footer_legals h6 a:hover {
  color: var(--one_color);
  transition: all .2s;
}

.footer_logo img {
  width: 60%;
}

.footer_logo {
  grid-column: 1;
  grid-row: 1;
  width: 170px;
  /* align-self: center; */
  /* padding: 0 0 0 1rem; */
}

.footer_grid {
  display: grid;
  padding: 2rem 0 2rem 0rem;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}

.footer_links_col1 {
  color: var(--primary_dark);
  grid-column: 2;
  grid-row: 1;
  line-height: 2;
}

.footer_links_col2 {
  color: var(--primary_light);
  grid-column: 3;
  grid-row: 1;
  padding: 0 0 0 3rem;
}

.footer_links_col3 {
  color: var(--primary_light);
  grid-column: 4;
  grid-row: 1;
}

.footer_links a {
  color: var(--primary_light);
  line-height: 2.3;
}

.footer_links_col1 h6, .footer_links_col2 h6, .footer_links_col3 h6 {
  padding: 0 0 0.5rem 0rem;
  text-transform: uppercase;
  color: var(--primary_dark);
  font-weight: 800;
}

.footer_social {
  grid-column: 3;
  grid-row: 1;
  padding: 2rem 0 0rem 0;
}

.contact-icon {
  position: relative;
  height: 40px;
  width: 40px;
  background: transparent;
  border-radius: 50%;
  margin: 0 5px 0 0;
  display: -ms-flexbox;
  display: inline-flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
  border: 2px solid var(--one_color);
  color: var(--primary_dark);
  padding: 8px;
}

.contact-icon:hover {
  background: var(--one_color);
  color: #fff;
  transition: all .2s;
}

.footer_legals {
  grid-column: 2 / span 4;
  grid-row: 2;
  padding: 2rem 0 0 0;
}

.footer_legals h6 {
  color: var(--primary_dark);
  font-weight: 600;
}

.footer_legals h6 a {
  color: var(--primary_dark);
}

.footer_legals h6 a:hover {
  color: var(--one_color);
  transition: all .2s;
}

/* Tablet portrait and smaller */
@media (max-width: 768px) {
  li .menu-item {
    font-size: 0.9rem;
    font-weight: 600;
  }

  .container {
    margin: auto 0.8rem;
  }

  .footer_grid {
    display: grid;
    grid-gap: 2.5rem;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-template-rows: fit-content(40%);
    padding: 2rem 0 0 0.8rem;
  }

  .footer_logo {
    grid-column: 1;
    grid-row: 1;
    width: 170px;
    padding: 0px 0px 0 0rem;
  }

  .footer_links_col1 {
    grid-column: 1;
    grid-row: 2;
    padding: 0 0 0 0rem;
  }

  .footer_links_col2 {
    grid-column: 1;
    grid-row: 3;
    padding: 0 0 0 0rem;
  }

  .footer_links_col3 {
    grid-column: 1;
    grid-row: 4;
    padding: 0 0 0 0rem;
  }

  .footer_social {
    grid-column: 1;
    grid-row: 5;
    padding: 1rem 0 0 0;
  }

  .footer_legals {
    grid-column: 1;
    grid-row: 5;
    padding: 0 0 2rem 0;
  }

  .row-top {
    grid-row: 1 !important;
  }

  .row-bottom {
    grid-row: 2 !important;
  }
}

/* =======================================
   Design kit Section
 ======================================== */
.buttons_left_kit {
  padding: 0rem 0 0 0;
  justify-content: left;
}

.buttons_left_kit li {
  padding: 0.2rem 0 2.2rem 0;
}

.box {
  background-color: var(--five_color);
  color: var(--primary_dark);
  width: auto;
  height: 150px;
  padding: 1em;
  display: grid;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  box-shadow: none;
  line-height: 1.45;
  letter-spacing: 0;
  font-weight: 700;
  font-family: var(--fontSans);
  transition: all .2s;
}

.space {
  padding: 1.2rem 0 1.2rem 0;
}

.title {
  color: var(--primary_dark);
  font-weight: 700;
  line-height: 1.125;
  text-align: left;
}

#lightgallery {
  column-count: 4;
  column-gap: 18px;
  column-width: 33%;
}

.circles_kit {
  display: grid;
  grid-gap: 10px;
}

.circle_primary_dark {
  border-radius: 99px;
  background-color: var(--primary_dark);
  display: inline-block;
  height: 24px;
  margin-right: 8px;
  width: 24px;
  margin: 0 0 10px 0;
}

.circle_primary_light {
  border-radius: 99px;
  background-color: var(--primary_light);
  display: inline-block;
  height: 24px;
  margin-right: 8px;
  width: 24px;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1), inset 0 0 0 1px rgba(0, 0, 0, .1);
  margin: 0 0 10px 0;
}

.circle_1 {
  border-radius: 99px;
  background-color: var(--one_color);
  display: inline-block;
  height: 24px;
  margin-right: 8px;
  width: 24px;
  margin: 0 0 10px 0;
}

.circle_2 {
  border-radius: 99px;
  background-color: var(--two_color);
  display: inline-block;
  height: 24px;
  margin-right: 8px;
  width: 24px;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1), inset 0 0 0 1px rgba(0, 0, 0, .1);
  margin: 0 0 10px 0;
}

.circle_3 {
  border-radius: 99px;
  background-color: var(--three_color);
  display: inline-block;
  height: 24px;
  margin-right: 8px;
  width: 24px;
  margin: 0 0 10px 0;
}

.circle_4 {
  border-radius: 99px;
  background-color: var(--four_color);
  display: inline-block;
  height: 24px;
  margin-right: 8px;
  width: 24px;
  margin: 0 0 10px 0;
}

.circle_5 {
  border-radius: 99px;
  background-color: var(--five_color);
  display: inline-block;
  height: 24px;
  margin-right: 8px;
  width: 24px;
  margin: 0 0 10px 0;
}

.p-black {
  color: var(--primary_dark);
}

.nextext {
  padding: 0 0px 0px 40px;
  color: var(--primary_dark);
}

.has-background-light {
  background-color: var(--two_color) !important;
}

.row {
  margin: 30px 0 0 0;
}

.header {
  text-align: center;
  padding: 0;
  margin-top: 4rem;
}

/* =======================================
   More Projects
 ======================================== */
.more_grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-auto-flow: dense;
}

.more {
  width: auto;
  height: 150px;
  padding: 1em;
  display: grid;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  box-shadow: none;
  background-color: var(--primary_light);
  line-height: 1.45;
  letter-spacing: 0;
  font-weight: 700;
  font-family: var(--fontSans);
  transition: all .2s;
  color: var(--primary_light);
  border-radius: 6px;
  transition: all .2s;
}

.projects {
  padding: 0 0 1.5rem 0;
}

/* Mobile and smaller */
@media (max-width: 640px) {
  .more_grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: dense;
  }
}

.mt-1{margin-top: 10px;}
.mt-2{margin-top: 20px;}
.mt-3{margin-top: 30px;}
.mt-4{margin-top: 40px;}

.mb-1{margin-bottom: 10px;}
.mb-2{margin-bottom: 20px;}
.mb-3{margin-bottom: 30px;}
.mb-4{margin-bottom: 40px;}

.pt-1{padding-top: 10px;}
.pt-2{padding-top: 20px;}
.pt-3{padding-top: 30px;}
.pt-4{padding-top: 40px;}

.pb-1{padding-bottom: 10px;}
.pb-2{padding-bottom: 20px;}
.pb-3{padding-bottom: 30px;}
.pb-4{padding-bottom: 40px;}
.text-center{text-align: center;}

/* about us page */

.section.is-small {
  padding-bottom: 14rem;
}
.elementor-element.elementor-element-d17a508:not(.elementor-motion-effects-element-type-background),
.elementor-118 .elementor-element.elementor-element-d17a508 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #ffffff;
  box-shadow: 1px 1px 35px 2px rgba(156, 151, 151, 0.2);
  -webkit-box-shadow: 1px 1px 35px 2px rgba(156, 151, 151, 0.2);
  -moz-box-shadow: 1px 1px 35px 2px rgba(156, 151, 151, 0.2);
}
.elementor-element.elementor-element-d17a508 {
  border: 2px solid red;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #eeeeee;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  margin-bottom: 0px;
  padding: 0px 0px 0px 0px;
  border-radius: 10px 10px 10px 10px;
  max-width: 1140px;
  margin: -200px auto 0;
}
.elementor-section .elementor-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
.elementor-column.elementor-col-33,
.elementor-column[data-col="33"] {
  width: 33.333%;
  text-align: center;
}
@media (max-width: 769px) {
  .elementor-element.elementor-element-d17a508{
      border-radius:0;
  }
  .elementor-section .elementor-container{
      display: initial;
  }
  .elementor-column.elementor-col-33, .elementor-column[data-col="33"]{
      width:initial;
  }
}
.elementor-element-populated {
  border-style: solid;
  border-width: 0px 1px 0px 0px;
  border-color: #eeeeee;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  margin: 0px 0px 0px 0px;
  padding: 50px;
}

.elementor-widget:not(:last-child) {
  margin-bottom: 20px;
}
.elementor-widget-wrap > .elementor-element {
  width: 100%;
}
.elementor-element.elementor-element-85643f5 .elementor-heading-title {
  color: #4d50c6;
  line-height: 1em;
}
.elementor-element.elementor-element-93c515e .elementor-heading-title {
  color: #4d50c6;
  line-height: 1em;
}
.elementor-element.elementor-element-2f63d57 .elementor-heading-title {
  color: #4d50c6;
  line-height: 1em;
}
.has-background-purple {
  padding: 100px 0;
}
.skillsTool {
  min-height: 60px;
}
.elementor-element.elementor-element-617340d .elementor-heading-title {
  color: #4d50c6;
}
.elementor-element.elementor-element-10ce3ef .elementor-heading-title {
  color: #4d50c6;
}
.elementor-element.elementor-element-2cd1630 .elementor-heading-title {
  color: #4d50c6;
}