body {
  font-family: "Jost", sans-serif;
  font-family: "Rosario", sans-serif;
  font-family: "Pattaya", sans-serif;
  font-family: "Nunito", sans-serif;

  background-color: #eefeff;
}
.box {
  width: 1100px;
  margin: 0 auto;
  margin-top: 10px;
  padding-bottom: 0px;
}
.block {
  width: auto 50% auto;
  height: auto;
  display: inline-block;
}
.block_1 {
  float: center;
}
.block_1_1 {
  display: none;
}
.block_2 {
  float: left;
}
.block_3 {
  float: right;
  display: block;
}

@media (max-width: 600px) {
  .box {
    display: block;
    width: auto;
    margin: 10px;
  }
  .block_1 {
    width: 100%;
    display: none;
  }
  .block_1_1 {
    display: block;
    font-size: 4rem;
    font-family: "Nunito";
    color: #690399;
    font-weight: 900;
    width: 110%;
  }
  .block_2 {
    width: 50%;
    margin-top: 0px;
    display: none;
  }
  .block_3 {
    width: 50%;
    float: left;
    margin-top: 0px;
    display: none;
  }
}

.wrapper {
  margin: 0 auto;
  text-align: center;
}

.nav {
  float: none;
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin-top: 0px;
  padding-left: 0;
  font-size: 20px;
  font-family: "Jost", sans-serif;
}

.nav > li {
  margin-left: 50px;
  margin-right: 10 px;
}

.nav > li a {
  text-decoration: none;
  color: #5f5f5f;
  /*color: #1d0042;*/
}

@media (max-width: 600px) {
  li a {
    display: none;
  }
}

.responsive {
  width: 100%;
  height: auto;
}

.main-img {
  display: block;
  width: 100%;
}
.mobile-img {
  display: none;
  width: 110%;
  height: auto;
}
@media (max-width: 600px) {
  .main-img {
    display: none;
  }
  .mobile-img {
    display: block;
    margin: 0px auto;
  }
}

/* МАГИСТР */

.title-h1 {
  margin-top: 30px;
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: 60px;
  text-decoration: none;
  color: #690399;
}
.grid-container1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1vw;
  max-width: 1100px;
  position: relative;
  margin: auto;
  padding: 10px;
}
.grid-item1 {
  line-height: 1em;
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: 30px;
  text-align: left;
  color: #690399;
}

.title-h1_1 {
  font-family: "Rosario", sans-serif;
  font-size: 16px;
  text-align: left;
  color: #111010;
  line-height: 1.3em;
  margin-top: 10px;
}
.grid-item14 {
  font-family: "Jost", sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  background-color: #ff2e00;
  width: 45%;
  padding: 10px;
  margin: 20px 0px 20px 0px;
  color: #eefeff;
}
.grid-item2 {
  font-family: "Rosario", sans-serif;
  font-weight: 400;
  font-size: 16px;
  text-align: justify;
  color: #111010;
}
.grid-container1_11 {
  display: none;
}
.grid-container1_12 {
  display: none;
}
@media only screen and (max-width: 600px) {
  .grid-container1 {
    grid-template-columns: 1fr;
  }
  .title-h1 {
    display: block;
    line-height: 4rem;
    margin-top: 20%;
  }
  .grid-item1 {
    font-family: "Nunito", sans-serif;
    font-size: 4rem;
    font-weight: 300;
    text-align: center;
    display: block;
    color: #111010;
    margin-top: 30px;
    width: 110%;
  }
  .title-h1_1 {
    font-family: "Nunito", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    text-align: left;
    display: block;
    text-align: center;
    margin-top: 20%;
  }
  .grid-item14 {
    text-align: center;
    width: 100%;
    display: none;
  }
  .grid-item2 {
    text-align: left;
    display: none;
  }

  .grid-item3 {
    display: none;
  }
  .grid-container1_11 {
    display: block;
    margin: 5%;
  }
  .grid-container1_12 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin-top: 30px;
    margin-left: 5%;
    width: 100%;
  }

  .grid-item16_1 {
    font-family: "Nunito", sans-serif;
    font-size: 4rem;
    font-weight: 900;
    font-style: italic;
    background-color: #690399;
    margin: 1px;
    padding: 10px;
    color: #f4ebff;
  }
  .text_03 {
    font-family: "Nunito", sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    font-style: normal;
    text-align: center;
    color: #f4ebff;
  }
}

