@font-face {
  font-family: 'SourceSansPro-Regular';
  src: url(../fonts/SourceSansPro-Regular.woff2) format('woff2'),
       url(../fonts/SourceSansPro-Regular.woff) format('woff');
 
  font-style: normal;
  font-display: swap; /* Добавлено 27.10.2023 */
  /* Дополнительные параметры */
  unicode-range: U+0000-FFFF; /* Определение диапазона символов, поддерживаемых шрифтом */
  font-stretch: normal; /* Растяжение шрифта (normal, condensed, expanded) */
  font-variant: normal; /* Вариант шрифта (normal, small-caps) */
}
  
@font-face {
  font-family: 'SourceSansPro-Light';
  src: url(../fonts/SourceSansPro-Light.woff2) format('woff2'),
       url(../fonts/SourceSansPro-Light.woff) format('woff');
 
  font-style: normal;
  font-display: swap; /* Добавлено 27.10.2023 */
  /* Дополнительные параметры */
  unicode-range: U+0000-FFFF; /* Определение диапазона символов, поддерживаемых шрифтом */
  font-stretch: normal; /* Растяжение шрифта (normal, condensed, expanded) */
  font-variant: normal; /* Вариант шрифта (normal, small-caps) */
}  

@font-face {
  font-family: 'SourceSansPro-Black';
  src: url(../fonts/SourceSansPro-Black.woff2) format('woff2'),
       url(../fonts/SourceSansPro-Black.woff) format('woff');
 
  font-style: normal;
  font-display: swap; /* Добавлено 27.10.2023 */
  /* Дополнительные параметры */
  unicode-range: U+0000-FFFF; /* Определение диапазона символов, поддерживаемых шрифтом */
  font-stretch: normal; /* Растяжение шрифта (normal, condensed, expanded) */
  font-variant: normal; /* Вариант шрифта (normal, small-caps) */
}
  

@font-face {
  font-family: 'SourceSansPro-SemiBold';
  src: url(../fonts/SourceSansPro-SemiBold.woff2) format('woff2'),
       url(../fonts/SourceSansPro-SemiBold.woff) format('woff');
 
  font-style: normal;
   font-display: swap; /* Добавлено 27.10.2023 */
  /* Дополнительные параметры */
  unicode-range: U+0000-FFFF; /* Определение диапазона символов, поддерживаемых шрифтом */
  font-stretch: normal; /* Растяжение шрифта (normal, condensed, expanded) */
  font-variant: normal; /* Вариант шрифта (normal, small-caps) */
}

body {
  margin: 0;
  font-family: 'SourceSansPro-Regular', 'SourceSansPro-Black', 'SourceSansPro-Light', 'SourceSansPro-SemiBold';
}

/* Основные стили для ссылок внутри body */
 
a {
  color: #0056b3; /* Цвет ссылок */
  text-decoration: underline; /* Подчеркивание при наведении */
  text-underline-offset: 4px; /* Смещает подчеркивание вниз на 2 пикселя */
  transition: color 0.3s ease; /* Плавная смена цвета */
  
}

/* Стиль для наведения мыши на ссылки внутри body */
 a:hover {
  color: #007bff; /* Цвет при наведении */
  text-decoration: none; /* Убрать подчеркивание */
}


/* Основные стили для ссылок внутри body */


/*Соц сети*/
.footer ul li{
  float: left;
  list-style-type: none;
  padding-right: 20px;
}
.footer ul li:last-child{
  padding-right: 0;
}

.social ul{
  display: inline-block;
}

/* / Соц сети*/

/*--banner--*/

.banner{
  background:url(../images/banners/at-top/glavn/startontop.webp)no-repeat 0px 0px;
  background-size:cover;
  background-position: center;
}

.baner-text {
  background-color: rgba(140, 0, 255, 0.50);
  width: 80%;
  margin: 0 auto;
  padding: 2% 0%;
}

/*-- МОЕ для большой картинки--*/
.baner-t {
  width: 50%;
  margin: 0 auto;
  padding: 25% 4%;
}


.baner-text h1 {
  color: #fff;
  font-family: 'SourceSansPro-Black';
  text-align: center;
  font-size: 6em;
  line-height: 1.2em;
  opacity: 0;
  animation: fadeInUp 1s ease-in-out 0.5s forwards;
}

/* Адаптация для планшетов */
@media only screen and (max-width: 1200px) {
    .baner-text h1 {
        font-size: 4em; /* Уменьшение размера шрифта на планшетах */
    }
}

/* Адаптация для планшетов */
@media only screen and (max-width: 968px) {
    .baner-text h1 {
        font-size: 3em; /* Уменьшение размера шрифта на планшетах */
    }
}

/* Адаптация для мобильных устройств */
@media only screen and (max-width: 660px) {
    .baner-text h1 {
        font-size: 2.5em; /* Еще меньшее уменьшение для мобильных устройств */
    }
}

/* Адаптация для мобильных устройств */
@media only screen and (max-width: 480px) {
    .baner-text h1 {
        font-size: 2em; /* Еще меньшее уменьшение для мобильных устройств */
    }
}

/* Адаптация для мобильных устройств */
@media only screen and (max-width: 400px) {
    .baner-text h1 {
        font-size: 1.6em; /* Еще меньшее уменьшение для мобильных устройств */
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}




.baner-text h1 a {
  color: #fff;
  line-height: .3em;
}
.baner-text span {
  font-size: 0.4em;
}
.baner-text h4 {
  color: #000000;
  font-size: 1.8em;
  border-top: 1px double;
}
div#top {
  margin: 7em 0 5.4em;
  position:relative;
}
.baner-text h3{
  color: #fff;
  font-family: 'Bravo-Regular';
  font-size: 3em;
  letter-spacing: 0px;
}
.baner-text p {
  color: #fff;
  font-size: 1.1em;
  margin-top: 0.5em;
  width: 80%;
}
/*------------------ Slider Part starts Here----------*/

#slider3,#slider4 {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  margin: 0 auto;
}
.rslides_tabs {
  list-style: none;
  padding: 0;
  background: rgba(0,0,0,.25);
  box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  -moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
  font-size: 18px;
  list-style: none;
  margin: 0 auto 50px;
  max-width: 540px;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}
.rslides_tabs li {
  display: inline;
  float: none;
  margin-right: 1px;
}
.rslides_tabs a {
  width: auto;
  line-height: 20px;
  padding: 9px 20px;
  height: auto;
  background: transparent;
  display: inline;
}
.rslides_tabs li:first-child {
  margin-left: 0;
}
.rslides_tabs .rslides_here a {
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: bold;
}
.events {
  list-style: none;
}
.banner-title .callbacks_container {
  background-color: rgba(84, 179, 174, 0.99);
  padding: 10em 2em 0;
  display: inline-block;
  min-height:598px;
}
.callbacks {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}
.callbacks li {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.callbacks img {
  position: relative;
  z-index: 1;
  height: auto;
  border: 0;
}
.callbacks_nav {
    position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 41%;
  left: 10%;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 51px;
  width: 22px;
  background: transparent url("../images/icons.png") no-repeat 0px -4px;
}
.callbacks_nav:active {
  opacity: 1.0;
}
.callbacks_nav.next {
  left: auto;
  right: 10%;
  background: url(../images/icons.png)no-repeat -41px -4px;
}
#slider3-pager a ,#slider4-pager a {
  display: inline-block;
}
#slider3-pager span, #slider4-pager span{
  float: left;
}
#slider3-pager span,#slider4-pager span{
  width:100px;
  height:15px;
  background:#fff;
  display:inline-block;
  border-radius:30em;
  opacity:0.6;
}
#slider3-pager .rslides_here a , #slider4-pager .rslides_here a {
  background: #FFF;
  border-radius:30em;
  opacity:1;
}
#slider3-pager a ,#slider4-pager a{
  padding: 0;
}
#slider3-pager li ,#slider4-pager li{
  display:inline-block;
}
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}
.rslides li{
  position: relative;
  display: block;
  float: left;
}
.rslides img {
  height: auto;
  border: 0;
  width:100%;
}
.callbacks_tabs {
  list-style: none;
  position: absolute;
  bottom: 3%;
  right: 2%;
  z-index: 111;
  padding: 0;
  margin: 0;
}
.callbacks_tabs li{
  display:block;
  margin: 0 .2em;
}
@media screen and (max-width: 600px){
  .callbacks_nav {
    top: 47%;
    }
}
/*----*/
.callbacks_tabs a{
 visibility: hidden;
}
.callbacks_tabs a:after {
  content: "\f111";
  font-size: 0;
  font-family: FontAwesome;
  visibility: visible;
  display: block;
  height: 12px;
  width: 12px;
  display: block;
  background: #FCFAFA;
}
.callbacks_here a:after{
  background: #f14038;
  border:1px solid #fff;
}
/*--//slider end here--*/



