@font-face {font-family: 'Roboto'; src: url("fonts/Roboto-Regular.woff2") format('woff2')}
@font-face {font-family: 'Roboto-Black'; src: url("fonts/Roboto-Black.woff2") format('woff2')}
@font-face {font-family: 'Roboto-Bold'; src: url("fonts/Roboto-Bold.woff2") format('woff2')}
@font-face {font-family: 'Roboto-Italic'; src: url("fonts/Roboto-Italic.woff2") format('woff2')}
@font-face {font-family: 'Roboto-Light'; src: url("fonts/Roboto-Light.woff2") format('woff2')}
@font-face {font-family: 'Roboto-Medium'; src: url("fonts/Roboto-Medium.woff2") format('woff2')}
@font-face {font-family: 'Roboto-SemiBold'; src: url("fonts/Roboto-SemiBold.ttf") format('truetype')}
@font-face {font-family: 'Roboto-ExtraLight'; src: url("fonts/Roboto-ExtraLight.ttf") format('truetype')}
@font-face {font-family: 'Roboto-LightItalic'; src: url("fonts/Roboto-LightItalic.ttf") format('truetype')}
@font-face {font-family: 'Roboto-Thin'; src: url("fonts/Roboto-Thin.woff2") format('woff2')} 


:root {
    --bp-min-width: 360px;
    --bp-moblie: 679px;
    --bp-tablet: 899px;
    --bp-laptop: 1299px;
    --bp-desktop: 1919px;
    --bp-min-width-num: 360;
    --bp-moblie-num: 680;
    --bp-tablet-num: 900;
    --bp-laptop-num: 1300;
    --bp-desktop-num: 1920;

    --color-text-default: #152243;
    --color-primary: #4a72d9;
    --color-primary-hover: #375bb5;
    --color-secondary: #25BA31;

    --line-height-default: 1.1;
    --font-weight-default: 300;
    --letter-spacing-default: 0;

    --header-height: 85px;
    --logo-height-header: 49px;

    --main-gap: 147px;

    --transition-default: all .3s ease;

    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}
@media screen and (max-width: 1920px) {
    :root {
        --denominator: ( (100vw - var(--bp-laptop)) / (var(--bp-desktop-num) - var(--bp-laptop-num)));        
    }
}
@media screen and (max-width: 1299px) {
    :root {
        --denominator: ( (100vw - var(--bp-moblie)) / (var(--bp-laptop-num) - var(--bp-moblie-num)) );
        --main-gap: 105px;
    }
}
@media screen and (max-width: 1050px) {
    :root {
        --header-height: 0px;
        --logo-height-header: 70px;
    }
}
@media screen and (max-width: 679px) {
        :root {  
            --denominator: ( (100vw - var(--bp-min-width)) / ( var(--bp-moblie-num) - var(--bp-min-width-num)) );
            --main-gap: 80px;
        }
}


