.flip {
  width: 300px;
  height: 300px;
  border:2px solid #1AB2F2;
  border-radius: 9999px;
  cursor: pointer;
  margin: 10px;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: all 0.5s;
  
  font-family: sans-serif;
  background:transparent;
  box-shadow: 0px 0px 25px -15px rgba(66, 68, 90, 1);
}

.flip:hover {
  transform: translateY(-5%);
  box-shadow: 0px 0px 40px -15px rgba(66, 68, 90, 1);
}

.flip img { 
  border:4px solid #1AB2F2;
  display: inline-block;
  width: 300px;
  height:300px;
  border-radius: 9999px;
}

.flip__face {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /*hide element on back*/
}

.flip__face--back {
  background: #1AB2F2;
    border-radius: 9999px;
  font-family: Sofia Sans;
  color: #011b45;
  font-size: 24px;
  word-wrap: break-word;
  );



  /*  rotated on start so the front is visible first */
  transform: rotateY(180deg);
}

.flip.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}





.flip-b {
  width: 280px;
  height: 280px;
  border:2px solid #1AB2F2;
  border-radius: 10px;
  cursor: pointer;
  margin: 8px;
  margin-top:16px;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: all 0.5s;
  font-family: sans-serif;
  background-transparent;
  box-shadow: 0px 0px 25px -15px rgba(66, 68, 90, 1);
}

.flip-b:hover {
  transform: translateY(-5%);
  box-shadow: 0px 0px 40px -15px rgba(66, 68, 90, 1);
}

.flip-b img {
  
  border-radius: 10px;
  width: 250px;
  height:250px;
  margin: 10px;
 border:none;
  display: inline-block;
 
}

.flip-b__face {
  display: flex;
  justify-content: center;
  align-items: center;  
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /*hide element on back*/
}

.flip-b__face--back {
  border-radius: 10px;
  background: #1AB2F2;
   font-family: Sofia Sans;
  color: #011b45;
  font-size: 24px;
  word-wrap: break-word; 
  padding:10px;
  );

.link_view_b {
  background: #011b45;
  font-family: Sofia Sans;
  color: #ffffff;
  font-size: 22px;
  line-height: 100%;
  font-weight: 300;
  
  border-radius: 10px;
  margin-left:25%;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
}





.text-inner {
  
  font-family: Sofia Sans;
  color: #011b45;
  font-size: 24px;
  
  word-wrap: break-word;
 
 
}


  /*  rotated on start so the front is visible first */
  transform: rotateY(180deg);
}

.flip-b.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}




.flip-c {
  width: 280px;
  height: 280px;
  border:2px solid #1AB2F2;
  border-radius: 10px;
  cursor: pointer;
  margin: 8px;
  margin-top:16px;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: all 0.5s;
  font-family: sans-serif;
  background-transparent;
  box-shadow: 0px 0px 25px -15px rgba(66, 68, 90, 1);
}

.flip-c:hover {
  transform: translateY(-5%);
  box-shadow: 0px 0px 40px -15px rgba(66, 68, 90, 1);
}

.flip-c img {
  
  border-radius: 10px;
  width: 250px;
  height:141px;
  margin: 10px;
 border:none;
  display: inline-block;
 
}

.flip-c__face {
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  width: 100%;
  height: 100%;

  backface-visibility: hidden; /*hide element on back*/
}

.link_view_c {
  background: #011b45;
  font-family: Sofia Sans;
  color: #ffffff;
  font-size: 22px;
  line-height: 100%;
  font-weight: 300;
  
  border-radius: 10px;
  margin-left:25%;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
}


.flip-c__face--back {
  border-radius: 10px;
  background: #1AB2F2;

  font-family: Sofia Sans;
  color: #011b45;
  font-size: 24px;
  word-wrap: break-word;
  padding:10px;  
  );



  /*  rotated on start so the front is visible first */
  transform: rotateY(180deg);
}

.flip-c.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.flip-d {
  width: 280px;
  height: 280px;
  border:2px solid #1AB2F2;
  border-radius: 10px;
  cursor: pointer;
  margin: 8px;
  margin-top:16px;
  
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: all 0.5s;
  font-family: sans-serif;
  background-transparent;
  box-shadow: 0px 0px 25px -15px rgba(66, 68, 90, 1);
}

.flip-d:hover {
  transform: translateY(-5%);
  box-shadow: 0px 0px 40px -15px rgba(66, 68, 90, 1);
}

.flip-d img {
  
  border-radius: 10px;
  width: 250px;
  height:141px;
  margin: 10px;
 border:none;
  display: inline-block;
 
}

.link_view_d {
  background: #011b45;
  font-family: Sofia Sans;
  color: #ffffff;
  font-size: 22px;
  line-height: 100%;
  font-weight: 300;
  
  border-radius: 10px;
  margin-left:25%;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
}


.flip-d__face {
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  width: 100%;
  height: 100%;
  
  backface-visibility: hidden; /*hide element on back*/
}

.flip-d__face--back {
  border-radius: 10px;
  background: #1AB2F2;
  font-family: Sofia Sans;
  color: #011b45;
  font-size: 22px;
  word-wrap: break-word;
  padding:10px;  
  );



  /*  rotated on start so the front is visible first */
  transform: rotateY(180deg);
}