.grid-container1_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 4fr));
  grid-gap: 1vw;
  max-width: 1100px;
  position: relative;
  margin: auto;
}
.grid-item3 {
  font-family: "Pattaya", sans-serif;
  font-weight: 400;
  font-size: 6vw;
  padding-bottom: 10px;
  color: #690399;
  background-color: #ffeae5;
  justify-content: center;
}



/* КУРСЫ */
.grid-item5 {
  font-size: 16px;
  font-family: "Rosario", sans-serif;
  font-weight: 400;
  color: #5f5f5f;
  padding-bottom: 10px;
}
.grid-container2 {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(auto-fit, minmax(200px, 4fr));
  padding: 10px;
  max-width: 1100px;
  position: relative;
  margin: auto;
}
.grid-item4 {
  width: 200px;
  height: auto;
  padding-top: 20px;
  padding-left: 20px;
  padding-bottom: 10px;
  font-family: "Rosario", sans-serif;
  font-size: 16px;
  text-align: left;
  color: #111010;
  background-color: #f9e9ff;
  margin-bottom: 10px;
}
.column {
  font-family: "Jost", sans-serif;
  display: block;
  float: left;
  width: 220px;
  height: auto;
  padding: 15px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  text-align: center;
  font-size: 40px;
  color: #eefeff;
  background-color: #9039ff;
  margin-bottom: 10px;
}

@media (max-width: 600px) {
  .title-h1 {
    display: none;
  }
  .grid-item5 {
    display: none;
  }
  .column {
    display: none;
    grid-template-columns: 2fr;
    grid-template-rows: 2fr;
    width: 50%;
    height: 180px;
  }
  .grid-container2 {
    grid-template-columns: 1fr;
    display: none;
  }
  .grid-item4 {
    width: 100%;
    display: none;
  }
}

/*КУРСЫ СЛАЙДЕР*/
.all_1 {
  display: none;
}
@media (max-width: 600px) {
  .title-h1_2 {
    margin-top: 100px;
    font-family: "Nunito", sans-serif;
    font-weight: 400;
    font-size: 4rem;
    text-decoration: none;
    color: #690399;
    display: block;
  }
  .grid-item5_1 {
    font-size: 1.6rem;
    font-family: "Nunito", sans-serif;
    font-weight: 400;
    text-align: left;
    color: #5f5f5f;
    padding: 20px;
    margin: 0 auto;
    max-width: 90vw;
    display: block;
  }
  .grid-container1_13 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 0% auto;
  }
  .grid-item16_2 {
    font-family: "Nunito", sans-serif;
    font-size: 3rem;
    background-color: #f4ebff;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-top: 20px;
    line-height: 100%;
    text-align: left;
    color: #111010;
  }
  .text_04 {
    font-family: "Nunito", sans-serif;
    font-size: 1.6rem;
    font-weight: 300;
    text-align: left;
    color: #111010;
    line-height: 2.5rem;
    padding-top: 10px;
  }
  .text_05 {
    font-family: "Nunito", sans-serif;
    font-size: 1.6rem;
    font-weight: 300;
    text-align: left;
    color: #111010;
    line-height: 1rem;
    margin-left: 30px;
    margin-top: 30px;
  }
  .text_06 {
    font-family: "Nunito", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    text-align: left;
    color: #111010;
    line-height: 2.5rem;
    margin-left: 30px;
  }

  @media (max-width: 600px) {
    #switch1_1:checked ~ #controls label:nth-child(2_1),
    #switch2_1:checked ~ #controls label:nth-child(3_1),
    #switch3_1:checked ~ #controls label:nth-child(4_1),
    #switch4_1:checked ~ #controls label:nth-child(5_1),
    #switch5_1:checked ~ #controls label:nth-child(1_1) {
      display: none;
    }
    .all_1 {
      display: block;
      font-family: "Nunito", sans-serif;
      margin-left: 5%;
      width: 100%;
    }
  }
  label,
  a {
    /*при наведении на стрелки или переключатели - курсор изменится*/
    cursor: pointer;
  }
  .all_1 input {
    /*скрывает стандартные инпуты (чекбоксы) на странице*/
    display: none;
  }
  /*позиция изображения при активации переключателя*/
  #switch1_1:checked ~ #slides .image {
    margin-left: 0;
  }
  #switch2_1:checked ~ #slides .image {
    margin-left: -100%;
  }
  #switch3_1:checked ~ #slides .image {
    margin-left: -200%;
  }
  #switch4_1:checked ~ #slides .image {
    margin-left: -300%;
  }
  #switch5_1:checked ~ #slides .image {
    margin-left: -400%;
  }
  #controls {
    /*положение блока всех управляющих элементов*/
    margin: -25% 0 0 0;
    width: 100%;
    height: 50px;
  }
  #active label {
    /*стиль отдельного переключателя*/
    border-radius: 40px; /*скругление углов*/
    display: inline-block; /*расположение в строку*/
    width: 50px;
    height: 50px;
    background: #bbb;
    margin-left: 20px;
  }
  #active {
    /*расположение блока с переключателями*/
    margin: 23% 0 0;
    text-align: center;
  }
  #active label:hover {
    /*поведение чекбокса при наведении*/
    background: #76c8ff;
    border-color: #777 !important; /*выполнение в любом случае*/
  }
  /*цвет активного лейбла при активации чекбокса*/
  #switch1_1:checked ~ #active label:nth-child(1_1),
  #switch2_1:checked ~ #active label:nth-child(2_1),
  #switch3_1:checked ~ #active label:nth-child(3_1),
  #switch4_1:checked ~ #active label:nth-child(4_1),
  #switch5_1:checked ~ #active label:nth-child(5_1) {
    background: #18a3dd;
    border-color: #18a3dd !important;
  }
  #slides .image {
    /*анимация пролистывания изображений*/
    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  #controls label:hover {
    /*прозрачность стрелок при наведении*/
    opacity: 0.6;
  }
  #controls label {
    /*прозрачность стрелок при отводе курсора*/
    transition: opacity 0.2s ease-out;
  }
}

