ul {
    list-style: none;
    -webkit-padding-start: 0;
    padding-inline-start: 0
}

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

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0
}

body {
    font-family: "Roboto", sans-serif;
    font-size: .72917vw;
    font-style: normal;
    color: #fff;
		background: #050075;
}

a {
	transition: .3s ease all;
}

main {
    background: #050075 var(--bg-desk) center top / 100%  no-repeat
}

@media only screen and (max-width:584px) {
    main {
      background: #090481 var(--bg-mob) center top / 100%  no-repeat
    }
}

.first-block {
	height: 100vh;
	min-height: calc((950 / 1920) * 100vw);
	padding-top: calc((35 / 1920) * 100vw);
	padding-bottom: calc((50 / 1920) * 100vw);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
}
.header {
	width: 100%;
	position: relative;
}
.logo {
	width: calc((261 / 1920) * 100vw);
	margin: 0 auto;
	display: block;
}
.logo img {display: block; width: 100%;}
.first-block .texts {
	width: calc((800 / 1920) * 100vw);
	margin: 0 auto;
}
.header-button {
	background: #FF01F7;
	width: calc((108 / 1920) * 100vw);
	height: calc((43 / 1920) * 100vw);
	border-radius: calc((6 / 1920) * 100vw);
	position: absolute;
	right: calc((90 / 1920) * 100vw);
	top: 0;
	color: #fff;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center; 
	font-weight: 500; 
	font-size: calc((16 / 1920) * 100vw); 
}
.header-button:hover {
	opacity: .9;
}
.first-block .offer {
	font-family: 'Alfa Slab One';
	font-weight: 400; 
	font-size: calc((80 / 1920) * 100vw); 
	line-height: 100%;
	letter-spacing: 5%;
	margin-bottom: calc((36 / 1920) * 100vw);
}
.first-block .offer span {
	font-size: calc((32 / 1920) * 100vw); 
	font-weight: 700;
	font-family: 'Roboto';
}
.button-offer {
	background: #FFDD00;
	width: calc((212 / 1920) * 100vw);
	height: calc((77 / 1920) * 100vw);
	border-radius: 6px; 
	color: #000;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center; 
	margin: 0 auto calc((32 / 1920) * 100vw);
	font-weight: 500; 
	font-size: calc((26 / 1920) * 100vw); 
	text-transform: uppercase;
}
.button-offer:hover { 
	box-shadow: 0px 0px 35.81px 7.16px #FFDD0080; 
}
.first-block .terms { 
	font-weight: 400; 
	font-size: calc((14 / 1920) * 100vw); 
	line-height: calc((24 / 1920) * 100vw); 
	color: #8798D7;
}


.video-section { 
    display: flex;
    justify-content: center;
    align-items: center;
		padding-bottom: calc((68 / 1920) * 100vw); 
} 
.video-section.bg {
	background: radial-gradient(330.7% 100% at 50% 0%, #050075 3.47%, #2E3563 80.08%);
}
.video-container {
    position: relative;
    width: 100%;
    max-width: calc((1024 / 1920) * 100vw);
    aspect-ratio: 16/9;
    border-radius: calc((16 / 1920) * 100vw);
    overflow: hidden;
    background: #000;
    box-shadow: 0px 0px 85.82px 0px #0B085682;
		border: 1.32px solid #F3D307;
} 
.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}
.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.3s ease, opacity 0.3s ease;
    width: calc((132 / 1920) * 100vw);
    height: calc((132 / 1920) * 100vw);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center
} 
.video-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1)
}
.video-play-btn svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0px 0px 24.14px  #FFDD0380) 
}
.video-container.playing .video-play-btn {
    opacity: 0;
    pointer-events: none
}

.action-button {
	padding-bottom: calc((68 / 1920) * 100vw);
}
.action-button .button-offer {
	margin-bottom: 0;
}
.bg + .action-button {
	background: #2E3563;
}

.icons-list {
	margin-bottom: calc((36 / 1920) * 100vw);
	text-align: center;
	overflow: auto;
	width: 100%; 

}
.icons-list img {
	width: calc((1303 / 1920) * 100vw);
}


.icon-section {
	display: flex;
	justify-content: center;
	gap: calc((200 / 1920) * 100vw);
	margin-bottom: calc((68 / 1920) * 100vw);
}
.icon-section__item {
	text-align: center;
	color: #fff;
}
.icon-section__item .ico {
	width: calc((123 / 1920) * 100vw);
	margin:0 auto calc((24 / 1920) * 100vw);
}
.icon-section__item .ico img {
	display: block;
	max-width: 100%;
}
.icon-section__item .t1 { 
	font-weight: 900; 
	font-size: calc((24 / 1920) * 100vw); 
	line-height: 94%; 
	margin-bottom: calc((14 / 1920) * 100vw);
}
.icon-section__item .t2 { 
	font-weight: 400; 
	font-size: calc((24 / 1920) * 100vw); 
	line-height: calc((42 / 1920) * 100vw);  
}



