@font-face{
	font-display:swap;
	font-family:'Evolventa';
	src:url(./Evolventa-Regular.woff2) format("woff2");
	font-weight:400;
	font-style:normal
}

@font-face{
	font-display:swap;
	font-family:'Manrope';
	src:url(./Manrope-Regular.woff2) format("woff2");
	font-weight:400;
	font-style:normal
}
@font-face{
	font-display:swap;
	font-family:'Manrope';
	src:url(./Manrope-Medium.woff2) format("woff2");
	font-weight:500;
	font-style:normal
}
@font-face{
	font-display:swap;
	font-family:'Manrope';
	src:url(./Manrope-Bold.woff2) format("woff2");
	font-weight:700;
	font-style:normal
}



:root{
--dark: #222123;
--red: #AE1547;
--green:#C3FF60;
--gray:#BDBCBD;
--gray-light:#f7f6f9;


--mainfont: "Evolventa",Arial,sans-serif;
--accentfont: "Manrope",sans-serif;
--fontsize: 15px;
--lineheight: 1.5;

--margin-top:90px;
--wrap-indent:15px;
}
@media (min-width : 768px) {
	:root{
		--margin-top:100px;
	}
}
@media (min-width : 989px) {
	:root{
		
	}
}
@media (min-width : 1239px) {
	:root{
		--margin-top:130px;
	}
}

@media (min-width : 1539px) {
	:root{
		--fontsize: 17px;
		--margin-top:170px;
	}
}





html {box-sizing: border-box;}
*, *:before, *:after {
  box-sizing: inherit;
}
::-webkit-scrollbar {	width: 0px; height: 0px;	}
body {
	font-family: var(--mainfont);
	font-size: var(--fontsize);
	line-height: var(--lineheight);
	color: var(--dark);
	min-width: 360px;
	position: relative;
	overflow-x: hidden;
	    margin: 0;
    padding: 0;
}
			
h1,h2,h3,h4,h5,h6{margin: 0;padding: 0;font-weight: 400;}




a{color: var(--dark); text-decoration: none; transition: color .3s ease, border-color .3s ease; }
a:hover{color: var(--red); border-color: var(--red);}
svg{transition: fill .3s ease}

ul{padding: 0;margin: 0;list-style: none;}
.accent{color: var(--red);}
.fixed {position: fixed !important;}


button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: none
}
input, textarea {
    outline: none;
}


.btn {
	cursor: pointer;
	display: block;
	background: transparent;
	font-family:var(--accentfont);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 120%; 
text-transform: uppercase;
transition: border-color .3s ease, color .3s ease, opacity .3s ease;
}

.circle{
  border-radius: 50%;
	padding: 18px;
	border: 1px solid var(--dark);

}
.circle .btn__inner{
  width: 100px;
  height: 100px;
  background: var(--dark);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: transform 0.4s ease-out, background-color .3s ease, color .3s ease;
  will-change: transform;
  overflow: hidden;
	line-height: 120%;
}
@media (min-width : 989px) {
.circle .btn__inner{width: 115px;  height: 115px;font-size: 14px;}

}

@media (min-width : 1239px) {
	.btn:hover {border-color:var(--red)}
	.btn:hover > * {background-color: var(--red);}
		.circle{ padding: 22px;}
	.circle .btn__inner{width: 145px;  height: 145px;font-size: 20px;line-height: 130%;}
}
@media (min-width : 1539px) {
	.circle{ padding: 25px;}
	.circle .btn__inner{width: 160px;  height: 160px;}
}



.wrap--boxed {
	position: relative;
	margin: 0 var(--wrap-indent);
}
@media (min-width:989px) {
	.wrap--boxed {margin: 0 auto; max-width: 960px;}
}
@media (min-width : 1239px) {
	.wrap--boxed {max-width: 1200px;}
}
@media (min-width : 1539px) {
	.wrap--boxed {max-width: 1500px;}
}



