@font-face {
  font-family: 'Unbounded';   /* Название шрифта (любое, на ваше усмотрение) */
  src: url('../fonts/Unbounded-Bold.woff') format('woff'); /* Путь к файлу */
  font-weight: bold;           /* Вес шрифта */
  font-style: normal;            /* Стиль шрифта */
  font-display: swap;            /* Опционально: как браузер будет отображать текст до загрузки шрифта */
}

@font-face {
  font-family: 'Unbounded';   /* Название шрифта (любое, на ваше усмотрение) */
  src: url('../fonts/Unbounded-Medium.woff') format('woff'); /* Путь к файлу */
  font-weight: 500;           /* Вес шрифта */
  font-style: normal;            /* Стиль шрифта */
  font-display: swap;            /* Опционально: как браузер будет отображать текст до загрузки шрифта */
}

@font-face {
  font-family: 'Ubuntu';   /* Название шрифта (любое, на ваше усмотрение) */
  src: url('../fonts/UbuntuSans-Bold.woff') format('woff'); /* Путь к файлу */
  font-weight: bold;           /* Вес шрифта */
  font-style: normal;            /* Стиль шрифта */
  font-display: swap;            /* Опционально: как браузер будет отображать текст до загрузки шрифта */
}

@font-face {
  font-family: 'Ubuntu';   /* Название шрифта (любое, на ваше усмотрение) */
  src: url('../fonts/UbuntuSans-Medium.woff') format('woff'); /* Путь к файлу */
  font-weight: 500;           /* Вес шрифта */
  font-style: normal;            /* Стиль шрифта */
  font-display: swap;            /* Опционально: как браузер будет отображать текст до загрузки шрифта */
}



:root {
  --color-main: #D83B3B;     /* Цвет ссылок */
    --color-main-dark:#B52222;
  --color-title: #4C4C4C;  /* Цвет заголовков */
  --color-subtitle: #AAAAAA;  /* Цвет заголовков */
  
}

a {color: var(--color-main); transition: .4s;}
a:hover {color: var(--color-main-dark); transition: .2s;}

h1 {font-family: 'Unbounded'; font-weight: bold; color: var(--color-title);}
h2 {font-size: 32px; line-height: 42px; font-family: 'Unbounded'; font-weight: bold; color: var(--color-title);}
h4 { font-size: 21px; line-height: 31px; font-family: 'Unbounded'; font-weight: bold;}
h5 { font-size: 18px; line-height: 24px;}

.section-title {}