/*--banner-bottom--*/
.banner-bottom {
  margin-top: 1em;
  margin-bottom: 2em;
}
.banner-grids-info {
  padding: 6px;
}
.banner-grids-info img {
 width: 100%;
}
.banner-bottom a {
  overflow: hidden;
  position: relative;
  display: block;
}
.banner-bottom a .captn {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
  left: 0;

  text-align: center;
  -o-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.banner-bottom a:hover .captn {
  width: 100%;
  left:0%;
}

@media(max-width: 1000px){
  .banner-bottom a .captn {
  width: 100%;
  left:0%!important;
  background-color: transparent!important; 
}
}
.banner-bottom a .captn {
  display: inline-block;
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  top:0%;
  position: absolute;
  left: -50%;
  right: 0;
  background-color:rgba(140, 0, 255, 0.50);
  padding: 30% 0;
}
.banner-bottom a .captn span {
  font-size: 2.5em;
  font-family: 'SourceSansPro-SemiBold';
  letter-spacing: 0px;
}


@media(max-width: 1000px){
  .banner-bottom a .captn span {
  font-size: 1.5em;
  font-family: 'SourceSansPro-SemiBold';
  letter-spacing: 4px;
  background-color:rgba(140, 0, 255, 0.55)!important;
  padding: 10px 10px!important;
}
}

/*--banner-bottom--*/


/*--popular--*/
.popular {
  padding: 2em 0;
  margin-top: 30px;
}

.popular-2023 {
  padding: 2em 0;
}

.popular-grids {
  margin-top: 2.5em;
}

.popular h2 {
  color:#5B00A6;
  font-size: 3em;
  text-align: center;
  font-family: 'SourceSansPro-SemiBold';
  padding: 10px;
  letter-spacing: 0px;
  margin-bottom: 1em;
  margin-top: 1em;

}

/* Адаптация для планшетов */
@media only screen and (max-width: 1200px) {
    .popular h2 {
        font-size: 2.5em; /* Уменьшение размера шрифта на планшетах */
    }
}

/* Адаптация для планшетов */
@media only screen and (max-width: 968px) {
    .popular h2 {
        font-size: 2.2em; /* Уменьшение размера шрифта на планшетах */
    }
}

/* Адаптация для мобильных устройств */
@media only screen and (max-width: 660px) {
    .popular h2 {
        font-size: 1.9em; /* Еще меньшее уменьшение для мобильных устройств */
    }
}

/* Адаптация для мобильных устройств */
@media only screen and (max-width: 480px) {
    .popular h2 {
        font-size: 1.7em; /* Еще меньшее уменьшение для мобильных устройств */
    }
}

/* Адаптация для мобильных устройств */
@media only screen and (max-width: 400px) {
    .popular h2 {
        font-size: 1.5em; /* Еще меньшее уменьшение для мобильных устройств */
    }
}






.popular h3 {
  color: #5B00C6;
  font-size: 2.5em;
  text-align: left;
  font-family: 'SourceSansPro-SemiBold';
  letter-spacing: 0px;
  margin-top: 1em;
  margin-bottom: 1em;
}


.popular h4 {
  color: #626262;
  font-size: 1.7em;
  text-align: left;
  font-family: 'SourceSansPro-SemiBold';
  letter-spacing: 0px;
  margin-top: 1.3em;
  margin-bottom: 0.7em;
}


.popular p {
  font-size: 1.5em;
  color: #626262;
  line-height: 1.4em;
  text-align: left;
  hyphens: auto;
  font-family: 'SourceSansPro-Regular';
}
/* Отключаем переносы .popular p на мобильных устройствах */
@media only screen and (max-width: 1000px) {
    .popular p {
        text-align: left; /* или text-align: start; для мобильных устройств */
        hyphens: none; /* Отключаем переносы на мобильных устройствах */
        font-size: 18px;
        line-height: 1.4em;
        padding-left: 7px;
        margin-bottom: 25px;
    }
}
/* Отключаем переносы для .popular p  на мобильных устройствах */


/* Адаптация для мобильных устройств */
@media only screen and (max-width: 360px) {
     .popular p {
        text-align: left; /* или text-align: start; для мобильных устройств */
        hyphens: none; /* Отключаем переносы на мобильных устройствах */
        font-size: 17px;
        line-height: 1.4em;
        padding-left: 7px;
        margin-bottom: 25px;
}
}



/* СТИЛИ для горизонтальной линии абзаца */
.line {
    /* Стили, специфичные для <p> с классами .popular и .line */
    border-left: 2px solid #5B00C6; /* Замените #цвет_линии на нужный код цвета */
    padding-left: 16px; /* Дополнительный отступ слева */
}
/* СТИЛИ для горизонтальной линии абзаца */

.popular-action p {
  font-size: 1.8em;
  color: #626262;
  line-height: 1.8em;
 text-align: center;
  font-family: 'SourceSansPro-Regular';
}

.popular-2023 p {
  font-size: 1.4em;
  color: #626262;
  line-height: 1.4em;
  text-align: justify;
  hyphens: auto;
  font-family: 'SourceSansPro-Regular';
  margin-bottom: 16px; /* добавляем отступ снизу к каждому абзацу */
}


/*--Для списков С МАРКЕРАМИ в основном тексте в блоке popular--*/
.popular ul {
    font-family: 'SourceSansPro-Regular';
    font-size: 1.4em;
    color: #626262; 
    list-style-type: disc; /* Маркеры списка в виде кружков */
    padding-left: 40px; /* Отступ списка слева */
    margin: 20px 0 20px; /* Отступы: сверху 0, справа/слева 0, снизу 20px */
    line-height: 1.5;
    hyphens: auto; /* добавил позже - 16.11.*/
}

.popular ul li::marker {
    color: #5B00C6; /* Цвет маркера */
    
}

.popular ul li {
    margin-bottom: 10px; /* Отступ между элементами списка */
}

/* Медиазапрос для мобильных устройств */
@media (max-width: 768px) {
   .popular ul {
        font-size: 17px; /* Уменьшенный размер шрифта для мобильных устройств */
        text-align: left; /* или text-align: start; для мобильных устройств */
        hyphens: none; /* Отключаем переносы на мобильных устройствах */
        line-height: 1.6em;
    }

   .popular ul {
        padding-left: 20px; /* Уменьшенный отступ слева */
    }
}

        /*-- для списков в основном тексте в блоке popular--*/


/*--//popular--*/


.slid{
  background:url(../images/polosa_slid.webp)no-repeat 0px 0px;
  background-size:cover;
}
.video-slide {
  background:url(../images/slid.jpg)no-repeat 0px 0px;
  background-size:cover;
  text-align: center;
  padding: 150px 0;
  outline: none;
}


.slid h2 {
  color: #fff;
  font-size: 4em;
  padding: 3em 1em;
  text-align: center;
  font-family: 'Bravo-Regular';
  letter-spacing: 3px;
}
/*--news--*/
.news {
  padding: 2em 0;
}
.news h3 {
  color: #803d9a;
  font-size: 3em;
  text-align: center;
  font-family: 'Bravo-Regular';
  letter-spacing: 1px;
  margin-bottom: 0.5em;
  text-shadow: 0.5px 0 #803d9a;
}
.news h4 {
  font-size: 1em;
  color: #ef2a7c;
  text-transform: uppercase;
  line-height: 1.5em;
}
.news p {
  font-size: 1.03em;
  color: #555;
  line-height: 1.7em;
  margin-top: 0.5em;
}


.news h5 {
  color:#803d9a;
  font-size: 2em;
  text-align: center;
  font-family: 'sans-serif';
  letter-spacing: 0px;
}


.panel-heading {
  padding: 0;
}
.panel-title  a{ 
  padding: 10px 20px;
  display:block;
}
.news-grids ul li{
  display:block;  
  margin: 1em 0 0;
  position:relative;
}
.news-grids ul li:nth-child(1) {
  margin: 0;
}
.news-grids  ul li a {
  color: #555;
  font-size: 1.3em;
  padding-left: 2em;
  font-family: 'SourceSansPro-Regular';
}
.news-grids  ul li a:before {
  content: '';
  background: url(../images/icon1.png)no-repeat 0px -3px;
  position: absolute;
  top: 20%;
  left: 0%;
  display: block;
  width: 15px;
  height: 11px;
  transition: 0.5s all ease;
  -webkit-transition: 0.5s all ease;
  -moz-transition: 0.5s all ease;
  -o-transition: 0.5s all ease;
  -ms-transition: 0.5s all ease;
}
.news-grids ul li a:hover{
  color:#ef2a7c;
}
.news-grids ul li a:hover:before {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  left: 2%;
}
/*--//news--*/
/*--testimonial--*/
.testi{
  background: #171717;
  padding:0em 0;
}
.testi h3 {
  color: #fff;
  font-size: 3em;
  text-align: center;
  font-family: 'SourceSansPro-SemiBold';
  letter-spacing: 0px;
  margin-bottom: 0.3em;
  margin-top: 1em;
}
.testi p {
  font-size: 1.4em;
  font-family: 'SourceSansPro-Regular';
  color: #fff;
  line-height: 1.7em;
  margin-bottom: 1em;
  text-align: justify;
  hyphens: auto;
}
.testi h5 {
  font-size: 1.1em;
  color: rgb(181, 35, 95);
  text-align: right;
  margin-right: 37px;
}
.testi span {
  color: #fff;
  display: inline-block;
  font-size: 1.5em;
  position: absolute;
  left: -6%;
  top: -9%;
  background-color: #ef3b2d;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  line-height: 45px;
  text-align: center;
}
/*--//testimonial--*/
/*--footer--*/
/* Общие стили для футера */
.footer {
    background-color: #8C00FF; /* Пример цвета фона */
    color: #333; /* Цвет текста */
    padding: 20px 10px; /* Внутренние отступы */
    text-align: center; /* Центрирование текста */
}

.footer a {
    color: #fff; /* Цвет ссылок */
    font-size: 18px;
     font-family: 'SourceSansPro-Regular';
    text-decoration: none; /* Убрать подчеркивание */
}

.footer ul {
    list-style: none; /* Убрать маркеры списка */
    padding: 0; /* Убрать внутренние отступы */
    display: flex; /* Горизонтальное расположение элементов */
    justify-content: center; /* Центрирование элементов */
}

.footer ul li {
    margin: 0 5px; /* Отступы между иконками */
}

/* Стили для мобильных устройств */
@media (max-width: 768px) {
    .footer .row {
        flex-direction: column; /* Элементы колонки становятся вертикальными */
    }

    .footer .col-sm-44 {
        margin-bottom: 0px; /* Отступы между колонками */
    }
    
    .footer a {
    font-size: 16px;
    }
    .footer ul li {
        margin-bottom: 10px; /* Отступы между иконками в мобильной версии */
    }
}


/*--//footer--*/

/*--//фон и цвет отдельного блока + тень границы--*/
.bgbl {
  background-color: #AFFFFF;
  background-clip: content-box;
  box-shadow: 0 0 7px rgb(0 0 0 / 40%);
  margin-bottom: 2.5em;
  margin-top: 2.5em;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 10px;
}
/*--//конец фон и цвет отдельного блока + тень границы + радиус края --*/

/*--БЕЛЫЙ фон отдельного блока + тень границы--*/
.bgbl-wite {
  background-color: #ffffff;
  background-clip: content-box;
  box-shadow: 0 0 7px rgb(0 0 0 / 30%);
  margin-bottom: 2.5em;
  margin-top: 2.5em;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 10px;
}
/*--//БЕЛЫЙ фон отдельного блока + тень границы + радиус края--*/

/*--//фон и цвет отдельного блока--*/
.bgb2 {
  background-color:#dddfe0;
  background-clip: content-box;
}

.bgzs {
 background: url(../images/fonzs.png)no-repeat 0px 0px;
    background-size: cover;
    padding: 4em 0;
}
/*--//фон и цвет отдельного блока--*/

/*--slider-up-arrow--*/
#toTop {
  display: none;
  text-decoration: none;
  position: fixed;
  bottom: 11%;
  right: 2%;
  overflow: hidden;
  width: 32px;
  height: 32px;
  border: none;
  text-indent: 100%;
  background: url("../images/move-up.png") no-repeat 0px 0px;  

}
#toTopHover {
  width: 32px;
  height: 32px;
  display: block;
  overflow: hidden;
  float: right;
  opacity: 0;
  -moz-opacity: 0;
  filter: alpha(opacity=0);
}
/*--//slider-up-arrow--*/
/*--about--*/
.about {
  padding: 4em 0;
}
.about h3 {
  color: #ef2a7c;
  font-size: 2.5em;
  text-align: center;
  font-family: 'Bravo-Regular';
  letter-spacing: 1px;
  margin-bottom: 0.8em;
  text-shadow: 0.5px 0 #ef2a7c;
}
.about img{
  width:100%;
}
.about p {
  font-size: 1em;
  color: #555;
  line-height: 1.7em;
}
.about h4 {
  font-size:1.8em;
  color: #803D9A;
  line-height: 1.5em;
}
.about-grids h5 {
  font-size: 1.2em;
  color: #000;
  line-height: 1.3em;
  margin: 1em 0 0.4em;
}
.about-grids h5 a{
  color: #000;
}
.about-grids h5 a:hover{
  color: #9623C3;
}
.histry h5 {
  margin: .3em 0;
}
.histry:nth-child(3) {
  margin: 1.5em 0;
}
.about-grids ul {
  margin-top: 2em;
}
.team {
  margin-top: 4em;
}
.team h5 {
  font-size: 1.4em;
  color: #000;
  margin: 0.8em 0 .2em;
}
/*--//about--*/
/*--gallery-page--*/
.gallery {
  padding: 0em 0;
}
.gallery h3 {
  color: #ef2a7c;
  font-size: 3em;
  text-align: center;
  font-family: 'Bravo-Regular';
  letter-spacing: 0px;
}
.gallery-info {
  margin-top: 2em;
}
.galry-grids {
  padding: 1em;
}
.galry-grids img {
  width: 100%;
}
/*----- Strip -----*/
.b-link-stripe{
  position:relative;
  display:block;
  vertical-align:top;
  font-weight: 300;
  overflow:hidden;
}
.b-link-stripe .b-wrapper{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  text-align:center;
  overflow:hidden;
}
.b-link-stripe .b-line{
  position:absolute;
  top:0;
  bottom:0;
  width:20%;
  background:rgba(15, 207, 140, 0.9);
  transition:all 0.5s linear;
  -moz-transition:all 0.5s linear;
  -ms-transition:all 0.5s linear;
  -o-transition:all 0.5s linear;
  -webkit-transition:all 0.5s linear;
  opacity:0;
  visibility:hidden; /* lt-ie9 */
}
img.img-responsive.glry-img {
  width: 100%;
}
/*------Animation effects------*/
.b-animate-go{
  text-decoration:none;
}
.b-animate{
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  visibility: hidden; 
}
.b-animate img{
  display: -webkit-inline-box;
}
/* lt-ie9 */
.b-animate-go:hover .b-animate{
  visibility:visible;
}
.b-from-left{
  position: absolute;
  top: 43%;
    left: -100%;
}
.b-animate-go:hover .b-from-left{
  left: 43%;
}
.b-wrapper:hover {
  background: rgba(140, 00, 255, 0.50);
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -ms-transition: 0.5s all;
}
/*--//gallery-page--*/
/*-- Typography --*/
.typo {
  padding: 4em 0;
}
h3.typo-title{
  color: #ef2a7c;
  font-size: 5em;
  text-align: center;
  font-family: 'Bravo-Regular';
  letter-spacing: 1px;
}
.show-grid [class^=col-] {
    background: #fff;
  text-align: center;
  margin-bottom: 10px;
  line-height: 2em;
  border: 10px solid #f0f0f0;
}
.show-grid [class*="col-"]:hover {
  background: #e0e0e0;
}
.grid_3{
  margin-bottom:2em;
}
.xs h3, h3.m_1{
  color:#000;
  font-size:1.7em;
  font-weight:300;
  margin-bottom: 1em;
}
.grid_3 p{
  color: #999;
  font-size: 0.85em;
  margin-bottom: 1em;
  font-weight: 300;
}
.grid_4{
  background:none;
  margin-top:50px;
}
.label {
  font-weight: 300 !important;
  border-radius:4px;
}  
.grid_5{
  background:none;
  padding:2em 0;
}
.grid_5 h3, .grid_5 h2, .grid_5 h1, .grid_5 h4, .grid_5 h5{
  margin-bottom:1em;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
  border-top: none !important;
}
.tab-content > .active {
  display: block;
  visibility: visible;
}
/*--//Typography --*/
/*--contact-page--*/
.contact {
  padding:4em 0 0;
}
.contact h3 {
 color: #ad26d6;
  font-size: 2.5em;
  text-align: center;
  font-family: 'SourceSansPro-SemiBold';
  letter-spacing: 0px;
  margin-bottom: 1em;
}
.map {
  margin: 4em 0 0;
}
.map iframe {
  width: 100%;
  height: 340px;
}
.address p {
  color: #555;
  margin: 0 0 .5em 0;
  text-align: left;
  font-size: 1em;
}
p.cnt-p {
  margin-bottom: 1.5em;
}
.address a {
  color: #f14038;
  margin: 0 0 .5em 0;
  text-align: left;
  font-size: 1em;
}
.address a:hover {
  color:#803d9a;
}
.contact-form input[type="text"] {
  display: inline-block;
  background: none;
  border: 1px solid #A3A1A1;
  width: 100%;
  margin: 0 0 1.5em 0;
  outline: none;
  font-size: 1em;
  color: #555;
  padding: .8em 1em;
  -webkit-appearance: none;
}
.contact-form input[type="email"] {
  display: inline-block;
  background: none;
  border: 1px solid #A3A1A1;
  width:  100%;
  margin: 0 0 1.5em;
  outline: none;
  font-size: 1em;
  color: #555;
  padding: .8em 1em;
  -webkit-appearance: none;
}
.contact-form textarea {
  background: none;
  border: 1px solid #A3A1A1;
  width: 100%;
  display: block;
  height: 8.0em;
  outline: none;
  font-size: 1em;
  color: #555;
  resize: none;
  padding: .8em 1em;
  -webkit-appearance: none;
}
.contact-form input[type="submit"] {
 text-decoration: none;
  display: inline-block;
  width: 240px;
  height: 45px;
  line-height: 0px;
  border-radius: 10px;
  margin: 10px 15px;
  font-family: 'SourceSansPro-Regular';
  font-size: 15px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0px;
  font-weight: 100;
  color: white;
  background: #C073FF;
  box-shadow: 0 8px 15px rgba(0, 0, 0, .1);
  transition: .3s;
}
.contact-form input[type="submit"]:hover {
 background: #5B00A6;
  color: white;
  transform: translateY(-4px);
}
.form-grids:nth-child(1) {
  padding-left: 0;
}
.form-grids:nth-child(2) {
  padding-right: 0;
}
/*--//contact-page--*/
/*--button-hover effect--*/
.btn1 {
  border: 1px solid #8C00FF;
  font-family: 'Roboto-Regular';
  font-size: 1em;
  color: #8C00FF;
  background: none;
  padding: 5px 147px;
  display: inline-block;
  outline: none;
  position: relative;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  margin-top: 1em;
}
.btn1:after {
  content: '';
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.btn-1e {
  overflow: hidden;
}
.btn-1e:after {
  width: 100%;
  height: 0;
  top: 50%;
  left: 50%;
  background: #8C00FF;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(11deg);
}
.btn-1e:hover,
.btn-1e:active {
  color: #fff;
  border-color:#8C00FF;
}
.btn-1e:hover:after {
  height: 321%;
  opacity: 1;
}
.btn-1e:active:after {
  height: 400%;
  opacity: 1;
}
/*--//картинка эффект приближения--*/
img.zoom-img {
  -webkit-transform: scale(1, 1);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms;
  -moz-transform: scale(1, 1);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 250ms;
}
img.zoom-img:hover {
  -webkit-transform: scale(1.1);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 750ms;
  -moz-transform: scale(1.1);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 750ms;
  overflow: hidden;
}
/*--//картинка эффект приближения--*/

/*--//положение картинки в цветном блоке--*/
img.colorblok {
margin-bottom: 30px;    /* Нижний отступ от картинки */
margin-top: 10px;        /* верхний отступ от картинки */
border-radius: 20px;     /* радиус краев */

}

/*----blog----*/
.blog {
  padding: 0em 0 5em 0;
}
.blog-info {
  margin-top: 0em;
  margin-bottom: 2em;
}
.blog h3 {
  color: #ef2a7c;
  font-size: 3em;
  font-family: 'Bravo-Regular';
  letter-spacing: 0px;
  margin-bottom: 0.2em;
}
.blog h3 a{
  color:#ef2a7c;
}
.blog  h3 a:hover {
  color:#803d9a;
}
.blog-left p {
  margin: 0 8px 1em;
  font-size: 1.3em;
  color: #555;
  text-align: justify;
  hyphens: auto;
  font-family: 'SourceSansPro-Regular';
}
.blog-left p a {
  color:#AF2BE2;
}
.blog-left p a:hover{
  color: #555;
}
.blog-img {
  overflow: hidden;
}
.blog-info-text a img {
  width: 100%;
}
.blog-info-text p {
  margin: 1em 30px 20px;
  line-height: 1.7em;
}
  /* Медиа-запрос для мобильных устройств */
@media (max-width: 668px) {
    .blog-info-text p  {
          margin: 1em 0px 20px;
    }
}




.blog-info-text h3 {
   color:#C073FF;
  font-size: 2em;
  text-align: left;
  font-family: 'SourceSansPro-SemiBold';
  margin-bottom: 0em;
  margin-top: 1em;
}


.blog-info-text a img {
  width:100%;
}
.blog-ctgry{
  margin: 5em 0 4em;
}
.recent-posts-info {
  margin-bottom: 4em;
}
.posts-left{
  float: left;
  margin-right: 1em;
  overflow: hidden;
  width: 45%;
}
.posts-left.sngl-img img {
  width: 100%;
}
.posts-right{
  float:right;
  width: 51%;
} 
.posts-right lable {
  font-size: 1em;
  font-weight: 500;
  color: #989595
}
.posts-right h5 {
  font-size:1.1em;
  font-weight: 500;
  margin: .5em 0;
}
.posts-right h5 a {
  color: #5E5E5E;
}
.posts-right h5 a:hover{  
  color: #803D9A; 
}
.posts-right p {
  color: #555;
  font-size: 1em;
  line-height: 1.5em;
}
.related-posts-grids {
  float: left;
  width: 30%;
  margin-left: 1em;
}
.related-posts-grids img{
  width:100%;
}
.related-posts-grids h5 {
  font-size: 15px;
  font-weight: 600;
  margin: .5em 0;
  color: #1C90F4;
}
.comments-info.cmnts-mddl {
  margin: 4em 0;
}
.comments-info p.cmmnt {
  margin: 1em 0 0 0;
  font-size: 1em;
  color: #555;
}
.cmnt-icon-left {
  float: left;
  width: 25%;
}
.cmnt-icon-left img {
  border-radius: 50%;
}
.cmnt-icon-right {
  float: right;
  width: 75%;
  margin-top: 0.5em;
}
.cmnt-icon-right p {
  margin: 0 0 .2em 0;
  font-size: 1em;
  color: #555555;
}
.cmnt-icon-right  p a{
  color: #000;
  font-size: 1.1em;
}
.cmnt-icon-right p a:hover{
  color: #803d9a;
}
.blog ul.pagination {
  margin: 4em 0 0;
}
.blog ul.pagination li a {
  color: #803D9A !important;
  font-size: 1.3em;
  padding: 5px 15px;
  border-color: #8C00FF;
}
.blog ul.pagination li a:hover,.blog ul.pagination li a.active {
  background-color: #ef2a7c !important;
  color: #fff !important;
}
/*--//blog--*/
/*--single-page--*/
.single-page{
  padding: 4em 0;
}
.single-page h3 {
  color: #ef2a7c;
  font-size: 3.5em;
  font-family: 'Bravo-Regular';
  letter-spacing: 2px;
  margin-bottom: 0.2em;
}
.single-page-info a {
  display: block;
}
.sngl-title {
  margin-bottom: 5em;
}
.single-page-left  img {
  width: 100%;
}
.read-more-grids {
  padding-left: 0 !important;
}
.single-page-left p {
  color: #555;
  font-size: 1em;
  line-height: 1.7em;
  margin-top: 1em;
}
.comment-icons {
  border-top: 1px dashed  #ef2a7c;
  border-bottom: 1px dashed  #ef2a7c;
  padding: 1.5em 0;
  margin: 4em 0;
}
.comment-icons ul li {
  display: inline-block;
  margin: 0 10px;
  color: #555;
  font-size: 1em;
}
.comment-icons ul li span{
    background: url(../images/iconsprite.png) no-repeat -0px 0px;
  margin-right: 10px;
  display: inline-block;
  width: 12px;
  height: 17px;
  vertical-align: middle;
}
.comment-icons ul li span.clndr{
  background: url(../images/iconsprite.png) no-repeat -17px -1px;
  width: 17px;
}
.comment-icons ul li span.admin{
    background: url(../images/iconsprite.png) no-repeat -0px -24px;
    width: 1em;
    height:1.4em;
}
.comment-icons ul li span.cmnts{
  background: url(../images/iconsprite.png) no-repeat -18px -24px;
  margin-right: 5px;
  width: 17px;
}
.comment-icons ul li a.like{
  background: url(../images/iconsprite.png) no-repeat 0 -45px;
  margin-right: 6px;
  padding-left: 1.5em;
}
.comment-icons ul li a{
  color: #555;
  font-size: 1em;
  margin: 1em 0;
  display: inline;
}
.comment-icons ul li a:hover{
  color:#f14038;
}
.related-posts {
  padding: 3em 0;
  margin: 0;
}
.related-grids {
  padding-left: 0 !important;
}
.related-posts img{
  width: 100%;
}
.related-grids h5 {
  font-size: 1em;
}
.related-grids h5 a {
  color: #555;
}
.related-grids h5  a:hover{
  color: #e2413e;
}
a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover {
  border-color:#803D9A;
}
.admin-text {
  background:#f3f3f3;
  padding: 2em;
}
.admin-text h5 {
  font-size: 1.1em;
  margin: 0 0 1em 0;
  color: #37393d;
}
.admin-text-left {
  float: left;
  width: 11%;
}
.admin-text-right {
  float: right;
  width: 86%;
}
.admin-text-right p {
  color: #555;
  font-size: 1em;
  margin: 0 0 1em;
}
.admin-text-right span {
  font-size: 1em;
  margin: 0 0 1em 0;
  color: #555;
}
.admin-text-right span a {
  color: #555;
}
.admin-text-right span a:hover{
  color: #803D9A;
}
.media.response-info {
  margin-top: 3em;
}
.response-info-mdl {
  margin: 1em 0px 1em 4em;
}
.response {
  margin-bottom: 5em;
}
.media-left.response-text-left {
  width: 11%;
}
.response-text h5 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 1em 0;
}
.response-text-left h5 a {
  color: #000;
}
.response-text-left h5 a:hover{
  color:#803d9a;
}
.response-text-left h5{
  font-weight: 400;
  font-size: 1em;
  margin: 1em 0 0 0;
}
.response-text-right p {
  margin: 0 0 1em;
}
.response-text-right ul{
  padding:0;  
  text-align: right;
}
.response-text-right ul li{
  display: inline-block;
  color: #555;
  font-size: 1em;
  margin-right: 1em;
}
.response-text-right ul li a{
    color: #555;
  font-size: 1em;
  font-weight: 400;
}
.response-text-right ul li a:hover{
  color:#803d9a;
  text-decoration:none;
}
.coment-form input[type="text"] {
  display: block;
  background: #EEE9F0;
  color: #555;
  border: none;
  border-bottom: 1px solid rgb(207, 205, 205);
  width: 100%;
  margin-bottom: 7px;
  outline: none;
  font-size: 1em;
  padding: 9px 12px;
  -webkit-appearance: none;
}
.coment-form input[type="email"] {
  display: block;
  background: #EEE9F0;
  color: #555;
  border: none;
  border-bottom: 1px solid rgb(207, 205, 205);
  width: 100%;
  margin-bottom: 7px;
  outline: none;
  font-size: 1em;
  padding:9px 12px;
  -webkit-appearance:none;
}
.coment-form textarea {
  background: #EEE9F0;
  border: none;
    border-bottom: 1px solid rgb(207, 205, 205);
  width: 100%;
  display: block;
  height: 150px;
  outline: none;
  font-size: 1em;
  color: #555;
  resize: none;
  padding: 9px 12px;
  -webkit-appearance:none;
}
.coment-form input[type="submit"] {
  padding: .8em 0;
  background: #EEE9F0;
  color: #555;
  border: none;
  border-bottom: 1px solid rgb(207, 205, 205);
  width: 100%;
  margin-top: .5em;
  outline: none;
  transition: .5s all;
  -webkit-transition: .5s all;
  -moz-transition: .5s all;
  -o-transition: .5s all;
  -ms-transition: .5s all;
  -webkit-appearance:none;  
}
.coment-form input[type="submit"]:hover{
  color:#fff;
  background: #ef2a7c;
}
/*--//single-page--*/
/*---- responsive-design -----*/
@media(max-width:1440px){
}
@media(max-width:1366px){
}
@media(max-width:1280px){


}
@media(max-width:1024px){
.baner-text {
  padding: 2% 5%;
}


.baner-text h4 {
  font-size: 1.4em;
}
div#top {
  margin: 5em 0 3em;
}
.baner-text h3 {
  font-size: 3em;
  letter-spacing: 2px;
}
.baner-text p {
  font-size: 1em;
}
.top-nav ul li {
  margin: 0 0.8em;
}

