@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
  --color-blue: #253748;
  --color-dark-blue: #1F2D3A;

  --bg-light:#EDEBDF;

  --all-transition:  all 0.2s ease-in;

  --blog-grid-area: 1.35fr 0.8fr;
}

::-webkit-scrollbar {
  width: 12px; /* Ширина скроллбара */
  background-color: #f0f0f0; /* Цвет фона */
}

/* Стиль "ползунка" */
::-webkit-scrollbar-thumb {
  background-color: var(--color-blue);
  border-radius: 6px; /* Скругленные углы */
  border: 3px solid #f0f0f0; /* Отступ внутри скроллбара */
}

/* Стиль при наведении */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-blue); /* Цвет ползунка при наведении */
}

/* Стиль "вверх" и "вниз" (если есть кнопки) */
::-webkit-scrollbar-button {
  background-color: #ccc;
}

::selection {
  background: var(--color-blue);
  color: var(--bg-light);

}

body{
  font-family: "Roboto", sans-serif;
  font-style: normal;
  color: var( --color-blue);
  background: #f1f1f1;
  overflow-x: clip;
}

.cover{
  overflow-x: clip;
}

span{
  color: var(--color-blue);
}

.container{
  max-width: 1120px;
}

.text_content{
  max-width: 627px !important;
}

.img_cover{
  border-radius: 40px;
  overflow: hidden;
}

.img_cover img{
  width: 100%;
  height: 100%;
}

.btn{
  border-radius: 15px !important;
  padding: 9px 38px;
  font-size: 21px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  outline: none;
  border: none;
  box-shadow: none;
}

.btn_one, .btn_one:active, .btn_one:focus {
  color: #EDEBDF !important;
  background: var(--color-blue) !important;
  background-size: 100% 200% !important; /* Задаём размеры фона больше элемента */
  background-position: 0 0; !important; /* Начальная позиция градиента */
  cursor: pointer;
  transition: var(--all-transition);
}

.btn_one:hover {
  color: #fff;
  background: var(--color-dark-blue) !important;
  transition: var(--all-transition) !important;
}



