@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Open+Sans:wght@400;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
/*    outline: 4px solid green !important;*/
}

body {
    font-family: 'Roboto', 'Open Sans', sans-serif;
    scroll-behavior: smooth;
}

::selection {
    background: #60d8ff;
    color: #ffffff;
    border-radius: 3px;
}

/* Стили для WebKit-браузеров */
::-webkit-scrollbar {
    width: 12px;                    /* Ширина скроллбара */
}

::-webkit-scrollbar-track {
    background: #ffffff;            /* Цвет фона трека */
    border-radius: 10px;            /* Закругленные углы */
}

::-webkit-scrollbar-thumb {
    background-color: #00a2d4;      /* Цвет "ползунка" */
    border-radius: 10px;            /* Закругленные углы ползунка */
    border: 3px solid #00a2d4;      /* Отступ внутри трека */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #107b9c;      /* Цвет ползунка при наведении */
}

/* Стили для углового скроллбара (когда есть и горизонтальный, и вертикальный скроллбары) */
::-webkit-scrollbar-corner {
    background: #fff;            /* Цвет угла */
}

header {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 98%;
    border-radius: 50px;
    margin: 0 10px;
    height: 91px;
    align-items: center;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;

}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 0 20px;
    height: 91px;
    row-gap: 50px;

}

.logo {
    font-size: 36px;
    font-weight: 600;
    gap: 25px;
}

.logo a{
    text-decoration: none;
    color: black;
    transition: color 0.3s ease;
}

.logo a:hover {
    color: #68dcff; /* Цвет текста при наведении */
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav ul li a {
    text-decoration: none;
    color: black;
    font-size: 20px;
    font-weight: 500;
    transition: color 0.3s ease
}


nav ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #68dcff; /* Цвет подчеркивания */
    bottom: 0;
    left: 0;
    transition: width 0.3s ease;
}

nav ul li a:hover {
    color: #68dcff; /* Цвет текста при наведении */
}

.menu-toggle {
    display: none;
    font-size: 24px;
    color: #333333; /* Темно-серый цвет иконки меню */
    cursor: pointer;
}

.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background-color: #ffffff; /* Белый фон для бокового меню */
    color: #333333; /* Темно-серый текст */
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    display: none;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
    z-index: 1000;
}

.side-menu.active {
    transform: translateX(0);
    border-left: 1px groove rgba(214, 214, 214, 0.7);
}

.nav-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.nav-list li {
    margin: 20px 0;
}

.nav-list li a {
    color: #333333; /* Темно-серый текст для ссылок */
    text-decoration: none;
    font-size: 18px;
}

.close-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: none;
    border: none;
    color: #333333; /* Темно-серый цвет крестика */
    font-size: 24px;
    cursor: pointer;
}

.menu-toggle,
.close-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: #68dcff; /* Темно-серый цвет иконки */
    transition: color 0.3s ease, transform 0.2s ease; /* Переходы для цвета и трансформации */
}


.contact {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 5px;
    margin-left: 40px;
}

.phone {
    color: black;
    text-decoration: none;
    font-size: 24px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.phone:hover {
    color: #68dcff; /* Цвет текста при наведении */
}

.button {
    background-color: #00C2FF;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #00a2d4;
}



/* Стилизуем наклонную фигуру и переворачиваем ее */
.slanted-shape {
    width: 100%;         /* Полная ширина экрана */
    height: 800px;          /* Половина высоты экрана */
    background-color: #60D8FF;  /* Голубой цвет фона */
    clip-path: polygon(100.00% 6.54%,83.29% 34.52%,100.00% 74.79%,0.00% 67.28%,0.00% 49.04%,51.33% 28.40%);
    position: absolute;
    padding: 0;
    z-index: -1;
    top: 78px;
}

.slanted-shape_mob {
    width: 100%;         /* Полная ширина экрана */
    height: 800px;          /* Половина высоты экрана */
    background-color: #60D8FF;  /* Голубой цвет фона */
    clip-path: polygon(100.00% 6.54%,83.29% 34.52%,100.00% 74.79%,0.00% 67.28%,0.00% 49.04%,51.33% 28.40%);
    position: absolute;
    padding: 0;
    z-index: -1;
    top: 78px;
}

.hero  {
    display: flex;
    justify-content: space-between;
    padding: 50px ;
    height: 717px;
    gap: 300px;
    padding-top: 130px;
}



.hero-text h1 {
    margin-top: 30px;
    font-size: 64px;
    line-height: 64px;
    color: #212121;
    font-weight: 600;
    z-index: 10;
}

.hero-text .highlight {
    color: #68DCFF;
}

.cards-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    width: 620px;
    margin-bottom: 45px;
    margin-top: 30px;
}