.popular h3 {
  font-size: 2em;
}
.popular h4 {
  font-size: 1.5em;
}
.popular-grids {
  margin-top: 2em;
}

.popular-action p {
 font-size: 1.4em;
}
.slid h2 {
  font-size: 3em;
  padding: 2em 3em;
  letter-spacing: 2px;
}
.news {
  padding: 3em 0;
}
.news h3 {
  font-size: 3em;
  margin-bottom: 0.4em;
}
.news h4 {
  font-size: 0.9em;
}
.news p {
  font-size: 0.9em;
}
.news-grids ul li a {
  font-size: 0.9em;
}
.testi {
  padding: 4em 0;
}
.testi h3 {
  font-size: 4em;
}
.testi-grids {
  padding: 0 2em;
}
.testi span {
  font-size: 1.3em;
  width: 35px;
  height: 35px;
  line-height: 36px;
  left: -4%;
  top: -1%;
}
.testi p {
  font-size: 1.3em;
}
.testi h5 {
  font-size: 1em;
  margin-right: 12px;
}
.about {
  padding: 3em 0;
}
.about h3 {
  font-size: 3.3em;
  margin-bottom: 0.5em;
}
.about-grids h5 {
  font-size: 1.1em;
}
.about p {
  font-size: 0.9em;
}
.btn1 {
  font-size: 0.85em;
  padding: 7px 13px;
}
.about h4 {
  font-size: 1.6em;
}
.about-grids h5 {
  font-size: 1em;
}
.about-grids ul {
  margin-top: 1.5em;
}
.team {
  margin-top: 3em;
}
.team h5 {
  font-size: 1.2em;
}
.b-from-left {
  top: 39%;
}
.blog-info {
  margin-top: 3.5em;
}
.blog h3 {
  font-size: 3.3em;
  letter-spacing: 1px;
}
.blog-left p {
  font-size: 0.9em;
}
.panel-body {
  font-size: .9em;
}
h4.panel-title {
  font-size: 14px;
}
.blog-ctgry {
  margin: 3.5em 0 3em;
}
.posts-left {
  width: 44%;
}
.posts-right h5 {
  font-size: 1em;
}
.posts-right p {
  font-size: 0.9em;
}
.comments-info.cmnts-mddl {
  margin: 2.5em 0;
}
.cmnt-icon-right p {
  font-size: 0.9em;
}
.comments-info p.cmmnt {
  font-size: 0.9em;
}
.blog {
  padding: 0em 0 4em 0;
}
.blog ul.pagination li a {
  font-size: 1.1em;
}
.blog ul.pagination {
  margin: 3em 0 0;
}
.single-page h3 {
  font-size: 3.3em;
  letter-spacing: 1px;
}
.single-page-left p {
  font-size: 0.9em;
}
.comment-icons {
  margin: 2.5em 0;
  padding: 1.3em 0;
}
.comment-icons ul li {
  margin: 7px 10px;
  font-size: 0.95em;
}
.coment-form input[type="text"] {
  font-size: 0.9em;
}
.coment-form input[type="email"] {
  font-size: 0.9em;
}
.coment-form textarea {
  font-size: 0.9em;
}
.typo {
  padding: 2.5em 0;
}
h3.typo-title {
  font-size: 4em;
  letter-spacing: 2px;
}
.grid_4 {
  margin-top: 35px;
}
.grid_5 {
  background: none;
  padding: 1em 0;
}
.contact {
  padding: 3em 0 0;
}
.contact h3 {
  font-size: 3.5em;
  margin-bottom: 0.3em;
}
.contact-form input[type="text"] {
  margin: 0 0 1.3em 0;
  font-size: 0.9em;
  padding: .6em 1em;
}
.contact-form input[type="email"] {
  margin: 0 0 1.3em 0;
  font-size: 0.9em;
  padding: .6em 1em;
}
.contact-form textarea {
  height: 9.8em;
}
.map {
  margin: 2.5em 0 0;
}
}