*, ::after, ::before {-webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; font-size:  inherit; color: inherit; line-height: inherit; text-align: inherit; transition: height 0.7s ease; }
html { min-width: var(--bp-min-width); }
body { width: 100%; max-width: 100% ; height: 100%; min-height: 100vh; background: #f3f3f3; font-family: 'Roboto',sans-serif; line-height: var(--line-height-default); letter-spacing: var(--letter-spacing-default); color: var(--color-text-default); font-weight: var(--font-weight-default); overflow: hidden auto; overflow-x: hidden;}
a { text-decoration: none; }

html.lenis,
html.lenis body {
  height: auto;
  width: 100%; max-width: 100% ;
  scroll-behavior: auto !important;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}


header {position: fixed; height: var(--header-height); width: 100%; max-width: 100%; overflow: hidden;  display: flex; justify-content: center; align-items: center; z-index: 100; top: 0; left: 0; transition: var(--transition-default); }
    header.scrolled { background: #fff; -webkit-box-shadow: 0 0 30px 0 rgba(48,77,150,0.25); box-shadow: 0 0 30px 0 rgba(48,77,150,0.25)}
    .header-content { max-width: 1400px; width: calc(100% - 100px);  overflow: hidden; display: flex; align-items: center; justify-content: space-between; background: transparent}
    .logo_nav {display: flex; align-items: center; gap: 50px}
        .logoHeader {width: auto; height: var(--logo-height-header); display: block;}
        .logo_nav nav { display: flex; gap: 32px}
        .logo_nav nav a { opacity: .5; font-size: 18px; font-family: 'Roboto-Light', sans-serif; -webkit-transition: var(--transition-default); transition: var(--transition-default);}
        .logo_nav nav a:hover { opacity: 1}
        .logo_nav nav a.active { color: var(--color-primary); opacity: 1; cursor: text;}
    .lang_button { display: flex; gap: 50px; align-items: center}        
        .lang span, .lang a { opacity: .5; font-size: 18px; font-family: 'Roboto-Light', sans-serif}
        .lang a {-webkit-transition: var(--transition-default); transition: var(--transition-default)}
        .lang a:hover {opacity: 1}
        .lang a.active {color: var(--color-primary); opacity: 1}
    .button {background: var(--color-primary); padding: 10px 16px; text-align: center; color: #fff; cursor: pointer; border-radius: 10px; font-size: 18px; -webkit-transition: var(--transition-default); transition: var(--transition-default);}
        .button:hover { background: var(--color-primary-hover)}

    .openMenuMobile {display: none; cursor: pointer; position: fixed; height: 64px; width: 64px; top: 16px; right: 16px; z-index: 102; -webkit-transition: var(--transition-default); transition: var(--transition-default); border-radius: 50%; align-items: center; justify-content: center;}
    .openMenuMobile.scrolled { background-color: #FFFFFF; box-shadow: 0px 4px 20px 0px #0000001A; }
    .menuMobile { position: fixed; top: 0; left: 0; right: 0; height: 0px; overflow: hidden; background: #fff; z-index: 105; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 32px; font-size: 22px; font-family: 'Roboto-Light', sans-serif; transition: height 1.0s ease;}
    .menuMobile.open { height: 100%; transition: height 0.5s ease}
    .linksMobile { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 106px; gap: 32px}
        .linksMobile a { opacity: .5; -webkit-transition: var(--transition-default); transition: var(--transition-default); }
        .linksMobile a:hover { opacity: 1}
        .linksMobile a.active { opacity: 1; color: var(--color-primary);}
    .menuMobileBottom { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 84px; gap: 24px; width: 315px;}
        .menuMobileBottom .button { width: 100%;}
        .menuMobileBottom a { font-size: 24px; font-family: 'Roboto-Bold',sans-serif; border-bottom: 3px solid transparent;  transition: var(--transition-default);}
        .menuMobileBottom a:hover { border-color: var(--color-text-default); }
    .closeMenuMobile { width: 32px; height: 32px; position: absolute; top: 24px; right: 24px;}

@media screen and (max-width: 1050px) {
    header { display: none;}
    .header-content { width: calc(100% - 32px); }
    .logo_nav nav {display: none;}
    .openMenuMobile {display: flex;}
    .lang_button  .button { display: none}
}


main { width: 100%; max-width: 100vw; position: relative; display: flex; flex-direction: column; gap: var(--main-gap); background: linear-gradient( to bottom,#eaeaea 0%, #eaeaea 50%, #f1f1f1 80%, transparent 100%); }

@media screen and (max-width: 1050px) {
    .containerContent  { width: calc(100% - 32px); }
}

.top-section { width: 100%; position: relative; height: 170vh; background: #bbbcbc;  }
    .top-section .content { width: 100%; overflow: hidden; position: sticky; top: 0; height: 130vh; display: flex; flex-direction: column; align-items: center; justify-content: center}
    .video { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 130vh; }
    .video video { width: 105vw; height: 130vh; -o-object-fit: cover; object-fit: cover; }
    .video .bg { background: linear-gradient(0deg,#eaeaea 0%,rgba(187,188,188,0) 100%); width: 100%; height: 300px; position: absolute; bottom: 0px; z-index: 5}

    .top-section .main-content { max-width: 1400px; width: calc(100% - 100px); position: relative;  display: flex; flex-direction: column; justify-content: center; align-items: start; margin-bottom: 7%; gap: 127px;}
    .main-title { max-width: 60%; visibility: hidden; font-weight: var(--font-weight-default); font-size: 100px;}
    .main-title span {color: var(--color-primary); font-family: 'Roboto-Italic',sans-serif}
    .main-subtitle {display: flex; flex-direction: column; font-family: 'Roboto-ExtraLight',sans-serif; font-size: 40px; font-weight: 200; visibility: hidden}
    .main-subtitle__num { font-size: 228px; font-family: 'Roboto-Light', sans-serif; }
    .main-subtitle__num span {font-size: 40px; font-family: 'Roboto-ExtraLight', sans-serif; }

    .top-section-more { display: none;}
    .top-section-logo { display: none;}

@media screen and (max-width: 1919px) {
    .main-title { font-size: calc(60px + (100 - 60) * var(--denominator));}
    .top-section .main-content { gap: calc(78px + (127 - 78) * var(--denominator));}
    .main-subtitle__num { font-size: calc(145px + (228 - 145) * var(--denominator)); }
}
@media screen and (max-width: 1299px) {
    /* .top-section { height: 100vh;}*/
    .top-section .content { height: 110vh; width: 100vw; max-width: 100vw; }
    .video { height: 110vh; width: 100vw; max-width: 100vw;}
    .video video { width: 100%; height: 110vh; max-width: 100%;}
    .video .bg { height: calc(160px + (320 - 160) * var(--denominator));  }

    .top-section .main-content { gap: calc(46px + (88 - 46) * var(--denominator)); }
    .main-title { font-size: calc(37px + (70 - 37) * var(--denominator)); }
    .main-subtitle { font-size: calc(21px + (40 - 21) * var(--denominator));}
    .main-subtitle__num { font-size: calc(84px + (160 - 84) * var(--denominator)); }
    .main-subtitle__num span {font-size: calc(21px + (40 - 21) * var(--denominator));}

}
@media screen and (max-width: 1050px) {

    .top-section { background: #ffffff; height: 150vh; }
    .top-section .content { height: 100vh; justify-content: start; padding-top: 0;}
    .video { height: 100vh;}
    .video video { width: 100%; height: 100vh; opacity: .9; }
    .video .bg { display: none;}

    .top-section .main-content { width: calc(100% - 48px); height: 100%; margin-bottom: 0; padding-top: 22vh; position: relative; display: flex; flex-direction: column; gap: 15px; justify-content: start; align-items: center; }

     .main-title { width: 100%; max-width: 100%; text-align: center; }

    .main-subtitle { gap: 0; padding: 20px 30px 20px 20px; background-color: #FFFFFF; position: absolute; top: 48vh; left: -24px; border-radius:  0 30px 30px 0;}
    .main-subtitle p { text-align: center;}
    .main-subtitle__num { display: flex; flex-direction: column; gap: 0; align-items: center; font-family: Roboto-Bold;}

    .top-section-more { display: block; width: 40px; height: 40px; position: absolute; bottom: 54px; left: 50%; transform: translateX(-50%);}

    .top-section-logo { display: block; position: absolute; top: 16px; left: 16px;}

}
@media screen and ( max-width: 679px) {  
    .main-title { font-size: calc(34px + (64 - 34) * var(--denominator)); }
}

.about { width: 100%; position: relative; display: flex; flex-direction: column; gap: var(--main-gap); margin-top: -147px; z-index: 2; }
.companies {width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;   }
    .companies .content { width: calc(100% - 140px); display: flex; justify-content: center; align-items: center; gap: 70px; flex-wrap: wrap; }
    .companies img { opacity: .7; transition: var(--transition-default);}
    .companies img:hover { opacity: 1;  }
@media screen and (max-width: 1299px)  {
    .about { margin-top: -105px; }
    .companies .content {  width: 73%; gap: calc(22px + (40 - 22) * var(--denominator));}
    .companies img { height:calc(34px + (64 - 34) * var(--denominator)); width: auto;}
}
@media screen and (max-width: 1050px) {
    .about { margin-top: 0px; }

}
@media screen and (max-width: 679px) {
    .about { margin-top: 12px; }
    .companies .content {  width: calc(100% - 48px);  gap:  calc(11px + (20 - 11) * var(--denominator));}
    .companies img { height: calc(28px + (56 - 29) * var(--denominator)); }    
}

.info { width: 100%; position: relative; display: flex; flex-direction: column; align-items: center;}
    .info .circle1, .info .circle2 { position: absolute; z-index: -1}
    .info .circle1 {width: 941px; height: 941px; border-radius: 100%; opacity: .3; background: radial-gradient(50.74% 48.02% at 50% 50%,rgba(130,107,215,0.5) 0%,rgba(107,134,215,0) 100%); -webkit-filter: blur(50px); filter: blur(50px); top: -580px; left: -673px}
    .info .circle2 {width: 839px; height: 839px; border-radius: 100%; opacity: .3; background: radial-gradient(66.06% 55% at 50.09% 50.09%,rgba(247,54,128,0.4) 0%,rgba(245,176,103,0) 100%); -webkit-filter: blur(50px); filter: blur(50px); bottom: -90px; left: -478px}

    .info .content { max-width: 1400px; width: calc(100% - 100px); position: relative;  display: flex; flex-direction: column; justify-content: center; align-items: start; gap:  257px;}
    .info-text { display: flex; flex-direction: column; gap: 100px; align-items: center; width: 100%}

    .info-text .title {text-align: center; max-width: 1232px; font-size: 70px; color: var(--color-text-default)}
    .info-text .title span {color: var(--color-primary); font-family: 'Roboto-Italic',sans-serif}
    .info .subtitle {color: var(--color-text-default); max-width: 1148px; text-align: center; font-size: 32px; font-family: 'Roboto-Light', sans-serif}
    .info .numbers { display: flex; justify-content: space-between; width: 100%}
    .info .numbers-item__title {color: var(--color-primary); font-size: 100px; line-height: 1; font-family: 'Roboto-Black',sans-serif}
    .info .numbers-item__subtitle {color: var(--color-text-default); font-size: 18px}

@media screen and (max-width: 1299px)  {
    .info .circle1 { width: calc(340px + (654 - 340) * var(--denominator)); height: calc(340px + (654 - 340) * var(--denominator)); top: calc(-214px - (412 - 214) * var(--denominator)); left: calc(-244px - (470 - 244) * var(--denominator));}
    .info .circle2 {width: calc(303px + (583 - 303) * var(--denominator)); height: calc(303px + (583 - 303) * var(--denominator)); bottom: calc(-113px - (219 - 113) * var(--denominator));  left: calc(-173px - (332 - 173) * var(--denominator));}

    .info .content { max-width: auto; width: 75%; gap:  calc(56px + (107 - 56) * var(--denominator));}
    .info-text { gap:  calc(22px + (40 - 22) * var(--denominator)); width: 100%; }

    .info-text .title { max-width: auto; width: 100%; font-size: calc(25px + (48 - 25) * var(--denominator)); }
    .info .subtitle {max-width: auto;  width: 100%; font-size: calc(16px + (24 - 16) * var(--denominator)); }
    .info .numbers-item__title { font-size: calc(36px + (70 - 36) * var(--denominator)); }
    .info .numbers-item__subtitle { font-size: calc(10px + (18 - 10) * var(--denominator)); }
}
@media screen and (max-width: 679px) {
    .info .circle1 { width: calc(270px + (510 - 270) * var(--denominator)); height: calc(270px + (510 - 270) * var(--denominator)); top: calc(-190px - (360 - 190) * var(--denominator)); left: calc(-110px - (202 - 110) * var(--denominator));}
    .info .circle2 {width: calc(241px + (455 - 241) * var(--denominator)); height: calc(241px + (455 - 241) * var(--denominator)); bottom: calc(60px + (113 - 60) * var(--denominator));  left: calc(-120px - (260 - 120) * var(--denominator));}
    .info .content { width: calc(100% - 48px); gap:  calc(42px + (80 - 42) * var(--denominator));}
    .info-text { gap:  calc(21px + (40 - 21) * var(--denominator));}
    .info-text .title { max-width: auto; width: 100%; font-size: calc(21px + (38 - 21) * var(--denominator)); }
    .info .subtitle {max-width: auto;  width: 100%; font-size: calc(12px + (22 - 12) * var(--denominator)); }
    .info .numbers { flex-wrap: wrap; gap: 16px; row-gap: 40px;}
    .numbers-item { width: calc(50% - 8px); display: flex; flex-direction: column; align-items: center;}
    .info .numbers-item__title { font-size: calc(32px + (60 - 32) * var(--denominator)); }
    .info .numbers-item__subtitle { font-size: calc(10px + (16 - 10) * var(--denominator)); text-align: center; }
    
}

.services { width: 100%; position: relative; display: flex; flex-direction: column; align-items: center;}
    .services .content { max-width: 1060px; width: calc(100% - 100px); position: relative;  display: flex; flex-wrap: wrap; justify-content: center; align-items: start; gap:  24px;}
    .services .content .services-item { width: calc(33.333% - 16px); display: flex; flex-direction: column; gap: 30px; position: relative; aspect-ratio: 1 / 1.32; background-color: #4A72D90D; border-radius: 20px; padding: 40px; overflow: hidden;}
    .services .content .services-item img { width: 100%; height: auto; position: absolute; bottom: 0; left: 0; z-index: -1; }
    .services .content .services-item .title { font-size: 20px; font-weight: 400; margin: 0; color: var(--color-text-default); text-align: left; font-family: Roboto-Bold; }
    .services .content .services-item .text { font-size: 14px; line-height: 1.57; margin: 0; color: var(--color-text-default); font-family: Roboto-Light;}
    .services .content .services-item.services-item--chips { justify-content: space-between;}
    .services .content .services-item .services-chips-list { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1;}
    .services .content .services-item .services-chips-list .services-chips-list-item { display: flex; align-items: center; justify-content: center; background: #FFFFFF; color: #2C354B; font-size: 15px;  border-radius: 12px; padding: 0 18px; height: 28px;}
    .services-item--chips__buttons { display: flex; flex-direction: column; gap: 10px; }
    .services-item--chips__buttons .button { display: flex; align-items: center; justify-content: center; color: #FFF; font-size: 16px;  border-radius: 8px; height: 50px; border: 1px solid #FFF; width: 100%;background: transparent; }
    .services-item--chips__buttons .button--white { background-color: #FFF; color: #2C354B;}
@media screen and (max-width: 1299px)  {
    .services .content .services-item { padding: calc(22px + (40 - 22) * var(--denominator)); gap: calc(14px + (30 - 14) * var(--denominator)); }
    .services .content .services-item .title { font-size: calc(11px + (20 - 11) * var(--denominator)); }
    .services .content .services-item .text { font-size:  calc(8px + (14 - 8) * var(--denominator)); }

    .services .content .services-item .services-chips-list .services-chips-list-item { font-size: calc(8px + (15 - 8) * var(--denominator));  border-radius: calc(7px + (12 - 7) * var(--denominator)); padding: 0 calc(10px + (18 - 10) * var(--denominator)); height: calc(16px + (28 - 16) * var(--denominator));}
    .services-item--chips__buttons { gap: calc(6px + (10 - 6) * var(--denominator)); }
    .services-item--chips__buttons .button { font-size:  calc(9px + (16 - 9) * var(--denominator));  height: calc(28px + (50 - 28) * var(--denominator)); }
}
@media screen and (max-width: 1050px)  { 
    .services .content .services-item { width: calc(50% - 12px); padding: calc(26px + (40 - 26) * var(--denominator)); gap: calc(20px + (30 - 20) * var(--denominator))}
    .services .content .services-item .title { font-size: calc(18px + (30 - 18) * var(--denominator)); }
    .services .content .services-item .text { font-size:  calc(12px + (21 - 12) * var(--denominator)); }

    .services .content .services-item .services-chips-list .services-chips-list-item { font-size: calc(12px + (22 - 12) * var(--denominator));  border-radius: calc(11px + (18 - 11) * var(--denominator)); padding: 0 calc(15px + (27 - 15) * var(--denominator)); height: calc(24px + (42 - 24) * var(--denominator));}
    .services-item--chips__buttons { gap: calc(9px + (15 - 9) * var(--denominator)); }
    .services-item--chips__buttons .button { font-size:  calc(14px + (24 - 14) * var(--denominator));  height: calc(42px + (75 - 42) * var(--denominator)); }
}
@media screen and (max-width: 679px) {
    .services .content { width: calc(100% - 48px); gap: calc(12px + (24 - 12) * var(--denominator)); }
    .services .content .services-item { width: calc(50% - (8px + (16 - 8) * var(--denominator))); padding: calc(22px + (40 - 22) * var(--denominator)); gap: calc(10px + (20 - 10) * var(--denominator)); }
    .services .content .services-item .title { font-size: calc(10px + (18 - 10) * var(--denominator)); }
    .services .content .services-item .text { font-size:  calc(6px + (12 - 6) * var(--denominator)); }   

    .services .content .services-item .services-chips-list .services-chips-list-item { font-size: calc(7px + (12 - 7) * var(--denominator));  border-radius: calc(6px + (11 - 6) * var(--denominator)); padding: 0 calc(8px + (15 - 8) * var(--denominator)); height: calc(13px + (24 - 13) * var(--denominator));}
    .services-item--chips__buttons { gap: calc(5px + (9 - 5) * var(--denominator)); }
    .services-item--chips__buttons .button { font-size:  calc(8px + (14 - 8) * var(--denominator));  height: calc(22px + (42 - 22) * var(--denominator)); }
}
@media screen and (max-width: 550px) {
    .services .content { gap: calc(33px + (60 - 33) * var(--denominator)); flex-direction: column; }
    .services .content .services-item { width: 100%; padding: calc(33px + (60 - 33) * var(--denominator)); gap: calc(21px + (45 - 21) * var(--denominator)); aspect-ratio: 1 / 0.8; cursor: pointer; transition: all 0.7s ease;}
    .services .content .services-item.open { aspect-ratio: 1 / 1.32; cursor: pointer;}
    .services .content .services-item .title { font-size: calc(16px + (30 - 16) * var(--denominator)); }
    .services .content .services-item .text { font-size:  calc(12px + (21 - 12) * var(--denominator)); height: 0px; overflow: hidden; transition: all 1s ease; }  
    .services .content .services-item.open .text { height: 50%; transition: all 1s ease;}
    .services .content .services-item.services-item--chips  { aspect-ratio: 1 / 1.32; cursor: default;}

    .services .content .services-item .services-chips-list .services-chips-list-item { font-size: calc(12px + (22 - 12) * var(--denominator));  border-radius: calc(11px + (18 - 11) * var(--denominator)); padding: 0 calc(15px + (27 - 15) * var(--denominator)); height: calc(24px + (42 - 24) * var(--denominator));}
    .services-item--chips__buttons { gap: calc(9px + (15 - 9) * var(--denominator)); }
    .services-item--chips__buttons .button { font-size:  calc(14px + (24 - 14) * var(--denominator));  height: calc(42px + (75 - 42) * var(--denominator)); }
}

.photos { width: calc(100% - 80px); max-width: 1920px; margin: 0 auto; position: relative;  }

    .photos .circle1,.photos .circle2,.photos .circle3,.photos .circle4 {position: absolute; z-index: -1}
    .photos .circle1 {width: 666px; height: 666px; top: -216px; left: -142px; border-radius: 100%; opacity: .5; background: radial-gradient(42.27% 50% at 50% 50%,rgba(245,117,103,0.4) 0%,rgba(245,176,103,0) 100%); -webkit-filter: blur(50px); filter: blur(50px)}
    .photos .circle2 {width: 771px; height: 771px; top: 132px; left: -288px; border-radius: 100%; opacity: .5; background: radial-gradient(46.07% 45.01% at 50% 50%,rgba(107,143,215,0.4) 0%,rgba(107,134,215,0) 100%); -webkit-filter: blur(50px); filter: blur(50px)}
    .photos .circle3 {width: 508px; height: 508px; top: 164px; left: 844px; border-radius: 100%; opacity: .3; background: radial-gradient(42.27% 50% at 50% 50%,#f57567 0%,rgba(245,176,103,0) 100%); -webkit-filter: blur(50px); filter: blur(50px)}
    .photos .circle4 {width: 508px; height: 508px; top: 28px; right: -68px; border-radius: 100%; opacity: .3; background: radial-gradient(46.07% 45.01% at 50% 50%,#6b8fd7 0%,rgba(107,134,215,0) 100%); -webkit-filter: blur(50px); filter: blur(50px)}

    .photos .title { width: calc(25% - 40px); display: flex; flex-direction: column; justify-content: center; color: var(--color-text-default); font-size: 48px; height: 100%}
    .photos .title span {color: var(--color-primary)}

    .photos .photo-wrapper { width: 100%; display: flex; gap: 80px; justify-content: center; align-items: center;}
    .photos .photo-list { width: calc(75% - 40px); margin: 0 auto; display: flex; gap: 36px}
    .photos .photo-list-item { width: calc(33.33% - 24px); display: flex; flex-direction: column; gap: 8px; align-items: center; }
    .photos .photo-list-item img { width: 100%;  height: auto; margin-bottom: 12px;}
    .photos .photo-list-item p {color: var(--color-text-default); text-align: center; margin: 0}
    .photos .photo-list-item__title {font-size: 33px; line-height: 1; font-weight: 400;}
    .photos .photo-list-item__subtitle {font-size: 22px; font-family: 'Roboto-LightItalic',sans-serif; margin: 0 auto}  

@media screen and (max-width: 1919px) {
    .photos .title { font-size: calc(32px + (48 - 32) * var(--denominator)); }
    .photos .photo-list-item__title { font-size: calc(22px + (33 - 22) * var(--denominator))}
    .photos .photo-list-item__subtitle { font-size: calc(16px + (22 - 16) * var(--denominator)); }
}
@media screen and (max-width: 1299px)  {
    .photos .circle1 {width: calc(340px + (666 - 340) * var(--denominator)); height: calc(340px + (666 - 340) * var(--denominator)); top: 0; left: 0; }
    .photos .circle2 {width: calc(400px + (771 - 400) * var(--denominator)); height: calc(400px + (771 - 400) * var(--denominator)); top: calc(115px + (219 -115) * var(--denominator)); left:  calc(60px + (113 -60) * var(--denominator)); }
    .photos .circle3 {width:  calc(260px + (508 - 260) * var(--denominator)); height: calc(260px + (508 - 260) * var(--denominator)); top: calc(90px + (164 - 90) * var(--denominator)); left: calc(400px + (770 - 400) * var(--denominator)); }
    .photos .circle4 {width: calc(260px + (508 - 260) * var(--denominator)); height: calc(260px + (508 - 260) * var(--denominator)); top: 0; right: 0; }
    
    .photos { width: calc(100% - (52px + (100 - 52) * var(--denominator))); max-width: auto; }
    .photos .title { width: 100%; font-size: calc(24px + (48 - 24) * var(--denominator)); height: fit-content; display: block; text-align: center; }
    .photos .photo-wrapper { width: 100%; flex-direction: column; gap: calc(42px + (80 - 42) * var(--denominator));}
    .photos .photo-list { width: 100%; gap: calc(18px + (36 - 18) * var(--denominator));}
    .photos .photo-list-item { width: calc(33.33% - (12px + (24 - 12) * var(--denominator))); }
    .photos .photo-list-item__title {font-size: calc(16px + (28 - 16) * var(--denominator)); text-align: center; }
    .photos .photo-list-item__subtitle {font-size: calc(9px + (18 - 9) * var(--denominator)); text-align: center; }    
}
@media screen and (max-width: 679px) {
    .photos .circle1, .photos .circle2, .photos .circle3, .photos .circle4 { display: none; }
    .photos .photo-wrapper { align-items: start; gap: calc(25px + (50 - 25) * var(--denominator));}
    .photos { display: block; width: 100%; gap: calc(26px + (48 - 26) * var(--denominator)); align-items: start; }
    .photos .title { font-size: calc(18px + (32 - 18) * var(--denominator)); text-align: left; width: 60%; margin-left: 20px; }
    .photos .photo-list {  display: block; width: calc(100% + 80px); transform: translateX(-80px); }

    .photo-list-item {  margin: 0 20px 0 20px; }
    .photo-list-item img { height: auto; margin-bottom: calc(18px + (34 - 18) * var(--denominator)); }
    .photos .photo-list-item__title {font-size: 22px; text-align: center; margin-bottom: calc(10px + (18 - 10) * var(--denominator)); }
    .photos .photo-list-item__subtitle {font-size: 16px; text-align: center; } 
}

.application-form {margin: 0 auto; max-width: 1000px; width: 100%; padding: 79px 96px 79px 154px; background: #fff; border-radius: 20px; display: flex; gap: 111px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 1; }
    .application-form .form {max-width: 402px; width: 100%}
    .application-form .form .title {font-family: 'Roboto-Black',sans-serif; font-size: 48px; color: var(--color-text-default); margin-bottom: 39px}
    .application-form .form input,.application-form .form textarea {width: 100%; border: 0; border-bottom: 1px solid #b1b1b1; outline: none; font-size: 16px; color: var(--color-text-default)}
    .application-form .form input::-webkit-input-placeholder, .application-form .form textarea::-webkit-input-placeholder {color: #c4c4c4}
    .application-form .form input::-moz-placeholder, .application-form .form textarea::-moz-placeholder {color: #c4c4c4}
    .application-form .form input:-ms-input-placeholder, .application-form .form textarea:-ms-input-placeholder {color: #c4c4c4}
    .application-form .form input::-ms-input-placeholder, .application-form .form textarea::-ms-input-placeholder {color: #c4c4c4}
    .application-form .form input::placeholder,.application-form .form textarea::placeholder {color: #c4c4c4}
    .application-form .form input {padding: 6px 0 15px; font-family: 'Roboto',sans-serif}
    .application-form .form .name {margin-bottom: 16px}
    .application-form .form .phone-email {margin-bottom: 32px}
    .application-form .form textarea {margin-bottom: 32px; resize: none; height: 128px; font-family: 'Roboto',sans-serif}
    .application-form .form .button {width: 100%; outline: none; border: 0; padding: 16px 0; color: #fff; text-align: center; background: var(--color-primary); border-radius: 8px; cursor: pointer; font-size: 18px; font-family: 'Roboto-SemiBold',sans-serif; -webkit-transition: var(--transition-default); transition: var(--transition-default);} 
    .application-form .form .button.disabled {opacity: .5; pointer-events: none;}
    .application-form .form .button.secondary.disabled { background-color: var(--color-secondary); opacity: 1.0;}
    .application-form .form .politics { text-align: center; margin-bottom: 8px; font-size: 12px; color: rgba(0,0,0,0.3)}
    .application-form .form .politics a { color: #009ee2; opacity: .7}
    .application-form .form .politics a:hover {text-decoration: underline}

    .file-label {position: relative; margin-bottom: 32px; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; font-family: 'Roboto-Light', sans-serif}
    .file-label .file-title {margin-left: 4px; margin-right: 2px; color: #009ee2; font-size: 18px; word-break: break-all; -webkit-transition: var(--transition-default); transition: var(--transition-default);}
    .file-label .file-title:hover {color: #005e86}
    .file-label .file-subtitle {color: #b3b3b3; font-size: 14px}
    .file-label svg {-ms-flex-negative: 0; flex-shrink: 0}
    .file-label input {position: absolute; opacity: 0; pointer-events: none}
    .file-label .file-error {position: absolute; top: 20px; left: 24px; font-size: 14px; color: #df0226; display: none}

@media screen and (max-width: 1299px)  {
    .application-form { max-width: auto; width: calc(100% - (52px + (100 - 52) * var(--denominator))); padding: calc(41px + (79 - 41) * var(--denominator)) calc(50px + (96 - 50) * var(--denominator)) calc(41px + (79 - 41) * var(--denominator)) calc(80px + (154 - 80) * var(--denominator)); gap: calc(58px + (111 - 58) * var(--denominator)); }
    .application-form .form .title { font-size: calc(25px + (48 - 25) * var(--denominator)); margin-bottom: calc(20px + (39 - 20) * var(--denominator));}
}
@media screen and (max-width: 679px) {
    .biForm {display: none;}
    .application-form { width: calc(100% - 40px); padding: calc(22px + (40 - 22) * var(--denominator)) calc(22px + (40 - 22) * var(--denominator)) calc(22px + (40 - 22) * var(--denominator)) calc(22px + (40 - 22) * var(--denominator)); gap: 0; }
    .application-form .form {max-width: 100%;}
    .application-form .form .title { font-size: calc(30px + (56 - 30) * var(--denominator)); }
    .application-form .form .politics {text-align: left;}
}

.slider-wrapper {position: relative; width: 100%; max-width: 100%; margin: 0 auto;}

    .gradient-wrapper { position: absolute; width: 100%; top: 0; height: 100%; background: #000000;}
    #gradient_bg { width: 100%; opacity: .5; height: 100%;}

    .projects-slider { width: 100%;  position: sticky; top: var(--header-height); background: transparent; height: calc(100vh - var(--header-height));  overflow: hidden; }
    .slides-item-wrapper { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; height: calc(100vh - var(--header-height)); }    
    .slider-item { position: absolute; bottom: 0; display: flex !important;  width: calc(100% - 80px); max-width: 1920px;  align-items: center; justify-content: center; height: calc(100vh - var(--header-height)); top: 0; }
    .slider-item:not(.slide-visible) { transform: translate3d(0, 300%, 0); opacity: 0; }
    .slide-visible { will-change: transform; transition-duration: 2.5s; transition-property: opacity, transform; transition-timing-function: var(--ease-out-expo); } 
    .slide-visible:not(.slide-current) { transform: translate3d(0,100%,0); opacity: 0; }
    .slider-item.slide-visible.slide-current {  will-change: transform; transition-duration: 2.5s; transition-property: opacity, transform; transition-timing-function: var(--ease-out-expo); }
    .slider-item.slide-visible.slide-current.slide-opacity { opacity: 0; }
    .slider-content {width: 100%; height: calc(100vh - 100px - var(--header-height)); max-height: 900px;  min-height: 400px; border-radius: 60px; position: relative; overflow: hidden; padding: 70px 0 70px 70px;}
    .slider-content img.slide-img { position: absolute; height: 100%; bottom: 0; right: 0; z-index: 1;}

.slide-info { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; justify-content: space-between; gap: 30px; width: 50%; }
    .slide-info__top { display: flex; flex-direction: column; gap: 30px; }
    .slide-info-title {color: #fff; font-family: 'Roboto-Black',sans-serif; font-size: 76px; line-height: 0.8; -webkit-animation-duration: 0.3; animation-duration: 0.3s; visibility: hidden; }
    .slide-info-subtitle {color: #fff; font-size: 46px; line-height: 46px; font-weight: 400; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; visibility: hidden}
    .slide-info-desc { color: #fff; font-family: 'Roboto-Light', sans-serif; font-weight: var(--font-weight-default); font-size: 22px; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; visibility: hidden; }
    .slide-info__bottom { display: flex; flex-direction: column; justify-content: flex-end; gap: 30px; }
    .chips-list {visibility: hidden; }

.visible {visibility: visible !important}

.slide-info-desc__more { color: #fff; font-family: 'Roboto-Light', sans-serif; font-size: 22px; visibility: hidden; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; position: absolute}

.slider-content.animate .slide-info-desc {visibility: hidden !important; position: absolute}
    .slider-content.animate .slide-info-desc__more {visibility: visible; position: relative}
    .slider-content.animate .chips-list {visibility: hidden !important; position: absolute}
    .slider-content.animate .chips-list__more {visibility: visible; position: relative}
    .slider-content.animate .slide-info-btn {visibility: hidden !important; position: absolute}
    .slider-content.animate .slide-info-btn__more {visibility: visible; position: relative}

    @-webkit-keyframes fadeOutRightBig {0% {opacity: 1; -webkit-transform: translateX(0); transform: translateX(0)}
    100% {opacity: 0; -webkit-transform: translateX(1000px); transform: translateX(2000px)}
    }
    @-webkit-keyframes fadeInLeftBig {0% {opacity: 0; -webkit-transform: translateX(-1000px); transform: translateX(-2000px)}
    100% {opacity: 1; -webkit-transform: translateX(0); transform: translateX(0)}
    }
    @-webkit-keyframes fadeOutLeftBig {0% {opacity: 1; -webkit-transform: translateX(0); transform: translateX(0)}
    100% {opacity: 0; -webkit-transform: translateX(-1000px); transform: translateX(-2000px)}
    }
    @-webkit-keyframes fadeInRightBig {0% {opacity: 0; -webkit-transform: translateX(1000px); transform: translateX(2000px)}
    100% {opacity: 1; -webkit-transform: translateX(0); transform: translateX(0)}
    }

    .animated-content .slide-info-desc,.animated-content .chips-list,.animated-content .slide-info-btn {-webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig}
    .animated-content-more .slide-info-desc__more,.animated-content-more .chips-list__more,.animated-content-more .slide-info-btn__more {-webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig}
    .animated-content-more-back .slide-info-desc__more,.animated-content-more-back .chips-list__more,.animated-content-more-back .slide-info-btn__more {-webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig}
    .animated-content-back .slide-info-desc,.animated-content-back .chips-list,.animated-content-back .slide-info-btn {-webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig}

.chips-list { display: flex; flex-wrap: wrap; gap: 10px; -webkit-animation-duration: 1.6s; animation-duration: 1.6s}
    .chips-list__more {visibility: hidden; position: absolute; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 42px; -webkit-animation-duration: 1.6s; animation-duration: 1.6s}
    .chip {padding: 0 30px; height: 47px; display: flex; align-items: center; justify-content: center; background-color: #fff; border-radius: 20px; font-family: 'Roboto-Light', sans-serif; font-size: 24px; }
    .slide-info-btn { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 18px; line-height: 18px; font-family: 'Roboto-SemiBold',sans-serif; cursor: pointer; -webkit-animation-duration: 1.8s; animation-duration: 1.8s; width: fit-content}
    .slide-info-btn:hover svg {-webkit-transform: translateX(15px); transform: translateX(15px)}
    .slide-info-btn svg {-webkit-transition: .5s; transition: .5s}
    .slide-info-btn__more { display: flex; visibility: hidden; position: absolute; align-items: center; gap: 8px; color: #fff; font-size: 18px; line-height: 18px; font-family: 'Roboto-SemiBold',sans-serif; cursor: pointer; -webkit-animation-duration: 1.8s; animation-duration: 1.8s; width: fit-content; }
    .slide-info-btn__more:hover svg {-webkit-transform: translateX(-15px) rotate(180deg); transform: translateX(-15px) rotate(180deg)}
    .slide-info-btn__more svg {-webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: .5s; transition: .5s}

@media screen and (max-width: 1919px) {
    .slider-content { padding: calc(70px + (100 - 70) * var(--denominator)) 0 calc(70px + (100 - 70) * var(--denominator))  calc(70px + (100 - 70) * var(--denominator));   }
    .slide-info { gap: calc(20px + (30 - 20) * var(--denominator)); }
    .slide-info__top { gap: calc(20px + (30 - 20) * var(--denominator)); }
    .slide-info__bottom { gap: calc(20px + (30 - 20) * var(--denominator)); }
    .slide-info-title { font-size: calc(50px + (76 - 50) * var(--denominator)); }
    .slide-info-subtitle { font-size: calc(30px + (46 - 30) * var(--denominator)); }
    .slide-info-desc { font-size: calc(16px + (22 - 16) * var(--denominator)); }
    .slide-info-desc__more {  font-size: calc(16px + (22 - 16) * var(--denominator)) }
    .slide-info-btn {  font-size: calc(16px + (22 - 16) * var(--denominator)); }
    .slide-info-btn__more { font-size: calc(16px + (22 - 16) * var(--denominator)); }
    .chip {padding:  0 calc(20px + (30 - 20) * var(--denominator)); border-radius: calc(13px + (20 - 13) * var(--denominator)); height: calc(31px + (47 - 31) * var(--denominator));  font-size: calc(16px + (24 - 16) * var(--denominator)); }
}

@media screen and (max-width: 1299px) {
    .slider-wrapper {width: 100%; height: calc(100dvh - var(--header-height));}
    .projects-slider { width: 100%; height: calc(100dvh - var(--header-height));}
    
    .slider-item { width: 100%; margin: 0 0 0 0; height: calc(100dvh - var(--header-height));   min-height: auto; }
    .slider-content { width: 100%; height: calc(100dvh - var(--header-height));  max-height: calc(100dvh - var(--header-height));  min-height: calc(100dvh - var(--header-height)); border-radius: 0; display: flex; align-items: center; justify-content: normal; padding: 0 0 0 0; position: relative; background-color: transparent !important;}
    .slider-content img.slide-img { right: auto; left: 56.66%; height: calc(100dvh - var(--header-height)); width: auto; opacity: 0.7;}    

    .slick-dots { right: 20px;}

    .slide-info { height: calc(100% - ((52px + (100 - 52) * var(--denominator)) * 2)); width: 65%; margin-left: calc(52px + (100 - 52) * var(--denominator)); gap: calc(16px + (30 - 16) * var(--denominator)); }
    .slide-info__top { gap:  calc(16px + (30 - 16) * var(--denominator)); width: 77%; }
    .slide-info-title { font-size: calc(40px + (76 - 40) * var(--denominator)); }
    .slide-info-subtitle { font-size: calc(22px + (46 - 22) * var(--denominator)); ; line-height: 1; }
    .slide-info-desc { font-size:  calc(11px + (22 - 11) * var(--denominator)); ;}
    .slide-info__bottom { gap: calc(16px + (30 - 16) * var(--denominator)); }

    .chip {padding:  0 calc(16px + (30 - 16) * var(--denominator)); height: calc(24px + (47 - 24) * var(--denominator));  border-radius: calc(13px + (20 - 13) * var(--denominator));  font-size: calc(13px + (24 - 13) * var(--denominator)); }
}

@media screen and (max-width: 1299px) and (min-width: 680px) {
     .slider-content { background-color: transparent !important;}
}

@media screen and (min-width: 680px) {
    .slide-info-btn, .slider-content.animate .slide-info-btn__more, slide-info-desc__more { color: #FFFFFF !important; }
    .slide-info-btn svg path, .slide-info-btn__more svg path { fill: #FFFFFF !important;}
}

@media screen and (max-width: 679px) {
    .slider-wrapper { position: relative; }
    .projects-slider { width: 100%; }
    .slider-content { width: 100%; justify-content: center; }
    .slider-content img.slide-img { right: 0; left: 0; height: auto; width: 100%; bottom: 0; top: auto; opacity: 1.0;}    
    .slider-item  { width: 100%; }

    .slide-info { height: calc(100% - ((140px + (180 - 140) * var(--denominator)))); width: calc(100% - ((80px + (128 - 80) * var(--denominator)))); margin-left: 0; gap: calc(24px + (45 - 24) * var(--denominator)); justify-content: flex-start; position: relative; }
    .slide-info__top { gap:  calc(13px + (24 - 13) * var(--denominator)); width: 100%; }
    .slide-info-title { font-size: calc(32px + (60 - 32) * var(--denominator)); }
    .slide-info-subtitle { font-size: calc(16px + (24 - 16) * var(--denominator)); ; line-height: 1; }
    .slide-info-desc { font-size:  calc(12px + (18 - 12) * var(--denominator)); ;}
    .slide-info__bottom { gap: calc(16px + (30 - 16) * var(--denominator)); }

    .chip {padding:  0 calc(10px + (12 - 10) * var(--denominator)); height: calc(24px + (31 - 24) * var(--denominator));  border-radius: calc(16px + (20 - 16) * var(--denominator));  font-size: calc(14px + (18 - 14) * var(--denominator)); }

    .slide-info-btn, .slider-content.animate .slide-info-btn__more, slide-info-desc__more { position: absolute; bottom: 10px; left: 0; background-color: #ffffff;  padding: 30px 40px; border-radius: 10px;}
}

.filters-wrapper { position: absolute; top: 50vh; z-index: 10; display: flex; align-items: center; }
    .filters-wrapper { will-change: transform; transition-duration: 2.5s; transition-property: opacity, transform; transition-timing-function: ease; } 
    .filters-wrapper:not(.filters-current) { transform: translate3d(-477px, -50%, 0);  opacity: 0; }
    .filters-wrapper.filters-current { transform: translate3d(-410px, -50%, 0); }

    .filters-wrapper.filters-current:hover { transform: translate3d(-380px, -50%, 0); transition-duration: 0.5s;}
    .filters-wrapper.filters-current.opened {transform: translate3d(0, -50%, 0); transition-duration: 1s;}

    .filters-open-btn { height: 384px;  width: 67px; display: flex; justify-content: space-between; flex-direction: column; align-items: center; position: relative; padding: 30px 0; cursor: pointer; position: relative; clip-path: polygon( 63.514% 1.764%,0.279% 0.047%,0.279% 100%,63.514% 98.283%,63.514% 98.283%,69.663% 98.01%,75.41% 97.594%,80.699% 97.047%,85.472% 96.382%,89.669% 95.61%,93.233% 94.744%,96.107% 93.797%,98.231% 92.779%,99.548% 91.704%,100% 90.584%,100% 9.463%,100% 9.463%,99.548% 8.343%,98.231% 7.268%,96.107% 6.25%,93.233% 5.302%,89.669% 4.437%,85.472% 3.665%,80.699% 2.999%,75.41% 2.453%,69.662% 2.037%,63.514% 1.764% ); background: rgba(255, 255, 255, 0.80); backdrop-filter: blur(50px); margin-left: -1px;}

    .filters-content { backdrop-filter: blur(50px); background: rgba(255, 255, 255, 0.94); padding: 40px 50px; min-height: 540px; max-height: 770px; border-radius: 0 80px 80px 0; display: flex; flex-direction: column; justify-content: space-between; margin-right: -1px;}
    .filters-content .divider {width: 100%; height: 1px; background: #000; opacity: .05; margin: 18px 0}


    .filters-btn { padding: 16px; border-radius: 10px; background-color: transparent; border: 1px solid #4a72d9; color: var(--color-primary); cursor: pointer; margin-top: 51px; text-align: center; transition: var(--transition-default);}
    .filters-btn:hover {border: 1px solid #22459d; color: #22459d}
    .filters-btn:disabled { pointer-events: none; background: rgba(74,100,217,0.10); opacity: .5; border: 1px solid rgba(74,114,217,0.2); }

    .filters-list { display: flex; gap: 6px; flex-wrap: wrap; width: 310px;}
        .filter-item { display: block;}
        .filter-item label { display: flex; align-items: center; justify-content: center; padding: 0 12px; height: 30px; background: rgba(74,100,217,0.05); color: var(--color-primary); border-radius: 20px; font-family: 'Roboto-Light', sans-serif; font-size: 14px; cursor: pointer; transition: var(--transition-default);}
        .filter-item:hover label {background: rgba(74,100,217,0.2)}
        .filter-item input { opacity: 0; width: 0; height: 0; position: absolute;}
       
        .filter-item.technology label { background: #fff; border: 1px solid rgba(74,114,217,0.2); padding: 0 12px; height: 26px;}
        .filter-item.technology:hover label  {border: 1px solid rgba(74,114,217,0.6)}

        .filter-item input:checked + label {background: var(--color-primary); color: #fff}
        .filter-item input:checked + label:hover {background: var(--color-primary-hover)}

@media screen and (max-width: 679px) {
    .filters-wrapper { position: absolute; left: auto; bottom: 0; top: auto; right: 18px; width: calc(100% - 36px); min-width: calc(100% - 36px); height: calc(100dvh - 160px);
        opacity: 1; }

    .filters-wrapper:not(.filters-current) { transform: translate3d(0, 200%, 0);  opacity: 0; }
    .filters-wrapper.filters-current { position: absolute; left: auto; bottom: 0; top: auto; right: 18px; width: calc(100% - 36px); min-width: calc(100% - 36px); height: calc(100dvh - 160px); transform: translate3d(0, 100%, 0); opacity: 1; }    
    .filters-wrapper.filters-current:hover { transform: translate3d(0, 100%, 0);  transition-duration: 0.5s;}
    .filters-wrapper.filters-current.opened {transform: translate3d(0, 0, 0); transition-duration: 1s;}


    .filters-open-btn { height: 70px;  width: 70px; position: absolute; bottom: calc(100% - 2px); right: 0; background: rgba(255, 255, 255, 1.0); clip-path: none; padding: 0 0; justify-content: center; border-radius: 30px 30px 0 0; }

    .filters-open-btn__icon { display: none;}

    .filters-content { padding: 40px 40px 40px 40px; width: 100%; height: 100%; min-height: 100%; max-height: 100%; border-radius: 30px 0 0 0; display: flex; flex-direction: column; justify-content: space-between; margin-right: 0; background: rgba(255, 255, 255, 1.0);}
    
    .filters-list { width: 100%; }
    .filter-item label {height: 34px; font-size: 20px;}
    .filter-item.technology label {  height: 30px;}
}

.dotters { position: absolute; top: 50%; right: 15px; transform: translateX(-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.dotters:before {content: attr(data-before); position: absolute; top: -32px; right: -2px; color: rgba(255,255,255,0.8); font-size: 22px; font-family: 'Roboto-SemiBold',sans-serif}
.dot {width: 6px; border: 0; border-radius: 10px; height: 20px; background-color: rgba(255,255,255,0.5); color: rgba(255,255,255,0); -webkit-transition: all 1s ease; transition: all 1s ease; display: none; }
.dot.dot-visible { display: block; }
.dot.active { height: 50px; background-color: rgba(255,255,255,0.8) !important; color: rgba(255,255,255,0)}


footer {width: 100%; position: relative; }
.footerMain { margin-top: -22vw; }
footer img {margin: 0 auto; display: block; width: 100%; }
footer .content { padding-bottom: 31px; text-align: center; margin: 0 auto}
.footerMain .content {position: absolute; bottom: 0; left: 0; right: 0; }
footer a {display: block; width: fit-content; margin: 0 auto; font-size: 60px; color: #fff; font-family: 'Roboto-Bold',sans-serif; border-bottom: 5px solid transparent;  transition: var(--transition-default); text-shadow: 0px 0px 20px  rgba(0, 0, 0, 0.5);}
footer a:hover { border-color: #fff}
footer a:first-child {margin-bottom: 18px}
footer p {margin-top: 97px; font-size: 14px; color: var(--color-text-default); font-family: 'Roboto-Light', sans-serif}
.footerMain p {color: #fff; }

@media screen and (max-width: 1919px) {
    footer .content { padding-bottom: calc(20px + (31 - 20) * var(--denominator));}
    footer a { border-width: calc(3px + (5 - 3) * var(--denominator)); font-size: calc(38px + (60 - 38) * var(--denominator)); }
    footer a:first-child {margin-bottom: calc(11px + (18 - 11) * var(--denominator));}
    footer p {margin-top: calc(60px + (97 - 60) * var(--denominator)); font-size: calc(9px + (14 - 9) * var(--denominator)); }
}

@media screen and (max-width: 1299px) {
    footer .content { padding-bottom: calc(9px + (16 - 9) * var(--denominator));}
    footer a { border-width: calc(2px + (3 - 2) * var(--denominator)); font-size: calc(22px + (40 - 22) * var(--denominator)); }
    footer a:first-child {margin-bottom: calc(11px + (18 - 11) * var(--denominator));}
    footer p {margin-top: calc(19px + (39 - 19) * var(--denominator)); font-size: calc(8px + (14 - 8) * var(--denominator)); }
}

@media screen and (max-width: 679px) {
    .imgFooter {display: none;}
    footer, .footerMain  {margin-top: 0;}
    footer .content, .footerMain .content  { position: relative; padding: 57px 24px 57px 24px;}
    footer a { color: var(--color-text-default); border-width: calc(1px + (2 - 1) * var(--denominator)); text-shadow: 0px 0px 20px  transparent;}
    footer a:first-child {margin-bottom: 14px;}
    footer p, .footerMain p  {margin-top: 30px; font-size: 12px; color: var(--color-text-default); }    
}


.pageSecond {position: relative; overflow-x: hidden; }
.pageSecond main {  overflow-x: hidden; position: relative; }
.body-circle-01, .body-circle-02 {position: absolute; z-index: 1}
.body-circle-01  {width: 941px; height: 941px; top: -290px; right: -300px; border-radius: 100%; opacity: 0.3; background: radial-gradient(45.86% 48.46% at 50% 50%, rgba(130, 107, 215, 0.5) 0%, rgba(107, 134, 215, 0) 100%); -webkit-filter: blur(50px); filter: blur(50px)}
.body-circle-02  {width: 839px; height: 839px; top: 280px; right: -210px; border-radius: 100%; opacity: 0.3; background: radial-gradient(44.72% 53.71% at 50.09% 50.09%, rgba(247, 54, 128, 0.4) 0%, rgba(245, 176, 103, 0) 100%); -webkit-filter: blur(50px); filter: blur(50px)}
   
    
.containerContent { max-width: 1400px; width: calc(100% - 100px);  overflow: hidden; display: flex; flex-direction: column; gap: 24px; background: transparent; padding-top: 150px; padding-bottom: 20px; margin: 0 auto; font-size: 18px; color: #152243CC; font-family: 'Roboto', sans-serif; position: relative; z-index: 2; }
   

.containerContent h1 {font-family: Roboto-Black, sans-serif; font-size: 48px; color: #152243; line-height: 1; font-weight: normal;}
.containerContent h4 {font-family: Roboto-Bold; font-size: 18px; color: #152243; line-height: 1;  font-weight: normal;}
.containerContent p { margin-bottom: 8px; line-height: 1;}


/* Вложеные нумерованные списки */
.agreement { counter-reset: section; list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 32px; }
.agreement > li { line-height: 1; position: relative; padding-left: 20px; }
.agreement > li::before { content: counter(section) ". "; counter-increment: section; font-family: Roboto-Bold; color: #152243; position: absolute; left: 0;  line-height: 1; }
.agreement > li > ol { counter-reset: subsection; list-style: none;  display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.agreement > li > ol li::before { content: counter(section) "." counter(subsection) ". "; counter-increment: subsection; font-family: Roboto-SemiBold; color: #152243; line-height: 1;}
.agreement > li > ol li { line-height: 1; }

@media screen and (max-width: 1299px) {
    .containerContent { padding-top: calc(110px + (150 - 110) * var(--denominator));  font-size: calc(16px + (18 - 16) * var(--denominator));}
    .containerContent h1 { font-size: calc(32px + (48 - 32) * var(--denominator)); }
    .containerContent h4 {font-size: calc(16px + (18 - 16) * var(--denominator));}
    .containerContent p { margin-bottom: 8px; line-height: 1;}
    .agreement { gap: calc(24px + (32 - 24) * var(--denominator)); }
    .agreement > li > ol { gap: calc(16px + (20 - 16) * var(--denominator)); margin-top: calc(16px + (24 - 16) * var(--denominator)); }
}

@media screen and (max-width: 679px) {
    .containerContent { padding-top: 110px;  font-size: 16px;}
    .containerContent h1 { font-size: 32px; }
    .containerContent h4 {font-size: 16px;}
    .containerContent p { margin-bottom: 8px; line-height: 1;}
    .agreement { gap: 24px; }
    .agreement > li > ol { gap: 16px; margin-top: 16px; }
}


.desktopUnVisible { display: none; }

@media screen and (max-width: 899px) {
    .tabletUnVisible { display: none; }
}

@media screen and (max-width: 679px) {
    .mobileUnVisible {display: none;}
    
}