@font-face{
    font-family: 'Inter-Regular';
    src: url(../fonts/Inter-Regular.ttf);
}
@font-face{
    font-family: 'Inter-Light';
    src: url(../fonts/Inter-Light.ttf);
}
@font-face{
    font-family: 'Inter-SemiBold';
    src: url(../fonts/Inter-SemiBold.ttf);
}
@font-face{
    font-family: 'Inter-Black';
    src: url(../fonts/Inter-Black.ttf);
}
@font-face{
    font-family: 'Inter-ExtraBold';
    src: url(../fonts/Inter-ExtraBold.ttf);
}
@font-face{
    font-family: 'Inter-Bold';
    src: url(../fonts/Inter-Bold.ttf);
}
@font-face{
    font-family: 'Inter-ExtraLight';
    src: url(../fonts/Inter-ExtraLight.ttf);
}
@font-face{
    font-family: 'Inter-Medium';
    src: url(../fonts/Inter-Medium.ttf);
}
@font-face{
    font-family: 'Inter-Thin';
    src: url(../fonts/Inter-Thin.ttf);
}
*{
    margin: 0;
    padding: 0;
    line-height: 1.5;
    letter-spacing: 1px;
    font-family: 'Inter-Regular';
}
b {
    font-family: 'Inter-Bold';
}

    /*body {*/
    /*    min-width: 1200px;*/
    /*}*/
.error{
    color: red !important;
    font-size: 14px;
}
.wrap{
    width: 1200px;
    margin: 0 auto;
}
.contact_header span{
    font-size: 15px;
    color: white !important;
}
.contact_header a {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 10px;
}
.contact_header a img {
    margin-right: 10px;
}


header .nav {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    margin: 0 auto 0 auto;
}


 header {
     width: 100%;
     background: #000000;
     position: relative;
     z-index: 99;
}
.padd {
    padding: 0 20px;
}
.scroll-link {
    cursor: pointer;
    transition: color 0.3s;
}
.title-header .link-two-line {
    position: relative;
    color: white;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    margin-top: 0;
}

.title-header .link-two-line:after {
    display: block;
    position: absolute;
    left: 41px;
    width: 0;
    height: 2px;
    background: url(../img/icons/line_title.svg) no-repeat;
    transition: width 0.4s ease-out;
    content: '';
}

.title-header a {
    position: relative;
    color: white;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    margin-top: 12px;

}
.title-header a:after {
    display: block;
    position: absolute;
    left: 41px;
    width: 0;
    height: 2px;
    background: url(../img/icons/line_title.svg) no-repeat;
    transition: width 0.4s ease-out;
    content: '';
}
.title-header:hover a.link1.hovered:after {
    width: 350px
}
.title-header:hover a.link2.hovered:after {
    width: 520px
}
.title-header:hover a.link3:hover:after {
    width: 350px
}
.title-header:hover a.link4:hover:after {
    width: 450px
}



 #main_header .title-header{
     position: absolute;
     top: 250px;
     left: 490px;
     z-index: 1;
     width: 700px;
     border-radius: 10px;
     background: #000000;
     display: flex;
     justify-content: center;
 }

 .title-header a {
     text-decoration: none; /* Удаление подчеркивания (если оно есть) */
     color: inherit; /* Сохранение цвета текста как у родительского элемента */
     background-color: transparent; /* Удаление фонового цвета (если есть) */
     font-weight: inherit; /* Сохранение настройки жирности шрифта как у родительского элемента */
     /* Дополнительные свойства, которые вы хотите сбросить */
 }

.title-header .one{
    margin-left: 40px;
    width: 350px;
    height: 2px;
    background: url(../img/icons/line_title.svg) no-repeat;
}
.title-header .two{
    margin-left: 40px;
    height: 2px;
    background: url(../img/icons/line_two.svg) no-repeat;
}
.title-header .three{
    width: 350px;
    margin-left: 40px;
    height: 2px;
    background: url(../img/icons/line_three.svg) no-repeat;
}
.title-header .four{
    width: 450px;
    margin-left: 40px;
    height: 2px;
    background: url(../img/icons/line_four.svg) no-repeat;
}

 .title-header div{
     margin: 30px 30px 30px 30px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .title-header h3 {
     font-family: Inter-Bold;
    font-size: 32px;
     color: white;

 }

.title-link{
    display: block;
    padding-left: 40px;
    background: url(../img/icons/title_link2.svg) no-repeat left center;
}

#border {
    height: 10px;
    background: url(../img/icons/border.svg) ;
}
#border_white {
    height: 10px;
    background: url(../border_white.svg) ;
}

