@font-face {font-family: Suisse; src: url(../fonts/SuisseIntl.woff);}
@font-face {font-family: Panama; src: url(../fonts/Panama.woff);}
body {font-family: Suisse, "Helvetica", sans-serif; color: #111111; background-color: black; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; margin: 0;}
a {
  font-family: Panama, "Georgia", serif;
  font-size: 1.328125vw;
  line-height: 1.17647059;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-color: #11111130;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.3125vw;
  color: inherit;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -ms-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

a:hover {
  text-decoration-color: #111111;
}

.desktop {display: block;}
.mobile {display: none;}

.bg-color-item {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
}

.bg-color-item div {
  width: inherit;
  height: inherit;
  position: absolute;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  background-size: cover;
}

#bg-1, #bg-4 {background-color: #D9E8EF;}
#bg-2 {background-color: #3865A0;}
#bg-3 {background-color: #E8D3CF;}
#bg-5 {background-color: #A35208;}

.bg-img-item {
  position: absolute;
  width: 96.25vw;
  height: 56.875vw;
  left: 1.875vw;
  top: 1.875vw;
  border-radius: 1.5625vw;
  overflow: auto;
  background-size: cover;
}

.header {
  width: 98.75%;
  padding: 0.625vw; 
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 40;
}

#head {
  opacity: 1;
  transition: 0.3s;
}

.header-name {
  padding: 0.9375vw 1.5625vw;
  border-radius: 1.5625vw;
  background-color: #F1F1F150;
  backdrop-filter: blur(16px) brightness(105%);
  -webkit-backdrop-filter: blur(16px) brightness(105%);
  color: inherit;
  box-shadow: 0 10px 10px rgb(0 0 0 / 6%);
  max-height: 1.4vw;
}

.header-name a {
  text-decoration: none;
  text-underline-offset: 0;
}

.header-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background-color: #F1F1F150;
  border-radius: 1.875vw;
  backdrop-filter: blur(16px) brightness(105%);
  -webkit-backdrop-filter: blur(16px) brightness(105%);
  box-shadow: 0 10px 10px rgb(0 0 0 / 6%);
  width: 3.4375vw;;
  height: 3.4375vw;
  transition: 0.3s;
}

.header-menu-item {display: none; width: 100%;}

.header-menu-item ul {
  list-style: none;
  margin-top: 0.625vw;
  text-align: center;
  padding-left: 0;
  color: #ffffff;
}

.header-menu-item li {margin-top: 0.625vw;}

.header-menu-item a {
  font-family: Suisse, "Helvetica", sans-serif;; 
  font-size: 0.859375vw; 
  line-height: 1.090909;
  letter-spacing: 0.03em; 
  text-decoration: none;
}

.header-menu-item a:hover {opacity: 0.5}

.header-menu.open {
  width: 16vw; 
  height: fit-content;
  padding-bottom: 0.625vw; 
  transition: 0.3s;
  background-color: #24242480;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}

.header-menu-item.open {display: block;} 

.hide {
  opacity: 0!important;
  -webkit-filter: blur(16px); 
  -moz-filter: blur(16px);
  -o-filter: blur(16px); 
  -ms-filter: blur(16px);
  filter: blur(16px);
}

.white {color: white!important}

.info-item {
  width: 29.375vw;
  padding: 1.25vw;
  background-color: #F1F1F150;
  border-radius: 1.5625vw;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #111;
  font-size: 1.171875vw;
  line-height: 1.33333333;
  position: relative;
  z-index: 5;
  -webkit-transition: height 0.3s ease-in-out;
  -moz-transition: height 0.3s ease-in-out;
  -ms-transition: height 0.3s ease-in-out;
  -o-transition: height 0.3s ease-in-out;
  transition: height 0.3s ease-in-out;
}

.info-item#help {height: 9vw}
.info-item#experience {height: 10.75vw}
.info-item#education {height: 18.75vw}
.info-item#video {height: 15.25vw}

.info-item-text ul {
  padding-left: 1.25vw;
  list-style: none;
  margin-top: 0;
}

.info-item-text li {
  margin-top: 0.625vw;
}

.info-item-text li:first-child {margin-top: 0;}
.info-item-text.open li:first-child {margin-top: 0.625vw;}

.info-img {
  width: 23.75vw;
  height: 35.625vw;
  border-radius: 1.5625vw;
  position: relative;
  overflow: auto;
  background-size: cover;
  z-index: 4;
  box-shadow: 0 10px 10px rgb(0 0 0 / 6%);
}

.minus {display: none;}

/* svg внутри строки даёт отступ под базовую линию — из-за него иконка меню съезжает вверх */
.header-menu .toggle-next {display: flex;}
.header-menu .toggle-next svg {display: block;}
.open > .plus {display: none;}
.open > .minus {display: inline-block;}
.toggle-next {cursor:pointer;}

.info-item.open#help, .info-item.open#experience, .info-item.open#education {
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
}

.info-item.open#help {height: 35.625vw; }
.info-item.open#experience {height: 40vw;}
.info-item.open#education {height: 57.5vw;} 

.info-item-text-hide {opacity: 0;}

.info-item-text-hide.open {
  opacity: 1; 
  transition: opacity 0.2s 0.1s;
  -webkit-transition: opacity 0.2s 0.2s;;
  -moz-transition: opacity 0.2s 0.2s;;
  -ms-transition: opacity 0.2s 0.2s;;
  -o-transition: opacity 0.2s 0.2s;;
}