.card-site {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.403);
    padding: 20px;
    width: 620px;
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 140px;
    height: 185px;
    transition: transform 0.3s ease;
}

.card-site:hover{
    transform: scale(1.05);
}

.card-site h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

.card-site p {
    font-size: 16px;
    margin-bottom: 36px;
    font-weight: 400;
}

.card-site a {
    text-decoration: none;
    font-weight: 300;
    color: black;
}

.card-site img {
    width: 141px;
    height: 141px;
    top: 20px;
    right: 20px;
}

.card {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.403);
    padding: 20px;
    width: 300px;
    position: relative;
    transition: transform 0.3s ease;
    height: 220px;
}

.card:hover{
    transform: scale(1.05);
}

.card-head{
    display: flex;
}


.server{
    width: 57px;
    height: 56px;
    margin-top: 10px;
    }

.card h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

.card p {
    font-size: 16px;
    margin-bottom: 20px;
    height: 8vh;
}

.card a {
    text-decoration: none;
    color: black;
    font-weight: 300;
}


.telegram_img{
    width: 57px;
    height: 56px;
    margin-top: 10px;
}

.hero_mobile{
    display: none;

}

.content_mobile {
  padding: 20px;
  max-width: 600px;
  margin: auto;
}

/* Внешний контейнер для фиксации */
.cards-section_mobile {
  position: relative;
  height: 300vh; /* Увеличиваем высоту секции для прокрутки */
  overflow: visible;
  view-timeline-name: --cards-timeline;
  view-timeline-axis: block;
}

/* Sticky контейнер */
.cards-container_mobile {
  position: sticky;
  top: 0;
  height: 31%;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-top: 100px;
}

/* Карточки */
.card-site_mobile {
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.403);
padding: 20px;
width: 43vh;
position: relative;
display: flex;
justify-content: space-between;
height: 245px;
transition: transform 0.3s ease;
margin: 25px 20px;
}

.card-site_mobile:hover{
transform: scale(1.05);
}

.site-inf-header_mobile{
    display: flex;
    justify-content: space-between;
    height: 75px;
    margin-bottom: 10px;
}

.card-site_mobile h2 {
font-size: 20px;
padding-top: 12px;
}

.card-site_mobile p {
font-size: 16px;
height: 80px;
font-weight: 400;
}

.card-site_mobile a {
text-decoration: none;
font-weight: 300;
color: black;
}

.card-site_mobile img {
width: 106px;
height: 106px;
top: -20px;
position: relative;
}

.hero_mob2{
    display: none;
}

.card_mobile {
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.403);
padding: 20px;
width: 43vh;
position: relative;
transition: transform 0.3s ease;
height: 245px;
margin: 25px 20px;
}

.card_mobile:hover{
transform: scale(1.05);
}

.card-head_mobile{
display: flex;
}


.server_mobile{
width: 106px;
height: 83px;

}

.telegram_img_mobile {
    width: 106px;
    height: 83px;
}

.card_mobile h2 {
font-size: 20px;
height: 92px
}

.card_mobile p {
font-size: 16px;
margin-bottom: 47px;
height: 36px;
}

.card_mobile a {
text-decoration: none;
color: black;
font-weight: 300;
}