@media(max-width:768px){

.baner-text h4 {
  font-size: 1.2em;
}
div#top {
  margin: 3em 0 2em;
}
.baner-text h3 {
  font-size: 2.8em;
  letter-spacing: 1px;
}
.baner-text p {
  font-size: 0.9em;
  width: 90%;
}
.callbacks_tabs {
  right: -3%;
}
.top-nav ul li {
  margin: 0;
}
.top-nav ul li a {
  font-size: 0.95em;
}
.block-center{
  width: 50%;
}
.banner-grids-info {
  float: left;
  width: 58.3%;
}
.banner-grids-info:nth-child(2) {
  width: 41.7%;
}

.banner-bottom a .captn span {
  font-size: 2.5em;
  letter-spacing: 2px;
}

.banner-bottom {
  margin-top: 4em;
}

.popular h3 {
  font-size: 3.5em;
}
.popular h4 {
  font-size: 0.9em;
  width: 75%;
}
.popular-info {
  float: left;
  width: 33.3%;
  padding-left: 0;
}
.slid h2 {
  font-size: 2.5em;
  padding: 2em;
  letter-spacing: 1px;
}
.news {
  padding: 2.5em 0;
}
.news-grids {
  float: left;
  width: 33.3%;
  padding-left: 0;
}
.news-grids:nth-child(3) {
  padding: 0 0 0 1em;
}
.testi {
  padding: 3em 0;
}
.testi-grids {
  padding: 0 0 0 2em;
  float: left;
  width: 33.3%;
}
.testi span {
  font-size: 1em;
  width: 30px;
  height: 30px;
  line-height: 30px;
  left: -3%;
}
.testi h3 {
  font-size: 3.5em;
}
.testi h5 {
  font-size: 0.9em;
  margin-right: 6px;
}
.testi p {
  margin-bottom: 0.5em;
}
.about {
  padding: 2.5em 0;
}
.about-grids {
  float: left;
  width: 33.33%;
  padding-left: 0;
}
.about h3 {
  font-size: 3em;
  margin-bottom: 0.3em;
}
.about h4 {
  font-size: 1.4em;
}
.histry:nth-child(3) {
  margin: 1.3em 0;
}
.about-grids .news-grids {
  width: 100%;
}
.news-grids ul li a {
  font-size: 1.2em;
  font-family: 'SourceSansPro-Regular';
}
.news-grids ul li {
  margin: 0.5em 0 0;
}
.about-grids ul {
  margin-top: 1em;
}
.team {
  margin-top: 2.5em;
}
.about-team-grids {
  float: left;
  width: 25%;
}
.gallery {
  padding: 2.5em 0;
}
.gallery h3 {
  font-size: 3.8em;
}
.gallery-info {
  margin-top: 0.5em;
}
.galry-grids {
  padding: 0.5em;
  float: left;
  width: 33.3%;
}
.blog-info {
  margin-top: 2.8em;
}
.blog h3 {
  font-size: 3em;
}
.blog-ctgry {
  margin: 2em 0;
}
.recent-posts-info {
  margin-bottom: 2em;
  float: left;
  width: 50%;
}
.comments-info {
  float: left;
  width: 33.3%;
}
.comments-info.cmnts-mddl {
  margin: 0;
}
.cmnt-icon-left {
  width: 28%;
}
.cmnt-icon-right {
  width: 64%;
}
.comments-info {
  float: left;
  width: 33.33%;
  padding-right: 1em;
}
.blog {
  padding: 0em 0 3em 0;
}
.single-page h3 {
  font-size: 3em;
}
.admin-text h5 {
  font-size: 1em;
}
.related-posts {
  padding: 2em 0;
}
.related-grids {
  width: 25%;
  padding-right: .5em;
}
.media.response-info {
  margin-top: 2em;
}
.response-text-right ul li {
  font-size: 0.9em;
}
.response {
  margin-bottom: 3em;
}
.category {
  margin-top: 2em;
}
.single-page {
  padding: 3em 0;
}
h3.typo-title {
  font-size: 3.5em;
  letter-spacing: 1px;
}
.typo span.label{
  padding: .2em .5em .3em !important;
}
.typo .col-md-6 {
  float: left;
}
.contact {
  padding: 2.5em 0 0;
}
.address {
  float: left;
  width: 40%;
  padding-left: 0;
}
.contact-form {
  float: right;
  width: 60%;
  padding: 0;
}
.contact h3 {
  font-size: 3em;
}
.address p {
  font-size: 0.9em;
}
p.cnt-p {
  margin-bottom: 1em;
}
.form-grids:nth-child(1) {
  padding-right: 0;
  float: left;
  width: 50%;
}
.form-grids:nth-child(2) {
  padding-right: 0;
  float: right;
  width: 50%;
}
.map iframe {
  height: 250px;
}
}
@media(max-width:640px){

.baner-text h4 {
  font-size: 1em;
}
div#top {
  margin: 2em 0 1em;
}
.baner-text {
  padding: 6% 5%;
  width: 55%;
}
.callbacks_tabs a:after {
  height: 10px;
  width: 10px;
}
.callbacks_tabs li {
  line-height: 1.2em;
}
.callbacks_tabs {
  right: -4%;
  bottom: 17%;
}
.top-nav ul li a {
  font-size: 0.9em;
  margin: 11px 20px;
}
.cl-effect-11 a::before {
  padding: 7px 0;
}
.cl-effect-11 a {
  padding: 7px 0;
}
.banner-bottom {
  margin-top: 3em;
}
.banner-bottom a .captn span {
  font-size: 1.5em;
  letter-spacing: 1px;
}
.popular {
  padding: 0em 0;
  margin-top: 20px;
}
.popular h4 {
  font-size: 0.9em;
  width: 82%;
}
.popular h3 {
  font-size: 3em;
}
.popular-grids {
  margin-top: 1em;
}
.slid h2 {
  font-size: 2.2em;
  padding: 1.8em;
}
.news {
  padding: 2em 0;
}
.news h3 {
  font-size: 2.5em;
  margin-bottom: 0.3em;
}
h4.panel-title {
  font-size: 13px;
}
.testi {
  padding: 2em 0;
}
.testi span {
  font-size: 1em;
  width: 25px;
  height: 25px;
  line-height: 25px;
  left: 0%;
}
.testi h5 {
  margin-right: 0;
}
.about {
  padding: 2em 0;
}
.about h3 {
  font-size: 2.8em;
  margin-bottom: 0.3em;
}
.about-grids {
  width: 50%;
}
.about-grids:nth-child(2) {
  padding: 0 0 0 1em;
}
.about-grids:nth-child(3) {
  width: 100%;
}
.about h4 {
  font-size: 1.3em;
}
.news-grids ul li a:hover:before {
  left: 1%;
}
.team {
  margin-top: 2em;
}
.about-team-grids {
  padding-left: 0;
}
.team h5 {
  font-size: 1.1em;
}
.gallery {
  padding: 2em 0;
}
.gallery h3 {
  font-size: 3em;
}
.blog-info {
  margin-top: 2em;
}
.blog h3 {
  font-size: 2.4em;
  text-align: center;
}
.posts-right lable {
  font-size: 0.9em;
}
.recent-posts-info {
  margin-bottom: 1.5em;
}
.cmnt-icon-left {
  width: 37%;
}
.cmnt-icon-right {
  width: 56%;
}
.blog ul.pagination li a {
  font-size: 1em;
  padding: 4px 13px;
}
.blog {
  padding: 0em 0 2em 0;
}
.typo {
  padding: 2em 0;
}
h3.typo-title {
  font-size: 3em;
}
.grid_4 {
  margin-top: 24px;
}
.grid_3 {
  margin-bottom: 0em;
}
.typo span.label {
  padding: .2em .6em .3em !important;
  font-size: 56%;
}
.grid_5 h3, .grid_5 h2, .grid_5 h1, .grid_5 h4, .grid_5 h5 {
  margin-bottom: 0.5em;
}
.progress {
  height: 16px;
  margin-bottom: 16px;
}
.alert {
  padding: 10px;
  margin-bottom: 15px;
  font-size: 13px;
}
.typo .col-md-6 {
  width: 50%;
  padding-left: 0;
}
.pagination-lg > li > a, .pagination-lg > li > span {
  font-size: 12px;
}
.pagination {
  margin: 10px 0;
}
.contact {
  padding: 2em 0 0;
}
.contact h3 {
  font-size: 2.8em;
}
.form-grids:nth-child(1) {
  float: none;
  width: 100%;
}
.contact-form input[type="text"] {
  margin: 0 0 1em 0;
  font-size: 0.9em;
  padding: .5em 1em;
}
.contact-form input[type="email"] {
  margin: 0 0 1em 0;
  font-size: 0.9em;
  padding: .5em 1em;
}
.form-grids:nth-child(2) {
  padding: 0;
  float: none;
  width: 100%;
}
.contact-form textarea {
  height: 8em;
  margin-bottom: 1em;
}
.map {
  margin: 2em 0 0;
}
.map iframe {
  height: 200px;
}

}
@media(max-width:600px){
.news-grids:nth-child(3){
  padding: 0;
}
}