/* ОТЗЫВЫ */
.container {
  max-width: 1100px;
  margin: 0px auto;
}
.p1 {
  font-family: "Jost", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 20px;
}
.p2 {
  font-family: "Rosario", sans-serif;
  font-size: 16px;
  max-width: 750px;
  width: 90vw;
  line-height: 20px;
  text-align: left;
  margin: auto;
}

.slider-prev {
  background: url("/img/prev.png") no-repeat;
  float: left;
  margin-top: 200px;
  height: 75px;
  width: 75px;
  cursor: pointer;
}

div.slider-prev:hover {
  opacity: 0.25;
}

.slider-next {
  background: url("/img/next.png") no-repeat;
  float: right;
  margin-top: 200px;
  height: 75px;
  width: 75px;
  cursor: pointer;
}

div.slider-next:hover {
  opacity: 0.25;
}
.slider1 {
  width: 68%;
  height: 424px;
  margin: auto;
  overflow: hidden;
}

.slider-line {
  width: 68%;
  height: 424px;
  display: flex;
  position: relative;
  left: 0;
  transition: all ease 1s;
}

.slider1-item {
  margin: 0 auto;
}

.reviews-counter {
  text-align: center;
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}
.reviews-counter span {
  font-weight: bold;
  color: #0066cc;
}

/*DeepSeek*/
.slider1-item {
  display: none; /* Сначала все слайды скрыты */
}

.slider1-item:first-child {
  display: block; /* Показываем первый слайд */
}

