:root {
	--color-white: #F5F5F5;
	--color-yelow: #C2D730;
	--color-gray: #C0C0C0;
}

body {
	background: #111111;	
    margin: 0;
	padding: 0;
	overflow-x: hidden;
	transform: translateX(0px);
}

main {
	flex-direction: column;
	align-items: center;
}

main, div, button, ul {
	display: flex;
}

h1, h2, h3, h4, h5, h6, li, p, button {
	font-style: normal;
	font-weight: 600;
	line-height: 32px;
	margin: 0;
}


h1 {
	font-size: 40.9927px;
	line-height: 48px;
	color: var(--color-white);
}

h2 {
	font-size: 27.3285px;
	color: var(--color-yelow);
}

h3 {
	font-size: 32px;
	color: var(--color-white);
}

h4 {
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: var(--color-gray);
}

h5 {
	font-size: 20px;
	line-height: 27px;
	align-items: center;
	text-align: center;
	color: var(--color-yelow);
}

h6 {
	font-weight: 400;
	font-size: 30.0992px;
	line-height: 35px;
	text-align: center;
	text-transform: capitalize;
	color: #FFFFFF;
}

p {
	font-weight: 400;
	font-size: 14.9028px;
	line-height: 20px;
	color: var(--color-yelow);
}

button {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0.854015px 28.1825px;
	width: 273.28px;
	max-width: 433.84px;
	height: 48.71px;
	background: var(--color-yelow);
	border-radius: 42px;
	border: 0;
	font-size: 20px;
	line-height: 46px;
	text-transform: uppercase;
	color: #141414;
}

#button2 {
	flex-direction: column;
	padding: 33.1173px;
	width: 493px;
	height: 76px;
	max-width: unset;
	line-height: 27px;
	color: #111111;
	margin-bottom: 148px;
}

button:focus {
  transition: background 0.2s ease, transform 0.1s ease;
  cursor: pointer;
}

button:hover {
  background: #e0f054;
}

button:active {
  transform: scale(0.98);
}

ul {
	list-style: none;
	flex-direction: column;
	align-items: flex-start;
	padding: 0px;
	gap: 6.52px;
	margin: 0;
}

li {
	position: relative;
	padding-left: 25px;
	font-size: 16px;
	line-height: 20px;
	color: var(--color-gray);
}

li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7.5px;
  width: 4.89px;
  height: 4.89px;
  border-radius: 50%;
  background-color: #C0FF01;
}

img {
	border-radius: inherit;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}


.back-link {
	display: flex;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	color: #FFFFFF;
	align-items: center;
	text-decoration: none;
}

.back-link svg {
	margin-right: 28px;
}

.manrope-medium {
	font-family: 'Manrope', sans-serif;
}

.inter-semibold {
	font-family: 'Inter', sans-serif;
}

.roboto-semibold, #button2 {
	font-family: 'Roboto Condensed', sans-serif;
}

.roboto-regular, p {
	font-family: 'Roboto Condensed', sans-serif;
}

.margin-bottom7px, .margin-bottom33px, .margin-bottom36px, .margin-top39px, .margin-bottom44px, .margin-bottom124px, .margin-top68px, .margin-bottom23px, .margin-left23px, .margin-bottom86px, .margin-bottom148px{
	margin: 0px;
}

.margin-bottom7px {
	margin-bottom: 7px;
}

.margin-bottom23px {
	margin-bottom: 23px;
}

.margin-bottom33px {
	margin-bottom: 33px;
}

.margin-bottom36px {
	margin-bottom: 36px;
}

.margin-bottom44px {
	margin-bottom: 44px;
}

.margin-bottom86px {
	margin-bottom: 86px;
}

.margin-bottom124px {
	margin-bottom: 124px;
}

.margin-top39px {
	margin-top: 39px;
}

.margin-top68px {
	margin-top: 68px;
}

.margin-left23px {
	margin-left: 23px;
}

.margin1 {
	margin: 0 101px;
	margin-right: 60px;
}

