@charset "UTF-8";

.button {
  padding: 16px 64px;
  background-color: var(--clr-second);
  cursor: pointer;
  position: relative;
  overflow: hidden
}

@media (max-width: 1440px) {
  .button {
    padding: 1.1111111111vw 4.4444444444vw
  }
}

@media (max-width: 768px) {
  .button {
    padding: 2.1333333333vw 8.5333333333vw
  }
}

@media (min-width: 769px) {
  .button:hover .button__text {
    color: var(--clr-second)
  }

  .button:hover .arrow-right {
    color: var(--clr-second);
    background-color: var(--clr-second)
  }

  .button:hover .arrow-right:before {
    border-color: var(--clr-second)
  }
}

.button__wrapper {
  position: relatife;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content
}

.button__wrapper.-arrow {
  gap: 8px
}

@media (max-width: 1440px) {
  .button__wrapper.-arrow {
    gap: .5555555556vw
  }
}

@media (max-width: 768px) {
  .button__wrapper.-arrow {
    gap: 2.1333333333vw
  }
}

.button__text {
  position: relative;
  z-index: 2;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  color: var(--clr-white);
  -webkit-transition: .3s ease;
  transition: .3s ease
}

@media (max-width: 1440px) {
  .button__text {
    font-size: 1.1111111111vw
  }
}

@media (max-width: 768px) {
  .button__text {
    font-size: 3.7333333333vw
  }
}

.button__spotlight {
  position: absolute;
  z-index: 1;
  height: 10px;
  width: 10px;
  opacity: 1;
  border-radius: 50%;
  background-color: var(--clr-prime);
  right: 0;
  bottom: 0;
  left: 0;
  top: 50%;
  -webkit-transform: scale(0);
  transform: scale(0)
}

@media (max-width: 1440px) {
  .button__spotlight {
    height: .6944444444vw;
    width: .6944444444vw
  }
}

@media (max-width: 768px) {
  .button__spotlight {
    height: 2.6666666667vw;
    width: 2.6666666667vw
  }
}

.arrow-right {
  z-index: 2;
  display: inline-block;
  vertical-align: middle;
  color: var(--clr-white);
  line-height: 1;
  position: relative;
  width: 14px;
  height: 1px;
  background-color: var(--clr-white);
  -webkit-transition: .3s ease;
  transition: .3s ease
}

@media (max-width: 1440px) {
  .arrow-right {
    width: .9722222222vw;
    height: .0694444444vw
  }
}

@media (max-width: 768px) {
  .arrow-right {
    width: 3.7333333333vw;
    height: .2666666667vw
  }
}

.arrow-right:before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid var(--clr-white);
  border-left: 0;
  border-bottom: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: top right;
  transform-origin: top right;
  position: absolute;
  top: 50%;
  right: -1px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

@media (max-width: 1440px) {
  .arrow-right:before {
    width: .5555555556vw;
    height: .5555555556vw;
    right: -.0694444444vw
  }
}

@media (max-width: 768px) {
  .arrow-right:before {
    width: 2.1333333333vw;
    height: 2.1333333333vw
  }
}

.icon {
  font-family: fuji-icons !important;
  speak: never;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.icon.-up:before {
  content: ""
}

.icon.-arrow-forward:before {
  content: ""
}

.icon.-arrow-back:before {
  content: ""
}

.icon.-backward:before {
  content: ""
}

.icon.-forward:before {
  content: ""
}

.icon.-car:before {
  content: ""
}

.icon.-trash-x:before {
  content: ""
}

.icon.-sun:before {
  content: ""
}

.icon.-crawn:before {
  content: ""
}

.icon.-trash:before {
  content: ""
}

.icon.-home:before {
  content: ""
}

.icon.-star-o:before {
  content: ""
}

.icon.-close:before {
  content: ""
}

.icon.-left-v:before {
  content: ""
}

.icon.-right-v:before {
  content: ""
}

.icon.-plus:before {
  content: ""
}

.icon.-minus:before {
  content: ""
}

.icon.-first:before {
  content: ""
}

.icon.-last:before {
  content: ""
}

.icon.-left:before {
  content: ""
}

.icon.-right:before {
  content: ""
}

.icon.-down:before {
  content: ""
}

.icon.-question:before {
  content: ""
}

.icon.-box:before {
  content: ""
}

.icon.-business:before {
  content: ""
}

.icon.-shop:before {
  content: ""
}

.icon.-user:before {
  content: ""
}

.icon.-cart:before {
  content: ""
}

.icon.-lang:before {
  content: ""
}

.icon.-search:before {
  content: ""
}

.icon.-check:before {
  content: ""
}

.icon.-info:before {
  content: ""
}

.icon.-backspace:before {
  content: ""
}

.icon.-star:before {
  content: ""
}

.icon.-badge-star:before {
  content: ""
}

.icon.-badge-check:before {
  content: ""
}

.icon.-tire:before {
  content: ""
}

.icon.-size-2 {
  font-size: 2px
}

.icon.-size-4 {
  font-size: 4px
}

.icon.-size-6 {
  font-size: 6px
}

.icon.-size-8 {
  font-size: 8px
}

.icon.-size-10 {
  font-size: 10px
}

.icon.-size-12 {
  font-size: 12px
}

.icon.-size-14 {
  font-size: 14px
}

.icon.-size-16 {
  font-size: 16px
}

.icon.-size-18 {
  font-size: 18px
}

.icon.-size-20 {
  font-size: 20px
}

.icon.-size-22 {
  font-size: 22px
}

.icon.-size-24 {
  font-size: 24px
}

.icon.-size-26 {
  font-size: 26px
}

.icon.-size-28 {
  font-size: 28px
}

.icon.-size-30 {
  font-size: 30px
}

.icon.-size-32 {
  font-size: 32px
}

.icon.-size-34 {
  font-size: 34px
}

.icon.-size-36 {
  font-size: 36px
}

.icon.-size-38 {
  font-size: 38px
}

.icon.-size-40 {
  font-size: 40px
}

img {
  width: 100%;
  height: auto
}