/* Контейнер для всех карточек */
.cards-wrapper_mobile {
  display: flex;
  width: calc(43vh * 3 + 30px * 3); /* Ширина всех карточек с отступами */
  animation: move 1 linear forwards;
  animation-timeline: --cards-timeline;
  animation-range: contain 0% contain 100%;
  will-change: transform;
}

@keyframes move {
  to {
    transform: translateX(calc(-100% + 100vw)); /* Перемещает контейнер карточек влево */
  }
}

.hero_mob2{
    margin-top: 140px;
    margin-bottom: 80px;
}


.card_mob2{
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.403);
    padding: 15px;
    width: 86vw;
    position: relative;
    transition: transform 0.3s ease;
    height: 42.5lvh;
    margin: 25px auto;
}

.card_mob2:hover{
transform: scale(1.05);
}



.card_mob2 h2{
    font-weight: 500;
    margin-bottom: 2lvh;
}

.card_mob2 img{
    width: 106px;
    height: 106px;
}

.card_mob2_inf a{
    text-decoration: none;
    color: black;
    font-weight: 400;
    font-size: 19px;
}


#first_link{
    padding: 13px 0;

}

#second_link{
    padding: 13px 0;
    border-top: 2px solid rgba(56, 54, 54, 0.41); /* Верхняя граница */
    border-bottom: 2px solid rgba(56, 54, 54, 0.41); /* Нижняя граница */
}

#third_link{
    padding: 13px 0;


}


.card-stack{
    display: none;
}






.why{
    height:auto;
}


.card-scroll-container{
    margin-top: 50px;
    margin-bottom: 180px;
    display: flex;
    flex-direction: column;
    position: relative;
    gap:100px;
}

.card-scroll {
    background-color: white;
    border-radius: 15px;
    border: 2px solid rgba(0, 0, 0, 0.571);
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.403); */
    padding: 20px;
    width: 540px;
    position: relative;
    margin-left: 100px;
    transition: transform 0.3s ease;
    height: auto;
    margin-top:114px;
}

.card-scroll_2 {
margin-top:155px;
}

.card-scroll_3 {
    color: #fff;
    background-color: #68DCFF;
    border: none;
    margin-top:155px;
}


.card-scroll:hover {
    transform: scale(1.05);
}

.root{
    color: #0000006B;
}

.card-scroll h3 {
    font-size: 26px;
    margin-bottom: 10px;
    font-weight: 400;
}

.card-scroll p {
    font-size: 18px;
}

.card-scroll img:not(.card_why3) {
    width: 80px;
    height: auto;
    position: absolute;
    top: 20px;
    right: 15px;
}

.card_why3{
    width: 100px;
    height: auto;
    position: absolute;
    top: 20px;
    right: 15px;
}

.why-txt {
    width: 40%;
    padding: 20px;
    position: sticky;
    top: 0;
    float: right;
    margin-right: 100px;
    padding-top: 101px
}

.why-txt h2{
    color: #68DCFF;
    font-weight: 500;
    font-size: 46px;
}

.why-txt p{
    height: 90px;
    width: 550px;
    font-size: 26px;
}



.card-scroll-container h2, .why-txt h2 {
    margin-top: 0;
}

.slanted-shape_ss1{
    display: none;
}

.slanted-shape_ss2{
    display: none;
}



.slanted-shape_s {
    width: 444px;         /* Полная ширина экрана */
    height: 100%;          /* Половина высоты экрана */
    background-color: #60D8FF;  /* Голубой цвет фона */
    clip-path: polygon(21.86% 0.00%,57.56% 0.00%,26.89% 16.01%,54.32% 22.75%,0.00% 42.99%,28.12% 24.54%,0.00% 17.95%);
    position: absolute;
    padding: 0;
    z-index: -2;
    margin-left: 900px;
    margin-top: 100px;
}

.slanted-shape_sm {
    display: none;
}

