@font-face {
    font-family: 'AlbertSans';
    src: url('../fonts/AlbertSans-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AlbertSans';
    src: url('../fonts/AlbertSans-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'AlbertSans';
    src: url('../fonts/static/AlbertSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}





* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'AlbertSans', sans-serif;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    box-sizing: border-box;

}


body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    scroll-behavior: smooth;
}


html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

html {
    width: 100%;
    height: 100%;

}

body {
    font-family: 'AlbertSans', sans-serif;
    font-weight: normal;
    font-style: normal;

    color: #ffffff;
    background: linear-gradient(360deg, #1B1D2C 0%, #13102F 102.32%);

}

/* section{
    height: 100vh;
} */

strong {
    font-weight: bold;
    /* Использует AlbertSans-Black */
}

em {
    font-style: italic;
    /* Использует AlbertSans-Italic */
}


.box__container {
    display: flex;
    align-items: center;

    width: 90%;
    margin: 0 auto;


}

header {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    top: 0;
    z-index: 999999999999999999999;
    height: 95px;
    background: radial-gradient(47.44% 84.64% at 52.56% 53.07%, #E2E2E2 0%, #C0C5EA 100%);
    /* transition: background-color 0.3s ease; */
}

.logo img {
    height: 50px;
}

.nav {
    flex-grow: 1;
    text-align: right;
}

/* Начальные стили для кнопки "гамбургер" */
.nav-toggle {
    cursor: pointer;
    display: block;
    position: relative;
    width: 30px;
    height: 20px;
    z-index: 2;
    /* Поверх меню */
}

.nav-toggle div {
    width: 100%;
    height: 3px;
    background-color: white;
    margin: 5px 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    position: absolute;
    left: 0;
}

/* Верхняя линия */
.nav-toggle div:nth-child(1) {
    top: 0;
}

/* Средняя линия */
.nav-toggle div:nth-child(2) {
    top: 8px;
}

/* Нижняя линия */
.nav-toggle div:nth-child(3) {
    top: 16px;
}

/* Анимация для превращения линий в крестик */
.nav-toggle.active div:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle.active div:nth-child(2) {
    opacity: 0;
    /* Скрываем среднюю линию */
}

.nav-toggle.active div:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Для настольной версии скрываем кнопку и показываем меню */
@media (min-width: 768px) {
    .nav-toggle {
        display: none;
    }

    .nav-links {
        display: flex;
        flex-direction: row;
        position: static;
        background-color: transparent;
    }
}




.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    font-family: Inter;
    font-size: 24px;
    font-weight: 500;
    line-height: 29.05px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

    text-align: left;


    color: #6965AA;

    text-decoration: none;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}


.nav-links a:hover {
    background-color: #037fa579;
}

header .button {
    background-color: #6F7AAD;
    font-family: Inter;
    font-size: 18.33px;
    font-weight: 500;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    padding: 8px 23px;

    color: #ffffff;
    border-radius: 7px;
}



section {
    background: linear-gradient(360deg, #1B1D2C 0%, #13102F 102.32%);
    overflow: hidden;
}


.box {
    margin: 100px 0;
    padding: 100px 0;

    max-width: 90%;
    margin: 0 auto;

}


.carousel-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.secondBlockContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
}



/* .text-carousel,
.image-carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 200px;
    overflow: hidden;
    position: relative;
} */

.backgroundFirstBlock {
    background: radial-gradient(47.44% 84.64% at 52.56% 53.07%, #E2E2E2 0%, #C0C5EA 100%);
    height: 100vh;

}

.backgroundFirstBlock .box {
    display: flex;
    padding: 150px 0;
    justify-content: space-between;
}

.backgroundFirstBlock .box .text-carousel {
    max-height: 300px;
    max-width: 600px;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
}


.firstBlock__image-background {
    width: 500px;

    position: absolute;
    right: 80px;
    top: 150px;

    transition: position 0.5s ease, top 0.5s;

}

.firstBlock__image-spares {
    position: relative;
    width: 500px;
    /* right: 90px; */
    left: 15px;
    bottom: 35px;


    z-index: 9999;

}




.text-slide,
.image-slide {
    width: 100%;
    text-align: center;
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}


.text-carousel {
    border: 2px solid #8BAAD8;

}



.text-slide {
    font-family: 'AlbertSans', sans-serif;
    font-size: 45px;
    line-height: 50px;
    text-align: left;

    padding: 0 0 0 80px;



}

.image-slide img {
    width: 100%;
    height: auto;
}

@keyframes slideIn {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    10% {
        transform: translateX(0);
        opacity: 1;
    }

    33.33% {
        transform: translateX(0);
        opacity: 1;
    }

    43.33% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}


.firstBlock .text-carousel .text-carouselH {
    background: linear-gradient(180deg, #007EC1 7.69%, #6331F8 92.82%);
    font-family: Aeonik TRIAL;
    font-size: 48px;
    font-weight: 400;
    line-height: 54.72px;
    background-clip: text;
    color: transparent;


}

.firstBlock .text-carousel .text-carouselSmall {
    color: #555979;
    font-family: Aeonik TRIAL;
    font-size: 18px;
    font-weight: 400;
    line-height: 20.52px;



}

.image-carousel .image-slide {
    display: block;
    opacity: 0;
}

.image-carousel .image-slide.active {
    display: block;
    opacity: 1;
}


.firstBlock-button {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 12.77px;
    line-height: 15.46px;
    text-align: left;

    background-color: #514E9B;
    padding: 9px 13px;
    color: white;


}


.firstBlock-button:hover {
    background-color: #594a8e;
}




.secondBlockLeftside {
    display: contents;

}


/* second section */


.secondBlock__image-spares {
    position: relative;
    width: 350px;
    /* right: 75px; */
    z-index: 9999;
}

.secondBlock__image-background {
    position: absolute;
    width: 400px;
    right: 120px;
}


.text-content {
    max-width: 40%;
}

.text-content h2 {
    font-size: 60px;
    line-height: 65px;
    text-align: left;
    font-weight: 700;

    margin-bottom: 20px;
}


.text-content p {
    font-size: 1.2em;
    margin-bottom: 30px;
    line-height: 1.6;
}

.secondBlock .secondBlock__button {
    display: inline-block;
    padding: 10px 25px;
    color: #ffffff;
    background: linear-gradient(180deg, #5A6581 0%, #3C456B 100%);
    text-decoration: none;
    transition: background-color 0.3s;
    margin-top: 30px;
    border-radius: 8px;

    font-family: Aeonik TRIAL;
    font-size: 20px;
    font-weight: 400;
    line-height: 22.8px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.secondBlock .secondBlock__button:hover {
    background-color: #514E9B;
}

.image-content {
    position: relative;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-image {
    width: 100%;
    border-radius: 10px;
}


.secondBlock__imagesbox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.secondBlock__imagesbox_image {
    position: relative;


    z-index: 999999;

    width: 150px;
    transition: tranform 12s ease;
}

.secondBlock__imagesbox_image:first-child {
    /* left: 215px; */
    left: 300px;
    bottom: 95px;
}

.secondBlock__imagesbox_image:nth-child(2) {
    /* left: 0; */
    left: 150px;
}

.secondBlock__imagesbox_image:nth-child(3) {
    /* left: 225px; */
    left: 300px;
    top: 95px;

}

.secondBlock__imagesbox_image:hover {
    transition: transform 0.5s ease-in-out !important;
    transform: scale(1.2) !important;
}



/* therd block */



.thirdBlock__header {
    font-size: 28px;
    font-weight: 800;
    line-height: 33.6px;
    text-align: left;

}

.thirdBlock h2 {
    display: flex;
    align-items: center;
    align-self: center;
    background-image: url(../images/hts_kapak\ 1.png);
    height: 150px;
    background-size: cover;
    font-size: 28px;
    font-weight: 800;
    text-align: left;
    padding-left: 5%;


}

.thirdBlock .thirdBlock__content--firstParagraf {

    color: #C5C5C5;
    font-size: 20px;
    font-weight: 500;
    line-height: 28.8px;
    text-align: left;
}

.thirdBlock p {
    color: white;
    font-size: 18px;
    font-weight: 500;
    line-height: 28.8px;
    text-align: left;

}

.thirdBlock__content {
    padding: 20px 0;
}

.thirdBlock__icons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 80px 50px;
    width: 90%;
    margin: 0 auto;
}

.thirdBlock__icon {
    text-align: center;

}

.thirdBlock__icon img {
    width: 100px;
    padding-top: 48.8px;
}

.thirdBlock .thirdBlock__icon p {
    text-align: center;
    font-size: 20px;
    padding-top: 20px;

}



.thirdBlock__footer {
    padding: 20px;
}

.vertical-line {
    background-color: #D5EAFF;
    /* Замените на нужный цвет */
    width: 200px;
    /* Замените на нужную высоту */
    margin: 20px auto;

}


.thirdBlock__icon:hover p,
.thirdBlock__icon.persistent-hover p {
    transition: linear 2s;
    background: linear-gradient(135deg, #AD00FF 0%, #00A3FF 100%);
    /* Настройка градиента */
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}


.thirdBlock__icon.persistent-hover+.vertical-line {

    transition: background linear 2s;
    color: transparent;
    background: linear-gradient(135deg, #AD00FF 0%, #00A3FF 100%);
    height: 2.3px;

}


/* fourth block */

.fourthBlock {
    background: linear-gradient(135deg, #ECECEC 0%, #ADC3D7 100%);
}

.fourthBlockTitle {
    font-family: 'AlbertSans', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 33.6px;
    text-align: left;
    color: #3C27BE;

}

.subtitle {
    color: #010031;
    font-family: 'AlbertSans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28.8px;
    text-align: left;
    padding-top: 50px;
}

.extra-text:not(.hidden)+.subtitle {
    padding-top: 0;
}


.content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 100px;
}

.content img {
    width: 200px;
    height: 200px;
}

.fourthBlockMainBlock {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fourthBlockBoxContant {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 60%;

}

.buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.buttons button {
    background-color: #f0f0f0;
    color: #010031;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.8s;
    width: 200px;
}

.buttons button:hover {
    background-color: #999999;
    color: white;
}


.arrow {
    font-size: 100px;
    color: white;
    cursor: pointer;
    transition: color 0.3s;
    user-select: none
}

.arrow:hover {
    color: #999999;
    user-select: none
}



.extra-text:not(.hidden) {
    background: linear-gradient(89.93deg, #FFA620 -0.94%, #FF3F02 103.09%);
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 40px auto;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    width: 200px;
    text-align: center;
}


.activeRed {
    /* transition: all linear 0.1s; */

    background: linear-gradient(89.93deg, #FFA620 -0.94%, #FF3F02 103.09%) !important;
    color: white !important;

}

.activeGreen {
    /* transition: all linear 0.1s; */

    background: linear-gradient(89.93deg, #96B66D -0.94%, #B8D36B 103.09%) !important;

    color: white !important;


}





.fourthBlockCircle-container {
    transition: background linear 1s;

    position: relative;
    width: 400px;
    height: 400px;
    background: radial-gradient(87% 87% at 50% 93.4%, rgba(227, 227, 227, 0.6) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(193, 193, 193, 0.6) 100%);


    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: baseline;
}

.fourthBlockCircle-container img {
    width: 300px;
    height: auto;
    border-radius: 50%;
}

.fourthBlockShadow {

    position: absolute;
    bottom: -30px;
    width: 60%;
    height: 20px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(221, 221, 221, 0.4) 0%, rgba(218, 218, 218, 0.4) 100%);
    border-radius: 50%;
    z-index: 1;
}



/* динамический цвет фона дерева */

.fourthBlock .greenCercle {
    transition: background linear 1s;

    background: radial-gradient(87% 87% at 50% 93.4%, rgba(106, 189, 0, 0.6) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(175, 236, 0, 0.6) 100%);

}

.fourthBlock .greenCercleShadow {
    transition: background linear 1s;

    background: radial-gradient(50% 50% at 50% 50%, rgba(218, 255, 202, 0.4) 0%, rgba(201, 229, 122, 0.4) 100%);

}


.fourthBlock .redCercle {
    transition: background linear 1s;

    background: radial-gradient(93.58% 93.58% at 50% 99.98%, rgba(255, 46, 0, 0.6) 0%, rgba(255, 197, 197, 0.6) 69%, rgba(255, 31, 0, 0.6) 100%);

}

.fourthBlock .redCercleShadow {
    transition: background linear 1s;

    background: #FF757533;


}


/* динамический цвет фона дерева */




/* fifth block */




.fifthBlock .box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;

}

.fifthHeader {
    font-family: 'AlbertSans', sans-serif;
    font-size: 67.8px;
    font-weight: 800;
    line-height: 81.36px;
    text-align: center;
    background: linear-gradient(360deg, #0066FF 20.99%, #C213FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;


}

.fifthBig-number {
    font-size: 36px;
    color: #3C27BE;
    padding-top: 50px;
    font-family: 'AlbertSans', sans-serif;
    font-size: 52.25px;
    font-weight: 500;
    line-height: 62.7px;
    text-align: center;


    /* Синий цвет */
    margin: 10px 0;
}

.fifthDescription {
    font-family: 'AlbertSans', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 38.4px;
    text-align: center;
    color: #010031;
    padding-top: 30px;


}

.fifthStats {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.stat-item {
    text-align: center;
    width: 33.33333333%;
    padding-top: 50px;
    min-height: 250px;


}

/* .fifthStats .stat-item:nth-child(2) {
    border-left: 6px solid #E9F2FF;
    border-right: 6px solid #E9F2FF;
    border-radius: 2px;
} */

.stat-number {
    background: #3C27BE;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    font-family: 'AlbertSans', sans-serif;
    font-size: 64px;
    font-weight: 500;
    line-height: 76.8px;
    text-align: center;

}

.fifthBlock .stat-number {
    font-family: Satoshi;
    font-size: 25px;
    font-weight: 500;
    line-height: 33.75px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;


}


.sevenBlock .stat-number {
    text-wrap: nowrap;
    padding: 0;
}

.sevenBlock .stat-text {
    text-wrap: nowrap;
    padding: 0;

}

.sevenBlock .stat-item {
    padding: 50px 0 20px 0;
    flex-wrap: nowrap;
}

.stat-text {
    color: #010031;



    font-family: 'AlbertSans', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 28.8px;
    text-align: center;

}


/* sixth block  */


.sixthBlock .container {
    display: flex;
    position: relative;
    align-items: center;
}


.sixthBlock .highest-standards {
    display: flex;
    color: white;
    background-color: #1A1A1A;
    /* Темно-синий фон */
}

.sixthBlock .image-section {
    width: 50%;
    /* background: url('../images/gas-heating-system-regular-check-2023-11-27-05-18-23-utc 2.png') no-repeat center center;
    background-size: contain; */
}

.sixthBlock .text-section {
    padding: 40px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #6060AB;
    transition: border-color 0.5s ease;
}


.sixthBlockLeftImageSection {
    display: flex;
    justify-content: space-around;
}

.sixthBlock h2 {
    font-family: 'AlbertSans', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 33.6px;
    text-align: left;
    padding: 0 0 30px 0;
    color: #FFFFFF;
    ;
}

.sixthBlock .text-section p {
    color: white;
    font-family: 'AlbertSans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;

    /* Светло-серый текст */
}


.sixthBlockLeftBlock {
    width: 50%;
    padding: 30px;
    z-index: 5;
}

.sixthBlockLeftImageSectionBackgroundImage {
    z-index: 1;
    position: absolute;
    top: 110px;
    left: -200px;
    height: 100%;

}


.sixthBlockLeftImageWorker {
    z-index: 5;
    position: relative;
    width: 583px;

}


/* seventh block */

.sevenBlock {
    background: linear-gradient(49.97deg, #ECECEC 47.24%, #ADC3D7 104.19%);
    position: relative;
    z-index: 5;
    color: #010031;
    height: calc(100vh + 327px);
    overflow: hidden;
}

.sevenBlock .box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    align-items: center;
}

.sevenBlock .sevenhBlockHeader {
    text-align: center;

    color: #3C27BE;

    font-family: 'AlbertSans', sans-serif;
    font-size: 68.66px;
    font-weight: 700;
    line-height: 82.39px;
}

.sevenBlock .sevenBlockDescription {
    font-family: 'AlbertSans', sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 33.6px;
    text-align: center;
    padding-top: 30px;

}

.sevenBlock .sevenStats {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid #626262;
}


.sevenBlock .stat-item {
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.sevenBlock .stat-number,
.sevenBlock .stat-plus {
    color: #3C27BE;
    font-size: 52.25px;
    font-weight: 500;
    line-height: 62.7px;

}

.sevenBlock .stat-text {
    font-size: 33.12px;
    font-weight: 500;
    line-height: 62.7px;
    padding-left: 10px;


}




.sevenStats .stat-item:nth-child(1) {
    justify-content: start;
}

.sevenStats .stat-item:nth-child(2) {
    justify-content: center;
}

.sevenStats .stat-item:nth-child(3) {
    justify-content: end;
}


.sevenBlock .box .sevenBlockImageArrows {
    max-height: 800px;
}




#carousel-image {
    opacity: 1;
    width: 200px;
    transition: transform 0.5s ease;
}



.image-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.revealed-image {
    width: 100%;
    /* clip-path: inset(0 100% 0 0); */
    /* Начальное состояние: изображение полностью скрыто */
    transition: clip-path 3s ease-out;
}




/* footer block */

.footer {
    background: linear-gradient(180deg, #1B1D2C 0%, #13102F 100%);
    color: #fff;
    /* padding: 100px 0; */
    margin: 0 auto;
}


.footer-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
}


.footer-section.location {
    flex: 2;

    padding: 100px 5% 50px 5%;


}

.footerSectionLocationText {
    /* position: absolute;
    top: 160px;
    right: 128px; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: right;
    width: 100%;
    z-index: 45;
    padding-right: 10px;
}


.footerSectionLocationText a {
    text-decoration: none;
    color: white;
}

.footerSectionLocationText a:hover {
    color: rgba(255, 255, 255, 0.497);
}

.footerSectionLocationText p {
    padding-bottom: 18px;
}


.footerLocationBorder {
    border: 1.76px solid #57558C;
    position: relative;
    height: 600px;

}

.footer-section.contact {
    flex: 1;
    background: #24233C;
    padding: 100px 5%;

}


.footerLocationBorderImage {
    position: relative;
    width: 100%;
    max-width: 906px;
    margin: auto;
}

.footer h3 {
    font-size: 28px;
    font-weight: 800;
    line-height: 33.6px;
    text-align: left;
    padding: 0 0 30px 0;
    text-wrap: nowrap;

}

.footer-section.contact h4 {
    font-size: 27.94px;
    font-weight: 500;
    line-height: 33.53px;
    text-align: left;
    padding: 0 0 50px 0;
}



.footerLocationBorder img {
    /* max-width: 100%;
    height: 500px;
    padding: 20px;
    position: absolute; */
    width: 100%;
    max-height: 590px;
    display: block;


}




.contact form {
    display: grid;
    grid-gap: 15px;
    /* Промежутки между полями */
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #57558C;
    background: #2C2B49;
    color: #64629E;

    font-size: 15px;
    font-weight: 300;
    line-height: 20px;
    text-align: left;
    margin: 5px 0;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
    color: white;
}

footer button {
    padding: 10px 20px;
    background-color: #57558C;
    color: white;
    border: none;
    cursor: pointer;
}

footer button:hover {
    background-color: #57558c85;
}

footer button:active {
    margin-top: 2px;
    background-color: #57558c85;
}

.footer textarea {
    height: 222px;
}

.footerIconBlock {
    display: flex;
    justify-content: space-between;
}


.footerIconBlock__policyBlock {
    font-size: 17px;
    font-weight: 300;
    line-height: 20px;
    text-align: left;
    color: #676586;
    padding-top: 50px;
    flex: 2;
}

.footerIconBlock__policyBlock a {
    padding: 0 20px 0 0;
    color: #676586;
}

.footerIconBlock__policyBlock a:hover {
    padding: 0 20px 0 0;
    color: #6765867f;
}

footer .footerIconBlock__icons {
    display: flex;
    padding-top: 50px;
    flex: 1;
    justify-content: space-around;
}

footer .footerIcon {
    width: 30px;
}


.footerIconBlock__icons a {
    height: 30px;
}

.footerIconBlock__icons a:hover {
    background-color: white;
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
}




/* @media (max-width: 768px) { */
@media screen and (max-width: 700px) and (max-height: 1024px) {

    header {

        height: auto;
        padding: 0;
    }


    .box__container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
    }

    header .logo,
    header .nav-container {
        padding: 10px 30px;
    }

    .nav {
        display: none;
    }

    .nav.active {
        display: block;
        width: 100%;
    }


    .nav-links {
        display: flex;
        /* justify-content: start; */
        flex-direction: column;
        /* align-self: self-end; */
        align-items: flex-start;
        background: linear-gradient(135deg, #454969 0%, #0d0b1f 100%);

    }


    .nav-links li {
        margin: 14px;
    }

    .firstBlock .carousel-container {
        flex-direction: column-reverse;
        height: auto;

    }


    .firstBlock .text-slide {
        line-height: normal;
        font-size: 30px;
    }

    .firstBlock .text-carousel {
        width: 100%;
    }

    .firstBlock__image-spares {
        position: inherit;
        /* width: 100vw; */
        width: 100%;
        padding-bottom: 30px;
        padding-top: 0;
    }

    .firstBlock .carousel-container {
        height: auto;
    }

    .secondBlock .secondBlockContainer {
        height: auto;
        flex-direction: column;
    }

    .secondBlock .text-content {
        max-width: initial;
    }

    .box {
        padding: 30px 0;
    }

    .secondBlock .text-content h2 {
        font-size: 40px;
        line-height: initial;
        text-align: center;
    }

    .secondBlock .text-content p {
        text-align: left;
    }

    .secondBlock .secondBlockBoxForButton {
        text-align: center;
    }

    .thirdBlock h2 {
        text-align: center;
        display: block;
        align-content: center;
    }

    .thirdBlock .thirdBlock__content--firstParagraf {
        text-align: left;
    }

    .thirdBlock p {
        text-align: left;
    }

    .thirdBlock__icons {
        padding: 30px;
        flex-direction: column;
    }

    .firstBlock .box {
        padding-top: 100px;
    }

    .secondBlockContainer .secondBlockLeftside {
        display: flex;
        flex-direction: column-reverse;
    }

    .secondBlockContainer .secondBlock__imagesbox_image {
        width: 100px;
    }

    .secondBlockContainer .secondBlock__imagesbox_image:first-child {
        left: 25px;
        bottom: 200px;
    }

    .secondBlock .secondBlock__imagesbox_image:nth-child(2) {
        left: inherit;
        right: 50px;
        bottom: 150px;
    }

    .secondBlock .secondBlock__imagesbox_image:nth-child(3) {
        top: inherit;
        left: 25px;
        bottom: 100px;
    }

    .secondBlockContainer .secondBlock__image-spares {
        width: 250px;
        left: 50px;
        top: 130px;
    }

    .thirdBlock__icon .thirdBlockImageShadowImg {
        padding-top: 0;
    }


    .thirdBlock__icon img {
        padding-top: 30px;
    }

    .fourthBlockCircle-container {
        margin-top: 50px;
        width: 300px;
        height: 300px;
        align-self: inherit;
    }

    .fourthBlockMainBlock {
        flex-direction: column-reverse;
    }

    .fourthBlockCircle-container img {
        width: 200px;
    }

    .fourthBlockBoxContant .content {
        margin-top: 50px;
    }


    .fourthBlock .fourthBlockTitle{
        padding-left: 5%;
    }
    
    .fourthBlockBoxContant .buttons button {
        width: 150px;
        padding: 5px 10px;
    }

    .extra-text:not(.hidden) {
        margin: 20px auto;
    }

    .fourthBlockBoxContant {
        width: 100%;
    }

    #carousel-image {
        width: 90px;
        height: 90px;
    }

    .fifthHeader {
        font-size: 45px;
        line-height: normal
    }

    .fifthBig-number {
        display: flex;
        flex-wrap: nowrap;
        font-size: 45px;
        line-height: normal;
        padding-top: 30px;
    }

    .fifthDescription {
        font-size: 20px;
        padding-top: 0;
    }

    .fifthStats {
        flex-direction: column;
    }

    .stat-item {
        width: 100%;
        padding: 30px 0;
        min-height: auto;
    }

    .fifthBlock .stat-number {
        font-size: 45px;
        line-height: normal;
    }

    .stat-text {
        padding: 0;
    }


    .sixthBlock .sixthBlockLeftImageSectionBackgroundImage {
        width: 100%;
        left: 0;
        top: 0;
    }

    .fifthStats {
        margin-top: 0;
    }

    .fifthStats .stat-item:nth-child(2) {
        border: none;
    }

    .sixthBlock .container {
        flex-direction: column-reverse;
    }


    .sixthBlock .image-section,
    .sixthBlockLeftBlock {
        width: 100%;
    }

    .sixthBlockLeftImageSection {
        flex-direction: column;
    }

    .sixthBlock .text-section p {
        text-align: left;
    }

    .sixthBlockLeftImageWorker {
        width: 100%;
    }

    .sevenBlock .sevenStats {
        flex-direction: column;
    }

    .sevenBlock .stat-text {
        padding-left: 15px;
        font-size: 30px;
    }

    .sevenBlock .stat-number,
    .sevenBlock .stat-plus {
        font-size: 30px;
        line-height: normal;
    }

    .sevenBlock .box .sevenStats .stat-item {
        align-items: center;
        justify-content: start;
    }

    .sevenBlock {
        height: auto
    }

    .sevenBlock .box {
        padding: 0;
        padding-top: 30px;
    }

    .footer-content {
        flex-direction: column-reverse;
    }

    .footerLocationBorder {
        height: auto;
    }

    .footerLocationBorderImage {
        height: auto;
    }

    .footerLocationBorder img {
        position: relative;
        right: 50px;
    }

    .footerSectionLocationText p {
        padding-bottom: 10px;
        font-size: 12px;
    }

    .footerSectionLocationText {
        top: 66%;
    }

    .footerIconBlock {
        flex-direction: column-reverse;
    }

    .sevenBlock .stat-item {
        padding: 0;
    }

    .sevenBlock .stat-item:first-child {
        padding-top: 50px;
    }

    .footer h3 {
        text-wrap: wrap;
    }

    .footer-section.contact {
        padding: 30px 5%;
    }

    .footer-section.location {
        padding: 30px 5% 50px 5%;
    }

    .fifthBlock .box {
        padding: 30px 0 0 0;
    }

    .thirdBlock__footer {
        padding: 20px 0 0 0;
    }

    .thirdBlock__content {
        padding: 0;
    }

    .thirdBlock h2 {
        padding-left: 0;
    }

    .fourthBlock .subtitle {
        padding-top: 30px;
    }

    .secondBlock .text-content p {
        padding-top: 10px;
    }

    .fifthBig-number {
        margin: 0;
    }

    .fifthBlock .stat-number {
        padding: 0;
    }

    .thirdBlock__icon img {
        width: 80px;
    }

    .sixthBlockLeftBlock [data-aos=fade-left] {
        transform: translate3d(49px, 0, 0);
    }

    footer .footerIconBlock__icons {
        padding: 50px 40px 0 40px;
    }

    .sevenBlock .sevenBlockDescription {
        text-align: left;
    }


    /* new code for mobile phone */
    .backgroundFirstBlock .box{
        flex-direction: column;
        padding: 100px 0 0 0;
    }

    .firstBlock.backgroundFirstBlock .imageBox{
        padding-top: 30px;
    }

    .firstBlock .text-carousel .text-carouselH{
        font-size: 35px;
        line-height: 42.72px;
    }

    .firstBlock .text-carousel .text-carouselSmall{
        line-height: normal ;
    }

    .backgroundFirstBlock .box .text-carousel{
        padding: 20px;
        max-height: 100%;
    }

    .backgroundFirstBlock{
        height: auto;
    }

    .secondBlock.section#about-us{
        height:initial ;
        background-image: url('../images/Group_142_for mobile.png');
        background-size: cover;
        background-position-x: center;
    }

    #about-us .aboutUsLeftimage{
        display: none;
    }

    .secondBlock.section .aboutUs {
        max-width: 100%;
    }

    .fifthBlock .fourthBlockTitle{
        top:30px;
        right: 5%;
    }


    .fifthBlock .stat-item:first-child{
        padding-top: 200px;
    }

    .fifthBlock .fifthStats .stat-item{
        height: auto;
    }

    .fourthBlockContent .aboutUs{
        max-width: inherit;
    }

    .fourthBlock.section .aboutUs .subtitle{
        padding-left: 50px;
    }

    .fourthBlock.section h3{
        padding: 50px 50px 0 50px;
        padding-left: 10%;
    }

    .fourthBlock.section .fourthBlockContent .fourthBlockImgBlock{
        padding-left: 50px;

    }

    .fourthBlock .fourthBlockContentMainImages{
        display: none;
    }

    .FirBlockCommitment .commitment-image{
        width: 100%;
        height: auto;
    }

    .FirBlockCommitment .commitment-text p{
        width: 100%;
    }

    .FirBlockCommitment .commitment-image img{
        height: auto;
    }

    .commitment-block.ourCommitmentBlock{
        height: 100%;
    }
    
    .commitment-block.ourCommitmentBlock .commitment-content{
        flex-direction: column;
    }

    .commitment-block.ourCommitmentBlock .commitment-text{
        width: 100%;
        padding: 100px 5% 50px 5%;

    }

    .commitment-block.ourCommitmentBlock .commitment-text .stars-container img{
        width: 60px;
        height: 60px;
    }

    .commitment-block.ourCommitmentBlock   .commitment-image img{
        width: 100%;
        position: relative;
    }


}


#about-us {
    position: relative;
    height: 100vh;
}

#about-us h2 {

    background: linear-gradient(180deg, #CFB4FF 11.26%, #9CB0C6 88.46%);
    background-clip: text;
    color: transparent;

}


.aboutUs {
    z-index: 99999;
    position: relative;
    color: white;
    max-width: 50%;
}

.aboutUs .subtitle {
    color: #EFEFEF;
    font-family: Aeonik TRIAL;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}



.aboutUsLeftimage {
    position: absolute;
    top: 50px;
    right: 75px;
    height: 90vh;
    padding-top: 85px;
    width: 960px;
}



/* news section */





/* Section styling */
.news-section {
    text-align: center;
    padding: 40px;
}


.newsBlockTitle {
    background: linear-gradient(180deg, #F6E6FF 23.53%, #B2A4FF 78.43%);
    background-clip: text;
    color: transparent;
    font-family: Albert Sans;
    font-size: 42.27px;
    font-weight: 300;
    line-height: 50.73px;
    text-align: left;


}


/* News cards container */
.news-cards {
    display: flex;
    padding-top: 80px;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Individual news card styling */
.news-card {
    position: relative;
    width: 380px;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.news-card:hover {
    transform: translateY(-10px);
}

/* News image */
.news-image {
    width: 100%;
    object-fit: cover;
    display: block;
    max-height: 250px;
}

/* Overlay for text and button */
.news-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(180deg, #312E52 0%, #34344A 100%);
    ;
    color: #ffffff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-items: center;
}

/* News title and description */
.news-overlay h3 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.news-overlay {
    font-size: 0.9rem;
    color: #cccccc;
}

/* Read button */
.read-button {
    display: flex;
    justify-content: space-around;
    align-items: center;

    width: 120px;
    text-decoration: none;
    background-color: #2C2B49;
    ;
    background: #E7E6F0;
    color: #2C2B49;

    padding: 8px 16px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.read-button a p {
    color: #2C2B49;
}

.read-button:hover {
    background: #d9d6d6d1;
}


/* тест */
/* Затемненный фон модального окна */
.modal {

    position: absolute;
    /* z-index: 10; */
    top: 100px;
    left: 0;
    width: 100%;
    /* height: 100%; */
    background-color: rgba(0, 0, 0, 0.7);
    /* Полупрозрачный черный фон */
    animation: fadeIn 0.3s;
    display: flex;
    /* Для центрирования содержимого */
    justify-content: center;
    align-items: center;
    display: none;
    /* Изначально скрыто */
}

/* Стили самого окна модального контента */
.modal-content {
    position: relative;
    width: 60%;
    max-width: 700px;
    padding: 20px;
    background-color: white;
    /* Белый фон для контента */
    border-radius: 10px;
    /* Скругленные углы */
    border: 2px solid #333;
    /* Четкая граница */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
    /* Тень для эффекта поднятия */
    animation: slideDown 0.4s;
    background: linear-gradient(180deg, #312E52 0%, #34344A 100%);
    z-index: 99999999999999999999999;
    margin: 100px;
}

/* Кнопка закрытия */
.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    color: white;
    /* Цвет кнопки закрытия */
    cursor: pointer;
}

/* Анимация для плавного появления */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Изображение превью в модальном окне */
#modal-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
}


.linkNews {
    color: white;
}

.newsHeader {
    background: linear-gradient(135deg, #1B1D2C 0%, #13102F 100%);
}

.news-card:nth-child(4) img {
    object-fit: inherit;
}


.text-carouselH {
    opacity: 0;
    animation: fadeInUp 3s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fifthBlock {
    position: relative;
    background: linear-gradient(0deg, rgba(18, 20, 33, 0.8) 0%, rgba(46, 45, 70, 0.8) 100%);
}

.fifthBlock .box {
    margin: 0;
    padding: 0;
    max-width: 100%;


}

.fifthBlock .fifthStats {
    margin-top: 0;
}

.fifthBlock .fourthBlockTitle {
    background: #D7D8E7;
    background-clip: text;
    color: transparent;
    position: absolute;
    top: 100px;
    left: 5%;
    z-index: 9999999999;
}


.fifthBlock .stat-itemTextBlock {
    padding: 15%;
    position: relative;
    top: 20%;
}


.fifthBlock .stat-item {
    /* align-content: center; */
    background: round;
    height: 900px;
}

/* .fifthBlock .stat-item:nth-child(1) {
    background-image: url('../images/Group_141_(6).png');
}

.fifthBlock .stat-item:nth-child(2) {
    background-image: url('../images/Group 141 (5).png');
}

.fifthBlock .stat-item:nth-child(3) {
    background-image: url('../images/Group 141 (7).png');
} */

.fifthBlock .stat-item:nth-child(2) {
    position: relative;
    /* Устанавливает контекст для позиционирования псевдоэлементов */
}

.fifthBlock .stat-item:nth-child(2)::before,
.fifthBlock .stat-item:nth-child(2)::after {
    content: '';
    position: absolute;
    width: 3px;
    /* Толщина линии */
    height: 500px;
    /* Высота линии */
    background-color: #8B91A9;
    /* Цвет линии */
    top: 50%;
    /* Центрирует линию по вертикали */
    transform: translateY(-50%);
    /* Сдвигает линию вверх на 50% её высоты */
}

.fifthBlock .stat-item:nth-child(2)::before {
    left: 0;
    z-index: 9;
    /* Позиция слева (можно настроить отступ) */
}

.fifthBlock .stat-item:nth-child(2)::after {
    right: 0;
    /* Позиция справа (можно настроить отступ) */
}

.fifthBlock .stat-text {
    font-family: Satoshi;
    font-size: 18px;
    font-weight: 400;
    line-height: 24.3px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    padding-top: 20px;
    color: white;


}

.fifthBlock .stat-number {
    font-family: Satoshi;
    font-size: 23px;
    font-weight: 500;
    line-height: 33.75px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: white;

}

.fifthBlock .stat-number::after {
    content: '';
    display: block;
    height: 6px;
    background-color: #7477AA;
    border-radius: 5px;
}

.fifthBlock .stat-item:nth-child(1) .stat-number::after {
    width: 120px;

}

.fifthBlock .stat-item:nth-child(2) .stat-number::after {
    width: 220px;
}

.fifthBlock .stat-item:nth-child(3) .stat-number::after {
    width: 110px;
}

.fifthBlock .stat-item {
    overflow: hidden;
    position: relative;
    padding-top: 0;
}

.fifthBlock .stat-item img {
    position: absolute;
    left: 0;
    width: 100%;
    left: 0;
    height: 100%;
}




@keyframes moveSlowAfterFast {
    10% {
        transform: translateX(-100px);
        /* Начальное смещение */
    }

    20% {
        transform: translateX(-30px);
        /* Быстрое приближение к целевой позиции */
    }


    100% {
        transform: translateX(0);
        /* Медленное завершение движения */
    }
}

.fifthBlock .slow-move-animation{
    animation: moveSlowAfterFast 10s ease-in-out forwards;
    /* 10 секунд для более медленного завершения */
}



.fourthBlock .fourthBlockTitle {
    color: #FFFFFF;

}

.fourthBlock {
    background: radial-gradient(47.44% 84.64% at 52.56% 53.07%, #E2E2E2 0%, #C0C5EA 100%)
        /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
    ;
    min-height: 100vh;

}

.fourthBlockContent {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.fourthBlock .aboutUs .subtitle {
    padding: 50px;
    padding-left: 150px;
}

.fourthBlock .subtitle {
    padding-top: 20px;
}

.fourthBlock .fourthBlockContent .fourthBlockImgBlock {
    display: flex;
    flex-direction: row;
    padding-bottom: 50px;
    padding-left: 150px;
}

.fourthBlock h3 {
    padding-left: 150px;
    padding-top: 130px;

}

.fourthBlock h2 {
    padding-top: 50px;
    padding-bottom: 45px;

}

.fourthBlock .aboutUs:nth-child(2),
.fourthBlock .aboutUs:nth-child(3),
.fourthBlock .aboutUs:nth-child(2) .subtitle,
.fourthBlock .aboutUs:nth-child(3) .subtitle {
    color: #60668D;
}

.fourthBlock .aboutUs:nth-child(1) .subtitle {
    padding-top: 0;
}

.fourthBlock .fourthBlockTitle {
    padding-left: 10%;
}


.aboutUs {
    position: relative;
    overflow: hidden;
}

.aboutUs::before {
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(0deg, rgba(18, 20, 33, 0.2) 0%, rgba(46, 45, 70, 0.2) 100%);
    /* Задайте нужный цвет */
    transition: width 2s ease-in-out;
    z-index: -1;
    /* Убедитесь, что фон находится позади текста */
}

.aboutUs.active::before {
    width: 100%;
}

/* Анимация для четвёртого блока (справа налево) */
.aboutUs:nth-child(4)::before {
    left: auto;
    right: 0;
    background: linear-gradient(0deg, rgba(18, 20, 33, 0.2) 0%, rgba(46, 45, 70, 0.2) 100%);
    /* Изменённое направление градиента */
}


.fourthBlock .box {
    max-width: 100%;
    padding: 0;
}

.fourthBlock {
    position: relative;
}

.fourthBlock .fourthBlockContentMainImages {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    /* Если нужно, чтобы изображение оставалось в рамках контейнера */
    height: auto;
    /* Сохранение пропорций */
    z-index: 99999999996;
}


.reverseBlock .fourthBlockTitle::after {
    content: '';
    display: block;
    height: 6px;
    background-color: #7477AA;
    border-radius: 5px;
    width: 270px;
}







.commitment-block {
    /* display: flex;
    justify-content: center;
    align-items: center; */
    width: 100%;
    height: 100vh;
    /* Задайте минимальную высоту блока */
    background: radial-gradient(47.44% 84.64% at 52.56% 53.07%, #E2E2E2 0%, #C0C5EA 100%)
        /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
    ;
    position: relative;
    overflow: hidden;
}

.commitment-content {
    display: flex;
    height: 100%;
    /* width: 80%; /* Ширина всего контента */
    /* max-width: 1200px; */
}

.commitment-text {
    width: 40%;
    color: #6b6b6b;
    /* Цвет текста */
    background: linear-gradient(0deg, rgba(18, 20, 33, 0.2) 0%, rgba(46, 45, 70, 0.2) 100%);
    padding: 100px 5% 100px 5%;
    box-sizing: border-box;
}

.commitment-text h2 {
    font-family: Aeonik TRIAL;
    font-size: clamp(16px, 2.5vw, 28px);
    font-weight: 400;
    line-height: 33.6px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #3C449C;
    text-wrap: nowrap;

}

.commitment-text h2::after {
    content: '';
    display: block;
    height: 4px;
    background-color: #8083B8;
    border-radius: 5px;
    width: 101%;

}

.commitment-text p {
    padding-top: 50px;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
    color: #4B5280;

}

.commitment-text .star-icon {
    width: 20px;
    height: 20px;
    background: url('star-icon.png') no-repeat center;
    background-size: contain;
    margin-top: 10px;
}



.commitment-image{
    width: 100%;
  
}

.commitment-image img {
    width: 60%;
    position: absolute;
    bottom: 0;
    box-sizing: border-box;

}

.commitment-text .stars-container {
    display: flex;
    gap: 10px; /* Расстояние между звездами */
    margin-top: 20px;
}

.commitment-text .stars-container img {
    width: 70px; /* Размер звезды */
    height: 70px;
    opacity: 0; /* Изначально звезды невидимы */
    transform: translateX(-100px); /* Изначальное положение за пределами экрана */
    transition: all 1s ease-in; /* Плавная анимация для transform и opacity */
}

.commitment-text .stars-container img.visible {
    opacity: 1; /* Звезда становится видимой */
    transform: translateX(0); /* Звезда перемещается на своё место */
}

.commitment-text .stars-container img:nth-child(1) {
    transition-delay: 0s; /* Первая звезда появляется сразу */
}

.commitment-text .stars-container img:nth-child(2) {
    transition-delay: 2s; /* Вторая звезда через 2 секунды */
}

.commitment-text .stars-container img:nth-child(3) {
    transition-delay: 4s; /* Третья звезда через 4 секунды */
}

.commitment-text .stars-container img:nth-child(4) {
    transition-delay: 6s; /* Четвёртая звезда через 6 секунд */
}

.commitment-text .stars-container img:nth-child(5) {
    transition-delay: 8s; /* Пятая звезда через 8 секунд */
}




.FirBlockCommitment{
    background: linear-gradient(360deg, #1B1D2C 0%, #13102F 102.32%);

}

.FirBlockCommitment .commitment-text{
    width: 30%;
}
.FirBlockCommitment .commitment-image{
    width: 70%;

}

.FirBlockCommitment .commitment-image img{
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    position: relative;
}

.FirBlockCommitment .calculatorBlockTitle{
    color: white;
    position: relative;

    z-index: 99;

}

.FirBlockCommitment .FirBlockCommitmentBachgroundImage{
    width: 60%;
    position: absolute;
    height: 100%;
    z-index: 5;
}


.FirBlockCommitmentLogoHtsImage{
    position: absolute;
    bottom: 0;
    z-index: 9;
    width: 100px;
}

.FirBlockCommitment p{
    color: white;
    position: absolute;
    width: 30%;
    z-index: 99;
}

.FirBlockCommitment h2::after{
    max-width: 240px;
}




.calculatorBlock .calculatorBlockTitle::after {
    content: '';
    display: block;
    height: 4px;
    background-color: #8083B8;
    border-radius: 5px;
    max-width: 581px;
}

.calculatorBlock .calculatorBlockTitle {
    font-family: Aeonik TRIAL;

    font-size: 28px;
    font-weight: 800;
    line-height: 33.6px;
    text-align: left;
    color: #7E72AF;
}


.calculatorBlock {
    background-image: url('../images/Group 141 (9).png');
    background-repeat: round;
    height: calc(100vh + 100px)
}


.calculatorBlock .oem-calculator {
    /* width: 811px; */
    padding: 60px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(214, 230, 255, 0.5) 0%, rgba(196, 191, 255, 0.5) 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    font-family: Arial, sans-serif;
}

.calculatorBlock .form-row {
    display: flex;
    gap: 20px;
    /* Расстояние между колонками */
    align-items: flex-start;
    /* Выравнивание по верху */
}

.calculatorBlock .form-column {
    flex: 1;
    /* Все колонки занимают равное пространство */
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Расстояние между полями внутри колонки */
}

.calculatorBlock .button-column {
    flex: none;
    /* Кнопка занимает свою ширину */
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.calculatorBlock label {
    font-size: 14px;
    margin-bottom: 8px;
    color: #6b6b6b;
    text-wrap: nowrap;
}

.calculatorBlock select,
.calculatorBlock input {
    width: 100%;
    /* Поля занимают всю ширину своей колонки */
    height: 45px;
    /* Одинаковая высота для всех полей */
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #BBC6E4;
    box-shadow: 0px 4px 4px 0px #AEB6D8 inset;
    color: #6b6b6b;
}

.calculatorBlock input[readonly] {
    background-color: #BBC6E4;
    color: #7a7a7a;
}

.calculatorBlock button {
    height: 45px;
    /* Высота кнопки такая же, как у полей */
    padding: 10px 20px;
    font-size: 14px;
    color: white;
    background: linear-gradient(180deg, #BBC6E4 0%, #A2ADDE 100%);
    box-shadow:
        inset 0px -2px 1.8px 0px #B0BDF0,
        0px 0px 1.3px 3px #B9BED6;

    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;

}

.calculatorBlock button:hover {
    background: linear-gradient(180deg, #BBC6E4 0%, #8C9ADB 100%);
    box-shadow:
        inset 0px -4px 1.8px 0px #7483C2,
        0px 0px 1.3px 3px #B9BED6;

}

.calculatorBlock button:active {
    background: linear-gradient(180deg, #97A2BF 0%, #707EBA 100%);
    box-shadow:
        inset 0px -4px 1.8px 0px #7483C2,
        0px 0px 1.3px 3px #B9BED6;
}



.calculatorBlock .button-column {
    flex: none;
    /* Кнопка занимает свою ширину */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* Центрируем кнопку по вертикали относительно высоты поля */
    margin-top: 20px;
    /* Поднимите или опустите кнопку, чтобы выровнять её по полю ввода */
}


.calculatorBlock .box {
    height: 100%;
}

.calculatorBlock .calculatorBlockContent {
    display: flex;
    justify-content: space-between;
    height: 100%;
    padding-top: 6%;
    padding-right: 4.5%;
}

.calculatorBlockContentLeft {
    width: 50%;
}

.calculatorBlockContentRight {
    width: 49%;
}

.calculatorBlock .calculatorBlockContentLeft p {
    font-family: Aeonik TRIAL;
    font-size: 36px;
    font-weight: 300;
    line-height: 41.04px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    background: linear-gradient(180deg, #376EA1 7.69%, #74679C 92.82%);
    background-clip: text;
    color: transparent;

}

.calculatorBlockContentLeft {
    max-width: 45%;
    height: 280px;
    margin: 0 auto;
    padding: 50px 100px 50px 100px;
    background: transparent;
    /* Прозрачный фон */
    border: 6px solid;
    border-image-source: linear-gradient(120.89deg, #8BAAD8 31.29%, #FFC4C4 100.88%);
    border-image-slice: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
}

.calculatorBlockContentLeft .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: 0;
}

.text {
    flex: 1;
    padding-right: 20px;
}

.text h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.text p {
    font-size: 18px;
    color: #666;
    line-height: 1.5;
}

.icon-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.calculatorBlockContentLeft .icon-calculator {
    width: 200px;
    height: auto;
    position: absolute;
    bottom: -75px;
    left: -170px;
}

.calculatorBlockContentLeft .icon-arrow {
    width: 44px;
    height: auto;
    position: absolute;
    bottom: -30px;
    right: -80px;
}


/* .FirBlockCommitmentOpacingBachground{
    background: linear-gradient(0deg, rgba(16, 17, 29, 0.8) 0%, rgba(32, 31, 53, 0.8) 100%);

} */

.FirBlockCommitmentGearsImage{
    position: absolute;
    right: 40%;
    z-index: 9;
    height: 100%;
}


@keyframes moveSlowAfterFaster {
    10% {
        transform: translateX(100px);
        /* Начальное смещение */
    }

    20% {
        transform: translateX(80px);
        /* Быстрое приближение к целевой позиции */
    }


    100% {
        transform: translateX(0);
        /* Медленное завершение движения */
    }
}

.FirBlockCommitment .slow-move-animationLast{
    animation: moveSlowAfterFaster 10s ease-in-out forwards;
    /* 10 секунд для более медленного завершения */
}



@media screen and (max-width: 700px) and (max-height: 1024px) {

    .fourthBlock .fourthBlockTitle{
        padding-left: 5%;
    }
    
    .commitment-text h2{
        font-size: 28px;
        text-wrap-mode: wrap;
    }

    .FirBlockCommitment .commitment-text p{
       padding-left: 7%;
       padding-right: 15%;
  
  }

  .aboutUs .subtitle{
    padding: 8%
  }

  .fourthBlock.section .aboutUs .subtitle{
    padding: 12%;
  
  }
  
  .FirBlockCommitment .calculatorBlockTitle{
    position: absolute;
    text-wrap-mode: nowrap;
  }

  .FirBlockCommitment .commitment-image img{
    object-fit: cover;
  }

  .ourCommitmentBlock .calculatorBlockTitle{
    padding-right: 2%;
  }

  .ourCommitmentBlock .ourCommitmentBlockPar{
    padding: 8%;
  }

}