/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3rem;

  --delta: 1rem;
  --shift: 1rem;

  /* === fig apay === */
  --cf1: 75%;
  --clip-figure: 70px;

  --box-shadow: 0 .5rem 1rem var(--clr-light);
  /* 0 1rem 1rem var(--clr-light); */
  --clr-white: #202528;
  
  --color-line: #47d;
  --color-apay: #47d3;
  --color-apay-border: #fff2;
  --aff-color: #47d6;
  --border: #000;

  --sep-color-line: #47d;
  --sep-color: #fff8;

  /*========== Colors ==========*/

  --material-blue: #3F51B5;
  --material-blue: #47d;
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(219, 69%, 56%);
  --first-color-light: hsl(220, 100%, 70%);
  /* --first-color-alt: hsl(219, 69%, 52%); */
  --first-color-alt: #14a;
   /* #025; */
  --second-color: hsl(39, 100%, 50%);
  --title-color: hsl(219, 8%, 95%);
  --text-color: hsl(216, 8%, 75%);
  --text-color-light: hsl(219, 4%, 55%);
  --white-color: #fff;
  --body-color: hsl(219, 4%, 4%);
  --container-color: hsl(20, 60%, 2%);
  /* hsl(219, 4%, 7%); */

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  
  

  --big-font-size: 3rem;

 
  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-scroll: 1;
  --z-fixed: 10;
  --z-index-menu: 10;
}






/* @media screen and (min-width: 968px) {
  :root {
    --big-font-size: 3rem;
    --h0-font-size: 2rem;
    --h2-font-size: 1.75rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
} */




/* ============================
   Reset и box-sizing
============================ */

html {
  height: 100%;
  overscroll-behavior-y: contain;
   
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-size: 100%;
}


    

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* border: 1px solid #f008; */
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  font-size: var(--normal-font-size, 16px);
  line-height: 1.5;
  background-color: var(--body-color);
  color: var(--text-color);
  /* overflow-y: scroll; */
  font-family: var(--body-font);

  background-image: url(/assets/img/offer-bg.avif);
  /* position: fixed; */
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow-x: hidden;
}

input, select, textarea, button {
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}


ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

a:focus-visible {
  outline: 2px solid highlightColor;
}


button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  /* padding-inline:  */
}

input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.4em 0.6em;
  outline: none;

  /* padding-inline: clamp(0.4em, 1vw, 0.6em); */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--body-font);
  line-height: inherit;
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
}

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






/* === PRELOADER === */

#page-preloader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100500;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  width: 10em;
  height: 10em;
  transform: rotateX(60deg) rotateZ(90deg);
  animation: zRotateView 10s infinite linear;
}

.loader .part {
  transform-style: preserve-3d;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotateX(3deg) rotateY(3deg) rotateZ(3deg);
  animation: rotate 60s linear infinite;
}

.loader .part::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  box-shadow: -1px 0 rgba(255, 255, 255, 0.5), -4px 0 8px rgba(200, 200, 255, 0.2), inset 4px 0 8px rgba(255, 200, 200, 0.2);
  animation: zRotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  to   { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

@keyframes zRotateView {
  from { transform: rotateX(60deg) rotateZ(0deg); }
  to   { transform: rotateX(60deg) rotateZ(360deg); }
}

@keyframes zRotate {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}

.fade {
  opacity: 0;
  transition: opacity .5s ease-out;
}

/* === END PRELOADER === */


/* === RangeSlider === */

.range-slider {
    height: 24px;
    position: relative;
}

.range-track {
    width: 100%;
    height: .5rem;
    background: #444;
    border-radius: .25rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.range-thumb {
    width: 2rem;
    height: 1.5rem;
    background: #eee;
    border-radius: .25rem;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    touch-action: none;
}










.glass {

	box-shadow:
		/* Bottom and right depth effect */
		inset -0.75px -0.5px rgba(255, 255, 255, 0.1),
		/* Top and left depth effect */
		inset +0.75px +0.5px rgba(255, 255, 255, 0.025),
		/* Shadow effect */
		3px 2px 10px rgba(0, 0, 0, 0.25),
		/* Short subsurface effect */
		inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025),
		/* Long subsurface effect */
		inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025);

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

  /* background-color: hsla(0, 0%, 100%, 0.1); */
  /* background-color: #fff2; */
	/* background-image: url(/assets/img/noise3percent.avif); */
  background: #fff1 url(/assets/img/noise3percent.avif);
}




.ps_group_right [data-anim], 
.calc_group [data-anim] {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-variant-numeric: tabular-nums; /* Чтобы цифры не прыгали */
    will-change: transform, opacity;
}

.updating {
    animation: lux-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i) * 0.08s);
}

