Изменил карочки с услугами: изменил названия и позиции, добавил новые;

Изменил главный цвет сайта;
Изменил высоту слайдера и его анимацию

assets/css/main.css

@@ -6,9 +6,15 @@
 }
 
 :root {
-    --primary-color: #81C784;
-    --primary-dark: #4CAF50;
-    --primary-light: #A5D6A7;
+    /* Сохраненные зеленые цвета - для быстрого возврата:
+       --primary-color: #81C784;
+       --primary-dark: #4CAF50;
+       --primary-light: #A5D6A7; */
+    
+    /* Мятно-зеленые цвета */
+    --primary-color: #20C997;
+    --primary-dark: #1A9B7A;
+    --primary-light: #6DD5B8;
     --secondary-color: #ffffff;
     --text-dark: #2c3e50;
     --text-light: #7f8c8d;
@@ -219,7 +225,7 @@ a:hover {
 /* Hero Section */
 .hero {
     position: relative;
-    height: 100vh;
+    height: 70vh;
     overflow: hidden;
     margin-top: 80px;
     background-color: var(--secondary-color);
@@ -228,35 +234,27 @@ a:hover {
 .hero-slider {
     position: relative;
     height: 100%;
+    overflow: hidden;
+}
+
+.hero-slides-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
 }
 
 .hero-slide {
-    position: absolute;
-    top: 0;
-    left: 0;
+    flex: 0 0 100%;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
-    opacity: 0;
-    transition: opacity 0.8s ease-in-out;
-    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+    position: relative;
+    background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-dark) 40%, transparent 40%);
 }
 
-.hero-slide.active {
-    opacity: 1;
-}
 
-.hero-slide::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(33, 143, 54, 0.1);
-    z-index: 1;
-}
 
 .hero-content {
     position: relative;
@@ -278,7 +276,8 @@ a:hover {
 .hero-subtitle {
     font-size: 1.25rem;
     margin-bottom: 2rem;
-    opacity: 0.9;
+    opacity: 1;
+    color: rgba(255, 255, 255, 0.95);
 }
 
 .hero-buttons {
@@ -292,13 +291,37 @@ a:hover {
     font-size: 0.9rem;
 }
 
+.hero-buttons .btn-outline {
+    background-color: transparent;
+    color: var(--secondary-color);
+    border: 2px solid var(--secondary-color);
+    border-color: var(--secondary-color);
+}
+
+.hero-buttons .btn-outline:hover {
+    background-color: var(--secondary-color);
+    color: var(--primary-color);
+}
+
+.hero-buttons .btn-primary {
+    background-color: var(--secondary-color);
+    color: var(--primary-color);
+    border: 2px solid var(--secondary-color);
+    font-weight: 600;
+}
+
+.hero-buttons .btn-primary:hover {
+    background-color: transparent;
+    color: var(--secondary-color);
+    border-color: var(--secondary-color);
+}
+
 .hero-image {
-    position: absolute;
-    top: 0;
-    right: 0;
+    position: relative;
     width: 60%;
     height: 100%;
     z-index: 1;
+    flex-shrink: 0;
 }
 
 .hero-image img {
@@ -553,6 +576,30 @@ a:hover {
     transform: translateX(5px);
 }
 
+.modal-note {
+    margin-top: 2rem;
+    padding: 1.5rem;
+    background-color: #f8f9fa;
+    border-left: 4px solid #6c757d;
+    border-radius: var(--border-radius);
+    font-size: 0.9rem;
+    color: var(--text-light);
+    font-style: italic;
+    line-height: 1.5;
+}
+
+.modal-note a {
+    color: var(--primary-color);
+    text-decoration: none;
+    font-weight: 500;
+    transition: var(--transition);
+}
+
+.modal-note a:hover {
+    color: var(--primary-dark);
+    text-decoration: underline;
+}
+
 .service-icon {
     width: 80px;
     height: 80px;