.steps {
    display: none;
    margin-bottom: 60px;
  }

  .steps h2{
    font-weight: 500;
    font-size: 32px;
    margin-bottom: 40px;
    margin-left: 20px;
  }

  .highlight {
    color: #68DCFF;
}

  .step {
    position: relative;
    margin-bottom: 5px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 10px;

  }

  .step-number {
    width: 40px;
    height: 40px;
    border: 2px solid #000;
    border-radius: 50%;
    font-size: 20px;
    background-color: white;
    justify-content: center;
    align-items: center;
    display: flex;

  }

  .step-number.highlighted {
    background-color: #00bfff;
    color: white;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .step-title {
    font-size: 18px;
    margin: 10px 0;
  }

  .step-description {
    display: grid;
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-bottom: 20px;
  }



  .step:last-child:before {
    display: none;
  }





.footer:not(.footer-nav) {
    background-color: #242424;
    padding: 0 40px 40px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 15px 15px 0 0;

}

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

.footer-logo h2 {
    font-size: 88px;
    font-weight: bold;
    color: #fff;
    height: 110px;
    margin-bottom:15px;
}

.footer-logo p {
    font-size: 14px;
    color: #BBBBBB;
}

.cont{
    width: 46%;
}


.footer-nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin-top: 37px;
    margin-bottom: 37px;
}

.footer-nav a {
    text-decoration: none;
    color: #BBBBBB;
    font-size: 16px;
    transition: all 200ms ease;
}

.footer-nav a:hover {
    color: #d5d5d5;
}

.footer-social a {
    margin-right: 20px;
}

.footer-social img {

    width: 30px;
    height: 30px;
}


.stages .highlight {
    color: #68DCFF;
}

.stages h2{
 padding: 55px;
 font-size: 55px;
 font-weight: 500;
 padding-bottom: 30px;
 }

 svg {
    width: 100%;
    height: 90lvh;
}

.element-animation{
    opacity: 0;
}

@keyframes draw {

    to {
        stroke-dashoffset: 0;
    }
}

.element-animation.element-show{
    opacity: 1;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 8s ease forwards;
}

.txt-animation{
    opacity: 0;
    transform: translateY(20px);
}

.txt-animation.txt-show{
    opacity: 1;
    transform: translateY(0px);
    transition: all 1.5s;
}

.status-anim{
    opacity: 0;
    transition: opacity 3s ease;
}

.status-anim.status-show{
    opacity: 1;

}


.technologies-section {
    padding: 40px 20px;
    background-color: transparent;
    height: 1000px;
}

.technologies-header {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.technologies-header h2 {
    font-size: 55px; /* Увеличенный шрифт для заголовка */
    font-weight: 500; /* Более жирный текст */;
    margin-bottom: 30px;
    text-align: left;
    padding: 55px;
}

.technologies-header .highlight {
    color: #68DCFF;
}

.technologies-content {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.technologies-description {
    max-width: 50%;
    margin-left: 80px;
}

.description-item {
    margin-bottom: 25px;
    padding-left: 10px;
    border-left: 4px solid #68dcff; /* Линия слева для акцента */
}

.description-item h3 {
    font-size: 1.5rem; /* Увеличенный размер шрифта для подзаголовков */
    font-weight: 700;
    margin-bottom: 10px;
    color: #68dcff; /* Цвет подзаголовков */
}

.description-item p {
    font-size: 1.2rem;
    margin: 0;
    line-height: 1.6;
}

.code-card {
    width: 40%;
    padding: 0 20px;
    background-color: #1e1e1e;
    border-radius: 10px;
    color: #68dcff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2rem;
    line-height: 1.5;
    height: 1%;
    overflow-y: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-top: -60px;
    margin-right: 40px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.403);
    margin-top: 1px;

}

.dots{
    text-align: center;
    white-space: normal;
    line-height: 0;
    display: flex;
}
.dot {
    height: 25px;
    width: 25px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
}

.red{
    background-color: #ff5f5a;
}

.orange{
    background-color: #ffbe2e;
}

.green{
    background-color: #2aca44;
}

pre {
    margin: 0;
    white-space: pre-wrap;
}

/* Секция с контактной информацией */
.conection-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    background-color: #f5f5f5; /* Светлый фон */
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 30px 20px;
}