.social-block {
	background: url(../img/bg-soc.jpg) 50% / contain no-repeat;
	height: calc((573 / 1920) * 100vw);
	padding: 0 calc((80 / 1920) * 100vw);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.social-block .t1 { 
	font-weight: 400; 
	font-size: calc((28 / 1920) * 100vw); 
	line-height: 100%; 
	margin-bottom: calc((12 / 1920) * 100vw);
	color: #fff;
}
.social-block .t2 {  
	font-weight: 800; 
	font-size: calc((50 / 1920) * 100vw); 
	line-height: 100%; 
	margin-bottom: calc((32 / 1920) * 100vw);
	color: #fff;
}
.social-block .button-offer {
	margin: 0;
}
.social-block .icons {
	width: calc((255 / 1920) * 100vw);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc((50 / 1920) * 100vw);
}
.social-block .icons .bx {
	display: flex;
	align-items: center;
	justify-content: center;
}
.social-block .icons .sc1 {width: calc((82 / 1920) * 100vw);}
.social-block .icons .sc2 {width: calc((82 / 1920) * 100vw);}
.social-block .icons .sc3 {width: calc((93 / 1920) * 100vw);}
.social-block .icons .sc4 {width: calc((78 / 1920) * 100vw);}
.social-block .icons .sc5 {width: calc((100 / 1920) * 100vw);}
.social-block .icons .sc6 {width: calc((100 / 1920) * 100vw);}



.footer {
	padding: calc((44 / 1920) * 100vw) calc((90 / 1920) * 100vw);
	position: relative;
}
.footer .wr {
	display: flex;
	justify-content: space-between;
	margin-bottom: calc((36 / 1920) * 100vw);
}
.flogo {
	width: calc((360 / 1920) * 100vw);
	text-align: center;
	margin-top: calc((15 / 1920) * 100vw);
}
.flogo img {
	width: calc((213 / 1920) * 100vw);
}
.sc-bx {
	width: calc((666 / 1920) * 100vw);
}
.sc-bx .bx {
	margin-bottom: calc((4 / 1920) * 100vw);
	padding: calc((22 / 1920) * 100vw) calc((24 / 1920) * 100vw);
	background: #FFFFFF26;
	border-radius: calc((6 / 1920) * 100vw);
}
.sc-bx .t1 { 
	font-weight: 400; 
	font-size: calc((12 / 1920) * 100vw); 
	line-height: 1.5; 
	text-transform: uppercase;
	color: #FFFFFFB2; 
}
.sc-bx .t2 { 
	font-weight: 400; 
	font-size: calc((16 / 1920) * 100vw); 
	line-height: 1.5; 
}
.sc-bx .t2 a {
	text-decoration: none;
	color: #fff;
}
.footer .icons {
	text-align: center;
}
.footer .icons img.pc {
	width: calc((852 / 1920) * 100vw);
}
.footer .icons img.mb {
	width: calc((359 / 1920) * 100vw);
	display: none;
}
.copy { 
	font-weight: 400; 
	font-size: calc((14 / 1920) * 100vw); 
	line-height: 1.5; 
	text-transform: uppercase;
	color: #FFFFFFBF;
	position: absolute;
	top: calc((200 / 1920) * 100vw);
	left: calc((124 / 1920) * 100vw);
}
.social-block-mb {
	display: none;
}


.games-list {
	padding-bottom: calc((78 / 1920) * 100vw);
	background: #2E3563;
}
.games-list .heading img {
	display: block;
	width: 100%;
}
.games-list .heading img.mob {
	display: none;
}
.games-list .heading {
	margin-bottom: calc((24 / 1920) * 100vw);
}
.game-bx .hh { 
	font-weight: 700; 
	font-size: calc((32 / 1920) * 100vw); 
	line-height: 94%; 
	margin-bottom: calc((24 / 1920) * 100vw);
}
.game-wrap {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: calc((8 / 1920) * 100vw); 
}
.game-wrap .item {
	transition: .3s ease all;
}
.game-wrap .item:hover {
	transform: scale(1.03);
}
.game-wrap .item a,
.game-wrap .item img {
	width: 100%;
	display: block;
}
.game-bx {
	padding: 0 calc((64 / 1920) * 100vw);
	margin-bottom: calc((24 / 1920) * 100vw);
}
.game-bx:last-child {
	margin-bottom: 0;
}






@media only screen and (max-width:1023px) {
	.first-block {
		height: auto;
	}
} 
@media only screen and (max-width:584px) {
	.video-container {
		border-radius: calc((6 / 375) * 100vw);
	}
	.first-block {
		min-height: initial;
		padding-top: calc((8 / 375) * 100vw);
		padding-bottom: calc((20 / 375) * 100vw);
	}
	.header {
		padding: 0 calc((14 / 375) * 100vw);
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: calc((193 / 375) * 100vw);
	}
	.bigger .header {
		margin-bottom: calc((290 / 375) * 100vw);
	}
	.header .logo {
		width: calc((132 / 375) * 100vw);
		margin: 0;
	}
	.header-button {
		position: static;
		width: calc((108 / 375) * 100vw);
		height: calc((43 / 375) * 100vw);
		font-size: calc((16 / 375) * 100vw);
		border-radius: calc((6 / 375) * 100vw);
	}
	.first-block .texts {
		width: auto;
		padding: 0 calc((14 / 375) * 100vw);
	}
	.first-block .offer {
		font-size: calc((32 / 375) * 100vw);
		margin-bottom: calc((26 / 375) * 100vw);
	}
	.bigger .offer b {
		display: block;
		font-size: calc((61 / 375) * 100vw);
	}
	.bigger .offer  {
		font-size: calc((40 / 375) * 100vw);
		line-height: 1.3;
	}
	.bigger .offer span {
		display: block; 
	}
	.bigger .offer br {display: none;}
	.first-block .offer span {
		font-size: calc((18 / 375) * 100vw);
	}
	.button-offer {
		width: calc((204 / 375) * 100vw);
		height: calc((60 / 375) * 100vw);
		font-size: calc((22 / 375) * 100vw);
		border-radius: calc((6 / 375) * 100vw);
		margin-bottom: calc((32 / 375) * 100vw);
	}
	.first-block .terms {
		font-size: calc((10 / 375) * 100vw);
		line-height:  calc((18 / 375) * 100vw);
	}
	.icon-section {
		flex-direction: column;
		gap: calc((24 / 375) * 100vw);
		margin-bottom: calc((40 / 375) * 100vw);
	}
	.icon-section__item .ico {
		width: calc((46 / 375) * 100vw);
		margin-bottom: calc((24 / 375) * 100vw);
	}
	.icon-section__item .t1 {
		font-size: calc((16 / 375) * 100vw);
		margin-bottom: calc((8 / 375) * 100vw);
	}
	.icon-section__item .t2 {
		font-size: calc((16 / 375) * 100vw);
		line-height: calc((28 / 375) * 100vw);
	}
	
	.video-container {
		max-width: calc((350 / 375) * 100vw);
		margin-bottom: calc((20 / 375) * 100vw);
	}
	.icons-list {
		padding: 0 calc((20 / 375) * 100vw);
		margin-bottom: calc((36 / 375) * 100vw);
	}
	.icons-list img {
		width: calc((1303 / 375) * 100vw);
	}
	.social-block {
		display: none;
	}
	.social-block-mb , 
	.social-block-mb a, 
	.social-block-mb img{
		display: block;
	}
	.social-block-mb img {width: 100%;}
	.footer {
		padding: calc((24 / 375) * 100vw) calc((8 / 375) * 100vw) calc((35 / 375) * 100vw);
	}
	.footer .wr {
		display: block;
		margin-bottom: calc((16 / 375) * 100vw);
	}
	.flogo {
		width: auto;
		margin-bottom: calc((16 / 375) * 100vw);
	}
	.flogo img {
		width: calc((120 / 375) * 100vw);
	}
	.sc-bx {
		width: auto;
		display: grid;
		gap: calc((8 / 375) * 100vw);
		grid-template-columns: 1fr 1fr;
	}
	.sc-bx .bx {
		margin-bottom: 0;
		padding: calc((18 / 375) * 100vw) calc((8 / 375) * 100vw);
		border-radius: calc((6 / 375) * 100vw);
	}
	.sc-bx .t1 {
		font-size: calc((12 / 375) * 100vw);
	}
	.sc-bx .t2 {
		font-size: calc((14 / 375) * 100vw);
	}
	.footer .icons img.pc {
		display: none;
	}
	.footer .icons {
		margin-bottom: calc((16 / 375) * 100vw);
	}
	.footer .icons img.mb {
		display: inline-block;
    width: calc((359 / 375) * 100vw);
	}
	.copy {
		font-size: calc((10 / 375) * 100vw);
		position: static;
		text-align: center;
	}
	.video-play-btn {
		width: calc((50 / 375) * 100vw);
		height: calc((50 / 375) * 100vw);
	}

	.games-list {
		padding-bottom: calc((22 / 375) * 100vw);
	}
	.games-list .heading img.pc {
		display: none;
	}
	.games-list .heading img.mob {
		display: block;
	}
	.games-list .heading {
		margin-bottom: calc((24 / 375) * 100vw);
	}
	.game-bx .hh {  
		font-size: calc((18 / 375) * 100vw);  
		margin-bottom: calc((16 / 375) * 100vw);
	}
	.game-wrap { 
		grid-template-columns: repeat(3, 1fr);
		gap: calc((8 / 375) * 100vw);
		margin-bottom: calc((24 / 375) * 100vw);
	} 
	.game-bx {
		padding: 0 calc((16 / 375) * 100vw);
	}
	.action-button {
		padding: 0 calc((16 / 375) * 100vw) calc((40 / 375) * 100vw);
	} 
	.action-button .button-offer , 
	.first-block .button-offer{
		width: 100%;
	}
	.game-wrap .item {
		display: none;
	}
	.game-wrap .item:nth-child(1),
	.game-wrap .item:nth-child(2),
	.game-wrap .item:nth-child(3) {
		display: block;
	}
	.video-section,
	.video-section.bg {
		padding-bottom: 0;
	}

}