@font-face {
  font-family: "icomoon";
  src: url("../assets/fonts/icomoon.eot?ck5427");
  src: url("../assets/fonts/icomoon.eot?ck5427#iefix")
      format("embedded-opentype"),
    url("../assets/fonts/icomoon.ttf?ck5427") format("truetype"),
    url("../assets/fonts/icomoon.woff?ck5427") format("woff"),
    url("../assets/fonts/icomoon.svg?ck5427#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-clear:before {
  content: "\e906";
}

.icon-x:before {
  content: "\e901";
}

.icon-twitter:before {
  content: "\e901";
}

.icon-instagram:before {
  content: "\e902";
}

.icon-facebook-official:before {
  content: "\e903";
}

.icon-user-circle-o:before {
  content: "\e904";
}

.icon-search:before {
  content: "\e905";
}

.icon-bars:before {
  content: "\e900";
}

.icon-cart-plus:before {
  content: "\e907";
}

mark {
  background: none;
  color: inherit;
  font-weight: inherit;
}

.button {
  background: linear-gradient(0deg, rgb(247, 207, 2), rgb(255, 252, 189));
  transition: all 0.2s linear;
}

.button:hover {
  background: rgb(253, 213, 14);
}

.scale {
  transition: all 0.2s linear;
}
.scale:hover {
  scale: 1.06;
}

.bg-gradient-yellow {
  background: linear-gradient(to top, #c3246a, #29a1b9);
}

.secondary-border {
  box-shadow: #29a1b9 0px 0px 0px 3px inset, #29a1b9 0px 0px 10px 0px;
}

.primary-border {
  box-shadow: #c3246a 0px 0px 0px 3px inset, #c3246a 0px 0px 10px 0px;
  border-radius: 6px;
}

.bg-customContent {
  background: radial-gradient(circle, #c3246a 0px, #29a1b9 100%);
}

.bg-secondary-customContent {
  background: linear-gradient(to top, #29a1b9 50%, #c3246a 51%);
}

.bg-secondary-customContent:hover {
  background: linear-gradient(to top, #c3246a 50%, #29a1b9 51%);
}

@media screen and (min-width: 768px) {
  .shape-primary {
    background: linear-gradient(90deg, #c3246a, #29a1b9, #c3246a);
  }

  .shape-normal {
    background: #29a1b9;
  }

  .shape {
    clip-path: polygon(0% 0%, 0 70%, 50% 100%, 100% 70%, 100% 0%);
  }
}

.special-div {
  clip-path: polygon(
    82% 0%,
    82% 10%,
    100% 50%,
    82% 90%,
    82% 100%,
    -1% 100%,
    -1% 0%
  );
}

.button-primary {
  background: linear-gradient(
    to top,
    rgb(237, 103, 4) 50%,
    rgb(243, 122, 2) 51%
  );
  transition: all 0.2s linear;
}

.button-primary:hover {
  background: rgb(252, 205, 21);
  border-color: rgb(119, 153, 71);
}

.video-bg {
  height: 15rem;
  top: -2rem;
  z-index: -1;
  left: -0.3rem;
  right: -0.3rem;
  position: absolute;
  background: linear-gradient(to bottom, #29a1b9, #c3246a);
  clip-path: polygon(0 0, 5% 78%, 98% 95%, 90% 18%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transform: rotate(-1deg);
}

@media screen and (min-width: 350px) {
  .video-bg {
    height: 16rem;
  }
}

@media screen and (min-width: 370px) {
  .video-bg {
    height: 17.3rem;
  }
}

@media screen and (min-width: 400px) {
  .video-bg {
    height: 18.6rem;
  }
}

@media screen and (min-width: 425px) {
  .video-bg {
    height: 20rem;
  }
}

@media screen and (min-width: 470px) {
  .video-bg {
    height: 21rem;
  }
}

@media screen and (min-width: 500px) {
  .video-bg {
    height: 23rem;
  }
}

@media screen and (min-width: 530px) {
  .video-bg {
    height: 24rem;
  }
}

@media screen and (min-width: 570px) {
  .video-bg {
    height: 25rem;
  }
}

@media screen and (min-width: 600px) {
  .video-bg {
    height: 27rem;
  }
}

@media screen and (min-width: 640px) {
  .video-bg {
    height: 28rem;
  }
}

@media screen and (min-width: 680px) {
  .video-bg {
    height: 29rem;
  }
}

@media screen and (min-width: 710px) {
  .video-bg {
    height: 32rem;
  }
}

@media screen and (min-width: 735px) {
  .video-bg {
    height: 33rem;
  }
}

@media screen and (min-width: 768px) {
  .video-bg {
    height: 34rem;
  }
}

@media screen and (min-width: 800px) {
  .video-bg {
    height: 35rem;
    left: -0.9rem;
    right: -0.9rem;
    top: -3rem;
    clip-path: polygon(0 0, 2% 82%, 98% 95%, 97% 15%);
  }
}