body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Ubuntu, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* предотвращает прокрутку */
}
/*---Fonts---*/
.ubuntu-light {
    font-family: "Ubuntu", sans-serif;
    font-weight: 300;
    font-style: normal;
}
.ubuntu-regular {
    font-family: "Ubuntu", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.ubuntu-medium {
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    font-style: normal;
}
.ubuntu-bold {
    font-family: "Ubuntu", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.ubuntu-light-italic {
    font-family: "Ubuntu", sans-serif;
    font-weight: 300;
    font-style: italic;
}
.ubuntu-regular-italic {
    font-family: "Ubuntu", sans-serif;
    font-weight: 400;
    font-style: italic;
}
.ubuntu-medium-italic {
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    font-style: italic;
}
.ubuntu-bold-italic {
    font-family: "Ubuntu", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.ubuntu-condensed-regular {
    font-family: "Ubuntu Condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
/*---background---*/
.group-47198{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    filter: blur(10px);
}
.ellipse-2{
    position: absolute;
    top: 0;
    height: 100%;
    filter: blur(10px);
}
.ellipse-1, .group-47199{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    filter: blur(10px);
}
.ellipse-3{
    position: absolute;
    right: 0;
    bottom: 0;
    height: 70%;
    filter: blur(10px);
}
.vector-1{
    position: absolute;
    right: 0;
    bottom: 0;
    height: 40%;
    filter: blur(10px);
}










.center-main-circle {
    /* width: 360px;
    height: 360px; */
    width: 18vw; /* Используем относительные единицы */
    height: 18vw; /* Используем относительные единицы */
    border-radius: 50%;
    background-color: #F99F28;
    position: relative; /* Изменено на relative */
    display: flex;
    justify-content: center;
    align-items: center;
}
.circle-top-one, 
.circle-top-two, 
.circle-top-three, 
.circle-top-four{
    /* width: 220px;
    height: 220px; */
    border-radius: 50%;
    /* position: absolute; */
    width: 12vw; /* Используем относительные единицы */
    height: 12vw; /* Используем относительные единицы */
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
.circle-top-one {
    /* left: calc(50% + 90px);
    top: calc(50% - 365px); */
    left: 54%;
    top: 10%;
    background: hsla(206, 76%, 82%, 1);
    background: linear-gradient(225deg, hsla(206, 76%, 82%, 1) 29%, hsla(34, 95%, 57%, 1) 100%);
}
.circle-top-two {
    left: 30%;
    top: 6%;
    background: hsla(199, 100%, 42%, 1);
    background: linear-gradient(135deg, hsla(199, 100%, 42%, 1) 8%, hsla(34, 95%, 57%, 1) 100%);
}
.circle-top-three {
    left: 30%;
    top: 63%;
    background: hsla(44, 59%, 87%, 1);
    background: linear-gradient(45deg, hsla(44, 59%, 87%, 1) 41%, hsla(34, 95%, 57%, 1) 100%);
}
.circle-top-four {
    right: 31%;
    bottom: 8%;
    background: hsla(211, 81%, 19%, 1);
    background: linear-gradient(315deg, hsla(211, 81%, 19%, 1) 28%, hsla(34, 95%, 57%, 1) 100%);
}
.center-main-circle .percent-main-circle {
    /* width: 310px;
    height: 310px; */
    width: 90%; /* Используем относительные единицы */
    height: 90%; /* Используем относительные единицы */
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    /* top: calc(50% - 155px);
    left: calc(50% - 155px); */
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
.circle-top-one .percent-main-circle, 
.circle-top-two .percent-main-circle, 
.circle-top-three .percent-main-circle, 
.circle-top-four .percent-main-circle {
    width: 11vw;
    height: 11vw;
}
.circle-top-one .percent-main-circle, 
.circle-top-two .percent-main-circle, 
.circle-top-three .percent-main-circle, 
.circle-top-four .percent-main-circle {
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    /* top: calc(50% - 100px);
    left: calc(50% - 100px); */
    background-color: #fff;
}

.center-main-circle .percent-main-circle .full-years, 
.circle-top-one .percent-main-circle .full-years, 
.circle-top-two .percent-main-circle .full-years, 
.circle-top-three .percent-main-circle .full-years, 
.circle-top-four .percent-main-circle .full-years, 
.circle-empty-one .percent-main-circle .full-years{
    font-weight: 500;
    font-family: 'Ubuntu';
}
.center-main-circle .percent-main-circle svg, 
.circle-top-one .percent-main-circle svg, 
.circle-top-two .percent-main-circle svg, 
.circle-top-three .percent-main-circle svg, 
.circle-top-four .percent-main-circle svg {
	display: block;
}

.center-main-circle .percent-main-circle svg.pl {
    width: 17vw;
    height: 17vw;
}
.circle-top-one .percent-main-circle svg .pl, 
.circle-top-two .percent-main-circle svg .pl, 
.circle-top-three .percent-main-circle svg .pl, 
.circle-top-four .percent-main-circle svg .pl {
	width: 240px;
	height: 240px;
}
.center-main-circle .percent-main-circle svg .pl, 
.circle-top-one .percent-main-circle svg .pl, 
.circle-top-two .percent-main-circle svg .pl, 
.circle-top-three .percent-main-circle svg .pl, 
.circle-top-four .percent-main-circle svg .pl {
	--percent: 0;
	margin-bottom: 1.5em;
	overflow: visible;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}
.center-main-circle .percent-main-circle svg .pl__ring,
.center-main-circle .percent-main-circle svg .pl__ring-glow1,
.center-main-circle .percent-main-circle svg .pl__ring-glow2,
.circle-top-one .percent-main-circle svg .pl__ring,
.circle-top-one .percent-main-circle svg .pl__ring-glow1,
.circle-top-one .percent-main-circle svg .pl__ring-glow2,
.circle-top-two .percent-main-circle svg .pl__ring,
.circle-top-two .percent-main-circle svg .pl__ring-glow1,
.circle-top-two .percent-main-circle svg .pl__ring-glow2,
.circle-top-three .percent-main-circle svg .pl__ring,
.circle-top-three .percent-main-circle svg .pl__ring-glow1,
.circle-top-three .percent-main-circle svg .pl__ring-glow2,
.circle-top-four .percent-main-circle svg .pl__ring,
.circle-top-four .percent-main-circle svg .pl__ring-glow1,
.circle-top-four .percent-main-circle svg .pl__ring-glow2 {
	stroke: #603959; 
	transition: stroke 1s;
}

.center-main-circle .percent-main-circle svg .pl__ring, 
.circle-top-one .percent-main-circle svg .pl__ring, 
.circle-top-two .percent-main-circle svg .pl__ring, 
.circle-top-three .percent-main-circle svg .pl__ring, 
.circle-top-four .percent-main-circle svg .pl__ring {
	stroke-dashoffset: calc(800px * (1 - var(--percent)));
}
.center-main-circle .percent-main-circle svg .pl[data-complete="false"], 
.circle-top-one .percent-main-circle svg .pl[data-complete="false"], 
.circle-top-two .percent-main-circle svg .pl[data-complete="false"], 
.circle-top-three .percent-main-circle svg .pl[data-complete="false"], 
.circle-top-four .percent-main-circle svg .pl[data-complete="false"] {
	animation: fade-in 0.5s cubic-bezier(0.65,0,0.35,1);
}

.center-main-circle .percent-main-circle .title-menu-main-circle {
    border-radius: 50%;
    position: absolute;
    width: 75%; /* Используем относительные единицы */
    height: 75%; /* Используем относительные единицы */
    /* left: calc(50% - 118px);
    top: calc(50% - 118px); */
    background-color: #F99F28;
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.45));
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
  }
.circle-top-one .percent-main-circle .title-menu-main-circle,
.circle-top-two .percent-main-circle .title-menu-main-circle,
.circle-top-three .percent-main-circle .title-menu-main-circle,
.circle-top-four .percent-main-circle .title-menu-main-circle{
    border-radius: 50%;
    position: absolute;
    width: 70%;
    height: 70%;
    left: 15%;
    top: 15%;
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.45));
    display: flex;
    justify-content: center;
    transition: 0.3s;
}
.center-main-circle .percent-main-circle .title-menu-main-circle:hover,
.circle-top-one .percent-main-circle .title-menu-main-circle:hover,
.circle-top-two .percent-main-circle .title-menu-main-circle:hover,
.circle-top-three .percent-main-circle .title-menu-main-circle:hover,
.circle-top-four .percent-main-circle .title-menu-main-circle:hover{
    transform: scale(1.1);
}
.circle-top-one .percent-main-circle .title-menu-main-circle {
    background-color: #B0D6F4;
}
.circle-top-two .percent-main-circle .title-menu-main-circle{
    background-color: #0094d6;
}
.circle-top-three .percent-main-circle .title-menu-main-circle{
    background-color: #f2e8cc;
}
.circle-top-four .percent-main-circle .title-menu-main-circle{
    background-color: #092F57;
}

.center-main-circle .percent-main-circle .title-menu-main-circle .top-side{
    text-align: center;
    /* padding: 15px 10px 10px 10px; */
}
.center-main-circle .percent-main-circle .title-menu-main-circle .top-side img {
    width: 40%;
    margin-top: 3%;
}
.center-main-circle .percent-main-circle .title-menu-main-circle .main-circle-line {
    border-top: 1px solid #59374E;
    width: 70%;
    margin: 0 auto;
}
.center-main-circle .percent-main-circle .title-menu-main-circle .bottom-side {
    padding: 0.6vw;
}
.center-main-circle .percent-main-circle .title-menu-main-circle .bottom-side a {
    color: #FFF;
    font-family: Ubuntu;
    font-size: 0.9vw; /* Используем относительные единицы */
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.2s;
}
.center-main-circle .percent-main-circle .title-menu-main-circle .bottom-side a:hover {
    color: #59374E;
}

.circle-top-one .percent-main-circle .title-menu-main-circle .top-side,
.circle-top-two .percent-main-circle .title-menu-main-circle .top-side,
.circle-top-three .percent-main-circle .title-menu-main-circle .top-side,
.circle-top-four .percent-main-circle .title-menu-main-circle .top-side{
    text-align: center;
    padding: 10px;
    height: 128px;
    width: 128px;
    display: table-cell;
    vertical-align: middle;
}
.circle-top-one .percent-main-circle .title-menu-main-circle img,
.circle-top-two .percent-main-circle .title-menu-main-circle img,
.circle-top-three .percent-main-circle .title-menu-main-circle img,
.circle-top-four .percent-main-circle .title-menu-main-circle img {
    width: 75%;
}








/*---circle-empty---*/
.circle-empty-left-one, 
.circle-empty-left-two {
    border-radius: 50%;
    position: absolute;
    background: hsla(0, 0%, 96%, 1);
    background: linear-gradient(90deg, hsla(0, 0%, 96%, 1) 40%, hsla(34, 95%, 57%, 1) 100%);
}
.circle-empty-top-one {
    border-radius: 50%;
    position: absolute;
    background: hsla(34, 95%, 57%, 1);
    background: linear-gradient(0deg, hsla(34, 95%, 57%, 1) 0%, hsla(0, 0%, 92%, 1) 53%);
}
.circle-empty-bottom-one,
.circle-empty-bottom-two {
    border-radius: 50%;
    position: absolute;
    background: hsla(0, 0%, 92%, 1);
    background: linear-gradient(360deg, hsla(0, 0%, 92%, 1) 50%, hsla(34, 95%, 57%, 1) 100%);
}
.circle-empty-right-two, 
.circle-empty-right-one {
    border-radius: 50%;
    position: absolute;
    background: hsla(0, 0%, 96%, 1);
    background: linear-gradient(270deg, hsla(0, 0%, 96%, 1) 40%, hsla(34, 95%, 57%, 1) 100%);
}



.circle-empty-left-one,
.circle-empty-top-one,
.circle-empty-right-one,
.circle-empty-bottom-one {
    width: 7.5vw;
    height: 7.5vw;
}
.circle-empty-left-one {
    left: 30%;
    top: 32%;
}
.circle-empty-top-one { 
    left: 44%;
    top: 13%;
}
.circle-empty-right-one { 
    right: 31%;
    top: 51%;
}
.circle-empty-bottom-one { 
    left: 42%;
    bottom: 10%;
}

.circle-empty-left-two,
.circle-empty-bottom-two,
.circle-empty-right-two{
    width: 6.5vw;
    height: 6.5vw;
}
.circle-empty-left-two {
    left: 33%;
    top: 48%;
}
.circle-empty-bottom-two {
    left: 50%;
    bottom: 16%;
}
.circle-empty-right-two {
    right: 33%;
    top: 36%;
}


.circle-empty-left-one .percent-main-circle, 
.circle-empty-left-two .percent-main-circle, 
.circle-empty-top-one .percent-main-circle, 
.circle-empty-right-one .percent-main-circle, 
.circle-empty-bottom-one .percent-main-circle,
.circle-empty-right-two .percent-main-circle,
.circle-empty-bottom-two .percent-main-circle {
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 1.0);
    background: linear-gradient(0deg, rgba(255, 255, 255, 1.0), rgb(184, 184, 184));
}
.circle-empty-left-one .percent-main-circle, 
.circle-empty-top-one .percent-main-circle, 
.circle-empty-right-one .percent-main-circle, 
.circle-empty-bottom-one .percent-main-circle {
    width: 6.7vw;
    height: 6.7vw;
    top: 5%;
    left: 5%;
}
.circle-empty-left-two .percent-main-circle,
.circle-empty-right-two .percent-main-circle,
.circle-empty-bottom-two .percent-main-circle {
    width: 5.7vw;
    height: 5.7vw;
    top: 6%;
    left: 6%;
  }

/*---title-block---*/
.circle-empty-left-one .percent-main-circle .title-menu-main-circle, 
.circle-empty-left-two .percent-main-circle .title-menu-main-circle, 
.circle-empty-top-one .percent-main-circle .title-menu-main-circle, 
.circle-empty-right-one .percent-main-circle .title-menu-main-circle, 
.circle-empty-bottom-one .percent-main-circle .title-menu-main-circle,
.circle-empty-right-two .percent-main-circle .title-menu-main-circle,
.circle-empty-bottom-two .percent-main-circle .title-menu-main-circle {
    border-radius: 50%;
    position: absolute;
    background-color: #ebebeb;
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.45));
    text-align: center;
    font-family: "Ubuntu Condensed", sans-serif;
    font-size: 0.8vw;
}
.circle-empty-left-one .percent-main-circle .title-menu-main-circle, 
.circle-empty-top-one .percent-main-circle .title-menu-main-circle, 
.circle-empty-right-one .percent-main-circle .title-menu-main-circle, 
.circle-empty-bottom-one .percent-main-circle .title-menu-main-circle{
    width: 5.2vw;
    height: 5.2vw;
    left: 11%;
    top: 11%;
}
.circle-empty-left-two .percent-main-circle .title-menu-main-circle,
.circle-empty-right-two .percent-main-circle .title-menu-main-circle,
.circle-empty-bottom-two .percent-main-circle .title-menu-main-circle {
    width: 4.2vw;
    height: 4.2vw;
    left: 14%;
    top: 14%;
}

