/* Start:/local/templates/skillpoint_2026/components/bitrix/menu/top-menu/style.min.css?1773259256490*/
ul.left-menu{list-style:none;margin:0;padding:0;margin-bottom:8px;position:relative}ul.left-menu li{padding:10px 16px;background:#f5f5f5 url(/local/templates/skillpoint_2026/components/bitrix/menu/top-menu/images/left_menu_bg.gif) top repeat-x}ul.left-menu li a{font-size:100%;color:#bc262c;font-weight:bold;text-decoration:none}ul.left-menu li a:visited{color:#bc262c}ul.left-menu li a:hover{color:#bc262c}ul.left-menu li a.selected:link,ul.left-menu li a.selected:visited,ul.left-menu li a.selected:active,ul.left-menu li a.selected:hover{color:#fc8d3d}
/* End */


/* Start:/local/templates/skillpoint_2026/components/bitrix/news.list/main-clients/style.css?1773253454150*/
div.news-list
{
	word-wrap: break-word;
}
div.news-list img.preview_picture
{
	float:left;
	margin:0 4px 6px 0;
}
.news-date-time {
	color:#486DAA;
}

/* End */


/* Start:/local/templates/skillpoint_2026/template_styles.css?177455385636724*/
* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
/*
Italic: 0 Optical Size: Auto Slant: 0 Width: 100
Weight: 300 – 900 
*/
html, body {
    font-family: "TikTok Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100;
}
header {
    width: 100%;
    height: auto;
    padding: 25px 20px;
    position: relative;
    z-index: 2;
    box-shadow: 0px 11px 14.2px 0px rgba(0, 0, 0, 0.02);
}
    header.main {
        background-color: rgba(0, 0, 0, 0.15);
        box-shadow: unset;
    }

header .logo {
    flex-grow: 1;
    margin-right: 100px;
}
    header .logo svg {
        width: 100px;
        color: #97B1C2;
    }
    header.main .logo svg {
        color: #ffffff;
    }

header .large-content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: normal;
    color: #696969;
    gap: 1rem;
}
    header.main .large-content {
        color: #ffffff;
    }

header .phone {
    flex-grow: 1;
    text-align: right;
    display: none;
}
    header .phone a {
        font-weight: 700;
        color: #000000;
    }
    header.main .phone a {
        font-weight: 700;
        color: #ffffff;
    }

header nav {
    display: none;
    flex-direction: row;
    gap: 2rem;
    flex-grow: 1;
}
    header nav a {
        color: #696969;
    }
        header nav a:hover {
        text-decoration: underline;
        }
    
    header nav a, header .phone a {
        text-decoration: none;
    }
        header.main nav a, header.main .phone a {
            color: #ffffff;
        }
        header.main nav a:hover, header.main .phone a:hover {
            text-decoration: underline;
        }

header .menu-toggler {
    color: #696969;
    cursor: pointer;
    transition: opacity 300ms;
}
    header.main .menu-toggler {
        color: #ffffff;
    }
    header .menu-toggler:hover {
    opacity: 0.8;
    }


main {
    padding: 0px 20px 40px;
}

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

.text-big {
    font-size: 18px;
    line-height: 28px;
}

.button {
    display: inline-flex;
    text-decoration: none;
    border-radius: 9px;
    color: #ffffff;
    align-content: center;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 300ms;
    user-select: none;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: white;
    border-radius: 8px;
}
    .button:hover {
        opacity: 0.8;
    }
    .button svg {
        margin-right: 10px;
    }
    .button.orange {
        background-color: #EF7E40;
        padding: 0px 20px;
        height: 48px;
    }
    .button.blue {
        background-color: #4469E3;
        height: 53px;
        padding: 0px 20px;
    }
    .button.blue.bordered {
        background-color: transparent;
        height: 44px;
        padding: 0px 20px;
        color: #4469E3;
        border: 2px solid #4469E3;
        display: inline-flex;
    }
    .button.year {
        background-color: #F5F5F5;
        color: #949494;
        font-weight: 400;
        height: 35px;
        border-radius: 100px;
    }
        .button.year:hover {
            text-decoration: underline;
        }
        .button.year.active {
            background-color: #1E3FA9;
            color: white;
        }