/*ОТЗЫВЫ СЛАЙДЕР*/
.all {
  display: none;
}
@media (max-width: 600px) {
  .slider-prev {
    background: url("/img/prev_Mob.png") no-repeat;
    float: left;
    margin-top: 20px;
    height: 40px;
    width: 40px;
    cursor: pointer;
    margin-left: 10px;
  }
  div.slider-prev:hover {
    opacity: 0.25;
  }
  .slider-next {
    background: url("/img/next_Mob.png") no-repeat;
    float: right;
    margin-top: 20px;
    height: 40px;
    width: 40px;
    cursor: pointer;
  }
  div.slider-next:hover {
    opacity: 0.25;
  }
  .container {
    max-width: 100%;
    margin: 0px auto;
    display: none;
  }
  .slider1 {
    width: 540px;
    height: 50%;
    margin: auto;
    overflow: hidden;
    text-align: center;
  }
  .slider-line {
    width: 540px;
    height: 50%;
    display: flex;
    position: relative;
    left: 0;
    transition: all ease 1s;
    text-align: center;
  }
  .slider1-item {
    margin: 0 auto;
    margin-top: 0px;
    padding-top: 0px;
  }

  /*ОТЗЫВЫ СЛАЙДЕР*/
  .all {
    display: block;
    margin-left: 5%;
    width: 100%;
  }
  #slider {
    /*положение слайдера*/
    top: 10px;
  }
  #slider {
    /*центровка слайдера*/
    margin: 0 auto;
  }
  #slides article {
    /*все изображения справа друг от доруга*/
    width: 20%;
    float: left;
  }
  #slides .image {
    /*устанавливает общий размер блока с изображениями*/
    width: 500%;
    line-height: 0;
  }
  #overflow {
    /*сркывает все, что находится за пределами этого блока*/
    width: 100%;
    overflow: hidden;
  }
  article img {
    /*размер изображений слайдера*/
    width: 30%;
  }
  #desktop:checked ~ #slider {
    /*размер всего слайдера*/
    max-width: 750px; /*максимальнная длинна*/
    border-bottom: 1px solid #690399;
  }
  /*настройка переключения и положения для левой стрелки*/
  /*если свич1-5 активны, то идет обращение к лейблу из блока с id контролс*/
  #switch1:checked ~ #controls label:nth-child(5),
  #switch2:checked ~ #controls label:nth-child(1),
  #switch3:checked ~ #controls label:nth-child(2),
  #switch4:checked ~ #controls label:nth-child(3),
  #switch5:checked ~ #controls label:nth-child(4) {
    background: url("/img/prev.png") no-repeat; /*заливка фона картинкой без повторений*/
    float: left;
    margin: 0 0 0 -84px; /*сдвиг влево*/
    display: block;
    height: 68px;
    width: 68px;
  }
  /*настройка переключения и положения для правой стрелки*/
  #switch1:checked ~ #controls label:nth-child(2),
  #switch2:checked ~ #controls label:nth-child(3),
  #switch3:checked ~ #controls label:nth-child(4),
  #switch4:checked ~ #controls label:nth-child(5),
  #switch5:checked ~ #controls label:nth-child(1) {
    background: url("/img/next.png") no-repeat; /*заливка фона картинкой без повторений*/
    float: right;
    margin: 0 -84px 0 0; /*сдвиг вправо*/
    display: block;
    height: 68px;
    width: 68px;
  }
  @media (max-width: 600px) {
    #switch1:checked ~ #controls label:nth-child(2),
    #switch2:checked ~ #controls label:nth-child(3),
    #switch3:checked ~ #controls label:nth-child(4),
    #switch4:checked ~ #controls label:nth-child(5),
    #switch5:checked ~ #controls label:nth-child(1) {
      display: none;
    }
  }
  label,
  a {
    /*при наведении на стрелки или переключатели - курсор изменится*/
    cursor: pointer;
  }
  .all input {
    /*скрывает стандартные инпуты (чекбоксы) на странице*/
    display: none;
  }
  /*позиция изображения при активации переключателя*/
  #switch1:checked ~ #slides .image {
    margin-left: 0;
  }
  #switch2:checked ~ #slides .image {
    margin-left: -100%;
  }
  #switch3:checked ~ #slides .image {
    margin-left: -200%;
  }
  #switch4:checked ~ #slides .image {
    margin-left: -300%;
  }
  #switch5:checked ~ #slides .image {
    margin-left: -400%;
  }
  #controls {
    /*положение блока всех управляющих элементов*/
    margin: -25% 0 0 0;
    width: 100%;
    height: 50px;
  }
  #active label {
    /*стиль отдельного переключателя*/
    border-radius: 40px; /*скругление углов*/
    display: inline-block; /*расположение в строку*/
    width: 50px;
    height: 50px;
    background: #bbb;
    margin-left: 20px;
  }
  #active {
    /*расположение блока с переключателями*/
    margin: 23% 0 0;
    text-align: center;
  }
  #active label:hover {
    /*поведение чекбокса при наведении*/
    background: #76c8ff;
    border-color: #777 !important; /*выполнение в любом случае*/
  }
  /*цвет активного лейбла при активации чекбокса*/
  #switch1:checked ~ #active label:nth-child(1),
  #switch2:checked ~ #active label:nth-child(2),
  #switch3:checked ~ #active label:nth-child(3),
  #switch4:checked ~ #active label:nth-child(4),
  #switch5:checked ~ #active label:nth-child(5) {
    background: #18a3dd;
    border-color: #18a3dd !important;
  }
  #slides .image {
    /*анимация пролистывания изображений*/
    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  #controls label:hover {
    /*прозрачность стрелок при наведении*/
    opacity: 0.6;
  }
  #controls label {
    /*прозрачность стрелок при отводе курсора*/
    transition: opacity 0.2s ease-out;
  }
}

