* {
  scroll-behavior: initial!important;
}
body, .main-nav {
  padding-right: 0px !important;
}
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: blue url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z'/></g></svg>") no-repeat;
  background-position: right 5px top 50%;
}
.bt-logo {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.5px;
}
.btn-discount {
  border-radius: 0;
  border-radius: 5px;
  background: #f4f4f4;
}
.btn-discount:hover {
  background: #ededed;
}
.border-r-0 {
  border-radius: 0!important;
}
.card-fade {
  transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
}
.card-fade:hover {
  transform: scale(1.048);
}

.clouds-banner {
  width: 100%;
  z-index: 1;
}

.rocketman {
  animation-name: shake;
  animation-duration: 2s;
  transform-origin: 50% 50%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, 1px) rotate(0deg); }
}

.cb-img-1 {
    position: absolute;
    left: -100px;
    bottom: 25px;
    width: calc(100% + 100px);
    -webkit-filter: drop-shadow(5px 5px 2px #222);
    filter: drop-shadow(5px 5px 2px #222);
}

.cb-img-2 {
    position: absolute;
    left: -100px;
    bottom: 0px;
    width: calc(100% + 100px);
    -webkit-filter: drop-shadow(1px 2px 2px #222);
    filter: drop-shadow(1px 2px 2px #222);
    z-index: 2;
}

.cb-img-3 {
    position: relative;
    bottom: 0px;
    -webkit-filter: drop-shadow(1px 2px 2px #222);
    filter: drop-shadow(1px 2px 2px #222);
}

@keyframes growProgressBar {
  0%, 33% { --pgPercentage: 0; }
  100% { --pgPercentage: var(--value); }
}

@property --pgPercentage {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

div[data-inviewport="run-progress-bar"].is-inViewport {
  --size: 6rem;
  --fg: #00cc66;
  --bg: #e6faf0;
  --pgPercentage: var(--value);
  animation: growProgressBar 3s 1 forwards;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(closest-side, var(--bg) 80%, transparent 0 99.9%, var(--bg) 0),conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
  font-size: calc(var(--size) / 5);
  color: var(--fg);
  margin: 0 auto;
}

div[data-inviewport="run-progress-bar"]::before {
  counter-reset: percentage var(--value);
  content: counter(percentage);
}

@media(max-width:  991px) {
  .navbar-collapse .nav-link {
    text-align: center;
  }
  .navbar-collapse {
    background-color: #1d253d;
  }
  .navbar-scrolled .navbar-collapse {
    background-color: #fff;
  }
  .cb-img-1 {
      bottom: 10px;
  }
  .cb-img-3 {
      bottom: 30px;
      max-width: 200px;
      left: calc(50% - 100px);
  }
}

@media(max-width:  575px) {
  .btn-header {
      margin: 5px;
      width: 80%;
  }
  .btn-mobile {
      display: block;
  }
  .cb-img-3 {
      max-width: 150px;
      left: calc(50% - 75px);
  }
}