.circle-empty-left-one .percent-main-circle .title-menu-main-circle .inner-circle, 
.circle-empty-left-two .percent-main-circle .title-menu-main-circle .inner-circle, 
.circle-empty-top-one .percent-main-circle .title-menu-main-circle .inner-circle, 
.circle-empty-right-one .percent-main-circle .title-menu-main-circle .inner-circle, 
.circle-empty-bottom-one .percent-main-circle .title-menu-main-circle .inner-circle,
.circle-empty-right-two .percent-main-circle .title-menu-main-circle .inner-circle,
.circle-empty-bottom-two .percent-main-circle .title-menu-main-circle .inner-circle {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.circle-empty-left-one .percent-main-circle .title-menu-main-circle .inner-circle, 
.circle-empty-top-one .percent-main-circle .title-menu-main-circle .inner-circle, 
.circle-empty-right-one .percent-main-circle .title-menu-main-circle .inner-circle, 
.circle-empty-bottom-one .percent-main-circle .title-menu-main-circle .inner-circle{
    width: 6vw;
    height: 5.3vw;
    padding-left: 5px;
    padding-right: 5px;
}
.circle-empty-left-two .percent-main-circle .title-menu-main-circle .inner-circle,
.circle-empty-right-two .percent-main-circle .title-menu-main-circle .inner-circle,
.circle-empty-bottom-two .percent-main-circle .title-menu-main-circle .inner-circle {
    width: 4.2vw;
    height: 4.3vw;
    padding-left: 5px;
    padding-right: 5px;
}



.percent-main-circle .empty-block-percent{
    text-align: center;
    font-family: "Ubuntu Condensed", sans-serif;
    color: #fff;
    font-size: 0.7vw;
}


.footer-row{
position: absolute;
bottom: 0;
width: 100%;
}
.footer-row div {
    width: 50%;
    float: left;
    text-align: center;
    padding-top: 0.8vw;
    padding-bottom: 0.8vw;
    background: #59374E;
    color: #fff;
    font-family: 'Ubuntu Condensed';
    font-size: 0.8vw;
    font-weight: 400;
}

.lang-switch {
    position: absolute;
    top: 2%;
    text-align: center;
}
.lang-switch img {
    width: 18vw;
}
.lang-switch div{
    margin-top: -8%;
    font-size: 0.8vw;
}
.lang-switch div a{
    text-decoration: none;
    color: #59374E;
}
.lang-switch div a:hover{
    text-decoration: underline;
}

.years {
    position: absolute;
    top: 3%;
    font-size: 1.2vw;
    color: #603959;
    font-family: 'Ubuntu Condensed';
    left: 32%;
  }



/* Animations */
@keyframes fade-in {
	from {
		animation-timing-function: steps(1,end);
		opacity: 0;
		visibility: hidden;
	}
	50% {
		animation-timing-function: cubic-bezier(0.65,0,0.35,1);
		opacity: 0;
		visibility: visible;
	}
	to {
		opacity: 1;
	}
}
@keyframes fade-slide-in {
	from {
		opacity: 0;
		transform: translateY(20%);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}




/* ---------------------------------------------------------------------------------------------- */
#circle_1,
#circle_2,
#circle_3,
#circle_4,
#circle_5,
#circle_6,
#circle_7,
#circle_8,
#circle_9,
#circle_10,
#circle_11,
#circle_12
{
  transform-origin: center;
  transform: rotate(-90deg);
  stroke: #603959;
  fill: #fff;
}

#circle_1 {
  transition: all 2.5s ease;
}

#circle_2 {
  transition: all 3.5s ease;
}

