html {font-size: 1vw;}
body {background: #010101; font-family: 'Outfit', sans-serif;}

.container {max-width:100%; margin: auto;}		

.logo {
	margin: 2.5em auto 2.5em auto;
   	width: 328px;
    padding-bottom: 0%;
    background-repeat: no-repeat;
    background-position: center;
    
}
.info {
	right: 3%;
}

.info-text {
	color: #FFFFFF;
    font-style: normal;
    font-weight: 700;
    right: 10%;
}

.row1 {
	font-size: 5.73vw;


}
.row2 {
	font-size: 4.6875vw;
	line-height: 1em;
}

.row1::after{
    content: "\a";
    white-space: pre;
}

.row3::after{
    content: "\a";
    white-space: pre;
}	
.button { 
	position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
    
    font-size: 1.875em;
    font-weight: 700;
    color: #FFFFFF;
    width: 100%;
    max-width: 490px;
    padding: 0.5em;
    border-radius: 56px;
    border: 0;
    background: #F46C20;
    margin-top: 2em;
    margin-bottom: 1em;


  outline: none;
  overflow: hidden;
 
}

.button::before {
  --size: 0;
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side,  #FFBB00, transparent);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: width .2s ease, height .2s ease;
}
.button:hover::before {
  --size: 400px;
}
.button span {
  position: relative;
  pointer-events: none;
}
.info-text a {
	color: #fff;
    font-size: 1em;
    display: block;
    text-decoration: underline;
    font-weight:normal;
}

.partner_logo {
	width: 100%;
    height: 9em;
    margin-top: 2em;
    background-position: top center;
    background-image: url(../img/partner-logo.png);
    background-repeat: no-repeat;
    margin-left: 39px;
}
.images {
	position: relative;
}
.images .image {
	background-image: url('../img/img.svg');
	display: inline-block;
	background-position: left center top;
    background-repeat: no-repeat;
  	width: 100%;
  	height: 100%; 
}

 .main-image {
 	position: relative;
    width: 100%;
   	height: 100%;
    
}



 .main-image .background {
    background-image: url(../img/background-image.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: inherit;
    position: absolute;
    width: inherit;
}

 .main-image .man {
    
    background-image: url(../img/main-image.png);
    background-repeat: no-repeat;
    height: inherit;
    width: inherit;
    position: absolute;
    z-index: 3;
    background-position: right bottom;
    background-size: contain;
	top: 9%;
    right: -1em;

 }

 .man div {
  display: block;
}


.man::before,
.man::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/main-image.png"); /* Заменете с вашия URL на изображението */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  /*animation: glitch 2s infinite linear alternate-reverse;*/
}
.man::before {
 /* left: 8px;*/
  animation: image-anims-1 2s infinite linear alternate-reverse;
}

.man::after {
  animation: image-anims-2 3s infinite linear alternate-reverse;
}

.seal {
	position: absolute;
    z-index: 100;
    top: 4%;
    right: 13%;
}

.squares {
  width: 90%;
  height: 90%;
  position: relative;
  background-color: transparent;
  top: 8%;
}

.square {
  position: absolute;
  z-index: 4;
}

.squares .square:nth-child(1) { animation: pulse 2s infinite alternate; width: 29px; height: 29px; background-color: #fff; top: 0%; right: 12%; }
.squares .square:nth-child(2) { animation: pulse 3s infinite alternate; width: 40px; height: 40px; background-color: #F46C20; top: 11%; left: 4%; }
.squares .square:nth-child(3) { animation: pulse 2.2s infinite alternate; width: 93px; height: 93px; background-color: #fff; top: 20%; left: 12%; }
.squares .square:nth-child(4) { animation: pulse 3.2s infinite alternate; width: 48px; height: 48px; background-color: #fff; top: 35%; right: 9%; }
.squares .square:nth-child(5) { animation: pulse 2.5s infinite alternate ;width: 82px; height: 82px; background-color: #F46C20; top: 90%; left: 0; }
.squares .square:nth-child(6) { animation: pulse 3s infinite alternate; width: 90px; height: 90px; background-color: #F46C20; top: 90%; left: 45%; }
.squares .square:nth-child(7) { animation: pulse 2s infinite alternate;  width: 40px; height: 40px; background-color: #fff; bottom: -3.5em; left: 13%; }

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 1; }
}

.logos .box{
	display: inline-block;
    width: calc(100vw/12);
    position: relative;
    height: 4vw;
}

.logos .image {
	  width: inherit;
    height: inherit;
    background-position: center;
    background-repeat: no-repeat;
	display: inherit;	
}
.logos div:nth-child(1) > div {
	background-image: url('../img/1.png');
}

.logos div:nth-child(2) > div {
	background-image: url('../img/2.png');
}

.logos div:nth-child(3) > div{
	background-image: url('../img/3.png');
}
.logos div:nth-child(4) > div {
	background-image: url('../img/4.png');
}

.logos div:nth-child(5) > div {
	background-image: url('../img/5.png');
}



.logos {max-width: 100%; width: max-content; margin: auto;}



.logos_partner {
	max-width: 490px;
	float: right;
}
.logos_partner a {
	color: #fff;
}




.glitch-img {
  position: absolute;
  display: inline-block;
  left: 63%;
}

.glitch-img img {

  position: absolute;
  top: 10px;
  left: 10px;
}

.glitch-img img:nth-child(2),
.glitch-img img:nth-child(3) {
  clip: rect(0, 0, 0, 0);
}

.glitch-img img:nth-child(2) {
  left: 12px;
  animation: image-anim-1 2s infinite linear alternate-reverse;
}

.glitch-img img:nth-child(3) {
  left: 8px;
  animation: image-anim-2 3s infinite linear alternate-reverse;
}




@keyframes image-anim-1 {
  0% { clip: rect(50px, 300px, 150px, 0); }
  10% { clip: rect(100px, 300px, 200px, 0); }
  20% { clip: rect(150px, 300px, 250px, 0); }
  30% { clip: rect(200px, 300px, 100px, 0); }
  40% { clip: rect(250px, 300px, 150px, 0); }
  50% { clip: rect(100px, 300px, 200px, 0); }
  60% { clip: rect(150px, 300px, 250px, 0); }
  70% { clip: rect(200px, 300px, 100px, 0); }
  80% { clip: rect(250px, 300px, 150px, 0); }
  90% { clip: rect(50px, 300px, 200px, 0); }
  100% { clip: rect(100px, 300px, 250px, 0); }
}



@keyframes image-anim-2 {
  0% { clip: rect(100px, 300px, 200px, 0); }
  10% { clip: rect(150px, 300px, 250px, 0); }
  20% { clip: rect(200px, 300px, 100px, 0); }
  30% { clip: rect(250px, 300px, 150px, 0); }
  40% { clip: rect(50px, 300px, 200px, 0); }
  50% { clip: rect(150px, 300px, 250px, 0); }
  60% { clip: rect(200px, 300px, 100px, 0); }
  70% { clip: rect(250px, 300px, 150px, 0); }
  80% { clip: rect(50px, 300px, 200px, 0); }
  90% { clip: rect(100px, 300px, 250px, 0); }
  100% { clip: rect(200px, 300px, 100px, 0); }
}


@keyframes image-anims-1 {
  0% { clip: rect(100px, 800px, 300px, 0); }
  10% { clip: rect(300px, 900px, 400px, 0); }
  20% { clip: rect(500px, 1000px, 500px, 0); }
  30% { clip: rect(700px, 800px, 700px, 0); }
  40% { clip: rect(900px, 900px, 800px, 0); }
  50% { clip: rect(200px, 800px, 200px, 0); }
  60% { clip: rect(600px, 900px, 600px, 0); }
  70% { clip: rect(800px, 800px, 800px, 0); }
  80% { clip: rect(1000px, 900px, 1000px, 0); }
  90% { clip: rect(100px, 800px, 400px, 0); }
  100% { clip: rect(200px, 900px, 500px, 0); }
}

@keyframes image-anims-2 {
  0% { clip: rect(200px, 900px, 300px, 0); }
  10% { clip: rect(400px, 1000px, 500px, 0); }
  20% { clip: rect(600px, 800px, 700px, 0); }
  30% { clip: rect(800px, 900px, 900px, 0); }
  40% { clip: rect(100px, 800px, 400px, 0); }
  50% { clip: rect(300px, 1000px, 500px, 0); }
  60% { clip: rect(500px, 800px, 400px, 0); }
  70% { clip: rect(700px, 900px, 600px, 0); }
  80% { clip: rect(100px, 800px, 400px, 0); }
  90% { clip: rect(200px, 900px, 500px, 0); }
  100% { clip: rect(400px, 800px, 200px, 0); }
}


@media only screen and (min-width: 1920px) {
	.container {max-width: 1920px}
	.logos .box {
		width: calc(100vw/12);
	}
}
/*@media only screen and (min-width: 1400px) {
	.container {max-width: 1440px}
	.logos .box {
		width: calc(100vw/13);
	}
}*/

@media only screen and (max-width: 1280px) {
	/*.logo {width: 25em; height: 5em; background-size: contain;}
	.info-text {font-size: 6em;}*/
	.images .image {
	    background-image: url(../img/img.svg);
	    display: inline-block;
	    background-position: center top;
	    background-repeat: no-repeat;
	    background-size: contain;
	    width: 100%;
	    height: 100%;
	}
	.partner_logo {height: 9em;}
	.logos {
		width: 60% !important;
		margin: 0 !important;
	}
	/*.partner_logo, .promo {display: none !important;}
	.logos div { width: 10em !important; }*/
}

@media only screen and (max-width: 992px) {
	.container{
		max-width: 992px;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.col-12 {
		padding: 0;
	}
	.row {
		flex-direction: column-reverse;
		margin: 0;
	}
	.info {
		right: 0;
		left: 0;
	}
	.info .logos {
		display: none;
	}
	.row1 {
		font-size: 20em;
	}
	.row2 {
		font-size: 15em;
		line-height: 1;
	}
	
	.info-text button {
		font-size: 4em;
		width: 83%;
	}
	.logos_partner a {font-size: 4em;}
	/*.info-text {font-size: 6.375em; line-height: 8em;}*/
	/*.info-text button{font-size: 4.5em; width: 53em; height: 6.5em;}*/
	.logos_partner {
		max-width: 100%;
		float: unset;
		width: 100%;
	}

	.partner_logo {
	    width: 100%;
	    height: 100%;
	    background-position: center;
	    background-image: url(../img/partner-logo.png);
	    background-repeat: no-repeat;
	    position: absolute;
	    background-size: contain;
	     background-position: top;
	    z-index: 5;
	}

	.main-image {
		/*padding-bottom: 100%;*/
		height: 100vw;
		top:0;
	}
	.main-image  .man {
		right: 0;
		top: 22%;
	}

	
	.seal {
		left: 0;
		z-index: 5;
	}
	.images .logos {
		width: 100% !important;
		margin: auto !important;
		margin-top: 24em !important;
	}
	.logos .box {
		width: calc(100vw/6);
		height: 10vw;
	}

	
}





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

}
@media only screen and (max-width: 580px) {
	.square {
 		 z-index: 1;
		}
	.logos .box { width: calc(100vw/6);	}	
}

@media only screen and (max-width: 430px) {
	.seal{
		left: 60%;
		top: 25%;
		z-index: 100;
		width: auto;
		height: 150px;
	}
		.logo {
		    width: auto;
		    height: 55px;
		}
		.square {
 		 z-index: 1;
		}
		.man {
			right: 0;
			top: 20%;
		}
		
.glitch-image {
  position: relative;
  overflow: hidden;
}