.flip-d.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.flip-e {
  width: 280px;
  height: 280px;
  border:2px solid #1AB2F2;
  border-radius: 10px;
  cursor: pointer;
  margin: 8px;
  margin-top:16px;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: all 0.5s;
  font-family: sans-serif;
  background-transparent;
  box-shadow: 0px 0px 25px -15px rgba(66, 68, 90, 1);
}

.flip-e:hover {
  transform: translateY(-5%);
  box-shadow: 0px 0px 40px -15px rgba(66, 68, 90, 1);
}



.flip-e img {
  
  border-radius: 10px;
  width: 250px;
  height:250px;
  margin: 10px;
 border:none;
  display: inline-block;
 
}

.link_view_e {
  background: #011b45;
  font-family: Sofia Sans;
  color: #ffffff;
  font-size: 22px;
  line-height: 100%;
  font-weight: 300;
  
  border-radius: 10px;
  
  margin-left:25%;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
}


.flip-e__face {
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  width: 100%;
  height: 100%;

  backface-visibility: hidden; /*hide element on back*/
}

.flip-e__face--back {
  border-radius: 10px;
  background: #1AB2F2;
  font-family: Sofia Sans;
  color: #011b45;
  font-size: 24px;
  word-wrap: break-word; 
  padding:10px; 
  );



  /*  rotated on start so the front is visible first */
  transform: rotateY(180deg);
}

.flip-e.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}

.zone {
     flex-wrap: wrap;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  position: relative;
 margin-top:20px;
  margin-left:5%;
}

.donut-chart {
  position: relative;
	width: 200px;
  height: 200px;
	margin: 0 auto 0;
	border-radius: 100%
   
 }


/* ========================================================= DONUT CHART 70% / 15% / 5% / 5% / 5% ========================================================= */ /* --------------------------------------------------------- CSS PROPERTY ЗА АНИМАЦИЯ НА ЪГЪЛА --------------------------------------------------------- */ @property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; } /* --------------------------------------------------------- ОСНОВНА ГРАФИКА --------------------------------------------------------- */ .donut-chart { position: relative; width: 200px; height: 200px; margin: 0 auto; border-radius: 50%; } /* --------------------------------------------------------- ЦЕНТРАЛЕН ТЕКСТ --------------------------------------------------------- */ p.center { background: #ffffff; position: absolute; text-align: center; font-family: "Sofia Sans"; color: #1AB2F2; font-size: 24px; font-weight: 300; top: 0; left: 0; bottom: 0; right: 0; width: 130px; height: 130px; margin: auto; border-radius: 50%; line-height: 35px; padding-top: 25%; } /* --------------------------------------------------------- СЕКТОРИ --------------------------------------------------------- */ .portion-block { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%; clip: auto; } /* --------------------------------------------------------- CIRCLE --------------------------------------------------------- */ .circle { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%; background: conic-gradient( from 0deg, currentColor 0deg, currentColor var(--angle), transparent var(--angle), transparent 360deg ); color: transparent; } /* ========================================================= PART 1 — 70% = 252° 0° → 252° ========================================================= */ #part1 { transform: rotate(0deg); } #part1 .circle { color: #090979; --angle: 0deg; animation: part1-animation 8s infinite; } @keyframes part1-animation { 0% { --angle: 0deg; } 100% { --angle: 252deg; } } /* ========================================================= PART 2 — 15% = 54° 252° → 306° ========================================================= */ #part2 { transform: rotate(252deg); } #part2 .circle { color: #116bd1; --angle: 0deg; animation: part2-animation 8s infinite; } @keyframes part2-animation { 0% { --angle: 0deg; } 100% { --angle: 54deg; } } /* ========================================================= PART 3 — 5% = 18° 306° → 324° ========================================================= */ #part3 { transform: rotate(306deg); } #part3 .circle { color: #1AB2F2; --angle: 0deg; animation: part3-animation 8s infinite; } @keyframes part3-animation { 0% { --angle: 0deg; } 100% { --angle: 18deg; } } /* ========================================================= PART 4 — 5% = 18° 324° → 342° ========================================================= */ #part4 { transform: rotate(324deg); } #part4 .circle { color: #00d4ff; --angle: 0deg; animation: part4-animation 8s infinite; } @keyframes part4-animation { 0% { --angle: 0deg; } 100% { --angle: 18deg; } } /* ========================================================= PART 5 — 5% = 18° 342° → 360° ========================================================= */ #part5 { transform: rotate(342deg); } #part5 .circle { color: #7de3ff; --angle: 0deg; animation: part5-animation 8s infinite; } @keyframes part5-animation { 0% { --angle: 0deg; } 100% { --angle: 18deg; }}

.label {
          position: relative;
  margin-top:45px;
  margin-right: 15%;
  width:150px;
  flex-wrap: wrap;
  flex-direction: column;
  display: flex;
  
  font-family: Sofia Sans;
  font-size: 20px;
  line-height: 100%;
  font-weight: 500;
  
}