.conection {
    text-align: center;
    max-width: 600px;
    width: 81%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.403);
    border-radius: 15px;
    padding: 12px;
    margin: auto;
    margin-bottom: 100px;
}

.conection h2 {
    font-size: 36px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 20px;
}

.conection p {
    font-size: 20px;
    color: #333333;
    margin: 10px 0;
}

.conection a {
    color: #68dcff; /* Цвет ссылки */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.conection a:hover {
    color: #00a2d4; /* Цвет при наведении */
}

.button_conect {
    font-weight: bold;
    color: white;
    border-radius: 2rem;
    cursor: pointer;
    width: 95.02px;
    height: 42.66px;
    border: none;
    background-color: #00C2FF;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 19vh;
    margin-top: 3vh;
}

.button_conect .span-mother {
  display: flex;
  overflow: hidden;
}

.button_conect:hover .span-mother {
  position: absolute;
}

.button_conect:hover .span-mother span {
  transform: translateY(1.2em);
}

.button_conect .span-mother span:nth-child(1) {
  transition: 0.2s;
}

.button_conect .span-mother span:nth-child(2) {
  transition: 0.3s;
}

.button_conect .span-mother span:nth-child(3) {
  transition: 0.4s;
}

.button_conect .span-mother span:nth-child(4) {
  transition: 0.5s;
}

.button_conect .span-mother span:nth-child(5) {
  transition: 0.6s;
}

.button_conect .span-mother span:nth-child(6) {
  transition: 0.7s;
}

.button_conect .span-mother span:nth-child(7) {
  transition: 0.8s;
}

.button_conect .span-mother span:nth-child(8) {
  transition: 0.9s;
}

.button_conect .span-mother span:nth-child(9) {
  transition: 1.0s;
}



.button_conect .span-mother2 {
  display: flex;
  position: absolute;
  overflow: hidden;
}

.button_conect .span-mother2 span {
  transform: translateY(-1.2em);
}

.button_conect:hover .span-mother2 span {
  transform: translateY(0);
}

.button_conect .span-mother2 span {
  transition: 0.2s;
}

.button_conect .span-mother2 span:nth-child(2) {
  transition: 0.3s;
}

.button_conect .span-mother2 span:nth-child(3) {
  transition: 0.4s;
}

.button_conect .span-mother2 span:nth-child(4) {
  transition: 0.5s;
}

.button_conect .span-mother2 span:nth-child(5) {
  transition: 0.6s;
}

.button_conect .span-mother2 span:nth-child(6) {
  transition: 0.7s;
}

.button_conect .span-mother2 span:nth-child(7) {
  transition: 0.8s;
}

.button_conect .span-mother2 span:nth-child(8) {
  transition: 0.9s;
}

.button_conect .span-mother2 span:nth-child(9) {
  transition: 1.0s;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .conection-section {
        padding: 40px 15px;
    }

    .conection h2 {
        font-size: 28px;
    }

    .conection p {
        font-size: 18px;
    }
}


/* Адаптивные стили */