/* МЕТОДИКА */
.grid-container3 {
  display: grid;
  grid-template-columns: 25% auto 25%;
  max-width: 1100px;
  position: relative;
  margin: auto;
}
.grid-item6 {
  font-family: "Rosario", sans-serif;
  font-size: 16px;
  color: #111010;
  padding-bottom: 10px;
}
.char3 {
  color: #5f5f5f;
}
.all_2 {
  display: none;
}
@media only screen and (max-width: 600px) {
  .grid-container3 {
    grid-template-columns: 1fr;
    display: none;
  }

  .grid-container1_16 {
    display: block;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    height: auto;
  }
  .grid-item16_3 {
    font-size: 3rem;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 4rem;
    color: #111010;
  }
  .text_07 {
    font-family: "Nunito", sans-serif;
    font-size: 1.6rem;
    text-align: center;
    color: #111010;
    margin-top: 2rem;
    line-height: 2rem;
  }
  .text_09 {
    font-size: 14rem;
    font-weight: 900;
    font-style: italic;
    color: #690399;
    margin-top: 9rem;
  }
  /* МЕТОДИКА СЛАЙДЕР */
  @media (max-width: 600px) {
    #switch1_2:checked ~ #controls label:nth-child(2_2),
    #switch2_2:checked ~ #controls label:nth-child(3_2),
    #switch3_2:checked ~ #controls label:nth-child(4_2),
    #switch4_2:checked ~ #controls label:nth-child(5_2),
    #switch5_2:checked ~ #controls label:nth-child(1_2) {
      display: none;
    }
    .all_2 {
      display: block;
      margin-left: 5%;
      width: 100%;
    }
    #more {
      display: none;
    }
  }
  label,
  a {
    /*при наведении на стрелки или переключатели - курсор изменится*/
    cursor: pointer;
  }
  .all_2 input {
    /*скрывает стандартные инпуты (чекбоксы) на странице*/
    display: none;
  }
  /*позиция изображения при активации переключателя*/
  #switch1_2:checked ~ #slides .image {
    margin-left: 0;
  }
  #switch2_2:checked ~ #slides .image {
    margin-left: -100%;
  }
  #switch3_2:checked ~ #slides .image {
    margin-left: -200%;
  }
  #switch4_2:checked ~ #slides .image {
    margin-left: -300%;
  }
  #switch5_2:checked ~ #slides .image {
    margin-left: -400%;
  }
  #controls {
    /*положение блока всех управляющих элементов*/
    margin: -25% 0 0 0;
    width: 100%;
    height: 50px;
  }
  #active label {
    /*стиль отдельного переключателя*/
    border-radius: 40px; /*скругление углов*/
    display: inline-block; /*расположение в строку*/
    width: 50px;
    height: 50px;
    background: #bbb;
    margin-left: 20px;
  }
  #active {
    /*расположение блока с переключателями*/
    margin: 23% 0 0;
    text-align: center;
  }
  #active label:hover {
    /*поведение чекбокса при наведении*/
    background: #76c8ff;
    border-color: #777 !important; /*выполнение в любом случае*/
  }
  /*цвет активного лейбла при активации чекбокса*/
  #switch1_2:checked ~ #active label:nth-child(1_2),
  #switch2_2:checked ~ #active label:nth-child(2_2),
  #switch3_2:checked ~ #active label:nth-child(3_2),
  #switch4_2:checked ~ #active label:nth-child(4_2),
  #switch5_2:checked ~ #active label:nth-child(5_2) {
    background: #18a3dd;
    border-color: #18a3dd !important;
  }
  #slides .image {
    /*анимация пролистывания изображений*/
    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  #controls label:hover {
    /*прозрачность стрелок при наведении*/
    opacity: 0.6;
  }
  #controls label {
    /*прозрачность стрелок при отводе курсора*/
    transition: opacity 0.2s ease-out;
  }
}

/* ОПЫТ */
.grid-container4 {
  display: grid;
  grid-template-columns: 25% auto 25%;
  grid-template-rows: repeat(6, 1fr);
  max-width: 1100px;
  position: relative;
  margin: auto;
}

.grid-item7 {
  font-family: "Rosario", sans-serif;
  font-size: 16px;
  text-align: left;
  border-bottom: 2px solid #c57aff;
  height: 0 auto;
}

.grid-item7_1 {
  font-family: "Rosario", sans-serif;
  font-size: 16px;
  text-align: right;
  border-bottom: 2px solid #c57aff;
}

.title-h2 {
  margin-top: 30px;
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: 60px;
  text-decoration: none;
  color: #690399;
}

@media (max-width: 600px) {
  .title-h2 {
    display: none;
  }
  .grid-item7 {
    border-bottom: 2px solid #c57aff;
  }
  .grid-item7_1 {
    display: none;
  }
  .grid-container4 {
    grid-template-columns: 1fr;
    padding-left: 10px;
    display: none;
  }
}