.large-content {
    max-width: 100rem;
    margin: auto;
}

.medium-content {
    max-width: 70rem;
    margin: auto;
}
    .mainpage .medium-content {
        max-width: 80rem;
        margin: auto;
    }

.main-banner {
    width: 100%;
    height: auto;
    min-height: 100vh;
    position: relative;
    color: #ffffff;
    margin-top: -100px;
    z-index: 1;
}
    .main-banner .banner-content {
        background: #000000;
        background: linear-gradient(0deg,rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0.3) 30%);
    }

    .main-banner h1 {
        font-weight: 600;
        font-size: 32px;
        line-height: 45px;
        max-width: 750px;
        margin: auto;
        text-align: center;
        padding-top: 150px;
        padding-bottom: 20px;
    }

    .main-banner p {
        font-size: 14px;
        max-width: 950px;
        margin: 15px auto;
        text-align: center;
        line-height: 23px;
    }

    .main-banner .background-image {
        width: 100%;
        height: 100%;
        min-height: 100%;
        background-size: cover;
    }

    .main-banner .medium-content {
        padding: 0px 20px;
        margin: auto;
    }

    .main-banner .buttons {
        margin: 40px 0px 0px;
    }

    .main-banner .button.blue {
        display: flex;
        margin: 20px 0px
    }
    
    .main-banner .line-brands {
        overflow: hidden;
    }

    
    .main-banner .line-brands p {
        padding: 0px 20px;
    }

        .main-banner .line-brands strong {
            font-size: 16px;
            display: block;
            margin-top: 20px;
        }

    .main-banner .brands {
        margin-top: 40px;
        display: flex;
        gap: 80px;
        overflow: hidden;
        padding-bottom: 40px;
        animation-name: slider;
        transform-style: preserve-3d;
        will-change: transform;
        animation-duration: 30s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        justify-content: space-between;
        align-items: stretch;
        width: 3000px;
        display: flex;
    }
        .main-banner .brands .line {
            display: flex;
            justify-content: space-around;
            width: 1500px;
            gap: 80px;
        }
        .main-banner .brands .line img {
            object-fit: cover;
            min-height: auto;
        }

    @keyframes slider {
        from {
            transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
        }
        to {
            transform: translate3d(-1540px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
        }
    }

h1 {
    font-size: 40px;
    line-height: 45px;
    font-weight: 600;
    padding: 10px 0px 0px;
}

h2, h3 {
    font-size: 35px;
    text-align: center;
    font-weight: 600;
    line-height: 45px;
}
    .news-detail h3 {
        color: #4469E3;
    }

h4 {
    font-size: 26px;
    margin-bottom: 15px;
    margin-top: 35px;
    font-weight: 600;
}
    .contacts h4 {
        color: #4469E3;
        font-size: 16px;
        text-transform: uppercase;
    }
    
ul {
    padding-left: 20px;
}
    ul li {
        margin-bottom: 15px;
    }

p {
    padding: 10px 0px;
}
.news-detail p:first-child {
    margin: 40px 0px 20px;
}

a {
    color: #4469E3;
}
a:hover {
    text-decoration: none;
}

.news-detail p:first-child + img {
    margin: 0px 0px 20px;
    max-width: 100%;
    border-radius: 16px;
}

.breadcrumbs {
    padding: 40px 0px 20px;
    color: #9399AF;
    font-size: 12px;
}
    .top-img + main .medium-content .breadcrumbs {
        padding: 0px 0px 40px;
    }
    .breadcrumbs a {
        color: #9399AF; 
    }
        .breadcrumbs a:hover {
            text-decoration: none;
        }
    .breadcrumbs div {
        display: inline-block;
        margin: 0px 15px;
    }

.mainpage {
    padding: 35px 20px;
}

.cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 50px auto;
    justify-content: space-around;
    gap: 20px
}