.margin2 {
	margin: 17px 22px;
}

.divka {
	padding: 33px;
	gap: 19.87px;
	background: #202020;
	border-radius: 13px;
}

#main {
	align-items: center;
	flex-direction: row;
	padding-left: 35px;
	gap: 11px;
	height: 496px;
	background: #000000;
	border-radius: 20.2315px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

#main img {
	position: absolute;
	right: 0; 
	top: 0; 
	z-index: 5;
}

#content, #content div{
	flex-direction: column;
}

#content {
	height: 586px;
}

#card {
	flex-direction: column;
}

#content2 {
	flex-direction: column;
	height: 556px;
}

.carda1 img{
	margin-bottom: 1.5px;
}

.carda2 img, .carda3 img {
	margin-bottom: 19.5px;
}

.carda1 {
	margin-left: 42px;
}

.carda2 {
	margin: 0 117.08px;
}

.carda3 {
	margin-right: 42px;
}

.carda1, .carda2, .carda3 {
	margin-top: 3px;
	flex-direction: column;
	align-items: center;
}

.light{
	width: 998px;
	height: 432px;
	background: rgba(113, 212, 248, 0.2);
	filter: blur(45px);
	border-radius: 65px;
	position: absolute;
	z-index: -1;
	overflow: hidden;
    max-width: 100%;
}

.underline-link {
  text-decoration: underline;
  color: inherit;
}

.emoji {
	width: 14.9px;
}

.rect {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--color-yelow);
	border-radius: 13.2469px;
}

.width1200, #main, #content, #content2 {
	width: 100%;
	max-width: 1200px;
}

.fStart {
	justify-content: flex-start;
}

.fCCenter {
	justify-content: center;
}

.fColumn {
	flex-direction: column;
}

.fRow {
	flex-direction: row;
}

.fICenter {
	align-items: center;
}

.fIStart {
    align-items: flex-start;
}

.zi8 {
	z-index: 8;
}

.zi4 {
	z-index: 4 !important;
}

.color-yelow {
	color: var(--color-yelow);
}

.color-gray {
	color: var(--color-gray);
}

.color-FFFFFF {
	color: #FFFFFF;
}

.pad0 {
	padding: 0;
}

.pad {
	padding: 32px 33px; gap: 24px;
}

.pad2 {
	padding: 33px 141px;
}

.pad3 {
	padding: 25px 0;
}

.pad4 {
	padding: 0px 95px 20px 109px
}

.gap0 {
	gap: 0;
}

.gap3 {
	gap: 3px;
}

.gap4 {
	gap: 4px;
}

.gap28 {
	gap: 28px;
}

.font16 {
	font-size: 12px;
}

.font13 {
	font-size: 13.05px;
	line-height: 26px;
}

.frame2 {
	width: 100%;
	max-width: 363px;
	margin-top: -20px;
	object-fit: contain; 
}

.break-sm {
  display: none;
}

.break-sm-invert {
	display: inline;
}

#fram1b {
	display: none;
	bottom: 0px;
	top: unset !important;
}

#vkl2 {
	display: none;
}

#br2 {
	display: none;
}

.image-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1.07;
}


.image-wrapper img {
  position: relative;
  z-index: 1;
  height: auto;
   width: 100%; 
   object-fit: contain;
}

.image-wrapper .kvadrat {
  position: absolute;
  z-index: 0;
  max-width: 270.89px;
  max-height: 252.37px;
  width: 100%;
  height: 100%;
  border-radius: 20.83px;
  background: var(--color-yelow);
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
}

.border {
	box-sizing: border-box;
}	

.break360 {
	display: none;
}

.pupup {
	font-weight: 400;
	line-height: 14px;
}

.carda1 img {
	max-width: 332.92px;
	width: 100%;
	max-height: 320.406px;	
	height: 320.406px;
}

.carda2 img {
	max-width: 271.5px;
	width: 100%;
	max-height: 306.203px;	
	height: 306.203px;	
}
.carda3 img {
	max-width: 270.89px;
	max-height: 296.359px;
	width: 100%;
	height: 296.359px;
}