/*ОПЫТ СЛАЙДЕР*/
.all_3 {
  display: none;
}
@media (max-width: 600px) {
  .all_3 {
    display: block;
    margin-left: 5%;
    width: 100%;
  }
}
@media (max-width: 600px) {
  #switch1_3:checked ~ #controls label:nth-child(2_3),
  #switch2_3:checked ~ #controls label:nth-child(3_3),
  #switch3_3:checked ~ #controls label:nth-child(4_3),
  #switch4_3:checked ~ #controls label:nth-child(5_3),
  #switch5_3:checked ~ #controls label:nth-child(1_3) {
    display: none;
  }
}
label,
a {
  /*при наведении на стрелки или переключатели - курсор изменится*/
  cursor: pointer;
}
.all_3 input {
  /*скрывает стандартные инпуты (чекбоксы) на странице*/
  display: none;
}
/*позиция изображения при активации переключателя*/
#switch1_3:checked ~ #slides .image {
  margin-left: 0;
}
#switch2_3:checked ~ #slides .image {
  margin-left: -100%;
}
#switch3_3:checked ~ #slides .image {
  margin-left: -200%;
}
#switch4_3:checked ~ #slides .image {
  margin-left: -300%;
}
#switch5_3:checked ~ #slides .image {
  margin-left: -400%;
}
#controls {
  /*положение блока всех управляющих элементов*/
  margin: -25% 0 0 0;
  width: 100%;
  height: 50px;
}
#active label {
  /*стиль отдельного переключателя*/
  border-radius: 40px; /*скругление углов*/
  display: inline-block; /*расположение в строку*/
  width: 50px;
  height: 50px;
  background: #bbb;
  margin-left: 20px;
}
#active {
  /*расположение блока с переключателями*/
  margin: 23% 0 0;
  text-align: center;
}
#active label:hover {
  /*поведение чекбокса при наведении*/
  background: #76c8ff;
  border-color: #777 !important; /*выполнение в любом случае*/
}
/*цвет активного лейбла при активации чекбокса*/
#switch1_3:checked ~ #active label:nth-child(1_3),
#switch2_3:checked ~ #active label:nth-child(2_3),
#switch3_3:checked ~ #active label:nth-child(3_3),
#switch4_3:checked ~ #active label:nth-child(4_3),
#switch5_3:checked ~ #active label:nth-child(5_3) {
  background: #18a3dd;
  border-color: #18a3dd !important;
}
#slides .image {
  /*анимация пролистывания изображений*/
  transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
#controls label:hover {
  /*прозрачность стрелок при наведении*/
  opacity: 0.6;
}
#controls label {
  /*прозрачность стрелок при отводе курсора*/
  transition: opacity 0.2s ease-out;
}

/* ГАЛЕРЕЯ */
.grid-container5 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 1100px;
  position: relative;
  margin: auto;
  grid-gap: 0.5vw;
}
.grid-item8 {
}

@media (max-width: 600px) {
  .grid-container5 {
    grid-template-columns: 1fr;
    display: none;
  }
}

/*ГАЛЕРЕЯ СЛАЙДЕР*/
.all_4 {
  display: none;
}
@media (max-width: 600px) {
  .all_4 {
    display: block;
    margin-left: 5%;
    width: 100%;
  }
}
@media (max-width: 600px) {
  #switch1_4:checked ~ #controls label:nth-child(2_4),
  #switch2_4:checked ~ #controls label:nth-child(3_4),
  #switch3_4:checked ~ #controls label:nth-child(4_4),
  #switch4_4:checked ~ #controls label:nth-child(5_4),
  #switch5_4:checked ~ #controls label:nth-child(1_4) {
    display: none;
  }
}
label,
a {
  /*при наведении на стрелки или переключатели - курсор изменится*/
  cursor: pointer;
}
.all_4 input {
  /*скрывает стандартные инпуты (чекбоксы) на странице*/
  display: none;
}
/*позиция изображения при активации переключателя*/
#switch1_4:checked ~ #slides .image {
  margin-left: 0;
}
#switch2_4:checked ~ #slides .image {
  margin-left: -100%;
}
#switch3_4:checked ~ #slides .image {
  margin-left: -200%;
}
#switch4_4:checked ~ #slides .image {
  margin-left: -300%;
}
#switch5_4:checked ~ #slides .image {
  margin-left: -400%;
}
#controls {
  /*положение блока всех управляющих элементов*/
  margin: -25% 0 0 0;
  width: 100%;
  height: 50px;
}
#active label {
  /*стиль отдельного переключателя*/
  border-radius: 40px; /*скругление углов*/
  display: inline-block; /*расположение в строку*/
  width: 50px;
  height: 50px;
  background: #bbb;
  margin-left: 20px;
}
#active {
  /*расположение блока с переключателями*/
  margin: 23% 0 0;
  text-align: center;
}
#active label:hover {
  /*поведение чекбокса при наведении*/
  background: #76c8ff;
  border-color: #777 !important; /*выполнение в любом случае*/
}
/*цвет активного лейбла при активации чекбокса*/
#switch1_4:checked ~ #active label:nth-child(1_4),
#switch2_4:checked ~ #active label:nth-child(2_4),
#switch3_4:checked ~ #active label:nth-child(3_4),
#switch4_4:checked ~ #active label:nth-child(4_4),
#switch5_4:checked ~ #active label:nth-child(5_4) {
  background: #18a3dd;
  border-color: #18a3dd !important;
}
#slides .image {
  /*анимация пролистывания изображений*/
  transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
