@charset "UTF-8";

html, body {
	 margin: 0;
	 padding: 0;
	 background-color: black;
	 color: white;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 font-family: 'Medula One', sans-serif;
	 font-size: 3em;
}

@keyframes fadeWhite {
	 100% {
		 color: white;
	}
}

@keyframes glitch {
	 0% {
		 clip: rect(65px, 9999px, 60px, 0);
	}
	 5% {
		 clip: rect(52px, 9999px, 17px, 0);
	}
	 10% {
		 clip: rect(42px, 9999px, 63px, 0);
	}
	 15% {
		 clip: rect(89px, 9999px, 52px, 0);
	}
	 20% {
		 clip: rect(59px, 9999px, 62px, 0);
	}
	 25% {
		 clip: rect(84px, 9999px, 75px, 0);
	}
	 30% {
		 clip: rect(40px, 9999px, 53px, 0);
	}
	 35% {
		 clip: rect(5px, 9999px, 60px, 0);
	}
	 40% {
		 clip: rect(39px, 9999px, 18px, 0);
	}
	 45% {
		 clip: rect(54px, 9999px, 70px, 0);
	}
	 50% {
		 clip: rect(38px, 9999px, 41px, 0);
	}
	 55% {
		 clip: rect(17px, 9999px, 37px, 0);
	}
	 60% {
		 clip: rect(11px, 9999px, 14px, 0);
	}
	 65% {
		 clip: rect(57px, 9999px, 90px, 0);
	}
	 70% {
		 clip: rect(30px, 9999px, 94px, 0);
	}
	 75% {
		 clip: rect(42px, 9999px, 36px, 0);
	}
	 80% {
		 clip: rect(99px, 9999px, 29px, 0);
	}
	 85% {
		 clip: rect(61px, 9999px, 37px, 0);
	}
	 90% {
		 clip: rect(31px, 9999px, 7px, 0);
	}
	 95% {
		 clip: rect(53px, 9999px, 54px, 0);
	}
	 100% {
		 clip: rect(35px, 9999px, 36px, 0);
	}
}
 
.Our_Header {
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 position: relative;
}

/* Class for glitched part of title */
.Glitched:first-child {
	 margin-right: 8px;
  	 height: 250px;
}
.Glitched:nth-child(2) {
	 color: black;
	 background-color: black;
	 animation: fadeWhite 2s forwards;
	 animation-delay: 1s;
	 position: relative;
}
.Glitched:nth-child(2):after {
	 content: 'порядок';
	 position: absolute;
	 left: 2px;
	 top: 2px;
	 clip: rect(0, 900px, 0, 0);
	 background-color: black;
	 color: white;
	 animation: glitch 3s infinite alternate-reverse;
	 animation-delay: 4s;
}
.Glitched:nth-child(2):before {
	 content: 'порядок';
	 position: absolute;
	 left: -2px;
	 top: -2px;
	 clip: rect(0, 900px, 0, 0);
	 background-color: black;
	 color: white;
	 animation: glitch 3s infinite alternate-reverse;
	 animation-delay: 2s;
}

/* Class Iam for rotating menu */
.Iam {
  font: normal 40px/50px Montserrat, sans-serif;
  color: #999;
    display: flex; /* Use flexbox */
    flex-direction: row; /* Align items in a row */
    text-align: center; /* Ensure text alignment is centered */
     }

.Iam p {
    margin: 0; /* Reset margins to avoid shifting */
    padding: 0; /* Ensure no extra space */
       }

.Iam b {
  text-align: left;
  overflow: hidden;
  position: relative;
  height: 52px;
       }

.Iam .innerIam {
  display: inline-block;
  color: #e74c3c;
  position: relative;
  white-space: nowrap;
	/*animation*/
	animation:move 5s;
	/*animation-iteration-count*/
	 animation-iteration-count:infinite;
	/*animation-delay*/
	 animation-delay:1s;
                }

/* 100% of rotating strip divided by 6 menu strings = 5 menu strings + 1 empty string  */
@keyframes move{
0%  { top:  0px; }
16% { top: -50px; }
32% { top: -100px; }
48% { top: -150px; }
64% { top: -200px; }
80% { top: -250px; }
}


/* Grid for Telegram Whatsapp Email */
.container3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
    align-items: center; /* Centers content vertically */
    justify-items: center; /* Centers content horizontally */
    }

.full-width-bar {
    width: 100%; /* Full page width */
    height: 12%; /* Fixed height */
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */        
                }

.column img {
    width: 100%;  
    height: 80%; /* To resize icons use height*/  
    object-fit: cover; 
    }
	

/* Change images using class name and onclick, onmouseover, onmouseleave events in img*/
.icon-telegram{
   content:url("img/telegram-icon-white.png");
	}
.icon-telegram-onmouseover{
   content:url("img/telegram-icon-grey.png");
	}
.icon-telegram-click{
   content:url("img/telegram-icon-grey-dark.png");
	}
	
.icon-whatsapp{
   content:url("img/whatsapp-icon-white.png");
	}
.icon-whatsapp-onmouseover{
   content:url("img/whatsapp-icon-grey.png");
	}
.icon-whatsapp-click{
   content:url("img/whatsapp-icon-grey-dark.png");
	}
	
.icon-email{
   content:url("img/email-icon-white.png");
	}
.icon-email-onmouseover{
   content:url("img/email-icon-grey.png");
	}
.icon-email-click{
   content:url("img/email-icon-grey-dark.png");
	}