.cards .card {
    box-shadow: 0px 0px 32px -4px rgba(12, 12, 13, 0.1);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    color: #696969;
    transition: 500ms;
    font-size: 15px;
    border-radius: 16px;
    overflow: hidden;
    justify-content: space-between;
    background-color: #1E3FA9;
}
    .cards .card .left {
        padding: 90px 40px 45px;
        width: 400px;
        min-width: 400px;
        font-size: 15px;
        line-height: 22px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        will-change: contents;
    }
        .cards .card .left .description {
            flex-grow: 1;
            color: white;
        }
        .cards .card .button {
            color: white;
            border-color: white;
        }
        .cards .card .title {
            color: white;
            font-weight: 700;
            font-size: 28px;
            line-height: 40px;
            margin-bottom: 10px;
        }
        .cards .card img {
            height: 100%;
        }

    
.opportunities {
    width: 100%;
    margin: 80px auto;
    text-align: center;
}
    .opportunities p {
        font-size: 14px;
        line-height: 20px;
        color: #696969;
        max-width: 860px;
        margin: 20px auto 40px;
    }

    .opportunities .button {
        margin: auto;
    }

    .opp-images {
        display: flex;
        flex-direction: column;
        justify-items: center;
        margin: 40px 20px 0px;
    }
        .opp-images .col div {
            flex: 1 1 100%;
            min-width: 0;
            overflow: hidden;
        }

        .opp-images .col div img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 16px;
            margin-bottom: 0px;
        }


.promises {
    width: 100%;
    margin-top: 60px;
}

    .promises-block {
        display: flex;
        flex-direction: column;
        color: #696969;
        gap: 00px;
        margin: 40px 20px;
    }

    .promises-block {
        color: #696969;
    }
    .promises-block .promise {
        margin-bottom: 60px;
        font-size: 14px
    }
        .promises-block .promise strong {
            color: #1E3FA9;
            font-weight: 600;
            font-size: 32px;
            line-height: 40px;
            display: block;
            margin: 0px 0px 20px;
        }

        .promises-block .promise img {
            max-width: 100%;
            border-radius: 16px;
        }

.feedback {
    background-color: #F5F5F5;
    margin: 0px -20px;
    padding: 40px 0px;
}
    .feedback > p {
        color: #696969;
        text-align: center;
        margin: 40px 0px 20px;
    }

        .feedback .feedback-item {
            max-width: 100%;
            padding: 0px 50px;
            font-size: 14px;
        }
        .feedback-item > svg, .feedback-item > p  {
            margin-bottom: 20px;
        }
        .feedback-item strong {
            color: #1E3FA9;
            display: block;
            margin-bottom: 5px;
        }

    .feedback .arrows {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 20px;
    }

    .feedback .arrows > div {
        cursor: pointer;
        transition: 300ms;
        color: #4469E3;
    }
        .feedback .arrows > div:hover {
            color: #000000;
        }

.news {
    width: 100%;
    margin: 60px auto 0px;
    display: inline-flex;
    flex-direction: column;
    align-content: center;
}

    .news .news-block {
        display: flex;
        flex-direction: row;
        padding-top: 60px;
    }

        .news-block .news-line {
            grid-column-gap: 80px;
            column-count: 1;
            column-rule-width: 0px;
            align-content: start;
            width: 100%;
            padding-bottom: 0;
            display: block;
        }

        .news-block .news-item {
            display: inline-flex;
            flex-direction: column;
            flex-wrap: nowrap;
            padding-bottom: 50px;
            font-size: 14px;
            line-height: 20px;
        }
            .news-block .news-item strong {
                display: block;
                font-size: 20px;
                line-height: 26px;
                margin-bottom: 10px;
            }

        .news-item .imgblock {
            width: 100%;
            padding: 25% 0px;
            background-size: 100%;
            background-position: center;
            border-radius: 16px;
            margin-bottom: 40px;
        }
            .news-item .imgblock.vertical {
                padding: 60% 0px;
                background-size: cover;
                background-position: top left;
            }
        
        .news-item a.read-more {
            color: #4469E3;
            text-decoration: none;
            margin-top: 20px;
            transition: 300ms;
        }
            .news-item a.read-more:hover {
                color: black;
                text-decoration: underline;
            }
            .news-item a.read-more svg {
                margin-left: 10px;
            }

    .news .news-block img {
        display: flex;
        flex-direction: row;
    }

    .news-block img {
        max-width: 100%;
    }

    .news .button {
        display: block;
        margin: auto;
    }