.dot{display: inline-block; width: 6px;height: 6px; background: var(--red); transform: translate(2px,-8px); border-radius: 100%; animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%   {  opacity: 1; }
  50%  {opacity: .2; }
  100% {  opacity: 1; }
}


.topbar {
	width: 100%; position: absolute;	left: 0; top: 0; z-index: 9;;
}
.topbar.fixed{
	background-color: #fff;
}
.topbar__box {
	display: flex; align-items:center;
	padding-top: 15px;padding-bottom: 15px;
	position: relative;
	height: 66px;
}
.topbar__mobile {
	width:36px; margin-right: 15px;	display: flex;align-items: center; justify-content: center;
}
.topbar__mobile .close {display: none;}
.topbar__logo {display: none;}
.topbar__right {
	display: flex;  align-items: center;   order: 1;  margin-left: auto;  justify-content: flex-end;
}
.topbar__tel {
	font-size: 18px;
	border-radius: 50px;
	border: 1px solid var(--dark);
	margin-right: 15px;
	padding: 0 20px;
	display: flex;
	align-items: center; 
	height: 36px;
	line-height: 1;
	font-family: var(--accentfont);
}
.topbar__wa {
	fill:var(--dark);
	width: 36px;
	height: 36px;
}
.topbar__menu {display: none;}
.topbar__menu-li{width: 100%;}
.topbar__menu-item { display: flex; align-items: center; gap:2px; font-style: 16px;}
.topbar__menu-item:after {content: ''; display: block; width: 16px;height: 36px; margin-left: auto; background: url(../img/arrow.svg) no-repeat center right;}

@media (min-width : 768px) {
	.topbar {background-color: transparent;}
	.topbar__logo{display: block;}
	.topbar__logo-img {fill:var(--red);}
}
@media (min-width : 1239px) {
	.topbar__box {margin-top: 16px;}
	.topbar__mobile{display: none;}
	.topbar__logo-img { width: 145px;height: 36px;}
	.topbar__right {margin-left: 32px;}
	.topbar__tel {font-size: 16px; padding: 0 22px;	margin-right: 20px;}
	.topbar__menu {display:flex; align-items: center;        margin-left: auto; gap: 32px;        justify-content: flex-end;  }
	.topbar__menu-item {white-space: nowrap; transition: color .3s ease; will-change: color;}
	.topbar__menu-item:hover {color: var(--red);cursor: pointer;}
	.topbar__menu-item:after {display: none;}
	.topbar__wa:hover > svg {fill:var(--red)}
}
@media (min-width : 1539px) {
	.topbar__menu {gap: 58px; }
	.topbar__right {margin-left: 58px;}
	.topbar__logo-img { width: 150px;height: 38px;vertical-align: baseline;}
	.topbar__menu-item {font-size: 18px;}
	.topbar__tel {font-size: 18px; height: 40px;}
	.topbar__wa {width: 40px;height: 40px;}
}









.header{
	padding-top: 120px;
	position: relative;
	font-size: 1vw;
	overflow: hidden;

}
.header .green-circle{
	position: absolute;
	top: 0;
	left: -10%;
	width: 120%;
	height: 76em;

	transform: translateY(-100%);
  animation: dropIn 1s ease-out forwards;
  transform-origin: center;
}

@keyframes dropIn {
  to {
    transform: translateY(0);
  }
}

.header__img{
	position: absolute;
	left: 0;
	
	transform:translate(-100%,-5%);
	
	animation: slideLeft 1s ease-out forwards;
  transform-origin: center;
}

@keyframes slideLeft {
  to {
   transform:translate(-25%,-5%);
  }
}

.header__img > img{
	width:106em;
	height: auto;
}


.header__box{
	height: 132em;
}
.header__text {
	color: var(--dark);
	font-size: 3.8em;
  line-height: 120%;
  position: absolute;
  bottom: 0;
  font-weight: 400;
  letter-spacing: .025em;
  font-family: var(--accentfont);
}
.header__text > span{
	display: block;
}