.we {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.we h1{
    margin: 20px 0 4px 0;
    font-size: 45px;
}

.line {
    height: 60px;
    width: 3px;
    background: url(../img/line.png) ;
}

.circle {
    min-height: 131px;
    height: 131px;
    width: 131px;
    background: url(../img/icons/circle.png) ;
}
.circle-white {
    height: 131px;
    width: 131px;
    background: url(../img/icons/circle-white.svg) ;
}
.circle-white img{
    padding-top: 35px;
}
.circle img{
    padding-top: 28px;
}
.we .items-right{
    margin-left: 380px;
    display: flex;
    align-items: center
}

 .text-right {
     width: 350px;
     text-align: left; /* Выравнивание текста справа */
     margin-left: 30px;
}

.text-left {
    width: 350px;
    /*text-align: right; !* Выравнивание текста слева *!*/
    margin-left: 30px;
}
.we .items-left{
    margin-right: 375px;
    display: flex;
    align-items: center
}

#presentation {
    background:  black;
    padding-bottom: 30px;
}

#presentation .presentation-items{
    width: 850px;
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
}

#presentation .presentation-item {
    border-radius: 30px;
    /*margin-right: 20px;*/
    text-align: center; /* Центрирование содержимого по горизонтали */
}

#presentation .presentation-item img {
    display: block; /* Убирает лишние отступы вокруг изображения */
    margin: 0 auto; /* Центрирование изображения по горизонтали */
    max-width: 100%;
    height: auto;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: '';
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-prev:after {
    content: '';
}
#presentation .swiper-button-prev,
#presentation .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
}


 #presentation .swiper-button-next {
     position: relative !important;
     float: right;
     top: -225px;
     right: 70px;
     background: url("../img/icons/white-button-right.svg") no-repeat right 4px;
 }
#presentation .swiper-button-prev {
    position: relative !important;
    top: 275px;
    left: 60px;
    background: url("../img/icons/white-button-left.svg") no-repeat right 4px;
}
.presentation-link {
    text-align: center;
    color: #fff;
    margin-top: 30px;
}
.presentation-link a {
    color: #fff;
}

#portfolio-one .swiper-button-prev,
#portfolio-one .swiper-button-next,
#portfolio-two .swiper-button-prev,
#portfolio-two .swiper-button-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
}

#portfolio-one .swiper-button-next {
    position: relative !important;
    float: right;
    top: -215px;
    right: 5px;
    background: url("../img/icons/slider-button-right.svg") no-repeat right 4px;
}
#portfolio-one .swiper-button-prev {
    position: relative !important;
    top: 200px;
    left: 5px;
    background: url("../img/icons/slider-button-left.svg") no-repeat right 4px;
}
#portfolio-two .swiper-button-next {
    position: relative !important;
    float: right;
    top: -160px;
    right: 5px;
    background: url("../img/icons/slider-button-right.svg") no-repeat right 4px;
}
#portfolio-two .swiper-button-prev {
    position: relative !important;
    top: 200px;
    left: 5px;
    background: url("../img/icons/slider-button-left.svg") no-repeat right 4px;
}




#presentation h1 {
    padding-top: 33px;
    margin: 0 0 33px 0;
    color: white;
    text-align: center;
    font-size: 45px;
}

#sites {
    position: relative;
}
#building-sales{
    position: relative;
    padding-bottom: 50px;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 50%; /* Разделение на две равные части */
    background-repeat: no-repeat;
    background-position: left top, right top;
    z-index: -1;
}

.background-image-1 {
    background-image: url('../img/lines/sites_vector_1.svg');

}

.background-image-2 {
    width: 430px;
    left: 225px;
    top: 35%;
    background-image: url('../img/lines/sites_vector_2.svg');
}
.background-image-3 {
    width: 200px;
    left: 60%;
    top: 59%;
    background-image: url('../img/lines/sites_vector_3.svg');
}
.background-image-4 {
    top: 90%;
    background-image: url('../img/lines/sites_vector_4.svg');
}
#building-sales .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 480px;
    height: 50%; /* Разделение на две равные части */
    background-repeat: no-repeat;
    background-position: left top, right top;
    z-index: 0;
}
#building-sales .background-image-5 {
    left: 68px;
    height: 380px;
    background-image: url('../img/lines/white-line-1.svg');
}
#building-sales .background-image-6 {
    left: 600px;
    height: 213px;
    top: 302px;
    background-image: url('../img/lines/white-line-2.svg');
}
#building-sales .background-image-7 {
    width: 870px;
    height: 400px;
    left: 225px;
    top: 670px;
    background-image: url('../img/lines/white-line-3.svg');
}

#sites h1 {
    padding-top: 33px;
    margin: 0 0 33px 0;
    text-align: center;
    font-size: 45px;
}

#sites .items-right{
    margin: 20px 0 0 10%;
    display: flex;
    align-items: center
}
#building-sales .items-right{
    margin: 50px 0 0 140px;
    display: flex;
    align-items: center
}
#sites .mob-app .items-right {
    margin: 20px 0 0 0;
}
#sites .mob-app {
    float: right;

}

#sites .button {
    margin: 20px 0;
    font-family: Inter-Bold;
    background-color: #000000;
    border-radius: 10px;
    color: white;
    padding: 2px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    transition-duration: 0.4s;
    border: 1px solid black;
}
#sites .button:hover {
    border: 1px solid black;
    background-color: white;
    color: black;
    cursor: pointer;
}