@media (max-width: 1024px) {


    .technologies-header h2 {
        font-size: 3rem; /* Уменьшенный шрифт для планшетов */
    }

    .technologies-description {
        max-width: 100%;
    }

    .code-card {
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .technologies-header h2 {
        font-size: 2.5rem; /* Уменьшенный шрифт для мобильных устройств */
    }

    .description-item h3 {
        font-size: 1.3rem;
    }

    .description-item p {
        font-size: 1rem;
        width: 145%;
        
    }

    .technologies-description {
        max-width: 100%;
    }

    .code-card {
        width: 100%;
        margin-top: 20px;
        height: 1%; /* Высота блока */
        overflow-y: hidden; /* Вертикальная прокрутка при переполнении */
        margin-top: -60px; /* Отрицательный отступ, чтобы поднять блок выше */
    }
}

@media (max-width: 480px) {
    .technologies-header h2 {
        font-size: 40px; /* Еще меньше для маленьких экранов */
    }

    .description-item {
        margin-bottom: 15px;
    }

    .technologies-section {
        padding: 0px 20px 40px;
        background-color: transparent;
        height: 1150px;
    }

}


@media (max-width: 1280px) {
    body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }

    .container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .side-menu {
        display: flex;
    }

    .menu {
        display: none;
    }

    .contact{
        gap:3.75rem;
    }

    .menu-toggle {
        display: block;
    }

    nav ul{
        display: block;
    }

    .logo{
        font-size: 23px;
    }

    .hero{
        gap:0 ;
    }

    .card-site{
        width:99%;
        gap: 0;
    }

    .card{
        height: 75%;
        text-align: left;
        width: 47.5%;
    }

    .card-scroll{
        width: 95%;
        margin-left: 6%;
    }


    .why-txt{
        margin-right: 3%;
        width: 50%;
    }

    .why-txt p {
        height: 90px;
        width: 89%;
        font-size: 26px;
    }

    .card-scroll img:not(.card_why3) {
        width: 80px;
        height: auto;
        position: absolute;
        top: 20px;
        right: 11px;
    }

    .card_why3 {
        width: 101px;
        height: auto;
        position: absolute;
        top: 4px;
        right: 11px;
    }

    svg {
        width: 100%;
        height: 40lvh;
    }

    .footer-logo h2{
        font-size: 4rem;
    }


    .slanted-shape_s{
        width: 27rem;
        height: 81%;
        margin-left: 56%;
        margin-top: 14%;
    }
}



@media (max-width: 913px){
    body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }


    .phone, .button{
        display:none;
    }

    .hero{
        padding:3%;
        margin-top: 95px;
    }

    .card {
        height: 45%;
    }

    .hero-text h1 {
        font-size: 2.6rem;
        line-height: 3.1rem;
    }



    .why-txt p{
        height:5.6rem;
        width: 109%;
        font-size: 126%;
    }

    .card-scroll {
        width: 96%;
        margin-left: 6%;
        height: 15rem;
    }

    .card-scroll img:not(.card_why3) {
        width: 80px;
        height: auto;
        position: absolute;
        top: -10px;
        right: 11px;
    }

    .card_why3 {
        width: 101px;
        height: auto;
        position: absolute;
        top: -8px;
        right: -5px;
    }

    .side-menu {
        width: 45%;
    }

    svg {
        width: 100%;
        height: 50lvh;

    }

    .technologies-description {
        max-width: 50%;
        margin-left: 40px;
    }

    .technologies-header h2 {
        font-size: 40px;
        font-weight: 500;
        margin-bottom: 30px;
        text-align: left;
        padding: 55px 20px;
    }

    .footer-logo h2 {
        font-size: 361%;
        padding-top: 2vh;
    }

    .footer:not(.footer-nav) {
        background-color: #242424;
        padding: 0 20px 40px;
        margin-bottom: 0;
    }

    .footer-logo p {
        font-size: 13.5px;
    }


}