#circle_3 {
  transition: all 3s ease;
}

#circle_4 {
  transition: all 4s ease;
}

#circle_5 {
  transition: all 5s ease;
}

#circle_6 {
  transition: all 6s ease;
}

#circle_7 {
  transition: all 4s ease;
}

#circle_8 {
  transition: all 3s ease;
}

#circle_9 {
  transition: all 3s ease;
}

#circle_10 {
  transition: all 3s ease;
}

#circle_11 {
  transition: all 3s ease;
}

#circle_12 {
  transition: all 3s ease;
}

.percent_1,
.percent_2,
.percent_3,
.percent_4,
.percent_5,
.percent_6,
.percent_7,
.percent_8,
.percent_9,
.percent_10,
.percent_11,
.percent_12
{
  font-size: 53%;
  fill: #d3d3d3;
  font-family: 'Ubuntu Condensed';
}
.percent_1{
    font-size: 45%;
}

#myCanvas {
  position: fixed;
}




/*--------MODAL-------*/
.card {
    display: flex;
    flex-direction: column;
    padding: 32px;
    margin: 40px;
    max-width: 400px;
    width: 100%;

    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.content-wrapper {
  margin-bottom: 44px;
}
.content-wrapper:last-child {
  margin-bottom: 0;
}



.link {
  color: #121943;
}
.link:focus {
  box-shadow: 0px 0px 0px 2px #121943;
}

.input-wrapper {
  display: flex;
  flex-direction: column;
}
.input-wrapper .label {
  align-items: baseline;
  display: flex;
  font-weight: 700;
  justify-content: space-between;
  margin-bottom: 8px;
}
.input-wrapper .optional {
  color: #5a72b5;
  font-size: 0.9em;
}
.input-wrapper .input {
  border: 1px solid #5a72b5;
  border-radius: 4px;
  height: 40px;
  padding: 8px;
  margin-bottom: 8px;
}
.input-wrapper .input:focus {
  border: 2px solid transparent;
  box-shadow: 0px 0px 0px 2px #121943;
  outline: solid 4px transparent;
}

*:focus,
input[type=radio]:focus + label::before {
  border: transparent;
  box-shadow: 0px 0px 0px 2px #121943;
  outline: solid 4px transparent;
}

code {
  background: #e5e6ef;
  border: 1px solid #5a72b5;
  border-radius: 4px;
  padding: 2px 4px;
}

.modal-header {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}

.close {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  height: 16px;
  text-decoration: none;
  width: 16px;
}
.close svg {
  width: 16px;
}

.modal-wrapper {
  align-items: center;
  background: rgba(0, 0, 0, 0.1);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

#modal, #modal2, #modal3 {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  visibility: hidden;
}
#modal:target, #modal2:target, #modal3:target {
  opacity: 1;
  visibility: visible;
}
#modal:target .modal-body, #modal2:target .modal-body, #modal3:target .modal-body {
  opacity: 1;
  transform: translateY(1);
}
#modal .modal-body, #modal2 .modal-body, #modal3 .modal-body {
  max-width: 500px;
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity 0.25s ease-in-out;
  width: 100%;
  z-index: 1;
}

.outside-trigger {
  bottom: 0;
  cursor: default;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.button__link {
  text-decoration: none;
}