#sites .developer-sites {
    margin: 30% 5px 0 0;
}
#sites  .developer-sites .items-right{
    margin: 0 0 0 10%;
    height: 270px;
    margin-top: -65px;
}
#sites  .developer-sites .items-right .big {
    width: 475px;
}
#sites .big  {
    width: 480px;
}

#sites h3{
    font-size: 24px;
    margin: 20px 0;
    font-family: Inter-Bold;
}
#portfolio-one .portfolio-border {
    border: 2px solid black; /* Граница 2px solid черного цвета */
    border-radius: 30px; /* Закругление углов, можно настроить по вашему усмотрению */
    display: inline-block;
    margin-right: 25px;
}
#portfolio-one {
    --swiper-theme-color: #000;
    padding-bottom: 70px;
}
#portfolio-two {
    --swiper-theme-color: #000;
}

.portfolio-one-swiper, .portfolio-two-swiper {
    padding-bottom: 50px;
}

#portfolio-one .portfolio-one-items{
    width: 1000px;
    display: flex;
    justify-content: space-between;
}

#portfolio-one .portfolio-one-item {
    display: flex;
    align-items: center;   /* Центрирование содержимого по горизонтали */
}

#portfolio-one .portfolio-one-item img {
    display: block; /* Убирает лишние отступы вокруг изображения */
    max-width: 600px; /* Чтобы изображение не выходило за пределы родительского элемента */
    border-radius: 28px; /* Центрирование изображения по горизонтали */
}

#portfolio-one h1{
    margin: 0 0 33px 0;
    text-align: center;
    font-size: 45px;
}

.text-slider {
    font-size: 24px;
    text-align: left;
}

#building-sales h1 {
    color: white;
    padding-top: 33px;
    margin: 0 0 33px 0;
    text-align: center;
    font-size: 45px;
}
#building-sales p, #building-sales h3  {
    color: white;
}

.yandex {
    margin: 5%  0 0 32%;
}

.mail {
    margin: 12%  0 0 -5px;
}
.vkontakte {
    margin: 10%  0 20px 32%;
}
.vkontakte .items-right .text-left {
    margin-top: -80px;
    height: 300px;
}

#building-sales .button {
    z-index: 1;
    margin: 20px 0;
    font-family: Inter-Bold;
    background-color: white;
    border: 2px solid black;
    border-radius: 7px;
    color: black;
    padding: 2px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    transition-duration: 0.4s;
}
#building-sales .button:hover {
    border: 2px solid white;
    background-color: black;
    color: white;
    cursor: pointer;
}
#contacts .button {
    z-index: 1;
    margin: 20px 0;
    font-family: Inter-Bold;
    background-color: white;
    border-radius: 10px;
    color: black;
    padding: 2px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    transition-duration: 0.4s;
}
#contacts .button:hover {
    border: 2px solid white;
    background-color: black;
    color: white;
    cursor: pointer;
}

.button-center {
    display: flex;
    justify-content: center; /* Горизонтальное выравнивание по центру */
    align-items: center;
}

#individual-projects .we {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#individual-projects .we h1{
    margin: 37px 0 17px 0;
    font-size: 45px;
}

#individual-projects .we .items-right{
    margin-left: 380px;
    display: flex;
    align-items: center
}


#individual-projects .we .items-left{
    margin-right: 380px;
    display: flex;
    align-items: center
}
#individual-projects .circle {
    display: flex;
    align-items: center;
    justify-content: center;
}
#individual-projects .circle img {
    padding: 0;
    width: 80px;
    height: 80px;
}

#portfolio-two .portfolio-border {
    border: 2px solid black; /* Граница 2px solid черного цвета */
    border-radius: 30px; /* Закругление углов, можно настроить по вашему усмотрению */
    display: inline-block;
    margin-right: 25px;
}
#portfolio-two {
    padding-bottom: 70px;
}

#portfolio-two .portfolio-two-items{
    width: 1000px;
    display: flex;
    justify-content: space-between;
}

#portfolio-two .portfolio-two-item {
    display: flex;
    align-items: center;   /* Центрирование содержимого по горизонтали */
}

#portfolio-two .portfolio-two-item img {
    display: block; /* Убирает лишние отступы вокруг изображения */
    max-width: 600px; /* Чтобы изображение не выходило за пределы родительского элемента */
    border-radius: 30px; /* Центрирование изображения по горизонтали */
}

#portfolio-two h1{
    margin: 0 0 33px 0;
    text-align: center;
    font-size: 45px;
}


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

#contacts p,
#contacts h3,
#contacts h1,
#contacts h2{
    color: white;
}

#contacts h1{
    padding-top: 33px;
    margin: 0 0 50px 0;
    text-align: center;
    font-size: 45px;
}
.contact_footer span{
    font-size: 20px;
    color: white !important;
}
.contact_footer a {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin: 25px 0;
}
.contact_footer a img {
    margin-right: 20px;

}

 .row {
     display: flex;
     justify-content: center;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     margin-right: -15px;
     margin-left: -15px;
 }

form input{
    margin: 20px 0;
    background: #fff;
    border: 1px solid #dddfde;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 16px;
    width: 95%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    letter-spacing: 1px;
}
.swiper {
    user-select: none;
}