@media (min-width: 1921px) {
  .width1200, #main, #content, #content2 {
    max-width: 1400px;
  }
  #content2 .margin-bottom23px.fRow {
	  justify-content: space-around;
  }
}

@media (max-width: 1280px) {
	.width1200, #main, #content, #content2 {
		width: 998px;
	}
	
	.break-sm {
	  display: inline;
	}
	
	
	.break-sm-invert {
		display: none;
	}
	
	.margin-bottom44px {
		margin-bottom: 33px;
	}
	
	.margin-bottom124px {
		margin-bottom: 105px;
	}
	
	.carda1 {
		margin-left: 18px;
	}
	
	.carda2 {
		margin: 0 28.5px;
		margin-top: 3px;
	}
	
	.carda3 {
		margin-right: 18px;
	}
	
	.pad4 {
		padding: 0px 1px 19px 1px
	}
	
	.pad2 {
		padding: 33px 40px;
	}
	
	.frame2 {
		margin-top: -21px;
	}
	
	#button2 {
		width: 520px;
		margin-bottom: 117px;
	}
}

@media (max-width: 1024px) {
  .width1200, #main, #content, #content2 {
    width: 95%;
    max-width: 100%;
  }
  
  #main {
    padding: 25px 20px;
    gap: 30px;
  }
  
  #main img {
    margin: 0 auto;
  }
  
  .pad4 {
    padding: 20px !important;
  }
  
  .margin1 {
    margin: 0 60px !important;
  }
  
  .carda1 {
		margin-left: 9px;
	}
	
	.carda2 {
		margin: 0 10px;
		margin-top: 3px;
	}
	
	.carda3 {
		margin-right: 9px;
	}
}

@media (max-width: 1000px) { 
  #main {
    height: auto;
  }
  
  #main img {
    max-height: 100%;
  }
}

@media (max-width: 904px) {
	#content2 {
		height: unset;
	}
}

@media (max-width: 768px) {
  .width1200, #main, #content, #content2 {
    width: 95%;
    max-width: 100%;
  }
  
  #main {
    height: auto;
    padding: 40px 20px;
    gap: 30px;
    text-align: center;
  }
  
  #content, #content2 {
    height: auto !important;
  }
  
  #card .fCCenter {
    flex-direction: column;
  }
  
  #content2 > .fRow {
    flex-direction: column;
  }
  
  .divka.margin-left23px {
    margin-left: 0;
    margin-top: 20px;
	align-items: center;
	justify-content: center;
  }
  
  .pad4 {
    padding: 20px !important;
  }
  
  #button2 {
    max-width: 100%;
    padding: 25px;
    height: auto;
  }
  
  .margin1 {
    margin: 15px 0 !important;
  }
  
  .pad2 {
    padding: 25px;
    flex-direction: row !important;;
    gap: 20px;
	align-items: center;
    justify-content: center;
	flex-wrap: wrap;
  }
  
  .rect {
    margin-top: 15px;
    padding: 15px 0;
  }
  
  h1 {
    font-size: 32px;
    line-height: 38px;
  }
  
  h2 {
    font-size: 22px;
  }
  
  h3 {
    font-size: 26px;
  }
  
  button {
    width: 100%;
    max-width: 100%;
  }
  
  .margin-bottom124px, 
  .margin-bottom86px,
  .margin-top68px {
    margin-bottom: 60px;
  }
  
  .back-link svg {
    margin-right: 16px;
  }
}