.header__title {
	font-family: var(--accentfont);;
	font-size: 13.8em;
	font-weight: 700;
	line-height: 70%; 
	letter-spacing:-0.08em;
	text-transform: uppercase;
	text-align: right;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.15em;
}
.header__title span{
	order: 1;
}
.header__title small{
	font-size: .27em;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: .05em;
	text-transform: uppercase;

}

.header__tags {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 5em;
    align-items: flex-end;
}
.header__tags-item {
	display: flex;
	width: 15.75em;
  height: 3.3em;
	transform: rotate(-5.198deg);
	padding: 0 1.25rem;
	align-items: center;
	gap: 1rem;
	border-radius: 100px 0 0 100px;
	background: var(--red);
	color: #fff;
	font-size: 3.38em;
	font-weight: 500;
	line-height: 120%;
}
.header__tags-item:last-child{
	animation: rotate 1s ease-out forwards;
  transform-origin: center; 
}

@keyframes rotate {
  to {
   transform: rotate(3.643deg);
  }
}
.header__tags-item:before{
	content: '';
	flex: 0 0 8px;
	height: 8px;
	border-radius: 100%;
	background: #c8c8ab;
}
.header__btn{
margin: 1.5em auto;transform: translateX(2em);font-size: 3.65em;
}
.header__btn.circle{
	 padding: 1.115em;
}
.header__btn.circle .btn__inner{
	    width: 7.1em;
			height:7.1em
}
@media (min-width:989px) and (max-width:1239px) {
	.header__btn {font-size: 16px;}
	.header__btn.circle {padding: 18px;transform: none;        margin: -35px auto -75px;}
}

   
@media (min-width:767px) {
	.header__box {  height: 52em;}

	.header .green-circle {  left: 14em;  height: 52em;}
	.header__img > img {         width: 52em;        height: 55em;}
	.header__img {    left: 50%;  transform: translate(-200%, -5%);} 
	@keyframes slideLeft {
		to {
		transform:translate(-100%,-5%);
		}
	}


	.header__title {display: block; font-size: 9.75em;    letter-spacing: -0.24rem;text-align: center; line-height: 60%;}
	.header__title small{        font-size: .41em;}

	.header__text { position: relative; margin: 1em 0 0 29.415em; font-size: 2em; letter-spacing:0;}
	/* .header__text > span{ display: inline-block;} */

	.header__btn {  font-size: 1.85em;         margin:0em auto -6.5em;     transform: none; transform: translateY(-2em);}

	.header__tags{    position: absolute;   right: 7em;}
	.header__tags-item {font-size: 1.7em; padding: 0 1.3rem;}
	.header__tags-item:last-child{ transform:  rotate(0deg) translate(0, 1.5em);}
	@keyframes rotate {
  to {
   transform:  rotate(10deg) translate(-3em, 1.5em);
  }
}
	.header__tags-item:before { background-color:var(--green) }
	.header__tags-item:last-child:before { background-color: #fff }
}

@media (min-width:989px) {
	.header__box {    height: 440px;  }
	.header .green-circle {        left: 12em;        height: 49.5em;    }
  .header__title {   font-size: 98px;    letter-spacing: -4.9px;        line-height: 50%;}
	.header__title small { font-size: 41px;      letter-spacing: 1.38px; line-height: 1;}
  .header__text { font-size: 18px;    width: 360px;   margin: 20px 0 0 auto;  }
	.header .green-circle {  left: 120px;  height: 490px; top: -60px;}
	.header__img {   transform: translate(-200%, -50px);  }
		@keyframes slideLeft {
		to {
		transform:translate(-105%, -50px)
		}
	}
	.header__img > img {     width: 451px;    height: 490px;  }



	.header__tags {gap: 30px;}
	.header__tags-item {   font-size: 14px; }

		.header__tags-item:last-child{ transform:  rotate(0deg) translate(0,22px);}
	@keyframes rotate {
  to {
   transform: rotate(10deg) translate(-90px, 22px);
  }
}
}
@media (min-width:1239px) {
	.header { padding-top: 140px;}
	.header__box {    height: 550px; }
	.header__img { transform: translate(-205%, -60px);  }
		@keyframes slideLeft {
		to {
		transform:translate(-105%, -60px)
		}
	}
	.header__img > img{	width: 568px;height: 617px;}
	.header .green-circle {  width: 1270px;   height: 630px;   top: 0;   left:auto; right: 40%;  transform: translate(50%,-100%);}
	@keyframes dropIn {
		to {
			transform: translate(50%, -130px)
		}
	}


	.header__title {  font-size: 130px;   letter-spacing: -10.4px; }
	.header__title small {    font-size: 52px;    letter-spacing: 1.55px;    }

	.header__text {   width: 468px;}

	.header__tags {        right: 50px;  gap: 50px;  }
	.header__tags-item {    font-size: 15px;  }
			.header__tags-item:last-child{ transform:  rotate(0deg) translate(0,30px);}
	@keyframes rotate {
  to {
    transform: rotate(10deg) translate(-170px, 30px);
  }
}
	.header__tags-item:before { flex: 0 0 12px;   height: 12px;}
  .header__btn.circle { margin: 25px auto -190px;    }
}
@media (min-width:1539px) {
	 .header {        padding-top: 160px;    }
	     .header__box {
        height: 700px;
    }
	     .header__img > img {
        width: 689px;
        height: 748px;
    }
		    .header__text {
		width: 570px;
    margin-top: 40px;
    padding-right: 60px;
		font-size: 24px;
    }

		.header .green-circle {
                width: 1650px;
        height: 850px;transform: translate(47%, -100%);
		}
		@keyframes dropIn {
		to {
			transform: translate(47%, -240px);
		}
	}


	.header__title{        font-size: 162px;   letter-spacing: -12.96px;    }

				

	.header__title small {        font-size: 64px;        letter-spacing:2.55px;    }

	.header__btn {font-size: 20px;line-height: 120%;letter-spacing: -0.4px;}
	.header__btn.circle {transform: none;        margin:-30px auto -150px;}
	.header__btn.circle .btn__inner { width: 160px; height: 160px}
	.header__tags {       right: 90px;        gap: 70px;    }
	.header__tags-item {
    font-size: 18px;
    padding: 10px 36px;
    width: 310px;
		        height: 66px;
    gap: 30px;
}
}


.line {
margin-top: 30px;
	width: 100%;
}
.line .items-wrap {
  position:relative;
  display:flex;align-items: center;
	background: var(--dark);
  height: 36px;
  overflow:hidden;
  user-select:none;
  gap:20px
}
.line .items {
  flex-shrink:0;
  display:flex;
  gap:20px;
  justify-content:space-around;
  min-width:100%;
}
.line .item {
	font-family: var(--accentfont);
  font-size:14px;
  font-weight:400;
  line-height:130%;
  text-transform:uppercase;
  letter-spacing:2.5px;
  flex:0 0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
	
}
.marquee {
  animation:scroll 30s linear infinite;
  --indentline:20px
}
.reverce {
  animation-direction:reverse
}
@media (min-width:767px) {
  .line {
    padding:10px 0
  }
	.line .item {
  font-size:13px;
	}
}
@media (min-width:1239px) {
	.line .items-wrap { height: 40px;}
.line .item {    font-size:16px ;}
.line .items, .line .items-wrap {   gap:40px }
.marquee {
    --indentline:40px
  }
}



.no-scroll {
    position: fixed;
    right: 0;
    left: 0;
    overflow: hidden
}

.popup {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    transition: .3s ease;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto
}



@keyframes scroll {
  from {
    transform:translateX(0)
  }
  to {
    transform:translateX(calc(-100% - var(--indentline)))
  }
}