/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Services Section
6.  Portfolio Section
7.  Tetimonial Section
8.  Member Section
9.  Contact
10.  Footer Style

-------------------------------------------------------------------*/

/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/

body {

  font-family: "Libre Franklin", sans-serif;
  -webkit-font-smoothing: antialiased;

  display: flex;
  flex-direction: column;
  min-height: 100vh;

}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: #fffefe;
  font-weight: 400;
  font-family: "Libre Franklin", sans-serif;
}

h1 {
  font-size: 70px;
}

h2 {
  font-size: 36px;
  text-align: center;
  margin-bottom: 35px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  font-size: 16px;
  font-family: "Libre Franklin", sans-serif;
  color: #d9d2d2;
  font-weight: 400;
  line-height: 22px;
  margin: 0 0 15px 0;
}

img {
  max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
  outline: none;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
  color: #fff;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

.wittolink {
  font-size: 20px;
  color: #26a0d1;

}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title span {
  color: #e32879;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.section-title h2 {
  font-size: 45px;
  color: #ffffff;
  font-weight: 700;
  margin-top: 14px;
}

.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.spad {
  padding-top: 80px;
  padding-bottom: 80px;
}

.spad-2 {
  padding-top: 50px;
  padding-bottom: 70px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: #fff;
}

/* buttons */

.primary-btn {
  font-size: 20px;
  color: #ffffff;
  background: linear-gradient(88deg, #e3287947, #00000038);
  display: inline-block;
  font-weight: 700;
  padding: 12px 30px 10px;
  border-radius: 10px;
  transition: all 0.3s;
  border-radius: 13px;
  /*transform: skewX(-17deg);*/
}

.primary-btn:hover {

  background: linear-gradient(133deg, #00000038, #e3287947);
}

.site-btn {
  font-size: 16px;
  color: #ffffff;
  font-weight: 700;
  padding: 10px 34px;
  display: inline-block;
  background: #e32879;
  border: 1px solid #ad7198;
  border-radius: 10px;
}

/********************************
 Preloder
*********************************/

#preloder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #000;
}

.loader {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -13px;
  border-radius: 60px;
  animation: loader 0.8s linear infinite;
  -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}

@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }

  50% {
    -webkit-transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }

  100% {
    -webkit-transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}

/********************************
 Preloder
*********************************/


/********************************
  Header
*********************************/

.header-section {
  background: linear-gradient(135deg, rgb(146 91 195 / 0%), rgb(3 73 112 / 35%));
}

.logo {
  padding: 24px 0 30px;
}

.logo a {
  display: inline-block;
}

/*---------------------
  Header
-----------------------*/



/***************************************
 Стили меню в шапке
****************************************/
.main-menu {
  text-align: right;
}

.main-menu ul li {
  display: inline-block;
  list-style: none;
  margin-left: 35px;
  position: relative;
}

.main-menu ul li .dropdown {
  position: absolute;
  width: 180px;
  /* background: #172e4ead; */
  z-index: 99;
  left: 0;
  top: 90px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 10px;
  transform: skewX(-5deg);
  background: linear-gradient(to top, #061532e6, #03262ee8);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  /* Применяем размытие фона */
}

.main-menu ul li .dropdown li {
  display: block;
  margin-right: 0;
  text-align: left;
  margin-left: 0;
}

.main-menu ul li .dropdown li a {
  padding: 8px 20px;
  display: block;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  text-transform: capitalize;
  color: #ffffff;
}

.main-menu ul li .dropdown li a:hover {
  color: #e32879;
}

.main-menu ul li.active a {
  color: #e32879;
}

.main-menu ul li:hover>a {
  color: #e32879;
}

.main-menu ul li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  top: 70px;
}

.main-menu ul li a {
  font-size: 16px;
  color: #ffffff;
  font-weight: 500;
  display: inline-block;
  padding: 22px 0 15px 0;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.slicknav_menu {
  display: none;
}

/***************************************
 Конец стили меню в шапке
****************************************/




/***************************************
 Стили меню пользователя в шапке
****************************************/
/*Стили для нового выпадающего меню */
.main-menu ul li .user-dropdown {
  position: absolute;
  width: 100px;
  /* Ширина меню */
  z-index: 99;
  right: 0;
  /* Располагаем меню по правому краю */
  top: 70px;
  /* Поднятие меню */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  border-radius: 10px;
  background: rgba(6, 21, 50, 0.7);
  /* Матовый стеклянный фон */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  /* Применяем размытие фона */
  margin-top: -10px;
  transform: skewX(-5deg);
}

.main-menu ul li .user-dropdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  /* Наследует фон от родителя */
  filter: blur(10px);
  /* Размытие фона */
  z-index: -1;
  /* Помещаем за элементы меню */
}

/* Настройка элементов списка внутри выпадающего меню */
.main-menu ul li .user-dropdown li {
  display: block;
  margin: 0;
  text-align: right;
  /* Текст будет прижат к правому краю */
}

.main-menu ul li .user-dropdown li a {
  padding: 10px 20px;
  display: block;
  transition: all 0.3s ease;
  text-transform: capitalize;
  color: #ffffff;
  /* Белый цвет текста */
  font-size: 14px;
}

.main-menu ul li .user-dropdown li a:hover {
  color: #e32879;
  /* Цвет текста при наведении */
}

/* Появление выпадающего меню при наведении */
.main-menu ul li:hover .user-dropdown {
  opacity: 1;
  visibility: visible;
  top: 60px;
  /* Позиционируем меню чуть выше при наведении */
}

/***************************************
 Коенц стилей меню пользователя в шапке
****************************************/




/*---------------------
  Hero
-----------------------*/

.hero-section {
  height: 800px !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.hs-text span {
  color: #e32879;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.hs-text h2 {
  color: #ffffff;
  font-size: 58px;
  font-weight: 700;
  margin-bottom: 10px;
}

.hs-text p {
  color: #ffffff;
  margin-bottom: 45px;
}

/*---------------------
  About Us Section
-----------------------*/

.about-us-section {
  background: linear-gradient(276deg, #1b2c34, #08080d);
}



.as-pic img {
  min-width: 100%;
}

.as-text {
  padding-top: 30px;
  padding-left: 20px;
}

.as-text.ap-text {
  padding-top: 14px;
}

.as-text .section-title {
  text-align: left;
  margin-bottom: 15px;
}

.as-text p {
  color: #b3b3b3;
}

.as-text p.f-para {
  margin-bottom: 10px;
}



/***************************************************
Стили для отображения проекта WiTTo
****************************************************/
.justify {
  text-align: justify;
}

.f19br {
  font-size: 19px;
  color: #c8becb;
}

.witto-section {
  background: linear-gradient(167deg, #450c43, #000000);
}

.witto-services {
  background: linear-gradient(61deg, #210225, #010001);
}

.textcenterh2 {
  text-align: center;
  display: block;
}

/*Отображение секции с иконками */
.wittocart {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background: #1c131a85;
  border-radius: 10px;
  margin-bottom: 20px;
}

.wittocart .icon img {
  min-width: 130px;
  min-height: 130px;
}

.wittocart .text {
  flex-grow: 1;
  padding: 0 15px;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.wittocart h3 {
  margin-bottom: 10px;
  font-size: 22px;
}

.wittocart p {
  font-size: 17px;
  color: #bbbebf;
  ;
  text-align: justify;
  padding: 0 13px;
}

.witto-blog-section {
  background: linear-gradient(190deg, #200123, #08080d);
}


/* Для мобильных устройств */
@media (max-width: 980px) {
  .wittocart {
    display: block !important;
    /* Отключаем flex и делаем блочным */
    flex-direction: column-reverse;
    /* Меняем порядок: иконка наверху */
    align-items: center;
    /* Выравниваем по центру */
    text-align: center;
    /* Выравниваем текст */
  }

  .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Обрезаем без искажений */
  }

  .text {
    margin-top: 10px;
    /* Отступ после изображения */
  }
}

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


/***************************************************
Стили для отображения проекта WiTTo
****************************************************/

.as-text p.s-para {
  margin-bottom: 37px;
}

.as-text .about-counter .ac-item {
  float: left;
  margin-right: 48px;
  position: relative;
}

.as-text .about-counter .ac-item:after {
  position: absolute;
  right: -20px;
  top: 8px;
  height: 65px;
  width: 1px;
  background: #393939;
  content: "";
}

.as-text .about-counter .ac-item:last-child {
  margin-right: 0;
  padding-right: 0;
}

.as-text .about-counter .ac-item:last-child:after {
  display: none;
}

.as-text .about-counter .ac-item h2 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 10px;
}

.as-text .about-counter .ac-item p {
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0;
}

/*---------------------
  Services Section
-----------------------*/

.services-section {

  padding-top: 0;
  padding-bottom: 80px;
}



.service-item h4 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 700;
  margin-top: 33px;
  margin-bottom: 25px;
}

/*---------------------
  Portfolio Section
-----------------------*/

.portfolio-section {
  background: #222222;
  padding-bottom: 0;
}

.portfolio-section .section-title {
  margin-bottom: 100px;
}

.portfolio-item {
  height: 393px;
  margin-left: -15px;
  margin-right: -15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.portfolio-item:hover:after {
  opacity: 1;
}

.portfolio-item:hover .pi-hover a.chain-icon {
  opacity: 1;
  visibility: visible;
  left: 0;
}

.portfolio-item:hover .pi-hover a.search-icon {
  opacity: 1;
  visibility: visible;
  right: 0;
}

.portfolio-item:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  content: "";
  opacity: 0;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  z-index: -1;
  border-radius: 30px 0 0 30px;
}

.portfolio-item.large-item {
  height: 786px;
}

.portfolio-item .pi-hover a {
  display: inline-block;
  width: 66px;
  height: 66px;
  background: #e32879;
  border-radius: 50%;
  text-align: center;
  font-size: 26px;
  color: #ffffff;
  line-height: 66px;
  margin-right: 15px;
}

.portfolio-item .pi-hover a:last-child {
  margin-right: 0;
}

.portfolio-item .pi-hover a.chain-icon {
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  visibility: hidden;
  opacity: 0;
  position: relative;
  left: -20px;
}

.portfolio-item .pi-hover a.search-icon {
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  visibility: hidden;
  opacity: 0;
  position: relative;
  right: -20px;
}

/*---------------------
  Counter Section
-----------------------*/

.counter-section {

  padding-top: 755px;
  margin-top: -640px;
  padding-bottom: 70px;
}

.counter-text {
  margin-bottom: 40px;
}

.counter-text .section-title {
  text-align: left;
  margin-bottom: 50px;
}

.counter-item {
  margin-bottom: 30px;
  position: relative;
}

.counter-item .ci-number {
  font-size: 48px;
  color: #e32879;
  font-weight: 700;
  line-height: 50px;

  top: 0;
}

.counter-item .ci-text {
  padding-left: 10px;
}

.counter-item .ci-text h4 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 12px;
}

/*---------------------
  Testimonial Section
-----------------------*/

.testimonial-section {
  background: #222222;
  padding-top: 0;
}

.testimonial-slider {
  margin-left: 0;
}

.testimonial-slider .col-lg-6 {
  max-width: 100%;
}

.testimonial-slider.owl-carousel .owl-dots {
  text-align: center;
  padding-top: 22px;
}

.testimonial-slider.owl-carousel .owl-dots button {
  height: 8px;
  width: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin-right: 10px;
}

.testimonial-slider.owl-carousel .owl-dots button:last-child {
  margin-right: 0;
}

.testimonial-slider.owl-carousel .owl-dots button.owl-dot.active {
  width: 27px;
  background: #e32879;
  border-radius: 50px;
}

.testimonial-item {
  background: #222222;
  padding: 30px 20px 50px 40px;
}

.testimonial-item .ti-pic {
  float: left;
  margin-right: 35px;
}

.testimonial-item .ti-pic img {
  height: 128px;
  width: 128px;
  border-radius: 50%;
}

.testimonial-item .ti-text {
  overflow: hidden;
}

.testimonial-item .ti-text .ti-title {
  margin-bottom: 8px;
}

.testimonial-item .ti-text .ti-title h4 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 4px;
}

.testimonial-item .ti-text .ti-title span {
  font-size: 12px;
  color: #e32879;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.testimonial-item .ti-text p {
  margin-bottom: 0;
}

/*---------------------
  Call To Section
-----------------------*/

.callto-section {
  padding: 80px 0;
}

.ctc-text {
  text-align: center;
}

.ctc-text h2 {
  font-size: 45px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 20px;
}

.ctc-text p {
  color: #ffffff;
  margin-bottom: 45px;
}

.ctc-text .primary-btn.ctc-btn {
  background: #ffffff;
  color: #e32879;
}

/*---------------------
  Member Section
-----------------------*/



.member-section.ap-member {
  padding-top: 0;
}

.member-item {
  height: 435px;
  position: relative;
  margin-bottom: 30px;
}

.member-item:hover .mi-text {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.member-item .mi-text {
  text-align: center;
  background: #080410d6;
  position: absolute;
  left: 20px;
  top: 23px;
  width: calc(100% - 40px);
  height: calc(100% - 46px);
  padding: 50px 20px 60px 20px;
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  border-radius: 20px;
}

.member-item .mi-text p {
  margin-bottom: 32px;
}

.member-item .mi-text .mt-title {
  margin-bottom: 20px;
}

.member-item .mi-text .mt-title h4 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 4px;
}

.member-item .mi-text .mt-title span {
  font-size: 12px;
  color: #e32879;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.member-item .mi-text .mt-social a {
  display: inline-block;
  font-size: 16px;
  color: #ffffff;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background: #303030;
  border-radius: 50%;
  margin-right: 3px;
}

.member-item .mi-text .mt-social a:last-child {
  margin-right: 0;
}

/*---------------------
  Footer
-----------------------*/
.footer-section {
  background: linear-gradient(135deg, rgb(146 91 195 / 0%), rgb(8 55 81 / 35%));
  padding-top: 80px;
  padding-bottom: 10px;
  margin-top: auto;
}

.footer-option {
  margin-bottom: 30px;
}

.footer-option .fo-logo {
  margin-bottom: 30px;
}

.footer-option .fo-logo a {
  display: inline-block;
}

.footer-option ul {
  margin-bottom: 12px;
}

.footer-option ul li {
  list-style: none;
  font-size: 16px;
  color: #b3b3b3;
  line-height: 30px;
}

.footer-option .fo-social a {
  display: inline-block;
  font-size: 16px;
  color: #ffffff;
  width: 41px;
  height: 41px;
  background: #e32879;
  border-radius: 40%;
  text-align: center;
  line-height: 41px;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  margin-right: 3px;
}

.footer-option .fo-social a:hover {
  background: #e32879;
}

.footer-widget {
  margin-bottom: 30px;
}

/* .footer-widget.fw-links {
  padding-left: 35px;
} */

.footer-widget h5 {
  font-size: 20px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 20px;
}

.footer-widget ul li {
  list-style: none;
}

.footer-widget ul li a {
  font-size: 16px;
  color: #b3b3b3;
  line-height: 36px;
}

.footer-widget p {
  margin-bottom: 18px;
}

.footer-widget .news-form input {
  font-size: 14px;
  height: 46px;
  color: #b3b3b3;
  border: 1px solid #707070;
  padding-left: 25px;
  background: #191919;
  width: 83%;
  margin-bottom: 10px;
  border-radius: 10px;
}

.footer-widget .news-form input::-webkit-input-placeholder {
  color: #b3b3b3;
}

.footer-widget .news-form input::-moz-placeholder {
  color: #b3b3b3;
}

.footer-widget .news-form input:-ms-input-placeholder {
  color: #b3b3b3;
}

.footer-widget .news-form input::-ms-input-placeholder {
  color: #b3b3b3;
}

.footer-widget .news-form input::placeholder {
  color: #b3b3b3;
}

.footer-widget .news-form button {
  font-size: 16px;
  color: #ffffff;
  font-weight: 700;
  background: #e32879;
  border: none;
  padding: 12px 0;
  width: 83%;
  border-radius: 10px;
}

.footer-widget .insta-pic img {
  margin-right: 5px;
  width: calc(33.33% - 5px);
  float: left;
  margin-bottom: 5px;
  border-radius: 6px;
}

.copyright-text {
  padding-top: 25px;
  color: #b3b3b3;
  text-align: center;
  font-size: 14px;
}

.copyright-text i {
  color: #e32879;
}

.copyright-text a {
  color: #b3b3b3;
}

.copyright-text a:hover {
  color: #e32879;
}

/* ------------------------------ Other Pages Styles ------------------------------ */

/*---------------------
  Breadcrumb
-----------------------*/

.breadcrumb-section {
  background: #2a2a2a;
  padding: 50px 0;
}

.breadcrumb-section.bread-normal {
  border-bottom: 1px solid #191919;
}

.breadcrumb-option {
  line-height: 36px;
}

.breadcrumb-option a {
  display: inline-block;
  color: #b3b3b3;
  margin-right: 24px;
  position: relative;
}

.breadcrumb-option a::after {
  position: absolute;
  right: -15px;
  top: 16px;
  width: 6px;
  height: 6px;
  background: #5c5c5c;
  content: "";
  border-radius: 50%;
}

.breadcrumb-option span {
  color: #5c5c5c;
}

.breadcrumb-text {
  text-align: right;
}

.breadcrumb-text h3 {
  color: #ffffff;
  font-weight: 700;
}



/*---------------------
  Blog Section
-----------------------*/

.blog-section {
  background: linear-gradient(276deg, #1b2c34, #08080d);
}

.blog-section.latest-blog {
  padding-bottom: 80px;
}

.blog-section .blog-btn {
  padding-top: 30px;
}

.primary-btn:hover {
  background-color: rgb(62, 39, 60);
  /* Цвет при наведении */
  transform: scale(1.05);
  /* Лёгкое увеличение */
}

.blog-section .blog-btn .primary-btn {

  border: 2px solid #e32879;
}

.blog-item {
  background: linear-gradient(331deg, #030404, #2a3669);
  margin-bottom: 30px;
  height: 390px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.blog-item.solid-bg {
  border-radius: 10px;
}

.sol1 {
  background: linear-gradient(to top, #e327673d, #10100f);
}

.sol2 {
  background: linear-gradient(to top, #c427e33d, #10100f);
}

.sol3 {
  background: linear-gradient(to top, #3208683d, #10100f);
}

.blog-item.solid-bg .bi-text {
  padding: 0;
}

.blog-item.solid-bg .bi-text ul li {
  color: #ffffff;
}

.blog-item.solid-bg .bi-text h4 {
  margin-bottom: 12px;
}

.blog-item.solid-bg .bi-text p {
  color: #ffffff;
  margin-bottom: 20px;
}

.blog-item.solid-bg .bi-text .bt-author .ba-text h5 {
  color: #ffffff;
}

.blog-item.solid-bg .bi-text .bt-author .ba-text span {
  color: #ffffff;
}

.blog-item .bi-pic {
  height: 390px;
}

.blog-item .bi-text {
  padding-top: 46px;
  padding-right: 20px;
  padding-bottom: 38px;
}

.blog-item .bi-text ul {
  margin-bottom: 17px;
}

.blog-item .bi-text ul li {
  list-style: none;
  display: inline-block;
  color: #e32879;
  font-size: 14px;
  margin-right: 8px;
}

.blog-item .bi-text ul li i {
  margin-right: 4px;
}

.blog-item .bi-text h4 {
  margin-bottom: 22px;
}

.blog-item .bi-text h4 a {
  color: #ffffff;
  font-weight: 700;
  line-height: 32px;
}



.blog-item .bi-text .bt-author .ba-pic {
  float: left;
  margin-right: 12px;
}

.blog-item .bi-text .bt-author .ba-pic img {
  height: 53px;
  width: 50px;
  border-radius: 50%;
}

.blog-item .bi-text .bt-author .ba-text {
  overflow: hidden;
  padding-top: 4px;
}

.blog-item .bi-text .bt-author .ba-text h5 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 4px;
}

.blog-item .bi-text .bt-author .ba-text span {
  font-size: 12px;
  color: #e32879;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/*---------------------
  Blog Details Hero
-----------------------*/

.blog-hero-section {
  padding-top: 130px;
  padding-bottom: 120px;
}

.blog-hero-section .bh-text span {
  font-size: 14px;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 700;
  background: #e32879;
  padding: 5px 26px;
}

.blog-hero-section .bh-text h2 {
  font-size: 60px;
  color: #ffffff;
  font-weight: 700;
  line-height: 72px;
  margin-top: 34px;
  margin-bottom: 16px;
  text-shadow: 2px -3px 3px #9d6161;
}

.blog-hero-section .bh-text ul li {
  font-size: 14px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 45px;
  display: inline-block;
  list-style: none;
  position: relative;
  font-weight: bold;
  text-shadow: 1px 3px 3px #96df5d;
}

.blog-hero-section .bh-text ul li:after {
  position: absolute;
  right: -24px;
  top: 4px;
  width: 1px;
  height: 15px;
  background: #585658;
  content: "";
}

.blog-hero-section .bh-text ul li:last-child {
  margin-right: 0;
}

.blog-hero-section .bh-text ul li:last-child:after {
  display: none;
}

/*---------------------
  Blog Details Section
-----------------------*/

.blog-details-section {
  background: #222222;
}

.bd-text .bd-title {
  margin-bottom: 65px;
  text-align: justify;
}

.bd-text .bd-title p {
  line-height: 30px;
  font-size: 17px;
}



.bd-text .bd-pic img {
  min-width: 100%;
  margin-bottom: 20px;
}

.bd-pic2 img {
  /*min-width: 110%;
  margin-bottom: -20px;*/
  width: 76%;
}


.bd-text .bd-more-text {
  margin-bottom: 62px;
}

.bd-text .bd-more-text .bm-item {
  margin-bottom: 32px;
}

.bd-text .bd-more-text .bm-item h4 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 20px;
}

.bd-text .bd-more-text .bm-item p {
  font-size: 17px;
  line-height: 30px;
}

.bd-text .bd-quote {
  background: #000000;
  padding: 30px 110px 30px 110px;
  position: relative;
  margin-bottom: 30px;
}

.bd-text .bd-quote img {
  position: absolute;
  left: 50px;
  top: 45px;
}

.bd-text .bd-quote p {
  font-size: 24px;
  line-height: 36px;
  margin-bottom: 22px;
}

.bd-text .bd-quote .quote-author h5 {
  color: #b3b3b3;
  margin-bottom: 4px;
}

.bd-text .bd-quote .quote-author span {
  color: #b3b3b3;
  font-size: 14px;
}

.bd-text .bd-last-para {
  margin-bottom: 90px;
}

.bd-text .bd-last-para p {
  font-size: 17px;
  line-height: 30px;
}

.bd-text .tag-share {
  border-top: 1px solid #363636;
  padding-top: 30px;
  overflow: hidden;
  margin-bottom: 70px;
}

.bd-text .tag-share .tags {
  float: left;
}

.bd-text .tag-share .tags a {
  display: inline-block;
  background: #363636;
  font-size: 10px;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 5px 19px;
  margin-right: 6px;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 7px;
}

.bd-text .tag-share .tags a:hover {
  background: #e32879;
}

.bd-text .tag-share .social-share {
  text-align: right;
}

.bd-text .tag-share .social-share a {
  font-size: 16px;
  color: #b3b3b3;
  margin-left: 25px;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bd-text .tag-share .social-share a:hover {
  color: #e32879;
}

.bd-text .tag-share .social-share span {
  font-size: 16px;
  color: #b3b3b3;
}

.bd-text .blog-author {
  text-align: center;
  margin-bottom: 56px;
}

.bd-text .blog-author img {
  height: 117px;
  width: 117px;
  border-radius: 50%;
}

.bd-text .blog-author h5 {
  font-size: 20px;
  color: #ffffff;
  font-weight: 700;
  margin-top: 28px;
  margin-bottom: 12px;
}

.bd-text .blog-author p {
  font-size: 17px;
}

.bd-text .blog-author .bt-social a {
  display: inline-block;
  color: #b3b3b3;
  font-size: 14px;
  margin-right: 30px;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.bd-text .blog-author .bt-social a:hover {
  color: #e32879;
}

.bd-text .blog-author .bt-social a:last-child {
  margin-right: 0;
}

.bd-text .leave-comment h2 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 36px;
}

.comment-form input,
.contact-form input {
  height: 50px;
  width: 100%;
  border: none;
  font-size: 16px;
  color: #b3b3b3;
  padding-left: 20px;
  background: #393939;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  margin-bottom: 30px;
  border-radius: 10px;
}

.comment-form input::-webkit-input-placeholder,
.contact-form input::-webkit-input-placeholder {
  color: #b3b3b3;
}

.comment-form input::-moz-placeholder,
.contact-form input::-moz-placeholder {
  color: #b3b3b3;
}

.comment-form input:-ms-input-placeholder,
.contact-form input:-ms-input-placeholder {
  color: #b3b3b3;
}

.comment-form input::-ms-input-placeholder,
.contact-form input::-ms-input-placeholder {
  color: #b3b3b3;
}

.comment-form input::placeholder,
.contact-form input::placeholder {
  color: #b3b3b3;
}

.comment-form input:focus {
  background: #ffffff;
  color: #0d0a27;
}

.comment-form input:focus::-webkit-input-placeholder {
  color: #0d0a27;
}

.comment-form input:focus::-moz-placeholder {
  color: #0d0a27;
}

.comment-form input:focus:-ms-input-placeholder {
  color: #0d0a27;
}

.comment-form input:focus::-ms-input-placeholder {
  color: #0d0a27;
}

.comment-form input:focus::placeholder {
  color: #0d0a27;
}

.comment-form textarea,
.contact-form textarea {
  width: 100%;
  border: none;
  font-size: 16px;
  color: #b3b3b3;
  padding-left: 20px;
  background: #393939;
  height: 110px;
  padding-top: 12px;
  resize: none;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  margin-bottom: 45px;
  border-radius: 10px;
}

.comment-form textarea::-webkit-input-placeholder,
.contact-form textarea::-webkit-input-placeholder {
  color: #b3b3b3;
}

.comment-form textarea::-moz-placeholder,
.contact-form textarea::-moz-placeholder {
  color: #b3b3b3;
}

.comment-form textarea:-ms-input-placeholder,
.contact-form textarea:-ms-input-placeholder {
  color: #b3b3b3;
}

.comment-form textarea::-ms-input-placeholder,
.contact-form textarea::-ms-input-placeholder {
  color: #b3b3b3;
}

.comment-form textarea::placeholder,
.contact-form textarea::placeholder {
  color: #b3b3b3;
}

.comment-form textarea:focus {
  background: #ffffff;
  color: #0d0a27;
}

.comment-form textarea:focus::-webkit-input-placeholder {
  color: #0d0a27;
}

.comment-form textarea:focus::-moz-placeholder {
  color: #0d0a27;
}

.comment-form textarea:focus:-ms-input-placeholder {
  color: #0d0a27;
}

.comment-form textarea:focus::-ms-input-placeholder {
  color: #0d0a27;
}

.comment-form textarea:focus::placeholder {
  color: #0d0a27;
}

/*---------------------
  Comments List
-----------------------*/

.comments-list {
  margin-bottom: 50px;
}

.comments-list h2 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 30px;
}

.comment-item {
  background: #2a2a2a8c;
  border-left: 3px solid #e32879;
  padding: 20px 24px;
  margin-bottom: 18px;
  border-radius: 0 8px 8px 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comment-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 18px rgba(227, 40, 121, 0.15);
}

.comment-item.comment-new {
  animation: commentFadeIn 0.5s ease;
}

@keyframes commentFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.comment-author {
  color: #e32879;
  font-weight: 700;
  font-size: 15px;
}

.comment-author i {
  margin-right: 6px;
}

.comment-date {
  color: #888;
  font-size: 13px;
}

.comment-date i {
  margin-right: 4px;
}

.comment-body {
  color: #d0d0d0;
  font-size: 15px;
  line-height: 24px;
  word-break: break-word;
}

/* Auth info badge */
.comment-auth-info {
  background: linear-gradient(135deg, #1a3a2a, #0f2e1e);
  border: 1px solid #2ecc71;
  color: #2ecc71;
  padding: 14px 20px;
  border-radius: 10px;
  margin-bottom: 24px;
  font-size: 15px;
}

.comment-auth-info i {
  margin-right: 8px;
  font-size: 17px;
}

.comment-auth-info strong {
  color: #ffffff;
}

/* Status messages */
.comment-status-success {
  background: linear-gradient(135deg, #1a3a2a, #0f2e1e);
  border: 1px solid #2ecc71;
  color: #2ecc71;
  padding: 12px 18px;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 14px;
}

.comment-status-error {
  background: linear-gradient(135deg, #3a1a1a, #2e0f0f);
  border: 1px solid #e74c3c;
  color: #e74c3c;
  padding: 12px 18px;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 14px;
}

/*---------------------
  Recommend Section
-----------------------*/

.recommend-section {
  background: linear-gradient(158deg, #082730, #010304);
  border-top: 2px solid #0e323c;
  padding-bottom: 80px;
}

.recommend-section .section-title h2 {
  margin-top: 0;
}

/*---------------------
  Gallery Section
-----------------------*/

.gallery-section {
  background: #222222;
  padding-bottom: 80px;
}

.gallery-section .gallery-controls {
  text-align: center;
  margin-bottom: 55px;
}

.gallery-section .gallery-controls ul li {
  list-style: none;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-right: 55px;
  cursor: pointer;
}

.gallery-section .gallery-controls ul li.active {
  color: #e32879;
}

.gallery-section .gallery-controls ul li:last-child {
  margin-right: 0;
}

.gallery-section .gs-item {
  margin-bottom: 30px;
}

.gallery-section .gs-item img {
  min-width: 100%;
}

/*---------------------
  Map
-----------------------*/

.map {
  height: 500px;
}

.map iframe {
  width: 100%;
}

/*---------------------
  Contact
-----------------------*/

.contact-section {
  background: #222222;
}

.contact-text h4 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 45px;
}

.contact-text .ct-item {
  overflow: hidden;
  margin-bottom: 15px;
}

.contact-text .ct-item .ci-icon {
  width: 74px;
  height: 74px;
  text-align: center;
  line-height: 90px;
  border-radius: 50%;
  background: #393939;
  float: left;
  margin-right: 26px;
}

.contact-text .ct-item .ci-icon span {
  color: #e32879;
  font-size: 30px;
}

.contact-text .ct-item .ci-text {
  overflow: hidden;
  margin-top: 8px;
}

.contact-text .ct-item .ci-text ul li {
  list-style: none;
  font-size: 18px;
  color: #ffffff;
}

.contact-text .ct-item .ci-text ul li span {
  display: block;
  color: #b3b3b3;
}

.contact-option h4 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 45px;
}

/*-------------------------------- Respinsive Media Styles --------------------------------*/

@media only screen and (min-width: 1600px) {
  .portfolio-section .container {
    max-width: 1570px;
  }
}

@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

/* Medium Device: 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .member-item .mi-text {
    padding: 30px 20px 60px 20px;
  }

  .blog-item .bi-text {
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 30px;
  }

  .as-text .about-counter .ac-item {
    margin-right: 12px;
  }

  .as-text .about-counter .ac-item:after {
    right: -7px;
  }
}

@media only screen and (max-width: 991px) {
  .as-text {
    padding-left: 0;
  }

  .blog-item {
    height: auto;
  }

  .blog-item .bi-text {
    padding-left: 30px;
  }

  .footer-widget.fw-links {
    padding-left: 0;
  }

  .contact-option {
    padding-top: 30px;
  }

  .as-text.ap-text {
    padding-top: 30px;
  }
}

/* Large Mobile: 480px */

@media only screen and (max-width: 767px) {
  .main-menu {
    text-align: right;
    display: none;
  }

  .slicknav_btn {
    margin: 0;
    border-radius: 0;
    background-color: #222;
    position: absolute;
    right: 15px;
    top: 20px;
    display: inline-block;
    float: none;
  }

  .slicknav_menu {
    display: block;
    background: transparent;
    padding: 0;
  }

  .header-section .container {
    position: relative;
  }

  .slicknav_nav ul {
    margin: 0;
  }

  .slicknav_nav a:hover {
    color: #ffffff;
  }

  .breadcrumb-text {
    text-align: left;
  }

  .counter-item .ci-number {
    position: relative;
    margin-bottom: 15px;
  }

  .counter-item .ci-text {
    padding-left: 0;
  }

  .as-text .about-counter .ac-item {
    margin-right: 20px;
  }

  .as-text .about-counter .ac-item:after {
    right: -11px;
  }

  .blog-hero-section .bh-text ul li {
    margin-right: 20px;
  }

  .blog-hero-section .bh-text ul li:after {
    right: -12px;
  }

  .bd-text .tag-share .tags {
    float: none;
    margin-bottom: 30px;
  }

  .bd-text .tag-share .social-share {
    text-align: left;
  }

  .gallery-section .gallery-controls ul li {
    margin-right: 12px;
  }

  .bd-text .bd-quote img {
    position: relative;
    left: 0;
    top: 0;
    margin-bottom: 10px;
  }

  .bd-text .bd-quote {
    padding: 40px;
  }

  .blog-hero-section .bh-text h2 {
    font-size: 40px;
    line-height: normal;
  }
}

/*************************************
 Small Mobile: 320px
 *************************************/

@media only screen and (max-width: 479px) {
  .blog-hero-section .bh-text h2 {
    font-size: 36px;
    line-height: normal;
  }

  .testimonial-item .ti-pic {
    float: none;
    margin-right: 0;
    margin-left: 22%;
  }

  .testimonial-item .ti-text {
    overflow: visible;
  }

  .member-item .mi-text {
    padding: 30px 20px 60px 20px;
  }

  .blog-hero-section .bh-text ul li {
    margin-right: 10px;
  }

  .blog-hero-section .bh-text ul li:after {
    display: none;
  }

  .bd-text .tag-share .tags a {
    margin-bottom: 6px;
  }

  .recommend-section .section-title h2 {
    font-size: 35px;
  }



  .bd-text .tag-share .social-share a {
    margin-left: 15px;
  }

  .contact-text .ct-item {
    margin-bottom: 30px;
    text-align: center;
  }

  .contact-text .ct-item .ci-icon {
    float: none;
    width: 60px;
    height: 60px;
    line-height: 70px;
    margin: 0 auto;
  }

  .contact-text .ct-item .ci-icon span {
    font-size: 22px;
  }
}

/*************************************
 Small Mobile: 320px
 *************************************/




/************************************************
Стиль полосы прокрутки для всего документа
*************************************************/
/* Для всех браузеров, поддерживающих ::-webkit-scrollbar */
::-webkit-scrollbar {
  width: 15px;
  /* Ширина полосы прокрутки */
  height: 10px;
  /* Высота полосы прокрутки (для горизонтальной прокрутки) */
}

::-webkit-scrollbar-thumb {
  background: #444b53;
  /* Цвет ползунка */
}

::-webkit-scrollbar-thumb:hover {
  background: #55565c;
  /* Цвет ползунка при наведении */
}

::-webkit-scrollbar-track {
  background: #191919;
  /* Цвет трека (фона полосы прокрутки) */
}

/***************************************************
КОНЕЦ Стиль полосы прокрутки для всего документа
*************************************************/


/************************************************
My style
*************************************************/
.brand-name {
  color: #fff;
  font-size: 22px;
}

.brand-name:hover {
  color: rgb(225, 190, 245);

}

.brand-name1 {
  font-size: 18px;
  color: #fff;
}

.brand-name2 {
  font-size: 18px;
  color: #fff;
}

.brand-name3 {
  font-size: 18px;
  color: #fff;
}

.brand-name1:hover {
  font-size: 19px;
  color: rgb(225, 190, 245);
}

.brand-name2:hover {
  font-size: 19px;
  color: rgb(225, 190, 245);
}

.brand-name3:hover {
  font-size: 19px;
  color: rgb(225, 190, 245);
}

.projectcolor {
  color: #fff;
}

.max60 {
  max-width: 60%;
}

#main-content {
  text-align: justify;
}

/************************************************************
* Стили собственного фреймворка мелкие функцианальные стили
************************************************************/
.textfull {
  text-align: justify;
}

.textcenter {
  text-align: center;
}

/*Стили фона для плашек на главной и лендинг страницах */
.bg1_1 {
  background: linear-gradient(331deg, #121d23, #08080d);
}

.bg1_2 {
  background: linear-gradient(331deg, #1b2c34, #08080d);
}

.bg1_3 {
  background: linear-gradient(331deg, #233943, #08080d);
}

.bg2_1 {
  background: linear-gradient(45deg, #121f25, #1a2a33);
}

.bg2_2 {
  background: linear-gradient(331deg, #121f25, #20333d);
}

.bg2_3 {
  background: linear-gradient(331deg, #121f25, #20333d);
}

.f36 {
  font-size: 36px;
}

.fs17 {
  font-size: 17px;
}

.textjust {
  text-align: justify;
}

.margb10 {
  margin-bottom: 10px;
}

/************************************************************
* Стили собственного фреймворка мелкие функцианальные стили
************************************************************/


/* Футер стиль ссылок  */
.futer_link {
  border: 1px solid #333;
  text-align: center;
  border-radius: 11px;
  margin: 5px;
}


body img {
  -webkit-user-drag: none;
  /* Chrome, Safari */
  -khtml-user-drag: none;
  /* Konqueror */
  -moz-user-drag: none;
  /* Firefox */
  -o-user-drag: none;
  /* Opera */
  user-drag: none;
  pointer-events: none;
  /* Отключает все события мыши */
}

.br10 {
  border-radius: 10px;
}

/************************************************
My style
*************************************************/



/*
* Новые стили для блока главная страница Проекты
*/
.project-card {
  box-shadow: 0 8px 20px rgb(0 0 0 / 34%);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  transition: transform 0.3s ease;
  background: linear-gradient(331deg, #121f25, #0a181f);
}

.project-card:hover {
  /* transform: translateY(-5px); - ОТКЛЮЧЕНО ДЛЯ ПЛАВНОГО JS PARALLAX */
}

.project-image {
  width: 100%;
  height: 410px;
  background-size: cover;
  background-position: center;
}

.project-content {
  padding: 20px;
  background: linear-gradient(331deg, #121f25, #04011c);
  flex-grow: 1;
}

.project-content p {
  margin-bottom: 15px;
  color: #a6a7a7;
  font-size: 15px;
  line-height: 1.6;
}

.project-title h4 {
  margin: 0 0 5px;
  font-size: 18px;
}

.project-title span {
  font-size: 14px;
  color: #a6a7a7;
}

.project-social {
  margin-top: 15px;
}

.project-social a {
  display: inline-block;
  margin-right: 10px;
  color: #555;
  transition: color 0.2s;
}

.project-social a:hover {
  color: #bf19b1;
}

.prbg_1 {
  background-image: url('/public/assets/img/member/member-2.png');
}

.prbg_1_1 {
  background: linear-gradient(331deg, #121f25, #180a1f);
}

/*
* Новые стили для блока главная страница Проекты
*/


label {
  display: block;
  margin-bottom: 0;
}

.colorwhite {
  color: #e86dbdd4;
}

.fo-social i {
  margin-top: 10px;
  vertical-align: middle;
}

.fo-social img {
  margin-top: 10px;
}