.owl-dots{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.owl-dot {

  color: inherit !important;
  border: none !important;
  padding: 10px !important;
  font: inherit;
  background: #606060 !important;
  border-radius: 50% !important;
  margin: 0 5px !important;
}

.owl-dot.active{
  background: var(--color-blue) !important;
}



.section_title{
  margin-bottom: 85px;
}

.section_title h3{
  font-size: 48px;
  font-weight: 800;
  margin: 0;
  text-transform: uppercase;
}

.section_title p{
  margin: 0;
}

.object{
  position: absolute;
}


.line_top{
  background: var(--bg-light);
}

.line_top .container{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.line_top .logo {
  top: -10px;
}
.logo{
  position: relative;
  padding: 18px 16px 9px 16px;
  background: #E6E4D8;
  border-radius: 10px;
  color: var(--color-blue);
}
.logo h1, .logo h3{
  font-size: 21px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-style: normal;
  margin-bottom: -2px;
}
.logo p{
  font-size: 17px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 200;
  font-style: normal;
  margin-bottom: 0;
  letter-spacing: 5.2px;
}

a.logo{
  text-decoration: unset;
}

.line_top .object_top_1{
  left: 50%;
  transform: translateX(-50%);
  top: -12px;
}

.social{
  display: flex;
  align-items: center;
}

.social a{
  display: block;
}

.social a img.tg {
  max-width: calc(55px - 10px);
}
.social a img.wa {
  max-width: calc(52px - 10px);
}

.social a:last-child{
  margin-left: 10px;
}


.line_main{
  position: relative;
  background: var(--bg-light);
  padding-top: 50px;
  padding-bottom: 50px;
  color: var(--color-blue);
  z-index: 2;
}

.line_main .container{
  display: flex;
  align-items: center;
}
.line_main p, .main_offer .col-lg-7 p{
  font-size: 29px;
  font-weight: 300;
  font-style: normal;
  margin-bottom: 28px;
  background-color: color(srgb 0.87 0.8601 0.8004);
  width: fit-content;
  padding: 5px 10px;
  border-radius: 9px;
}

.line_main h3{
  font-size: 58px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 900;
  text-transform: uppercase;
  font-style: normal;
  margin-bottom: 13px;
}

.line_main h4{
  font-size: 36px;
  font-weight: 300;
  font-style: normal;
  margin-bottom: 64px;
}
.line_main .object_flowers{
  left: -130px;
  bottom: -56px;
  z-index: 99;
}

.line_main .photo img, .object_photo{

}

.triangle{
  display: block;
  width: 105%;
  height: 90px;
  position: absolute;
  bottom: -90px;
  left: 50%;
  transform: translateX(-50%);
}

.info{
  position: relative;
  background: var(--color-blue);
  color: #EDEBDF;
  padding-top: 200px;
  padding-bottom: 200px;
  z-index: 1;
}

.info .content{
  max-width: 994px;
  margin: 0 auto;
}
.info .content p{
  font-size: 36px;
  font-weight: 200;
  line-height: 38px;
  margin-bottom: 40px;
}

.info .content p:last-child{
  margin: 0;
}


.info .content p span{
  font-weight: 900;
}

.info .triangle{
  transform: translateX(-50%) rotate(-180deg);
  bottom: 0;
}
.info .object_divan{
  right: 80px;
  bottom: -46px;
  z-index: 99;
  max-width: 290px;
}

.info  .object_left_side{
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.info  .object_right_side{
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
}



.about{
  position: relative;
  z-index: 0;
  padding-top: 100px;
  padding-bottom: 100px;
  background: #1F2D3A;
}

.about .container{
  display: flex;
  color: #EDEBDF;
  align-items: center;
  column-gap: 40px;
}

.about h4{
  font-size: 68px;
  margin-bottom: 20px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 900;
  font-style: normal;

}

.about p{
  font-size: 28px;
  font-weight: 200;
}

.about p:last-child{
  margin-bottom: 0;
}

.about .left .img_cover{
  width: 24vw;
}

.problems .object_list{
  left: 0;
  top: -150px;
  max-width: 190px;
  z-index: 99;
}


.problems{
  position: relative;
  z-index: 2;
  background: #1F2D3A;
  color: #EDEBDF;
  padding-top: 100px;
  padding-bottom: 100px;
}


.problems .container{
  max-width: 1100px;
  margin: 0 auto;
}

.problems .container .section_title{
  text-align: center;
}

.problems .container .section_title h4{
  font-size: 50px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
}

.problems .row{
  row-gap: 20px;
}
.problems p{
  font-size: 24px;
  font-weight: 300;
}
.problem-item {
  display: flex;
  align-items: flex-start; /* Выравнивание по верху */
}
.problem-icon {
  font-size: 2rem; /* Размер иконки */
  margin-right: 15px; /* Отступ справа */
  line-height: 1.2; /* Для лучшего вертикального выравнивания с заголовком */
}
.media{
  padding-top: 200px;
  padding-bottom: 80px;
}

.media .section_title{
  text-align: center;
  margin-bottom: 45px;
}

.blog .section_title{
  text-align: center;
}

/* Стили для красивой адаптивной сетки */
/* Добавьте эти стили или измените существующие */
.gallery-grid {
  display: grid;
  /* Вы можете настроить количество колонок и их минимальный размер */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem; /* Отступы между квадратами */
  padding: 1rem;
}

.gallery-grid a {
  display: block;
  width: 100%; /* Занимает всю доступную ширину колонки */
  padding-bottom: 100%; /* Создает квадрат за счет отношения сторон */
  position: relative; /* Важно для позиционирования изображения внутри */
  overflow: hidden; /* Обрезает содержимое, выходящее за границы */
  border-radius: 8px; /* Скругляем углы, как у вас сейчас */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Тень, как у вас сейчас */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Анимация */
  outline: unset;
}

.gallery-grid a:hover {
  transform: scale(1.03); /* Немного уменьшаем масштаб для эффекта при наведении */
  box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* Усиливаем тень */
}


.gallery-grid img {
  position: absolute; /* Позиционируем изображение абсолютно внутри ссылки */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Это самое главное: изображение будет обрезано, чтобы полностью заполнить квадрат, сохраняя пропорции */
  display: block; /* Убираем лишние отступы */
}

.faq{
  position: relative;
  z-index: 1;
  background: var(--bg-light);
  color: var(--color-blue);
  padding-top: 80px;
  padding-bottom: 250px;
}
.faq  .section_title{
  text-align: center;
  margin-bottom: 40px;
}
.faq  .section_title h3{
  font-size: 50px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
}

.accordion{
  --bs-accordion-btn-bg: #E6E4D8;
  --bs-accordion-bg: #FBFBFB;
  --bs-accordion-color: var(--color-blue);
  --bs-accordion-btn-color: var(--color-blue);
  --bs-accordion-active-color: #edebdf;
  --bs-accordion-active-bg: #253747;
  max-width: 920px;
  margin: 0 auto;
}

.accordion-button{
  font-size: 24px;
}

.faq .object_bottom{
  bottom: -64px;
  left: 50%;
  transform: translateX(-50%);
  max-height: 180px;

}

.main_offer{
  color: var(--color-blue);
  padding-top: 200px;
  padding-bottom: 150px;
  background: var(--bg-light);
}


.main_offer p{
  font-size: 29px;
  font-weight: 200;
  font-style: normal;
  margin-bottom: 28px;
}

.main_offer h3{
  font-size: 58px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 900;
  text-transform: uppercase;
  font-style: normal;
  margin-bottom: 13px;
}

.main_offer h4{
  font-size: 36px;
  font-weight: 300;
  font-style: normal;
  margin-bottom: 64px;
}


form{
  text-align: center;
  background: #FBFBFB;
  padding: 40px;
  border-radius: 40px;
}
form p{
  font-size: 20px;
  margin-bottom: 25px;
}
form .btn_one{
  margin-top: 10px;
  margin-bottom: 20px;
}

.politics {
  text-align: center;
  font-size: 12px;
  color: #b8b8b8 !important;
  line-height: 5px;
}

.politics a{
  color: #b8b8b8 ;

}

footer{
  position: relative;
  padding: 10px 0;
}

footer .row{
  align-items: center;
}
.f_logo{
  display: flex;
  justify-content: end;
}
.f_logo .logo{
  display: block;
  width: fit-content;
  padding: 10px 10px 10px 15px;
}

.f_logo  .logo h1, .logo h3, .f_logo  .logo p{
  color: var(--bg-light);
}

.f_logo  .logo{
  background: var(--color-blue);
}

.f_social{
  display: flex;
  justify-content: center;
}

footer .object_tumb{
  z-index: 99;
  left: 0;
  bottom: 0;
}

.object_photo{
  display: none;
}

.accordion-body{
  font-size: 18px;
}

.page.politics p{
  font-size: 16px !important;
  line-height: normal;

}
.page.politics .container-fluid:nth-child(1){
  padding: unset;
}
.page.politics .container-fluid{
  background: var(--bg-light);
  padding: 30px 0;
  color: var(--color-blue);
}

.page.politics a{
  color: var(--color-blue);
}



.breadcrumb {
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y: 0;
  --bs-breadcrumb-margin-bottom: 1rem;
  --bs-breadcrumb-bg: ;
  --bs-breadcrumb-border-radius: ;
  --bs-breadcrumb-divider-color: var(--bs-secondary-color);
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
  margin-bottom: var(--bs-breadcrumb-margin-bottom);
  --bs-breadcrumb-font-size: 14px;
  list-style: none;
  background-color: var(--bs-breadcrumb-bg);
  border-radius: var(--bs-breadcrumb-border-radius);

  --bs-secondary-color: var(--color-blue);
  --bs-breadcrumb-item-active-color:  var(--color-blue);
}

.breadcrumb a{
  color:  var(--color-blue);
}



.blog.main .herro{
  background: var(--color-dark-blue);
  padding: 120px 0;
  color: var(--bg-light);
}

.blog.main .breadcrumb{
  display: flex;
  justify-content: center;
  --bs-breadcrumb-divider-color:var(--bg-light);
  --bs-breadcrumb-item-active-color:var(--bg-light);
}

.blog.main  .breadcrumb-item.active, .blog.main  .breadcrumb a{
  color: var(--bg-light);
}
.blog.main  .breadcrumb-item.active{
  font-weight: 500;
}





.blog.page .herro{
  /*padding: 127px 0;*/
  background: var(--bg-light);
}

.blog.page .herro .container{
  display: grid;
  grid-template-columns:var(--blog-grid-area);
}

.blog.page .herro .content{
  padding: 127px 0;
}
.blog.page .herro  .img_cover{
  position: absolute;
  top: 30px;
}

.blog.page .herro .photo{
  position: relative;
}
.blog.page .herro  .photo .img_cover{
  border: 15px solid var(--color-blue);
  border-radius: 25px;
  max-width: 407px;
}

.blog.page .herro h1{
  font-size: 35px;
  font-weight: bold;
  text-transform: uppercase;
}
.blog.page .herro .object_flowers{
  top: 200px;
  right: -198px;
}

.blog.page .herro  .object_clip{
  top: -16px;
  right: -52px;
}


.blog.page .intent{
  padding-top: 127px;
  padding-bottom: 87px;
}


.blog.page .intent .container{
  display: grid;
  grid-template-columns: var(--blog-grid-area);
  align-items: start;
}
.blog.page .intent .left{
  padding-right:60px;
}

.block.page .intent .left section{
  font-size: 18px;
  font-weight: 300;
}

.blog.page .intent .right{
  position: sticky;
  top: 5px; /* Например, с отступом 20px сверху */
}
.blog.page .block, .blog.page .form{
  background: var(--bg-light);
  border-radius: 25px;
  padding: 20px;
  margin-bottom: 40px;
}
.blog.page .block.author{
  margin-top: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 20px;
}
.blog.page .block.author h4{
  font-size: 25px;
  margin-bottom: 0;
}
.blog.page .block.author p{
  margin-bottom: 0;
  font-weight: 200;
  font-size: 18px;
}
.blog.page .block.author .social img{
  max-height: 25px;
}



.blog.page .related_posts{
  padding-top: calc(127px + 87px);
  padding-bottom: 127px;
  background: var(--color-blue);
  position: relative;
}

.blog.page .related_posts .section_title{
  color: var(--bg-light);
  margin-bottom: 20px;
}

.blog.page .triangle_2{
  display: block;
  width: 105%;
  height: 90px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.blog.page .related_posts .btn_one{
  font-size: 14px;
}

  /* Стили для блока оглавления */
#table-of-contents-container {
  /*background-color: #f9f9f9;*/
  /*border: 1px solid #e0e0e0;*/
  /*border-radius: 8px;*/
  /*padding: 20px;*/
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--color-blue);
}
#table-of-contents-container h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-weight: bold;
}
#table-of-contents-container ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}
#table-of-contents-container li {
  margin-bottom: 6px;
}
#table-of-contents-container a {
  text-decoration: none;
  color: var(--color-blue);
  font-weight: 300;
  font-size: 18px;
}
#table-of-contents-container a:hover {
  text-decoration: underline;
}
/* Опционально: делаем отступ для подзаголовков H3 */
#table-of-contents-container li.toc-h3 {
  padding-left: 20px;
}
#table-of-contents-container li.toc-h2 a{
  font-weight: 500;
}