#controls label:hover {
  /*прозрачность стрелок при наведении*/
  opacity: 0.6;
}
#controls label {
  /*прозрачность стрелок при отводе курсора*/
  transition: opacity 0.2s ease-out;
}

/* ДИПЛОМЫ */
.grid-container6 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 1100px;
  position: relative;
  margin: auto;
}
.grid-item9 {
  font-family: "Rosario", sans-serif;
  color: #111010;
  text-align: left;
}
.char2 {
  font-family: "Jost", sans-serif;
  font-size: 18px;
}

@media (max-width: 600px) {
  .grid-container6 {
    display: none;
    grid-template-columns: 1fr;
  }
}

/*ДИПЛОМЫ MOBILE*/
.all_5 {
  display: none;
}
@media (max-width: 600px) {
  #switch1_5:checked ~ #controls label:nth-child(2_5),
  #switch2_5:checked ~ #controls label:nth-child(3_5),
  #switch3_5:checked ~ #controls label:nth-child(4_5),
  #switch4_5:checked ~ #controls label:nth-child(5_5),
  #switch5_5:checked ~ #controls label:nth-child(1_5) {
    display: none;
  }
  .all_5 {
    display: block;
    margin-left: 5%;
    width: 100%;
  }
  .text_08 {
    font-size: 1.6rem;
    font-weight: 400;
    text-align: left;
    color: #111010;
    line-height: 2rem;
    margin-left: 30px;
    margin-top: 20px;
  }
  .grid-container1_17 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }
}
label,
a {
  /*при наведении на стрелки или переключатели - курсор изменится*/
  cursor: pointer;
}
.all_5 input {
  /*скрывает стандартные инпуты (чекбоксы) на странице*/
  display: none;
}
/*позиция изображения при активации переключателя*/
#switch1_5:checked ~ #slides .image {
  margin-left: 0;
}
#switch2_5:checked ~ #slides .image {
  margin-left: -100%;
}
#switch3_5:checked ~ #slides .image {
  margin-left: -200%;
}
#switch4_5:checked ~ #slides .image {
  margin-left: -300%;
}
#switch5_5:checked ~ #slides .image {
  margin-left: -400%;
}
#controls {
  /*положение блока всех управляющих элементов*/
  margin: -25% 0 0 0;
  width: 100%;
  height: 50px;
}
#active label {
  /*стиль отдельного переключателя*/
  border-radius: 40px; /*скругление углов*/
  display: inline-block; /*расположение в строку*/
  width: 50px;
  height: 50px;
  background: #bbb;
  margin-left: 20px;
}
#active {
  /*расположение блока с переключателями*/
  margin: 23% 0 0;
  text-align: center;
}
#active label:hover {
  /*поведение чекбокса при наведении*/
  background: #76c8ff;
  border-color: #777 !important; /*выполнение в любом случае*/
}
/*цвет активного лейбла при активации чекбокса*/
#switch1_5:checked ~ #active label:nth-child(1_5),
#switch2_5:checked ~ #active label:nth-child(2_5),
#switch3_5:checked ~ #active label:nth-child(3_5),
#switch4_5:checked ~ #active label:nth-child(4_5),
#switch5_5:checked ~ #active label:nth-child(5_5) {
  background: #18a3dd;
  border-color: #18a3dd !important;
}
#slides .image {
  /*анимация пролистывания изображений*/
  transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
#controls label:hover {
  /*прозрачность стрелок при наведении*/
  opacity: 0.6;
}
#controls label {
  /*прозрачность стрелок при отводе курсора*/
  transition: opacity 0.2s ease-out;
}

