feat: добавить хлебные крошки и стили для страницы "Услуги"

- Создан фрагмент `_fragments/breadcrumbs.html` для отображения цепочки навигации
- Обновлён шаблон `services.html` с интеграцией хлебных крошек и новым содержанием
- Добавлен файл `services.css` для стилизации раздела "Услуги"
- Расширены стили breadcrumbs в `style.css`
- Уточнены размеры и отступы в стилях главной страницы (index.css)
- Добавлено фоновое изображение `services-bg.png` для секции "Услуги"

static/css/index.css

@@ -10,7 +10,7 @@
 }
 
 .hero-content {
-    width: 580px;
+    width: 500px;
     height: 400px;
     margin-top: 80px;
 }
@@ -82,6 +82,7 @@
 }
 
 .advantages-title {
+    margin-top: 50px;
     width: 300px;
 
     font-style: normal;
@@ -140,7 +141,7 @@
 }
 
 .advantages-item {
-    width: 250px;
+    width: 280px;
 }
 
 .advantages-item-number {
@@ -163,10 +164,9 @@
 }
 
 .advantages-item-title {
-
     font-style: normal;
     font-weight: 400;
-    font-size: 18px;
+    font-size: 20px;
     line-height: 22px;
     text-align: left;
 
@@ -176,7 +176,7 @@
 }
 
 .advantages-item-subtitle {
-    margin-top: 7px;
+    margin-top: 10px;
 
     font-style: normal;
     font-weight: 400;
@@ -223,21 +223,21 @@
 
     font-style: normal;
     font-weight: 500;
-    font-size: 25px;
+    font-size: 32px;
     line-height: 22px;
 
     color: #ffffff;
 }
 
 .advantages-card-title {
-    margin-top: 20px;
+    margin-top: 30px;
     width: 291px;
     height: 84px;
 
 
     font-style: normal;
     font-weight: 500;
-    font-size: 32px;
+    font-size: 25px;
     line-height: 1.3;
 
     color: #ffffff;
@@ -245,7 +245,7 @@
 
 .advantages-card-button {
     display: inline-block;
-    margin-top: 50px;
+    margin-top: 25px;
 
     padding: 10px 10px;
 

static/css/services.css

@@ -0,0 +1,99 @@
+.box-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.icon {
+    width: 59px;
+    height: 59px;
+    border-radius: 100%;
+    background: #ffffff;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > svg {
+        width: 80%;
+        height: 80%;
+
+        fill: #63768d;
+    }
+}
+
+.blue {
+    background: #63768d;
+
+    & > svg {
+        fill: #ffffff;
+    }
+}
+
+.top-box {
+    width: 560px;
+    height: 260px;
+    padding: 39px;
+    background: #63768d;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    & > h2 {
+        margin-top: 8px;
+        font-weight: 400;
+        font-size: 44px;
+        text-align: left;
+
+        color: #ffffff;
+    }
+
+    & > p {
+        margin-top: 8px;
+        font-weight: 400;
+        font-size: 16px;
+        text-align: center;
+
+        color: #ffffff;
+    }
+}
+
+.large {
+    margin-top: 40px;
+    height: 300px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: end;
+
+    background-image: url(../img/services-bg.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.large-block {
+    height: 170px;
+    margin-right: 190px;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+
+    & > h2 {
+        font-weight: 400;
+        font-size: 44px;
+        text-align: left;
+
+        color: #63768d;
+    }
+
+    & > p {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        text-align: center;
+
+        color: #63768d;
+    }
+}

static/css/style.css

@@ -3,8 +3,8 @@
     font-family: 'BerlinType';
     src: url('../fonts/BerlinTypeWeb-Regular.eot');
     src: url('../fonts/BerlinTypeWeb-Regular.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/BerlinTypeWeb-Regular.woff2') format('woff2'),
-         url('../fonts/BerlinTypeWeb-Regular.woff') format('woff');
+    url('../fonts/BerlinTypeWeb-Regular.woff2') format('woff2'),
+    url('../fonts/BerlinTypeWeb-Regular.woff') format('woff');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
@@ -14,8 +14,8 @@
     font-family: 'BerlinType';
     src: url('../fonts/BerlinTypeWeb-Bold.eot');
     src: url('../fonts/BerlinTypeWeb-Bold.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/BerlinTypeWeb-Bold.woff2') format('woff2'),
-         url('../fonts/BerlinTypeWeb-Bold.woff') format('woff');
+    url('../fonts/BerlinTypeWeb-Bold.woff2') format('woff2'),
+    url('../fonts/BerlinTypeWeb-Bold.woff') format('woff');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
@@ -145,11 +145,15 @@ header {
 }
 
 .logo {
-    font-family: 'Playfair Display', serif;
+    font-family: 'BerlinType', serif;
     font-size: 32px;
     color: var(--dark);
     white-space: nowrap;
     letter-spacing: 1px;
+
+    a {
+        font-family: 'BerlinType', serif;
+    }
 }
 
 .search-wrap {
@@ -281,6 +285,22 @@ header {
     white-space: nowrap;
 }
 
+.breadcrumbs-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+    margin-top: 16px;
+}
+
+.breadcrumbs-line > a {
+    font-weight: 400;
+    font-size: 16px;
+    text-align: left;
+
+    color: #554971;
+}
+
 /* ── FOOTER ── */
 footer {
     background: var(--blue-gray);