@media (max-width: 705px) {	
	.width1200, #main, #content, #content2 {
        padding: 0 17px;
    }

	#main {
		justify-content: flex-start;
		height: 549px;
		overflow: hidden;
	}
	
	#main img {
         max-height: unset;
    }
	
	#content {
		margin-bottom: 85px;
	}
	
	#content2 {
		margin-bottom: 60px;
	}
	
	.carda2 {
		margin-top: 71px;
		margin-bottom: 39px;
	}
	
	.carda1 {
        margin-left: 0px;
		margin-top: 0px;
    }
	
	#card h5 {
		padding: 0 16px;
	}
	
	#card {
		margin-bottom: 54px;
	}
	
	#br {
		display: none;
	}
	
	.gap28 {
		gap: 16px;
		margin-bottom: 26px;
	}
	
	#vkl1 {
		display: none;
	}
	
	#vkl2 {
		display: flex;
	}
	
	h1 {
		font-size: 40.9927px;
		line-height: 44px;
	}
	
	h2 {
		font-size: 27.3285px;
	}
	
	h3 {
		font-size: 30px;
	}
	
	.divka.fColumn.fICenter.pad3.gap0 h4 {
		text-align: center;
	}
	
	#content2 div.margin-bottom23px.fRow{
		margin-bottom: 26px;
	}

	ul {
		gap: 7px;
	}
	
	li::before {
		top: 17px;
	}
	
	.margin-bottom44px.divka.pad {
		margin-bottom: 28.5px;
		padding-right: 12px;
	}

	#main button {
		position: absolute;
		width: 273.28px;
		bottom: 31px;
        left: 50%;
        transform: translateX(-50%);
	}
  
  #fram1a {
	display: none;
	}
  
  #fram1b {
	display: unset;
	width: 100%;
	}
	
	.divka {
		padding: 32px 24px;
	}
	
	.break-sm {
		display: unset;
	}
	
	.margin-bottom36px {
		margin-bottom: 20px;
	}
	
	.margin-bottom44px {
        margin-bottom: 43px;
    }
	
	.margin-bottom124px {
        margin-bottom: 40px;
    }
	
	.pad2 {
		gap: 35px;
	}
	
	.margin-top68px {
        margin-bottom: 56px;
    }
	
	.light {
		width: 323px;
		height: 1284px;
	}
	
	  .rect {
		width: 100%;
		margin-top: 0;
		padding: 0;
	  }
	  
	    .divka.margin-left23px {
		margin-left: 0;
		margin-top: 36px;
	  }
	  
	#button2 {
		align-items: center;
		padding: 33.1173px;
		width: 325px;
		height: 65px;
		border-radius: 42px;
		font-size: 16px;
		line-height: 22px;
		margin-bottom: 49px;
	}

  .width1200, #main, #content, #content2 {
    width: 95%;
  }
  
  #main {
    flex-direction: column;
    text-align: center;
	width: 95%;
	padding: 48px 27.5px 0;
    border-radius: 15px;
  }
  
  #content, #content2 {
    height: auto !important;
  }
  
  h5 {
    text-align: center;
  }
  
  #content2 > .fRow {
    flex-direction: column;
  }
  
  .pad4 {
    padding: 15px !important;
  }
  
  .pad2 {
    flex-direction: column;
  }
  
  .fRow > .fColumn {
    width: 100%;
  }
  
  .margin1 {
    margin: 10px 0 !important;
  }

  .emoji {
    width: 14px;
  }
  
  .frame2 {
    max-width: 280px;
    margin-top: 0;
  }
  
  .break-sm-invert {
    display: none !important;
  }
  
  #br2 {
	display: unset;
}

#content h5 {
	margin-left: 25px;
    margin-right: 25px;
}
}

@media (max-width: 705px) and (min-width: 481px) {
  #fram1b {
    bottom: calc(-280px + 0.9333 * (705px - 100vw));
  }
}

@media (max-width: 480px) and (min-width: 361px) {
  #fram1b {
    bottom: calc(-70px + 0.5833 * (480px - 100vw));
  }
}

@media (max-width: 360px) {
  #fram1b {
    bottom: 0px;
  }
  
  #main img {
         max-height: 100%;
    }
	
	.break360 {
		display: unset;
	}
	
	.break360-invert {
	display: none;
}
	
#content2 ul li:nth-child(2)::before {
  top: 28px;
}

.divka.fRow.pad2.gap0 {
	padding-right: 20px;
}
}