@charset "UTF-8";
.hero{
padding:24px 0}
.hero__title{
position:relative;
margin-bottom:20px}
.hero__title--image-1{
max-height:218px}
@media(min-width:834px){
.hero__title--image-1{
max-height:234px;
width:100%;
max-width:800px}
}
@media(min-width:1440px){
.hero__title--image-1{
display:none}
}
.hero__title--image-2{
display:none}
@media(min-width:1440px){
.hero__title--image-2{
display:block;
max-height:130px;
width:100%;
max-width:1050px}
}
.hero__title .button{
cursor:pointer;
width:100%;
height:73px;
padding-left:40px;
background-color:#21c004;
border:none;
outline:none;
border-radius:121.37px}
@media(min-width:834px){
.hero__title .button{
max-width:347px;
height:95px;
border-radius:113.02px;
position:absolute;
bottom:0;
left:0}
}
@media(min-width:1200px){
.hero__title .button{
position:absolute;
top:25px;
left:0}
}
@media(min-width:1440px){
.hero__title .button{
position:absolute;
top:18px;
left:0}
}
.hero__title .button div{
position:relative;
z-index:1;
display:flex;
flex-direction:row-reverse;
align-items:center;
justify-content:center;
gap:12px;
max-width:320px}
@media(min-width:440px){
.hero__title .button div{
gap:52px}
}
.hero__title .button div span{
font-weight:700;
color:#fff;
font-size:40px}
@media(min-width:834px){
.hero__title .button div img{
width:62px;
height:62px}
}
.hero__title .button div .avatar{
position:relative;
width:73px;
height:73px;
border-radius:50%;
overflow:hidden}
@media(min-width:834px){
.hero__title .button div .avatar{
width:95px;
height:95px}
}
.hero__title .button div .avatar img{
width:100%;
height:100%}
.hero__top{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px}
@media(min-width:1440px){
.hero__top{
grid-template-columns:repeat(4,1fr);
grid-template-rows:repeat(3,1fr)}
}
.hero__top .item{
padding:16px;
border-radius:16px}
.hero__top .item-1{
padding:0;
position:relative;
grid-column:1/-1;
min-height:265px}
@media(min-width:834px){
.hero__top .item-1{
min-height:519px}
}
@media(min-width:1440px){
.hero__top .item-1{
grid-column:1/3;
grid-row:1/4}
}
.hero__top .item-1 iframe{
width:100%;
height:100%}
.hero__top .item-2{
grid-column:1/-1;
min-height:211px;
background:url("background2-CL4Qymoa.jpg") 50% 100%/103% 103% no-repeat}
@media(min-width:834px){
.hero__top .item-2{
min-height:321px}
}
@media(min-width:1200px){
.hero__top .item-2{
min-height:329px}
}
@media(min-width:1440px){
.hero__top .item-2{
grid-column:3/5;
grid-row:1/3}
}
.hero__top .item-2 h3{
max-width:300px;
margin-top:30px;
margin-bottom:22px;
font-size:34px;
font-weight:700;
line-height:.87}
@media(min-width:834px){
.hero__top .item-2 h3{
max-width:500px;
margin-top:120px;
margin-bottom:40px;
font-size:58px}
}
@media(min-width:1200px){
.hero__top .item-2 h3{
max-width:100%}
}
@media(min-width:1440px){
.hero__top .item-2 h3{
margin-top:60px;
max-width:500px}
}
@media(min-width:1920px){
.hero__top .item-2 h3{
max-width:100%}
}
.hero__top .item-2 span{
display:inline-block;
max-width:300px}
@media(min-width:834px){
.hero__top .item-2 span{
max-width:500px;
font-size:40px}
}
@media(min-width:1200px){
.hero__top .item-2 span{
max-width:100%}
}
@media(min-width:1440px){
.hero__top .item-2 span{
max-width:500px}
}
@media(min-width:1920px){
.hero__top .item-2 span{
max-width:100%}
}
.hero__top .item-3{
grid-column:1/2}
@media(min-width:1440px){
.hero__top .item-3{
grid-column:3/4;
grid-row:3/4}
}
.hero__top .item-4{
grid-column:2/3}
@media(min-width:1440px){
.hero__top .item-4{
grid-column:4/5;
grid-row:3/4}
}
.hero__top .small-item{
background-color:#08150b;
background:url("background1-Bi4TVmdl.jpg") 85% 90%/300px 300px no-repeat;
min-height:174px}
@media(min-width:600px){
.hero__top .small-item{
background:url("background1-Bi4TVmdl.jpg") 85% 90%/105% 300px no-repeat}
}
@media(min-width:834px){
.hero__top .small-item{
min-height:182px}
}
@media(min-width:1200px){
.hero__top .small-item{
min-height:143px}
}
@media(min-width:1440px){
.hero__top .small-item{
min-height:182px}
}
.hero__top .small-item div{
display:flex;
flex-direction:column;
gap:4px;
max-width:282px}
@media(min-width:834px){
.hero__top .small-item div{
gap:12px}
}
@media(min-width:834px){
.hero__top .small-item div span{
font-size:28px}
}
.hero__top .small-item div img{
width:28px;
height:29px}
@media(min-width:834px){
.hero__top .small-item div img{
width:52px;
height:52px}
}
.hero__bottom{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:4px;
margin-top:8px}
@media(min-width:834px){
.hero__bottom{
margin-top:16px;
gap:16px}
}
.hero__bottom .item{
background-color:#0b1a0f;
border-radius:9.33px;
height:80px;
overflow:hidden}
.hero__bottom .item img{
width:100%;
height:100%}
@media(min-width:440px){
.hero__bottom .item{
height:100px}
}
@media(min-width:834px){
.hero__bottom .item{
height:140px}
}
@media(min-width:1200px){
.hero__bottom .item{
height:200px}
}
@media(min-width:1920px){
.hero__bottom .item{
height:220px}
}
.hero__footer{
margin-top:20px}
.hero__footer .text{
margin-bottom:15px;
font-size:34px;
color:#21c004;
max-width:384px}
@media(min-width:440px){
.hero__footer .text{
font-size:40px;
max-width:100%}
}
@media(min-width:834px){
.hero__footer .text{
margin-bottom:29px;
font-size:80px}
}
.hero__footer .button{
cursor:pointer;
width:100%;
height:80px;
padding:0 40px;
background-color:#21c004;
border:none;
outline:none;
border-radius:60.27px}
@media(min-width:834px){
.hero__footer .button{
height:156px;
border-radius:117.78px}
}
.hero__footer .button div{
position:relative;
z-index:1;
display:flex;
flex-direction:row-reverse;
align-items:center;
gap:15px;
max-width:320px}
@media(min-width:440px){
.hero__footer .button div{
max-width:100%}
}
@media(min-width:590px){
.hero__footer .button div{
justify-content:center}
}
@media(min-width:834px){
.hero__footer .button div{
gap:32px}
}
.hero__footer .button div span{
font-weight:700;
color:#fff;
font-size:20px;
text-transform:uppercase;
text-align:start}
@media(min-width:440px){
.hero__footer .button div span{
font-size:24px}
}
@media(min-width:834px){
.hero__footer .button div span{
font-size:40px}
}
@media(min-width:834px){
.hero__footer .button div img{
width:62px;
height:62px}
}
.effect-button{
background:linear-gradient(90deg,#88ff73,#55c004,#189e00,#88ff73);
background-size:400%;
display:inline-block;
color:#fff;
position:relative;
cursor:pointer;
animation:glowing 8s linear infinite}
.effect-button:after{
content:" ";
position:absolute;
border-radius:inherit;
inset:-6px;
background:inherit;
background-size:inherit;
opacity:0;
transition:opacity .5s ease;
filter:blur(16px);
animation:glowing 7s linear infinite;
transform:translateZ(0)}
.effect-button:hover:after{
opacity:1}
.effect-block{
position:relative;
background:linear-gradient(0deg,#000,#272727)}
.effect-block:after,.effect-block:before{
content:"";
position:absolute;
left:-2px;
top:-2px;
background:linear-gradient(45deg,#fb0094,#00f,#0f0,#ff0,red,#fb0094,#00f,#0f0,#ff0,red);
background-size:400%;
width:calc(100% + 4px);
height:calc(100% + 4px);
z-index:-1;
animation:steam 20s linear infinite}
.effect-block:after{
filter:blur(50px)}
.thank-you-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000c;
display:flex;
justify-content:center;
align-items:center;
z-index:10000;
animation:fadeIn .3s ease-out}
.thank-you-popup .thank-you-content{
display:flex;
flex-direction:column;
background:#000;
padding:2rem 4rem;
border-radius:24px;
font-size:1.5rem;
font-weight:700;
color:#fff;
text-align:center}
@media(min-width:834px){
.thank-you-popup .thank-you-content{
font-size:2.5rem}
}
@keyframes fadeIn{
0%{
opacity:0}
to{
opacity:1}
}
@keyframes glowing{
to{
background-position:-400%}
}
@keyframes steam{
0%{
background-position:0 0}
50%{
background-position:400% 0}
to{
background-position:0 0}
}
.main__wrapper{
display:flex;
flex-direction:column;
gap:20px}
*,*:before,*:after{
box-sizing:border-box}
ul[class],ol[class]{
padding:0}
body,h1,h2,h3,h4,p,ul[class],ol[class],li,figure,figcaption,blockquote,dl,dd{
margin:0}
body{
min-height:100vh;
scroll-behavior:smooth;
text-rendering:optimizeSpeed;
line-height:1.5}
ul[class],ol[class]{
list-style:none}
a:not([class]){
text-decoration-skip-ink:auto}
img{
max-width:100%;
display:block}
article>*+*{
margin-top:1em}
input,button,textarea,select{
font:inherit}
a{
color:inherit;
text-decoration:none}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
-webkit-appearance:none;
margin:0}
input[type=number]{
-moz-appearance:textfield}
*{
box-sizing:border-box;
margin:0;
padding:0}
html,body{
min-width:320px;
min-height:100vh;
background:#000908;
color:#fff;
line-height:1.2;
font-family:Roboto,sans-serif;
font-weight:600;
font-style:normal;
font-size:24px;
letter-spacing:-2%}
html .container,body .container{
min-width:320px;
max-width:1920px;
margin:0 auto;
padding:0 12px}
@media(min-width:834px){
html .container,body .container{
padding:0 20px}


/* === Center text and icon inside button === */
.button div {

  display: flex;

  align-items: center;

  justify-content: center;
   /* центрируем содержимое по горизонтали */
  flex-direction: row-reverse;
 /* чтобы иконка была справа, а текст слева (для арабского) */
  gap: 10px;

  text-align: center;

}


.button div span {

  direction: rtl;

  text-align: center;

  display: inline-block;

}


}



/* === Center text and icon inside button === */
.button div {
  display: flex;
  align-items: center;
  justify-content: center;   /* центрируем содержимое по горизонтали */
  flex-direction: row-reverse; /* чтобы иконка была справа, а текст слева (для арабского) */
  gap: 10px;
  text-align: center;
}

.button div span {
  direction: rtl;
  text-align: center;
  display: inline-block;
}
a.button,
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

/* Центрируем внутренний контент */
a.button div,
button.button div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse; /* для арабского текста — иконка справа */
  gap: 10px;
  width: 100%;
  text-align: center;
}

a.button div span,
button.button div span {
  direction: rtl;
  text-align: center;
  display: inline-block;
  font-weight: 700;
  color: #fff;
}