PageSourceSearch

https://yudaevschool.ru/blog/

html yudaevschool.ru collected 2026-10-08 12:41:37 UTC 375,526 bytes, 11,283 lines download raw bytes

1<!DOCTYPE html>
2<html lang="ru">
3    <head>
4		<!-- Yandex.Metrika counter -->
5		
5<script type="text/javascript">
vendor: 447 bytes, lines 5-13
5
6		    (function(m,e,t,r,i,k,a){
7		        m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
8		        m[i].l=1*new Date();
9		        for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
10		        k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
11		    })(window, document,'script','https://mc.yandex.ru/metrika/tag.js', 'ym');
12		
13		    ym(
1391746271
vendor: 88 bytes, lines 13-14
13, 'init', {webvisor:true, clickmap:true, accurateTrackBounce:true, trackLinks:true});
14		
14</script>
14
15		<noscript><div><img src="https://mc.yandex.ru/watch/91746271" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
16		
17<!-- /Yandex.Metrika counter -->
18		
19        <meta charset="utf-8"/>
20        <meta name="viewport" content="width=device-width, initial-scale=1"/>
21        <meta name="format-detection" content="telephone=no">
22
23        <style>
24
25    /**
26    * VARIABLES
27    */
28
29    :root {
30        /**
31        * Animation variables are defined in `document-end.php`
32        * to prevent unwanted animations on the page load.
33        */
34
35        --container-width: 192rem;
36        --container-padding: 2rem;
37
38        --white: #F4F4F4;
39        --black: #151515;
40    }
41
42
43    /**
44    * GLOBAL STYLES
45    */
46
47    ::selection {
48        background-color:rgb(168, 212, 22);
49        color: black;
50    }
51
52    html {
53        -webkit-tap-highlight-color: transparent;
54        accent-color: #b8e919;
55        background-color: white;
56        box-sizing: border-box;
57        font-family: 'Inter', sans-serif;
58        font-size: 62.5%; /* https://stackoverflow.com/questions/28988445/css-62-5-why-do-developers-use-it */
59        font-synthesis: none;
60        overflow-x: hidden;
61    }
62
63    *, *:before, *:after {
64        appearance: none;
65        box-sizing: inherit; /* www.css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
66    }
67
68    body {
69        display: flex;
70        flex-direction: column;
71        margin: 0;
72        min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0rem));
73        overflow-x: clip; /* https://stackoverflow.com/questions/47095596/body-overflow-x-hidden-breaks-position-sticky */
74    }
75
76    img {
77        display: block;
78        user-select: none;
79    }
80
81    section {
82        content-visibility: auto;
83    }
84
85
86    /**
87    * GENERIC CLASSES
88    */
89
90    .Centered {
91        padding-inline: max(var(--container-padding), calc((100% - var(--container-width)) / 2));
92    }
93
94    .CenteredMargin {
95        margin-inline: max(var(--container-padding), calc((100% - var(--container-width)) / 2));
96    }
97
98    .Text {
99        color: var(--black);
100        font-family: 'Inter', sans-serif;
101        font-size: clamp(1.6rem, calc(1.6rem + (1.6 - 1.6) * ((100dvw - 37.5rem) / (144 - 37.5))), 1.6rem);
102        font-style: normal;
103        font-weight: 500;
104        letter-spacing: -0.025em;
105        line-height: 120%;
106        margin: 0;
107        text-decoration: none;
108    }
109
110    /* For `a` elements with text inside of them. */
111    .LinkContainer {
112        color: var(--black);
113        text-decoration: none !important;
114    }
115
116    .ButtonEffect {
117        background-color: #cfff32;
118        transition: 0.2s linear;
119
120        box-shadow:
121            0rem 0rem 2.4rem color-mix(in srgb, #CFFF32 0%, transparent),
122            0rem 0.4rem 0.8rem color-mix(in srgb, black 10%, transparent),
123            inset -0.1rem 0.1rem 0rem 0.075rem color-mix(in srgb, white 60%, transparent),
124            inset 0.1rem -0.1rem 0rem 0.075rem color-mix(in srgb, white 70%, transparent),
125            inset 0rem 0rem 5rem 0 color-mix(in srgb, white 0%, transparent)
126        ;
127
128        &:hover {
129            box-shadow:
130                0rem 0rem 2.4rem color-mix(in srgb, #CFFF32 70%, transparent),
131                0rem 0.4rem 0.8rem color-mix(in srgb, black 0%, transparent),
132                inset 0rem 0rem 0.3rem 0.1rem color-mix(in srgb, white 90%, transparent),
133                inset 0rem 0rem 0.3rem 0.1rem color-mix(in srgb, white 90%, transparent),
134                inset 0rem 0rem 2.5rem 0 color-mix(in srgb, white 100%, transparent)
135            ;
136        }
137
138        &:active {
139            transition: var(--animation);
140            opacity: 0.8;
141            translate: 0 0.2rem;
142            box-shadow:
143                0rem 0rem 2.4rem 0.2rem color-mix(in srgb, #CFFF32 100%, transparent),
144                0rem 0.4rem 0.8rem color-mix(in srgb, black 0%, transparent),
145                inset 0rem 0rem 0.3rem 0.1rem color-mix(in srgb, white 90%, transparent),
146                inset 0rem 0rem 0.3rem 0.1rem color-mix(in srgb, white 95%, transparent),
147                inset 0rem 0rem 2rem 0 color-mix(in srgb, white 100%, transparent)
148            ;
149        }
150    }
151
152    .Button {
153        align-items: center;
154        border-radius: 100rem;
155        color: black;
156        cursor: pointer;
157        display: flex;
158        font-family: 'GNF', sans-serif;
159        font-size: 1.8rem;
160        font-style: normal;
161        font-weight: 700;
162        gap: 1.8rem;
163        height: 6rem;
164        margin: 0;
165        text-decoration: none;
166        text-transform: uppercase;
167        transition: 0.2s linear;
168        user-select: none;
169        white-space: nowrap;
170        width: max-content;
171        padding-inline: 2.4rem 1.8rem;
172
173        span {
174            flex: 1;
175            text-align: center;
176        }
177
178        img {
179            aspect-ratio: 1 / 1;
180            border-radius: 100rem;
181            box-shadow: 0 0.2rem 1rem color-mix(in srgb, black 20%, transparent);
182            height: 100%;
183            height: 2.6rem;
184            margin-inline-start: auto;
185            object-fit: scale-down;
186            transition: var(--animation);
187            width: 2.6rem;
188        }
189    }
190
191    @keyframes scroll-into-view-animation {
192        from {
193            opacity: 0;
194            scale: 0.95;
195        }
196    }
197
198    .ScrollIntoViewAnimation {
199        @supports (animation-timeline: view()) {
200            transform-origin: top;
201            transform-style: preserve-3d;
202            will-change: transform, opacity;
203
204            animation: scroll-into-view-animation forwards ease-out;
205            animation-timeline: view();
206            animation-range: entry 0rem entry 50dvh;
207        }
208    }
209
210
211    /**
212    * LOCAL STYLES
213    */
214
215    .grecaptcha-badge {
216        visibility: hidden !important;
217    }
218
219
220    /**
221    * FONTS
222    */
223
224    @font-face {
225        font-display: block;
226        font-family: 'Loos';
227        src: url('https://yudaevschool.ru/wp-content/themes/yudaev/assets/fonts/loos-variable.woff2');
228    }
229
230    @font-face {
231        font-display: block;
232        font-family: 'Inter';
233        src: url('https://yudaevschool.ru/wp-content/themes/yudaev/assets/fonts/inter-variable.woff2');
234    }
235
236    @font-face {
237        font-display: block;
238        font-family: 'GNF';
239        src: url('https://yudaevschool.ru/wp-content/themes/yudaev/assets/fonts/gnf.ttf');
240    }
241    
242    @font-face {
243        font-display: block;
244        font-family: 'Loos_Extended';
245        src: url('https://yudaevschool.ru/wp-content/themes/yudaev/assets/fonts/loos-extended-regular.otf');
246    }
247</style>
248
249
250
251
252<style>
253    .green-arrow {
254      aspect-ratio: 1;
255      width: 36px;
256      border-radius: 50%;
257      display: flex;
258      align-items: center;
259      justify-content: center;
260      background-color: #cfff32;
261      position: relative;
262      padding: 2px;
263      box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0784313725);
264      transition: all 0.3s linear 0s;
265    }
266    .green-arrow::before {
267      background: conic-gradient(from -18.65deg at 50% 50%, rgba(255, 255, 255, 0.3019607843) 0deg, rgba(255, 255, 255, 0.8) 90deg, rgba(255, 255, 255, 0.3019607843) 181.58deg, rgba(255, 255, 255, 0.8) 270deg, rgba(255, 255, 255, 0.3019607843) 360deg);
268      content: "";
269      width: 100%;
270      aspect-ratio: 1;
271      border-radius: 50%;
272      position: absolute;
273      top: 50%;
274      left: 50%;
275      transform: translate(-50%, -50%);
276      -webkit-mask-image: radial-gradient(circle 20px at center, transparent 98%, rgb(0, 0, 0) 100%);
277      mask-image: radial-gradient(circle 20px at center, transparent 98%, rgb(0, 0, 0) 100%);
278    }
279    @media (hover: hover) and (pointer: fine) {
280      .green-arrow:hover {
281        box-shadow: 0px 0px 24px 0px rgba(207, 255, 50, 0.4), 0px -3px 15px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 3px 15px 0px rgba(255, 255, 255, 0.3019607843) inset, 2px 0px 15px 0px rgba(255, 255, 255, 0.5019607843) inset, -2px 0px 15px 0px rgba(255, 255, 255, 0.5019607843) inset, 0px 2px 10px 0px rgba(0, 0, 0, 0.0509803922);
282      }
283    }
284    .green-arrow img {
285      max-width: 100%;
286      max-height: 100%;
287      object-fit: contain;
288      object-position: center;
289      transition: all 0.3s linear 0s;
290    }
291    .green-arrow:active {
292      box-shadow: none;
293    }
294    .green-arrow:active img {
295      opacity: 0.5;
296    }
297    
298    .section-name {
299      display: flex;
300      background-color: #cfff32;
301      border-radius: 64px;
302      box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
303      gap: 8px;
304    }
305    .section-name__index {
306      padding-block: 10px;
307      padding-left: 16px;
308      box-shadow: 0px 0px 24px 0px rgba(207, 255, 50, 0.4);
309      text-align: center;
310      display: flex;
311      align-items: center;
312      justify-content: center;
313      font-family: "GNF";
314      line-height: 130%;
315      font-weight: 400;
316      font-size: 18px;
317    }
318    @media (max-width: 1440px) {
319      .section-name__index {
320        font-size: 16px;
321      }
322    }
323    @media (max-width: 1024px) {
324      .section-name__index {
325        font-size: 16px;
326      }
327    }
328    @media (max-width: 375px) {
329      .section-name__index {
330        font-size: 14px;
331      }
332    }
333    .section-name__text-wrapper {
334      position: relative;
335      display: inline-block;
336      border-radius: 64px;
337      overflow: hidden;
338    }
339    .section-name__text {
340      background-color: black;
341      color: white;
342      padding: 10px 16px;
343      border-radius: 62px;
344      display: block;
345      line-height: 130%;
346      font-family: "GNF";
347      font-weight: 400;
348      font-size: 18px;
349      text-transform: uppercase;
350    }
351    @media (max-width: 1440px) {
352      .section-name__text {
353        font-size: 16px;
354      }
355    }
356    @media (max-width: 1024px) {
357      .section-name__text {
358        font-size: 16px;
359      }
360    }
361    @media (max-width: 375px) {
362      .section-name__text {
363        font-size: 14px;
364      }
365    }
366    
367    .course-card {
368      align-items: flex-start;
369      background: #f7f7f7;
370      border-radius: 30px;
371      box-shadow: 1px 5px 6px 0px rgba(0, 0, 0, 0.1);
372      display: flex;
373      flex-direction: column;
374      gap: 13px;
375      height: auto !important;
376      justify-content: flex-end;
377      padding-bottom: 24px;
378      position: relative;
379      transition: 2s;
380      transform-origin: top;
381    }
382    .course-card .div-text-wrapper {
383      align-items: end;
384      display: flex;
385      flex-wrap: wrap;
386      gap: 15px;
387      justify-content: space-between;
388      padding-inline: 24px;
389      width: 100%;
390    }
391    .course-card .div-button {
392      align-items: center;
393      background-color: #cfff32;
394      border-radius: 100px;
395      color: black;
396      display: flex;
397      font-family: "Inter", sans-serif;
398      font-size: 14px;
399      font-weight: 500;
400      gap: 15px;
401      height: fit-content;
402      letter-spacing: -0.02em;
403      line-height: 130%;
404      padding: 5px;
405      transition: 0.25s;
406      padding-inline-start: 15px;
407    }
408    .course-card:hover .div-button {
409      background-color: black;
410      color: white;
411    }
412    .course-card:hover .div-button::before {
413      opacity: 0;
414    }
415    .course-card .green-arrow {
416      pointer-events: none;
417    }
418    .course-card:hover .green-arrow {
419      background-color: black;
420    }
421    .course-card:hover .green-arrow img {
422      filter: invert(1);
423    }
424    .course-card:hover .side-media {
425      background-color: black !important;
426    }
427    .course-card:hover .side-media__text {
428      color: white !important;
429    }
430    .course-card:hover .img-arrow {
431      opacity: 0;
432    }
433    .course-card:hover .img-arrow-hover {
434      opacity: 1;
435    }
436    .course-card .side-media__text {
437      transition: 0.2s;
438    }
439    .course-card .div-gradient {
440      background: linear-gradient(transparent, #f8f8f8);
441      bottom: -1px;
442      height: 100px;
443      position: absolute;
444      width: 100%;
445      z-index: 1;
446    }
447    .course-card__image {
448      height: 100%;
449      position: relative;
450      width: 100%;
451    }
452    .course-card__image img {
453      width: 100%;
454      max-height: 343px;
455      object-fit: contain;
456      object-position: center;
457    }
458    .course-card__image::after {
459      content: "";
460      position: absolute;
461      left: 0;
462      bottom: 0;
463      width: 100%;
464      height: 10%;
465      background: white;
466      background-size: cover;
467      filter: blur(36px);
468      z-index: 1;
469      pointer-events: none;
470      opacity: 0.6;
471    }
472    .course-card .card-marker {
473      margin-inline: 24px;
474    }
475    .course-card .card-marker .card-marker-text {
476      letter-spacing: -0.3px;
477    }
478    .course-card__name {
479      padding-bottom: 0;
480      font-family: "Inter", sans-serif;
481      font-weight: 600;
482      font-size: 20px;
483      line-height: 120%;
484      color: #000000;
485      padding-inline: 24px;
486      letter-spacing: -0.02em;
487    }
488    .course-card__tag {
489      color: rgb(145, 145, 145);
490      font-family: "Inter", sans-serif;
491      font-weight: 500;
492      font-size: 15px;
493      line-height: 141%;
494      display: inline-flex;
495      letter-spacing: -0.3px;
496      margin-right: 8px;
497      align-items: center;
498      gap: 6px;
499    }
500    .course-card__tag:not(:last-child)::after {
501      content: "";
502      width: 2px;
503      aspect-ratio: 1;
504      background-color: rgb(145, 145, 145);
505    }
506    .course-card__desktop-link {
507      position: absolute;
508      right: 24px;
509      bottom: 24px;
510    }
511    @media (max-width: 500px) {
512      .course-card__desktop-link {
513        display: none;
514      }
515    }
516    @media (max-width: 1440px) {
517      .course-card__desktop-link .green-arrow {
518        width: 32px;
519        height: 32px;
520      }
521    }
522    .course-card__mobile-link {
523      padding-left: 24px;
524    }
525    @media (min-width: 500px) {
526      .course-card__mobile-link {
527        display: none;
528      }
529    }
530    .course-card__mobile-link .side-media {
531      background-color: #cfff32;
532      padding: 5px;
533      padding-left: 15px;
534    }
535    .course-card__mobile-link .side-media__text {
536      color: #000000;
537      font-weight: 500;
538      font-size: 14px;
539      line-height: 130%;
540      letter-spacing: -0.02em;
541    }
542    .course-card__mobile-link .side-media__svg {
543      background-color: #000000;
544    }
545    .course-card__mobile-link .side-media__svg svg {
546      fill: white;
547      color: white;
548    }
549    
550    .card-marker {
551      align-items: center;
552      background-color: #fbfbfb;
553      border-radius: 100px;
554      border: 1px solid #ffffff;
555      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
556      display: flex;
557      justify-content: space-between;
558      padding: 3px;
559    }
560    .card-marker-icon {
561      border-radius: 50%;
562      aspect-ratio: 1;
563      width: 20px;
564      height: 20px;
565      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1019607843);
566      display: flex;
567      align-items: center;
568      justify-content: center;
569      position: relative;
570      padding: 2px;
571    }
572    .card-marker-icon.white {
573      background-color: #FFFFFF;
574    }
575    .card-marker-icon.black {
576      background-color: #000000;
577    }
578    .card-marker-icon img {
579      object-fit: contain;
580      object-position: center;
581      max-height: 100%;
582      max-width: 100%;
583      z-index: 2;
584    }
585    .card-marker-text {
586      font-family: "Inter", sans-serif;
587      font-weight: 600;
588      font-size: 13px;
589      text-wrap: nowrap;
590      margin-inline: 14px;
591      line-height: 135%;
592      letter-spacing: -0.02em;
593      color: rgb(145, 145, 145);
594      -webkit-font-smoothing: subpixel-antialiased;
595    }
596    
597    .from-scratch-to-pro {
598      padding-block: var(--horizontal-padding);
599    }
600    .from-scratch-to-pro__card-section {
601      display: flex;
602      gap: 20px;
603      width: 100%;
604      height: 565px;
605    }
606    @media (max-width: 1440px) {
607      .from-scratch-to-pro__card-section {
608        height: 486px;
609      }
610    }
611    .from-scratch-to-pro__card {
612      min-width: 330px;
613      flex: 1;
614      display: flex;
615      flex-direction: column;
616      align-items: flex-start;
617      border-radius: 20px;
618      overflow: hidden;
619      width: 285px;
620      position: relative;
621      box-shadow: 0px 6px 35px 0px rgba(0, 0, 0, 0.1019607843);
622    }
623    @media (max-width: 1400px) {
624      .from-scratch-to-pro__card {
625        min-width: 285px;
626      }
627    }
628    .from-scratch-to-pro__card-title {
629      font-weight: 600;
630      font-family: "Inter";
631      font-size: 20px;
632      letter-spacing: -0.02em;
633      font-smooth: always;
634      -webkit-font-smoothing: subpixel-antialiased;
635    }
636    .from-scratch-to-pro__card-discription {
637      -webkit-font-smoothing: subpixel-antialiased;
638      color: rgba(0, 0, 0, 0.4);
639      font-family: "Inter";
640      font-size: 14px;
641      font-smooth: always;
642      font-weight: 500;
643      letter-spacing: -0.02em;
644      line-height: 130%;
645      text-wrap: pretty;
646    }
647    .from-scratch-to-pro__card-images {
648      width: 100%;
649      flex: 1;
650      position: relative;
651      background-image: url("../assets/images/basic.png");
652      background-position: bottom center;
653      background-repeat: no-repeat;
654      background-size: contain;
655    }
656    .from-scratch-to-pro .training-to-day {
657      padding-top: 20px;
658      background-color: #f8f8f8;
659      position: relative;
660    }
661    .from-scratch-to-pro .training-to-day .card-marker {
662      margin-inline: 20px;
663    }
664    .from-scratch-to-pro .training-to-day__title {
665      padding-inline: 20px;
666      margin-top: 15px;
667    }
668    .from-scratch-to-pro .training-to-day__discription {
669      margin-top: 5px;
670      padding-right: 40px;
671      padding-inline: 20px;
672    }
673    .from-scratch-to-pro .training-to-day__images {
674      margin-top: 20px;
675    }
676    .from-scratch-to-pro .training-to-day__images > * {
677      position: absolute;
678      display: flex;
679      flex-direction: column;
680      align-items: center;
681      justify-content: center;
682    }
683    .from-scratch-to-pro .training-to-day__blander {
684      left: 20px;
685      top: 88px;
686      animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
687    }
688    .from-scratch-to-pro .training-to-day__ozon {
689      right: 30px;
690      aspect-ratio: 1;
691      top: 98px;
692    }
693    .from-scratch-to-pro .training-to-day__wb {
694      animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
695      left: 54px;
696      aspect-ratio: 1;
697      bottom: 34px;
698    }
699    .from-scratch-to-pro .training-to-day__figma {
700      animation-timing-function: ease-in-out;
701      aspect-ratio: 1;
702      bottom: 61px;
703      right: 47px;
704    }
705    .from-scratch-to-pro .card-marker-icon {
706      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1019607843);
707    }
708    .from-scratch-to-pro .card-marker-icon::before {
709      background-image: conic-gradient(from -18.65deg at 50% 50%, rgba(0, 0, 0, 0.05) 0deg, rgba(0, 0, 0, 0.15) 90deg, rgba(0, 0, 0, 0.05) 181.58deg, rgba(0, 0, 0, 0.15) 270deg, rgba(0, 0, 0, 0.05) 360deg) !important;
710    }
711    .from-scratch-to-pro .payment-after {
712      padding: 20px;
713      background-color: #f1f1f1;
714    }
715    .from-scratch-to-pro .payment-after__image {
716      background-image: url("data:image/svg+xml,%3csvg%20width='247'%20height='262'%20viewBox='0%200%20247%20262'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cline%20x1='0.5'%20y1='2.18558e-08'%20x2='0.499989'%20y2='262'%20stroke='url(%23paint0_linear_5541_7104)'%20stroke-opacity='0.1'/%3e%3cline%20x1='41.5'%20y1='2.18558e-08'%20x2='41.5'%20y2='262'%20stroke='url(%23paint1_linear_5541_7104)'%20stroke-opacity='0.1'/%3e%3cline%20x1='82.5'%20y1='2.18558e-08'%20x2='82.5'%20y2='262'%20stroke='url(%23paint2_linear_5541_7104)'%20stroke-opacity='0.1'/%3e%3cline%20x1='123.5'%20y1='2.18558e-08'%20x2='123.5'%20y2='262'%20stroke='url(%23paint3_linear_5541_7104)'%20stroke-opacity='0.1'/%3e%3cline%20x1='164.5'%20y1='2.18558e-08'%20x2='164.5'%20y2='262'%20stroke='url(%23paint4_linear_5541_7104)'%20stroke-opacity='0.1'/%3e%3cline%20x1='205.5'%20y1='2.18558e-08'%20x2='205.5'%20y2='262'%20stroke='url(%23paint5_linear_5541_7104)'%20stroke-opacity='0.1'/%3e%3cline%20x1='246.5'%20y1='2.18558e-08'%20x2='246.5'%20y2='262'%20stroke='url(%23paint6_linear_5541_7104)'%20stroke-opacity='0.1'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_5541_7104'%20x1='-0.5'%20y1='-2.18558e-08'%20x2='-0.500011'%20y2='262'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_5541_7104'%20x1='40.5'%20y1='-2.18558e-08'%20x2='40.5'%20y2='262'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_5541_7104'%20x1='81.5'%20y1='-2.18558e-08'%20x2='81.5'%20y2='262'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_5541_7104'%20x1='122.5'%2
7160y1='-2.18558e-08'%20x2='122.5'%20y2='262'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint4_linear_5541_7104'%20x1='163.5'%20y1='-2.18558e-08'%20x2='163.5'%20y2='262'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint5_linear_5541_7104'%20x1='204.5'%20y1='-2.18558e-08'%20x2='204.5'%20y2='262'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint6_linear_5541_7104'%20x1='245.5'%20y1='-2.18558e-08'%20x2='245.5'%20y2='262'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
717      background-repeat: no-repeat;
718      background-position: center;
719      background-size: cover;
720    }
721    .from-scratch-to-pro .payment-after__title {
722      margin-top: 13px;
723      padding-right: 10px;
724      margin-bottom: 6px;
725      line-height: 124.7%;
726      letter-spacing: 2.1px;
727    }
728    .from-scratch-to-pro .payment-after__title span {
729      letter-spacing: -0.02em;
730      font-size: 20px;
731      line-height: 120%;
732    }
733    .from-scratch-to-pro .payment-after__title b {
734      color: rgba(0, 0, 0, 0.3019607843);
735      letter-spacing: -0.02em;
736      font-size: 20px;
737    }
738    .from-scratch-to-pro .payment-after__discription {
739      padding-right: 10px;
740    }
741    .from-scratch-to-pro .payment-after__month {
742      position: absolute;
743      display: flex;
744      align-items: center;
745      justify-content: space-between;
746      padding-right: 16px;
747      padding-left: 24px;
748      padding-block: 16px;
749      border-radius: 170px;
750      gap: 55px;
751      backdrop-filter: blur(24.7917480469px);
752      box-shadow: 0px 3.31px 16.53px 0px rgba(0, 0, 0, 0.1215686275), -3.31px -3.31px 33.06px 0px rgba(255, 255, 255, 0.8980392157) inset;
753      color: rgba(0, 0, 0, 0.3019607843);
754      font-family: GNF;
755      font-size: 30px;
756      text-wrap: nowrap;
757    }
758    .from-scratch-to-pro .payment-after__month:nth-child(1) {
759      top: 59.38px;
760      left: 10px;
761      rotate: -3.5deg;
762      animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
763    }
764    .from-scratch-to-pro .payment-after__month:nth-child(2) {
765      top: 114.24px;
766      left: 96.64px;
767      rotate: 8.5deg;
768      animation-timing-function: ease-in-out;
769    }
770    .from-scratch-to-pro .payment-after__month_green {
771      gap: 35px;
772      background-color: #CEFF2F;
773      backdrop-filter: blur(24.7917480469px);
774      box-shadow: 0px 3.31px 16.53px 0px rgba(0, 0, 0, 0.1215686275), -4.96px -4.96px 33.06px 0px rgba(255, 255, 255, 0.8980392157) inset, 4.96px 4.96px 33.06px 0px rgba(255, 255, 255, 0.8980392157) inset;
775      top: 176.98px;
776      left: 25.36px;
777      rotate: -10deg;
778    }
779    .from-scratch-to-pro .payment-after__month span {
780      padding: 10px;
781      border-radius: 168.58px;
782      text-wrap: nowrap;
783      backdrop-filter: blur(24.7917480469px);
784      box-shadow: 0px 3.31px 16.53px 0px rgba(0, 0, 0, 0.1215686275), -3.31px -3.31px 16.53px 0px rgba(255, 255, 255, 0.8980392157) inset, 3.31px 3.31px 16.53px 0px rgba(255, 255, 255, 0.8980392157) inset;
785      font-size: 18.64px;
786    }
787    
788    .platform {
789      align-items: center;
790      justify-content: center;
791      background-image: url("data:image/svg+xml,%3csvg%20width='246'%20height='486'%20viewBox='0%200%20246%20486'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cline%20x1='0.5'%20y1='2.18558e-08'%20x2='0.499979'%20y2='486'%20stroke='url(%23paint0_linear_4814_14286)'%20stroke-opacity='0.07'/%3e%3cline%20x1='82.1667'%20y1='2.18558e-08'%20x2='82.1667'%20y2='486'%20stroke='url(%23paint1_linear_4814_14286)'%20stroke-opacity='0.07'/%3e%3cline%20x1='163.833'%20y1='2.18558e-08'%20x2='163.833'%20y2='486'%20stroke='url(%23paint2_linear_4814_14286)'%20stroke-opacity='0.07'/%3e%3cline%20x1='245.5'%20y1='2.18558e-08'%20x2='245.5'%20y2='486'%20stroke='url(%23paint3_linear_4814_14286)'%20stroke-opacity='0.07'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_4814_14286'%20x1='-0.5'%20y1='-2.18558e-08'%20x2='-0.500021'%20y2='486'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_4814_14286'%20x1='81.1667'%20y1='-2.18558e-08'%20x2='81.1667'%20y2='486'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_4814_14286'%20x1='162.833'%20y1='-2.18558e-08'%20x2='162.833'%20y2='486'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_4814_14286'%20x1='244.5'%20y1='-2.18558e-08'%20x2='244.5'%20y2='486'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
792      background-color: #f9f9f9;
793      background-position: center;
794      background-repeat: no-repeat;
795      background-size: contain;
796    }
797    .platform__icon {
798      position: relative;
799    }
800    .platform__icon:nth-child(1)::after {
801      content: "";
802      position: absolute;
803      bottom: 0px;
804      left: 50%;
805      translate: -50%;
806      width: 24px;
807      padding-inline: 10px;
808      height: 2px;
809      background-color: rgba(0, 0, 0, 0.1019607843);
810    }
811    .platform__icon span {
812      position: absolute;
813      padding: 3px 12px;
814      font-family: "SF Pro Display";
815      width: max-content;
816      color: rgba(0, 0, 0, 0.3490196078);
817      font-weight: 600;
818      line-height: 130%;
819      border-radius: 40px;
820      font-size: 13px;
821      padding-inline: 10px;
822      background-color: rgba(0, 0, 0, 0.0509803922);
823      backdrop-filter: blur(40px);
824      box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.0784313725), -2px -2px 10px 0px rgba(255, 255, 255, 0.8980392157) inset, 2px 2px 10px 0px rgba(255, 255, 255, 0.8980392157) inset;
825    }
826    .platform__icon:nth-child(2) span {
827      top: 7px;
828      left: -106%;
829    }
830    .platform__icon:nth-child(3) span {
831      animation-timing-function: ease-in-out;
832      top: 7px;
833      left: 78%;
834    }
835    .platform__icon:nth-child(4) span {
836      bottom: 10px;
837      left: -106%;
838      animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
839    }
840    .platform:nth-child(2) {
841      background-color: transparent;
842      align-items: flex-start;
843      justify-content: center;
844      background: none;
845      box-shadow: none;
846    }
847    @media (min-width: 728px) {
848      .platform:nth-child(2) {
849        translate: -40px;
850      }
851    }
852    .platform__marker {
853      margin-bottom: 20px;
854    }
855    .platform__text {
856      padding: 20px;
857      gap: 5px;
858      background-color: #f1f1f1;
859      margin-bottom: 9px;
860      width: 100%;
861      border-radius: 20px;
862      box-shadow: 0px 6px 35px 0px rgba(0, 0, 0, 0.0509803922), 0px -10px 14px 0px rgba(255, 255, 255, 0.5019607843) inset, 0px 10px 14px 0px rgba(255, 255, 255, 0.5019607843) inset, 4px 0px 50px 0px rgba(255, 255, 255, 0.8) inset;
863    }
864    .platform__title {
865      color: rgba(0, 0, 0, 0.8980392157);
866      letter-spacing: -0.02em;
867      font-family: "Inter";
868      line-height: 125%;
869      font-size: 16px;
870      font-weight: 600;
871    }
872    .platform__disk {
873      color: rgba(0, 0, 0, 0.4);
874      letter-spacing: -0.02em;
875      font-family: "Inter";
876      line-height: 125%;
877      font-size: 14px;
878      font-weight: 500;
879    }
880    
881    .career-center-right .training-to-day__discription {
882      max-width: 80%;
883    }
884    .career-center-right__image {
885      flex: 1;
886      width: 100%;
887      display: flex;
888      align-items: center;
889      justify-content: end;
890    }
891    .career-center-right__image img {
892      margin-top: auto;
893      object-fit: contain;
894      object-position: center;
895      max-height: 100%;
896      max-width: 100%;
897      width: 100%;
898    }
899    
900    .career-center-left .payment-after__discription {
901      max-width: 78%;
902    }
903    .career-center-left__image {
904      position: static;
905    }
906    .career-center-left__image img.background {
907      min-width: 100%;
908      right: 0;
909      left: 0;
910      top: 0;
911      position: absolute;
912    }
913    .career-center-left__icon {
914      position: absolute;
915      max-width: 48px;
916      aspect-ratio: 1;
917      top: 90px;
918      left: 47px;
919    }
920    .career-center-left__icon img {
921      object-fit: contain;
922      object-position: center;
923      pointer-events: none;
924    }
925    .career-center-left__icon:nth-child(4) {
926      top: 175px;
927      left: 11px;
928      animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
929    }
930    .career-center-left__icon:nth-child(3) {
931      top: 119px;
932      right: 19px;
933      left: auto;
934      animation-timing-function: cubic-bezier(0.3, 0.1, 0.64, 0.99);
935    }
936    .career-center-left__icon:nth-child(2) {
937      top: 31px;
938      left: 124px;
939      animation-timing-function: ease-in-out;
940    }
941    
942    .work-check .from-scratch-to-pro__card-discription {
943      max-width: none;
944    }
945    .work-check__info {
946      position: absolute;
947      top: 50%;
948      left: 50%;
949      translate: -50% -50%;
950      align-items: center;
951      justify-content: center;
952    }
953    .work-check__time {
954      font-family: "GNF";
955      font-weight: 400;
956      translate: -13px;
957      letter-spacing: -0.05em;
958      font-size: 100px;
959      background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.4) 100%);
960      -webkit-background-clip: text; /* Обрезаем фон по тексту (для Safari/Chrome) */
961      background-clip: text; /* Стандартное свойство */
962      -webkit-text-fill-color: transparent; /* Делаем текст прозрачным (для Safari/Chrome) */
963      color: transparent; /* Делаем текст прозрачным (стандартное свойство) */
964      display: inline-block;
965    }
966    .work-check__label {
967      right: -50px;
968      top: 5px;
969      background-color: #ceff2f;
970      border-radius: 40px;
971      font-size: 14px;
972      text-transform: uppercase;
973      color: #76950f;
974      -webkit-text-fill-color: #76950f;
975      z-index: 3;
976      padding: 5px 10px;
977      line-height: 90%;
978      font-weight: 400;
979      letter-spacing: 0;
980      backdrop-filter: blur(40px);
981      box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.0784313725), -2px -2px 10px 0px rgba(255, 255, 255, 0.8980392157) inset, 2px 2px 10px 0px rgba(255, 255, 255, 0.8980392157) inset;
982    }
983    .work-check__label.gradient-border {
984      position: absolute;
985    }
986    .work-check__text {
987      color: rgba(0, 0, 0, 0.4);
988      font-size: 14px;
989      font-family: "Inter";
990      font-weight: 500;
991      text-wrap: nowrap;
992      line-height: 130%;
993      letter-spacing: -0.02em;
994    }
995    
996    .special-offer {
997      background-color: #f9f9f9;
998      padding: 20px;
999      width: 100%;
1000      border-radius: 20px;
1001      align-items: flex-start;
1002      justify-content: start;
1003      gap: 15px;
1004    }
1005    .special-offer__spa {
1006      background-color: transparent;
1007      border: none;
1008      margin-top: auto;
1009      cursor: pointer;
1010    }
1011    .special-offer .side-media {
1012      padding: 5px;
1013      padding-left: 20px;
1014      background-color: #fafafa;
1015      gap: 15px;
1016      box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0509803922);
1017    }
1018    .special-offer .side-media__img {
1019      min-height: 32px;
1020      min-width: 32px;
1021    }
1022    .special-offer .side-media__text {
1023      color: #323232;
1024      padding-inline: 0;
1025      font-size: 14px;
1026      font-weight: 500;
1027      line-height: 130%;
1028      letter-spacing: -0.02em;
1029    }
1030    .special-offer__title {
1031      font-size: 30px;
1032      font-weight: 400;
1033      font-family: "GNF";
1034      line-height: 110%;
1035      letter-spacing: -0.01em;
1036      text-transform: uppercase;
1037    }
1038    
1039    .second-pc-card {
1040      align-items: center;
1041      backdrop-filter: blur(60px);
1042      background: #f1f1f1;
1043      box-shadow: 0 6px 35px 0 rgba(0, 0, 0, 0.05);
1044      display: flex;
1045      flex-direction: column;
1046      justify-content: end;
1047    }
1048    .second-pc-card_top .second-pc-card__text {
1049      padding-bottom: 0;
1050      padding-top: 20px;
1051    }
1052    .second-pc-card_top .second-pc-card__image {
1053      display: flex;
1054    }
1055    .second-pc-card__image {
1056      flex: 1;
1057      width: 100%;
1058    }
1059    .second-pc-card__image img {
1060      width: 100%;
1061      max-height: 100%;
1062      max-width: 100%;
1063      object-fit: contain;
1064      object-position: center;
1065    }
1066    .second-pc-card__text {
1067      padding: 20px;
1068      padding-top: 0;
1069      width: 100%;
1070      display: flex;
1071      flex-direction: column;
1072      align-items: flex-start;
1073    }
1074    .second-pc-card__icon {
1075      margin-bottom: 15px;
1076    }
1077    .second-pc-card__title {
1078      font: 600 20px/1.2 "Inter", sans-serif;
1079      letter-spacing: -0.02em;
1080      color: rgba(0, 0, 0, 0.8);
1081      margin-bottom: 5px;
1082    }
1083    .second-pc-card__disc {
1084      font: 500 14px/1.3 "Inter", sans-serif;
1085      letter-spacing: -0.02em;
1086      color: rgba(0, 0, 0, 0.4);
1087    }
1088    
1089    .expandable-grid__inner {
1090      display: grid;
1091      gap: 16px;
1092      overflow: hidden;
1093      transition: height 0.5s ease;
1094    }
1095    .expandable-grid__item {
1096      background: #f0f0f0;
1097      padding: 16px;
1098      border-radius: 4px;
1099    }
1100    .expandable-grid__toggle {
1101      margin-top: 16px;
1102      padding: 8px 16px;
1103      background: #007bff;
1104      color: white;
1105      border: none;
1106      border-radius: 4px;
1107      cursor: pointer;
1108    }
1109    @media (hover: hover) and (pointer: fine) {
1110      .expandable-grid__toggle:hover {
1111        backdrop-filter: blur(45px);
1112        box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0784313725), 0px -5px 5px 0px rgba(255, 255, 255, 0.1019607843) inset, 0px 5px 5px 0px rgba(255, 255, 255, 0.1019607843) inset, 4px 0px 10px 0px rgba(255, 255, 255, 0.1019607843) inset, -4px 0px 10px 0px rgba(255, 255, 255, 0.1019607843) inset;
1113      }
1114    }
1115    
1116    .questions__question {
1117      position: relative;
1118      overflow: hidden;
1119    }
1120    .questions__question .question {
1121      transition: border-radius 0.3s linear;
1122    }
1123    .questions__question .question__header {
1124      display: flex;
1125      justify-content: space-between;
1126      align-items: center;
1127      cursor: pointer;
1128    }
1129    .questions__question .question__content {
1130      margin: 0;
1131      flex: 1;
1132    }
1133    .questions__question .question__details {
1134      overflow: hidden;
1135      transition: max-height 0.3s ease-out;
1136    }
1137    .questions__question .question__details p {
1138      padding: 20px 10px 10px 0px;
1139      font-family: "Inter";
1140      font-weight: 500;
1141      font-size: 15px;
1142      line-height: 135%;
1143      letter-spacing: -0.02em;
1144      color: rgba(0, 0, 0, 0.5019607843);
1145    }
1146    .questions__question .question--active .question__details {
1147      max-height: 500px;
1148    }
1149    .questions__question .question--active .faq__open {
1150      transform: rotate(45deg);
1151    }
1152    
1153    .faq .question.question--active {
1154      border-radius: 20px;
1155    }
1156    
1157    .mobile-slider {
1158      position: relative;
1159      width: 100%;
1160    }
1161    @media (min-width: 850px) {
1162      .mobile-slider {
1163        display: none;
1164      }
1165    }
1166    .mobile-slider .swiper-wrapper {
1167      align-items: stretch;
1168    }
1169    .mobile-slider .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
1170      position: relative;
1171      margin-top: 30px;
1172      left: 50%;
1173      transform: translate(-50%);
1174      display: flex;
1175      gap: 5px;
1176      z-index: 10;
1177      border-radius: 40px;
1178      background-color: #F2F2F2;
1179      width: fit-content;
1180      padding: 10px 12px;
1181    }
1182    .mobile-slider .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
1183      background: #ccc;
1184      opacity: 1;
1185      width: 5px;
1186      height: 5px;
1187      border-radius: 50%;
1188      transition: all 0.3s ease;
1189      margin: 0;
1190    }
1191    .mobile-slider .swiper-pagination.swiper-pagination-bullets.swiper-pagina
1191tion-horizontal .swiper-pagination-bullet-active {
1192      width: 24px;
1193      border-radius: 30px;
1194      background: #CFFF32;
1195    }
1196    
1197    .circle-icon {
1198      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
1199      background: #fff;
1200      border-radius: 50%;
1201      aspect-ratio: 1;
1202      width: 20px;
1203      height: 20px;
1204      display: flex;
1205      align-items: center;
1206      justify-content: center;
1207    }
1208    .circle-icon svg {
1209      scale: 1.5;
1210    }
1211    
1212    .card-name {
1213      display: flex;
1214      align-items: center;
1215      justify-content: flex-start;
1216      flex-direction: row;
1217      gap: 10px;
1218      border-radius: 40px;
1219      padding: 3px 12px 3px 3px;
1220      backdrop-filter: blur(40px);
1221      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
1222      background: rgba(255, 255, 255, 0.4);
1223    }
1224    .card-name__text {
1225      font: 600 13px/1.3 "Inter", sans-serif;
1226      letter-spacing: -0.02em;
1227      color: rgba(0, 0, 0, 0.4);
1228    }
1229    
1230    @keyframes rockUpDown {
1231      0%, 100% {
1232        transform: translateY(0);
1233      }
1234      50% {
1235        transform: translateY(-8px);
1236      }
1237    }
1238    #demand {
1239      background: #fafafa;
1240      margin-block-start: 60px;
1241      user-select: none;
1242      padding-block: clamp(120px, 120px + (250 - 120) * (100dvw - 375px) / (1440 - 375), 250px) clamp(0px, 0px + (0 - 0) * (100dvw - 375px) / (1440 - 375), 0px);
1243    }
1244    #demand .h2 {
1245      font-family: "Loos Extended";
1246      font-size: clamp(26px, 26px + (44 - 26) * (100dvw - 375px) / (1440 - 375), 44px);
1247      font-weight: 500;
1248      letter-spacing: -0.01em;
1249      line-height: 120%;
1250      margin-inline: max(30px, (100% - 1920px) / 2);
1251      max-width: 27ch;
1252    }
1253    #demand .h2 span {
1254      color: color-mix(in srgb, black 25%, transparent);
1255    }
1256    #demand .div-picture {
1257      margin-block-start: -50px;
1258      position: relative;
1259    }
1260    #demand .img-background {
1261      width: 100%;
1262    }
1263    #demand .div-bubble {
1264      align-items: center;
1265      display: flex;
1266      flex-direction: column;
1267      margin-block-start: 15px;
1268      position: absolute;
1269      translate: -50% calc(-100% + 17px);
1270    }
1271    #demand .div-bubble:nth-child(1 of #demand .div-bubble) {
1272      left: 29%;
1273      top: 33%;
1274    }
1275    #demand .div-bubble:nth-child(2 of #demand .div-bubble) {
1276      left: 70%;
1277      top: 33%;
1278    }
1279    #demand .div-bubble:nth-child(3 of #demand .div-bubble) {
1280      left: 17%;
1281      top: 56%;
1282    }
1283    #demand .div-bubble:nth-child(4 of #demand .div-bubble) {
1284      left: 83%;
1285      top: 56%;
1286    }
1287    #demand .img-icon {
1288      border-radius: 100px;
1289      box-shadow: 0 2px 5px color-mix(in srgb, black 10%, transparent);
1290      height: 20px;
1291      width: 20px;
1292    }
1293    #demand .p-title {
1294      align-items: center;
1295      backdrop-filter: blur(20px);
1296      background-color: color-mix(in srgb, black 3%, transparent);
1297      border-radius: 100px;
1298      color: color-mix(in srgb, black 40%, transparent);
1299      display: flex;
1300      font-family: "Inter";
1301      font-size: 13px;
1302      font-weight: 600;
1303      gap: 8px;
1304      left: 50%;
1305      letter-spacing: -0.02em;
1306      line-height: 135%;
1307      padding: 3px 14px 3px 3px;
1308      position: absolute;
1309      top: 0;
1310      translate: -50% -50%;
1311      width: fit-content;
1312      z-index: 1;
1313      box-shadow: inset 2px 2px 10px color-mix(in srgb, white 90%, transparent), inset -2px -2px 10px color-mix(in srgb, white 90%, transparent), 0px 2px 7px color-mix(in srgb, black 8%, transparent);
1314    }
1315    #demand .p-text {
1316      align-items: center;
1317      backdrop-filter: blur(10px);
1318      background-color: color-mix(in srgb, black 3%, transparent);
1319      border-radius: 100px;
1320      color: color-mix(in srgb, black 50%, transparent);
1321      display: flex;
1322      font-family: "Inter", sans-serif;
1323      font-size: clamp(14px, 14px + (18 - 14) * (100dvw - 375px) / (1440 - 375), 18px);
1324      font-weight: 500;
1325      height: 86px;
1326      justify-content: center;
1327      letter-spacing: -0.02em;
1328      line-height: 130%;
1329      text-align: center;
1330      width: 386px;
1331      box-shadow: inset 2px 2px 10px color-mix(in srgb, white 80%, transparent), inset -2px -2px 10px color-mix(in srgb, white 80%, transparent), 0px 6px 15px color-mix(in srgb, black 7%, transparent);
1332    }
1333    #demand .div-dot {
1334      backdrop-filter: blur(10px);
1335      background-color: color-mix(in srgb, black 3%, transparent);
1336      border-radius: 100px;
1337      height: 34px;
1338      margin-block-start: 15px;
1339      width: 34px;
1340      box-shadow: inset 2px 2px 10px color-mix(in srgb, white 80%, transparent), inset -2px -2px 10px color-mix(in srgb, white 80%, transparent), 0px 6px 15px color-mix(in srgb, black 7%, transparent);
1341    }
1342    #demand .img-separator {
1343      display: none;
1344      margin-block-start: 120px;
1345      margin-inline: auto;
1346    }
1347    @media (width <= 1080px) {
1348      #demand .div-bubble {
1349        align-items: center;
1350        display: flex;
1351        flex-direction: column;
1352        margin-block-start: 15px;
1353        position: absolute;
1354        translate: -50% calc(-100% + 17px);
1355      }
1356      #demand .div-bubble:nth-child(1 of #demand .div-bubble) {
1357        left: 24%;
1358        top: 39%;
1359      }
1360      #demand .div-bubble:nth-child(2 of #demand .div-bubble) {
1361        left: 66%;
1362        top: 27%;
1363      }
1364      #demand .div-bubble:nth-child(3 of #demand .div-bubble) {
1365        left: 16%;
1366        top: 66%;
1367      }
1368      #demand .div-bubble:nth-child(4 of #demand .div-bubble) {
1369        left: 81%;
1370        top: 56%;
1371      }
1372    }
1373    @media (width > 700px) {
1374      #demand .div-bubble:nth-child(1 of #demand .div-bubble) .p-title, #demand .div-bubble:nth-child(1 of #demand .div-bubble) .p-text {
1375        animation-delay: 0s;
1376      }
1377      #demand .div-bubble:nth-child(2 of #demand .div-bubble) .p-title, #demand .div-bubble:nth-child(2 of #demand .div-bubble) .p-text {
1378        animation-delay: 0.5s;
1379      }
1380      #demand .div-bubble:nth-child(3 of #demand .div-bubble) .p-title, #demand .div-bubble:nth-child(3 of #demand .div-bubble) .p-text {
1381        animation-delay: 1s;
1382      }
1383      #demand .div-bubble:nth-child(4 of #demand .div-bubble) .p-title, #demand .div-bubble:nth-child(4 of #demand .div-bubble) .p-text {
1384        animation-delay: 1.5s;
1385      }
1386    }
1387    @media (width <= 1030px) {
1388      #demand .div-picture {
1389        margin-inline: 100px;
1390      }
1391    }
1392    @media (width <= 900px) {
1393      #demand .div-bubble {
1394        scale: 0.8;
1395      }
1396    }
1397    @media (width <= 700px) {
1398      #demand .div-picture {
1399        margin: 0;
1400        padding: 0;
1401      }
1402      #demand .picture {
1403        display: none;
1404      }
1405      #demand .div-bubble {
1406        position: relative;
1407        left: unset !important;
1408        top: unset !important;
1409        scale: 1;
1410        translate: none;
1411      }
1412      #demand .div-bubble:not(:nth-child(1 of #demand .div-bubble)) {
1413        margin-block-start: -10px;
1414      }
1415      #demand .div-bubble:nth-child(1 of #demand .div-bubble) {
1416        z-index: 1;
1417      }
1418      #demand .div-bubble:nth-child(2 of #demand .div-bubble) {
1419        z-index: 2;
1420      }
1421      #demand .div-bubble:nth-child(3 of #demand .div-bubble) {
1422        z-index: 3;
1423      }
1424      #demand .div-bubble:nth-child(4 of #demand .div-bubble) {
1425        z-index: 4;
1426      }
1427      #demand .div-dot {
1428        display: none;
1429      }
1430      #demand .p-text {
1431        align-items: start;
1432        height: 106px;
1433        padding-block-start: 35px;
1434        width: 335px;
1435      }
1436      .div-bubble #demand .p-text {
1437        background-color: red;
1438      }
1439      #demand .h2 {
1440        margin-block-end: 60px;
1441      }
1442      #demand .img-separator {
1443        display: block;
1444      }
1445    }
1446    
1447    .header.scroll .div-gradient-blur {
1448      min-width: 200dvw;
1449      translate: -50%;
1450    }
1451    @media (width <= 990px) {
1452      .header.scroll .div-gradient-blur {
1453        translate: -50% -8px;
1454      }
1455    }
1456    
1457    .header {
1458      position: fixed;
1459      top: 20px;
1460      left: 50%;
1461      transform: translateX(-50%);
1462      z-index: 11;
1463    }
1464    .header .header__mobile-foot-links.social {
1465      width: 100%;
1466    }
1467    .header .header__mobile-foot-links.social a {
1468      aspect-ratio: 1/1;
1469      flex: 1;
1470    }
1471    .header .header__mobile-foot-links.social a .green-arrow {
1472      height: 100%;
1473      width: 100%;
1474    }
1475    .header .header__mobile-foot-links.social a .green-arrow img {
1476      scale: 1.2;
1477    }
1478    .header .side-media:not(.header__mobile-link) {
1479      pointer-events: none;
1480    }
1481    .header .div-gradient-blur {
1482      position: absolute;
1483      z-index: 0;
1484      inset: auto 0 0 0;
1485      height: 66px;
1486      pointer-events: none;
1487      scale: 1 -1;
1488    }
1489    .header .div-gradient-blur div, .header .div-gradient-blur::before, .header .div-gradient-blur::after {
1490      position: absolute;
1491      inset: 0;
1492    }
1493    .header .div-gradient-blur::before {
1494      content: "";
1495      z-index: 1;
1496      backdrop-filter: blur(0.5px);
1497      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%);
1498    }
1499    .header .div-gradient-blur div:nth-of-type(1) {
1500      z-index: 2;
1501      backdrop-filter: blur(1px);
1502      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgba(0, 0, 0, 0) 50%);
1503    }
1504    .header .div-gradient-blur div:nth-of-type(2) {
1505      z-index: 3;
1506      backdrop-filter: blur(2px);
1507      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%);
1508    }
1509    .header .div-gradient-blur div:nth-of-type(3) {
1510      z-index: 4;
1511      backdrop-filter: blur(4px);
1512      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%);
1513    }
1514    .header .div-gradient-blur div:nth-of-type(4) {
1515      z-index: 5;
1516      backdrop-filter: blur(8px);
1517      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%);
1518    }
1519    .header .div-gradient-blur div:nth-of-type(5) {
1520      z-index: 6;
1521      backdrop-filter: blur(16px);
1522      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
1523    }
1524    .header .div-gradient-blur div:nth-of-type(6) {
1525      z-index: 7;
1526      backdrop-filter: blur(32px);
1527      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
1528    }
1529    .header .div-gradient-blur::after {
1530      content: "";
1531      z-index: 8;
1532      backdrop-filter: blur(64px);
1533      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
1534    }
1535    .header__course-image {
1536      overflow: hidden;
1537    }
1538    .header__course-image img {
1539      border-radius: 20px;
1540      object-fit: cover;
1541      aspect-ratio: 242/155;
1542    }
1543    .header__mobile-course-card {
1544      width: 142px !important;
1545    }
1546    .header__mobile-course-card img {
1547      width: 100%;
1548      height: 100%;
1549      object-fit: cover;
1550    }
1551    .header__mobile-course-card:last-of-type {
1552      margin-inline-end: 20px;
1553    }
1554    .header__mobile-course-image {
1555      border-radius: 20px;
1556      box-shadow: 0px 2px 10px color-mix(in srgb, black 5%, transparent);
1557      margin-block-end: 15px;
1558    }
1559    .header__mobile-course-title {
1560      color: black;
1561      font-size: 12px;
1562      font-weight: 600;
1563      letter-spacing: -0.02em;
1564      line-height: 115% !important;
1565      margin-block-end: 5px;
1566      margin-inline-start: 10px;
1567    }
1568    .header__link {
1569      padding: 5px 15px;
1570      border-radius: 64px;
1571      text-decoration: none;
1572      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.0509803922);
1573      background-color: rgba(255, 255, 255, 0.4);
1574      font-family: "Inter";
1575      font-size: 14px;
1576      letter-spacing: -0.02em;
1577      text-wrap: nowrap;
1578      display: flex;
1579      align-items: center;
1580      font-weight: 500;
1581      color: rgba(0, 0, 0, 0.5019607843);
1582    }
1583    @media (hover: hover) and (pointer: fine) {
1584      .header__link:hover {
1585        backdrop-filter: blur(45px);
1586        box-shadow: -4px 0px 10px 0px rgba(255, 255, 255, 0.1019607843) inset;
1587      }
1588    }
1589    .header__link:active {
1590      backdrop-filter: blur(45px);
1591      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1019607843);
1592    }
1593    .header__link:nth-child(even):not(:last-child) {
1594      margin-right: 10px;
1595    }
1596    .header__link:nth-child(even):not(:last-child)::after {
1597      content: "";
1598      position: absolute;
1599      right: -10px;
1600      top: 50%;
1601      transform: translateY(-50%);
1602      bottom: 0;
1603      width: 1px;
1604      background: #cccccc;
1605      height: 22px;
1606    }
1607    .header__link_green {
1608      background-color: #cfff32;
1609      color: #000000;
1610    }
1611    .header__links {
1612      align-items: center;
1613      gap: 10px;
1614      align-items: stretch;
1615      z-index: 5;
1616    }
1617    @media (max-width: 1024px) {
1618      .header__links {
1619        flex: 1;
1620        justify-content: flex-end;
1621        align-items: stretch;
1622      }
1623    }
1624    .scroll .header__links {
1625      flex: 1;
1626      justify-content: flex-end;
1627    }
1628    .header__logo {
1629      align-items: center;
1630      gap: 5px;
1631      position: relative;
1632      line-height: 120%;
1633      letter-spacing: -0.02em;
1634      padding-inline-end: 8px;
1635    }
1636    @media (min-width: 990px) {
1637      .header__logo {
1638        translate: -9px;
1639      }
1640    }
1641    @media (max-width: 1024px) {
1642      .header__logo::after {
1643        content: "";
1644        position: absolute;
1645        right: -7.5px;
1646        top: 50%;
1647        transform: translateY(-50%);
1648        bottom: 0;
1649        width: 1px;
1650        background: #cccccc;
1651        height: 22px;
1652      }
1653    }
1654    .scroll .header__logo::after {
1655      content: "";
1656      position: absolute;
1657      right: -7.5px;
1658      top: 50%;
1659      transform: translateY(-50%);
1660      bottom: 0;
1661      width: 1px;
1662      background: #cccccc;
1663      height: 22px;
1664    }
1665    @media (max-width: 990px) {
1666      .header__logo::after {
1667        display: none;
1668      }
1669    }
1670    .header__logo-image {
1671      display: flex;
1672      align-items: center;
1673      justify-content: center;
1674    }
1675    .header__logo-image img {
1676      max-width: 100%;
1677      max-height: 100%;
1678      object-fit: contain;
1679      object-position: center;
1680    }
1681    .header__menu {
1682      align-items: center;
1683      padding: 6px;
1684      background-color: #f1f1f1;
1685      border-radius: 80px;
1686      max-width: 1071px;
1687      flex: 1;
1688      align-items: stretch;
1689      justify-content: flex-end;
1690      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725);
1691      backdrop-filter: blur(45px);
1692    }
1693    @media (max-width: 1024px) {
1694      .header__menu {
1695        display: contents !important;
1696      }
1697    }
1698    .scroll .header__menu {
1699      display: contents;
1700    }
1701    @media (max-width: 990px) {
1702      .header__menu {
1703        display: flex !important;
1704        flex-direction: column !important;
1705        background-color: transparent;
1706        box-shadow: none;
1707        align-items: flex-end;
1708        justify-content: flex-start;
1709        height: 100vh;
1710        padding: 0;
1711      }
1712    }
1713    .header__title {
1714      font-family: "Loos_Extended";
1715      font-weight: 600;
1716      font-size: 13px;
1717      text-wrap: nowrap;
1718      line-height: 130%;
1719      padding-right: 20px;
1720    }
1721    @media (min-width: 1024px) {
1722      .scroll .header__title {
1723        display: none;
1724      }
1725    }
1726    .header__desktop {
1727      align-items: center;
1728      justify-content: space-between;
1729      border-radius: 80px;
1730      position: relative;
1731    }
1732    @media (max-width: 1024px) {
1733      .header__desktop {
1734        justify-content: space-between;
1735        background-color: #f1f1f1;
1736        gap: 15px;
1737        padding-block: 6px;
1738        align-items: stretch;
1739        padding-left: 20px;
1740        padding-right: 6px;
1741      }
1742    }
1743    .scroll .header__desktop {
1744      justify-content: space-between;
1745      background-color: #f1f1f1;
1746      gap: 15px;
1747      padding-block: 6px;
1748      align-items: stretch;
1749      padding-left: 30px;
1750      padding-right: 6px;
1751      backdrop-filter: blur(45px);
1752      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725);
1753    }
1754    @media (max-width: 990px) {
1755      .header__desktop {
1756        display: none !important;
1757      }
1758    }
1759    .header__burger {
1760      align-items: center;
1761      gap: 12px;
1762      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.0509803922);
1763      padding-left: 5px;
1764      cursor: pointer;
1765    }
1766    @media (min-width: 990px) {
1767      .header__burger {
1768        margin-right: auto;
1769      }
1770    }
1771    .header__burger-text {
1772      font-family: inherit;
1773      font-size: inherit;
1774      font-weight: inherit;
1775      color: inherit;
1776    }
1777    @media (max-width: 990px) {
1778      .header__burger-text {
1779        padding-right: 10px;
1780      }
1781    }
1782    @media (max-width: 990px) {
1783      .header__burger {
1784        padding: 5px;
1785      }
1786    }
1787    .header__burger-icon {
1788      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1215686275);
1789      background-color: #cfff32;
1790      border-radius: 50%;
1791    }
1792    .header__burger-icon label {
1793      scale: 1.3;
1794    }
1795    .header__head {
1796      justify-content: space-between;
1797    }
1798    .header__courses {
1799      border-radius: 20px;
1800      bottom: -10px;
1801      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725);
1802      height: 0;
1803      left: 50%;
1804      max-height: calc(100dvh - 100px);
1805      overflow-x: hidden;
1806      overflow-y: auto !important;
1807      overscroll-behavior: contain;
1808      -webkit-overflow-scrolling: touch;
1809      position: absolute;
1810      transform: translate(-50%, 100%);
1811      width: 100%;
1812      min-height: 0;
1813    }
1814    .header__courses .wrapper {
1815      border-radius: inherit;
1816      background-color: #f0f0f0;
1817      padding: 20px;
1818      gap: 40px;
1819      min-height: 0;
1820      max-height: inherit;
1821      overflow-x: hidden;
1822      overflow-y: auto;
1823      overscroll-behavior: contain;
1824      -webkit-overflow-scrolling: touch;
1825    }
1826    .header__section {
1827      align-items: flex-start;
1828      gap: 30px;
1829    }
1830    .header__section-content {
1831      width: 100%;
1832      display: grid;
1833      grid-template-columns: repeat(4, 1fr);
1834      column-gap: 10px;
1835      row-gap: 20px;
1836      letter-spacing: -0.02em;
1837    }
1838    .header__section-title .side-media__text {
1839      font-family: "Inter", sans-serif;
1840      line-height: 135%;
1841      letter-spacing: -0.02em;
1842    }
1843    .header__course {
1844      border-radius: 20px;
1845      box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.0509803922);
1846      height: 155px;
1847      outline: solid 2px transparent;
1848      width: 100%;
1849    }
1850    .header__course:hover .header__course-image img {
1851      scale: 1.2;
1852    }
1853    .header__course:hover span {
1854      background-color: #cfff32;
1855      color: black;
1856    }
1857    .header__course:hover {
1858      outline-color: #cfff32;
1859    }
1860    .header:not(:has(.green-arrow:hover, .green-arrow:active)) .header__course:active span {
1861      background-color: #e1ff80;
1862    }
1863    .header:not(:has(.green-arrow:hover, .green-arrow:active)) .header__course:active {
1864      outline-color: #e1ff80;
1865    }
1866    .header__course:hover .green-arrow {
1867      background-color: black;
1868      box-shadow: none;
1869    }
1870    .header__course:hover .green-arrow img {
1871      filter: invert(1);
1872    }
1873    .header__course-cta {
1874      position: absolute;
1875      bottom: 10px;
1876      right: 10px;
1877      cursor: pointer;
1878      width: 32px;
1879      z-index: 3;
1880    }
1881    .header__course-image {
1882      width: 100%;
1883      height: 100%;
1884      display: flex;
1885      justify-content: center;
1886      overflow: hidden;
1887      border-radius: 20px;
1888    }
1889    .header__course-image img {
1890      min-height: 100%;
1891      min-width: 100%;
1892      object-fit: cover;
1893      object-position: center;
1894      transition: 0.7s;
1895    }
1896    .header__course-image::after {
1897      content: "";
1898      position: absolute;
1899      left: 0;
1900      bottom: 0;
1901      width: 100%;
1902      height: 30%;
1903      background: white;
1904      background-size: cover;
1905      filter: blur(36px);
1906      z-index: 1;
1907      pointer-events: none;
1908      opacity: 1;
1909    }
1910    .header__course-title {
1911      background-color: #f7f7f7;
1912      border-radius: 40px;
1913      color: rgba(0, 0, 0, 0.4);
1914      font-family: "Inter", sans-serif;
1915      font-weight: 600;
1916      left: 10px;
1917      position: absolute;
1918      top: 0;
1919      transform: translateY(-50%);
1920      width: fit-content;
1921      z-index: 1;
1922      font-size: 15px;
1923      box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.0705882353);
1924    }
1925    @media (max-width: 1440px) {
1926      .header__course-title {
1927        font-size: 15px;
1928      }
1929    }
1930    @media (max-width: 1024px) {
1931      .header__course-title {
1932        font-size: 13px;
1933      }
1934    }
1935    @media (max-width: 375px) {
1936      .header__course-title {
1937        font-size: 13px;
1938      }
1939    }
1940    .header__course-title span {
1941      border-radius: inherit;
1942      display: block;
1943      font-family: "Inter", sans-serif;
1944      font-size: 13px;
1945      font-weight: 600;
1946      height: 100%;
1947      letter-spacing: -0.02em;
1948      padding: 4px 12px;
1949      transition: 0.25s;
1950      width: 100%;
1951    }
1952    
1953    .scroll {
1954      max-width: 1100px;
1955    }
1956    
1957    .burger {
1958      padding-inline: 8px;
1959      aspect-ratio: 1;
1960      display: flex;
1961      align-items: center;
1962      justify-content: center;
1963      flex-direction: column;
1964    }
1965    .burger label {
1966      display: flex;
1967      align-items: center;
1968      justify-content: center;
1969      flex-direction: column;
1970      gap: 2px;
1971      position: relative;
1972    }
1973    .burger input {
1974      display: none;
1975    }
1976    .burger span {
1977      display: block;
1978      width: 8px;
1979      height: 1px;
1980      background: #000000;
1981      border-radius: 2px;
1982      transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
1983    }
1984    .burger.active span:nth-child(1) {
1985      position: absolute;
1986      transform: rotate(45deg);
1987    }
1988    .burger.active span:nth-child(2) {
1989      opacity: 0;
1990      transform: translateX(-10px);
1991    }
1992    .burger.active span:nth-child(3) {
1993      position: absolute;
1994      transform: rotate(-45deg);
1995    }
1996    
1997    .header__mobile {
1998      z-index: 1;
1999      position: relative;
2000      padding-bottom: 20px;
2001    }
2002    @media (min-width: 990px) {
2003      .header__mobile {
2004        display: none !important;
2005      }
2006    }
2007    .header__mobile-content {
2008      margin-block: 20px;
2009      padding: 20px;
2010      border-radius: 20px;
2011      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725);
2012      overflow: hidden;
2013      position: relative;
2014    }
2015    .header__mobile-links {
2016      gap: 20px;
2017      flex: 1;
2018      padding-bottom: 30px;
2019      border-bottom: 1px solid rgba(128, 128, 128, 0.3);
2020    }
2021    .header__mobile-link {
2022      cursor: pointer;
2023      box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0509803922);
2024    }
2025    .header__mobile-link.side-media {
2026      padding: 5px;
2027      justify-content: space-between;
2028      background-color: rgba(255, 255, 255, 0.1490196078);
2029    }
2030    .header__mobile-link .side-media__img {
2031      width: 32px;
2032      height: 32px;
2033    }
2034    .header__mobile-link .side-media__text {
2035      color: rgba(0, 0, 0, 0.8);
2036      font-family: "Inter";
2037      font-weight: 500;
2038      padding-inline: 15px;
2039      letter-spacing: -0.04em;
2040      font-size: 14px;
2041    }
2042    .header__mobile-link_green.side-media {
2043      background-color: #cfff32;
2044    }
2045    .header__mobile-link_green .side-media__img {
2046      background-color: #000000;
2047    }
2048    .header__mobile-mini-link {
2049      margin-top: -10px;
2050      align-self: flex-start;
2051      background-color: rgba(255, 255, 255, 0.4);
2052      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.0509803922);
2053      padding: 7px 15px;
2054      border-radius: 64px;
2055      color: rgba(0, 0, 0, 0.5019607843);
2056      font-family: "Inter";
2057      line-height: 130%;
2058      font-size: 14px;
2059      letter-spacing: -0.01em;
2060    }
2061    .header__mobile-mini-link.first {
2062      margin-top: auto;
2063    }
2064    .header__mobile-foot {
2065      padding-top: 30px;
2066      gap: 30px;
2067      align-items: flex-start;
2068    }
2069    .header__mobile-foot-section {
2070      align-items: flex-start;
2071      gap: 30px;
2072    }
2073    .header__mobile-foot-section.social {
2074      gap: 20px;
2075      width: 100%;
2076    }
2077    .header__mobile-foot-title {
2078      font-size: 16px;
2079      line-height: 110%;
2080      font-family: "GNF";
2081      color: rgba(0, 0, 0, 0.4);
2082      text-transform: uppercase;
2083    }
2084    .header__mobile-foot-links {
2085      flex: 1;
2086      gap: 10px;
2087    }
2088    .header__mobile-foot-links.social {
2089      justify-content: space-evenly;
2090      gap: 8px;
2091    }
2092    .header__mobile-foot-links .green-arrow {
2093      background-color: rgba(255, 255, 255, 0.1490196078);
2094    }
2095    .header__mobile-curses {
2096      position: absolute;
2097      inset: -1px;
2098      background-color: #f7f7f7;
2099      padding: inherit;
2100      align-items: flex-start;
2101      gap: 40px;
2102      padding-right: 0;
2103    }
2104    .header__mobile-back.green-arrow {
2105      width: 32px;
2106    }
2107    .header__mobile-course {
2108      gap: 25px;
2109      max-width: 100%;
2110    }
2111    .header__mobile-course-head {
2112      gap: 6px;
2113      align-items: stretch;
2114    }
2115    .header__mobile-course-head .side-media {
2116      background-color: #fafafa;
2117    }
2118    .header__mobile-course-content {
2119      gap: 10px;
2120      padding-bottom: 10px;
2121      overflow-x: scroll;
2122      overflow-y: hidden;
2123      max-width: 100%;
2124    }
2125    .header__mobile-course-count {
2126      font-family: "Inter";
2127      font-size: 13px;
2128      display: flex;
2129      align-items: center;
2130      justify-content: center;
2131      color: rgba(0, 0, 0, 0.4);
2132      border-radius: 40px;
2133      background-color: #fafafa;
2134      line-height: 130%;
2135      font-weight: 600;
2136      padding-inline: 12px;
2137      box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.0705882353);
2138    }
2139    .header__mobile-course-card {
2140      gap: 15px;
2141      align-items: center;
2142    }
2143    .header__mobile-course-image {
2144      border-radius: 20px;
2145      overflow: hidden;
2146      max-width: 142px;
2147      aspect-ratio: 1;
2148    }
2149    .header__mobile-course-title {
2150      font-weight: 600;
2151      font-size: 12px;
2152      font-family: "Inter";
2153      line-height: 75%;
2154    }
2155    
2156    @media (width < 800px) {
2157      .header {
2158        left: 0;
2159        max-width: 100dvw !important;
2160        transform: none !important;
2161      }
2162    }
2163    .div-blur {
2164      background-color: color-mix(in srgb, black 25%, transparent);
2165      backdrop-filter: blur(5px);
2166      height: 100%;
2167      left: 0;
2168      pointer-events: none;
2169      position: absolute;
2170      top: 0;
2171      width: 100%;
2172      z-index: 2;
2173      transition: 1s;
2174    }
2175    
2176    @media (width >= 1140px) {
2177      .hero:not(:has(#hero__dot:hover)) .div-blur {
2178        background-color: color-mix(in srgb, black 0%, transparent);
2179        backdrop-filter: blur(0px);
2180      }
2181    }
2182    @media (width < 1140px) and (width > 950px) {
2183      .hero:not(:has(#hero__dot:hover)) .div-blur {
2184        background-color: color-mix(in srgb, black 0%, transparent);
2185        backdrop-filter: blur(0px);
2186      }
2187    }
2188    @media (width <= 950px) {
2189      .hero:not(:has(#hero__dot.active)) .div-blur {
2190        background-color: color-mix(in srgb, black 0%, transparent);
2191        backdrop-filter: blur(0px);
2192      }
2193    }
2194    @keyframes slideUpDownHeroAfter {
2195      0% {
2196        bottom: clamp(50px, 50px + (80 - 50) * (100dvw - 375px) / (1440 - 375), 80px);
2197        /*bottom: 20px;*/
2198      }
2199      100% {
2200        bottom: clamp(55px, 55px + (85 - 55) * (100dvw - 375px) / (1440 - 375), 85px);
2201        /*bottom: 28px;*/
2202      }
2203    }
2204    .hero {
2205      height: 100lvh;
2206      width: 100%;
2207      background-color: #e4e4e4;
2208      position: sticky;
2209      top: 0px;
2210      left: 0px;
2211      z-index: 0;
2212      overflow: hidden;
2213      transition: 0.5s opacity;
2214      padding-block-end: clamp(60px, 60px + (120 - 60) * (100dvw - 375px) / (1440 - 375), 120px);
2215    }
2216    .hero .hero__content {
2217      margin-block-end: clamp(-120px, -60px + (-120 - -60) * (100dvw - 375px) / (1440 - 375), -60px);
2218    }
2219    .hero__dot {
2220      color: black;
2221    }
2222    .hero.--is-hidden {
2223      opacity: 0;
2224    }
2225    @media (max-width: 1140px) {
2226      .hero {
2227        height: auto;
2228        position: relative;
2229        background-color: #e8e8e8;
2230      }
2231    }
2232    .hero:after {
2233      animation: slideUpDownHeroAfter 1.5s ease-in-out infinite alternate;
2234      background-color: white;
2235      border-radius: 100px;
2236      box-shadow: 0 2px 12px color-mix(in srgb, black 25%, transparent);
2237      content: "";
2238      height: 5px;
2239      left: 50%;
2240      position: absolute;
2241      translate: -50%;
2242      width: 100px;
2243      z-index: 1;
2244    }
2245    .hero::before {
2246      display: none;
2247    }
2248    @media (max-width: 1140px) {
2249      .hero {
2250        flex-direction: column !important;
2251      }
2252    }
2253    .hero__read-more {
2254      pointer-events: none;
2255      position: absolute;
2256      transition: 1s;
2257      z-index: 5;
2258    }
2259    @media (width >= 1140px) {
2260      .hero__read-more {
2261        left: calc(100% + 25px);
2262        top: 0;
2263      }
2264      .hero__top-one:not(:has(#hero__dot:hover)) .hero__read-more {
2265        opacity: 0;
2266        translate: -50px;
2267      }
2268    }
2269    @media (width < 1140px) and (width > 950px) {
2270      .hero__read-more {
2271        left: 50%;
2272        top: calc(100% + 30px);
2273        translate: -50%;
2274      }
2275      .hero__top-one:not(:has(#hero__dot:hover)) .hero__read-more {
2276        opacity: 0;
2277        translate: -50% -50px;
2278      }
2279    }
2280    @media (width <= 950px) {
2281      .hero__read-more {
2282        left: 50%;
2283        top: calc(100% + 20px);
2284        translate: -50%;
2285      }
2286      .hero__top-one:not(:has(#hero__dot.active)) .hero__read-more {
2287        opacity: 0;
2288        translate: -50% -50px;
2289      }
2290    }
2291    @media (width <= 720px) {
2292      .hero__read-more {
2293        scale: 0.8;
2294        transform-origin: top;
2295      }
2296    }
2297    @media (width <= 570px) {
2298      .hero__read-more {
2299        scale: 0.55;
2300      }
2301    }
2302    @media (width <= 500px) {
2303      .hero .hero__top-one span {
2304        display: flex;
2305        flex-direction: column;
2306        margin-inline-start: 4px;
2307      }
2308    }
2309    .hero__card {
2310      align-items: flex-start;
2311      background-color: rgba(255, 255, 255, 0.4);
2312      border-radius: 26px;
2313      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725);
2314      justify-content: flex-start;
2315      padding: 15px 40px 20px 20px;
2316      transition: 1s;
2317      width: 100%;
2318      transition-delay: 0.5s;
2319      transition-property: opacity, translation;
2320    }
2321    @media (max-width: 1140px) {
2322      .hero__card {
2323        align-items: center;
2324        box-shadow: none;
2325        flex: 1;
2326        padding-bottom: 50px;
2327      }
2328      .hero__card::before {
2329        display: none;
2330      }
2331    }
2332    @media (width <= 585px) {
2333      .hero__card {
2334        background-color: transparent;
2335      }
2336    }
2337    .hero__content {
2338      flex: 1;
2339      position: relative;
2340    }
2341    .hero__content:after {
2342      backdrop-filter: blur(10px);
2343      bottom: 0;
2344      content: "";
2345      display: block;
2346      height: 100px;
2347      position: absolute;
2348      width: 100%;
2349      z-index: 1;
2350      mask-image: linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0));
2351    }
2352    .hero__disc {
2353      font-family: "Inter";
2354      font-size: clamp(14px, 14px + (15 - 14) * (100dvw - 375px) / (1440 - 375), 15px);
2355      font-weight: 600;
2356      letter-spacing: -0.02em;
2357      line-height: 135%;
2358      margin-top: clamp(60px, 60px + (180 - 60) * (100dvw - 375px) / (1440 - 375), 180px);
2359      text-wrap: balance;
2360    }
2361    .hero__disc span {
2362      color: rgba(0, 0, 0, 0.5019607843);
2363      font-weight: 500;
2364    }
2365    @media (max-width: 1140px) {
2366      .hero__disc {
2367        text-align: center;
2368      }
2369    }
2370    .hero__dots {
2371      border-radius: 64px;
2372      box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0784313725);
2373      cursor: pointer;
2374      font-size: 16px;
2375      font-weight: 600;
2376      margin-left: 24px;
2377      padding: 3px 10px 8px 10px;
2378      transition: all 0.3s linear;
2379    }
2380    @media (width < 950px) {
2381      .hero__dots.active {
2382        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.08), inset 0 -3px 15px 0 rgba(255, 255, 255, 0.3), inset 0 3px 15px 0 rgba(255, 255, 255, 0.3), inset 2px 0 15px 0 rgba(255, 255, 255, 0.5), inset -2px 0 15px 0 rgba(255, 255, 255, 0.5);
2383        background: #cfff32;
2384      }
2385    }
2386    @media (hover: hover) and (pointer: fine) {
2387      .hero__dots:hover {
2388        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.08), inset 0 -3px 15px 0 rgba(255, 255, 255, 0.3), inset 0 3px 15px 0 rgba(255, 255, 255, 0.3), inset 2px 0 15px 0 rgba(255, 255, 255, 0.5), inset -2px 0 15px 0 rgba(255, 255, 255, 0.5);
2389        background: #cfff32;
2390      }
2391    }
2392    .hero__fence {
2393      height: 100%;
2394      margin-left: 240px;
2395      position: relative;
2396      box-shadow: 10px 4px 55px 0px rgba(0, 0, 0, 0.0705882353);
2397      background: repeating-linear-gradient(to right, #d9d9d9 0px, #f1f1f1 18px);
2398      backdrop-filter: blur(35px);
2399    }
2400    @media (max-width: 1440px) {
2401      .hero__fence {
2402        margin-left: 212px;
2403      }
2404    }
2405    @media (max-width: 1140px) {
2406      .hero__fence {
2407        margin-left: 0;
2408        position: absolute;
2409        inset: 0;
2410        box-shadow: 0px -20px 55px 0px rgba(0, 0, 0, 0.0705882353);
2411      }
2412    }
2413    @media (max-width: 500px) {
2414      .hero__fence {
2415        box-shadow: none;
2416      }
2417    }
2418    .hero__free {
2419      background-color: #cfff32;
2420      padding: 8px 20px;
2421      font-family: "Loos Extended";
2422      font-weight: 500;
2423      line-height: 115%;
2424      border-radius: 60px;
2425      margin-top: 10px;
2426      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1490196078), 0px 0px 24px 0px rgba(207, 255, 50, 0.4);
2427      letter-spacing: -0.7px;
2428      font-size: 38px;
2429    }
2430    @media (max-width: 1440px) {
2431      .hero__free {
2432        font-size: 38px;
2433      }
2434    }
2435    @media (max-width: 1024px) {
2436      .hero__free {
2437        font-size: 34px;
2438      }
2439    }
2440    @media (max-width: 375px) {
2441      .hero__free {
2442        font-size: 34px;
2443      }
2444    }
2445    .hero__cta {
2446      z-index: 1;
2447      cursor: pointer;
2448      transition: 1s;
2449      transition-delay: 1.5s;
2450      transition-property: opacity, translation;
2451    }
2452    @media (hover: hover) and (pointer: fine) {
2453      .hero__cta:hover .side-media {
2454        box-shadow: 0px 0px 24px 0px rgba(207, 255, 50, 0.6980392157), 0px -5px 14px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 5px 14px 0px rgba(255, 255, 255, 0.3019607843) inset, 4px 0px 30px 0px rgba(255, 255, 255, 0.5019607843) inset, -4px 0px 30px 0px rgba(255, 255, 255, 0.5019607843) inset, 0px 2px 10px 0px rgba(0, 0, 0, 0.0509803922);
2455      }
2456      .hero__cta:hover .side-media__img {
2457        background-color: #ffffff;
2458        box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1019607843), 0px 1px 3px 0px rgba(0, 0, 0, 0.1019607843);
2459      }
2460      .hero__cta:hover .side-media__img img {
2461        filter: invert(0) !important;
2462      }
2463    }
2464    .hero__cta:active .side-media__text {
2465      color: rgba(0, 0, 0, 0.4);
2466    }
2467    .hero__cta:active .side-media {
2468      box-shadow: none;
2469    }
2470    @media (min-width: 1440px) {
2471      .hero__cta {
2472        padding-top: 40px;
2473      }
2474    }
2475    .hero__cta .side-media {
2476      background-color: #cfff32;
2477      padding-block: 17px;
2478      padding-left: 24px;
2479      padding-right: 17px;
2480      gap: 24px;
2481    }
2482    .hero__cta .side-media__text {
2483      color: #000000;
2484      font-weight: 400;
2485      font-size: 18px;
2486      font-family: "GNF";
2487      text-wrap: nowrap;
2488      padding: 0;
2489      text-transform: uppercase;
2490    }
2491    .hero__cta .side-media__img {
2492      background-color: #000000;
2493      min-height: 26px;
2494      min-width: 26px;
2495    }
2496    .hero__cta .side-media__img img {
2497      aspect-ratio: 1;
2498    }
2499    @media (max-width: 1140px) {
2500      .hero__cta {
2501        position: absolute;
2502        bottom: 0;
2503        left: 50%;
2504        translate: -50% 50%;
2505      }
2506    }
2507    @media (max-width: 500px) {
2508      .hero__cta::after {
2509        content: "";
2510        position: absolute;
2511        width: 100vw;
2512        height: 200%;
2513        background: linear-gradient(180deg, #e8e8e8 0%, rgba(232, 232, 232, 0) 100%);
2514        top: 50%;
2515        left: 50%;
2516        z-index: -1;
2517        translate: -50%;
2518      }
2519    }
2520    .hero__running-line {
2521      transition: 1s;
2522      transition-delay: 1s;
2523      transition-property: opacity, translation;
2524      background-color: #cfff32;
2525      border-radius: 50px;
2526      font-size: 16px;
2527      overflow: hidden;
2528      padding-block: 12px;
2529      padding-inline: 3px;
2530      text-wrap: nowrap;
2531      min-height: 40.5px;
2532      width: 100%;
2533      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px -5px 14px 0px rgba(255, 255, 255, 0.8980392157) inset, 0px 5px 14px 0px rgba(255, 255, 255, 0.8980392157) inset, 4px 0px 30px 0px rgba(255, 255, 255, 0.8) inset, -4px 0px 30px 0px rgba(255, 255, 255, 0.8) inset;
2534    }
2535    @media (max-width: 1140px) {
2536      .hero__running-line {
2537        display: none;
2538      }
2539    }
2540    .hero__running-line span {
2541      animation: marquee 10s linear infinite;
2542      color: rgba(0, 0, 0, 0.5019607843);
2543      display: inline-block;
2544      font-family: "GNF";
2545      font-weight: 400;
2546      padding-right: 6px;
2547      text-transform: uppercase;
2548    }
2549    .hero__slider {
2550      position: absolute;
2551      overflow: hidden;
2552      inset: 0;
2553      top: auto;
2554      height: fit-content;
2555      display: flex;
2556      flex-direction: column;
2557      align-items: center;
2558      justify-content: flex-end;
2559    }
2560    @media (max-width: 1140px) {
2561      .hero__slider {
2562        position: relative;
2563      }
2564    }
2565    .hero__slider-wrapper {
2566      position: relative;
2567      max-width: 100%;
2568      height: auto !important;
2569      align-items: flex-end;
2570    }
2571    .hero__pagination {
2572      display: flex;
2573      width: 388px !important;
2574      gap: 10px;
2575      align-items: flex-start;
2576      justify-content: center;
2577      max-width: calc(100dvw - 30px);
2578    }
2579    .hero__pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
2580      top: 164px;
2581      left: 50%;
2582      transform: translateX(-50%);
2583    }
2584    @media (width >= 1700px) {
2585      .hero__pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
2586        transform: translateX(-50%) translateY(50px) !important;
2587      }
2588    }
2589    @media (width <= 585px) {
2590      .hero__pagination {
2591        margin: 0;
2592      }
2593    }
2594    @media (max-width: 1140px) {
2595      .hero__pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
2596        top: 70px;
2597      }
2598    }
2599    .hero__slide {
2600      height: auto !important;
2601    }
2602    .hero__slide-light {
2603      position: absolute;
2604      bottom: 0;
2605      transform: translate(-40%, 35%);
2606      width: 100%;
2607      left: 50%;
2608      aspect-ratio: 1;
2609      background-repeat: no-repeat;
2610      background-size: contain;
2611      background-position: center;
2612      z-index: -1;
2613      background-image: url("data:image/svg+xml,%3csvg%20width='1152'%20height='653'%20viewBox='0%200%201152%20653'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_f_5101_47359)'%3e%3cellipse%20cx='586'%20cy='567.5'%20rx='446'%20ry='427.5'%20fill='%23D8FF5A'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_f_5101_47359'%20x='0'%20y='0'%20width='1172'%20height='1135'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='70'%20result='effect1_foregroundBlur_5101_47359'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e");
2614    }
2615    .hero__icon {
2616      aspect-ratio: 1;
2617      position: absolute;
2618      z-index: 50;
2619    }
2620    .hero__icon img {
2621      max-width: 100%;
2622      max-height: 100%;
2623      object-fit: contain;
2624      object-position: center;
2625    }
2626    @media (max-width: 1440px) {
2627      .hero__icon {
2628        max-width: 115px;
2629      }
2630    }
2631    @media (max-width: 1024px) {
2632      .hero__icon {
2633        max-width: 90px;
2634      }
2635    }
2636    .hero__icon img {
2637      pointer-events: none;
2638    }
2639    .hero__icon--blander {
2640      top: 26%;
2641      left: 35%;
2642    }
2643    @media (max-width: 1440px) {
2644      .hero__icon--blander {
2645        top: 15%;
2646        left: 15%;
2647      }
2648    }
2649    .hero__icon--circle {
2650      top: 51%;
2651      right: 9%;
2652    }
2653    @media (max-width: 1440px) {
2654      .hero__icon--circle {
2655        top: 15%;
2656        right: 12%;
2657      }
2658    }
2659    .hero__icon--ps {
2660      bottom: 42%;
2661      left: 37%;
2662    }
2663    @media (max-width: 1440px) {
2664      .hero__icon--ps {
2665        bottom: 42%;
2666        left: 12%;
2667      }
2668    }
2669    .hero__icon--ai {
2670      top: 50%;
2671      right: 11%;
2672    }
2673    @media (max-width: 1440px) {
2674      .hero__icon--ai {
2675        top: 20%;
2676        right: 25%;
2677      }
2678    }
2679    .hero__icon--figma {
2680      bottom: 52%;
2681      left: 28%;
2682    }
2683    @media (max-width: 1440px) {
2684      .hero__icon--figma {
2685        bottom: 52%;
2686        left: 12%;
2687      }
2688    }
2689    .hero__icon--t {
2690      top: 56%;
2691      left: 70%;
2692    }
2693    @media (max-width: 1440px) {
2694      .hero__icon--t {
2695        top: 56%;
2696        left: 64%;
2697      }
2698    }
2699    .hero__icon--arrow {
2700      bottom: 67%;
2701      right: 3%;
2702    }
2703    @media (max-width: 1440px) {
2704      .hero__icon--arrow {
2705        bottom: 78%;
2706        right: 23%;
2707      }
2708    }
2709    .hero__icon--wb {
2710      top: 31%;
2711      right: 58%;
2712    }
2713    @media (max-width: 1440px) {
2714      .hero__icon--wb {
2715        top: 40%;
2716        right: 73%;
2717      }
2718    }
2719    .hero__icon--ozon {
2720      bottom: 51%;
2721      left: 82%;
2722    }
2723    @media (max-width: 1440px) {
2724      .hero__icon--ozon {
2725        bottom: 51%;
2726        left: 74%;
2727      }
2728    }
2729    .hero__icon--gpt {
2730      top: 24%;
2731      left: 31%;
2732    }
2733    @media (max-width: 1440px) {
2734      .hero__icon--gpt {
2735        top: 40%;
2736        left: 7%;
2737      }
2738    }
2739    .hero__icon--r {
2740      bottom: 18%;
2741      right: 19%;
2742    }
2743    .hero__icon--ship {
2744      top: 16%;
2745      left: 79%;
2746    }
2747    .hero__icon:nth-child(1) {
2748      animation-timing-function: cubic-bezier(0.54, 0.19, 0.33, 0.9);
2749    }
2750    .hero__icon:nth-child(2) {
2751      animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
2752    }
2753    .hero__icon:nth-child(3) {
2754      animation-timing-function: ease-in-out;
2755    }
2756    .hero__icon:nth-child(1) {
2757      animation-delay: 0s;
2758    }
2759    .hero__icon:nth-child(2) {
2760      animation-delay: 0.3s;
2761    }
2762    .hero__icon:nth-child(3) {
2763      animation-delay: 0.7s;
2764    }
2765    .hero__icon:nth-child(4) {
2766      animation-delay: 1.1s;
2767    }
2768    .hero__start {
2769      font-family: "Loos Extended";
2770      font-weight: 500;
2771      font-size: 40px;
2772      line-height: 114.6%;
2773      letter-spacing: -0.6px;
2774    }
2775    @media (max-width: 1440px) {
2776      .hero__start {
2777        font-size: 38px;
2778      }
2779    }
2780    @media (max-width: 1024px) {
2781      .hero__start {
2782        font-size: 34px;
2783      }
2784    }
2785    @media (max-width: 375px) {
2786      .hero__start {
2787        font-size: 34px;
2788      }
2789    }
2790    .hero__start b {
2791      color: rgba(0, 0, 0, 0.2509803922);
2792    }
2793    @media (max-width: 1140px) {
2794      .hero__start {
2795        text-align: center;
2796      }
2797    }
2798    .hero__top-one {
2799      background-color: rgba(255, 255, 255, 0.4);
2800      border-radius: 20px;
2801      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725);
2802      position: relative;
2803      transition: 1s;
2804      z-index: 100;
2805      width: 100%;
2806      transition-property: opacity, translation;
2807      align-items: center;
2808      padding: 7px;
2809    }
2810    .hero__top-one img {
2811      padding-right: 3px;
2812      max-height: 100%;
2813      object-fit: contain;
2814      object-position: center;
2815    }
2816    .hero__top-one span {
2817      font-family: "Inter";
2818      font-weight: 600;
2819      text-wrap: nowrap;
2820      color: black;
2821      font-size: 16px;
2822      line-height: 135%;
2823      flex: 1;
2824    }
2825    @media (max-width: 1440px) {
2826      .hero__top-one span {
2827        font-size: 15px;
2828      }
2829    }
2830    @media (max-width: 1024px) {
2831      .hero__top-one span {
2832        font-size: 12px;
2833      }
2834    }
2835    @media (max-width: 375px) {
2836      .hero__top-one span {
2837        font-size: 12px;
2838      }
2839    }
2840    .hero__top-one span b {
2841      color: rgba(0, 0, 0, 0.5019607843);
2842    }
2843    .hero__text {
2844      align-items: flex-start;
2845      justify-content: center;
2846      width: fit-content !important;
2847      position: relative;
2848      max-width: 550px;
2849      padding-right: 0 !important;
2850      box-sizing: content-box;
2851      gap: 10px;
2852      padding-top: 20px;
2853    }
2854    @media (max-width: 1440px) {
2855      .hero__text {
2856        padding-top: 112px;
2857        margin-block-end: 25px;
2858      }
2859    }
2860    @media (max-width: 1024px) {
2861      .hero__text {
2862        padding-top: 102px !important;
2863        align-items: center;
2864      }
2865    }
2866    @media (max-width: 1140px) {
2867      .hero__text {
2868        align-items: center;
2869        flex: 1;
2870      }
2871    }
2872    @media (width <= 585px) {
2873      .hero__text {
2874        max-width: calc(100dvw - 40px);
2875        margin-inline: 0;
2876        padding-inline: 0 !important;
2877      }
2878    }
2879    
2880    @keyframes marquee {
2881      0% {
2882        transform: translateX(0);
2883      }
2884      100% {
2885        transform: translateX(-100%);
2886      }
2887    }
2888    @keyframes icon {
2889      0% {
2890        transform: translateY(0);
2891      }
2892      50% {
2893        transform: translateY(20%);
2894      }
2895      100% {
2896        transform: translateY(0);
2897      }
2898    }
2899    .hero-slide {
2900      max-width: 100%;
2901      display: flex !important;
2902      align-items: flex-end;
2903      justify-content: flex-end;
2904      position: relative;
2905    }
2906    .hero-slide__image {
2907      display: flex;
2908      transform-origin: bottom right;
2909      width: 100%;
2910      transition: 1s;
2911      transition-delay: 0.25s;
2912      transition-property: opacity;
2913    }
2914    .hero-slide__image img {
2915      width: 100%;
2916      object-fit: contain;
2917      object-position: center;
2918    }
2919    @media (width >= 1700px) {
2920      .hero-slide__image {
2921        scale: 0.9;
2922      }
2923    }
2924    
2925    .hero__bullet {
2926      align-items: center;
2927      border-radius: 50%;
2928      cursor: pointer;
2929      display: flex;
2930      height: 38px;
2931      justify-content: center;
2932      pointer-events: none;
2933      position: relative;
2934      transition: all 0.3s ease;
2935      width: fit-content;
2936    }
2937    .hero__bullet .side-media__img {
2938      aspect-ratio: 1/1;
2939      height: 100%;
2940      width: auto;
2941      background-color: transparent;
2942    }
2943    .hero__bullet:not(.hero__bullet--active) .side-media__text {
2944      width: 0;
2945      padding-inline: 0;
2946    }
2947    .hero__bullet:not(.hero__bullet--active) .side-media__img {
2948      box-shadow: none;
2949    }
2950    .hero__bullet .side-media__text {
2951      padding: 0;
2952      overflow: hidden;
2953      margin-inline: auto;
2954      text-wrap: nowrap;
2955      padding-inline: 10px 15px;
2956      font-size: 14px;
2957      letter-spacing: -0.02em;
2958    }
2959    .hero__bullet .side-media__text::before {
2960      display: none;
2961    }
2962    .hero__bullet:hover {
2963      background: rgba(255, 255, 255, 0.4);
2964    }
2965    
2966    .hero__bullet--active {
2967      border-color: white;
2968      z-index: 2;
2969      /*flex: 1;*/
2970    }
2971    .hero__bullet--active .side-media__img {
2972      background-color: rgba(255, 255, 255, 0.4);
2973    }
2974    .hero__bullet--active .side-media__img::before {
2975      display: block;
2976    }
2977    
2978    .swiper-pagination-bullet:not(.hero__bullet--active):nth-child(1), .swiper-pagination-bullet:not(.hero__bullet--active):nth-child(2) {
2979      order: -1;
2980    }
2981    .swiper-pagination-bullet:not(.hero__bullet--active):nth-child(4), .swiper-pagination-bullet:not(.hero__bullet--active):nth-child(5) {
2982      order: 1;
2983    }
2984    
2985    @keyframes slideUpDownStartWithBasics {
2986      0% {
2987        bottom: 0;
2988      }
2989      100% {
2990        bottom: 10px;
2991      }
2992    }
2993    .course-card__image {
2994      overflow: hidden;
2995    }
2996    
2997    .course-card__image img {
2998      transition: 0.7s;
2999    }
3000    
3001    .course-card:hover .course-card__image img {
3002      scale: 1.05;
3003    }
3004    
3005    .start-with-the-basics .div-gradient-blur {
3006      position: absolute;
3007      z-index: 1;
3008      inset: auto 0 0 0;
3009      height: 66px;
3010      pointer-events: none;
3011    }
3012    .start-with-the-basics .div-gradient-blur div, .start-with-the-basics .div-gradient-blur::before, .start-with-the-basics .div-gradient-blur::after {
3013      position: absolute;
3014      inset: 0;
3015    }
3016    .start-with-the-basics .div-gradient-blur::before {
3017      content: "";
3018      z-index: 1;
3019      backdrop-filter: blur(0.5px);
3020      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%);
3021    }
3022    .start-with-the-basics .div-gradient-blur div:nth-of-type(1) {
3023      z-index: 2;
3024      backdrop-filter: blur(1px);
3025      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgba(0, 0, 0, 0) 50%);
3026    }
3027    .start-with-the-basics .div-gradient-blur div:nth-of-type(2) {
3028      z-index: 3;
3029      backdrop-filter: blur(2px);
3030      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%);
3031    }
3032    .start-with-the-basics .div-gradient-blur div:nth-of-type(3) {
3033      z-index: 4;
3034      backdrop-filter: blur(4px);
3035      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%);
3036    }
3037    .start-with-the-basics .div-gradient-blur div:nth-of-type(4) {
3038      z-index: 5;
3039      backdrop-filter: blur(8px);
3040      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%);
3041    }
3042    .start-with-the-basics .div-gradient-blur div:nth-of-type(5) {
3043      z-index: 6;
3044      backdrop-filter: blur(16px);
3045      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
3046    }
3047    .start-with-the-basics .div-gradient-blur div:nth-of-type(6) {
3048      z-index: 7;
3049      backdrop-filter: blur(32px);
3050      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
3051    }
3052    .start-with-the-basics .div-gradient-blur::after {
3053      content: "";
3054      z-index: 8;
3055      backdrop-filter: blur(64px);
3056      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
3057    }
3058    
3059    .start-with-the-basics {
3060      background-color: #f2f2f2;
3061      align-items: center;
3062      box-shadow: 0px -10px 50px 0px rgba(0, 0, 0, 0.0588235294);
3063      display: flex;
3064      flex-direction: column;
3065      padding-top: 150px;
3066      position: relative;
3067      margin-block-start: calc(-1 * clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px));
3068      border-radius: clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px) clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px) 0 0;
3069    }
3070    .start-with-the-basics .swiper {
3071      overflow: visible;
3072    }
3073    .start-with-the-basics__interlayer {
3074      pointer-events: none;
3075    }
3076    @media (max-width: 1024px) {
3077      .start-with-the-basics {
3078        background-color: #f2f2f2;
3079      }
3080    }
3081    @media (max-width: 1440px) {
3082      .start-with-the-basics {
3083        padding-top: 120px;
3084      }
3085    }
3086    @media (max-width: 1024px) {
3087      .start-with-the-basics {
3088        padding-top: 150px;
3089      }
3090    }
3091    @media (max-width: 375px) {
3092      .start-with-the-basics {
3093        padding-top: 120px;
3094      }
3095    }
3096    .start-with-the-basics .img-arrow,
3097    .start-with-the-basics .img-arrow-hover {
3098      height: 26px;
3099      transition: 0.2s;
3100      width: 26px;
3101    }
3102    .start-with-the-basics .img-arrow-hover {
3103      position: absolute;
3104      right: 5px;
3105      transition: 0.2s;
3106      opacity: 0;
3107    }
3108    .start-with-the-basics__text {
3109      align-items: center;
3110      display: flex;
3111      flex-direction: column;
3112      gap: 14px;
3113      justify-content: start;
3114      letter-spacing: -0.02em;
3115      margin-bottom: 125px;
3116    }
3117    @media (max-width: 500px) {
3118      .start-with-the-basics__text {
3119        align-items: flex-start;
3120        margin-bottom: 100px;
3121      }
3122    }
3123    .start-with-the-basics__title {
3124      color: rgba(0, 0, 0, 0.25);
3125      font-family: "Loos Extended", sans-serif;
3126      font-size: clamp(26px, 26px + (34 - 26) * (100dvw - 375px) / (1440 - 375), 34px);
3127      font-weight: 500;
3128      letter-spacing: -0.01em;
3129      line-height: 114%;
3130      text-align: center;
3131    }
3132    @media (max-width: 500px) {
3133      .start-with-the-basics__title {
3134        text-align: left;
3135      }
3136    }
3137    .start-with-the-basics__title b {
3138      color: black;
3139    }
3140    .start-with-the-basics__description {
3141      color: rgba(0, 0, 0, 0.5);
3142      font-family: "Inter", sans-serif;
3143      font-size: clamp(14px, 14px + (18 - 14) * (100dvw - 375px) / (1440 - 375), 18px);
3144      font-weight: 500;
3145      letter-spacing: -0.02em;
3146      line-height: 135%;
3147      text-align: center;
3148    }
3149    @media (max-width: 500px) {
3150      .start-with-the-basics__description {
3151        text-align: left;
3152      }
3153    }
3154    .start-with-the-basics__cards {
3155      width: 100%;
3156      display: flex;
3157      flex-direction: column;
3158      align-items: center;
3159      position: relative;
3160      border-radius: 30px;
3161      padding-bottom: 60px;
3162    }
3163    .start-with-the-basics__cards::before {
3164      display: none;
3165    }
3166    .start-with-the-basics__cards .container {
3167      padding-top: 95px;
3168      padding-bottom: calc(90px + clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px));
3169    }
3170    @media (max-width: 500px) {
3171      .start-with-the-basics__cards .container {
3172        padding-top: 62px;
3173      }
3174    }
3175    .start-with-the-basics__cards::before {
3176      background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #f7f7f7 25%, #f7f7f7 75%, rgba(0, 0, 0, 0) 100%);
3177      border-radius: inherit;
3178      content: "";
3179      inset: 0;
3180      padding: 1px 1px 0px 1px;
3181      pointer-events: none;
3182      position: absolute;
3183      mask: conic-gradient(#000 0 0) content-box exclude, conic-gradient(#000 0 0);
3184    }
3185    @media (max-width: 500px) {
3186      .start-with-the-basics__cards::before {
3187        display: none;
3188      }
3189    }
3190    .start-with-the-basics__interlayer {
3191      bottom: 0px;
3192      transform: translateY(-50%);
3193      box-shadow: 0px 6px 25px 0px rgba(0, 0, 0, 0.1019607843);
3194      border-radius: 80px;
3195      z-index: 10;
3196      background-color: #f2f2f2;
3197      display: flex;
3198      align-items: center;
3199      padding: 5px;
3200      padding-right: 15px;
3201      gap: 108px;
3202      cursor: pointer;
3203      transition: all 0.3s linear 0s;
3204      overflow: hidden;
3205    }
3206    @media (max-width: 1440px) {
3207      .start-with-the-basics__interlayer {
3208        gap: 150px;
3209      }
3210    }
3211    @media (max-width: 728px) {
3212      .start-with-the-basics__interlayer {
3213        gap: 15px;
3214      }
3215    }
3216    .start-with-the-basics__interlayer-text {
3217      color: rgba(0, 0, 0, 0.5019607843);
3218      font-family: "GNF";
3219      font-weight: 400;
3220      font-size: 18px;
3221      transform-origin: left;
3222      transition: all 0.3s linear 0s;
3223      text-wrap: nowrap;
3224      text-transform: uppercase;
3225    }
3226    @media (max-width: 1440px) {
3227      .start-with-the-basics__interlayer-text {
3228        font-size: 16px;
3229      }
3230    }
3231    .start-with-the-basics__interlayer.observe-remove {
3232      gap: 0;
3233      padding-right: 5px;
3234    }
3235    .start-with-the-basics__interlayer.observe-remove > .start-with-the-basics__interlayer-text {
3236      width: 0;
3237      transform: translateX(-100%);
3238    }
3239    .start-with-the-basics__interlayer-icon {
3240      background-color: #CEFF2F;
3241      border-radius: 50%;
3242      display: flex;
3243      align-items: center;
3244      justify-content: center;
3245      aspect-ratio: 1;
3246      width: 36px;
3247    }
3248    @media (max-width: 1440px) {
3249      .start-with-the-basics__interlayer-icon {
3250        width: 32px;
3251      }
3252    }
3253    .start-with-the-basics__grid {
3254      display: grid;
3255      grid-template-columns: 534fr 49px 515fr 20px 515fr;
3256      grid-template-rows: auto auto;
3257      gap: 20px 0;
3258    }
3259    .start-with-the-basics__grid::before {
3260      content: "";
3261      grid-column: 2;
3262      grid-row: 1/span 2;
3263      width: 1px;
3264      background: #e0e0e0;
3265      margin: 0 24px;
3266      max-height: calc(100% - 80px);
3267      translate: 0 40px;
3268    }
3269    @media (width <= 1024px) {
3270      .start-with-the-basics__grid::before {
3271        display: block;
3272        margin: 0 !important;
3273        min-height: 1px;
3274      }
3275    }
3276    @media (max-width: 1024px) {
3277      .start-with-the-basics__grid {
3278        grid-template-columns: 1fr 1fr;
3279        grid-template-rows: auto 79px auto 10px auto;
3280        column-gap: 20px;
3281        row-gap: 0;
3282      }
3283      .start-with-the-basics__grid::before {
3284        grid-column: 1/3;
3285        grid-row: 2;
3286        width: 100%;
3287        height: 1px;
3288        margin: 39px 0;
3289      }
3290    }
3291    @media (width < 850px) {
3292      .start-with-the-basics__grid {
3293        display: none;
3294      }
3295    }
3296    .start-with-the-basics__card {
3297      width: 100%;
3298      height: 100%;
3299      display: flex;
3300      flex-direction: column;
3301      overflow: hidden;
3302    }
3303    .start-with-the-basics__card:nth-child(1) {
3304      grid-column: 1;
3305      grid-row: 1;
3306    }
3307    .start-with-the-basics__card:nth-child(2) {
3308      grid-column: 3;
3309      grid-row: 1;
3310    }
3311    .start-with-the-basics__card:nth-child(3) {
3312      grid-column: 5;
3313      grid-row: 1;
3314    }
3315    .start-with-the-basics__card:nth-child(4) {
3316      grid-column: 1;
3317      grid-row: 2;
3318    }
3319    .start-with-the-basics__card:nth-child(5) {
3320      grid-column: 3/span 3;
3321      grid-row: 2;
3322    }
3323    @media (max-width: 1024px) {
3324      .start-with-the-basics__card:nth-child(n) {
3325        grid-column: auto;
3326        grid-row: auto;
3327      }
3328    }
3329    .start-with-the-basics__card_big {
3330      padding: 0;
3331      flex-direction: row;
3332      align-items: stretch;
3333      justify-content: space-between;
3334    }
3335    @media (max-width: 1024px) {
3336      .start-with-the-basics__card_big {
3337        grid-column: 1/3 !important;
3338        grid-row: 5 !important;
3339      }
3340    }
3341    .start-with-the-basics__card_big .course-card__image {
3342      flex: 1;
3343      height: 100%;
3344    }
3345    .start-with-the-basics__card_big .course-card__image img {
3346      height: 100%;
3347      max-height: 515px;
3348      object-fit: contain;
3349      object-position: right;
3350    }
3351    .start-with-the-basics__card_big .course-card__left {
3352      padding: 24px;
3353      align-items: flex-start;
3354      justify-content: flex-end;
3355    }
3356    .start-with-the-basics__card_big .course-card__left .card-marker {
3357      margin-inline: 0;
3358      margin-bottom: auto;
3359      justify-self: start;
3360    }
3361    .start-with-the-basics__card_big .course-card__left .course-card__name {
3362      margin-bottom: 14px;
3363      padding: 0;
3364    }
3365    .start-with-the-basics__card_big .course-card__left .course-card__tags {
3366      margin-bottom: 30px;
3367      padding: 0;
3368    }
3369    .start-with-the-basics__card_big .course-card__left .side-media {
3370      background-color: #cfff32;
3371      gap: 15px;
3372      padding: 5px;
3373      padding-left: 15px;
3374    }
3375    .start-with-the-basics__card_big .course-card__left .side-media__img {
3376      background-color: #000000;
3377      min-height: 32px;
3378      min-width: 32px;
3379    }
3380    .start-with-the-basics__card_big .course-card__left .side-media__text {
3381      color: #000000;
3382      font-family: "Inter";
3383      font-size: 14px;
3384      font-weight: 500;
3385      letter-spacing: -0.02em;
3386      line-height: 130%;
3387      padding: 0;
3388    }
3389    .start-with-the-basics__card_big .course-card__left a {
3390      position: relative;
3391      bottom: auto;
3392      right: auto;
3393    }
3394    .start-with-the-basics__swiper .swiper-slide {
3395      display: flex;
3396    }
3397    .start-with-the-basics__swiper .swiper-slide a {
3398      position: relative;
3399      bottom: auto;
3400      right: auto;
3401    }
3402    
3403    @keyframes slideUpDownFromScratchToPro {
3404      0% {
3405        bottom: -5px;
3406      }
3407      100% {
3408        bottom: 5px;
3409      }
3410    }
3411    .from-scratch-to-pro {
3412      align-items: center;
3413      background-color: #fafafa;
3414      box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1215686275);
3415      display: flex;
3416      flex-direction: column;
3417      height: 100vh;
3418      justify-content: center;
3419      margin-block-start: calc(-1 * clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px));
3420      overflow: hidden;
3421      padding: 0;
3422      position: relative;
3423      border-radius: clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px);
3424    }
3425    .from-scratch-to-pro .side-media {
3426      backdrop-filter: blur(5px);
3427    }
3428    .from-scratch-to-pro .green-arrow.side-media__img {
3429      pointer-events: none;
3430    }
3431    @media (width > 850px) {
3432      .from-scratch-to-pro .from-scratch-to-pro__card-section.--mobile {
3433        display: none;
3434      }
3435    }
3436    @media (width <= 850px) {
3437      .from-scratch-to-pro {
3438        height: fit-content;
3439        padding-block-end: 90px;
3440      }
3441      .from-scratch-to-pro .from-scratch-to-pro__card-section {
3442        max-width: clamp(335px, 335px + (1000 - 335) * (100dvw - 375px) / (1440 - 375), 1000px);
3443      }
3444      .from-scratch-to-pro .from-scratch-to-pro__background {
3445        display: none;
3446      }
3447      .from-scratch-to-pro .from-scratch-to-pro__title {
3448        display: none;
3449      }
3450      .from-scratch-to-pro .circle-section {
3451        display: none;
3452      }
3453      .from-scratch-to-pro .card-name {
3454        margin-inline: auto;
3455      }
3456      .from-scratch-to-pro .special-offer .circle-icon {
3457        background-color: white;
3458        padding: 5px;
3459      }
3460      .from-scratch-to-pro .special-offer__text {
3461        width: 100%;
3462      }
3463      .from-scratch-to-pro .special-offer__title {
3464        text-align: center;
3465      }
3466      .from-scratch-to-pro .special-offer__spa {
3467        bottom: -25px;
3468        left: 50%;
3469        translate: -50%;
3470      }
3471      .from-scratch-to-pro .from-scratch-to-pro__card_big {
3472        overflow: inherit;
3473        position: relative;
3474      }
3475      .from-scratch-to-pro .side-media__text {
3476        font-size: 18px;
3477      }
3478    }
3479    .from-scratch-to-pro .swiper {
3480      overflow: visible;
3481    }
3482    .from-scratch-to-pro__background-left {
3483      left: 0;
3484      position: absolute;
3485      scale: 0.6;
3486      top: 0;
3487      transform-origin: left top;
3488      z-index: 1;
3489    }
3490    .from-scratch-to-pro__background-right {
3491      bottom: 0;
3492      position: absolute;
3493      right: 0;
3494      scale: 0.6;
3495      transform-origin: bottom right;
3496      z-index: 1;
3497    }
3498    @media (max-width: 500px) {
3499      .from-scratch-to-pro {
3500        height: auto;
3501        overflow: visible;
3502      }
3503    }
3504    .from-scratch-to-pro__mobile-slider {
3505      margin-top: 80px;
3506    }
3507    .from-scratch-to-pro__mobile-slider .swiper {
3508      padding-top: 40px;
3509    }
3510    @media (width <= 1000px) {
3511      .from-scratch-to-pro__background-left {
3512        display: none;
3513      }
3514      .from-scratch-to-pro__background-right {
3515        display: none;
3516      }
3517    }
3518    .from-scratch-to-pro__background {
3519      width: 100%;
3520      height: 100%;
3521      position: absolute;
3522      inset: 0;
3523      background-size: cover;
3524    }
3525    @media (max-width: 700px) {
3526      .from-scratch-to-pro__background {
3527        display: none;
3528      }
3529    }
3530    .from-scratch-to-pro__background-left {
3531      position: absolute;
3532      top: 0;
3533      left: 0;
3534      width: fit-content;
3535      z-index: 0;
3536    }
3537    .from-scratch-to-pro__background-left img {
3538      object-fit: cover;
3539      object-position: center;
3540      max-width: 100%;
3541      max-height: 100%;
3542    }
3543    .from-scratch-to-pro__background-right {
3544      position: absolute;
3545      bottom: 0;
3546      right: 0;
3547      width: fit-content;
3548      z-index: 0;
3549    }
3550    .from-scratch-to-pro__background-right img {
3551      z-index: 3;
3552      object-fit: cover;
3553      object-position: center;
3554      max-width: 100%;
3555      max-height: 100%;
3556    }
3557    .from-scratch-to-pro__title {
3558      align-items: center;
3559      color: rgba(0, 0, 0, 0.2509803922);
3560      display: flex;
3561      flex-direction: column;
3562      font-family: "Loos Extended";
3563      font-weight: 500;
3564      max-width: 80%;
3565      text-align: center;
3566      text-wrap: nowrap;
3567      text-wrap: wrap;
3568      top: 230px;
3569      letter-spacing: -0.04em;
3570      position: absolute;
3571      left: 50%;
3572      top: 50%;
3573      transform: translate(-50%, -50%);
3574      font-size: 64px;
3575    }
3576    .from-scratch-to-pro__title span {
3577      font-weight: 500;
3578    }
3579    .from-scratch-to-pro__title b {
3580      gap: 15px;
3581    }
3582    @media (max-width: 1024px) {
3583      .from-scratch-to-pro__title {
3584        top: 195px;
3585      }
3586    }
3587    @media (max-width: 500px) {
3588      .from-scratch-to-pro__title {
3589        position: static;
3590        left: auto;
3591        transform: none;
3592        top: auto;
3593        margin-top: 66px;
3594      }
3595    }
3596    @media (max-width: 1440px) {
3597      .from-scratch-to-pro__title {
3598        font-size: 34px;
3599      }
3600    }
3601    @media (max-width: 1024px) {
3602      .from-scratch-to-pro__title {
3603        font-size: 34px;
3604      }
3605    }
3606    @media (max-width: 375px) {
3607      .from-scratch-to-pro__title {
3608        font-size: 26px;
3609      }
3610    }
3611    .from-scratch-to-pro__title b {
3612      color: #000000;
3613      display: flex;
3614      align-items: center;
3615      justify-content: space-between;
3616      text-wrap: nowrap;
3617    }
3618    @media (max-width: 500px) {
3619      .from-scratch-to-pro__title b {
3620        gap: 6px;
3621      }
3622    }
3623    .from-scratch-to-pro__direction {
3624      display: inline-block;
3625      border-radius: 90px;
3626      background-color: #ddff6d;
3627      padding: 8px 34px;
3628      display: flex;
3629      align-items: center;
3630      justify-content: center;
3631      box-shadow: 0px 2.8px 13.99px 0px rgba(0, 0, 0, 0.1019607843);
3632    }
3633    @media (max-width: 500px) {
3634      .from-scratch-to-pro__direction.gradient-border {
3635        position: absolute;
3636        top: 0;
3637        left: 50%;
3638        transform: translate(-50%, -50%);
3639        border-radius: 90px;
3640        padding: 8px 33px;
3641        width: 97px;
3642        height: 60px;
3643      }
3644    }
3645    .from-scratch-to-pro__direction img {
3646      max-width: 100%;
3647      max-height: 100%;
3648      object-fit: contain;
3649      object-position: center;
3650    }
3651    .from-scratch-to-pro__cards {
3652      position: absolute;
3653      bottom: 0;
3654      left: 50%;
3655      transform: translate(-50%, 100%);
3656      display: flex;
3657      flex-direction: column;
3658      align-items: center;
3659      justify-content: flex-start;
3660      background: transparent;
3661      gap: 230px;
3662      will-change: transform;
3663    }
3664    .from-scratch-to-pro__card-section {
3665      justify-content: center;
3666    }
3667    
3668    .circle-section {
3669      position: relative;
3670      width: 100%;
3671      height: 100%;
3672    }
3673    @media (max-width: 700px) {
3674      .circle-section {
3675        display: none;
3676      }
3677    }
3678    
3679    .rectangle {
3680      position: absolute;
3681      top: 50%;
3682      left: 50%;
3683      width: 0;
3684      border-radius: 15px;
3685      height: 0;
3686      background: #f2f2f2;
3687      transform: translate(-50%, -50%);
3688      z-index: 0;
3689      overflow: hidden;
3690      box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.1215686275);
3691    }
3692    
3693    circle {
3694      z-index: 3;
3695      box-shadow: 0px 9px 30px 0px rgba(0, 0, 0, 0.0784313725);
3696    }
3697    
3698    .second-section-slide {
3699      align-items: center;
3700      background: rgba(255, 255, 255, 0.5);
3701      border-radius: 30px;
3702      box-shadow: 0 6px 35px 0 rgba(0, 0, 0, 0.05);
3703      flex-direction: column;
3704      justify-content: flex-start;
3705      position: relative;
3706    }
3707    .second-section-slide.swiper-slide {
3708      display: flex;
3709      height: auto;
3710      overflow: visible;
3711    }
3712    .second-section-slide__image {
3713      aspect-ratio: 1/1;
3714      border-top-left-radius: inherit;
3715      border-top-right-radius: inherit;
3716      flex: 1;
3717      margin-block-end: 15px;
3718      overflow: hidden;
3719      position: relative;
3720      width: 100%;
3721    }
3722    .second-section-slide__image > * {
3723      position: absolute;
3724    }
3725    .second-section-slide__background {
3726      position: absolute;
3727      inset: 0;
3728    }
3729    .second-section-slide__background img {
3730      max-height: 100%;
3731      min-height: 100%;
3732      object-fit: cover;
3733      object-position: bottom;
3734      width: 100%;
3735    }
3736    .second-section-slide__text {
3737      padding: 24px;
3738      padding-top: 0;
3739      display: flex;
3740      flex-direction: column;
3741      gap: 51px;
3742      align-items: flex-start;
3743      width: 100%;
3744    }
3745    .second-section-slide__group {
3746      display: flex;
3747      align-items: flex-start;
3748      flex-direction: column;
3749    }
3750    .second-section-slide__title {
3751      font: 600 16px/1.25 "Inter", sans-serif;
3752      letter-spacing: -0.02em;
3753      color: rgba(0, 0, 0, 0.9);
3754      margin-bottom: 5px;
3755      margin-top: 15px;
3756      max-width: 80%;
3757    }
3758    .second-section-slide__title b {
3759      color: rgba(0, 0, 0, 0.3);
3760    }
3761    .second-section-slide__disc {
3762      font: 500 14px/1.3 "Inter", sans-serif;
3763      letter-spacing: -0.02em;
3764      color: rgba(0, 0, 0, 0.4);
3765    }
3766    .second-section-slide__index {
3767      align-items: center;
3768      background: #f8f8f8;
3769      border-radius: 50%;
3770      box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.12);
3771      display: flex;
3772      flex-direction: row;
3773      justify-content: center;
3774      top: 0;
3775      z-index: 1;
3776      font: 400 18px/1.3 "GNF", sans-serif;
3777      text-transform: uppercase;
3778      color: rgba(0, 0, 0, 0.4);
3779      transform: translateY(-50%);
3780      width: 43px;
3781      height: 43px;
3782    }
3783    .second-section-slide__index.gradient-border {
3784      position: absolute;
3785    }
3786    .second-section-slide__lines {
3787      align-items: center;
3788      justify-content: center;
3789      background-image: url("data:image/svg+xml,%3csvg%20width='246'%20height='486'%20viewBox='0%200%20246%20486'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cline%20x1='0.5'%20y1='2.18558e-08'%20x2='0.499979'%20y2='486'%20stroke='url(%23paint0_linear_4814_14286)'%20stroke-opacity='0.07'/%3e%3cline%20x1='82.1667'%20y1='2.18558e-08'%20x2='82.1667'%20y2='486'%20stroke='url(%23paint1_linear_4814_14286)'%20stroke-opacity='0.07'/%3e%3cline%20x1='163.833'%20y1='2.18558e-08'%20x2='163.833'%20y2='486'%20stroke='url(%23paint2_linear_4814_14286)'%20stroke-opacity='0.07'/%3e%3cline%20x1='245.5'%20y1='2.18558e-08'%20x2='245.5'%20y2='486'%20stroke='url(%23paint3_linear_4814_14286)'%20stroke-opacity='0.07'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_4814_14286'%20x1='-0.5'%20y1='-2.18558e-08'%20x2='-0.500021'%20y2='486'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_4814_14286'%20x1='81.1667'%20y1='-2.18558e-08'%20x2='81.1667'%20y2='486'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_4814_14286'%20x1='162.833'%20y1='-2.18558e-08'%20x2='162.833'%20y2='486'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_4814_14286'%20x1='244.5'%20y1='-2.18558e-08'%20x2='244.5'%20y2='486'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
3790      background-position: center;
3791      background-repeat: no-repeat;
3792      background-size: contain;
3793      position: absolute;
3794      inset: 0;
3795      display: flex;
3796      z-index: -1;
3797    }
3798    .second-section-slide__grid {
3799      position: absolute;
3800      inset: 0;
3801      display: grid;
3802      grid-template-columns: repeat(4, 1fr);
3803      grid-template-rows: repeat(4, 1fr);
3804    }
3805    .second-section-slide__grid img:nth-child(1) {
3806      grid-row: 4;
3807      grid-column: 1;
3808    }
3809    .second-section-slide__grid img:nth-child(2) {
3810      grid-row: 1;
3811      grid-column: 2;
3812    }
3813    .second-section-slide__grid img:nth-child(3) {
3814      grid-row: 2;
3815      grid-column: 3;
3816    }
3817    .second-section-slide__grid img:nth-child(4) {
3818      grid-row: 3;
3819      grid-column: 4;
3820    }
3821    
3822    .popup {
3823      position: fixed;
3824      inset: 0;
3825      padding-top: 50px;
3826      display: none;
3827      flex-direction: column;
3828      align-items: center;
3829      justify-content: center;
3830      background-color: rgba(255, 255, 255, 0.27);
3831    }
3832    .popup .questions-container {
3833      display: flex;
3834      align-items: center;
3835      flex-direction: column;
3836    }
3837    .popup .questions-block__title {
3838      position: absolute;
3839      top: 0;
3840      transform: translateY(-50%);
3841    }
3842    .popup .questions-block__subtitle {
3843      margin-bottom: 190px;
3844    }
3845    
3846    .special-offer {
3847      position: relative;
3848      padding: 0;
3849      background: linear-gradient(0deg, #f1f1f1, #f1f1f1), linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03));
3850      width: 460px;
3851      box-shadow: 0 6px 35px 0 rgba(0, 0, 0, 0.05);
3852      padding: 2px;
3853      overflow: hidden;
3854    }
3855    .special-offer.gradient-border::before {
3856      padding: 2px;
3857    }
3858    .special-offer .circle-icon {
3859      background-color: #cfff32;
3860    }
3861    .special-offer__card-name {
3862      margin-left: 20px;
3863      margin-top: 20px;
3864    }
3865    .special-offer__spa {
3866      z-index: 2;
3867      position: absolute;
3868      bottom: 20px;
3869      left: 20px;
3870    }
3871    .special-offer__spa .side-media {
3872      box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.05);
3873      background: rgba(255, 255, 255, 0.15);
3874    }
3875    .special-offer__text {
3876      padding: 20px;
3877    }
3878    .special-offer__image {
3879      width: 100%;
3880      background-color: transparent;
3881      z-index: 1;
3882    }
3883    .special-offer__image img {
3884      width: 100%;
3885      object-fit: contain;
3886      object-position: bottom;
3887    }
3888    
3889    .basic-courses {
3890      display: flex;
3891      flex-direction: column;
3892      align-items: flex-start;
3893      padding-top: clamp(120px, 120px + (250 - 120) * (100dvw - 375px) / (1440 - 375), 250px);
3894      background-color: #ffffff;
3895    }
3896    @media (width > 850px) {
3897      .basic-courses .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(1 of .basic-courses__card) {
3898        max-height: clamp(600px, 600px + (650 - 600) * (100dvw - 375px) / (1440 - 375), 650px);
3899      }
3900      .basic-courses .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(2 of .basic-courses__card) {
3901        max-height: clamp(600px, 600px + (650 - 600) * (100dvw - 375px) / (1440 - 375), 650px);
3902      }
3903      .basic-courses .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(3 of .basic-courses__card) {
3904        max-height: clamp(420px, 420px + (470 - 420) * (100dvw - 375px) / (1440 - 375), 470px);
3905      }
3906      .basic-courses .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(4 of .basic-courses__card) {
3907        max-height: clamp(420px, 420px + (470 - 420) * (100dvw - 375px) / (1440 - 375), 470px);
3908      }
3909      .basic-courses .basic-courses__group:nth-child(2 of .basic-courses__group) .basic-courses__card:nth-child(1 of .basic-courses__card) {
3910        max-height: clamp(420px, 420px + (470 - 420) * (100dvw - 375px) / (1440 - 375), 470px);
3911      }
3912    }
3913    .basic-courses .side-media__text {
3914      transition: 0.25s;
3915    }
3916    .basic-courses .basic-courses__card:hover .basic-courses__card-footer .side-media::before {
3917      opacity: 0;
3918    }
3919    .basic-courses .basic-courses__card:hover .basic-courses__card-footer .side-media {
3920      background-color: #cfff32;
3921    }
3922    .basic-courses .basic-courses__card:hover .basic-courses__card-footer .side-media__text {
3923      color: black;
3924    }
3925    .basic-courses .basic-courses__card:hover .basic-courses__card-footer .green-arrow {
3926      background-color: black;
3927    }
3928    .basic-courses .basic-courses__card:hover .basic-courses__card-footer .green-arrow img {
3929      filter: invert(1);
3930    }
3931    @media (width <= 800px) {
3932      .basic-courses__card-tag {
3933        font-size: 13px !important;
3934      }
3935      .basic-courses use {
3936        filter: invert(1);
3937      }
3938      .basic-courses .basic-courses__card-footer .side-media {
3939        background: #cfff32;
3940      }
3941      .basic-courses .basic-courses__card-footer .side-media__img {
3942        background: black;
3943      }
3944      .basic-courses .basic-courses__card-footer .side-media__img img {
3945        filter: invert(1);
3946        scale: 0.9;
3947      }
3948      .basic-courses .basic-courses__card:hover .basic-courses__card-footer .side-media {
3949        background: black;
3950      }
3951      .basic-courses .basic-courses__card:hover .basic-courses__card-footer .side-media__text-mobile {
3952        color: white;
3953      }
3954      .basic-courses .basic-courses__card:hover .basic-courses__card-footer .side-media__img {
3955        background: white;
3956      }
3957      .basic-courses .basic-courses__card:hover .basic-courses__card-footer .side-media__img img {
3958        filter: invert(0);
3959      }
3960    }
3961    .basic-courses .side-media {
3962      pointer-events: none;
3963    }
3964    .basic-courses .swiper {
3965      overflow: visible;
3966    }
3967    .basic-courses__title {
3968      font-weight: 500;
3969      font-size: 38px;
3970      color: black;
3971      font-family: "Loos Extended", sans-serif;
3972      line-height: 115%;
3973      letter-spacing: -0.01em;
3974      margin-top: 20px;
3975      margin-bottom: 80px;
3976    }
3977    .basic-courses__title b {
3978      color: rgba(0, 0, 0, 0.2509803922);
3979    }
3980    .basic-courses__logo {
3981      width: 36px;
3982      height: 36px;
3983    }
3984    .basic-courses__group {
3985      display: flex;
3986      flex-direction: column;
3987      align-items: flex-start;
3988      width: 100%;
3989      margin-bottom: 70px;
3990    }
3991    .basic-courses__group:nth-child(2 of .basic-courses__group) .swiper-pagination {
3992      display: none;
3993    }
3994    .basic-courses__group-text {
3995      text-transform: uppercase;
3996    }
3997    .basic-courses__group-head {
3998      display: flex;
3999      align-items: stretch;
4000      width: 100%;
4001      margin-bottom: 30px;
4002      gap: 10px;
4003      font-weight: 400;
4004      font-size: 18px;
4005      font-family: "GNF", sans-serif;
4006    }
4007    .basic-courses__group-title {
4008      background-color: #f4f4f4;
4009      display: flex;
4010      align-items: center;
4011      justify-content: center;
4012      padding: 5px 20px 5px 5px;
4013      border-radius: 30px;
4014      box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0784313725);
4015      gap: 10px;
4016      color: rgba(0, 0, 0, 0.8);
4017    }
4018    .basic-courses__group-count {
4019      background-color: #f4f4f4;
4020      color: rgba(0, 0, 0, 0.4);
4021      padding-inline: 17.5px;
4022      border-radius: 50%;
4023      box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0784313725);
4024      /*backdrop-filter: blur(5px);*/
4025      display: flex;
4026      align-items: center;
4027      justify-content: center;
4028      aspect-ratio: 1;
4029    }
4030    .basic-courses__cards {
4031      display: grid;
4032      grid-template-columns: repeat(12, 1fr);
4033      gap: 10px;
4034      width: 100%;
4035      flex-wrap: nowrap;
4036    }
4037    @media (max-width: 850px) {
4038      .basic-courses__cards {
4039        display: none;
4040      }
4041    }
4042    .basic-courses__card {
4043      align-items: center;
4044      /*backdrop-filter: blur(50px);*/
4045      border-radius: 20px;
4046      box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
4047      display: flex;
4048      flex-direction: column;
4049      height: 650px;
4050      justify-content: end;
4051      overflow: hidden;
4052      position: relative;
4053    }
4054    .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(1) {
4055      grid-column: span 7;
4056    }
4057    @media (width >= 850px) {
4058      .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(1) {
4059        height: 813px;
4060      }
4061    }
4062    .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(2) {
4063      grid-column: span 5;
4064    }
4065    @media (width >= 850px) {
4066      .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(2) {
4067        height: 813px;
4068      }
4069    }
4070    .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(3) {
4071      grid-column: span 6;
4072    }
4073    .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(4) {
4074      grid-column: span 6;
4075    }
4076    .basic-courses__group:nth-child(2 of .basic-courses__group) .basic-courses__card:nth-child(1) {
4077      grid-column: span 6;
4078    }
4079    .basic-courses__card-image {
4080      align-items: flex-start;
4081      display: flex;
4082      height: 100%;
4083      justify-content: center;
4084      position: absolute;
4085      width: 100%;
4086    }
4087    .basic-courses__card-image img {
4088      height: 100%;
4089      min-height: 100%;
4090      object-fit: cover;
4091      width: 100%;
4092      object-position: top center;
4093    }
4094    .basic-courses__card-blur {
4095      display: flex;
4096      flex-direction: column;
4097      width: 100%;
4098      align-items: flex-start;
4099    }
4100    .basic-courses__card-title {
4101      padding-inline: 24.5px;
4102      padding-bottom: 15px;
4103      font: 600 20px/1.2 "Inter", sans-serif;
4104      letter-spacing: -0.02em;
4105      text-align: center;
4106      color: rgba(255, 255, 255, 0.9);
4107    }
4108    @media (max-width: 850px) {
4109      .basic-courses__card-title {
4110        font: 600 16px/1.25 "Inter", sans-serif;
4111        letter-spacing: -0.02em;
4112        color: rgba(0, 0, 0, 0.9);
4113      }
4114    }
4115    .basic-courses__card-discription {
4116      width: 100%;
4117      display: flex;
4118      align-items: center;
4119      flex-wrap: wrap;
4120      gap: 15px;
4121      padding-block: 25px;
4122      padding-left: 24.5px;
4123      padding-right: 20px;
4124      padding-top: 0;
4125      z-index: 4;
4126      justify-content: space-between;
4127    }
4128    .basic-courses__card-tags {
4129      align-items: center;
4130      display: flex;
4131      gap: clamp(10px, 10px + (14 - 10) * (100dvw - 375px) / (1440 - 375), 14px);
4132      position: relative;
4133    }
4134    .basic-courses__card-tag {
4135      color: rgba(255, 255, 255, 0.6980392157);
4136      font-family: "Inter", sans-serif;
4137      font-size: 15px;
4138      font-weight: 500;
4139      letter-spacing: -0.02em;
4140      position: relative;
4141      text-wrap: nowrap;
4142    }
4143    @media (max-width: 850px) {
4144      .basic-courses__card-tag {
4145        color: rgba(0, 0, 0, 0.6);
4146      }
4147    }
4148    .basic-courses__card-tag:not(:last-child)::after {
4149      content: "·";
4150      position: absolute;
4151      right: -7px;
4152      translate: 50%;
4153    }
4154    .basic-courses__card-read-more {
4155      aspect-ratio: 1;
4156      width: 16px;
4157      height: 16px;
4158      box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.08);
4159      background: rgba(255, 255, 255, 0.15);
4160      display: inline-flex;
4161      align-items: center;
4162      justify-content: center;
4163      border-radius: 50%;
4164      padding: 2px;
4165      cursor: pointer;
4166      margin-left: 5px;
4167    }
4168    @media (hover: hover) and (pointer: fine) {
4169      .basic-courses__card-read-more:hover {
4170        background-color: greenyellow;
4171      }
4172    }
4173    .basic-courses__card-read-more .circle-icon {
4174      background-color: transparent;
4175      width: 100%;
4176      height: 100%;
4177    }
4178    .basic-courses__card-read-more .gradient-border::before {
4179      padding: 2px;
4180    }
4181    .basic-courses__card-read-more svg {
4182      color: rgba(255, 255, 255, 0.8705882353);
4183      width: 100%;
4184      height: 100%;
4185    }
4186    .basic-courses__card-footer .side-media {
4187      background-color: rgba(255, 255, 255, 0.1490196078);
4188      flex-direction: row-reverse;
4189      padding: 5px;
4190      padding-left: 20px;
4191    }
4192    .basic-courses__card-footer .side-media__img {
4193      aspect-ratio: 1;
4194      min-height: clamp(26px, 26px + (32 - 26) * (100dvw - 375px) / (1440 - 375), 32px);
4195      min-width: clamp(26px, 26px + (32 - 26) * (100dvw - 375px) / (1440 - 375), 32px);
4196    }
4197    .basic-courses__card-footer .side-media__text {
4198      color: rgba(255, 255, 255, 0.8980392157);
4199      font-family: "Inter", sans-serif;
4200      font-weight: 500;
4201      letter-spacing: -0.02em;
4202      font-size: 16px;
4203    }
4204    @media (max-width: 1440px) {
4205      .basic-courses__card-footer .side-media__text {
4206        font-size: 14px;
4207      }
4208    }
4209    @media (max-width: 1024px) {
4210      .basic-courses__card-footer .side-media__text {
4211        font-size: 14px;
4212      }
4213    }
4214    @media (max-width: 375px) {
4215      .basic-courses__card-footer .side-media__text {
4216        font-size: 0px;
4217      }
4218    }
4219    .basic-courses__card-footer .side-media__text-mobile {
4220      color: black;
4221      font-family: "Inter", sans-serif;
4222      font-size: 14px;
4223      font-weight: 500;
4224      letter-spacing: -0.02em;
4225      padding-inline: 15px;
4226    }
4227    @media (width > 850px) {
4228      .basic-courses__card-footer .side-media__text-mobile {
4229        display: none;
4230      }
4231    }
4232    
4233    .basic-courses .side-media__img {
4234      pointer-events: none;
4235    }
4236    .basic-courses__card {
4237      background-color: #d5d5d5;
4238      transition: 2s opacity, translate;
4239      transform-origin: top;
4240    }
4241    @media (max-width: 850px) {
4242      .basic-courses__card {
4243        height: 514px;
4244      }
4245    }
4246    .basic-courses__card-blur {
4247      z-index: 4;
4248    }
4249    @media (width <= 800px) {
4250      .basic-courses__card-blur {
4251        background: linear-gradient(transparent, #f7f7f7 30%);
4252        padding-block-start: 60px;
4253      }
4254    }
4255    .basic-courses__card-footer {
4256      display: flex;
4257      align-items: center;
4258      justify-content: space-between;
4259      background-color: rgba(0, 0, 0, 0.2509803922);
4260      width: 100%;
4261      padding-inline: 20px;
4262      padding-top: 15.5px;
4263      padding-bottom: 16.5px;
4264      border-top: 1px solid rgba(0, 0, 0, 0.1490196078);
4265      z-index: 4;
4266    }
4267    @media (max-width: 850px) {
4268      .basic-courses__card-footer {
4269        background-color: #f8f8f8;
4270      }
4271    }
4272    .basic-courses__card-footer .side-media {
4273      padding-left: 5px;
4274      /*backdrop-filter: blur(5px);*/
4275      box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
4276      background: rgba(255, 255, 255, 0.15);
4277    }
4278    .basic-courses__card-footer .side-media:hover {
4279      background: rgba(255, 255, 255, 0.25);
4280    }
4281    @media (max-width: 850px) {
4282      .basic-courses__card-footer .side-media__text {
4283        display: none;
4284      }
4285    }
4286    .basic-courses__card-image::after {
4287      content: "";
4288      position: absolute;
4289      left: 0;
4290      bottom: 0;
4291      width: 100%;
4292      /*backdrop-filter: blur(0.2rem);*/
4293      height: 40%;
4293 /* совпадает с высотой blur-overlay */
4294      background: linear-gradient(to top, rgba(0, 0, 0, 0.775), transparent);
4295    }
4296    @media (max-width: 850px) {
4297      .basic-courses__card-image::after {
4298        backdrop-filter: blur(50px);
4299        background: rgba(255, 255, 255, 0.076);
4300        height: 10%;
4301      }
4302    }
4303    .basic-courses__card-month-count.side-media {
4304      align-items: center;
4305      background-color: rgba(255, 255, 255, 0.1490196078);
4306      display: flex;
4307      padding-right: 12px;
4308      padding: 3px;
4309    }
4310    @media (max-width: 850px) {
4311      .basic-courses__card-month-count.side-media {
4312        background: #f9f9f9;
4313      }
4314    }
4315    .basic-courses__card-month-count .side-media__img {
4316      background-color: #ffffff;
4317      min-width: 20px;
4318      min-height: 20px;
4319      /*
4320      @include less(850px) {
4321        background-color: black;
4322        padding: 4px;
4323    
4324        svg {
4325          color: white;
4326          width: 100%;
4327          height: 100%;
4328        }
4329      }
4330      */
4331    }
4332    .basic-courses__card-month-count .side-media__img svg {
4333      color: black;
4334      width: 100%;
4335      height: 100%;
4336    }
4337    .basic-courses__card-month-count .side-media__text {
4338      text-wrap: nowrap;
4339      font-family: "Inter";
4340      color: rgba(255, 255, 255, 0.8);
4341      line-height: 135%;
4342      font-size: 15px;
4343      font-weight: 500;
4344    }
4345    @media (max-width: 1440px) {
4346      .basic-courses__card-month-count .side-media__text {
4347        font-size: 14px;
4348      }
4349    }
4350    @media (max-width: 1024px) {
4351      .basic-courses__card-month-count .side-media__text {
4352        font-size: 14px;
4353      }
4354    }
4355    @media (max-width: 375px) {
4356      .basic-courses__card-month-count .side-media__text {
4357        font-size: 14px;
4358      }
4359    }
4360    @media (max-width: 850px) {
4361      .basic-courses__card-month-count .side-media__text {
4362        font: 600 13px/1.3 "Inter", sans-serif;
4363        letter-spacing: -0.02em;
4364        color: rgba(0, 0, 0, 0.4);
4365      }
4366    }
4367    .basic-courses__card-new-price {
4368      font: 600 18px/1.35 "Inter", sans-serif;
4369      letter-spacing: -0.02em;
4370      color: #ececec;
4371    }
4372    @media (max-width: 850px) {
4373      .basic-courses__card-new-price {
4374        color: rgba(0, 0, 0, 0.9);
4375      }
4376    }
4377    @media (max-width: 1500px) {
4378      .basic-courses__card-new-price {
4379        font-size: 16px;
4380      }
4381    }
4382    .basic-courses__card-old-price {
4383      font: 600 15px/1.35 "Inter", sans-serif;
4384      letter-spacing: -0.02em;
4385      text-decoration: line-through;
4386      color: #929292;
4387    }
4388    @media (max-width: 850px) {
4389      .basic-courses__card-old-price {
4390        color: rgba(0, 0, 0, 0.4);
4391      }
4392    }
4393    @media (max-width: 1500px) {
4394      .basic-courses__card-old-price {
4395        font-size: 13px;
4396      }
4397    }
4398    .basic-courses__card-price {
4399      display: flex;
4400      flex-direction: column;
4401      align-items: flex-start;
4402      gap: 2px;
4403    }
4404    @media (max-width: 700px) {
4405      .basic-courses__card-tags {
4406        flex-wrap: wrap;
4407      }
4408    }
4409    .basic-courses__card-discription .green-arrow {
4410      box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4);
4411    }
4412    
4413    .month-count {
4414      display: flex;
4415      align-items: center;
4416      justify-content: center;
4417      border-radius: 40px;
4418      padding: 3px;
4419      backdrop-filter: blur(70px);
4420      box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.1019607843);
4421    }
4422    .month-count__icon {
4423      max-width: 20px;
4424    }
4425    .month-count__text {
4426      padding-inline: 10px;
4427    }
4428    
4429    .basic-courses__cards > .column {
4430      gap: 20px;
4431      flex: 1;
4432    }
4433    @media (min-width: 1024px) {
4434      .basic-courses__cards > .column {
4435        display: contents;
4436      }
4437    }
4438    
4439    .course-list {
4440      top: -20px;
4441      transform: translateY(-100%);
4442      opacity: 0;
4443      pointer-events: none;
4444      right: 0;
4445      display: flex;
4446      align-items: flex-start;
4447      justify-content: center;
4448      flex-direction: column;
4449      gap: 7px;
4450      border-radius: 20px;
4451      padding: 18px;
4452      backdrop-filter: blur(30px);
4453      box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
4454      background: rgba(0, 0, 0, 0.05);
4455    }
4456    .course-list.gradient-border {
4457      position: absolute;
4458    }
4459    .course-list__item {
4460      display: flex;
4461      gap: 8px;
4462      font: 500 15px/1.35 "Inter", sans-serif;
4463      letter-spacing: -0.02em;
4464      color: rgba(255, 255, 255, 0.7);
4465    }
4466    .course-list__icon {
4467      box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
4468      background: rgba(255, 255, 255, 0.1);
4469      padding: 4px;
4470    }
4471    .course-list__icon svg {
4472      color: white;
4473      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
4474    }
4475    .diploma {
4476      align-items: flex-start;
4477      background-color: #FFFFFF;
4478      padding-block-start: 200px;
4479      margin-bottom: 226px;
4480    }
4481    .diploma .img-separator {
4482      margin-inline: auto;
4483      margin-block: -120px 120px;
4484      max-width: calc(100dvw - 45px);
4485      height: 1px;
4486      background: linear-gradient(90deg, transparent, #e6e6e6, transparent);
4487    }
4488    .diploma .side-media {
4489      background: rgba(255, 255, 255, 0.3490196078);
4490      pointer-events: none;
4491    }
4492    .diploma .side-media__img {
4493      background-color: white;
4494    }
4495    .diploma .green-arrow {
4496      height: 24px;
4497      width: 24px;
4498    }
4499    .diploma__card {
4500      border-radius: 40px;
4501      box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.1019607843);
4502      max-width: 100%;
4503    }
4504    .diploma__card:nth-child(1) {
4505      flex: 2;
4506    }
4507    .diploma__card:nth-child(2) {
4508      flex: 0.6;
4509    }
4510    .diploma__cards {
4511      width: 100%;
4512      gap: 20px;
4513    }
4514    @media (max-width: 1100px) {
4515      .diploma__cards {
4516        flex-wrap: wrap;
4517      }
4518    }
4519    @media (max-width: 700px) {
4520      .diploma__cards {
4521        flex-direction: column;
4522      }
4523    }
4524    .diploma__title {
4525      margin-top: 20px;
4526      margin-bottom: 80px;
4527      font-family: "Loos Extended", sans-serif;
4528      font-weight: 500;
4529      font-size: clamp(26px, 26px + (34 - 26) * (100dvw - 375px) / (1440 - 375), 34px);
4530      line-height: 115%;
4531      letter-spacing: -0.01em;
4532      vertical-align: bottom;
4533    }
4534    @media (max-width: 500px) {
4535      .diploma {
4536        margin-bottom: 120px;
4537      }
4538    }
4539    
4540    .benefits {
4541      align-items: flex-start;
4542      background: linear-gradient(110deg, #e6ff99 50%, #b9de42);
4543      padding-bottom: 0;
4544      padding: 30px 30px 0 30px;
4545    }
4546    .benefits__detail {
4547      /*
4548      flex: 1;
4549      width: 100%;
4550      position: relative;
4551      backdrop-filter: blur(90px);
4552      border-radius: 80px;
4553      border-bottom-left-radius: 0;
4554      border-bottom-right-radius: 0;
4555      display: flex;
4556      align-items: flex-end;
4557      padding-top: 89px;
4558      justify-content: center;
4559      box-shadow:
4560        -4px 0px 40px 0px #ffffff inset,
4561        -4px 0px 40px 0px #ffffff inset
4562      ;
4563    
4564      img{
4565        max-width: 100%;
4566        object-fit: contain;
4567        object-position: center;
4568      }
4569      */
4570      position: relative;
4571      margin-block-start: auto;
4572    }
4573    .benefits .img-decoration {
4574      max-width: calc(100% + 30px);
4575      margin-inline: -30px;
4576      width: calc(100% + 60px);
4577      translate: 15px;
4578    }
4579    .benefits__discription {
4580      color: rgba(0, 0, 0, 0.5019607843);
4581      letter-spacing: -0.02em;
4582      font-weight: 500;
4583      font-size: 15px;
4584      line-height: 130%;
4585      font-family: "Inter";
4586    }
4587    .benefits__label {
4588      background-color: #f4fdd9;
4589      border-radius: 20px;
4590      display: flex;
4591      flex-direction: column;
4592      gap: 26px;
4593      max-width: 154px;
4594      padding: 10px;
4595      pointer-events: none;
4596      position: absolute;
4597      right: -8px;
4598      top: 15px;
4599    }
4600    .benefits__title {
4601      margin-top: 15px;
4602      /*margin-bottom: 83px;*/
4603      font-family: "GNF";
4604      color: rgba(0, 0, 0, 0.8);
4605      font-weight: 400;
4606      font-size: clamp(24px, 24px + (30 - 24) * (100dvw - 375px) / (1440 - 375), 30px);
4607      text-transform: uppercase;
4608    }
4609    .benefits__title b {
4610      opacity: 0.3;
4611    }
4612    
4613    .qualification {
4614      position: relative;
4615      background-color: #f4f4f4;
4616      justify-content: end;
4617      min-height: 540px;
4618    }
4619    @media (max-width: 1024px) {
4620      .qualification.row {
4621        flex-direction: column;
4622        align-items: flex-end;
4623      }
4624    }
4625    .qualification__card {
4626      position: absolute;
4627      max-height: 55%;
4628      object-fit: contain;
4629      object-position: center;
4630      width: 54%;
4631    }
4632    .qualification__card:nth-child(1) {
4633      animation-timing-function: cubic-bezier(0.4, 0.2, 0.6, 1);
4634    }
4635    .qualification__card_document {
4636      left: 17.25%;
4637      top: 13%;
4638      scale: 1.5;
4639    }
4640    .qualification__card_green {
4641      left: 12.06%;
4642      top: 28%;
4643      scale: 1.5;
4644    }
4645    .qualification__curtain {
4646      align-items: flex-start;
4647      backdrop-filter: blur(15px);
4648      border-radius: 0 40px 40px 0;
4649      box-shadow: -10px 4px 35px 0px rgba(0, 0, 0, 0.1019607843);
4650      gap: 16px;
4651      overflow: hidden;
4652      padding: 30px;
4653      z-index: 2;
4654      background: repeating-linear-gradient(to right, rgba(217, 217, 217, 0.7333333333) 0px, #f1f1f1 18px);
4655    }
4656    @media (min-width: 1024px) {
4657      .qualification__curtain {
4658        max-width: 40%;
4659      }
4660    }
4661    .qualification__discription {
4662      color: rgba(0, 0, 0, 0.4);
4663      font-family: "Inter";
4664      font-size: 16px;
4665      font-weight: 500;
4666      letter-spacing: -0.02em;
4667      line-height: 130%;
4668      padding-right: clamp(0px, 0px + (106 - 0) * (100dvw - 375px) / (1440 - 375), 106px);
4669      vertical-align: bottom;
4670    }
4671    .qualification__title {
4672      font-family: "Inter";
4673      font-weight: 600;
4674      font-size: 20px;
4675      line-height: 120%;
4676      letter-spacing: -0.02em;
4677      vertical-align: bottom;
4678    }
4679    .qualification__title::before {
4680      background-color: rgba(248, 248, 248, 0.7529411765);
4681      filter: blur(30px);
4682      content: "";
4683      position: absolute;
4684      padding: 120px 150px;
4685      border-radius: 100px;
4686      translate: 0% -18%;
4687      z-index: -1;
4688    }
4689    .qualification__cta {
4690      backdrop-filter: blur(5px);
4691      background-color: #f5f5f5;
4692      border-radius: 64px;
4693      bottom: 0;
4694      box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0509803922);
4695      color: rgba(0, 0, 0, 0.8);
4696      left: 50%;
4697      position: absolute;
4698      transform: translate(-50%, 50%);
4699      white-space: nowrap;
4700      z-index: 3;
4701      transition: 0.2s;
4702    }
4703    .qualification__cta:hover {
4704      background-color: #cfff32;
4705    }
4706    .qualification__cta .green-arrow {
4707      height: 30px;
4708      pointer-events: none;
4709      width: 30px;
4710    }
4711    .qualification__cta .green-arrow img {
4712      transition: 0.2s;
4713    }
4714    .qualification__cta:hover .green-arrow {
4715      background-color: color-mix(in srgb, black 80%, transparent);
4716    }
4717    .qualification__cta:hover .green-arrow img {
4718      filter: invert(1);
4719    }
4720    .qualification .cta__text {
4721      color: color-mix(in srgb, black 80%, transparent);
4722      letter-spacing: -0.02em;
4723      font-size: 14px;
4724    }
4725    .qualification .gradient-border::before {
4726      border-radius: 64px;
4727    }
4728    
4729    @media (width <= 1200px) and (width >= 1024px) {
4730      .diploma__card {
4731        border-radius: 40px;
4732        box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.1019607843);
4733        max-width: 100%;
4734      }
4735      .diploma__card:nth-child(1) {
4736        flex: 1;
4737      }
4738      .diploma__card:nth-child(2) {
4739        flex: 0.6;
4740      }
4741      .qualification__curtain {
4742        max-width: 60%;
4743      }
4744    }
4745    @media (width < 1025px) {
4746      .qualification__curtain {
4747        max-width: unset;
4748        border-radius: 0;
4749      }
4750      .qualification__cta {
4751        left: 50%;
4752      }
4753    }
4754    @media (width < 1000px) {
4755      .diploma__cards {
4756        flex-direction: column !important;
4757        gap: 60px;
4758      }
4759      .img-decoration {
4760        max-height: 450px;
4761      }
4762      .benefits__detail {
4763        margin-inline: auto;
4764      }
4765      .qualification__card_document {
4766        left: 35%;
4767        scale: 1;
4768        top: 21%;
4769      }
4770      .qualification__card_green {
4771        left: 20%;
4772        scale: 1;
4773        top: 12%;
4774      }
4775    }
4776    @media (width <= 500px) {
4777      .qualification__card_document {
4778        scale: 1.5;
4779      }
4780      .qualification__card_green {
4781        scale: 1.5;
4782      }
4783      .qualification__discription {
4784        margin-block-end: 20px;
4785      }
4786      .qualification__curtain {
4787        border-radius: 0 0 40px 40px;
4788      }
4789    }
4790    .real-pros {
4791      background-color: #f8f8f8;
4792      background-image: url("./orbit.D6Bx9Mbi.svg");
4793      align-items: center;
4794      background-position: center;
4795      background-repeat: no-repeat;
4796      background-size: auto;
4797      box-shadow: 0px -10px 10px color-mix(in srgb, black 2%, transparent);
4798      display: flex;
4799      flex-direction: column;
4800      height: 100dvh;
4801      justify-content: center;
4802      overflow: hidden;
4803      position: relative;
4804      border-radius: clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px) clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px) 0 0;
4805    }
4806    .real-pros .side-media {
4807      background: white;
4808      box-shadow: 0 4px 15px color-mix(in srgb, black 6%, transparent);
4809      gap: 12px;
4810      padding-inline-end: 20px;
4811      padding: 5px;
4812      pointer-events: none;
4813    }
4814    .real-pros .side-media__text {
4815      letter-spacing: -0.02em;
4816    }
4817    .real-pros .side-media__img {
4818      height: 24px;
4819      width: 24px;
4820    }
4821    .real-pros::after {
4822      content: "";
4823      position: absolute;
4824      left: 0;
4825      bottom: 0;
4826      width: 100%;
4827      height: 300px;
4828      background: linear-gradient(transparent, #f8f8f8 70%);
4829      background-size: cover;
4830      z-index: 1;
4831      pointer-events: none;
4832    }
4833    .real-pros__container {
4834      aspect-ratio: 1;
4835      width: 80%;
4836      position: relative;
4837      transform-style: preserve-3d;
4838      will-change: transform;
4839      border-radius: 50%;
4840    }
4841    @media (max-width: 1024px) {
4842      .real-pros__container {
4843        width: 100%;
4844      }
4845    }
4846    .real-pros__card {
4847      position: absolute;
4848      top: 50%;
4849      left: 50%;
4850      transform: translate(-50%, -50%);
4851      will-change: transform, opacity;
4852      pointer-events: auto;
4853      display: flex;
4854      align-items: center;
4855      justify-content: center;
4856      user-select: none;
4857      z-index: 2;
4858    }
4859    .real-pros__card--visible {
4860      opacity: 1;
4861    }
4862    .real-pros__card-img {
4863      width: 90px;
4864      height: 90px;
4865      padding: 5px;
4866      border-radius: 50%;
4867      object-fit: cover;
4868      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
4869      object-fit: contain;
4870      object-position: center;
4871    }
4872    .real-pros__bubble {
4873      align-items: center;
4874      background-color: color-mix(in srgb, white 50%, transparent);
4875      border-radius: 100px;
4876      box-shadow: 0 1px 4px color-mix(in srgb, black 25%, transparent);
4877      display: flex;
4878      height: 34px;
4879      justify-content: center;
4880      object-fit: scale-down;
4881      padding-block-start: 2px;
4882      position: absolute;
4883      width: 34px;
4884      backdrop-filter: blur(5px);
4885      right: -5px;
4886      top: 0;
4887    }
4888    .real-pros__content {
4889      position: absolute;
4890      top: 50%;
4891      left: 50%;
4892      transform: translate(-50%, -50%);
4893      align-items: center;
4894      justify-content: center;
4895      padding: 20px;
4896      z-index: 2;
4897      border-radius: 100%;
4898    }
4899    .real-pros__content::after {
4900      content: "";
4901      position: absolute;
4902      left: 0;
4903      bottom: 0;
4904      width: 100%;
4905      height: 100%;
4906      background: white;
4907      background-size: cover;
4908      filter: blur(36px);
4909      z-index: 1;
4910      pointer-events: none;
4911      opacity: 1;
4912    }
4913    .real-pros__content > .side-media {
4914      z-index: 2;
4915    }
4916    .real-pros__content .side-media__text {
4917      text-wrap: nowrap;
4918    }
4919    .real-pros__title {
4920      align-items: center;
4921      color: #000000;
4922      font-family: "Loos Extended", sans-serif;
4923      font-weight: 500;
4924      margin-block-start: 25px;
4925      text-align: center;
4926      z-index: 2;
4927      font-size: 60px;
4928    }
4929    @media (max-width: 1440px) {
4930      .real-pros__title {
4931        font-size: 44px;
4932      }
4933    }
4934    @media (max-width: 1024px) {
4935      .real-pros__title {
4936        font-size: 44px;
4937      }
4938    }
4939    @media (max-width: 375px) {
4940      .real-pros__title {
4941        font-size: 26px;
4942   
4942   }
4943    }
4944    .real-pros__title b {
4945      color: rgba(0, 0, 0, 0.2509803922);
4946    }
4947    
4948    .student-results {
4949      background-color: #f8f8f8;
4950    }
4951    .student-results:has(.div-reviews.--is-expanded) .side-media {
4952      margin-block: -42px 0px;
4953      opacity: 0;
4954      pointer-events: none;
4955    }
4956    .student-results .side-media {
4957      background-color: white;
4958      cursor: pointer;
4959      display: flex;
4960      flex-direction: row-reverse;
4961      gap: 15px;
4962      margin-block-end: 10px;
4963      margin-block-start: 73px;
4964      margin-inline: auto;
4965      padding: 5px;
4966      user-select: none;
4967      width: fit-content;
4968      padding-inline-start: 20px;
4969    }
4970    .student-results .side-media__img {
4971      height: 32px;
4972      width: 32px;
4973      pointer-events: none;
4974    }
4975    .student-results .side-media__text {
4976      font-size: 15px;
4977      font-weight: 500;
4978      letter-spacing: -0.02em;
4979      padding: 0;
4980      transition: 0.25s;
4981    }
4982    .student-results .side-media:hover .side-media__text {
4983      color: black;
4984    }
4985    .student-results .section-name {
4986      margin-inline: auto;
4987    }
4988    .student-results .div-reviews {
4989      /* These variables Will be modified through a script in student-results__05.pug */
4990      --transition: 1s;
4991      --max-height-shrunken: unset;
4992      --max-height-expanded: unset;
4993      display: grid;
4994      gap: 90px 25px;
4995      grid-template-columns: repeat(6, 1fr);
4996      padding-block: 80px 0px;
4997      transition: 1s;
4998      padding-inline: 12px;
4999      max-width: calc(100% - 24px);
5000      max-height: var(--max-height-shrunken);
5001    }
5002    .student-results .div-reviews.--is-expanded {
5003      max-height: var(--max-height-expanded);
5004      padding-block-end: 27px;
5005    }
5006    .student-results .div-review {
5007      display: flex;
5008      flex-direction: column;
5009      height: auto;
5010      transition: 0.4s;
5011      user-select: none;
5012    }
5013    .student-results .div-text {
5014      background-color: color-mix(in srgb, white 40%, transparent);
5015      border-radius: 20px;
5016      display: flex;
5017      flex-direction: column;
5018      height: 100%;
5019      padding: 15px;
5020      position: relative;
5021      box-shadow: inset 2px 2px 10px color-mix(in srgb, white 80%, transparent), inset -2px -2px 10px color-mix(in srgb, white 80%, transparent), 0px 6px 15px color-mix(in srgb, black 7%, transparent);
5022      padding-block-start: 80px;
5023    }
5024    .student-results .p-salary {
5025      background-color: #cfff32;
5026      border-radius: 100px;
5027      box-shadow: 0 0 7px color-mix(in srgb, black 8%, transparent);
5028      font-family: "GNF", sans-serif;
5029      font-size: 24px;
5030      height: 44px;
5031      margin-block-end: -69px;
5032      margin-inline: auto;
5033      padding: 10px 15px;
5034      text-transform: uppercase;
5035      z-index: 2;
5036    }
5037    .student-results .p-text {
5038      color: color-mix(in srgb, black 50%, transparent);
5039      font-family: "Inter", sans-serif;
5040      font-size: 14px;
5041      font-weight: 500;
5042      letter-spacing: -0.02em;
5043      line-height: 130%;
5044      margin-block-end: 20px;
5045      text-wrap: balance;
5046    }
5047    .student-results .p-name {
5048      color: color-mix(in srgb, black 80%, transparent);
5049      font-family: "Inter", sans-serif;
5050      font-size: 12px;
5051      font-weight: 600;
5052      letter-spacing: -0.01em;
5053      line-height: 115%;
5054      margin-block-start: auto;
5055    }
5056    .student-results .p-name:has(+ .p-experience:not(:empty)) {
5057      margin-block-end: 2px;
5058    }
5059    .student-results .p-experience {
5060      color: color-mix(in srgb, black 25%, transparent);
5061      font-family: "Inter", sans-serif;
5062      font-size: 12px;
5063    }
5064    .student-results .img {
5065      height: 170px;
5066      margin-block-end: -25px;
5067      margin-inline: auto;
5068      scale: 1.2;
5069      transform-origin: center;
5070      transition: 0.4s;
5071      width: 170px;
5072      z-index: 1;
5073    }
5074    .student-results .swiper-pagination {
5075      align-items: center;
5076      background-color: color-mix(in srgb, black 5%, transparent);
5077      border-radius: 100px;
5078      bottom: unset !important;
5079      display: flex;
5080      gap: 5px;
5081      margin-block-start: 45px;
5082      margin-inline: auto;
5083      padding: 10px 12px;
5084      position: relative;
5085      top: unset !important;
5086      width: fit-content !important;
5087    }
5088    .student-results .swiper-pagination-bullet {
5089      background-color: color-mix(in srgb, black 10%, transparent);
5090      box-shadow: 0 2px 5px 1px transparent;
5091      height: 5px !important;
5092      margin: 0 !important;
5093      opacity: 1 !important;
5094      width: 5px !important;
5095      transition: 0.2s;
5096    }
5097    .student-results .swiper-pagination-bullet-active {
5098      background-color: #CFFF32;
5099      box-shadow: 0 2px 5px 1px rgba(75, 98, 2, 0.1019607843);
5100      width: 24px !important;
5101      border-radius: 100px;
5102    }
5103    @media (width <= 1450px) {
5104      .student-results .div-reviews {
5105        gap: 60px 25px;
5106        grid-template-columns: 1fr 1fr 1fr 1fr;
5107      }
5108      .student-results .div-review:empty {
5109        display: none;
5110      }
5111    }
5112    @media (width <= 950px) {
5113      .student-results .div-reviews {
5114        grid-template-columns: 1fr 1fr;
5115      }
5116    }
5117    @media (width <= 500px) {
5118      .student-results .div-reviews {
5119        display: flex;
5120        gap: unset;
5121        max-height: unset;
5122        max-width: 0;
5123        padding-inline: 0;
5124      }
5125      .student-results .div-review {
5126        width: 210px;
5127      }
5128      .student-results .swiper {
5129        overflow: visible;
5130        width: 100%;
5131      }
5132      .student-results .side-media {
5133        display: none;
5134      }
5135    }
5136    @media (width > 500px) {
5137      .student-results .div-review:not(:empty):hover {
5138        cursor: pointer;
5139        scale: 1.01;
5140        translate: 0 -5px;
5141      }
5142      .student-results .div-review:hover .img {
5143        scale: 1.23;
5144      }
5145      .student-results .div-review:not(.--is-expanded) .p-text {
5146        -webkit-box-orient: vertical;
5147        -webkit-line-clamp: 5;
5148        clip-path: content-box;
5149        display: -webkit-box;
5150        line-clamp: 5;
5151        overflow: hidden;
5152      }
5153      .student-results .swiper-pagination {
5154        display: none;
5155      }
5156    }
5157    
5158    .cases {
5159      display: none !important;
5160      align-items: center;
5161      padding-bottom: 300px;
5162      background-color: #f8f8f8;
5163    }
5164    .cases .img-separator {
5165      margin-block: -50px clamp(100px, 100px + (200 - 100) * (100dvw - 375px) / (1440 - 375), 200px);
5166      max-width: 100%;
5167    }
5168    @media (max-width: 1024px) {
5169      .cases {
5170        padding-bottom: 0;
5171      }
5172    }
5173    .cases__title {
5174      font-family: "Loos Extended", sans-serif;
5175      font-size: clamp(26px, 26px + (38 - 26) * (100dvw - 375px) / (1440 - 375), 38px);
5176      font-weight: 500;
5177      letter-spacing: -0.01em;
5178      margin-top: 20px;
5179      transform: none;
5180    }
5181    .cases__cases {
5182      align-items: center;
5183      backdrop-filter: blur(9px);
5184      background-color: #f2f2f2;
5185      border-radius: 40px;
5186      box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.0705882353);
5187      justify-content: flex-start;
5188      margin-top: 104px;
5189      padding-inline: 10px;
5190      width: 100%;
5191      z-index: 3;
5192    }
5193    .cases__card {
5194      padding: 50px;
5195      border-radius: 20px;
5196      border: 1px solid rgba(0, 0, 0, 0.0509803922);
5197      display: flex;
5198      align-items: center;
5199      justify-content: flex-start;
5200      position: relative;
5201    }
5202    .cases__image {
5203      counter-increment: card-counter;
5204      border-radius: 20px;
5205      position: relative;
5206      box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1490196078);
5207    }
5208    .cases__image img {
5209      max-width: 100%;
5210      max-height: 100%;
5211      object-fit: contain;
5212      object-position: center;
5213      border-radius: inherit;
5214    }
5215    .cases__image-counter {
5216      position: absolute;
5217      top: 0px;
5218      right: 0px;
5219      transform: translate(50%, -50%);
5220      background-color: rgba(255, 255, 255, 0.4);
5221      width: 40px;
5222      aspect-ratio: 1;
5223      border-radius: 50%;
5224      backdrop-filter: blur(10px);
5225      box-shadow: -6px 6px 10px 0px rgba(0, 0, 0, 0.0509803922);
5226      box-shadow: -2px -2px 10px 0px rgba(255, 255, 255, 0.8) inset;
5227      box-shadow: 2px 2px 10px 0px rgba(255, 255, 255, 0.8) inset;
5228    }
5229    .cases__image-counter .counter {
5230      width: 100%;
5231      height: 100%;
5232      border-radius: inherit;
5233    }
5234    .cases__image-counter .counter::after {
5235      content: counter(card-counter) !important;
5236      width: 100%;
5237      height: 100%;
5238      color: rgba(0, 0, 0, 0.5019607843);
5239      font-size: 16px;
5240      font-weight: 500;
5241      font-family: "Inter";
5242      display: flex;
5243      align-items: center;
5244      justify-content: center;
5245    }
5246    
5247    .tabs__header {
5248      position: relative;
5249      justify-content: center;
5250      align-items: center;
5251      border-radius: 50px;
5252      gap: 10px;
5253      background-color: #ebebeb;
5254      translate: 0 -50%;
5255      padding: 5px;
5256    }
5257    .tabs__btn {
5258      background: none;
5259      border: none;
5260      padding: 8.5px 20px;
5261      cursor: pointer;
5262      position: relative;
5263      z-index: 1;
5264      font-family: "Inter";
5265      font-size: 16px;
5266      line-height: 135%;
5267      font-weight: 500;
5268      color: rgba(0, 0, 0, 0.5019607843);
5269    }
5270    .tabs__btn.active {
5271      font-weight: 600;
5272      padding-left: 45px;
5273      z-index: 5;
5274    }
5275    .tabs__indicator {
5276      position: absolute;
5277      left: 0;
5278      background: #0066ff;
5279      background: transparent;
5280      transition: all 0.3s ease;
5281      will-change: transform, width;
5282      z-index: 3;
5283    }
5284    .tabs__indicator div {
5285      backdrop-filter: none;
5286    }
5287    .tabs__indicator .side-media__img {
5288      width: 32px;
5289      height: 32px;
5290    }
5291    .tabs__content {
5292      position: relative;
5293      overflow: hidden;
5294      width: 100%;
5295    }
5296    .tabs__content .swiper {
5297      /*padding-bottom: 120px !important;*/
5298    }
5299    .tabs__content .swiper-controllers {
5300      width: fit-content;
5301      backdrop-filter: blur(6px);
5302      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.0509803922);
5303      bottom: 0;
5304      left: 50%;
5305      transform: translateX(-50%);
5306      align-items: center;
5307      justify-content: center;
5308      padding: 10px;
5309      gap: 10px;
5310      border-radius: 40px;
5311    }
5312    .tabs__content .swiper__arrow {
5313      width: 20px;
5314      height: 20px;
5315      display: flex;
5316      align-items: center;
5317      justify-content: center;
5318      z-index: 4;
5319      cursor: pointer;
5320    }
5321    .tabs__content .swiper__arrow img {
5322      max-width: 100%;
5323      max-height: 100%;
5324      object-fit: contain;
5325      object-position: center;
5326    }
5327    .tabs__content .swiper__pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
5328      position: relative;
5329      left: 0%;
5330      transform: translate(0, 50%);
5331      display: flex;
5332      gap: 5px;
5333      z-index: 10;
5334      border-radius: 40px;
5335      background-color: #f2f2f2;
5336      width: fit-content;
5337      padding: 10px 12px;
5338    }
5339    .tabs__content .swiper__pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
5340      background: #ccc;
5341      opacity: 1;
5342      width: 5px;
5343      height: 5px;
5344      border-radius: 50%;
5345      transition: all 0.3s ease;
5346      margin: 0;
5347    }
5348    .tabs__content .swiper__pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active {
5349      width: 24px;
5350      border-radius: 30px;
5351      background: #cfff32;
5352    }
5353    .tabs__panel {
5354      position: absolute;
5355      top: 0;
5356      left: 0;
5357      width: 100%;
5358      opacity: 0;
5359      transform: translateX(2000px);
5360      transition: none;
5361      padding: 10px;
5362      counter-reset: card-counter;
5363    }
5364    .tabs__panel.active {
5365      position: relative;
5366      opacity: 1;
5367      transform: translateX(0);
5368    }
5369    
5370    .advantages {
5371      justify-content: space-between;
5372      background-color: #e4e4e4;
5373      position: relative;
5374      background-image: url("data:image/svg+xml,%3csvg%20width='2'%20height='1262'%20viewBox='0%200%202%201262'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cline%20x1='0.875'%20y1='-336'%20x2='0.87493'%20y2='1264'%20stroke='url(%23paint0_linear_4807_3885)'%20stroke-opacity='0.05'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_4807_3885'%20x1='-0.125'%20y1='-336'%20x2='-0.12507'%20y2='1264'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
5375      background-size: 176px 100%;
5376    }
5377    .advantages .side-media__img {
5378      background-color: white;
5379    }
5380    .advantages .advantages__image-mobile {
5381      display: none;
5382      margin-inline: auto;
5383      max-height: 400px;
5384      max-width: 100%;
5385    }
5386    .advantages .advantages__image-mobile img {
5387      max-width: 100%;
5388    }
5389    @media (width <= 660px) {
5390      .advantages .advantages__image {
5391        display: none;
5392      }
5393      .advantages .advantages__image-mobile {
5394        display: block;
5395      }
5396    }
5397    .advantages::before {
5398      content: "";
5399      position: absolute;
5400      left: 0;
5401      right: 0;
5402      height: 460px;
5403      background: linear-gradient(to top, #e4e4e4 0%, #f8f8f8 100%);
5404      z-index: 0;
5405    }
5406    @media (max-width: 1024px) {
5407      .advantages {
5408        justify-content: center;
5409      }
5410    }
5411    .advantages__content {
5412      align-items: flex-start;
5413      max-width: calc(100dvw - 40px);
5414      padding-bottom: 250px;
5415      padding-top: clamp(100px, 100px + (252 - 100) * (100dvw - 375px) / (1440 - 375), 252px);
5416      z-index: 1;
5417    }
5418    .advantages__image {
5419      position: relative;
5420      flex: 1;
5421      align-items: center;
5422    }
5423    .advantages__image::before {
5424      content: "";
5425      display: block;
5426      flex: 1;
5427    }
5428    @media (max-width: 1024px) {
5429      .advantages__image {
5430        position: absolute;
5431        top: 0;
5432        height: 100%;
5433        z-index: 0;
5434      }
5435    }
5436    .advantages__image .garbage {
5437      flex: 1;
5438    }
5439    .advantages__image .image__container {
5440      position: sticky;
5441      bottom: -14%;
5442      max-width: 1000px;
5443      width: 100%;
5444    }
5445    .advantages__image img {
5446      padding-left: 18%;
5447      padding-right: 5.7%;
5448      max-height: 100%;
5449      object-fit: contain;
5450      object-position: center;
5451      max-width: 100%;
5452      width: 100%;
5453    }
5454    .advantages__title {
5455      font-family: "Loos Extended", sans-serif;
5456      font-size: clamp(26px, 26px + (38 - 26) * (100dvw - 375px) / (1440 - 375), 38px);
5457      font-weight: 500;
5458      letter-spacing: -0.01em;
5459      line-height: 115%;
5460      padding-top: 20px;
5461    }
5462    .advantages__title span {
5463      color: color-mix(in srgb, black 25%, transparent);
5464    }
5465    @media (width <= 450px) {
5466      .advantages__title br {
5467        display: none;
5468      }
5469    }
5470    .advantages__cards {
5471      translate: -11px;
5472      margin-top: 75px;
5473      flex: 1;
5474      z-index: 4;
5475      display: grid;
5476      grid-template-columns: [col1] 364px [col2] 13px [col3] 553px [col-end];
5477      grid-template-rows: [row1] 465px [row3] 29px [row4] 170px [sd] 32px [row5] 450px [row-end];
5478    }
5479    @media (max-width: 1024px) {
5480      .advantages__cards {
5481        grid-template-columns: 1fr;
5482        grid-template-rows: auto;
5483        gap: 20px;
5484        translate: 0;
5485        margin-top: 40px;
5486      }
5487    }
5488    .advantages__card {
5489      border-radius: 30px;
5490    }
5491    .advantages__card_1 {
5492      grid-column: col1;
5493      grid-row: row1/sd;
5494      padding-bottom: 0 !important;
5495    }
5496    @media (max-width: 1024px) {
5497      .advantages__card_1 {
5498        grid-column: 1;
5499        grid-row: auto;
5500        padding-bottom: 20px !important;
5501      }
5502    }
5503    .advantages__card_1 .advantages-card__title {
5504      max-width: 270px;
5505    }
5506    .advantages__card_1 .advantages-card__image img {
5507      object-position: bottom;
5508      border-radius: 0 0 30px 30px;
5509    }
5510    .advantages__card_2 {
5511      grid-column: col3;
5512      grid-row: row1/row3;
5513      padding-bottom: 0 !important;
5514    }
5515    @media (max-width: 1024px) {
5516      .advantages__card_2 {
5517        grid-column: 1;
5518        grid-row: auto;
5519        padding-bottom: 20px !important;
5520      }
5521    }
5522    .advantages__card_2 .advantages-card__discription {
5523      max-width: 365px;
5524    }
5525    .advantages__card_3 {
5526      padding: 0 !important;
5527      grid-column: col3;
5528      grid-row: row4;
5529      background-color: #ffdac1;
5530    }
5531    @media (max-width: 1024px) {
5532      .advantages__card_3 {
5533        grid-column: 1;
5534        grid-row: auto;
5535        padding: 20px !important;
5536      }
5537    }
5538    .advantages__card_3 .advantages-card__text {
5539      max-width: 350px;
5540    }
5541    .advantages__card_4 {
5542      grid-column: col1/col-end;
5543      grid-row: row5;
5544      background-color: #e2f0cb;
5545    }
5546    @media (max-width: 1024px) {
5547      .advantages__card_4 {
5548        grid-column: 1;
5549        grid-row: auto;
5550      }
5551    }
5552    .advantages__card_4 .advantages-card__discription {
5553      max-width: 500px;
5554    }
5555    
5556    .advantages-card {
5557      position: relative;
5558      box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.1019607843);
5559      padding: 24px;
5560      padding-top: 30px;
5561      background-color: #efefef;
5562      transition: 1s opacity, translate;
5563      transform-origin: top;
5564    }
5565    @media (max-width: 1440px) {
5566      .advantages-card {
5567        padding: 20px;
5568        padding-top: 24px;
5569      }
5570    }
5571    .advantages-card__discription {
5572      text-wrap: balance;
5573    }
5574    .advantages-card__image {
5575      flex: 1;
5576      display: flex;
5577      align-items: center;
5578      justify-content: flex-end;
5579    }
5580    .advantages-card__image img {
5581      max-width: calc(100% + 40px);
5582      max-height: 100%;
5583      height: 100%;
5584      object-fit: contain;
5585      object-position: bottom;
5586    }
5587    .advantages-card__text {
5588      padding: 24px;
5589      padding-top: 36.5px;
5590    }
5591    .advantages-card__discription {
5592      padding-top: 10px;
5593      font-weight: 500;
5594      font-family: "Inter";
5595      font-size: 16px;
5596      line-height: 130%;
5597      color: rgba(0, 0, 0, 0.4);
5598      letter-spacing: -0.35px;
5599    }
5600    @media (max-width: 1440px) {
5601      .advantages-card__discription {
5602        font-size: 14px;
5603      }
5604    }
5605    @media (max-width: 1024px) {
5606      .advantages-card__discription {
5607        font-size: 14px;
5608      }
5609    }
5610    @media (max-width: 375px) {
5611      .advantages-card__discription {
5612        font-size: 14px;
5613      }
5614    }
5615    .advantages-card__title {
5616      font-weight: 600;
5617      font-family: "Inter";
5618      font-size: 20px;
5619      line-height: 120%;
5620      letter-spacing: -0.4px;
5621    }
5622    @media (max-width: 1440px) {
5623      .advantages-card__title {
5624        font-size: 16px;
5625      }
5626    }
5627    @media (max-width: 1024px) {
5628      .advantages-card__title {
5629        font-size: 16px;
5630      }
5631    }
5632    @media (max-width: 375px) {
5633      .advantages-card__title {
5634        font-size: 16px;
5635      }
5636    }
5637    .advantages-card__side-media {
5638      position: absolute;
5639      top: 0px;
5640      left: 20px;
5641      transform: translateY(-50%);
5642      width: fit-content;
5643    }
5644    
5645    .advantages__card_4 .advantages-card__image img {
5646      width: 100%;
5647    }
5648    
5649    @media (width >= 1025px) {
5650      .advantages__card_2 .advantages-card__image img {
5651        margin-inline: -20px;
5652        width: calc(100% + 40px);
5653      }
5654    }
5655    @media (width < 1025px) {
5656      .advantages__name {
5657        margin-inline: auto;
5658      }
5659      .advantages__title {
5660        margin-block-end: 50px;
5661        margin-inline: auto;
5662        text-align: center;
5663      }
5664      .advantages__card_1 {
5665        padding-block-end: 0 !important;
5666      }
5667      .advantages__card_1 .advantages-card__image img {
5668        max-height: 380px;
5669      }
5670      .advantages__card_2 {
5671        padding-block-end: 0 !important;
5672      }
5673      .advantages__card_2__discription {
5674        position: relative;
5675        z-index: 1;
5676      }
5677      .advantages__card_2 .advantages-card__image img {
5678        border-radius: 0 0 30px 30px;
5679        margin-inline: -20px;
5680        width: calc(100% + 40px);
5681      }
5682      .advantages__card_2 .advantages-card__image picture {
5683        width: 100%;
5684      }
5685      .advantages__card_3 .advantages-card__image {
5686        border-radius: 0 30px 30px 0px;
5687        height: calc(100% + 40px);
5688        margin-block: -20px;
5689        margin-inline-end: -20px;
5690      }
5691      .advantages__card_4 .advantages-card__image img {
5692        min-height: 130px;
5693      }
5694    }
5695    @media (width <= 550px) {
5696      .advantages__card_3 {
5697        align-items: center;
5698        display: flex;
5699        padding: 25px !important;
5700      }
5701      .advantages__card_3__text {
5702        height: fit-content;
5703      }
5704      .advantages__card_3 .advantages-card__image {
5705        flex: unset;
5706        height: calc(100% + 50px);
5707        margin-inline-end: -25px;
5708        border-radius: 0 30px 30px 0px;
5709        overflow: hidden;
5710        min-width: 130px;
5711      }
5712      .advantages__card_3 .advantages-card__image img {
5713        height: 100%;
5714        width: 100%;
5715        object-fit: cover;
5716        object-position: left;
5717      }
5718      .advantages__card_3 .advantages-card__text {
5719        padding: 0px;
5720      }
5721    }
5722    .faq {
5723      z-index: 2;
5724      background: radial-gradient(128.9% 26.53% at 59.71% 25.97%, #ffffff 0%, #f2f2f2 100%);
5725    }
5726    .faq .green-arrow {
5727      margin-inline-start: 10px;
5728    }
5729    .faq .img-background {
5730      display: none;
5731    }
5732    .faq__header {
5733      width: 100%;
5734      position: relative;
5735      display: flex;
5736      justify-content: center;
5737      align-items: start;
5738    }
5739    .faq__header .header__decor {
5740      height: 106px;
5741      position: absolute;
5742      width: 100%;
5743      z-index: 1;
5744    }
5745    .faq__header #header_ball {
5746      z-index: 0;
5747      height: 265px;
5748    }
5749    .faq-container {
5750      margin: 0 auto;
5751      padding-top: clamp(0px, 0px + (214 - 0) * (100dvw - 375px) / (1440 - 375), 214px);
5752      max-width: 763px;
5753    }
5754    .faq-container--center {
5755      display: flex;
5756      justify-content: center;
5757    }
5758    .faq__content {
5759      margin-top: 58px;
5760      width: 100%;
5761    }
5762    .faq__title {
5763      display: flex;
5764      align-items: center;
5765      justify-content: center;
5766      margin-bottom: 40px;
5767    }
5768    .faq__subtitle {
5769      display: flex;
5770      justify-content: center;
5771      margin-bottom: 30px;
5772    }
5773    .faq-subtitle h3 {
5774      font-weight: 400;
5775      color: rgba(0, 0, 0, 0.5019607843);
5776      font-size: 16px;
5777      font-family: GNF;
5778      line-height: 130%;
5779      text-transform: uppercase;
5780    }
5781    .faq__questions {
5782      border-bottom: 1px solid;
5783      gap: 10px;
5784      max-width: 577px;
5785      border-image-source: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
5786    }
5787    .faq .question {
5788      align-items: center;
5789      border-radius: 40px;
5790      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725);
5791      gap: 15px;
5792      justify-content: space-between;
5793      letter-spacing: -0.02em;
5794      padding: 5px;
5795      background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), linear-gradient(0deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));
5796      padding-left: 15px;
5797    }
5798    .faq .question::before {
5799      pointer-events: none;
5800    }
5801    @media (width <= 850px) {
5802      .faq .question {
5803        padding: 10px;
5804        padding-inline-start: 20px;
5805      }
5806    }
5807    @media (max-width: 375px) {
5808      .faq .question {
5809        /*
5810        padding: 12px;
5811        padding-right: 10px;
5812        padding-left: 30px;
5813        */
5814      }
5815    }
5816    @media (max-width: 1440px) {
5817      .faq .question .green-arrow {
5818        width: 32px;
5819        min-width: 32px;
5820        min-height: 32px;
5821      }
5822    }
5823    .faq .question__content {
5824      color: rgba(0, 0, 0, 0.8);
5825      font-family: "Inter";
5826      font-size: 15px;
5827      font-weight: 500;
5828      line-height: 130%;
5829    }
5830    .faq__separator {
5831      margin-top: 120px;
5832      margin-bottom: 120px;
5833    }
5834    .faq .separator {
5835      height: 1px;
5836      width: 100%;
5837      background: linear-gradient(to right, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02));
5838    }
5839    @media (width <= 700px) {
5840      .faq .img-background {
5841        display: block;
5842      }
5843    }
5844    
5845    /* QUESTIONS BLOCK */
5846    .questions-block {
5847      background: radial-gradient(68.52% 33.45% at 59.55% 33.45%, #ffffff 0%, #f2f2f2 100%);
5848      padding-bottom: 200px;
5849      position: relative;
5850    }
5851    .questions-block p {
5852      color: black;
5853    }
5854    
5855    .questions-container {
5856      width: 89.3%;
5857      margin: 0 auto;
5858    }
5859    
5860    @media (min-width: 400px) {
5861      .questions-container {
5862        width: 93.06%;
5863      }
5864    }
5865    .questions-block__title-section {
5866      display: flex;
5867      justify-content: center;
5868      margin-bottom: -18px;
5869      position: relative;
5870      z-index: 2;
5871    }
5872    
5873    .questions-block__content {
5874      background: #eeeeee;
5875      border-radius: 30px;
5876      margin: 0 auto;
5877      padding-bottom: 20px;
5878      width: clamp(335px, 335px + (577 - 335) * (100dvw - 375px) / (1440 - 375), 577px);
5879      z-index: 1;
5880      box-shadow: inset 0px 0px 50px 4px color-mix(in srgb, white 80%, transparent), 0px 6px 24px 0px rgba(0, 0, 0, 0.1215686275);
5881      background-image: url("../assets/images/waves.svg");
5882      background-position: center top;
5883      background-repeat: no-repeat;
5884    }
5885    
5886    .question-subtitle-container {
5887      display: flex;
5888      flex-direction: column;
5889      align-items: center;
5890    }
5891    
5892    .questions-block__subtitle {
5893      margin-left: 20px;
5894      margin-right: 20px;
5895      margin-top: 69px;
5896      max-width: 39ch;
5897      margin-bottom: 10px;
5898    }
5899    
5900    .questions-block__subtitle p {
5901      color: #000;
5902      font: 500 22px/1.1 "Loos Extended", sans-serif;
5903      line-height: 110%;
5904      text-align: center;
5905      text-align: center;
5906    }
5907    
5908    .question__info {
5909      max-width: 350px;
5910      text-align: center;
5911      text-wrap: balance;
5912    }
5913    
5914    .question__info p {
5915      color: rgba(0, 0, 0, 0.5);
5916      font: 500 clamp(14px, 14px + (15 - 14) * (100dvw - 375px) / (1440 - 375), 15px)/1.3 "Inter", sans-serif;
5917      letter-spacing: -0.02em;
5918      line-height: 135%;
5919      margin-bottom: 110px;
5920      text-align: center;
5921    }
5922    
5923    .text-gray {
5924      color: rgba(0, 0, 0, 0.2509803922);
5925    }
5926    
5927    .question-block__form {
5928      width: 100%;
5929    }
5930    
5931    .question-block__input {
5932      background: rgba(0, 0, 0, 0.0509803922);
5933      border-radius: 14px;
5934      border: none;
5935      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725);
5936      box-sizing: border-box;
5937      font-family: "GNF", sans-serif;
5938      font-size: 18px;
5939      margin-bottom: 10px;
5940      padding: 21px 0 21px 20px;
5941      text-transform: uppercase;
5942      width: 100%;
5943    }
5944    
5945    .question-block__input.last-input {
5946      margin-bottom: 20px;
5947    }
5948    
5949    .question-button__content {
5950      display: flex;
5951      align-items: center;
5952      justify-content: space-between;
5953      position: relative;
5954      z-index: 2;
5955    }
5956    
5957    @media (min-width: 1023px) {
5958      .question-button__content {
5959        align-items: end;
5960      }
5961    }
5962    .question-block__form-button {
5963      align-items: flex-end;
5964      background: #cfff32;
5965      border-radius: 14px;
5966      cursor: pointer;
5967      display: flex;
5968      font-family: "GNF", sans-serif;
5969      font-size: 18px;
5970      height: 130px;
5971      justify-content: space-between;
5972      overflow: hidden;
5973      padding: 20px 20px 20px 24px;
5974      position: relative;
5975      text-transform: uppercase;
5976      transition: 0.3s;
5977      width: 100%;
5978      box-shadow: inset 0 -6px 14px 0 rgba(255, 255, 255, 0.5), inset 0 6px 14px 0 rgba(255, 255, 255, 0.5), inset 4px 0 30px 0 rgba(255, 255, 255, 0.8), inset -4px 0 30px 0 rgba(255, 255, 255, 0.8), 0 2px 10px 0 rgba(0, 0, 0, 0.15);
5979    }
5980    .question-block__form-button p,
5981    .question-block__form-button .question-button__button-icon {
5982      transition: 0.2s;
5983    }
5984    .question-block__form-button:hover {
5985      box-shadow: none;
5986      background-color: black;
5987    }
5988    .question-block__form-button:hover p {
5989      color: white;
5990    }
5991    .question-block__form-button:hover::before {
5992      opacity: 0;
5993    }
5994    .question-block__form-button:hover .question-button__button-icon {
5995      filter: invert(1);
5996    }
5997    
5998    .question-button__button-icon {
5999      background-color: #000000;
6000      height: 32px;
6001      width: 32px;
6002    }
6003    .question-button__button-icon svg {
6004      color: white;
6005    }
6006    
6007    /* PHONE INPUT */
6008    .phone-input {
6009      display: flex;
6010      align-items: center;
6011      border: 1.5px solid rgba(255, 255, 255, 0.4);
6012      border-radius: 14px;
6013      padding: 8px 0 8px 8px;
6014      background: rgba(0, 0, 0, 0.05);
6015      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725);
6016      width: 100%;
6017      border: none;
6018    }
6019    
6020    .phone-input__phone-code {
6021      align-items: center;
6022      background: rgba(255, 255, 255, 0.3294117647);
6023      border-radius: 12px;
6024      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
6025      cursor: pointer;
6026      display: flex;
6027      gap: 6.5px;
6028      height: 42px;
6029      margin-right: 12px;
6030      padding-right: 12px;
6031    }
6032    
6033    .phone-input__phone-code select {
6034      -moz-appearance: none;
6035      -webkit-appearance: none;
6036      appearance: none;
6037      background: transparent;
6038      border: none;
6039      box-shadow: none;
6040      color: rgba(0, 0, 0, 0.4);
6041      cursor: pointer;
6042      font-family: "GNF", sans-serif;
6043      font-size: 18px;
6044      font-weight: 400;
6045      height: 100%;
6046      margin-inline-end: -30px;
6047      outline: none;
6048      padding-inline-end: 30px;
6049      padding-left: 12px;
6050      text-transform: uppercase;
6051      background-position: right center;
6052      background-repeat: no-repeat;
6053    }
6054    
6055    .phone-input__phone-code select:focus {
6056      outline: none;
6057      border: none;
6058      box-shadow: none;
6059    }
6060    
6061    .phone-input__phone-number {
6062      border: none;
6063      background: transparent;
6064      font-family: GNF;
6065      font-size: 18px;
6066      text-transform: uppercase;
6067      width: 100%;
6068      outline: none;
6069    }
6070    
6071    /* Footer Styles */
6072    .footer {
6073      height: 530px;
6074      margin-block: -30px;
6075      position: relative;
6076      z-index: 1;
6077      transition: 3s;
6078      transition-property: opacity, translation;
6079    }
6080    
6081    .footer__container {
6082      background-color: #f2f2f2;
6083      border-radius: 30px;
6084      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
6085      display: flex;
6086      height: 100%;
6087      justify-content: space-between;
6088      padding: 20px !important;
6089    }
6090    
6091    /* Лого и основная информация */
6092    .footer__logo-section {
6093      display: flex;
6094      flex-direction: column;
6095      align-items: flex-start;
6096    }
6097    
6098    .footer__logo {
6099      align-items: center;
6100      aspect-ratio: 1;
6101      background-color: #f7f7f7;
6102      border-radius: 20px;
6103      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
6104      display: flex;
6105      height: 60px;
6106      justify-content: center;
6107      margin-bottom: 110px;
6108      white-space: nowrap;
6109      width: 60px;
6110    }
6111    .footer__logo img {
6112      height: clamp(15px, 15px + (30 - 15) * (100dvw - 375px) / (1440 - 375), 30px);
6113      width: clamp(15px, 15px + (30 - 15) * (100dvw - 375px) / (1440 - 375), 30px);
6114    }
6115    
6116    .footer__title {
6117      font-family: "Inter", sans-serif;
6118      font-weight: 500;
6119      font-size: 20px;
6120      line-height: 120%;
6121      color: #000000;
6122      margin-bottom: 30px;
6123      letter-spacing: -0.02em;
6124    }
6125    
6126    .footer__info {
6127      color: #000000;
6128      font-family: "Inter", sans-serif;
6129      font-size: 12px;
6130      font-weight: 500;
6131      letter-spacing: -0.01em;
6132      line-height: 1.5;
6133    }
6134    
6135    /* Социальные иконки */
6136    .footer__social-section {
6137      /*
6138      width: 570px;
6139      height: 100px;
6140      */
6141      border-radius: 15px;
6142      background-color: rgba(255, 255, 255, 0.4);
6143      display: flex;
6144      gap: 10px;
6145      justify-content: space-around;
6146      align-items: center;
6147      padding: 10px;
6148      box-shadow: 0px 6px 25px 0px rgba(0, 0, 0, 0.0509803922);
6149      backdrop-filter: blur(9px);
6150    }
6151    
6152    .footer__social-item {
6153      align-items: flex-start; /* Прижимаем к левому краю */
6154      background-color: white;
6155      border-radius: 10px;
6156      box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0784313725);
6157      box-sizing: border-box;
6158      cursor: pointer;
6159      display: flex;
6160      flex-direction: column;
6161      height: clamp(60px, 60px + (100 - 60) * (100dvw - 375px) / (1440 - 375), 100px);
6162      justify-content: space-between; /* Распределяем пространство между элементами */
6163      min-height: clamp(60px, 60px + (100 - 60) * (100dvw - 375px) / (1440 - 375), 100px);
6164      min-width: clamp(60px, 60px + (100 - 60) * (100dvw - 375px) / (1440 - 375), 100px);
6165      padding: 10px;
6166      position: relative; /* Для позиционирования элементов */
6167      transition: all 0.3s linear;
6168      width: clamp(60px, 60px + (100 - 60) * (100dvw - 375px) / (1440 - 375), 100px);
6169    }
6170    @media (hover: hover) and (pointer: fine) {
6171      .footer__social-item:hover {
6172        background-color: #cfff32;
6173        box-shadow: 0px 0px 24px rgba(207, 255, 50, 0.4);
6174        /*
6175        box-shadow:
6176          0px 2px 10px 0px #0000000d, 0px -5px 14px 0px #ffffff4d inset,
6177          0px 5px 14px 0px #ffffff4d inset, 4px 0px 30px 0px #ffffff80 inset,
6178          -4px 0px 30px 0px #ffffff80 inset, 0px 0px 24px 0px #cfff3266
6179        ;
6180        */
6181      }
6182      .footer__social-item:hover .footer__social-name {
6183        color: black !important;
6184      }
6185      .footer__social-item:hover img {
6186        filter: brightness(0.3);
6187      }
6188    }
6189    
6190    .footer__social-icon {
6191      align-items: flex-start;
6192      display: flex;
6193      height: 18px;
6194      justify-content: flex-start;
6195      margin: 0;
6196      transition: 0.3s;
6197      width: 18px; /* Уменьшенный размер */
6198    }
6199    
6200    .footer__social-icon img {
6201      height: 18px;
6202      transition: 0.3s;
6203      width: 18px;
6204    }
6205    
6206    .footer__social-name {
6207      font-family: "Inter", sans-serif;
6208      font-size: 14px;
6209      font-weight: 500;
6210      color: #7b7b7b;
6211      text-align: left; /* Выравнивание по левому краю */
6212      align-self: flex-start; /* Прижимаем к левому краю */
6213      margin-top: auto; /* Прижимаем к нижнему краю */
6214      padding-bottom: 2px; /* Небольшой отступ от нижнего края */
6215      line-height: 130%;
6216      letter-spacing: -0.02em;
6217      transition: 0.4s;
6218    }
6219    
6220    /* Общие стили */
6221    .footer__title-main {
6222      color: #000000;
6223    }
6224    
6225    .footer__title-sub,
6226    .footer__copyright,
6227    .footer__info {
6228      color: #b6b6b6;
6229    }
6230    
6231    .footer__info-wrapper {
6232      margin-top: auto;
6233      display: flex;
6234      flex-direction: column;
6235    }
6236    
6237    .footer__links {
6238      display: flex;
6239      gap: 20px;
6240      margin-top: 40px;
6241      padding-bottom: 10px;
6242    }
6243    
6244    .footer__link {
6245      color: #797979;
6246      font-family: "Caption", sans-serif;
6247      font-size: 12px;
6248      letter-spacing: -0.01em;
6249      text-decoration: none;
6250    }
6251    
6252    .footer__link:hover {
6253      text-decoration: underline;
6254    }
6255    
6256    .footer__social-name {
6257      font-family: "Inter", sans-serif;
6258      font-size: clamp(12px, 12px + (14 - 12) * (100dvw - 375px) / (1440 - 375), 14px);
6259      font-weight: 500;
6260      color: #969696;
6261      text-align: center;
6262    }
6263    
6264    /* Правая секция */
6265    .footer__right-section {
6266      display: flex;
6267      flex-direction: column;
6268      height: 100%;
6269      max-width: 100%;
6270      overflow: visible;
6271    }
6272    
6273    .footer__bottom-section {
6274      display: flex;
6275      justify-content: space-between;
6276      align-items: flex-start;
6277      gap: 48px;
6278      margin-top: auto;
6279      padding-bottom: 10px;
6280      width: 100%;
6281    }
6282    
6283    /* Секция курсов */
6284    .footer__courses-section {
6285      flex: 0 0 auto;
6286      min-width: 260px;
6287      margin-bottom: 0px;
6288    }
6289    
6290    .footer__courses-title,
6291    .footer__contacts-title,
6292    .footer__messengers-title {
6293      font-family: "GNF", sans-serif;
6294      font-weight: 400;
6295      color: #919191;
6296      margin-bottom: 20px;
6297      text-transform: uppercase;
6298      font-size: 16px;
6299    }
6300    
6301    .footer__courses-links {
6302      display: flex;
6303      flex-direction: column;
6304      gap: 8px;
6305      margin-bottom: 30px;
6306    }
6307    
6308    .footer__course-link,
6309    .footer__additional-link {
6310      color: #797979;
6311      font-family: "Inter", sans-serif;
6312      font-size: 16px;
6313      font-weight: 400;
6314      letter-spacing: -0.02em;
6315      text-decoration: none;
6316      white-space: nowrap;
6317    }
6318    .footer__course-link + .footer__course-link,
6319    .footer__course-link + .footer__additional-link,
6320    .footer__additional-link + .footer__course-link,
6321    .footer__additional-link + .footer__additional-link {
6322      margin-block-start: 2px;
6323    }
6324    
6325    .footer__additional-links {
6326      display: flex;
6327      flex-direction: column;
6328      gap: 8px;
6329    }
6330    
6331    .footer__course-link:hover,
6332    .footer__additional-link:hover {
6333      text-decoration: underline;
6334    }
6335    
6336    /* Контакты и мессенджеры */
6337    .footer__contacts-messengers-wrapper {
6338      display: flex;
6339      flex-direction: column;
6340      flex: 1 1 auto;
6341      min-width: 0;
6342      margin-left: 0px;
6343    }
6344    
6345    .footer__contacts-section {
6346      margin-bottom: 30px;
6347    }
6348    
6349    .footer__contact-item {
6350      color: #797979;
6351      cursor: pointer;
6352      font-family: "Inter", sans-serif;
6353      font-size: 15px;
6354      letter-spacing: -0.02em;
6355      margin-bottom: 8px;
6356      transition: color 0.2s;
6357      user-select: text;
6358    }
6359
6360    .footer__phone-block {
6361      margin-bottom: 12px;
6362    }
6363
6364    .footer__phone-block:last-child {
6365      margin-bottom: 0;
6366    }
6367
6368    .footer__contact-phone {
6369      color: #797979;
6370      cursor: pointer;
6371      font-family: "Inter", sans-serif;
6372      font-size: 15px;
6373      letter-spacing: -0.02em;
6374      text-decoration: none;
6375      transition: color 0.2s;
6376      user-select: text;
6377    }
6378
6379    .footer__contact-phone:hover {
6380      text-decoration: underline;
6381    }
6382
6383    .footer__contact-label {
6384      color: #797979;
6385      display: inline-block;
6386      font-family: "Inter", sans-serif;
6387      font-size: 13px;
6388      letter-spacing: -0.02em;
6389      margin-bottom: 2px;
6390      opacity: 0.85;
6391      user-select: text;
6392    }
6393    
6394    .footer__contact-item:hover {
6395      text-decoration: underline;
6396    }
6397    
6398    .footer__messengers-buttons {
6399      display: flex;
6400      gap: 10px;
6401    }
6402    
6403    .footer__messenger-button {
6404      background-color: #f7f7f7;
6405      border-radius: 100px;
6406      border: none;
6407      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.0509803922);
6408      color: #7b7b7b;
6409      cursor: pointer;
6410      font-family: "Inter", sans-serif;
6411      font-size: 14px;
6412      font-weight: 500;
6413      letter-spacing: -0.02em;
6414      padding: 8px 16px;
6415      transition: 0.25s;
6416      white-space: nowrap;
6417    }
6418    .footer__messenger-button:hover {
6419      background-color: #cfff32;
6420      color: black;
6421    }
6422    
6423    /* Адаптация для планшетов (1920px - 768px) */
6424    @media (max-width: 1440px) {
6425      .footer {
6426        height: 480px;
6427      }
6428      .footer__container {
6429        padding: 20px;
6430      }
6431      .footer__logo {
6432        width: 55px;
6433        height: 55px;
6434        margin-bottom: 90px;
6435      }
6436      .footer__title {
6437        font-size: 18px;
6438        margin-bottom: 25px;
6439      }
6440      /* Защищаем минимальное расстояние между курсами и лого */
6441      .footer__bottom-section {
6442        width: calc(100% - 70px - 10px); /* 70px - ширина соц.секции + 10px отступ */
6443        margin-left: auto;
6444      }
6445    }
6446    @media (max-width: 1200px) {
6447      .footer {
6448        height: 450px;
6449      }
6450      .footer__logo {
6451        margin-bottom: 70px;
6452      }
6453      .footer__title {
6454        font-size: 17px;
6455      }
6456      /* Фиксированные размеры для соц.секции */
6457      .footer__social-section {
6458        /*width: 570px !important;*/
6459        /*height: 100px !important;*/
6460        flex-shrink: 0; /* Запрещаем уменьшение */
6461      }
6462    }
6463    @media (max-width: 992px) {
6464      .footer__container {
6465        border-radius: 25px;
6466      }
6467      .footer__logo {
6468        width: 50px;
6469        height: 30px;
6470        margin-bottom: 60px;
6471      }
6472      .footer__title {
6473        font-size: 16px;
6474        margin-bottom: 20px;
6475      }
6476      /* Сохраняем жесткие размеры */
6477      .footer__social-section {
6478        /*
6479        width: 570px !important;
6480        height: 100px !important;
6481        */
6482      }
6483      /* Увеличиваем отступ между лого и контентом */
6484      .footer__container {
6485        gap: 20px;
6486      }
6487    }
6488    @media (max-width: 768px) {
6489      .footer {
6490        height: auto;
6491      }
6492      .footer__container {
6493        padding: 20px 15px;
6494        border-radius: 20px 20px 30px 30px;
6495      }
6496      .footer__container {
6497        align-items: flex-start;
6498        flex-direction: column;
6499      }
6500      /* Логотип и заголовок */
6501      .footer__logo-section {
6502        display: contents;
6503        flex-direction: column;
6504        align-items: flex-start;
6505        margin-bottom: 30px;
6506      }
6507      .footer__logo {
6508        display: flex;
6509        align-items: center;
6510        background: none;
6511        box-shadow: none;
6512        width: auto;
6513        /*height: auto;*/
6514        margin-bottom: 0px;
6515      }
6516      .footer__logo::before {
6517        display: none;
6518      }
6519      .footer__logo img {
6520        margin-right: 10px;
6521      }
6522      .footer__logo::after {
6523        content: "Yudaev School";
6524        font-family: "Loos Extended", sans-serif;
6525        font-size: 13px;
6526        font-weight: 500;
6527        color: #000000;
6528      }
6529      .footer__title {
6530        font-size: 16px;
6531        line-height: 0.5;
6532        margin-bottom: 30px;
6533        text-align: left;
6534      }
6535      .footer__title-main {
6536        display: block;
6537      }
6538      .footer__title-sub {
6539        display: block;
6540        font-size: 16px;
6541        color: #797979;
6542        margin-bottom: 5px;
6543        line-height: 120%;
6544      }
6545      .footer__copyright {
6546        display: block;
6547        font-size: 16px;
6548        color: #b6b6b6;
6549      }
6550      /* Секции (Курсы, Контакты, Мессенджеры) */
6551      .footer__right-section {
6552        width: 100%;
6553      }
6554      .footer__social-section {
6555        display: none; /* Скрываем десктопную версию */
6556      }
6557      .footer__bottom-section {
6558        width: 100%;
6559        flex-direction: column;
6560        align-items: flex-start;
6561        margin-top: 0;
6562      }
6563      .footer__courses-section,
6564      .footer__contacts-section,
6565      .footer__messengers-section {
6566        width: 100%;
6567        min-width: 0;
6568        margin-bottom: 50px;
6569      }
6570      .footer__course-link,
6571      .footer__additional-link {
6572        white-space: normal;
6573      }
6574      .footer__messengers-section {
6575        margin-bottom: 25px;
6576      }
6577      /* Соцсети в мобильной версии */
6578      .footer__mobile-social-title {
6579        font-family: "GNF", sans-serif;
6580        font-weight: 400;
6581        color: #919191;
6582        margin: 30px 0 15px 0;
6583        text-transform: uppercase;
6584        font-size: 16px;
6585        display: block;
6586      }
6587      .footer__mobile-social-grid {
6588        display: grid;
6589        grid-template-columns: repeat(3, 1fr);
6590        gap: 15px;
6591        margin-bottom: 0px;
6592      }
6593      .footer__mobile-social-item {
6594        width: 100%;
6595        aspect-ratio: 1/1;
6596        background-color: white;
6597        border-radius: 15px;
6598        display: flex;
6599        flex-direction: column;
6600        justify-content: space-between;
6601        align-items: flex-start;
6602        padding: 12px;
6603        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
6604      }
6605      /* Разделительная линия */
6606      .footer__divider {
6607        width: 100%;
6608        height: 1px;
6609        margin: 20px 0;
6610        background: linear-gradient(90deg, rgba(219, 219, 219, 0) 0%, #dbdbdb 50%, rgba(219, 219, 219, 0) 100%);
6611      }
6612      /* Нижний блок с информацией */
6613      .footer__info-wrapper {
6614        width: 100%;
6615        order: 5;
6616      }
6617      .footer__contacts-section {
6618        margin-bottom: 50px;
6619      }
6620      .footer__info {
6621        font-size: 12px;
6622        line-height: 1.5;
6623        margin-bottom: 15px;
6624      }
6625      .footer__links {
6626        gap: 10px;
6627      }
6628      .footer__contacts-messengers-wrapper {
6629        display: flex;
6630        flex-direction: column;
6631      }
6632      .footer__divider {
6633        width: 100%;
6634        height: 1px;
6635        background: linear-gradient(90deg, rgba(219, 219, 219, 0) 0%, #dbdbdb 50%, rgba(219, 219, 219, 0) 100%);
6636        margin: 30px 0;
6637      }
6638    }
6639    @media (max-width: 768px) {
6640      .footer__mobile-social-section {
6641        margin-top: 0px;
6642        width: 100%;
6643      }
6644      .footer__mobile-social-grid {
6645        display: grid;
6646        grid-template-columns: repeat(3, 1fr);
6647        gap: 10px;
6648        max-width: 100%;
6649      }
6650      .footer__mobile-social-grid a {
6651        aspect-ratio: 1/1;
6652      }
6653      .footer__mobile-social-icon {
6654        width: 32px;
6655        height: 32px;
6656        display: flex;
6657        justify-content: center;
6658        align-items: center;
6659        margin-bottom: 8px;
6660      }
6661      .footer__mobile-social-icon img {
6662        width: 24px;
6663        height: 24px;
6664      }
6665      .footer__mobile-social-name {
6666        align-self: flex-start;
6667        color: #7b7b7b;
6668        font-family: "Inter", sans-serif;
6669        font-size: 10px;
6670        font-weight: 500;
6671        letter-spacing: -0.02em;
6672        text-align: left;
6673      }
6674      /* Разделительная линия */
6675      .footer__divider {
6676        width: 100%;
6677        height: 1px;
6678        background: linear-gradient(90deg, rgba(219, 219, 219, 0) 0%, #dbdbdb 50%, rgba(219, 219, 219, 0) 100%);
6679        margin: 20px 0;
6680      }
6681      .footer__links {
6682        display: flex;
6683        gap: 20px;
6684        margin-top: 15px;
6685        padding-bottom: 10px;
6686      }
6687      .footer__socials-title {
6688        font-family: "GNF", sans-serif;
6689        font-weight: 400;
6690        color: #919191;
6691        margin-bottom: 15px;
6692        text-transform: uppercase;
6693        font-size: 16px;
6694      }
6695    }
6696    @media (min-width: 769px) {
6697      .footer__mobile-social-section,
6698      .footer__divider {
6699        display: none;
6700      }
6701    }
6702    @media (width <= 768px) {
6703      .footer__social-item {
6704        /*height: 105px;
6705        min-height: 105px;
6706        min-width: 105px;
6707        width: 105px;
6708        */
6709        height: 100%;
6710        width: 100%;
6711      }
6712      .footer__social-name {
6713        font-size: 14px;
6714      }
6715    }
6716    .a-side-media {
6717      bottom: 0;
6718      left: 50%;
6719      position: absolute;
6720      translate: -100px;
6721    }
6722    
6723    .employment-opportunities {
6724      flex: 1;
6725      overflow: hidden;
6726      justify-content: space-between;
6727      background: radial-gradient(50% 50% at 50% 50%, #ffffff 0%, #f2f2f2 100%);
6728      max-height: 650px;
6729    }
6730    .employment-opportunities .img-lines {
6731      position: absolute;
6732      width: 100%;
6733      padding-inline: 20px;
6734    }
6735    .employment-opportunities .card-marker {
6736      margin-bottom: auto;
6737    }
6738    .employment-opportunities__wrapper {
6739      position: relative;
6740    }
6741    .employment-opportunities__wrapper::before {
6742      background: linear-gradient(transparent, color-mix(in srgb, #f5f5f5 60%, transparent));
6743      content: "";
6744      height: 100%;
6745      position: absolute;
6746      width: 100%;
6747    }
6748    .employment-opportunities__count {
6749      font-family: "GNF";
6750      font-style: Regular;
6751      font-weight: 400;
6752      letter-spacing: -0.01em;
6753      line-height: 90%;
6754      text-transform: uppercase;
6755      font-size: 170px;
6756    }
6757    @media (max-width: 1440px) {
6758      .employment-opportunities__count {
6759        font-size: 120px;
6760      }
6761    }
6762    @media (max-width: 1024px) {
6763      .employment-opportunities__count {
6764        font-size: 90px;
6765      }
6766    }
6767    @media (max-width: 375px) {
6768      .employment-opportunities__count {
6769        font-size: 110px;
6770      }
6771    }
6772    .employment-opportunities__disk {
6773      color: rgba(0, 0, 0, 0.4);
6774      font-family: "Inter";
6775      font-size: clamp(14px, 14px + (18 - 14) * (100dvw - 375px) / (1440 - 375), 18px);
6776      font-weight: 500;
6777      letter-spacing: -0.02em;
6778      line-height: 130%;
6779      padding-top: 40px;
6780      text-wrap: nowrap;
6781      vertical-align: bottom;
6782      position: relative;
6783    }
6784    .employment-opportunities__disk::before {
6785      background: linear-gradient(90deg, transparent, rgba(128, 128, 128, 0.274), transparent);
6786      content: "";
6787      height: 1px;
6788      position: absolute;
6789      width: 100%;
6790      top: 20px;
6791    }
6792    .employment-opportunities .employment-opportunities__tower {
6793      bottom: -40px;
6794      position: relative;
6795    }
6796    .employment-opportunities__image {
6797      max-width: 100%;
6798      flex: 1;
6799      max-height: 100%;
6800      display: flex;
6801      align-items: center;
6802      position: relative;
6803      justify-content: center;
6804    }
6805    .employment-opportunities__image img {
6806      width: 100%;
6807      height: 100%;
6808      object-fit: contain;
6809      object-position: center;
6810    }
6811    .employment-opportunities__image .tower-card {
6812      position: absolute;
6813    }
6814    .employment-opportunities__sub-count {
6815      font-family: "GNF";
6816      font-weight: 400;
6817      font-size: 30px;
6818      font-size: 34px;
6819      line-height: 120%;
6820      letter-spacing: -0.01em;
6821      text-transform: uppercase;
6822    }
6823    @media (max-width: 1440px) {
6824      .employment-opportunities__sub-count {
6825        font-size: 28px;
6826      }
6827    }
6828    @media (max-width: 1024px) {
6829      .employment-opportunities__sub-count {
6830        font-size: 22px;
6831      }
6832    }
6833    @media (max-width: 375px) {
6834      .employment-opportunities__sub-count {
6835        font-size: 26px;
6836      }
6837    }
6838    .employment-opportunities__text {
6839      padding: 30px;
6840      align-items: flex-start;
6841    }
6842    
6843    .help-with-vacancies {
6844      align-items: flex-start;
6845      background-color: #fafafa;
6846      flex-wrap: wrap;
6847      margin-block-start: clamp(-50px, 0px + (-50 - 0) * (100dvw - 375px) / (1440 - 375), 0px);
6848      padding-bottom: clamp(200px, 200px + (276 - 200) * (100dvw - 375px) / (1440 - 375), 276px);
6849      padding-top: clamp(0px, 100px + (0 - 100) * (100dvw - 375px) / (1440 - 375), 100px);
6850      width: 100%;
6851    }
6852    .help-with-vacancies__card {
6853      border-radius: 40px;
6854      box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.1019607843);
6855    }
6856    .help-with-vacancies__content {
6857      gap: 20px;
6858      width: 100%;
6859    }
6860    @media (max-width: 1023px) {
6861      .help-with-vacancies__content.row {
6862        flex-direction: column;
6863        align-items: center;
6864      }
6865    }
6866    .help-with-vacancies__title {
6867      font-family: "Loos Extended", sans-serif;
6868      font-size: clamp(26px, 26px + (38 - 26) * (100dvw - 375px) / (1440 - 375), 38px);
6869      font-weight: 500;
6870      letter-spacing: -0.01em;
6871      line-height: 115%;
6872      margin-bottom: 80px;
6873      margin-top: 20px;
6874      max-width: 26ch;
6875    }
6876    .help-with-vacancies__title span {
6877      color: color-mix(in srgb, black 25%, transparent);
6878    }
6879    @media (width <= 550px) {
6880      .help-with-vacancies .help-with-vacancies__card {
6881        display: flex;
6882        flex-direction: column !important;
6883      }
6884    }
6885    
6886    .join {
6887      background: linear-gradient(180deg, #cfff32 0%, #f2f2f2 78.85%);
6888      align-items: center;
6889      flex: 1;
6890      padding: 30px clamp(30px, 30px + (50 - 30) * (100dvw - 375px) / (1440 - 375), 50px);
6891      position: relative;
6892    }
6893    @media (width <= 1000px) {
6894      .join {
6895        background: url("../assets/images/lines.svg"), linear-gradient(180deg, #cfff32 0%, #f2f2f2 78.85%);
6896      }
6897    }
6898    .join .side-media__img {
6899      pointer-events: none;
6900    }
6901    @media (min-width: 1024px) {
6902      .join {
6903        max-width: 676px;
6904      }
6905    }
6906    @media (max-width: 1023px) {
6907      .join {
6908        width: 100%;
6909      }
6910    }
6911    .join__card {
6912      animation-timing-function: cubic-bezier(0.16, 1.08, 0.4, 1);
6913    }
6914    .join__card:nth-child(1) {
6915      animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
6916    }
6917    .join__card:nth-child(2) {
6918      animation-timing-function: cubic-bezier(0.4, 0.2, 0.6, 1);
6919    }
6920    .join__card:nth-child(3) {
6921      animation-timing-function: cubic-bezier(0.35, 0.35, 0.7, 1);
6922    }
6923    .join__card:nth-child(4) {
6924      animation-timing-function: cubic-bezier(0.28, 0.45, 0.75, 1);
6925    }
6926    .join__card:nth-child(5) {
6927      animation-timing-function: cubic-bezier(0.16, 1.08, 0.4, 1);
6928    }
6929    .join__cards {
6930      gap: 7px;
6931      margin-block: auto;
6932      padding-block-end: 20px;
6933      position: relative;
6934      width: 100%;
6935    }
6936    .join__cards .img-lines {
6937      position: absolute;
6938      width: 100%;
6939      padding-inline: 20px;
6940      top: -160px;
6941    }
6942    .join__cta.gradient-border {
6943      position: absolute;
6944      bottom: 0;
6945      padding: 5px;
6946      padding-left: 15px;
6947      transform: translateY(50%);
6948    }
6949    .join__cta.gradient-border .side-media__text {
6950      color: rgba(0, 0, 0, 0.8);
6951    }
6952    .join__cta.gradient-border .side-media__img {
6953      height: 32px;
6954      width: 32px;
6955    }
6956    .join__cta.gradient-border .side-media__text {
6957      font-size: 14px;
6958      line-height: 130%;
6959      letter-spacing: -0.02em;
6960    }
6961    .join .card-marker {
6962      background-color: rgba(255, 255, 255, 0.4);
6963    }
6964    .join .card-marker-icon {
6965      background-color: white;
6966    }
6967    .join__title {
6968      font-family: "Loos Extended";
6969      font-size: 26px;
6970      font-weight: 500;
6971      letter-spacing: -0.01em;
6972      line-height: 115%;
6973      margin-bottom: clamp(30px, 50px + (30 - 50) * (100dvw - 375px) / (1440 - 375), 50px);
6974      margin-top: clamp(15px, 15px + (35 - 15) * (100dvw - 375px) / (1440 - 375), 35px);
6975      text-align: center;
6976    }
6977    
6978    .join-card {
6979      align-items: center;
6980      backdrop-filter: blur(55px);
6981      background-color: rgba(255, 255, 255, 0.2);
6982      border-radius: clamp(12px, 12px + (16 - 12) * (100dvw - 375px) / (1440 - 375), 16px);
6983      box-shadow: 0px 8.89px 37.05px 0px rgba(0, 0, 0, 0.1019607843);
6984      justify-content: flex-start;
6985      padding: clamp(5px, 5px + (15 - 5) * (100dvw - 375px) / (1440 - 375), 15px) clamp(15px, 15px + (30 - 15) * (100dvw - 375px) / (1440 - 375), 30px);
6986      position: relative;
6987      width: 100%;
6988    }
6989    .join-card img {
6990      border-radius: 15px;
6991    }
6992    .join-card:nth-child(2) {
6993      z-index: 3;
6994    }
6995    .join-card:nth-child(3) {
6996      scale: 0.9;
6997      z-index: 2;
6998      position: relative;
6999      bottom: 20px;
7000    }
7001    .join-card:nth-child(4) {
7002      position: absolute;
7003      bottom: 8px;
7004      scale: 0.8;
7005      z-index: 1;
7006    }
7007    .join-card:nth-child(5) {
7008      position: absolute;
7009      bottom: -5px;
7010      scale: 0.7;
7011      z-index: 0;
7012    }
7013    .join-card__experience {
7014      color: rgba(0, 0, 0, 0.3019607843);
7015      font-family: "SF Pro Display";
7016      font-size: clamp(9px, 9px + (14 - 9) * (100dvw - 375px) / (1440 - 375), 14px);
7017      font-weight: 500;
7018      line-height: 135%;
7019      vertical-align: bottom;
7020    }
7021    .join-card__image {
7022      padding-right: 23px;
7023      height: 40px;
7024    }
7025    .join-card__image img {
7026      max-height: 100%;
7027      object-fit: contain;
7028      object-position: center;
7029      height: 100%;
7030    }
7031    .join-card__index {
7032      align-items: center;
7033      aspect-ratio: 1;
7034      backdrop-filter: blur(10px);
7035      border-radius: 50%;
7036      color: rgba(0, 0, 0, 0.4);
7037      display: flex;
7038      font-family: "SF Pro Display";
7039      font-size: clamp(10px, 10px + (17.78 - 10) * (100dvw - 375px) / (1440 - 375), 17.78px);
7040      font-weight: 500;
7041      justify-content: center;
7042      left: 0;
7043      line-height: 110%;
7044      padding: clamp(7px, 7px + (14 - 7) * (100dvw - 375px) / (1440 - 375), 14px);
7045      position: absolute !important;
7046      translate: -50%;
7047      vertical-align: bottom;
7048      background-color: rgba(255, 255, 255, 0.5019607843);
7049    }
7050    .join-card__name {
7051      font-family: "SF Pro Display";
7052      font-weight: 500;
7053      font-size: clamp(10px, 10px + (16 - 10) * (100dvw - 375px) / (1440 - 375), 16px);
7054      line-height: 135%;
7055      vertical-align: bottom;
7056      color: rgba(0, 0, 0, 0.5019607843);
7057    }
7058    .join-card__price {
7059      font-family: "GNF", sans-serif;
7060      font-size: clamp(12.88px, 12.88px + (18 - 12.88) * (100dvw - 375px) / (1440 - 375), 18px);
7061      font-weight: 400;
7062      letter-spacing: 0%;
7063      line-height: 135%;
7064      margin-left: auto;
7065      text-align: right;
7066      vertical-align: bottom;
7067      white-space: nowrap;
7068    }
7069    
7070    .tower-card {
7071      pointer-events: none;
7072      background: linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
7073      align-items: flex-start;
7074      font-family: "SF Pro Display";
7075      backdrop-filter: blur(60px);
7076      box-shadow: 0px 6.55px 26.18px 0px rgba(0, 0, 0, 0.0901960784);
7077      padding: 12.11px;
7078      aspect-ratio: 1;
7079      border-radius: 24px;
7080    }
7081    .tower-card:nth-child(2) {
7082      top: -70px;
7083      right: 80px;
7084      animation-timing-function: cubic-bezier(0.25, 0.1, 0.7, 1.1);
7085    }
7086    .tower-card:nth-child(3) {
7087      bottom: 30%;
7088      right: -50px;
7089      animation-timing-function: cubic-bezier(0.18, 0.5, 0.8, 1);
7090    }
7091    .tower-card:nth-child(4) {
7092      bottom: 10%;
7093      left: 15%;
7094      animation-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
7095    }
7096    .tower-card:nth-child(5) {
7097      top: 40%;
7098      left: 50%;
7099      animation-timing-function: cubic-bezier(0.3, 0.05, 0.5, 1.1);
7100    }
7101    .tower-card:nth-child(6) {
7102      top: 20%;
7103      left: 160px;
7104      animation-timing-function: cubic-bezier(0.36, 0.05, 0.64, 1);
7105    }
7106    .tower-card:nth-child(7) {
7107      top: 70%;
7108      left: 60%;
7109      animation-timing-function: cubic-bezier(0.15, 0.2, 0.75, 0.9);
7110    }
7111    .tower-card:nth-child(8) {
7112      top: -5%;
7113      left: 60%;
7114      animation-timing-function: cubic-bezier(0.15, 0.2, 0.75, 0.9);
7115    }
7116    .tower-card__remove {
7117      background-color: white;
7118      border-radius: 50%;
7119      aspect-ratio: 1;
7120      width: 20px;
7121      height: 20px;
7122      box-shadow: 0px 1.61px 4.04px 0px rgba(0, 0, 0, 0.1019607843);
7123      margin-bottom: 8px;
7124    }
7125    .tower-card__disk {
7126      color: rgba(0, 0, 0, 0.2);
7127      font-weight: 500;
7128      font-size: 10px;
7129      line-height: 150%;
7130      margin-bottom: 6px;
7131    }
7132    .tower-card__name {
7133      color: rgba(0, 0, 0, 0.8);
7134      font-weight: 600;
7135      font-size: 11px;
7136      line-height: 150%;
7137      margin-bottom: 8px;
7138    }
7139    .tower-card__tag {
7140      border-radius: 5px;
7141      box-shadow: 0px 0.81px 4.84px 0px rgba(0, 0, 0, 0.1019607843);
7142      color: rgba(0, 0, 0, 0.5019607843);
7143      font-size: 8.07px;
7144      font-weight: 500;
7145      line-height: 150%;
7146      margin-bottom: auto;
7147      padding: 2px 6px 4px 6px;
7148      background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
7149    }
7150    .tower-card__cta {
7151      align-items: center;
7152      border-radius: 24px;
7153      box-shadow: 0px 0.81px 4.84px 0px rgba(0, 0, 0, 0.1019607843);
7154      gap: 40px;
7155      justify-content: space-between;
7156      margin-top: auto;
7157      padding: 4px;
7158      width: 100%;
7159      background: linear-gradient(0deg, #ffffff, #ffffff), linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03));
7160      padding-left: 13px;
7161    }
7162    .tower-card__text {
7163      align-items: flex-start;
7164      justify-content: center;
7165    }
7166    .tower-card__zp {
7167      color: rgba(0, 0, 0, 0.2);
7168      font-size: 7.26px;
7169      font-weight: 500;
7170      letter-spacing: 0%;
7171      line-height: 150%;
7172      margin-bottom: 5px;
7173    }
7174    .tower-card__price {
7175      font-size: 10.49px;
7176      font-weight: 600;
7177      line-height: 150%;
7178      white-space: nowrap;
7179    }
7180    .tower-card .green-arrow {
7181      height: 26px;
7182      padding: 5px;
7183      width: 26px;
7184    }
7185    @media (width <= 500px) {
7186      .tower-card {
7187        width: 180px;
7188        height: 180px;
7189        scale: 0.75;
7190      }
7191      .tower-card:nth-child(2) {
7192        top: 31px;
7193        right: 80px;
7194        left: 16px;
7195      }
7196      .tower-card:nth-child(3) {
7197        bottom: 164px;
7198        right: 207px;
7199      }
7200      .tower-card:nth-child(4) {
7201        display: none;
7202      }
7203      .tower-card:nth-child(5) {
7204        top: -10px;
7205        left: 53%;
7206      }
7207      .tower-card:nth-child(6) {
7208        top: 180px;
7209        left: 183px;
7210      }
7211      .tower-card:nth-child(7) {
7212        display: none;
7213      }
7214      .tower-card:nth-child(8) {
7215        top: 10%;
7216        bottom: unset;
7217        left: unset;
7218      }
7219    }
7220    
7221    @keyframes rockUpDown {
7222      0%, 100% {
7223        transform: translateY(0);
7224      }
7225      50% {
7226        transform: translateY(-8px);
7227      }
7228    }
7229    #wordstat {
7230      background-color: #FAFAFA;
7231      border-radius: clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px);
7232      box-shadow: 0 -10px 50px color-mix(in srgb, black 5%, transparent);
7233      margin-block: -60px;
7234      overflow: hidden;
7235      position: relative;
7236      z-index: 1;
7237    }
7238    #wordstat img {
7239      display: block;
7240    }
7241    #wordstat .section-name {
7242      margin-block-start: clamp(120px, 120px + (150 - 120) * (100dvw - 375px) / (1440 - 375), 150px);
7243      margin-inline: auto;
7244      width: fit-content;
7245    }
7246    #wordstat .p-count {
7247      align-items: center;
7248      background: radial-gradient(#FFFFFF, #E6E6E6);
7249      border-radius: clamp(20px, 20px + (35 - 20) * (100dvw - 375px) / (1440 - 375), 35px);
7250      display: flex;
7251      font-family: "Loos Extended";
7252      font-size: clamp(34px, 34px + (60 - 34) * (100dvw - 375px) / (1440 - 375), 60px);
7253      font-weight: 500;
7254      gap: clamp(8px, 8px + (16 - 8) * (100dvw - 375px) / (1440 - 375), 16px);
7255      line-height: 110%;
7256      margin-block-end: 20px;
7257      margin-block-start: clamp(-16px, 20px + (-16 - 20) * (100dvw - 375px) / (1440 - 375), 20px);
7258      margin-inline: auto;
7259      padding-inline: clamp(20px, 20px + (50 - 20) * (100dvw - 375px) / (1440 - 375), 50px);
7260      user-select: none;
7261      width: fit-content;
7262      box-shadow: 3px 9px 30px color-mix(in srgb, black 12%, transparent), inset 0px -1px color-mix(in srgb, white 60%, transparent);
7263      padding-block: clamp(10px, 10px + (25 - 10) * (100dvw - 375px) / (1440 - 375), 25px) clamp(10px, 10px + (15 - 10) * (100dvw - 375px) / (1440 - 375), 15px);
7264    }
7265    #wordstat .p-count sup {
7266      font-size: 70%;
7267      translate: -50% -20%;
7268    }
7269    #wordstat .img-separator {
7270      height: clamp(50px, 50px + (92 - 50) * (100dvw - 375px) / (1440 - 375), 92px);
7271    }
7272    #wordstat .p-text {
7273      font-family: "Loos Extended";
7274      font-size: clamp(26px, 26px + (38 - 26) * (100dvw - 375px) / (1440 - 375), 38px);
7275      font-weight: 500;
7276      letter-spacing: -0.01em;
7277      line-height: 115%;
7278      margin-block-end: clamp(150px, 150px + (250 - 150) * (100dvw - 375px) / (1440 - 375), 250px);
7279      margin-inline: auto;
7280      max-width: calc(100dvw - 30px);
7281      text-align: center;
7282      width: fit-content;
7283    }
7284    #wordstat .p-text span {
7285      color: color-mix(in srgb, black 25%, transparent);
7286    }
7287    #wordstat .div-people {
7288      align-items: center;
7289      backdrop-filter: blur(55px);
7290      background-color: color-mix(in srgb, black 15%, white 10%);
7291      border-radius: 30px;
7292      bottom: clamp(80px, 80px + (100 - 80) * (100dvw - 375px) / (1440 - 375), 100px);
7293      box-shadow: 0 6px 15px color-mix(in srgb, black 18%, transparent);
7294      display: flex;
7295      left: 50%;
7296      padding-block: 5px;
7297      padding-inline: 40px 5px;
7298      position: absolute;
7299      translate: -50%;
7300      z-index: 3;
7301      box-shadow: 0 6px 15px color-mix(in srgb, black 7%, transparent), inset -1px 1px color-mix(in srgb, white 40%, transparent), inset 1px -1px color-mix(in srgb, white 30%, transparent);
7302    }
7303    #wordstat .p-people {
7304      color: color-mix(in srgb, white 60%, transparent);
7305      display: flex;
7306      font-family: "Loos Extended";
7307      font-size: 100px;
7308      font-weight: 700;
7309      justify-content: center;
7310      letter-spacing: -0.06em;
7311      line-height: 100%;
7312      margin-inline-end: 25px;
7313      max-height: 85px;
7314      text-shadow: 0 6px 24px color-mix(in srgb, black 11%, transparent);
7315      width: 190px;
7316    }
7317    #wordstat .p-people.--is-large {
7318      font-size: 70px;
7319    }
7320    #wordstat .img-number {
7321      filter: brightness(1.025);
7322      object-fit: scale-down;
7323      width: 160px;
7324    }
7325    #wordstat .p-people-text {
7326      color: color-mix(in srgb, white 80%, transparent);
7327      font-family: "Inter";
7328      font-size: clamp(14px, 14px + (16 - 14) * (100dvw - 375px) / (1440 - 375), 16px);
7329      font-weight: 500;
7330      letter-spacing: -0.02em;
7331      line-height: 130%;
7332      margin-inline-end: 45px;
7333      max-width: 25ch;
7334      text-wrap: balance;
7335    }
7336    #wordstat .div-timer {
7337      position: relative;
7338    }
7339    #wordstat .p-timer {
7340      align-items: center;
7341      background-color: color-mix(in srgb, white 40%, transparent);
7342      border-radius: 100px;
7343      color: color-mix(in srgb, black 40%, transparent);
7344      display: flex;
7345      font-family: "Inter";
7346      font-size: 15px;
7347      font-weight: 600;
7348      gap: 10px;
7349      left: 50%;
7350      letter-spacing: -0.02em;
7351      line-height: 135%;
7352      padding-block: 3px;
7353      padding-inline: 3px 12px;
7354      position: absolute;
7355      top: 10px;
7356      translate: -50%;
7357      box-shadow: 0px 2px 10px color-mix(in srgb, black 5%, transparent), inset 0px 0px 1px 1px color-mix(in srgb, white 50%, transparent);
7358    }
7359    #wordstat .img-background {
7360      height: 100%;
7361      position: absolute;
7362      z-index: -1;
7363      top: 0;
7364    }
7365    #wordstat .img-background:nth-of-type(1) {
7366      left: 0;
7367    }
7368    #wordstat .img-background:nth-of-type(2) {
7369      right: 0;
7370      scale: -1 1;
7371    }
7372    #wordstat .div-pillars {
7373      margin-inline: auto;
7374      max-width: 1920px;
7375      position: relative;
7376      width: calc(100% - clamp(0px, 0px + (100 - 0) * (100dvw - 375px) / (1440 - 375), 100px));
7377    }
7378    #wordstat .img-pillars {
7379      width: 100%;
7380    }
7381    #wordstat .div-floater {
7382      position: absolute;
7383      transform-origin: center 73%;
7384      translate: -50% -83%;
7385      width: 215px;
7386    }
7387    #wordstat .div-floater:nth-child(1 of #wordstat .div-floater) {
7388      left: 21.5%;
7389      top: 13%;
7390    }
7391    #wordstat .div-floater:nth-child(2 of #wordstat .div-floater) {
7392      left: 40.6%;
7393      top: 6.6%;
7394    }
7395    #wordstat .div-floater:nth-child(3 of #wordstat .div-floater) {
7396      left: 59.2%;
7397      top: 6.6%;
7398    }
7399    #wordstat .div-floater:nth-child(4 of #wordstat .div-floater) {
7400      left: 78.5%;
7401      top: 13.1%;
7402    }
7403    #wordstat .div-floater:nth-child(5 of #wordstat .div-floater) {
7404      left: 9%;
7405      top: 41.2%;
7406    }
7407    #wordstat .div-floater:nth-child(6 of #wordstat .div-floater) {
7408      left: 36.4%;
7409      top: 33.4%;
7410    }
7411    #wordstat .div-floater:nth-child(7 of #wordstat .div-floater) {
7412      left: 64%;
7413      top: 33.4%;
7414    }
7415    #wordstat .div-floater:nth-child(8 of #wordstat .div-floater) {
7416      left: 91%;
7417      top: 41.2%;
7418    }
7419    #wordstat .div-floater-inner {
7420      backdrop-filter: blur(15px);
7421      background-color: color-mix(in srgb, #E3E3E3 60%, transparent);
7422      border-radius: 20px;
7423      padding: 40px 20px 20px 20px;
7424      box-shadow: 0 24px 55px color-mix(in srgb, black 18%, transparent), inset 0 1px 1px color-mix(in srgb, white 50%, transparent);
7425    }
7426    #wordstat .p-floater-title {
7427      backdrop-filter: blur(15px);
7428      background-color: color-mix(in srgb, white 40%, transparent);
7429      border-radius: 20px;
7430      color: color-mix(in srgb, black 40%, transparent);
7431      font-family: "Inter";
7432      font-size: 15px;
7433      font-weight: 600;
7434      left: 20px;
7435      letter-spacing: -0.04em;
7436      line-height: 135%;
7437      padding: 4px 12px 4px 12px;
7438      position: absolute;
7439      translate: 0 -50%;
7440      width: max-content;
7441      z-index: 1;
7442      box-shadow: 0px 6px 15px color-mix(in srgb, black 7%, transparent), inset 0px 0px 1px 1px color-mix(in srgb, white 50%, transparent);
7443    }
7444    #wordstat .p-floater {
7445      color: color-mix(in srgb, black 50%, transparent);
7446      font-family: "GNF";
7447      font-size: 30px;
7448      margin-block-end: 10px;
7449    }
7450    #wordstat .div-floater:nth-child(1 of #wordstat .div-floater) .p-floater-title, #wordstat .div-floater:nth-child(1 of #wordstat .div-floater) .div-floater-inner {
7451      animation-delay: 0.25s;
7452    }
7453    #wordstat .div-floater:nth-child(2 of #wordstat .div-floater) .p-floater-title, #wordstat .div-floater:nth-child(2 of #wordstat .div-floater) .div-floater-inner {
7454      animation-delay: 0.5s;
7455    }
7456    #wordstat .div-floater:nth-child(3 of #wordstat .div-floater) .p-floater-title, #wordstat .div-floater:nth-child(3 of #wordstat .div-floater) .div-floater-inner {
7457      animation-delay: 0.75s;
7458    }
7459    #wordstat .div-floater:nth-child(4 of #wordstat .div-floater) .p-floater-title, #wordstat .div-floater:nth-child(4 of #wordstat .div-floater) .div-floater-inner {
7460      animation-delay: 1s;
7461    }
7462    #wordstat .div-floater:nth-child(5 of #wordstat .div-floater) .p-floater-title, #wordstat .div-floater:nth-child(5 of #wordstat .div-floater) .div-floater-inner {
7463      animation-delay: 1.25s;
7464    }
7465    #wordstat .div-floater:nth-child(6 of #wordstat .div-floater) .p-floater-title, #wordstat .div-floater:nth-child(6 of #wordstat .div-floater) .div-floater-inner {
7466      animation-delay: 1.5s;
7467    }
7468    #wordstat .div-floater:nth-child(7 of #wordstat .div-floater) .p-floater-title, #wordstat .div-floater:nth-child(7 of #wordstat .div-floater) .div-floater-inner {
7469      animation-delay: 1.75s;
7470    }
7471    #wordstat .div-floater:nth-child(8 of #wordstat .div-floater) .p-floater-title, #wordstat .div-floater:nth-child(8 of #wordstat .div-floater) .div-floater-inner {
7472      animation-delay: 2s;
7473    }
7474    #wordstat .div-progress {
7475      --progress: 0.1;
7476      align-items: center;
7477      display: flex;
7478      gap: 4px;
7479    }
7480    #wordstat .div-progress div {
7481      border-radius: 5px;
7482      box-shadow: 0px 8px 25px color-mix(in srgb, black 20%, transparent);
7483      height: 26px;
7484      transition-delay: 1s;
7485      transition: 2s;
7486    }
7487    #wordstat .div-progress div:nth-child(1) {
7488      background: linear-gradient(90deg, white, #CFFF32);
7489      flex-basis: calc(var(--progress) * 100%);
7490      flex-grow: 1;
7491      min-width: 0;
7492    }
7493    #wordstat .div-progress div:nth-child(2) {
7494      background-color: #CFFF32;
7495      width: 4px;
7496      height: 30px;
7497      z-index: 1;
7498    }
7499    #wordstat .div-progress div:nth-child(3) {
7500      flex-basis: calc((1 - var(--progress)) * 100%);
7501      flex-grow: 1;
7502      min-width: 0;
7503    }
7504    #wordstat .div-gradient-blur {
7505      position: absolute;
7506      z-index: 1;
7507      inset: auto 0 0 0;
7508      height: 500px;
7509      pointer-events: none;
7510    }
7511    #wordstat .div-gradient-blur div, #wordstat .div-gradient-blur::before, #wordstat .div-gradient-blur::after {
7512      position: absolute;
7513      inset: 0;
7514    }
7515    #wordstat .div-gradient-blur::before {
7516      content: "";
7517      z-index: 1;
7518      backdrop-filter: blur(0.5px);
7519      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%);
7520    }
7521    #wordstat .div-gradient-blur div:nth-of-type(1) {
7522      z-index: 2;
7523      backdrop-filter: blur(1px);
7524      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgba(0, 0, 0, 0) 50%);
7525    }
7526    #wordstat .div-gradient-blur div:nth-of-type(2) {
7527      z-index: 3;
7528      backdrop-filter: blur(2px);
7529      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%);
7530    }
7531    #wordstat .div-gradient-blur div:nth-of-type(3) {
7532      z-index: 4;
7533      backdrop-filter: blur(4px);
7534      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%);
7535    }
7536    #wordstat .div-gradient-blur div:nth-of-type(4) {
7537      z-index: 5;
7538      backdrop-filter: blur(8px);
7539      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%);
7540    }
7541    #wordstat .div-gradient-blur div:nth-of-type(5) {
7542      z-index: 6;
7543      backdrop-filter: blur(16px);
7544      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
7545    }
7546    #wordstat .div-gradient-blur div:nth-of-type(6) {
7547      z-index: 7;
7548      backdrop-filter: blur(32px);
7549      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
7550    }
7551    #wordstat .div-gradient-blur::after {
7552      content: "";
7553      z-index: 8;
7554      backdrop-filter: blur(64px);
7555      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
7556    }
7557    #wordstat .div-gradient {
7558      background: linear-gradient(transparent, color-mix(in srgb, transparent, black 30%));
7559      bottom: 0;
7560      height: 250px;
7561      pointer-events: none;
7562      position: absolute;
7563      width: 100%;
7564      z-index: 2;
7565    }
7566    @media (width <= 1600px) {
7567      #wordstat .div-floater {
7568        scale: 0.9;
7569      }
7570    }
7571    @media (width <= 1400px) {
7572      #wordstat .div-floater {
7573        scale: 0.8;
7574      }
7575    }
7576    @media (width <= 1200px) {
7577      #wordstat .div-floater {
7578        scale: 0.7;
7579      }
7580    }
7581    @media (width <= 1000px) {
7582      #wordstat .div-floater {
7583        scale: 0.6;
7584      }
7585    }
7586    @media (width <= 800px) {
7587      #wordstat .div-floater {
7588        scale: 0.5;
7589      }
7590    }
7591    @media (width <= 700px) {
7592      #wordstat .div-pillars {
7593        width: calc(100% + clamp(0px, 300px + (0 - 300) * (100dvw - 375px) / (700 - 375), 300px));
7594        margin-inline-start: clamp(-150px, -150px + (0 - -150) * (100dvw - 375px) / (700 - 375), 0px);
7595      }
7596      #wordstat .img-background {
7597        display: none;
7598      }
7599    }
7600    @media (width <= 600px) {
7601      #wordstat {
7602        background: linear-gradient(#FAFAFA calc(100% - 320px), #d5d5d5);
7603        padding-block-end: 300px;
7604      }
7605      #wordstat .div-people {
7606        flex-direction: column;
7607        padding: 25px 10px 10px 10px;
7608      }
7609      #wordstat .p-people {
7610        margin: 0;
7611      }
7612      #wordstat .p-people-text {
7613        color: color-mix(in srgb, white 70%, transparent);
7614        margin-block-end: 20px;
7615        margin-inline: 0;
7616        text-align: center;
7617      }
7618      #wordstat .div-gradient {
7619        opacity: 0.4;
7620        height: 500px;
7621      }
7622      #wordstat .div-gradient-blur {
7623        height: 600px;
7624      }
7625    }
7626    @media (width <= 550px) {
7627      #wordstat .p-text {
7628        text-wrap: balance;
7629      }
7630      #wordstat .p-text br {
7631        display: none;
7632      }
7633    }
7634    
7635    :root {
7636      --font-family: "Inter", sans-serif;
7637      --second-family: "SF Pro Display", sans-serif;
7638      --third-family: "GNF", sans-serif;
7639      --font3: "Loos Extended", sans-serif;
7640    }
7641    
7642    a {
7643      cursor: pointer;
7644      text-decoration: none;
7645    }
7646    
7647    button {
7648      border: none;
7649    }
7650    
7651    .null {
7652      display: none !important;
7653    }
7654    
7655    * {
7656      font-synthesis: none !important;
7657    }
7658    
7659    @keyframes float {
7660      0%, 100% {
7661        transform: translate(0, 0);
7662      }
7663      25% {
7664        transform: translate(0, -5%);
7665      }
7666      50% {
7667        transform: translate(0, 0%);
7668      }
7669      75% {
7670        transform: translate(0, 5%);
7671      }
7672    }
7673    @keyframes float-alt {
7674      0%, 100% {
7675        transform: translate(0, 1%);
7676      }
7677      50% {
7678        transform: translate(0, 6%);
7679      }
7680      100% {
7681        transform: translate(0, 1%);
7682      }
7683    }
7684    @keyframes parallax {
7685      from {
7686        transform: translateY(-5px) rotate(90deg);
7687        rotate: 90deg;
7688      }
7689      to {
7690        transform: translateY(5px) rotate(-45deg);
7691      }
7692    }
7693    .fon {
7694      position: absolute;
7695      top: 0;
7696      left: 0;
7697      right: 0;
7698      opacity: 0.6;
7699      pointer-events: none;
7700    }
7701    .fon img {
7702      width: 100%;
7703      object-position: center;
7704    }
7705    
7706    /* Стили для кнопки переключения */
7707    .fon-toggle {
7708      position: fixed;
7709      bottom: 20px;
7710      right: 20px;
7711      width: 48px;
7712      height: 48px;
7713      border-radius: 50%;
7714      background: rgba(255, 255, 255, 0.9);
7715      border: 1px solid #ddd;
7716      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
7717      display: flex;
7718      align-items: center;
7719      justify-content: center;
7720      cursor: pointer;
7721      z-index: 1000;
7722      transition: all 0.3s ease;
7723      color: #333;
7724    }
7725    .fon-toggle:hover {
7726      background: white;
7727      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
7728      transform: translateY(-2px);
7729    }
7730    .fon-toggle:active {
7731      transform: translateY(0);
7732    }
7733    .fon-toggle svg {
7734      width: 24px;
7735      height: 24px;
7736    }
7737    
7738    /* Состояние когда подложка выключена */
7739    body:not(.fon-enabled) .fon {
7740      display: none;
7741    }
7742    body:not(.fon-enabled) .fon-toggle {
7743      opacity: 0.6;
7744    }
7745    body:not(.fon-enabled) .fon-toggle svg {
7746      opacity: 0.5;
7747    }
7748    
7749    html.lenis {
7750      height: auto;
7751    }
7752    
7753    .lenis.lenis-smooth {
7754      scroll-behavior: auto;
7755    }
7756    
7757    .lenis.lenis-smooth [data-lenis-prevent] {
7758      overscroll-behavior: contain;
7759    }
7760    
7761    .lenis.lenis-stopped {
7762      overflow: hidden;
7763    }
7764    
7765    .Parallax {
7766      will-change: transform;
7767    }
7768    
7769    .technology-card {
7770      border-radius: 32px;
7771      background: linear-gradient(225deg, rgba(230, 230, 230, 0.5) 0%, rgba(227, 227, 227, 0.5) 100%);
7772      box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.168627451), -2px -2px 10px 0px rgba(255, 255, 255, 0.8980392157) inset, 2px 2px 10px 0px rgba(255, 255, 255, 0.8980392157) inset;
7773      height: 115px;
7774      width: 115px;
7775      backdrop-filter: blur(10px);
7776      display: flex;
7777      aspect-ratio: 1;
7778      align-items: center;
7779      justify-content: center;
7780    }
7781    .technology-card__image {
7782      max-width: 100%;
7783      max-height: 100%;
7784      flex: 1;
7785      border-radius: inherit;
7786      display: flex;
7787      align-items: center;
7788      justify-content: center;
7789    }
7790    .technology-card__image img {
7791      max-width: 100%;
7792      object-position: center;
7793      object-fit: contain;
7794      max-height: 100%;
7795    }
7796    .technology-card_wb {
7797      left: 32%;
7798      top: 25%;
7799      rotate: -19deg;
7800    }
7801    .technology-card_wb div {
7802      padding-inline: 25px;
7803      padding-block: 37px;
7804    }
7805    .technology-card_wb img {
7806      rotate: 19deg;
7807    }
7808    .technology-card_ozon {
7809      left: 84%;
7810      top: 28%;
7811      rotate: 17.12deg;
7812    }
7813    .technology-card_ozon div {
7814      padding: 48.5px 17px;
7815    }
7816    .technology-card_ozon img {
7817      rotate: -17.12deg;
7818    }
7819    
7820    .row {
7821      display: flex;
7822      flex-direction: row;
7823    }
7824    
7825    .column {
7826      display: flex;
7827      flex-direction: column;
7828    }
7829    
7830    .section-title {
7831      font-family: "Inter";
7832      font-weight: 500;
7833      color: #000000;
7834      line-height: 73%;
7835      transform: scaleY(0.7);
7836      letter-spacing: 0.4px;
7837      font-size: 54px;
7838    }
7839    @media (max-width: 1440px) {
7840      .section-title {
7841        font-size: 34px;
7842      }
7843    }
7844    @media (max-width: 1024px) {
7845      .section-title {
7846        font-size: 34px;
7847      }
7848    }
7849    @media (max-width: 375px) {
7850      .section-title {
7851        font-size: 26px;
7852      }
7853    }
7854    .section-title b {
7855      color: rgba(0, 0, 0, 0.2509803922);
7856    }
7857    .section-title br {
7858      display: block;
7859      content: "";
7860      padding-top: 17px;
7861    }
7862    .section-title p {
7863      letter-spacing: -0.01em;
7864    }
7865    
7866    @media (max-width: 1399px) {
7867      .pc {
7868        display: none !important;
7869      }
7870    }
7871    
7872    @media (min-width: 500px) {
7873      .mobile {
7874        display: none !important;
7875      }
7876    }
7877    
7878    @media (min-width: 1400px) {
7879      .tablet {
7880        display: none !important;
7881      }
7882    }
7883    @media (max-width: 500px) {
7884      .tablet {
7885        display: none !important;
7886      }
7887    }
7888    
7889    .side-media {
7890      align-items: center;
7891      background-color: #f2f2f2;
7892      border-radius: 40px;
7893      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.0509803922);
7894      color: rgba(0, 0, 0, 0.4);
7895      justify-content: flex-start;
7896      padding: 3px;
7897      transition: 0.3s;
7898    }
7899    .side-media__img {
7900      height: 20px;
7901      padding-right: 1px;
7902      transition: 0.3s;
7903      width: 20px;
7904    }
7905    .side-media__svg {
7906      align-items: center;
7907      aspect-ratio: 1;
7908      border-radius: 50%;
7909      display: flex;
7910      height: 32px;
7911      justify-content: center;
7912      transition: 0.3s;
7913      width: 32px;
7914    }
7915    .side-media__text {
7916      color: inherit;
7917      font-family: "Inter", sans-serif;
7918      font-size: clamp(13px, 13px + (15 - 13) * (100dvw - 375px) / (1440 - 375), 15px);
7919      font-weight: 600;
7920      letter-spacing: -0.01em;
7921      padding-inline: 9px;
7922      text-decoration: none;
7923      white-space: nowrap;
7924    }
7925    .side-media:hover {
7926      background-color: #cfff32;
7927    }
7928    .side-media:hover .side-media__img {
7929      background-color: black;
7930    }
7931    .side-media:hover .green-arrow img {
7932      filter: invert(1);
7933    }
7934    .side-media:hover .side-media__svg {
7935      filter: brightness(1);
7936    }
7937    
7938    .gradient-border {
7939      position: relative;
7940    }
7941    .gradient-border::before {
7942      background-image: conic-gradient(from -18.65deg at 50% 50%, rgba(255, 255, 255, 0.3) 0deg, rgba(255, 255, 255, 0.8) 90deg, rgba(255, 255, 255, 0.3) 181.58deg, rgba(255, 255, 255, 0.8) 270deg, rgba(255, 255, 255, 0.3) 360deg);
7943      border-radius: inherit;
7944      content: "";
7945      inset: 0;
7946      padding: 1px;
7947      pointer-events: none;
7948      position: absolute;
7949      mask: conic-gradient(#000 0 0) content-box exclude, conic-gradient(#000 0 0);
7950    }
7951    
7952    .cta {
7953      display: flex;
7954      align-items: center;
7955      justify-content: center;
7956      border-radius: inherit;
7957      color: inherit;
7958      gap: 15px;
7959      padding: 5px;
7960      padding-left: 25px;
7961    }
7962    .cta__text {
7963      font-family: "Inter";
7964      font-weight: 500;
7965      font-size: 16px;
7966      color: inherit;
7967    }
7968    
7969    :root {
7970      --horizontal-padding: 2%; /* Можно менять здесь — или переопределять динамически */
7971    }
7972    
7973    .container {
7974      width: 100%;
7975      margin-inline: auto;
7976      padding-inline: var(--horizontal-padding);
7977    }
7978    @media (max-width: 1920px) {
7979      .container {
7980        --horizontal-padding: clamp(20px, 2%, 30px);
7981      }
7982    }
7983    @media (max-width: 1440px) {
7984      .container {
7985        --horizontal-padding: clamp(20px, 2%, 21px);
7986      }
7987    }
7988    @media (max-width: 1024px) {
7989      .container {
7990        --horizontal-padding: clamp(20px, 2.5%, 22px);
7991      }
7992    }
7993    @media (max-width: 375px) {
7994      .container {
7995        --horizontal-padding: 20px;
7996      }
7997    }
7998    
7999    .main {
8000      position: relative;
8001      z-index: 1;
8002      border-radius: 60px;
8003      border-bottom-left-radius: 0;
8004      border-bottom-right-radius: 0;
8005      background-color: white;
8006    }
8007    
8008    .section_wrapper {
8009      height: 125vh;
8010      position: relative;
8011      overflow: visible;
8012    }
8013    
8014    .center {
8015      position: fixed;
8016      width: 20px;
8017      height: 20px;
8018      top: 50%;
8019      left: 50%;
8020      transform: translate(-50%, -50%);
8021      z-index: 30;
8022      background-color: #a03f3f;
8023    }
8024    
8025    .background-blur {
8026      position: fixed;
8027      inset: 0;
8028      backdrop-filter: blur(30px);
8029      opacity: 0;
8030      transition: all 0.3s linear;
8031      pointer-events: none;
8032      z-index: 10;
8033      background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
8034    }
8035    .background-blur.active {
8036      opacity: 1;
8037    }
8038    
8039    .after-footer {
8040      background-color: #fafafa;
8041      padding-block: 60px 30px;
8042      position: relative;
8043      transition: 3s;
8044    }
8045    .after-footer__text {
8046      display: flex;
8047      background-color: #cfff32;
8048      border-radius: clamp(15px, 15px + (40 - 15) * (100dvw - 375px) / (1440 - 375), 40px);
8049    }
8050    .after-footer__text img {
8051      max-height: 100%;
8052      max-width: 1920px;
8053      object-fit: contain;
8054      object-position: center;
8055      width: 100%;
8056      margin-inline: auto;
8057      padding: 10px;
8058    }
8059    
8060    .go-to-start {
8061      bottom: clamp(15px, 15px + (75 - 15) * (100dvw - 375px) / (1440 - 375), 75px);
8062      left: 50%;
8063      position: absolute;
8064      text-decoration: none;
8065      translate: -50%;
8066    }
8067    .go-to-start .green-arrow {
8068      min-height: 26px;
8069      min-width: 26px;
8070    }
8071    .go-to-start .side-media {
8072      backdrop-filter: blur(15px);
8073      background-color: color-mix(in srgb, white 50%, transparent);
8074      padding-left: 20px;
8075      padding: 5px;
8076      transition: 0.5s;
8077    }
8078    .go-to-start .side-media__text {
8079      font-family: "Inter";
8080      font-weight: 500;
8081      text-decoration: none;
8082      font-size: 16px;
8083      line-height: 130%;
8084    }
8085    @media (max-width: 1440px) {
8086      .go-to-start .side-media__text {
8087        font-size: 14px;
8088      }
8089    }
8090    @media (max-width: 1024px) {
8091      .go-to-start .side-media__text {
8092        font-size: 14px;
8093      }
8094    }
8095    @media (max-width: 375px) {
8096      .go-to-start .side-media__text {
8097        font-size: 14px;
8098      }
8099    }
8100    .go-to-start:hover .side-media {
8101      background-color: color-mix(in srgb, white 80%, transparent);
8102    }
8103    
8104    .checkpoint {
8105      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1019607843);
8106      backdrop-filter: blur(10px);
8107      border: 1.5px solid;
8108      border-image-source: conic-gradient(from -18.65deg at 50% 50%, rgba(255, 255, 255, 0.2) 0deg, rgba(255, 255, 255, 0.6) 90deg, rgba(255, 255, 255, 0.2) 181.58deg, rgba(255, 255, 255, 0.6) 270deg, rgba(255, 255, 255, 0.2) 360deg);
8109    }/**
8110     * Swiper 11.2.10
8111     * Most modern mobile touch slider and framework with hardware accelerated transitions
8112     * https://swiperjs.com
8113     *
8114     * Copyright 2014-2025 Vladimir Kharlampidi
8115     *
8116     * Released under the MIT License
8117     *
8118     * Released on: June 28, 2025
8119     */
8120    
8121    /* FONT_START */
8122    @font-face {
8123      font-family: 'swiper-icons';
8124      src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
8125      font-weight: 400;
8126      font-style: normal;
8127    }
8128    /* FONT_END */
8129    :root {
8130      --swiper-theme-color: #007aff;
8131      /*
8132      --swiper-preloader-color: var(--swiper-theme-color);
8133      --swiper-wrapper-transition-timing-function: initial;
8134      */
8135    }
8136    :host {
8137      position: relative;
8138      display: block;
8139      margin-left: auto;
8140      margin-right: auto;
8141      z-index: 1;
8142    }
8143    .swiper {
8144      margin-left: auto;
8145      margin-right: auto;
8146      position: relative;
8147      overflow: hidden;
8148      list-style: none;
8149      padding: 0;
8150      /* Fix of Webkit flickering */
8151      z-index: 1;
8152      display: block;
8153    }
8154    .swiper-vertical > .swiper-wrapper {
8155      flex-direction: column;
8156    }
8157    .swiper-wrapper {
8158      position: relative;
8159      width: 100%;
8160      height: 100%;
8161      z-index: 1;
8162      display: flex;
8163      transition-property: transform;
8164      transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
8165      box-sizing: content-box;
8166    }
8167    .swiper-android .swiper-slide,
8168    .swiper-ios .swiper-slide,
8169    .swiper-wrapper {
8170      transform: translate3d(0px, 0, 0);
8171    }
8172    .swiper-horizontal {
8173      touch-action: pan-y;
8174    }
8175    .swiper-vertical {
8176      touch-action: pan-x;
8177    }
8178    .swiper-slide {
8179      flex-shrink: 0;
8180      width: 100%;
8181      height: 100%;
8182      position: relative;
8183      transition-property: transform;
8184      display: block;
8185    }
8186    .swiper-slide-invisible-blank {
8187      visibility: hidden;
8188    }
8189    /* Auto Height */
8190    .swiper-autoheight,
8191    .swiper-autoheight .swiper-slide {
8192      height: auto;
8193    }
8194    .swiper-autoheight .swiper-wrapper {
8195      align-items: flex-start;
8196      transition-property: transform, height;
8197    }
8198    .swiper-backface-hidden .swiper-slide {
8199      transform: translateZ(0);
8200      -webkit-backface-visibility: hidden;
8201              backface-visibility: hidden;
8202    }
8203    /* 3D Effects */
8204    .swiper-3d.swiper-css-mode .swiper-wrapper {
8205      perspective: 1200px;
8206    }
8207    .swiper-3d .swiper-wrapper {
8208      transform-style: preserve-3d;
8209    }
8210    .swiper-3d {
8211      perspective: 1200px;
8212    }
8213    .swiper-3d .swiper-slide,
8214    .swiper-3d .swiper-cube-shadow {
8215      transform-style: preserve-3d;
8216    }
8217    /* CSS Mode */
8218    .swiper-css-mode > .swiper-wrapper {
8219      overflow: auto;
8220      scrollbar-width: none;
8221      /* For Firefox */
8222      -ms-overflow-style: none;
8223      /* For Internet Explorer and Edge */
8224    }
8225    .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
8226      display: none;
8227    }
8228    .swiper-css-mode > .swiper-wrapper > .swiper-slide {
8229      scroll-snap-align: start start;
8230    }
8231    .swiper-css-mode.swiper-horizontal > .swiper-wrapper {
8232      scroll-snap-type: x mandatory;
8233    }
8234    .swiper-css-mode.swiper-vertical > .swiper-wrapper {
8235      scroll-snap-type: y mandatory;
8236    }
8237    .swiper-css-mode.swiper-free-mode > .swiper-wrapper {
8238      scroll-snap-type: none;
8239    }
8240    .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
8241      scroll-snap-align: none;
8242    }
8243    .swiper-css-mode.swiper-centered > .swiper-wrapper::before {
8244      content: '';
8245      flex-shrink: 0;
8246      order: 9999;
8247    }
8248    .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
8249      scroll-snap-align: center center;
8250      scroll-snap-stop: always;
8251    }
8252    .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
8253      margin-inline-start: var(--swiper-centered-offset-before);
8254    }
8255    .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
8256      height: 100%;
8257      min-height: 1px;
8258      width: var(--swiper-centered-offset-after);
8259    }
8260    .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
8261      margin-block-start: var(--swiper-centered-offset-before);
8262    }
8263    .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
8264      width: 100%;
8265      min-width: 1px;
8266      height: var(--swiper-centered-offset-after);
8267    }
8268    /* Slide styles start */
8269    /* 3D Shadows */
8270    .swiper-3d .swiper-slide-shadow,
8271    .swiper-3d .swiper-slide-shadow-left,
8272    .swiper-3d .swiper-slide-shadow-right,
8273    .swiper-3d .swiper-slide-shadow-top,
8274    .swiper-3d .swiper-slide-shadow-bottom,
8275    .swiper-3d .swiper-slide-shadow,
8276    .swiper-3d .swiper-slide-shadow-left,
8277    .swiper-3d .swiper-slide-shadow-right,
8278    .swiper-3d .swiper-slide-shadow-top,
8279    .swiper-3d .swiper-slide-shadow-bottom {
8280      position: absolute;
8281      left: 0;
8282      top: 0;
8283      width: 100%;
8284      height: 100%;
8285      pointer-events: none;
8286      z-index: 10;
8287    }
8288    .swiper-3d .swiper-slide-shadow {
8289      background: rgba(0, 0, 0, 0.15);
8290    }
8291    .swiper-3d .swiper-slide-shadow-left {
8292      background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
8293    }
8294    .swiper-3d .swiper-slide-shadow-right {
8295      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
8296    }
8297    .swiper-3d .swiper-slide-shadow-top {
8298      background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
8299    }
8300    .swiper-3d .swiper-slide-shadow-bottom {
8301      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
8302    }
8303    .swiper-lazy-preloader {
8304      width: 42px;
8305      height: 42px;
8306      position: absolute;
8307      left: 50%;
8308      top: 50%;
8309      margin-left: -21px;
8310      margin-top: -21px;
8311      z-index: 10;
8312      transform-origin: 50%;
8313      box-sizing: border-box;
8314      border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
8315      border-radius: 50%;
8316      border-top-color: transparent;
8317    }
8318    .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
8319    .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
8320      animation: swiper-preloader-spin 1s infinite linear;
8321    }
8322    .swiper-lazy-preloader-white {
8323      --swiper-preloader-color: #fff;
8324    }
8325    .swiper-lazy-preloader-black {
8326      --swiper-preloader-color: #000;
8327    }
8328    @keyframes swiper-preloader-spin {
8329      0% {
8330        transform: rotate(0deg);
8331      }
8332      100% {
8333        transform: rotate(360deg);
8334      }
8335    }
8336    /* Slide styles end */
8337    :root {
8338      /*
8339      --swiper-pagination-color: var(--swiper-theme-color);
8340      --swiper-pagination-left: auto;
8341      --swiper-pagination-right: 8px;
8342      --swiper-pagination-bottom: 8px;
8343      --swiper-pagination-top: auto;
8344      --swiper-pagination-fraction-color: inherit;
8345      --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
8346      --swiper-pagination-progressbar-size: 4px;
8347      --swiper-pagination-bullet-size: 8px;
8348      --swiper-pagination-bullet-width: 8px;
8349      --swiper-pagination-bullet-height: 8px;
8350      --swiper-pagination-bullet-border-radius: 50%;
8351      --swiper-pagination-bullet-inactive-color: #000;
8352      --swiper-pagination-bullet-inactive-opacity: 0.2;
8353      --swiper-pagination-bullet-opacity: 1;
8354      --swiper-pagination-bullet-horizontal-gap: 4px;
8355      --swiper-pagination-bullet-vertical-gap: 6px;
8356      */
8357    }
8358    .swiper-pagination {
8359      position: absolute;
8360      text-align: center;
8361      transition: 300ms opacity;
8362      transform: translate3d(0, 0, 0);
8363      z-index: 10;
8364    }
8365    .swiper-pagination.swiper-pagination-hidden {
8366      opacity: 0;
8367    }
8368    .swiper-pagination-disabled > .swiper-pagination,
8369    .swiper-pagination.swiper-pagination-disabled {
8370      display: none !important;
8371    }
8372    /* Common Styles */
8373    .swiper-pagination-fraction,
8374    .swiper-pagination-custom,
8375    .swiper-horizontal > .swiper-pagination-bullets,
8376    .swiper-pagination-bullets.swiper-pagination-horizontal {
8377      bottom: var(--swiper-pagination-bottom, 8px);
8378      top: var(--swiper-pagination-top, auto);
8379      left: 0;
8380      width: 100%;
8381    }
8382    /* Bullets */
8383    .swiper-pagination-bullets-dynamic {
8384      overflow: hidden;
8385      font-size: 0;
8386    }
8387    .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
8388      transform: scale(0.33);
8389      position: relative;
8390    }
8391    .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
8392      transform: scale(1);
8393    }
8394    .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
8395      transform: scale(1);
8396    }
8397    .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
8398      transform: scale(0.66);
8399    }
8400    .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
8401      transform: scale(0.33);
8402    }
8403    .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
8404      transform: scale(0.66);
8405    }
8406    .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
8407      transform: scale(0.33);
8408    }
8409    .swiper-pagination-bullet {
8410      width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
8411      height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
8412      display: inline-block;
8413      border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
8414      background: var(--swiper-pagination-bullet-inactive-color, #000);
8415      opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
8416    }
8417    button.swiper-pagination-bullet {
8418      border: none;
8419      margin: 0;
8420      padding: 0;
8421      box-shadow: none;
8422      -webkit-appearance: none;
8423              appearance: none;
8424    }
8425    .swiper-pagination-clickable .swiper-pagination-bullet {
8426      cursor: pointer;
8427    }
8428    .swiper-pagination-bullet:only-child {
8429      display: none !important;
8430    }
8431    .swiper-pagination-bullet-active {
8432      opacity: var(--swiper-pagination-bullet-opacity, 1);
8433      background: var(--swiper-pagination-color, var(--swiper-theme-color));
8434    }
8435    .swiper-vertical > .swiper-pagination-bullets,
8436    .swiper-pagination-vertical.swiper-pagination-bullets {
8437      right: var(--swiper-pagination-right, 8px);
8438      left: var(--swiper-pagination-left, auto);
8439      top: 50%;
8440      transform: translate3d(0px, -50%, 0);
8441    }
8442    .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
8443    .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
8444      margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
8445      display: block;
8446    }
8447    .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
8448    .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
8449      top: 50%;
8450      transform: translateY(-50%);
8451      width: 8px;
8452    }
8453    .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
8454    .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
8455      display: inline-block;
8456      transition: 200ms transform,
8457            200ms top;
8458    }
8459    .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
8460    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
8461      margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
8462    }
8463    .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
8464    .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
8465      left: 50%;
8466      transform: translateX(-50%);
8467      white-space: nowrap;
8468    }
8469    .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
8470    .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
8471      transition: 200ms transform,
8472            200ms left;
8473    }
8474    .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
8475      transition: 200ms transform,
8476        200ms right;
8477    }
8478    /* Fraction */
8479    .swiper-pagination-fraction {
8480      color: var(--swiper-pagination-fraction-color, inherit);
8481    }
8482    /* Progress */
8483    .swiper-pagination-progressbar {
8484      background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
8485      position: absolute;
8486    }
8487    .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
8488      background: var(--swiper-pagination-color, var(--swiper-theme-color));
8489      position: absolute;
8490      left: 0;
8491      top: 0;
8492      width: 100%;
8493      height: 100%;
8494      transform: scale(0);
8495      transform-origin: left top;
8496    }
8497    .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
8498      transform-origin: right top;
8499    }
8500    .swiper-horizontal > .swiper-pagination-progressbar,
8501    .swiper-pagination-progressbar.swiper-pagination-horizontal,
8502    .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
8503    .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
8504      width: 100%;
8505      height: var(--swiper-pagination-progressbar-size, 4px);
8506      left: 0;
8507      top: 0;
8508    }
8509    .swiper-vertical > .swiper-pagination-progressbar,
8510    .swiper-pagination-progressbar.swiper-pagination-vertical,
8511    .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
8512    .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
8513      width: var(--swiper-pagination-progressbar-size, 4px);
8514      height: 100%;
8515      left: 0;
8516      top: 0;
8517    }
8518    .swiper-pagination-lock {
8519      display: none;
8520    }
8521    .swiper-grid > .swiper-wrapper {
8522      flex-wrap: wrap;
8523    }
8524    .swiper-grid-column > .swiper-wrapper {
8525      flex-wrap: wrap;
8526      flex-direction: column;
8527    }
8528    .swiper-fade.swiper-free-mode .swiper-slide {
8529      transition-timing-function: ease-out;
8530    }
8531    .swiper-fade .swiper-slide {
8532      pointer-events: none;
8533      transition-property: opacity;
8534    }
8535    .swiper-fade .swiper-slide .swiper-slide {
8536      pointer-events: none;
8537    }
8538    .swiper-fade .swiper-slide-active {
8539      pointer-events: auto;
8540    }
8541    .swiper-fade .swiper-slide-active .swiper-slide-active {
8542      pointer-events: auto;
8543    }
8544    .swiper.swiper-flip {
8545      overflow: visible;
8546    }
8547    .swiper-flip .swiper-slide {
8548      pointer-events: none;
8549      -webkit-backface-visibility: hidden;
8550              backface-visibility: hidden;
8551      z-index: 1;
8552    }
8553    .swiper-flip .swiper-slide .swiper-slide {
8554      pointer-events: none;
8555    }
8556    .swiper-flip .swiper-slide-active,
8557    .swiper-flip .swiper-slide-active .swiper-slide-active {
8558      pointer-events: auto;
8559    }
8560    /* Flip slide shadows start */
8561    .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,
8562    .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
8563    .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
8564    .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
8565      z-index: 0;
8566      -webkit-backface-visibility: hidden;
8567              backface-visibility: hidden;
8568    }
8569    /* Flip slide shadows end */
8570    .swiper.swiper-cube {
8571      overflow: visible;
8572    }
8573    .swiper-cube .swiper-slide {
8574      pointer-events: none;
8575      -webkit-backface-visibility: hidden;
8576              backface-visibility: hidden;
8577      z-index: 1;
8578      visibility: hidden;
8579      transform-origin: 0 0;
8580      width: 100%;
8581      height: 100%;
8582    }
8583    .swiper-cube .swiper-slide .swiper-slide {
8584      pointer-events: none;
8585    }
8586    .swiper-cube.swiper-rtl .swiper-slide {
8587      transform-origin: 100% 0;
8588    }
8589    .swiper-cube .swiper-slide-active,
8590    .swiper-cube .swiper-slide-active .swiper-slide-active {
8591      pointer-events: auto;
8592    }
8593    .swiper-cube .swiper-slide-active,
8594    .swiper-cube .swiper-slide-next,
8595    .swiper-cube .swiper-slide-prev {
8596      pointer-events: auto;
8597      visibility: visible;
8598    }
8599    .swiper-cube .swiper-cube-shadow {
8600      position: absolute;
8601      left: 0;
8602      bottom: 0px;
8603      width: 100%;
8604      height: 100%;
8605      opacity: 0.6;
8606      z-index: 0;
8607    }
8608    .swiper-cube .swiper-cube-shadow:before {
8609      content: '';
8610      background: #000;
8611      position: absolute;
8612      left: 0;
8613      top: 0;
8614      bottom: 0;
8615      right: 0;
8616      filter: blur(50px);
8617    }
8618    .swiper-cube .swiper-slide-next + .swiper-slide {
8619      pointer-events: auto;
8620      visibility: visible;
8621    }
8622    /* Cube slide shadows start */
8623    .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,
8624    .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
8625    .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
8626    .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
8627      z-index: 0;
8628      -webkit-backface-visibility: hidden;
8629              backface-visibility: hidden;
8630    }
8631    /* Cube slide shadows end */
8632</style>
8633
8634        <link rel="preload" as="image" href="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/logo.svg">
8635
8636
8637        <link rel="icon" type="image/svg" sizes="32x32" href="/favicon.svg">
8638
8639        <title>Блог</title>
8640	<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>
8641	<meta name="robots" content="max-snippet:-1,max-image-preview:large,max-video-preview:-1" />
8642<link rel="canonical" href="https://yudaevschool.ru/blog/" />
8643<meta property="og:type" content="website" />
8644<meta property="og:locale" content="ru_RU" />
8645<meta property="og:site_name" content="Yudaev.School" />
8646<meta property="og:title" content="Блог" />
8647<meta property="og:url" content="https://yudaevschool.ru/blog/" />
8648<meta name="twitter:card" content="summary_large_image" />
8649<meta name="twitter:title" content="Блог" />
8650<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://yudaevschool.ru/#/schema/WebSite","url":"https://yudaevschool.ru/","name":"Yudaev.School","inLanguage":"ru-RU","potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://yudaevschool.ru/search/{search_term_string}/"},"query-input":"required name=search_term_string"},"publisher":{"@type":"Organization","@id":"https://yudaevschool.ru/#/schema/Organization","name":"Yudaev.School","url":"https://yudaevschool.ru/"}},{"@type":"WebPage","@id":"https://yudaevschool.ru/blog/","url":"https://yudaevschool.ru/blog/","name":"Блог","inLanguage":"ru-RU","isPartOf":{"@id":"https://yudaevschool.ru/#/schema/WebSite"},"breadcrumb":{"@type":"BreadcrumbList","@id":"https://yudaevschool.ru/#/schema/BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":"https://yudaevschool.ru/","name":"Yudaev.School"},{"@type":"ListItem","position":2,"name":"Блог"}]},"potentialAction":{"@type":"ReadAction","target":"https://yudaevschool.ru/blog/"}}]}</script>
8650
8651<link rel='stylesheet' id='wp-block-library-css' href='https://yudaevschool.ru/wp-includes/css/dist/block-library/style.min.css?ver=6.7.10' type='text/css' media='all' />
8652<style id='classic-theme-styles-inline-css' type='text/css'>
8653/*! This file is auto-generated */
8654.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
8655</style>
8656<style id='global-styles-inline-css' type='text/css'>
8657:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
8657--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}
8657.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
8658:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}
8659:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}
8660:root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;}
8661</style>
8662<link rel='stylesheet' id='contact-form-7-css' href='https://yudaevschool.ru/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=6.1.5' type='text/css' media='all' />
8663
8664    </head>
8665    <body>
8666        <link rel="stylesheet" href="https://yudaevschool.ru/wp-content/themes/yudaev/assets/swiper-bundle.min.css" />
8667        
8667<script src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/swiper-bundle.min.js"></script>
8667
8668
8669<header class="header container">
8670    <div class="div-gradient-blur">
8671        <div></div>
8672        <div></div>
8673        <div></div>
8674        <div></div>
8675        <div></div>
8676        <div></div>
8677    </div>
8678    <nav class="header__desktop row">
8679        <a class="header__logo row" href="/">
8680            <div class="header__logo-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/logo.svg" alt=""/></div>
8681            <h1 class="header__title">Yudaev School</h1>
8682        </a>
8683        <div class="header__menu gradient-border row">
8684            <div class="header__burger header__link gradient-border row" id="burger-pc">
8685                <div class="header__burger-icon gradient-border burger">
8686                    <input type="checkbox"/>
8687                    <label><span> </span><span> </span><span> </span></label>
8688                </div>
8689                <div class="header__burger-text">Курсы</div>
8690            </div>
8691			<div class="header__links row">
8692									<a class="header__link " href="/blog">
8693						Блог					</a>
8694									<a class="header__link header__link_green" href="https://yudaevschool.ru/design7?utm_source=seo&utm_medium=none&utm_campaign=web_free_mk7_seo_none_none_marathon_none_rf_yudaev_none">
8695						Бесплатное обучение					</a>
8696							</div>
8697            <div class="header__courses column" data-lenis-prevent>
8698                <div class="wrapper gradient-border column">
8699                    <div class="header__section column">
8700                        <div class="side-media row gradient-border header__section-title">
8701                            <div class="green-arrow side-media__img"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/Vector (7).svg" alt=""/></div>
8702                            <div class="side-media__text">Бесплатные программы</div>
8703                        </div>
8704                        <div class="header__section-content">
8705                                                        <div class="header__course gradient-border">
8706                                <div class="header__course-title"><span class="gradient-border">Web-дизайн с нуля</span></div>
8707                                <a href="https://yudaevschool.ru/design7">
8708                                    <div class="header__course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-1.webp" alt="Web-дизайн с нуля"/></div>
8709                                    <div class="green-arrow header__course-cta"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/green-arrow.svg" alt=""/></div>
8710                                </a>
8711                            </div>
8712                                                        <div class="header__course gradient-border">
8713                                <div class="header__course-title"><span class="gradient-border">Дизайнер карточек</span></div>
8714                                <a href="https://yudaevschool.ru/girl-market-design">
8715                                    <div class="header__course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-5.webp" alt="Дизайнер карточек"/></div>
8716                                    <div class="green-arrow header__course-cta"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/green-arrow.svg" alt=""/></div>
8717                                </a>
8718                            </div>
8719                                                    </div>
8720                    </div>
8721                    <div class="header__section column">
8722                        <div class="side-media row gradient-border header__section-title">
8723                            <div class="green-arrow side-media__img"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/Vector (8).svg" alt=""/></div>
8724                            <div class="side-media__text">Основные программы</div>
8725                        </div>
8726                        <div class="header__section-content">
8727                                                        <div class="header__course gradient-border">
8728                                <div class="header__course-title"><span class="gradient-border">
8728Digital-дизайнер</span></div>
8729                                <a href="https://yudaevschool.ru/digital-designer/">
8730                                    <div class="header__course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-6.webp" alt="Digital-дизайнер"/></div>
8731                                    <div class="green-arrow header__course-cta"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/green-arrow.svg" alt=""/></div>
8732                                </a>
8733                            </div>
8734                                                        <div class="header__course gradient-border">
8735                                <div class="header__course-title"><span class="gradient-border">UX/UI</span></div>
8736                                <a href="https://yudaevschool.ru/uxui-prof/">
8737                                    <div class="header__course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-7.webp" alt="UX/UI"/></div>
8738                                    <div class="green-arrow header__course-cta"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/green-arrow.svg" alt=""/></div>
8739                                </a>
8740                            </div>
8741                                                        <div class="header__course gradient-border">
8742                                <div class="header__course-title"><span class="gradient-border">3D-визуализатор</span></div>
8743                                <a href="https://yudaevschool.ru/3d-prof/">
8744                                    <div class="header__course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-8.webp" alt="3D-визуализатор"/></div>
8745                                    <div class="green-arrow header__course-cta"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/green-arrow.svg" alt=""/></div>
8746                                </a>
8747                            </div>
8748                                                        <div class="header__course gradient-border">
8749                                <div class="header__course-title"><span class="gradient-border">Графический дизайнер</span></div>
8750                                <a href="https://yudaevschool.ru/graf-diz">
8751                                    <div class="header__course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-9.webp" alt="Графический дизайнер"/></div>
8752                                    <div class="green-arrow header__course-cta"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/green-arrow.svg" alt=""/></div>
8753                                </a>
8754                            </div>
8755                                                        <div class="header__course gradient-border">
8756                                <div class="header__course-title"><span class="gradient-border">Курс по нейросетям</span></div>
8757                                <a href="https://yudaevschool.ru/ai-specialist">
8758                                    <div class="header__course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-10.webp" alt="Курс по нейросетям"/></div>
8759                                    <div class="green-arrow header__course-cta"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/green-arrow.svg" alt=""/></div>
8760                                </a>
8761                            </div>
8762                                                    </div>
8763                    </div>
8764                </div>
8765            </div>
8766        </div>
8767    </nav>
8768    <nav class="header__mobile column">
8769        <div class="header__head row">
8770            <div class="header__logo row">
8771                <div class="header__logo-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/logo.svg" alt=""/></div>
8772                <h1 class="header__title">Yudaev School                     </h1>
8773            </div>
8774            <div class="header__burger header__link gradient-border row" id="burger-mobile">
8775                <div class="header__burger-icon gradient-border burger">
8776                    <input type="checkbox"/>
8777                    <label><span> </span><span> </span><span> </span></label>
8778                </div>
8779                <div class="header__burger-text">Меню</div>
8780            </div>
8781        </div>
8782        <div class="header__mobile-content column gradient-border" style="display: none;">
8783            <div class="header__mobile-links column">
8784                <div class="side-media row gradient-border header__mobile-link gradient-border" style="flex-direction: row-reverse;" id="view-course">
8785                    <div class="green-arrow side-media__img"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/plus.svg" alt=""/></div>
8786                    <div class="side-media__text">Курсы</div>
8787                </div>
8788                                    <a
8789					   class="side-media row gradient-border header__mobile-link gradient-border header__mobile-link_green"
8790					   style="flex-direction: row-reverse;"
8791					   href="https://yudaevschool.ru/design7?utm_source=seo&utm_medium=none&utm_campaign=web_free_mk7_seo_none_none_marathon_none_rf_yudaev_none"
8792					>
8793                        <div class="green-arrow side-media__img"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/white-right.svg" alt=""/></div>
8794                        <div class="side-media__text">
8795							Бесплатное обучение						</div>
8796                    </a>
8797                                <a class="header__mobile-mini-link gradient-border first" href="/blog">Блог</a>
8798            </div>
8799            <div class="header__mobile-foot column">
8800                <div class="header__mobile-foot-section column">
8801                    <div class="header__mobile-foot-title">Мессенджеры</div>
8802                    <div class="header__mobile-foot-links row">
8803                        <a class="header__mobile-mini-link gradient-border" href="https://t.me/yuadevschoolmanagerbot">Telegram</a>
8804                        <!--a(href="").header__mobile-mini-link.gradient-border WhatsApp-->
8805                    </div>
8806                </div>
8807                <div class="header__mobile-foot-section column social">
8808                    <div class="header__mobile-foot-title">Соц. сети</div>
8809                    <div class="header__mobile-foot-links row social">
8810                        <a href="https://www.behance.net/yudaev-school">
8811                            <div class="green-arrow"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/icons/be.svg" alt=""/></div>
8812                        </a>
8813                        <a href="https://www.pinterest.com/YudaevSchool">
8814                            <div class="green-arrow"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/icons/pint.svg" alt=""/></div>
8815                        </a>
8816                        <a href="https://www.instagram.com/yudaev.school">
8817                            <div class="green-arrow"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/icons/inst.svg" alt=""/></div>
8818                        </a>
8819                        <a href="https://t.me/+RG10o4n3xtliMGFi">
8820                            <div class="green-arrow"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/icons/tg.svg" alt=""/></div>
8821                        </a>
8822                        <a href="https://vk.com/yudaevschool">
8823                            <div class="green-arrow"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/icons/vk.svg" alt=""/></div>
8824                        </a>
8825                        <a href="https://www.youtube.com/@yudaev_digital">
8826                            <div class="green-arrow"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/icons/yt.svg" alt=""/></div>
8827                        </a>
8828                    </div>
8829                </div>
8830            </div>
8831            <div class="header__mobile-curses column">
8832                <div class="green-arrow header__mobile-back"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/icons/left-arrow.svg" alt=""/></div>
8833                <div class="header__mobile-course column">
8834                    <div class="header__mobile-course-head row">
8835                        <div class="side-media row gradient-border header__section-title">
8836                            <div class="green-arrow side-media__img"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/Vector (7).svg" alt=""/></div>
8837                            <div class="side-media__text">Бесплатные программы</div>
8838                        </div>
8839                        <div class="header__mobile-course-count gradient-border">2</div>
8840                    </div>
8841                    <div class="header__mobile-course-content row swiper first">
8842                        <div class="swiper-wrapper">
8843                                                        <a class="header__mobile-course-card column swiper-slide" href="https://yudaevschool.ru/design7">
8844                                <div class="header__mobile-course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-1.webp" alt="Web-дизайн с нуля"/></div>
8845                                <div class="header__mobile-course-title">Web-дизайн с нуля</div>
8846                            </a>
8847                                                        <a class="header__mobile-course-card column swiper-slide" href="https://yudaevschool.ru/girl-market-design">
8848                                <div class="header__mobile-course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-5.webp" alt="Дизайнер карточек"/></div>
8849                                <div class="header__mobile-course-title">Дизайнер карточек</div>
8850                            </a>
8851                                                    </div>
8852                    </div>
8853                </div>
8854                <div class="header__mobile-course column">
8855                    <div class="header__mobile-course-head row">
8856                        <div class="side-media row gradient-border header__section-title">
8857                            <div class="green-arrow side-media__img"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/Vector (8).svg" alt=""/></div>
8858                            <div class="side-media__text">Основные программы</div>
8859                        </div>
8860                        <div class="header__mobile-course-count gradient-border">5</div>
8861                    </div>
8862                    <div class="header__mobile-course-content row swiper second">
8863                        <div class="swiper-wrapper">
8864                                                        <a class="header__mobile-course-card column swiper-slide" href="https://yudaevschool.ru/digital-designer/">
8865                                <div class="header__mobile-course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-6.webp" alt="Digital-дизайнер"/></div>
8866                                <div class="header__mobile-course-title">Digital-дизайнер</div>
8867                            </a>
8868                                                        <a class="header__mobile-course-card column swiper-slide" href="https://yudaevschool.ru/uxui-prof/">
8869                                <div class="header__mobile-course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-7.webp" alt="UX/UI"/></div>
8870                                <div class="header__mobile-course-title">UX/UI</div>
8871                            </a>
8872                                                        <a class="header__mobile-course-card column swiper-slide" href="https://yudaevschool.ru/3d-prof/">
8873                                <div class="header__mobile-course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-8.webp" alt="3D-визуализатор"/></div>
8874                                <div class="header__mobile-course-title">3D-визуализатор</div>
8875                            </a>
8876                                                        <a class="header__mobile-course-card column swiper-slide" href="https://yudaevschool.ru/graf-diz">
8877                                <div class="header__mobile-course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-9.webp" alt="Графический дизайнер"/></div>
8878                                <div class="header__mobile-course-title">Графический дизайнер</div>
8879                            </a>
8880                                                        <a class="header__mobile-course-card column swiper-slide" href="https://yudaevschool.ru/ai-specialist">
8881                                <div class="header__mobile-course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-10.webp" alt="Курс по нейросетям"/></div>
8882                                <div class="header__mobile-course-title">Курс по нейросетям</div>
8883                            </a>
8884                                                    </div>
8885                    </div>
8886                </div>
8887            </div>
8888        </div>
8889    </nav>
8890</header>
8891
8892
8893<style>
8894	/* Правки */
8895	
8896	/* Sep 16 2025 */
8897	.header__logo.row {
8898		color: black;
8899	}
8900</style>
8901
8902<main>
8903
8904    <style>
8905    #page-blog-hero {
8906        background-image: url('https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/hero.webp');
8907        background-position: left;
8908        background-size: cover;
8909        border-block-end: solid 0.1rem #b3b3b3;
8910        margin-block-end: clamp(8rem, calc(8rem + (12 - 8) * ((100dvw - 37.5rem) / (144 - 37.5))), 12rem);
8911
8912        .div-main {
8913            display: grid;
8914			grid-template-columns: 1fr 1.4fr;
8915            gap: clamp(2.4rem, calc(2.4rem + (4 - 2.4) * ((100dvw - 37.5rem) / (144 - 37.5))), 4rem);
8916            margin-block:
8917                clamp(10.3rem, calc(10.3rem + (11.1 - 10.3) * ((100dvw - 37.5rem) / (144 - 37.5))), 11.1rem)                clamp(6rem, calc(8rem + (6 - 8) * ((100dvw - 37.5rem) / (144 - 37.5))), 8rem)            ;
8918        }
8919
8920        .div-text,
8921        .div-items {
8922            width: 100%;
8923        }
8924
8925        .swiper {
8926            border-radius: 2rem 0 0 2rem;
8927            /*margin-inline: -10rem -2rem;*/
8928            min-width: 0;
8929            overflow: visible;
8930            /*padding-inline: 10rem 2rem;*/
8931            /*mask-image: linear-gradient(to right, transparent 4rem, black 10rem);*/
8932        }
8933
8934        .swiper-wrapper {
8935            box-sizing: border-box;
8936        }
8937
8938        .h2 {
8939            color: color-mix(in srgb, black 25%, transparent);
8940            font-family: 'Loos';
8941            font-size: clamp(3.4rem, calc(3.4rem + (5.6 - 3.4) * ((100dvw - 37.5rem) / (144 - 37.5))), 5.6rem);
8942            font-variation-settings: "wdth" 1000;
8943            font-weight: 700;
8944            line-height: 115%;
8945            margin-block: auto;
8946
8947            span {
8948                color: black;
8949            }
8950        }
8951
8952        .div-text {
8953            display: flex;
8954            flex-direction: column;
8955            padding-inline-start: clamp(0rem, calc(0rem + (5.8 - 0) * ((100dvw - 37.5rem) / (144 - 37.5))), 5.8rem);
8956            margin-inline-end: 10rem;
8957        }
8958
8959        .div-navigation {
8960            align-items: center;
8961            display: flex;
8962            gap: 1rem;
8963            margin-block-end: 3rem;
8964            z-index: 2;
8965
8966            &.--mobile {
8967                display: none;
8968            }
8969        }
8970
8971        .p-navigation {
8972            align-items: center;
8973            justify-content: center;
8974            display: flex;
8975            border-radius: 100rem;
8976            border: solid 0.1rem #AAAAAA;
8977            font-size: 1.8rem;
8978            font-weight: 500;
8979            height: 6rem;
8980            line-height: 130%;
8981            text-align: center;
8982            user-select: none;
8983            width: 100%;
8984
8985            span {
8986                color: color-mix(in srgb, black 25%, transparent);
8987            }
8988        }
8989
8990        .img-swiper-nav {
8991            background-color: #cfff32;
8992            border-radius: 100rem;
8993            cursor: pointer;
8994            height: 6rem;
8995            object-fit: scale-down;
8996            width: 6rem;
8997        }
8998
8999        .a-item {
9000            background-color: white;
9001            border: solid 0.1rem #b9b9b9;
9002            border-radius: 2rem;
9003            display: flex;
9004            flex-direction: column;
9005            height: 64.4rem;
9006            width: 51rem;
9007			transition: 0.5s;
9008
9009            & + & {
9010                margin-inline-start: -0.1rem;
9011            }
9012			
9013			&.swiper-slide-prev,
9014			&:not(.swiper-slide-active):not(.swiper-slide-next) {
9015				opacity: 0;
9016				pointer-events: none;
9017			}
9018			
9019			&.swiper-slide-next + & {
9020				opacity: 1;
9021				pointer-events: unset;
9022			}
9023        }
9024
9025        .div-img {
9026            aspect-ratio: 1 / 1;
9027            border-radius: 2rem;
9028            box-shadow: 0 0.6rem 1.5rem color-mix(in srgb, black 7%, transparent);
9029            margin: clamp(1.5rem, calc(1.5rem + (2 - 1.5) * ((100dvw - 37.5rem) / (144 - 37.5))), 2rem);
9030            position: relative;
9031            width: calc(100% - clamp(1.5rem, calc(1.5rem + (2 - 1.5) * ((100dvw - 37.5rem) / (144 - 37.5))), 2rem) * 2);
9032			overflow: hidden;
9033
9034            &:after {
9035                border-radius: 2rem;
9036                box-shadow: inset 0 0 2.5rem 0.2rem white;
9037                content: '';
9038                height: 100%;
9039                left: 0;
9040                position: absolute;
9041                top: 0;
9042                width: 100%;
9043            }
9044        }
9045
9046        .img-item {
9047            border-radius: 2rem;
9048            height: 100%;
9049            object-fit: cover;
9050            transition: var(--animation--slowest);
9051            width: 100%;
9052
9053            .a-item:not(.swiper-slide-active) & {
9054                opacity: 0.3;
9055            }
9056        }
9057
9058        .p-title {
9059            border-block-start: solid 0.1rem #b9b9b9;
9060            border-radius: 2rem;
9061            font-size: 2rem;
9062            font-weight: 600;
9063            line-clamp: 2;
9064            line-height: 120%;
9065            margin-block-end: 1.3rem;
9066            padding-block-start: clamp(1.5rem, calc(1.5rem + (2 - 1.5) * ((100dvw - 37.5rem) / (144 - 37.5))), 2rem);
9067            padding-inline: clamp(1.5rem, calc(1.5rem + (2 - 1.5) * ((100dvw - 37.5rem) / (144 - 37.5))), 2rem);
9068            text-wrap: pretty;
9069            transition: var(--animation--slow);
9070
9071            -webkit-box-orient: vertical;
9072            -webkit-line-clamp: 2;
9073            display: -webkit-box;
9074            overflow: hidden;
9075
9076            .a-item:not(.swiper-slide-active) & {
9077                color: #B9B9B9;
9078            }
9079        }
9080
9081        .div-tags {
9082            display: flex;
9083            gap: clamp(0.4rem, calc(0.4rem + (0.7 - 0.4) * ((100dvw - 37.5rem) / (144 - 37.5))), 0.7rem);
9084            margin-block-start: auto;
9085            padding-block-end: 1.5rem;
9086            padding-inline: clamp(1.5rem, calc(1.5rem + (2 - 1.5) * ((100dvw - 37.5rem) / (144 - 37.5))), 2rem);
9087        }
9088
9089        .p-tag {
9090            align-items: center;
9091            border-radius: 100rem;
9092            border: solid 0.1rem #b9b9b9;
9093            color: #c4c4c4;
9094            display: flex;
9095            font-size: 1.2rem;
9096            height: 2rem;
9097            letter-spacing: 0.015em;
9098            padding-inline: 0.8rem;
9099            user-select: none;
9100            white-space: nowrap;
9101        }
9102
9103        @media (width <= 1100px) {
9104            background-size: contain;
9105
9106            .a-item {
9107                height: auto;
9108            }
9109            
9110            .div-main {
9111				display: flex;
9112                flex-direction: column;
9113            }
9114
9115            .div-text {
9116                padding-inline-start: 0;
9117            }
9118
9119            .div-navigation {
9120                display: none;
9121                margin: 0;
9122
9123                &.--mobile {
9124                    display: flex;
9125                }
9126            }
9127
9128            .swiper {
9129                clip-path: none;
9130                padding: 0;
9131                margin: 0;
9132                mask-image: none;
9133            }
9134        }
9135
9136        @media (width <= 640px) {
9137            background: none;
9138            border: none;
9139
9140            .div-main {
9141                margin-block-end: 2rem;
9142            }
9143
9144            .div-img {
9145                aspect-ratio: unset;
9146                height: 30.9rem;
9147            }
9148
9149            .div-tags {
9150                border: none;
9151                margin-block-end: 0
9152            }
9153
9154            .a-item {
9155                height: auto;
9156                width: 100%;
9157            }
9158        }
9159    }
9160</style>
9161
9162<section id="page-blog-hero" class="Centered">
9163    <div class="div-main">
9164        <div class="div-text">
9165            <h2 class="Text h2">
9166                <span>Топ 10</span><br>
9167                Статей недели
9168            </h2>
9169            <div class="div-navigation">
9170                <p class="Text p-navigation"><!-- This is set with JS -->&nbsp;</p>
9171                <img class="ButtonEffect img-swiper-nav" loading="lazy"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new--reversed.svg" alt="" draggable="false" />                <img class="ButtonEffect img-swiper-nav" loading="lazy"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" />            </div>
9172        </div>
9173        <div class="swiper div-items">
9174            <div class="swiper-wrapper">
9175
9176                
9177                    <a
9178                        class="LinkContainer swiper-slide a-item"
9179                        href="https://yudaevschool.ru/blog/kto-takoy-3d-designer-i-chto-on-delaet/"
9180                    >
9181                        <div class="div-img">
9182                            <img
9183                                class="img-item"
9184                                src="https://yudaevschool.ru/wp-content/uploads/2025/09/2-1.png"
9185                                alt=""
9186                                loading="lazy"
9187                                draggable="false"
9188                            />
9189                        </div>
9190                        <p class="Text p-title">
9191                            3D-дизайнер: кто это, чем занимается и сколько зарабатывает в 2026 году                        </p>
9192
9193                        <div class="div-tags">
9194
9195                            
9196                                <p class="Text p-tag">
9197                                    3D-дизайн                                </p>
9198
9199                            
9200                        </div>
9201                    </a>
9202
9203                
9204                    <a
9205                        class="LinkContainer swiper-slide a-item"
9206                        href="https://yudaevschool.ru/blog/kto-takoj-web-designer-i-chem-on-zanimaetsya/"
9207                    >
9208                        <div class="div-img">
9209                            <img
9210                                class="img-item"
9211                                src="https://yudaevschool.ru/wp-content/uploads/2025/09/8.png"
9212                                alt=""
9213                                loading="lazy"
9214                                draggable="false"
9215                            />
9216                        </div>
9217                        <p class="Text p-title">
9218                            Веб-дизайнер: кто это, чем занимается и сколько зарабатывает в 2026 году                        </p>
9219
9220                        <div class="div-tags">
9221
9222                            
9223                                <p class="Text p-tag">
9224                                    Веб-дизайн                                </p>
9225
9226                            
9227                        </div>
9228                    </a>
9229
9230                
9231                    <a
9232                        class="LinkContainer swiper-slide a-item"
9233                        href="https://yudaevschool.ru/blog/professiya-ux-ui-disainer-interfeisov/"
9234                    >
9235                        <div class="div-img">
9236                            <img
9237                                class="img-item"
9238                                src="https://yudaevschool.ru/wp-content/uploads/2025/09/4.png"
9239                                alt=""
9240                                loading="lazy"
9241                                draggable="false"
9242                            />
9243                        </div>
9244                        <p class="Text p-title">
9245                            UX/UI-дизайнер: кто это, чем занимается и сколько зарабатывает в 2026 году                        </p>
9246
9247                        <div class="div-tags">
9248
9249                            
9250                                <p class="Text p-tag">
9251                                    UX/UI                                </p>
9252
9253                            
9254                        </div>
9255                    </a>
9256
9257                
9258                    <a
9259                        class="LinkContainer swiper-slide a-item"
9260                        href="https://yudaevschool.ru/blog/kto-takoy-storismeiker-i-kak-im-stat/"
9261                    >
9262                        <div class="div-img">
9263                            <img
9264                                class="img-item"
9265                                src="https://yudaevschool.ru/wp-content/uploads/2025/09/5-1.png"
9266                                alt=""
9267                                loading="lazy"
9268                                draggable="false"
9269                            />
9270                        </div>
9271                        <p class="Text p-title">
9272                            Кто такой сторисмейкер, что он делает и как им стать в 2026 году                        </p>
9273
9274                        <div class="div-tags">
9275
9276                            
9277                                <p class="Text p-tag">
9278                                    Веб-дизайн                                </p>
9279
9280                            
9281                        </div>
9282                    </a>
9283
9284                
9285                    <a
9286                        class="LinkContainer swiper-slide a-item"
9287                        href="https://yudaevschool.ru/blog/chto-takoe-motion-design-i-kak-im-stat/"
9288                    >
9289                        <div class="div-img">
9290                            <img
9291                                class="img-item"
9292                                src="https://yudaevschool.ru/wp-content/uploads/2025/09/3-1.png"
9293                                alt=""
9294                                loading="lazy"
9295                                draggable="false"
9296                            />
9297                        </div>
9298                        <p class="Text p-title">
9299                            Что такое моушн-дизайн и как стать motion-дизайнером в 2026 году                        </p>
9300
9301                        <div class="div-tags">
9302
9303                            
9304                                <p class="Text p-tag">
9305                                    Моушн-дизайн                                </p>
9306
9307                            
9308                        </div>
9309                    </a>
9310
9311                
9312                    <a
9313                        class="LinkContainer swiper-slide a-item"
9314                        href="https://yudaevschool.ru/blog/3d-modelirovanie-osnovnye-tipy-principy-i-instrumenty/"
9315                    >
9316                        <div class="div-img">
9317                            <img
9318                                class="img-item"
9319                                src="https://yudaevschool.ru/wp-content/uploads/2025/09/1-1.png"
9320                                alt=""
9321                                loading="lazy"
9322                                draggable="false"
9323                            />
9324                        </div>
9325                        <p class="Text p-title">
9326                            Что такое 3D-моделирование: виды, этапы и инструменты                        </p>
9327
9328                        <div class="div-tags">
9329
9330                            
9331                                <p class="Text p-tag">
9332                                    3D-дизайн                                </p>
9333
9334                            
9335                        </div>
9336                    </a>
9337
9338                
9339                    <a
9340                        class="LinkContainer swiper-slide a-item"
9341                        href="https://yudaevschool.ru/blog/gde-uchitsya-na-ux-ui-designera/"
9342                    >
9343                        <div class="div-img">
9344                            <img
9345                                class="img-item"
9346                                src="https://yudaevschool.ru/wp-content/uploads/2025/09/2.png"
9347                                alt=""
9348                                loading="lazy"
9349                                draggable="false"
9350                            />
9351                        </div>
9352                        <p class="Text p-title">
9353                            Где учиться на UX/UI-дизайнера в 2026 году и сколько длится обучение                        </p>
9354
9355                        <div class="div-tags">
9356
9357                            
9358                                <p class="Text p-tag">
9359                                    UX/UI                                </p>
9360
9361                            
9362                        </div>
9363                    </a>
9364
9365                
9366                    <a
9367                        class="LinkContainer swiper-slide a-item"
9368                        href="https://yudaevschool.ru/blog/kto-takoj-graficheskij-dizajner-i-chem-on-zanimaetsya/"
9369                    >
9370                        <div class="div-img">
9371                            <img
9372                                class="img-item"
9373                                src="https://yudaevschool.ru/wp-content/uploads/2025/09/6-1.png"
9374                                alt=""
9375                                loading="lazy"
9376                                draggable="false"
9377                            />
9378                        </div>
9379                        <p class="Text p-title">
9380                            Графический дизайнер: кто это, чем занимается и как им стать в 2026 году                        </p>
9381
9382                        <div class="div-tags">
9383
9384                            
9385                                <p class="Text p-tag">
9386                                    Графический дизайн                                </p>
9387
9388                            
9389                        </div>
9390                    </a>
9391
9392                
9393                    <a
9394                        class="LinkContainer swiper-slide a-item"
9395                        href="https://yudaevschool.ru/blog/gde-uchitsya-na-web-designera-i-skolko-na-eto-nujno-vremeni/"
9396                    >
9397                        <div class="div-img">
9398                            <img
9399                                class="img-item"
9400                                src="https://yudaevschool.ru/wp-content/uploads/2025/08/4.png"
9401                                alt=""
9402                                loading="lazy"
9403                                draggable="false"
9404                            />
9405                        </div>
9406                        <p class="Text p-title">
9407                            Где учиться на веб-дизайнера и сколько времени нужно в 2026 году                        </p>
9408
9409                        <div class="div-tags">
9410
9411                            
9412                                <p class="Text p-tag">
9413                                    Веб-дизайн                                </p>
9414
9415                            
9416                        </div>
9417                    </a>
9418
9419                
9420            </div>
9421        </div>
9422        <div class="div-navigation --mobile">
9423            <p class="Text p-navigation">01&nbsp;<span>/ 10</span></p>
9424            <img class="ButtonEffect img-swiper-nav" loading="lazy"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new--reversed.svg" alt="" draggable="false" />            <img class="ButtonEffect img-swiper-nav" loading="lazy"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" />        </div>
9425    </div>
9426</section>
9427
9428<script type="module">
9429    const swiper = new Swiper('#page-blog-hero .swiper', {
9430        slidesPerView: 'auto',
9431        loop: true,
9432        resistanceRatio: 0.5,
9433        speed: 500,
9434        navigation: {
9435            prevEl: '#page-blog-hero .img-swiper-nav:first-of-type',
9436            nextEl: '#page-blog-hero .img-swiper-nav:last-of-type'
9437        }
9438    });
9439
9440    swiper.on('slideChange', () => {
9441        const overallAmount = swiper.slides.length;
9442        const current = String(swiper.realIndex + 1).padStart(overallAmount.toString().length, '0');
9443
9444        const pNavigationAll = document.querySelectorAll('#page-blog-hero .p-navigation');
9445
9446        pNavigationAll.forEach(element => {
9447            element.innerHTML = `${current}&nbsp;<span>/ ${overallAmount}`;
9448        });
9449    });
9450</script>
9450
9451	
9452	<style>
9453    #searchbar {
9454        .div-wrapper {
9455            display: flex;
9456            gap: 2rem;
9457            margin-block-end: 8rem;
9458			width: 936px;
9459			margin-inline: auto;
9460			max-width: 100%;
9461        }
9462
9463        .input {
9464            border-radius: 100rem;
9465            border: none;
9466            font-family: 'Inter';
9467            font-size: 1.5rem;
9468            font-weight: 400;
9469            height: 6rem;
9470            letter-spacing: -0.02em;
9471            line-height: 6rem;
9472            outline-offset: -0.2rem;
9473            outline: solid 0.1rem #b3b3b3;
9474            text-indent: 2rem;
9475            transition: var(--animation);
9476            width: 100%;
9477
9478            &:focus-visible {
9479                outline-color:rgb(184, 226, 46);
9480            }
9481
9482            &::placeholder {
9483                color: #15151566;
9484                font-family: 'Inter';
9485                font-weight: 500;
9486                letter-spacing: -0.02em;
9487                opacity: 1;
9488            }
9489        }
9490
9491        .div-button {
9492            height: 6rem;
9493        }
9494		
9495		.h2 {
9496			text-align: center;
9497			line-height: 115%;
9498			font-family: 'Loos';
9499			font-variation-settings: "wdth" 1000;
9500			font-weight: 700;
9501			font-size: clamp(3.4rem, calc(3.4rem + (4 - 3.4) * ((100dvw - 37.5rem) / (144 - 37.5))), 4rem);
9502			
9503			span {
9504				color: color-mix(in srgb, black 50%, transparent);
9505			}
9506		}
9507		
9508		.div-wrapper-outer {
9509			display: flex;
9510			gap: clamp(2.4rem, calc(2.4rem + (4 - 2.4) * ((100dvw - 37.5rem) / (144 - 37.5))), 4rem);
9511			flex-direction: column;
9512		}
9513		
9514		@media (width <= 540px) {
9515			.h2 {
9516				text-align: left;
9517			}
9518		}
9519
9520        @media (width <= 500px) {
9521            gap: 1rem;
9522
9523            .div-button {
9524                align-items: center;
9525                display: flex;
9526                height: 6rem;
9527                justify-content: center;
9528                min-height: 6rem;
9529                min-width: 6rem;
9530                padding: 0rem;
9531                width: 6rem;
9532
9533                span {
9534                    display: none;
9535                }
9536
9537                img {
9538                    margin: 0;
9539                }
9540            }
9541        }
9542    }
9543</style>
9544
9545<div id="searchbar" class="Centered">
9546	<div class="div-wrapper-outer">
9547		
9548				
9549			<h2 class="Text h2">Поиск <span>по&nbsp;материалам</span></h2>
9550		
9551				
9552		<div class="div-wrapper">
9553			<input class="input" type="text" placeholder="Поисковый запрос" value="" />
9554			<div class="Button ButtonEffect div-button">
9555				<span>Поиск</span>
9556				<img class="" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/arrow.webp" alt="" draggable="false" />			</div>
9557		</div>
9558	</div>
9559</div>
9560
9561<script type="module">
9562    const input = document.querySelector('#searchbar .input');
9563    const button = document.querySelector('#searchbar .div-button');
9564
9565    function search() {
9566        window.location.href = `/?s=${input.value}`;
9567    }
9568
9569    input.onkeyup = event => { event.keyCode === 13 && search() }
9570    button.onclick = () => search();
9571</script>
9571
9572
9573    
9574<style>
9575    #page-blog-recent {
9576        margin-block-end: clamp(8rem, calc(8rem + (15 - 8) * ((100dvw - 37.5rem) / (144 - 37.5))), 15rem);
9577
9578        &:has(+ * + * + #searchbar) {
9579            margin-block-end: 8rem;
9580        }
9581
9582        .swiper {
9583            overflow: unset;
9584        }
9585
9586        .swiper-wrapper {
9587            box-sizing: border-box;
9588        }
9589
9590        .swiper-scrollbar {
9591            background-color: #e6e6e6;
9592            border-radius: 100rem;
9593            bottom: unset;
9594            height: 0.3rem;
9595            left: 0;
9596            overflow: hidden;
9597            position: relative;
9598            translate: 0 -1rem;
9599            width: 100%;
9600        }
9601
9602        .swiper-scrollbar-drag {
9603            background-color: var(--black);
9604        }
9605        
9606        .div-scrollbar {
9607            align-items: center;
9608            display: flex;
9609            margin-block-start: 4rem;
9610
9611            &:has(.swiper-scrollbar[style*="display: none"]) {
9612                display: none;
9613            }
9614        }
9615
9616        .img-swiper-nav {
9617            border-radius: 100rem;
9618            cursor: pointer;
9619            height: 6rem;
9620            object-fit: scale-down;
9621            width: 6rem;
9622            margin-block-end: 2rem;
9623
9624            & + & {
9625                margin-inline-start: 1.2rem;
9626            }
9627
9628            &:nth-of-type(1) {
9629                margin-inline-start: 4.8rem;
9630            }
9631        }
9632
9633        .div-title {
9634            display: flex;
9635            flex-direction: column;
9636            gap: 2.4rem;
9637            justify-content: space-between;
9638            margin-block-end: clamp(2rem, calc(2rem + (4 - 2) * ((100dvw - 37.5rem) / (144 - 37.5))), 4rem);
9639        }
9640
9641        .div-swiper-tags {
9642            clip-path: inset(0% calc(-100% - 1rem) 0% 1rem);
9643            margin: -1rem;
9644            min-width: 0;
9645            padding: 1rem;
9646            width: fit-content;
9647        }
9648
9649        .h2 {
9650            font-family: 'Loos';
9651            font-size: clamp(3.2rem, calc(3.2rem + (4 - 3.2) * ((100dvw - 37.5rem) / (144 - 37.5))), 4rem);
9652            font-variation-settings: "wdth" 1000;
9653            font-weight: 700;
9654            line-height: 100%;
9655            text-wrap: pretty;
9656            width: fit-content;
9657
9658            span {
9659                color: color-mix(in srgb, black 25%, transparent);
9660            }
9661        }
9662
9663        .p-tag {
9664            align-items: center;
9665            border-radius: 100rem;
9666            display: flex;
9667            font-size: 1.4rem;
9668            font-weight: 500;
9669            height: 3.6rem;
9670            outline-offset: -0.1rem;
9671            outline: solid 0.1rem transparent;
9672            padding-inline: 1.5rem;
9673            transition: 0.2s;
9674            width: fit-content;
9675
9676            &.--is-selected {
9677                pointer-events: none;
9678            }
9679
9680            &:not(.--is-selected) {
9681                background-color: transparent;
9682                box-shadow: none;
9683                cursor: pointer;
9684                outline: solid 0.1rem #b3b3b3;
9685            }
9686        }
9687
9688        .div-img {
9689            aspect-ratio: 38.7 / 28.5;
9690            box-shadow: 0 0.6rem 1.5rem color-mix(in srgb, black 7%, transparent);
9691			border-radius: 2rem;
9692            margin-block-end: 1.5rem;
9693            position: relative;
9694            
9695            &:after {
9696                border-radius: 2rem;
9697                box-shadow: inset 0 0 2.5rem 0.2rem white;
9698                content: '';
9699                height: 100%;
9700                left: 0;
9701                position: absolute;
9702                top: 0;
9703                width: 100%;
9704            }
9705        }
9706
9707        .img {
9708            border-radius: 2rem;
9709            object-fit: cover;
9710            width: 100%;
9711            height: 100%
9712        }
9713
9714        .article {
9715            width: clamp(33.5rem, calc(33.5rem + (38.7 - 33.5) * ((100dvw - 37.5rem) / (144 - 37.5))), 38.7rem);
9716            transition: var(--animation--slow) opacity;
9717
9718            &:hover {
9719                opacity: 0.7;
9720            }
9721
9722            &.--is-hidden {
9723                display: none;
9724            }
9725        }
9726
9727		.div-item-tags {
9728			display: flex;
9729			gap: 0.5rem;
9730			margin-block-end: 1.5rem;
9731			flex-wrap: wrap;
9732			min-height: 60px;
9733		}
9734
9735        .p-item-tag {
9736            align-items: center;
9737            border-radius: 100rem;
9738            border: solid 0.1rem #b9b9b9;
9739            color: #B9B9B9;
9740            display: flex;
9741            font-size: 1.5rem;
9742            height: 2.5rem;
9743            letter-spacing: 0.015em;
9744            padding-inline: 0.8rem;
9745            text-wrap: pretty;
9746        }
9747
9748        .p-title {
9749            font-size: 2rem;
9750            font-weight: 600;
9751            line-height: 120%;
9752        }
9753
9754        @media (width <= 720px) {
9755            .img-swiper-nav {
9756                display: none;
9757            }
9758        }
9759    }
9760</style>
9761
9762<section id="page-blog-recent" class="Centered">
9763    <div class="div-title">
9764        <h2 class="Text h2">
9765            <span>Популярные</span> статьи</h2>
9766        <div class="swiper div-swiper-tags">
9767            <div class="swiper-wrapper">
9768                <p
9769                    class="swiper-slide ButtonEffect Text p-tag --is-selected"
9770                    data-term-id=-1
9771                >
9772                    Все
9773                </p>
9774
9775                
9776                    <p
9777                        class="swiper-slide ButtonEffect Text p-tag"
9778                        data-term-id=11                    >
9779                        3D-дизайн                    </p>
9780
9781                
9782                    <p
9783                        class="swiper-slide ButtonEffect Text p-tag"
9784                        data-term-id=8                    >
9785                        UX/UI                    </p>
9786
9787                
9788                    <p
9789                        class="swiper-slide ButtonEffect Text p-tag"
9790                        data-term-id=10                    >
9791                        Веб-дизайн                    </p>
9792
9793                
9794                    <p
9795                        class="swiper-slide ButtonEffect Text p-tag"
9796                        data-term-id=9                    >
9797                        Графический дизайн                    </p>
9798
9799                
9800                    <p
9801                        class="swiper-slide ButtonEffect Text p-tag"
9802                        data-term-id=14                    >
9803                        Искусство                    </p>
9804
9805                
9806                    <p
9807                        class="swiper-slide ButtonEffect Text p-tag"
9808                        data-term-id=13                    >
9809                        Любым дизайнерам                    </p>
9810
9811                
9812                    <p
9813                        class="swiper-slide ButtonEffect Text p-tag"
9814                        data-term-id=12                    >
9815                        Моушн-дизайн                    </p>
9816
9817                
9818                    <p
9819                        class="swiper-slide ButtonEffect Text p-tag"
9820                        data-term-id=16                    >
9821                        Нейросети                    </p>
9822
9823                
9824                    <p
9825                        class="swiper-slide ButtonEffect Text p-tag"
9826                        data-term-id=15                    >
9827                        Образование                    </p>
9828
9829                
9830            </div>
9831        </div>
9832    </div>
9833    <div class="swiper div-swiper-articles">
9834        <div class="swiper-wrapper">
9835
9836            
9837                <a
9838                    class="swiper-slide LinkContainer article"
9839                    data-term-ids-json='[8,10]'
9840                    href="https://yudaevschool.ru/blog/cjm-karta-puti-klienta-ux/"
9841                >
9842                    <div class="div-img">
9843                        <img
9844                            class="img"
9845                            src="https://yudaevschool.ru/wp-content/uploads/2026/10/cjm-karta-puti-klienta-ux.webp"
9846                            alt=""
9847                            loading="lazy"
9848                            draggable="false"
9849                        />
9850                    </div>
9851                    <div class="div-item-tags">
9852
9853                        
9854                            <p class="Text p-item-tag">
9855                                UX/UI                            </p>
9856
9857                        
9858                            <p class="Text p-item-tag">
9859                                Веб-дизайн                            </p>
9860
9861                        
9862                    </div>
9863                    <p class="Text p-title">
9864                        CJM: как построить карту пути клиента и применять её в UX-дизайне                    </p>
9865                </a>
9866
9867            
9868                <a
9869                    class="swiper-slide LinkContainer article"
9870                    data-term-ids-json='[8,10]'
9871                    href="https://yudaevschool.ru/blog/vayrfreym-sayta-v-figma/"
9872                >
9873                    <div class="div-img">
9874                        <img
9875                            class="img"
9876                            src="https://yudaevschool.ru/wp-content/uploads/2026/10/vayrfreym-sayta-v-figma.webp"
9877                            alt=""
9878                            loading="lazy"
9879                            draggable="false"
9880                        />
9881                    </div>
9882                    <div class="div-item-tags">
9883
9884                        
9885                            <p class="Text p-item-tag">
9886                                UX/UI                            </p>
9887
9888                        
9889                            <p class="Text p-item-tag">
9890                                Веб-дизайн                            </p>
9891
9892                        
9893                    </div>
9894                    <p class="Text p-title">
9895                        Вайрфрейм сайта: что это, какие бывают и как сделать в Figma                    </p>
9896                </a>
9897
9898            
9899                <a
9900                    class="swiper-slide LinkContainer article"
9901                    data-term-ids-json='[13]'
9902                    href="https://yudaevschool.ru/blog/dizayn-sistema-v-figma/"
9903                >
9904                    <div class="div-img">
9905                        <img
9906                            class="img"
9907                            src="https://yudaevschool.ru/wp-content/uploads/2026/10/dizayn-sistema-v-figma.webp"
9908                            alt=""
9909                            loading="lazy"
9910                            draggable="false"
9911                        />
9912                    </div>
9913                    <div class="div-item-tags">
9914
9915                        
9916                            <p class="Text p-item-tag">
9917                                Любым дизайнерам                            </p>
9918
9919                        
9920                    </div>
9921                    <p class="Text p-title">
9922                        Дизайн-система в Figma: как собрать компоненты, стили и документацию                    </p>
9923                </a>
9924
9925            
9926                <a
9927                    class="swiper-slide LinkContainer article"
9928                    data-term-ids-json='[10,13]'
9929                    href="https://yudaevschool.ru/blog/auto-layout-v-figma/"
9930                >
9931                    <div class="div-img">
9932                        <img
9933                            class="img"
9934                            src="https://yudaevschool.ru/wp-content/uploads/2026/10/auto-layout-v-figma-hero.webp"
9935                            alt=""
9936                            loading="lazy"
9937                            draggable="false"
9938                        />
9939                    </div>
9940                    <div class="div-item-tags">
9941
9942                        
9943                            <p class="Text p-item-tag">
9944                                Веб-дизайн                            </p>
9945
9946                        
9947                            <p class="Text p-item-tag">
9948                                Любым дизайнерам                            </p>
9949
9950                        
9951                    </div>
9952                    <p class="Text p-title">
9953                        Auto Layout в Figma: полный гайд по адаптивным компонентам                    </p>
9954                </a>
9955
9956            
9957                <a
9958                    class="swiper-slide LinkContainer article"
9959                    data-term-ids-json='[11]'
9960                    href="https://yudaevschool.ru/blog/render-v-blender-cycles-ili-eevee-svet-kamera-kachestvo/"
9961                >
9962                    <div class="div-img">
9963                        <img
9964                            class="img"
9965                            src="https://yudaevschool.ru/wp-content/uploads/2026/09/render-v-blender-oblozhka.webp"
9966                            alt=""
9967                            loading="lazy"
9968                            draggable="false"
9969                        />
9970                    </div>
9971                    <div class="div-item-tags">
9972
9973                        
9974                            <p class="Text p-item-tag">
9975                                3D-дизайн                            </p>
9976
9977                        
9978                    </div>
9979                    <p class="Text p-title">
9980                        Рендер в Blender: Cycles или Eevee, свет, камера и настройки качества                    </p>
9981                </a>
9982
9983            
9984                <a
9985                    class="swiper-slide LinkContainer article"
9986                    data-term-ids-json='[8,10]'
9987                    href="https://yudaevschool.ru/blog/interaktivnyy-prototip-v-figma/"
9988                >
9989                    <div class="div-img">
9990                        <img
9991                            class="img"
9992                            src="https://yudaevschool.ru/wp-content/uploads/2026/08/interaktivnyy-prototip-v-figma.webp"
9993                            alt=""
9994                            loading="lazy"
9995                            draggable="false"
9996                        />
9997                    </div>
9998                    <div class="div-item-tags">
9999
10000                        
10001                            <p class="Text p-item-tag">
10002                                UX/UI                            </p>
10003
10004                        
10005                            <p class="Text p-item-tag">
10006                                Веб-дизайн                            </p>
10007
10008                        
10009                    </div>
10010                    <p class="Text p-title">
10011                        Интерактивный прототип в Figma: переходы, оверлеи и анимация                    </p>
10012                </a>
10013
10014            
10015                <a
10016                    class="swiper-slide LinkContainer article"
10017                    data-term-ids-json='[9,13]'
10018                    href="https://yudaevschool.ru/blog/mudbord-dlya-dizajnera/"
10019                >
10020                    <div class="div-img">
10021                        <img
10022                            class="img"
10023                            src="https://yudaevschool.ru/wp-content/uploads/2026/08/mudbord-dlya-dizajnera-oblozhka.webp"
10024                            alt=""
10025                            loading="lazy"
10026                            draggable="false"
10027                        />
10028                    </div>
10029                    <div class="div-item-tags">
10030
10031                        
10032                            <p class="Text p-item-tag">
10033                                Графический дизайн                            </p>
10034
10035                        
10036                            <p class="Text p-item-tag">
10037                                Любым дизайнерам                            </p>
10038
10039                        
10040                    </div>
10041                    <p class="Text p-title">
10042                        Мудборд для дизайнера: как собрать визуальную концепцию проекта                    </p>
10043                </a>
10044
10045            
10046                <a
10047                    class="swiper-slide LinkContainer article"
10048                    data-term-ids-json='[9,13]'
10049                    href="https://yudaevschool.ru/blog/firmennyy-stil-chto-eto-elementy-razrabotka/"
10050                >
10051                    <div class="div-img">
10052                        <img
10053                            class="img"
10054                            src="https://yudaevschool.ru/wp-content/uploads/2026/08/firmennyy-stil-ajdentika-oblozhka.webp"
10055                            alt=""
10056                            loading="lazy"
10057                            draggable="false"
10058                        />
10059                    </div>
10060                    <div class="div-item-tags">
10061
10062                        
10063                            <p class="Text p-item-tag">
10064                                Графический дизайн                            </p>
10065
10066                        
10067                            <p class="Text p-item-tag">
10068                                Любым дизайнерам                            </p>
10069
10070                        
10071                    </div>
10072                    <p class="Text p-title">
10073                        Фирменный стиль: что это, из чего состоит айдентика и как её разработать                    </p>
10074                </a>
10075
10076            
10077                <a
10078                    class="swiper-slide LinkContainer article"
10079                    data-term-ids-json='[9,13]'
10080                    href="https://yudaevschool.ru/blog/brendbuk-chto-vhodit-kak-sozdat/"
10081                >
10082                    <div class="div-img">
10083                        <img
10084                            class="img"
10085                            src="https://yudaevschool.ru/wp-content/uploads/2026/08/brendbuk-oblozhka-3d.webp"
10086                            alt=""
10087                            loading="lazy"
10088                            draggable="false"
10089                        />
10090                    </div>
10091                    <div class="div-item-tags">
10092
10093                        
10094                            <p class="Text p-item-tag">
10095                                Графический дизайн                            </p>
10096
10097                        
10098                            <p class="Text p-item-tag">
10099                                Любым дизайнерам                            </p>
10100
10101                        
10102                    </div>
10103                    <p class="Text p-title">
10104                        Брендбук: что входит, как разработать и оформить — с примерами                    </p>
10105                </a>
10106
10107            
10108                <a
10109                    class="swiper-slide LinkContainer article"
10110                    data-term-ids-json='[8,10]'
10111                    href="https://yudaevschool.ru/blog/struktura-prodayushchego-lendinga/"
10112                >
10113                    <div class="div-img">
10114                        <img
10115                            class="img"
10116                            src="https://yudaevschool.ru/wp-content/uploads/2026/08/titulnoe
10116-izobrazhenie-struktura-prodayushchego-lendinga.webp"
10117                            alt=""
10118                            loading="lazy"
10119                            draggable="false"
10120                        />
10121                    </div>
10122                    <div class="div-item-tags">
10123
10124                        
10125                            <p class="Text p-item-tag">
10126                                UX/UI                            </p>
10127
10128                        
10129                            <p class="Text p-item-tag">
10130                                Веб-дизайн                            </p>
10131
10132                        
10133                    </div>
10134                    <p class="Text p-title">
10135                        Структура продающего лендинга: какие блоки нужны и в каком порядке                    </p>
10136                </a>
10137
10138            
10139                <a
10140                    class="swiper-slide LinkContainer article"
10141                    data-term-ids-json='[9]'
10142                    href="https://yudaevschool.ru/blog/dizajn-kartochek-wildberries-ozon/"
10143                >
10144                    <div class="div-img">
10145                        <img
10146                            class="img"
10147                            src="https://yudaevschool.ru/wp-content/uploads/2026/08/01-glavnoe-izobrazhenie.webp"
10148                            alt=""
10149                            loading="lazy"
10150                            draggable="false"
10151                        />
10152                    </div>
10153                    <div class="div-item-tags">
10154
10155                        
10156                            <p class="Text p-item-tag">
10157                                Графический дизайн                            </p>
10158
10159                        
10160                    </div>
10161                    <p class="Text p-title">
10162                        Дизайн карточек для Wildberries и Ozon: инфографика, структура и размеры                    </p>
10163                </a>
10164
10165            
10166                <a
10167                    class="swiper-slide LinkContainer article"
10168                    data-term-ids-json='[13,16]'
10169                    href="https://yudaevschool.ru/blog/bing-image-creator-obzor/"
10170                >
10171                    <div class="div-img">
10172                        <img
10173                            class="img"
10174                            src="https://yudaevschool.ru/wp-content/uploads/2026/07/261.webp"
10175                            alt=""
10176                            loading="lazy"
10177                            draggable="false"
10178                        />
10179                    </div>
10180                    <div class="div-item-tags">
10181
10182                        
10183                            <p class="Text p-item-tag">
10184                                Любым дизайнерам                            </p>
10185
10186                        
10187                            <p class="Text p-item-tag">
10188                                Нейросети                            </p>
10189
10190                        
10191                    </div>
10192                    <p class="Text p-title">
10193                        Bing Image Creator: обзор, возможности и инструкция по использованию в 2026 году                    </p>
10194                </a>
10195
10196            
10197                <a
10198                    class="swiper-slide LinkContainer article"
10199                    data-term-ids-json='[13,16]'
10200                    href="https://yudaevschool.ru/blog/nejroseti-dlya-upravleniya-proektami-chem-polzovatsya-dizajneru-i-na-chto-obratit-vnimanie/"
10201                >
10202                    <div class="div-img">
10203                        <img
10204                            class="img"
10205                            src="https://yudaevschool.ru/wp-content/uploads/2026/07/1-1.webp"
10206                            alt=""
10207                            loading="lazy"
10208                            draggable="false"
10209                        />
10210                    </div>
10211                    <div class="div-item-tags">
10212
10213                        
10214                            <p class="Text p-item-tag">
10215                                Любым дизайнерам                            </p>
10216
10217                        
10218                            <p class="Text p-item-tag">
10219                                Нейросети                            </p>
10220
10221                        
10222                    </div>
10223                    <p class="Text p-title">
10224                        Нейросети для управления проектами: чем пользоваться дизайнеру и на что обратить внимание                    </p>
10225                </a>
10226
10227            
10228                <a
10229                    class="swiper-slide LinkContainer article"
10230                    data-term-ids-json='[13,16]'
10231                    href="https://yudaevschool.ru/blog/10-nejrosetej-dlya-sozdaniya-logotipov-i-gerbov/"
10232                >
10233                    <div class="div-img">
10234                        <img
10235                            class="img"
10236                            src="https://yudaevschool.ru/wp-content/uploads/2026/06/259.webp"
10237                            alt=""
10238                            loading="lazy"
10239                            draggable="false"
10240                        />
10241                    </div>
10242                    <div class="div-item-tags">
10243
10244                        
10245                            <p class="Text p-item-tag">
10246                                Любым дизайнерам                            </p>
10247
10248                        
10249                            <p class="Text p-item-tag">
10250                                Нейросети                            </p>
10251
10252                        
10253                    </div>
10254                    <p class="Text p-title">
10255                        10 нейросетей для создания логотипов и гербов в 2026 году                    </p>
10256                </a>
10257
10258            
10259                <a
10260                    class="swiper-slide LinkContainer article"
10261                    data-term-ids-json='[13,16]'
10262                    href="https://yudaevschool.ru/blog/besplatnye-neyroseti-dlya-fotosessiy-po-foto/"
10263                >
10264                    <div class="div-img">
10265                        <img
10266                            class="img"
10267                            src="https://yudaevschool.ru/wp-content/uploads/2026/06/201.png"
10268                            alt=""
10269                            loading="lazy"
10270                            draggable="false"
10271                        />
10272                    </div>
10273                    <div class="div-item-tags">
10274
10275                        
10276                            <p class="Text p-item-tag">
10277                                Любым дизайнерам                            </p>
10278
10279                        
10280                            <p class="Text p-item-tag">
10281                                Нейросети                            </p>
10282
10283                        
10284                    </div>
10285                    <p class="Text p-title">
10286                        Бесплатные 9 нейросетей для фотосессий по фото в 2026 году: создаем реалистичные снимки без фотографа и студии                    </p>
10287                </a>
10288
10289            
10290                <a
10291                    class="swiper-slide LinkContainer article"
10292                    data-term-ids-json='[11,12]'
10293                    href="https://yudaevschool.ru/blog/kak-sozdat-personazha-onlajn-besplatno/"
10294                >
10295                    <div class="div-img">
10296                        <img
10297                            class="img"
10298                            src="https://yudaevschool.ru/wp-content/uploads/2026/05/1-2.webp"
10299                            alt=""
10300                            loading="lazy"
10301                            draggable="false"
10302                        />
10303                    </div>
10304                    <div class="div-item-tags">
10305
10306                        
10307                            <p class="Text p-item-tag">
10308                                3D-дизайн                            </p>
10309
10310                        
10311                            <p class="Text p-item-tag">
10312                                Моушн-дизайн                            </p>
10313
10314                        
10315                    </div>
10316                    <p class="Text p-title">
10317                        Бесплатные конструкторы, в которых можно создать персонажа                    </p>
10318                </a>
10319
10320            
10321                <a
10322                    class="swiper-slide LinkContainer article"
10323                    data-term-ids-json='[13,15]'
10324                    href="https://yudaevschool.ru/blog/obrazovanie-posle-shkoly-kuda-poiti-uchitsya/"
10325                >
10326                    <div class="div-img">
10327                        <img
10328                            class="img"
10329                            src="https://yudaevschool.ru/wp-content/uploads/2026/05/186.webp"
10330                            alt=""
10331                            loading="lazy"
10332                            draggable="false"
10333                        />
10334                    </div>
10335                    <div class="div-item-tags">
10336
10337                        
10338                            <p class="Text p-item-tag">
10339                                Любым дизайнерам                            </p>
10340
10341                        
10342                            <p class="Text p-item-tag">
10343                                Образование                            </p>
10344
10345                        
10346                    </div>
10347                    <p class="Text p-title">
10348                        Образование после школы: куда пойти учиться                    </p>
10349                </a>
10350
10351            
10352                <a
10353                    class="swiper-slide LinkContainer article"
10354                    data-term-ids-json='[13,15]'
10355                    href="https://yudaevschool.ru/blog/kem-rabotat-bez-opyta-i-obrazovaniya/"
10356                >
10357                    <div class="div-img">
10358                        <img
10359                            class="img"
10360                            src="https://yudaevschool.ru/wp-content/uploads/2026/05/1.png"
10361                            alt=""
10362                            loading="lazy"
10363                            draggable="false"
10364                        />
10365                    </div>
10366                    <div class="div-item-tags">
10367
10368                        
10369                            <p class="Text p-item-tag">
10370                                Любым дизайнерам                            </p>
10371
10372                        
10373                            <p class="Text p-item-tag">
10374                                Образование                            </p>
10375
10376                        
10377                    </div>
10378                    <p class="Text p-title">
10379                        Кем работать, если ничего не умеешь, нет образования или опыта                    </p>
10380                </a>
10381
10382            
10383                <a
10384                    class="swiper-slide LinkContainer article"
10385                    data-term-ids-json='[11,12]'
10386                    href="https://yudaevschool.ru/blog/programmy-dlya-3d-modelirovaniya/"
10387                >
10388                    <div class="div-img">
10389                        <img
10390                            class="img"
10391                            src="https://yudaevschool.ru/wp-content/uploads/2026/03/1-1.webp"
10392                            alt=""
10393                            loading="lazy"
10394                            draggable="false"
10395                        />
10396                    </div>
10397                    <div class="div-item-tags">
10398
10399                        
10400                            <p class="Text p-item-tag">
10401                                3D-дизайн                            </p>
10402
10403                        
10404                            <p class="Text p-item-tag">
10405                                Моушн-дизайн                            </p>
10406
10407                        
10408                    </div>
10409                    <p class="Text p-title">
10410                        Лучшие программы для 3D-моделирования в 2026 году                    </p>
10411                </a>
10412
10413            
10414                <a
10415                    class="swiper-slide LinkContainer article"
10416                    data-term-ids-json='[13,15]'
10417                    href="https://yudaevschool.ru/blog/test-veklslera-zadac
10417hi-i-pravila-provedeniya/"
10418                >
10419                    <div class="div-img">
10420                        <img
10421                            class="img"
10422                            src="https://yudaevschool.ru/wp-content/uploads/2026/03/1.webp"
10423                            alt=""
10424                            loading="lazy"
10425                            draggable="false"
10426                        />
10427                    </div>
10428                    <div class="div-item-tags">
10429
10430                        
10431                            <p class="Text p-item-tag">
10432                                Любым дизайнерам                            </p>
10433
10434                        
10435                            <p class="Text p-item-tag">
10436                                Образование                            </p>
10437
10438                        
10439                    </div>
10440                    <p class="Text p-title">
10441                        Тест Векслера: задачи и правила проведения                    </p>
10442                </a>
10443
10444            
10445                <a
10446                    class="swiper-slide LinkContainer article"
10447                    data-term-ids-json='[13,15]'
10448                    href="https://yudaevschool.ru/blog/izmenilsya-poryadok-priema-v-vuzy-2026/"
10449                >
10450                    <div class="div-img">
10451                        <img
10452                            class="img"
10453                            src="https://yudaevschool.ru/wp-content/uploads/2026/02/1-4.webp"
10454                            alt=""
10455                            loading="lazy"
10456                            draggable="false"
10457                        />
10458                    </div>
10459                    <div class="div-item-tags">
10460
10461                        
10462                            <p class="Text p-item-tag">
10463                                Любым дизайнерам                            </p>
10464
10465                        
10466                            <p class="Text p-item-tag">
10467                                Образование                            </p>
10468
10469                        
10470                    </div>
10471                    <p class="Text p-title">
10472                        Изменился порядок приёма в вузы в 2026 году                    </p>
10473                </a>
10474
10475            
10476                <a
10477                    class="swiper-slide LinkContainer article"
10478                    data-term-ids-json='[14,13]'
10479                    href="https://yudaevschool.ru/blog/sekret-genialnosti-chernogo-kvadrata-malevicha/"
10480                >
10481                    <div class="div-img">
10482                        <img
10483                            class="img"
10484                            src="https://yudaevschool.ru/wp-content/uploads/2026/02/chernyj-kvadrat-molevicha.jpeg"
10485                            alt=""
10486                            loading="lazy"
10487                            draggable="false"
10488                        />
10489                    </div>
10490                    <div class="div-item-tags">
10491
10492                        
10493                            <p class="Text p-item-tag">
10494                                Искусство                            </p>
10495
10496                        
10497                            <p class="Text p-item-tag">
10498                                Любым дизайнерам                            </p>
10499
10500                        
10501                    </div>
10502                    <p class="Text p-title">
10503                        В чём секрет гениальности «Чёрного квадрата» Малевича                    </p>
10504                </a>
10505
10506            
10507                <a
10508                    class="swiper-slide LinkContainer article"
10509                    data-term-ids-json='[11,8,12]'
10510                    href="https://yudaevschool.ru/blog/programmy-dlya-sozdaniya-animacii/"
10511                >
10512                    <div class="div-img">
10513                        <img
10514                            class="img"
10515                            src="https://yudaevschool.ru/wp-content/uploads/2025/11/4.webp"
10516                            alt=""
10517                            loading="lazy"
10518                            draggable="false"
10519                        />
10520                    </div>
10521                    <div class="div-item-tags">
10522
10523                        
10524                            <p class="Text p-item-tag">
10525                                3D-дизайн                            </p>
10526
10527                        
10528                            <p class="Text p-item-tag">
10529                                UX/UI                            </p>
10530
10531                        
10532                            <p class="Text p-item-tag">
10533                                Моушн-дизайн                            </p>
10534
10535                        
10536                    </div>
10537                    <p class="Text p-title">
10538                        12 популярных программ для создания анимации                    </p>
10539                </a>
10540
10541            
10542                <a
10543                    class="swiper-slide LinkContainer article"
10544                    data-term-ids-json='[12]'
10545                    href="https://yudaevschool.ru/blog/davinci-resolve-videoredaktor-dlya-montaja/"
10546                >
10547                    <div class="div-img">
10548                        <img
10549                            class="img"
10550                            src="https://yudaevschool.ru/wp-content/uploads/2025/10/01-1.png"
10551                            alt=""
10552                            loading="lazy"
10553                            draggable="false"
10554                        />
10555                    </div>
10556                    <div class="div-item-tags">
10557
10558                        
10559                            <p class="Text p-item-tag">
10560                                Моушн-дизайн                            </p>
10561
10562                        
10563                    </div>
10564                    <p class="Text p-title">
10565                        DaVinci Resolve: обзор программы, цена и возможные аналоги                    </p>
10566                </a>
10567
10568            
10569        </div>
10570        <div class="div-scrollbar">
10571            <div class="swiper-scrollbar"></div>
10572            <img class="img-swiper-nav ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new--reversed.svg" alt="" draggable="false" />            <img class="img-swiper-nav ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" />        </div>
10573    </div>
10574</section>
10575
10576<script type="module">
10577    const swiperTags = new Swiper('#page-blog-recent .div-swiper-tags', {
10578        slidesPerView: 'auto',
10579        spaceBetween: 12,
10580        loop: false
10581    });
10582
10583    const swiperArticles = new Swiper('#page-blog-recent .div-swiper-articles', {
10584        slidesPerView: 'auto',
10585        loop: false,
10586        spaceBetween: 8,
10587        navigation: {
10588            prevEl: '#page-blog-recent .img-swiper-nav:first-of-type',
10589            nextEl: '#page-blog-recent .img-swiper-nav:last-of-type'
10590        },
10591        scrollbar: {
10592            el: '#page-blog-recent .swiper-scrollbar'
10593        },
10594    });
10595
10596    const pageBlogRecent = document.querySelector('#page-blog-recent');
10597    const pTagAll = pageBlogRecent.querySelectorAll('.p-tag');
10598    const articleAll = pageBlogRecent.querySelectorAll('.article');
10599
10600    pTagAll.forEach(element => {
10601        element.onclick = () => {
10602            pTagAll.forEach(otherElement => otherElement.classList.remove('--is-selected'));
10603
10604            element.classList.add('--is-selected');
10605
10606            // Note the `+`
10607            const selectedDataTermId = + element.getAttribute('data-term-id');
10608
10609            articleAll.forEach(articleElement => articleElement.classList.remove('--is-hidden'));
10610
10611            if (selectedDataTermId !== -1) {
10612                articleAll.forEach(articleElement => {
10613                    // Note the `+`
10614                    const articleDataTermIds = JSON.parse(articleElement.getAttribute('data-term-ids-json'));
10615                    if (! articleDataTermIds.includes(selectedDataTermId)) {
10616                        articleElement.classList.add('--is-hidden');
10617                    }
10618                })
10619            }
10620
10621            swiperArticles.update();
10622        }
10623    });
10624</script>
10624
10625
10626    
10627    <style>
10628    #page-blog-other {
10629        margin-block-end: clamp(8rem, calc(8rem + (15 - 8) * ((100dvw - 37.5rem) / (144 - 37.5))), 15rem);
10630
10631        .swiper {
10632            overflow: unset;
10633        }
10634
10635        .swiper-wrapper {
10636            box-sizing: border-box;
10637        }
10638
10639        .swiper-scrollbar {
10640            background-color: #e6e6e6;
10641            border-radius: 100rem;
10642            bottom: unset;
10643            height: 0.3rem;
10644            left: 0;
10645            overflow: hidden;
10646            position: relative;
10647            translate: 0 -1rem;
10648            width: 100%;
10649        }
10650
10651        .swiper-scrollbar-drag {
10652            background-color: var(--black);
10653        }
10654        
10655        .div-scrollbar {
10656            align-items: center;
10657            display: flex;
10658            margin-block-start: 4rem;
10659        }
10660
10661        .img-swiper-nav {
10662            border-radius: 100rem;
10663            cursor: pointer;
10664            height: 6rem;
10665            object-fit: scale-down;
10666            width: 6rem;
10667            margin-block-end: 2rem;
10668
10669            & + & {
10670                margin-inline-start: 1.2rem;
10671            }
10672
10673            &:nth-of-type(1) {
10674                margin-inline-start: 4.8rem;
10675            }
10676        }
10677
10678        .h2 {
10679            font-family: 'Loos';
10680            font-size: clamp(3.2rem, calc(3.2rem + (4 - 3.2) * ((100dvw - 37.5rem) / (144 - 37.5))), 4rem);
10681            font-variation-settings: "wdth" 1000;
10682            font-weight: 700;
10683            line-height: 100%;
10684            margin-block-end: 4rem;
10685            text-wrap: pretty;
10686            width: fit-content;
10687        }
10688
10689        .div-item {
10690            height: clamp(33.5rem, calc(33.5rem + (40 - 33.5) * ((100dvw - 37.5rem) / (144 - 37.5))), 40rem);
10691            position: relative;
10692            width: clamp(33.5rem, calc(33.5rem + (60 - 33.5) * ((100dvw - 37.5rem) / (144 - 37.5))), 60rem);
10693        }
10694
10695        .div-img {
10696            border-radius: clamp(1.6rem, calc(2.4rem + (1.6 - 2.4) * ((100dvw - 37.5rem) / (144 - 37.5))), 2.4rem);
10697            display: flex;
10698            height: 100%;
10699            justify-content: center;
10700            overflow: hidden;
10701            width: 100%;
10702        }
10703
10704        .img {
10705            height: 100%;
10706            width: 100%;
10707            object-fit: cover;
10708        }
10709
10710        .p-title {
10711            font-size: 2rem;
10712            font-weight: 700;
10713            line-height: 130%;
10714            margin-block-end: 1.2rem;
10715            width: fit-content;
10716        }
10717
10718        .div-text {
10719            bottom: 0;
10720            left: 0;
10721            position: absolute;
10722            width: 100%;
10723            padding: 2.4rem;
10724        }
10725
10726        .p-badge {
10727            align-items: center;
10728            background-color: color-mix(in srgb, white 40%, transparent);
10729            border-radius: 100rem;
10730            box-shadow: 0 0.2rem 1rem color-mix(in srgb, black 5%, transparent);
10731            color: color-mix(in srgb, black 40%, transparent);
10732            display: flex;
10733            font-size: 1.3rem;
10734            font-weight: 600;
10735            gap: 1rem;
10736            line-height: 130%;
10737            margin-block-end: 1.5rem;
10738            padding: 0.3rem 1.2rem 0.3rem 0.3rem;
10739            width: fit-content;
10740        }
10741
10742        .img-icon {
10743            border-radius: 100rem;
10744            box-shadow: 0 0.2rem 0.5rem color-mix(in srgb, black 10%, transparent);
10745            height: 2rem;
10746            width: 2rem;
10747        }
10748
10749        .p-description {
10750            color: color-mix(in srgb, black 40%, transparent);
10751            padding-inline-end: 8rem;
10752            text-wrap: balance;
10753            font-size: 1.4rem;
10754        }
10755
10756        .img-arrow {
10757            border-radius: 100rem;
10758            bottom: 2.8rem;
10759            height: 6rem;
10760            object-fit: scale-down;
10761            position: absolute;
10762            right: 2.4rem;
10763            width: 6rem;
10764
10765            .div-item:hover & {
10766                box-shadow:
10767                    0rem 0rem 2.4rem color-mix(in srgb, #CFFF32 70%, transparent),
10768                    0rem 0.4rem 0.8rem color-mix(in srgb, black 0%, transparent),
10769                    inset 0rem 0rem 0.3rem 0.1rem color-mix(in srgb, white 90%, transparent),
10770                    inset 0rem 0rem 0.3rem 0.1rem color-mix(in srgb, white 90%, transparent),
10771                    inset 0rem 0rem 2.5rem 0 color-mix(in srgb, white 100%, transparent)
10772                ;
10773            }
10774
10775            .div-item:active & {
10776                transition: var(--animation);
10777                opacity: 0.8;
10778                translate: 0 0.2rem;
10779                scale: 1 0.98;
10780                box-shadow:
10781                    0rem 0rem 2.4rem 0.2rem color-mix(in srgb, #CFFF32 100%, transparent),
10782                    0rem 0.4rem 0.8rem color-mix(in srgb, black 0%, transparent),
10783                    inset 0rem 0rem 0.3rem 0.1rem color-mix(in srgb, white 90%, transparent),
10784                    inset 0rem 0rem 0.3rem 0.1rem color-mix(in srgb, white 95%, transparent),
10785                    inset 0rem 0rem 2rem 0 color-mix(in srgb, white 100%, transparent)
10786                ;
10787            }
10788        }
10789
10790        @media (width <= 850px) {
10791            .img-arrow {
10792                display: none;
10793            }
10794
10795            .p-description {
10796                padding: 0;
10797            }
10798
10799            .div-item {
10800                height: unset;
10801            }
10802
10803            .div-img {
10804                aspect-ratio: 1 / 1;
10805                box-shadow: 0 0.6rem 1.5rem color-mix(in srgb, black 7%, transparent);
10806                height: unset;
10807                position: relative;
10808                width: 100%;
10809
10810                &:after {
10811                    border-radius: 2rem;
10812                    box-shadow: inset 0 0 2.5rem 0.2rem white;
10813                    content: '';
10814                    height: 100%;
10815                    left: 0;
10816                    position: absolute;
10817                    top: 0;
10818                    width: 100%;
10819                }
10820            }
10821
10822            .div-text {
10823                position: relative;
10824                padding: 0;
10825                
10826                padding-block-start: 1.5rem;
10827            }
10828        }
10829
10830        @media (width <= 720px) {
10831            .img-swiper-nav {
10832                display: none;
10833            }
10834        }
10835    }
10836</style>
10837
10838<section id="page-blog-other" class="Centered">
10839    <h2 class="Text h2">Все категории</h2>
10840    <div class="swiper div-items">
10841        <div class="swiper-wrapper">
10842
10843            
10844                <a
10845                    class="swiper-slide LinkContainer div-item"
10846                    href="https://yudaevschool.ru/teg/3d-dizajn/"
10847                >
10848                    <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" />                    <div class="div-img">
10849                        <img
10850                            class="img"
10851                            src="https://yudaevschool.ru/wp-content/uploads/2025/09/3d-dizajn.png"
10852                            loading="lazy"
10853                            draggable="false"
10854                            alt=""
10855                        />
10856                    </div>
10857                    <div class="div-text">
10858                        <div class="Text p-badge">
10859                            <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" />                            Категория
10860                        </div>
10861                        <p class="Text p-title">
10862                            3D-дизайн                        </p>
10863                        <p class="Text p-description">
10864                            На данной странице блога собраны все материалы в тематике "3D-дизайн".                        </p>
10865                    </div>
10866                </a>
10867
10868            
10869                <a
10870                    class="swiper-slide LinkContainer div-item"
10871                    href="https://yudaevschool.ru/teg/ux-ui/"
10872                >
10873                    <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" />                    <div class="div-img">
10874                        <img
10875                            class="img"
10876                            src="https://yudaevschool.ru/wp-content/uploads/2025/09/ui-dizajn-1.png"
10877                            loading="lazy"
10878                            draggable="false"
10879                            alt=""
10880                        />
10881                    </div>
10882                    <div class="div-text">
10883                        <div class="Text p-badge">
10884                            <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" />                            Категория
10885                        </div>
10886                        <p class="Text p-title">
10887                            UX/UI                        </p>
10888                        <p class="Text p-description">
10889                            На этой странице собраны все статьи в тематике UX/UI.                        </p>
10890                    </div>
10891                </a>
10892
10893            
10894                <a
10895                    class="swiper-slide LinkContainer div-item"
10896                    href="https://yudaevschool.ru/teg/veb-dizajn/"
10897                >
10898                    <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" />                    <div class="div-img">
10899                        <img
10900                            class="img"
10901                            src="https://yudaevschool.ru/wp-content/uploads/2026/03/veb-dizajn.webp"
10902                            loading="lazy"
10903                            draggable="false"
10904                            alt=""
10905                        />
10906                    </div>
10907                    <div class="div-text">
10908                        <div class="Text p-badge">
10909                            <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" />                            Категория
10910                        </div>
10911                        <p class="Text p-title">
10912                            Веб-дизайн                        </p>
10913                        <p class="Text p-description">
10914                            На данной странице собраны все статьи в тематике веб-дизайна                        </p>
10915                    </div>
10916                </a>
10917
10918            
10919                <a
10920                    class="swiper-slide LinkContainer div-item"
10921                    href="https://yudaevschool.ru/teg/graficheskij-dizajn/"
10922                >
10923                    <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" />                    <div class="div-img">
10924                        <img
10925                            class="img"
10926                            src="https://yudaevschool.ru/wp-content/uploads/2025/09/graficheskij-dizajn.png"
10927                            loading="lazy"
10928                            draggable="false"
10929                            alt=""
10930                        />
10931                    </div>
10932                    <div class="div-text">
10933                        <div class="Text p-badge">
10934                            <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" />                            Категория
10935                        </div>
10936                        <p class="Text p-title">
10937                            Графический дизайн                        </p>
10938                        <p class="Text p-description">
10939                            На данной странице собраны все статьи в тематике графического дизайна.                        </p>
10940                    </div>
10941                </a>
10942
10943            
10944                <a
10945                    class="swiper-slide LinkContainer div-item"
10946                    href="https://yudaevschool.ru/teg/iskusstvo/"
10947                >
10948                    <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" />                    <div class="div-img">
10949                        <img
10950                            class="img"
10951                            src="https://yudaevschool.ru/wp-content/uploads/2026/03/iskusstvo.webp"
10952                            loading="lazy"
10953                            draggable="false"
10954                            alt=""
10955                        />
10956                    </div>
10957                    <div class="div-text">
10958                        <div class="Text p-badge">
10959                            <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" />                            Категория
10960                        </div>
10961                        <p class="Text p-title">
10962                            Искусство                        </p>
10963                        <p class="Text p-description">
10964                            На данной странице собраны все статьи в тематике различных видов искусства.                        </p>
10965                    </div>
10966                </a>
10967
10968            
10969                <a
10970                    class="swiper-slide LinkContainer div-item"
10971                    href="https://yudaevschool.ru/teg/lyubym-dizajneram/"
10972                >
10973                    <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" />                    <div class="div-img">
10974                        <img
10975                            class="img"
10976                            src="https://yudaevschool.ru/wp-content/uploads/2026/03/lyubym-dizajneram.webp"
10977                            loading="lazy"
10978                            draggable="false"
10979                            alt=""
10980                        />
10981                    </div>
10982                    <div class="div-text">
10983                        <div class="Text p-badge">
10984                            <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" />                            Категория
10985                        </div>
10986                        <p class="Text p-title">
10987                            Любым дизайнерам                        </p>
10988                        <p class="Text p-description">
10989                            На данной странице сайта собраны статьи, которые подходят всем дизайнерам.                        </p>
10990                    </div>
10991                </a>
10992
10993            
10994                <a
10995                    class="swiper-slide LinkContainer div-item"
10996                    href="https://yudaevschool.ru/teg/moushn-dizajn/"
10997                >
10998                    <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" />                    <div class="div-img">
10999                        <img
11000                            class="img"
11001                            src="https://yudaevschool.ru/wp-content/uploads/2026/03/moushn-dizajn.webp"
11002                            loading="lazy"
11003                            draggable="false"
11004                            alt=""
11005                        />
11006                    </div>
11007                    <div class="div-text">
11008                        <div class="Text p-badge">
11009                            <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" />                            Категория
11010                        </div>
11011                        <p class="Text p-title">
11012                            Моушн-дизайн                        </p>
11013                        <p class="Text p-description">
11014                            На этой странице собраны все статьи в тематике моушн-дизайна.                        </p>
11015                    </div>
11016                </a>
11017
11018            
11019                <a
11020                    class="swiper-slide LinkContainer div-item"
11021                    href="https://yudaevschool.ru/teg/nejroseti/"
11022                >
11023                    <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" />                    <div class="div-img">
11024                        <img
11025                            class="img"
11026                            src="https://yudaevschool.ru/wp-content/uploads/2026/03/nejroseti.webp"
11027                            loading="lazy"
11028                            draggable="false"
11029                            alt=""
11030                        />
11031                    </div>
11032                    <div class="div-text">
11033                        <div class="Text p-badge">
11034                            <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" />                            Категория
11035                        </div>
11036                        <p class="Text p-title">
11037                            Нейросети                        </p>
11038                        <p class="Text p-description">
11039                            На данной странице сайта собраны статьи по нейросетям для дизайнеров.                        </p>
11040                    </div>
11041                </a>
11042
11043            
11044                <a
11045                    class="swiper-slide LinkContainer div-item"
11046                    href="https://yudaevschool.ru/teg/obrazovanie/"
11047                >
11048                    <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" />                    <div class="div-img">
11049                        <img
11050                            class="img"
11051                            src="https://yudaevschool.ru/wp-content/uploads/2026/03/obuchenie.webp"
11052                            loading="lazy"
11053                            draggable="false"
11054                            alt=""
11055                        />
11056                    </div>
11057                    <div class="div-text">
11058                        <div class="Text p-badge">
11059                            <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" />                            Категория
11060                        </div>
11061                        <p class="Text p-title">
11062                            Образование                        </p>
11063                        <p class="Text p-description">
11064                            На данной странице сайта собраны статьи в тематике "Образование".                        </p>
11065                    </div>
11066                </a>
11067
11068            
11069        </div>
11070        <div class="div-scrollbar">
11071            <div class="swiper-scrollbar"></div>
11072            <img class="img-swiper-nav ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new--reversed.svg" alt="" draggable="false" />            <img class="img-swiper-nav ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" />        </div>
11073    </div>
11074</section>
11075
11076<script type="module">
11077    const swiper = new Swiper('#page-blog-other .swiper', {
11078        slidesPerView: 'auto',
11079        spaceBetween: 20,
11080        loop: false,
11081        scrollbar: {
11082            el: '#page-blog-other .swiper-scrollbar'
11083        },
11084        navigation: {
11085            prevEl: '#page-blog-other .img-swiper-nav:first-of-type',
11086            nextEl: '#page-blog-other .img-swiper-nav:last-of-type'
11087        }
11088    });
11089</script>
11089
11090
11091</main>
11092
11093<footer class="footer --is-to-be-revealed">
11094    <div class="footer__container container gradient-border">
11095        <div class="footer__logo-section">
11096            <div class="footer__logo gradient-border"><img loading="lazy" src="/main-page/assets/images/logo.svg" alt="Логотип" /></div>
11097            <div class="footer__title">
11098                <span class="footer__title-main">Профессиональное обучение дизайну</span><br />
11099                <span class="footer__title-sub">с дипломом и бессрочной карьерной поддержкой</span><br />
11100                <span class="footer__copyright">© 2026</span>
11101            </div>
11102            <div class="footer__info-wrapper">
11103                <div class="footer__info">АНО ДПО "МЦБО"<br /><br />
11104ИНН 7708398416<br /><br />
11105107113, город Москва,<br /><br />
11106Сокольническая пл, д. 4а, помещ. 12/4</div>
11107                <div class="footer__links">
11108                    <a class="footer__link" href="https://yudaevschool.ru/oferta">Договор оферты</a>
11109                    <a class="footer__link" href="/privacy">Политика конфиденциальности</a>
11110                </div>
11111            </div>
11112        </div>
11113        <div class="footer__right-section">
11114            <div class="footer__social-section">
11115                                    <a class="footer__social-item" href="https://www.behance.net/yudaev-school">
11116                        <div class="footer__social-icon">
11117                            <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/be.svg" alt="" />
11118                        </div>
11119                        <span class="footer__social-name">Behance</span>
11120                    </a>
11121                                    <a class="footer__social-item" href="https://www.pinterest.com/YudaevSchool/">
11122                        <div class="footer__social-icon">
11123                            <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/pint.svg" alt="" />
11124                        </div>
11125                        <span class="footer__social-name">Pinterest</span>
11126                    </a>
11127                                    <a class="footer__social-item" href="https://t.me/yuadevschoolmanagerbot">
11128                        <div class="footer__social-icon">
11129                            <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/tg.svg" alt="" />
11130                        </div>
11131                        <span class="footer__social-name">Telegram</span>
11132                    </a>
11133                                    <a class="footer__social-item" href="https://vk.com/yudaevschool">
11134                        <div class="footer__social-icon">
11135                            <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/vk.svg" alt="" />
11136                        </div>
11137                        <span class="footer__social-name">VK</span>
11138                    </a>
11139                                    <a class="footer__social-item" href="https://www.youtube.com/@yudaev_digital">
11140                        <div class="footer__social-icon">
11141                            <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/yt.svg" alt="" />
11142                        </div>
11143                        <span class="footer__social-name">YouTube</span>
11144                    </a>
11145                            </div>
11146            <div class="footer__bottom-section">
11147                <div class="footer__courses-section">
11148                    <p class="footer__courses-title">КУРСЫ</p>
11149                    <div class="footer__courses-links">
11150                                                    <a class="footer__course-link" href="https://yudaevschool.ru/digital-designer/">
11151                                Digital-дизайнер                            </a>
11152                                                    <a class="footer__c
11152ourse-link" href="https://yudaevschool.ru/uxui-prof/">
11153                                UX / UI дизайнер                            </a>
11154                                                    <a class="footer__course-link" href="https://yudaevschool.ru/3d-prof/">
11155                                3D-визуализатор                            </a>
11156                                                    <a class="footer__course-link" href="https://yudaevschool.ru/graf-diz/">
11157                                Графический дизайнер                            </a>
11158                                                    <a class="footer__course-link" href="https://yudaevschool.ru/ai-specialist/">
11159                                Курс по нейросетям                            </a>
11160                                            </div>
11161                    <div class="footer__additional-links">
11162                                                    <a class="footer__additional-link" href="https://yudaevschool.ru/blog">
11163                                Блог                            </a>
11164                                            </div>
11165                </div>
11166                <div class="footer__contacts-messengers-wrapper">
11167                    <div class="footer__contacts-section">
11168                        <p class="footer__contacts-title">КОНТАКТЫ</p>
11169                                                    <div class="footer__phone-block"><span class="footer__contact-label">Отдел возвратов и претензий:</span><br><a class="footer__contact-phone" href="tel:+74951359220">+7 495 135 92 20</a></div>                                                    <div class="footer__phone-block"><span class="footer__contact-label">Вопросы по покупке, оплате и содержанию курсов:</span><br><a class="footer__contact-phone" href="tel:+78005116207">+7 800 511 62 07</a></div>                                                    <a class="footer__contact-item" href="mailto:[email protected]">[email protected]</a><br /><br />                                            </div>
11170                    <div class="footer__messengers-section">
11171                        <p class="footer__messengers-title">МЕССЕНДЖЕРЫ</p>
11172                        <div class="footer__messengers-buttons">
11173                                                            <a class="footer__messenger-button" href="https://t.me/yuadevschoolmanagerbot">
11174                                    Telegram                                </a>
11175                                                    </div>
11176                    </div>
11177                </div>
11178            </div>
11179        </div>
11180        <div class="footer__mobile-social-section">
11181            <p class="footer__socials-title">СОЦ. СЕТИ</p>
11182            <div class="footer__mobile-social-grid">
11183                                    <a href="https://www.behance.net/yudaev-school">
11184                        <div class="footer__social-item">
11185                            <div class="footer__social-icon">
11186                                <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/be.svg" alt="Behance" />
11187                            </div>
11188                            <span class="footer__social-name">
11189                                Behance                            </span>
11190                        </div>
11191                    </a>
11192                                    <a href="https://www.pinterest.com/YudaevSchool/">
11193                        <div class="footer__social-item">
11194                            <div class="footer__social-icon">
11195                                <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/pint.svg" alt="Pinterest" />
11196                            </div>
11197                            <span class="footer__social-name">
11198                                Pinterest                            </span>
11199                        </div>
11200                    </a>
11201                                    <a href="https://t.me/yuadevschoolmanagerbot">
11202                        <div class="footer__social-item">
11203                            <div class="footer__social-icon">
11204                                <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/tg.svg" alt="Telegram" />
11205                            </div>
11206                            <span class="footer__social-name">
11207                                Telegram                            </span>
11208                        </div>
11209                    </a>
11210                                    <a href="https://vk.com/yudaevschool">
11211                        <div class="footer__social-item">
11212                            <div class="footer__social-icon">
11213                                <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/vk.svg" alt="VK" />
11214                            </div>
11215                            <span class="footer__social-name">
11216                                VK                            </span>
11217                        </div>
11218                    </a>
11219                                    <a href="https://www.youtube.com/@yudaev_digital">
11220                        <div class="footer__social-item">
11221                            <div class="footer__social-icon">
11222                                <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/yt.svg" alt="YouTube" />
11223                            </div>
11224                            <span class="footer__social-name">
11225                                YouTube                            </span>
11226                        </div>
11227                    </a>
11228                            </div>
11229        </div>
11230        <div class="footer__divider"></div>
11231    </div>
11232</footer>
11233
11234        <style>
11235            /**
11236            * Animation variables are defined here
11237            * to prevent unwanted animations on the page load.
11238            */
11239
11240            :root {
11241                --animation--slowest: 0.6s cubic-bezier(0.550, 0.385, 0.355, 1.000);
11242                --animation--slower: 0.4s cubic-bezier(0.550, 0.385, 0.355, 1.000);
11243                --animation--slow: 0.2s cubic-bezier(0.550, 0.385, 0.355, 1.000);
11244                --animation: 0.1s cubic-bezier(0.550, 0.385, 0.355, 1.000);
11245            }
11246        </style>
11247
11248        
11248<script type="text/javascript" src="https://yudaevschool.ru/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script>
vendor: 1 bytes, line 11248
11248
11249<script type="text/javascript" src="https://yudaevschool.ru/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script>
vendor: 1 bytes, line 11249
11249
11250<script type="text/javascript" id="wp-i18n-js-after">
11251/* <![CDATA[ */
11252wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
11253/* ]]> */
11254</script>
vendor: 1 bytes, line 11254
11254
11255<script type="text/javascript" src="https://yudaevschool.ru/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.5" id="swv-js"></script>
vendor: 1 bytes, line 11255
11255
11256<script type="text/javascript" id="contact-form-7-js-translations">
11257/* <![CDATA[ */
11258( function( domain, translations ) {
11259	var localeData = translations.locale_data[ domain ] || translations.locale_data.messages;
11260	localeData[""].domain = domain;
11261	wp.i18n.setLocaleData( localeData, domain );
11262} )( "contact-form-7", {"translation-revision-date":"2026-02-09 17:37:19+0000","generator":"GlotPress\/4.0.3","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=3; plural=(n % 10 == 1 && n % 100 != 11) ? 0 : ((n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 12 || n % 100 > 14)) ? 1 : 2);","lang":"ru"},"This contact form is placed in the wrong place.":["\u042d\u0442\u0430 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0430 \u0432 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435."],"Error:":["\u041e\u0448\u0438\u0431\u043a\u0430:"]}},"comment":{"reference":"includes\/js\/index.js"}} );
11263/* ]]> */
11264</script>
vendor: 1 bytes, line 11264
11264
11265<script type="text/javascript" id="contact-form-7-js-before">
11266/* <![CDATA[ */
11267var wpcf7 = {
11268    "api": {
11269        "root": "https:\/\/yudaevschool.ru\/wp-json\/",
11270        "namespace": "contact-form-7\/v1"
11271    }
11272};
11273/* ]]> */
11274</script>
vendor: 1 bytes, line 11274
11274
11275<script type="text/javascript" src="https://yudaevschool.ru/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.5" id="contact-form-7-js"></script>
vendor: 1 bytes, line 11275
11275
11276<script type="text/javascript" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/js/header-burger.js?ver=1.0.1" id="yudaev-header-burger-js"></script>
11276
11277    </body>
11278</html>
11279<!--
11280Performance optimized by Redis Object Cache. Learn more: https://wprediscache.com
11281
11282Получено 3956 объектов (4 МБ) от Redis через PhpRedis (v5.3.7).
11283-->

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.