@media (max-width: 540px) {
    body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }

    .container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    header{
        width: 95%;
    }

    .side-menu {
        display: flex;
    }

    .menu {
        display: none;
    }

    .phone, .button{
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    nav ul{
        display: block;
    }

    .logo{
        font-size: 23px;
    }

    .slanted-shape_mob {
        clip-path: polygon(100.00% 54.41%,100.00% 88.61%,47.68% 63.30%,0.00% 67.28%,0.00% 36.75%,51.33% 28.40%);
    }

    .slanted-shape{
        display: none;
    }

    .hero-text h1 {
        font-size: 39px;
        line-height: 39px;
        margin-bottom: 50px;
        margin-top: 17px;
        padding-left: 22px;
    }

    .hero{
        display: none;
        height: auto;
        padding: 20px 15px;
        margin-top: 95px;
    }

    .cards-container{
        width: 100%;
        display: none;
    }

    .card-site {
        width: 100%;
        height: 175px;
        gap: 0;
    }

    .card-site h2 {
        font-size: 18px;
        font-weight: 500;
    }

    .card-site p {
        font-size: 15px;
        margin-bottom: 10px;
        font-weight: 400;
    }

    .card-site img {
        width: 100px;
        height: 100px;
    }

    .card{
        display: none;
    }

    .card-scroll-container{
        margin-bottom: 90px;
        width: 100%;
    }

    .hero_mobile{
        display: block;
        height: auto;
        padding: 0;
    }

    .hero_mob2{
        display: block;
        height: 62lvh;
    }


    .card_mob2 {
        background-color: white;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.403);
        padding: 15px 25px;
        width: 86vw;
        position: relative;
        transition: transform 0.3s ease;
        height: 26.5lvh;
        margin: 25px auto;
        justify-items: center;
        min-width: 335px;
        min-height: 240px;
    }

    .stack_h h3{
    color: #68DCFF;
    font-weight: 500;
    font-size: 39px;
    padding-left: 30px;
    margin-bottom: 30px;
    }


    .card-stack{
        display: block;
        margin-bottom: 150px;
    }

    .stack-cards {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5em;
    }

    .stack-cards__item {
      --space-sm: 0.75em;
      top: var(--space-sm);
      transform-origin: center top;
      background-color: #fff;
      border: 2px solid rgba(0, 0, 0, 0.571);
      border-radius: 15px;
      overflow: hidden;
      width: 85%;
      transition: transform 0.3s ease;
      padding: 20px;
    }

    .stack-cards__item:hover {
      transform: scale(1.05);
    }


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

    .card-stack h2 {
      font-size: 1.5em;
      margin: 0.5em 0;
      color: #333;

    }

    .card-stack p {
      color: #666;
    }


    .card-scroll_3 {
      color: #fff;
      background-color: #68DCFF;
      border: none;
      margin-top: 0;
    }


    .root{
      color: #0000006B;
    }

    .stack-cards__item h2 {
      font-size: 26px;
      margin-bottom: 10px;
      font-weight: 400;
    }

    .stack-cards__item p {
      font-size: 18px;
      height: auto;
    }

    .stack-cards__item img:not(.card_why3) {
      width: 80px;
      height: auto;
      position: absolute;
      top: 20px;
      right: 15px;
      top: 2px;
    }

    .card_why3{
      width: 100px;
      height: auto;
      position: absolute;
      top: -15px;
      right: 5px;
    }

    .why{
        display: none;
    }

   .why-txt{
        position: relative;
    }

    .why-txt h2{
        font-size: 36px;
    }


    .slanted-shape_ss1{
        display: block;
        width: 99%;
        height: 494px;          /* Половина высоты экрана */
        background-color: #60D8FF;  /* Голубой цвет фона */
        clip-path: polygon(100.00% 9.01%,100.00% 41.35%,0.00% 71.29%,0.00% 38.94%);
        position: absolute;
        padding: 0;
        z-index: -3;
        padding-top: 330%;
    }

    .slanted-shape_ss2{
        display: block;
        width: 99%;
        height: 494px;          /* Половина высоты экрана */
        background-color: #60D8FF;  /* Голубой цвет фона */
        clip-path: polygon(100.00% 18.68%,100.00% 53.38%,0.00% 37.95%,0.00% 0.00%);
        position: absolute;
        padding: 0;
        z-index: -3;
        padding-top: 114%;
    }

    .slanted-shape_s {
        display: none;
    }

    .slanted-shape_sm{
        display: block;
        width: 341px;
        height: 341px;          /* Половина высоты экрана */
        background-color: #60D8FF;  /* Голубой цвет фона */
        clip-path: polygon(71.17% 1.97%,61.00% 41.27%,98.00% 59.92%,62.17% 62.73%,65.89% 100%,50% 70%,8.23% 100%,35.47% 54.31%,18.02% 6.50%,45.95% 33.56%);
        position: absolute;
        padding: 0;
        z-index: -3;
    }

    .stages{
    display: none;
    }

    svg {
        width: 100%;
        margin-left: -2vh;
        min-height: 428px;
    }

    .steps{
        display: block;
    }

    .step {
        margin-bottom: 10px;
        justify-content: normal;
        margin-left: 40px;
    }

    .step-number {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }

    .step-title {
        font-size: 21px;
    }

    .step-description {
        font-size: 12px;
        padding: 0 50px;
        font-size: 20px;
        text-align: left;

    }

    .technologies-content {
        flex-direction: column;
    }

    .technologies-header h2 {
        padding: 0;
        font-size: 33px;
    }

    .technologies-description {
        margin-left: 0
    }


    .code-card{
        height: 1%;
        width: 100%;
        margin-top: 1vh;
        margin-right: 0;
    }


    .footer1{
        padding: 0 35px;
    }

    .footer-content{
        display: block;
    }

    .footer-logo h2{
        font-size: 38px;
        margin-top: 10px;
        height: 70px;
    }

    .footer-logo p{
        font-size: 16px;
    }


    .cont{
        width: 295px;
    }

    .footer-nav{
        width: 294px;
    }

    .footer-nav ul {
        gap: 10px;
        width: 294px;
    }


}