@media (max-width: 787px) {

  a {
    font-size: 4.33673469vw;
    text-underline-offset: 1.02040816vw;
  }

  .desktop {display: none;}
  .mobile {display: block;}

  .header {
    width: 96%;
    padding: 2.04081633vw; 
  }

  .header-name {
    padding: 2.56122449vw 5.10204082vw 3.56122449vw 5.10204082vw;
    border-radius: 6.08163265vw;
    max-height: 4.59183673vw;
  }

  .header-menu {
    border-radius: 6.12244898vw;
    width: 11.2244898vw;;
    height: 11.2244898vw;
  }

  .header-menu-item ul {margin-top: 2.04081633vw;}
  .header-menu-item li {margin-top: 4.04081633vw;}
  .header-menu-item a {font-size: 3.80612245vw;}
  .header-menu.open {width: 72.44897959vw; height: 72.44897959vw; }

  .header-menu .toggle-next .plus svg {width: 11.2244898vw!important;}
  .header-menu .toggle-next .minus svg {width: 11.2244898vw!important;}

  .info {padding-top: 12.75510204vw;}

  .info-item {
    width: 87.91836735vw;
    padding: 4.08163265vw;
    border-radius: 5.10204082vw;
    font-size: 3.82653061vw;
    position: static!important;
    margin: 2.04081633vw!important;
  }

  .info-item#help {height: 35.79591837vw!important;}
  .info-item#experience {height: 36.87755102vw!important;}
  .info-item#education {height: 66.18367347vw!important;}
  .info-item#video {height: 55.25vw!important;}
  .info-item.open#help {height: auto!important;}
  .info-item.open#experience {height: auto!important;}
  .info-item.open#education {height: auto!important;}
  .info-item-text {margin-bottom: 4.08163265vw!important;}
  .info-item-text ul {padding-left: 2.04081633vw;}
  .info-item-text li {margin-top: 2.04081633vw;}
  .info-item-text.open li:first-child {margin-top: 2.04081633vw;}
  .info-img {
    width: 95.91836735vw;
    height: 143.87755102vw;
    border-radius: 5.10204082vw;
    margin-top: 2.04081633vw!important;
    margin-bottom: 2.04081633vw;
    left: 2.04081633vw!important;
  }
  .plus svg {width: 5.10204082vw!important;}
  .minus svg {width: 5.10204082vw!important;}
  .toggle-next {gap: 1.02040816vw!important;}
}
/* --- Программы --- */

.header-left {
  display: flex;
  gap: 0vw;
}

.header-name-current {background-color: #F1F1F190;}

.programs {padding-top: 3.75vw; padding-bottom: 1.875vw;}

.info-item.programs-intro {
  box-sizing: border-box;
  width: 40vw;
  background-color: #F1F1F190;
}

.programs-grid {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 1.875vw;
  padding: 1.875vw;
}

.info-item.program {
  box-sizing: border-box;
  width: 47.1875vw;
  padding: 1.5625vw;
}

.info-item.programs-contacts {
  box-sizing: border-box;
  width: 96.25vw;
  margin: 0 1.875vw;
}

.program-title {
  font-family: Panama, "Georgia", serif;
  font-size: 1.875vw;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-bottom: 1.25vw;
}

.programs-intro .program-title {font-size: 2.5vw;}

.program-sub {
  font-family: Suisse, "Helvetica", sans-serif;
  font-size: 0.859375vw;
  line-height: 1.09090909;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 0.46875vw;
}

.program .info-item-text {margin-bottom: 1.25vw;}
.program .program-more .info-item-text:last-child {margin-bottom: 0;}

.program-toggle {width: fit-content;}

.program-more {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: max-height 0.4s ease-in-out, opacity 0.2s, margin-top 0.4s ease-in-out;
  transition: max-height 0.4s ease-in-out, opacity 0.2s, margin-top 0.4s ease-in-out;
}

.program-more.open {
  max-height: 1000vw; /* запасное значение: точную высоту ставит скрипт */
  opacity: 1;
  margin-top: 1.25vw;
  -webkit-transition: max-height 0.5s ease-in-out, opacity 0.3s 0.1s, margin-top 0.5s ease-in-out;
  transition: max-height 0.5s ease-in-out, opacity 0.3s 0.1s, margin-top 0.5s ease-in-out;
}

.program-more ol {
  padding-left: 1.5vw;
  margin: 0;
}

.program-more li {margin-top: 0.625vw;}
.program-more li:first-child {margin-top: 0;}

@media (max-width: 787px) {

  .programs {padding-top: 12.75510204vw; padding-bottom: 2.04081633vw;}

  /* Меню в правом нижнем углу */
  .header-menu {
    position: fixed;
    right: 2.04081633vw;
    bottom: 2.04081633vw;
    flex-direction: column-reverse;
  }

  .header-menu.open {
    padding-top: 2.04081633vw;
    padding-bottom: 0;
  }

  .header-menu-item ul {
    margin-top: 0;
    margin-bottom: 2.04081633vw;
  }

  .programs-hero {
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    padding: 0;
    background-image: none!important;
  }

  .info-item.programs-intro {
    width: 95.91836735vw;
    margin: 2.04081633vw!important;
  }

  .programs-grid {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .info-item.program {
    width: 95.91836735vw;
    padding: 4.08163265vw;
  }

  .info-item.programs-contacts {
    width: 95.91836735vw;
    margin: 0!important;
    margin-left: 2.04081633vw!important;
  }

  .program-title {font-size: 6.12244898vw; margin-bottom: 4.08163265vw;}
  .programs-intro .program-title {font-size: 8.16326531vw;}
  .program-sub {font-size: 3.06122449vw; margin-bottom: 1.53061224vw;}
  .program .info-item-text {margin-bottom: 4.08163265vw!important;}
  .program-more.open {margin-top: 4.08163265vw;}
  .program-more ol {padding-left: 4.5vw;}
  .program-more li {margin-top: 2.04081633vw;}
  .program-more li:first-child {margin-top: 0;}
}