/* КОНТАКТЫ */
.grid-container7 {
  display: grid;
  grid-template-columns: 10% 40% 25% 25%;
  max-width: 1100px;
  position: relative;
  margin: auto;
  background-color: #1d0042;
}
.grid-item10 {
  text-align: left;
  margin: 10px;
}
.grid-item11 {
  font-family: "Rosario", sans-serif;
  font-size: 16px;
  color: #eefeff;
  text-align: left;
  margin: 10px;
  display: block;
  padding-left: 20px;
  line-height: 35px;
}
.grid-item12 {
  font-family: "Rosario", sans-serif;
  font-size: 16px;
  color: #eefeff;
  text-align: left;
  margin: 10px;
  line-height: 35px;
}
.grid-item13 {
  font-family: "Jost", sans-serif;
  font-size: 18px;
  color: #eefeff;
  text-align: right;
  margin: 10px;
  line-height: 35px;
}
.grid-item15 {
  display: none;
}
.char2 {
  font-family: "Jost", sans-serif;
  font-size: 18px;
}
.main-logo {
  display: block;
  width: 100%;
}
.mobile-logo {
  display: none;
  width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .grid-container7 {
    grid-template-columns: 1fr;
    margin-top: 10rem;
    padding-bottom: 2rem;
    margin-left: 5%;
    width: 100%;
  }
  .grid-item10 {
    display: block;
    text-align: center;
  }
  .main-logo {
    display: none;
  }
  .mobile-logo {
    display: block;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .grid-item11 {
    display: block;
    margin-bottom: 50px;
    text-align: center;
    font-family: "Nunito";
    font-size: 1.4rem;
  }
  .grid-item12 {
    display: none;
    text-align: center;
  }
  .grid-item13 {
    display: none;
    text-align: center;
  }
  .grid-item15 {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 0px;
  }
}



/* Максимальная ширина для контейнера с кнопками */
#buttons-container {
    max-width: 1100px; /* Максимальная ширина */
    margin: 0 auto;     /* Централизует контейнер */
    padding: 20px;      /* Внутренние отступы */
}

/* Стили для кнопок */
#buttons-container button {
    padding: 10px 20px;             /* Размер внутренней области кнопки */
    background-color: #4CAF50;      /* Зеленый фон */
    color: white;                   /* Белый текст */
   
    border-radius: 5px;             /* Округлые углы */
    font-size: 16px;                /* Размер шрифта */
    cursor: pointer;                /* Указатель мышки как рука */
    margin: 5px;                    /* Внешний отступ между кнопками */
    transition: background-color 0.3s ease; /* Плавный переход фона при наведении */
}

#buttons-container button:hover {
    background-color: #45a049;      /* Темно-зеленый фон при наведении */
}

#buttons-container button.active {
    background-color: #009688;      /* Яркий зеленый фон для активной кнопки */
}


/* Максимальная ширина для галереи */
.gallery-container {
    max-width: 1100px; /* Максимальная ширина */
    margin: 0 auto;     /* Централизует контейнер */
    padding: 20px;      /* Внутренние отступы */
    display: flex;       /* Включаем Flexbox */
    flex-direction: column; /* Располагает элементы по вертикали */
    align-items: center;  /* Центрирует элементы по горизонтали */
}

.review {
    max-width: 750px;
    text-align: left;
    margin: 0px auto;
}

#gallery-container {
    max-width: 1100px; /* Максимальная ширина */
    margin: 0 auto;     /* Централизует контейнер */
    padding: 20px;      /* Внутренние отступы */
}

.navigation {
    display: flex;                  /* Включаем Flexbox */
    justify-content: space-between; /* Располагаем элементы по краям */
    align-items: center;            /* Выравниваем элементы по вертикали */
    margin: 20px 0;                /* Добавляем отступ сверху и снизу */
}

.slider-prev,
.slider-next {
    font-size: 24px;                /* Размер стрелок */
    cursor: pointer;                /* Указатель мышки как рука */
    user-select: none;              /* Запрещаем выделение текста */
    padding: 10px;                  /* Внутренний отступ */
    color: white;                   /* Белый текст */
    border-radius: 5px;             /* Округлые углы */
    transition: background-color 0.3s ease; /* Плавный переход фона при наведении */
}


.gallery {
    flex-grow: 1;                   /* Растягиваем контент между стрелками */
    background-color: ;
    padding: 20px;
    border: ;
    border-radius: 5px;
    justify-content: flex-start;
    flex-direction: column;
    
}

.gallery h2 {
    margin-top: 0;
    text-align: center;
}

.gallery .description {
    margin-top: 20px;
    text-align: center;
    
}