@media(max-width:480px){

.baner-text h4 {
  font-size: 0.9em;
}
.baner-text h3 {
  font-size: 2.5em;
}
.baner-text {
  width: 73%;
}
.callbacks_tabs {
  right: 0%;
  bottom: 21%;
}
.header {
  padding: 1.5em 0 0;
}
.header-logo {
  width: 28%;
}
.top-nav {
  padding: 0.6em 0 0;
}
.top-nav  ul.nav1{
  display:none;
  z-index: 999;
  position: absolute;
  width: 100%;
  left: 0;
}
.top-nav span.menu {
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-size: 1.5em;
  color: #fff;
  padding: .2em .2em 0.6em;
}
.top-nav  .nav1{
  display:none;
  z-index: 999;
  position: absolute;
  width: 100%;
  left: 0;
  background-color: rgba(153, 171, 213, 1);
}
ul.nav.nav-sidebar {
  margin: 0;
}
.top-nav ul.nav1 li {
  display: block;
  text-align: center;
  background: rgba(0, 0, 0, 0.84);
  margin: 0;
  width: 100%;
  padding: 1px;
  border: 1px dotted rgb(97, 95, 95);
}
.top-nav ul li a {
  display: block;
  padding: 1.2em 0;
  font-size: 13px;
  margin: 0;
}
.cl-effect-11 a::before {
  padding: 1.2em 0 .4em;
  left: inherit;
}
.banner-bottom {
  margin-top: 2em;
  margin-bottom: 2em;
}
.banner-bottom a .captn span {
  font-size: 1.3em!important;
}
.popular h4 {
  font-size: 0.9em;
  width: 93%;
}
.slid h2 {
  font-size: 2.1em;
  padding: 1.5em;
  letter-spacing: 1.5px;
}
.news-grids {
  width: 50%;
}
.news-grids:nth-child(2) {

    margin-bottom: 3em;
}
.news-grids:nth-child(3) {
  width: 50%;
  float: none;
}
.testi h3 {
  font-size: 3em;
}
.testi-grids {
  padding: 0 0 0 0.9em;
  float: none;
  width: 100%;
  margin-bottom: 2em;
}
.testi p {
  margin-bottom: 0.2em;
  line-height: 1.6em;
}
.about-grids {
  width: 100%;
  padding: 0;
  float: none;
}
.about-grids h5 {
  margin: 0.5em 0 0.4em;
}
.btn1 {
  padding: 5px 13px;
}
.team h5 {
  font-size: 1em;
}
.galry-grids {
  width: 50%;
}
.blog-info {
  margin-top: 1.5em;
  margin-bottom: 1em;
}
.category {
  margin-top: 1.5em;
}
.blog-ctgry {
  margin: 1.5em 0;
}
.blog-left {
  padding: 0;
}
.single-page-right {
  padding: 0;
}
.posts-left {
  width: 43%;
  margin-right: 0.5em;
}
.posts-right {
  width: 52%;
}
.cmnt-icon-left img {
  width: 100%;
}
.cmnt-icon-right p a {
  font-size: 1em;
}
.cmnt-icon-left {
  width: 36%;
}
.cmnt-icon-right {
  width: 64%;
}
.comments-info p.cmmnt {
  margin: 0.5em 0 0 0;
}
.single-page h3 {
  font-size: 2.8em;
}
.single-page-left {
  padding: 0;
}
.single-page {
  padding: 1.5em 0;
}
.related-grids {
  width: 50%;
  padding: 1em;
}
.thumbnail {
  margin-bottom: 9px;
}
.related-posts {
  padding: 1.5em 0 0.5em;
}
.media.response-info {
  margin-top: 1.5em;
}
h1, .h1 {
  font-size: 31px;
}

.typo span.label {
  font-size: 48%;
}
.grid_5 h3, .grid_5 h2, .grid_5 h1, .grid_5 h4, .grid_5 h5 {
  margin-bottom: 0.3em;
}
.pagination-lg > li > a, .pagination-lg > li > span {
  padding: 10px 10px;
}
.pagination > li > a, .pagination > li > span {
  padding: 5px 9px;
}
.address {
  float: none;
  width: 100%;
  padding: 0;
}
.contact-form {
  float: none;
  width: 100%;
  padding: 0;
  margin-top: 2em;
}
}

@media(max-width:768px){
.baner-text {
  width: 92%;
}

.baner-text h3 {
  font-size: 1.6em;
}
.top-nav span.menu {
  font-size: 1.2em;
  font-family: 'SourceSansPro-Regular';
  padding: .2em .5em 0.6em;
}
.top-nav ul li a {
  font-size: 12px;
  padding: 1em 0;
}
.cl-effect-11 a::before {
  padding: 1em 0 .4em;
  left: inherit;
}
.banner-grids-info {
  float: none;
  width: 100%;
}
.banner-grids-info:nth-child(2) {
  width: 100%;
}

.popular h3 {
  font-size: 1.6em;
  margin-top: 1em;
}
.popular h4 {
   font-size: 1.4em; /* Меньший размер шрифта для мобильных устройств */
    margin-top: 1.3em; /* Меньший верхний отступ */
    margin-bottom: 0.5em; /* Меньший нижний отступ */
}

.popular-info {
  float: none;
  width: 100%;
  padding: 0;
  margin-bottom: 0em; /*  14.01.24 изменил с 3 до 0, для отображения блока оплаты - ссылки */
}
.slid h2 {
  font-size: 2em;
  padding: 1em 0;
  letter-spacing: 1px;
}
.news {
  padding: 1em 0;
}
.news-grids {
  width: 100%;
  padding: 0;
  float: none;
}
.news h4 {
  font-size: 0.85em;
}
.news p {
  font-size: 0.9em;
  line-height: 1.6em;
}
.news-grids:nth-child(1) {
  margin-bottom: 1em;
}
.news-grids:nth-child(2) {
  margin-bottom: 1em;
}
.news-grids:nth-child(3) {
  width: 100%;
  padding: 0;
   margin-bottom: 1em;
 
}
.testi {
  padding: 1.5em 0;
}
.testi h3 {
  font-size: 1.7em;
  margin-bottom: .1em;
}
.about {
  padding: 1em 0;
}
.about h3 {
  font-size: 2.5em;
  margin-bottom: 0.1em;
}
.about-grids:nth-child(2) {
  padding: 0;
}
.about h4 {
  font-size: 1.2em;
}
.about-grids h5 {
  margin: 0.3em 0 0.2em;
}
.btn1 {
  margin-top: 0.5em;
}
.about-grids {
  margin-top: 3em;
}
.histry:nth-child(3) {
  margin: 1em 0;
}
.team {
  margin-top: 1em;
}
.about-team-grids {
  float: left;
  width: 50%;
  margin-bottom: 1em;
}
.gallery {
  padding: 1em 0;
}
.gallery h3 {
  font-size: 2.5em;
}
.galry-grids {
  width: 100%;
}
.blog-info {
  margin-top: 0em;
}
.blog h3 {
  font-size: 2.5em;
}
.recent-posts-info {
  margin-bottom: 1.5em;
  float: none;
  width: 100%;
}
.btn1 {
  padding: 3px 134px;
}
.posts-right h5 {
  font-size: 0.9em;
}
.comments-info {
  float: none;
  width: 100%;
  padding: 0;
  margin-bottom: 1.5em;
}
.cmnt-icon-left {
  width: 21%;
}
.cmnt-icon-right {
  width: 72%;
}
.blog ul.pagination {
  margin: 1em 0 0;
}
.blog {
  padding: 0em 0 1em 0;
}
.typo {
  padding: 1em 0;
}
h3.typo-title {
  font-size: 2.5em;
}
.grid_4 {
  margin-top: 15px;
}
h1, .h1 {
  font-size: 28px;
}

.typo .col-md-6 {
  width: 100%;
}
.contact {
  padding: 1em 0 0;
}
p.cnt-p {
  margin-bottom: 0.5em;
}
.contact h3 {
  margin-bottom: 0.7em;
  font-size: 2em;
}
.contact-form {
  margin-top: 1em;
}
.contact-form input[type="text"] {
  margin: 0 0 0.5em 0;
}
.contact-form input[type="email"] {
  margin: 0 0 0.5em 0;
}
.contact-form textarea {
  height: 7em;
  margin-bottom: 0.5em;
}
.contact-form input[type="submit"] {
  padding: .5em 0;
}
.map {
  margin: 1em 0 0;
}
.map iframe {
  height: 165px;
}
}
/*--//responsive-design---*/