@media (max-width: 376px) {

    .hero_mob2 {
        display: block;
        height: 72lvh;
        max-height: 500px;
    }

    .card_mob2 {
        background-color: white;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.403);
        padding: 15px 20px;
        width: 86vw;
        position: relative;
        transition: transform 0.3s ease;
        height: 37.5lvh;
        margin: 25px auto;
        min-height: 255px;
        min-width: 320px;
    }


    .cards-container_mobile {
        position: sticky;
        top: 0;
        height: 40%;
        overflow-x: hidden;
        overflow-y: hidden;
        padding-top: 100px;
    }

    svg {
    width: 100%;
    margin-left: -2vh;
    }
}

@media (max-width: 361px){

    .card_mob2 {
        background-color: white;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.403);
        padding: 15px;
        width: 86vw;
        position: relative;
        transition: transform 0.3s ease;
        height: 32.5lvh;
        margin: 25px auto;


    }

    .why-txt {
        width: 92.6%;
    }

    .stack-cards__item {
        margin-left: 0;
        min-height: 289px;
    }

    .step{
        margin-left: 15px;
    }

    .step-title {
        text-align: left;
    }

    svg {
    width: 100%;
    height: 58lvh;
    margin-left: -2vh;
    }

    .s8_steps_p{
        font-size: 25px;
    }

    .s8_steps_h{
        font-size: 27px;
    }

    .s8_steps_1sec{
        transform: translate(-20px, 0px);
    }

    .footer-logo h1 {
        font-size: 37px;
        margin-top: 10px;
        height: 70px;
    }

    .technologies-content {
        flex-direction: column;
    }

}

@media (max-width: 344px){

    .card_mob2 {
        background-color: white;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.403);
        padding: 15px;
        width: 90vw;
        position: relative;
        transition: transform 0.3s ease;
        height: 28.5lvh;
        margin: 25px auto;
    }

   .cards-container_mobile {
        position: sticky;
        top: 0;
        height: 30%;
        overflow-x: hidden;
        overflow-y: hidden;
        padding-top: 100px;
    }


    .stack-cards__item {
        margin-left: 0;
        min-height: 260px;
    }


    .s8_steps_1sec {
        transform: translate(-26px, 0px);
    }

    .s8_steps_2sec{
        transform: translate(-6px, 0px);
    }

    .s8_steps_3sec{
        transform: translate(-10px, 0px);
    }

    .s8_steps_4sec{
        transform: translate(-13px, 0px);
    }

        .s8_steps_p {
        font-size: 25px;
        transform: translate(-20px, 0px);
    }


}