footer {
    background-color: #2D3245;
    color: #9399AF;
}
    footer .top {
        padding: 80px 20px;
        font-size: 16px;
    }
        footer .top > * {
            width: 100%;
        }
    footer .bottom {
        background-color: #242837;
        color: #FFFFFF;
        padding: 40px 0px;
        font-size: 12px;
    }

    footer .top, footer .bottom .medium-content {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: space-around;
        gap: 20px;
    }
        footer .top > *, footer .bottom .medium-content > * {
            width: 100%;
        }
        footer .bottom .medium-content {
            align-items: center;
            padding: 0px 20px;
        }
        footer .bottom .copy a, footer .bottom .sp a {
            color: white;
            display: block;
        }
    footer .block {
        margin-bottom: 25px;
    }
        footer .block *:first-child {
            color: white;
        }

    footer .bottom-menu a {
        display: block;
        color: #9399AF;
        text-decoration: none;
        margin: 10px 0px;
    }
        footer .bottom-menu a:hover {
            text-decoration: underline;
        }
    footer .addresses {
        font-size: 14px;
    }
        footer .addresses p {
            margin-bottom: 10px;
            margin: 10px 0px;
        }
    footer .block a[href^="tel"] {
        color: #9399AF;
        font-weight: 700;
        text-decoration: none;
    }
    footer .block a[href^="mailto"] {
        color: #9399AF;
        text-decoration: underline;
    }

.upButton {
    position: fixed;
    width: 57px;
    height: 57px;
    background-color: #FFFFFF;
    border-radius: 22px;
    z-index: 2;
    bottom: 50px;
    right: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0px 0px 15px -5px #97B1C2;
    opacity: 0;
    transition: 500ms;
}
    .upButton svg {
        transition: 300ms;
    }
    .upButton:hover svg {
        transform: translateY(-10px);
    }

.services-list {
    display: flex;
    flex-direction: column;
    padding: 60px 0px;
    font-size: 14px;
}
    .services-list .service {
        margin-bottom: 60px;
    }
    .services-list strong {
        display: block;
        font-size: 16px;
        margin: 0px 0px;
    }
    .services-list p {
        margin-bottom: 10px;
    }
    .services-list img {
        max-width: 100%;
        border-radius: 16px;
    }
    .services-list .button {
        margin-top: 20px;
    }


.top-img {
    color: white;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    margin: 0px 0px 40px;
}
    .top-img .shadow {
        width: 100%;
        padding: 120px 0px 20px;
        background:  rgba(0, 0, 0, 0.7);
    }
    .top-img .shadow h1 {
        font-size: 24px;
        line-height: 30px;
    }

.batterfly {
    display: flex;
    flex-direction: column;
    margin-bottom: 60px;
}
    .batterfly .img {
        background-position: center;
        background-size: cover;
        border-radius: 10px;
    }
    .batterfly .line {
        text-align: center;
    }
    
        .batterfly.two-lines .line {
            padding: 0px 0px;
        }
            .batterfly.two-lines .line:first-child {
                text-align: right;
                padding-bottom: 4%;
                padding-right: 4%;
            }
            .batterfly.two-lines .line:last-child {
                text-align: left;
                padding-left: 4%;
            }

        .batterfly .line .img {
            display: inline-block;
            text-align: center;
            margin: 0px 5px;
        }


            .batterfly .line .img {
                width: 100%;
                aspect-ratio: 1.5 / 1;
            }


            .batterfly.one-line .line .img:first-child {
                width: 60%;
                aspect-ratio: 1.3 / 1;
            }
            .batterfly.one-line .line .img:last-child {
                width: 30%;
                aspect-ratio: 0.7 / 1;
            }
                .batterfly.one-img .line .img {
                    width: 100%;
                    aspect-ratio: 0.7 / 1;
                }

            .batterfly.two-lines .line:first-child .img:first-child {
                width: 60%;
                aspect-ratio: 1.3 / 1;
            }
            .batterfly.two-lines .line:first-child .img:last-child {
                width: 30%;
                aspect-ratio: 0.7 / 1;
            }

            
            .batterfly.two-lines .line:last-child .img:first-child {
                width: 60%;
                aspect-ratio: 1 / 0.7;
                vertical-align: top;
            }
            .batterfly.two-lines .line:last-child .img:last-child {
                width: 30%;
                aspect-ratio: 1 / 1.4;
                vertical-align: top;
            }

    .batterfly .text {
        font-size: 18px;
    }
        .batterfly .text p {
            margin: 20px 0px
        }