.imgCenter {text-align:center;}

td {
    padding: 6px; /* Поля в ячейках */ 
   }
   
   /*баннер 9*/
.banner9{
  background:url(../images/banners/ban-bod.jpg)no-repeat 0px 0px;
  background-size:cover;
  background-position: center;
}


.popular h6 {
  color:#C073FF;
  font-size: 1.5em;
  text-align: center;
  font-family: 'SourceSansPro-SemiBold';
  letter-spacing: 0px;
  margin-bottom: 0.5em;
  margin-top: 1.5em;
}



.about-grids-price p{
 color:#ef2a7c;
 font-size: 1em;
 line-height: 1.7em;
}
.aligncenter {
    text-align: center;
    width: 50%;
}
.pressed-button {
  text-decoration: none;
  display: inline-block;
  padding: 12px 40px;
  margin: 10px 20px;
  border-radius: 30px;
  background-image: linear-gradient(45deg, #6ab1d7 0%, #33d9de 50%, #002878 100%);
  background-position: 100% 0;
  background-size: 200% 200%;
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 300;
  color: white;
  box-shadow: 0 16px 32px 0 rgba(0, 40, 120, .35);
  transition: .5s;
  background-color: #000000;
}
.pressed-button:hover {
  box-shadow: 0 0 0 0 rgba(0, 40, 120, 0);
  background-position: 0 0;
}
.floating-button {
  text-decoration: none;
  display: inline-block;
  width: 200px;
  height: 45px;
  line-height: 45px;
  border-radius: 10px;
  margin: 10px 20px;
  font-family: 'SourceSansPro-SemiBold';
  font-size: 15px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0px;
  font-weight: 100;
  color: white;
  background: #C073FF;
  box-shadow: 0 8px 15px rgba(0, 0, 0, .1);
  transition: .3s;
}
.floating-button:hover {
  background: #5B00A6;
  color: white;
  transform: translateY(-4px);
}

.list {
  list-style-type: none;
  padding: 0;
}

.list li {
  margin: 0 0 10px 0;
  font-size: 1.3em;
  color: #555;
  line-height: 1.4em;
  text-align: justify;
  hyphens: auto;
  font-family: 'SourceSansPro-Regular'; 
}

.list li a {
  text-decoration: none;
  color: #0071c1;
}

.list li a:hover {
  color: #ff4d4d;
}

 /* Стили для аккордеона */
        .accordion {
            display: block;
            cursor: pointer;
            padding: 10px;
            background-color: #f1f1f1;
            border: 1px solid #ccc;
            text-align: left;
        }

        .panel {
            display: none;
            padding: 10px;
            background-color: #ffffff;
        }
 /* Стили для аккордеона */
 
 
 /* ЦВЕТНЫЕ БЛОКИ с РАДИУСОМ */
 
.color-block-white {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-bottom: 40px; /* Добавим небольшой отступ снизу */
}
 
.color-block-blue {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background-color: #fbf5ff;
    margin-bottom: 40px; /* Добавим небольшой отступ снизу */
}
 
.color-block-red {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background-color: #fff5f6;
    margin-bottom: 40px; /* Добавим небольшой отступ снизу */
} 

.color-block-gold {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background-color: #fff7e6;
    margin-bottom: 40px; /* Добавим небольшой отступ снизу */
} 

.color-block-gray {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background-color: rgba(38, 38, 38, 0.04);
    margin-bottom: 40px; /* Добавим небольшой отступ снизу */
} 

 /* начало - СТАРТОВЫЙ ГОЛУБОЙ БЛОК с АКЦЕНТАМИ + РАДИУС */
 
 /* для скидки */
.discount-block {
    font-family: Arial, sans-serif;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background-color: #AFFFFF;
    margin-bottom: 40px; /* Добавим небольшой отступ снизу */
}

.discount-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px; /* Добавим небольшой отступ снизу */
}

.price-container {
    display: flex;
    align-items: center;        /* выравнивание по вертикали */
    justify-content: center;    /* выравнивание по горизонтали */
    gap: 20px;
}

.old-price {
  color:  #333; /* Цвет текста */
    font-size: 30px;
  text-decoration: line-through; /* Перечеркивание текста */
  text-decoration-color: #888; /* Цвет линии перечеркивания */
}




.new-price {
    font-size: 30px;
    color: #fff;
    background-color: #FF4500;
    padding: 2px 10px;
    border-radius: 7px;
    animation: slideRight 1s ease-in-out forwards;
}

/*Слайд вправо */
@keyframes slideRight {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/*Слайд вправо */

.month-price {
    font-size: 26px; /* Установите подходящий размер шрифта */
    font-family: 'SourceSansPro-Regular';
    color: #333; /* Используйте тёмный цвет текста для лучшей читаемости */
    margin-top: 10px; /* Добавьте отступ сверху для разделения от других цен */
    margin-bottom: 10px; 
}



.modul-price {
    font-size: 25px;
    color: #fff;
    background-color: #C073FF;
    padding: 3px 10px;
    border-radius: 7px;
    animation: slideRight 1s ease-in-out forwards;
}

/* Стили для мобильных устройств (ширина экрана до 600px) */
@media only screen and (max-width: 600px) {
    .old-price {
        font-size: 20px; /* Уменьшаем размер шрифта для мобильных устройств */
    }

    .new-price {
        font-size: 20px; /* Уменьшаем размер шрифта для мобильных устройств */ 
        
    }
    
    .month-price {
        font-size: 20px; /* Уменьшаем размер шрифта для мобильных устройств */ 
        
    }
    
    
      .modul-price {
        font-size: 20px; /* Уменьшаем размер шрифта для мобильных устройств */ 
        
    }

    /* Добавьте здесь дополнительные стили для мобильных устройств по вашему усмотрению */
}

/* для скидки */
 
/* Стили для ТЕКСТА "P" с классом custom-list */
/* Общие стили (применяются ко всем устройствам) */
.custom-list {
    font-size: 2em; 
    color: #333; 
    line-height: 1.1;
    list-style-type: none;
    padding: 0;
    margin-bottom: 40px;
    font-family: 'SourceSansPro-Regular';
}

.custom-list-item {
    margin: 10px 0;
    padding: 5px 20px;
    transition: all 0.3s ease;
}

.custom-list-item:hover {
    transform: scale(1.1);
}

.custom-list-item:before {
    content: '✔'; 
    color: #5B00A6; 
    margin-right: 10px;
}

/* Стили для мобильных устройств (ширина экрана до 600px) */


@media only screen and (max-width: 1200px) {
    .custom-list {
        font-size: 1.8em; /* Уменьшаем размер шрифта для мобильных устройств */
    }
}


@media only screen and (max-width: 800px) {
    .custom-list {
        font-size: 1.4em; /* Уменьшаем размер шрифта для мобильных устройств */
    }

    .custom-list-item {
        padding: 5px 10px; /* Уменьшаем отступы содержимого для мобильных устройств */
    }

    /* Дополнительные стили для мобильных устройств */
}

/* Медиазапрос для экранов шириной менее 320 пикселей */
@media only screen and (max-width: 410px) {
    .custom-list {
        font-size: 18px; /* Дополнительно уменьшаем размер шрифта для очень маленьких экранов */
        margin-top: 30px;
    }

    .custom-list-item {
        padding: 3px 0px; /* Дополнительно уменьшаем отступы для очень маленьких экранов */
       
    }
    
}

/* Медиазапрос для экранов шириной менее 320 пикселей */
@media only screen and (max-width: 359px) {
    .custom-list {
        font-size: 15px; /* Дополнительно уменьшаем размер шрифта для очень маленьких экранов */
        margin-top: 30px;
    }

    
}


/* Стили для ТЕКСТА "P" с классом custom-list */

/*конец - СТАРТОВЫЙ ГОЛУБОЙ БЛОК с АКЦЕНТАМИ + РАДИУС */









/* Скрытый блок с кнопкой в мобильной версии по умолчанию */
.mobile-action-bar {
    display: none; /* скрыт по умолчанию */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #AFFFFF;
    padding: 15px;
    z-index: 9999;
    justify-content: space-between; /* распределим элементы по всему пространству */
    align-items: center;
}

@media (max-width: 768px) { 
    .mobile-action-bar {
        display: flex; /* показываем блок только на мобильных экранах */
    }
}

.action-btn {
    padding: 10px 30px;
    background-color: #8C00FF;
    color: #FFF;
    border: none;
    border-radius: 10px;
    font-family: 'SourceSansPro-SemiBold';
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
}

/* иконки будут изначально скрытыми */
.mobile-action-bar .communication-icons {
    display: none;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

.whatsapp-icon, .call-icon {
    margin: 0 5px;
}

.icon-img {
    max-width: 100%;
    height: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

 /* Скрытый блок с кнопкой в мобильной версии по умолчанию */
 
 /* В работе - всплывающие карточки модули */
.card {
    width: 250px;
    height: 350px;
    background-color: #e3e3e3;
    margin: 50px auto;
    padding: 20px;
    border-radius: 8px;
    transform: translateY(50px); /* Перемещает карточку ниже начального положения */
    opacity: 0;                  /* Сначала делает карточку невидимой */
    transition: transform 0.5s, opacity 0.5s; /* Устанавливает анимацию для свойств transform и opacity */
}

.card.fade-in {
    transform: translateY(0);   /* Перемещает карточку в ее исходное положение */
    opacity: 1;                /* Делает карточку видимой */
}
/* В работе - всплывающие карточки модули */



/* Адаптивный заголовок h2 - делется на две строки */

/* По умолчанию спан с классом "mobile-break" не влияет на разметку */
.mobile-break {
    display: inline; 
    white-space: nowrap; 
}

/* Для мобильных устройств (ширина экрана до 600px) */
@media only screen and (max-width: 600px) {
    .mobile-break {
        /* Применяем перенос для спана, чтобы разделить заголовок на две строки */
        display: block; 
    }
}
/* Адаптивный заголовок h2 - делется на две строки */


/* для текста + изображение сверху для мобильного устройства 09.11.2023 */

    .content-block {
      display: flex;
      align-items: flex-start;
      margin-bottom: 0px;
      text-align: justify;
    }
    .text {
      flex: 1;
      padding-right: 20px;
    }
    
  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 320px; /* Set the same width as the image */
    
}

.image-container img {
    width: 100%;
    height: auto;
    /* Adding initial transition for smooth hover effect */
    transition: transform 9s ease-in-out;
}

@keyframes wobble {
    0%, 100% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(-5deg);
    }
    30% {
        transform: rotate(5deg);
    }
    45% {
        transform: rotate(-5deg);
    }
    60% {
        transform: rotate(5deg);
    }
    75% {
        transform: rotate(-3deg);
    }
    90% {
        transform: rotate(3deg);
    }
}

/* Wobble animation */
.image-container.wobble img {
    animation: wobble 15s infinite;
}

   
   

   
  /*  .image-container {
      flex: 1;
      max-width: 50%;
      text-align: right;
   
    }
    .image-container img {
      max-width: 100%;
      height: auto;
      margin-bottom: 30px;
 
    }*/
    
    @media (max-width: 768px) {
      .content-block {
        flex-direction: column;
        text-align: left;
      }
      
      .text {
      flex: 1;
      padding-right: 0px;
    }
      
     .image-container {
        max-width: 100%;
        order: -1; /* Изображение будет над текстом */
        text-align: center;
        padding: 0;
        height: auto;
        margin-bottom: 15px;

      } 
    }  
 
/* //для текста + изображение сверху для мобильного устройства 09.11.2023 */


/*--черный фон--*/
.dark {
  background: #171717;
  padding: 0em 0;
}

.dark h3 {
  color: #fff;
  font-size: 3em;
  text-align: center;
  font-family: 'SourceSansPro-SemiBold';
  margin-bottom: 1.5em;
  margin-top: 1em;
}

.dark p {
  font-size: 1.6em;
  font-family: 'SourceSansPro-Regular';
  color: #fff;
  margin-bottom: 0.6em;
  hyphens: auto;
}

.dark a {
    color: #F3dfff;
    text-decoration: underline;
}


/* Медиазапрос для мобильных устройств */
@media screen and (max-width: 768px) {
  .dark h3 {
    font-size: 2em; /* Уменьшенный размер шрифта для h3 */
  }

  .dark p {
    font-size: 1.3em; /* Уменьшенный размер шрифта для p */
    text-align: left;
    hyphens: none;
    line-height: 1.6em;
        padding-left: 20px;
  }
}

/*--//черный фон--*/


/*--В работе - аккартдион для вопрос-ответ--*/
/* Основные стили */
.accordion1 {
  width: 100%;
  background-color: #171717; /* Фон всего аккордеона */
  font-family: Arial, sans-serif; /* Шрифт Arial */
}

.accordion-item {
  margin-bottom: 10px;
}

.accordion-button {
  width: 100%;
  text-align: left;
  background: #171717; /* Фон кнопок */
  border: none;
  outline: none;
  transition: background-color 0.6s ease;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  color: white; /* Цвет текста */
}

.accordion-button:not(.collapsed) {
  background-color: #171717;
}

.accordion-button::after {
  content: '\002B'; /* Символ "+" */
  font-size: 24px; /* Размер символа */
  float: right;
  color: white; /* Цвет символа */
}

.accordion-button.collapsed::after {
  content: '\2212'; /* Символ "-" */
  color: white; /* Цвет символа */
}

.accordion-content {
  background-color: #171717; /* Фон контента */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease;
  padding: 0 10px;
  color: white; /* Цвет текста контента */
}

/* Адаптивность */
@media (max-width: 600px) {
  .accordion-button {
    font-size: 14px;
  }
  .accordion-button::after {
    font-size: 20px; /* Меньший размер символа для мобильных устройств */
  }
}
/*--//В работе - аккартдион для вопрос-ответ--*/


/*--ДЛЯ картинки на всю ширину блока 100%--*/
.full-width-image {
  width: 100%;
}
/*--//ДЛЯ картинки на всю ширину блока 100%--*/

/*--ДЛЯ ДОКУМЕНТОВ С ПРОКРУТКА + СОГЛАСИЕ--*/
    
     #agreement {
            height: 600px; /* Ограничиваем высоту блока с текстом */
            overflow: auto; /* Добавляем прокрутку */
            border: 1px solid #ddd; /* Рамка для визуального отделения */
            padding: 10px;
            margin-bottom: 30px;
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            background-color: #AFFFFF;
            position: relative;
        }
         
      
       /* Стили для параграфов внутри #agreement */
       
       #agreement p {
    text-align: left;
    hyphens: none;
    font-size: 1.1em;
    line-height: 1.4em;
    padding-left: 7px;
}

        /* Медиазапрос для мобильных устройств */
