*,*::before,*::after{
   margin: 0;
   padding: 0;
   border: 0;
   box-sizing: border-box;
}

html,body{
   height: 100%;
   background: var(--white);
}

.wrapper {
   width: 100%;
   min-height: 100%;
   overflow: hidden;
}

:root{
   --blue: #066884;
   --white: #fcfbf9;
   --brown: #AEA38F;
}

.header{
   position: fixed;
   width: 100%;
   height: 13vh;
   top: 0;
   left: 0;
   z-index: 50;
}
.header::before{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--white);
   z-index: 2;
}

.header__button{
   position: relative;
   cursor: pointer;
   text-decoration: none;
   color: #817359;
   border: .2vw ridge var(--brown);
   border-radius: 5px;
   background: transparent;
   font-family: 'Alegreya Sans', sans-serif;
   font-size: 1.3vw;
   letter-spacing: .2vw;
   height: 5vh;
   padding: .4vw;
}
.header__button::before{
   content: "";
   transform-origin: center;
   position: absolute;
   top: -20%;
   left: 3%;
   width: 95%;
   height: 45%;
   background-color: var(--white);
   transition: 0.5s;
}
.header__button::after{
   content: "";
   position: absolute;
   bottom: -30%;
   left: 3%;
   width: 95%;
   height: 45%;
   background-color: var(--white);
   transition: 0.5s;
   transform-origin: center;
}
.header__button:hover:before, .header__button:hover::after{
   transform: scale(0);
}

.lang__button {
   padding-left: 3vw;
   font-size: 18px;
   background-color: transparent;
   text-decoration: underline;
   font-family: 'Alegreya Sans', sans-serif;
   color: var(--blue);
   font-size: 1.3vw;
   cursor: pointer;
}
.container{
   margin: 0 auto;
   width: 100%;
}
.container__header{
   max-width: 1480px;
   padding: 0 0 0 23vw;
   height: 100%;
}
.container__content{
   max-width: 1280px;
   padding: 0 14vw;
}
.header__body{
   display: flex;
   position: relative;
   height: 100%;
   justify-content: space-evenly;
   align-items: center;
}
.dobrocenter{
   text-decoration: none;
   position: absolute;
   color: var(--brown);
   top: 3.5vh;
   left: -20vw;
   z-index: 2;
   max-width: 1px;
   font-family: 'Rubik Mono One', sans-serif;
   font-size: 18px;
}
.p__dobro{
   transform: translate(.7vw, 0);
}
.p__center{
   letter-spacing: .1vw;
}
.header__menu{
   display: flex;
   width: 100%;
}

.header__list{
   display: flex;
   position: relative;
   z-index: 2;
}
.header__list li{
   list-style: none;
}

.header__link{
   text-decoration: none;
   margin-right: 3vw;
   color: var(--blue);
   font-family: 'Alegreya Sans', sans-serif;
   font-size: 1.3vw;
   font-weight: 100;
   letter-spacing: .2vw;
   transition: 1.2s;
}
.header__link:hover{
   font-size: 1.2vw;
   transform: scale(2);
   filter: drop-shadow(6px 10px 1px rgba(15, 23, 23, 0.3));
   transition: 0.2s;
   transform: translateY(2px);
}
.header__burger{
   display: none;
}
.content {
}