.contact:has(.button) {
    text-align: center;
    margin-top: 40px;
}

.projects-list {
    margin-top: 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
    .projects-list .project {
        display: block;
        color: white;
        text-decoration: none;
        border-radius: 10px;
        background-size: cover;
        background-position: center;
        position: relative;
    }
    .projects-list .project p {
        display: flex;
        align-items: end;
        padding: 20px 20px 30px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
        border-radius: 10px;
        font-size: 20px;
        line-height: 25px;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
    }

.project-gallery {
    width: 100%;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
    .project-gallery .image {
        border-radius: 16px;
        width: 100%;
        aspect-ratio: 16 / 9;
        background-position: center;
        background-size: cover;
    }

.buttons.about {
    margin: 20px 0px 20px;
}

    .buttons.about .button {
        padding: 0px 20px;
        height: 40px;
        margin-bottom: 5px;
    }

.team, .about-feedback {
    background-color: #F5F5F5;
    padding: 40px 0px;
    position: relative;
    left: 0px;
    margin: 60px -20px;
}
    .about-feedback {
        background-color: transparent;
    }

    .team .arrows {
        color: #4469E3;
        position: absolute;
        top: 40px;
        right: 20px;
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
        .team .arrows svg {
            width: 40px;
            height: 40px;
        }
        
    .team h3, .about-feedback h3 {
        padding: 0px 20px;
        text-align: left;
        font-size: 20px;
        margin-bottom: 60px;
    }

.team-slider img, .about-feedback img {
    border-radius: 16px;
    margin: 0px 10px;
}


.slick-dots {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 5px;
}
    .slick-dots button {
        font-size: 1px;
        color: transparent;
        width: 8px;
        height: 8px;
        border-radius: 18px;
        border: 0px;
        background-color: #D9D9D9;
    }
    .slick-dots .slick-active button {
        background-color: #4469E3;
    }

.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
}
    .pagination a, .pagination span {
        height: 34px;
        text-decoration: none;
        color: #9399AF;
        border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .pagination .page {
            aspect-ratio: 1 / 1;
            background-color: #F5F5F5;
        }
        .pagination .page.active {
            background-color: #EF7E40;
            color: white;
        }


.vacancys .vacancy-item {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    padding: 40px 0px;
    border-bottom: 1px solid #B6CBD8;
}
    .vacancys .vacancy-item:last-child {
        border: 0px;
    }

    .vacancy-item .title {
        color: #4469E3;
        font-size: 24px;
        line-height: 26px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .vacancy-item .payment {
        font-size: 24px;
        line-height: 26px;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .vacancy-item .date {
        color: #9399AF;
        font-size: 14px;
        line-height: 26px;
        margin-bottom: 15px;
    }

    .vacancy-item strong {
        display: block;
        margin: 0px 0px 10px;
    }

    .vacancy-item ul {
        margin-bottom: 10px;
    }
        .vacancy-item ul li {
            margin-bottom: 5px;
        }
        .vacancy-item .button {
            margin-top: 30px;
        }

@media (max-width: 550px) { /* работает от 550px и меньше */

    .cards .card {
        display: flex;
        flex-direction: column;
    }
    .cards .card .left, .cards .card .right {
        width: 100%;
        min-width: unset;
    }
        .cards .card .left {
            padding: 40px 40px 45px;
        }
        .cards .card .description {
            margin-bottom: 40px;
        }
        .cards .card img {
            width: 100%;
        }

}

@media (min-width: 768px) { /* работает от 768px и больше */

    .medium-content {
        padding: 0px 20px;
    }

    h1 {
        font-size: 50px;
        line-height: 55px;
        font-weight: 600;
        padding: 10px 0px 0px;
    }

    main {
        padding: 0px 0px 40px;
    }

    .breadcrumbs {
        padding: 60px 0px 40px;
        font-size: 14px;
    }
        .top-img + main .medium-content .breadcrumbs {
            padding: 20px 0px 40px;
        }
    .cards {
        width: 100%;
        display: flex;
        flex-direction: row;
        margin: 50px auto;
        max-width: 1240px;
        justify-content: space-around;
    }

        .cards .card {
            display: flex;
            flex-direction: row;
            width: 30%;
            height: 480px;
            background-color: transparent;
        }
        .cards .card .right {
            display: none;
            opacity: 0;
            overflow: hidden;
        }
            .cards .card .right img {
                min-height: 100%;
            }
        .cards .card .left {
            padding: 90px 40px 45px;
            width: 400px;
            min-width: 400px;
            font-size: 15px;
            line-height: 22px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            will-change: contents;
        }
            .cards .card .left .description {
                flex-grow: 1;
                color: #696969;
                max-width: 100%;
            }
            
        .cards .card .button {
            color: #4469E3;
            border-color: #4469E3;
        }

        .cards .card .title {
            color: #1E3FA9;
            font-weight: 700;
            font-size: 28px;
            line-height: 40px;
            margin-bottom: 10px;
        }
        .cards .card:last-child {
            background-color: #1E3FA9;
            color: white;
            width: 65%;
        }
            
            .cards .card:last-child .description {
                color: white;
            }
        .cards .card .button {
            max-width: 200px;
        }
            .cards .card:last-child .title {
                color: white;
            }
            .cards .card:last-child .button {
                border-color: white;
                color: white;
            }
            .cards .card:hover .right, .cards .card:last-child .right {
                display: block;
                opacity: 1;
            }

            .cards:hover .card .right {
                display: none;
                opacity: 0;
            }

            .cards:hover .card {
                background-color: white;
                color: #696969;
                width: 30%;
            }
                .cards:hover .card .button {
                    border-color: #4469E3;
                    color: #4469E3;
                }
                
                .cards:hover .card .title {
                    color: #4469E3;
                }

                .cards:hover .card:hover {
                    background-color: #1E3FA9;
                    color: white;
                    width: 65%;
                }
                    .cards:hover .card:hover .right {
                        display: block;
                        opacity: 1;
                    }
                    .cards:hover .card:hover .button {
                        border-color: white;
                        color: white;
                    }
                        .cards:hover .card .description {
                            color: #696969;
                        }
                        .cards:hover .card:hover .description {
                            color: white;
                        }
                    .cards:hover .card:hover .title {
                        color: white;
                    }

    .opp-images {
        display: flex;
        flex-direction: row;
        justify-items: center;
        margin-top: 40px;
        align-items: flex-start;
        gap: 16px;
    }

        .opp-images .col {
            display: flex;
            flex-direction: column;
            flex: 1;
            gap: 16px;
        }

    .promises {
        margin-top: 100px;
    }
    .promises-block {
        display: flex;
        flex-direction: column;
        color: #696969;
        gap: 80px;
        margin: 60px 20px;
    }

    .promises-block .promise {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 60px;
        margin: 0px;
    }
        .promises-block .promise:nth-child(even) {
            flex-direction: row-reverse;
        }
        .promises-block .promise strong {
            color: #1E3FA9;
            font-weight: 600;
            font-size: 45px;
            line-height: 55px;
            display: block;
        }

        .promises-block .promise img {
            max-width: 450px;
            border-radius: 16px;
        }

    

    .news .news-block {
        padding-top: 80px;
    }

    .news .news-block {
        display: flex;
        flex-direction: row;
        padding-top: 80px;
    }
        .news-block .news-line {
            grid-column-gap: 80px;
            column-count: 2;
            column-rule-width: 0px;
            align-content: start;
            width: 100%;
            display: block;
        }
        .news-block .news-item {
            padding-bottom: 80px;
        }
        .news-item a.read-more {
            margin-top: 40px;
        }

    .feedback {
        padding: 80px 0px;
        margin: 0px 0px;
    }
    .feedback .arrows {
        margin-top: 40px;
    }
    .feedback .feedback-item {
        padding: 0px 20px;
    }
    .feedback p {
        line-height: 22px;
    }

    footer .top, footer .bottom .medium-content {
        flex-direction: row;
        gap: 20px;
    }
    footer .top > * {
        width: 25%;
    }
    footer .top > *, footer .bottom .medium-content > * {
        width: 25%;
    }


    
    .services-list {
        display: flex;
        flex-direction: column;
        padding: 60px 0px 0px;
    }
        .services-list .service {
            margin-bottom: 80px;
            display: flex;
            flex-direction: row;
            gap: 60px;
        }
            .services-list .service:nth-child(even) {
                flex-direction: row-reverse;
            }
        
        .services-list strong {
            font-size: 20px;
            line-height: 27px;
        }
        .services-list p {
            margin-bottom: 10px;
            font-size: 14px;
            line-height: 20px;
        }
        .services-list img {
            max-width: 320px;
            border-radius: 16px;
        }
        .services-list .button {
            margin-top: 20px
        }


    .batterfly {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
        .batterfly .images {
            min-width: 480px;
        }
        
            .batterfly.two-lines .line {
                padding: 0px 0px;
            }
                .batterfly.two-lines .line:first-child {
                    padding-right: 0;
                }
                .batterfly.two-lines .line:last-child {
                    padding-left: 0;
                }

            .batterfly .line .img {
                display: inline-block;
                text-align: center;
                margin: 0px 5px;
            }


                .batterfly .line .img {
                    width: 100%;
                    aspect-ratio: 1.5 / 1;
                }

                .batterfly.one-line .line .img:first-child {
                    width: 260px;
                    height: 190px;
                }
                .batterfly.one-line .line .img:last-child {
                    width: 137px;
                    height: 170px;
                }

                .batterfly.two-lines .line:first-child .img:first-child {
                    width: 260px;
                    height: 190px;
                }
                .batterfly.two-lines .line:first-child .img:last-child {
                    width: 137px;
                    height: 170px;
                }

                
                .batterfly.two-lines .line:last-child .img:last-child {
                    width: 159px;
                    height: 211px;
                    vertical-align: top;
                }
                .batterfly.two-lines .line:last-child .img:first-child {
                    width: 247px;
                    height: 171px;
                    vertical-align: top;
                }

        .batterfly .text {
            font-size: 20px;
            padding-left: 70px;
                line-height: 28px
        }
            .batterfly .text p {
                margin: 0px 0px;
            }

        .top-img .shadow {
            width: 100%;
            padding: 400px 0px 20px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22.32%, rgba(0, 0, 0, 0.7) 100%);
        }
        .top-img .shadow h1 {
            font-size: 40px;
            line-height: 49px;
            max-width: 70rem;
            margin: auto;
            text-align: center;
            padding-bottom: 60px;
        }

    .projects-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-items: center;
    }
    .projects-list .project {
        width: 30%;
        aspect-ratio: 1.6 / 1;
    }

    .project-gallery {
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 60px;
    }
        .project-gallery .image {
            display: inline-block;
        }
        .project-gallery .image:nth-child(1),
        .project-gallery .image:nth-child(6),
        .project-gallery .image:nth-child(11),
        .project-gallery .image:nth-child(16),
        .project-gallery .image:nth-child(21),
        .project-gallery .image:nth-child(26) {
            width: calc(50% - 20px)
        }
        
        .project-gallery .image:nth-child(2),
        .project-gallery .image:nth-child(7),
        .project-gallery .image:nth-child(12),
        .project-gallery .image:nth-child(17),
        .project-gallery .image:nth-child(22),
        .project-gallery .image:nth-child(27) {
            width: calc(50% - 20px)
        }
        
        .project-gallery .image:nth-child(3),
        .project-gallery .image:nth-child(8),
        .project-gallery .image:nth-child(13),
        .project-gallery .image:nth-child(18),
        .project-gallery .image:nth-child(23),
        .project-gallery .image:nth-child(28) {
            width: calc(33.33% - 20px);
        }
        
        .project-gallery .image:nth-child(4),
        .project-gallery .image:nth-child(9),
        .project-gallery .image:nth-child(14),
        .project-gallery .image:nth-child(19),
        .project-gallery .image:nth-child(24),
        .project-gallery .image:nth-child(29) {
            width: calc(33.33% - 20px);
        }
        
        .project-gallery .image:nth-child(5),
        .project-gallery .image:nth-child(10),
        .project-gallery .image:nth-child(15),
        .project-gallery .image:nth-child(20),
        .project-gallery .image:nth-child(25),
        .project-gallery .image:nth-child(30) {
            width: calc(33.33% - 20px);
        }

    .team, .about-feedback {
        padding: 40px 0px 80px;
    }
    .team h3, .about-feedback h3 {
        max-width: 70rem;
        font-size: 26px;
        margin-bottom: 0px;
    }
    
        .team .arrows {
            position: relative;
            max-width: 70rem;
            margin: auto;
            display: flex;
            flex-direction: row;
            top: -50px;
            justify-content: right;
        }
        .team .arrows svg {
            width: 58px;
            height: 60px;
        }
    
    .about-feedback .about-feedback-slider {
        max-width: 70rem;
        margin: 40px auto;
    }

    .vacancy-item .button {
        max-width: 260px;
    }

}

@media (max-width: 1400px) {  /* работает от 1400px и меньше */
    header .logo {
        margin-right: unset;
    }
}
@media (max-width: 1300px) {  /* работает от 1300px и меньше */
    header nav {
        gap: 1rem;
    }
}

@media (min-width: 1200px) {  /* работает от 1200px и больше */

    .main-banner .brands {
        width: 200vw;
        animation-name: slider;
        padding-bottom: 80px;
    }
        .main-banner .brands .line {
            width: 100vw;
        }

    .main-banner .line-brands {
        padding-top: 40px;
    }

    @keyframes slider {
        from {
            transform: translate3d(0vw, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
        }
        to {
            transform: translate3d(calc(-100vw - 40px), 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
        }
    }

    header nav {
        display: flex;
    }
    header .large-content {
        gap: 2rem;
    }
    header .phone {
        display: block;
    }
    header .logo {
        flex-grow: 0;
    }
        header .logo svg {
            width: 130px;
        }
    header .menu-toggler {
        display: none;
    }
    .button.orange {
        padding: 0px 45px;
    }
    .button.blue {
        padding: 0px 65px;
    }

    .main-banner h1 {
        font-size: 50px;
        padding-top: 230px;
        line-height: 55px;
    }

    .main-banner p {
        font-size: 16px;
        line-height: 23px;
        margin: 20px auto;
    }

    .main-banner p strong {
        font-size: 16px;
        line-height: 21px;
    }

    .main-banner .buttons {
        text-align: center;
    }

    .main-banner .button.blue {
        display: inline-flex;
        margin: 20px 10px;
    }

    h2, h3 {
        font-size: 50px;
        max-width: 780px;
        margin: auto;
        line-height: 55px;
    }
    .mainpage {
        padding: 80px 0px;
    }

    
    .opportunities p {
        font-size: 16px;
        line-height: 26px;
        margin: 20px auto 40px;
    }
    
}
/* End */
/* /local/templates/skillpoint_2026/components/bitrix/menu/top-menu/style.min.css?1773259256490 */
/* /local/templates/skillpoint_2026/components/bitrix/news.list/main-clients/style.css?1773253454150 */
/* /local/templates/skillpoint_2026/template_styles.css?177455385636724 */