@media (max-width: 600px) {
    #agreement p {
        font-size: 0.9em; /* Уменьшенный размер шрифта для мобильных устройств */
        line-height: 1.1em; /* Уменьшенный межстрочный интервал */
        padding-left: 0; /* Убрать отступ слева */
    }
}





       /* Стили для параграфов с классом  #agreement */
 
           /* отступы низ и верх для абзацев */
 .abzac {
    margin-top: 15px; /* Отступ сверху */
    margin-bottom: 15px; /* Отступ снизу */
}
         /* отступы низ и верх для абзацев */
         
 
        /* Медиазапрос для мобильных устройств - высота блока с договором */
        @media (max-width: 600px) {
        #agreement {
        height: 400px; /* Меньшая высота для мобильных устройств */
    }
}
/* Стили для чекбокса и кнопки */
        #confirm-container {
    display: none; /* Изначально скрыт */
    margin-top: 20px; /* Отступ сверху */
    margin-bottom: 40px;/* Отступ снизу */
    font-family: Arial, sans-serif; /* Шрифт для текста */
}

#confirm-container label {
    font-size: 16px; /* Размер шрифта для текста */
    margin-right: 10px; /* Отступ справа от текста */
}


#confirm {
    width: 20px; /* Увеличиваем ширину чекбокса */
    height: 20px; /* Увеличиваем высоту чекбокса */
    vertical-align: sub; /* Выравнивание по середине с текстом */
    margin-right: 10px; /* Отступ справа от чекбокса */
}

#confirm:checked {
    background-color: #4CAF50; /* Цвет фона при активации */
    border-color: #4CAF50; /* Цвет границы при активации */
}


#proceed {
    background-color: #4CAF50; /* Зеленый фон кнопки */
    color: white; /* Белый текст на кнопке */
    padding: 10px 20px; /* Внутренние отступы кнопки */
    border: none; /* Убрать границу */
    border-radius: 5px; /* Скругление углов кнопки */
    cursor: pointer; /* Курсор в виде указателя */
    font-size: 16px; /* Размер шрифта кнопки */
}

#proceed:hover {
    background-color: #45a049; /* Затемнение фона кнопки при наведении */
}

#proceed:disabled {
    background-color: #ccc; /* Серый фон для неактивной кнопки */
    color: #666; /* Темно-серый текст для неактивной кнопки */
    cursor: default; /* Стандартный курсор для неактивной кнопки */
}
/* Стили для чекбокса и кнопки */
/*--//ДЛЯ ДОКУМЕНТОВ С ПРОКРУТКА + СОГЛАСИЕ--*/

/* Индикатор-подсказка "стрелка вниз" */
.scroll-indicator {
    text-align: center;
    margin: 10px 0;
    font-size: 16px;
    color: #666;
}

.scroll-indicator i {
    display: block;
    margin: 5px auto;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-10px);
    }
}
/* Индикатор-подсказка "стрелка вниз" */

/*--СТИЛИ для одного конкретного параграфа <p>"ознакомлен и согласен" --*/
@media (max-width: 600px) {
    #custom-paragraph {
        font-size: 12px; /* Меньший размер шрифта */
        line-height: 1.5; /* Увеличенный межстрочный интервал */
    }
}

/*--СТИЛИ для одного конкретного параграфа <p>"ознакомлен и согласен" --*/


/*--СТИЛИ для НОВОГО МЕНЮ --*/
/* Стили для навигационной панели */
.my-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #8C00FF;
    padding:0px 100px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 10;
     font-family: 'SourceSansPro-Regular', sans-serif; /* Установка основного шрифта для меню */
}

/* Стили для логотипа */
.my-logo {
    color: white;
    text-decoration: none;
    font-size: 14px;
    margin-right: auto;
    width: 200px;
    height: auto;
}

/* Стили для меню */
.my-menu {
    list-style-type: none;
    display: flex;
    gap: 20px;
    align-items: center;
    background-color: #8C00FF;
    color: white;
    font-size: 22px;
}

/* Стили для ссылок в меню */
.my-menu li a {
    text-decoration: none;
    color: inherit;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

/* Стили для ссылок при наведении */
.my-menu li a:hover {
    background-color: #00558B;
}

/* Стили для кнопки открытия меню */
.my-open-menu {
    display: none;
    background-color: transparent;
    border: none;
    font-size: 30px;
    color: white;
    cursor: pointer;
    position: absolute;
    top: 2px;
    right: 43px;
}

/* Стили для кнопки закрытия меню */
.my-close-menu {
    display: none;
    background-color: transparent;
    border: none;
    font-size: 34px;
    color: white;
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 46px;
}

/* Стили для меню на мобильных устройствах */
@media (max-width: 1480px) {
    .my-menu {
        flex-direction: column; /* Элементы меню располагаются вертикально */
        gap: 20px; /* Расстояние между элементами меню */
        padding: 20px; /* Внутренние отступы меню */
        border-radius: 0; /* Убираем закругление углов */
        position: fixed; /* Фиксированное позиционирование меню */
        top: 0; /* Прикрепляем меню к верхней части экрана */
        left: 0; /* Прикрепляем меню к левой части экрана */
        right: 0; /* Прикрепляем меню к правой части экрана */
        display: none; /* По умолчанию меню скрыто */
        align-items: flex-start; /* Выравнивание элементов меню по левому краю */
        font-size: 18px; /* Размер шрифта в меню */
        margin-top: 0; /* Убираем верхний отступ */   
    }
 

  .my-logo {
   max-width: 60%;
   display: block; /* Блочное отображение */
    height: auto; /* Автоматическая высота для сохранения пропорций */
   }
  
  
  .my-navbar { 
    padding:12px 25px;  
}

    .my-menu li a {
        padding: 8px 10px; /* Отступы для ссылок внутри элементов меню */
        display: block; /* Ссылки занимают всю доступную ширину элемента списка */
    }

    .my-menu.my-active {
        display: flex; /* Отображаем меню, когда оно активно */     
    }

    .my-open-menu {
        display: block; /* Показываем кнопку открытия меню */
    }

    .my-close-menu {
        display: block; /* Показываем кнопку закрытия меню */
    }

    /* Добавляем класс для элементов меню, которые должны иметь разделительную линию */
    .my-menu-item-divider {
        border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* Белая линия с прозрачностью для разделения элементов */
        padding-left: 0px; /* Отступ слева для линии */
        padding-right: 15px; /* Отступ справа для линии */
    }

    /* Убираем разделительную линию у последнего элемента с классом .my-menu-item-divider */
    .my-menu-item-divider:last-child {
        border-bottom: none;
    }
}



/*--СТИЛИ для НОВОГО МЕНЮ --*/

/*--СТИЛИ для КАРТОЧЕК с товаром - 20.01.2024 --*/
.course-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
   
}
.course-container h2 {
   font-family: 'SourceSansPro-SemiBold';
    color: #333; /* Цвет текста */
    font-size: 2em; /* Размер шрифта */
    margin-top: 1em; /* Отступ сверху */
    margin-bottom: 1em; /* Отступ снизу */
}

.course-container p {
  font-family: 'SourceSansPro-Regular';
    color: #666; /* Цвет текста */
    font-size: 1.4em; /* Размер шрифта */
    margin-top: 0.5em; /* Отступ сверху */
    margin-bottom: 0.5em; /* Отступ снизу */
}

.course-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 1em;
    padding: 1em;
    width: 500px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.course-card img {
    max-width: 95%;
    height: auto;
    border-radius: 5px;
}

.course-button {
  background-color: #C073FF;;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 40px;
  margin-bottom: 20px;
  font-size: 15px;
  width: 200px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, .1);
    font-family: 'SourceSansPro-Regular';
}

.course-button:hover {
    background-color: #5B00A6;
   
}

@media screen and (max-width: 768px) {
    .course-container {
        flex-direction: column;
        align-items: center;
    }

    .course-card {
        width: 90%;
    }
    
   .course-container h2 {
    font-size: 1.5em; /* Размер шрифта */ 
    
   } 
    .course-container p {
  
    font-size: 1.2em; /* Размер шрифта */
   }  
    
}
/*--СТИЛИ для КАРТОЧЕК с товаром - 20.01.2024 --*/


/*--СТИЛИ для Учебного пособия - 16.02.2024 --*/


nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    margin-bottom: 10px;
}

nav ul li a {
    text-decoration: none;
    color: #0275d8;
}

nav ul li a:hover {
    text-decoration: underline;
}