.cards{
   margin: 25vmin 5vmin;
}
h2{
   text-align: center;
   font-size: 3vw;
   margin-bottom: 3vh;
   color: var(--blue);
   font-family: 'Montserrat', sans-serif;
   font-weight: 100;
}
.card__row {
   display: flex;
   align-items: center;
   width: 100%;
   justify-content: space-between;
}
.card__column {
   display: flex;
   flex-direction: column;
   align-items: center;
}
img{
   aspect-ratio: 3/2;
   object-fit: cover;
   width: 30vw;
}
.card__button {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 15vw;
   height: 5vh;
   background-color: var(--brown);
   border-radius: 30px;
   margin-top: 2vh;
   opacity: .9;
   transition: .3s;
}
.card__button:hover{
   filter: drop-shadow(6px 10px 5px rgba(15, 23, 23, .1));
}
.card__link{
   display: flex;
   text-decoration: none;
   color: var(--white);
   font-family: 'Alegreya Sans', sans-serif;
   font-size: 1.5vw;
}
@media(width >= 1650px) {
   .container__header{
      max-width: 2000px;
   }
   .dobrocenter{
      top: 4vh;
      left: -18vw;
      font-size: 22px;
   }
   .finland::before{
      left: -52vw;
   }
}
@media(1439px >= width) {
   .header__link{
      font-size: 1.6vw;
   }
   .p__dobro{
      transform: translate(.8vw, 0);
   }
   .content__button{
      font-size: 1.6vw;
   }
   .finland::before{
      left: -36vw;
   }
   .text{
      font-size: 2.2vw;
   }
}
@media(992px >= width) {
   .header{
      height: 7vh;
   }
   .header__link{
      font-size: 1.6vw;
   }
   .dobrocenter{
      top: 1.4vh;
   }
   .p__dobro{
      transform: translate(1vw, 0);
   }
   .content__button{
      width: 24vw;
      font-size: 4vw;
   }
   h2{
      font-size: 6vw;
   }
   .card__column img{
      width: 28vw;
   }
   .card__button{
      height: 3vh;
   }
   .card__button a{
      font-size: 2vw;
   }
}
@media(770px >= width) {
   body.lock{
      overflow: hidden;
   }
   .header{
      position: fixed;
      width: 100%;
      height: 7vh;
      top: 0;
      left: 0;
      z-index: 50;
   }
   .header::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--white);
      z-index: 2;
   }
   .container{
      margin: 0 auto;
      width: 100%;
   }
   .container__header{
      width: 100%;
      padding: 0;
      height: 100%;
   }
   .header__body{
      width: 100%;
   }
   .header__menu{
      width: 100%;
      display: flex;
      justify-content: space-evenly;
   }
   .header__list{
      display: flex;
      position: relative;
      z-index: 2;
   }
   
   .header__link{
      text-decoration: none;
      margin-right: 3vw;
      color: black;
      font-family: 'Alegreya Sans', sans-serif;
      font-size: 1.7vw;
      color: var(--blue);
      letter-spacing: .2vw;
      transition: 1.2s;
   }
   .header__button{
      font-size: 2.4vw;
   }
   .container__content{
      max-width: 1280px;
      padding: 0 14vw;
   }
   
   .dobrocenter{
      display: none;
   }
   .content__inscription{
      font-size: 8vw;
   }
}
@media(width <= 435px) {
   .header {
      height: 8vh;
   }
   .dobrocenter { 
      display: block;
      top: 12%;
      left: 5%;
   }
   .p__dobro{
      transform: translate(2vw, 0);
   }
   .header__body{}
   .container{
      max-width: 426px;
   }
   .header__body{
      max-width: 426px;
   }
   .header__burger{
      display: block;
      position: absolute;
      top: 30%;
      right: 7%;
      width: 25px;
      height: 20px;
      z-index: 4;
   }
   .header__burger::before,
   .header__burger::after{
      content: '';
      background-color: var(--blue);
      position: absolute;
      width: 100%;
      height: 2px;
      left: 0;
   }
   .header__burger span{
      position: absolute;
      background-color: var(--blue);
      left: 0;
      width: 100%;
      height: 2px;
      top: 10px;
      transition: .1s;
   }
   .header__burger::before{
      top: 10%;
      transition: .5s;
   }
   .header__burger::after{
      bottom: 0;
      transition: .5s;
   }
   .header__burger.active span{
      transform: scale(0);
   }
   .header__burger.active::before{
      transform: rotate(45deg);
      top: 9px;
   }
   .header__burger.active::after{
      transform: rotate(-45deg);
      bottom: 9px;
   }
   .header__menu{
      position: fixed;
      overflow: auto;
      top: -100%;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--white);
      padding: 80px 0 0 0;
      z-index: 2;
      transition: .5s;
   }
   .header__menu.active{
      top: 0;
   }
   .header__list{
      display: block;
   }
   .header__list li{
      padding: 2vh 0 3vh 5vw;
   }
   .header__link{
      font-size: 6vw;
      font-family: 'Alegreya Sans', sans-serif;
      font-weight: 100;
      position: relative;
   }
   .header__link::before{
      position: absolute;
      top: -2vh;
      left: -15vw;
      content: '';
      background-color: var(--brown);
      height: .1vh;
      width: 80vw;
   }
   .header__button{
      position: relative;
      font-size: 8vw;
      border: none;
   }
   .header__button::before{
      position: absolute;
      top: -2vh;
      left: -15vw;
      content: '';
      background-color: var(--brown);
      height: .1vh;
      width: 80vw;
   }
   .header__button::after{
      display: none;
   }
   h2{
      font-size: 8vw;
   }
   .card__row{
      flex-direction: column;
   }
   .card__column{
      margin-bottom: 5vw;
   }
   .card__column img{
      width: 80%;
   }
   .card__button{
      width: 40vw;
      height: 4vh;
   }
   .card__button a{
      font-size: 4vw;
   }
   .lang__button {
      font-size: 8vw;
      transform: translateX(20vw);
   }
}