/* Сброс */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Базовые стили */
body {
  font-family: 'Ubuntu', sans-serif;
  background: #fff;
  color: #848484;
  font-size: 16px;
  line-height: 24px;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Обёртка для шапки и подвала */
.wrapper-header {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 20px; /* на случай небольших отступов */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Обёртка для основного контента */
.wrapper-content {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* Просто чтобы видеть результат */
.header, .footer {
  padding: 50px 0;
}
.main {
  padding: 40px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}




.mainlogo, .maincontacts, .mainmenu {
  /* Чтобы ширина была по содержимому */
  flex-shrink: 0;
  white-space: nowrap;
}

.mainlogo {}
.mainmenu {margin: 0 auto;}
    .mainmenu ul {display: flex; gap: 80px;}
        .mainmenu ul li {list-style-type: none;position: relative;}
            .mainmenu ul li a {color: var(--color-title); text-decoration: none;;}

            span.messagecount {
    background-color: var(--color-main);
    width: 14px;
    height: 14px;
    font-size: 12px;
    border-radius: 50%;
    position: absolute;
    text-align: center;
    color: #fff;
    top: -5px;
}
.maincontacts {text-align: right;}

    .maincontacts_city {color: var(--color-subtitle); font-size: 14px; margin-bottom: 5px;}
        .maincontacts_city span {}
    .maincontacts_links {display: flex; font-family: 'Unbounded'; font-weight: 500;
        display: inline-flex;        /* Или flex — если нужна ширина на всю строку */
        align-items: center;         /* Вертикальное выравнивание по центру */
        gap: 15px;}
        .maincontacts_links_wa {line-height: 0;}
        .maincontacts_links_tg {line-height: 0;}
        .maincontacts_links_phone {font-size: 18px; line-height: 26px; color: var(--color-title);}
            .maincontacts_links_phone span {color: var(--color-subtitle);}
                .maincontacts_links_phone a {color: var(--color-title); text-decoration: none;}





/* ПЕРВЫЙ ЭКРАН*/
#firstscreen {flex: 1;
  display: flex;}

.maincasepreview {
    position: absolute;
    right: -400px;
    top: -140px;
    pointer-events: none;
}

.mainytp {}
    .mainytp h1 {font-size: 48px; line-height: 64px; margin-bottom: 20px;}
    .mainytp h3 {}
        .mainytp h3.subtitle {font-weight: 500; color: var(--color-subtitle); font-size: 28px; line-height: 36px; margin-bottom: 25px;;}





    .button {background-color: var(--color-main); 
        color: #fff; 
        padding: 20px 40px 20px 30px; 
        border-radius: 50px; 
        border: 5px solid #FFDBDB;
        display: inline-flex;        /* Или flex — если нужна ширина на всю строку */
        align-items: center;         /* Вертикальное выравнивание по центру */
        gap: 10px;
        font-size: 18px;
        text-decoration: none;
        transition: .4s;
        box-sizing: border-box;
        border: none;
        box-shadow: 0 0 0 5px rgba(255, 219, 219, 0.6);}

        .button:hover {
            transform: scale(0.99);
            background-color: var(--color-main-dark);
            opacity: 1;
            box-shadow: 0 0 0 8px rgba(255, 219, 219, 0.6);
        color: #fff;}

        .button:active {
            transform: scale(0.98);
            color: #fff;
        }

        span.button-icon {line-height: 0;}


        .benefits-block {display: flex;gap: 40px; margin-top: 150px;}
            .benefits-item {max-width: 220px;}
            .benefits-item-title {color: var(--color-title); margin-bottom: 10px; position: relative;}
                .benefits-item-title:before {position: absolute;
                    width: 14px;
                    height: 13px;
                content:'';
            background:url(../images/red-star-list-icon.svg) no-repeat;
        left: -25px;
    top: 5px;}
            .benefits-item-desc {}


/* БЛОК С УСЛУГАМИ */
#services {display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

    .services-item { 
        background-color: var(--color-title);
        color: #fff;
        flex: 0 0 calc(50% - 10px);
    box-sizing: border-box;
    padding: 40px 50px;
    border-radius: 20px;
}
        .services-item-title {}
            .services-item-title h4 {}
        .services-item-pricetime {display: flex;font-size: 16px; line-height: 38px; font-family: 'Unbounded';    gap: 20px;}
        .services-item-price {opacity: .5;}
        .services-item-time {opacity: 0.25;}





/* БЛОК С КЕЙСАМИ */
#cases {}
.cases-columns {
  display: flex;
gap: 100px;
}
.cases-column {}

.cases-item {
  display: flex;
  max-width: 610px;
  gap: 30px;
  margin: 30px 0 60px 0;
  align-items:center;
  }
  .cases-item-pic {line-height: 0;}
    .cases-item-pic img {border-radius: 10px;}
  .cases-item-info {}
    .cases-item-info-namentype {
      display: flex;
    gap: 30px;
    margin-bottom: 5px;
  }
      .cases-item-info-name {}
        .cases-item-info-name h5 {color:var(--color-title);}
      .cases-item-info-type {color:var(--color-subtitle);}
    .cases-item-info-desc {}








/************************************************************************************************/
/*************************************** БЛОГГГГГГГ *********************************************/
/************************************************************************************************/





.blog-item {
    padding: 40px;
    background: #fff;
    box-shadow: 0 40px 80px #0000000f;
    border-radius: 20px;
    margin-bottom: 30px;
}


/* КАРТИНКИ ЗАПИСИ */
.blog-item-pic {}

.post-item .post-thumbnail {
  margin-bottom: 15px;
}

.post-item .post-thumbnail.placeholder img {
    max-height: 150px;
    border-radius: 15px;
}


/* МЕТА ЗПИСЕЙ */

  .blog-item-meta {
    display: flex;
    gap: 25px;
}

    .blog-item-date {}

    .blog-item-author {}

    .blog-item-category {}

    .blog-item-tags {}



  .blog-item-title {}

    .blog-item-title h2 {}

      .blog-item-title h2 a {}

  .blog-item-subtitle {}

    .blog-item-subtitle h3 {}

  .blog-item-anons {}

.blog-item-bottom {
    margin-top: 20px;
    display: flex;
    gap: 20px;
    align-items: center;
}

  .blog-item-button {
    
  }

    .blog-item-button a {
        background-color: var(--color-main);
        color: #fff;
        padding: 5px 20px;
        display: inline-block;
        text-decoration: none;
        border-radius: 50px;
    }


    .blog-item-views {}












/************************************************************************************************************/
/*************************************** БЛОГГГГГГГ — ДЕТАЛЬНАЯ *********************************************/
/************************************************************************************************************/


.blog-detail-main {}

  .blog-detail-pic {}

    .blog-detail-pic img {
      width: 100%;
      height: auto;
      }

.blog-detail-meta {
    display: flex;
    gap: 25px;
    margin-top: 25px;
}

    .blog-detail-date {}

    .blog-detail-author {}

    .blog-detail-category {}

    .blog-detail-tags {}

  .blog-detail-title {
    margin-bottom: 20px;
    margin-top: 20px;
  }

      .blog-detail-title h1 {
    font-size: 2.5em;
    line-height: 1.2;

}

  .blog-detail-subtitle {}

      .blog-detail-subtitle h2 {
    font-size: 28px;
    line-height: 1.3;
    font-family: 'Unbounded';
    color: #a9a9a9;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    margin-bottom: 30px;
}

  .blog-detail-content {}













nav.navigation {
    background: #f7f7f7;
    padding: 40px;
    margin: 60px 0;
    border-radius: 20px;
}

h2.screen-reader-text {
    font-size: 21px;
    line-height: 1.3;
    color: #a9a9a9;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    margin-bottom: 15px;
}

.nav-previous a {
    background: #fff;
    padding: 15px 30px;
    border-radius: 10px;
    display: inline-block;
}