section {
    margin-bottom: 10px;
}

/* Дополнительно: вы можете добавить стили для выделения активного раздела в оглавлении, 
если реализуете функционал подсветки при прокрутке или выборе раздела. */


/* Скрыть кнопку на десктопах */
#toggleNavBtn {
    display: none;
}

/* Стилизация кнопки */
#toggleNavBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px;
    background-color: #0275d8;
    color: white;
    border: none;
    border-radius: 5px;
    z-index: 100;
    font-family: 'SourceSansPro-Regular';
}

/* Показать кнопку только на мобильных устройствах */
@media screen and (max-width: 768px) {
    #toggleNavBtn {
        display: block;
    }

    /* Скрыть навигацию по умолчанию на мобильных устройствах */
    nav {
        display: none;
    }

    nav.active {
        display: block;
        position: fixed; /* Исправлено с 'absolute' на 'fixed' */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.95); /* Сделать фон немного прозрачным */
        z-index: 99;
        overflow-y: auto;
        padding: 20px; /* Добавим немного внутреннего отступа для лучшего вида */
    }
}


/*--СТИЛИ для Учебного пособия - 16.02.2024 --*/

/*--СТИЛИ для видео контейнера - 15.04.2024 --*/
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Пропорция 16:9 */
    height: 0;
    overflow: hidden;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*--СТИЛИ для видео контейнера - 15.04.2024 --*/

/* Стиль для некоторого текста - отсупы справа и лева + в моб сверху */
.my-class-for-text {
    padding-left: 15px;
    padding-right: 15px;
}

         /* Медиа-запрос для мобильных устройств */
@media (max-width: 668px) {
    .my-class-for-text {
        padding-top: 55px;
    }
}
/* Стиль для некоторого текста - отсупы справа и лева + в моб сверху */


/* Поиск по сайту */
#simplesearch-form {
    margin: 0px;
    padding: 10px;
    
}

.simplesearch-input {
    width: 70%;              /* Ширина поля */
    padding: 12px 15px;      /* Увеличенный отступ для лучшего визуального восприятия */
    margin-right: 5px;       /* Отступ справа */
    border: 1px solid #ccc;  /* Цвет границы */
    border-radius: 15px;     /* Скругление углов для более современного вида */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Тень для добавления глубины */
    outline: none;           /* Убираем контур при фокусировке */
    transition: border-color 0.3s, box-shadow 0.3s; /* Плавная анимация для границы и тени */
}

.simplesearch-input:focus {
    border-color: #5B00C6;    /* Изменение цвета границы при фокусировке */
    box-shadow: 0 2px 8px rgba(91,0,198,0.2); /* Увеличение тени при фокусировке для выделения */
}


.simplesearch-button {
    padding: 8px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

.simplesearch-button:hover {
    background-color: #45a049;
}

.simplesearch-results {
    margin-top: 20px;
    font-size: 20px;
    font-family: 'SourceSansPro-Regular';
}

.simplesearch-result {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 50px;
    font-size: 1em;
    margin-top: 50px;
}

 /* Медиа-запрос для мобильных устройств */
@media (max-width: 668px) {
    .simplesearch-result {
        font-size: 0.7em;
        margin-top: 10px;
        padding: 4px;
        margin-bottom: 10px;
    }
  
    .simplesearch-result h3 {
    color: #5B00C6;          /* Цвет текста */
    font-size: 1.4em;        /* Размер шрифта */
    margin-bottom: 10px;     /* Отступ снизу */
}
}


.simplesearch-result-title {
    font-size: 18px;
    color: #333;
}

.simplesearch-result-description {
    font-size: 14px;
    color: #666;
}
/* Поиск по сайту */

/* ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ Увеличенный размер текста */
.info-button {
  background-color: #f0f0f0;
  color: #333;
  border: 2px solid white;
  padding: 5px 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  position: fixed;
 bottom: 5px;    /* Изменено с bottom на top */
  right: 5px;  /* Изменено с left на right */
   z-index: 1000;
}

.info-button img {
  margin-right: 10px;
  width: 24px;
  height: auto;
}

.info-button:hover {
  background-color: #e8e8e8;
}

@media (max-width: 1000px) {
  .info-button {
    padding: 8px;
    justify-content: center;
    font-size: 0;
    width: 33px;
    height: 33px;
    top: 7px;    /* Изменено с bottom на top */
  right: 5px; 
    z-index: 1000;
   
  }

  .info-button img {
    margin-right: 0;
  }
}

body.accessibility-mode {
    /* Общие стили для режима для слабовидящих */
    font-size: 200%;
     line-height: 1.8; /* Увеличиваем межстрочный интервал */
}

body.accessibility-mode .banner-bottom a .captn span {
    font-size: 1.8em; /* буквы меню направлений на главной странице */
}


body.accessibility-mode .cont {
    /* Применяем изменения только к контенту, который находится в специальном контейнере .cont */
    filter: grayscale(100%);
    
}
/* конец ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ Увеличенный размер текста */
/* функция развернуть меню на странице сведений об ОО */
.toggle-menu {
    font-family: 'SourceSansPro-Regular';
    background-color: #C073FF;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    margin-bottom: 5px;
    display: block;
}

.toggle-menu:hover {
    background-color: #8C00FF;
}
/* конец - функция развернуть меню на странице сведений об ОО */


 /* стили для "Содержания курса -ГРАФИКА"*/
 .eduprogram {
            display: flex; /* Используем flexbox для выравнивания содержимого */
            justify-content: center; /* Центрируем содержимое по горизонтали */
            align-items: center; /* Центрируем содержимое по вертикали */
            padding: 0px; /* Добавляем отступы */
            margin: 20px 0; /* Отступы сверху и снизу между контейнерами */
            background-color: #fff; /* Цвет фона контейнера */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень для контейнера */
        }

        /* Стиль для текста */
        
        /* Анимация плавного появления */
        .edu-text {
            font-size: 42px; /* Размер шрифта */
            line-height: 1.2; /* Межстрочный интервал */
            letter-spacing: 0.05em; /* Межбуквенный интервал */
            max-width: 700px; /* Максимальная ширина текста */
            color: #333; /* Цвет текста */
            font-weight: bold; /* Полужирный текст */
            padding: 10px; /* Внутренние отступы */
            font-family: 'SourceSansPro-Regular';
        }

        /* Стиль для контейнера изображения */
        .image {
            width: 370px; /* Ширина контейнера изображения */
            height: auto; /* Автоматическая высота */
        }

        /* Стиль для изображения */
        .image img {
            width: 100%; /* Ширина изображения 100% от родительского контейнера */
            height: auto; /* Автоматическая высота для сохранения пропорций */
            object-fit: cover; /* Изображение масштабируется, чтобы покрыть весь контейнер, сохраняя пропорции */
        }

        /* Медиазапросы для мобильных устройств */
        
        
          @media (max-width: 1200px) {
            /* Адаптация для планшетов и небольших ноутбуков */
            
            .edu-text {
                font-size: 32px; /* Уменьшаем размер шрифта */
                letter-spacing: 0.05em;
                padding: 30px;
            }
        }
        
        
        
        @media (max-width: 968px) {
            /* Адаптация для планшетов и небольших ноутбуков */
            .eduprogram {
                flex-direction: column; /* Меняем направление flex-контейнера на колонку */
                gap: 10px; /* Уменьшаем промежуток между элементами */
            }
            .edu-text {
                font-size: 22px; /* Уменьшаем размер шрифта */
                letter-spacing: 0.05em;
                max-width: 100%; /* Устанавливаем максимальную ширину текста */
                text-align: center; /* Выравниваем текст по центру */
            }
            .image {
                width: 100%; /* Устанавливаем ширину изображения 100% */
                height: auto; /* Автоматическая высота для сохранения пропорций */
            }
        }

        @media (max-width: 480px) {
            /* Адаптация для мобильных телефонов */
            .edu-text {
                font-size: 22px; /* Ещё больше уменьшаем размер шрифта */
                letter-spacing: 0.05em;
                margin: 20px auto; /* 20px сверху и снизу, авто слева и справа */

            }
            .image {
                width: 100%; /* Ширина изображения 100% от родительского контейнера */
                height: auto; /* Автоматическая высота для сохранения пропорций */
            }
        }



/*конец стили для "Содержания курса"*/
 
/*Круг из листьев*/
.image-container-circle {
    position: relative;
    width: 600px; /* Ширина контейнера */
    height: 600px; /* Высота контейнера */
    margin: 0 auto; /* Центрирование блока на странице */
    display: flex;
    align-items: center;
    justify-content: center;
}

.rotating-image {
    width: 100%;
    height: 100%;
    animation: rotate 19s linear infinite; /* Анимация вращения */
    position: absolute; /* Чтобы изображение находилось за текстом */
    top: 0;
    left: 0;
    z-index: 1;
}


.circle-text {
    position: absolute;
    z-index: 2;
    text-align: center;
    color: #333 ; /* Цвет текста */
    font-size: 33px;
    padding: 65px;
    font-family: 'SourceSansPro-SemiBold';
    border-radius: 10px;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg); /* Вращение по часовой стрелке */
    }
}

/* Адаптивность для экранов шириной до 768px */
@media (max-width: 768px) {
    .image-container-circle {
        width: 350px; /* Изменение ширины контейнера для планшетов */
        height: 350px; /* Изменение высоты контейнера для планшетов */
    }
    .circle-text {
        font-size: 18px;
    }
}

/* Адаптивность для экранов шириной до 480px */
@media (max-width: 480px) {
    .image-container-circle {
        width: 250px; /* Изменение ширины контейнера для мобильных устройств */
        height: 250px; /* Изменение высоты контейнера для мобильных устройств */
    }
    .circle-text {
        font-size: 16px;
    }
}


/*конец Круга из листьев*/



/*блок преподавателя*/
.teacher-section {
    max-width: 1120px;
    margin: 0 auto;
    padding: 20px;
    background: #f7f7f7;
    border-radius: 10px;
    overflow: hidden; /* Очищение потока, чтобы блок не схлопнулся */
}

.teacher-section img {
    float: left; /* Плавающее изображение слева */
    width: 40%;
    max-width: 380px;
    margin-right: 40px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.teacher-section a {
    color: #2980b9;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 2px solid #2980b9;
    transition: all 0.3s ease;
}

.teacher-section a:hover {
    color: #1abc9c;
    border-bottom-color: #1abc9c;
}

@media only screen and (max-width: 768px) {
    .teacher-section img {
        float: none; /* Убираем обтекание на малых экранах */
        width: 100%;
        max-width: 100%;
        margin: 0 auto 20px;
        display: block;
    }
}

/*конец блок перподавателя*/


.cta-container {
    display: flex;
    justify-content: center; /* Центрирует кнопку по горизонтали */
    align-items: center; /* Центрирует кнопку по вертикали, если это необходимо */
    margin-top: 20px; /* Дополнительное расстояние сверху, если нужно */
}

.cta-button {
    display: inline-block; /* Делает ссылку похожей на кнопку */
    font-size: 2em;
    color: #fff;
    background-color: #007bff;
    border: none;
    padding: 15px 90px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none; /* Убирает подчеркивание */
    transition: background-color 0.3s;
     margin-top: 20px; /* Отступ сверху */
    margin-bottom: 20px; /* Отступ снизу */
}

.cta-button:hover {
    background-color: #5B00A6;
    color: #fff;
}


/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
    .cta-button {
        font-size: 1.2em; /* Уменьшаем размер шрифта на мобильных устройствах */
        padding: 12px 20px; /* Уменьшаем внутренние отступы */
      
    
        margin: 15px auto; /* Центрируем кнопку и добавляем отступы сверху и снизу */
    }
}




  .logo-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 24vh;
   
        }

        .logo {
            width: 200px;
            opacity: 0;
            transform: scale(0.5);
            transition: opacity 2s, transform 2s;
        }

        .logo.animate {
            opacity: 1;
            transform: scale(1);
        }