@keyframes lux-in {
    0% { opacity: 0; transform: translateY(15px); filter: blur(8px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* .updating::before {
    content: attr(data-old);
    position: absolute;
    inset: 0;
    opacity: 1;
    filter: blur(0);
    animation: luxurious-out 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
}

@keyframes luxurious-out {
    0% { opacity: 1; transform: translateY(0); filter: blur(0); }
    100% { opacity: 0; transform: translateY(-15px); filter: blur(8px); }
} */











.cps {
  flex-grow: 1;
  min-width: 50px;
  /* height: 50px; */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  background: #fff2;
  background-repeat: no-repeat;
  background-size: auto 60%;
  background-position: center center;
  transition: background-color 0.3s;
  cursor: pointer;
}

.cps:hover {
  background-color: var(--first-color-alt);
}

.psa {
  pointer-events: none;
  background-color: var(--first-color-alt);
}


.bg {
  /* min-width: 100dvw; */
  min-height: 100dvh;
  z-index: -1;
  overflow: hidden;
  position: fixed;
  inset: 0;
}

.fs {
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: .25rem;
  outline: none;
  color: var(--text-color);
  cursor: pointer;
  transition: color .2s ease-in-out;
}

.fs:hover{
  color: var(--white-color);
}


/*=============== REUSABLE CSS CLASSES ===============*/

nav.container {
  padding-inline: 0;

  background-color: var(--clr-white);
  box-shadow: var(--box-shadow);
  /* width: 100%; */
  /* max-width: 1400px; */
  /* margin: 0 1.5rem; */
}

.section {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* padding: 7rem 0 3rem; */
  overflow: hidden;
  
  transition:
        transform 0.9s cubic-bezier(.2,.8,.2,1),
        opacity 0.7s ease,
        filter 0.7s ease;
}

.section:not(.is-active) {
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
  height: 0;
  min-height: 0;
  overflow: hidden;
  padding-block: 0;
}

.san {
  opacity: 0;
  transform: translateY(20px);
  animation: none;
}

section.is-active .san {
  animation: sanUp 0.6s forwards;
  animation-delay: calc((var(--san) + 1) * 0.2s);
}

section.is-active .san .progress-bar::after {
  animation: sanPro 1.2s forwards, gradientMove 5s linear infinite;
  animation-delay: calc((var(--san) + 1) * 0.2s);
}

@keyframes sanPro {
  to {
    width: calc(var(--progress) * 1%);
  }
}

@keyframes sanUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}







.section__title {
  font-size: var(--h3-font-size);
  color: var(--title-color);
  text-align: center;
  position: relative;
}

.section__subtitle {
  font-size: var(--normal-font-size);
  color: var(--text-color);
  font-weight: 400;
  text-align: center;
  margin-bottom: var(--padding-24-48);
}

.inv_offer {
  background-image: url("/assets/img/mainlabel.webp");
  background-position: top left;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.main {
  /* overflow: hidden; */
}


.bsup{
  background-color: #fff4;
  padding: .25rem .5rem;
  border-radius: .25rem;
}


.shape {
  background-color: hsla(219, 33%, 32%, .5);
  filter: blur(112px);
  border-radius: 50%;
}

.shape__big {
  width: 400px;
  height: 400px;
}

.shape__small {
  width: 300px;
  height: 300px;
}

.shape__smaller {
  width: 180px;
  height: 180px;
  filter: blur(64px);
}

.shape__micro {
  width: 100px;
  height: 100px;
  filter: blur(32px);
  /* background-color: #fa04; */
}

/*=============== HEADER & NAV ===============*/
.header {
  width: 100%;
  background-color: transparent;
  position: fixed;
  font-size: var(--h4-font-size);
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
}

.nav {
  margin: auto !important;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__toggle {
  color: var(--title-color);
  display: inline-flex;
}



.nav__logo {
  width: 9rem;
  height: 100%;
  display: flex;
  align-items: center;
  display: none;
}

.main_logo {
  transition: .3s;
  width: 5rem;
  height: 100%;
  background: url('/assets/img/logo.avif') no-repeat center / 50px;
  cursor: pointer;
}

.bacc {
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: .25rem;
  outline: none;
  color: var(--text-color);
  cursor: pointer;
  transition: color .2s ease-in-out;
}
.bacc:is(:hover, .bacc-sel) {
  color: #0f0;
  /* color: var(--white-color); */
}


.btgm {
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: .25rem;
  outline: none;
  cursor: pointer;
  transition: color .2s ease-in-out;
}
.btgm:hover{
  color: var(--white-color);
}


.nav__toggle {
  padding-inline: 1rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none;
  outline: none;
}

.nav__menu {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.nav__sup {
  width: 9rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* display: none; */
}

@media screen and (max-width: 767px) {

  .nav__menu {
    position: fixed;
    background-color: hsla(0, 0%, 100%, 0.1);
    top: 0;
    left: -100%;
    width: 25%;
    min-height: 100vh;
    backdrop-filter: blur(10px);
    transition: left .3s;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    z-index: var(--z-index-menu);
    gap: 2rem;
  }

  .nav__logo img {
    width: 50px;
  }

}

.nav__list {
  grid-template-columns: 1fr;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 1rem;
}

.mtest {
  padding: .25rem 1rem;
  border-radius: .25rem;
  background-color: var(--first-color-alt);
  /* font-size: var(--normal-font-size); */
  /* text-transform: uppercase; */
  border: 1px solid #0000;
}

.mtest:hover {
  background-color: #0000;
  border-color: var(--second-color);
}

.nav__item:first-of-type {
  display: none;
}

.nav__item {
  transition: all .3s;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .75rem;
  border-radius: 50%;
  box-shadow: 0 1rem 1rem -.5rem #bbb;
  cursor: pointer;
  user-select: none;
}

.nav__item::before,
.nav__item::after {
  content: '';
  position: absolute;
  width: 50%;
  /* height: var(--padding-32-60); */
  pointer-events: none;
  transition: height .3s ease;
}
.nav__item i {
  /* font-size: inherit; */
}

.nav__item::before {
  /* top: -100%; */
  /* background: linear-gradient(0deg, #fff2, #0000); */
}

.nav__item::after {
  top: 100%;
  background: linear-gradient(0deg, #0000, #fff2);
}



.nav__item:is(.is-active-menu, :hover) {
  color: #0f0;
  /* box-shadow: 0 2px #69f; */
  box-shadow: 0 1rem 1rem -.5rem #0f0;
}

.nav__item:is(.is-active-menu, :hover)::after {
  height: 0;
}

/* .nav__item:not(:first-child,:nth-child(2),:nth-child(5)) .nav__link::before { */
.nav__item:not(:first-child) .nav__link::before {
  /* content: '';
  position: absolute;
  margin: auto;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-line), var(--second-color), var(--color-line));
  inset: 2rem 0 0; */
}



.nav__link {
  /* text-transform: uppercase; */
  color: var(--text-color);
  /* font-size: var(--h3-font-size); */
  font-weight: var(--font-medium);
  transition: all .3s;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .25rem 1rem;

  border-radius: .25rem;
  box-shadow: 0 0 .25rem #fff8 inset;
}


/* Show menu */
.show-menu {
  left: 0;
}

/* Change background header */
.scroll-header {
  /* backdrop-filter: blur(15px); */
  box-shadow: rgba(0, 0, 0, 0.02) 0px 5px 10px;
  /* background-color: rgba(0, 0, 0, 0.8); */

  background-color: var(--body-color);
  /* box-shadow: 0 2px 4px hsla(0, 0%, 1%, 1); */
  box-shadow: 10px 1px #fff1;
}

/* Active link */
.active-link {
  color: var(--first-color);
}



/* === INVEST NOW === */


.button {
  cursor: pointer;
  margin: 2rem auto 0;
  padding: 1rem 2rem;
  display: none;
  color: var(--text-color);
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: capitalize;
  border: none;
  outline: none;
  font-size: var(--normal-font-size);
  border-radius: .25rem;
  position: relative;
  z-index: 1;
  background-color: #fff2;
  overflow: hidden;
  transition: color .3s ease, background-color .3s ease;
}

.button:hover,
.button:active,
.button:focus {
  color: var(--white-color);
  background-color: var(--first-color-alt);
}


.button:hover::after,
.button:active::after,
.button.active::after,
.button:focus::after,
.button.focus::after {
  left: 0%;
  transition: all 1.2s ease;
}

.button::after {
  position: absolute;
  content: "";
  height: 1px;
  width: calc(100%*5);
  top: 100%;
  left: calc(100%*-3);
  z-index: -1;
  transition: left 0s;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
  background: #fffc;
  box-shadow: 0 0 11px 5px white;
}

button {
  outline: none;
  border: none;
  background: transparent;
}





/*=============== HOME ===============*/

.home {
  padding: 0;
}

.bg_amore {
  background: url("/assets/img/amore.png");
  background-position: center center;
  background-size: 50% auto;
  background-repeat: no-repeat;

}

.homereg__container,
.home__container {
  /* min-width: 100%; */
  position: relative;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.homereg__container{
  gap:2rem;
}

.home_base{
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: .5rem;
  /* padding: 3rem 2rem 2rem; */
  /* background: linear-gradient(90deg,#0000,#fff1); */
  /* border-radius: 1rem; */
}







.home__base {
  /* display: none; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5rem;
}

.home__login {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.home__data {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  /* align-items: center; */
  gap: 2rem;
}

.freg_wrapper{
  user-select: none;
}


.freg_wrapper {
  /* width: min(100%, 400px); */
  margin: auto;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  flex-direction: column;
  /* gap: 2rem; */
}


.home__title3 {
  font-size: var(--h2-font-size);
  background: radial-gradient(220.01% 178.17% at 17.54% 8.65%, #95D7FF 0%, #FF90B6 35.42%, #4272FF 69.79%, #F155FF 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;

  margin-bottom: 2.5rem;
}

.home__header{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.lgt {
  background: radial-gradient(at 0% 30%, #fff 30%, var(--second-color) 60%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home__title {
  font-size: var(--h2-font-size);
  font-weight: var(--font-semi-bold);
  position: relative;
}

.footer__shape {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -231px;
  opacity: .15;
  transform-origin: center bottom;
}




.home__title2::before {
  position: absolute;
  top: 0;
  left: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;

  content: "&nbsp";
  opacity: .7;
  background: radial-gradient(220.01% 178.17% at 17.54% 8.65%, #95D7FF 0%, #FF90B6 35.42%, #4272FF 69.79%, #F155FF 100%);
  filter: blur(67px);

  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* perspective: 1000; */
  /* -webkit-perspective: 1000; */
}



/* .separator {
  width: clamp(
    192px,
    calc(192px + (320 - 192) * var(--fluid-factor)),
    320px
  );
  position: relative;
  margin-block: var(--padding-16-32) var(--padding-24-48) ;
}

.separator::before,
.separator::after {
  content: '';
  position: absolute;
  transform: translateX(-50%);
  left: 50%;

}

.separator::before {
  width: 100%;
  height: 2px;
  top: 0;
  background-image: linear-gradient(90deg, #0000, var(--sep-color-line), #0000);
}

.separator::after {
  width: 2rem;
  height: 8px;
  bottom: -5px;
  background-image: linear-gradient(0deg, #0000, var(--sep-color), #0000);
}

.separator span::before,
.separator span::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 8px;
  bottom: -5px;
  background-image: linear-gradient(0deg, #0000, var(--sep-color), #0000);
}

.separator span::before {
  left: 0;
  /* transform: translateX(-50%) skew(45deg); */
}

.separator span::after {
  right: 0;
  /* transform: translateX(-50%) skew(135deg); */
} */

.home__subtitle {
  font-size: var(--normal-font-size);
  color: var(--text-color-light);
}


.home__img {
  
  --dim: 352;

  width: clamp(
    240px,
    calc(240px + (var(--dim) - 240) * var(--fluid-factor)),
    352px
  );

  height: clamp(
    240px,
    calc(240px + (var(--dim) - 240) * var(--fluid-factor)),
    352px
  );

  /* width: 15rem;
  height: 15rem; */
  justify-self: center;
  position: relative;
  /* background-image: url("/assets/img/bit.avif"); */
  background-repeat: no-repeat;
  border-radius: 50%;
  /* background-color: #0004; */
  background-size: contain;
  background-position: 50% -8px;
  /* overflow: hidden; */
  transition: .3s;
}

.home__img::before,
.home__img::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.home__img::before {
  width: calc(100% + 2rem);
  height: calc(100% + 2rem);
  top: -1rem;
  left: -1rem;
  transition: .5s;
  animation: button 10s infinite;
}

.home__img canvas{
  /* overflow: hidden; */
  border-radius: 50%;
}

.home__img::after {
  /* top: -8px; */
  /* left: -8px; */
  /* width: calc(280px + 12px); */
  /* height: calc(280px + 12px); */
  /* border: 2px solid; */
  /* border-color: var(--second-color) transparent; */
  /* animation: button-circ 5s infinite; */
  /* opacity: 0.5; */
}

.home__stat {
  display: flex;
  /* display: none; */
  justify-content: center;
  align-items: center;
  position: relative;
}

.home__stat_name {
  padding-top: .5rem;
  font-size: var(--small-font-size);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--text-color-light);
}

.home__stat_name i {
  margin-right: .5rem;
  color: var(--first-color);
}

.home__body{
  display: none;
}

.home__stat_data {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.home__stat_num {
  width: 100%;
  text-align: center;
  font-size: var(--h1-font-size);
  font-weight: var(--font-medium);
  position: relative;
  padding-bottom: .5rem;
}

.home__stat_num::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #0000, var(--second-color), #0000);
}

.home__stat_num span {
  font-size: var(--smaller-font-size);
}



.home .shape__big,
.home .shape__small {
  position: absolute;
}

.home .shape__big {
  left: -9rem;
  top: -4rem;
}

.home .shape__small {
  right: -10rem;
  bottom: 3rem;
}

/* Button animate */
@keyframes button {
  0%,100%{
    box-shadow: 0 0 100px var(--first-color);
  }
  50% {
    box-shadow: 0 0 100px #0000;
  }
}

@keyframes button-circ {
  to {
    transform: rotate(1turn)
  }
}



/*=============== ABOUT ===============*/






.bord::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, #333, #181a1b, #fff8, #181a1b, #333);
  background-size: 300% 300%;
  animation: borderFlow 18s linear infinite;

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

@keyframes borderFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}


.spec_text {
  background: linear-gradient(90deg, #f5a623, #f76b1c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* background: #1e1e2f; */

.dark-card button {
  /* padding: 10px 24px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg, #f5a623, #f76b1c);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s; */
}

.dark-card button:hover {
  /* background: linear-gradient(90deg, #f76b1c, #f5a623); */
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 4px;
  margin: 1rem 0;
  border-radius: 3px;
  background: #ffffff1a;
  overflow: hidden;
}

/* Живой градиент и мягкое свечение */
.progress-bar::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--width, 0%);
  background: linear-gradient(90deg, #f5a623, #f76b1c, #f5a623);
  background-size: 300% 100%;
  border-radius: 6px;
  transition: width 0.8s ease;
  z-index: 1;
}

/* Анимация перелива градиента */
@keyframes gradientMove {
  0%   { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}


























.about {
  position: relative;
}

.cinvbg {
  /* background-image: url("/assets/img/bg1.avif"); */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.homebg {
  /* background-image: url("/assets/img/bgmain.avif"); */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  position: relative;
}

.about__container {
  /* gap: 2rem; */
}





.about__more-desc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(#47d3, #0000);
  -webkit-clip-path: polygon(30% 0, 0 100%, 100% 100%, 70% 0);
  clip-path: polygon(30% 0, 0 100%, 100% 100%, 70% 0);
}

.about__more {
  grid-template-columns: 1fr;
  /* display: flex; */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.about__more .progress-bar {
  width: 50%;
}

.about__more-sep {
  width: 100%;
  height: 100px;
  background-color: var(--container-color);
}

.about__more {
  padding-top: 2rem;
  position: relative;
  overflow: hidden;
  gap: 1rem;
}

.about__more-img {
  /* width: 4rem; */
  height: 4rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* margin-bottom: 1rem; */
  position: relative;
}

.about__more .shape__micro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


.about__more-title {
  text-align: center;
  font-size: var(--normal-font-size);
  color: var(--text-color);
  /* margin-bottom: 1rem; */
}

/* .about__more-title::before{
  content: '';
  position: absolute;
  width: 5px;
  height: 2.5rem;
  left:50%;
  transform:translateX(-50%);
  bottom: -2.5rem;
  background: linear-gradient(#0000, #47d8);
} */

.about__more-desc {
  z-index: 1;
  border-radius: 1rem;
  display: flex;
  display: none;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;
  /* padding: 2.5rem 1rem 1rem; */
  padding-block: 2.5rem 1rem;
  padding-inline: var(--padding-16-32);
  border-radius: 1rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(#fff1, #0000);
  box-shadow: none;
  border-color: transparent;
  line-height: 1.6;
}

.about__more-desc p:first-child {
  margin-bottom: 1rem;
}



.about__block {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}


.abe {
  position: absolute;
  inset: 0;
  /* animation: rotate90 20s steps(1) infinite; */
}
@keyframes rotate90 {
  /* 0%   { transform: rotate(0deg); }
  25%  { transform: rotate(90deg); }
  50%  { transform: rotate(180deg); }
  75%  { transform: rotate(270deg); }
  100% { transform: rotate(360deg); } */
}


.abe::before,.abe::after,
.abe span::before,.abe span::after{
  content:'';
  position:absolute;
  border-radius:1.25rem;
}

.abe::before,.abe::after{
  width:25%;height:25%;
  animation:pulse2 5s ease infinite;
  --a:50px;--b:70px;
}

.abe span::before,.abe span::after{
  width:25%;height:25%;
  animation:pulse3 5s infinite;
  --a:50px;--b:70px;
}

.abe::before{
  left:calc(50% + var(--shift));
  bottom:calc(50% + var(--delta));
  background:linear-gradient(45deg,#0000,#47d8);
  clip-path:polygon(
    calc(100% - var(--b)) 0,100% var(--b),
    100% var(--a),calc(100% - var(--a)) 0,
    100% 0,100% 100%,0 100%,0 0
  );
}

.abe::after{
  right:calc(50% + var(--shift));
  top:calc(50% + var(--delta));
  background:linear-gradient(45deg,#47d8,#0000);
  clip-path:polygon(
    0 0,100% 0,100% 100%,var(--b) 100%,
    0 calc(100% - var(--b)),
    0 calc(100% - var(--a)),var(--a) 100%,0 100%
  );
}

.abe span::before{
  right:calc(50% + var(--delta));
  bottom:calc(50% + var(--shift));
  background:linear-gradient(315deg,#0000,#fa08);
  clip-path:polygon(
    0 100%,0 var(--b),var(--b) 0,
    var(--a) 0,0 var(--a),0 0,
    100% 0,100% 100%
  );
}

.abe span::after{
  left:calc(50% + var(--delta));
  top:calc(50% + var(--shift));
  background:linear-gradient(315deg,#fa08,#0000);
  clip-path:polygon(
    100% 0,100% calc(100% - var(--b)),
    calc(100% - var(--b)) 100%,
    calc(100% - var(--a)) 100%,
    100% calc(100% - var(--a)),
    100% 100%,0 100%,0 0
  );
}

@keyframes pulse2 {

  0%, 100% {
    /* width: 38%; */
  }

  50% {
    width: calc(50% - var(--delta));
  }
}

@keyframes pulse3 {

  0%, 100% {
    /* height: 30%; */
  }

  50% {
    height: calc(50% - var(--delta));
  }
}







.about__bot {
  display: none;
}

.mobile-logo {
  border: 10px solid #fff1;
  background-color: #0008;
  border-radius: 50%;
  background-image: url('/assets/img/logo.avif');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80%;
  width: 100px;
  height: 100px;
  box-shadow: 0 0 3rem .5rem #fa08, inset 0 0 1rem .5rem #47d;
}

.about__group {
  border: .75rem solid #fff1;
  background-color: #0008;
  border-radius: 50%;
  background-image: url('/assets/img/logo.avif');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80%;
  width: 80px;
  height: 80px;
}

@keyframes pulse {
  0%, 100% {
    filter: blur(64px) opacity(0);
    /* filter:grayscale(1); */
    /* filter:sepia(1); */
    /* filter: saturate(10); */
    /* border-width: 100px; */
    /* background-color: #000; */
    /* transform: scale(0.75) rotate(0); */
    /* opacity: 0.25; */
  }
  10%, 50% {
    box-shadow: 0 0 3rem 1rem #fa08, inset 0 0 2rem 1rem #47d8;
    filter: blur(0);
    /* filter: grayscale(0); */
    /* filter:sepia(0); */
    /* filter: saturate(5); */
    /* border-width: 20px; */
    /* background-color: #0004; */
    /* transform: scale(1) rotate(0deg); */
    /* opacity:1; */
  }
}

.pulse {
  animation: pulse 5s infinite;
}








.ab_eff1 {
  position: absolute;
  width: 40%;
  height: 40%;
  border-radius: 2rem;
  border: 3px solid var(--second-color);
  background: #0008;
  -webkit-animation: pulse4 5s infinite;
  /* Safari 4+ */
  -moz-animation: pulse4 5s infinite;
  /* Fx 5+ */
  -o-animation: pulse4 5s infinite;
  /* Opera 12+ */
  animation: pulse4 5s infinite;
  /* IE 10+, Fx 29+ */
}

@keyframes pulse4 {

  0%,
  100% {
    height: 45%;
    border-color: #0000;
    transform: rotate(0);
    background: #0008;
  }

  50% {
    height: 50%;
    /* border-color: var(--second-color); */
    border-width: 3px;
    transform: rotate(180deg);
    background: #0000;
  }
}

.about__title {
  display: none;
  text-align: initial;
}

.about__desc {
  padding-inline: .5rem;
  line-height: 1.6;
  letter-spacing: 1px;
}

.about__desc span:first-child {
  color: var(--first-color-light);
  font-weight: bold;
}

.about__desc span:nth-child(2) {
  color: var(--title-color);
}

/*=============== POPULAR ===============*/

.a1,
.a2,
.a3 {
  width: 100px;
  height: 100px;
  margin-right: 0.25rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

/* .a1{ background-image: url("/assets/img/a1.svg"); } */
/* .a2{ background-image: url("/assets/img/a2.svg"); } */
/* .a3{ background-image: url("/assets/img/a3.svg"); } */

/* .a1{ background-image: url("/assets/img/rob2.png"); background-size: 200%; background-position: -35px -10px; }
.a2{ background-image: url("/assets/img/element.png"); background-size: contain; }
.a3{ background-image: url("/assets/img/robot.png"); background-size: contain; } */

.a1 {
  background-image: url("/assets/img/ip1.png");
}

.a2 {
  background-image: url("/assets/img/ip2.png");
}

.a3 {
  background-image: url("/assets/img/ip3.png");
}






.v_fig {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#fff1, #0000);

  --cbg: 25%;
  -webkit-clip-path: polygon(0 0, var(--cbg) 0, 50% 100%, calc(100% - var(--cbg)) 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, var(--cbg) 0, 50% 100%, calc(100% - var(--cbg)) 0, 100% 0, 100% 100%, 0 100%);
}




.popular {
  position: relative;
}

.bg_io {
  /* background-image: url("/assets/img/bg_offer.avif"); */
  background-repeat: no-repeat;
  /* background-position: center; */
  background-size: 100% auto;
  position: absolute;
  inset: 0;
}

.circle {
  position: absolute;
  inset: -100% 0 0 0;
  opacity: .15;
}

.circle::before,
.circle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url(/assets/img/circle.avif) center / 462px no-repeat;
  animation: spin 120s linear infinite;
}

.circle::after {
  bottom: -100%;
}


@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.ps_bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(#47d2, #0000);

  --cbg: 5%;
  --cd: 50%;
  --cd2: 100%;

  -webkit-clip-path: polygon(0 0, var(--cbg) 0, 50% var(--cd), calc(100% - var(--cbg)) 0, 100% 0, 100% var(--cbg), 50% var(--cd2), 0 var(--cbg));
  clip-path: polygon(0 0, var(--cbg) 0, 50% var(--cd), calc(100% - var(--cbg)) 0, 100% 0, 100% var(--cbg), 50% var(--cd2), 0 var(--cbg));
}

.ps_bg::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 100px #0000;
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  animation: inv_spec 5s ease infinite;
}

@keyframes inv_spec {
  50% { box-shadow: inset 0 0 6rem var(--second-color); }
}










.popular__card_wrap {
  width: min(100%, 20rem);
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: .25rem;
}

.ceff{
  content: '';
  position: absolute;
  top: -200%;
  left: 0;
  width: 100%;
  height: 200%;
  background-image: linear-gradient(0deg, #0000, #fa08 5%, #0000);
  z-index: 1;
}

.popular__card_wrap:is(.is-active-card, :hover) .ceff {
  transition: top 1.5s;
  /* top: 100%; */
}

.popular__card_wrap:is(.is-active-card, :hover) .popular__header::after{
  transition: left .5s;
  left: 0;
}
.popular__card_wrap:is(.is-active-card, :hover) .popular__header::before{
  transition: right .5s;
  right: 0;
}





/* .popular__card_wrap::before,
.popular__card_wrap::after {
  content: '';
  position: absolute;
}
.popular__card_wrap::after {
  top: -225%;
  left: 35%;
  width: 30%;
  height: 200%;
  background-image: linear-gradient(0deg, #fa08, #0000);
  z-index: 1;
} */



.popular__card_wrap:is(.is-active-card, :hover) .popular__title,
.popular__card_wrap:is(.is-active-card, :hover) .offer__name {
/* .popular__card_wrap:is(.is-active-card, :hover) .offer__duration { */
  color: var(--second-color);
}

.popular__card_wrap:is(.is-active-card, :hover) .popular__card::before,
.popular__card_wrap:is(.is-active-card, :hover) .popular__card::after {
  /* top: 100%; */
}





.popular__card {
  min-width: 100%;
  margin-inline: auto;
  /* background-image: url("/assets/img/bgcard.avif"); */
  /* background-color: var(--container-color); */
  /* background-color: #0008; */
  background-size: 50%;
  background-position: bottom;
  background-repeat: no-repeat;
  /* padding: .5rem; */
  border-radius: .25rem;
  overflow: hidden;
}

.popular__header {
  grid-template-columns: 1fr 1.5fr 2fr 1fr;
  gap: var(--padding-8-16);
  border-radius: .25rem;
  position: relative;
  padding: var(--padding-4-8);
  overflow: hidden;
  /* background: linear-gradient(90deg, #47d6, #000, #47d6); */
}
.popular__header::before,
.popular__header::after {
  content: '';
  position: absolute;
  width: 50%;
  transition: left .5s, right .5s;
  height: 100%;
  top: 0;
  /* filter: blur(10px); */
  /* border-radius: .25rem; */
  z-index: -1;
}

.popular__header::before {
  right: -50%;
  background: linear-gradient(90deg, #47d6, #000);
}

.popular__header::after {
  left: -50%;
  background: linear-gradient(270deg, #47d6, #000);
}

.sun::before {
  content: '';
  width: 100px;
  height: 100px;
  position: absolute;
  right: -50px;
  top: -100px;
  filter: blur(64px);
  background-color: #fa08;
  border-radius: 50%;
  z-index: -1;
}

.popular__card .shape__smaller {
  position: absolute;
  top: -2.5rem;
  left: -2.5rem;
}



.popular__title,
.offer__duration,
.popular__img {
  position: relative;
}

.popular__title {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: center;
  font-size: var(--h2-font-size);
  color: var(--title-color);
  line-height: 1;
  background-repeat: no-repeat;
  background-size: auto 50%;
  background-position: right center;
  transition: color .5s;
  position: relative;
}

.popular__title .progress-bar {
  margin: .5rem 0 0;
}

.popular__title span {
  font-size: .7em;
  margin-left: .125rem;
}

.popular__title i {
  padding: 1rem;
  border-radius: 50%;
  background-color: #0006;
  color: var(--second-color);
  text-shadow: 0 1px #0008;
  font-size: var(--h3-font-size);
  margin-right: 1rem;
  box-shadow: 0 0 1px #fff2,
    0 0 1px #0004 inset;
}



.popular__img {
  width: 160px;
  display: block;
  margin: 1.5rem 0 2.5rem auto;
  transition: .3s;
}

.popular__data {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1rem;
}

.popular__data-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--small-font-size);
  color: var(--text-color-light);
  position: relative;
}

.popular__data-group p {
  text-align: center;
  width: 100%;
  border-radius: .25rem;
  color: var(--text-color);
}

.popular__data-group p:nth-child(2) {
  color: var(--text-color);
}

.popular__data-group p:nth-child(2) small {
  color: red;
  color: var(--text-color);
}


.popular__data-group small {
  color: var(--text-color-light);
}

.popular__data-group span small {
  color: var(--text-color);
}

.popular__data-group i {
  color: var(--first-color);
  margin-right: 1rem;
}

.offer__name,
.offer__duration {
  height: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  /* color: var(--text-color-light); */
  line-height: 1;
  /* box-shadow: inset 0 0 0 1px #fff2; */
  border-radius: .25rem;
  transition: color .5s;
}
.offer__name {
  font-size: var(--small-font-size);
  /* background: linear-gradient(90deg, #47d4, #0000); */
}

.offer__name i {
  /* color: var(--second-color); */
}

.offer__duration {
  font-size: var(--normal-font-size);
}

.offer__duration span {
  font-size: var(--small-font-size);
}







/* === IOS === */

.calc_duration .ios {
  pointer-events: none;
  background-color: var(--first-color-alt);
}

.ios .cds_title {
  color: #fff;
}

.ios .cds_title::after {
  background-color: var(--second-color);
}


.popular__card:hover .popular__img {
  transform: translateY(-.25rem);
}

.invest__container {
  display: flex;
  flex-direction: column;
}

.offer__wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--padding-12-32);
  justify-content: center;
}


/* === SLIDER === */

.slide_group {
  width: 70%;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.slidecontainer {
  width: 100%;
  padding-inline: 1.5rem;
}



/*=============== CALC_INV ===============*/
.calc_inv {
  position: relative;
}

.calc__container {
  grid-template-columns: 1fr;
}



.ps_group {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
}

.ps_group_left,
.ps_group_right {
  width: 100%;
}

.ps_group_left {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}

.ps_group_right {
  /* height: 182px; */
  padding-block: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0009;
  border-radius: .5rem;
}

.ps_group_right span{
  color: var(--title-color);
  font-size: var(--h2-font-size);
  font-weight: var(--font-semi-bold);
  line-height: 1.75rem;
}

.ps_subtitle {
  font-size: var(--normal-font-size);
}

.ps_course {
  margin: .5rem 0;
  color: var(--second-color);
  font-size: var(--h1-font-size);
}

.ps_course small {
  font-size: .75em;
  margin-left: .5rem;
}

.ps_course_dt {
  font-size: var(--normal-font-size);
  color: var(--text-color-light);
}
.ps_course_from {
  font-size: var(--normal-font-size);
  color: var(--material-blue);
}







.calc__group {
  /* width: 80%; */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.calc__group_step {
  padding: 1rem;
  border-radius: var(--padding-8-16);
}


.step_cap {
  margin-bottom: 1rem;
  /* display: flex; */
  display: none;
  align-items: center;
}

.step_cap i {
  color: var(--first-color);
  margin-right: .5rem;
  font-size: 1.5rem;
}

.step_small {
  display: none;
  padding-left: 1.6rem;
  font-size: var(--small-font-size);
}



.dep_group {
  height: 100%;
  display: grid;
  /* grid-template-rows: 1fr 1fr; */
  gap: 1rem;
}

.dep_group_left,
.dep_group_right {
  width: 100%;
}

.dep_group_left {
  /* height: 100%; */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}




.sta {
  width: 100%;
  height: 100%;
  min-height: 4rem;
  display: flex;
  outline: none;
  border: 1px solid #fff2;
  border-radius: 0.5rem;
  background-color: #0009;
  font-size: var(--h2-font-size);
  color: var(--white-color);
  padding: 0 2rem;
}

.dep_group_right {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.dep_group_right .sum_conv {
  font-size: var(--h2-font-size);
  color: var(--second-color);
}



.dep_group_right .sum_conv div span {
  margin-left: .5rem;
  font-size: .75em;
}

.sta_esum {
  flex-grow: 1;
  display: flex;
  width: 100%;
  position: relative;
}

.sta_esum label {
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2rem;
  font-weight: 700;
  letter-spacing: .1rem;
}

.sta_sum {
  min-height: 50px;
  display: flex;
  align-items: center;
  flex-grow: 1;
  /* min-width: 80px; */
  justify-content: center;
  background: #fff2;
  border-radius: 0.5rem;
  color: var(--text-color);
  font-size: var(--h4-font-size);
  cursor: pointer;
  transition: 0.3s;
}

.sta_sum:hover {
  color: var(--white-color);
  background: var(--first-color-alt);
}

.ssa {
  pointer-events: none;
  color: var(--white-color);
  background: var(--first-color-alt);
}


.calc_duration {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.calc_duration_sel {
  flex-grow: 1;
  width: clamp(8rem, 30%, 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  padding: 0 .5rem .5rem;
  background-color: #fff2;
  border-radius: 0.5rem;
  border: 1px solid #0000;
  transition: 0.3s;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.calc_duration_sel::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  bottom: .5rem;
  background: linear-gradient(90deg, #0000, #fff6, #0000);
}

.fig_tr {
  --chb: 0.25rem;
  --ch: 10%;
  -webkit-clip-path: polygon(0 0, calc(50% - (var(--ch) / 2)) 0, calc(50% + (var(--ch) / 2)) var(--ch), calc(100% - var(--chb)) var(--ch), 100% calc(var(--ch) + var(--chb)), 100% 100%, 0 100%);
  clip-path: polygon(0 0, calc(50% - (var(--ch) / 2)) 0, calc(50% + (var(--ch) / 2)) var(--ch), calc(100% - var(--chb)) var(--ch), 100% calc(var(--ch) + var(--chb)), 100% 100%, 0 100%);
}

.calc_duration_sel:hover {
  background-color: var(--first-color-alt);
}

.calc_duration_sel:hover .cds_title {
  color: #fff;
}

.calc_duration_sel:hover .cds_title::after {
  /* background-color: #fa0c; */
}


.calc_duration_sel p {
  padding-left: .25rem;
  font-size: var(--small-font-size);
  text-align: left;
  color: #fa0
}

.calc_duration_sel p i {
  margin-right: 0.5rem;
  /* color: var(--second-color); */
  font-size: .7em;
}

.cds_title {
  padding-block: .25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: normal;
  transition: 0.3s;
  position: relative;
  color: var(--text-color);
  
}
.cds_title_per {
  font-size: var(--h2-font-size);
}
.cds_title_per span {
  font-size: .7em;
}


.cds_title::before,
.cds_title::after {
  content: '';
  position: absolute;
  z-index: -1;
  transition: .3s;
}

.cds_title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: .5rem .5rem 0 0;
  background: linear-gradient(#000, #0000);
}

.cds_title::after {
  top: -20px;
  right: 0;
  width: 38%;
  height: 5px;
  border-radius: .5rem;
  background-color: #0009;
}

.cds_footer {
  width: 100%;
  font-size: var(--small-font-size);
  text-align: center;
  /* color: var(--white-color); */
  background-image: linear-gradient(90deg, #0000, #0008, #0000);
  /* background-color: #000; */
  padding-block: .25rem;
}

.cds_footer span {
  color: var(--text-color);
}


.calc_res {
  height: 100%;
  gap: 1rem;
}

.calc_group {
  width: 100%;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  font-size: var(--h4-font-size);
  /* flex-wrap: wrap; */
  background: #0009;
  padding: .5rem 1rem;
  border-radius: .5rem;
}

.res_data_cap {
  color: var(--text-color-light);
  text-transform: uppercase;
  font-size: var(--small-font-size);
  /* margin-bottom: 1rem; */
}

.res_data_group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.res_data_val {
  width: 100%;
  /* padding-bottom: .5rem; */
  /* display: flex; */
  /* justify-content: center; */
  text-align: center;
  color: #fff;
  font-size: var(--h1-font-size);
  position: relative;
}
.res_data_val::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  bottom: 0;
  background: linear-gradient(90deg, #0000, #fff6, #0000);
}

.res_data_val span {
  font-size: .75em;
  margin-left: .5rem;
}

.res_data_usd {
  color: var(--second-color);
}

.res_data_usd span {
  font-size: .75em;
  margin-left: .5rem;
}




/*=============== FAQ ===============*/

.faq {
  /* background-image: url("/assets/img/bg_top_inv.avif"); */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  position: relative;
}

.faq__title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 400;
  color: var(--text-color-light);
  padding-bottom: 1rem;
  transition: 0.3s;
  /* text-transform: uppercase; */
  position: relative;
}

.faq__title::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  background: linear-gradient(90deg, #0000, #fff6, #0000);
}

.faq__title span {
  font-size: var(--h3-font-size);
  color: var(--first-color);
  /* font-weight: bold; */
  transition: color .3s ease;
}

.faq__title span i {
  color: var(--second-color);
  margin-right: 0.75rem;
}

.faq__subtitle {
  font-size: var(--normal-font-size);
  color: var(--text-color);
  font-weight: normal;
  margin-top: 1rem;
}

.featured__container{
  width: auto;
}

.faq_bot {
  display: flex;
  align-items: center;
}

.faq_bot i {
  font-size: var(--h2-font-size);
  margin-right: 1rem;
  transition: color .3s ease;
}

.faq_bot span p {
  font-size: .75em;
  color: var(--text-color-light);
}

.faq_spec {
  border-left: 5px solid var(--color-line);
  padding-left: 1.5rem;
  transition: 0.3s;
  line-height: 1.5;
  font-size: var(--normal-font-size);
  margin-top: 1rem;
  color: var(--text-color-light);
}

.faq_active .faq__title::before {
    background: linear-gradient(90deg, #0000, var(--second-color), #0000);
}

.faq_active .faq__card .shape__smaller {
  background-color: var(--color-line);
}

.faq_active .faq__title .faq_bot {
  color: var(--color-line);
}

.faq_active .faq__title span {
  color: var(--second-color);
}

.faq_active .botcap {
  height: 0.5rem;
  width: 25%;
}




.featured__filters {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--padding-16-32);
  margin-bottom: 3.5rem;
}

.faq__item {
  min-width: 150px;
  border: none;
  outline: none;
  padding: 1rem;
  border-radius: .5rem;
  background-color: #fff1;
  color: var(--text-color);
  /* font-size: var(--h3-font-size); */
  cursor: pointer;
  transition: .3s;
  position: relative;
  overflow: hidden;
}

/* .faq__item::before,
.faq__item::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 7px;

  left: 50%;
  transform: translateX(-50%);
  border-radius: 0.25rem;
  background: #000;
}

.faq__item::before {
  top: -5px;
}

.faq__item::after {
  bottom: -5px;
} */


.faq__item:hover {
  background-color: var(--first-color-alt);
  color: #fff;
}



.card_wrap {
  display: flex;
  flex-grow: 1;
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  border-radius: .5rem;
}

.card_wrap:hover .faq__title span {
  color: var(--second-color);
}

.card_wrap:hover .faq__title::before {
  background: linear-gradient(90deg, #0000, var(--second-color), #0000);
  /* --bc: var(--second-color);
  --bs: 1px;
  --bsn: -1px;
  -webkit-filter: drop-shadow(var(--bsn) 0px 0px var(--bc)) drop-shadow(0px var(--bsn) 0px var(--bc)) drop-shadow(var(--bs) 0px 0px var(--bc)) drop-shadow(0px var(--bs) 0px var(--bc));
    filter: drop-shadow(var(--bsn) 0px 0px var(--bc)) drop-shadow(0px var(--bsn) 0px var(--bc)) drop-shadow(var(--bs) 0px 0px var(--bc)) drop-shadow(0px var(--bs) 0px var(--bc)); */
}

.card_wrap:hover .faq__title .faq_bot i {
  color: var(--color-line);
}

.card_wrap:hover .faq__card .shape__smaller {
  background-color: var(--color-line);
  /* transition: .3s; */
}


.card_wrap:hover .botcap {
  height: 0.5rem;
  width: 25%;
}


.faq__card {
  width: 100%;
  height: fit-content;
  position: relative;
  background-color: var(--container-color);
  padding: 1.5rem;
  border-radius: .5rem;
  overflow: hidden;
  cursor: pointer;
  /* background-image: url("/assets/img/map.avif"); */
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 90% auto;
}



.faq__card .shape__smaller {
  position: absolute;
  /* inset: 0; */
  margin: auto;
  right: -90px;
  top: -90px;
  background-color: #47d8;
  transition: .3s;
}

.featured__title,
.faq__subtitle,
.featured__img {
  position: relative;
  position: relative;
  height: 4rem;
  display: flex;
  align-items: center;
  line-height: 1.25;
}





.featured__img {
  width: 180px;
  margin: 1.5rem 0;
  transition: .3s;
}

.features__price {
  font-size: var(--h3-font-size);
}

.featured__button {
  border: none;
  outline: none;
  padding: .75rem 1rem;
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 1rem 0 1rem 0;
  cursor: pointer;
}

.featured__button i {
  font-size: 1.25rem;
}

.pe{
  pointer-events: none;
  user-select: none;
}

.active-faq {
  /* pointer-events: none; */
  color: var(--white-color);
  background-color: var(--first-color-alt);
  /* cursor: default; */
}


/* ===== OFFER ===== */

.offer {
  position: relative;
  /* background-image: url(/assets/img/offer-bg.avif); */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.offer__container {
  grid-template-rows: min-content;
  gap: 2rem;
}

.offer__data,
.offer__img {
  position: relative;
  width: min(100%, 600px);
  margin: auto;
}

.offer__title {
  margin-bottom: 2rem;
}

.offer__img__wrapper {
  flex-grow: 1;
  /* display: flex; */
  display: none;
  width: 100%;
  min-height: 200px;
  align-items: center;
  justify-content: center;
}

.offer__img {
  width: 100%;
  height: 100%;
  min-height: fit-content;
  background-image: url(/assets/img/referal.avif);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.offer__spec {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  flex-grow: 1;
}

.offer_rating_wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--padding-8-16);
}

.offer_rating {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: var(--padding-8-16);
}

.offer_rating:nth-child(1) {
  padding-block: var(--padding-8-16);
  border-radius: .5rem;
  position: relative;
}

.offer_rating:nth-child(1)::before,
.offer_rating:nth-child(1)::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, #0000, var(--second-color), #0000);
}

.offer_rating:nth-child(1)::before {
  top: 0;
}

.offer_rating:nth-child(1)::after {
  bottom: 0;
}

.offer_rating div {
  width: 50%;
  padding: .5rem 1rem;
  border-radius: .25rem;
}

.offer_rating div:nth-child(1) {
  padding-left: 0;
  text-align: right;
}

.offer_rating div:nth-child(2) {
  padding-right: 0;
  text-align: left;
}

.offer_rating div small {
  margin-right: .25rem;
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
}

.offer_rating div:nth-child(2) small {
  margin-left: .125rem;
}

.offer_rating:nth-child(1) div:nth-child(1){ background: linear-gradient(270deg, var(--aff-color), #0000 50%); }
.offer_rating:nth-child(2) div:nth-child(1){ background: linear-gradient(270deg, var(--aff-color), #0000 60%); }
.offer_rating:nth-child(3) div:nth-child(1){ background: linear-gradient(270deg, var(--aff-color), #0000 70%); }
.offer_rating:nth-child(4) div:nth-child(1){ background: linear-gradient(270deg, var(--aff-color), #0000 80%); }
.offer_rating:nth-child(5) div:nth-child(1){ background: linear-gradient(270deg, var(--aff-color), #0000 90%); }
.offer_rating:nth-child(6) div:nth-child(1){ background: linear-gradient(270deg, var(--aff-color), #0000 100%); }

.offer_rating:nth-child(1) div:nth-child(2){ background: linear-gradient(90deg, var(--aff-color) 0%, #0000 50%); }
.offer_rating:nth-child(2) div:nth-child(2){ background: linear-gradient(90deg, var(--aff-color) 0%, #0000 60%); }
.offer_rating:nth-child(3) div:nth-child(2){ background: linear-gradient(90deg, var(--aff-color) 0%, #0000 70%); }
.offer_rating:nth-child(4) div:nth-child(2){ background: linear-gradient(90deg, var(--aff-color) 0%, #0000 80%); }
.offer_rating:nth-child(5) div:nth-child(2){ background: linear-gradient(90deg, var(--aff-color) 0%, #0000 90%); }
.offer_rating:nth-child(6) div:nth-child(2){ background: linear-gradient(90deg, var(--aff-color) 0%, #0000 100%); }

.offer__description {
  height: 100%;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  gap: 2rem;
}

.offer_desc {
  border-left: 5px solid var(--aff-color);
  padding-left: 1.5rem;
  color: var(--text-color);
}

/* ===== END OFFER ===== */



.botcap {
  transition: 0.3s;
  --clip-border: 40px;
  background: #fff4;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--clip-border) - 2.5rem);
  width: calc(100% - var(--clip-border));
  height: 1rem;
  --clip-tb: 1.5rem;
  --clip-f1: 30%;
  --clip-f2: 35%;
  -webkit-clip-path: polygon(var(--clip-f2) 0, var(--clip-f1) var(--clip-tb), calc(100% - var(--clip-f1)) var(--clip-tb), calc(100% - var(--clip-f2)) 0);
  clip-path: polygon(var(--clip-f2) 0, var(--clip-f1) var(--clip-tb), calc(100% - var(--clip-f1)) var(--clip-tb), calc(100% - var(--clip-f2)) 0);
}

.cube {
  --bc: #333;
  --bs: 1px;
  --bsn: -1px;
  -webkit-filter: drop-shadow(var(--bsn) 0px 0px var(--bc)) drop-shadow(0px var(--bsn) 0px var(--bc)) drop-shadow(var(--bs) 0px 0px var(--bc)) drop-shadow(0px var(--bs) 0px var(--bc));
  filter: drop-shadow(var(--bsn) 0px 0px var(--bc)) drop-shadow(0px var(--bsn) 0px var(--bc)) drop-shadow(var(--bs) 0px 0px var(--bc)) drop-shadow(0px var(--bs) 0px var(--bc));
}

.corner_lt {
  --lt: 50px;
  -webkit-clip-path: polygon(0 var(--lt), var(--lt) 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 var(--lt), var(--lt) 0, 100% 0, 100% 100%, 0 100%);
}

.corner_lb {
  --lb: 50px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, var(--lb) 100%, 0 calc(100% - var(--lb)));
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--lb) 100%, 0 calc(100% - var(--lb)));
}

.corner_rt {
  --rt: 50px;
  -webkit-clip-path: polygon(calc(100% - var(--rt)) 0, 100% var(--rt), 100% 100%, 0 100%, 0 0);
  clip-path: polygon(calc(100% - var(--rt)) 0, 100% var(--rt), 100% 100%, 0 100%, 0 0);
}

.corner_rb {
  --rb: 50px;
  -webkit-clip-path: polygon(100% 0, 100% calc(100% - var(--rb)), calc(100% - var(--rb)) 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% calc(100% - var(--rb)), calc(100% - var(--rb)) 100%, 0 100%, 0 0);
}

.fig_lrb {
  --rb: 50px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rb)), calc(100% - var(--rb)) 100%, var(--rb) 100%, 0 calc(100% - var(--rb)));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rb)), calc(100% - var(--rb)) 100%, var(--rb) 100%, 0 calc(100% - var(--rb)));
}

.fig_lrt {
  --rb: 50px;
  -webkit-clip-path: polygon(0 var(--rb), var(--rb) 0, calc(100% - var(--rb)) 0, 100% var(--rb), 100% 100%, 0 100%);
  clip-path: polygon(0 var(--rb), var(--rb) 0, calc(100% - var(--rb)) 0, 100% var(--rb), 100% 100%, 0 100%);
}


.topfig {
  --clip-tb: 1.5rem;
  --clip-f1: 30%;
  --clip-f2: 35%;

  -webkit-clip-path: polygon(0 0, var(--clip-f1) 0, var(--clip-f2) var(--clip-tb), calc(100% - var(--clip-f2)) var(--clip-tb), calc(100% - var(--clip-f1)) 0, 100% 0, 100% 100%, 0 100%);

  clip-path: polygon(0 0, var(--clip-f1) 0, var(--clip-f2) var(--clip-tb), calc(100% - var(--clip-f2)) var(--clip-tb), calc(100% - var(--clip-f1)) 0, 100% 0, 100% 100%, 0 100%);
}

.botfig {
  --ccw: 50px;
  --clip-tb: 1.5rem;
  --clip-f1: 30%;
  --clip-f2: 35%;

  -webkit-clip-path: polygon(0 0, calc(100% - var(--ccw)) 0, 100% var(--ccw), 100% 100%, calc(100% - var(--clip-f1)) 100%, calc(100% - var(--clip-f2)) calc(100% - var(--clip-tb)), var(--clip-f2) calc(100% - var(--clip-tb)), var(--clip-f1) 100%, 0 100%);

  clip-path: polygon(0 0, calc(100% - var(--ccw)) 0, 100% var(--ccw), 100% 100%, 0 100%);
}

.botfig2 {
  --ccw: 50px;
  --clip-tb: 1.5rem;
  --clip-f1: 30%;
  --clip-f2: 35%;

  -webkit-clip-path: polygon(0 0, calc(100% - var(--ccw)) 0, 100% var(--ccw), 100% 100%, calc(100% - var(--clip-f1)) 100%, calc(100% - var(--clip-f2)) calc(100% - var(--clip-tb)), var(--clip-f2) calc(100% - var(--clip-tb)), var(--clip-f1) 100%, 0 100%);

  clip-path: polygon(0 0, calc(100% - var(--ccw)) 0, 100% var(--ccw), 100% 100%, calc(100% - var(--clip-f1)) 100%, calc(100% - var(--clip-f2)) calc(100% - var(--clip-tb)), var(--clip-f2) calc(100% - var(--clip-tb)), var(--clip-f1) 100%, 0 100%);
}

.tbfig {
  --clip-tb: 1.5rem;
  --clip-f1: 30%;
  --clip-f2: 35%;

  -webkit-clip-path: polygon(0 0, var(--clip-f1) 0, var(--clip-f2) var(--clip-tb), calc(100% - var(--clip-f2)) var(--clip-tb), calc(100% - var(--clip-f1)) 0, 100% 0, 100% 100%, calc(100% - var(--clip-f1)) 100%, calc(100% - var(--clip-f2)) calc(100% - var(--clip-tb)), var(--clip-f2) calc(100% - var(--clip-tb)), var(--clip-f1) 100%, 0 100%);

  clip-path: polygon(0 0, var(--clip-f1) 0, var(--clip-f2) var(--clip-tb), calc(100% - var(--clip-f2)) var(--clip-tb), calc(100% - var(--clip-f1)) 0, 100% 0, 100% 100%, calc(100% - var(--clip-f1)) 100%, calc(100% - var(--clip-f2)) calc(100% - var(--clip-tb)), var(--clip-f2) calc(100% - var(--clip-tb)), var(--clip-f1) 100%, 0 100%);
}

.cip{

  --clip-tb: .5rem;
  --clip-tb2: .5rem;
  --clip-f1: 30%;
  --clip-f2: 35%;

  -webkit-clip-path: polygon(0 0, var(--clip-f1) 0, var(--clip-f2) var(--clip-tb2), calc(100% - var(--clip-f2)) var(--clip-tb2), calc(100% - var(--clip-f1)) 0, 100% 0,
  100% var(--clip-f1), calc(100% - var(--clip-tb)) var(--clip-f2), calc(100% - var(--clip-tb)) calc(100% - var(--clip-f2)), 100% calc(100% - var(--clip-f1)),
  100% 100%, calc(100% - var(--clip-f1)) 100%, calc(100% - var(--clip-f2)) calc(100% - var(--clip-tb2)), var(--clip-f2) calc(100% - var(--clip-tb2)), var(--clip-f1) 100%, 0 100%,
  0 calc(100% - var(--clip-f1)), var(--clip-tb) calc(100% - var(--clip-f2)), var(--clip-tb) var(--clip-f2),
  0 var(--clip-f1));

  clip-path: polygon(0 0, var(--clip-f1) 0, var(--clip-f2) var(--clip-tb2), calc(100% - var(--clip-f2)) var(--clip-tb2), calc(100% - var(--clip-f1)) 0, 100% 0,
      100% var(--clip-f1), calc(100% - var(--clip-tb)) var(--clip-f2), calc(100% - var(--clip-tb)) calc(100% - var(--clip-f2)), 100% calc(100% - var(--clip-f1)),
      100% 100%, calc(100% - var(--clip-f1)) 100%, calc(100% - var(--clip-f2)) calc(100% - var(--clip-tb2)), var(--clip-f2) calc(100% - var(--clip-tb2)), var(--clip-f1) 100%, 0 100%,
      0 calc(100% - var(--clip-f1)), var(--clip-tb) calc(100% - var(--clip-f2)), var(--clip-tb) var(--clip-f2),
      0 var(--clip-f1));
}

.cpay{

  --clip-tb: .5rem;
  --clip-tb2: 0rem;
  --clip-f1: 30%;
  --clip-f2: 35%;

  -webkit-clip-path: polygon(0 0, var(--clip-f1) 0, var(--clip-f2) var(--clip-tb2), calc(100% - var(--clip-f2)) var(--clip-tb2), calc(100% - var(--clip-f1)) 0, 100% 0,
  100% var(--clip-f1), calc(100% - var(--clip-tb)) var(--clip-f2), calc(100% - var(--clip-tb)) calc(100% - var(--clip-f2)), 100% calc(100% - var(--clip-f1)),
  100% 100%, calc(100% - var(--clip-f1)) 100%, calc(100% - var(--clip-f2)) calc(100% - var(--clip-tb2)), var(--clip-f2) calc(100% - var(--clip-tb2)), var(--clip-f1) 100%, 0 100%,
  0 calc(100% - var(--clip-f1)), var(--clip-tb) calc(100% - var(--clip-f2)), var(--clip-tb) var(--clip-f2),
  0 var(--clip-f1));

  clip-path: polygon(0 0, var(--clip-f1) 0, var(--clip-f2) var(--clip-tb2), calc(100% - var(--clip-f2)) var(--clip-tb2), calc(100% - var(--clip-f1)) 0, 100% 0,
      100% var(--clip-f1), calc(100% - var(--clip-tb)) var(--clip-f2), calc(100% - var(--clip-tb)) calc(100% - var(--clip-f2)), 100% calc(100% - var(--clip-f1)),
      100% 100%, calc(100% - var(--clip-f1)) 100%, calc(100% - var(--clip-f2)) calc(100% - var(--clip-tb2)), var(--clip-f2) calc(100% - var(--clip-tb2)), var(--clip-f1) 100%, 0 100%,
      0 calc(100% - var(--clip-f1)), var(--clip-tb) calc(100% - var(--clip-f2)), var(--clip-tb) var(--clip-f2),
      0 var(--clip-f1));
}

.cinf{

  --clip-tb: 0rem;
  --clip-tb2: .25rem;
  --clip-f1: 30%;
  --clip-f2: 35%;

  -webkit-clip-path: polygon(0 0, var(--clip-f1) 0, var(--clip-f2) var(--clip-tb2), calc(100% - var(--clip-f2)) var(--clip-tb2), calc(100% - var(--clip-f1)) 0, 100% 0,
  100% var(--clip-f1), calc(100% - var(--clip-tb)) var(--clip-f2), calc(100% - var(--clip-tb)) calc(100% - var(--clip-f2)), 100% calc(100% - var(--clip-f1)),
  100% 100%, calc(100% - var(--clip-f1)) 100%, calc(100% - var(--clip-f2)) calc(100% - var(--clip-tb2)), var(--clip-f2) calc(100% - var(--clip-tb2)), var(--clip-f1) 100%, 0 100%,
  0 calc(100% - var(--clip-f1)), var(--clip-tb) calc(100% - var(--clip-f2)), var(--clip-tb) var(--clip-f2),
  0 var(--clip-f1));

  clip-path: polygon(0 0, var(--clip-f1) 0, var(--clip-f2) var(--clip-tb2), calc(100% - var(--clip-f2)) var(--clip-tb2), calc(100% - var(--clip-f1)) 0, 100% 0,
      100% var(--clip-f1), calc(100% - var(--clip-tb)) var(--clip-f2), calc(100% - var(--clip-tb)) calc(100% - var(--clip-f2)), 100% calc(100% - var(--clip-f1)),
      100% 100%, calc(100% - var(--clip-f1)) 100%, calc(100% - var(--clip-f2)) calc(100% - var(--clip-tb2)), var(--clip-f2) calc(100% - var(--clip-tb2)), var(--clip-f1) 100%, 0 100%,
      0 calc(100% - var(--clip-f1)), var(--clip-tb) calc(100% - var(--clip-f2)), var(--clip-tb) var(--clip-f2),
      0 var(--clip-f1));
}

.cfapay {
  --clip-tb: .5rem;
  --clip-f1: 30%;
  --clip-f2: 35%;

  -webkit-clip-path: polygon(0 0, var(--clip-f1) 0, var(--clip-f2) var(--clip-tb), calc(100% - var(--clip-f2)) var(--clip-tb), calc(100% - var(--clip-f1)) 0, 100% 0,
  100% var(--clip-f1), calc(100% - var(--clip-tb)) var(--clip-f2), calc(100% - var(--clip-tb)) calc(100% - var(--clip-f2)), 100% calc(100% - var(--clip-f1)),
  100% 100%, calc(100% - var(--clip-f1)) 100%, calc(100% - var(--clip-f2)) calc(100% - var(--clip-tb)), var(--clip-f2) calc(100% - var(--clip-tb)), var(--clip-f1) 100%, 0 100%,
  0 calc(100% - var(--clip-f1)), var(--clip-tb) calc(100% - var(--clip-f2)), var(--clip-tb) var(--clip-f2),
  0 var(--clip-f1));

  clip-path: polygon(0 0, var(--clip-f1) 0, var(--clip-f2) var(--clip-tb), calc(100% - var(--clip-f2)) var(--clip-tb), calc(100% - var(--clip-f1)) 0, 100% 0,
      100% var(--clip-f1), calc(100% - var(--clip-tb)) var(--clip-f2), calc(100% - var(--clip-tb)) calc(100% - var(--clip-f2)), 100% calc(100% - var(--clip-f1)),
      100% 100%, calc(100% - var(--clip-f1)) 100%, calc(100% - var(--clip-f2)) calc(100% - var(--clip-tb)), var(--clip-f2) calc(100% - var(--clip-tb)), var(--clip-f1) 100%, 0 100%,
      0 calc(100% - var(--clip-f1)), var(--clip-tb) calc(100% - var(--clip-f2)), var(--clip-tb) var(--clip-f2),
      0 var(--clip-f1));
}


.offer__block {
  min-width: 200px;
  width: 100%;
  flex-grow: 1;
  text-align: center;
  color: #fffc;
  font-size: var(--small-font-size);
  text-transform: uppercase;
  margin-bottom: var(--padding-16-32);
}


.offer__spec_num {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--first-color);
  font-size: var(--h2-font-size);
}

.offer__spec_num span {
  color: var(--second-color);
  margin-right: .5rem;
  font-weight: 400;
}

.offer__spec_num span {
  /* font-size: var(--h2-font-size); */
  /* color: var(--white-color); */
  /* text-align: center; */
  /* margin-right: 1rem; */
  /* padding: 0.5rem 1.5rem; */
  /* background: #0008; */
  /* border-radius: 0.5rem; */
  /* box-shadow: 0 0 1px #fff4, inset 0 0 1px #0008; */
}

.offer__spec_num span small {
  /* color: var(--text-color-light); */
  /* font-size: var(--h3-font-size); */
  /* margin-left: 0.25rem; */
}


/*=============== APAY ===============*/

.apay_res {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  padding: .5rem 1rem;
  font-size: var(--small-font-size);
  border-radius: .5rem;
  background-color: #fa03;
}

.apay_res div:last-child {
  color: var(--first-color);
}

.apay__container {
  grid-template-columns: 1fr 1fr;
}


.apay {
  width: 100%;
}

.apay::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  /* background-image: url(/assets/img/deco.png); */
  background-position: center bottom;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.05;
  z-index: -1;
}

.apay_img {
  position: relative;
  min-width: 6rem;
  padding-block: var(--padding-8-16);
  padding-inline: var(--padding-12-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--h4-font-size);
  color: var(--second-color);
  flex-grow: 1;
  border-radius: .5rem;
  z-index: 1;
  transition: .2s ease;
  overflow: hidden;
}

.apl {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -50%;
  right: -50%;
  background-color: #14a8;
  filter: blur(32px);
  border-radius: 50%;
}

.apay_icon {
  height: 2rem;
  padding-left: 2.5rem;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 2.25rem;
  font-size: var(--small-font-size);
  color: var(--text-color);
}

.apay_sum {
  color: var(--second-color);
}

.apay_img::after {
  position: absolute;
  content: '';
  height: 2px;
  width: 100%;
  top: -5px;
  left: 0;
  z-index: -1;
  transition: top 0s;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  background: #fff;
}

.apay__container .apay_active,
.apay_img:hover {
  opacity: 1;
  background-color: #0000;
}

.apay__container .apay_active::after,
.apay_img:hover::after {
  top: calc(100% + 5px);
  transition: all .5s ease;
}






/* === CONTACT === */

.contact{
  /* display: none; */
}

.contact__container {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 3rem;
}

.contact_rem {
  flex-grow: 1;
  height: 500px;
  background-color: #fff1;
}

.contact_form {
  height: 100%;
  flex-grow: 1;
  background-color: #fff1;
}

/*=============== FOOTER ===============*/
.footer {
  display: none;
  position: relative;
  overflow: hidden;
  /* padding: 1rem; */
}

.footer .shape__small,
.footer .shape__smaller {
  position: absolute;
}

.footer .shape__small {
  left: -150px;
  bottom: -150px;
}

.footer .shape__smaller {
  right: -100px;
  bottom: -100px;
}

.footer__container {
  padding: 1rem;
  grid-template-columns: 1fr;
  gap: 0;
  margin: auto !important;
}

.footer_left{
  background: linear-gradient(270deg, #0000, #47d9);

  --cb: 20%;
  -webkit-clip-path: polygon(0 100%, 100% calc(100% - var(--cb)), 100% 100%);
          clip-path: polygon(0 100%, 100% calc(100% - var(--cb)), 100% 100%);
}
.footer_right{
  background: linear-gradient(90deg, #0000, #47d9);

  --cb: 20%;
  -webkit-clip-path: polygon(0 100%, 0 calc(100% - var(--cb)), 100% 100%);
          clip-path: polygon(0 100%, 0 calc(100% - var(--cb)), 100% 100%);
}

.footer_desc{
  padding: 0 2rem 2rem;
  line-height: 1.6;
  background: radial-gradient(80% 30% at 50% bottom, #fa09, transparent);
  border-radius: 1rem;
  --chb: 0.75rem;
  --ch: 20%;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--ch)) 100%, calc(100% - var(--ch) - var(--chb)) calc(100% - var(--chb)), calc(var(--ch) + var(--chb)) calc(100% - var(--chb)), var(--ch) 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--ch)) 100%, calc(100% - var(--ch) - var(--chb)) calc(100% - var(--chb)), calc(var(--ch) + var(--chb)) calc(100% - var(--chb)), var(--ch) 100%, 0 100%);
}

.footer_desc div{
  color: var(--title-color);
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  position: relative;
}
.footer_desc div::before{
  content: '';
  position: absolute;
  width: 200px;
  height: 1px;
  bottom: 0;
  left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, #0000, #fff6, #0000);
}


.footer__copy {
  display: block;
  display: none;
  margin-top: 1rem;
  text-align: center;
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}

/*=============== SCROLL BAR ===============*/

::-webkit-scrollbar {
  width: 0.6rem;
  background-color: hsl(219, 4%, 16%);
  border-radius: 1rem;
}

::-webkit-scrollbar-thumb {
  background-color: hsl(219, 4%, 24%);
  border-radius: 1rem;
}

/* ::-webkit-scrollbar-thumb:hover {
  background-color: hsl(219, 4%, 32%);
} */


/*=============== SCROLL UP ===============*/
.scrollup {
  position: fixed;
  right: var(--scroll-pos);
  bottom: -30%;
  transition: bottom 0.3s ease-in;
  pointer-events: auto;
  z-index: var(--z-scroll);
}

.sc_button {
  width: var(--scroll-size);
  height: var(--scroll-size);
  padding: .25rem;
  transform: rotate(270deg);
  background-clip: padding-box;
  display: inline-flex;
  -moz-box-align: center;
  align-items: center;
  -moz-box-pack: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-color: rgb(69, 69, 69);
  transition: bottom 0.3s ease-in, border-color .2s ease-in;
  backface-visibility: hidden;
  user-select: none;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px 0px;
  cursor: pointer;
  appearance: none;
  overflow: visible;
  pointer-events: auto;
  display: inline-flex;
  -moz-box-pack: center;
  justify-content: center;
  -moz-box-align: center;
  align-items: center;
  gap: 8px;
  line-height: 100%;

  cursor: pointer;
}

.sc_button svg {
  color: var(--first-color); 
  /* rgb(87, 95, 255); */
}

.scrollup:hover{
  border-color: #888;
}

.show-scroll {
  bottom: 1.5rem;
}



@media (max-width: 639.5px) {
  .logo_reg {
    /* height: 300px; */
    margin-bottom: 0px;
  }

  .logo_reg .logo_out {
    /* height:200px; */
    margin: 0;
    box-shadow: none;
  }
}


.logo_out {
  width: 100%;
  height: 200px;
  min-width: 270px;


  border-radius: 10px;

  display: flex;
  justify-content: center;
  align-items: center;


  position: relative;
  overflow: hidden;

  /* background: linear-gradient(90deg,#fff1,transparent,#fff1); */
  /*
  -webkit-box-shadow: 0 0 0 1px #0008,  0 0 0 1px #fff2 inset, 0 0 20px #fff2 inset;
          box-shadow: 0 0 0 1px #0008,  0 0 0 1px #fff2 inset, 0 0 20px #fff2 inset;
*/

}





/* === QUEEN === */


.logo {
  height: 110px;
  display: flex;
  /* display: none; */
  flex-direction: column;
  width: 250px;
  /* font-family: Bebas Neue Pro; */
}


.bcap {
  background-image: -webkit-linear-gradient(left, transparent, #00aaffbf, transparent);
  background-image: -o-linear-gradient(left, transparent, #00aaffbf, transparent);
  background-image: linear-gradient(to right, transparent, #00aaffbf, transparent);
  width: 100%;
  -webkit-clip-path: polygon(12% 100%, 0 0, 20% 0, 23% 20%, 38% 20%, 41% 0, 58% 0, 61% 20%, 77% 20%, 80% 0, 100% 0, 89% 100%, 80% 100%, 85% 50%, 16% 50%, 21% 100%);
  clip-path: polygon(12% 100%, 0 0, 20% 0, 23% 20%, 38% 20%, 41% 0, 58% 0, 61% 20%, 77% 20%, 80% 0, 100% 0, 89% 100%, 80% 100%, 85% 50%, 16% 50%, 21% 100%);
  height: 50px;
  position: relative;
  opacity: 0;
  animation: sanim 1s 3s forwards;
}

.bcap::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-radial-gradient(circle at 50% 100px, #ffffff0c 5px, transparent 10px);
}

.bfig {
  display: none;
  background-image: -webkit-linear-gradient(left, transparent, #00aaff80, transparent);
  background-image: -o-linear-gradient(left, transparent, #00aaff80, transparent);
  background-image: linear-gradient(to right, transparent, #00aaff80, transparent);
  -webkit-clip-path: polygon(32.5% 100%, 27% 0, 73% 0, 67.5% 100%);
  clip-path: polygon(32.5% 100%, 27% 0, 73% 0, 67.5% 100%);
  position: relative;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: auto;
  height: 20px;
  width: 100%;
  margin-top: 15px;
  opacity: 0;
  animation: sanim 1s 3s forwards;

}

.bfig::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-radial-gradient(circle at 50% -50px, #ffffff0c 5px, transparent 10px);
}

@keyframes sanim {
  to {
    opacity: 1;
    margin-left: 0;
  }
}

.mcap {
  font-size: 2em;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(#000, #0f0, #000);
  background-image: -o-linear-gradient(#000, #0f0, #000);
  background-image: linear-gradient(#000, #0f0, #000);
  text-align: center;
  margin-top: -15px;
  opacity: 0;
  margin-left: 100%;
  animation: sanim 1s 2s forwards;
  user-select: none;
}

.mdesc {
  text-align: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(#000, #fff, #000);
  background-image: -o-linear-gradient(#000, #fff, #000);
  background-image: linear-gradient(#fff, #555);
  margin-left: -100%;
  opacity: 0;
  animation: sanim 1s 2s forwards;
  font-size: 1.2em;
  user-select: none;
  text-transform: uppercase;
}

/* === END QUEEN === */





/* === LOGO === */

.view {
  perspective: 400px;
  z-index: -1;
  position: absolute;
  height: 100%;
  width: 100%;
  display: block;
}

.plane {
  width: var(--smax);
  height: var(--smax);
  transform-style: preserve-3d;
}

.plane.main {
  position: absolute;
  inset: 0;
  margin: auto;
  transform: rotateX(60deg) rotateZ(-30deg);
  -webkit-animation: rotate 20s infinite linear;
  animation: rotate 20s infinite linear;
}

.plane.main .circle {
  width: var(--smax);
  height: var(--smax);
  position: absolute;
  transform-style: preserve-3d;
  border-radius: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 60px crimson, inset 0 0 60px crimson;
}

.plane.main .circle::before,
.plane.main .circle::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 10%;
  height: 10%;
  border-radius: 100%;
  background: crimson;
  box-sizing: border-box;
  box-shadow: 0 0 60px 2px crimson;
}

.plane.main .circle::before {
  transform: translateZ(-90px);
}

.plane.main .circle::after {
  transform: translateZ(90px);
}

.plane.main .circle:nth-child(1) {
  transform: rotateZ(72deg) rotateX(63.435deg);
}

.plane.main .circle:nth-child(2) {
  transform: rotateZ(144deg) rotateX(63.435deg);
}

.plane.main .circle:nth-child(3) {
  transform: rotateZ(216deg) rotateX(63.435deg);
}

.plane.main .circle:nth-child(4) {
  transform: rotateZ(288deg) rotateX(63.435deg);
}

.plane.main .circle:nth-child(5) {
  transform: rotateZ(360deg) rotateX(63.435deg);
}

@-webkit-keyframes rotate {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

/* === END LOGO === */









.anim {
  /* transition-property: opacity, transform; */
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  /* transition: all 0.3s ease-out; */
}




/* === LOGIN === */

:root {
  --bs: 30px;
  --rfmw: 400px;
  --fbmw: 800px;
  --smax: 90px;
}


.page {
  width: 100%;
  max-width: var(--fbmw);
}


.fb {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.logo_reg {
  min-width: var(--rfmw);
  padding: 10px;

  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;

  transform: scale(0);
  animation: freg1 1s 1s forwards;
}






#bru {
  position: relative;
  display: none;
}

#bru::before {
  /* content: '';
  position: absolute;
  width: calc(100% - 40px);
  height: calc(100% - 20px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: repeating-radial-gradient(circle at 50% 50%, transparent, #8881 10px); */
}






/* .blur-in {
  transform: scale(1);
  filter: blur(0px);
}

.blur-out {
  transform: scale(.5);
  filter: blur(32px);
} */


/* плавное появление */
.blur-in {
    filter: blur(0);
    transform: scale(1);
    /* opacity: 1; */
    transition: all 0.5s ease;
}

/* скрытие с размытием */
.blur-out {
    filter: blur(16px);
    /* transform: scale(0.5); */
    opacity: 0;
    transition: all .3s ease;
}

.is-locked {
    user-select: none;
    /* opacity: 0.5; */
    /* filter: grayscale(1); */
    cursor: not-allowed;
}

.login {
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.freg {
  min-width: 100%;
  /* padding: 1rem; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* gap: 3rem; */
  

  /* min-width: var(--rfmw); */
  /* background: #fff1; */
  /* border-radius: 10px; */

  /* -webkit-box-shadow: 0 0 0 1px #fff2 inset, 0 0 0 1px #000; */
  /* box-shadow: 0 0 0 1px #fff2 inset, 0 0 0 1px #000; */
  transition: transform .25s ease-out, filter .25s ease-out;
  animation: freg2 0.1s 0.1s forwards;
}

@keyframes freg2 {
  100% {
    opacity: 1;
  }
}

@keyframes freg1 {
  100% {
    transform: scale(1);
  }
}

.about-more {
  display: none;
}


.flog {
  display: none;

  /* display: flex; */
  margin-top: 2rem;
  flex-direction: column;
  gap: 2rem;
}






/* === BUTTON ONE === */

.bwb {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}


.btn-one {

  padding: 0 2rem;

  text-transform: uppercase;
  text-align: center;
  font-size: var(--normal-font-size);
  line-height: 50px;
  letter-spacing: 0.2px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;

  cursor: pointer;

  outline: none;
  transition: all 0.2s;

  background: #fff1;

  color: #0af;

  border-radius: .5rem;
  box-shadow: inset 0 0 0 1px #fff4, inset 0 0 0 2px #0008
}

.btn-one:hover {
  color: #0f0;
  box-shadow: inset 0 0 0 1px #0f0, inset 0 0 0 2px #0008;
  background: #0003;
}

/* === END BTN-ONE === */















/*=============== BREAKPOINTS ===============*/

/* For small devices */
@media screen and (min-width: 320px) {

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

  .about__main {
    background: #0004;
    padding: 2rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    box-shadow: 0 0 1px #0008, inset 0 0 1px #fff4;
  }

  .about__main div::before {
    display: none;
  }

  .about__group {
    width: 10rem;
    height: 10rem;
  }

}

@media screen and (min-width: 375px) {
  .apay__container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* For small mobile devices */
@media screen and (min-width: 480px) {
  .apay {
    width: auto;
  }
}

/* For medium devices */
@media screen and (min-width: 576px) {

  .apay__container {
    grid-template-columns: repeat(4, 1fr);
  }

  .ps_group {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 200px;
  }

  .ps_group_left {  }
  .ps_group_right {  }

  .dep_group {
    grid-template-rows: 1fr;
    grid-template-columns: 200px 1fr;
  }
  .dep_group_left { flex: 2; }
  .dep_group_right { flex: 3; }

  .calc_res {
    grid-template-columns: repeat(2, 1fr);
  }
  .calc_group { flex: 1; }
  .calc_res2 { flex: 1; }

  .sta_sum {
    font-size: var(--normal-font-size);
  }

  .ps_course {
    font-size: var(--h4-font-size);
  }

  .home_base {
    width: 100%;
  }
  
  .dep_group_left {
    grid-template-columns: repeat(3, 1fr);
  }

  .about__group {
    width: 12rem;
    height: 12rem;
  }

  .features__map {
    left: 0;
    right: 0;
  }

  .offer__spec {
    gap: 1.5rem;
  }

  .calc__container {
    width: min(100%, 40rem);
    grid-template-rows: initial;
    justify-content: center;
  }

  .faq__content {
    grid-template-columns: repeat(2, 1fr);
  }

  .offer__container {
    grid-template-rows: initial;
    grid-template-columns: .9fr;
    justify-content: center;
    gap: 2rem;
  }

  .cds_title {
    font-size: var(--h3-font-size);
  }

}


@media screen and (min-width: 768px) {

  :root {
    --rfmw: 300px;
  }

  nav.container {
    background-color: #0000;
    box-shadow: none;
  }

  .fs {
    font-size: var(--normal-font-size);
  }

  .section {
    padding-block: var(--padding-48-96);
  }

  .freg {
    /* min-width: auto; */
    position: relative;
    /* padding-block: 3rem; */
  }
  .freg::before,
  .freg::after {
    content: '';
    position: absolute;
    /* width: 50%; */
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    background: linear-gradient(90deg, #0000, #fa08, #0000);
  }
  .freg::before {
    top: 0;
  }
  .freg::after {
    bottom: 0;
  }

  .freg_wrapper {
    /* width: max(400px, 100%); */
    margin: unset;
  }

  .home__data {
    width: min(100%, 400px);
  }

  .home__header {
    align-items: start;
  }


  .about-more {
    display: grid;
  }

  .home_base {
    row-gap: 1rem;
  }

  .home__title {
    font-size: var(--h3-font-size);
  }

  .about__desc {
    padding-inline: 0;
    text-align: unset;
  }

  .about__container {
    /* width: 1100px; */
  }

  .about__container:last-of-type {
    /* display: grid; */
    /* margin: 0; */
  }

  .about__block {
    height: 100%;
  }

  .about-more {
    height: 100%;
    grid-template-columns: repeat(4, 1fr);
  }

  .about__desc {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .cds_title_per {
    font-size: var(--h4-font-size);
  }
  
  .nav__logo {
    display: flex;
  }

  .nav__item:nth-child(1){
    /* display: none; */
  }

  .nav__list {
    grid-template-columns: repeat(6, 1fr);
    font-weight: var(--font-medium);
    padding-top: 0;
    /* gap: var(--padding-16-32); */
    /* box-shadow: 0 0 0 1px #fff4; */
    border-radius: 2rem;
    gap: .5rem;
  }

  .nav__toggle,
  .nav__close {
    display: none;
  }
 
  .main_logo {
    background-size: 4rem;
  }

  .home__base {
    display: flex;
  }


  .offer__name {
    font-size: var(--small-font-size);
  }
  .popular__title {
    font-size: var(--h4-font-size);
  }
  .offer__duration {
    font-size: var(--normal-font-size);
  }
  .offer__duration span {
    /* font-size: var(--normal-font-size); */
  }
  .offer__img__wrapper {
    display: flex;
  }

  .sta {
    font-size: var(--h3-font-size)
  }
  .dep_group_right .sum_conv {
    font-size: var(--h4-font-size);
  }
  .res_data_usd {
    font-size: var(--normal-font-size);
  }
  
  .res_data_val {
    font-size: var(--h2-font-size);
  }



  .about__group {
    width: 10rem;
    height: 10rem;
  }

  .about__more-title {
    font-size: var(--normal-font-size);
  }


  .footer__container {
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 2rem;
  }
  .footer_desc{
    text-align: left;
  }

  .bwb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
  }

  .homereg__container,
  .home__container {
    grid-template-columns: 1fr 1fr;
    /* gap: 3rem; */
  }

  .home__base {
    align-items: end;
  }


  .offer__container {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
    align-items: center;
  }

  .dep_group_left {
    grid-template-columns: repeat(3, 1fr);
  }

  .ps_group_right span {
    font-size: var(--h4-font-size);
  }

  .ps_subtitle {
    font-size: var(--small-font-size);
  }

  .ps_course_dt {
    font-size: var(--small-font-size);
  }
  .ps_course_from {
    font-size: var(--small-font-size);
  }

  .about__title {
    text-align: initial;
  }

  .featured__content {
    grid-template-columns: repeat(2, 350px);
    gap: 2rem;
  }

  .nav {
    height: calc(var(--header-height) + 3rem);
  }

  nav.container {
    padding-inline: var(--padding-16-32);
  }

  .offer__spec {
    gap: 2rem;
  }

  .about__container {
    /* grid-template-columns: repeat(2, 1fr); */
  }

  .apay_img {
    font-size: var(--normal-font-size);
  }

}


@media screen and (min-width: 968px) {

  .home_base {
    min-width: var(--rfmw);
  }

  .offer__container {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
  }

  .dep_group_left {
    grid-template-columns: repeat(3, 1fr);
  }

  .apay__container {
    grid-template-columns: repeat(6, 1fr);
  }

  

}

/* For large devices */
@media screen and (min-width: 1024px) {

  .popular__card_wrap {
    width: min(100%, 18rem);
  }

}

/* For large devices */
@media screen and (min-width: 1040px) {

  .home__container {
    gap: 4rem;
  }

  .nav__logo{
    gap: 2rem;
  }
  .main_logo {
    background-size: 5rem;
  }

  .dep_group_left {
    grid-template-columns: repeat(2, 1fr);
  }

  .nav__logo {
    gap: 1rem;
  }
  

  .bg {
    background: #0000;
  }

  .home__car-icon {
    font-size: 1.25rem;
    margin-bottom: 2rem;
  }


  .home__stat_num span {
    font-size: var(--normal-font-size);
  }

  .popular__img {
    width: 180px;
  }

  .calc__container {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }

  .faq__content {
    grid-template-columns: repeat(3, 300px);
  }

  .offer__spec {
    gap: 2rem;
  }

  .offer__container {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5rem;
  }

  .offer__data,
  .offer__title {
    text-align: initial;
  }

  .offer__data {
    margin-bottom: 0;
  }

  .res_data_val {
    font-size: var(--h4-font-size);
  }

  .faq__title span {
    font-size: var(--normal-font-size);
  }

  .footer__title {
    margin-bottom: 1.5rem;
  }

  .footer_desc {
    padding: 2rem;
  }

  .footer__copy {
    margin: 1.5rem 0 1rem;
  }

}

/* Laptop */
@media screen and (min-width: 1280px) {
  .popular__card_wrap {
    width: min(100%, 22rem);
  }
}

/* For large devices */
@media screen and (min-width: 1400px) {

  :root {
    --rfmw: 400px;
  }

  .home__container {
    /* gap: 5rem; */
  }

  .freg_wrapper,
  .homereg__container {
    gap: 3rem;
  }

  .faq__content {
    grid-template-columns: repeat(4, 1fr);
  }
 

}


/* For mega large devices */
@media screen and (min-width: 1500px) {

  .about__group {
    width: 11rem;
    height: 11rem;
  }

  .about__block {
    height: 100%;
  }

  .shape__smaller {
    width: 230px;
    height: 230px;
  }
 
  .popular__img {
    width: 200px;
    margin: 1.5rem 0 2rem auto
  }

  .offer__spec {
    gap: 3rem;
  }

  .calc__group {
    gap: 3rem;
  }

}

.ps1{background-image:url("/assets/img/crypto/usdt.svg")}
.ps2{background-image:url("/assets/img/crypto/btc.svg")}
.ps3{background-image:url("/assets/img/crypto/ltc.svg")}
.ps4{background-image:url("/assets/img/crypto/doge.svg")}
.ps5{background-image:url("/assets/img/crypto/dash.svg")}
.ps6{background-image:url("/assets/img/crypto/bch.svg")}
.ps7{background-image:url("/assets/img/crypto/trx.svg")}
.ps8{background-image:url("/assets/img/crypto/xlm.svg")}
.ps9{background-image:url("/assets/img/crypto/eth.svg")}
.ps10{background-image:url("/assets/img/crypto/xmr.svg")}
.ps11{background-image:url("/assets/img/crypto/xrp.svg")}
.ps12{background-image:url("/assets/img/crypto/ton.svg")}


/* .ps1{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='%23fff'%3e%3cpath d='M72 67a123 123 0 0 1-16 0c-15-1-26-4-26-7s11-6 26-6v10a115 115 0 0 0 16 0V54c15 0 26 3 26 6s-11 6-26 7m0-14V43h21V29H35v14h21v10c-17 0-30 4-30 8s13 7 30 8v30h16V69c17-1 30-4 30-8s-13-8-30-8'/%3e%3c/svg%3e")}
.ps2{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='%23fff'%3e%3cpath d='M84 61c4-3 7-7 7-14-1-9-9-12-20-13V21h-8v12h-6V21h-8v13H33v8h5c4 0 5 2 5 4v36c0 1-1 2-3 2h-6l-1 10h16v13h8V94h6v13h8V94c14-1 23-4 24-17 1-10-4-14-11-16zM57 43c4 0 19-2 19 8 0 9-15 8-19 8V43zm0 42V67c5 0 22-2 22 9 0 10-17 9-22 9z'/%3e%3c/svg%3e")}
.ps3{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='%23fff'%3e%3cpath d='m60 86 4-18 12-4 2-10-11 4 8-30H53L42 67l-8 3-3 10 9-3-6 23h59l4-14H60'/%3e%3c/svg%3e")}
.ps4{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='%23fff'%3e%3cpath d='M60 27H39v33h-9v8h9v33h24s35 2 35-36c0-39-33-38-38-38zm3 60H53V68h15v-8H53V41h9c4 0 22 1 22 24 0 22-19 22-21 22z'/%3e%3c/svg%3e")}
.ps5{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='%23fff'%3e%3cpath d='M77 31H47l-3 13h27c14 0 18 5 18 13l-3 14c-2 6-6 13-22 13H37l-2 13h30c10 0 15-1 20-3 10-5 17-15 19-29 4-20-1-34-27-34'/%3e%3cpath d='M34 57c-8 0-9 5-10 8l-1 6h31c7 0 9-5 9-8l2-6H34z'/%3e%3c/svg%3e")}
.ps6{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='%23fff'%3e%3cpath d='M101 62c-2-6-7-10-15-10 4-5 5-9 3-14-4-10-13-12-27-7h-1l-3-9-7 3 3 9-8 2-4-10-7 3 4 10-1 1-3 1-9 3 3 9 10-3 14 38-9 4 3 9 17-7 5 12 7-3-4-12 6-2 4 10 8-3-4-10c14-6 19-14 15-24zM64 40c7-2 11-1 13 2 1 5-1 9-8 12l-13 5-5-14 13-5zm16 39-14 5-6-16 13-5c9-3 14-2 16 3s-1 9-9 13zm0 0'/%3e%3c/svg%3e")}
.ps7{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='%23fff'%3e%3cpath d='M87 34 25 23l33 82 45-55-16-16zm-1 5 10 9-26 5 16-14zM64 52 36 30l45 8-17 14zm-2 4-5 37-24-60 29 23zm4 2 29-5-33 40 4-35z'/%3e%3c/svg%3e")}
.ps8{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='%23fff'%3e%3cpath d='m97 35-11 6-53 27a32 32 0 0 1-1-4 32 32 0 0 1 47-28l7-3h1a39 39 0 0 0-62 31v3a7 7 0 0 1-3 7l-4 1v8l10-5 3-1 3-2 56-28 7-4 13-6v-8l-13 6zM110 45 38 81l-7 4-13 6v8l13-6 11-6 53-27a32 32 0 0 1 1 4 32 32 0 0 1-47 28h-1l-7 3a39 39 0 0 0 62-31v-3a7 7 0 0 1 3-7l4-1v-8z'/%3e%3c/svg%3e")}
.ps9{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='%23fff'%3e%3cpath d='M92 65 64 82 36 65l28-48 28 48zM64 87 36 70l28 41 28-41-28 17z'/%3e%3c/svg%3e")}
.ps10{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='%23fff'%3e%3cpath d='M83 87h20a45 45 0 0 1-78 0h20V64l19 19 19-19v23zm-48-8V41l29 29 29-29v38h14a45 45 0 0 0-43-60 45 45 0 0 0-43 60h14z'/%3e%3c/svg%3e")}
.ps11{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='%23fff'%3e%3cpath d='M97 25h14L83 53a27 27 0 0 1-38 0L17 25h14l21 21c7 7 17 7 24 0l21-21zm-67 78H17l28-28c11-10 27-10 38 0l28 28H98L76 82c-7-7-17-7-24 0l-22 21z'/%3e%3c/svg%3e")}
.ps12{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='%23fff'%3e%3cpath d='M37 24h55l6 1a11 11 0 0 1 4 5l2 6a13 13 0 0 1-2 6l-34 60a4 4 0 0 1-8 0L26 42l-2-5a12 12 0 0 1 7-12l6-1zm23 9H34a3 3 0 0 0-1 3l1 2 26 46V33zm8 0v51l27-46v-4l-1-1H68z'/%3e%3c/svg%3e")}
.ps13{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke='%234178dc' viewBox='0 0 48 48'%3e%3cpath d='M40.692 5.947l4.574 4.573-4.574 4.572-.565-.565 3.627-3.627h-6.766a7.096 7.096 0 0 0-7.088 7.088V23h-.8v-5.012a7.897 7.897 0 0 1 7.888-7.888h6.727l-3.588-3.588zM13.1 12h.8V4.9H35v-.8H13.1zm30 22.1H35v.8h8.9V17h-.8zM18 18.1h-2v.8h2zm0-2h-2v.8h2zm-2 4.8h2v-.8h-2zm2 1.2h-2v.8h2zm1.102.813l1.998.006V27h.8v-4.877l-1.999-.007V12.1H15.32l-1.42 1.632-.797.918v2.984l-.002.002-1.998 1.998V23h.8v-3.035l1.198-1.198.8-.8.001-.002V14.95l1.783-2.05h3.418zM13.9 37.1H15v.8H4v-.8h1.1v-11h2v-2h6.8v13zm-.8-.8V24.9H7.9v2h-2v10.2h7.2zm-1.998-9.2H10v.8h2v-.8h-.898zm0 2H10v.8h2v-.8h-.898zm0 2H10v.8h2v-.8h-.898zm21.798.4l-.003.019c0 .007.003.013.003.02v11.916c0 1.605-3.974 2.445-7.9 2.445s-7.9-.84-7.9-2.445V31.539c0-.007.003-.013.003-.02L17.1 31.5h.006c.042-1.033 1.733-1.727 3.994-2.084q.39-.062.8-.11.537-.064 1.1-.104c4.457-.318 9.818.447 9.894 2.298zm-14.995.019c.03.307.825.765 2.317 1.11A21.622 21.622 0 0 0 25 33.1c4.543 0 7.04-1.033 7.095-1.581-.055-.564-2.552-1.626-7.095-1.626a26 26 0 0 0-2.028.079c-3.25.253-5.021 1.074-5.067 1.547zM32.1 36.61c-1.353.85-4.236 1.29-7.1 1.29a21.618 21.618 0 0 1-5.5-.633q-.281-.078-.537-.167a5.241 5.241 0 0 1-1.063-.49v6.845c0 .558 2.506 1.645 7.1 1.645s7.1-1.087 7.1-1.645zm0-2.51v-1.49c-1.353.85-4.236 1.29-7.1 1.29a21.396 21.396 0 0 1-5.57-.654 6.097 6.097 0 0 1-1.53-.636v2.89c0 .543 2.506 1.6 7.1 1.6s7.1-1.057 7.1-1.6v-1.4z'/%3e%3c/svg%3e")}
.ps14{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke='%234178dc' viewBox='0 0 48 48'%3e%3cpath d='M44.9 38.5a3.34 3.34 0 0 0-3.95-3.345l-4.77-16.512A2.901 2.901 0 0 0 37.9 16a2.868 2.868 0 0 0-.419-1.478l9.482-7.608-.5-.623-9.479 7.605a2.893 2.893 0 0 0-4.369 3.748l-4.813 4.411a6.864 6.864 0 0 0-7.591-1.361l-4.36-8.488a4.389 4.389 0 1 0-4.926-7.257L7.339.852l-.602.527 3.584 4.095a4.376 4.376 0 0 0 1.577 7.114l-2.484 8.554A2.86 2.86 0 0 0 9 21.1 2.905 2.905 0 0 0 6.1 24a2.872 2.872 0 0 0 .594 1.74L.217 32.216l.566.566 6.478-6.477a2.87 2.87 0 0 0 4.453-1.315l4.474.959a6.751 6.751 0 0 0 1.665 5.63l-5.26 5.26a3.366 3.366 0 0 0-2.093-.74 3.4 3.4 0 1 0 0 6.8l.024-.002.58 4.616.793-.1-.58-4.624a3.368 3.368 0 0 0 1.842-5.383l5.26-5.26a6.872 6.872 0 0 0 10.214-1.175l9.797 6.09a3.363 3.363 0 0 0-.33 1.438 3.404 3.404 0 0 0 3.4 3.4 3.357 3.357 0 0 0 1.1-.198l1.515 3.138.72-.348-1.51-3.132A3.394 3.394 0 0 0 44.9 38.5zM35 13.9a2.1 2.1 0 1 1-2.1 2.1 2.101 2.101 0 0 1 2.1-2.1zM9.9 8.5a3.6 3.6 0 1 1 3.6 3.6 3.603 3.603 0 0 1-3.6-3.6zM9 26.1a2.1 2.1 0 1 1 2.1-2.1A2.101 2.101 0 0 1 9 26.1zm2.88-1.893c.004-.07.02-.136.02-.207a2.901 2.901 0 0 0-1.717-2.642l2.48-8.542a4.266 4.266 0 0 0 2.48-.24l4.359 8.487a6.919 6.919 0 0 0-3.147 4.103zM10.5 42.1a2.6 2.6 0 1 1 2.6-2.6 2.602 2.602 0 0 1-2.6 2.6zm12.5-9a6.1 6.1 0 1 1 6.1-6.1 6.107 6.107 0 0 1-6.1 6.1zm6.06-2.804a6.883 6.883 0 0 0-.715-7.653l4.819-4.417a2.666 2.666 0 0 0 2.245.633l4.769 16.508a3.405 3.405 0 0 0-1.32 1.02zM41.5 41.1a2.6 2.6 0 1 1 2.6-2.6 2.602 2.602 0 0 1-2.6 2.6z'/%3e%3c/svg%3e")}
.ps15{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke='%234178dc' viewBox='0 0 48 48'%3e%3cpath d='M43 42.126v.8H5.9V46h-.8v-3.1H2v-.8h3.1V9h.8v33.126zM31.1 46h.8v-2h-.8zm8 0h.8v-2h-.8zm-16 0h.8v-2h-.8zm-8 0h.8v-2h-.8zM4 32.1H2v.8h2zm0-10H2v.8h2zm0-10H2v.8h2zm4.547 20.175H8.25v-.8h.504l.09.05L15.124 35l8.238-12.136 6.51 3.404a2.13 2.13 0 1 1-.35.72l-5.898-3.085-8.248 12.15zM30.25 27.5a1.25 1.25 0 1 0 1.25-1.25 1.251 1.251 0 0 0-1.25 1.25zm3.821-2.574l-.877-.48 1.015-1.855.877.48zm2.03-3.71l-.877-.48 1.014-1.853.877.48zm2.029-3.707l-.877-.48 1.015-1.855.877.48zm2.03-3.71l-.878-.48 1.015-1.853.877.48zm2.03-3.707l-.878-.48 1.015-1.855.877.48z'/%3e%3c/svg%3e")}
.ps16{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' stroke='%234178dc' viewBox='0 0 48 48'%3e%3cpath d='M8 18.9a2.897 2.897 0 0 0 2.392-4.534l6.762-6.148a2.817 2.817 0 0 0 3.137.365l7.758 11.286a2.903 2.903 0 1 0 4.42.629l6.569-5.376a2.945 2.945 0 1 0-.506-.62l-6.57 5.376a2.833 2.833 0 0 0-3.253-.461L20.951 8.13a2.895 2.895 0 1 0-4.343-.497l-6.762 6.148A2.872 2.872 0 0 0 8 13.1a2.9 2.9 0 0 0 0 5.8zm33-8a2.1 2.1 0 1 1-2.1 2.1 2.102 2.102 0 0 1 2.1-2.1zM32.1 22a2.1 2.1 0 1 1-2.1-2.1 2.102 2.102 0 0 1 2.1 2.1zM19 3.9A2.1 2.1 0 1 1 16.9 6 2.102 2.102 0 0 1 19 3.9zm-11 10A2.1 2.1 0 1 1 5.9 16 2.102 2.102 0 0 1 8 13.9zm28.74 14.2H12.26L3.834 43.9h41.332zm-18.935 4.8H24.1v4.2h-7.44zm-1.974 4.2H8.367l2.24-4.2h6.37zm24.802 0H33.17l-1.145-4.2h6.37zm-8.293 0H24.9v-4.2h6.295zm-7.44-5v-3.2h5.204l.872 3.2zm-.8 0h-6.076l.872-3.2H24.1zm0 5.8v5.2h-9.076l1.418-5.2zm.8 0h7.658l1.418 5.2H24.9zm8.487 0h7.673l2.773 5.2h-9.028zm4.58-5.8h-6.162l-.872-3.2h5.327zM12.74 28.9h5.327l-.872 3.2h-6.161zm-4.8 9h7.673l-1.418 5.2H5.167z'/%3e%3c/svg%3e")} */


.cps .icon {
  pointer-events: none;
  width: 2rem;
  height: 2rem;
  color: var(--title-color);
  fill: currentColor; /* цвет наследуется от родителя */
}

.about__more-img .icon {
  width: 4rem;
  height: 4rem;
  /* color: var(--white-color); */
  stroke: var(--first-color);
  fill: currentColor; /* цвет наследуется от родителя */
}







.about-more {
  display: none;
  /* width: 100%;
  grid-template: 1fr 1fr 2fr / 1fr 1fr; */
}

.about__desc {
  /* grid-row: 1; */
}

.about-more{
  /* grid-template: 1fr / 1fr; */
}

.dark-card:not(.is-active),
.about__more:not(.is-active) {
  /* display: none; */
}




.aeff {
  /* font-size: 2.5rem; */
  /* font-weight: 700; */
  background: linear-gradient(90deg, #8e2de2, #4a00e0, #00c6ff, #f7971e, #8e2de2);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 6s linear infinite;
  margin: 0;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}